::-webkit-scrollbar {
    width:6px;
    height: 6px;
    
}

::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.05);
}
::-webkit-scrollbar-button{
    width: 0px !important;
    height: 0px !important;
}

*{  
    scrollbar-width: thin !important;
    scrollbar-color: rgba(66, 80, 103, 1) rgba(53,64,82,0.2) !important;

}

body{
    font-family: Helvetica, Arial, sans-serif;
    background: #FFFFFF;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    background-color: #2f4254;
    /*background-image: url(../img/bg_blur.jpg);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: top left;*/
    scrollbar-base-color: rgba(53,64,82,0.2);
    scrollbar-face-color: rgba(66, 80, 103, 1);
    scrollbar-3dlight-color: rgba(53,64,82,0.7);
    scrollbar-highlight-color: rgba(0,0,0,0.4);
    scrollbar-track-color: rgba(53,64,82,0);
    scrollbar-arrow-color: rgba(150,150,152,0.7);
    scrollbar-shadow-color: rgba(53,64,82,0.7);
    scrollbar-dark-shadow-color: rgba(53,64,82,0.7);

}

#backgroundapp{
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    z-index: -1;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: top left;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    -moz-filter: blur(40px);
    -ms-filter: blur(40px);
    -o-filter: blur(40px);
}

body.login-out{

}

.login-left-pan{
    float: left;
    width: 65%; /*55%;*/
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
/*  background-image: url("/img/rtl_group.jpg");*/
    background-image: url("/img/client-background.jpg");
    display: block;
}

.login-right-pan{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35%; /*45%;*/
    background: #ffffff; 
    padding: 40px 70px;
    box-sizing: border-box;
    border-left: solid 4px #2196f3;
}

.login-logo{
    /*background-image: url("/img/logo.png");*/
    background-image: url("/img/client-logo.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 102.4px;
    height: 44.8px;
    display: block;  
    margin-bottom: 120px;
}

.login-owner-logo{
    position: absolute;
    height: 20px;
    line-height: 20px;
    bottom: 100px;
    right: 100px;
}

.login-owner-logo a{
    color: #000;
    text-decoration: none;
}

.login-owner-logo span{
    display: inline-block;
    width: 40px;
    height: 20px;
    position: relative;
    top: 5px;
    background-image: url(/img/bce.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


.login-right-pan > h1{
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: lighter;
    font-size: 30px;
    color: #2196F3;
    margin: 0 0 15px 0;
}

.login-right-pan > .login-form{
    max-width: 280px;
}

.login-right-pan > .login-form > input{
    box-shadow: none;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: black;
    background-color: white;
    display: block;
    position: relative;
    box-sizing: border-box;
    height: auto;
    width: 100%;
    border-radius: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-image: initial;
    padding: 10px 13px;
    margin: 0 0 12px 0;
}

.login-right-pan > .login-form > input::placeholder{
    color: #c7c7c7;
}

.login-right-pan > .login-form button{
    cursor: pointer;
    display: inline-block;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    height: auto;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    color: white;
    background-color: #2196F3;
    border-radius: 4px;
    padding: 8px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
}

.login-right-pan > .login-form button:hover{
    opacity: 0.8;
}

.login-right-pan > .login-form > .external-auth {
    margin-top: 14px;
}

.login-right-pan > .login-form > .external-auth > button {
    font-size: 15px;
    margin-bottom: 4px;
    padding: 8px 8px;
    background-color: #ff5c5c;
}

.login-right-pan > .login-del{
    position: relative;
    display: inline-block;
    width : 90%;
    text-align: justify;
    text-justify: inter-word;
}

.login-right-pan > .login-del > .spanpanel{
    /*padding: 20px 20px 20px 20px;*/
    height: 80px;
}

.login-right-pan > .login-del > .buttonpanel > button{
    font-size: 14px;
    align-content: center;
    padding: 8px 8px;
    color: white;
    border-radius: 4px;
    width: auto;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
}

.login-right-pan > .login-del > .buttonpanel > .button-del-req{
    background-color: #F44336;
    width: 45%;   
}

.login-right-pan > .login-del > .buttonpanel > .button-go-to{
    background-color: #2196F3;
    width: 45%;   
}





.login-right-pan > .login-error{
    position: relative;
    margin-top: 25px;
    z-index: 900;
    font-size: 14px;
    font-weight: normal;
    color: #F44336;
}

@media screen and (max-width: 1024px) {
    .login-left-pan{
        width: 55%;
    }
    .login-right-pan{
        width: 45%;
    }    
}
@media screen and (max-width: 790px) {
    .login-left-pan{
        width: 35%;
    }
    .login-right-pan{
        width: 65%;  
    }
}
@media screen and (max-width: 550px) {
    .login-left-pan{
        display: none;
    }
    .login-right-pan{
        width: 100%;
        padding: 40px 50px;
        border-left: none;
    }  
}
header.outh{
    top: 0;
    margin: 0 0 10px;
    padding: 0;
    vertical-align: top;
    background-color: rgb(0,78,155);
    width: 100%;
    height: 10%;
    position: fixed;   
}

.log{
    vertical-align: top;
    text-align: right;
    margin: 15px;
    position: absolute;
    right: 20px;
    top: 20%;
}

body.in{
    font-family: sans-serif;
    font-size: 12px;
    padding: 0;
    margin: 0;
    overflow: hidden;
      
}
header.inh{
    display: none;
    position: absolute;
    top:0;
    left:0;
    right:0;
    height: 45px;
    line-height: 45px;
    background-color: #5C99D8;
    border-bottom: solid 1px #dedede;
}
header>*{
    float: left;
}

.outh>img{
    width: 100%;
}

header #appname{
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    left: 160px;
    top: 0;
    bottom: 0;
    right: 160px;
    text-align: center;
    color: #ffffff;
}

header nav{
    float: right; 
}

header nav>div{
     float: left;
    font-size: 17px;
    width: 50px;
    text-align: center;
    border-left: solid 1px #dedede;
    color: #f3f3f3;
}

header nav>div:not(.active):hover{
     color: #f3f3f3;
    background: #70aae6;
}

header nav>div.active{
     background: #ffffff;
    color: #3e82f7;
}

.view{
   position: absolute;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

div.error{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 900;
    width: 200px;
    height: 100px;
    background: #FFF;
}

.error{
    color: red;
    font-weight: bold;
}
.good{
    color: white;
    font-weight: bold;
}
.dblue{
    background-color: rgb(0,78,155);
}
.lblue{
    color: rgb(168,211, 255);
}
.llblue{
    color: rgb(225,240, 255);
}


.left{
    left:0;
}
.white{
    color: white;
}

.custom-team-icon{
    position: relative;
    top: -2px;
    font-size: 9px;
}

/* LEFT CONTENT */
#left-content{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 210px;
    background: rgba(53,64,82,0.7);
}

#left-content #left-content-parking{
    position: absolute;
    overflow-y: hidden;
    bottom: 0;
    top: 260px;
    left: 0;
    right: 0;
}

#left-content #left-content-people{
    position: absolute;
    overflow-y: hidden;
    bottom: 0;
    top: 260px;
    left: 0;
    right: 0;
}

#left-content #teams-wrap{
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right:  0;
    overflow-y: auto;
    padding-bottom: 20px;
}

#left-content #left-content-parking #teams-wrap{
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right:  0;
    overflow-y: auto;
    padding-bottom: 20px;
}

#left-content #userinfo{
    text-align: center;
    margin-top: 12px;
    margin-bottom: 25px;
}

#left-content #userinfo .user-avatar{
    display: inline-block;
    height: 75px;
    width: 75px;
    border-radius: 80px;
    background-image: url(../img/avatar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;    
}
.user-avatar>img{
    height: 75px;
    width: 75px;
    border-radius: 80px;
    position: relative;
    top: -2px;
    left: -2px;
}

#left-content #userinfo .user-name{
    font-size: 14px;
    color: #cecece;
    margin-top: 3px;    
}

#left-content #userinfo .user-service{
    font-size: 11px;
    color: #9a9a9a;
    margin-top: 3px;  
}

#left-content #userinfo .user-actions{
    font-size: 13px;
    margin-top: 10px;
    color: #FFFFFF;
}

#left-content #userinfo .user-actions > span{
    position: relative;
    font-size: 17px;
    width: 40px;
    display: inline-block;
}

#left-content #userinfo .user-actions .ua-settings{

}

#left-content #userinfo .user-actions .ua-messages{

}

#left-content #userinfo .user-actions .ua-logout{
    font-size: 13px;
    top: -1px;
}

#left-content #userinfo .user-actions .ua-messages > .counter{
    font-size: 9px;
    margin-left: 8px;
    position: absolute;
    background: #e0291b;
    color: #FFFFFF !important;
    padding: 2px 5px;
    border-radius: 15px;
    text-align: center;
    height: 10px;
    line-height: 10px;
    font-weight: bold;
    left: 3px;
    bottom: -5px;
}

#left-content #userinfo .user-actions > span:hover{
    cursor: pointer;
    color: #5c99d8;
}

#left-content #userinfo .user-timezone{
    margin-top: 10px;
    color: #9a9a9a;
    font-size: 11px;
}

#left-content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 212px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

#left-content hr{
    margin: 0 12px 20px 12px;
    border-top: solid 1px #354153;
    border-bottom: solid 1px #646a73;
    border-left: none;
    border-right: none;
    border-width: 1px;    
}

/* POPUP */
.blurried{
    overflow: hidden;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    -o-filter: blur(8px);
    transform: scale(0.99);
}

.popup-container{
    display: none;
    position: absolute;
    top: 35px;
    left: 211px;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    background-color: rgba(232, 232, 232, 0.7);
    z-index: 100;
}

.popup-message-container{
    display: none;
    position: absolute;
    top: 0px;
    left: 210px;
    bottom: 0;
    right: 0;
    background-color: rgba(232, 232, 232, 0.7);
    z-index: 100;
}

.mc-main-center-content{
    overflow: hidden;
}

.popup-container .popup-win,
.popup-message-container .popup-win{
    display: none;
    position: absolute;
    width: 550px;
    background: rgba(255, 255, 255, 0.75);
    border-top: solid 1px rgb(224, 224, 224);
    margin: auto;
    top: 35px; /*calc(50% - 190px);*/
    left: calc(50% - 275px);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    -moz-box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    border: solid 1px #999999;
}

.popup-container .popup-win h1,
.popup-message-container .popup-win h1{
    position: relative;
    text-align: center;
    padding: 14px 0;
    font-size: 13px;
    margin: 0;
}

.popup-message-container .popup-win h1 #close-messages {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    color: #e63126;
    width: 35px;
    line-height: 35px;
    font-size: 22px;
    background: transparent;
}

.popup-message-container .popup-win h1 #close-messages:hover {
    background: #dedede;
    color: #d42920;
}

.popup-container .popup-win .pp-top-bar,
.popup-message-container .popup-win .pp-top-bar{
    position: relative;
    padding: 8px 12px;
}

.popup-container .popup-win .pp-content,
.popup-message-container .popup-win .pp-content{
    position: relative;
    padding: 0 12px 12px;
}

.popup-container .popup-win#taskeditor .pp-content,
.popup-container .popup-win#shifteditor .pp-content{
    min-height: 545px;
}

.popup-container .popup-win .pp-buttons-cont,
.popup-message-container .popup-win .pp-buttons-cont{
    position: relative;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding: 0 10px;
}

.popup-container .popup-win .pp-buttons-cont > button,
.popup-message-container .popup-win .pp-buttons-cont > button{   
    background: #F5F5F5;
    color: #ACACAC;
    border: solid 1px #DDDDDD;
    /* border-bottom-width: 2px; */
    border-radius: 3px;
    height: 22px;
    padding: 0 12px;    
    outline: none;
    margin-left: 6px;
}

.popup-container .popup-win .pp-buttons-cont > button:hover,
.popup-message-container .popup-win .pp-buttons-cont > button:hover{
    background: #248FF7;
    color: #ffffff;
    border-color: #3785d6;    
}

.popup-container .popup-win .pp-buttons-cont > button:active{
    background: #248FF7;
    color: #ffffff;
    border-color: #3785d6;    
}

.popup-container .popup-win .pp-buttons-cont > button.red{
    background: #DA1F3A;
    color: #ffffff !important;
    border-color: #DA1F3A;
}

.popup-container .popup-win .pp-buttons-cont > button.red:hover{
    background: #f15c72;
    color: #ffffff !important;
    border-color: #f15c72;   
}

.popup-container .popup-win .pp-buttons-cont > button.red:active{
    background: #DA1F3A;
    color: #ffffff !important;
    border-color: #DA1F3A;   
}

.popup-container .popup-win .pp-buttons-cont > button:disabled,
.popup-message-container .popup-win .pp-buttons-cont > button:disabled{  
    background: #e8e8e8 !important;
    color: #c3c3c3 !important;
    border-color: #dddddd !important;    
}

.popup-container .popup-win .pp-buttons-cont > button:disabled:hover,
.popup-message-container .popup-win .pp-buttons-cont > button:disabled:hover{  
    background: #e8e8e8 !important;
    color: #c3c3c3 !important;
    border-color: #dddddd !important;   
}

.popup-container .popup-win#shifteditor .edit-switch{
    padding: 0px 15px;
}

.popup-container .popup-win .edit-line{
    margin: 12px 10px;  
}

.popup-container .popup-win .edit-line#multiselect-rights {
    margin-top: 24px;
}

.popup-container .popup-win .edit-line.half{
    width: calc(50% - 25px);
    display: inline-block;
}

.popup-container .popup-win .edit-line label{
    display: block;
    text-transform: capitalize;
    font-size: 11px;
    text-align: left;
    color: #929292;
    margin-bottom: 2px;
}

.popup-container .popup-win .edit-line fieldset{
    border: none;
}

.popup-container .popup-win .edit-line fieldset label{
    height: 34px;
    line-height: 34px;
    font-size: 13px;
}

.popup-container .popup-win .edit-line fieldset label:hover{
    color:#2196F3;    
}

.popup-container .popup-win .edit-line fieldset label input[type=radio]{
    position: relative;
    width: 24px;
    float: left;
    top: 10px;
}

/* LV select teams in shift creation */
.popup-container .popup-win .edit-line fieldset label input[type=checkbox]{
    position: relative;
    width: 24px;
    float: left;
    top: 10px;
}

.popup-container .popup-win .edit-line .selection-container {
    display: flex;
    background-color: #ffffff;
    border: solid 1px #D3D3D3;
    border-radius: 3px;
    /*width: 189px;*/
    height: 33px;
    position : relative;
}

.popup-container .popup-win .edit-line .selection-container .selection-used {
    padding-left: 5px;
    width: 100%;
    line-height: 33px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.popup-container .popup-win .edit-line .selection-container .dropdown-selection {
    background-color: #ffffff00;
    border: none;
    font-size: 9px;
    padding-bottom: 2px;
    outline: none;
}

.popup-container .popup-win .edit-line .selection-options {
    position: absolute;
    background-color: #ffffff;
    border: solid 1px #D3D3D3;
    border-radius: 3px;
    top: 33px;
    z-index: 2;
    min-height: 31px;
    width: 504px;
    max-height: 75px;
    overflow-y: auto;
}

.popup-container .popup-win .edit-line .selection-options .selection-rpt {
    display: flex;
    padding-top: 2px;
    padding-bottom: 2px;
}

.popup-container .popup-win .edit-line #selecting-label {
    padding-right: 20px;
    width: 200px !important;
    display: flex;
}

.selection-text {
    padding-right: 0px !important;
    min-width: 0px !important;
    text-align: left !important;
    width: 200px !important;
    color:#000000 !important;
    padding-left: 5px;
}

.team-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-left: 20px;
}


/* LV Import Shift/Task from another team */

.popup-win .stimport-main {
    height: calc(100% - 40px);
    padding: 0 8px;
    overflow-y: auto;
    max-height: 500px;
}

.popup-win .stimport-main .shift-list {
    width: 100%;
    border-collapse: collapse;
}

.popup-win .stimport-main .shift-list {
    width: 100%;
    height: 26px;
}

.popup-win .stimport-main .shift-list thead {
    position: sticky;
    top: 0;
    z-index: 250;
    background-color: #bfbfbf;
    height: 26px;
    font-weight: bold;
    text-align: center;
}

.popup-win .stimport-main .shift-list tbody {
    text-align: center;
}

.popup-win .stimport-main .shift-list tbody tr:nth-child(even) {
    background-color: #ededed;
}

.popup-win .stimport-main .shift-list span.checkeditem{
    color: #8BC34A;    
}

.popup-win .stimport-main .shift-list span.uncheckeditem{
    color: #F44336;   
}

.popup-win .stimport-main .shift-list span.color{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50px;    
}

.popup-win .pp-top-bar .stimport-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* LV end Shift/Task */

.popup-container .popup-win .edit-line select{
    position: relative;
    width: 100%;
    top: 3px;
    outline: none;
    border: solid 1px #D3D3D3;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 4px 8px;
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;    
}

.popup-container .popup-win .edit-line fieldset label select{
    position: relative;
    float: right;
    width: 330px;
    top: 3px;
    outline: none;
    border: solid 1px #D3D3D3;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 4px 8px;
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
}

.popup-container .popup-win .edit-line input,
.popup-container .popup-win .edit-line select,
.popup-container .popup-win .edit-line span.colorpicker{
    width: 97%;
    /*outline: none;*/
    border: solid 1px #D3D3D3;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 4px 8px;
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
}

.popup-container .popup-win .edit-line span.colorpicker{
    display: inline-block;
    padding: 4px 8px;
    height: 15px;
    
}

.popup-container .popup-win .edit-line input[type=text]{
    padding: 6.5px 8px;    
}

.popup-container .popup-win .edit-line input[type=color]{
    padding: 4px 8px;    
}

.popup-container .popup-win .edit-line input[type=time]{
    padding: 4px 8px;    
}

.popup-container .popup-win .edit-line input[type=number]{
    padding: 6.5px 8px;    
}

.popup-container .popup-win .edit-line select{
    padding: 6.5px 8px;    
    width: 100%;
}

.popup-container .popup-win .edit-line input[type=checkbox]{

}

.tab-buttons {
    display: flex;
    flex-direction: row;
    border: solid 1px #a7a7a7;
    border-radius: 3px;
}

.tab-buttons div {
    font-size: 14px;
    padding: 6px 0;
    text-align: center;
    background-color: transparent;
    flex-grow: 1;
}

.tab-buttons div:hover {
    cursor: pointer;
    background-color: #dddddd;
}

.tab-buttons div:active {
    background-color: transparent;
}

.tab-buttons div.active {
    background-color: #3280FB;
    color: #ffffff;
}

.popup-lastreservation-container{                                                            
    display: none;
    position: absolute;
    top: 0px;
    left: 210px;
    bottom: 0;
    right: 0;
    background-color: rgba(232, 232, 232, 0.7);
    z-index: 100;
}

.popup-lastreservation-container .popup-win{
    display: none;
    position: absolute;
    width: 750px;
    background: rgba(255, 255, 255, 0.75);
    border-top: solid 1px rgb(224, 224, 224);
    margin: auto;
    top: 35px; /*calc(50% - 190px);*/
    left: calc(50% - 275px);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    -moz-box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    box-shadow: 0px 1px 1px 0px rgba(184,184,184,1);
    border: solid 1px #999999;
}

.popup-lastreservation-container .popup-win h1{
    position: relative;
    text-align: center;
    padding: 14px 0;
    font-size: 13px;
    margin: 0;
}

.popup-lastreservation-container .popup-win h1 #close-lastreservation {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    color: #e63126;
    width: 35px;
    line-height: 35px;
    font-size: 22px;
    background: transparent;
}

.popup-lastreservation-container .popup-win h1 #close-lastreservation:hover {
    background: #dedede;
    color: #d42920;
}

#pp-lastreservation.popup-win{
    height: 80%;
    left: 5%;
}

#lastResMain{
    position: relative;
    height: calc(100% - 64px); /*a revoir le 35*/
    width:100%
}

#lastResMain #left-panel .free-places-item{
    font-size: 12px;
    position: relative;
    height: 23px;
    line-height: 23px;
    border: solid 1px #788190;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #FFF;
    width: calc( 50% - 2px );
    display: inline-table;
    text-align: center;
    padding: 4px 0 4px 0;
}

#lastResMain #left-panel .free-places-title label{
    display: block;
    font-size: 12px;
    color: #becade;
    height: 24px;
    line-height: 24px;
    border-bottom: solid 1px #959faf;
    margin-bottom: 6px;
    background: #364253;
    border-radius: 4px;
    padding: 0 8px;
    text-align: center;
}

#lastResMain #left-panel .free-places-title label:hover{
    cursor: pointer;
    color: #ffffff;
}

#lastResMain #left-panel .free-places-title{
    padding: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
}

#lastResMain #left-panel > .free-places-item:hover{
    background-color: #55647b;
    cursor: default;
}

#lastResMain #left-panel{
    background: #6c7686;
    position: absolute;
    left: 250px;
    top:0;
    bottom:0;
    right: 0;
    overflow-y: auto;
}

#lastResMain #left-panel .existing-requests{
    color: #becade;
    padding: 10px; 
}

#lastResMain #left-panel .existing-requests div{
    display: inline-block;
    width: 25%;
}

#lastResMain #left-panel .existing-requests-title{
    color: #becade;
    padding: 10px;
}

/* POPUP MESSAGES */
#pp-messages.popup-win{
    width: 90%;
    height: 80%;
    left: 5%;
}
#pp-messages.popup-win .pp-content{
    height: calc(100% - 56px);
    border-top: solid 1px #dedede;
    border-bottom: solid 1px #dedede;
}

#pp-messages .ppmess-main-part{
    position: absolute;
    top: 61px;
    left: 156px;
    width: 350px;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    border-right: solid 1px #dedede;
    overflow-y: scroll;
}

#pp-messages .ppmess-view-part{
    position: absolute;
    top: 61px;
    left: 507px;
    right: 0;
    bottom: 0;
    background: rgba(243, 243, 243, 0.4);
    padding-right: 8px;
    padding-left: 4px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar{
    margin: 12px;
    height: 30px;
    /*background: #e4e4e4;*/
    text-align: right;
    overflow: hidden;
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar > .ppmess-bt-grp{
    height: 100%;    
    display: inline-block;
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar > .ppmess-bt-grp > button:first-child{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar > .ppmess-bt-grp > button:last-child{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;    
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar button{
    outline: none;
    border: solid 1px #cccccc;
    background: #e0e0e0;
    color: #505050; 
    float: left;
    height: 100%;    
}
#pp-messages .ppmess-view-part > .ppmess-vp-bar button:hover{
    background: #d1d1d1;
    color: #505050; 
}
#pp-messages .ppmess-view-part > .ppmess-vp-bar button:active{
    background: #b9b9b9;
    color: #505050;     
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar button > span{
    /*display: block;*/
    font-size: 16px;
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar button.red{
    /*
    background-color: #FF3B2F;
    color: #ffffff !important;
    border-color: #FF3B2F;
    */
}
#pp-messages .ppmess-view-part > .ppmess-vp-bar button.red:hover{
    background-color: #f85046;
    color: #ffffff !important;   
    border-color: #f85046;
}
#pp-messages .ppmess-view-part > .ppmess-vp-bar button.red:active{
    background-color: #e63126;
    color: #ffffff !important;
    border-color: #e63126;
}

#pp-messages .ppmess-view-part > .ppmess-vp-bar button.green{
    /*
    background-color: #49C85D;
    color: #ffffff;
    border-color: #49C85D;
    */
}
#pp-messages .ppmess-view-part > .ppmess-vp-bar button.green:hover{
    background-color: #49C85D;
    color: #ffffff;    
    border-color: #49C85D;
}
#pp-messages .ppmess-view-part > .ppmess-vp-bar button.green:active{
    background-color: #33b747;
    color: #ffffff;
    border-color: #33b747;
}

#pp-messages .ppmess-view-part > .ppmess-view{
    font-family: inherit;
    margin: 12px;
    padding: 8px;
    background: #ffffff;
    min-height: 150px;
    border: solid 1px #f1f1f1;    
    
    -webkit-box-shadow: 2px 2px 10px 0px rgba(194,194,194,1);
    -moz-box-shadow: 2px 2px 10px 0px rgba(194,194,194,1);
    box-shadow: 2px 2px 10px 0px rgba(194,194,194,1);
}

#pp-messages .ppmess-view-part > .ppmess-view > hr{
    border: 0;
    border-bottom: 1px solid #dcdcdc;    
}

#pp-messages .ppmess-view-part > .ppmess-view > .ppmv-header{
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-height: 60px;
    padding: 5px;
}
#pp-messages .ppmess-view-part > .ppmess-view > .ppmv-header > .ppmvh-pict{
    position: relative;
    float: left;
    border-radius: 90px;
    background-size: cover;
    background-position: center;
    top: 5px;
    height: 45px;
    left: 5px;
    width: 45px;
    border: solid 1px #dcdcdc;
}

#pp-messages .ppmess-view-part > .ppmess-view > .ppmv-header > .ppmvh-sender{
    font-weight: bold;
    margin-bottom: 4px;
    margin-left: 60px;
    margin-top: 11px;
    margin-right: 100px;
    font-size: 13px;
}

#pp-messages .ppmess-view-part > .ppmess-view > .ppmv-header > .ppmvh-subject{
    margin-bottom: 4px;   
    margin-top: 8px;
    margin-left: 60px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #777676;
}

#pp-messages .ppmess-view-part > .ppmess-view > .ppmv-header > .ppmvh-date{
    position: absolute;
    top: 4px;
    right: 5px;
    color: #909090;
    font-size: 11px;    
}

#pp-messages .ppmess-view-part > .ppmess-view > p#messsagecont{
    padding: 8px;    
}

#pp-messages .ppmess-write-part{
    position: absolute;
    top: 61px;
    left: 507px;
    right: 0;
    bottom: 0;
    background: #ffffff;;
    padding-right: 8px;
    padding-left: 4px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#pp-messages .ppmess-write-part .ppmw-line{
    height: 38px;
    line-height: 38px;
    border-bottom: solid 1px #E8E8E8;
    position: relative;
}

#pp-messages .ppmess-write-part .ppmw-line > label{
    color: #818385;
}

#pp-messages .ppmess-write-part .ppmw-line #mess-dest-name{
    position: relative;
    background-color: #DCE3EE;
    padding: 2px 6px;
    border-radius: 4px;
    border: solid 1px #C0C6D3;   
    padding-right: 22px;
    height: 20px;
    line-height: 20px;
}

#pp-messages .ppmess-write-part .ppmw-line #mess-dest-name > .mess-dest-name-del{
    color: #F44336;
    position: absolute;
    right: 0;
    width: 17px;
    top: 0px;
    bottom: 0;
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
    text-align: center;   
}

#pp-messages .ppmess-write-part .ppmw-line #mess-dest-name > .mess-dest-name-del:hover{
    cursor: pointer;    
}

#pp-messages .ppmess-write-part .ppmw-line > .ppmwl-input-wrapper{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 50px;
}

#pp-messages .ppmess-write-part .ppmw-line.to > .ppmwl-input-wrapper{
    left: 20px;    
}

#pp-messages .ppmess-write-part .ppmw-line.subject > .ppmwl-input-wrapper{
    left: 50px;
}

#pp-messages .ppmess-write-part .ppmw-line > .ppmwl-input-wrapper > input{
    box-sizing: border-box;
    height: 100%;
    width: 100%;     
    border: none;
    background: transparent;
    outline: none;
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp{
    z-index: 10;
    background: #ffffff;
    border: solid 1px #e8e8e8;
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;  
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
    -moz-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
    box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div{
    padding: 4px;
    height: 44px;
    border-bottom: solid 1px #e8e8e8;  
}
#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div:last-child{
    border-bottom: none;
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div:hover{
    cursor: pointer;
    background-color: #4174D4;
    color: #ffffff;
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div > img{
    position: relative;
    top: 2px;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    left: 4px;
    float: left;    
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div > div{
    margin-left: 52px;
    line-height: 18px;
    margin-top: 3px;
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div > .ppmwl-tpp-name{
    
}

#pp-messages .ppmess-write-part .ppmw-line #ppmwl-to-pp > div > .ppmwl-tpp-service{
   color: #b1b1b1; 
}

#pp-messages .ppmess-write-part .ppmw-textarea-wrapper{
    height: calc(100% - 90px);    
}

#pp-messages .ppmess-write-part .ppmw-textarea-wrapper > textarea{
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background: transparent;
    outline: none;
    border: none;
    resize: none;
    padding: 8px;
}

#pp-messages .ppmess-top-part{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgb(199 199 199 / 20%);
    border-bottom: solid 1px #bfbfbf;
    display: flex;
    flex-direction: row;
}

#pp-messages .ppmess-top-part button {
    height: 60px;
    width: 104px;
    padding: 0;
    margin: 0;
    border: none;
    border-right: solid 1px #d5d5d5;
    border-left: solid 1px #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#pp-messages .ppmess-top-part button:hover {
    background: #dddddd;
}

#pp-messages .ppmess-top-part button:active {
    background: #fbfbfb;
}

#pp-messages .ppmess-top-part button .icon {
    font-size: 29px;
    color: #424242;
}

#pp-messages .ppmess-top-part button .label {
    font-size: 12px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 10px);
    color: #5c5c5c;
}

#pp-messages .ppmess-left-part{
    position: absolute;
    top: 61px;
    left: 0;
    width: 155px;
    bottom: 0;
    background: rgba(236, 236, 236, 0.2); 
    border-right: solid 1px #dedede;
}

.ppmess-left-part > div{
    cursor: default;
    padding: 6px 20px;
    font-size: 16px;
}

.ppmess-left-part > div:hover{
    background-color: rgba(109, 109, 109, 0.15);
    /* color: #ffffff; */    
}

.ppmess-left-part > div.active{
    background-color: #03a9f4;
    color: #ffffff;      
}

#pp-messages .ppmess-empty-msg{
    display: none;
    font-size: 20px;
    color: #dedede;
    text-align: center;
    margin-top: 110px;    
}

#pp-messages .message{
    cursor: default;
    position: relative;
    padding: 12px 24px;
    border-bottom: solid 1px #dedede;    
    font-size: 13px;
    overflow: hidden;
}

#pp-messages .message:hover{
    background-color: #f3f3f3;
}

#pp-messages .message.selected{
    background-color: #03a9f4;
    color: #FFFFFF;
}

#pp-messages .message .ppm-from{
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    width: calc(100% - 95px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#pp-messages .message .ppm-date{
    color: #a9a9a9;
    display: inline-block;
    width: 90px;
    text-align: right;
}
#pp-messages .message.selected .ppm-date{
    color: #d1f1ff;
}

#pp-messages .message .ppm-subject{
    color: #616161;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 90px);
    margin-bottom: 3px;
}
#pp-messages .message.selected .ppm-subject{
    color: #fdfeff;
}

#pp-messages .message .ppm-message{
    color: #a9a9a9;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 40px);    
}
#pp-messages .message.selected .ppm-message{
    color: #b6e8ff;
}

.ppm-mark{
    display: none;
    position: absolute;
    height: 6px;
    width: 6px;
    background: #03a9f4;
    border-radius: 6px;
    left: 13px;
    top: 16px; 
}

#pp-messages .message.unread .ppm-mark{
    display: block;
}

#pp-messages .message .ppm-delete{
    /*display: none;*/
    position: absolute;
    right: -64px;
    top: 0;
    bottom: 0;
    width: 64px;
    background-color: #FF3B2F;
    color: #ffffff;
    line-height: 25px;
    padding-top: 14px;
    text-align: center; 
    cursor: pointer;
    
    -moz-transition: right .3s ease-out;
    -o-transition: right .3s ease-out;
    -webkit-transition: right .3s ease-out;
    transition: right .3s ease-out;
}

#pp-messages .message .ppm-delete > span{
    font-size:16px;
}

#pp-messages .message .ppm-delete:hover{
    text-decoration: underline;
    cursor: pointer;
}

#pp-messages .message:hover .ppm-delete{
    /*display: block;*/
    right: 0;
}

.ttip{
    border: none !important;
    color: #000 !important;
    padding: 0px;
    margin: 0px;
    background: rgba(0, 0, 0, 0) !important;
}

.inttip{
    position: relative;
    padding: 5px !important;
    top: -10px !important;
    left: -10px !important;
    right: -18px !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    border: 4px solid #FFF;
    background: silver !important;
}

.inttip-park{
    position: relative;
    padding: 11px !important;
    top: -10px !important;
    left: -10px !important;
    right: -18px !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    background-color: #3f474f;
    color: #ffffff;
    border-radius: 8px;  
}

.inttip-park > label{
    color: #ffffff;    
}

.inttip-park > label > span{
    color: #b7b7b7;
}


.intitle{
    background: #FFF !important;
    height: 20px !important;
    width: 100% !important;
    padding: 3px;
    text-align: center;
    border: 2px solid #000;
}

.intitleConf{
    background: #FFF !important;
    width: 100% !important;
    padding: 3px;
    text-align: center;
    border: 2px solid #000;
}

.intitletitle{
    position: relative;
    top: -7px !important;
}

.ttipTitle{
    font-weight: 700;
    text-align: center;
    width: 100%;
}

.ttipTitle-park{
    color: #ffffff !important;
    font-size: 15px;
    width: 100%;
    display: block;
    text-align: left;
}

.ttipSubTitle-park{
    color: #efefef !important;
    font-size: 15px;
    width: 100%;
    display: block;
    text-align: left;
    margin-top: 6px;
}

.mask{
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 300;
    background: rgba(192,192,192,0.5)
}

.inttipid {
    position: absolute;
    padding: 10px !important;
	height: 250px !important;
    width: 330px !important;
    background: #6F7D95 !important;
    color: #FFF;
    line-height: 18px;
    overflow: hidden;
}

.inttippel{
    height: 4cm;
    width: 4cm;
    background: #fff;;
    text-align: center;
    border: 1px solid #d6d6d6;
}

.inttippel .ttippel-title{
    width: 100%;
    font-weight: 700;
    padding-top: 0.3cm ;
    padding-bottom: 0.3cm ;
}

.inttippel img{
    height: 3cm;
    width: 3cm;

}

.ttipavatar{
    position: absolute;
    top: 10px;
    height: 60px;
    width: 60px;
    right: 20px;
}

.ttipavatar>span{
    position: absolute;
    height: 100%;
    width: 100%;
    display: inline-block;
    border-radius: 60px;
    background-image: url(../img/avatar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.inttipid>.balance_today{
    display: inline-block;
    list-style-type: none;
    padding: 0px;
}

.inttipid>.balance_end{
    list-style-type: none;
    padding: 0px;
}

.inttipid>.ulheader{
    font-weight: 600;
    padding-bottom: 2px;
    padding-top: 2px;
}

.reqstatus{
    position: relative;
    left: -10px;
    top: -5px;
}

#rejectComments{
    z-index: 200;
    position: absolute;
    right: 40px;
    height: 140px;
    width: 300px;
    border: solid 1px #f1f1f1;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 2px 2px 10px 7px rgba(194,194,194,1);
}

#rejectComments >textarea{
    height: 60px;
    width: 87%;
    margin: 10px;
    background: transparent;
    resize: none;
    padding: 8px;
    border-radius: 5px;
}

#rejectComments >span{
    margin: 8px;
    display: inline-block;
}

#rejectComments >button{
    background: #F5F5F5;
    color: #ACACAC;
    border: solid 1px #DDDDDD;
    position: relative;
    border-radius: 3px;
    height: 22px;
    padding: 0 12px;
    outline: none;
    margin: 8px;
    left: 75px;
}

#rejectComments >button:hover {
    background: #248FF7;
    color: #ffffff;
    border-color: #3785d6;
}

/*********************************
**** Composant selectfiltered ****
*********************************/

.selectfiltered.sf-container{
    text-align: inherit;
}

.selectfiltered.sf-filter-container{
    width: 100%;
    position: relative;
    text-align: inherit;
}

.selectfiltered.sf-filter{
    outline: none;
    border: none;
    cursor: default;
    height: calc( 100% - 2px);
    line-height: inherit;
    text-align: inherit;
    padding: 0 8px;
    width: calc(100% - 16px) !important;
}

.selectfiltered.sf-filter-container > .sf-arrow{
    position: absolute;
    right: 0px;
    font-size: 1.5em;
    line-height: inherit;
    color: inherit;
    height: 100%;
    bottom: 0;
}

.selectfiltered.sf-list{
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 150px;
    background: #FFF;
    color: #000;
    position: absolute;
    left: 0px;
    margin-top: 1px;
    border: 1px solid lightgrey;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


.selectfiltered.sf-item{
    position: relative;
    width: 100%;
    background: #FFF;
    height: 20px;
    line-height: 20px;
    padding: 0px 2px;
}

.sf-selected{
    background: dodgerblue !important;
    color: #FFF !important;
}