/* Common ----------------------------------------- */
.navbar-brand,
.navbar-brand:focus,
.navbar-brand:hover{
    color: #71748d
}

.collapse.submenu.in {
    display: block !important;
}

.btn {
    margin-bottom: 2px
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary:active
.btn-secondary.focus,
.btn-secondary.active,
.btn-outline-secondary.focus,
.btn-outline-secondary.active {
    box-shadow: none !important;
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
    color: #3d405c;
}

.btn:focus {
    box-shadow: none !important;
}

.clickable {
    cursor: pointer;
}

.font-weight-bolder {
    font-weight: 600 !important;
}

.dropdown-special.show {
    width: 100%;
    padding: 10px;
}

input[type="file"] {
    box-shadow: none;
    border-color: transparent !important;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
    cursor: pointer;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.fa-exclamation-triangle, .fa-trash-alt {
    color: red;
}

.fa-exclamation-circle {
    color: blue;
}

.field-validation-error {
    color: red;
}

.fa-truck, .fa-hammer{
    color: green;
    font-weight: bold;
}

.fa-lock {
    color: #003252;
}

.blockOverlay {
    background: repeating-linear-gradient(-45deg,#fff,#fff 3px,#efeff6 3px,#efeff6 6px) !important;
    opacity: 0.6 !important;
    cursor: default !important;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.popover {
    padding: 10px;
}

.fixed-bottom-right {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.fixed-top-right {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10000;
}

.table-nonfluid {
    width: auto !important;
}

tr.active td {
    background-color: #DDD !important;
}

.btnCollapse {
    color: #003252;
    padding-right: 0px;
}

/* Scoll  ----------------------------------------- */
.slimScrollBar {
    background: #76B72A !important;
}

/* FilterTools----------------------------------------- */
.btn-filterTools {
    width: 24px;
    height: 24px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 10px;
    float: right;
    position: relative;
    top: 10px;
    right: -10px;
    border: 1px solid #e6e6f2;
    background: #fff;
}

/* Breadcrumb ----------------------------------------- */
.breadcrumb {
    padding: 0;
}

    .breadcrumb li {
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
    }

        .breadcrumb li.active {
            color: #3d405c;
        }

    .breadcrumb a {
        text-decoration: underline;
    }

/* ColorPicker ----------------------------------------- */
[data-tag-helper="colorPicker"] {
    padding: 1px;
}

[data-tag-helper="colorPicker"] span {
    height: 30px;
    width: 30px;
    display: block;
}

/* Progress ----------------------------------------- */
.projectOverviewProjectDescription {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
}

.projectOverviewPanelDescription {
    padding-right: 10px;
    white-space: nowrap;
}

.projectOverviewPanelGroup {
    font-style: italic;
}

.projectOverviewColumn {
    height: 200px;
    vertical-align: bottom;
}

.panelAttachmentAvailability .projectOverviewColumn {
    height: 100px;
}

.projectOverviewColumn div {
    transform: rotate(315deg);
    white-space: nowrap;
    width: 30px;
    padding-left: 15px;
}

.projectOverviewColumnSmall {
    vertical-align: bottom;
    padding-bottom: 10px;
}

    .projectOverviewColumnSmall div {
        transform: rotate(315deg);
        font-size: 12px;
    }

.projectOverviewNotPlanned, .projectOverviewScheduled, .projectOverviewScheduledDifferentDay, .projectOverviewCompletedDifferentDay, .projectOverviewCompleted, .projectOverviewCouldNotComplete, .projectOverviewNotCompleted {
    text-align: center;
}

    .projectOverviewNotPlanned:before {
        content: "-";
        color: grey;
    }

    .projectOverviewScheduled:before {
        content: "O";
        font-weight: bold;
        color: white; /*#337ab7;*/
    }

.projectOverviewScheduled {
    background-color: #337ab7 !important;
}

.projectOverviewScheduledDifferentDay:before {
    content: "O";
    color: grey;
}

.projectOverviewCompleted {
    background-color: #00CC00 !important;
}

    .projectOverviewCompleted:before {
        content: "✓";
        color: white;
        font-weight: bold;
    }

.projectOverviewCompletedDifferentDay {
    background-color: #008000 !important;
}

    .projectOverviewCompletedDifferentDay:before {
        content: "✓";
        color: white;
    }

.projectOverviewNotCompleted {
    background-color: red !important;
}

.projectOverviewCouldNotComplete {
    background-color: darkorange !important;
}

    .projectOverviewNotCompleted:before, .projectOverviewCouldNotComplete:before {
        content: "x";
        font-weight: bold;
        color: white;
    }

.projectOverview a {
    color: black;
}

.projectOverview td {
    background-color: lightgray;
    border: 1px dotted black;
    padding-left: 4px;
    padding-right: 4px;
}

    .projectOverview td:nth-child(even) {
        background-color: white;
    }

    .projectOverview td:nth-child(1) {
        color: black;
        background-color: inherit;
    }

.projectOverview thead tr:nth-child(1) td {
    background-color: #fff;
    border: none;
}

.projectOverview tbody tr:nth-child(1) td {
    background-color: inherit;
}


.projectProgressLegenda table td:nth-child(1) {
    padding-right: 10px;
}

.projectProgressLegenda td {
    padding: 4px !important;
}

.projectOverviewStartDate {
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap;
}

.projectOverviewDeliveryDate {
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap;
    background-color: #ffffff !important;
}

.projectOverviewDimension, .projectOverviewTransportStand {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

/* Panel attachment availability ----------------------------------------- */
.attachmentAvailable, .attachmentNotAvailable, .attachmentNotNeeded, .attachmentNotApplicable {
    text-align: center;
}

.attachmentAvailable {
    background-color: #008000 !important;
}

.attachmentAvailable:before {
    content: "✓";
    color: white;
}

.attachmentNotAvailable {
    background-color: red !important;
}

.attachmentNotAvailable:before {
    content: "x";
    font-weight: bold;
    color: white;
}

.attachmentNotNeeded {
    background-color: white !important;
}

.attachmentNotNeeded:before {
    content: "-";
    color: grey;
}

.attachmentNotApplicable {
    background-color: white !important;
}

/* Progress NEW ----------------------------------------- */
.panelProgressNotScheduled, .panelProgressScheduled, .panelProgressScheduledForToday, .panelProgressCompleted, .panelProgressCompletedToday, .panelProgressBehindSchedule {
    text-align: center;
}

.panelProgressNotScheduled .panelProgressScheduled {
    color: grey;
}

.panelProgressScheduledForToday {
    background-color: #337ab7 !important;
    color: white;
}

.panelProgressCompleted {
    background-color: #008000 !important;
    color: white
}

.panelProgressCompletedToday {
    background-color: #00CC00 !important;
    color: white
}

.panelProgressBehindSchedule {
    background-color: red !important;
    color: white;
}

.panelProgressDate {
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap;
    background-color: #ffffff !important;
}

.panelProgressCurrentDate {
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap;
    background-color: lightgrey !important;
}

.panelProgressData {
    text-align: right;
}

.panelProgressEmptyRow {
    border-left: 0px !important;
    border-right: 0px !important;
}

.panelProgressTable td {
    background-color: #E8E8E8;
    border: 1px dotted black;
    padding-left: 4px;
    padding-right: 4px;
}

.panelProgressTable td:nth-child(even) {
    background-color: white;
}

.panelProgressTable td:nth-child(1) {
    background-color: white;
}

.panelProgressTable thead tr:nth-child(1) td {
    background-color: white;
    border: none;
}

.panelProgressTable thead tr:nth-child(2) td {
    background-color: white;
}

/* Panels  ----------------------------------------- */
.stateCountTable .panelState {
    height: 30px;
    width: 30px;
    background-size: 40px 40px;
}

.stateCountTable tr:first-child td {
    text-align: right;
}

.stateCountTable td {
    text-align: right
}

    .stateCountTable td:last-child {
        text-align: left
    }

.stateCountTable .total td {
    border-top: double;
}

.stateCountTable td {
    padding: 0 5px 5px 0;
    font-size: 12px;
}

.panelCardsContainer.grid {
    display: grid;
    grid-template-rows: auto calc(100vh - 200px);
}

    .panelCardsContainer.grid > .header {
        grid-row: 1;
    }

    .panelCardsContainer.grid > .content {
        grid-row: 2;
        overflow-y: auto;
    }

.panelCards.grid {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 5px;
    /*grid-template-columns: calc(16.6% - 5px) 16.6% 16.6% 16.6% 16.6% calc(16.6% - 18px);*/
    grid-template-columns: calc(calc(100% / 6) - 5px) calc(calc(100% / 6) - 5px) calc(calc(100% / 6) - 5px) calc(calc(100% / 6) - 5px) calc(calc(100% / 6) - 5px) calc(calc(100% / 6) - 5px);
}

.panelCards .card {
    margin-bottom: 15px;
}

.panelCards .dirty {
    background-color: #EEFFFF;
}

.panelCards .selected {
    background-color: #f5f5f5
}
.panelCards .placeholder {
    border: 1px solid #d8d8da;
    /*background: #d8d8da;*/
    margin-bottom: 15px;
}

.panelCards .weekHeader {
    grid-row: 1;
    text-align: center;
    font-weight: bold;
    color: #359038;
    padding: 0 0 10px 0;
}

.panelCards .statusIcons {
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

.facadeType {
    border: 3px solid #DDDDDD;
    background-color: #FFFFFF;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 32px;
    font-size: 20px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: inline-block;
    vertical-align: top;
}

.facadeType {
    border-color: #DDDDDD;
}

.facadeType.none {
    border-color: #DDDDDD;
}

.facadeType.head {
    background: #DDDDDD;
}

.facadeType.front {
    border-style: dashed;
}

.facadeType.back {
    border-style: dotted;
}

.panelCards .panelState, .panelState {
    border: 3px solid #DDDDDD;
    background-color: #FFFFFF;
    height: 40px;
    width: 40px;
    background-position: center;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: inline-block;
    vertical-align: top;
}

    .panelCards .panelState.none {
        border-color: #DDDDDD;
    }

    .panelCards .panelState.notplanned, .panelState.notplanned {
        border: 3px solid #DDDDDD;
        background-image: url("/content/styles/images/PanelStateNotPlanned.png");
    }

    .panelCards .panelState.planned, .panelState.planned {
        border: 3px solid #FDD835;
        background-image: url("/content/styles/images/PanelStatePlanned.png");
    }

    .panelCards .panelState.plannednotakt, .panelState.plannednotakt {
        border: 3px solid #FF0404;
        background-image: url("/content/styles/images/PanelStatePlannedNoTakt.png");
    }

    .panelCards .panelState.inprogress, .panelState.inprogress {
        border: 3px solid #00B0FF;
        background-image: url("/content/styles/images/PanelStateProgress.png");
    }

    .panelCards .panelState.completed, .panelState.completed {
        border: 3px solid #5CB85C;
        background-image: url("/content/styles/images/PanelStateCompleted.png");
    }

    .panelCards .panelState.delivered, .panelState.delivered {
        border: 3px solid #5CB85C;
        background-image: url("/content/styles/images/PanelStateDelivered.png");
    }

.panelCards .error {
    text-decoration-line: underline;
    text-decoration-color: red;
}

.panelCards .card-header {
    padding: 0;
}

.panelCards .card-body, .panelCards .panel-footer {
    padding: 0.5rem;
}

.panelCards .card-footer {
    display: none;
    background: #f7f7fb
}

.panelCards .start {
    color: #359038;
    display: block;
    margin-bottom: 5px;
}

/* Production state icons  ----------------------------------------- */
.productionStateIcon {
    display: inline-flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    height: 20px;
    width: 20px;
}

.productionStateIcon.notplanned {
    color: #DDDDDD;
    border: 3px solid #DDDDDD;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.productionStateIcon.planned {
    color: #FDD835;
}

.productionStateIcon.plannednotakt {
    color: #FF0404;
}

.productionStateIcon.inprogress {
    color: #00B0FF;
    background: conic-gradient(#00B0FF 0deg 225deg, transparent 225deg 360deg);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    vertical-align: middle;
}

.productionStateIcon.completed {
    color: green;
}


.productionStateIcon.delivered {
    color: green;
}

/* Color picker  ----------------------------------------- */
.pickedColor {
    float: right;
    display: block;
    width: 20px;
    height: 20px;
}

/* PlanningChart  ----------------------------------------- */

.planningChartProjectSelector {
    padding: 0;
    margin: 0;
    height: 215px;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
}

.planningChartProjectSelector .planningChartProjectItem {
    margin: 0 3px 2px 0;
    padding: 7px 12px;
    width: 100%;
    cursor: pointer;
    border-radius: 2px;
    background: rgb(240, 240, 240);
}

.planningChartProjectSelector .planningChartProjectItem:hover {
    background: rgb(230, 230, 230);
}

.planningChartProjectSelector .planningChartProjectItem.isSelected {
    background: rgb(0, 150, 255);
    color: white;
}

.planningChartProjectSelector .planningChartProjectItem div:nth-child(1) {
    display: inline-block;
    width: 90%;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.planningChartProjectSelector .planningChartProjectItem div:nth-child(2) {
    display: inline-block;
    width: 10%;
    vertical-align: middle;
}

.planningChartProjectColor {
    float: right;
    display: block;
    width: 20px;
    height: 20px;
}

.planningChartSummary {    
    text-align: right;
}

/* ProductionCycle  ----------------------------------------- */

.productionCycleTimerContainer {
    line-height: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .productionCycleTimerContainer .currentMessage div {
        padding-top: 0px;
        padding-bottom: 20px;
        padding-left: 100px;
        padding-right: 100px;
        right: 100px;
    }

.productionCycleTimer {
    border: 10px solid #4cae4c !important;
    font-size: 20vw;
    text-align: center;
}

table.productionCycleSummary {
    line-height: 1;
    width: 100%;
    margin: auto;
    margin-top: 80px;
}

.productionCycleSummary th, .productionCycleSummary td {
    border: 10px solid #2e6da4 !important;
    width: 20%;
}

.productionCycleSummary th {
    font-size: 2.44vw !important;
    background-color: #337ab7;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.productionCycleSummary td {
    font-size: 14.6vw !important;
}

.productionCycleSummary td.small {
    font-size: 7.8vw !important;
}

.productionCycleSummary td.length4 {
    font-size: 9vw !important;
}

.productionCycleSummary td.length5 {
    font-size: 8vw !important;
}

.productionCycleSummary td.length6 {
    font-size: 7vw !important;
}

.productionCycleOverview th, .productionCycleOverview td {
    border: 10px solid #2e6da4 !important;
    width: 10%;
}

.productionCycleOverview th {
    font-size: 30px !important;
    background-color: #337ab7;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.productionCycleOverview td {
    font-size: 70px !important;
    height: 125px;
}

    .productionCycleOverview td:first-child {
        font-size: 30px !important;
        width: 20%;
    }

.productionCycleTransport, .productionCycleBreak, .productionCycleOutsideWorkingHours, .productionCycleBufferOnTrack, .productionCycleBufferNotOnTrack, .productionCycleBreakdown {
    color: #fff;
    height: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 20px;
}

.productionCycleTransport, .productionCycleBufferOnTrack, .productionCycleBufferNotOnTrack {
    border: 10px solid #eea236 !important;
    background-color: #f0ad4e;
    font-size: 205px;
}

.productionCycleTransport, .productionCycleBufferOnTrack {
    font-size: 205px;
}

.productionCycleBufferNotOnTrack {
    font-size: 275px;
    line-height: 410px;
}

.productionCycleBufferNotOnTrackBadge, .productionCycleBufferOnTrackBadge {
    border: 10px solid #eea236 !important;
    background-color: #f0ad4e;
    font-size: 20px !important;
    line-height: 20px !important;
    margin: 5px 10px 5px 10px;
}

.productionCycleBreak, .productionCycleOutsideWorkingHours {
    border: 10px solid #4cae4c !important;
    background-color: #5cb85c;
    font-size: 440px;
}

.productionCycleBreakdown {
    border: 10px solid red !important;
    background-color: #a94442;
    font-size: 320px;
    line-height: 444px;
}

.productionCycleOutsideWorkingHours {
    font-size: 205px;
}

.productionCycleSmall .productionCycleTimer {
    font-size: 40px !important;
    border-width: 4px !important;
    border-radius: 4px !important;
    background-color: #5cb85c;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    margin: 0px;
}

.productionCycleSmall .productionCycleTransport,
.productionCycleSmall .productionCycleBufferOnTrack,
.productionCycleSmall .productionCycleBufferNotOnTrack,
.productionCycleSmall .productionCycleBreak,
.productionCycleSmall .productionCycleOutsideWorkingHours,
.productionCycleSmall .productionCycleBreakdown {
    font-size: 20px !important;
    border-width: 4px !important;
    border-radius: 4px;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0px;
}

.productionCycleSmall .productionCycleOutsideWorkingHours, .productionCycleSmall .productionCycleBufferOnTrack {
    font-size: 27px !important;
    padding-top: 11px;
    padding-bottom: 10px;
}

.productionCycleSmall .productionCycleBreak {
    font-size: 40px !important;
    line-height: 40px !important;
    padding-top: 29px;
    padding-bottom: 28px;
}

.productionCycleSmall .productionCycleTransport {
    padding-top: 21px;
}

.productionCycleSmall .productionCycleBufferNotOnTrack {
    line-height: inherit;
    padding-top: 35px;
    padding-bottom: 34px;
}

.productionCycleSmall .productionCycleBreakdown {
    font-size: 29px !important;
    line-height: 40px !important;
    padding-top: 29px;
    padding-bottom: 28px;
}

/* Quality  ----------------------------------------- */

.qualitycontrol .card .card-header {
    cursor:pointer;
}

.qualitycontrol td {
    height: 50px;
}

.checkliststate.ok {
    color: #76B72A;
    background-color: #76B72A;
}

.checkliststate.partiallyanswered {
    color: orange;
    background-color: orange;
}

.checkliststate.disapproval {
    color: red;
    background-color: red;
}

.checkliststate.nonmandatory {
    color: lightgreen;
    background-color: lightgreen;
}

.checkliststate.unanswered {
    color: lightgray;
    background-color: lightgray;
}

.checkPointresult.approval {
    color: #76B72A;
}

.checkPointresult.disapproval {
    color: red;
}

.checkPointresult.correction {
    color: orange;
}

.checkPointresult.yes {
    color: #76B72A;
}

.checkPointresult.no {
    color: red;
}

.checkPointresult.notapplicable {
    color: gray;
}

.checkPointresult.unanswered {
    color: gray;
}

/* Panel detail -------------------------------------------- */

.panelDetailPdfContainer {
    width: 100%;
    height: 100%;
}

.panelDetailPdfContainer iframe {
    width: 100%;
    height: calc(100vh - 280px); /* subtract the height of the header and footer */
    min-height: 300px;
}

/* Validation summary  ----------------------------------------- */

.validation-summary-errors {
    padding: 12px;
    margin: 0;
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

    .validation-summary-errors ul {
        padding: 0;
        margin: 0;
    }

.validation-summary-valid {
    display: none;
}

/* Rejected panel  -------------------------------------------- */
.panelRejected {
    color: #004085 !important;
    text-decoration: line-through !important;
}

    .panelRejected a {
        color: #004085 !important;
        text-decoration: line-through !important;
    }

/* Layout fullscreen  -------------------------------------------- */
.fullScreenContent {
    padding-top: 5px;
    background: #fff;
    color: black;
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
}

    .fullScreenContent .text-danger {
        color: #a94442 !important;
    }

    .fullScreenContent .text-success {
        color: #3c763d !important;
    }


/* Layout processingStation  ------------------------------------- */

.processingStationLayout {
    display: grid;
    height: 100%;
}

    .processingStationLayout body {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
        min-height: 0%;
        overflow: auto;
    }

.processingStationContent {
    overflow: auto;
    /*padding-top: 0px;*/
}

/* Planning overview ------------------------------------- */
.planningOverviewItem {
    font-size: 1.5em;
}

    .planningOverviewItem small {
        font-size: 0.6em;
    }

    .planningOverviewItem td:nth-child(odd) {
        line-height: 60px;
    }

/* Planning detail  ------------------------------------- */

.planningDetail {
    display: grid;
    height: 100%;
    overflow: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;    
}
/* Planning element scannen ------------------------------------- */

.planningScanElement {
    height: 100%;
}

.planningScanElement form {
    width: 100%;
    max-width: 1200px;
}

.planningScanElement input[type=text] {
    min-height: 50px;
    line-height: 1.5;
    font-size: clamp(12px, 7vw, 80px);
    width: 100%;
}

.planningScanElement input[type=submit] {
    height: 50px;
    font-size: 22px;
    width: 100%;
}

.planningScanElement .alert {
    font-size: 18px;
}

/* Planning element controleren na scannen  ------------------------------------- */
.planningCheckElement {
    width: 100%;
    height: 100%;
}

.planningCheckElement .checkElementContent {
    width: 100%;
    max-width: 1200px;
}

/*.planningCheckElement .card-body {
    padding: 10px 15px;
}
*/
.planningCheckElement .element-table {
    min-height: 50px;
    line-height: 1.3;
    font-size: clamp(16px, 3vw, 34px);
    width: 100%;
}

.planningCheckElement input,
.planningCheckElement a{
    height: 50px;
    font-size: 22px;
    width: 100%;
    text-align: center;
}

.planningCheckElement .alert {
    font-size: 18px;
}

/* Planning detail 2 ------------------------------------- */

.processing-station-page {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    overflow: auto;
    position: relative;
}

.processing-station-page .aside {
    width: 475px;
    height: 100%;
    padding: 10px 13px 10px 0px;
    background-color: #efeff6;
    border-right: 1px solid #e6e6f2;
    overflow: auto;
}

.processing-station-page .sidebar-content {
    height: 100%;
    overflow: auto;
    padding-left: 10px;
    padding-right: 2px;
}

.processing-station-page .btn-collapseSideBar {
    position: absolute;
    width: 24px;
    height: 24px;
    padding: 0px 0px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    line-height: 10px;
    left: 475px;
    transform: translate(-50%, -50%);  /*center on right edge vertically */
    top: 20px;
    border: 1px solid #e6e6f2;
    background: #fff;
    z-index: 1;
}

.processing-station-page .card {
    margin-bottom: 0px;
}

.processing-station-page .card-body {
    padding: 15px 15px;
}

.processing-station-page .tasks .card-body {
    padding: 0px;
}

.processing-station-page .station-card {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 5px;
}

.processing-station-page .station-card .left-side {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.processing-station-page .station-card .station-actions {
    align-self: end;
}

.processing-station-page .station-table td:not(:last-child) {
    padding-right: 10px; /* add extra space to the right of each column except the last */
}

.processing-station-page .mainContainer {
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 300px;
    height: 100%;
    overflow: auto;
    padding: 10px 10px 0px 15px;
}

.processing-station-page .planningDetailPdfContainer {
    height: 100%
}

.processing-station-page .contentContainer {
    height: 100%;
    overflow: visible;
}

.processing-station-page .contentContainer iframe {
    width: 100%;
    height: 100%;
}

.processing-station-page .footerContainer {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 3px;
    overflow: auto;
    max-height: 100px;
    min-height: 45px;
    width: 100%;
    margin: 5px 0px;
}

.buttonsContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* aligns items at the top of each row */
    align-content: flex-start; /* aligns wrapped lines at the top of the container */
    gap: 3px;
}

.buttonsContainer :is(a, span) {
    display: inline-flex;
    align-items: center;
    height: 45px;
    margin: 0px 0px 0px 0px;
}

.taskSelector {
    padding: 10px 15px;
}

.taskSelector.active {
    background-color: #b1dfbb;
    border-color: #5cb85c;
}

.taskSelector .taskDescription {
    line-height: 34px;
    font-size: 18px;
    color: #000;
    cursor: pointer;
}

.taskSelector .taskDescription.active {
    color: #000;
}

/* Search ------------------------------------- */
.panelSearch td {
    padding: 2px;
    padding-left: 20px;
}

/* PlanningGroupOverview -----*/
.currentDate {
    height: 34px;
    line-height: 34px;
}

.planningGroupOverview td {
    border: 1px dotted;
    vertical-align: middle !important;
}

    .planningGroupOverview td.task {
        width: 45px;
    }

.planningGroupOverview th.task div {
    transform: rotate(290deg);
    white-space: nowrap;
    width: 30px;
    padding-left: 15px;
    font-size: 9px;
}

.planningGroupOverview .groupTop {
    border-top: 4px solid black !important;
}

.planningGroupOverview .groupLeft {
    border-left: 4px solid black;
}

.planningGroupOverview .groupRight {
    border-right: 4px solid black;
}

.planningGroupOverview tbody tr:last-child .groupData {
    border-bottom: 4px solid black;
}

.planningGroupOverview .groupFloatRight {
    float: right;
}

.planningGroupOverview .remarks {
    line-height: 30px;
    vertical-align: middle;
}

.planningGroupOverview img {
    height: 28px;
}

/* GlueTablePlanning -----*/
.GlueTable-Prepare {
    background-color: #DEC436;
    border: 1px solid #DEC436;
}

.GlueTable-Glue {
    background-color: #359248;
    border: 1px solid #359248;
}

.GlueTable-Pressing {
    background-color: #9e0f0f;
    border: 1px solid #9e0f0f;
}

.GlueTable-Transport {
    background-color: #034978;
    border: 1px solid #034978;
}

.GlueTable-OperationCompleted {
    opacity: 0.25;
}

@media print {
    /* SkedTape print customizations */
    /* Hide popover in print. */
    .popover {
        display: none !important;
    }

    /* Print is optimized for prepare team */
    .GlueTable-Prepare {
        width: auto !important;
    }

    /* Hide unnecessary operation */
    .GlueTable-Glue {
        display: none !important;
    }

    /* Hide unnecessary operation */
    .GlueTable-Pressing {
        display: none !important;
    }

    /* Hide unnecessary operation */
    .GlueTable-Transport {
        display: none !important;
    }

    /* End SkedTape print customizations */
}

/* Gluetabel monitor ------------------- */
.glueTableLogDetail .progressIndicator {
    margin-top: -2px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
}

.glueTableLogTimer {
    color: black !important;
    padding-top: 00px;
    padding-bottom: 50px;
    margin: 0px;
    text-align: center;
}

    .glueTableLogTimer .remainingTime {
        border: 10px solid #4cae4c !important;
        border-radius: 4px !important;
        font-size: 2vw;
    }

    .glueTableLogTimer .readyMessage {
        border: 10px solid #4cae4c !important;
        border-radius: 4px !important;
        padding: 30px;
        font-size: 6vw;
    }

    .glueTableLogTimer .danger {
        border: 10px solid red !important;
        background-color: #a94442 !important;
        color: #fff !important;
    }

    .glueTableLogTimer .warning {
        border: 10px solid #eea236 !important;
        color: #f0ad4e !important;
    }

    .glueTableLogTimer td {
        font-size: 10vw;
    }

.glueTableLogOverview .card-body {
    min-height: 300px;
}

.glueTableLogOverview .panelDescription {
    font-size: 16px;
}

.glueTableLogOverview .remainingTime {
    color: #fff !important;
    background-color: #5cb85c;
}

.glueTableLogOverview .warning {
    border: 10px solid #eea236 !important;
    background-color: #f0ad4e;
    color: #fff !important;
}

.glueTableLogOverview .glueTableLogTimer td {
    font-size: 2vw;
}

.glueTableLogOverview .glueTableLogTimer .readyMessage {
    font-size: 2vw;
}

/* IKB ------------------- */
.readonly-input-group-text {
    border: 1px solid #d2d2e4;
    border-radius: 2px;
    background-color: #e9ecef;
    overflow: hidden;
    padding: 6px 12px;
}

    .readonly-input-group-text a {
        color: #337ab7;
        text-decoration: underline;
    }

/* Power BI ------------------- */
.powerbi-container {
    height: calc(0.5625 * 70vw); /* 16:9 aspect ratio */
}

iframe {
    border: none;
}

@media only screen and (max-width: 574px) {
    .powerbi-container {
        height: calc(0.5625 * 100vw); /* 16:9 aspect ratio */
    }
}

/* ForgeViewer ------------------- */
.forgeviewer-container {
    height: calc(100vh - 5px);
    width: calc(100vw - 0px);
}

/* Search ------------------- */
.panelSearch > input {
    width: 300px;
    margin: 7px 10px;
    padding: 5px 1rem 5px 3.2rem;
    font-size: 16px;
    color: #82849f;
    border-radius: 5rem;
    border: 2px solid #d2d2e4;
    outline: none;
    background-image: url(../../images/search.svg);
    background-size: 1.4rem;
    background-position: left 1.05rem top 0.6rem;
    background-repeat: no-repeat;
    background-origin: border-box;
}

    .panelSearch > input::placeholder {
        color: rgba(255, 122, 122, 0.5);
        transition: all 0.3s ease;
        -webkit-transition: all -webkit-transform 0.3s ease;
    }

    .panelSearch > input:hover::placeholder {
        color: rgba(255, 122, 122, 0.6);
        transition: all 0.3s ease;
        -webkit-transition: all -webkit-transform 0.3s ease;
    }

    .panelSearch > input:focus::placeholder {
        padding: 0.1rem 0.6rem;
        font-size: 0.95rem;
        color: rgba(255, 122, 122, 0.4);
    }

.searchResults a {
    text-decoration: underline !important;
}

.panel-search-pdf-container {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3px;
    height: 100%;
    overflow: auto;
}

.panel-search-pdf-container iframe {
    width: 100%;
    min-height: 80vh;
}

.panel-search-pdf-container .buttonsContainer {
    margin-bottom: 5px;
}

/* Custom context menu ------------------- */
.context-menu {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 6px 6px;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu li {
    padding: 2px 12px;
}

.context-menu li.disabled {
    color: silver
}

.context-menu li:not(.disabled) {
    cursor: pointer;
}

.context-menu li:not(.disabled):hover{
     background-color: #e2e2e2;
}

svg text[not-selectable] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Action menu ------------------- */

.action-row:hover {
    background-color: rgb(245,245,245);
}

.action-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 27px;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.dropdown-item {
    cursor: pointer;
}


.dropdown-item.disabled{
    cursor: default;
}

.action-menu:hover {
    background-color: rgb(230,230,230);
}

.action-menu-icon {
    color: transparent;
    text-align: center;
}

.action-row:hover .action-menu-icon {
    color: #71748d;
}

/* Sortable table ------------------- */

.sortable-table-row {
    cursor: pointer;
}

.sortable-table-row:hover {
    background-color: rgb(250,250,250);
}

.sortable-table-row.selected {
    background-color: rgb(245,245,245);
}

.ui-sortable-helper {
    background-color: rgb(245,245,245) !important;
}

/* Custom tabs ------------------- */

.custom-tabs {
    background-color: #07507E;
    border-color: transparent;
    border-radius: 0.4rem 0.4rem 0 0;
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 20px;
}

.custom-tabs .nav-item .nav-link {
    color: white;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0.4rem 0.4rem 0 0;
}

.custom-tabs .nav-item .nav-link:hover {
    background-color: #2275AA;
}

.custom-tabs .nav-item .nav-link.active {
    border: 1px solid #07507E;
    border-bottom-color: #efeff6;
    background-color: #efeff6;
    color: black;
    cursor: default;
}

.aside-content {
    height: 100%;
    padding-bottom: 16px;
}

.aside-header {
    height: 32px;
}

.aside-nav {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - 32px); 
}

/* PDF.js viewer ------------------- */

/* Style the border of the pdf viewer */
.pdf-viewer-container {
    width: 100%;
    height: 100%;
    background-color: rgb(212 212 215);
    border: 1px solid lightgray;
    border-radius: 3px;
    overflow: visible;
}

/* Give the pdf viewer the same style when opened in featherlight */
.featherlight.pdf-viewer iframe {
    height: 100%;
    background-color: rgb(212 212 215);
    border: 1px solid lightgray;
    border-radius: 3px;
}

/* Add padding around the pdf viewer when opened in featherlight */
.featherlight.pdf-viewer .featherlight-content {
    padding: 25px 10px 10px 10px;
    height: 100%;
    background-color: #efeff6;
}

/* collapsibleCard ------------------- */
.collapsibleCard {
    cursor: pointer;
}

.collapsibleCard i {
    float: right;
    padding-top: 3px;
}