/* 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;
    display: flex;
    justify-content: center;
}

.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: 239px;
}

#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: 0px;
    outline-width: 0;
}

/* General.html */
.contentStart{
    padding-top: 165px;
}

.generalContent{
    min-width: 900px;
    padding-left: 1%;
    padding-right: 1%;
    font-family: sans-serif;
}

.collapseButton{
    background-color: white;
    border: none;
    border-bottom: thin solid red;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 6.5em 0.5em 1em;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -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, #fff, #fff);
    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;
}

.expandedCollapseButton{
    background-image:
        linear-gradient(45deg, gray 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, gray 50%),
        linear-gradient(to right, #fff, #fff);
    background-position:
        calc(100% - 15px) 1em,
        calc(100% - 20px) 1em,
        calc(100% - 2.5em) 0.5em;
    background-size:
        5px 5px,
        5px 5px,
        1px 1.5em;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
}

#section01.ng-hide,#section02.ng-hide {
    -moz-opacity:0;
    -webkit-opacity:0;
    opacity: 0;
}

#section01,#section02{
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    transition: all 500ms linear;

}

.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 3% 20px 3%;
    font-family: sans-serif;
}

.slider{
    -webkit-appearance: none;
    width: 45%;
    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; 
}

.sliderSizeBox{
    font-family: sans-serif;
    width: 80px;
    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,.sizeInput::-webkit-inner-spin-button,.sizeInput::-webkit-outer-spin-button{
    -webkit-appearance: textfield;
}
.sliderSizeBox[type='number'],.sizeInput[type='number']{
    -moz-appearance: textfield;
}

.noSystemDiv{
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: center;
    padding: 20px;
    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: 30px;
}

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

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

.inputTitleRow{
    padding-bottom: 5px;
}

.numberRom{
    position: absolute;
    padding-top: 8px;
    padding-left: 2%;
    height:0;      
}

#verticalSections{
    min-width: 900px;
}

#simContent,#outerTable{
    min-width:900px;
}

hr{display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
}
/* Simulation.html */
.systemRowSim{
    padding-top: 10px;
}

#colorSelect-button{
    min-width:190px;
}

#customColor{
    padding: 0.5em 0.5em 0.5em 0.5em;
    width: 200px;
    text-align: center;
}

#toolHelp{
    width:30px;
    height:30px;
    vertical-align: middle;
    background-image: url("../images/toolHelp.png");
}

.innerTable,#outerTable {
    white-space: nowrap;
    font-size: 12px;
    border-spacing: 0;
    width:100%;
}

#scaleDiv{
    margin: auto;
    display:table;
    /* width: -moz-fit-content;
     width: fit-content;*/
    padding-top: 30px;
    padding-bottom: 20px;
    page-break-after: always;
}

#outerTable{
    border: 3px solid black;
    background: black;
}

#outerTable td {
    text-align: center;
    border: 0;
    border-bottom: 0px solid black;
    padding: 0;
}

#topShelfTableForm{
    display: inline;
}

.sizeInput{  
    z-index: 400;
    height: 16px;    
    width:90%;
    max-width: 36px;
    border-radius: 12px;
    text-align: center;
    line-height: 0.7;
}

.ui-resizable-s {
    height: 11px;
    bottom: -11px;
}

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

body{padding-bottom: 20px;}

/*Summary.html*/
.summaryContent{
    padding-top:160px;}

.printHeader{
    width:100%;
    min-width:700px;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;  /* Safari 6.1+ */
    align-items: center;
}

.nrRef{
    width: 200px;
}

#summaryContainer{
    margin: 0 auto;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;  /* Safari 6.1+ */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 2%;
    padding-right: 2%;
}

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

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

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

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

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

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

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

.sumVer{
    text-align: center;
    width: 200px;
    min-height: 24px;
}

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

.pressableButton {
    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;
}

.pressableButton:hover {
    background-color: #d3d3d3}

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

/* Other */
.flex-item{
    width:200px;
    text-align: center;
}
.flex-item>label{
    min-width:150px;
}

.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;
}

.ui-button.ui-state-active:hover,.ui-button:hover,html .ui-button.ui-state-disabled:active,.ui-button.ui-state-disabled:hover,.ui-button,.ui-button:focus {
    background-color: white;
    height:41px;
    font-family: unset;
    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;
}

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active{color: #000000;}

ul.ui-menu { max-height: 300px !important; }

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;
}

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

.buttonDiv{
    margin: 5px;
}