﻿/*#region variables */
:root {
    --ioMainBlue: #2d85ab;
    --ioMainBorderBlue: #28789A;
    --ioShadowBlue: #2d85ab4D;
    --ioHoverBlue: #277394;
    --ioHoverBorderBlue: #277394;
    --ioActiveBlue: #205e79;
    --ioActiveBorderBlue: #1C546C;
    --white: #ffffff;
    --ioDanger: #b22222;
    --ioDangerActive: #A11F1F;
    --ioDangerHover: #A92D2D;
    --ioMarginBaseValue: 1.2em;
}


/*#endregion */


#detailResumee {
    padding: 5px;
}
.login-widget{
    direction: ltr !important;
}

.mtn-9 {
    margin-top: -2.31rem !important;
}
.pt-7{
    padding-top: 2.038rem !important;
}
.chronostop {
    background-image: linear-gradient(to bottom, rgba(255, 128, 128, 1) 0%, rgba(255, 128, 128, 1) 100%), linear-gradient(to bottom, rgba(255, 128, 128, 1) 0%, rgba(255, 128, 128, 1) 100%);
    background-clip: content-box, padding-box;
    color: #FFFFFF;
    font-size: 20px;
}

.chronoplay {
    background-image: linear-gradient(to bottom, rgba(191, 255, 128, 1) 0%, rgba(191, 255, 128, 1) 100%), linear-gradient(to bottom, rgba(191, 255, 128, 1) 0%, rgba(191, 255, 128, 1) 100%);
    background-clip: content-box, padding-box;
    color: #000000;
    font-size: 20px;
}

.chronoplayList {
    background-image: linear-gradient(to bottom, rgba(191, 255, 128, 1) 0%, rgba(191, 255, 128, 1) 100%), linear-gradient(to bottom, rgba(191, 255, 128, 1) 0%, rgba(191, 255, 128, 1) 100%);
    background-clip: content-box, padding-box;
    color: #000000;
}

#iconsView {
    min-height: 50px;
}

.date_button {
    width: 100%;
    height: 35px;
    background-color: #2282AA !important;
    border-color: #2282AA !important;
    box-shadow: inset 0 0 0 10px #2282AA !important;
}
    .date_button:hover {
        background-color: #226e90 !important;
        border-color: #226e90 !important;
        box-shadow: inset 0 0 0 10px #226e90 !important;
    }
    .date_button:active {
        background-color: #215b76 !important;
        border-color: #215b76 !important;
        box-shadow: inset 0 0 0 10px #215b76 !important;
    }
    /*#region Form buttons*/
    .io-checkbox:checked{
        background-color: var(--ioMainBlue) !important;
        border-color: var(--ioMainBorderBlue) !important;
    }
    .io-checkbox:focus{
        box-shadow: 0 0 0 2px var(--ioFocusBlue)!important;
    }
    .io-btn-primary {
        background-color: var(--ioMainBlue) !important;
        border-color: var(--ioMainBorderBlue) !important;
        color: var(--white)!important;        
    }
        .io-btn-primary:hover {
            background-color: var(--ioHoverBlue) !important;
            border-color: var(--ioHoverBorderBlue) !important;
        }
        .io-btn-primary:active{
            background-color: var(--ioActiveBlue) !important;
            border-color: var(--ioActiveBorderBlue) !important;
        }

    .io-btn-outline-danger{
        border-color: var(--ioDanger) !important;
        color: var(--ioDanger)!important;        
    }
        .io-btn-outline-danger:hover{
            background-color: var(--ioDanger)!important;
            color: var(--white) !important;
            border-color: var(--ioDanger)!important;
        }
        .io-btn-outline-danger:active{
            background-color: var(--ioDangerActive)!important;
            color: var(--white) !important;
            border-color: var(--ioDangerActive) !important;
        }
    .io-btn-danger{
        background-color: var(--ioDanger) !important;
        border-color: var(--ioDanger) !important;
        color: var(--white) !important;
    }
    .io-btn-danger:hover{
        background-color: var(--ioDangerHover)!important;
        border-color: var(--ioDangerHover) !important;
    }
    .io-btn-danger:active{
        background-color: var(--ioDangerActive) !important;
        border-color: var(--ioDangerActive) !important;
    }
    /*#endregion*/
/*#region Margins and Paddings*/
.io-mt-0-5 {
    margin-top: calc(0.5 * var(--ioMarginBaseValue));
}
.io-mt-1{
    margin-top: calc(1 * var(--ioMarginBaseValue));
}
.io-mt-2{
    margin-top: calc(2 * var(--ioMarginBaseValue));
}
.io-mb-1{
    margin-bottom: calc(1 * var(--ioMarginBaseValue));
}
.io-mb-2{
    margin-bottom: calc(2 * var(--ioMarginBaseValue));
}
/*#endregion */
/*#region Borders */
.io-dev-border-top{
    border-top:1px solid black;
}
.io-dev-border-bottom{
    border-bottom: 1px solid black;
}

/*#endregion */
/*#region attachement */
.attachment-image{
    width:100%;
}
/*#endregion */
/*#region Kendo Dialog*/
.k-dialog-titlebar {
    background-color: var(--ioDanger) !important;
}
/*#endregion */
/* .slideThree */
.slideThree {
    width: 80px;
    height: 26px;
    background: #333;
    position: relative;
    border-radius: 50px;
}
/* end .slideThree */
.delete_button {
    width: 100%;
    height: 35px;
    background-color: #F35800;
    border: 2px solid #F35800;
    padding: 2px;
    color: #FFFFFF;
}

.input_icon {
    text-align: center;
    vertical-align: middle;
    border: 2px solid #F35800;
    border-radius: 4px;
    margin: auto; /* Important */
    padding: 5px;
}

.icon_client {
    text-align: center;
    vertical-align: middle;
    border: 2px solid #F35800;
    border-radius: 4px;
    margin: auto; /* Important */

    padding: 15px;
}

.blocked {
    color:red;
}

.fieldlist {
    margin: 0 0 0em;
    padding: 0;
}

    .fieldlist li {
        list-style: none;
        padding-bottom: 1em;
        height: auto;
    }

    .fieldlist label {
        padding-top: 5px;
        font-weight: bold;
        text-transform: uppercase;
        color: #444;
    }

.km-root .km-android .km-view {
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
}

.km-checkin {
    background: none !important;
}

.km-checkin {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/checkIn.png") !important;
    background-clip: content-box !important;
    background-size: 20px 20px !important;
    height: 20px !important;
    width: 20px !important;
}

.km-checkout {
    background: none !important;
}

.km-checkout {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/checkOut.png") !important;
    background-clip: content-box !important;
    background-size: 20px 20px !important;
    height: 20px !important;
    width: 20px !important;
}

.km-services {
    background: none !important;
}

.km-services {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/prestations.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-chrono {
    background: none !important;
}

.km-chrono {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/chrono.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-clients {
    background: none !important;
}

.km-clients {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/clients.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-hours {
    background: none !important;
}

.km-hours {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/vacances.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-comment {
    background: none !important;
}

.km-comment {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/text.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-holiday {
    background: none !important;
}

.km-holiday {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/vacances.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-pointeuse {
    background: none !important;
}

.km-pointeuse {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/taches.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-taches {
    background: none !important;
}

.km-taches {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/taches.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-save {
    background: none !important;
}

.km-save {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/sauvegarder.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-cancel {
    background: none !important;
}

.km-cancel {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/annuler.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}
.km-logout {
    background: none !important;
}
.km-logout {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/logout_large.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}
.km-parameter {
    background: none !important;
}

.km-parameter {
    background-attachment: inherit !important;
    background-origin: inherit !important;
    background-image: url("images/icons/parametres.png") !important;
    background-clip: content-box !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
}

.km-android .km-view-title {
    visibility: visible;
}

#ArticleTable {
    height: 100%;
}

#button_phone {
    border: 0px;
    margin: auto; /* Important */
    font-size: 2em;
    width: 80px;
    height: 80px;
}

#button_email {
    border: 0px;
    font-size: 2em;
    margin: auto; /* Important */
    width: 80px;
    height: 80px;
}

#button_web {
    border: 0px;
    font-size: 2em;
    margin: auto; /* Important */
    width: 80px;
    height: 80px;
}

#button_map {
    border: 0px;
    font-size: 2em;
    margin: auto; /* Important */
    width: 80px;
    height: 80px;
}

#TimerButton {
    text-align: center;
    vertical-align: bottom;
    border: 2px solid #F35800;
    border-radius: 4px;
    margin: auto; /* Important */
    width: 100px;
    height: 100px;
    background-color: #b0ad33;
    float: left;
}

#TimerButtonOff {
    text-align: center;
    vertical-align: bottom;
    border: 2px solid #F35800;
    border-radius: 4px;
    margin: auto; /* Important */
    width: 100px;
    height: 100px;
    background-color: #ff2c2c;
    float: right;
}

#HoursResumee {
    padding-left: 1rem;
}

#divTimer {
    text-align: center;
    margin: auto; /* Important */
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    min-height: 180px;
}



#detailResumee ul {
    list-style-type: none !important;
    padding: 0px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

h4 {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.fieldRow {
    min-width: 100%;
    display: block;
}

.centerDiv {
    margin-left: auto;
    margin-right: auto;
    display: block;
    vertical-align: central;
    text-align: center;
    overflow: hidden;
}

.nooverflow {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.overflowEllipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.alittleMargin {
    margin-bottom: 5px;
}

.timerPanel {
    padding: 30px;
    padding-bottom: 15px;
}

.serviceList {
    height: 152px;
}

.servicesPanel {
    padding: 30px;
}

    .servicesPanel .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

.ServicesButtonEdit {
    border: 1px solid #D4D4D4;
    padding-top: 25px;
    padding-bottom: 35px;
}

.ServicesButtonEditText {
    padding-top: 4px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 95%;
    text-overflow: ellipsis;
}

.ServicesButtonEditTextDisabled {
    color:grey;
}

.inputDate {
    width: 100%;
}

.dateContainer {
    padding: 20px;
}

    .dateContainer .row {
        margin: 0px;
    }
/*
P.S: if you like my content maybe you will become a donator and donate some money? That helps me to create new awesome materials. https://www.paypal.me/melnik909
*/

/*
=====
LEVEL 1. RESET STYLES
=====
*/

.field {
    --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
}

.field__input {
    background-color: transparent;
    border-radius: 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    font-size: 1em;
}

    .field__input:focus::-webkit-input-placeholder {
        color: var(--uiFieldPlaceholderColor);
    }

    .field__input:focus::-moz-placeholder {
        color: var(--uiFieldPlaceholderColor);
        opacity: 1;
    }

/*
=====
LEVEL 2. CORE STYLES
=====
*/

.a-field {
    display: inline-block;
    direction: ltr;
}

.a-field__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

    

/*
=====
LEVEL 3. PRESENTATION STYLES
=====
*/

/* a-field */

.a-field {
    --uiFieldHeight: var(--fieldHeight, 40px);
    --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
    --uiFieldBorderColor: var(--fieldBorderColor);
    --uiFieldFontSize: var(--fieldFontSize, 1em);
    --uiFieldHintFontSize: var(--fieldHintFontSize, 1em);
    --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
    --uiFieldPaddingBottom: var(--fieldPaddingBottom, 15px);
    --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);
    position: relative;
    box-sizing: border-box;
    font-size: var(--uiFieldFontSize);
    padding-top: 1em;
    width: 100%;
    direction:ltr!important;
}

    .a-field .a-field__input {
        height: var(--uiFieldHeight);
        padding: 0 var(--uiFieldPaddingRight) 0 var(--uiFieldPaddingLeft);
        border-bottom: var(--uiFieldBorderWidth) solid var(--uiFieldBorderColor);
        background-repeat: no-repeat;
        background-position: 90% 0px;
        text-indent: 80px;
        height: 35px;
        direction: ltr;        
    }

.k-floating-label-container {
    width: 100%;
}
.dateService {
    background-image: url("/Content/images/icons/date.png");
}

.startService {
    background-image: url("/Content/images/icons/start.png");
}

.stopService {
    background-image: url("/Content/images/icons/stop.png");
}

.durationService {
    background-image: url("/Content/images/icons/absences.png");
}

.quantityservice {
    background-image: url("~/Content/images/icons/quantity.png");
    text-indent: 72px !important;
}

.a-field .a-field__input::-webkit-input-placeholder {
    transition: opacity .2s ease-in;
}

.a-field .a-field__input::-moz-placeholder {
    transition: opacity .2s ease-in;
}

.a-field .a-field__input:not(:placeholder-shown) ~ .a-field__label-wrap .a-field__label {
    bottom: var(--uiFieldPaddingBottom);
}

.a-field .a-field__input:focus::-webkit-input-placeholder {
    opacity: 1;
    transition-delay: .2s;
}

.a-field .a-field__input:focus::-moz-placeholder {
    opacity: 1;
    transition-delay: .2s;
}

.a-field .a-field__label-wrap {
    box-sizing: border-box;
    width: 100%;
    height: var(--uiFieldHeight);
    pointer-events: none;
    cursor: text;
    position: absolute;
    bottom: 0;
    left: 0;
}

.a-field .a-field__label {
    position: absolute;
    left: var(--uiFieldPaddingLeft);
    bottom: calc(50% - .5em);
    line-height: 1;
    font-size: var(--uiFieldHintFontSize);
    pointer-events: none;
    transition: bottom .2s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .2s ease-out;
    will-change: bottom, opacity;
}

/*.a-field .a-field__input:focus ~ .a-field__label-wrap .a-field__label {
    opacity: 1;
    bottom: var(--uiFieldHeight);
    color: #000000;
}*/

/* a-field_a1 */

.a-field_a1 .a-field__input {
    transition: border-color .2s ease-out;
    will-change: border-color;
    width: 100%;
}

    .a-field_a1 .a-field__input:focus {
        border-color: var(--fieldBorderColorActive);
    }

/* a-field_a2 */

.a-field_a2 .a-field__label-wrap:after {
    content: "";
    box-sizing: border-box;
    width: 0;
    height: var(--uiFieldBorderWidth);
    background-color: var(--fieldBorderColorActive);
    position: absolute;
    bottom: 0;
    left: 0;
    will-change: width;
    transition: width .285s ease-out;
}

.a-field_a2 .a-field__input:focus ~ .a-field__label-wrap:after {
    width: 100%;
}

/* a-field_a3 */

.a-field_a3 {
    padding-top: 1.5em;
}

    .a-field_a3 .a-field__label-wrap:after {
        content: "";
        box-sizing: border-box;
        width: 100%;
        height: 0;
        opacity: 0;
        border: var(--uiFieldBorderWidth) solid var(--fieldBorderColorActive);
        position: absolute;
        bottom: 0;
        left: 0;
        will-change: opacity, height;
        transition: height .2s ease-out, opacity .2s ease-out;
    }

    .a-field_a3 .a-field__input:focus ~ .a-field__label-wrap:after {
        height: 100%;
        opacity: 1;
    }

/*    .a-field_a3 .a-field__input:focus ~ .a-field__label-wrap .a-field__label {
        bottom: calc(var(--uiFieldHeight) + .5em);
    }*/

/*
=====
LEVEL 4. SETTINGS
=====
*/
.field {
    --fieldBorderColor: #2282AA;
    --fieldBorderColorActive: #2282AA;
}

.desc_field {
    width: 100%;
    position: relative;
}

.title_field {
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 2px solid #2282AA;
    width: 100%;
}

.descriptionBox {
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none;
}

.uploaderCss > .k-upload {
    background: none !important;
    border: 0px;
}

.input_updater {
    all: unset;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background: none !important;
    border: 2px solid #2282AA;
}

.hidden {
    display: none;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.loginField {
    text-indent: 120px !important;
    background: url("images/icons/1pixelbackgroud.png") !important;
    background-size: 120px auto !important;
    height: 38px !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
}

.k-scheduler-layout tr + tr .k-scheduler-times th {
    border-bottom-color: transparent !important;
}

.k-scheduler-layout tr + tr .k-scheduler-times td {
    border-bottom-color: transparent !important;
}

/*#region Scheduler Navigation and Header*/

.k-scheduler-navigation {
    height: 6vh;
}

/*#endregion*/

/*#region k-scheduler-toolbar*/

.k-scheduler-toolbar {
    text-align: center !important;
}

    .k-scheduler-toolbar > .k-dropdown {          
        text-align-last: center;
    }

.k-scheduler-tools > .k-button, .k-scheduler-toolbar > .k-button {    
    line-height: initial;
}

.k-scheduler-toolbar > .k-button {    
    justify-content:center;
    align-content:center;
}


.k-button-group {
    margin-left: 12.5vw!important;
}

.k-button-group > .k-button, .k-scheduler-toolbar > .k-button {
    margin-right: 0.3em;
}

.k-scheduler-tools > .k-button:hover {
    background-color: #2282AA;
    border-color: #2282AA;
}

.k-scheduler-table .k-selected{
    background-color: var(--ioShadowBlue) !important;
}

/*#region Media Query*/




/*#endregion*/
/*#endregion*/

.k-scheduler-header th, .k-scheduler-header-wrap, .k-scheduler-table td, .k-scheduler-times, .k-scheduler-times th, .k-scheduler-times tr {
    border-bottom-color: transparent !important;
}

.k-scheduler-content .k-today {
    background-color: #2282AA;
    color: white;
}
.k-scheduler-content .k-state-selected:not(.k-today),
.k-scheduler-content .k-state-selected:not(.k-today) > div {
    height: 100%;
    background-color: #ADD8E6 !important;
    border-color: #ADD8E6 !important;
}

.k-scheduler-content td:not(.k-other-month):not(.k-today) {
    color: black;
}

.k-scheduler-content .weekend {
    background-color: #D3D3D3;
    height: 100%;
}

.k-scheduler-content .business-holiday {
    background-color: #696969;
    height: 100%;
    color: lightgray;
}

.k-scheduler-navigation .k-m-date-format {
    height: 2vh;
    color: #2282AA;
}

.k-scheduler-navigation .k-y-date-format {
    color: #2282AA;
}


.k-calendar .k-calendar-header .k-today, .k-calendar .k-footer .k-nav-today {
    color: #2282AA;
}

/*#region Today event viewer*/
.today-absences {
    background-color: #ffffff;
    min-height: 20vh;
    max-height: 100vh;
    padding-bottom: 5vh;
}

    .today-absences > .personal-absences {
        color: #9C9C9C;
        font-weight: bolder;
        border-bottom: 0.1em solid #CFCFCF;
    }

        .today-absences > .personal-absences > .absences-viewer {
            color: black;            
            font-weight: normal;
            padding-left: 1.8em;
        }

    .today-absences > .other-absences {
        color: #9C9C9C;
        border-bottom: 0.1em solid #DCDCDC;
        font-weight: bold;
    }

        .today-absences > .other-absences > .absences-viewer {
            color: black;            
            font-weight: normal;
            padding-left: 1.8em;
        }

/*#endregion*/

/*#region k-event */

.k-events-container > .k-event {
    border-color:#144E66!important;
    border-width: thin!important;
}
.k-event {
    
}

.k-pane-wrapper .k-pane .k-scheduler-edit-form .k-header {
    background: #2282AA !important;
}
.k-pane-wrapper .k-pane .k-scheduler-edit-form .k-scheduler-delete {
    color: #2282AA !important;
}
/*#endregion*/
/* #region Add Holiday*/
.add-holiday {
    position: fixed;
    bottom: -10px;
    z-index: 9;
    width: 100vw;
    border-width: thin;
}

.k-outline {
    background-color: #2282AA!important;
    color: white!important;
}

.add-holiday-header {
    background-color: #2282AA;
    color: white;
    text-align: center;
    min-height: 5vh;
}

.add-holiday-title {
    padding-top: 1vh;
    display: inline-block
}

.add-holiday-row {
    margin-top: 2.5vh;
}

.save-holiday {
    float: right;
    margin-top: .4vh;
    margin-right: 1vw;
}

.cancel-holiday {
    float: left;
    margin-top: .4vh;
    margin-left: 1vw;
}

.hours-content {
    margin-left: 12vw;
}

.k-list .k-item.k-state-selected, .k-list-optionlabel.k-state-selected {
    background-color: #2282AA;
}

.k-switch-on .k-switch-container {
    background-color: #2282AA;
}

.alert {
    padding: 0;
    margin: 0;
    height: 6vh;
    line-height: 6vh;
}



/* #endregion */


}

/* Notifications */
.k-notification h3 {
    padding: 30px 10px 5px;
    font-size: 1em;
    line-height: normal;
}

.k-notification img {
    margin: 20px;
    float: left;
}

/* Info template */
.new-mail {
    width: 150px;
    height: 80px;
}

/* Error template */
.wrong-pass {
    width: 150px;
    height: 80px;
}

/* Success template */
.upload-success {
    width: 150px;
    height: 80px;
}

.k-notification-info {
    background-color: #fff;
    color: #2282AA;
    border: 2px solid #2282AA;
}

.k-notification-error {
    background-color: #fff;
    color: #db4240;
    border: 2px solid #db4240;
}

.k-notification-success {
    background-color: #fff;
    color: #37b400;
    border: 2px solid #37b400;
}

@media screen and (orientation:landscape) {
    .add-holiday {
        bottom: 0px;        
    }   

    @media screen and (min-width: 750px) {
        .k-scheduler-toolbar > .k-button > span {
            padding-right: .3em;
        }
    }

    @media screen and (min-width: 820px){
        .k-scheduler-toolbar > .k-button > span {
            padding-right: .6em;
        }
        .k-button-group > .k-button {
            margin-right: 6.9vw;
        }
    }

    @media screen and (max-height: 330px) {
        .k-scheduler-toolbar > .k-button {
            padding-bottom: 6vh;
        }

        .add-holiday {
            bottom: 20vh;
        }

        .hours-content {
            margin-bottom: 10vh;
        }
    }
    @media screen and (min-height: 331px)
    {
        .add-holiday-header > .save-holiday,
        .add-holiday-header > .cancel-holiday,
        .add-holiday-header > .add-holiday-title
        {
            margin-top: 1.3vh;
        }
    }

}

@media screen and (orientation: portrait) {
    .k-scheduler-toolbar {
        width:100vw!important;
    }
    @media screen and (max-height: 560px) {
        .k-scheduler-navigation .k-m-date-format {
            height: 4vh;
        }
    }

    @media screen and (max-height: 670px) {
        .add-holiday-header {
            min-height: 6vh;
        }
    }

    @media screen and (max-height: 550px) {
        .add-holiday-header {
            min-height: 8vh;
        }

        .add-holiday {
            bottom: 11.5vh;
        }

        .k-scheduler-toolbar .k-scheduler-refresh {
            padding-bottom: 2vh;
            padding-top: .4vh;
        }
    }
    

    @media screen and (min-height: 650px) and (max-height: 775px) {
        .add-holiday {
            position: fixed;
            bottom: 8vh;
        }

        .k-scheduler-navigation .k-m-date-format {
            height: 3vh;
        }
    }

    @media screen and (min-height: 776px) and (max-height: 1049px) {
        .add-holiday {
            bottom: 7vh;
        }
    }
   /* @media screen and (min-height: 1050px){
        .add-holiday{
            position: fixed;
            bottom: -10px !important;
        }
    }*/
    @media screen and (max-height: 650px) {
        .k-scheduler-toolbar > .k-button > span {
            padding-left: .3em;
            margin-bottom: .45em;
        }
    }

    @media screen and (min-width: 540px) {
        .k-scheduler-toolbar > .k-button > span {
            padding-left: 1em;
            margin-bottom: .3125em;
        }
    }

    @media screen and (max-width: 300px) {
        .k-scheduler-toolbar > .k-button > span {
            padding-left: .1em;
            margin-bottom: .3128em;
        }
    }


    @media screen and (max-height: 550px) {
        .k-scheduler-toolbar > .k-dropdown {
            height: 3.5vh;
            padding-top: 1vh;
            margin-top: .2em;
        }
    }
}