:root {
    --configuratorBackground: peachpuff;
    --mainPlateBackground: #005b8c;
    --mainPlateTextColor: Blue;
    --plateLength: 40mm;
    --plateHeight: 15mm;
    --plateInnerHeight: 15mm;
    --plateBlueBorderWidth: 1mm;
    --plateMainFontSize: 32px;
    --plateMainPictFontSize: 32px;
    --plateMainTextPaddingVertical: 0mm; /*3.5mm;*/
    --plateMainTextPaddingHorizontal: 0mm; /*5.5mm;*/
    --plateLine1TextDisplay: none;
    --plateLine2TextDisplay: none;
    --plateLine3TextDisplay: none;
    --plateLine4TextDisplay: none;
    --plateLine5TextDisplay: none;
    --plateLine1TextLeft: 0%;
    --plateLine2TextLeft: 0%;
    --plateLine3TextLeft: 0%;
    --plateLine4TextLeft: 0%;
    --plateLine5TextLeft: 0%;
    --plateLine3InputPaddingBottom: 0px;
    --plateLine4InputPaddingBottom: 0px;
    --plateBorderError: none;
    --plateMain1Top: 0mm;
    --plateMain2Top: 0mm;
    --plateFontType: rwstcc;
    --beugelMsgLabelColor: Red;
    --endLineDisplay: none;
    --plateMainLine1Height: 0mm;
    --plateMainLine1Width: 100%;
    --plateMainLine2Width: 100%;
    --plateMainLine3Width: 100%;
    --plateMainLine4Width: 100%;
    --plateMainLine5Width: 100%;
    --plateMainLine1Pict1Width: 0%;
    --plateMainLine1Pict2Width: 0%;
    --plateMainLine1Pict3Width: 0%;
    --plateMainLine1Pict4Width: 0%;
    --plateMainLine1Pict5Width: 0%;
    --plateMainLine2Height: 0mm;
    --plateMainLine3Height: 0mm;
    --plateMainLine4Height: 0mm;
    --plateMainLine5Height: 0mm;
    --platewhiteEdging: 0.5mm;
    --plateBorderBorder: solid;
    --plateMainLine1Pict1FontSize: 0;
    --plateMainLine1Pict2FontSize: 0;
    --plateMainLine1Pict3FontSize: 0;
    --plateMainLine1Pict4FontSize: 0;
    --plateMainLine2Pict1FontSize: 0;
    --plateMainLine2Pict2FontSize: 0;
    --plateMainLine2Pict3FontSize: 0;
    --plateMainLine2Pict4FontSize: 0;
    --plateMainLine3Pict1FontSize: 0;
    --plateMainLine3Pict2FontSize: 0;
    --plateMainLine3Pict3FontSize: 0;
    --plateMainLine3Pict4FontSize: 0;
    --plateMainLine4Pict1FontSize: 0;
    --plateMainLine4Pict2FontSize: 0;
    --plateMainLine4Pict3FontSize: 0;
    --plateMainLine4Pict4FontSize: 0;
    --plateMainLine5Pict1FontSize: 0;
    --plateMainLine5Pict2FontSize: 0;
    --plateMainLine5Pict3FontSize: 0;
    --plateMainLine5Pict4FontSize: 0;
}

* {
    box-sizing: border-box;
}

.pictogramLabel{
    text-align: left;
    font: 12px Tahoma, Geneva, sans-serif;
    font-size: smaller;
    border: none;
    width: 65px; /*30px;*/
    float: none;
    margin-right: 1px;
    vertical-align: middle;
    text-align: left;
    /*font-style: italic;*/
    background-color: transparent;
}
.pictogramButton {
    height: 20px;
    width: 20px;
    border: 1px solid #000;
    vertical-align: middle;
    text-align: center;
    font-family: 'pic';
    font-size: 10px;
    cursor: pointer;
    margin-top: 2px;
}

    .pictogramButton:disabled {
        background-color: gray;
    }

.pictogramButtonRight {
    float: right;
    margin-left: 4px;
}

.pictogramButtonHide {
    display: none;
}

.TekstBordCharCount {
    text-align: right;
    font: 12px Tahoma, Geneva, sans-serif;
    font-size: smaller;
    border: none;
    width: 30%; /*30px;*/
    float: none;
    margin-right: 1px;
    vertical-align: middle;
    text-align: center;
    /*font-style: italic;*/
    background-color: transparent;
}

#BordHeightComboMaxLinesLabel {
    text-align: right;
    font: 12px Tahoma, Geneva, sans-serif;
    font-size: smaller;
    border: none;
    /*width: 30px;*/
    float: right;
    background-color: transparent;
}

/*@font-face {
    font-family: 'rwsccvl';
    src: url('/Styles/fonts/RWS/RWS.ttf');
    font-weight: normal;
    font-style: normal;
}*/

/*@font-face {
    font-family: 'rwseevl';
    src: url('/Styles/fonts/RWS/RWS_1.ttf');
    font-weight: normal;
    font-style: normal;
}*/

/*@font-face {
    font-family: 'rwstcc';
    src: url('/Styles/fonts/RWS/RWSTCC.ttf');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'rwsccxvl';
    src: url('/Styles/fonts/RWS/RWS_CCX.ttf');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'rwstdd';
    src: url('/Styles/fonts/RWS/RWSTDD.ttf');
    font-weight: normal;
    font-style: normal;
}*/

@font-face {
    font-family: 'rwsddxvl';
    src: url('/Styles/fonts/RWS/RWS_DDX.ttf');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'rwstee';
    src: url('/Styles/fonts/RWS/RWSTEE.ttf');
    font-weight: normal;
    font-style: normal;
}*/

@font-face {
    font-family: 'rwseexvl';
    src: url('/Styles/Fonts/RWS/RWS_EEX.ttf');
    font-weight: normal;
    font-style: normal;
}

.PlateLayoutGroup {
    background-color: var(--configuratorBackground);
}

#plate-configurator input::-ms-clear {
    display: none;
}

#plate-configurator {
    margin: 0 auto;
    /*background-color: purple;*/ /*var(--configuratorBackground);*/
    width: var(--plateLength);
    border: var(--plateBorderError);
    border-color: red;
}

#jsGrid, #jsGridFixation {
    /*min-width: 270px;*/
    font-size: 8px;
}

.top-rounded {
    border: 1px thin;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.bottom-rounded {
    border: 1px thin;
    -webkit-border-bottom-left-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;
    -moz-border-radius-bottomleft: 12px;
    -moz-border-radius-bottomright: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}


.plate {
    position: relative;
    padding: var(--plateBlueBorderWidth);
    background-color: var(--mainPlateBackground);
    color: var(--mainPlateTextColor);
    height: var(--plateHeight);
    /*display: table;*/
}

/*#PlateBorder {
    position: relative;
    border: 0px solid #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    height: calc(var(--plateHeight) - var(--plateBlueBorderWidth) - var(--plateBlueBorderWidth));
    margin: 0px;
    display: table-cell;
    vertical-align: middle;
}*/

/*#PlateBorderOverlay {
    position: absolute;
    background-color: transparent;
    border: 5px solid #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    border-color: var(--mainPlateTextColor);
    height: calc(var(--plateHeight) - var(--plateBlueBorderWidth) - var(--plateBlueBorderWidth));
    margin: 0px;
    z-index: 0;
    display: block;
}*/

#PlateBorder {
    border-width: (var(--platewhiteEdging) + "mm");
    border: var(--plateBorderBorder);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /*border-color: #FFFFFF;*/
    border-color: var(--mainPlateTextColor);
    height: calc(var(--plateHeight) - var(--plateBlueBorderWidth) - var(--plateBlueBorderWidth));
    margin: 0px;
    padding: 2px;
}

.PlateMainTextWrapper {
    padding: var(--plateMainTextPaddingVertical) var(--plateMainTextPaddingHorizontal) var(--plateMainTextPaddingVertical) var(--plateMainTextPaddingHorizontal);
    margin: 0 auto 0 auto;
    /*margin: auto;*/
    position: relative;
    z-index: 0;
    height: 100%;
}

    .PlateMainTextWrapper input#PlateLine1Text,
    .PlateMainTextWrapper input#PlateLine2Text,
    .PlateMainTextWrapper input#PlateLine3Text,
    .PlateMainTextWrapper input#PlateLine4Text,
    .PlateMainTextWrapper input#PlateLine5Text {
        width: 100%;
        font-size: var(--plateMainFontSize);
        color: var(--mainPlateTextColor);
        text-align: center;
        font-weight: normal;
        background: transparent;
        border: none;
        font-family: var(--plateFontType);
        position: relative;
        z-index: 0;
        margin: auto;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        /*vertical-align: middle;*/
    }

.PlateLineWrapper {
}

.PlateMainTextWrapper input#PlateLine1Text {
    position: absolute;
    left: var(--plateLine1TextLeft) ;
    top: var(--plateMain1Top); /*6px;*/
    /*display: inline-block;*/
    display: var(--plateLine1TextDisplay);
    width: var(--plateMainLine1Width);
    height: var(--plateMainLine1Height);
}

.PlateLine1Wrapper {
    height: var(--plateMainLine1Height);
}

.PlateMainTextWrapper input#PlateLine2Text {
    position: absolute;
    left: var(--plateLine2TextLeft) ;
    /*top: var(--plateMain2Top);*/ /*-6px;*/
    display: var(--plateLine2TextDisplay);
    width: var(--plateMainLine2Width);
    height: var(--plateMainLine1Height);
}

.PlateLine2Wrapper {
    height: var(--plateMainLine2Height);
}

.PlateMainTextWrapper input#PlateLine3Text {
    position: absolute;
    left: var(--plateLine3TextLeft) ;
    /*top: var(--plateMain3Top);*/ /*-6px;*/
    display: var(--plateLine3TextDisplay);
    width: var(--plateMainLine3Width);
    height: var(--plateMainLine1Height);
}

.PlateLine3Wrapper {
    height: var(--plateMainLine3Height);
}

.PlateMainTextWrapper input#PlateLine4Text {
    position: absolute;
    left: var(--plateLine4TextLeft) ;
    /*top: var(--plateMain4Top);*/ /*-6px;*/
    display: var(--plateLine4TextDisplay);
    width: var(--plateMainLine4Width);
    height: var(--plateMainLine1Height);
}

.PlateLine4Wrapper {
    height: var(--plateMainLine4Height);
}

.PlateMainTextWrapper input#PlateLine5Text {
    position: absolute;
    left: var(--plateLine5TextLeft) ;
    /*top: var(--plateMain5Top);*/ /*-6px;*/
    display: var(--plateLine5TextDisplay);
    width: var(--plateMainLine5Width);
    height: var(--plateMainLine1Height);
}

.PlateLine5Wrapper {
    height: var(--plateMainLine5Height);
}

.PlateLinePict {
    font-size: var(--plateMainPictFontSize);
    font-family: 'pic';
    background-color: var(--mainPlateBackground);
    color: var(--mainPlateTextColor);
    text-align: center;
    font-weight: normal;
    background: transparent;
    /*border: none;*/
    margin: auto;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    border: none;
}

.PlateLinePict {
    position: relative;
    /*top: var(--plateMain1Top);*/ /*6px;*/
    height: var(--plateMainLine1Height);
    vertical-align: middle;
    display: none;
}

/*.PlateLine1Pict {
    position: relative;
    top: var(--plateMain1Top); 
    height: var(--plateMainLine1Height);
    display: none;
}*/

#PlateLine1Pict1 {
    width: var(--plateMainLine1Pict1Width);
    font-size: var(--plateMainLine1Pict1FontSize);
}

#PlateLine1Pict2 {
    width: var(--plateMainLine1Pict2Width);
    font-size: var(--plateMainLine1Pict2FontSize);
}

#PlateLine1Pict3 {
    width: var(--plateMainLine1Pict3Width);
    font-size: var(--plateMainLine1Pict3FontSize);
    float: right;
}

#PlateLine1Pict4 {
    width: var(--plateMainLine1Pict4Width);
    font-size: var(--plateMainLine1Pict4FontSize);
    float: right;
}

/*#PlateLine1Pict5 {
    width: var(--plateMainLine1Pict5Width);
    font-size: var(--plateMainLine1Pict5FontSize);
}*/

#PlateLine2Pict1 {
    width: var(--plateMainLine2Pict1Width);
    font-size: var(--plateMainLine2Pict1FontSize);
}

#PlateLine2Pict2 {
    width: var(--plateMainLine2Pict2Width);
    font-size: var(--plateMainLine2Pict2FontSize);
}

#PlateLine2Pict3 {
    width: var(--plateMainLine2Pict3Width);
    font-size: var(--plateMainLine2Pict3FontSize);
    float: right;
}

#PlateLine2Pict4 {
    width: var(--plateMainLine2Pict4Width);
    font-size: var(--plateMainLine2Pict4FontSize);
    float: right;
}

/*#PlateLine2Pict5 {
    width: var(--plateMainLine2Pict5Width);
}*/

#PlateLine3Pict1 {
    width: var(--plateMainLine3Pict1Width);
    font-size: var(--plateMainLine3Pict1FontSize);
}

#PlateLine3Pict2 {
    width: var(--plateMainLine3Pict2Width);
    font-size: var(--plateMainLine3Pict2FontSize);
}

#PlateLine3Pict3 {
    width: var(--plateMainLine3Pict3Width);
    font-size: var(--plateMainLine3Pict3FontSize);
    float: right;
}

#PlateLine3Pict4 {
    width: var(--plateMainLine3Pict4Width);
    font-size: var(--plateMainLine3Pict4FontSize);
    float: right;
}

/*#PlateLine3Pict5 {
    width: var(--plateMainLine3Pict5Width);
}*/

#PlateLine4Pict1 {
    width: var(--plateMainLine4Pict1Width);
    font-size: var(--plateMainLine4Pict1FontSize);
}

#PlateLine4Pict2 {
    width: var(--plateMainLine4Pict2Width);
    font-size: var(--plateMainLine4Pict2FontSize);
}

#PlateLine4Pict3 {
    width: var(--plateMainLine4Pict3Width);
    font-size: var(--plateMainLine4Pict3FontSize);
    float: right;
}

#PlateLine4Pict4 {
    width: var(--plateMainLine4Pict4Width);
    font-size: var(--plateMainLine4Pict4FontSize);
    float: right;
}

/*#PlateLine4Pict5 {
    width: var(--plateMainLine4Pict5Width);
}*/

#PlateLine5Pict1 {
    width: var(--plateMainLine5Pict1Width);
    font-size: var(--plateMainLine5Pict1FontSize);
}

#PlateLine5Pict2 {
    width: var(--plateMainLine5Pict2Width);
    font-size: var(--plateMainLine5Pict2FontSize);
}

#PlateLine5Pict3 {
    width: var(--plateMainLine5Pict3Width);
    font-size: var(--plateMainLine5Pict3FontSize);
    float: right;
}

#PlateLine5Pict4 {
    width: var(--plateMainLine5Pict4Width);
    font-size: var(--plateMainLine5Pict4FontSize);
    float: right;
}

/*#PlateLine5Pict5 {
    width: var(--plateMainLine5Pict5Width);
}*/



#Plate : placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--mainPlateTextColor);
    opacity: 1; /* Firefox */
}

#Plate :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--mainPlateTextColor);
}

#Plate ::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--mainPlateTextColor);
}

#measure {
    font-family: 'rwstddx', "courier";
}

/*.PlateSuperLineWrapper {
    padding: 2px 5px 2px 5px;
    border-width: thin thin 0px;
    border-color: black;
    border-style: solid;
    font-size: 33px;
    text-align: center;
}*/

/*.PlateExtraLineText {
    height: 34px;
    color: #000000;
    text-align: center;
    font-weight: normal;
    background: transparent;
}*/

#PlateTekstBord3Input {
    display: var(--plateLine3TextDisplay);
}

#PlateTekstBord4Input {
    display: var(--plateLine4TextDisplay);
}

#PlateTekstBord5Input {
    display: var(--plateLine5TextDisplay);
}

#PlateTekstBord3InputText {
    position: relative;
    padding-bottom: var(--plateLine3InputPaddingBottom);
    height: var(--plateMainLine3Height);
}

#PlateTekstBord4InputText {
    position: relative;
    padding-bottom: var(--plateLine4InputPaddingBottom);
    height: var(--plateMainLine4Height);
}

#PlateTekstBord5InputText {
    position: relative;
    padding-bottom: var(--plateLine5InputPaddingBottom);
    height: var(--plateMainLine5Height);
}

.PlateSubGemeenteTextWrapper {
    width: 100%;
    background-color: var(--mainPlateBackground);
    padding: 2px 0px 0px 0px;
    border-color: black;
    border-style: solid;
    margin: 0 auto 0 auto;
}

/*font-family: 'anwbbold';*/
#plate-configurator .plate .font-anwb {
    font-family: "courier", "arial";
}

#plate-configurator .font-rwstcc {
    font-family: 'rwstcc', "courier";
}

#plate-configurator .font-rwstdd {
    font-family: 'rwstdd', "courier";
}

#plate-configurator .font-rwstddx {
    font-family: 'rwstddx', "courier";
}

#plate-configurator .font-rwstee {
    font-family: 'rwstee', "courier";
}

#plate-configurator .font-rwsteex {
    font-family: 'rwsteex', "courier";
}

#plate-configurator .plate .font-birch_stdregular {
    font-family: 'birch_stdregular';
    letter-spacing: 3px;
}

#plate-plate-configurator .plate .font-times {
    font-family: 'Times New Roman';
}

.PlateTotalHeightLabel {
    text-align: center;
    font-style: italic;
    font-size: x-small;
    background-color: var(--configuratorBackground);
}

.textDimensionCalculation {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
    font-size: 60pt !important;
}

/*Product List*/
tr.highlight td.jsgrid-cell {
    background-color: lightskyblue;
}

tr.highlight td.jsGridFixation-cell {
    background-color: lightskyblue;
}

.ProductCount {
    text-align: right;
    font-style: italic;
    font-size: x-small;
    padding-top: -5px;
    margin-top: -5px;
}

.BeugelMsgLabel {
    color: var(--beugelMsgLabelColor);
    font-weight: normal;
}

.OrderPlateLabel {
    color: darkblue;
    font-weight: normal;
}

.OrderPlateAttention {
    font-weight: bold;
}

.OrderMsg {
    color: darkblue;
    font-weight: bold;
}
/*.OrderPlateButton{
	color: darkblue;
	font-weight: bold;
}*/

/*For text-width calculation*/
#measure {
    position: absolute;
    left: -10000px;
    top: 0px;
}

/*Overrides color-profile DevExpress css classes*/
.dxeRadioButtonList {
    border: none;
}

.dxflGroupBoxCaption {
    font-weight: bold;
    color: black;
}

#PlateLayoutGroup .dxflGroupBox {
    border-color: red;
}

.jsgrid-nodata-row {
    color: red;
    font-weight: bold;
}