@import url(https://fonts.googleapis.com/css?family=Roboto:300);
* {margin:0; padding:0; font-size:inherit; font-family:inherit;}
a {color:#4f97ea; text-decoration:none;}
select {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0 !important;}

body,html
{
	font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
	font-size: 14px;
	margin:0;
	color: #666;
	width:100%;
	background:#ecf0f1;
	height: 100%;
}

#General {height:100%;}
#Left {float:left; width:280px; height:100%; background:#3E424D; position:fixed;}
#Left #Logo {height:60px; text-align:center; background:#33363F;}
#Left #Logo img {left: 0; margin: 4px 0 0 105px;position: absolute; width:50px;}
#Left #Identification {background:#3E424D; height:45px; border-bottom:1px solid #33363F; padding:25px;}
#Left #Identification .Option1 {font-weight:bold; padding-top:5px; color:#FFFFFF;}
#Left #Identification .Option2 {color:#FFFFFF;}
#Left #Identification img {border-radius:50%; height:50px; width:50px; float:left; margin:-5px 10px 0px 0;}

#Left ul.Menu li {list-style-type:none; padding:16px 0 20px 10px; border-left:5px solid #3E424D; color:#C0C0C0;}
#Left ul.Menu li i.fas {margin-right:15px; min-width:15px;}
#Left ul.Menu li:hover {background:#33363F; border-left:5px solid #B33434; color:#FFFFFF;}
#Left ul.Menu li.selected {background:#33363F; border-left:5px solid #3478B3; color:#FFFFFF;}

#Left ul.Menu a li.middleMenu {background:#54565d; border-left:5px solid #54565d; height: 25px; padding: 10px 0 0 14px;}
#Left ul.Menu a li.middleMenuSelected {color: white; border-left: 5px solid #909090;}

#Right {margin-left:280px;}
#Right h3 {margin: 25px 0 25px 0; font-size: 20px;}
#Right #SideMenu {height:31px; background:#FFFFFF; box-shadow:0px 0px 10px #c0c0c0; padding:19px 40px 10px 40px; }
#Right #SideMenu li {color:#33363F; font-weight:bold; list-style-type:none; font-size:20px; font-weight:normal;}
#Right #SideMenu ul li.headerMenu a {color:#33363F;}
#Right #Content {padding:0 40px 40px 40px; margin-top:40px;}
#Right #Content .notification {color:#FFFFFF; padding:20px 40px 20px 40px; margin-bottom:40px; position:relative; box-shadow:0px 0px 10px #c0c0c0; -webkit-animation: fadeOut 3s forwards; animation: fadeOut 3s forwards;}
#Right #Content .notification p {width:80%; }


@keyframes fadeOut {
    0%   {}
    90%  {}
    100% {color:#666B85; background:#FFFFFF;}
}
@-webkit-keyframes fadeOut {
    0%   {}
    90%  {}
    100% {color:#666B85;background:#FFFFFF;}
}





#Right #Content .ZoneTexte h4 {font-size:20px; font-weight:normal; margin-bottom:25px;}
#Right #Content .ZoneTexte p {margin:10px 0 0 0;}
#Right #Footer {text-align: center; font-size: 12px; margin:0 0 25px 0;}

#Right #Content img.avatar {max-width:200px; margin-bottom:10px;}
#Right #Content td.fixedRow h4 {margin:0 0 10px 0;}
#Right #Content td.fixedRow {width:230px; height:270px; margin:0 auto 0; text-align:center}

#Module {width:69%;float:left; min-height:400px; margin-bottom:10px;}


#html-output {
white-space: pre-wrap;
display:none;
}

.pell {
  border: 1px solid rgba(10, 10, 10, 0.1);
  box-sizing: border-box;
}

.pell-content {
  box-sizing: border-box;
  height: 300px;
  outline: 0;
  overflow-y: auto;
  padding: 10px;
  background: #FFFFFF;
}

.pell-actionbar {
  background-color: #FFF;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}

.pell-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: 30px;
  outline: 0;
  width: 30px;
  vertical-align: bottom;
}

.pell-button-selected {
  background-color: #F0F0F0;
}

	  
	  
/*
.owEditor {margin-bottom:10px; box-sizing: border-box; width:100%; height:300px; text-align:left; }
.owEdit-panelContain {background: #FFFFFF; border: 1px solid #ccc;} {width:100%;}
.owEdit-button-undefined {background-color: #FFFFFF;}
*/
#Options {background:#ffffff; width:29%; float:right; min-height:400px;}


/* === Global === */
.button_erreur, .button_valide,
.button_basic, .input_basic, .select_basic, .field_basic {border:none; padding:10px; border-radius:5px; color:#FFFFFF;}

.button_erreur {background:#B57577; position: absolute; right: 8px; bottom: 10px;}
.button_erreur:hover {background:#482627;}

.button_valide {background:#B57577; position: absolute; right: 8px; bottom: 10px;}
.button_valide:hover {background:#482627;}

.button_basic {background:#3478B3; position: absolute; right: 8px; top: 10px;}
.button_basic:hover {background:#205A8C;}

.input_basic {background:#3478B3;}
.input_basic:hover {background:#205A8C;}

.input_normal {background: #c6c6c6; color: #000000; cursor:pointer;}
.input_normal:hover {background:#989898;}

.field_basic {background: #ffffff; color: #666B85; border: 1px solid #ccc; border-radius:0; width: calc((100%) - (22px)); margin: 0 0 10px 0;}

div.error {background:#9A5456;}
div.valide {background:#3C874A;}
.valide {color:#3C874A;}
.error {color:#B57577;}
.standby {}

/* === Administration === */
#Administration {width: 360px; padding: 8% 0 0; margin: auto;}
#Administration h1 {font-size: 14px; text-align: center; background: #437ec6; height: 100px; font-family: "Roboto", sans-serif; text-transform: uppercase; color: #FFFFFF;}
#Administration h1 img {position:absolute; width:76px; left:50%; margin:10px 0 0 -38px;}
#Administration hr {height: 2px; border: 0; border-top: 1px solid #cbcbcb;}

#Administration .form {position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
#Administration .form input, #Administration .form button {font-family: inherit; font-size:inherit; border: 0; padding: 15px; outline:0; width:100%;}
#Administration .form input { background: #f2f2f2;  margin: 0 0 15px;  box-sizing: border-box;}
#Administration .form button { text-transform: uppercase; background: #437ec6;  color: #FFFFFF; -webkit-transition: all 0.3 ease; transition: all 0.3 ease;}
#Administration .form button:hover,#Administration .form button:active,#Administration .form button:focus {background: #3568a1;}
#Administration .form .message {margin: 15px 0 0; color: #b3b3b3; font-size: 12px;}
#Administration .form .message a {color: #437ec6; text-decoration: none;}

#Administration .notification {position:absolute; top:15px; width:340px; color:#ffffff; padding:10px;}

#Administration #Footer {text-align:center; margin:0 auto 0;}
#Administration #Footer .copyright {text-align:center; margin: 10px 0 10px 0;}

#Update img {text-align:center; width:220px;}
#Update hr {border-top:1px solid #FFFFFF; margin:2px;}
#Update {width:220px; text-align:center; margin:0 auto 0; color:#c0c0c0; position:absolute; bottom:15px; left:20px;}

/* === Basics === */
.ZoneTexte, .Bloc {background:#FFFFFF; padding:40px; box-shadow:0px 0px 10px #c0c0c0; margin-bottom:40px;}
.Bloc {padding:0; border-top:4px solid #9ea7af; border-bottom:4px solid #9ea7af; }
.Bloc p {padding:20px;}
.clear {clear: both;}
.small {font-size:12px;}
.flex {display:flex;}
.hidden {display:none;}
.italic {font-style: italic;}

button, input[type=submit] {cursor:pointer;}

table {
  background: #FFF;
  border-collapse: collapse;
  margin: 0 auto 20px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

th {
  color:#C0C0C0;
  background:#3e424d;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:17px;
  font-weight: 100;
  padding:10px 10px 10px 15px;
  text-align:left;
  vertical-align:middle;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
}

tr:hover td {
  background:#F5F5F5;
  color:#666666;
}

tr a {color:#666B85;}



td {
  background:#FFFFFF;
  padding:10px 10px 10px 15px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:15px;
  /*border-right: 1px solid #C1C3D1;*/
  border-right:none;
}

tr:first-child {border-top:4px solid #9ea7af;}
tr:last-child {border-bottom:4px solid #9ea7af;}
td:last-child {border-right: 0px;}
th:last-child {border-right:none;}

/*
tr:nth-child(odd) td {background:#EBEBEB;}
tr:nth-child(odd):hover td {background:#D4D6D8;}
*/

th.text-left, td.text-left {text-align: left;}
th.text-center, td.text-center {text-align: center;}
th.text-right, td.text-right {text-align: right;}


/* Custom Select */
.select_basic, .owEdit-select_basic {
  position: relative;
  display: block;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #ffffff;
  overflow: hidden;
  border-radius: .25em;
	color:#666B85;
	padding:0;
	margin:0 25px 0 0;
}

.owEdit-select_basic {margin:2px 0 0 0; border:1px solid #ccc; border-radius: 0; width:99%;}

select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
	background: #ffffff;
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
/* Arrow */
.select_basic::after, .owEdit-select_basic::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em;

  pointer-events: none;
}
/* Transition */
.select_basic:hover::after, .owEdit-select_basic:hover::after {
  color: #3478B3;
}
.select_basic::after, .owEdit-select_basic::after {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

/* Cusotm checkbox */
input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
	display:none;
}

label.checkbox {
	cursor: pointer;
	text-indent: -9999px;
	width: 25px;
	height: 15px;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}

label.checkbox:after {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	width: 13px;
	height: 13px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

input:checked + label.checkbox {
	background: #bada55;
}

input:checked + label.checkbox:after {
	left: calc(100% - 1px);
	transform: translateX(-100%);
}

label.checkbox:active:after {
	width: 8px;
}

/* Install.css */




.language, h3, h4 {margin-bottom:20px;}
h6 {font-size:20px;}