/*RADIOSHOP GLOBAL VARIABLES*/
:root {
    --RADIOSHOP_BLUE_STYLE: #009fe3;
    --MENU_PARC: #009fe3;
    --MENU_MESSAGE: #f77016;
    --MENU_MUSIQUE: #ed4ec3;
    --MENU_VIDEO: #6cc626;
    --MENU_ADMIN: #bfab0a;
    --MENU_USER: #779393;
    --red: #b00;
    --blue: #4679bd;
    --grey: #ddd;
    --W200: 200px;
    --Lft: left;
}

/* HEADER MASTER SECTIONS */
header { /*height:120px;*/
    width: 100%;
    background-color: #C2C2C2
}

html {
    overflow-x: hidden
}

.titleHeader {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
}
#formLoginDefault {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: url('../pictures/waveform-login-fullhd.webp'), linear-gradient(to left, #1babe3, #1e89cb);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}
.imgHead {
    float: left;
    padding: 5px;
    margin-top: 3px;
    margin-left: 2px
}

.brand-bg {
    background: none #f2f5c9 !important;
}

.site-bg {
    background: none #cdffc9 !important;
}

.tag-bg {
    background: none #f5c9e1 !important;
}

.identity-bg {
    background: none #e0e0f1 !important;
}

.navLogout {
    float: right;
    padding-top: 8px;
    padding-right: 15px;
}


::placeholder {
    color: #999999;
    opacity: 1
}
/* Chrome, Firefox, Opera, Safari 10.1+ */
:-ms-input-placeholder {
    color: #999999
}
/* Internet Explorer 10-11 */
::-ms-input-placeholder {
    color: #999999
}
/* Microsoft Edge */

/* LOADER */
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.waitingLoader {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('../pictures/ajax-loader.gif') 50% 50% no-repeat;
}

.pickerFlags {
    margin: 10px;
}

.in30 {
    width: 36% !important;
}

.in70 {
    width: 61% !important;
}

element.style {
    height: 30px;
}

.targetOfficePage #txtEmail, .targetOfficePage #txtTelGSM, .targetOfficePage #txtTelPro {
    width: 100% !important;
}

body.loading .waitingLoader {
    overflow: hidden;
}

body.loading .waitingLoader {
    display: block;
}

.jtable-delete-confirm-message {
    padding: 15px
}
.ebSIT.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
#masterBody.page-autocomplete .ui-autocomplete {
    z-index: 999999 !important;
    position: absolute !important;
    width: 275px !important;
    height: 100px !important;
}
/* mediaorder grid progress bar */
.GRID_PROGRESS {
    width: 26px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
}

.GRID_FILTER_UNKNOWN {
    background-image: url("../pictures/mediaorder_state_0.png");
}

.GRID_FILTER_INIT, .GRID_FILTER_NEW {
    background-image: url("../pictures/mediaorder_state_10.png");
}

.GRID_FILTER_REDACTION {
    background-image: url("../pictures/mediaorder_state_20.png");
}

.GRID_FILTER_VALIDATION {
    background-image: url("../pictures/mediaorder_state_30.png");
}

.GRID_FILTER_PRODUCTION {
    background-image: url("../pictures/mediaorder_state_40.png");
}

.GRID_FILTER_PUBLICATION {
    background-image: url("../pictures/mediaorder_state_50.png");
}

.GRID_FILTER_BDC,
.GRID_FILTER_VOICE,
.GRID_FILTER_VALIDATION_AUDIO {
    background-image: url("../pictures/mediaorder_state_45.png");
}

.GRID_FILTER_AUDIO_MODIFICATION {
    background-image: url("../pictures/mediaorder_state_35.png");
}

.GRID_FILTER_AUDIO_MODIFICATION {
    background-image: url("../pictures/mediaorder_state_46.png");
}

.GRID_FILTER_TEXTE_MODIFICATION {
    background-image: url("../pictures/mediaorder_state_35.png");
}

.GRID_FILTER_WAIT_VOICE {
    background-image: url("../pictures/mediaorder_state_38.png");
}

.GRID_FILTER_DELETE {
    background-image: url("../pictures/mediaorder_state_delete.png");
}

.GRID_FILTER_END {
    background-image: url("../pictures/mediaorder_state_60.png");
}
/*select option:first-child {
	color: #999999;
}*/

/* Hidden placeholder */
select option[disabled]:first-child {
    color: #999999;
}
.mixedAudioVideoPreviewFrame {
    border-radius: 16px;
    background: #fdfdfd;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: fit-content;
}
#grpAudioBk video {
    border-radius: 12px;
} 
.btShortcutGenLink {
    float: left;
    position: absolute;
    right: 0;
    margin-right: 10px;
    margin-top: 4px;
    cursor: pointer;
}

.btShortcutGenLinkBrother {
    float: left;
    /* margin-left: 25px; */
    width: 94%;
}


@font-face {
    font-family: 'Roboto';
    src: url('../ui/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.selectplaceholder {
    color: #999999 !important;
}
.password-edit {
    background-color: #f0f0f0;
}
.selectitem {
    color: #000000 !important;
}
/*override for layout*/
.autoScrollY div.grid-stack {
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
    /*margin:0;*/
}

.optStockItms {
    font-size: 0.9em
}
/***********************************************************************/
/*GLOBAL*/
/***********************************************************************/
.overlay {
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: wait;
    display: none;
}

.blkScroller {
    overflow-y: auto;
    margin-top: -6px;
}

.ContentAlarma {
    font-size: 1.3em
}

.appVersion {
    opacity: 0.5;
    margin-top: 10px;
}

.jtable-busy-panel-background {
    opacity: 0;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proximanova-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova.woff') format('woff');
}



html, body, textarea {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'ProximaNova';
}

.htmlNoScroll {
    overflow: hidden;
}

.bodyNoScroll {
    overflow: hidden;
}

.jtable {
    cursor: default;
}

.icoW i {
    font-size: 2em;
}

.weathInfo {
    font-size: 1em;
}

.audioRS {
}

.icoW {
    padding-top: 3px;
    cursor: pointer;
    width: 62px;
    display: inline-block;
    border: 2px solid #ccc;
    background-color: #3fd400;
    color: white;
    height: 55px;
    text-align: center;
    border-radius: 5px;
}

.WeatherCtrl {
    margin-bottom: 10px
}

.weathInfoUp {
    font-size: 0.85em;
    height: 30px
}

    .weathInfoUp i {
        position: relative;
        padding-left: 2px;
        top: 6px;
    }

.icoActif {
    background-color: #3fd400
}

.icoNone {
    background-color: #fd2252
}
/*@font-face {font-family: 'LeagueGothicRegular';src: url('../ui/fonts/League_Gothic-webfont.eot');src: url('../ui/fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),url('../ui/fonts/League_Gothic-webfont.woff') format('woff'),url('../ui/fonts/League_Gothic-webfont.ttf') format('truetype'),url('../ui/fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');font-weight: normal;font-style: normal;}*/
/***********************************************************************/
/*----------------------------
	The Navigation Menu
-----------------------------*/
.dvNewLine {
    clear: both;
}

.colorNav {
    width: 100%;
    background: #333;
    height: 44px;
    line-height: 1
}

    .colorNav .titleMenuGroup {
        margin-left: 10px;
    }

    .colorNav > ul > li {
        list-style: none;
        display: inline-block;
        position: relative;
        color: #FFF;
        margin-left: 20px;
    }

.dvMenuList {
    float: left;
}

.dvMenuList, .txtNavInfo {
    margin-top: 12px;
}

.txtNavInfo {
    font: 1.3em 'ProximaNova', sans-serif;
    white-space: nowrap;
    color: #FFF;
    float: right;
    margin-right: 20px;
    opacity: 0.5;
    display: none
}

.titleBarDecoration {
    cursor: pointer
}

.bkTxtNavMenu {
    text-align: left
}

.colorNav > ul > li > a {
    color: inherit;
    text-decoration: none;
    font-size: 1.3em;
    padding: 5px 10px 0 5px;
    font-family: 'ProximaNova';
}

.up {
    text-transform: uppercase;
}

.colorNav li ul {
    position: absolute;
    list-style: none;
    text-align: center;
    z-index: 10000000;
    top: 16px;
    font: 1em 'ProximaNova', sans-serif;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.10s linear;
    -moz-transition: max-height 0.10s linear;
    transition: max-height 0.10s linear;
}

.pickerOptions {
    float: left;
    width: 30px;
    height: 45px;
    font-size: 1.5em;
    margin-left: 10px;
    color: #fff;
}

    .pickerOptions a {
        color: #fff;
    }

.addSubMenuSecInc {
    padding-left: 2px;
}

    .addSubMenuSecInc a {
        cursor: pointer;
    }

.sectionSubMenu {
    padding: 6px 10px 17px 2px;
    height: 10px;
    text-align: left;
    font-size: .9em;
}

.colorNav li ul li a i {
    margin-right: 5px;
    min-width: 18px;
    float: left;
}

.sectionSubMenu, .colorNav li ul li.sectionSubMenu a i {
    color: #fff
}

.colorNav li.blueStyle ul li:hover {
    background-color: var(--MENU_PARC);
}

.blueStyle > a i {
    color: var(--MENU_PARC);
    border-bottom-color: var(--MENU_PARC);
}

.sectionSubMenuBlue {
    border-left: 8px solid var(--MENU_PARC);
    /*border-top: 1px solid var(--MENU_PARC);*/
}

.borderSectionPurple {
    border-bottom: 1px solid var(--MENU_MUSIQUE)
}

.colorNav li.purpleStyle ul li:hover {
    background-color: var(--MENU_MUSIQUE);
}

.purpleStyle > a i {
    color: var(--MENU_MUSIQUE);
    border-bottom-color: var(--MENU_MUSIQUE);
}

.sectionSubMenuPurple {
    border-left: 8px solid var(--MENU_MUSIQUE);
}

.borderSectionYellow {
    border-bottom: 1px solid var(--MENU_ADMIN)
}

.colorNav li.yellowStyle ul li:hover {
    background-color: var(--MENU_ADMIN);
}

.yellowStyle > a i {
    color: var(--MENU_ADMIN);
    border-bottom-color: var(--MENU_ADMIN);
}

.sectionSubMenuYellow {
    border-left: 8px solid var(--MENU_ADMIN);
}

.borderSectionGrey {
    border-bottom: 1px solid var(--MENU_ADMIN)
}

.colorNav li.greyStyle ul li:hover {
    background-color: var(--MENU_USER);
}

.greyStyle > a i {
    color: var(--MENU_USER);
    border-bottom-color: var(--MENU_USER);
}

.sectionSubMenuGrey {
    border-left: 8px solid var(--MENU_USER);
}

.borderSectionGreen {
    border-bottom: 1px solid var(--MENU_VIDEO)
}

.colorNav li.greenStyle ul li:hover {
    background-color: var(--MENU_VIDEO);
}

.greenStyle > a i {
    color: var(--MENU_VIDEO);
    border-bottom-color: var(--MENU_VIDEO);
}

.sectionSubMenuGreen {
    border-left: 8px solid var(--MENU_VIDEO);
}

.borderSectionOrange {
    border-bottom: 1px solid var(--MENU_MESSAGE)
}

.colorNav li.orangeStyle ul li:hover {
    background-color: var(--MENU_MESSAGE);
}

.orangeStyle > a i {
    color: var(--MENU_MESSAGE);
    border-bottom-color: var(--MENU_MESSAGE);
}

.sectionSubMenuOrange {
    border-left: 8px solid var(--MENU_MESSAGE);
}

.sectionSubMenu, .colorNav li ul li.sectionSubMenu, .colorNav li ul li.sectionSubMenu:hover {
    /*background-color: hsl(0, 0%, 26%);*/
    background: #5f5f5f;
}

.sectionSubMenuText {
    padding-left: 4px;
    color: #dadada;
}

.sectionSubMenuIco {
    float: left;
}

.colorNav li ul li {
    background: #313131;
    width: 276px;
}

.ui-dialog .btContainer {
    font-size: 0.85em;
}
/* do not change */
.colorNav li ul li a {
    padding: 12px 6px 12px 6px;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: left
}
/*.colorNav li ul li:nth-child(odd){ background-color:#363636;}*/

.colorNav li ul li:first-child {
    border-radius: 3px 3px 0 0;
    margin-top: 25px;
    position: relative;
}

.colorNav .desktop-menu li ul li:first-child:before { /* the pointer tip */
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    border: 5px solid transparent;
    border-bottom-color: #5f5f5f;
    left: 50%;
    top: -10px;
    margin-left: -5px;
}

.grpFilterGenericDDL {
    width: 100%
}

.colorNav li ul li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.colorNav li:hover ul {
    max-height: 800px; /* Increase when adding more dropdown items */
}

.cart {
    position: fixed;
    bottom: 34px;
    right: 34px;
    width: 40px;
    height: 40px;
    z-index: 200 !important;
    transition: all .2s ease-in-out;
}

.cartActionIco {
    width: 24px;
    height: 28px;
    border: solid 1px #c2c2c2;
    border-radius: 2px;
    float: left;
    margin: 1px;
    padding: 0px;
    text-align: center;
}

    .cartActionIco:hover {
        background: #ec38a4;
        border: solid 1px #ec38a4;
    }

#btCartClose {
    cursor: pointer;
}

#cartGroupSelector {
    margin-left: 5px;
}

.cartActionIco i {
    width: 24px;
    height: 28px;
    padding-top: 5px;
}

    .cartActionIco i:hover {
        color: #fff;
    }

@-webkit-keyframes wkcartanim {
    0% {
        -webkit-transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.3)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@keyframes stdcartanim {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.3)
    }

    100% {
        transform: scale(1)
    }
}

@-moz-keyframes mozcartanim {
    0% {
        -moz-transform: scale(1)
    }

    50% {
        -moz-transform: scale(1.3)
    }

    100% {
        -moz-transform: scale(1)
    }
}

@-o-keyframes ocartanim {
    0% {
        -o-transform: scale(1)
    }

    50% {
        -o-transform: scale(1.3)
    }

    100% {
        -o-transform: scale(1)
    }
}

.cartanim {
    animation: stdcartanim 1s ease-in-out; /* IE 10+, Fx 29+ */
    -webkit-animation: wkcartanim 1s ease-in-out; /* Safari 4+ */
    -moz-animation: mozcartanim 1s ease-in-out; /* Fx 5+ */
    -o-animation: ocartanim 1s ease-in-out; /* Opera 12+ */
}

.cart:hover {
    transform: scale(1.3);
}

/* page line skeleton*/
.infoSEditLabel {
    margin: 20px;
    font-size: 1.1em;
    color: #699bfa;
}
.filterIconLineFile {
    position: absolute;
    font-size: 1.4em;
    top: 9px;
    right: 10px;
}

.dtSpanLastModifs {
    width: 130px;
    margin-left: 10px;
    position: absolute;
    right: 0;
    font-size: 1.2em;
    margin-top: 7px;
}



.dtSelectModifs {
    width: 200px;
    margin-left: 20px;
    position: absolute;
    right: 150px;
}

.infoComments {
    width: 20px;
    margin-left: 30px;
    position: absolute;
    right: 360px;
}

.truncComment {
    width: auto;
    margin-left: 10px;
    position: absolute;
    font-size: 1em;
    margin-top: 7px;
    right: 390px;
    font-style:italic;
}

.icoSort {
    padding-left: 5px;
}

.cart-fab {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #ec389f;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    transition: 0.2s ease-out;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: #FFF;
}

    .cart-fab:hover {
        background-color: #4db6ac;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
    }

.cart-btn-large {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.cartPanel {
    position: absolute;
    top: 45px;
    right: 0;
    width: 450px;
    min-height: calc(100% - 45px);
    height: 200px;
    background: #e8e8e8;
    z-index: 100000;
    /*background-color: rgba(232, 232, 232,0.9); this is for transparency */
    border-left: 2px solid #dbd9d9;
    border-bottom: 2px solid #dbd9d9;
    display: none;
}

.itCartElt {
    /* margin-left: 30
px
; */
    margin-top: -px;
    height: 30 px;
    -webkit-user-select: none;
    -moz-user-select: none;
    padding: 10 px;
    -ms-user-select: none;
    user-select: none;
}

.btOptionsCopie:hover {
    background-color: #5d5d5d;
    color: white
}

.cartOptions, .cartOptionsTag {
    height: 200px;
    background: #eaeaea;
    padding: 10px;
    margin-bottom: 25px;
    display: none
}

.optionsTitle {
    font-size: 1.3em;
    font-style: oblique;
    color: #868585;
    border-bottom: 1px solid #dedede;
    margin-bottom: 5px
}

.cartHeader {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 3px;
}

.cartTitle {
    font-size: 1em;
    color: #ec389f;
    font-weight: bold;
    background-color: #f2f2f2;
    margin-bottom: 5px;
    height: 45px;
    margin-top: 5px;
    border-bottom: 1px solid;
    width: 220px;
    border-color: #c2c2c2;
}

.cartPanel li {
    font-size: 0.8em;
    padding: 9px;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid #e2e2e2;
}

.cartPanel ol {
    list-style-type: none;
    padding-left: 5px;
    overflow-y: auto;
}
/*height: calc(100% - 60px);*/
.cartAction {
    float: right;
    margin-top: -34px;
    margin-right: 5px;
}

    .cartAction a, .cartItems li a {
        color: #4f4f4f;
    }


ol.cartItems {
    list-style: none;
    counter-reset: item;
}

    ol.cartItems > li {
        counter-increment: item;
        margin-bottom: 5px;
        background-color: #dbd9d9;
    }

        ol.cartItems > li:before {
            /*margin-right: 8px;*/
            /*        content: counter(item);*/
            /*background: #ec44a4;
        border-radius: 100%;
        color: #fff;
        width: 1.6em;
        height: 1.6em;
        text-align: center;
        display: inline-block;
        font-weight: bold;
        padding-top: 1px;*/
        }

.cartAction a:hover, .cartItems li a:hover {
    color: #272727
}

.cartClose {
    float: left;
    margin-top: 4px;
    margin-right: 4px;
    font-size: 1.6em;
    color: #333;
    padding-left: 5px;
    cursor: pointer;
}

.cartEltBefore {
    width: 18px;
    height: 18px;
    margin-top: -55px;
    margin-left: 22px;
    padding: 0px;
    background: #FFF;
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
}

.cartElt {
    position: relative;
    top: -18px !important;
    color: #FF188C;
    font-weight: bold;
    font-size: 1.0em;
}

.cartCtn {
    margin-top: 3px;
    margin-left: 12px;
    font-size: 1.2rem;
}

    .cartCtn i {
        margin-left: -10px;
    }

/*importfile from cart panel*/
.fileImportelt {
    margin-left: 10px;
    font-size: 0.9em;
    cursor: pointer
}

.fileImportLNumber {
    font-size: 1.2em;
    margin-top: -1px;
}

.fileImportLNumberAuto {
    width: 20px
}

select.fileImportelt {
}

.fileImportInfos {
    color: #3ccb00;
    font-size: 1.5em;
    padding: 10px;
}

.lineList {
    border-bottom: 3px solid #f5f5f5;
    margin-top: 7px;
    width: 100%;
    min-height: 35px
}

.fileImportLineHolder {
    overflow-y: auto
}

.fileImporteltLabl {
    display: inline-block
}
/*----------------------------
	Color Themes MENU
-----------------------------*/
.mHome i {
    color: #118FC7;
}

.mMedia i {
    color: #F77016;
}

.mManage i {
    color: #9f3c85;
}

.mPlanif i {
    color: #2FB50C;
}

.mStatistics i {
    color: #FF188C
}
/******************************************************************/
/******************************************************************/

/* error page */
.errPageContent {
    text-align: center;
    margin-top: 50px;
}

.backHomeError {
    padding: 30px
}

/* call center */
.titleCall {
    font-size: 2em;
    text-align: center;
    color: #ee3f26;
    font-weight: bold;
    margin: 20px 0 100px 0
}

.griditemsCC {
    padding: 30px;
    background-image: url(/pictures/radioshop_play_color_regular.png);
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 100%;
    overflow-y: auto;
    float: left;
    margin-top: -6px;
    border-right: 5px solid #C2C2C2;
    padding-top: 10px
}

/*parameters*/
.lstBasketParam {
    margin-left: -45px;
    list-style-type: none;
    line-height: 1.5em;
}

    .lstBasketParam li {
    }

.itCartEltParam {
    padding: 5px;
    font-color: #313131;
}

#mainParameters #dvFilterDefaultBrand .radioButtonList input[type="radio"] {
    width: auto;
    float: left;
}

#mainParameters #dvFilterDefaultBrand .radioButtonList label {
    width: auto;
    display: inline;
    float: left;
    color: Black;
    font-weight: normal !important;
    padding-left: 3px;
    padding-top: 1px;
}

/* SEPARATOR */
.genSeparator {
    float: left;
    width: 1px;
    height: calc(100% - 47px);
    border: 1px solid #c2c2c2;
    position: absolute;
    left: 900px;
    margin-top: 1px;
    border-style: solid;
    border-width: 0 1px 0 0;
    display: none;
}

/* DYNAMIC UI FORM BUILDER*/
.subBkTabConf {
    width: 100%;
    height: 100%;
    display: none;
}

    .subBkTabConf .subBkTabConfOn {
        display: block;
    }

.subBkGrpConf {
    display: block;
    margin: 0px 20px 0px 20px;
    clear: both;
}

.subBkSubGrpConf {
    display: inline-block;
    width: 100%;
    height: 100%;
    clear: both;
}

.subBkItemCtnConf {
    width: 100%;
    height: auto;
}

.subBkItemConf {
    width: 200px;
    height: 58px;
    float: left;
    margin: 5px;
    vertical-align: top;
}

.subBkItemConfTextarea {
    width: auto;
    height: auto;
    float: left;
    margin: 5px;
}


.subBkItemLabel {
    width: 100%;
    height: 28px;
    background: #3382C5;
    border-radius: 4px 0px 0px 4px;
    border: 0px;
    position: relative;
    top: -5px;
    color: white;
    line-height: 28px;
    vertical-align: middle;
    padding: 0px 0px 0px 8px !important;
}

    .subBkItemLabel:after {
        content: "";
        position: absolute;
        top: 0px;
        right: -3px;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 14px solid #3382C5;
        background: White;
        height: 0px;
        width: 0px;
    }

.subBkItConf {
    padding: 20px;
    font-weight: bold;
    color: #45ACDE;
}

.headFFGroupSpacer {
    height: 30px;
    padding-top: 15px;
}

.ffLabel, fffLabel {
    color: #000
}

#fDynamicForm .ffLabel {
    white-space: pre-wrap
}

.fffLabel {
    font-weight: bold;
    height: 24px;
    display: inline-block;
    vertical-align: top;
    text-overflow: ellipsis;
    max-width: 175px;
    overflow: hidden;
    white-space: nowrap;
}

.fffPen {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: top;
}

.headFFGroup {
    margin-bottom: 10px;
    font-weight: bold
}

    .headFFGroup:hover, .refreshUI, .faOpointer {
        cursor: pointer
    }

.expandGroup {
    display: block
}

.collapsGroup {
    display: none
}

.labelGroupChange:after {
    font-family: FontAwesome;
    content: "\f040";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left: 4px;
    color: #c15407;
}

#officeBody .form-group label, #brandBody .form-group label, #identityBody .form-group label {
    height: 18px;
}

/* Context menu */
/***********************************************************************/
.contextMPlaylist {
    background-image: url('../pictures/playliste-16.png')
}

.contextMPIssue {
    background-image: url('../pictures/issue2-16.png');
}

.contextMPEdit {
    background-image: url('../pictures/edit-property-16.png');
}

.contextRoot {
    margin: 0.5em;
    margin: 5px 0 10px 10px;
    background-repeat: no-repeat;
    padding: 0 10px 0 25px;
    background-position: left center;
}

.ddContext {
    color: #333
}
/*extern playlist reader*/
.bkExPl {
    width: calc(100% - 20px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    margin: 10px;
    margin-top: 20px
}

/***********************************************************************/
/*HOME PAGE*/
/***********************************************************************/
.dHome {
    z-index: 99999
}

.bkHAll {
    width: calc(100% - 20px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    min-height: 100%;
    float: left;
    margin: 10px;
}

.hGuide {
    padding: 0;
    margin: 15px 20px 20px 0;
    font-size: 1.1em;
}

    .hGuide li {
        padding: 0.15em 0 0.5em 2em;
        margin: 0.2em;
        text-indent: 0.4em;
        font-weight: bold;
        list-style: none;
        background-repeat: no-repeat;
        text-align: left;
        font-size: 0.9em;
    }

.dvDoc li[data-type="pdf"] {
    background-image: url('data:image/png;base64,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');
}
/*Error content */
.ContentAlarma {
    width: 100%;
    text-align: center;
    margin-top: 200px;
}

.Alarma {
    margin: 25px;
}

/*home title header box*/
.colorActu {
    background-color: #565656;
}

.colorMap {
    background-color: #007BB7;
}

.colorDoc {
    background-color: #68be08
}

.bkTitle {
    color: white;
    height: 40px;
    font-size: 1.2em;
    vertical-align: bottom;
    border-radius: 3px 3px 0 0;
    padding-right: 5px;
    position: relative;
}

.hTitleHeader {
    float: left;
    position: relative;
    height: 40px;
    line-height: 2.1em;
}

.hTitleElt {
    margin-left: 5px;
}

span.hTitleElt {
    margin-right: 10px;
    margin-left: 5px;
}

.hTitleFilter {
    margin-top: 65px;
    width: 200px;
    border-radius: 3px;
    height: 22px;
    z-index: 100;
    float: right;
    margin-left: calc(100% - 233px);
    position: absolute;
    color: rgb(51, 51, 51);
}

    .hTitleFilter .ddlcustomer {
        width: 200px;
    }

.bkRPanel, .bkRPanelMap {
    margin-right: 10px;
    height: 600px;
    box-shadow: 5px 5px 2px #EFEFEF;
    display: inline-block;
    vertical-align: middle;
}

.bkRPanel {
    vertical-align: middle;
    white-space: normal;
    width: calc(20% - 30px);
}

.bkRPanelMap {
    width: 40%;
    white-space: normal;
    font-size: 0.95em;
    color: #333;
    text-align: right;
}

.dvNews {
    padding-top: 15px;
}

.dvNews, .dvMap {
    height: 540px;
    overflow-y: auto;
    background-color: #FDFAFA;
    border-radius: 0 0 2px 2px;
    border: 0 solid #CCC;
    overflow-x: hidden;
    white-space: normal;
    width: 100%;
    font-size: 15px;
}

.hRowNews {
    display: inline-block;
    text-align: left;
    width: 100%;
    padding: 0 0 0 10px;
}

.hRowTitle {
    width: calc(100% - 230px);
    float: left;
}

.hRowDate, .hRowOpen, .hRowTitle {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* white-space: nowrap;*/
.hRowDate {
    float: left;
}

.hRowOpen {
    float: right;
}

    .hRowOpen i {
        color: #333
    }

.hRowDate, .hRowOpen {
    width: 110px
}

.dvDoc p {
    font-size: 1.07em;
}

.dvDoc em {
    font-size: 0.9em;
}
/***********************************************************************/

/*site folder issue*/
.btFolderIssueNote {
    width: 200px;
    height: 28px;
    margin-left: 3px;
    margin-top: 15px;
    margin-bottom: 8px
}

.btFolderIssueInfoPanel {
    width: 270px;
    height: auto;
}

.officeFolderHeartbeatLabel {
    font-weight: bold;
    padding-left: 4px;
    font-size: 15px
}


.officeFolderQuickLink {
    float: left;
    padding: 5px;
    text-align: center;
    width: 20%;
    cursor: pointer
}

.notifyBar, .notifyBarAlert, .notifyBarWarning, .notifyBarInfo {
    height: 27px;
    background: #eee;
    margin-top: -6px;
    vertical-align: middle;
    padding: 4px 4px 4px 30px;
    font-size: 14px;
    display: none;
}

.notifyBarAlert {
    background: #ff5858;
    color: #fff;
}

.notifyBarWarning {
    background: #fff9b3;
    color: #000;
}

.notifyBarInfo {
    background: #d2f6ff;
    color: #000;
}

.notifyBarAlertTxt {
    padding-left: 6px;
    padding-right: 10px;
}

.notifyBarButton {
    padding: 0px 8px 0px 8px;
    margin-top: -2px;
    height: 21px;
    background: transparent;
    border: 1px solid #ccc;
    display: none;
}

    .notifyBarButton:hover {
        background: #fff;
    }



.ckFavRoot {
}

.ckFavLabel {
    margin-right: 15px;
    margin-left: 4px;
    font-weight: normal
}

#issueBody .ui-dialog .ui-dialog-content {
    overflow: hidden !important;
}

/*** Folder edit ***/
.btTaskTrash {
    font-size: 1.1em;
    margin: 0;
    height: auto;
    color: white;
    margin-top: 5px;
    float: right;
    position: relative;
    cursor: pointer;
    margin-right: 5px;
}

.taskList {
    overflow-y: auto;
    height: 600px;
    width: 100%;
    margin-top: 70px;
}

.taskLine {
    width: 98%;
    border: 1px solid #ddd;
    padding: 0px;
    margin: 0px 0px 20px 0px;
    border-radius: 4px;
}

.dtNoteD {
    clear: both;
    background: #eee;
    color: #000;
    padding: 5px;
    height: 38px;
    margin: 0px;
    position: relative;
}

.tDateboot2 {
    position: absolute;
    margin-left: -200px;
}

.dtNoteN {
    clear: both;
    white-space: nowrap;
    overflow: auto;
    text-overflow: ellipsis;
    max-height: 150px;
    width: 100%;
    padding: 10px;
    margin: 0px;
}

.taskHeader {
    background: #444;
    height: 34px;
    clear: both;
    vertical-align: middle;
    border-radius: 4px 4px 0px 0px;
}

.taskFooter {
    color: #fff;
    background: #eee;
    padding: 3px 6px 3px 6px;
    height: 36px;
}

/***********/
/*SKELETON EDIT PAGE*/
/***********************************************************************/
.resumeCollapse {
    font-size: 1.1em;
    color: #337ab7;
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 10px
}

.collapsable {
    padding-left: 5px;
    padding-top: 1px;
    line-height: 28px
}

.exSubAnd, .exSubOr {
    margin-left: 5px
}

.fixedPlay {
    margin-left: 10px;
    font-size: 1.17em;
}

.blankLine {
    padding-left: 18px;
    padding-top: 1px;
    line-height: 28px
}

#tagExt {
    margin-left: 10px
}

.selA, .list-group-skel a {
    min-height: 30px
}

    .selA span[data-type=tag], .selA span[data-type=operator] {
        color: #fff
    }

.list-group-skel {
    font-size: 0.85em;
    line-height: 1.4em
}

.exprNot {
    border-bottom: 2px solid #FF188C;
    padding: 2px;
}

.exprIn {
    border-bottom: 2px solid #4fca0d;
    padding: 2px;
}

.contentLineSkel {
    border: 1px solid #ccc;
    border-radius: 0px 0px 3px 3px;
    height: 300px;
    overflow-y: scroll;
    min-height: 300px
}

.skelContent {
    padding-top: 10px;
    padding-left: 10px
}

.infoSkelet {
    font-size: 0.8em
}

#grpStatGlobal > .input-group-addon {
    padding: 0 12px;
}

.grSkelTag {
    margin: 1px 5px 1px 5px;
}

.numberCircle {
    width: 30px;
    height: 48px;
    min-height: 48px;
    margin-top: -10px;
    margin-left: -15px;
    float: left;
    padding: 0px 6px 0px 6px;
    vertical-align: middle;
    background: #fbfbfb;
    color: #666;
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
    line-height: 48px;
}

.numberCircleALL {
    width: 30px;
    height: 37px;
    margin-top: -10px;
    margin-left: -15px;
    float: left;
    padding: 9px 3px 3px 3px;
    background: #fbfbfb;
    color: #fff;
    background-color: rgb(17, 143, 199);
    font-weight: bold;
    text-align: center;
    font-size: 1.05em;
}

.GlobalContentResCol {
    width: 1000px;
    min-width: 1000px;
}

.numberEndBt:hover {
    color: rgb(17, 143, 199)
}

.txtLineS a {
    height: 38px;
    font-size: .85em;
    line-height: 1.4em;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-radius: 4px 4px 0px 0px !important;
}

.numberEndBtp, .numberEndBtm {
    font-size: 1.8em;
    padding: 3px;
    margin-top: -20px;
    position: absolute;
    right: 40px;
    color: #118fc7;
}

.numberEndBtp {
    right: 20px;
}

.grSkel {
    position: relative;
    padding: 4px 4px 4px 2px;
    font-weight: normal;
    border: 1px solid #333333;
    border-radius: 3px;
    margin-left: 15px;
    white-space: nowrap;
}

.exAnd, .exAndNot {
    /*margin-right: 10px;
    border: 1px solid #d4d4d4;
    font-weight: normal;
    padding: 2px 5px 2px 5px;
    background: #fff;
    margin-left: -1px;
    border-radius: 3px 0 0 3px;*/
    margin-right: 6px;
    font-weight: normal;
    padding: 2px 5px 2px 5px;
    margin-left: -1px;
    border-radius: 3px 0 0 3px;
}
/*.exAndNot {color:#bd0028}
.exAnd {color:#176f13}*/

/* GLOBAL TABLE TITLE */
/* All Div Content*/
.dvWrapper {
    height: 100%;
    width: 100%;
    min-width: 1200px;
}
/* sub content */
.contentMaster {
    height: auto;
    display: none
}
/*The main container*/

/*GENERIC MEDIA NAVIGATION*/
/***********************************************************************/
/*IMPORTANT DO NOT CHANGE OR CHECK MODIFICATIONS CARREFULLY BE CAREFUL TO ARROW POSITION */
.titleSectionMedia, .titleSectionMediaNoSelect, .titleSectionMediaReadOnly, .titleSection {
    font-size: 11pt;
    padding-top: 11px;
}
/*IMPORTANT*/
.blockToolBarMedia, .blockToolBarOffice, .blockToolBarMediaFloat {
    display: inline-block;
    width: 100%;
    background: #f2f2f2;
    border-color: #C2C2C2;
    border-style: solid;
    border-width: 1px 0 1px 0;
    min-height: 45px;
}

.blockToolBarMediaFloat {
    border-width: 1px 0px 1px 1px !important
}

.blockToolBarOffice {
    margin-top: 0;
}

.titleSection, .titlesectionOffice, .titleSectionOfficeNoSelect, .titleSectionMedia, .titleSectionMediaReadOnly, .titlesectionFilter {
    float: left
}

.titleSectionMedia {
    font-weight: bold;
    color: #707070
}

.titleSectionMedia, .titleSectionMediaNoSelect, .titleSectionMediaReadOnly {
    white-space: nowrap;
    display: block;
    color: #707070;
    height: 44px;
    padding: 12px 6px 12px 6px;
    margin-left: 25px;
    position: relative;
    float: left;
    width: auto;
    text-align: center
}

.titleSectionOfficeNoSelect {
    white-space: nowrap;
    display: block;
    color: #707070;
    padding: 12px 6px 12px 6px;
    margin-left: 25px;
    position: relative;
    float: left;
    width: auto;
    text-align: center
}

.titleSectionFull {
    width: 150px;
}

.titleSectionDescriptionMedia {
    width: 80px;
    text-align: left
}

.titleSectionDescriptionMediaShorter {
    width: 350px;
    text-align: left
}

.titleSectionMediaNoSelect, .titleSectionOfficeNoSelect, .titleSectionMediaReadOnly {
    color: #285e8e
}

    .titleSectionMediaNoSelect:hover, titleSectionOfficeNoSelect:hover {
        background-color: #C2C2C2;
        cursor: pointer
    }

.titleSection {
    display: block;
    font-weight: bold;
    color: #707070;
    margin-left: 5px;
    position: relative;
}

    .titleSection:before, .titleSectionMedia:before {
        border: 8px solid transparent;
        border-style: outset outset solid outset;
        border-bottom-color: #cccccc;
        bottom: 1px;
        content: '';
        left: 43%;
        position: absolute;
        width: 0;
        height: 0;
        margin-bottom: -13px
    }

    .titleSection:after, .titleSectionMedia:after {
        border: 8px solid transparent;
        border-style: outset outset solid outset;
        border-bottom-color: #FFFFFF;
        bottom: 1px;
        content: '';
        left: 43%;
        position: absolute;
        width: 0;
        height: 0;
        margin-bottom: -14px
    }

.titleSectionPlannerEdit:before {
    left: 18px !important;
    margin-bottom: -10px !important;
}

.titleSectionPlannerEdit:after {
    left: 18px !important;
    margin-bottom: -11px !important;
}

.titleSection.special:after {
    border-bottom-color: #ddd;
}

.titleSectionMedia:before {
    margin-bottom: 0
}

.titleSectionMedia:after {
    margin-bottom: -1px
}

.titlesectionOffice, .titleSectionOfficeNoSelect, .titlesectionFilter {
    margin-left: 15px;
}

.toolBarButtonsDDLBS {
    color: #707070;
    white-space: nowrap;
    margin-left: 10px;
    margin-top: 6px;
}

.btddlCustom {
    height: 31px;
}

.btddlCustom > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sepMediaBar, .blkUsScroller {
    border-right: 5px solid #ccc;
}
/* Chrome Specific CSS */
@-moz-document url-prefix() {
    .titleSectionMedia:before {
        margin-bottom: 1px
    }
    /*.titleSectionMedia:after {margin-bottom: -1px} @media screen and (-webkit-min-device-pixel-ratio:0) */
}

.toolBarButtons, .toolBarButtonsMedia {
    text-align: center;
    float: right;
    margin-right: 15px;
    white-space: nowrap;
}

.toolBarButtonsLeft {
    text-align: center;
    float: right;
    margin-right: 45px
}

.lbPropertiesInfoDetail {
    color: #808080
}

.dvGlobalPropertyDetail {
    display: block;
}

.toolbarSearch {
    float: left;
    width: auto;
    margin-top: 7px;
    height: 25px;
    margin-left: 20px;
}

.titleNoNavSection {
    position: relative;
    white-space: nowrap;
    color: #707070;
    margin-left: 25px;
    float: left;
    width: 105px;
    text-align: left;
    font-size: 11pt;
    padding-top: 12px;
    font-weight: bold;
    height: 43px
}



.btText {
    margin: 5px;
    display: inline-block;
    margin-top: 8px;
    white-space: nowrap;
}

.btFilter {
    margin-bottom: 10px;
}
/*overload*/
/***********************************************************************/
.img {
    margin-left: 5px;
    margin-bottom: 2px;
}

.ip_octet {
    border: 0;
    text-align: center;
    width: 2em;
    background: transparent
}

.ip_address_disabled {
    background: #EEEEEE
}

.titlePerma {
    font-weight: bold;
    color: #808080
}

.infMediaShare {
    white-space: normal;
    text-align: left;
    font-size: 16px;
    color: #999999;
    height: 130px;
    max-height: 200px;
    display: block;
    overflow: hidden;
    padding: 15px;
    margin: 30px;
}

.urlpermalink {
    color: #000 !important;
    cursor: pointer;
}

    .urlpermalink:hover {
        text-decoration: underline;
    }
/* begin classes for chosenSitesGroups Custom Control */
.chosenSitGrpSelect {
    float: left;
}

.chosenSitGrpBtnIcon {
    margin-left: 5px;
    height: 29px
}

.chosen-search-input {
    font-family: ProximaNova !important;
    font-size: 13px !important;
}
/* end classes for chosenSitesGroups Custom Control*/


/*Components Entity Browser */
/***********************************************************************/
.txtSearchSite {
    border: 0 solid #BBB;
    border-top: 1px solid rgb(194, 194, 194);
    border-bottom: 1px solid rgb(194, 194, 194);
    border-right: 1px solid rgb(194, 194, 194);
    border-radius: 0px 4px 4px 0px;
    color: #929292;
    width: 100% !important;
    padding: 4px;
}

.imgClose {
    margin-left: -25px;
    margin-top: 12px;
    content: url('../pictures/toggleClose.png');
    z-index: 9999999;
    cursor: pointer;
    position: absolute
}

.imgOpen {
    margin-left: 3px;
    margin-top: 12px;
    content: url('../pictures/toggleOpen.png');
    z-index: 999;
    cursor: pointer;
    background: #f2f2f2;
    position: absolute
}

#layoutBody .imgOpen {
    margin-left: 9px;
    margin-top: 10px;
}


/* Login Page */
.stepusbUPD {
    font-size: 1em;
    padding: 10px;
    margin: 0 auto;
    width: 600px;
    margin-top: 50px;
}

    .stepusbUPD p {
        font-size: 1.2em;
        font-weight: bold
    }

    .stepusbUPD img {
        margin-bottom: 15px
    }

.infoNav {
    font-size: 0.95em;
    color: #A23D00;
    border: 2px dashed #CCC;
    padding: 10px;
}

.infoNavStop {
    font-size: 1.2em;
    color: #000;
    border: 2px dashed #CCC;
    padding: 30px;
    background: #CCC;
    height: 30%;
    margin-top: 100px;
    width: 60%;
    text-align: center;
}

.infoNavUpdate {
    font-size: 0.95em;
    color: #007BB7;
    border: 2px dashed #CCC;
    padding: 10px;
    margin: 0 auto;
    width: 80%;
}

.updateContent {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 30px;
}

.loginContent {
    text-align: center;
    padding-top: 200px;
    margin-bottom: 30px;
}

.updateBrand {
    color: #fff;
    font-size: 1.3em;
    margin-left: 20px;
    padding: 10px;
}

.loginContent input[type=text], .loginContent input[type=password] {
    width: 60%;
    font-size: 14px;
}

.titleGroupLog {
    width: 100%;
    display: block;
    font-size: 14px;
}

.titleGroupLog.login {
    margin-top: 20px;
}

.connectBtn {
    margin-top: 30px;
    text-align: center;
}
.w-100 {
    width: 100%;
}

.dvError {
    color: red;
    font-weight: bold;
    margin-top: 15px;
}

.bloc {
    margin: 0 10px; /* espacement horizontal des blocs */
    border: 1px solid #fff;
    display: inline-block;
    vertical-align: middle;
    width: 500px;
    text-align: left; /* on rétablit l'alignement du texte */
}

.blocimage {
    text-align: right
}

.titleLogin {
    display: block;
    margin-bottom: 20px;
    font-weight: bold;
    color: #333;
    font-size: 18px;
    width: 100%
}

.imLogin {
    border-radius: 12px;
}

.RowLine {
    width: 450px;
    padding: 10px;
}

.footerLogin {
    text-align: center;
    color: #C2C2C2;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.logLostLink {
    padding-top: 10px
}

.loginPageView {
    height: calc(100vh - 120px);
    min-width: 300px;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginPageView .loginRowFlex > div {
    padding: 2em;
    background: #fefefe;
    border: 1px solid #e4e8f4;
    box-shadow: 4px 8px 1em #22367482;
    border-radius: 1em;
}

.loginPageView .loginRowFlex #loader {
    display: block;
    margin: 1em auto;
    width: 1em;
    margin: 1em auto;
}

.loginPageView .loginRowFlex span.titleGroupLog.login {
    margin: 1em 0 .5em 0;
    font-weight: 700;
    color: #727272;
}

.loginPageView .loginRowFlex > div > img {
    margin-bottom: 3em;
    padding: 0 2em;
    max-width: 100%;
    height: auto;
}

.loginRowFlex input[type="text"],
.loginRowFlex input[type="password"],
.loginRowFlex button {
    display: block;
    padding: .3em 1em;
    border-radius: .9em;
    outline: none;
    border: none;
    border: 1px solid #e4e8f4;
    background: #f3F3F3;
}

.loginRowFlex input[type="text"]:focus,
.loginRowFlex input[type="password"]:focus {
   border: 2px solid var(--blue);
}

.loginRowFlex input[type="text"]::placeholder,
.loginRowFlex input[type="password"]::placeholder {
    color: #000;
}


.loginRowFlex input#txtUser {
    position: relative;
    flex: 1 0 calc(100% - 3em);
    text-align: left;
}


.loginRowFlex .login-first-step {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.loginRowFlex .login-first-step button {
    position: relative;
    margin-left: 1em !important;
    width: 2.5em;
    height: 2.5em;
    border-radius: 1.25em;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: center;
}


.loginRowFlex .login-first-step button i {
    color: var(--blue);
    font-size: 1.8em;
}


.loginRowFlex .login-first-step button:hover i {
    color: var(--grey);
}

.loginPageView.renewPassword {
    height: calc(100vh - 124px);
}

.loginPageView #txtUser, 
.loginPageView #txtPwd, 
.loginPageView #txtPwdNew, 
.loginPageView #txtPwdConf {
    width: 100%;
    height: 32px;
}

@media only screen and (max-width: 1199.5px) {
    .loginPageView #txtUser, 
    .loginPageView #txtPwd, 
    .loginPageView #txtPwdNew, 
    .loginPageView #txtPwdConf {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .loginRowFlex {
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 767.5px) {
    .connectBtn {
        text-align: center;
    }

    .connectBtn #btConnect, .connectBtn #btRenew {
        padding: 10px 20px;
    }
}
/*PARC*/
.infoCopy {
    margin-bottom: 20px
}

/* TagPicker Page */
.btPickerOK {
    float: right;
    margin-right: 5px;
}

/*Statistic page*/
.row-40 {
    height: 40vh;
}

.row-70 {
    height: 60vh;
}

/*playlist Page*/

.blkPLUp {
    display: inline-block;
    width: 100%;
    height: 180px;
    background-color: #f3f3f3;
    border-color: #C2C2C2;
    border-style: solid;
    border-width: 0 0 0 0;
}

.RowSongPl {
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
}

.prevPl {
    margin-left: 150px;
    float: left;
    margin-top: -50px;
    border: 2px solid #f31b91;
    border-radius: 3px;
}

.imgplayIco {
    width: 80px;
    margin-left: 25px;
    float: left
}

.DetCurPSong {
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    font-size: 1.2em
}

.authorPl {
    font-weight: bold
}

.spTitMain {
    padding: 20px;
}

.ptit1 {
    font-size: 2em;
    margin-left: 25px;
    color: #848484
}

.ptit2 {
    font-size: 3em;
    margin-left: 10px;
    color: #f31b91
}

.implayTitLogo {
    float: right;
}

.selectPL {
    background-color: #009fe3;
    color: #FFF;
    font-weight: bold;
}

#mainPlaylist .titleSection2 {
    display: block;
    font-weight: bold;
    color: #707070;
    margin-left: 5px;
    position: relative;
    margin-top: 10px;
}

    #mainPlaylist .titleSection2:before {
        border: 8px solid transparent;
        border-style: outset outset solid outset;
        border-bottom-color: #CCCCCC;
        bottom: 1px;
        content: '';
        left: 26px;
        position: absolute;
        width: 0;
        height: 0;
        margin-bottom: -10px;
    }

    #mainPlaylist .titleSection2:after {
        border: 8px solid transparent;
        border-style: outset outset solid outset;
        border-bottom-color: #FFFFFF;
        bottom: 1px;
        content: '';
        left: 26px;
        position: absolute;
        width: 0;
        height: 0;
        margin-bottom: -11px;
    }

/* -- Playlist -- */
.offRight.playlist {
    height: calc(100vh - 60px);
    position: relative;
}

#table-playlist.table-striped > tbody > tr:nth-of-type(odd) {
    background: #ddd;
}

.playlist-table-actions{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
}

.playlist #table-playlist.table-hover > tbody > tr:hover {
    background-color: #929292;
    color: #fff;
}

.playlist .table-wrapper tr {
    height: 36px;
}

.playlist .table-wrapper {
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
}

    .playlist .table-wrapper table {
        border-collapse: separate;
    }

    .playlist .table-wrapper thead th {
        position: sticky;
        top: 0;
        border-bottom: 2px solid #ddd;
        background: white;
        z-index: 2;
    }

        .playlist .table-wrapper thead th i {
            color: #C7C7CC;
            font-size: 12px;
        }

.playlist .cursor-pointer:hover i {
    color: #ff6a2f;
}

.spinner-loading {
    position: absolute;
    color: white;
    z-index: 10000;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
}

    .spinner-loading .text {
        margin-top: 15px;
        font-weight: 500;
        font-size: larger;
    }

.planning-mask {
    position: absolute;
    background: #343a40;
    height: 100%;
    width: 100%;
    opacity: 0.7;
    z-index: 100;
}

.spinner-loading .play-ico {
    display: inline-block;
    margin-right: 10px;
}

.cursor-pointer {
    cursor: pointer;
}

.playlist .cursor-pointer:hover {
    color: #ff6a2f;
}

.playlist .pointer-elements-player.small-status-button {
    left: 0;
}

.datepicker-filter input {
    border: solid 1px #ccc;
    border-radius: 4px 0 0 4px;
}

.playlist .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    vertical-align: middle;
}

/* EXPORT DIALOG */
.TitleExp {
    display: block;
    padding-bottom: 35px;
    color: #428bca;
    margin-top: 5px;
}

.Titler1 {
    float: left;
    width: 50%
}

.Titler2 {
    float: right;
    width: 48%;
}

.dvBlockCopy {
    display: block;
    height: 412px;
}

.dvProperty {
    float: left;
    width: 48%;
    height: 400px;
    overflow-y: auto;
}

.dvseparatorRecup {
    border-right: 5px solid #C2C2C2;
    float: right;
    height: 100%;
}

.dvMedia {
    float: right;
    width: 48%;
    height: 400px;
    overflow-y: auto
}

.dvLine {
    padding: 1px;
}

.expProperty, .expFileName {
    cursor: pointer;
}

.expProperty {
    font-weight: bold
}

.expDetail {
    color: #f86159;
    font-style: italic;
    font-size: 0.9em;
}

.dialogButMenu {
    font-size: 0.8em;
    color: #313131;
    float: right;
    cursor: pointer
}
/*CONFIRM DIALOG*/
/***********************************************************************/
.commandExpConf .btn-primary {
    margin-right: 10px;
}
/* FILE EXPLORER PAGE  IOViewer */
.imgPreviewCont {
    width: 400px;
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.grpAudio {
    float: right;
}

.rowProperties {
    padding-bottom: 6px;
}

.blCloudALL {
    display: inline-block;
    width: 100%;
    height: 100%
}
/*the left part */
.subLeft {
    width: calc(100% - 5px);
    float: left
}

.blCloudLeft {
    width: calc(100% - 455px);
    float: left;
}
/* The right part */
.blCloudRight {
    width: 455px;
    float: left;
    margin-left: -5px
}

.PropertiesCloudRight {
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.PropertiesCloudRightTag {
    font-size: 15px;
}

.alignCB, .imRO {
    float: left;
    margin-top: 4px;
    margin-right: 1px;
}

.fileExplorer a, .fileAction, .foldAction, .foldNoAction {
    margin-left: 4px
}

.fileExplorer {
    width: 100%;
    overflow-y: auto;
    float: left;
    margin-top: -6px;
    border-right: 5px solid #C2C2C2;
    padding-top: 10px
}

.fileAction, .foldAction, .foldNoAction {
    display: inline-block
}

.fileExplorer a, .fileAction {
    color: #333
}

.foldAction, .foldNoAction {
    color: #79521f
}

    .foldAction:hover, .fileAction:hover, .foldNoAction:hover {
        font-weight: bold;
        cursor: pointer;
    }

.eltOK {
    display: block
}

.eltNONE {
    display: none;
}

.subBlockItem {
    height: 28px;
    padding-left: 7px;
}

.txtFold {
    width: 257px;
    margin-bottom: 50px;
}

.dialFolderMove select {
    font-size: 10pt;
    width: 90%;
    margin-bottom: 60px;
}

.ckbFileLeft, .ckbFoldLeft {
    left: 5px
}

.imPicExplo {
    margin-right: 5px;
    margin-bottom: 5px;
}

.subSeparator {
    float: left;
    width: 12px;
    height: 15px;
}

.ckb {
    float: left;
}

/* Schedule Page */
.dvdpropertiesSchedule {
    width: 100%;
}

.propertiesScheduleSub {
    padding-left: 20px;
}

.dvdpropertiesSchedulePreview {
    width: 400px;
    width: 100%
}

.rowSpace {
    height: 30px
}


/* BRAND PAGE */
/**********************************************************************/
@media only screen and (max-width: 1400px) {
    #mainBrand .clickMediaMetaField {
        padding: 12px 0px 12px 0px !important
    }

    #mainBrand .responsiveNavbarMenuIcon {
        width: auto !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        visibility: visible !important
    }

    #mainBrand .responsiveNavbarMenuLabel {
        display: none
    }
}


/* OFFICE PAGE */
/**********************************************************************/
dgCopyOffice {
    height: 300px
}

.titleOffice {
    width: 92%;
    display: block;
    padding-bottom: 35px;
    font-size: 1.3em;
    font-weight: bold;
    margin-left: 20px;
    margin-bottom: 15px;
    padding-top: 15px;
    color: #808080
}

.blockOffice {
    display: block;
    width: 100%;
    overflow-y: auto
}

.dvdproperties, .opSMapCont, .dvWeather, .dv4col {
    margin-left: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 420px;
    float: left
}

.dv4col {
    width: 230px
}

.dvdpropertiesShort {
    width: 200px;
    margin-bottom: 10px;
    float: left;
    min-height: 20px
}

.opSMap {
    height: 100%;
    width: 100%;
    float: left;
    border-radius: 5px
}

.opSMapCont {
    height: 285px;
    display: block;
    margin-left: 20px;
    margin-top: 30px;
    border: 2px solid #CCC;
    border-radius: 5px
}

.SuboffRight {
    overflow-y: scroll
}

.SuboffRightNoScroll {
    overflow-y: inherit
}

.lblNoteSpace {
    margin-top: 18px
}

.txtWeather, .txtNote {
    width: 100%;
    height: 78px
}

.txtNoteDisable {
    width: 100%;
    height: 78px;
    pointer-events:none;
    cursor:default;
}

.disabled-control {
    pointer-events: none;
    opacity: 0.5; 
}

.txtFilterUltraLong {
    margin-bottom: 10px;
}

.offAll {
    clear: both;
    width: 100%;
    height: 100%
}

.offAllRecup {
    display: inline-block;
    width: 100%;
    height: 100%
}

.offLeft {
    width: 350px;
    float: left
}

.offLeftrecup {
    width: calc(50% - 5px);
    float: left
}

.offRightrecup {
    width: 50%;
    float: left
}

.offRight {
    height: 500px;
    float: left
}

.row.associa > .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    min-width: 0;
}

.row.associa > .row {
    flex: 1 1 calc(50% - 10px);
    min-width: 260px;
    margin: 0;
}

.row.associa > .row > #grpTitle .form-control,
.row.associa > .row > #grpLinkSpot .input-group,
.row.associa > .row > #grpLinkSoundcharts .input-group,
.row.associa > .row > #grpLink .input-group {
    width: 100%;
}

@media only screen and (min-width: 1101px) {
    #form-head .assoc-links-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        gap: 10px;
        align-items: end;
        flex: 1 1 560px;
        min-width: 0;
    }

    #form-head .assoc-links-grid > .form-group {
        margin: 0;
        min-width: 0;
    }

    #form-head .assoc-links-grid > #grpTitle .form-control,
    #form-head .assoc-links-grid > #grpLinkSpot .input-group,
    #form-head .assoc-links-grid > #grpLinkSoundcharts .input-group,
    #form-head .assoc-links-grid > #grpLink .input-group {
        width: 100%;
    }
}

@media only screen and (max-width: 740px) {
    .row.associa > .row > #grpTitle,
    .row.associa > .row > #grpLinkSpot,
    .row.associa > .row > #grpLinkSoundcharts,
    .row.associa > .row > #grpLink {
        flex-basis: 100%;
        min-width: 0;
    }

    .cGrpProperties > #form-head {
        flex-direction: column !important;
    }
}
.griditems {
    overflow-y: auto;
    margin-top: 1px
}

.griditemsG, .reportviewer {
    width: 100%;
    height: 100%
}

.graphitemsG {
    max-width: 600px;
    max-height: 600px;
    padding: 10px
}

.sepOffice {
    margin-top: 25px
}

.sepOffice2 {
    height: 20px
}

.txtDateOffice {
    width: 80px;
    height: 18px
}

.gridIntranet {
    width: 99%;
    float: left
}

.recupSearch {
    margin-top: 5px
}

.rowSingle {
    width: 100%;
    display: inline-block
}

.titleScheduleOffice {
    width: 230px;
    float: left;
    margin-left: 15px;
    font-weight: bold;
    color: #f10f75;
    padding: 5px 10px 10px 0
}

.cCatalog {
    width: 180px;
    margin-left: 30px
}

.edSelectCTRL {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

#switchTimeViewContainer {
    width: 100%;
    display: block;
    height: auto;
    margin-bottom: 15px;
}

    #switchTimeViewContainer .mycol1 {
        width: 25%;
        display: inline-block;
        text-align: left;
        vertical-align: top;
    }

    #switchTimeViewContainer .mycol2 {
        width: 60%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
    }

    #switchTimeViewContainer .mycol3 {
        width: 15%;
        display: inline-block;
        text-align: right;
        vertical-align: top;
    }

@media only screen and (min-resolution: 96dpi) and (max-width: 1360px) {
    #ttSelPeriod {
        margin-left: -10px !important;
    }

    #switchTimeViewMode {
        margin-left: 8px !important;
    }

    #ttNavCtrlHolderHeaderLeft {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #ttNavCtrlHolderHeaderCenter {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #ttNavCtrlHolderHeaderRight {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
}

/* fix tom mac book screen */
@media only screen and (max-resolution: 192dpi) and (max-width: 1200px) {
    #ttSelPeriod {
        margin-left: -10px !important;
    }

    #switchTimeViewMode {
        margin-left: 8px !important;
    }

    #ttNavCtrlHolderHeaderLeft {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #ttNavCtrlHolderHeaderCenter {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #ttNavCtrlHolderHeaderRight {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
}

/* fix tom big screen high dpi */
@media only screen and (max-resolution: 288dpi) and (max-width: 1000px) {
    #ttSelPeriod {
        margin-left: -10px !important;
    }

    #switchTimeViewMode {
        margin-left: 8px !important;
    }

    #ttNavCtrlHolderHeaderLeft {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #ttNavCtrlHolderHeaderCenter {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #ttNavCtrlHolderHeaderRight {
        display: block;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
}



#ttNavCtrlHolderHeaderCenter .ttButNav {
    background: linear-gradient(#ffffff,#e7e7e7);
    border: 1px solid #b8b8b8;
    border-radius: 4px;
    text-align: center;
    height: 32px;
    font-weight: bold;
    cursor: pointer;
}

#grpSIRETPending div.bootstrap-switch-container {
    height: 26px !important;
}

#grpSIRETPending .bootstrap-switch .bootstrap-switch-handle-on, #grpSIRETPending .bootstrap-switch .bootstrap-switch-handle-off, #grpSIRETPending .bootstrap-switch .bootstrap-switch-label {
    padding: 3px 12px !important;
}

#grpSIRETPending div.bootstrap-switch {
    margin-top: 0px !important;
}
/* OFFICE FOLDER PAGE */
/***********************************************************************/
#contArticleAllTags {
    margin-bottom: 5px;
    margin-left: 3px;
    width: 664px;
}

#officeFolderBody .btText {
    width: auto;
    opacity: 1;
}

#contArticleFavTags {
    font-size: 0.85em;
}

/* TIMETABLES */
/***********************************************************************/
#DialogBatchImport .btn-default:default {
    background-color: #fff;
    color: #999;
}

#DialogBatchImport .btn-default:hover {
    background-color: #eee !important;
}

#DialogBatchImport .btn-default:active {
    background-color: #999 !important;
    outline: none !important;
    box-shadow: none !important;
}

#DialogBatchImport .btn-default:visited {
    background-color: green !important;
    outline: none !important;
    box-shadow: none !important;
}

#DialogBatchImport .btn.active.focus, #DialogBatchImport .btn.active:focus, #DialogBatchImport .btn.focus, #DialogBatchImport .btn:active.focus, #DialogBatchImport .btn:active:focus, #DialogBatchImport .btn:focus {
    outline: 0;
}

#DialogBatchImport .dropdown-menu-center {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/* PLANNER PAGE */
/***********************************************************************/
.listSchedule > li {
    padding: 2px;
}

    .listSchedule > li > a {
        margin-left: 4px;
    }

.dvlineExtend, .listSchedule {
    margin-left: 30px;
    list-style-type: none;
}

.dvdpropertiesSchedule .chzn-container {
    font-size: 0.85em;
}

.dvdpropertiesSchedule .chzn-container-single .chzn-single-with-deselect span, .dvdpropertiesSchedule .chzn-container-single .chzn-single span {
    margin-top: 1px
}

.dayButton {
    background-color: #fff;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 3px;
    width: 57px;
    padding-top: 2px
}

    .dayButton:hover, .icoW:hover, .icot:hover {
        border: 2px solid #717171
    }

.dayButtonSelect {
    background-color: #3fd400;
    color: white
}

.dayButtonUnSelect {
    background-color: #fd2252;
    color: white
}

.listSchedule {
    font-weight: bold
}

.btn-sm, .btn-xs {
    background-color: #f2f2f2;
}

.btn-group {
    text-align: left;
}

.titleSchedule1 {
    width: 230px;
    float: left;
}

.RScalendar {
    margin-top: 10px;
    margin-left: 10px;
}

.mainLeftPlanner {
    width: 350px;
    height: 100%;
    display: inline-block
}

.agendaContLeft {
    width: 100%
}

.subBkItPlan {
    padding: 2px 1px 14px 30px;
    font-weight: bold
}

    .subBkItPlan ul {
        list-style: none;
    }

    .subBkItPlan ul {
        font-weight: normal
    }

.txtRadPlan {
    margin: 2px 0 2px 2px;
}

@media only screen and (max-width: 1372px) {

    #plannerBody #ddlulPrivateTags li .labDDL .btTextHeaderGrid {
        display: inline-block !important;
        width: auto;
        opacity: 1;
    }
}

@media only screen and (max-width: 1590px) {
    .btText {
        width: 0;
        opacity: 0;
    }

    .btTextHeaderGrid {
        width: 0;
        opacity: 0;
    }

    .ui-dialog .btContainer .btText .btTextHeaderGrid {
        width: auto;
        opacity: 1;
    }
}

.list {
    margin-top: 15px;
    font-size: 0.9em;
    line-height: 1.3em
}

.filterSection {
    width: 250px;
    height: 25px;
    border-radius: 3px;
    border: 1px #ccc solid;
    padding: 1px;
    margin-bottom: 2px;
    padding-left: 4px
}

.filterSectionContainer, .filterSectionContainerHidden {
    display: inline-block;
    position: relative;
}

    .filterSectionContainer input {
        padding-left: 24px;
    }

    .filterSectionContainerHidden input {
        display: none;
    }

    .filterSectionContainer:after {
        font-family: 'FontAwesome';
        content: '\f002';
        position: absolute;
        padding: 0px 2px 2px 2px;
        color: #999b9c;
        left: 4px;
        top: 2px;
    }

    .filterSectionContainerHidden:after {
        display: none;
    }

.list ul {
    counter-reset: schedul;
}

.headFFGroupSched {
    margin-bottom: 2px;
    cursor: pointer
}

.list li {
    list-style-type: none;
    counter-increment: schedul;
    margin-bottom: 10px;
}

.detailRow {
    margin-bottom: 15px;
}

.tExtended td {
    vertical-align: top
}

.input-group-fRDetail {
    float: right;
    margin-right: 50px;
    margin-top: -30px;
}

.dvlineExtend {
}

.rArrow, .rArrowDetail {
    float: left;
    margin-right: 15px;
    margin-top: -5px;
}

.holderDDLSelect {
    width: 250px;
    text-align: left
}

.list li:before {
    content: counter(schedul); /* on affiche le compteur */
    padding: 4px 14px 6px;
    margin-right: 8px;
    vertical-align: top;
    background: #8CBDFD;
    -moz-border-radius: 60px;
    border-radius: 60px;
    font-weight: bold;
    font-size: 0.8em;
    color: white;
}

#generateDialog .datepicker, #dialogAction .datepicker, #calendarDialogPicker .datepicker, #editExternalFileDialog .datepicker {
    z-index: 99999 !important;
}

#plannerBody .ui-dialog, #plannerEditBody .ui-dialog, #myIssuesBody .ui-dialog, #myTasksBody .ui-dialog, #officeFolderBody .ui-dialog, #skeletonEditBody .ui-dialog, #externalFilesBody .ui-dialog, #compositeMediasBody .ui-dialog {
    overflow: visible !important;
}

#plannerBody .ui-dialog-content, #myIssuesBody .ui-dialog-content, #myTasksBody .ui-dialog-content, #officeFolderBody div[aria-describedby=generateInstall] .ui-dialog-content, #fileManagerBody .ui-dialog-content, #skeletonEditBody .ui-dialog-content {
    overflow: visible !important;
}

#externalFilesBody .ui-dialog-content, #compositeMediasBody .ui-dialog-content {
    overflow: visible !important;
    height: auto !important;
}

#officeFolderBody div[aria-describedby=generateInstall] .ui-dialog-content {
    height: 100px !important;
}

#plannerBody .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset, #plannerEditBody .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset, #officeFolderBody .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    text-align: center;
    float: none !important;
}

#plannerBody .ui-dialog .ui-dialog-buttonpane, #plannerEditBody .ui-dialog .ui-dialog-buttonpane, #officeFolderBody .ui-dialog .ui-dialog-buttonpane, #skeletonEditBody .ui-dialog .ui-dialog-buttonpane {
    padding: .3em .2em .5em .6em;
}

    #plannerEditBody .ui-dialog .ui-dialog-buttonpane button {
        width: 250px;
        height: 40px;
    }

@media only screen and (max-width: 1560px) {
    #plannerMain .btText {
        width: 0px;
        opacity: 0
    }

    #plannerMain #btddl span:first-of-type, #plannerMain #btddlView span:first-of-type, #plannerMain #btddlPrivateTags span:first-of-type, #btddlPriv span:first-of-type, #btddlIntensity span:first-of-type {
        display: none
    }
}

.gUser {
    margin-top: 10px;
    overflow-y: scroll;
    margin-left: 1px;
}
/* UPDATE GEN PAGE */
.blTagLeftGen {
    width: 360px;
    float: left
}

.updatelink {
    color: #337ab7
}

    .updatelink:hover {
        color: #337ab7;
        text-decoration: underline;
    }
/* The right part */
.blTagRightGen {
    width: calc(100% - 360px);
    float: right;
    margin-left: -1px
}

/*USER PAGE*/
.blTagLeftUs {
    width: 40%;
    float: left
}

.usSearch {
    padding-top: 10px;
}

.blkUsScroller {
    margin-top: -5px;
}

.jtable-bottom-panel {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    position:sticky !important;
    bottom:0;
}

#GridUser td {
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:200px;
}

#GridUser{
    height: 100%;
}

.jtable-right-area {
    position:initial !important;
}
/* The right part */
.blTagRightUs {
    width: 60%;
    float: right
}

.siteTagSelect {
    font-weight:bold;
}

/* TAG PAGE */
/***********************************************************************/
.gTag {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
    margin-left: 1px
}

.TagGroupRow {
    display: inline-block;
    width: 48%;
    margin-right: 10px;
    margin-bottom: 4px;
}

.hlGroupRow {
    font-size: 0.9em;
    color: #0E6683;
    cursor: pointer;
    height: 20px;
}

.ImageGroupRow {
    margin-left: 10px;
    background-image: url("../pictures/bleu-tag-icone-7600-16.png");
    background-repeat: no-repeat;
    width: 20px;
    height: 18px;
    float: left;
    margin-top: 3px;
}

.dvTagList {
    overflow-y: scroll
}

.blTagALL {
    display: inline-block;
    width: 100%;
    height: 100%;
}
/*the hidden left part */
.blTagLeftHidden {
    width: 0%;
    float: left;
    display: none
}
/*the left part */
.blTagLeft {
    width: 30%;
    float: left
}
/* the separator */
.blTagSeparator {
    display: inline-block;
    width: 1px;
    background: #C2C2C2;
}


.blTagSeparatorFloat {
    float: left;
    width: 1px;
    background: #C2C2C2;
}

.blTagSeparatorHidden {
    float: left;
    display: none;
    width: 1px;
    background: #C2C2C2;
}
/* The right part */
.blTagRight {
    width: 70%;
    float: right;
    margin-left: -1px;
}

.blTag3PartsLeft1 {
    width: 20%;
    float: left
}

.blTag3PartsLeft2 {
    width: 28%;
    float: left;
    margin-left: -1px
}

.blTag3PartsRight {
    width: 52%;
    float: right;
    margin-left: -1px
}

/*tag design this is UL / LI Structure */
.popup50 {
    width: 267px;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.uTagList li a {
    display: block;
    padding: 6px 6px 6px 6px;
    text-decoration: none;
    background: #FF188C;
    float: left;
    color: white;
    margin-right: 10px;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid #C2C2C2;
    font-size: 0.7em;
    cursor: pointer;
}

.tgpSp2 {
    float: right;
    background-color: #FF188C;
    color: #5C5C5C;
    border-radius: 5px;
    border: 2px solid #FF188C;
    font-size: 0.9em;
    height: 17px;
}

.tgpSp1 {
    float: left;
    margin-top: 2px;
}

    .tgpSp1 i {
        margin-right: 10px
    }

.BorderTag {
    border-bottom: 1px solid #F6D2FC
}

.BorderGroup {
    border-bottom: 1px solid #25ADD8
}

.tleftProperties {
    width: 120px;
    float: left;
    padding-top: 3px;
}

.picheck {
    display: inline-block;
    width: 100%
}

.uTagList li {
    margin-left: 5px;
}

.uTagList {
    list-style: none;
}

.hlGroupRow:hover {
    font-weight: bold;
}

.itemSelectedTag {
    font-weight: bold;
    border-radius: 5px;
    background-color: #E4E4E4;
}

.uTagList li a:hover, .uTagList li itemSelectedTagUi {
    background: #707070;
    color: #FFF
}

/* TIME SLOTS PAGE */
/***********************************************************************/

/*the left part */
.blTimeSlotLeft {
    width: 20%;
    float: left
}

.blTimeSlotRight {
    width: 80%;
    float: right;
    margin-left: -1px;
}

#grpStartHour .smallinput,
#grpEndHour .smallinput {
    width: 100px;
    height: 28px;
    text-align: center;
    border-radius: 4px;
    border: solid 1px #ddd;
    font-size: 14px;
    margin: 2px;
    padding-top: 3px;
}


/*#grpEndHour .smallinput {
    width: 120px;
    height: 28px;
    text-align: center;
    border-radius: 4px;
    border: solid 1px #ddd;
    font-size: 14px;
    margin: 2px;
    padding-top: 3px;
}*/

.input-number-no-arrows {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.input-number-no-arrows::-webkit-inner-spin-button,
.input-number-no-arrows::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* TASKS PAGE */
/***********************************************************************/
.txtDetail {
    width: 98%;
    height: 95%;
    resize: none;
    padding: 8px
}

.grpBlockDetailLog {
    width: 100%;
    height: 97%;
    font-size: 10pt
}

.taskProperties {
    margin: 15px;
}

.taskStatusCell {
    background: #fff;
    height: 24px;
    min-width: 84px;
    width: auto;
    display: inline-block;
    border-radius: 5px;
    color: #000;
    padding: 2px 8px 2px 8px;
    border: 1px solid #BBB;
}

/* UPDATE GENERATION PAGE */
/***********************************************************************/
.taskStatusCellBig {
    background: #fff;
    height: 28px;
    width: auto;
    display: inline-block;
    border-radius: 5px;
    color: #000;
    padding: 4px 8px 2px 8px;
    border: 1px solid #BBB;
}


/* FILEUPLOAD PAGE */
/***********************************************************************/
.headerUpload {
    width: 100%;
    height: 140px;
    display: inline-block;
    background-color: #eae9e9;
    margin-bottom: 15px;
    min-width: 1000px;
}

.headerImg {
    float: left;
    width: 210px;
}

.headerTitle {
    font-size: 1.1em;
    color: #FFF;
    padding: 11px;
}

.infoDl {
    text-align: center
}

.UpOpenEdit {
    width: 220px;
    position: relative;
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.files video {
    height: 69px
}

#fileupload .name {
    font-size: 13px;
    padding-top: 12px
}

#fileupload .error {
    font-size: 13px;
    background: Red;
    padding: 3px 6px;
    margin-top: 1px;
    border-radius: 4px;
    color: #fff
}

    #fileupload .error:empty {
        display: none
    }

#fileupload .size {
    margin-top: 12px
}

#fileupload audio {
    padding-top: 16px
}

#fileUploadMain .lbGroup {
    color: #333;
    font-size: 14px;
}

@media only screen and (min-width: 800px) {
    #fileUploadMain .btText {
        width: auto;
        opacity: 1;
    }
}


/* LAYOUT PAGE */
/***********************************************************************/

/*THE GRID STACK*/
#layoutBody div.jtable-main-container > table.jtable > tbody > tr:hover, #layoutBody div.jtable-main-container > table.jtable > tbody > tr {
    /*background: #1f2427*/
}

.grid-stack {
    margin: 5px 0px 15px 0px;
}

.grid-stack-item-content {
    color: #FFF;
    background: #f7f7f7;
}

.grid-stack-item .grid-stack-item-content, .grid-stack-item .placeholder-content, .grid-stack > .grid-stack-item > .grid-stack-item-content {
    left: 5px;
    right: 5px;
    bottom: -10px;
    overflow: hidden;
}

#layoutBody .masonry {
    background-color: rgba(85,85,85,1);
}

#layoutBody .map {
    position: absolute;
    top: 30px;
    bottom: 0px;
}

#layoutBody .panelBody {
    background-color: none
}

#layoutBody .container {
    width: 100% !important;
    padding: 0 0 0px 0 !important;
    background: #1f2427;
}

    #layoutBody .container .row {
        margin: 5px 0px 0px 0px;
    }

        #layoutBody .container .row:first-child {
            margin-top: 0px;
        }

        #layoutBody .container .row .brick:last-child {
            padding-right: 0px;
        }

    #layoutBody .container .panelHeading {
        background: #1f2427;
    }

    #layoutBody .container .row .col-md-12, #layoutBody .container .row .col-md-6, #layoutBody .container .row .col-md-4, #layoutBody .container .row .col-md-3 {
        padding: 0 5px 0 0;
    }

#layoutBody .panelBodyContent img {
    max-width: 100%;
}

#layoutBody .panelBodyContent {
    display: block;
    height: calc(100% - 50px) !important;
    /*margin-top:-5px;*/
}

#layoutBody .panelHeading {
    padding-top: 5px;
    padding-left: 5px;
    width: 100%;
    display: inline-block;
    cursor: pointer;
}

    #layoutBody .panelHeading .title {
        height: 25px;
        float: left;
        font-size: 1.2em;
        color: #118fc7;
        font-weight: bold;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #layoutBody .panelHeading .CrossPicture, .panelHeading .ExportPicture, .panelHeading .SettingPicture, .panelHeading .RefreshWidget {
        cursor: pointer;
        color: #757575;
        float: right;
        top: 15px;
        margin-right: 10px;
    }

#layoutBody .panelBody {
    padding: 0px;
}

#layoutBody .icoShortLink {
    font-size: 1em;
    padding: 15px;
    cursor: pointer;
}

#layoutBody .hRowNews, .hRowOpen, .hRowOpen a, .hRowOpen i, .hGuide, .hGuide a {
    color: #FFF;
}

#layoutBody .ui-dialog .ui-dialog-content {
    overflow-y: auto
}

#layoutBody .fa.fa-exclamation-circle {
    color: red;
    font-size: 1.5em
}

#layoutBody .fa.fa-check-circle {
    color: green;
    font-size: 1.5em
}
/*For now  desactive cross picture*/
#layoutBody .CrossPicture {
}

/*JPLAYER OVERRIDE*/
#layoutBody div.jp-audio ul.jp-controls {
    width: 450px;
}

/*TELERIK REPORT VIEWER OVERRIDES*/
#layoutBody .trv-pages-area.interactive .trv-page-container .trv-page-wrapper .trv-report-page {
    padding: 0px !important;
}

*#layoutBody .trv-pages-area.interactive .trv-page-container .trv-page-wrapper.active .trv-report-page:not(.k-state-default) {
    border-color: #f7f7f7 !important;
}

*#layoutBody .trv-pages-area.interactive .trv-page-container .trv-page-wrapper .trv-report-page {
    background: #f7f7f7 !important;
}

#layoutBody .k-widget {
    background: #f7f7f7 !important;
    border: none !important
}

#layoutBody .panelHeading {
    font-family: "ProximaNova",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

#contentFilter .form-group {
    margin-bottom: 5px !important;
}

.fullCellFill {
    width: auto;
    height: 22px;
    border-radius: 4px;
    border: none;
    padding: 3px 6px 3px 6px;
    color: white;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    font-size: 0.9em;
    overflow: hidden;
}

.fullCellDateFill, .fullCellDateTimeFill {
    width: 80px;
    height: 22px;
    border-radius: 4px;
    border: none;
    padding: 3px 6px 3px 6px;
    color: white;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-align: center;
}

.fullCellDateTimeFill {
    width: 108px !important;
}

@media only screen and (max-width: 1500px) {
    #layoutBody .social-circle li a {
        width: 30px;
        height: 30px;
    }

    #layoutBody .social-circle li i {
        line-height: 30px;
    }
}

/*@media only screen and (max-width: 1024px) {
    #layoutBody  {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (max-width: 640px) {
    #layoutBody {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}*/


/*loading spinner*/
#circularloader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
}

.ringloader {
    width: 100%;
    height: 100%;
    border: 8px solid #162534;
    border-top: 8px solid #09f;
    border-radius: 50%;
    animation: ringloaderrotate 5s linear infinite;
}

@keyframes ringloaderrotate {
    100% {
        transform: rotate(360deg)
    }
}


/* CONFIG PAGE */
.dlgInjectCfgTab {
    float: left;
    width: 150px;
    color: #285e8e;
    text-align: left;
    font-size: 15px;
}

.dlgInjectCfgGroup {
    color: #000;
    text-align: left;
    font-size: 13px;
}

.dlgInjectCfgChkLabel {
    position: relative;
    left: 4px;
    top: -2px;
}


/* FILEMANAGER PAGE */
/***********************************************************************/
.ui-dialog-title {
    font-size: 13px;
}

.dvFillSpace {
    height: 100%;
}

.ui-datepicker {
    font-size: 11px;
}

.SeparatorGrp1 {
    clear: both;
    height: 10px;
}

.chosen-ddl {
    width: 95%
}

.chzn-drop {
    z-index: 999
}

.upd-header-img {
    vertical-align: middle;
    margin-top: 14px;
}

.firstPass {
    background-color: #e1ffce
}

.firstPassAlt {
    background-color: #ffe1c2
}

.upd-header-elt {
    text-align: center;
    vertical-align: middle;
    margin-top: 12px;
    padding-top: 34px;
    font-family: 'ProximaNova';
    height: 100%;
}

    .upd-header-elt h1 {
        font-size: 30px;
    }


.upload-area {
    /*  width: calc(100% - 25px);*/
    border: 2px dashed lightgray;
    border-radius: 3px;
    margin: 1em auto;
    overflow: auto;
}


    .upload-area:hover {
        cursor: pointer;
    }

    .upload-area h1 {
        padding: 1.3em;
        font-weight: normal;
        font-family: 'ProximaNova';
        color: darkslategray;
        text-align: center;
        font-size: 2em;
    }

.tagCollapser {
    color: #333;
    font-size: 14px;
    font-weight: 700;
}

.dvFilterSpotify {
    margin-left: 30px;
}

.dvFilterSearch, .dvFilterInclude, .dvFilterExclude, .dvFilterSearchPublic, .dvFilterSearchPrivate, .dvFilterRadioshop, .dvFilterItunes, .dvFilterUniversal {
    padding: 4px;
    margin-left: 25px;
    overflow-y: auto;
    max-height: 700px;
    min-height: 100px;
    overflow-x: hidden;
}

.titleCollapsable {
    font-size: 1.0em;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

#dvTagInclude .lbGroup, #dvTagExclude .lbGroup {
    margin-bottom: 0px !important;
    line-height: 14px !important;
}

#dvTagInclude .chzn-choices, #dvTagExclude .chzn-choices {
    height: 28px !important;
}

#dvTagInclude .search-choice, #dvTagExclude .search-choice {
    height: 20px !important;
}

    #dvTagInclude .search-choice span, #dvTagExclude .search-choice span {
        position: relative;
        top: -2px !important;
    }

.grDown {
    float: left
}

.grClear {
    clear: both
}

.imgGrid {
    text-align: center;
    cursor: pointer;
}

    .imgGrid:hover {
        color: #FF6A2F
    }

.imgPadding {
    margin-right: 20px;
}

.grpFilter, .grpFilterLarge, .grpFilterShort, .grpMainL, .grpMainLTag {
    display: inline-block
}

.grpFilter {
    width: 115px;
}

.grpFilterShort {
    width: 70px;
}

.grpFilterLarge {
    width: 20%;
    margin-bottom: 10px;
    vertical-align: top
}

.grpFilterLargePlus {
    width: 49%;
    margin-bottom: 10px;
}

.grpFilterM {
    width: 170px
}

.grpMainL {
    width: 290px;
    margin-right: 20px
}

.ui-spinner-input {
    margin: 0 16px 0 0;
}

.eltExtIt {
    height: 100px;
    padding-top: 35px;
    font-size: 1.1em
}

.eltExtIt2 {
    height: 100px;
    padding-top: 35px;
    font-size: 1.8em;
    cursor: pointer
}

.eltExtIt a {
    border: 1px solid;
    padding: 5px;
    border-radius: 4px
}

.eltExtIt.titleExt {
    font-weight: bold;
    color: #707070
}

#MediaTableList {
    height:100%;
}

#MediaTableListItunes .row, #MediaTableListUniversal .row, #MediaTableListSpotify .row {
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 10px;
}

    #MediaTableListItunes .row audio {
        margin-bottom: -55px;
    }

#MediaTableListItunes, #MediaTableListSpotify {
    padding-left: 10px;
    width: 97%
}

    #MediaTableListSpotify .row {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-top: 12px;
        padding-bottom: 2px;
    }

.lblMedItuneTitle {
    font-size: 1.35em;
    color: #565656;
    padding: 15px;
}

#mainFileManager .search-choice {
    margin-top: 4px !important
}

#mainFileManager .chzn-container-single .chzn-single {
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px;
    color: #5f5a55 !important
}

#mainFileManager .chzn-container-single .search-choice-close {
    margin-top: 4px
}

#mainFileManager .chzn-container-single .chzn-single div b {
    background-position: 0px 2px !important
}

#mainFileManager .chzn-container-active.chzn-with-drop .chzn-single div b {
    background-position: -18px 2px !important
}

.mngSkeletonTags {
    overflow: auto;
    height: 340px
}

.mngTagsRow {
    width: 100%;
    height: 28px;
    clear: both;
    border-bottom: solid 1px #eee;
    margin-top: 2px
}

.mngTagName {
    width: 160px;
    float: left;
    text-align: left;
    padding-top: 6px;
    padding-left: 5px
}

.mngTagScope {
    width: 100px;
    float: left;
    text-align: left;
    padding-top: 6px
}

.mngTagVisibility {
    width: 240px;
    float: left;
    text-align: left;
    padding-top: 6px
}

.mngTagBtnEdit, .mngTagBtnDelete {
    width: 40px;
    float: left;
    padding-top: 3px;
}

    .mngTagBtnEdit button, .mngTagBtnDelete button {
        border: solid 1px #ddd !important;
        border-radius: 2px;
    }

.exAlbum100 {
    width: 100px;
    height: 100px;
    margin-top: -5px;
}

#dialogImportToMusicLibrary .chzn-results {
    max-height: 120px;
    overflow-y: auto;
}

/*IdentityPage*/
/***********************************************************************/
#grpLicensingFlags .chzn-choices {
    border-radius: 4px;
}

/*OfficesPage*/
/***********************************************************************/
#officesDialogBatchImport .btn-default:default {
    background-color: #fff;
    color: #999;
}

#officesDialogBatchImport .btn-default:hover {
    background-color: #eee !important;
}

#officesDialogBatchImport .btn-default:active {
    background-color: #999 !important;
    outline: none !important;
    box-shadow: none !important;
}

#officesDialogBatchImport .btn-default:visited {
    background-color: green !important;
    outline: none !important;
    box-shadow: none !important;
}

#officesDialogBatchImport .btn.active.focus, #officesDialogBatchImport .btn.active:focus, #officesDialogBatchImport .btn.focus, #officesDialogBatchImport .btn:active.focus, #officesDialogBatchImport .btn:active:focus, #officesDialogBatchImport .btn:focus {
    outline: 0;
}

#officesDialogBatchImport .dropdown-menu-center {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/*OfficePage*/
/***********************************************************************/

#officeNewSchedule .celldiv {
    height: 24px !important;
    max-height: 24px !important;
    margin: 0px;
    padding: 0px;
}

    #officeNewSchedule .celldiv span {
        font-size: 12px;
    }

#officeNewSchedule .spanstroke {
    text-decoration: line-through;
}

#officeNewSchedule .timetablerow {
    width: 200px;
    min-width: 100px;
    line-height: 46px;
}

#officeNewSchedule .timetablename {
    height: 46px;
    vertical-align: middle;
    display: table;
}

#officeNewSchedule .timetablename2 {
    font-size: 14px;
    color: #636262;
    white-space: pre-wrap;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 16px;
    vertical-align: middle;
    display: table-cell;
}

#officeNewSchedule .bootstrap-switch {
    height: 28px;
}

#officeNewSchedule .bootstrap-switch-handle-on, #officeNewSchedule .bootstrap-switch-handle-off {
    height: 28px !important;
}



#officeNewSchedule .smallinput, #officeNewSchedule .smallinputred, #officeNewSchedule .smallinputstrong {
    width: 60px;
    height: 28px;
    text-align: center;
    border-radius: 4px;
    border: solid 1px #ddd;
    font-size: 14px;
    margin: 2px;
    padding-top: 3px;
}

#officeNewSchedule .smallinputred {
    color: Red;
    font-weight: bold;
}

#officeNewSchedule .smallinputstrong {
    color: #000;
    font-weight: bold;
}

#officeNewSchedule .smallinputdisabled {
    background: #ddd;
    color: #000;
}

#officeNewSchedule .btn-default:default {
    background-color: #fff;
    color: #999;
}

#officeNewSchedule .btn-default:hover {
    background-color: #337ab7 !important;
    color: #fff !important;
}

#officeNewSchedule .btn-default:active {
    background-color: #337ab7 !important;
    outline: none !important;
    box-shadow: none !important;
}

#switchTimeViewMode .active {
    background-color: #337ab7 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}


/*FileEditPage*/
/***********************************************************************/
.copyTextClipboard {
    width: 1px;
    height: 1px;
    border: none
}

.grpAudioFEdit {
    margin-top: 20px;
}

.rowExplo {
    width: 450px;
    display: block;
    float: left;
    margin-right: -5px;
}

.explorer {
    width: 445px;
    float: left;
}

.rightContent {
    float: left;
    width: calc(100% - 446px)
}

.dvseparatorExplo {
    border-right: 1px solid #C2C2C2;
    float: left;
    height: 489px;
    margin-top: -4px;
}

.actionCommand {
    border-top: 1px solid #C2C2C2;
    padding-top: 14px;
    position: fixed;
    bottom: 0;
    left: 0;
    min-width: 400px;
    width: 100%;
    background-color: white;
    height: 50px;
}

    .actionCommand div {
        margin-left: 5px;
    }

.actionCommandRight {
    float: right;
    margin-right: 60px;
}

.repImg {
    display: block;
    vertical-align: middle;
    opacity: 0.75;
    cursor: pointer;
    padding: 4px 3px 3px 3px !important
}

.exploTitle {
    margin-top: 5px;
    height: 32px;
}

.exploSubRow {
    font-size: 0.8em;
    color: #357ebd;
    padding-left: 20px;
    margin-top: -2px
}

.exploFname {
    color: #333;
    display: inline-block
}

    .exploFname:hover {
        font-weight: bold;
        cursor: pointer;
    }

.blDirectoryBrowser {
    overflow-y: auto;
    margin-left: 10px;
    margin-top: -6px;
    border-right: 5px #cccccc solid;
}

.repeatFEdit {
    color: #118fc7;
    font-size: 0.88em;
    padding-right: 5px;
}

.blDirectoryBrowser:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 445px;
    /* margin-left: -50px; */
    width: 0;
    height: 0;
    border-left: solid 10px #cccccc;
    border-bottom: solid 10px transparent;
    border-top: solid 10px transparent;
}

.titleGroup {
    font-size: 22px;
    font-weight: bold;
}

.dvGroupSecTitle {
    padding-bottom: 20px;
}

.itemSelected {
    font-weight: bold;
    font-size: 1.1em;
    background: #c3e9fd;
    border: 2px solid #ededed;
    border-radius: 5px;
    padding: 2px;
}

.itemChange {
    color: #0b7600;
}

.titMedExt {
    font-size: 0.88em;
    font-weight: normal;
    cursor: pointer
}

.itemDone {
    color: #1c9d09
}

.fileEditTitle {
    padding-top: 5px;
    color: #808080
}

#cblinker, #cblinkerSoundcharts, #cblinkerSpot {
    width:225px;
}

#assoItOp, #assoItOpSpot, #assoSoundcharts {
    color: #428bca !important;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px 0px 0px 4px;
    width: 225px;
    height: 29px !important;
}

.dvWaveForm {
    width: 1100px;
    margin: 15px
}

.btnPlay {
    content: url("/pictures/play-6-24-80.png")
}

.btnPause {
    content: url("/pictures/pause-24-80.png")
}

.choGrp {
    float: left;
    width: 300%
}

.contTag {
    display: inline-block;
    border: 1px #ccc dashed;
    border-radius: 10px;
    margin: 20px;
    padding: 5px
}

.contTag2 {
    display: inline-block;
    width: calc(100% - 30px);
    border: 1px #ccc dashed;
    border-radius: 10px;
    margin: 10px;
    padding: 5px
}

.btProp {
    margin-right: 10px
}

.cGrpProperties {
    padding: 10px 1px 1px 5px;
    margin: 0 15px 0 15px;
}

.cGrpProperties > #form-head {
    display:flex;
    flex-direction: row-reverse;
}

@media only screen and (max-width: 1200px) {
    .cGrpProperties > #form-head {
        flex-direction: column !important;
    }
}

    .cGrpProperties audio {
        width: 500px
    }

.gFCSingle {
    padding-top: 10px;
    width: 100%;
    margin-left: 25px
}

.dialogMultitag .ui-dialog-titlebar, .dialogFold .ui-dialog-titlebar {
    background-color: #333;
    color: white
}

#dialogEditTagGroup .ui-dialog, .ui-dialog-content {
    overflow: hidden !important
}

.dialogLayout {
    background-color: rgb(73, 76, 78);
    border-color: #3f97be;
    overflow: hidden !important
}

    .dialogLayout .ui-corner-all {
        border-radius: 0
    }

    .dialogLayout .ui-widget.ui-widget-content {
        border: 3px solid #6f6f6f
    }

    .dialogLayout .form-group label {
        color: #fff
    }

    .dialogLayout .ui-widget-header {
        background: #ffffff;
        color: #3f97be
    }

    .dialogLayout.ui-dialog .btContainer {
        font-size: 0.9em;
        color: #479cc1
    }

.dialogContact .ui-dialog-titlebar {
    background-color: #7CB838;
    color: white
}

.dvBlockCopy select {
    font-size: 0.8em
}

.titleBootPub, .titleBootPriv {
    font-size: 1em;
    font-weight: bold
}

.titleBootPub {
    color: #19801A
}

.titleBootPriv {
    color: #F70101
}

.exFeatures {
    border: 2px solid #51bfff;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 25px
}

.customerComment {
    display: flex;
    flex-direction: column;
    align-items: center
}

.box100Exf {
    width: 100px;
    height: 100px;
    background-color: #118fc7;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 17px
}


@media (max-width: 768px) {
    .box100Exf {
        width: 200px;
        height: 200px;
        background-color: #118fc7;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 17px
    }

    .customerComment {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 60px;
    }


    .mobileMargin {
        margin: -40px;
    }
}

.fieldSuffix {
    float: left;
    padding-top: 4px;
    padding-left: 3px
}
/*Dialog TAG PICKER POPUP */
/***********************************************************************/

.globalTagFooterTelem {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* margin: auto; */
    gap: 10px;
    bottom: 0;
    position: absolute;
    margin: 15px;
    font-size: 1.25em;
}

    .globalTagFooterTelem select,
    .globalTagFooterTelem input {
        flex: 1;
        max-width: 300px;
        font-size: 0.9em;
    }

.btContainerTelem {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacement entre l'icône et le texte */
    cursor: pointer;
}


.tagFullAdv, .tagFullAdvPrivate {
    overflow-y: no-display;
    width: 100%;
    height: 90%;
    margin-top: 15px
}

.TgPickDescription {
    font-size: 12px;
    display: inline-block;
    width: 75%
}
.globalTagHeader {
    width: 95%;
    margin: 15px;
    text-align: left;
    font-size: 1.25em;
}

.globalTagFooter {
    width: 95%;
    display: inline-block;
    bottom: 0;
    position: absolute;
    margin-bottom: 15px;
    text-align: right;

}

.globalTagFooter2 {
    width: 90%;
    display: inline-block;
    bottom: 0;
    position: absolute;
    margin-bottom: 10px;
    text-align: right;
    font-size: 14pt
}

.globalTagFooter3 {
    width: 100%;
    display: inline-block;
    bottom: 0;
    text-align: right;
    font-size: 14pt
}

.globalTagFooter4 {
    width: 100%;
    bottom: 0;
    text-align: right;
    font-size: 14pt;
    float: right;
    position: absolute;
    right: 10px
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden
}
    /* Anytime the body has the loading class, our
   modal element will be visible */
    body.loading .modal {
        display: block
    }

footer a {
    color: white
}
/* Entity Browser user controll */
.ebfilterSite {
    padding: 0px;
    height: 30px;
    font-size: 13px !important
}

    .ebfilterSite input {
        font-family: ProximaNova !important;
        font-size: 14px !important
    }

.bLeft {
    width: calc(100% - 5px); /* 100% - split bar */
    float: left
}

.ebMAIN {
    width: 350px;
    display: block
}

.split-bar {
    background-color: #CCC;
    height: 100%;
    float: right;
    width: 5px;
    cursor: col-resize
}

.ebENS, .ebSIT, .ebfilterSite {
    height: 190px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ebENT {
    height: 100px
}

.dvTagFullPicker {
    width: 95%
}
/* Components */
.c-mTagRoot {
    background-color: #118fc7;
    float: left;
    border-radius: 5px;
    width: 100px;
    height: 26px;
    font-size: 0.8em;
    margin: -6px 3px 0 0;
    margin-bottom: 15px
}

.c-mTagSubText {
    width: 75px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    color: white;
    padding-left: 10px;
    margin-top: 6px
}

.c-mTagSubImg {
    width: 12px;
    cursor: pointer;
    margin-top: 8px;
    margin-left: 4px
}

.dvColSinger {
    display: inline-block;
    border: none;
    border-style: none;
    box-shadow: none
}
/*Footer*/
/***********************************************************************/
.hFooter {
    width: 100%;
    text-align: center;
    background-color: #B1B1B1;
    color: white;
    padding-top: 10px;
    height: 100px;
    float: left;
}

/*=========================
  Icons footer
 ================= */
/* footer social icons */
ul.social-network {
    list-style: none;
    /* display: inline; */
    margin-left: 0;
    padding: 0;
    right: 10px;
}

    ul.social-network li {
        display: inline;
        padding: 0 4px 0 0;
    }
/* footer social icons */
.social-network a.icoRss:hover {
    background-color: #D3D3D3
}

.social-network a.icoFacebook:hover {
    background-color: #D3D3D3;
}

.social-network a.icoTwitter:hover {
    background-color: #D3D3D3;
}

.social-network a.icoGoogle:hover {
    background-color: #D3D3D3;
}

.social-network a.icoVimeo:hover {
    background-color: #D3D3D3;
}

.social-network a.icoLinkedin:hover {
    background-color: #D3D3D3;
}

    .social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
    .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
        color: #fff;
    }

socialIcon:hover, .socialHoverClass {
    color: #44BCDD;
}

.social-circle li a {
    display: inline-block;
    position: relative;
    margin: 0 auto 0 auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    width: 43px;
    height: 43px;
    font-size: 20px;
}

.social-circle li i {
    margin: 0;
    line-height: 43px;
    text-align: center;
}

.social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}

.social-network a.icoRss {
    background-color: #F56505;
}

.social-network a.icoFacebook {
    background-color: #3B5998;
}

.social-network a.icoTwitter {
    background-color: #33ccff;
}

.social-network a.icoGoogle {
    background-color: #BD3518;
}

.social-network a.icoVimeo {
    background-color: #0590B8;
}

.social-network a.icoLinkedin {
    background-color: #007bb7;
}
/* Responsive JOB */

.responsiveNavbarMenuIcon {
    width: 0px !important;
    visibility: collapse !important
}





/* bootstrap navbar dropdown-toggle dark theme */
#pickerIdentityContainer .navbar {
    min-height: 42px !important;
    min-width: 180px !important;
}
/* DB CORRECTION MARGIN BUG DISPLAY 1 px not in right background... */
.navbar.navbar-inverse.bs-dark {
    border: 0;
    margin-bottom: 0px !important;
}

.bs-dark .ddl-dark {
    background: #333;
    border: 0 solid #333;
    border-radius: 0px;
    margin: 0 -1px 0px 0px; /* DB CORRECTION MARGIN BUG DISPLAY 1 px not in right background... */
    height: 42px !important;
    min-width: 180px !important;
}

    .bs-dark .ddl-dark:hover {
        border: 0 solid #cccccc;
        cursor: pointer;
        background: #555555;
        border-radius: 3px;
        color: White;
        text-decoration: none;
    }

.bs-dark .navbar-inverse {
    background: transparent;
    border: none;
}

.bs-dark .caret {
    margin-left: 8px;
}

.bs-dark .navbar-img {
    padding: 5px 6px !important;
}

    .bs-dark .navbar-img img {
        width: 40px;
    }

.bs-dark .dropdown-menu {
    min-width: 200px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

    .bs-dark .dropdown-menu .divider {
        border: 1px solid rgba(0, 0, 0, 0.8);
    }

    .bs-dark .dropdown-menu > li > a {
        padding: 6px 20px;
        color: rgba(255,255,255,0.80);
    }

        .bs-dark .dropdown-menu > li > a:hover,
        .bs-dark .dropdown-menu > li > a:focus {
            background-color: #555555;
        }

    .bs-dark .dropdown-menu > .active > a,
    .bs-dark .dropdown-menu > .active > a:hover,
    .bs-dark .dropdown-menu > .active > a:focus {
        color: rgba(255,255,255,0.70);
        text-decoration: none;
        background-color: transparent;
        outline: 0;
    }

.bs-dark .navbar-form {
    margin: 0;
    margin-top: 5px;
    padding: 8px 0px;
}

.bs-dark .search-box:focus + button {
    z-index: 3;
}

@media only screen and (max-width: 1099.5px) {
    #pickerIdentityContainer {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

        #pickerIdentityContainer .navbar {
            min-height: 42px !important;
            min-width: 60px !important;
            max-width: 60px !important;
            width: 60px !important;
        }

    .bs-dark .ddl-dark {
        background: #333333;
        border: 1px solid #333;
        border-radius: 0px;
        margin: 0 -1px 0px 0px; /* DB CORRECTION MARGIN BUG DISPLAY 1 px not in right background... */
        height: 42px !important;
        min-width: 60px !important;
    }

    .bs-dark .dropdown-menu {
        min-width: 60px !important;
        max-width: 60px !important;
        width: 60px !important;
    }
}




/* autocomplete */
#stylish-container {
    clear: both;
    margin-top: 6px;
}

.stylish-input-group .input-group-addon {
    background: white !important;
}

.stylish-input-group .form-control {
    border-right: 0;
    box-shadow: 0 0 0;
    border-color: #666;
}

.stylish-input-group button {
    border: 0;
    background: transparent;
}

#txtToolbarSearchBrand {
    width: calc(100% - 34px);
    height: 34px;
    background: #555;
    letter-spacing: 1px;
    color: #FFF !important;
    padding-left: 38px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.tbSearchIconWrapper, .tbClearIconWrapper {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 10px;
    color: #AAA;
    z-index: 999;
}

.tbSearchIconWrapper {
    left: 48px;
}

.tbClearIconWrapper {
    right: 26px;
    cursor: pointer;
    color: #FFF !important;
}


.tbAutoCompResWrapImg {
    display: flex;
    height: 40px;
    width: 243px !important;
    line-height: 15px;
    border-bottom: 1px solid #c5c5c5;
}

    .tbAutoCompResWrapImg a {
        display: flex;
        flex: 1;
        min-width: 0;
        align-items: center;
        margin: 0px 0px 0px 5px;
        padding: 0px;
        color: #000;
    }

        .tbAutoCompResWrapImg a span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tbAutoCompResWrapImg a:hover {
            color: #000;
        }

        .tbAutoCompResWrapImg a::after {
            display: block;
            content: attr(title);
            font-weight: bold;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

.tbAutoCompResDivImg {
    float: left;
    width: 34px;
    height: 34px;
    border-radius: 3px 0px 0px 3px;
    padding: 2px 0px 0px 2px;
    background: #FFF;
}

.tbAutoCompResSelImg {
    width: 30px;
    height: 30px;
}

.tbAutoCompResImg {
    width: 32px;
    height: 32px;
    margin-right: 5px;
    vertical-align: top;
}


#tbFakeSubmit:focus {
    outline: none;
}

.tbAutoCompResImgCont {
    position: relative;
    text-align: center;
    color: white;
    float: left;
}

.tbAutoCompResImgContCenter {
    position: absolute;
    top: 50%;
    left: 44%;
    transform: translate(-50%, -50%);
}

.ui-autocomplete {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000 !important;
}

/*Custom scrollbars*/
.thin-dark-custom-scrollbar {
    scrollbar-face-color: #646464;
    scrollbar-base-color: #646464;
    scrollbar-3dlight-color: #646464;
    scrollbar-highlight-color: #646464;
    scrollbar-track-color: #000;
    scrollbar-arrow-color: #000;
    scrollbar-shadow-color: #646464;
    scrollbar-dark-shadow-color: #646464;
}

    .thin-dark-custom-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 3px;
    }

    .thin-dark-custom-scrollbar::-webkit-scrollbar-button {
        background-color: #666;
    }

    .thin-dark-custom-scrollbar::-webkit-scrollbar-track {
        background-color: #646464;
    }

    .thin-dark-custom-scrollbar::-webkit-scrollbar-track-piece {
        background-color: #000;
    }

    .thin-dark-custom-scrollbar::-webkit-scrollbar-thumb {
        height: 50px;
        background-color: #666;
        border-radius: 3px;
    }

    .thin-dark-custom-scrollbar::-webkit-scrollbar-corner {
        background-color: #646464;
    }

    .thin-dark-custom-scrollbar::-webkit-resizer {
        background-color: #666;
    }

/* valign fluid align container */
.valignHost {
    display: table;
    width: 100%;
    height: 100%;
}

.valignContent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

@media only screen and (max-width: 1500px) {
    /* home page */
    .social-circle li a {
        width: 30px;
        height: 30px;
    }

    .social-circle li i {
        line-height: 30px;
    }
}

@media only screen and (max-width: 1650px) {
    /* filemanager*/
    #mainFileManager #grpBegin {
        width: 14%;
    }

    #mainFileManager #grpEnd {
        width: 14%;
    }

    #mainFileManager #grpMin {
        width: 14%;
    }

    #mainFileManager #grpMax {
        width: 14%;
    }
}



@media only screen and (max-width: 1372px) {
    /* default one applied on all pages */
    .bkRPanel, .bkRPanelMap {
        display: block;
        width: 100%;
        margin-bottom: 40px;
    }

    .dvWrapper {
        min-width: 300px;
    }

    .dvNews {
        overflow: hidden;
    }

    .dvDoc p {
        font-size: 0.9em
    }

    .img {
        margin-left: 11px;
    }

    .labDDL {
        /* display: none;*/
    }

    .toolBarButtonsDDLBS .fa {
        margin-right: 5px;
    }

    /*Main Menu*/
    .titleMenuGroup {
        display: none;
    }

    .colorNav > ul {
        padding-left: 20px;
    }

        .colorNav > ul > li {
            width: 50px;
            margin-left: 5px;
        }

    .colorNav li ul {
        margin-left: -105px;
    }

    .dvMenuList {
        margin-left: 10px;
        position: inherit;
    }

    /*navbar menu*/
    .clickMediaMetaField {
        padding: 12px 0px 12px 0px !important;
    }

    .responsiveNavbarMenuIcon {
        width: auto !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        visibility: visible !important;
    }

    .responsiveNavbarMenuLabel {
        display: none;
    }

    /*IOVIEWER PAGE*/
    .blCloudRight {
        width: 300px;
    }

    .blCloudLeft {
        width: calc(100% - 310px);
    }
}

@media only screen and (max-width: 767.5px) {
    #pickerBrandContainer {
        width: 200px !important;
    }

    #tbSearchGrp {
        float: right !important;
        width: 100% !important;
    }

    #pickerIdentityContainer {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 700px) {
    .imgHead {
        margin-top: 15px;
    }

    /* HOME PAGE*/
    .dvNews, .dvMap {
        font-size: 0.8em;
    }
    /*EDITION OF SITE*/
    .dvdproperties, .opSMapCont, .txtWeather, .txtNote, .dvWeather {
        width: 330px;
    }

    /*MENU*/
    .dvMenuList {
        margin-left: inherit;
        position: absolute;
        top: 7px;
    }

    .txtNavInfo {
        width: 0;
        display: none;
    }
    /*IOVIEWER PAGE*/
    .blCloudRight {
        width: 0;
        display: none;
    }

    .blCloudLeft {
        width: 100%;
    }

        .blCloudLeft .split-bar {
            display: none;
        }
}

.pinkcapsule, .greencapsule {
    float: left;
    width: auto;
    height: 21px;
    border: 1px solid #aaa;
    padding: 1px 5px 1px 5px;
    margin-right: 3px;
    margin-bottom: 1px;
    margin-bottom: 2px;
    border-radius: 3px;
    font-family: 'Segoe UI Semilight', 'Open Sans', 'Verdana', 'Arial', 'Helvetica', 'sans-serif';
    font-size: 13px;
    white-space: nowrap;
}

.pinkcapsule {
    background: #b1ffaa;
    color: #000;
}

.greencapsule {
    background: #ffa8dd;
    color: #000;
}

.resRow {
    height: 26px;
    line-height: 26px;
    vertical-align: middle;
    padding: 0px 4px 0px 4px;
    border-bottom: solid 1px #CCC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resRowClick {
    cursor: pointer;
    text-decoration: underline;
}

.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jtableSearcher-input-wrapper {
    position: relative;
}

    .jtableSearcher-input-wrapper input {
        padding-left: 24px;
    }

    .jtableSearcher-input-wrapper:after {
        font-family: 'FontAwesome';
        content: "\f002" !important;
        position: absolute;
        padding: 2px 2px 2px 4px;
        color: #999b9c;
        left: 4px;
        top: 2px;
    }

.jtableSearcher-filter-button-div {
    width: 28px;
    height: 28px;
    margin-left: 3px;
    margin-top: 7px;
    float: left
}

.jtableSearcher-filter-button {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: none;
    border-radius: 3px;
    background: transparent;
}

    .jtableSearcher-filter-button:hover {
        border: 1px solid #ccc;
    }

.jtableSearcher-filter-button-div button:focus {
    outline: 0 !important;
}

#dialogCreateUsers input:read-only {
    background-color: #fafafa !important;
    cursor: default !important;
    color: #666 !important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.gridItemRed {
    color: red;
    font-weight: bold;
}

.gridItemOrange {
    color: orange;
    font-weight: bold;
}

.gridItemGreen {
    color: green;
    font-weight: bold;
}

.symbolAddon {
    color: #555;
    cursor: default;
}

    .symbolAddon:hover {
        color: #3382c5;
        cursor: pointer;
    }

.txtDetailHtml {
    width: 1040px;
    height: 396px;
    margin: 15px 15px 0px 15px;
    padding: 10px;
    background: #eee;
    border: 1px solid #777;
    overflow-y: auto;
}

.tellink {
    cursor: pointer;
}

    .tellink:hover {
        font-weight: bold;
    }

/* fix scroll in jtable */
.it-players, .task-supervision {
    display: flex;
    flex-direction: column;
}

    .it-players .jtable-main-container, .task-supervision .jtable-main-container {
        overflow-x: auto;
        position: relative;
        height: 100%;
    }

        .it-players .jtable-main-container .jtable-column-header-container,
        .task-supervision .jtable-main-container .jtable-column-header-container {
            white-space: nowrap;
        }

            .it-players .jtable-main-container .jtable-column-header-container .jtable-column-header-text,
            .task-supervision .jtable-main-container .jtable-column-header-container .jtable-column-header-text {
                margin-right: 18px;
            }

    .it-players .jtable-filter-panel {
        height: initial;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 4px;
        padding-right: 10px;
    }

    .it-players .jtable-filter-form {
        padding: 2px;
        margin-top: 3px;
        height: auto;
    }

    .it-players .jtable-filter-panel .filter-panel-button {
        top: 7px;
        left: 6px;
        margin-bottom: 7px;
    }

    .it-players .fieldstyler {
        margin-bottom: 2px;
    }

/* First dropdown menu position form tablets */
@media only screen and (max-width: 1100px) {
    nav .desktop-menu li:first-child ul {
        left: 15px !important;
    }

        nav .desktop-menu li:first-child ul li:first-child:before {
            left: 36% !important;
        }
}

@media only screen and (max-width: 767.5px) {
    #stylish-container {
        margin-right: 6px;
    }

    .it-players .jtable-main-container {
        margin-bottom: 30px;
    }

        .it-players .jtable-main-container thead th {
            position: sticky;
            top: 0;
            background: #F7F7F7;
        }

    .it-players-toolbar {
        height: initial;
        padding-bottom: 10px;
    }

        .it-players-toolbar .titlesectionFilter {
            width: 90%;
        }

        .it-players-toolbar .toolbarSearch {
            margin-left: 15px;
            width: 82%;
        }

        .it-players-toolbar .jtableSearcher-input-wrapper #txtJTableSearch, .it-players-toolbar .jtableSearcher-input-wrapper {
            width: 100% !important;
        }

    .it-players .jtable-filter-panel .filter-panel-button {
        top: 2px;
        left: 3px;
    }
}

/* Tasks supervisor page */
#tasksBody form#mainForm, #tasksBody #content {
    height: 100%;
}

.task-supervision-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .task-supervision-page .jtable-main-container {
        display: flex;
        flex-direction: column;
    }

    .task-supervision-page .jtable-bottom-panel {
        margin-top: auto;
    }

    .task-supervision-page .jtable-main-container table.jtable thead th {
        width: initial !important;
    }

    .task-supervision-page .taskStatusCell {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
    }

        .task-supervision-page .taskStatusCell div {
            white-space: nowrap;
        }

        .task-supervision-page .taskStatusCell i {
            margin-right: 5px;
        }

    .task-supervision-page .title-search {
        display: flex;
        align-items: center;
        padding-top: 6px;
    }

        .task-supervision-page .title-search .jtableSearcher-filter-button-div {
            margin-top: 0;
        }

    .task-supervision-page .tasks-filters-buttons {
        margin-top: 24px;
    }

    .task-supervision-page .toolBarButtonsMedia {
        display: flex;
    }

    .task-supervision-page #grpAutoRefresh {
        display: flex;
        align-items: center;
        margin-top: 0;
        margin-bottom: 0;
    }

        .task-supervision-page #grpAutoRefresh label {
            margin-right: 10px;
            margin-bottom: 0;
        }

.task-supervision {
    flex-grow: 1;
    display: flex;
    flex: 1 1 auto;
    padding-bottom: 44px;
    overflow-y: auto;
}

    .task-supervision table {
        border-collapse: separate !important;
    }

    .task-supervision thead th {
        position: sticky;
        top: 0;
        background: white;
        z-index: 2;
    }

@media only screen and (max-width: 360px) {
    .task-supervision-page .titleSectionMedia span {
        max-width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

#tasksBody .ui-dialog {
    z-index: 1003;
}

    #tasksBody .ui-dialog .ui-dialog-content, #externalFilesBody .ui-dialog .ui-dialog-content {
        overflow: hidden;
    }

    #tasksBody .ui-dialog .txtDetail, #externalFilesBody .ui-dialog .txtDetail {
        width: 100%;
        height: 100%;
    }

    #tasksBody .ui-dialog .grpBlockDetailLog, #externalFilesBody .ui-dialog .grpBlockDetailLog {
        height: 100%;
    }

.panelBodyContent div {
    touch-action: initial !important;
}

.allFlex {
    display: flex;
    clear: none;
}

.colFlex {
    float: none;
}

.inputSpinner {
    width: 55px;
    padding: 2px 5px 2px 5px;
    margin: 0px;
    font-family: 'Segoe UI Semilight', 'Open Sans', 'Verdana', 'Arial', 'Helvetica', 'sans-serif' !important;
    font-size: 13px;
}

#gridArticles div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td {
    padding: 1px 1px 1px 4px;
    font-size: 12px;
}

.borderTopBottom {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-left: none;
    border-right: none
}

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

.sysCtxMenu {
    padding: 0px !important;
    margin: 0px !important;
    background: #fff;
    z-index: 1000000000;
    border: 1px solid #ddd;
}

.sysCtxMenuLi {
    margin: 0px !important;
    padding: 0px !important;
    height: 20px !important;
    line-height: 16px !important;
}

.sysCtxMenuA:hover {
    background: #90c8f6 !important;
}

.sysCtxMenuA {
    height: 20px !important;
    text-align: center !important;
    margin: 0px !important;
    padding: 0px !important;
    line-height: 16px !important;
}

.sysCtxMenuItem {
    padding: 8px 4px 8px 4px !important;
    margin: 0px !important;
    line-height: 16px !important;
    color: #000;
    font-size: 12px;
}

/* Assign full width inputs*/
#grpPlayerPairing input[type=text] {
    width: 100%;
    padding: 12px 30px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#grpPlayerToken input[type=text] {
    /*width is kinda pointless since we define it in the tag directly (same for the previous set just above)*/
    width: 100%;
    padding: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#btnChangeToken {
    display: inline-block;
}
/*Neccessary for Responsiveness*/
#grpPlayerToken > label {
    width: 100%;
}



#grpPlayerPairing {
    position: relative;
}

    #grpPlayerPairing #icoPlayerPairing {
        position: absolute;
        left: 10px;
        top: 30px;
    }

.btnPairing {
    display: none;
    width: 28px;
    height: 28px;
    display: inline-block;
    margin-top: -2px;
    padding: 5px !important;
}

.historyDesc {
    width: 100%;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#externalFilesBody .chosen-container-single .chosen-single abbr {
    margin-top: 2px;
}

.compositeMediaDuration {
    font-weight: normal !important;
    color: gray !important;
}

.folderTasksHost {
    max-height: 250px;
    overflow: auto;
}

.IssueTaskTable {
    margin-top: 10px;
}

.taskCollapsable {
    width: 30px;
    height: 30px;
    padding: 8px;
    color: #fff;
    cursor: pointer;
}

.taskButtonFooter {
    height: 28px;
    line-height: 10px;
}

.btn-task-soft-primary, .btn-task-soft-primary:active {
    background: #ddd;
    color: #333;
    border: solid 0px transparent;
}

    .btn-task-soft-primary:hover, .btn-task-soft-primary:focus {
        background: #444;
        color: #fff;
        border: solid 1px #666;
    }


.btn-task-hard-primary, .btn-task-hard-primary:active {
    background: green;
    color: #fff;
    border: solid 1px #666;
}

    .btn-task-hard-primary:hover, .btn-task-hard-primary:focus {
        background: #444;
        color: #fff;
        border: solid 1px #666;
    }

.btn-task-secondary, .btn-task-secondary:active {
    background: transparent;
    color: #333;
    border: solid 0px transparent;
}

    .btn-task-secondary:hover, .btn-task-secondary:focus {
        background: #444;
        color: #fff;
        border: solid 1px #666;
    }

#officeFolderBody .taskHeaderTitle {
    width: 600px;
}

.taskHeaderPreview {
    color: #fff;
    padding-top: 6px;
    padding-right: 10px;
    float: right;
}

.panel-custom {
    /*margin: 5px 5px 5px 5px; */
}

@media only screen and (max-width: 1675px) {
    #officeFolderBody .taskHeaderTitle {
        width: 400px;
    }

    #officeFolderBody .taskHeaderPreview {
        display: none;
    }
}

.invoice-item {
    padding: 10px;
    margin: 5px 0;
    background-color: #fbfbfb;
    border: 1px solid #d7d7d7;
    cursor: pointer; /* Change cursor to pointer (finger) */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for background and shadow */
}

    .invoice-item:hover {
        background-color: #e0e0e0; /* Slightly darker background on hover */
        box-shadow: 0 4px 8px rgba(134, 134, 134, 0.1); /* Add a subtle shadow to give a raised effect */
    }

    .invoice-item.selected {
        background-color: #a8a8a8; /* Background color for selected item */
        color: black; /* White text color for contrast */
        box-shadow: 0 4px 12px rgba(134, 134, 134, 0.2); /* Slightly stronger shadow for selected item */
    }

.accordion {
    display: flex;
}

.accordionPanel {
    width: 50%;
    background: #f2f2f2;    
    border: 1px solid #ccc;
    display: flex; 
    cursor: pointer;
    transition: width 0.4s ease;
    margin-bottom:7px;
    min-height:45px;
}

.expanded {
    width: 90%;
}

.collapsed {
    width: 15%;
    justify-content:center;
}

.accordionLabel {
    display: none;
  
}

.collapsed .content {
    display: none; /* Cache le contenu quand réduit */
}

.collapsed .accordionLabel {
    display: block; /* Affiche le libellé quand réduit */
}

/* Style par défaut */
.light-gray {
    font-weight: bold;
    color: lightgray;
}

.bold-black {
    font-weight: bold;
    color: #707070;
}

/* Rotation de l'icône */
.rotated {
    transform: rotate(180deg);  
}

/* select2 style */
#select2-cboBusinessSector-results {
    max-height: 500px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #ccc !important;
    border-radius: 4px;
}