.page-outer-wrapper { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; }

#login {
	background-image: url('/assets/media/17H-5184x3456.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

@media (max-width: 2400px) {
    #login { background-image: url('/assets/media/17H-2400x1600.jpg'); }
}

.auth-form-wrapper { border: 1px solid #666; border-radius: 3px; background: #f8f8f8; padding: 15px; margin-top: 10%; box-shadow: 0px 4px 9px 0px #a0a0a0;}
.auth-form-wrapper .title { font-size: 1.2em; text-align: center; padding: 14px 0px 28px; }

.admin-list-container { width: 100%;  min-height: 100vh;}
.admin-list-container .title-wrapper { margin-top: 20px;}
.admin-list-container .list-wrapper { margin-top: 20px;}

img.dashboard-logo { width: 50%;}

.flex-container { display: flex;}

.card-body.tag-summary .column-block { margin-bottom: 10px; }
.card-body.tag-summary .column-block:last-child { margin-bottom: 5px; }

.card-body.dashboard-items-list .column-block { margin-bottom: 5px; }
.card-body.dashboard-items-list .column-block:last-child { margin-bottom: 10px; }

.chart-classic {
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid rgba(0,0,0,.125);
	border-radius: .25rem;
	padding: 15px;
}
/* =========== BEGIN:COLUMN BLOCKs ================== */
.column-block { display: flex;}
.column-block .label { width: auto; flex-shrink: 1;}
.column-block .data { width: auto; flex-grow: 1;}
.column-block .data.txt-right { width: auto; flex-grow: 1; text-align: right;}
/* =========== END:COLUMN BLOCKs ================== */

/* =========== BEGIN:MY CARDS ============ */
.my-cards-container { display: grid; grid-template-columns: 24% 24% 24% 24%; row-gap: 20px; column-gap: 20px;}
.my-card-item { background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.my-card-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; }
/* =========== END:MY CARDS ============ */


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.footer { background-color: #f5f5f5; margin-top: auto !important; }
.container-footer { width: auto; max-width: 680px; padding: 0 15px; }

.cp-add-info-wrapper {
	background: #f6f6f6;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #a0a0a0;
	box-shadow: 0px 5px 20px 0px #f0f0f0;
}

.add-pannel {
	padding: 20px;
	background: #fafafa;
	border: 1px solid #f0f0f0;
	border-radius: 5px;
}

.charge-station-item {
	border: 1px solid #e0a800;;
	padding: 10px;
	border-radius: 5px;
	background: #FFF;
	margin-bottom: 20px;
}

.charge-station-item:last-child { margin-bottom: 0px;}

.chargestation-plug-container {
	display: grid;
    grid-template-columns: auto auto auto;
    justify-content: left;
	column-gap: 20px;
    row-gap: 20px;
	width: 100%;
}

.chargestation-plug-container .caption { font-size: 1.5em; font-weight: bold; margin-bottom: 10px;}


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

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

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #343a40 ;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right: 0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #343a40 ;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 0px 0 20px;
    border-bottom: 1px solid #343a40 ;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
	color: rgba(255,255,255,.75);
	text-decoration: none;
}

#sidebar ul li a:hover {
    color: #333;
    background: #fff;
}

#sidebar ul li a i {
    margin-right: 10px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #343a40;
}

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

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

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #343a40;
}

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: #343a40 !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    SELECT V2
----------------------------------------------------- */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding-left: 16px; }
.select2-container--default .select2-results__option[aria-selected="true"]:hover {
    color: #000;
    background-color: #f0f0f0;
}
.select2-results__option--highlighted[aria-selected] { background-color: #D0C9C0 !important; }
.select2-results__option--highlighted[aria-selected] .select2-result-repository__uid.text-muted { color: #fff;}

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

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }
    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }
    #sidebar .sidebar-header strong {
        display: block;
    }
    #sidebar ul li a {
        padding: 20px 10px;
    }
    #sidebar ul li a span {
        font-size: 0.85em;
    }
    #sidebar ul li a i {
        margin-right: 0;
        display: block;
    }
    #sidebar ul ul a {
        padding: 10px !important;
    }
    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

#map.map-global-style { border: 1px solid rgba(0,0,0,.125); border-radius: 3px; }

/* DATE RANGE PICKER RELATED ---- */
.daterangepicker-input { background: #fff; cursor: pointer; padding: 8px 10px; border: 1px solid #ccc; width: 100%; border-radius: 5px; }

/* TIME LINE ---- */

.vertical-timeline {
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 67px;
    height: 100%;
    width: 4px;
    background: #e9ecef;
    border-radius: .25rem
}

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem
}

.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s
}

.vertical-timeline-element-icon {
    position: absolute;
    top: 0;
    left: 60px
}

.vertical-timeline-element-icon .badge-dot-xl {
    box-shadow: 0 0 0 5px #fff
}

.badge-dot-xl {
    width: 18px;
    height: 18px;
    position: relative
}

.badge:empty {
    display: none
}

.badge-dot-xl::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: .25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    background: #fff
}

.vertical-timeline-element-content {
    position: relative;
    margin-left: 90px;
    font-size: .8rem
}

.vertical-timeline-element-content .timeline-title {
    font-size: .8rem;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    padding: 2px 0 0;
    font-weight: bold
}

.vertical-timeline-element-content .vertical-timeline-element-date {
    display: block;
    position: absolute;
    left: -90px;
    top: 0;
    padding-right: 10px;
    text-align: right;
    color: #adb5bd;
    font-size: .7619rem;
    white-space: nowrap
}

.vertical-timeline-element-content:after {
    content: "";
    display: table;
    clear: both
}
.vertical-timeline-element-content .vertical-timeline-element-date.width-for-date { width: 74px; left: -100px;}