:root {
    --color-black: rgb(0 0 0);
    --color-black-active: rgb(51 51 51);

    --color-ultramarine: rgb(30 38 64);
    --color-ultramarine-active: rgb(46 58 96);

    --color-lavender: rgb(164 170 239);
    --color-lavender-active: rgb(145 152 233);

    --color-verdigris: rgb(161 179 173);
    --color-verdigris-active: rgb(146 165 159);

    --color-sand: rgb(212 203 188);
    --color-sand-active: rgb(201 191 175);

    --color-lightSand: rgb(244 238 229);
    --color-lightSand-active: rgb(223 214 194);

    --color-saffron: rgb(255 191 0);
    --color-saffron-active: rgb(230 172 0);

    --color-sienna: rgb(148 76 52);
    --color-sienna-active: rgb(166 85 58);

    --color-wave: rgb(0 128 128);
    --color-wave-active: rgb(0 112 112);

    --color-marygold: rgb(255 149 0);
    --color-marygold-active: rgb(255 149 0);

    --color-white: rgb(255 255 255);
    --color-white-active: rgb(204 204 204);

    --color-darkGrey: rgb(51 51 51);
    --color-middleGrey: rgb(102 102 102);
    --color-grey: rgb(153 153 153);
    --color-lightGrey: rgb(204 204 204);
    --color-pearl: rgb(247 247 247);

    --color-green: rgb(8 148 53);
    --color-green-active: rgb(5 97 35);

    --color-red: rgb(194 54 40);
    --color-red-active: rgb(148 38 30);

    --color-orange: rgb(199 83 0);
    --color-orange-active: rgb(148 62 0);

    --transition-fn-boop: cubic-bezier(.47, 1.64, .41, .8);
    --transition-duration-boop: .4s;
}

.black, .blackActivable {
    background: var(--color-black);
    color: var(--color-pearl);
}
.blackActivable:hover {
    background: var(--color-black-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.ultramarine, .ultramarineActivable {
    background: var(--color-ultramarine);
    color: var(--color-pearl);
}
.ultramarineActivable:hover {
    background: var(--color-ultramarine-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.lavender, .lavenderActivable {
    background: var(--color-lavender);
    color: var(--color-darkGrey);
}
.lavenderActivable:hover {
    background: var(--color-lavender-active);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.verdigris, .verdigrisActivable {
    background: var(--color-verdigris);
    color: var(--color-darkGrey);
}
.verdigrisActivable:hover {
    background: var(--color-verdigris-active);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.sand, .sandActivable {
    background: var(--color-sand);
    color: var(--color-darkGrey);
}
.sandActivable:hover {
    background: var(--color-sand-active);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.lightSand, .lightSandActivable {
    background: var(--color-lightSand);
    color: var(--color-darkGrey);
}
.lightSandActivable:hover {
    background: var(--color-lightSand-active);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.saffron, .saffronActivable {
    background: var(--color-saffron);
    color: var(--color-pearl);
}
.saffronActivable:hover {
    background: var(--color-saffron-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.sienna, .siennaActivable {
    background: var(--color-sienna);
    color: var(--color-pearl);
}
.siennaActivable:hover {
    background: var(--color-sienna-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.wave, .waveActivable {
    background: var(--color-wave);
    color: var(--color-pearl);
}
.waveActivable:hover {
    background: var(--color-wave-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.marygold, .marygoldActivable {
    background: var(--color-marygold);
    color: var(--color-pearl);
}
.marygoldActivable:hover {
    background: var(--color-marygold-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.white, .whiteActivable {
    background: var(--color-white);
    color: var(--color-darkGrey);
}
.whiteActivable:hover {
    background: var(--color-white-active);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.darkGrey, .darkGreyActivable {
    background: var(--color-darkGrey);
    color: var(--color-pearl);
}
.darkGreyActivable:hover {
    background: var(--color-darkGrey);
    color: var(--color-pearl);
    cursor: pointer;
}

.middleGrey, .middleGreyActivable {
    background: var(--color-middleGrey);
    color: var(--color-pearl);
}
.middleGreyActivable:hover {
    background: var(--color-middleGrey);
    color: var(--color-pearl);
    cursor: pointer;
}

.grey, .greyActivable {
    background: var(--color-grey);
    color: var(--color-darkGrey);
}
.greyActivable:hover {
    background: var(--color-grey);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.lightGrey, .lightGreyActivable {
    background: var(--color-pearl);
    color: var(--color-darkGrey);
}
.lightGreyActivable:hover {
    background: var(--color-pearl);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.pearl, .pearlActivable {
    background: var(--color-pearl);
    color: var(--color-darkGrey);
}
.pearlActivable:hover {
    background: var(--color-pearl);
    color: var(--color-darkGrey);
    cursor: pointer;
}

.green, .greenActivable {
    background: var(--color-green);
    color: var(--color-pearl);
}
.greenActivable:hover {
    background: var(--color-green-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.red, .redActivable {
    background: var(--color-red);
    color: var(--color-pearl);
}
.redActivable:hover {
    background: var(--color-red-active);
    color: var(--color-pearl);
    cursor: pointer;
}

.orange, .orangeActivable {
    background: var(--color-orange);
    color: var(--color-pearl);
}
.orangeActivable:hover {
    background: var(--color-orange-active);
    color: var(--color-pearl);
    cursor: pointer;
}

body {
    background: #f7fbfd;
    font-size:0.9em;
    /*overflow-x: hidden;*/
}

h1 {
    font-weight:bold;
    text-align:center;
}
.h1, h1 {
    font-size: 2rem;
}

p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}


i,
span {
    display: inline-block;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

.hiddenRow {
    display:none;
}

.hidden {
    display:none !important;
}

.reduced {
    font-size: 0.7rem;
    font-style: italic;
}

thead tr:nth-child(1) th{
    position: sticky;
    top: 0;
    z-index: 10;
}

.arrowTop {
  border-color : #f7fbfd;
  border-style : solid;
  height : 0;
  overflow : hidden;
  display : inline-block;
  
  clear : both;
  border-left-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 15px;
  border-bottom-color : #c4e8f5;

  position:relative;
  top:4px;
  left:0px;
}

.arrowRight {
  border-color : #f7fbfd;
  border-style : solid;
  height : 0;
  overflow : hidden;
  display : inline-block;
  
  clear : both;
  border-top-width : 25px;
  border-bottom-width : 25px;
  border-left-width : 33px;
  border-left-color : #c4e8f5;

  position:absolute;
}

.arrowLeft {
  border-color : #f7fbfd;
  border-style : solid;
  height : 0;
  overflow : hidden;
  display : inline-block;
  
  clear : both;
  border-top-width : 25px;
  border-bottom-width : 25px;
  border-right-width : 33px;
  border-right-color : #c4e8f5;

  position:absolute;
}
.circle {
    border: 1px solid black;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    text-align: center;vertical-align: center;
}

.col-no-gutters {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

.oddTableLine {
    background-color:#f0f0f0;
}

/* ---------------------------------------------------
    Planning
----------------------------------------------------- */

.dayIcon {
    width:30px;
    float:left;
}

.dayBadge {
    width:70px;
    float:right;
}

.planningTitle {
    height:fit-content;
    min-height:60px;
    font-size:1.6rem;
}


.planningTitleBis {
    height:fit-content;
    min-height:30px;
    font-size:1.0rem;
}

.shift {
    margin-right:3px;
}


.cm-caret {
    position:relative;
    bottom:-20px;
    right:-3px;
    transform: rotate(315deg);
}


.timeSelectorPanel {
    position:absolute;
    font-size:0.75rem;
    z-index:50;
    width:100px;
}

.timeSelector {
    background-color: white;
    overflow-y:auto;
    max-height:250px;
    box-shadow: 8px 8px 12px #aaa;
}

.shiftSelectorPanel {
    position:absolute;
    font-size:0.75rem;
    z-index:50;
    width:250px;
}

.shiftSelector {
    background-color: white;
    overflow-y:scroll;
    max-height:150px;
    box-shadow: 8px 8px 12px #aaa;
}

.holidayIcon svg.fa-comment-dots,
.holidayIcon svg.fa-comment  {
    width: 1.2em;
    height: 1.2em;
}

/* ---------------------------------------------------
    COLORS
----------------------------------------------------- */
.cm-color-nav {
    background-color:#00558a;
    color: white;
}

.cm-color-tb-title {
    background-color:#5ea3c0 !important;
    color: white;
}

.cm-color-tb-subtitle {
    background-color:#c4e8f5 !important;
    color: #504747;
}

.cm-color-icon {
    color:#5ea3c0;
}

.cm-color-back {
    background-color:#e3e3e3;
    color: white;
}

.cm-color-title {
    color:#504747;
}

.cm-color-nav-active {
    background-color:#591b56;
    color: white;
}

.cm-color-disabled {
    color:#909090;
}

.cm-color-alert {
    color:red;
}

.cm-color-highlight {
    background-color:#f7ca18;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
    min-width: 270px;
    max-width: 270px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

#sidebar.active {
    min-width: 70px;
    max-width: 70px;
    text-align: center;
}

#sidebar > ul {
    position:relative;
    top:0;
    width:270px;
}

#sidebar > div {
    position:relative;
}

#sidebar .sidebar-header {
    padding-top: 10px;
    padding-left: 60px;
    padding-right: 20px;
    padding-bottom: 0;
}
#sidebar.active .sidebar-header {
    padding: 0px;
    padding-top: 10px;
}

#sidebar.active .sidebar-header h3 {
    display: none;
}

#sidebar .sidebar-header p {
    display: none;
    font-size: 1.8rem;
}
#sidebar.active .sidebar-header p {
    display: block;
}

#sidebar ul li a {
    padding: 6px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    text-align: left;
}
#sidebar ul li a:hover {
    background-color: #591b56;
}
#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85rem;
}

#sidebar ul li a > :first-child {
    width:20px;
    margin-right: 10px;
}
#sidebar.active ul li a > :first-child {
    margin-right: 0;
    display: block;
    font-size: 1.8rem;
    margin-bottom: 5px;
    background-color: #591b56;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #591b56;
}

#sidebar.active ul li a span {
    display: none;
}

#sidebar span.me {
    display:none;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    align-items: stretch;
    height: 100vh;
}

#page {
    width: 100%;
    min-height: 100vh;
    overflow: auto;
    height: 100vh;
}

#header {
    padding-top: 10px;
    padding-bottom: 30px;
    position:fixed;
    width: 100%;
    max-width:100%;
    z-index:20;
    background-image:linear-gradient(to top, rgba(247, 251, 253, 0.2), rgba(247, 251, 253, 0.9), rgba(247, 251, 253, 1), rgba(247, 251, 253, 1), rgba(247, 251, 253, 1));
}

.login-form #header {
    position:inherit;
    background: var(--sk_nav);
    padding: 0;
}

.login-form {
    background-color: var(--sk_nav);
    color: white;
}
.login-form .logoHeader {
    width: 90px;
}
.login-form button {
    background-color: white;
    color: var(--sk_nav);
}

#footer {
    height:50px;
    width: 100%;
    position:fixed;
    bottom:0px;
    z-index:20;
    background-image:linear-gradient(rgba(247, 251, 253, 0.2), rgba(247, 251, 253, 1));
}

#content {
    margin-top:80px;
    padding: 20px;
    width: 100%;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 992px) {
    .desktop-only {
        display:none !important;
    }

    #sidebar {
        min-width: 70px;
        max-width: 70px;
        text-align: center;
    }

    #sidebar > ul {
        width:70px;
    }

    #sidebar .sidebar-header {
        padding: 0px;
        padding-top: 10px;
    }
    #sidebar .sidebar-header h3 {
        display: none;
    }
    #sidebar .sidebar-header p {
        display: block;
        padding-left: 15px;
    }

    #sidebar ul li a {
        width:100%;
        padding: 20px 10px;
        text-align: center;
    }
    #sidebar ul li a > :last-child {
        display: none;
    }
    #sidebar ul li a > :first-child {
        width:100%;
        margin-right: 0;
        display: block;
        font-size: 1.3rem;
        margin-bottom: 5px;
        text-align:center;
    }
}

/* ---------------------------------------------------
    HOLIDAY CLASS
----------------------------------------------------- */

.holidayIcon {
    cursor:pointer;
}


/* ---------------------------------------------------
    WEEK 40H CLASS
----------------------------------------------------- */

.week40hHistory {
    width:30px;
    font-size:1.8em;
}

.week-separator {
    background-color: white;
  }

.constraint40h {
    text-decoration:none;
    position:relative;
    top:-2px;
    border:solid 1px rgba(60,60,60,0.5);
    border-radius: 8px;
    padding:1px 3px 3px 3px;
    font-size:0.7em;
    font-style: italic;
    color:rgba(60,60,60,1);
    text-shadow: 4px 4px 6px rgba(0,0,0,0.8) ;
    transform: rotateZ(19deg) rotateX(40deg) rotateY(5deg);
    background: linear-gradient(90deg, rgba(247,202,24,0.7) 0%, rgba(247,202,24,1) 50%, rgba(247,202,24,0.7) 100%); 
}

.constraint40h.textA:before {
    content: "A";
}

.constraint40h.text40h:before {
    content: "40";
}

.constraint40hAlert {
    position:relative;
    text-decoration:none;
    top:-2px;
    border:solid 1px rgba(60,60,60,0.5);
    border-radius: 8px;
    padding:1px 3px 3px 3px;
    font-size:0.7em;
    font-style: italic;
    color:rgba(60,60,60,1);
    text-shadow: 4px 4px 6px rgba(0,0,0,0.8) ;
    transform: rotateZ(19deg) rotateX(40deg) rotateY(5deg);
    background: linear-gradient(90deg, rgba(255,0,0,0.7) 0%, rgba(255,0,0,1) 50%, rgba(255,0,0,0.7) 100%); 
}

.cm-icon {
    text-align:center;
    width:30px;
    height:30px;
    padding:6px 3px 3px 3px;
    border:solid 1px rgba(100,100,100,0.5);
    border-radius: 8px;
    color:#00558a;
    text-shadow: 4px 4px 6px rgba(0,0,0,0.8) ;
    background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 100%); 

}

#scrollable {
    /*overflow-x:auto;*/
    max-width:90%;
}


/* ---------------------------------------------------
    WINGDAY CLASS
----------------------------------------------------- */

.wingDayHistory {
    position:relative;
    top:15px;
    left:20px;
    width:50px;
    z-index:30;
    margin-right:-50px;
    float:left;
    font-size:1.8em;
}

.wingday {
    cursor:pointer;
}

.wingday .fas {
    cursor:pointer;
}

#teamPeopleTable {
     border: 2px solid #c4e8f5;
     position:fixed;
     width:300px;
     top: 20vh;
     box-shadow: 8px 8px 12px #aaa;
}

#teamPeopleTable thead th {
    width: 300px;
}
#teamPeopleTable tbody {
    width: 300px;
    max-height:60vh !important;
    height:60vh !important;
    overflow-y:scroll;
    overflow-x:hidden;
    display: block;
}

#teamPeopleTable tbody tr span {
    width: 240px;
}

.tableFixHead          {
    overflow-y: auto;
    height: calc(100vh - 120px);
}
.tableFixHead thead th {
    position: sticky;  top: 0;
}

.tableFixHead td:first-child
{
    position:sticky;
    left:0px;
    /*background-color:#5ea3c0;*/
    background-color:white;
}

    /* ---------------------------------------------------
        PARTIAL ACTIVITY
    ----------------------------------------------------- */
.actionIcon {
    cursor: pointer;
}

.partialActivity.row {
    height: 40px;
    margin-top: 15px;
}

.partialActiviy.header {
    height: 40px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
    font-size: 1.2em;
}

.showToggler {
    color: grey !important;
    text-decoration: underline !important;
}

/* ---------------------------------------------------
    MESSAGE CLASS
----------------------------------------------------- */
.message {
    position:fixed;
    top:0px;
    right:320px;
    z-index:40;
    border: solid 1px #aaaaaa;
    border-radius: 5px;
    font-weight: bold;  
    box-shadow: 2px 2px 0px #999999;
}

.message.error {
    background-color: red;
    color: yellow;
}

.message.info {
    background-color: #00558a;
    color: #fff;
}

/* ---------------------------------------------------
    MESSAGE CLASS
----------------------------------------------------- */
.user {
    position:fixed;
    top:0px;
    right:0px;
    width: 300px;
    z-index:30;
    font-weight: bold; 
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px; 
    text-align:center;
}

.absenceLine:last-child
{
    border-top: 0.1px solid grey;
}

#eventTable input[type="checkbox" i] {
    height: 17px;
}

#eventTable tr th,
#eventTable tr td {
    vertical-align: middle;
}

#eventTable .formation {
    text-orientation: mixed;
    transform: rotate(-90deg);
    height: 80px;
    width: 35px;
}
#eventTable .formation select {
    width: 80px;
    top: 20px;
    left: -20px;
    position: relative;
    font-size: 12px;
}

#formationTable .formation label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg) translateY(-25px);
}
.planningBigIcon {
    font-size: 40px;
}

#formationTable td {
    background-color: #EEE;
}

#formationTable td.name,
#formationTable td.available,
#formationTable td.inFormation {
    background-color: white;
}

#formationTable td.outOfContract {
    background: linear-gradient(0deg, lightpink 10%, #fff 10%, #fff 20%, lightpink 20%, 
                                        lightpink 30%, #fff 30%, #fff 40%, lightpink 40%,                                
                                        lightpink 50%, #fff 50%, #fff 60%, lightpink 60%,                                
                                        lightpink 70%, #fff 70%, #fff 80%, lightpink 80%,                                
                                        lightpink 90%, #fff 90%);
    background-size: 100% 100%;
    background-position: 0 0;
    background-color: lightpink;
}
#formationTable .noSelect .formationSelection,
#formationTable .filteredLine {
    display: none;
}
#formationTable .daySelected {
    background-color: white;
    color: #5ea3c0;
}
#formationTable .formation {
    position: relative;
}
#formationTable th .goSubmit,
#formationTable th .dayOfWeek {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: normal;
}

#formationTable .maskForSelection {
    display: none;
}
#formationTable th,
#formationTable td {
    vertical-align: middle;
    width: 33px;
    min-width: 33px;
}
#formationTable th.firstcol {
    vertical-align: bottom;
}
#formationTable th input {
    position: absolute;
}
#formationTable th label {
    margin: 4px 0 15px;
}

#formationTable th.firstcol,
#formationTable td.firstcol {
    width: 200px;
    min-width: 200px;
    text-align: right;
}

#formationTable .formationTableLeftCellHeader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
}
#formationTable #showAll {
    transform: translateY(-5px);
}

#formationTable .daySelected .hideDate {
    display: none;
}

#formationTable .hideDate {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

#formationTable th label {
    cursor: pointer;
}
#formationTable.table {
    width: auto;
}

#availabilityContent.editMode {
    display: flex;
    flex-direction: column-reverse;
}

.formationPreviouslySelected {
    display: none;
}
.noSelect .formationPreviouslySelected {
    display: inline-block;
}

.bootstrap-select .dropdown-toggle {
    height: 40px;
    background: white;
    border: solid 1px lightgray;
}
#availabilityContent .bootstrap-select.dropdown.show-tick {
    width: 100%;
}
.dateRange #lookForDate button#lookForDateButton {
    display: none;
}

.blur {
    filter: blur(1.5rem);
}

#partialActivityUploadDownload {
    display: flex;
}

#partialActivityUploadDownload svg.fa-2x {
    font-size: 1em;
}

#partialActivityUploadDownload .row {
    margin-right: 0;
    margin-left: 0;
}
#partialActivityUploadDownload .row.justify-content-center strong {
    display: none;
}

#partialActivityUploadDownload .uploadComponent {
    outline: none;
    font-size: 1em;
    background-color: inherit;
    position: relative;
    padding: 0;
    width: 100%;
}

#partialActivityUploadDownload label {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* ---------------------------------------------------
    PLANNING
----------------------------------------------------- */

.line_group {
    /*height: 50px;*/
}

.line-action {
    /*display: none;*/
    height: 15px;
}

/*Ticket*/

.blinking{
    animation:blinkingText 2s infinite;
}
@keyframes blinkingText {
    0%{		color: rgba(0,0,0,0.5)	}
    50%{	color: rgba(0,0,0,1)	}
    100%{	color: rgba(0,0,0,0.5)	}
}

a.opened {
    cursor: initial;
}

.responseContainer {
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: white;
}

.responseContainer input:focus {
    outline: none;
}

a.opened h5, a.opened span, a.opened small, a.opened p {
    text-shadow:0px 0px 1px #cf5e2a;
    color: black;
}

.btnActionContainer {
    display: flex;
    justify-content: space-around;
    padding: 0;
    z-index: 10;
    margin-left: -10%;
    width: 120%;
    margin-bottom: 10px;
}

#themeContainer {
    width: 100%;
}

.menuContainer {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.categoryContainer {
    height: 70vh;
    overflow: auto;
}

.menuSupport {
    width: 18%;
    cursor: pointer
}

.darken {
    background: black;
    opacity: 0;
    position: absolute;
    top:-1px;
    bottom:0;
    left: 0;
    right: 0;
    pointer-events: none;
}

@media only screen and (max-width: 1000px) {
    .menuSupport {
        width: 30%;
        cursor: pointer;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 1600px) {
    [data-category-called] h5{
        font-size: 15px; !important;
    }
}


.menuSupport .card-body {
    min-height: 25vh;
    align-items: center;
    justify-content: center;
    display: flex;
}

.menuSupport .card-title {
    text-align: center;
}

#templateModalMeeting .table td, #templateModalMeeting .table th {
    padding: 3px;
    text-align: center;
}

#templateModalMeeting .table td.many {
    background: #0084c3;
    color: white;
    cursor: pointer;
}

#templateModalMeeting .table td.few {
    background: #9ac9ff;
    cursor: pointer;
}

#templateModalMeeting .table td.none {
    background: #7c7c7c;
    cursor: not-allowed;
}

#templateModalMeeting .table td.selected {
    color: black;
    background: lightgreen;
    cursor: pointer;
    color: green;

}

@media only screen and (max-height: 700px) {
    .right-panel table {
        font-size: 12px;
    }

    .right-panel [data-request] h4 {
        font-size: 14px;
        font-weight: bold;
    }
    .right-panel .table td, .right-panel .table th {
        padding: 5px;
    }

    .right-panel .chatContainer {
        font-size: 10px;
    }

    .center-panel .list-group-item h5 {
        font-size: 14px;
    }

    .center-panel .list-group-item p {
        font-size: 12px;
    }

    .center-panel .list-group-item small {
        font-size: 10px;
    }

    .right-panel .btnActionContainer button {
        font-size: 12px;
    }
}

.newUpdates {
    background: #90ee90;
}
.newUpdates:hover {
    background: #5eee5e;
}

.oldUpdates {
    background: orange;
}
.oldUpdates:hover {
    background: #ff7c00;
}

.lateUpdates {
    background: #f33838;
}
.lateUpdates:hover {
    background: #e00202;
}

.newUpdates h5, .oldUpdates h5, .lateUpdates h5 {
    color: black;
}


.chatContainer {
    padding-left: 10%;
    padding-right: 10%;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
}

select[data-id="select-agency-filter"] + button{
    border-radius: 4px 0 0 4px;
}

.ticketingContainer {
    margin-bottom: 10px;
    margin-top: 10px;
}

.ticketingSender {
    padding-left: 15px;
}

.sendMessage.block {
    color: lightgrey;
    cursor: initial;
}

.ticketing_msg_me .ticketMessage {
    padding: 10px;
    background: #00558A;
    border-radius: 17px;
    color: white;
}

.ticketing_msg_system .ticketMessage {
    background: rgba(241, 119, 32, 0.78);
}

.ticketing_msg_other .ticketMessage {
    padding: 10px;
    background: #f1f1f1;
    border-radius: 17px;
}



.btn-cm {
    background: white;
    border: solid 2px #cf4b2a;
    color: #cf4b2a;
    border-radius: 200px;
    padding: 5px;
    font-size: 15px;
}

.btn-cm.blue {
    background: white;
    border: solid 2px #00558a;
    color: #00558a !important;
}

.btn-cm:hover, .btn-cm.active {
    padding: 4px;
    border: solid 3px #cf4b2a;
    color: #cf4b2a;
    text-shadow:0px 0px 1px #cf4b2a;
}

.btn-cm.blue:hover {
    padding: 4px;
    border: solid 3px #00558a;
    color: #00558a !important;
    text-shadow:0px 0px 1px #00558a;
}

.btn-cm.red:hover, .btn-cm.red:hover {
    padding: 4px;
    border: solid 3px red;
    color: red;
    text-shadow:0px 0px 1px red;
}


.btn-cm.all-yellow:hover, .btn-cm.yellow:hover {
    padding: 4px;
    border: solid 3px #ffb800;
    color: #ffb800;
    text-shadow:0px 0px 1px #ffb800;
}


.btn-cm.all-green:hover, .btn-cm.green:hover {
    padding: 4px;
    border: solid 3px #5bd25b;
    color: #5bd25b;
    text-shadow:0px 0px 1px #5bd25b;
}

.btn-cm.all-red {
    padding: 4px;
    border: solid 3px red;
    color: red;
}


.btn-cm.all-yellow {
    padding: 4px;
    border: solid 3px #ffb800;
    color: #ffb800;
}


.btn-cm.all-green {
    padding: 4px;
    border: solid 3px #5bd25b;
    color: #5bd25b;
}

.max-width-one-week {
    max-width: calc(100% / 53) !important;
}

#depassementStaffTable {
    max-height: 65vh;
    overflow-y: auto;
}

@media only screen and (max-width: 1200px) {
    #depassementStaffTable {
        max-height: 40vh !important;
    }
}
@media only screen and (max-width: 900px) {
    #depassementStaffTable {
        max-height: 30vh !important;
    }
}


 .div-table-hover > div:hover {
     background-color: rgba(0, 0, 0, .075)
 }


 .modal-xxl {
     max-width: 97vw;
 }

 .tableTitleOverflowEllipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }