@import "../client/clientVars.css";

/*
    font sizes
    body font size is 13px 0.8125rem
*/

.fs-10 {
   font-size:0.625rem; 
}
.fs-11 {
    font-size: 0.6875rem;
}
.fs-12 {
    font-size: 0.75rem;
}
.fs-13 {
    font-size: 0.8125rem;
}
.fs-14 {
    font-size: 0.875rem;
}
.fs-15 {
    font-size: 0.9375rem;
}
.fs-16 {
    font-size: 1rem;
}
.fs-17 {
    font-size: 1.0625rem;
}
.fs-18 {
    font-size: 1.125rem;
}
.fs-19 {
    font-size: 1.1875rem;
}
.fs-20 {
    font-size: 1.25rem;
}
.fs-24 {
    font-size: 1.5rem;
}
.fs-28 {
    font-size: 1.75rem;
}
.fs-32 {
    font-size: 2rem;
}
.fs-48 {
    font-size: 3rem;
}
.fs-56 {
    font-size: 3.5rem;
}
.one-line-text {
    display:-webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
/*  clubi colors  */
.clubi-blue {
    color: var(--clubi-blue);
}
.clubi-dark-blue{
    color:var(--clubi-dark-blue);
}
.clubi-teal{
    color:var(--clubi-teal);
}
.clubi-red{
    color:var(--clubi-red);
}
.clubi-orange{
    color:var(--clubi-orange);
}
.clubi-yellow{
    color:var(--clubi-yellow);
}
.clubi-green{
    color:var(--clubi-green);
}
.clubi-purple{
    color:var(--clubi-purple);
}
.clubi-gray {
    color: #878787;
}
/*  clubi background colors  */
.clubi-bg-blue{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-blue);
}
.clubi-bg-blue-light{
    color:var(--clubi-blue) !important;
    background-color: var(--clubi-blue-light);
}
.clubi-bg-dark-blue{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-dark-blue);
}
.clubi-bg-teal{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-teal);
}
.clubi-bg-red{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-red);
}
.clubi-bg-orange{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-orange);
}
.clubi-bg-orange-light{
    color:var(--clubi-orange) !important;
    background-color: var(--clubi-orange-light);
}
.clubi-bg-yellow{
    color:var(--body-text-dark) !important;
    background-color: var(--clubi-yellow);
}
.clubi-bg-green{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-green);
}
.clubi-bg-green-light{
    color:var(--body-text-dark) !important;
    background-color: var(--clubi-green-light);
}
.clubi-bg-purple{
    color:var(--body-text-light) !important;
    background-color: var(--clubi-purple);
}
.clubi-bg-purple-light{
    color:var(--clubi-purple) !important;
    background-color: var(--clubi-purple-light);
}
.clubi-bg-gray{
    background-color: var(--clubi-gray);
}

/*  clubi border colors  */
.clubi-border-blue{
    border-color: var(--clubi-blue) !important;
}

.clubi-border-dark-blue{
    border-color: var(--clubi-dark-blue) !important;
}
.clubi-border-teal{
    border-color: var(--clubi-teal) !important;
}
.clubi-border-red{
    border-color: var(--clubi-red) !important;
}
.clubi-border-orange{
    border-color: var(--clubi-orange) !important;
}

.clubi-border-yellow{
    border-color: var(--clubi-yellow) !important;
}
.clubi-border-green{
    border-color: var(--clubi-green) !important;
}

.clubi-border-purple{
    border-color: var(--clubi-purple) !important;
}

/* height width 100%  */
.hp-100 {
    height:100%;
}

.wp-100 {
    width: 100%;
}


/* font size override  */
.h1, h1{
    font-size: 24px;
    font-weight: bold;
}
.h2, h2{
    font-size: 20px;
    font-weight: bold;
}
.h3, h3{
    font-size: 18px;
    font-weight: bold;
}
.h4, h4{
    font-size: 16px;
    font-weight: bold;
}
.h5, h5{
    font-size: 15px;
    font-weight: bold;
}
.h6, h6{
    font-size: 13px;
    font-weight: bold;
}


.gap-10 {
    gap:10px;
}
.gap-8 {
    gap: 8px;
}
.gap-8 {
    gap: 5px;
}
.gap-16 {
    gap: 16px;
}

.grid-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
    row-gap:1rem;
    column-gap:0;
}

.overline {
    text-decoration:line-through;
}

.pre {
    white-space: pre-wrap; /* CSS3 browsers  */
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap; /* Opera 4 thru 6 */
    white-space: -o-pre-wrap; /* Opera 7 and up */
    word-wrap: break-word !important; /* IE 5.5+ and up */
    overflow-wrap: break-word;
    word-break: keep-all;
}

/*  course card */
.course-card{
    width: 100%;
    background-color: white;
    padding: 1em;
    border-radius: 0.5rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    text-align: left;
    font-size: 0.8rem !important;
    position:relative;
}


.course-card .branch {
    font-size: 0.6rem; 
    display:flex;
    justify-content:start;
    align-items:center;
    gap:5px;
}

.course-img{
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 0.5em;
    background-size: cover;
    background-position: center;
    flex: 1;    
}

.course-name{
    width: 50%;
    padding-left: 1em;
    flex: 1;
}
.course-name span{
    background-color: var(--body-text-dark);
    color:var(--body-text-light);
    font-size: 0.6rem;
    padding: 3px 7px;
    border-radius: 1000px;
}

.course-name h1{
    color:var(--body-text-dark);
    font-size: 1rem;
    font-weight:bold;
    margin:0;
}
.course-name p{    
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    
}
.course-occurrence{
    background-color: #F3F8F9;
    color: var(--body-text-dark);
    border-radius: 50px;
    height: 24px;
   
    font-size: 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;

}
.course-occurrence-multi {
    background-color: #F3F8F9;
    color: var(--body-text-dark);
    border-radius: 0.5rem;

    font-size: 10px;
   

    display: flex; flex-direction: column; align-items: center; 
}
.course-occurrence-day-multi {
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 0.5rem;
    background-color: #FFCDA8;
    width: 100%;
    color: #F03C03;
    display: inline-flex;
    justify-content: start;
    align-items: center;
}
.course-occurrence-time-multi {
    padding: 0 10px;
    display: grid;
    grid-gap: 0.2rem;
    margin: 0.2rem 0;
}
.course-occurrence-day {
    border-radius: 999px;
    height: 24px;
    min-width: 24px;
    width: auto;
    background-color: #FFCDA8;
    color: #F03C03;
    margin-right: 5px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: center;
    font-weight: bold;
    padding: 0 6px;
}
.course-occurrence-time{
    margin:3px 5px 3px 0px;
}
.course-teacher-div{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-position: top;
    background-size: cover;
    position: relative;
}

.info-ribbon {
    position:absolute;
    padding:0.5rem 1rem;
    z-index:10;
    left:0rem;

    box-shadow:0.5rem 0.5rem 1rem rgba(0,0,0,0.3);


}

.tooltiptext {
    visibility: hidden;
    /*width: 120px;*/
    background-color: rgba(2, 41, 62, 0.9);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 15px;
    /* Position the tooltip */
    position: absolute;
    z-index: 9999;
    top: -100%;
    left: -50%;
    font-size: 12px;
}

.course-teacher-div:hover .tooltiptext {
    visibility: visible;
}

.course-price{
    padding: 3px 10px;
    border:1px solid var(--clubi-blue);
    border-radius: 0.5rem;
   /* display: flex;
    justify-content:space-between;
    align-items: center;
    gap:0.5rem;*/
    cursor: pointer;

}

.course-price span, .course-price-inactive span{
    font-size: 0.6rem;
}
.course-price b{
    color:var(--clubi-blue)
}

.course-price:hover {
    background-color: var(--clubi-blue);
    color:white !important;
}
    .course-price:hover b, .course-price:hover .discounted-value, .course-price:hover .discount-end-text {
        color: white !important;
    }

.price-discount {
    position: absolute;
    
    color: #ebebeb;
    top: -1px;
    right: -1px;
    padding: 0 0.2rem;
    border-radius: 0.3rem;
}
.course-price-inactive {
    padding: 3px 10px;
    border: 1px solid #919191;
    color: #919191;
    border-radius: 0.5rem;
    /* display: flex;
    justify-content: space-between;
    align-items: center;*/
    cursor: default;

}


/*  for banner slider's owl nav fix */
.owl-nav.disabled{
    display: none !important;
}


::-webkit-scrollbar {
    height: 4px;
    width: 4px;
    background:  #F2F2F2;
}

::-webkit-scrollbar-thumb:horizontal {
    background: #E4E4E4;
    border-radius: 10px;
}
/* my course top scroller for purchased course */
.my-courses-slider{
    border-radius: 0.3rem;
    display: flex;
    justify-content: start;
    align-items: center;
    width: 250px;
    min-width:250px;
    cursor: pointer;

}
.my-courses-slider .course-img{
    width: 60px; 
    aspect-ratio: 1/1; 
    background-size: cover; 
    background-position: center; 
    border-radius: 0.2rem;
    flex: 1;    
}

.my-courses-slider .course-name{
    width: 100%;
    padding-left: 1em;
    flex: 2;
    text-align: left;
}
.my-courses-slider .course-name span{
    background-color: var(--body-text-dark);
    color:var(--body-text-light);
    font-size: 0.6rem;
    padding: 3px 7px;
    border-radius: 1000px;
}

.my-courses-slider .course-name h1{
    color:var(--body-text-dark);
    font-size: 0.8rem;
    font-weight:bold;
    margin:0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.my-courses-slider p{
    font-size: 0.6rem;
    text-align: right;
}

.my-courses-slider:hover, .my-courses-slider.active{
    background-color: var(--clubi-blue);
}
.my-courses-slider:hover p, .my-courses-slider:hover h1, .my-courses-slider.active p, .my-courses-slider.active h1 {
    color:white !important;
}

.my-courses-slider.finished .course-img{
    filter: grayscale(100%);
}
.my-courses-slider.finished h1{
    color:#919191;
}

.installment_indicator {
    flex: 1;
    border-radius: 9999px;
    height: 5px;
}
/*   clubi loader  */
#clubi_loader {
    position: absolute;
    width: 100%;
    height: 100vh;
    /*  top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
    z-index: 999999 !important;
    background-color: rgba(255,255,255,0.7);
    background-image: url("../assets/loader/load-clubi-1.gif");
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

/*  snackbar alert toester override */
.clubi-toaster {
    position: absolute !important;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 280px !important;
    display:flex;
    justify-content:start;
    align-items:center;
}

/* common */
.ribbon {
    width: 120px;
    height: 120px;
    overflow: hidden;
    position: absolute;
}

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #2980b9;
    }

    .ribbon span {
        position: absolute;
        display: block;
        width: 200px;
        padding: 7px 0;
        background-color: var(--clubi-green);
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 12px sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: uppercase;
        text-align: center;
    }

/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}

    .ribbon-top-left::before,
    .ribbon-top-left::after {
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-top-left::before {
        top: 0;
        right: 0;
    }

    .ribbon-top-left::after {
        bottom: 0;
        left: 0;
    }

    .ribbon-top-left span {
        right: -25px;
        top: 30px;
        transform: rotate(-45deg);
    }

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }

    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }

    .ribbon-top-right span {
        left: -25px;
        top: 30px;
        transform: rotate(45deg);
    }

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}

    .ribbon-bottom-left::before,
    .ribbon-bottom-left::after {
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-bottom-left::before {
        bottom: 0;
        right: 0;
    }

    .ribbon-bottom-left::after {
        top: 0;
        left: 0;
    }

    .ribbon-bottom-left span {
        right: -25px;
        bottom: 30px;
        transform: rotate(225deg);
    }

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}

    .ribbon-bottom-right::before,
    .ribbon-bottom-right::after {
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-bottom-right::before {
        bottom: 0;
        left: 0;
    }

    .ribbon-bottom-right::after {
        top: 0;
        right: 0;
    }

    .ribbon-bottom-right span {
        left: -25px;
        bottom: 30px;
        transform: rotate(-225deg);
    }


/*  banner wrapper div */
#banner-slider-wrapper {
    overflow-x: auto;
    overflow-y:visible;
    /*-ms-overflow-style: none;  IE and Edge 
    scrollbar-width: none;  Firefox */
}
/*    #banner-slider-wrapper::-webkit-scrollbar {
        display: none;
    }*/
 

.banner-div {
    width: 500px;
    min-width:250px !important;
    aspect-ratio: 2/1;
    background-size: cover;
    background-position: center;
    border-radius: 0.3rem;
    transition:transform 0.5s;
}

   /* .banner-div:hover {
        transform:scale(1.5);
        z-index:50;
        position:relative;
    }*/

    .circle-30 {
        width: 30px !important;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        background-position: center;
        background-size: cover;
        position: relative;
        border-radius: 50%;
    }

.circle-50 {
    width: 50px !important;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 50%;
}

.circle-60 {
    width: 60px !important;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 50%;
}

.circle-80 {
    width: 80px !important;
    min-width: 80px;
    height: 80px;
    min-height: 80px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 50%;
}
.circle-120 {
    width: 120px !important;
    min-width: 120px;
    height: 120px;
    min-height: 120px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 50%;
}
.loginPasswordForm {
    display: flex;
    justify-content: space-between;
}

.loginPasswordInput {
    margin: 0;
    padding: 0.5rem;
    /* border: 1px solid #333; */
    width: 55px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
}

.page-top-offset {
    padding-top:150px;
}

.position__absolute {
    position:absolute;
}
.position__relative {
    position: relative;
}


.purchase_detail_wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 40%;
    min-width: 320px;
    overflow-y: auto;
    background-color: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    z-index: 10000;
    transition: all 500ms;
}
    .purchase_detail_wrapper.active {
        right:0;
    }
    .client_purchase_detail {
        position: absolute;
        top: 0rem;
        width: 100%;
    }

.installment_number_wrapper {
    width:24px;
    height:24px;
    min-height:24px;
    max-height:24px;
    min-width:24px;
    max-width:24px;
    border-radius:50%;
    border:1px solid #ccc;
    display:flex;
    justify-content:center;
    align-items:center;
}

.payment-card {
    height: 100%;
    cursor: pointer;
    transition:all 200ms;

}
    .payment-card:hover, .payment-card.active {
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }

    @media (max-width: 1200px) {
        .page-top-offset {
        padding-top: 98px;
    }
}

.modal {
    z-index:999999;
    margin-top:2rem;
}

.qpay-logo {
    width:23%;
    max-width:80px;
    min-width:70px;
    aspect-ratio:1/1;
}

.qpay-logo-link {
    margin-bottom: 1rem;
}

.message_image_wrapper {
    display:grid;
    gap:10px;
    grid-template-columns:auto auto;
    
}

.message_image_wrapper_one_img {
    display: grid;
    gap: 10px;
    grid-template-columns: auto;
}

.message_img_div {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.msg-card-body {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:start;
}

.avatar {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 30px !important;
    height: 30px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

   

    .avatar.middle {
        margin-left: -10px;
        -webkit-mask: radial-gradient(circle 15px at -5px 50%,transparent 99%,#fff 100%);
        mask: radial-gradient(circle 15px at -5px 50%,transparent 99%,#fff 100%);
    }

    .avatar.middle {
        margin-left: -5px;
        -webkit-mask: radial-gradient(circle 15px at -10px 50%,transparent 99%,#fff 100%);
        mask: radial-gradient(circle 15px at -5px 50%,transparent 99%,#fff 100%);
        font-size: 10px;

     
    }
.moreNumber {
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 11px;
    width: 30px !important;
    height: 30px;
}
   /* .avatar.last {
        margin-left: -5px;
        -webkit-mask: radial-gradient(circle 15px at -10px 50%,transparent 99%,#fff 100%);
        mask: radial-gradient(circle 15px at -5px 50%,transparent 99%,#fff 100%);
        font-size: 10px;
       
        position:relative;
    }
.moreNumber {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:2px;
   font-size:10px;

}*/
/**/
/*   messages image slider css */
.mySlides {
    display: none
}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    height: 100%;
}


/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    /*position: absolute;*/
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    /*font-weight: bold;
    font-size: 18px;*/
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/*.paginate_button.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}*/
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
/* The dots/bullets/indicators */
.dot-wrapper {
    position: absolute;
    bottom: 16px;
    width: 100%;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


    dot-wrapper .active, .dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev, .next {
        font-size: 11px
    }
}

/*   course detail page classes             */
.course-detail-service {
    background-color: #FEFEFE;
    color: #232323;
    display: inline;
    font-size: 1.1875rem;
    padding: 0.2em 0.8em;
    border-radius: 999px;
}

.course-detail-title {
    color:var(--body-text-light);
    font-size:2rem;
}

.course-detail-occurrence {
    background-color: black;
    color: var(--body-text-light);
   
    font-size: 0.75rem;
   
    border-radius: 999px;
    display:flex;
    box-sizing:border-box !important;

}

    .course-detail-occurrence-day {
        font-weight: bold;
        background-color: var(--clubi-orange);
        padding: 5px 10px;
        border-radius: 999px;
    }
.course-detail-occurrence-time {
    padding: 0.5em 1em;

    border-radius: 999px;

    
}

.course-detail-occurrence-multi {
    background-color: black;
    color: var(--body-text-light);
    font-size: 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-sizing: border-box !important;
}

.course-detail-occurrence-day-multi {
    font-weight: bold;
    background-color: var(--clubi-orange);
    padding: 5px 10px;
    border-radius: 0.5rem;
    width:100%;
}

.course-detail-occurrence-time-multi {
    padding: 0.5em 1em;
    border-radius: 0.5rem;
    text-align:center;
}

.course-detail-teacher {
    display:grid;
    grid-template-columns:60px 1fr;
    gap:8px;
    align-items:center
}

.course-detail-teacher-name {
    font-size: 1rem;
    margin: 0;
    font-weight: bold;
}

.course-detail-prices-div {
    border-radius:0.6rem;
    box-shadow:0 0 15px rgba(0,0,0,0.1);
    position:absolute;
    top:-300px;
    right:0rem;
   width:100%;
    
}
@media only screen and (max-width: 768px) {
    .course-detail-prices-div {
        position: static;
    }
}
.course-detail-img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    background-size: cover;
    background-position: center;
    
}

.price-option {
    font-size: 0.625rem;
   
  
}



.course-detail-price-amount {
    color:var(--clubi-blue);
    font-size:1.125rem;
    font-weight:bold;
}

.inactive-price, .inactive-price .course-detail-price-amount {
    color: #C0C0C0 !important;
}

.course-detail-price-note {
    font-style:italic;
    color:#878787;
    font-size:0.625rem;

}

.badge-clubi {
    border-radius:9999px;
}

.badge-inactive {
    background-color: #aeaeae;
    color: #fafafa;
}

    .badge-inactive.active {
        background-color:var(--client-primary);
        color:#fff;
    }

.clubi-footer-qr {
    max-width:200px;
    aspect-ratio:1/1;
}

.fixedHieghtTable {
    max-height: 500px;
    overflow-y: auto;
}


.radio-button-pill ~ label {
    background-color:white;
    color:var(--body-text-dark);
    padding:0 0.5rem 0 0.5rem;
    border-radius:999px;
    margin-bottom:0;
    cursor:pointer;
}

.radio-button-pill:checked ~ label {
    background-color: var(--client-primary);
    color: var(--body-text-light);
}

/*.payment-method::after, .payment-method::before {
    top:0 !important;
}*/
/*
    solar icons
*/
.solar--stopwatch-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 22a9 9 0 1 0 0-18a9 9 0 0 0 0 18m0-13.75a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75M9.25 2a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4A.75.75 0 0 1 9.25 2' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--map-point-wave-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c5.523 0 10-2.014 10-4.5c0-1.266-1.163-2.41-3.035-3.229c-1.142 2.096-2.883 3.903-5.095 4.848a4.775 4.775 0 0 1-3.74 0c-2.212-.945-3.953-2.752-5.095-4.847C3.163 15.089 2 16.234 2 17.5C2 19.986 6.477 22 12 22'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5 8.515C5 4.917 8.134 2 12 2s7 2.917 7 6.515c0 3.57-2.234 7.735-5.72 9.225a3.277 3.277 0 0 1-2.56 0C7.234 16.25 5 12.084 5 8.515M12 11a2 2 0 1 0 0-4a2 2 0 0 0 0 4' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.fluent--circle-hint-half-vertical-16-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 2a6 6 0 1 0 .88 11.936a.75.75 0 1 0-.218-1.484c-.41.06-.845.063-1.257.009a4.5 4.5 0 0 1-2.085-.846a4.5 4.5 0 0 1-.944-.947a4.48 4.48 0 0 1-.828-3.33l.002-.014a4.5 4.5 0 0 1 .835-2.004a4.5 4.5 0 0 1 .944-.942a4.5 4.5 0 0 1 2.123-.845a4.6 4.6 0 0 1 1.21.015a.75.75 0 0 0 .218-1.484A6 6 0 0 0 8 2.001m3.575 1.18a.75.75 0 0 0-.894 1.205c.355.264.67.58.934.935a.75.75 0 1 0 1.204-.895a6 6 0 0 0-1.244-1.244m2.361 3.94a.75.75 0 1 0-1.484.218c.063.431.063.892 0 1.323a.75.75 0 0 0 1.484.219a6.1 6.1 0 0 0 0-1.76m-1.117 4.455a.75.75 0 0 0-1.204-.895a4.5 4.5 0 0 1-.934.935a.75.75 0 0 0 .894 1.204a6 6 0 0 0 1.245-1.244'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.fluent--circle-hint-half-vertical-24-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.8 4.002a7.97 7.97 0 0 0-5.594 2.482A7.97 7.97 0 0 0 4.002 12.2a8 8 0 0 0 9.56 7.648a1 1 0 1 1 .389 1.962a10 10 0 0 1-2.2.187a9.96 9.96 0 0 1-7.16-3.28A9.96 9.96 0 0 1 2 12a9.97 9.97 0 0 1 3.016-7.157A9.97 9.97 0 0 1 12 2q1.002.001 1.95.19a1 1 0 1 1-.388 1.962a8 8 0 0 0-1.762-.15m5.757-.317a1 1 0 0 0-1.113 1.662a8 8 0 0 1 2.21 2.209a1 1 0 0 0 1.661-1.113a10 10 0 0 0-2.758-2.758m4.253 6.365a1 1 0 0 0-1.962.388a8 8 0 0 1 0 3.124a1 1 0 1 0 1.962.389a10 10 0 0 0 0-3.902m-1.495 7.507a1 1 0 0 0-1.662-1.113a8 8 0 0 1-2.209 2.21a1 1 0 0 0 1.113 1.661a10.1 10.1 0 0 0 2.758-2.758'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.tabler--chart-pie-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M9.883 2.207a1.9 1.9 0 0 1 2.087 1.522l.025.167L12 4v7a1 1 0 0 0 .883.993L13 12h6.8a2 2 0 0 1 2 2a1 1 0 0 1-.026.226A10 10 0 1 1 9.504 2.293l.27-.067z'/%3E%3Cpath d='M14 3.5V9a1 1 0 0 0 1 1h5.5a1 1 0 0 0 .943-1.332a10 10 0 0 0-6.11-6.111A1 1 0 0 0 14 3.5'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.heroicons--chart-pie-20-solid {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 9a1 1 0 0 1-1-1V3c0-.552.45-1.007.997-.93a7 7 0 0 1 5.933 5.933c.078.547-.378.997-.93.997z'/%3E%3Cpath d='M8.003 4.07C8.55 3.994 9 4.449 9 5v5a1 1 0 0 0 1 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 0 1 2 11a7 7 0 0 1 6.003-6.93'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--calendar-mark-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.75 2.5a.75.75 0 0 0-1.5 0v1.58c-1.44.115-2.384.397-3.078 1.092c-.695.694-.977 1.639-1.093 3.078h19.842c-.116-1.44-.398-2.384-1.093-3.078c-.694-.695-1.639-.977-3.078-1.093V2.5a.75.75 0 0 0-1.5 0v1.513C15.585 4 14.839 4 14 4h-4c-.839 0-1.585 0-2.25.013z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M22 12v2c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14v-2c0-.839 0-1.585.013-2.25h19.974C22 10.415 22 11.161 22 12m-5.5 6a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--clipboard-list-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 2A1.5 1.5 0 0 0 8 3.5v1A1.5 1.5 0 0 0 9.5 6h5A1.5 1.5 0 0 0 16 4.5v-1A1.5 1.5 0 0 0 14.5 2z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6.5 4.037c-1.258.07-2.052.27-2.621.84C3 5.756 3 7.17 3 9.998v6c0 2.829 0 4.243.879 5.122c.878.878 2.293.878 5.121.878h6c2.828 0 4.243 0 5.121-.878c.879-.88.879-2.293.879-5.122v-6c0-2.828 0-4.242-.879-5.121c-.569-.57-1.363-.77-2.621-.84V4.5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3zM7 9.75a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5zm3.5 0a.75.75 0 0 0 0 1.5H17a.75.75 0 0 0 0-1.5zM7 13.25a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5zm3.5 0a.75.75 0 0 0 0 1.5H17a.75.75 0 0 0 0-1.5zM7 16.75a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5zm3.5 0a.75.75 0 0 0 0 1.5H17a.75.75 0 0 0 0-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--checklist-minimalistic-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M3.464 3.464C2 4.93 2 7.286 2 12c0 4.714 0 7.071 1.464 8.535C4.93 22 7.286 22 12 22c4.714 0 7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464m7.08 4.053a.75.75 0 1 0-1.087-1.034l-2.314 2.43l-.6-.63a.75.75 0 1 0-1.086 1.034l1.143 1.2a.75.75 0 0 0 1.086 0zM13 8.25a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5zm-2.457 6.267a.75.75 0 1 0-1.086-1.034l-2.314 2.43l-.6-.63a.75.75 0 1 0-1.086 1.034l1.143 1.2a.75.75 0 0 0 1.086 0zM13 15.25a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--flame-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 15c0 4.255-2.618 6.122-4.641 6.751c-.432.134-.715-.369-.457-.74c.88-1.265 1.898-3.195 1.898-5.01c0-1.951-1.644-4.254-2.928-5.675c-.293-.324-.805-.11-.821.328c-.053 1.45-.282 3.388-1.268 4.908a.412.412 0 0 1-.677.036c-.308-.39-.616-.871-.924-1.252c-.166-.204-.466-.207-.657-.026c-.747.707-1.792 1.809-1.792 3.18c0 .93.36 1.905.767 2.69c.224.43-.174.95-.604.724C6.113 19.98 4 18.084 4 15c0-3.146 4.31-7.505 5.956-11.623c.26-.65 1.06-.955 1.617-.531C14.943 5.414 20 10.378 20 15'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--add-circle-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m.75-13a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.solar--pen-new-square-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.194 2.806a2.753 2.753 0 0 1 0 3.893l-.496.496a5 5 0 0 1-.533-.151a5.2 5.2 0 0 1-1.968-1.241a5.2 5.2 0 0 1-1.241-1.968a5 5 0 0 1-.15-.533l.495-.496a2.753 2.753 0 0 1 3.893 0M14.58 13.313c-.404.404-.606.606-.829.78a4.6 4.6 0 0 1-.848.524c-.255.121-.526.211-1.068.392l-2.858.953a.742.742 0 0 1-.939-.94l.953-2.857c.18-.542.27-.813.392-1.068q.217-.453.524-.848c.174-.223.376-.425.78-.83l4.916-4.915a6.7 6.7 0 0 0 1.533 2.36a6.7 6.7 0 0 0 2.36 1.533z'/%3E%3Cpath fill='%23000' d='M20.536 20.536C22 19.07 22 16.714 22 12c0-1.548 0-2.842-.052-3.934l-6.362 6.362c-.351.352-.615.616-.912.847a6 6 0 0 1-1.125.696c-.34.162-.694.28-1.166.437l-2.932.977a2.242 2.242 0 0 1-2.836-2.836l.977-2.932c.157-.472.275-.826.437-1.166q.287-.6.696-1.125c.231-.297.495-.56.847-.912l6.362-6.362C14.842 2 13.548 2 12 2C7.286 2 4.929 2 3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}