html {
    font-size: 14px;
    box-sizing: border-box;
    padding-right: 0 !important;
    font-family: 'Roboto', sans-serif;
}

body {
    font-size: 1rem;
    padding-right: 0 !important;
    background-color: #fafafa;
}

body.signatureBody {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../img/fond-tablette.jpg') center center no-repeat;
    background-size: cover;
}

.titlePrefix {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    color: white;
    font-size: .6rem;
}

.titlePrefix.titlePrefix-DEV {
    display: block;
    background-color: darkred;
}

.titlePrefix.titlePrefix-STAGE{
    display: block;
    background-color: darkgoldenrod;
}

.signatureForm {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.signatureFond {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .4;
    z-index: 2;
}

.signatureAlert {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/*body.blue-gradient > main {*/
/*    min-height: 95vh;*/
/*}*/

img {
    width: 100%;
}

p {
    margin: 0;
}

a, a:hover, a:visited, a:focus {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.table td, .table th {
    vertical-align: middle;
}

table.table a.link_card {
    color: #007bff;
}

table.table a.link_card:hover {
    text-decoration: underline;
}

.row {
    padding: .75rem 0;
}

.section {
    padding: 1.2rem 0;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: static;
}

/* Main */

main.main-security {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.container-security {
    max-width: 400px;
}

/* Forms */

label {
    margin: 0;
}

.custom-select.custom-select-sm.form-control.form-control-sm {
    display: inline-block !important;
}

.form-inputs {
    margin: 1rem auto;
    text-align: center;
}

.form-inputs.last {
    margin-bottom: 0;
    margin-right: 0;
}

.form-inputs.form-check {
    text-align: left;
    padding: 0;
}

.form-inputs.form-check * {
    display: inline-block;
    vertical-align: middle;
}

.form-inputs.form-check label {
    font-size: .8rem;
}

.form-inputs .btn {
    border-radius: .5rem;
    padding: .5rem 1rem;
    margin: .5rem auto;
    text-transform: uppercase;
}

.form-inputs .btn-ebs-full {
    color: #fafafa;
    background-color: #FF9800;
}

.form-inputs .btn-ebs-full:hover, .form-inputs .btn-ebs-full:focus {
    /*background-color: #d91832;*/
    background-color: #FF9800;
}

.form-inputs .btn-ebs-empty {
    color: #FF9800;
    background-color: #fafafa;
}

.form-inputs .btn-ebs-empty:hover, .form-inputs .btn-ebs-empty:focus {
    background-color: rgba(192, 22, 46, .1);
}

.form-inputs.form-reset-pwd {
    font-size: .8rem;
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin: 0;
}

.form-row.right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.form-row > .form-inputs {
    flex: 1 100%;
    margin: 0 1rem;
}

.form-row > .form-inputs {
    flex: 1 30%;
    text-align: left;
    margin-left: 0;
}

.form-row > .form-inputs:not(.form-radio) {
    margin-left: 0;
    margin-right: 1rem;
}

.form-row > .form-inputs:first-of-type:last-of-type:not(.form-radio) {
    margin-left: 0;
    margin-right: 0;
}

.preSignup {
    margin: 0;
}

.md-form input[type=text]:focus:not([readonly]),
.md-form input[type=password]:focus:not([readonly]) {
    border-bottom: 1px solid #8EDEF8;
    box-shadow: 0 1px 0 0 #8EDEF8;
}

.md-form input[type=text]:focus:not([readonly]) + label,
.md-form input[type=password]:focus:not([readonly]) + label {
    color: #8EDEF8;
}

.md-form .form-control {
    color: #333333;
}

#barcodeText {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-style: italic;
    background-color: #fafafa;
}

#barcodeText.hide {
    display: none;
}

#barcodeText p {
    text-align: center;
}

#linkVersion_copy_fee, #linkVersion_new_fee, #linkVersion_copy_option, #linkVersion_new_option {
    display: none;
}

.optional {
    display: none;
}

.form-row.barcode {
    display: none;
}

#new_member_barcode {
    margin-top: 2.3rem;
}

h1.signatureTitle {
    font-size: 3.2rem;
}

fieldset {
    border: 1px solid #FF9800;
}

legend {
    display: inline;
    width: auto;
    padding: .5rem 1rem;
    margin-left: 1rem;
}

#signatureContent {
    display: none;
}

#photoMessage {
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
}

.btn-outline-ebs-color {
    border: 2px solid #FF9800!important;
    background-color: transparent!important;
    color: #59698d!important;
}

/* Inputs */

.form-control {
    display: block;
    padding: .7rem 1rem;
}

select.form-control:not([size]):not([multiple]) {
    padding: 0 1rem;
    height: calc(1.5em + .75rem + 2px);
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid #FF9800;
}

input[type=checkbox] {
    display: block;
    width: 15px;
    height: 15px;
}

.avatar .form-inputs {
    text-align: center;
}

.avatar .form-inputs > div {
    margin: 0 auto;
}

#emailResult {
    position: absolute;
    bottom: 0;
    right: 1rem;
    transform: translate(0%, -50%);
}

#ibanResult {
    position: absolute;
    bottom: 0;
    right: 1rem;
    transform: translate(0%, -50%);
}

/* Nav */

nav {
    background-color: white;
    padding: .75rem 0 !important;
    z-index: 9 !important;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-toggle::after {
    display: none;
}

.header-flex {
    display: flex;
    align-items: center;
}

.m-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 0 80px;
}

.ebsclient .header-menu ul li.m-menu__fake > *:hover {
    text-decoration: none;
    background: none;
    color: #fafafa;
    border-radius: 25px;
}

.navbar-toggler-icon {
    background-image: url('https://mdbootstrap.com/img/svg/hamburger7.svg?color=333333');
}

.navbar .nav-item {
    margin-left: .5rem;
}

.navbar a.nav-link {
    border-bottom: 1px solid transparent;
    transition: border-bottom-color .2s;
}

.navbar a.nav-link:not(.disconnect):hover {
    border-bottom: 1px solid #FF9800;
}

.disconnect:hover {
    color: #FF9800;
}

.fas:not(.prefix):hover, .far:not(.prefix):hover {
    cursor: pointer;
    color: #FF9800;
}

.toggler-open, .toggler-close, .toggler-open i:hover, .toggler-close i:hover {
    color: #333333;
}

.navbar-toggler:not(.collapsed) > .toggler-open, .navbar-toggler.collapsed > .toggler-close {
    display: none;
}

.navbar-toggler.collapsed > .toggler-open, .navbar-toggler:not(.collapsed) > .toggler-close {
    display: block;
}

.table-responsive {
    display: table;
}

@media (max-width: 767px) and (min-width: 400px), (max-width: 850px) and (min-width: 800px) {
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse {
        position: absolute;
        top: 68px;
        right: 0;
        box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .075) !important;
    }

    .table-responsive {
        display: block;
    }
}

/* Form login */

.card-ebs {
    width: 100%;
    border: 1px solid #FF9800;
    border-radius: 1rem;
}

.card-title {
    text-align: center;
}

.logo {
    max-width: 70px;
    margin: 0;
    text-align: center;
    padding: 0;
    position: relative;
}

/* Badge */

.badge-ebs-link {
    margin: .2rem 0;
}

.badge-ebs {
    display: inline-block;
    border: 1px solid #FF9800;
    border-radius: .5rem;
    padding: .2rem 1rem;
}

.badge-ebs-full {
    color: #fafafa;
    background-color: #FF9800;
}

.badge-ebs-full:hover, .badge-ebs-full:focus {
    color: #FF9800;
    background-color: #fafafa;
}

.badge-ebs-empty {
    color: #FF9800;
    background-color: transparent;
}

.badge-ebs-empty:hover, .badge-ebs-empty:focus {
    color: #fafafa;
    background-color: #FF9800;
}

/* Buttons */

.btn-ebs-link {
    margin: .2rem 0;
}

.btn-ebs {
    display: inline-block;
    border: 1px solid #FF9800;
    border-radius: .5rem;
    padding: .2rem 1rem;
}

.btn-ebs-full {
    color: #fafafa;
    background-color: #FF9800;
}

.btn-ebs-full:hover, .btn-ebs-full:focus {
    color: #FF9800;
    background-color: #fafafa;
}

.btn-ebs-empty {
    color: #FF9800;
    background-color: #fafafa;
}

.btn-ebs-empty:hover, .btn-ebs-empty:focus {
    color: #fafafa;
    background-color: #FF9800;
}

/* Alerts */

.alert-danger:not(.m-alert--outline) {
    color: #c0162e;
    background-color: rgba(192, 22, 46, .2);
    border: 1px solid #c0162e;
}

.alert-success:not(.m-alert--outline) {
    color: darkgreen;
    background-color: rgba(0, 100, 0, .2);
    border: 1px solid darkgreen;
}

.alert-danger.signature:not(.m-alert--outline) {
    color: #fafafa;
    background-color: rgba(192, 22, 46, .5);
    border: 1px solid #c0162e;
}

.alert-success.signature:not(.m-alert--outline) {
    color: #fafafa;
    background-color: rgba(0, 100, 0, .5);
    border: 1px solid darkgreen;
}

table .th-sm {
    min-width: 0;
}

.userAlert i, .userAlert i:hover, .userAlert i:focus {
    cursor: inherit !important;
}

.userAlert span.error i, .userAlert span.error i:hover, .userAlert span.error i:focus {
    color: red !important;
}

.userAlert span.warning i, .userAlert span.warning i:hover, .userAlert span.warning i:focus {
    color: #de9b00 !important;
}

.pulse {
    overflow: visible;
    position: relative;
}

.pulse:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: opacity .3s, transform .3s;
    animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: -1;
}

.pulse.error:before {
    background-color: rgba(255, 0, 0, 0.5);
}
.pulse.warning:before {
    background-color: rgba(222, 155, 0, 0.5);
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}


/* Profile */

.profile {
    font-size: 1.3rem;
}

hr {
    width: 30%;
    border: 1px solid #FF9800;
    margin: .5rem 0;
}

hr.hr-xl {
    width: 45%;
}

hr.hr-secondary {
    width: 15%;
    border: 1px solid #C86B91;
}

.sec-profile, .sec-contract {
    margin: .5rem 0 .25rem 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sec-profile p {
    margin: 0;
}

.imageProfile {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: .25rem !important;
    height: 240px;
}

.imageProfile img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}

#editMember {
    /*width: 100%;*/
    position: absolute;
    bottom: .3rem;
    right: .3rem;
    background-color: rgba(255, 255, 255, .8);
    padding: .3rem;
    border-radius: 10rem;
    line-height: 0;
    font-size: 1rem;
}

.optionsProfile {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .6);
    padding: .6rem;
    /*border-radius: 10rem;*/
    line-height: 0;
    font-size: 1rem;
}

.optionsProfile #editMember {
    background-color: #fafafa;
}

.name {
    font-size: 2rem;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.name strong {
    display: block;
    font-size: 3rem;
    width: 100%;
}

.name .age {
    font-size: 1rem;
}

.name * {
    vertical-align: middle;
}

#avatar_preview img {
    display: block;
    width: 100%;
}

.card:not(.card-body) {
    background-color: #fafafa !important;
}

.adminShowOffice {
    position: relative;
    margin: 0;
}

.adminShowOffice small {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: .9rem;
    padding: .5rem;
    background-color: rgba(255, 255, 255, .8);
    border-radius: .25rem .25rem 0 0 !important;
    z-index: 8;
}

.amountFee {
    cursor: help;
    margin: 0;
}

/* Contracts */

.othersContracts p {
    margin: 0;
}

.state_unsigned {
    border: 2px solid rgb(205, 0, 1) !important;
}

.state_cancel {
    border: 2px solid rgb(119, 0, 1) !important;
}

.state_breaktime {
    border: 2px solid rgb(222, 155, 0) !important;
}

.state_unpaid {
    border: 2px solid rgb(255, 0, 15) !important;
}

/*.state_signed {*/
/*    border: 2px solid rgb(205, 128, 0) !important;*/
/*}*/

.state_paied, .state_signed {
    border: 2px solid rgb(0, 205, 0) !important;
}

/* WebCam */

#avatar_preview {
    display: none;
    width: 320px;
    height: 240px;
}

#resetSnap {
    display: none;
}

.alert-icon {
    font-size: 3rem;
    margin-right: 15px;
}

/* Royalties */

.royaltiesOverall {
    position: relative !important;
    top: 0;
    left: 0;
    padding: 4.8rem 0 2rem 0;
}

.globalAmount {
    position: absolute;
    top: 0;
    right: 0;
}

.offices-details > * {
    flex: 0 48%;
}

.fees-details > * {
    flex: 1 0 29%;
}

.role_employee_card {
    border: 1px solid #90bfff;
    border-radius: .2rem;
    width: 48%;
    padding: .75rem .2rem;
    margin: 1rem .5rem;
}

.role_seller_card {
    border: 1px solid #C86B91;
    border-radius: .2rem;
    width: 48%;
    padding: .75rem .2rem;
    margin: 1rem .5rem;
}

.role_admin_card {
    border: 1px solid #dedc00;
    border-radius: .2rem;
    width: 48%;
    padding: .75rem .2rem;
    margin: 1rem .5rem;
}

/* button box */
.button-box-container {
    width: 100%;
    margin-bottom: 2.5rem;
    /*height: 1rem;*/
}

.button-box-container > * {
    flex: 0 1 47%;
    padding: 4rem 0;
    border: 1px solid #FF9800;
    border-radius: .25rem;
    text-align: center;
    transition: .5s ease;
}

.button-box-container > *:hover {
    cursor: pointer;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    background-color: white;
}

.button-box-container > * i {
    font-size: 3rem;
}

.button-box-container > * p {
    margin-top: 1rem;
    font-size: 2em;
}

/* Token */

#showToken {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fafafa;
    z-index: 100;
    font-size: 20rem;
    font-weight: bolder;
}

#showToken i {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
}

.hide {
    display: none !important;
}

/* Modal */

#addMemberBG, #editUserModalBG {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Page de maintenance */

.maintenanceContainer {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.maintenanceContent {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}

.maintenanceContent img {
    position: absolute;
    top: 8%;
    left: 0;
    transform: translateY(-50%);
    max-width: 150px;
}

.maintenanceContent .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1280px;
    text-align: center;
}

/* Error pages */

.badgeError {
    display: inline-block;
    margin: 0 1rem 0 0;
    padding: .8rem;
    border-radius: 100%;
    background: #c8000d;
    font-size: 1.5rem;
    line-height: 1;
}

.badgeError > i {
    color: #fafafa !important;
}

.badgeSuccess {
    display: inline-block;
    margin: 0 auto;
    padding: .8rem;
    border-radius: 100%;
    background: #009516;
    color: #fafafa !important;
    font-size: 1.5rem;
    line-height: 1;
}

.badgeSuccess:hover {
    cursor: initial;
}

.errorPage {
    position: relative;
    top: 0;
    width: 100%;
    min-height: calc(100vh - (16rem));
}

.errorPage > .showError {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.errorPage > .showError > h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.errorPage > .errorText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.errorPage > .errorBtn {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

/* Login */

.securityAlert {
    width: 100%;
}

.securityAlert > div {
    width: 75%;
    margin: 0 auto;
}

.security {
    width: 100%;
}

.security .md-form {
    margin: 2rem auto;
}

.imageLogin {
    width: 50%;
    overflow: hidden;
}

.imageContent {
    width: 100%;
    height: 100%;
    position: relative;
}

.imageContent > img {
    display: block;
    width: auto;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}



/* Webcam.js */

#imageprev {
    width: auto;
    height: 100%;
}

/* Datatable */

.dataTables_wrapper {
    position: relative;
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
    background-repeat: no-repeat;
    background-position: center right;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
    display: none !important;
    content: "";
}

table.dataTable thead .sorting {
    background-image: url("../img/sort_both.png");
}

table.dataTable thead .sorting_asc {
    background-image: url("../img/sort_asc.png");
}

table.dataTable thead .sorting_desc {
    background-image: url("../img/sort_desc.png");
}

.dt-body-center {
    text-align: center;
}

.dt-body-left {
    text-align: left;
}

.dt-body-right {
    text-align: right;
}

.fac-error {
    position: relative;
}

.fac-error:hover {
    color: inherit;
    cursor: help !important;
}

/* Stats */

.stat-block {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    transition: width .2s;
    background-color: #fff;
    border: 1px solid #FF9800;
    border-radius: .25rem;
}