body{
    font-family: "Red Hat Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    background: #FFF5EE;
}

p {
    margin-top: 0;
    margin-bottom: 0rem;
}

hr{
    border: 0.5px solid #7A7878;
    margin: 0.8rem 0;
}

.hr-grey{
    border: 0.5px solid #D9D9D9;
}

.progress {
    background-color: #D9D9D9;
    border-radius: 0px;
    height: 18px;
  }

  .progress-bar {
    background-color: #3944BC;
    border-radius: 0px;
  }

input:focus-visible {
    outline: none;
}

input::placeholder {
    color: #C2BFBF; /* Placeholder color */
  }

button{
    all: unset;
}

.hide-this{
    display: none;
}

.hide-menu{
    display: none;
}

.show-this{
    display: block;
}

.hover-trigger:hover .hide-menu {
    display: block;
}



.custom-col-4 {
    flex: 0 0 auto;
    width: 30.333333%;
}

.custom-me-2{
    margin-right: .9rem !important;
}

.set-overflow{
    overflow:hidden;
}

.text-fit{
    white-space: nowrap;       /* Prevents text from wrapping to the next line */
    overflow: hidden;          /* Hides any text that overflows the element's box */
    text-overflow: ellipsis;
}

.clamp-text{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.custom-gx-4 > [class*="col"] {
    padding-right: 1rem;  /* 16px, adjust as needed */
    padding-left: 1rem;   /* 16px, adjust as needed */
}


.signup-container {
    max-width: 400px;
    margin: auto;
    padding: 20px 40px 20px 40px;
    background: #fff;
    border: 3px solid #B2D8D8;
}

.signup-logo{
    max-width: 400px;
    margin: auto;
}

.signup-field{
    border: 1px solid #C2BFBF;
    padding: 15px 20px 15px 20px;
}

.signup-field-input{
    /* position: absolute;*/
    width: 270px;
    border: unset;
    height: 30px;
}

.signup-submit{
    border: 1px solid black;
    background: black;
    color: #fff;
    padding: 15px 30px 15px 30px;
}



.google-box{
    border: 1px solid #C2BFBF;
    padding: 15px 20px 15px 20px;
    cursor: pointer;
}

.width-5{
    width: 50px;
}

.width-5-plus{
    width: 54px;
}

.width-10{
    width: 100px;
}

.width-11{
    width: 110px;
}

.width-12{
    width: 120px;
}

.width-15{
    width: 150px;
}

.width-20{
    width: 200px;
}



/**************************************************************/
/********************THE ADDITIONS & REMOVALS******************/

.remove-row-padding{
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.remove-row-padding-right{
    padding-right: 0px !important;
}

.remove-row-padding-left{
    padding-left: 0px !important;
}

.remove-row-margin{
    margin-left:0px !important;
    margin-right:0px !important;
}

.remove-margin-left{
    margin-left:0px !important;
}

.remove-margin-bottom{
    margin-bottom:0px !important;
}

.remove-gx-paddings > [class*="col"] {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}

.remove-line-height{
    line-height: 0px !important;
}

.remove-cursor-pointer{
    cursor: unset !important;
}

.remove-border-top{
    border-top: unset !important;
}

.add-cursor-pointer{
    cursor: pointer;
}

.add-margin-bottom{
    margin-bottom: 0.25rem !important;
}

.add-row-padding-1-plus{
    padding-right: 14px !important;
    padding-left: 14px !important;
}

.add-row-padding-3{
    padding-right: 30px !important;
    padding-left: 30px !important;
}

.add-padding-bottom-1{
    padding-bottom: 10px !important;
}

.add-border-top{
    border-top: 0.7px solid #B2D8D8;
    padding-top: 20px;
}

.add-border-top-color-black {
    border-top: 0.7px solid #000 !important;
}

/**************************************************************/
/**************************************************************/




.ptext-font-light{
    font-family: "Red Hat Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.ptext-font-italic{
    font-family: "Red Hat Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic;
}



.ptext-1{
    font-size:9px;
}

.ptext-1-plus{
    font-size:10px;
}

.ptext-2-minus{
    font-size:11px;
}

.ptext-2{
    font-size:12px;
}

.ptext-2-plus{
    font-size:13px;
}

.ptext-3{
    font-size:14px;
}

.ptext-3-plus{
    font-size:15px;
}

.ptext-4-minus{
    font-size:16px;
}

.ptext-4{
    font-size:17px;
}

.ptext-5{
    font-size:19px;
}

.ptext-6{
    font-size:21px;
}

.ptext-6-plus{
    font-size:22px;
}

.ptext-7{
    font-size:25px;
}

.ptext-8{
    font-size:28px;
}

.ptext-9{
    font-size:30px;
}

.ptext-10{
    font-size:32px;
}

.ptext-16{
    font-size:65px;
}



.ptext-weight-1{
    font-weight: 300;
}

.ptext-weight-2{
    font-weight: 500;
}

.ptext-weight-3{
    font-weight: 700;
}



.ptext-color-light-brown{
    color: #7A7878;
}

.ptext-color-dark-brown{
    color: #665656;
}


.ptext-color-white{
    color: #fff;
}

.ptext-color-white-2{
    color: #F0F8FF;
}

.ptext-color-deep-blue{
    color: #3944BC;
}

.ptext-color-purple{
    color: #3D006D;
}

.ptext-color-grey{
    color: #C2BFBF;
}

.ptext-color-black{
    color: #000;
}


.ptext-color-dull{
    color: #808080;
}


.margin-top-minus-2{
    margin-top: -20px;
}

.margin-top-minus-1{
    margin-top: -10px;
}

.margin-top-1-minus{
    margin-top:5px;
}

.margin-top-1{
    margin-top:10px;
}

.margin-top-2{
    margin-top:20px;
}

.margin-top-3{
    margin-top:30px;
}

.margin-top-4{
    margin-top:40px;
}

.margin-top-5{
    margin-top:50px;
}

.margin-top-6{
    margin-top:60px;
}

.margin-top-7{
    margin-top:70px;
}

.margin-top-8{
    margin-top:80px;
}

.margin-top-9{
    margin-top:90px;
}

.margin-top-10{
    margin-top:100px;
}

.margin-top-20{
    margin-top:200px;
}




.margin-bottom-1{
    margin-bottom:10px;
}

.margin-left-1-minus{
    margin-left: 5px;
}

.margin-left-1{
    margin-left: 10px;
}

.margin-left-2{
    margin-left: 20px;
}

.margin-left-3{
    margin-left: 30px;
}



.padding-top-1{
    padding-top: 10px;
}

.padding-top-2{
    padding-top: 20px;
}

.padding-top-2-plus{
    padding-top: 25px;
}

.padding-top-3{
    padding-top: 30px;
}




.padding-left-1-minus{
    padding-left: 5px !important;
}

.padding-left-1{
    padding-left: 10px !important;
}

.padding-left-2{
    padding-left: 20px !important;
}




.padding-right-1{
    padding-right: 10px;
}

.padding-right-2{
    padding-right: 20px;
}




.center-this {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.profile-image{
    width: 100px;
}




.search-bar{
    display: block;
    padding: 2px 0px 4px 1px;
    border-bottom: 1px solid black;
    width: 200px;
}







.star-icon{
    width: 12.1px;
}

.error-icon{
    width: 150px;
}

.search-icon{
    width: 20px;
}

.bell-icon{
    width: 19px;
    cursor: pointer;
}

.calendar-icon{
    width: 16px;
}

.plus-white-icon{
    width: 10px;
}

.arrow-up-icon{
    width: 8px;
}

.data-icon{
    width: 16px;
    cursor: pointer;
}

.plus-icon{
    width: 14px;
    cursor: pointer;
}

.name-icon{
    padding: 7px 14px 7px 14px;
    border-radius: 50%;
    background: #D9D9D9;
    color: #D9D9D9;
}

.table-icon {
    width: 22px;
    margin-left: 5px;
}

.pdf-icon{
    width: 35px;
}

.dash-icon{
    width: 80px;
    height: 30px;
    /* margin-top: -6px;
    margin-left: 18px; */
}

.letter-x-icon{
    width: 10px;
}

.vertical-dots-icon{
    width: 14px;
    cursor: pointer;
    margin-top: 4px;
}

.show-more-span {
    position: relative;
    width: 104px;
    display: block;
    transform: translateY(-50%);
    top: 64%;
    right: 42px;
    background: white;
    color: #000;
    padding: 9px 10px 9px 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px #00000040;
    cursor: pointer;
}





.calendar-button{
    background: #ED7014;
    padding: 6px 12px 6px 12px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}

.setup-branch-button{
    background: #ED7014;
    padding: 10px 12px 10px 12px;
    border-radius: 3px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}


.user-box{
    display: block;
    padding: 4px 5px 0px 6px;
}

.bubble{
    padding: 4px 0px 0px 5px;
}

.name-bubble{
    display: block;
    background: #DD7014;
    padding: 5px 6px 5px 6px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}




.menu-box{
    border: 3px solid #B2D8D8;
    padding: 5px 5px 5px 5px;
    background: #fff;
}

.menu-box-active{
    border: 3px solid #B2D8D8;
    padding: 5px 5px 5px 5px;
    background: #B2D8D8;
}

.menu-icon{
    width: 35px;
}


.menu-pop{
    position: absolute;
    border: 3px solid #B2D8D8;
    background: #B2D8D8;
    margin-top: -51px;
    margin-left: 40px;
    padding: 12px 50px 10px 15px;
    z-index:100000;
}




.cardbox{
    background-color: #fff;
    height: 750px; /*820px*/
    border-radius: 1px;
}

.cardbox-2{
    background-color: #F0F8FF;
    height: 750px; /*820px*/
    border-radius: 1px;
    overflow: hidden;
}

.cardbox-raised{
    background-color: #fff;
    height: 790px; /*860px*/
    border-radius: 1px;
    margin-top: -40px;
}

.cardbox-padding{
    padding-left: 20px;
    padding-right: 20px;
}

.cardbox-margin-1-minus{
    margin-left: 5px;
    margin-right: 5px;
}



.cardbox-dark{
    background: #F0F8FF;
}

.cardbox-space-right{
    padding: 0px 20px 0px 0px;
}

.cardbox-space-left{
    padding: 0px 0px 0px 20px;
}

.cardbox-space-center{
    padding: 0px 20px 0px 20px;
}

.cardbox-half-1{
    background-color: #fff;
    border-radius: 3px;
    /* padding: 25px 0px 0px 20px; */
    padding-left: 20px;
    padding-right: 20px;
}

.cardbox-half-2{
    background-color: #F0F8FF;
    border-radius: 3px;
    height: 572px; /*642px*/
    /* padding: 25px 0px 0px 20px; */
    padding-left: 40px;
    padding-right: 30px;
    margin-top: -33px;
}

.cardbox-text-heading{
    line-height: 15px;
}





.dropdown-box{
    border: 3px solid #D9D9D9;
    padding: 10px 10px 10px 10px;
    cursor: pointer;
}

.textfield-box{
    border: 3px solid #D9D9D9;
    padding: 10px 10px 10px 10px;
}

.textfield-box-2{
    border: 1px solid #C2BFBF;
    padding: 8px 10px 8px 10px;
    border-radius: 5px;
}

.textfield-box-3{
    border: 1px solid #C2BFBF;
    padding: 4px 10px 4px 10px;
    border-radius: 5px;
}





.arrow-down-icon{
    width: 16px;
    margin-top: 3px;
}

.arrow-down-icon-small{
    width: 12px;
    margin-top: 5px;
}




.data-box-active{
    background: #F0F8FF;
}


.data-box {
    transition: background 0.3s ease;
}
/* .data-box:hover {
    background: rgba(178, 216, 216, 0.1);
} */



.data-row{
    border-top: 0.7px solid #B2D8D8;
    display: block;
    padding-top: 8px;
    cursor: pointer;
}

.data-row-borderless{
    display: block;
    padding-top: 8px;
    cursor: pointer;
}

.data-row-last{
    border-bottom: 0.7px solid #B2D8D8;
    padding-bottom: 10px;
}


.data-row-2{
    border-top: 0.7px solid #B2D8D8;
    display: block;
    padding: 20px 5px 20px 5px;
    cursor: pointer;
}

.data-row-2-small {
    border-top: 0.7px solid #B2D8D8;
    display: block;
    padding: 10px 5px 10px 5px;
    cursor: pointer;
}

.data-row-borderless-2{
    display: block;
    padding: 20px 5px 20px 5px;
    cursor: pointer;
}


.data-row-last-2{
    border-bottom: 0.7px solid #B2D8D8;
    padding: 20px 5px 20px 5px;
}








.day-tab{
    padding: 0.80rem;
    padding-bottom: 30px;
    cursor: pointer;
}

.day-tab2{
    padding: 0.80rem;
    padding-bottom: 0px;
    color: #FFF5EE;
}

.day-tab-active{
    background: #F0F8FF;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.day-tab-active2{
    background: #F0F8FF;
    color: #F0F8FF;
}



.content-divider{
    border-right: 15px solid #FFF5EE;
}

.top-divider{
    border-left: 15px solid #FFF5EE;
}

.trick-fix{
    border-left: 15px solid #FFF5EE;
}




.content-cards{
    display: block;
    height: 70px;
    border: 1px solid #B2D8D8;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 8px 15px 10px 15px;
}




.ratings-heading{
    line-height: 28px;
}


.btn-basic-orange{
    background: #ED7014;
    color: #fff;
    border-radius: 120px;
    padding: 5px 20px 5px 20px;
}


.certificate{
    width: 110px;
    border: 3px solid #B2D8D8;
    padding: 4px;
}

.certificate-2{
    width: 120px;
    border: 3px solid #B2D8D8;
    padding: 4px;
}

.pill-box{
    border: 3px solid #D9D9D9;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.pill-button{
    padding: 5px 20px 5px 20px;
    background: #3944BC;
    color: #fff;
    border-radius: 300px;
}



.settings-tab-active{
    border-bottom: 2px solid #3944BC;
    padding-bottom: 6px;
    color: #3944BC;
}








/****************************************************************************************/
/*************************CUSTOM CHECKBOX AND RADIO CSS STYLES***************************/
/****************************************************************************************/

/* Hide the default checkbox */
.custom-checkbox input[type="radio"] {
    display: none;
}

/* Create a custom checkbox */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
}

/* The checkmark container */
.custom-checkbox .checkmark {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 0px;
    margin-right: 10px;
    border: 1px solid #C2BFBF;
}

/* Checkmark when checked */
.custom-checkbox input[type="radio"]:checked + .checkmark {
    background-color: #000000;
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid rgb(0, 0, 0);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.custom-checkbox input[type="radio"]:checked + .checkmark::after {
    display: block;
    border-color: white; /* This will make the checkmark white */
}



/*************************************************************************/



/* Hide the default checkbox */
.custom-checkbox-multi input[type="checkbox"] {
    display: none;
}

/* Create a custom checkbox */
.custom-checkbox-multi {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
}

/* The checkmark container */
.custom-checkbox-multi .checkmark {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 0px;
    margin-right: 10px;
    border: 1px solid #C2BFBF;
}

/* Checkmark when checked */
.custom-checkbox-multi input[type="checkbox"]:checked + .checkmark {
    background-color: #000000;
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox-multi .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid rgb(0, 0, 0);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.custom-checkbox-multi input[type="checkbox"]:checked + .checkmark::after {
    display: block;
    border-color: white; /* This will make the checkmark white */
}



/****************************************************************************************/
/****************************************************************************************/
/****************************************************************************************/







.branch-table-head{
    border-bottom: 1.5px solid #D9D9D9;
    padding-bottom: 5px;
}


.branch-table-body{
    border-bottom: 1.5px solid #D9D9D9;
    /* padding-bottom: 0px; */

}




.report-tab-container {
    max-width: 600px;
    margin: auto;
}

.report-box-dashboard{
    border: 3px solid #B2D8D8;
    padding: 10px 20px 10px 20px;
    height: 610px;
}

.report-box-entry{
    border-bottom: 0.8px solid #B2D8D8;
    padding-top: 8px;
    padding-bottom: 8px;
}

.report-box-dashboard-grey{
    border: 3px solid #D9D9D9;
    padding: 10px 20px 10px 20px;
    height: 325px;
}

.report-box-dashboard-circle{
    border: 3px solid #D9D9D9;
    padding: 10px 20px 10px 20px;
    height: 300px;
    border-radius: 50%;
}


.circle {
    width: 200px; /* Adjust size as needed */
    height: 300px;
    background-color: #3944BC; /* Purple background */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}


.notification-bell {
    position: relative; /* This makes the notification ticker's position relative to the bell icon */
}

.notification-ticker {
    position: absolute;
    top: -9px;
    right: -8px; 
}

.notification-ticker-value{
    background: #FF0000;
    color: #fff;
    padding: 4px 0px 2px 0px;
    border-radius: 50px;
    display: block;
    min-width: 22px;
    min-height: 22px;
    text-align: center;
}