/*
blue: #004B8E
light-blue: #8AAAC7
green: #388557
yellow: #F6C51B
*/

body{
    font-family: arial;
    margin: 0;
    background: #F2F2F2;
}

/*.app{
    border:2px solid red;
}
*/
.tracking-table {
    width: 80%;
    border: 1px solid darkgray;
    margin: 5px auto;
}

.tracking-heading-cell {
    font-weight: bold;
    text-align: center;
}

.tracking-day-cell {
    width: 20%;
}

.tracking-time-cell {
    width: 20%;
}

.tracking-tilt-cell {
    width: 30%;
}

.tracking-azimuth-cell {
    width: 30%;
}

.app{
    width: 1250px;
    margin:0 auto;
    padding-top: 2px;
    margin-bottom: 50px;
}

#zczc {
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
    border: 2px solid #004B8E;
    display:none;
}

#thebox {
    position: absolute;
    top:0px;
    left:0px;
    width: 28px;
    height: 28px;
    z-index:1000;
    border: 1px solid red;
}

#minicanvas {
    position: absolute;
    top:0px;
    left:0px;
    width: 150px;
    height: 150px;
    z-index:1000;
}

#zoomoverview {
    position: absolute;
    top:0px;
    left:580px;
    width: 150px;
    height: 150px;
    z-index:1000;
    background-color: lightgray;
    display:none;

}

#zoomcontainer {
    position: absolute;
    top:0;
    left:0;
    width: 575px;
    height: 575px;
    overflow: auto;
    z-index:1000;
    background-color: lightgray;


}

#zoomshade {
    display:block;
    padding:1px;
    z-index:1001;
}

.header-container{
    position: relative;
    width: 100%;
    height: 50px;
    background: #004B8E;
    border-radius: 5px;
    display: table;
}

.header-left{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
    color: white;
}

.header-right{
    position: absolute;
    right: 5px;
}
.header-logo{
    height: 50px;
    vertical-align: middle;
}

.tabs-container{
    width: 100%;
    display: table;
    margin-top: 2px;
}

.tab-container{
    display: table-cell;
    text-align: center;
    width: 25%;
}

.tab{
    width: 98%;
    margin: 0 auto;
    height: 30px;
    line-height: 200%;
    background: white;
    border: 1px solid #388557;
    color: #388557;
    cursor: pointer;
    border-radius: 5px;
}

.tab-active{
    background: #388557;
    color: white;
    border: 1px solid #388557;
    cursor: default;
}

.content-container{
    /*border: 2px solid red;*/
    margin: 3px;
}

.content-container{
    display: none;
}

#location-container{
    background: #004B8E;
}

.location-form{
    position: relative;
    top: 250px;
    text-align: center;
}

.location-form input{
    width: 200px;
    height: 35px;
    text-align: center;
    font-size: 24px;
    border: none;
    padding: 0;
    border-radius: 5px;
}

.sun-angle-button{
    width: 205px;
    height: 35px;
    background: #388557;
    color: white;
    line-height: 220%;
    margin: 0 auto;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
}

.panels-container{
    width: 100%;
    height: 100%;
    display: table;

}

.tracking-panel-left{
    width: 50;
    display: table-cell;
    vertical-align: top;
}

.tracking-panel-right{
    width: 50%;
    display: table-cell;
    vertical-align: top;
}

.panel-left{
    width: 25%;
    display: table-cell;
    vertical-align: top;
}

.panel-center{
    text-align: center;
    width: 50%;
    display: table-cell;
    padding: 0px 20px;
}

.panel-center-inner{
    position:absolute;
    width: 575px;
    height: 575px;
}

.panel-right{
    width: 25%;
    display: table-cell;
    vertical-align: top;
}


.panel-right-footer{
    position: absolute;
    left: 0px;
    bottom: 10px;
    display: table;
    height: 25px;
    color: white;
    margin: 0 auto;
}

.panel-right-input-item{
    width: 300px;
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
}

.panel-right-footer input{
    border: none;
    padding: 0;
    border-radius: 1px;
    height: 20px;
    text-align: center;
}

.input-section-header{
    height: 25px;
    background: #004B8E;
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 200%;
    margin-bottom: 2px;
}

.input-section-tabs-container{
    display: table;
    width: 100%;
    height: 25px;
    line-height: 200%;
    margin-bottom: 2px;
}

.input-section-tab{
    display: table-cell;
    width: 50%;
    background: white;
    border: 1px solid #388557;
    color: #388557;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}

.input-section-active{
    background: #388557;
    color: white;
    border: 1px solid #388557;
    cursor: default;
}


.input-section-row{
    position: relative;
    display: table;
    width: 100%;
    height: 25px;
    margin-bottom: 4px;
}

.control-buttons-row{
    position: relative;
    top: 43px;
    left: 0px;
    display: table;
    width: 100%;
    height: 50px;
}

.control-button-cell{
    display: table-cell;
    vertical-align: middle;
    width: 25%;
}

.control-button{
    background: #388557;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    text-align: center;
    width: 75px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}

.row-even{
    background: #EDEFF7;
}

.row-odd{
    background: #D8DEEE;
}

.row-button{
    padding-left: 150px;
}

.button{
    background: #388557;
    color: white;
    font-size: 12px;
    text-align: center;
    width: 135px;
    height: 20px;
    border-radius: 5px;
    line-height: 175%;
    cursor: pointer;
}

.input-section-label{
    display: table-cell;
    width: 55%;
    vertical-align: middle;
    font-size: 12px;
    padding-left: 5px;
}

.bottom-section-label {
    display: table-cell;
    width: 150px;
    text-align:left;
    font-size: 12px;
    padding-left: 0px;
    line-height: 160%;
}


.input-section-input{
    display: table-cell;
    width: 35%;
    text-align: right;
    vertical-align: middle;
    padding-right: 5px;
}

.input-section-input input{
    border: none;
    padding: 0;
    border-radius: 1px;
    width: 125px;
    height: 20px;
    text-align: center;
}

.system-input{
    width: 125px;
    text-align: center;
    font-size: 12px;
}

input[type=checkbox] {
    float: right;
}

.input-section-input select{
    width: 125px;
    height: 20px;
}

.input-section-info{
    display: table-cell;
    min-width: 22px;
    text-align: center;
}

.info-icon{
    position: relative;
    width: 15px;
    top: 5px;
    right: 2px;
    cursor: pointer;
}

#study {
    position:absolute;
    top: 0px;
    left: 0px;
    border: 2px solid #004B8E;
}

#canvas-container {
    position: absolute;
    border: 5px solid black;
    width:600px;
    height: 600px;
}

#pctcompletecontainer {
    position:absolute;
    top: 585px;
    left: 0px;
    width:575px;
}

#panels {
    position:absolute;
    top: 0px;
    left: 0px;
    border: 2px solid #004B8E;
    z-index: 20;
}

#studyarea {
    position:absolute;
    top: 0px;
    left: 0px;
    border: 2px solid #004B8E;
    z-index: 21;
}



.shadec {
    position:absolute;
    top: 0px;
    left: 0px;
    border: 2px solid #004B8E;
}

#shade0 {
    z-index: 1;
}

#shade1 {
    z-index: 2;
}

#shade2 {
    z-index: 3;
}

#shade3 {
    z-index: 4;
}

#shade4 {
    z-index: 5;
}

#shade5 {
    z-index: 6;
}

#shade6 {
    z-index: 7;
}

#shade7 {
    z-index: 8;
}

#shade8 {
    z-index: 9;
}

#shade9 {
    z-index: 10;
}

#shade {
    position:absolute;
    top: 0px;
    left: 0px;
    border: 2px solid #004B8E;
    z-index: 1;
}

#debug {
    position: absolute;
    top: 0px;
    left: 1200px;
    border: none;
    display: none;

}

.study-period-input label {
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
}

.study-period-input input {
    display: table-cell;
    vertical-align: middle;
}

.study-period-row{
    display: table;
    width: 100%;
}

.study-period-input{
    display: table-cell;
    width: 25%;
}

.study-period-filter{
    display: table-cell;
    width: 0px;
    font-size: 12px;
    padding-right: 18px;
}

.shade-section-border{
    border: 1px solid #004B8E;
    margin-bottom: 5px
}

.color-swatch{
    position: relative;
    top: 3px;
    right: 22px;
    width: 18px;
    height: 18px;
    border: 1px solid #004B8E;
}

.footer{
    position: relative;
    text-align: center;
    font-size: 12px;
}

.legal-disclaimer{
    position: absolute;
    left: 0px;
    width: 310px;
    color: #0000EE;
}

#export{
    position: relative;
    top: 15px;
    left: 175px;
}

#calculate-shade{
    height: 50px;
    line-height: 425%;
    position: relative;
    top: 42px;
    left: 445px;
}

.info-tooltip-right{
    position: absolute;
    max-width: 400px;
    display: table;
    background: #004B8E;
    color: white;
    font-size: 12px;
    border:2px solid white;
    border-radius: 5px;
    padding: 10px;
    z-index: 12;
    text-align: left;
}

.info-tooltip-left{
    position: absolute;
    max-width: 400px;
    display: table;
    right: 28px;
    background: #004B8E;
    color: white;
    font-size: 12px;
    border:2px solid white;
    border-radius: 5px;
    padding: 10px;
    z-index: 12;
    text-align: left;
}

.tooltip-text{
    display: table-cell;
    vertical-align: middle;
}

#popup{
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 800px;
    min-height: 300px;
    background: #004B8E;
    z-index: 99999;
    display: none;
    border: 5px solid #4682B4;
}

#popup-text{
    color: white;
    text-align: center;
    padding: 10px 10px 50px 10px;
}

#popup-close{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin:0 auto;
    text-align: center;
    line-height: 200%;
    width: 100px;
    height: 30px;
    background: #388557;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}