.datetimepicker{
  display: block;
  //border: $datetimepickerBorderSize solid $datetimepickerBorderColor;
  position: absolute;
  //box-shadow: 0 1px 3px 0 $datetimepickerBorderColor;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  z-index: 300;
  width:290px;
  .datetimepickertopbar {
    padding: 10px 25px;
    text-align: center;
 
    .title{
      font-size:18px;
      cursor:pointer;
    }
 
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
 
    ul li {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 3px;
    }
 
 
    .prev {
      float: left;
      padding-top: 10px;
      cursor:pointer;
    }
 
    .next {
      float: right;
      padding-top: 10px;
      cursor : pointer;
    }
  }
 
  .weekdays {
    margin: 0;
    padding: 10px 0;
 
    list-style: none;
    li {
      display: inline-block;
      width: 13.6%;
      text-align: center;
    }
  }
 
  .days {
    padding: 10px 0;
    margin: 0;
    cursor : pointer;
    list-style: none;
 
    li {
      list-style-type: none;
      display: inline-block;
      width: 13.6%;
      height: 20px;
      text-align: center;
      margin-bottom: 5px;
      font-size:12px;
      cursor: pointer;
    }
 
    .active {
      border-radius: 135px;
      padding: 5px;
    }
 
 
    .date-today{
      padding-top: 1%;
      padding-left: 42%;
    }
  }
 }
 
 
 .datetimepicker1{
   display: block;
   //border: $datetimepickerBorderSize solid $datetimepickerBorderColor;
   //position: relative;
   //box-shadow: 0 1px 3px 0 $datetimepickerBorderColor;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   z-index: 3;
   width:290px;
   .datetimepickertopbar {
     padding: 10px 25px;
     text-align: center;
  
     .title{
       font-size:18px;
       cursor:pointer;
     }
  
     ul {
       margin: 0;
       padding: 0;
       list-style: none;
     }
  
     ul li {
       font-size: 18px;
       text-transform: uppercase;
       letter-spacing: 3px;
     }
  
  
     .prev {
       float: left;
       padding-top: 10px;
       cursor:pointer;
     }
  
     .next {
       float: right;
       padding-top: 10px;
       cursor : pointer;
     }
   }
  
   .weekdays {
     margin: 0;
     padding: 10px 0;
  
     list-style: none;
     li {
       display: inline-block;
       width: 13.6%;
       text-align: center;
     }
   }
  
   .days {
     padding: 10px 0;
     margin: 0;
     cursor : pointer;
     list-style: none;
  
     li {
       list-style-type: none;
       display: inline-block;
       width: 13.6%;
       height: 20px;
       text-align: center;
       margin-bottom: 5px;
       font-size:12px;
       cursor: pointer;
     }
  
     .active {
       border-radius: 135px;
       padding: 5px;
     }
  
  
     .date-today{
       padding-top: 1%;
       padding-left: 42%;
     }
   }
  }
 .datetimepicker-up{
  bottom: 100%;
 }
 
 .datetimepicker:disabled{
  cursor: not-allowed;
 }
    
 
   .invaliddays{
     opacity:.40;
     cursor: not-allowed;
 
   }
   .disabled{
    opacity:.40;
    cursor: not-allowed;
   }
   
  .datedropdown{
   display: block;
   border: $datetimepickerBorderSize solid $datetimepickerBorderColor;
   //position: absolute;
   box-shadow: 0 1px 3px 0 $datetimepickerBorderColor;
   z-index: 3;
    
   
 li {
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   border-radius: 5px;
   cursor: pointer;
 } }
 
  .dropdiv1{
    width: 100%;
  }
 
 .dropspan1{
   float: left;
   width:25%;
 }
 
 .dropul1{
   list-style-type: none;
   -webkit-padding-start: 5px;
 }
 
 .dropspan2{
   width:25%; 
   float:left; 
   border-right: 1px solid $datetimepickerDaysColor;
  
 }
 
 .dropspan4{
   width:25%;  
   display: table-row-group; 
 }
 
 .dropul2{
   list-style-type: none; 
   -webkit-padding-start: 15px;
 }
 .dropiconpadding{
   cursor:pointer;     
   -webkit-padding-start: 20px;
 }
 .btndiv1{
   position: relative;
   bottom: 0;
 }
 .datedropbtn{
 border: none;
 padding: 6px 10px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 }
 .dropbtnspan{
  display:inline-flex; 
  padding-left: 105px;
 }
 
 .change4{
  
   padding-left: 3px;
   padding-right: 4px;
   padding-top: 3px;
   padding-bottom: 3px;
   border-radius: 5px;
   cursor: pointer;
   width: 30px;
 }
 
 
 .disablearrow{
   opacity:.40;
   cursor:not-allowed;
   pointer-events: none;
 }
 

.notclickable{
  pointer-events: none;
}


// multi datepicker
.customrangepanel {
  cursor: pointer;
  /* border-bottom: 1px solid black; */
  /* border-top: 1px solid black; */
  padding: 15px;
  background-color: white; 
}

.custom {
   padding-bottom: 20px;
   padding-top: 20px;
   border-bottom: 3px solid $datetimepickerActiveColor;
}


.tooltip {
   position: relative;
   display: inline-block;
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1000;
   top: -5px;
   left: 110%;
}

.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 100%;
   border-color: $datetimepickerBorderColor;
}

.tooltip:hover .tooltiptext {
   visibility: visible;
}