body {
    min-height: 100vh;
    background-color: #efefef;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

#header > div {background-color: #0a445a;margin: 0;}

#header > div .logo {background-color: #fff;}

#header > div .logo::after {background-color: #fff;}

.logo img {
    float: right;
}

#header > div .bg-separator {
    background: linear-gradient(-65deg, #0a445a, #0a445a 50%, #fff 51%, #fff 100%);
}

#mobile-menu,
#menu-toggler {display: none;}

#mobile-menu ul.hfe-nav-menu {flex-wrap: wrap;}

.hfe-nav-menu {
    height: 100%;
    margin: 0;
}

ul.hfe-nav-menu {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
}

.hfe-nav-menu li {
    margin-right: 0;
    /*margin-left: 30px;*/
}

.hfe-nav-menu li#menu-item-website {
    margin-left: auto;
    margin-right: 0;
}

.hfe-nav-menu li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Work Sans", Verdana;
    font-weight: 600;
    display: block;
    padding: 5px 20px;
}

.alert-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

section#content {
    display: flex;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

h1 {color: #0a445a;font-size: 24px;}

form#connect {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

form div {
    max-width: 100%;
}

select + select,
select + input,
input.input-text + select,
input.input-text + input,
input.input-text + label {margin-top: 15px;}

input.input-text {
    padding: 5px 20px;
    border: 1px solid #0a445a;
    width: 300px;
    max-width: 100%;
    margin-bottom: 5px;
    border-radius: 0;
}


.form-group select {
    padding: 5px 20px;
    border: 1px solid #0a445a;
    width: 300px;
    max-width: 100%;
    margin-bottom: 5px;
    border-radius: 0;
}

input.input-text:not(.light):focus {
    box-shadow: 12px 12px 0px 0px #0a445a;
    outline: 0px none transparent;
}

.small a.call-to-action {
    font-style: italic;
}

a.call-to-action {
    color: #0a445a;
    text-decoration: none;
}

form input.submit {
    background: linear-gradient(0deg, rgb(10, 68, 90) 30%, rgb(60, 90, 100) 100%);
    border: none;
    color: #fff;
    padding: 3px 20px;
}

#connect input.submit:active {
    background: linear-gradient(180deg, rgb(10, 68, 90) 30%, rgb(60, 90, 100) 100%);
}

#main, #left-column {padding: 10px 20px;}

#main .row {margin: 0;}

#page-content,
#legend {
    background-color: #fff;
    padding: 20px;
}
#legend {
    display: flex;
    padding: 10px;
}


#page-content form {max-width: 100%}

#legend ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    align-items: center;
}

#legend ul li {
    display: flex;
    padding: 0 15px;
}

#legend p {
    margin: 0;
}

#legend ul li .lcarac {
    width: 25px;
    text-align: center;
    line-height: 25px;
    margin-right: 5px;
}

#home-search {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#homepage #title {
    float: left;
}

#home-search > form {}

#home-search > form .form-group {
    flex-direction: row;
    width: auto;
    box-shadow: 0 0 0;
    border: 0;
    align-items: center;
    padding: 5px;
    margin-bottom: 5px;
}

#home-search > form h1 {
    font-size: 14px;
    width: auto;
    padding-right: 10px;
}

#home-search > form input {
    margin: 0;
    padding: 5px 20px;
    border: 1px solid #0a445a;
    font-size: 14px;
    width: 150px;
}

div.dt-container div.dt-search{
    display: none;
}

table.dataTable {
    font-size: 12px;
    max-width: 100%;
    font-family: Work sans;
    font-weight: 500;
}

table.dataTable thead {}

table.dataTable thead tr {}

table.dataTable thead tr th {
    padding: 2px;
    border: 1px solid #c1c1c1;
    text-align: center;
    background-color: #0a445a;
    color: #fff;
}

table.dataTable thead tr th .dt-column-title {font-size: 12px;}

table.dataTable tbody {}

table.dataTable tbody tr {}

table.dataTable tbody tr td {
    border: 1px solid #c1c1c1;
    padding: 0 2px;
}

table.dataTable tbody tr td.center {text-align: center;}

table.dataTable tbody tr:not(:hover) td:not(.highlight):nth-child(even) {background-color: #f2f2f2;}

table.dataTable tbody tr:not(.child):hover,
table.dataTable tbody tr:not(.child) td.highlight {
    background-color: #999;
    color: #fff;
}

table.dataTable tbody tr td .progress-bar {
    height: 1.5em;
    width: 100%;
    background-color: #c9c9c9;
    position: relative;
}

table.dataTable tbody tr td .progress-bar:before {
    content: attr(data-label);
    font-size: 0.8em;
    position: absolute;
    text-align: center;
    top: 5px;
    left: 0;
    right: 0;
}

table.dataTable tbody tr td .progress-bar .value {
    background-color: #7cc4ff;
    display: inline-block;
    height: 100%;
}

table.dataTable tbody tr td .progress-bar.step-100 .value {background-color: #00a856}

table.dataTable tbody tr td .progress-bar.step-90 .value {background-color: #58c126}

table.dataTable tbody tr td .progress-bar.step-80 .value {background-color: #53c035}

table.dataTable tbody tr td .progress-bar.step-75 .value {background-color: #7fcb2e}

table.dataTable tbody tr td .progress-bar.step-50 .value {background-color: #AAD823}

table.dataTable tbody tr td .progress-bar.step-25 .value {background-color: #f9c00e}

table.dataTable tbody tr td .progress-bar.step-10 .value {background-color: #ef5f2a}

table.dataTable tbody tr td .progress-bar.step-0 .value {background-color: #ed2b36;}

/*table.dataTable tr .mini{max-width: 50px}*/

.page-link:hover,
.page-link {
    color: #0a445a;
}

.active > .page-link, .page-link.active {
    background-color: #0a445a;
    border-color: #0a445a;
}

#search-orders {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#profile-form {}

#profile-form div.form-group {}

form div.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 450px;
    max-width: 100%;
    padding: 20px;
    box-shadow: 12px 12px 0px 0px #0a445a;
    border: 1px solid #0a445a;
    margin: 0 auto 40px;
}

form div.form-group h1 {width: 100%}

#quick-search-input {max-width: 100%;}

#file-lists {clear: both;}

#customer-list > .user-list,
#file-lists > .file-list {
    box-shadow: 12px 12px 0px 0px #0a445a;
    border: 1px solid #0a445a;
    margin: 30px 0;
}

#file-lists > .file-list.inactive {
    box-shadow: 12px 12px 0px 0px #ccc;
    border: 1px solid #ccc;
}

#customer-list > .user-list h2,
#file-lists > .file-list h2 {
    padding: 20px;
    margin: 0;
    cursor: pointer;
}

#file-lists > .file-list:hover {}

#customer-list > .user-list h2.active,
#customer-list > .user-list:hover h2,
#file-lists > .file-list h2.active,
#file-lists > .file-list:hover h2 {
    background-color: #0a445a;
    box-shadow: -11px -11px 0px 0px #fff;
    margin: 11px 0 0 11px;
    padding: 9px 20px 20px 9px;
    color: #ffffff;
}

#file-lists > .file-list.inactive h2.active,
#file-lists > .file-list.inactive:hover h2 {
    background-color: #ccc;
    box-shadow: 0 0 0;
}

#file-lists > .file-list ul {list-style: none;padding: 10px;}

#file-lists > .file-list ul li {}

#file-lists > .file-list ul li a {
    padding: 5px 0;
    display: flex;
    text-decoration: none;
    color: #0a445a;
    font-weight: 600;
    font-size: 18px;
    gap: 5px;
    flex-wrap: wrap;
    word-wrap: anywhere;
    align-items: center;
}

#file-lists > .file-list ul li a:hover {color: #0a445a;}

#file-lists > .file-list ul li a:hover span {
    text-decoration: underline;
}

span.download {
    mask: url(../svg/352275_cloud_download_icon.svg) left center no-repeat;
    mask-size: auto;
    width: 20px;
    display: inline-block;
    height: 20px;
    mask-size: contain;
    background-color: #0a445a;
}


#file-lists > .file-list ul.page {
    display: flex;
    flex-direction: column;
}

#file-lists > .file-list ul.page h3 {
    font-size: 22px;
}

#customer-list > .user-list h3 span.crown {
    mask: url(../svg/8541713_crown_icon.svg) left center no-repeat;
    mask-size: auto;
    width: 20px;
    display: inline-block;
    height: 20px;
    mask-size: contain;
    background-color: #0a445a;
}

#customer-list > .user-list h3 {
    padding: 10px 20px 10px 0;
    margin-left: 20px;
    border-bottom: 3px solid #0a445a;
    cursor: pointer;
}

#customer-list .user-list ul li > div {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

#customer-list .user-list ul li > div.row {flex-direction: row;padding: 0;border-bottom: 3px solid #eee;}

#customer-list .user-list ul li > div > .form-action {
    margin-top: auto;
    border-radius: 0;
    border: none;
    padding: 10px 20px;
}

#customer-list .user-list ul li > div > .form-action .btn {
    border-radius: 0;
    border: none;
    padding: 10px 20px;
}

#customer-list .user-list ul li > div > .form-action .btn-primary {
    background-color: #0a445a;
}

footer {
    text-align: center;
    padding: 40px 0 40px;
    border-top: 1px solid #cecece;
    background-color: #0a445a;
    color: #fff;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer #footer-information {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    align-items: center;
}


#legend.stick-to-top {
    width: 100%;
    padding: 5px;
    border: 2px solid #0a445a;
}

#legend.stick-to-top h2 {}

#legend.stick-to-top ul {
    margin: 0;
    padding: 0;
    justify-content: space-evenly;
}


.stick-to-top {
    position: fixed;
    top: 0;
    max-width: 100%;
    z-index: 10;
}

.aff {background-color: lightgrey;color: #000000;}

.aff-star {background-color: orange;color: #000000;}

.aff-i {background-color: AQUA;color: #000000;}

.aff-m {background-color: AQUA;color: #000000;}

.aff-m.cc-nc {background-color: Orange;color: #000000;}

.aff-r {background-color: PaleTurquoise;color: #000000;}

.aff-r.cc-nc {background-color: Orange;color: #000000;}

.aff-l {background-color: TEAL;color: #000000;}

.aff-l.cc-nc {background-color: Orange;color: #000000;}

.aff-p {background-color: YELLOW;color: #000000;}

.aff-p.cc-nc {background-color: Orange;color: #000000;}

.aff-c {background-color: #53ec86;color: #000000;}

.aff-c.cc-nc {background-color: Orange;color: #000000;}

.aff-e {background-color: #449910;color: #000000;}

.aff-e.cc-nc {background-color: Orange;color: #000000;}

.aff-b {background-color: #00CF40;color: #000000;}

.aff-b.cc-nc {background-color: Orange;color: #000000;}

.aff-f {background-color: RED;color: #000000;}

.aff-f.cc-nc {background-color: Orange;color: #000000;}

.aff-t {background-color: White;border: 1px solid #cecece;color: #000000;}

.aff-s {background-color: White;border: 1px solid #cecece;color: #000000;}

.alert-popup {
    position: fixed;
    top: 20px;
    right: 0;
}

.svgic {
    stroke: #333;
    width: 20px;
    height: 20px;
    background-color: #eee;
    fill: gold;
}

@media (max-width: 1280px) {
    #page-content h1#title{float: none;}
    #page-content #home-search{}
}

@media (max-width: 1180px) {
    #menu-item-website {display: none;}
}

@media (max-width: 992px) {
    section#content {
        flex-direction: column;
    }

    #legend.stick-to-top {
        display: none;
    }

    #legend ul {
        display: flex;
        flex-wrap: wrap;
    }

    #legend ul li {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .nav-menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #menu-toggler {
        display: flex;
        width: 30px;
        height: 40px;
        flex-direction: column;
        justify-content: space-evenly;
        cursor: pointer;
    }

    #menu-toggler span {
        background-color: #fff;
        height: 3px;
        border-radius: 3px;
    }

    #mobile-menu.open {display: block;}

    .nav-menu nav.hfe-nav-menu {display: none;}

    #home-search > form .form-group {display: none;}

}

@media (max-width: 768px) {

    #mobile-menu nav.hfe-nav-menu li {width: 50%;margin: 0;padding: 10px;}

    #content .alert-panel {order: 0;}

    #content #left-column {order: 2;}

    #legend ul li {
        width: 100%;
    }

    #content #main {order: 1;}

    #page-content div.authentification {order: 1;}

    #page-content div.action {order: 3}

    #page-content div.information {order: 2}

    #customer-list .user-list ul li > div > .form-action {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: stretch;
        width: 100%;
    }

}

@media (max-width: 576px) {
    #mobile-menu nav.hfe-nav-menu li {width: 100%;}
}