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%; 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 */
div.input-field, div.input-timecode:not(.tab-field) { text-align: left; margin-top:5px; margin-bottom:10px; height: 38px; }
div.input-field > 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 { 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 { 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 { 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;  }

/* 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; }
.menu-button { display: inline-block; cursor: pointer; height: 50px; box-sizing: border-box; vertical-align: top; }
.menu-button:not(.padding0) { padding: 17px 15px 0 15px; }
.menu-button:hover { background-color:var(--color-grey-bkg); }

/* é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; text-align: left; }
#container-left { height: auto; width: 400px; position: fixed; top:50px; bottom:0px; overflow-x: hidden; overflow-y: hidden; border-right: 3px dotted var(--color-content-bkg); box-sizing: border-box; }
#container-left-top { height: 50%; max-height: 1000px; width:100%; overflow-x: hidden; overflow-y: hidden; border-bottom: 3px dotted var(--color-content-bkg); }
#container-left-bottom { height: 50%; width:100%; overflow-x: hidden; overflow-y: hidden; }
#content-left-top, #content-left-bottom { height: 100%; width:100%; overflow: auto; box-sizing: border-box; padding:20px; }
#container-center { background-color:var(--color-grey-bkg); overflow: hidden; height: 100%; width:(100% - 400px); margin-left:400px; box-sizing: border-box; padding:20px; }
#content-center { height: 100%; overflow: auto; box-sizing: border-box; }
#content-center:empty:before { color: var(--color-light-grey); text-align:center; font-size: 14px; margin-left: 10px; line-height: 2em; content: "Sélectionnez une vidéo pour commencer le marquarge"; }

.videoGroup { padding:5px; }
.videoGroup[data-selected="1"] { background-color:rgba(255,178,56,0.5) !important; } 
.videoGroup:hover { background-color:var(--color-content-bkg); }

#table_segments { width: 100%; border-collapse: collapse; }
#table_segments thead { color: var(--color-light-grey); }
#table_segments tbody tr:hover { background-color:var(--color-content-bkg); }
#table_segments tbody tr[data-selected="1"] { background-color:rgba(255,178,56,0.5) !important; } /*on met de la transparence pour que la couleur soit la meme que sur la timeline*/
#table_segments tbody tr[data-na="1"] { color:red !important; font-style:italic; }
#table_segments td { padding:5px; width:33%; border-bottom: solid 1px var(--color-content-bkg); }

.content-group { height: 100%; width:100%; border: solid 1px var(--color-light-grey); box-sizing: border-box; }
.content-group .title { width:100%; padding: 0 5px; height:30px; line-height:30px; background-color:var(--color-content-bkg); box-sizing: border-box; }
.content-group .body { width:100%; padding:5px; height: calc(100% - 60px); box-sizing: border-box; overflow:auto; }
.content-group .foot { width:100%; padding: 0 5px; height:30px; line-height:30px; text-align:center; background-color:var(--color-content-bkg); box-sizing: border-box; }
.content-group .footright { width:100%; text-align:right; line-height:30px; height:30px; z-index:2; margin-top: -30px; padding-right:5px;  box-sizing: border-box; }

#divTimeline { height:70px; width:100% }
#divTimeline div.layer { height:100%; position:absolute; top:0px; left:0px; font-size:12px; } 
#divTimeline div.layer div.top { width:100%; box-sizing: border-box; text-align:left; line-height:14px; padding-left:9px; }
#divTimeline div.layer div.middle { width:100%; box-sizing: border-box; text-align:center; line-height:30px; }
#divTimeline div.layer div.bottom { width:100%; box-sizing: border-box; text-align:right; line-height:14px; padding-right:9px; padding-top:6px; }
#divTimeline div.layer:first-of-type div.top { height:19px; }
#divTimeline div.layer:first-of-type div.middle { height:32px; border: solid 1px var(--color-light-grey); }
#divTimeline div.layer:first-of-type div.bottom { height:19px; }
#divTimeline div.layer:not(:first-of-type) div.top { height:20px; border-left: solid 1px var(--color-light-grey); border-right: solid 1px var(--color-light-grey); background-image:url('../img/icon_arrowright.png'); background-repeat:no-repeat; background-position:left -5px top -2px;}
#divTimeline div.layer:not(:first-of-type) div.middle { height:30px; border-left: solid 1px var(--color-light-grey); border-right: solid 1px var(--color-light-grey); background-color:rgba(100,100,100,0.5); }
#divTimeline div.layer:not(:first-of-type)[data-selected="1"] div.middle { background-color:rgba(255,178,56,0.5) !important; } 
#divTimeline div.layer:not(:first-of-type) div.bottom { height:20px; border-left: solid 1px var(--color-light-grey); border-right: solid 1px var(--color-light-grey); background-image:url('../img/icon_arrowleft.png'); background-repeat:no-repeat; background-position:right -5px bottom -2px;}

.cliquable, .cliquable-button { cursor: pointer; }
.cliquable-button:hover, .cliquable-button:active { background-color: rgba(255,255,255,0.2); }
.cursorhelp 		{ cursor: help; }
.draggable 		{ cursor: grab !important; }
.floatright 		{ float: right; text-align: right; }
.floatleft 		{ float: left; text-align: left; }
.overflowauto	{ overflow: auto; }
.overflowhidden	{ overflow: hidden; }
.ellipsis 		{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.bold			{ font-weight: bold; }
.modified::after { content: "*"; }
.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; }
.paddingleft30	{ padding-left: 30px !important; box-sizing: border-box; }
.paddingleft50	{ padding-left: 50px !important; box-sizing: border-box; }
.marginright1	{ margin-right: 1px; }
.marginright2	{ margin-right: 2px; }
.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; }
.margintop2		{ margin-top: 2px !important; }
.margintop3		{ margin-top: 3px !important; }
.margintop5		{ margin-top: 5px !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); }
.heightmin12	{ min-height: 12px; }
.heightmin16	{ min-height: 16px; }
.heightmin20	{ min-height: 20px; }
.bkgtransparent  { background-color: transparent !important; }
.letterspacing05 { letter-spacing: 0.05em; }
.boxsizing { box-sizing: border-box;  }

/*** 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; }
}