/* input type이 number일 경우 우측에 up-down 버튼을 안보이도록 함 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* Chrome, Safari, Edge, Opera */
  -webkit-appearance: none;
}
input[type=number] { /* Firefox */
  -moz-appearance: textfield;
}

gwc-card {
    display: inline-block;
    position: relative;
    
}

gwc-card.modal {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    _background: rgba(255,0,0,0.1);
    opacity: 0;
    animation: gwc-card-modal-show 0.5s;
    animation-fill-mode: forwards;
}

@keyframes gwc-card-modal-show {
    0% {
        opacity: 0;
        _transform: scale(0);
    }
    100% {
        opacity: 1;
        _transform: scale(1);
    }
}

gwc-card:not(.modal) > .gwc-resizable-panel-layout {
    width: 100%;
    height: 100%;
}

.gwc-card-layout .gwc-extract {
    position: relative;
    flex-grow: 1;
}

.gwc-card-layout {
    top: 0; 
    left: 0;

    /* 리사이즈패널을 위한 스타일 */
    _display: inline-block;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* 리사이즈패널을 위한 스타일 */
    
    _flex-wrap: wrap; 
    _position: relative;
    _align-items: center;
    _justify-content: center;

    padding: 0.3em 0.3em;

    border-radius: 0.4em;
    background: linear-gradient(125deg, rgba(50,50,50,1) 0%, rgba(30,30,30,1) 60%, rgba(25,25,25,1) 90%, rgba(20,20,20,0.8) 100%);
    _border-top: 1px solid rgba(255,255,255,0.4);
    _border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: 
        inset 0.6px 0.6px 0.6px rgba(255,255,255,0.4),
        inset -0.6px -0.6px 0.6px rgba(0,0,0,0.4),
        0 0 4px rgba(0,0,0,0.7), 
        0 0 14px rgba(0,0,0,0.7), 
        0 0 28px rgba(0,0,0,0.4);
            
    opacity: 1;
    _cursor: auto;
}

.gwc-card-layout.drag {
    _opacity: 0.4;
    cursor: move;
}

.gwc-card-layout > .gwc-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gwc-card-layout > .gwc-card-head > .gwc-card-left-space {
    _border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: auto; */
    zoom: 0.7;
    padding: 0 0.3em;
}

.gwc-card-layout > .gwc-card-head > gwc-label {
    _margin-bottom: 0.2em;
    width: 100%;
    display: none;
    padding: 0.4em 0.6em;
    user-select: none;
}

.gwc-card-layout .gwc-card-head gwc-label.show {
    display: inline-block;
}

/* gwc-tab */

.gwc-tab-layout {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 6px black);
    _border: 1px dashed white;
}

.gwc-tab-tabs {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid yellow;
}

.gwc-tab-headers {
    display: flex;
    align-items: flex-end;
    position: relative;
    padding: 0 0 0 0.25em;
    margin: 0;
    z-index: 1;
    _background-color: red;
    _transform: translateY(0);
    _overflow: hidden;
}

.gwc-tab-headers > .header:nth-child(1) {
    z-index: 10;    
}

.gwc-tab-headers > .header:nth-child(2) {
    z-index: 9;    
}

.gwc-tab-headers > .header:nth-child(3) {
    z-index: 8;    
}

.gwc-tab-headers > .header:nth-child(4) {
    z-index: 7;    
}

.gwc-tab-headers > .header:nth-child(5) {
    z-index: 6;    
}

.gwc-tab-headers > .header:nth-child(6) {
    z-index: 5;    
}

.gwc-tab-headers > .header:nth-child(7) {
    z-index: 4;    
}

.gwc-tab-headers > .header:nth-child(8) {
    z-index: 3;    
}

.gwc-tab-headers > .header:nth-child(9) {
    z-index: 2;    
}

.gwc-tab-headers > .header:nth-child(10) {
    z-index: 1;    
}

.gwc-tab-headers > .header {
    position: relative;
    display: inline-block;
    margin: 0;
    _margin-right: -0.4em;
    color: rgba(255,255,255,0.6);
    font-size: 0.9em;
    padding: 0.3em 1.4em;
    _border: 1px solid green;
    border-radius: 0.4em 0.4em 0 0;
    _z-index: 0;
    cursor: pointer;
    white-space: nowrap;

    background: linear-gradient(180deg, rgba(42,42,42,1) 0%, rgba(20,20,20,1) 100%);
    box-shadow: -0.6px -0.6px 1px rgba(255,255,255,0.8), 2px 0 2px -2px black, 2px 0 2px -2px black, 4px 0 4px -4px black, 1px 0 2px rgba(0,0,0,1), 2px 0 5px rgba(0,0,0,0.5);
}

.gwc-tab-headers > .header::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -1px;
    background-color: rgba(255,255,255,0.2);
    _display: none;
}

.gwc-tab-headers > .header.selected::before {
    display: block;
    height: 3px;
    bottom: -2px;
    background-color: rgba(20,20,20,0.8);
}

.gwc-tab-headers > .header.selected {
    font-size: 1em;
    line-height: 1.6em;
    color: white;
    transform: translateY(2px);
    border-radius: 0.4em 0.4em 0 0;
    text-shadow: 0 0 1px black, 0 0 8px white;
    z-index: 11;
    _border-bottom: 4px solid rgba(20,20,20,1);
    _border-bottom: 4px solid red;
    _box-shadow: none;
    background: linear-gradient(180deg, rgba(52,52,52,1) 10%, rgba(20,20,20,1) 100%);
    box-shadow: -0.6px -0.6px 1px rgba(255,255,255,0.8), 2px 0 2px -2px black, 2px 0 2px -2px black, 4px 0 4px -4px black, 1px 0 2px rgba(0,0,0,1), 2px 0 5px rgba(0,0,0,0.5), 
        -1px 0 2px rgba(0,0,0,1), -2px 0 5px rgba(0,0,0,1);
}

.gwc-tab-headers > .header:hover:not(.selected) {
    color: white;
    text-shadow: 0 0 1px black, 0 0 8px white;
}

.gwc-tab-contents {
    position: relative;
    margin: 0;
    width: 100%;
    overflow: hidden;
    height: calc(100% - 2em);
    border-radius: 0 0 0.4em 0.4em;
    background: linear-gradient(125deg, rgba(20,20,20,.9) 0%, rgba(40,40,40,0.8) 100%);
    border-top:1px solid rgba(255,255,255,0.4);
    border-left:1px solid rgba(255,255,255,0.4);
    _box-shadow: 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
}

.gwc-tab-contents > .content {
    position: absolute;
    top: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    _border: 1px solid red;
    transition: 0.5s opacity;
    opacity: 0;
    overflow: hidden;
}

.gwc-tab-contents > .content.selected {
    top: 0%;
    opacity: 1;
    _transition: 1s opacity;
}

gwc-vscrollview {
    _min-width: 5em;
    _min-height: 5em;
    _height: 0;
    width: 100%;
    height: 100%;
}

.gwc-vscrollview-layout {
    position: relative;
    width: 100%;
    height: 100%;
    _border: 1px solid red;
    _box-shadow: 0 0 1px rgba(255,255,255,0.5);
    _border-right: 1px solid rgb(80,80,80);
}

.gwc-vscrollview-content {
    _position: absolute;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    _border-right: 1px solid rgb(80,80,80);
    overflow-x: hidden;
    overflow-y: auto;
}

.gwc-vscrollview-content::-webkit-scrollbar {
    width: .4em;
    height: .4em;
    background-color: transparent;
}

.gwc-vscrollview-content::-webkit-scrollbar-thumb {
    background-color: rgb(255,255,255);
    border-radius: 0.2em;
}

.gwc-vscrollview-content::-webkit-scrollbar-corner {
    background-color: transparent;
}

.gwc-accordion-layout {
    _position: relative;
    width: 100%;
    _height: 30em;
    border-radius: 0.5em;

    background: linear-gradient(125deg, rgba(20,20,20,.7) 0%, rgba(40,40,40,.7) 60%, rgba(60,60,60,0.3) 100%);
    _border-top: 1px solid rgba(255,255,255,0.4);
    _border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow:  -0.6px -0.6px 1px rgba(255,255,255,0.3), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);

    overflow: hidden;
}

.gwc-accordion-layout > .part {
    width: 100%;
}

.gwc-accordion-layout > .part > .header {
    width: 100%;
    height: 100%;

    _background: linear-gradient(125deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.01) 100%);
    _background: linear-gradient(125deg, rgba(50,50,50,0.9) 0%, rgba(30,30,30,0.9) 10%, rgba(20,20,20,0.9) 90%, rgba(10,10,10,0.9) 100%);
    _background: linear-gradient(125deg, rgba(40,40,40,0.7) 0%, rgba(30,30,30,0.7) 20%, rgba(25,25,25,0.9) 80%, rgba(20,20,20,0.9) 100%);
    
    _border-top:1px solid rgba(255,255,255,0.4);
    _border-bottom:1px solid rgba(0,0,0,0.4);
    _box-shadow: -0.6px -0.6px 1px rgba(255,255,255,0.2), 0.6px 0.6px 1px rgba(0,0,0,0.9), 
        0 0 2px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1);

    background: linear-gradient(180deg, rgba(42,42,42,1) 0%, rgba(20,20,20,1) 100%);
    box-shadow: -0.6px -0.6px 1px rgba(255,255,255,0.3), 2px 0 2px -2px black, 2px 0 2px -2px black, 4px 0 4px -4px black, 1px 0 2px rgba(0,0,0,1), 2px 0 5px rgba(0,0,0,0.5);

    padding: 0 0.7em;
    display: flex;
    _justify-content: center;
    align-items: center;
    height: 3em;
    cursor: pointer;

    _z-index: 1;
}

.gwc-accordion-layout > .part > .header:hover > .title {
    text-shadow: 0 0 2px black, 0 0 5px white, 0 0 10px white, 0 0 20px white;
}

.gwc-accordion-layout > .part:first-child > .header {
    border-top: none;
}

.gwc-accordion-layout > .part > .header > img {
    margin-left: 0.3em;
    margin-right: 0.7em;
    width: 1.6em;
    height: 1.6em;
    filter: drop-shadow(1px 1px 1px black) drop-shadow(1px 1px 2px black);
    _object-fit: cover;
}

/* .gwc-accordion-layout > .part > .header > .count.hide, 
.gwc-accordion-layout > .part > .header > img.hide {
    display: none;
} */

.gwc-accordion-layout > .part > .header > .title {
    letter-spacing: 0.1em;
    color: white;
    font-size: 1.1em;
    margin-right: auto;
    text-shadow: 0 0 2px black, 0 0 5px white;
    transition: 0.4s all;
}

.gwc-accordion-layout > .part > .header > .count {
    color: white;
    font-size: 0.7em;
    padding: 0 0.7em 0.1em;
    line-height: 1.7em;
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px white;

    _background: linear-gradient(125deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 0.2em;
    border-top:1px solid rgba(255,255,255,0.4);
    border-left:1px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 2px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.6);
}

.gwc-accordion-layout > .part > .content {
    width: 100%;
    box-shadow: inset 0 0 1px rgba(0,0,0,1), inset 0 0 4px rgba(0,0,0,0.3), 
        inset 0 0 8px rgba(0,0,0,0.2);
    overflow: hidden;
    background-color: rgba(0,0,0,0.1);
    transition: 0.4s height;
    _z-index: 0;
}

.gwc-accordion-layout > .part > .content.hide {
    height: 0px !important;
}

/* select */

gwc-select {
    display: inline-block;
    min-width: 100px;
    _border: 1px solid white;
    _backdrop-filter: blur(6px);
}

gwc-select.disabled {
    pointer-events: none !important;
}

gwc-select > .gwc-select-layout {
    position: relative;
    height: 3.5em;
    width: calc(100%);
    _background: linear-gradient(125deg, rgba(30,30,30,.7) 0%, rgba(20,20,20,.7) 60%, rgba(10,10,10,0.7) 100%);
    background: radial-gradient(circle at center bottom, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.99) 100%);
    border-radius: 1.725em;
    -box-shadow: -0.6px -0.6px 0.6px rgba(255,255,255,0.4), 0.6px 0.6px 0.6px rgba(0,0,0,0.6), 
        0 0 7px rgba(0,0,0,0.5), 0 0 14px rgba(0,0,0,0.9);
    _border: 1px solid yellow;
    border: none;
    _border-bottom:1px solid rgba(255,255,255,0.3);
    _border-right:1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    box-shadow: inset 0 0 7px rgb(0 0 0 / 90%), -1px -1px 2px rgb(255 255 255 / 20%);
}

gwc-select.disabled > .gwc-select-layout { 
    _box-shadow: -1px -1px 2px rgba(120,120,120,0.7), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
}

gwc-select > .gwc-select-layout > .input-part {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    _position: absolute;
    position: relative;
    color: white;
    top: 0;
    left: 0;
    _border: 1px solid red;
    width: calc(100% - 3.1em);
    height: 100%;
    _padding-left: 3.5em;
}

gwc-select > .gwc-select-layout > .input-part > input {
    position: absolute;
    outline: none;
    background: none;
    border: none;
    _border: 1px solid green;
    color: white;
    width: calc(100%);
    left: 0;
    height: calc(100% - 0.1em);
    font-size: 1.2em;
    text-shadow: 0 0 5px white;
    text-align: center;
    letter-spacing: 0.1em;
}

gwc-select.disabled > .gwc-select-layout > .input-part > input {
    text-shadow: none;
    opacity: 0.4;
    _color: rgba(70, 70, 70);
    _text-shadow: 0 0 2px rgb(0,0,0), 0 0 7px rgb(0,0,0);
}

gwc-select > .gwc-select-layout > .dropdown-button {
    position: absolute;
    width: 2.8em;
    height: 2.8em;
    right: 0.45em;
    top: 0.35em;
    
    background: linear-gradient(125deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 50%;
    border-top: 1px solid rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), 2px 2px 4px rgba(0,0,0,0.9);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: em;
    color: white;
    text-shadow: 0 0 5px white;   

    cursor: pointer;
    user-select: none;
    transition: 0.5s text-shadow;
}

gwc-select.disabled > .gwc-select-layout > .dropdown-button {
    _color: rgba(70, 70, 70);
    _text-shadow: 0 0 2px rgb(0,0,0), 0 0 7px rgb(0,0,0);
    _border-top: 1px solid rgba(255,255,255,0.2);
    _border-left: 1px solid rgba(255,255,255,0.2);
    opacity: 0.3;
}

gwc-select > .gwc-select-layout > .dropdown-button:hover {
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 20px white, 0 0 40px white;
}

gwc-select > .gwc-select-layout > gwc-label {
    display: none !important;
    position: absolute;
    top: -.9em;
    left: 2em;
    font-size: .9em;
}

gwc-select.disabled > .gwc-select-layout gwc-label {
    color: rgba(70,70,70);
    text-shadow: 0 0 2px rgb(0,0,0);
}

gwc-select > .gwc-select-layout gwc-label.show {
    display: inline-block !important;
}

gwc-select > .gwc-select-layout > .list-layout {
    height: 0;
    position: relative;
    -background: red;    
    top: -1.5em;
    left: calc(2em);
    opacity: 0.0;
    transition: 0.6s opacity;
    width: calc(100% - 2.8em - 1.5em);
    -width: calc(100%);
}

gwc-select > .gwc-select-layout .list-layout.show {
    opacity: 1;
    z-index: 1;
    height: auto;
    border-radius: 0.4em;
    _background: linear-gradient(125deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.01) 100%);
    background: linear-gradient(125deg, rgba(40,40,40,1) 0%, rgba(0,0,0,1) 100%);
    box-shadow: 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    padding: 0.5em;
    border-top:1px solid rgba(255,255,255,0.4);
    border-left:1px solid rgba(255,255,255,0.4);    
}

gwc-select > .gwc-select-layout .list-layout:not(.show) .list {
    position: relative;
    overflow: hidden;
    height: 0 !important;
}

gwc-select > .gwc-select-layout .list-layout.show .list {
    _height: auto;
    overflow-y: auto;
}

gwc-select > .gwc-select-layout .list::-webkit-scrollbar {
    width: .4em;
}

gwc-select > .gwc-select-layout .list::-webkit-scrollbar-thumb {
    background-color: rgb(255,255,255);
    border-radius: 0.2em;
}

gwc-select > .gwc-select-layout gwc-vscrollview {
    width: 25em;
    height: 10em;
}

gwc-select > .gwc-select-layout .item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
    height: 2.5em;
    _padding: 0 0.8em;
    _line-height: 2.5em;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    margin-bottom: 0.25em;
    
    background: linear-gradient(125deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.2) 100%);
    border-radius: 0.2em;
    _border-top: none;
    _border-right: none;
    _border-bottom:1px solid rgba(255,255,255,0.4);
    _border-right:1px solid rgba(255,255,255,0.4);
    box-shadow: inset 0 0 2px rgba(0,0,0,1), inset 0 0 8px rgba(0,0,0,1), inset -0.6px -0.6px 0.6px rgba(255,255,255,1);
    
    text-shadow: 0 0 6px white;
    cursor: pointer;
}

gwc-select > .gwc-select-layout .item:last-child {
    margin-bottom: 0;
}

gwc-select > .gwc-select-layout .item:hover {
    _border-bottom: none;
    _border-right: none;
    _border-top:1px solid rgba(255,255,255,0.4);
    _border-left:1px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 9px rgba(0,0,0,0.7), inset 0.6px 0.6px 0.6px rgba(255,255,255,0.5);
    font-weight: bold;
    /* backdrop-filter: blur(4px); */
    background: linear-gradient(125deg, rgba(255,255,255,0.1) 0%,  rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.1) 100%);
}

gwc-colorpicker {
    display: inline-block;
}

gwc-colorpicker.disabled {
    pointer-events: none !important;
}

gwc-colorpicker > .gwc-colorpicker-layout {
    position: relative;
    _width: 5em;
    min-width: 5em;
    height: 3em;
}

gwc-colorpicker.disabled > .gwc-colorpicker-layout > input::before {
    content: "";
    position: absolute;
    left:15%;
    top: 7%;
    width: calc(100% - 15%);
    height: calc(100% - 13%);
    background: linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(255,0,0,0.5) 45%, 
        rgba(255,0,0,0.5) 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%);
}

gwc-colorpicker > .gwc-colorpicker-layout > input {
    width: 100%;
    height: 100%;
    _padding: 0;
    _margin: 0;
    border: none;
    _outline: none;
    _appearance: none;
    cursor: pointer;
    background: transparent;
}

gwc-colorpicker > .gwc-colorpicker-layout > input::-webkit-color-swatch {
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0.4em;

}

gwc-colorpicker > .gwc-colorpicker-layout > input::-moz-color-swatch {
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0.4em;
}

gwc-colorpicker > .gwc-colorpicker-layout > .decoration {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1em;
    background: linear-gradient(125deg, rgba(50,50,50,1) 0%, rgba(20,20,20,1) 100%);
    border-top: 1px solid rgba(200,200,200,0.4);
    border-left: 1px solid rgba(200,200,200,0.4);
    box-shadow: 0 0 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.9);
    border-radius: 0.5em 0 0 0.5em;
}

gwc-button {
    display: inline-block;
}

gwc-button.disabled {
    pointer-events: none !important;
}

gwc-button > .gwc-button-layout {
    position: relative;
    _background: linear-gradient(125deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.01) 100%);
    background: linear-gradient(125deg, rgba(30,30,30,.7) 0%, rgba(20,20,20,.7) 60%, rgba(10,10,10,0.7) 100%);
    border-radius: 1.25em;
    backdrop-filter: blur(6px);
    height: 2.2em;
    /* border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent; */
    _box-shadow: -1px -1px 2px rgba(255,255,255,0.7), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    box-shadow: -0.6px -0.6px 1px rgba(255,255,255,0.7), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3em;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px white;
    cursor: pointer;
    user-select: none;
    padding: 0 1.5em 2px;
    transition: 0.4s text-shadow;
}

gwc-button.disabled > .gwc-button-layout {
    color: rgb(70,70,70);
    /* border-top:1px solid rgba(255,255,255,0.1);
    border-left:1px solid rgba(255,255,255,0.1); */
    text-shadow: none;
    box-shadow: -1px -1px 2px rgba(120,120,120,0.7), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
}

gwc-button:not(.disabled) > .gwc-button-layout:hover {
    text-shadow: 0 0 8px white, 0 0 16px white, 0 0 32px white;
}

gwc-button:not(.disabled) > .gwc-button-layout:active {
    backdrop-filter: blur(2px);
    /* border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom:1px solid rgba(255,255,255,0.5);
    border-right:1px solid rgba(255,255,255,0.5); */
    box-shadow: 1px 1px 2px rgba(255,255,255,0.7), inset 0 0 4px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.8);
}

/* gwc-icon-button */

gwc-icon-button {
    display: inline-block;
    user-select: none;
}

gwc-icon-button > .gwc-icon-button-layout {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    _width: 5em;
    _height: 1em;
    padding: 0.5em 1em;
    _border: 1px solid red;
    color : white;
    text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 2px rgba(255,255,255,1);
    border-radius: 1.3em;
    transition: 0.4s background-color;
    cursor: pointer;
    transition: 0.4s text-shadow;
}

gwc-icon-button > .gwc-icon-button-layout > .icon {
    width: 1.2em;
    height: 1.2em;
    _background: no-repeat center/100% url(./images/icon1.png);
}

gwc-icon-button > .gwc-icon-button-layout > .title {
    font-size: 0.8em;
    /* letter-spacing: 0.1em; */
    letter-spacing: -0.05em;
    /* font-family: 'Raleway'; */
    padding-left: 0.5em;
}

gwc-icon-button > .gwc-icon-button-layout:hover {
    text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 2px rgba(255,255,255,1), 
        0 0 4px rgba(255,255,255,1), 0 0 8px rgba(255,255,255,1),
        0 0 16px rgba(255,255,255,1), 0 0 32px rgba(255,255,255,1);
}

gwc-icon-button > .gwc-icon-button-layout:active {
    background-color: rgba(255,255,255,0.1);
    _box-shadow: 0 0 4px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.2), 0 0 20px rgba(255,255,255,0.2);
    _box-shadow: inset 0.6px 0.6px 0.6px rgba(0,0,0,0.3), inset -0.6px -0.6px 0.6px rgba(255,255,255,0.3);
}

/* gwc-space */

gwc-space {
    display: inline-block;    
}

/* gwc-label */

gwc-label {
    display: inline-block;
    color: white;
    text-shadow: 0 0 0.5em rgba(255,255,255,0.6);
    overflow: hidden;

    _padding: 0 0.2em;
    padding: 0.2em 0.6em;
    _margin-right: 0.1em;
    border-radius: 0.3em;
    text-align: center;

    max-width: 100%;
}

.gwc-label-layout {
    _border: 1px solid red;
    position: relative;
    left: 0;
    display: inline-block;

    white-space: nowrap;
    _width: 100%;
    _max-width: 100%;
    
    font-size: 1em;
    line-height: 100%;
    text-align: center;
    letter-spacing: -0.05em;
}

gwc-label.convex {
    background: linear-gradient(125deg, rgba(45,45,45,1) 0%, rgba(40,40,40,1) 10%, rgba(40,40,40,1) 90%, rgba(25,25,25,1) 100%);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.7);
}

/* .gwc-label-layout.none {}  */

gwc-label.concave {
    background: linear-gradient(125deg, rgba(30,30,30,1) 0%, rgba(25,25,25,1) 20%, rgba(15,15,15,1) 80%, rgba(10,10,10,1) 100%);
    border-bottom:1px solid rgba(255,255,255,0.35);
    border-right:1px solid rgba(255,255,255,0.35);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), inset 0 1px 8px rgba(0,0,0,0.7);
}

/* gwc-image */

gwc-image {
    display: inline-block;
}

.gwc-image-layout {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.9);
}

.gwc-image-layout.circle {
    border-radius: 50%;
}

.gwc-image-layout.rect {
    border-radius: 10%;
}

.gwc-image-layout > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: inset 0 0 10px rgba(0,0,0,1);
    transition: 0.8s transform;
}

.gwc-image-layout > img:hover {
    transform: scale(1.2);
}

gwc-toolbutton {
    display: inline-flex;
    _backdrop-filter: blur(2px);
}

gwc-toolbutton.disabled {
    pointer-events: none !important;
}

gwc-toolbutton > .gwc-toolbutton-layout {
    display: inline-block;
    position: relative;
    width: 5em;
    height: 5em;
    border-radius: 0.4em;
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    transition: 0.5s box-shadow, 0.5s opacity;
    opacity: 1;
    background-position: center;
    background-repeat:  no-repeat;
    background-size: 55%;
    cursor: pointer;
}

gwc-toolbutton.disabled > .gwc-toolbutton-layout {
    opacity: 0.3;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);
}

/* gwc-toolbutton > .gwc-toolbutton-layout:hover {
    box-shadow: 0 0 7px rgba(255,255,255,0.5);
} */

gwc-toolbutton.pressed > .gwc-toolbutton-layout, 
gwc-toolbutton > .gwc-toolbutton-layout:active {
    border-top: none;
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 0 2px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.9), 0 0 5px rgba(255,255,255,0.2);
}

gwc-progress {
    display: inline-block;
    min-width: 4em;
}

.gwc-progress-layout {
    position: relative;
    width: 100%;
    height: 0.7em;
    border-radius: 1.5em;
    backdrop-filter: blur(2px);
    background: linear-gradient(125deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
    box-shadow: 1px 1px 2px rgba(255,255,255,0.3), inset 0 0 4px rgba(0,0,0,0.4), inset -1px -1px 4px rgba(0,0,0,0.8);
}        

.gwc-progress-layout > .part-layout {
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5em;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
}

.gwc-progress-layout > .part-layout > .part {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 70%;
    transform: translateY(23%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 1) 100%);
    background-size: 100%;
    border-radius: 1.5em;

    transition: 0.2s left;

    animation-duration: 3s;
    _animation-name: gwc-progress-part-moving;
    animation-iteration-count: infinite;
}

@keyframes gwc-progress-part-moving {
    0% {
        left: -100%;
    }

    100% {
        left: 0%;
    }
}

.gwc-progress-layout {
    display: flex;
    align-items: center;
}

.gwc-progress-layout > .part_layout > .part-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5em;
    box-shadow: inset 0 0 4px rgba(0,0,0,1);
}

.gwc-progress-layout > .shiny {
    position: relative;
    box-shadow: -5px 0 10px rgba(255, 255, 255, 1), -5px 0 20px rgba(255, 255, 255, 1), -5px 0 40px rgba(255, 255, 255, 1),
        0 0 80px;
    width: 1em;
    filter: blur(2px) brightness(250%);
    height: 1em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);

    transform: scale(0);
    filter: blur(1px) brightness(100%);
    left: calc(0% - 0.65em);

    transition: 0.2s left;

    animation-duration: 3s;
    _animation-name: gwc-progress-shiny-moving;
    animation-iteration-count: infinite;
}

@keyframes gwc-progress-shiny-moving {
    0% {
        transform:scale(0);
        filter: blur(1px) brightness(100%);
        left: calc(0% - 0.65em);
    }
    
    100% {
        transform:scale(1);
        filter: blur(2px) brightness(250%);
        left: calc(100% - 0.65em);
    }
}    

.gwc-progress-layout > gwc-label {
    display: none !important;
    position: absolute;
    top: -2.2em;
    left: 0.2em;
    font-size: 0.8em;
}

.gwc-progress-layout > gwc-label.show {
    display: inline-block !important;
}

gwc-slider {
    display: inline-block;
    min-width: 8em;
}

gwc-slider.disabled {
    pointer-events: none !important;
    opacity: 0.4;
}

gwc-slider > .gwc-slider-layout {
    position: relative;
    width: 100%;
    height: 3em;
    _border: 1px solid red;
}

gwc-slider > .gwc-slider-layout > .bar {
    position: relative;
    width: calc(100%);
    _height: 100%;      
    height: 0.7em;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 0.7em;
    backdrop-filter: blur(2px);
    background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
    border-right:1px solid rgba(255,255,255,0.5);
    box-shadow: 1px 1px 2px rgba(255,255,255,0.2), inset 0 0 4px rgba(0,0,0,0.4), inset -1px -1px 4px rgba(0,0,0,0.8);
}

gwc-slider > .gwc-slider-layout > .part-layout {
    position: absolute;
    width: calc(100% - 3em);
    _width: 100%;
    height: 100%;      
    top: 0;
    /* border: 1px solid red; */
}

gwc-slider > .gwc-slider-layout > .part-layout > .part {
    width: 3em;
    height: 3em;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    position: absolute;
    background: linear-gradient(125deg, rgba(60,60,60,1) 0%, rgba(30,30,30,1) 100%);
    
    border-radius: 15em;
    box-shadow: -1px -1px 2px rgba(255,255,255,0.7), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    _box-shadow: -0.6px -0.6px 1px rgba(255,255,255,0.7), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

gwc-slider > .gwc-slider-layout > .part-layout > .part > .marker {
    position: relative;
    width: 0.3em;
    height: 1em;
    border-radius: 0.2em;
    _border-bottom:1px solid rgba(255,255,255,0.5);
    _border-right:1px solid rgba(255,255,255,0.5);
    background-color: rgba(20,20,20,1);
    box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4);
    transition: 0.4s all;
}

gwc-slider > .gwc-slider-layout > .part-layout > .part:active > .marker,
gwc-slider > .gwc-slider-layout > .part-layout > .part:hover > .marker {
    background-color: rgb(2, 225, 255);
    box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4), 0 0 2px rgb(2, 225, 255), 0 0 4px rgb(2, 225, 255), 
        0 0 8px rgb(2, 225, 255), 0 0 16px rgb(2, 225, 255), 0 0 32px rgb(2, 225, 255);
}

gwc-slider > .gwc-slider-layout > .part-layout > .part > gwc-label {
    position: absolute;
    font-size: 0.8em;
    left: 2.2em;
    top: -1.2em;
    max-width: none;
    width: auto;
}      

gwc-valueranges-colormatcher {
    display: inline-block;
    width: 30em;
    height: 10em;
}

.gwc-valueranges-colormatcher-layout {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout {
    position: absolute;    
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .dashboard {
    position: absolute;    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    cursor: pointer;
    -opacity: 0.4;
    -border-right: 1px solid rgba(0,0,0,1);
    -transition: background-color ease 0.5s;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .dashboard:last-child {
    _border-right: none;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .min-value {
    left: 0;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .max-value {
    left: 100%;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .min-value,
.gwc-valueranges-colormatcher-layout .dashboard-layout .max-value {
    position: absolute;
    transform: translate(-50%, 50%);
    font-size: 0.7em;
    color: white;
    -background: linear-gradient(125deg, rgba(45,45,45,1) 0%, rgba(40,40,40,1) 10%, rgba(40,40,40,1) 90%, rgba(25,25,25,1) 100%);;
    background: #222;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.7);
    border-radius: 0.2em;
    padding: 0.2em 0.5em;
    top: 1.5em;
    pointer-events: none;
    user-select: none;
    word-break: keep-all;
    -opacity: 0.5;
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .bottom-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.2em;
    background-color: rgba(0,0,0,0.5);
}

.gwc-valueranges-colormatcher-layout .dashboard-layout .dashboard .count {
    position: absolute;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9);
    width: 100%;
    height: 3em;
    bottom: 0;
    _left: calc(50% - 1.5em);
    _border-radius: 50%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    z-index: 1;
    user-select: none;
    opacity: 0.8;
    word-break: keep-all;
    _background: linear-gradient(125deg, rgba(45,45,45,1) 0%, rgba(40,40,40,1) 10%, rgba(40,40,40,1) 90%, rgba(25,25,25,1) 100%);;
    _border-top: 1px solid rgba(255,255,255,0.2);
    _border-left: 1px solid rgba(255,255,255,0.2);
    _box-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.7);
}

.gwc-valueranges-colormatcher-layout .setup-color-ui-layout,
.gwc-valueranges-colormatcher-layout .setup-value-ui-layout {
    display: none;
    flex-flow: column;
    gap: 1em;
    justify-content: center;
    align-items: center;
    position: absolute;    
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0,.7);
    z-index: 1;
}

.gwc-valueranges-colormatcher-layout .setup-color-ui-layout .btns,
.gwc-valueranges-colormatcher-layout .setup-value-ui-layout .btns {
    display: flex;
    gap: 1em;
    zoom: 0.8;
}

.gwc-valueranges-colormatcher-layout .setup-color-ui-layout {
    display: none;
}

.gwc-valueranges-colormatcher-layout .setup-value-ui-layout {
    display: none;
}

/*.gwc-valueranges-colormatcher-layout .setup-value-ui-layout gwc-slider*/
.gwc-valueranges-colormatcher-layout .setup-value-ui-layout gwc-textinput
 {
    width: 15em;
}

.gwc-valueranges-colormatcher-layout .setup-value-ui-layout gwc-label
{
    width: 70%;
}

.gwc-valueranges-colormatcher-layout .setup-color-ui-layout gwc-colorpicker {
    width: 30%;
}

.gwc-valueranges-colormatcher-layout .seperator-layout {
    position: absolute;    
    width: 100%;
    height: 100%;
    pointer-events: none;
    
}

.gwc-valueranges-colormatcher-layout .seperator {
    pointer-events: all;
    position: absolute;
    _left: calc(100%);
    _left: calc(0px);
    transform: translateX(-0.6em);
    _top: calc(50% - 1em);
    top: 2em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    _border: 1px solid white;
    background: linear-gradient(125deg, rgba(60, 60, 60, 0.7) 0%, rgba(30, 30, 30, 0.7) 100%);
    box-shadow:
      -1px -1px 1px rgba(255, 255, 255, 0.5),
      0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5);
    _transition: left ease 0.5s;
}

.gwc-valueranges-colormatcher-layout .seperator {
    pointer-events: all;
    position: absolute;
    _left: calc(100%);
    _left: calc(0px);
    transform: translateX(-0.6em);
    _top: calc(50% - 1em);
    top: 2em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    _border: 1px solid white;
    background: linear-gradient(125deg, rgba(60, 60, 60, 0.7) 0%, rgba(30, 30, 30, 0.7) 100%);
    box-shadow:
      -1px -1px 1px rgba(255, 255, 255, 0.5),
      0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5);
    _transition: left ease 0.5s;
}

.gwc-valueranges-colormatcher-layout .seperator::before {
    position: absolute;
    content: "";
    width: 0.21em;
    height: 0.6em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2em;
    background-color: rgba(20,20,20,1);
    box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4);
    transition: 0.4s all;
}

.gwc-valueranges-colormatcher-layout .seperator:hover::before,
.gwc-valueranges-colormatcher-layout .seperator:active::before {
    background-color: rgb(2, 225, 255);
    box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4), 0 0 2px rgb(2, 225, 255), 0 0 4px rgb(2, 225, 255), 
        0 0 16px rgb(2, 225, 255), 0 0 32px rgb(2, 225, 255), 0 0 64px rgb(2, 225, 255);
}

.gwc-valueranges-colormatcher-layout .seperator:nth-child(odd) span {
    top: -4.5em;
    cursor: pointer;
}

.gwc-valueranges-colormatcher-layout .seperator:nth-child(even) span {
    top: 5em;
    cursor: pointer;
}

.gwc-valueranges-colormatcher-layout .seperator span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    font-size: 0.3em;
    color: white;
    border-radius: 0.7em;
    padding: 0.5em 1em;
    -pointer-events: none;
    user-select: none;
    -background-color: rgba(0,0,0,0.5);
    background: linear-gradient(125deg, rgba(45,45,45,1) 0%, rgba(40,40,40,1) 10%, rgba(40,40,40,1) 90%, rgba(25,25,25,1) 100%);;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.4), 0 1px 8px rgba(0,0,0,0.4);
    _opacity: 0.5;
    word-break: keep-all;
}

gwc-rangeslider {
    display: inline-block;
    min-width: 8em;
}

gwc-rangeslider.disabled {
    pointer-events: none !important;
    opacity: 0.4;
}

.gwc-rangeslider-layout {
    position: relative;
    width: 100%;
    height: 3em;
}

.gwc-rangeslider-layout > .bar {
    position: absolute;
    width: calc(100% );
    height: 0.7em;
    left: 50%;
    top: 50%;
    _border: 1px solid yellow;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
    border-radius: 0.2em;
    background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
    box-shadow: 1px 1px 2px rgba(255,255,255,0.3), inset 0 0 4px rgba(0,0,0,0.4), inset -1px -1px 4px rgba(0,0,0,0.8); 
}

.gwc-rangeslider-layout > .guide {
    position: relative;
    width: calc(100% - 3em);
    height: 0.7em;
    left: 50%;
    top: 50%;
    _border: 1px solid yellow;
    transform: translateX(-50%) translateY(-50%);
}

.gwc-rangeslider-layout > .bar > .left-guard {
    display:none;
    position: absolute;
    width: 1.5em;
    height: 100%;
    background: red;
}

.gwc-rangeslider-layout > .bar > .right-guard {
    display:none;
    position: absolute;
    right: 0;
    width: 1.5em;
    height: 100%;
    background: red;
}

.gwc-rangeslider-layout > .guide > .part-layout {
    position: absolute;
    width: calc(100%);
    height: 100%;      
    top: 0;
    left: -0.725em;
}

.gwc-rangeslider-layout > .guide > .part-layout > .range {
    position: absolute;
    _left: calc(30% + 1.5em); /* RANGE */
    _width: calc(60% - 30% - 1.5em); /* RANGE */
    height: 0.4em;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);;
    box-shadow: inset 0 0 1px rgba(0,0,0,1); 
}

.gwc-rangeslider-layout > .guide > .part-layout > .part1 {
    width: 1.5em;
    height: 3em;
    top: 50%;
    left: 0%; /* POSITION */
    transform: translateY(-50%) translateX(-0.75em);
    position: absolute;
    border-radius: 1.5em 0 0 1.5em;
    background: linear-gradient(125deg, rgba(60,60,60,1) 0%, rgba(30,30,30,1) 100%);
    border-top: 1px solid rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    _opacity: 0.5;
}

.gwc-rangeslider-layout > .guide > .part-layout > .part2 {
    width: 1.5em;
    height: 3em;
    top: 50%;
    left: 100%; /* POSITION */
    transform: translateY(-50%) translateX(0.75em);
    position: absolute;
    border-radius: 0 1.5em 1.5em 0;
    background: linear-gradient(125deg, rgba(60,60,60,1) 0%, rgba(30,30,30,1) 100%);
    border-top: 1px solid rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    _opacity: 0.5;
}

.gwc-rangeslider-layout > .guide > .part-layout > .part1 > .marker {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3em;
    height: 1em;
    _border-radius: 0.2em;
    background-color: rgba(20,20,20,1);
    _box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    border-right: 1px solid rgba(255,255,255,0.4);
    transition: 0.4s all;
}

.gwc-rangeslider-layout > .guide > .part-layout > .part2 > .marker {
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3em;
    height: 1em;
    _border-radius: 0.2em;
    background-color: rgba(20,20,20,1);
    _box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    border-right: 1px solid rgba(255,255,255,0.4);
    transition: 0.4s all;
}

.gwc-rangeslider-layout > .guide > .part-layout > .part1:hover > .marker, 
.gwc-rangeslider-layout > .guide > .part-layout > .part2:hover > .marker,
.gwc-rangeslider-layout > .guide > .part-layout > .part1:active > .marker, 
.gwc-rangeslider-layout > .guide > .part-layout > .part2:active > .marker {
    background-color: rgb(2, 225, 255);
    box-shadow: inset -1px -1px 1px rgba(255,255,255,0.4), 0 0 2px rgb(2, 225, 255), 0 0 4px rgb(2, 225, 255), 
        0 0 8px rgb(2, 225, 255), 0 0 16px rgb(2, 225, 255), 0 0 32px rgb(2, 225, 255);
}

.gwc-rangeslider-layout > .guide > .part-layout > .part1 > gwc-label {
    position: absolute;
    right: 0.2em;
    top: -1.2em;
    font-size: 0.8em;
    max-width: none;
    width: auto;
}

.gwc-rangeslider-layout > .guide > .part-layout > .part2 > gwc-label {
    position: absolute;
    left: 0.2em;
    top: -1.2em;
    font-size: 0.8em;
    max-width: none;
    width: auto;
}

/* gwc-memo */

gwc-memo {
    display: inline-block;
}

gwc-memo textarea {
    width: 100%;
    height: 100%;
    font-size: 1em;
    font-weight: lighter;
    color: rgba(255,255,255,1);
    text-shadow: 0 0 2px rgba(255,255,255,0.9);
    background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
    padding: 0.5em 0.7em;
    border-radius: 0.5em;
    border: none;
    _border-bottom:1px solid rgba(255,255,255,0.3);
    _border-right:1px solid rgba(255,255,255,0.3);
    box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4);
    outline: 0.2em solid rgba(255,255,255,0);
    transition: 0.4s color, 0.4s text-shadow, 0.4s outline;
    line-height: 1.5em;
    resize: none;
}

gwc-memo:not(.readonly) textarea:focus {
    outline: 0.2em solid rgba(80,80,80,1);
}

gwc-memo textarea::placeholder {
    font-size: 0.9em;
    color: rgba(120, 120, 120, 1);
    text-shadow: 0 0 2px rgba(0,0,0,0.9);
}

gwc-memo textarea:disabled {
    background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(30,30,30,0.1) 100%);
    color: rgba(130,130,130,1);
    text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 4px rgba(130,130,130,1);
    box-shadow: inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5), inset -0.6px -0.6px 0.6px rgba(255,255,255,0.2);
    opacity: 0.6;
}

gwc-memo textarea::-webkit-scrollbar {
    width: .4em;
}

gwc-memo textarea::-webkit-scrollbar-thumb {
    background-color: rgb(255,255,255);
    _box-shadow: inset -0.6px -0.6px 0.6px rgba(0,0,0,0.5), inset 0.6px 0.6px 0.6px rgba(255,255,255,0.2);
    _box-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.5);
    border-radius: 0.2em;
}

gwc-textinput {
    display: inline-block;
}

/* gwc-textinput.disabled {
    pointer-events: none !important;
} */

gwc-textinput > .gwc-textinput-layout {
    _backdrop-filter: blur(4px);
    _border: 1px solid red;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 2.5em;
}

gwc-textinput > .gwc-textinput-layout > input {
    position: relative;
    width: calc(100%);
    height: calc(100%);
    padding-left: 0.7em;
    padding-right: 0.5em;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: lighter;
    color: rgba(255,255,255,1);
    text-shadow: 0 0 2px rgba(255,255,255,0.9);

    background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
    border: none;
    border-bottom:1px solid rgba(255,255,255,0.3);
    border-right:1px solid rgba(255,255,255,0.3);
    _box-shadow: inset 0 0 7px rgba(0,0,0,0.9);
    transition: 0.4s color, 0.4s text-shadow, 0.4s outline;
    outline: 0.2em solid rgba(255,255,255,0);
}

gwc-textinput:not(.readonly) > .gwc-textinput-layout > input:focus {
    outline: 0.2em solid rgba(255,255,255,0.2);
}

gwc-textinput.disabled > .gwc-textinput-layout > input {
    background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(30,30,30,0.1) 100%);
    color: rgba(130,130,130,1);
    text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 4px rgba(130,130,130,1);
    box-shadow: inset 0 0 4px rgba(0,0,0,1);
    opacity: 0.6;
}

gwc-textinput > .gwc-textinput-layout > input::placeholder {
    font-size: 0.9em;
    color: rgba(120, 120, 120, 1);
    text-shadow: 0 0 2px rgba(0,0,0,0.9);
}

gwc-textinput > .gwc-textinput-layout > gwc-label {
    display: none !important;
    position: absolute;
    top: 0.7em;
    right: 0.5em;
    font-size: 0.8em;
    transition: top 0.4s, right 0.4s;
} 

gwc-textinput > .gwc-textinput-layout > gwc-label.show {
    display: inline-block !important;
}

gwc-textinput:not(.readonly) > .gwc-textinput-layout > input:focus ~ gwc-label {
    top: -1em;
}

gwc-textinput.highlight input {
    animation: gwc-textinput-highlight-animation 0.5s linear infinite;
    animation-delay: 0s;
    animation-direction: alternate-reverse;
}

@keyframes gwc-textinput-highlight-animation {
    0% {
        outline: 0.2em solid rgba(2, 225, 255, 0);
    }

    100% {
        outline: 0.2em solid rgba(2, 225, 255, 1);
    }
}

gwc-checkbox {
    display: inline-block;
}

gwc-checkbox.disabled {
    pointer-events: none !important;
}

gwc-checkbox > .gwc-checkbox-layout {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    _width: 200px;
    height: 2.5em;
    padding: 0.2em 0.35em;
}

gwc-checkbox > .gwc-checkbox-layout > .part {
    _display: inline-block;
    _padding: 0.2em 0.5em;
    margin: 0 0.2em 0 0;
    width: 1.6em;
    height: 1.6em;
    _text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: bold;
    color: rgba(80,80,80,1);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0);

    background: linear-gradient(125deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 0.3em;
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.3);
    border-left: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1);
    
    pointer-events: none;
    transition: 0.5s all;
}

gwc-checkbox.disabled > .gwc-checkbox-layout > .part {
    border-top: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(125deg, rgba(0,0,0,.15) 0%, rgba(255,255,255,0.01) 100%);
    color: rgba(30,30,30,1);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0);
}

gwc-checkbox > .gwc-checkbox-layout:hover > .part {
    color: rgba(150,150,150,1);
}

gwc-checkbox > .gwc-checkbox-layout > .title {
    _display: inline-block;
    padding-left: 0.4em;
    font-size: 1.1em;
    color: white;
    font-weight: 300;
    _color: #444444;
    text-shadow: 0 0 1px white;
    _text-shadow: 0 0 2px black, 0 0 4px black;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

gwc-checkbox.disabled > .gwc-checkbox-layout > .title {
    color: rgba(80,80,80);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 
        0 0 4px rgb(0,0,0), 0 0 8px rgb(0,0,0), 0 0 16px rgb(0,0,0);
}

gwc-checkbox > .gwc-checkbox-layout > input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    _z-index: 1;
}

gwc-checkbox > .gwc-checkbox-layout > input:checked ~ .part {
    color: rgb(2, 225, 255);
    text-shadow: 0 0 8px rgb(2, 225, 255), 0 0 16px rgb(2, 225, 255), 
        0 0 32px rgb(2, 225, 255);
}   

gwc-checkbox.disabled > .gwc-checkbox-layout > input:checked ~ .part {
    color: rgba(2, 225, 255, 0.2);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0);
}

gwc-radiogroup {
    display: inline-block;
}

gwc-radiogroup.disabled {
    pointer-events: none !important;
}

gwc-radiogroup > .gwc-radiogroup-layout {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    gap: 0 1em;
}

gwc-radiogroup > .gwc-radiogroup-layout > .item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 2.5em;
    padding: 0.2em 0.35em;
}

gwc-radiogroup > .gwc-radiogroup-layout > .item > .part {
    margin: 0 0.4em 0 0;
    text-align: center;
    width: 1.65em;
    height: 1.65em;
    line-height: 1.4em;
    font-size: 1em;
    font-weight: bold;
    color: rgba(10,10,10,0.5);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0);

    background: linear-gradient(125deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    border-top:1px solid rgba(255,255,255,0.3);
    border-left:1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 1px rgba(255,255,255,0.2),
        1px 1px 2px rgba(0,0,0,1), 1px 1px 4px rgba(0,0,0,1), 1px 1px 8px rgba(0,0,0,1);
    
    pointer-events: none;
    transition: 0.5s color, 0.5s text-shadow;
}

gwc-radiogroup.disabled > .gwc-radiogroup-layout > .item > .part {
    border-top: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(125deg, rgba(0,0,0,.15) 0%, rgba(255,255,255,0.01) 100%);
    color: rgba(30,30,30,1);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0);
}

gwc-radiogroup > .gwc-radiogroup-layout > .item:hover > .part {
    color: rgba(150,150,150,1);
}

gwc-radiogroup > .gwc-radiogroup-layout > .item > .title {
    _display: inline-block;
    font-size: 1.1em;
    color: white;
    text-shadow: 0 0 6px white;
    letter-spacing: 0.1em;
    padding-left: 0.4em;
    white-space: nowrap;
}

gwc-radiogroup.disabled > .gwc-radiogroup-layout > .item > .title {
    color: rgba(80,80,80);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 
        0 0 4px rgb(0,0,0), 0 0 8px rgb(0,0,0), 0 0 16px rgb(0,0,0);
}

gwc-radiogroup > .gwc-radiogroup-layout > .item > input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    _z-index: 1;
}

gwc-radiogroup > .gwc-radiogroup-layout > .item > input:checked ~ .part {
    color: rgb(2, 225, 255);
    text-shadow: 0 0 2px rgb(2, 225, 255), 0 0 4px rgb(2, 225, 255), 
        0 0 8px rgb(2, 225, 255), 0 0 16px rgb(2, 225, 255);
}


gwc-radiogroup.disabled > .gwc-radiogroup-layout > .item > input:checked ~ .part {
    color: rgba(2, 225, 255, 0.2);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0);
}

/* Switch */

gwc-switch {
    display: inline-block;
}

gwc-switch.disabled {
    pointer-events: none !important;
}

gwc-switch > .gwc-switch-layout {
    position: relative;
    background: radial-gradient(circle at center bottom, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.99) 100%);
    _background: linear-gradient(125deg, rgba(0,0,0,0.7) 0%, rgba(20,20,20,0.1) 100%);
    _background: rgba(0,0,0,0.5);
    border-radius: 1.65em;
    backdrop-filter: blur(6px);
    _width: 8em;
    width: 6em;
    height: 3.3em;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    box-shadow: inset 0 0 7px rgba(0,0,0,0.9), -1px -1px 2px rgba(255,255,255,0.2) ;
    _transition: 0.4s all;
}

gwc-switch > .gwc-switch-layout > .part {
    position: absolute;
    _width: 4em;
    width: 3em;
    __height: 2.2em;
    line-height: 2.15em;
    _margin: 10px;
    _padding-bottom: 0.2em;
    top: 0.25em;
    left: 0.3em;
    _background: rgba(0,0,0,0.15);
    _background: linear-gradient(125deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(125deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 30px;
    border-top:1px solid rgba(255,255,255,0.4);
    border-left:1px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: rgba(0,0,0,1);
    _text-shadow: 0 0 2px rgb(0,0,0), 0 0 4px rgb(0,0,0), 0 0 8px rgb(0,0,0), 0 0 16px rgb(0,0,0);
    text-shadow: 0 0 2px rgb(0,0,0);
    pointer-events: none;
    transition: 0.5s left, 0.5s color, 0.5s text-shadow, 0.5s opacity;
}

gwc-switch.disabled > .gwc-switch-layout > .part {
    border-top:1px solid rgba(255,255,255,0.2);
    border-left:1px solid rgba(255,255,255,0.2);
    opacity: 0.3;
}

gwc-switch.disabled gwc-label {
    text-shadow: none;
    color: rgba(150,150,150);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 
        0 0 4px rgb(70,70,70), 0 0 8px rgb(70,70,70), 0 0 16px rgb(70,70,70);
}

gwc-switch > .gwc-switch-layout > input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

gwc-switch > .gwc-switch-layout > input:checked ~ .part {
    _left: 2.35em;
    left: 1.7em;
    color: rgb(2, 225, 255);
    _font-size: 1.4em;
    text-shadow: 0 0 1px rgb(2, 225, 255), 0 0 2px rgb(2, 225, 255), 
        0 0 4px rgb(2, 225, 255), 0 0 8px rgb(2, 225, 255), 0 0 16px rgb(2, 225, 255);
}

gwc-switch > .gwc-switch-layout > input:hover:not(:checked) ~ .part {
    color: rgb(70,70,70);
    text-shadow: 0 0 1px rgb(0,0,0), 0 0 2px rgb(0,0,0), 
        0 0 4px rgb(70,70,70), 0 0 8px rgb(70,70,70), 0 0 16px rgb(70,70,70);
}

gwc-switch > .gwc-switch-layout > gwc-label {
    position: absolute;
    display: none !important;
    top: calc(50% - 1em);
    _left: 8em;
    left: 6em;
    width: auto;
    max-width: none !important;
    _padding: 0.2em 0.5em;
    font-size: 0.8em;
}     

gwc-switch > .gwc-switch-layout > gwc-label.show {
    display: inline-block !important;
}

/* gwc-waiter */

gwc-waiter {
    width: 16em;
    height: 16em;
    display: inline-block;
    z-index: 9999;
}

gwc-waiter > .gwc-waiter-layout {
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

gwc-waiter > .gwc-waiter-layout > .gwc-waiter-shapes {
    position: relative;
    width: 100%;
    height: 100%;
    transition: 2s;
    overflow: hidden;
}

gwc-waiter > .gwc-waiter-layout > .gwc-waiter-shapes > span {
    position: absolute;
    display: block;
    border: 1px solid black(0,0,0,0.8);
}

gwc-waiter > .gwc-waiter-layout > .gwc-waiter-shapes > span:nth-child(1) {
    top: 0px;
    left: -100%;
    width: 100%;
    height: 20%;
    background: linear-gradient(90deg, transparent, #ffffff);
    animation: gwc-waiter-part-animation1 1s linear infinite;
    animation-delay: 0s;
}

@keyframes gwc-waiter-part-animation1 {
    0% {
        left: -100%
    }

    100% {
        left: 100%;
    }
}

gwc-waiter > .gwc-waiter-layout > .gwc-waiter-shapes > span:nth-child(2) {
    right: 0px;
    top: -100%;
    width: 20%;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ffffff);
    animation: gwc-waiter-part-animation2 1s linear infinite;
    animation-delay: 0.5s;
}

@keyframes gwc-waiter-part-animation2 {
    0% {
        top: -100%
    }

    100% {
        top: 100%;
    }
}

gwc-waiter > .gwc-waiter-layout > .gwc-waiter-shapes > span:nth-child(3) {
    bottom: 0px;
    left: -100%;
    width: 100%;
    height: 20%;
    background: linear-gradient(-90deg, transparent, #ffffff);
    animation: gwc-waiter-part-animation3 1s linear infinite;
    animation-delay: 0s;
}

@keyframes gwc-waiter-part-animation3 {
    0% {
        left: 100%
    }

    100% {
        left: -100%;
    }
}

gwc-waiter > .gwc-waiter-layout > .gwc-waiter-shapes > span:nth-child(4) {
    left: 0px;
    top: -100%;
    width: 20%;
    height: 100%;
    background: linear-gradient(0deg, transparent, #ffffff);
    animation: gwc-waiter-part-animation4 1s linear infinite;
    animation-delay: 0.5s;
}

@keyframes gwc-waiter-part-animation4 {
    0% {
        top: 100%
    }

    100% {
        top: -100%;
    }
}

.gwc-waiter-layout > .gwc-waiter-ui {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

.gwc-waiter-layout > .gwc-waiter-ui > gwc-label {
    font-size: 1.1em;
    _animation: gwc-waiter-blanking 1s infinite alternate-reverse;
    color: white;
    _font-weight: bold;
    padding: 0.5em 0.8em;
    border-radius: 0.5em;
    _background: rgba(160,160,160,1);
    background-color: rgba(0,0,0,0.9);
    max-width: none;
    box-shadow: 0 0 2px black, 0 0 10px black;
    _border: 1px solid #ddd;
    display: none;
}

.gwc-waiter-layout > .gwc-waiter-ui > gwc-label p {
    padding: 0.25em 0;
}

.gwc-waiter-layout > .gwc-waiter-ui > gwc-label.show {
    display: inline-block;
}

.gwc-waiter-layout > .gwc-waiter-ui > gwc-button {
    width: 7em;
    zoom: 0.8;
    display: none;
}

.gwc-waiter-layout > .gwc-waiter-ui > gwc-button.show {
    display: inline-block;
}

.gwc-waiter-protecter {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    _backdrop-filter: blur(2px);
    /* background: rgba(0,0,0,0.7); */
    align-items: center;
    justify-content: center;
    animation: gwc-waiter-protecter 1s;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    opacity: 0;
    z-index: 9999;
}

.gwc-waiter-protecter.no-delay {
    animation-delay: unset;
}

@keyframes gwc-waiter-protecter {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.gwc-waiter-protecter.hide .gwc-waiter-layout > .gwc-waiter-shapes {
    animation: gwc-waiter-protecter-hide-shapes 1s;
    animation-fill-mode: forwards;
}

.gwc-waiter-protecter.hide .gwc-waiter-layout > .gwc-waiter-ui {
    animation: gwc-waiter-protecter-hide-ui 0.8s;
    animation-fill-mode: forwards;
}

@keyframes gwc-waiter-protecter-hide-shapes {
    0% {
        background-color: rgba(0,0,0,0);
    }    
    20% {
        box-shadow: 0 0 10px white, 0 0 50px white, 0 0 100px white;
        background-color: rgba(255,255,255,0);
        transform: scale(100%);
        opacity: 1;
    }
    100% {
        background-color: rgba(255,255,255,1);
        transform: scale(10%);
        opacity: 0;
    }
}

@keyframes gwc-waiter-protecter-hide-ui {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* gwc-message */

.gwc-message-layout > gwc-card {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    opacity: 0;
    text-align: center;
    padding-bottom: 1.2em !important;
    transition: 0.5s all;
}

.gwc-message-layout > gwc-card .gwc-card-layout {
    padding: 1em;
}

.gwc-message-layout gwc-card.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.gwc-message-layout .content {
    display: flex;
    align-items: center;
    justify-content: center;
    _width: 500px;
    _height: 200px;
    gap: 2em;
    font-size: 1.1em;
    _border: 1px solid red;
    padding: 0.5em 1em 1em 1em;
    text-shadow: 0 0 1px black, 0 0 4px black;
    line-height: 1.6em;
    letter-spacing: 0.1em;
}

.gwc-message-layout .icon-alert,
.gwc-message-layout .icon-message {
    position: relative;
    width: 2.1em;
    height: 2.1em;
    _border: 1px solid red;
    animation: gws-message-icon-rotating 3s linear infinite;
}

@keyframes gws-message-icon-rotating {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

@keyframes gws-message-blink {
    0% {
        margin-left: 1em;
    }
    25% {
        margin-left: -1em;
    }
    50% {
        margin-left: 1em;
    }
    75% {
        margin-left: -1em;
    }
    100% {
        margin-left: 1em;
    }
}

.gwc-message-layout svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gwc-message-layout svg:nth-child(1) {
    filter: blur(6px);
}

.gwc-message-layout .message {
    color: white;
    text-align: left;
    white-space: nowrap;
    letter-spacing: -0.05em;
}

.gwc-message-layout gwc-button {
    display: inline-block;
}

.gwc-message-protector {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    _background: rgba(255,0,0,0.5);
}

.gwc-alert-layout gwc-card {
    _position: absolute !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    opacity: 0;
    text-align: center;
    padding-bottom: 1.2em !important;
    transition: 0.5s all;
}

/* 
    message와 alert에 대한 기능을 card로 구현하는 것은 올바르지 않는 것으로 생각됨 
    .gwc-resizable-panel의 원래 position은 absolute인데 이 값으로 하면 
    UI 표시가 화면 중앙에 안되는 문제가 발생함
*/
.gwc-message-layout gwc-card gwc-resizable-panel,
.gwc-alert-layout gwc-card gwc-resizable-panel {
    position: relative !important;
}

.gwc-alert-layout > gwc-card .gwc-card-layout {
    padding: 1em;
}

.gwc-alert-layout gwc-card.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.gwc-alert-layout .content {
    display: flex;
    align-items: center;
    justify-content: center;
    _width: 500px;
    _height: 200px;
    gap: 2em;
    font-size: 1.1em;
    _border: 1px solid red;
    padding: 0.5em 1em 1em 1em;
    text-shadow: 0 0 1px black, 0 0 4px black;
    line-height: 1.6em;
    letter-spacing: 0.1em;
}

.gwc-alert-layout .header-icon {
    position: relative;
    width: 2.1em;
    height: 2.1em;
    _border: 1px solid red;
    animation: gwc-alert-icon-rotating 3s linear infinite;
}

@keyframes gwc-alert-icon-rotating {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

@keyframes gwc-alert-blink {
    0% {
        margin-left: 1em;
    }
    25% {
        margin-left: -1em;
    }
    50% {
        margin-left: 1em;
    }
    75% {
        margin-left: -1em;
    }
    100% {
        margin-left: 1em;
    }
}

.gwc-alert-layout svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gwc-alert-layout svg:nth-child(1) {
    filter: blur(8px);
}

.gwc-alert-layout .message {
    white-space: nowrap;
    color: white;
    text-align: left;
    letter-spacing: -0.05em;
}

.gwc-alert-layout gwc-button {
    width: 10em;
}

.gwc-alert-layout .buttons-layout {
    display: flex;
    gap: 0.5em;
    justify-content: center;
}

.gwc-alert-layout .yes.hide {
    display: none;
}

.gwc-alert-layout .no.hide {
    display: none;
}

.gwc-alert-layout .cancel.hide {
    display: none;
}

.gwc-alert-protector {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    _background: rgba(255,0,0,0.5);
}

.gwc-popup-menu-layout {
    position: absolute;
    _width: 120px;
    _height: 300px;
    _border: 1px solid red;
    _background-color: red;
    opacity: 0;
    color: white;
    cursor: pointer;
    border-radius: 0.4em;
    _backdrop-filter: blur(3px);
    background: linear-gradient(125deg, rgba(50,50,50,1) 0%, rgba(40,40,40,1) 60%, rgba(20,20,20,1) 100%);
    _border-top: 1px solid rgba(255,255,255,0.4);
    _border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: inset 0.6px 0.6px 0.6px rgba(255,255,255,0.2), 
        0 0 1px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.9);
    overflow: hidden;
    animation: gwc-popup-menu-show 0.5s;
    animation-fill-mode: forwards;
}

@keyframes gwc-popup-menu-show {
    0% {
        opacity: 0;
        _transform: scale(0);
    }
    100% {
        opacity: 1;
        _transform: scale(1);
    }
}

.gwc-popup-menu-layout.show {
    _display: initial;
    opacity: 1;
}

.gwc-popup-menu-layout .sub-menu {
    display: flex;
    justify-content: space-between;;
    align-items: center;
    padding: 0.5em 1.5em 0.5em 1em;
    transition: 0.4s background-color;
}

.gwc-popup-menu-layout .sub-menu .text {
    padding-left: 2.3em;
    padding-right: 2em;
    font-size: 0.9em;
    font-weight: 800;
    _text-shadow: 0 0 1px black, 0 0 8px white;
    letter-spacing: 0.2em;
}

.gwc-popup-menu-layout .sub-menu .arrow {
    font-size: 0.7em;
}

.gwc-popup-menu-layout .menu-item {
    _border: 1px solid yellow;
    display: flex;
    _justify-content: center;
    align-items: center;
    padding: 0.5em 1.5em 0.5em 1em;
    transition: 0.4s background-color;
}

.gwc-popup-menu-layout .menu-seperator {
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.8);
    margin: 0.4em 1em;
}

.gwc-popup-menu-layout .menu-item:hover {
    background-color: rgba(0,0,0,0.4);
}

.gwc-popup-menu-layout .menu-item .icon {
    width: 1.4em;
    height: 1.4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.gwc-popup-menu-layout .menu-item .text {
    padding-left: 0.6em;
    font-size: 1em;
    font-weight: 300;
    _text-shadow: 0 0 1px black, 0 0 8px white;
    letter-spacing: -0.05em;
}

.gwc-popup-menu-layout .menu-item .checkbox {
    margin-left: auto;
    padding-left: 7em;
    color: rgba(80,80,80,0.7);
    text-shadow: 0 0 1px rgb(0 0 0), 0 0 2px rgb(0 0 0), 0 0 4px rgb(0 0 0);
    transition: 0.4s text-shadow;
}

.gwc-popup-menu-layout .menu-item .checkbox.checked {
    color: rgb(2, 225, 255);
    text-shadow: 0 0 8px rgb(2, 225, 255), 0 0 16px rgb(2, 225, 255), 
        0 0 32px rgb(2, 225, 255);
}

gwc-search-input {
    display: inline-block;
    width: 20em; 
    transition: 0.3s width;
}

gwc-search-input:not(.focus) {
    width: 7em; /* SEARCH만 보이는 크기 */
}

gwc-search-input > .gwc-search-input-layout {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    color: white;
    -border: 1px solid red;
    width: 100%;
    _cursor: pointer;
}

gwc-search-input > .gwc-search-input-layout > svg {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
}

gwc-search-input > .gwc-search-input-layout > svg:nth-child(2) {
    position: absolute;
    left: 0;
    transition: 0.5s all;
}

gwc-search-input > .gwc-search-input-layout > .part {
    margin-left: 1.5em;
    display: flex;
    position: relative;
    align-items: center;
    width: calc(100% - 1.5em);
    -border: 1px solid yellow;
    _height: 2em; /* ! */
}

gwc-search-input > .gwc-search-input-layout > .part > .label {
    position: absolute;
    _border: 1px solid red;
    padding-left: 0.5em;
    line-height: 100%;
    display: inline-block;
    font-family: Raleway;
    letter-spacing: 0.2em;
    opacity: 1;
    transition: 0.5s all;
    font-size: 0.8em;
    pointer-events: none;
}

gwc-search-input > .gwc-search-input-layout:hover > .part > .label {
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px white, 0 0 8px white;
}

gwc-search-input > .gwc-search-input-layout:hover > svg:nth-child(2) {
    filter: blur(2px);
}

gwc-search-input > .gwc-search-input-layout > .part > input {
    position: relative;
    _width: 30em;
    width: 100%;
    opacity: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(50,50,50,1);
    color: white;
    _margin-top: -5px;
    /* padding-left: 0.5em;
    padding-bottom: 5px; */
    padding: 0.3em 0.5em;
    margin-left: 0.2em;
    border-radius: 0.25em;
    _box-shadow: inset 0 -10px 10px -8px rgba(0,0,0,1);
    box-shadow: inset 0 0 20px rgba(0,0,0,1);
    font-weight: 200;
    font-size: 1em;
    outline: none;
}

gwc-search-input > .gwc-search-input-layout > .part > input::placeholder {
    font-size: 1em;
}

gwc-search-input.focus > .gwc-search-input-layout > .part > input {
    opacity: 1;
}

gwc-search-input.always-open > .gwc-search-input-layout > .part > input {
    -transition: none;
}

gwc-search-input.focus > .gwc-search-input-layout > .part > input ~ .label {
    opacity: 0;
}

.gwc-search-input-history-list-layout {
    _display: inline-block;
    position: absolute;
    opacity: 0;
    transition: 1s opacity;
    backdrop-filter: blur(4px);
    _z-index: 999999;
}

.gwc-search-input-history-list-layout.show {
    opacity: 1;
}

.gwc-search-input-history-list-layout > div {
    background: linear-gradient(125deg, rgba(40,40,40,1) 0%, rgba(30,30,30,0.9) 60%, rgba(20,20,20,0.8) 100%);
    _border-top: 1px solid rgba(255,255,255,0.4);
    _border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: inset 0.6px 0.6px 0.6px rgba(255,255,255,0.5), inset -0.6px -0.6px 2px rgba(0,0,0,1),
         0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    padding: 0.5em 0.5em 0.2em 0.5em;
}

.gwc-search-input-history-list-layout > div > gwc-vscrollview {
    color: white;
    width: 100%;
    _height: 10.1em; /* by js */
}

.gwc-search-input-history-list-layout > div > gwc-vscrollview .history-item {
    padding: 0.2em 1.5em 0.3em 0.5em;
    display: flex;
    cursor: pointer;
    transition: 0.4s background-color;
    _border: 1px solid red;
}

.gwc-search-input-history-list-layout > div > gwc-vscrollview .history-item:hover {
    background-color: rgba(255,255,255,0.1);
}

.gwc-search-input-history-list-layout > div > gwc-vscrollview .history-item .value  {
    white-space: nowrap;
    margin-right: 2em;
    pointer-events: none;
}

.gwc-search-input-history-list-layout > div > gwc-vscrollview .history-item .time {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    gap: 0.5em;
    color: #999999;
    font-size: 0.8em;
    font-weight: 300;
    white-space: nowrap;
    pointer-events: none;
}

.gwc-search-input-history-list-layout > div > gwc-vscrollview .history-item .time svg {
    width: 1.6em;
}

/* gwc-resizable-panel */

.gwc-resizable-panel-layout {
    display: inline-block;
    position: absolute;
    _transition: 0.4s;
    _border: 1px solid yellow;
}

.gwc-resizable-panel-layout.show-handler {
    user-select: none;
}

.gwc-resizable-panel-layout.show-handler * {
    pointer-events: none;
}

.gwc-resizable-panel-layout-handler {
    position: absolute;
    background-color: rgb(2, 225, 255);;
    pointer-events: none;

    animation-duration: 0.5s;
    animation-name: gwc-resizable-panel-layout-handler;
    animation-direction: alternate;
    animation-iteration-count: infinite;

    z-index: 999999;
}

@keyframes gwc-resizable-panel-layout-handler {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.8;
    }
}

/* gwc-tree */

gwc-tree {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
}

gwc-tree .gwc-tree-item { /* 파일과 폴더에 대한 DOM 요소를 동일하게 처리하기 위함 */
    _overflow: hidden;
}

gwc-tree .gwc-tree-item.selected { 
    _border: 1px dashed rgba(255,255,255,0.3);
}

gwc-tree .gwc-tree-item.selected::after {
    content: "";
    position: absolute;
    margin: 2px;
    left: -2px;
    top: -2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    animation-duration: 1s;
    animation-name: gwc-tree-item-selected;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    border-radius: 0.5em;
    border-width: 2px;
    border-style: solid;
}

@keyframes gwc-tree-item-selected {
    0% {
        background-color: transparent;
        border-color: transparent;
        opacity: 0.1;
    }
    100% {
        background-color: rgba(2,255,255, 0.1);
        border-color: rgba(2,255,255, 0.2);
        opacity: 0.8;
    }
}

gwc-tree .gwc-tree-folder {
    _border: 1px solid white;
    _padding: 0.2em 0;
}

gwc-tree .gwc-tree-folder-header {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5em;
    margin-bottom: 2px;
    cursor: pointer;

    background: linear-gradient(125deg, rgba(55,55,55,1) 0%, rgba(50,50,50,1) 20%, rgba(50,50,50,1) 40%, rgba(35,35,35,1) 100%);
    box-shadow: inset 0.6px 0.6px 0.6px rgba(255,255,255,0.2),
        0 1px 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.7);        
    border-radius: 0.5em;
}

gwc-tree .gwc-tree-folder-files .gwc-tree-folder-header:before  {
    content: "";
    position: absolute;
    border-top: 1px solid rgba(255,255,255,0.2);
    left: -0.55em;
    top: 50%;
    width: 0.5em;
    height: 1px;
}

gwc-tree .gwc-tree-folder-header-opener {
    _border: 1px solid green;
    width: 1.5em;
    height: 1.5em;
    margin-left: 0.2em;
}

gwc-tree .gwc-tree-folder.open > .gwc-tree-folder-header > .gwc-tree-folder-header-opener > svg:last-child {
    display: none;
}

gwc-tree .gwc-tree-folder:not(.open) > .gwc-tree-folder-header > .gwc-tree-folder-header-opener > svg:first-child {
    display: none;
}

gwc-tree .gwc-tree-folder-header-title {
    user-select: none;
    color: white;
    font-size: 1em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    letter-spacing: 0.1em;
    font-weight: bold;
}

gwc-tree .gwc-tree-folder-files {
    _position: relative;
    _border: 1px solid red;
    border-left: 1px solid rgba(255,255,255,0.2);
    padding-left: 0.5em;
    margin-left: 1.25em;
    margin-bottom: 0.5em;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

gwc-tree .gwc-tree-folder:not(.open) > .gwc-tree-folder-files {
    display: none;
}

gwc-tree .gwc-tree-folder-files .gwc-tree-folder-files-file:before  {
    content: "";
    position: absolute;
    border-top: 1px solid rgba(255,255,255,0.2);
    left: -0.55em;
    top: 50%;
    width: 0.5em;
    height: 1px;
}

gwc-tree .gwc-tree-folder-files-file {
    position: relative;
    padding: 0.5em 0.5em 0.5em 0.75em;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.8;

    background: linear-gradient(125deg, rgba(25,25,25,1) 0%, rgba(30,30,30,1) 20%, rgba(30,30,30,1) 40%, rgba(15,15,15,1) 100%);
    box-shadow: inset 0.6px 0.6px 0.6px rgba(255,255,255,0.2),
        0 1px 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.7);        
    border-radius: 0.5em;    
}

gwc-tree .gwc-tree-folder-header:hover {
    _border-radius: 0.5em;
    _background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
}

gwc-tree .gwc-tree-folder-files-file:hover {
    _border-radius: 0.5em;
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
}

gwc-tree .gwc-tree-folder-files-file-icon {
    width: 1.2em;
    height: 1.2em;
    _background: no-repeat center/100% url(./examples/images/icon2.png);

    /* border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.7),
        inset 1px 1px 10px rgba(255,255,255,0.1);
    border-radius: 50%;         */
}

gwc-tree .gwc-tree-folder-files-file-title {
    color: rgba(255,255,255,0.7);
    font-size: 1em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    letter-spacing: -0.05em;
    margin-right: auto;
}

gwc-tree .gwc-tree-item-tag {
    color: rgba(255,255,255,0.5);
    font-size: 0.7em;
    margin-left: 0.4em;
    padding: 0.5em 0.6em;
    background: linear-gradient(125deg, rgba(25,25,25,1) 0%, rgba(30,30,30,1) 20%, rgba(30,30,30,1) 40%, rgba(15,15,15,1) 100%);
    box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.2), inset 0.6px 0.6px 0.6px rgba(0,0,0,1);
    border-radius: 0.5em;        
    display: none;
}

gwc-tree .gwc-tree-item-tag.show {
    display: inline-block;
}

/* gwc-input */

.gwc-input-dialog-layout .gwc-card-layout {
    padding: 0.5em 1em;
}

.gwc-input-dialog-layout .input-part {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.gwc-input-dialog-layout .input-part gwc-textinput {
    width: 25em;
}

.gwc-input-dialog-layout .buttons-part {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-top: 1em;
}

/* ModalDialog */

.gwc-modal-dialog-layout {
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0;
    _background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    /* opacity: 0;
    animation: gwc-modal-dialog-show 0.5s;
    animation-fill-mode: forwards; */
}

@keyframes gwc-modal-dialog-show {
    0% {
        opacity: 0;
        transform: translateY(-100px);
        /* transform: scale(0); */
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        /* transform: scale(1); */
    }
}

.gwc-modal-dialog-layout gwc-resizable-panel {
    _position: absolute;
    _border: 1px solid red;
    _overflow: hidden;
}

.gwc-modal-dialog-layout .gwc-modal-dialog-layout-dialog {
    _border: 1px solid yellow;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;

    opacity: 0;
    animation: gwc-modal-dialog-show .7s;
    animation-fill-mode: forwards;
}

.gwc-modal-dialog-layout .gwc-modal-dialog-layout-dialog .gwc-modal-dialog-layout-dialog-title {
    font-weight: bold;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: white;
    background: linear-gradient(125deg, rgba(45,45,45,1) 0%, rgba(40,40,40,1) 10%, rgba(40,40,40,1) 90%, rgba(25,25,25,1) 100%);
    box-shadow: 
        inset 0.6px 0.6px 0.6px rgba(255,255,255,0.7),
        inset -0.6px -0.6px 0.6px rgba(0,0,0,0.7),
        0 0 4px rgba(0,0,0,0.7), 
        0 0 14px rgba(0,0,0,0.7), 
        0 0 28px rgba(0,0,0,0.4);    
    height: 1.9em;
    border-radius: 0.4em 0.4em 0 0;
    position: relative;
    user-select: none;
    letter-spacing: -0.05em;
}

.gwc-modal-dialog-layout .gwc-modal-dialog-layout-dialog-title .gwc-modal-dialog-layout-dialog-close {
    -display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0.4em;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.4s;
}
/* 
.gwc-modal-dialog-layout .gwc-modal-dialog-layout-dialog-title .gwc-modal-dialog-layout-dialog-close svg {
    width: 90%;
    height: 90%;
} */

.gwc-modal-dialog-layout .gwc-modal-dialog-layout-dialog .gwc-modal-dialog-layout-dialog-title .gwc-modal-dialog-layout-dialog-close:hover {
    box-shadow: 0 0 1px rgba(255,255,255,1), 0 0 3px rgba(255,255,255,1);
    background-color: rgba(255,255,255, 0.5);
}

.gwc-modal-dialog-layout .gwc-modal-dialog-layout-dialog .gwc-modal-dialog-layout-dialog-content {
    border-radius: 0 0 0.4em 0.4em;
    background: linear-gradient(125deg, rgba(60,60,60,1) 0%, rgba(40,40,40,1) 60%, rgba(30,30,30,0.8) 100%);
    _border-top: 1px solid rgba(255,255,255,0.4);
    _border-left: 1px solid rgba(255,255,255,0.4);
    box-shadow: 
        inset 0.6px 0.6px 0.6px rgba(255,255,255,0.7),
        inset -0.6px -0.6px 0.6px rgba(0,0,0,0.7),
        0 0 4px rgba(0,0,0,0.7), 
        0 0 14px rgba(0,0,0,0.7), 
        0 0 28px rgba(0,0,0,0.4);
    flex: 1;
    _height: 100%;
}

/* ProgressDialog */

.gwc-progress-dialog {}

.gwc-progress-dialog .gwc-card-layout::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 5%;
    height: 100%;
    background: rgba(255,255,255,0.4);
    transform: skewX(-45deg);
    animation: gws-progress-dlg-highlighting 2s linear 1s infinite ;
    opacity: 0.7;
}

@keyframes gws-progress-dlg-highlighting {
    0% {
        _opacity: 1;
        left: -30%;
        _filter: blur(20px);
    }

    5% {
        _filter: blur(1px);
    }

    25%, 100% {
        _opacity: 0;
        left: 130%;
        _filter: blur(30px);
    }
}

.gwc-progress-dialog .gwc-card-layout {
    overflow: hidden;
    position: relative;
    width: 20em;
    padding: 2.5em 2em 1em;
}

.gwc-progress-dialog gwc-progress {
    width: 100%;
}

.gwc-progress-dialog .progress-dialog-buttons {
    display: flex;
    padding-top: 0.5em;
    justify-content: center;
    align-items: center;
}

/** 
 * 대화창이나 카드 등이 표시될때 사용되는 에니메이션 
 * 이와 동일한 효과에 대한 CSS를 .gwc-show-animation를 이용해 코드를 개선해야 함
 **/

.gwc-show-animation {
    opacity: 0;
    animation: gwc-show-animation 0.5s;
    animation-fill-mode: forwards;
}

@keyframes gwc-show-animation {
    0% {
        opacity: 0;
        __transform: scale(0);
    }
    100% {
        opacity: 1;
        __transform: scale(1);
    }
}

/* Grid */

gwc-grid {
    display: inline-block;
    _position: relative;
}

.gwc-grid-layout {
    z-index: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    _box-shadow:  -0.6px -0.6px 1px rgba(255,255,255,0.5), 0 0 7px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.9), 0 0 28px rgba(0,0,0,0.9);
    box-shadow: inset 0.6px 0.6px 10px rgba(0,0,0,0.5), 
        inset 0.6px 0.6px 2px rgba(0,0,0,0.5), 
        inset -0.6px -0.6px 1px rgba(255,255,255,0.5),
        -0.6px -0.6px 5px rgba(0,0,0,0.5),
        -0.6px -0.6px 1px rgba(0,0,0,0.5);
    _box-shadow: inset 0.6px 0.6px 10px rgba(0,0,0,0.5), 
        inset 0.6px 0.6px 2px rgba(0,0,0,0.5), 
        inset -0.6px -0.6px 1px rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.5);
    border-radius: 0.5em;
}

.gwc-grid-layout::-webkit-scrollbar {
    width: .4em;
    height: .4em;
    background-color: transparent;
}

.gwc-grid-layout::-webkit-scrollbar-thumb {
    background-color: rgb(255,255,255);
    border-radius: 0.2em;
}

.gwc-grid-layout::-webkit-scrollbar-corner {
    background-color: transparent;
}

.gwc-grid-layout table {
    position: absolute;
    border-collapse: collapse;
    width: 100%;
}

.gwc-grid-layout table th {
    color: white;
    text-align: left;
    border-right: 0.5px solid rgba(60,60,60,1);
    border-bottom: 0.5px solid rgba(60,60,60,1);
    padding: 0.3em 1em;
    letter-spacing: 0.2em;
    white-space: nowrap;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: linear-gradient(125deg, rgba(55,55,55,1) 0%, rgba(50,50,50,1) 20%, rgba(50,50,50,1) 40%, rgba(35,35,35,1) 100%);
}

.gwc-grid-layout table td {
    color: white;
    border-right: 0.5px solid rgba(60,60,60,1);
    padding: 0.3em 1em;
    border-collapse: collapse;

    white-space: nowrap;
    -max-width: 150px; /* remove white-space: nowrap; */
}

.gwc-grid-layout table th:last-child, .gwc-grid-layout table td:last-child {
    border-right: none;
}

.gwc-grid-layout table th:nth-child(1).enabled {
    position: sticky;
    left: 0;
    z-index: 1;
}

.gwc-grid-layout table td:nth-child(1).enabled {
    position: sticky;
    left: 0;
}

.gwc-grid-layout table tr td {
    background-color: rgba(25,25,25,1);
    transition: 0.4s background-color;
    user-select: text !important;
}

.gwc-grid-layout table th:hover {
    cursor: pointer;
}

.gwc-grid-layout table tr:nth-child(2n-1) td {
    background-color: rgba(0,0,0,1);
}

.gwc-grid-layout table tr.selected td {
    background-color: rgba(255,255,255,0.5);
}

.gwc-grid-layout table tr:hover td {
    background-color: rgba(255,255,255,1);
    cursor: pointer;
}


.gwc-grid-layout table tr:hover td {
    color: rgba(0,0,0,1);
}

.gwc-grid-layout table tr td:hover {
    background-color: rgba(255,255,255,1);
    font-weight: bold;
}