/* 
 * Copyright (C) Sigmagine, SARL - All Rights Reserved - < contact [at] sigmagine.com >
 * This file is part of Fineaty project
 * Unauthorized copying, reuse or modification of this file, partial or total, by any means, is strictly prohibited
 * Developed by Samuel Tranchet since June 2008
 */


/* 
ROUGE ELEGANCIA : #9d002c;
ROUGE ELEGANCIA : rgba(157,1,44,0.1);
FONT COLOR      : #787878;
YELLOW  : rgb(249,239,58);
*/



@font-face {
    font-family : "icofont";
    src         : url('../fonts/icofont.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
}

:root{
    --state-blue  : rgba(61, 162, 230, 1);
    --state-red   : rgba(252, 100, 132, 1);
    --state-green : rgba(82, 192, 191, 1);
    --state-orange: rgba(253, 159, 79, 1);
    --state-purple: rgba(151, 103, 248, 1);
    --state-yellow: rgba(254, 205, 102, 1);
    --state-grey  : rgba(201, 203, 207, 1);



    --main-font-color: #000000;
    --main-color: #bb8e2c;
    --main-color-alpha: rgba(187,142,44,0.8);
    --main-menu-selected-bg: rgba(187,142,44,0.1);
    --main-border-radius: 0px;
    --main-border-width: 2px;
    --main-button-second-color : #ffffff;
    --main-bubble-button-border-radius: 12px;
    --main-background-color: rgb(246, 246, 246);
    --main-label-color: #777777;

    --transparency: 0.2;


    --kpis-donut-size: 180px;
}


html,body{
    font-family     : "Noto Sans",arial, sans-serif;
    background-color: var(--main-background-color);
    font-size       : 14px;
    margin          : 0px;
    padding         : 0px;
    height          : 100%;
    color           : var(--main-font-color);
    font-weight     : 300;
}

body{
    background-repeat   : no-repeat;
    background-position : center top;
}


input,select,textarea{
    width           : 100%;
    margin          : 3px 0px;
    padding         : 5px 10px;
    border          : none;
    background-color: #ffffff;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

textarea,
table.formTable .formField.formFieldTextArea{
    resize      : vertical;
    min-height  : 50px;
}

select{
    background-image    : url("../images/blackarrowdown.png");
    background-repeat   : no-repeat;
    background-position : right center;
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
}

a{
    color           : var(--main-color);
    text-decoration : none;
}

p{
    margin-left : 15px;
    border-left : 3px solid var(--main-color);
    padding-left: 15px;
}

p.tableP{
    border-left : 2px solid var(--main-label-color);
    padding-left: 5px;
    font-size   : 9px;
    margin-left : 0px;
}

h1, h2, h3, h4{
    font-family: museo-sans, sans-serif;
}

h1{
    font-size       : 35px;
    text-transform  : uppercase;
    font-weight     : 500;
}

h2{
    font-size       : 20px;
    text-transform  : uppercase;
    margin-left     : 15px;
    margin-bottom   : 30px;
    margin-top      : 70px;
    font-weight     : 500;
}

h3{
    font-size   : 16px;
    font-weight : 500;
}

h4{
    border-bottom   : 1px solid var(--main-color);
    padding-bottom  : 5px;
    color           : var(--main-label-color);
    font-size       : 10px;
}

label,
.pictoRadioValue .formFieldRadioOption label,
.pictoCheckboxValue .formFieldCheckboxOption label,
.formFieldMultiCheckboxdiv .pictoCheckboxValue .formFieldCheckboxOption label{
    display         : block;
    font-size       : 10px;
    font-weight     : lighter;
    text-transform  : uppercase;
    color           : var(--main-label-color);
    padding-left    : 0px;
}

.littleLabel{
    font-size: 8px;
}

.hkIntervener{
    display         : block;
    font-size       : 10px;
    font-weight     : lighter;
    text-transform  : uppercase;
    padding-left    : 0px;
    margin-bottom   : 5px;
}

label.inlineClass{
    display: inline-block;
}

hr{
    border      : none;
    border-top  : 1px solid #cccccc;
    margin      : 15px 0px;
}

button, .fineatyButton, .fineatyButton:visited,
.formImage img{
    font-family     : museo-sans, sans-serif;
    border          : var(--main-border-width) solid var(--main-color);
    border-radius   : var(--main-border-radius);
    padding         : 15px 30px;
    font-size       : 14px;
    font-weight     : 700;
    background      : none;
    background-color: var(--main-button-second-color);
    color           : var(--main-color);
    /* box-shadow      : 3px 3px 6px rgba(0,0,0,0.16); */
}

.formImage img{
    font-family     : museo-sans, sans-serif;
    border          : var(--main-border-width) solid var(--main-font-color);
    border-radius   : var(--main-border-radius);
    background      : none;
    background-color: var(--main-button-second-color);
    color           : var(--main-font-color);
}

button:hover, .fineatyButton:hover,
.formImage img{
    cursor: pointer;
    color : var(--main-button-second-color);
    background-color: var(--main-color);
}

.formImage img{
    cursor: pointer;
    color : var(--main-font-color);
    background-color: var(--main-button-second-color);
}

.flatButton{
    width           : 100%;
    border-radius   : 0;
    text-transform  : uppercase;
    padding         : 10px;
    font-size       : 12px;
    color           : var(--main-color);
    font-weight     : 700;
}

.progressBar{
    margin: 5px 0px;
}

.progressBar-empty{
    height          : 7px;
    background-color: #dddddd;
    border-radius   : 3px;
    padding         : 1px;
}

.progressBar-progression{
    height          : 100%;
    background-color: var(--state-blue);
    border-radius   : 3px;
}

.progressBar-legend{
    margin-top      : 3px;
    font-size       : 8px;
    font-weight     : 500;
    text-transform  : none;
    color           : #787878;
}

details{
    margin-bottom:15px;
}

summary {
    font-family : museo-sans, sans-serif;
    font-size   : 16px;
    font-weight : 700;
}

summary:hover{
    cursor: pointer;
    color : var(--main-color);
}

details > summary { 
    color: var(--main-font-color);
}

details[open] > summary { 
    color: var(--main-color);
}

details.hideMarker > summary::before { 
    content: none; 
}

details.hideMarker[open] > summary::before { 
    content: none
}

.miniButton, .miniButton:hover{
    font-size       : 10px;
    padding         : 3px 10px;
    text-transform  : uppercase;
}

.iconButton, .iconButton:hover{
    font-size   : 12px;
    padding     : 5px;
}

.formFieldCheckboxOption input, .formFieldRadioOption input {
    width: inherit;
}

.formLink.fineatyLink{
    font-family     : museo-sans, sans-serif;
    width           : 200px;
    padding         : 12px 20px;
    display         : inline-block;
    color           : #ffffff;
    background-color: var(--main-color);
    margin-top      : 15px;
    border-radius   : 30px;
    overflow        : hidden;
}

.customButton.formLink.fineatyLink{
    width           : 100%;
    padding         : 0px;
    display         : block;
    background-color: transparent;
    margin-top      : 0px;
    border-radius   : 0px;
    overflow        : visible;
}

.fineatyAlert{
    border-width: 1px;
    border-style: solid;
}

.iconRadioValue,
.iconCheckboxValue{
    text-align: center;
}

.iconRadioValue .formFieldRadioOption {
  margin-bottom: 0px;
}

.iconRadioValue-icon,
.iconCheckboxValue-icon{
    width           : 20px;
    height          : 20px;
    border          : var(--main-border-width) solid var(--main-label-color);
    background-color: #ffffff;
    border-radius   : 10px;
    overflow        : hidden;
    box-shadow      : none;
    margin          : 0px 3px;
    padding-top     : 3px;
}

.iconRadioValue-icon.stateYes{
    color: var(--main-label-color);
}

.iconRadioValue .formFieldRadioOption input{
    display: none;
}

.iconRadioValue .formFieldRadioOption label{
    font-weight : 500;
}

.iconRadioValue .formFieldRadioOption input:checked ~ label .iconRadioValue-icon{
    border      : var(--main-border-width) solid var(--main-color);
    color       : var(--main-color);
    box-shadow  : 3px 3px 6px rgba(0,0,0,0.16);
}

.iconRadioValue .formFieldRadioOption input:checked ~ label .iconRadioValue-icon.stateYes{
    border      : 1px solid var(--state-green);
    color       : var(--state-green);
    box-shadow  : 3px 3px 6px rgba(0,0,0,0.16);
}

.iconRadioValue .formFieldRadioOption input:checked ~ label label{
    color       : var(--main-color);
    font-weight : 700;
}

.filterTitle{
    font-family     : museo-sans, sans-serif;
    text-transform  : uppercase;
    font-size       : 12px;
    font-weight     : 700;
    margin-bottom   : -15px;
    text-align      : center;
    color           : var(--main-color);
    border-bottom   : 1px solid var(--main-color);
}

.filterRadioValue .formFieldRadioOption label{
    text-align      : center;
    font-size       : 10px;
    padding         : 3px 10px;
    text-transform  : uppercase;
    font-family     : museo-sans, sans-serif;
    border          : 1px solid #ffffff;
    border-radius   : var(--main-border-radius);
    font-weight     : 700;
    background-color: #ffffff;
    color           : #787878;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    margin          : 3px;
}

.filterRadioValue .formFieldRadioOption {
  margin-bottom: 0px;
}

.filterRadioValue .formFieldRadioOption input{
    display: none;
}

.filterRadioValue .formFieldRadioOption input:checked ~ label,
.filterRadioValue .formFieldRadioOption label:hover{
    /*border      : 1px solid var(--main-color);*/
    color       : var(--main-color);
}

.pictoRadioValue,
.pictoCheckboxValue{
    text-align: center;
}

.pictoRadioValue-picto,
.pictoCheckboxValue-picto{
    width           : 60px;
    height          : 60px;
    border          : none;
    background-color: #ffffff;
    border-radius   : 30px;
    overflow        : hidden;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.beddingPicto{
    width           : 80px;
    height          : 80px;
    border          : none;
    background-color: #ffffff;
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    margin          : 15px;
}

.beddingPicto.miniPicto{
    width   : 30px;
    height  : 30px;
    border-radius   : 5px;
}

.beddingButton{
    width   : 40px;
    height  : 40px;
    filter  : invert(57%) sepia(23%) saturate(1147%) hue-rotate(3deg) brightness(94%) contrast(96%);
}

.pictoTableIcon{
    width   : 15px;
    height  : 15px;
    /*filter  : invert(52%) sepia(1%) saturate(0%) hue-rotate(209deg) brightness(90%) contrast(90%);*/
}

.beddingdiv .formFieldRadioSkin{
    display: none;
}

.pictoRadioValue .formFieldRadioOption input{
    display: none;
}

.pictoRadioValue .formFieldRadioOption label{
    margin-top  : 5px;
    font-weight : 500;
}

.pictoRadioValue .formFieldRadioOption input:checked ~ label .pictoRadioValue-picto,
.pictoRadioValue .formFieldRadioOption input:checked ~ label .beddingPicto{
    border: 1px solid var(--main-color);
}

.pictoRadioValue .formFieldRadioOption input:checked ~ label label{
    color       : var(--main-color);
    font-weight : 700;
}

.pictoCheckboxValue .formFieldCheckboxOption input{
    display: none;
}

.pictoCheckboxValue .formFieldCheckboxOption label{
    margin-top  : 5px;
    font-weight : 500;
    cursor  : pointer;
}

.pictoCheckboxValue .formFieldCheckboxOption input:checked ~ label .pictoCheckboxValue-picto{
    border: 1px solid var(--main-color);
}

.pictoCheckboxValue .formFieldCheckboxOption input:checked ~ label label{
    color       : var(--main-color);
    font-weight : 700;
}

.pictoCheckboxValue .formFieldCheckboxOption span{
    display : inline;
}

#siteTitle{
    font-size   : 42px;
    font-weight : 100;
    margin      : 30px 0 0 0;
}

#siteSubtitle{
    font-size   : 14px;
    font-weight : 100;
    margin      :  0;
}

#content{
    background-color: #fff;
    padding-bottom  : 20px;
    margin-bottom   : 10px;
    padding         : 10px;
}

#pageSubtitle{
    margin      : 0px 0px 15px 30px;
    font-size   : 13px;
}

#itemPath{
    margin      : 0px 0px 15px 0px;
    font-size   : 10px;
}

#pageDescription{
    padding         : 10px;
    background-color: #eeeeee;
    margin          : 0px 0px 15px 0px;
}

.collectionItem{
    float       :left;
    text-align  :center;
}

.collectionItemTitle{
    overflow:hidden;
    width   : 120px;
    height  : 50px;
}

.formTable th{
    font-size       : 10px;
    text-transform  : uppercase;
    font-weight     : lighter;
}

.formTable td{
    border-color: #81969f;
    padding     : 0px;
    text-align  : center;
}

.formTable + .formLinkdiv .formLink,
.StorePopUp .formTable + .formLinkdiv .formLink.fineatyLink,
.formLink.fineatyLink.miniLink{
    width       : auto;
    padding     : 5px 10px;
    border      : none;
    font-size   : 10px;
}

.formTable .formLink, .formTable .formLink:hover{
    width           : auto;
    font-size       : 8px;
    padding         : 3px 10px;
    text-transform  : uppercase;
    margin-top      : 0px;
}

.formLinkdiv{
    text-align: center;
}

table.formTable td{
    vertical-align: middle;
}

.hideField{
    display: none;
}

.stateYes{
    color: var(--state-green);
}

.stateNo{
    color: var(--state-red);
}

.stateWait{
    color: var(--state-orange);/* #E89E06;*/
}

.divAsLink{
    position: relative;
    cursor  : pointer;
}

.divAsLink a.divLink{
    display: inline;
}

.divAsLink a.divLink span{
    position: absolute;
    top     : 0;
    left    : 0;
    height  : 100%;
    width   : 100%;
}

li > *{
    vertical-align: top;
}

.notificationBubble{
    position        : absolute;
    top             : -13px;
    right           : -13px;
    color           : #ffffff;
    font-size       : 16px;
    background-color: rgb(255,0,0);
    border          : 1px solid #ffffff;
    border-radius   : 13px;
    overflow        : hidden;
    height          : 26px;
    min-width       : 26px;
    text-align      : center;
    padding         : 3px 6px 0px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.tableStyle{
    width           : 100%;
    border          : 1px #787878 solid;
    font-size       : 11px;
    background-color: #ffffff;
    border-collapse : collapse;
}

.tableStyle th{
    text-align      : center;
    padding         : 15px 5px;
    background-color: #eeeeee;
    color           : #555555;
    font-size       : 12px;
    border-bottom   : 1px solid #cccccc;
}

.tableStyle:not(.coloredTable) tbody tr:hover,
.tbodyStyle:not(.coloredTable):hover{
    background-color: #DCE9F5;
}

.tbodyStyle:hover tr{
    background-color: transparent;
}

.tableStyle .secondHover:hover{
    background-color: #C8D3DE;
}

.tableStyle .formTable tbody tr:hover{
    background-color: transparent;
}

.tableStyle td{
    padding         : 10px 4px;
    border-bottom   : 1px solid #cccccc;
}

.tableStyle td.iconCell,
.iconCell{
    padding     : 0px;  
    font-size   : 16px;
}

.iconCell a{
    margin: 0px 2px;
}

.thButton:hover{
    cursor: pointer;
    color : var(--main-color);
}

/*.tableStyle tr:last-child td {
    border-bottom: 0;
}*/



.tableHeaderContainer{
    text-align      : center;
    padding         : 15px 0px;
    background-color: #eeeeee;
    color           : #555555;
    font-size       : 12px;
    border-bottom   : 1px solid #cccccc;
}

.tableHeaderContainer{
    font-weight: 700;
}

.tableRowContainer{
    background-color: transparent;
    border-bottom: 1px solid #cccccc;
}

.tableRowContainer:hover{
    background-color: #DCE9F5;
    /*z-index: 1000;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16), -3px -3px 6px rgba(0,0,0,0.16);*/
}

.tableRow{
    text-align  : center;
    padding     : 10px 4px;
}



.showHideContainer{
    position: relative;
    overflow: hidden;
}

.showHideButton{
    position        : absolute;
    bottom          : -20px;
    right           : 0;
    border          : none;
    background-color: #eeeeee;
    width           : 100%;
    box-shadow      : none;
    opacity         : 0.9;
}

.showHideButton:hover{
    width: 100%;
}

.showHideButton.hideAll{
    display: none;
}
  
  /*.tooltip-wrap .tooltip-content {
    position: absolute;
    width: 100px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    color: rgb(113, 157, 171);
    background: rgb(255, 255, 255);
    border: 4px solid rgb(255, 255, 255);
    border-radius: 5px;
    text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
}

.tooltip-wrap .tooltip-content:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    top: 44px;
    left: 50px;
}*/




.align-right{
    text-align: right;
}

.align-center{
    text-align: center;
}

.align-left{
    text-align: left;
}

.filters{
    text-align: center;
    padding: 15px 0px;
    margin-bottom: 10px;
}

.filters button{
    margin: 5px 5px;
}

.filters .mixitup-control-active{
    color: var(--main-color);
}

.filters .borderButton.mixitup-control-active{
    border: 1px solid var(--main-color);
}

.buttonContainer{
    margin-bottom: 30px;
}

.buttonContainer > *{
    margin-right: 10px;
    margin-bottom: 10px;
}

.form-container{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-auto-rows          : min-content;
    grid-row-gap            : 15px;
    padding                 : 15px 30px;
    border                  : 1px solid var(--main-color);
    border-radius           : var(--main-border-radius);
}

.formImage{
    position    : relative;
    text-align  : center;
}

.formImage img{
    margin-bottom: 20px;
}

.formImage:hover img{
    opacity: 0.6;
}

.formImage input[type="file"]:hover{
    cursor: pointer;
}

.formImage input[type="file"]{
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    margin  : 0px;
    opacity : 0;
}

.formFieldFileProgress{
    width : 100%;
    height: 5px;
    margin: 0px;
}

.fineatyAlert{
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
}

.module-container{
    padding: 25px;
}

.grid-solo{
    display                 : grid;
    grid-template-columns   : 1fr;
    row-gap                 : 15px;
}

.grid-duo{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    column-gap              : 15px;
    row-gap                 : 15px;
}

.grid-trio{
    display                 : grid;
    grid-template-columns   : repeat(3, 1fr);
    column-gap              : 15px;
    row-gap                 : 15px;
}

.grid-quatro{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    column-gap              : 15px;
    row-gap                 : 15px;
}

.floatRight{
    float: right;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){
    
    .grid-quatro{
        grid-template-columns   : repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    
    .grid-trio{
        grid-template-columns   : repeat(2, 1fr);
    }
    
    .grid-quatro{
        grid-template-columns   : repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    
    .module-container{
        padding: 0px;
    }
    
    .grid-duo{
        grid-template-columns   : 1fr;
    }
    
    .grid-trio{
        grid-template-columns   : 1fr;
    }
    
    .grid-quatro{
        grid-template-columns   : 1fr;
    }
}











/* ICONS */

.icons{
    font-family : 'icofont', serif;
    font-style  : normal;
}

.icon-float{
    float: left;
}

.icon-addDate:before{
    content: "";
}

.icon-archive:before{
    content: "";
}

.icon-award:before{
    content: "";
}

.icon-bed:before{
    content: "";
}

.icon-binoculars:before{
    content: "";
}

.icon-bookmark:before{
    content: "";
}

.icon-bucket1:before{
    content: "";
}

.icon-buffer:before{
    content: "";
}

.icon-calendar:before{
    content: "";
}

.icon-camera:before{
    content: "";
}

.icon-cantSee:before{
    content: "";
}

.icon-certificate:before{
    content: "";
}

.icon-check:before{
    content: "";
}

.icon-checkLight:before{
    content: "";
}

.icon-checkListNotepad:before{
    content:"";
}

.icon-crop:before{
    content: "";
}

.icon-document:before{
    content: "";
}

.icon-done:before{
    content: "";
}

.icon-donut:before{
    content: "";
}

.icon-error:before{
    content: "";
}

.icon-errorLight:before{
    content: "";
}

.icon-edit:before{
    content: "";
}

.icon-enter:before{
    content: "";
}

.icon-euro:before{
    content: "";
}

.icon-eye:before{
    content: "";
}

.icon-excel:before{
    content: "";
}

.icon-filter:before{
    content: "";
}

.icon-flag:before{
    content: "";
}

.icon-flowchart:before{
    content: "";
}

.icon-folder:before{
    content: "";
}

.icon-forbidden:before{
    content: "";
}

.icon-hammer:before{
    content: "";
}

.icon-home:before{
    content: "";
}

.icon-info:before{
    content: "";
}

.icon-inspection:before{
    content: "";
}

.icon-light:before{
    content: "";
}

.icon-link::before{
    content: "";
}

.icon-linkedDocument:before{
    content: "";
}

.icon-lock:before{
    content: "";
}

.icon-locked:before{
    content: "";
}

.icon-logout:before{
    content: "";
}

.icon-mail:before{
    content: "";
}

.icon-mailSended:before{
    content: "";
}

.icon-menu:before{
    content: "";
}

.icon-message:before{
    content: "";
}

.icon-messenger:before{
    content: "";
}

.icon-minus:before{
    content: "";
}

.icon-money:before{
    content: "";
}

.icon-moneyBag:before{
    content: "";
}

.icon-night:before{
    content: "";
}

.icon-oneWayStreet:before{
    content: "";
}

.icon-orderAsc:before{
    content: "";
}

.icon-orderDesc:before{
    content: "";
}

.icon-pause:before{
    content: "";
}

.icon-pen:before{
    content: "";
}

.icon-phone:before{
    content: "";
}

.icon-picture:before{
    content: "";
}

.icon-pie:before{
    content: "";
}

.icon-piece:before{
    content: "";
}

.icon-play:before{
    content: "";
}

.icon-playCircle:before{
    content: "";
}

.icon-plus:before{
    content: "";
}

.icon-print:before{
    content: "";
}

.icon-priority:before{
    content: "";
}

.icon-profile:before{
    content: "";
}

.icon-qrCode:before{
    content: "";
}

.icon-questionCircle:before{
    content: "";
}

.icon-refresh:before{
    content: "";
}

.icon-resize:before{
    content: "";
}

.icon-return:before{
    content: "";
}

.icon-save:before{
    content: "";
}

.icon-search:before{
    content: "";
}

.icon-select:before{
    content: "";
}

.icon-send:before{
    content: "";
}

.icon-settings:before{
    content: "";
}

.icon-signed:before{
    content: "";
}

.icon-square:before{
    content: "";
}

.icon-screw:before{
    content: "";
}

.icon-star:before{
    content: "";
}

.icon-start:before{
    content: "";
}

.icon-statBoard:before{
    content: "";
}

.icon-stop:before{
    content: "";
}

.icon-stopCircle:before{
    content: "";
}

.icon-stopHand:before{
    content: "";
}

.icon-support:before{
    content: "";
}

.icon-tag:before{
    content: "";
}

.icon-tagText:before{
    content: "";
}

.icon-thumbDown::before{
    content: "";
}

.icon-thumbUp::before{
    content: "";
}

.icon-ticket:before{
    content: "";
}

.icon-timer:before{
    content: "";
}

.icon-trafficLight:before{
    content: "";
}

.icon-transparent:before{
    content: "";
}

.icon-trash:before{
    content: "";
}

.icon-unlocked:before{
    content: "";
}

.icon-updateDocument:before{
    content: "";
}

.icon-warning:before{
    content: "";
}











/* PICTOS */

.picto-add{
    content: url('../images/pictos/add.png');
}

.picto-audit{
    content: url('../images/pictos/audit.png');
}

.picto-backOffice{
    content: url('../images/pictos/backOffice.png');
}

.picto-balcony{
    content: url('../images/pictos/balcony.png');
}

.picto-bath{
    content: url('../images/pictos/bath.png');
}

.picto-bathRoom{
    content: url('../images/pictos/bathRoom.png');
}

.picto-bed{
    content: url('../images/pictos/bed.png');
}

.picto-bedSheet{
    content: url('../images/pictos/bedSheet.png');
}

.picto-boilerRoom{
    content: url('../images/pictos/boilerRoom.png');
}

.picto-breakfast{
    content: url('../images/pictos/breakfast.png');
}

.picto-building{
    content: url('../images/pictos/building.png');
}

.picto-calendar{
    content: url('../images/pictos/calendar.png');
}

.picto-ceilingWall{
    content: url('../images/pictos/ceilingWall.png');
}

.picto-chair{
    content: url('../images/pictos/chair.png');
}

.picto-client{
    content: url('../images/pictos/client.png');
}

.picto-computerBay{
    content: url('../images/pictos/computerBay.png');
}

.picto-conferenceRoom{
    content: url('../images/pictos/conferenceRoom.png');
}

.picto-contract{
    content: url('../images/pictos/contract.png');
}

.picto-door{
    content: url('../images/pictos/door.png');
}

.picto-electricity{
    content: url('../images/pictos/electricity.png');
}

.picto-elevatorRoom{
    content: url('../images/pictos/elevatorRoom.png');
}

.picto-fire{
    content: url('../images/pictos/fire.png');
}

.picto-front{
    content: url('../images/pictos/front.png');
}

.picto-furniture{
    content: url('../images/pictos/furniture.png');
}

.picto-garbageRoom{
    content: url('../images/pictos/garbageRoom.png');
}

.picto-ground{
    content: url('../images/pictos/ground.png');
}

.picto-home{
    content: url('../images/pictos/home.png');
}

.picto-hotel{
    content: url('../images/pictos/hotel.png');
}

.picto-housekeeping{
    content: url('../images/pictos/housekeeping.png');
}

.picto-key{
    content: url('../images/pictos/key.png');
}

.picto-kitchen{
    content: url('../images/pictos/kitchen.png');
}

.picto-landry{
    content: url('../images/pictos/landry.png');
}

.picto-light{
    content: url('../images/pictos/light.png');
}

.picto-livingRoom{
    content: url('../images/pictos/livingRoom.png');
}

.picto-lockerRoom{
    content: url('../images/pictos/lockerRoom.png');
}

.picto-message{
    content: url('../images/pictos/message.png');
}

.picto-minibar{
    content: url('../images/pictos/minibar.png');
}

.picto-outside{
    content: url('../images/pictos/outside.png');
}

.picto-pest{
    content: url('../images/pictos/pest.png');
}

.picto-phone{
    content: url('../images/pictos/phone.png');
}

.picto-photo{
    content: url('../images/pictos/photo.png');
}

.picto-plug{
    content: url('../images/pictos/plug.png');
}

.picto-provider{
    content: url('../images/pictos/provider.png');
}

.picto-reception{
    content: url('../images/pictos/reception.png');
}

.picto-recurringMaintenance{
    content: url('../images/pictos/recurringMaintenance.png');
}

.picto-restaurant{
    content: url('../images/pictos/restaurant.png');
}

.picto-restRoom{
    content: url('../images/pictos/restRoom.png');
}

.picto-searchTickets{
    content: url('../images/pictos/searchTickets.png');
}

.picto-staff{
    content: url('../images/pictos/staff.png');
}

.picto-stockRoom{
    content: url('../images/pictos/stockRoom.png');
}

.picto-table{
    content: url('../images/pictos/table.png');
}

.picto-technician{
    content: url('../images/pictos/technician.png');
}

.picto-tgbtRoom{
    content: url('../images/pictos/tgbtRoom.png');
}

.picto-ticket{
    content: url('../images/pictos/ticket.png');
}

.picto-tools{
    content: url('../images/pictos/tools.png');
}

.picto-timer{
    content: url('../images/pictos/timer.png');
}

.picto-trafficArea{
    content: url('../images/pictos/trafficArea.png');
}

.picto-tv{
    content: url('../images/pictos/tv.png');
}

.picto-vacuumRoom{
    content: url('../images/pictos/vacuumRoom.png');
}

.picto-ventilation{
    content: url('../images/pictos/ventilation.png');
}

.picto-waterRoom{
    content: url('../images/pictos/waterRoom.png');
}

.picto-wc{
    content: url('../images/pictos/wc.png');
}

.picto-wifi{
    content: url('../images/pictos/wifi.png');
}

.picto-window{
    content: url('../images/pictos/window.png');
}






.picto-bedding1D{
    content: url('../images/pictos/bedding1D.png');
}

.picto-bedding2S{
    content: url('../images/pictos/bedding2S.png');
}

.picto-bedding1D1S{
    content: url('../images/pictos/bedding1D1S.png');
}

.picto-bedding2S1S{
    content: url('../images/pictos/bedding2S1S.png');
}

.picto-bedding2D{
    content: url('../images/pictos/bedding2D.png');
}

.picto-bedding1D2S{
    content: url('../images/pictos/bedding1D2S.png');
}

.picto-bedding4S{
    content: url('../images/pictos/bedding4S.png');
}















/* PAGE FRAME */

#fixitconnect-frame{
    display                 : grid;
    grid-template-columns   : 250px 1fr;
    grid-template-rows      : 100px calc(100vh - 100px);
    grid-template-areas     : 
      'header header'
      'menu container';
    min-height: 100%;
}

.ManageAllTickets #fixitconnect-frame,
.HousekeepingHistory #fixitconnect-frame,
.HousekeepingManagement #fixitconnect-frame,
.HousekeeperView #fixitconnect-frame{
    grid-template-columns: 70px 1fr;
}

#fixitconnectFrame-header{
    grid-area   : header;
    position    : static;
    z-index     : 1000;
}

#fixitconnectFrame-menu{
    grid-area: menu;
}

#fixitconnectFrame-container{
    grid-area: container;
    overflow: auto;
}
    
#pageContent{
    padding-left    : 50px;
    padding-right   : 50px;
    padding-bottom  : 50px;
    min-height      : 100px;    
}

@media (min-width: 1280px){}

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

@media (min-width: 768px) and (max-width: 1023px) {
    
    #pageContent{
        padding-left    : 10px;
        padding-right   : 10px;
        padding-bottom  : 30px;
    }

    #fixitconnect-frame{
        grid-template-columns: 70px 1fr;
    }
    
    #fixitconnectFrame-header{
      position: sticky;
    }
}

@media (max-width: 767px) {
    
    #pageContent{
        padding-left    : 10px;
        padding-right   : 10px;
        padding-bottom  : 30px;
    }

    #fixitconnect-frame{
        grid-template-columns: 70px 1fr;
    }
    
    #fixitconnectFrame-header{
      position: sticky;
    }
    
}










/* HEADER */

#header{
    background-color        : #ffffff;
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    height                  : 100px;
    box-shadow              : 3px 3px 6px rgba(0,0,0,0.16);
}

#logo{
    align-self  : center;
    margin-left : 50px;
}

.logoMargin{
    padding-top: 12px;
}

#userSession{
    justify-self    : end;
    padding-left    : 50px;
    padding-right   : 50px;
    padding-top     : 22px;
}

.login-profile{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    grid-template-rows      : 1fr 1fr;
    grid-template-areas     : 
      'profileThumb profileName'
      'profileThumb profileRole';
    
    column-gap  : 20px;
    height      : 100%;
    
}

.loginProfile-thumb{
    grid-area   : profileThumb;
    text-align  : right;
}

.loginProfile-name{
    grid-area   : profileName;
    align-self  : end;
    font-family : museo-sans, sans-serif;
    font-weight : 500;
    font-size   : 20px;
}

.loginProfile-role{
    grid-area   : profileRole;
    font-family : museo-sans, sans-serif;
    font-weight : 700;
    font-size   : 14px;
    margin-top  : 2px;
}

.loginProfileThumb-tag{
    border          : 1px solid #ffffff;
    border-radius   : 28px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
}

@media (min-width: 1280px){}

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

@media (max-width: 1023px) {}

@media (max-width: 767px) {
    
    #header{
        grid-template-columns: auto 120px;
    }

    #userSession{
        padding-left    : 10px;
        padding-right   : 10px;
        padding-top     : 22px;
    }
    
    #logo{
        margin-left: 10px;
    }

    .loginProfile-name{
        display: none;
    }

    .loginProfile-role{
        display: none;
    }
}










/* APP HEADER */

.hotelAppHeader{
    background-color    : #ffffff;
    height              : 100px;
    position            : relative;
    text-align          : right;
    padding-right       : 30px;
    padding-top         : 30px;
    padding-left        : 58px;
    background-repeat   : no-repeat;
    background-size     : 100% auto;
    background-position : center;
    margin-bottom       : 30px;
}

.hotelAppHeader-title{
    color           : #ffffff;
    font-size       : 20px;
    font-weight     : 700;
    text-transform  : uppercase;
    text-shadow     : 3px 3px 6px rgba(0,0,0,0.16);
}

.userProfileThumb-tag{
    border          : 1px solid #ffffff;
    border-radius   : 50px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
    position        : absolute;
    bottom          : -20px;
    left            : 3px;
}

.hotelAppMaidHomeHeader{
    background-color: #ffffff;
    height          : 100px;
    padding         : 20px;
}

.hotelAppMaidHomeHeader-thumb{
    height: 100%;
}

.hotelAppHeader-logout .appLogout a{
    color: #ffffff;
}

@media (min-width: 1280px){}

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

@media (max-width: 1023px) {}










/* MENU */

#menu{
    background-color: #ffffff;
    height          : 100%;
    padding-top     : 20px;
    padding-right   : 10px;
    font-size       : 16px;
}

.menu{
    display                 : grid;
    grid-template-columns   : 5px 60px auto;
    height                  : 50px;
    background-color        : #ffffff;
}

.menu-borderLeft{
    background-color: transparent;
}

.menu-picto{
    height  : 50px;
    padding : 10px 0px 10px 15px;
    filter  : invert(57%) sepia(23%) saturate(1147%) hue-rotate(3deg) brightness(94%) contrast(96%);
}

.menu-title{
    align-self: center;
}

.menu.active,
.menu:hover{
    background-color: var(--main-menu-selected-bg);
}

.menu.active .menu-borderLeft{
    background-color: var(--main-color);
}

.menu.active .menu-title{
    align-self  : center;
    color       : var(--main-color);
    font-weight : 500;
}

.ManageAllTickets .menu-title,
.HousekeepingHistory .menu-title,
.HousekeepingManagement .menu-title,
.HousekeeperView .menu-title{
    display: none;
}

.supportButton{
    text-align      : center;
    width           : 30px;
    height          : 30px;
    position        : fixed;
    bottom          : 15px;
    right           : 10px;
    z-index         : 10000;
    padding         : 5px;
    border-radius   : 20px;
    background-color: rgba(255,255,255,0.9);
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

@media (min-width: 1280px){}

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

@media (max-width: 1023px) {

    .menu-title{
        display: none;
    }
}

@media (max-width: 767px) {

    .menu-title{
        display: none;
    }
}










/* CARDS */

.card-container{
    background-color: #ffffff;
    padding         : 15px 30px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
}

.cardContainer-titleBanner{
    font-size       : 18px;
    font-weight     : 500;
    text-transform  : uppercase;
    margin          : -15px -30px 30px;
    padding         : 15px 30px;
    box-shadow      : 0px 3px 6px rgba(0,0,0,0.16);
    font-family     : museo-sans, sans-serif;
    position        : relative;
}

.cardContainer-deleteTicket{
    position    : absolute;
    font-size   : 12px;
    top         : 17px;
    right       : 10px;
}

.tableCard{
    background-color: #ffffff;
    padding         : 15px 30px 30px;
    margin-bottom   : 30px;
    overflow-x      : auto;
}

.tableCard .accordion-content{
    overflow-x: auto;
}

.tableCard .tableStyle{
    border          : none;
    border-bottom   : 1px solid #cccccc;
}

@media (min-width: 1280px){}

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

@media (max-width: 1023px) {}

@media (max-width: 767px) {

    .tableCard{
        padding: 15px 15px 15px;
    }
}










/* HOMES */

.Home h1{
    display: none;
}

.Home h1.displayHomeTitle{
    display: block;
}

td.interventionMaxWidth{
    max-width: 400px;
}

.homeHotel-title{
    height      : 50px;
    font-family : museo-sans, sans-serif;
    font-weight : 700;
    font-size   : 20px;
    margin-left : 20px;
    padding-left: 20px;
    border-left : 2px solid var(--main-font-color);
}

.hotelBanner{
    height              : 150px;
    background-repeat   : no-repeat;
    background-size     : cover;
    background-position : center;
    margin-bottom       : 15px;
    position            : relative;
    border-radius       : var(--main-border-radius);
    box-shadow          : 3px 3px 6px rgba(0,0,0,0.16);
}

.hotelBanner-title{
    position        : absolute;
    bottom          : 15px;
    right           : 20px;
    color           : #ffffff;
    font-size       : 16px;
    font-weight     : 700;
    text-transform  : uppercase;
    text-shadow     : 3px 3px 6px rgba(0,0,0,0.16);
    text-align      : right;
}

.alertFlags .icons{
    width           : 21px;
    height          : 21px;
    font-size       : 14px;
    margin          : 0px 2px;
    background-color: #FF0000;
    color           : #ffffff;
    padding         : 2px;
    border-radius   : 11px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.tableMaid{
    border      : none;
    box-shadow  : 0px 3px 6px rgba(0,0,0,0.16);
    font-size   : 16px;
}

.pictoMaidTableIcon{
    width   : 25px;
    height  : 25px;
}

.maidHomeForm{
    padding: none;
}

.tabs .tools{
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
}

.tabs .tabSection .formFieldRadioOption{
    margin-bottom: 0px;
}

.tabs .tabSection .formFieldRadioOption input{
    display: none;
}

.tabs .tabSection .formFieldRadioOption label{
    border-top      : 5px solid #cccccc;
    background-color: none;
    font-size       : 10px;
    padding         : 10px;
    text-align      : center;
    width           : 100%;
}

.tabs .tabSection .formFieldRadioOption label:hover{
    color: var(--main-color);
}

.tabs .tabSection .formFieldRadioOption input:checked ~ label{
    background-color: #ffffff;
    color           : var(--main-color);
    border-top      : 5px solid var(--main-color);
    box-shadow      : none;
}












/* SECTORS */

.sectors{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    column-gap              : 15px;
    row-gap                 : 30px;
    margin-bottom           : 15px;
}

.sector{
    border-radius: var(--main-border-radius);
}

.sector-card{
    border-radius           : var(--main-border-radius);
    overflow                : hidden;
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 160px 110px;
    background-color        : #ffffff;
    box-shadow              : 3px 3px 6px rgba(0,0,0,0.16);
}

.sectorCard-titleContainer{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : end;
    justify-items           : right;
    padding-right           : 15px;
    padding-bottom          : 15px;
    /*box-shadow              : 0px 3px 6px rgba(0,0,0,0.16);*/
    background-repeat       : no-repeat;
    background-size         : cover;
    background-position     : center;
}

.sectorCardTitleContainer-title{
    font-family     : museo-sans, sans-serif;
    font-weight     : 700;
    font-size       : 14px;
    text-transform  : uppercase;
    color           : #ffffff;
    text-shadow     : 3px 3px 6px rgba(0,0,0,0.16);
}

.sectorCard-inventory{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
}

.sectorCardInventory-section{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 3fr 2fr;
    align-items             : center;
    justify-items           : center;
}

.sectorCardInventorySection-thumb{
    width           : 54px;
    height          : 54px;
    border-radius   : 27px;
    /*background-color: #F5F5F5;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);*/
    align-self      : end;
    overflow        : hidden;
}

.sectorCardInventorySectionThumb-tag{
    height      : 100%;
    text-align  : center;
}

.sectorCardInventorySection-value{
    font-size   : 25px;
    font-weight : bold;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){

    .sectors{
        grid-template-columns   : repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .sectors{
        grid-template-columns   : repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .sectors{
        grid-template-columns   : 1fr;
    }
}












/* HOTELS */

.hotels{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    column-gap              : 15px;
    row-gap                 : 30px;
    margin-bottom           : 15px;
}

.hotel{
    border-radius: var(--main-border-radius);
}

.hotel-card{
    border-radius           : var(--main-border-radius);
    overflow                : hidden;
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 160px 110px 60px;
    background-color        : #ffffff;
    box-shadow              : 3px 3px 6px rgba(0,0,0,0.16);
}

.hotelCard-titleContainer{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : end;
    justify-items           : right;
    padding-right           : 15px;
    padding-bottom          : 15px;
    /*box-shadow              : 0px 3px 6px rgba(0,0,0,0.16);*/
    background-repeat       : no-repeat;
    background-size         : cover;
    background-position     : center;
}

.hotelCardTitleContainer-title{
    font-family     : museo-sans, sans-serif;
    font-weight     : 700;
    font-size       : 14px;
    text-transform  : uppercase;
    color           : #ffffff;
    text-shadow     : 3px 3px 6px rgba(0,0,0,0.16);
}

.hotelCard-inventory{
    display                 : grid;
    grid-template-columns   : repeat(2,1fr);
}

.hotelCardInventory-section{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 3fr 2fr;
    align-items             : center;
    justify-items           : center;
}

.hotelCardInventorySection-thumb{
    width           : 54px;
    height          : 54px;
    border-radius   : 27px;
    /*background-color: #F5F5F5;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);*/
    align-self      : end;
    overflow        : hidden;
}

.hotelCardInventorySectionThumb-tag{
    height      : 100%;
    text-align  : center;
}

.hotelCardInventorySection-value{
    font-size   : 25px;
    font-weight : bold;
}

.hotelCard-contact{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : center;
    justify-items           : center;
    background-color        : #eeeeee;
}

.hotelCardContact-container{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    grid-template-rows      : 1fr 1fr;
    column-gap              : 15px;
    grid-template-areas     : 
      'hotelContactThumb hotelContactName'
      'hotelContactThumb hotelContactPhone';
}

.hotelCardContactContainer-thumb{
    grid-area       : hotelContactThumb;
    border          : 1px solid #ffffff;
    border-radius   : 20px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
}

.hotelCardContactContainer-name{
    grid-area   : hotelContactName;
    align-self  : end;
    /*font-family : museo-sans, sans-serif;
    font-weight : 700;*/
}

.hotelCardContactContainer-phone{
    grid-area   : hotelContactPhone;
    align-self  : start;
    font-size   : 12px;
    margin-top  : 2px;
}

.hotelCardContactContainer-phone .icons{
    margin-right: 5px;
}

.subtitleSector{
    margin: -28px 0px 30px;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){

    .hotels{
        grid-template-columns   : repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .hotels{
        grid-template-columns   : repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .hotels{
        grid-template-columns   : 1fr;
    }
}










/* CREATE TICKET */

.createTicketTitle{
    background-color: #ffffff;
    padding         : 15px 10px;
    text-align      : center;
    text-transform  : uppercase;
    color           : var(--main-color);
    font-weight     : 700;
    font-size       : 14px;
    box-shadow      : inset 0px 3px 3px rgba(0,0,0,0.16);
    margin-bottom   : 0px;
    margin-top      : 15px;
    margin-left     : 0px;
}

.createTicketPath{
    width           : 100%;
    font-family     : museo-sans, sans-serif;
    font-size       : 10px;
    text-transform  : uppercase;
    margin-bottom   : 20px;
    padding         : 5px 10px;
    text-align      : center;
    border-bottom   : 1px solid #cccccc;
    box-shadow      : 0px -3px 3px rgba(0,0,0,0.16);
}

.createTicket-form{
    margin-bottom: 30px;
}

.createTicket-start,
.createTicket-area,
.createTicket-field{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    grid-column-gap         : 30px;
    grid-row-gap            : 30px;
    padding                 : 0px 30px 30px;
}

.createTicket-floor,
.createTicket-room{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    grid-column-gap         : 5px;
    grid-row-gap            : 15px;
    align-items             : center;
    justify-items           : center;
    padding                 : 0px 30px 30px;
}

.createTicket-section{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-row-gap            : 15px;
    padding                 : 0px 30px 30px;
}

.createTicketButtonPictoContainer-picto{
    font-family     : museo-sans, sans-serif;
    height          : 100px;
    width           : 100px;
    background-color: #ffffff;
    border-radius   : var(--main-border-radius);
    border: var(--main-border-width) solid var(--main-font-color);
    /*box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);*/
    overflow        : hidden;
    /*filter          : invert(57%) sepia(23%) saturate(1147%) hue-rotate(3deg) brightness(94%) contrast(96%);*/
}

.createTicket-floor .createTicketButtonPictoContainer-picto,
.createTicket-room .createTicketButtonPictoContainer-picto{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : center;
    height                  : 60px;
    width                   : 60px;
    background-color        : #ffffff;
    border-radius           : var(--main-border-radius);
    /*box-shadow              : 3px 3px 6px rgba(0,0,0,0.16);
    color                   : var(--main-color);*/
    font-size               : 20px;
    font-weight             : 700;
    overflow                : hidden;
}

.createTicket-section .createTicketButtonPictoContainer-picto{
    height                  : auto;
    width                   : 100%;
    background-color        : #ffffff;
    border-radius           : 0px;
    /*box-shadow              : 3px 3px 6px rgba(0,0,0,0.16);
    color                   : var(--main-color);*/
    font-size               : 12px;
    padding                 : 10px;
    font-weight             : 700;
}

.createTicketButtonTitle{
    font-family     : museo-sans, sans-serif;
    text-transform  : uppercase;
    margin-top      : 5px;
    font-size       : 12px;
    font-weight     : 700;
}

.createTicket-button{
    text-align: center;
}

.ticketForm{
    padding: 0px 15px;
}

@media (min-width: 1280px){

    .createTicket-start,
    .createTicket-area,
    .createTicket-field{
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1279px){

    .createTicket-start,
    .createTicket-area,
    .createTicket-field{
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .createTicket-start,
    .createTicket-area,
    .createTicket-field{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {

    .createTicket-start,
    .createTicket-area,
    .createTicket-field{
        grid-template-columns: repeat(2, 1fr);
    }
}










/* TICKETS */

.ValidateTicketModulePopUp,
.ShowTicketPicturesModulePopUp,
.AddAuditAnomalyModulePopUp,
.ShowPictureModulePopUp,
.AssignAnomaliesModulePopUp,
.AddNewProviderModulePopUp,
.frame80pctPopUp,
.HkRoomMaidActionModulePopUp,
.HkRoomMaidToolsModulePopUp,
.KpisEquipmentsTypesDonutsModulePopUp,
.AuditEquipmentSelectionModulePopUp,
.MergeAnomaliesModulePopUp,
.EditRoomEquipmentsModulePopUp,
.HkRoomAddDayUseModulePopUp,
.HkEditMultipleRoomsModulePopUp,
.AddAreaToRoomsModulePopUp,
.AddCategoryToRoomsModulePopUp,
.EditRoomTypeDefaultEquipmentsModulePopUp,
.AddRoomsByFloorModulePopUp,
.AddZonesByTypeAndFloorModulePopUp,
.HkEditEndDayModulePopUp,
.AddRoomZoneModulePopUp,
.EditRoomZoneModulePopUp{
    width : 80%;
    height: 80%;
}

.AssignTicketModulePopUp.fineatyPopUp {
    border: none;
}

.fullScreenPopup{
    height: 100%;
}

.ticketModule-container{
    height                  : 100%;
    display                 : grid;
    grid-template-columns   : auto auto;
    grid-column-gap         : 30px;
}

.ticket-container{
    display             : grid;
    grid-template-rows  : auto 1fr;
    grid-row-gap        : 15px;
    height              : 100%;
}

.ticketForm{
    height: 100%;
}

.ticketForm-container{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-auto-rows          : min-content;
    grid-row-gap            : 15px;
    padding                 : 15px 30px;
    border                  : 1px solid var(--main-color);
    border-radius           : var(--main-border-radius);
}

.ticketForm-title{
    text-align      : center;
    font-family     : museo-sans, sans-serif;
    text-transform  : uppercase;
    padding-bottom  : 15px;
    font-size       : 18px;
    font-weight     : 500;
}

.ticketForm-subtitle{
    text-align      : center;
    font-family     : museo-sans, sans-serif;
    text-transform  : uppercase;
    padding-bottom  : 15px;
    font-size       : 12px;
    font-weight     : 300;
    margin-top      : -15px;
}

.cardContainerInfos-value{
    font-size   : 14px;
    margin-top  : 5px;
    color       : var(--main-color);
}

.cardContainer-infos{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    grid-column-gap         : 15px;
    grid-row-gap            : 15px;
}

.cardContainerInfos-value{
    max-width: 400px;
}

.cardContainer-date{
    font-family     : arial, sans-serif;
    font-size       : 9px;
    font-weight     : normal;
    margin-bottom   : -15px;
    padding         : 2px 0px;
    color           : var(--main-label-color);
}

.cardContainer-comments{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-row-gap            : 15px;
    overflow-x              : auto;
}

.cardContainerComments-container{
    display                 : grid;
    grid-template-columns   : 100px auto;
    grid-column-gap         : 15px;
    grid-row-gap            : 15px;
}

.cardContainerCommentsContainerDocs{
    text-align: center;
}

.cardContainerCommentsContainerDocs img{
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
}

.cardContainerCommentsContainerComment-header{
    display                 : grid;
    grid-template-columns   : auto 100px;
    grid-column-gap         : 15px;
    border-bottom           : 1px solid #cccccc;
    margin-bottom           : 10px;
}

.cardContainerCommentsContainerCommentHeader-intervener{
    font-family     : museo-sans, sans-serif;
    font-size       : 10px;
    font-weight     : 700;
    text-transform  : uppercase;
    color           : #787878;
}

.cardContainerCommentsContainerCommentHeader-date{
    font-size   : 9px;
    font-weight : normal;
    color       : var(--main-label-color);
    text-align  : right;
}

.cardContainerCommentsContainerComment-type{
    font-family     : museo-sans, sans-serif;
    font-size       : 8px;
    font-weight     : 300;
    text-transform  : uppercase;
    color           : #787878;
    margin-top      : -7px;
}

.cardContainerCommentsContainerComment-value{
    padding-left: 15px;
}

form.ticketForm{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-auto-rows          : min-content;
    grid-row-gap            : 15px;
}

.ticketForm .roomId{
    display                 : grid;
    grid-template-columns   : repeat(2,1fr);
}

.ticketForm .intervenerType,
.ticketForm .equipmentType{
    display                 : grid;
    grid-template-columns   : repeat(5,1fr);
}

.ticketForm .intervenerType.staffAssignment{
    display                 : grid;
    grid-template-columns   : repeat(3,1fr);
}

.ticketOptions{
    display                 : grid;
    grid-template-columns   : 1fr 170px;
    grid-column-gap         : 30px;
}

.ticketChexboxOptions .formFieldLabelColon{
    display: none;
}

.intervenerSelection .formFieldRadioOption{
    margin: 0px;
}

.assignationForm{
    margin-bottom   : 0px;
    padding-bottom  : 15px;
}

.assignationForm .formFieldRadioSkin{
    display: inline;
}

.intervenerSelection .formFieldCheckboxOption,
.intervenerSelection .formFieldRadioOption{
    margin-left: 35%;
}

.intervenerSelection .newProviderdiv label{
    margin-left: calc(35% - 18px);
}

.assignationForm .ticketOptionsComment textarea{
    min-height: 80px;
}

.assignationForm .formFieldMultiCheckbox .formFieldCheckboxOption label{
    color           : #787878;
    text-transform  : none;
    font-size       : 12px;
    font-weight     : lighter;
}

.assignationForm .formLink.fineatyLink{
    margin-top: 0px;
}

.pictureButton{
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
    max-height      : 100px;
}

.pictureButton:hover{
    box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
}

.cardContainerCommentsContainer-docs{
    padding-top: 12px;
    font-size: 20px;
}

.ShowTicketPicturesModulePopUp{
    text-align: center;
}

/*.ValidateTicket{
    overflow-y: scroll;
}*/

.staffEndInterventionButtons{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    grid-column-gap         : 5px;
}

.staffEndInterventionButtons .formLink.fineatyLink,
.contractEndInterventionButtons .formLink.fineatyLink{
    font-size   : 8px;
    width       : 100px;
    padding     : 5px 5px;
}

@media (min-width: 1280px){}

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

@media (min-width: 768px) and (max-width: 1023px) {

    .ticketForm .intervenerType,
    .ticketForm .equipmentType{
        grid-template-columns   : repeat(4,1fr);
    }

    .ticketForm .intervenerType.staffAssignment{
        grid-template-columns   : repeat(2,1fr);
    }
}

@media (max-width: 767px) {

    .ValidateTicketModulePopUp,
    .ShowTicketPicturesModulePopUp,
    .TicketCardModulePopUp,
    .AddAuditAnomalyModulePopUp,
    .ShowPictureModulePopUp,
    .AssignAnomaliesModulePopUp,
    .AddNewProviderModulePopUp,
    .HkRoomMaidActionModulePopUp,
    .HkRoomMaidToolsModulePopUp,
    .KpisEquipmentsTypesDonutsModulePopUp,
    .AuditEquipmentSelectionModulePopUp,
    .MergeAnomaliesModulePopUp,
    .EditRoomEquipmentsModulePopUp,
    .HkRoomAddDayUseModulePopUp,
    .HkEditMultipleRoomsModulePopUp,
    .AddAreaToRoomsModulePopUp,
    .AddCategoryToRoomsModulePopUp,
    .EditRoomTypeDefaultEquipmentsModulePopUp,
    .AddRoomsByFloorModulePopUp,
    .AddZonesByTypeAndFloorModulePopUp,
    .HkEditEndDayModulePopUp,
    .AddRoomZoneModulePopUp,
    .EditRoomZoneModulePopUp{
      width : 100%;
      height: 100%;
    }

    .ticketModule-container{
        height                  : 100%;
        display                 : grid;
        grid-template-columns   : 1fr;
        grid-row-gap            : 30px;
    }
    
    .ValidateTicket .TicketCard{
        display: none;
    }

    .ticketOptions{
        grid-template-columns   : 1fr;
        grid-row-gap            : 15px;
    }
    
    .ticketForm-container{
        padding: 15px;
    }

    .ticketForm .intervenerType,
    .ticketForm .equipmentType{
        grid-template-columns   : repeat(3,1fr);
    }

    .ticketForm .intervenerType.staffAssignment{
        grid-template-columns   : repeat(2,1fr);
    }
}











/* WELCOME */

.welcome-logo{
    text-align: center;
    margin-top: 200px;
}

.welcome-tagLine{
    font-size       : 18px;
    margin-top      : 30px;
    text-align      : center;
    text-transform  : uppercase;
}

@media (min-width: 1280px){}

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

@media (min-width: 768px) and (max-width: 1023px) {}

@media (max-width: 767px) {

    .welcome-logo{
        margin-top  : 100px;
        padding     : 0px 15px;
    }

    .welcome-tagLine{
        font-size   : 14px;
        margin-top  : 0px;
    }
}











/* MAINTENANCE CONTRACT */

.grid2Columns-container{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    grid-column-gap         : 15px;
    grid-auto-rows          : min-content;
}

.grid2Columns-container > div{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-row-gap            : 15px;
    grid-auto-rows: min-content;
}

.maintenanceContract-thumb{
    width           : 100px;
    height          : 100px;
    border-radius   : 50px;
    background-color: #FFFFFF;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
}

.maintenanceContractThumb-tag{
    height      : 100%;
    text-align  : center;
}

iframe.fullFrame{
    width: 100%;
    height: 55vw;
}

.maintenanceCard-contact{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : center;
    justify-items           : left;
    background-color        : #eeeeee;
    margin                  : -15px -30px 0px;
    padding                 : 30px 30px;
}

.maintenanceCardContact-container{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    grid-template-rows      : 1fr 1fr;
    column-gap              : 15px;
    grid-template-areas     : 
      'maintenanceContactThumb maintenanceContactName'
      'maintenanceContactThumb maintenanceContactPhone';
}

.maintenanceCardContactContainer-thumb{
    grid-area       : maintenanceContactThumb;
    border          : 1px solid #ffffff;
    border-radius   : 44px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
}

.maintenanceCardContactContainer-name{
    grid-area   : maintenanceContactName;
    align-self  : end;
    font-family : museo-sans, sans-serif;
    font-weight : 700;
    font-size: 20px;
}

.maintenanceCardContactContainer-infos{
    grid-area   : maintenanceContactPhone;
    align-self  : start;
    font-size   : 12px;
    margin-top  : 2px;
}

.maintenanceCardContactContainer-info{
    margin-top: 3px;
}

.maintenanceCardContactContainer-info .icons{
    margin-right: 10px;
    margin-left : 10px;
}

@media (min-width: 1280px){}

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

@media (min-width: 768px) and (max-width: 1023px) {}

@media (max-width: 767px) {

    .grid2Columns-container{
        grid-template-columns: 1fr;
    }
}











/* MANAGE PROVIDERS */

.providerHasHotel{
    font-weight     : bold;
    width           : 100%;
    min-height      : 17px;
    border-radius   : 5px;
    border          : 1px solid #cccccc;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.searchForm{
    width   : 300px;
    margin  : 15px 0px;
    display : inline-block;
}

.searchForm.rightFloat{
    float       : right;
    margin      : 0px;
    margin-top  : 8px;
}

.searchPattern{
    font-family : 'icofont', sans-serif;
    text-align  : right;
}

@media (min-width: 1280px){}

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

@media (min-width: 768px) and (max-width: 1023px) {
}

@media (max-width: 767px) {
    
    .searchForm{
        width: 100%;
        margin-bottom: 15px;
    }
}










/* MANAGE ACCOUNTS */

.intervenerLists{
    display                 : grid;
    grid-template-columns   : repeat(3, 1fr);
    grid-column-gap         : 15px;
    grid-row-gap            : 15px;
    padding                 : 15px 0px;
}

.cardAddButton-container{
    position: relative;
}

.cardAddButton-container .card-container{
    height: 100%;
}

.miniButton.cardAddButton{
    position: absolute;
    width: 24px;
    height: 24px;
    top: -12px;
    right: -12px;
    padding: 0px;
    border-radius: var(--main-bubble-button-border-radius);
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){
    
    .intervenerLists{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    
    .intervenerLists{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    
    .intervenerLists{
        grid-template-columns: 1fr;
    }
}











/* POP UP */

.fineatyPopUp {
    background-color    : #f5f5f5;
    -moz-box-shadow     : 3px 3px 6px rgba(0,0,0,0.32);
    -webkit-box-shadow  : 3px 3px 6px rgba(0,0,0,0.32);
    box-shadow          : 3px 3px 6px rgba(0,0,0,0.32);
    border              : 1px solid var(--main-font-color);
}

.defaultPopUp,
.frame80pctPopUp {
    -webkit-border-radius   : var(--main-border-radius);
    -moz-border-radius      : var(--main-border-radius);
    border-radius           : var(--main-border-radius);
}

.fineatyPopUpHeader{
    background-color: var(--main-font-color);
    color           : var(--main-button-second-color);
    padding         : 15px 15px;
}

.fineatyPopUpClose a{
    background-image   : url(../images/exit.png);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : 20px;
    color              : rgba(0,0,0,0) !important;
}

.formFieldCheckboxOption span:not(.icons):not(.pictoCheckboxValue-picto):not(.inputInsideSpan):not(.fineatyThumb):not(.fineatyThumbImage),
.formFieldCheckboxOption label:not(.inputInsideLabel){
    display: none;
}

.formFieldMultiCheckboxdiv .formFieldMultiCheckbox:not(.buttonsMultiCheckbox)  .formFieldCheckboxOption label:not(.inputInsideLabel) {
    font-size   : 10px;
    font-weight : normal;
    display     : inline;
    padding-left: 10px;
}

.forbiddenCreateAccount{
    display: none;
}

/*.remembermediv{
    display: none;
}

.LoginModulePopUp,
.fineatyPopUp .Login{
    color: #f5f5f5;
}*/

.buttonCheckbox{
    text-align: center;
}

.buttonCheckbox .formFieldCheckboxOption label:not(.inputInsideLabel),
.fineatyButton.buttonCheckbox,
.buttonRadio .formFieldRadioOption label:not(.inputInsideLabel),
.fineatyButton.buttonRadio{
    display         : inline-block;
    border          : 1px solid var(--main-font-color);
    background-color: var(--main-button-second-color);
    border-radius   : 0px;
    /*box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);*/
    color           : var(--main-font-color);
    font-size       : 10px;
    padding         : 10px;
    font-weight     : 700;
}

.tableRowCheckbox .formFieldCheckboxOption label:not(.inputInsideLabel){
    display         : inline-block;
    border          : 4px solid #ffffff;
    background-color: #ffffff;
    border-radius   : 0px;
    width           : 100%;
    padding         : 0px;
}

.buttonCheckbox .formFieldCheckboxOption input,
.buttonRadio .formFieldRadioOption input,
.tableRowCheckbox .formFieldCheckboxOption input{
    display: none;
}

.fineatyButton.buttonCheckbox{
    color       : #787878;
    border      : 1px solid #787878;
    box-shadow  : none;
}

.buttonCheckbox .formFieldCheckboxOption input:checked ~ label:not(.inputInsideLabel),
.fineatyButton.buttonCheckbox:hover,
.buttonRadio .formFieldRadioOption input:checked ~ label:not(.inputInsideLabel),
.fineatyButton.buttonRadio:hover{
    color       : var(--main-color);
    border-color: var(--main-color);
    /*box-shadow  : 3px 3px 6px rgba(0,0,0,0.16);*/
}

.tableRowCheckbox .formFieldCheckboxOption input:checked ~ label:not(.inputInsideLabel){
    border: 4px solid var(--main-color);
}










/* MAID HOME */

.MaidHome .modelsIds{
    display                 : grid;
    grid-template-columns   : 1fr;
    row-gap                 : 15px;
}

.MaidHome .modelsIds .radioButton{
    margin: 0px 15px;
}

.MaidHome .modelsIds .radioButton .formFieldRadioOption label{
    width: 100%;
}

.MaidHome .modelRoomsGrid{
    display                 : grid;
    grid-template-columns   : repeat(3, 1fr);
    grid-gap                : 15px;
}


.maidActionsForm{
    margin-bottom: 0px;
}

.maidActionsForm,
.maidActionsForm .formLinkdiv,
.maidActionsForm .formLinkdiv a,
.maidActionsForm .formLinkdiv a span,
.maidActionsForm .formLinkdiv a span .hkAction-preparation{
    height: 100%;
}

.maidActionsForm .formLink.fineatyLink{
    margin: 0px;
}

.maidActionsForm .formLinkdiv a span{
    width: 100%;
}

.maidActionsForm .formLinkdiv a span .hkAction-preparation{
    display              : grid;
    grid-template-columns: 1fr;
    align-items          : center;
    text-align           : center;
}

.maidHomeForm td{
    padding: 18px 4px;
}

.maidDayUseContainer{
    border       : 1px solid var(--main-color);
    margin-bottom: 15px;
}

.maidDayUseContainer-title{
    text-align      : center;
    text-transform  : uppercase;
    background-color: #ffffff;
    font-size       : 10px;
    font-weight     : 700;
    padding         : 10px;
    color           : var(--main-color);
    border-bottom   : 1px solid var(--main-color);
}










/* MAINTENANCE CONTRACT */

.gmMaintenanceContracts{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    column-gap              : 15px;
    row-gap                 : 15px;
    padding-bottom          : 15px;
}

.gmMaintenanceContract-card{
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    padding         : 15px;
    background-color: #ffffff;
    position        : relative;
    margin-bottom: 15px;
}

.gmMaintenanceContractCard-title{
    font-family     : museo-sans, sans-serif;
    font-weight     : 500;
    font-size       : 14px;
    margin-bottom   : 15px;
    text-align      : center;
    border-bottom   : 1px solid var(--main-label-color);
    padding-bottom  : 5px;
    padding-right   : 10px;
}

.gmMaintenanceContractCard-infos{
    display                 : grid;
    grid-template-columns   : 70px 1fr;
    align-items             : center;
    /*grid-template-rows      : 160px 110px 60px;*/
}

.gmMaintenanceContractCardInfos-thumb .maintenanceContract-thumb{
    height          : 70px;
    width           : 70px;
    border-radius   : 35px;
}

.gmMaintenanceContractCardInfos-details{
    margin-left: 15px;
}

.gmMaintenanceContractCardInfosDetails-provider{
    font-family     : museo-sans, sans-serif;
    font-weight     : 700;
    text-transform  : uppercase;
}

.gmMaintenanceContractCardInfosDetails-date{
    font-size   : 12px;
    margin-top  : 5px;
}

.gmMaintenanceContractCardInfosDetails-autoRenew{
    font-size   : 10px;
    margin-top  : 5px;
}

.MaintenanceContractCardModulePopUp .buttonContainer,
.MaintenanceContractCardModulePopUp .editButton{
    display: none;
}

.gmMaintenanceContractCard-deleteTicket{
    position    : absolute;
    font-size   : 14px;
    top         : 12px;
    right       : 10px;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){

    .gmMaintenanceContracts{
        grid-template-columns   : repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .gmMaintenanceContracts{
        grid-template-columns   : repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .gmMaintenanceContracts{
        grid-template-columns   : 1fr;
    }
}










/* MANAGE ZONES */

.equipments-container, .areas-container {
    background-color: #ffffff;
    padding         : 3px 20px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
    margin-bottom   : 20px;

}

.equipments-container .formFieldMultiCheckboxdiv{
    padding-bottom: 20px;
}
  
.align-button{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    column-gap              : 15px;
}











.editProviderGrid{
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
    column-gap              : 50px;
    row-gap                 : 50px;
}

.EditProvider .formImage img{
    border          : inherit;
    border-radius   : 0px;
    padding         : 0px;
    background      : none;
    color           : var(--main-font-color);
    box-shadow      : none;
}

.ProviderCard .address{
    font-size: 12px;
}

.ProviderCard .addressLabel{
    display         : block;
    font-weight     : 700;
    margin          : 0px 0px 5px;
    text-transform  : uppercase;
    text-decoration : underline;
    font-size       : 14px;
}

.ProviderCard .addressStreet,
.ProviderCard .addressState{
    display: block;
}

.ProviderCard .addressCountry{
    text-transform: uppercase;
    display       : block;
}

.ProviderCard .addressPostCode,
.ProviderCard .addressCountry{
    margin-top: 10px;
}

.ProviderCard .addressCity:before{
    content    : " - ";
    margin-left: 4px;
}

.alignLabel{
    font-size       : 10px;
    font-weight     : lighter;
    text-transform  : uppercase;
    color           : var(--main-label-color);
    margin-right    : 5px;
}

.providerThumb{
    border          : 2px solid #ffffff;
    border-radius   : 100px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
    margin-bottom   : 10px;
    background-color: #ffffff;
}


.EditProvider .formImage .formImage-image{
    font-weight     : 700;
    background      : none;
    background-color: #ffffff;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    text-align      : center;
    height          : 100px;
    width           : 100px;
    border-radius   : 50px;
    border          : 1px solid #ffffff;
    overflow        : hidden;
}

@media (min-width: 1280px){}
@media (min-width: 1024px) and (max-width: 1279px){}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {

    .editProviderGrid{
        grid-template-columns: 1fr;
    }
}










/* HOUSEKEEPER VIEW */

.housekeeperView-rooms,
.auditZoneSelection-rooms{
    display                 :grid;
    grid-template-columns   :repeat(11, 100px);
    grid-gap                :15px;
    justify-content         : center;
}

.housekeeperViewRooms-roomContainer,
.auditZoneSelectionRooms-roomContainer{
    width           : 100px;
    height          : 100px;
    background-color: #ffffff;
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    padding         : 5px;
}

.housekeeperViewRooms-roomContainer{
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.housekeeperViewRoom-title{
    text-align      : center;
    font-size       : 14px;
    font-weight     : 700;
    color           : var(--main-font-color);
    margin-bottom   : 15px;
}

.housekeeperViewRooms-roomContainer.notClickable{
    box-shadow: none;
}

.notClickable label{
    cursor: default !important;
}

.auditZoneSelectionRooms-roomContainer{
    display           : grid;
    grid-template-rows: 1fr auto;
    text-align        : center;
}

.auditZoneSelectionRoomsRoomContainer-title{
    text-align      : center;
    font-size       : 14px;
    font-weight     : 700;
    color           : var(--main-font-color);
    cursor          : pointer;
    width           : 100%;
}

.auditZoneSelectionRoomsRoomContainer-title.notRoom{
    font-size: 10px;
}

.auditZoneSelectionRoomsRoomContainer-tools{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    align-items: end;
    font-size: 20px;
    margin-bottom: 5px;
}

.auditZoneSelectionRoomsRoomContainer-tool{
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    align-items: end;
    font-size: 20px;
    margin-bottom: 5px;
}

/* @media (min-width: 1571px){

    .housekeeperView-rooms{
        grid-template-columns:repeat(11, 100px);
    }
}

@media (min-width: 1481px) and (max-width: 1570px){

    .housekeeperView-rooms{
        grid-template-columns:repeat(10, 100px);
    }
} */

@media (min-width: 1547px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(13, 100px);
    }
}

@media (min-width: 1437px) and (max-width: 1546px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(12, 100px);
    }
}

/* @media (min-width: 1371px) and (max-width: 1480px){

    .housekeeperView-rooms{
        grid-template-columns:repeat(9, 100px);
    }
} */

@media (min-width: 1327px) and (max-width: 1436px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(11, 100px);
    }
}

/* @media (min-width: 1261px) and (max-width: 1370px){

    .housekeeperView-rooms{
        grid-template-columns:repeat(8, 100px);
    }
} */

@media (min-width: 1217px) and (max-width: 1326px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(10, 100px);
    }
}

/* @media (min-width: 1151px) and (max-width: 1260px) {

    .housekeeperView-rooms{
        grid-template-columns:repeat(7, 100px);
    }
} */

@media (min-width: 1107px) and (max-width: 1216px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(9, 100px);
    }
}

/* @media (min-width: 1024px) and (max-width: 1150px) {

    .housekeeperView-rooms{
        grid-template-columns:repeat(6, 100px);
    }
} */

@media (min-width: 997px) and (max-width: 1106px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(8, 100px);
    }
}

@media (min-width: 885px) and (max-width: 996px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(7, 100px);
    }
}

@media (min-width: 775px) and (max-width: 884px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(6, 100px);
    }
}

@media (min-width: 665px) and (max-width: 774px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(5, 100px);
    }
}

@media (min-width: 555px) and (max-width: 664px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(4, 100px);
    }
}

@media (min-width: 445px) and (max-width: 554px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(3, 100px);
    }
}

@media (min-width: 335px) and (max-width: 444px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns:repeat(2, 100px);
    }
}

@media (max-width: 334px) {

    .housekeeperView-rooms,
    .auditZoneSelection-rooms{
        grid-template-columns: 1fr;
    }
}





.previewsContainer{
    display                 : grid;
    grid-template-columns   : 200px 1fr;
    grid-gap                : 20px;
    transition              : all 0.5s;
    position                : relative;
    padding                 : 15px;
    height                  : 100%;
    max-height              : 100%;
}

.previewList{
    background-color: var(--secondary-bg-color);
    height          : 100%;
    max-height      : 100%;
    overflow-y      : scroll;
}

.previewList-title{
    background-color: var(--main-bg-color);
    text-transform  : uppercase;
    text-align      : center;
    padding         : 20px 0px 10px;
    /* color           : var(--main-th-color); */
}

.listButton,
.fineatyButton.listButton{
    width           : 100%;
    margin-top      : -1px;
    font-size       : 10px;
    font-weight     : 500;
    border          : none;
    border-bottom   : 1px solid #F5F5F5;
    border-top      : 1px solid #F5F5F5;
    text-align      : center;
    border-radius   : 0px;
    padding         : 10px;
}

.fineatyButton.listButton:hover{
    color: #9d002c;
}

.listButton.active,
.listButton.active:hover{
    color           : #ffffff;
    background-color: #9d002c;
}

.previewList-hidden{
    position: absolute;
    top     : 0px;
    right   : 0px;
    color   : #aaaaaa;
    cursor  : pointer;
}










/* HOUSEKEEPING ACTION */

.hkAction-roomTitle{
    text-align      : center;
    text-transform  : uppercase;
    font-weight     : 700;
    font-size       : 18px;
    margin-bottom   : 5px;
}

.hkAction-roomStatus{
    text-align  : center;
    margin      : 0px;
}

.hkAction-intervener{
    text-align: center;
}

.hkAction-preparations{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    grid-gap                : 5px;
}

.hkAction-preparation{
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
    background-color: #FFFFFF;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    padding         : 5px 15px;
}

.hkActionPreparation-title{
    padding         : 5px;
    text-transform  : uppercase;
    text-align      : center;
    font-size       : 8px;
    color           : var(--main-font-color);
    
}

.hkActionPreparation-value{
    padding     : 5px;
    text-align  : center;
    font-size   : 20px;
}

.hkActionPreparation-value > span{
    width   : 30px;
    height  : 30px;
}

.hkActionPreparation-value .picto-bedSheet{
    width       : 20px;
    height      : 20px;
    margin-top  : 5px;
}

.dayUseGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    
}










/* HOUSEKEEPING NOTIFICATION */

.notification-container{
    display                 : grid;
    grid-template-columns   : 25px minmax(50px, auto) 1fr 25px;
    margin                  : 5px 0px;
    background-color        : rgba(82, 192, 191, 0.3);
    color                   : var(--state-green);
    align-items             : center;
}

.notification-container.unread{
    background-color: rgba(253, 159, 79, 0.3);
    color           : var(--state-orange);
}

.notification-read,
.notification-delete{
    text-align      : center;
    padding         : 5px;
    background-color: var(--state-green);
    color           : rgba(197, 229, 229, 1);
    height          : 100%;
}

.unread .notification-read,
.unread .notification-delete{
    background-color: var(--state-orange);
    color           : rgba(246, 219, 197, 1);
}

.notification-room{
    padding     : 0px 10px;
    text-align  : center;
    font-weight : 900;
    border-right: 1px solid var(--state-green);
    height      : 100%;
    vertical-align: middle;
    padding-top: 5px;
}

.unread .notification-room{
    border-right: 1px solid var(--state-orange);
}

.notification-title{
    padding     : 0px 10px;
    font-size   : 10px;
    padding-top : 5px;
}











/* KPIS */

.kpisGrid-container{
    display                 : grid;
    grid-template-columns   : auto 240px;
    grid-gap                : 20px;
}

.kpisGrid-content{
    display                 : grid;
    grid-template-columns   : repeat(5,var(--kpis-donut-size));
    grid-gap                : 20px;
    padding                 : 20px;
}

@media (min-width: 1494px) and (max-width: 1699px){

    .kpisGrid-content{
        grid-template-columns: repeat(4,var(--kpis-donut-size));
    }
}

@media (min-width: 1295px) and (max-width: 1493px){

    .kpisGrid-content{
        grid-template-columns: repeat(3,var(--kpis-donut-size));
    }
}

@media (min-width: 1094px) and (max-width: 1294px){

    .kpisGrid-content{
        grid-template-columns: repeat(2,var(--kpis-donut-size));
    }
}

@media (min-width: 1023px) and (max-width: 1093px){

    .kpisGrid-content{
        grid-template-columns: var(--kpis-donut-size);
    }
}

@media (min-width: 833px) and (max-width: 1022px){

    .kpisGrid-content{
        grid-template-columns: repeat(2,var(--kpis-donut-size));
    }
}

@media (max-width: 832px){

    .kpisGrid-container{
        grid-template-columns: 1fr;
    }

    .kpisGrid-content{
        grid-template-columns: var(--kpis-donut-size);
    }
}











.addRecurringMaintenanceRooms{
    display                 : grid;
    grid-template-columns   : repeat(8,1fr);
    column-gap              : 15px;
    row-gap                 : 15px;
    padding-bottom          : 30px;
}

.addRecurringMaintenanceEquipment-title{
    text-align      : center;
    color           : var(--main-color);
    font-family     : museo-sans, sans-serif;
    text-transform  : uppercase;
    font-size       : 25px;
    padding-top     : 50px;
    font-weight     : 700;
}

.addRecurringMaintenanceEquipment-type{
    text-align      : center;
    font-weight     : lighter;
    font-size       : 12px;
    text-transform  : uppercase;
    padding-bottom  : 30px;
}

.accordion-content{
    /* min-height: 0px !important; */
    max-height  : 0;
}

.accordion-content{
    overflow    : hidden;
    transition  : max-height 0.2s ease-out;
    padding     : 0px 15px;
    margin      : 0px -15px;
}

.HeadOfficeHome .accordion-content,
.GeneralManagerHome .accordion-content,
.MaintenanceContractCard .accordion-content,
.EditRoomEquipmentsModulePopUp .accordion-content,
.CreateTicket .accordion-content,
.EditProvider .accordion-content,
.EditRoomTypeDefaultEquipmentsModulePopUp .accordion-content{
    max-height  : 0;
    /*overflow    : hidden;*/
    transition  : max-height 0.2s ease-out;
    padding     : 0px 15px;
    margin      : 0px -15px;
}

.accordion,
h2.accordion,
h3.accordion{
    cursor          : pointer;
    border-radius   : var(--main-border-radius);
    background-color: transparent;
    padding         : 15px;
}

h2.accordion:hover{
    background-color: #ffffff;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.accordion:after,
h2.accordion:after,
h3.accordion:after{
    content    : "\002B";
    float      : left;
    margin-right: 15px;
}

.accordion.active:after,
h2.accordion.active:after,
h3.accordion.active:after{
    content: "\2212";
}

.addRecurringMaintenance-infos{
    display                 : grid;
    grid-template-columns   : 1fr;
    row-gap                 : 15px;
    justify-items           : center;
    padding-bottom          : 30px;
}

.addRecurringMaintenance-infos > div{
    width: 300px;
}

.formLink.fineatyLink.selectAll{
    width           : auto;
    margin          : 0px 5px 0px 0px;
    font-family     : museo-sans, sans-serif;
    border          : 1px solid #ffffff;
    border-radius   : var(--main-border-radius);
    font-size       : 10px;
    padding         : 3px 10px;
    font-weight     : 700;
    background      : none;
    background-color: #ffffff;
    color           : var(--main-font-color);
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.formLink.fineatyLink.selectAllSection{
    font-size   : 14px;
    padding     : 10px 10px;
}

.formLink.fineatyLink.selectAllFloor{
    font-weight: 700;
}

.formLink.fineatyLink.selectAll:hover{
    color: var(--main-color);
}

.roomsIds .formLinkdiv{
    display: inline;
}

@media (min-width: 1280px){}
@media (min-width: 1024px) and (max-width: 1279px){

    .addRecurringMaintenanceRooms{
        grid-template-columns: repeat(6,1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .addRecurringMaintenanceRooms{
        grid-template-columns: repeat(6,1fr);
    }
}

@media (max-width: 767px) {

    .addRecurringMaintenanceRooms{
        grid-template-columns: repeat(2,1fr);
    }

    .addRecurringMaintenance-infos > div{
        width: 100%;
    }
}


.conainerTicketForm .intervenerType{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.MultipleArchivingModulePopUp.fineatyPopUp {
    width: 80%;
}

.MultipleArchivingModulePopUp th {
    text-transform: none;
    font-weight: bolder;
}

.MultipleArchivingModulePopUp td {
    padding: 10px 4px;
}





.filters .iconRadioValue .formFieldRadioOption input{
    display: none;
}

.filters .iconRadioValue .formFieldRadioOption .icons{
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    border          : 1px solid var(--main-font-color);
    background-color: var(--main-button-second-color);
    color           : var(--main-font-color);
    min-width       : 30px;
    height          : 30px;
    font-size       : 15px;
    border-radius   : 15px;
    padding         : 5px 3px 0px;
    margin          : 0px 3px;
}

.filters .iconRadioValue .formFieldRadioOption input:checked ~ label .icons{
    border-color: var(--main-color);
    color       : var(--main-color);
}





.filters .buttonCheckbox{
    margin-bottom: 10px;
}

.filters .buttonCheckbox .formFieldCheckboxOption{
    display: inline-block;
}

.filters .buttonCheckbox .formFieldCheckboxOption label,
.filters .buttonRadio .formFieldRadioOption label,
.filters .formFieldMultiCheckboxdiv .formFieldMultiCheckbox:not(.buttonsMultiCheckbox) .buttonCheckbox .formFieldCheckboxOption label:not(.inputInsideLabel)
{
    font-family     : museo-sans, sans-serif;
    font-size       : 10px;
    border-radius   : 15px;
    font-weight     : 700;
    padding         : 3px 10px;
    cursor          : pointer;
    display         : inline-block;
}

.filters .formFieldCheckboxdiv,
.filters .formFieldCheckboxdiv .buttonCheckbox{
    display : inline-block;
    width   : auto;
}

.filters .displayBlock .formFieldCheckboxdiv,
.filters .displayBlock .formFieldCheckboxdiv .buttonCheckbox{
    display: block;
}

.filters.alignFilters .buttonCheckbox{
    display: inline-block;
}









.anomalyGrid{
    display                 : grid;
    grid-template-columns   : repeat(7,1fr);
    row-gap                 : 15px;
    justify-items           : center;
    align-items             : center;
}










/* MANAGE AUDIT */

.hotelAudit-card{
    border-radius           : var(--main-border-radius);
    overflow                : hidden;
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 160px 10px 110px;
    background-color        : #ffffff;
    box-shadow              : 3px 3px 6px rgba(0,0,0,0.16);
}

.hotelAuditCard-titleContainer{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : end;
    justify-items           : right;
    padding-right           : 15px;
    padding-bottom          : 15px;
    background-repeat       : no-repeat;
    background-size         : cover;
    background-position     : center;
}

.hotelAuditCardTitleContainer-title{
    font-family     : museo-sans, sans-serif;
    font-weight     : 700;
    font-size       : 14px;
    text-transform  : uppercase;
    color           : #ffffff;
    text-shadow     : 3px 3px 6px rgba(0,0,0,0.16);
}

.hotelAuditCard-progressBar{
    display                 : grid;
    grid-template-columns   : repeat(1fr);
}

.hotelAuditCard-progressBar .progressBar-empty{
    background-color: #ffffff;
    border-radius   : 0;
    padding         : 0px;
    box-shadow      : 0px 3px 6px rgba(0,0,0,0.16);
}

.hotelAuditCard-progressBar .progressBar-progression{
    height          : 100%;
    background-color: rgba(157,1,44,0.8);
    border-radius   : 0;
}

.hotelAuditCard-progressBar.complete .progressBar-progression{
    background-color: var(--state-green);
}

.hotelAuditCard-details{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 60px 30px 20px;
}

.hotelAuditCardDetails-percent{
    font-family     : museo-sans, sans-serif;
    font-weight     : 700;
    font-size       : 40px;
    color           : var(--main-color);
    display         : grid;
    align-items     : flex-end;
    justify-items   : center;
}

.hotelAuditCardDetails-rest{
    font-size       : 12px;
    display         : grid;
    align-items     : flex-start;
    justify-items   : center;
}

.hotelAuditCardDetails-date{
    font-family     : museo-sans, sans-serif;
    font-size       : 8px;
    text-transform  : uppercase;
    font-weight     : 700;
    background-color: #eeeeee;
    display         : grid;
    place-items     : center;
}

.hotelAuditCardDetails-percent.complete{
    color: var(--state-green);
}










/* HOUSEKEEPING */

.startHouseKeeping{
    padding         : 30px;
    text-transform  : uppercase;
}

.hkIntervener-thumb{
    border          : 1px solid #ffffff;
    border-radius   : 20px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    overflow        : hidden;
    margin-left     : auto;
    margin-right    : auto;
}

.hkIntervener-name{
    font-family : museo-sans, sans-serif;
    font-weight : 700;
    font-size: 8px;
}


.thumbMCB .formFieldCheckboxOption input{
    display: none;
}

.thumbMCB .formFieldCheckboxOption label{
    cursor: pointer;
}

.ManageSectorInterveners .thumbMCB .formFieldCheckboxOption{
    width  : 100px;
    margin : 0px 3px;
    display: inline-block;
}

.ManageSectorInterveners .formFieldMultiCheckboxdiv .thumbMCB.formFieldMultiCheckbox:not(.buttonsMultiCheckbox) .formFieldCheckboxOption label:not(.inputInsideLabel){
    padding: 0px;
}

.manageSectorInterveners{
    background-color: #ffffff;
    padding         : 15px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.thumbMCB .formFieldCheckboxOption input:checked ~ label .hkIntervener-thumb{
    border: 1px solid var(--main-color);
}

.thumbMCB .formFieldCheckboxOption input:checked ~ label .hkIntervener-name{
    color: var(--main-color);
}

.thumbMCB .formFieldCheckboxOption span{
    display : inherit;
}

.thumbMCB .intervenersIds{
    margin-bottom: 30px;
}

.thumbMCB .intervenersIds .hkIntervener-name{
    font-size   : 12px;
    font-weight : 500;
}

.hkSelectMaidsCard{
    display             : grid;
    grid-template-rows  : auto 1fr auto;
    background-color    : #eeeeee;
    padding             : 10px;
    border-radius       : var(--main-border-radius);
    overflow            : hidden;
}

.hkSelectMaidsCard-zoneArea{
    background-color: #ffffff;
    padding         : 10px 5px;
    border-radius   : var(--main-border-radius);
    overflow        : hidden;
}

.hkSelectMaidsCard .formFieldMultiCheckboxdiv .formFieldCheckboxOption label{
    padding-left: 0px;
}

.stayContyainer{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 5px;
    align-items             : center;
}

.stayContyainer-remainingNights{
    font-size   : 12px;
    white-space : nowrap;
}

.minWidth0{
    min-width: 0;
}

.modelId .radioButton .formFieldRadioOption label{
    display: block;
}

.multiRoomsCheckBoxContainer{
    display: grid;
    grid-template-columns: 30px 130px 100px 45px 30px 30px 60px 60px 60px 100px 1fr;
    align-items: center;
    padding: 10px;
}










.tableRowGreen {
  background-color: #bae0bc;
}

.tableRowOrange {
  background-color: #ffe3bf;
}

.tableRowRed {
  background-color: #f7d2cd;
}

.tableRowBlue {
  background-color: #B5D8F7;
}

.tableRowYellow {
  background-color: #F4F9B1;
}

.tableRowGrey {
  background-color: #dddddd;
}

.lightStyle{
    text-shadow : 1px 1px 2px rgba(0,0,0,0.16);
    color       :#FFC159;
}

.marginTop30{
    margin-top: 30px;
}

.marginTop20{
    margin-top: 20px;
}

.marginTop15{
    margin-top: 15px;
}

.marginBottom30{
    margin-bottom: 30px;
}

.marginBottom20{
    margin-bottom: 20px;
}

.marginBottom15{
    margin-bottom: 15px;
}

.marginLess{
    margin: 0px;
}

.padding30{
    padding: 30px;
}

.extendWidth{
    width: 100%;
}



.selectAccountShowAccount{
    display: none;
}






.formSelectorsAsButton .formFieldMultiCheckbox{
    margin: 15px 0px;
}

.radioButton .formFieldRadioOption label,
.checkboxButton .formFieldCheckboxOption label{
    text-align      : center;
    font-size       : 10px;
    padding         : 10px;
    text-transform  : uppercase;
    font-family     : museo-sans, sans-serif;
    border          : 1px solid #ffffff;
    font-weight     : 700;
    background-color: #ffffff;
    color           : var(--main-font-color);
    border          : 1px solid var(--main-font-color);
    /*box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);*/
    margin          : 3px;
    display         : inline-block;
}

.globalRoomCheckboxButton .formFieldCheckboxOption label{
    text-align      : center;
    font-size       : 10px;
    padding         : 10px;
    text-transform  : uppercase;
    font-family     : museo-sans, sans-serif;
    border          : 1px solid #ffffff;
    font-weight     : 700;
    background-color: #ffffff;
    color           : var(--main-font-color);
    border          : 1px solid var(--main-font-color);
    /*box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);*/
    padding         : 13px 0px;
    width           : 40px;
    display         : inline-block;
    border-radius   : 20px;
}

.auditAnomaly.checkboxButton{
    width        : 100%;
    margin-bottom: 10px;
}

.auditAnomaly.checkboxButton .formFieldCheckboxOption label{
    width: 100%;
}

.radioButton .formFieldRadioOption,
.checkboxButton .formFieldCheckboxOption {
  margin-bottom: 0px;
}

.radioButton .formFieldRadioOption input,
.checkboxButton .formFieldCheckboxOption input,
.globalRoomCheckboxButton .formFieldCheckboxOption input{
    display: none;
}

.radioButton .formFieldRadioOption input:checked ~ label,
.checkboxButton .formFieldCheckboxOption input:checked ~ label,
.globalRoomCheckboxButton .formFieldCheckboxOption input:checked ~ label{
    border  : 1px solid var(--main-color);
    color   : var(--main-color);
}

.radioButton .formFieldRadioOption label:hover,
.checkboxButton .formFieldCheckboxOption label:hover,
.globalRoomCheckboxButton .formFieldCheckboxOption label:hover{
    color: var(--main-color);
    cursor: pointer;
}

.forgottenPassworddiv{
    display: none;
}

.offButton{
    color: #cccccc;
}

.offButton:hover{
    color: #787878;
}



.HousekeepingChartCredits,
.HousekeepingDailyMissions{
    height: 100%;
}







.green{
    color: var(--state-green);
}

.blue{
    color: var(--state-blue);
}

.red{
    color: var(--state-red);
}

.yellow{
    color: var(--state-yellow);
}

.purple{
    color: var(--state-purple);
}

.grey{
    color: var(--state-grey);
}

.orange{
    color: var(--state-orange);
}


.greenBackground{
    background-color: rgba(82, 192, 191, var(--transparency));
}

.blueBackground{
    background-color: rgba(61, 162, 230, var(--transparency));
}

.redBackground{
    background-color: rgba(252, 100, 132, var(--transparency));
}

.yellowBackground{
    background-color: rgba(254, 205, 102, var(--transparency));
}

.purpleBackground{
    background-color: rgba(151, 103, 248, var(--transparency));
}

.greyBackground{
    background-color: rgba(201, 203, 207, var(--transparency));
}

.orangeBackground{
    background-color: rgba(253, 159, 79, var(--transparency));
}


.green.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-green);
    background-color: rgba(82, 192, 191, var(--transparency));
    border: 1px solid var(--state-green);
}

.blue.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-blue);
    background-color: rgba(61, 162, 230, var(--transparency));
    border: 1px solid var(--state-blue);
}

.red.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-red);
    background-color: rgba(252, 100, 132, var(--transparency));
    border: 1px solid var(--state-red);
}

.yellow.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-yellow);
    background-color: rgba(254, 205, 102, var(--transparency));
    border: 1px solid var(--state-yellow);
}

.purple.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-purple);
    background-color: rgba(151, 103, 248, var(--transparency));
    border: 1px solid var(--state-purple);
}

.grey.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-grey);
    background-color: rgba(201, 203, 207, var(--transparency));
    border: 1px solid var(--state-grey);
}

.orange.buttonCheckbox .formFieldCheckboxOption label{
    color: var(--state-orange);
    background-color: rgba(253, 159, 79, var(--transparency));
    border: 1px solid var(--state-orange);
}




.expendWidth{
    width: 100%;
}

.labelColor{
    color: var(--main-label-color);
}






.displayBlock{
    display: block;
}

.displayNone{
    display: none;
}