/* tipycal */
html {
    -webkit-text-size-adjust: 100%; /* отключает авто-увеличение шрифта на iOS/Android */
}

body{
    margin: 0;    
    padding: 0;
    font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
    background: #f6f7f9;


}

h1 {

}
.content{max-width:1200px;margin: auto;text-align: center;}

.left_block {float: left;width:50%;}
.right_block{float: right;width:50%;}

.clear {clear: both;}

ul{}

/* END tipycal */

/*  header  */

.header {
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
.title_box {float: left;}
.title_box h1 {    margin: 0 0 0 20px;font-size: 20px;color: #444;}


.menu_box {float:left;}
.login_box {float: right;}


/*  END header  */

/*  day select form */
.cal-filters {
    margin: 8px auto;
    display: flex  ;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 1130px;
}
/*  END day select form */

/*  calendar    */
.day {
    border-bottom: 1px solid #e5e7eb;
    margin: 0px auto;
    text-align: center;
    padding: 10px 8px;
    font-size: 12px;
    color: #374151;
    width: 1130px;
}

.row_calendar {
    min-width: 1130px;
}

.today {background: #cedcf3;}

.zone {font-size: 0;    display: inline-block;vertical-align: top;}
.zone:first-child .hour {height: initial;background: #e8e8e8;font-weight: bold;}
.zone .hour:first-child {background: #e8e8e8;font-weight: bold;}

/*  рядок  */
.zone:hover .hour{
    background: #d4d5d6;
}
/*  клітинка  */
.zone:hover .hour:hover {
    background: #cc7676;
    color: #fff;
}
/* стовпець */
.hour.col{background:#d4d5d6}
.zone:first-child .hour.col{background:#d4d5d6}

.hour {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 5px;
    border: 1px solid #fff;
    width: 90px;
    height: 40px;
    font-size: 13px;
    background: #ecf1f7;
}



.hour.booked.st-1 { background:#cfe9ff; }   /* Заплановано */
.hour.booked.st-2 { background:#bff5c3; }   /* Виконано */
.hour.booked.st-3 { background:#ffd7d7; color:#7a0000; } /* Скасовано */

.cal-legend{
    display:flex; gap:12px; align-items:center; justify-content:center;
    margin:8px auto 12px;width: 1130px;
}
.cal-legend .lg{
    display:inline-block; width:40px; height:12px; border-radius:3px;
    margin:0 6px 0 20px; vertical-align:middle; border:1px solid rgba(0,0,0,.15);
}

.lg-st1{ background:#cfe9ff; }  /* Заплановано  */
.lg-st2{ background:#bff5c3; }  /* Виконано     */
.lg-st3{ background:#ffd7d7; }  /* Скасовано    */

/*  END calendar    */

/*  modal   */
/* модалка по центру */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:1000}
.modal.is-open{display:flex}
.modal .panel{min-width:520px;max-width:90vw;background:#fff;border-radius:10px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);position: relative;}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.modal .row input,.modal .row select,.modal .row textarea{padding:8px;border:1px solid #ccc;border-radius:6px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end}
.btn{padding:8px 12px;border:1px solid #999;border-radius:6px;background:#f2f2f2;cursor:pointer;    color: #444;}
.btn.p{background:#2b7cff;color:#fff;border-color:#2b7cff}

.btn_close {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
}

.btn.danger{ background:#d9534f; color:#fff; }
/* базовый вид */
#modal .panel{ transition: background-color .15s ease; }

/* цвета как в календаре */
#modal .panel.st-1{ background:#cfe9ff; }  /* Заплановано  */
#modal .panel.st-2{ background:#bff5c3; }  /* Виконано     */
#modal .panel.st-3{ background:#ffd7d7; }  /* Скасовано    */

.field {
    position: relative;
    margin-bottom: 12px;
}
.field input, .field select, .field textarea {
    width: 100%;
    padding: 8px 6px;
    box-sizing: border-box;
}
.field label {
    position: absolute;
    left: 8px;
    top: 8px;
    color: #777;
    font-size: 14px;
    pointer-events: none;
    transition: 0.2s ease all;
}
.field select:focus + label,
.field input:focus + label,
.field textarea:focus + label,
.field select:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field input:not(:placeholder-shown) + label{
    top: -16px;
    left: 6px;
    font-size: 16px;
    color: #333;
    background: #c8f8ce;
    padding: 0px 3px;
    border-radius: 2px;
}

.modal textarea {height: 100px;}

    /*  END modal   */

/*  login-form   */
.login-form-header {display: inline-block;margin-right: 10px;    color: #444;}
.login-form form {display: inline-block;text-align: right;}

.login-form input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 4px;
}
/*  END login-form   */

/*====  MOBILE  =====*/


@media screen and (max-width: 800px){

}

@media screen and (max-width: 500px){

    .header {text-align: center;}
    .title_box {float: none;}
    .title_box h1 {margin: 20px;}
    .login_box {float: none;}
    .login-form form {text-align: center;}
    .login-form label {width: 100px;display: inline-block;}

}