/**************************************************************************************
  htmlDatePicker CSS file
  
  Feel Free to change the fonts, sizes, borders, and colours of any of these elements
***************************************************************************************/
/* The containing DIV element for the Calendar */
#dpCalendar {
  display: none;          /* Important, do not change */
  position: absolute;        /* Important, do not change */
  background-color: #eeeeee;
  color: black;
  font-size: small;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
/* The table of the Calendar */
#dpCalendar table {
  border: 1px solid black;
  background-color: #eeeeee;
  color: black;
  font-size: small;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  width: 100%;
 
}
/* The Next/Previous buttons */
#dpCalendar .cellButton {
  background-color: #197DC9; /* #ddddff; */
  color: white; /* black; */
}
/* The Month/Year title cell */
#dpCalendar .cellMonth {
  background-color: #197DC9; /* #ddddff; */
  color: white; /* black; */
  text-align: center;
}
/* Any regular day of the month cell */
#dpCalendar .cellDay {
  background-color: #197DC9;
  color: white; /* black; */
  text-align: center;
}
/* The day of the month cell that is selected */
#dpCalendar .cellSelected {
  border: 1px solid red;
  background-color: red;  /* #ffdddd; */
  color: white; /* black; */
  text-align: center;
}
/* The day of the month cell that is Today */
#dpCalendar .cellToday 
{
  border: 1px solid green;
  background-color: green; /* #ddffdd; */
  color: white; /* black; */
  text-align: center;
}
/* Any cell in a month that is unused (ie: Not a Day in that month) */
#dpCalendar .unused {
  background-color: transparent;
  color:  white; /* black; */
}
/* The cancel button */
#dpCalendar .cellCancel {
  background-color: darkblue; /* #cccccc; */
  color: white; /* black; */
  border: 1px solid black;
  text-align: center;
}
/* The clickable text inside the calendar */
#dpCalendar a {
  text-decoration: none;
  background-color: transparent;
  color: white; /* blue; */
}  
      .loader {
          border: 16px solid #f3f3f3; /* Light grey */
          border-top: 16px solid #0080FF; /* Blue */
          border-left: 16px solid #00AA00; /* Blue */
          border-right: 16px solid Gold; /* Blue */
          border-bottom: 16px solid #D90000; /* Red */
          border-radius: 50%;
          visibility: hidden;
          position: absolute;
          vertical-align: middle; 
          text-align: center;
          width: 120px;
          height: 120px;
          animation: spin 2s linear infinite;
        }
       @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      .style1
      {
          width: 28px;
      }
      .style2
      {
          width: 230px;
      }