/*@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,500,700";*/

:root {
    --expandable-sidebar-color: #25408f;
    /* --fixed-sidebar-color: #7b16da; */
    --fixed-sidebar-color: #00868b;
    --height-of-top-fixed-bar: 75px;
}

body {
    display: flex;
    align-items: stretch;
    /* overflow: hidden; */
    font-family: Arial, sans-serif;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.5s;
}

i,
span {
    display: inline-block;
}

/* ---------------------------------------------------
    POWERBI CONTENT STYLE
  ----------------------------------------------------- */

#content-wrapper-powerbi {
    padding: 20px;
    transition: all 0.5s;
    transform: translateX(50px);
    width: calc(100% - 50px);
    /* height: 100vh; */
    height: calc(100vh - var(--height-of-top-fixed-bar));
    position: fixed;
}
#content-wrapper-powerbi.is-expanded {
    transform: translateX(300px);
    width: calc(100% - 300px);
}

/* ---------------------------------------------------
    expandable-menu-sidebar STYLE
  ----------------------------------------------------- */

#BOS-logo,
#return-to-BOS {
    /* top:90px; */
    font-size: 1.5em; /**/
    display: block;
    width: 100%;
    margin-bottom: 40px;
    padding: 10px;
}

#BOS-logo > img {
    width: 100%;
}

.bos-website-arrow {
    color: yellow;
}

/* how each Complaints tab is positioned and displayed */
.sidebar ul li a {
    padding: 10px 15px 10px 15px;
    display: block;
    text-align: left;
}

#links-to-bos-other-website {
    padding-top: 100px;
    font-size: 1.0em;
}

#complaints-tabs li a {
    font-size: 1.2em !important;
}

/* the arrow for PowerBI tabs, created by setting the border  */
.arrow.right {
    border: solid rgb(255, 255, 255);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* when menu option is clicked (active) ,
change the color of the arrow and text to green apple */
#expandable-menu-sidebar ul li.active > a > i {
    border: solid #80ba27;
    border-width: 0 3px 3px 0;
}
#expandable-menu-sidebar ul li.active {
    color: #80ba27;
}


/* for transform animation  */
#expandable-menu-sidebar {
    position: fixed;
    background: var(--expandable-sidebar-color);
    color: #fff;
    /* top: 20px;  */
    padding-top: 20px;
    height: 100%;
    overflow-y: auto;
    width: 250px;
    transform: translateX(-200px);
    transition: all 0.5s;
    z-index: 1;
}

#expandable-menu-sidebar.is-expanded {
    /* 50px is the width of the fixed-bar  */
    transform: translateX(50px);
}
/* ---------------------------------------------------
    FIXED THIN TEAL SIDEBAR STYLE
  ----------------------------------------------------- */

#fixed-thin-teal-sidebar {
    position: fixed;
    background: var(--fixed-sidebar-color);
    color: #fff;
    transition: all 0.5s;
    height: 100%;
    overflow-y: auto;
    padding-top: 20px;
    width: 50px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* for styling hamburger icon */
#hamburger {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#hamburger > i {
    /* margin-right: 0; */
    /* margin-bottom: 50px; */
    display: block;
    font-size: 1.8em;
}

/* minor UI change: cursor needs to be a hand pointer
when hover over the hamburger menu, and links for each tab*/
#hamburger,
#complaints-tabs li a {
    cursor: pointer;
}

/* hover rules are NOT applied on touch screen devices, such as the tablet and mobile*/
@media screen and (hover: hover) and (pointer: fine) {
    #expandable-menu-sidebar ul li a:hover {
        background: var(--fixed-sidebar-color);
    }

    #hamburger:hover {
        color: var(--expandable-sidebar-color);
        background: rgb(255, 255, 255)
    }
}

/* ---------------------------------------------------
    Medium devices (landscape tablets, 768px and down)
  ----------------------------------------------------- */
@media only screen and (max-width: 768px) {
    /* ---------------------------------------------------
        POWERBI CONTENT STYLE
    ----------------------------------------------------- */
    #content-wrapper-powerbi {
        padding: 0px;
        margin-top: var(--height-of-top-fixed-bar);
        transform: none !important;
        width: 100% !important;
        /* height: calc(100vh - var(--height-of-top-fixed-bar));  */
    }

    /* ---------------------------------------------------
        expandable-menu-sidebar STYLE
    ----------------------------------------------------- */
    #expandable-menu-sidebar {
        /* same as the height of top #fixed-thin-teal-sidebar */
        top: var(--height-of-top-fixed-bar);
        width: 50%;
        transform: translateX(-100%);
    }
    #expandable-menu-sidebar.is-expanded {
        transform: translateX(0px);
    }

    #BOS-logo > img {
        width: 140px ;
        float: right;
        margin-left: auto;
    }

    #BOS-logo {
        padding: 5px;
    }

    /* used padding-bottom to avoid overflow issues*/
    #return-to-BOS {
        font-size:1.25em !important;
        padding-bottom: 50px;
    }
    /* ---------------------------------------------------
        FIXED THIN TEAL SIDEBAR STYLE
    ----------------------------------------------------- */
    #fixed-thin-teal-sidebar {
        padding-top: 0px !important;
        position: fixed;
        width: 100%;
        height: var(--height-of-top-fixed-bar);
        z-index: 2;
        top: auto;
        overflow-y: hidden;
    }

    #hamburger {
        float: left;
        /* 30px padding to make the clickable area larger */
        padding: 20px 50px 20px 50px;
        text-align: left;
        float: left;
        display: flex;
    }
    #hamburger > i {
        font-size: x-large;
    }
}