@import url('nanumgothic.css');

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

html, body, button, input, select, textarea {
    font-family: 'Nanum Gothic', '돋움', Dotum, Arial, sans-serif;
    font-weight: 400;
    font-size: small;
    color: #343a40;
}

.container {
    max-width: 1140px !important;
}

b, strong {
    font-weight: 700;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

.login-box {
    max-width: 30rem;
}

.ui-widget.ui-widget-content {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: small;
}

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

hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.nav-link {
    font-size: 1rem !important;
}

.dropdown-item {
    font-size: 1rem !important;
}

.table {
    border-top: 2px solid #333 !important;
}

    .table th, td {
        text-align: center;
        vertical-align: middle !important;
    }

    .table th {
        background-color: #dee2e6;
        color: #343a40;
        font-weight: 700;
    }

.table-bordered th {
    border: 1px solid #d4d5d6 !important;
}

label.col-form-label {
    font-weight: 700;
}

.form-group label {
    font-weight: 700;
}

.form-inline label {
    font-weight: 700;
}

.form-control[readonly] {
    background-color: #f8f9fa;
    opacity: 1;
}

    .form-control[readonly]:disabled {
        background-color: #e9ecef;
        opacity: 1;
    }

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

.text-muted {
    color: #dc3545 !important;
}

.invalid-feedback {
    font-size: 0.9rem !important;
}

a.link:link, a.link:visited, a.link:hover, a.link:active {
    text-decoration: none;
    color: #007bff;
}

a.link-none:link, a.link-none:visited, a.link-none:hover, a.link-none:active {
    text-decoration: none;
    color: #212529;
}

.bg-navy {
    background-color: #1f70a8;
}

.btn-navy {
    color: #fff;
    background-color: #1f70a8;
    border-color: #1f70a8;
}

.bg-gray {
    background-color: #dee2e6;
}

.bg-skyblue {
    background-color: #b3d7ff;
}

.btn-gray {
    color: #fff;
    background-color: #dee2e6;
    border-color: #dee2e6;
}

.text-white {
    color: #fff;
}

.btn-ssm {
    padding: .1rem .5rem;
    font-size: smaller;
    line-height: 1.5;
    border-radius: .2rem;
}

.btn-outline-navy {
    color: #1f70a8;
    background-color: transparent;
    background-image: none;
    border-color: #1f70a8;
}

.btn-fixed-bottom {
    background-color: #1f70a8;
    color: #fff;
    text-align: center;
    font-size: larger;
    padding: .8rem 0 .8rem 0;
}

.card-footer {
    background-color: #f7f7f9 !important;
}

a.btn-fixed-bottom:link, a.btn-fixed-bottom:visited, a.btn-fixed-bottom:hover, a.btn-fixed-bottom:active {
    text-decoration: none;
    color: #fff;
}

.hand {
    cursor: pointer;
}

.loading .modal-dialog {
    display: table;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 24px);
}

    .loading .modal-dialog .modal-content {
        background-color: transparent;
        border: none;
    }

.highlight {
    padding: .5rem 1rem;
    margin: 0;
    border: .2rem solid #f7f7f9;
    word-break: break-all;
    background-color: #fff;
}

.highlight-source {
    background-color: #f7f7f9;
    padding: 1rem;
    word-break: break-all;
}

    .highlight p, .highlight-source p {
        line-height: 1.8rem;
    }

.scroll-to-top {
    position: fixed;
    right: 15px;
    bottom: 3px;
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    color: white;
    background: rgba(52, 58, 64, 0.5);
    line-height: 45px;
}

    .scroll-to-top:focus, .scroll-to-top:hover {
        color: white;
    }

    .scroll-to-top:hover {
        background: #343a40;
    }

    .scroll-to-top i {
        font-weight: 800;
    }

.checkbox label, .radio label {
    margin-right: 10px;
    margin-left: 5px;
}


.btn i {
    font-size: 1.3rem;
    vertical-align: middle;
}

/* tree */
.list-group-item ul {
    margin-top: 10px;
    margin-right: -15px;
    margin-bottom: -10px;
}

.list-group-item li {
    padding: 10px 15px 10px 3em;
    border-top: 1px solid #ddd;
}

    .list-group-item li:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        margin-top: -11px;
        background: #ddd;
    }

/* menu */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 6px;
        top: .8em;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

    .material-icons.md-dark.md-inactive {
        color: rgba(0, 0, 0, 0.26);
    }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

    .material-icons.md-light.md-inactive {
        color: rgba(255, 255, 255, 0.3);
    }


/*
* POPUP
*/
.popup-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px;
    background-color: #343a40;
    color: #fff;
}

.popup-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.popup-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
}

.popup-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 15px;
    border-top: 1px solid #e9ecef;
}

    .popup-footer > :not(:first-child) {
        margin-left: .25rem;
    }

    .popup-footer > :not(:last-child) {
        margin-right: .25rem;
    }


.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.blockquote {
    font-size: 1.5rem !important;
}


.custom-file-label::after {
    display: none;
    height: 0;
    padding: 0;
    content: ''
}

.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 1rem;
    padding-bottom: 1.5rem;
    height: calc(1.5em + 1rem + 2px);
    font-size: 1.25rem;
}

    .custom-switch.custom-switch-md .custom-control-label::before {
        height: 1.5rem;
        width: calc(2rem + 0.75rem);
        border-radius: 3rem;
    }

    .custom-switch.custom-switch-md .custom-control-label::after {
        width: calc(1.5rem - 4px);
        height: calc(1.5rem - 4px);
        border-radius: calc(2rem - (1.5rem / 2));
    }

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

.custom-switch.custom-switch-sm.custom-control-label::before {
    top: 0.1rem;
}

.custom-switch.custom-switch-sm .custom-control-label::after {
    top: calc(0.1rem + 2px);
}

.custom-switch.custom-switch-sm .custom-control-label::before {
    top: 0.1rem
}

.custom-switch.custom-switch-sm .custom-control-label {
    font-size: 0.95rem;
}

.dropdown-input {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .dropdown-input input {
        width: 100%;
        padding-right: 30px;
    }

    .dropdown-input::after {
        content: "\25BC";
        position: absolute;
        top: 75%;
        right: 15px;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 16px;
        color: #495057;
    }

.auto_product ul, .auto_promotion ul {
    position: absolute;
    padding-left: 0px;
    width: 96%;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-height: 300px;
    overflow-y: scroll;
}

    .auto_product ul li, .auto_promotion ul li {
        padding: 8px;
        cursor: pointer;
        list-style-type: none;
    }

        .auto_product ul li:hover, .auto_promotion ul li:hover {
            background-color: #e9ecef;
        }

.copy-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

    .copy-icon:hover {
        color: #333;
    }     

.form-inline.form-inline-date-flex {
    flex-wrap: nowrap;
    column-gap: 5px;
}

    .form-inline.form-inline-date-flex input[type=text] {     
        width: 50%;
        max-width: 50%;
    }

.col-sm-1-2, .col-md-1-2, .col-lg-1-2, .col-xl-1-2,
.col-sm-1-5, .col-md-1-5, .col-lg-1-5, .col-xl-1-5,
.col-sm-2-5, .col-md-2-5, .col-lg-2-5, .col-xl-2-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-1-2 {
        -ms-flex: 0 0 10.416666%;
        flex: 0 0 10.416666%;
        max-width: 10.416666%;
    }

    .col-sm-1-5 {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-sm-2-5 {
        -ms-flex: 0 0 20.833333%;
        flex: 0 0 20.833333%;
        max-width: 20.833333%;
    }
}

@media (min-width: 768px) {
    .col-md-1-2 {
        -ms-flex: 0 0 10.416666%;
        flex: 0 0 10.416666%;
        max-width: 10.416666%;
    }

    .col-md-1-5 {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-md-2-5 {
        -ms-flex: 0 0 20.833333%;
        flex: 0 0 20.833333%;
        max-width: 20.833333%;
    }
}


@media (min-width: 992px) {
    .col-lg-1-2 {
        -ms-flex: 0 0 10.416666%;
        flex: 0 0 10.416666%;
        max-width: 10.416666%;
    }

    .col-lg-1-5 {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-lg-2-5 {
        -ms-flex: 0 0 20.833333%;
        flex: 0 0 20.833333%;
        max-width: 20.833333%;
    }
}

@media (min-width: 1200px) {
    .col-xl-1-2 {
        -ms-flex: 0 0 10.416666%;
        flex: 0 0 10.416666%;
        max-width: 10.416666%;
    }

    .col-xl-1-5 {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-xl-2-5 {
        -ms-flex: 0 0 20.833333%;
        flex: 0 0 20.833333%;
        max-width: 20.833333%;
    }
}