@primary: #161e4f;
@accent: #57edf9;
@colorDanger: #dc3545;
@colorWarning: #ffc107;
@colorSuccess: #28a745;
@colorInfo: #17a2b8;
@colorPrimary: #007bff;

[ng-view] {}

html {
    overflow: hidden;
}
*:focus {
    outline: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    margin-top: 1rem;
}


div.form {
    display: contents;
}

.ng-hide-add,
.ng-hide-remove {
    display: block !important;
    /* yes, important */
}

.ng-hide {
    height: 0 !important;
}

.ng-transition {
    transition: 0.5s cubic-bezier(0.35, 0, 0.25, 1) all;
}

.md-primary-icon, .md-primary-text {
    color:@primary
}

.md-accent-icon, .md-accent-text {
    color:@accent
}

.main-panel {
    margin: 20px 20px;
    border-radius: 10px;
    background-color: white;
    padding-top: 2px;
    span.main-title {
        text-transform: uppercase;
    }
}


body {
    font-size: 13px;
    font-family: Poppins;
    background: white;
}

.capitalize {
    text-transform: capitalize;
}

.align-center{ text-align:center !important; }
.align-left { text-align:left !important; }
.align-right { text-align:right !important; }


/***************************************************************************************************/
/*                                          md-datepicker                                          */
/***************************************************************************************************/

.md-datepicker-input-container {
    display: block;

    .md-datepicker-input  {
        max-width: none;
    }
}

._md-datepicker-has-triangle-icon {
    padding-right: 0;
    margin-right: 0;
}

/***************************************************************************************************/
/*                                             header                                              */
/***************************************************************************************************/

.header {
    background: white;
    border-bottom: 1px solid #DDD;
    height: 63px;
    padding: 0 15px;

    h2 {
        margin-left: 10px;
    }

    md-menu.profil {
        .md-button {
            line-height: 20px;
            margin: 0;
            padding: 0;
        }
    }
}

/***************************************************************************************************/
/*                                              button                                             */
/***************************************************************************************************/

.md-small-button {
    font-size: 11px;
    min-height: inherit;
    line-height: 24px;
    border-radius: 4px;
}

.md-mini-button {
    font-size: 8px;
    min-height: inherit;
    line-height: 20px;
    border-radius: 4px;
}

/***************************************************************************************************/
/*                                           md-tooltip                                            */
/***************************************************************************************************/

.md-tooltip {
    color: black !important;
    background-color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;
    opacity: 1 !important;
    border: #8e9496 1px solid;

    &.no-height-limit {
        height: unset !important;
    }
}

/*
.md-tooltip.md-origin-right {
    margin-left: 5px !important;
}
.md-tooltip.md-origin-left {
    margin-right: 5px !important;
}
.md-tooltip.md-origin-top {
    margin-bottom: 5px !important;
}
.md-tooltip.md-origin-bottom {
    margin-top: 5px !important;
}
*/

/***************************************************************************************************/
/*                                              color                                              */
/***************************************************************************************************/

.color-error, .color-danger {
    color: @colorDanger !important;
}

.color-warning {
    color: @colorWarning !important;
}

.color-success {
    color: @colorSuccess !important;
}

.color-info {
    color: @colorInfo !important;
}

.color-primary {
    color: @colorPrimary !important;
}



.bg-color-error, .bg-color-danger {
    background-color: @colorDanger !important;
}

.bg-color-warning {
    background-color: @colorWarning !important;
}

.bg-color-success {
    background-color: @colorSuccess !important;
}

.bg-color-info {
    background-color: @colorInfo !important;
}

.bg-color-primary {
    background-color: @colorPrimary !important;
}



/***************************************************************************************************/
/*                                             md-list                                             */
/***************************************************************************************************/

md-list-item.md-list-item-small, md-list-item.md-list-item-small .md-list-item-inner {
    min-height: 32px;
}

md-list-item.md-list-item-small::before, md-list-item.md-list-item-small .md-list-item-inner::before {
    min-height: 32px;
}

md-list-item.md-list-item-small > md-checkbox, md-list-item.md-list-item-small .md-list-item-inner > md-checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

md-list-item[disabled] {
    color: rgba(0,0,0,0.38);
    cursor: default;
    background-color: rgba(0,0,0,0.12);
}

md-list-item.md-bordered-top {
    border-top: 1px solid #e9ecef;
}

md-list-item.md-white-space-normal .md-list-item-text {
    h1, h2, h3, h4, h5, h6 {
        white-space: normal!important;
    }
}

/***************************************************************************************************/
/*                                             switch                                              */
/***************************************************************************************************/


md-switch {
    margin: 0;
    /*height: 19px;*/
}


/***************************************************************************************************/
/*                                          drag and drop                                          */
/***************************************************************************************************/


[draggable=true] {
    cursor: -webkit-grab;
    cursor: grab;
}
[draggable=true]:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.dndDragging{
    cursor: -webkit-grab !important;
    cursor: grab !important;
}

.dndDragover{
    background-color: rgba(158,158,158,0.2) !important;
}

.dndDraggingSource {
    background-color: rgba(158,158,158,0.68) !important;
}


.dndDropOk {
    background-color: rgba(15, 171, 21, 0.19) !important;
}
.dndDropNotOk {
    background-color: rgba(171, 15, 15, 0.19) !important;
}











/***************************************************************************************************/
/*                                          select cinema                                          */
/***************************************************************************************************/

.select_cinema {
    font-size: inherit;
    line-height: 1.1;
    margin: 0;
}
md-select.select_cinema:focus .md-select-value {
    border-bottom-width: 0;
    border-bottom-style: none;
}
md-select.select_cinema .md-select-value {
    border-bottom-width: 0;
    border-bottom-style: none;
}


/***************************************************************************************************/
/*                                             toolbar                                             */
/***************************************************************************************************/


md-toolbar {
    @toolbarHeight: 48px;
    min-height: @toolbarHeight;

    .md-toolbar-tools {
        height: @toolbarHeight;

        .md-button:not(.md-icon-button) {
            height: @toolbarHeight;
            line-height: @toolbarHeight;
            min-width: @toolbarHeight;
            margin: 0;
        }

        md-select .md-select-icon {
            /*color: #fff;*/
            color: currentColor;
        }

    }
}

md-dialog md-toolbar, md-dialog .md-toolbar-tools {
    height: 60px !important;
    min-height: 60px !important;
}

.md-toolbar-tools {
    .md-button {
        font-size: inherit !important;
    }
}


/***************************************************************************************************/
/*                                             dialog                                              */
/***************************************************************************************************/

@media (max-width: 599px) {
    md-dialog.md-dialog-width-fix {
        width: 80%;
    }
}

@media (max-width: 959px) and (min-width: 600px) {
    md-dialog.md-dialog-width-fix {
        width: 80%;
    }
}

@media (max-width: 1279px) and (min-width: 960px) {
    md-dialog.md-dialog-width-fix {
        width: 700px;
    }
}

@media (max-width: 1919px) and (min-width: 1280px) {
    md-dialog.md-dialog-width-fix {
        width: 700px;
    }
}

@media (min-width: 1920px) {
    md-dialog.md-dialog-width-fix {
        width: 700px;
    }
}

md-dialog.md-dialog-export-form {
    width: 450px;
}

/***************************************************************************************************/
/*                                        md-input-container                                       */
/***************************************************************************************************/

md-input-container {
    label {
        font-weight: normal;
    }
}

md-dialog:not(.with-errors) md-input-container .md-errors-spacer {
    display: none;
}

md-input-container.without-errors .md-errors-spacer {
    display: none;
}

@inputTextColor : rgba(0,0,0,0.87);

md-input-container.md-default-theme .md-placeholder,
md-input-container .md-placeholder,
md-input-container.md-default-theme label,
md-input-container label {
    color: @inputTextColor;
}
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after,
md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
    color: @inputTextColor;
}
md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label,
md-input-container:not(.md-input-invalid).md-input-has-value label {
    color: @inputTextColor;
}
md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder {
    color: @inputTextColor;
}


md-input-container.md-icon-checkbox > md-icon {
    top: 0;
}

md-input-container > md-checkbox {
    margin-bottom: 0;
}

@media (max-width: 599px) {
    md-input-container.md-icon-left-xs {
        padding-left: 36px;
    }

    md-input-container.md-icon-left-xs > label {
        left: 36px;
    }
}

md-input-container.md-icon-left md-icon[role=button] {
    cursor: pointer;
}
md-input-container.md-icon-left md-icon[role=button][disabled] {
    color: rgba(0, 0, 0, 0.38);
}

[disabled] md-input-container .md-input,
md-input-container .md-input[disabled],
[disabled] md-input-container md-select,
md-input-container md-select[disabled],
[disabled] md-input-container md-radio-group md-radio-button,
md-input-container md-radio-group[disabled] md-radio-button,
[disabled] md-input-container md-checkbox,
md-input-container md-checkbox[disabled],
[disabled] md-input-container md-icon,
md-input-container md-icon[disabled] {
    cursor: not-allowed!important;
}

/***************************************************************************************************/
/*                                            md-select                                            */
/***************************************************************************************************/

/* Chrome, Safari, Edge, Opera */
input.no-arrows::-webkit-outer-spin-button,
input.no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.no-arrows[type=number] {
    -moz-appearance: textfield;
}

/***************************************************************************************************/
/*                                            md-select                                            */
/***************************************************************************************************/

md-select.md-default-theme:not([disabled]):focus.md-no-underline .md-select-value,
md-select:not([disabled]):focus.md-no-underline .md-select-value {
    border-bottom-width: 1px;
    padding-bottom: 2px;
}


/***************************************************************************************************/
/*                                              span                                               */
/***************************************************************************************************/


span.warning {
    color: blue;
}
span.danger {
    color: red;
}
span.success {
    color: green;
}



/***************************************************************************************************/
/*                                              time                                               */
/***************************************************************************************************/

span.time {
    @unitSize: 16px;

    /*font-family: sans-serif;*/
    /*font-weight: bold;*/

    .hour {
        display: inline-block;
        text-align: right;
        width: @unitSize;
    }
    .minute {
        display: inline-block;
        text-align: left;
        width: @unitSize;
    }
    .separator {
        display: inline-block;
        margin: 0 1px;
    }
}


/***************************************************************************************************/
/*                                             editable                                            */
/***************************************************************************************************/

.editable:hover {
    transform: scale(1.2);
}


/***************************************************************************************************/
/*                                             button                                              */
/***************************************************************************************************/

.md-button {
    text-transform: none !important;
}

.md-button.md-default-theme[disabled], .md-button[disabled] {
    cursor: not-allowed;
}

.md-button.md-default-theme.md-raised:not([disabled]):hover, .md-button.md-raised:not([disabled]):hover {
    background-color: rgba(158,158,158,0.2);
}


/***************************************************************************************************/
/*                                         md-menu-content                                         */
/***************************************************************************************************/


md-menu-content {
    padding: 0;

    .md-button {
        padding: 0px 5px;
        font-size: 13px;

        md-icon {
            margin: 0;
            font-size: 20px;
            height: 20px;
            width: 20px;
            min-height: 20px;
            min-width: 20px;
        }
    }
}



/***************************************************************************************************/
/*                                 select-day   select-week                                        */
/***************************************************************************************************/

@selectPeriodeButtonWidth: 285px;
@selectNextPreviousPeriodeButtonWidth: 285px;

.select-day {

    @dateButtonHeight: 45px;
    @dateButtonWidth: 40px;
    @weekButtonWidth: 90px;

    padding: 5px;
    border: solid 1px #ddd;
    margin-top: 10px;
    position: relative;
    background-color: inherit;

    .legend {
        position: absolute;
        top: -10px;
        padding: 0px 5px;
        background-color: inherit;
        font-weight: bold;
    }

    .select-periode {
        margin-bottom: 5px;
        button {
            min-width: 0;
        }

        md-menu {
            button {
                width : @selectPeriodeButtonWidth;
                min-width: @selectPeriodeButtonWidth;
                margin : 0px 1px;
                /*font-weight: bold;*/
                color: rgb(33,33,33);
            }
        }
    }

    table {
        th {
            height: 30px;
            font-weight: unset;
        }

        td, th {
            padding: 0;
            text-align: center;
        }

        .week-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @weekButtonWidth;
            min-width: @weekButtonWidth;
            /*font-weight: bold;*/
            margin: 1px;
            padding: 5px;
            line-height: 20px;
        }
        .day-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @dateButtonWidth;
            min-width: @dateButtonWidth;
            /*font-weight: bold;*/
            margin: 1px;
            padding: 5px;
            line-height: 16px;
        }
        .date-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @dateButtonWidth;
            min-width: @dateButtonWidth;
            margin: 1px;
            padding: 2px;

            span.day {
                /*font-weight: bold;*/
                font-size: 20px;
                line-height: 20px;
            }
            span.month {
                font-size: 9px;
                line-height: 11px;
            }
            span.year {
                font-size: 9px;
                line-height: 11px;
            }
        }
    }
}

.select-week {

    @weekButtonHeight: 45px;

    padding: 5px;
    border: solid 1px #ddd;
    margin-top: 10px;
    position: relative;
    background-color: inherit;

    .legend {
        position: absolute;
        top: -10px;
        padding: 0px 5px;
        background-color: inherit;
        font-weight: bold;
    }

    .select-periode {
        margin-bottom: 5px;
        button {
            min-width: 0;
        }

        md-menu {
            button {
                width : @selectPeriodeButtonWidth;
                min-width: @selectPeriodeButtonWidth;
                margin : 0px 1px;
                /*font-weight: bold;*/
                color: rgb(33,33,33);
            }
        }
    }

    table {
        width: 100%;

        td, th {
            padding: 0;
            text-align: center;
        }

        .week-button {
            height: @weekButtonHeight;
            min-height: @weekButtonHeight;
            width: 100%;
            margin: 1px;
            padding: 5px;
            line-height: 20px;

            span.week {
                /*font-weight: bold; */
                font-size: 14px;
                line-height: 20px;
            }
            span.dates {
                font-size: 9px;
                line-height: 11px;
            }
        }
    }
}

.menu-select-periode {
    width: @selectPeriodeButtonWidth;
    min-width: @selectPeriodeButtonWidth;

    button {
        text-align: center;
        font-size: 14px;
        /*font-weight: bold;*/
    }
}


/***************************************************************************************************/
/*                           panel-select-day   panel-select-week                                  */
/***************************************************************************************************/

@selectPlanningButtonWidth: 390px;
@selectPlanningPeriodeButtonWidth: 275px;

.panel-select-planning {
    width : @selectPlanningButtonWidth;
    min-width: @selectPlanningButtonWidth;
    max-width: @selectPlanningButtonWidth;

    padding: 5px;
    border: solid 1px #ddd;
    background-color: inherit;

    .select-periode {
        margin-bottom: 10px;
        button {
            min-width: 0;
            margin: 0;
        }

        md-menu {
            button {
                width : @selectPlanningPeriodeButtonWidth;
                min-width: @selectPlanningPeriodeButtonWidth;
                /*font-weight: bold;*/
                /*color: rgb(33,33,33);*/
            }
        }
    }
}

.panel-menu-select-periode {
    width: @selectPlanningPeriodeButtonWidth;
    min-width: @selectPlanningPeriodeButtonWidth;

    button {
        text-align: center;
        font-size: 14px;
        /*font-weight: bold;*/
    }
}


.select-planning-button {
    width : @selectPlanningButtonWidth;
    min-width: @selectPlanningButtonWidth;
}



.panel-select-week {
    @weekButtonHeight: 45px;

    table {
        width: 100%;

        td, th {
            padding: 0;
            text-align: center;
        }

        .week-button {
            height: @weekButtonHeight;
            min-height: @weekButtonHeight;
            width: 100%;
            margin: 1px 0px;
            padding: 5px;
            line-height: 20px;

            span.week {
                /*font-weight: bold; */
                font-size: 14px;
                line-height: 20px;
            }
            span.dates {
                font-size: 9px;
                line-height: 11px;
            }
        }
    }
}

.panel-select-day {
    @dateButtonHeight: 45px;
    @dateButtonWidth: 40px;
    @weekButtonWidth: 90px;

    table {
        th {
            height: 30px;
            font-weight: unset;
        }

        td, th {
            padding: 0;
            text-align: center;
        }

        .week-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @weekButtonWidth;
            min-width: @weekButtonWidth;
            /*font-weight: bold;*/
            margin: 1px;
            padding: 5px;
            line-height: 20px;
        }
        .day-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @dateButtonWidth;
            min-width: @dateButtonWidth;
            /*font-weight: bold;*/
            margin: 1px;
            padding: 5px;
            line-height: 16px;
        }
        .date-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @dateButtonWidth;
            min-width: @dateButtonWidth;
            margin: 1px;
            padding: 2px;

            span.day {
                /*font-weight: bold;*/
                font-size: 20px;
                line-height: 20px;
            }
            span.month {
                font-size: 9px;
                line-height: 11px;
            }
            span.year {
                font-size: 9px;
                line-height: 11px;
            }
        }
    }
}


/***************************************************************************************************/
/*                                     page-navbar && pickers                                      */
/***************************************************************************************************/

.page-navbar {
    .md-button {
        height: 48px !important;
        margin: 0;
        padding: 5px;
    }
    .btn-center .md-button, .md-button.btn-center {
        line-height: 20px;
        font-weight: bold;
        width: 360px;
    }
    .btn-tools {
        @toolsWidth : 25px;
        width: @toolsWidth;
        min-width: @toolsWidth;
        padding: 0;
    }
}

.panel-menu {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
                0 13px 19px 2px rgba(0, 0, 0, 0.14),
                0 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.picker {

    .picker-nav {
        @navButtonHeight: 30px;
        @navButtonWidth: 40px;

        .md-button {
            height: @navButtonHeight;
            min-height: @navButtonHeight;
            line-height: @navButtonHeight;
            padding: 0;
            margin: 2px;
            /*background-color: #0b97c4;*/
        }

        .btn-previous, .btn-next {
            width: @navButtonWidth;
            min-width: @navButtonWidth;
        }

        .btn-center {
        }

        .label {
            min-width: 80px;
            text-align: center;
        }
    }

    .md-list-item-text {
        text-align: center;
        line-height: 20px;

        .primary-text {
            font-size: 16px;
            line-height: 20px;
        }
        .secondary-text {
            font-size: 11px;
            line-height: 14px;
        }
    }

    md-list-item {
        /*padding: 5px;*/
    }

    md-list-item.selected {
       /*background-color: #0288d1*/
    }

}

.journee-picker {

    table {

        @dateButtonHeight: 45px;
        @dateButtonWithInfosHeight: 60px;
        @dateButtonWidth: 40px;
        @weekButtonWidth: 90px;

        th {
            height: 30px;
            font-weight: unset;
        }

        td, th {
            padding: 0;
            text-align: center;
        }

        .week-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @weekButtonWidth;
            min-width: @weekButtonWidth;
            /*font-weight: bold;*/
            margin: 1px;
            padding: 5px;
            line-height: 20px;
        }
        .day-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @dateButtonWidth;
            min-width: @dateButtonWidth;
            /*font-weight: bold;*/
            margin: 1px;
            padding: 5px;
            line-height: 16px;
        }
        .date-button {
            height: @dateButtonHeight;
            min-height: @dateButtonHeight;
            width: @dateButtonWidth;
            min-width: @dateButtonWidth;
            margin: 1px;
            padding: 2px;

            span.day {
                /*font-weight: bold;*/
                font-size: 20px;
                line-height: 20px;
            }
            span.month {
                font-size: 9px;
                line-height: 11px;
            }
            span.year {
                font-size: 9px;
                line-height: 11px;
            }
        }
        .date-button-with-infos {
            height: @dateButtonWithInfosHeight !important;
            min-height: @dateButtonWithInfosHeight !important;
        }
    }
}

/***************************************************************************************************/
/*                                        background-color                                         */
/***************************************************************************************************/

form, md-dialog-content, .md-dialog-content, md-content, .layout-row, .layout-column {
    background-color: inherit;
}



/***************************************************************************************************/
/*                                             divers                                              */
/***************************************************************************************************/

.div-table-body {
    height: 600px; overflow-x: auto; overflow-y: scroll;
}

md-radio-group.layout-row div.flex md-radio-button {
    margin-bottom: 16px;
    margin-right: 0;
}

md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
    background-color: #5a5a5a;
}


.md-panel {
    background-color: white;
}

md-card md-card-title {
    padding: 24px 16px 6px;
}


/***************************************************************************************************/
/*                                             overlay                                             */
/***************************************************************************************************/

div.overlay.visible {
    display: block;
}

div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: rgba(224, 219, 219, 0.66);
    z-index: 200;
    width: 100%;
    height: 100%;
    text-align: center;

    div.overlay-content {
        position: relative;
        top: 40%;
    }


    @textColor: #949494;
    div.overlay-message {
        color: @textColor;
        font-size: 26px;
        font-weight: bold;
        -webkit-text-stroke-color: white;
        -webkit-text-stroke-width: 0.50px;
    }

    md-progress-circular path {
        stroke: @textColor;
    }
}


/***************************************************************************************************/
/*                                            accordion                                            */
/***************************************************************************************************/


div.accordion {

    div.accordion-group {

        margin: 5px;

        button.accordion-head {
            margin: 0;
            min-width: 0;
            width: 100%;
            border-radius: 0;


            span.accordion-title {
                padding: 10px;
            }


            .toggle-icon {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                -webkit-transition: -webkit-transform 0.3s ease-in-out;
                transition: -webkit-transform 0.3s ease-in-out;
                transition: transform 0.3s ease-in-out;
                transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
            }
        }

        div.accordion-body {
            /*border: 1px dashed #ddd;*/
            padding: 10px;
        }

        border: 2px solid #c5c5c5;

    }

    div.accordion-group.toggled {

        button.accordion-head {

            background-color: #c5c5c5;
            .toggle-icon {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }

    }

}

/***************************************************************************************************/
/*                                         md-button-toggle                                        */
/***************************************************************************************************/

/*
.md-button-toggle .md-toggle-icon {
    display: block;
    margin-left: auto;
    speak: none;
    vertical-align: middle;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.md-button-toggle .md-toggle-icon.toggled {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
*/

/*
.menu-toggle-list {
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    -webkit-transition-property: height;
    -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    -moz-transition-property: height;
    transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
    transition-property: height;
}
*/


/***************************************************************************************************/
/*                                       app-menu-toggle-btn                                       */
/***************************************************************************************************/

button.app-menu-toggle-btn {
    position: absolute;
    top: 4px;
    left: 2px;
    z-index: 1000000;

    md-icon {
        color: rgb(255,255,255);
        fill: rgb(255,255,255);
    }
}

/***************************************************************************************************/
/*                                           page-toolbar                                          */
/***************************************************************************************************/

md-toolbar.page-toolbar {
    /*padding-left: 40px;*/
    .button-main-menu, .button-page-menu {
        min-width: 40px;
    }
}



/***************************************************************************************************/
/*                                             sidenav                                             */
/***************************************************************************************************/


md-sidenav.app-sidenav {
    max-width: 200px;

    div.app-title {
        margin: 8px 0;
        padding: 0;

        .app-logo {
            margin: 2px;
        }
    }

    md-menu.profil {
        .md-button {
            line-height: 20px;
            padding: 8px;
            margin: 0;
            width: 100%;

            div.label{
                overflow-wrap: break-word;
                white-space: normal;
                background-color: initial;
            }
        }
    }

    md-list-item {
        &:hover {
            background-color: none !important;
            md-icon {
                color: @primary;
            }
        }
        md-icon {
            margin-right: 10px;
        }
        &.active {
            div.left-border {
                position: absolute;
                left: -7px;
                background: @primary;
                width: 12px;
                height: 48px;
                border-radius: 0 7px 7px 0;
            }
        }
    }

    .sidenav_bottom_zone {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        text-align: center;
        .sidenav_bottom_actions {
            margin-top: 40px;
            padding-top: 20px;
            background: #F4F4F4;
            md-content {
                background: #F4F4F4;
                md-icon {
                    /*margin-right: 10px !important;*/
                    color: @primary;
                }
            }
        }
    }
}



/***************************************************************************************************/
/*                                          page-sidenav                                           */
/***************************************************************************************************/

md-sidenav.page-sidenav{
    @sidenavWidth: 240px;
    overflow-x: hidden;

    @media (min-width: 600px) {
        min-width: @sidenavWidth;
        max-width: @sidenavWidth;
        width: @sidenavWidth;

        button {
            /*margin: 0;*/
            /*min-width: @sidenavWidth;*/
            /*max-width: @sidenavWidth;*/
            /*width: @sidenavWidth;*/
        }

        md-content {
            min-width: @sidenavWidth;
            max-width: @sidenavWidth;
            width: @sidenavWidth;
            overflow-x: hidden;
        }
    }

    .md-subheader {
        padding:0;

        .md-subheader-inner {
            padding: 10px 18px 10px 10px;
            background-color: white;

            .md-subheader-content {

                .md-icon-button.small {
                    @size-btn: 30px;
                    height: @size-btn;
                    width: @size-btn;
                    min-height: @size-btn;
                    min-width: @size-btn;
                    padding: 0;
                    margin: 0 2px;

                    md-icon {
                        @size-icon: 20px;
                        font-size: @size-icon;
                        height: @size-icon;
                        width: @size-icon;
                        min-height: @size-icon;
                        min-width: @size-icon;
                    }
                }

                .md-icon-button.tiny {
                    @size-btn: 20px;
                    height: @size-btn;
                    width: @size-btn;
                    min-height: @size-btn;
                    min-width: @size-btn;
                    padding: 0;
                    margin: 0 2px;

                    md-icon {
                        @size-icon: 20px;
                        font-size: @size-icon;
                        height: @size-icon;
                        width: @size-icon;
                        min-height: @size-icon;
                        min-width: @size-icon;
                    }
                }
            }
        }
    }
    md-divider {
        margin: 10px;
    }

    md-list-item{
        md-select {
            md-icon {
                margin-right: 0;
            }
            md-select-value {
                padding: 4px 2px 1px 2px;
            }
            margin: 0;
            width: 100%;
        }
        md-select:not([disabled]):focus .md-select-value {
            padding-bottom: 1px;
        }
    }

    md-list-item.md-no-proxy, md-list-item .md-no-style {
        padding: 0px 18px 0px 14px;
    }

    md-input-container._md-datepicker-floating-label {
        max-height: 34px;
    }
}


/***************************************************************************************************/
/*                                             margin                                              */
/***************************************************************************************************/

.no-margin {
    margin: 0 !important;
}
.no-margin-top {
    margin-top: 0 !important;
}
.no-margin-bottom {
    margin-bottom: 0 !important;
}
.no-margin-left {
    margin-left: 0 !important;
}
.no-margin-right {
    margin-right: 0 !important;
}

/***************************************************************************************************/
/*                                             padding                                             */
/***************************************************************************************************/


.no-padding {
    padding: 0 !important;
}
.no-padding-top {
    padding-top: 0 !important;
}
.no-padding-bottom {
    padding-bottom: 0 !important;
}
.no-padding-left {
    padding-left: 0 !important;
}
.no-padding-right {
    padding-right: 0 !important;
}

/***************************************************************************************************/
/*                                          infos-content                                          */
/***************************************************************************************************/

.infos-content {
    padding: 10px;
    background-color: #e0f4ff;
    margin-bottom: 10px;

    table {
        width: 100%
    }

    div.info{
        span {
            vertical-align: bottom;
        }
    }
}

/***************************************************************************************************/
/*                                           colorpicker                                           */
/***************************************************************************************************/

md-input-container > colorsprite {

    position: absolute;
    top: 8px;
    left: 1px;
    right: auto;

    width: 26px;
    height: 26px;
    border: 1px solid rgba(0,0,0,0.12);
    background-color: rgba(0,0,0,0.12);
}

/***************************************************************************************************/
/*                                              icon                                               */
/***************************************************************************************************/

md-icon.very-tiny, i.fas.very-tiny {
    @smallSize : 8px;
    font-size: @smallSize;
    height: @smallSize;
    width: @smallSize;
    min-height: @smallSize;
    min-width: @smallSize;
}

md-icon.tiny, i.fas.tiny {
    @smallSize : 12px;
    font-size: @smallSize;
    height: @smallSize;
    width: @smallSize;
    min-height: @smallSize;
    min-width: @smallSize;
}

md-icon.small, i.fas.small {
    @smallSize : 20px;
    font-size: @smallSize;
    height: @smallSize;
    width: @smallSize;
    min-height: @smallSize;
    min-width: @smallSize;
}

md-icon.big, i.fas.big {
    @smallSize : 30px;
    font-size: @smallSize;
    height: @smallSize;
    width: @smallSize;
    min-height: @smallSize;
    min-width: @smallSize;
}

md-icon.giant, i.fas.giant {
    @smallSize : 40px;
    font-size: @smallSize;
    height: @smallSize;
    width: @smallSize;
    min-height: @smallSize;
    min-width: @smallSize;
}

md-icon.very-giant, i.fas.very-giant {
    @smallSize : 150px;
    font-size: @smallSize;
    height: @smallSize;
    width: @smallSize;
    min-height: @smallSize;
    min-width: @smallSize;
}

md-icon.rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
md-icon.rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
md-icon.rotate-135 {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
md-icon.rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
md-icon.rotate-225 {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
md-icon.rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
md-icon.rotate-315 {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

i.fas {
    color: rgba(0,0,0,0.54);
    @size : 24px;
    height: @size;
    width: @size;
    min-height: @size;
    min-width: @size;
}

md-icon.icon-btn {
    cursor: pointer;
    &:hover {
        transform: scale(1.2);
    }
}


/***************************************************************************************************/
/*                                             md-badge                                            */
/***************************************************************************************************/


.md-badge {
    font-size: 9px;
    min-width: 16px;
    line-height: 16px;
    border-radius: 25%;
    padding: 1px 3px;
    text-align: center;
}


.md-badge.md-primary {
    color: white;
    background: @primary;
}

.md-badge.md-accent {
    background: @accent;
}

/***************************************************************************************************/
/*                                              badge                                              */
/***************************************************************************************************/


.badge {
    display: inline-block;
    padding: .40em;
    line-height: 1;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: .25rem;
    border: 1px solid #ddd;
}

.badge-medium {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    font-size: medium;
    font-weight: 700;
    padding: .40em 0;
    /*
    height: 30px;
    min-height: 30px;
    */
}


.badge:empty {
    display: block;
    min-height: 30px;
}

.badge-small {
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    font-size: small;
    font-weight: 400;
    padding: 0;
}

/***************************************************************************************************/
/*                                              input                                              */
/***************************************************************************************************/

input[type=time]::-webkit-clear-button {
    display: none;
}

input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


input[type=week]::-webkit-clear-button {
    display: none;
}

input[type=week]::-webkit-outer-spin-button,
input[type=week]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.inputsDureesSemaines {
    max-height: 340px;
    overflow-y: auto;
}


/***************************************************************************************************/
/*                                              sticky                                              */
/***************************************************************************************************/

.sticky-top {
    position: sticky;
    top: 0;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
}

.sticky-left {
    position: sticky;
    left: 0;
}

.sticky-right {
    position: sticky;
    right: 0;
}


/***************************************************************************************************/
/*                                              table                                              */
/***************************************************************************************************/

table {
    td.no-border, th.no-border, tr.no-border td, tr.no-border th {
        border: none!important;
    }
    td.no-border-left, th.no-border-left, tr.no-border-left td, tr.no-border-left th {
        border-left: none!important;
    }
    td.no-border-right, th.no-border-right, tr.no-border-right td, tr.no-border-right th {
        border-right: none!important;
    }
    td.no-border-bottom, th.no-border-bottom, tr.no-border-bottom td, tr.no-border-bottom th {
        border-bottom: none!important;
    }
    td.no-border-top, th.no-border-top, tr.no-border-top td, tr.no-border-top th {
        border-top: none!important;
    }


    td.medium-border, th.medium-border, tr.medium-border td, tr.medium-border th {
        border-width: 2px!important;
    }
    td.medium-border-left, th.medium-border-left, tr.medium-border-left td, tr.medium-border-left th {
        border-left-width: 2px!important;
    }
    td.medium-border-right, th.medium-border-right, tr.medium-border-right td, tr.medium-border-right th {
        border-right-width: 2px!important;
    }
    td.medium-border-bottom, th.medium-border-bottom, tr.medium-border-bottom td, tr.medium-border-bottom th {
        border-bottom-width: 2px!important;
    }
    td.medium-border-top, th.medium-border-top, tr.medium-border-top td, tr.medium-border-top th {
        border-top-width: 2px!important;
    }


    td.big-border, th.big-border, tr.big-border td, tr.big-border th {
        border-width: 3px!important;
    }
    td.big-border-left, th.big-border-left, tr.big-border-left td, tr.big-border-left th {
        border-left-width: 3px!important;
    }
    td.big-border-right, th.big-border-right, tr.big-border-right td, tr.big-border-right th {
        border-right-width: 3px!important;
    }
    td.big-border-bottom, th.big-border-bottom, tr.big-border-bottom td, tr.big-border-bottom th {
        border-bottom-width: 3px!important;
    }
    td.big-border-top, th.big-border-top, tr.big-border-top td, tr.big-border-top th {
        border-top-width: 3px!important;
    }



    td.double-border, th.double-border, tr.double-border td, tr.double-border th {
        border-width: 4px!important;
        border-color: #b7b7b7!important;
    }
    td.double-border-left, th.double-border-left, tr.double-border-left td, tr.double-border-left th {
        border-left-width: 4px!important;
        border-left-color: #b7b7b7!important;
    }
    td.double-border-right, th.double-border-right, tr.double-border-right td, tr.double-border-right th {
        border-right-width: 4px!important;
        border-right-color: #b7b7b7!important;
    }
    td.double-border-bottom, th.double-border-bottom, tr.double-border-bottom td, tr.double-border-bottom th {
        border-bottom-width: 4px!important;
        border-bottom-color: #b7b7b7!important;
    }
    td.double-border-top, th.double-border-top, tr.double-border-top td, tr.double-border-top th {
        border-top-width: 4px!important;
        border-top-color: #b7b7b7!important;
    }

    /*
    td.black-border, th.black-border, tr.black-border td, tr.black-border th {
        border-color: black;
    }
    td.black-border-left, th.black-border-left, tr.black-border-left td, tr.black-border-left th {
        border-left-color: black;
    }
    td.black-border-right, th.black-border-right, tr.black-border-right td, tr.black-border-right th {
        border-right-color: black;
    }
    td.black-border-bottom, th.black-border-bottom, tr.black-border-bottom td, tr.black-border-bottom th {
        border-bottom-color: black;
    }
    td.black-border-top, th.black-border-top, tr.black-border-top td, tr.black-border-top th {
        border-top-color: black;
    }
    */


    /*
    td.tiny, th.tiny {
        @width: 40px;
        width: @width;
        min-width: @width;
    }

    td.small, th.small {
        @width: 60px;
        width: @width;
        min-width: @width;
    }

    td.medium, th.medium {
        @width: 100px;
        width: @width;
        min-width: @width;
    }

    td.large, th.large {
        @width: 200px;
        width: @width;
        min-width: @width;
    }

    td.huge, th.huge {
        @width: 350px;
        width: @width;
        min-width: @width;
    }

    td.giant, th.giant {
        @width: 600px;
        width: @width;
        min-width: @width;
    }
    */




    td.cell-number, th.cell-number {
        @width: 60px;
        width: @width;
        min-width: @width;
    }

    td.cell-date, th.cell-date {
        @width: 80px;
        width: @width;
        min-width: @width;
    }
    td.cell-date-short, th.cell-date-short {
        @width: 60px;
        width: @width;
        min-width: @width;
    }

    td.cell-label, th.cell-label {
        @width: 100px;
        width: @width;
        min-width: @width;
    }

    td.cell-comments, th.cell-comments {
        @width: 400px;
        width: @width;
        min-width: @width;
    }

    td.cell-icon-button, th.cell-icon-button {
        @width: 45px;
        width: @width;
        min-width: @width;
    }



    td.cell-input input {
        border: none!important;
        background-color: transparent;
        width: 100%;
    }

    /*@input-background-color: rgba(158,158,158,0.3);*/
    @input-background-color: rgba(158,158,158,0.3);
    td.cell-input input:focus {
        background-color: @input-background-color;
    }

    td.cell-input input:hover {
        background-color: @input-background-color;
    }

}

table thead tr th.btn-sort {
    cursor: pointer;
    white-space: nowrap;
    &:hover {
        background-color: #e8e8e8 !important;
    }
}

table.table-hover tbody tr {
    cursor: pointer;
    &:hover {
        background-color: #b9dbff !important;
    }
}


table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #e8e8e8;
}


table.table-nopadding th, table.table-nopadding td {
    padding: 0;
}

table.table td.cell-input {
    padding: 0;
    input {
        padding: 12px;
    }
}

table.table-padding-2 th, table.table-padding-2 td {
    padding: 2px;
}
table.table-padding-2 td.cell-input {
    padding: 0;
    input {
        padding: 2px;
    }
}

table.table-padding-5 th, table.table-padding-5 td {
    padding: 5px;
}
table.table-padding-5 td.cell-input {
    padding: 0;
    input {
        padding: 5px;
    }
}


table.table-nonfluid {
    width: auto !important;
}

table.table-listing thead th {
    vertical-align: middle;
}


.employe-photo {
    @width: 160px;
    @height: 200px;
    min-width: @width !important;
    max-width: @width !important;
    min-height: @height !important;
    max-height: @height !important;
    margin: 10px;
}

.cinema-logo {
    @size: 190px;
    min-width: @size !important;
    max-width: @size !important;
    min-height: @size !important;
    max-height: @size !important;
    margin: 10px;
}