:root {
  --pbu: var(--default-font-size);
}

/*---------------------------------------------------------------------------------*/
/*						Agenda 	Structure */
/*---------------------------------------------------------------------------------*/
.groupMinimise {
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    height: 20px;
    width: 20px;
    left: 0;
    top: 2px;
    background-image: url("../images/arrow-36-black_12.png");
    transform: rotate(90deg);
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center;
    opacity: 0.4;
}

.groupMinimiseAdmin {
    position: absolute;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    height: 19px;
    left: 95%;
    top: 5%;
}

.groupMinimise.minimised {
    transform: rotate(0deg);
}

.groupMinimise.vert {
    background-image: url("../images/arrow-36-black_12.png");
    width: 8px;
    height: 12px;
    background-size: 8px 8px;
}

.groupMinimise.vert.minimised {
    background-image: url("../images/arrow-79-black_12.png");
    background-size: 7px 8px;
}

/* group of planning lines; AKA groupLines*/
.plng-line-group {
    border-top: 0px white solid;
    border-bottom: 1px #DDDDDD solid;
    border-left: 1px #DDDDDD solid;
    border-right: 1px #DDDDDD solid;
    margin-right: 0.16em;
}

/* group of planning lines in vertical view*/
.plng-line-group-vert {
    position: relative;
    float: left;
    height: 100%;
}

/*planning line container, relative with absolute content; AKA dayAgendaLine*/
.plng-line {
    height: calc(2.307 * var(--pbu));
    position: relative;
    background-color: white;
    border-top: 1px #eaeaea solid;
}

/* planning line with 2 ribbons ;AKA dayLineTwoRibbons*/
.plng-line--two-ribbons {
    height: 3.384em;
}

/*  container for the planning part of planning line; AKA daysS*/
.plng-line__planning {
    position: absolute;
    left: 25%;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    overflow: hidden;
}

/* in planning part of planning line, the subdivision unit (day, week, month)*/
.plng-line__unit {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: white;
    border-left: 1px solid #cccccc;
}

/*day agenda column , currently  used as a style for td*/
.dayAgendaCol {
    background-color: white;
    border: 1px solid #999999;
    overflow-x: hidden;
    overflow-y: hidden;
}

/*absolute part of agendaline having grids and plannings cell*/
.dayAgendaCmpt {
    position: absolute;
    left: 0;
    right: 0%;
    bottom: 0;
    top: 0;
    background-color: white;
    overflow: hidden;
    /*border-top: 1px #eaeaea solid;*/
}

.dayAgendaCmptVert {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.wazero {
    top: 0;
}

/*  when day agenda component takes all the width of the parent
.dac_AllWidth {
    left: 0%;
}*/

/* for time zone */
.dac_tz {
    left: 30px;
}

/*Style of day agenda line when drag and drop is over there*/
.dayAgendaLineDroppable {
    /*height: 31px;*/
    height: calc(2.307 * var(--pbu));
    border-top: 3px solid #EDDA74;
    border-bottom: 3px solid #EDDA74;
    background-color: white;
    z-index: 1200;
}

/*Style for single hr week planning when drag and drop is over there*/
.singleHrWeekDroppable {
    border: 3px solid #EDDA74;
    /*border-right : 3px solid #EDDA74;*/
    background-color: white;
    z-index: 1200;
}

/* resource name container in a planning line; AKA resname*/
.plng-line__res-name {
    position: absolute;
    left: 0;
    right: 75%;
    top: 0;
    bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    background-color: white;
    margin-top: 0px;
    margin-bottom: 0;
    /*border-top: 1px solid #eaeaea;*/
    border-right: 1px solid #eaeaea;
    padding-left: 5px;
    padding-top: 2px;
}

.res-name__label {
    text-decoration: none;
    font-size: 1em;
    overflow: hidden;
    cursor: default;
    position: absolute;
    left: 0.3em;
    right: 1.846em;
    top: 0.8em;
    bottom: 0.15em;
}

.res-name__label:hover {
    color: #228ec3;
}

.res-name__label.mirnl {
    
}

.res-name__label.mirnl.eyeVisible {
    left: 3.8em;
}

.res-name__label.withAvatar {
    left: 2em;
}

.res-name__avatar {
	position: absolute;
	left: 1.846em;
	top: 0.5em;
	width: 1.538em;
	height: 1.538em;
	background-repeat: no-repeat; 
	background-image: url(../pages/images/user-square-lightGray.svg);
	background-position: center;
	background-size: 2.307em;
	border-radius: 0.923em;
	cursor: pointer;
}

.res-name__avatar.noEye {
    left: 2px;
}

.res-name__avatar-vert {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat; 
    background-image: url(../pages/images/user-square-lightGray.svg);
    background-size: 30px;
    border-radius: 12px;
    background-position: center;
    cursor: pointer;
}

#attendanceMain .plng-line--two-ribbons .plng-line__res-name-vert {
    padding-top: 21px;
}

#attendanceMain #PLANNING_ID .plng-line a {
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

/* resource name style in planning*/
.plng-line__res-name-vert {
    font-size: 9pt;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    /*background-color: white;
	height: 23px;*/
    height: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid;
    border-image: linear-gradient( to top, #cccccc, rgba(0, 0, 0, 0) ) 1 50%;
}

.plng-line__res-name-vert .res-name__label {
	height: 40px;
    padding-top: 4px;
    font-size: 14px;
    /*color: initial;*/
    left: 26px;
    top: 0px;
}
.plng-line__res-name-vert .res-name__label:hover {
    color: #228ec3;
}

/*Style of the possible ressources for drag&drop */
.possiblersname {
    background: #F0F0F0 !important;
}

.possiblersnameLink {
	color: #BDBDBD !important;
}

/* *************************************
	 Vertical week agenda
	the week agenda is a table, with height fixed, each day td is a container for
	"hours" div boxes and "gssevt" div boxes
*/
/* global week planning div style */
.weekAgenda {
    /*border: 1px solid #dddddd;
    border-collapse: collapse;*/
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: transparent;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* week agenda height*/
.weekAgendaHeight {
    height: auto;
}

#attendanceMain .weekAgendaHeight {
    height: auto;
}

/* week agenda header - contains days header  */
.wah {
    height: 3em;
    background-color: #F2F2F2;
}

.wahid {
    position: absolute;
    left: 0;
    width: 36px;
    height: 40px;
}

.wahdays {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* week agenda day header */
.wadh {
    height: 3em;
    position: absolute;
    border-left: 1px solid;
    border-image:
    linear-gradient(
      to top,
      #cccccc,
      rgba(0, 0, 0, 0)
    ) 1 50%;
    background-color: #FFFFFF;
    text-align: center;
}

.wadhd {
    position:absolute;
    left:0;
    right:70%;
    bottom:0;
    top: 47%;
    font-size: 1em;
}

/* week agenda day header link  */
.wadhl {
    position:absolute;
    left:30%;
    right:27%;
    bottom:0;
    top: 35%;
    font-size: 2em;
    cursor: default;
}

.wadhl:hover {
    color: #228ec3;
}

/* when weather is present*/
.wadhl.iwi {
    left: 22%;
    right: 25%;
}

/* week agenda day header menu  */
.wadhm {
    background-image: url("../images/dots-vertical.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    position: absolute;
    top: 13px;
    right: 3px;
    width: 24px;
    height: 24px;
}

.wadhm.iwi {
    right: 0;
}

.wadhm:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

/* weather icon*/
.wadhw {
	position: absolute; 
	right: 18%; 
	top: 13px;
}


/* week agenda day header turnover  */
.wadhto {
    font-size: 8px;
    font-weight: bold;
    color: #787773;
    margin-left: 5px;
}

/*week agenda content*/
.wacntnt {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.watwotimezones {
    left: 6.4em;
}

.waonetimezone {
    left: 3.2em;
}

/*week agenda body*/
.wab {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 0;
    overflow: hidden;
}

/*week agenda hours */
.wahours {
    position: absolute;
    left: 0;
    width: 36px;
    top: 0;
    bottom: 0;
}

/*week agenda hours first ribbon*/
.wahoursfr {
    height: 30px;
    background-color: #F2F2F2;
}

/*week agenda hours body*/
.wahoursb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

/*week agenda hours body when first ribbon*/
.wahoursbwfr {
    top: 30px;
}

.wahidTimeZone {
    width: 72px;
}

/* week agenda hour - for the divs that display hours */
.waho {
    background-color: #F2F2F2;
    /*border-top:1px solid gray;*/
    position: absolute;
    left: 0;
    right: 0;
    padding-top: 2px;
    padding-left: 1px;
}

.wahoTimeZone {
    float: left;
    width: 3em;
    height: 100%;
    padding-top: 1.4em;
}

.wahoTimeZoneSecondaryTimeZone {
    color: #999999;
    /*border-right: 1px solid #dddddd;*/
    width: 2.5em;
    padding-left: 0.5em;

}

/* week agenda hours grid - for the divs that displays hours grid  */
.wahog {
    position: absolute;
    height: 1px;
    font-size: 1px;
    line-height: 0; /* bug IE for div height < 2Opx */
    background-color: transparent;
    border-top: 1px solid #dddddd;
    left: 0%;
    width: 100%;
}

/* week agenda hours grid - night modfe*/
.wahog-nm {
	border-top: 1px solid #555555;
    z-index: 1000;
}

/* week agenda quarter hours grid */
.wahogqh {
    position: absolute;
    height: 1px;
    font-size: 1px;
    line-height: 0; /* bug IE for div height < 2Opx */
    background-color: transparent;
    border-top: 1px solid #f4f4f4;
    left: 0%;
    width: 100%;
}

.wahog_wahours {
    left: 0;
    right: 0;
    width: auto;
}

/* vertical hours component - hours lines*/
.vhc-hoursLabels {
    position: absolute;
    left: 0;
    width: 2em;
}

.vhc-hoursLabels p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.vhc-hs-twotz {
	width: 4em;
}

.vhc-timeZone {
	position: absolute;
    float: left;
    width: 50%;
    left: 50%;
    height: 100%;
}

.vhc-timeZone p {
  margin: 0;
  position: absolute;
  font-size: 1em;
  top: 50%;
  left: 50%;
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);

}

.vhc-secondaryTimeZone {
    color: #999999;
    /*border-right: 1px solid #dddddd;*/
    left: 0%;
}

.vhc-secondaryTimeZone p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-20%, -50%);
  transform: translate(-20%, -50%);
}


/* vertical hours component - hours lines*/
.vhc-hoursLines {
    position: absolute;
    height: 1px;
    font-size: 1px;
    line-height: 0; /* bug IE for div height < 2Opx */
    background-color: transparent;
    border-top: 1px solid #dddddd;
    left: 70%;
    right: 0;
}

/* vertical hours component - hours lines night mode */
.vhc-hoursLines-nm {
	border-top: 1px solid #000000;
}

.vhc-hoursLines-twotimezones {
	left: 85%;
}


.wadays {
    position: absolute;
    left: 0;
    right: 0;
    top: 3em;
    bottom: 0;
    /*border-top: 1px solid #dddddd;*/
}

.wahdaysTimeZone {
    left: 72px;
}

/* week agenda day column */
.wadc {
    position: absolute;
    border-left: 1px solid #dddddd;
    top: 0;
    bottom: 0;
    /*border-right : 1px solid #D7D4C5;*/
}

.weekAgendaDayColumn-Events {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.weekAgendaDayColumn-Events-fr {
    top: 30px;
}

/* global vertical planning div style */
.verticalAgenda {
    /*border: 1px solid #DDDDDD;*/
    padding: 0;
    background-color: transparent;
    font-size: xx-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.singleHrVerticalAgenda {
    position: relative;
    height: 75%;
}

.singleHrVerticalAgendaContent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.shrvacOneTimeZone {
    left: 36px;
}

.shrvacTwoTimeZones {
    left: 72px;
}

/* vertical agenda resource column */
.varc {
    position: absolute;
    /*border-left: 1px solid #DDDDDD;
    border-right : 1px solid #D7D4C5;*/
}

.varc .dayAgendaCmptVert {
	border-left: 1px solid #DDDDDD;
}

/* vertical agenda resource header */
.varh {
    height: 40px;
    /*border-left : 1px solid #D7D4C5;*/
    background-color: #F2F2F2;
    text-align: center;
}

/* vertical agenda resource header turnover  */
.varhto {
    font-size: 8px;
    font-weight: bold;
    color: #787773;
}

/* vertical agenda hour div*/
.vahodiv {
    float: left;
    height: 100%;
    width: 3.2em;
    position: relative
}

.vahodiv_Fixed {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 18px;
    width: 36px;
    /*border-right: 1px solid #DDDDDD;*/
}

.vahoDivTimeZone {
    width: 6.4em;
}

/* vertical agenda empty div - the div above the hours*/
.vahoempt {
    height: 3em;
    border-bottom: 1px solid #dddddd;
    background-color: #FFFFFF;
}

.vahoemptSingleHrVertical {
    height: 15px;
    background-color: #FFFFFF;
}

.vahoTimeZone {
    float: left;
    width: 34px;
    border-left: 1px solid #dddddd;
    height: 100%
}

.vahoTimeZoneSecondaryTimeZone {
    color: #999999;
}

/* vertical agenda hour content*/
.vahocntnt {
    position: absolute;
    left: 0;
    top: 3em;
    bottom: 0;
    right: 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.vahocntntSingleHrVertical {
    top: 15px;
}

/* vertical agenda hour - for the divs that display hours */
.vaho {
    background-color: #F2F2F2;
    /*border-top:1px solid gray;*/
    position: absolute;
    width: 100%;
}

/* vertical agenda hours grid - for the divs that displays hours grid  */
.vahog {
    position: absolute;
    height: 1px;
    font-size: 1px;
    line-height: 0; /* bug IE for div height < 2Opx */
    background-color: transparent;
    border-top: 1px solid #DDDDDD;
    left: 3%;
    width: 94%;
}

/* vertical agenda work day end(horizontal line in hourless plannings)  */
.vawde {
    position: absolute;
    height: 2px;
    font-size: 1px;
    line-height: 0; /* bug IE for div height < 2Opx */
    background-color: transparent;
    border-top: 2px solid black /*#D7D4C5*/;
    left: 3%;
    width: 94%;
}

/*---------------------------------------------------------------------------------*/
/*							Agenda Events styles */
/*---------------------------------------------------------------------------------*/
/*basic presentation rule for all horizontal events */
.gssevt {
    position: absolute;
    border: 0.5px solid #ffffff;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-collapse: collapse;
    top: 0px;
    /* relative to agendaDayLine Height , overriden by style in agendaColumn*/
    bottom: 0px;
    left: 0px;
    right: 10px;
    /* relative to table auto size, overriden by style in agendaLine*/
    width: auto;
    height: auto;
    padding: 0;
    background-color: white;
    background-size:16px 16px;
    background-repeat : no-repeat;
    background-position: center;
    font-size: xx-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
    cursor: default;
    opacity: 0.85;
    filter: alpha(opacity = 70);
    -moz-opacity: 0.7;
}

/*************************************************
 planing event
***************************************************/
/* empty cell */
.gssevt.empty {
    background-color: white;
    opacity: 0.3;
    filter: alpha(opacity = 50);
    -moz-opacity: 0.3;
    border: 0;
}

/*  remarkable day; replaces empty in this case*/
.gssevt.rmk0 {
    background-color: #F06501; /* red */
    opacity: 0.1;
    filter: alpha(opacity = 10);
    -moz-opacity: 0.1;
    border: 1px solid black;
}

.gssevt.crewL 
{
    background-color: orange;/* red */
    opacity:0.1;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
}

.gssevt.crewM 
{
    background-color: green;/* red */
    opacity:0.1;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
}

/* horizontal move */
.gssevt.move {
    background-color: #cdb99c;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

/* horizontal move */
.gssevt.monday {
    background-color: #ff6969;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.gssevt.tuesday {
    background-color: #B0E0E6;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.gssevt.wednesday {
    background-color: #808000;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.gssevt.thursday {
    background-color: #FFFF00;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.gssevt.friday {
    background-color: #00FFFF;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.gssevt.saturday {
    background-color: #D87093;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.gssevt.sunday {
    background-color: red;
    /* overriden in horizontal top and height to act as a gant */
    top: 7px;
    bottom: 7px;
    left: 15%;
    width: 70%;
    z-index: 5;
}

.moveTrimmedOff {
    background-repeat: no-repeat;
    background-position: center;
}

.gssevt.move.added {
    background-color: #BAB6B0;
}
/* custom colors for appointments  */

/* untyped appointment */
.gssevt.app {
    /*color:white;*/
    background-color: darkgreen;
    /*border-radius: 4px;*/
}
/* typed appointments */
/*Requested*/
.gssevt.app.st21 {
    background-color: #9868b9;
}
/*Planed*/
.gssevt.app.st2 {
    background-color: #d8eeca;
}

/*Accepted*/
.gssevt.app.st28 {
    background-color: #b9edcb;
}

/*Reserved*/
.gssevt.app.st30 {
    background-color: #b2d6b4;
}

/*Confirmed*/
.gssevt.app.st31 {
    background-color: #66a38b;
}

.gssevt.app.st32 {
    background-color: #accae5;
}

/*Realised*/
.gssevt.app.st3 {
    background-color: #e6b8b8;
}

/*Shifted*/
.gssevt.app.st33 {
    background-color: #cd8787;
}

/*Happened*/
.gssevt.app.st35 {
    background-color: #ed6767;
}

/*Suspended*/
.gssevt.app.st6 {
    background-color: fuchsia;
}
/*Cancelled*/
.gssevt.app.st10 {
    background-color: red;
}

/* custom colors for unavailabilities */
/* unworked non periodic unavailability */
.gssevt.una {
    background-color: #ffe8cc !important;
    text-align: center;
    color: #000000;
    line-height: 20px;
}

/* worked non periodic unavailability */
.gssevt.una.wrk {
    background-color: #FFCC66 !important;
}

/* periodic not worked unavailability */
.gssevt.una.period {
    background-color: #fff4e5 !important;
}

/* periodic worked unavailability */
.gssevt.una.wrkperiod {
    background-color: #FFA500 !important;
}

.utper {
    opacity: 0.5;
    filter: alpha(opacity = 45);
    -moz-opacity: 0.5;
}

/*
 * Unavailability states.
 *
 * This features draws colored stripes over any pre-existing background color
 * This pre-existing color describes any other unavailability property such as worktime, periodicity, others.
 *
 * Drawing so requires this pre-existing background color to be marked as '!important' in its own CSS class.
 * Sample: .gssevt.una.wrk { background-color: #FFCC66 !important; }
 *
 * For IE, natively works with version >= 10.
 * Versions of IE < 10 require hacks in order to replace the <color> stripes with a <color> background.
 */

/* Unavailability in the 'requested' state */
.gssevt.una.st21 {
    background: repeating-linear-gradient(-45deg, rgba(187, 187, 187, 1),
        rgba(187, 187, 187, 1) 5px, rgba(187, 187, 187, 0) 5px,
        rgba(187, 187, 187, 0) 10px) repeat scroll 0% 0%;
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    .gssevt.una.st21 {
        background-color: #bbbbbb !important;
    }
} /* IE 9 hack */

/* Unavailability in the 'cancelled' state */
.gssevt.una.st10 {
    background: repeating-linear-gradient(-45deg, rgba(255, 105, 105, 1),
        rgba(255, 105, 105, 1) 5px, rgba(255, 105, 105, 0) 5px,
        rgba(255, 105, 105, 0) 10px) repeat scroll 0% 0%;
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    .gssevt.una.st10 {
        background-color: #ff6969 !important;
    }
} /* IE 9 hack */

/* Unavailability in the 'accepted' state */
.gssevt.una.st29 {
    background: repeating-linear-gradient(0deg, rgba(114, 191, 114, 1),
        rgba(114, 191, 114, 1) 0px, rgba(114, 191, 114, 0) 0px,
        rgba(114, 191, 114, 0) 0px) repeat scroll 0% 0%;
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    .gssevt.una.st29 {
        background-color: #72bf72 !important;
    }
} /* IE 9 hack */

/* custom colors for offdays */
/* untyped offdays */
.gssevt.dayoff {
    background-color: #ffa236;
}

.gssevt.rest.duty {
    background-color: #0fc47f; /*#83B5DB;#DDE4FF;*/
}

/* custom colors for break time */
.gssevt.break {
    background-color: #ffc47f; /*#83B5DB;#DDE4FF;*/
}

/* custom colors for located break time */
.gssevt.break.loc {
    background-color: #e9ca5f;/*#83B5DB;#DDE4FF;*/
}


.gssevt.break.duty {
    background-color: #0fc47f;/*#83B5DB;#DDE4FF;*/
}

/* custom colors for unworked time */
.gssevt.rest {
    background-color: #ffe8cd; /*#3F94D3;#84AAEB;*/
}


/* custom colors for rest on depot */
.gssevt.rest.dpt {
    background-color: #f4ffcd; /*#3F94D3;#84AAEB;*/
}

/* custom colors for unworked time with except location*/
.gssevt.rest.except {
    background-color: #bd9dd3;
}

/* custom colors for confirmed unusual location*/
.gssevt.rest.except.cf {
    background-color: #9868b9;
}

/* night exceptional locations*/
div[class~="gssevt"][class~="rest"][class~="except"][id*='#N#'] {
    background-position: left center;
}

/* exceptional locations: hr week planning - vertical plannings*/
.weekAgendaDayColumn-Events div[class~="gssevt"][class~="rest"][class~="except"] {
    background-position: center bottom;
}

.weekAgendaDayColumn-Events div[class~="gssevt"][class~="rest"][class~="except"][id*='#N#']
    {
    background-position: center top;
}

/* custom colors for a customer unworked time */
.gssevt.custRest {
    background-color: #84AAEB; /*#88A4DD;*/
}

.gssevt.job {
    background-color: green;
}

.gssevt.mrk {
    background-color: #83B5DB; /*#DDE4FF;*/
    /*height: 7px;*/
    right: auto;
    top: 16px;
    cursor: move;
}

.gssevt.mrk.k0 {
    background-color: #83B5DB;
}

.gssevt.mrk.k1 {
    background-color: #CCD9E3;
}

.gssevt.mrk.k2 {
    background-color: #374C5B;
}

.gssevt.mrk.k3 {
    background-color: #466175;
}

.gssevt.mrk.k4 {
    background-color: #648BA8;
}

.gssevt.mrk.k5 {
    background-color: #9EA9B0;
}

.gssevt.mrk.k6 {
    background-color: #182228;
}

.gssevt.mrk.k7 {
    background-color: #242728;
}

.gssevt.mrk.k8 {
    background-color: #52575B;
}

.gssevt.mrk.evTwoRibbonsMarker {
    top: 34px;
}

.gssevt.mrkVert {
    background-color: #83B5DB; /*#83B5DB;#DDE4FF;*/
    width: 11px;
    cursor: move;
    min-height: 12px;
}

.gssevt.mrkMaa {
    background-color: #83B5DB; /*#83B5DB;#DDE4FF;*/
    top: 0%;
    height: 15px;
    /*cursor: move;*/
}

.mrkLeft {
    background-color: rgba(255,0,0,0.8);
    width: 10px;
    position: relative;
    float: left;
    height: 7px;
}

.mrkRight {
    background-color: rgba(255,0,0,0.8);
    width: 10px;
    position: relative;
    float: right;
    height: 7px;
    cursor: e-resize;
}

.mrkLeftVert {
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 12px;
}

.mrkRightVert {
    background-image: url("../images/planning/marker_red_7.png");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 11px;
    height: 12px;
    cursor: n-resize;
}

.gssevt.mrk.stack2 {
    top: 1px;
}

.gssevt.mrk.stack2.evTwoRibbonsMarker {
    top: 20px;
}

.gssevt.mrkVert.stack2 {
    left: 20%;
}

.gssevt.mrkVert.stack3 {
    left: 40%;
}

.gssevt.mrkVert.stack4 {
    left: 60%;
}

.gssevt.mrkVert.stack5 {
    left: 80%;
}

.mrkLeftImg {
    width: 8px;
    top: 13px;
    height: 11px;
}

.mrkRightImg {
    width: 8px;
    top: 13px;
    height: 11px;
}

/***************************/
/* global gssevt modifiers */

/*out of worksite*/
.outw {
    border: 1px outset black;
}





/*style for legend , also used to cancel all predefined stuff */
.legend, .gssevt.mrk.legend {
    position: relative;
    top: 0%;
    height: 20px;
    left: 0%;
    width: 48px;
    height: 15px;
}

.gssevt.move.legend {
    height: 15px;
    width: 48px;
    top: 0;
    left: 0;
}

.wo.legend {
    height: 15px;
    width: 48px;
}

.gssevt.mkd.legend, .gssevt.isRemote.legend, .nhr.legend, .gssevt.isForced.legend
,.gssevt.isMeeting.legend,.gssevt.sply.legend {
    background-size: 13px 13px;
    background-position-y: 0;
}


/*---------------------------------------------------------------------------------*/
/*							Specific modifier  */
/*---------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------*/
/*					Horizontal day(s) agenda		Hours grid */
/*---------------------------------------------------------------------------------*/
/* hours component */
.hoursCmpt {
    background-color: white;
    height: 2.307em;
    position: relative;
    /*width:90%;*/
}

.hoursCmpt_Fixed {
    background-color: white;
    height: 2.307em;
    position: absolute;
    right: 1em;
    left: 0;
    top: 0;
    border-right: 1px solid #DDDDDD;
    z-index: 5;
    margin-right: 0.16em;
}

.hoursCmptTwoTimeZones {
    height: 3.846em;
}

/* hours div */
.hoursDiv {

    left: 25%;
    right: 0%;
    background-color: white;
    top: 0;
    bottom: 0;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    position: absolute;
    overflow: hidden;
}

.hoursDiv_tz {
    left: 30px;
}

.hoursDiv_allWidth {
    left: 0%;
}

.hoursDiv_hide {
    display: none;
}

.hoursDivViewPort {
    position: absolute;
    width: 100%;
    height: 100%;
}

.daysDivViewPort {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hoursDivTimeZoneLabel {
    right: 75%;
    width: 30px;
    height: 19px;
    position: absolute;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
}

.hdtzl_left {
    left: 0%;
}

.hoursDivSecondaryTimeZone {
    color: #999999;
}

.hoursDivPrincipalTimeZone {
    top: 20px;
}

/* agenda hour cell(which displays hour label) */
.aghc {
    color: #111111;
    font-size: 0.75em;
    background-color: white;
    cursor: default;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid #DDDDDD;
}

/* agenda hour cell for midnight*/
.aghcmn {
    border-left: 1px solid #555555;	
}

/* agenda hour lines(vertical lines of each hour) */
.aghl {
    position: absolute;
    width: 1px;
    top: 0%;
    height: 100%;
    z-index: 5;
    background-color: #DDDDDD;
}

/* agenda hour quarter lines(vertical lines of each quarter hour) */
.agql {
    position: absolute;
    width: 1px;
    top: 1.538em;
    bottom: 0;
    z-index: 5;
    background-color: #DDDDDD;
}
/* agenda hour quarter header(horizontal line above the quarter lines) */
.agqh {
    position: absolute;
    top: 1.461em;
    width: 100%;
    left: 0%;
    height: 1px;
    z-index: 5;
    background-color: #DDDDDD;
}
/* agenda hour lines(vertical lines of each hour) */
.agchl {
    position: absolute;
    width: 1px;
    top: 0px;
    bottom: 0px;
    background-color: #e3e3e3;
}

/* agenda hour lines for midnight */
.aghchlmn {
    background-color: #555555;
    z-index: 1000;
}

/* agenda work day end(vertical line in hourless plannings) */
.agwde {
    position: absolute;
    width: 2px;
    top: 0%;
    height: 100%;
    background-color: black; /*#D7D4C5*/;
}

/* header for multi-days, multi-weeks, multi month plannings*/
.period-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #dddddd;
    height: 3em;
	height: 40px;
    position: absolute;
    right: 1.461em;
    left: 0;
    top: 0;
    margin-right: 0.16em;
}

/* if the multi weeks job planning header needs some specific styles*/
.period-header--weeks-and-days {

}

/* multi weeks job planning has the days part, so to look better we need to gradient upper the border  */
.period-header--weeks-and-days .period-header__unit {
    border-image: linear-gradient( to top, #cccccc, #cccccc, rgba(0, 0, 0, 0) ) 1 50%;
}

/* the part of the period header which is above the resource name (empty or with a link)*/
.period-header__res-name {
    position: absolute;
    left: 0%;
    right: 75%;
    top: 0;
    bottom: 0;
    text-align: right;
}

.period-header__res-name__link {
	position: absolute;
	left: 0;
	right: 0;
	top: 1.4em;
	bottom: 0;
	padding-right: 1.1em;
	text-align: right;
}

.period-header__res-name__link:hover {
    color: #228ec3;
}

/* the rest of the period header which displays the units (days, weeks, months)*/
.period-header__units {
	position: absolute;
	left: 25%;
	right: 0;
	top: 0;
    bottom: 0;
    background-color: #FFFFFF;
	height: 40px;
    overflow: hidden;
}

/* in the units part of period header the subdivision unit (day, week, month)*/
.period-header__unit {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid;
    border-image: linear-gradient( to top, #cccccc, rgba(0, 0, 0, 0) ) 1 50%;
    text-align: center;
    cursor: default;
}

.period-header__unit:last-child {
    border-right: 1px solid;
    
}

.period-header-unit-day__week-day {
    position:absolute;
    left:0;
    right:70%;
    bottom:0;
    top: 47%;
    font-size: 1em;
}

.period-header-unit-day__day {
    position:absolute;
    left:30%;
    right:35%;
    bottom:0;
    top: 35%;
    font-size: 2em;
    cursor: default;
}

.period-header-unit-day__day:hover {
    color: #228ec3;
}

.period-header-unit-day__weather {
    position: absolute;
    left: 75%;
    right: 2%;
    bottom: 0;
    top: 35%;
}


.period-header-unit-week {
	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding-top: 0.7em;
    font-size: 1.8em;
}

.period-header-unit-week:hover {
    color: #228ec3;
}

.period-header-unit-month {
}

.period-header-unit-month:hover {
    color: #228ec3;
}

.period-header-unit-week-and-days__week:hover {
    color: #228ec3;
}

.period-header-unit-week-and-days__days {
    position: relative;
    height: 1.5em;
    border-top: 1px solid #DDDDDD;
}

.period-header-unit-week-and-days__day {
    position: absolute;
    font-size: xx-small;
    border-right: 1px solid #DDDDDD;
    top: 0;
    bottom: 0;
}

.period-header-unit-week-and-days__day:hover {
    color: #228ec3;
}

/* to eliminate clash with parent border*/
.period-header-unit-week-and-days__day:last-child {
    border-right: 0;
}


.multiHrWeekHours {
    position: relative;
    display: none;
}

.dayChrg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 0.2em;
    text-align: center;
    font-weight: bold;
    color: black;
    opacity: 0.77;
    filter: alpha(opacity=77);
    -moz-opacity: 0.77;
    font-size: 11pt;
    white-space: nowrap;
    overflow: hidden ;
    color: #eeeeee;
}

.wadc_day {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    cursor: default;
}

.wadc_day .dayChrg {
    white-space: normal;    
    line-height: 3;
}

.maday_monthBckgd .dayChrg {
    white-space: normal;    
    border: 0;
    margin: 0;
    padding: 0;
    line-height: 2.5;
}
    
.mhodc_day {
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    cursor: default;
}   

.mhodc_day .dayChrg {
    height: 100%;
    white-space: normal;    
    border: 0;
    margin: 0;
    padding: 0;
    line-height: 3;
}

.plng-line__unit.yearCharge .dayChrg {
    font-size: 8pt;
}

.dayChrgVert {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
}

.dayChrg.dc_chlv1 {
    background-color: green;
}

.dayChrg.dc_chlv2 {
    background-color: orange;
}

.dayChrg.dc_chlv3 {
    background-color: red;
}

.dayChrg.dc_dayoff
{
    background-color: #eeeeee;
    color: #333333;
}

.dayChrg.dc_rest
{
    background-color: #eeeeee;
    color: #333333;
}

.dc_unavnotworked
{
    background-color: #eeeeee;
    color: #333333;
}

.dc_notworked
{
    background-color: #eeeeee;
    color: #333333;
}

.dayChrg.dc_split 
{
    float: left;
    position: relative;
    height: 100%;
    width: 50%;
    border-left: 0;
    border-right: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.dc_workpart {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
}

.dc_maxloadpart {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    font-size: 11pt;
    padding-top: 0.2em;
    white-space: nowrap;
    overflow: hidden ;
    background-image: repeating-linear-gradient(135deg, #aaaaaa 10px, #ffffff 15px);
}

.dc_workpart_vert {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
}

.dc_maxloadpart_vert {
    position: absolute;
    left: 0;
    top: 100%;
    bottom: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    font-size: 11pt;
    padding-top: 0em;
    white-space: nowrap;
    overflow: hidden ;
    background-image: repeating-linear-gradient(135deg, #aaaaaa 10px, #ffffff 15px);
}

.dcmlp-month {
	font-size: 10pt;
    padding-top: 0;
}


.dc_workpart_multihrweek {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.dc_workpart_multihrweek.mlp {
    right: 23px;
}

.dc_workpart_multihrweek.mlp .dayChrg {
    font-size: 9pt;
}

.dc_maxloadpart_multihrweek {
    position: absolute;
    width: 23px;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    font-size: 9pt;
    padding-top: 0.2em;
    white-space: nowrap;
    overflow: hidden ;
    background-image: repeating-linear-gradient(135deg, #aaaaaa 10px, #ffffff 15px);
}

.wadc_day .dayChrg.dc_split, .maday_monthBckgd .dayChrg.dc_split, .mhodc_day .dayChrg.dc_split 
{
    float: none;
    position: relative;
    padding-top: 0;
    height: 50%;
    width: 100%;
}

.hrTypeGroupHeader {
    background-color: #E9E9E9;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    color: #888888;
    text-align: left;
    font-weight: normal;
    font-size: 1em;
    position: relative;
    height: calc(2.3 * var(--pbu));;
    margin-right: 0.16em;
    margin-top: 0.46em;
    padding-left: 3.7em;
    padding-top: 0.3em;
    /*padding-bottom: 3px;*/
}

.hrgd-close {
	border-bottom: 1px solid #DDDDDD;
}

.hrTypeGroupHeader_vert {
    background-color: #E9E9E9;
    color: #888888;
    text-align: left;
    font-weight: normal;
    font-size: 15px;
    position: relative;
    width: 18px; /* width + border (left + right) must be 25px*/
    border-left: 1px solid #DDDDDD;
    /*border-right: 1px solid #DDDDDD;
    margin-left: 2px;
    margin-right: 2px;*/
    padding-left: 4px;
    height: 100%;
    overflow: hidden;
}

.dayGroupHeader {
    background-color: #EDDA74;
    color: black;
    text-align: left;
    font-weight: normal;
    position: relative;
    height: 21px;
    border-radius: 3px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    padding-left: 5px;
    padding-top: 5px;
}

.dayGroupHeader_Vert {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 20px;
    background-color: #EDDA74;
    color: black;
    text-align: left;
    font-weight: normal;
    position: relative;
    font-weight: bold;
    height: 100%;
}

.teamGroupHeader {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #c3d2d9;
    /*#C1BEA5 CF8B91;#7777CC ; #004687;/* #CF8B91;*/
    border: 1px solid #DDCCCC;
    color: #004687; /*#F2F2F2;*/
    text-align: left;
    font-weight: bold;
    position: relative;
    height: 22px;
    border-radius: 3px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    padding-left: 5px;
    padding-top: 5px;
}

.teamGroupHeader_vert {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 22px; /* width + border (left + right) must be 25px*/
    border-left: 1px solid #DDCCCC;
    border-right: 2px inset #DDCCCC;
    background-color: #c3d2d9;
    /*#C1BEA5 CF8B91;#7777CC ; #004687;/* #CF8B91;*/
    color: #004687; /*#F2F2F2;*/
    text-align: left;
    font-weight: bold;
    position: relative;
    float: left;
    height: 100%;
}

/************************Agenda look details **************************/
/* Appointment Priority  aspect in most planning */
.lv1 {
    /*height: 21.5px;*/
    border-bottom-width: 2px;
    border-bottom-color: #ED1D18;
}

.lv2 {
    /*height: 19.5px;*/
    border-bottom-width: 4px;
    border-bottom-color: #ED1D18;
}

.lv3 {
    /*height: 16.5px;*/
    border-bottom-width: 7px;
    border-bottom-color: #ED1D18;
}
/* Appointment Priority  aspect in Mono resource week planning */
.lw1 {
    border-bottom-width: 2px;
    border-bottom-color: #ED1D18;
}

.lw2 {
    border-bottom-width: 4px;
    border-bottom-color: #ED1D18;
}

.lw3 {
    border-bottom-width: 7px;
    border-bottom-color: #ED1D18;
}

/* Appointment Out of worksite aspect in multiresources  worksite planning */
.wo {
    border: 1px solid black;
}

/* Human Resource Out of worksite aspect in multiresources  worksite planning */
.hwo {
    /*border: 1px solid #555555;
    background-color: #fffdfa;*/
    text-decoration: underline;
    
}



div#agCtrlDtIconDiv {
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    background-size: 15px;
    /*left:80%;*/
    right: 26px;
    top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ctrlDtIcon_stDISABLED {
    background-image: url("../images/general/lock-validated.svg");
}

.ctrlDtIcon_stCLOSED {
    background-image: url("../images/general/lock-asked.svg");
}

.ctrlDtIcon_stSEALED {
    background-image: url("../images/general/lock-validated.svg");
}

.ctrlDtIcon_stFORCED {
    background-image: url("../images/general/lock-validated.svg");
}

.ctrlDtIcon_stREQUESTED {
    background-image: url("../images/general/lock-asked.svg");
}

.ctrlDtIcon_stVALIDATED {
    background-image: url("../images/general/lock-validated.svg");
}

.ctrlDtIcon_stREFUSED {
    background-image: url("../images/general/lock-refused.svg");
}

/*.isMeeting,.isRemote,.isMeeting.mkd, .mkd, .sply {
    background-position-x: 80%;
}

.sply {
    background-image: url("../images/planning/appSupply.png");
    background-repeat: no-repeat;
    background-position: 50% 1px;
}

.mkd.sply {
    background-image: url("../images/planning/mark.png"),
        url("../images/planning/appSupply.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top 80% left  50% ;
}*/

.isMeeting, .nhr, .isRemote, .mkd, .isForced {
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: right 2px top 1px;
}

.sply {
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 2px top 1px;
}

.mkd.sply {
    background-size: 18px 18px;
}

.onGoing {
    opacity: 1;
    filter: alpha(opacity = 100);
    -moz-opacity: 1;
}

div[class~="gssevt"][class~="app"][class~="isRequested"] {
    background-color: #9868b9;
}

div[class~="gssevt"][class~="app"][class~="spclc"] {
    background-color: yellow;
}

div#agCtrlDtIconDiv_week {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    position: absolute;
    right: 3px;
    top: 1px;
    width: 18px;
    height: 18px;
}

div#agCtrlDtIconDiv_week:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

div#agCtrlDtIconDiv_month {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    position: absolute;
    left: 3px;
    top: 2px;
    width: 16px;
    height: 16px;
}

div#agCtrlDtIconDiv_month:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

div#agCtrlDtIconDiv_Vert {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    position: absolute;
    right: 20px;
    top: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

div#wbIconDiv_Vert {
    background-image: url("../images/waybill.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    position: absolute;
    border: 0;
    right: 21px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 20px;
}

.wbIconDiv_week {
    background-image: url("../images/waybill.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    position: absolute;
    top: 18px;
    right: 3px;
    width: 18px;
    height: 18px;
}

.wbIconDiv_week:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.multiItiColorPickerDiv_Vert {
    position: absolute;
    height: 13px;
    width: 13px;
    right: 20px;
    top: 22px;
    border-radius: 8px;
}

.multiItiColorPickerDiv_Vert.possiblersname {
    background-color: #BDBDBD !important;
}

.res-name__itineraire-vert {
    background-image: url("../images/map-marker-off-lightGray.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    margin-left: 2px;
    top: 21px;
    left: 0px;
    height: 22px;
    width: 22px;
    position: absolute;
}

.planningmenubar {
    background-color: #F2F2F2;
    padding: 0;
    margin-bottom: 3px;
    border: 1px solid #DDCCCC;
    border-bottom: 2px inset #DDCCCC;
    border-right: 2px inset #DDCCCC;
}

.planningmenudescr {
    background-color: #F2F2F2;
    text-align: center;
    font-weight: bold;
    color: #004687;
    padding: 0;
    border-bottom: 2px inset #DDCCCC;
}

.planningmenu {
    height: 5.5em;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.planningmenunavigation {
    height: 2.7141999999999995em;
    /*background-color: #F2F2F2;*/
    /*text-align : left;
	font-weight: bold;
	overflow:hidden;
	color: #004687;*/
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #dddddd;
    /*background: #f2f2f2 url(uitheme/images/ui-bg_highlight-soft_80_f2f2f2_1x100.png) 50% 50% repeat-x;*/
    border-color: #dddddd;
    background-color: #ffffff;
}

.planningmenunavigation-dropDownContainer {
    width: 58.5em;
    float: left;
}

.planningmenunavigation .ui.selection.dropdown .menu {
    max-height: 500px;
}

.planningmenubuttons {
    position: absolute;
    left: 0;
    top: 3.2em;
    width: 100%;
    height: 2.2em;
    background-color: #ffffff;
    overflow: hidden;
}

.planningmenubuttons-apptPanel {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5em;
    bottom: 0;
}


.planningmenubuttons-calAndOthersContainer {
    position: absolute;
    left: 2.5em;
    top: 0;
    right: 0;
    bottom: 0;
}

.planningmenubuttons-calContainer {
    position: absolute;
    left: 0;
    top: 0;
    right: 48%;
    bottom: 0;
}

.planningmenubuttons-othersContainer {
    position: absolute;
    left: 52%;
    top: 0;
    right: 0;
    bottom: 0;
}

.planningmenubuttons-cal {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 145px;
    z-index: 2;
    background-color: #ffffff;
}

.planningmenubuttons-others {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 18em;
    z-index: 1;
}

.planningmenudescrtext {
    color: #336699;
}

.planningmenudescrmoreinfo {
    font-size: 9px;
    color: #336699;
}

.planningmenubutton-cal-previous {
    float: left;
    background-image: url("../images/chevron-left.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.8em;
    height: 2.2em;
    width: 2em;
}

.planningmenubutton-cal-previous:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.planningmenubutton-cal-next {
    float: left;
    background-image: url("../images/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.8em;
    height: 2.2em;
    width: 2em;
}

.planningmenubutton-cal-next:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.planningmenubutton-cal-cal {
    float: left;
    padding-top: 0.5em;
    font-weight: normal;
}

.planningmenubutton-hrinfo {
    float: right;
    margin-left: 1.5em;
    margin-top: 0.5em;
    cursor: pointer;
    background-image: url("../images/aide.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5em;
    height: 2em;
    width: 2em;
}

.planningmenubutton {
    float: right;
    width: 2.2em;
    height: 2.2em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.8em;
}

.planningmenubutton:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.planningmenubutton .weather-react-box {
	margin-top: 3px;
	width: 27px;
}

.monthAgenda {
    /*border: 1px solid #dddddd;
    border-collapse: collapse;*/
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #dddddd;
}

/* month agenda header - contains days header  */
.mah {
    height: 1.8em;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
    right: 1.307em;
}

.mah-empty {
	position: absolute;
	left: 0%;
	width: 3em;
	height: 100%;
}

.mah-days {
    position: absolute;
    left: 3em;
    right: 0;
}

/* month agenda day header - for each day of the agenda header*/
.madh {
    position: absolute;
    top: 0;
    height: 1.8em;
    border-left: 1px solid;
    border-image:
    linear-gradient(
      to top,
      #cccccc,
      rgba(0, 0, 0, 0)
    ) 1 50%;
    text-align: left;
    font-size: 0.9em;
    padding-left: 3px;
    padding-top: 5px;
}

/* month agenda week - for each week of the month */
.maw {
    height: 200px;
    position: relative;
}

.maw-label {
    position: absolute;
    left: 0%;
    width: 3em;
    height: 199px;
    border-top: 1px solid;
    border-image:
    linear-gradient(
      to left,
      #cccccc,
      rgba(0, 0, 0, 0)
    ) 50% 1;
}

.maw-label p {
  margin: 0;
  position: absolute;
  font-size: 1em;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: default;
}

.maw-label p:hover {
    color: #228ec3;
}

.maw-days {
	position: absolute;
	left: 3em;
	right: 0;
	height: 100%;
}

.maday {
    background-color: #ffffff;
    position: absolute;
    height: 199px;
    border-left: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.madaydescr {
    height: 22px;
    /*border-bottom: 1px solid #DDDDDD;*/
    text-align: center;
}

.madaydescr p:hover {
    color: #228ec3;
    cursor: default;
}

.maday_monthBckgd {
    position: relative;
    height: 176px;
    top: 0;
    width: auto;
}

.dayChrg.maday_monthBckgd {
	border: 0;
}

.maday_outMonth {
    background-color: #F7F6EE;
}

.maday_ev {
	position: absolute;
    left: 0;
    right:0;
    bottom: 0;
    top: 23px;
}

.madaydescrlink {
    text-decoration: underline;
    cursor: pointer;
    font-size: 8pt;
    /*color: #F2F2F2;*/
}

.maspecialunav {
    position: absolute;
    width: 100%;
    left: 0%;
    top: 0%;
    height: 157px;
}

.mahalfrest {
    position: absolute;
    left: 0;
    right: 0;
    border: 0;
}

/* month agenda activity - specific month agenda style for activity */
.maa {
    position: relative;
    top: 0%;
    left: 0%;
    width: auto;
    right: 0%;
}

.monthagenda_header {
    height: 20px;
}

.monthagenda_week {
    border: 2px solid #999999;
    width: 100%;
    height: 200px;
}

.monthagenda_day {
    font-size: 80%;
    border: 1px solid #999999;
    width: 100%;
    height: 100%;
    overflow: scroll;
    vertical-align: top;
}

.monthagenda_day_other {
    background-color: #DDDDDD;
}

.monthagenda_day_current {
    border: 3px solid black;
}

.monthagenda_day_header {
    border: 1px solid #999999;
    width: 100%;
    height: 15px;
    vertical-align: top;
    text-align: right;
}

.monthagenda_day tr {
    vertical-align: top;
}

.monthagenda_day td {
    vertical-align: top;
}

.tooltipDivAppointment {
    right: 80px;
    bottom: 20px;
    min-width: 190px;
    background-color: #FFEEC7;
    opacity: 0.85;
    filter: alpha(opacity = 85);
    -moz-opacity: 0.85;
    border: 1px solid #84AAEB;
    padding: 0.2em;
    text-align: left;
    font-size: xx-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.tooltipDiv {
    white-space: nowrap;
    display: none;
    position: absolute;
    left: 500px;
    z-index: 1001;
    background-color: #FFFFFF;
    min-width: 230px;
    font-size: small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid #dddddd;
    border-radius: 3px;
	box-shadow:2px 2px #eeeeee;
    padding-bottom: 4px;
}

.tooltipMenu {
    /*background-color: #F8F6F8;*/
    height: 35px;
    padding: 0;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    /*
	border: 1px solid #228ec3;
	border-radius:3px;
	background: #228ec3 url(uitheme/images/ui-bg_highlight-soft_50_3f94d3_1x100.png) 50% 50% repeat-x;*/
}

.tooltipContent {
    background-color: #FFFFFF;
    color: #777777;
    /*border-radius:0 0 5px 5px;*/
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
}

#tooltipContent .vertical.menu {
	width: 19em;
	padding: 0;
	margin: 0;
	margin-bottom :1em;
}

#tooltipContent .vertical.menu .item {
    height: 2.2em;
}

#tooltipContent span {
    color: #228ec3;
}

#tooltipContent label {
    color: #228ec3;
}

.ttc-home {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat; 
    background-image: url(../pages/images/home-fill.svg);
    background-size: 15px 15px;
}

.ttc-warehouse {
    display: inline-block;
    background-image: url(../pages/images/warehouse.svg);
    width: 15px;
    height: 14px;
    background-repeat: no-repeat; 
    background-size: 15px 15px;
}

.ttscc-i {
    margin-top: 0px;
    float: left;
    
}

.ttscc-l {
    margin-top: 2px;
    float: left;
    margin-left: 3px;
}

#tooltipMenu .icon[data-icon = "playlist_plus"] > .svg-icon {
	height: 1.9em;
	width: 1.8em;
	margin-top: 0;
}

#tooltipMenu div.playlist_plus {
	padding-top: 0.4em;
}

#tooltipMenu .icon[data-icon = "account_outline"] > .svg-icon{
	height: 1.6em;
    width: 1.6em;
}

#tooltipMenu div.account_outline {
    padding-top: 0.65em;
}

#tooltipMenu .icon[data-icon = "state_machine"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu div.state_machine {
    padding-top: 0.8em;
}

#tooltipMenu .icon[data-icon = "calendar_remove"] > .svg-icon{
    height: 1.5em;
    width: 1.5em;
}

#tooltipMenu .icon[data-icon = "calendar_question"] > .svg-icon{
    height: 1.5em;
    width: 1.5em;
}

#tooltipMenu .icon[data-icon = "calendar_import"] > .svg-icon{
    height: 1.4em;
    width: 1.4em;
}

#tooltipMenu div.calendar_import {
    padding-top: 0.7em;
}

#tooltipMenu .icon[data-icon = "clock_alert"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu .icon[data-icon = "clock_fast"] > .svg-icon{
    height: 1.6em;
    width: 1.6em;
}

#tooltipMenu div.clock_fast {
    padding-top: 0.65em;
}

#tooltipMenu .icon[data-icon = "account_group_outline"] > .svg-icon{
    height: 1.6em;
    width: 1.6em;
}

#tooltipMenu div.account_group_outline {
    padding-top: 0.65em;
}

#tooltipMenu .icon[data-icon = "lock_plus_outline"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}


#tooltipMenu .icon[data-icon = "lock_check_outline"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu .icon[data-icon = "lock_minus_outline"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu .icon[data-icon = "lock_remove_outline"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu .icon[data-icon = "lock_outline"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu .icon[data-icon = "rhombus_outline"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

#tooltipMenu .icon[data-icon = "map_marker_plus"] > .svg-icon{
    height: 1.3em;
    width: 1.3em;
}

.multiItiColorPickerDiv {
	position: absolute;
	height: 13px;
    width: 13px;
    left: 4px;
    top: 5px;
    border-radius: 8px;
}

.multiItiColorPickerDiv.possiblersname {
    background-color: #BDBDBD !important;
}

.res-name__itineraire {
    background-image: url("../images/map-marker-off-lightGray.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.692em;
    margin-left: 0.15em;
    height: 1.692em;
    width: 1.692em;
    left: 0;
    top: 0.4em;
    /*cursor: grab;*/
    position: absolute;
}

.tooltipErrMsg_title {
    background-color: #F2F2F2;
    color: #004687;
    font-size: x-small;
}

.tooltipErrMsg_body {
    background-color: #F2F2F2;
    color: #004687;
    font-size: xx-small;
    margin: 3px;
}

.locationHeader {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 100%;
    background-color: #F2F2F2;
    border: 1px solid #DDCCCC;
    border-bottom: 2px inset #DDCCCC;
    border-right: 2px inset #DDCCCC;
    color: #004687;
    text-align: left;
    font-weight: bold;
    position: relative;
    height: 21px;
    cursor: pointer;
}

.curHrBarPar {
    width: 2px;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    font-size: 1px;
    line-height: 0;
    z-index: 5;
}

.curHrBarChld1 {
    width: 1px;
    left: 0;
    background-color: #ED1D18;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    height: 100%;
    font-size: 1px;
    line-height: 0;
}

.curHrBarChld2 {
    width: 1px;
    left: 1px;
    background-color: #ED1D18;
    position: absolute;
    height: 100%;
    font-size: 1px;
    line-height: 0;
}

.hrNameButtonBar {
	position: absolute;
	z-index: 9500;
	top: 0px;
	left: 0px;
	width: auto;
	min-width: 50px;
	height: 30px;
	background-color: #f4f4f4;
	display: none;
	border-top: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
}

.hrnml {
	margin-top: 3px;
}

.hrnmi {
    /*background-color: red;*/
    width: 18px;
    height: 18px;
    margin-top: 0px;
    float: left;
    margin-right: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}


.hrnmi:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.hrnmi-color {
	background-image: url("../images/colorPicker.svg");
}

.hrnmi-expressMorning {
    background-image: url("../images/expressUnavailabilityMorning.svg");
}

.hrnmi-expressEvening {
    background-image: url("../images/expressUnavailabilityEvening.svg");
}

.hrnmi-cd-DISABLED {
    background-image: url("../images/general/lock-validated.svg");
    background-size: 19px;
}

.hrnmi-cd-CLOSED {
    background-image: url("../images/general/lock-asked.svg");
    background-size: 19px;
}

.hrnmi-cd-SEALED {
    background-image: url("../images/general/lock-validated.svg");
    background-size: 19px;
}

.hrnmi-cd-FORCED {
    background-image: url("../images/general/lock-validated.svg");
    background-size: 19px;
}

.hrnmi-cd-REQUESTED {
    background-image: url("../images/general/lock-asked.svg");
    background-size: 19px;
}

.hrnmi-cd-VALIDATED {
    background-image: url("../images/general/lock-validated.svg");
    background-size: 19px;
}

.hnbb-cd-REFUSED {
    background-image: url("../images/general/lock-refused.svg");
    background-size: 19px;
}


/* classes for activity card in pdf export */
.actcardpdf {
    /*color:white;*/
    background-color: darkgreen;
}
/* typed appointments */
/*Planed*/
.actcardpdf.st2 {
    background-color: #A8FDAA;
}

/*Reserved*/
.actcardpdf.st30 {
    background-color: #75C47B;
}

/*Confirmed*/
.actcardpdf.st31 {
    background-color: #408741;
}

/*Realised*/
.actcardpdf.st3 {
    background-color: #FDDBDB;
}

/* remarkable day */
.rmk {
    background-color: #FFF1E8; /*#FBEAEA*/
}

.wadh.rmk ,.varh .rmk {
    background-color: #ffffff;
    background-image: linear-gradient(
      to top,
      #E8DBD3,
      rgba(0, 0, 0, 0)
    );
}

/* controlled day */
.ay {
    background-color: #D4C69D; /*#FBEAEA*/
}

.ctrlDStDISABLED {
    background-color: #D4C69D; /*#FBEAEA*/
}

.wadh.ctrlDStDISABLED, .varh .ctrlDStDISABLED {
    background-color: #ffffff;
    background-image: linear-gradient(
      to top,
      #D4C69D,
      rgba(0, 0, 0, 0)
    );
}


.ctrlDStCLOSED {
    background-color: #FBEAEA; /*#FBEAEA*/
}

.wadh.ctrlDStCLOSED, .varh .ctrlDStCLOSED {
    background-color: #ffffff;
    background-image: linear-gradient(
      to top,
      #FBEAEA,
      rgba(0, 0, 0, 0)
    );
}

.ctrlDStSEALED {
    background-color: #D4C69D; /*#FBEAEA*/
}

.wadh.ctrlDStSEALED, .varh .ctrlDStSEALED {
    background-color: #ffffff;
    background-image: linear-gradient(
      to top,
      #D4C69D,
      rgba(0, 0, 0, 0)
    );
}

.ctrlDStFORCED {
    background-color: #D4C69D; /*#FBEAEA*/
}

.wadh.ctrlDStFORCED, .varh .ctrlDStFORCED {
    background-color: #ffffff;
    background-image: linear-gradient(
      to top,
      #D4C69D,
      rgba(0, 0, 0, 0)
    );
}

.ctrlDStREQUESTED {
	background-color: #FFF5AB;
}

.wadh.ctrlDStREQUESTED, .varh .ctrlDStREQUESTED {
	background-color: #ffffff;
    background-image: linear-gradient(
      to top,
      #FFF7C7,
      rgba(0, 0, 0, 0)
    );
}

.ctrlDStVALIDATED {
    background-color: #E7FFAB; /*#FBEAEA*/
}

.ctrlDStREFUSED {
    background-color: #D4C69D; /*#FBEAEA*/
}

.scell {
    /*background-color:white;*/
    height: 100%;
    width: 100%;
    /*border: 1px solid #999999;
	margin:1px;*/
    text-align: center;
    color: black;
    font-size: xx-small;
    /*white-space:nowrap;*/
    overflow: hidden;
}

.scellOpaque {
    opacity: 1;
    filter: alpha(opacity = 100);
    -moz-opacity: 1;
    height: 100%;
    border: 0;
}

.sc_date {
    width: 60px;
}

.sc_oc {
    width: 40px;
    height: 20px;
}

.countTd {
    width: 150px;
}

.jobCountTd {
    width: 40px;
}

.tableAll {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    height: 25px;
    border: 0;
}

.headerTable {
    border: 1px solid #999999;
}

.weekTable {
    border-right: 1px solid #999999;
}

.headerCell {
    border-left: 1px solid #999999;
    text-align: center;
}

.emptyCell {
    background-color: white;
}

.shrTr {
    border-bottom: 1px solid #999999;
}

.shrhead {
    border-left: 1px solid #D7D4C5;
    height: 28px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    background-color: #F2F2F2;
}

.shrWeekHeader {
    float: left;
    width: 50px;
}

.shrWeekText {
    text-align: center;
}

.shrDayInfo {
    float: left;
    width: 186px;
}

.shrDayInfoHeader {
    background-color: #F2F2F2;
    height: 28px;
}

.shrHrNames {
    position: relative;
    width: auto;
    overflow: hidden;
    background-color: #F2F2F2;
    height: 28px;
}

.shrWeekBackground {
    background-color: #19BEFF;
}

.shrWeekSeparator {
    background-color: #dddddd;
    height: 20px;
}

.shrTeam1 {
    background-color: red;
}

.shrTeam2 {
    background-color: yellow;
}

.sdayhr {
    height: 23px;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: white;
}

.sdayT {
    height: 23px;
    background-color: white;
}

.jobWeekDiv {
    top: 1px;
    bottom: 0;
    background-color: white;
    border: 1px solid #eaeaea;
}

.jobDayDiv {
    position: absolute;
    border-right: 1px solid #eaeaea;
    bottom: 0;
    top: 0;
}

.jobWeeksNoBorder {
    border: 0;
    width: auto;
    height: auto;
    bottom: 0;
    top: 0;
    left: 1px;
    right: 1px;
}




.unavSeeBck {
    margin-top: 1px;
    height: 16px;
    opacity: 1;
}

.unavDontSeeBck {
    height: 19px;
    opacity: 1;
}

div#PLANNING_ID {
    position: absolute;
    left: 0;
    right: 0;
    top: 5.7em;
    bottom: 0;
    box-sizing: content-box;
}

div#PLANNING_ID.worksiteWeekPlanningId {
    top: 14em;
}

div#PLANNING_ID .hoursDiv {
	border-top: none;
}

div#PLANNING_ID.singleHrDayAgenda {
    top: 6.5em;
}

div#PLANNING_ID.singleHrDayAgendaVertical {
    top: 6.5em;
    overflow-y: auto;
    overflow-x: hidden;
}

div#PLANNING_ID.weekAgenda {
    top: 5.7em;
}

div#PLANNING_ID.monthAgenda {
    top: 5.6em;
}

div#PLANNING_ID.vehicleDayAgenda {
    top: 7.5em;
}

div#PLANNING_ID.virtualAgenda {
    /*top: 1em;*/
}

/************************** hr info pop-up **********************/
div[aria-describedby="hrInfoDiv"] {
    border: 0 !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15),
        0 2px 10px 0 rgba(0, 0, 0, 0.18);
}

.hrInfoContainer {
    box-sizing: content-box !important;
    display: none;
    position: absolute;
    z-index: 1203;
    width: 620px;
    min-height: 150px;
    background-color: white; /*#004687;*/
    /*opacity:0.95;filter:alpha(opacity=95);-moz-opacity:0.95;*/
    border: 1px solid #dddddd;
    /*border-radius:3px;
	box-shadow:2px 2px #6E6E6E;   */
}

.hrInfoClose {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
}

.hrInfoCloseIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url(../images/close_white-16.png);
}

.hrInfoHeaderTable {
    height: 34px;
    /*background-color: #004687;*/
    /*background: url('../images/callcenter/appSheet/gradient2.png') top left repeat-x;*/
    background-color: #228ec3;
    border-bottom: 1px solid gray;
    border-radius: 0;
    padding-top: 4px;
    margin: 2px;
    cursor: move;
}

.hrInfoMove {
    float: left;
    width: 15px;
    height: 39px;
    cursor: move;
    margin-left: 2px;
}

.hrInfoHeaderText {
    float: left;
    margin-left: 8px;
    cursor: default;
}



#hrInfoHeaderIcons {
    position: absolute;
    right: 2em;
    top: 27%;
    width: 12em;
    margin-right: 1.6em;
}

.hrInfoHeaderIcon {
    float: right;
    width: 1.8em;
    height: 1.6em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.6em;
    cursor: default;
}

.hrInfoHeaderIcon:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.hrInfoHeaderIcon_dayPlanning {
    background-image: url('../images/calendar-day.svg');
}

.hrInfoHeaderIcon_weekPlanning {
    background-image: url('../images/calendar-week.svg');
}

.hrInfoHeaderIcon_monthPlanning {
    background-image: url('../images/calendar-month.svg');
}

.hrInfoHeaderIcon_map {
    background-image: url('../images/map.svg');
    background-size: 1.5em;
}

.hrInfoHeaderIcon_apptPanel {
    background-image: url('../images/basket-2.svg');
    background-size: 1.5em;
}

.hrInfoHeaderIcon_apptSelectionList {
    background-image: url('../images/apptSelectionList.svg');
}

.hrInfoTabsDiv {
    background-color: white;
    height: 25px;
    margin-top: 7px;
}

.hrInfoTabSpan {
    margin-bottom: 45px;
    margin-right: 1px;
    padding-left: 3px;
    height: 13px;
    border-bottom: 1px solid #dddddd;
    background-color: #ffffff;
}

.hrInfoTabHref {
    font-size: 10px;
    height: 100%;
    color: #004687;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
}

.hrInfoTabSpan a {
    color: #aaaaaa;
}

.hrInfoTabSpan_Selected {
    border-bottom: 3px solid #228ec3;
    font-weight: bold;
    color: #228ec3;
}

.hrInfoTabSpan_Selected a {
    color: #228ec3;
}

.hrInfoTabSpan_UnSelected {
    background-color: #f2f2f2;
}

.hrInfoContentDiv {
    margin: 0;
    border-radius: 0 0 8px 8px;
    /*border: 1px solid #dddddd;*/
}

.hrInfoTabContentDiv {
    display: none;
    background-color: white;
    min-height: 93px;
    color: #004687;
    border-radius: 0 0 8px 8px;
}

div.hrInfoTabContentDiv  th, div.hrInfoTabContentDiv td {
    text-align: left;
}

.hrInfoTabContentDiv_WorkWeek {
    display: none;
    background-color: white;
    min-height: 130px;
    color: #696969;
    border-radius: 0 0 8px 8px;
}

/**LEGEND***********************************************************/
.legendClose {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 16px;
    height: 16px;
    background-color: #f2f2f2;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #dddddd;
}

.legendCloseIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url(uitheme/images/ui-icons_3f94d3_256x240.png);
    background-position: -80px -128px;
}

.legendContent {
    width: 28rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.5rem;
}

.legendContent div.ui.grid {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}

div[aria-describedby="legendDiv"] {
    border: 0 !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15),
        0 2px 10px 0 rgba(0, 0, 0, 0.18);
}

/*********************************************************/
.hightlightAppt {
    border-color: red;
}

.hightlightAppt_priority {
    border-left-color: red;
    border-top-color: red;
    border-right-color: red;
}

.appPanelAppt {
    cursor: move;
}

.appPanelApptOnHover {
    border-color: black;
}

.appPanel-headerText {
    float: left;
    min-width: 100px;
}

#appPanelMessageDiv {
    display: none;
    position: absolute;
    z-index: 1210;
    width: 300px;
    font-size: xx-small;
    height: auto;
    font-size: 10px;
    color: #FFFFFF;
    background-color: var(--primary-color);
    border: 1px solid #cccccc;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 5px;
}

#appPanelMaximizedDiv {

    background-color: #FFFFFF;
    /*border: 1px solid #dddddd;*/

}

div[aria-describedby="appPanelMaximizedDiv"] {
	border: 0 !important;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15),
        0 2px 10px 0 rgba(0, 0, 0, 0.18);
}

div[aria-describedby="appPanelMaximizedDiv"] .ui-dialog-title {
    width: 50%;
}

#maxPanelTitleBarButtonsDiv {
    float: right;
    margin-right: 1em;
}

#appPanelMoveDiv {
    height: 24px;
    cursor: move;
    background-color: #228ec3;
    color: #ffffff;
    /*border-radius:3px;*/
    padding-left: 6px;
    padding-top: 6px;
    margin: 2px;
    font-size: 1.1em;
    /*border: 1px solid #228ec3;
    background: #228ec3 url(uitheme/images/ui-bg_highlight-soft_50_3f94d3_1x100.png) 50% 50% repeat-x;*/
}


#appPanelMinimiseDivSquare {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-color: #f2f2f2;
    border-radius: 3px;
    border: 1px solid #dddddd;
}

#appPanelMinimiseDiv {
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url(uitheme/images/ui-icons_3f94d3_256x240.png);
    background-position: -80px -128px;
}

#appPanelContentDiv {
    overflow: auto;
}

#appPanelTable td:nth-child(1) {
    width: 240px;
    
}

#appPanelTable .appPanel-trGroup td:nth-child(1) {
	border-bottom: 1px solid var(--borders-color);
}

#appPanelTable td:nth-child(2) {
    width: 50px;
}

#appPanelTable td:nth-child(3) {
    width: 20px;
}

.appPanel-tdGroupBy {
    width: 20px !important;
    /*background-color: #228ec3;*/
    border-bottom: 1px solid var(--borders-color);
    
}

.appPanel-trGroup {
    background-color: #ffffff;
}


.apptPanelTitleBarButton {
    cursor: default;
    margin-top:0.2em;
}

.apptPanelTitleBarButton:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(52%);
}

#appPanelAddToSelectionList {
	background-size: 1.8em;
}

#appPanelAddFromSelectionList {
    background-size: 1.3em;
}


.appPanelRemoveAppt {
	margin-top:0.3em;
}

.appPanelRemoveAppt:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(52%);
}

.appPanelGroupedDiv {
    cursor: move;
    background-color: #ffffff;
    height: 1.6em;
    color: var(--text-color);
    padding-left: 0.1em;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 220px;
}

.appPanelGroupBy {
    background-image: url("../images/groupBy_gray.svg");
    background-repeat: no-repeat;
    background-position: left;
    width: 1.6em;
    height: 1.6em;
    cursor: pointer;
    display: none;
}

.appPanelGroupBySelectedMenuItem {
    font-weight: bolder;
}

#multiHrDayFlashMessageDiv {
    display: none;
    position: absolute;
    z-index: 10000;
    width: 330px;
    height: 22px;
    background-color:orange;
    color: #ffffff;
    font-size: 13px;
    padding-top: 3px;
    border-radius: 1px;
    /*opacity:0.9;filter:alpha(opacity=9);
    -moz-opacity:0.85;*/
    /*border:1px solid #004687;*/
}

#multiHrDayFlashMessageDiv.mhrfmd-twolines {
    height: 40px;
}

#multiHrDayFlashMessageIcon {
    float:left;
    margin-left: 2px;
    /*background-image: url("../images/attention-white.svg");
    background-repeat: no-repeat;
    background-size: 18px;*/
    width: 18px;
    height: 18px;
}

#multiHrDayFlashMessageTxt {
    float: left;
    width: 310px;
    height: 20px;
    text-align: center;
}

#dragHour {
    display: none;
    position: absolute;
    z-index: 1202;
    width: 40px;
    height: 20px;
    background-color: #FFFFFF;
    color: #004687;
    opacity: 0.75;
    filter: alpha(opacity = 75);
    -moz-opacity: 0.75;
    border: 1px solid #004687;;
}

#dragExtrIcon {
    float: left;
    display: none;
    margin-top: 2px;
}

#dragTxt {
    float: left;
    margin-top: 3px;
    width: 40px;
    text-align: center;
}

.changeDurationDragHour {
    width: 160px;
    margin-top: 3px;
    text-align: center;
}

.planningMessageDialog {
    z-index: 2001 !important;
}

/* planning tooltip checkbox*/
.pt_check {
    height: 10px;
}

.dragContainmentDiv {
    opacity: 0;
    filter: alpha(opacity = 0);
    -moz-opacity: 0;
    z-index: 1;
}

/* */
.evTwoRibbons {
    top: 50%;
}

.evTwoRibbons_hrMonth {
    height: 154px;
}

.maday_ev_TwoRibbons {
    top: 43px;
}

.firstRibbonC {
    position: absolute;
    top: 1px;
    left: 0;
    height: 18px;
    border: 1px solid #eaeaea;
    right: 0;
    opacity: 0.7;
    filter: alpha(opacity = 70);
    -moz-opacity: 0.7;
}

/* first ribbon when only one ribbon is displayed*/
.firstRibbonORD {
    position: absolute;
    top: 1px;
    left: 0;
    height: 22px;
    border: 1px solid #eaeaea;
    right: 0;
    opacity: 0.7;
    filter: alpha(opacity = 70);
    -moz-opacity: 0.7;
}

.firstRibbonMultiWeeksJobsC {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1.692em;
    border-bottom: 1px solid #eaeaea;
    opacity: 0.85;
    filter: alpha(opacity = 85);
    -moz-opacity: 0.85;
}

/* first ribbon when only one ribbon is displayed*/
.firstRibbonMultiWeeksJobsORD {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    border-bottom: 1px solid #eaeaea;
    right: 0;
    opacity: 0.7;
    filter: alpha(opacity = 70);
    -moz-opacity: 0.7;
}

/* first ribbon resource additional condition*/
.firstRibbonRAC 
{
    position: absolute;
    left: 0;
    top: 0;
    /*width: 10px;*/
    right: 0px;
    height: 50%;
    background-color: red;
    opacity: 0.25;
}

.firstRibbonRAC span:before
{
    color: red;
    /*content: " \219D" !important;
    background-color: #ffffff;*/
}

/* vertical first ribbon only*/
.firstRibbonRAC_vertFRO
{
    position: absolute;
    left: 0;
    top: 0;
    /*width: 10px;*/
    right: 0px;
    height: 15px;
    background-color: red;
    opacity: 0.25;
}

.mhwcjFr {
    opacity: 0.85;
    border: 0;
    border-bottom: 1px solid #eaeaea;
    left: 1px;
    top: 0;
}

.mhwcjFrRest {
    border: 0;
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
}

.firstRibbonHrMonthC {
    position: relative;
    height: 20px;
    opacity: 0.7;
    filter: alpha(opacity = 70);
    -moz-opacity: 0.7;
}

.gssduty {
    position: absolute;
    /*height: 85%;*/
    border: 1px solid #999999;
    border-collapse: collapse;
    top: 1px;
    bottom: 1px;
    font-size: 12px;
    color: black;
    margin-left: 0;
    margin-right: 1px;
    text-align: center;
}

.gssduty.dtrepl 
{
    border : 2px dotted #000000;
}

.gssduty.legend {
    position: relative;
    border: 1px solid #999999;
    border-collapse: collapse;
    top: 0%;
    /* relative to agendaDayLine Height , overriden by style in agendaColumn*/
    bottom: 0;
    height: 15px;
    left: 0%;
    /* relative to table auto size, overriden by style in agendaLine*/
    width: 48px;
    padding: 0;
    font-size: xx-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
    cursor: default;

    opacity: 0.85;
    filter: alpha(opacity = 70);
    -moz-opacity: 0.7;
}

.period-header__unit div[id^='WH#'] {
    height: 1.5em;
}

#dragInfo {
    float: right;
    height: 100%;
    background-color: #228ec3;
    color: white;
    width: 50px;
    vertical-align: middle;
    font-size: 12px;
}

#dragInfoExtrIcon {
    float: left;
    display: none;
    margin-top: 2px;
    width: 15px;
}

#dragInfoExtrIcon2 {
    float: left;
    display: none;
    margin-top: 2px;
    width: 15px;
}

#dragInfoTxt {
    float: left;
    margin-top: 3px;
    width: 50px;
    text-align: center;
}

#eventsResizeDragInfoDiv {
    display:none;
    position: absolute; 
    height: 20px;
    background-color: #228ec3;
    color: white;
    width: 130px;
    vertical-align: center;
    font-size: 13px;
    border-radius: 1px;
    z-index: 1202;
    text-align: center;
    padding-top: 1px;
}

.attendanceManagerDropTargetDiv {
    position: absolute;
    display: none;
    background-color: #228ec3;
}

.attendanceManagerDropTargetDiv.horizontal {
    height: 3px;
}

.attendanceManagerDropTargetDiv.vertical {
    width: 3px;
}

.eventsResizeDragDiv {
    position: absolute;
    background: url('../images/general/resize.png') left no-repeat;
    background-color: #228ec3;
    width: 6px;
    height: 22px;
    cursor: w-resize;
    border: 1px solid #228ec3;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 1201;
}

.eventsResizeDragDivVert {
    position: absolute;
    background: url('../images/general/resize.png') center no-repeat;
    background-color: #228ec3;
    cursor: s-resize;
    z-index: 1201;
    height: 8px;
    border: 1px solid #228ec3;
}

.eventResizeOnDragging {
    z-index: 1202;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.eventResizeOnDraggingVert {
    z-index: 1202;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.eventsDragResizeHighlightDiv {
    position: absolute;
    display: none;
    background-color: #228ec3;
    z-index: 1202;
}

.eventsDragResizeHighlightDiv.horizontal {
    height: 2px;
}

.eventsDragResizeHighlightDiv.vertical {
    width: 2px;
}

.otgsBubble {
    position: relative;
    padding: 2px;
    background: #228ec3;
    border-radius: 5px;
    border: #DDDDDD solid 1px;
    opacity: 0.95;
    z-index: 1201;
}

.otgsBubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 4px 6px 0;
    border-color: #228ec3 transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -4px;
    left: 45%;
}

.otgsBubble:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 4px 6px 0;
    border-color: #DDDDDD transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -5px;
    left: 45%;
}

.planningScrollDiv {
    position: absolute;
    left: 0;
    right: 0;
    top: 3.846em;
    bottom: 0;
    overflow-y: scroll;
}

.pSDivZero {
    top: 0;
}

.pSDivMiddle {
    top: 1.923em;
}

.planningScrollDivVert {
    position: absolute;
    left: 36px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-x: scroll;
}

.pSDivZeroVert {
    left: 0;
}

.pSDivMiddleVert {
    left: 72px;
}

.pSDivWeek {
    top: 3em;
	top: 39px;
}

.pSDivMonth {
    top: 1.8em;
}

.pSDivTwoTimeZones {
    top: 50px;
}

.jobLabel {
    color: #ffffff;
    text-align: center;
    margin-top: 5px;
}

.unavLabel {
    color: #000000;
    text-align: center;
    margin-top: 4px;
}

.exceptLocationLabel {
    color: #ffffff;
    text-align: right;
    margin-top: 5px;
    margin-right: 20px;
}

/* night exceptional locations*/
div[class~="gssevt"][class~="rest"][class~="except"][id*='#N#'] div[class~="exceptLocationLabel"]
    {
    text-align: left;
    margin-left: 20px;
    margin-right: 0;
}

/* night exceptional location: hr week planning, vertical plannings*/
.weekAgendaDayColumn-Events div[class~="gssevt"][class~="rest"][class~="except"] div[class~="exceptLocationLabel"]
    {
    text-align: center;
    margin-right: 0;
    margin-top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 18px;
}

.weekAgendaDayColumn-Events div[class~="gssevt"][class~="rest"][class~="except"][id*='#N#'] div[class~="exceptLocationLabel"]
    {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    position: relative;
    bottom: auto;
}

.sector {
    background-color: green;
}

.customerColor {
    background-color: green;
}

.stdJ {
    opacity: 0.3;
    border: 0;
}

.rmkJ {
    opacity: 0.2;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(#ffffff 100%, transparent 0),
        linear-gradient(#ffffff 100%, transparent 0);
    background-size: 50% 24px, 50% 24px;
    background-position: 0 0, 100%  0;
}

.rmkJVert {
    opacity: 0.2;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(#ffffff 100%, transparent 0),
        linear-gradient(#ffffff 100%, transparent 0);
    background-size: 100% 50%, 100% 50%;
    background-position: 0 0, 100%  0;
}

/* vertical centering of the text of duty in hr week planning */
.wadc .gssduty {
    padding-top: 5px;
}

div[class~="gssevt"][class~="una"][class~="unavSeeBck"] {
    line-height: 8px;
}

.appliedWorkedDay {
    text-align: center;
    background-color: #cccccc;
    line-height: 16px;
    color: black;
    overflow: hidden;
}

.appliedWorkedDayL {
    text-align: center;
    background-color: #cccccc;
    line-height: 24px;
    color: black;
    overflow: hidden;
}

.hrInfoContainerLarge {
    width: 790px;
    min-height: 200px;
    font-size: 13px;
}

.hrInfoContainerLarge .hrInfoHeaderTable {
    height: 36px;
}

.hrInfoContainerLarge table {
    font-size: 13px;
}

.hrInfoContainerLarge .hrInfoTabHref {
    font-size: 13px;
}

.hrInfoContainerLarge .hrInfoHeaderHrName {
    font-size: 13px;
}

.hrInfoContainerLarge .hrInfoHeaderHrBadge {
    font-size: 12px;
}

.hrInfoContainerLarge .hrInfoHeaderIcon {
    height: 32px;
    width: 32px;
    /*margin-right: 3px;
	 background-size: 32px 32px;*/
}


.objectivProgressBarTable {
    border: 1px solid #999999;
    border-collapse: collapse;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    /*background-position: 80% 0 , 50% 0;*/
    padding: 4px;
}

.objectivProgressBarTable th {
    border: 1px solid #999999;
    background-color: #228ec3;
    color: #ffffff;
    text-align: center;
}

.objectivProgressBarTable td {
    border: 1px solid #999999;
    cursor: default;
    overflow-x: hidden;
    overflow-y: hidden;
}

#planningDateLabelDiv {
    font-weight: normal;
    font-size: 1em;
    color: #888888;
}

#planningDateLabelDiv:hover {
    color: #228ec3;
}

#planningDatePickerDiv {
    display: none;
    position: absolute;
    z-index: 1202;
    box-sizing: content-box;
}

.ui-datepicker-prev span {
    background-position: 0 0;
	background-size: contain;
}

#planningDatePickerDiv .ui-datepicker-next span {
    background-position: 0 0;
	background-size: contain;
}

#planningDatePickerDiv td.calendarHighlightedDay a {
    background: #228ec3 !important;
    color: white !important;
}

#planningDatePickerDiv td.calendarHighlightedCurrentDay a {
    background: #aaaaaa !important;
}

#planningDatePickerDiv .ui-datepicker {
    width: 194px;
}

#roundedSelect_CONTENT {
    min-width: 4.5em;
    width: 12em;
}



#roundedSelect_PERIOD {
    min-width: 4.5em;
    width: 7.5em;
}


#roundedSelect_ENTITYSET {
    min-width: 4.5em;
    width: 12.5em;
}



#roundedSelect_ENTITY {
    min-width: 4.5em;
    width: 20em;
}

#roundedSelect_ENTITY .text {
    word-wrap: normal;
    white-space: nowrap;
}

#bottomDiv div[id ^= 'roundedSelect_'] .menu {
	max-height: 18rem;
}

.agenda_nav_buttonbar_title {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    float: left;
    width: 2.5em;
    height: 2.5em;
    background: url("../images/planning/agenda.svg") no-repeat center;
    background-size: 1.5em;
}

.planningturnover {
    font-size: 12px;
    float: left;
    padding-top: 8px;
    padding-left: 5px;
}

.eventViewListLegend {
    left: 0;
    width: 18px;
    top: 0;
    height: 11px;
    cursor: default;
}

.portalplanningbutton-cal-previous {
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-image: url("../images/chevron-left.svg");
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 16px
}

.portalplanningbutton-cal-previous:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.portalplanningbutton-cal-next {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-image: url("../images/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 16px
}

.portalplanningbutton-cal-next:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

#callcenterPlanningUserListsDialog .hruled-multihrperimselect-box {
    margin-top: 20px;
}

#callcenterPlanningUserListsDialog .hruled-formfieldval-box {
    margin-top: 12px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box
    {
    margin: 10px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .section>ul
    {
    margin: 0;
    padding: 0;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box[data-fieldname="humanresources"] .hruled-formfieldval-box>div
    {
    clear: both;
    display: inline-block;
    width: 196px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box[data-fieldname="humanresources"] .hruled-formfieldval-box .hruled-filterhumanresources-box
    {
    width: 250px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box[data-fieldname="humanresources"] .hruled-formfieldval-box .hruled-humanresources-box
    {
    width: 350px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box[data-fieldname="humanresources"] .hruled-formfieldval-box .hruled-humanresources-box
    {
    margin-left: 30px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox
    {
    background-color: white;
    border: 1px solid #ccc;
    height: 284px;
    overflow: auto;
    overflow-x: hidden;
    padding: 5px 5px 5px 5px;
    width: inherit;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section
    {
    display: block;
    margin-bottom: 10px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .sectionTitle
    {
    color: #228ec3;
    font-size: 13px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .sectionTitle .sectionControl
    {
    float: right;
}



#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .sectionTitle .sectionControl .clearButton
    {
    background-image: url("../images/select-none-grey_24.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    height: 13px;
    width: 13px;
    font-size: 1.2em;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .sectionTitle .sectionControl .clearButton:hover
    {
    background-image: url("../images/select-none-blue_24.png");
    cursor: pointer;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section li
    {
    list-style-type: none;
    min-height: 13px;
    padding: 2px 5px 4px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section li:hover
    {
    background-color: #f2f2f2;
    cursor: pointer;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section li .itemToggle
    {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    margin-right: 4px;
    height: 13px;
    width: 13px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .suggestions li[data-selected="false"]:hover .itemToggle
    {
    background-image: url("../images/validate-lightgrey_24.png");
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .suggestions li[data-selected="true"] .itemToggle
    {
    background-image: url("../images/validate-grey_24.png");
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section .suggestions li[data-selected="true"]:hover .itemToggle
    {
    background-image: url("../images/delete-lightgrey_24.png");
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox .section li .itemCategory
    {
    color: #bababa;
    display: inline-block;
    margin-right: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    width: 100px;
}

#callcenterPlanningUserListsDialog .hruserlistedit-box .hruled-form-box .hruled-formfield-box .hruled-formfieldval-box .multicheckbox.filterhumanresources
    {
    border-top: 1px solid #eee;
    display: inline-block;
    height: 252px;
}

.firstRibbonC .dutyLvlTxt {
    position: absolute;
    left: 48%;
    top: 0;
    width: 16px;
    height: 14px;
    opacity: 0.8;
    background-color: white;
    font-weight: 1000;
    margin-bottom: 0;
    line-height: 15px;
}

.firstRibbonORD .dutyLvlTxt {
    position: absolute;
    left: 48%;
    top: 0;
    width: 16px;
    height: 18px;
    opacity: 0.8;
    background-color: white;
    font-weight: 1000;
    margin-bottom: 0;
    line-height: 19px;
} 
 
.firstRibbonC .dtrepl .dutyLvlTxt {
    height: 12px;
    line-height: 13px;
} 
 
.firstRibbonORD .dtrepl .dutyLvlTxt {
    height: 16px;
    line-height: 17px;
} 
 
.dutyLvlTxt-multiWeeks {
    font-weight: 1000;
    line-height: 15px;
}

#pmbFrozeDiv {
	/*margin-left: 5px;*/
}

#pmbFrozeDiv[data-frozen="false"] i.icon[data-icon='pin'] {
    display:none;
}
#pmbFrozeDiv[data-frozen="false"] i.icon[data-icon='pin_off_outline'] {
    display:block;
}

#pmbFrozeDiv[data-frozen="true"] i.icon[data-icon='pin'] {
    display:block;
}
#pmbFrozeDiv[data-frozen="true"] i.icon[data-icon='pin_off_outline'] {
    display:none;
}

#pmb-daysvisibilitymode[data-daysvisibilitymode="NORMAL"] {
    background-color: initial;
}

#pmb-daysvisibilitymode[data-daysvisibilitymode="ALTERNATIVE"] {
    background-color: #eeeeee;
}

#pmb-avatar {
    display: none;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat; 
    background-image: url(../pages/images/user-square-lightGray.svg);
    background-size: 35px;
    border-radius: 18px;
    background-position: center;
    cursor: pointer;
}

.pmba {
	background-size: cover !important;
}

/* icon besides the hr name that opens the menu */
.res-name__menu {
    background-image: url("../images/dots-vertical.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.384em;
    position: absolute;
    top: 0.6em;
    right: 0.384em;
    width: 1.384em;
    height: 1.6em;
    cursor: pointer;
}

.res-name__menu:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.res-name__menu-vert {
    background-image: url("../images/dots-vertical.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    position: absolute;
    right: 2px;
    top: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.res-name__menu-vert:hover {
    filter: sepia(100%) saturate(315%) hue-rotate(155deg) brightness(82%);
}

.backForwardMenu {
	position: absolute;
	right: 3.7em;
	/*margin-right: 5em !important;*/
	/*border-right: 2px solid #cccccc;*/
	margin-bottom: 5px !important;
}

.planningButtonsMenuDivider {
	border-left: 2px solid #cccccc !important;
    width: 5px;
    padding: 0 !important;
    height: 20px;
}

#pmbExpandDiv {
    padding-right: 0;
}

#pmbExpandDiv[data-expand="false"] i.icon[data-icon='menu_left'] {
    display: none;
}
#pmbExpandDiv[data-expand="false"] i.icon[data-icon='menu_right'] {
    display: block;
}

#pmbExpandDiv[data-expand="true"] i.icon[data-icon='menu_left'] {
    display: block;
}
#pmbExpandDiv[data-expand="true"] i.icon[data-icon='menu_right'] {
    display: none;
}

.ahm-a1 {
    width: 20px;
    height: 6.5em !important;
    background-color: orange;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: initial;
    position: relative;
    left: initial;
    top: initial;
    border: 0;
    border-collapse: initial;
    border-radius: 0 !important;
    opacity: 1;
}

.teamHeaderInfoIconDiv
{
    background-image: url("../images/aide.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    float: left;
    width: 24px;
    height: 20px;
    margin-left: 3px;
    /*position:absolute;
    left:90%;
    right: 10px;
    width: 16px;
    height: 16px;
    cursor:pointer;
    top:3px;*/
}

/* event in larger height planning - line for the appointment label in horizontal plannings*/
.evlhp-n {
}

/* event in larger height planning - lines for the appoitment labels in detailled plannings (larger height */
.evlhp-d {
    display: none;
}


/* resource name - crew leader*/
.rn-cl {
    color: orange;
    font-size: 12px;
    font-weight: bolder;
}

/* resource name - crew leader*/
.rn-cm {
    color: green;
    font-size: 12px;
    font-weight: bolder;
}

.crewVisEl {
    position: absolute;
    width: 15%;
    height: 43px;
    background-color: orange;
    z-index: 12000;
    opacity: 0.1;
}

#apptPanelApptDragDiv {
	height: 18px;
}

.apptGroupedDraggable {
	background-color: orange;
}

.basket__counter {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

.rn-ac:before {
  color: red;
  content: " \219D" !important;
}

.rn-tr:before {
  color: red;
  content: " \25D5" !important;
}

.activitiesListDiv {
	overflow-y: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 70px;
}

div#PLANNING_ID.singleHrDayAgendaVertical .activitiesListDiv {
    position: relative;
    top: auto;
}