@charset "utf-8";

:root {
    --font-name: 'aritadm';
    --point-main: rgba(224, 72, 60, 1);

    --nav-bg: #266abe;
    --nav-bg-gradient: #404E67;
    --nav-bg-active: #293846;

    --btn-txt: #266abe;
    --select-color: #000;

    --irs-bar-txt: #17a2b8;
    --irs-bar-range: #007bff;
    --irs-bar-line: #aaa;
}

/* ────────────────────────────── body ────────────────────────────── */
body * :not(i):not(code):not(.fa):not(.fas) {
    font-family: var(--font-name) !important;
}
* { font-size: 16px; letter-spacing: -0.04em; }
/* ────────────────────────────── Top Navi ────────────────────────────── */
.top-speed-button li a {
    font-size: 14px;
}

/* 충전/환전/문의/신규 - 아이콘 */
.btn-app {
    min-width: 70px; height: 55px;
    padding: 10px 5px;
}
.btn-app > .badge {
    right: -5px; font-size: 10px !important;
}
.btn-app > .badge.bg-warning {
    color: #fff !important;
}

.btn-purple {
    color: #fff !important;
    background-color: #6f42c1;
    border-color: #6f42c1;
}

.btn-skyblue {
    color: #fff;
    background-color: #2e9de4;
    border-color: #2e9de4;
    box-shadow: none;
}
.btn-hotpink {
    color: #fff;
    background-color: #fd517d;
    border-color: #fd517d;
    box-shadow: none;
}

@-webkit-keyframes newMsg {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}

@keyframes newMsg {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}
#newMsgBadge {
    font-size: .6rem !important;
}
#newMsgBadge.active {
    --color: #dc3545;
    --hover: #ef8f6e;

    -webkit-animation:  newMsg 1s;
    animation:          newMsg 1s;

    -webkit-animation-iteration-count:  infinite;
    animation-iteration-count:          infinite;

    box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

#newBadge {
    font-weight: bold;
}


@-webkit-keyframes newMb {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}

@keyframes newMb {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}

#newBadge.active {
    --color: #ef6eae;
    --hover: #ef8f6e;

    -webkit-animation:  newMb 1s;
    animation:          newMb 1s;

    -webkit-animation-iteration-count:  infinite;
    animation-iteration-count:          infinite;

    box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
#newDrop > a {
    font-size: 14px;
}

#newNoticeBadge.active {
    --color: #17a2b8;
    --hover: #17a2b8;

    -webkit-animation:  newMb 1s;
    animation:          newMb 1s;

    -webkit-animation-iteration-count:  infinite;
    animation-iteration-count:          infinite;

    box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

/* ────────────────────────────── Left Navi - Logo ────────────────────────────── */
body aside a.company-logo,
body.sidebar-collapse aside:hover a.company-logo {
    display: block; width: auto; padding: 10px;
    overflow: hidden;

    font-size: 18px; font-weight: 700; color: #fff;
    text-transform: capitalize;
}
body.sidebar-collapse aside a.company-logo {
    overflow: hidden; width: 49px;
}
.brand-link {
    color: #ffffff;
}
aside > a.brand-link > span {
    text-transform: capitalize; font-size: 18px !important;
    line-height: 1.7em;
}
.sidebar-brand-text {
    font-weight: normal; font-size: 14px !important;
}

/* ────────────────────────────── Left Navi ────────────────────────────── */

aside .sidebar nav {
    font-size: 17px;
}
aside .sidebar nav i {
    font-size: 14px !important;
}
aside .sidebar nav > ul > li > ul {
    background-color: #293846 !important;
    padding-left: 30px !important;
}
.os-content {
    padding: 0 !important;
}
.main-sidebar.sidebar-customizing,
.layout-navbar-fixed .wrapper .sidebar-customizing .brand-link:not([class*="navbar"]) {
    background-color: var(--nav-bg);
    background-image: linear-gradient(180deg,var(--nav-bg) 10%,#404E67 100%);
    background-size: cover;
}
@media (min-width: 576px) {
    .layout-sm-navbar-fixed .wrapper .sidebar-customizing .brand-link:not([class*="navbar"]) {
        background-color: var(--nav-bg);
        background-image: linear-gradient(180deg,var(--nav-bg) 10%,#404E67 100%);
        background-size: cover;
    }
}
@media (min-width: 768px) {
    .layout-md-navbar-fixed .wrapper .sidebar-customizing .brand-link:not([class*="navbar"]) {
        background-color: var(--nav-bg);
        background-image: linear-gradient(180deg,var(--nav-bg) 10%,#404E67 100%);
        background-size: cover;
    }
}
    
@media (min-width: 992px) {
    .layout-lg-navbar-fixed .wrapper .sidebar-customizing .brand-link:not([class*="navbar"]) {
        background-color: var(--nav-bg);
        background-image: linear-gradient(180deg,var(--nav-bg) 10%,#404E67 100%);
        background-size: cover;
    }
}

@media (min-width: 1200px) {
    .layout-xl-navbar-fixed .wrapper .sidebar-customizing .brand-link:not([class*="navbar"]) {
        background-color: var(--nav-bg);
        background-image: linear-gradient(180deg,var(--nav-bg) 10%,#404E67 100%);
        background-size: cover;
    }
}


.sidebar-customizing .nav-sidebar > .nav-item .nav-link,
.sidebar-customizing .nav-sidebar > .nav-item .nav-link p {
    background-color: transparent !important;
    color: #a7b1c2 !important;
}

.sidebar-customizing .nav-sidebar > .nav-item .nav-link.active p,
.sidebar-customizing .nav-sidebar > .nav-item .nav-link.active {
    color: #ffffff !important;
}

nav ul.nav li.nav-item .nav.nav-treeview li.nav-item a:hover p {
    color: #ffffff !important;
}

/*.sidebar-customizing .nav-sidebar.nav-legacy > .nav-item > .nav-link.active {
    border-color: transparent !important;
}*/

/* ────────────────────────────── 컨텐츠 공통 ────────────────────────────── */
/* modal */
#modal-userdetail .modal-title {
    font-size: 18px; font-weight: 500;
}
#modal-userdetail .userdetail-content p,
#modal-userdetail .userdetail-content p span {
    color: #fff; font-size: 17px;
}

#modal-userdetail .userdetail-content p span {
    display: inline-block; width: 80px; margin: 0 10px 0 0;
}

.content-wrapper .page-title {
    font-size: 16px; font-weight: 400; padding-top: 5px;
}
.content-wrapper .card-title {
    font-size: 16px; font-weight: 400;
}
ol.breadcrumb > .breadcrumb-item,
ol.breadcrumb > .breadcrumb-item > a {
    color: #333; font-size: 13px;
}

.select2-selection__rendered {
    line-height: 20px !important;
}
.select2-container .select2-selection--single {
    height: 20px !important;
}
.select2-selection__arrow {
    height: 20px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--select-color) !important;
}

#top-btn {
    width: 50px; height: 50px; line-height: 50px; z-index: 1009; cursor: pointer;
    position: fixed; bottom: -100px; right: 10px;
    border-radius: 50%; border: 1px solid rgba(38, 106, 190, .5); text-align: center;

    background-color: rgba(38, 106, 190, 1); color: #fff;

    -webkit-box-shadow: 5px 5px 10px rgba( 0, 0, 0, 0.2 );
    -moz-box-shadow:    5px 5px 10px rgba( 0, 0, 0, 0.2 );
    -ms-box-shadow:     5px 5px 10px rgba( 0, 0, 0, 0.2 );
    -o-box-shadow:      5px 5px 10px rgba( 0, 0, 0, 0.2 );
    box-shadow:         5px 5px 10px rgba( 0, 0, 0, 0.2 );

    -webkit-transition: all .4s ease-out;
    -moz-transition:    all .4s ease-out;
    -o-transition:      all .4s ease-out;
    transition:         all .4s ease-out;
    opacity: 0;
}
#top-btn.active { bottom: 30px; opacity: 1; }

#memo-btn {
    width: 50px; height: 50px; line-height: 55px; z-index: 1009; cursor: pointer;
    position: fixed; bottom: 30px; right: 10px;
    border-radius: 50%; border: 1px solid #feea70; text-align: center;

    background-color: #feea70; color: #333;

    -webkit-box-shadow: 5px 5px 10px rgba( 0, 0, 0, 0.2 );
    -moz-box-shadow:    5px 5px 10px rgba( 0, 0, 0, 0.2 );
    -ms-box-shadow:     5px 5px 10px rgba( 0, 0, 0, 0.2 );
    -o-box-shadow:      5px 5px 10px rgba( 0, 0, 0, 0.2 );
    box-shadow:         5px 5px 10px rgba( 0, 0, 0, 0.2 );

    -webkit-transition: all .4s ease-out;
    -moz-transition:    all .4s ease-out;
    -o-transition:      all .4s ease-out;
    transition:         all .4s ease-out;
}
#memo-btn.active { bottom: 90px; font-size: 18px; }

/* memo container */
#memo-container {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1039; display: none;
}
#memo-container .manage-memo-bg {
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, .45);
}
#manage-memo {
    position: fixed; top: 67px; right: 15px;
    width: 298px; height: 398px; padding: 10px;
    background-color: #fff3ab; border: 1px solid #feea70;
    border-radius: 3px;
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .4);
    -moz-box-shadow:    3px 3px 10px rgba(0, 0, 0, .4);
    -ms-box-shadow:     3px 3px 10px rgba(0, 0, 0, .4);
    -o-box-shadow:      3px 3px 10px rgba(0, 0, 0, .4);
    box-shadow:         3px 3px 10px rgba(0, 0, 0, .4);
}
#manage-memo > div:after {
    content: ''; display: block; clear: both;
}
#manage-memo .manage-memo-head > h2 {
    float: left; cursor: default;
    font-size: 16px; font-weight: 700;
}
#manage-memo .manage-memo-head > .manage-memo-close {
    float: right; cursor: pointer; color: #333;
    position: relative; top: -3px;
}
#manage-memo .manage-memo-body {
    border-top: 1px solid #eee;
}
#manage-memo .manage-memo-body textarea {
    border: none; outline: none; width: 280px; height: 340px; padding-top: 10px;
    background-color: transparent; font-size: 16px;
    overflow-y: auto;
}

#manage-memo .manage-memo-body textarea::-webkit-scrollbar {
    width: 10px;
}
#manage-memo .manage-memo-body textarea::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}
#manage-memo .manage-memo-body textarea::-webkit-scrollbar-track {
    background-color: #fff3ab;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px #fff;
}



/* ────────────────────────────── Common ────────────────────────────── */
.nodata-txt {
    font-size: 16px; color: #a00; text-align: center;
    margin: 15px 0 0 0; padding: 0;
}
.clear-fix {
    display: block; clear: both;
}
.decoration {
    display: block; clear: both; height: 15px;
}

.ellipsis {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.none {
    display: none !important;
}

.txt-underline { text-decoration: underline !important; }
.txt-info { color: #17a2b8 !important; }
.txt-warning { color: #ffc107 !important; }
.txt-purple { color: #6f42c1 !important; }
.txt-danger { color: #dc3545 !important; }
.txt-success { color: #28a745 !important; }

.txt-navy { color: #001f3f !important; }
.txt-gray { color: #adb5bd !important; }

.txt-tiny { font-size: .7rem !important; font-weight: 400 !important; }

.txt-center { text-align: center !important; }
.txt-right { text-align: right !important; }

.form-group label {
    font-weight: 500 !important;
}

.none { display: none !important; }

.irs--flat .irs-handle > i:first-child {
    /*background-color: var(--irs-bar-line) !important;*/
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%) !important;
}
.irs--flat .irs-bar {
    /*background-color: var(--irs-bar-range) !important;*/
    background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%) !important;
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
    background-color: var(--irs-bar-txt) !important;
}
.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
    border-top-color: var(--irs-bar-txt) !important;
}
/* BACKGROUNDS */
.bg-hotpink { background-color: #fd517d; color: #fff; }
.bg-skyblue { background-color: #2e9de4; color: #fff; }
.bg-purple { background-color: #be28e4; color: #fff; }
.gray-bg,
.bg-muted {
    background-color: #f3f3f4;
}
.white-bg {
    background-color: #ffffff;
}
.blue-bg,
.bg-success {
    background-color: #1c84c6;
    color: #ffffff;
}
.navy-bg,
.bg-primary {
    background-color: #1ab394;
    color: #ffffff;
}
.lazur-bg,
.bg-info {
    background-color: #23c6c8;
    color: #ffffff;
}
.yellow-bg,
.bg-warning {
    background-color: #f8ac59;
    color: #ffffff;
}
.red-bg,
.bg-danger {
    background-color: #ed5565;
    color: #ffffff;
}
.bg-gray {
    background-color: #efefef;
    color: #999;
}
.black-bg {
    background-color: #262626;
}
.bg-hangcok {
    background-color: #7146e8 !important; color: #fff;
}
.bg-hangcok, .bg-hangcok > a { color: #fff !important; }
.bg-kleannara {
    background-color: #cbe628 !important; color: #000;
}
.bg-kleannara, .bg-kleannara > a { color: #000 !important; }


/* ────────────────────────────── assets modal ────────────────────────────── */
.modal-assets {}
.modal-assets .modal-header > .modal-title {
    font-size: 20px;
}
.modal-assets .modal-body ul {
    margin: 0; padding: 0; list-style: none;
}
.modal-assets .modal-body ul li {
    margin: 0 0 10px; padding: 0 0 10px;
    border-bottom: 1px solid #eee;
}
.modal-assets .modal-body ul li:last-child {
    border: none;
}

/* ────────────────────────────── paging group ────────────────────────────── */
.paging-group {
    margin: 15px 0;
}
.paging-group:after {
    content: ''; display: block; clear: both;
}
.pagination .page-item {
    float: left;
}
.pagination .page-item.active {
    /*background-color: #a00;*/
}
.pagination .page-item.active .page-link {
    color: #fff;
}
.pagination .page-item .page-link {
    padding: 5px 15px;
}
.pagination .page-item .page-link i {
    color: #aaa; position: relative; top: 1px;
}