/*** FONTS ***/
@font-face {
    font-family: 'Kaushan Script';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/kaushan-script-latin-regular.eot');
    src: local('Kaushan Script'), local('KaushanScript-Regular'),
        url('../fonts/kaushan-script-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/kaushan-script-latin-regular.woff2') format('woff2'),
        url('../fonts/kaushan-script-latin-regular.woff') format('woff'),
        url('../fonts/kaushan-script-latin-regular.ttf') format('truetype'),
        url('../fonts/kaushan-script-latin-regular.svg#KaushanScript') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/roboto-latin-100.eot');
    src: local('Roboto Thin'), local('Roboto-Thin'),
        url('../fonts/roboto-latin-100.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-100.woff2') format('woff2'),
        url('../fonts/roboto-latin-100.woff') format('woff'),
        url('../fonts/roboto-latin-100.ttf') format('truetype'),
        url('../fonts/roboto-latin-100.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/roboto-latin-100italic.eot');
    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
        url('../fonts/roboto-latin-100italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-100italic.woff2') format('woff2'),
        url('../fonts/roboto-latin-100italic.woff') format('woff'),
        url('../fonts/roboto-latin-100italic.ttf') format('truetype'),
        url('../fonts/roboto-latin-100italic.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-latin-300.eot');
    src: local('Roboto Light'), local('Roboto-Light'),
        url('../fonts/roboto-latin-300.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-300.woff2') format('woff2'),
        url('../fonts/roboto-latin-300.woff') format('woff'),
        url('../fonts/roboto-latin-300.ttf') format('truetype'),
        url('../fonts/roboto-latin-300.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/roboto-latin-300italic.eot');
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
        url('../fonts/roboto-latin-300italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-300italic.woff2') format('woff2'),
        url('../fonts/roboto-latin-300italic.woff') format('woff'),
        url('../fonts/roboto-latin-300italic.ttf') format('truetype'),
        url('../fonts/roboto-latin-300italic.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-latin-regular.eot');
    src: local('Roboto'), local('Roboto-Regular'),
        url('../fonts/roboto-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-regular.woff2') format('woff2'),
        url('../fonts/roboto-latin-regular.woff') format('woff'),
        url('../fonts/roboto-latin-regular.ttf') format('truetype'),
        url('../fonts/roboto-latin-regular.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/roboto-latin-italic.eot');
    src: local('Roboto Italic'), local('Roboto-Italic'),
        url('../fonts/roboto-latin-italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-italic.woff2') format('woff2'),
        url('../fonts/roboto-latin-italic.woff') format('woff'),
        url('../fonts/roboto-latin-italic.ttf') format('truetype'),
        url('../fonts/roboto-latin-italic.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-latin-500.eot');
    src: local('Roboto Medium'), local('Roboto-Medium'),
        url('../fonts/roboto-latin-500.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-500.woff2') format('woff2'),
        url('../fonts/roboto-latin-500.woff') format('woff'),
        url('../fonts/roboto-latin-500.ttf') format('truetype'),
        url('../fonts/roboto-latin-500.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/roboto-latin-500italic.eot');
    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
        url('../fonts/roboto-latin-500italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-500italic.woff2') format('woff2'),
        url('../fonts/roboto-latin-500italic.woff') format('woff'),
        url('../fonts/roboto-latin-500italic.ttf') format('truetype'),
        url('../fonts/roboto-latin-500italic.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-latin-700.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'),
        url('../fonts/roboto-latin-700.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-700.woff2') format('woff2'),
        url('../fonts/roboto-latin-700.woff') format('woff'),
        url('../fonts/roboto-latin-700.ttf') format('truetype'),
        url('../fonts/roboto-latin-700.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/roboto-latin-700italic.eot');
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
        url('../fonts/roboto-latin-700italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-700italic.woff2') format('woff2'),
        url('../fonts/roboto-latin-700italic.woff') format('woff'),
        url('../fonts/roboto-latin-700italic.ttf') format('truetype'),
        url('../fonts/roboto-latin-700italic.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-latin-900.eot');
    src: local('Roboto Black'), local('Roboto-Black'),
        url('../fonts/roboto-latin-900.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-900.woff2') format('woff2'),
        url('../fonts/roboto-latin-900.woff') format('woff'),
        url('../fonts/roboto-latin-900.ttf') format('truetype'),
        url('../fonts/roboto-latin-900.svg#Roboto') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/roboto-latin-900italic.eot');
    src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
        url('../fonts/roboto-latin-900italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/roboto-latin-900italic.woff2') format('woff2'),
        url('../fonts/roboto-latin-900italic.woff') format('woff'),
        url('../fonts/roboto-latin-900italic.ttf') format('truetype'),
        url('../fonts/roboto-latin-900italic.svg#Roboto') format('svg');
}

/*** VARIABLES ***/
:root {
    --color-white: #FFFFFF;
    --color-black: #272727;
    --color-blue: #2C3E50;
    --color-green: #A0E0A4;
    --color-lightgreen: #C0E2C2;
    --color-orange: #E4C090;
    --color-lightorange: #ECD4B4;
    --color-red: #EAA1A2;
    --color-lightred: #ECB4B5;
}

/*** ALL ***/
* {
    outline: none;
    box-sizing: border-box;
}

/*** BODY ***/
body {
    margin: 0;
    padding: 0;
    font: 16px/120% 'Roboto', Arial, sans-serif;
    font-weight: 400;
    color: var(--color-black);
}
h1 {
    font-size: 24px;
}

/*** WRAPPER ***/
#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative;
}

/*** CALENDAR ***/
.calendar {
    position: relative;
}
.calendar .calendar_navigation {
    height: 30px;
    margin: 15px 0;
}
.calendar .calendar_navigation .navbutton {
    padding: 5px 15px;
    background-color: var(--color-blue);
    color: var(--color-white);
    text-decoration: none;
}
.calendar .calendar_navigation .navbutton.prev {
    float: left;
}
.calendar .calendar_navigation .navbutton.next {
    float: right;
}
.calendar table {
    width: 100%;
    clear: both;
    border: 1px solid;
    border-collapse: collapse;
}
.calendar table td {
    border: 1px solid;
    border-collapse: collapse;
    text-align: center;
}
.calendar td.free {
    background-color: var(--color-lightgreen);
}
.calendar td.free:hover {
    background-color: var(--color-green);
}
.calendar td.reserved {
    background-color: var(--color-lightorange);
}
.calendar td.reserved:hover {
    background-color: var(--color-orange);
}
.calendar td.unavailable {
    background-color: var(--color-lightred);
}
.calendar td.unavailable:hover {
    background-color: var(--color-red);
}
.calendar td.free i.las {
    position: relative;
    top: 1px;
    font-size: 20px;
}
.calendar td.free a {
    padding: 10px 0;
    display: inline-block;
    color: var(--color-black);
    text-decoration: none;
}

/*** WIDGETS ***/
.widget {
    width: 300px;
    position: relative;
}
.widget-text {
    position: relative;
}
.widget-text .text {
    width: 100%;
    margin: 0 0 15px;
    padding: 10px 15px;
    position: relative;
    display: block;
    background-color: transparent;
    border: 1px solid var(--color-black);
    font: inherit;
    z-index: 0;
}
.widget-text .label {
    width: auto;
    padding: 0 8px;
    position: absolute;
    bottom: 10px;
    left: 8px;
    background-color: transparent;
    color: #5f6368;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: bottom left;
    -webkit-transition: transform .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);
            transition: transform .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}
.widget-text .text:not([disabled]):focus ~ .label, 
.widget-text .text.filled ~ .label {
    background-color: var(--color-white);
    -webkit-transform: scale(0.75) translateY(-30px);
       -moz-transform: scale(0.75) translateY(-30px);
        -ms-transform: scale(0.75) translateY(-30px);
         -o-transform: scale(0.75) translateY(-30px);
            transform: scale(0.75) translateY(-30px);
}
.widget-submit {
    position: relative;
}
.widget-submit .submit {
    width: 100%;
    margin: 15px 0 0;
    padding: 10px 15px;
    background-color: var(--color-blue);
    border: 1px solid var(--color-blue);
    color: var(--color-white);
    font-size: inherit;
    cursor: pointer;
}
.widget-backlink .backlink {
    width: 100%;
    margin: 20px 0 0;
    padding: 10px 15px;
    display: inline-block;
    background-color: var(--color-blue);
    border: 1px solid var(--color-blue);
    color: var(--color-white);
    font-size: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width: ) {
    
}