body {
    background: #f2f2f2;
    padding: 0;
    letter-spacing: 0.025em;
}

.card {
    margin: auto;
    box-shadow: none;
    border: 1px solid #efefef;
}

.card .card-action {
    padding: 16px 24px 14px;
}

.card-action a:last-child {
    margin-right: 0 !important;
}

.stepper {
    display: flex;
    margin: 0;
    border-bottom: 1px solid rgba(160, 160, 160, 0.2);
}

.stepper .circle {
    height: 24px;
    width: 24px;
    font-size: 12px;
    line-height: 24px;
    margin: 0 auto;
}

.stepper .step {
    flex-grow: 1;
    text-align: center;
    position: relative;
    padding: 24px;
}

.stepper .step:hover {
    background-color: rgba(0, 0, 0, 0.025);
    border-radius: 2px;
    cursor: pointer;
}

.stepper .step::before,
.stepper .step::after {
    content: "";
    position: absolute;
    flex: 1;
    top: 35px;
    height: 1px;
    background-color: rgba(160, 160, 160, 0.2);
}

.stepper .step::after {
    right: 0;
    left: 50%;
    margin-left: 20px;
}

.stepper .step::before {
    left: 0;
    right: 50%;
    margin-right: 20px;
}

.stepper .step:first-child::before {
    display: none;
}

.stepper .step:last-child::after {
    display: none;
}

.stepper .done .circle span,
.stepper .active .circle span {
    display: none;
}

.stepper .done .circle::after,
.stepper .active .circle::after {
    font-family: "Material Icons";
    font-size: 15px;
}

.stepper .done .circle::after {
    content: "\e876";
}

.stepper .active .circle::after {
    content: "\e3c9";
}

.stepper .done .circle,
.stepper .active .circle {
    background-color: #4285f4 !important;
}

.stepper .step-title {
    margin-top: 10px;
}

.stepper .active .step-title {
    font-weight: 500;
}

.ingeris-color {
    color: #e77809;
}

.ingeris-bg-color {
    background-color: #e77809;
}

.btn {
    background-color: #e77809;
}

.btn:hover {
    background-color: #e77809;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #e77809;
    height: 38px;
    width: 38px;
    line-height: 23px;
    text-decoration: none;
}

.nav-pills .nav-link {
    height: 38px;
    width: 38px;
    line-height: 23px;
    color: black;
    text-decoration: none;
    transition: all .3s;
}

.nav-pills:hover,
.nav-link:hover {
    text-decoration: none;
}

ul.stepper.horizontal .step.active .step-title::before,
ul.stepper.horizontal .step.done .step-title::before {
    background-color: #e77809;
}

.essms-title {
    font-weight: bold;
    /* text-transform: uppercase; */
    color: #e77809;
    margin-top: 40px;
}

.relative {
    position: relative;
}

.bottom-35 {
    position: absolute;
    bottom: 35px;
}

.essms-step-content {
    padding: 0 150px;
}

.essms-step-content-eta {
    padding: 0 50px;
}

.text-small {
    font-size: 13px;
}

.essms-task-icon {
    width: 80px;
    height: 90px;
    background-image: url('../image/task-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 50px;
    transform: rotate(344deg);
}

.essms-error-icon {
    width: 90px;
    height: 90px;
    background-image: url('../image/error-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 50px;
    /* transform: rotate(344deg); */
}

.essms-comment-icon {
    width: 80px;
    height: 90px;
    background-image: url('../image/comment-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 50px;
    /* transform: rotate(344deg); */
}

.essms-database-icon {
    width: 80px;
    height: 90px;
    background-image: url('../image/database-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 50px;
    /* transform: rotate(344deg); */
}

.essms-check-icon {
    width: 40px;
    height: 40px;
    background-image: url('../image/check-mark-circle.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 20px;

}

.input-status-icon {
    width: 40px;
    height: 40px;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 20px;

}

.input-valid {
    background-image: url('../image/input-valid.png');
}


.input-invalid {
    background-image: url('../image/input-invalid.png');
}

.essms-checked-green-icon {
    width: 90px;
    height: 90px;
    background-image: url('../image/geen-check.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 20px;

}

.controll-electronique {
    background-image: url('../image/controll-electrique.png');
}

.controll-installation-gas {
    background-image: url('../image/controll-installation-gas.png');
}

.controll-port-patrol {
    background-image: url('../image/controll-port-patrol.png');
}

.text-underline {
    text-decoration: underline;
}

.box-icon {
    /* background: #e77809; */
    width: 110px;
    height: 110px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 20px;
}

.gear-icon {
    width: 50px;
    height: 50px;
    background-image: url('../image/gear-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* margin-right: 20px; */
}

.progressing-bar {
    width: 50%;
}

.progress-bar {
    background-color: #e77809;
}

.fines-logo {
    width: 170px;
    height: 90px;
    background-image: url('../image/finess-logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* reset crazy materializecss applied on nav */
nav {
    color: unset !important;
    background-color: unset !important;
    width: unset !important;
    height: unset !important;
    line-height: unset !important;
    box-shadow: none !important;
}

#top .input-text,
#top input[type="text"],
#top input[type="input"],
#top input[type="password"],
#top input[type="email"],
#top input[type="number"],
#top input[type="url"],
#top input[type="tel"],
#top input[type="search"],

#top textarea,
#top select {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    font-size: 16px !important;
    padding: 5px 5px !important;
    color: #8b8b8b !important;
}

#top input[type=radio] {
    font-size: 16px !important;
}

.form-check {
    font-size: 16px;
    display: flex;
    line-height: 25px;
}

#top .input-text:focus,
#top input[type="text"]:focus,
#top input[type="input"]:focus,
#top input[type="password"]:focus,
#top input[type="email"]:focus,
#top input[type="number"]:focus,
#top input[type="url"]:focus,
#top input[type="tel"]:focus,
#top input[type="search"]:focus,
#top textarea:focus,
#top select:focus {
    /* border-top:none !important; */
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 16px !important;
    padding: 5px 5px !important;
    color: #8b8b8b !important;
}

::placeholder {
    color: 8b8b8b;
}

.input-label {
    font-size: 15px !important;
    /* font-weight: 600; */
    color: #8b8b8b;
    line-height: 15px;
}

.tab-content>.active {
    display: block;
    min-height: 670px;

}

.api-loading-screen {
    min-height: 600px;
}

.btn-essms {
    padding: 5px 150px;
    cursor: pointer;
    transition: all .3s;
    color: white;
    border-radius: 5px;
}

.btn-essms:hover {
    opacity: .7;
}

.btn-essms-popup {
    padding: 5px 50px;
    cursor: pointer;
    transition: all .3s;
    color: white;
    border-radius: 5px;
}

.btn-essms-popup:hover {
    opacity: .7;
}

.text-no-tran {
    text-transform: none !important;
}

input#fines-search {
    /* font-size: 20px !important; */
    border: 1px solid #555 !important;
    width: 180px !important;
    margin: 15px auto !important;
}

#exampleModalCenter .modal-content {
    clip-path: polygon(0 0, 86% 0%, 100% 35%, 100% 100%, 65% 100%, 20% 100%, 0 100%, 0% 22%);
    border: 1px solid #e77809 !important;
}

.last-step {
    clip-path: polygon(0 0, 93% 0%, 100% 20%, 100% 100%, 65% 100%, 20% 100%, 0 100%, 0% 22%);
    background-color: #98d046;
    padding: 20px 30px;
    color: white;
}

#exampleModalCenter .modal-header-essms {

    position: absolute;
    right: -5px;
    transform: translateY(-90px);
    background: #f5deb300;
    cursor: pointer;
}

#exampleModalCenter button.close-modal {
    background: #ffffff00;
    border: none;
    font-size: 80px;
    color: #e77809;
}

.loading-desctiption {
    font-size: 14px;
    line-height: 18px;
}

.form-check-input:checked {
    background-color: #e77809 !important;
    border-color: #e77809 !important;
}

/* animation */

.rotate-right {
    animation: rotation-right 8s infinite linear;
}

@keyframes rotation-right {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.rotate-left {
    animation: rotation-left 8s infinite linear;
}

@keyframes rotation-left {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-359deg);
    }
}

/* end animatoin */

table {
    border: 1px solid #555 !important;
}

tr.essms-table-head th {
    background: #e77809 !important;
    height: 20px !important;
    padding: 0px 12px !important;
    color: white !important;
    font-size: 10px !important;
}

table#etablissment-table thead {
   height: 0px !important;
}

tr.essms-table-content td {
    border: 1px solid #dfdfdf !important;
    height: 20px !important;
    padding: 4px 12px !important;
    line-height: 18px;
}


input:focus:invalid {
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535;
}

input:focus:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: right;
    position: absolute;
    top: -34px;
    right: 2px;
}

#top label {
    width: 170px;
    display: flex;
    font-size: 14px !important;
}

.suvey label {
    width: auto !important;
    display: flex;
    font-size: 14px !important;
    margin-right: 50px;
    font-weight: 100 !important;
}

div#etablissment-table_info {
    display: none;
}

.action-verify {
    cursor: pointer;
    background-color: red;
    color: white;
    text-decoration: underline;
    transition: all .3s;
}

.action-verify span {
    text-decoration: none;
}

.action-verify:hover {
    opacity: .7;
}

.action-verify.verified{
    background-color: green;
}

#modalEtablissment .modal-lg {
    max-width: 1150px !important;
}

.essms-step-content-eta > .row {
    margin-bottom: 0px;
}

#step-2  thead {
    background: #e77809;
    color: white;
}

/* #step-2  thead th {
   height: 30px !important;
} */

#etablissment-table tbody > tr {
    height: 30px;
}

#essms-discipline  td {
    /* height: 30px; */
    padding: 0 10px !important;
    margin: 0 !important;
}

.w-80px{
    width: 80px !important;
}


table.dataTable thead th, table.dataTable thead td {
    padding: 0 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.input-disabled {
    background-color: #8b8b8b;
    color: white;
    pointer-events: none;
    user-select: none;
}


.d-none {
    display: none !important;
}

.wrap-popover{
    font-size: 11px;
}

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

.popover-label {
    text-decoration: underline;
    font-weight: bold;
}

textarea#commentary {
    background: #f3f3f3 !important;
}

#top nav .social_bookmarks {
    margin-top: 30px !important;
}

textarea.autosize {
    border-bottom: none !important;
}