@media print {
  .no-page-break {page-break-inside: avoid;}
}

body {
    padding: 10px;
    //border: 1px red solid;
}
pre {
    color: black !important;
}
#body {
    display: flex;
    flex-direction: column;
}
div {
    //border: 1px blue solid;
    border-radius: 10px;
}

/* HEADER */
#header {
    text-align: center;
    background-image: linear-gradient(rgb(157, 199, 231), rgb(116, 175, 221) 50%, rgb(55, 139, 206));
}
#header h1 {
    color: white;
}
#header a {
    text-decoration: none;
}
#header a:hover {
    text-decoration: none;
    background: red;
}
.header_info tr td {
    padding: 1px 8px;
    font-size: 12px;
    width: 440px;
}
/* input */
.input {
    width: 300px;
}
/* Top Menu */
#topmenu {
    //background-image: linear-gradient(rgb(157, 199, 231), rgb(116, 175, 221) 50%, rgb(55, 139, 206));
    width: auto;
    //height: 40px;
    padding: 10px 40px;
    //background: #417690;
    background: rgba(55, 139, 206,1);
    line-height: 40px;
    color: #ffc;
    overflow: hidden;
    margin: 5px;
}
#topmenu ul li {
    float: left;
    list-style-type: none;
    margin: 0px 10px;
    width: 100px;
    //height: 30px;
    //background: green;
    line-height: 30px;
    padding: 0px;
}
#topmenu a {
    color: white;
}

/* */
#content {
    padding: 20px;
}

.a_button {
    margin: 0px 10px;
    padding: 5px;
    font-size: 30px;
    line-height:40px;
    text-align: center;
    vertical-align:middle;
    border: 1px solid;
    border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
    border-radius: 6px;
    outline: none;
    background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
    box-shadow: inset rgba(255,255,255,.5) 1px 1px;
    //padding: .7em 0;
    //padding: 30px;
    //color: rgba(255,255,255,.9);
    color: white !important;
    text-shadow: #2e7ebd 0 1px 2px;
    text-decoration: none;
}

#buttons {
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
}

@media only screen and (max-width: 1200px) {
  .buttons_mini {
      //background: red;
      flex-direction: column;
  }
  .buttons_mini_block {
    width: 100%;
  }
  .buttons_mini_block a {
    width: 100%;
  }
}
.buttons_mini {
    display: flex;
    //justify-content: space-between;
    justify-content: space-around;
    align-items: center;
}
.buttons_mini_block {
    display: flex;
}
.text_small a {
    font-size: 21px !important;
}
.buttons_mini_block a {
    font-size: 30px;
    //height: 250px;
    line-height:100px;
    text-align: center;
    vertical-align:middle;
    border: 1px solid;
    border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
    border-radius: 6px;
    outline: none;
    background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
    box-shadow: inset rgba(255,255,255,.5) 1px 1px;
    //padding: .7em 0;
    padding: 30px;
    //color: rgba(255,255,255,.9);
    color: white !important;
    text-shadow: #2e7ebd 0 1px 2px;
    text-decoration: none;
    //width: 270px;
    width: 230px;
    margin: 10px 0px;
}

.buttons_mini_block a:hower {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}

.button {
    width: 250px;
    //height: 250px;
    line-height:250px;
    text-align: center;
    vertical-align:middle;
    border: 1px solid;
    border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
    border-radius: 6px;
    outline: none;
    background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
    box-shadow: inset rgba(255,255,255,.5) 1px 1px;
    padding: .7em 0;
    color: rgba(255,255,255,.9);
    text-shadow: #2e7ebd 0 1px 2px;
    text-decoration: none;
}

a.button:first-line{
  font-size: 170%;
  font-weight: 700;
}
a.button:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}
a.button:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#5796c8, #6aa2ce);
  box-shadow: none;
}
.button_mini {
    width: 50px;
    height: 12px;
    line-height: 10px;
}
.button_mini a {
    color: white !important;
}
#footer {
    display: flex;
    justify-content: space-between;
    border-top: 3px solid #eee;
    border-radius: 0px;
}
#links {
    width: 50%;
}
#contacts {
    width: 50%;
}


// Select date
//#ui-datepicker-div {
//  background: white;
//  border-color: red;
//}


.ui-datepicker {
    background: white;
}

/* Календарь */
#calendar_step2, #calendar_step1{
    display: none;
}
#calendar {
}
.user_select {
    width: 200px;
    padding: 10px;
}
.user_container {
}
.user_box {
    border: 1px solid;
    padding: 5px;
    margin: 10px 0px;
}
.show_cal {
    display: flex;
}
.cal {
    //width: 490px;
    //height: 375px;
    padding: 10px;
}
.cal_border {
    border: 1px solid black;
}
.client_calendar {
    //float: left;
    //position: absolute;
    display: none;
}
.client_calendar a {
    //padding: 15px;
}
.client_calendar tr, .client_calendar td {
    border: 2px solid black
}
.client_calendar tr td {
    //background: darkgrey;
    color: black;
    padding: 15px;
}
.calendar_time {
    z-index: 999999;
    //position: absolute;
    display: flex;
    left: 570px;
}

.pasttime {
    background: darkgrey;
    //text-decoration: line-through;
    color: bisque;
}
.today {
    background: green; 
    color: black;
}
.day_active {
    background: lavender; 
    color: black;
}
.futuretime {
    background: cyan;
    color: black;
}
.clean {
    background: darkgrey;
}
.columm {
    //height: 60px;
    display: flex;
}
.columm_days {
}
.days_name {
    display: flex;
    padding: 0px 0 20px 0;
    //color: bisque;
}
.days_name_0 {
    border: 1px solid black;
    height: 20px !important;
    line-height: 20px !important;
}
.days {
    //float: left;
}
.cell {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 0px 5px;
}
.flex-container {
    display: flex;
    //flex-wrap: wrap;
    //flex-direction: row;
    flex-direction: column;
}
.flex-block {
    padding: 15px;
    margin: 5px;
    text-align: center;
    //border: 1px solid black;
    //height: 17px;
    width: 60px;
}
.flex-block-line {
    display: flex;
}
.time_cell {
    border: 1px solid;
    width: 60px;
    padding: 5px;
    text-align: center;
    margin: 5px;
    //float: left;
}
.nofloat {
}

.noedit {
    pointer-events: none;
}

/* Description for forms */
.form_100 {
    //background: red;
}
.form_100 tr th label {
    font-size: 2vw;
    line-height: 3vw;
}
.phone {
}
.input:select {
    background: red;
}
.input, #id_appointment_date {
    font-size: 2vw;
    height: 100%;
    width: 98%;
}

#send_form_complite {
    font-size: 3vw;
    color: green;
}


/* Modular window */
#appointment_show_modular {
    display: none;
    position: fixed;
    border: 1px solid red;
    background: white;
    height: 200px;
    width: 500px;
    top: 35%;
    left: 30%;
}
.appointment_show_modular_menu {
    padding: 5px;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.appointment_show_modular_content {
    padding: 15px;
    border: 1px solid red;
    height: 69%;
}

.appointment_future {
    background: antiquewhite;
}
.appointment_last {
    background: aliceblue;
}
#appointment_list {
    height: 115px;
    overflow: overlay;
}

.weekend {
    background: green;
}
.othermonth {
    background: yellow;
}

#search_hold {
    display: none;
    text-align: center;
    width: 82px;
    //background: red;
    text-align: center;
    padding: 22px;
    position: absolute;
    left: 300px;
    top: 100px;
}

.topmenu ul li {
    float: left;
    list-style-type: none;
    margin: 0px 10px;
    //width: 100px;
    //height: 30px;
    //background: green;
    line-height: 30px;
    //padding: 0px;
}
.topmenu a {
    background: yellow;
    //color: white !important;
    border: 1px solid;
    border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
    border-radius: 6px;
    padding: 5px;
}
.topmenu a:hover {
    background: white;
}

.price {
    text-align: right;
    //vertical-align: middle;
}
.services tr td {
    vertical-align: middle;
}

#price_code {
    position:absolute;
    top: 150px;
    right: 10px;
}
#cost_code {
    position:absolute;
    //left: 300px;
    top: 350px;
    right: 10px;
}
.selected {
    background: green;
    color: white;
    font-size: 24px;
}