:root {
    --gutter-width: 16px;
    --outer-margin: 32px;
    --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
    --half-gutter-width: calc((var(--gutter-width) * 0.5));
    --xs-min: 0rem;
    --sm-min: 576px;
    --md-min: 768px;
    --lg-min: 992px;
    --xl-min: 1200px;
}

body {
    font-family: 'Kanit', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.row.padded {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: var(--gutter-compensation, -08px);
    margin-left: var(--gutter-compensation, -08px);
}

[class*="col-"].padded {
    box-sizing: border-box;
    padding-right: var(--half-gutter-width, 8px);
    padding-left: var(--half-gutter-width, 8px);
}

/*noinspection CssInvalidPropertyValue*/
* {
    word-break: break-word;
}

p {
    word-wrap: break-word;
}

.ui.selection.dropdown {
    min-width: initial !important;
}

.ui.multiple.dropdown > .label {
    word-break: break-all; /* fix multiple line */
}

.ui.multiple.dropdown > .dropdown.icon {
    display: none;
}

.ui.menu,
h1, h2, h3, h4, h5,
.ui.header {
    font-family: inherit;
}

/* SEMANTIC UI */
.ui.small.menu.pagination {
    font-size: .72857143rem;
}

.ui.form textarea {
    cursor: text;
}

/* END SEMANTIC UI */

.scroll {
    overflow-y: auto;
}

.breadcrumb a.section {
    color: #000 !important;
    font-weight: 100 !important;
}

.breadcrumb a.section:hover {
    color: #4183C4 !important;
    text-decoration: underline !important;
}

.breadcrumb .section.active {
    font-weight: 700 !important;
}

@media only screen and (min-width: 1200px) {
    .ui.tiny.modal {
        width: 520px;
        /*margin: 0 0 0 -220px;*/
    }
}

/*TABLE*/
table {
    /*table-layout: fixed;*/
    overflow: hidden;
}

/*noinspection CssInvalidPropertyValue*/
table td {
    white-space: initial !important;
    word-break: break-word;
}

.ui.table td.collapsing, .ui.table th.collapsing {
    white-space: nowrap !important;
}

.table.can.click tbody tr:hover,
.table.can.click .tbody .tr:hover {
    background: rgba(248, 248, 248, 0.7);
    cursor: pointer;
}

.ui.basic.table {
    background: #FFF;
}

.ui.basic.table .td {
    background: 0 0;
}

/* CUSTOM TABLE START HERE */
/*noinspection CssInvalidPropertyValue*/
.Table_root.ui.table {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    background: #FFF;
    margin: 1em 0;
    border: 1px solid rgba(34, 36, 38, .15);
    box-shadow: none;
    border-radius: .28571429rem;
    text-align: left;
    color: rgba(0, 0, 0, .87);
    white-space: initial;
    word-break: break-word;
}

.Table_root.ui.table .tbody,
.Table_root.ui.table .thead {
    border-color: inherit;
}

/*FIX TABLE NOLMAL*/
.ui.table .tr {
    display: table-row;
    color: #000;
}

.Table_root.ui.table .tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    color: #000;
}

.Table_root.ui.table .tbody .tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.Table_root.ui.table .thead .th {
    cursor: auto;
    color: rgba(0, 0, 0, .87);
    padding: 10px 12px;
    vertical-align: inherit;
    font-weight: 700;
    text-transform: none;
    border-left: none;
}

.Table_root.ui.table .th,
.Table_root.ui.table .td {
    display: inherit;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    flex-basis: 100%;
}

.Table_root.ui.table .th.row,
.Table_root.ui.table .td.row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.Table_root.ui.table .Pagination_root .th {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.Table_root .th .thumb_img img,
.Table_root .td .thumb_img img {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1rem;
}

.thumb-image img {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1rem;
}

.thumb-image.small img {
    min-width: 2em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    margin-right: 0.65rem;
}

/*.Table_root.ui.table .th:first-child,*/
/*.Table_root.ui.table .td:first-child {*/
/*padding: .92857143em .78571429em .92857143em 1.1em;*/
/*}*/

.Table_root.td-top-xs .th,
.Table_root.td-top-xs .td {
    justify-content: flex-start !important;
}

.Table_root a {
    color: inherit;
}

.Table_root a.link,
.link {
    color: #00769d;
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

.link:hover {
    text-decoration: underline;
}

.Table_root.ui.table .tr .hover-fade {
    transition: opacity 0.3s;
    opacity: 0;
}

.Table_root.ui.table .tr:hover .hover-fade {
    opacity: 1;
}

.ui.calendar .link {
    color: unset;
}

.ui.calendar .link:hover {
    text-decoration: unset;
}

/*noinspection CssInvalidPropertyValue*/
.ui.table .td {
    white-space: initial !important;
    word-break: break-word;
    padding: 18px 12px;
    display: table-cell;
    vertical-align: middle;
}

.ui.table .tr {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

table.ui.table.basic td,
table.ui.table.basic .td {
    padding: 18px 12px !important;
}

table.ui.table.basic .td.right.aligned {
    text-align: right;
}

table.ui.table.basic .td.center.aligned {
    text-align: center;
}

.ui.table .td, .ui.table .th {
    -webkit-transition: background .1s ease, color .1s ease;
    transition: background .1s ease, color .1s ease;
}

.ui.table .td.collapsing, .ui.table .th.collapsing {
    width: 1px;
    white-space: nowrap !important;
}

.ui.table .tr:first-child .td {
    border-top: none;
}

.ui.basic.table .th {
    background: 0 0;
    border-left: none;
}

.ui.table .thead .tr:first-child > .th:last-child {
    border-radius: 0 .28571429rem 0 0;
}

.ui.table .tfoot {
    cursor: auto;
    border-top: 1px solid rgba(34, 36, 38, .15);
    /*background: #F9FAFB;*/
    text-align: inherit;
    color: rgba(0, 0, 0, .87);
    padding: .78571429em;
    vertical-align: middle;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
}

.Table_root {
    position: relative;
    border: 1px solid rgb(226, 230, 232);
}

.col-xs-1 {
    -ms-flex-preferred-size: 6.25%;
    flex-basis: 6.25%;
    max-width: 6.25%;
}

.col-xs-1-5 {
    -ms-flex-preferred-size: 9.375%;
    flex-basis: 9.375%;
    max-width: 9.375%;
}

.col-xs-2 {
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%;
}

.col-xs-2-5 {
    -ms-flex-preferred-size: 15.625%;
    flex-basis: 15.625%;
    max-width: 15.625%;
}

.col-xs-3 {
    -ms-flex-preferred-size: 18.75%;
    flex-basis: 18.75%;
    max-width: 18.75%;
}

.col-xs-3-5 {
    -ms-flex-preferred-size: 21.875%;
    flex-basis: 21.875%;
    max-width: 21.875%;
}

.col-xs-4 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}

.col-xs-4-5 {
    -ms-flex-preferred-size: 28.125%;
    flex-basis: 28.125%;
    max-width: 28.125%;
}

.col-xs-5 {
    -ms-flex-preferred-size: 31.25%;
    flex-basis: 31.25%;
    max-width: 31.25%;
}

.col-xs-5-3 {
    -ms-flex-preferred-size: 33.333333333%;
    flex-basis: 33.333333333%;
    max-width: 33.333333333%;
}

.col-xs-5-5 {
    -ms-flex-preferred-size: 37.5%;
    flex-basis: 37.5%;
    max-width: 37.5%;
}

.col-xs-6 {
    -ms-flex-preferred-size: 37.5%;
    flex-basis: 37.5%;
    max-width: 37.5%;
}

.col-xs-6-5 {
    -ms-flex-preferred-size: 40.625%;
    flex-basis: 40.625%;
    max-width: 40.625%;
}

.col-xs-7 {
    -ms-flex-preferred-size: 43.75%;
    flex-basis: 43.75%;
    max-width: 43.75%;
}

.col-xs-7-5 {
    -ms-flex-preferred-size: 46.875%;
    flex-basis: 46.875%;
    max-width: 46.875%;
}

.col-xs-8 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}

.col-xs-8-5 {
    -ms-flex-preferred-size: 53.125%;
    flex-basis: 53.125%;
    max-width: 53.125%;
}

.col-xs-9 {
    -ms-flex-preferred-size: 56.25%;
    flex-basis: 56.25%;
    max-width: 56.25%;
}

.col-xs-9-5 {
    -ms-flex-preferred-size: 59.375%;
    flex-basis: 59.375%;
    max-width: 59.375%;
}

.col-xs-10 {
    -ms-flex-preferred-size: 62.5%;
    flex-basis: 62.5%;
    max-width: 62.5%;
}

.col-xs-10-5 {
    -ms-flex-preferred-size: 65.625%;
    flex-basis: 65.625%;
    max-width: 65.625%;
}

.col-xs-11 {
    -ms-flex-preferred-size: 68.75%;
    flex-basis: 68.75%;
    max-width: 68.75%;
}

.col-xs-11-5 {
    -ms-flex-preferred-size: 71.875%;
    flex-basis: 71.875%;
    max-width: 71.875%;
}

.col-xs-12 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}

.col-xs-12-5 {
    -ms-flex-preferred-size: 78.125%;
    flex-basis: 78.125%;
    max-width: 78.125%;
}

.col-xs-13 {
    -ms-flex-preferred-size: 81.25%;
    flex-basis: 81.25%;
    max-width: 81.25%;
}

.col-xs-13-5 {
    -ms-flex-preferred-size: 84.375%;
    flex-basis: 84.375%;
    max-width: 84.375%;
}

.col-xs-14 {
    -ms-flex-preferred-size: 87.5%;
    flex-basis: 87.5%;
    max-width: 87.5%;
}

.col-xs-14-5 {
    -ms-flex-preferred-size: 90.625%;
    flex-basis: 90.625%;
    max-width: 90.625%;
}

.col-xs-15 {
    -ms-flex-preferred-size: 93.75%;
    flex-basis: 93.75%;
    max-width: 93.75%;
}

.col-xs-15-5 {
    -ms-flex-preferred-size: 96.875%;
    flex-basis: 96.875%;
    max-width: 96.875%;
}

.col-xs-16 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.row.column {
    padding: 0;
}

.row[class*="column"] > .column {
    width: 100%;
    box-sizing: border-box;
    padding-right: var(--half-gutter-width, 8px);
    padding-left: var(--half-gutter-width, 8px);
}

.row[class*="column"] > .column.fluid {
    width: auto;
}

@media only screen and (min-width: 992px) {
    /* computer */
    .row[class*="seven column computer"] > .column {
        width: 14.28571428571429%;
    }

    .row[class*="six column computer"] > .column {
        width: 16.666666666666667%;
    }

    .row[class*="five column computer"] > .column {
        width: 20%;
    }

    .row[class*="four column computer"] > .column {
        width: 25%;
    }

    .row[class*="three column computer"] > .column {
        width: 33.333333333333333%;
    }

    .row[class*="two column computer"] > .column {
        width: 50%;
    }

    .row[class*="one column computer"] > .column {
        width: 100%;
    }

    .row[class*="five column computer"] > .column.col-lg-three {
        flex-basis: 60%;
        max-width: 60%;
    }

    .col-lg-0-5 {
        flex-basis: 3.125%;
        max-width: 3.125%;
    }

    .col-lg-1 {
        flex-basis: 6.25%;
        max-width: 6.25%;
    }

    .col-lg-1-5 {
        flex-basis: 9.375%;
        max-width: 9.375%;
    }

    .col-lg-2 {
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    .col-lg-2-5 {
        flex-basis: 15.625%;
        max-width: 15.625%;
    }

    .col-lg-3 {
        flex-basis: 18.75%;
        max-width: 18.75%;
    }

    .col-lg-3-5 {
        flex-basis: 21.875%;
        max-width: 21.875%;
    }

    .col-lg-4 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-lg-4-5 {
        flex-basis: 28.125%;
        max-width: 28.125%;
    }

    .col-lg-5 {
        flex-basis: 31.25%;
        max-width: 31.25%;
    }

    .col-lg-5-3 {
        flex-basis: 33.333333333%;
        max-width: 33.333333333%;
    }

    .col-lg-5-5 {
        flex-basis: 37.5%;
        max-width: 37.5%;
    }

    .col-lg-6 {
        flex-basis: 37.5%;
        max-width: 37.5%;
    }

    .col-lg-6-5 {
        flex-basis: 40.625%;
        max-width: 40.625%;
    }

    .col-lg-7 {
        flex-basis: 43.75%;
        max-width: 43.75%;
    }

    .col-lg-7-5 {
        flex-basis: 46.875%;
        max-width: 46.875%;
    }

    .col-lg-8 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-lg-8-5 {
        flex-basis: 53.125%;
        max-width: 53.125%;
    }

    .col-lg-9 {
        flex-basis: 56.25%;
        max-width: 56.25%;
    }

    .col-lg-9-5 {
        flex-basis: 59.375%;
        max-width: 59.375%;
    }

    .col-lg-10 {
        flex-basis: 62.5%;
        max-width: 62.5%;
    }

    .col-lg-10-5 {
        flex-basis: 65.625%;
        max-width: 65.625%;
    }

    .col-lg-11 {
        flex-basis: 68.75%;
        max-width: 68.75%;
    }

    .col-lg-11-5 {
        flex-basis: 71.875%;
        max-width: 71.875%;
    }

    .col-lg-12 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-lg-12-5 {
        flex-basis: 78.125%;
        max-width: 78.125%;
    }

    .col-lg-13 {
        flex-basis: 81.25%;
        max-width: 81.25%;
    }

    .col-lg-13-5 {
        flex-basis: 84.375%;
        max-width: 84.375%;
    }

    .col-lg-14 {
        flex-basis: 87.5%;
        max-width: 87.5%;
    }

    .col-lg-14-5 {
        flex-basis: 90.625%;
        max-width: 90.625%;
    }

    .col-lg-15 {
        flex-basis: 93.75%;
        max-width: 93.75%;
    }

    .col-lg-15-5 {
        flex-basis: 96.875%;
        max-width: 96.875%;
    }

    .col-lg-16 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.Table_root .span1 {
    width: 6.25%;
    flex-basis: 6.25% !important;
}

.Table_root .span1.half {
    width: 9.375%;
    flex-basis: 9.375% !important;
}

.Table_root .span2 {
    width: 12.5%;
    flex-basis: 12.5% !important;
}

.Table_root .span2.half {
    width: 15.625%;
    flex-basis: 15.625% !important;
}

.Table_root .span3 {
    width: 18.75%;
    flex-basis: 18.75% !important;
}

.Table_root .span3.half {
    width: 21.875%;
    flex-basis: 21.875% !important;
}

.Table_root .span4 {
    width: 25%;
    flex-basis: 25% !important;
}

.Table_root .span4.half {
    width: 28.125%;
    flex-basis: 28.125% !important;
}

.Table_root .span5 {
    width: 31.25%;
    flex-basis: 31.25% !important;
}

.Table_root .span5.half {
    width: 34.375%;
    flex-basis: 34.375% !important;
}

.Table_root .span6 {
    width: 37.5%;
    flex-basis: 37.5% !important;
}

.Table_root .span6.half {
    width: 40.625%;
    flex-basis: 40.625% !important;
}

.Table_root .span7 {
    width: 43.75%;
    flex-basis: 43.75% !important;
}

.Table_root .span7.half {
    width: 46.875%;
    flex-basis: 46.875% !important;
}

.Table_root .span8 {
    width: 50%;
    flex-basis: 50% !important;
}

.Table_root .span8.half {
    width: 53.125%;
    flex-basis: 53.125% !important;
}

.Table_root .span9 {
    width: 56.25%;
    flex-basis: 56.25% !important;
}

.Table_root .span9.half {
    width: 59.375%;
    flex-basis: 59.375% !important;
}

.Table_root .span10 {
    width: 62.5%;
    flex-basis: 62.5% !important;
}

.Table_root .span10.half {
    width: 65.625%;
    flex-basis: 65.625% !important;
}

.Table_root .span11 {
    width: 68.75%;
    flex-basis: 68.75% !important;
}

.Table_root .span11.half {
    width: 71.875%;
    flex-basis: 71.875% !important;
}

.Table_root .span12 {
    width: 75%;
    flex-basis: 75% !important;
}

.Table_root .span12.half {
    width: 78.125%;
    flex-basis: 78.125% !important;
}

.Table_root .span13 {
    width: 81.25%;
    flex-basis: 81.25% !important;
}

.Table_root .span13.half {
    width: 84.375%;
    flex-basis: 84.375% !important;
}

.Table_root .span14 {
    width: 87.5%;
    flex-basis: 87.5% !important;
}

.Table_root .span14.half {
    width: 90.625%;
    flex-basis: 90.625% !important;
}

.Table_root .span15 {
    width: 93.75%;
    flex-basis: 93.75% !important;
}

.Table_root .span15.half {
    width: 96.875%;
    flex-basis: 96.875% !important;
}

.Table_root .span16 {
    width: 100%;
    flex-basis: 100% !important;
}

.Table_loader {
    position: absolute;
    bottom: 22%;
    left: 50%;
    display: none;
}

.Table_root.loading {
    min-height: 120px;
}

.Table_root.loading .Table_loader {
    display: block;
}

.Table_root.loading .tbody {
    display: none;
}

@media (max-width: 767px) {
    /*Mobile*/
}

@media (max-width: 991px) {
    /*Mobile & Tablet*/
    .ui.table .thead .th,
    .ui.table .td {
        display: block;
        border-bottom: 0;
        padding-bottom: 0;
        width: 100% !important; /* responsive */
    }

    .Table_root.ui.table .tr {
        display: block;
        position: relative;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .ui.table .td {
        padding: 0.5em 12px;
        width: 100%;
    }

    .ui.table .tr .td {
        border: 0;
    }

    /*.ui.table .thead .th:last-child {*/
    /*padding-bottom: 1em;*/
    /*border-bottom: 1px solid rgba(34, 36, 38, .1);*/
    /*}*/
    /*.ui.table .thead .tr:last-child {*/
    /*padding-bottom: 1em;*/
    /*border-bottom: 1px solid rgba(34, 36, 38, .1);*/
    /*}*/
}

@media (min-width: 768px) and (max-width: 991px) {
    /*Tablet*/
}

@media (min-width: 992px) and (max-width: 1200px) {
    /*Small Monitor*/
}

@media (min-width: 1200px) {
    /*Large Monitor*/
}

/*END TABLE*/

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex.row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.row:not(.flex) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex.row[class*="center align"] {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex.row[class*="left content align"] {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.flex.row[class*="right content align"] {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.flex.wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex [class*="right floated"] {
    margin-left: auto !important;
}

.start-xs {
    justify-content: flex-start !important;
    text-align: start !important;
}

.center-xs {
    justify-content: center !important;
    text-align: center !important;
}

.end-xs {
    justify-content: flex-end !important;
    text-align: end !important;
}

.top-xs {
    align-items: flex-start !important;;
}

.middle-xs {
    align-items: center !important;
}

.bottom-xs {
    align-items: flex-end !important;
}

.around-xs {
    justify-content: space-around !important;
}

.between-xs {
    justify-content: space-between !important;
}

.cursor {
    cursor: pointer;
}

.MessageTop {
    position: fixed;
    z-index: 10000;
    top: 2%;
}

.MessageTop .message {
    box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 2px 4px 0 rgba(34, 36, 38, .12), 0 2px 10px 0 rgba(34, 36, 38, .08) !important;
}

.UploadList_textUploadInfo {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.47);
    padding: 0.1em;
    font-size: 0.8em;
    width: 100%;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    border-bottom-left-radius: .28571429rem;
    border-bottom-right-radius: .28571429rem;
    display: none;
}

.UploadList_root.hover .UploadList_textUploadInfo {
    display: block;
}

.UploadList_galleryRoot {
    position: relative;
    overflow: hidden;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.UploadList_removeImageButton {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    display: none;
    cursor: pointer;
}

.UploadList_removeImageButton.active {
    display: block;
}

.Upload_fileRoot {
    margin-bottom: 5px;
    /*display: table;*/
}

.Upload_fileList {
    margin-bottom: 5px;
    margin-right: 5px;
    cursor: pointer;
}

.Upload_fileList.file {
    position: relative;
    background: #f8f8f8;
    word-break: break-all;
    display: inline-block;
    border: 1px solid #e8e8e8;
    border-radius: 0.3rem;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}

.Upload_fileList.file:hover {
    background: #eaeaea;
}

.Upload_fileList .icon {
    opacity: 0.5;
    cursor: pointer;
    margin: 0;
}

.Upload_fileList.file .icon.close {
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0.3em;*/
}

.Upload_fileList.file .icon.close:hover {
    opacity: 1;
}

.Upload_fileList .control {
    position: absolute;
    right: 0.5rem;
    bottom: 6px;
    font-size: 1.3rem;
    line-height: 1;
    background: #ffffffa3;
}

.Upload_fileList .control > span {
    padding: 0.2rem;
}

.Upload_fileList.image {
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 0.4rem;
    border: 1px solid #e8e8e8;
    border-radius: 0.3rem;
    padding: 0.3rem;
    background: #f1f1f1;
}

.Upload_fileList.image img {
    width: 100%;
    height: auto;
}

.Upload_fileList.image .icon.close {
    /*position: absolute;*/
    /*right: -1px;*/
    /*top: 2px;*/
    opacity: 0.5;
    cursor: pointer;
}

.Upload_fileList .icon.trash {
    /*position: absolute;*/
    /*right: 0.5rem;*/
    /*bottom: 6px;*/
    opacity: 0.6;
    cursor: pointer;
    margin: 0;
    /*display: none;*/
    /*font-size: 1.3rem;*/
    /*background: rgba(255, 255, 255, 0.85);*/
}

.Upload_fileList .icon.trash:hover,
.Upload_fileList .icon.download:hover {
    opacity: 1;
}

.Upload_fileList .icon.download {
    /*position: absolute;*/
    /*bottom: 6px;*/
    /*right: 3rem;*/
    opacity: 0.6;
    cursor: pointer;
    /*display: none;*/
    /*font-size: 1.3rem;*/
    /*background: rgba(255, 255, 255, 0.85);*/
}

.Upload_fileList:hover .icon.trash,
.Upload_fileList:hover .icon.download {
    display: block;
}

.Upload_list {
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.Upload_list img {
    width: 100%;
    max-width: 250px;
    height: auto;
}

.Upload_list > div {
    position: relative;
}

.Upload_list .removeButton {
    position: absolute;
    right: 3px;
    top: 3px;
    cursor: pointer;
    background: #181818;
    padding: 0 1px 1px 1px;
    color: #FFF;
    border-radius: 3px;
}

.Upload_list .removeButton .icon {
    margin: 0;
}

.ui.form .field input:read-only,
.ui.form .field input:disabled {
    opacity: 1;
    background: #f5f5f5 !important;
}

.ui.button.floating.disabled {
    background: #f6f6f6 !important;
    border: 1px solid #dddddd;
    color: #ababab !important;
    opacity: 1 !important;
}

.background-gray {
    background: #f4f4f4;
}

.box {
    color: #333;
    text-decoration: none;
    display: block;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
    border-radius: 4px;
    padding: 1rem;
}

.ui.label.hover:hover {
    background-color: #d1d1d1;
}

p {
    line-height: 1.75;
    margin: 0;
}

.ui.modal > .close {
    top: .95rem;
    right: .8rem;
    color: #000;
}

.menu-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-align-items: flex-end;
    -ms-flex-align: center;
    align-items: flex-end;
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 0 1rem;
}

.menu-bar.size-x2 .tab-button {
    font-size: 1.4rem !important;
    padding: 0.3rem 1.3rem !important;
}

.menu-bar .tab-button {
    transition-property: line-height, background-color, border-left-color, color;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-left: 1px solid #c4ced1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    line-height: 32px;
    color: #393c40;
    white-space: nowrap;
    background: #e2e6e8;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    cursor: pointer;
    padding: 0 15px;
}

.menu-bar .tab-button.active {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #FFF;
    border-left: none;
    line-height: 35px;
}

.menu-bar .tab-button:last-child {
    border-top-right-radius: 3px;
}

.menu-bar .tab-button:not(.active):first-child {
    border-left-color: rgba(255, 255, 255, 0);
    border-top-left-radius: 3px;
}

.menu-bar .tab-button:not(.active):hover {
    background-color: #c4ced1;
}

.menu-bar .tab-button.active + .tab-button {
    border-left-color: #e2e6e8;
}

/* Chrome, Safari, Edge, Opera */
.Pagination_root input::-webkit-outer-spin-button,
.Pagination_root input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.Pagination_root input[type=number],
.Table_root .jump-to-page-input {
    -moz-appearance: textfield;
}

.Table_root .jump-to-page-input::-webkit-outer-spin-button,
.Table_root .jump-to-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.Pagination_root .total-item {
    position: absolute;
    top: 0.5rem;
    left: 0;
}

.Table_root .jump-to-page {
    position: absolute;
    top: 0.3rem;
    right: 0;
}

.Table_root .jump-to-page-input {
    border: 0;
    width: 3rem;
    text-align: right;
    line-height: 1;
    font-weight: bold;
    font-family: 'Kanit', sans-serif;
    padding: 0;
}

@media (max-width: 767px) {
    /*Mobile*/
}

@media (max-width: 991px) {
    /*Mobile & Tablet*/
    #Search_root {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /*Tablet*/
}

@media (min-width: 992px) and (max-width: 1200px) {
    /*Small Monitor*/
}

@media (min-width: 1200px) {
    /*Large Monitor */
}