/*******************************************************
Base Theme
********************************************************/
.datetimepicker {transform: scale(1.3); position: absolute !important; font-size: 11px !important; font-family: Tahoma, sans-serif !important; color: #000 !important; line-height: normal !important; width: 182px !important; height: 155px !important; padding: 7px !important; background:#fefefe !important; border:1px solid #ccc !important; border-radius:2px !important; margin:2px !important; box-shadow: 2px 2px 15px #666666 !important;}

/* header
********************************************************/
.datetimepicker .datetimepicker-header {position: relative !important; height: 15px !important; margin-bottom: 5px !important; padding-top: 1px !important; width:auto !important;}
.datetimepicker .datetimepicker-header .datetimepicker-title {text-align: center !important; margin: 0 25px 0 25px !important;}
.datetimepicker .datetimepicker-header .titleText {}
.datetimepicker .datetimepicker-header .previous, .datetimepicker .datetimepicker-header .next{position: absolute !important; cursor: pointer !important; overflow: hidden !important; top: 2px !important;}
.datetimepicker .datetimepicker-header .previous {left: 2px !important; border-color: transparent #666 transparent transparent !important; border-style: solid !important; border-width: 6px !important; width: 0 !important; height: 0 !important; line-height: 0 !important; font-size: 0 !important;}
@media screen and (-webkit-min-device-pixel-ratio:0){ .datetimepicker .datetimepicker-header .previous {top: 1px !important;border-width: 7px !important;left: 1px !important;}}
.datetimepicker .datetimepicker-header .previous:hover {border-color: transparent #498CE2 transparent transparent !important;}
.datetimepicker .datetimepicker-header .next {right: 4px !important; border-color: transparent transparent transparent #666 !important; border-style: solid !important; border-width: 6px !important; width: 0 !important; height: 0 !important; line-height: 0 !important; font-size: 0 !important;}
.datetimepicker .datetimepicker-header .next:hover {border-color: transparent transparent transparent #498CE2 !important;}

/* body
********************************************************/
.datetimepicker .body {position: relative !important; top: 0px !important; left: 2px !important; width: 168px !important; height: 112px !important; overflow: hidden !important;}

/* time
********************************************************/
.datetimepicker .time {position: relative !important; width: 100% !important; height: 100% !important;}
.datetimepicker .time .hour, .datetimepicker .time .separator,
.datetimepicker .time .minutes {border: 1px solid #ccc !important; background: #fff !important; width: 65px !important; font-size: 32px !important; position: absolute !important; top: 10px !important; text-align: center !important; padding: 2px !important;}
.datetimepicker .time.f12 .hour, .datetimepicker .time.f12 .separator, .datetimepicker .time.f12 .minutes {top: 5px !important;}
.datetimepicker .time .hour {left: 8px !important;}
.datetimepicker .time .separator {background: transparent !important; border: 0px !important; width: 10px !important; left: 73px !important;}
.datetimepicker .time .minutes {left: 88px !important;}
.datetimepicker .time .ok {
    position: absolute !important; 
    top: 70px !important; 
    width: 105px !important; 
    left: 28px !important; 
    font-size: 20px !important; 
    border-radius: 145px !important; 
    color:white !important; 
    border: none;
    background-color: #224166;
    padding-top: 7px;
    padding-bottom: 7px;
}

.datetimepicker .time.f12 .ok {top: 70px !important;}
.datetimepicker  .time.f12 .ampm {top:50px !important; position:absolute !important; left:73px !important; font-size:14px !important;}

/* days-grid
********************************************************/
.datetimepicker .days .day {float: left !important; text-align: center !important; overflow: hidden !important; width: 23px !important; line-height:15px !important; margin: 0 1px 1px 0 !important;}
.datetimepicker .days .today {background: #c9dbef !important; border-radius: 1px !important;}
.datetimepicker .days .titles {height: 15px !important; border-bottom: 1px solid #e0e0e0 !important; margin-bottom: 1px !important;}
.datetimepicker .days .week5 .day {margin-bottom: 0 !important;}

/* days-colors
********************************************************/
.datetimepicker .days .week .day {cursor: pointer !important;}
.datetimepicker .days .week .day:hover {background: #CCC !important;border-radius: 1px !important;color:#000 !important;}
.datetimepicker .days .otherMonth {color: #aaa !important;}
.datetimepicker .days .week .otherMonth:hover {background: #EEE !important;border-radius: 1px !important;color: #AAA !important;}
.datetimepicker .days .selected {background: #498CE2 !important;border-radius: 1px !important;color:#fff !important;}

/* months-grid
********************************************************/
.datetimepicker .months .month {float: left !important;cursor: pointer !important;text-align: center !important;padding: 6px 0 !important;width: 55px !important;line-height:15px !important;overflow: hidden !important;margin: 0 1px 1px 0 !important;}
.datetimepicker .months .today {background: #c9dbef !important;border-radius: 1px !important;}
.datetimepicker .months .month3, .datetimepicker .months .month6, 
.datetimepicker .months .month9, .datetimepicker .months .month12 { margin-right: 0 !important;}
.datetimepicker .months .month10, .datetimepicker .months .month11, .datetimepicker .months .month12 { margin-bottom: 0 !important; }

/* months-colors
********************************************************/
.datetimepicker .months .month:hover {background: #CCC !important;border-radius: 1px !important;color:#000 !important;}
.datetimepicker .months .selected {background: #498CE2 !important;border-radius: 1px !important;color:#fff !important;}

/* years-grid
********************************************************/
.datetimepicker .years .year {float: left !important;cursor: pointer !important;text-align: center !important;padding: 6px 0 !important;width: 32px !important;line-height:15px !important;overflow: hidden !important;margin: 0 1px 1px 0 !important;}
.datetimepicker .years .today {background: #c9dbef !important;border-radius: 1px !important;}
.datetimepicker .years .year4, .datetimepicker .years .year9,
.datetimepicker .years .year14, .datetimepicker .years .year19 {margin-right: 0 !important;}
.datetimepicker .years .year15, .datetimepicker .years .year16, .datetimepicker .years .year17,
.datetimepicker .years .year18, .datetimepicker .years .year19 {margin-bottom: 0 !important;}

/* years-colors
********************************************************/
.datetimepicker .years .year:hover {background: #CCC !important; border-radius: 1px !important; color:#000 !important;}
.datetimepicker .years .selected {background: #498CE2 !important; border-radius: 1px !important; color:#fff !important;}

/* global
********************************************************/
.datetimepicker .unavailable {background: none !important !important; color: #fbb !important !important; cursor: default !important !important;}


/*******************************************************
Themes
********************************************************/
/* yellow theme */
.datetimepicker-yellow {border:1px solid #f7b900 !important;}
.datetimepicker-yellow .days .titles{border-bottom: 1px solid #f7b900 !important;}
.datetimepicker-yellow .datetimepicker-header .previous:hover {border-color: transparent #f7b900 transparent transparent !important;}
.datetimepicker-yellow .datetimepicker-header .next:hover {border-color: transparent transparent transparent #f7b900 !important;}
.datetimepicker-yellow .days .today {background: #F7F4A3 !important;}
.datetimepicker-yellow .days .selected {background: #f7b900 !important;}
.datetimepicker-yellow .months .today {background: #F7F4A3 !important;}
.datetimepicker-yellow .months .selected {background: #f7b900 !important;}
.datetimepicker-yellow .years .today {background: #F7F4A3 !important;}
.datetimepicker-yellow .years .selected {background: #f7b900 !important;}
.datetimepicker-yellow .time .ok {border-radius:2px !important; -moz-border-radius:2px !important; -webkit-border-radius:2px !important; -o-border-radius:2px !important; color:#222 !important;background: -moz-linear-gradient(bottom, #DDB000, #FFD11C) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFD11C', endColorstr='#DDB000') !important; background-image: linear-gradient(to bottom,#FFD11C,#DDB000) !important; background: -webkit-gradient(linear,left bottom,left top, from(#DDB000), to(#FFD11C)) !important; background: -o-linear-gradient(bottom, #DDB000, #FFD11C) !important; border:1px solid #DDB000 !important;}
.datetimepicker-yellow .time .ok:hover { color:#222 !important;background: -moz-linear-gradient(bottom, #FDCA00, #FFDC4F) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFDC4F', endColorstr='#FDCA00') !important; background-image: linear-gradient(to bottom,#FFDC4F,#FDCA00) !important; background: -webkit-gradient(linear,left bottom,left top, from(#FDCA00), to(#FFDC4F)) !important; background: -o-linear-gradient(bottom, #FDCA00, #FFDC4F) !important; border-color:#DDB000 !important;}
.datetimepicker-yellow .time .ok:active{ color:#222 !important;background: -moz-linear-gradient(bottom, #FDCA00, #FFD11C) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFD11C', endColorstr='#FDCA00') !important; background-image: linear-gradient(to bottom,#FFD11C,#FDCA00) !important; background: -webkit-gradient(linear,left bottom,left top, from(#FDCA00), to(#FFD11C)) !important; background: -o-linear-gradient(bottom, #FDCA00, #FFD11C) !important; border-color:#DDB000 !important;}


/* green theme */
.datetimepicker-green {border:1px solid #279C27 !important;}
.datetimepicker-green .days .titles{border-bottom: 1px solid #279C27 !important;}
.datetimepicker-green .datetimepicker-header .previous:hover {border-color: transparent #279C27 transparent transparent !important;}
.datetimepicker-green .datetimepicker-header .next:hover {border-color: transparent transparent transparent #279C27 !important;}
.datetimepicker-green  .days .today {background: #BBED9A !important;}
.datetimepicker-green .days .selected {background: #279C27 !important;}
.datetimepicker-green  .months .today {background: #BBED9A !important;}
.datetimepicker-green .months .selected {background: #279C27 !important;}
.datetimepicker-green  .years .today {background: #BBED9A !important;}
.datetimepicker-green .years .selected {background: #279C27 !important;}
.datetimepicker-green .time .ok {border-radius:2px !important; -moz-border-radius:2px !important; -webkit-border-radius:2px !important; -o-border-radius:2px !important; color:#ffffff !important; background: -moz-linear-gradient(bottom, #006600, #009933) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#009933', endColorstr='#006600') !important; background-image: linear-gradient(to bottom,#009933,#006600) !important; background: -webkit-gradient(linear,left bottom,left top, from(#006600), to(#009933)) !important; background: -o-linear-gradient(bottom, #006600, #009933) !important; border:1px solid #006600 !important; }
.datetimepicker-green .time .ok:hover {color:#ffffff !important; background: -moz-linear-gradient(bottom, #009100, #00AE38) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00AE38', endColorstr='#009100') !important; background-image: linear-gradient(to bottom,#00AE38,#009100) !important; background: -webkit-gradient(linear,left bottom,left top, from(#009100), to(#00AE38)) !important; background: -o-linear-gradient(bottom, #009100, #00AE38) !important;border-color:#006600 !important;}
.datetimepicker-green .time .ok:active {color:#ffffff !important; background: -moz-linear-gradient(bottom, #009100, #009933) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#009933', endColorstr='#009100') !important; background-image: linear-gradient(to bottom,#009933,#009100) !important; background: -webkit-gradient(linear,left bottom,left top, from(#009100), to(#009933)) !important; background: -o-linear-gradient(bottom, #009100, #009933) !important;border-color:#006600 !important;}

/* blue theme */
.datetimepicker-blue {border:1px solid #1F6DA8 !important;}
.datetimepicker-blue .days .titles{border-bottom: 1px solid #1F6DA8 !important;}
.datetimepicker-blue .datetimepicker-header .previous:hover {border-color: transparent #1F6DA8 transparent transparent !important;}
.datetimepicker-blue .datetimepicker-header .next:hover {border-color: transparent transparent transparent #1F6DA8 !important;}
.datetimepicker-blue .days .today {background: #c9dbef !important;}
.datetimepicker-blue .days .selected {background: #1F6DA8 !important;}
.datetimepicker-blue .months .today {background: #c9dbef !important;}
.datetimepicker-blue .months .selected {background: #1F6DA8 !important;}
.datetimepicker-blue .years .today {background: #c9dbef !important;}
.datetimepicker-blue .years .selected {background: #1F6DA8 !important;}
.datetimepicker-blue .time .ok {border-radius:2px !important; -moz-border-radius:2px !important; -webkit-border-radius:2px !important; -o-border-radius:2px !important; color:#ffffff !important; background: -moz-linear-gradient(bottom, #005577, #007EAE) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#007EAE', endColorstr='#005577') !important; background-image: linear-gradient(to bottom,#007EAE,#005577) !important; background: -webkit-gradient(linear,left bottom,left top, from(#005577), to(#007EAE)) !important; background: -o-linear-gradient(bottom, #005577, #007EAE) !important; border:1px solid #005577 !important;}
.datetimepicker-blue .time .ok:hover {color:#ffffff !important;  background: -moz-linear-gradient(bottom, #0077A4, #0094CC) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0094CC', endColorstr='#0077A4') !important; background-image: linear-gradient(to bottom,#0094CC,#0077A4) !important; background: -webkit-gradient(linear,left bottom,left top, from(#0077A4), to(#0094CC)) !important; background: -o-linear-gradient(bottom, #0077A4, #0094CC) !important;border-color:#005577 !important;}
.datetimepicker-blue .time .ok:active {color:#ffffff !important;  background: -moz-linear-gradient(bottom, #0077A4, #007EAE) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#007EAE', endColorstr='#0077A4') !important; background-image: linear-gradient(to bottom,#007EAE,#0077A4) !important; background: -webkit-gradient(linear,left bottom,left top, from(#0077A4), to(#007EAE)) !important; background: -o-linear-gradient(bottom, #005577, #007EAE) !important;border-color:#005577 !important;}
 
/* red theme */
.datetimepicker-red {border:1px solid #E02A2A !important;}
.datetimepicker-red .days .titles{border-bottom: 1px solid #E02A2A !important;}
.datetimepicker-red .datetimepicker-header .previous:hover {border-color: transparent #E02A2A transparent transparent !important;}
.datetimepicker-red .datetimepicker-header .next:hover {border-color: transparent transparent transparent #E02A2A !important;}
.datetimepicker-red .days .today {background: #FCBDBD !important;}
.datetimepicker-red .days .selected {background: #E02A2A !important;}
.datetimepicker-red .months .today {background: #FCBDBD !important;}
.datetimepicker-red .months .selected {background: #E02A2A !important;}
.datetimepicker-red .years .today {background: #FCBDBD !important;}
.datetimepicker-red .years .selected {background: #E02A2A !important;}
.datetimepicker-red .time .ok {border-radius:2px !important; -moz-border-radius:2px !important; -webkit-border-radius:2px !important; -o-border-radius:2px !important; color:#ffffff !important;  background: -moz-linear-gradient(bottom, #990000, #C40000) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C40000', endColorstr='#990000') !important; background-image: linear-gradient(to bottom,#C40000,#990000) !important; background: -webkit-gradient(linear,left bottom,left top, from(#990000), to(#C40000)) !important; background: -o-linear-gradient(bottom, #990000, #C40000) !important; border:1px solid #990000 !important;}
.datetimepicker-red .time .ok:hover {color:#ffffff !important; background: -moz-linear-gradient(bottom, #BF0000, #D50000) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#D50000', endColorstr='#BF0000') !important; background-image: linear-gradient(to bottom,#D50000,#BF0000) !important; background: -webkit-gradient(linear,left bottom,left top, from(#BF0000), to(#D50000)) !important; background: -o-linear-gradient(bottom, #BF0000, #D50000) !important;border-color:#990000 !important;}
.datetimepicker-red .time .ok:active {color:#ffffff !important; background: -moz-linear-gradient(bottom, #BF0000, #C40000) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C40000', endColorstr='#BF0000') !important; background-image: linear-gradient(to bottom,#C40000,#BF0000) !important; background: -webkit-gradient(linear,left bottom,left top, from(#BF0000), to(#C40000)) !important; background: -o-linear-gradient(bottom, #BF0000, #C40000) !important;border-color:#990000 !important;}

/* orange theme */
.datetimepicker-orange {border:1px solid #F77701 !important;}
.datetimepicker-orange .days .titles{border-bottom: 1px solid #F77701 !important;}
.datetimepicker-orange .datetimepicker-header .previous:hover {border-color: transparent #F77701 transparent transparent !important;}
.datetimepicker-orange .datetimepicker-header .next:hover {border-color: transparent transparent transparent #F77701 !important;}
.datetimepicker-orange .days .today {background: #fcb16f !important;}
.datetimepicker-orange .days .selected {background: #F77701 !important;}
.datetimepicker-orange .months .today {background: #fcb16f !important;}
.datetimepicker-orange .months .selected {background: #F77701 !important;}
.datetimepicker-orange .years .today {background: #fcb16f !important;}
.datetimepicker-orange .years .selected {background: #F77701 !important;}
.datetimepicker-orange .time .ok {border-radius:2px !important; -moz-border-radius:2px !important; -webkit-border-radius:2px !important; -o-border-radius:2px !important; color:#ffffff !important;  background: -moz-linear-gradient(bottom, #D65203, #FF8000) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF8000', endColorstr='#D65203') !important; background-image: linear-gradient(to bottom,#FF8000,#D65203) !important; background: -webkit-gradient(linear,left bottom,left top, from(#D65203), to(#FF8000)) !important; background: -o-linear-gradient(bottom, #D65203, #FF8000) !important; border:1px solid #D65203 !important;}
.datetimepicker-orange .time .ok:hover {color:#ffffff !important;  background: -moz-linear-gradient(bottom, #FC6A12, #FF972F) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF972F', endColorstr='#FC6A12') !important; background-image: linear-gradient(to bottom,#FF972F,#FC6A12) !important; background: -webkit-gradient(linear,left bottom,left top, from(#FC6A12), to(#FF972F)) !important; background: -o-linear-gradient(bottom, #FC6A12, #FF972F) !important; border-color:#D65203 !important;}
.datetimepicker-orange .time .ok:active{color:#ffffff !important;  background: -moz-linear-gradient(bottom, #FC6A12, #FF8000) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF8000', endColorstr='#FC6A12') !important; background-image: linear-gradient(to bottom,#FF8000,#FC6A12) !important; background: -webkit-gradient(linear,left bottom,left top, from(#FC6A12), to(#FF8000)) !important; background: -o-linear-gradient(bottom, #FC6A12, #FF8000) !important; border-color:#D65203 !important;}

/* purple theme */
.datetimepicker-purple {border:1px solid #621779 !important;}
.datetimepicker-purple .days .titles{border-bottom: 1px solid #621779 !important;}
.datetimepicker-purple .datetimepicker-header .previous:hover {border-color: transparent #621779 transparent transparent !important;}
.datetimepicker-purple .datetimepicker-header .next:hover {border-color: transparent transparent transparent #621779 !important;}
.datetimepicker-purple .days .today {background: #E3C2EC !important;}
.datetimepicker-purple .days .selected {background: #621779 !important;}
.datetimepicker-purple .months .today {background: #E3C2EC !important;}
.datetimepicker-purple .months .selected {background: #621779 !important;}
.datetimepicker-purple .years .today {background: #E3C2EC !important;}
.datetimepicker-purple .years .selected {background: #621779 !important;}
.datetimepicker-purple .time .ok {border-radius:2px !important; -moz-border-radius:2px !important; -webkit-border-radius:2px !important; -o-border-radius:2px !important; color:#ffffff !important;  background: -moz-linear-gradient(bottom, #590059, #6F37A6) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6F37A6', endColorstr='#590059') !important; background-image: linear-gradient(to bottom,#6F37A6,#590059) !important; background: -webkit-gradient(linear,left bottom,left top, from(#590059), to(#6F37A6)) !important; background: -o-linear-gradient(bottom, #590059, #6F37A6) !important; border:1px solid #590059 !important;}
.datetimepicker-purple .time .ok:hover {color:#ffffff !important;  background: -moz-linear-gradient(bottom, #6A048C, #8345C0) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8345C0', endColorstr='#6A048C') !important; background-image: linear-gradient(to bottom,#8345C0,#6A048C) !important; background: -webkit-gradient(linear,left bottom,left top, from(#6A048C), to(#8345C0)) !important; background: -o-linear-gradient(bottom, #6A048C, #8345C0) !important; border-color:#590059 !important;}
.datetimepicker-purple .time .ok:active {color:#ffffff !important;  background: -moz-linear-gradient(bottom, #6A048C, #6F37A6) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6F37A6', endColorstr='#6A048C') !important; background-image: linear-gradient(to bottom,#6F37A6,#6A048C) !important; background: -webkit-gradient(linear,left bottom,left top, from(#6A048C), to(#6F37A6)) !important; background: -o-linear-gradient(bottom, #6A048C, #6F37A6) !important; border-color:#590059 !important;}



/* added by BC SOFTWARE */
.datetimepicker-overlay {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 987;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}