@font-face {
  font-family: "SF-Pro-Display-Regular";
  src: url(/fonts/vendor/SF-Pro-Display-Regular.otf) format("truetype");
}
@font-face {
  font-family: "BookmanJFPro-Regular";
  src: url(/fonts/vendor/BookmanJFPro-Regular.ttf) format("truetype");
}

body{
  /*  margin: 0; height: 100%; overflow: hidden; */
   background-color: #fcf2f5;
   font-family: "SF-Pro-Display-Regular", sans-serif;
     font-weight: 300;
 }
 
 
 /* Create two equal columns that floats next to each other */
/*  .column {
  float: left;
  width: 50%;
  min-height: 100vh;
  background-color: #fcf2f5 !important;
  font-size:2rem;
  font-family: SF-Pro-Display-Regular;
} */

#column_right{
  /* width: 100%;
  object-fit: cover;
  height: 100vh; */
  width: 694px;
  height: auto;
  padding-top: 10vh;
  padding-bottom: 10vh;
  padding-left: 5vw;
  padding-right: 7vw;
 
}
#column_right img{
  /* width: 100%;
  object-fit: cover;
  height: 100vh; */
  width: 694px;
  height: 867.5px;
}

#column_left{
 /*  max-width: 18vw;
  height: auto !important; */
 padding-top: 10vh;
 padding-left: 7vw;
}

#welcome{
  padding-top: 20vh;
}
#welcome  a{  
  color:#000;
  font-family: BookmanJFPro-Regular;
  font-size:38px;
}

#welcome  a:hover{
  color:#000;
  text-decoration: underline;
}
#welcome p{ 
  color:#000;
  font-family: BookmanJFPro-Regular;
  font-size:38px;
}
#login_form{
  padding-top: 15vh;
}
#login_form a, p{
  font-family: SF-Pro-Display-Regular;
  font-size: 20px;
  color:#000;
}
#login_form a:hover{
  text-decoration: underline;
}

#join{
  padding-top: 10vh;
}
#join a, p{
  font-family: SF-Pro-Display-Regular;
  font-size: 20px;
  color:#000;
}
#join a:hover{
  text-decoration: underline;
}

/* #welcome{
  margin-top: 20vh;
  margin-left: 7vw;
} */
#welcome p:hover{ 
  text-decoration: underline;
}
.form-control:hover,
.form-control:active,
.form-control:focus {
    color: #495057;
    border: none;
    background-color: #fcf2f5;
    outline: 0;
    box-shadow: 0 5px 20px 0.1rem rgba(0, 0, 0, 0.25);
}

.form-control {
  color: #716c6e;
  box-sizing: border-box;
  border: 1px solid black;
  background-color: #fcf2f5 !important;
  border-radius: 20px;
  height: 34px;
  width: 350px;
  
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #E68686;
  
  background-image: url("/images/Attention.png");

}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #E68686;
  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  border: 1px solid #000;
    -webkit-box-shadow: 0 0 0 30px #fcf2f5 inset !important;
    box-shadow: inset 0 0 0 30 rgba(59, 41, 41, 0.1);
}


.btn-default {
  background-color: black !important;
  color: #fff;
  border-radius: 20px;
  text-transform: none;
  margin-left: 0;
  
  
}
#login_form .btn.btn-sm, .btn-group-sm > .btn {
  padding: 0rem 1.6rem;
  font-size: 20px;
  width: 350px;
  height: 34px;
}

#join .btn.btn-sm, .btn-group-sm > .btn {
  padding: 0rem 1.6rem;
  font-size: 20px;
  width: 350px;
  height: 34px;
}


.btn-default:not([disabled]):not(.disabled):active, .btn-default:not([disabled]):not(.disabled).active, .show > .btn-default.dropdown-toggle {
  background-color: #000000f0 !important;
}

#a_button{
  font-family: SF-Pro-Display-Regular;
  width: 107px;
  height: 34px;
  font-size: 20px;
  color:#fff;
  text-decoration: none;
  padding-top: 2px;
}

/* input[type="file"] {
  display: none;
}
.custom-file-label {
  box-sizing: border-box;
  border: 1px solid black;
  background-color: #fcf2f5 !important;
  border-radius: 12px;
  height: 1.8em;
  overflow: hidden;
  padding-top: 0px;
} */

.custom-file{
  height: 0em !important;
  box-sizing: border-box;
  margin-bottom: 10px !important;
}
.custom-select{
  display: block;
  padding-bottom:0px ;
  background: url("/images/Component 17 – 60.png") no-repeat right 0.75rem center/10px;
}
.custom-select option{
  font-size: 20px;
  border-radius: 20px;
  height: 47px;
}
/* .custom-select{
  display: block;
  padding-top:0px ;
  padding-bottom: 0px;
  background: url("/images/Component 17 – 60.png") no-repeat right 0.75rem center/10px;
  color: #000;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 20px;
  height: 34px;
  width: 350px;
}
.custom-select:hover,
.custom-select:active,
.custom-select:focus {
  color: #495057;
  border: none;
  outline: 0;
  box-shadow: 0 5px 20px 0.1rem rgba(0, 0, 0, 0.25);
}
.custom-select option{
  font-size: 20px;
  border-radius: 20px;
  height: 47px;
}
 */


.custom-select-edit {
    position: relative;
    border: none;
    background-color: #fcf2f5;
    padding:0px;
    /* background: url("/images/Component 17 – 60.png") no-repeat right  right 0.75rem center/10px !important; */
  }
  
  .custom-select-edit select {
    display: none; /*hide original SELECT element: */
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 15px;
    right: 15px;
    width: 0;
    height: 0;
    border: 6px solid #000;
    border-color: #000 transparent transparent transparent;
}
  
  /* Point the arrow upwards when the select box is open (active): */
  /* .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
  } */
  
  /* style the items (options), including the selected item: */
  .select-items div {
    color: #000;
    padding: 3px 16px;
    /* border: 1px solid transparent; */
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    min-height: 40px;
    font-size: 18px;
  }
  .select-selected {
    background-color: #fcf2f5;
    border: 1px solid black !important;
    border-radius: 20px;
    color: #6c757d;
    width: 350px;
    padding: 4px 16px;
    /* border: 1px solid transparent; */
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    height: 34px;
    font-size: 0.9rem;
    font-weight: 400;
    overflow: hidden;
    background: url("/images/Component 17 – 60.png") no-repeat right  right 0.75rem center/10px !important;
  }

  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: #fff;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 99;
    overflow-y: scroll;
    height: 400px;
    min-width: 352px;
    border-radius: 20px;
    box-shadow: 5px 10px 20px #b159594d;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color:#F6F6F6;
  }
.add_hover{
    color: #495057;
      border: none !important;
      outline: 0;
      box-shadow: 0 5px 20px 0.1rem rgba(0, 0, 0, 0.25);
}
  .select-selected:hover,
  .select-selected:active,
  .select-selected:focus,
  .select-selected:visited {
      color: #495057;
      border: none !important;
      outline: 0;
      box-shadow: 0 5px 20px 0.1rem rgba(0, 0, 0, 0.25);
  }




.custom-file-input{
  display: none;
}
.custom-file-control{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: .5rem 0.7rem;
  line-height: 1.5;
  box-sizing: border-box;
  border: 1px solid black;
  background-color: #fcf2f5 !important;
  border-radius: 20px;
  height: 34px;
  width: 350px;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 4px;
  color: #716c6e;
  font-size: 0.9rem;
}

.custom-file-control:focus {
  color: #495057;
    border: none;
    background-color: #fcf2f5;
    outline: 0;
    box-shadow: 0 5px 20px 0.1rem rgba(0, 0, 0, 0.25);
}
.custom-file-control:hover {
  color: #495057;
    border: none;
    background-color: #fcf2f5;
    outline: 0;
    box-shadow: 0 5px 20px 0.1rem rgba(0, 0, 0, 0.25);
}

.custom-file-text{
  padding-left: 360px;
  padding-top: 40px;
  font-family: SF-Pro-Display-Regular;
  font-size: 18px;
}
input[type=text], select, textarea {
  resize: vertical;
}

@media screen and (max-width: 1600px) {
 /*  #login_form .form-control {
    height: 1.5em;
  }
  #login_form .btn-default {
    height: 1.5em;
  }
  .custom-file-control{
    height: 1.5em;
  }
  */
  
 
}

.radio_container {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

 
}

/* #remember_me{
  border-radius: 30px;
  color: #000 !important;
  background-color:#fcf2f5;
} */

/* Hide the browser's default checkbox */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 6px;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  color: #000 !important;
  background-color:#fcf2f5;
  border: 1.5px solid #000;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .checkmark {
  background-color: #fcf2f5;
  border: 2px solid #000;
}

/* When the checkbox is checked, add a blue background */
.radio_container input:checked ~ .checkmark {
  background-color: #fcf2f5;
  border: 5px solid #000;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.radio_container input:checked ~ .checkmark:after {
  display: none;
}

/* Style the checkmark/indicator */
.radio_container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
 
}
.invalid-feedback{
  color: #E68686;
  font-size: 15px;
  margin-top: unset;

}

.email_alert
{
  color: #59C9AF;
  font-size: 15px;
}


footer p{
  color:#F3E6E6;
  margin-left: 200px;
}

footer .form-control{
  width: 207px;
  height: 46px;
  border-radius: 23px;
  border:1px solid #F3E6E6 !important;
  background-color: #000 !important;
  color:#F3E6E6 !important;
  font-size: 20px;
  margin-left: 200px;
}

footer ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#F3E6E6 !important;
  font-size: 20px;
}
footer::-moz-placeholder { /* Firefox 19+ */
  color:#F3E6E6 !important;
}
footer :-ms-input-placeholder { /* IE 10+ */
  color:#F3E6E6 !important;
}
footer :-moz-placeholder { /* Firefox 18- */
  color:#F3E6E6 !important;
}

footer .btn-default{
  width: 100px;
  height: 46px;
  border-radius: 23px;
  border:1px solid #F3E6E6 !important;
  background-color: #F3E6E6 !important;
  color:#000 !important;
  font-size: 20px;
  padding: 0;
  margin-top: 0;
}

footer .btn-default:hover{

  border:1px solid #F3E6E6 !important;
  background-color: #000 !important;
  color:#F3E6E6 !important;
  
}

.invalid_passport {
  border-color: #E68686 !important;
  
  background-image: url(/images/Attention.png) !important;
  background-repeat: no-repeat;
    background-position: center right calc(0.4em + 0.1875rem);
    background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.invalid_passport_div
{
  margin-bottom:1.4rem !important;
}

.invalid_passport .select-selected {
  border-color: #E68686 !important;
  
}