/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-20px);
	transform: translateX(-20px);
	opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-20px);
	transform: translateX(-20px);
	opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
  }
}

#loading-page {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
}

#loading-page-image{
    z-index: 100;
}

/*Scrollbar ___Start___*/

.nav-horizontal-container {
    scrollbar-color: #164987 #eef6ff;
    scrollbar-width: thin;
}

/* width */
.nav-horizontal-container::-webkit-scrollbar {
  width: 5px;
  opacity: 0.5;
}

/* Track */
.nav-horizontal-container::-webkit-scrollbar-track {
  background: #f5f5f5; 
}
 
/* Handle */
.nav-horizontal-container::-webkit-scrollbar-thumb {
  background: #164987; 
}

/* Handle on hover */
.nav-horizontal-container::-webkit-scrollbar-thumb:hover {
  background: #133c6e; 
}

/*Scrollbar ___End___*/

.error{
  left: auto !important;
  right: 3rem;
  color: #d61b1b !important;
  font-size: 0.8rem;
  font-weight: 700;
  position: absolute;
}

input[type=checkbox] ~ label.error {
    left: 0 !important;
    right: auto;
    bottom: -5px;
}

.form-check-txt > input[type=checkbox] ~ label.error {
    left: auto !important;
    right: auto;
    bottom: -35px;
}

input[type=file] ~ label.error {
    right: 14rem;
    top: 5.5rem;
}

.logo-yna-join{
  max-width: 135px;
}

label[class^="icon-"]{
  cursor: pointer;
}

.icon-view{
  content: url(/recruitassets2/images/icon24/icon-view.png);
  width: 1.5rem;
}

.icon-delete{
  content: url(/recruitassets2/images/icon24/icon-delete.png);
  width: 1.3rem;
}

.btn-round-active,
.btn-round-inactive,
.btn-round-done{
  display: inline-block;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  text-align: center;
  margin: 0.7rem 1.5rem;
  line-height: 3.3rem;
}

.btn-round-active,
.btn-round-done{
  background-color: #164987;
  color: #ffffff;
}

.btn-round-inactive{
  border: #D6E5FD solid 2px;
  background-color: #ffffff;
  color: #001E42;
}

.btn-round-done::after{
  content: "";
  width: 20px;
  height: 8px;
  border-bottom: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  display: inline-block;
  transform: rotate(315deg);
}

.btn-application-p a{
    color: #6c757d;
    text-align: right;
    margin: 0.25rem 4.5rem 0.25rem 0;
    display: block;
}

.btn-application-p a.disabled{
    pointer-events: none;
    opacity: 0.5;
}

.btn-edit::after{
	content: url(/recruitassets2/images/icon24/icon-edit.png);
	width: 100%;
	disabled: inline-block;
}

.btnUpload{
  display: none;
}

.log-in-page{
	padding-top: 8rem;
}

.form-floating-dp,
.form-static-dp > div,
.form-static-dp > div > div {
  position: relative;
}

.form-floating-dp > .form-control, 
.form-static-dp > div > .form-control,
.form-static-dp > div > div > .form-control{
  height: calc(3.5rem + 2px);
}

.form-floating-dp > .form-control{
  padding: 2.5rem 1.6rem 1.5rem;
}

.form-static-dp > div > .form-control,
.text-area > .form-control{
  padding: 1rem 1.6rem;
}

.form-floating-dp > .form-control::placeholder {
  color: transparent;
}

.form-floating-dp > label,
.form-static-dp > div > label,
.form-static-dp > div > div > label{
  color: #778698;
  position: absolute;
}

.form-floating-dp > label{
  top: 0;
  left: 15px;
  height: 100%;
  padding: 1.3rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-static-dp > div > label,
.form-static-dp > div > div > label{
  top: 3px;
  left: 24px;
  height: 100%;
  pointer-events: none;
  border: 1px solid transparent;
  transition: opacity 0.1s ease-in-out;
  font-size: 0.7rem;
}

.form-floating-dp > .form-control:focus ~ label,
.form-floating-dp > .form-control:not(:placeholder-shown) ~ label,
#ApplicationLoginForm .form-floating-dp > .form-control:placeholder-shown ~ label{
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating-dp > .form-control:not(:placeholder-shown) ~ label[for=Password].error,
.form-floating-dp > .form-control:not(:placeholder-shown) ~ label[for=ConfirmPassword].error {
    position: relative;
    top: 0;
    height: unset;
    right: 0;
    margin: 0;
    padding-bottom: 0;
    width: 115%;
}

/*Class created to style the btn to see or hide the password*/
.password-view {
    position: absolute;
    top: 20px;
    right: 5%;
    font-size: 1.2rem;
}

.form-static-dp input[type=checkbox]{
  width: 32px;
  height: 32px;
  margin: 0;
}

#currentW{
  position: relative;
  top: 3px;
}

.form-control{
  background-color: #F7F8F9 !important;
  border: none !important;
  font-size: 1rem !important;
}

.form-question{
  font-size: 1.1rem;
  font-weight: 700;
}

.form-question ~ span,
.txt-supporting{
  font-size: 0.8rem;
  color: #778698;
}

.datepicker~.ui-datepicker-trigger{
  position: absolute;
  top: 32%;
  right: 1.6rem;
  max-width: 30px;
}

.txt-helper{
    position: absolute;
    font-size: 0.7rem;
    top: 5px;
    left: 31px;
    opacity: 0.6;
    display: none;
}

.points-counter{
  text-align: center;
  max-width: 177px;
  position: fixed;
  bottom: 10%;
  right: 2%;
  background-color: #ffffff;
  border-radius: 16px;
  -webkit-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2);
  z-index: 2;
}

.points-counter .count{
  width: 161px;
    margin: 0 0.5rem 0.5rem;
    background-color: rgba(205, 225, 255, 0.4);
    border-radius: 16px;
}

.points-counter .count input{
	padding: 0.8rem 0;
	font-size: 1.6rem;
	width: 100%;
	border: none;
	text-align: center;
	border-radius: 16px;
	background: none;
}

.navbar-toggler span {
  background: #ffffff;
}

.inputfile button{
  display: none;
}

input:autofill {
    filter: grayscale(100%) brightness(88%) contrast(171%) invert(10%) sepia(40%) saturate(0%);
}

.uploaded{
  border: 2px solid #2c7ff5;
}

.btn-add-info{
  background-color: #e2e9f0;
  padding: 1rem 1.6rem;
  width: 100%;
  border: none;
  border-radius: 8px;
  text-align: left;
}

.section-separation{
  top: 150px;
}

.bg-add-info,
.bg-add-availability,
.bg-add-file{
  background-color: #F4F8FF;
  position: relative;
  left: -5%;
  width: 110%;
  padding: 3rem 2rem;
  border-radius: 8px;
}

.bg-add-info-view,
.bg-add-availability-view,
.bg-add-file-view{
	position: relative;
	width: 100%;
	left: -0.3rem;
	border-radius: 8px;
}

.bg-add-file > div,
.bg-add-file-view > div,
.bg-add-info > div,
.bg-add-info-view > div,
.bg-add-availability .day-of-week > .row,
.bg-add-availability-view .day-of-week > .row,
.item-added{
  background-color: #ffffff;
  border-radius: 16px;
  -webkit-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2);
}

.bg-add-file > div > p,
.bg-add-file-view > div > p{
  margin: 1.9rem 1.6rem;
}

.bg-add-file-view > div > label,
.bg-add-file > div > label{
 margin: 1rem;
}

.bg-add-file-view > div > input,
.bg-add-file > div > input{
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.input-add-file{
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.item-added{
  background-color: #ffffff;
  padding: 1.6rem;
  margin: 1rem;
}

.input-group > label{
  top: 1.3rem !important;
  left: 1.7rem !important;
  z-index: 4;
}

.checkbox-grey{
  background-color: #F7F8F9;
  border-radius: 8px;
  padding: 1rem 0 1rem 0.8rem;
  width: 100%;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #778698;
}

.form-check-txt{
  border-radius: 8px;
  background-color: #F7F8F9;
  padding: 1.5rem 1.5rem 1.5rem 2.5rem !important;
  position: relative;
}

.form-check-inline-small{
  padding: 1.3rem 2.5rem 1.3rem 1rem !important;
  border-radius: 8px;
  background-color: #F7F8F9;
}

.points{
  background-color: #ffffff;
  border-radius: 16px;
  -webkit-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2);
  padding: 1rem 0;
  position: fixed;
  bottom: 15%;
  right: 0;
  max-width: 177px !important;
  z-index: 6;
}

.points > div > div:nth-child(2) p{
  background-color: #F4F8FF;
  border-radius: 16px;
  padding: 1rem 0;
}

.btn-back{
  position: relative;
  top: 115px;
  left: 35%;
  font-size: 1.5rem;
  display: inline-block;
}

/*-----Week Availability-----*/

.day-of-week .hours,
.day-of-week .hours-view{
  background-color: #F7F8F9;
  border-radius: 8px;
  padding: 0.5rem 0;
  margin: 1rem 0;
}

.day-of-week .hours{
	cursor: pointer;
}

.day-of-week .hours.not-set,
.day-of-week .hours-view.not-set{
  background-color: #F7F8F9;
  color: #061e42;
}

.day-of-week .hours.available,
.day-of-week .hours-view.available{
  background-color: #6EE42F;
  color: #ffffff;
}

.day-of-week .hours.unavailable,
.day-of-week .hours-view.unavailable{
  background-color: #FF6B40;
  color: #ffffff;
}

.tippy-box{
  background-color: #ffffff;
  color: #ffffff;
  text-align: left;
  border-radius: 16px;
  border: 1px solid #778698;
  -webkit-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.2);
}

.tippy-arrow{
  color: #778698;
}

.tippy-content{
  padding: 1rem 0.5rem;
}

.tippy-content span{
  font-size: 1rem;
}

.tippy-content .container .row div{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tippy-content .container .row div:nth-child(1) span::before,
.tippy-content .container .row div:nth-child(2) span::before,
.tippy-content .container .row div:nth-child(3) span::before{
  display: none;
}

.tippy-content .container .row div:nth-child(1),
.tippy-content .container .row div:nth-child(2),
.tippy-content .container .row div:nth-child(3){
  border-radius: 16px;
  cursor: pointer;
}

.tippy-content .container .row div:nth-child(1){
  background-color: #D8D8D8;
}

.tippy-content .container .row div:nth-child(2){
  background-color: #6EE42F;
}

.tippy-content .container .row div:nth-child(3){
  background-color: #FF6B40;
}

.tippy-box[data-placement^=top]>.tippy-arrow {
  bottom: -1px;
}

.tippy-box[data-placement^=bottom]>.tippy-arrow{
  top: -1px;
}

.set-all{
  cursor: pointer;
}

/*-----Tables-----*/

.table{
  font-size: 0.9rem;
}

.table thead th{
  border: none;
}

.table td, .table th{
  vertical-align: middle !important;
}

/*-----nav-horizontal-----*/

.nav-horizontal{
	color: #001E42;
	background-color: #ffffff;
}

.nav-horizontal > div{
  padding:1.5rem 0;
  max-height: 630px;
  height: calc(100vh - 280px);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;
  -webkit-animation: slide-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.nav-horizontal .nav-item{
  margin: 0 auto;
  margin-bottom: 1.5rem;
}

.nav-horizontal .nav-item > p,
.nav-horizontal .nav-item > div > p{
  margin: 0;
}

.nav-horizontal .nav-item > p > span,
.nav-horizontal .nav-item > div > p > span{
  font-size: 0.8rem;
  font-weight: 700;
}

.application-details ul{
  list-style: none;
}

.application-details ul li{
  position: relative;
  width: 100%;
  right: 8px;
}

.application-details ul li a{
  color: #001E42;
}

.application-details ul li span{
  background-color: #D6E6FD;
  border-radius: 50%;
  content: "";
  width: 15px;
  height: 15px;
  display: inline-block;
  position: absolute;
  right: 6%;
  top: 8px;
}

.application-details ul .active{
  background-color: #F3F8FF;
  border-radius: 16px;
}

.application-details ul .active a.disabled {
    opacity: 1!important;
}

/*.application-details ul .done{
  background: none;
  border-radius: 0;
}*/

.application-details ul .done span{
  background-color: #164987;
}

/*-----Containers-----*/

.container-log-in-nav {
  background-color: #164987;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  position: fixed;
  z-index: 5;
}

.container-log-in-nav div[data-header-menu="main-nav"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.container-log-in-nav div[data-header-menu="sub-nav"] .navbar-collapse > .navbar-collapse-items-container {
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
    padding: 1rem 0;
}

.container-join-us {
    min-height: 550px;
}

.container-join-us, .container-who-are-you{
  position: relative;
  top: 130px;
  overflow-x: hidden;
}

.container-card-slider{
  background-color: #f4f8ff;
  border-radius: 16px;
}

.container-lg > .no-line-top{
  padding-top: 7rem;
}

/*-----Card Slider-----*/

.card{
  border-radius: 16px !important;
  border: none !important;
}

.card .card-body{
  min-height: 300px;
}

.card-title{
  font-weight: 800;
  font-size: 1rem;
}

/*-----Add Info-----*/

.container-add-info{
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  z-index: 99;
  position: fixed;
  top: 0;
  overflow-y: scroll;
  content: "";
}

.container-add-info > .container{
  margin-top: 8rem;
}

.container-add-info > .container > div{
  list-style: none;
  background-color: #ffffff;
  padding: 2rem 0;
  max-width: 90%;
  margin: 0 auto;
  border-radius: 15px;
}

/*-----Modal Styles-----*/

.modal-dialog {
    max-width: 535px!important;
}
.modal.file-view .modal-header,
.modal.file-view .modal-header button,
.modal.file-view .modal-footer button,
.modal.file-view .modal-footer{
	background-color: #164987;
	color: #ffffff;
}

.modal.file-view .modal-dialog{
	max-width: unset !important;
	width: 80%;
}

.modal.pdf-viewer .modal-dialog{
	max-width: 100% !important;
  width: 870px;
}

.img-draggable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

/*-----AlertMSG Styles-----*/

div.alertMSG{
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

div.alertMSG-container{
	background: rgba(255,255,255,1);
	border-radius: 16px;
}

div.alertMSG-container p{
	margin: 0;
}

div.alertMSG-title{
	background: rgba(22, 73, 135, 1);
	height: 100%;
	-webkit-border-top-left-radius: 16px;
	-webkit-border-bottom-left-radius: 16px;
	-moz-border-radius-topleft: 16px;
	-moz-border-radius-bottomleft: 16px;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	color: rgba(255,255,255,1);
	padding: 1rem;
	font-weight: 700;
}

div.alertMSG-title::before{
	content: url(/recruitassets2/images/icon24/icon-warning.png);
	width: 100%;
	display: block;
}

div.alertMSG-msg{
	margin: 1rem 2rem 1rem 0;
}

div.alertMSG-close{
	margin: 0 2rem 1rem 0;
	text-align: end;
	font-size: 0.9rem;
}

div.alertMSG-close > span{
	cursor: pointer;
}

div.alertMSG > .container{
  margin-top: 15rem;
}

@media only screen and (min-width: 768px) {
  
  .container-add-info > .container > div{
    padding: 2rem;
  }
  .container-join-us{
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }

}

@media only screen and (min-width: 992px) {

  .logo-yna-join{
    margin: 2rem 0;
    max-width: 210px;
  }

  .log-in-page {
    padding-top: 13rem;
  }

  .nav-horizontal-container {
    display: block !important;
    position: fixed;
  }

  .nav-horizontal > div{
    max-width: 280px;
  }

  .nav-horizontal > div{
    background-color: #ffffff00;
    top: 190px;
  }

  .btn-back{
    left: 50%;
  }

  .tippy-box{
    color: #001E42;
  }

  .tippy-content .container .row div:nth-child(1),
  .tippy-content .container .row div:nth-child(2),
  .tippy-content .container .row div:nth-child(3){
    background-color: unset;
  }

  .tippy-content .container .row div:nth-child(1) span::before,
  .tippy-content .container .row div:nth-child(2) span::before,
  .tippy-content .container .row div:nth-child(3) span::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
  }

  .tippy-content .container .row div:nth-child(1) span::before{
    background-color: #D8D8D8;
  }
  
  .tippy-content .container .row div:nth-child(2) span::before{
    background-color: #6EE42F;
  }
  
  .tippy-content .container .row div:nth-child(3) span::before{
    background-color: #FF6B40;
  }
  
  .container-log-in-nav div[data-header-menu="sub-nav"] .navbar-collapse > .navbar-collapse-items-container {
    border-bottom: none;
  }

}

@media only screen and (min-width: 1200px) {

}