@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-RegularItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

body {
    font-family: 'Muli';
}

h1 {
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #191919;
}

.form-control {
    height: auto;
    margin-top: 1rem;
}
.mobile-body {
    background: #f6f6f6;
    /*background: #5c3ca0;*/
}
.top-big-logo {
    text-align: center;
}
.top-big-logo img {
    max-width: 240px;
}

/* LOGIN */
.login-box {
    margin-top: 5px;
    margin-bottom: 5px;
}
.input-login, .input-numbers {
    text-align: center;
    padding: 6px 0;
}
.label {
    margin: auto;
    font-size: 1.2em;
    color: #434343;
}
.single-nb {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 5px 0 5px 0;
    background-color: #ffffff;
    border-radius:100%;
    padding-top: 0;
    font-size: 1.4em;
    font-weight: bold;
}
.single-nb.code {
    margin: 5px;
    width: 55px;
    height: 55px;
    font-size: 2.7em;
    font-weight: bold;
}
.point {
    display: inline-block;
    width: 1px;
    margin: -2px;
    font-weight: bold;
    color: #999999;
}
.auto-margin {
    margin: auto;
}
.keyboard-numbers {
    text-align: center;
    margin: 10px 0 60px 0;
    font-size: 0;
}
.keyboard-nb {
    font-size: 28px;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0;
    color: #fff;
    background-color: #434343;
    border: 1px solid #0f0f0f;
    padding-top: 8px;
}
.btn-primary, .btn-primary.active {
    background-color: #434343 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    width:100%;
    height: 60px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    padding-top: 20px;
}
.btn-primary:active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active:focus, .btn-primary:active.focus,
 .btn-primary:active:hover,
 .btn-primary.active:focus, .btn-primary.active:hover {
    background-color: #0f0f0f !important;
    opacity: 1;
}
.btn-primary.valid-continue {
    padding-top: 13px;
    width: 50%;
    left: 0;
    border-right: 1px solid #f6f6f6;
}
.btn-primary.valid-stop {
    padding-top: 10px;
    width: 50%;
    right: 0;
    left: unset;
}

.btn-primary:not(.active) {
    pointer-events: none;
    opacity: 0.2;
}

/* HOMEPAGE */
.home-page .wrapper,
.documents-page .wrapper,
.worked-hours-page .wrapper
{
    padding: 20px;
    height: 100%;
}

.home-h1 {
    padding-top: 60px;
}
.home-page .top-big-logo {
    padding: 20px auto;
}
.home-menu-icon {
    text-align: center;
    font-size: 40px;
    height: 50px;
}
.btn-std {
    background-color: #f6f6f6;
    color: #191919;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    width:100%;
    height: 90px;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding-top: 8px;
    border-top: 1px solid #e3e3e3;
}
.btn-std:active, .btn-std:hover, .btn-std:focus, .btn-std:active:focus,
.btn-std:active:hover,
.btn-std.active:focus, .btn-std.active:hover {
    background-color: #434343;
    color: #f6f6f6;
}
.btn-std.pos1 {
    bottom: 60px;
}
.btn-std.pos2 {
    bottom: 150px;
}

/* Header et Menu des étapes */
.header {
    background-color: #434343;
}
.top-line {
    color: #ffffff;
    display: inline-block;
    width:100%;
}
.top-home {
    display: inline-block;
    color: #fff;
    background-color: #363636;
    border-radius: 100%;
    font-size: 18px;
    padding: 8px 11px;
    margin: 10px 5px 10px 10px;
    width: 40px;
    height: 40px;
}
.icon-maison {

}
.top-small-logo {
    display: inline-block;
    color: #fff;
    font-size: 18px;

}
.select-title {
    color: #fff;
    float: right;
    margin: 8px 10px 0 0;
    vertical-align: top;
}
.select-name {
    vertical-align: top;
    display: inline-block;
    font-size: 30px;
    padding: 0;
}
.step-name {
    vertical-align: top;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 0 0 0;
    margin: 0 0 0 0;
}
.top-menu-container {
    width: 100%;
    padding-bottom: 10px;
}
.top-menu {
    height: 40px;
    margin: 0 20px ;
    border-radius: 40px;
    background-color: #363636;
    text-transform: uppercase;
    font-size: 11px;
}
.menu {
    height: 40px;
    display: inline-block;
    width: 33%;
    /*border: 0;*/
    padding: 12px 20px;
    /*margin: 0;*/
    color: #747474;
    text-align: center;
}
.menu.media {
    width: 50%;
    margin-top: 0;
}
.menu.active {
    background-color: #ffb343;
    color: #fff;
    border-radius: 40px;
}

/* step 1 : chantiers */
.content, .step-page .wrapper {
    margin: 0;
    padding: 0;
}
#next-step.active {
    color: #ffb343;
    background-color: #434343;
}
.construction-site-list {
    list-style: none;
    padding-left :0;
    margin-bottom: 0;
    font-size: 12px;
}
.construction-site-list .reference {
    padding-top: 3px;
    font-weight: bold;
}
.construction-site-list li {
    padding: 7px 20px;
    height: 52px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #e3e3e3;
    cursor: pointer;
}
.construction-site-list li:hover,
.construction-site-list li.active {
    background-color: #ffffff;
}
.construction-site-list li:hover .check-container, .iradio_square-blue.checked,
.construction-site-list li.active .check-container {
    background-color: #ffb343;
    color: #ffffff;
}
.check-container, .iradio_square-blue {
    float: left;
    border-radius: 100%;
    border : 1px solid #eaeaea;
    font-size: 18px;
    padding: 8px 8px;
    margin: 0 20px 0 0;
    width: 38px;
    height: 38px;
}
.check-container .icon  {
    vertical-align: 10%;
}

.icon.icon-volant {
    vertical-align: -2%;
}

.iCheck-helper {
    border: 0 !important;
}
.iradio_square-blue {
    background-image: none;
    padding: 6px 8px;
}
.iradio_square-blue:after {
    font-family: 'coanus' !important;
    content: "\e900";
    color: #333;
}
.iradio_square-blue.checked:after {
    color: #FFF;
}
.construction-site-list label {
    display: block;
    padding-top: 3px;
    font-size: 12px;
    text-transform: uppercase;
}

/* STEP2 : DAY */
.day-list {
    list-style: none;
    padding-left :0;
    margin-bottom: 0;
    font-size: 12px;
    height: 340px;
}
.day-list li {
    display: inline-block;
    width: 14.28%;
    background-color: #f6f6f6;
    margin-bottom: calc(5px +  15 * (100vh - 500px) / 300);
}

.day-list li.day-validated {
    display: inline-grid;
}

.day-list li .day-container-box {
    /*display: inline-block;*/
    text-align: center;
    /*padding: 20px 8px 0 8px;*/
    padding: 5px 1px 0 4px;
    height: 45px;
}
.day-list li.active .day-container {
    background-color: #ffb343;
    color: #ffffff;
}

.day-container {
    text-align: center;
    /*float: left;*/
    border-radius: 100%;
    font-size: 11px;
    padding: 10px;
    padding-top: 12px;
    /*margin: 0 20px 0 0;*/
    margin: auto;
    width: 38px;
    height: 38px;
    /*position:relative;*/
    background-color: #fff;
  }
.day-container.today {
    border : 1px solid #313335;
}
.day-container.has-data {
    background-color: #313335;
    color: #fff;
}
.day-container.today.has-data {
    border : 1px solid #ffb343;
}
.day-container .validated {
    border-radius: 100%;
    background-color: #ffb343;
    position: relative;
    padding: 1px 1px;
    bottom: 32px;
    left: 12px;
    z-index: 1000;
}

.construction-site-subtitle {
    font-weight: bold;
    text-align: center;
    padding: 7px 20px;
}
.step2 .month-subtitle {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding: 12px 20px;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    text-transform: capitalize;
}

.step2 .month-subtitle a.prev {
    padding: 0 20px 0 0;
}
.step2 .month-subtitle a.next {
    padding: 0 0 0 20px;
}
.day-label {
    display: inline-block;
    padding: 20px 8px 0 8px;
    /*height: 35px;*/
    text-align: center;
    width:100%;
}

.step2-msg-ok, .step2-msg-error {
    padding: 0 10px;
    border-top: 1px solid #e3e3e3;
    background-color: #0dad28bf;
}
.step2-msg-error {
    background-color: #bd3231;
    color: #fff;
}


/* step 3 : employés */
.step3 .construction-site-subtitle {
    padding-bottom: 0;
}
.day-subtitle {
    font-weight: bold;
    text-align: center;
    padding: 1px 20px 5px 20px;
    border-bottom: 1px solid #e3e3e3;
}
.employee-list {
    list-style: none;
    padding-left :0;
    margin-bottom: 0;
    font-size: 14px;
}
.employee-li {
    border-bottom: 1px solid #e3e3e3;

}
.employee-li-div {
    display: block;
    height: 52px;
    background-color: #f6f6f6;
}
.employee-li-div.active {
    background-color: #ffffff;
}
.employee-li-div.active .check-container {
    background-color: #ffb343;
    color: #ffffff;
}

.employee-li-div .container-identity{
    width: 30%;
}

.employee-li-div .name-container {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.is-driver {
    margin: 0 5px 0 10px;
    padding: 3px 6px 0 6px;
    display: inline-block;
    font-size: 24px;
    border-radius: 100%;
    vertical-align: -12%;
}
.is-driver.active {
    background-color: #ffb343;
    color: #ffffff;
}

.is-long-travel {
    display: inline-block;
    width: 51px;
}

.employee-family-name, .employee-given-name, .employee-hours {
    display: inline-block;
}

.employee-family-name {
    text-transform: uppercase;
    font-weight: bold;
}
.step-message {
    padding: 20px;
    text-align: center;
}
.employee-li {
    position: relative;
}
.employee-hours-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    background-color: #ffffff;
    position: relative;
}

.employee-hours-container.validated-container {
    /*background-color: #f6f6f6;*/
    /*background-color: #434343;*/
    background-color: #a6a6a645;
    color: #fff;
}

.employee-hours {
    position: relative;
    padding:0;
    margin: 0;
}
.employee-li .validated {
    border-radius: 100%;
    background-color: #ffb343;
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 90;
    font-size: 12px;
    text-align: center;
}

.employee-li .employee-hours-container .validated {
    padding: 1px 1px;
    top: -6px;
    right: -9px;
}

.employee-validated-options .validated {
    font-weight: bold;
    font-size: initial;
    display: inline-block;
    position: relative;
    padding: 3px 0 0 0;
    background: none;
}

.container-employee-validated-options{
    width: 20%;
}

.footer.hours-step3 {
    height: 60px;
}

/*Rotate plane icon */
.employee-validated-options .validated.reverse {
    transform: scale(-1, 1);
}

.employee-validated-options {
    list-style: none;
    padding-left: 0;
}

.employee-li.validated .check-container {
    background-color: #ffb343;
}

.container-panel{
    position: absolute;
    z-index: 99;
    top: 0;right: 0;left: 0;
    background-color: rgba(255,255,255,1);
    display: flex;
    border: 1px solid #0f0f0f;
}

.hours-keyboard-container,
.hours-bad-weather-keyboard-container,
.night-hours-keyboard-container{
    margin-bottom: 50px;
}

.container-panel .timesheet-options-container{
    position: relative;
    width: 19%;
    z-index: 99;
    border-right: none;
    display: flex;
    justify-content: center;
    background-color: rgba(255,255,255,1);
}

.container-panel > div{
    width: 50%;
}

.container-panel .timesheet-options-container .timesheet-options{
    padding: 0;
    margin-top: 19px;
}

.container-panel .timesheet-options-container .timesheet-options > li{
    text-align: center;
}

.container-panel .block-time{
    position: relative;
    z-index: 99;
    border-right: none;
    background-color: rgba(255,255,255,1);
}

.container-panel .block-time .header-title{
    text-align: center;
}
.container-panel .block-time .flex-hours{
    display: flex;
    justify-content: space-around;
}
.container-panel .block-time .flex-hours > ul {
    width: 50%;
    padding: 0;
    margin: 0 auto;
}

.container-panel .block-time .flex-hours > ul > li {
    text-align: center;
    margin: 10px auto;
}

/*.hours-keyboard,*/
/*.go-travel-time-hours-keyboard,*/
/*.back-travel-time-hours-keyboard{*/
/*    z-index: 99;*/
/*    text-align: center;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 80px;*/
/*    padding: 0;*/
/*}*/

/*.minutes-keyboard,*/
/*.go-travel-time-minutes-keyboard,*/
/*.back-travel-time-minutes-keyboard{*/
/*    z-index: 99;*/
/*    text-align: center;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 20px;*/
/*    padding: 0;*/
/*}*/

/*.timesheet-options {*/
/*    z-index: 99;*/
/*    text-align: center;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 20px;*/
/*    padding: 0;*/
/*}*/

/*Rotate plane icon */
.long-travel-back .icon-ticket {
    display: inline-block;
    transform: scale(-1, 1);
}

.timesheet-option .icon {
    font-weight: bolder;
    font-size: x-large;
}

.timesheet-option .label-icon {
    display: flex;
    justify-content: center;
    padding-top: 5px;
    font-size: smaller;
    color: black;
}

.hours-keyboard-hours, .hours-keyboard-minutes, .timesheet-option, .hours-bad-weather-keyboard-hours, .hours-bad-weather-keyboard-minutes, .night-hours-keyboard-hours, .night-hours-keyboard-minutes {
    border-radius: 0;
    display: block;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #434343;
    border: 1px solid #0f0f0f;
    font-size: 16px;
    padding-top: 8px;
}

.timesheet-option-separator {
    display: block;
    position: relative;
    top: 2px;
    width: 40px;
    border-top: solid 1px #0f0f0f;
}

.timesheet-option {
    margin: calc((94vh - 440px)/12) 0 30px 0;
}

.hours-keyboard-hours, .hours-keyboard-minutes {
    margin: calc((94vh - 440px)/12) 0;
}

.hours-keyboard-hours:active, .hours-keyboard-minutes:active,
.hours-keyboard-hours.active, .hours-keyboard-minutes.active,
.hours-keyboard-hours:focus, .hours-keyboard-minutes:focus,
.hours-keyboard-hours:hover, .hours-keyboard-minutes:hover,
.timesheet-option.active {
    color: #0f0f0f;
    background-color: #ffb343;
    opacity: 1;
}

.hours-keyboard-hours:not(.enable), .hours-keyboard-minutes:not(.enable) {
    opacity: 0.2;
    pointer-events: none;
}

.hours-keyboard-hours, .hours-keyboard-minutes, .hours-bad-weather-keyboard-hours, .hours-bad-weather-keyboard-minutes, .night-hours-keyboard-hours, .night-hours-keyboard-minutes {
    margin: calc((94vh - 440px)/12) 0;
}

.hours-keyboard-hours.active, .hours-keyboard-minutes.active,
.hours-keyboard-hours:active, .hours-keyboard-minutes:active,
.hours-keyboard-hours:focus, .hours-keyboard-minutes:focus,
.hours-keyboard-hours:hover, .hours-keyboard-minutes:hover,
.hours-bad-weather-keyboard-hours.active, .hours-bad-weather-keyboard-minutes.active,
.hours-bad-weather-keyboard-hours:active, .hours-bad-weather-keyboard-minutes:active,
.hours-bad-weather-keyboard-hours:focus, .hours-bad-weather-keyboard-minutes:focus,
.hours-bad-weather-keyboard-hours:hover, .hours-bad-weather-keyboard-minutes:hover,
.night-hours-keyboard-hours.active, .night-hours-keyboard-minutes.active,
.night-hours-keyboard-hours:active, .night-hours-keyboard-minutes:active,
.night-hours-keyboard-hours:focus, .night-hours-keyboard-minutes:focus,
.night-hours-keyboard-hours:hover, .night-hours-keyboard-minutes:hover,
.timesheet-option.active {
    color: #0f0f0f;
    background-color: #ffb343;
    opacity: 1;
}

.hours-keyboard-hours:not(.enable), .hours-keyboard-minutes:not(.enable),
.hours-bad-weather-keyboard-hours:not(.enable), .hours-bad-weather-keyboard-minutes:not(.enable),
.night-hours-keyboard-hours:not(.enable), .night-hours-keyboard-minutes:not(.enable) {
    opacity: 0.2;
    pointer-events: none;
}

.time-travel-column{
    display: flex;
    flex-direction: column;
    border-left: 1px solid #0f0f0f;
}

.time-travel-column > div{
    margin-bottom: 50px;
}

.hours-keyboard-container,
.hours-bad-weather-keyboard-container,
.night-hours-keyboard-container {
    border-left: 1px solid #0f0f0f;
}

.options-validation-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0f0f0f;
    border-top: none;
    width: 100%!important;
    height: 6vh;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
    background: #434343;
}

.options-validation-button a {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #b8c7ce;
}

.step1 .scrollable-zone {
    overflow-y: auto;
    height: calc(100vh - 170px);
}
.step2 .scrollable-zone {
    overflow-y: auto;
    height: calc(100vh - 261px);
}
.step3 .scrollable-zone {
    overflow-y: auto;
    height: calc(100vh - 250px);
}
.scrollable-zone:after {
    content:"";
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    display: block;
    /*height: 100px;*/
    width: 100%;
    position: absolute;
    bottom: 0;
}
.step2 .scrollable-zone:after {
    height: 50px;
}
.scrollable-zone.bottom:after {
    display: none;
}

/* MEDIA STEP2 : DAY */
.construction-site-list.media-category-list li {
    margin: 5px;
    width: auto;
}
.construction-site-list.media-category-list label {
    padding-top: 10px;
}
.media-upload {
    margin: 20px 5px 5px 5px ;
    width: auto;
    padding: 15px 20px 5px 20px;
}

.mobile-body .alert-success {
    background-color: #0dad28bf !important;
}

/* Security sheets - Construction Site documents */
.documents-page table {
    margin-top: 3rem;
    text-align: center;
}

.documents-page table th {
    background-color: #6c4d31;
    color: #ffffff;
    text-align: center;
    font-size: 1.5rem;
}

.documents-page table td span {
    font-size: 3rem;
}

.documents-page table td a {
    font-size: 1.5rem;
}

.documents-page table,
.documents-page thead > tr > th,
.documents-page th,
.documents-page td
{
    border-bottom: 1px solid black;
}

/* Worked hours */
.worked-hours-page h2 {
    text-align: center;
}

.worked-hours-page table {
    margin: 1rem;
    text-align: center;
}

.worked-hours-page table tr {
    background-color: #ffffff;
}

.worked-hours-page table tr:nth-child(2n+1) {
    background-color: #C5C5C5;
}

.worked-hours-page table td {
    width: 50%;
}