body {
    font-family: Arial;
}

/* container media size */
@media (min-width: 576px) {
    .container {
        max-width: initial;
    }
}
@media (min-width: 768px) {
    .container {
        padding-left: 100px !important;
        padding-right: 100px !important;
        max-width: initial;
    }
    .object > .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}
@media (min-width: 1200px) {
    .container {
        padding-left: 200px !important;
        padding-right: 200px !important;
        max-width: initial;
    }
    .object > .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* top navigation black */
.nav-black {
    background-color: #000;
    padding: 10px 15px;
    height: 44px;

    position: fixed;
    right: 0;
    left: 0;
    z-index: 2;
    font-size: 17px;
}
.nav-black + .container,
.nav-black + .gray-background {
    padding-top: 44px;
}
.nav-black .logo {
    padding-top: 6px;
    max-height: 32px;
    width: auto;
    margin: auto;
    display: block;
    min-height: 30px;
    min-width: 76px;
}

/* esential element */
.logo {
    width: 160px;
}
.gray-background {
    background-color: #44495C;
    width: 100%;
    min-height: calc(100vh - 48px);
    color: #FFF;
}
.gray-background.full {
    min-height: calc(100vh);
}
.full-height {
    min-height: 100vh;
}
p {
    font-size: 0.8rem;
}
a,
a:active,
a:focus,
a:hover {
    color: #FFF;
    text-decoration: none;
}
.font-gray {
    color: #A7AECA;
}

@media all and (max-width:600px) {
    .mobile-mt-50 {
        margin-top: 50% !important;
    }
}

.flex-100 {
    display: flex;
    height: 100%;
}
.flex-100 img {
    object-fit: contain;
}

.center-bottom-front {
    font-size: 3rem;
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.container-title {
    background-color: #2F313E;
    height: 28px;
    font-weight: bold;
    line-height: 1.7;
}
.container-title small {
    font-weight: bold;
}

.container.phase {
    position: absolute;
    bottom: 20px;
}

.mid {
    display: flex;
}

.loading {
    color: transparent;
    background-image: url(/Assets/Images/loader.gif);
    background-size: 25px;
    background-position: 50%;
    background-repeat: no-repeat;
}

.bartec-check {
    color: #A7AECA;
}

/* video */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width: 1200px) {
    .video-container iframe {
        width: 50%;
        height: 50%;
    }
}

/* table */
.table {
    color: #FFF;
    font-weight: 100;
}
.table th {
    color: #A7AECA;
    font-weight: 100;
    width: 200px;
}
@media (max-width: 576px) {
    .table th {
        width: auto;
    }
}
.table td, .table th {
    border-top: 1px solid #FFF;
    font-size: 0.8rem;
    padding: 0.4rem;
}
.table-borderless tbody+tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
    border: 0;
}
.table-borderless td {
    padding: 0.2rem 0.4rem;
}
.fixed-first-col td:first-child {
    width: 100px;
}

/* images */
.img-thumbnail {
    border-color: transparent;
    background-color: transparent;
}

.img-thumbnail.question {
    width: 103px;
    height: 103px;
}

.images {
    max-width: 500px;
}
.images .row {
    align-items: center
}
.build-images {
    max-width: 700px;
}

/* checklist */
.checklists {
    padding-right: 0;
    padding-left: 0;
}
.checklists .checklist,
.checklists .checklist.green,
.checklists .checklist.red {
    padding-left: 0.7rem;
    border-left-width: 0.3rem;
    border-left-style: solid;
    border-bottom: 1px solid #FFF;
    position: relative;
}
.checklists .checklist {
    border-left-color: #44495C;
    min-height: 58px;
}
.checklists .checklist.green {
    border-left-color: #088344;
}
.checklists .checklist.red {
    border-left-color: #CB0538;
}
.checklists .checklist .title {
    color: #A7AECA;
    padding: 16px 0 6px 0;
    font-size: 17px;
    max-width: 80%;
}
.checklists .checklist .text ul {
    padding-left: 1.3rem;
    width: 90%;
    font-size: 0.8rem;
}
.checklists .checklist .row {
    margin: 0;
}
.checklists .checklist .comment {
    margin-bottom: 0.5rem;
}
.checklists .checklist .more,
.checklists .edit-position {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -10%);
    width: 10%;
    z-index: 1;
}
.checklists .overlap.close {
    display: none;
}
.checklists .overlap {
    background: #2F313E;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    font-size: 1.4rem;

    padding-top: 8px;
    padding-bottom: 8px;
    height: 58px;
}
.checklists .overlap .option {
    margin: 0 1rem;
    float: left;
    max-height: 40px;
}
.checklists .overlap .option .green,
.checklists .overlap .option .red,
.checklists .overlap .option .gray {
    border-radius: 100%;
    position: relative;

    width: 30px;
    height: 30px;
    margin-top: 5px;
    font-size: 33px;
}
.checklists .overlap .option .green .fa-check-circle:before {
    background: url(/Assets/Images/Icons/check_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
    display: inline-table;
}
.checklists .overlap .option .red .fa-times-circle:before {
    background: url(/Assets/Images/Icons/close_red.svg) no-repeat;
    background-size: 100%;
    color: transparent;
    display: inline-table;
}
.checklists .overlap .option .gray .fa-camera:before {
    background: url(/Assets/Images/Icons/camera_circle_gray.svg) no-repeat;
    background-size: 100%;
    color: transparent;
    display: inline-table;
}
.checklists .overlap .option .gray .fa-edit:before {
    background: url(/Assets/Images/Icons/comment_gray.svg) no-repeat;
    background-size: 85%;
    margin-top: 2px;
    color: transparent;
    display: inline-table;
}
.checklists .overlap .option .green i,
.checklists .overlap .option .red i,
.checklists .overlap .option .gray i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.checklists .check-image {
    max-width: 100px;
}
.checklists .check-image img {
    object-fit: cover;
    width: 70px;
    height: 70px;
}

.checklists .edit-position {
    font-size: 15px;
    transform: translate(0, -50%);
}
@media (max-width: 400px) {
    .checklists .check-image img {
        width: 46px;
        height: 46px;
    }

    footer .col {
        padding-right: 5px;
        padding-left: 5px;
    }
}

.circle {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    display: inline-block;
}

.circle.yellow {
    background-color: #F0E214;
}

.circle.green {
    background-color: #238534;
}

.circle.blue {
    background-color: #0A77BC;
}

.circle.white {
    background-color: #FFFFFF;
}

.circle.red {
    background-color: #A9151A;
}

.circle.black {
    background-color: #000000;
}

.circle.orange {
    background-color: #CF861D;
}

.circle.purple {
    background-color: #541165;
}

.circle.brown {
    background-color: #773610;
}

.circle.pink {
    background-color: #C989A1;
}

.diameter td {
    column-width: 36px;
    height: 28px;
}

.diameter td span {
    margin-right: 8px;
    vertical-align: middle;
    font-size: 0.8rem;
}

.question-text {
    margin-left: 10px;
    font-size: 0.8rem;
}

/* modal */
.modal .modal-dialog {
    margin: 0;
    height: 100vh;
}
.modal .modal-content {
    margin: 0;
    height: 100vh;
    width: 100vw;
    border-radius: 0;
}
.modal textarea {
    color: #FFF;
    background-color: #44495C;
    border: none;
    padding: 1rem;
}
.modal .btn-block+.btn-block {
    margin-top: 0;
}
.modal img {
    max-width: 50%
}
@media (min-width: 768px) {
    .modal textarea {
        padding-left: 100px;
    }
}
@media (min-width: 1200px) {
    .modal textarea {
        padding-left: 200px;
    }
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #FFF;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #FFF;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #FFF;
}

/* object infos */
.textInput {
    background: #44495C;
    border: #44495C;
    color: #FFF;
    padding: 0.5rem;
    border-bottom: 1px solid #FFF;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.textInput:focus {
    outline: none;
}
.textInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #A7AECA;
    opacity: 1; /* Firefox */
}
.textInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #A7AECA;
}
.textInput::-ms-input-placeholder { /* Microsoft Edge */
    color: #A7AECA;
}
.object {
    padding-right: 0;
    padding-left: 0;
}
.object .small-title {
    margin-top: 0.5rem;
    color: #A7AECA;
}

/* status bar */
.status {
    padding: 1rem 0;
}
.status .round:first-child {
    margin-left: 0;
}
.status .round {
    border-radius: 100%;
    background-color: #A7AECA;
    width: 30px;
    height: 30px;
    text-align: center;
    float: left;
    position: relative;
    margin-left: 20px;
    padding: 3px;
}
.status .round.green,
.status.horizontal .round.green {
    background-color: #088344;
}
.status .round:after {
    content: "";
    width: 20px;
    border-top: 1px solid #FFF;
    float: right;
    position: absolute;
    right: -20px;
    bottom: 50%;
}
.status .round:last-child:after,
.status.horizontal .round:last-child:after{
    content: initial;
}
.status.horizontal {
    
}
.status.horizontal .round {
    float: none;
    margin-left: 0;
    margin-top: 20px;
}
.status.horizontal .round:after {
    content: "";
    height: 20px;
    border-top: none;
    border-left: 1px solid #FFF;
    float: right;
    position: absolute;
    right: 0;
    left: 50%;
    bottom: -20px;
}
.status.horizontal .text {
    float: right;
    font-size: 0.7rem;

    width: 90%;
    padding-left: 1rem;
    margin-top: -2rem;
}
.status.horizontal .text .title {
    color: #A7AECA;
    font-weight: bold;
}

/* contact */
.contact-list {
    border-bottom: 1px solid #FFF;
    padding: 1rem 0;
}
.contact-list a {
    color: #FFF;
    text-decoration: none;
}
.contact-region {
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding: 1rem 0;
}
.contact-region i {
    margin-left: 30px;
}
.contact-image {
    max-height: 70px;
    max-width: 70px;
    float: right;
    object-fit: cover;
}

/* lightbox */
.imageLightbox .modal-dialog {
    margin: 0;
}
.imageLightbox .modal-content {
    height: 100vh;
    width: 100vw;
    border-radius: 0;
}
.imageLightbox .close {
    padding: 20px;
    color: #FFF;
    text-shadow: none;
    opacity: 1.0;
}
.imageLightbox img {
    width: auto;
    height: auto;
    margin: auto;
    max-width: 50%;
}
@media (max-width: 400px) {
    .imageLightbox img {
        max-width: 100%;
    }
}

/* footer */
.footer {
    padding-top: 3rem;
}
footer {
    height: 52px;
    border-top: 1px solid #FFF;
    background-color: #44495C;
    text-align: center;
    padding-top: 5px;
}
footer a,
footer div {
    color: #878992;/*565B70*/
}
footer a.active,
footer a:active,
footer a:focus,
footer div.active {
    color: #FFF;
    text-decoration: none;
}
footer small {
    font-size: 10px;
    font-weight: 100;
}

@media (max-width: 350px) {
    footer small {
        font-size: 8px;
        font-weight: 100;
    }
}

/* Icons */
footer .fa-camera:before,
footer .fa-book-open:before,
footer .fa-user:before,
footer .fa-newspaper:before,
footer .fa-eye:before {
    display: block;
}

.fa-ellipsis-h:before {
    background: url(/Assets/Images/Icons/ellipsis_white.svg) no-repeat;
    color: transparent;
    background-size: 100%;
}
.fa-camera:before {
    background: url(/Assets/Images/Icons/camera_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
}
.fa-edit:before {
    background: url(/Assets/Images/Icons/edit_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
    padding-bottom: 2px;
}
.fa-book-open:before {
    background: url(/Assets/Images/Icons/book_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
}
.fa-user:before {
    background: url(/Assets/Images/Icons/contact_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
    display: inline-table;
}
.fa-newspaper:before {
    background: url(/Assets/Images/Icons/paper_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
}
.fa-eye:before {
    background: url(/Assets/Images/Icons/eye_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
}
.fa-trash-alt:before {
    background: url(/Assets/Images/Icons/delete_white.svg) no-repeat;
    background-size: 100%;
    color: transparent;
}

.modal .fa-trash-alt{
    line-height: 2;
    font-size: 20px;
}

footer .fa-camera,
footer .fa-book-open,
footer .fa-user,
footer .fa-newspaper,
footer .fa-eye {
    font-size: 20px;
}

footer div:not(.active) .fa-camera:before {
    background-image: url(/Assets/Images/Icons/camera_gray.svg);
}
footer a:not(.active) .fa-book-open:before {
    background-image: url(/Assets/Images/Icons/book_gray.svg);
}
footer a:not(.active) .fa-user:before {
    background-image: url(/Assets/Images/Icons/contact_gray.svg);
}
footer a:not(.active) .fa-newspaper:before {
    background-image: url(/Assets/Images/Icons/paper_gray.svg);
}
footer a:not(.active) .fa-eye:before {
    background-image: url(/Assets/Images/Icons/eye_gray.svg);
}