/* Mobile Size 1 maple-container-box View */
@media screen and (min-width: 0px) {
    .maple-container-box {width:99%;}
    .maple-container-status-bar-h {display:block;}
    .maple-container-status-bar-v {display:none;}
    .maple-container-box-body {height:auto;}
    button.accordion {visibility:hidden;}
    .status_select-show {max-height: 1000px;}
    }
/* Tablet Size 2 maple-container-box View */
@media screen and (min-width: 450px) {
    .maple-container-box {width:calc(98% / 2);}
    .maple-container-box-body {height:auto;}
    .maple-container-status-bar-h {display:none;}
    .maple-container-status-bar-v {display:block;width:calc(98% / 2);}
    button.accordion {visibility:visible;}
    .status_select-hide {max-height: 0px;}
    }

/* Desktop Size 3 maple-container-box View */
@media screen and (min-width: 700px) {
    .maple-container-box {width:calc(97% / 3);}
    .maple-container-box-large {width:calc(calc(97% / 3)*2);}
    .maple-container-box-body {height:400px;}
    .maple-container-status-bar-h {display:none;}
    .maple-container-status-bar-v {display:block;width:calc(97% / 3);}
    }

/* Desktop Size 4 maple-container-box View */
@media screen and (min-width: 1000px) {
    .maple-container-box {width:calc(96% / 4);}
    .maple-container-box-large {width:calc(calc(96% / 4)*3);}
    .maple-container-status-bar-h {display:none;}
    .maple-container-status-bar-v {display:block;width:calc(96% / 4);}
    }

body {
    font-family: "Roboto", Times, serif;
    margin-bottom:2%;
    background-color:var(--brand-color-background);
    
    
    }
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}
h5 {
    margin:0;
    font-size:14px;
    text-align:center;
    }
h6 {
    margin:0px;
    font-size:12px;
    }
hr {
    margin:8px;
}
input[type=file]::file-selector-button {
    box-sizing:border-box;
    border:0px;
    padding: 8px;
    background:var(--brand-color-3);
    color:white;
    text-transform: uppercase;
    }
input[type=file] {
    box-sizing:border-box;
    height:36px;
    width:50%;
    border: 1px solid var(--brand-color-2);
    border-radius: 0.25rem;
    }

img {
    border-radius: 0.25rem;
    }
form {
    margin:0px;
    padding:0px;
    }

.maple-container {
    width:100%;
    height:100%;
    padding:0.5%;
    
    }
    
.maple-container-status-bar-h {
    width:100%;
    font-size:20px;
    background-color:var(--brand-color-2);
    border:none;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    padding:5px;
    top: 0;
    text-align: center;
    vertical-align: middle;
    float:left;
    }
    
.maple-container-status-bar-v {
    height:calc(100vh * 5);
    font-size:12px;
    background-color:white;
    border:none;
    padding:5px;
    top: 0;
    float:left;
    vertical-align: text-top;
    border-right:2px solid black;
    margin-right:0.5%;
    }

.maple-container-status-bar:hover {
    background-color:#EBECF0;
    
    }

.maple-container-box {
    margin:0.5%;
    /*padding:1%;*/
    /*box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;*/
    height:auto;
    border-radius: 7.5px;
    float:left;
    /*border:2px solid gray;*/
    background: var(--brand-color-5);
    }

.maple-container-box-header {
    padding:10px;
    /*box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;*/
    /*border:2px solid gray;*/
    width:100%;
    font-size:20px;
    border-radius: 5px 5px 0px 0px;
    background-color:var(--brand-color-2);
    color:white;
    }

.maple-container-box-body {
    float:left;
    width:100%;
    border-radius: 0px 0px 5px 5px;
    flex-grow: 1;
    padding:10px 10px 0% 10px;
    margin-bottom:10px;
    overflow: auto !important;
    }
    
.maple-container-box-footer {
    width:100%;
    height:auto;
    border-radius: 5px;
    padding:4% 4% 4% 4%;
    }

.maple-container-box-body label{
    width:100%;
    padding-left:5px;
    height:auto;
    }
    
.maple-container-box-body input {
    width:100%;
    height:35px;
    margin-bottom:5px;
    padding:5px;
    border-radius: 5px;
    border:2px solid gray;
    float:left;
    background-color: white;
    color:black;
    }

.maple-container-box-body textarea {
    width:100%;
    height:35px;
    margin-bottom:5px;
    padding:5px;
    border-radius: 5px;
    border:2px solid gray;
    float:left;
    background-color: white;
    color:black;
    }

.maple-container-box-body select {
    width:100%;
    height:35px;
    margin-bottom:5px;
    padding:7px;
    border-radius: 5px;
    border:2px solid gray;
    float:left;
    background-color: white;
    color:black;
    }
.dashboard-btn {
    width:100%;
    text-align:left;
    padding-top:5px;
    background-color:var(--brand-color-1);
}
.dashboard-btn-small {
    margin-top:8px; text-transform: uppercase; padding-top:8px;;
}