nextntp.css

*,
*:after,
*:before {
    box-sizing: border-box;
    border-spacing: 0;
}

body {
    -webkit-tap-highlight-color: transparent;
    --content-width: calc(
        (var(--tile-n) * (var(--tile-w) + var(--tile-m))) + 1px
    );
    --bg-cw: 0px;
    --bg-ch: 0px;
    --bg-cl: #fff;
    --bg-cd: #060609;
    --bg-c: var(--bg-cl);
    --bg-img-l: url('./nextntpbg.svg');
    --bg-img-d: url('./nextntpbg_d.svg');
    --bg-img: var(--bg-img-l);
    --bg-blur: 0px;
    --bg-dark: 100%;
    --sb-img-l: url('./nextntpl.svg');
    --sb-img-d: url('./nextntpd.svg');
    --sb-img: var(--sb-img-l);
    --custom-font: -apple-system, system-ui, BlinkMacSystemFont, Roboto,
        sans-serif;
    /****************************** COLORS ******************************/
    /*  Floating background  */
    --cl0: #46afdf;
    /*  Floating button icons     */
    --cl1: #ffffff;
    /*  Widget 1 Background */
    --cl2: #ffffff00;
    /* Search Bar background   */
    --cl3: #ffffff59;
    /*  Search Bar Text         */
    --cl4: #101010;
    /*  Search Bar border      */
    --cl5: #00000000;
    /* Widget 2 Background   */
    --cl6: #ffffff59;
    /*  Tile icon background       */
    --cl7: #ffffff9f;
    /*  Tile icon border          */
    --cl8: #ffffff9f;
    /*  Tile label text          */
    --cl9: #101010;
    /*  Tile label background  */
    --cl10: #ffffff9f;
    /*  Folder tile background  */
    --cl11: #00000094;
    /* Folder tile border    */
    --cl12: #00000094;
    /* Folder label text      */
    --cl13: #ffffff;
    /* Folder label background  */
    --cl14: #00000094;
    /* Folder background on grid view  */
    --cl15: #00000094;
    /* Widget 3 Background  */
    --cl16: #ffffff59;
    /* News Item Backgrosund Color        */
    --cl17: #ffffff9f;
    /* Text color        */
    --cl18: #000000;
    /* Border color     */
    --cl19: #ffffff9f;
    /* Settings Text */
    --cl20: #14191f;
    /* Settings Background*/
    --cl21: #f2f4f7;
    /* Settings Foreground*/
    --cl22: #dde2ea;
    /* ---------------- DARK COLORS --------------- */
    /*  Floating button background  */
    --cd0: #46afdf;
    /*  Floating button icons     */
    --cd1: #101010;
    /*  Widget 1 Background */
    --cd2: #00000000;
    /* Search Bar background   */
    --cd3: #00000059;
    /*  Search Bar Text         */
    --cd4: #ffffff;
    /*  Search Bar border      */
    --cd5: #00000000;
    /* Widget 2 Background   */
    --cd6: #00000059;
    /*  Tile icon background       */
    --cd7: #0000009f;
    /*  Tile icon border          */
    --cd8: #0000009f;
    /*  Tile label text          */
    --cd9: #ffffff;
    /*  Tile label background  */
    --cd10: #0000009f;
    /*  Folder tile background  */
    --cd11: #ffffff94;
    /* Folder tile border    */
    --cd12: #ffffff94;
    /* Folder label text      */
    --cd13: #101010;
    /* Folder label background  */
    --cd14: #ffffff94;
    /* Folder background on grid view  */
    --cd15: #ffffff94;
    /* Widget 3 Background  */
    --cd16: #00000059;
    /* News Item Background Color        */
    --cd17: #14191f;
    /* Text color        */
    --cd18: #ffffff;
    /* Border color     */
    --cd19: #14191f;
    /* Settings Text */
    --cd20: #f2f4f7;
    /* Settings Background*/
    --cd21: #14191f;
    /* Settings Foreground*/
    --cd22: #242e37;
    /******************************* OPTIONS *******************************/
    /*  Material design shadow         */
    /* Backdrop filter */
    --o1: blur(5px);
    /* Tile target                     */
    --o2: _blank;
    /*  Tile label visibility          */
    --o3: inline-block;
    /* News compact mode               */
    --o4: 150px;
    /*  Tile label folder visibility          */
    --o5: inline-block;
    --o6: '';
    --o7: '';
    --o8: '';
    /* Search Bar Radus */
    --v0: 8px;
    /* Search Bar Logo Size */
    --v1: 233px;
    /* Search Bar Logo Radius */
    --v2: '';
    /* Search Bar Top Margin */
    --v3: 10px;
    /* Widget Spacing */
    --tms0: 10px;
    --tms1: 10px;
    --tms2: 10px;
    margin: 0;
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: var(--bg-img);
    height: 100%;
    background-color: var(--bg-c);
    background-attachment: fixed !important;
    opacity: 1;
    transition: opacity 0.1s ease-in;
}

body,
[data-theme='light'] {
    /* ------------- General Variables ------------ */
    --black: #060609;
    --white: #f2f4f7;
    --green: #2ecc40;
    --blue: #0074d8;
    --red: #ff4132;
    --yellow: #ffcd36;
    --primary: #0074d8;
    --brd: #c4cdd5;
    --radius: 0.5rem;
    --o0: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    --sb-shadow: 0px 3px 6px rgba(0, 0, 0, 0.19), 0 3px 6px rgba(0, 0, 0, 0.23);
    --c0: var(--cl0);
    --c1: var(--cl1);
    --c2: var(--cl2);
    --c3: var(--cl3);
    --c4: var(--cl4);
    --c5: var(--cl5);
    --c6: var(--cl6);
    --c7: var(--cl7);
    --c8: var(--cl8);
    --c9: var(--cl9);
    --c10: var(--cl10);
    --c11: var(--cl11);
    --c12: var(--cl12);
    --c13: var(--cl13);
    --c14: var(--cl14);
    --c15: var(--cl15);
    --c16: var(--cl16);
    --c17: var(--cl17);
    --c18: var(--cl18);
    --c19: var(--cl19);
    --c20: var(--cl20);
    --c21: var(--cl21);
    --c22: var(--cl22);
    --c23: var(--cl23);
    --c24: var(--cl24);
}

[data-theme='dark'] {
    --bg-c: var(--bg-cd);
    --sb-img: var(--sb-img-d);
    --bg-img: var(--bg-img-d);
    --black: #060609;
    --white: #f2f4f7;
    --blue: #4dacff;
    --green: #67e5a8;
    --red: #ff564d;
    --yellow: #ffd24d;
    --primary: #4dacff;
    --bg-btn: var(--primary);
    --bg-btn-hover: inset 0 0 100px 100px #00000033;
    --brd-btn: var(--primary);
    --c20-btn: var(--black);
    --shadow: none;
    --o0: none;
    --sb-shadow: none;
    --c0: var(--cd0);
    --c1: var(--cd1);
    --c2: var(--cd2);
    --c3: var(--cd3);
    --c4: var(--cd4);
    --c5: var(--cd5);
    --c6: var(--cd6);
    --c7: var(--cd7);
    --c8: var(--cd8);
    --c9: var(--cd9);
    --c10: var(--cd10);
    --c11: var(--cd11);
    --c12: var(--cd12);
    --c13: var(--cd13);
    --c14: var(--cd14);
    --c15: var(--cd15);
    --c16: var(--cd16);
    --c17: var(--cd17);
    --c18: var(--cd18);
    --c19: var(--cd19);
    --c20: var(--cd20);
    --c21: var(--cd21);
    --c22: var(--cd22);
    --c23: var(--cd23);
    --c24: var(--cd24);
}

[data-theme='light'] .light-icon,
[data-theme='dark'] .dark-icon {
    display: block !important;
}

.theme-icon {
    display: none !important;
}

[data-theme='light'] #bg-sl,
[data-theme='dark'] #bg-sd {
    display: block !important;
}

.bg-s {
    display: none !important;
}

body {
    font-family: var(--custom-font) !important;
    font-size: 13pt;
    scroll-behavior: smooth;
}

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

#stt_cl_0 {
    background: var(--cl0);
}

#stt_cl_1 {
    background: var(--cl1);
}

#stt_cl_2 {
    background: var(--cl2);
}

#stt_cl_3 {
    background: var(--cl3);
}

#stt_cl_4 {
    background: var(--cl4);
}

#stt_cl_5 {
    background: var(--cl5);
}

#stt_cl_6 {
    background: var(--cl6);
}

#stt_cl_7 {
    background: var(--cl7);
}

#stt_cl_8 {
    background: var(--cl8);
}

#stt_cl_9 {
    background: var(--cl9);
}

#stt_cl_10 {
    background: var(--cl10);
}

#stt_cl_11 {
    background: var(--cl11);
}

#stt_cl_12 {
    background: var(--cl12);
}

#stt_cl_13 {
    background: var(--cl13);
}

#stt_cl_14 {
    background: var(--cl14);
}

#stt_cl_15 {
    background: var(--cl15);
}

#stt_cl_16 {
    background: var(--cl16);
}

#stt_cl_17 {
    background: var(--cl17);
}

#stt_cl_18 {
    background: var(--cl18);
}

#stt_cl_19 {
    background: var(--cl19);
}

#stt_cl_20 {
    background: var(--cl20);
}

#stt_cl_21 {
    background: var(--cl21);
}

#stt_cl_22 {
    background: var(--cl22);
}

#stt_cl_23 {
    background: var(--cl23);
}

#stt_cl_24 {
    background: var(--cl24);
}

#stt_cld_0 {
    background: var(--cd0);
}

#stt_cld_1 {
    background: var(--cd1);
}

#stt_cld_2 {
    background: var(--cd2);
}

#stt_cld_3 {
    background: var(--cd3);
}

#stt_cld_4 {
    background: var(--cd4);
}

#stt_cld_5 {
    background: var(--cd5);
}

#stt_cld_6 {
    background: var(--cd6);
}

#stt_cld_7 {
    background: var(--cd7);
}

#stt_cld_8 {
    background: var(--cd8);
}

#stt_cld_9 {
    background: var(--cd9);
}

#stt_cld_10 {
    background: var(--cd10);
}

#stt_cld_11 {
    background: var(--cd11);
}

#stt_cld_12 {
    background: var(--cd12);
}

#stt_cld_13 {
    background: var(--cd13);
}

#stt_cld_14 {
    background: var(--cd14);
}

#stt_cld_15 {
    background: var(--cd15);
}

#stt_cld_16 {
    background: var(--cd16);
}

#stt_cld_17 {
    background: var(--cd17);
}

#stt_cld_18 {
    background: var(--cd18);
}

#stt_cld_19 {
    background: var(--cd19);
}

#stt_cld_20 {
    background: var(--cd20);
}

#stt_cld_21 {
    background: var(--cd21);
}

#stt_cld_22 {
    background: var(--cd22);
}

#stt_cld_23 {
    background: var(--cd23);
}

#stt_cld_24 {
    background: var(--cd24);
}

/* --------------- Toast Message -------------- */

.notify-item {
    transition: all 0.3s;
    min-width: 200px;
    max-width: 60rem;
    padding: 0.8rem;
    margin-bottom: 0.3rem;
    display: flex;
    background: var(--primary);
    color: var(--c20);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    -webkit-animation: fade-in 0.3s;
    animation: fade-in 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
}

.notify-item.animate-out {
    -webkit-animation: fade-out 0.3s;
    animation: fade-out 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
}

.notify-item.success {
    background: var(--green);
    color: var(--c20);
}

.notify-item.error {
    background: var(--red);
    color: var(--c21);
}

.notify-item.warn {
    background: var(--yellow);
    color: var(--c21);
}

.notify-item.info {
    background: var(--blue);
    color: var(--c20);
}

.notify-item span {
    width: 100%;
}

.notify-container {
    position: fixed;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.notify-container._top {
    flex-direction: column-reverse;
}

.notify-container._bottom {
    bottom: 0;
}

.notify-container._left {
    left: 0;
}

.notify-container._right {
    right: 0;
}

.notify-container._center {
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        transform: scaleY(0);
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        transform: scaleY(0);
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* ----------- Grid columns and row ----------- */

.grid {
    flex-wrap: wrap;
}

.row,
.grid {
    display: flex;
    align-items: stretch;
    margin: 1rem 0 0 0;
}

.row > [class*='col'],
.row > div,
.grid > [class*='col'],
.grid > div {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem;
}

.row > [class*='col'] > *,
.row > div > *,
.grid > [class*='col'] > *,
.grid > div > * {
    margin: 0;
}

.row .col,
.row > div,
.grid .col,
.grid > div {
    flex: 1 1 100%;
}

.row .col-2,
.grid .col-2 {
    width: calc((100%) / (12 / 2));
}

.row .col-3,
.grid .col-3 {
    width: calc((100%) / (12 / 3));
}

.row .col-4,
.grid .col-4 {
    width: calc((100%) / (12 / 4));
}

.row .col-6,
.grid .col-6 {
    width: calc((100%) / (12 / 6));
}

.row .col-8,
.grid .col-8 {
    width: calc((100%) / (12 / 8));
}

.row .col-9,
.grid .col-9 {
    width: calc((100%) / (12 / 9));
}

.row .col-10,
.grid .col-10 {
    width: calc((100%) / (12 / 10));
}

@media (max-width: 40em) {
    .row:not(.keep-width),
    .grid:not(.keep-width) {
        flex-direction: column !important;
    }
    .row:not(.keep-width) > [class*='col'],
    .row:not(.keep-width) > div,
    .grid:not(.keep-width) > [class*='col'],
    .grid:not(.keep-width) > div {
        width: auto;
        justify-content: left;
    }
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .wdg_ntp {
        -webkit-backdrop-filter: var(--o1);
        backdrop-filter: var(--o1);
    }
}

._icon {
    display: block;
    height: 1.6rem;
    width: 1.6rem;
}

.op {
    opacity: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

/* ------------------ Button ------------------ */

button,
[class^='btn'] {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: 0px;
    color: var(--c1);
    background-color: var(--c0);
    outline: none;
    padding: 0.4rem;
    font-size: inherit;
    cursor: pointer;
    border-radius: var(--radius);
    margin: 0.5rem;
    height: 2.4rem;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--custom-font);
}

.btn-red {
    background: #ff564d;
    color: #fff;
}

.btn-green {
    background: #67e5a8;
    color: #000;
}

input[type='color'] {
    -webkit-appearance: none;
    border: none;
    border-radius: var(--radius);
    width: 32px;
    height: 32px;
}

input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type='color']::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius);
}

textarea,
input:not([type='color']):not([type='range']):not([type='radio']):not(
        [type='checkbox']
    ),
select {
    color: var(--c20);
    background: var(--c22);
    padding: 0.6rem;
    border-radius: var(--radius);
    border: 2px solid var(--c22);
    outline: none;
    height: 2.9rem;
    width: 100%;
}

textarea:focus,
input:not([type='checkbox']):not([type='radio']):not([type='color']):not(
        [type='range']
    ):focus,
select:focus,
textarea:hover,
input:not([type='checkbox']):not([type='radio']):not([type='color']):not(
        [type='range']
    ):hover,
select:hover {
    border: 2px solid var(--primary);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type='range'] {
        -webkit-appearance: none;
        width: 100%;
        height: 0.8rem;
        border-radius: var(--radius);
        background: var(--c22);
        outline: none;
        margin-top: 0.8rem;
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        transition: background 0.15s ease-in-out;
        -webkit-transition: background 0.15s ease-in-out;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--c20);
        cursor: pointer;
        transition: background 0.15s ease-in-out;
    }
    input[type='range']:hover::-webkit-slider-thumb {
        box-shadow:
            0 0 0 1px var(--c22),
            0 0 0 4px var(--primary);
    }
    input[type='range']:hover::-moz-range-thumb {
        box-shadow:
            0 0 0 1px var(--c22),
            0 0 0 4px var(--primary);
    }
    input[type='checkbox'],
    input[type='radio'] {
        height: 21px;
        outline: none;
        position: relative;
        -webkit-appearance: none;
        -moz-appearance: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
        cursor: pointer;
        vertical-align: middle;
        top: -1px;
        height: 21px;
        border: 2px solid var(--c20);
        background: var(--c22);
        transition:
            background 0.3s ease,
            border-color 0.3s ease;
    }
    input[type='checkbox']:after,
    input[type='radio']:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition:
            transform 0.3s ease,
            opacity 0.2s ease,
            filter 0.3s ease;
    }
    input[type='checkbox']:checked,
    input[type='radio']:checked {
        background: var(--c0);
        border-color: var(--c0);
    }
    input[type='checkbox']:checked:after,
    input[type='radio']:checked:after {
        transition:
            opacity 0.3s ease,
            filter 0.3s ease,
            transform 0.6s cubic-bezier(0.175, 0.88, 0.32, 1.2);
    }
    input[type='checkbox']:disabled,
    input[type='radio']:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    input[type='checkbox']:hover:not(:checked):not(:disabled),
    input[type='radio']:hover:not(:checked):not(:disabled) {
        border-color: var(--primary);
    }
    input[type='checkbox']:not(.toggle),
    input[type='radio']:not(.toggle) {
        width: 21px;
    }
    input[type='checkbox']:not(.toggle):after,
    input[type='radio']:not(.toggle):after {
        opacity: 0;
    }
    input[type='checkbox']:not(.toggle):checked:after,
    input[type='radio']:not(.toggle):checked:after {
        opacity: 1;
    }
    input[type='checkbox']:not(.toggle) {
        border-radius: var(--radius);
    }
    input[type='checkbox']:not(.toggle):after {
        width: 5px;
        height: 9px;
        border: 2px solid #00000070;
        border-top: 0;
        border-left: 0;
        left: 6px;
        top: 2px;
        transform: rotate(20deg);
    }
    input[type='checkbox']:not(.toggle):checked:after {
        transform: rotate(43deg);
    }
    input[type='checkbox'].toggle {
        width: 39px;
        border-radius: 10px;
    }
    input[type='checkbox'].toggle:after {
        left: 2px;
        top: 1px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--c20);
    }
    input[type='checkbox'].toggle:checked:after {
        background: var(--c20);
        transform: translateX(17px);
    }
    input[type='checkbox'].toggle:disabled:not(:checked):after {
        opacity: 0.6;
    }
    input[type='radio'] {
        border-radius: 50%;
    }
    input[type='radio']:after {
        width: 19px;
        height: 19px;
        top: -1px;
        left: -1px;
        border-radius: 50%;
        background: var(--c22);
        opacity: 0;
        transform: scale(0.7);
    }
    input[type='radio']:checked:after {
        background: #00000070;
        transform: scale(0.5);
    }
}

/* --------------- NTP Container -------------- */

#ntp_cnt {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem 0 0.5rem;
    margin: auto;
    max-width: 700px;
}

#blur_bg {
    backdrop-filter: blur(var(--bg-blur));
}

#dark_bg {
    backdrop-filter: brightness(var(--bg-dark));
}

/* ---------------- Search Bar ---------------- */

#sb_r {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sb_logo,
#sb_lgp {
    width: var(--v1);
    border-radius: var(--v2);
    max-width: 300px;
    content: var(--sb-img);
}

.sb_item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-grow: 1;
}

.sb_icon,
#sb_icon_default,
#sb_icon_menu span {
    height: 2.3rem;
    width: 2.3rem;
    border-radius: 50%;
    padding: 0.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb_icon svg,
#sb_icon_default svg,
#sb_icon_menu span svg {
    max-height: 2.3rem;
}

#sb_icon_default {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    margin-left: 0.3rem;
}

#sb_icon_menu.active {
    height: auto;
    visibility: visible;
    opacity: 1;
    transition:
        visibility 0s,
        opacity 0.2s linear;
}

#sb_icon_menu {
    height: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    width: 14rem;
    max-height: 250px;
    margin: 0;
    list-style: none;
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: var(--radius);
    background: var(--c21);
    box-shadow: var(--o0);
    z-index: 2;
}

#sb_icon_menu li {
    padding: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c20);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#sb_icon_menu li.active_sb {
    background: var(--c22);
}

#sb_bg_preview {
    background: var(--c22);
    border-radius: var(--radius);
    flex-direction: column;
    width: 100%;
}

.sb_preview {
    height: 45px;
}

#sb_input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--c4);
    opacity: 0.7;
}

.sb_wrap,
.sb_preview {
    margin-top: var(--v3) !important;
    position: relative;
    width: 97%;
}

#sb_input,
.sb_preview {
    width: 100%;
    border: 1px solid var(--c5);
    color: var(--c4);
    background: var(--c3);
    border-radius: var(--v0);
    padding-left: 45px;
}

/* ---------------- Tiles Grid ---------------- */

#tlg,
#lrt_bfl {
    width: var(--content-width);
    margin: auto;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
}

.srtb_ghost {
    border-color: red;
}

.hidden2 {
    display: none;
}

.hidden {
    visibility: hidden;
}

.tlg_item a,
.folder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tlg_item {
    width: var(--tile-w);
    margin: calc(var(--tile-m) / 2);
    font-size: 10px;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tlg_title {
    width: var(--tile-w);
    background: var(--c10);
    border-radius: 5px;
    margin-top: 2px;
    padding: 3px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

#tlg .tlg_title {
    display: var(--o3);
}

#lrt_bfl .tlg_title {
    display: var(--o5);
}

.tlg_fld {
    display: inline-block;
}

.tlg_fld .tlg_item {
    transform: scale(0.7);
    position: absolute;
    pointer-events: none;
    display: none;
    margin: 1px;
    overflow: unset;
    width: calc((var(--tile-w) - 8px) / 2);
    height: calc((var(--tile-w) - 8px) / 2);
}

.tlg_fld .tlg_item:nth-child(1) {
    display: inline-block;
    right: 45%;
    bottom: 45%;
}

.tlg_fld .tlg_item:nth-child(2) {
    display: inline-block;
    left: 45%;
    bottom: 45%;
}

.tlg_fld .tlg_item:nth-child(3) {
    display: inline-block;
    right: 45%;
    top: 45%;
}

.tlg_fld .tlg_item:nth-child(4) {
    display: inline-block;
    left: 45%;
    top: 45%;
}

.tlg_fld .tlg_img {
    border: none;
    width: calc((var(--tile-w) - 8px) / 2);
    height: calc((var(--tile-w) - 8px) / 2);
}

.tlg_fld .tlg_title {
    display: none !important;
}

.tlg_item a {
    text-decoration: none;
    color: var(--c9);
}

.tlg_img {
    position: relative;
    border-radius: var(--tile-r);
    height: calc(var(--tile-w) - 4px);
    width: calc(var(--tile-w) - 4px);
    background: var(--c7);
    border: 2px solid var(--c8);
    object-fit: contain;
}

.folder .tlg_img {
    background: var(--c11) !important;
    border-color: var(--c12) !important;
}

.folder .tlg_title {
    background: var(--c14) !important;
    color: var(--c13) !important;
}

#lrt_fl .lrt_cnt {
    min-height: 64px;
    background: var(--c15);
}

#tlg_editA,
#fld_editA,
#tlg_sldr {
    display: none;
    background: var(--c21);
    border-radius: 8px;
    color: var(--c20);
    box-shadow: var(--o0);
}

#tlg_editA .tlg_item,
#fld_editA .tlg_item {
    display: none;
    opacity: 0;
}

#tlg_editA div,
#fld_editA div {
    width: 50%;
    margin: 4px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* --------------- News Section --------------- */

#newsL:focus {
    box-shadow: none;
    outline: none;
}

#newsS {
    margin: auto;
    max-width: 800px;
    height: var(--o4);
    width: 100%;
    overflow: hidden;
}

#news {
    display: flex;
    flex-direction: column;
}

.news_item {
    transition: margin 0ms ease 0s;
    margin: 4px;
    background: var(--c17);
    border-radius: 8px;
    width: calc(100% - 10px);
    border: 1px solid var(--c19);
    padding: 5px;
    display: flex;
}

.news_cnt {
    display: flex;
    flex-direction: column;
    height: 128px;
    padding: 0.5rem;
}

.news_img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 8px;
}

.news_attr a,
.news_title a,
.news_time {
    color: var(--c18);
}

.news_title {
    padding: 2px;
    height: 80px;
    overflow: hidden;
    overflow-y: scroll;
}

.news_attr,
.news_time {
    font-size: 12px;
    opacity: 0.7;
}

.news_attr img {
    max-height: 12px;
}

.news_loading {
    display: inline-block;
    width: 64px;
    height: 64px;
}

.news_loading:after {
    content: ' ';
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #aaa;
    border-color: #aaa transparent #aaa transparent;
    animation: news_loading 1.2s linear infinite;
}

@keyframes news_loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/****************** Settings  ***************/

#stt_lwo,
#stt_selist {
    padding: 0;
    margin: auto;
    list-style: none;
    width: 100%;
    max-width: 450px;
}

#stt_lwo li,
#stt_selist li {
    background: var(--c22);
    color: var(--c20);
    border-radius: 8px;
    border: none;
    margin: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.6rem;
}

#stt_lwo .srtb_ghost,
#stt_selist .srtb_ghost {
    opacity: 0;
}

.stt_clfrt:before {
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E")
        left top/contain white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -10;
}

.stt_clfrt {
    display: inline-block;
    position: relative;
    border-radius: 10px;
    border: 3px solid black;
    width: 30px;
    height: 30px;
    background: transparent;
    margin-bottom: 0.8rem;
}

/* -------------- Floating Button ------------- */

#flt_btn {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.flt_trg {
    background: var(--c0);
    color: var(--c1);
    z-index: 1;
    float: right;
}

.flt_acs {
    height: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    margin-right: 0.6rem;
    padding: 0 0.5rem 0.5rem 0.5rem;
    border-radius: var(--radius);
    background: var(--c21);
    box-shadow: var(--o0);
}

.flt_acs .btn {
    background-color: transparent;
    color: var(--c20);
    justify-content: flex-start;
    margin: 0;
    margin-top: 0.5rem;
}

.flt_acs .btn svg {
    margin-right: 10px;
    height: 1.3rem;
}

.flt_acs > * {
    margin-top: 0.5rem;
}

.open .flt_acs {
    height: auto;
    visibility: visible;
    opacity: 1;
    transition:
        visibility 0s,
        opacity 0.2s linear;
}

#flt_btn .caret-up {
    display: block;
}

#flt_btn .close {
    display: none;
}

#flt_btn.open .caret-up {
    display: none;
}

#flt_btn.open .close {
    display: block;
}

/* --------------- Widget Config -------------- */

.wdg_ntp {
    background: #00000050;
    padding: 0.5rem;
    border-radius: 8px;
}

#wdg_0 {
    margin-top: var(--tms0);
    background: var(--c2);
}

#wdg_1 {
    margin-top: var(--tms1);
    background: var(--c6);
}

#wdg_2 {
    margin-top: var(--tms2);
    background: var(--c16);
}

/* --------------- New Tile Form -------------- */

#p_tile {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.b_save {
    display: none;
}

.b_add,
.b_save {
    background: green;
}

.is_center {
    text-align: center;
}

/************* Settings Dialog******************/

#stt_bgp {
    width: 150px;
    height: 250px;
    margin: auto;
    border: 4px solid white;
    background-color: var(--ntp-bgc);
    background-image: var(--ntp-bgi);
    background-size: var(--ntp-bgs);
}

/* ------------------- Modal ------------------ */

.modal {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition:
        transform 0.3s ease-in,
        opacity 0.3s ease-in;
    z-index: -1;
}

.modal > div {
    border-radius: var(--radius);
    margin: auto;
    padding: 0.8em;
    overflow: hidden;
    width: calc(100% - 40px);
    max-width: 800px;
    min-height: 200px;
    opacity: 0;
    color: var(--c20);
    background: var(--c21);
    transform: scale(0.9);
    transition:
        transform 0.3s ease-out,
        opacity 0.3s ease-out;
    box-shadow: var(--o0);
}

.modal > div > footer {
    text-align: end;
    padding: 0;
}

.modal > div > div {
    padding-top: 1rem;
}

.modal > div > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem;
}

.modal > div > header > * {
    margin: 0;
}

.modal._show-modal {
    visibility: visible;
    opacity: 1;
    z-index: 200;
}

.modal._show-modal > div {
    opacity: 1;
    transform: scale(1);
}

#lrt_fl > div {
    width: calc(100% - 1rem);
    padding: 0.5rem;
    background: var(--c15);
}

#dlg_st > div {
    height: 90%;
}

#dlg_st h4 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--c20);
    font-weight: bold;
    margin: auto;
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--radius);
    background: var(--c22);
}

#p-home button {
    background: var(--c22);
    color: var(--c20);
}

/* --------------- Slider range --------------- */

.slr_rng {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
    background: #d3d3d338;
    border-radius: 25px;
    outline: none;
}

.slr_rng:hover {
    opacity: 1;
}

.slr_rng::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    background: #fff;
    cursor: pointer;
}

.slr_rng::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    cursor: pointer;
}

#sb_len {
    width: 100%;
    max-width: 280px;
    height: 250px;
    background: transparent;
    color: var(--c20);
    border: 1px solid var(--c22);
    border-radius: 6px;
    margin-top: 5px;
    padding: 5px;
}

#bg_crop .block {
    background-image: var(--bg-img);
    background-color: var(--bg-c);
    width: var(--bg-cw);
    height: var(--bg-ch);
    position: relative;
    background-size: cover;
    box-sizing: content-box;
    border: 5px solid var(--c22);
    margin: auto;
}

#bg_crop .block .stage {
    width: var(--bg-cw);
    height: var(--bg-ch);
    position: relative;
}

#bg_crop {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
}

#bg_crop input[type='file'],
#crop,
#result {
    display: none;
}

#crop .cr-boundary {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#crop .cr-boundary .cr-image {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: -1;
    max-width: none;
}

#crop .cr-boundary .cr-viewport {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 0 900px #d9d9d9;
    z-index: 0;
}

#crop .cr-boundary .cr-overlay {
    position: absolute;
    z-index: 2;
    cursor: move;
}

#crop .cr-slider-wrap {
    width: 100%;
    transform: translateY(100%);
}

#crop .cr-slider-wrap .cr-slider {
    width: 100%;
    background-color: transparent;
}

#crop .cr-slider-wrap .cr-slider {
    -webkit-appearance: none;
}

#crop .cr-slider-wrap .cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background-color: #000;
    border: 0;
    border-radius: 1em;
}

#crop .cr-slider-wrap .cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-color: var(--c22);
    border-radius: 50%;
    border: none;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition:
        transform 0.3s,
        -webkit-transform 0.3s;
}

#crop .cr-slider-wrap .cr-slider:hover::-webkit-slider-thumb {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}

#crop .cr-slider-wrap .cr-slider:focus {
    outline: none;
}

#crop .cr-slider-wrap .cr-slider:focus::-webkit-slider-thumb {
    background-color: #425389;
}

#crop .cr-slider-wrap .cr-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background-color: #c8cccf;
    border: 0;
    border-radius: 1em;
}

#crop .cr-slider-wrap .cr-slider::-moz-range-thumb {
    height: 16px;
    width: 16px;
    margin-top: -6px;
    background-color: #8193a2;
    border-radius: 50%;
    border: none;
    transform: scale(1);
    transition:
        transform 0.3s,
        -webkit-transform 0.3s;
}

#crop .cr-slider-wrap .cr-slider:hover::-moz-range-thumb {
    transform: scale(1.25);
}

#crop .cr-slider-wrap .cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

#crop .cr-slider-wrap .cr-slider:-moz-focusring::-moz-range-thumb {
    background-color: #425389;
}

#crop .cr-slider-wrap .cr-slider::-ms-track {
    width: 300px;
    height: 4px;
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

#crop .cr-slider-wrap .cr-slider::-ms-fill-lower,
#crop .cr-slider-wrap .cr-slider::-ms-fill-upper {
    background: #c8cccf;
    border-radius: 10px;
}

#crop .cr-slider-wrap .cr-slider::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background-color: #8193a2;
}

#crop .cr-slider-wrap #cr-rotate {
    color: #8193a2;
    text-align: right;
    background-color: transparent;
    flex: 1;
}

#result img {
    width: 100%;
    height: 100%;
    display: block;
}

#loadingNW {
    width: 100%;
    text-align: center;
}

#loadingNW svg path,
#loadingNW svg rect {
    fill: var(--c17);
}

.ns_readed {
    display: none;
}

#tlg_sldr {
    flex-direction: column;
    padding: 0.8rem;
}

#sld_tg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
}

#sld_vw.open_sld {
    transform: scale(1);
    height: 270px;
    padding: 10px;
    transition:
        height 0.3s,
        transform 0.5s;
}

#sld_vw {
    width: 100%;
    height: 0px;
    margin: 0;
    transform: scale(0);
    transition:
        height 0.5s,
        transform 0.3s;
}

#cl_vn {
    z-index: 201;
}

.pages {
    height: 90%;
    overflow: auto;
}

.pages > * {
    display: none;
    max-width: 500px;
    margin: auto;
    padding: 0.5rem;
}

.pages > .page-active {
    display: block;
}

._flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

._overflowhidden {
    overflow: hidden !important;
}

.flex-sb > *,
._flex-sb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

#dlg_st label {
    flex: auto;
}

hr {
    border: 0;
    border-top: 2px solid var(--primary);
    width: 100%;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

._as-center {
    align-self: center;
}

#p-home button {
    justify-content: flex-start;
}

#p-home button svg {
    margin-right: 10px;
}

._ta-center {
    text-align: center;
}

#code_f {
    width: 100%;
    min-height: 150px;
    border: 1px solid var(--c20);
}

._2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fldHover {
    background: var(--red) !important;
}