/* FONT FAMILY ---------------------- */

td, .label-form-login,
button, li,
.link,
.txt,
.popup-title,
.popup-body > div,
.date-info > div,
.form-label-time, .form-line,
.main-menu li a,
.room-func-btn-all,
.room-func-btn-grey,
.room-func-btn-right,
.menu-icon .title,
.title-subscribe,
.title-footer-subscribe,
.intro-subscribe,
#datepicker *,
#epcl-useragenda-frame .header-agenda,
#epcl-useragenda-frame .cellmagHW,
#epcl-useragenda-frame .cellmagH,
.pcl-manage-user .userbox .names,
.pcl-manage-user .userbox .functions,
.font, div, a, span,
.titl, .title, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font), sans-serif;
    font-weight: var(--font-normal);
}

b, .bold {
    font-family: var(--font), sans-serif;
    font-weight: var(--font-bold);
}




/* generic */

label { border: none; }

select.select {
    background-color: var(--primary);
    border: none;
    padding: 6px 8px;
    border-radius: 3px;
    color: #fff;
}

.center {
    text-align: center;
}

.stdfont {
    font-family: var(--font), sans-serif;
}
.title {
    font-weight: bold;
    font-size:20px;
}
.title2 {
    font-weight: bold;
    font-size:17px;
}

.p3 { padding: 3px; }

.hide { display: none !important; }
.mr4 {margin-right: 4px;}
.mr5 {margin-right: 5px; }
.mt4 { margin-top: 4px;}
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.bold { font-weight: bold; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb4 { margin-bottom: 4px; }
.pl10 { padding-left: 10px; }
.vat { vertical-align: top; }
.p20 { padding:20px; }
.nbrd { white-space: nowrap; }
.titl-M {
    font-size: 17px;
}
.txt-S {
    font-size: 12px;
}
.col-bluec {
    color: var(--icon-info);
}
.col-lgray { color: #999; }
.crp { cursor: pointer; }
.pwico {
    font-size: 18px;
    color: var(--header-text);
    margin-left: 10px;
    cursor: pointer;
}
.pwico:hover {
    color: var(--header-text-hover);
}
.wsn { white-space: nowrap;}
.blink_me {
    animation: blinker 2s linear infinite;
    color: green;
    font-style: italic;

}
.w10p { width: 10px;}
.w20p { width: 20px;}
.w30p { width: 30px;}
.w40p { width: 40px;}
.w50p { width: 50px;}
.w120p { width: 120px;}
.w200p { width: 200px;}
.w250p { width: 250px;}
.w300p { width: 300px;}
.w350p { width: 350px;}
.ma { margin: 0 auto;}
.mb10i { margin-bottom: 10px !important; }
.mb20i { margin-bottom: 20px !important; }
.f-right { float: right; }
.font-20 { font-size: 20px; }

.color-white {
    color: white !important;
}

.grow {
    flex-grow: 1;
}


/* page */

.page-title {
    text-align: center;
    margin-bottom: 20px;
}

.pop-overlay {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: var(--overlay);
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
.pop-overlay.shown {
    opacity: 1;
}

.pop-overlay .modal {
    cursor: auto;
    position: absolute;
    z-index: 10001;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 600px;
    max-height: 400px;
    padding: 20px;
    background-color: rgb(255,255,255);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.pop-overlay .closebox {
    position: relative;
    width:100%;
    height:1px;
}
.pop-overlay .close {
    position: absolute;
    top:-16px;
    right:-16px;
    width: 30px;
    height: 30px;
    background: #69c;
    border-radius: 2px;
}

.pop-overlay .close i {
    text-shadow: none;
    color: #fff;
    margin: 2px 0 0 6px;
}


.tblform {}
.tblform td {
    padding: 2px;
}
.pcl-col {
    background: #eee;
    padding: 8px;
}
.timeinfo {
    color: #888;
}
.maindate {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 16px;
    height:30px;
    min-width: 100px;
    color: #369;
}

/* ecran principal */
.main-screen {
    box-sizing: border-box;
}

.user-home-container {
    background: #fff;
    margin: 0 auto 40px auto;
    max-width: 800px;
    min-height: 170px;
    box-sizing: border-box;
}


.pcl-ap-main-wrapper {
    padding: 20px;
}

.pcl-header {
    background: #555;
    color: #fff;
    font-weight: bold;
    overflow-y: hidden;
}
.pcl-footer {
    background:#eeeeee;
    color:#777;
    min-height:30px;
    margin: 40px auto;
    max-width: 800px;
    padding: 20px;
    box-sizing: border-box;
}

.label-form-login {
    background: var(--primary);
    color: #fff;
    display: inline-block;
    padding: 1px  5px;
}

.form-login input {
    border: 1px solid var(--primary);
    padding: 3px 6px;
}

.form-login select.custom {
    border: 1px solid #cccccc;
    padding: 3px 6px;
}

.form select {
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.form select:hover {
    border: 1px solid #bbb;
}



.blink_me {
    animation: blinker 2s linear infinite;
    color: green;
    font-style: italic;
}

@keyframes blinker {
    50% { opacity: 0; }
}

.c-blue {
    color: var(--link);
}
.c-lblue {
    color: #8abedc;
}
.c-grey {
    color: #777;
}

/* icons */

.rubric-icon {
    display: inline-block;
}
.rubric-icon img {
    width: 40px;
    height: auto;
    margin-right: 10px;
}


/* buttons ================================================================================= */


/* standard button */
.btnbox {
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    padding: 8px 16px;
    background: var(--button-primary);
    color: var(--button-primary-text);
    border-radius: 2px;
    margin-right: 10px;
    border: none;
}



.btnbox-grey {
    background: var(--button-grey);
    color: var(--button-grey-text);
}

.btnbox-nobtn {
    border: none;
}

.btnbox.disabled {
    background: var(--page-bg);
    color: var(--page-dimmed-text);
}

/* bouton d'alerte ou annulation/suppression */
.btnbox-alert {
    background: var(--alert);
}

.btnbox:hover {
    opacity: 1;
}

.room-func-btn {

}
.room-func-btn:hover {
    background: var(--button-primary-hover);
}

.btnbox.btn-float-left {
    float: left;
}
.btnbox.btn-float-right {
    float: right;
}
.btnbox.btn-center {
    text-align: center;
    width: 100%;
}

/* margin under button box */
.btnbox-mb {
    margin-bottom: 8px;
}

.btn-mini {
    padding: 3px 6px;
}

/* --------------------------------------------------------- */
/* BOX */

.box-h1 {
    padding: 10px;
    background: #ddd;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
}
.box-h2 {
    padding: 10px;
    background: #eee;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* --------------------------------------------------------- */
/* date picker */

#datepicker {
    max-width: 500px;
    margin: 0 auto;
}
.ui-datepicker-week-col {
    text-align: center !important;
    color: #0a6d98;
}

#datepicker * {

}

#datepicker .ui-state-default {
    background: var(--primary);
    color: #fff;
    border: none;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 4px;
}
#datepicker .ui-state-default:active {
    opacity: 0.7;
}

#datepicker .ui-datepicker .ui-datepicker-header {
    background: #eee;
    border: none;
}
.ui-datepicker-calendar td {
    width: 12.5%;
}

#datepicker .ui-state-highlight {
    background: #299fb5;
}
#datepicker .ui-state-active {
    background: var(--calendar-active);
}

.calendar-wrapper-fixed {
    background: #fff;
    max-width: 800px;
    height: 80px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}



/* --------------------------------------------------------- */
.pcl-col-aside {
    background: #4479A4;
    color: #fff;
    padding: 0;
}

.ui-datepicker {
    width: 100% !important;
}

.planning_cal_border{border:none;background-color:transparent}
.planning_cal_border table{border-collapse:separate;border-spacing:0}
.ui-widget-content {
    border:none !important;
}

/* PCL THEME : INIT */

/* bloc header */
body.pcl .pcl-header {
    background: var(--primary);
    height: 80px;
    padding: 0 15px;
}
body.pcl .pcl-rescalendar {
}

.calendar-wrapper {
    background: #fff;
    margin: 40px auto 20px auto;
    max-width: 800px;
    min-height: 170px;
    padding: 20px;
    box-sizing: border-box;
    height: 330px;
}
.calendar-wrapper.attached {
    margin: 0 auto;
}

.intro-wrapper {
    background: #fff;
    margin: 40px auto;
    max-width: 800px;
    min-height: 170px;
    padding: 20px;
    box-sizing: border-box;
}

.tbl {
    border-collapse: collapse;
}
.tbl.w100 {
    width: 100%;
}
.tbl td {
    padding: 4px;
}
.input-text {
    width:100%;
}
.mr20 {
    margin-right: 20px;
}
.pr20 {
    padding-right: 20px;
}

.pcl-sh1 {
    border-radius: 3px;
}
.pcl-body {
    min-height: 100px;
}

.listrooms-wrapper {
    background: #fff;
    margin: 0 auto;
    max-width: 800px;
    box-sizing: border-box;
    min-height: 310px;
    padding: 0 0 40px 0;
}
.pcl-logo {
    display: inline-block;
    margin-top: 6px;
    margin-left: -8px;
}
.logo-ins img {
    width: 220px;
    height: auto;
}
.pcl-manage-user {
    float: right;
    margin: 15px 10px 0 0;
    display: flex;
 }
.pcl-manage-user .avatar {
    width:50px;
    height: 50px;
    border-radius: 25px;
    background-color: #fff;
    background-image: url(/assets/default/avatar-default.png);
    background-size: cover;
}


.pcl-manage-user .userbox {
    margin-left: 15px;
    color: #fff;
}
.pcl-manage-user .userbox .names {
    font-size: 20px;
    line-height: 16px;
}

.pcl-manage-user .userbox .functions {
    font-size: 12px;
    color: #fff;
    text-decoration: none;
}
.pcl-manage-user .userbox .functions:hover {
    text-decoration: underline;
}

.pcl-home-user .userbox {
    margin-left: 15px;
    color: #444;
}

.pcl-home-user {
    float: left;
    margin: 15px 10px 0 0;
    display: flex;
}
.pcl-home-user .avatar {
    width:50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--primary);
    background-image: url(/assets/default/avatar-default.png);
    background-size: cover;
}

.pcl-home-user .userbox .names {
    font-size: 20px;
    line-height: 16px;
}
.pcl-home-user .userbox .clientname {
    color:#888;
}

.pcl-home-user .userbox .functions {
    font-size: 12px;
    color: #444;
    text-decoration: none;
}
.pcl-home-user .userbox .functions:hover {
    text-decoration: underline;
}


/* listrooms */

.site-selector {
    padding: 20px 20px 0 20px;
    text-align: center;
}
.site-selector select {
    padding: 3px;
}

/* titre de liste de salles à réserver */
.info-site {
    background: var(--titlebar-bg);
    padding: 4px 12px 1px 12px;
    font-weight: bold;
    color: var(--titlebar-text);
    font-size: 20px;
    margin-bottom: 10px;
    border-radius: 3px;
}


/* roompage-header : PAGE SALLE : entete */
.roompage-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* image a gauche dans la page de salle */
.roompage-header .image {
    opacity: 1;
    flex-basis: 30%;
    background: var(--grey);
    background-size: cover;
    flex-shrink: 0;
    height: 140px;
    position: relative;
    cursor: pointer;
}
.roompage-header .image:hover {
    opacity: 0.9;
}
.roompage-header .image .zoom-icon {
    position: absolute;
    right:0;
    bottom:0;
    width: 24px;
    height: 24px;
    background-color: var(--icon-zoom);
    color: #fff;
    text-align: center;
}
.roompage-header .image .zoom-icon i {
    vertical-align: 2px;
    font-size: 12px;
}

.roompage-header .description {
    padding: 10px 20px 0 20px;
    flex-grow: 1;
}
.roompage-header .room-title {
    font-size: 22px;
    color: var(--title);
}
.roompage-header .room-desc {
    font-size: 14px;
    line-height: 16px;
    color: #777;
    margin-bottom: 5px;
}
.roompage-header .room-desc span {
    float: left;
    display: block;
    margin-right: 10px;
}
.roompage-header .r-infos {
    flex-basis: 80px;
    flex-shrink: 0;
}
.roompage-header .r-infos-date {
    flex-basis: 100px;
    flex-shrink: 0;
}
.roompage-header .pdf-cartouche {
    display: inline-block;
    background: #69c;
    padding: 2px 8px 1px 8px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    vertical-align: 4px;
    margin-left: 4px;
}


.r-infos-date .date-info {
    display: flex;
    flex-direction: column;
    background: var(--date-bg);
    padding: 8px;
    border-radius: 7px;
    width: 80px;
    height: 80px;
    margin-top: 15px;
}
.r-infos-date .date-info div {
    color: #fff;
    text-align:center;
}
.r-infos-date .dayweek {
    font-size: 10px;
    margin-top: 2px;
}
.r-infos-date .date-info div.day {
    font-size: 33px;
    line-height: 32px;
    font-weight: bold;
}
.r-infos-date .date-info div.month {
    font-size: 12px;
    line-height: 15px;
}

.date-info-sm {
    display: none;
    font-size: 12px;
    white-space: nowrap;
    background: #3c697f;
    padding: 4px 8px;
    border-radius: 7px;
    color: #fff;
}

.day-condensed {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.day-condensed div {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    padding: 3px 8px;
    text-align: center;
}
.day-condensed div.item {
    background: var(--primary);
    color: #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
.day-condensed-dayweek {
    width: 100px;
}
.day-condensed-daynum {
    width: 40px;
}
.day-condensed-daymonth {
    width: 120px;
}
.day-condensed-dayyear {
    width: 90px;
}
.item-arrow {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    background: #eee;
    width: 40px;
    text-align: center;
    border-radius: 5px;
}
.item-arrow:active {
    background: #e2e2e2;
    color: #777;
}

/* planning */

.wrapper-planning {
    display: table;
    width: 100%;
}
.wrapper-planning .room-planning {
    vertical-align: top;
    display: table-cell;
}
.wrapper-planning .room-action {
    vertical-align: top;
    display: table-cell;
    width: 15%;
    padding-right: 20px;
    padding-top:19px;
}
.wrapper-planning:not(.disabled):active {
    background: #eee;
}


.room-planning {
    padding: 10px 20px 10px 20px;
}

.room-functions {
    padding: 10px 20px 20px 20px;
}

.room-block-disp {

}
.room-infodisp {
    padding: 10px 20px 20px 20px;
}
.room-infodisp > div {
    background: rgba(254, 236, 170, 0.5);
    padding: 8px 16px;
    border-radius: 5px;
    color: #888;
}



/* planning */


.planning-model {
    position: relative;
    height: 50px;
}

.planning-model .cell {
    position: absolute;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #fff;
}

.planning-model .cell.closed {
    position: absolute;
    border: 1px solid #ccc;
    background: #f7f7f7;
    background: repeating-linear-gradient(
            -45deg,
            #eeeeee,
            #eeeeee 4px,
            #e8e8e8 4px,
            #e8e8e8 8px
    );
}

.planning-model .cell.top {
    border-left: 1px solid #eee;
}

.planning-model .hbar {
    position:absolute;
    color: #69c;
    border-left: 1px solid #ccc;
    padding: 0 0 2px 2px;
    font-size: 10px;
}

.planning-model .rtitle {
    position:absolute;
    left:0;
    font-size: 12px;
    max-width:300px;
    font-weight:bold;
}

.planning-model .reserv {
    position: absolute;
    border: 1px solid #888;
    background:#eee linear-gradient(to bottom, #fffae8, #feecaa);
    overflow: hidden;
    z-index: 10;
}
.planning-model .reserv.blk {
    background: #ddd !important;
    z-index: 9;
}
.planning-model .reserv.reserv-close {
    background: rgba(204, 204, 204, 0.60);
    border: 1px dashed #aaa;
}
.planning-model .reserv.cli {
    background: #e8e9ef linear-gradient(to bottom, #e8ffff, #aadcfe);
}
.planning-model .reserv .rdv-title {
    font-size: 10px;
    color: #777;
    line-height: 10px;
    margin: 2px;
}
.planning-model .reserv.lbl {
    border-left-style: dashed;
}
.planning-model .reserv.lbr {
    border-right-style: dashed;
}

#calendar-fixed {
    position: fixed;
    top:0;
    width: 100%;
    height: 2px;
    z-index:500;
}


/* home */
.pcl-homeblock {
    min-height: 200px;
    background-size: 100% auto;
    background-position: center;
    -moz-box-shadow: inset 0 7px 10px -10px #222;
    -webkit-box-shadow: inset 0 7px 10px -10px #222;
    -o-box-shadow: inset 0 7px 10px -10px #222;
    box-shadow: inset 0 7px 10px -10px #222;
}

body {
    background: #f4f4f4;
}


.pcl-home-body {
    /*background:#eee;*/
}

.user-home-menu {
    background: #fff;
    margin: 15px auto;
    max-width: 800px;
    min-height: 50px;
    box-sizing: border-box;
}
.user-menu-user {
    padding: 20px 20px 20px 20px;
}



.main-menu {
    background: var(--primary);
}
.main-menu ul {
    display: flex;
    flex-direction: row;
    margin:0;
    padding: 0;
    list-style-type: none;
    justify-content: stretch;
}
.main-menu li {
    color: #fff;
    text-align: center;
    flex-grow: 1;
    background: var(--primary);
    position: relative;
}

.main-menu li:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.40);
}
.main-menu li a {
    padding: 8px 10px;
    display: block;
    color: #fff;
    text-decoration: none;
}
.main-menu li a:active {
    opacity: 0.8;
}
.main-menu li:hover {
    background: var(--primary);
}

.main-menu li.select:after,
.main-menu li.select:hover:after {
    position: absolute;
    width: 100%;
    border-bottom: 3px solid var(--mainmenu-selected);
    content: '';
    bottom:0;
    left:0;
    opacity: 1;
}
.main-menu li.select:hover {
    background: var(--primary);
}

.std-div {
    padding: 20px;
}

.room-reserv-form {
    display: flex;
    padding: 20px;
    justify-content: stretch;
}
.room-reserv-form.large {
    padding: 20px 0;
}
.room-reserv-form > div {
    flex-grow: 1;
}
.room-reserv-form td {
    padding: 2px;
}
.room-reserv-form .form-line {
    border-top: 1px solid #ccc;
    height: 15px;
    color: #bbb;
    font-size: 11px;
}
.room-reserv-form .form-label-time {
    width: 25%;
}
.room-reserv-form .form-select-day {
    width: 100px;
}
.room-reserv-form .form-label-info {
    width: 30%;
}
.room-reserv-form .form-label-input {
    width: 70%;
}
.room-reserv-form .form-label-input input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: #fafafa;
    margin-bottom: 3px;
    padding: 3px 5px;
    border-radius: 5px;
    color: #3c697f;
}

.room-reserv-form .fa {
    color: #3c697f;
    font-size: 20px;
    cursor: pointer;
}

.room-reserv-form .btnbox .fa {
    color: var(--button-primary-text) !important;
}

.room-reserv-form .fa:hover {
    color: #69c;
}
.room-reserv-form .btn {
    text-align: center;
    width: 30px;
}
.room-reserv-form .choice-hour {
    padding: 6px;
}
.w50o {
    width: 50%;
}
.w100o {
    width: 100%;
}
#creneau, #creneau_end {
    box-sizing: border-box;
    border: 2px dashed #555;
    position: absolute;
    background: rgba(50, 205, 50, 0.20);
    z-index:100;
    overflow: hidden;
}
#creneau.confirmed {
    border: 2px solid #555;
}
#creneau.conflict, #creneau_end.conflict {
    background: rgba(204, 128, 30, 0.19);
    border-color: #cc0000;
}

#daypast {
    box-sizing: border-box;
    border:none;
    position: absolute;
    background: rgba(254, 162, 152, 0.20);
}

/* popup */

.popup {
    border-radius: var(--popup-border-radius);
}

.popup.popup-wrapper {
    min-width: 300px;
    min-height: 100px;
    max-width: 600px;
    display: none;
    position: fixed;
    z-index: 65535;
    background: #fff;
    -webkit-box-shadow: 0 6px 7px 4px rgba(89,89,89,0.25);
    -moz-box-shadow: 0 6px 7px 4px rgba(89,89,89,0.25);
    box-shadow: 0 6px 7px 4px rgba(89,89,89,0.25);
}
.popup-title {
    border-top-left-radius: var(--popup-border-radius);
    border-top-right-radius: var(--popup-border-radius);
    padding: 10px 20px;
    color: var(--popup-bg);
    background: var(--primary);
}
.popup-body {
    padding: 20px;
}
.text {
    color: #555;
}

.menu-icon {
    float: left;
    padding: 10px;
    display:flex;
    flex-direction:column;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;
    transition: background 0.08s ease-in-out;
}
.menu-icon:hover {
    background: var(--mainmenu-icon-bg);
    transition: background 0.08s ease-in-out;
}
.menu-icon .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
}
.menu-icon .icon img {
    width: 50px;
    height: auto;
}

.menu-icon .title {
    font-size: 12px;
    text-align: center;
    line-height: 14px;
    color: var(--menu-icon);
}
.menu-icon:active {
    opacity: 0.7;
}

.menu-icon .icon .bullet {
    position: absolute;
    background: red;
    color: #fff;
    text-align: center;
    padding: 3px;
    font-size: 11px;
    width:20px;
    height: 20px;
    line-height: 9px;
    border-radius: 10px;
    right:0;
    top:0;
    border: 2px solid #fff;
}

.fd-error {
 background: rgba(246, 220, 226, 0.71);
}

table.grid {
}
table.grid i.falm {
    font-size: 12px !important;
    color: #888;
}

table.grid tr {

}
table.grid tr:not(.no-separator) {
    border-bottom: 1px solid #ddd;
}
table.grid tr.to-complete {
    background: #fff9df;
}

table.grid tr.to-complete td:first-child {
    border-left: 2px solid orange;
}


table.grid td {
    padding: 2px 4px;
    font-size: 12px;
}
table.grid tr.header {
    background: #f5f5f5;
    color: #555;
}
table.grid.grid-l {

}
table.grid.grid-l td {
    padding: 4px 8px;
    font-size: 11px;
}
.fa-size-10 {
    font-size: 10px !important;
}

/* agenda */

/* USER-AGENDA */

#epcl-useragenda-frame {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

.sticker {
    display: inline-block;
    border-radius: 3px;
    padding: 2px 7px 1px 7px;
    background: #888;
    font-size: 10px;
    color: #fff;
}
.sticker-green {
    background: limegreen;
}
.sticker-orange {
    background: orange;
}
.sticker-add-infos {
    display: inline-block;
    padding: 2px 7px 1px 7px;
    font-size: 11px;
    color: #555;
}
.hover-light {
    cursor: pointer;
}
.hover-light:hover {
    background: #f7f7f7;
}
.hover-light:hover .sticker-add-infos {
    text-decoration: underline;
}


/* agenda accueil ---------------------------------------- */
#epcl-useragenda-frame {

}
#epcl-useragenda-frame .header-agenda {
    background: var(--primary);
    color: #fff;
    font-size:18px;
    text-align: center;
    padding-top: 1px;
    box-sizing: border-box;
    margin: 0 3px 0 1px;
    height: 29px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#epcl-useragenda-frame .header-agenda.ha-line {
    margin: 0;
    height: 29px;
}

#epcl-useragenda-frame .cellmag {
    position:absolute;border:1px solid var(--filet);
    background: #f3f8fe;
}


#epcl-useragenda-frame .cellmagH {
    position:absolute;font-size: 12px;text-align:center;font-weight:bold;background:#dee8f5;color:#888;
}
#epcl-useragenda-frame .cellmagC {
    overflow-x:hidden;overflow-y:auto;box-sizing:border-box;border:1px solid #fff;position:absolute;
    transition: background-color 0.2s ease-in-out;
}
#epcl-useragenda-frame .cellmagCx {
    overflow:hidden;box-sizing:border-box;border:1px solid #fff;position:absolute;
}
#epcl-useragenda-frame .magCrdv {
    margin-bottom:1px;color:#fff;font-size:10px;padding: 2px;
    border-radius: 3px;
}
#epcl-useragenda-frame .cellmagC.over {
    background: #dee5f3;
    border: 1px solid #dee5f3;
    cursor: pointer;
}

#epcl-useragenda-frame .magCrdv.req {
    background: #bbb;
    opacity: 1;
}
#epcl-useragenda-frame .magCrdv.ocl {
    background: #888;
    opacity: 1;
}
#epcl-useragenda-frame .cellmagHW {
    position:absolute;font-size: 12px;text-align:center;font-weight:bold;
    background:var(--secondary);
    color:#fff;padding: 3px 0;
}
#epcl-useragenda-frame .magHWB {
    border-right: 1px solid rgba(255, 255, 255, 0.56);
}

#epcl-useragenda-frame .magCrdv {
    background: var(--primary);
}

.agm-item { width:25px; height:25px; padding-top: 2px; margin-top: 2px; cursor: pointer; }
.agm-item:active { color: #0B82A9; }
.agm-next { float:right;}
.agm-prev { float: left; }


/* DIV form */
.epcl-div-form {
    background-color: #fafafa;
    padding:15px;
}
.epcl-div-form table {
    border-collapse: separate;
}
.epcl-div-form table td {
    padding: 3px;
}

/* region : login */
.epcl-region-login {
    text-align:right;
    color: #fff; font-size: 11px;
    margin: 5px;
}



/* links */
.hd_link {
    color: white;
    font-size:12px;
    text-decoration: underline;
}
.hd_link:hover {
    color: white;
    font-size:12px;
    text-decoration: none;
}


#alert-box .info {
    background:#f5f5f5;padding:20px 10px 10px 10px;
}
/* reservation */

.reserv-frame {
    margin: 5px 0 5px 0; padding: 10px;
    background: -moz-linear-gradient(to bottom , #FBFBFB, #E7E7E7) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) inset;
}
.cell-reserv {
    z-index: 10;
    border: 1px solid green;
}
#reservation-form {
    width: 580px;
    margin:auto;border:2px solid #cccccc; background-color:white;padding:8px;
}
#reservation-form table {
    border-collapse: separate;
}

#reservation-form td {
    padding: 4px;
}
#reservation-form .label {
    width: 120px;
    white-space: nowrap;
    color: #369;
    font-weight: bold;
}

.room-reserv-form .form-label-input label {
    width: 100%;
    display: block;
}

.supermadmin-title {
    color:#fff;
    display: inline-block;
    padding: 1px 4px;
    margin: 1px;
    border-radius: 3px;
    background:#777;
    font-size: 11px;
}



.div-alert > div {
    padding: 5px 10px;
    background: #feecaa;
    color: #555;
}

.div-ok > div {
    padding: 5px 10px;
    background: #c4fea8;
    color: #555;
}

.creneau-hrs {
    padding: 3px 7px;
    font-size: 13px;
    color: #555;
}

.guest {
    float: left;
    margin: 2px;
    border-radius: 3px;
    padding: 2px 4px;
    color: #0a6d98;
    background: rgba(10, 109, 152, 0.06);
    border: 1px solid #0a6d98;
    font-size: 12px;
}

.info-others {
    padding: 4px 7px;
    color: #69c;
    background: #f5f5f5;
    margin: 10px 20px;
    animation: blinker 3s linear infinite;
}

.cellmem {
    position: absolute;
    background: #94dd98;
}

.list-community-header {
    background: rgba(41, 221, 243, 0.56);
    color: #555;
    text-align: center;
    font-weight: bold;
}

@keyframes blinker {
    50% {
        opacity: 0.5;
    }
}

/* picker room day */
.picker-roomday {
    min-height: 280px;
}
.picker-roomday .datepicker .ui-datepicker-header {
    background: var(--primary);
    border: none;
    height: 33px;
    color: #fff;
}
.picker-roomday .datepicker .ui-datepicker-title {
    line-height: 1.6em;
}
.picker-roomday .datepicker .ui-state-disabled.reserved {
    opacity: 0.8;
}
.picker-roomday .datepicker .ui-state-disabled.reserved > span {
    background: red;
    color: #fff;
}
.picker-roomday .datepicker .ui-datepicker td.selected > a {
    background: limegreen;
    color: #fff;
}
.ui-datepicker-calendar .ui-state-default {
    text-align: center;
}

/* box */

.doc-box {
    background: #e2e9f9;
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
}

.doc-box ul {
    margin:0; padding:0 0 0 15px;
}
.caution {
    background: #F9DFA7;
}
.doc-box.ok {
    background: #d0ffd0;
    color: var(--panel-text);
}

.in-info {
    background: var(--panel-bg);
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
}
.in-info td {
    color: var(--panel-text);
}

.in-info.caution {
    background: var(--panel-caution-bg);
    color: var(--panel-caution-text);
}
.in-info.caution td {
    color: var(--panel-caution-text);
}
.in-info.greeting {
    background: limegreen;
    color: var(--panel-caution-text);
}
.in-info.greeting td {
    color: var(--panel-caution-text);
}
.in-info.basket, .in-info.ok {
    background: #d0ffd0;
    color: var(--panel-text);
}
.in-info.basket td {
    color: var(--panel-caution-text);
}

.panel-caution-important {
    font-weight:bold;
}

.btn-small {
    padding: 4px 8px;
    background: #e5e5e5;
    border: none;
    text-align:center;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.btn-small:hover {
    background: #d5d5d5;
}

.nof {
    float: none !important;
}

[data-roomtitle] {
    cursor: pointer;
}
[data-roomtitle-plans] {
    cursor: pointer;
}
[data-roomtitle-tarifs] {
    cursor: pointer;
}


.title-page {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;

}
.intro-page {

}

.form-table td {
    vertical-align: middle;
}
.form-separator {
    width:100%;
    text-align:center;
    background:#eee;
    border-radius: 4px;
    font-weight: bold;
}

.form select {
    padding: 4px 6px;
}


/* message d'erreur */
.error-message.hidden {
    display: none;
}

.error-message {
    color: #CC0000;
    background: rgba(255, 0, 0, 0.05);
    padding: 7px;
    border-radius: 5px;
    margin: 7px 0;
}


/* popup room */

.popup-room {

}

.popup-room .title-room {
    font-size: 22px;
    font-weight: bold;
    color: #369;
}
.popup-room .title-site {
    font-size: 18px;
    color:#777;
}
.popup-room .container-detail {
    display: block;
}
.popup-room .title-detail {
    font-size: 13px;
    color:#555;
    display: inline-block;
    margin-right: 10px;
}
.popup-room .title-equip {
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding: 7px 0;
    margin-bottom: 5px;
    font-size: 13px;
    color:#555;
}

.popup-room .equip {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
}
.popup-room .equip > div {
    margin: 5px 10px 20px 10px;
    display: flex;
}
.popup-room .equip > div > div {

}
.popup-room .equip > div > div:last-child {
    width: 100px;
    font-size: 11px;
    margin-left: 8px;
    line-height: 12px;
}

.popup-room .image-hw {
    width: 54px;
    height: 54px;
    background-color: #f5f5f5;
    background-size: contain;
}



/* extras */

#backbutton {
    position: fixed;
    bottom:0;
    right: 0;
    z-index: 10000;
}
#backbutton > div {
    user-select: none;
    margin: 0 20px 20px 0;
    font-size: 11px;
    width: 64px;
    height: 54px;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    line-height:15px;
    vertical-align: 0;
    padding-top:11px;
    font-weight: bold;
    -webkit-box-shadow: 0 6px 7px 4px rgba(89,89,89,0.39);
    -moz-box-shadow: 0 6px 7px 4px rgba(89,89,89,0.39);
    box-shadow: 0 6px 7px 4px rgba(89,89,89,0.39);
    transition: all 0.15s ease-in-out;
    opacity: 0.8;
    cursor: pointer;
}
#backbutton > div:hover {
    margin-bottom: 22px;
    opacity: 1;
    color: #369;
}
#backbutton > div:active {
    background: #555;
    color: #fff;
}

/* =================== media queries =================== */




/* taille intermediaire : tablette */

@media screen and (max-width: 640px) {
    .button-box .btnbox {
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
    }
    .r-infos-date .date-info {
        display: none;
    }
    .date-info-sm {
        display: inline-block;
    }
    .pcl-manage-user {
        width: 100%;
        background: var(--secondary);
        margin: 0;
        padding: 10px 5px 5px 15px;
        float: none;
        min-width: 250px;
        overflow: hidden;
    }

    body.pcl .pcl-header {
        height: initial;
        margin: 0;
        padding: 0;
    }
    .pcl-logo {
        margin: 6px 7px;
    }

    .main-menu li a {
        font-size: 11px;
    }
    .pcl-home-user .userbox .names {
        font-size: 14px;
        line-height: 22px;
    }
    .pcl-home-user .userbox .clientname {
        font-size: 14px;
        line-height: 10px;
    }

    /* avatar */
    .pcl-manage-user .avatar {
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }

    .pcl-manage-user .userbox .names {
        font-size: 14px;
        line-height: 10px;
    }
    .pcl-manage-user .userbox .functions {
        font-size: 10px;
    }

}




@media screen and (max-width:500px) {
    .pcl-body {
        padding-left:0;
        padding-right: 0;
    }

    .wrapper-planning {
        display: block;
    }
    .wrapper-planning .room-planning {
        display: block;
    }
    .wrapper-planning .room-action {
        padding-left: 20px;
        padding-top: 0;
    }
}







/* avocap */


.avocap .roompage-header .room-title {
}


/* share docs */

.plugin-files_main-title {
    margin: 8px 0;

}
.plugin-files_container {
    width:100%;
    min-height:300px;
    max-height:500px;
    overflow-x:hidden;
    overflow-y:auto;
    margin-bottom:10px;
}

.doc-separator {
  color: #555;
  font-weight: bold;
  border-bottom: 1px dotted #ccc;
  padding: 8px 0;
  margin: 10px 10px 0 10px;
}

.flex-files {
    /*border: 1px dashed #69c;*/
    margin: 0 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;

}
.box-file {
    min-width: 50px;
    border: 1px solid transparent;
    margin: 5px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 4px;
}
.box-file:hover {
    background: #f7f7f7;
}
.box-file:active {
    background: rgba(102, 153, 204, 0.51);
}


.file-title {
    display: inline-block;
    max-width: 140px;
    font-size: 11px;
    color: #555;
    font-weight: 300;
    line-height: 14px;
    vertical-align: top;
}

.box-file:active .file-title {
    color: #fff;
}

.file-icon {
    position: relative;
    display:inline-block;
    width:48px;
    height: 50px;
    margin: 5px 5px 5px 5px;
}
.file-icon img {
    left: 0;
    top: 0;
    position: absolute;
    width:48px;
    height: auto;
}

.box-file:active .file-icon img {
    top: -1px;
}


/* ===== AUTRES =============================================================== */

/* tip */
#ext_divnote {
    z-index:2000;
    font-size:10px;
    position:absolute;
    left:0;top:0;
    max-width:200px;
    display:none;
    background-color:#fff;
    border-radius:4px;
    border:1px solid #ccc;
    -webkit-box-shadow:1px 1px 3px 0 #555;
    box-shadow:1px 1px 3px 0 #555;padding:4px
}
#ext_divnote span{
    display:inline-block;
    line-height:13px;
    font-size:11px
}

#ext_divnote b {
    color: #69c;
}

.image-fill {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.description-cartouche {
    background: rgba(255, 255, 255, 0.70);
    padding-bottom:15px !important;
    color: #333 !important;
}
.description-cartouche > * {
    color: #333 !important;
}

#wb-overlay{
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.4);
}
.wb-cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wb-spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes wb-sp-anime {
    100% {
        transform: rotate(360deg);
    }
}
.is-hide{
    display:none;
}

.label-form {
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
}


/* spinner */
#pcl-spinner-wrapper {
    background: rgba(0, 0, 0, 0.15);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index:200;
    display: none;
}
#pcl-spinner-updater-view{
    position:absolute;
    left:370px;top:250px;width:190px;padding:4px;
    background: #ffffff;
    text-align:center;
    border-radius:5px;
    display:none;
    border: 2px solid #c0c0c0;
    z-index:201;
    color: #777;
}
.pcl-spinner-spinner { display:inline-block }
.pcl-spinner-spinner img { vertical-align:middle }

/* POPUP */

#myWin-popup {
    z-index: 60014;
    border-radius: 6px;
    position:fixed;
    display: none;
    background-color:#ffffff;
    width:100px;
    height:100px;
    border: none !important;
}

#WinFond-popup {

    width:100%;
    height:100%;
    display:none;
    position:fixed;
    opacity:0.15;
    filter:alpha(opacity=15);
    background-color:#000;

}
#coverit-popup {
    position: absolute;
    display: none;
    opacity:0.1 !important;
    filter:alpha(opacity=10);
    background-color: #000;
    z-index:100;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#captor-popup {
    cursor: move;
    width:100%;
    border-bottom: 1px solid #888888;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 2px 2px 0 0;
    border-bottom: none;

}

#captor-popup #statusInfo {
    display: block;
    /*width: 200px; */
    /* float: left; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 5px 2px 5px;
    font-weight: 700;
    font-size: 13px;
    /*padding-left: 7px;*/
    margin-right: 32px;

}
#captor-popup #closeBox {
    display: inline-block;
    margin: 12px 14px 2px 2px;
    position: absolute;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: none;
    right: 0;
    top: -1px;
    text-align: center;
}
#captor-popup #closeBox i {
    font-size: 22px;
    color: #fff;
}
#myTitleCaptor-popup {
}

#dialogFrame-popup {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.pshadow {
    -moz-box-shadow: 2px 2px 20px 5px rgba(0,0,0,0.4);
    -webkit-box-shadow: 2px 2px 20px 5px rgba(0,0,0,0.4);
    -o-box-shadow: 2px 2px 20px 5px rgba(0,0,0,0.4);
    box-shadow: 2px 2px 20px 5px rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.Shadow(color=rgba(0,0,0,0.4), Direction=134, Strength=20);
}

[data-button-action] {
    padding: 10px 18px 8px 18px;
    border-radius: 24px;
    background: #aaa;
    color: #fff;
    border: none;
    cursor: pointer;
}
[data-button-action]:hover {
    background: #888;
}
[data-button-main-action] {
    background: #369 !important;
}
[data-button-main-action]:hover {
    background: #1f4f80 !important;
}

/* debug */

pre {
    margin: 10px 2px 2px 2px;
    border: 1px solid #eee;
    padding: 2px;
    font-size: 10px;
    border-radius: 4px;
    background: #fefefe;
    float:left;
}