@charset "utf-8";
/*
WEBAZERO

Feuille de style - ADMINISTRATION - WEBAZERO
Author : Steven Baratié - La coquille Web
Version : 2.0
*/

html, body{font-size: 14px;}
body{margin: 0; padding: 0; font-family: 'roboto-regular', sans-serif; background-color:#2A3036;}
h1, h2, h3, h4, h5, h6, p{margin-top: 0;}
aside, main, section{display: block;}
a{text-decoration: none; transition: 0.3s;}
.center{text-align: center;}
.full-screen{height: 100vh; display: flex;}
.all-middle{justify-content: center; align-items: center;}

/*
STRUCTURE ADMINISTRATION

/*HEADER*/
.header-zone{background-color: #353d45;}
.header-zone-inner{display: flex; align-items: center;}
.header-zone-inner > div{height: 50px;}
/*Logo*/
.webazero-logo-box{width: 170px; display: flex; justify-content: center; align-items: center; background-color: #3E4751;}
.webazero-logo{position: relative; top: -0.15em; width: 130px; height: auto;}
/*Barre de titre*/
.wbz-titlebar{padding: 0 1.5rem 0 1.5rem; display: flex; align-items: center;}
.wbz-titlebar h1{margin: 0; font-size: 1.1rem; font-family: 'roboto-bold'; color: #c5ccd3; text-transform: uppercase;}
/*Logout*/
.webazero-logout-box{position: absolute; top: 0; right: 0; flex-direction: flex-end;}

/*PAGES*/
.main-zone{position: relative; height: calc(100vh - 80px); display: flex;}
.main-menu{position: relative; width: 170px; background-color: #353d45; color: #c5ccd3; z-index: 111;}
.secondary-menu{position: fixed; top: 60px; right: 27px; width: 200px; min-height: 150px; background-color: #505c68;}
.content-zone{position: relative; width: 100%; max-width: calc(100% - 170px);}
.content-zone{overflow-y: scroll;}
.content-zone-inner{position: relative; padding: 10px;}
.editor-zone{width: calc(100% - 210px);}

/*Login*/
.logo-login{margin: auto; max-width: 200px;}
.wbz-remember-link{margin-top: 1.5rem;}
.wbz-remember-link a{font-size: 0.9rem; color: #ccc;}
.wbz-remember-link a:hover{color: #648761;}

/*MENU PRINCIPAL*/
.main-menu{padding: 1rem 0;}
.main-menu ul{position: relative; margin: 0; padding: 0; list-style: none; border-bottom: #2A3036 1px solid;}
.main-menu li{position: relative; border-top: #2A3036 1px solid;}
.menu-ico{width: 25px; display: inline-block;}
.main-menu a{padding: 1rem 1rem; font-size: 0.9rem; color: #c5ccd3; text-transform: uppercase; display: block;}
.main-menu a.current-menu{background-color: #72977e !important;}
.main-menu a:hover{background-color: #596673;}
.menu-level-1{z-index: 0;}
/*Sous-menu*/
.main-menu li.menu-parent .menu-toggable{position: absolute; top: -1px; left: 0px; width: 100%; background-color: #353d45; color: #c5ccd3; transition: 0.3s; opacity: 0; z-index: -1;}
.main-menu li.menu-parent:hover .menu-toggable{left: 170px; opacity: 1;}
.main-menu li.menu-parent .menu-toggable li a{text-transform: none;}

/*BOUTONS*/
.btn{padding: 0.8em 1.8em; border-radius: 0; border: none; text-transform: uppercase; display: block; transition: 0.3s;}
.btn-submit{cursor: pointer; display: initial;}
.btn-logout{padding: 0 1.5rem; height: 100%; background: linear-gradient(to bottom, #BF6060, #af4646); color: #fff; display: flex; justify-content: center; align-items: center; box-shadow: rgba(0,0,0,0.3) 0 0 10px; text-transform: uppercase; font-size: 0.8rem; transition: 0.3s;}
.btn-logout:hover{background: linear-gradient(to bottom, #CB7C7C, #af4646);}

/*FORMULAIRE*/
input:not([type=submit]){padding: 0.8em 1.2em; border: none; border-radius: 0;}
label{display: block;}
/*Login*/
.form-login{position: relative; padding: 1.5rem 2.5rem; background-color:rgba(255,255,255,0.5);}
.title-login{text-transform: uppercase; font-weight: 400; font-size: 1.2rem; color: #2A3036;}
.form-login label{display: none;}
.form-login input:not([type=submit]){width: 250px;}
.input-passw{position: relative; display: block;}
.check-pass{position: absolute; top: 0; right: 0; bottom: 0; width: 3em; border-left: #ccc 1px solid; background-color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s;}
.btn-login{font-size: 0.9rem; background-color: #50885f; color: #fff;}
.btn-login:hover{background-color: #7EB48D;}

/*FOOTER*/
footer{height: 30px; display: flex; background-color: #1a1a1a; color: #fff;}