body {
}

.body_index_css {
    background-image: url('../img/Background Barisoft blue.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    position: absolute;
    height: calc(100dvh - 65px);
    top: 65px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.body_css {
    background-image: url('../img/Background Barisoft blue.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    background-attachment: scroll;
    position: absolute;
    height: calc(100dvh - 65px);
    top: 65px;
    left: 0px;
    right: 0px;
}

.container_support_css {
    position: absolute;
    top: 100px;
    left: 20px;
    width: 980px;
    height: calc(100dvh - 470px);
    overflow: auto;
}

.popupcase_css {
    width: 1000px;
    height: calc(100dvh - 170px);
}

.container_supportcase_css {
    position: absolute;
    left: 15px;
    top: 0px;
    width: 940px;
    height: 400px;
}

.addcaseitem_css {
    position: absolute;
    left: 15px;
    top: 420px;
    width: 940px;
    height: 200px;
    border: solid 1px black;
    padding: 10px;
    overflow: auto;
}

.container_dropzone_css {
    position: absolute;
    top: 640px;
    left: 15px;
    width: 940px;
    height: 100px;
    border: dashed 1px black;
    cursor: pointer;
    margin-bottom: 20px;
}

container_dropzone_css.dragover {
    border-color: #1976d2;
    background-color: #f0f8ff;
}

.file-list {
    position: absolute;
    top: 745px;
    left: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 950px;
}

.file-list li {
    flex: 0 0 auto; /* vaste breedte per item */
    width: 228px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-family: sans-serif;
    background: #fafafa;
}

.file-list a:hover {
    text-decoration: underline;
}

.status {
    font-size: 0.9em;
    display: block;
}

.success {
    color: green;
}

.error {
    color: red;
}

.wj-cell.support {
    color: green;
}
 
.GridContainer_css {
    position: absolute;
    top: 70px;
    width: 100%;
    height: calc(100vh - 141px);
    border: 1px black;
    z-index: 49;
}

.container_iframe_css {
    position: absolute;
    top: 0px;
    height: calc(100vh - 71px);
    width: 100%;
    z-index: 51;
}

.cfooter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;
    text-align: center;
    padding: 10px;
    background-color: #E0E7EC;
}

.updateFile_css {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}


.HomeText_css {
    position: absolute;
    left: 35px;
    font-weight: bold;
    color: yellow;
}

.Dropbox_css {
    position: absolute;
    left: 20px;
    font-weight: bold;
    color: yellow;
}

.PageTitle_css {
    position: fixed;
    color: white;
    top: 85px;
    left: 20px;
}

.db_label_css, .db_input_css, .db_combo_css, .db_check_css, .db_radio_css, .db_textarea_css {
    left: 185px;
    top: 185px;
    position: fixed;
}

.wide2 {
    width: 500px;
}

.wide3 {
    width: 600px;
}

.short {
    width: 200px;
}

.wj-listbox {
    width: 300px;
    max-height: 400px;
}

.container_canvasin_css, .container_canvasout_css {
    position: absolute;
    right: 60px;
    top: 50px;
    height: 105px;
    width: 140px;
    border: solid 1px black;
}

.container_canvasout_css {
    right: 60px;
    top: 180px;
}

.container_canvas_glass_css {
    position: absolute;
    right: 80px;
    top: 100px;
    height: 105px;
    width: 140px;
    border: solid 1px black;
}

.canvas_css {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 155px;
    width: 318px;
}

.db_container_css {
    position: fixed;
}

.container_positions_css {
    position: absolute;
    background-color: white;
    left: 490px;
    top: 102px;
    width: calc(100vw - 500px);
    bottom:0px;
}

.positions_grid_css {
    position: absolute;
    background-color: white;
    width: 305px;
    top: 10px;
    left: 10px;
    height: calc(100dvh - 292px);
}

#of_grid .wj-cell {
    border: none;
    background-color: white;
    color: black;
}

.container_posi_details_css, .container_posi_remarks_css, .container_posi_options_css {
    position: absolute;
    top: 10px;
    left: 315px;
    height: calc(100vh - 240px);
    width: calc(100vw - 820px);
    overflow-y: auto;
}

.import_grid_container_css {
    position: absolute;
    top: 10px;
    left: 450px;
    height: 520px;
    width: 930px;
    border: solid 1px black;
}

.container_designer_css, .container_viewer_css {
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: white;
    z-index: 50;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

.button_designer_css {
    background-color: #3498DB;
    color: white;
    padding: 3px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    border-radius: 45px;
    position: fixed;
    width: 100px;
    top: 3px;
    left: 850px;
}

.button_viewer_css {
    background-color: #3498DB;
    color: white;
    padding: 3px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 45px;
    position: fixed;
    width: 128px;
    top: 15px;
    left: 1100px;
}

.hide {
    display: none;
}

 DWGdrawingBox {
    position: absolute;
    top: 30px;
    left: 118px;
}

.FileBtn {
    background-color: #3498DB;
    color: white;
    padding: 2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    position: absolute;
    top: 50px;
    left: 400px;
    width: 148px;
}

.RotateBtn {
    background-color: #3498DB;
    color: white;
    padding: 2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    position: absolute;
    top: 90px;
    left: 400px;
    width: 148px;
}

.FlipVerticalBtn {
    background-color: #3498DB;
    color: white;
    padding: 2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    position: absolute;
    top: 170px;
    left: 400px;
    width: 148px;
}

.FlipHorizontalBtn {
    background-color: #3498DB;
    color: white;
    padding: 2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    position: absolute;
    top: 130px;
    left: 400px;
    width: 148px;
}

.CheckUnits {
    position: absolute;
    top: 230px;
    left: 400px;
}

.LabelCheckUnits {
    position: absolute;
    top: 222px;
    left: 422px;
}

.Opening_img0, .Opening_img1, .Opening_img2, .Opening_img3, .Opening_img4, .Opening_img5 {
    position: absolute;
    left: 840px;
    top: 100px;
}

.Opening_img1 {
    top: 260px;
}

.Opening_img2 {
    top: 420px;
}

.Opening_img3 {
    top: 100px;
    left: 1020px;
}

.Opening_img4 {
    top: 260px;
    left: 1020px;
}

.Opening_img5 {
    top: 420px;
    left: 1020px;
}

.Symbol_img0, .Symbol_img1, .Symbol_img2, .Symbol_img3, .Symbol_img4, .Symbol_img5, .Symbol_img6, .Symbol_img7 {
    position: absolute;
    left: 660px;
    top: 100px;
}

.Symbol_img1 {
    top: 260px;
}

.Symbol_img2 {
    top: 420px;
}

.Symbol_img3 {
    top: 580px;
}

.Symbol_img4 {
    top: 100px;
    left: 840px;
}

.Symbol_img5 {
    top: 260px;
    left: 840px;
}

.Symbol_img6 {
    top: 420px;
    left: 840px;
}

.Symbol_img7 {
    top: 580px;
    left: 840px;
}

.handle_window_css {
    position: absolute;
    top: 580px;
    left: 660px;
}

.handle_door_css {
    position: absolute;
    top: 580px;
    left: 820px;
}

.handle_no_css {
    position: absolute;
    top: 580px;
    left: 1000px;
}

.outside_open_css {
    position: absolute;
    top: 630px;
    left: 660px;
}

.handleheight_css {
    position: absolute;
    top: 650px;
    left: 820px;
}

.db_button_css {
    background-color: #3498DB;
    color: white;
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    position: absolute;
    left: 185px;
    top: 385px;
    z-index: 25;
    width: 148px;
}

    /* Darker background on mouse-over */
    .db_button_css:hover, .of_button_css:hover, .pr_button_css:hover, .pr_buttonsmall_css:hover, .Topbuttons_css:hover {
        background-color: RoyalBlue;
    }

.of_button_css, .pr_button_css {
    position: absolute;
    background-color: #3498DB;
    color: white;
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    left: 185px;
    top: 385px;
    border-radius: 50px;
    width: 148px;
}

.pr_buttonsmall_css {
    background-color: #3498DB;
    color: white;
    padding: 2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 14px;
    width: 148px;
}


.container_offer_general_css, .container_offer_details_css, .container_offer_texts_css {
    position: absolute;
    background-color: white;
    top: 102px;
    left: 10px;
    width: 470px;
    bottom: 0px;
    overflow-y: auto;
}

.container_offer_photos_css {
    position: absolute;
    background-color: white;
    top: 102px;
    left: 10px;
    width: 470px;
    bottom: 0px;
    padding: 10px;
}

.container_grid_photos_css {
    position: absolute;
    background-color: white;
    top: 10px;
    left: 10px;
    width: 450px;
    bottom: 70px;
    overflow-y: auto;
}

.map_css {
    position: absolute;
    top: 230px;
    left: 10px;
    height: 350px;
    width: 450px;
}

#grid_photos .wj-cell {
    border: none;
    background-color: white;
}

#priceGridGeneral .wj-cell {
    border: none;
    background-color: white;
    color: black;
}

#priceGridPosition .wj-cell {
    border: none;
    background-color: white;
    color: black;
}

#gridDBaccess .wj-cell {
    border: none;
    background-color: white;
    color: black;
}

#priceChangeGrid .wj-cell {
    border: none;
    background-color: white;
    color: black;
}


.data_container2_css {
    position: absolute;
    background-color: white;
    top: 0px;
    left: 0px;
    width: 470px;
    height: calc(100vh - 240px);
    overflow-y: auto;
}

.product_container_css {
    position: absolute;
    background-color: white;
    left: 490px;
    top: 102px;
    width: calc(100vw - 500px);
    bottom: 0px;
}

.image_container_css {
    position: absolute;
    background-color: white;
    top: 0px;
    left: 590px;
    width: 40px;
    height: 40px;
}

.product_image_css {
    position: absolute;
    top: 10px;
    left: 480px;
}

.pricelist_css {
    position: absolute;
    background-color: white;
    position: absolute;
    top: 1px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 5;
}

.container_pricelist_css {
    position: absolute;
    top: 200px;
    left: 10px;
    height: calc(100vh - 380px);
    width: calc(100vw - 20px);
}

/*#picker .wj-cell {
    border: none;
    background-color: white;
    color: black;
}*/

.Topbuttons_css {
    background-color: #3498DB;
    color: white;
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    position: fixed;
    left: 185px;
    top: 385px;
    width: 128px;
}

.tabOfferContainer_css {
    position: absolute;
    background-color: white;
    top: 72px;
    left: 10px;
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    width: 470px;
    height: 30px;
    /*background-color: #f1f1f1;*/
}

.tabOfferGeneral_css {
    position: absolute;
    background-color: white;
    cursor: pointer;
    border: none;
    padding: 4px;
    width: 118px;
    left: 0px;
}

.tabOfferSite_css {
    position: absolute;
    background-color: lightgrey;
    cursor: pointer;
    border: none;
    padding: 4px;
    width: 118px;
    left: 118px;
}

.tabOfferPhotos_css {
    position: absolute;
    background-color: lightgrey;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 117px;
    left: 236px;
}

.tabOfferTexts_css {
    position: absolute;
    background-color: lightgrey;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 117px;
    left: 353px;
}

.tabPosiContainer_css {
    position: absolute;
    background-color: white;
    left: 490px;
    top: 72px;
    width: calc(100vw - 510px);
    overflow: hidden;
    height: 30px;
}

.tabPosiGeneral_css {
    position: absolute;
    background-color: white;
    cursor: pointer;
    border: none;
    padding: 4px;
    width: 157px;
    left: 0px;
}

.tabPosiOptions_css {
    position: absolute;
    background-color: lightgrey;
    cursor: pointer;
    border: none;
    padding: 4px;
    width: 157px;
    left: 157px;
}

.tabPosiRemarks_css {
    position: absolute;
    background-color: lightgrey;
    cursor: pointer;
    border: none;
    padding: 4px;
    width: calc(100vw - 510px);
    left: 314px;
    text-align: left;
}