:root {
    /*  --color-0: #4169E1;
    --color-1: #6583FF;
    --color-2: #869EFF;
    --color-3: #A6BAFF;
    --color-4: #C6D7FF;*/
    --color-0: #f8f9fa;
    --color-1: #0072C6;
    --color-2: #0072c6c4;
    --color-3: #0052a0;
    --color-4: #C6D7FF;
    /* !! Both value must be equal !! */
    --event-width: 13; /* Value for offset calculation */
    --event-width-real: 13%; /* Actual width appliead to the events */
    --RG-1: #ffcccc;
    --RG-2: #ffffcc;
    --RG-3: #ccffcc;
    --RG-4: black;
    --RG-5: red;

    --RGT-1: black;
    --RGT-2: black;
    --RGT-3: black;
    --RGT-4: white;
    --RGT-5: black;

    --order-0: 13%;
    --order-1: 26%;
    --order-2: 39%;
    --order-3: 52%;
    --order-4: 65%;
}


* {
    transition: 0.3s;
}

input:disabled, select:disabled {
    background-color: lightgrey !important;
    opacity: 0.3;
}

body {
    background-color: #FFFFFF; /* #C6D7FF;*/
}

#calendar-viewport {
    width: 100%;
}

#calendar-container {
    width: 100%;
}

#calendar-controls {
    position: relative;
    width: 100%;
    height: 0px;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-4);
    z-index: 1;
}

.container {
    max-width: 1400px;
}

#calendar-controls .left {
    position: relative;
    right: 50px;
    top: 5px;
    float: left;
    width: 50px;
    height: 40px;
    border-radius: 0;
    /* background-color: var(--color-1);  */
    /* border-color: var(--color-1);  */
}

    #calendar-controls .left::before {
        content: "<";
        color: var(--color-4);
        font-size: 40px;
        line-height: 20px;
        font-weight: bold;
    }



#calendar-controls .right {
    position: relative;
    left: 80px;
    top: 5px;
    float: right;
    width: 50px;
    height: 40px;
    border-radius: 0;
}

    #calendar-controls .right::after {
        content: ">";
        color: var(--color-4);
        font-size: 40px;
        line-height: 20px;
        font-weight: bold;
    }

#calendar-event-form {
    /*position: fixed;*/
    height: 100%;
    width: 252px;
    display: inline-block;
    right: 0px;
    top: 50px;
    padding: 25px;
    border-left: 2px var(--color-1) solid;
    background-color: var(--color-0);
}

    #calendar-event-form h2.calendar-event-form-title {
        background-color: var(--color-1);
        color: var(--color-4);
        display: block;
        margin: 0px;
        margin-left: -25px;
        margin-right: -25px;
        padding: 5px;
        height: 40px;
        line-height: 30px;
        font-size: 25px;
        text-transform: uppercase;
        text-align: center;
    }

    #calendar-event-form label, .editor-label {
        color: var(--color-3);
        display: block;
        width: 200px;
        margin: 0px;
        margin-left: 5px;
    }

    #calendar-event-form input, #calendar-event-form select, #calendar-event-form textarea, .editor-input {
        border: var(--color-1) 1px solid;
    }

    #calendar-event-form textarea, textarea.editor-input {
        resize: none;
        height: 100px;
    }

/*#calendar-event-form button {
        background-color: blue;
        color: white;
        display: block;
        border-radius: 10px;
        margin: 0px;
        padding: 5px;
        width: 200px;
        height: 40px;
        line-height: 30px;
        font-size: 20px;
    }*/

.calendar-month {
    width: 100%;
    vertical-align: top;
    display: inline-block;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Likely future */
    padding: 5px;
}

.calendar-month-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-4);
    /*border-radius: 10px;*/
}

.calendar-month .calendar-month-title {
    background-color: var(--color-1);
}


.calendar-month-day-list {
    counter-reset: li;
    width: 100%;
    height: 630px;
    list-style-type: none; /*decimal-leading-zero;*/
    font-weight: bolder;
    background-color: #f8f9fa; /*ghostwhite;*/
    padding: 0px;
    /*margin: 8px;
    margin-right: 8px;*/
    /*border-left: black 1px solid;
    border-right: black 1px solid;*/
    border-left: 1px var(--color-1) solid;
    border-right: 1px var(--color-0) solid;
    /*border-bottom: #555 1px solid;
    border-top: 2px #AAA solid;
    border-radius: 10px;*/
    /*border-bottom-right-radius: 10px;*/
}

/*.calendar-month-day-list:hover {
        background-color: lightblue;
    }*/

.calendar-month-day {
    height: 20px;
    line-height: 20px;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

    .calendar-month-day::after {
        content: '.'counter(li);
        color: var(--color-2);
        display: inline-block;
        width: 0px;
        margin-left: 10px;
        text-align: right;
        font-size: 12px;
    }

    .calendar-month-day::before {
        color: var(--color-3);
        display: inline-block;
        width: 0px;
        margin-left: 15px;
        text-align: right;
        font-size: 12px;
        font-family: 'Courier New';
    }

    .calendar-month-day.Mon::before {
        content: "L";
    }

    .calendar-month-day.Tue::before {
        content: "M";
    }

    .calendar-month-day.Wed::before {
        content: "M";
    }

    .calendar-month-day.Thu::before {
        content: "J";
    }

    .calendar-month-day.Fri::before {
        content: "V";
    }

    .calendar-month-day.Sat::before {
        content: "S";
    }

    .calendar-month-day.Sun::before {
        content: "D";
    }

    .calendar-month-day.Sun {
        background-color: var(--color-4);
        border-bottom: 1px var(--color-1) solid;
    }

.calendar-regular-break {
    margin-top: 3px;
    margin-left: -15px;
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 14px;
    background-color: var(--color-2);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


@keyframes alertblinkred {
    from {
        background-color: yellow;
    }

    to {
        background-color: red;
    }
}

@keyframes alertblinkorange {
    from {
        background-color: yellow;
    }

    to {
        background-color: orange;
    }
}


.error-events-2 {
    background-color: orange;
    animation-name: alertblinkorange;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.error-events-0, .error-events-1 {
    background-color: red;
    animation-name: alertblinkred;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.error-events {
    background-color: red !important;
}

.calendar-month-day {
    counter-increment: li;
}

.calendar-month-day-background {
    /* border-radius: 15px/7px;*/
    background-color: none;
    border-bottom: 1px #ffffff solid;
}

    .calendar-month-day-background:hover {
        /*background-color: #DDDDDD;*/
    }

.calendar-month-day-events {
    position: absolute;
    overflow: visible;
    float: left;
    width: 80%;
    height: 20px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    padding-left: 30px;
}

.calendar-new-event-anchor {
    height: 20px;
    width: 20px;
    float: right;
    display: inline-block;
    opacity: 0.1;
    cursor: grab;
    width: 15%;
    padding: 0px;
    margin: 0px;
}

    .calendar-new-event-anchor:hover {
        opacity: 1;
    }

.calendar-event {
    vertical-align: top;
    position: absolute;
    height: 20px;
    width: var(--event-width-real);
    padding: 0px;
    margin: 0px;
    opacity: 0.6;
    z-index: 1;
    overflow: hidden;
}

    .calendar-event.break {
        opacity: 0.2;
        z-index: 10;
        border: 1px solid black;
    }

.calender-event-text {
    display: inline-block;
    overflow: hidden;
    writing-mode: vertical-lr;
    text-orientation: sideways-left;
    margin: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0px;
    font-size: 0.7em;
    width: 100%;
    height: 100%;
}

.calendar-available {
    vertical-align: top;
    float: right;
    height: 14px;
    width: 14px;
    margin: 3px;
    margin-left: 0px;
    /* opacity: 0.6; */
    z-index: 1;
    border-radius: 7px;
}

    .calendar-available.present {
        /* border: solid black 1px; */
        opacity: 1;
    }

    .calendar-available.astreinte {
        /* border: solid #FF4350 1px; */
        opacity: 0.4;
    }

.event-hover, .calendar-event.break:hover {
    opacity: 1;
    border-left: 1px var(--color-1) solid;
    border-right: 1px var(--color-2) solid;
}

    .event-hover .calender-event-text {
        font-size: 0em;
        width: 50%;
    }

.calendar-event.start {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: none;
}

.calendar-event.end {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
}

/*.calendar-event-dot {
    border-radius: 5px;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 3px;
    background-color: #555;
}

.hover .calendar-event-dot {
    background-color: #000;
}

.calendar-event-dot.start {
    top: 5px;
}

.calendar-event-dot.end {
    bottom: 5px;
}*/