/*
* Gradius App V1.0
* Copyright 2022, LAB 360 SRL
* www.lab360.be
*/

/* Fonts */
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2'), url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('../fonts/OpenSans-Semibold.woff2') format('woff2'), url('../fonts/OpenSans-Semibold.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/OpenSans-Bold.woff2') format('woff2'), url('../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('../fonts/OpenSans-Light.woff2') format('woff2'), url('../fonts/OpenSans-Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'bootstrap-icons';
    src: url('../fonts/bootstrap-icons.woff2') format('woff2'), url('../fonts/bootstrap-icons.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

html, body {
    height: 100%;
    background-color: #e5e6e7;
}

body {
    padding-top: 10rem;
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #545a5c;
}

    body.signin {
        display: flex;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
    }

h1 {
    color: #0083a9;
    font-family: 'OpenSans-Bold';
    margin-bottom: 1.6rem;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 1.8rem;
}

h5 {
    color: #534d4d;
    font-family: 'OpenSans-Bold';
    margin-bottom: .3rem;
    padding: 0;
    font-weight: 100;
    font-size: 1.1rem;
}

em {
    color: #0083a9;
    font-style: normal;
    font-family: 'OpenSans-Semibold';
}

thead {
    background-color: #607b82;
    color: #fff;
}

.buttons-group.d-flex .btn, .buttons-group-table.d-flex .btn {
    margin: 0 0 0 10px;
}

.nowrap {
    white-space: nowrap;
}

.btn {
    margin-bottom: 5px;
}

a.side-arrow {
    background-image: url('../images/chevron-up.svg');
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    position: relative;
    display: inline-block;
    padding: 0 0 0 40px;
    width: auto
}

a.side-arrow-p {
    background-size: 15px 15px;
    padding: 0 20px 0 0;
}

a.side-arrow-p-std {
    background-size: 15px 15px;
    padding: 0 20px 0 24px;
}

a.side-arrow-h {
    margin-bottom: 12px;
}

a.side-arrow.collapsed {
    background-image: url('../images/chevron-down.svg');
}

a.side-arrow h2, a.side-arrow h3, a.side-arrow h4, a.side-arrow h5 {
    line-height: 1em;
    margin: 0;
    padding: 0 0 0 12px;
}

a.side-arrow:hover {
    color: #0083a9;
    fill: #0083a9;
}

.infobox {
    display: flex;
    width: 100%;
    margin: 20px 0;
}

.accordion-header {
    border-top: 1px solid #000;
    padding-top: 15px;
}

.d-inline-flex .form-check-input, .d-inline-flex .form-check-label {
    margin-right: 7px;
}

.checkbox-column {
    width: 20px;
}

.form-signin {
    max-width: 330px;
    padding: 15px;
}

    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

header {
    background-color: #fff;
}

.logo-header {
    max-width: 110px;
}

#header-top {
    background-color: #0083a9;
    color: #fff;
}

    #header-top a {
        color: #fff;
    }

    #header-top ul a.nav-link, #header-top ul button.nav-link {
        display: inline-block;
        background: none;
        color: #fff;
        border: none;
        margin: 0;
        padding: 6px;
    }

#navbar-tagline {
    color: #0083a9;
    font-family: 'OpenSans-Bold';
    font-size: 1.6em;
    margin-left: 15px;
    text-transform: uppercase;
}

.navbar-nav .nav-link:hover {
    color: #000;
}

.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
    color: #0083a9;
    border-bottom: 2px solid #0083a9;
}

.navbar .nav-link {
    font-family: 'OpenSans-Semibold';
    font-size: 1.2em;
}

.navbar-expand #navbar-items li {
    border-top: 1px solid #000
}

.flex-half, .flex-third, .flex-full, .flex-profit-header {
    width: 100%
}

.cartouche {
    padding: 1.5rem;
    margin: 0 0 20px;
    border: 1px solid #ccc;
    background-color: #ccc;
}

.form-control-cartouche {
    min-height: calc(1.5em + .5rem + 8px);
}

.col-cartouche {
    margin-top: 45px;
}

.buttons-group {
    border-top: 1px solid #666;
    padding-top: 20px;
}

.buttons-group-table {
}

.uploaded-picture-placeholder {
    max-height: 150px;
    display: flex;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #fff;
}

    .uploaded-picture-placeholder img {
        max-height: 140px;
    }

footer {
    padding: 1em 0;
    text-align: center;
    background: #323334;
    margin-top: 50px;
}

th {
    font-weight: 100;
    line-height: 1.2em;
    vertical-align: middle;
}

tbody tr.subheader th {
    background-color: #607b82;
    color: #fff;
}

.table-responsive {
    margin-bottom: 50px;
}

.table-stretch {
    margin-bottom: 0px;
}

#users-list tbody td:last-child, #parameters-list tbody td:last-child, #margin-list tbody td:last-child {
    text-align: right;
}

.form-group-check {
    margin: 7px 0;
}

.form-group-separator {
    border-bottom: 1px solid #ccc;
}

.mod-check {
    display: flex;
    background-color: #607b82;
    padding: 10px;
}

.mod-check-row {
    border-top: 1px solid #607b82;
    padding: 5px 0;
    margin-left: 0px;
}

#models-list td:first-child {
    border-right: 1px solid #607b82;
}

.model-row {
    display: flex;
    padding: 10px 0;
    align-items: center;
    border-bottom: 1px solid #607b82;
}

    .model-row.last-row {
        display: flex;
        padding: 10px 0;
        align-items: center;
        border-bottom: 0;
    }

.model-row-title {
    padding: 5px 20px 5px 0;
    font-weight: 900
}

    .model-row-title h4 {
        margin: 6px 0;
        padding: 0;
        font-family: 'OpenSans-Bold'
    }

.model-row-controls {
}

#files-list h2 {
    font-family: 'OpenSans-Bold';
    margin-bottom: 0;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 1.6rem;
}

.form-header {
    border-bottom: 1px solid #666;
    margin-bottom: 20px;
}

.radio-label, .select-label, .check-label {
    font-family: 'OpenSans-Bold';
    margin: 0;
}

.em-label {
    font-family: 'OpenSans-Bold';
    margin: 0 0 4px;
}

.radio-group {
    border-bottom: 1px solid #545a5c;
    width: 100%;
}

.input-group-text {
    font-size: .8rem;
}

.toggle-title {
    text-decoration: none;
    color: #545a5c;
}

#workshop-form h4 {
    background-color: #0083a9;
    color: #fff;
    margin: 0;
    padding: 5px 0 5px 12px;
    font-family: 'OpenSans-Bold';
    font-size: 21px;
}

.comment {
    background-color: #607b82;
    color: #fff;
    margin: 0;
    padding: 0 0 0 12px;
    font-family: 'OpenSans-Light';
}

.form-text-white {
    color: #fff;
    padding-bottom: 5px;
}

.profitsheet-list {
    background-color: #d6d6d6;
}

    .profitsheet-list .tablestretch {
        width: 80px;
    }

.tablestretch-heading {
    background-color: #c9c9c9;
}

table.option {
    border: 3px solid #000;
}

.form-check-stretch .form-check {
    min-height: inherit;
    font-size: .8rem;
    margin-bottom: 2px;
}

.btn-xsm {
    padding: 1px 8px;
    font-size: 12px;
    line-height: 12px;
    margin: 0;
    height: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
}

.option-enabled .workshop-form-header .comment {
    padding-bottom: 10px;
}

.workshop-form-header {
    background-color: #0083a9;
}

#workshop-form select {
    font-size: .8rem;
}

/* Products List */
#products-list-form th:last-child {
    min-width: 160px;
}

#products-list-comment {
    margin-bottom: 30px;
}

#products-list-comment-text {
    margin: 20px 0 0 0;
}

.margin-check {
    color: red;
    font-family: 'OpenSans-Semibold';
}



@media (min-width: 768px) {
    .flex-half {
        width: 48%
    }

    .flex-third {width: 31%}
	.flex-profit-header {width:25%;}
	.flex-profit-header:nth-child(2) {width:50%;}
	.flex-profit-header:nth-child(3) {display:flex; flex-direction:column; justify-content: center; align-items: flex-end;}
}