@CHARSET "UTF-8";

.setting_title {
    font-size: 22px;
    font-weight: bold;
    color: #787878;
}

.page_scroll {
    overflow-y: auto;
}

.setting_main_block {
    height: calc(100% - 60px); /* top_bar, divider_line */
    padding: 30px 20px 30px 30px;
}

.setting_main_block .side_menu {
    width: 190px;
    border-radius: 5px;
}

.setting_main_block .top_line {
    margin-top: 25px;
}

.setting_main_block .side_menu_item {
    padding-left: 16px;
    padding-right: 16px;
}

.setting_main_block .main_container {
    width: calc(100% - 220px);/*-190-30*/
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    border: solid 1px rgba(110, 110, 110, 0.6);
    margin: 0 0 0 30px;
    padding: 45px 0 0 0;
    align-items: center;
    border-radius: 5px;
}

.setting_block {
    padding-bottom: 35px;
    margin-bottom: 25px;
    border-bottom: 1px solid #565656;
}

.setting_block.last_block {
    border-bottom: none;
}

.text_lg_top {
    margin-bottom: 24px;
    font-size: 21px;
    color: #ffffff;
}

.text_lg {
    line-height: 50px;
    margin-bottom: 15px;
    font-size: 21px;
    color: #ffffff;
}

.text_sm {
    line-height: 30px;
    font-size: 16px;
    color: #ffffff;
}

.m_top_md {
    margin-top: 20px;
}

.m_top_sm {
    margin-top: 10px;
}

.input_field {
    width: 100%;
    height: 50px;
    padding-left: 15px;
    border-radius: 5px;
    border: solid 1px #565656;
    background-color: #0e0e0e;
    font-size: 16px;
    color: #ffffff;
}

.setting_item_div {
    margin-bottom: 20px;
}

.item_title {
    color: #b4b4b4;
}

.help_tabs {
    background: none;
    height: 58px;
    border-bottom: 1px solid #696969;
}

.help_tabs .nav-link {
    width: 33%;
    max-width: 130px;
    padding: 0 4px;
    background: none;
    border: 0;
    font-size: 18px;
    color: #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    border-radius: 0px;
    border-bottom: 4px solid transparent;
}

.help_tabs .nav-link:hover {
    color: #ffffff;
    border-bottom: 4px solid #ffffff;
}

.help_tabs .nav-link:active {
    color: #44b3ff;
    border-bottom: 4px solid #0599ff;
}

.help_tabs .nav-link:disabled {
    color: #969696;
    border-bottom: 4px solid transparent;
}

.help_tabs .nav-link.active {
    background: none;
    color: #44b3ff;
    border-bottom: 4px solid #0599ff;
}

.tab_divider {
    width: 1px;
    background-color: #565656;
    margin-top: 11px;
    margin-bottom: 9px;
}

.function_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0px 15px;
    border-radius: 5px;
    border: solid 1px #565656;
    background-color: #0e0e0e;
}

.card-body.help_container {
    overflow-y: auto;
    height: calc(100vh - 282px);
}

.setting_outer_div {
    min-width: 350px;
}

.setting_outer_div_full {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 29px;
}

.default_modal_field_error {
    margin-left: 15px;
    width: 49%;
    font-size: 14px;
    color: #ff4b32;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.title_standalone {
    margin-top: 63px;
    margin-bottom: 25px;
    font-size: 21px;
    color: #ffffff;
}

.margin_v_auto {
    margin-top: auto;
    margin-bottom: auto;
}

.guide {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.guide .card {
    max-width: 730px;
    border: none;
    padding: 0;
}

.guide_text {
    font-size: 20px;
    color: #ffffff;
    padding-top: 10px;
}

.guide_img {
    width: 216px;
    height: 216px;
}

.top_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.date_range {
    min-width: 230px;
    width: 249px;
    height: 40px;
    padding: 0 10px;
    border: solid 1px #565656;
    background-color: #0e0e0e;
    font-size: 16px;
    color: #ffffff;
    outline: unset;
}

.setting_block_full {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.search_detail_block {
    justify-content: space-between;
    flex-wrap: nowrap;
    min-width: 190px;
    width: 280px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #747474;
    background-color: #1a1a1a;
}

.search_detail {
    flex-grow: 1;
    min-width: 100px;
    border: none;
    background: none;
    font-size: 14px;
    color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
}

.search_detail:focus {
    outline: none;
    box-shadow: none;
}

input.search_detail::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #808080;
    opacity: 1; /* Firefox */
}

input.search_detail:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #808080;
}

input.search_detail::-ms-input-placeholder { /* Microsoft Edge */
    color: #808080;
}

.search_filter_dropdown {
    display: flex;
    justify-content: end;
}

.search_filter_btn {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    background-image: url("../image/filter_normal.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.search_filter_btn:hover {
    background-image: url("../image/filter_hover.svg");
}

.search_filter_btn:active {
    background-image: url("../image/filter_hover.svg");
}

.search_filter_btn::after {
    display: none !important;
}

.search_filter_content {
    width: 280px;
    border-radius: 5px;
    border: solid 1px #004b7d;
    background-color: #0e0e0e;
}

.search_filter_content {
    inset: auto !important;
}

.search_filter_content .dropdown_title {
    color: #878787;
    font-size: 16px;
    margin-left: 5px;
}

.search_filter_content hr {
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
}

.search_filter_content .form-check-input {
    margin-left: 5px;
}

.search_filter_content .form-check-label {
    padding-left: 5px;
    color: #ffffff;
}

.filter_each_div:hover {
    background-color: #0599ff;
}

.table_div {
    width: 1590px;
}

.table_column {
    height: 50px;
    margin-bottom: 1px;
    background-color: #1e1e1e;
    font-size: 16px;
    text-align: left;
    color: #878787;
}

.column_expand {
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    display: none;
}

.expand_btn {
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: none;
    background-image: url("../image/arrow_menu2.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.expand_btn:hover {
    background-image: url("../image/arrow_menu2_hover.svg");
}

.expand_btn:active {
    background-image: url("../image/arrow_menu2_pressed.svg");
}

.expand_btn:disabled {
    background-image: url("../image/arrow_menu2_disabled.svg");
    opacity: 0.5;
}

.expand_btn::after {
    display: none;
}

.expand_btn.ext {
    background-image: url("../image/arrow_menu.svg");
}

.expand_btn.ext:hover {
    background-image: url("../image/arrow_menu_hover.svg");
}

.expand_btn.ext:active {
    background-image: url("../image/arrow_menu_pressed.svg");
}

.expand_btn.ext:disabled {
    background-image: url("../image/arrow_menu_disabled.svg");
}

.expand_btn.ext::after {
    display: none;
}

.column_time {
    min-width: 150px;
    width: 14%;
    margin-left: 20px;
}

.column_event {
    min-width: 150px;
    width: 24%;
}

.column_author {
    min-width: 150px;
    width: 9%;
}

.column_project {
    min-width: 150px;
    width: 28%;
}

.column_device {
    min-width: 150px;
    width: 25%;
}

.sort_icon {
    width: 12px;
    padding-left: 4px;
    content: url("../image/sort_default.svg");
}

.sort_icon.asc {
    content: url("../image/sort_ascending.svg");
}

.sort_icon.des {
    content: url("../image/sort_descending.svg");
}

.list_content {
    overflow-y: auto;
    height: calc(100vh - 357px);
}

.table_row {
    min-height: 74px;
    max-height: 74px;
    margin-bottom: 1px;
    font-size: 16px;
    text-align: left;
    color: #ffffff;
    border-bottom: 1px solid #000000;
}

.table_row:hover {
    background-color: #004b7d;
}

.column_first,
.column {
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 100%;
    padding-right: 10px;
}

.table_row_ext {
    display: none;
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000000;
}

.table_row_ext:hover {
    background-color:#004b7d;
}

.table_row_ext .custom_row {
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
    color: #ffffff;
}

/* below different resolution */
@media (max-width: 1280px) {
    .table_div {
        width: 1060px;
    }
}

@media (max-width: 768px) {
    .setting_title {
        color: #ffffff;
    }

    .setting_main_block {
        padding: 25px 20px;
    }

    .setting_main_block .top_line {
        margin-top: 0px;
    }

    .setting_main_block .main_container {
        width: 100%;
        margin: 0;
        padding: 20px 0 0 0;
    }

    .setting_outer_div {
        width: 100%;
        padding: 0 19px;
        min-width: unset;
    }

    .setting_outer_div_full {
        padding: 0 19px;
    }

    .card-body.help_container {
        height: calc(100vh - 247px);
    }

    .title_standalone {
        margin-top: 33px;
    }

    .top_area {
        flex-direction: column;
        justify-content: unset;
        margin-bottom: 24px;
    }

    .date_range_block {
        width: 100%;
    }

    .date_range {
        width: 100%;
    }

    .search_detail_block {
        width: 100%;
        margin-top: 15px;
    }

    .table_div {
        width: unset;
    }

    .column_expand {
        display: block;
        width: 14px;
    }

    .column_collapsed {
        display: none;
    }

    .list_content {
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100%;
    }

    .column_merged {
        flex-grow: 1;
    }

    .table_row_ext {
        display: block;
    }
}

@media (max-width: 370px) {
    .narrow_style_col {
        display: flex;
        flex-direction: column;
    }

    .narrow_style_col > * {
        margin-bottom: 20px;
    }

    .narrow_style_col > *:last-child {
        margin-bottom: 0px;
    }
}