:root{
    --color-basic-black:#000;
    --color-basic-white:#fff;

    --color-Juniors_menu:#02AAB0;
    --color-Juniors_background:#f8ffff;
    --color-Juniors_dark:#79CBCA;

    --color-Employer_menu:#4044C9;
    --color-Employer_background:#77a0d358;
    --color-Employer_bg_dashboard:#e9f2ff58;
    --color-Employer-link:#5a8dcb;

    --color-dark-chat:#343541;
    --color-bright-chat:#444654;
    --color-text-chat:#fff;

    --border-radius:4px;
    --box-shadow: -8px 3px 8px 1px #ededed;;
}


.light-mode{
    --color-dark-chat:#dadada;
    --color-bright-chat:#fff;
    --color-text-chat:#000;
}


body{
    direction: rtl;
    font-family: "Rubik", sans-serif;
}




/*************** index ***************/
/*
@keyframes appear{
    from{
        opacity: 0.6;
        scale: 0.7;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}

.div-index{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}*/



/*** header ***/
/* navbar */

#navbar-index{
    height: 80px;
    background-color: var(--color-basic-white) !important;
    box-shadow: var(--box-shadow);
}

#navbar-index .container-fluid{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#navbar-index .logo_navbar{
    height: 140px;
    margin-right: 40px;
    margin-top: -25px;
}



#navbar-index  .link-nav{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    margin-top: -33px;
    margin-left: 60px;
    
}


#navbar-index  .link-nav .login-a{
    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    padding: 12px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: inline-block;
    border: none;
    font-weight: 500;
    text-decoration: none;
    width: 170px;
}

#navbar-index  .link-nav .login-a:hover{
    background-position: right center; 
    transform: scale(1.1);
}

#navbar-index  .link-nav .navbar-index-a{
    text-decoration: none;
    font-size: 17px;
    font-weight: normal; 
}


/* header-div */

#header-div{
   width: 100vw;
   height: 100vh;

}

#header-div h1{
    margin-top: 200px;
    text-align: center;
    font-size: 42px;
    font-weight: 500;
}

#header-div .header-button{
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
}

#header-div .header-button .header-button-employer{
    text-align: center;
    padding: 14px 40px;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    font-size: 18px;
    font-weight: normal;
    border: none;
    text-decoration: none;
}

#header-div .header-button .header-button-employer:hover{
    transform: scale(1.1);
	background-position: right center;
}

#header-div .header-button .header-button-junior{
	text-align: center;
    padding: 14px 40px;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #86d7d7 0%, #79CBCA 51%, #86d7d7 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    font-size: 18px;
    font-weight: normal;
    border: none;
    text-decoration: none;
}

#header-div .header-button .header-button-junior:hover{
    transform: scale(1.1);
	background-position: right center;
}
 
.slider{
    width: 100%;
    margin-top: 200px;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
}

.slider .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.slider .list .item{
    width: 440px;
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (34s / var(--quantity)) * (var(--position) - 1) - 10s)!important;
}
.slider .list .item img{
    width: 100%;
}
@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}
/*.slider:hover .item{
    animation-play-state: paused!important;
}*/



  

/*** main ***/
/* Advantages-system */


#Advantages-system{
    margin-bottom: 50px;
}

#Advantages-system h2{
    text-align: center;
    margin-top: -229px;
    font-weight: 500;
    font-size: 35px;
}

#Advantages-system .Advantages{
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: center;
    margin-top: 60px;  
}


#Advantages-system .Advantages-junior{
    height: 500px;
    width: 640px;
    box-shadow: var(--box-shadow);
    transition: all 1s ease;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}


#Advantages-system .Advantages-junior .Background-image-junior{
    width: 640px;
    height: 640px;
    position: absolute;
    bottom: 50px;
    top: -72px;
    opacity: 0.3;
}

#Advantages-system .Advantages-junior:hover{
    width: 700px;
}

#Advantages-system .Advantages-junior:hover .Background-image-junior{
    display: none; 
}

#Advantages-system .Advantages-junior .Advantages-junior-title{
    background-color:#02aab02a;
    height: 500px;
    width: 100%;
    transition: all 1s ease;
    text-align: center;
    line-height: 500px;
}

#Advantages-system .Advantages-junior:hover .Advantages-junior-title{
    height: 100px;
    background-color: var(--color-Juniors_menu);
}


#Advantages-system .Advantages-junior .Advantages-junior-title h3{
    line-height: 500px;
    transition: all 1s ease;
    font-weight: 500;
    font-size: 26px;
    color: var(--color-basic-black);
}

#Advantages-system .Advantages-junior:hover .Advantages-junior-title h3{
    line-height: 100px;
    color: var(--color-basic-white);
}

#Advantages-system .Advantages-junior .Advantages-junior-details{
   display: flex;
   flex-direction: column;
   gap: 0;
   align-items: flex-start;
   padding-right: 40px;
}

#Advantages-system .Advantages-junior .Advantages-junior-details .Advantages{
   display: flex;
   flex-direction: row;
   gap: 10px;
   margin-top: 20px;
}

#Advantages-system .Advantages-junior .Advantages-junior-details .Advantages:first-child{
   margin-top: 40px;
}

#Advantages-system .Advantages-junior .Advantages-junior-details .Advantages .Advantages-icon{
  font-size: 30px;
  color: var(--color-Juniors_menu);
}

#Advantages-system .Advantages-junior .Advantages-junior-details .Advantages .Advantages-p{
  font-size: 18px;
  font-weight: normal;
}





#Advantages-system .Advantages-employer{
    height: 500px;
    width: 640px;
    box-shadow: var(--box-shadow);
    transition: all 1s ease;
    border-radius: var(--border-radius);
    overflow: hidden;
   position: relative;
}


#Advantages-system .Advantages-employer .Background-image-employer{
    width: 640px;
    height: 640px;
    position: absolute;
    bottom: 50px;
    top: -2px;
    opacity: 0.3;
}

#Advantages-system .Advantages-employer:hover{
    width: 700px; 
}

#Advantages-system .Advantages-employer:hover .Background-image-employer{
    display: none; 
}

#Advantages-system .Advantages-employer .Advantages-employer-title{
    background-color:#4044c928;
    height: 500px;
    width: 100%;
    transition: all 1s ease;
    text-align: center;
    line-height: 500px;
}

#Advantages-system .Advantages-employer:hover .Advantages-employer-title{
    height: 100px;
    background-color: var(--color-Employer_menu);
}

#Advantages-system .Advantages-employer .Advantages-employer-title h3{
    line-height: 500px;
    transition: all 1s ease;
    font-weight: 500;
    font-size: 26px;
    color: var(--color-basic-black);
}

#Advantages-system .Advantages-employer:hover .Advantages-employer-title h3{
    line-height: 100px;
    transition: all 1s ease;
    font-weight: 500;
    font-size: 26px;
    color: var(--color-basic-white);
}


#Advantages-system .Advantages-employer .Advantages-employer-details{
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding-right: 40px;
 }
 
 #Advantages-system .Advantages-employer .Advantages-employer-details .Advantages{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
 }
 
 #Advantages-system .Advantages-employer .Advantages-employer-details .Advantages:first-child{
    margin-top: 40px;
 }
 
 #Advantages-system .Advantages-employer .Advantages-employer-details .Advantages .Advantages-icon{
   font-size: 30px;
   color: var(--color-Employer_menu);
 }
 
 #Advantages-system .Advantages-employer .Advantages-employer-details .Advantages .Advantages-p{
   font-size: 18px;
   font-weight: normal;
 }
 
 

/* Advantages-system */
 
#key-features{
    height: 700px;
   /* background-image: linear-gradient(to right, #77a0d37e 0%, #79cbcab3 51%, #77a0d3a3 100%);*/
    padding: 0;
    margin: -12px;
    margin-top:40px;
}
 
#key-features h2{
    text-align: center;
    padding-top: 40px;
    font-weight: 500;
    font-size: 35px;
}
 
#key-features .attributes{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 40px;
}
 
#key-features .attributes .attribute{
    height: 400px;
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: 30px;
}

#key-features .attributes .attribute .icon-ai{
    width: 104px;
    display: block;
    margin: 0 auto;
    margin-top: 39px;
    margin-bottom: 27px;
}

#key-features .attributes .attribute .Menu-icon{
    width: 180px;
    display: block;
    margin: 0 auto;
}

#key-features .attributes .attribute .Interview-icon{
    width: 180px;
    display: block;
    margin: 0 auto;
}


#key-features .attributes .attribute h3{
    color: var(--color-basic-black);
    font-size: 22px;
    text-align: center;
}
 
#key-features .attributes .attribute p{
    color: var(--color-basic-black);
    font-size: 17px;
    text-align: center;
}

/* Questions-and-answers */

#Questions-and-answers{
    height: 1130px;
    padding: 0;
    margin: -12px;
    margin-top: -40px;
    margin-bottom: 100px;
}

#Questions-and-answers h2{
    text-align: center;
    margin-bottom: 50px;
}

#Questions-and-answers .col-12{
    padding: 0;
    padding-right: 11px;
}


#Questions-and-answers #accordionExample .accordion-item .accordion-header{
    margin: 0;
}

.accordion-button{
    background-color: var(--color-Employer_background);
}

.accordion-button.collapsed{
    background: var(--color-basic-white);
}

.accordion-button:not(.collapsed){
    background-image: linear-gradient(to right, #77a0d359 0%, #79cbca6e 51%, #77a0d358 100%);
}


.accordion-button:focus{
    box-shadow: none;
}




/* Recommendations */

#Recommendations{
    background-image: linear-gradient(to right, #77a0d359 0%, #79cbca6e 51%, #77a0d358 100%);
    padding: 0;
    margin: -12px;
    height: 721px;
    margin-top: -590px;

    display: flex;
    align-items: center;
    justify-content: center;
}

#Recommendations .Recommendations-title{
    text-align: center;
    margin-bottom: 50px;
}

#Recommendations .Recommendations-title .title{
   font-size: 35px;
   font-weight: 500;
   color: var(--color-basic-black);
   margin-top: 19px;
}
/*
#Recommendations .Recommendations-item{
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    padding: 30px;
    border-radius: var(--border-radius);

    background: rgba( 255, 255, 255, 0.25 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

#Recommendations .Recommendations-item .info{
   display: flex;
   flex-direction: row;
   align-items: center;
}

#Recommendations .Recommendations-item .text-box .name{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    color: var(--color-basic-black);
}

#Recommendations .Recommendations-item .text-box .job{
    font-size: 16px;
    font-weight: normal;
    color: #5d5d5d;
}

#Recommendations .Recommendations-item .Recommendations-item-p{
    margin-top: 20px;
    color:var(--color-basic-black);
    font-size: 17px;
    font-weight: normal;
}

#Recommendations .Recommendations-item .rating{
    margin-top: 15px;
    font-size: 14px;
    color: hsl(36, 88%, 66%);
}

#Recommendations .Recommendations-item .info .Recommendations-item-img{
    background-color: #b65b5b;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    vertical-align: middle;
}

#Recommendations .swiper-pagination{
    position: relative;
    margin-top: 40px;
    bottom: auto;
}

#Recommendations .swiper-pagination-bullet{
    height: 14px;
    width: 14px;
    background-color: var(--color-Juniors_menu);
}
*/




#Recommendations .slider-wrapper{
    overflow: hidden;
    max-width: 1200px;
    margin: 0 70px 55px;
}


#Recommendations .card-list .card-item{
    color: var(--color-basic-black);
    width: 400px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    backdrop-filter: blur(30px);
    background: rgba( 255, 255, 255, 0.2);
    border: 1px solid rgba( 255, 255, 255, 0.5);
    height: 500px;
}

#Recommendations .card-list .card-item .user-image{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 40px;
    border: 3px solid var(--color-basic-white);
    padding: 4px;
}

#Recommendations .card-list .card-item .user-name{
    font-size: 26px;
    font-weight: 500;
}

#Recommendations .card-list .card-item .user-profession{
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 19px;
    color: #565656;
}

#Recommendations .card-list .card-item .User-recommendation{
    font-size: 16px;
    font-weight: normal;
}

#Recommendations .slider-wrapper .swiper-pagination-bullet{
    background: var(--color-basic-white);
    height: 15px;
    width: 15px;
}

#Recommendations .slider-wrapper .swiper-slide-button{
   color: var(--color-basic-white);
   margin-top: -50px;
   transition: 0.2s ease;
   display: none;
}

#Recommendations .slider-wrapper .swiper-slide-button:hover{
   color: #0f205e;
}

@media (max-width: 768px) {
    .slider-wrapper{
        margin: 0 10px 40px;
    }

    .slider-wrapper .swiper-slide-button{
        display: none;   
    }
}















/* Sign-up */

#Sign-up{
    margin-top: 100px;
    width: 100vw;
    height: 300px;
}

#Sign-up .container-fluid{
   padding: 0;
   margin: -12px;
}

#Sign-up .junior-Sign-up{
    height: 300px;
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

#Sign-up .junior-Sign-up .ooo{
    width: 150px;
}

#Sign-up .employer-Sign-up{
    height: 300px;
    background-color:var(--color-basic-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}




#Sign-up .Sign-up-div{
    text-align: center;
}

#Sign-up .Sign-up-div .Sign-up-p1{
    font-size: 35px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 20px;
}

#Sign-up .Sign-up-div .Sign-up-p2{
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 50px;
}

#Sign-up .Sign-up-buttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
}

#Sign-up .Sign-up-buttons .junior-button{
    text-align: center;
    padding: 14px 40px;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #86d7d7 0%, #79CBCA 51%, #86d7d7 100%);    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    font-size: 18px;
    font-weight: normal;
    border: none;
    text-decoration: none;
}

#Sign-up .Sign-up-buttons .junior-button:hover{
    background-position: right center;
	transform: scale(1.1);
}


#Sign-up .Sign-up-buttons .employer-button{
    text-align: center;
    padding: 14px 40px;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    font-size: 18px;
    font-weight: normal;
    border: none;
    text-decoration: none;
}

#Sign-up .Sign-up-buttons .employer-button:hover{
    background-position: right center;
	transform: scale(1.1);
}



/*** footer ***/

footer{
    width: 100px;
    height: 80px;
    margin-top: 50px;
    border-top: 1px solid var(--color-basic-black);
}

footer .footer-p{
    text-align: center;
    margin-top: 25px;
    font-size: 16px;
    font-weight: normal;
}
















/*************** login ***************/

#login-div{
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, #77a0d359 0%, #79cbca6e 51%, #77a0d358 100%);
}

#login-div h1{
    padding-top: 200px;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
}

#login-div .buttons-login{
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: center;
    margin-top: 30px;
}

#login-div .buttons-login .button-junior{
    font-size: 20px;
    font-weight: normal;
}

#login-div .buttons-login .button-employer{
    font-size: 20px;
    font-weight: normal;
}

#login-div .buttons-login h2.activeJunior{
    border-bottom: 4px solid var(--color-Juniors_menu);
    font-weight: 500;
    padding-bottom: 5px;
}

#login-div .buttons-login h2.activeEmployer{
    border-bottom: 4px solid var(--color-Employer_menu);
    font-weight: 500;
    padding-bottom: 5px;
}

#login-div .buttons-login h2.activeEmployer{
    border-bottom: 4px solid #5a8dcb;
    font-weight: 500;
    padding-bottom: 5px;
}

#login-div #login-junior-form{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-basic-white);
    height: 400px;
    border-radius: var(--border-radius);
    padding: 50px 90px;

    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(193, 196, 225, 0.37);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

#login-div #login-junior-form input{
    height: 60px;
    border: none;
    border-radius: 2px;
    padding: 18px;
    color: #000;
}


#login-div #login-junior-form label{
   margin-top: 20px;
   margin-bottom: 3px;
}

#login-div #login-junior-form input[type="submit"]{
    width: 200px;
    margin-top: 25px;
    height: 50px;
    padding: 0;

    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: block;
    border: none;
    font-weight: 500;
    text-decoration: none;
    margin: 0px auto;
    margin-top: 38px;
}

#login-div #login-junior-form input[type="submit"]:hover{
    background-position: right center; 
}

#login-div #login-junior-form input[type="submit"].mmm{
    width: 200px;
    margin-top: 25px;
    height: 50px;
    padding: 0;

    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: block;
    border: none;
    font-weight: 500;
    text-decoration: none;
}

#login-div #login-junior-form input[type="submit"]:hover{
    background-position: right center; 
}





#login-div #login-employer-form{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-basic-white);
    height: 400px;
    border-radius: var(--border-radius);
    padding: 50px 90px;
    display: none;

    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(193, 196, 225, 0.37);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

#login-div #login-employer-form input{
    height: 60px;
    border: none;
    border-radius: 2px;
    padding: 18px;
    color: #000;
}


#login-div #login-employer-form label{
   margin-top: 20px;
   margin-bottom: 3px;
}

#login-div #login-employer-form input[type="submit"]{
    width: 200px;
    margin-top: 25px;
    height: 50px;
    padding: 0;

    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: block;
    border: none;
    font-weight: 500;
    text-decoration: none;
}

#login-div #login-employer-form input[type="submit"]:hover{
    background-position: right center; 
}




/*************** Employer registration-details ***************/

.Employer-registration{
    width: 100%;
    height: 100vh;
    background-color: var(--color-Employer_background);
}

/* Employer-registration-title */
.Employer-registration .Employer-registration-title{
    height: 100px;
    margin-top: 150px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.Employer-registration .Employer-registration-title h1{
    font-weight: bold;
    font-size: 32px;
}

.Employer-registration .Employer-registration-title .Employer-registration-title-ai{
    width: 70px;
    height: 70px;
}

.Employer-registration .Step-navigation{
    margin-bottom: -10px;
    margin-top: -10px;
    font-size: 17px;
    color: green;
    font-weight: 500;
}


/* Registration_details-employer */
.Employer-registration .Registration_details-employer{
    border-radius: var(--border-radius);
    height: 500px;
    margin-top: 26px;
    padding: 40px;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 #5a8dcb5c;
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.Employer-registration .Registration_details-employer #Employer-details{
    display: flex;
    flex-direction: row;
    gap: 83px;
}

.Employer-registration .Registration_details-employer #Employer-details .Company-logo-div{
    background-image: linear-gradient(to right, #5a8dcb  51%, #77A1D3  100%);
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.Employer-registration .Registration_details-employer #Employer-details .Company-logo-div .Company-logo{
    font-size: 38px;
    color: var(--color-basic-white);
    margin-right: 10px;
    margin-top: 9px;
}

.Employer-registration .Registration_details-employer #Employer-details #Company-logoID{
    padding-right: 0;
}

.Employer-registration .Registration_details-employer #Employer-details .label{
    display: block;
    font-size: 16px;
    padding-bottom: 7px;
    margin-top: 30px;
}

.Employer-registration .Registration_details-employer #Employer-details input{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}

.Employer-registration .Registration_details-employer #Employer-details #Employer-registration-button{
    text-align: center;
    margin-top: 43px;
    padding: 0;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;
    margin-right: 1px;
}            

.Employer-registration .Registration_details-employer #Employer-details #Employer-registration-button:hover{
    background-position: right center; 
}            

.Employer-registration .Registration_details-employer #Employer-details #Employer-registration-button2{
    text-align: center;
    margin-top: 24px;
    padding: 0;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3  51%, #5a8dcb  100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);            
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;

}            

.Employer-registration .Registration_details-employer #Employer-details #Employer-registration-button2:hover{
    background-position: right center; 
}            

.Employer-registration .Registration_details-employer #Employer-details #employer-goback-button2{
    text-align: center;
    margin-top: 24px;
    padding: 11px;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #000;
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;
    background-color: #fff;
    border: 1px solid var(--color-Employer_menu);
    text-decoration: none;

}            

.Employer-registration .Registration_details-employer #Employer-details #employer-goback-button2:hover{
   transform: scale(1.02); 
}            

.Employer-registration .Registration_details-employer #Employer-details .aboutCompany-p{
    margin-bottom: 7px;
    margin-top: 31px;
}            

.Employer-registration .Registration_details-employer #Employer-details #aboutCompany{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            

.Employer-registration .Registration_details-employer #Employer-details .Social-media-links-p{
    margin-bottom: 7px;
    margin-top: 31px;
}            

.Employer-registration .Registration_details-employer #Employer-details #Social-media-links{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            

.Employer-registration .Registration_details-employer #Employer-details .Company-projects-p{
    margin-bottom: -2px;
    margin-top: 24px;
}            

.Employer-registration .Registration_details-employer #Employer-details #Company-projectsID{
    margin-right: -17px;
}            
   

.Employer-registration .Registration_details-employer #Employer-details .Field_Activity_p{
    margin-bottom: 7px;
    margin-top: 29px;
}            

.Employer-registration .Registration_details-employer #Employer-details #Field_Activity{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            
   

   
/*************** Employer registration-ai ***************/

.AI-After_employer_registration{
    width: 100%;
    height: 100vh;
    background-color:var(--color-Employer_background);
}

.AI-After_employer_registration .image-AI{
    display: block;
    margin: 0 auto;
    width: 250px;
    margin-top: 70px;
}

.AI-After_employer_registration h1{
    padding-top: 40px;
    text-align: center;
    font-size: 80px;
}

.AI-After_employer_registration .Explanation-of-ai{
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}

.AI-After_employer_registration .Explanation-of-ai span{
    background-color: var(--color-Employer-link);
    color: var(--color-basic-white);
    padding: 15px 30px;
    border-radius: var(--border-radius);
    line-height: 120px;
    font-weight: normal;
    font-size: 18px;
    cursor: pointer;
}

.AI-After_employer_registration .Explanation-of-ai span:hover{
    font-size: 20px;
}

.AI-After_employer_registration .hashtag{
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}

.AI-After_employer_registration .input-chat-div{
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

.AI-After_employer_registration .input-chat-div .chat-send{
    font-size: 49px;
    transform: rotate(180deg);
    color:#5a8dcb;
    margin-right: 20px;
    transition: all 0.5s linear;
}

.AI-After_employer_registration .input-chat-div .chat-send:hover{
    transform: rotateY(180deg)scale(1.5);
}


.AI-After_employer_registration #Start-chatID{
    border: none;
    border-radius: var(--border-radius);
    padding-right: 20px;
    height: 50px;
    width: 622px;
    display: block;
    margin: 0 auto;
    margin-right: 180px;
}

.AI-After_employer_registration .Go-to-system-button{
   position: absolute;
   top: 50px;
   right: 50px;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
   width: 160px;
   height: 50px;
   background-color: #000;
   border-radius: var(--border-radius);
   background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3  51%, #5a8dcb  100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);            
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;
}

.AI-After_employer_registration .Go-to-system-button:hover{
    background-position: right center; 
}

.AI-After_employer_registration .AI-information-icon{
     position: absolute;
     top: 30px;
     left: 50px;
     width: 70px;
}

/* AI-information */

.AI-information{
    height: 100vh;
    width: 100%;
    background-color:#000000f4;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    transition: all 1s ease;
}

.AI-information h2{
    color: var(--color-basic-white);
    padding-top: 150px;
    font-size: 35px;
    font-weight: 500px;
    margin-bottom: 40px;
}

.AI-information ul li{
    color: var(--color-basic-white);
    font-size: 19px;
    font-weight: normal;
    line-height: 32px;
    margin-bottom: 10px;
    width: 1060px;
}

.AI-information .AI-information-close{
    position: absolute;
    top: 80px;
    left: 120px;
    color: var(--color-basic-white);
    font-size: 50px;
    cursor: pointer;
}



/*************** Employer dashboard ***************/

/* side menu*/
#side-employer-menu{
    height: 100vh;
    background-color: var(--color-basic-white);
    box-shadow: -3px 3px 8px 1px #ededed;;
    position: fixed;
    top: 0;
    right: -10vw;
    z-index: 1;
    width:26vw;
    transition: all 1s;
}

#side-employer-menu .div-logo{
    border-bottom: 1px solid #eae7e7;
}

#side-employer-menu .div-logo .side-employer-menu-logo{
    width: 180px;
    margin-right: 190px;
}

#side-employer-menu .Links_menu{
    border-bottom: 1px solid #eae7e7;
}

#side-employer-menu .Links_menu ul{
    list-style:none;
}

#side-employer-menu .Links_menu ul li{
    margin-right: 160px;
    margin-bottom: 10px;
    height: 65px;
    width: 210px;
    border-radius: var(--border-radius);
    padding-right: 10px;
}

#side-employer-menu .Links_menu ul li:hover{
    background-color: var(--color-Employer_background);
}

#side-employer-menu .Links_menu ul li.active-link{
    background-color: #5a8dcb;
}

#side-employer-menu .Links_menu ul li.active-link .link-p{
   color: var(--color-basic-white);
   font-weight: bold;
}

#side-employer-menu .Links_menu ul li.active-link .side-employer-menu-icon{
   color: var(--color-basic-white);
}

#side-employer-menu .Links_menu ul li.first-link{
   margin-top: 20px;
}

#side-employer-menu .Links_menu ul li a .side-employer-menu-icon{
    font-size: 30px;
    color: var(--color-basic-black);
}

#side-employer-menu .Links_menu ul li a{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}


#side-employer-menu .Links_menu ul li a .link-p{
    font-size: 17px;
    font-weight: normal;
    color: var(--color-basic-black);
    padding-top: 20px;
}

#side-employer-menu .management-personnel{
    margin-right: 210px;
    margin-top: 20px;
    font-size: 17px;
    font-weight: 500;
}

#side-employer-menu .management-personnel .Management-parent{
   display: flex;
   flex-direction: row;
   gap: 10px;
}

#side-employer-menu .management-personnel .Employer-photo{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

#side-employer-menu .management-personnel .add-management{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: #c8dcff;
    text-align: center;
    padding-top: 7px;
}

#side-employer-menu .management-personnel .add-management .icon{
    color: var(--color-basic-black);
    font-size: 35px;
    
}


#exampleMod .mainbutton{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
}

#exampleMod .mainbutton:hover{
    background-position: right center;
}

#exampleMod1 .profile_pic{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

#exampleMod1 .mainbutton{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
}

#exampleMod1 .mainbutton:hover{
    background-position: right center;
}

#exampleMod1 .icon-eye{
    padding-top: 5px;
    cursor: pointer;
}


#exampleMod1 .Delete{
    background-color: #b5b5b5;
    border: none;
}

#exampleMod1 .Delete:hover{
    background-color: #9f9e9e;
    border: none;
}

#exampleMod2 .mainbutton{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
}

#exampleMod2 .mainbutton:hover{
    background-position: right center;
}


#exampleMod2 .profile_pic{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

#exampleMod2 .Delete{
    background-color: #b5b5b5;
    border: none;
}

#exampleMod2 .Delete:hover{
    background-color: #9f9e9e;
    border: none;
}

#side-employer-menu .Editing{
    text-decoration: none;
}

#side-employer-menu .Editing-profile{
    display: flex;
    flex-direction: row;
    gap: 7px;
    margin-right: 200px;
    border-top: 1px solid #eae7e7;
    height: 60px;
    padding-top: 20px;
    margin-top: 160px;
}

#side-employer-menu .Editing-profile .Editing-profile-img{
    width: 40px;
    height: 40px;
    background-color: var(--color-Employer_background);
    border-radius: 50%;
}

#side-employer-menu .Editing-profile .Editing-profile-p p{
    font-size: 17px;
    color: var(--color-basic-black);
    font-weight: normal;
    padding-top: 5px;
}




/* Employer-dashboard-section */
/*#Employer-dashboard-section{
    height: 100vh;
    background-color:#e9f2ff58;
}*/

/* navbar */
#Employer-dashboard-section .navbar-Employer{
    background-color: var(--color-basic-white);
    height: 80px;
    margin: 0;
    margin-left: -12px;
    box-shadow: var(--box-shadow);
    margin-right: 280px;
    border-radius: 0 0 4px 0;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 259px;
}

#Employer-dashboard-section .navbar-Employer .right-part{
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-right: 78px;
    /*background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);*/
    /*background-color: #77a0d3a8;*/
    border-radius: var(--border-radius);
    text-decoration: none;
    margin-bottom: 16px;
    margin-top: -8px;
}

#Employer-dashboard-section .navbar-Employer .right-part .right-part-img-AI{
   width: 60px;
   height: 60px;
   margin-top: 19px;

}

#Employer-dashboard-section .navbar-Employer .right-part a{
   text-decoration: none;
}

#Employer-dashboard-section .navbar-Employer .right-part .right-part-p{
    margin-top: 19px;
    font-size: 18px;
    font-weight: 500;
    border-radius: var(--border-radius);
    padding: 7px 8px;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-black);
    cursor: pointer;
    box-shadow: 0 0 20px #eee;
}


#Employer-dashboard-section .navbar-Employer .left-part{
    margin-left: 40px; 
    margin-top: 12px;
    display: flex;
    flex-direction: row;
}

#Employer-dashboard-section .navbar-Employer .left-part .profile .profile-img{
    width: 55px;    
    width: 55px;  
    border-radius: 50%;  
    cursor: pointer;
}

#Employer-dashboard-section .navbar-Employer .left-part .profile .white-circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-basic-white);
    position: absolute;
    top: 48px;
    left: 41px;
}

#Employer-dashboard-section .navbar-Employer .left-part .profile .Connected-circle{
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: green;
    position: absolute;
    top: 52px;
    left: 46px;
}

#Employer-dashboard-section .navbar-Employer .left-part .profile .profile-arrow-icon{
    position: absolute;
    top: 43px;
    left: 16px;
    font-size: 27px;
    cursor: pointer;
}

#Employer-dashboard-section .navbar-Employer .left-part .messages .messages-icon{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 14px;
    cursor: pointer;
}

#Employer-dashboard-section .navbar-Employer .left-part .messages .Circle-new-messages{
   width: 15px;
   height: 15px;
   color: red;
   border-radius: 50%;
   position: absolute;
   top: 50px;
   left: 0;
}

#Employer-dashboard-section .navbar-Employer .left-part .timing .timing-icon{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 14px;
    cursor: pointer;
}

#Employer-dashboard-section .navbar-Employer .left-part .calendar .calendar-icon{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 14px;
    cursor: pointer;
}

#Employer-dashboard-section .navbar-Employer .left-part .circle-number-messages{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 15px;
    left: 132px;
    text-align: center;
}

#Employer-dashboard-section .navbar-Employer .left-part .circle-number-messages .circle-number-messages-p{
    color: var(--color-basic-white);
    font-size: 16px;
    margin-top: -2px;
}

#Employer-dashboard-section .navbar-Employer .left-part .circle-number-timing{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 15px;
    left: 178px;
    text-align: center;
}

#Employer-dashboard-section .navbar-Employer .left-part .circle-number-timing .circle-number-timing-p{
    color: var(--color-basic-white);
    font-size: 16px;
    margin-top: -2px;
}


/* Main dashboard section */

#Main-dashboard-section{
    background-color: var(--color-Employer_bg_dashboard);
    height: 830px;
    margin-right: 50px;
}

/* part 1 */
#Main-dashboard-section .Dashboard-juniors-part1 h1{
    margin-right: 120px;
    padding-top: 138px;
    font-size: 28px;
    font-weight: 500;
}

#Main-dashboard-section .Dashboard-juniors-part1 h2{
    font-size: 16px;
    font-weight: normal;
    color: #585858;
    margin-right: 120px;
}


/* part 2 */
#Main-dashboard-section .Dashboard-juniors-part2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 120px;
    margin-top: 40px;
}

#Main-dashboard-section .Dashboard-juniors-part2 .part2-div1{
    height: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    background-color:var(--color-Employer_background);
    padding: 20px;
}

#Main-dashboard-section .Dashboard-juniors-part2 .part2-div1 h3{
    font-weight: 500;
    font-size: 18px;
}

#Main-dashboard-section .Dashboard-juniors-part2 .part2-div{
    height: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-basic-black);
    transition: 0.5s;
}

#Main-dashboard-section .Dashboard-juniors-part2 .part2-div:hover{
    transform: scale(1.1);
}

#Main-dashboard-section .Dashboard-juniors-part2 .part2-div span{
    font-size: 36px;
    color: var(--color-Employer-link);
}

#Main-dashboard-section .Dashboard-juniors-part2 .part2-div p{
    font-size: 17px;
    font-weight: normal;
}


/* part 3 */


#Main-dashboard-section .Chart-columns{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 60px;
    margin-right: 120px;
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px;
    border: 1px solid var(--color-Employer_menu);
}

#Main-dashboard-section .Chart-columns .columns{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Main-dashboard-section .Chart-columns .columns .columns-div1{
    width: 80px;
    height: 290px;
    background-color: #6398d8;  
    border-radius: var(--border-radius); 
    text-align: center;
    color: var(--color-basic-white);
    font-weight: 500;
    font-size: 18px;
    padding-top: 20px;
}

#Main-dashboard-section .Chart-columns .columns .columns-div2{
    width: 80px;
    height: 220px;
    margin-top: 68px;
    background-color: #3173c4;
    border-radius: var(--border-radius); 
    text-align: center;
    color: var(--color-basic-white);
    font-weight: 500;
    font-size: 18px;
    padding-top: 20px;
}

#Main-dashboard-section .Chart-columns .columns .columns-div3{
    width: 80px;
    height: 90px;
    margin-top: 196px;
    background-color: #1b7bf0;  
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--color-basic-white);
    font-weight: 500;
    font-size: 18px; 
    padding-top: 20px;
}

#Main-dashboard-section .Chart-columns .columns .columns-p{
    font-size: 16px;
    font-weight: normal; 
}




#Main-dashboard-section .part3-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Main-dashboard-section .calendar {
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-top: 60px;
    color: var(--color-basic-black);
    padding: 20px;
    width: 460px;
    border: 1px solid var(--color-Employer_menu);
}

#Main-dashboard-section .calendar .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
#Main-dashboard-section .calendar .btn {
    cursor: pointer;
}
#month-year {
    font-weight: bold;
    font-size: 20px;
}
.weekdays, .days {
    display: flex;
    flex-wrap: wrap;
}
.days {
    height: 240px;
}
.weekdays div, .days div {
    width: 14.28%;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
}
.days div {
    cursor: pointer;
    transition: background-color 0.3s;
}
.days div:hover {
    background-color: white;
    color: var(--color-Juniors_dark);
}
#Main-dashboard-section .days .today {
    background-color: var(--color-Employer-link);
    color: white;
}
.days .fade {
    color: #555;
}

#Main-dashboard-section #prev{
    background-color: var(--color-Employer_background);
    height: 18px;
    width: 40px;
}

#Main-dashboard-section #next{
    background-color: var(--color-Employer_background);
    height: 18px;
    width: 40px;
}

#prev .fa-arrow-left{
    color: var(--color-basic-white);
}


#Main-dashboard-section #prev1{
    background-color: var(--color-Employer_background);
    height: 18px;
    width: 40px;
}

#Main-dashboard-section #next1{
    background-color: var(--color-Employer_background);
    height: 18px;
    width: 40px;
}










/* Editing-profile */
#Main-dashboard-section .Main-dashboard .Main-dashboard-part1 .Editing-profile{
    height: 440px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background: rgba( 255, 255, 255, 0.25 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );  
}

#Main-dashboard-section .Main-dashboard .Main-dashboard-part1 .Editing-profile .Editing-profile-img{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    margin-top: 60px; 
    margin-bottom: 20px; 
}



#Main-dashboard-section .Main-dashboard .Main-dashboard-part1 .Editing-profile .Editing-profilel-button{
    width: 200px;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
   
    border: 1px solid var(--color-Employer-link);
    padding: 10px 10px;
    font-weight: normal;
    font-size: 18px;
    border-radius: var(--border-radius);
}


#Main-dashboard-section .Main-dashboard .Main-dashboard-part1 .Editing-profile .Editing-profilel-button:hover{
    border: none;
    box-shadow: var(--box-shadow);
}

#Main-dashboard-section .Main-dashboard .Main-dashboard-part1 .Editing-profile .Editing-profilel-button .Editing-profile-a{
    color: var(--color-basic-black);
    text-decoration: none; 
}





#Main-dashboard-section .Main-dashboard .Calendar{
    height: auto;
    display: flex;
    flex-direction: column;
    padding:10px;
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 60px;
}

#Main-dashboard-section .Main-dashboard .Calendar .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.monthYear{
    text-align: center;
    font-weight: 600;
    width: 150px;
}

#Main-dashboard-section .Main-dashboard .Calendar .header button{
    display: flex;
    align-items: center;
    border: none;
    border-radius: 50%;
    background-color: var(--color-basic-white);
    cursor: pointer;
    width: 40px;
    height: 40px;
    box-shadow: var(--box-shadow);
}

#Main-dashboard-section .Main-dashboard .Calendar .days{
    display: grid;
    grid-template-columns: repeat(7,1fr);
}

#Main-dashboard-section .Main-dashboard .Calendar .days .day{
    text-align: center;
    padding: 5px;
    color: #999FA6;
    font-weight: 500;
}

.dates{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}


.date{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    margin: auto;
    cursor: pointer;
    font-weight: 600;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: 0.2s;
}


.date:hover,
.date:active {
    background-color: #f08585;
    color: var(--color-basic-white);
}

.date.inactive{
    color: #d2d2d2;
}

.date.inactive:hover{
    color: var(--color-basic-white);
}


#Main-dashboard-section .Main-dashboard .calendar-setting{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Main-dashboard-section .Main-dashboard .Settings-button{
    height: 350px;
    border: 1px solid red;
    margin-top: 60px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}


/*************** Job management - employer ***************/

.Management{
    background-color:var(--color-Employer_bg_dashboard);
    height: 1400px;
    margin-right: 50px;
}

.Management.Management-open-job{
    background-color:var(--color-Employer_bg_dashboard);
    height: 1100px;
    margin-right: 50px;
}

.Management.Management-close-job{
    background-color:var(--color-Employer_bg_dashboard);
    height: 2100px;
    margin-right: 50px;
}

.Management.Management-onhold-job{
    background-color:var(--color-Employer_bg_dashboard);
    height: 1000px;
    margin-right: 50px;
}


.Management h1{
   margin-right: 120px;
    padding-top: 58px;
    font-size: 28px;
    font-weight: 500;
}

.Management .Management-title-and-filter{
   display: flex;
   flex-direction: row;
   gap: 20px;
   padding-top: 81px;
}

.Management .Management-title-and-filter .addjob-modal-btn{
    margin-top: 58px;
    padding: 0 15px;
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee
}

.Management .Management-title-and-filter .addjob-modal-btn:hover{
    background-position: right center; 
}

.Management .Management-title-and-filter .all-button{
    margin-top: 58px;
    padding: 0 25px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-basic-black);
    padding-top: 11px;
    background-color: #ebe9e9;
    border: 2px solid #ebe9e9;
}

.Management .Management-title-and-filter .all-button:hover{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);
}

.Management .Management-title-and-filter .all-button.buttoncolumnactive{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);
}

.Management .Management-title-and-filter .open-button{
    margin-top: 58px;
    padding: 0 25px;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-basic-black);
    padding-top: 11px;
    background-color: #ebe9e9;
    border: 2px solid #ebe9e9;
}

.Management .Management-title-and-filter .open-button:hover{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);
}

.Management .Management-title-and-filter .open-button.buttoncolumnactive{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);  
}

.Management .Management-title-and-filter .close-button{
    margin-top: 58px;
    padding: 0 25px;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-basic-black);
    padding-top: 11px;
    background-color: #ebe9e9;
    border: 2px solid #ebe9e9;
}

.Management .Management-title-and-filter .close-button:hover{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);
}

.Management .Management-title-and-filter .close-button.buttoncolumnactive{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);  
}

.Management .Management-title-and-filter .onhold-button{
    margin-top: 58px;
    padding: 0 20px;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-basic-black);
    padding-top: 11px;
    background-color: #ebe9e9;
    border: 2px solid #ebe9e9;
}

.Management .Management-title-and-filter .onhold-button:hover{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);
}

.Management .Management-title-and-filter .onhold-button.buttoncolumnactive{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);  
}

.Management .Management-title-and-filter .filtering-ai{
    margin-top: 0px;
    width: 50px;
    height: 50px;
    margin-right: 23px;
}


.pagination{
    margin-right: 120px;
    margin-top: 30px;
}


/* all-jobs */

.Management .all-jobs .all-jobs-titles{
    height: 60px;
    display: flex;
    flex-direction: row;
    margin-right: 120px;
    margin-top: 40px;
    background: rgb(216 228 255 / 87%);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    border-radius: var(--border-radius);
    padding-right: 10px;
}

.Management .all-jobs .all-jobs-titles .h3-first{
   margin-right: 20px;
}

.Management .all-jobs .all-jobs-titles .h3-last{
   width: 160px;
   margin-left: 20px;
}

.Management .all-jobs .all-jobs-titles h3{
    font-size: 18px;
    font-weight: normal;
    width: 350px;
    line-height: 60px;
}


.Management .job {
    background-color: var(--color-basic-white);
    height: 70px;
    margin-right: 120px;
    margin-top: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow); 
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid var(--color-Employer_menu);
}

.Management .job.openjob {
    border: 1px solid green;
}

.Management .job.closejob {
    border: 1px solid red;
}


.Management .job:hover{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.162);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid var(--color-Employer_menu);
}

.Management .job  .job-div-p{
    display: flex;
    flex-direction: row;
}

.Management .job .job-div-p .job-number{
    width: 263px;
    margin-right: 20px;
    padding-right: 10px;
    font-size: 17px;
    font-weight: normal;
    line-height: 70px;
}

.Management .job .job-div-p .job-name{
    width: 255px;
    font-size: 17px;
    font-weight: normal;
    line-height: 70px;
}

.Management .job .job-div-p .job-Submissions{
    width: 250px;
    font-size: 17px;
    font-weight: normal;
    line-height: 70px;
}

.Management .job .job-div-p .job-posting-date{
    width: 252px;
    font-size: 17px;
    font-weight: normal;
    line-height: 70px;
}

.Management .job .job-div-p .job-status-open{
    line-height: 70px;
    font-weight: 500;
    color: green;
    font-size: 20px;
}

.Management .job .job-div-p .job-status-close{
    line-height: 70px;
    font-weight: 500;
    color: red;
    font-size: 20px;
}

.Management .job .job-div-p .job-status-onhold{
    line-height: 70px;
    font-weight: 500;
    color: var(--color-Employer_menu);
    font-size: 20px;
}


.Management .job .Job-details-opened{
    display: none;
}

.Management .job .Job-details-opened.opendetails{
    display: blcok;
}

.Management .job-responsive{
    background-color: var(--color-basic-white);
    height: 70px;
    margin-right: 120px;
    margin-top: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow); 
    cursor: pointer;
    border: 1px solid var(--color-Employer_menu);
}








/* modal */

#exampleModal #exampleModalLabel{
    font-size: 25;
    font-weight: 500;
}

#exampleModal .modal-body {
    background-color: var(--color-Employer_bg_dashboard);
}

#exampleModal .modal-body .row01 {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

#exampleModal .modal-body .row01 input{
    height: 50px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-basic-black);
    cursor: pointer;
    border: 1px solid #000000;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--color-basic-white);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 13%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#exampleModal .modal-body .row01 input:focus{
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.202);
}

#exampleModal .modal-body .row02 {
    display: flex;
    flex-direction: row;
    gap: 67px;
    margin-top: 60px;
    flex-wrap: wrap;
}

#exampleModal .modal-body .row02 .input-margin{
    margin-top: -19px;
}

#exampleModal .modal-body .row02 .radios {
    display: flex;
    flex-direction: row;
    gap: 7px;
    margin-top: -19px;
    padding-top: 25px;
}

#exampleModal .modal-body .row02 textarea {
    height: 50px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-basic-black);
    cursor: pointer;
    border: 1px solid #000000;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--color-basic-white);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 13%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#exampleModal .modal-body .row03{
    margin-top: 50px;
}

#exampleModal .modal-body .row03 .input1 .job-checkbox{
    width: 30px;
    height: 17px;
}

#exampleModal .modal-body .row03 .input1 label{
    font-size: 16px;
}

#exampleModal .modal-body .row04 {
    display: flex;
    flex-direction: row;
    gap: 65px;
    margin-top: 60px;
}

#exampleModal .modal-body .row04 input{
    height: 50px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-basic-black);
    cursor: pointer;
    border: 1px solid #000000;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--color-basic-white);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 13%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#exampleModal .modal-body .row04 .input1margin{
    margin-right: -57px;
}

#exampleModal .modal-body .row04 input:focus{
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.202);
}


#exampleModal .modal-body .tip-carousel{
    border: var(--border-radius);
    display: flex;
    flex-direction: column;
    height: 342px;
    
}

#exampleModal .modal-body .tip-carousel .button-tip{
    display: block;
    margin: 0 auto;

    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    padding: 12px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
    font-weight: 500;
    
    transition:transform 0.2 ease ;
}

#exampleModal .modal-body .tip-carousel .button-tip:active{
   transform: scale(0.96);
}

#exampleModal .modal-body .tip-carousel .button-tip:hover{
    background-position: right center; 
}


#exampleModal .modal-body .tip-carousel .ai-img{
   width: 100px;
   display: block;
   margin: 0 auto;
   margin-bottom: 10px;
   padding-top: 30px;
}

#exampleModal .modal-body .tip-carousel .tip-title{
   text-align: center;
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 40px;
}

#exampleModal .modal-body .tip-carousel #carouselExampleAutoplaying .carousel-item p{
    margin-right: 50px;
    width: 250px;
}

#exampleModal .modal-body .tip-carousel #carouselExampleAutoplaying1 .carousel-item p{
    margin-right: 50px;
    width: 250px;
}

#exampleModal .modal-body .tip-carousel .tip1{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#exampleModal .modal-body .tip-carousel .tip1 .tip-ai-img{
    width: 30px;
    height: 30px;
}

#exampleModal .modal-body .tip-carousel .tip1 .tip-p{
    padding-top: 3px;
    font-size: 17px;
    font-weight: normal;
}







#exampleModal .modal-footer .btn.btn-primary{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    padding: 10px 40px;
}


#exampleModal .modal-footer .btn.btn-primary:hover{
    background-position: right center; 
}




/* modal job */

.offcanvas .offcanvas-header{
    height: 100px;
}


.offcanvas .offcanvas-title{
    margin-top: 10px;
    font-weight: normal;
}

.offcanvas .offcanvas-body .buttons{
    margin-top: 0;
    margin-bottom: 30px;
}

.offcanvas .offcanvas-body .job-type{
    font-size: 16px;
}

.offcanvas .offcanvas-body .job-type span{
    font-weight: 500;
    font-size: 19px;
    display: block;
    margin-bottom: 2px;
    margin-top: 30px;
}

.offcanvas .offcanvas-body .work-environment{
    font-size: 16px;
}

.offcanvas .offcanvas-body .work-environment span{
    font-weight: 500;
    font-size: 19px;
    display: block;
    margin-bottom: 2px;
    margin-top: 30px;
}

.offcanvas .offcanvas-body .start-date{
    font-size: 16px;
}

.offcanvas .offcanvas-body .start-date span{
    font-weight: 500;
    font-size: 19px;
    display: block;
    margin-bottom: 2px;
    margin-top: 30px;
}

.offcanvas .offcanvas-body .business-hours{
    font-size: 16px;
}

.offcanvas .offcanvas-body .business-hours span{
    font-weight: 500;
    font-size: 19px;
    display: block;
    margin-bottom: 2px;
    margin-top: 30px;
}

.offcanvas .offcanvas-body h3{
    font-size: 19px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 6px;
}

.offcanvas .offcanvas-body .Editing-job{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    padding: 14px 51px;
    margin-top: 10px;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: 18px;
}

.offcanvas .offcanvas-body .Editing-job:hover{
    background-position: right center; 
}

.offcanvas .offcanvas-body .Delete-job{
    color: var(--color-basic-black);
    box-shadow: 0 0 20px #eee;
    padding: 14px 41px;
    margin-top: 10px;
    border: 2px solid #77A1D3;
    border-radius: var(--border-radius);
    text-decoration: none; 
    font-size: 16px;
}

.offcanvas .offcanvas-body .Delete-job:hover{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.207);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 2px solid rgba( 255, 255, 255, 0.18 );
}

.offcanvas .offcanvas-body .Job-for-men-and-women{
   font-size: 16px;
   color: var(--color-basic-white);
   font-weight: normal;
   background-color: var(--color-basic-black);
   padding: 10px 20px;
   border: var(--border-radius);
}

.offcanvas .offcanvas-body .tip-carousel{
    border: var(--border-radius);
    display: flex;
    flex-direction: column;
    height: 272px;
}

.offcanvas .offcanvas-body .tip-carousel .button-tip{
    display: block;
    margin: 0 auto;

    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    padding: 12px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
    font-weight: 500;
    
    transition:transform 0.2 ease ;
}

.offcanvas .offcanvas-body .tip-carousel .button-tip:active{
   transform: scale(0.96);
}

.offcanvas .offcanvas-body .tip-carousel .button-tip:hover{
    background-position: right center; 
}


  .offcanvas .offcanvas-body .tip-carousel .ai-img{
   width: 100px;
   display: block;
   margin: 0 auto;
   margin-bottom: 10px;
   padding-top: 30px;
}

.offcanvas .offcanvas-body .tip-carousel .tip-title{
   text-align: center;
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 40px;
}

.offcanvas .offcanvas-body .tip-carousel #carouselExampleAutoplaying .carousel-item p{
    margin-right: 50px;
    width: 250px;
}

.offcanvas .offcanvas-body .tip-carousel #carouselExampleAutoplaying1 .carousel-item p{
    margin-right: 50px;
    width: 250px;
}

.offcanvas .offcanvas-body .tip-carousel .tip1{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.offcanvas .offcanvas-body .tip-carousel .tip1 .tip-ai-img{
    width: 30px;
    height: 30px;
}



/* modal add-management */

.add-management-modal label{
    display: block;
    margin-top: 15px;
}




/*************** profile - employer ***************/


#employer-profile{
    background-color: var(--color-Employer_bg_dashboard);
    height: 1800px;
    margin-right: 50px;
}

#employer-profile .profilesection h1{
    margin-right: 120px;
    padding-top: 148px;
    font-size: 28px;
    font-weight: 500;
}

#employer-profile .profilesection .title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#employer-profile .profilesection .ai{
    margin-top: 88px;
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

#employer-profile .profilesection .Personal-details{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 40px;
    gap: 30px;
}

#employer-profile .profilesection .Personal-details{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 200px;
    margin-right: 120px;
    margin-top: 40px;
}

#employer-profile .profilesection .Personal-details .profileImg{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

#employer-profile .profilesection .Personal-details .details #h2-name{
    font-size: 24px;
    font-weight: 600;
}

#employer-profile .profilesection .Personal-details .details h3{
    font-size: 18px;
    font-weight: 400;
}


#employer-profile .profilesection .Personal-details .EditButton button{
    margin-right: 510px;
    border: none;
    padding: 5px 30px;
    background-color: var(--color-Employer_background);
    font-size: 16px;
    color: var(--color-basic-black);
    border-radius: var(--border-radius);
}

#employer-profile .profilesection .Personal-details .EditButton button:hover{
    box-shadow: var(--box-shadow);
}


#employer-profile .profilesection .Company-details{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right: 120px;
    margin-top: 40px;
}

#employer-profile .profilesection .Company-details .Company-details-header{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 56px;
}

#employer-profile .profilesection .Company-details .Company-details-header .Company-details-title{
   font-weight: 500;
   font-size: 24px;
}


#employer-profile .profilesection .Company-details .Company-details-header .EditButton button{
    margin-right: 510px;
    border: none;
    padding: 5px 30px;
    background-color: var(--color-Employer_background);
    font-size: 16px;
    color: var(--color-basic-black);
    border-radius: var(--border-radius);
}

#employer-profile .profilesection .Company-details .Company-details-header .EditButton button:hover{
    box-shadow: var(--box-shadow);
}

#employer-profile .profilesection .details p{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -79px;
    line-height: 106px;
}



#employer-profile .profilesection .about-company{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right: 120px;
    margin-top: 40px;
}



#employer-profile .profilesection .about-company .about-company-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
 }
 
 #employer-profile .profilesection .about-company .about-company-header .Company-details-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #employer-profile .profilesection .about-company .about-company-header .EditButton button{
     margin-right: 510px;
     border: none;
     padding: 5px 30px;
     background-color: var(--color-Employer_background);
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #employer-profile .profilesection .about-company .about-company-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 
#employer-profile .profilesection .about-company .about p{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -37px;
    line-height: 40px;
    width: 1070px;
}



#employer-profile .profilesection .Company-projects{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right: 120px;
    margin-top: 40px;
    height: 340px;
}



#employer-profile .profilesection .Company-projects .Company-projects-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
 }
 
 #employer-profile .profilesection .Company-projects .Company-projects-header .Company-details-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #employer-profile .profilesection .Company-projects .Company-projects-header .EditButton button{
     border: none;
     padding: 5px 30px;
     background-color: var(--color-Employer_background);
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #employer-profile .profilesection .Company-projects .Company-projects-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 
#employer-profile .profilesection .Company-projects .projects{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -37px;
    width: 480px;
    border-radius: var(--border-radius);
}
 
#employer-profile .profilesection .Company-projects .projects p{
    cursor: pointer;
    border-radius: var(--border-radius);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}
 
#employer-profile .profilesection .Company-projects .projects p:hover{
    background-color: #fbfbfb;
}


#parent-divs{
    display: flex;
    flex-direction: row;
}



#employer-profile .profilesection .recommend{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-Employer_background);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right:94px;
    margin-top: 40px;
    height: 340px;
}



#employer-profile .profilesection .recommend .recommend-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
    padding-bottom: 20px;
 }
 
 #employer-profile .profilesection .recommend .recommend-header .recommend-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #employer-profile .profilesection .recommend .recommend-header .EditButton button{
     border: none;
     padding: 5px 30px;
     background-color: var(--color-Employer_background);
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #employer-profile .profilesection .recommend .recommend-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 #employer-profile .profilesection .recommend #carouselExampleAutoplaying p{
    padding-right: 70px;
    padding-left: 70px;
 }


 #employer-profile .profilesection .recommend #carouselExampleAutoplaying .worker-img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 235px;
    margin-bottom: 5px;
 }


 #employer-profile .profilesection .social-media{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 240px;
    margin-right: 120px;
    margin-top: 40px;
}



#employer-profile .profilesection .social-media .social-media-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
    padding-bottom: 24px;
 }
 
 #employer-profile .profilesection .social-media .social-media-header .social-media-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #employer-profile .profilesection .social-media .social-media-header .EditButton button{
     margin-right: 510px;
     border: none;
     padding: 5px 30px;
     background-color: var(--color-Employer_background);
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #employer-profile .profilesection .social-media .social-media-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }
 
 #employer-profile .profilesection .social-media .Links-social-media{
    margin-right: 56px;
 }
 
 #employer-profile .profilesection .social-media .Links-social-media .Company-website{
    text-decoration: none;
    font-size: 17px;
    font-weight: normal;
    display: block;
    margin-bottom: 20px;
 }
 
 #employer-profile .profilesection .social-media .Links-social-media .Instagram_logo{
    width: 40px;
    height: 40px;
    margin-left: 10px;
    cursor: pointer;
 }
 
 #employer-profile .profilesection .social-media .Links-social-media .linkedin_logo{
    width: 45px;
    height: 45px;
    cursor: pointer;
 }


 























/*************** Candidates - employer ***************/

#Candidates{
    background-color: var(--color-Employer_bg_dashboard);
    height: 1692px;
    margin-right: 50px;
    margin-bottom: -373px;
}

#Candidates .Candidates-title{
    display: flex;
    flex-direction: row;
    position: relative;
}

#Candidates .Candidates-title h1{
    margin-right: 120px;
    padding-top: 140px;
    font-size: 28px;
    font-weight: 500;
}

#Candidates .Candidates-title .Candidates-ai{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 135px;
    left: -68px;
}

#Candidates .Main_links{
    margin-right: 120px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 30px;
}

#Candidates .Main_links .Adjustments-link{
   font-weight: normal;
   font-size: 20px;
   border-radius: 10%;
   text-decoration: none;
   color: var(--color-basic-black);
}

#Candidates .Main_links .Adjustments-link.Main_link_active{
   padding-bottom: 3px;
   border-bottom: 4px solid var(--color-Employer_menu);
   font-weight: 500;
}

#Candidates .Main_links .Save-link{
    font-weight: normal;
    font-size: 20px;
    text-decoration: none;
    color: var(--color-basic-black);
    border-radius: 10%;
}

#Candidates .Main_links .Save-link.Main_link_active{
    padding-bottom: 3px;
    border-bottom: 4px solid var(--color-Employer_menu);
    font-weight: 500;
 }

#Candidates .Main_links .Candidates-link{
    font-weight: normal;
    font-size: 20px;
    text-decoration: none;
    color: var(--color-basic-black);
    border-radius: 10%;
}

#Candidates .Main_links .Candidates-link.Main_link_active{
    padding-bottom: 3px;
    border-bottom: 4px solid var(--color-Employer_menu);
    font-weight: 500;
 }




									
#Candidates .filtering-input{
    margin-right: 120px;
     display: flex;
     flex-direction: row;
     gap: 20px;
     margin-top: 30px;
     display: none;
 }
 
 #Candidates .filtering-input .input-name{
     display: flex;
     flex-direction: column;
 }
 
 #Candidates .filtering-input .input-name label{
     font-size: 17px;
     font-weight: normal;
 }
 
 #Candidates .filtering-input .input-name input{
     height: 40px;
     width: 210px;
 }
 
 #Candidates .filtering-input .input-city{
     display: flex;
     flex-direction: column;
 }
 
 #Candidates .filtering-input .input-city label{
     font-size: 17px;
     font-weight: normal;
 }
 
 #Candidates .filtering-input .input-city input{
     height: 40px;
     width: 210px;
 }

 #Candidates .filtering-input .input-status{
     display: flex;
     flex-direction: column;
 }
 
 #Candidates .filtering-input .input-status h3{
     font-size: 17px;
     font-weight: normal;
     margin-bottom: 1px;
     margin-top: 4px;
 }
 
 #Candidates .filtering-input .input-status .Candidate_status{
     height: 40px;
     width: 210px;
 }
 
 #Candidates .filtering-input .Search-icon{
     margin: 0;
     padding: 0;
     font-size: 38px;
     margin-top: 27px;
     color: var(--color-Employer_menu);
     cursor: pointer;
 }
 
 #Candidates .filtering-input .Search-icon:hover{
     color: var(--color-Employer-link);
 }
 

 #Candidates .Candidates-div .grid-container{
    display: grid;
    grid-template-columns: 400px 400px 400px;
    grid-template-rows: 440px 440px;
    gap: 20px;
    margin-top: 30px;
    margin-right: 13px;
 }

 #Candidates .Candidates-div .Candidate{
     border: 1px solid var(--color-Employer_menu);
     background-color: var(--color-basic-white);
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     position: relative;
 }

 #Candidates .Candidates-div .Candidate:hover{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.162);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid var(--color-Employer_menu);
 }

 #Candidates .Candidates-div .Candidate:hover .View-profile{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-black);
    box-shadow: 0 0 20px #eee;
 }

 #Candidates .Candidates-div .Candidate .profile-img-junior{
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: block;
     margin: 0 auto;
     margin-top: 40px;
 }

 #Candidates .Candidates-div .Candidate h2{
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    margin-top: 20px;
 }

 #Candidates .Candidates-div .Candidate h3{
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    margin-top: 10px;
 }

 #Candidates .Candidates-div .Candidate .location-and-phone{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 84px;
    gap: 30px;
    margin-top: 17px;
 }

 #Candidates .Candidates-div .Candidate .location{
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
 }

 #Candidates .Candidates-div .Candidate .location .location-p{
    font-weight: normal;
    font-size: 16px;
 }

 
 #Candidates .Candidates-div .Candidate .phone{
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
 }
 
 #Candidates .Candidates-div .Candidate .phone .phone-p{
    font-weight: normal;
    font-size: 16px;
 }
 
 #Candidates .Candidates-div .Candidate .status-not-working{
    font-size: 16px;
    font-weight: 500;
    color: green;
    text-align: center;
 }
 
 #Candidates .Candidates-div .Candidate .status-working{
    font-size: 16px;
    font-weight: 500;
    color: #d77b0d;
    text-align: center;
 }
 
 #Candidates .Candidates-div .Candidate .send-message{
    font-size: 16px;
    font-weight: 500;
    color: var(--color-Employer_menu);
    text-align: center;
    margin-top: -10px;
    cursor: pointer;
 }
 
 #Candidates .Candidates-div .Candidate .line{
    height: 1px;
    width: 170px;
    background-color: #c0c0c0;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
 }
 
 #Candidates .Candidates-div .Candidate .View-profile{
    display: block;
    margin: 0 auto;
    margin-top: 16px;
    height: 60px;
    line-height: 50px;
    border-radius: var(--border-radius);
    background-color: var(--color-basic-white);
    color: var(--color-basic-black);
    border: none;
 }
 
 #Candidates .Candidates-div .Candidate .View-profile:hover{
    background-position: right center; 
 }



 #Candidates .Candidates-div .Candidate .Matching-percentage{
    position: absolute;
    top: 15px;
    left: 21px;
    color: #494949;
    font-size: 17px;
 }

 #Candidates .Candidates-div .Candidate .Matching-ai-img1{
    width: 33px;
    position: absolute;
    top: 11px;
    right: 251px;
 }

 #Candidates .Candidates-div .Candidate .Matching-ai-img2{
    width: 33px;
    position: absolute;
    top: 11px;
    right: 243px;
 }

 #Candidates .Candidates-div .Candidate .Remove-icon{
    position: absolute;
    top: 15px;
    right: 21px;
    background-color: rgba(216, 228, 255, 0.87);
    box-shadow: var(--box-shadow);
    padding: 5px;
    cursor: pointer;
    border-radius: var(--border-radius);
 }

 #Candidates .Candidates-div .Candidate .save-icon{
    position: absolute;
    top: 70px;
    right: 21px;
    font-size: 30px;
    padding: 2px;
    cursor: pointer;
    border-radius: var(--border-radius);
    color: #5a8dcb;
 }

 #Candidates .Candidates-div .Candidate .save-icon:hover{ 
    font-size: 32px;
 }

 #Candidates .Candidates-div .Candidate .Remove-icon:hover{
    background-color: var(--color-basic-white);
 }

.material-symbols-rounded.save-icon.fill-icon{
    font-variation-settings: 'FILL' 1;

 }

.not-fill-icon{
    font-variation-settings: 'FILL' 0;
 }


#Candidates [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    display: none;
}

.Management [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    display: block;
}







#Candidates-save{
    background-color:var(--color-Employer_bg_dashboard);
    height: 808px;
    margin-right: 50px;
    margin-bottom: -333px;
}


#Candidates-save .Candidates-title{
    display: flex;
    flex-direction: row;
    position: relative;
}

#Candidates-save .Candidates-title h1{
    margin-right: 120px;
    padding-top: 140px;
    font-size: 28px;
    font-weight: 500;
}

#Candidates-save .Candidates-title .Candidates-ai{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 135px;
    left: -68px;
}

#Candidates-save .Main_links{
    margin-right: 120px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 30px;
}

#Candidates-save .Main_links .Adjustments-link{
   font-weight: normal;
   font-size: 20px;
   border-radius: 10%;
   text-decoration: none;
   color: var(--color-basic-black);
}

#Candidates-save .Main_links .Adjustments-link.Main_link_active{
   padding-bottom: 3px;
   border-bottom: 4px solid var(--color-Employer_menu);
   font-weight: 500;
}

#Candidates-save .Main_links .Save-link{
    font-weight: normal;
    font-size: 20px;
    text-decoration: none;
    color: var(--color-basic-black);
    border-radius: 10%;
}

#Candidates-save .Main_links .Save-link.Main_link_active{
    padding-bottom: 3px;
    border-bottom: 4px solid var(--color-Employer_menu);
    font-weight: 500;
 }

#Candidates-save .Main_links .Candidates-link{
    font-weight: normal;
    font-size: 20px;
    text-decoration: none;
    color: var(--color-basic-black);
    border-radius: 10%;
}

#Candidates-save .Main_links .Candidates-link.Main_link_active{
    padding-bottom: 3px;
    border-bottom: 4px solid var(--color-Employer_menu);
    font-weight: 500;
 }




									
#Candidates-save .filtering-input{
    margin-right: 120px;
     display: flex;
     flex-direction: row;
     gap: 20px;
     margin-top: 30px;
     display: none;
 }
 
 #Candidates-save .filtering-input .input-name{
     display: flex;
     flex-direction: column;
 }
 
 #Candidates-save .filtering-input .input-name label{
     font-size: 17px;
     font-weight: normal;
 }
 
 #Candidates-save .filtering-input .input-name input{
     height: 40px;
     width: 210px;
 }
 
 #Candidates-save .filtering-input .input-city{
     display: flex;
     flex-direction: column;
 }
 
 #Candidates-save .filtering-input .input-city label{
     font-size: 17px;
     font-weight: normal;
 }
 
 #Candidates-save .filtering-input .input-city input{
     height: 40px;
     width: 210px;
 }

 #Candidates-save .filtering-input .input-status{
     display: flex;
     flex-direction: column;
 }
 
 #Candidates-save .filtering-input .input-status h3{
     font-size: 17px;
     font-weight: normal;
     margin-bottom: 1px;
     margin-top: 4px;
 }
 
 #Candidates-save .filtering-input .input-status .Candidate_status{
     height: 40px;
     width: 210px;
 }
 
 #Candidates-save .filtering-input .Search-icon{
     margin: 0;
     padding: 0;
     font-size: 38px;
     margin-top: 27px;
     color: var(--color-Employer_menu);
     cursor: pointer;
 }
 
 #Candidates-save .filtering-input .Search-icon:hover{
     color: var(--color-Employer-link);
 }
 

 #Candidates-save .Candidates-div .grid-container{
    display: grid;
    grid-template-columns: 400px 400px 400px;
    grid-template-rows: 440px;
    gap: 20px;
    margin-top: 30px;
    margin-right: 13px;
 }

 #Candidates-save .Candidates-div .Candidate{
     border: 1px solid var(--color-Employer_menu);
     background-color: var(--color-basic-white);
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     position: relative;
 }
 
 #Candidates-save .Candidates-div .Candidate .Matching-ai-img2{
    width: 33px;
    position: absolute;
    top: 11px;
    right: 243px;
 }

 #Candidates-save .Candidates-div .Candidate:hover{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.162);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid var(--color-Employer_menu);
 }

 #Candidates-save .Candidates-div .Candidate:hover .View-profile{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-black);
    box-shadow: 0 0 20px #eee;
 }

 #Candidates-save .Candidates-div .Candidate .profile-img-junior{
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: block;
     margin: 0 auto;
     margin-top: 40px;
 }

 #Candidates-save .Candidates-div .Candidate h2{
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    margin-top: 20px;
 }

 #Candidates-save .Candidates-div .Candidate h3{
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    margin-top: 10px;
 }

 #Candidates-save .Candidates-div .Candidate .location-and-phone{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 84px;
    gap: 30px;
    margin-top: 17px;
 }

 #Candidates-save .Candidates-div .Candidate .location{
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
 }

 #Candidates-save .Candidates-div .Candidate .location .location-p{
    font-weight: normal;
    font-size: 16px;
 }

 
 #Candidates-save .Candidates-div .Candidate .phone{
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
 }
 
 #Candidates-save .Candidates-div .Candidate .phone .phone-p{
    font-weight: normal;
    font-size: 16px;
 }
 
 #Candidates-save .Candidates-div .Candidate .status-not-working{
    font-size: 16px;
    font-weight: 500;
    color: green;
    text-align: center;
 }
 
 #Candidates-save .Candidates-div .Candidate .status-working{
    font-size: 16px;
    font-weight: 500;
    color: #d77b0d;
    text-align: center;
 }
 
 #Candidates-save .Candidates-div .Candidate .send-message{
    font-size: 16px;
    font-weight: 500;
    color: var(--color-Employer_menu);
    text-align: center;
    margin-top: -10px;
    cursor: pointer;
 }
 
 #Candidates-save .Candidates-div .Candidate .line{
    height: 1px;
    width: 170px;
    background-color: #c0c0c0;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
 }
 
 #Candidates-save .Candidates-div .Candidate .View-profile{
    display: block;
    margin: 0 auto;
    margin-top: 16px;
    height: 60px;
    line-height: 50px;
    border-radius: var(--border-radius);
    background-color: var(--color-basic-white);
    color: var(--color-basic-black);
    border: none;
 }
 
 #Candidates-save .Candidates-div .Candidate .View-profile:hover{
    background-position: right center; 
 }



 #Candidates-save .Candidates-div .Candidate .Matching-percentage{
    position: absolute;
    top: 15px;
    left: 21px;
    color: #494949;
    font-size: 17px;
 }

 #Candidates-save .Candidates-div .Candidate .Remove-icon{
    position: absolute;
    top: 15px;
    right: 21px;
    background-color: rgba(216, 228, 255, 0.87);
    box-shadow: var(--box-shadow);
    padding: 5px;
    cursor: pointer;
    border-radius: var(--border-radius);
 }

 #Candidates-save .Candidates-div .Candidate .save-icon{
    position: absolute;
    top: 70px;
    right: 21px;
    font-size: 30px;
    padding: 2px;
    cursor: pointer;
    border-radius: var(--border-radius);
    color: #5a8dcb;
 }

 #Candidates-save .Candidates-div .Candidate .save-icon:hover{ 
    font-size: 32px;
 }

 #Candidates-save .Candidates-div .Candidate .Remove-icon:hover{
    background-color: var(--color-basic-white);
 }






 /*************** Employer messages ***************/


#message-system{
    background-color: var(--color-Employer_bg_dashboard);
    height: 832px;
    margin-right: 50px;
}

#message-system .message h1{
    margin-right: 120px;
    padding-top: 148px;
    font-size: 28px;
    font-weight: 500;
}


#message-system .message .message-parent{
    display: flex;
    flex-direction: row;
}

#message-system .message .chat-list .chat{
    height: 108px;
    background-color:var(--color-Employer_background);
    border: 1px solid var(--color-Employer_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}


#message-system .message .chat-list .chat .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-system .message .chat-list .chat .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}




#message-system .message .chat-list .chat .number-message{
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    color: var(--color-basic-white);
    text-align: center;
    position: absolute;
    top: 15px;
    left: 18px;
}

#message-system .message .chat-list .chat .number-message p{
    margin-top: -1px;
    margin-right: 1px;
}

#message-system .message .chat-list .chat .chat-details p{
    font-size: 16px;
    font-weight: 500;
}

#message-system .message .chat-list .chat1{
    height: 134px;
    background-color:var(--color-basic-white);
    border: 1px solid var(--color-Employer_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}


#message-system .message .chat-list .chat1 .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-system .message .chat-list .chat1 .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#message-system .message .chat-list .chat1 .number-message{
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    color: var(--color-basic-white);
    text-align: center;
    position: absolute;
    top: 15px;
    left: 18px;
}

#message-system .message .chat-list .chat1 .number-message p{
    margin-top: -1px;
    margin-right: 0;
}

#message-system .message .chat-list .chat1 .chat-details p{
    font-size: 16px;
    font-weight: 500;
}



#message-system .message .chat-list .chat2{
    height: 108px;
    background-color:#f9f8f8;
    border: 1px solid var(--color-Employer_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}


#message-system .message .chat-list .chat2 .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-system .message .chat-list .chat2 .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#message-system .message .chat-list .chat2 .chat-details p{
    font-size: 16px;
    font-weight: normal;
}



#message-system .message .chat-list .chat3{
    height: 108px;
    background-color:var(--color-basic-white);
    border: 1px solid var(--color-Employer_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}


#message-system .message .chat-list .chat3 .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-system .message .chat-list .chat3 .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#message-system .message .chat-list .chat3 .number-message{
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    color: var(--color-basic-white);
    text-align: center;
    position: absolute;
    top: 15px;
    left: 18px;
}

#message-system .message .chat-list .chat3 .number-message p{
    margin-top: -1px;
    margin-right: 1px;
}

#message-system .message .chat-list .chat3 .chat-details p{
    font-size: 16px;
    font-weight: 500;
}


#message-system .message .chat-div{
    height: 520px;
    background-color:#ccd9ea58;
    margin-top: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}


#message-system .message .chat-div .chat-div-header{
    height: 80px;
    background-color:var(--color-basic-white);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#message-system .message .chat-div .chat-div-header .chat-header-img-profile{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#message-system .message .chat-div .chat-div-header .name .name1{
    font-size: 18px;
    font-weight: normal;
    margin: 0;
}

#message-system .message .chat-div .chat-div-header .name .connected{
    font-size: 16px;
    font-weight: normal;
    color: green;
}

#message-system .message .chat-div .chat-div-header .icon{
    margin-top: 10px;
}

#message-system .message .chat-div .chat-div-header .icon .circle{
    width: 5px;
    height: 5px;
    background-color: var(--color-basic-black);
    border-radius: 50%;
    margin-bottom: 5px;
    margin-right: 430px;
}

#message-system .message .chat-div .message-employer{
    margin-top: 60px;
    margin-right: 17px;
    display: flex;
    flex-direction: row;
}

#message-system .message .chat-div .message-employer .message-employer-img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#message-system .message .chat-div .message-employer .message-employer-content{
    width: 450px;
    height: 160px;
    background-color: var(--color-Employer_background);
    border-radius: 4px 44px 4px 4px;
    padding: 20px;
}

#message-system .message .chat-div .message-junior{
    margin-top: 39px;
    margin-right: 17px;
    display: flex;
    flex-direction: row;
    margin-right: 287px;
}

#message-system .message .chat-div .message-junior .message-junior-img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#message-system .message .chat-div .message-junior .message-junior-content{
    width: 300px;
    height: 90px;
    background-color: var(--color-basic-white);
    border-radius: 44px 4px 4px 4px;
    padding: 20px;
    box-shadow: var(--box-shadow);
}

#message-system .message .chat-div .writing-message{
    height: 60px;
    background-color:var(--color-basic-white);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    margin-top: 31px;
}

#message-system .message .chat-div .writing-message p{
    font-size: 16px;
    font-weight: normal;
    color: #6c6c6c;
}

#message-system .message .chat-div .writing-message .send-icon{
    transform: rotate(0.5turn);
}






/**** settings - Employer ****/

#settings-Employer{
    background-color: var(--color-Juniors_background);
    height: 1400px;
    margin-right: 50px;
}

#settings-Employer h1{
    margin-right: 120px;
    padding-top: 153px;
    font-size: 28px;
    font-weight: 500;
}

#settings-Employer h2{
    font-size: 19px;
    font-weight: 500;
}

/* Adding-education-field */
#settings-Employer .field-activity-div{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 40px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settings-Employer .field-activity-div #field-activity-input{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


/* Advertising-preferences */
#settings-Employer .Advertising-preferences{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settings-Employer .Advertising-preferences .Advertising-preferences-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

#settings-Employer .Advertising-preferences .Advertising-preferences-div #Advertising-preferences-input{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}







/* Candidate-preferences */
#settings-Employer .Candidate-preferences{
    margin-right: 120px;
    height: 180px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}

#settings-Employer .Candidate-preferences .Candidate-preferences-h2{
    padding-top: 20px;
}

#settings-Employer .Candidate-preferences .preferences-employer .Preferred-areas-Candidate{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-Employer .Candidate-preferences .preferences-employer .Preferred-areas-Candidate .Preferred-areas-Candidate-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .Candidate-preferences .preferences-employer .Preferred-areas-Candidate #Preferred-areas-CandidateID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}

#settings-Employer .Candidate-preferences .preferences-employer .salary-range{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-Employer .Candidate-preferences .preferences-employer .salary-range .salary-range-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
    margin-left: 11px;
}

#settings-Employer .Candidate-preferences .preferences-employer .salary-range #salary-range-inputID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}




/* Message-preferences-employer */
#settings-Employer .Message-preferences-employer{
    margin-right: 120px;
    height: 180px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}

#settings-Employer .Message-preferences-employer .Message-preferences-employer-h2{
    padding-top: 20px;
}



#settings-Employer .Message-preferences-employer .Alerts-parent .candidate-alerts{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
    padding-right: 150px;
}

#settings-Employer .Message-preferences-employer .Alerts-parent .candidate-alerts .candidate-alerts-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .Message-preferences-employer .Alerts-parent .candidate-alerts #candidate-alertsID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


#settings-Employer .Message-preferences-employer .Alerts-parent .SMS-messages{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
    margin-right: 64px;
}

#settings-Employer .Message-preferences-employer .Alerts-parent .SMS-messages .SMS-messages-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .Message-preferences-employer .Alerts-parent .SMS-messages #SMS-messagesID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}





/* privacy-settings */
#settings-Employer .privacy-settings{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}


#settings-Employer .privacy-settings .privacy-settings-h2{
    padding-top: 20px;
}



#settings-Employer .privacy-settings .privacy-settings-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
    padding-right: 150px;
}

#settings-Employer .privacy-settings .privacy-settings-div .privacy-settings-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .privacy-settings .privacy-settings-div #privacy-settingsID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}




/* Account-security */
#settings-Employer .Account-security{
    margin-right: 120px;
    height: 180px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}

#settings-Employer .Account-security .Account-security-h2{
    padding-top: 20px;
}

#settings-Employer .Account-security .username-and-password .User-change{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-Employer .Account-security .username-and-password .User-change .User-change-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .Account-security .username-and-password .User-change #User-changeID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


#settings-Employer .Account-security .username-and-password .password-change{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-Employer .Account-security .username-and-password .password-change .password-change-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .Account-security .username-and-password .password-change #password-change-inputID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
    margin-right: 36px;
}




/* Data-and-privacy */
#settings-Employer .Data-and-privacy{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settings-Employer .Data-and-privacy .Account-deletion{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

#settings-Employer .Data-and-privacy .Account-deletion .Account-deletion-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-Employer .Data-and-privacy .Account-deletion .removeButton{
    padding: 2px 40px;
    background-color: #fff;
}

#settings-Employer .Data-and-privacy .Account-deletion .removeButton:hover{
    transform: scale(1.03);
}


#settings-Employer .Save-changes-button{
    margin-right: 1163px;
    margin-top: 40px;
    padding: 10px 25px;
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border: none;
    border-radius: var(--border-radius);
}

#settings-Employer .Save-changes-button:hover{
    background-position: right center;
}







































 
 /* חלון נפתח */

#offcanvasExampleLabel{
    font-weight: normal;
    font-size: 20px;
}

.offcanvas-body .img-and-name{
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
}

.offcanvas-body .img-and-name .img-profile{
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.offcanvas-body .img-and-name .name-and-profession{
    display: flex;
    flex-direction: column;
}

.offcanvas-body .img-and-name .name-and-profession h2{
    font-size: 24px;
    font-weight: 500;
}

.offcanvas-body .img-and-name .name-and-profession h3{
    font-size: 18px;
    font-weight: normal;
    margin-top: 0;
}

.offcanvas-body .buttons{
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-top: 33px;   
}

.offcanvas-body .buttons .Send-invitation{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    padding: 14px 51px;
    margin-top: 10px;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none; 
    font-size: 18px; 
}

.offcanvas-body .buttons .Send-invitation:hover{
    background-position: right center;
}

.offcanvas-body .buttons .message{
    color: var(--color-basic-black);
    box-shadow: 0 0 20px #eee;
    padding: 14px 41px;
    margin-top: 10px;
    border: 2px solid #77A1D3;
    border-radius: var(--border-radius);
    text-decoration: none; 
    font-size: 16px;
}

.offcanvas-body .buttons .message:hover{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.207);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 2px solid rgba( 255, 255, 255, 0.18 );
}


.offcanvas-body .Personal-details h3{
    font-size: 19px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 10px;
}

.offcanvas-body .Personal-details p{
    margin: 0;
    margin-bottom: 11px;
    font-weight: normal;
    font-size: 16px;
    color: var(--color-basic-black);
}

.offcanvas-body .strengths h3{
    font-size: 19px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 10px;
}

.offcanvas-body .strengths p{
    margin: 0;
    margin-bottom: 11px;
    font-weight: normal;
    font-size: 16px;
    color: var(--color-basic-black);
}

.offcanvas-body .weaknesses h3{
    font-size: 19px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 10px;
}

.offcanvas-body .weaknesses p{
    margin: 0;
    margin-bottom: 11px;
    font-weight: normal;
    font-size: 16px;
    color: var(--color-basic-black);
}

.offcanvas-body .Professional-goals h3{
    font-size: 19px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 10px;
}

.offcanvas-body .Professional-goals p{
    margin: 0;
    margin-bottom: 11px;
    font-weight: normal;
    font-size: 16px;
    color: var(--color-basic-black);
}

.offcanvas-body .Links{
    display: flex;
    flex-direction: column;
}

.offcanvas-body .Links h3{
    font-size: 19px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 10px;
}

.offcanvas-body .Links a{
    margin: 0;
    margin-bottom: 11px;
    font-weight: normal;
    font-size: 16px;
    border: 2px solid rgba(216, 228, 255, 0.87);
    width: 238px;
    border-radius: var(--border-radius);
    text-align: center;
    height: 50px;
    line-height: 46px;
    text-decoration: none
}

.offcanvas-body .Links a:hover{
    background-color: rgba(216, 228, 255, 0.87);
    box-shadow: var(--box-shadow);
}



.save-Candidates-div{
    display: none;
}








/*************** Scheduled interviews - employer ***************/


#scheduled{
    background-color:var(--color-Employer_bg_dashboard);
    height: 1258px;
    margin-right: 50px;
    
}

#scheduled h1{
    margin-right: 120px;
    padding-top: 140px;
    font-size: 28px;
    font-weight: 500;
}

#scheduled .titles-scheduled{
    height: 60px;
    display: flex;
    flex-direction: row;
    margin-right: 120px;
    margin-top: 40px;
    background: rgb(216 228 255 / 87%);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius);
    padding-right: 10px;
    margin-bottom: 20px;
}

#scheduled .titles-scheduled h3{
    font-size: 18px;
    font-weight: normal;
    width: 350px;
    line-height: 60px;
    text-align: center;
}


#scheduled .Scheduled-interview{
   height: 100px;
   margin-right: 120px;
   border-radius: var(--border-radius);
   border: 1px solid var(--color-Employer_menu);
   background-color: var(--color-basic-white);
   box-shadow: var(--box-shadow);
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 20px;
}

#scheduled .Scheduled-interview .Candidate-name{
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 5px;
  width: 350px;
padding-right: 57px;
}

#scheduled .Scheduled-interview .Candidate-name .profile-img{
  width: 70px;
  height: 70px;
  border-radius: 50%; 
}

#scheduled .Scheduled-interview .Candidate-name .profile-img{
  width: 60px;
  height: 60px;
  border-radius: 50%; 
}

#scheduled .Scheduled-interview .Candidate-name .Candidate-name-p{
  font-size: 18px;
  font-weight: normal;
  padding-top: 15px;
}

#scheduled .Scheduled-interview .Summons-date{
  width: 350px;
}

#scheduled .Scheduled-interview .Summons-date .Summons-date-p{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: -10px;
}

#scheduled .Scheduled-interview .Summons-time{
  width: 350px;
}

#scheduled .Scheduled-interview .Summons-time .Summons-time-p{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: -10px;
}

#scheduled .Scheduled-interview .Reminder-button-div{
    width: 350px;
}

#scheduled .Scheduled-interview .Reminder-button{
    display: block;
    margin: 0 auto;

    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
}

#scheduled .Scheduled-interview .Reminder-button:hover{
    background-position: right center;
}

#scheduled .Scheduled-interview .Cancel-interview-div{
    width: 350px;
}

#scheduled .Scheduled-interview .Cancel-interview{
    display: block;
    margin: 0 auto;
    background-color: #ebe9e9;
    color: var(--color-basic-black);
    border: none;
}

#scheduled .Scheduled-interview .Cancel-interview:hover{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
}


#scheduled .Scheduled-interview-responsive{
   height: 270px;
   margin-right: 120px;
   border-radius: var(--border-radius);
   border: 1px solid var(--color-Employer_menu);
   background-color: var(--color-basic-white);
   box-shadow: var(--box-shadow);
   display: flex;
   flex-direction: column;
   align-items: right;
   margin-bottom: 20px;
   margin-top: 130px;
   display: none;
}


#scheduled .Scheduled-interview-responsive .part1{
   width: 100%;
   background-color: var(--color-Employer_background);
   height: 60px;
    margin-top: -1px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 20px;
    margin-bottom: 20px;
}

#scheduled .Scheduled-interview-responsive .part1 .responsive-img{
   width: 50px;
   height: 50px;
   border-radius: 50%;
}

#scheduled .Scheduled-interview-responsive .part1 p{
   padding-top: 10px;
}

#scheduled .Scheduled-interview-responsive p{
   padding-right: 20px;
}

#scheduled .Scheduled-interview-responsive .Reminder-button-div{
    width: 150px;
}

#scheduled .Scheduled-interview-responsive .Reminder-button{
    display: block;
    margin: 0 auto;

    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
}

#scheduled .Scheduled-interview-responsive .Reminder-button:hover{
    background-position: right center;
}



#scheduled .Scheduled-interview-responsive1{
    height: 320px;
    margin-right: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: right;
    margin-bottom: 20px;
    margin-top: 130px;
    display: none;
 }
 
 
 #scheduled .Scheduled-interview-responsive1 .part1{
    width: 100%;
    background-color: var(--color-Employer_background);
    height: 60px;
     margin-top: -1px;
     border-radius: var(--border-radius);
     display: flex;
     flex-direction: row;
     align-items: center;
     padding-right: 20px;
     margin-bottom: 20px;
 }
 
 #scheduled .Scheduled-interview-responsive1 .part1 .responsive-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
 }
 
 #scheduled .Scheduled-interview-responsive1 .part1 p{
    padding-top: 10px;
 }
 
 #scheduled .Scheduled-interview-responsive1 p{
    padding-right: 20px;
 }

#scheduled .Scheduled-interview-responsive1 .Cancel-interview-div{
    width: 137px;
    margin-top: 10px;
}

#scheduled .Scheduled-interview-responsive1 .Cancel-interview{
    display: block;
    margin: 0 auto;
    background-color: #ebe9e9;
    color: var(--color-basic-black);
    border: none;
}

#scheduled .Scheduled-interview-responsive1 .Cancel-interview:hover{
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
}

#scheduled .Scheduled-interview-responsive1 .Unfollow{
    font-weight: normal;
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    margin-right: 15px;
}

#scheduled .Scheduled-interview-responsive1 .Unfollow:hover{
    background-position: right center;
}

#scheduled .Scheduled-interview-responsive1 .select-div .Interview_status_select{
    width: 80px;
    height: 40px;
    margin-right: 20px;
    margin-bottom: 16px;
}




#exampleModal1 .modal-footer .btn.btn-primary{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    padding: 10px 40px;
}

#exampleModal1 .modal-footer .btn.btn-primary:hover{
    background-position: right center;
}


#scheduled .Interview-status{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#scheduled .Interview-status h2{
    margin-right: 120px;
    font-size: 28px;
    font-weight: 500;
    margin-top: 60px;
}

#scheduled .Interview-status .Interview-status-ai{
    width: 50px;
    height: 50px;
    margin-top: 0;
}

#scheduled .titles-Interview-status{
    height: 60px;
    display: flex;
    flex-direction: row;
    margin-right: 120px;
    margin-top: 40px;
    background: rgb(216 228 255 / 87%);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius);
    padding-right: 10px;
    margin-bottom: 20px;
}

#scheduled .titles-Interview-status h3{
    font-size: 18px;
    font-weight: normal;
    width: 350px;
    line-height: 60px;
    text-align: center;
}

#scheduled .Interview{
    height: 70px;
    margin-right: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Employer_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

#scheduled .Interview .name{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: 197px;
    margin-right: 40px;
}

#scheduled .Interview .name .profile-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#scheduled .Interview .name .name-p{
    font-size: 18px;
    font-weight: normal;
    padding-top: 15px;
}

#scheduled .Interview .role{
    font-size: 18px;
    font-weight: normal;
    padding-top: 15px;
    width: 230px;
    
}

#scheduled .Interview .datel{
    font-size: 18px;
    font-weight: normal;
    padding-top: 15px;
    width: 190px;
   
}

#scheduled .Interview .interviewer-name{
    font-size: 18px;
    font-weight: normal;
    padding-top: 15px;
    width: 188px;
}

#scheduled .select-div{
    width: 182px;
}

#scheduled .select-div .Interview_status_select{
    width: 80px;
    height: 40px;
}


#exampleModal2 .modal-footer .btn.btn-primary{
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    padding: 10px 40px;
}

#exampleModal2 .modal-footer .btn.btn-primary:hover{
    background-position: right center;
}


#scheduled .Unfollow{
    font-weight: normal;
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
}

#scheduled .Unfollow:hover{
    background-position: right center;
}


#scheduled-junior .tabs_box{
    margin-right: 120px;
    margin-top: 40px;
}




/**** menu open ****/
#dropdown-menu{
    width: 160px;
    height: 180px;
    background-color: var(--color-basic-white);
    position: absolute;
    top: 70px;
    left: 25px;
    border-radius: var(--border-radius);
    z-index: 9999;
    position: fixed;
    box-shadow: var(--box-shadow);
    padding: 20px;
    display: none;

}

#dropdown-menu a{
    display: block;
    padding-bottom: 15px;
    text-decoration: none;
    color: var(--color-basic-black);
    padding: 10px;
    border-radius: var(--border-radius);
}

#dropdown-menu.dropdown-menu-juniors a{
    display: block;
    padding-bottom: 15px;
    text-decoration: none;
    color: var(--color-basic-black);
    padding: 10px;
    border-radius: var(--border-radius);
}

#dropdown-menu p{
    display: block;
    text-decoration: none;
    color: var(--color-basic-black);
    margin: 0;
    border-radius: var(--border-radius);
}

#dropdown-menu a:hover{
    background-color: var(--color-Employer_background);
}

#dropdown-menu.dropdown-menu-juniors a:hover{
    background-color: #caeae9;
}

#dropdown-menu .logout{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--color-basic-black);
    border-radius: var(--border-radius);
}

#dropdown-menu .logout .logout-icon{
    transform: rotate(0.5turn);
    margin-top: 1px;
    font-size: 20px;
    margin-left: 8px;
}




#Open-messages{
    width: 380px;
    position: absolute;
    top: 58px;
    left: 114px;
    z-index: 9999;
    position: fixed;
    display: none;
}

#Open-messages .list-a1{
    text-decoration: none;
}

#Open-messages.Open-messages-juniors .list-a1{
    text-decoration: none;
}

.list-group-numbered>.list-group-item::before{
    display: none;
}

#Open-messages .list-group-item:hover{
    background-color: #e2ebf7;
}

#Open-messages.Open-messages-juniors .list-group-item:hover{
    background-color: #caeae9;
}

#Open-messages .Link-messages{
    padding-top: 10px;
    padding-bottom: 10px;
    color: blue;
}







#Open-Scheduled-interviews{
    width: 380px;
    position: absolute;
    top: 58px;
    left: 168px;
    z-index: 9999;
    position: fixed;
    display: none;
}

#Open-Scheduled-interviews .list-a1{
    text-decoration: none;
}

.list-group-numbered>.list-group-item::before{
    display: none;
}

#Open-Scheduled-interviews .Link-messages{
    padding-top: 10px;
    padding-bottom: 10px;
    color: blue;
}

#Open-Scheduled-interviews .Link-messages:hover{
    background-color: #e2ebf7;
}

#Open-messages .Junior-img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}


.calendar1 {
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-top: 60px;
    color: var(--color-basic-black);
    padding: 20px;
    width: 460px;
    border: 1px solid var(--color-Employer_menu);
    position: absolute;
    top: 4px;
    left: 215px;
    z-index: 9999;
    display: none;
}
.calendar1 .header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.calendar1 .btn {
    cursor: pointer;
}
#month-year {
    font-weight: bold;
    font-size: 20px;
}
.weekdays, .days {
    display: flex;
    flex-wrap: wrap;
}
.days {
    height: 240px;
}
.weekdays div, .days div {
    width: 14.28%;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
}
.days div {
    cursor: pointer;
    transition: background-color 0.3s;
}
.calendar1 .days div:hover {
    background-color: white;
    color: var(--color-Employer_menu);
}
.calendar1 .days .today {
    background-color: var(--color-Employer-link);
    color: white;
}
.days .fade {
    color: #555;
}

.calendar1 #prev{
    background-color: var(--color-Employer_background);
    height: 18px;
    width: 40px;
}

.calendar1 #next{
    background-color: var(--color-Employer_background);
    height: 18px;
    width: 40px;
}

.calendar1.calendar-juniors {
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-top: 60px;
    color: var(--color-basic-black);
    padding: 20px;
    width: 460px;
    border: 1px solid var(--color-Juniors_menu);
    position: absolute;
    top: 4px;
    left: 215px;
    z-index: 9999;
    display: none;
}
.calendar1.calendar-juniors .header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.calendar1.calendar-juniors .btn {
    cursor: pointer;
}
#month-year {
    font-weight: bold;
    font-size: 20px;
}
#month-year1 {
    font-weight: bold;
    font-size: 20px;
}
.weekdays, .days {
    display: flex;
    flex-wrap: wrap;
}
.days {
    height: 240px;
}
.weekdays div, .days div {
    width: 14.28%;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
}
#calendar-dashboard .weekdays div, .days1 div {
    width: 14.28%;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
}
.days div {
    cursor: pointer;
    transition: background-color 0.3s;
}
#calendar-dashboard .days1 div {
    cursor: pointer;
    transition: background-color 0.3s;
}
.calendar1.calendar-juniors .days div:hover {
    background-color: white;
    color: var(--color-Juniors_menu);
}
.calendar1 #calendar-dashboard .days1 div:hover {
    background-color: white;
    color: var(--color-Employer_menu);
}
.calendar1.calendar-juniors .days .today {
    background-color: var(--color-Juniors_menu);
    color: white;
}
.calendar1 #calendar-dashboard .days1 .today {
    background-color: var(--color-Employer_menu);
    color: white;
}
.days .fade {
    color: #555;
}
.days1 .fade {
    color: #555;
}

.calendar1.calendar-juniors #prev{
    background-color: var(--color-Juniors_dark);
    height: 18px;
    width: 40px;
}

#calendar-junior #prev2{
    background-color: var(--color-Juniors_dark);
    height: 18px;
    width: 40px;
}

.calendar1.calendar-juniors #next{
    background-color: var(--color-Juniors_dark);
    height: 18px;
    width: 40px;
}

#calendar-junior  #next2{
    background-color: var(--color-Juniors_dark);
    height: 18px;
    width: 40px;
}

#prev .fa-arrow-left{
    color: var(--color-basic-white);
}

#prev1 .fa-arrow-left{
    color: var(--color-basic-white);
}


#calendar-open{
    margin-right: 850px;
    margin-top: -300px;
    width: 450px;
    background-color: var(--color-basic-white);
    border: 1px solid var(--color-Employer_menu);
    border-radius: var(--border-radius);
    position: absolute;
    top: 359px;
    left: 215px;
    z-index: 9999;
    display: none;
    position: fixed;
}


#calendar-open .calendar-open-header{
    display: flex;
    align-items: center;
    padding: 25px 18px 10px 31px;
    justify-content: space-between;
}


#calendar-open .calendar-open-header .current-date{
  font-size: 1.45rem;
  font-weight: 500; 
}

#calendar-open .calendar-open-header .icons span{
  height: 38px;
  width: 38px;
  color: #878787;
  font-size: 1.5rem;
  margin: 0 1px;
  cursor: pointer;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
  margin-top: -20px;
}

#calendar-open .calendar-open-header .icons span:hover{
  background-color: #f2f2f2; 
}

#calendar-open .calendar-open-header .icons span:last-child{
    margin-right: -10px;
}

#calendar-open .calendar2{
   padding: 20px;
}

#calendar-open .calendar2 ul{
   display: flex;
   list-style: none;
   flex-wrap: wrap;
   padding: 0;
   text-align: center;
}

#calendar-open .calendar2 .days{
   margin-bottom: 20px;
}

#calendar-open .calendar2 .weeks li{
   font-weight: 500;
}


#calendar-open .calendar2 ul li{
    position: relative;
   width: calc(100% / 7);
}

#calendar-open .calendar2 .days li{
    z-index: 1;
   cursor: pointer;
   margin-top: 30px;
}

#calendar-open .calendar2 .days li.inactive{
    color: #aaa;
}

#calendar-open .calendar2 .days li.active{
    color: #fff;
}

#calendar-open .calendar2 ul.days li::before{
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    top: 50%;
    left: 50%;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

#calendar-open .calendar2 ul.days li:hover::before{
    background-color: #f2f2f2;
}

#calendar-open .calendar2 ul.days li.active:hover::before{
    background-color: var(--color-Employer-link);
}

#calendar-open .calendar2 .days li.active::before{
    background-color: var(--color-Employer-link);
}


/*
#calendar-dashboard{
    margin-right: 850px;
    margin-top: -300px;
    width: 450px;
    background-color: var(--color-basic-white);
    border: 1px solid var(--color-Employer_menu);
    border-radius: var(--border-radius);
    position: absolute;
    top: 359px;
    left: 215px;
    z-index: 9999;
    display: none;
    position: fixed;
}


#calendar-dashboard .calendar-open-header{
    display: flex;
    align-items: center;
    padding: 25px 18px 10px 31px;
    justify-content: space-between;
}


#calendar-dashboard .calendar-open-header .current-date{
  font-size: 1.45rem;
  font-weight: 500; 
}

#calendar-dashboard .calendar-open-header .icons span{
  height: 38px;
  width: 38px;
  color: #878787;
  font-size: 1.5rem;
  margin: 0 1px;
  cursor: pointer;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
  margin-top: -20px;
}

#calendar-dashboard .calendar-open-header .icons span:hover{
  background-color: #f2f2f2; 
}

#calendar-dashboard .calendar-open-header .icons span:last-child{
    margin-right: -10px;
}

#calendar-dashboard .calendar2{
   padding: 20px;
}

#calendar-dashboard .calendar2 ul{
   display: flex;
   list-style: none;
   flex-wrap: wrap;
   padding: 0;
   text-align: center;
}

#calendar-dashboard .calendar2 .days{
   margin-bottom: 20px;
}

#calendar-dashboard .calendar2 .weeks li{
   font-weight: 500;
}


#calendar-dashboard .calendar2 ul li{
    position: relative;
   width: calc(100% / 7);
}

#calendar-dashboard .calendar2 .days li{
    z-index: 1;
   cursor: pointer;
   margin-top: 30px;
}

#calendar-dashboard .calendar2 .days li.inactive{
    color: #aaa;
}

#calendar-dashboard .calendar2 .days li.active{
    color: #fff;
}

#calendar-dashboard .calendar2 ul.days li::before{
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    top: 50%;
    left: 50%;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

#calendar-dashboard .calendar2 ul.days li:hover::before{
    background-color: #f2f2f2;
}

#calendar-dashboard .calendar2 ul.days li.active:hover::before{
    background-color: var(--color-Employer-link);
}

#calendar-dashboard .calendar2 .days li.active::before{
    background-color: var(--color-Employer-link);
}
*/




/* side menu - junior */
#side-junior-menu{
    height: 100vh;
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    position: fixed;
    top: 0;
    right: -10vw;
    z-index: 1;
    width:26vw;
    transition: all 1s;
}

#side-junior-menu .div-logo{
    border-bottom: 1px solid #eae7e7;
}

#side-junior-menu .div-logo .side-juniors-menu-logo{
    width: 180px;
    margin-right: 190px;
}

#side-junior-menu .Links_menu{
    border-bottom: 1px solid #eae7e7;
}

#side-junior-menu .Links_menu ul{
    list-style:none;
}

#side-junior-menu .Links_menu ul li{
    margin-right: 160px;
    margin-bottom: 10px;
    height: 65px;
    width: 210px;
    border-radius: var(--border-radius);
    padding-right: 10px;
}

#side-junior-menu .Links_menu ul li:hover{
    background-color: #abdcdbac;
}

#side-junior-menu .Links_menu ul li.active-link{
    background-color: var(--color-Juniors_dark);
}

#side-junior-menu .Links_menu ul li.active-link .link-p{
   color: var(--color-basic-white);
   font-weight: bold;
}

#side-junior-menu .Links_menu ul li.active-link .side-juniors-menu-icon{
   color: var(--color-basic-white);
}

#side-junior-menu .Links_menu ul li.first-link{
   margin-top: 20px;
}

#side-junior-menu .Links_menu ul li a .side-juniors-menu-icon{
    font-size: 30px;
    color: var(--color-basic-black);
}

#side-junior-menu .Links_menu ul li a{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}


#side-junior-menu .Links_menu ul li a .link-p{
    font-size: 17px;
    font-weight: normal;
    color: var(--color-basic-black);
    padding-top: 20px;
}



#side-junior-menu .Editing{
    text-decoration: none;
}

#side-junior-menu .Editing-profile{
    display: flex;
    flex-direction: row;
    gap: 7px;
    margin-right: 200px;
    border-top: 1px solid #eae7e7;
    height: 60px;
    padding-top: 20px;
    margin-top: 260px;
}

#side-junior-menu .Editing-profile .Editing-profile-img{
    width: 40px;
    height: 40px;
    background-color: var(--color-Employer_background);
    border-radius: 50%;
}

#side-junior-menu .Editing-profile .Editing-profile-p p{
    font-size: 17px;
    color: var(--color-basic-black);
    font-weight: normal;
    padding-top: 5px;
}


/* navbar - junior */
#junior-dashboard-section .navbar-junior{
    background-color: var(--color-basic-white);
    height: 80px;
    margin: 0;
    margin-left: -12px;
    box-shadow: var(--box-shadow);
    margin-right: 280px;
    border-radius: 0 0 4px 0;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 259px;
}

#junior-dashboard-section .navbar-junior .right-part{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-right: 36px;
}

#junior-dashboard-section .navbar-junior .right-part .right-part-img-AI{
   width: 60px;
   height: 60px;
   margin-top: 9px;
    margin-right: 40px;
}

#junior-dashboard-section .navbar-junior .right-part a{
   text-decoration: none;
}

#junior-dashboard-section .navbar-junior .right-part .right-part-p{
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    border-radius: var(--border-radius);
    padding: 7px 8px;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-black);
    cursor: pointer;
    box-shadow: 0 0 20px #eee;
    margin-right: -9px;
}



#junior-dashboard-section .navbar-junior .left-part{
    margin-left: 40px; 
    margin-top: 12px;
    display: flex;
    flex-direction: row;
}

#junior-dashboard-section .navbar-junior .left-part .profile .profile-img{
    width: 55px;    
    width: 55px;  
    border-radius: 50%;  
    cursor: pointer;
}

#junior-dashboard-section .navbar-junior .left-part .profile .white-circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-basic-white);
    position: absolute;
    top: 48px;
    left: 41px;
}

#junior-dashboard-section .navbar-junior .left-part .profile .Connected-circle{
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: green;
    position: absolute;
    top: 52px;
    left: 46px;
}

#junior-dashboard-section .navbar-junior .left-part .profile .profile-arrow-icon{
    position: absolute;
    top: 43px;
    left: 16px;
    font-size: 27px;
    cursor: pointer;
}

#junior-dashboard-section .navbar-junior .left-part .messages .messages-icon{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 14px;
    cursor: pointer;
}

#junior-dashboard-section .navbar-junior .left-part .messages .Circle-new-messages{
   width: 15px;
   height: 15px;
   color: red;
   border-radius: 50%;
   position: absolute;
   top: 50px;
   left: 0;
}

#junior-dashboard-section .navbar-junior .left-part .timing .timing-icon{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 14px;
    cursor: pointer;
}

#junior-dashboard-section .navbar-junior .left-part .calendar .calendar-icon{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 14px;
    cursor: pointer;
}

#junior-dashboard-section .navbar-junior .left-part .circle-number-messages{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 15px;
    left: 132px;
    text-align: center;
}

#junior-dashboard-section .navbar-junior .left-part .circle-number-messages .circle-number-messages-p{
    color: var(--color-basic-white);
    font-size: 16px;
    margin-top: -2px;
}

#junior-dashboard-section .navbar-junior .left-part .circle-number-timing{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 15px;
    left: 178px;
    text-align: center;
}

#junior-dashboard-section .navbar-junior .left-part .circle-number-timing .circle-number-timing-p{
    color: var(--color-basic-white);
    font-size: 16px;
    margin-top: -2px;
}





/**** dashboard - junior ****/

#Dashboard-juniors{
    background-color: var(--color-Juniors_background);
    height: 830px;
    margin-right: 50px;
}

/* part 1 */
#Dashboard-juniors .Dashboard-juniors-part1 h1{
    margin-right: 120px;
    padding-top: 138px;
    font-size: 28px;
    font-weight: 500;
}

#Dashboard-juniors .Dashboard-juniors-part1 h2{
    font-size: 16px;
    font-weight: normal;
    color: #585858;
    margin-right: 120px;
}


/* part 2 */
#Dashboard-juniors .Dashboard-juniors-part2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 120px;
    margin-top: 40px;
}

#Dashboard-juniors .Dashboard-juniors-part2 .part2-div1{
    height: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    background-color: #abdcdbac;
    padding: 20px;
}



#Dashboard-juniors .Dashboard-juniors-part2 .part2-div1 h3{
    font-weight: 500;
    font-size: 18px;
}

#Dashboard-juniors .Dashboard-juniors-part2 .part2-div{
    height: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-basic-black);
    transition: 0.5s;
}

#Dashboard-juniors .Dashboard-juniors-part2 .part2-div:hover{
   transform: scale(1.1);
}

#Dashboard-juniors .Dashboard-juniors-part2 .part2-div span{
    font-size: 36px;
    color: var(--color-Juniors_menu);
}

#Dashboard-juniors .Dashboard-juniors-part2 .part2-div p{
    font-size: 17px;
    font-weight: normal;
}


/* part 3 */


#Dashboard-juniors .Chart-columns{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 60px;
    margin-right: 120px;
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px;
    border: 1px solid var(--color-Juniors_menu);
}

#Dashboard-juniors .Chart-columns .columns{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Dashboard-juniors .Chart-columns .columns .columns-div1{
    width: 80px;
    height: 290px;
    background-color: #02AAB0;  
    border-radius: var(--border-radius); 
    text-align: center;
    color: var(--color-basic-white);
    font-weight: 500;
    font-size: 18px;
    padding-top: 20px;
}

#Dashboard-juniors .Chart-columns .columns .columns-div2{
    width: 80px;
    height: 220px;
    margin-top: 68px;
    background-color: #489497;  
    border-radius: var(--border-radius); 
    text-align: center;
    color: var(--color-basic-white);
    font-weight: 500;
    font-size: 18px;
    padding-top: 20px;
}

#Dashboard-juniors .Chart-columns .columns .columns-div3{
    width: 80px;
    height: 90px;
    margin-top: 196px;
    background-color: #235c5e;  
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--color-basic-white);
    font-weight: 500;
    font-size: 18px; 
    padding-top: 20px;
}

#Dashboard-juniors .Chart-columns .columns .columns-p{
    font-size: 16px;
    font-weight: normal; 
}




#Dashboard-juniors .part3-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Dashboard-juniors .calendar {
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-top: 60px;
    color: var(--color-basic-black);
    padding: 20px;
    width: 460px;
    border: 1px solid var(--color-Juniors_menu);
}

#Dashboard-juniors .calendar .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
#Dashboard-juniors .calendar .btn {
    cursor: pointer;
}
#month-year {
    font-weight: bold;
    font-size: 20px;
}
#month-year2 {
    font-weight: bold;
    font-size: 20px;
}
.weekdays, .days {
    display: flex;
    flex-wrap: wrap;
}
.days {
    height: 240px;
}
.weekdays div, .days div {
    width: 14.28%;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
}
.days div {
    cursor: pointer;
    transition: background-color 0.3s;
}
.days div:hover {
    background-color: white;
    color: var(--color-Juniors_dark);
}
.days .today {
    background-color: var(--color-Juniors_dark);
    color: white;
}
.days .fade {
    color: #555;
}

#prev{
    background-color: var(--color-Juniors_menu);
    height: 18px;
    width: 40px;
}

#next{
    background-color: var(--color-Juniors_menu);
    height: 18px;
    width: 40px;
}

#prev .fa-arrow-left{
    color: var(--color-basic-white);
}

#Main-dashboard-section .calendar .btn{
    background-color: var(--color-Employer-link);
    width: 42px;
    height: 16px;
}

.calendar1 .btn{
    background-color: var(--color-Employer-link);
    width: 42px;
    height: 16px;
}

#Dashboard-juniors .calendar .btn{
    background-color: var(--color-Juniors_dark);
    width: 42px;
    height: 16px;
}

.calendar1.calendar-juniors .btn{
    background-color: var(--color-Juniors_dark);
    width: 42px;
    height: 16px;
}

/**** registration - junior ****/


.juniors-registration{
    width: 100%;
    height: 100vh;
    background-color: #d0ebeb;
}

/* juniors-registration-title */
.juniors-registration .juniors-registration-title{
    height: 100px;
    margin-top: 150px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.juniors-registration .juniors-registration-title h1{
    font-weight: bold;
    font-size: 32px;
}

.juniors-registration .juniors-registration-title .juniors-registration-title-ai{
    width: 70px;
    height: 70px;
}

.juniors-registration .Step-navigation{
    margin-bottom: -10px;
    margin-top: -10px;
    font-size: 17px;
    color: green;
    font-weight: 500;
}


/* Registration_details-juniors */
.juniors-registration .Registration_details-juniors{
    border-radius: var(--border-radius);
    height: 500px;
    margin-top: 26px;
    padding: 40px;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 #5a8dcb5c;
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.juniors-registration .Registration_details-juniors #juniors-details{
    display: flex;
    flex-direction: row;
    gap: 83px;
}

.juniors-registration .Registration_details-juniors #juniors-details .Company-logo-div{
    background-image: linear-gradient(to right, #42C0C9  51%, #79CBCA  100%);
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.juniors-registration .Registration_details-juniors #juniors-details .Company-logo-div .Company-logo{
    font-size: 38px;
    color: var(--color-basic-white);
    margin-right: 10px;
    margin-top: 9px;
}

.juniors-registration .Registration_details-juniors #juniors-details #Company-logoID{
    padding-right: 0;
}

.juniors-registration .Registration_details-juniors #juniors-details .label{
    display: block;
    font-size: 16px;
    padding-bottom: 7px;
    margin-top: 30px;
}

.juniors-registration .Registration_details-juniors #juniors-details input{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}

.juniors-registration .Registration_details-juniors #juniors-details #juniors-registration-button{
    text-align: center;
    margin-top: 60px;
    padding: 0;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #86d7d7 0%, #79CBCA 51%, #86d7d7 100%);    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);            
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;

}            

.juniors-registration .Registration_details-juniors #juniors-details #juniors-registration-button:hover{
    background-position: right center; 
}  

.juniors-registration .Registration_details-juniors #juniors-details #Employer-registration-button2{
    text-align: center;
    margin-top: 54px;
    padding: 0;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3  51%, #5a8dcb  100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);            
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;

}            

.juniors-registration .Registration_details-juniors #juniors-details #Employer-registration-button2:hover{
    background-position: right center; 
}            

.juniors-registration .Registration_details-juniors #juniors-details .aboutCompany-p{
    margin-bottom: 7px;
    margin-top: 31px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #aboutCompany{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            

.juniors-registration .Registration_details-juniors #juniors-details .Social-media-links-p{
    margin-bottom: 7px;
    margin-top: 31px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Social-media-links{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            

.juniors-registration .Registration_details-juniors #juniors-details .Company-projects-p{
    margin-bottom: -2px;
    margin-top: 24px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Company-projectsID{
    margin-right: -17px;
}            
   

.juniors-registration .Registration_details-juniors #juniors-details .Field_Activity_p{
    margin-bottom: 7px;
    margin-top: 29px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Field_Activity{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            

.juniors-registration .Registration_details-juniors #juniors-details .Junior-strengths-p{
    margin-bottom: 7px;
    
}            

.juniors-registration .Registration_details-juniors #juniors-details #Junior-strengths{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}            

.juniors-registration .Registration_details-juniors #juniors-details .Junior-weaknesses-p{
    margin-bottom: 7px;
    margin-top: 54px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Junior-weaknesses{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}  



.juniors-registration .Registration_details-juniors #juniors-details .Professional_goals-p{
    margin-bottom: 7px;
    margin-top: 3px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Professional_goals{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}   

.juniors-registration .Registration_details-juniors #juniors-details .Junior-status_p{
    margin-bottom: 7px;
    margin-top: 3px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Junior-status{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
}   

.juniors-registration .Registration_details-juniors #juniors-details .Junior-documents-p{
    margin-bottom: -4px;
    margin-top: 52px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Junior-documentsID{
    width: 234px;
    height: 51px;
    border: none;
    border-radius: 4px;
    text-align: right;
    padding-right: 0;
}   

.juniors-registration .Registration_details-juniors #juniors-details .Media-p{
    margin-bottom: 6px;
    margin-top: 57px;
}            

.juniors-registration .Registration_details-juniors #juniors-details #Media{
    width: 234px;
    height: 51px;
    border: none;
    border-radius: 4px;
    text-align: right;
    padding-right: 0;
}   

.juniors-registration .Registration_details-juniors #juniors-details #juniors-registration-button2{
    text-align: center;
    margin-top: 173px;
    padding: 0;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, #86d7d7 0%, #79CBCA 51%, #86d7d7 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;
    margin-right: -5px;
}

.juniors-registration .Registration_details-juniors #juniors-details #juniors-registration-button2:hover{
    background-position: right center;
}

.juniors-registration .Registration_details-juniors #juniors-details #juniors-goback-button2{
    text-align: center;
    margin-top: 70px;
    padding: 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Juniors_menu);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-black);
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;
    margin-right: -5px;
    margin-bottom: -152px;
    background-color: #fff;
    text-decoration: none;
}

.juniors-registration .Registration_details-juniors #juniors-details #juniors-goback-button2:hover{
    transform: scale(1.02);
}

.juniors-registration #part4{
    margin-right: -288px;
}

   



/**** messages - junior ****/



#message-juniors-system{
    background-color: var(--color-Juniors_background);
    height: 832px;
    margin-right: 50px;
}

#message-juniors-system .message h1{
    margin-right: 120px;
    padding-top: 148px;
    font-size: 28px;
    font-weight: 500;
}


#message-juniors-system .message .message-parent{
    display: flex;
    flex-direction: row;
}

#message-juniors-system .message .chat-list .chat{
    height: 108px;
    background-color:#abdcdbac;
    border: 1px solid var(--color-Juniors_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}


#message-juniors-system .message .chat-list .chat .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-juniors-system .message .chat-list .chat .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}




#message-juniors-system .message .chat-list .chat .number-message{
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    color: var(--color-basic-white);
    text-align: center;
    position: absolute;
    top: 15px;
    left: 18px;
}

#message-juniors-system .message .chat-list .chat .number-message p{
    margin-top: -1px;
    margin-right: 1px;
}

#message-juniors-system .message .chat-list .chat .chat-details p{
    font-size: 16px;
    font-weight: 500;
}

#message-juniors-system .message .chat-list .chat1{
    height: 134px;
    background-color:var(--color-basic-white);
    border: 1px solid var(--color-Juniors_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}


#message-juniors-system .message .chat-list .chat1 .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-juniors-system .message .chat-list .chat1 .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#message-juniors-system .message .chat-list .chat1 .number-message{
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    color: var(--color-basic-white);
    text-align: center;
    position: absolute;
    top: 15px;
    left: 18px;
}

#message-juniors-system .message .chat-list .chat1 .number-message p{
    margin-top: -1px;
    margin-right: 0;
}

#message-juniors-system .message .chat-list .chat1 .chat-details p{
    font-size: 16px;
    font-weight: 500;
}



#message-juniors-system .message .chat-list .chat2{
    height: 108px;
    background-color:#f9f8f8;
    border: 1px solid var(--color-Juniors_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}

#message-juniors-system .message .chat-list .chat2 .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-juniors-system .message .chat-list .chat2 .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#message-juniors-system .message .chat-list .chat2 .chat-details p{
    font-size: 16px;
    font-weight: normal;
}



#message-juniors-system .message .chat-list .chat3{
    height: 108px;
    background-color:var(--color-basic-white);
    border: 1px solid var(--color-Juniors_menu);
    margin-right: 120px;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: relative;
    margin-top: 20px;
}

#message-juniors-system .message .chat-list .chat3 .img-profile-chat{
   width: 60px;
   height: 60px;
   border-radius: 50%; 
}

#message-juniors-system .message .chat-list .chat3 .chat-details h3{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#message-juniors-system .message .chat-list .chat3 .number-message{
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    color: var(--color-basic-white);
    text-align: center;
    position: absolute;
    top: 15px;
    left: 18px;
}
#message-juniors-system .message .chat-list .chat3 .number-message p{
    margin-top: -1px;
    margin-right: 1px;
}

#message-juniors-system .message .chat-list .chat3 .chat-details p{
    font-size: 16px;
    font-weight: 500;
}


#message-juniors-system .message .chat-div{
    height: 520px;
    background-color:#dce9e9;
    margin-top: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}


#message-juniors-system .message .chat-div .chat-div-header{
    height: 80px;
    background-color:var(--color-basic-white);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#message-juniors-system .message .chat-div .chat-div-header .chat-header-img-profile{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#message-juniors-system .message .chat-div .chat-div-header .name .name1{
    font-size: 18px;
    font-weight: normal;
    margin: 0;
}

#message-juniors-system .message .chat-div .chat-div-header .name .connected{
    font-size: 16px;
    font-weight: normal;
    color: green;
}

#message-juniors-system .message .chat-div .chat-div-header .icon{
    margin-top: 10px;
}

#message-juniors-system .message .chat-div .chat-div-header .icon .circle{
    width: 5px;
    height: 5px;
    background-color: var(--color-basic-black);
    border-radius: 50%;
    margin-bottom: 5px;
    margin-right: 430px;
}

#message-juniors-system .message .chat-div .message-employer{
    margin-top: 60px;
    margin-right: 17px;
    display: flex;
    flex-direction: row;
}

#message-juniors-system .message .chat-div .message-employer .message-employer-img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#message-juniors-system .message .chat-div .message-employer .message-employer-content{
    width: 450px;
    height: 90px;
    background-color: #e3f8f8;
    border-radius: 4px 44px 4px 4px;
    padding: 20px;
}

#message-juniors-system .message .chat-div .message-junior{
    margin-top: 39px;
    margin-right: 17px;
    display: flex;
    flex-direction: row;
    margin-right: 287px;
}

#message-juniors-system .message .chat-div .message-junior .message-junior-img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#message-juniors-system .message .chat-div .message-junior .message-junior-content{
    width: 300px;
    height: 90px;
    background-color: var(--color-basic-white);
    border-radius: 44px 4px 4px 4px;
    padding: 20px;
    box-shadow: var(--box-shadow);
}

#message-juniors-system .message .chat-div .writing-message{
    height: 60px;
    background-color:var(--color-basic-white);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    margin-top: 229px;
}

#message-juniors-system .message .chat-div .writing-message p{
    font-size: 16px;
    font-weight: normal;
    color: #6c6c6c;
}

#message-juniors-system .message .chat-div .writing-message .send-icon{
    transform: rotate(0.5turn);
}




















/**** settings - junior ****/

#settings-juniors{
    background-color: var(--color-Juniors_background);
    height: 1400px;
    margin-right: 50px;
}

#settings-juniors h1{
    margin-right: 120px;
    padding-top: 153px;
    font-size: 28px;
    font-weight: 500;
}

#settings-juniors h2{
    font-size: 19px;
    font-weight: 500;
}

/* Adding-education-field */
#settings-juniors .Adding-education-field{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 40px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settings-juniors .Adding-education-field #Adding-education{
    width: 234px;
    height: 51px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


/* Management-educational-fields */
#settings-juniors .Management-educational-fields{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settings-juniors .Management-educational-fields .Current-field-education{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

#settings-juniors .Management-educational-fields .Current-field-education .Current-field-education-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .Management-educational-fields .Current-field-education .removeButton{
    padding: 2px 40px;
    background-color: #fff;
}

#settings-juniors .Management-educational-fields .Current-field-education .removeButton:hover{
    transform: scale(1.03);
}



/* work-preferences */
#settings-juniors .work-preferences{
    margin-right: 120px;
    height: 180px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}

#settings-juniors .work-preferences .work-preferences-h2{
    padding-top: 20px;
}

#settings-juniors .work-preferences .preferences .Preferred-areas{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-juniors .work-preferences .preferences .Preferred-areas .Preferred-areas-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .work-preferences .preferences .Preferred-areas #area-inputID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


#settings-juniors .work-preferences .preferences .salary-range{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-juniors .work-preferences .preferences .salary-range .salary-range-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
    margin-left: 48px;
}

#settings-juniors .work-preferences .preferences .salary-range #salary-range-inputID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}




/* Message-preferences */
#settings-juniors .Message-preferences{
    margin-right: 120px;
    height: 180px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}


#settings-juniors .Message-preferences .Message-preferences-h2{
    padding-top: 20px;
}



#settings-juniors .Message-preferences .Alerts .work-alerts{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
    padding-right: 150px;
}

#settings-juniors .Message-preferences .Alerts .work-alerts .work-alerts-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .Message-preferences .Alerts .work-alerts #work-alertsID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


#settings-juniors .Message-preferences .Alerts .SMS-messages{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-juniors .Message-preferences .Alerts .SMS-messages .SMS-messages-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .Message-preferences .Alerts .SMS-messages #SMS-messagesID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}





/* privacy-settings */
#settings-juniors .privacy-settings{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}


#settings-juniors .privacy-settings .privacy-settings-h2{
    padding-top: 20px;
}



#settings-juniors .privacy-settings .privacy-settings-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
    padding-right: 150px;
}

#settings-juniors .privacy-settings .privacy-settings-div .privacy-settings-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .privacy-settings .privacy-settings-div #privacy-settingsID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}




/* Account-security */
#settings-juniors .Account-security{
    margin-right: 120px;
    height: 180px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}

#settings-juniors .Account-security .Account-security-h2{
    padding-top: 20px;
}

#settings-juniors .Account-security .username-and-password .User-change{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-juniors .Account-security .username-and-password .User-change .User-change-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .Account-security .username-and-password .User-change #User-changeID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
}


#settings-juniors .Account-security .username-and-password .password-change{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

#settings-juniors .Account-security .username-and-password .password-change .password-change-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .Account-security .username-and-password .password-change #password-change-inputID{
    width: 234px;
    height: 40px;
    border: none;
    padding: 18px;
    border-radius: 4px;
    text-align: right;
    box-shadow: var(--box-shadow);
    margin-right: 36px;
}




/* Data-and-privacy */
#settings-juniors .Data-and-privacy{
    margin-right: 120px;
    height: 110px;
    background-color:#f1f1f1;
    border: 3px solid var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 13px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settings-juniors .Data-and-privacy .Account-deletion{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

#settings-juniors .Data-and-privacy .Account-deletion .Account-deletion-p{
    font-size: 17px;
    font-weight: normal;
    padding-top: 15px;
}

#settings-juniors .Data-and-privacy .Account-deletion .removeButton{
    padding: 2px 40px;
    background-color: #fff;
}

#settings-juniors .Data-and-privacy .Account-deletion .removeButton:hover{
    transform: scale(1.03);
}


#settings-juniors .Save-changes-button{
    margin-right: 1163px;
    margin-top: 40px;
    padding: 10px 25px;
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border: none;
    border-radius: var(--border-radius);
}

#settings-juniors .Save-changes-button:hover{
    background-position: right center;
}











/**** jobs - junior ****/

#Junior-job-database{
    background-color: var(--color-Juniors_background);
    height: 1600px;
    margin-right: 50px;
}

#Junior-job-database.Junior-job-database-save{
    background-color: var(--color-Juniors_background);
    height: 1030px;
    margin-right: 50px;
}

#Junior-job-database .Junior-job-database-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Junior-job-database .Junior-job-database-title h1{
    margin-right: 120px;
    padding-top: 153px;
    font-size: 28px;
    font-weight: 500;
}

#Junior-job-database .Junior-job-database-title .Junior-job-database-ai{
    width: 60px;
    height: 60px;
    margin-top: 138px;
}

#Junior-job-database .Jobs-menu{
    margin-right: 120px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 30px;
}

#Junior-job-database .Jobs-menu a{
    font-weight: normal;
    font-size: 20px;
    border-radius: 10%;
    text-decoration: none;
    color: var(--color-basic-black);
}

#Junior-job-database .Jobs-menu a.jobs-menu-active{
    padding-bottom: 3px;
    border-bottom: 4px solid var(--color-Juniors_menu);
    font-weight: 500;
}

#Junior-job-database .Junior-jobs-ai .grid-container{
    display: grid;
    grid-template-columns: 1163px;
    gap: 20px;
    margin-top: 30px;
    margin-right: 120px; 
}


#Junior-job-database .Junior-jobs-ai .Junior-jobs{
   border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 22px;
    height: 230px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
}



#Junior-job-database .Junior-jobs-ai .Junior-jobs.Junior-jobs4{
  height: 180px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs.Junior-jobs5{
  height: 254px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs.Junior-jobs6{
  height: 230px;
}
#Junior-job-database .Junior-jobs-ai .Junior-jobs.Junior-jobs8{
  height: 300px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs h2{
    font-size: 23px;
    font-weight: 500;
}


#Junior-job-database .Junior-jobs-ai .Junior-jobs .job-description{
    font-size: 17px;
    font-weight: normal;
    margin-top: 11px;
    width: 890px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours{
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-bottom: 40px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours .location{
    display: flex;
    flex-direction: row;
    gap: 2px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours .location .location-p{
    font-size: 17px;
    font-weight: normal;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours .wage{
    display: flex;
    flex-direction: row;
    gap: 2px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours .wage .wage-p{
    font-size: 17px;
    font-weight: normal;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours .business-hours{
    display: flex;
    flex-direction: row;
    gap: 2px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .location-and-wage-and-business-hours .business-hours .business-hours-p{
    font-size: 17px;
    font-weight: normal;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .more-information{
    display: flex;
    flex-direction: row;
    gap: 2px;
    cursor: pointer;
    padding-right: 37px;
    padding-top: 10px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .more-information .more-information-p{
    color: blue;
    font-size: 16px;
    font-weight: normal;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .more-information .more-information-p:hover{
    color: rgb(2, 2, 154);
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .more-information .button-more-information{
    color: blue;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .ai-job{
   display: flex;
   flex-direction: column;
   position: absolute;
   bottom: 30px;
    left: 120px;
   align-items: center;
   display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .ai-job .ai-img-job{
    width: 150px;
    height: 150px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .ai-job .ai-job-p{
    font-size: 20px;
    font-weight: 500;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .Applying{
    margin-top: 36px;
    padding: 10px 40px;

    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .Applying:hover{
    background-position: right center;

}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .save-job{
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: 32px;
    cursor: pointer;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden2{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden3{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden4{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden5{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden6{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden7{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden8{
    display: none;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden-all .title{
    font-size: 19px;
    font-weight: 500;
    padding-top: 18px;

}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden-all .title1{
    font-size: 19px;
    font-weight: 500;
    border-top: 1px solid #9f9f9f;
    padding-top: 18px;
}

#Junior-job-database .Junior-jobs-ai .Junior-jobs .p-hidden-all .p{
    font-size: 17px;
    font-weight: normal;  
}






/**** scheduled interviews - junior ****/


#scheduled-junior{
    background-color: var(--color-Juniors_background);
    height: 1628px;
    margin-right: 50px;
    
}

#scheduled-junior h1{
    margin-right: 120px;
    padding-top: 140px;
    font-size: 28px;
    font-weight: 500;
}

#scheduled-junior .titles-scheduled{
    height: 60px;
    display: flex;
    flex-direction: row;
    margin-right: 120px;
    margin-top: 40px;
    background:#caeae9ac;
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius);
    padding-right: 10px;
    margin-bottom: 20px;
}

#scheduled-junior .titles-scheduled h3{
    font-size: 18px;
    font-weight: normal;
    width: 225px;
    line-height: 60px;
    text-align: center;
}


#scheduled-junior .Scheduled-interview{
   height: 100px;
   margin-right: 120px;
   border-radius: var(--border-radius);
   border: 1px solid var(--color-Juniors_menu);
   background-color: var(--color-basic-white);
   box-shadow: var(--box-shadow);
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 20px;
}



#scheduled-junior .Scheduled-interview .job-title{
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 5px;
  width: 338px;
padding-right: 75px;
}

#scheduled-junior .Scheduled-interview .job-title .job-title-p{
  font-size: 18px;
  font-weight: normal;
  padding-top: 15px;
}

#scheduled-junior .Scheduled-interview .Summons-date-junior{
  width: 350px;
}

#scheduled-junior .Scheduled-interview .Summons-date-junior .Summons-date-junior-p{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: -38px;
}

#scheduled-junior .Scheduled-interview .Summons-time-junior{
  width: 350px;
}

#scheduled-junior .Scheduled-interview .Summons-time-junior .Summons-time-junior-p{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: -47px;
}

#scheduled-junior .Scheduled-interview .Interview-location{
    width: 350px;
}

#scheduled-junior .Scheduled-interview .Interview-location .Interview-location-p{
    font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: -60px;
}



#scheduled-junior .Scheduled-interview .interviewer-name-div{
    width: 350px;
}

#scheduled-junior .Scheduled-interview .interviewer-name-div .interviewer-name-a{
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    padding-top: 15px;
    margin-right: -6px;
    text-decoration: none;
}



#scheduled-junior .Scheduled-interview-responsive{
    height: 230px;
    margin-right: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: right;
    margin-bottom: 20px;
    display: none;
 }

#scheduled-junior .Scheduled-interview-responsive .title-div-responsive{
   width: 100%;
   background-color: #caeae9ac;
   height: 60px;
   margin-top: 0;
    border-radius: var(--border-radius);
    padding: 17px;
    font-size: 17px;
 }

 #scheduled-junior .Scheduled-interview-responsive .div-p{
    padding-right: 17px;
    padding-top: 17px;
 }



#scheduled-junior .Interview-status{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#scheduled-junior .Interview-status h2{
    margin-right: 120px;
    font-size: 28px;
    font-weight: 500;
    margin-top: 60px;
}

#scheduled-junior .Interview-status .Interview-status-ai{
    width: 50px;
    height: 50px;
    margin-top: 0;
}
/*
#scheduled-junior .By-job-status{
    margin-right: 120px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-top: 20px;
}

#scheduled-junior .By-job-status button{
    padding: 9px 27px;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-basic-black);
    padding-top: 11px;
    background-color: #ebe9e9;
    border: 2px solid #ebe9e9;
    height: 50px;
}

#scheduled-junior .By-job-status button.By-job-status-button-active{
    background-color: var(--color-basic-white);
    border: 2px solid var(--color-basic-black);
}*/



#scheduled-junior .Junior-jobs{
    border: 1px solid var(--color-Juniors_menu);
     background-color: var(--color-basic-white);
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     padding: 22px;
     height: 804px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     position: relative;
     transition: all 0.6s ease-in-out;
     cursor: pointer;
     margin-top: 40px;
 }
 
 #scheduled-junior .Junior-jobs h2{
     font-size: 23px;
     font-weight: 500;
 }
 
 
 #scheduled-junior .Junior-jobs .job-description{
     font-size: 17px;
     font-weight: normal;
     margin-top: 11px;
     width: 890px;
 }
 
 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours{
     display: flex;
     flex-direction: row;
     gap: 15px;
     margin-bottom: 40px;
 }
 
 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours .location{
     display: flex;
     flex-direction: row;
     gap: 2px;
 }
 
 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours .location .location-p{
     font-size: 17px;
     font-weight: normal;
 }
 
 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours .wage{
     display: flex;
     flex-direction: row;
     gap: 2px;
 }
 
 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours .wage .wage-p{
     font-size: 17px;
     font-weight: normal;
 }
 
 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours .business-hours{
     display: flex;
     flex-direction: row;
     gap: 2px;
 }

 #scheduled-junior .Junior-jobs .location-and-wage-and-business-hours .business-hours .business-hours-p{
     font-size: 17px;
     font-weight: normal;
 }
 
#scheduled-junior .Junior-jobs .more-information{
     display: flex;
     flex-direction: row;
     gap: 2px;
     cursor: pointer;
     padding-right: 37px;
     padding-top: 10px;
 }
 
 #scheduled-junior .Junior-jobs .more-information .more-information-p{
     color: blue;
     font-size: 16px;
     font-weight: normal;
 }
 
 #scheduled-junior .Junior-jobs .more-information .more-information-p:hover{
     color: rgb(2, 2, 154);
 }
 
 #scheduled-junior .Junior-jobs .more-information .button-more-information{
     color: blue;
 }
 
 #scheduled-junior .Junior-jobs .ai-job{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 30px;
     left: 120px;
    align-items: center;
    display: none;
 }

 #scheduled-junior .Junior-jobs .ai-job .ai-img-job{
     width: 150px;
     height: 150px;
 }
 
#scheduled-junior .Junior-jobs .ai-job .ai-job-p{
     font-size: 20px;
     font-weight: 500;
 }
 
 #scheduled-junior .Junior-jobs .Applying{
     margin-top: 36px;
     padding: 10px 40px;
 
     background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
     text-align: center;
     text-transform: uppercase;
     transition: 0.5s;
     background-size: 200% auto;
     color: var(--color-basic-white);
     box-shadow: 0 0 20px #eee;
     border-radius: var(--border-radius);
     border: none;
 }
 
 #scheduled-junior .Junior-jobs .Applying:hover{
     background-position: right center;
 
 }
 
 #scheduled-junior .Junior-jobs .save-job{
     position: absolute;
     top: 16px;
     left: 20px;
     font-size: 32px;
     cursor: pointer;
 }
 
 #scheduled-junior .Junior-jobs .p-hidden{
     display: none;
 }
 
 #scheduled-junior .Junior-jobs .p-hidden2{
     display: none;
 }
 
 #scheduled-junior .Junior-jobs .p-hidden3{
     display: none;
 }
 
 #scheduled-junior .Junior-jobs .p-hidden4{
     display: none;
 }
 
 
 #scheduled-junior .Junior-jobs .p-hidden6{
     display: none;
 }
 
 
 
 #scheduled-junior .Junior-jobs .p-hidden-all .title{
     font-size: 19px;
     font-weight: 500;
     padding-top: 18px;
 }
 
 #scheduled-junior .Junior-jobs .p-hidden-all .title1{
     font-size: 19px;
     font-weight: 500;
     border-top: 1px solid #9f9f9f;
     padding-top: 18px;
 }
 
 #scheduled-junior .Junior-jobs .p-hidden-all .p{
     font-size: 17px;
     font-weight: normal;  
 }
 

 #scheduled-junior .pagination.pagination-status{
    margin-right: 0;
 }

 #scheduled-junior .active>.page-link, .page-link.active{
    background-color: var(--color-Juniors_menu);
    border: none;
 }

 #scheduled-junior .Junior-Closedjobs{
    background-color: #000000c4;
    position: relative;
 }

 #scheduled-junior .Junior-Closedjobs .Junior-Closedjobs-p{
    position: absolute;
    top: 368px;
    left: 330px;
    color: #fff;
    font-size: 30px;
    font-weight: 500;
 }





/**** Document-management - junior ****/

#Document-management{
    background-color: var(--color-Juniors_background);
    height: 1732px;
    margin-right: 50px;
    
}

#Document-management .Document-management-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 140px;
}

#Document-management .Document-management-title h1{
    margin-right: 120px;
    font-size: 28px;
    font-weight: 500;
}

#Document-management .Document-management-title .ai{
    width: 50px;
    height: 50px;
    margin-top: -104px;
}

#Document-management h2{
    margin-right: 120px;
    padding-top: 30px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: -21.1px;
}

#Document-management h2.project-documents-h2{
    margin-right: 120px;
    padding-top: 90px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: -21.1px;
}

#Document-management h2.documentary-h2{
    margin-right: 120px;
    padding-top: 90px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: -21.1px;
}

#Document-management .titles-Document-management{
    height: 60px;
    display: flex;
    flex-direction: row;
    margin-right: 120px;
    margin-top: 40px;
    background:#caeae9ac;
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius);
    padding-right: 10px;
    margin-bottom: 20px;
}

#Document-management .titles-Document-management h3{
    font-size: 18px;
    font-weight: normal;
    width: 232px;
    line-height: 60px;
    text-align: center;
}


#Document-management .Document{
   height: 68px;
   margin-right: 120px;
   border-radius: var(--border-radius);
   border: 1px solid var(--color-Juniors_menu);
   background-color: var(--color-basic-white);
   box-shadow: var(--box-shadow);
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 20px;
}

#Document-management .Document .document-name{
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 5px;
  width: 338px;
padding-right: 61px;
}

#Document-management .Document .document-name .document-name-p{
  font-size: 18px;
  font-weight: normal;
  padding-top: 15px;
}

#Document-management .Document .upload-date{
  width: 350px;
}

#Document-management .Document .upload-date .upload-date-p{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: 24px;
}

#Document-management .Document .Number-of-views{
  width: 350px;
}

#Document-management .Document .Number-of-views .Number-of-views-p{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: 53px;
}

#Document-management .Document .Download-document{
    width: 350px;
    padding-right: 190px;
}

#Document-management .Document .Download-document .Download-document-icon{
    font-size: 34px;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  margin-right: -60px;
  cursor: pointer;
}



#Document-management .Document .Delete-document{
    width: 350px;
}

#Document-management .Document .Delete-document .Delete-document-button{
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 6px 27px;
    margin-right: 38px;
    text-decoration: none;
 
    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
}

#Document-management .Document .Delete-document .Delete-document-button:hover{
    background-position: right center;
}



#Document-management .Adding-document{
    margin-right: 120px;
    padding: 10px 20px;
    border: none;
    border: 1px solid var(--color-Juniors_menu);
    border-radius: var(--border-radius);
    background: #02AAB0;
    color: var(--color-basic-white);
    font-size: 18px;
    font-weight: 500;
}

#Document-management .Adding-document:hover{
    border: 1px solid var(--color-Juniors_menu);
    background: none;
    color: var(--color-basic-black);
}


#exampleModalJ .Deleting-document-button{
    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
}

#exampleModalJ .Deleting-document-button:hover{
    background-position: right center;
}




#exampleModalA .modal-body #document-nameID{
    display: block;
}

#exampleModalA .modal-body .Add-document-p{
    margin-top: 30px;
    margin-bottom: -10px;
}

#exampleModalA .modal-body #Add-documentID{
    margin-top: 20px;
}

#exampleModalA .modal-footer .btn.Add-document-button{
    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
}

#exampleModalA .modal-footer .Add-document-button:hover{
    background-position: right center;
}


#Document-management .Document-responsive{
    height: 215px;
    margin-right: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: right;
    margin-bottom: 20px;
    position: relative;
    display: none;
 }

#Document-management .Document-responsive .document-name-responsive{
    background-color: #caeae9ac;
    height: 60px;
    width: 100%;
    padding: 17px;
    border-radius: var(--border-radius);
    margin-top: 0;
 }

#Document-management .Document-responsive .p-responsive{
    padding-right: 17px;
    padding-top: 17px;
 }

#Document-management .Document-responsive .Download-document{
    margin-bottom: 11px;
 }

#Document-management .Document-responsive .div-button .Delete-document-button{
    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
 }

#Document-management .Document-responsive .div-button .Delete-document-button:hover{
    background-position: right center;
 }

 #Document-management .Document-responsive .delete{
    position: absolute;
    top: 16px;
    left: 20px;
    cursor: pointer;
 }






/*************** profile - junior ***************/


#junior-profile{
    background-color: var(--color-Juniors_background);
    height: 2270px;
    margin-right: 50px;
}

#junior-profile .profilesection h1{
    margin-right: 120px;
    padding-top: 148px;
    font-size: 28px;
    font-weight: 500;
}

#junior-profile .profilesection .title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#junior-profile .profilesection .ai{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 84px;
}

#junior-profile .profilesection .ai2{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 84px;
}

#junior-profile .profilesection .Personal-details{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 40px;
    gap: 30px;
}

#junior-profile .profilesection .Personal-details{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 200px;
    margin-right: 120px;
    margin-top: 40px;
}

#junior-profile .profilesection .Personal-details .profileImg{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

#junior-profile .profilesection .Personal-details .details #h2-name{
    font-size: 24px;
    font-weight: 600;
}

#junior-profile .profilesection .Personal-details .details h3{
    font-size: 18px;
    font-weight: 400;
}


#junior-profile .profilesection .Personal-details .EditButton button{
    margin-right: 601px;
    border: none;
    padding: 5px 30px;
    background-color:#abdcdbac;
    font-size: 16px;
    color: var(--color-basic-black);
    border-radius: var(--border-radius);
}

#junior-profile .profilesection .Personal-details .EditButton button:hover{
    box-shadow: var(--box-shadow);
}


#junior-profile .profilesection .Personal-details2{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right: 120px;
    margin-top: 40px;
}

#junior-profile .profilesection .Personal-details2 .Personal-details2-header{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 56px;
}

#junior-profile .profilesection .Personal-details2 .Personal-details2-header .Personal-details2-title{
   font-weight: 500;
   font-size: 24px;
}


#junior-profile .profilesection .Personal-details2 .Personal-details2-header .EditButton button{
    margin-right: 510px;
    border: none;
    padding: 5px 30px;
    background-color: #abdcdbac;
    font-size: 16px;
    color: var(--color-basic-black);
    border-radius: var(--border-radius);
}

#junior-profile .profilesection .Personal-details2 .Personal-details2-header .EditButton button:hover{
    box-shadow: var(--box-shadow);
}

#junior-profile .profilesection .details p{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -79px;
    line-height: 106px;
}



#junior-profile .profilesection .strengths{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 239px;
    margin-right: 120px;
    margin-top: 40px;
}



#junior-profile .profilesection .strengths .strengths-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
 }
 
 #junior-profile .profilesection .strengths .strengths-header .strengths-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #junior-profile .profilesection .strengths .strengths-header .EditButton button{
     margin-right: 510px;
     border: none;
     padding: 5px 30px;
     background-color: #abdcdbac;
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #junior-profile .profilesection .strengths .strengths-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 
#junior-profile .profilesection .strengths .about p{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -84px;
    line-height: 109px;
    width: 1070px;
}



#junior-profile .profilesection .weaknesses{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 239px;
    margin-right: 120px;
    margin-top: 40px;
}



#junior-profile .profilesection .weaknesses .weaknesses-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
 }
 
 #junior-profile .profilesection .weaknesses .weaknesses-header .weaknesses-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #junior-profile .profilesection .weaknesses .weaknesses-header .EditButton button{
     margin-right: 510px;
     border: none;
     padding: 5px 30px;
     background-color: #abdcdbac;
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #junior-profile .profilesection .weaknesses .weaknesses-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 
#junior-profile .profilesection .weaknesses .about p{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -84px;
    line-height: 109px;
    width: 1070px;
}


#junior-profile .profilesection .Professional-goals{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 239px;
    margin-right: 120px;
    margin-top: 40px;
}



#junior-profile .profilesection .Professional-goals .Professional-goals-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
 }
 
 #junior-profile .profilesection .Professional-goals .Professional-goals-header .Professional-goals-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #junior-profile .profilesection .Professional-goals .Professional-goals-header .EditButton button{
     margin-right: 510px;
     border: none;
     padding: 5px 30px;
     background-color: #abdcdbac;
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #junior-profile .profilesection .Professional-goals .Professional-goals-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 
#junior-profile .profilesection .Professional-goals .about p{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -42px;
    line-height: 35px;
    width: 1070px;
}



#junior-profile .profilesection .Document-links{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right: 120px;
    margin-top: 40px;
    height: 340px;
}



#junior-profile .profilesection .Document-links .Document-links-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
 }
 
 #junior-profile .profilesection .Document-links .Document-links-header .Document-links-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #junior-profile .profilesection .Document-links .Document-links-header .EditButton button{
     border: none;
     padding: 5px 30px;
     background-color: #abdcdbac;
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #junior-profile .profilesection .Document-links .Document-links-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }


 
#junior-profile .profilesection .Document-links .links{
    padding-right: 56px;
    font-size: 17px;
    font-weight: normal;
    margin-top: -37px;
    width: 480px;
    border-radius: var(--border-radius);
}
 
#junior-profile .profilesection .Document-links .links p{
    cursor: pointer;
    border-radius: var(--border-radius);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}
 
#junior-profile .profilesection .Document-links .links p:hover{
    background-color: #fbfbfb;
}


#parent-divs{
    display: flex;
    flex-direction: row;
}



#junior-profile .profilesection .status-change{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 300px;
    margin-right:94px;
    margin-top: 40px;
    height: 340px;
}



#junior-profile .profilesection .status-change .status-change-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
    padding-bottom: 20px;
 }
 
 #junior-profile .profilesection .status-change .status-change-header .status-change-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #junior-profile .profilesection .status-change .status-change-header .EditButton button{
     border: none;
     padding: 5px 30px;
     background-color:#abdcdbac;
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #junior-profile .profilesection .status-change .status-change-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }
 
 #junior-profile .profilesection .status-change .status{
    margin-top: 33px;
    font-size: 22px;
    color: var(--color-basic-white);
    font-weight: 500;
    background-color: #ee8c17;
    text-align: center;
    line-height: 42px;
    padding: 30px;
 }
 
 



 #junior-profile .profilesection .social-media{
    border: 1px solid var(--color-Juniors_menu);
    background-color: var(--color-basic-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: 200px;
    margin-right: 120px;
    margin-top: 40px;
    margin-bottom: 40px;
}



#junior-profile .profilesection .social-media .social-media-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 56px;
    padding-bottom: 24px;
 }
 
 #junior-profile .profilesection .social-media .social-media-header .social-media-title{
    font-weight: 500;
    font-size: 24px;
 }
 
 
 #junior-profile .profilesection .social-media .social-media-header .EditButton button{
     margin-right: 510px;
     border: none;
     padding: 5px 30px;
     background-color: #abdcdbac;
     font-size: 16px;
     color: var(--color-basic-black);
     border-radius: var(--border-radius);
 }
 
 #junior-profile .profilesection .social-media .social-media-header .EditButton button:hover{
     box-shadow: var(--box-shadow);
 }
 
 #junior-profile .profilesection .social-media .Links-social-media{
    margin-right: 56px;
 }
 
 #junior-profile .profilesection .social-media .Links-social-media .Company-website{
    text-decoration: none;
    font-size: 17px;
    font-weight: normal;
    display: block;
    margin-bottom: 20px;
 }
 
 #junior-profile .profilesection .social-media .Links-social-media .Instagram_logo{
    width: 40px;
    height: 40px;
    margin-left: 10px;
    cursor: pointer;
 }
 
 #junior-profile .profilesection .social-media .Links-social-media .linkedin_logo{
    width: 45px;
    height: 45px;
    cursor: pointer;
 }



/*************** AI chat - junior ***************/
.AI-After_juniors_registration{
    width: 100%;
    height: 100vh;
    background-color:#d1f4f4;
}

.AI-After_juniors_registration .image-AI{
    display: block;
    margin: 0 auto;
    width: 250px;
    margin-top: 70px;
}

.AI-After_juniors_registration h1{
    padding-top: 40px;
    text-align: center;
    font-size: 80px;
}

.AI-After_juniors_registration .Explanation-of-ai{
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}

.AI-After_juniors_registration .Explanation-of-ai span{
    background-color: var(--color-Employer-link);
    color: var(--color-basic-white);
    padding: 15px 30px;
    border-radius: var(--border-radius);
    line-height: 120px;
    font-weight: normal;
    font-size: 18px;
    cursor: pointer;
}

.AI-After_juniors_registration .Explanation-of-ai span:hover{
    font-size: 20px;
}

.AI-After_juniors_registration .hashtag{
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}

.AI-After_juniors_registration .input-chat-div{
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

.AI-After_juniors_registration .input-chat-div .chat-send{
    font-size: 49px;
    transform: rotate(180deg);
    color:#5a8dcb;
    margin-right: 20px;
    transition: all 0.5s linear;
}

.AI-After_juniors_registration .input-chat-div .chat-send:hover{
    transform: rotateY(180deg)scale(1.5);
}


.AI-After_juniors_registration #Start-chatID{
    border: none;
    border-radius: var(--border-radius);
    padding-right: 20px;
    height: 50px;
    width: 622px;
    display: block;
    margin: 0 auto;
    margin-right: 180px;
}

.AI-After_juniors_registration .Go-to-system-button{
   position: absolute;
   top: 50px;
   right: 50px;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
   width: 160px;
   height: 50px;
   background-color: #000;
   border-radius: var(--border-radius);
   background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);            
    box-shadow: 0 0 20px #eee;
    display: block;
    font-size: 18px;
    font-weight: normal;
}

.AI-After_juniors_registration .Go-to-system-button:hover{
    background-position: right center; 
}

.AI-After_juniors_registration .AI-information-icon{
     position: absolute;
     top: 30px;
     left: 50px;
     width: 70px;
}






















/*** chat ***/

.chat-container-main{
    height: 100vh;
    width: 100%;
   /* background-image: linear-gradient(to right, #77a0d359 0%, #79cbca6e 51%, #77a0d358 100%);*/
   background-color:var(--color-dark-chat);
    text-align: center;
    
}

.chat-container{
    width: 100%;
    max-height: 100vh;
    padding-bottom: 150px;
   
}


.chat-container .chat-outgoing{
    background-color:var(--color-dark-chat);
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius);
}

.chat-container .chat-incoming{
    background-color:var(--color-bright-chat);
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius);
}

.chat-container .chat-incoming:hover .chat-content span{
    visibility: visible;
}

.chat-content{
    display: flex;
    justify-content: space-between;
 
    width: 100%;
    max-width: 1500px;
}

.chat-container .chat.incoming{
    background-color:var(--color-bright-chat);
}

.chat-content span{
   font-size: 1.3rem; 
   color: #6c6c6c;
   visibility:hidden ;
}

.chat-details{
    display: flex;
    align-items: flex-start;
    gap: 3px;
    flex-direction: column;
}

.chat-details .user-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-self: flex-start;
}

.chat-details .chat-details-p{
   font-size: 17px;
   font-weight: normal;
   color: var(--color-text-chat);
}


.typing-animation{
    display: inline-flex;
    margin-bottom: 21px;
}

.typing-animation .typing-dot{
    height: 7px;
    width: 7px;
    opacity: 0.7;
    margin: 0 3px;
    border-radius: 50%;
    background: var(--color-basic-white);
    animation: animateDots 1.5s var(--delay) ease-in-out infinite;
}

@keyframes animateDots {
    0%, 44%{
        transform: translateY(0px);
    }
    22%{
        opacity: 0.4;
        transform: translateY(-6px);
    }
    44%{
        opacity: 0.2;
    }
}


/* Typing container styling */

.typing-container{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 20px 10px;
    justify-content: center;
    background-color:var(--color-dark-chat);
}

.typing-container .typing-content{
  max-width: 950px;
  width: 100%;
  display: flex;
  align-items: flex-end;  
}

.typing-content .typing-textarea{
    width: 100%;
    display: flex;
    position: relative;
}

.typing-textarea textarea{
    width: 100%;
    height: 55px;
    border: none;
    resize: none;
    font-size: 1rem;
    border-radius: var(--border-radius);
    color: var(--color-basic-black);
    padding: 15px 45px 15px 20px;
    background-color: var(--color-basic-white);
    outline: 1px solid var(--color-basic-white);
}

.typing-textarea textarea::placeholder{
    color: #747474;
}

.typing-textarea span{
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: hidden;
}

.typing-textarea textarea:valid ~ span{
    visibility: visible;
}

.typing-content span{
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-basic-white);
}

.typing-controls{
    display: flex;
}

.typing-controls span{
    margin-left: 7px;
    font-size: 1.4rem;
    border-radius: var(--border-radius);
    background-color:#444654 ;
}

.typing-controls #save-chat{
   margin-right: 10px;
}

#send-btn{
    transform: rotate(180deg);
    color: var(--color-basic-black);
}







#exampleModalJ1 .Apply-button{
    margin-top: 36px;
    padding: 10px 40px;
    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    border: none;
}


#exampleModalJ1 .Apply-button:hover{
    background-position: right center;
}



/*** modal ai chat ***/

a.btn.btn-primary.offcanvasExampleCBUTTON {
    background: none;
    padding: 0;
    margin: 0px;
    width: 74px;
    height: 50px;
    margin-top: 58px;
    margin-right: 94px;
    border: none;
}

#offcanvasExampleC{
    background-color:#cedff5 ;
}

#offcanvasExampleCLabel{
    font-size: 40px;
    font-weight: 500;
    margin-right: 116px;
}


#offcanvasExampleC .offcanvas-body .modal-img-ai{
    width: 190px;
    display: block;
    margin: 0 auto;
}

#offcanvasExampleC .offcanvas-body .modal-text{
    margin-top: 50px;
    text-align: center;
    font-size: 17px;
    font-weight: normal;
}

#offcanvasExampleC .offcanvas-body #modal-chatID{
    border: none;
    border-radius: var(--border-radius);
    padding-right: 20px;
    height: 50px;
    width: 342px;
    display: block;
    margin: 0 auto;
    margin-top: 320px;
}





/*** modal ai chat - juniors ***/

a.btn.btn-primary.offcanvasExampleCJBUTTON {
    background: none;
    padding: 0;
    margin: 0px;
    width: 74px;
    height: 50px;
    margin-top: 58px;
    margin-right: 94px;
    border: none;
}

#offcanvasExampleCJ{
    background-color: #d1f4f4;
}

#offcanvasExampleCJLabel{
    font-size: 40px;
    font-weight: 500;
    margin-right: 116px;
}


#offcanvasExampleCJ .offcanvas-body .modal-img-ai{
    width: 190px;
    display: block;
    margin: 0 auto;
}

#offcanvasExampleCJ .offcanvas-body .modal-text{
    margin-top: 50px;
    text-align: center;
    font-size: 17px;
    font-weight: normal;
}

#offcanvasExampleCJ .offcanvas-body #modal-chatID{
    border: none;
    border-radius: var(--border-radius);
    padding-right: 20px;
    height: 50px;
    width: 342px;
    display: block;
    margin: 0 auto;
    margin-top: 320px;
}




/*************** explaining-employer ***************/

#explaining-employer{
    width: 100%;
    height: 100vh;
    background-color: #77a0d358;
}


#explaining-employer #carouselExampleAutoplaying{
    margin-top: 180px;
 }

#explaining-employer #carouselExampleAutoplaying p{
    padding-right: 70px;
    padding-left: 70px;
    text-align: center;
    font-size: 19px;
    font-weight: normal;
    line-height: 39px;
    margin-top: 40px;
 }

#explaining-employer #carouselExampleAutoplaying p.p2{
    padding-right: 70px;
    padding-left: 70px;
    text-align: center;
    font-size: 19px;
    font-weight: normal;
    line-height: 39px;
    margin-top: -19px;
 }

#explaining-employer #carouselExampleAutoplaying p span{
    font-size: 31px;
    font-weight: 500;
    margin-top: -10px;
 }

#explaining-employer #carouselExampleAutoplaying p span.title2{
    position: absolute;
    top: 223px;
    right: 470px;
 }


 #explaining-employer #carouselExampleAutoplaying .carousel-ai-img1{
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin-right: 560px;
    margin-bottom: 5px;
 }

 #explaining-employer #carouselExampleAutoplaying .carousel-ai-img2{
    width: 260px;
    height: 260px;
    border-radius: 50%;
    margin-right: 510px;
    margin-bottom: 5px;
    margin-top: -28px;
 }

 #explaining-employer #carouselExampleAutoplaying .carousel-ai-img3{
    width: 210px;
    height: 200px;
    border-radius: 50%;
    margin-right: 541px;
    margin-bottom: 5px;
 }


.skip-button{
    text-align: center;
 
    width: 200px;
    height: 50px;
    padding: 12px;
    font-size: 18px;
    font-weight: normal;
    background-image: linear-gradient(to right, #5a8dcb 0%, #77A1D3 51%, #5a8dcb 100%);    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: block;
    border: none;
    font-weight: 500;
    text-decoration: none;
    margin: 0px auto;
    position: absolute;
    top: 40px;
}


.skip-button:hover{
    background-position: right center;
}





/*************** explaining-juniors ***************/

#explaining-juniors{
    width: 100%;
    height: 100vh;
    background-color: #d1f4f4;
}


#explaining-juniors #carouselExampleAutoplaying{
    margin-top: 180px;
 }

#explaining-juniors #carouselExampleAutoplaying p{
    padding-right: 70px;
    padding-left: 70px;
    text-align: center;
    font-size: 19px;
    font-weight: normal;
    line-height: 39px;
    margin-top: 40px;
 }

#explaining-juniors #carouselExampleAutoplaying p.p2{
    padding-right: 70px;
    padding-left: 70px;
    text-align: center;
    font-size: 19px;
    font-weight: normal;
    line-height: 39px;
    margin-top: -19px;
 }

#explaining-juniors #carouselExampleAutoplaying p span{
    font-size: 31px;
    font-weight: 500;
    margin-top: -10px;
 }

#explaining-juniors #carouselExampleAutoplaying p span.title2{
    position: absolute;
    top: 223px;
    right: 470px;
 }


 #explaining-juniors #carouselExampleAutoplaying .carousel-ai-img1{
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin-right: 560px;
    margin-bottom: 5px;
 }

 #explaining-juniors #carouselExampleAutoplaying .carousel-ai-img2{
    width: 260px;
    height: 260px;
    border-radius: 50%;
    margin-right: 510px;
    margin-bottom: 5px;
    margin-top: -28px;
 }

 #explaining-juniors #carouselExampleAutoplaying .carousel-ai-img3{
    width: 210px;
    height: 200px;
    border-radius: 50%;
    margin-right: 541px;
    margin-bottom: 5px;
 }


 #explaining-juniors .skip-button{
    text-align: center;
 
    width: 200px;
    height: 50px;
    padding: 12px;
    font-size: 18px;
    font-weight: normal;
    background-image: linear-gradient(to right, #54b6b6 0%, #79CBCA 51%, #54b6b6 100%);    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color-basic-white);
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: block;
    border: none;
    font-weight: 500;
    text-decoration: none;
    margin: 0px auto;
    position: absolute;
    top: 40px;
}


.skip-button:hover{
    background-position: right center;
}


.icon-save-img{
    position: absolute;
    top: 10px;
    left: 16px;
    width: 35px;
    height: 35px;
}

.icon-save-candidates{
    position: absolute;
    top: 64px;
    right: 19px;
    width: 35px;
    height: 35px;
}