.icon-round-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em; /* Adjust the width and height as needed for your round button */
    height: 3em;
    background-color: #f5f9fd; /* Example background color */
    border-radius: 50%;
}

/* Change the color when the radio button is checked */
input[type="radio"].btn-check:checked + label .icon-f svg path {
    fill: white; /* Change this to the desired svg color */
    background-color: #3498db; /* Example background color */
}

/* Change the color when the radio button is checked */
input[type="radio"].btn-check:checked + label .icon-s svg path {
    stroke: white; /* Change this to the desired svg color */
    background-color: #3498db; /* Example background color */
}

input[type="radio"].btn-check:checked + label .icon-round-button {
    color: white; /*Change this to the desired text color */
    background-color: #3498db; /* Example background color */
    /*transition: color 0.3s ease;*/
}

input[type="radio"].btn-check:checked + label .lbl-text {
    color: white; /*Change this to the desired text color */
    /*transition: color 0.3s ease;*/
}

.card-body-plan {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top */
    align-items: center;
    height: 100%; /* Make sure the card body takes full height */
}

.icon-plan-round-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em; /* Adjust the width and height as needed for your round button */
    height: 3em;
    background-color: #EBF3FC; /* Example background color */
    border-radius: 50%;
    margin-bottom: 1rem; /* Add some space between icon and text */
}


.flex-start-plan {
    align-self: flex-start; /* Align text to the top */
    /* Add styles for your text content here */
}


.icon-sort-down {
    content: url('./svg/SortDown.svg');
    /* display: block;*/ /* display: block;*/
    height: 1.5em;
    width: 1.5em;
    user-select: none;
}

.icon-sort-up {
    content: url('./svg/SortUp.svg');
    /* display: block;*/ /* display: block;*/
    height: 1.5em;
    width: 1.5em;
    user-select: none;
}

.icon-sort-downup {
    content: url('./svg/SortDownUP.svg');
    /* display: block;*/ /* display: block;*/
    height: 1.5em;
    width: 1.5em;
    user-select: none;
}

.icon-chevron-left {
    content: url('./svg/ChevronLeft.svg');
    /* display: block;*/ /* display: block;*/
    height: 1.5em;
    width: 1.5em;
}

.icon-gear {
    content: url('./svg/Gear.svg');
    /* display: block;*/ /* display: block;*/
    height: 1.5em;
    width: 1.5em;
}

.icon-save {
    content: url('./svg/Save.svg');
    height: 1.5em;
    width: 1.5em;
    display: block;
}

.icon-close {
    content: url('./svg/Close.svg');
    display: block;
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
}

.icon-filter {
    content: url('./svg/Filter.svg');
    display: block;
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
    height: 1.5em;
    width: 1.5em;
}

.icon-yesno {
    content: url('./svg/BoolYesNo.svg');
    display: block;
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
    height: 1.5em;
    width: 1.5em;
}


.icon-yes {
    content: url('./svg/BoolYes.svg');
    display: block;
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
    height: 1.5em;
    width: 1.5em;
}

.icon-no {
    content: url('./svg/BoolNo.svg');
    display: block;
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
    height: 1.5em;
    width: 1.5em;
}


.icon-yes {
    content: url('./svg/BoolYes.svg');
    display: block;
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
    height: 1.5em;
    width: 1.5em;
}

.icon-bin {
    content: url('./svg/Bin.svg');
    /* display: block; */
    /* display: block;*/ /* display: block;*/
    /*    height: 1.5em;
    width: 1.5em;*/
    height: 33px;
    width: 32px
}


.icon-command {
    content: url('./svg/command.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-add-square {
    content: url('./svg/add-square.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-programming-arrows {
    content: url('./svg/programming-arrows.svg');
    height: 1.5em;
    width: 1.5em;
}


.icon-programming-data {
    content: url('./svg/programming-data.svg');
    height: 1.5em;
    width: 1.5em;
}


.icon-megaphone {
    content: url('./svg/megaphone.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-book {
    content: url('./svg/book.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-server {
    content: url('./svg/server.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-cube {
    content: url('./svg/cube.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-arrow-up-circle {
    content: url('./svg/arrow-up-circle.svg');
    height: 1.5em;
    width: 1.5em;
}



.icon-check-circle {
    content: url('./svg/CheckCircle.svg');
    height: 1.5em;
    width: 1.5em;
}

.icon-check-no-circle {
    content: url('./svg/CheckNoCircle.svg');
    height: 1.5em;
    width: 1.5em;
}


/* Align the icon vertically within the <td> */
.icon-align {
    display: inline-block;
    vertical-align: middle;
}


.icon-yellow-h:hover {
    position: absolute;
    background: #f9ec68;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.icon-blue-h:hover {
    position: absolute;
    background: #c0defb;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.icon-red-h:hover {
    position: absolute;
    background: #f39e9e;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.icon-red-d {
    right: 36px;
    top: -18px;
    border: 1px solid #dbdbdb;
}


.icon-red-d-d {
    right: -13px;
    top: -18px;
    border: 1px solid #dbdbdb;
}

.icon-yellow-b {
    position: absolute;
    background: #FEFCE8;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.icon-blue-b {
    position: absolute;
    background: #F5F9FD;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.icon-red-b {
    position: absolute;
    background: #FEF2F2;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}


.icon-blue-b-np {

    --bs-btn-color: #056ad5;
    --bs-btn-bg: #dceeff;
    /* --bs-btn-border-color: #056ad5; */
    --bs-btn-hover-color: #056ad5;
    --bs-btn-hover-bg: #c0defb;
    /* --bs-btn-hover-border-color: #565e64; */
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #056ad5;
    --bs-btn-active-bg: #dceeff;
    --bs-btn-active-border-color: #dceeff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;

}

.icon-red-b-np {
    background: #FEF2F2;
    padding: 5px;
 /*   border-radius: 5px;*/
    cursor: pointer;
}



.icon-red-h-np:hover {
    background: #f39e9e;
    padding: 5px;
 /*   border-radius: 5px;*/
    cursor: pointer;
}



.icon-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}