html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/**
 * Background
 */
.backgroundLayout {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 1;
    transition: opacity 0.5s;
    overflow: hidden;
    z-index: 0;
}
.backgroundImage {
    position: absolute;
    top: -5%;
    bottom: -5%;
    left: -5%;
    right: -5%;
    background-color: #2bbbff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(8px);
    z-index: 0;
}
.backgroundCover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 0.75;
    z-index: 0;
}
/**
 * Loading
 */
.loadingScreen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .25);
    transition: opacity 0.5s;
    z-index: 100;
}
.loadingScreen.hide {
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 0;
}
/**
 * Container
 */
#container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transition: opacity 0.5s;
    color: white;
    overflow: hidden;
    display: flex;
    flex-flow: column;

    & > #global-header {
        height: 44px;
        margin: 0 !important;
        background: rgba(0, 0, 0, .85);
    }
    & > div:last-child {
        flex-grow: 1;
    }
}
#container.hide {
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}
/**
 * Login
 */
#login {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
}
/**
 * Screen
 */
#screen {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}
#screen > #screen-header {
    height: 44px;
    margin: 0 !important;
    background: rgba(0, 0, 0, .85);
}
#screen > #screen-tabs {
    margin: 0 !important;
    background: rgba(0, 0, 0, .85);
}
#screen > #screen-page {
    position: relative;
    flex-grow: 1;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, .7);
    height: 100%;
    width: 100%;
    /*overflow: auto;*/
}
#screen > #screen-page > div {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.edgeRound {
    border-radius: 10px;
}
.align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.align-center-x {
    display: flex;
    justify-content: center;
    text-align: center;
}
.align-center-y {
    display: flex;
    align-items: center;
}
.align-right {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}
.text-center {
    text-align: center !important;
}
.margin-bottom-zero {
    margin-bottom: 0 !important;
}
.margin-bottom-10 {
    margin-bottom: 10px !important;
}
.margin-top-zero {
    margin-top: 0 !important;
}
.margin-bottom-zero {
    margin-top: 0 !important;
}
.margin-zero {
    margin: 0 !important;
}
.padding-top-zero {
    padding-top: 0 !important;
}
.padding-bottom-zero {
    padding-top: 0 !important;
}
.padding-zero {
    padding: 0 !important;
}
.set-scroll {
    overflow: scroll;
}
.set-scroll-x {
    overflow-x: scroll;
}
.set-scroll-y {
    overflow-y: scroll;
}
.set-scroll,
.set-scroll-x,
.set-scroll-y {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}
.set-scroll::-webkit-scrollbar,
.set-scroll-x::-webkit-scrollbar,
.set-scroll-y::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.margin-0 {
    margin: 0 !important;
}
/**
 * Global
 */
.overflow-visible {
    overflow: visible !important;
}
.overflow-visible-x {
    overflow-x: visible;
}
.overflow-visible-y {
    overflow-y: visible;
}
.scrollable-y {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    &::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }
}
.ui.buttons > .button:last-child {
    margin-right: 0 !important;
}
.ui.inverted.button {
    box-shadow: 0 0 0 2px gray inset !important;
}
/*.ui.inverted.form input:not([type]), .ui.label, .ui.inverted.form input[type=color], .ui.inverted.form input[type=date], .ui.inverted.form input[type=datetime-local], .ui.inverted.form input[type=email], .ui.inverted.form input[type=file], .ui.inverted.form input[type=month], .ui.inverted.form input[type=number], .ui.inverted.form input[type=password], .ui.inverted.form input[type=search], .ui.inverted.form input[type=tel], .ui.inverted.form input[type=text], .ui.inverted.form input[type=time], .ui.inverted.form input[type=url], .ui.inverted.form input[type=week], .ui.selection.dropdown, .ui.selection.dropdown > .menu > .item {*/
/*    color: white !important;*/
/*    background: gray;*/
/*}*/
.textCenter {
    text-align: center;
}
.margin-top-10 {
    margin-top: 10px !important;
}
.margin-bottom-10 {
    margin-bottom: 10px !important;
}
.dark-blue {
    background: #0e2f41 !important;
}
.outline {
    border: gray solid 3px !important;
}
.no-draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.list-move,
.list-enter-active,
.list-leave-active {
    transition: slideIn 0.5s ease;
}
.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
.list-leave-active {
    position: absolute;
}
.animation-slide-in {
    animation: slideIn 0.25s ease-out;
}
.imminent-highlight {
    animation: slowHighlightWithExistingShadow 3s ease-in-out infinite; /* 3초 동안 부드럽게 반복 */
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slowHighlightWithExistingShadow {
    0% {
        box-shadow: 0px 1px 3px 0px rgba(34, 36, 38, 0.15);
    }
    50% {
        box-shadow: 0px 1px 3px 0px rgba(34, 36, 38, 0.15),
        0 0 0 4px rgba(0, 191, 255, 0.7); /* 블러 없는 두꺼운 테두리 형태의 그림자 */
    }
    100% {
        box-shadow: 0px 1px 3px 0px rgba(34, 36, 38, 0.15);
    }
}