:root {
    --cl-black: #000000;
    --cl-white: #ffffff;

    --cl-text-base: #000000;

    --cl-orange: #FAb374;
    --cl-orange-dark: #FA7C18;

    --cl-blue-dark: #2941FA;

    --cl-green-light: #ddf5dd;
    --cl-green: #BBF496;
    --cl-green-hover: #ddf5dd;

    --cl-grey-light: #eaeaea; 
    --cl-grey: #TODO;
    --cl-grey-neutral: #TODO;

    --cl-table-border: #TODO;

    --cl-shadow: #TODO;

    --cl-red: #ff1111;
    --cl-red-dark: #FA2F19;
    --cl-red-light: #f5dddd;
    --cl-red-hover: #ff6666;
    --cl-red-background: #ff9999;
}

body { font-family: "Open Sans", sans-serif; font-weight: 400; direction: ltr; font-size: 1rem; -webkit-font-smoothing: antialiased; margin: 0; background: var(--cl-grey-light); color: var(--cl-text-base); }
body.locked { background: #eaeaea; }

h1, h2, h3, h4, h5, h6 { box-sizing: border-box; font-family: "Open Sans", sans-serif; font-weight: 700; color: var(--cl-text-base); padding: 0; margin: 0 0 2rem 0; }
h1, h1 a { font-size: 2.75rem; line-height: 2.75rem; }
h2, h2 a { font-size: 1.75rem; line-height: 2.25rem; }
h3, h3 a { font-size: 1.25rem; line-height: 1.75rem; }

p, span, div, section, button, form, input, a { box-sizing: border-box; font-family: "Open Sans", sans-serif; color: var(--cl-text-base); }
p { margin-bottom: 30px; overflow-wrap: anywhere; }

a { font-weight: 400; cursor: pointer; transition: color 0.2s ease; color: var(--cl-text-base); text-decoration: underline; -webkit-tap-highlight-color:  transparent; }
a:hover { color: var(--cl-orange-main); text-decoration: none; }

img { display: block; max-width: 100%; height: auto; border: 0; }
form { padding: 0; margin: 0; }
input, textarea, select { font-family: "Open Sans", sans-serif; font-size: 1rem; line-height: 1.75rem; font-weight: 400; box-sizing: border-box; outline: 0; }

button { font-family: "Open Sans", sans-serif; font-size: 1rem; line-height: 1.75rem; font-weight: 400; box-sizing: border-box; outline: 0; padding: 4px 15px; background: var(--cl-white); border: 1px solid var(--cl-black); cursor: pointer; }
button:hover { background: var(--cl-red-light); }
button.submit { background: var(--cl-green); font-weight: 700; padding: 10px 20px; }
button.submit:hover { background: var(--cl-green-hover); }
button.delete { background: var(--cl-red-light); font-weight: 700; padding: 10px 20px; }
button.delete:hover { background: var(--cl-red-hover); }

.overflowX { overflow-x: auto; }
.fixed_screen { overflow: hidden; }
.hidden { display: none; }

.offset { margin-bottom: 1em; }
.offset2 { margin-bottom: 2em; }
.offset3 { margin-bottom: 3em; }
.offset4 { margin-bottom: 4em; }

.container { box-sizing: content-box; position: relative; margin: 3rem auto; max-width: 82rem; text-align: center; padding: 0 20px;}

.progress_bar { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #00000099; z-index: 1000; }

.kotatko { display: inline-block; position: relative; text-align: center; margin: 50px auto; }
.kotatko img {}

@media screen and (min-width: 1024px) {
}

/* ******************************************************************* Dialog */

.dialog__cover {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    z-index: 1100;
    overflow-x: hidden;
    overflow-y: auto;
}

.dialog__content {
    position: relative;
    background: var(--cl-white);
    box-shadow: 0 1px 15px rgba(0,0,0,.75);
    border-radius: 4px;
    max-width: 400px;
    display: block;
    margin: 30px auto;
    padding: 30px 20px 50px;
    text-align: center;
}

.dialog_headline { display: block; text-align: center; padding: 0 50px; }

.dialog__cancel { position: absolute; right: 0; top: 0; width: 40px; height: 40px; display: block;text-align: center; font-size: 30px; line-height: 35px; background: var(--cl-red-light); border-top-right-radius: 4px; cursor: pointer; transition: all 0.2s ease;}
.dialog__cancel:hover { background: var(--cl-red-hover); }

.item_label { margin: 0 0 2px; }
.item_value { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0 0 15px; }
.item_value select { padding: 8px 10px; border: 2px solid var(--cl-black); font-weight: 700; margin: 3px 0 0; }
.item_value select option { display: block; position: relative; padding: 8px 10px; font-weight: 400; }
.item_button { margin: 40px 0 0;}
.item_button button { margin: 0 10px;}

@media screen and (min-width: 1024px) {
}

/* ******************************************************************* Menu */

@media screen and (min-width: 1024px) {
}

/* ******************************************************************* Kalendář */

.header {text-align: center; padding: 0 20px 0 20px;}
.h1-actual { color: var(--cl-orange-dark); font-weight: 900; }
.h1-prev { color: var(--cl-red-dark); }
.h1-past { color: var(--cl-red-dark); font-weight: 500; }
.h1-next { color: var(--cl-blue-dark); font-weight: 900; }
.h1-next_2 { color: var(--cl-blue-dark); font-weight: 700; }
.h1-future { color: var(--cl-blue-dark); font-weight: 500; }

.office_name { font-size: 1.125rem; line-height: 1.75rem; margin: 0 0 10px; }
.calendar__week { }
.calendar__week a { display: block; font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; }
.calendar__week span { display: block; margin: 10px 10px; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }

.calendar__wrap { overflow: hidden;}
.calendar { display: grid; grid-template-columns: 73px 3fr 3fr 3fr 3fr 3fr 1fr 1fr; gap: 3px; margin: 0 0 15px; background: var(--cl-white); padding: 30px 40px 50px; border-radius: 10px; overflow-x: auto; }

.calendar__header { font-weight: 700; padding: 8px 5px } 
.calendar__header-today { font-weight: 700; background: var(--cl-orange); } 
.calendar__header-weekend { font-size: 12px; } 
.calendar__header__day { display: block; font-weight: 700; margin-bottom: 2px; } 
.calendar__header__date { display: block; font-weight: 500;}

.calendar__stul { position: relative; padding: 12px 5px; font-weight: 500; text-align: left; }
.calendar__stul-mega:before { content: '\2191'; position: absolute; left: -10px; top: 9px; font-weight: 900;}
.calendar__slot { padding: 12px 5px; font-size: 0.9375rem; min-width: 198px; }
.calendar__slot-occupated { background: var(--cl-red-light); }
.calendar__slot-free { background: var(--cl-green-light); }
.calendar__slot-own { background: var(--cl-red-background);}
.calendar__slot-weekend { min-width: unset; background: var(--cl-grey-light); }

.calendar__slot__name { font-weight: 600; }

.calendar__slot__delete { cursor: pointer; }
.calendar__slot__delete:hover { text-decoration: underline;  }

.calendar__slot__create { cursor: pointer; text-decoration: underline; }
.calendar__slot__create:hover { text-decoration: none; }

.calendar__room { grid-column: 1 / 9; padding: 30px 0 15px; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }

.item_error__message { display: block; margin: 10px auto; font-weight: 700; color: var(--cl-red); }
.item_error__link { display: block; text-decoration: underline; cursor: pointer; }
.item_error__link:hover { text-decoration: none; }

.calendar_footer { margin: 50px 0 50px; padding: 0 10px }
.calendar_footer__left { text-align: center; margin: 0 0 30px }
.calendar_footer__right { text-align: center; }

.planek__wrap { display: block; text-align: center; margin: 0 0 60px;}
.planek__wrap > img { display: block; text-align: center; margin: 0 auto; }

@media screen and (min-width: 1024px) {
    .calendar__week a { display: inline-block; }
    .calendar__week span { display: inline-block; margin: 0 10px; }

    .calendar_footer { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 50px; padding: 0 10px }
    .calendar_footer__left { text-align: left; margin: 0; }
    .calendar_footer__right { text-align: right; }
}


/* ******************************************************************* Patička */

@media screen and (min-width: 1024px) {
}