/*
  css styles for the overlay
*/

/* the overlastaryed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    /* z-index:10000; */
    z-index: 1100;

    padding: 0.5em 0.5em 1em 1em;
    /* styling */
    background-color:rgba(0,0,0,0.9);

    /*width:800px;*/
    width: auto;
    /* min-width: 30em;*/

    min-height:150px;
    max-width: 90%;

    border:1px solid #666;

    -moz-box-shadow: 0 0 3px 1px #888;
    -webkit-box-shadow: 0 0 3px 1px #888;
    box-shadow: 0 0 3px 1px #888;
    overflow: hidden;

}




/*--- Links ----------------------------------------------------------------------------------------- */

.simple_overlay .close:hover,
.simple_overlay .close:focus {				
    background-color:transparent;
    color: #fff;
}

#doitStart {
    cursor: pointer;
    background: #a5c43f;
}

#doitLoadXMLConfA {
    cursor: pointer;
    margin-left: 1em;  
    background-color: #666;
    color: #fff;
}

.simple_overlay .doitGrid {
    width: auto;
}

.simple_overlay	.doitGbox {
    padding: 0 0.75em;
}

.doitInfoboxInter img {
    background: #fff;
    padding: 2px;
}

.simple_overlay a {
    text-decoration: underline;
}

/* styling for elements inside overlay */
.details {
    width:150px;
    padding-top: 1em;
}

.details h3, .details h4 {
    background: transparent;
    padding: 0;
}
.doitInfoboxContent {
    /*  padding: 0em 1em 1em 0px;*/
    margin:0;
    font-size: 0.75rem;
    max-width: 70em;
    /*min-width: 29em;*/
    overflow-y: auto;		
    display: table;
}
#doitOverlayContact .doitInfoboxContent{
    display:block;
}
#doitStartScreen{
    overflow: hidden;   
    position: absolute;
    height: auto;
}
#doitStartScreen .startEle{
    display: inline-block; 
    width: 130px;
    min-width: 130px;
    vertical-align: top;   
}

#doitOverlayMultipleCustomer .doitInfoboxContent,
#doitOverlayRetailer .doitInfoboxContent {
    max-width: 700px;
    min-width:680px;
    min-height: 400px;
}

#doitOverlayMultipleCustomer .mCustomScrollBox > .mCSB_scrollTools, 
#doitOverlayRetailer .mCustomScrollBox > .mCSB_scrollTools {    
    right: -11px;
}

#doitOverlayMultipleCustomer .mCustomScrollBox > .mCSB_scrollTools,
#doitOverlayContact .mCustomScrollBox > .mCSB_scrollTools{
    right: -9px;
}

#doitOrderComment{
    max-width: 400px;
    width:auto;
}
#doitRetailerSearchMap{
    display: inline-block; height:300px; width: 400px;
}
#doitStartScreen .doitInfoboxContent1 {
    padding: 1em 1em 1em 0;
    margin:0;
    font-size: 0.75rem;  
    /* max-width: 50em;   */
    overflow-y: auto;		       
    min-height: 300px;
    max-height: 100%;
    margin-bottom: 100px;
    float: left;
    width: 98%;
    height: auto;
    position: absolute;

}
#doitStartScreen #sscontainer{
    min-height: 340px;
    height:auto;
    overflow:hidden;

}
#doitYaml { 
    font-size: 10px;
    float: right;
    color: #ddd;
    font-style: italic;
    transform: rotate(270deg);
    transform-origin: 100% 0;
    position: relative;   
    top: 50px;
    right: 14px;
    max-width: 180px;
    text-align: right;   
}

.doitInfoboxContentLeft {	
    float: left;
    width: 36%;
}

.doitInfoboxContentRight {	
    float: right;
    width: 60%; 
}	

.doitInfoboxContentLeftResp {	

}

.doitInfoboxContentRightResp {	

}	

#doitAboutText {
    padding-right: 1.5rem; 
    color: #000;
}	
#doitStartText p {
    padding: 0 1rem 1rem 1rem;
    font-size: medium;
    color: #000;
    text-align: center;

}
#doitOverlayAbout .doitInfoboxContent {
    padding-top: 1em;
    padding-right: 0em;  
}

#doitOverlayAbout, #doitStartScreen {
    background-color:rgb(255,255,255);
    /*  z-index: 1500;*/
    z-index: 1000;
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #000;
    width: auto;
    height: auto;
    max-height: 500px;
    display:none;   
    max-width: 620px;
    width: 620px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;



}
#doitStartScreen .infoStartContent{
    width: 70%; 
    margin-left: auto;
    margin-right: auto;    
    display: block;
    position: relative;
}
.lupeOverlay {

    position: fixed;
    background: #fff !important;
    background: rgba(255, 255, 255, 0.9) !important;

    bottom: auto !important;
    padding: 25px 10px 10px 10px !important;
    border: 1px solid rgba(200, 200, 200, 0.9) !important;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    z-index: 9999;
    /*  max-width: 100%;
      max-height: 100%;*/
    overflow: hidden;
    min-width: auto;
    text-align: center;
}
.lupeOverlay p{
    text-align: left;
    padding-bottom: 10px;
}
.lupeOverlay img{
    height:auto;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.doitInfoboxHeader {
    padding: 0 0 1em 0;
    border-bottom: solid 1px #fff;
    /* position: relative;*/


}
#doitStartScreen .doitInfoboxHeader {
    padding: 0 0 1em 0;
    border-bottom: 0;
}

.doitInfoboxHeader h3 {
    background: transparent;
    margin: 0px;
    padding: 0.5em 0 0 0;
}
#doitStartScreen .doitInfoboxHeader h3{
    color: #000;
    padding-top: 2em;
    text-align: center;
    line-height: 1.4em;
    text-transform: uppercase;
}
.doitInfoboxHeader h5 {
    background: transparent;
    /*color: red;*/
}

.details ul {
    list-style-type: none;
    margin-left: 0.2em;
    text-indent: -1em;
}

#doitOverlayContact{
    position: absolute;
    display:none;   
    height:800px;
}
#doitOverlayContact .doitInfoboxContent * {
    font-size: 0.75rem;	
}

#doitOverlayAbout, #doitOverlayImpressum {
    max-width: 45%;
}

#doitOverlayAbout {
    padding: 1em 0em 0.3em 2em;
}	

#doitOverlayAbout p{
    font-size: 100%;	
    margin: 0 0 1em 0;
}

.lupe{
    position: absolute;
    top: auto;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: none;
    background: rgba(255,255,255,0.75);
    padding: 0.15rem;
    text-align: center;
}
#doitOverlayAbout p, #doitOverlayAbout h3,#doitStartScreen #doitStartText p, #doitStartScreen h3{
    color: rgb(0,0,0,.8);
    color: #000;
}

#doitStartScreen .infoStartContent p{
    color: #000;
    font-size: 112.4%;
    width: 80%;
    margin: auto;
    padding: 17px 0px 0px 0px;
}
#doitOverlayAbout .doitInfoboxHeader{
    border-bottom: solid 1px #000;
}

#doitOverlayAbout .close, #doitStartScreen .close {
    /*  background-image:url(../images/iconCloseBl.svg);*/
}

#doitOverlayImpressum {
    margin: 0 0 1em 0;
}

#doitUnsupportedPanels, #doitInputsWithExceededMaxlength {
    font-style: italic;
    padding: 0.75rem;	
}
#doitOverlaySend,
#doitOverlayOrder{
    margin-bottom: 10rem;
    overflow-y: auto;
    right: 30%;
    top: 5%;
    width: 700px;
}
#doitOverlayOrder{
    height:350px;
}

#doitOverlaySend,
#doitOverlayContact{
    overflow: hidden;
    top: 10%;
    position:absolute;

}
#doitSendForm{
    padding-right: 10px;
}

#doitSendForm p, #doitContactForm p {
    width:98%;
}
#doitRetailerSearchForm.doitPanelForm input[type="text"],
#doitRetailerSearchForm.doitPanelForm span input[type="email"], 
#doitRetailerSearchForm.doitPanelForm span select, textarea,
#doitSendForm.doitPanelForm input[type="text"],
#doitSendForm.doitPanelForm span input[type="email"], 
#doitSendForm.doitPanelForm span select, textarea,
#doitOrderForm.doitPanelForm input[type="text"],
#doitOrderForm.doitPanelForm span input[type="email"], 
#doitOrderForm.doitPanelForm span select, textarea,
#doitContactForm.doitPanelForm input[type="text"],
#doitContactForm.doitPanelForm span input[type="email"], 
#doitContactForm.doitPanelForm span select,
#doitProjectForm.doitPanelForm input[type="text"],
#doitObjExportForm.doitPanelForm input[type="text"],
#doitOverlayOrder input[type="submit"],
#doitOverlayOrder input[type="button"],
input[type="reset"],
input[type="number"],
input[type="submit"]{
    font-size: 14px !important;	
    cursor: pointer;
    border-radius: 0;
    border: medium none;

}
input[type="reset"]{
    font-size: 81.25% !important;
}
#doitOverlayProject{
    min-width: 280px;
}
#doitOverlayProject form {
    margin-bottom: 1em;
    margin-top: 1em;	
}

#doitOverlayProject form label {
    width: auto !important;
}

#doitOverlayProject form input[type="text"] {
    width: auto;
}		

#doitProjectForm p {
    margin-bottom: 1.5em;	
}

#doitSubmitKfg {
    margin-top: 1.6em;
    margin-bottom: -0.5em;	
}

#doitContactHomeUrl, #doitSendHomeUrl {
    display: none;	
}

#doitOverlayContact .doitInfoboxContent * {
    font-size: 12px;	
}
#privacyPolicy input{
    display: none;
}


#doitRetailerSearchForm.doitPanelForm label,
#doitContactForm p, #doitContactForm div, #doitContactForm label, #doitSendForm p, #doitSendForm div, #doitProjectForm, #doitProjectForm div, #doitProjectForm label,
#doitSendForm p, #doitSendForm div, #doitSendForm label {
    font-size: 12px;
    line-height: 1.3em;
}
#doitContactForm label, #doitSendForm label, #doitRetailerSearchForm label {
    vertical-align: top;
    color: #fff;
}
/*
#doitSendForm.doitPanelForm input[type="text"],
#doitSendForm.doitPanelForm span input[type="email"], 
#doitSendForm.doitPanelForm span select, textarea,
#doitOrderForm.doitPanelForm input[type="text"],
#doitOrderForm.doitPanelForm span input[type="email"], 
#doitOrderForm.doitPanelForm span select, textarea,
#doitContactForm.doitPanelForm input[type="text"],
#doitContactForm.doitPanelForm span input[type="email"], 
#doitContactForm.doitPanelForm span select,
#doitProjectForm.doitPanelForm input[type="text"],
#doitObjExportForm.doitPanelForm input[type="text"]{
    color: #000;
    border-radius: 0;
    border: medium none;
    padding-left: 5px;
    background-color: #e4e4e4;
    padding: 4px;
    width: 13rem;

}*/
#doitDoorsProperties .sealingSelect span select,#doitDoorsProperties span select, #doitInteriorProperties span select{
    color: #000;
    border-radius: 0;
    border: 1px solid #555;
    padding-left: 5px;
    /*   background-color: #e4e4e4;*/
    padding: 5px;
    /* width: 13rem;*/
    width: 100%;

}
#doitDoorsProperties .sealingSelect span select option:focus,#doitDoorsProperties span select option:focus, #doitInteriorProperties span select option:focus{
    outline: none;
    -moz-appearance: none;
}    
#doitDoorsProperties .sealingSelect span select.doitSealingSelect option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}
.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}
.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 14px;
    color: #fff;
    width: 100%;
    min-height: 30px;

}

.select-styled, .select-styled-oLays {

    position: relative;
    top: 0;
    right: 0; 
    left: 0;
    border: 1px solid #bbb;  
    padding: 4px 10px;
    /*   -moz-transition: all 0.2s ease-in;
       -o-transition: all 0.2s ease-in;
       -webkit-transition: all 0.2s ease-in;
       transition: all 0.2s ease-in;*/

}
.select-styled{
    margin-top: .5em;
}
.select-styled-oLays {
    background-color: #fff;;/*rgba(0,0,0,0.8);*/
    border: 1px solid #555;
    color: #555 !important;
    padding-top: 8px;
    padding-bottom: 9px;
}
.select-styled::after, .select-styled-oLays::after {

    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-color: #bbb transparent transparent transparent;
    position: absolute;
    top: 10px;
    right: 10px;

}
.select-styled-oLays::after {
    border-color: #555 transparent transparent transparent;
}
.select-options, .select-options-oLays {
    display: none; 
    position: absolute;  
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    color: #555;  
}
.select-options{
    position: relative;    
}

.select-styled-oLays{
    vertical-align: middle;
}
.isinvalid{
    background-color:rgba(255, 254, 54, 0.9);
}


.button-styled {
    position: relative;
    top: 0;
    right: 0; 
    left: 0;
    padding: 4px 10px;
    margin-top: .5em;
	background: transparent;
	font-size: 14px;
	cursor: pointer;
	
	color: #ffffff;
    border: 1px solid #bbb;
}

.doitFrontExpansionDialog {
	z-index: 9999 !important;
}

/*
#doitFrontExpansion {
	z-index: 999 !important;
}
*/

#doitFrontExpansion #doitFrontExpansionDoors * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#doitFrontExpansion .frontPositionField {
	border: 1px solid #999999;
	margin: 0px 0px 2px 0px;
	padding: 0px;
	line-height: 22px;
	position: relative;
	width: 100px;
}

#doitFrontExpansion .frontPosition {
	list-style: none;
	text-align: center;
	margin: 0px 5px 0px 0px;
	padding: 0px;
}

#doitFrontExpansion .frontPositionField-type {
	display: block;
	height: 22px;
	position: relative;
	cursor: pointer;
}

#doitFrontExpansion .frontPositionField-type-door {
	position: absolute;
	top: 50%;
	margin-top: -3px;
	left: 10px;
	right: 10px;
	height: 6px;
	background:#FF7F50;
}

#doitFrontExpansion .frontPositionField-type-empty {
	position: absolute;
	top: 50%;
	margin-top: -3px;
	left: 10px;
	right: 10px;
	height: 6px;
	background:#3CB371;
}

#doitFrontExpansion .frontPositionField-stileLeft {
	text-align: right;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 20px;
	height: 22px;
	cursor: pointer;
}

#doitFrontExpansion .frontPositionField-stileRight {
	text-align: right;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 20px;
	height: 22px;
	cursor: pointer;
}

#doitFrontExpansion .frontExpansionBrakeSelect,
#doitFrontExpansion .frontExpansionTiltGuardSelect,
#doitFrontExpansion .frontExpansionWidthInput {
	display: block;
	max-width: 100px;
	width: 100%;
	margin: 0px 0px 2px 0px;
    outline: none;
}

#doitFrontExpansion .frontExpansionBrakeSelect:active,
#doitFrontExpansion .frontExpansionBrakeSelect:focus,
#doitFrontExpansion .frontExpansionTiltGuardSelect:active,
#doitFrontExpansion .frontExpansionTiltGuardSelect:focus,
#doitFrontExpansion .frontExpansionWidthInput:active,
#doitFrontExpansion .frontExpansionWidthInput:focus {
    outline: none;
}

#doitFrontExpansion .frontExpansionBrakeSelect,
#doitFrontExpansion .frontExpansionTiltGuardSelect {
	padding: 0.2em 0.3em;
	border: 1px solid #000;
}

#doitFrontExpansion .frontExpansionWidthInput {
	cursor: text;
}

/*
#doitFrontExpansion .frontExpansionWidthInput[disabled] {
	background-color: rgb(221, 221, 221);
}
*/

#doitFrontExpansion .frontExpansionWidthInput.isinvalid{
    background-color:rgba(255, 254, 54, 0.9);
}

#doitFrontExpansion .frontPositionField-stileLeft.a0 { background: url('../images/front/stiletypes.png') no-repeat   0px -22px} /* asymmetrical */
#doitFrontExpansion .frontPositionField-stileLeft.a1 { background: url('../images/front/stiletypes.png') no-repeat -20px -22px} /* asymmetrical + turned */
#doitFrontExpansion .frontPositionField-stileLeft.s0 { background: url('../images/front/stiletypes.png') no-repeat -40px -22px} /* symmetrical */
#doitFrontExpansion .frontPositionField-stileLeft.r0 { background: url('../images/front/stiletypes.png') no-repeat -60px -22px} /* rectangular */

#doitFrontExpansion .frontPositionField-stileRight.a0 { background: url('../images/front/stiletypes.png') no-repeat   0px 0px} /* asymmetrical */
#doitFrontExpansion .frontPositionField-stileRight.a1 { background: url('../images/front/stiletypes.png') no-repeat -20px 0px} /* asymmetrical + turned */
#doitFrontExpansion .frontPositionField-stileRight.s0 { background: url('../images/front/stiletypes.png') no-repeat -40px 0px} /* symmetrical */
#doitFrontExpansion .frontPositionField-stileRight.r0 { background: url('../images/front/stiletypes.png') no-repeat -60px 0px} /* rectangular */



#doitRetailerSearchForm.doitPanelForm input[type="text"],
#doitRetailerSearchForm.doitPanelForm span input[type="email"], 
#doitRetailerSearchForm.doitPanelForm span select, textarea,
#doitSendForm.doitPanelForm input[type="text"],
#doitSendForm.doitPanelForm span input[type="email"], 
#doitSendForm.doitPanelForm span select, textarea,
#doitOrderForm.doitPanelForm input[type="text"],
#doitOrderForm.doitPanelForm span input[type="email"], 
#doitOrderForm.doitPanelForm span select, textarea,
#doitContactForm textarea,
#doitSendForm textarea,
#doitContactForm.doitPanelForm input[type="text"],
#doitContactForm.doitPanelForm span input[type="email"], 
#doitContactForm.doitPanelForm span select,
#doitProjectForm.doitPanelForm input[type="text"],
#doitObjExportForm.doitPanelForm input[type="text"],
#doitRetailerSearchAddress{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;	
    background: #fff;	
    border: 1px solid #555;
    padding: 1%;
    color: #555;
    font: 95% Arial, Helvetica, sans-serif;
    width: 13rem;
    max-width: 13rem;
    min-width: 13rem;
}

#doitSendForm input[type="text"]:focus,
#doitSendForm input[type="date"]:focus,
#doitSendForm input[type="datetime"]:focus,
#doitSendForm input[type="email"]:focus,
#doitSendForm input[type="number"]:focus,
#doitSendForm input[type="search"]:focus,
#doitSendForm input[type="time"]:focus,
#doitSendForm input[type="url"]:focus,
#doitSendForm textarea:focus,
#doitContactForm input[type="text"]:focus,
#doitContactForm input[type="date"]:focus,
#doitContactForm input[type="datetime"]:focus,
#doitContactForm input[type="email"]:focus,
#doitContactForm input[type="number"]:focus,
#doitContactForm input[type="search"]:focus,
#doitContactForm input[type="time"]:focus,
#doitContactForm input[type="url"]:focus,
#doitContactForm textarea:focus,
#doitRetailerSearchAddress:focus
{
    box-shadow: 0 0 5px #ccc;	
    border: 1px solid #555;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

#doitRetailerSearchForm.doitPanelForm input[type="text"],
#doitRetailerSearchForm.doitPanelForm span input[type="email"], 
#doitRetailerSearchForm.doitPanelForm span select, textarea ,
#divRetailerSearchDistance input{
    width: 98%;
    max-width: none;
    /*  min-width:90%;*/
}
#doitOrderForm textarea{
    min-width:95%; 
}

/*
#doitContactForm input[type="submit"]:hover,
#doitContactForm input[type="button"]:hover{
        background: #2EBC99;
}*/

#divTakeNotice .select-options-oLays {  
    bottom:100%; 
}
ul.select-options-oLays {  

    background-color: #ddd;
}

.select-options li, .select-options-oLays li {

    margin: 0;
    padding: 3px 15px;
    text-indent: 0px;
    border-top: 1px solid #ebebeb;
    /* -moz-transition: all 0.15s ease-in;
     -o-transition: all 0.15s ease-in;
     -webkit-transition: all 0.15s ease-in;
     transition: all 0.15s ease-in;*/
    background-color: #ddd;

}
.select-options-oLays li{
    color:#555;
}

.select-options li:hover,.select-options-oLays li:hover {

    color: #000;
    background: #ebebeb;

}
.select-options-oLays li:hover ul{
    bottom: 100%;
}
#drawerHandleSelected{
    padding:5px 5px 5px 0px;
}
#divSendTitle, #divContactTitle, #divTakeNotice{
    width: 13rem;

}


#doitSubdivisionsTabs .sealingSelect label{
    display: inline-block;
    width: 80%;
    cursor: pointer;

}
#doitSubdivisionsTabs .sealingSelect #sealingLabel, #doitSubdivisionsTabs #chooseHandle label{
    display: inline-block;
    font-weight: bold;
    width: 42%;
}
#doitSubdivisionsTabs .doitSubdivisionsTabsParts{
    position: relative;
    top: 0px;
    bottom: 10px;
    padding-top: 12px;
}
#doitInteriorProperties .doitSubdivisionsTabsParts{
    position: relative;
    top: 0px;
    bottom: 10px;
    padding-top: 12px;

}
#doitSubdivisionsTabs .doitSubdivisionsTabsParts label{
    display: inline-block;
    font-weight: bold;
    width: 80%;
}

#doitSubdivisionsTabs #wallConnection #connectleft label, 
#doitSubdivisionsTabs #wallConnection #connectright label {
    display: inline-block;
    font-weight: normal;
    width: 80%;
}

#doitSubdivisionsTabs #endCapsBottomTrack #endCapBottomTrackLeft label,
#doitSubdivisionsTabs #endCapsBottomTrack #endCapBottomTrackRight label,
#doitSubdivisionsTabs #endCapsTopTrack #endCapTopTrackLeft label,
#doitSubdivisionsTabs #endCapsTopTrack #endCapTopTrackRight label,
#doitSubdivisionsTabs #endCapsSet #endCapSetLeft label,
#doitSubdivisionsTabs #endCapsSet #endCapSetRight label {
    display: inline-block;
    font-weight: normal;
    width: 80%;
	cursor: pointer;
}

#doitInteriorProperties .doitSubdivisionsTabsParts label {
    display: inline-block;
    width: 88%;  
}

#doitSubdivisionsTabs .doitSubdivisionsTabsParts #bottomTrack label, #doitSubdivisionsTabs #wallConnection label,#doitSubdivisionsTabs .doitSubdivisionsTabsParts #profileColorL{
    display: inline-block;
    width: 47%;
}
#doitInteriorProperties .doitSubdivisionsTabsParts #backWall label{
    width: 67%;
}
#doitProfileTabs #doitProfileTabsA ul li {
    background: none;
    color: #222;
    display: inline-block;
    /* padding: 10px 15px;*/
    cursor: pointer;

}

#doitSendForm div, #doitContactForm div,
#doitOrderForm div, #doitContactForm div {
    margin-bottom: 1px;
}


#doitRetailerSearchForm div, #doitRetailerForm div {
    margin-bottom: 10px;
}
#doitRetailerSearchForm div{
    margin-bottom: 0px;
}

#doitRetailerSearchForm.doitPanelForm #doitRetailerSearchAddress{
    padding:8px 5px 8px 15px;
    width:100%;
}
#doitRetailerSearchForm div:first-child{
    margin-bottom:10px;
}
#doitRetailerSearchForm.doitPanelForm label {
    width: 100%;
}
#doitOverlayMultipleCustomer .mCSB_container,
#doitOverlayRetailer .mCSB_container {
    margin-right: 10px;
}
.custom{
    display:inline-block;
    width:16px;
    height:16px;
    position:relative;
    /*top:1.5rem;*/
    vertical-align:middle;
    border:solid 1px #ccc;
    background:#fff
}
.custom .custom.checkbox,.custom .custom.checkboxNo{-webkit-border-radius:0;border-radius:0;padding:0}
.custom .custom.radio{-webkit-border-radius:1000px;border-radius:1000px;padding:3px}
.custom{
    display:inline-block;
    width:18px;
    height:18px;
    position:relative;
    /*top:1.5rem;*/
    vertical-align:middle;
    border:solid 1px #ccc;
    background:#fff}
.custom {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    display: inline-block;
    height: 18px;
    position: relative;
    /*top: 1.5rem;*/
    vertical-align: middle;
    width: 18px;    
}
.custom.checkbox, .custom.checkboxNo {
    background: #fff none no-repeat scroll 0 0;
    border: 0 none;
    height: 18px;
    margin-top: -1px;
    width: 18px;
}

#applyMaterial .custom, #applyDivrails .custom{
    border-radius: 10px;
}




span.custom.checkbox, span.custom.checkboxNo{
    border: 1px solid #fff;
    cursor: pointer;
    /*left: 0;*/
    /*right: 16px;*/
    margin-bottom: 0;
    position: relative;
    /*position: absolute;*/
    /*top: 0;*/
    background-color: #ffffff;
}
span.custom.checkbox svg, span.custom.checkboxNo svg{
    visibility: hidden;    
}
span.custom.checkbox.checked svg, span.custom.checkboxNo.checked svg{
    visibility: visible;
}

.simple_overlay a {
    color: #f2f2f2 ;
    text-decoration: underline;
    background: none;
}
.simple_overlay a:hover, .simple_overlay a:visited, .simple_overlay a:focus {
    color: #ffffff ;
    text-decoration: underline;   
    border: none;
}
.simple_overlay .close, #doitStartScreen .close{
    /*background-image:url(../images/iconClose.svg);
    background-size: 30px 30px;
    background-repeat: no-repeat;*/
    position:absolute;
    right:0.6em;
    top:0.7em;
    cursor:pointer;
    height:30px;
    width:30px;
    opacity: 0.8;
}


/* doitUIInfo */
.doitUIInfo {
    margin-left: 0.3em; 
    display: inline-block !important; 
    position: relative; 
    top: -0.2em; 
    color: black; 
    background-color: #cccccc; 
    border: solid 1px #cccccc;
    border-radius: 1em; 
    width: 1em; 
    height: 1em; 
    font-size: 0.8em; 
    padding: 1px 3px 3px 2px;
    vertical-align: middle; 
    text-align: center; 
    font-weight: bold; 
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.3;
    cursor: pointer;
    text-transform: none;
}
.doitUIInfo:hover {
    background-color: #ffffff;
    border: solid 1px #ffffff;

}

.doitUIInfoDialog {
    background-color: rgba(25, 25, 25, 0.97);
    color: #ffffff;
    padding: 2px 5px 8px 5px !important;
}

.doitUIInfoDialogContent {
/*    max-height: 20em;*/
    max-height: 40em;
    overflow: auto;
}

.doitUIInfoDialog h6 {
    color: #ffffff;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 1em;
} 

.doitUIInfoDialog .qtip-close {
    background-color: #333;
    right: 0;
    top: 0;
    color: #aaaaaa;
}

.doitUIInfoDialog .qtip-icon .ui-icon {
    font: normal normal 20px/13px Tahoma,sans-serif !important;
}

.doitUIInfoDialog .qtip-close:hover {
    color: #ffffff;
}
.doitUIInfoDialog {
    position: absolute;
    background: #fff !important;
    background: #333 !important;
    top: 3.5rem;
    bottom: auto !important;
    padding: 10px !important;
    border: 1px solid rgba(200, 200, 200, 0.9) !important;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);   
    max-width: 100%;
    max-height: 100%;
    max-width: 280px;
    min-width: 50px;
    overflow: hidden;
}
.qtip-icon, .qtip-icon .ui-icon{
    background-color: #000;
    border:none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;   
    color:#aaaaaa;
}
.qtip-icon, .qtip-icon .ui-icon:hover{    
    color:#ffffff;
}
.doitUIInfoImgDiv {
    background-color: #ffffff;
    padding: 1px;
    display: inline-block;
    margin-bottom: 0.7em;
}

.doitUIInfoImg {
}

/*--- Links ----------------------------------------------------------------------------------------- */

.simple_overlay .close:hover,
.simple_overlay .close:focus,
#startInfo .close:hover,
#startInfo .close:focus,
#doitStartScreen .close:hover,
#doitStartScreen .close:focus{				
    background-color:transparent;
    color: #000;
    opacity: 0.5;
}

.simple_overlay .close, #doitStartScreen .close {
    position: absolute;  
    width: 32px;
    height: 32px;
    opacity: 1;
}

.simple_overlay .close:before, .simple_overlay .close:after, #doitStartScreen .close:before, #doitStartScreen .close:after{
    position: absolute;  
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #fff;

}
.simple_overlay.lupeOverlay .close:before, .simple_overlay.lupeOverlay .close:after {
    position: absolute;  
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #000;
}

.simple_overlay .close:before, #doitStartScreen .close:before {
    transform: rotate(45deg);
    right: 13px;
}
.simple_overlay .close:after, #doitStartScreen .close:after {
    transform: rotate(-45deg);
    right: 13px;
}
#doitOverlayAbout.simple_overlay .close:before, #doitOverlayAbout.simple_overlay .close:after,
#doitStartScreen .close:before, #doitStartScreen .close:after{
    background-color: #333;
}

#doitSendComment{
    color:#000 !important;
}
#doitSendForm.doitPanelForm textarea, #doitOrderForm.doitPanelForm textarea, #doitContactForm.doitPanelForm textarea {
    color:#000 !important;
}
#doitOverlayContact .doitInfoboxContent textarea,#doitSendForm #doitSendTitle select, #doitContactForm .doitPanelForm span select, #doitOverlayContact .doitInfoboxContent option, #doitOverlaySend .doitInfoboxContent option{
    color:#000 !important;
}
#doitSendContent .doitSendHeader{

}


#doitSubmitKfg {
    margin-bottom: 30px;
    margin-right: 25px;
    margin-top: 20px;
}
.disabled{
    opacity: 0.4;   
    cursor: not-allowed !important;
}
.infoDivs{
    line-height: 2;
}
#applyMaterial label, #applyProfileMaterial label, #applyInteriorMaterial label, #applyDivrails label{
    margin-top: 5px;
    width:80%;
}

#doitProfileTabsA{
    /* white-space: nowrap;    
     overflow:auto;   */  
}
#doorsWithInterior, #onlyDoors, #onlyInterior{
    cursor: pointer;
}

#sendContactButton{
    position:relative;
    text-align:right;
    margin-right:10px;
    overflow: hidden;
    height: 80px;   
}

button:focus {
    outline:0;    
}
#presentedByLogo{
    background-color: #333; /** presentedByLogoBgColor **/
}
#cusLogoText{
    color: #fff; /** cusLogoTextFontColor **/
}
#doitOverlayContact .doitInfoboxContent .doitInfoboxContentLeftResp{    
    position: relative;
    display: table;    
    position: relative;

}
#doitOverlayContact .doitInfoboxContent .doitInfoboxContentRightResp{    
    position: relative;
    display: inline-block;   
    height: auto;
    max-height: 50rem;

}
#doitOverlaySend .doitInfoboxContent .doitInfoboxContentLeftResp{    
    position: relative;
    display: table;
    padding-bottom: 50px;

}
#doitOverlaySend .doitInfoboxContent .doitInfoboxContentRightResp{    
    position: relative;
    display: inline-block;
    padding-bottom: 50px;

}
#doitOverlayMultipleCustomer .multipleCustomerInfo{
    min-width:350px;
}

#doitOverlayMultipleCustomer .multipleCustomerInfo .doitPanelForm input[type="button"] {
	white-space: normal;
}

.multipleCustomerInfoRow{
    float: left;
    width: 33.3333%;
}
@media screen and (max-width: 1870px){
    #applyDivrails label{
        margin-top: 5px;
        width:80%;
    } 

}
@media screen and ( max-width: 1200px ) {
    #doitSubdivisionsTabs #wallConnection label{
        width: 120px;
    }
    #presentedByLogo{
        width: 200px;        
    }
}
@media screen and ( max-width: 750px ) {
    #doitOverlayMultipleCustomer .doitInfoboxContent,
    #doitOverlayRetailer .doitInfoboxContent {
        max-width: 700px;
        width: auto;
        min-width:0px;

    }
    #doitOverlayMultipleCustomer .doitInfoboxContent .mCSB_container,
    #doitOverlayRetailer .doitInfoboxContent .mCSB_container {

        margin-right: 0px;
        overflow: hidden;
        width: auto;

    }    
    #doitOverlayMultipleCustomer .doitInfoboxContentLeft,
    #doitOverlayRetailer .doitInfoboxContentLeft {

        float: none;
        width: 50%;

    }
    #doitOverlayMultipleCustomer .doitInfoboxContent .doitInfoboxContentRight,
    #doitOverlayRetailer .doitInfoboxContent .doitInfoboxContentRight {	
        float: none;
        clear:both;
        width: 80%; 
    }     
    #doitOverlayRetailer .doitInfoboxContent .doitInfoboxContentRight #doitRetailerSearchMap{
        width: 100%;
        margin-right:10px;
    }
    #doitOverlayMultipleCustomer .select-styled-oLays,
    #doitOverlayRetailer .select-styled-oLays {

        vertical-align: middle;
        min-width: 11rem;
        max-width: 98%;
    }
    #doitRetailerSearchResult{
        width:100%;
    }
    .retailerSearchInfo .doitPanelForm input{        
        margin-left: 0px !important;
    }
    .retailerSearchInfo .doitPanelForm{
        margin-left: 0px !important;
        width: 90%;
    }
    .retailerSearchInfo .doitPanelForm input[type="submit"], .retailerSearchInfo .doitPanelForm input[type="button"] {
        font-size: 12px;
    }	
    .multipleCustomerInfoRow{
        float: none;
        width: 90%;
        min-width: 70%;
        margin-bottom: 10px;
    }
    #doitOverlayMultipleCustomer .doitPanelForm input[type="button"] {
        margin-left: 0px;
    }
}
@media screen and ( max-width: 610px ) {

    #doitStartScreen .infoStartContent{
        padding-bottom: 150px;
    }
    #doitStartScreen .infoStartContent p{

        padding: 5px 0px 0px 0px;
    }

    #doitStartScreen .infoStartContent div div{    
        padding: 17px 0px 0px 0px;

    }
    .retailerSearchInfo{
        clear:left;
        width:100% !important;
    }
    .retailerSearchInfo p{     
        width:98%;
    }
    .retailerSearchInfo .doitPanelForm{
        margin-top: 10px;
        margin-left: 0px !important;
    }
    /*
     .retailerSearchInfo .doitPanelForm input{        
        margin-left: 0px !important;
    }*/
    #doitOverlayMultipleCustomer .doitPanelForm input[type="submit"], #doitOverlayRetailer .doitPanelForm input[type="button"],
    #doitOverlayRetailer .doitPanelForm input[type="submit"], #doitOverlayRetailer .doitPanelForm input[type="button"] {
        float: none;
        margin-left: 0px;
    }


}

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

    #doitYaml {
        font-size: 9px;   
        right: 12px;
    }
    #doitOverlayRetailer .doitInfoboxContent .doitInfoboxContentRight #doitRetailerSearchMap{
        width: 330px;
        margin-right:10px;
    }

}

@media screen and (max-height: 550px) {
    #doitOverlayContact, #doitOverlaySend {
        top:23px !important;
    }

}