/*Main CSS Starts Here*/
/*layout css*/
.hiddenElement {
    display: none;
}

.text-danger {
    color:#A40C0A !important;
}

.background-lightg-grey{
    background-color:lightgrey !important;
}

/* Add odd and even row colors */
.odd {
    background-color: #EFF0F6 !important; /* Replace with your desired odd row color */
}

.modal {
    background: rgba(0,0,0,.5) !important;
}

.confirm-modal-frame {
    /* height: 920px; */
    width: 20%;
    margin-left: 40%;
     margin-top: 20%; 
}

.required-label {
    color: var(--AAA-Colors-Oranges-Dark, #82280D);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 116.667%;
}

.requried-asterik {
    color: var(--AAA-Colors-Oranges-Dark, #82280D);
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 111.111% */
}

.confirm-modal-body {
    margin-left: 1rem;
    margin-right: 1rem;
}

.confirm-modal-text{
    width:100%;
    text-align:center;
}

.confirm-footer-button-div{
    text-align:center;
}

.success-modal-frame {
    /* height: 920px; */
    width: 20%;
    margin-left: 40%;
    margin-top: 20%;
}

.success-modal-body {
    margin-left: 1rem;
    margin-right: 1rem;
}

.success-modal-text {
    width: 100%;
    text-align: center;
}


.bootbox {
    opacity: 1 !important;
    transition: none !important;
}

.message-div {
    padding: 0;
}

.body-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.body-height {
    /*height: 44.9rem;*/
}

.padding-none{
    padding:0;
}

.margin-none{
    margin:0;
}

.margin-left-16px{
    margin-left:16px !important;
}

.float-right{
    margin-left:auto;
}

.footer-main-frame {
    padding: 0;
    margin: 0;
}

.fp-footer {
    position: relative;
    margin-top: auto;
}

.footer-frame {
    display: flex;
    height: 46px;
    padding: 1rem 5rem;
    align-items: center;
    gap: 3rem;
    background: var(--AA-Colors-Brand-Primary, #2B3A44);

}

.footer-label {
    color: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.avatar-arrow-frame {
    display: flex;
    position: absolute;
    right: 0;
    margin-right: 5rem;
}
.koh-tab-content-css {
    /*position: absolute;
    right: 0;
    margin-right: 5rem;*/
    display: inline-block;
    height: 6vh;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    margin-top: 0.4rem;
}

.koh-faqs-page-title {
    font-family: Nexa W01 Heavy;
    font-size: 30px;
    color: #04202E;
    font-weight: 700;
}

.koh-faq-question-span {
    font-family: Helvetica Neue LT Pro Roman !important;
    font-size: 16px !important;
    color: #000 !important;
    font-weight: 700 !important;
    display: inline-block;
}

.koh-faq-answer {
    font-family: Helvetica Neue LT Pro Roman;
    color: #000;
    font-weight: 400;
    display: none;
}

.user-arrow-down-size {
    height: 25px !important;
    width: 25px !important;
}

.icon {
    font-size: 10px;
    padding-right: 5px;
}

.koh-faq-answer-main-frame {
    position: absolute;
    margin-top: 1.2rem;
    right: -1.1rem;
    width: max-content;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-1, #cce0ff);
    z-index:1;
}

.koh-faq-answer-header {
    padding: 0.5rem 1rem;
}

.koh-faq-answer-footer {
    padding: 0;
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--AA-Colors-Neutrals-Neutral-1, #ffffff);
}

.koh-faq-answer-name-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Poppins-Semibold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1rem; /* 88.889% */
}

.koh-fa-answer-button {
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    font-family: "Arial-Semibold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    font-weight:bold;
    color:black;
}

.koh-faq-answer-label-2-regular {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem; /* 100% */
}

.koh-faq-answer-label-2-bold {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Semibold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem; /* 100% */
}

.layout-menu-main-frame {
    position: static;
    display: flex;
    width: 85.375rem;
    height: 2.8125rem;
    padding: 0rem 5rem;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
}

/* CSS for hover effect */
.nav-link-figma:hover {
    color: var(--primary-green); /* Change to the desired hover text color */
    text-decoration: none;
    /*text-decoration: underline;
    text-decoration-color: var(--primary-green);
    text-decoration-style: solid;
    text-decoration-thickness: 0.3rem;
    text-decoration-skip-ink: none;
    text-underline-offset: 0.75rem;*/
}

.nav-link-figma{
    color:white;
    font-size: 1.1rem;
    margin-right: 1rem;
}
.nav-item {
    display:inline;
}

.second-navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    /* flex-direction: column; */
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-nav-layout-menu{
    display:inline;
}

.nav-item.active li a {
    color: red;
}

.fp-main-nav .nav-item.active {
    margin-right: 0px;
    margin-left: 0px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font-weight: bolder;
    /*text-decoration: underline;
    text-decoration-color: var(--primary-green);
    text-decoration-style: solid;
    text-decoration-thickness: 0.3rem;
    text-decoration-skip-ink: none;
    text-underline-offset: 0.75rem;*/
    color: #2B3A44;
}

.navbar-nav .nav-item.dropdown .nav-link-figma::after {
    display: none;
}

.layout-menu-dropdown-menu {
    /*background: var(--AA-Colors-Brand-Primary, #2B3A44);*/
    margin-top: 10px;
    padding-top: 1px;
    margin-left: -50px;
    padding-bottom:0;
}

/*.dropdown-item:hover {
    color: var(--Brand-Secondary, #01EEAE);
    color: #2B3A44;
}*/

.layout-admin-menu-active {
    background: var(--Aa-Colors-Brand-Primary, #2B3A44);
    /*margin-top: 10px;*/
}

.w3-display-topright {
     font-size: 2rem; 
     font-weight: 100 !important;
}

.secondary-nav-link:hover {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    text-decoration: none;
    background-color: gray;
}

.secondary-menu {
    width: 100%;
    /*height: 2.7rem;*/
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 0.3125rem;
}

.secondary-menu-center {
    /*margin-top: 2.06rem;*/
    justify-content: left;
}

.secondary-menu-family-nav {
    height:100%;
}

.secondary-nav-navbar{
    width: 100%;
    height: 100%;
}

.secondary-nav-navitem {
    width: 20%;
    height:100%;
    border-right: 1px solid var(--Extended-Neutrals-Neutral-3, #CED4DA);
    background: var(--Extended-Neutrals-Neutral-0, #FFF);
}

.secondary-nav-link {
    text-align: center;
    display: block;
    padding: 0.5rem 1rem;
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height:100%;
    padding-top:12px;
}

.secondary-nav-first-item-left-radius {
    border-top-left-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
}

.secondary-nav-first-item-right-radius {
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0.3125rem;
}

.secondary-menu .nav-item.active {
    background-color: #2B3A44;
    font-weight: bolder;
}

.secondary-menu-active-link {
    font-weight: bold;
    color: var(--Brand-Secondary, #01EEAE);
}

.home:hover .icon-home-solid,
.home .icon-home-not-solid {
    display: none;
}

.home:hover .icon-not-solid {
    display:inline;
}

.row-footer-center {
   /* position: sticky;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, -50%);
    margin: 0 auto;*/
   /*margin-top: 10rem;*/
}

table.dataTable.no-footer{
    /*border-bottom: 0px !important;*/
}

.layout-header-frame {
    display: flex;
    width: 85.375rem;
    height: 3.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
}

.layout-header-logo {
    height: 60px;
    width: 250px;
}

.layout-avatar {
    /* make a square container */
    width: 50px;
    height: 50px;
    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Arial-Bold", Helvetica;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.3rem;
}

/*desktop css*/
.login-left-screen {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.login-right-screen {
    margin:0;
    padding:0;
    height: 100vh;
    position:relative;
}

.login-left-screen-header {
    height: 20vh;
    width: 100%;
}

.login-left-screen-body {
    width: 100%;
}

.login-left-screen-main-login {
    
}

.login-left-screen-main-login-otp-main-frame {
    display: inline-flex;
    padding: 1.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    /* Shadow/M */
    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.10);
}

.login-left-scree-otp-header-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Poppins-Semibold", Helvetica;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2rem; /* 123.077% */
}

.login-left-scree-otp-body-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 150% */
}

.login-left-scree-otp-body-label-2 {
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
}

.login-leftcreen-otp-footer-div{
    padding:0;
    margin:0;
}

.login-leftscreen-otp-submit {
    display: flex;
    height: 40px;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-brand-primary, #2B3A44);
    color: var(--aa-colors-brand-secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    width:95%;
}

.login-leftscree-otp-cancel {
    display: flex;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    color: var(--aa-colors-brand-primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
    text-align:center;
    width:100%;
}

.login-otp-padding{
    padding-bottom:1.5rem;
}

.gainwell-login-logo {
    /*height: 6vh;
    width: 30vh;*/
    height: 8vh;
    width: 37vh;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.welcome-note-title {
    font-family: "Arial Bold", Arial, Helvetica;
    font-weight: 400;
    color: #2b3a44;
    font-size: 1.25rem;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.5rem;
    font-weight: 700;
}

.welcome-note {
    font-family: "Arial-Regular", Arial, Helvetica;
    font-weight: 400;
    color: #2b3a44;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.5rem;
}

.login-password-frame {
    margin-top: 1rem;
    padding: 0;
}

.login-password-label{
    font-family: "Arial Bold", Arial, Helvetica;
    font-weight: 700;
    color: #2b3a44;
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.5rem;
}

.main-textbox {
    width:100%;
    border: none;
    border-bottom: 1px solid var(--extended-grey, #8E99A8);
    background: var(--extended-neutrals-neutral-1, #EFF0F6);
    display: flex;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    align-self: stretch;
}

.login-password-textbox {
    border: none;
    border-bottom: 1px solid var(--extended-grey, #8E99A8);
    background: var(--extended-neutrals-neutral-1, #EFF0F6);
    display: flex;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    align-self: stretch;
}

.forgot-password-frame{
    text-align:right;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.forgot-password-link{
    float:right;
    font-family: "Arial-Regular", Helvetica;
    font-weight:400;
    color:#1931e3;
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.3125rem;
}

.login-button {
    display: flex;
    height: 40px;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-brand-primary, #2B3A44);
    color: var(--aa-colors-brand-secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    margin-bottom:0.5rem;
    width: 50%;
    margin-left: 25%;
}


.label-link {
    font-family: "Arial-Regular", Helvetica;
    font-weight: 400;
    color: #2b3a44;
    font-size: 0.875rem;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.1375rem;
    white-space: nowrap;
}

.choose-language-label {
    font-family: "Arial-Regular", Helvetica;
    font-weight: 400;
    color: #2b3a44;
    font-size: 0.875rem;
    text-align:right;
    letter-spacing: 0;
    line-height: 1rem;
    white-space: nowrap;
}

.choose-language-dropdown {
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
}

.choose-language-partial-form {
    text-align:center;
}

.artboard-picture {
    float: left;
    object-fit: cover;
    width: 1.5rem;
    height: 99.7vh;
}

.img-slide-picture-main-frame {
    overflow: hidden;
}


.img-slider-picture {
    width: 100%;
    object-fit: cover;
    height: 99.7vh;
}

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

@keyframes fade {
    from {
        opacity: 0.4
    }

    to {
        opacity: 1
    }
}

.need-account-frame {
}

.need-account-frame-div {
    margin-left:6vh;
    margin-right:3vh;
    margin-bottom:3vh;
    position: absolute;
    background-color: #455a64;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    border: 1px solid var(--aa-colors-neutrals-neutral-3, #CED4DA);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    padding: 24px;
    /*Shadow/XL */
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.10);
}

.need-account-title-label {
    align-self: stretch;
    font-family: "Poppins-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--aa-colorsbrandprimary);
    font-size: 1.125rem;
    letter-spacing: 0;
    line-height: 1rem;
    margin-bottom: 0.5rem;
}

.need-account-paragraph {
    align-self: stretch;
    font-family: "Arial-Regular", Helvetica;
    font-weight: 400;
    color: var(--aa-colorsbrandprimary);
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.forgot-password-modal-dialog {
    align-items: center;
    min-height: calc(100% - 0rem);
    min-width: fit-content;
}

.forgot-password-modal-content{
    width: 40rem;
}

.forgot-password-modal-header {
    background: var(--wps-blue-100, #0062FF);
}

.modal-forgot-password-label {
    color: var(--aa-colors-neutrals-neutral-0, #FFF);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5625rem; /* 138.889% */
}

.forgot-password-modal-paragraph {
    color: var(--aa-colors-brand-primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5625rem; /* 156.25% */
    margin-bottom: 1.5rem;
}

.forgot-password-modal-body {
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0;
}

.forgot-password-modal-textbox {
    width:100%;
}

.forgot-password-modal-submit {
    display: flex;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-brand-primary, #2B3A44);

    color: var(--aa-colors-brand-secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

.forgot-password-modal-cancel {
    display: flex;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    color: var(--aa-colors-brand-primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}


.desktop-family-header-main-frame {
    position: static;
    margin-top: 1.5rem;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
}

.desktop-family-header-top-frame {
    position: static;
    margin-top: 1rem;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
}

.desktop-family-header {
    padding-left:1.5rem;
    padding-right:1.5rem;
    padding-top:1rem;
    padding-bottom:0.5rem;
    background: var(--WPS-Blue-100, #0062FF);
    width: 100%;
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
}

.desktop-family-footer {
    padding: 1rem 1.5rem;
    width: 100%
}

.desktop-family-footer-right {
    width: max-content;
    float: right;
    border-style: solid;
    padding: 0.5rem 1rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
}

.desktop-family-footer-right-single {
    float: right;
}

.desktop-label-header {
    color: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 133.333% */
}

.desktop-label-header-black {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 133.333% */
}


.desktop-label-header-default {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 133.333% */
}


.desktop-family-footer-left {
    float: left;
}

.desktop-family-footer-left-single {
    display: flex;
    padding: 16px;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
}

.dekstop-family-footer-left-label {
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
}


.desktop-family-dropdown {
    height: 2.5rem;
    width: 23.8rem;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978) !important;
    background-color: var(--Extended-Neutrals-Neutral-1, #EFF0F6) !important;
}

select.desktop-family-dropdown {
    /*background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 0em;
    background-repeat: no-repeat;
    -webkit-appearance: none;*/
    display: block;
    
    border: none;
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right 15px center no-repeat;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


.family-item-itemsForYou {
    display: flex;
    padding: 1rem 1.5rem;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}

.family-item-body {
    display: flex;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    flex-direction: column;
    flex: 1 0 0;
    align-self: stretch;
}
.family-item-body-main-frame {
    height:18rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.family-item-body-left {
   
    padding-right: 2rem;
}

.family-item-body-middle {
    padding-right: 2rem;
}


.family-item-body-right {
    
}

.family-item-header {
    display: flex;
    padding: 0.5rem 1rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    background: var(--WPS-Blue-10, #E5EFFF);
    width: 100%;
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    
    border-top: solid;
    border-left: solid;
    border-right: solid;
    border-width: thin;
    border-color: lightgray;

    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1rem; /* 100% */
}

.family-item-footer {
    display: flex;
    padding: 1rem 1rem 0.5rem 1rem;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 0 0;
    align-self: stretch;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);

    border-bottom: solid;
    border-left: solid;
    border-right: solid;
    border-width: thin;
    border-color: lightgray;

    border-bottom-left-radius: 0.3125rem;
    border-bottom-right-radius: 0.3125rem;
}

.family-item-footer-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1rem; /* 100% */
}

.family-item-footer-view-link {
    text-align:right;
    color: var(--AA-Colors-Purple-Light, #1931E3);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.family-child-library-24hoursLeft {
    display: flex;
    padding: 0.5rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
    width:100%;
}

.family-child-library-24hoursLeft-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
}

.family-child-library-add-document-frame {
    display: flex;
    padding: 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width:100%;
}
.family-child-library-add-document-frame-mobile {
    padding: 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.family-child-library-add-document-frame-right {
    margin-left:auto;
}

.family-child-library-add-document-link {
    color: var(--AA-Colors-Purple-Light, #1931E3);
    font-family: "Arial-Bold", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
}

.family-child-library-add-search-textbox {
    margin-right: 1rem;
    /*display: flex;*/
    width: 17.8125rem;
    height: 2.5rem;
    padding: 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
}

.family-child-library-add-search-button {
    margin-right:1rem;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
    color: var(--AA-Colors-Brand-Secondary, #01EEAE);
    /*font-feature-settings: 'clig' off, 'liga' off;*/
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

.family-table {
    border-bottom: none !important;
    border-top: 1px solid #CED4DA !important;
    border-left: 1px solid #CED4DA !important;
    border-right: 1px solid #CED4DA !important;
    border-radius: 0.3125rem;
    width:100% !important;
    /*border-top-right-radius: 0.3125rem;
    border-top-left-radius: 0.3125rem;*/
}

.family-table-header {
    /*width: 20%;*/
    padding: 1rem;
    align-items: center;
    gap: 0.5rem;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 1px solid #CED4DA !important;
}

.family-table-header-top-right {
    border-top-right-radius: 0.3125rem;
}

.family-table-header-top-left {
    border-top-left-radius: 0.3125rem;
}

.family-table-header-bottom-right {
    border-bottom-right-radius: 0.3125rem;
}

.family-table-header-bottom-left {
    border-bottom-left-radius: 0.3125rem;
}

.family-table-document-column {
    color: var(--AA-Colors-Purple-Light, #1931E3);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-right: 1px solid #CED4DA !important;
    border-bottom: 1px solid #CED4DA !important;
}

.family-table-normal-column {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    border-right: 1px solid #CED4DA !important;
    border-bottom: 1px solid #CED4DA !important;
}

.family-table-delete-column {
    color: var(--AA-Colors-Brand-Primary, black);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
    text-align:center;
    border-right: 1px solid #CED4DA !important;
    border-bottom: 1px solid #CED4DA !important;
}

.family-table-view-column {
    color: var(--AA-Colors-Purple-Light, #1931E3);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
    text-align:center;
    border-right: 1px solid #CED4DA !important;
    border-bottom: 1px solid #CED4DA !important;
}

.family-table-view-title-text {
    color: var(--AA-Colors-Purple-Light, #1931E3);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem;
    text-align: center;
}

.family-table-main-frame{
    width: 100% !important;
}

.div-nothing-frame {
    vertical-align: middle;
    text-align: center;
    height: 15rem;
    padding: 3rem 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex: 1 0 0;
    align-self: stretch;
}

.div-nothing-label {
    color: var(--AA-Colors-Neutrals-Neutral-5, #5A6978);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

.div-nothing-img{

}

.add-document-modal-frame{
    /*height:30rem;*/
    width: 50%;
    margin-left:25%;
    margin-top:10%
}

.add-document-modal-header {
    display: flex;
    padding: 0.5rem 1rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 0.3125rem 0.3125rem 0rem 0rem;
    background: var(--WPS-Blue-100, #0062FF);
    color: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5625rem; /* 138.889% */
}

.add-document-modal-body {
    padding-left: 1rem !important;
    padding-top: 0;
}

.add-document-modal-first-row {
    width:100%;
    display: flex;
    padding: 0.5rem 1.5rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
}

.add-document-modal-main-body {
    display: flex;
    padding: 1.5rem;
    flex-direction: column;
    /*align-items: flex-end;*/
    gap: 2rem;
    align-self: stretch;
    width:100%;
}

.add-document-modal-main-body-title {
    color: var(--Brand-Primary, #2B3A44);
    font-family: Arial;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3125rem; /* 150% */
    padding-left: 1rem !important;
    padding-top: 0;
}

.add-document-modal-body-textbox-frame {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0;
    width:100%;
}

.add-document-modal-body-checkbox-frame {
    padding-left: 1rem !important;
    padding-top: 0;
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

.add-document-modal-body-upload-frame {
    display:flex;
    padding-left: 1rem !important;
    padding-top: 0;
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

.add-document-modal-body-upload-button {
    display: flex;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
}

.file-label {
    margin-top: 0.70rem;
    margin-left: 10px;
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem; /* 150% */
}

.add-document-modal-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right:1.5rem;
}

.add-document-modal-footer-save-button {
    margin-right: 1rem;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
    color: var(--AA-Colors-Brand-Secondary, #01EEAE);
    /* font-feature-settings: 'clig' off, 'liga' off; */
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
}

.add-document-modal-footer-cancel-button {
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

.add-document-modal-warning {
    padding-left: 1.5rem !important;
    padding-right: 1rem !important;
}

.add-document-modal-warning-label {
    color: red;
    font-family: "Arial-Regular", Helvetica;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

.bootbox .modal-header {
    background: var(--WPS-Blue-100, #0062FF);
    color: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5625rem; /* 138.889% */
}

.bootbox-no-button {
    height: 2.5rem;
    padding: 0.5rem 2rem;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
    color: var(--AA-Colors-Brand-Secondary, #01EEAE);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

.bootbox-yes-button {
    height: 2.5rem;
    padding: 0.5rem 2rem;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
}

.family-child-appointment-view-all-frame {
    display: flex;
    padding: 1rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
}

.family-child-appointment-view-all-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    /* Arial [Web-Safe]/Desktop/Base */
    font-family: "Arial-Regular", Helvetica;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 150% */
}

.family-child-appointment-search-textbox {
    margin-left: auto;
    padding: 1rem 1.5rem;
}

.family-table-appointment-column-status {
    color: var(--AA-Colors-Brand-Primary, #2B3A44) !important;
    text-align: center !important;
    width: fit-content;
    margin: auto;
}

.family-table-appointment-column-status[data-content="confirmed"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Success-Base, #2E8540);
    background: var(--AA-Colors-Semantic-Success-Light, #EAF3EB);
}

.family-table-appointment-column-status[data-content="missed"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Error-Base, #E31C3D);
    background: var(--AA-Colors-Semantic-Error-Light, #FCEAEA);
}

.family-table-appointment-column-status[data-content="waiting"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Warning-Base, #FDB81E);
    background: var(--AA-Colors-Semantic-Warning-Light, #FDF6E5);
}

.family-table-appointment-status {
    margin: 0 !important;
    height: 30px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width:fit-content;
  border-top-left-radius: 0.618rem;
  border-top-right-radius: 0.618rem;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  text-decoration:underline;
}

/* Create an active/current tablink class */
.tab button.active {
  background: var(--WPS-Blue-100, #0062FF);
  color: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
  font-family: Arial;
  font-style: normal;
  font-weight: 700;
}

/* Style the tab content */
.tabcontent {
  display: none;
  border-top: none;
}

.family-table-appointment-modal-frame {
    /*height:30rem;*/
    width: 50%;
    margin-left: 25%;
    /*margin-top: 5%*/
}

.family-table-appointment-modal-body {
    margin:1rem;
}

.family-table-appointment-modal-main-row{
    margin-bottom:1.5rem;
}

.family-table-appointment-modal-row-left-div {
    width: 95%;
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978);
}

.family-table-appointment-modal-row-div {
    width:100%;
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978);
}

.family-table-appointment-modal-row-div-status {
    width: 95%;
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    /*border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978);*/
}

.family-table-appointment-modal-row-div-one-line {
    width: 100%;
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978);
}

.family-table-appointment-modal-row-rbutton-div {
    width: 100%;
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978);
}

.family-table-appointment-modal-provider-div {
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
}

.family-table-appointment-modal-provider-header {
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
    width: 100%;
    padding-left:16px;
}

.family-table-appointment-modal-provider-after-row {
    padding-bottom:30px;
}

.family-table-appointment-modal-provider-body {
    width: 100%;
    padding:16px !important;
}

.family-table-appointment-modal-row-header-label {
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 150% */
    margin: 0;
}

.family-table-appointment-modal-row-label {
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}


.family-table-appointment-modal-text-area {
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
    width:100%;
    border: none;
}

.family-table-notes-modal-text-area {
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
    width: 100%;
    /*border: none;*/
    border-top:none;
    border-left:none;
    border-right:none;

}


.change-password-body {
    padding: 24px 24px;
    width:100%;
    /*height:600px*/
}

.margin-bottom-24 {
    margin-bottom: 24px;
    width: 100%;
}

.margin-botton-32 {
    margin-bottom: 32px;
    width: 100%;
}

.width-100 {
    width:100% !important;
}

.width-20{
    width:20% !important;
}

.width-50 {
    width: 50% !important;
}

.width-15 {
    width: 15% !important;
}


.change-password-please-enter {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px; /* 105% */
}

.change-password-please-enter-Regular {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; /* 156.25% */
}

.change-password-please-enter-Bold {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.change-password-error-message {
    color: red;
    font-family: "Arial-Regular", Helvetica;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    display:none;
}

.change-password-error-text-border {
    border: 2px solid;
    border-color:red;
    background: var(--Extended-Neutrals-Neutral-1, #EFF0F6);
}

.change-password-change-button {
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
    color: var(--AA-Colors-Brand-Secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.change-password-cancel-button {
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.change-password-button-frame {
    margin-left: auto;
    margin-right: 0;
    margin-top: 100px;
}
.change-password-modal-frame{
    width: 20%;
    margin-left: 40%;
    height:140px;
}

.modal-hide-background {
    background-color: rgb(0,0,0) !important;
}

.add-user-div {
    margin-left: auto;
    padding-top:32px;
}

.user-maintenance-header {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 123.077% */
    padding-top: 32px;
}

.regular-text {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
}

.bold-text {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
}
.desktop-user-search-main-frame {
    display: flex;
    padding: 16px 24px 24px 24px;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    align-self: stretch;
    margin:0;
}
.desktop-user-search-header-top-frame {
    position: static;
    margin-top: 23px;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
}

.desktop-user-search-instraction {
    display: flex;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
}
.desktop-user-search-div {
    display: flex;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.desktop-user-search-textbox {
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    width: 98%;
    height:40px;
}

.desktop-user-search-search-button-div {
    margin-top: 28px;
    /*margin-left:16px;*/
}

.desktop-user-search-search-button {
    display: flex;
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
    color: var(--AA-Colors-Brand-Secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.desktop-user-record-frame {
    position: static;
    margin-top: 23px;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
}

.desktop-user-record-frame-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    background: var(--WPS-Blue-20, #CCE0FF);
    width: 100%;
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
}

.desktop-user-record-table-frame {
    padding: 16px 24px;
    width: 100%;
}

.family-table-account-status-column[data-content="Enabled"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Success-Base, #2E8540);
    background: var(--AA-Colors-Semantic-Success-Base, #2E8540);
    width: fit-content;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    color:white;
    margin:auto;
}

.family-table-account-status-column[data-content="Disabled"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Error-Base, #E31C3D);
    background: var(--AA-Colors-Semantic-Error-Base, #E31C3D);
    width: fit-content;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    color: white;
    margin: auto;
}

.family-table-user-modal-frame {
    /*height:920px;*/
    width: 60%;
    margin-left: 20%;
    /*margin-top: 5%*/
}

.family-table-search-child-modal-frame {
    /*height:30rem;*/
    width: 60%;
    margin-left: 20%;
    margin-top: 10%;
}

.user-modal-textbox {
    border: none;
    border-bottom: 1px solid var(--extended-grey, #8E99A8);
    background: var(--extended-neutrals-neutral-1, #EFF0F6);
    display: flex;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    align-self: stretch;
    width:98%;
}

.user-modal-textbox-date {
    border: none;
    border-bottom: 1px solid var(--extended-grey, #8E99A8);
    background: var(--extended-neutrals-neutral-1, #EFF0F6);
    display: block;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    align-self: stretch;
    width: 98%;
}

.user-modal-textbox-round {
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    height: 40px;
    width: 95%;
    padding: 8px;
}

.user-modal-add-child-button-div {
    float: right;
}

.user-modal-add-child-label {
    color: var(--AA-Colors-Purple-Light, #1931E3);
    text-align: center;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 131.25% */
}

.user-modal-footer-button-div {
    margin-right: 24px;
    margin-bottom: 24px;
    float: right;
}

.child-search-footer-button-div {

    float: right;
}

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

.margin-left-10p {
    margin-left: 10%;
}

.margin-right-10p {
    margin-right: 10%;
}

.user-modal-dropdown {
    height: 2.5rem;
    width: 98%;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978) !important;
    background-color: var(--Extended-Neutrals-Neutral-1, #EFF0F6) !important;
}

select.user-modal-dropdown {
    /*background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 0em;
    background-repeat: no-repeat;
    -webkit-appearance: none;*/
    display: block;
    border: none;
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right 15px center no-repeat;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.user-radio-container {
    display:flex;
    padding: 0;
    margin-left: 10%;
    width:100%;
    margin-top:15px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(font-awesome-css/svgs/solid/calendar.svg) no-repeat;
    width: 15px;
    height: 15px;
    border-width: thin;
    margin-top:3px;
}

.user-radio-button {
    margin-right: 15%;
    height: 10px;
    width: 10px;
    appearance: none;
    border-radius: 50%;
    box-shadow: 0 0 0 1px; /* Thin border when not checked */
}

.user-radio-button:checked {
    background-color: #01EEAE;
    box-shadow: 0 0 0 4px; /* Thicker border when checked */
}

.user-radion-button-label {
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.user-modal-user-record-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    /*background: var(--WPS-Blue-20, #CCE0FF);*/
    width: 100%;
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.user-modal-select-child-table-div{
    padding:24px;
}

.user-modal-tabs-container {
    display: flex;
    justify-content: space-around;
    width:100%;
}

.user-modal-tab {
    position: relative;
    width: 100%;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    text-align: center;
    border-bottom: solid 1px;
}

.user-modal-underline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--AA-Colors-Green-Base, #009681);
    transform-origin: bottom right;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.user-modal-tab.active .user-modal-underline {
    transform-origin: bottom left;
    transform: scaleX(1);
}

.user-modal-tab.active {
    font-weight: bold; /* Set font weight to bold for the active tab */
}

.user-modal-tab-content {
    /*display: none;*/
    visibility:hidden;
    position:absolute;
    border: 1px solid #ddd;
}

.user-modal-tab-content.active {
    /*display: contents;*/
    visibility:visible;
    position:relative;
    width: 100%;
    display: contents;
}

.user-modal-main-row {
    margin-bottom: 1.5rem;
    width: 100%;
    display: contents;
}

.user-modal-user-action-div {
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
    padding: 12px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.user-modal-fullname-div {
    display: flex;
    width:100%;
}

.user-modal-fullname-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Poppins-SemiBold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 100% */
}

.user-modal-status-text {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-family: "Arial-Regular", Helvetica;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.user-modal-status-enabled-disabled{

}

.user-modal-status-enabled-disabled[data-content="Enabled"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Success-Base, #2E8540);
    background: var(--AA-Colors-Semantic-Success-Base, #2E8540);
    width: fit-content;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    color: white;
    margin: auto;
}

.user-modal-status-enabled-disabled[data-content="Disabled"] {
    border-radius: 6.25rem;
    border: 1.5px solid var(--AA-Colors-Semantic-Error-Base, #E31C3D);
    background: var(--AA-Colors-Semantic-Error-Base, #E31C3D);
    width: fit-content;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    color: white;
    margin: auto;
}

.user-modal-action-buttons {
    border-radius: 5px;
    border: 1px solid var(--AA-Colors-Brand-Primary, #2B3A44);
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Arial-Regular", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */

    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
}

/*CSS for Tablet*/
.tablet-login-image-header {
    margin: 0;
    padding: 0;
    /*width: 57.375rem;*/
    height: 24.6875rem;
}

.tablet-img-slider-picture {
    width: 100%;
    height: 24.6875rem;
    object-fit:cover;
}

.tablet-login-image-artboard-frame {
    margin: 0;
    padding: 0;
}

.tablet-login-image-artboard {
    object-fit: cover;
    width: 100%;
    height: 1.5rem;
    object-position: top;
}

.tablet-login-main-frame {
    padding: 0;
    margin: 0;
}

.tablet-login-frame {
    position: relative;
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    top: -6rem;
    padding: 1.5rem 1.5rem;
    border-radius: 0.3125rem;

    /* Shadow/M */
    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.10);

}

.tablet-login-forgot-password-frame {
    text-align: right;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
}

.tablet-login-button {
    display: flex;
    height: 40px;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-brand-primary, #2B3A44);
    color: var(--aa-colors-brand-secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    margin-bottom: 2rem;
    width: 100%;
}

.tablet-login-need-account-div {
    margin-top: -3rem;
    padding:0;
}

.tablet-login-need-account-main-frame {
    display: inline-flex;
    padding: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-neutrals-neutral-3, #CED4DA);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    margin-bottom: 1.5rem;
    /* Shadow/M */
    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.10);
}

.tablet-footer-main-frame{
    margin-bottom:1.5rem;
}

.tablet-forgot-password-modal-submit {
    width: 48%;
}

.tablet-forgot-password-modal-cancel {
    width: 48%;
}

/*CSS for Help & Link Pages*/
.fp-panel-header {
    color: #2B3A44;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0.3px;
}

.fp-panel-subheader {
    color: #2B3A44;
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.fp-panel-main {
    padding: 30px 20px 20px 20px;
}

.wapper-image {
    padding-top: 70px;
    padding-right: 20px;
    float: right;
}
.wapper-image-contact {
    padding-top: 70px;
    float: right;
}

.fp-tbl-col-action-width {
    width: 15%;
}

.fp-tbl-data-color {
    color: var(--AA-Colors-Purple-Light, #1931E3);
}

.fp-panel-contact-us {
    padding: 16px 32px;
    background-color: #EFF0F6;
    border: 1px solid #CED4DA;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}
.fp-panel-contact-us-heading {
    font-size: 16px;
    font-weight: 700;
    color: #2B3A44;
}
/*CSS for Help & Link Mobile Pages*/
.fp-panel-header-mobile {
    color: #2B3A44;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0.3px;
}

.fp-panel-subheader-mobile {
    color: #2B3A44;
    font-family: Arial;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding-top: 0rem;
}

.fp-tbl-data-Mobile {
    color: var(--AA-Colors-Purple-Light, #1931E3);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.wapper-image-mobile {
    padding-top: 35px;
    padding-right: 15px;
    float: right;
    width: 156px;
    height: 101.999px;
    flex-shrink: 0;
}

.wapper-image-size-mobile {
    width: 190px;
    float: right;
}

.bg-lightblue {
    background-color: aliceblue;
}
.fp-panel-contact-us-mobile {
    padding: 16px 32px;
    background-color: #EFF0F6;
    border: 1px solid #CED4DA;
    border-radius: 5px;
}
/*CSS for Mobile*/
.mobile-login-image-artboard-frame {
    margin: 0;
    padding: 0;
}

.mobile-login-image-artboard {
    object-fit: cover;
    width: 100%;
    height: 1.5rem;
    object-position: top;
}

.mobile-login-image-header {
    margin: 0;
    padding: 0;
    /*width: 57.375rem;*/
    height: 11.35rem;
}

.mobile-img-slider-picture {
    width: 100%;
    height: 11.65em;
    object-fit: cover;
}

.mobile-login-main-frame {
    padding: 0;
    margin: 0;
}

.mobile-login-frame {
    position: relative;
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    top: -4rem;
    padding: 1.5rem 1.5rem;
    border-radius: 0.3125rem;
    /* Shadow/M */
    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.10);
}

.mobile-login-forgot-password-frame {
    text-align: right;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.mobile-login-button {
    display: flex;
    height: 40px;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-brand-primary, #2B3A44);
    color: var(--aa-colors-brand-secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    margin-bottom: 0.5rem;
    width: 100%;
}

.mobile-login-need-account-div {
    margin-top: -3rem;
    padding: 0;
}

.mobile-login-need-account-main-frame {
    display: inline-flex;
    padding: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-neutrals-neutral-3, #CED4DA);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    margin-bottom: 2.5rem;
    /* Shadow/M */
    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.10);
}

.mobile-footer-main-frame {
    padding: 0;
    margin-bottom: 1.5rem;
}

.mobile-forgot-password-modal-content {
    width: 26rem;
}

.mobile-forgot-password-modal-submit {
    width: 100%;
}

.mobile-forgot-password-modal-cancel {
    width: 100%;
}

.mobile-login-leftscreen-otp-submit {
    display: flex;
    height: 40px;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-brand-primary, #2B3A44);
    color: var(--aa-colors-brand-secondary, #01EEAE);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    width: 100%;
    margin-bottom:1rem;
}

.mobile-login-leftscreen-otp-cancel {
    display: flex;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    border: 1px solid var(--aa-colors-brand-primary, #2B3A44);
    background: var(--aa-colors-neutrals-neutral-0, #FFF);
    color: var(--aa-colors-brand-primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 150% */
    text-align: center;
    width: 100%;
}

.mobile-login-left-scree-otp-header-label {
    color: var(--AA-Colors-Brand-Primary, #2B3A44);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Poppins-Semibold", Helvetica;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2rem; /* 123.077% */
}

.dataTables_paginate {
    float: right;
}

    .dataTables_paginate a {
        padding: 5px;
        margin: 0 5px;
        border: 1px solid #ccc;
        color: #333;
    }

        .dataTables_paginate a.current {
            background-color: #333;
            color: #fff;
            /*border: 1px solid #333;*/
            border-radius: 0.3125rem !important;
            border: 1px solid var(--Brand-Primary, #2B3A44) !important;
            background: var(--Extended-Neutrals-Neutral-1, #EFF0F6) !important;
        }


/*Mobile Layout Css*/

#mobile-header a {
    text-decoration: none;
}

#mobile-header {
    padding: 0 0 0 16px;
    background-color: #2B3A44;
    height: 76px;
    display: flex;
    justify-content: space-between;
}

#brand {
    display: flex;
    align-items: center;
}

.mobile-menu {
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

    .mobile-menu a {
        color: #2B3A44;
        font-size: 18px;
        line-height: 16px;
    }

    .mobile-menu li:hover {
        font-weight: 700;
        background-color: #01EEAE;
    }

    .mobile-menu .active {
        font-weight: 700;
        background-color: #01EEAE;
    }

#hamburger-icon-mobile {
    margin: auto 0;
    display: none;
    cursor: pointer;
    padding: 21.5px;
}

    #hamburger-icon-mobile div {
        width: 35px;
        height: 3px;
        background-color: white;
        margin: 6px 0;
        transition: 0.4s;
    }

.open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
    opacity: 0;
}

.open .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -8px);
    transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    height: calc(100% - 76px);
    width: 100%;
    padding-left: 0px;
    background-color: #fff;
    z-index: 1;
}

.mobile-family-header-main-frame {
    position: static;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    margin-bottom: 1rem;
}

.collapsible-link {
    width: 100%;
    position: relative;
    text-align: left;
}

    .collapsible-link::before {
        content: "\f107";
        position: absolute;
        top: 50%;
        right: 0rem;
        transform: translateY(-50%);
        display: block;
        font-family: "FontAwesome";
        font-size: 1.5rem;
    }

    .collapsible-link[aria-expanded="true"]::before {
        content: "\f106";
    }

.family-wrapper-mobile {
    text-align: center;
    border-style: solid;
    padding: 0.5rem 1rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--AA-Colors-Neutrals-Neutral-3, #CED4DA);
    background: var(--AA-Colors-Neutrals-Neutral-1, #EFF0F6);
}

.mobile-family-header-top-frame {
    position: static;
    margin-top: 1rem;
    background: var(--AA-Colors-Neutrals-Neutral-0, #FFF);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
    border-radius: 0.3125rem;
}

.mobile-menu-ddl {
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
}

.mobile-family-dropdown {
    height: 2.5rem;
    width: 23.8rem;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978) !important;
    background-color: var(--Extended-Neutrals-Neutral-1, #EFF0F6) !important;
}

.select-Icon-child-dropdown {
    background-image: url('../images/chevron-down.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 30%;
    border-radius: 2px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-bottom: 1px solid var(--AA-Colors-Neutrals-Neutral-5, #5A6978) !important;
    background-color: var(--Extended-Neutrals-Neutral-1, #EFF0F6) !important;
    /*&::-ms-expand{display: none};*/
}

.mobile-partial-menu-custom-dropdown {
    position: relative;
    width: 100%;
}

.mobile-partial-menu-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 1;
}

.mobile-partial-menu-dropdown-menu.show {
    display: block;
}

.mobile-partial-menu-dropdown-menu option {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 15px 16px 10px 40px;
    border-bottom: 1px solid var(--Extended-Neutrals-Neutral-3, #CED4DA);
    background: var(--Extended-Neutrals-Neutral-1, #EFF0F6);
}

.select-Icon {
    background-image: url('../images/chevron-down.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 30%;
    border-radius: 2px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    &::-ms-expand{display: none};
}

.font-awesome-6 {
    font-family: var(--fa-style-family,"Font Awesome 6 Pro");
    font-weight: var(--fa-style,900)
}

.child-dropdown-option {
    display: flex;
    height: 48px;
    padding: 10px 16px 10px 40px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--Extended-Neutrals-Neutral-3, #CED4DA);
    background: var(--Extended-Neutrals-Neutral-1, #EFF0F6);
}

.items-option {
    display: flex;
    height: 48px;
    padding: 10px 16px 10px 40px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--Extended-Neutrals-Neutral-3, #CED4DA);
    background: var(--Extended-Neutrals-Neutral-1, #EFF0F6);
}

.item-option-regular-font {
    color: var(--Brand-Primary, #2B3A44);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.selected-option {
    background: var(--Brand-Primary, #2B3A44) !important;
    color: var(--Brand-Secondary, #01EEAE);
    /*font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;*/
}

.mobile-partial-menu-item-custom-dropdown {
    position: relative;
    width: 100%;
}

.mobile-partial-menu-item-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 1;
}

    .mobile-partial-menu-item-dropdown-menu.show {
        display: block;
    }

    .mobile-partial-menu-item-dropdown-menu option {
        width: 100%;
        box-sizing: border-box;
        height: 48px;
        padding: 15px 16px 10px 40px;
        border-bottom: 1px solid var(--Extended-Neutrals-Neutral-3, #CED4DA);
        background: var(--Extended-Neutrals-Neutral-1, #EFF0F6);
    }

.add-document-modal-footer-mobile {
    margin-right: 1rem;
    margin-left: 1rem;
}

    /*mobile table css start*/
@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

    #no-more-tables > tbody > tr:nth-child(even) td,
    #no-more-tables > tbody > tr:nth-child(even) th {
        background-color: #EFF0F6;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        #no-more-tables td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 10px;
            left: 10px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }
        /*
        Label the data
        */
        #no-more-tables td:before {
            content: attr(data-title);
        }
}

.table-header-mobile-doc {
    width: auto;
    display: block;
    border-left: 1px solid #CED4DA;
    padding: 16px;
    color: #1931E3;
    font-size: 14px;
    font-weight: 700;
}


.table-header-mobile-normal {
    width: auto;
    display: block;
    border-left: 1px solid #CED4DA;
    padding: 16px;
    color: #2B3A44;
    font-size: 16px;
    font-weight: 400;
}


.family-table-appointment-modal-frame-mobile {
    margin-top: 20%;
}

.family-table-appointment-modal-row-header-label-mobile {
    color: var(--Brand-Primary, #2B3A44);
    font-family: "Arial-Bold", Helvetica;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
}

/*mobile table css end*/

@media only screen {
    #mobile-header nav {
        display: none;
    }

    #hamburger-icon-mobile {
        display: block;
    }
}

.footer-frame-mobile {
    height: 76px;
    padding: 1rem 2rem;
    background: var(--AA-Colors-Brand-Primary, #2B3A44);
    text-align: center;
}

.koh-faq-answer-main-frame-mobile {
    position: absolute;
    left: 85px;
    top: 20px;
}

.p20 {
    padding: 20px;
    width: 100%;
}

/*Mobile change password*/

.change-password-body-mobile {
    padding: 24px 24px;
    width: 100%;
    height: auto;
}

/*Admin documents*/

.nav-pills .nav-link.active {
    background-color: #0062FF;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0px;
}

.nav-pills .nav-link {
    color: #2B3A44;
    font-size: 14px;
    font-weight: 400;
}

.nested-tabs.active {
    color: #2B3A44 !important;
    background-color: transparent !important;
    border-bottom: 2px solid #009681;
}

.nav-item-tabfix {
    flex-basis: auto !important;
}


/*Fill&SignPage*/
/*same as admin document*/
/*.nav-pills .nav-link.active {
    background-color: #0062FF;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0px;
}*/
/*
.nav-pills .nav-link {
    color: #2B3A44;
    font-size: 14px;
    font-weight: 400;
}

.nested-tabs.active {
    color: #2B3A44 !important;
    background-color: transparent !important;
    border-bottom: 2px solid #009681;
}

.nav-item-tabfix {
    flex-basis: auto !important;
}*/

.Signature {
    height: 96px;
    padding: 24px 30px;
    border: 1px solid #CED4DA;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.signature-style {
    background-color: #EFF0F6;
    padding: 16px;
    border: 2px solid #0062FF;
    font-size: 22px;
    font-weight: 700;
    border-radius: 5px;
}

/* CSS for responsive iframe */
/* ========================= */

/* inner wrapper: make responsive */
.responsive-wrapper {
    position: relative;
    height: 100%;
}

    .responsive-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
    }

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-572x612 {
    padding-bottom: 70%;
}



.center-block-horiz {
    margin-left: auto !important;
    margin-right: auto !important;
}

.file-container {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-top: 16px;
    box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.08);
    border-radius: 5px 5px 0px 0px;
    width: 100%;
    /*  border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
        max-width: 400px;
        background-color: #f9f9f9; */
}

.file-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

    .file-icon img {
        width: 100%;
        height: 100%;
    }

.file-details {
    display: flex;
    flex-direction: column;
}

.file-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.file-name {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #666;
    padding: 0px 7px 0px 7px;
    display: inline-block;
}