/*
    DEMO STYLE
*/

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

body {
    font-family: 'Poppins', sans-serif;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

p {
    font-family: Verdana, Arial, Helvetica, sans-serif, sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.3em;
    color: black;
}

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

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 320px;
    max-width: 250px;
    background: rgb(0, 90, 133);
    color: #fff;
    transition: all 0.3s;
    margin-top: 10px;
    border: solid 10px rgb(100, 120, 220);
    height: 91%;
    position: fixed;
    z-index: 100;
    overflow-x: hidden; 
}

    #sidebar.active {
        margin-left: -320px;
    }

.extend-nav {
    left: 0;
}

#sidebar ul.components {
    padding: 0;
    border-bottom: 1px solid #47748b;
    font-weight: 600;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li {
    width: 100%;
}

.nav-tabs .nav-link {
    border: none;
}

#sidebar ul li a {
    padding: 15px 20px;
    font-size: 1.1em;
    display: block;
    border-bottom: 1px dashed rgb(192, 220, 237);
    transition: 0.2s;
}

    #sidebar ul li a:hover {
        /* color: rgb(0, 90, 133); */
        background: rgb(48, 149, 180);
        /* padding:20px; */
        /*height: 85px;*/
        border-bottom: 1px dashed rgb(192, 220, 237);
    }

.sidebar-nav-clicked {
    background: rgb(48, 149, 180);
}

#sidebar ul li a div {
    border: 2px solid white;
    border-radius: 50%;
    padding: 8px;
    margin-right: 12px;
    display: inline-block;
    width: 46px;
    height: 46px;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color: rgb(0, 90, 133);
    background: white;
}

a[data-toggle="collapse"] {
    position: relative;
}

/* .dropdown-toggle::after {
    display: block;
    position: relative;
    top: 50%;
    right: 20px;
    /* transform: translateY(-50%); */


ul ul a {
    font-size: 0.9em;
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
}

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

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

#content {
    padding: .2rem;
    min-height: 90%;
    transition: all 0.3s;
    margin-top: 10px;
    margin-left: 320px;
    position: absolute;
    width: calc(100% - 320px);
}

    #content.active {
        width: 100%;
        margin-left: 0;
    }

#sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f1e4e4;
    cursor: pointer;
    border-radius: 5px;
}

    #sidebarCollapse span {
        width: 80%;
        height: 2px;
        margin: 0 auto;
        display: block;
        background: rgb(40, 75, 212);
        transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
        transition-delay: 0.2s;
    }

        #sidebarCollapse span:first-of-type {
            transform: rotate(45deg) translate(2px, 2px);
        }

        #sidebarCollapse span:nth-of-type(2) {
            opacity: 0;
        }

        #sidebarCollapse span:last-of-type {
            transform: rotate(-45deg) translate(1px, -1px);
        }

    #sidebarCollapse.active span {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

#berea-logo p {
    color: white;
    font-size: 2rem;
    font-style: italic;
    font-family: serif;
    margin: 0;
    padding: 0;
    padding-left: 1rem;
}

#berea-logo span {
    color: rgb(11, 248, 11);
    font-size: 2rem;
    font-style: italic;
    font-family: serif;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

#top_navbar {
    background-color: rgb(0, 90, 133);
    margin: 0;
    padding: 7px 10px;
    /* position: fixed; */
    /* left: 290px; */
}

#main-area .container {
    max-width: 100%;
}

.container .row .col-md-4 {
    /* border: 1px solid black; */
    background-color: none;
    padding: 0;
}


.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 5px 10px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 7%;
}

    .dropbtn:hover, .dropbtn:focus {
        background-color: white;
        color: #3498DB;
    }

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        font-size: .9rem;
        color: black;
        padding: 8px 12px;
        text-decoration: none;
        display: block;
    }

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {

    #content {
        margin-left: 0;
        width: 100%;
    }

    #sidebar {
        margin-left: -320px;
        transform: rotateY(90deg);
    }

        #sidebar.active {
            margin-left: 0;
            transform: none;
        }

    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

    #sidebarCollapse.active span {
        margin: 0 auto;
    }

        #sidebarCollapse.active span:first-of-type {
            transform: rotate(45deg) translate(2px, 2px);
        }

        #sidebarCollapse.active span:nth-of-type(2) {
            opacity: 0;
        }

        #sidebarCollapse.active span:last-of-type {
            transform: rotate(-45deg) translate(1px, -1px);
        }
}


/* --------------------------------------------------------
    PORTLET TEMPLATE
--------------------------------------------------------- */

    .portlet {
        width: 100%;
        /* border: 1px solid yellow; */
    }

    .portlet-content {
        margin: .2rem;
        /* margin-right: 0; */
        border-radius: 5px;
        padding: .35rem;
        background-color: rgb(0, 90, 133);
    }

    .portlet-header {
        color: white;
    }

    .portlet-body-content {
        background-color: white;
        font-size: 12px;
        height: 100%;
        border-radius: 5px;
    }


    /* --------------------------------------------------------
    INDIVIDUAL PORTLETS
--------------------------------------------------------- */

    /* .campus-event-digest-content{
    margin-right: 0;
} */

    #open-classified-ads {
        margin: 3px;
        background-color: #007bff;
        color: white;
        padding: 12px;
        border-radius: 5px;
        width: 98%;
        display: inline-block;
        font-size: 14px;
    }

        #open-classified-ads:hover {
            background-color: blue;
            color: white;
        }

    div.portlet-bc-energy-management {
        background-image: url("../images/background2.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        padding: .5rem;
    }

    .labor-time-btn {
        padding: 5px;
        color: white;
        background-color: rgb(1, 107, 165);
        border: solid 2px lightgrey;
        border-radius: 5px;
        width: 100px;
    }

        .labor-time-btn:hover {
            color: rgb(1, 107, 165);
            background-color: white;
        }

    .ul-inside-portlet-btns {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        border-radius: 0px;
        /*background-color: #007bff;*/
    }

    .nested-ul-inside-portlet-btns {
        background-color: white;
        display: none;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .inside-portlet-btns {
        margin: 0;
        /*background-color: #007bff;*/
        color: black;
        padding: 5px;
        padding-left: 10px;
        width: 100%;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        border-top: solid 1px #007bff;
    }

    .li-inside-portlet-btns {
        width: 100%;
        color: #007bff;
        background-color: white;
        border-radius: 5px;
    }

    .inside-portlet-btns:hover {
        background-color: rgb(0, 90, 133);
        color: white;
        /*border-top: 1px solid rgb(0, 90, 133);*/
    }

/*----------------------------------
    My Profile Page
----------------------------------*/

.my-profile-table {
    margin-top: 1rem;
}

.my-profile-table td {
    font-size: 1.2rem;
    padding: 0.8rem;
}

.my-profile-table td:first-child {
    font-weight: bold;
}


/*----------------------------------
    Settings Page
----------------------------------*/

#theme_color_blue {
    background-color: rgb(0, 90, 133);
    border: none;
}

#theme_color_dark {
    background-color: rgb(60,60,60);
    border: none;
}

#theme_color_red {
    background-color: rgb(128, 0, 0);
    border: none;
}

#theme_color_chocolate {
    background-color: rgb(46,21,3);
    border: none;
}

/*-----------------------------------
    View User Data Page
-----------------------------------*/
#user_data_table {
    width: 95%;
    margin: 1rem;
    font-size: 14px;
}

/*#user_data_table, th, td {
    border: 1px solid grey;
}*/

#user_data_table th, #user_data_table td {
    padding: .3rem;
    text-align: left;
}

    #user_data_table th {
        background-color: rgb(0, 90, 133);
        color: white;
    }

#user_data_table td {
    vertical-align: central;
}

#user_data_table tr:nth-child(even) {
    background-color: #f2f2f2;
}