/* File that holds base styling for the entire application */
.circle {
    background-color: #D1E8E2 !important;
}

.wk-tan {
    color: #D9B08C !important;
}

.wk-peach {
    /*color: #FFCB9A;*/
    background-color: #FFCB9A;
}

.wk-green {
    color: #116466;
}
.user-view {
    padding: 15px !important;
}
/* helps keep plot.ly off of materializecss tabs */
.svg-container {
    margin-top: 10px !important;  
    margin-right: 0px !important;
}
/* KDA 1.0.0 dropdown-trigger has blue outline, bug? */
.dropdown-trigger {
    outline-color: transparent;
}

/*.material-tooltip {
    top: unset !important;
    left: unset !important;
}*/

/* Tab colors */
.tabs .tab a.active {
    background-color: #D1E8E2;
}

/*.tabs .tab a:hover {
    color: darkslategray;
}*/

/*.tabs .tab a {
    color: lightgray;
}*/
/* end tab colors */


/** START CHANGES **/
div#test5 {
    /*position: fixed;*/
    top: 80px;
    margin-left: 0;
    margin-right: 0;
    bottom: 25px;
    min-width: 200px;
    /*width: 100%;*/
    background: black;
    height: 300px;
}

    div#test5 iframe {
        /*position: absolute;*/
        /*padding-top: 100px;*/
        /*bottom: 0;*/
        /*padding-left: 30px;
                        padding-right: 30px;
                        padding-bottom: 30px;*/
        height: 100%;
        width: 100%;
        /*display: none;*/
    }
/** END CHANGES **/

.collection .collection-item.orderLine {
    padding: 10px;
    border-bottom: none;
}

.orderLineTitle {
    padding-left: 5px;
}

.verticalLine {
    border-left: thin solid lightgray;
}


/* used to have header here when margin-top was 64px */
main[id="main"] {
    padding-left: 0px;
}

header[id="header"] {
    padding-left: 270px;
}

/* KDA change for materialize 1.0.0-alpha.1 */
/*.content, footer {
    padding-left: 270px;
}*/

/* hide the blue outline on the side nav link */
.sidenav li > a:focus {
    /*border-color: red !important;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;*/
    outline-style: none;
}

/* KDA rename class side-nav to sidenav */
.sidenav {
    /*position: absolute;*/
    /*margin-top: 64px;*/
    margin-top: 0px;
    height: 100%;
    /*z-index: -90;*/
    overflow-y: hidden; /* fixes a scroll bar problem in FF */
}

nav {
    padding-right: 270px;
}

    nav .brand-logo {
        padding-left: 15px;
    }

nav[id="navbar-unauthenticated"] {
    padding-right: 0px;
}

.container {
    max-width: unset;
    width: 90%;
}

#selectField {
    margin-top: 0px;
}

/* add a little room to help offset the footer covering the page */
.content .container {
    padding-bottom: 60px;
}


/*  Changing colors of waves to custom - brown
                          When creating your CSS selector,
                          change "brown" to something of your choosing
                          */
/* The alpha value allows the text and background color
                           of the button to still show through. */
/*.waves-effect.waves-brown .waves-ripple {
                    background-color: rgba(121, 85, 72, 0.65);
                }*/


/*.ilike-blue-container {
                          @@extend .blue, .lighten-4;
                        }*/

/*.navbar-color {
    background-color: lightgray;
}*/

/* KDA added for 1.0.0 */
.sidenav-fixed {
    width: 270px;
}

.sideNavBarContainer {
    position: fixed;
    width: 270px;
    background-color: lightgray;
    height: 100%;
}

.sideNavHeader {
    /*background-color: teal;*/
    height: 177px;
    /*height: 194px;*/
    width: 270px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.sideNavList {
    /*list-style: none;*/
    padding: 0;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    width: 270px;
    height: 80%;
    padding-bottom: 194px;
}

/*left-sidebar-nav {
                                  -webkit-transition: left 0.3s ease;
                                  transition: left 0.3s ease;
                              }*/
/* for sticky footer */
/*.body {
                            display: flex;
                            min-height: 100vh;
                            flex-direction: column;


                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            min-height: 100vh;
                            -webkit-box-orient: vertical;
                            -webkit-box-direction: normal;
                            -webkit-flex-direction: column;
                            -ms-flex-direction: column;
                            flex-direction: column;
                        }

                              .main {
                                  -webkit-box-flex: 1;
                                  -webkit-flex: 1 0 auto;
                                  -ms-flex: 1 0 auto;
                                  flex: 1 0 auto;
                              }*/

.page-footer {
    /*background-color: gray;*/
    padding-top: 0px;
}

#footer, #footer-unauthenticated {
    bottom: 0px;
    height: 50px;
    right: 0%;
    left: 0%;
    position: fixed !important;
    position: absolute;
    width: 100%;
    top: expression((0-(footer.offsetHeight)+
                (document.documentElement.clientHeight?
                document.documentElement.clientHeight:
                document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.
                body.scrollTop))+'px');
    /*text-align: center;*/
    visibility: visible;
    z-index: 2;
}
/* end sticky footer */

.save-button-bar.row {
    margin-top: -1.5rem;
}

/* KDA change offset for fixed parameter on slide out side nav */
header[id="header"], main[id="main"], footer[id="footer"] {
    padding-left: 270px;
}



/*@media only screen and (min-width : 360px) {
    nav .brand-logo {
        font-size: 1rem;
    }
}

@media only screen and (min-width : 480px) {
    nav .brand-logo {
        font-size: 1.4rem;
    }
}

@media only screen and (min-width : 640px) {
    nav .brand-logo {
        font-size: 1.8rem;
    }
}


@media only screen and (min-width : 992px) {
    nav .brand-logo {
        font-size: 2.1rem;
    }
}*/
@media only screen and (min-width: 360px) {
    nav .brand-logo {
        font-size: 1.7rem;
        display: inline-flex;
    }
}

@media only screen and (min-width: 480px) {
    nav .brand-logo {
        font-size: 1.9rem;
        display: inline-flex;
    }
}

@media only screen and (min-width: 640px) {
    nav .brand-logo {
        font-size: 2.1rem;
        display: inline-flex;
    }
}

@media only screen and (min-width: 992px) {
    nav .brand-logo {
        font-size: 2.1rem;
        display: inline-flex;
    }
}
@media only screen and (max-width : 992px) {
    header[id="header"], main[id="main"], footer[id="footer"] {
        padding-left: 0;
    }

    .sideNavHeader {
        height: 160px;
    }

    nav {
        padding-right: 0px;
    }

        nav ul li {
            float: right;
        }

    .content {
        padding-left: 0px;
    }

    /*nav .brand-logo {
        font-size: 1.8rem;
    }*/
}




.sidenav li > a > i.material-icons {
    margin-right: 8px;
}


/* alert text styling for data entry field validation errors */
.alert {
    font-size: 16px;
    font-weight: 600;
    background-color: pink;
    padding: 5px;
}

.alert-danger {
    color: red;
}

/* for netcore validation summary box */
.validation-summary-valid {
    display: none;
}