:root { --yt-main-gray: #c2c7d0; --yt-main-black: #212529; --yt-main-gray-hover: #c2c7d0; --yt-gray: #505050; --yt-gray-hover: #3c3c3c; --yt-gray-2: #8f8c8c; --yt-gray-2-hover: #646060; --yt-gray-3: #ededed; --yt-gray-4: #dddddd; --yt-pink: #ff95d0; --yt-pink-hover: #ef84c0; --yt-red-2: #d34949; --yt-yellow-1: #ffc902; }


.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header { background: rgba(0, 0, 0, 0.03); }

.btn-sm-2 { padding: 2px 19px; }

.table td { word-break: break-all; }

label[id$='-error'].error { color: var(--yt-red-2); }

/*[id^=yt_tooltip] { min-width: 650px !important; }*/

.circle-light { display: inline-block; width: 25px; height: 25px; border-radius: 50px; }

.light-flash { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-bg 0.5s linear infinite; }

.light-flash-c { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c 0.5s linear infinite; }

.light-flash-c-bd { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c-bd 0.5s linear infinite; }

/* checkbox switch */
input.toggle:checked::before { content: ''; position: absolute; top: 2px; left: 24px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #3f8635; }

input.toggle::before { content: ''; position: absolute; top: 2px; left: 3px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #656565; transition: 0.2s; }

input.toggle { cursor: pointer; appearance: none; position: relative; width: 48px; height: 24px; background: #464646; border-radius: 50px; align-content: center; }

input.toggle:checked { background: #97c193; }

.loading-bg { background: #0000009c; background-repeat: no-repeat; opacity: 0; width: 100%; height: 100vh; position: fixed; z-index: 3000; }

.dropdown-menu { z-index: 3000; }

.adsk-viewing-viewer { top: 0px; }

.lds-ring { display: inline-block; position: relative; width: 25px; height: 25px; margin-right: 0.8rem; }

.lds-ring div { top: -4px; box-sizing: border-box; display: block; position: absolute; width: 25px; height: 25px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; }

.lds-ring div:nth-child(1) { animation-delay: -0.45s; }

.lds-ring div:nth-child(2) { animation-delay: -0.3s; }

.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

/* js-tree */
.jstree-node { padding-bottom: 3px; }
.jstree-default-dark { background-color: transparent; }
.jstree a.jstree-anchor { color: #d6d6d6 !important; }

.dropzone .dz-preview.dz-file-preview .dz-image { background: linear-gradient(to bottom, #675d72, #4d4a56) !important; }

.dz-remove { position: absolute; top: -8px; right: -8px; z-index: 100; }

.dz-remove span { width: 30px; height: 30px; font-size: 24px; border-radius: 10px; color: white; cursor: pointer !important; padding-top: 3px; transition: 0.2s; }

.dz-remove span.mi-delete { background: var(--danger); }

.dz-remove span.mi-cancel { font-size: 30px; color: var(--color_grey); }

.dz-remove:hover span { transform: scale(1.1); transition: 0.2s; }
.dropzone .dz-preview.dz-image-preview { background-color: transparent !important; }

input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }

.d-grid { display: grid; }

.grid-gap-1 { grid-gap: 1px; }
.grid-gap-2 { grid-gap: 2px; }
.grid-gap-3 { grid-gap: 3px; }
.grid-gap-4 { grid-gap: 4px; }
.grid-gap-5 { grid-gap: 5px; }
.grid-gap-c { grid-gap: var(--c-grid-gap); }

.grid-temp-col-c { grid-template-columns: var(--c-grid-temp-col); }

.vakata-context, .vakata-context ul { background-color: #3f3f3f; box-shadow: 2px 2px 2px #111111; }
.vakata-context li > a { color: white; text-shadow: 1px 1px 0 #4b4b4b; }
.vakata-context .vakata-context-hover > a { background-color: #666666; box-shadow: 0 0 2px #2f2f2f; }
.vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }

.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; }
.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2rem; position: relative; width: 100%; }
.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-fusion-500); }

.card-header.p-3.ui-draggable-handle:hover { cursor: move; }

.device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
.scrolledTable { overflow-y: auto; clear: both; max-height:100%;}

@media screen and (max-width: 576px) { .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
}

@keyframes lds-ring {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

@keyframes flashing-c {
    0% { color: var(--flash-color-1); }

    49% { color: var(--flash-color-1); }

    50% { color: var(--flash-color-2); }

    99% { color: var(--flash-color-2); }
}

@keyframes flashing-bg {
    0% { background: var(--flash-color-1); }

    49% { background: var(--flash-color-1); }

    50% { background: var(--flash-color-2); }

    99% { background: var(--flash-color-2); }
}

@keyframes flashing-c-bd {
    0% { border-color: var(--flash-color-1); }

    49% { border-color: var(--flash-color-1); }

    50% { border-color: var(--flash-color-2); }

    99% { border-color: var(--flash-color-2); }
}
/* ================================================================ */
/*                             單一方法                             */
/* ================================================================ */
/* cursor */
.cur-def { cursor: default !important; }

.cur-poi { cursor: pointer !important; }

/*left 距離*/
.left-05 { left: 0.5rem !important; }

.left-04 { left: 0.4rem !important; }

.left-03 { left: 0.3rem !important; }

.left-02 { left: 0.2rem !important; }

.left-01 { left: 0.1rem !important; }

/*right 距離*/
.right-05 { right: 0.5rem !important; }

.right-04 { right: 0.4rem !important; }

.right-03 { right: 0.3rem !important; }

.right-02 { right: 0.2rem !important; }

.right-01 { right: 0.1rem !important; }

/*bottom 0.5rem*/
.bm-05 { bottom: 0.5rem !important; }

.bm-04 { bottom: 0.4rem !important; }

.bm-03 { bottom: 0.3rem !important; }

.bm-02 { bottom: 0.2rem !important; }

.bm-01 { bottom: 0.1rem !important; }

/*top 0.5rem*/
.tp-05 { top: 0.5rem !important; }

.tp-04 { top: 0.4rem !important; }

.tp-03 { top: 0.3rem !important; }

.tp-02 { top: 0.2rem !important; }

.tp-01 { top: 0.1rem !important; }

/* font-weight */
.fw-1 { font-weight: 100; }

.fw-2 { font-weight: 200; }

.fw-3 { font-weight: 300; }

.fw-4 { font-weight: 400; }

.fw-5 { font-weight: 500; }

.fw-6 { font-weight: 600; }

.fw-7 { font-weight: 700; }

.fw-8 { font-weight: 800; }

.fw-9 { font-weight: 900; }

/* font-size */
.fs-05 { font-size: 0.5rem; }

.fs-075 { font-size: 0.75rem; }

.fs-09 { font-size: 0.9rem; }

.fs-1 { font-size: 1rem; }

.fs-1-05 { font-size: 1.05rem; }

.fs-1-1 { font-size: 1.1rem; }

.fs-1-2 { font-size: 1.2rem; }

.fs-1-3 { font-size: 1.3rem; }

.fs-1-5 { font-size: 1.5rem; }

.fs-2 { font-size: 2rem; }

.fs-2-5 { font-size: 2.5rem; }

/* border width */
.bd-0 { border-width: 0px; }

.bd-1 { border-width: 1px; }

.bd-2 { border-width: 2px; }

/* border direction */
.bd-l { border-left-style: solid; }

.bd-r { border-right-style: solid; }

.bd-t { border-top-style: solid; }

.bd-b { border-bottom-style: solid; }

/* border radius */
.br-1 { border-radius: 1px; }

.br-2 { border-radius: 2px; }

.br-3 { border-radius: 3px; }

.br-4 { border-radius: 4px; }

.br-5 { border-radius: 5px; }

/* flex-gap */
.gap-1 { gap: 1px; }

.gap-2 { gap: 2px; }

.gap-3 { gap: 3px; }

.gap-4 { gap: 4px; }

.gap-5 { gap: 5px; }

.gap-6 { gap: 6px; }

.gap-7 { gap: 7px; }

.gap-8 { gap: 8px; }

/* vertical-align */
.va-t { vertical-align: top; }

.va-m { vertical-align: middle; }

.va-b { vertical-align: bottom; }

.bg-orange { background-color: #ffa100; }

/* text color */
.t-main-purple { color: #623c80 !important; }

.t-black { color: #000 !important; }

.t-white { color: #fff !important; }

.t-fb-blue { color: #466ac2 !important; }

.t-line-green { color: #54C814 !important; }

.t-red { color: #db0000 !important; }

.t-red-2 { color: var(--yt-red-2) !important; }

.t-gray { color: var(--yt-gray); }

.t-main-gray { color: var(--yt-main-gray); }

.t-gray-2 { color: var(--yt-gray-2) !important; }

.t-gray-3 { color: var(--yt-gray-3); }

.t-yellow { color: var(--yt-yellow-1); }