body, p { font-family: Verdana, Sans-Serif; font-size: 13px; background-color: #EBEAC5 }
        textarea { font-family: Verdana, Sans-Serif; font-size: 13px; }
        h1, h2 { margin: 0; padding: 0; color: #5E807F; font-weight: 500; }
        h3 { color: #5E807F; font-weight: 500; margin: 1em 0; }
        .screen h2 { margin-bottom: 12px; }
        .doubleHeader { font-size: 18px; }
        a { text-decoration: underline; color: #FF7213; cursor:pointer; }
        .screen button { min-width: 80px; }
        screen .button.right { float: right; }
        screen .button.left { float: left; }
        #outer.print { width: 910px; }
        #outer { margin: 0 20px; width: calc(100% - 40px); border:solid 0px black; position: relative; }
        #mainHeader { position: relative; }
        #headline { padding: 6px; padding-left: 0; }
        #guideLink { margin-top: -30px; position: absolute; top: 0; right: 0 }
        #company-list {
            margin-top: -52px;
            position: absolute;
            top: 0;
            right: 0px;
        }
        #buttons { float: right; width: 94px; margin-top:0px; margin-right:6px;}
        #userDisplayHolder { position: absolute; right: 0; bottom: 10px; }
        #canvas {
            display: none;
            float: left;
            width: 100%;
            height: 75vh;
            border: solid 1px #28282E;
        }
#canvas2 {
    /*
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 75vh;
            */
}
        .screen { padding: 10px; display:none; min-width:888px; min-height:300px; border: solid 1px #403f15; border-radius: 4px; position: relative; }
        .screen a { line-height: 20px; }
        a.delete { background-image: url(img/delete.gif); background-position: 0 4px; background-repeat:no-repeat; padding-left: 12px; margin-left: 10px; font-size: 11px;  }
        .fgTypeHolder.leftSide { min-width: 40%; }
        @media screen and (max-width: 1280px) {
            .fgTypeHolder.leftSide { min-width: 50%; }
        }
        .fgTypeHolder.rightSide { }
        .fieldGroup { margin-top: 0px; margin-bottom: 5px; line-height: 18px; color:Black; }
        .fieldGroup:first-of-type { margin-top: 5px; }
        .fgTypeHolder { margin-top: 0px; margin-bottom: 5px;}
        .fgTypeHolder:first-of-type { margin-top: 5px; }
        .fgTypeHolder > .fieldGroup:first-of-type { margin-top: 0; }
        .fgTypeHolder > .fieldGroup:last-of-type { margin-bottom: 0; }
        .fieldGroup.fgspecific { margin-top: 0 } /* to be removed */
        .fieldGroup.fg2specific { margin-top: 0 } /* to be removed */
        .fgTypeHolder h4 {   margin: 0; margin-left: 120px; margin-bottom: 5px; }
        .fieldHeader { margin-top: 14px; margin-bottom: 5px; line-height: 18px; color:#910000; }
        #doorForm .fieldHeader { margin-top: 18px; }
        input[type="radio"], input[type="checkbox"] {vertical-align: middle; margin: 0 3px; }
        .projectLabel, .partitionLabel, .selectLabel, .radioLabel { width: 120px; float: left; }
        /*.projectLabel, .partitionLabel, .selectLabel { margin-top:3px; }*/
        /*Measurement screen*/
        .measurementLabel { padding-left: 14px; }
        .buttonHolder { clear:both; padding:10px; padding-bottom: 0; margin: auto; text-align: center}
        .buttonHolder:after { clear:both; content:""; display:table; }
        #partitionList, #projectList { min-height: 200px; }
        #projectPaginator { overflow-x: auto; }
        #projectPaginator a { margin-right: 6px; margin-top:12px; }
        #projectRight { float: left; }
        .projectLeft { float: left; min-width: 40%; padding-right: 20px; }
        @media screen and (max-width: 1280px) {
            .projectLeft { min-width: 50%; }
        }
        #canvasMeasurementsHolder { position: relative; }
        #screenMeasurementsLeftSideStop { opacity: 0.4; padding: 8px 0 8px 4px; background-color: white; position:absolute; left: 10px; top: 50%; transform: translateY(-50%); }
        #screenMeasurementsLeftSideStop select { width: 172px; margin-left:1px } /* the margin is set to trick the margin of dropdown box to be painted - they somehow dissapeared after the entire area was given left:10 as a property*/
        /*
        .mBoxContent #screenMeasurementsLeftSideStop { opacity: inherit; width: 170px; position: inherit; left: inherit; top: inherit; }
        .mBoxContent #screenMeasurementsLeftSideStop img { top: 10px !important; left: 200px !important;}
            */
        .mBoxContent #sideStopBox { opacity: inherit; position: inherit; left: inherit; top: inherit; }
        .mBoxContent #sideStopBox img { top: 10px !important; left: 200px !important;}

        #screenMeasurementsRightSideStop { opacity: 0.4; background-color: white; position:absolute; right: 10px; top: 50%; transform: translateY(-50%); }
        #screenMeasurementsRightSideStop select { max-width: 175px; }
        /*
        .mBoxContent #screenMeasurementsRightSideStop { opacity: inherit; width: 170px; position: inherit; right: inherit; top: inherit; }
        .mBoxContent #screenMeasurementsRightSideStop img { top: 10px !important; left: 200px !important;}
            */
        #screenMeasurementsTopStop{ opacity: 0.4; position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top:10px; text-align:center; }
        #screenMeasurementsWarning{ position:absolute; left: 0; right: 0; width: 100%; top:50px; text-align:center; }
            #screenMeasurementsWarning span {
                color: rgb(255, 84, 81);
                font-weight: bold;
                text-align: left;
                display: initial;
                width: 225px;
                background-color: #ffffff90;
                padding: 4px;
                padding-right: 0;
            }
        #screenMeasurementsBottomStop{ opacity: 0.4; position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; bottom:10px; }
        #partitionWidthMeasurements { float: left; min-width: 580px; }
        #partitionHeightMeasurements { float: left; clear: both; min-width: 580px; }
        #buttonAddWidths { float: left; margin-top: 49px; }
        #buttonAddHeights { float: left; margin-top: 49px; }

        .imperial .feet { width: 26px !important }
        .imperial .feet.small {
            width: 16px !important
        }
        .imperial .inches {
            width: 54px !important
        }
        #screenPanelsIndividualControls, #screenOptimizationIndividualControls { margin-left: 80px; position:relative; left:0; top:-54px }
        #screenPanelsGeneralControls { margin-top: 10px }
        .partitionData { height: 50px; margin: 10px; }
        .panelIndividuals { position: absolute; top : 0; visibility:visible; }
        .panelWidthButtons {
            display: flex;
            justify-content: space-between;
        }
        .panelWidthButtons .imperial { padding-left: 4px; }
        .panelHeightButtons { text-align: center; }
        .panelIndividuals .changeHeight { display: block; }
        .panelIndividuals input.changeWidth { width: 31px; padding:1px; margin-top: 3px; display: inline; border: solid 1px gray; }
        .panelIndividuals input.changeHeight { width: 35px; padding:1px; margin-top: 3px; display: inline; border: solid 1px gray; }
        .panelIndividuals .enforceHeight.holder { text-align: center; position: relative; top: -390px; }
        #screenPanelsIndividualControls button, #screenPanelsGeneralControls button, #screenOptimizationIndividualControls button { min-width: 20px; }
        .panelIndividuals .changeWidth.left, .panelIndividuals .changeWidth.right {
            padding: 0 !important;
        }
        .measurePos { width: 46px; position:absolute; left:0; top:-300px; padding:1px; border: solid 1px gray; text-align: center; background-color: white; }
        .leftJointPos { position:absolute; left:-13px; top:-299px; width:20px; padding:1px; border: solid 1px gray; text-align:center; opacity: 0.01; cursor:pointer; }
        .rightJointPos { position:absolute; right:-13px; top:-299px; width:20px; padding:1px; border: solid 1px gray; text-align:center; opacity: 0.01; cursor:pointer; }
        .partitionData SPAN { color: #000; }
        .partitionData DIV { float:left; min-width: 300px; color: #910000 }
        #partitionComments { margin-top: 12px; clear: both; float: left; }
        #screenOutputComment { position: relative; }
        .outputComments.footer {
            position: absolute;
            bottom: 1mm;
        }
        .outputComments:not(:last-child) {
            padding-bottom: 28px;
        }
        .outputCommentsDoor {
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .outputCommentsDoor .inner {
            background-color: #cccccc;
            border-radius: 5px;
            margin: -8px;
            padding: 8px;
        }
        a.action_links { float:left; margin-left: 4px; font-size:10px; line-height:10px; }
        .heightInfo a { opacity: 0.7; padding-left: 6px; }
        .heightInfo a:hover { opacity: 1; }
        #partitionList .images { width: 30px; white-space: nowrap; cursor: pointer }
        #partitionList .icon-picture { vertical-align: middle }
        #partitionList .images-number { font-size: 10px; font-style: normal }
        .partitionListMeasures { font-size: 11px; }
        .bold { font-weight: bold }
        .right { float:right }
        .left { float:left }
        .clear { clear: both; }
        .numbers-right {
            display: inline-block;
            width: 40px;
            text-align: right;
        }
        .glassCP { width:400px; margin-left: 10px; }
        .glassCP .label { padding-left: 10px; }
        .glassCP div { margin:0 0 10px 0 }
        .glassCP .text { margin: 0 6px; }
        #divFlexiblePanelSelect { width: 250px; }
        #divStandardWidthsInfo { width: 200px; }
        .comment  { font-size: 13px; color: gray; line-height:20px; }
        .form-alert { color: red;}
        .screenOutputPanels { padding: 40px; padding-top:0; padding-bottom:20px; background-color: white; position: relative; }
        .screenOutputPanels table td { text-align:center; }
        .screenOutput table th { color: #910000; font-weight: normal; border-bottom: solid 1px #910000  }
        .screenOutput h2 { margin: 0; padding: 12px; background-color: white; }
        .screenOutputPartitionData .partitionData { margin:0; padding: 10px; height: 100%; background-color: white; }
        .screenOutputPartitionData DIV { float: none; }
        .screenOutputPartitionData .partitionDataBottom { position:relative; left: 0; right:0; top: 0; text-align:center; }
        .screenOutputPartitionData .partitionDataBottom DIV { min-width: 150px; }
        .screenOutputPartitionData .partitionDataBottom > * { display: inline-block; vertical-align:middle; }
        .screenOutputPartitionData .partitionDataBottomMiddle { text-align:center;}
        #screenFloorPrintPrints table, .screenOutputPanels table, #screenDoorOutput table { width: 100%; margin: 0; padding: 10px; background-color: white; }
        #screenFloorPrintPrints table .partitionName { color: #910000 }
        #screenFloorPrintPrints .hide-print-ui { display: none; }
        #screenDoorListing { background-color: white; }
        #testStatus { float:left; width: 50% }
        #languageSelector { float: right; width: 50%; text-align: right }
        #statLink, #userAdminLink {
            display: none;
        }
        #dbStatus { color: Gray; clear:both; }
        .page-break  { display:none; }
        .hide, .hideTemp { display: none !important; }
        .hideSomkeProof { display: none; }
        .hideFrameType { display: none !important; }
        .hidePlateType { display: none !important; }
        .hideGlassType { display: none !important; }
        .hideDoorType { display: none !important; }
        .forceShow { display: initial !important; }
        #screenOutputRailsMeasurements, .screenOutputRailsMeasurements { box-sizing: initial; background-color: white; padding-bottom: 20px; }
        .railsMeasurement { border-top: solid 1px black; border-right: solid 1px black; text-align: center; display:inline-block; }
        .first .railsMeasurement {
            border-left: solid 1px black;
        }
        .text-warning {
            color: #FF5451;
            font-weight: bold;
        }
        .text-warning a {
            color: #FF5451 !important;
            font-weight: bold;
        }

        svg.door-opening {
            height: 22px;
        }

        .outputDimensionLines {
            text-align: center;
            position: relative;
            left: 2px;
            top: -8px;
            font-size: 12px;
            line-height: 20px;
        }

        .login {
            width: 300px;
            margin: 65px auto;
        }

        /* context menu specific */
        #contextmenu  { border:1px solid #999; padding:0; background:#eee; width:200px; list-style-type:none; display:none; }
        #contextmenu .separator  { border-top:1px solid #999; }
        #contextmenu  ul { padding-left:20px; background:#eee; width:180px; list-style-type:none; }
        #contextmenu li  { margin:0; padding:0; font-size:12px; font-family:tahoma,arial,sans-serif; color:#000; }
        #contextmenu li a, #contextmenu li div { display:block; padding:5px 10px 5px 35px; font-size:12px; text-decoration:none; font-family:tahoma,arial,sans-serif; color:#000; background-position:8px 8px; background-repeat:no-repeat; }
        #contextmenu ul li a { padding:2px 10px 2px 35px; }
        #contextmenu li:hover { background-color:#ddd; }
        #contextmenu li a.disabled, #contextmenu li div.disabled { color:#ccc; font-style:italic; }
        #contextmenu li a.disabled:hover { background-color:#eee; }
        #contextmenu li input { margin: 5px 0 5px 0; }

        #statusHolderOuter { position: absolute; top: 40px; left: 50%; z-index: 5 }
        #statusHolder { position: relative; left:-50%; z-index:10; }

        #userMessageOuter {
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            padding: 12px;
            border-radius: 8px;
            color: indianred;
            font-size: 16px;
            display: none;
            z-index: 1;
        }
        #userMessageOuter .close {
            position: relative;
            top: -8px;
        }

        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 10; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Black w/ opacity */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }

        .modal-content {
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;

        }

            .modal-content img {
                margin: 0 5%;
                overflow-y: hidden;
                max-width: 1400px;
                max-height: 100%;
            }

            .modal.tallImg .modal-content {
                height: initial;
            }

        /* Add Animation */
        .modal-content {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        .modalClose {
          position: absolute;
          top: 15px;
          right: 35px;
          color: #f1f1f1;
          font-size: 40px;
          transition: 0.3s;
        }

        .modalClose:hover,
        .modalClose:focus {
          color: #bbb;
          text-decoration: none;
          cursor: pointer;
        }

        @keyframes zoom {
          from {transform:scale(0)}
          to {transform:scale(1)}
        }

/* Override in Dashboard dialog only */
.door-config-modal #doorForm { position: static !important; left: auto !important; top: auto !important; }
/* door form */
#doorForm {
    position: absolute;
    left: 59%;
    top: 20px;
    background-color: White;
    padding: 24px;
    border: solid 1px black;
}
/* Door Config modal: outlined button visual consistency */
.door-config-modal .dc-btn-outlined,
.door-config-modal .dc-btn-action {
  border: 1px solid rgba(0,0,0,0.12) !important; /* match Vuetify hover border color */
  border-radius: 4px !important;
}
/* Action buttons padding */
.door-config-modal .dc-btn-action {
  padding: 4px 10px !important;
}
/* Hide legacy internal close button inside the modal */
.door-config-modal .closeImage { display: none !important; visibility: hidden !important; }
/* Right-aligned inline actions row for modal output */
.door-config-modal #fd-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
.door-config-modal #fd-modal-actions button { white-space: nowrap; }


    #doorForm .fieldGroup input[type="text"] {
        width: 60px;
    }

    #doorForm .fieldGroup input.narrow[type="text"] {
        width: 46px;
    }

    #doorForm .fieldGroup select {
        width: 66px;
    }

    #doorForm .fieldGroup select.narrow {
        width: 52px;
    }

    #doorForm BUTTON {
        width: 150px;
    }

    .inlineFieldHeader {
        color: #910000;
    }

    .closeImage {
        background-image: url("img/Close_icon_default.jpg");
        width: 21px;
        height: 15px;
        float: right;
    }

    .closeImage:hover {
        background-image: url("img/Close_icon_hover.jpg");
    }

    .doorPanelConnector {
        position: absolute;
        top: 42%;
        transform: translateY(-50%);
    }

    .doorPanelConnector input {
        margin-bottom: 3px;
    }

    .doorPanelConnector label {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .doorPanelConnector.left {
        left: 26px;
    }

    .doorPanelConnector.right {
        right: 26px;
    }

    .wallStarterLabel {
        position: absolute;
        top: 72%;
        transform: translateY(-50%);
        color: #1976d2;
        background-color: white;
    }

    .wallStarterLabel.left {
        left: 2%;
    }

    .wallStarterLabel.right {
        right: 2%;
    }

    #doorForm .config-image {
        width: 500px;
        height: 260px;
        position: relative;
        background-image: url('/img/doorstops/TVD-TVD.jpg');
    }

    #doorForm .v-subheader {
        height: inherit;
        padding: 0;
        padding-top: 11px;
    }
    /*
        door config
    */
    .drawingNameText {
        position: relative;
        top: 2px;
        text-align: center;
        background-color: white;
        top: 22px;
    }

    .AG_NoWallStarter .drawingNameText {
        top: 3px;
        width: 354px;
        left: 72px;
    }

    .TVD_WallStarterLeft .drawingNameText {
        top: 7px;
    }

    .TVD_WallStarterLeft.WallStarterASPV .drawingNameText {
        left: 8px;
    }

    .TVD_WallStarterLeft.WallStarterSilicone .drawingNameText {
        left: 14px;
    }

    .TVD_WallStarterRight.WallStarterASPV .drawingNameText {
        top: 10px;
        left: -9px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .drawingNameText {
        top: 8px;
        left: -16px;
    }

    .TVD_WallStarterBoth.WallStarterASPV .drawingNameText {
        top: 227px;
    }

    .TVD_WallStarterBoth.WallStarterSilicone .drawingNameText {
        top: 217px;
    }

    .AG_WallStarterLeft .drawingNameText, .AG_WallStarterRight .drawingNameText {
        top: 3px;
        width: 210px;
        left: 145px;
    }

    .AG_WallStarterBoth .drawingNameText {
        top: 3px;
        width: 240px;
        left: 130px;
    }

    #doorForm .fieldGroup input.leftTopJointWidth {
        width: 24px;
    }

    .leftTopJointWidthHolder {
        position: absolute;
        top: 46px;
        left: 20px;
        z-index: 10;
    }

    .AG_NoWallStarter .leftTopJointWidthHolder {
        top: 24px;
        left: 44px;
    }

    .AG_WallStarterLeft .leftTopJointWidthHolder, .AG_WallStarterBoth .leftTopJointWidthHolder {
        top: 24px;
        left: 58px;
    }

    .AG_WallStarterRight .leftTopJointWidthHolder {
        top: 24px;
        left: 47px;
    }

    .TVD_WallStarterLeft.WallStarterASPV .leftTopJointWidthHolder {
        top: 29px;
        left: 60px;
    }

    .TVD_WallStarterBoth .leftTopJointWidthHolder {
        left: 60px;
    }

    .TVD_WallStarterLeft.WallStarterSilicone .leftTopJointWidthHolder {
        top: 34px;
        left: 70px;
    }

    .TVD_WallStarterRight.WallStarterASPV .leftTopJointWidthHolder {
        top: 34px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .leftTopJointWidthHolder {
        top: 32px;
    }

    #doorForm .fieldGroup .rightTopJointWidthHolder input {
        width: 24px;
    }

    .rightTopJointWidthHolder {
        position: absolute;
        top: 46px;
        right: 20px;
        z-index: 10;
    }

    .TVD_WallStarterLeft .rightTopJointWidthHolder {
        top: 29px;
    }

    .TVD_WallStarterRight.WallStarterASPV .rightTopJointWidthHolder {
        top: 34px;
        right: 60px;
    }

    .TVD_WallStarterBoth .rightTopJointWidthHolder {
        right: 60px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .rightTopJointWidthHolder {
        top: 32px;
        right: 70px;
    }

    .AG_NoWallStarter .rightTopJointWidthHolder {
        top: 24px;
        right: 44px;
    }

    .AG_WallStarterLeft .rightTopJointWidthHolder {
        top: 24px;
        right: 46px;
    }

    .AG_WallStarterRight .rightTopJointWidthHolder, .AG_WallStarterBoth .rightTopJointWidthHolder {
        top: 24px;
        right: 58px;
    }

    #doorForm .fieldGroup input.leftBottomJointWidth {
        width: 24px;
        position: absolute;
        left: 96px;
        bottom: -4px;
        z-index: 10;
    }

    #doorForm .AG_NoWallStarter input.leftBottomJointWidth {
        bottom: 3px;
        left: 47px;
    }

    #doorForm .fieldGroup.TVD_WallStarterLeft.WallStarterASPV .leftBottomJointWidth {
        left: 114px;
    }

    #doorForm .fieldGroup.TVD_WallStarterLeft.WallStarterSilicone .leftBottomJointWidth {
        left: 120px;
    }

    #doorForm .fieldGroup.TVD_WallStarterRight.WallStarterASPV .leftBottomJointWidth {
        bottom: -13px;
    }

    #doorForm .fieldGroup.TVD_WallStarterRight.WallStarterSilicone .leftBottomJointWidth {
        bottom: -10px;
    }

    #doorForm .fieldGroup.TVD_WallStarterBoth.WallStarterASPV .leftBottomJointWidth {
        left: 114px;
        bottom: -12px;
    }

    #doorForm .fieldGroup.TVD_WallStarterBoth.WallStarterSilicone .leftBottomJointWidth {
        left: 114px;
    }

    #doorForm .fieldGroup.AG_WallStarterLeft .leftBottomJointWidth, #doorForm .fieldGroup.AG_WallStarterBoth .leftBottomJointWidth {
        left: 74px;
        bottom: 12px;
    }

    #doorForm .fieldGroup.AG_WallStarterRight .leftBottomJointWidth {
        left: 74px;
        bottom: 13px;
    }

    #doorForm .doorPlateHeightLabel {
        max-width: 110px;
        display: inline-block;
        vertical-align: middle;
    }

    #doorForm .fieldGroup input.rightBottomJointWidth {
        width: 24px;
        position: absolute;
        right: 93px;
        bottom: -4px;
        z-index: 10;
    }

    #doorForm .AG_NoWallStarter input.rightBottomJointWidth {
        bottom: 3px;
        right: 47px;
    }

    .TVD_WallStarterLeft input.rightBottomJointWidth {
        right: 97px;
    }

    #doorForm .fieldGroup.TVD_WallStarterRight.WallStarterASPV input.rightBottomJointWidth {
        bottom: -13px;
        right: 112px;
    }

    #doorForm .fieldGroup.TVD_WallStarterRight.WallStarterSilicone input.rightBottomJointWidth {
        bottom: -10px;
        right: 119px;
    }

    #doorForm .fieldGroup.TVD_WallStarterBoth.WallStarterASPV input.rightBottomJointWidth {
        bottom: -12px;
        right: 116px;
    }

    #doorForm .fieldGroup.TVD_WallStarterBoth.WallStarterSilicone input.rightBottomJointWidth {
        bottom: -4px;
        right: 116px;
    }

    .AG_WallStarterLeft input.rightBottomJointWidth {
        right: 97px;
    }

    #doorForm .fieldGroup.AG_WallStarterLeft input.rightBottomJointWidth {
        right: 73px;
        bottom: 12px;
    }

    #doorForm .fieldGroup.AG_WallStarterRight input.rightBottomJointWidth, #doorForm .fieldGroup.AG_WallStarterBoth .rightBottomJointWidth {
        right: 74px;
        bottom: 13px;
    }

    #doorForm .fieldGroup.doorOptimization input[type="text"] {
        width: 25px
    }

#doorForm .doorImage {
    margin-top: 10px;
    margin-bottom: -6px;
    width: 100%;
    text-align: center;
}

#doorForm .doorImage img {
    width: 326px;
}

.outerFrameWidth {
    margin-left: -30px;
    position: absolute;
    left: 50%;
    bottom: -12px;
}

    .AG_NoWallStarter .outerFrameWidth {
        bottom: -2px;
    }

    .TVD_WallStarterLeft .outerFrameWidth {
        bottom: -4px;
    }

    .TVD_WallStarterRight.WallStarterASPV .outerFrameWidth {
        bottom: -13px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .outerFrameWidth {
        bottom: -10px;
    }

    .TVD_WallStarterBoth .outerFrameWidth {
        top: 50px;
        bottom: inherit;
    }

    .AG_WallStarterLeft .outerFrameWidth, .AG_WallStarterRight .outerFrameWidth, .AG_WallStarterBoth .outerFrameWidth {
        bottom: 24px;
    }


    .bottomFrameMeasureText {
        position: relative;
        top: 192px;
        text-align: center;
    }

    .AG_NoWallStarter .bottomFrameMeasureText {
        top: 181px;
    }

    .TVD_WallStarterLeft .bottomFrameMeasureText {
        top: 184px;
    }

    .AG_WallStarterLeft .bottomFrameMeasureText, .AG_WallStarterRight .bottomFrameMeasureText {
        top: 189px;
    }

    .AG_WallStarterBoth .bottomFrameMeasureText {
        top: 207px;
    }

    .TVD_WallStarterRight.WallStarterASPV .bottomFrameMeasureText {
        top: 193px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .bottomFrameMeasureText {
        top: 190px;
    }

    .TVD_WallStarterBoth.WallStarterASPV .bottomFrameMeasureText {
        top: 168px;
    }

    .TVD_WallStarterBoth.WallStarterSilicone .bottomFrameMeasureText {
        top: 160px;
    }

    .topFrameMeasureText {
        position: relative;
        top: 28px;
        text-align: center;
    }

    .AG_NoWallStarter .topFrameMeasureText {
        top: 27px;
    }

    .AG_WallStarterLeft .topFrameMeasureText, .AG_WallStarterRight .topFrameMeasureText {
        top: 9px;
    }

    .AG_WallStarterBoth .topFrameMeasureText {
        top: 27px;
    }

    .TVD_WallStarterLeft .topFrameMeasureText, .TVD_WallStarterBoth .topFrameMeasureText {
        top: 11px;
    }

    .TVD_WallStarterRight.WallStarterASPV .topFrameMeasureText {
        top: 16px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .topFrameMeasureText {
        top: 13px;
    }

    .AG_NoWallStarter .doorPanelConnector.left, .AG_WallStarterRight .doorPanelConnector.left, .AG_WallStarterBoth .doorPanelConnector.left {
        left: -12px;
    }

    .AG_NoWallStarter .doorPanelConnector.right, .AG_WallStarterLeft .doorPanelConnector.right, .AG_WallStarterBoth .doorPanelConnector.right {
        right: -12px;
    }

    .AG_WallStarterLeft .doorPanelConnector.left {
        left: -10px;
    }

    .AG_WallStarterRight .doorPanelConnector.right {
        right: -10px;
    }

    .TVD_WallStarterLeft.WallStarterASPV .doorPanelConnector.left {
        left: 36px;
    }

    .TVD_WallStarterLeft.WallStarterSilicone .doorPanelConnector.left, .TVD_WallStarterBoth .doorPanelConnector.left {
        left: 46px;
    }

    .TVD_WallStarterRight.WallStarterASPV .doorPanelConnector.right {
        right: 36px;
    }

    .TVD_WallStarterRight.WallStarterSilicone .doorPanelConnector.right, .TVD_WallStarterBoth .doorPanelConnector.right {
        right: 46px;
    }
    /* modal box */
    .mBoxContent #partitionMeasurements {
        margin-bottom: 20px;
        width: 580px;
    }

    .tooltip {
        position: relative;
    }

    .tooltip::after {
        background: rgba(69, 77, 93, .9);
        border-radius: .2rem;
        bottom: 100%;
        color: #fff;
        content: attr(data-tooltip);
        display: block;
        left: 50%;
        max-width: 32rem;
        opacity: 0;
        overflow: hidden;
        padding: .4rem .8rem;
        pointer-events: none;
        position: absolute;
        text-overflow: ellipsis;
        -webkit-transform: translate(-50%, 1rem);
        -ms-transform: translate(-50%, 1rem);
        transform: translate(-50%, 1rem);
        transition: all .2s ease;
        white-space: nowrap;
        z-index: 200;
        white-space: pre-wrap;
    }

    .tooltip-wide::after {
        width: 150px;
        font-size: small;
        font-style: normal;
    }

    .tooltip:focus::after, .tooltip:hover::after {
        opacity: 1;
        -webkit-transform: translate(-50%, -.5rem);
        -ms-transform: translate(-50%, -.5rem);
        transform: translate(-50%, -.5rem);
    }

    /* Improve tooltip readability inside modal side-stop selector */
    .mBox.Modal .mBoxContent .tooltip::after {
        /* Ensure tooltip is not squeezed vertically */
        min-width: 200px;
        white-space: normal; /* allow normal wrapping instead of pre-wrap/nowrap combo */
        text-align: left;
    }

    .invert-error {
        background-color: #B94A48;
        color: #ffffff;
        padding: 2px 4px;
        white-space: nowrap;
        border: 1px #d38f8d solid;
        border-radius: 3px;
    }

    .invert-success {
        background-color: #468847;
        color: #ffffff;
        padding: 2px 4px;
        white-space: nowrap;
        border: 1px #95cd7c solid;
        border-radius: 3px;
    }
    /* overruling styles set by vuetify to regain styles in old ares of the app */
    body, p {
        font-family: Roboto, Sans-Serif;
        font-size: 14px;
        background-color: #EBEAC5
    }

    body .theme--light.v-application {
        background-color: #EBEAC5;
        line-height: inherit;
    }

    textarea {
        font-family: Roboto, Sans-Serif;
        font-size: 14px;
    }

    .fieldGroup input, .comment input, #screenPanelsGeneralControls input, #partitionMeasurements input, #screenMeasurements input, .fieldHeader input, input.changeWidth, #contextmenu input, #sideStopBox input {
        background-color: white;
        padding: 1px 0px;
        border-style: solid;
        border-width: thin;
        padding: 1px 2px 1px 2px;
        font: -webkit-control;
        box-sizing: content-box;
        margin-bottom: 1px;
    }

    .fieldGroup input:disabled, .comment input:disabled, #screenPanelsGeneralControls input:disabled, #partitionMeasurements input:disabled, #screenMeasurements input:disabled, .fieldHeader input:disabled, input.changeWidth:disabled, #contextmenu input:disabled, #sideStopBox input:disabled {
        background-color: rgb(235, 235, 228);
    }

    .fieldGroup select, .fieldHeader select, .companySelect, #screenMeasurements select, .mBoxContainer select {
        background-color: white;
        border-style: solid;
        Xpadding: 0px 2px 1px;
        -webkit-appearance: menulist;
        box-sizing: border-box;
        font: -webkit-control;
        color: black;
    }

    .fieldGroup select option, .fieldHeader select option, .companySelect, #screenMeasurements select option, .mBoxContainer select option {
        Xpadding: 0px 2px 1px;
    }

    .fieldGroup textarea, .none textarea {
        background-color: white;
        border-style: solid;
        padding: 2px;
    }

    .fieldGroup button, .buttonHolder button, .fieldHeader button, .action_button, #screenPanelsGeneralControls button, #partitionMeasurements button, #screenPanelsIndividualControls button {
        background-color: buttonface;
        color: black;
        border-width: 1px;
        border-style: solid;
        border-radius: 1px;
        padding: 1px 12px;
        white-space: nowrap;
    }

    .fieldGroup button:disabled, .buttonHolder button:disabled, .fieldHeader button:disabled, .action_button:disabled, #screenPanelsGeneralControls button:disabled {
        opacity: 0.6
    }

    .fieldGroup button:active, .buttonHolder button:active, .fieldHeader button:active, .action_button:active, #screenPanelsGeneralControls button:active, #partitionMeasurements button:active, #screenPanelsIndividualControls button:active {
        border-style: inset;
    }

    p.comment {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    #partitionList td {
        padding: 2px;
    }

    .screen .v-data-table button {
        min-width: inherit;
    }
    /* Thesae are valid new styles for the door after vuetify was implemented */
    .projects-table tr {
        cursor: pointer;
    }

    #drawing-inputs {
        width: 25%;
        position: absolute;
        top: 40%;
        left: 40%;
        background-color: white;
        padding: 6px;
        border-radius: 6px;
    }

    #drawing-inputs .close-panel {
        position: absolute;
        top: 4px;
        right: 4px;
    }

    #doorForm input.plain, #doorForm .plain input {
        height: 36px;
        padding: 2px 6px;
        font-size: 20px;
        border-radius: 5px;
        border: 2px solid silver;
    }

    #portalDoorHolder {
        min-width: 520px;
    }


    #doorForm .v-input--selection-controls {
        margin: 0
    }

    #doorForm .radio-group-nowrap .v-input--radio-group__input {
        flex-wrap: nowrap;
    }

    /* Arrow styles */
    .the-arrow.-right {
        position: absolute;
        right: 0px;
        bottom: 1px;
        width: 100%;
    }

    .the-arrow.-left {
        position: absolute;
        left: 0px;
        bottom: 1px;
    }

    .the-arrow > .shaft {
        background-color: black;
        display: block;
        height: 1px;
        position: relative;
    }

    .the-arrow > .shaft:before {
        -webkit-transform-origin: top right;
        transform-origin: top right;
    }

    .the-arrow > .shaft:after {
        -webkit-transform-origin: bottom right;
        transform-origin: bottom right;
    }

    .the-arrow > .shaft:before, .the-arrow > .shaft:after {
        background-color: black;
        content: '';
        display: block;
        height: 1px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .the-arrow.-right > .shaft:before {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .the-arrow.-right > .shaft:after {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    .the-arrow.-left > .shaft:before {
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg);
        transform-origin: right;
    }

    .the-arrow.-left > .shaft:after {
        -webkit-transform: rotate(-150deg);
        transform: rotate(-150deg);
        transform-origin: right;
    }

    .the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after, .the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
        width: 8px;
    }

    .lds-dual-ring {
        display: inline-block;
        width: 80px;
        height: 80px;
        position: fixed;
        left: 50%;
        transform: translate(-40px, -40px);
        top: 50%;
    }

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid #1867c080;
        border-color: #1867c080 transparent #1867c080 transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

    @keyframes lds-dual-ring {
        0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* spacing */
.ml8 {
    margin-left: 8px;
}

.v-input--selection-controls__input {
    align-self: flex-start;
}