.hidden {

    display: none;

}



.small {

    font-size: 11px;

}



#d_cfg_templatevulling h2 {

    margin: 0;

    padding-bottom: 0;

    font-size: 1.3em;

    padding-top: 15px;

}





#frmTussenStijlDorpel {

    display: none;

}





#tussenstijlProperties,
#tussendorpelProperties {

    display: none;

}



button#tussenstijlButton.buttonActive,
button#tussendorpelButton.buttonActive {

    background: #3c6488;

}



button#tussenstijlButton,
button#tussendorpelButton {

    width: 130px;

    padding: 5px;

    color: #fff;

    border: none;

    border-radius: 3px;

    background: lightgrey;

}





.colRelative {

    position: relative;

}





.errorBlock {

    background: #ffb27f;

    border: 3px solid #8e8d8d;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    width: auto;

    display: inline-block;

    padding: 10px;

    margin: 13px 0;

}





input.error {

    border: 1px solid red;

}



.errors {

    color: red;

}



.autoWidth {

    width: auto !important;

}


#adminConfigPage {

    margin-top: 20px;

}


#adminConfigPage table td {

    padding: 3px;

    border: 1px solid lightgrey;

    text-align: right;

    font-size: 14px;

}



#adminConfigPage table th {

    background: #258DC2;

    color: #FFF;

    border: 1px solid lightgrey;

    padding: 10px 10px;

    font-weight: normal;

    font-size: 14px;

}

#adminConfigPage table th a {

    text-decoration: none;

    color: white;

    font-weight: bold;

}


#adminConfigPage table th.deliveryHead {

    background: #258DC2;

}



#adminConfigPage table th.pricingHead {

    background: #258DC2;

}





#orderTable input[type='text'] {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 500px;
}


#orderTable table td {

    padding: 10px;

    border: 1px solid lightgrey;

    text-align: right;

    font-size: 14px;

    min-width: 100px;

}


#adminConfigPage table td input[type='text'] {

    width: 60px;

    font-size: 14px;

}



#adminConfigPage table td input.longInput {

    width: 100px;

}



#adminConfigPage table td input.textInput {

    width: 300px;

}



#adminConfigPage table tr:hover {

    background: #e3e3e3;

}





#adminConfigPage h1 {

    font-size: 26px;

    font-weight: bold;

}



#adminConfigPage h2 {

    font-size: 17px;

    font-weight: bold;

}





#adminConfigPage div.row {

    all: unset;

    width: 100%;

    display: inline-flex;

}



#adminConfigPage div.row label {

    width: 200px;

}



#adminConfigPage div.row>* {

    width: auto;

}





#adminConfigPage table#cart {

    width: 950px;

}



#adminConfigPage table#cart td {

    text-align: left;

}



#adminConfigPage a {

    padding: 0;

}





#frameDrawing {

    max-height: 500px;

    display: flex;

}



#frameDrawing svg {

    max-height: 100%;

}





#configPage h3 {

    background: #258DC2;

    color: #fff;

    padding: 5px;

    margin: 10px 0;

    font-size: 1.1rem;

    border-radius: 3px;

}



#configPage #d_cfg_outside,
#configPage #d_cfg_inside,
#configPage #d_cfg_vlakvulling,
#d_cfg_options,
#d_cfg_templatevulling {

    display: none;

    border: 1px solid #000;

    margin: 0;

    padding: 10px;

}



#configPage #d_cfg_outside {

    display: block;

}





div#configPage div.row div.configItems,
div#configPage div.row div.configDrawing {

    width: 50%;

}





@media only screen and (max-width: 768px) {

    div#configPage div.row div.col.configItems,
    div#configPage div.row div.col.configDrawing {

        width: 100%;

        display: block;

        position: relative;

        flex: auto;

    }

}





#configPage input[type="text"],
#configPage select,
#configPage textarea {

    background-color: #fff;

    border: 1px solid #bbb;

    padding: 3px;

    color: #4e4e4e;

    width: 180px;

    font-size: 0.8rem;

    margin: 0 5px 0px 0;

}



#configPage div.vlakConfig {

    border: 1px solid grey;

    margin: 10px 0;

    padding: 10px;

}



div.vlakConfig h4 {

    background: #258DC2;

    color: #fff;

    padding: 5px;

    margin: -10px -10px 10px -10px;

    font-size: 1.0rem;

}



div.vlakConfig h5 {

    margin: 0;

    padding: 0;

}



div.vlakConfig label {

    width: 120px;

}



#configPage #dialogPopup {

    display: none;

}







#vlakconfig {

    display: flex;

}



#possibleVlakvulling {

    width: 290px;

    max-height: 500px;

    overflow: auto;

    background: #f9f9f9;

}



.imageHolder {

    position: relative;

    margin-bottom: 10px;

    background-color: white;

}



.imageHolder span {

    position: relative;

    left: 10px;

    font-size: 12px;

}





.vakVullingGroupTitle {

    background: #258DC2;

    padding: 12px;

    font-size: 14px;

    margin: 10px 0;

    color: #FFF;

    position: relative;

}





.vakVullingGroupTitle::after {

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f078";

    position: absolute;

    right: 10px;

}



.openVullingGroup::after {

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f00d";

    position: absolute;

    right: 10px;

}





.vakVullingGroupTitle:hover {

    cursor: pointer;

}



.vakVullingGroup {

    display: none;

    border: 1px solid #BFBFBF;

    padding: 10px 5px;

    border-radius: 5px;

    margin: -14px 0px 14px;

    background: #f0f0f0;

}



img.vlakItem {

    display: block;

    margin: 0 auto;

}



.selectedConfig {

    border: 3px solid #258DC2;

}





#vlakItemConfig {

    float: left;

    width: 430px;

    margin-left: 10px;

    font-size: 12px;

    position: sticky;

}



#vlakItemConfig div {

    padding: 5px;

    background: #f9f9f9;

    margin-bottom: 5px;

}



#vlakItemConfig div label {

    width: 190px;

    display: inline-block;

    vertical-align: top;

}



#vlakItemConfig select {

    max-width: 200px;

    max-width: 200px;

}



#glassbarSelector,
#ventilationgrilleSelector {

    display: none;

}



#d_cfg_options table td {

    vertical-align: top;

}



#d_cfg_options table td.options {

    min-width: 160px;

}



#configPage button,
a.button {

    width: auto;

    padding: 5px;

    background: #3c6488;

    color: #fff;

    border: none;

    border-radius: 3px;

    text-decoration: none;

}



#configPage button:hover,
a.button:hover {

    background: #314662;

}



#configPage button.buttonDisabled {

    background: lightgrey;

}



#configPage button.buttonDisabled:hover {

    cursor: not-allowed;

}





button.recalculate,
button.recalculateBack {

    display: inline-block;

    width: 160px;

    margin-right: 5px;

}





.multiselect {

    position: relative;

    cursor: pointer;

}



.multiselect div {

    display: none;

    text-align: left;

    position: absolute;

    background: #e3e3e3;

    padding: 10px;

    z-index: 100;

    width: 177px;

    border: 1px solid;

    border-radius: 5px;

}



.multiselect.wider div {

    width: 240px;

}



.multiselect div .msClose {

    float: right;

    font-size: 12px;

    color: grey;

}





#checkout div.block {

    width: 500px;

    background: #e3e3e3;

    padding: 20px;

    margin-bottom: 10px;

}





#checkout #zipError {

    background: yellow;

    color: black;

    width: 100%;

    padding: 10px;

    margin-top: 10px;

    display: none;

}











.dj_form label {

    width: 175px;

}



.dj_form input[type='text'],
.dj_form input[type='password'] {

    width: 200px;

}



.dj_form input.smallInput {

    width: 80px;

}



#invoiceBlock {

    display: none;

}



#measurementssvg {

    display: block;

}



#showmeasurementsSpan {

    display: none;

}



#frameNameId {

    width: 150px;

}



.quantity {

    width: 30px;

}



.cartDrawing {

    max-width: 30%;

    float: left;

    margin-right: 20px;

}



.cartInfoText {

    float: left;

}



.cartInfoText h2 {

    font-size: 1.2rem;

    padding: 5px 10px;

    margin: -5px -10px 0;

    background: #258DC2;

    color: #FFF;

}





.vlakInfo {

    border: 1px solid black;

    padding: 5px 10px;

    margin-bottom: 10px;

}





.frameInfo {

    display: none;

}



.cartInfoText label {

    width: 190px;

    display: inline-block;

}



.tdRight {

    text-align: right !important;

}



.tdLeft {

    text-align: left !important;

}



#dialog-confirm {

    display: none;

}



.fas,
.far {

    color: #258DC2 !important;

}



.deleteFrame:hover,
.showFrameInfo:hover,
.editFrame:hover {

    cursor: pointer;

}





span#totalPrice {

    font-size: 1.5em;

    font-weight: bold;

}



span#totalPrice,
span#paymentcosts,
span#shippingcosts,
span#vatcosts,
span#totalpriceExVAT,
span#discountValue {

    width: 120px;

    display: inline-block;

    text-align: right;

}





.addStijl:hover,
.deleteStijl:hover,
.editStijl:hover {

    cursor: pointer;

}





div.location {

    width: 50%;

    display: inline-block;

}



div.location div {

    float: left;

    /* display: inline-block; */

}





/*imagepdown classes*/

.imageDropdown {

    width: 195px;

    height: 27px;

    border: 1px solid #c6c6c6;

    position: relative;

}



.imageDropdown div.downArrow {

    width: 20px;

    height: 100%;

    background: lightgrey;

    position: absolute;

    top: 0;

    right: 0;

    line-height: 0;

    padding: 4px;

    color: #000;

}



.imageDropdown.closed span {

    width: 100%;

    border: none;

    height: 100%;

    padding: 0 0 0 7px;

    color: #4a4a4a;

    background: none;

    z-index: auto;

}



.imageDropdown span:hover {

    cursor: pointer;

}



.imageDropdown span.hidden {

    display: none;

}



.imageDropdown span img {

    display: none;

    max-width: 40%;

    margin-right: 10px;

}



.imageDropdown span {

    width: 300px;

    height: auto;

    display: block;

    background: #FFF;

    border: 1px solid gray;

    z-index: 9999;

    padding: 5px;

    position: relative;



}





#userOrderPage label {

    width: 200px;

    display: inline-block;

}





/*tooltip css*/

div.tooltip-inner {

    text-align: left;

}







div#windowsGrilleSelector {

    display: none;

}



table.grilleSelection {

    border: 1px solid gray;

    width: 160px;

    height: 120px;

    display: inline-table;

}



table.grilleSelection td {

    border: 1px solid gray;

    vertical-align: top;

}



table.grilleSelection td span {

    background: lightgray;

    width: 92%;

    text-align: center;

    display: inline-block;

    margin: 0 4%;

}





.highZindex {

    position: relative;

    z-index: 100;

}



.errorMessage {

    color: red !important;

}







/*jquery UI overrules*/

.ui-widget-overlay {

    background: #444;

    opacity: 0.8;

    filter: Alpha(Opacity=80);

}





.mytooltip {

    min-width: 250px !important;

    background-color: #FFF;

    font-size: 12px !important;

    box-shadow: none !important;

    padding: 8px;

    position: absolute;

    z-index: 9999;

    max-width: 300px;

}