/* Calendar */
/* ----------------------------------------------------------------------- */
.option_box {width: 280px; position: relative;}
.option_box .calendars {padding-top: 5px;padding-bottom: 5px;}
.option_box #cal_head {text-align: center; color: #867a6d; font-size: 18px; margin-bottom: 12px;}
.option_box #cal_head a {color: darkgray;vertical-align: middle; display: inline-block; margin:-3px 35px 0;}
.option_box table {text-align: center;}
.option_box table th {padding:5px 0;}
.option_box table td {height: 30px; line-height: 30px;}
.option_box table td.today span {display: block; background: #ea5529; color: #fff; margin: auto; line-height: 20px; width: 20px; height: 20px; display: block; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;} 
.option_box table th:nth-child(1) {color: #ea5529;}
.option_box table td:nth-child(1) {color: #ea5529;}
.option_box table th:nth-child(7) {color: #3f6ad8;}
.option_box table td:nth-child(7) {color: #3f6ad8;} 
/* ----------------------------------------------------------------------- */

.app-theme-white.login {
    background-image: url(assets/images/bg_penta_web.svg);
}

.border-checkbox {
    padding: .5rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    display: inline-block;
}

.com-hidden {
    visibility: collapse;
}

pre {
    color: #495057;
}

.app-theme-white .app-header {
    background: #134489;
}

.app-page-title {
    padding: 1rem 30px 1rem 30px;
}

.modal .table td {
    padding: 3px 8px 3px 8px;
}

/* hamburger 메뉴 버튼 색상 */
/* ----------------------------------------------------------------------- */
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: #134489;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    background-color: #134489;
}
/* ----------------------------------------------------------------------- */

/* 사이드 메뉴 Show or Hide
/* ----------------------------------------------------------------------- */
.fixed-sidebar:not(.closed-sidebar) .app-header__logo .logo-block {
    display:contents !important;
}
.fixed-sidebar.closed-sidebar .app-header__logo .logo-block {
    display:none;
}
/* ----------------------------------------------------------------------- */

/* Table Header 고정
/* ----------------------------------------------------------------------- */
.thead-sticky {
    position: sticky; 
    top:0; 
    z-index: 1; 
    background-color: #f8f9fa
}
/* ----------------------------------------------------------------------- */


/* 파일 업로드 영역 스타일 */
/* ----------------------------------------------------------------------- */
.custom-file-upload .upload-box {
    width: 100%;
    height: 120px;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #f8f9fa;
}

.custom-file-upload .upload-box:hover {
    border-color: #3498db;
    background-color: #f1f9ff;
}

.upload-box.dragover {
    border-color: #3498db;
    background-color: #f1f9ff;
    transform: scale(1.02);
}

/* 드래그 중일 때의 시각적 피드백 */
.upload-box.dragover .upload-placeholder {
    opacity: 0.7;
}

.upload-placeholder {
    text-align: center;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
 }
 
 .upload-placeholder i {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 10px;
 }

.preview-image {
    max-width: 100%;
    max-height: 118px;
    object-fit: contain;
    transition: all 0.3s ease;
}
/* ----------------------------------------------------------------------- */


/* Option Box */
/* ----------------------------------------------------------------------- */
 .option-section {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
 }
 
 .option-section .section-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
    font-size: 0.9rem;
 }

.option-items {
    display: flex;
    gap: 2rem;
    padding-left: 15px;
 }
 
.option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.option-label {
    font-size: 0.9rem;
    color: #666;
 }
 /* ----------------------------------------------------------------------- */


/* 화물 상태 Block */
/* ----------------------------------------------------------------------- */
.product-state-registered {
    background-color: #fa6400 !important;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}

.product-state-dispatched {
    background-color: #6741d9 !important;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}

.product-state-loaded {
    background-color: #1c7ed6 !important;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}

.product-state-unloaded {
    background-color: #ff9500 !important;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}

.product-state-paid {
    background-color: #2f9e44 !important;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}

.product-state-canceled {
    background-color: #868e96 !important;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}

.state-color-registered {
    background-color: #fa6400 !important;
}

.state-color-dispatched {
    background-color: #6741d9 !important;
}

.state-color-loaded {
    background-color: #1c7ed6 !important;
}

.state-color-unloaded {
    background-color: #ff9500 !important;
}

.state-color-paid {
    background-color: #2f9e44 !important;
}

.state-color-canceled {
    background-color: #868e96 !important;
}
/* ----------------------------------------------------------------------- */


/* 상/하차 일시 구분 Block */
/* ----------------------------------------------------------------------- */
.date_div_container_today {
    background-color: #6236ff;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 12px;
    margin-right: 5px;
}

.date_div_container_tomorrow {
    background-color: #0091ff;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 12px;
    margin-right: 5px;
}

.date_div_container_monday {
    background-color: #0096bd;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 12px;
    margin-right: 5px;
}

.date_div_container_else {
    background-color: #6d7278;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 12px;
    margin-right: 5px;
}

.container-gray {
    background-color: #e5e7eb !important;
    color: #121828;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
}
/* ----------------------------------------------------------------------- */


/* 배경 색상 */
/* ----------------------------------------------------------------------- */
.bg-color-main {
    background-color: #134489 !important;
}

.bg-color-sub {
    background-color: #0096bd !important;
}

.bg-color-black {
    background-color: #051b27 !important;
}

.bg-color-white {
    background-color: #fff !important;
}

.bg-color-gray {
    background-color: #dcdcdc !important;
}

.bg-color-thick-gray {
    background-color: #9396a0 !important;
}

.bg-color-light-gray {
    background-color: #f1f4f6 !important;
}

.bg-color-skyblue {
    background-color: #eff9ff !important;
}

.bg-color-header {
    background-color: #e7f6ff !important;
}

.bg-color-warning {
    background-color: #f7b924 !important;
}

.bg-color-pink {
    background-color: #ffe9e9 !important;
}

.bg-color-poi {
    background-color: darkgoldenrod !important;
}

.bg-color-danger {
    background-color: #d92550 !important;
}

.bg-color-red {
    background-color: #ff0000 !important;
}

.bg-block-gray {
    background-color: #f9fafc;
}
/* ----------------------------------------------------------------------- */

/* Font 색상 */
/* ----------------------------------------------------------------------- */
.font-color-main {
    color: #134489 !important;
}

.font-color-sub {
    color: #0096bd !important;
}

.font-color-white {
    color:white !important;
}

.font-color-gray {
    color:#909090 !important;
}

.font-color-gray-light {
    color:#f1f2f4 !important;
}

.font-color-black {
    color: #292a2e !important;
}

.font-color-red {
    color: #ff0000 !important;
}

.font-color-danger {
    color: #d92550 !important;
}

.font-color-warning {
    color: #f7b924 !important;
}

.font-color-blue {
    color: #0000ff !important;
}

.font-bold {    
    font-weight:700;
}
/* ----------------------------------------------------------------------- */

/* 화물 상태별 색상 */
/* ----------------------------------------------------------------------- */
.font-color-registered {
    color: #fa6400 !important;
}
.font-color-dispatched {
    color: #6741d9 !important;
}
.font-color-loaded {
    color: #1c7ed6 !important;
}
.font-color-unloaded {
    color: #ff9500 !important;
}
.font-color-paid {
    color: #2f9e44 !important;
}
.font-color-canceled {
    color: #868e96 !important;
}

.btn-outline-registered {
    color: #fa6400;
    border-color: #fa6400;
}

.btn-outline-registered:hover {
    color:#fff;
    background-color:#fa6400;
    border-color:#fa6400
}

.btn-outline-dispatched {
    color: #6741d9;
    border-color: #6741d9;
}

.btn-outline-dispatched:hover {
    color:#fff;
    background-color:#6741d9;
    border-color:#6741d9
}

.btn-outline-loaded {
    color: #1c7ed6;
    border-color: #1c7ed6;
}

.btn-outline-loaded:hover {
    color:#fff;
    background-color:#1c7ed6;
    border-color:#1c7ed6
}

.btn-outline-unloaded {
    color: #ff9500;
    border-color: #ff9500;
}

.btn-outline-unloaded:hover {
    color:#fff;
    background-color:#ff9500;
    border-color:#ff9500
}

.btn-outline-paid {
    color: #2f9e44;
    border-color: #2f9e44;
}

.btn-outline-paid:hover {
    color:#fff;
    background-color:#2f9e44;
    border-color:#2f9e44
}

.btn-outline-canceled {
    color: #868e96;
    border-color: #868e96;
}

.btn-outline-canceled:hover {
    color:#fff;
    background-color:#868e96;
    border-color:#868e96
}

.btn-outline-green {
    color: #0096bd;
    border-color: #0096bd;
}

.btn-outline-green:hover {
    color:#fff;
    background-color:#0096bd;
    border-color:#0096bd
}

.edit-btn {
    position: absolute;
    top: 42px;
    right: 16px;
    background-color: #134489;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.btn {
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
}

.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
}

.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

.btn-secondary {
    background-color: #f8f9fa;
    border-color: #e0e0e0;
    color: #666;
}

.btn-secondary:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #333;
}
/* ----------------------------------------------------------------------- */

/* Font 크기 */
/* ----------------------------------------------------------------------- */
.font-size-7 {
    font-size: 7px;
}

.font-size-8 {
    font-size: 8px;
}

.font-size-9 {
    font-size: 9px;
}

.font-size-10 {
    font-size: 10px;
}

.font-size-11 {
    font-size: 11px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-15 {
    font-size: 15px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-17 {
    font-size: 17px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-22 {
    font-size: 22px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-26 {
    font-size: 26px;
}

.font-size-28 {
    font-size: 28px;
}

.font-size-30 {
    font-size: 30px;
}

.font-size-33 {
    font-size: 33px;
}

.font-size-36 {
    font-size: 36px;
}

.font-size-40 {
    font-size: 40px;
}

.font-size-96 {
    font-size: 96px;
}
/* ----------------------------------------------------------------------- */


/* 실시간 운행 노선 */
/* ----------------------------------------------------------------------- */
.bg-color-light-blue {
    background-color: #d1e7f3 !important;
}

.btn-thick-blue {
    color: white;
    background-color: #134489;
    border-color: #134489;
}

.btn-thick-blue:hover {
    color: white;
    background-color: #134489;
    border-color: #134489;
}

.font-color-black-light {
    color:#4b4e51 !important;
}

.font-color-thick-blue {
    color : #156d9e !important;
}
/* ----------------------------------------------------------------------- */

.gap-2 {
    gap: 0.5rem !important;
}

/* 필수 입력 항목 */
/* ----------------------------------------------------------------------- */
.form-group label.required::after {
    content: "*";
    color: #dc3545;
    margin-left: 4px;
}

.input-group span.required::after {
    content: "*";
    color: #dc3545;
    margin-left: 4px;
}
/* ----------------------------------------------------------------------- */


/* placeholder & title
/* ----------------------------------------------------------------------- */
.form-group {
    position: relative;
}

.form-group .placeholder-label {
    position: absolute;
    top: 20%;
    left: 15px;
    background: white;
    padding: 0 5px;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 10;
}

.form-control:focus + .placeholder-label,
.form-control:not(:placeholder-shown) + .placeholder-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #134489;
}

.checkbox-group {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 8px 8px 17px;
}

.checkbox-group .placeholder-label {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #134489;
    z-index: 10;
}

.radio-group {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 8px 8px 17px;
}

.radio-group .placeholder-label {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #134489;
    z-index: 10;
}
/* ----------------------------------------------------------------------- */


/* Card Block Margin
/* ----------------------------------------------------------------------- */
.block-top-margin {
    margin-top: 17px;
}

.block-bottom-margin {
    margin-bottom: 17px;
}
/* ----------------------------------------------------------------------- */


.vertical-center {
    align-items: center;
}

.text-right {
    text-align: right;
}

.unfollow-background {
    background-color: #fff0f5;
}

.word-wrap {
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
}

a.none-deco {
    text-decoration: none;
}

/* 선택 메뉴 색상 */
/* ----------------------------------------------------------------------- */
.vertical-nav-menu ul>li>a.mm-active {
    color: #fff;
    background: #134489;
    font-weight: bold;
}

.vertical-nav-menu ul>li>a:hover{
    color:#fff
}

.vertical-nav-menu li>a.mm-active {
    color: #fff;
    background: #134489;
    font-weight: bold;
}

.vertical-nav-menu li a:hover{
    color: #fff;
    background:#134489;
    text-decoration:none
}
/* ----------------------------------------------------------------------- */

a {
    color: #134489;
}

/* 메뉴 아이콘 색상 변경 */
.mm-active .metismenu-icon {
    color: white;
}

i.metismenu-icon {
    opacity: 1 !important;
}

/* Button Color */
/* ----------------------------------------------------------------------- */
.btn-main {
    color: white;
    background-color: #134489;
    border-color: #134489;
}

.btn-main:hover {
    color: white;
    background-color: #0f3a73;
    border-color: #0f3a73;
}

.btn-sub {
    color: white;
    background-color: #0096bd;
    border-color: #0096bd;
}

.btn-sub:hover {
    color: white;
    background-color: #007a99;
    border-color: #007a99;
}

.btn-gray {
    color: white;
    background-color: #6e7178;
    border-color: #6e7178;
}

.btn-gray:hover {
    color: white;
    background-color: #6e7178;
    border-color: #6e7178;
}

.btn-outline-white {
    color: white;
    border-color: white;
}

.btn-outline-white:hover {
    color:#134489;
    background-color:white;
    border-color:white
}

.btn-outline-main {
    color: #134489;
    border-color: #134489;
}

.btn-outline-main:hover {
    color:#fff;
    background-color:#134489;
    border-color:#134489
}

.btn-outline-sub {
    color: #0096bd;
    border-color: #0096bd;
}

.btn-outline-sub:hover {
    color:#fff;
    background-color:#0096bd;
    border-color:#0096bd
}

.btn-outline-dim {
    color: #6c757d;
    border-color: #c4c4c4;
}

.btn-outline-dim:hover {
    color: #6c757d;
    border-color: #c4c4c4;
    background-color: #eee;
}

.btn-main-round {
    color: white;
    background-color: #134489;
    border-color: #134489;
    border-radius: 30px;
}

.btn-main-round:hover {
    color: white;
    background-color: #134489;
    border-color: #134489;
    border-radius: 30px;
}

.btn-green {
    color: white;
    background-color: #0096bd;
    border-color: #0096bd;
}

.btn-green:hover {
    color: white;
    background-color: #0096bd;
    border-color: #0096bd;
}

.btn-white {
    color: #000;
    background-color: #fff;
    border-color: #C4C4C4;
}

.btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active, .show>.btn-white.dropdown-toggle {
    color: #fff;
    background-color: #134489;
    border-color: #C4C4C4;
}

.btn-white:hover {
    color: white;
    background-color: #134489;
    border-color: #134489;
}
/* ----------------------------------------------------------------------- */

/* table-heaer or footer Container */
/* ----------------------------------------------------------------------- */
.table-header-container {
    background: #f8f9fa; 
    border-bottom: #f2f3f3 solid 1px; 
    padding: 1rem;
}

.table-footer-container {
    background: #f8f9fa; 
    border-top: #f2f3f3 solid 1px; 
    border-radius: 0 0 10px 10px;
    padding: 1rem;
}
/* ----------------------------------------------------------------------- */

/* round progress shape */
/* ----------------------------------------------------------------------- */
.progress-bar-container {
    position:absolute; 
    width:100%; 
    height:100%; 
    padding:8% 5% 0% 5%; 
    background-color:rgba(0,0,0,0.5);
}

.progress-round-container > button {
    width: 33px;
    height: 33px;
    background-color: #f8f9fa;
    border: none;
}
/* ----------------------------------------------------------------------- */

/* Paging */
/* ----------------------------------------------------------------------- */
.page-item.active .page-link, .pagination .active.page-number .page-link {
    background-color: #134489;
    border-color: #134489;
}

.pagination li a {
    color: #134489;
}
/* ----------------------------------------------------------------------- */

/* Radio Control */
/* ----------------------------------------------------------------------- */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3498db;
    border-color: #3498db;
}
/* ----------------------------------------------------------------------- */

/* Scrollable Table */
/* ----------------------------------------------------------------------- */
.table-scrollable th, .table-scrollable td {
    white-space: nowrap;
}
.table-scrollable td pre {
    white-space: pre;
}
.table-scrollable td.pre-wrap {
    white-space: pre;
}
.table-scrollable td img {
    width: 150px;
}
.table-scrollable td input {
    width: auto;
}
.table-scrollable td textarea {
    width: auto;
}
/* ----------------------------------------------------------------------- */

/* Search Keyword Block */
/* ----------------------------------------------------------------------- */
.block {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 0px 5px 4px 5px;
    font-size: 16px;
    min-height: 47px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.block input {
    position: relative;
    display: inline-flex;
    margin: 5px 5px 2px 0px;
    padding: 1px 5px 0px 5px;
    height: 33px;
    line-height: 31px;
    outline: 0;
    border-width: 0 0 2px;
    border-color: #ced4da
}
.block input:focus {
    border-color: #3f6ad8
}
.block .item {
    position: relative;
    display: inline-flex;
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    margin: 5px 5px 2px 0px;
    padding: 0px 25px 0px 10px;
    overflow: hidden;
    height: 33px;
    line-height: 31px;
}
.block .item .btnclose {
    color: #444;
    position: absolute;
    font-size: 16px;
    right: 5px;
    top: 7px;
    cursor: pointer;
}
.block .item .btnclose:hover {
    opacity: 0.75;
}
/* ----------------------------------------------------------------------- */

/* Button for File Selection
/* ----------------------------------------------------------------------- */
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
/* ----------------------------------------------------------------------- */

/* Custom PopUp
/* ----------------------------------------------------------------------- */
.custom-popup {
    position: absolute;
    top: 135px;
    left: 293px;
    width: 500px;
    background: white;
    border: 1px solid #ced4da;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 15px;
    z-index: 1000;
}

.custom-popup .popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 17px 12px 17px;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    font-size: 1.25rem;
}

.custom-popup .popup-body {
    position: relative;
    flex: 1 1 auto;
}

.custom-popup .popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.poi-item {
    border-radius: 7px;
}

.poi-item .pe-7s-menu {
    cursor: move;
}
/* ----------------------------------------------------------------------- */

/* Chart
/* ----------------------------------------------------------------------- */
.chart-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.chart-container canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.chart-center-text {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
}
/* ----------------------------------------------------------------------- */


/* round progress shape */
/* ----------------------------------------------------------------------- */
.progress-bar-container {
    position:absolute; 
    width:100%; 
    height:100%; 
    padding:8% 5% 0% 5%; 
    background-color:rgba(0,0,0,0.5);
}

.progress-round-container-cover {
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.5);
}

.progress-round-container-cover > button {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: none;
}
/* ----------------------------------------------------------------------- */


/* POI Time Line 구성
/* ----------------------------------------------------------------------- */
.dispatch-main-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    padding: 0 30px 20px 30px;
}

.route-box-container {
    position: relative;
    margin-top: 90px;
    padding: 20px 20px 10px 20px;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 17px 17px;
}

.poi-container {
    position: absolute;
    top: -63px;
    display: flex;
    align-items: center;
    left: 0;
    right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 56px;
}

.route-title {
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
    align-items: center;
    width: 100%;
}

.route-title div {
    flex: 1;
    text-align: center;
}

.route-title div:first-child {
    text-align: left;
}

.route-title div:last-child {
    text-align: right;
}

.poi-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100px;
}

.poi-label-container {
    display: flex;
    align-items: center;
    height: 2.7em;
}

.poi-order {
    display: flex;
    flex-shrink: 0; 
    width: 23px;
    height: 23px;
    margin-right: 5px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background-color: #9396a0;
    color: #fff;
}

.poi-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poi-marker {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

.poi-done-time {
    height: 1.3em;
    width: 110px;
    margin-top: 3px;
}

.poi-line-container {
    position: relative;
    top: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 300px;
}

.poi-line-arrow {
    position: absolute;
    top: 15px;
    right: 2px;
}

.poi-line-dash {
    position: absolute;
    top: 25px;
    left: 0;
    width: calc(100% - 10px);
    height: 4px;
    background-image: url(assets/images/dash_line.svg);
}

.poi-line-done {
    position: absolute;
    top: 25px;
    left: 0;
    width: calc(100% - 10px);
    height: 4px;
    background-image: url(assets/images/done_line.png?ver=1.0.0);
}

.poi-line-run {
    position: absolute;
    top: 25px;
    left: 0;
    width: calc(100% - 10px);
    height: 4px;
    background-image: url(assets/images/run_line.png);
}

.car-location-done {
    height: 100px;
    color: darkgoldenrod;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
}

.car-location-info {
    width: 170px;
    height: 100px;
    color: darkgoldenrod;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
    top: -27px;
    text-align: center;
}

.bg-route-done {
    background-color: #CBEED4 !important;
}

.bg-poi-done {
    background-color: #10B439 !important;
}
/* ----------------------------------------------------------------------- */


/* 월 선택 Calendar */
/* ----------------------------------------------------------------------- */
.flatpickr-months {
    background: #fff;
    padding: 5px 0;
}

.flatpickr-current-month {
    font-size: 14px;
    padding: 5px 0;
}

.flatpickr-months .flatpickr-month {
    height: 24px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 5px;
    fill: #666;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: #333;
}

.flatpickr-current-month span.cur-month {
    font-weight: 500;
}

.flatpickr-month {
    background: transparent;
}

.month-button:hover {
    background: #f0f0f0;
}

.flatpickr-monthSelect-months {
    display: flex;
    flex-wrap: wrap;
	margin: 0;
}

.flatpickr-monthSelect-month {
    width: 70px;
    margin: 6px 16px 6px 16px;
    padding: 4px;
    cursor: pointer;
    font-size: 12px;
}
/* ----------------------------------------------------------------------- */


/* 통계 화면 구성
/* ----------------------------------------------------------------------- */
.stat-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.stat-left-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 200px;
    margin-right: 20px;
}

.stat-right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}

.stat-block {
    flex-grow: 1;
    margin: 0 7px;
    background-color: #f0f0f0;
    padding: 15px;
    text-align: center;
}
/* ----------------------------------------------------------------------- */

.rounded {
    border-radius: 6px !important;
}

/* Multi Selector
/* ----------------------------------------------------------------------- */
.drop {
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.drop.open {
    z-index: 100;
}
.drop.open .drop-options {
    z-index: 200;
    max-height: 160px;
}
.drop.open .drop-display {
    z-index: 200;
}
.drop select {
    display: none;
}
.drop .drop-display {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 0px 20px 4px 5px;
    width: 100%;
    background: #FFF;
    z-index: 1;
    margin: 0px;
    font-size: 16px;
    min-height: 47px;
}
.drop .drop-display:hover:after {
    opacity: 0.75;
}
.drop .drop-display:after {
    font-family: 'Material Icons';
    content: "\e5cf";
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 24px;
    color: #444;
}
.drop.open .drop-display:after {
    font-family: 'Material Icons';
    content: "\e5ce";
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 24px;
    color: #444;
}
.drop .drop-display .item {
    position: relative;
    display: inline-block;
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    margin: 5px 5px -4px 0px;
    padding: 0px 25px 0px 10px;
    overflow: hidden;
    height: 33px;
    line-height: 31px;
}
.drop .drop-display .item .btnclose {
    color: #444;
    position: absolute;
    font-size: 16px;
    right: 5px;
    top: 7px;
    cursor: pointer;
}
.drop .drop-display .item .btnclose:hover {
    opacity: 0.75;
}
.drop .drop-display .item.remove {
    -webkit-animation: removeSelected 0.1s, hide 1s infinite;
            animation: removeSelected 0.1s, hide 1s infinite;
    -webkit-animation-delay: 0s, 0.1s;
            animation-delay: 0s, 0.1s;
}
.drop .drop-display .item.add {
    -webkit-animation: addSelected 0.1s;
            animation: addSelected 0.1s;
}
.drop .drop-display .item.hide {
    display: none;
}
.drop .drop-options {
    background: #fafbfc;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: .25rem;
    margin-bottom: 2px;
    position: absolute;
    width: 100%;
    max-height: 0px;
    overflow-y: auto;
    transition: all 0.25s linear;
    z-index: 1;
}
.drop .drop-options a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    position: relative;
    max-height: 40px;
    transition: all 1s;
    overflow: hidden;
}
.drop .drop-options a:hover {
    background: #0090e2;
    cursor: pointer;
    color: #FFF;
}
.drop .drop-options a.remove {
    -webkit-animation: removeOption 0.2s;
            animation: removeOption 0.2s;
    max-height: 0px;
}
.drop .drop-options a.add {
    -webkit-animation: addOption 0.2s;
            animation: addOption 0.2s;
}
.drop .drop-options a.hide {
    display: none;
}

.edit-info {
    display: inline;
    max-width: 120px;
}

@-webkit-keyframes pop {
    from {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@keyframes pop {
    from {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@-webkit-keyframes removeOption {
    from {
        max-height: 40px;
    }
    to {
        max-height: 0px;
    }
}
@keyframes removeOption {
    from {
        max-height: 40px;
    }
    to {
        max-height: 0px;
    }
}
@-webkit-keyframes addOption {
    from {
        max-height: 0px;
    }
    to {
        max-height: 40px;
    }
}
@keyframes addOption {
    from {
        max-height: 0px;
    }
    to {
        max-height: 40px;
    }
}
@-webkit-keyframes removeSelected {
    from {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    to {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
}
@keyframes removeSelected {
    from {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    to {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
}
@-webkit-keyframes addSelected {
    from {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@keyframes addSelected {
    from {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@-webkit-keyframes hide {
    from, to {
        max-height: 0px;
        max-width: 0px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }
}
@keyframes hide {
    from, to {
        max-height: 0px;
        max-width: 0px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }
}  

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 900px;
    }
}

@media (min-width: 992px) {
    .modal-md {
        max-width: 700px;
    }
}
/* ----------------------------------------------------------------------- */