body,
.ui {

    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400 !important;
}

.ui.main.container {
    padding-top: 60px;
    padding-left: 20px;
    width: 90vw !important;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul > *:not(.first, :first-child) {
    margin-top: 0.5em;
}

ul * .first,
ul * :first-child {
    margin-top: 0;
}

#top-menu {
    height: 40px !important;
}

#svr-dropdown {
    width: 350px !important;
    border: 0;
    padding-top: 1em;
}

.querying {

    background: transparent;
}

.hgrid {

    display: flex; 
    flex-direction: row;
}

.content,
.panel,
.vgrid {
    display: flex; 
    flex-direction: column;
}

.sub-in-grid {

    flex-shrink: 0;
}

.main-in-grid {
    flex-grow: 1;
}

.sep {
    margin-left: 10px;
}

.connected {
    color: #a7bd0d !important;
}

.fheader:not(.sp) {
    width: 15vw !important;
    text-align: center;
    font-weight: 400 !important;
}

.input:not(:has(.dropdown)) {
    width: 30vw !important;
}

.ui.selection.dropdown {
    min-width: 12em;
}

.input.sp > input {
    width: 80px;
}

.input.middle {
    width: 45vw !important;
}

.input.long {
    width: 60vw !important;
}

.dropdown.fluid,
.input.fluid {
    width: 100% !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number],
.number {
    text-align: right !important;
}

.content > *:not(.first, :first-child),
.panel > *:not(.first, :first-child) {
    margin-top: 1em;
}

.content * .first,
.content * :first-child,
.panel * .first,
.panel * :first-child {
    margin-top: 0;
}

.is-min {
    border-color: #f26202 !important;
}

.is-max {
    border-color: #a7bd0d !important;
}

.ui.accordion > .title > .header,
.ui.accordion > div > .title > .header {
    padding: 0.6em;
    border-radius: 5px;
}

.ch-main {
    color: #717D7E !important;
}

.ch-main:not(.checkbox, .divider, a) {
    background-color: #EAEDED !important;
}

.ch-main.button:hover {
    color: #616D6E !important;
    background-color: #EAEDED !important;
}

.ch-main.button:active {
    color: #EAEDED !important;
    background-color: #717D7E !important;
}

.header {
    font-weight: 400 !important;
}

.ch-input * .header {
    color: #1F618D;
    background-color: #D4E6F1;
}

.ch-input * .segment * label,
.ch-input * .ui.toggle.checkbox input:checked~label,
.ch-input * .ui.toggle.checkbox input~label,
.ch-input * .dropdown,
.ch-input * .dropdown > .text,
.ch-input * input,
.ch-input * input::selection,
.ch-input * .item,
.ch-input * .ch-attr:not(.subs) {
    color: #1F618D !important;
}

.ch-input * .segment {
    color: #1F618D;
    border-color: #1F618D44;
    box-shadow: none;
}

.ch-input * .ch-attr:not(.checkbox, .divider, a) {
    background-color: #D4E6F1;
}

.ch-input * .ch-attr.button:hover {
    color: #0F517D;
    background-color: #D4E6F1;
}

.ch-input * .ch-attr.button:active,
.ch-input * .ch-attr.button.active,
.ch-input * .ch-attr.button.active:hover,
.ch-input * .ch-attr.checkbox input:checked~label:before,
.ch-input * .ch-attr.checkbox input:focus:checked~label:before
{
    color: #D4E6F1 !important;
    background-color: #1F618D !important;
}

.upload-progress {

    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid #d6d6d6 !important;
    border-bottom: 1px solid #d6d6d6 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
}

.upload-progress > .bar {
    background: #1F618D77 !important;
    border-radius: 0 !important;
    height: 100% !important;
}

.ch-output * .header {
    color: #76448A;
    background-color: #EBDEF0;
}

.ch-output * .segment * label,
.ch-output * .ui.toggle.checkbox input:checked~label,
.ch-output * .ui.toggle.checkbox input~label,
.ch-output * .dropdown,
.ch-output * .dropdown > .text,
.ch-output * .item,
.ch-output * input,
.ch-output * input::selection,
.ch-output * .ch-attr {
    color: #76448A !important;
}

.ch-output * .segment {
    color: #76448A;
    border-color: #76448A44;
    box-shadow: none;
}

.ch-output * .ch-attr:not(.checkbox, .divider, a) {
    background-color: #EBDEF0;
}

.ch-output * .ch-attr.button:hover {
    color: #66347A;
    background-color: #EBDEF0;
}

.ch-output * .ch-attr.button:active,
.ch-output * .ch-attr.button.active,
.ch-output * .ch-attr.button.active:hover,
.ch-output * .ch-attr.checkbox input:checked~label:before,
.ch-output * .ch-attr.checkbox input:focus:checked~label:before {
    color: #EBDEF0 !important;
    background-color: #76448A !important;
}

.ch-trans * .header {
    color: #239B56;
    background-color: #D5F5E3;
}

.ch-trans * .segment * label,
.ch-trans * .ui.toggle.checkbox input:checked~label,
.ch-trans * .ui.toggle.checkbox input~label,
.ch-trans * .dropdown,
.ch-trans * .dropdown > .text,
.ch-trans * input,
.ch-trans * input::selection,
.ch-trans * .item,
.ch-trans * .ch-attr {
    color: #239B56 !important;
}

.ch-trans * .segment {
    color: #239B56;
    border-color: #239B5644;
    box-shadow: none;
}

.ch-trans * .ch-attr:not(.checkbox, .divider) {
    background-color: #D5F5E3;
}

.ch-trans * .ch-attr.button:hover {
    color: #138B46;
    background-color: #D5F5E3;
}

.ch-trans * .ch-attr.button:active,
.ch-trans * .ch-attr.button.active,
.ch-trans * .ch-attr.button.active:hover,
.ch-trans * .ch-attr.checkbox input:checked~label:before,
.ch-trans * .ch-attr.checkbox input:focus:checked~label:before {

    color: #D5F5E3 !important;
    background-color: #239B56 !important;
}

.ch-archive * .header {
    color: #148F77;
    background-color: #D1F2EB;
}

.ch-archive * .segment * label,
.ch-archive * .ui.toggle.checkbox input:checked~label,
.ch-archive * .ui.toggle.checkbox input~label,
.ch-archive * .dropdown,
.ch-archive * .dropdown > .text,
.ch-archive * .item,
.ch-archive * input,
.ch-archive * input::selection,
.ch-archive * .ch-attr {
    color: #148F77 !important;
}

.ch-archive * .segment {
    color: #148F77;
    border-color: #148F7744;
    box-shadow: none;
}

.ch-archive * .ch-attr:not(.checkbox, .divider, a) {
    background-color: #D1F2EB;
}

.ch-archive * .ch-attr.button:hover {
    color: #047F67;
    background-color: #D1F2EB;
}

.ch-archive * .ch-attr.button:active,
.ch-archive * .ch-attr.button.active,
.ch-archive * .ch-attr.button.active:hover,
.ch-archive * .ch-attr.checkbox input:checked~label:before,
.ch-archive * .ch-attr.checkbox input:focus:checked~label:before {
    color: #D1F2EB !important;
    background-color: #148F77 !important;
}

.ch-tt * .header {
    color: #1E8449;
    background-color: #D4EFDF;
}

.ch-tt * .segment * label,
.ch-tt * .ui.toggle.checkbox input:checked~label,
.ch-tt * .ui.toggle.checkbox input~label,
.ch-tt * .dropdown,
.ch-tt * .dropdown > .text,
.ch-tt * .item,
.ch-tt * input,
.ch-tt * input::selection,
.ch-tt * .ch-attr {
    color: #1E8449 !important;
}

.ch-tt * .segment {
    color: #1E8449;
    border-color: #1E844944;
    box-shadow: none;
}

.ch-tt * .ch-attr:not(.checkbox, .divider) {
    background-color: #D4EFDF;
}

.ch-tt * .ch-attr.button:hover {
    color: #0E7439;
    background-color: #D4EFDF;
}

.ch-tt * .ch-attr.button:active,
.ch-tt * .ch-attr.button.active,
.ch-tt * .ch-attr.button.active:hover,
.ch-tt * .ch-attr.checkbox input:checked~label:before,
.ch-tt * .ch-attr.checkbox input:focus:checked~label:before {
    color: #D4EFDF !important;
    background-color: #1E8449 !important;
}

.ch-list * .header {
    color: #EAEDED;
    background-color: #717D7E;
}

.ch-list * .segment * label,
.ch-list * .ui.toggle.checkbox input:checked~label,
.ch-list * .ui.toggle.checkbox input~label,
.ch-list * .dropdown,
.ch-list * .dropdown > .text,
.ch-list * .item,
.ch-list * input,
.ch-list * input::selection,
.ch-list * .ch-attr {
    color: #717D7E !important;
}

.ch-list * .segment {
    color: #717D7E;
    border-color: #717D7E44;
    box-shadow: none;
}

.ch-list * .ch-attr:not(.checkbox, .divider) {
    background-color: #EAEDED;
}

.ch-list * .ch-attr.button:hover {
    color: #717D7E;
    background-color: #EAEDED;
}

.ch-list * .ch-attr.button:active,
.ch-list * .ch-attr.button.active,
.ch-list * .ch-attr.button.active:hover,
.ch-list * .ch-attr.checkbox input:checked~label:before,
.ch-list * .ch-attr.checkbox input:focus:checked~label:before {
    color: #EAEDED !important;
    background-color: #717D7E !important;
}

.dragging {
    opacity: 0.75;
    outline-offset: 6px;
    border-radius: 3px;
    background-color: white;
}

.ch-input.dragging,
.ch-input * .dragging {
    outline: 2px solid #1F618D;
}

.ch-output.dragging,
.ch-output * .dragging {
    outline: 2px solid #76448A;
}

.ch-trans.dragging,
.ch-trans * .dragging {
    outline: 2px solid #239B56;
}

.ch-push.dragging,
.ch-push * .dragging {
    outline: 2px solid #117A65;
}

.ch-archive.dragging,
.ch-archive * .dragging {
    outline: 2px solid #148F77;
}

.ch-tt.dragging,
.ch-tt * .dragging {
    outline: 2px solid #1E8449;
}

.inf.button {
    font-size:22px; 
    padding: 0px 8px 0px !important;
}

.adaptive-slot {
    width: 100%;
    border-radius: 6px 0px 6px 6px;
    border: 1px solid #1F618D;
    padding: 12px;
}

.delete-adaptive {
    padding: 4px;
    color: #D4E6F1;
    border-radius: 0px 6px 6px 0px;
    background-color: #1F618D;
    cursor: pointer;
}

.delete-adaptive:hover {
    color: white;
}

i + .subs {
    color: #D4E6F1 !important;
    background-color: #1F618D !important;
}

.compact.segment {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#apikey {

    border-radius: 0;
}

.apikey.button {
    border-radius: 0px 0px 3px 0px !important;
}

#apikey:focus {
    outline: none !important;
    border-color: #888 !important;
    border-right-color: transparent !important;
}

#apikey::selection,
.ui.pagination.menu .active.item {
    color: white;
    background: #3d3e3f;
}

.ch-dt-desc {
    font-size: 12px;
    color: #616D6E;
}

.ch-dt-tag.sep {
    margin-left: 5px;
}
.ch-dt-tag {
    margin-top: 0.33em;
    padding: 0px 4px 0px;
    font-size: 10px;
    background: #F9E79F;
    color: #303030;
    border-radius: 4px;
}

.ui.table * td
{
    padding: 0.5em !important;
}

.ch-active {
    color: #a7bd0d !important;
}

.ch-inactive {
    color: #d01919 !important;
}

.ch-unloaded {
    color: #888 !important;
}

.mdl-prompt * {
    font-size: 14px !important;
    font-weight: 400 !important;
}

input.dropping {

    border: 1px solid #1F618D !important;
}

.event-out-id {
    color: #1E8449;
    text-decoration: underline;
}