@charset "utf-8";
* {
    box-sizing:border-box;
}
html,body {
    height:100%;
    margin:0;
    background-color:#def;
    font-family:Verdana, Geneva, sans-serif;
}
h1 {
    font-size:1.25em;
}
input {
    text-align:right;
    padding:0 5px;
    margin:0;
    border:#AFCBE6 solid;
    border-width: 0 2px;
    background-color:white;
    font-size:20px;
    line-height:25px;
    font-family:inherit;
}
a {
    color:#06C;
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:underline;
}
#divIntro {
    /*display:none;*/
}
#divWages {
    /*overflow:hidden;*/
    background-color:#def;
    /*display:none;*/
}
#divEarnings {
    padding:10px;
    /*overflow:hidden;*/
    border:1px #06C solid;
    background-color:#def;
    font-family:inherit;
    /*display:none;*/
}
#divSavings {
    background-color:#def;
    font-family:inherit;
    /*display:none;*/
}
#wageInput {
    box-sizing:border-box;
    width:100%;
    border:3px #06C solid;
    padding:0;
    margin:0;
    text-align:right;
    font-size:38px;
    font-family:inherit;
    border-radius:8px;
    padding-right:10px;
}
#wageTypes {
    border:2px #06C solid;
    overflow:hidden;
    margin-bottom:5px;
    background-color:#fff;
}
#wageTypes div {
    border:1px #06C solid;
    font-size:1.25em;
    line-height:25px;
    font-family:inherit;
    text-align:center;
    width:35px;
    height:25px;
    float:right;
    cursor:pointer;
}
#wageDivs {
    border:2px #06C solid;
    overflow:hidden;
    margin-bottom:5px;
    background-color:#fff;
}
.wageDiv {
    border:1px #06C solid;
    font-size:20px;
    line-height:25px;
    font-family:inherit;
    position:relative;
}
.wageDivTitle {
    position:absolute;
    left:10px;
    top:0;
    color:#999;
    font-size:16px;
}
.wageDivValue {
    text-align:right;
    margin-right:10px;
    cursor:pointer;
}
#perSettings {
    border:2px #06C solid;
    overflow:hidden;
    background-color:#fff;
}
.settingDiv {
    border:1px #06C solid;
    font-size:20px;
    line-height:25px;
    font-family:inherit;
    position:relative;
    text-align:right;
}
.settingTitle {
    position:absolute;
    left:10px;
    top:0;
    color:#999;
    font-size:16px;
}
#savingsTableDiv { 
    margin-top:10px;
    /*margin-left:-10px; */
}
.table,
.savingsTable {
    /*width:296px;*/
    border-collapse: collapse;
    width:100%;
}
.table td,
.table th {
    text-align: left;
}
.table thead {
    background-color: #b1d2f4;
}
.savingsTable td {
    padding:0 5px;
}
input[type=number] {
    width:8em;
}
.tabDiv {
    position:relative;
    padding:2px 10px;
    border:1px #06C solid;
    background-color:#06C;
    color:white;
    font-family:inherit;
    font-size:22px;
    line-height:30px;
    font-weight:bold;
    /*cursor:pointer;*/
}
#contentDivs {
    max-width:500px;
    margin-right:auto;
    margin-left:auto;
    /*border:2px #06C solid;*/
    /*margin-bottom:10px;*/
}
.tabButton {
    position:absolute;
    right:10px;
    top:0;
}
.contentDiv {
    padding:10px;
    background-color:#def;
    font-size:0.9em;
    font-family:inherit;
    line-height:1em;
    /*display:none;*/
    height:calc(100% - 36px);
}
#graphCanvas {
    display:none;
    width:100%;
}


.condition-slider {
    width:100%;
}





i {
    width: 2em;
    height: 2em;
    display: inline-block;
}
path {
    fill:#06C;
}



@media (min-width:1000px) {
    .sectionDiv {
        display:block !important;
        box-sizing:border-box;
        -webkit-flex:1;
        flex:1;
        height:100%;
        overflow:auto;
    }
    #contentDivs {
        max-width:1400px;
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:row;
        flex-direction:row;
        height:100vh;
    }
    #contentDivs:after {
        clear:both;
        content:'';
        display:table;
    }
}