/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Mar 8, 2022, 10:59:48 AM
    Author     : Nicole.Sisti
*/

.light {
    --body-bg-color: #cccccc;
    --body-text-color: #2d2d2d;
    --body-a-color: #0000ff;
    --aside-border-color: #660066;
    --linkBox-bg-color: #ccccff;
    --linkBox-border-color: #0000ff;
    --nav-bg-color: #ccccff;
    --hover-bg-color: #ffffff;
    --hover-text-color: #0000ff;
  
    --basicBox-bg-color: #f2f2f2;
    --basicBox-border-color: #006600;
    --importantBox-bg-color: #ffcccc;
    --importantBox-border-color: #ff6666;
    --table-border-color: #000000;
    --th-bg-color: #f2f2f2;
    --none-bg-color: #aaaaaa;
    --pow-bg-color: #fce4d6;
    --obst-bg-color: #ead5ff;
    --limit-bg-color: #d9e1f2;
    --fault-bg-color: #e2efda;
    --count-bg-color: #fffccc;
    
    --input-bg-color: #ffffff;
    --input-text-color: #000000;
    
    --nav-icon: url('sun.svg');
}

.dark {
    --body-bg-color: #160b00;
    --body-text-color: #c9ae93;
    --body-a-color: #d38b32;
    --aside-border-color: #c9ae93;
    --linkBox-bg-color: #291400;
    --linkBox-border-color: #b58b56;
    --nav-bg-color: #6b401d;
    --hover-bg-color: #876c50;
    --hover-text-color: #d38b32;
    
    --basicBox-bg-color: #160b00;
    --basicBox-border-color: #c9ae93;
    --importantBox-bg-color: #7c2020;
    --importantBox-border-color: #ff6666;
    --table-border-color: #c9ae93;
    --th-bg-color: #190004;
    --none-bg-color: #333333;
    --pow-bg-color: #591813;
    --obst-bg-color: #680058;
    --limit-bg-color: #5d008c;
    --fault-bg-color: #1b4700;
    --count-bg-color: #663800;
    
    --input-bg-color: #291400;
    --input-text-color: #c9ae93;
    
    --nav-icon: url('moon.svg');
}

body {
    background-color: var(--body-bg-color);
    font-family: verdana;
    color: var(--body-text-color);
}

disabled {
    color: #6b6b6b;
}

.frameContainer {
    position: relative;
    overflow: hidden;
    width: calc(100% - 610px);
    height: 860px;
    float: left;
}

.frameSize{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
}

p {
    font-family: verdana;
    font-weight: bold;
    font-size: 14px; 
}

h1 {
    margin-bottom: 0px;
    text-align: center;
    font-weight: bold;
    font-size: 36px;
}

h2 {
    margin-top: 0px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

h3 {
    margin-top: 0px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

h4 {
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

input, select, textarea {
    background-color: var(--input-bg-color);    
    color: var(--input-text-color);
}

a {
    text-decoration: none;
    color: var(--body-a-color);
    font-weight: bold;    
}

.alwaysInvisible {
    display: none ;
}

.addTab {
    margin-left: 93px;
}

.checkbox {
    padding-top: 1px;
    margin-right: 2px;
    float: left;
}

textarea {
    resize: none;
}

li {
    text-align: left;
}

.leftAside {
    border: 2px solid var(--aside-border-color);
    float: left;
    width: 300px;
    min-height: 870px;
    max-height: 870px;
    text-align: center;
    text-align: left;
    font-size: 12px;
    padding-left: 2px;
}

.rightAside {
    border: 2px solid var(--aside-border-color);
    float: left;
    width: 280px;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 870px;
    max-height: 870px;
    text-align: center;
    text-align: left;
    font-size: 12px;
}

.link {
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-align: center;
}

.linkBox {
    background-color: var(--linkBox-bg-color);
    margin: 10px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--linkBox-border-color);
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-align: center;
}

.linkSmallBox {
    background-color: var(--linkBox-bg-color);
    margin: 2px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--linkBox-border-color);
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 12px; 
}

nav {
    width: 100%;
}

.navBar {
    list-style-type: none;
    overflow: hidden;
    background-color: var(--nav-bg-color);
}

.navItem {
    float: left;
}

.navItem a {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    padding: 15px;    
    min-width: 150px;
}

.navIcon {
    float: left;
}

.navIcon a {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 30px;
}

.navImage {
    content: var(--nav-icon);    
}

.dropdown-button, .notes-button, .dropdown-narrow-button {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    padding: 15px;    
}
.dropdown-button, .notes-button { 
    min-width: 250px !important;
}
.dropdown-narrow-button { 
    min-width: 200px !important;
}

navItem.dropdown {
    display: inline-block;
}

.navItem a:hover, .navIcon a:hover, .dropdown-content a:hover, .dropdown:hover, .linkBox:hover, .linkBox a:hover, .linkSmallBox:hover, .linkSmallBox a:hover, .link:hover, .link a:hover{
    background-color: var(--hover-bg-color);
    color: var(--hover-text-color);   
}

.dropdown-content, .dropdown-narrow-content{
    display: none;
    z-index: 1;
    position: absolute;
    background-color: var(--nav-bg-color);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content {
    min-width: 280px;
}
.dropdown-narrow-content {
    min-width: 230px;
}

.dropdown-content a, .dropdown-narrow-content a {
    cursor: pointer;
    display: block;
    text-decoration: none;
    padding: 15px;
}

.dropdown:hover .dropdown-content,  .dropdown:hover .dropdown-narrow-content{
    display: block;
    background-color: var(--nav-bg-color);
}

.selectBox {
    background-color: var(--basicBox-bg-color);
    padding: 10px;
    margin: 10px;
    border: 1px solid var(--basicBox-border-color);
    align-self: center;
    text-align: center;
    min-height: inherit;
    float: left;
}

.basicBox {
    background-color: var(--basicBox-bg-color);
    padding: 10px;
    margin: 10px;
    border: 1px solid var(--basicBox-border-color);
    align-self: center;
    text-align: center;
    min-height: inherit;
    font-weight: bold;
}

.titleBox {
    background-color: var(--body-bg-color);
    padding: 5px;
    margin: 3px;
    border: 1px solid var(--basicBox-border-color);
    align-self: center;
    text-align: center;
    min-height: inherit;
    font-weight: bold;
}

.basicSmallBox {
    background-color: var(--basicBox-bg-color);
    padding: 5px;
    margin: 3px;
    border: 1px solid var(--basicBox-border-color);
    align-self: center;
    text-align: center;
    min-height: inherit;
    font-weight: bold;
    font-size: 12px; 
}

.importantBox {
    background-color: var(--importantBox-bg-color);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 3px;
    border: 1px solid var(--importantBox-border-color);
    align-self: center;
    text-align: left;
    min-height: inherit;
    font-weight: bold;
    font-size: 12px; 
}

table {
    border-collapse: collapse;
    width: 100%;
    font-family: verdana;
    font-weight: bold;
    font-size: 12px;
}

th, td {
    border: 1px solid var(--table-border-color);
    text-align: center;
    padding: 2px;
}

tr:first-child, tr:nth-child(2)  {
    font-size: 14px;
    background-color: var(--th-bg-color);
}

.none {
    background-color: var(--none-bg-color);
}

.pow {
    background-color: var(--pow-bg-color);
}

.obst {
    background-color: var(--obst-bg-color);
}

.limit {
    background-color: var(--limit-bg-color);
}

.fault {
    background-color: var(--fault-bg-color);
}

.count {
    background-color: var(--count-bg-color);
}


@media screen and (min-width: 400px) and (max-width: 1349px) {
    .rightAside {
        display:none;
    }
    .leftAside {
        display:none;
    }
    .frameContainer {
        position: relative;
        overflow: hidden;
        width: 100% !important;
        height: 1000px;
        float: left;
    }
}