/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
/* For device width smaller than 400px: */
.background {
  background-repeat: no-repeat;
  background: url('./../../images/hero-bg.webp') top center; 
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  position: relative;
}

/*  Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
  .background { 
	  background-repeat: no-repeat;
	  background: url('./../../images/hero-bg.webp') center center; 
	  width: 100%;
	  min-height: 100vh;
	  background-size: cover;
	  position: relative;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
  .background { 
	  background-repeat: no-repeat;
	  background: url('./../../images/hero-bg.webp') left center; 
	  width: 100%;
	  min-height: 100vh;
	  background-size: cover;
	  position: relative;
  }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {   
  .background { 
	  background-repeat: no-repeat;
	  background: url('./../../images/hero-bg.webp') bottom center; 
	  width: 100%;
	  min-height: 100vh;
	  background-size: cover;
	  position: relative;
  }
 }

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	  .background { 
	  background-repeat: no-repeat;
	  background: url('./../../images/hero-bg.webp') bottom center; 
	  width: 100%;
	  min-height: 100vh;
	  background-size: cover;
	  position: relative;
  }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
	  .background { 
	  background-repeat: no-repeat;
	  background: url('./../../images/hero-bg.webp') bottom center; 
	  width: 100%;
	  min-height: 100vh;
	  background-size: cover;
	  position: relative;
  }
}

/*--------------------------------------------------------------
# loader
--------------------------------------------------------------*/

#loader {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
background: #ffffff url('./../../images/Doctors symbol.gif') no-repeat center center;
}

/*--------------------------------------------------------------
# Sign In Animation
--------------------------------------------------------------*/
@keyframes form_animation {
  0%   {bottom: 0px; top: 20px;}
  100%  {bottom: 20px; top:0px;}
  
}

::placeholder {
color: #fff;
opacity: 1
}

.datepicker {
background-color: #403A60 !important;
color: #fff !important;
border: none;
padding: 10px !important;
}

.datepicker-dropdown:after {
border-bottom: 6px solid #403A60;
}

thead tr:nth-child(3) th {
color: #fff !important;
font-weight: bold;
padding-top: 20px;
padding-bottom: 10px
}
.dow,
.old-day,
.day,
.new-day {
width: 40px !important;
height: 40px !important;
border-radius: 0px !important
}

.old-day:hover,
.day:hover,
.new-day:hover,
.month:hover,
.year:hover,
.decade:hover,
.century:hover {
border-radius: 6px !important;
background-color: #eee;
color: #000
}

.disabled {
color: #616161 !important
}

.prev,
.next,
.datepicker-switch {
border-radius: 0 !important;
padding: 20px 10px !important;
text-transform: uppercase;
font-size: 20px;
color: #fff !important;
opacity: 0.8
}

.prev:hover,
.next:hover,
.datepicker-switch:hover {
background-color: inherit !important;
opacity: 1
}

.fa-calendar {
color: #fff;
font-size: 30px;
padding-top: 8px;
padding-left: 5px;
cursor: pointer
}