﻿.cursorily{ cursor: pointer;}
.hov:hover{ color: #000;}
.ico-size{font-size: 16px;}
.ico-size-month{font-size: 26px!important; line-height: 26px!important;}
.ico-size-large{ font-size: 40px!important; line-height: 30px;}
.dtp_main{ border: solid 1px #eee; border-radius: 3px; background-color: #fff; padding: 12px 0 12px 8px;}
.dtp_main span, .dtp_main i{ display: inline-block; padding-right: 8px;}
.dtp_modal-win{position: fixed;left: 0; top: 0; width: 100%; height: 100%;
    z-index: 999; background-color: #eeeeee; opacity: 0.6;}
.dtp_modal-content{ background-color: #fff; border-radius: 10px; width: 513px;
    position: absolute; z-index: 1000; top: 100px; left:50px; font-size: 16px;font-weight: normal;}
.dtp_modal-content-no-time{ background-color: #fff; border-radius: 10px; width: 312px;
    position: absolute; z-index: 1000; top: 100px; left: 100px; font-size: 16px;font-weight: normal;}
.dtp_modal-title{ border-bottom: solid 3px #f10d12; padding: 16px 36px; margin-bottom: 16px;  font-size: 22px; background-color: #000; color: #fff;  }
.dtp_modal-cell-date{ width: 312px;  float: right; margin-bottom: 22px; margin-top: 6px;}
.dtp_modal-cell-time{width: 200px; float: left; direction: ltr; border-right: solid 1px #000;}
.dtp_modal-months{ color: #7d7d7d; text-align: center; font-size: 20px; padding: 0 20px;}
.dtp_modal-months span{ display: inline-block; padding: 10px 20px; width: 182px;}
.dtp_modal-calendar{ width: 266px; margin-left: 22px; }
.dtp_modal-calendar-cell{ width: 38px; padding: 7px 0; display: inline-block; text-align: center;}
.dtp_modal-colored{
    color: #fff;
    background-color: #f20e13;
    text-shadow: 1px 1px #000000;

}
.dtp_modal-grey{ color: #7d7d7d; }
.dtp_modal-cell-selected{ background-color: #f10d12; border-radius: 48%;  transition: background-color 1s ease-out;}
.dtp_modal-time-block{ height: 212px; }
.dpt_modal-button{ background-color: #f10d12; color: #fff; font-size: 24px; padding: 8px 40px; float: left;
    text-align: center; display: inline-block; margin-left: 22px; cursor: pointer; border: solid 1px #fff;
border-radius: 3px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.dtp_modal-time-line{ text-align: left; color: #7d7d7d; font-size: 20px; padding-top: 15px; margin-left: 15px;  }
.dtp_modal-time-mechanic{ padding-top: 16px;}
.dtp_modal-append{ color: #7d7d7d; padding-left: 108px; font-weight: normal; }
.dtp_modal-midle{ display: inline-block; width: 40px; }
.dtp_modal-midle-dig{display: inline-block; width: 16px; text-align: center; }
.dtp_modal-digits{ font-size: 50px; padding-left: 96px;}
.dtp_modal-digit{  }


.dtp_modal-custom-time {
    padding:10px;
    max-width: 140px;
    margin: 5px 15px;
 background-color: #000;
    color: #fff;
}

.dtp_modal-custom-time .headline8 {
    text-align: center;
    font-weight: bold;
    display: block;
    font-size: 18px;
    color: #fff;
}

.dtp_modal-custom-time .custom_times {
    background-color: #000;
    padding:10px;
    margin: 0px;
    height: 80px;
    overflow-y: scroll;
    margin-top: 15px;
    color: #fff;
    margin-bottom: 5px;
}

.dtp_modal-custom-time .custom_times span {
    display: block;
    padding:2px;
    margin: 2px;
    text-align: center;
}

.dtp_modal-custom-time .custom_times span:hover {
    color: #FF0000;
    cursor: pointer;
}

.dtp_modal-custom-time .custom_times span.selected {
    color: #FF0000;
    text-decoration: underline;
}

#d-hh,#d-mm {
    background-color: #FFFACD;
    padding:2px;
    margin: 2px;
    display: none;
}



@media only screen and (max-width: 600px) {


.dtp_modal-content {
    left: 5px!important;
width: 95%;

}

    .dtp_modal-cell-date{ width: 330px;  float: none; margin-bottom: 22px; margin-top: 6px; clear: both;}
   .dtp_modal-cell-time{float: none; direction: ltr; border-right: none; clear: both; position: relative; width: 300px;  height:250px;}

.dtp_modal-time-block {
    float: left;
    width: 160px;
}

.dpt_modal-button {
    float: left;
    width: 60px;
    display: block;
    position: relative;
    padding: 4px 15px;
    margin-top: 100px;
}
.dpt_modal-button::after {
 content:" ";
 clear: both;
}

}










