:root { --main-gradient-color: linear-gradient(87deg,#22aeda,#00a7c9); --main-color: #22aeda; }

body { background-color: rgb(248, 249, 254); margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1.4rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; }

div { box-sizing: border-box }

/*GLOBALS */

h1, h2, h3, h4, h5, h6, p { margin-top: 0px; margin-bottom: 0px; }

ul { list-style-type: none; padding: 0px; margin: 0px; }
    ul li { }
a { }
/*
    LAYOUTS 
*/
/*set default font size to 0 to fix spacing errors then reset the font size within the col */
.row { font-size: 0px; margin: 0px; overflow: hidden; }
/*Font size reset */
[class^="col-"], [class*=" col-"] { display: inline-block; vertical-align: top; font-size: 14px; }

.left-side-padding { padding-left: 15px; }
.right-side-padding { padding-right: 15px; }
.side-padding { padding-left: 15px; padding-right: 15px; }

/* cols must be in rows due to font reset.*/
.row .col-10 { width: 100%; }
.row .col-9 { width: 90%; }
.row .col-8 { width: 80%; }
.row .col-7 { width: 70%; }
.row .col-6 { width: 60%; }
.row .col-5 { width: 50%; }
.row .col-4 { width: 40%; }
.row .col-3 { width: 30%; }
.row .col-2 { width: 20%; }
.row .col-1 { width: 10% }

.body-content { margin-top: 60px; }
.side-padding { padding-left: 15px; padding-right: 15px; }
.left-side-padding { padding-left: 15px; }
.right-side-padding { padding-right: 15px; }

button.primary { background: var(--main-color); background: var(--main-gradient-color); }

button { height: 32px; background-color: darkgray; min-width: 100px; font-weight: bold; color: white; font-size: 1.2rem; border: none; stroke: black; outline: none; border-radius: 5px; }
    button:hover { cursor: pointer; }
    button:active { filter: none; transform: scale(.95); }

.float-right { float: right; }

/* lining a icon to the right of a textbox */
.input-group-icon-input .input-group-prepend span { position: relative; top: -0px; padding: 0px 12px 13.5px; font-size: 14px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-right-width: 0px; }
.input-group-icon-input .oi[data-glyph]:before { vertical-align: middle !important; vertical-align: -webkit-baseline-middle !important; }
.input-group-icon-input { width: 100%; display: flex; position: initial; }
/*
    End Layouts and Globals 

*/ /*
    Cards
*/
.card { position: relative; display: inline-block; width: 100%; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.05); border-radius: .375rem; color: #32325d; overflow: auto; }

.card-header, .card-contents { padding: 1.25rem 1.5rem; }
.card-header { margin-bottom: 0; background-color: #fff; border-bottom: 1px solid rgba(0,0,0,.05); display: flex; }
    .card-header div { padding: 0px; }
    .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { line-height: 1.5; color: #32325d; margin: 0px; font-size: 20px; }
.card-stats { overflow: hidden; }
.card .table { margin-bottom: 0px; }
.table td, .table th { padding: 1rem; vertical-align: top; border-top: 1px solid #e9ecef; }
.table thead th { padding-top: .75rem; padding-bottom: .75rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #e9ecef; white-space: nowrap; }
.table .thead-light th { background-color: #f6f9fc; color: #8898aa; border-color: #e9ecef; }
td.large-column { min-width: 350px; max-width: 400px; }
.card-contents { }
.card-footer { background-color: #fff; border-top: 1px solid rgba(0,0,0,.05); font-size: 12px; padding: 0.5rem 1.5rem; }
    .card-footer:last-child { border-radius: 0 0 calc(.375rem - 1px) calc(.375rem - 1px); }

.shadow { box-shadow: 0 0 2rem 0 rgba(136,152,170,.15) !important; }
[class*=shadow] { transition: all .15s ease; }
.bg-secondary { background-color: #f7fafc !important; }
.card-header button { float: right; }
.card table thead { font-size: 10px; }
/*
    End Cards
*/


/*
   _LAYOUT
*/

#mainContent { margin-top: 15px; }
.wrapper { width: 100%; }
nav#sidebar { min-width: 250px; max-width: 250px; min-height: 100vh; background: white; color: #fff; transition: all 0.3s; position: fixed; overflow-y: auto; heighT: 100%; }
div#content { width: calc(100% - 250px); padding-bottom: 15px; left: 250px; position: relative; }
#content header { background-color: var(--main-color); background: var(--main-gradient-color); }
#sidebarCollapse { background-color: rgba(0,0,0,0); }

    #sidebarCollapse div { width: 35px; height: 5px; background-color: white; margin: 6px 0; }

.navbar-search { position: relative; top: 5px; }

    .navbar-search button { min-width: 0px; }
.search-form input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.search-form button { border-top-left-radius: 0px; border-bottom-left-radius: 0px }
.navigation-buttons { position: relative; top: 5px; }
    .navigation-buttons a { float: right; margin-right: 10px; color: white; }
        .navigation-buttons a:first-child { margin-right: 0px; }

#sidebarCollapse { min-width: 0px; width: 100%; }
header ul.col-1 { padding-inline-start: 0px; }
#sidebar ul li.active > a, a[aria-expanded="true"] { color: #fff; background: none; }
/*
    Side Menu
*/
.wrapper { display: flex; align-items: stretch; }

main.row { margin-left: 0px; margin-right: 0px; }
#content { width: calc(100% - 250px); /*full width minus side bar */ padding-bottom: 15px; left: 250px; position: relative; }

.full-width { width: 100% !important; left: 0px !important; }
#sidebar { min-width: 250px; max-width: 250px; min-height: 100vh; background: white; color: #fff; transition: all 0.3s; position: fixed; overflow-y: auto; heighT: 100%; }
#sidebarCollapse div { max-width: 35px; width: 100%; height: 5px; background-color: white; margin: 6px 0; }
#sidebar.active { margin-left: -250px; position: initial; }
#sidebar .sidebar-header { padding: 20px; color: #5e72e4; }
#sidebar ul.components { /*padding: 20px 0;*/ border-bottom: 1px solid lightgrey; margin-bottom: 0px; }
#sidebar ul p { color: #fff; padding: 10px; }
#sidebar ul li a { padding: 10px; font-size: 1.2em; display: block; color: rgba(0, 0, 0, 0.5); text-decoration: none; }
    #sidebar ul li a:hover { color: rgba(0, 0, 0, 0.7); }
    #sidebar ul li a span { padding: 10px; font-size: 16px; }
a[data-toggle="collapse"] { position: relative; }
.dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
.collapsed { display: none; }

@media (max-width: 768px) {
    #sidebar { margin-left: -250px; }
        #sidebar.active { margin-left: 0; }
    #content { left: 0px !important; width: 100% !important; }
    .search-form button { vertical-align: initial; }
}
/*
    END LAYOUT
*/

/*
    LOGIN AND REGISTER PAGES
*/

#login-page { background-color: #63a4ff; background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%); height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; }
    #login-page a { color: dimgrey; }
    #login-page #mainContent { width: 300px; margin: auto; }
    #login-page .input-group-icon-input { width: 100%; display: flex; position: initial; }
    #login-page .navbar-nav { position: relative; top: 23px; float: right; }
    #login-page footer { position: absolute; bottom: 25px; }
    #login-page .error-message { display: block; font-size: 14px; color: red; padding-bottom: 10px; }