body {
    box-sizing:border-box;
    margin:0; 
    padding:0; 
    line-height:17px; 
    font-size:12px;
}


.active_user_list {  }

.disable_user_list { 
    color:#c3c3c3; 
}

div.topbar {
    height:50px; background-color:#f8f8f8; 
    border-bottom:1px solid #e7e7e7; 
    padding: 13px 15px 50px;
}

div.topbar div.logo {
    padding: 0px 50px 0px 0px; 
    float:left;
}

div.topbar div.logo em{color:#ccc; text-shadow:1px 1px 1px #fff, -1px 0px 1px #fff; font-size:18px;}
div.topbar nav{margin:0; float:left;}
div.topbar nav ul{margin:0; padding:0; list-style:none; display:flex;}
div.topbar nav ul li{}
div.topbar nav ul li.hide{display:none;}
div.topbar nav ul li a{display:block; color:#000; padding:0 10px; text-decoration:none; line-height:44px; margin:2px; border:1px solid #ccc; background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); border-radius:5px;}
div.topbar nav ul li:not(.active) a:hover{border-color:#333;}
div.topbar nav ul li.active a{ background:#f3f3f3; border-color:#999; color:#bbb;}
div.topbar div.topbar-right{margin:0 20px; float:right;}
div.topbar div.topbar-right a.button{font-size:13px; padding:8px 25px; margin:7px 0;}

body.public div.topbar nav ul,
body.public div.topbar div.topbar-right a.button{display:none;}

main{display:flex; width:100%;}
main > aside{width:340px; min-height:calc(100vh - 87px); background:#f1f1f1; padding:15px 0; border-right:1px solid #E5E5E5;}
main > section{width:calc(100% - 340px);}

main > section > div#zone_admin_questions, main > section > div#zone_admin_clients{padding:50px 20px 70px 20px;}
main > section > div#zone_admin_questions h4, main > section > div#zone_admin_clients h4{font-size:18px; margin:0 0 20px 0;}
main > section > div#zone_admin_questions h4.main_menu, main > section > div#zone_admin_questions div.admin_questions.main_menu{display:none;}


/* Login */
div.login{width:320px; padding:70px 20px;}


/* Form */
a{color:#004EC0;}
p{color:#000;}
input[type="text"], input[type="password"]{font-size:20px;}
button, a.button, span.button, main button{font-size:20px;padding:10px 38px;}

div.button-space{margin-top:20px}

div.input-group{margin:5px 0;}
div.input-group input{display:inline-block; width:45%;}
div.input-group > button, div.input-group > .button-small{margin-top:0 !important;}

div.input-group-check{margin:5px 0; display:flex; justify-content:space-between}
div.input-group-check input:first-child{width:25px;}
div.input-group-check input{width:calc(100% - 30px);}

div.input-group-equal{margin:5px 0; display:flex;}
div.input-group-equal > *{flex:1}


/* Alerts */
.alert{padding:10px; border-radius: 10px;}
.alert.alert-error{background-color:rgba(255, 177, 177, 0.2);}
.alert.alert-error, .alert.alert-error *{color:#FF3300;}

/* Liste questions */
.hide_menu_cat_btn {display: none !important;}

main > section ul.liste_questions{list-style:none; margin:20px 0 0 0; padding:0;}
main > section ul.liste_questions li:first-child > div{border-top:1px solid #ddd;}
main > section ul.liste_questions li > div{border-bottom:1px solid #ddd; padding:5px 10px; cursor:pointer; transition:all 0.3s; position:relative;}
main > section ul.liste_questions li.selected > div{background:rgba(255, 255, 255, 0.5);}
main > section ul.liste_questions li > div:hover{background:rgba(0, 0, 0, 0.1);}

main > section ul.liste_questions li > div span.label{background:rgba(0, 0, 0, 0.1); border-radius:5px; padding:4px;}

main > section ul.liste_questions li > div > p.cmd{display:none; position:absolute; right:-4px; top:-1px; height:25px; background:rgba(255,255,255,0.9);box-shadow:0px 0px 2px #aaa; text-align:right}
main > section ul.liste_questions li.selected > div > p.cmd{display:block;}

span.cmd:not(.button){display:inline-block; width:20px; height:23px; line-height:23px; margin:1px; transition:background-color 0.3s; opacity:0.4; background-size:18px; background-repeat:no-repeat; background-position:center;}
span.cmd:hover{background-color:rgba(0, 0, 0, 0.1); background-size:20px; opacity:1;}

span.cmd.cmd_up_first{background-image:url(../../img/elements/admin/arrow_up_first.png);}
span.cmd.cmd_up{background-image:url(../../img/elements/admin/arrow-up-bold.svg);}
span.cmd.cmd_down{background-image:url(../../img/elements/admin/arrow-down-bold.svg);}
span.cmd.cmd_down_last{background-image:url(../../img/elements/admin/arrow_down_last.png);}
span.cmd.cmd_new{background-image:url(../../img/elements/admin/plus.svg);}
span.cmd.cmd_edit{background-image:url(../../img/elements/admin/lead-pencil.svg);}
span.cmd.cmd_supprimer{background-image:url(../../img/elements/admin/delete.svg);}
span.cmd.cmd_duplicate{background-image:url(../../img/elements/admin/content-duplicate.svg);}


/* Admin menu */
aside ul.admin_menu, aside ul.admin_menu{list-style:none; margin:0; padding:0;}
aside ul.admin_menu li{}
aside ul.admin_menu li > div{border-bottom:1px solid #ddd; padding:5px 10px; cursor:pointer; transition:all 0.3s; position:relative;}
aside ul.admin_menu li.selected > div{background:rgba(255, 255, 255, 0.5);}

aside ul.admin_menu li > ul > li > div{padding-left:25px;}
aside ul.admin_menu li > ul > li > ul > li > div{padding-left:45px;}
aside ul.admin_menu li > ul > li > ul > li > ul {    margin-left: 15px !important; list-style-type: none; display: none;}
aside ul.admin_menu li > div:hover{background:rgba(0, 0, 0, 0.1);}

aside ul.admin_menu li > div > div.cmd{display:none; position:absolute; right:-4px; top:-1px; height:25px; background:rgba(255,255,255,0.9);box-shadow:0px 0px 2px #aaa; text-align:right}
aside ul.admin_menu li.selected > div > div.cmd{display:block;}

aside ul.admin_menu > li > div:first-child{font-weight:bold;}


/* Modal - colorbox */
div#cboxOverlay{background:#000; position:fixed; width:100%; height:100vh; top:0; left:0; z-index:9999; /*overflow:hidden;*/}
div#colorbox{border:1px solid black; box-shadow:0px 0px 3px 0 rgba(0,0,0,0.2); z-index:9999; /*overflow:hidden;*/ background:#eee; height:auto !important; width:auto !important; top:50px !important; left:50% !important; transform:translate(-50%);}
div#colorbox::after{display:block; content:''; clear:both;}
div#colorbox div#cboxWrapper{/*position:absolute;*/ top:0; left:0; z-index:9999; /*overflow:hidden;*/ height:auto !important; width:auto !important;}
div#colorbox div#cboxWrapper div#cboxMiddleLeft{height:auto !important;}
div#colorbox div#cboxWrapper div#cboxMiddleRight{height:auto !important;}
div#colorbox div#cboxWrapper div#cboxBottomCenter,
div#colorbox div#cboxWrapper div#cboxTopCenter{width:auto !important;}
div#colorbox div#cboxWrapper div#cboxContent{padding:1px 8px 8px 8px; border-top:1px solid #dadada; position:relative; background:#fff; overflow:visible; margin:34px 0 0 0; width:100% !important; height:auto !important;}
div#colorbox div#cboxWrapper div#cboxContent div#cboxLoadedContent{padding:1px; overflow:visible !important; height:auto !important;width:auto !important; display:inline-block;}
div#colorbox div#cboxWrapper div#cboxContent button#cboxClose{border:none; padding:0px; text-indent:-900px; overflow:hidden; background:url(../../img/elements/admin/close.svg) no-repeat center; right:10px; top:-32px; position: absolute; width:30px; height:30px;}

div#colorbox div#cboxWrapper div#cboxContent h4{font-size:18px; margin:15px 0 15px 0;}

/* Forms in Modal */
div#colorbox div#cboxWrapper div#cboxContent form{min-width:600px; width:600px; padding:10px 10px 10px 10px; display:block;}

div#colorbox div#cboxWrapper div#cboxContent form label{margin-bottom:5px;}
div#colorbox div#cboxWrapper div#cboxContent form input[type="text"], 
div#colorbox div#cboxWrapper div#cboxContent form input[type="password"], 
div#colorbox div#cboxWrapper div#cboxContent form input[type="number"], 
div#colorbox div#cboxWrapper div#cboxContent form input[type="tel"], 
div#colorbox div#cboxWrapper div#cboxContent form input[type="url"], 
div#colorbox div#cboxWrapper div#cboxContent form input[type="email"], 
div#colorbox div#cboxWrapper div#cboxContent form textarea, 
div#colorbox div#cboxWrapper div#cboxContent form select{font-size:12px; border-radius:5px; box-shadow:0px 1px 5px #ddd inset; padding:5px;}

div#colorbox div#cboxWrapper div#cboxContent form button{margin:20px 5px 0 0; font-size:13px;}

div#colorbox div#cboxWrapper div#cboxContent form button.cmd_annuler{border:2px solid #fff; background:#f5f5f5;}
div#colorbox div#cboxWrapper div#cboxContent form button.cmd_annuler:hover{background:#eee; border:2px solid #ddd;}
div#colorbox div#cboxWrapper div#cboxContent form button.cmd_valider{background:#004EC0; color:#FFF; background:linear-gradient(to bottom, #0070DE 0%,#004EC0 100%); box-shadow:inset 0px 2px 0px 0px #46A3FF; border:2px solid #000;}


/* Liste Questions in Modal */
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question{list-style:none; margin:20px 0 0 0; padding:0;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li:first-child > span{border-top:1px solid #ddd;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li > span{display:block; position:relative; white-space:nowrap; border-bottom:1px solid #ddd; padding:5px 100px 5px 10px; cursor:pointer; transition:background-color 0.3s; position:relative; background-image:url(../../img/elements/admin/plus.svg); background-size:20px; background-repeat:no-repeat; background-position:center right;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li > span div{display:none; box-shadow:0 0 5px rgba(0, 0, 0, 0.2); z-index:10; width:320px; position:absolute; bottom:-30px; left:230px; background:#fff; padding:8px;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li > span div img{width:0px; display:none;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li > span:hover{background-color:rgba(0, 0, 0, 0.1); background-size:22px;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li > span:hover div{display:block;}
div#colorbox div#cboxWrapper div#cboxContent ul#choix_type_new_question li > span:hover div img{width:100%; display:block;}

/* selecteur chart */
optgroup.main_group {font-size:1.1em; background-color: #AAAAFF;}
optgroup.sub_group {margin-left:5px; background-color: #CCCCFF;}
optgroup.sub_group::before {content: "Read this: "}
optgroup.sub_group > option {background-color: #FFFFFF;}

/* label chart */
text.active_label {font-weight: bold;}
text.clickable_label {cursor: pointer;}

/* admin page footer */
.admin_Footer {
	padding: 10px 20px;
	background-image: none;
	color: var(--dark-gray);
	font-weight: bold;
	font-size: 14px;
	height: 50px;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.admin_Footer p {
	color: var(--main-color);
	position: relative;
	bottom: 0px;
	text-align: left;
	margin-bottom: 10px;
	z-index: 1;
	margin-top: 10px;
}


.commandes span.button {
	border-radius: 50px;
	background: var(--main-color);
	border: 2px solid var(--main-color);
	box-shadow: none;
    font-weight: bold;
}

.commandes span.button:hover {
    background: #EDF9F5;
    color: var(--main-color);
}