/*
    Bootstrap override
*/



@media (min-width: 1200px) {
    .container { max-width: calc(100% - 60px); }
}

html { font-size: 14px; --font-family-sans-serif: Open Sans,sans-serif; font-family: sans-serif; }

footer { position: absolute; bottom: 0; width: 100%; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

@media (max-width: 768px) {
    .container { max-width: auto; }

    .navbar-nav { display: inline-block !important; }

    ul.navbar-nav.ml-auto { width: 350px; }

    #content { width: 100% !important; left: 0px !important; }
}

.border-top { border-top: 1px solid #e5e5e5; }

.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

button.accept-policy { font-size: 1rem; line-height: inherit; }

.sub-menu { padding-left: 10px; }
    .sub-menu li a { padding-right: 0px !important; }
/* Sticky footer styles
-------------------------------------------------- */
/* 
    SITE STRUCTURE
*/
html { position: relative; min-height: 100%; /*background-color: #013A6B;
   background: -webkit-linear-gradient(280deg,#5e72e4,#825ee4 50%, #004E95 50%);*/ }

body { background-color: rgb(244, 246, 251); color: #f8f9fe; }

.bg-dark { background-color: #172b4d !important; }

header { background: linear-gradient(87deg,#22aeda,#00a7c9) !important; height: 210px; }

    header .container { height: 60px; }

        header .container nav a { color: #f8f9fe; }

#mainContent { margin-top: -140px; }

.footer { width: 100%; white-space: nowrap; /* Set the fixed height of the footer here */ height: 60px; line-height: 60px; /* Vertically center the text there */ color: #8898aa !important; }

form { width: 100%; }

.form-flex { display: flex; }

textarea.form-control { height: 150px !important; }

/*
    GLOBALS
*/

.no-padding { padding: 0px !important; }

.no-side-padding { padding-left: 0px; padding-right: 0px; }

.error-message { color: #dc3545; }

.success-message { color: #28a745; }

.table { margin-bottom: 0px; }

.oi[data-glyph]:before { padding-right: 10px; }

.required-astrix { color: red; }

.hidden { display: none !important; }

.dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; }

.green-dot { background-color: #8FE388; }

.orange-dot { background-color: orange; }

.red-dot { background-color: red; }

/*
    HEADER
*/

#navbarSupportedContent a { height: 35px; line-height: 16px; }
#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 { width: 35px; 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.1em;*/ 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%); }

@media (max-width: 768px) {
    #sidebar { margin-left: -250px; }

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

/* 
    Cards
*/
.card { position: relative; display: flex; flex-direction: column; 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 { font-family: inherit; font-weight: 600; line-height: 1.5; color: #32325d; margin: 0px; font-size: 1.0625rem; }

.card-stats { overflow: hidden; }

.table td, .table th { padding: 1rem; vertical-align: top; border-top: 1px solid #e9ecef; font-size: .8125rem; /*max-width: 200px;*/ }

.table-border td, .table-border th { border-right: 1px solid #e9ecef; }
.table-center td, .table-center th { text-align: center; vertical-align: central }
    .table-center td:first-child, .table-center th:first-child { text-align: left; vertical-align: central }

.table thead th { padding-top: .75rem; padding-bottom: .75rem; font-size: .65rem; 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; }

/*
    Input Groups
*/

.input-group { border-radius: 0.375rem; }

input[type="radio"], input[type="checkbox"] { height: 20px !important; width: 20px !important; margin-left: 10px; }


.input-group-text { display: flex; align-items: center; padding: 0.625rem 0.75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #adb5bd; text-align: center; white-space: nowrap; background-color: #fff; border: 1px solid #cad1d7; border-radius: 0.375rem; }

.input-group > .form-control, .input-group > .custom-select, .input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0; height: 44px; }

.input-group-alternative { box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02); border: 0; transition: box-shadow .15s ease; }

    .input-group-alternative .form-control, .input-group-alternative .input-group-text { border: 0; box-shadow: none; }


/*
        Login
    */

#loginBox { min-width: 320px; }

/*
    Tables
*/

.thead-light { background: #f6f9fc; }

.previous-values p, .new-values p { margin: 0px; }

td a span.oi { color: rgba(0, 0, 0, 0.5); font-size: 16px; }

.icon-shape { padding: 12px; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }

.icon { width: 3rem; height: 3rem; }

    .icon span.oi { margin-left: 10px; margin-top: 3px; }

.search-form { padding: 0px; }

    .search-form .form-inline, .search-form .form-control { display: inline-block; vertical-align: middle; }

    .search-form input { width: 35px; }


/*DATA TABLES*/

.dataTables_wrapper input, .dataTables_wrapper select { height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

.dataTables_length, .dataTables_filter, .dataTables_paginate, .dataTables_info { width: 50%; display: inline-flex; padding-top: 15px; padding-bottom: 15px; }

.dataTables_length, .dataTables_filter { border-bottom: 1px solid #ccc; }

.dataTables_paginate, .dataTables_info { border-top: 1px solid #ccc; }

.dataTables_length, .dataTables_info { padding-left: 15px; }

.dataTables_filter, .dataTables_paginate { justify-content: flex-end; padding-right: 15px; }

.paginate_button, .ellipsis { color: #007bff !important; border: 1px solid #ccc !important; border-right: none !important; margin-left: 0px !important; min-width: 1.5em !important; padding: 0.5em 1em !important; border-radius: 0px !important; }

    .paginate_button:hover { background: #eee !important; /*color: black !important;*/ }

.dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0.594em 1em !important; }

.paginate_button.current { background: skyblue !important; color: white !important; }

.paginate_button.previous { border-top-left-radius: 5px !important; border-bottom-left-radius: 5px !important; }

.paginate_button.next { border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; border: 1px solid #ccc !important; }

.paginate_button.disabled { color: #cccccc !important; background: none !important; }
table.dataTable thead th, table.dataTable thead td { padding: 10px 18px 10px 10px !important; }
/*.dataTables_length label, .dataTables_filter label {
    width: 100%;
}



.dataTables_filter input {
    width: 150px;
    display: inline-block;
    margin-left: 5px;
    float: right;
}

.dataTables_filter label {
    text-align: right;
}

.dataTables_wrapper .row {
}*/



/* Data table buttons*/

.dt-buttons { width: 50%; display: inline-flex; padding-top: 20px; padding-bottom: 25px; padding-left: 15px; border-bottom: 1px solid #ccc; }
    .dt-buttons .dt-button { padding: 0.25rem 0.5rem; margin: 0px 3px; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; color: #111111; background-color: #ffffff; font-weight: 400; user-select: none; border: 1px solid #007bff; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }



/*
        AUDIT DASHBAORD
    */

.audit-wrapper { color: #172b4d; width: 40%; }
.graph-wrapper { color: #172b4d; width: 0%; }
.audit-wrapper .box-area { width: 12%; background: rgb(239, 241, 246); border-radius: 5px; text-align: center; padding: 0px; margin: 0 1% 2% 1%; display: inline-block; cursor: pointer; color: #172b4d }
    .audit-wrapper .box-area:first-child { margin-left: 0px; }
    .audit-wrapper .box-area:last-child { margin-right: 0px; }
.audit-wrapper .box-area-header { border-bottom: 1px solid white; padding: 2px 5px; }

.audit-wrapper .box-area-body { }
    .audit-wrapper .box-area-body h3 { }
    .audit-wrapper .box-area-body h6 { font-size: 14px; }
        .audit-wrapper .box-area-body h6.red, .audit-wrapper .box-area-body h3.red { color: red; }
        .audit-wrapper .box-area-body h6.green, .audit-wrapper .box-area-body h3.green { color: limegreen; }
        .audit-wrapper .box-area-body h6.orange, .audit-wrapper .box-area-body h3.orange { color: orange; }
        .audit-wrapper .box-area-body h6 span { margin-right: -10px; font-size: 12px; }
    .audit-wrapper .box-area-body p { color: darkgrey; font-size: 12px; }
    .audit-wrapper .box-area-body h3, .audit-wrapper .box-area-body h6, .audit-wrapper .box-area-body p { margin-bottom: 2px; }
.audit-wrapper .box-area-body, .audit-wrapper .box-area-header { }
#TopPieChart { margin-top: 30px; }

.chart-js-wrapper { width: 50% !important; overflow: auto; border: 5px solid rgb(244, 246, 251); border-radius: 15px; background-color: rgb(239, 241, 246); padding: 10px; }
.chart-js-chart { width: 100% !important; height: 300px !important; margin: auto; }

.box-area.active { border: 2px solid yellow; }

#auto-created-model .modal-footer .btn { margin-right: 5px; }
    #auto-created-model .modal-footer .btn:last-child { margin-right: 0px; }


.selectable-check img { width: 20px; height: 20px; }


.border-green { animation: fade-green 2s linear; }
.border-red { animation: fade-red 2s linear; }

@keyframes fade-green {
    0%,100% { outline: solid 0px #32cd32 }
    50% { outline: solid 1px #32cd32; }
}

@keyframes fade-red {
    0%,100% { outline: solid 0px #ff0000 }
    50% { outline: solid 1px #ff0000; }
}