* {
    margin: 0;
    padding: 0
}
html, body {
    height: 100%;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.fas {
color: #9474CB;
}

.fa-linkedin-square {
    box-shadow: 3px 6px #272634;
}

.fas:hover {
    color:#800080;
    }

 @-webkit-keyframes pulse {
  0% { box-shadow:0 0 8px  #e67300, inset 0 0 8px  #ffff00; }
  50% { box-shadow:0 0 30px  #e67300, inset 0 0 28px  #ffff00; }
  100% { box-shadow:0 0 8px  #e67300, inset 0 0 8px  #ffff00; }
}

.candidate-info{
    text-align: center;
    padding: 10px;
    border: 2px;
    border-color: purple;
    background-color: #E2C9F1;
    border-radius: 15px;
    border-style: solid;
    min-width: 250px;
    margin: auto;
    margin-bottom: 8px;
 }

.heading {
    text-transform: uppercase;
    color:#800080;
    font-weight: normal;
 }

.waiting {
    opacity: 0;
   
}

 #msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    position: relative
}

.form-card {
    text-align: right
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#progressbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: #673AB7;
 }


#progressbar li {
    list-style-type: none;
    cursor: pointer;
    font-size: 15px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    width: 110px;
    height: 100px;
 }
 #progressbar label
 {
    margin-bottom: 0%;
 }

 .x-icon {
    height: 1em;
    width: 1em;
    top: .125em;
    position: relative;
  }


 #progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: #673AB7;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

 #progressbar li:hover:before {
    background: #800080;
   } 

#progressbar .active {
    color:#800080;
    
 }

 #progressbar li.active:before{
 background:#800080
}

#progressbar li.active:after {
color: #ffffff;
background: #183D68;
}

#progressbar li.moving {
    color: red;
    text-shadow: 0 0 4px black;
}

 #progressbar li.moving:before {
    -webkit-animation: pulse 2s linear 1s infinite;
    margin: 0 auto 10px auto;
    background: red !important;
    box-shadow: 0 0 8px red, inset 0 0 8px red;
}

#progressbar li.done {
    cursor: not-allowed !important;
    color: #183D68;
}

#progressbar li.done_clickable {
    color: #183D68 !important;
}

#progressbar li.done:before,
#progressbar li.done_clickable:before {
    color: #ffffff;
    background: #13653F;
    font-family: FontAwesome;
    content: "\f00c";
}

#progressbar li.done:after,
#progressbar li.done_clickable:after {
    color: #ffffff;
    background: #13653F;
    background-color: #183D68;
}

#progressbar #upload:before {
 font-family: FontAwesome;
 content: "\f0ee";
}


#progressbar #payment:before {
 font-family: FontAwesome;
 content: "\f20b";
}

#progressbar #agreement:before {
 font-family: FontAwesome;
 content: "\f09d";
}

#progressbar #interview:before {
 font-family: FontAwesome;
 content: "\f007";
}

#progressbar #entrance_exams:before {
 font-family: FontAwesome;
 content: "\f03a";
}

#progressbar #heb_exam:before {
 font-family: FontAwesome;
 content:"\48\65";
}

#progressbar #previous:before {
 font-family: FontAwesome;
 content: "\f0a8";
}

#progressbar #exemption:before {
 font-family: FontAwesome;
 content: "\f19c";
 }

.progress {
 height: 20px
}

.menu_but
{
    background:none;
    border: none;  
    color: #000;
}
.menu_but:hover
{
    border: none; 
    
}

#progressbar a
{
    text-decoration: none;
}

.progress-bar {
 background-color:#800080
}

/* --- Semi Bars ---*/
#exemption_bar, #entrance_exams_bar {
    overflow: hidden;
 }

#exemption_bar li, #entrance_exams_bar li {
    list-style-type: none;
    cursor: pointer;
    font-size: 15px;
    margin: 2%;
    display: inline-block;
    position: relative;
    color: #0000ff;
    margin:45px
 }

 #exemption_bar li.done, #entrance_exams_bar li.done{
    cursor: not-allowed;
    color: #183D68;
    top: 30px;


 }
    #exemption_bar li.done:before, #entrance_exams_bar li.done:before,
    #exemption_bar li.done:after, #entrance_exams_bar li.done:after {
        color: #ffffff;
        background: #183D68;
    }



#exemption_bar li:before, #entrance_exams_bar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: #0000ff;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    font-family: FontAwesome;
    content: "\f19d";
   }

@media (max-width: 850px) { 
    #exemption_bar li.done{
        top: 22px;
     }
}


#msform {
 text-align: center;
 position: relative;
 margin-top: 20px
}

.my_card {
 z-index: 0;
 border: none;
 position: relative;
 display: flex;
 flex-direction: column;
 word-wrap: break-word;
 background-clip: border-box;
}

.files-elements{
    width: 70%;
    margin: auto;
    text-align: center;
 }

 .files-elements i{
    font-size: 2vh;
    color: black;
    font-weight: bold;
 }
 .action-button {
    border-radius: 15px;
    background:#800080;
    font-weight: bold;
    color: white;
    border: 0 none;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;

 }

  .attention-button {
    border-radius: 15px;
    background: #B60000FF;
    font-weight: bold;
    color: white;
    border: 0 none;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;

 }
 
 
 .navigation-text {
     font-size: 2vh;
     color: #8F0000;
     font-weight: bold;
 }

 .navigation-window
 {
    position: absolute;
    height: fit-content;
    z-index: 1;
 }
 
 

 .navigation-window a:hover
 {
    background-color: transparent;
    color: transparent !important;
    text-decoration: none !important;
 }


 
 .back-nav
 {
    top: .5%;
    left: .5%;
 }

 p.attention
 {
    font-size: 3vh;
 }
 .attention{
    color: #B60000FF;
    border-color: #B60000FF;
    border-style: solid;
    border-radius: 10px;
    padding: 5px;
    font-weight: bold;
 }

 .action-button:hover,
 .action-button:focus {
    background-color: #311B92;
    color: white;
    text-decoration: none;
 }

 .attention-button:hover,
 .attention-button:focus {
    background-color: #CC0404;
    color: white;
    text-decoration: none;
 }

 .input-field{
    border-radius: 15px;
    text-align: center;
    padding: 3px;
    background-color: #E2C9F1;
    border: 2px;
    border-color: purple;
    margin-bottom: 8px;
    border-style: solid;
    font-weight: bold;
    color: #3E3A44;
 }

 .input-field::placeholder{
    font-weight: bold;
    color: #3E3A44;
    opacity: 1;
 }

 .admin-alert{
    text-align: center;
    background-color: yellow;
    color: red;
 }

 .alert-custom{ 
    background-color:#E2C9F1;
    color:purple;
    border-radius: 30px !important;
    border-style: dashed !important;
    border-color: gray !important;
  }

 .wrapper-for-footer {
  min-height: 100%;
  background-color: transparent;
  margin-bottom: -60px;
}
.footer,
.push-for-footer {
    background-color: transparent;
    height: 60px;
    text-align: right;
}

footer{
    position: sticky;
    bottom: 0;
}

.chatcontainer {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 30%;
}

.entrance-loader{
    display: none;
}

.headers_img {
    width: 100%;
}

#headers_carousel > div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

#ChatBotAvatar {
    background-color: rgb(92, 0, 230);
    z-index: 999999;
    background: rgba(255,255,255,0.5) url(/National_Library/oe_/https://server.iac.ac.il/candidate/static/whatsapp512.png) center center no-repeat;
    background-size: cover;
    box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    border-radius: 80%;
    position: fixed;
    right: 8px;
    bottom: 80px;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    display: inline-block;
    bottom: 12%;
}

#ChatBotAvatarafter {
    background-color: rgb(92, 0, 230);
    z-index: 999999;
    background: rgba(255,255,255,0.5) url(https://web-archive.nli.org.il/National_Library/oe_/https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcsc9fifmx9xqhhkzjckna9aaaduxzb2thex6a&usqp=cau) center center no-repeat;
    background-size: cover;
    box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    border-radius: 80%;
    position: fixed;
    right: 100px;
    left: 250px;
    bottom: 80px;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    display: inline-block;
    left: 100px;
}


#ChatBotFrame {
    background-color: rgb(123, 0, 230 );
    display: none;
    z-index: 999999;
    box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.15);
    border-radius: 5px;
    position: fixed;
    right: 20px;
    bottom:180px;
    width: 320px;
    height: 480px;
    box-sizing: border-box;
    font-size: 30px;
    text-align:center;
    color: rgb(130, 0, 230);
    background: rgb(123, 0, 230 ) url(https://web-archive.nli.org.il/National_Library/oe_/https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Eo_circle_purple_letter-x.svg/1200px-Eo_circle_purple_letter-x.svg.png) center center no-repeat;
}

#back-but
{
    color: #8F0000;
}

#back-but:hover
{
    color: #DB0605;
}

#logout-but
{
    color: #280000;;
    height: fit-content;
}

#logout-but:hover
{
    color: #450000;
}

#logout-label
{
    color:  #450000;
    font-weight: bold;
}


.logout {
    font-size: 7vh;
    text-align: center;
}

.logout:hover,
.logout:focus {
color: #CC0404;
}

.position{
    position:fixed;
    bottom:2%;
         }

h2,h4{
    text-align:center;
}


#entrance_form
{
    padding-top: 1em;
}

#password_form
{
    padding-top: 2em;
}

#pass_header
{
    text-align: center;
}


.form-but
{
    border-radius: 1vh;
    font-weight: bold;
    color: white;
    border: 0 none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5vh;
    padding: 1em;
}
.required-link {
    background: #8F0000;
}

.required-link:hover {
    background: #BA0000;
    color: white;
    text-decoration: none;
}

.noreq-link {
    background: #004896;
}


.noreq-link:hover {
    background: #006E96;
    color: white;
    text-decoration: none;
}

.change-link
{
    background: #005C00;
}
.change-link:hover
{
    background: #007900;
}


input[type="file"]::file-selector-button
{
    width: 0px;
    display: none;
    appearance:none;
}

#candidate-form input[type="file"]
{
    /*Hide file upload button completely */
    position: absolute;
    height: 0px;
    visibility: hidden;
}

label[for="upload_required_file"]
{
    cursor: pointer;
}


#accessibility-but
{
    border-radius: 15px;
    background:#800080;
    font-weight: bold;
    color: white;
    border: 0 none;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
}

.rounded b:nth-child(1)
{
    font-size: 3vh;
}
.rounded b:nth-child(3)
{
    font-size: 2vh;
}

#form-header
{
    position: relative;
}

#pass_body
{
    min-height: 100vh;
}
#pass_footer
{
    margin-top: auto;
}



#remove-file:hover
{
    text-decoration: none;
    border-color: #CC0404;
}
#remove-file label
{
    color: black;
    font-size: 1.5vh;
    font-weight: bold;
    text-decoration: none;
    margin-right: 5px;
}
#remove-file:hover label,#remove-file:hover i 
{
    text-decoration: none;
    color: #CC0404 ;
}


@media only screen and (max-width: 450px) {
    input[type="file"]
    {
        width: 50%;
    }

    #logout-but
    {
        color: #5D0000;
    }

    #logout-but:hover
    {
        color: #5D0000;
    }

    #logout-label
    {
        color: #5D0000;
    }
    
}


@media only screen and (max-width: 550px) {
    #form-header
    {
        height: 12%;
    }
}



@media only screen and (max-height: 750px) {

    .navigation
    {
        font-size: 12px !important;
    }
        

}


