/* Header.html */
.headerWLogo{
    position: fixed;
    top: 0;
    width: 100%;
    z-index:500;
}

.headerbar{
    min-width: 900px;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around;  /* Safari 6.1+ */
    justify-content: space-around;
    background-color: #f8f9fa;
}

.apptitle{
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: xx-large;

}

.navbar{
    min-width: 900px;
    padding-bottom: 8px;
    width: 100%;
    z-index:500;
    background-color: #f8f9fa;
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;
    position: fixed;
    top: 80px;
}

.nav-item{
    font: 36px black;
}

.nav-item img{
    border: 1px solid black;
    max-height: 36px;
    margin-top: -8px;
}

.navbarCenter{
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 6.1+ */
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
}

.navbarRight{
    width: 330px;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 6.1+ */
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    align-items: center;
}

.nav-link{
    color: black;
    padding: .25rem 0;
}

.btn-primary {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.dropdown-menu{
    min-width: 0;
    padding: 0;
    left: 238px;
}

#langButton{
    display: inline-flex;
    align-items: center;
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    box-shadow: 0 0 0 0 #EE1D27;
    border: 1px solid transparent;
    padding: 0;
    outline-width: 0;
}

/* General.html */
.generalContent{
    min-width: 900px;
    padding-top:170px;
    padding-left: 3%;
    padding-right: 3%;
}

.sliderContainer {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 6.1+ */
    -webkit-justify-content: space-evenly;
    justify-content: space-around;
    align-items: center;
    padding: 20px 5% 20px 5%;
    font-family: sans-serif;
}

.sliderSizeBox{
    font-family: sans-serif;
    width: 60px;
    text-align:right;
    color: black;
    border-radius: 6px;
    border: 1px solid black;
    padding: 0.2em 0.2em 0.1em 0;
}

.sliderSizeBox::-webkit-outer-spin-button,.sliderSizeBox::-webkit-inner-spin-button{
    -webkit-appearance: textfield;
}
.sliderSizeBox[type='number']{
    -moz-appearance: textfield;
}

.warning{
    background-image: url("../images/warning.png");
    width: 30px;
    height: 26px;
}

.glassInfo{
    background-image: url("../images/glassInfo.png");
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}

.glassInfoDiv{
    text-align: end;
    padding-bottom: 20px;
    padding-top: 4px;
}

.noSystemDiv{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: center;
    padding: 40px;
    font-family: sans-serif;
}

.systemRow{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: space-around;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Simulation.html */
.row{
    min-width: 900px;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-evenly;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: space-around;
    align-items: center;
    border: thin solid #d8d9da;
    border-radius: 10px;
}

.halfRow{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-evenly;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.segSpan{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: center;
    align-items: center;
}

.segmentH{
    padding-right: 10px;
    padding-top: 8px;
}

.segmentsData{
    width: 80%;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    height:400px;
}

.door{
    display: -webkit-flex;
    flex-direction: column;
    margin: auto;
    width: 160px;
    height:280px;
    border: 4px solid black;
}

.segRect{
    border:1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-print-color-adjust: exact;  
}

#navButton{
    padding: 20px;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    align-items: center;
}

/*Summary.html*/
.printHeader{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-between;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: space-between;
    align-items: center;
}

.nrRef{
    width: 200px;
}

.summaryDoorProperties{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 20px;
}

.summaryDoors{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-evenly;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: space-around;
    align-items: center;
    padding: 20px
}

.summaryButtons{
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: center;
    align-items: center;
    padding: 20px
}

/* Other */
.select{
    background-color: white;
    border: thin solid;
    border-radius: 4px;
    padding: 0.5em 3em 0.5em 0.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:linear-gradient(45deg, transparent 50%, gray 50%),	linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px),	calc(100% - 15px) calc(1em + 2px),	calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px,5px 5px,1px 1.5em;
    background-repeat: no-repeat;
}

select::-ms-expand {
    display: none; /* Hide select arrow in IE */
}

.selectSystem{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-color: #EE1D27;
    width: 280px;
}

.navbar-brand{
    font-size: 1.4rem;
}

.slider{
    -webkit-appearance: none;
    width: 43%;
    border-radius: 5px;  
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;

    background: #d3d3d3;
    height: 8px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* FOR IE */
    .slider{
        background: #FFFFFF;
        height: 80px;
    }
}

.slider:hover{
    opacity: 1;
}

.slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 30%; 
    -webkit-border-radius: 30%;
    background: #EE1D27;
    cursor: pointer;
}

.slider::-moz-range-thumb{
    width: 30px;
    height: 30px;
    border-radius: 30%;
    -moz-border-radius: 30%;
    background: #EE1D27;
    cursor: pointer;
}

.slider::-ms-track {
    background: #fff;
    color: #fff;
    height: 30px;
    border:0;
}

.slider::-ms-thumb{
    width: 30px;
    height: 30px;
    border-radius: 30%;
    background: #EE1D27;
    cursor: pointer;  
}

.slider::-moz-range-progress{
    background-color: #EE1D27; 
}

.slider::-ms-fill-lower{
    height: 10px;
    background: #EE1D27; 
}

.slider::-ms-fill-upper{
    height: 10px;
    background: #d3d3d3; 
}

button {
    float: left;
    padding: 12px 25px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #EE1D27;
    background-color: #FFFFFF;
    border: 1px solid #EE1D27;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0 6px #999;
    font-size: 14px;
}

button:hover {
    background-color: #d3d3d3}

button:active:not(#langButton) {
    background-color: #d3d3d3;
    box-shadow: 0 3px #666;
    transform: translateY(4px);
}

table {
    border-collapse: separate;
    border-spacing: 0px;
    border:1px solid #EE1D27;
    border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius:10px;
    width: 100%; 
}

td {
    border-top:1px solid #EE1D27;
    padding: 8px;
}

th:first-child, td:first-child {
    border-left: none;   
}

td:last-child{
    border-left: none; 
    text-align: right;}

th{
    padding: 8px;
    text-align: left;
}

tr:hover {
    background-color: #d3d3d3;
}

input[type="checkbox"] {
    width: 14px;
    height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-apperance: none;
    appearance: none;
    background: url(../images/checkbox.png) no-repeat;
    vertical-align: -55%;
    padding-right: 20px;


}

input[type="checkbox"]:checked {
    background: url(../images/checkbox-checked.png) no-repeat;
}

#forwardButton{
    padding: 15px 30px;
    font-size: 17px;
}

.buttonDiv{
    margin: 5px;
}

#innerCalcButton{
    font-weight: bold;
}