/************added from scripts/style5.0.css**************/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;600&display=swap');

:root {
    --main-font-size: 12px;
    --main-color: #630005;
    --hover-color: #ffa500;
    --header-color: #630005;
    --button-color: #630005;
    --menu-color: #ffffff;
    --background-first-degree: #ffffff;
    --background-second-degree: #ffffff;
    --background-third-degree: #E2E2E2;
    --background-fourth-degree: #7B7B7B;
    --background-fifth-degree: #cccccc;
    --background-sixth-degree: #efefef;
    --background-seventh-degree: #F3F3F3;
    --font-color: #000000;
    --Alert-color: #dd3c10;
    --OK-Alert-color: #6eed1f;
    --AlertIntermediate-color: #ff7f00;
    --dirtyWhite-color: #F5F5F5;
    --disabled-color: #808080;
    --dirtyWhiteShadow-color: #666666;
    --questioBackground-color: #ccc;
    --room-available-color: #CCEEDD;
    --room-not-available-color: #FF0000;
    --room-empty-color: #FFFFFF;
    --planning-separator-color: #EBEBEB;
    --planning-grid-border-color: #7B7B7B;
    --planning-cell-border-color: #adadad;
    /* Text drawn on a background whose colour is the same in both themes
       (availability, occupancy levels, stop sale) : it stays dark. */
    --fixed-background-font-color: #000000;
}

[theme="d"] {
    --main-font-size: 12px;
    --main-color: #D32F2F;
    --hover-color: #ffa500;
    --header-color: #630005;
    --button-color: #630005;
    --menu-color: #ffffff;
    --background-first-degree: #121212;
    --background-second-degree: #212121;
    --background-third-degree: #424242;
    --background-fourth-degree: #616161;
    --background-fifth-degree: #1b1e23;
    --background-sixth-degree: #565656;
    --background-seventh-degree: #101010;
    --font-color: #ffffff;
    --Alert-color: #dd3c10;
    --OK-Alert-color: #6eed1f;
    --AlertIntermediate-color: #ff7f00;
    --dirtyWhite-color: #7d7d7d;
    --dirtyWhiteShadow-color: #666666;
    --questioBackground-color: #424242;
    --room-available-color: #CCEEDD;
    --room-not-available-color: #FF0000;
    /* An empty cell carries no information : it follows the theme instead of
       punching a white hole in the grid. */
    --room-empty-color: #2B2B2B;
    --planning-separator-color: #3A3A3A;
    /* --background-fourth-degree (#616161) is too close to the dark background
       of the content panel : the grid lines would disappear. #B0B0B0 keeps the
       3:1 required for a non text element, even on the lightest panel. */
    --planning-grid-border-color: #B0B0B0;
    --planning-cell-border-color: #B0B0B0;
}

/* Planning grids of the hotel screens (PlanningDispo, PlanningDispoStock,
   PlanningStopSale). Replaces the inline style that used to force COLOR: black
   on the table and therefore made the whole grid unreadable in dark mode. */
.cr_planning_grid {
    border-color: var(--planning-grid-border-color);
    border-collapse: collapse;
    text-decoration: none;
}

/* The grid lines used to come from the bordercolor="#adadad" attribute of the
   table, which the browser resolves to a fixed colour. */
.cr_planning_grid td {
    border-color: var(--planning-cell-border-color);
}

/* Room availability colours for the hotel planning grid (PlanningDispo). */
.cr_room_available {
    background-color: var(--room-available-color);
    color: var(--fixed-background-font-color);
}

.cr_room_not_available {
    background-color: var(--room-not-available-color);
    color: var(--fixed-background-font-color);
}

.cr_room_empty {
    background-color: var(--room-empty-color);
    color: var(--font-color);
}

/* End of week separator row of the hotel planning grid (PlanningDispo). */
.cr_planning_separator {
    background-color: var(--planning-separator-color);
}

/* Cell whose background colour does not depend on the theme (occupancy level
   of the stock situation, stop sale flag) : the text stays dark to keep the
   contrast it already has in light mode. */
.cr_fixed_background_cell {
    color: var(--fixed-background-font-color);
}

/* Same cell when no background colour applies : it follows the theme. */
.cr_theme_background_cell {
    color: var(--font-color);
}

b {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 1px );
}

p {
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 1px );
}

body {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 1px );
}

input {
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 1px);
}

select {
    border-style: solid;
    border-color: inherit;
    border-width: 1pt;
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 1px );
    direction: ltr;
}

a {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px);
}

td {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 1px);
}

.tableRoomHeader {
    font-size: calc(var(--main-font-size) - 6px);
    border-left-color: var(--background-fourth-degree);
    border-bottom-color: var(--background-fourth-degree);
    color: var(--font-color);
    border-top-color: var(--background-fourth-degree);
    font-family: Trim, sans-serif;
    border-collapse: collapse;
    border-right-color: var(--background-fourth-degree);
}

.roomrow {
    background-color: var(--background-fourth-degree);
}

.roomcell {
    font-weight: bold;
    color: var(--background-first-degree);
    font-family: Trim, sans-serif;
}

.customerrow {
    border-left-color: var(--background-fourth-degree);
    border-bottom-color: var(--background-fourth-degree);
    border-top-color: var(--background-fourth-degree);
    border-collapse: collapse;
    border-right-color: var(--background-fourth-degree);
}

.ShortCutMenu {
    border: 1px SOLID var(--background-fourth-degree);
    background: #EBEBEB;
}

.progressionbar_enabled {
    background-color: #4975B4;
}

.progressionbar_disabled {
    background-color: var(--background-fourth-degree);
}

.progressionbar_selected {
    background-color: #FC7406;
}

.cr_ImageListPicture {
    border-style: none;
}


/* Excursion  
----------------------------------------------------------*/

.Grid {
    width: 100%;
    color: var(--font-color);
    font-family: Trim, sans-serif;
    font-size: var(--main-font-size);
}

.Grid2 {
    color: var(--font-color);
    font-family: Trim, sans-serif;
    font-size: var(--main-font-size);
}

.GridHeader, .GridHeader:hover {
    background-color: var(--main-color) !important;
    color: white;
}

.GridAlternating {
    background-color: var(--background-sixth-degree);
}

table.Grid tr:hover {
    background-color: var(--background-fifth-degree);
}

.Grid tr td a {
    white-space: nowrap;
}

.Grid .pagination:first-child + tr td > a, .Grid tr:first-child:not(.pagination) td > a, .Grid2 tr:first-child:not(.pagination) td > a {
    text-decoration: none;
    color: white !important;
}

    .Grid .pagination:first-child + tr td > a:after, .Grid tr:first-child:not(.pagination) td > a:after {
        content: "\f0dc";
        font-family: fontawesome;
        padding-left: 2px;
        font-size: calc(var(--main-font-size) - 1px);
    }

.cr_Grid1Content {
    border: 1px SOLID var(--background-fourth-degree);
}

.cr_Grid1UnSelectedHeaderItem {
    color: #0E0E0E;
    background-color: gainsboro;
}

.cr_Grid1SelectedHeaderItem {
    color: white;
    background-color: var(--main-color);
}

.traitgauche {
    border-left: 1px solid black;
    padding-left: 5px;
    margin-left: 5px;
}

.RangeValidator {
    position: absolute;
}
/*********************fin scripts/style5.0.css***************************/
.Hide {
    display: none;
}

b {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: var(--font-color);
    text-decoration: none;
}

p {
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    text-transform: none;
    text-decoration: none;
}

body {
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-decoration: none;
    background-color: var(--background-sixth-degree);
    height: 100%
}

.body_identification, .body_password, .body_subscribe, .body_error, .body_2fa {
    background-color: var(--background-third-degree);
}

input {
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

select {
    font-family: Trim, sans-serif;
    color: var(--font-color);
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    border: 1pt solid;
    background-color: var(--background-second-degree);
}

a {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: var(--font-color);
    text-decoration: underline;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
}

td {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: none;
}


hr {
    color: var(--font-color);
}

textarea {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-style: normal;
    color: var(--font-color);
    background-color: var(--background-second-degree);
}

.navigateur {
    font-size: var(--main-font-size);
}

.button-book {
    color: White;
    background-color: #54739F;
    border-top: 1 solid #A4B4CC;
    border-left: 1 solid #A4B4CC;
    border-bottom: 1 solid #445D80;
    border-right: 1 solid #445D80;
    font-weight: bold;
}

.button-onrequest {
    color: #6A6A6A;
    background-color: var(--background-fourth-degree);
    border-top: 1 solid #E9E9E9;
    border-left: 1 solid #E9E9E9;
    border-bottom: 1 solid #6A6A6A;
    border-right: 1 solid #6A6A6A;
    font-weight: bold;
}

.button-recompute {
    color: White;
    background-color: #54739F;
    border-top: 1 solid #A4B4CC;
    border-left: 1 solid #A4B4CC;
    border-bottom: 1 solid #445D80;
    border-right: 1 solid #445D80;
    font-weight: bold;
}

.button-back {
    color: White;
    background-color: #54739F;
    border-top: 1 solid #A4B4CC;
    border-left: 1 solid #A4B4CC;
    border-bottom: 1 solid #445D80;
    border-right: 1 solid #445D80;
    font-weight: bold;
}

.textbox_style1 {
    border-right: var(--background-fourth-degree) 1px solid;
    border-top: var(--background-fourth-degree) 1px solid;
    border-left: var(--background-fourth-degree) 1px solid;
    color: var(--font-color);
    border-bottom: var(--background-fourth-degree) 1px solid;
}

.textarea_style1 {
    border-right: var(--background-fourth-degree) 1px solid;
    border-top: var(--background-fourth-degree) 1px solid;
    border-left: var(--background-fourth-degree) 1px solid;
    width: 300px;
    color: var(--font-color);
    border-bottom: var(--background-fourth-degree) 1px solid;
    height: 80px;
}

.dropdownlist_style1 {
    border-right: var(--background-fourth-degree) 1px solid;
    border-top: var(--background-fourth-degree) 1px solid;
    border-left: var(--background-fourth-degree) 1px solid;
    color: var(--font-color);
    border-bottom: var(--background-fourth-degree) 1px solid;
}

.checkbox_style1 {
    color: var(--font-color);
}

.ProgressionBarDesabled {
    background-color: var(--background-fourth-degree);
}

.ProgressionBarEnabled {
    background-color: #4975B4;
}

.ProgressionBarSelected {
    background-color: #FC7406;
}

.title1 {
    font-weight: bold;
    color: var(--font-color);
}

.title2 {
    font-weight: bold;
    color: #FC7406;
}

.title3 {
    font-weight: bold;
}

.title4 {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 7px );
}

.title5 {
    font-weight: bold;
    color: var(--background-first-degree);
}

.link1 {
    font-weight: bold;
    color: var(--font-color);
}

.link2 {
    color: var(--font-color);
}

.notification1 {
    color: gray;
}

.notification2 {
    color: red;
}

.notification3 {
    color: var(--font-color);
    border: 1px SOLID var(--background-fourth-degree);
    background-color: #EBEBEB;
}

.tfcadre {
    background-color: var(--background-fifth-color);
    border-right: 1px solid var(--background-fifth-color);
    border-top: 1px solid var(--background-fifth-color);
    border-left: 1px solid var(--background-fifth-color);
    border-bottom: 1px solid var(--background-fifth-color);
}

.tfcadre-detail {
    background-color: var(--background-first-degree);
    border-right: 1px solid var(--background-fifth-color);
    border-top: 1px solid var(--background-fifth-color);
    border-left: 1px solid var(--background-fifth-color);
    border-bottom: 1px solid var(--background-fifth-color);
}

.Grid1 {
    color: var(--font-color);
    border: 1px SOLID var(--background-fourth-degree);
    border-collapse: collapse;
}

    .Grid1 td {
        border: 1px SOLID var(--background-fourth-degree);
    }

.Grid0 {
    color: var(--font-color);
    border: 1px SOLID var(--background-fourth-degree);
    border-collapse: collapse;
}



.Grid1SelectedHeaderItem {
    color: var(--background-first-degree);
    background-color: var(--main-color);
}

.Grid1SelectedHeaderItem2 {
    color: var(--font-color);
    background-color: var(--background-third-degree);
}

.Grid1SelectedHeaderItem3 {
    color: var(--font-color);
    background-color: #EBEBEB;
}

.Grid1UnSelectedHeaderItem {
    color: var(--font-color);
    background-color: var(--background-second-degree);
}

.Grid1UnSelectedHeaderItem2 {
    color: var(--font-color);
    background-color: var(--background-first-degree);
}

.Grid1UnSelectedHeaderItem3 {
    color: var(--font-color);
    background-color: var(--background-first-degree);
}

.Grid1UnSelectedHeaderItem4 {
    color: var(--font-color);
    background-color: var(--background-third-degree);
}

.Grid1Alternating {
    background-color: #f9f7fb;
}

.Grid1SortTitle {
    color: var(--background-first-degree);
    text-decoration: underline;
}

.Grid1SortItem {
    color: var(--background-first-degree);
}

.Grid1Content {
    border: 1px SOLID var(--background-fourth-degree);
}

.Grid1Content2 {
    color: var(--font-color);
}

.Grid1Content3 {
    color: var(--font-color);
    border: 1px SOLID var(--background-fourth-degree);
}

.Grid1Item1 {
    border-bottom: 1px solid var(--background-fourth-degree);
}

.Grid1Item2 {
    border-top: 1px solid var(--background-fourth-degree);
    border-bottom: 1px solid var(--background-fourth-degree);
}

.Grid1Item3 {
    border-right: 1px solid var(--background-fourth-degree);
    border-left: 1px solid var(--background-fourth-degree);
    border-bottom: 1px solid var(--background-fourth-degree);
}

.Grid1Footer {
    color: var(--background-first-degree);
    background-color: var(--background-fourth-degree);
}

.Image1 {
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
}

.SectionTitleSelected {
    background: var(--background-fourth-degree);
    color: var(--background-first-degree);
}

.SectionTitleUnSelected {
    background: #EBEBEB;
    color: var(--font-color);
}

.SectionTitleHighlighted {
    background: #C0CDD5;
    color: var(--background-first-degree);
}

.SectionTitleUnHighlighted {
    background: #EBEBEB;
    color: var(--font-color);
}

.SectionDetailContainer {
    border-left: var(--background-fourth-degree) 1px solid;
    border-right: var(--background-fourth-degree) 1px solid;
    border-bottom: var(--background-fourth-degree) 1px solid;
    padding: 0px 5px 5px 5px;
}

.SectionsTitlesContainer {
    border-bottom: var(--background-fourth-degree) 1px solid;
}

.SectionsTitlesOtherItemsHighlighted {
    border-left: var(--background-fourth-degree) 1px solid;
    border-top: var(--background-fourth-degree) 1px solid;
    height: 24px;
    padding: 0px 11px 0px 11px;
    text-align: center;
    background: #EBEBEB;
}

.SectionsTitlesOtherItemsUnHighlighted {
    border-left: var(--background-fourth-degree) 1px solid;
    border-top: var(--background-fourth-degree) 1px solid;
    height: 24px;
    padding: 0px 11px 0px 11px;
    text-align: center;
    background: var(--background-first-degree);
}



.header {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: none;
    padding-top: 11px;
    padding-right: 7px;
    padding-left: 7px;
}

.client {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 7px );
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    vertical-align: bottom;
    height: 30px;
    padding-right: 5px;
    font-variant: normal;
    text-transform: uppercase;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    scrollbar-3dlight-color: #E0E0E0;
    scrollbar-arrow-color: #949E84;
    scrollbar-darkshadow-color: #E0E0E0;
    scrollbar-face-color: #E5E5E5;
    scrollbar-highlight-color: var(--background-first-degree);
    scrollbar-shadow-color: #E3E3E3;
    scrollbar-track-color: #EEEEEE;
}

.entete_bloc {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 7px );
    font-weight: bold;
    color: var(--background-first-degree);
    text-decoration: none;
    padding-top: 1px;
    padding-right: 4px;
    padding-bottom: 1px;
    padding-left: 4px;
}

.date {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: bold;
    color: var(--background-first-degree);
    text-decoration: none;
}

.infos {
    font-family: Trim, sans-serif;
    font-size: var(--main-font-size);
    font-weight: normal;
    color: var(--menu-color);
    text-decoration: none;
    padding: 8px
    /*padding-top: 20px*/
}

.content_bloc {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: none;
    padding: 3px 6px;
}

.link_rub {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: underline;
}

.rub {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: none;
    font-weight: bold;
}

a.link_rub:hover {
    text-decoration: none;
}

.link_sousrub {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: underline;
}

a.link_sousrub:hover {
    text-decoration: none;
}

.sous_rub {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: none;
    padding-bottom: 6px;
}

.content {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    padding-right: 8px;
    padding-left: 8px;
}

.header {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #EA8706;
    text-decoration: none;
    padding-top: 11px;
    padding-right: 7px;
    padding-left: 7px;
}

.client {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    vertical-align: bottom;
    height: 30px;
    padding-right: 5px;
    font-variant: normal;
    text-transform: uppercase;
}

.abon {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: bold;
    color: #666666;
    padding: 15px;
}

.rouge {
    color: #CA2513;
}

.bout {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    color: #666666;
    text-decoration: none;
    background-image: url(../images/bgcool.gif);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #C3C3C3;
    border-right-color: #EFEFEF;
    border-bottom-color: #EFEFEF;
    border-left-color: #C3C3C3;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

.modifiable {
    color: Green;
}

.cr_notification {
    color: red;
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 2px );
}

.cr_Grid1UnSelectedHeaderItem {
    color: var(--background-first-degree);
    background-color: var(--background-fourth-degree);
    border-color: #A0A0A0;
}

.cr_notification2 {
    color: var(--background-first-degree);
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    background-color: #dd3c10;
    border: 1px solid #dd3c10;
    font-weight: bold;
    padding: 11px 11px 11px 11px;
}

.cr_notification3 {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    background-color: #dd3c10;
    color: var(--background-first-degree);
    font-weight: bold;
}

textarea {
    display: block;
}

/*Calendar Style*/
.calDate {
    background-color: #F4F9FB;
    border: 2px;
    border-style: groove;
}

.calSelectedDate {
    background-color: #FF8080;
    border: 2px;
    border-style: groove;
}

.calWeekendDay {
    background-color: #EBEBEB;
    border: 2px;
    border-style: groove;
}

.calTitle {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 1px );
    background-color: #cccccc;
    color: black;
}

.calBody {
    font-size: calc(var(--main-font-size) + 1px );
    border-width: 11px;
}

.CC {
    width: 100%;
    height: 300px;
}

.cr_link4 {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    background-color: rgba(255,235,59,.3);
    border: 1px solid black;
    color: black;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid var(--font-color);
    padding: 11px 11px 11px 11px;
}

a.cr_link4:active {
    text-decoration: none;
}

a.cr_link4:visited {
    text-decoration: none;
}

a.cr_link4:hover {
    text-decoration: none;
}

.cr_linkMessage {
    background: rgba(255,235,59,.3) !important;
    border: 1px solid #B7A400 !important;
    color: #B7A400 !important;
    font-size: calc(var(--main-font-size) + 4px ) !important;
    font-weight: 400 !important;
    padding: 7px 7px 7px 7px;
}

.cr_linkMessageUrgent {
    background: rgb(255,165,0) !important;
    border: 1px solid var(--main-color) !important;
    color: var(--font-color) !important;
    font-size: calc(var(--main-font-size) + 4px ) !important;
    font-weight: 400 !important;
    padding: 7px 7px 7px 7px;
}

.cr_linkMessageDeposit {
    background: rgb(246,121,121) !important;
    border: 1px solid var(--main-color) !important;
    color: var(--font-color) !important;
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: 400 !important;
    padding: 10px 10px 10px 10px;
    width: fit-content;
}

.cr_linkMessageDeposit:before {
    content: "\f071";
    font-family: fontawesome;
    padding: 0 5px;
    font-size: calc(var(--main-font-size) + 4px );
    color: var(--font-color) !important;
}

.cr_linkMessageExpiredDeposit {
    background: rgb(139 0 0 / 80%) !important;
    border: 1px solid var(--main-color) !important;
    color: var(--font-color) !important;
    font-size: calc(var(--main-font-size) + 4px ) !important;
    font-weight: 400 !important;
    padding: 10px 10px 10px 10px;
    width: fit-content;
}

.cr_linkMessageExpiredDeposit:before {
    content: "\f071";
    font-family: fontawesome;
    padding: 0 5px;
    font-size: calc(var(--main-font-size) + 4px );
    color: var(--font-color) !important;
}

.noflottante {
    background-color: var(--background-fifth-color);
    border-right: 1px solid var(--background-fifth-color);
    border-top: 1px solid var(--background-fifth-color);
    border-left: 1px solid var(--background-fifth-color);
    border-bottom: 1px solid var(--background-fifth-color);
    margin: 4px;
    width: 99%;
}

.flottante {
    background-color: var(--background-fifth-color);
    border-right: 1px solid var(--background-fifth-color);
    border-top: 1px solid var(--background-fifth-color);
    border-left: 1px solid var(--background-fifth-color);
    border-bottom: 1px solid var(--background-fifth-color);
    margin: 2px;
    float: left;
    width: 48%;
}

.spacer {
    clear: both;
}

.cr_linkDep {
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
    border: 1px solid black;
    color: #545454;
    text-decoration: none;
    border-bottom: 1px solid var(--font-color);
    padding: 11px 11px 11px 11px;
}

#Label_VerifyPasswordCP, #Label_PasswordCP, #Label_LastPasswordCP {
    color: #545454;
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
}

.InvoiceRate {
    font-family: Trim, sans-serif;
}

.gds {
    float: left;
    border-top: 7px solid transparent;
    border-left: 9px solid #069;
    border-bottom: 7px solid transparent;
    top: 1px;
    left: -1px;
    position: relative;
}

.lcc {
    float: left;
    border-top: 7px solid transparent;
    border-left: 9px solid orange;
    border-bottom: 7px solid transparent;
    top: 1px;
    left: -1px;
    position: relative;
}

.gdslegend {
    float: left;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    top: -15px;
    left: -1px;
    position: relative;
}

.lcclegend {
    float: left;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    top: -15px;
    left: -1px;
    position: relative;
}

.gds_list {
    float: left;
    border-top: 7px solid transparent;
    border-left: 9px solid #069;
    border-bottom: 7px solid transparent;
    top: 6px;
    left: -1px;
    position: relative;
}

.lcc_list {
    float: left;
    border-top: 7px solid transparent;
    border-left: 9px solid orange;
    border-bottom: 7px solid transparent;
    top: 6px;
    left: -1px;
    position: relative;
}

/********* Menu Style *********************************/
div.hideSkiplink {
    /*background-color: #CCCCCC;*/
    width: 100%;
    cursor: pointer;
}

menu {
    background-color: #CCCCCC;
    color: var(--font-color);
    cursor: pointer;
}

div.menu tr {
    list-style: none;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}

.StaticMenuItemStyle {
    background-color: #CCCCCC;
    border: 1px #ADADAD solid;
    line-height: 1.5em;
    padding: 4px 4px;
    white-space: nowrap;
    color: var(--font-color);
    cursor: pointer;
    border-radius: 13px;
}

.Menu_TitleStyle {
    display: none;
}

.Label_logoutStyle {
    display: none;
}

.MenuVisible {
    display: contents;
    font-size: calc(var(--main-font-size) + 3px ) !important;
    font-weight: 400 !important;
}

.StaticMenuItemStyle:hover, .DynamicMenuItemStyle:hover {
    background-color: #898989;
    cursor: pointer;
}

.DynamicMenuItemStyle {
    background-color: #CCCCCC;
    border: 1px #ADADAD solid;
    line-height: 1.35em;
    padding: 4px 4px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--main-color);
    cursor: pointer;
}

/* Suppress Chrome for Android's blue tap-highlight rectangle on menu items. */
.cr_menu, .cr_menu *, .DynamicMenuStyle, .DynamicMenuStyle * {
    -webkit-tap-highlight-color: transparent;
}

/* The tap highlight was the only feedback a tap produced, and the hover
   background fades in over 0.5s - too slow to read as a response. Give the
   row an immediate pressed state instead. */
table.StaticMenuItemStyle:active, table.DynamicMenuItemStyle:active {
    background-color: var(--menu-color) !important;
    transition: none !important;
}

    table.StaticMenuItemStyle:active a, table.DynamicMenuItemStyle:active a {
        color: var(--main-color) !important;
    }
/********* End Menu Style *********************************/





input.large {
    padding: 0 5px;
    width: 170px;
}

input.champs_recherche {
    height: 20px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #d4d4d4;
    background: #FFF;
    color: #5b5b5b;
    box-shadow: 0px 4px 11px 0px rgba(196, 196, 196, 0.4) inset;
    width: 200px;
}

.input_moteur {
    color: #333;
    background-color: white;
    border: 1px solid #AAA;
    padding: 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    border-radius: 3px;
    -mox-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 2px 5px #CCC;
    -moz-box-shadow: inset 0 2px 5px #ccc;
    -webkit-box-shadow: inset 0 2px 5px #CCC;
    -o-box-shadow: inset 0 2px 5px #ccc;
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: normal;
    line-height: 1.2;
    padding: 3px;
}

.input_keyword {
    margin: 0;
    padding: 0;
    font-size: calc(var(--main-font-size) + 2px );
    color: #333;
    border: 0;
    padding-left: 2px;
    background-color: white;
    font-weight: normal;
    line-height: 1.2;
}

/*Flight*/
.input_fligth {
    width: 320px;
}

.input_fligth_keyword {
    width: 290px;
    height: 15px;
}

.command {
    font-family: Trim, sans-serif;
    background-color: #DFDFF9;
    color: #1B21BA;
    font-weight: bold;
}

.cr_delete {
    position: absolute;
    float: right;
    font-size: calc(var(--main-font-size) + 4px );
    color: #3b5998;
    border: 0;
    font-weight: bold;
    background: transparent;
    margin: 0;
    padding: 0;
    width: 15px;
    height: 15px;
}

.timetable {
    white-space: pre-wrap;
}

.CommandResponse {
    Width: 100%;
    white-space: pre-wrap;
    font-family: Trim, sans-serif;
}

.CommandTextValidator {
    Width: 100%;
    white-space: pre-wrap;
    font-family: Trim, sans-serif;
    color: red;
}

.AlertVC {
    background-color: Red;
    color: White;
}
/**voucher**/

.cr_Grid1 {
    color: var(--font-color);
    border: 1px SOLID;
    border-collapse: collapse;
}

.cr_customer_title {
    color: #0e0e0e;
    background-color: #EBEBEB;
}

.cr_customer_columntitle {
    color: var(--background-first-degree);
    background-color: var(--background-fourth-degree);
}

.cr_Grid1 td {
    border: 1px SOLID var(--background-fourth-degree);
}

.cr_title1 {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 3px );
    color: #0e0e0e;
}

.cr_title4 {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 6px );
}

.cr_title0 {
    color: #0e0e0e;
}

.cr_title2 {
    font-family: Trim, sans-serif;
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 1px );
    color: #FC7406;
}

.GSC {
    border: 1px solid var(--font-color);
}

/*Style Login*/

.cssLogo {
    margin: 25px auto 20px;
}

.bannerTitle {
    font-family: Trim, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #555;
    font-size: calc(var(--main-font-size) + 5px );
    font-weight: 400;
    margin-bottom: 15px;
}

.contentLogin {
    background-color: var(--background-fifth-color);
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    width: 274px;
    padding: 40px 40px;
}

.container {
    margin: 0 auto 25px;
    position: relative;
    width: 900px;
}

.cssForm input[type="text"],
.cssForm input[type="password"] {
    width: 100%;
    height: 44px;
    display: block;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: calc(var(--main-font-size) + 4px );
    padding: 0 8px;
    margin: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    border-radius: 1px;
    color: #404040;
    margin-bottom: 10px;
}

.cssForm input[type=submit] {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cssForm input[type="text"]:focus,
.cssForm input[type="password"]:focus {
    outline: none;
    border: 1px solid #4d90fe;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.CssHref {
    color: #427fed;
    font-size: calc(var(--main-font-size) + 2px );
    text-decoration: none;
}

.CssSubscribe {
    text-align: center;
    margin-bottom: 10px;
}

#Link_subscribe {
    font-size: calc(var(--main-font-size) + 3px );
}

.CssHref:hover {
    text-decoration: underline;
}

.CssNavigator {
    margin: 0 auto;
}

.profile-img {
    margin: 0 auto 20px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.CssbtnLogin {
    width: 86%;
    margin: 12px 0 12px 1px;
    border: 1px solid #2f5bb7;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.3);
    background-color: #357ae8;
    height: 35px;
    font-weight: bold;
    border-radius: 3px;
}

.clearfix:after,
.cssForm:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}

.rc-button,
.rc-button:visited {
    display: inline-block;
    min-width: 46px;
    text-align: center;
    color: #444;
    font-size: calc(var(--main-font-size) + 3px );
    font-weight: 700;
    height: 36px;
    padding: 0 8px;
    line-height: 36px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -o-transition: all 0.218s;
    -moz-transition: all 0.218s;
    -webkit-transition: all 0.218s;
    transition: all 0.218s;
    border: 1px solid #EBEBEB;
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top,#f5f5f5,#EBEBEB);
    background-image: -moz-linear-gradient(top,#f5f5f5,#EBEBEB);
    background-image: -ms-linear-gradient(top,#f5f5f5,#EBEBEB);
    background-image: -o-linear-gradient(top,#f5f5f5,#EBEBEB);
    background-image: linear-gradient(top,#f5f5f5,#EBEBEB);
    -o-transition: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

.rc-button {
    width: 100%;
    padding: 0;
    font-family: Trim, sans-serif;
    font-size: calc(var(--main-font-size) + 2px );
}

    .rc-button.disabled,
    .rc-button[disabled] {
        opacity: .5;
        filter: alpha(opacity=50);
        cursor: default;
        pointer-events: none;
    }

    .rc-button:hover {
        border: 1px solid #c6c6c6;
        color: #333;
        text-decoration: none;
        -o-transition: all 0.0s;
        -moz-transition: all 0.0s;
        -webkit-transition: all 0.0s;
        transition: all 0.0s;
        background-color: #f8f8f8;
        background-image: -webkit-linear-gradient(top,#f8f8f8,#EBEBEB);
        background-image: -moz-linear-gradient(top,#f8f8f8,#EBEBEB);
        background-image: -ms-linear-gradient(top,#f8f8f8,#EBEBEB);
        background-image: -o-linear-gradient(top,#f8f8f8,#EBEBEB);
        background-image: linear-gradient(top,#f8f8f8,#EBEBEB);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }

    .rc-button:active {
        background-color: #f6f6f6;
        background-image: -webkit-linear-gradient(top,#f6f6f6,#EBEBEB);
        background-image: -moz-linear-gradient(top,#f6f6f6,#EBEBEB);
        background-image: -ms-linear-gradient(top,#f6f6f6,#EBEBEB);
        background-image: -o-linear-gradient(top,#f6f6f6,#EBEBEB);
        background-image: linear-gradient(top,#f6f6f6,#EBEBEB);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

.rc-button-submit,
.rc-button-submit:visited {
    border: 1px solid #3079ed;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    background-color: #4d90fe;
    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
    background-image: linear-gradient(top,#4d90fe,#4787ed);
}

    .rc-button-submit:hover {
        border: 1px solid #2f5bb7;
        color: #fff;
        text-shadow: 0 1px rgba(0,0,0,0.3);
        background-color: #357ae8;
        background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
        background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
        background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
        background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
        background-image: linear-gradient(top,#4d90fe,#357ae8);
    }

    .rc-button-submit:active {
        background-color: #357ae8;
        background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
        background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
        background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
        background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
        background-image: linear-gradient(top,#4d90fe,#357ae8);
        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    }


.cssFloat {
    float: right;
}

.CssCenter {
    text-align: center;
}

.cssRequired {
    position: absolute;
    margin-left: 288px;
    margin-top: -36px;
}



.select_overflow {
    overflow-y: auto;
}

/************************************Deposit Color*****************************/

td.cr_linkDep {
    color: #B7A400;
    background: rgba(255, 235, 59, 0.3);
    border: 1px solid #B7A400;
}

    td.cr_linkDep b {
        color: #B7A400;
    }

td.cr_linkDepUnder50 {
    color: Black;
    border: 1px solid Black;
    background: #92D050;
}

td.cr_linkDepUnder70 {
    color: Black;
    border: 1px solid Black;
    background: #FFFF00;
}

td.cr_linkDepUnder90 {
    color: Black;
    border: 1px solid Black;
    background: #F79646;
}

td.cr_linkDepUnder100 {
    color: Black;
    border: 1px solid Black;
    background: #FF0000;
}

td.cr_linkDepHover100 {
    color: Black;
    border: 1px solid Black;
    background: #696969;
}

    td.cr_linkDepUnder50 b, td.cr_linkDepUnder70 b, td.cr_linkDepUnder90 b, td.cr_linkDepUnder100 b, td.cr_linkDepHover100 b {
        color: Black;
    }


.Link_Session {
    white-space: normal !important;
}


.GridView_MessagesPadding {
    padding: 0px;
}

.divCities {
    width: 514px;
    /*position: absolute;*/
    height: 130px;
    margin: 0 0 8px 0;
}

    .divCities option {
        color: black;
        padding: 3px 3px 3px 3px;
    }

#slthbcities, #sltmembers {
    list-style: none;
    height: 130px;
    overflow-y: auto;
    color: #555;
    padding: 0px;
    background-color: #fff;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    margin: 0 0 8px 0;
}

/********************************Booking status*******************/
.bookingState {
    color: white !important;
    /*font-weight:bold;*/
    /*text-decoration:underline;*/
    text-transform: uppercase;
    padding: 10px 10px;
    background-color: black;
    border: hidden !important;
}

    .bookingState:before {
        font-family: FontAwesome;
        /*content: "\f111";*/
        /*margin-right: 5px;*/
        display: inline-block;
    }

.bookingStateNew {
    background-color: #38761D;
}

.bookingStateNetremit {
    background-color: #E69138;
}

.bookingStateClosed {
    background-color: #351C75;
}

.bookingStateTemporary {
    background-color: #B4B4B4;
}

.bookingStateCanceled {
    background-color: #696969 !important;
}

.bookingStateOnRequestCanceled {
    background-color: #696969;
}

.bookingStateConfirmed {
    background-color: #38761D;
}

.bookingStateBookingInProgress {
    background-color: #990000;
}

.bookingStateOnRequest {
    background-color: #FF50A8;
}

.bookingStateExchange {
    background-color: #839A95;
}

.bookingStateRefund {
    background-color: #0B5394;
}

.bookingStateUnconfirmed {
    background-color: #E69138;
}

.bookingStateReserved {
    background-color: #CC0000;
}

.bookingStateOnRequestOK {
    background-color: #0CA7A7;
}

.bookingStateConsumed {
    background-color: #F1C232;
}

.bookingStateProceeded {
    background-color: #BF9000;
}

.bookingStateAccompteConfirmed {
    background-color: #AA55FF;
}


.bookingStateFlag:after {
    font-family: FontAwesome;
    /*content: "\f057";*/
    margin-left: 5px;
    display: inline-block;
    color: #990000;
}

.bookingViewedFlag:after {
    font-family: FontAwesome;
    content: "\f06e";
    margin-left: 5px;
    display: inline-block;
    color: orange; /*Orange*/
}

.NRF:after {
    font-family: FontAwesome;
    content: "\f023";
    margin-left: 5px;
    display: inline-block;
    color: red;
}

.WS:after {
    font-family: FontAwesome;
    content: "\e1cd";
    margin-left: 5px;
    display: inline-block;
    color: #a40;
}

.bookingAcceptedFlag:after {
    font-family: FontAwesome;
    content: "\f058";
    margin-left: 5px;
    display: inline-block;
    color: green; /*Green*/
}

.bookingRejectedFlag:after {
    font-family: FontAwesome;
    content: "\f056";
    margin-left: 5px;
    display: inline-block;
    color: red; /*Red*/
}

.bookingPMSAcceptedFlag:after {
    font-family: FontAwesome;
    content: "\f560";
    margin-left: 5px;
    display: inline-block;
    color: green; /*green*/
}

.bookingPMSDeliveredFlag:after {
    font-family: FontAwesome;
    content: "\f00c";
    margin-left: 5px;
    display: inline-block;
    color: green; /*green*/
}

.bookingPMSUndeliveredFlag:after {
    font-family: FontAwesome;
    content: "\f071";
    margin-left: 5px;
    display: inline-block;
    color: red; /*red*/
}

.bookingMoreFlag:after {
    font-family: FontAwesome;
    content: "\f164";
    margin-left: 5px;
    display: inline-block;
    color: green; /*green*/
}

.bookingLessFlag:after {
    font-family: FontAwesome;
    content: "\f165";
    margin-left: 5px;
    display: inline-block;
    color: red; /*Red*/
}

.bookingSentFlag:after {
    font-family: FontAwesome;
    content: "\f1d8";
    margin-left: 5px;
    display: inline-block;
    color: blue; /*Blue*/
}

.bookingFeedbackFlag:after {
    font-family: FontAwesome;
    content: "\f27a";
    margin-left: 5px;
    display: inline-block;
    color: magenta;
}

.bookingORconfirmedFlag:after {
    font-family: FontAwesome;
    content: "\f14a";
    margin-left: 5px;
    display: inline-block;
    color: green;
}

.bookingORrefusedFlag:after {
    font-family: FontAwesome;
    content: "\f05e";
    margin-left: 5px;
    display: inline-block;
    color: red;
}

.bookingVerifiedFlag:after {
    font-family: FontAwesome;
    content: "\f14a";
    margin-left: 5px;
    display: inline-block;
    color: green;
}
/************ DASHBOARD**************/
.fa-envelope:before {
    content: "\f0e0"
}

.divshortcutbook,
.divshortcutReservation,
.divshortcutdb {
    max-width: 1200px;
}

/* HORIZONTAL MENU ONLY (the vertical layout puts cr_layout_vertical on <html> and keeps the
   rules above). The shortcut rows were capped at 1200px and left-aligned, so the icons (7 per
   row) sat off-center in the card. Tracks of 140px (icon 130 + 2 border + 8 margin) capped at
   7 columns = 980px: the box hugs the icons exactly, so centering the box centers the icons.
   Every row shares the same width, so their left edges stay aligned with each other, and the
   icons still flow left to right. Narrower screens simply get fewer columns. */
html:not(.cr_layout_vertical) .divshortcutbook,
html:not(.cr_layout_vertical) .divshortcutReservation,
html:not(.cr_layout_vertical) .divshortcutdb {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
}

.shortcutdb_container {
    width: 130px;
    height: 103px;
    margin-right: 8px;
    border: 1px solid #e1e1e1;
    display: inline-table;
    font-size: calc(var(--main-font-size) + 2px);
    text-align: center;
    margin-bottom: 20px;
    background-color: var(--background-second-degree);
}

.shortcutdb_hyperlink {
    text-decoration: none !important;
}

.shortcutdb:before {
    font-family: FontAwesome;
    font-size: calc(var(--main-font-size) + 13px);
    padding-top: 5px;
    color: var(--main-color);
    display: block;
    /*padding-left: 80px;*/
}

.passworddb:before {
    content: "\f13e";
}

.profiledb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f007";
}

.messagedb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f0e0";
}

.update_icon_btn:before {
    content: "\f040";
    /*padding-top: 15px;*/
    padding-bottom: 5px;
}

.sectionlist_icon_btn:before {
    content: "\f543";
}

.supplementupdate_icon_btn:before {
    content: "\f067";
}

.allotmentlist_icon_btn:before {
    content: "\f155";
    /*padding-top: 15px;*/
    padding-bottom: 5px;
}

.unavailabilityperiodslist_icon_btn:before {
    content: "\f28d";
}

.promotionlist_icon_btn:before {
    content: "\f295";
}

.hotelFixedDates_icon_btn:before {
    content: "\f073";
}

.setDateslist_icon_btn:before {
    content: "\f133";
}

.stayproductlist_icon_btn:before {
    content: "\f03a";
}

.detail_icon_btn:before {
    content: "\f129";
}

.stock_icon_btn:before {
    content: "\f5fd";
}

.transfermoneylist_icon_btn:before {
    content: "\f0d6";
}

.shortcutdbspan {
    font-size: calc(var(--main-font-size) + 3px );
    min-height: 66px;
    margin: 12px 0 0;
    line-height: 19px;
    color: var(--font-color);
}

.bookhoteldb:before {
    padding-top: 1px;
    content: "\f236";
}

.bookflightdb:before {
    content: "\f072";
}

.Reservflightdb:before {
    padding-top: 1px;
    padding-bottom: 5px;
    content: "\f072";
}

.bookhtlwwdb:before {
    content: "\f0f2";
}

.Reservhtlwwdb:before {
    padding-top: 1px;
    padding-bottom: 5px;
    content: "\f0f2";
}

.bookTripdb:before {
    padding-top: 1px;
    padding-bottom: 5px;
    content: "\f07a";
}

.booktransferdb:before {
    content: "\f018";
}

.Reservtransferdb:before {
    padding-top: 1px;
    content: "\f018";
}

.bookactivitydb:before {
    content: "\f207";
}

.Productdb:before {
    padding-top: 1px;
    padding-bottom: 5px;
    content: "\f615";
}

.Packagedb:before {
    padding-top: 1px;
    padding-bottom: 5px;
    content: "\f187";
}

.bookcardb:before {
    content: "\f1b9";
}

.Reservcardb:before {
    padding-top: 1px;
    content: "\f1b9";
}

.importpnrdb:before {
    padding-bottom: 5px;
    content: "\f15c";
}

.invoicedb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f570";
}

.paymentdb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f0d6";
}

.customerdb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f0c0";
}

.affiliatedb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f234";
}

.troubleshootingdb:before {
    padding-top: 15px;
    padding-bottom: 5px;
    content: "\f0ad";
}

.reportdb:before {
    content: "\f080";
    padding-top: 15px;
    padding-bottom: 5px;
}

.logoutdb:before {
    content: "\f011";
}

.subagentdb:before {
    content: "\f234";
    padding-top: 15px;
    padding-bottom: 5px;
}

/* Booking fees billing page (ui/business/Billing_fees.aspx) - file-invoice-dollar glyph.
   Sits in the reservation row, so it uses that row's 1px top padding: the 15px used by the
   dashboard row would make the tile 14px taller than its neighbours. */
.billingfeesdb:before {
    content: "\f571";
    padding-top: 1px;
    padding-bottom: 5px;
}

.shortcutdb_container:hover {
    background-color: var(--hover-color);
}

/************ProgressionValue**************/

.divDeposites {
    width: 1200px;
}

.progressbarContainer {
    width: 47%;
    padding: 5px;
    height: 70px;
    margin-bottom: 40px;
    margin-right: 10px !important;
    border: 1px solid #e1e1e1;
    display: inline-table;
    font-size: calc(var(--main-font-size) + 2px );
    text-align: center;
    background-color: var(--background-second-degree);
}

.progressbarHeader {
    width: 100%;
    height: 30px;
}

.progressbarCredit, .progressbarTitle {
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: bold;
    color: var(--main-color);
    padding-right: 5px;
}

.progressbarCredit, .bookingGraphdb, .Div_Real {
    float: right;
}

.bookingGraphdb {
    border: 0 !important;
    width: 298px;
    height: 276px;
}

.progressbarTitle, .LabelOrdersdb, .Div_CreditLine {
    float: left;
}

.LabelOrdersdb{
   width:max-content;
}

.progressbarBody {
    width: 100%;
}

.progressbarConsumed {
    background: var(--hover-color);
    /*
    repeating-linear-gradient(135deg, var(--main-color), #C6001C 5px, var(--main-color) 6px, var(--main-color) 6px) repeat scroll 0 0 rgba(0, 0, 0, 0);
    /*repeating-linear-gradient(45deg, #C6001C, #C6001C 10px, var(--main-color) 10px, var(--main-color) 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
repeating-linear-gradient(45deg, var(--main-color), #C6001C 10px, var(--main-color) 10px, var(--main-color) 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);*/
    height: 10px;
    float: left;
}

.progressbarRemaining {
    background-color: var(--main-color);
    height: 10px;
    float: right;
}

.progressbarFooter {
    width: 100%;
}

.progressbarConsumedSummary {
    float: left;
    margin-top: 5px;
    text-align: left;
}

.progressbarRemainingSummary {
    float: right;
    margin-top: 5px;
    text-align: right;
}

.progressbarPercentageValue {
    font-weight: bold;
    height: 30px;
}

.divOrdersdb {
    width: 95%;
}

/* Every page: the filter panel (table.formSearchEngine) is stretched, and so are the list grids
   (integration5.0.css gives them width: 95%, which stopped them short of the card's right edge,
   right where the page title's rule ends). Same width as the Dashboard blocks. */
html:not(.cr_layout_vertical) table.formSearchEngine {
    width: 100%;
    box-sizing: border-box;
}

html:not(.cr_layout_vertical) table#DataGrid_AirTicket,
html:not(.cr_layout_vertical) #DatagridInvoiceSupplier,
html:not(.cr_layout_vertical) #TR_Message #GridView_Messages,
html:not(.cr_layout_vertical) #DataGrid {
    width: 100%;
}

/* Horizontal menu only: full width of the card's content box, so the blocks share the left edge
   of the page title and leave the same gap on the right as on the left. At 95% they sat
   indented against the title above them. */
html:not(.cr_layout_vertical) .divOrdersdb {
    width: 100%;
}

.StatisticsDB {
    width: 100% !important;
    background: var(--background-sixth-degree);
    display: inline-block;
    box-shadow: 0 -1px 0 var(--background-third-degree),0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    margin-bottom: 20px;
}

.Look2Book_affilie {
    width: 100% !important;
    background: var(--background-sixth-degree);
    display: inline-block;
    border-top: 1px dotted var(--background-third-degree);
    border-bottom: 1px dotted var(--background-third-degree);
    box-shadow: 0 -1px 0 var(--background-third-degree), 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}

.divNbrMessages, .nbrMessages {
    background: var(--main-color);
    min-width: 38px;
    max-width: max-content;
    font-size: var(--main-font-size);
    min-height: 20px;
    -webkit-border-radius: 5px;
    color: white;
    font-weight: bold;
    margin-right: 10px;
    margin-top: -40px;
    line-height: 1.8;
    float: right;
    max-height: max-content !important;
}

.divShortCutMenu {
    display: table;
    width: 78%;
    margin-left: auto;
    margin-right: auto;
}

.divIconCalendar {
    display: inline;
}

    .divIconCalendar:before {
        content: "\f073";
        font-family: fontawesome;
        color: var(--button-color);
        font-size: calc(var(--main-font-size) + 3px );
        padding: 0 5px;
    }

div[id='::'][class='divIconCalendar'] {
    display: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
a#HyperLink_NewMsg:hover,
a#HyperLink_NewMsgTop:hover,
input#BT_Save:hover,
a#HyperLink_NewProduct:hover,
#HyperLink_New:hover,
#HyperLink_NewRoom:hover,
#Btn_ReplaceAll:hover,
input#Button_SupplierCleanAndTroubleshoot:hover,
input#Button_CleanAndTroubleshoot:hover,
input#Button_KickUsersTraffic:hover,
input#Button_KickUsersDBReplication:hover,
input#Button_KickUsersTrafficReplication:hover,
input#Button_KickUsersDBCiata:hover,
input#Button_AdminCache:hover,
input#Button_ResaCache:hover,
input#Button_KickUsersDB:hover,
.RecycleButton:hover,
input#Notes_Button_AddNote:hover,
input#Button_Canceled:hover,
input#Button_Confirmed:hover,
input#Button_PrintVoucher:hover,
input#Button_Delete:hover,
input#Button_Login:hover,
input#Button_Validate:hover,
input#Button_Return:hover,
#Button_Search:hover,
#Button_Calculate:hover,
#Button_CalculateLastYear:hover,
#Button_Export:hover,
#Button_Load:hover,
#Button_OrdersDashboardSearch:hover,
input#Button_Save:hover, input#Button_ConfirmXMLENV:hover,
input#Button_DeleteOrder:hover,
input#Button_AddOrder:hover,
input#Button_SaveDouble:hover,
input#Button_Subscribe:hover,
input#Button_Back:hover, input#Button_CancelXMLENV:hover,
input#SendSMS1_Button_Send:hover,
input#Button_Send:hover,
input#Button_Print:hover,
input#Button_Activate:hover,
input#Button_Alter:hover,
input#Button_DoOneWebservicex:hover,
input#Button_Import:hover,
input#Button_DetailsUsersDB:hover,
input#Button_DetailsUsersTraffic:hover,
input#Button_DetailsUsersDBCiata:hover,
input#Button_DetailsUsersDBAmadeus:hover,
input#Button_DetailsUsersDBCache:hover,
input[id*="DataRepeater_Pools_"]:hover,
#Button_InvoicingAllTicket:hover,
input#Button_RoomingList:hover,
a[id^=HyperLink_New_]:hover,
a#HyperLink_NewAIR:hover,
a#HyperLink_ManualAIR:hover,
#Button_Preview:hover,
#Button_Select:hover,
#Button_AllHotelAllotment:hover,
#Button_CancelConfirmation:hover,
#Button_Generate:hover,
#Button_Desactivate:hover,
#HyperLink_NewHotel_1:hover,
#HyperLink_NewHotel_2:hover,
#HyperLink_NewPNR:hover,
#HyperLink_NewProduct_1:hover,
#HyperLink_NewProduct_2:hover,
#Button_SaveOneWay:hover,
#Button_SaveTwoWay:hover,
#Button_Affect:hover,
#Button_StartBook:hover,
#Button_UpdateRateFXB:hover,
#Button_UpdateRateFXP:hover,
.tourCode:hover,
.cr_Button:hover,
#Button_Cancel:hover,
#Button_SaveAirData:hover,
#Button_Invoice:hover,
#Button_Pass:hover,
#Button_CheckBook:hover,
#Button_Proceeded:hover,
#Button_Consumed:hover,
#Button_Closed:hover,
#Button_SendToHotel:hover,
#Button_Verified:hover,
#Button_AddAccompte:hover,
#Button_Revalidate:hover,
#Button_Assign:hover,
#Notes_Button_SendSMS:hover,
#Button_AffectedPayment:hover,
#Button_Alter_Affiliate_In_Charge:hover,
#Button_Execute:hover,
#Button_ClearExecute:hover,
#Button_SavePNR:hover,
#Button_print:hover,
#Button_RoomingList_ClientsInHouse:hover,
#Button_AddDeposit:hover,
#Button_GenerateContract:hover,
.bulk_btn:hover {
    background-color: var(--hover-color) !important;
}

.answer_btnMsg:hover,
.delete_btnMsg:hover {
    background-color: var(--main-color) !important;
}

.iFrameB2B {
    width: 100%;
    margin: 0 auto;
    display: block;
}

.footerStats {
    color: transparent;
}

.hbRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #741B47;
}

.gtaRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #274E13;
}


.dotwRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #073763;
}

.aitRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #1eade3;
}

.tbRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #F8B323;
}

.lohRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #e31e3e;
}

.tgxRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #6eed1f;
}

.lightresaRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #85ea2d;
}

.cyberesaRoom {
    float: left;
    top: -2px;
    left: -1px;
    /*position: relative;*/
    color: #f7895e;
}

.floatCultureLeft {
    float: left;
}

.legendSupplier {
    margin-right: 10px;
    font-size: calc(var(--main-font-size) - 2px );
}

.floatCultureRight {
    float: right !important;
}

.display {
    display: flex;
    vertical-align: middle;
}

.infos_user .shortcutdb_container {
    width: auto !important;
    height: auto;
    border: 0px;
}

.infos_user .shortcutdb:before {
    color: White;
}

.infos_user .divNbrMessages, .nbrMessages {
    -webkit-animation: 1s blinkNbrMsgHeader step-end infinite;
    -moz-animation: 1s blinkNbrMsgHeader step-end infinite;
    -o-animation: 1s blinkNbrMsgHeader step-end infinite;
    animation: 1s blinkNbrMsgHeader step-end infinite;
    margin-left: 19px;
    margin-right: 0px;
    background: white;
    color: var(--third-color) !important;
    position: absolute;
}

@-webkit-keyframes blinkNbrMsgHeader {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: var(--main-color);
        background: white;
    }
}

@-moz-keyframes blinkNbrMsgHeader {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: var(--main-color);
        background: white;
    }
}

@-o-keyframes blinkNbrMsgHeader {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: var(--main-color);
        background: white;
    }
}

@keyframes blinkNbrMsgHeader {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: var(--main-color);
        background: white;
    }
}



.infos_user .shortcutdb_container:hover {
    background-color: transparent;
}

.divNbrMessages, .nbrMessages {
    -webkit-animation: 1s blinkNbrMessages step-end infinite;
    -moz-animation: 1s blinkNbrMessages step-end infinite;
    -o-animation: 1s blinkNbrMessages step-end infinite;
    animation: 1s blinkNbrMessages step-end infinite;
}

@-webkit-keyframes blinkNbrMessages {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: white;
        background: var(--main-color);
    }
}

@-moz-keyframes blinkNbrMessages {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: white;
        background: var(--main-color);
    }
}

@-o-keyframes blinkNbrMessages {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: white;
        background: var(--main-color);
    }
}

@keyframes blinkNbrMessages {
    from, to {
        color: transparent;
        background: transparent;
    }

    50% {
        color: white;
        background: var(--main-color);
    }
}

.logout:before {
    content: "\f08b";
    font-family: fontawesome;
    color: var(--menu-color);
    font-size: calc(var(--main-font-size) + 7px );
    margin-right: 5px;
}

.sidebarright:before {
    content: "\f101";
    font-family: fontawesome;
    color: var(--menu-color);
    font-size: calc(var(--main-font-size) + 7px );
    margin-right: 5px;
}

.sidebarleft:before {
    content: "\f100";
    font-family: fontawesome;
    color: var(--menu-color);
    font-size: calc(var(--main-font-size) + 7px );
    margin-right: 12px;
}

.cr_utilisateur, .cr_logout, .cr_message, .cr_horloge, .cr_session, .cr_footer_version div, .header_identification {
    display: table-cell;
    vertical-align: middle;
}

.cr_utilisateur, .cr_logout, .cr_message, .cr_horloge, .cr_session {
    text-align: right;
    width: inherit;
}

.infos_user, .cr_footer_version {
    display: table;
    width: 100%;
}


.cr_menu_IconResp, #checkbox_menu {
    display: none;
    margin: 4px;
}

#menu_Title {
    color: var(--menu-color) !important;
    display: none;
}

.cr_menu_IconResp:before {
    content: "\f03a";
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 14px );
    color: var(--menu-color);
}


.alignCultureLeft {
    text-align: left;
}

.alignCultureRight {
    text-align: right;
}

.cnx_login .cr_version {
    float: none !important;
}

a[href='#header_mainMenu_SkipLink'], .cr_footer_imgwait {
    display: none;
}

.cnx_login .tableIdentification {
    display: table;
    height: 100%;
    margin: auto;
}

.cnx_login .cellIdentification {
    display: table-cell;
    vertical-align: middle;
}

.cr_Button {
    background-color: #e49c40 !important; /* Old browsers */
    background-color: -moz-linear-gradient(top, #e49c40 0%, #e49c40 100%) !important; /* FF3.6-15 */
    background-color: -webkit-linear-gradient(top, #e49c40 0%,#e49c40 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background-color: linear-gradient(to bottom, #e49c40 0%,#e49c40 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e49c40', endColorstr='#e49c40',GradientType=0 ) !important; /* IE6-9 */
    color: #fff;
    margin: 0 auto;
    padding: 6px 8px !important;
    border: 0 !important;
    width: auto !important;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: calc(var(--main-font-size) + 2px ) !important;
    height: auto !important;
    font-weight: 300 !important;
    text-decoration: none;
    text-transform: uppercase;
    padding-right: 20px !important;
    background: url(../images/right_btn.png);
    background-repeat: no-repeat;
    background-position: right -7px center;
}

.tip-panel {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    background-color: rgb(255 165 0 / 15%);
    border: 1px solid orange;
    border-radius: 8px;
    width: 51%;
    border-width: 0px 0 0 5px;
    font-family: Arial, sans-serif;
    color: #cc8400;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.tip-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.tip-panel .tip-icon:before {
    content: "\f0eb";
    font-family: fontawesome;
    font-weight: 900;
    font-size: calc(var(--main-font-size) + 4px );
    color: #cc8400;
}

.tip-panel .tip-icon {
    width: 15px;
}

.tip-panel a {
    color: #1b5e20;
    text-decoration: none;
    font-weight: bold;
}

.tip-panel a:hover {
    text-decoration: underline;
}

.bgGreen {
    background-color: #00FF21;
}

.bgYellow {
    background-color: #FFFB32;
}

.bgOrange {
    background-color: #FF6A00;
}

.bgRed {
    background-color: #FF0000;
}

.cr_link4 {
    background: rgba(255,235,59,.3) !important;
    border: 1px solid #B7A400 !important;
    color: #B7A400 !important;
    font-size: var(--main-font-size) !important;
    font-weight: 400 !important;
}

    #Label_Periods_Alert.cr_link4:before,
    .cr_link4.alert:before {
        content: "\f0eb";
        font-family: fontawesome;
        padding: 0 5px;
        font-size: calc(var(--main-font-size) + 4px );
    }

.cr_linkMessage:before {
    content: "\f0eb";
    font-family: fontawesome;
    padding: 0 5px;
    font-size: calc(var(--main-font-size) + 4px );
    color: var(--main-color) !important;
}

.cr_linkMessageUrgent:before {
    content: "\f071";
    font-family: fontawesome;
    padding: 0 5px;
    font-size: calc(var(--main-font-size) + 4px );
    color: var(--main-color) !important;
}

.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
    top: 3px !important;
}

.icon-times-circle:before {
    content: '\f057';
    font-size: calc(var(--main-font-size) + 4px );
    color: #545454;
    font-family: fontawesome;
    font-style: normal !important;
    padding-right: 5px;
}

.icon-fa-check:before {
    content: '\f00c';
    font-size: calc(var(--main-font-size) + 4px );
    color: #545454;
    font-family: fontawesome;
    font-style: normal !important;
    padding-right: 5px;
}

.cr-bnrv1 {
    vertical-align: top;
    padding-top: 136px;
    width: 0px;
}

.cr-bnrleft {
    position: fixed;
    left: 15px;
}

.cr-bnrright {
    position: fixed;
    right: 15px;
}

.tdLook2Book {
    width: 33%;
    text-align: center;
}

.labelLook2Book {
    font-size: calc(var(--main-font-size) + 1px );
    padding-right: 5px;
}

.Look2BookValue {
    font-weight: bold;
    height: 30px;
    font-size: calc(var(--main-font-size) + 5px );
    color: var(--main-color);
}

.tabLook2Book {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.SearchsFlag:before {
    font-family: FontAwesome;
    content: "\f002";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.CAFlag:before {
    font-family: FontAwesome;
    content: "\f155";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.PaymentFlag:before {
    font-family: FontAwesome;
    content: "\f0d6";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.TempPaymentFlag:before {
    font-family: FontAwesome;
    content: "\e528";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.BookingFlag:before {
    font-family: FontAwesome;
    content: "\f07a";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.ConversionRateFlag:before {
    font-family: FontAwesome;
    content: "\f295";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.Look2bookFlag:before {
    font-family: FontAwesome;
    content: "\f140";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.PrepaiementFlag:before {
    font-family: FontAwesome;
    content: "\f15c";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.SelectionFlag:before {
    font-family: FontAwesome;
    content: "\f14a";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.AvgResponseTimeFlag:before {
    font-family: FontAwesome;
    content: "\f017";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.SearchsFlag:before {
    font-family: FontAwesome;
    content: "\f252";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.OkFlag:before {
    font-family: FontAwesome;
    content: "\f164";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.NokFlag:before {
    font-family: FontAwesome;
    content: "\f165";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.B2BCnxFlag:before {
    font-family: FontAwesome;
    content: "\f1ad";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.B2CCnxFlag:before {
    font-family: FontAwesome;
    content: "\f007";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.MaxDBCnxFlag:before {
    font-family: FontAwesome;
    content: "\f1c0";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.Bottom:before {
    font-family: FontAwesome;
    content: "\f103";
    font-size: calc(var(--main-font-size) + 13px );
    display: inline-block;
    color: var(--font-color);
}

.Top:before {
    font-family: FontAwesome;
    content: "\f102";
    font-size: calc(var(--main-font-size) + 13px );
    display: inline-block;
    color: var(--font-color);
}

.GlobalStateFlag:before {
    font-family: FontAwesome;
    content: "\f058";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.Link:after {
    font-family: FontAwesome;
    content: "\f08e";
    font-size: calc(var(--main-font-size) + 3px );
    display: inline-block;
    color: var(--main-color);
    padding-left: 6px;
}

.CheckINFlag:before {
    font-family: FontAwesome;
    content: "\f364";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.NRFIcon:before {
    font-family: FontAwesome;
    content: "\f023";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.CheckOUTFlag:before {
    font-family: FontAwesome;
    content: "\f08b";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.INHouseFlag:before {
    font-family: FontAwesome;
    content: "\f0ab";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.label_period {
    font-weight: bold;
    font-size: calc(var(--main-font-size) - 4px );
}

.table_container {
    background-color: var(--background-sixth-degree);
    height: 100% !important;
    width: 94%;
    margin: 0px 15px !important;
    position: absolute;
    overflow-x: auto;
}

.CurrentAllotments {
    border-right: var(--font-color) 1px solid;
    padding-right: 15px;
    border-top: var(--font-color) 1px solid;
    padding-left: 15px;
    padding-bottom: 15px;
    border-left: var(--font-color) 1px solid;
    padding-top: 15px;
    border-bottom: var(--font-color) 1px solid;
    background-color: var(--background-second-degree)
}

.DisplayMessage {
    FONT-SIZE: xx-small;
    BORDER-LEFT-COLOR: var(--background-fourth-degree);
    BORDER-BOTTOM-COLOR: var(--background-fourth-degree);
    COLOR: var(--font-color);
    BORDER-TOP-COLOR: var(--background-fourth-degree);
    FONT-FAMILY: Verdana;
    border: 1px;
    BORDER-RIGHT-COLOR: var(--background-fourth-degree);
    border-color: var(--background-fourth-degree);
}

.DisplayMessage_td {
    background-color: var(--background-fourth-degree);
    color: white;
}

.Label_ConfirmSaveMessage {
    color: var(--font-color);
    font: bold !important;
}

.AlertKPI {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 7px );
    padding-right: 5px;
    color: var(--Alert-color);
}

.OkKPI {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 7px );
    padding-right: 5px;
    color: var(--OK-Alert-color);
}

.AlertIntermediateKPI {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 7px );
    padding-right: 5px;
    color: var(--AlertIntermediate-color);
}

.dot {
    width: 13px;
    height: 13px;
    display: inline-block;
    border-radius: 50%;
    color: var(--Alert-color);
    background: var(--Alert-color);
    position: relative;
    -ms-transform: none;
    transform: scale3d(1.5, 1.5, 1.5);
    margin-right: 5px;
}

.dot:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--Alert-color);
    animation: pulse 1s infinite;
    opacity: 1;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.OK_dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    color: var(--OK-Alert-color);
    background: var(--OK-Alert-color);
    position: relative;
    -ms-transform: none;
    transform: scale3d(1.5, 1.5, 1.5);
    margin-right: 5px;
}

.OK_dot:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--OK-Alert-color);
    animation: pulse 1s infinite;
    opacity: 1;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.Warning_dot {
    width: 13px;
    height: 13px;
    display: inline-block;
    border-radius: 50%;
    color: var(--AlertIntermediate-color);
    background: var(--AlertIntermediate-color);
    position: relative;
    -ms-transform: none;
    transform: scale3d(1.5, 1.5, 1.5);
    margin-right: 5px;
}

.Warning_dot:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--AlertIntermediate-color);
    animation: pulse 1s infinite;
    opacity: 1;
    border-radius: 50%;
    top: 0;
    left: 0;
}

@keyframes pulse {
    0% {
        opacity: 0.5
    }

    70% {
        opacity: 0;
        transform: scale(2.5)
    }

    100% {
        opacity: 0
    }
}

.LabelAlertKPI {
    font-weight: bold;
    font-size: calc(var(--main-font-size) + 1px );
    padding-right: 5px;
    color: var(--Alert-color);
}

.AlertMaxDBCnxFlag:before {
    font-family: FontAwesome;
    content: "\f1c0";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertAvgResponseTimeFlag:before {
    font-family: FontAwesome;
    content: "\f252";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertSearchsFlag:before {
    font-family: FontAwesome;
    content: "\f252";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertIntermediateAvgResponseTimeFlag:before {
    font-family: FontAwesome;
    content: "\f252";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--AlertIntermediate-color);
}

.AlertLook2bookFlag:before {
    font-family: FontAwesome;
    content: "\f140";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertConversionRateFlag:before {
    font-family: FontAwesome;
    content: "\f295";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertNokFlag:before {
    font-family: FontAwesome;
    content: "\f165";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertGlobalStateFlag:before {
    font-family: FontAwesome;
    content: "\f06a";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertLinkKPI:after {
    font-family: FontAwesome;
    font-weight: 400;
    content: "\e12d";
    font-size: calc(var(--main-font-size) + 3px );
    display: inline-block;
    color: var(--Alert-color);
    padding-left: 5px;
}

.OkLinkKPI:after {
    font-family: FontAwesome;
    font-weight: 400;
    content: "\e12d";
    font-size: calc(var(--main-font-size) + 3px );
    display: inline-block;
    color: var(--main-color);
    padding-left: 5px;
}

.AlertLink:after {
    font-family: FontAwesome;
    font-weight: bold;
    content: "\f08e";
    font-size: calc(var(--main-font-size) + 3px );
    display: inline-block;
    color: var(--Alert-color);
    padding-left: 5px;
}

.OkLink:after {
    font-family: FontAwesome;
    font-weight: bold;
    content: "\f08e";
    font-size: calc(var(--main-font-size) + 3px );
    display: inline-block;
    color: var(--main-color);
    padding-left: 5px;
}

.AlertIntermediateLink:after {
    font-family: FontAwesome;
    font-weight: bold;
    content: "\f08e";
    font-size: calc(var(--main-font-size) + 3px );
    display: inline-block;
    color: var(--AlertIntermediate-color);
    padding-left: 5px;
}

.tooltip:after {
    font-family: FontAwesome;
    content: "\f05a";
    margin-left: 5px;
    color: var(--main-color)
}

.tooltip {
    position: relative;
    display: inline-block;
}
    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 225px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        /* Fade in tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }
        /* Tooltip arrow */
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

.CreditCardFlag:before {
    font-family: FontAwesome;
    content: "\f09d";
    display: inline-block;
    color: var(--main-color);
    font-size: calc(var(--main-font-size) + 28px );
}

.add_deposit_header {
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: bold;
    color: var(--main-color);
    padding-right: 5px;
}

.CancellationPercentFlag:before {
    font-family: FontAwesome;
    content: "\f05e";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.AvailableFlag:before {
    font-family: FontAwesome;
    content: "\f00e";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.NotAvailableFlag:before {
    font-family: FontAwesome;
    content: "\f010";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.SearchFlag:before {
    font-family: FontAwesome;
    content: "\f002";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.AlertAvailableFlag:before {
    font-family: FontAwesome;
    content: "\f00e";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertCancellationFlag:before {
    font-family: FontAwesome;
    content: "\f05e";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.AlertNotAvailableFlag:before {
    font-family: FontAwesome;
    content: "\f010";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.Airlines_OfficeId {
    height: 8px;
}

.Airlines_DropDownList_OfficeIds {
    height: 8px;
    width: 181px;
}

.Airlines_Label_state {
    height: 8px;
}

.Airlines_CheckBox_State {
    width: 429px;
}

a.copy_btn1,
a.duplicate_btn1,
a.desactive_btn1,
a.update_btn1,
a.condition_btn1,
a.aboutus_btn1,
a.privacy_btn1,
a.connexion_btn1,
a.connexion_btn2,
a.credit_btn1,
a.paid_btn1,
a.payment_btn1,
a.active_btn1,
a.save_btn1,
a.cancel_btn1 {
    text-decoration: none;
}

.SearchFromCacheFlag:before {
    font-family: FontAwesome;
    content: "\e18b";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.TimeReducedPercentFlag:before {
    font-family: FontAwesome;
    content: "\e29e";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.TimeReducedFlag:before {
    font-family: FontAwesome;
    content: "\e41b";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.headerUn {
    color: var(--main-color) !important;
    font-size: calc(var(--main-font-size) + 18px );
    font-weight: bold !important;
    margin-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
    border-bottom: solid 1px #D8D8D8;
    display: block;
    padding-bottom: 5px;
}

* {
    font-family: 'Plus Jakarta Sans', Trim, sans-serif !important;
}

body {
    font-size: var(--main-font-size);
    line-height: 22px;
    height:100% !important;
}

.GridHeader {
    border-color: var(--main-color) !important;
}

.RMSIncreaseFlag:before {
    font-family: FontAwesomeSolid;
    content: "\f14c";
    margin-right: 5px;
    font-size: calc(var(--main-font-size) + 6px );
    display: inline-block;
    color: forestgreen;
}

.RMSDecreaseFlag:before {
    font-family: FontAwesomeSolid;
    content: "\e262";
    margin-right: 5px;
    font-size: calc(var(--main-font-size) + 6px );
    display: inline-block;
    color: red;
}

.BookingNB_RMSFlag:after {
    font-family: FontAwesome;
    content: "\e5d9";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.RMSIncreaseTurnoverFlag:after {
    font-family: FontAwesome;
    content: "\f14c";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.RMSDecreaseTurnoverFlag:after {
    font-family: FontAwesome;
    content: "\e262";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.portal-loader {
    width: 3.8em;
    padding: 6px 11px !important;
    width: 100% !important;
    box-shadow: 1px 4px 0px 0px var(--background-fifth-degree);
    height: 30px !important;
    background-color: var(--hover-color);
    float: inline-start;
}

#SearchLoader {
    width: 126.172px !important;
}

/* Loader of Button_CalculateLastYear (ui/business/Billing_fees.aspx). .portal-loader forces
   width:100%, so a loader with no width of its own stretches across its whole container - in
   that page a cell spanning both result columns, which turned the spinner into a bar the width
   of the table. Pinned to the width of the button it stands in for, the way #SearchLoader and
   #ValidateLoader are, and carrying the same 10px gap the button has, so nothing shifts when
   the spinner takes its place.
   This one is the second button of its row, so it also has to drop the float of .portal-loader :
   floated, it would leave the flow and land to the left of the button still showing beside it,
   swapping the two. inline-flex keeps it on the line - a plain flex box would take a line of
   its own - exactly where the button it replaces was standing. */
#SearchLoaderLastYear {
    width: 138px !important;
    margin-left: 10px;
    float: none !important;
    display: inline-flex !important;
    vertical-align: middle;
}

/* The two result cells of ui/business/Billing_fees.aspx - year N and year N-1.
   A cell whose calculation has not been run is not rendered at all (the code behind sets its
   Visible), so the row holds either one cell or two, and these three rules cover both shapes
   without the code behind having to compute anything :
   - two cells  : equal halves, and a gutter between them - "+" only matches a second cell.
   - one cell   : ":only-child" drops the half, the block sizes itself and starts at the left
                  margin instead of holding the width of a block that is not there. */
.billingFeesCell {
    vertical-align: top;
    width: 50%;
}

.billingFeesCell:only-child {
    width: auto;
}

.billingFeesCell + .billingFeesCell {
    padding-left: 30px;
}

/* Booking fees exchange rates (ui/business/Billing_fees.aspx) : one pair per line, read as a list
   whatever the number of currencies. */
.billingFeesRates {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
}

.billingFeesRate {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin: 3px 0;
}

/* The pair captions do not have the same length - "DZD > EUR" against "DT > EUR" - so they are
   given a width of their own, which lines the fields up under one another. */
.billingFeesRatePair {
    display: inline-block;
    min-width: 90px;
    margin-right: 8px;
}

/* Says the rate is not the configured one. Hidden with display, so an unmodified pair does not
   keep the width of a note nobody sees and the pairs stay next to one another. */
.billingFeesRateModified {
    margin-left: 8px;
    color: #b36b00;
    font-style: italic;
}

#ValidateLoader {
    width: 87.3438px !important;
}

#SelectLoader {
    width: 232.188px !important;
}

.g__loader {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

[class^=g__loader__dot] {
    flex: auto;
    border-radius: 100%;
    padding-bottom: 30%;
    margin-right: 3%;
    margin-left: 3%;
    background-color: #630005;
    font-family: var(--sso-text-body-fontStack);
    animation: gloader 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0.5;
}

.loader__span {
    width: 45px;
    font-size: calc(var(--main-font-size) + 1px ) !important;
}

.loader__Search {
    width: 37px;
    font-size: calc(var(--main-font-size) + 1px ) !important;
}

@keyframes gloader {
    0% {
        transform: scale(0.8);
        opacity: 0.3
    }

    10% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(0.8);
        opacity: 0.3
    }
}

.g__loader__dot1 {
    animation-delay: 0.3s;
}

.g__loader__dot2 {
    animation-delay: 0.5s;
}

.g__loader__dot3 {
    animation-delay: 1s;
}

.newCancel {
    display: flex;
    justify-content: right;
    margin-bottom: 10px;
    margin-right: 5px;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    overflow-x: auto;
    display: grid;
}

.tableIdentification.cellIdentification {
    grid-template-columns: 50px 1fr;
}

.page-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
        "aside nav"
        "aside main";
    transition: all 0.2s;
    background-color: var(--main-color);
}

#myBtn {
    position: fixed;
    bottom: 25px;
    height: 40px;
    width: 50px;
    outline: 0;
/*    border: 1px solid;*/
    box-shadow: 2px 2px 5px 0 rgba(45, 45, 45, 0.5);
    text-align: center;
    overflow: hidden;
    pointer-events: all;
    cursor: pointer;
    line-height: normal;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: FontAwesome;
    content: "\f103";
    font-size: calc(var(--main-font-size) + 13px );
    color: var(--font-color);
    display: inline-block;
    bottom: 45px;
    right: 60px;
}

@media (max-width: 1000px) {
    #myBtn {
        right: 10px;
    }
}

/* Horizontal menu only, hotel report page: the radio tabs (floated left) and the panel next to
   them (result_reporting_hotel) stopped at about two thirds of the card. The container becomes
   a flex row (the tabs' float is ignored) and the panel takes all the remaining width, so the
   block spans the card like the Dashboard blocks. */
html:not(.cr_layout_vertical) #divReporting:has(> .result_reporting_hotel) {
    display: flex;
    align-items: flex-start;
    /* the global #divReporting rule shrink-wraps it (width: max-content), which is what stopped
       the block at two thirds of the card */
    width: 100%;
}

html:not(.cr_layout_vertical) #divReporting > .result_reporting_hotel {
    flex: 1 1 auto;
}

/* The container (sixth degree) and the result panel (seventh degree) are two shades of grey: where
   the panel stops, the other shade shows as a second block. Same shade for the container. */
html:not(.cr_layout_vertical) #divReporting:has(> .result_reporting_hotel) {
    background: var(--background-seventh-degree);
    border-radius: 15px;
}

/* AirTicket report: a <br> sits right before the result panel; next to the floated tabs it
   pushed the panel one line (about 20px) below the tabs. */
html:not(.cr_layout_vertical) br + table.result_reporting {
    margin-top: -20px;
}

/* Invoice, Sales and Payment reports: same global rule as above (#div_reporting is a flex row
   shrink-wrapped by width: max-content). Full width, and its result blocks (div#divReport*, or
   the result table itself on Payment) take what the tabs leave. #divReportTurnover was also
   capped at 50% by the rule below. */
html:not(.cr_layout_vertical) #div_reporting {
    width: 100%;
    align-items: flex-start;
}

html:not(.cr_layout_vertical) #div_reporting > div,
html:not(.cr_layout_vertical) #div_reporting > table.result_reporting {
    flex: 1 1 auto;
    width: auto;
}

/* Same case on the other report pages: the radio tabs float left and the result panel
   (table.result_reporting) shrank to its content next to them. As a flex container the table
   is a block-level box that fills the width left beside the float, like result_reporting_hotel
   already does. Tables with width="100%" (AirTicket report) were pushed BELOW the floated tabs,
   since a 100%-wide table cannot sit next to a float: width is released so they sit beside the
   tabs and fill the rest, like the others. */
html:not(.cr_layout_vertical) table.result_reporting:not(.result_reporting_hotel) {
    display: flex;
    width: auto;
    /* The height="220px" attribute (Sales, Invoice...) was a fixed height once the table became a
       flex box, instead of the minimum it is on a table: 6 options need more than 220px, so the
       last ones overflowed the grey panel. Height follows the content, with the attribute value
       as a floor, plus some air under the last option. */
    height: auto;
    min-height: 220px;
    padding-bottom: 15px;
}

/* Horizontal menu only, hotel report filter: the fields add up to more than the card (two
   300px selects, a 343px select2, and fixed 410/320/320px cells for the payment row), which
   widened the whole page and showed a horizontal scrollbar. Fields are capped and the fixed cell
   widths are released; nothing is removed. The inline width="300px" is beaten by max-width. */
html:not(.cr_layout_vertical) #divHotelfilter select,
html:not(.cr_layout_vertical) #divHotelfilter input[type="text"],
html:not(.cr_layout_vertical) #divHotelfilter .select2-container,
html:not(.cr_layout_vertical) #divHotelfilter .tdAffiliateSourceValues .select2 {
    max-width: 220px !important;
}

html:not(.cr_layout_vertical) #divHotelfilter td[width] {
    width: auto;
}

/* Same cap on the filter panel of every page (the other pages with a destination/city line:
   reservation lists, product/package/car reports...), for the same reason: wide fields plus a
   city list that reloads made the panel overflow the card and start a horizontal scroll. Fields
   that are already narrower are not affected. */
html:not(.cr_layout_vertical) table.formSearchEngine select,
html:not(.cr_layout_vertical) table.formSearchEngine input[type="text"],
html:not(.cr_layout_vertical) table.formSearchEngine .select2-container {
    max-width: 220px !important;
}

html:not(.cr_layout_vertical) table.formSearchEngine td[width] {
    width: auto;
}

/* Horizontal menu only: at 60px from the edge the scroll button sat on top of the white card
   (and of the content at its right edge). Pushed toward the window edge, into the gutter. */
html:not(.cr_layout_vertical) #myBtn {
    right: 8px;
}

#table_container > .navbar-overlay, #table_container > .navbar {
    margin: -30px -8px 0;
}

.navbar-overlay {
    height: 30px !important;
    margin-top: -30px;
    width: 100%;
    display: flex;
}

.navbar-inverse {
    background: var(--background-first-degree);
    height: 50px !important;
    border-radius: 15px 15px 0 0;
    width: 100%;
    display: flex;
    border-bottom: solid 1px #d3d3d3;
    justify-content: flex-end;
    position: absolute;
    right: 0px;
}

.navbar-inverse > nav {
    display: flex;
    justify-content: space-around;
    padding-left: 1px;
    width: 1700px;
}

.nav-links {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.profile-icons {
    display: flex;
}

.profile-icons span {
    font-size: calc(var(--main-font-size) + 2px ) !important;
    display: flex;
    justify-content: center;
    font: icon;
    color:var(--font-color);
}

.profile-icons a {
    color: #fff;
    text-decoration: none;
    font-size: calc(var(--main-font-size) + 2px );
    margin-left: 9px;
    transition: color 0.3s ease;
}

.profile-icons a:hover {
    color: #ffc107;
}

#TopBottomWrapper {
    display: block;
    position: fixed;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    font-family: sans-serif;
    top: 0;
    left: 0;
    z-index: 999;
}

#profilIcon:before {
    font-size: calc(var(--main-font-size) + 8px );
    content: "\f007";
    font-family: fontawesomelight;
    display: flex;
    justify-content: center;
    color: var(--font-color);
    padding-top:11px;
}

#profilIcon:hover::before {
    color: var(--hover-color) !important;
}

.profile:before {
    font-size: calc(var(--main-font-size) + 3px );
    content: "\f007";
    font-family: fontawesome;
}

.logoutIcon:before {
    font-size: calc(var(--main-font-size) + 3px );
    content: "\f08b";
    font-family: fontawesome;
}

.action #profilIcon {
    width: 20px;
    height: 30px;
    cursor: pointer;
    padding-top: 10px;
    padding-right: 20px;
}

.Notif:before {
    content: "\f0e0";
    font-size: calc(var(--main-font-size) + 8px );
    font-family: fontawesomelight;
    color: var(--font-color);
    padding-right: 10px;
    padding-top:8px;
    display: block;
}

.Notif:hover::before {
    color: var(--hover-color);
}

.Notif {
    padding-top: 5px;
}

#header_NbrMessages {
    min-width: 20px !important;
    min-height: 15px !important;
    right: 5px !important;
    margin-top: -30px;
    position: relative !important;
    max-height: max-content !important;
    font-size: calc(var(--main-font-size) - 4px ) !important;
    font-weight: bold;
    align-items: center;
}

.nbrMessages:hover {
    color: white !important;
}

.date {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding-top: 5px;
}

.time {
    padding-left: 5px !important;
}

.search-container {
    display: flex;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    padding: 5px;
    width: 50%;
    margin-left: 20px;
}

#search-input {
    flex: 1;
    border: none;
    padding: 10px;
    font-size: calc(var(--main-font-size) + 4px );
}

.search-button {
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
}

.search-button::before {
    content: "\f002";
    font-family: fontawesome;
    color: black;
}

.page-content {
    background-color: var(--background-first-degree);
    border-radius: 15px;
    padding: 20px !important;
    border: solid 1px #d7d4d4;
    box-shadow: 0 -1px 0 var(--background-third-degree);
}

.infos2 {
    font-family: Trim, sans-serif;
    font-size: var(--main-font-size);
    font-weight: normal;
    color: var(--menu-color);
    text-decoration: none;
    margin-right: -8px
}

.infos3 {
    font-family: Trim, sans-serif;
    font-size: var(--main-font-size);
    font-weight: normal;
    color: var(--menu-color);
    text-decoration: none;
    margin-right: 20px
}

.invoice_container {
    background-color: var(--background-first-degree);
    border-radius: 15px;
    padding: 30px !important;
    width: 650px !important;
    padding: 15px;
}

.divContent_invoice {
    background-color: var(--background-sixth-degree);
    border-radius: 15px;
    margin: 0px !important;
    padding: 15px;
    max-width: max-content;
    min-width: 650px !important;
}

.divContent {
    background-color: var(--background-sixth-degree);
    border-radius: 15px;
    margin: 0px !important;
    padding: 15px;
    box-shadow: 0 -1px 0 var(--background-third-degree);
    max-width: max-content;
    min-width: 650px !important;
}

.login {
    padding: 9px;
    color: var(--font-color);
}


.roomingList_container {
    background-color: var(--background-first-degree);
    border-radius: 15px;
    padding: 30px !important;
    border: solid 1px var(--background-sixth-degree);
    box-shadow: 0 -1px 0 var(--background-third-degree);
    width: 645px !important;
}

input#TextBox_FromDate, input#TextBox_ToDate {
    height: 30px !important;
    text-align: center;
}

input#TextBox_FromDate::-webkit-calendar-picker-indicator, input#TextBox_ToDate::-webkit-calendar-picker-indicator {
    display: none !important;
}

.CallingCode {
    display: flex;
    padding-top: 12px;
}

#div_reporting {
    background-color: var(--background-sixth-degree);
    display: flex;
    align-items: baseline;
}

.Label_Explication {
    font-weight: bold;
}

#divReporting, #div_reporting {
    display: flex;
    background-color: var(--background-sixth-degree);
    width: max-content;
}

#divReportTurnover{
    width:50%;
}

#ExpectedPrice:before {
    font-family: fontawesomesolid;
    content: "\f81d";
    padding-left: 5px;
    font-size: medium;
    color: #38761D;
}

.SoldWithLoss:before {
    font-family: fontawesomesolid;
    content: "\f0e7";
    padding-left: 5px;
    font-size: medium;
    color: #CC0000;
}

.EP_icon {
    background-color: #38761D;
}

#TD_IntervalInvoice {
    width: 100%;
}

.kbilist_icon:before {
    padding-top: 1px;
    padding-bottom: 5px;
    content: "\f05a";
    font-family: FontAwesome;
}

.Kpi_more {
    float: right;
    text-decoration: none;
    margin: 0 10px 10px 0;
    border-radius: 0px !important;
    color: var(--main-color) !important;
    font-size: calc(var(--main-font-size) + 6px );
    font-weight: bold;
    display: inline-block;
    display: block;
    padding-bottom: 5px;
    font-family: TrimBold;
}

#div_kpi{
    display:contents
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000000;
}

.custom-table td, .custom-table th {
    border: 1px solid #000000;
    padding: 5px;
}

.custom-table tr {
    height: 35px;
}

.grid-content {
    width: 80% !important;
}

.grid-content .input {
    width: 100%;
}

.custom-table tr:hover {
    background-color: transparent !important;
}

.input-text {
    width: 99%;
    border: none;
    outline: none;
}

.AlertTemp:before {
    font-family: FontAwesome;
    content: "\f06a";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.NokTemp:before {
    font-family: FontAwesome;
    content: "\f06a";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.NokBook:before {
    font-family: FontAwesome;
    content: "\f071";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.AlertBook:before {
    font-family: FontAwesome;
    content: "\f071";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--Alert-color);
}

.OkReponse:before {
    font-family: FontAwesome;
    content: "\e1cd";
    font-size: calc(var(--main-font-size) + 18px );
    display: inline-block;
    color: var(--main-color);
}

.icon-warning-health:before {
    content: '\f071';
    font-size: calc(var(--main-font-size) + 4px );
    color: red;
    font-family: fontawesome;
    font-style: normal !important;
    padding-right: 5px;
}

.icon-check-health:before {
    content: '\f00c';
    font-size: calc(var(--main-font-size) + 4px );
    color: green;
    font-family: fontawesome;
    font-style: normal !important;
    padding-right: 5px;
}

.table-style-health {
    width: 100%;
    border: 1px solid #7B7B7B;
    border-collapse: collapse;
    text-decoration: none;
}

.table-style-health th {
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Texte en blanc */
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border: 1px solid #7B7B7B;
}

.table-style-health td {
    padding: 5px;
    border: 1px solid #7B7B7B;
    text-align: center;
}

.table-style-health tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table-style-health tr:hover {
    background-color: #ddd;
}

#DataGrid-health .pagination {
    text-align: left;
}

.statuscolorRed-health {
    color: red;
}

.statuscolorGreen-health {
    color: green;
}

.Button_AddInterval {
    border: 0px !important;
}

.td-DropDownList {
    width: 12%;
}

.td-space {
    width: 50px;
}

.divApplicationName {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    display: block;
}

.widthApplicationName {
    width: 300px;
}

.divEventInfo {
    width: 380px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.headerApplicationName {
    width: 300px;
}

.widthEventInfo {
    width: 380px;
}

.minWidthColumn {
    min-width: 200px;
}

/* TrafficAgentAI - BEGIN */

.AgentCommand {
    padding: 15px;
    display: flex;
}

.UserQuestion {
    color: var(--font-color);
    float: right;
    background-color: var(--dirtyWhite-color);
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 3px 0 var(--dirtyWhiteShadow-color);
    width: 80%;
    margin: 20px 10px 20px 0;
}

.AgentResponse {
    color: var(--font-color);
    float: left;
    background-color: var(--questioBackground-color);
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 3px 0 var(--background-sixth-degree);
    width: 98%;
    margin: 20px 10px 20px 0;
}

.UserIcon {
    font-family: FontAwesome !important;
    float: left;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: var(--main-font-size) !important;
    line-height: 1.4;
    color: var(--main-color);
    position: relative;
    margin-top: -31px;
    margin-left: -41px;
    background-color: var(--dirtyWhite-color);
}

.AgentIcon {
    font-family: FontAwesome !important;
    float: left;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: var(--main-font-size) !important;
    line-height: 1.4;
    color: var(--main-color);
    position: relative;
    margin-top: -31px;
    margin-left: -41px;
    background-color: var(--questioBackground-color);
}

.AgentIcon::before {
    content: "\f544";
}

.UserIcon::before {
    content: "\f007";
}

.command2 {
    font-family: Trim, sans-serif;
}

/* TrafficAgentAI - END */

.priority-textarea {
    width: 99%;
    height: 100px;
}

.cyberesaSuppliers-textarea {
    width: 99%;
    height: 200px;
}

.Label_CreationDate {
    font-size: 8px;
    color: black;
}

.validation-error {
    font-size: calc(var(--main-font-size) + 4px );
    color: var(--Alert-color);
    display: none;
}

.dotStateDesactivated {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    color: var(--disabled-color);
    background: var(--disabled-color);
    position: relative;
    -ms-transform: none;
    transform: none;
    margin-right: 5px;
}

.dotStateDesactivated:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--disabled-color);
    animation: pulse 1s infinite;
    opacity: 1;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.tdAffiliateSourceValues {
    height: 23px
}

.tdAffiliateSourceValues .select2 {
    width: 343px !important;
}

.tdAffiliateHB {
    height: 23px
}

.tdAffiliateHB .select2 {
    width: 343px !important;
}

.GridHeaderWebConfig {
    border-color: var(--main-color) !important;
    width: 20%;
}

.GridHeaderWebConfig, .GridHeaderWebConfig:hover {
    background-color: var(--main-color) !important;
    color: var(--menu-color);
}

.small-date {
    font-size: calc(var(--main-font-size) - 4px);
}

#div_tourecode .tip-panel {
    width: 800px;
}

.hiddenContainer {
    width: 0;
    height: 0;
    overflow: hidden;
}

#div_excludeCombinationInetiaire .tip-panel {
    width: 800px;
}

.AgentAIIcon::before {
    padding-top: 1px;
    padding-bottom: 10px;
    content: "\f544";
}

.qa-container {
    width: 95%;
    max-width: 1600px;
    margin: 10px auto;
    font-family: Arial, sans-serif;
}

.message-container {
    margin: 20px;
}


/* StatusPage
   The layout tables were pinned to 1200px and the grids to 500px/1200px. As soon as the
   content area (#table_container, 94%) got narrower, the whole block overflowed and a
   horizontal scrollbar showed up across the page. The layout is fluid now, and long
   content (supplier URLs, monitor messages) wraps instead of widening its column.
   The cap matches the real usable width of #table_container (94% minus the margins, the
   cellspacing and the padding of .page-content), around 1300px on a standard screen; it
   only acts as a readability guard on very wide screens.
----------------------------------------------------------*/

.StatusPageLayout {
    width: 100%;
    max-width: 1300px;
    /* fixed: columns share the available width (two panels = 50/50) instead of being
       dictated by the longest content. */
    table-layout: fixed;
}

/* Safety net: a grid that cannot shrink any further (small screen) scrolls inside its
   own block rather than scrolling the whole page. */
/* Horizontal menu only: the 1300px readability cap left the layout about 170px short of the
   card's right edge on a standard screen; it now follows the card's width. */
html:not(.cr_layout_vertical) .StatusPageLayout {
    max-width: none;
}

.StatusPageGridWrap {
    max-width: 100%;
    overflow-x: auto;
}

.ClassDatagridStatusPage {
    width: 100%;
}

    .ClassDatagridStatusPage td {
        /* URLs and base64 credentials have no natural break point */
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* input fields follow the width of their column */
    .ClassDatagridStatusPage input[type="text"],
    .ClassDatagridStatusPage input[type="password"] {
        box-sizing: border-box;
        max-width: 100%;
    }

/* CYBERESA suppliers: the per-column percentages are carried by the columns themselves
   (StatusPage.aspx), since with a fixed layout the header row sets the widths. */
#DataGridSuppliersStatus {
    table-layout: fixed;
}

/* API-OUT: the URL column takes the remaining space, response time and status are sized */
#DataGridEtatAPIsXMLOut {
    table-layout: fixed;
}

    #DataGridEtatAPIsXMLOut tr > td:nth-child(2) {
        width: 140px;
    }

    #DataGridEtatAPIsXMLOut tr > td:nth-child(3) {
        width: 60px;
    }

/* booking API REQ/RES blocks, github style code block with a hover toolbar */
.api-xml-toggle {
    display: inline-block;
    margin: 10px 0 4px 0;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

    .api-xml-toggle:hover {
        text-decoration: underline;
    }

.api-xml-wrapper {
    position: relative;
}

.api-xml-toolbar {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

.api-xml-wrapper:hover .api-xml-toolbar,
.api-xml-wrapper:focus-within .api-xml-toolbar {
    opacity: 1;
}

.api-xml-tag,
.api-xml-copy {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    background: #f7f7f7;
    color: #444444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
    text-decoration: none;
}

.api-xml-copy {
    cursor: pointer;
}

    .api-xml-copy:hover {
        background: #e0e0e0;
        color: #000000;
        text-decoration: none;
    }

.api-xml-block {
    margin: 0;
    padding: 8px 10px;
    /* same gray box as the htlww order context block */
    border: 1px solid #000000;
    border-radius: 4px;
    background: #EBEBEB;
    color: #222222;
    max-height: 600px;
    overflow: auto;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    /* keep the indentation : no wrapping, horizontal scroll instead */
    white-space: pre;
    word-break: normal;
    tab-size: 2;
}

    /* xml syntax colours : p = punctuation, t = tag, a = attribute name,
       v = attribute value, x = element text, c = comment / cdata */
    .api-xml-block .x-p {
        color: #0000cc;
    }

    .api-xml-block .x-t {
        color: #a31515;
    }

    .api-xml-block .x-a {
        color: #cc0000;
    }

    .api-xml-block .x-v {
        color: #0000ff;
    }

    .api-xml-block .x-x {
        color: #000000;
        font-weight: bold;
    }

    .api-xml-block .x-c {
        color: #008000;
        font-style: italic;
    }