/* MAIN */
* {margin: 0 auto; box-sizing: border-box; }
body {background-color: #f6f6f7; color: #1e2330; font-family: 'Open sans', sans-serif;}

h1 {font-size: 2.3rem; margin-bottom: .75rem;}

.xxs {max-width: 320px !important;}
.xs {max-width: 480px !important;}
.s {max-width: 576px !important;}
.m {max-width: 768px}
.l {width: 992px;}
.xl {width: 1200px;}
.xxl {width: 1400px;}

hr {width: 100%; margin-top: 1rem; margin-bottom: 1rem; border: 1px solid #eee;
display: inline-block;}

footer {width: 100%; height: 5rem; display: inline-block; }
/* SECTION */

section {max-width: 990px; margin-top: 1rem;}
section {width: 96%; margin-bottom: 5rem; }

section .panel {background: #fff; padding: 1rem;      
box-shadow: 0 16px 16px -8px rgb(108 121 136 / 5%);
border-radius: 0px; overflow: auto;}

section .panel.no-padding {padding: 0;}     

.shadow {width: 100%; background-color: #000000b0; position: fixed; height: 100vh;
top: 0; left: 0; display: none; z-index: 9;}

.toggle-menu {width: 100%; overflow: auto; display: flex;  margin-bottom: 1rem;
align-items: stretch }
.toggle-menu::-webkit-scrollbar {
    display: none;
}
.toggle-menu a {padding: .5rem 1rem; border-bottom: 2px solid #ddd;  flex: 1;
text-decoration: none; color: #000;}
.toggle-menu a:hover, .toggle-menu a.active {border-bottom: 2px solid #c8d600; font-weight: 600;}
.toggle-panel {display: none;}
.toggle-panel.active {display: block;}

.notification {width: 100%; padding: .7rem; font-size: .9rem; text-align:center; float:left; margin-bottom: 1rem;}
.notification i {margin-right: .5rem;}
.notification.info {background: #e6e9ff; color: #3744b9;}
.notification.warning {background: #fff2c7; }


.message {width: 100%; padding: .7rem; font-size: 1rem; 
text-align:center; float:left; margin-bottom: 1rem;}
.message i {margin-right: .5rem;}
.message.info {background-color: #e6e9ff; color: #3744b9;}
.message.success {background-color: #cbffec; border: 2px solid #2ee69f;}

.textlink {
    border: none;
    border-bottom: 2px solid #c8d600;
    text-decoration: none;
    display: inline;
    color: inherit;
    line-height: 1.7;
}
.remember-me {width: 100%; float:left; }
.lost-password {width: 100%;  float: left; text-align:right; text-decoration: underline; }

/* LISTS */

ul {list-style-type:none;  padding: 0;}
ol {list-style-type:none;  padding: 0;}
li {float:left; margin:0;}

ol.number {padding-left: 1rem; }
ol.number li {list-style-type: number; float: none; margin-bottom: .3rem; padding-left: .5rem;}
ul.disc li {list-style-type: disc; }
/* NAVIGATION */

nav.navigation ul {width: 100%; display: inline-block; margin-bottom: 1rem; }
nav.navigation ul li:after {content: "\e98c"; font-family: icomoon; padding: 0 1rem;}
nav.navigation ul li:last-child:after {content: "";}

/* NAV */

nav.main-menu ul {width: 30%; height: 100%; position: fixed; top: 0; right: 0;
background: #fff; transform: translate3d(100%, 0, 0px); transition: all .4s ease;
padding-top: 1rem; z-index: 9999; display: none; overflow: auto;}
nav.main-menu ul li {width: 100%; font-weight: 400;
font-size: 1.2rem; border-bottom: 1px solid #eee; padding: 1.2rem 1rem;}
nav.main-menu ul li.logout {margin-top: 3rem;}
nav.main-menu ul a {color: #000;}
nav.main-menu ul a:hover {color: #c8d600;}
nav.main-menu ul li i {color: #000; font-size: 2rem; vertical-align: middle; margin-right: 1rem; }

nav.header {background: #1e2330; color:#fff; width: 100%; padding: .3rem 2rem; display: inline-block;}
nav.header .logo {width: 50%;  max-width: 190px; float:left;}
nav.header .menu {float:right;}
nav.header .menu a {text-decoration: none;}
nav.header .menu .icon i {font-size: 3rem; vertical-align:middle;  color: #fff;  }
nav.header .menu .icon.profile i {font-size: 2rem; }
nav.header .menu i:hover  {color: #c8d600;}

@media only screen and (max-width: 768px) {
    nav.main-menu ul {width: 70%;}
	nav.header .logo {width: 150px;}
	nav.header {padding: .0rem .5rem; }
	nav.header .menu .icon i {font-size: 2.5rem;}
	nav.header .menu .icon.profile i {font-size: 1.7rem; }
	
}	

/* DROPDOWN */

.dropdown {width: 100%; position: relative; float:left; font-weight: 600; font-size: 1.2rem;
    border-bottom: 3px solid #c8d600; padding: 1rem; margin-bottom: 1rem;}
.dropdown i {font-size: 2rem; float:right;}
.dropdown-content {width: 100%; display: none; position: absolute;
background: #fff; box-shadow: 0 10px 20px 0px rgb(108 121 136 / 20%);
     z-index: 999; top: 100%; left: 0; border-bottom: 3px solid #c8d600; }
.dropdown .dropdown-content a {width: 100%; font-size: 1.1rem;
 padding: 1.5rem 1rem; font-weight: 400; float:left; border-bottom: 2px solid #eee;}
.dropdown-content a:hover {color: #000; border-bottom: 2px solid #c8d600;}

/* EMOJI PICKER */

.emoji-picker {position: absolute; top: 2rem; right: 0; max-width: 300px; 
max-height: 200px; overflow: auto; border-radius: 4px; border: 2px solid #eee; z-index:999;
padding: .5rem; background-color: #fff; display: none; box-shadow: 0 16px 16px -8px rgb(108 121 136 / 20%); }
.emoji-picker i {font-size: 1.75rem; width: 12.5%; text-align:center; float:left; font-style: normal;}
.show-emoji-picker {position: absolute; opacity: .5; bottom: 1rem; right: 0; font-size: 1.5rem;}
.emoji-menu {width: 100%; float:left;}

/* JS */

    #js-info {padding: 1rem 3rem;
    display: block; font-size: .9rem;
        border-radius: 4px;
    position: fixed; display: none;
    left: 1%;
    bottom: 2%; z-index:99999;
    background: #1e2330; color: #fff;
    }
    #js-info.error {background: red; color: #fff;}
    #js-info i {margin-right: .5rem;}
    
    .error-tip {font-size: .9rem; color: #e91e63; margin-top: .5rem;}
    .error-tip i {margin-right: .5rem;}
/* FORM */

input, .login button {width: 100%;}
input[type="checkbox"].checkbox  {display: none;}

input[type="checkbox"].checkbox + label i {font-size: 1.4rem !important; 
vertical-align:middle; z-index: 1; position: relative; margin-right: .3rem; margin-top: -.1rem;
    float: left;}
input[type="checkbox"].checkbox + label {font-weight: 400;}
input[type="checkbox"].checkbox:checked + label i:before{content: "\e9bb" !important; color: #40d840; }
input[type="checkbox"].checkbox:hover + label i:before{ color: #222; }
input[type="checkbox"].checkbox:active + label i:before{content: "\ea53" !important; color: #54566d; }

input[type="text"], input[type="password"], input[type="email"] {width: 100%; padding: 1.5rem .3rem .3rem .3rem;  
font-size: 1.1rem; background: transparent; border: none; color: #1e2330;
outline: none; border-radius: 0; border-bottom: 1px solid #1e2330;  
-webkit-appearance: none; font-weight: 700; font-family: 'Open sans', sans-serif;
}

form.form {width: 100%; float:left;}
form .firstname {width: 49%; margin-right: 1%; float:left;}
form .lastname {width: 49%; margin-left: 1%; float:left;}
form .postal-code {width: 29%; margin-right: 1%; float:left;}
form .place {width: 69%; margin-left: 1%; float:left;}
form .latitude {width: 49%; margin-right: 1%; float:left;}
form .longitude {width: 49%; margin-left: 1%; float:left;}
form input[type="time"] {font-size: 1rem; font-family: inherit; }

textarea {width: 100%; padding: 1.2rem; padding-bottom: .3rem;
font-family: inherit; font-size: 1rem;  padding-left: .5rem;  background: transparent; border: none;
outline: none; border-radius: 0; border-bottom: 1px solid #000;  -webkit-appearance: none; font-weight: 400;
}
textarea::placeholder {color: #333;}

form.form .tip {padding: .5rem 0; width: 100%; float:left; font-size: .8rem; background: #fff;}


.input-wrapper {width: 100%; position: relative;  border-radius: 0;
    transition: all .4s ease-in-out; float: left; margin-bottom: 1rem;
    z-index: 1; 
}

 
.input-wrapper input:focus, .input-wrapper textarea:focus {background: #fffbeb; 
    box-shadow: 0 3px #ebb400; border-bottom: 1px solid transparent; transition: .2s; z-index: 1;}

.input-wrapper  > p {
    position: absolute;
    top: 1rem;
    left: .3rem;
    font-size: 1.1rem;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

.input-wrapper input:focus~p, .input-wrapper input:not(:placeholder-shown)~p {
    opacity: .8;
    z-index: 1020;
    transform: scale(.8) translateY(-1rem);
    }

.input-wrapper input::placeholder {
      color: transparent;
}

.input-wrapper input:read-only { border-bottom: 0;  color: #7c858d;     cursor: not-allowed;}
.input-wrapper input:read-only {color: #adb5bd; background: #fff; border-bottom: 1px solid #adb5bd;}
.input-wrapper input:read-only + p {color: #adb5bd;  }
.input-wrapper input:read-only:focus {box-shadow: none;} 

.input-wrapper > i {position: absolute; right: 5%; top: 20%; font-size: 1.5rem;}

.input-wrapper.postal-code {max-width: 29%; margin-right:1%;}
.input-wrapper.place {max-width: 69%; margin-left: 1%;}

.input-wrapper.firstname {max-width: 49%; margin-right:1%;}
.input-wrapper.lastname {max-width: 49%; margin-left: 1%;}

    button {padding: .75rem 2rem; font-family: inherit;
    font-size: 1rem; font-weight: 600; width: 100%; transition: .4s;}
    button:active {transform: scale(.8);}
    
    button:disabled {background-color: transparent !important; color: #000 !important; border: 2px solid #000 !important; }
    
    .btn-black-outline {background-color: transparent; color: #1e2330; border: 2px solid #1e2330; }
    .btn-black {background-color: #1e2330; color: #fff; border: 2px solid #1e2330; }
	.btn-green {background-color: #c8d500; color: #1e2330; border: 2px solid #c8d600;}

	.btn-admin {background-color: #e91e63; color: #fff; border: 2px solid #e91e62;}



label.checkbox {position: relative; width: 100%; font-size: 1rem; margin-bottom: 1.5rem;
display: inline-block; }
label.checkbox input[type="checkbox"] {
	display: none;
}

label.checkbox span {border: 3px solid #000; height: 1.5rem; 
width: 1.5rem; float:left; margin-right: .75rem; border-radius: 4px;
position: relative;}

label.checkbox input[type="checkbox"]:checked + span {background: #000; color: #fff;}
label.checkbox input[type="checkbox"]:checked + span:after {
position: absolute; font-family: "icomoon"; content: "\ea2d" !important;
font-size: 1.1rem; font-weight: 900;
}
label.checkbox.no-margin {margin-bottom: 0;}

.checkbox-label {margin-bottom: 1rem; font-weight: 600;}


/* COMPANY */

.company .opening-hour {width: 100%; padding-bottom: 1rem; float:left;   padding: 0.5rem 0;
border-bottom: 1px solid #eee; }
.company .opening-hour .opening-hour-day {width: 30%; padding-top: .3rem; float:left;}
.company .opening-hour .opening-hour-open {width: 20%; padding-left: .5rem; padding-top: .3rem;float:left; }
.company .opening-hour .opening-hour-time {width: 50%; float:left;}
.company .opening-hour .opening-hour-time input[type="time"]{width: 40%; padding: 0.2rem 0.3rem;}

.company .user {width: 100%; padding: .75rem 1rem; float:left;  border-bottom: 1px solid #eee;}
.company .user:first-child:hover{background: transparent;}
.company .user:hover {background: #eee; }
.company .user .name {width: 80%; float:left; }
.company .user .name a {color: #000;}
.company .user .email {width: 40%; float:left;}
.company .user .edit {width: 10%; text-align: right; float:right;}

/* DIALOG */

 .dialog { position: fixed;
     z-index: 999; color: #000; padding: 2%;
     left: 0; top: 0; width: 100%;
     height: 100%; text-align:left;
     overflow: hidden; background-color: rgba(0,0,0,0.5);
    -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; 
    transition: all .4s ease-in-out; display: none;
}


.dialog-frame {
	background-color: #fff;
   	position: absolute;
    margin: auto; width: 60%; max-width: 768px;
    transition: .2s; text-align:left;
    max-height: 100vh; top: 10vh;
    left: 50%; transform: translate(-50%, 0%);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
	margin-top: auto;
	overflow-y: auto;
	overflow-x: hidden;
}
.dialog-frame .dialog-action {width: 100%;}

.dialog-header {padding: 1rem; font-size: 1.3rem; font-weight: 600;}
.dialog-content {width: 100%;  padding: 1rem 1rem; float:left; padding-bottom: 1rem;}
.dialog-close {position: absolute; right: 1rem; font-size: 2rem; top: 1rem;}
.dialog-close:hover {color: #c8d500;}

.dialog-action { width: 100%; margin-top: 2rem; float:left;}
.dialog-action .dialog-abort {width: 30%; float:left; padding: .75rem 1rem; }
.dialog-action .dialog-confirm {width: 40%; float:right; padding: .75rem 0;}

@media only screen and (max-width: 600px) {
    .dialog-frame {width: 95%;}    
}