@import "theme.css";

*{
    transition: all 0.2s ease-in-out 0s;
}

.navbar{
    background-color: var(--main-theme-color) !important
}
.navbar-nav .nav-item .nav-link{
    color: white;
    text-shadow: 0px 4px 4px 0px #00000040;
}
 .navbar-toggler {
    fill: white;
    background-color: white;
}
body{
    background: #F5F5F5;
    font-family: 'Inter';
    font-style: normal;
    position: relative;
    min-height: 90vh;
}

.main-title{
    padding:2em  0 ;
    text-align: center;

}
.main-title h2{
    color: #000000;
    font-size: 35px;
    font-weight: 400;
}

.main-title h4{
    font-size: 25px;
}

.main-title h5{
    font-size: 24px;
    color: rgba(74, 74, 74, 0.64);
}

.accountTypeContainer{
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 15px;
    width: 196px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    transition: 0.4s ease-in-out 0s;
}

.accountTypeContainer:hover{
    transition: 0.3s ease-in-out 0s;
    background: var(--main-theme-color);
    color: white;
    cursor: pointer;
}
.boxDescription{
    margin-top:15px ;
}
.documentsListContainer{
    width: 80%;
    margin:  auto ;

    padding: 2em ;
}

.documentsListContainer a{
    color: #4f4f4f;
    text-decoration: unset!important;

}

.detailsListContainer a {
    color: #4f4f4f;
    text-decoration: unset!important;
}

.documentsListContainer a:hover{
    color: black;
    text-decoration: underline!important;
    font-weight: 600;
    cursor: pointer;
}

.documentsListContainer .detail {
    padding:   5px;
}
@media screen and (max-width: 766px) {
    .documentsListContainer{
        width: 95%;
    }
    
}


.documentsListContainer h4{
font-weight: 700;
}
.classic-btn{
    margin: 1em;
    padding: .5em;
    background: #FFFFFF;
    border: 1px solid var(--secondary-theme-color);
    border-radius: 8px;
    min-width: 250px;
    transition: 0.3s ease-in-out 0s;
}

.classic-btn:hover{
    transition: 0.3s ease-in-out 0s;
    background: var(--main-theme-color);
    border: 1px solid var(--main-theme-color);
    color: white;
    cursor: pointer;
}

.classic-btn[disabled]:hover{
    background: #FFFFFF;
    color: rgb(128, 128, 128);
}

.failed-doc[disabled], .success-doc[disabled] ,  .edit-button3[disabled]{
    background: #FFFFFF;!important;
    color: rgb(128, 128, 128) !important;
    opacity: 0.6;
}
.classic-btn-green{
    margin: 1em;
    background: #FFFFFF;
    border-radius: 8px;
    min-width: 250px;
    transition: 0.3s ease-in-out 0s;
    border: 2px solid green;
    text-align: center;
    padding: .5em;
    cursor: pointer;
}

.classic-btn-green:hover{
    background: #024c02;
    transition: 0.3s ease-in-out 0s;
    color: white;
}
.requestBox{
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: .4em 1em ;
    margin: 1em 0 ;
}
.requestBox h4{
    font-weight: 400;
    font-size: 25px;
    line-height: 30px;

    color: #000000;
}

.newRequestBox {
    padding: 1em 0!important;
}

.newRequestBox a{
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    text-decoration: underline;
    color: #000000;

}
.pivotBoxes .activeBox{
    color: white;
    margin: 1em;
    padding: .5em;
    border: 1px solid #000000;
    border-radius: 15px;
    min-width: 250px;
    transition: 0.3s ease-in-out 0s;
    background: var(--main-theme-color);
}

.pivotBoxes .box{
    margin: 1em;
    padding: .5em;
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 15px;
    min-width: 250px;
    transition: 0.3s ease-in-out 0s;
}

.accountCard{
    width: 70%;
    margin:  4em auto;
    padding: 2em;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
}

.accountCard .title{
    text-align: center;
    padding-top: 1em ;
    padding-bottom: 2em ;
    margin:  auto!important;
}

.accountCard .label{
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color:var(--main-theme-color);
    padding: 0  .5em;
}

.accountCard .value{
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    padding: 0  .5em;
}
.changePassword{
    font-weight: 400;
    font-size: 20px;
    line-height: 22px;
    color: #4A4A4A;
    text-decoration: underline;
}
.fileExampleContainer{
    padding: .5em;
}

.fileExistContainer{
    /*background: #FFFFFF;*/
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
    /*border-radius: 10px;*/
    /*padding: .5em;*/
}

.fileExist{
    margin: 1em 0;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: .5em;
}

.yes-no-btn{
    margin: 1em;
    padding: .5em;
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 15px;
    width: fit-content;
    transition: 0.3s ease-in-out 0s;
}

.loginCard{
    margin:2em auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:70vh;
    background-color: white;
    border-radius: 2em;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.37);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.37);
}
.loginCard[forPage="otp"]{

    min-height:unset;
}

.loginBg{
    background-image: url("../images/loginbg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 2em;
    background-color: rgba(255, 255, 255, 0.87);
    background-blend-mode: darken;
    min-height:71vh;
}
.registerBg{
    background-image: url("../images/loginbg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 2em;
    background-color: rgba(255, 255, 255, 0.87);
    background-blend-mode: darken;
    min-height:83vh;
}

.passwordContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.passwordDiv{
    flex-basis: fit-content;
}

@media screen and (max-width: 766px) {
    .loginCard{
        min-height:unset;
    }
    .loginBg{
        min-height:unset;
    }
}
@media screen and (max-width: 990px) {
    .loginBg,.registerBg{
        background-image: unset;
        min-height:unset;
    }

    .loginCard{
        min-height:unset;
    }
    .loginForm .passwordDiv{
        width: 50%;
    }

}


.loginForm{
    padding:  1em 2em  ;
    text-align: center!important;
}

.loginForm i{
    font-size:55px;
}

.loginTitle{

}

.loginText{

}

.loginForm input{
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
}

.signupBtnContainer{
    text-align: center;
    margin:  auto!important;
    padding: .5em;

    width: fit-content;
    transition: 0.3s ease-in-out 0s;
}

.signupBtnContainer button{
    border-radius: 15px;
    padding: .5em 3em;
    background-color: var(--main-theme-color);
    color: white;
    border: none;
}

.logoutBtn{
    color:var(--main-theme-color)!important;
    font-weight: 700!important;
    text-decoration: unset;
    font-size: 1.3em;
    padding: .6em;
    border-radius: 2em ;
    transition: all 0.2s ease-in-out 0s;
}

.logoutBtn:hover{
    background-color: var(--main-theme-color);
    color: white!important;
    transition: all 0.2s ease-in-out 0s;
    cursor: pointer;
}

#myTab .nav-item .nav-link[aria-selected="false"] {
    font-size: 1.1em;
    color:black!important;
    background: unset;
   transition: all 0.3s ease-in-out 0s;
}

#myTab .nav-item .nav-link[aria-selected="true"] {
    font-size: 1.2em;
    color:var(--secondary-theme-color);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out 0s;
}

#profile-tab[aria-selected="true"]{
    color: #30B700!important;
}

.date-name-cell,.description-cell, .type-cell, .action-cell, .icon-cell{

    width: 100%;
    text-align: center;
}


.edit-button{
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 15px;
    color: #30B700;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    min-width: 150px;
}

.edit-button2{
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 15px;
    color: var(--secondary-theme-color);
    min-width: 150px;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}

.edit-button3{
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 8px;
    color: black;
    min-width: 250px;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 15px; /* Adjust this value as needed */
}

.checkbox-container {
    margin-top: 20px; /* Adjust the space above the DIV */
    margin-bottom: 20px; /* Adjust the space below the DIV */
}


#submitForm.edit-button3:hover{
    background: var(--main-theme-color);
    color: white;
}

.edit-button3 i{
    color: var(--main-theme-color);
}

.edit-button3.finalBtn {
    display: block!important;
    border: none;
    background-color: var(--main-theme-color);
    border-radius: 8px;
    color: white;
    margin: .5em auto;
    min-width: 250px;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    text-align: center;

}

.edit-button3[aria-expanded="false"] i{

    transition: all 0.4s ease-in-out 0s;
}

.edit-button3[aria-expanded="true"] i{
    color: white;
    transform: rotate(180deg);
    transition: all 0.4s ease-in-out 0s;
}

.cat a{
    display: inline-block;
    color:  unset;
    text-decoration: unset;
}
.uploadTitleDocument a{
    all: unset!important;
    text-decoration: unset!important;
}
.uploadTitleDocument a:hover{
    all: unset!important;
    text-decoration: unset!important;
    cursor: pointer;
}

.addNewFileBtn{
    padding: 1em .5em;
}

label[for="actual-btn"]{
    cursor: pointer;
}

.otpContainer{
    width: 50%;
    margin: auto;
    display: flex;
    justify-content: center;

}

.otpContainer  input{
    margin: .3em;
    background: rgba(229, 229, 229, 1);
    border: none;
    color: #000000;
    letter-spacing:10px;
    padding: 1em;
    max-width: 60px;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
}

#grayModal .modal-header{
    color: white;
    background: rgba(74, 74, 74, 1);


}

#greenModal .modal-header{
    color: white;
    background: rgba(48, 183, 0, 1);


}

#orangeModal .modal-header{
    color: white;
    background-color: var(--secondary-theme-color);

}
#redModal .modal-header{
    color: white;
    background: rgb(215, 59, 59);

}
#yellowModal .modal-header{
    color: white;
    background: rgb(173, 153, 61);
}
.requestModal label{
    color: rgba(0, 0, 0, 1);
    font-family: Inter;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: center;
}

.requestModal p{
    color: rgba(0, 0, 0, 1);
    font-family: Inter;
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: center;

}
.detailsBox{
    border-radius: 2em;
    padding: 0;
    margin: 1em 0;
    background-color: white;

}

.detailsBox .greenHeader{
    background: rgba(48, 183, 0, 1);
    border-radius: .5em;
    padding: 2em 0;
    color: white;
}

.detailsBox .orangeHeader{
    background: var(--secondary-theme-color);
    border-radius: .5em;
    padding: 2em 0;
    color: white;
}

.detailsBox .grayHeader{
    background: rgba(74, 74, 74, 1);
    border-radius: .5em;
    padding: 2em 0;
    color: white;
}
.detailsBox .redHeader{
    background: rgb(215, 59, 59);
    border-radius: .5em;
    padding: 2em 0;
    color: white;
}
.detailsBox .yellowHeader{
    background: rgb(173, 153, 61);
    border-radius: .5em;
    padding: 2em 0;
    color: white;
}

.detailsBox .icon-back{
    padding: 1em;
}
.success-doc{
    color: #2f940c;
    font-weight: 700;
}
.failed-doc{
    color: rgba(234, 0, 0, 1);

    font-weight: 700;
}
.wait-doc i{
    color: var(--secondary-theme-color);
}
.disable-doc i{
    color: rgb(234, 233, 233);
}
.edit-button4{
    background: rgb(204, 204, 204);
    border: 1px solid #000000;
    border-radius: 15px;
    color: black;
    min-width: 150px;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}

.edit-button5{
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid var(--secondary-theme-color);
    border-radius: 15px;
    color: var(--secondary-theme-color);
    min-width: 150px;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}

.edit-button6{
    background: white;
    border: 1px solid var(--secondary-theme-color);
    border-radius: 7px;
    color: black;
    min-width: 250px;
    font-weight: 400;
    font-size: 18px;
    line-height: 45px;
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
}

.edit-button6:hover{
    background: var(--third-theme-color);
    color: white;
    transition: all 0.3s ease-in-out 0s;
}

.edit-button6[aria-expanded="true"]{
    background: var(--third-theme-color);
    color: white;
    transition: all 0.3s ease-in-out 0s;
}

#commentsContainer{
    max-height:400px!important;
    overflow-y: scroll;
    box-shadow: 0px 4px 4px rgba(229, 223, 223, 0.91);
    padding: 1.5em 0;
}

#commentsContainer.noComments{
    height:auto!important;

}

#commentsContainer::-webkit-scrollbar {
    position: relative;
    width: 12px;
    border-radius: 2em;
    background-color: rgba(229, 223, 223, 0.91);
}

#commentsContainer::-webkit-scrollbar-track {
    border-radius: 2em;
    box-shadow: 0px 4px 4px rgba(229, 223, 223, 0.91);
    background-color: rgba(62, 61, 61, 0.67);
}

#commentsContainer::-webkit-scrollbar-thumb {
    border-radius: 2em;
    box-shadow: 0px 4px 4px rgba(130, 130, 130, 0.25);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: var(--main-theme-color);
}

.commentBox{
    background: #F5F5F5;
    box-shadow: 0px 4px 4px 0px #00000040;
    border: 1px solid rgba(0, 0, 0, 0.29);
    min-height: 100px;
    padding: 1.5em;
    margin: .8em 0;
}

.userNameValue{
    font-weight: 700;
    font-size: 1em;
}
.dateValue{
    font-weight: 700;
}

.messageBox{
    min-height: 50px;
    padding: .5em;
    border-radius: .5em;
    background: rgb(244, 244, 244);
}

.edit-button3[aria-expanded="true"]{
    background-color: var(--main-theme-color);
    color: white;
}

.shareHolderCard{
    margin: 1em 0;
}

.shareHolderCardTitle{
    padding-left: 1em;
}


.docsList{
    background-color: white;
    padding: 2em;
    border-radius: 10px;
}

.docsList .item{
    padding: 1em 0;
}
.seeFileBtn{
    border: 1px solid rgba(48, 183, 0, 1);
    border-radius: 15px;
    padding: 5px 5px;
    background-color: white;
    color: rgba(48, 183, 0, 1);
}

.insertFileBtn{
    border: 1px solid rgba(48, 183, 0, 1);
    border-radius: 15px;
    padding: 5px 5px;
    background-color: white;

}
.addNewFileBtn label:hover{
    cursor: pointer;
}

.verificationCard{
    width: 80%;
    border-radius: 2em;
    background-color: white;
    text-align: center;
    margin:2em  auto;
}

.verificationCard img{
    width: 50%;
    margin:2em auto;
    max-height: 100px;
    border-radius: .5em;
    object-fit: contain;
}

.classic-disable-btn{
    margin: 1em;
    padding: .5em;
    background: #FFFFFF;
    border-radius: 15px;
    min-width: 250px;
    transition: 0.3s ease-in-out 0s;
}
.graybg{
    border: none;
}

.graybg th{
    background-color: #8b8b8b;
    border: none;
}

#iconContainer{
    text-align: center;
}

#iconContainer .fa-circle-check{
    color: green;
    /*font-size: 35px;*/
    padding: 2em 0;
}

#iconContainer .fa-circle-xmark{
    color: red;
    /*font-size: 35px;*/
    padding: 2em 0;
}

.edit-button4{

    border-radius: 10px;
    background-color: white;
    border: 1px solid var(--third-theme-color);
}
.edit-button4[active='true']{

    border-radius: 10px;
    color: white;
    background-color: var(--third-theme-color);
    border: 1px solid var(--third-theme-color);
}

.createAccountCard{
    /*width: 70%;*/
    margin: auto;
    background-color: white;
    border-radius: 7px;
    /*box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);*/
    padding: 2em ;
}

.createAccountCard .box{
width: 100%;

}

.createAccountCard .labelBox{
    width: 50%;

    padding-right: 1em;
    font-family: Inter;
    font-size: 23px;

}





.createAccountCard .inputBox{
width: 50%;
    text-align: right;

}

@media only screen and (max-width: 996px) {
    .createAccountCard{
        width: 95%;
    }

    .createAccountCard .labelBox{
        width: 100%;
    }

    .createAccountCard .inputBox{
        width: 100% !important
    }
}
.createAccountCard .inputBox input{
    width: 100%;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
    border: none;
    padding: .7em ;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25) inset;

}



.submitCreation {
    margin: auto;
    text-align: center;
    padding: .7em 1.1em ;
    border-radius: 10px;
    background-color: white;
    border: 1px solid rgba(33, 81, 109, 1)!important;

}

.submitCreation[active="true"]{
    margin: auto;
    text-align: center;
    padding: .7em 1.1em ;
    border-radius: 10px;
    color: white;
    background-color: rgba(33, 81, 109, 1);
    border: 1px solid rgba(33, 81, 109, 1)!important;

}

@media screen and (max-width: 805px) {
    .createAccountCard{
        width: 95%;
    }

    .createAccountCard .labelBox , .createAccountCard .inputBox{
        width: 100%;
    }
    
}

.modalTitle{
    text-align: center;
    font-family: Inter;
    font-size: 35px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 1);
}

.modalInputs{
   text-align: center;


}

.modalInputs h4{
    text-align: center;
    font-family: Inter;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0em;

    color: rgba(33, 81, 109, 1);


}

.navbar-brand img{
    height: 50px;
}

#spinner-container{
z-index: 99;
}

.blur-animation{
    filter: blur(3px);
}

.fileDate{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    font-weight: 700;
}

.fileContainer{
    width: 75%;
}

.classic-btn-collapse{
    background-color: white;
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    font-weight: 700;
    margin: 1em 0;
    cursor: pointer;
    transition: all 0.4s ease-in-out 0s ;
}

.classic-btn-collapse[aria-expanded="true"]{
    background-color: var(--main-theme-color);
    color: white;
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    font-weight: 700;
    margin: 1em 0;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.71);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.71);
    transition: all 0.4s ease-in-out 0s ;
}

.classic-btn-collapse[aria-expanded="true"] i{
  transform: rotate(180deg);
    transition: all 0.3s ease-in-out 0s;
}

.classic-btn-collapse[aria-expanded="false"] i{
    transition: all 0.3s ease-in-out 0s;
}
.requestContainer{
    padding: 5em 0;
}

.accordion-button:not(.collapsed) {
    color: var(--secondary-theme-color);
    background-color: white;
    box-shadow: unset;
    font-weight: 700;
}

#uploadFormBtn label {
    cursor: pointer;
}

.toogleEye{
    width: 98%;
    font-size: 15px;
    text-align: end;
}
.toogleEye i{
    cursor: pointer;
    font-size: 25px;
    position: relative;
    bottom: 1.2em;
}

.identificationCard {
    width: 260px;
    min-height: 209px;
    margin: 1em;
    background-color: white;
    border-radius: 15px;
    padding: 2em;
    box-shadow: 0px 4px 4px 0px #00000040;
    transition: 0.4s ease-in-out 0s; /* Ensure transitions are smooth */
}

/* Hover effect */
.identificationCard:hover {
    background: var(--main-theme-color); /* Replace with your actual theme color variable */
    color: white;
    cursor: pointer;
    transition: 0.3s ease-in-out 0s; /* Ensure transitions are smooth */
}

.identificationCard[page='accountOpen'] {
    width: 199px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.identificationCard img {
    height: 105px;
    margin: auto;
}


.learn-more-link{
    display: block;
    text-align: center;
    margin: 1em 0;
    color: #A1A1A1;

}

.identContainer  a[aria-expanded='true']{
    position: relative;
    bottom: 2.5em;

}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 34px;

}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;

}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 5px
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 7px
}

input:checked + .slider {
    background-color: var(--main-theme-color)
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--main-theme-color)
}

input:checked + .slider:before {
    -webkit-transform: translateX(44px);
    -ms-transform: translateX(44px);
    transform: translateX(44px);
}

.callsResults{

    width: 70%;
    margin: 1em auto;
}
.dateSelection{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
    flex-wrap: wrap;
}
.dateSelection div:first-child{
    width: 80%;
}
.dateSelection input[type='date']{
min-height: 52px;
}

.resultItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1em 0;
}
.resultItem .dateCalendar{
    width: 20%;
    text-align: start;
    color: var(--main-theme-color);
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    min-height: 42px;
    padding: .5em;
    font-size: 20px;

}

.resultItem .cardCallerName{
    display: flex;
    justify-content: start;
    align-items: center;
    min-height: 42px;
    background-color: white;
    border-radius:10px ;
    width: 80%;
    text-align: start;
    font-size: 18px;
    padding: .5em;
    box-shadow: 0px 4px 4px 0px #00000040;

    color: var(--main-theme-color);
}

.resultItem[isFree='true'] .dateCalendar{
    color: #A3A3A3;
}

.resultItem[isFree='true'] .cardCallerName{
    color: #A3A3A3;
}

@media screen and (max-width: 645px) {
    .dateSelection div:first-child{
        width: 100%;
    }
    .dateSelection div:last-child{
        width: 100%;
        text-align: center;
    }

    .resultItem .dateCalendar, .resultItem .cardCallerName{
        width: 100%;
        margin: .5em auto;
        text-align: center;
        justify-content: center;
    }



}

#toogleActivity{
    font-size: 17px;
    color: var(--main-theme-color);
}

.userDateSelection{
    width: 60%;
    margin: auto;

}
.userDateSelection input{
    min-height: 52px;
}

.mobileLabels{
    display: none;
    width: 90%;
    margin:1em auto;
}

.mobileLabel{
    margin: .5em auto;
    min-width: 140px;
    background-color: white;
    border-radius: 40px;
    padding: .5em;
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
    display: block;
    color:var(--main-theme-color);
    text-decoration: unset;
    font-weight: 700;
}
.mobileLabel:hover{
    background-color: var(--main-theme-color);

    transition: all 0.3s ease-in-out 0s;
}
.mobileLabel:hover {
    transition: all 0.3s ease-in-out 0s;
    color: white!important;
}



.appointmentsCard{
    width: 95%;
    margin:2em auto;
   height: 450px;
    background-color: white;
    border-radius: 10px;
    padding: 2em;
    box-shadow: 0px 4px 4px 0px #00000040;
    overflow-y: scroll;

}

.appointmentsCard::-webkit-scrollbar {
    position: relative;
    margin-right:2em ;
    width: 12px;
    border-radius: 2em;
    background-color: rgba(183, 177, 177, 0.67);
}

.appointmentsCard::-webkit-scrollbar-track {
    margin-right:2em !important;
    border-radius: 2em;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-color: var(--main-theme-color);
}

.appointmentsCard::-webkit-scrollbar-thumb {
    border-radius: 2em;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: white;

}

.dayCard{
    margin-left: auto;
    margin-right: auto;
    min-width: 200px;
}

.dayLabel{
    text-align: center;

}

/*.dayResults{*/
/*    display: flex;*/
/*    justify-content: start;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*}*/

.dayResults button{
    display: inline;
    background-color: white;
    padding: .5em;
    margin: 1.2em;
    width: 100px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #30B700;
    color: #30B700;
    font-weight: 700;
    transition: all 0.3s ease-in-out 0s;
}

.dayResults button:hover{
    background-color: #30B700;
    color: white;
    box-shadow: 0px 4px 4px 0px #00000040;

    transition: all 0.3s ease-in-out 0s;

}

.dayResults button[isAvailable='false'],.dayResults button[isAvailable='false']:hover{
    border: 1px solid #A3A3A3;
    color: #A3A3A3;
    cursor: not-allowed;
}

.dayResults button[isAvailable='false']:hover{
    background-color: white;
    color: #A3A3A3;
    box-shadow:unset;

    transition: all 0.3s ease-in-out 0s;
}

.hourButton.selected{
    background-color: #247905;
    color: white;
    box-shadow: 0px 4px 4px 0px #00000040;
}

@media screen and (max-width: 990px) {
    .mobileLabels {
        display: block;
    }
}

.waitingCard{
    background-color: white;
    width: 80%;
    padding: 1.5em;
    border-radius: 15px;
    margin:3em auto;
    min-height: 400px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.62);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.62);
}
.waitingCard h2{
    text-align: center;
}

.waitingPar{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: black;
}

.meetingTime , .waitingTitle span{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: green;
}

.waitingCard img{
    text-align: center;
    max-height: 200px;
    aspect-ratio: 1/1;
    margin: auto;
    display: block;
}

.confirmDoc{
    width: 180px;
}

.requirements{
    padding: 1em;
    border-radius: 15px;
}
.requirements i{
    color: green;
    font-size: 20px;
}
.requirements[for='waiting'] i{
    color: var(--main-theme-color);
    font-size: 20px;
}




.requirements p{
    font-size: 18px;
    font-weight: 600;
    padding: 0 15px ;
    margin:5px 0;
    line-height: unset;
}

.requirementsDisclaimer p{
    color: #ef2e2e;
    font-size: 16px;
}

.connectToRoom{
    width: 100%;
    text-align: center;
    margin: 1em auto;
    padding: .5em;
    border-radius: 15px;
    border: none;
    color: white;
    background-color: var(--main-theme-color);
}

.connectToRoom:hover{

    background-color: var(--secondary-theme-color);
}

.connectToRoom[disabled], .connectToRoom[disabled]:hover{
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}
@media screen and (max-width: 776px) {
    .waitingCard{
        width: 98%;
    }
}

.leaveBtn button{
    min-width: 200px;
    min-height: 50px;
    border-radius: 15px;
    background-color: #c80a0a;
    color: white;
    border: none;
}

.connectBtn button{
    min-width: 200px;
    min-height: 50px;
    border-radius: 15px;
    background-color: #0f7901;
    color: white;
    border: none;
}

.loginBanner img{
    max-height: 80px;
    border-radius: 15px;
}

.copyrightContainer{

    width: 100%;
    position: absolute;
    bottom: -2em;
    /*right: 47%;*/
    text-align: center;
    color: #4f4f4f;
    font-size: 17px;
}
.custom-search{
    background: #e5e3e3;
    padding: .3em;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.custom-search input{
    background: #e5e3e3;
    border: none;
    font-size: 15px;
    outline: none;
}
.custom-search i{
    font-weight: 700;
    color: var(--main-theme-color) !important;
}

.custom-search input::placeholder{
    font-size: 13px;
}

.afmSearchContainer .dropdown-menu{
    background: #e5e3e3;
}
.afmSearchContainer .dropdown-menu li a:hover{
    background: var(--main-theme-color) !important;
    color: white!important;

}

@media screen and (max-width: 587px) {
    .navbar-brand{
        text-align: center;
        width: 100%;
    }
}

.loader-container {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--main-theme-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.acceptBtn{
    width: 100px;
    min-height: 30px;
    background-color: #0f7901;
    color: white;
    margin: .5em auto;
    padding: .3em;
    border-radius: 5px;
    border: none;
}

.rejectBtn{
    width: 100px;
    min-height: 30px;
    background-color: rgba(120, 0, 0, 0.8);
    color: white;
    margin: .5em auto;
    padding: .3em;
    border-radius: 5px;
    border: none;
}