html {
--color-dark-grey: #252525;
--color-light-grey: #949494;
--color-disabled: #646464;
--color-grey-bkg: #3c3c3c;
--color-content-bkg: #4d4d4d;
--color-gold: #BD914B;
}
* { margin: 0px; padding: 0px; }
body { color: #ffffff; font-size: 14px; font-family: arial,verdana,helvetica,sans-serif; text-align: center; background-color:var(--color-grey-bkg); width: 100%; min-width:650px; height: 100%; overflow:hidden; }
a:link, a:visited, a:active { text-decoration: none; color: inherit; }
a:hover, a:focus { text-decoration: none; outline: none; }
img { border: 0px; }
*[draggable=true] { cursor: grab !important; }
h2 { width: calc(100% - 130px); min-width:150px; text-align: center; font-size: 18px; font-weight: normal; margin-top: 2px; margin-bottom: 7px; margin-left: auto; margin-right: auto; }
h3 { width: 100%; text-align: center; font-size: 12px; margin-bottom: 15px; }
h4 { width: 100%; font-size: 14px; margin-bottom: 10px; margin-top: 2px; }
h5 { width: 100%; text-align: center; font-size: 12px; padding-bottom: 3px; padding-top: 3px; font-weight:bold; background-color: var(--color-grey-bkg); color: var(--color-light-grey); }
h6 { text-align: center; font-size: 24px; font-weight: normal; margin-top: 30px; margin-bottom: 30px; margin-left: auto; margin-right: auto; }
input.input-error { border-bottom: 1px solid #af3838 !important; }
input[type=checkbox] { width: 12px; height: 12px; background-color: #ffffff; margin-right:5px; }
/* élements de formulaires et widgets */
input.input-error { border-bottom: 1px solid #af3838 !important; }
/*input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; } /*ne pas afficher le style par défaut du navigateur*/
input[type=checkbox] { width: 12px; height: 12px; background-color: #ffffff; margin-right:5px; }
/* élements de formulaires et widgets */
div.input-field, div.input-timecode:not(.tab-field), div.input-texteditable { text-align: left; margin-top:5px; margin-bottom:10px; height: 38px; }
.input-group > label,
div.input-field > label,
div.input-timecode > label,
div.input-texteditable > label,
div.input-field-textarea > label,
div.input-field-tab > label { color: var(--color-light-grey); font-size: 0.85em; width: 100%; display:block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
div.input-field span.ui-selectmenu-button { width: 100% !important; }
div.input-field input:not(.unlimited), div.input-timecode input:not([type="number"]), div.input-field select, div.input-texteditable div[contenteditable="true"] { background-color: transparent; color: #ffffff; font-size:12px; width: 100%; height:20px; border: none; border-bottom: 1px solid #ffffff; margin: 0; box-sizing: border-box; opacity: 1;}
div.input-field input:focus , div.input-timecode input, div.input-field select:focus, div.input-field option:focus, div.input-texteditable div[contenteditable="true"]:focus { border-bottom: solid 1px var(--color-gold); outline: none; }
div.input-field input:disabled, div.input-timecode input:not([type="number"]):disabled, div.input-field select:disabled , div.input-field textarea:disabled, div.input-texteditable div[contenteditable="true"]:disabled { border-bottom: 1px solid var(--color-disabled); }
div.input-field input[readOnly], div.input-field select[readOnly] , div.input-field textarea[readOnly] { border-bottom: 1px solid var(--color-disabled); color: var(--color-light-grey); }
div.input-field input[data-error="1"] { border-bottom: 1px solid #ff0000; }
div.input-field option { color: #000000; width: 100%; height:30px; border: none; }
div.input-field option:disabled { color: #acacac; }
div.input-field option:hover, div.input-field option:active, div.input-field option:focus { background-color: var(--color-gold); }
.ui-selectmenu-button { color: #ffffff; font-size: 12px; height:20px; border-radius:0px; margin:0px; padding: 0px; border: none; border-bottom: 1px solid #ffffff; outline: none; }
.ui-selectmenu-button.ui-state-disabled { border-bottom: 1px solid var(--color-disabled); }
.imglist { background-repeat: no-repeat; background-position: left top; background-size: 18px 18px; }
.ui-menu { min-width: 80px; box-shadow: 1px 1px 5px 1px var(--color-dark-grey); }
.ui-menu-item, .ui-state-default { font-size: 12px; margin:0px; padding: 0px; color: #ffffff; outline: none !important; }
.ui-selectmenu-button span.ui-selectmenu-text { padding:0px;}
.ui-state-focus { /*border-bottom: solid 1px var(--color-gold);*/ outline: none; }
li.ui-menu-item:not(.ui-state-disabled):hover { background-color: var(--color-gold); color: #ffffff; }
.ui-datepicker-current-day .ui-state-active { color: #ffffff; background-color: #3f3f3f; }
div.input-field .objcalendar:not(:disabled) { background-image: url("images/btn_mini_date.png"); background-position: right 2px top 2px; background-repeat: no-repeat; background-size: 14px 14px; }
div.input-field[data-browser="media_browser"][data-filter="still"] > label { background-image:url("../img/icons/still.png"); background-repeat: no-repeat; background-size:20px; background-position: -4px 50%; padding-left:16px; box-sizing: border-box; }
div.input-field[data-browser="media_browser"][data-filter="movie"] > label { background-image:url("../img/icons/movie.png"); background-repeat: no-repeat; background-size:20px; background-position: -4px 50%; padding-left:16px; box-sizing: border-box; }
div.input-field[data-browser="media_browser"][data-filter="audio"] > label { background-image:url("../img/icons/audio.png"); background-repeat: no-repeat; background-size:20px; background-position: -4px 50%; padding-left:16px; box-sizing: border-box; }
div.input-field[data-browser="editablefile_browser"] > label,
div.input-field[data-browser="editablefile_browser"] > label { background-image:url("../img/icons/externalfile.png"); background-repeat: no-repeat; background-size:20px; background-position: -4px 50%; padding-left:16px; box-sizing: border-box; }
div.input-timecode input[type="number"] { background-color: transparent; color: #ffffff; text-align: center; font-size:12px; width: calc((100% - 30px) / 4); height:20px; border: none; border-bottom: 1px solid #ffffff; margin: 0; box-sizing: border-box; -moz-appearance: textfield; }
div.input-timecode input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
div.input-timecode input[type="number"]:focus { border-bottom: solid 1px var(--color-gold); outline: none; }
div.input-timecode input[type="number"][readOnly], div.input-timecode input[type="text"][readOnly] { border-bottom: 1px solid var(--color-disabled); color: var(--color-light-grey); }
div.input-timecode div.timecode-separator { display:inline-block; width:10px; text-align:center; }
div.input-timecode input:not([type="number"]):disabled+div { display: none; }
div.input-timecode input:not([type="number"]):not(:disabled) { display: none; }
div.input-checkbox { text-align: left; margin-top:3px; margin-bottom:10px; }
div.input-checkbox input { vertical-align: top; margin-top: 0.2em; }
div.input-checkbox:not(.nohover):hover, div.input-checkbox:not(.nohover):active { background-color: rgba(255,255,255,0.2); }
div.input-checkbox div.checkbox-label { display: inline-block; cursor: pointer; width: calc(100% - 20px); vertical-align: top; font-size:12px; line-height:20px; }
div.input-checkbox label { font-size:12px; }
div.input-checkbox input[readOnly]+label { color: var(--color-light-grey); }
div.input-field-textarea { text-align: left; margin-top:5px; margin-bottom:10px; overflow: hidden; }
div.input-field-textarea textarea,
div.input-field-textarea p { font-family: arial,verdana,helvetica,sans-serif; font-size:12px; width: 100%; min-height: 20px; background-color: transparent; color: #fff; outline: none; border: none; border-bottom: 1px solid var(--color-disabled); }
div.input-field-textarea textarea:disabled { display: none; }
div.input-field-textarea textarea:not(:disabled) { resize: vertical; border-bottom: 1px solid #ffffff; }
div.input-field-textarea textarea:not(:disabled)+p { display: none; }
div.input-field-textarea textarea[readOnly]+p { color: var(--color-light-grey); }
div.input-field > label.range-label[data-value]:not(.modified):after { content: ' (' attr(data-value) attr(data-unit) ')'; }
div.input-field > label.range-label[data-value].modified:after { content: ' (' attr(data-value) attr(data-unit) ') *'; }
div.input-texteditable, div.input-texteditable div[contenteditable="true"] { height:auto !important; }
div.input-texteditable div[contenteditable="true"] { cursor: text; }
input[type="color"].background { border:0px; background-color:transparent; vertical-align:middle; height:100%; width:36px; }
h3[data-label]:not(.modified):after { content: attr(data-label); }
h3[data-label].modified:after { content: attr(data-label) ' *'; }
[contenteditable="true"].single-line {
white-space: nowrap;
overflow: hidden;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
/* page d'identification */
#login-form { width: 400px; border: 1px solid var(--color-light-grey); border-radius: 15px; padding: 30px; }
/* éléments du menu en haut de page */
#page-menu { position: absolute; top: 0; z-index: 10; background-color: var(--color-dark-grey); width: 100%; height: 50px; box-shadow: 0px 0px 5px 3px #121212; min-width: 650px; overflow:hidden }
#page-menu p { line-height: 50px; color: var(--color-light-grey); text-overflow:hidden }
.central-group { position: relative; margin: 20px auto; width:60%; max-width:1200px; min-width:600px; box-sizing: border-box; border:1px solid black; }
.central-group-title { width: 100%; height:30px; line-height:30px; background-color:var(--color-content-bkg); overflow:hidden; box-sizing: border-box; }
.central-group-content { width: 100%; }
.central-group-footer { width:100%; padding: 0 5px; height:30px; line-height:30px; background-color:var(--color-content-bkg); overflow:hidden; box-sizing: border-box; }
.central-group table { width:100%; overflow:auto; }
.central-group table tr th { background-color:var(--color-content-bkg); font-weight:normal; padding:5px; }
.central-group table tr td { padding:5px; vertical-align:middle; border-bottom:1px solid var(--color-dark-grey); }
.central-group table tr td input { background-color: transparent; color: #ffffff; font-size:12px; border: 1px solid var(--color-light-grey); margin: 0; box-sizing: border-box; }
/* éléments de la zone centrale principale */
#page-content { position: absolute; z-index: 1; width: 100%; height:auto; top:50px; bottom:0px; min-width: 650px; overflow:auto; }
#container-title { position: absolute; width: 100%; height:30px; min-width: 650px; overflow:hidden; line-height:30px; }
#container-left { position: absolute; height:auto; top:30px; bottom:0px; left:0; width: 250px; min-width: 200px; border-right: solid 1px #000000; box-sizing: border-box; background-color:var(--color-grey-bkg); overflow:hidden; }
#container-central-group { position: absolute; height:auto; top:30px; bottom:0px; left:250px; right:0; width: auto; box-sizing: border-box; background-color:var(--color-grey-bkg); overflow:hidden; }
#container-central-group[data-layout="1"] #container-center { position: absolute; height:100% !important; top:0; left:0; right:50%; overflow:auto; border-left: solid 1px #000000; border-right: solid 1px #000000; box-sizing: border-box; overflow:hidden; }
#container-central-group[data-layout="1"] #container-right { position:absolute; height:100% !important; top:0; right:0; width:50%; box-sizing: border-box; border-left: solid 1px #000000; background-color:var(--color-grey-bkg); overflow:hidden;}
#container-central-group[data-layout="2"] #container-center,
#container-left-group #container-top { position: absolute; width:100% !important; top:0; left:0; bottom:50%; overflow:auto; border-bottom: solid 1px #000000; border-right: solid 1px #000000; box-sizing: border-box; overflow:hidden; }
#container-central-group[data-layout="2"] #container-right,
#container-left-group #container-bottom { position:absolute; width:100% !important; bottom:0; left:0; height:50%; box-sizing: border-box; border-top: solid 1px #000000; border-right: solid 1px #000000; background-color:var(--color-grey-bkg); overflow:hidden;}
/* #container-central-group[data-layout="2"] .onair-page-preview { height:100% !important; width:auto !important; } */
#container-central-group[data-layout="2"] .onair-page,
#container-left-group .onair-page { height:calc(100% - 50px) !important; width:100% !important; }
#container-central-group .title, #container-left-group .title, #container-right-group .title, #container-top .title, #container-bottom .title, #container-left .title, #container-right .title, #container-center .title { width:100%; padding: 0 5px; height:30px; line-height:30px; background-color:var(--color-content-bkg); overflow:hidden; box-sizing: border-box; }
#container-central-group .container, #container-left-group .container, #container-right-group .container, #container-top .container, #container-bottom .container, #container-left .container, #container-right .container, #container-center .container { position:relative; width:100%; padding: 0px; height:calc(100% - 30px); box-sizing: border-box; overflow:auto; }
#container-right-group .container div.input-field, #container-right-group .container div.input-texteditable, #container-right-group .container div.input-checkbox,
#container-left .container div.input-field, #container-left .container div.input-texteditable, #container-left .container div.input-checkbox { margin-left:10px; margin-right:10px; }
#container-left-group { position: absolute; height:auto; top:30px; bottom:0px; left:0; right:250px; width: auto; box-sizing: border-box; background-color:var(--color-grey-bkg); overflow:hidden; }
#container-right-group { position: absolute; height:auto; top:30px; bottom:0px; right:0; width: 250px; min-width: 200px; border-left: solid 1px #000000; box-sizing: border-box; background-color:var(--color-grey-bkg); overflow:hidden; }
.container .container-with-header { position: absolute; width:100%; overflow:hidden; }
.container .container-with-footer { position: absolute; width:100%; height:calc(100% - 32px); overflow:auto; }
.container .footer { position: absolute; width:100%; padding: 0 5px; height:30px; bottom:0px; line-height:30px; background-color:var(--color-content-bkg); overflow:hidden; box-sizing: border-box; }
.footer-btn { height:20px; margin-top:5px; margin-left:5px; margin-right:5px; }
#content-onair { margin:30px 20px; text-align:center; }
#content-onair[data-connected="0"]:before, #content-player[data-connected="0"]:before { content: "En attente de connexion"; color: #d72429; }
#content-onair[data-connected="1"]:empty:before, #content-player[data-connected="1"]:empty:before { content: "Aucune page connectée"; color: var(--color-light-grey); }
#content-onair .onair-page { display: inline-block; margin:20px; width:400px; }
.onair-page-title { height:50px; width:100%; overflow:hidden; }
.onair-page-title div { display: flex; height:100%; width:100%; align-items:center; justify-content:center; }
.onair-page-title div p { margin: auto; text-align: center; }
.onair-page-status { height:10px; width:100%; }
.onair-page-preview { display: inline-block; width:100%; height:auto; aspect-ratio:1.7777777777778; overflow:hidden; }
.onair-page-preview iframe { height:100%; width:100%; border:0px; }
.onair-page-buttons { height:30px; width:100%; overflow:hidden; }
.onair-page-btn { height:20px; margin-top:4px; margin-left:2px; margin-right:2px; }
.onair-page[data-playing="1"] .onair-page-title, .onair-page[data-playing="1"] .onair-page-status { background-color:#34a716; }
.onair-page-preview[data-ratiowidth="1"] { height:100% !important; width:auto !important; }
#content-playerpage { text-align:center; }
#content-playerpage[data-connected="0"], #content-playerpage[data-connected="1"]:empty { margin:20px }
#content-playerpage[data-connected="0"]:before { content: "En attente de connexion"; color: #d72429; }
#content-playerpage[data-connected="1"]:empty:before { content: "Aucune page connectée"; color: var(--color-light-grey); }
.message-novar:empty:before { content: "Aucun paramètre dynamique"; color: var(--color-light-grey); line-height:40px; }
.message-selectbutton:empty:before { content: "Sélectionnez un bouton pour éditer les variables"; color: var(--color-light-grey); line-height:40px; }
div.medialist { max-height: 400px; text-align:left; }
div.libmedia { display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; word-wrap: break-word;
width:110px; height:85px; background-color:#323232; border: 1px solid #787878; margin: 2px;
font-size:9px; cursor: pointer; }
div.libmedia.selected, div.webrtclib.selected, div.libskin.selected { color:#000000;
background: -webkit-linear-gradient(#faefc7, #c2a161);
background: -moz-linear-gradient(#faefc7, #c2a161);
background: -ms-linear-gradient(#faefc7, #c2a161);
background: -o-linear-gradient(#faefc7, #c2a161);
background: linear-gradient(#faefc7, #c2a161); }
div.libmedia img { height:45px; margin-top:3px; }
.list-view div.libmedia[data-listviewable] { position:relative; text-align: left; overflow: hidden; word-wrap: break-word;
width:100%; height:36px; background-color:var(--color-grey-bkg); border:0px; border-bottom: solid 1px #4d4d4d; margin:2px 0px;
font-size:12px; cursor: pointer; }
.list-view div.libmedia[data-listviewable]:first-of-type { border-top: solid 1px #4d4d4d; }
.list-view div.libmedia[data-listviewable]:not([data-name]) { height:28px; } /*folder*/
.list-view div.libmedia[data-listviewable]:not([data-name]) img { position:absolute: top:0px; left:0px; height:20px; width:27px; margin-top:2px; } /*folder*/
.list-view div.libmedia[data-listviewable]:not([data-name]) p { position:absolute; z-index:2; top:5px; left:32px; right: 0px; height:20px; overflow:hidden; font-size:12px; } /*folder*/
.list-view div.libmedia[data-listviewable][data-name] img { position:absolute; z-index:1; top:0px; left:0px; height:36px; width:55px; margin-top:0px; } /*media*/
.list-view div.libmedia[data-listviewable][data-name] div { position:absolute; z-index:2; top:11px; left:60px; right: 0px; height:30px; } /*media*/
.list-view div.libmedia[data-listviewable][data-name] div p { font-size:13px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } /*media*/
.list-view div.libmedia[data-listviewable][data-name] div p.discret { font-size:12px; } /*media*/
.list-view div.libmedia[data-listviewable][data-name] div:has(p.discret) { top:2px; } /*avec une info de durée*/
div.libmedia[data-sortbydate="1"] { display:none; }
.sortbydate div.libmedia[data-sortbydate="1"] { display:inline-block; }
.sortbydate div.libmedia[data-sortbydate="0"] { display:none; }
div.libskin { display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; word-wrap: break-word;
width:135px; height:60px; background-color:#323232; border: 1px solid #787878; margin: 2px;
font-size:9px; cursor: pointer; }
div.libskin div.skin { display: inline-block; vertical-align:top; clear: both; background-size: cover; background-repeat: no-repeat; background-position: center; height:40px; width:40px; margin-top:3px; margin-left:3px; }
div.libskin div.skin div.on { height:100%; width:100%; background-image:url('../img/skin/model/ON.png'); background-size: cover; background-repeat: no-repeat; }
div.libskin div.skin div.off { height:100%; width:100%; background-image:url('../img/skin/model/OFF.png'); background-size: cover; background-repeat: no-repeat; }
div.libskin div.skin div.loaded { height:100%; width:100%; background-image:url('../img/skin/model/LOADED.png'); background-size: cover; background-repeat: no-repeat; }
div.libskin p { line-height:18px; }
div.webrtclist:empty:before { content: "Aucun correspond connecté"; line-height:40px; color: var(--color-light-grey); }
div.webrtclib { display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; word-wrap: break-word;
width:110px; height:30px; border: 1px solid #787878; border-top-left-radius: 3px; margin: 2px; padding-top:10px;
/*background-image:url("../img/icons/webrtc.png"); background-repeat: no-repeat; background-size:30px; background-position: 50% 5px;*/
font-size:12px; cursor: pointer; }
div.icon-mute { display:inline-block; background-size: contain; background-repeat: no-repeat; }
div.icon-mute:not(.icon-maxi) { height:14px; width:14px; }
div.icon-mute.icon-maxi { height:20px; width:20px; }
div.icon-mute:not([data-mute="1"]) { background-image:url("../img/btn_player_volume.png"); }
div.icon-mute[data-mute="1"] { background-image:url("../img/btn_player_mute.png"); }
div.groupTitle { width:100%; text-align:center; background-color:#787878; color:#2f2f2f; line-height:1.5em; min-height:1.5em; font-weight:bold; }
div.panelgroup { position: relative; display: inline-block; vertical-align:top; background-color:#2f2f2f; border: 1px solid #787878; margin: 5px; clear: both; font-size:12px; padding: 3px 5px 5px 5px; }
div.panelgroup div.panellabel { position: relative; width:100%; color:#dddddd; height:14px; font-size:12px; overflow:hidden }
div.panelgroup div.panellabel:not(:empty) { background-color:var(--color-grey-bkg); }
div.panelgroup div.panelNbuttons { position: relative; display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; }
div.panelgroup div.panelNbuttons div.layerlist { overflow:hidden; text-overflow: ellipsis; width: 160px; height:11px; color:#787878; font-size:11px; }
div.panelgroup div.panelNbuttons div.panelbuttonNskin { position: relative; text-align: center; margin: 5px; height: 150px; width: 150px; clear: both; background-size: cover; background-position: center; }
div.panelgroup div.panelNbuttons div.panelbutton { position: absolute; height: 150px; width: 150px; clear: both; text-align: center; line-height:150px; overflow: hidden; color: #000000; }
div.panelgroup div.panelNbuttons div.panelbutton div.thumbnails { position: absolute; bottom:0px; width: 150px; z-index: 1; background-color:transparent; }
div.panelgroup div.panelNbuttons div.panelbutton div.thumbnails img { float:left; /*background-color:rgba(0,0,0,0.3);*/ }
div.panelgroup div.panelNbuttons div.panelbutton div.thumbnails span.nbmedia { position: absolute; right:0px; bottom:0px; height: 18px; background-color:black; color:#ffffff; font-size:12px; line-height:18px; padding:2px; }
div.panelgroup div.panelNbuttons div.panelbutton div.warningfps { position: absolute; visibility:hidden; top:3px; right: 3px; z-index:10; background-color:transparent; height: 20px; width: 20px; background-image:url('../img/icon_mini_warning.png'); }
div.panelgroup div.panelNbuttons div.panelbutton div.warningfps[data-checkframerate="false"] { visibility:visible; }
div.panelgroup div.panelNbuttons div.panelbutton div.texte { position: absolute; height: 150px; width: 150px; z-index: 5; }
div.panelgroup div.panelNbuttons div.panelbutton div.texte span.label { margin:10px; width:130px; display:inline-block; vertical-align:middle; line-height:normal; /* on rétablit le line-height */ overflow: hidden; word-wrap:break-word; }
div.panelgroup div.panelNbuttons div.panelbutton[data-state="ON"] { background-image:url('../img/skin/model/ON.png'); }
div.panelgroup div.panelNbuttons div.panelbutton[data-state="OFF"] { background-image:url('../img/skin/model/OFF.png'); }
div.panelgroup div.panelNbuttons div.panelbutton[data-state="LOADED"] { background-image:url('../img/skin/model/LOADED.png'); }
div.panelgroup div.panelNbuttons div.actions { height:26px; }
div.panelgroup div.panelNbuttons div.actions div.paramdyn { float: right; width:26px; height:26px; background-image:url("../img/btn_pop_infos.png"); background-size:contain; cursor: pointer; margin-right:5px; }
div.panelgroup div.panelNbuttons div.actions div.paramdyn[data-selected="1"] { background-image:url("../img/btn_pop_infos_on.png"); }
div.panelgroup div.panelNbuttons div.actions img.buttoninfos:not([data-selected="1"]) { filter: grayscale(100%); }
div.panelgroup div.panelNbuttons div.actions img.buttoninfos[data-selected="1"] { opacity:1; }
/* div.panelgroup div.panelNbuttons div.actions div.line1 { position: relative; width:100%; height:42px; } */
/* div.panelgroup div.panelNbuttons div.actions div.line1 div.cameraprod { float:left; height:35px; width:35px; margin-left:5px; font-size:12px; color:#ffffff; background-image:url('../img/menu_cameraptz.png'); background-repeat: no-repeat; background-size:35px; } */
/* div.panelgroup div.panelNbuttons div.actions div.line1 div.cameraprod.selectedParams { background-image:url('../img/menu_cameraptz_on.png'); } */
/* div.panelgroup div.panelNbuttons div.actions div.line1 div.countdown { float:left; visibility:hidden; border-radius: 15px; background-color:transparent; height:24px; line-height:26px; width:60px; margin:5px; text-align:center; padding:0px; font-size:14px; font-weight:bold; color:#ffffff; */
/* animation-duration: 1s; animation-iteration-count:infinite; border: 1px solid #565656; } */
/* div.panelgroup div.panelNbuttons div.actions div.line1 div.infos { float:right; background-image:url('../img/btn_pop_infos.png'); height: 40px; width: 40px; background-size:contain; margin-right:5px; } */
/* div.panelgroup div.panelNbuttons div.actions div.line1 div.infos.selectedParams { float:right; background-image:url('../img/btn_pop_infos_on.png'); height: 40px; width: 40px; } */
/* div.panelgroup div.panelNbuttons div.actions div.expanded_panel { width:100%; } */
/* div.panelgroup div.panelNbuttons div.actions div.expanded_panel div.load { float:left; background-image:url('../img/btn_pop_load.png'); height: 20px; width: 20px; } */
/* div.panelgroup div.panelNbuttons div.actions div.expanded_panel div.play { float:left; margin-left:10px; background-image:url('../img/btn_pop_play.png'); height: 20px; width: 20px; } */
/* div.panelgroup div.panelNbuttons div.actions div.expanded_panel div.next { float:left; margin-left:10px; background-image:url('../img/btn_pop_next.png'); height: 20px; width: 20px; } */
/* div.panelgroup div.panelNbuttons div.actions div.expanded_panel div.stop { float:left; margin-left:10px; background-image:url('../img/btn_pop_stop.png'); height: 20px; width: 20px; } */
/* div.panelgroup div.panelNbuttons div.actions div.expanded_panel div.togglestatus { float:left; margin-left:15px; background-image:url('../img/btn_togglebutton.png'); height: 20px; width: 30px; } */
/* div.panelgroup div.panelNbuttons div.panelbutton[data-state="LOADED"] + div.actions div.expanded_panel div.load { background-image:url('../img/btn_pop_load_on.png'); } */
/* div.panelgroup div.panelNbuttons div.panelbutton[data-state="ON"] + div.actions div.expanded_panel div.play { background-image:url('../img/btn_pop_play_on.png'); } */
/* div.panelgroup div.panelNbuttons div.panelbutton[data-state="OFF"] + div.actions div.expanded_panel div.stop { background-image:url('../img/btn_pop_stop_on.png'); } */
/* div.panelgroup div.panelNbuttons div.panelbutton:not([data-state="OFF"]) + div.actions div.expanded_panel div.togglestatus { background-image:url('../img/btn_togglebutton_on.png'); } */
div.panelgroup:last-child { margin-bottom:30px !important; } /* pour rajouter une petite marge en bas des POP de prod */
/* pour designer */
div.panelgroupcontainer { position: relative; display: inline-block; vertical-align:top; background-color:transparent; border: 0px solid red; margin-top:5px; margin-bottom:5px; clear: both; font-size:12px; padding:0px; }
div.panelgroupcontainer div.panelgroup { display: block !important; margin-top:0px !important; margin-bottom:0px !important; min-height:225px; min-width:160px; }
div.panelgroupcontainer span.ui-selectmenu-button.ui-widget { width:150px; }
div.panelgroupcontainer select.selectgrouptype { max-width:150px; }
div.groupTitleContainer { background-color:#787878; }
div.groupTitleContainer div.groupTitle { width: calc(100% - 30px) !important; }
div.groupTitleContainer+div.panelgroupcontainer div.sectionbtn { display:none; } /* si le group est deja précédé par un titre de section, le sectionbtn est caché */
div.panelgroupcontainer .dragged { outline: 3px solid var(--color-gold); }
div.panelgroupcontainer .dragged.design { outline-style: dotted; }
div.panelgroupcontainer .panelgroupactions { height:20px; width:100%; }
div.panelgroupcontainer div.movehandle { cursor: grab; position: absolute; top:0px; left:5px; height: 20px; width: 20px; z-index: 20; background-image:url("../img/btn_mini_move.png"); }
div.panelgroupcontainer div.designhandle { cursor: grab; position: absolute; top:0px; left:25px; height: 20px; width: 20px; z-index: 20; background-image:url("../img/btn_mini_design.png"); }
div.panelgroupcontainer div.deletebtn { cursor: pointer; position: absolute; top:0px; right:5px; height: 20px; width: 20px; z-index: 20; background-image:url("../img/btn_mini_delete.png"); }
div.panelgroupcontainer div.sectionbtn { cursor: pointer; position: absolute; top:0px; right:27px; height: 20px; width: 20px; z-index: 20; background-image:url("../img/btn_mini_newline.png"); }
div.movehandle:hover, div.designhandle:hover, div.deletebtn:hover, div.sectionbtn:hover { background-color: rgba(255,255,255,0.2); }
div.panelgroupcontainer .panelbutton div.movehandle { left:0px; }
div.panelgroupcontainer .panelbutton div.deletebtn { right:0px; }
div.panelgroupcontainer .panelgroup.dragover_end { box-shadow: inset -5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelgroup.dragover_before,
div.panelgroupcontainer .panelbutton.dragover_before { box-shadow: -5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelgroup.dragover_after { box-shadow: 5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelgroup[data-dragover="before"],
div.panelgroupcontainer .panelbutton[data-dragover="before"] { box-shadow: -5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelgroup[data-dragover="after"],
div.panelgroupcontainer .panelbutton[data-dragover="after"] { box-shadow: 5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelgroup[data-dragover="begin"] { box-shadow: inset 5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelgroup[data-dragover="end"] { box-shadow: inset -5px 0px 0px 0px var(--color-gold); }
div.panelgroupcontainer .panelbutton[data-dragover="whole"] { box-shadow: inset 0px 0px 0px 5px var(--color-gold); }
div.panelitem { display: inline-block; vertical-align:top; clear: both; text-align: center; overflow: hidden; word-wrap: break-word; font-size:12px;
width:110px; height:85px; background-color:var(--color-grey-bk); border: 1px solid #787878; margin: 2px; padding: 5px; box-sizing:border-box;
cursor: pointer; }
div.panelitem.canbeadded { background-color:#2f2f2f; }
div.panelitem.selected { color:#000000;
background: -webkit-linear-gradient(#faefc7, #c2a161);
background: -moz-linear-gradient(#faefc7, #c2a161);
background: -ms-linear-gradient(#faefc7, #c2a161);
background: -o-linear-gradient(#faefc7, #c2a161);
background: linear-gradient(#faefc7, #c2a161); }
div.panelitem img { height:30px; margin-top:3px; }
div.panelitem p.label { height:30px; overflow: hidden; }
div.panelitem p.hasoptions { color: var(--color-light-grey); line-height:12px; font-size:14px; font-weight:bold; }
/*page mento online*/
#mento-container-left, #mento-container-right, #dyn-container-left { position: absolute; background-color:var(--color-grey-bkg); height: auto; position: fixed; top:50px; bottom:0; overflow-x: hidden; overflow-y: hidden; box-sizing:border-box; }
#mento-container-left, #dyn-container-left { z-index: 5; left: 0; width: 280px; border-right: solid 2px #000000; }
#mento-container-right { z-index: 6; right: 0; left:auto !important; width: 270px; border-left: solid 2px #000000; }
#mento-container-top { z-index: 2; position: absolute; background-color:var(--color-grey-bkg); left:0px; right:0px; margin-left:280px; margin-right:270px; height: calc(100% - 300px); position: fixed; top:50px; bottom:auto; overflow: hidden; }
#mento-container-bottom { z-index: 2; position: absolute; background-color:var(--color-grey-bkg); left:0px; right:0px; margin-left:280px; margin-right:270px; height: 250px; position: fixed; bottom:0px; top:auto; overflow: hidden; border-top: solid 2px #000000; }
#dyn-container-top { z-index: 2; position: absolute; background-color:var(--color-grey-bkg); left:0px; right:0px; margin-left:280px; margin-right:0px; height: 300px; position: fixed; top:50px; bottom:auto; overflow: hidden; }
#dyn-container-bottom { z-index: 2; position: absolute; background-color:var(--color-grey-bkg); left:0px; right:0px; margin-left:280px; margin-right:0px; height: calc(100% - 350px); position: fixed; bottom:0px; top:auto; overflow: hidden; border-top: solid 2px #000000; }
.mento-container-title { position: absolute; top:0px; width: 100%; height:30px; background-color:var(--color-content-bkg); overflow:hidden; text-overflow:ellipsis; white-space: nowrap; line-height:30px; text-align:center; }
.mento-container-footer { position: absolute; bottom:0px; width: 100%; height:30px; background-color:var(--color-content-bkg); overflow:hidden; line-height:30px; text-align:center; }
.mento-container-content { position: absolute; top:30px; bottom:30px; width: 100%; overflow:auto; text-align:left; }
.mento-container-content iframe { height:100%; width:100%; border:0px; }
#mento-container-right div.input-field, #mento-container-right div.input-texteditable, #mento-container-right div.input-checkbox { margin-left:10px; margin-right:10px; }
.mento-content-zoom{ display: inline-block; width:100%; height:auto; aspect-ratio:1.7777777777778; overflow:hidden; background-color:transparent; }
.mento-content-zoom[data-ratiowidth="1"] { height:100% !important; width:auto !important; }
/* .library-item-icon { float:left; height:20px; vertical-align:middle; border: solid 1px var(--color-light-grey); background-color:#323232; margin-top:-5px; padding-top:2px; margin-right:10px; } */
.library-item-icon { position: absolute; height:20px; border: solid 1px var(--color-light-grey); background-color:#323232; margin-top:-12px; top:50%; margin-right:10px; }
.library-item-icon.folder { border: 0px; background-color:transparent; }
.library-item-icon+p { margin-left:45px; margin-right:20px; font-size:13px; }
.library-item-icon.folder+p { margin-left:35px; margin-right:20px; }
h1.nochild .ui-accordion-header-icon, h3.nochild .ui-accordion-header-icon { display:none }
h1.secondlevel { background-color:var(--color-grey-bkg) !important; border-bottom: solid 1px #4d4d4d !important; }
h1.comment { padding-top: 0 !important; padding-bottom: 0 !important; font-size:0.8em !important; color: var(--color-light-grey); }
h1.nochild + div.ui-accordion-content:empty, h3.nochild + div.ui-accordion-content:empty { display:none !important; }
h1.selected .library-item-icon { background: -webkit-linear-gradient(#faefc7, #c2a161);
background: -moz-linear-gradient(#faefc7, #c2a161);
background: -ms-linear-gradient(#faefc7, #c2a161);
background: -o-linear-gradient(#faefc7, #c2a161);
background: linear-gradient(#faefc7, #c2a161); }
.message-emptysequence:empty:before { content: "Créez votre séquence en ajoutant des lignes depuis votre bibliothèque"; color: var(--color-light-grey); line-height:40px; }
.message-emptysequence.drag-over { border-bottom: 5px solid var(--color-gold) }
.mento-sequence-line { background-color:var(--color-content-bkg); margin:3px 0; height:40px; line-height:40px; text-align:left; min-width: 500px; }
.mento-sequence-line.selected { color:#000000;
background: -webkit-linear-gradient(#faefc7, #c2a161);
background: -moz-linear-gradient(#faefc7, #c2a161);
background: -ms-linear-gradient(#faefc7, #c2a161);
background: -o-linear-gradient(#faefc7, #c2a161);
background: linear-gradient(#faefc7, #c2a161); }
.mento-sequence-line-layer { float:left; height:100%; font-size:0.8em; width:30px; margin-left:5px; }
.mento-sequence-line-type { float:left; width:45px; height:100%; background-size:contain; background-repeat: no-repeat; background-position: center }
.mento-sequence-line-icon { float:right; width:30px; height:100%; background-size:contain; background-repeat: no-repeat; background-position: center }
.mento-sequence-line-name { float:left; height:100%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; }
.mento-sequence-line-btn { float:right; width:20px; height:20px; margin:10px 5px; }
.mento-sequence-line.dragged { box-shadow: inset 0px 0px 0px 5px var(--color-gold); }
.mento-sequence-line:not(.dragged)[data-dragover="before"] { box-shadow: 0px -3px var(--color-gold); }
.mento-sequence-line:not(.dragged)[data-dragover="after"] { box-shadow: 0px 3px var(--color-gold); }
.mento-content-zoom .mento-preview-footer { position: absolute; visibility:hidden; z-index:10; bottom:0px; width: 100%; height:30px; background-color:rgba(77,77,77,0.5); overflow:hidden; line-height:30px; text-align:center; }
.mento-content-zoom .mento-preview-footer-showarea { position: absolute; z-index:8; bottom:0px; width: 100%; height:1px; background:transparent; }
.mento-content-zoom .mento-preview-footer-showarea:hover + .mento-preview-footer { visibility:visible; }
.mento-content-zoom .mento-preview-footer:hover { visibility:visible; }
.mento-container-content div.input-field, .mento-container-content div.input-texteditable, .mento-container-content div.input-checkbox { margin-left:10px; margin-right:10px; }
.mento-container-content div.input-field input, .mento-container-content div.input-field select { max-width:500px; }
.as-accordion { width: 100%; text-align: left; line-height:20px; font-size:12px; margin: 2px 0 2px 0; padding: 5px 0px; background-color: var(--color-content-bkg); }
div.variable-checkbox { text-align: left; margin:3px 5px; }
div.variable-checkbox .icon { width:28px; margin-right:5px; vertical-align: middle; }
div.variable-checkbox input { vertical-align: top; margin-top: 0.2em; margin-right:10px; }
div.variable-checkbox div.checkbox-label { display: inline-block; cursor: pointer; width: calc(100% - 70px); vertical-align: top; font-size:12px; line-height:20px; }
div.variable-checkbox label { font-size:12px; }
.tab-li-close-button { margin-left:5px; margin-top:2px; vertical-align: top; cursor: pointer; width:16px; height:16px; opacity:0.4; }
.tab-li-close-button:hover{ opacity:1; }
table.defaultftd { width:100%; border:0px }
table.defaultftd tr th { background-color: var(--color-content-bkg); color: var(--color-light-grey); font-weight: normal; font-size: 10px; padding: 3px; }
table.defaultftd tr th:first-child, table.defaultftd tr td:first-child { width: 30px; vertical-align:middle; text-align: center; }
table.defaultftd tr td { border-bottom:1px solid var(--color-content-bkg); }
table.defaultftd div.input-field { margin:3px !important }
div.menu-widget { position: absolute; display: none; z-index:20; }
/* div[data-connectionstatus=""] { background-image:url("../img/statut0.png"); background-repeat: no-repeat; background-position: 5px 50%; background-size:16px; } */
/* div[data-connectionstatus="on"] { background-image:url("../img/statut1.png"); background-repeat: no-repeat; background-position: 5px 50%; background-size:16px; } */
/* div[data-connectionstatus="off"] { background-image:url("../img/statut2.png"); background-repeat: no-repeat; background-position: 5px 50%; background-size:16px; } */
/* div[data-connectionstatus="err"] { background-image:url("../img/statut3.png"); background-repeat: no-repeat; background-position: 5px 50%; background-size:16px; } */
li[data-connectionstatus="off"] span { color:red }
.mediaplayer-thumbnail { display: inline-block; vertical-align:top; margin:20px; width:400px; height:300px; background-color:var(--color-dark-grey); cursor: pointer; background-image:url('../img/mediaplayer.png'); background-repeat: no-repeat; background-position: 10px bottom; }
.mediaplayer-thumbnail div { display: flex; height:100%; width:100%; align-items:center; justify-content:center; }
.mediaplayer-thumbnail div p { margin: auto; text-align: center; }
#mp-container-top { z-index: 2; position: absolute; background-color:var(--color-grey-bkg); left:0px; right:0px; margin-left:280px; margin-right:0px; height: 140px; position: fixed; top:50px; bottom:auto; overflow: hidden; }
#mp-container-bottom { z-index: 2; position: absolute; background-color:var(--color-grey-bkg); left:0px; right:0px; margin-left:280px; margin-right:0px; height: calc(100% - 190px); position: fixed; bottom:0px; top:auto; overflow: auto; border-top: solid 2px #000000; }
.mediaplayer-line:not(.comment) { background-color:var(--color-content-bkg); margin:3px 0; text-align:left; min-width: 500px; }
.mediaplayer-line[data-status="playing"] { font-weight:bold;
background: -webkit-linear-gradient(#10a834, #09531a);
background: -moz-linear-gradient(#10a834, #09531a);
background: -ms-linear-gradient(#10a834, #09531a);
background: -o-linear-gradient(#10a834, #09531a);
background: linear-gradient(#10a834, #09531a); }
.mediaplayer-line[data-status="loaded"] { background: -webkit-linear-gradient(#dd9d58, #a1590a);
background: -moz-linear-gradient(#dd9d58, #a1590a);
background: -ms-linear-gradient(#dd9d58, #a1590a);
background: -o-linear-gradient(#dd9d58, #a1590a);
background: linear-gradient(#dd9d58, #a1590a); }
.mediaplayer-line[data-status="stopping"] { background: -webkit-linear-gradient(#32749a, #16445e);
background: -moz-linear-gradient(#32749a, #16445e);
background: -ms-linear-gradient(#32749a, #16445e);
background: -o-linear-gradient(#32749a, #16445e);
background: linear-gradient(#32749a, #16445e); }
.mediaplayer-line-content{ height:40px; line-height:40px; width:100% }
.mediaplayer-line[data-status="playing"] .mediaplayer-line-content, .mediaplayer-line[data-status="loaded"] .mediaplayer-line-content, .mediaplayer-line[data-status="stopping"] .mediaplayer-line-content { height:60px; line-height:25px; width:100% }
.mediaplayer-line-name { float:left; height:100%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; padding: 0 10px; box-sizing: border-box; }
.mediaplayer-line[data-status="playing"] .mediaplayer-line-name, .mediaplayer-line[data-status="loaded"] .mediaplayer-line-name, .mediaplayer-line[data-status="stopping"] .mediaplayer-line-name { padding-top:5px; }
.mediaplayer-line-time { font-weight:normal; font-size:12px; }
.mediaplayer-line-time span.elapsedtime { font-weight:bold; font-size:16px; }
.mediaplayer-line-time div.mediaduration { display:inline-block; margin-left:10px; padding-left:25px; height:20px; }
.mediaplayer-line[data-status="loaded"] .mediaplayer-line-time div.mediaduration { margin-left:0px !important; padding-left:0px !important; }
.mediaplayer-line[data-playingstate="0"] div.mediaduration { background-image:url("../img/btn_player_play.png"); background-repeat: no-repeat; background-position: 0px 1px; }
.mediaplayer-line[data-playingstate="1"] div.mediaduration { background-image:url("../img/btn_player_pause.png"); background-repeat: no-repeat; background-position: 0px 1px; }
.mediaplayer-line[data-playingstate="2"] div.mediaduration { background-image:url("../img/icon_freeze.png"); background-repeat: no-repeat; background-position: 0px 1px; }
.mediaplayer-line[data-playingstate="1"] div.mediaduration, .mediaplayer-line[data-playingstate="2"] div.mediaduration {
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
.mediaplayer-line .still { float:left; height:100%; width:50px; background-repeat: no-repeat; background-position: center; border:0; background-image:url("../img/icons/still.png"); }
.mediaplayer-line .movie { float:left; height:100%; width:50px; background-repeat: no-repeat; background-position: center; border:0; background-image:url("../img/icons/movie.png"); }
.mediaplayer-line .website { float:left; height:100%; width:50px; background-repeat: no-repeat; background-position: center; border:0; background-image:url("../img/icons/website.png"); }
.mediaplayer-line .thumbnail { float:left; height:40px; width:70px; border:0; }
.mediaplayer-line[data-status="playing"] .thumbnail, .mediaplayer-line[data-status="loaded"] .thumbnail, .mediaplayer-line[data-status="stopping"] .thumbnail { margin-top:10px; }
.mediaplayer-line[data-status="playing"] .icon, .mediaplayer-line[data-status="loaded"] .icon, .mediaplayer-line[data-status="stopping"] .icon { line-height:60px; }
.mediaplayer-line .icon { float:right; height:100%; width:40px; background-repeat: no-repeat; background-position: center; border:0; }
.mediaplayer-line .fade { background-image:url("../img/crossfade.png"); opacity:0.2; }
.mediaplayer-line .fade[data-fade="1"] { opacity:1; }
.mediaplayer-line .loop { background-image:url("../img/icon_freeze.png"); }
.mediaplayer-line .loop[data-loop="1"] { background-image:url("../img/icon_loop_on.png"); }
.mediaplayer-line .loop[data-loop="2"] { background-image:url("../img/icon_enchaine.png"); }
.mediaplayer-line .autoplay { background-image:url("../img/btn_player_autoplay.png"); }
.mediaplayer-line .autoplay[data-autoplay="0"] { background-image:url("../img/btn_player_pause.png"); }
.mediaplayer-line .timer { background-image:url("../img/btn_mini_timer_off.png"); text-align:center; color: #ffffff; font-size:9px; }
.mediaplayer-line .timer:not([data-timer=""]):before { content:attr(data-timer); }
.mediaplayer-line .volume { background-image:url("../img/btn_player_volume_off.png"); text-align:center; color: #ffffff; font-size:11px; }
.mediaplayer-line .volume[data-volume=""], .mediaplayer-line .volume[data-volume="0"] { background-image:url("../img/btn_player_mute_off.png"); }
.mediaplayer-line .volume[data-volume="100"] { background-image:url("../img/btn_player_volume.png"); }
.mediaplayer-line .volume:not([data-volume=""]):not([data-volume="0"]):not([data-volume="100"]):before { content:attr(data-volume) '%'; }
.mediaplayer-line:not(.dragged)[data-dragover="before"], .mento-container-title[data-dragover="before"] { box-shadow: 0px -3px var(--color-gold); }
.mediaplayer-line:not(.dragged)[data-dragover="after"], .mento-container-title[data-dragover="after"] { box-shadow: 0px 3px var(--color-gold); }
.mediaplayer-line[data-status="playing"] .fade, .mediaplayer-line[data-status="stopping"] .fade, .mediaplayer-line[data-status="playing"] .autoplay, .mediaplayer-line[data-status="stopping"] .autoplay, .mediaplayer-line[data-status="stopping"] .loop { visibility:hidden; }
.mediaplayer-line[data-playingstate="2"] .loop { visibility:hidden; }
.mediaplayer-line[data-status=""] .fade:hover, .mediaplayer-line[data-status="loaded"] .fade:hover,
.mediaplayer-line[data-status=""] .loop:hover, .mediaplayer-line[data-status="loaded"] .loop:hover, .mediaplayer-line[data-status="playing"] .loop:hover { cursor:pointer; background-color: rgba(255,255,255,0.2); }
.mediaplayer-line[data-status=""] .autoplay:hover, .mediaplayer-line[data-status="loaded"] .autoplay:hover,
.mediaplayer-line[data-status=""] .timer:hover, .mediaplayer-line[data-status="loaded"] .timer:hover { cursor:pointer; background-color: rgba(255,255,255,0.2); }
.mediaplayer-line.selected { color:#000000 !important;
background: -webkit-linear-gradient(#faefc7, #c2a161);
background: -moz-linear-gradient(#faefc7, #c2a161);
background: -ms-linear-gradient(#faefc7, #c2a161);
background: -o-linear-gradient(#faefc7, #c2a161);
background: linear-gradient(#faefc7, #c2a161); }
.mediaplayer-line[data-status="loaded"].selected span/*, .mediaplayer-line[data-status="loaded"].selected .mediaplayer-line-name p*/ { background-color:#c37a2b; }
.mediaplayer-preview { width:100%; height:100%; }
video.mediaplayer-preview { object-fit: fill; }
.mediaplayer-content { position: absolute; top:0px; bottom:30px; width: 100%; overflow:auto; text-align:left; }
.mediaplayer-line.comment { margin:3px 0; padding: 5px 5px 5px 20px; text-align:left; min-width: 500px; min-height: 30px; color:#ffffff; box-sizing: border-box; }
.mediaplayer-line.comment[data-lightcolor="1"] { color:#000000; }
.mediaplayer-line.comment .cliquable-button { background-color: rgba(77,77,77,0.2); }
.mediaplayer-line-comment { padding:2px; box-sizing: border-box; }
.mediaplayer-line.comment[data-lightcolor="1"] .cliquable-button:hover, .mediaplayer-line.comment[data-lightcolor="1"] .cliquable-button:active { background-color: rgba(0,0,0,0.2) !important; }
.mediaplayer-line.comment .mento-sequence-line-btn { margin:0 0 0 10px !important; }
.mediaplayer-line p { line-height: normal; padding: 3px 5px 3px 20px; font-size:0.8em; border-bottom:1px solid var(--color-grey-bkg); }
.mediaplayer-line[data-loading="1"] .mediaplayer-loading-status { height:100%; width:100%; background-repeat: no-repeat; background-position: left bottom; border:0; background-size: 20px 20px; background-image:url("../img/statut1.png"); }
.mediaplayer-content[data-connectionstatus="off"] .movie .mediaplayer-loading-status,
.mediaplayer-content[data-connectionstatus="off"] .still .mediaplayer-loading-status,
.mediaplayer-line[data-loading="2"] .mediaplayer-loading-status { height:100%; width:100%; background-repeat: no-repeat; background-position: left bottom; border:0; background-size: 20px 20px; background-image:url("../img/statut2.png"); }
.preview-button-line { background-color:var(--color-content-bkg); margin:3px 0; min-height:40px; text-align:left; width: 100%; }
.preview-button-line-layer { float:left; height:40px; font-size:0.8em; width:30px; margin-left:5px; line-height:40px; }
.preview-button-line-type { float:left; width:45px; height:40px; background-size:contain; background-repeat: no-repeat; background-position: center }
.preview-button-line-name { width: calc(100% - 80px); height:100%; overflow:hidden; padding-top:5px; }
div[contenteditable="true"]:hover { cursor:text; }
.btn-on.disabled { opacity:1 !important; }
.cliquable, .cliquable-button { cursor: pointer; }
.cliquable-button:hover, .cliquable-button:active { background-color: rgba(255,255,255,0.2) !important; }
.cliquable-button.disabled { cursor:default !important; background-color:inherit !important; opacity:0.3; }
.cursorhelp { cursor: help; }
.draggable { cursor: grab !important; }
.floatright { float: right; text-align: right; }
.floatleft { float: left; text-align: left; }
.fixedbottom { position: absolute; bottom:0px; width:100%; }
.overflowauto { overflow: auto; }
.overflowhidden { overflow: hidden !important; }
.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.wordwrap { overflow: hidden; word-wrap: break-word; }
.bold { font-weight: bold; }
.modified::after { content: " *"; color: var(--color-gold); }
.modifiedbkg { background-color: var(--color-gold) !important; }
.margin0 { margin: 0px !important; }
.margin10 { margin: 10px !important; }
.margin15 { margin: 15px !important; }
.margin20 { margin: 20px !important; }
.margin30 { margin: 30px !important; }
.padding0 { padding: 0 !important; }
.padding5 { padding: 5px !important; box-sizing: border-box; }
.padding10 { padding: 10px !important; box-sizing: border-box; }
.paddingleft10 { padding-left: 10px !important; box-sizing: border-box; }
.paddingleft30 { padding-left: 30px !important; box-sizing: border-box; }
.paddingleft50 { padding-left: 50px !important; box-sizing: border-box; }
.marginright1 { margin-right: 1px; }
.marginright3 { margin-right: 3px; }
.marginright5 { margin-right: 5px; }
.marginright8 { margin-right: 8px; }
.marginright10 { margin-right: 10px; }
.marginright20 { margin-right: 20px; }
.marginright25 { margin-right: 25px; }
.marginright30 { margin-right: 30px; }
.marginright40 { margin-right: 40px; }
.marginleft1 { margin-left: 1px; }
.marginleft2 { margin-left: 2px; }
.marginleft3 { margin-left: 3px; }
.marginleft5 { margin-left: 5px; }
.marginleft10 { margin-left: 10px; }
.marginleft12 { margin-left: 12px; }
.marginleft20 { margin-left: 20px; }
.marginleft30 { margin-left: 30px; }
.marginleft35 { margin-left: 35px; }
.marginleft40 { margin-left: 40px; }
.margintop1 { margin-top: 1px !important; }
.margintop3 { margin-top: 3px !important; }
.margintop5 { margin-top: 5px !important; }
.margintop7 { margin-top: 7px !important; }
.margintop8 { margin-top: 8px !important; }
.margintop10 { margin-top: 10px !important; }
.margintop12 { margin-top: 12px !important; }
.margintop15 { margin-top: 15px !important; }
.margintop18 { margin-top: 18px !important; }
.margintop20 { margin-top: 20px !important; }
.margintop30 { margin-top: 30px !important; }
.marginbottom3 { margin-bottom: 3px !important; }
.marginbottom5 { margin-bottom: 5px !important; }
.marginbottom10 { margin-bottom: 10px !important; }
.marginbottom15 { margin-bottom: 15px !important; }
.marginbottom20 { margin-bottom: 20px !important; }
.marginbottom30 { margin-bottom: 30px !important; }
.paddingtop10 { padding-top: 10px; }
.paddingbottom10 { padding-bottom: 10px; }
.width100pct { width: 100%; }
.discret { color: var(--color-light-grey); }
.success { color: #10a834; }
.warning { color: #c37a2b; }
.error { color: #d72429; }
.colorwhite { color: #ffffff; }
.visible { visibility: normal; }
.invisible { visibility: hidden; }
.hidden { display: none !important; }
.block { display: block; }
.fontsize10 { font-size: 10px; }
.fontsize11 { font-size: 11px; }
.fontsize12 { font-size: 12px; }
.fontsize15 { font-size: 15px; }
.lineheight20 { line-height: 20px; }
.lineheight1em { line-height: 1em; }
.textcenter { text-align: center; }
.textleft { text-align: left; }
.textright { text-align: right; }
.inline { display: inline; }
.inlineblock { display: inline-block; }
.smaller { font-size: 0.8em; }
.verticalbottom { vertical-align: bottom; }
.verticaltop { vertical-align: top; }
.verticalmiddle { vertical-align: middle; }
.upcase { text-transform: uppercase; }
.greybkg { background-color:var(--color-grey-bkg); }
.height14 { height: 14px; }
.height20 { height: 20px; }
.heightmin12 { min-height: 12px; }
.heightmin16 { min-height: 16px; }
.heightmin20 { min-height: 20px; }
.bkgtransparent { background-color: transparent !important; }
.letterspacing05 { letter-spacing: 0.05em; }
.opacity50 { opacity:0.5 }
.top0 { top: 0px !important; }
/*** animation d'attente ***/
.lds-ellipsis[data-play="0"] { display: none; }
.lds-ellipsis[data-play="1"] { display: inline-block; }
.lds-ellipsis[data-play="0"] div { animation-play-state: paused; }
.lds-ellipsis[data-play="1"] div { animation-play-state: running; }
.lds-ellipsis {
display: inline-block;
position: relative;
width: 50px;
height: 10px;
margin: 10px;
}
.lds-ellipsis div {
position: absolute;
top: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
animation-duration: 0.6s;
animation-iteration-count: infinite;
}
.lds-ellipsis div:nth-child(1) {
left: 0px;
animation-name: lds-ellipsis1;
}
.lds-ellipsis div:nth-child(2) {
left: 0px;
animation-name: lds-ellipsis2;
}
.lds-ellipsis div:nth-child(3) {
left: 20px;
animation-name: lds-ellipsis2;
}
.lds-ellipsis div:nth-child(4) {
left: 40px;
animation-name: lds-ellipsis3;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(20px, 0);
}
}
/*** animation d'attente mini ***/
.lds-ellipsis-mini[data-play="0"] { display: none; }
.lds-ellipsis-mini[data-play="1"] { display: inline-block; }
.lds-ellipsis-mini[data-play="0"] div { animation-play-state: paused; }
.lds-ellipsis-mini[data-play="1"] div { animation-play-state: running; }
.lds-ellipsis-mini {
display: inline-block;
position: relative;
width: 25px;
height: 5px;
margin: 5px;
}
.lds-ellipsis-mini div {
position: absolute;
top: 0px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
animation-duration: 0.6s;
animation-iteration-count: infinite;
}
.lds-ellipsis-mini div:nth-child(1) {
left: 0px;
animation-name: lds-ellipsis1-mini;
}
.lds-ellipsis-mini div:nth-child(2) {
left: 0px;
animation-name: lds-ellipsis2-mini;
}
.lds-ellipsis-mini div:nth-child(3) {
left: 10px;
animation-name: lds-ellipsis2-mini;
}
.lds-ellipsis-mini div:nth-child(4) {
left: 20px;
animation-name: lds-ellipsis3-mini;
}
@keyframes lds-ellipsis1-mini {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3-mini {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2-mini {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(10px, 0);
}
}
@keyframes blink { 0%{ background-color:var(--color-dark-grey); } 50%{ background-color:var(--color-gold); } 100%{ background-color:var(--color-dark-grey); } }
/* Message temporaire pour l'utilisateur */
#popup {
display: none;
position: fixed;
max-width: 75%;
min-width: 250px;
max-height: 55%;
overflow-y: auto;
background-color: var(--color-dark-grey);
color: #fff;
text-align: center;
border-radius: 5px;
padding: 10px;
z-index: 50; left: 50%;
transform: translate(-50%,-30px); -ms-transform: translate(-50%,-30px);
bottom: 30px;
}
#popup[data-level=""] { background-color: var(--color-dark-grey); }
#popup[data-level="error"] { background-color: #af3838; }
#popup[data-level="warning"] { background-color: #c37a2b; }
#popup[data-level="success"] { background-color: #579052; }
#popup[data-level="info"] { background-color: #32749a; }
#popup.show {
display: block;
-webkit-animation: fadein 0.5s linear 1;
animation: fadein 0.5s linear 1;
}
#popup.hide {
display: block;
-webkit-animation: fadeout 0.5s linear 1 forwards;
animation: fadeout 0.5s linear 1 forwards;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1; }
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1; }
to {bottom: 0; opacity: 0; }
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1; }
to {bottom: 0; opacity: 0; }
}
@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}