/* ##### BOOTSTRAP CHANGE ##### */
.container {max-width: 1340px; padding-left: 10px; padding-right: 10px;}
.container-fluid { padding-left: 10px; padding-right: 10px;}
.row {margin-left: -10px; margin-right: -10px;}
[class*='col-'] {padding-left: 10px; padding-right: 10px;}
.open > .dropdown-menu {display: block;}
.dropdown-menu {box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.5)}
.dropdown-item {padding: 7px 10px;}

/* #### TABLE #### */
.table {font-size: 14px;}
.table th {font-weight: 600;}
.table th.sorted {padding: 0;}
.table th.sorted a {display: block; padding: .70rem .5rem; padding-left: 20px; color: inherit;}
.table.table-sm th.sorted a {padding: .3rem; padding-left: 20px;}
.table th.sorted a:hover {text-decoration: none;}
.table th.sorted i {
    font-size: 13px;
    margin-right: 5px;
    margin-left: -15px;
}
.table td {vertical-align: middle; padding: .75rem .5rem;}
.table tr:last-child td {border-bottom: 1px solid #dee2e6;}
.table td a {font-weight: 600;}
.table thead th {vertical-align: middle; padding: .75rem .5rem; font-weight: 600;}
.table-sm td, .table-sm th, .table-sm thead th {padding: .3rem;}

.table input[type="checkbox"] {height: 20px; width: 20px; margin-top: 4px;}

/* #### breadcrumb #### */
.breadcrumb {background: #f8f9fb;}
.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Pro";
    content: '\f105'
}

/* #### commons #### */
.rounded {border-radius: 0.35rem !important;}

.border-2 {border-width: 2px !important;}
.border-3 {border-width: 3px !important;}

/* #### BTN #### */
.btn {max-width: 100%;}
.btn i:not(.fa-lg):not(.fa-xs):not(.fa-sm) {
    font-size: 1.2em;
    vertical-align: -.04em;
}
.btn[disabled] {cursor: not-allowed !important;}

/* #### nav-tabs #### */
.nav-tabs {
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    border-bottom: none;
    position: relative;
}
.nav-tabs::after {
    content: '';
    height: 1px;
    background: #dee2e6;
    width: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
}

/* ##### breadcrumb  ##### */
.breadcrumb {text-overflow: initial; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap;}

/* ##### alert  ##### */
.bx-alert-container.v-fixed {
    position: fixed;
    z-index: 99;
    right: 0;
    bottom: 50px;
}

.bx-alert-container.v-fixed .alert {
    animation: alertShow 1s, alertHide 1s 5s forwards;
    min-width: 250px;
    max-width: 500px;
    margin-bottom: 10px;
    font-size: 14px;
}
.bx-alert-container.v-fixed .alert.not-hide {
    animation: alertShow 1s;
}

.alert .i-btn-alert-hide {
    position: absolute;
    right: 5px;
    top: 1px;
    font-size: 12px;
    cursor: pointer;
    color: inherit;
}

@keyframes alertShow {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes alertHide {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }
}

.alert-link {word-wrap: break-word;}

/* ##### FORM ##### */
label.required:not(.error)::after {
    content: '*';
    color: var(--red);
    margin-left: 5px;
}

input.error:not([disabled]), textarea.error:not([disabled]), select.error {border-color: red !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);}
.valid:not([disabled]) {border-color: #36d100 !important;}

label.error {display: none; color: red; font-size: 13px; line-height: normal; font-weight: normal; margin: 0;}
label[generated="true"] {display: inline-block;}

.form-control::-webkit-input-placeholder {color: #afafaf;}
.form-control:-moz-placeholder {color: #999;}
.form-control::-moz-placeholder {color: #999;}
.form-control:-ms-input-placeholder {color: #999;}

textarea.form-control {height: 100px;}

.form-control:disabled, .form-control[readonly], .form-control.v-readonly, select.v-readonly + .btn-select {background-color: #eee; border-color: #ced4da; opacity: 1; cursor: not-allowed;}
select.v-readonly {pointer-events: none;}

/* .i-btn-clear */
.form-group .i-btn-clear {position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; width: 35px; font-size: 18px;}
.form-group .i-btn-clear {cursor: pointer;}

.badge {font-weight: normal; padding: 2px .6em 3px .6em}
table .badge, .dropdown-menu .badge {font-size: inherit;}

/* ##### TOOLTIP ##### */
.tooltip-inner {
    max-width: 600px;
    min-width: 100px;
}

.tooltip-wrapper {
    display: inline-block;
}

.tooltip-wrapper .btn[disabled] {
    pointer-events: none;
}

.tooltip-wrapper.disabled {
    cursor: not-allowed;
}

/* ##### OTHER ##### */
.el-5 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.row.row-20 {margin-left: -20px; margin-right: -20px;}
.row.row-20 > [class*='col'], .row.row-20 > [class*='el-'] {padding: 20px;}

.row.row-15 {margin-left: -15px; margin-right: -15px;}
.row.row-15 > [class*='col'], .row.row-15 > [class*='el-'] {padding: 15px;}

.row.row-10 {margin-left: -10px; margin-right: -10px;}
.row.row-10 > [class*='col'], .row.row-10 > [class*='el-'] {padding: 10px;}

.row.row-5 {margin-left: -5px; margin-right: -5px;}
.row.row-5 > [class*='col'], .row.row-5 > [class*='el-'] {padding: 5px;}

.column-4 {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
.column-3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.column-2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
.column-1 {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}

@media (min-width: 576px) {
    .el-sm-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row.row-sm-20 {margin-left: -20px; margin-right: -20px;}
    .row.row-sm-20 > [class*='col'], .row.row-sm-20 > [class*='el-'] {padding: 20px;}

    .row.row-sm-15 {margin-left: -15px; margin-right: -15px;}
    .row.row-sm-15 > [class*='col'], .row.row-sm-15 > [class*='el-'] {padding: 15px;}

    .row.row-sm-10 {margin-left: -10px; margin-right: -10px;}
    .row.row-sm-10 > [class*='col'], .row.row-sm-10 > [class*='el-'] {padding: 10px;}

    .row.row-sm-5 {margin-left: -5px; margin-right: -5px;}
    .row.row-sm-5 > [class*='col'], .row.row-sm-5 > [class*='el-'] {padding: 5px;}

    .column-sm-4 {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
    .column-sm-3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
    .column-sm-2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
    .column-sm-2 {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }
}

@media (min-width: 768px) {
    .el-md-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row.row-md-20 {margin-left: -20px; margin-right: -20px;}
    .row.row-md-20 > [class*='col'], .row.row-md-20 > [class*='el-'] {padding: 20px;}

    .row.row-md-15 {margin-left: -15px; margin-right: -15px;}
    .row.row-md-15 > [class*='col'], .row.row-md-15 > [class*='el-'] {padding: 15px;}

    .row.row-md-10 {margin-left: -10px; margin-right: -10px;}
    .row.row-md-10 > [class*='col'], .row.row-md-10 > [class*='el-'] {padding: 10px;}

    .row.row-md-5 {margin-left: -5px; margin-right: -5px;}
    .row.row-md-5 > [class*='col'], .row.row-md-5 > [class*='el-'] {padding: 5px;}

    .column-md-4 {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
    .column-md-3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
    .column-md-2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
    .column-md-1 {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }
}

@media (min-width: 992px) {
    .el-lg-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row.row-lg-20 {margin-left: -20px; margin-right: -20px;}
    .row.row-lg-20 > [class*='col'], .row.row-lg-20 > [class*='el-'] {padding: 20px;}

    .row.row-lg-15 {margin-left: -15px; margin-right: -15px;}
    .row.row-lg-15 > [class*='col'], .row.row-lg-15 > [class*='el-'] {padding: 15px;}

    .row.row-lg-10 {margin-left: -10px; margin-right: -10px;}
    .row.row-lg-10 > [class*='col'], .row.row-lg-10 > [class*='el-'] {padding: 10px;}

    .row.row-lg-5 {margin-left: -5px; margin-right: -5px;}
    .row.row-lg-5 > [class*='col'], .row.row-lg-5 > [class*='el-'] {padding: 5px;}

    .column-lg-4 {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
    .column-lg-3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
    .column-lg-2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
    .column-lg-1 {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }
}

@media (min-width: 1200px) {
    .el-xl-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row.row-xl-20 {margin-left: -20px; margin-right: -20px;}
    .row.row-xl-20 > [class*='col'], .row.row-xl-20 > [class*='el-'] {padding: 20px;}

    .row.row-xl-15 {margin-left: -15px; margin-right: -15px;}
    .row.row-xl-15 > [class*='col'], .row.row-xl-15 > [class*='el-'] {padding: 15px;}

    .row.row-xl-10 {margin-left: -10px; margin-right: -10px;}
    .row.row-xl-10 > [class*='col'], .row.row-xl-10 > [class*='el-'] {padding: 10px;}

    .row.row-xl-5 {margin-left: -5px; margin-right: -5px;}
    .row.row-xl-5 > [class*='col'], .row.row-xl-5 > [class*='el-'] {padding: 5px;}

    .column-xl-4 {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
    .column-xl-3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
    .column-xl-2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
    .column-xl-1 {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }
}