html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
*:not(textarea) {
  outline: 0;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}
input::selection {
  background-color: dimgrey;
}
body {
  background-color: #3a3d41;
  overflow: hidden;
  font-family: "PTSANS", Arial, Helvetica, sans-serif;
}
body .ui-resizable-se {
  cursor: e-resize;
}
body .ui-dialog {
  background: #3a3d41;
}
body .ui-dialog-titlebar {
  display: none;
}
body #dialog_form_choix_medias {
  padding: 0;
  overflow: hidden;
}
body #videoC1,
body #videoC2,
body #animBackground {
  position: absolute;
  z-index: 95;
  pointer-events: none;
  display: none;
}
body #videoC1,
body #animBackground {
  visibility: hidden;
}
body #favoritesColors {
  background-color: #282d33;
  border: 1px solid #111111;
  position: absolute;
  z-index: 10;
  display: none;
  width: 45px;
}
body #favoritesColors div {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
}
body #hoverFrame {
  position: absolute;
  display: none;
  border: 1px solid grey;
  z-index: 96;
  pointer-events: none;
}
body #saveConfirm {
  position: absolute;
  right: 4%;
  width: 11%;
  bottom: 7%;
  background-color: #282d33;
  border: 1px solid #49b393;
  border-radius: 5px;
  display: none;
  z-index: 10;
}
body #saveConfirm p {
  color: white;
  margin: 5% 10%;
}
body #menu {
  width: 81.5%;
  height: 8%;
  background-image: url('images/fond_menu.png');
  display: inline-block;
  vertical-align: top;
}
body #menu div {
  width: 11%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 0;
  border: solid 1px #555555;
  cursor: pointer;
  margin: 0 -3px;
  display: inline-flex;
}
body #menu div p {
  color: rgba(255, 255, 253, 0.8);
  display: inline-block;
  margin: 30% auto 0;
  font-size: 0.7vw;
  padding-left: 6%;
  pointer-events: none;
}
body #menu > div:nth-child(1) {
  background-image: url('images/background.jpg');
}
body #menu > div:nth-child(2) {
  background-image: url('images/texte.jpg');
}
body #menu > div:nth-child(3) {
  background-image: url('images/zonecouleur.jpg');
}
body #menu > div:nth-child(4) {
  background-image: url('images/media.jpg');
}
body #menu > div:nth-child(5) {
  background-image: url('images/diaporama.jpg');
}
body #menu > div:nth-child(6) {
  background-image: url('images/widget.jpg');
}
body #menu #btn_widgets {
  position: absolute;
  width: 696px;
  height: 78px;
  z-index: 10;
  left: 31.5%;
  top: 7.9%;
  display: none;
  border: none;
}
body #menu #btn_widgets div {
  cursor: pointer;
  width: 25%;
  height: 92%;
}
body #menu #btn_widgets div#weather_b {
  background-image: url('images/meteo.jpg');
}
body #menu #btn_widgets div#weathersnow_b {
  background-image: url('images/meteo_neige.jpg');
}
body #menu #btn_widgets div#weatherbeach_b {
  background-image: url('images/meteo_plage.jpg');
}
body #menu #btn_widgets div#clock_b {
  background-image: url('images/horloge.jpg');
}
body #CanvasBox {
  width: 81.5%;
  height: 67.5%;
  background-color: #d4d4d4;
  position: relative;
  overflow: auto;
}
body #CanvasBox #MyCanvas {
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
  border: 1px solid black;
  margin: auto;
  margin-top: 1%;
}
body #Param {
  width: 18.5%;
  height: 100%;
  background-color: #282d33;
  display: inline-block;
  padding: 0;
  margin: 0;
  float: right;
  overflow: auto;
}
body #Param .mCSB_inside > .mCSB_container {
  margin-right: 0;
}
body #Param .onglet-tab span {
  text-transform: uppercase;
  color: white;
  display: inline-block;
  width: 46%;
  text-align: left;
  height: 100%;
  padding: 4% 0;
  cursor: pointer;
  position: relative;
  padding-left: 3%;
  font-size: 0.85vw;
}
body #Param .onglet-tab span.active {
  background-color: #49b393;
}
body #Param .onglet-tab span::after {
  position: absolute;
  content: '';
  background-image: url("images/gear.png");
  background-size: 100% 100%;
  width: 1.65vw;
  height: 1.65vw;
  right: 10px;
  top: 9px;
}
body #Param .onglet-tab span:last-child::after {
  background-image: url("images/acceleration.png");
  top: 12px;
}
body #Param .onglet {
  width: 100%;
  height: 97%;
}
body #Param .onglet:last-of-type {
  display: none;
}
body #Param .accordion {
  width: 100%;
  height: 2.9%;
  text-align: left;
  background-color: #eee;
  background-image: url('images/Fond_options_menu.png');
  color: white;
  padding: 0;
  vertical-align: top;
  transition: 1s max-height 0.3s;
  cursor: pointer;
  border: none;
  outline: none;
}
body #Param .accordion.active,
body #Param .accordion:hover {
  background-color: #ccc;
}
body #Param .accordion span:first-child {
  display: inline-block;
  width: 8%;
  height: 22px;
  background: url('images/Fleche_Menu_Droite.png') no-repeat center;
}
body #Param .accordion span:last-child {
  display: inline-block;
  height: 100%;
  width: 92%;
  float: right;
  text-align: left;
  padding-top: 1.5%;
  font-size: 0.7vw;
}
body #Param .panel {
  background-color: #282d33;
  padding: 0 18px;
  display: none;
  overflow: hidden;
  margin-bottom: 2%;
}
body #Param .panel .mes_divs {
  width: 100%;
}
body #Param .panel #Name {
  height: 18px;
  margin-left: 1%;
  margin-top: 2%;
  width: 72%;
  padding: 5px 0;
}
body #Param .panel > * {
  display: inline-block;
  vertical-align: middle;
}
body #Param .panel p {
  margin-left: 10%;
  font-size: 0.7vw;
  color: #919496;
  height: 20px;
  width: 10%;
  display: inline-block;
  vertical-align: middle;
}
body #Param .panel p:first-of-type {
  margin-top: 5%;
}
body #Param .panel .slider {
  -webkit-appearance: none;
  appearance: none;
  width: 40%;
  height: 14px;
  border-radius: 5px;
  background: url('images/Slider_Fond.png') no-repeat center;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
body #Param .panel .slider:hover {
  opacity: 1;
}
body #Param .panel .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 0;
  background: url('images/Button_Slider_Rond.png');
  background-repeat: round;
  cursor: pointer;
}
body #Param .panel .slider::-moz-range-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border: 0;
  background: url('images/Button_Slider_Rond.png');
  background-repeat: round;
  cursor: pointer;
}
body #Param .panel input,
body #Param .panel textarea,
body #Param .panel select {
  border: 0;
  padding: 0;
  background-color: #222629;
  color: #cccccc;
  height: 22px;
  margin-left: 4%;
  overflow: hidden;
  text-align: center;
  resize: none;
  font-size: 0.6vw;
}
body #Param .panel select {
  margin-left: 15%;
  height: 25px;
  width: 45%;
}
body #Param .panel input {
  width: 12.5%;
}
body #Param .panel input[type="checkbox"] {
  margin-left: 10%;
  width: 5%;
}
body #Param .panel .input-arrows {
  width: 5%;
  height: 30px;
  margin-left: -1.5%;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}
body #Param .panel .input-arrows input {
  width: 100%;
  height: 50%;
  vertical-align: top;
  padding: 0;
}
body #Param .panel .input-arrows input:last-child {
  margin-top: -6px;
}
body #Param .panel .colorpicker-bloc {
  width: 6%;
  height: 15px;
  display: inline-block;
}
body #Param .panel .colorpicker-bloc div {
  background-color: #000000;
  width: 100%;
  height: 100%;
  border: 2px outset #919496;
}
body #Param .panel .colorpicker-bloc + p {
  margin-left: 2%;
  width: 3%;
  color: #919496;
  vertical-align: initial;
}
body #Param .panel .colorpicker-input {
  border: solid 1px #919496;
  width: 16%;
  background-color: #222629;
  color: #cccccc;
  height: 17px;
  margin-left: 1%;
  overflow: hidden;
  text-align: center;
  resize: none;
}
body #Param .panel hr {
  border: 1px inset dimgrey;
}
body #Param .panel hr.hrblack {
  border: 1px solid #222629;
  width: 100%;
}
body #Param .panel button {
  background-repeat: round;
  width: 30px;
  height: 30px;
  border: 0;
}
body #Param .panel .shapeParams {
  width: 100%;
  display: none;
}
body #Param .panel .shapeParams.shape_Shape {
  display: block;
}
body #Param .panel #tableDiapos {
  width: 100%;
  display: table;
  border-collapse: collapse;
  color: white;
  margin-top: 2%;
  border: 1px solid black;
}
body #Param .panel #tableDiapos thead,
body #Param .panel #tableDiapos tbody {
  display: block;
}
body #Param .panel #tableDiapos thead th {
  background: #636e72;
  padding: 1%;
  text-align: left;
}
body #Param .panel #tableDiapos td {
  border: 1px solid #ecf0f1;
}
body #Param .panel #tableDiapos tr:first-child td {
  border-top: 0;
}
body #Param .panel #tableDiapos tr td:first-child {
  border-left: 0;
  width: 20%;
}
body #Param .panel #tableDiapos tr:last-child td {
  border-bottom: 0;
}
body #Param .panel #tableDiapos tr td:last-child {
  border-right: 0;
  width: 40%;
}
body #Param .panel #tableDiapos #compoDiapo {
  width: 320px;
  height: 230px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #919496;
  font-size: 10px;
}
body #Param .panel #tableDiapos #compoDiapo tr {
  width: 100%;
}
body #Param .panel #tableDiapos #compoDiapo tr td:first-child {
  width: 20%;
}
body #Param .panel #tableDiapos #compoDiapo tr td:not(:first-child) {
  width: 40%;
}
body #Param .panel #tableDiapos #compoDiapo tr td {
  height: 40px;
}
body #Param .panel #tableDiapos #compoDiapo tr td img {
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
}
body #Param .panel .div_trigger {
  display: none;
}
body #Param .panel .div_trigger input {
  width: 57%;
}
body #Param #res_api_villes_meteo {
  max-height: 200px;
  overflow: auto;
}
body #Param #res_api_villes_meteo ul {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  color: white;
  font-size: 0.8vw;
}
body #Param #res_api_villes_meteo ul li {
  padding: 5px;
}
body #Param #res_api_villes_meteo ul li:nth-child(even) {
  background-color: dimgrey;
}
body #Param #ParamMasque {
  background-image: url('images/Button_Oeil.PNG');
  margin-left: 15%;
  background-color: dimgrey;
}
body #Param #ParamMasque.active {
  background-image: url('images/no_eye.png');
}
body #Param #ParamProteger {
  background-image: url('images/Button_Shield.PNG');
}
body #Param #ParamProteger.active {
  background-image: url('images/Bouton_Gestion_3_True.png');
}
body #actions {
  position: absolute;
  top: 1%;
  right: 20%;
  width: 9%;
  height: 3%;
}
body #actions span {
  text-transform: uppercase;
  color: white;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 0.8vw;
  height: 100%;
  padding: 5% 0 2%;
  cursor: pointer;
  position: relative;
  border: 1px solid floralwhite;
  border-radius: 5px;
  background: linear-gradient(to left, #282d33 50%, #49b393 50%) right;
  background-size: 200%;
}
body #actions span:hover {
  background-color: #49b393;
}
body #actions span.loading {
  background-position: left;
  transition: 1s ease-out;
}
body #actions span.notSaved {
  color: #49b393;
  font-weight: bold;
}
body #timeline {
  width: 81.1%;
  height: 25.3%;
  background-color: #282d33;
  overflow: hidden;
  color: white;
  padding-left: 5px;
}
body #timeline .mCSB_inside > .mCSB_container {
  margin-right: 10px;
}
body #timeline #timeline-scroll {
  height: 79.5%;
  margin-top: 0.5%;
}
body #timeline #timeline-scroll > div {
  padding-left: 0.5%;
  width: 99.5%;
}
body #timeline #tl-fixed {
  position: fixed;
  width: 72%;
  height: 2%;
  top: 78.4%;
  left: 8%;
  z-index: 10;
  background-color: #282d33;
}
body #timeline #tl-fixed #sliderNumbers {
  width: 100%;
  height: 10px;
  font-size: 0.5vw;
  color: #eaeaea;
}
body #timeline #tl-fixed #sliderNumbers span {
  position: absolute;
}
body #timeline #tl-fixed #slider {
  width: 100%;
  height: 6px;
  margin-top: 0.2%;
  background: none;
  background-color: #111111;
  border-color: #111111;
  border-radius: 0;
}
body #timeline #tl-fixed #slider .ui-slider-handle {
  width: 8px;
  height: 18px;
  background: #d63031;
  cursor: pointer;
  border: none;
  border-radius: 0 0 20px 20px;
  margin-left: -0.3%;
}
body #timeline #timeline-options {
  height: 10%;
  background-image: url(images/fond_menu.png);
  padding-left: 1%;
  margin-left: -0.5%;
  position: relative;
}
body #timeline #timeline-options > * {
  display: inline-block;
  vertical-align: top;
}
body #timeline #timeline-options #zoom,
body #timeline #timeline-options #valZoom,
body #timeline #timeline-options .Text {
  position: absolute;
}
body #timeline #timeline-options .Text {
  right: 3%;
}
body #timeline #timeline-options .Text:last-of-type {
  right: 1%;
}
body #timeline #timeline-options #zoom {
  margin-top: 2px;
  right: 6%;
  height: 80%;
  width: 8.5%;
  background-color: #282d33;
  color: white;
}
body #timeline #timeline-options #valZoom {
  position: absolute;
  width: 7%;
  height: 65%;
  right: 7%;
  top: 13%;
  background-color: #282d33;
  color: white;
  border: none;
  font-size: 0.7vw;
}
body #timeline #timeline-options > input {
  height: 100%;
}
body #timeline #timeline-options > input:nth-of-type(5) {
  margin-left: 0.5%;
}
body #timeline #timeline-options p:nth-of-type(1) {
  width: 3.5%;
  margin-top: 0.2%;
  text-align: right;
}
body #timeline #timeline-options div {
  width: 1%;
  height: 100%;
}
body #timeline #timeline-options div input {
  width: 100%;
  height: 50%;
  padding: 0;
  vertical-align: top;
}
body #timeline #timeline-options div input:last-child {
  margin-top: -40%;
}
body #timeline #timeline-composants {
  width: 9%;
  margin-top: 0.3%;
}
body #timeline #timeline-composants div {
  width: 70%;
  float: left;
}
body #timeline #timeline-composants > span {
  font-size: 0.8vw;
}
body #timeline #timeline-composants > img {
  width: 14px;
  height: 15px;
  margin-left: 3.8%;
}
body #timeline #timeline-composants > img:first-of-type {
  margin-left: 12%;
}
body #timeline #timeline-composants #Composants div {
  width: 100%;
  height: 17px;
  margin-top: 3px;
  font-size: 11px;
  padding-left: 2px;
  padding-top: 1px;
  white-space: nowrap;
  overflow: hidden;
}
body #timeline #timeline-composants #Masque,
body #timeline #timeline-composants #Shield {
  width: 14%;
  margin-left: 1%;
}
body #timeline #timeline-composants #Masque button,
body #timeline #timeline-composants #Shield button {
  width: 90%;
  height: 17px;
  background: #282d33 url(images/eye.png) no-repeat;
  background-size: 80% 80%;
  display: block;
  margin: 4px auto 3px auto;
  border: none;
}
body #timeline #timeline-composants #Shield button {
  background-image: none;
}
body #timeline #timeline-composants #Composants > *:nth-child(even) {
  background-color: #2d3439;
}
body #timeline #timeline-composants #Composants > *.active {
  background-color: #494d51;
}
body #timeline .CompoTimeline {
  width: 90%;
  margin-left: 9%;
  height: 19px;
  border: 1px solid #111111;
}
body #timeline .CompoTimeline > div {
  height: 19px;
}
body #timeline .CompoTimeline > div:first-child {
  background-color: #00b894;
  float: left;
}
body #timeline .CompoTimeline > div:nth-child(2) {
  background-color: #b2bec3;
  float: left;
  width: 100%;
}
body #timeline .CompoTimeline > div:last-child {
  background-color: #d63031;
  left: 99.3%;
}
body .grid {
  margin: 0;
  padding: 0;
  border: none;
  outline: 1px solid #000;
  display: inline-block;
}
body .resizable {
  width: 40px;
  height: 18px;
  position: relative;
  cursor: pointer;
}
body #DivGestion {
  position: absolute;
  height: 24px;
  width: 120px;
}
body #DivGestion button {
  background-repeat: round;
  height: 24px;
  width: 24px;
}
body #blocTexte {
  position: absolute;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: none;
  outline: none;
  resize: none;
  transform-origin: left top;
}
body .ui-dialog-buttonpane {
  background: #3a3d41;
  border: 1px solid #1e2228;
  color: #ffffff;
}
body .ui-dialog-buttonpane .ui-state-default,
body .ui-dialog-buttonpane .ui-button-text {
  border: 0;
  color: #ffffff;
  background-color: #4f5356;
  border-radius: 0;
}
body .ui-dialog-buttonpane .ui-state-default:hover,
body .ui-dialog-buttonpane .ui-button-text:hover {
  background-color: #1e2228;
}
body .colorpicker {
  z-index: 11;
}
#loader {
  background-color: rgba(255, 255, 255, 0.95);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}
#loader.play {
  background-color: black;
}
#loader .spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 50;
  top: 40%;
  left: 47%;
}
#loader .spinner .cube1,
#loader .spinner .cube2 {
  background-color: black;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}
#loader .spinner .cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@-webkit-keyframes clicked {
  50% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes clicked {
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
@media (max-width: 1700px) {
  body #timeline #timeline-options #valZoom {
    right: 7.3%;
  }
}
@media (max-width: 1600px) {
  body #menu {
    height: 7.9%;
  }
  body #menu #btn_widgets {
    top: 7.9%;
  }
  body #menu #btn_widgets div {
    height: 74%;
    width: 20%;
  }
  body #Param .panel .changeSourceMedia,
  body #Param .panel .deleteSourceMedia,
  body #Param .panel button {
    width: 25px;
    height: 25px;
  }
  body #Param .panel .input-arrows input {
    height: 32%;
    margin-top: 35%;
  }
  body #Param .panel .input-arrows input:last-child {
    margin-top: -5px;
  }
}
@media (max-width: 1400px) {
  body #menu #btn_widgets div {
    height: 63%;
    width: 17%;
    background-size: 101%;
  }
  body #timeline #timeline-options #valZoom {
    right: 7.3%;
    height: 52%;
    top: 21%;
  }
  body #timeline #timeline-composants > img {
    width: 10px;
    height: 10px;
  }
  body #timeline #timeline-composants #Composants div {
    height: 18px;
    font-size: 10px;
  }
  body #timeline #timeline-composants #Masque button {
    background-size: 72% 80%;
    margin-top: 5px;
  }
  body #timeline #timeline-composants #Shield button {
    background-size: 80% 80%;
    margin-left: 0;
    margin-top: 5px;
  }
  body #Param .onglet-tab span::after {
    top: 7px;
  }
  body #Param .onglet-tab span:last-child::after {
    top: 9px;
  }
  body #Param .accordion span:first-child {
    height: 18px;
  }
  body #Param .panel #Name {
    height: 7px;
    margin-top: -2%;
  }
  body #Param .panel .changeSourceMedia,
  body #Param .panel .deleteSourceMedia,
  body #Param .panel button {
    width: 20px;
    height: 20px;
  }
  body #Param .panel select {
    height: 20px;
  }
}
@media (max-width: 1300px) {
  body #menu #btn_widgets div {
    height: 60%;
    width: 16%;
    background-size: 101%;
  }
  body #Param .panel .changeSourceMedia,
  body #Param .panel .deleteSourceMedia,
  body #Param .panel button {
    width: 18px;
    height: 18px;
  }
  body #Param .panel select {
    height: 18px;
  }
}
@media (-webkit-device-pixel-ratio: 1.25) {
  #menu,
  #Param,
  #timeline {
    zoom: 0.95 !important;
  }
}
@media (-webkit-device-pixel-ratio: 1.5) {
  #menu,
  #Param,
  #timeline {
    zoom: 0.76 !important;
  }
}
@media (-webkit-device-pixel-ratio: 1.75) {
  #menu,
  #Param,
  #timeline {
    zoom: 0.65 !important;
  }
}
@media (-webkit-device-pixel-ratio: 2) {
  #menu,
  #Param,
  #timeline {
    zoom: 0.55 !important;
  }
}