/*@import url(myfonts.css);*/

textarea, span, text, a, div {
    border-radius: 13px;
}

button {
    border-radius: 13px;
}

input {
    border-radius: 13px;
}

select {
    border-radius: 13px;
}

input#Button_Return,
span#Label_NewOrders {
    display: inline-block !important;
}

hr {
    display: none !important;
}

span#Label_NewOrders,
div#divCurrentAllotments {
    padding-left: 10px !important;
    background: var(--background-sixth-degree);
    border: 0 !important;
}

.divOrderContext {
    overflow: auto;
    height: 300px;
    resize: both;
}

span#Label_InvoiceCustomer,
span#Label_InvoiceSupplier {
    margin: 10px !important;
}

input#BT_Save,
a#HyperLink_NewProduct,
a#HyperLink_Validate,
a#HyperLink_Canceled,
input#Button_Login,
input#Button_Validate,
#Button_Search,
#Button_Calculate,
#Button_CalculateLastYear,
#Button_Export,
#Button_Load,
#Button_OrdersDashboardSearch,
#Button_Execute,
#Button_ClearExecute,
input#Button_Save, input#Button_CreateXMLENV, input#Button_ConfirmXMLENV,
input#Button_DeleteOrder,
input#Button_AddOrder,
input#Button_SaveDouble,
input#Button_Subscribe,
input#SendSMS1_Button_Send,
input#Button_Send,
input#Button_Print,
input#Button_Alter,
#Button_InvoicingAllTicket,
input#Button_RoomingList,
a[id^=HyperLink_New_],
a#HyperLink_NewAIR,
a#HyperLink_ManualAIR,
input#Button_Delete,
input#Button_PrintVoucher,
input#Button_Confirmed,
input#Notes_Button_AddNote,
input#Button_SendCode,
#HyperLink_New,
#HyperLink_NewRoom,
#Button_Preview,
#Button_Select,
#Button_AllHotelAllotment,
#Button_Generate,
#HyperLink_NewHotel_1,
#HyperLink_NewHotel_2,
#HyperLink_NewRegion_1,
#HyperLink_NewPNR,
#HyperLink_NewProduct_1,
#HyperLink_NewProduct_2,
#HyperLink_NewOffer,
#HyperLink_NewCarCategory,
#HyperLink_NewTransfer,
#Button_SaveOneWay,
#Button_SaveTwoWay,
#Button_Affect,
#Button_StartBook,
#Button_UpdateRateFXB,
#Button_UpdateRateFXP,
.tourCode,
#Button_SaveAirData,
#Button_Invoice,
#Button_CheckBook,
#Button_Proceeded,
#Button_Consumed,
#Button_Verified,
#Button_SendToHotel,
#Button_AddAccompte,
#Button_Revalidate,
#Button_Assign,
#Notes_Button_SendSMS,
#Button_AffectedPayment,
#Button_DefineRates,
#Button_Alter_Affiliate_In_Charge,
#Button_Execute,
#Button_ClearExecute, #Button_print,
#Button_SavePNR,
#Button_RoomingList_ClientsInHouse,
#btn_UpdateGAKey,
#Button_AddDeposit,
#Button_GenerateContract,
.delete_btnMsg:before,
.answer_btnMsg:before,
.bulk_btn {
    background-color: var(--button-color) !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 */
}

#Btn_ReplaceAll,
input[id*="DataRepeater_Pools_"],
input#Button_CleanAndTroubleshoot,
input#Button_SupplierCleanAndTroubleshoot,
input#Button_AdminCache,
input#Button_ResaCache,
input#Button_KickUsersTraffic,
input#Button_KickUsersDB,
input#Button_AdminCache,
input#Button_ResaCache,
input#Button_KickUsersDBReplication,
input#Button_KickUsersTrafficReplication,
input#Button_KickUsersDBCiata,
.RecycleButton,
a#HyperLink_NewMsg,
a#HyperLink_NewMsgTop {
    background-color: var(--button-color) !important; /* Old browsers */
    background-color: -moz-linear-gradient(left, #742422 0%, #742422 100%) !important; /* FF3.6-15 */
    background-color: -webkit-linear-gradient(left, #742422 0%,#742422 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background-color: linear-gradient(to right, #742422 0%,#742422 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#742422', endColorstr='#742422',GradientType=1 ) !important; /* IE6-9 */
}

input#Button_Return,
input#Button_Back, input#Button_CancelXMLENV,
input#Button_Activate,
input#Button_DoOneWebservicex,
input#Button_Import,
input#Button_DetailsUsersDB,
input#Button_DetailsUsersDBReplication,
input#Button_DetailsUsersTrafficReplication,
input#Button_DetailsUsersDBCiata,
input#Button_DetailsUsersTraffic,
input#Button_DetailsUsersDBAmadeus,
input#Button_DetailsUsersDBCache,
input#Button_Canceled,
input#Button_CancelConfirmation,
input#Button_Desactivate,
#Button_Cancel,
#Button_Pass,
#Button_Closed,
#Button_ResetExchangeRates {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7d7d+0,7d7d7d+100 */
    background-color: #7d7d7d !important; /* Old browsers */
    background-color: -moz-linear-gradient(left, #7d7d7d 0%, #7d7d7d 100%) !important; /* FF3.6-15 */
    background-color: -webkit-linear-gradient(left, #7d7d7d 0%,#7d7d7d 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background-color: linear-gradient(to right, #7d7d7d 0%,#7d7d7d 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#7d7d7d',GradientType=1 ) !important; /* IE6-9 */
}

input#Button_Back,
input#Button_Subscribe,
a[id*=HyperLink_New] {
    display: inline-block !important;
}

a#HyperLink_NewMsg,
a#HyperLink_NewMsgTop,
input#BT_Save,
a#HyperLink_NewProduct,
#HyperLink_New,
#HyperLink_NewRoom,
#Btn_ReplaceAll,
input#Button_SupplierCleanAndTroubleshoot,
input#Button_AdminCache,
input#Button_ResaCache,
input#Button_CleanAndTroubleshoot,
input#Button_KickUsersTraffic,
input#Button_KickUsersDB,
input#Button_AdminCache,
input#Button_ResaCache,
input#Button_KickUsersDBReplication,
input#Button_KickUsersTrafficReplication,
input#Button_KickUsersDBCiata,
.RecycleButton,
input#Notes_Button_AddNote,
input#Button_Canceled,
input#Button_Confirmed,
input#Button_PrintVoucher,
input#Button_Delete,
input#Button_Login,
input#Button_Validate,
input#Button_Return,
#Button_Search,
#Button_Calculate,
#Button_CalculateLastYear,
#Button_Export,
#Button_Load,
#Button_OrdersDashboardSearch,
input#Button_Save, input#Button_CreateXMLENV, input#Button_ConfirmXMLENV,
input#Button_DeleteOrder,
input#Button_AddOrder,
input#Button_SaveDouble,
input#Button_Subscribe,
input#Button_Back, input#Button_CancelXMLENV,
input#SendSMS1_Button_Send,
input#Button_Send,
input#Button_Print,
input#Button_Activate,
input#Button_Alter,
input#Button_DoOneWebservicex,
input#Button_Import,
input#Button_DetailsUsersDB,
input#Button_DetailsUsersDBReplication,
input#Button_DetailsUsersTrafficReplication,
input#Button_DetailsUsersTraffic,
input#Button_DetailsUsersDBCiata,
input#Button_DetailsUsersDBAmadeus,
input#Button_DetailsUsersDBCache,
input[id*="DataRepeater_Pools_"],
input#Button_SendCode,
#Button_InvoicingAllTicket,
input#Button_RoomingList,
a[id^=HyperLink_New_],
a#HyperLink_NewAIR,
a#HyperLink_ManualAIR,
#Button_Preview,
#Button_Select,
#Button_AllHotelAllotment,
#Button_CancelConfirmation,
#Button_Generate,
#Button_Desactivate,
#HyperLink_NewHotel_1,
#HyperLink_NewHotel_2,
#HyperLink_NewRegion_1,
#HyperLink_NewPNR,
#HyperLink_NewProduct_1,
#HyperLink_NewProduct_2,
#HyperLink_NewOffer,
#HyperLink_NewCarCategory,
#HyperLink_NewTransfer,
#Button_SaveOneWay,
#Button_SaveTwoWay,
#Button_Affect,
#Button_StartBook,
#Button_UpdateRateFXB,
#Button_UpdateRateFXP,
.tourCode,
#Button_Cancel,
#Button_SaveAirData,
#Button_Invoice,
#Button_Pass,
#Button_CheckBook,
#Button_Proceeded,
#Button_Consumed,
#Button_Verified,
#Button_Validate,
#Button_Closed,
#Button_SendToHotel,
#Button_AddAccompte,
#Button_Revalidate,
#Button_Assign,
#Notes_Button_SendSMS,
#Button_AffectedPayment,
#Button_DefineRates,
#Button_Alter_Affiliate_In_Charge,
#Button_Execute,
#Button_ClearExecute,
#Button_SavePNR,
#Button_print,
#Button_RoomingList_ClientsInHouse,
#btn_UpdateGAKey,
#Button_AddDeposit,
#Button_GenerateContract,
#Button_ResetExchangeRates,
.bulk_btn {
    color: #fff;
    margin: 1px auto;
    padding: 5px 10px !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;
    box-shadow: 1px 3px 0px 0px var(--background-fifth-degree);
}

a#HyperLink_Validate,
a#HyperLink_Canceled {
    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;
    background-repeat: no-repeat;
    background-position: right -7px center;
    box-shadow: 1px 3px 0px 0px var(--background-fifth-degree);
}

div#Panel_legend #DataGrid {
    width: 100px !important;
}

table#Table2 tr td span {
    color: #5F5F5F;
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: 400 !important;
}

span#Label_GeneralInformations,
span#Label_Orders,
span#Label_Dashboard_Message {
    /*display:inline-block !important;*/
}

span#Label_GeneralInformations,
span#Label_CompanyCommission,
span#Label_Orders,
span#Label_Kpi,
span#Label_Reservation,
span#Label_Booking,
span#Label_DepositeTitle,
span#Label_Dashboard_Message,
span#Label_PageTitle,
span#Label_MyProfile,
span#Label_A_List,
span#Label_TrafficAgentAI,
span#Label_DetailSession,
span#Label_Header,
span#Label_Dashboard_MessageTitle,
span#Label_SMS,
span#Label_UpdateTitle,
span#Label_DAsList,
span#Label_GPC_Update,
span#Label_UpdateDA,
span#Label_MarginsPerAffiliate_Update_Title,
span#Label_MarginsPerProductsFamily_Update_Title,
span#Label_MarginsPerProduct_Update_Title,
span#Label_MarginsAudit_Title,
span#Label_UpdateCurrenciesRates,
.PageTitle,
span#Label_ProductsFamilyTitle,
span#Label_HotelsList,
span#Label_HotelDetail,
span#Label_Region_List,
span#Label_Region_Detail,
span#Label_City_List,
span#Label_City_Detail,
span#Label_Region_UpdateTitle,
span#Label_UpdateCityTitle,
span#Label_Airport_List,
span#Label_Airport_UpdateTitle,
span#Label_Hotel_UpdateTitle,
span#Label_AllotmentsList,
span#Label_Allotment_UpdateTitle,
span#PageTitleLabel,
span#Label_OptionsList,
span#label_Listetheme,
span#Label_ContactDetail,
span#Label_AuditExchangeRates,
span#Label_Liste_Candidat,
span#Label_Liste_Job,
span#Label_RefundFormTitle,
span#Label_ValidationFormTitle,
span#Label_ShopsList,
span#Label_CarCategoryList,
span#Label_SuperAdministrator,
span#Label_UnavailabilityPeriodsList,
span#Label_UnavailabilityPeriods_UpdateTitle,
.StatusPageTitle,
.Label_UnavailabilityPeriodsList
.TitleMargin {
    color: var(--main-color) !important;
    font-size: calc(var(--main-font-size) + 6px );
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
    border-bottom: solid 1px #D8D8D8;
    display: block;
    padding-bottom: 5px;
    font-family: TrimBold;
}

span#Label_Sales,
span#Label_InvoiceCustomerTitle,
span#Label_InvoiceSupplierTitle {
    color: var(--main-color) !important;
    font-size: calc(var(--main-font-size) + 6px );
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
    padding-bottom: 5px;
    font-family: TrimSemiBold, sans-serif;
}

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

div#DivBody hr {
    display: none;
}

input, select, textarea {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc !important;
    /*border-radius:1px ;*/
    -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;
}

    input:focus, select:focus, textarea:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    }

div#header_divMenu {
    background: #E4E4E4;
}

input#File_Import {
    border: 0 !important;
    box-shadow: none;
}

.StaticMenuItemStyle,
.DynamicMenuItemStyle {
    background: none !important;
    border: 0 !important;
    padding: 8px 8px 12px 8px !important;
    border-radius: 0px;
}

div#header_divMenu {
    background: #E4E4E4;
    border: solid 1px #D4D4D4;
}

table.StaticMenuItemStyle:hover,
table.DynamicMenuItemStyle:hover {
    background-color: var(--menu-color) !important;
    /* Was 0.5s: half a second to light up an entry reads as the menu lagging behind the pointer. */
    transition: background-color 0.12s ease;
}

    table.StaticMenuItemStyle:hover a,
    table.DynamicMenuItemStyle:hover a {
        color: var(--main-color) !important;
        cursor: pointer !important;
    }

.StaticMenuItemStyle,
a.DynamicMenuItemStyle {
    color: var(--menu-color) !important;
}

table.DynamicMenuItemStyle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--menu-color);
    background: var(--main-color) !important;
}

a.StaticMenuItemStyle:hover,
a.DynamicMenuItemStyle:hover {
    color: #fff !important;
}

.header_mainMenu_0 {
    background: #EAEAEA !important; 
}

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

span#header_Label_User:before {
    content: "\f007";
    font-family: fontawesome;
    background: var(--menu-color);
    padding: 4px 6px;
    border-radius: 50%;
    height: 11px !important;
    width: 12px !important;
    font-size: calc(var(--main-font-size) + 2px );
    color: var(--header-color);
    /* position: absolute; */
    /* margin-left: -40px; */
    margin-top: 15px;
    line-height: 11px;
    margin-right: 8px;
    margin-left: 10px;
}

td.infos, div.infos {
    font-weight: 300;
    text-transform: uppercase;
    white-space: nowrap;
}

td img[src*="pix.gif"] {
    width: 0 !important;
}

div#divnotification ul li:before {
    font-family: fontawesome;
    content: "\f00c";
    padding: 0 5px;
}

div#divnotification ul li {
    list-style-type: none !important;
}

span#Label_RequiredField {
    font-style: italic;
    font-size: var(--main-font-size) !important;
}

td.content {
    background: var(--background-fifth-degree);
    border: 1px solid #DEDEDE;
    padding: 10px;
}

table.cnx {
    text-align: center;
}

.cnx #Label_User:after {
    content: "\f007";
    font-family: fontawesome;
    position: relative;
    left: 25px;
}

.cnx #Label_VerifyPassword:after,
.cnx #Label_LastPassword:after,
.cnx #Label_Password:after {
    content: "\f023";
    font-family: fontawesome;
    position: relative;
    left: 25px;
}

.cnx #Label_VerifyPassword:after,
.cnx #TextBox_Login,
.cnx #TextBox_Password,
.cnx #TextBox_LastPassword {
    width: 200px !important;
    height: 30px !important;
    /*border-radius: 3px !important;*/
    display: block;
    margin-bottom: 15px;
    padding-left: 30px;
}

.cnx #Label_VerifyPassword:after,
.cnx #Label_LastPassword:after,
.cnx #Label_User,
.cnx #Label_Password,
.cnx #Label_VerifyPasswordCP:after,
.cnx #Label_LastPasswordCP:after,
.cnx #Label_PasswordCP:after {
    font-size: calc(var(--main-font-size) + 3px ) !important;
    font-weight: 400 !important;
    margin-top: -15px !important;
    display: block;
    color: #545454;
}

.cnx #TextBox_VerifyPasswordCP,
.cnx #TextBox_LoginCP,
.cnx #TextBox_PasswordCP,
.cnx #TextBox_LastPasswordCP {
    width: 200px !important;
    height: 30px !important;
    /*border-radius: 3px !important;*/
    display: block;
    padding-left: 30px;
}

.cnx #Label_VerifyPasswordCP:after,
.cnx #Label_LastPasswordCP:after,
.cnx #Label_PasswordCP:after {
    content: "\f023";
    font-family: fontawesome;
    position: relative;
    left: 40px;
}

span#Label_Navigateur {
    display: block;
    padding: 5px;
    color: #666666 !important;
    font-weight: 400 !important;
}

.cnx .Grid1UnSelectedHeaderItem {
    border-bottom: 1px dotted var(--background-third-degree);
    border-top: 1px dotted var(--background-third-degree);
    background: none !important;
}

span#Label_LanguageUI,
span#Label_LanguageContent,
span#Label_Currency,
span#Label_Destination,
span#Label_PasswordVerify,
span#Label_Contact,
span#Label_Address,
span#Label_Police {
    float: left;
    width: 210px;
}

.cr_notification3 #Label_ErrorMessage {
    font-size: calc(var(--main-font-size) + 8px ) !important;
    font-weight: 300 !important;
    font-style: normal !important;
}

    .cr_notification3 #Label_ErrorMessage:before {
        content: "\f071";
        font-family: fontawesome;
        font-size: calc(var(--main-font-size) + 89px );
        display: block;
    }

.cr_notification3 {
    background: #fbcbc1 !important;
    font-weight: 400 !important;
    clear: both;
    border: 1px solid #eb533b !important;
    color: #d02a00 !important;
    margin: 15px 0;
    min-height: 32px;
    font-size: calc(var(--main-font-size) + 1px ) !important;
}

legend {
    background: var(--hover-color);
    padding: 5px;
    color: #fff;
}

fieldset {
    border: 1px solid var(--background-third-degree) !important;
    background: var(--background-seventh-degree) !important;
}

div#Panel_SupplierInvoice {
    margin-top: 15px;
}

table.StaticMenuItemStyle tr td:last-child:after {
    /*content: "\f107";*/
    font-family: fontawesome;
    /*display: block;*/
    padding-left: 5px;
    padding-right: 5px;
}

table.StaticMenuItemStyle tr td:last-child img,
table.DynamicMenuItemStyle tr td:last-child img {
    display: none !important;
}

table.DynamicMenuItemStyle tr td + td:after {
    content: "\f105";
    font-family: fontawesome;
}

.DynamicMenuStyle {
    margin-top: 1px;
    margin-left: -2px;
}


input[type="radio"] {
    border-radius: 50%;
}

input[type=radio], input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    /*position: relative;*/
    top: 3px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 15px;
    width: 15px;
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
    background: #fff;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    /* An empty inline-block sits on its bottom edge; one holding content sits on that content's. */
    overflow: hidden;
    /* Explicit, so alignment no longer depends on what wraps the control. */
    vertical-align: middle;
    margin-right: 5px;
    outline: none;
}

    input[type=radio]:checked, input[type=checkbox]:checked {
        background: var(--hover-color);
        border: 0 !important;
    }

        input[type=radio]:checked::before, input[type=checkbox]:checked::before {
            content: "\f00c";
            display: block;
            font-size: 12px;
            font-family: fontawesome;
            margin-left: 2px;
            margin-top: 2px;
        }

a#HyperLink_Validate::before {
    /*position: absolute;*/
    content: "\f00c";
    display: inline-block;
    font-size: calc(var(--main-font-size) + 3px );
    font-family: fontawesome;
    margin-left: 3px;
    margin-top: 3px;
    margin-right: 7px;
}

a#HyperLink_Canceled::before {
    /*position: absolute;*/
    content: "\f00d";
    display: inline-block;
    font-size: calc(var(--main-font-size) + 3px );
    font-family: fontawesome;
    margin-left: 3px;
    margin-top: 3px;
    margin-right: 7px;
}

input[type=radio]:checked::after, input[type=checkbox]:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: #E49C40;
    content: '';
    display: block;
    /*position: relative;*/
    z-index: 100;
}

td.alert_msg {
    background: #EFEFEF;
    box-shadow: 0px 0px 4px #A5A5A5;
}

table#DataGrid2 {
    border: 0 !important;
}
/*
table[id*=DataGrid],
table[id*=Datagrid],
table#PlanningDispo1_TableDispo,
#dg_agency {
	width: 100% !important;
}
*/
/****bloc identification***/
.cnx_login {
    text-align: center;
    position: fixed !important;
    top: 45% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1000;
}

.cnx_login .bloc_identification {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--main-color);
    padding-bottom: 5PX;
    box-shadow: 0px 0px 9px #A9A9A9;
    border-radius: 10px;
}

.cnx_login .bloc_identification .infos {
    font-size: var(--main-font-size);
}

.cnx_login .bloc_identification .header_identification {
    text-align: center;
}

.cnx_login .bloc_identification .navigateurs img {
    margin-left: 5px;
    margin-right: 5px;
}

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

    .footer td.infos {
        background: none !important;
    }

.cnx_login .bloc_identification .powered_by {
    display: none;
}

.cnx_login .bloc_identification input#Button_Login {
    width: 100% !important;
}
/*table#DataGrid tr td a ,#DataGrid_AirTicket  tr td a ,#DatagridInvoiceSupplier tr td a,
div#div_Result table tr td a,
#DataGrid_Sections tr td a,
#Datagrid_Affiliates tr td a,
#Datagrid_ProductsFamilies tr td a,
#Datagrid_Products tr td a*/
{
    text-decoration: none !important;
}


#DataGrid, #DataGrid_AirTicket, .ClassDatagridStatusPage {
    border: 1px solid transparent !important;
}

.SeeMore {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

/*#DataGridPromo {
	border: 1px solid !important;
}*/

div#div_Result table {
    width: 100%;
}


table#DataGrid_Mailing tr td,
table#DataGrid_Contacts tr td,
table#DataGrid tr td {
    padding: 5px;
}

table#DataGrid_Members,
table#DataGrid_Mailing,
table#DataGrid_Contacts {
    border: 1px solid #D6D6D6 !important;
    margin-top: 20px;
}

img[id*=DataGrid_Members_] {
    /*border-radius:50%;*/
}

span#Label_Number, span#Label_MessageNumber,
span#Label_Dashboard_MessageTitle {
    font-size: calc(var(--main-font-size) + 6px );
    font-weight: 300;
    border-bottom: 1px dotted var(--background-fourth-degree);
    /*display: block;*/
    padding-bottom: 10px;
}

/************************************************DataGrid**********************/

table#DataGrid_AirTicket, #DatagridInvoiceSupplier, #TR_Message #GridView_Messages,
#DataGrid {
    width: 95%;
    margin-top: 20px;
}

tr.entete {
    background: var(--datagrid-color-header);
}

.gds:before,
.lcc:before,
.lcclegend:before,
.gdslegend:before {
    content: "\f054";
    font-family: fontawesome;
    padding: 5px;
    position: relative;
    top: 4px;
}

.gds:before,
.gdslegend:before {
    color: #006699;
}

.lcc:before,
.lcclegend:before {
    color: #FFA500;
}

.gds,
.lcc {
    border: 0 !important;
}

tr.entete a, tr.entete td {
    color: var(--font-color) !important;
    text-decoration: none;
    white-space: nowrap;
}

table#DataGrid2 tr td {
    border: 0 !important;
}

tr.entete td a:after {
    content: "\f0dc";
    font-family: fontawesome;
    padding: 10px;
    font-size: calc(var(--main-font-size) - 1px );
}

/*********************Pagination*****************/
tr.pagination td span, tr.pagination td a {
    padding: 5px;
    display: inline-block;
    color: var(--font-color);
    text-align: center;
    font-size: calc(var(--main-font-size) + 1px ) !important;
    text-decoration: none;
    width: 15px;
    border: 1px solid #D4D4D4;
    background: var(--background-second-degree);
}

tr.pagination td {
    background-color: var(--background-seventh-degree);
}

    tr.pagination td span {
        background: var(--hover-color);
        color: var(--font-color) !important;
        border: 0 !important;
        padding: 6px !important;
    }

    tr.pagination td a:hover {
        background-color: var(--hover-color);
        -webkit-transition: background-color 500ms ease-out 1s;
        -moz-transition: background-color 500ms ease-out 1s;
        -o-transition: background-color 500ms ease-out 1s;
        transition: background-color 500ms ease-out 100ms;
    }
/******boutons actions ******/

.delete_btn,
.update_btn,
.duplicate_btn,
.desactive_btn,
.connexion_btn,
.copy_btn,
.condition_btn,
.detail_btn,
.stock_btn,
.print_btn,
.answer_btn,
.Unpaid_btn,
.affect_btn,
.invoice_btn,
.section_btn,
.supplement_btn,
.allotment_btn,
.stopSale_btn,
.promotion_btn,
.stay_btn,
.review_btn,
.credit_btn,
.paid_btn,
.payment_btn,
.mile_btn,
.FixeDate_btn,
.send_btn,
.period_btn,
.answer_btnMsg,
.delete_btnMsg {
    padding: 4px 8px;
    padding-right: 4px;
    /*border: 1px solid #BFBFBF;*/
    /*border-radius: 3px;*/
    display: inline-block;
    text-decoration: none;
    /*background-color: var(--background-first-degree);*/
    white-space: normal !important;
}

.copy_btn1
.duplicate_btn1
.update_btn1
.desactive_btn1
.condition_btn1
.connexion_btn1
.credit_btn1
.paid_btn1
.payment_btn1
.desactive_btn1
.active_btn1 {
    padding: 4px 8px;
    display: inline-block;
    text-decoration: none !important;
}

.active_btn2,
.connexion_btn2 {
    padding: 4px 8px;
    padding-right: 4px;
    /*border: 1px solid #BFBFBF;*/
    border-radius: 3px;
    display: inline-block;
    text-decoration: none;
    /*background-color: var(--background-first-degree);*/
    white-space: normal !important;
}

.delete_btn:hover,
.update_btn:hover,
.duplicate_btn:hover,
.desactive_btn:hover,
.connexion_btn:hover,
.copy_btn:hover,
.condition_btn:hover,
.detail_btn:hover,
.stock_btn:hover,
.print_btn:hover,
.answer_btn:hover,
.Unpaid_btn:hover,
.affect_btn:hover,
.invoice_btn:hover,
.section_btn:hover,
.supplement_btn:hover,
.allotment_btn:hover,
.stopSale_btn:hover,
.promotion_btn:hover,
.stay_btn:hover,
.review_btn:hover,
.credit_btn:hover,
.paid_btn:hover,
.payment_btn:hover,
.mile_btn:hover,
.FixeDate_btn:hover,
.send_btn:hover,
.period_btn:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: #9C9C9C;
}

.update_btn1:hover,
.duplicate_btn1:hover,
.desactive_btn1:hover,
.active_btn1:hover,
.connexion_btn1:hover,
.copy_btn1:hover,
.condition_btn1:hover,
.aboutus_btn1:hover,
.detail_btn1:hover,
.paid_btn1:hover,
.credit_btn1:hover,
.payment_btn1:hover,
.save_btn1:hover,
.cancel_btn1:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: #9C9C9C;
}

.active_btn2:hover,
.connexion_btn2:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: #9C9C9C;
}

.delete_btn:before,
.update_btn:before,
.duplicate_btn:before,
.desactive_btn:before,
.connexion_btn:before,
.copy_btn:before,
.condition_btn:before,
.detail_btn:before,
.stock_btn:before,
.print_btn:before,
.answer_btn:before,
.Unpaid_btn:before,
.affect_btn:before,
.invoice_btn:before,
.section_btn:before,
.supplement_btn:before,
.allotment_btn:before,
.stopSale_btn:before,
.promotion_btn:before,
.stay_btn:before,
.review_btn:before,
.credit_btn:before,
.paid_btn:before,
.payment_btn:before,
.mile_btn:before,
.FixeDate_btn:before,
.send_btn:before,
.period_btn:before,
.connexion_btn2:before,
.bulk_btn:before{
    font-family: fontawesome;
    color: var(--background-fourth-degree);
    padding-right: 5px;
}

.update_btn1:before,
.duplicate_btn1:before,
.desactive_btn1:before,
.active_btn1:before,
.active_btn2:before,
.connexion_btn1:before,
.copy_btn1:before,
.condition_btn1:before,
.aboutus_btn1:before,
.detail_btn1:before,
.paid_btn1:before,
.credit_btn1:before,
.payment_btn1:before,
.save_btn1:before,
.cancel_btn1:before {
    font-family: fontawesome;
    color: var(--background-fourth-degree);
    padding-right: 5px;
}

.active_btn2:before {
    font-family: fontawesome;
    color: var(--background-fourth-degree);
    padding-right: 5px;
}

.delete_btn:before, .delete_btnMsg:before {
    font-family: fontawesome;
    content: "\f2ed";
    font-size: calc(var(--main-font-size) + 2px) !important;
    padding-right: 5px;
}

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

.update_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.update_btn1:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

/* Inline grid edition: save (fa-floppy-disk) / cancel (fa-xmark) buttons, same look as update_btn1 */
.save_btn1,
.cancel_btn1 {
    padding: 4px 2px;
    display: inline-block;
    text-decoration: none !important;
}

.save_btn1 {
    margin-right: 6px;
}

.save_btn1:before {
    content: "\f0c7";
    font-size: calc(var(--main-font-size) + 2px) !important;
    padding-right: 0;
}

.cancel_btn1:before {
    content: "\f00d";
    font-size: calc(var(--main-font-size) + 2px) !important;
    padding-right: 0;
}

/* Confirmation pop-up (CMPRules_List) */
.cmp_confirm_overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
}

.cmp_confirm_box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 35px 55px 30px;
    max-width: 90%;
    text-align: center;
}

.cmp_confirm_message {
    margin: 0 0 20px;
    font-size: calc(var(--main-font-size) + 1px);
}

.duplicate_btn:before {
    content: "\f0c5";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.duplicate_btn1:before {
    content: "\f0c5";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.desactive_btn:before {
    content: "\f204";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.active_btn:before {
    content: "\f205";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.connexion_btn:before {
    content: "\f090";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.connexion_btn2:before {
    content: "\f090";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.desactive_btn1:before {
    content: "\f204";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.active_btn1:before {
    content: "\f205";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.active_btn2:before {
    content: "\f205";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.connexion_btn1:before {
    content: '\f2f6';
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.copy_btn:before {
    content: "\f0ea";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.bulk_btn:before {
    content: "\f272";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.copy_btn1:before {
    content: "\f0ea";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.condition_btn:before {
    content: "\f15c";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.detail_btn:before {
    content: "\f05a";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.condition_btn1:before {
    content: "\f15c";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

/* « À propos » (A_List → Page_Update.aspx?p=aboutus): the info icon, sized like its neighbour. */
.aboutus_btn1 {
    padding: 4px 8px;
    display: inline-block;
    text-decoration: none !important;
}

.aboutus_btn1:before {
    content: "\f05a";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.detail_btn1:before {
    content: "\f05a";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.stock_btn:before {
    content: "\f5fd";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.print_btn:before {
    content: "\f02f";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.answer_btn:before, .answer_btnMsg:before {
    font-family: fontawesome;
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
    background-color: var(--hover-color) !important;
    padding-right: 5px;
}

.answer_btnMsg, .delete_btnMsg {
    color: var(--background-third-degree);
    border: solid 1px var(--background-third-degree);
    box-shadow: 0px 1px 0px 0px var(--background-third-degree);
    background-color: var(--hover-color) !important;
}

.Unpaid_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.affect_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.invoice_btn:before {
    content: "\f571";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.section_btn:before {
    content: "\f0ca";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.supplement_btn:before {
    content: "\f5ff";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.allotment_btn:before {
    content: "\f155";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.stopSale_btn:before {
    content: "\f28d";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.promotion_btn:before {
    content: "\f158";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.stay_btn:before {
    content: "\f1b3";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.review_btn:before {
    content: "\f01e";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.credit_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.paid_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.payment_btn:before {
    content: "\f873";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.credit_btn1:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.paid_btn1:before {
    content: "\24";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.payment_btn1:before {
    content: "\f873";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.mile_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.FixeDate_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.send_btn:before {
    content: "\f040";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

.period_btn:before {
    content: "\f15c";
    font-size: calc(var(--main-font-size) + 2px) !important;
}

input[type=text], [type=password] {
    height: 20px;
    padding: 5px 5px 5px 7px;
    background-color: var(--background-second-degree);
}

select, textarea {
    padding: 5px 5px 5px 7px;
    background-color: var(--background-second-degree);
}


div#divfilter {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.formSearchEngine {
    /*width: 100%;*/
    padding: 10px;
    margin-top: -14px;
    border-bottom: 1px dotted var(--background-third-degree);
    margin-bottom: 10px;
    background: var(--background-sixth-degree);
    border-spacing: 10px;
    border-radius: 13px;
}

table.resStatsDB {
    /*margin-left: -8px;*/
    width: 100% !important;
    border-top: 1px dotted var(--background-third-degree);
    border-bottom: 1px dotted var(--background-third-degree);
    padding: 10px;
    background: var(--background-sixth-degree);
    border-spacing: 10px;
    border-radius: 13px;
}

table.resStopSales {
    /*margin-left: -8px;*/
    width: 101% !important;
    border-top: 0px dotted var(--background-third-degree);
    border-bottom: 0px dotted var(--background-third-degree);
    padding: 4px;
    border-radius: 13px;
}

table.res {
    border-top: 1px dotted var(--background-third-degree);
    border-bottom: 1px dotted var(--background-third-degree);
    padding: 10px;
    background: var(--background-sixth-degree);
    border-spacing: 10px;
    border-radius: 13px;
}

span#Label_FilterBy, span#Label_Search, span#Label_FilteredBy {
    background: var(--background-sixth-degree);
    /*display: block;*/
    /*color:#fff ;*/
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: 400 !important;
    text-transform: uppercase;
    padding: 8px;
    /*border-radius: 3px 3px 0 0;*/
    width: 100px;
}

span#Label_showhide {
    background: var(--background-sixth-degree);
    cursor: pointer;
    font-size: calc(var(--main-font-size) + 2px );
    font-weight: 400 !important;
    text-transform: uppercase;
    padding: 8px;
    /*border-radius: 3px 3px 0 0;*/
    width: 100px;
}

table.formSearchEngine span,
table.res span {
    /*color: var(--main-color);
	text-transform: uppercase;
	font-weight: 500;*/
}
/*********************Notification vert******************/


td.cr_linkDep {
    /*color: #B7A400 !important;*/
    font-size: calc(var(--main-font-size) + 1px );
    font-weight: 400 !important;
    margin-left: 0px;
    padding-top: 15px;
    white-space: nowrap;
    /*background: rgba(255, 235, 59, 0.3);*/
    /*border: 1px solid #B7A400 !important;*/
}

td.cr_linkDep b {
    /*color: #B7A400 !important;*/
}

td#td_Deposit span table tr {
    background: transparent !important;
}

td.cr_linkDep:before {
    content: "\f0a2";
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 5px );
    padding: 0 5px;
}
/*****************Notification Rouge *******************/
.cr_notification2:before {
    content: "\f06a";
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 19px );
    padding: 0 5px;
    position: relative;
    float: left;
}

.cr_notification2 {
    margin-top: 7px;
    display: block;
}

.checkbox_invoice input[type="checkbox"], .checkBox_advance input[type="checkbox"],
.checkBox_isRelatedTOOutgoing input[type="checkbox"],
.checkBox_balance input[type="checkbox"],
.checkBox_positiveBalance input[type="checkbox"],
.checkBox_instance input[type="checkbox"],
.checkBox_perRoom input[type="checkbox"] {
    position: relative;
    top: 5px;
}

.notification2,
.cr_notification2 {
    background: #fbcbc1 !important;
    font-weight: 400 !important;
    clear: both;
    border: 1px solid #d02a00 !important;
    color: #d02a00 !important;
    margin: 15px 0;
    min-height: 32px;
    font-size: calc(var(--main-font-size) + 1px ) !important;
    padding: 10px !important;
}

.notification_up {
    background: lightgreen !important;
    font-weight: 400 !important;
    clear: both;
    border: 1px solid black !important;
    color: black !important;
    margin: 15px 0;
    min-height: 32px;
    font-size: calc(var(--main-font-size) + 1px ) !important;
    padding: 10px !important;
}

.notification_down {
    background: #fbcbc1 !important;
    font-weight: 400 !important;
    clear: both;
    border: 1px solid black !important;
    color: black !important;
    margin: 15px 0;
    min-height: 32px;
    font-size: calc(var(--main-font-size) + 1px ) !important;
    padding: 10px !important;
}

/*************page erreur**************/
.error {
    background: var(--main-color) !important;
}

#error .bloc_identification table,
html body#error {
    background: var(--main-color) !important;
}

#error .footer {
    position: absolute;
    bottom: 0;
}

#error .cr_notification3 {
    background: none !important;
    color: #fff !important;
    border: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -122px;
    margin-left: -460px;
}

.error input#Button_Back, .error input#Button_Alter {
    background-color: transparent !important;
    border: 1px solid #fff !important;
}

#error .cr_notification3 #Label_ErrorMessage {
    font-size: calc(var(--main-font-size) + 29px ) !important;
    white-space: nowrap;
}

.error {
    color: white !important;
    border: none !important;
}
/*****look booking.com pro ****/
#Form1 {
    margin: 0;
    padding: 0;
}


.cr_menu {
    width: auto !important;
}

.cr_container { /*min-width:1200px;max-width:1200px;*/
    margin-left: auto;
    margin-right: auto;
}

.cr_container2 {
    min-width: 1200px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cr_container_header {
    height: 80px;
}

.body_identification .cr_container {
    min-width: inherit;
    max-width: none;
}

.cr_header_container {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: var(--header-color);
    height: 75px;
}

.cr_footer_container {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: var(--main-color);
}

td.cr_footer_container {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}

td.cr_header_container, td.cr_menu_container {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10
}

.cr_menu_container { /*background-color:#fff;*/
    border-bottom: solid 1px var(--background-third-degree);
}

/* The :before and :after spacers matched the old split logo + menu structure. The single bar carries its own height and background. */
td.cr_menu_container:before,
td.cr_menu_container:after {
    content: none;
}

div#header_divMenu {
    z-index: 10;
    position: relative;
}

div#header_divMenu {
    background-color: var(--header-color) !important;
    border: none !important;
    text-align: center;
}

.cr_menu_container .StaticMenuItemStyle {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.cr_menu_container a.StaticMenuItemStyle {
    font-size: calc(var(--main-font-size) + 4px ) !important;
    font-weight: 500 !important;
}

.cr_content_container {
}

/* .auto-style3 and .auto-style4 dropped: they were the old menu side column, and .auto-style4 covered the content. */

.auto-style5 {
    background: var(--header-color)
}

.auto-style6 {
    z-index: 11;
    width: 51px;
}

.auto-style7 {
    width: 51px;
    height: 98%;
    position: fixed;
    z-index: 9999;
}

.cr_content { /*border:solid 1px var(--background-third-degree);margin-top: 125px;   margin-bottom: 55px;*/
    background-color: #fff;
    padding: 20px; /*border-radius:3px;box-shadow: 0px 0px 4px #E4E4E4;*/
}

.cr_content2 { /*border:solid 1px var(--background-third-degree);*/
    /*margin-top: 125px;*/
    margin-bottom: 55px;
    background-color: var(--background-second-degree);
    padding: 20px; /*border-radius:3px;box-shadow: 0px 0px 4px #E4E4E4;*/
}

.body_identification .cr_content2 {
    margin-bottom: 0px;
    margin-top: 0px;
    background-color: var(--background-second-degree);
}

.body_identification .cr_content {
    margin-bottom: 0px;
    margin-top: 0px;
}

.body_identification .cr_menu_container {
    display: none;
}

.body_identification .cnx_login .bloc_identification .infos {
    text-align: center !important;
}

table.StaticMenuItemStyle:hover a:before {
    color: #fff !important;
}

td[id*="header_mainMenun"] a:before {
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 3px );
    padding-left: 5px;
    position: relative;
    float: left;
    color: var(--main-color) !important;
}

td[id*="header_mainMenun"] {
    padding-left: 2px;
    padding-right: 2px;
}

#menuFile:before {
    content: "\f15b";
}

span#menuFile {
    color: var(--menu-color) !important;
}

#menuFlights:before {
    content: "\f145";
}

span#menuFlights {
    color: var(--menu-color) !important;
}

#menuBookings:before {
    content: "\f274";
}

span#menuBookings {
    color: var(--menu-color) !important;
}

#menuCustomers:before {
    content: "\f0c0";
}

span#menuCustomers {
    color: var(--menu-color) !important;
}

#menuInvoices:before {
    content: "\f155";
}

span#menuInvoices {
    color: var(--menu-color) !important;
}

#menuProducts:before {
    content: "\f1b3";
}

span#menuProducts {
    color: var(--menu-color) !important;
}

#menuReporting:before {
    content: "\f080";
}

span#menuReporting {
    color: var(--menu-color) !important;
}

#menuSettings:before {
    content: "\f013";
}

span#menuSettings {
    color: var(--menu-color) !important;
}

#menuDoBooking:before {
    content: "\f0f2";
}

span#menuBookings {
    color: var(--menu-color) !important;
}

#menuTransport:before {
    content: "\f207";
}

span#menuTransport {
    color: var(--menu-color) !important;
}

#menuHotels:before {
    content: "\f1ad";
}

span#menuHotels {
    color: var(--menu-color) !important;
}

#menuPackages:before {
    content: "\f0f2";
}

span#menuPackages {
    color: var(--menu-color) !important;
}

#menuCar:before {
    content: "\f1b9";
}

span#menuCar {
    color: var(--menu-color) !important;
}

#menuDestination:before {
    content: "\f277";
}

span#menuDestination {
    color: var(--menu-color) !important;
}

#menuCommand:before {
    content: "\f291";
}

span#menuCommand {
    color: var(--menu-color) !important;
}

#menuAddOns:before {
    content: "\f085";
}

span#menuAddOns {
    color: var(--menu-color) !important;
}

#menuTransferMoney:before {
    content: "\f0d6";
}

span#menuTransferMoney {
    color: var(--menu-color) !important;
}

#menuEdition:before {
    content: "\f02b";
}

span#menuEdition {
    color: var(--menu-color) !important;
}

#menuDivers:before {
    content: "\f271";
}

span#menuDivers {
    color: var(--menu-color) !important;
}

#menuReceptif:before {
    content: "\f02d";
}

span#menuReceptif {
    color: var(--menu-color) !important;
}

#menuShop:before {
    content: "\f290";
}

span#menuShop {
    color: var(--menu-color) !important;
}

#menuTools:before {
    content: "\f055";
}

span#menuTools {
    color: var(--menu-color) !important;
}

#menusearch:before {
    content: "\f002";
}

span#menusearch {
    color: var(--menu-color) !important;
}

td[id*="header_mainMenun"] span:before {
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 3px );
    padding-left: 5px;
    position: relative;
    float: left;
    color: var(--main-color) !important;
}

span:before {
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 7px );
    float: inherit;
}

table.StaticMenuItemStyle span:before,
table.DynamicMenuItemStyle span:before {
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 8px );
    float: inherit;
    margin-left: -2px;
}

table.StaticMenuItemStyle:hover span:before,
table.DynamicMenuItemStyle:hover span:before {
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 8px );
    position: center;
    float: inherit;
    color: var(--main-color) !important;
}

#header_Div_sidebar:hover {
    background-color: var(--menu-color) !important;
    transition: background-color 0.5s ease;
}

    #header_Div_sidebar:hover span:before {
        color: var(--main-color) !important;
        cursor: pointer !important;
    }

#cr_logout:hover {
    background-color: var(--menu-color) !important;
    transition: background-color 0.5s ease;
}

#cr_logout:hover span:before {
    color: var(--main-color) !important;
    cursor: pointer !important;
}

#cr_logout:hover Label {
    color: var(--main-color) !important;
    cursor: pointer !important;
}

div[id*="header_mainMenun"] {
    border-radius: 3px;
    box-shadow: 0px 0px 4px #E4E4E4;
    padding: 5px !!important;
    clip: inherit !important;
}

table.DynamicMenuItemStyle {
    border-bottom: 1px solid var(--header-color) !important;
    background: var(--main-color) !important;
}

.cr_menu_container .StaticMenuItemStyle {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 7px;
    margin-bottom: 7px;
    border-radius: 3px;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

#header_mainMenun7 a:before {
    color: #fff !important;
}

#div_horloge:before {
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 3px );
    padding-right: 5px;
    position: relative;
    color: #var(--main-color) !important;
    content: "\f017";
}

.cr_horloge {
    border-right: solid 1px rgba(255,255,255,0.1);
    border-left: solid 1px rgba(255,255,255,0.1);
    width: 150px;
    /*height: 60px;*/
    padding-left: 15px !important;
}

.cr_utilisateur {
    line-height: 60px;
}

span#Label_Status_Display {
    padding: 0 5px !important;
}


/**********************************Calendar**********************/
.footer-calendar {
    background: var(--main-color);
}

#MonSelect, #YearSelect {
    margin-right: 5px;
    height: 30px !important;
    margin-top: 3px;
    margin-bottom: 3px;
}

#YearSelect {
    margin-right: 0px;
}

.CalCol {
    padding: 10px !important;
    vertical-align: middle !important;
    width: 25px;
}

.CalTop,
.CalMiddle {
    border: 0 !important;
}

.CalTop {
    background: var(--main-color);
    /*border-radius: 5px 5px 0 0;*/
}

.CalCell {
    height: auto !important;
}

#navPrev {
    float: left;
    margin-top: 12px;
    margin-left: 5px;
}

#navNext {
    float: right;
    margin-top: 12px;
    margin-right: 5px;
}

#innerDiv td.CalCol:hover {
    background: var(--hover-color) !important;
}

tr.footer-calendar td {
    /*border-radius: 0px 0px 5px 5px;*/
}

div#calPanel table:first-child {
    /*border-radius: 5px;*/
}

td.CalCol[bgcolor*=white] {
    padding: 8px !important;
    border: solid 2px #E49C40 !important;
}

/**************code ajouter pour la page Air Tichekt********************/
div#Panel_StatisticsControlState label,
#Panel_StatisticsSalesAirTicket label,
div#Panel_StatisticsCrossings label,
div#Panel_UsedStatistics label,
div#Panel_StatisticsControlAgent label {
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: 300;
    line-height: 30px;
    padding: 5px 0px;
    display: inline-block;
}

div#Panel_StatisticsControlState table,
div#Panel_StatisticsSalesAirTicket table,
div#Panel_StatisticsCrossings table,
div#Panel_UsedStatistics table,
div#Panel_StatisticsControlAgent table {
    width: 100% !important;
    padding: 0 20px;
}

span#Label_StatisticsType, #Label_Type {
    display: none;
}
/*table.tab_airticket {
	float: left;
	height: 100%;
	display: block;
	margin-left: 1px;
	
}*/


table.tab_Members {
    height: 100%;
    display: block;
    margin-left: 1px;
}

table.tab_Members label /*, table.tab_airticket label*/ {
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: 300;
}

    /*table.result_air {
	display: block;
	height: 255px;
	background: #FDFDFD;
	border: 1px solid var(--background-third-degree);
	margin-top: -35px;
}*/

table.tab_Members tr td {
    line-height: 30px;
    border-bottom: 1px solid #F9F9F9;
    padding: 10px;
    width: 330px;
    background: #EBEBEB;
    border-right: 1px solid #F9F9F9;
}

table.tab_Members tr td:hover {
    background: #CECECE;
    transition: background-color 0.5s ease;
}
/******************fin code********************/

/**************code ajouter pour tous les pages Rapports ********************/

table.tab_reporting {
    float: left;
    /*height: 100%;*/
    display: block;
    margin-left: 1px;
    border-spacing: 0px;
    padding-top:20px;
}

table.tab_reporting label {
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: 300;
}


table.tab_reporting tr td {
    line-height: 30px;
    border-bottom: 1px solid #F9F9F9;
    padding: 10px;
    width: 330px;
    background: var(--background-sixth-degree);
    border-right: 1px solid #F9F9F9;
    border-radius:15px
}

    table.tab_reporting tr td:hover {
        background: #CECECE;
        transition: background-color 0.5s ease;
    }

table.result_reporting {
    min-height: 255px;
    background: var(--background-seventh-degree);
    border-radius: 15px;
}

table.result_reporting label {
    font-size: calc(var(--main-font-size) + 4px );
    font-weight: 300;
    line-height: 30px;
    padding: 5px 0px;
    display: inline-block;
}

/*****************custom style per reporting***/
table.tab_reporting_hotel, table.tab_reporting_product, table.tab_reporting_invoice, table.tab_reporting_payment {
    margin-top: -17px;
}

table.result_reporting_hotel {
    min-height: 205px;
    display: flex;
    border-radius: 15px;
}

table.result_reporting_payment {
    min-height: 170px;
}
.force-min-height {
    min-height: 46px !important;
}
/********************/
.hbRoom:before, .gtaRoom:before, .aitRoom:before, .tbRoom:before, .cyberesaRoom:before, .dotwRoom:before, .lohRoom:before, .lightresaRoom:before, .tgxRoom:before {
    content: "\f054";
    font-family: fontawesome;
    padding: 3px;
    position: relative;
    top: 4px;
    float: none;
    font-size: initial;
}

.cr_button_spacing {
    margin-right: 7px !important;
}

.tab_user_logout {
    float: right;
    position: relative;
}

.Cr_Fildareian {
    color: var(--third-color) !important;
    font-size: var(--main-font-size);
    font-weight: 500 !important;
    display: inline-block;
    padding-bottom: 5px;
    text-decoration: none;
}

.Cr_FildareianLink {
    color: var(--third-color) !important;
    font-size: var(--main-font-size);
    font-weight: 500 !important;
    display: inline-block;
    padding-bottom: 5px;
}

.Cr_Fildareianredirect {
    color: var(--third-color) !important;
    font-size: calc(var(--main-font-size) - 1px );
    font-weight: 500 !important;
    display: inline-block;
    text-transform: uppercase;
    padding-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}

.cr_link6 {
    background: var(--background-third-degree) !important;
    border: 1px solid #d0d0d0 !important;
    font-size: calc(var(--main-font-size) + 3px ) !important;
    font-weight: 400 !important;
    width: 570px;
}

.SetDate_ToDate {
    right: 224px;
    position: relative;
}

.message-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.message {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
}

.question {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.response {
    font-size: 14px;
    line-height: 1.6;
    padding-left: 20px;
    white-space: pre-line; /* keeps line breaks */
}

#menuAgentAI:before {
    content: "\f544";
}

span#menuAgentAI {
    color: var(--menu-color) !important;
}

.formTable {
    width: 650px;
}

.inputColumn {
    width: 400px;
    padding: 6px 10px;
}

.labelColumn {
    width: 200px;
    font-weight: bold;
    padding: 6px 10px;
    vertical-align: middle;
}

.textInput {
    width: 300px;
}

/* HORIZONTAL NAVIGATION BAR - replaces the old left column of Header.ascx. Position comes from td.cr_menu_container. Selectors are prefixed with .cr_bar to outrank style5.0.css, which loads after this file. */

td.cr_menu_container {
    background: var(--header-color);
}

/* Bar height, declared once: the content padding-top and the sandwich panel both read it. */
:root {
    --cr-bar-height: 64px;
}

.cr_bar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--cr-bar-height);
    padding: 0 14px;
}

/* Logo and user area take an equal share each, so the menu sits at the true centre of the bar. */
.cr_bar_logo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

.cr_bar .LogoImage {
    height: 38px;
    width: auto;
    display: block;
}

/* The nav group keeps its own width and stays centred; it, not the menu alone, holds the middle. */
.cr_bar .cr_bar_nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cr_bar .cr_menu {
    flex: 0 0 auto;
}


/* Menu item icons: target span_Menu, present whatever structure the control renders. */
.cr_bar .span_Menu {
    display: inline-block;
    vertical-align: middle;
    color: var(--menu-color);
}

.cr_bar .span_Menu:before {
    font-family: fontawesome !important;
    font-size: calc(var(--main-font-size) + 4px);
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    float: none;
    margin: 0 6px 0 0;
    vertical-align: middle;
    /* Without this the icon inherited the bar's own colour and stayed invisible until hovered. */
    color: var(--menu-color) !important;
}

/* Size, float and margin pinned on hover: the base rule enlarges the icon and shifts its neighbours. */
.cr_bar table.StaticMenuItemStyle:hover span:before,
.cr_bar table.DynamicMenuItemStyle:hover span:before {
    font-size: calc(var(--main-font-size) + 4px);
    float: none;
    margin: 0 6px 0 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* content redeclared here: prefixed with .cr_bar it outranks the original #menuXXX rules. */
/* Home points at the dashboard, so a house icon rather than the original document one. */
.cr_bar #menuFile:before { content: "\f015"; }
.cr_bar #menuFlights:before { content: "\f145"; }
.cr_bar #menuBookings:before { content: "\f274"; }
.cr_bar #menuCustomers:before { content: "\f0c0"; }
.cr_bar #menuInvoices:before { content: "\f155"; }
.cr_bar #menuProducts:before { content: "\f1b3"; }
.cr_bar #menuReporting:before { content: "\f080"; }
.cr_bar #menuSettings:before { content: "\f013"; }
.cr_bar #menuAgentAI:before { content: "\f544"; }
.cr_bar #menusearch:before { content: "\f002"; }
.cr_bar #menuHotels:before { content: "\f1ad"; }
.cr_bar #menuPackages:before { content: "\f0f2"; }
.cr_bar #menuDoBooking:before { content: "\f0f2"; }
.cr_bar #menuCar:before { content: "\f1b9"; }
.cr_bar #menuDestination:before { content: "\f277"; }
.cr_bar #menuTransport:before { content: "\f207"; }
.cr_bar #menuCommand:before { content: "\f291"; }
.cr_bar #menuShop:before { content: "\f290"; }
.cr_bar #menuEdition:before { content: "\f02b"; }
.cr_bar #menuReceptif:before { content: "\f02d"; }
.cr_bar #menuDivers:before { content: "\f271"; }
.cr_bar #menuAddOns:before { content: "\f085"; }
.cr_bar #menuTools:before { content: "\f055"; }
.cr_bar #menuTransferMoney:before { content: "\f0d6"; }
.cr_bar #menuCyberesa:before { content: "\f0ac"; }

.cr_bar td[id*="mainMenun"] a:before {
    float: none;
}

/* Icon and label on one line; line-height:1 on both so centring uses the glyph, not the line box. */
.cr_bar .Menu_TitleStyle {
    display: inline;
    vertical-align: middle;
    line-height: 1;
}

/* Smaller type: the original 16px/500 was written for the old bar and is too heavy on one line. */
.cr_bar .cr_menu a.StaticMenuItemStyle,
.cr_bar .cr_menu a.DynamicMenuItemStyle {
    font-size: calc(var(--main-font-size) + 1px) !important;
    font-weight: 400 !important;
}

.cr_bar .cr_menu .StaticMenuItemStyle {
    padding-left: 9px !important;
    padding-right: 9px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0;
    margin-bottom: 0;
}

/* Separator between entries: the + combinator leaves none before the first nor after the last. */
.cr_bar .cr_menu td[id*="mainMenun"] + td[id*="mainMenun"] {
    border-left: 1px solid rgba(255, 255, 255, .18);
}

/* icon after the label, constant 2px gap */
.cr_bar .span_Menu:before,
.cr_bar table.StaticMenuItemStyle:hover span:before,
.cr_bar table.DynamicMenuItemStyle:hover span:before {
    font-size: calc(var(--main-font-size) + 3px);
}

/* Icon and label truly centred: their baselines differ, so the link becomes an inline-flex container. */
.cr_bar .cr_menu a.StaticMenuItemStyle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* gap carries the spacing now, the margin would duplicate it */
.cr_bar .cr_menu a.StaticMenuItemStyle .span_Menu:before {
    margin: 0;
}

/* first-level submenus drop below the bar */
.cr_bar .DynamicMenuStyle {
    margin-top: 0;
    margin-left: 0;
}

/* ---- user area: clock, login, messages, profile, logout ---- */
.cr_bar_user {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

/* Light colour limited to the button: inherited further it would turn the profile panel white on white. */
.cr_bar_user {
    font-size: var(--main-font-size);
    white-space: nowrap;
}

.cr_bar .cr_profile_btn,
.cr_bar .cr_profile_btn span {
    color: var(--menu-color);
}

/* ---- profile dropdown ---- */
.cr_profile {
    position: relative;
    display: flex;
    align-items: center;
}

.cr_profile_btn {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 3px;
    font: inherit;
    color: var(--menu-color);
}

.cr_profile_btn:hover,
.cr_profile_btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .16);
}

.cr_profile_btn:focus-visible {
    outline: 2px solid var(--hover-color);
    outline-offset: -2px;
}

.cr_profile_menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--background-first-degree);
    border: 1px solid var(--background-third-degree);
    border-radius: 4px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
    padding: 6px 0;
    z-index: 60;
    text-align: left;
}

.cr_profile_menu[data-open="true"] {
    display: block;
}

.cr_profile_name {
    padding: 8px 14px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--background-third-degree);
    line-height: 1.35;
}

.cr_profile_item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    color: var(--font-color) !important;
    text-decoration: none;
    font-size: var(--main-font-size);
    white-space: nowrap;
}

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

/* Panel icons on a light background: prefixed with .cr_bar to outrank the white rule meant for the bar. */
.cr_bar .cr_profile_menu .cr_profile_ico:before {
    font-size: calc(var(--main-font-size) + 2px);
    color: var(--font-color);
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 1;
}

.cr_bar .cr_profile_menu .cr_profile_ico_user:before,
.cr_bar .cr_profile_menu .logout:before {
    font-family: fontawesome;
}

.cr_bar .cr_profile_menu .cr_profile_ico_user:before {
    content: "\f007";
}


.cr_bar .cr_profile_item:hover .cr_profile_ico:before {
    color: var(--menu-color);
}

/* user name: colour set explicitly, the zone rule was overriding it */
/* The Label renders an inline span; it must become a block so the two spans inside stack. */
.cr_bar .cr_profile_name .login {
    display: block;
}

/* Role above the name, small, in the application's yellow token rather than a hard-coded literal. */
.cr_bar .cr_profile_name .cr_profile_role {
    display: block;
    font-size: calc(var(--main-font-size) - 2px);
    font-weight: 600;
    color: var(--hover-color);
}

/* Name below, regular weight and the current text colour */
.cr_bar .cr_profile_name .cr_profile_login {
    display: block;
    font-size: var(--main-font-size);
    font-weight: 600;
    color: var(--font-color);
}

/* .login carries a padding meant for the old header, useless here */
.cr_bar .cr_profile_name .login {
    padding: 0;
}

/* Message counter: the old header's absolute positioning is cancelled, align-self recentres it. */
.cr_bar .cr_profile_menu .nbrMessages {
    position: static !important;
    top: auto !important;
    /* kept next to the label; margin-left:auto sent it to the far end of the line */
    margin: 0 0 0 7px !important;
    align-self: center;
    display: inline-block;
    min-width: 0;
    min-height: 0;
    padding: 2px 9px;
    border-radius: 10px;
    line-height: 1.5;
    /* the number stays centred whatever its digit count */
    text-align: center;
    background: var(--main-color);
    color: var(--menu-color) !important;
    font-size: calc(var(--main-font-size) - 1px);
    animation: none !important;
}

.cr_bar .cr_profile_item:hover .nbrMessages {
    background: var(--menu-color);
    color: var(--main-color) !important;
}

/* Version painted the exact colour of the bar: only selecting the text reveals it. */
.cr_bar_version {
    font-size: calc(var(--main-font-size) - 2px);
    line-height: 1.1;
    color: var(--header-color);
    user-select: text;
    /* placed left of the profile icon */
    order: -1;
}

.cr_bar_version ::selection,
.cr_bar_version::selection {
    color: var(--menu-color);
    background: var(--main-color);
}

.cr_bar #profilIcon:before,
.cr_bar .Notif:before {
    color: var(--menu-color);
    padding-top: 0;
}

.cr_bar #profilIcon:hover:before,
.cr_bar .Notif:hover:before {
    color: var(--hover-color);
}

/* the message counter was positioned for the old header */
.cr_bar .nbrMessages {
    position: static;
    margin: 0 0 0 4px;
    min-width: 0;
    padding: 0 5px;
    background: var(--main-color);
    color: var(--menu-color) !important;
}

/* Header_cr_logout stays a block: as a flex item the link inside shrank to its text width. */
.cr_bar #Header_cr_logout,
.cr_bar #header_Header_cr_logout {
    display: block;
}

/* ICONS-ONLY VARIANT: add cr_bar_icons to .cr_bar in Header.ascx. Tooltips come from e.Item.ToolTip. */

/* the label returns to its original display:none */
.cr_bar.cr_bar_icons .Menu_TitleStyle {
    display: none;
}

/* larger icon: it alone identifies the entry */
.cr_bar.cr_bar_icons .span_Menu:before,
.cr_bar.cr_bar_icons table.StaticMenuItemStyle:hover span:before,
.cr_bar.cr_bar_icons table.DynamicMenuItemStyle:hover span:before {
    font-size: calc(var(--main-font-size) + 10px);
    margin: 0;
}

/* tighter spacing between icons */
.cr_bar.cr_bar_icons .cr_menu .StaticMenuItemStyle {
    padding-left: 7px !important;
    padding-right: 7px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.cr_bar.cr_bar_icons .span_Menu {
    line-height: 1;
}

/* ---- content below the fixed bar ---- #wrap was a two-column grid whose 50px gutter belonged to the old side rail; one full-width column now. */
#wrap.tableIdentification.cellIdentification {
    grid-template-columns: 1fr;
}

/* padding-top must follow the .cr_bar height, which is position:fixed */
#td_container {
    padding-top: var(--cr-bar-height);
    padding-left: 24px;
    padding-right: 24px;
    /* The padding area stayed transparent next to .table_container, showing two shades side by side. */
    background-color: var(--background-sixth-degree);
}

/* ---- breadcrumb ---- Only the current page is underlined; parents are muted text underlined on hover. */

/* Clickable parents: barely lighter than the current page, enough to rank them without reading as two colours. */
/* Same family, size and weight as the current page: only colour and underline separate them. */
#td_container .Cr_Fildareian,
#td_container .Cr_FildareianLink {
    font-family: inherit;
    font-size: var(--main-font-size);
    font-weight: 500;
}

/* A real grey, not opacity: opacity also thins the glyphs and reads as a different weight. --breadcrumb-muted flips with the theme. */
:root {
    --breadcrumb-muted: #6b6b6b;
}

[theme="d"] {
    --breadcrumb-muted: #a6a6a6;
}

#td_container .Cr_FildareianLink {
    color: var(--breadcrumb-muted) !important;
    text-decoration: none;
    opacity: 1;
}

#td_container .Cr_FildareianLink:hover {
    color: var(--font-color) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* separator: discreet, it must not draw the eye */
#td_container .Cr_Fildareianredirect {
    color: var(--breadcrumb-muted) !important;
    opacity: .7;
}

/* current page: the only underlined item, and the most contrasted */
#td_container .Cr_Fildareian {
    color: var(--font-color) !important;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The breadcrumb sat flush with the OUTER edge of the card below it, while the card's own title
   starts 20px further in -- the padding of .page-content. The same inset lines the two up.
   Carried by the cell, not by the control: breadcrumbs.ascx.cs appends its links with
   Controls.Add, so they land AFTER its Table_Progress table rather than inside it. */
#td_container .table_container > tbody > tr:first-child > td {
    padding-left: 20px;
}


/* .table_container was absolute with height:100%, which forced getTableHeight() to set #td_container by hand. In normal flow that becomes unnecessary. */
#td_container .table_container {
    position: static;
    height: auto !important;
    width: 100%;
    margin: 0 !important;
    /* cellspacing="15" spaced the rows as much as the columns, so the breadcrumb sat 15px below
       the bar and 15px above the card. Only the vertical axis is reduced: the 15px horizontal
       keeps the card aligned with the padding of #td_container as before. */
    border-spacing: 15px 8px;
}

/* The card filled the height only while .table_container was absolute. On a table cell, height acts
   as a minimum. Budget: 64 bar + 8 spacing + 24 breadcrumb + 8 spacing + 8 under the card, plus the
   7px of slack the previous 140px already carried. */
#td_container .page-content {
    height: calc(100vh - 119px);
}

/* SCROLLBARS: two syntaxes, neither universal -- scrollbar-width/color for Firefox, ::-webkit-scrollbar for Chrome, Edge and Safari. WebKit pseudo-elements do not inherit, hence no selector. */
:root {
    --scrollbar-track: #ececec;
    --scrollbar-thumb: #bdb5b6;
    --scrollbar-thumb-hover: #948a8c;
}

[theme="d"] {
    --scrollbar-track: #1c1a1a;
    --scrollbar-thumb: #4d4547;
    --scrollbar-thumb-hover: #6f6568;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

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

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    /* a border in the track colour thins the thumb visually without shrinking its hit area */
    border: 2px solid var(--scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* corner between the vertical and horizontal bars, otherwise left system white */
::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* The mobile panel background is burgundy: a light grey thumb would stand out more than the content. */
.cr_bar .cr_menu::-webkit-scrollbar-track {
    background: transparent;
}

.cr_bar .cr_menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
    border-color: transparent;
}

.cr_bar .cr_menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .45);
}

.cr_bar .cr_menu {
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

/* NEUTRALISING Responsive.css OUTSIDE SANDWICH MODE: it fires rules written for the old side menu at 880px, while sandwich mode starts at 768px. These restore the bar in between. */
/* Responsive.css:112 detaches the whole bar at 880px with !important; td.cr_menu_container is (0,1,1) against (0,1,0), so specificity decides. */
td.cr_menu_container {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

.cr_bar div#header_divMenu {
    width: auto !important;
    float: none !important;
}

.cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"] {
    display: table-cell;
}

/* Responsive.css:104 forces 88% on the label cell, a leftover from the rail */
.cr_bar .cr_menu .StaticMenuItemStyle tr td:first-child {
    width: auto;
}

/* ============ VERTICAL LAYOUT - enabled by the cr_layout_vertical class on <html>. ============ */
/* Original rail width: .auto-style3 was 60px, .auto-style4 65px. */
:root {
    --cr-rail-width: 62px;
}

.cr_layout_vertical td.cr_menu_container {
    width: var(--cr-rail-width) !important;
    height: 100vh;
    height: 100dvh;
    border-bottom: 0;
    border-right: solid 1px var(--background-third-degree);
    /* no overflow here: it would clip the flyout panels */
    overflow: visible;
}

.cr_layout_vertical .cr_bar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 0;
    padding: 18px 0 0;
}

/* logo at the top, user area pushed to the bottom */
/* Explicit order for the whole stack. */
.cr_layout_vertical .cr_bar_logo {
    flex: 0 0 auto;
    justify-content: center;
    padding: 0 10px 6px;
    order: 1;
}

.cr_layout_vertical .cr_bar_version {
    order: 2;
    flex: 0 0 auto;
    text-align: center;
    padding: 0 2px 44px;
    font-size: calc(var(--main-font-size) - 4px);
    line-height: 1.25;
}

.cr_layout_vertical .cr_bar .cr_bar_nav {
    order: 3;
}

.cr_layout_vertical .cr_bar_logout {
    order: 4;
}

.cr_layout_vertical .cr_bar_nav {
    flex: 0 0 auto;
    display: block;
    width: 100%;
}

/* display:contents dissolves the wrapper so its children become direct flex children of .cr_bar. */
.cr_layout_vertical .cr_bar_user {
    display: contents;
}

/* No profile icon in the rail: the original sidebar had none, and Mon profil
   and Messages remain reachable from the Accueil menu. */
.cr_layout_vertical .cr_profile {
    display: none;
}

/* Logout as a plain rail icon, like the original sidebar had. */
.cr_bar_logout {
    display: none;
}

.cr_layout_vertical .cr_bar_logout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 13px 0;
    margin-bottom: 30px;
    color: var(--menu-color);
    text-decoration: none;
}

/* Same hover as a menu entry: solid white block, icon in the accent colour.
   Padding matches the rail entries so the block is the same height. */
.cr_layout_vertical .cr_bar_logout:hover {
    background: var(--menu-color);
    border-radius: 8px;
}

.cr_layout_vertical .cr_bar_logout:hover .logout:before {
    color: var(--main-color);
}

/* The panel already carries a logout entry; it would be redundant here. */
.cr_layout_vertical .cr_profile_menu #Header_cr_logout,
.cr_layout_vertical .cr_profile_menu #header_Header_cr_logout {
    display: none;
}

/* The panel opens to the RIGHT of the rail: below it there is nothing but the
   screen edge, and 240px would not fit in a 62px column anyway. */
.cr_layout_vertical .cr_profile_menu {
    top: auto;
    bottom: 0;
    right: auto;
    left: calc(100% + 6px);
}

/* Stacked entries: same deconstruction as the mobile panel, limited to the STRUCTURE table by the child combinator. */
.cr_layout_vertical .cr_bar .cr_menu > table,
.cr_layout_vertical .cr_bar .cr_menu > table > tbody,
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr {
    display: block;
    width: 100% !important;
}

.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"] {
    display: block;
    width: 100% !important;
    text-align: center;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

/* Only the first line goes: it drew a stray rule right under the logo. */
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"]:first-child {
    border-top: 0;
}

.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle,
/* The shared .StaticMenuItemStyle/.DynamicMenuItemStyle rule adds 8px top and 12px bottom to this. */
.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Original rail: icons only, labels hidden -- the default state of .Menu_TitleStyle, which the horizontal bar overrides. */
.cr_layout_vertical .cr_bar .Menu_TitleStyle {
    display: none;
}

.cr_layout_vertical .cr_bar .cr_menu a.StaticMenuItemStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 13px 0 !important;
}

/* asp:Menu emits TWO cells per entry: the caption and the pop-out arrow. */
/* box-sizing + max-width: the table carries a width="100%" attribute and the generated cells add padding on top of it. */
.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle,
.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle tbody,
.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
}

.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle tr td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 0 !important;
}

/* No overflow:hidden here: the flyout panels are absolutely positioned INSIDE this cell, so it would clip them. */
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"] {
    box-sizing: border-box;
}

.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle tr td + td {
    display: none !important;
}

/* Hover as the original sidebar had it: solid white block across the rail, icon flipped to the accent colour. */
.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle:hover {
    background: var(--menu-color) !important;
    border-radius: 8px !important;
}

.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle:hover .span_Menu:before,
.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle:hover a {
    color: var(--main-color) !important;
}

/* Centering has to be forced at every level: the generated table cells carry their own alignment. */
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"],
.cr_layout_vertical .cr_bar .cr_menu table.StaticMenuItemStyle td {
    text-align: center;
}

/* Centring driven by text-align on a full-width block rather than auto margins: the icon is a :before pseudo-element, which margins cannot centre. */
.cr_layout_vertical .cr_bar .span_Menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.cr_layout_vertical .cr_bar .span_Menu:before {
    margin: 0;
    display: block;
}

/* Size repeated on the hover selector so the icon never grows: any change
   would shift every icon below it. */
.cr_layout_vertical .cr_bar .span_Menu:before,
.cr_layout_vertical .cr_bar table.StaticMenuItemStyle:hover span:before,
.cr_layout_vertical .cr_bar table.DynamicMenuItemStyle:hover span:before {
    font-size: calc(var(--main-font-size) + 7px);
    display: inline-block;
    float: none;
    margin: 0;
    padding: 0;
}

/* logo reduced to the square icon, as in the original rail */
.cr_layout_vertical .cr_bar .LogoImage {
    height: 42px;
    width: 42px;
    object-fit: contain;
}

.cr_layout_vertical .cr_bar .cr_menu .StaticMenuItemStyle {
    margin: 0;
    border-radius: 0;
    padding: 0 !important;
}

/* Submenu rows get the same solid white hover as the rail entries, with the
   label flipped to the accent colour. Square, full width, no radius. */
.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle:hover {
    background: var(--menu-color) !important;
    border-radius: 0 !important;
}

.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle:hover a {
    color: var(--main-color) !important;
}

/* ---- submenus: flyout on the right, as the original rail had ---- */
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"] {
    position: relative;
}

/* The script moves each panel into its entry cell, so the cell is the containing block and left:100% opens the panel beside it. */
.cr_layout_vertical .cr_bar .cr_menu div[id$="Items"],
.cr_layout_vertical .cr_bar .cr_menu .DynamicMenuStyle {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    /* Width follows the longest label instead of a fixed value, as the original sidebar did. */
    width: auto !important;
    min-width: 0 !important;
    max-width: 320px;
    white-space: nowrap;
    box-sizing: border-box;
    /* Panels ARE nested now - each one sits in its entry's cell, inside its parent. */
    overflow: visible !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .28) !important;
    background: var(--header-color) !important;
    z-index: 60;
}

/* A containing block at every depth, so each panel opens in front of its own
   entry rather than at the top of its parent. */
.cr_layout_vertical .cr_bar .cr_menu div[id$="Items"] td[id*="mainMenun"] {
    position: relative;
}

/* The entry of the page being viewed, and every entry above it: the whole path through the tree. */
.cr_layout_vertical .cr_bar .cr_menu td.cr_current > table {
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 3px 0 0 var(--menu-color);
}

/* Flattening the rail's table with display:block collapses every box in it to about two pixels. */
.cr_layout_vertical .cr_bar .cr_menu > table,
.cr_layout_vertical .cr_bar .cr_menu > table > tbody,
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr,
.cr_layout_vertical .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"] {
    width: var(--cr-rail-width) !important;
}


/* width:auto here too: a table forced to 100% would stretch the panel back
   out and defeat the shrink-to-fit above. */
.cr_layout_vertical .cr_bar .cr_menu div[id$="Items"] > table,
.cr_layout_vertical .cr_bar .cr_menu div[id$="Items"] > table > tbody,
.cr_layout_vertical .cr_bar .cr_menu div[id$="Items"] > table > tbody > tr,
.cr_layout_vertical .cr_bar .cr_menu div[id$="Items"] > table > tbody > tr > td {
    display: block !important;
    width: auto !important;
    text-align: left;
}

/* The shared .StaticMenuItemStyle/.DynamicMenuItemStyle rule adds 8px top and 12px bottom to this. */
.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cr_layout_vertical .cr_bar .cr_menu a.DynamicMenuItemStyle {
    white-space: nowrap;
}

/* The panel sizes itself to the longest label, so the chevron cell lands hard against the right. */
/* Tight against the label: this cell is what widens the panel beyond the
   longest caption, so every pixel here is a pixel of dead space. */
.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle tr td + td {
    display: table-cell !important;
    width: 1% !important;
    /* 16px before the chevron so the label does not run into it, 12px after so the row is not cramped. */
    padding: 0 12px 0 16px !important;
    text-align: right;
    vertical-align: middle;
}

.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle tr td + td:after {
    display: inline !important;
    content: "\f105" !important;
    font-family: fontawesome;
}

.cr_layout_vertical .cr_bar .cr_menu table.DynamicMenuItemStyle:hover tr td + td:after {
    color: var(--main-color) !important;
}

/* Submenu rows: 15px text on 12px padding, matching the original. My earlier
   values had compressed them well below it. */
.cr_layout_vertical .cr_bar .cr_menu a.DynamicMenuItemStyle {
    display: block;
    /* 20px on the left used to clear the dash marker, which vertical no longer draws. */
    /* Same on both sides: 10px before the label, and the arrow cell keeps 10px
       after the chevron, so the row reads evenly inset rather than pushed left. */
    padding: 12px 10px !important;
    font-size: calc(var(--main-font-size) + 2px) !important;
    border-radius: 0 !important;
    border-top: 0;
}

/* The content is offset to the side instead of the top, so nothing has to be cleared above it:
   the row spacing below is the whole gap, where the horizontal bar needs room for a fixed bar. */
.cr_layout_vertical #td_container {
    padding-top: 0;
    padding-left: calc(var(--cr-rail-width) + 24px);
}

/* Height budget for the card, which must still end at the bottom of the window:
   8 spacing + 24 breadcrumb + 8 spacing + 8 spacing under the card. */
.cr_layout_vertical #td_container .page-content {
    height: calc(100vh - 48px);
}


/* ---- sandwich button: only exists below 768px ---- */
.cr_burger {
    display: none;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    margin: 0;
    cursor: pointer;
    color: var(--menu-color);
    font: inherit;
    border-radius: 3px;
    line-height: 1;
}

.cr_burger:before {
    content: "\f0c9";
    font-family: fontawesome;
    font-size: calc(var(--main-font-size) + 6px);
}


.cr_burger:hover,
.cr_burger[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .16);
}

.cr_burger:focus-visible {
    outline: 2px solid var(--hover-color);
    outline-offset: -2px;
}

/* TIER 1 -- 769px and up, icons-only variant: labels stay off the bar and tooltips take over.
   Scoped to cr_bar_icons, which the user's menu choice sets: without it this hid the labels at every
   desktop width and the "horizontal with labels" choice could never show them.
   Scoped to the horizontal layout too: the vertical rail hides its own labels and sizes its icons itself. */
@media (min-width: 769px) {

    html:not(.cr_layout_vertical) .cr_bar.cr_bar_icons .Menu_TitleStyle {
        display: none;
    }

    html:not(.cr_layout_vertical) .cr_bar.cr_bar_icons .span_Menu:before,
    html:not(.cr_layout_vertical) .cr_bar.cr_bar_icons table.StaticMenuItemStyle:hover span:before,
    html:not(.cr_layout_vertical) .cr_bar.cr_bar_icons table.DynamicMenuItemStyle:hover span:before {
        font-size: calc(var(--main-font-size) + 7px);
        margin: 0;
    }

    html:not(.cr_layout_vertical) .cr_bar.cr_bar_icons .cr_menu .StaticMenuItemStyle {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}

/* TIER 2 -- below 880px: sandwich menu. The menu leaves the bar for a full-width drop-down opened by #crBurgerBtn, and labels come back. */
@media (max-width: 768px) {

    td.cr_menu_container {
        position: fixed !important;
        width: 100% !important;
    }

    .cr_bar {
        gap: 10px;
        padding: 0 8px;
    }

    .cr_burger {
        display: block;
    }

    /* FIXED positioning, not absolute: absolute made the panel depend on the first positioned ancestor. */
    /* Appearance only: the geometry is set by the ID rule above */
    .cr_bar .cr_menu {
        display: none;
        /* The panel scrolls instead of trying to fit an expanded tree on screen: max-height caps it. */
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 14px;
        background: var(--header-color);
        border-top: 1px solid rgba(255, 255, 255, .15);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
        /* z-index does nothing on a static element: without this the declaration
           below was inert and the panel took no place in the stacking order. */
        position: relative;
        z-index: 55;
    }

    .cr_bar .cr_menu[data-open="true"] {
        display: block;
    }

    /* asp:Menu nests two table levels: the STRUCTURE one and the one per ENTRY. Only the first is flattened; the child combinator guarantees it. */
    .cr_bar .cr_menu > table,
    .cr_bar .cr_menu > table > tbody,
    .cr_bar .cr_menu > table > tbody > tr {
        display: block;
        width: 100% !important;
    }

    .cr_bar .cr_menu > table > tbody > tr > td[id*="mainMenun"] {
        display: block;
        width: 100% !important;
        text-align: left;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .10);
    }

    /* labels come back: width is no longer scarce in a vertical list */
    .cr_bar .Menu_TitleStyle {
        display: inline;
    }

    .cr_bar .span_Menu:before {
        font-size: calc(var(--main-font-size) + 3px);
        margin: 0 8px 0 0;
        width: 20px;
        text-align: center;
    }

    /* Same size and same gap whatever the state. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu a.StaticMenuItemStyle .span_Menu:before,
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.StaticMenuItemStyle:hover a .span_Menu:before,
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.StaticMenuItemStyle:hover span:before {
        font-size: calc(var(--main-font-size) + 3px) !important;
        width: 20px !important;
        margin: 0 10px 0 0 !important;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }

    /* Tighter rows: with seven entries and one submenu open, every pixel of height counts. */
    .cr_bar .cr_menu a.StaticMenuItemStyle {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        padding: 12px 18px !important;
        font-size: var(--main-font-size) !important;
    }

    /* The submenu arrow images add nothing in an unfolded list and take a whole cell. */
    .cr_bar .cr_menu td:last-child img,
    .cr_bar .cr_menu table.StaticMenuItemStyle tr td:last-child:after,
    .cr_bar .cr_menu table.DynamicMenuItemStyle tr td + td:after {
        display: none !important;
        content: none !important;
    }

    /* asp:Menu renders a SECOND cell in an entry only when that entry has children, so it is a reliable has-children test. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.StaticMenuItemStyle tr td + td:after,
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.DynamicMenuItemStyle tr td + td:after {
        content: "\f105" !important;
        font-family: fontawesome !important;
        display: inline-block !important;
        color: var(--menu-color);
        opacity: .65;
        font-size: calc(var(--main-font-size) + 2px);
        padding-right: 18px;
        /* Turned by - cr-chevron, which the accordion sets on this very cell. */
        transform: rotate(var(--cr-chevron, 0deg));
        transition: transform .15s ease;
    }

    /* Second, independent path to the same result: the accordion also marks the
       arrow cell with a class. If either mechanism reaches it, the chevron turns. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu td.cr_open:after {
        transform: rotate(90deg) !important;
        opacity: 1;
    }

    .cr_bar .cr_menu .StaticMenuItemStyle {
        margin: 0;
        border-radius: 0;
        padding: 0 !important;
    }

    /* Drop-down panels stay in the flow: asp:Menu positions them absolutely from JavaScript. */
    /* Level hierarchy carried by each panel CONTAINER, not its entries: nesting makes indent and shading accumulate on their own, at any depth. */
    /* Accordion only. Excluded in vertical, which keeps its flyouts at every width. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu div[id$="Items"],
    html:not(.cr_layout_vertical) .cr_bar .cr_menu .DynamicMenuStyle {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        /* rgba background: nesting composes the layers, so each level darkens a little more with no dedicated rule */
        background: rgba(0, 0, 0, .13) !important;
    }

    /* Same distinction: only the panel structure table is flattened, not the one of each entry. */
    .cr_bar .cr_menu div[id$="Items"] > table,
    .cr_bar .cr_menu div[id$="Items"] > table > tbody,
    .cr_bar .cr_menu div[id$="Items"] > table > tbody > tr,
    .cr_bar .cr_menu div[id$="Items"] > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: left;
    }

    .cr_bar .cr_menu table.DynamicMenuItemStyle {
        background: transparent !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .cr_bar .cr_menu a.DynamicMenuItemStyle {
        display: block;
        padding: 11px 18px !important;
        font-size: var(--main-font-size) !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }

    /* ---- per-level indent, declared explicitly ---- Container padding does not accumulate, inner tables restart at zero. One selector per level is verbose but deterministic. Three levels cover the deepest branch. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu div[id$="Items"] a.DynamicMenuItemStyle {
        padding-left: 42px !important;
    }

    html:not(.cr_layout_vertical) .cr_bar .cr_menu div[id$="Items"] div[id$="Items"] a.DynamicMenuItemStyle {
        padding-left: 64px !important;
    }

    html:not(.cr_layout_vertical) .cr_bar .cr_menu div[id$="Items"] div[id$="Items"] div[id$="Items"] a.DynamicMenuItemStyle {
        padding-left: 86px !important;
    }

    /* ---- click-driven display, TOUCH SCREENS ONLY ---- cr_touch is set by the script only on a touch browser, so hover keeps working on a pointer. !important beats the inline style asp:Menu writes. */
    /* Accordion only, hence excluded in vertical. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu.cr_touch div[id$="Items"] {
        display: none !important;
    }

    html:not(.cr_layout_vertical) .cr_bar .cr_menu.cr_touch div[id$="Items"][data-expanded="true"] {
        display: block !important;
    }

    /* A dash before each sub-entry: indentation alone reads poorly when rows follow one another. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu a.DynamicMenuItemStyle:before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 1px;
        margin-right: 10px;
        margin-left: -18px;
        vertical-align: middle;
        background: rgba(255, 255, 255, .45);
    }

    /* ---- hover ---- The original rule paints a solid white background, meant for a small chip in a bar. On a full-width row it is harsh and the white text vanished; a light veil keeps it readable. */
    .cr_bar .cr_menu table.StaticMenuItemStyle,
    .cr_bar .cr_menu table.DynamicMenuItemStyle {
        width: 100% !important;
    }

    /* The row spans the full width, but its two cells still share it by content, so the label cell takes 100% and the chevron cell shrinks. */
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.StaticMenuItemStyle tr td:first-child,
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.DynamicMenuItemStyle tr td:first-child {
        width: 100%;
    }

    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.StaticMenuItemStyle tr td + td,
    html:not(.cr_layout_vertical) .cr_bar .cr_menu table.DynamicMenuItemStyle tr td + td {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }

    .cr_bar .cr_menu table.StaticMenuItemStyle:hover,
    .cr_bar .cr_menu table.DynamicMenuItemStyle:hover {
        background: rgba(255, 255, 255, .18) !important;
    }

    .cr_bar .cr_menu table.StaticMenuItemStyle:hover a,
    .cr_bar .cr_menu table.DynamicMenuItemStyle:hover a,
    .cr_bar .cr_menu table.StaticMenuItemStyle:hover span:before {
        color: var(--menu-color) !important;
    }

    /* the inner table of each entry must not impose its width */
    .cr_bar .cr_menu table {
        width: 100% !important;
        table-layout: auto;
    }

    /* the arrow of entries with a submenu points down here */
    .cr_bar .cr_menu table.StaticMenuItemStyle tr td:last-child img,
    .cr_bar .cr_menu table.DynamicMenuItemStyle tr td:last-child img {
        display: none !important;
    }

    /* ALL the panel geometry must go through an ID selector: Responsive.css forces #header_divMenu to 45px at (1,0,0), which a class rule loses to even with !important. */
    .cr_bar div#header_divMenu {
        position: fixed !important;
        top: var(--cr-bar-height) !important;
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        /* Height follows the content: collapsed, the panel is exactly as tall as its first-level entries. */
        height: auto !important;
        max-height: calc(100vh - var(--cr-bar-height)) !important;
        max-height: calc(100dvh - var(--cr-bar-height)) !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Mobile order: sandwich left, logo centre, profile right. order rearranges without touching the markup, which keeps its logical reading order. Both side zones take an equal share so the logo sits at the true centre. */
    .cr_bar .cr_bar_nav {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }

    .cr_bar_logo {
        order: 2;
        flex: 0 0 auto;
        min-width: 0;
    }

    .cr_bar_user {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }

    /* The logo keeps its desktop size: it was capped at 30px here and shrank as the window narrowed. */
    .cr_bar .LogoImage {
        height: 38px;
    }

    .cr_bar_version {
        display: none;
    }
}

/* The vertical layout is deliberately NOT responsive: it keeps its rail at every width. */
@media (max-width: 768px) {

    .cr_layout_vertical .cr_burger {
        display: none;
    }

    /* The sandwich block reorders the bar (nav 1, logo 2, user 3), and those orders leak into the vertical layout, which restores its own. */
    .cr_layout_vertical .cr_bar_logo {
        order: 1;
        flex: 0 0 auto;
        padding: 0 10px 6px;
    }

    /* The sandwich block hides the version. */
    .cr_layout_vertical .cr_bar_version {
        order: 2;
        display: block;
    }

    .cr_layout_vertical .cr_bar_logout {
        order: 4;
    }

    .cr_layout_vertical .cr_bar .cr_bar_nav {
        order: 3;
        display: block;
        width: 100%;
        flex: 0 0 auto;
    }

    .cr_layout_vertical .cr_bar div#header_divMenu {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        /* height too, not only max-height: the sandwich now imposes a fixed one. */
        height: auto !important;
        max-height: none !important;
        top: auto !important;
        left: auto !important;
    }

    .cr_layout_vertical .cr_bar .cr_menu {
        display: block;
        overflow: visible;
        padding: 0;
        background: transparent;
        border-top: 0;
        box-shadow: none;
    }

}

/* . */
@media (max-width: 768px) {

    html:not(.cr_layout_vertical) .cr_bar div#header_mainMenu div[id$="Items"] {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
}