@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    /* Base backgrounds — layered depth, blue-tinted dark */
    --bg-base:     #0a0a14;
    --bg-surface:  #111121;
    --bg-elevated: #1a1a2e;
    --bg-overlay:  #22223a;

    /* Legacy aliases — kept so existing var() references just work */
    --bgDark:  #111121;
    --bgDark1: #0a0a14;
    --navBg:   #0d0d1f;

    /* Accent */
    --notedex:      #4f8eff;
    --accent-vivid: #6c63ff;
    --accent-glow:  rgba(79,142,255,0.22);

    /* Borders */
    --border-subtle: rgba(255,255,255,0.07);
    --border-mid:    rgba(255,255,255,0.13);

    /* Text */
    --text-primary:   rgba(255,255,255,0.92);
    --text-secondary: rgba(255,255,255,0.55);
    --text-muted:     rgba(255,255,255,0.3);

    /* Legacy */
    --primary-color: rgba(10,10,20,0.85);
    --gray: gray;
    --white: white;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-base);
    background-size: cover;
    overflow-y: hidden;
}
.e-toolbar-wrapper .e-rte-font-color .e-btn-icon.e-selected-color::before {
    content: "\e34c";
    font-family: "e-icons";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}
.e-toolbar-wrapper .e-background-color .e-btn-icon.e-selected-color::before {
    content: "\e35c";
    font-family: "e-icons";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}
.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color, .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
    background: none;
}
.e-toolbar-wrapper .e-rte-font-color .e-btn-icon.e-selected-color .e-split-preview, .e-toolbar-wrapper .e-background-color .e-btn-icon.e-selected-color .e-split-preview {
    height: 3px;
    bottom: 0;
    top: unset;
}
.e-richtexteditor .e-rte-content .e-content .e-rte-checklist li.e-rte-checklist-checked::after, .e-richtexteditor .e-source-content .e-content .e-rte-checklist li.e-rte-checklist-checked::after, .e-richtexteditor .e-rte-iframe-content .e-content .e-rte-checklist li.e-rte-checklist-checked::after {
    top: 46%;
    transform: rotate(45deg) translateY(-50%);
    left: -22px;
}
.e-richtexteditor .e-rte-content .e-content .e-rte-checklist > li::before, .e-richtexteditor .e-source-content .e-content .e-rte-checklist > li::before, .e-richtexteditor .e-rte-iframe-content .e-content .e-rte-checklist > li::before {
    top: 50%;
    transform: translateY(-50%);
}
.e-toolbar-wrapper .e-rte-font-colorpicker .e-split-colorpicker.e-rte-font-color::before, .e-toolbar-container .e-rte-font-colorpicker .e-split-colorpicker.e-rte-font-color::before, .e-rte-toolbar .e-rte-font-colorpicker .e-split-colorpicker.e-rte-font-color::before, .e-rte-dropdown-popup .e-rte-font-colorpicker .e-split-colorpicker.e-rte-font-color::before,
.e-toolbar-wrapper .e-rte-background-colorpicker .e-split-colorpicker.e-background-color::before, .e-toolbar-container .e-rte-background-colorpicker .e-split-colorpicker.e-background-color::before, .e-rte-toolbar .e-rte-background-colorpicker .e-split-colorpicker.e-background-color::before, .e-rte-dropdown-popup .e-rte-background-colorpicker .e-split-colorpicker.e-background-color::before {
    content: none;
}
.kTrash {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    font-size: 1.5rem;
    color: red;
}
.leader-line {
    cursor: pointer;
}
.kCurLine .leader-line-caps-mask-line {
    stroke:var(--notedex) !important;
}
.imgClose {
    width: 30px;
    margin-bottom: 3px;
    cursor: pointer;
    border: 1px solid white;
}
#viewerIfr {
    width: 100%;
    height: 500px;
}
.removeIcon {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 24px;
}
.canCard {
    margin: 4px 0;
    cursor: pointer;
    position: relative;
}
.canCard > i {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: var(--notedex);
}
.canCard > i.canCopy {
    right:auto;
    left:10px;
}
    .canCard > i.canNew {
        top:auto;
        bottom: 10px;
    }
.canCard:hover > i {
    display: inline-block;
}

#canSideBarContent {
    width: 164px;
    padding-right: 10px;
    margin-left: 22px;
}
#canSideBarContent img{
    width:100%;
}
#canSideBarCards{
    overflow-y:auto;
    height:91vh;
}
#gCard {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    align-items: center;
    justify-content: center;
}
    #gCard > div {
        width: 825px;
        min-height:579px;
    }

/*.gDivCard {
    position: relative;
    background: white;
    transform: scale(1.25);
    transform-origin: 0 0;
    width:660px;
    height:396px;
}*/

/*.gwacomInk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    background:transparent;
}*/

.gink-context, .gcanvas {
    width: 100%;
    height: 100%;
}

/*.gflip-card-front {
    z-index: 5;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}*/
/*#gTitle, #gBody{z-index:6;}*/


#customTableContent input {
    max-width: 90%;
}
.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    padding: 0.5px;
}
#addSSModal input[type="text"], #addSSModal select {
    width: 99% !important;
}
#addSSModal #ssSlTag {
    height: 36px;
}
#addSSModal .btnAct {
    margin-top:.5rem;
}
.rowSearch {
    border-bottom: 1px solid var(--notedex);
    padding: .5rem 0;
}
.tabCloseIcon {
    float: right;
    height: 30px;
    margin-top: 3px;
    cursor: pointer;
}
#tabCardBg .e-content > div:not(:first-child) {
    max-width: 935px;
    min-height: 330px;
    max-height: 492px;
    overflow-y: auto;
}
.modal-dialog {
    max-width: 740px;
}
#addSSModal .modal-dialog {
    max-width:500px;
}
#cardContainer, #gcardContainer {
    transform-origin: center center;
}
#gcardContainer {
    width: 660px;
    height: 396px;
}
#konvaContainer .e-richtexteditor .e-rte-container.e-resize-enabled .e-rte-content {
    margin-bottom: 0;
}
#canTmpPopup {
    max-height: 550px;
    overflow-y: auto;
}
.e-hscroll-bar {
    text-align: left;
}
#divKCardColor > button:first-child, #divKPenColor > button:first-child {
    padding: 0 4px;
}
#divKCardColor .e-selected-color, #divKPenColor .e-selected-color {
    background: rgba(0, 0, 0, 0) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
    background-size: 8px;
    border-radius: 2px;
    height: 18px;
    margin-top: 0;
    position: relative;
    width: 18px;
}
.tabCardBgFirst {
    display: flex;
}
    .tabCardBgFirst > div:first-child {
        max-width: 700px;
    }
    .tabCardBgFirst > div:last-child {
        max-width: 250px;
        padding: 5px;
    }
#tabCardBg .e-content .e-item, #kSpSize {
    color: white;
}
#tabCardBg .e-content {
    background: #1f1f1f;
}
.btnBlack {
    color: white;
    background-color: black;
    border-color: black;
}
.btnWhite {
    color: black;
    background-color: white;
    border-color: white;
}
.btnDarkBlue {
    color: #fff;
    background-color: #020111;
    border-color: #020111;
}

#kConfigModal table, #kConnectorModal  table {
    width: 265px;
}

.kConfig {
    font-size: 18px;
    margin-right: 7px;
}

#cardFrontBody, #cardFrontBody .e-rte-content, #cardFrontBody .e-rte-container,
#cardFrontTitle, #cardFrontTitle .e-rte-content, #cardFrontTitle .e-rte-container,
#cardBackBody, #cardBackBody .e-rte-content, #cardBackBody .e-rte-container,
#gcardFrontTitle, #gcardFrontBody, #gcardFrontTitle .e-rte-content, #gcardFrontBody .e-rte-content,
#gcardFrontTitle .e-rte-container, #gcardFrontBody .e-rte-container,
#gcardBackBody, #gcardBackBody .e-rte-content, #gcardBackBody .e-rte-container {
    background: transparent !important;
    background-color: transparent !important;
}

.e-rte-container{
    border:none;
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
    margin-left: 0px;
}

.e-font-name-tbar-btn {
    max-height: 250px;
    overflow-y: auto;
}

.e-icons.e-font-color1:before {
    content: "\e34c";
}
.e-create-table1:before {
    content: "\e705";
}
.eDecrease:before {
    font-size: 12px;
}

#notifyModal .modal-footer, #confirmModal .modal-footer, #kConfigModal .modal-footer {
    display: block;
    text-align: center;
}

    #kConfigModal .modal-footer a {
        display: inline;
        float: left;
    }

    #confirmModal .modal-footer a {
        display: inline;
        float: right;
        margin: 5px 10px 0 0;
    }

#notifyModal .modal-footer a {
    display: inline;
    float:left;
    display:none;
}

#imgWs1 {
    margin: 0 1rem;
}

.ink-context1, #canvas1, .ink-context1 {
    width: 100%;
    height: 100%;
}

.qnBtn {
    padding: 0.5rem 1rem 0.5rem 1rem;
    background: var(--bgDark1);
    margin-left: -1.5rem;
    height: 9vh;
}

    .qnBtn > button {
        width: 49%;
        color: #AFAFAF;
        background-color: #E8E8E8;
        border-radius: 10px;
        height: 4vh;
        max-height: 4vh;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        font-size: 1rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .qnBtn > button.qnActive, .divAddQn > button {
        color: white;
        background-color: #163D64;
        border: 2px solid #46B1E1;
    }

.divAddQn {
    height: 5vh;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
}

.divAddQn > button {
    width: auto;
    border-radius: 10px
}

    .ink-context {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }

#cardSetModal .modal-dialog {
    width: 308px
}

#cardSetTable {
    width: 170px;
    margin: 10px 50px;
}

    #cardSetTable td {
        padding: 15px 0;
    }

    #cardSetTable input {
        width: 50px;
    }

    #cardSetTable button {
        width: 100%;
    }
    
.e-toolbar .e-toolbar-item .e-tbar-btn, .e-toolbar .e-toolbar-items {
    display: block;
}

#notifyLabel h2 {
    text-align: center;
    margin-bottom: 2rem;
}
.pdTop {
    padding: 160px 0 30px 0;
}
#kImgSave {
    display: none;
    height: 30px;
    width: auto;
    margin-right: 5px;
    cursor: pointer;
}

.adDivTop > input, .adDivTop > button, .adDivTop > a {
    margin: 0 2px;
}
#accountDataModal input{
    width:350px;
}

#ipAccountTo{margin:4px 0;}

#konvaContainer {
    width: 2500px;
    height: 1500px;
    border: 1px solid gray;
    margin: auto;
    margin-left:22px;
    position: relative;
    transform-origin:0% 0%;
}    

    #konvaContainer .e-toolbar-extended {
        min-width: 525px !important;
    }

.e-font-size-tbar-btn {
    max-height: 200px;
    overflow-y: auto;
}
#konvaContainer .e-content {
    line-height: 1;
}
#konvaContainer .e-richtexteditor.e-rte-tb-expand {
    border: none;
}
    #konvaContainer .e-richtexteditor.e-rte-tb-expand .e-rte-content, #konvaContainer .e-richtexteditor.e-rte-tb-expand .e-source-content {
        border-bottom: none;
    }
    #konvaContainer .e-richtexteditor .e-rte-content .e-content, #konvaContainer .e-richtexteditor .e-source-content .e-content {
        padding: 4px 2px 0 2px;
    }
.dCover {
    display: none;
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    background:transparent;
}

.e-reset {
    color: red;
}

.kToolbar > div, .kToolbar > img, .kInkToolItem > img, .kConColor {
    width: 24px;
    height: 24px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}

.kInkToolItem > img {
    width: 28px;
    height: 28px;
}

.kToolbar, .kInkTool {
    position: absolute;
    display: none;
    z-index: 9999;
}
.kToolbar {
    background: rgba(90,90,90,.5);
}

.dTxt{position:absolute;min-width:100px!important;min-height:60px!important;}

.kTxt {
    position: absolute;
    padding: 5px;
    resize: none;
}
#slSelectWs {
    font-size: 1.1rem;
}

#btnConfirmNo {
    border: 1px solid darkgray;
}

#slGroupDetails {
    max-width:103px;
}

#slTagDetails {
    max-width:93px;
}

.divWhite {
    padding-left: 23px;
    padding-bottom: 5px;
    color: white;
}

.btnReset {
    position: absolute;
    left: 21px;
}

.e-card, .e-card:hover {
    background-color: transparent;
}

#spTag, #spTagKanban, #spTagDetails, #spTagStudy {
    cursor: pointer;
    padding: 3px 22px 3px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.82);
    font-size: 0.78rem;
    font-family: 'Inter', system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    height: 28px;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

#spTag:hover, #spTagKanban:hover, #spTagDetails:hover, #spTagStudy:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
}

.e-multi-select-wrapper .e-delim-values, .e-multi-select-wrapper .e-delim-values .e-remain, #slQcStack, #canSlStack, #slRecent, #slQCStacks, #gslQCStacks {
    color: white;
}

.e-multi-select-wrapper .e-chips{    
    border-radius:0;
}

div.e-headercelldiv {
    background-color: rgb(68,114,196);
    color: white;
}

tr.e-altrow {
    background-color: #f2f2f2;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
    border-color: transparent;
}

.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    content: none;
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    color: white;
}

.e-dropdownbase .e-list-item.e-active, .notedexColor {
    color: var(--notedex);
}

/* Syncfusion dropdown/multiselect popup — dark theme */
.e-multi-select-list-wrapper,
.e-multi-select-list-wrapper .e-list-parent,
.e-multi-select-list-wrapper .e-content,
.e-ddl-popup,
.e-ddl-popup .e-list-parent,
.e-ddl-popup .e-content {
    background-color: var(--bg-elevated) !important;
    color: white !important;
}

.e-multi-select-list-wrapper,
.e-ddl-popup {
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
}

.e-multi-select-list-wrapper .e-list-item,
.e-ddl-popup .e-list-item {
    color: white !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    margin: 3px 6px !important;
    border-radius: 8px !important;
    opacity: 0.88;
    transition: opacity 0.15s, transform 0.1s !important;
}

.e-multi-select-list-wrapper .e-list-item:hover,
.e-multi-select-list-wrapper .e-list-item.e-hover,
.e-ddl-popup .e-list-item:hover,
.e-ddl-popup .e-list-item.e-hover {
    opacity: 1 !important;
    transform: translateX(2px) !important;
    color: white !important;
}

.e-multi-select-list-wrapper .e-list-item.e-active,
.e-multi-select-list-wrapper .e-list-item.e-selected,
.e-ddl-popup .e-list-item.e-active,
.e-ddl-popup .e-list-item.e-selected {
    opacity: 1 !important;
    color: white !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25) !important;
}

.e-multi-select-list-wrapper .e-checkbox-wrapper .e-frame,
.e-ddl-popup .e-checkbox-wrapper .e-frame {
    background-color: var(--bg-overlay) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

.e-multi-select-list-wrapper .e-checkbox-wrapper .e-frame.e-check,
.e-ddl-popup .e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--notedex) !important;
    border-color: var(--notedex) !important;
}

#divTextOutliner {
    display: none;
    padding: 1rem 2rem;
    background-color: var(--bg-surface);
}

.e-richtexteditor .e-rte-content .e-content blockquote {
    border-left: none;
}

.divEdit {
    max-height: 400px;
    overflow-y: auto;
}

.borderTop {
    margin-top: 10px;
    padding-top:10px;
    border-top: 3px solid white;
}

.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child{
    margin-left:0;
}

.divAppSumo {
    width: 650px;
    color: black;
    padding: 10px;
    background: white;
}
#divPolicy {
    display: block;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 14px;
    margin-top:12px;
}
#divPolicy a {
    margin: 0px 20px;
}
.divAppSumo h3 {
    text-align: center;
}
#ipCode {
    margin-right: 100px;
    height: 36px;
    border-color: red;
    border-radius: 7px;
    text-align: center;
    width:160px;
}
.btnRedeem {
    padding: 6px 25px;
    border-radius: 7px;
}
.kanbanScrollTop {
    position: absolute;
    top: 50px;
    right: 5px;
    z-index: 99999999;
    color: var(--gray);
}
.kanbanScrollBot {
    position: absolute;
    bottom: 10px;
    right: 5px;
    z-index: 99999999;
    color: var(--gray);
}

#cardFrontBody_rte-edit-view ol li::marker {
    letter-spacing: 0;
}

#mainMenu {
    position: relative;
    z-index: 6;
    top: 1vh;
}

    #mainMenu > ul {
        background: var(--bgDark1);
    }

.e-kanban .e-kanban-header .e-header-cells {
    padding: 0;
    border-bottom: 1px solid #e0e0e0;
    background:none;
}

#slView {
    margin-bottom: 15px;
}
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card {
    border: none;
}

.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells {
    height: auto;
    min-height: auto;
    padding: 0;
    padding-top: 10px;
}

.pRight0 {
    padding-right: 0px !important;
}

.round {
    position: relative;
}

    .round label {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 28px;
        left: 0;
        position: absolute;
        top: 0;
        width: 28px;
    }

        .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 6px;
            left: 7px;
            opacity: 0;
            position: absolute;
            top: 8px;
            transform: rotate(-45deg);
            width: 12px;
        }

    .round input[type="checkbox"] {
        visibility: hidden;
    }

        .round input[type="checkbox"]:checked + label {
            background-color: var(--notedex);
            border-color: var(--notedex);
        }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }
.e-custom .e-frame {
    border-radius: 100%;
}
.e-custom .e-label{
    color:var(--white);
}
.e-checkbox-wrapper .e-frame.e-check{
    background-color: var(--notedex);
}
#pdfStyle {
    margin-bottom: 20px;
}
.guideDiv {
    display: none;
    text-align: center;
    color: black;
    margin-top: -4rem;
}

    .guideDiv label {
        color: rgb(107,199,250);
        font-size: 1.3rem;
        display: block;
    }

    .guideDiv a {
        text-decoration: underline;
    }

    .guideDiv img {
        width: 70px;
        height: auto;
    }
    .guideDiv .modal-footer {
        position: absolute;
        bottom: 0.3rem;
        width: 100%;
        left: 0;
    }
.show {
    display: block;
}
.btnSignUp {
    /* styles defined in modern button overrides block below */
}
.cBlack{color:black;}
.cGray {
    color: var(--gray);
}
#scoreContent {
    font-size: 1.2rem;
}
#divSFlag {
    display: inline-block;
    position: relative;
    width: 46px;
}
#imgSFlag {
    position: absolute;
    font-size: 24px;
    top: -16px;
    margin-left: 8px;
}
.divFooter {
    padding: 1rem;
    text-align: right;
}
    .divFooter button {
        margin-right: 3px;
        padding: 2px;
    }
.red, #grid_update > span, #linkDelAcc, #linkDelAcc:hover {
    color: red;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}

.sflag {
    padding: 15px;
    display: none;
    cursor:pointer;
}

.sFlagNO {
    background-color: red;
    color: white
}

.sFlagMAYBE {
    background-color: yellow;
    color: black
}

.sFlagYES {
    background-color: green;
    color: white
}

.imgSyncBg {
    cursor: pointer;
    width: 28px;
    z-index: 1003;
    position: absolute;
    right: 5px;
    top: 4px;
}

.e-dropdown-popup {
    z-index: 1001;
    display: none;
}

.warningMess {
    color: red;
    font-weight: bold;
}

.tBlack, .e-dropdownbase .e-list-group-item, .e-fixed-head {
    color: black;
}

.NaturalImage-image {
    width: 98%;
    height: auto;
}

#hDiv, #hDivBack {
    position: absolute;
    left: -1000px;    
}

#hDivCard, #hDivCardBack {
    width: 660px;
    background-color: white;
    color: black;    
}

#hDivCardBack {
    height: 396px;
}

#hTitle {
    height: 48px;
    line-height: 48px;
    border-bottom: 1.5px solid red;
}

#hBody {
    height: 348px;
}

.topStudyMode, .topFlip, .topShare, .topGrid, .topDuplicate, .guideDiv3 label {
    text-align: center;
}

.faVertical {
    vertical-align: middle;
}

i {
    cursor: pointer;
}

.imgStudyFlag {
    position: absolute;
    font-size: 1.7em;   
    display: none;
}

#cardTagDetails .imgStudyFlag {
    top: 3px;
    right: 0;
}

#rte_tool_new, #ink_tool, .cardNumber, #cardTagDetails {
    transition: 0.4s linear;
}

    #rte_tool_new i, #grte_tool_new i {
        margin-left: 7px;
        position: static;
        vertical-align: middle;
    }

.studyThumb {
    position: absolute;
    top: -26px;
    font-size: 24px;
    right: 0;
    cursor: initial;
}

#rteSpecial_char .char_block {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 5px 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DDDDDD;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.char_block.e-active {
    outline: 1px solid #0D6EFD;
    border-color: #0D6EFD;
}

.imgVideo {
    width: 18px;
    height: auto;
}

.imgFont {
    width: 12px;
    margin-bottom: 10px;
    margin-left: -5px;
}

.fontDecrease.imgFont {
    margin-bottom: 3px;
}

.btnXS {
    font-size: 13px;
    padding: 3px;
    border-color: white;
    background-color: var(--bgDark);
    margin-bottom: 2px;
}

#CardsPage input[type=checkbox] {
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

#CardsPage>div{margin-bottom:7px;}

#AdminPage {
    color: black;
    max-height: 670px;
    overflow-y: auto;
}

.kanbanGroup {
    line-height: normal;
}

    .kanbanGroup > div {
        padding: 0 3px;
        margin-right: 5px;
        display: inline-block;
        color: white;
        background-color: blue;
        line-height: normal;
    }
.kanbanGroupAdd > div {
    background-color:transparent;
}
.kanbanDynamicCol {
    display: inline-block;
    margin: 0 5px;
}

.kanbanDragCard {
    display: inline-block;
    margin: 0 5px 8px 5px;
    border-radius: 2px;
    flex-direction: column;
    justify-content: center;
    position: relative;
    vertical-align: middle;
}

.kanbanAddRow, .kanbanAddCol {
    position: absolute;
    right: 15px;
    height: 24px;
    width: auto;
    cursor: pointer;
}

.kanbanAddCol {
    right: 45px;
}

.e-kanban {
    background: transparent;
}

    .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header,
    .e-kanban .e-kanban-header .e-header-cells .e-header-wrap,
    .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
        background-color: var(--bgDark);
    }

        .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text,
        .e-kanban .e-kanban-table .e-header-cells .e-column-expand, .e-kanban .e-kanban-table .e-header-cells .e-column-collapse,
        .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand, .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse,
        .e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-swimlane-text, .e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-item-count,
        .e-kanban .e-kanban-table .e-header-cells .e-header-text, .e-kanban .e-kanban-table .e-header-cells .e-item-count {
            color: white;
        }
.kanbanAdd, .kanbanAdd:hover {
    background: transparent;
    box-shadow: none !important;
    border:none !important;
}
.kanbanTdAdd {
    text-align: center;
    border-style: dotted;
    border-color: blue;
}

    .kanbanTdAdd span {
        color: blue;
        font-size: 35px;
    }

.kanbanTdAddCrop {
    line-height: 25px;
}
    .kanbanTdAddCrop span {
        font-size: 25px;
    }

.kanbanTable {
    width: 100%;
}

.kanbanCard {
    width: 100%;
    height: auto;
}

.kanbanCardCrop {
    margin-bottom: -48%;
}

.imgSearch {
    width: 26px;
    height: 26px;
    cursor: pointer;
    margin-left: 8px;
}

#tabSysBg .e-content .e-item {
    max-height: 333px;
    overflow-y: auto;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
    color: var(--notedex);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: white;
}

#tabCardBg .e-tab-header .e-toolbar-item .e-tab-text {
    color: #807F7F;
}
#tabCardBg .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: white;
}
#tabCardBg .e-tab-header .e-toolbar-items .e-toolbar-item {
    background: white;
    border: 1px solid #807F7F;
    margin: 1px 2px 0px 0;
}
#tabCardBg .e-tab-header .e-toolbar-items .e-toolbar-item.e-active {
    background: #4E95D9;
}

#slRecent {
    margin-top: 6px;
}

.whiteLink {
    color: white;
    text-decoration: underline;
}

.imgFav {
    cursor: pointer;
    height: 28px;
    width: 28px;
}

.imgFullscreen {
    cursor: pointer;
    height: 26px;
    width: auto;
    margin-right: 1.5rem;
}

.mainContent {
    height: 89vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0px;
    margin-right: 0;
    margin-left: 0;
    padding-top: 15px;
}

.mainContent1 {
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0px;
    margin-right: 0;
    margin-left: 0;
    padding-top: 15px;
}

.cardsPageContainer {
    padding-top: 0px;
    height: 77vh;
}

.activeTool {
    background: rgba(0, 0, 0, 0.12) !important;
}

.divMultiSelect {
    float: left;
    height: 100%;
    position: relative;
    display: none;
}

    .divMultiSelect > input {
        position: absolute;
        top: 45%
    }

.hiddenCard {
    opacity: 0.5;
}

.btn-purple {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    color: white;
}

/* ── Global Input / Select / Textarea Styles ─────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([class*="e-"]):not(.e-input):not(.ipStackTitle),
select:not([class*="e-"]),
textarea:not([class*="e-"]) {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([class*="e-"]):not(.e-input):not(.ipStackTitle):focus,
select:not([class*="e-"]):focus,
textarea:not([class*="e-"]):focus {
    outline: none;
    border-color: rgba(79,142,255,0.6);
    box-shadow: 0 0 0 3px rgba(79,142,255,0.15);
    background: rgba(255,255,255,0.1);
    color: white;
}

input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

/* ── Modern Button Overrides ─────────────────────────────── */
.btn {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    border-radius: 8px;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.96) !important; }

.btn-primary {
    background: linear-gradient(135deg, #4f8eff, #6c63ff);
    border: none;
    color: white;
    box-shadow: 0 4px 14px rgba(79,142,255,0.28);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #6a9fff, #7c74ff);
    border: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79,142,255,0.42);
}

.btn-secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
    color: white;
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    border: none;
    box-shadow: 0 4px 14px rgba(229,62,62,0.25);
}
.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(135deg, #fc5454, #e53e3e);
    border: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(229,62,62,0.38);
}

.btn-success {
    background: linear-gradient(135deg, #38a169, #276749);
    border: none;
    box-shadow: 0 4px 14px rgba(56,161,105,0.25);
}
.btn-success:hover {
    background: linear-gradient(135deg, #48bb78, #38a169);
    border: none;
    transform: translateY(-1px);
}

.btnXS {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border-radius: 6px;
    margin-bottom: 2px;
}
.btnXS:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

.btnSignUp {
    background: linear-gradient(135deg, #4f8eff, #6c63ff);
    color: white;
    padding: 14px 68px;
    font-size: 28px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 28px rgba(79,142,255,0.38);
    white-space: nowrap;
}
.btnSignUp:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(79,142,255,0.5);
}

#app {
    color: white;
}

.toast.show {
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 999;
    background-color: var(--notedex);
    font-size: 1.5rem;
}

/* Brief confirmation after saving a draft (fixed lower-right) */
.draftSavedToast {
    position: fixed;
    right: 18px;
    bottom: 28px;
    z-index: 10050;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(20, 30, 48, 0.94);
    border: 1px solid rgba(79, 142, 255, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    max-width: 280px;
    pointer-events: none;
}
.rowSettings {
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 16px;
}

    .rowSettings label {
        margin-bottom: 0;
    }

    /* First direct-child label = the description label; pin it to a fixed width */
    .rowSettings > label:first-child {
        flex: 0 0 260px;
        font-size: 0.88rem;
        color: rgba(255,255,255,0.8);
    }

    /* Sections with sBorder keep their own layout */
    .rowSettings.sBorder {
        display: block;
        padding: 12px 4px;
    }
.topZoom {
    display: none;
    color: white;
    font-size: 1.3rem;
    margin-right: 25px;
}

.spZoom {
    padding: 0 8px;
}

.spZoomAction {
    cursor: pointer;
    font-size: 1.5rem;
}

.spZoomIn {
    padding-top: 2px;
}

.inkToolItem, .kInkToolItem {
    display: inline-block;
    height: 100%;
}

    .inkToolItem > img {
        height: 42px;
        width: auto;
        margin: 0;
        padding: 0;
        display: block;
    }

    .inkToolItem > .penTool {
        height: 36px;
    }

    .inkToolItem .lbColor, .kInkToolItem .lbColor {
        height: 6px;
        width: 100%;
        line-height: 1;
        display: block;
        margin: 0px;
        padding: 0px;
    }
    .kInkToolItem .lbColor{
        height:3px;
    }

.selected {
    filter: brightness(100);
}

/* Workspace share icon: natural blue = shared (on), white = not shared (off) */
.imgShareWs.selected {
    opacity: 0.5;
}

.navbar_bg_color {
    background: rgba(10,10,20,0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.rteTool95 {
    height: 95%;
    width: auto;
}

.rteTool70 {
    height: 70%;
    width: auto;
}

.rteTool74 {
    height: 74%;
    width: auto;
}

#tagImg, #gtagImg {
    border: 2px solid white;
}

#inkImg, #ginkImg {
    display: inline-block;
}

    #inkImg > img, #ginkImg > img, .qcInkTool > img {
        height: 100%;
        width: auto;
    }

.rteToolRedLine {
    border: 2px solid white;
    display: inline-block;
    padding: 0 2px 3px 2px;
}

    .rteToolRedLine > div {
        display: inline-block;
        height: 2px;
        background-color: white;
        width: 23px;
        margin-bottom: 4px;
    }

#settingsPage {
    max-width: 680px;
    padding-top: 12px;
}

#settingsPage h3 {
    color: white;
}

#notifyModal .modal-body {
    max-height: 600px;
    overflow-y: auto;
}

#editTagName::placeholder, .ipStackTitle::placeholder {
    color: white;
    opacity: 1;
}

#editTagName::-ms-input-placeholder, .ipStackTitle::-ms-input-placeholder {
    color: white;
}

.ui-resizable-handle {
    background: #0080ff;
    cursor: pointer;
}

#canSideBar .ui-resizable-handle {
    cursor: col-resize;
}

.tbShare {
    width: 100%;
}

    .tbShare tr td:first-child {
        width: 65%;
    }

    .tbShare tr td:nth-child(2) {
        text-align: center;
    }

    .tbShare tr td:nth-child(2) > input:last-child {
        margin-top:5px;
    }

#btnCopyShare {
    background-color: red;
    color: white;
}

.divItem {
    margin: 12px 0;cursor:pointer;
}

@keyframes cardExitLeft {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-32px) scale(0.97); }
}
@keyframes cardExitRight {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(32px) scale(0.97); }
}
@keyframes cardEnter {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.slide-left {
    animation: cardExitLeft 0.17s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide-right {
    animation: cardExitRight 0.17s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.card-enter {
    animation: cardEnter 0.18s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

.ui-icon-gripsmall-diagonal-se {
    background: none;
}

.ui-icon {
    background-image: url(https://premdev.notedex.app/images/resize_blue.png);
    background-size: contain;
}

.ui-resizable-e {
    width: 4px;
    right: -4px;
}

.ui-resizable-s {
    height: 4px;
    bottom: -4px;
}

#cardFrontTitle_rte-edit-view, #gcardFrontTitle_rte-edit-view {
    overflow-y: hidden;
}

    #cardFrontBody_rte-edit-view p, #cardFrontBody p, #cardBackBody_rte-edit-view p, #cardBackBody p, #cardFrontTitle_rte-edit-view p, #cardFrontTitle p,
    #qcTitle_rte-edit-view p, #qcTitle p, #qcBody_rte-edit-view p, #qcBody p, #gcardFrontTitle_rte-edit-view p, #gcardFrontTitle p,
    #gcardFrontBody_rte-edit-view p, #gcardFrontBody p, #gcardBackBody_rte-edit-view p, #gcardBackBody p {
        margin: 0;
        padding: 0;
        margin-block-start: 0;
        margin-block-end: 0;
        display: block;
    }

#rte_tool_new{position:relative;}
#rte_tool_new, #divTimer, #ink_tool {
    display: none;
    height: 42px;
    overflow: hidden;
    text-align: left;
    margin: auto;
}

#grte_tool_new {
    height: 42px;
    background-color: black;
}

#grte_tool_new img {
    cursor: pointer;
    margin-right:5px;
}

#rte_tool_new img, #ink_tool img {
    cursor: pointer;
}
#iMore {
    position: absolute;
    right: 0;
    top: 8px;
}
#divTimer {
    text-align: right;
    color: white;
    font-size: 18px;
    display: block;
}

#searchRow>div{
    display:inline-block;
}

.logout, .qcClose, .indexPage, #colorpickerHolder2, .purchaseLink, #globalModal, #moreActionPopup, #saveAsPopup, .sidebar, #topMenu, .tabEle, .mobileEle, #groupRowDetails, #ipSearch, .fullscreenExit,
.fullscreenAdd, .loggedNav, .imgSort, .divLinkDesktop, .imgFullscreen, #slGroupKanban,.divScore, .topDuplicate, .divIndexCard, .qcArrow, #optReverse, .topWs, .topWs1, .topLabel, 
.sidebarRightMobile .sideBarList, .sidebarRightMobile .hideDivGroupRight, .sidebarRightMobile .sidebarContentCard, #divCanvas, .topCanvas span, .topAddCard span, .topAddStack, #divMargin {
    display: none;
}

#gink_tool{
    display:none;
    height:42px;
}

#slWorkspace1 {
    margin: 0.5rem 0 0 -0.5rem;
    min-width: 120px;
}

#divSelectWs {
    display: none;
    border-bottom: 1px solid darkgray;
    margin-bottom: 10px;
}

.previewModal {
    display: none;
    width: 30%;
    height: auto;
    padding: 10px;
    position: absolute;
    left: 35%;
    top: 25%;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.8);
}
.previewModal > img{
    width:100%;height:auto;
}
.previewShow {
    transform: scale(2);
    transition: all .5s ease-in-out;
}

.scoreBtn {
    cursor: pointer;
    height: 42px;
}

.flLeft {
    float: left;
}

.flRight {
    float: right;
}

.marginAuto {
    margin: auto;
}

#searchRow {
    margin: 5px 5px 8px -15px;
    display: none;
}

#groupRowDetails {
    position: fixed;
}

.slND, .slNormal {
    height: 28px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: rgba(255,255,255,0.82);
    padding: 0 10px;
    font-size: 0.78rem;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
}

.slND:hover, .slNormal:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
}

.slND:focus, .slNormal:focus {
    outline: none;
    border-color: rgba(79,142,255,0.55);
    box-shadow: 0 0 0 3px rgba(79,142,255,0.12);
}

.slND > option, .slNormal > option {
    background-color: var(--bg-elevated);
    color: white;
}

#studyModal select.slND {
    height: 38px;
    border-radius: 8px;
}

.slTag > option {
    background-color: var(--bg-elevated);
    color: white;
}

/* Study mode and export modal tag picker button overrides */
#spTagStudy, #spTagExport {
    height: 38px;
    border-radius: 8px;
    min-width: 110px;
}

/* Export modal — taller selects with rectangular rounded corners */
#exportFilterModal select.slND {
    height: 38px;
    border-radius: 8px;
}

/* Tag filter ListBox popup (cards page + kanban + card detail slider + study modal + export modal) */
#slTag_parent,
#slTagKanban_parent,
#slTagDetails_parent,
#sTagStudy_parent,
#sTagExport_parent {
    background: rgba(15,15,28,0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#slTag_parent .e-list-item,
#slTagKanban_parent .e-list-item,
#slTagDetails_parent .e-list-item,
#sTagStudy_parent .e-list-item,
#sTagExport_parent .e-list-item {
    border-radius: 4px !important;
    margin: 2px 4px !important;
    opacity: 0.88 !important;
    transition: opacity 0.12s, transform 0.1s !important;
}

#slTag_parent .e-list-item:hover,
#slTag_parent .e-list-item.e-hover,
#slTagKanban_parent .e-list-item:hover,
#slTagKanban_parent .e-list-item.e-hover,
#slTagDetails_parent .e-list-item:hover,
#slTagDetails_parent .e-list-item.e-hover,
#sTagStudy_parent .e-list-item:hover,
#sTagStudy_parent .e-list-item.e-hover,
#sTagExport_parent .e-list-item:hover,
#sTagExport_parent .e-list-item.e-hover {
    opacity: 1 !important;
    transform: translateX(2px) !important;
}

#slTag_parent .e-checkbox-wrapper .e-frame,
#slTagKanban_parent .e-checkbox-wrapper .e-frame,
#slTagDetails_parent .e-checkbox-wrapper .e-frame {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.4) !important;
}

#slTag_parent .e-checkbox-wrapper .e-frame.e-check,
#slTagKanban_parent .e-checkbox-wrapper .e-frame.e-check,
#slTagDetails_parent .e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--notedex) !important;
    border-color: var(--notedex) !important;
}

/* Tag pill inside the ListBox items */
.liTag {
    border-radius: 4px !important;
    padding: 2px 9px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.ipSearch {
    width: 137px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: white;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background 0.15s, border-color 0.15s;
    text-indent: 0;
}

.ipSearch:focus {
    outline: none;
    border-color: rgba(79,142,255,0.55);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(79,142,255,0.12);
}

.ipSearch::placeholder { color: rgba(255,255,255,0.35); }

.searchWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.searchWrap .ipSearch {
    padding-right: 22px;
    box-sizing: border-box;
}

.btnSearchClear {
    position: absolute;
    right: 7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    display: none;
    user-select: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btnSearchClear:hover {
    background: rgba(255,255,255,0.32);
    color: white;
}

.ipStackTitle {
    margin-left: 17px;
    background-color: transparent;
    border: none;
    color: white;
}

.ipStackTitleFocus {
    border: initial;
    background-color: var(--bgDark);
}

.imgColor, .imgMove {
    height: 30px;
    width: auto;
    cursor: pointer;
}

.cardImgBg {
    cursor: pointer;
    display: inline-block;
    width: 150px;
    height: 90px;
    margin: 5px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.cardTmpBg {
    cursor: pointer;    
    width: 220px;
    height: 132px;    
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.divTmpBg {
    display: inline-block;
    margin: 5px;    
    position:relative;
}

.divTmpBg>div:last-child{
    text-align:center;
    margin-top:2px;
    color:white;
} 

.sysImgColor, .sysColorPicker {
    width: 50px;
    height: 50px;
    display: inline-block;
    cursor: pointer;
    margin: 7px;
}

.sysColorPicker {
    margin-top: -50px;
    width: 45px;
    height: 45px;
}

.sysImgL, .sysImgP, .cardImgTmp {
    cursor: pointer;
    display: inline-block;
    width: 150px;
    height: 90px;
    margin: 5px;
    background-color: white;
    text-align: center;
}

    .sysImgL > img, .cardImgTmp > img {
        width: 100%;
        height: auto;
    }

    .sysImgP > img {
        height: 100%;
        width: auto;
    }

#stripeProducts {
    margin-bottom: 15px;
    color: black;
}

    #stripeProducts td {
        padding: 5px;
    }

    #stripeProducts tr td:first-child {
        width: 460px;
    }

.divBtn {
    margin-top: 12px;
}

.spTitle {
    font-weight: bold
}

.btnBuy {
    background-color: #0080ff;
    color: white;
}

#btnPay {
    float: right;
    margin-right: 10px;
}

.divProduct {
    background-color: whitesmoke;
    padding: 15px;
}

.imgSort {
    width: 20px;
    height: auto;
}

#adminTable {
    border-collapse: collapse;
    width: 100%;
}

    #adminTable td, #adminTable th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #adminTable tr:nth-child(odd) {
        background-color: white;
    }

    #adminTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #adminTable tr:hover {
        background-color: #ddd;
        cursor: pointer;
    }

    #adminTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }

#actionModal {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
}

.cursor {
    cursor: pointer;
}

.moreActions, .shareActions, .favActions {
    z-index: 3;
    position: absolute;
    cursor: pointer;
}

.spCardNoBg {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 45px;
    background-color: black;
    opacity: 0.2;
    left: 0;
}

.spCardNo {
    bottom: 0;
    left: 47%;
    z-index: 2;
    position: absolute;
    color: blue;
    font-size: 30px;
}

.e-image .spCardNoBg, .e-image .spCardNo {
    bottom: 2px;
}

.cardPageItem > img.moreActions {
    top: 0;
    right: 0;
}

.e-image > img.moreActions {
    right: 2px;
}

.favActions {
    bottom: 6px;
    left: 3px;
    width: 36px;
    display: none;
}

.favActionsActive {
    display: block;
}

.slideItem .moreActions {
    top: 35px;
    right: 8px;
}

.bgGray {
    background-color: var(--gray);
}

.bgBlue {
    background-color: blue;
}

#thumTagModal .modal-content {
    background: rgba(15,15,28,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    color: rgba(255,255,255,0.9);
}

#thumTagModal .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
}

#thumTagTb {
    width: 100%;
}

#thumTagTb td > div {
    cursor: pointer;
    transition: opacity 0.12s, transform 0.1s;
}

#thumTagTb td > div:hover {
    opacity: 1;
    transform: scale(1.04);
}

.tbPadding td {
    padding: 4px;
}

#backColorPopup .e-container, #textColorPopup .e-container, #inkColorPopup .e-container,
.popupBgColor, #cardSysBgPopup, #sysDfCardBg .e-container {
    background: rgba(15,15,28,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}

.popupBgColor, .cardCanvas {
    border: 1px solid rgba(255,255,255,0.1);
}

    .popupBgColor > div {
        color: rgba(255,255,255,0.85);
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 6px;
        margin: 2px 4px;
        font-size: 0.85rem;
        transition: background 0.12s, color 0.12s;
    }

div.topDel {
    text-align: center;
    color: red;
    display: none;
}

#inkColorPopup {
    padding: 8px;
    background-color: var(--navBg);
}

.divInkSize {
    margin-top: 35px;
}

    .divInkSize label {
        color:var(--white);
        font-weight: bold;
    }

.e-richtexteditor .e-rte-content .e-content, .e-richtexteditor .e-source-content .e-content {
    min-height: initial;
    padding: 0;
}

.container {
    max-width: none;
}

.px-3 {
    padding-left: 0.4rem !important;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.32);
}

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }

#cardFrontBody_rte-edit-view, #cardBackBody_rte-edit-view {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,0.55) transparent;
}

#cardFrontBody_rte-edit-view::-webkit-scrollbar, #cardBackBody_rte-edit-view::-webkit-scrollbar {
    width: 5px;
}

#cardFrontBody_rte-edit-view::-webkit-scrollbar-track, #cardBackBody_rte-edit-view::-webkit-scrollbar-track {
    background: transparent;
}

#cardFrontBody_rte-edit-view::-webkit-scrollbar-thumb, #cardBackBody_rte-edit-view::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,0.55);
    border-radius: 4px;
}

#cardFrontBody_rte-edit-view::-webkit-scrollbar-thumb:hover, #cardBackBody_rte-edit-view::-webkit-scrollbar-thumb:hover {
    background: rgba(128,128,128,0.8);
}
/*#cardFrontBody_rte-edit-view ol li::marker{
    display:list-item;
}*/

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 5vh;
    display: flex;
    align-items: center;
    z-index: 5;
    position: relative;
}

.topRowLink {
    height: 6vh;
    padding-top: 0;
}

.topLabel {
    margin: 0;vertical-align:middle;
}

.topLabelPublic {
    margin: 0;
    cursor: pointer;
    left: 75px;
    display: none;
}

.linkUniversal {
    display: none;
    text-decoration: underline;
}

.navUniversal {
    position: absolute;
    right: 5px;
    top: 12px;
    width: 80%;
    text-align: right;
}

.topDivLink {
    display: flex;
    z-index: 6;
    align-items: center;
}

#ipTopSearch {
    width: 100px;
    display: inline-block;
}

.activeBlue, .activeBlue:focus {
    border: 1px solid #007bff;
    outline: none;
}

#ipTopSearch1 {
    display: none;
    cursor: pointer;
    width: 145px;
    margin-right: 1rem;
}

.topRefresh1 {
    display: none;
    color: white;
    cursor: pointer;
}

.offlineIndicator {
    display: none;
    color: #ff6b6b;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 7px;
    border: 1px solid #ff6b6b;
    border-radius: 4px;
    margin-right: 0.5rem;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.topMore, .topSearch, .topRefresh, .topAddCard, .topgCard, .topAddSS, .topEditSS, .topClose, .topCheck, .topDelete, .topMove,
.topCopy, .topMoveGroup, .topTag, .topBg, .topShow, .topHide, .topImport, .topCanvas {
    display: none;
    color: white;
    cursor: pointer;
    margin-right: 0.5rem;
    border-radius: 8px;
    padding: 4px 5px;
    transition: background 0.15s, transform 0.12s;
}

.topMore:hover, .topSearch:hover, .topRefresh:hover, .topAddCard:hover, .topgCard:hover,
.topAddSS:hover, .topEditSS:hover, .topClose:hover, .topCheck:hover, .topDelete:hover,
.topMove:hover, .topCopy:hover, .topMoveGroup:hover, .topTag:hover, .topBg:hover,
.topShow:hover, .topHide:hover, .topImport:hover, .topCanvas:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.topMore:active, .topSearch:active, .topRefresh:active, .topAddCard:active, .topgCard:active,
.topAddSS:active, .topEditSS:active, .topClose:active, .topCheck:active, .topDelete:active,
.topMove:active, .topCopy:active, .topMoveGroup:active, .topTag:active, .topBg:active,
.topShow:active, .topHide:active, .topImport:active, .topCanvas:active {
    background: rgba(255,255,255,0.18);
    transform: scale(0.94);
}

    .topMove img, .topCopy img, .topMoveGroup img, .topTag img, .topShow img, .topHide img, .topCheck img {
        height: 4vh;
        width: auto;
    }

    .topRefresh img, .topRefresh1, .topAddCard img, .topgCard img, .topAddSS img, .topImport img, .topAddStack img, .topCanvas img, .kTopAdd img {
        height: 3.2vh;
        width: auto;
    }
    .topDelete i{
        font-size:2em;color:red;
    }
.kZoom{
    display:inline-block;
    margin-left:5px;
}
.kZoom > img {
    height: 2.8vh;
    width: auto;
    cursor: pointer;
}
    .kZoom > i {
        cursor:pointer;
        margin: 0 12px 0 8px;
    }
.topBg img {
    height: 3.5vh;
    width: auto;
}

#moreActionPopup > div > img {
    height: 3.8vh;
    width: auto;
}

#moreActionPopup > div > i {
    font-size: 2.4em;
}

.topSave .arrnext {
    height: 2vh;
}

.topClose img {
    height: 6vh;
    width: auto;
}

.exampleModal .modal-body input {
    width: 95px;
}

.exampleModal .modalTitle {
    font-size: 2rem;
}

.exampleModal .modal-content {
    border-radius: 20px;
    background-color: var(--bg-elevated);
}

#guideModal.exampleModal .modal-content {
    background-color: white;
    color: black;
}

#guideModal .modal-body {
    display: flex;
    height: 560px;
    justify-content: center;
    align-items: center;
}

.exampleModal .modal-body {
    padding: 0.5rem;
    color: white;
}

    .exampleModal .modal-body span {
        font-size: 1.3rem;
    }

/* ── Modern Modal Overrides ──────────────────────────────── */
.modal-content {
    background: rgba(15,15,28,0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 1.1rem 1.4rem 0.9rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: white;
}

.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.5;
}
.modal-header .btn-close:hover { opacity: 0.9; }

.modal-body {
    padding: 1.1rem 1.4rem;
    color: var(--text-primary);
}

.modal-footer {
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.75rem 1.4rem;
    gap: 8px;
}

.modal-backdrop {
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-backdrop.show { opacity: 1; }

/* exampleModal already has border-radius — just align with new system */
.exampleModal .modal-content {
    border-radius: 16px;
    background: rgba(15,15,28,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(255,255,255,0.1);
}

/* Inputs / selects inside modals */
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="password"],
.modal-body input[type="number"],
.modal-body select,
.modal-body textarea {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: white;
    padding: 7px 12px;
    transition: border-color 0.15s;
}
.modal-body input[type="text"]:focus,
.modal-body input[type="email"]:focus,
.modal-body input[type="password"]:focus,
.modal-body input[type="number"]:focus,
.modal-body select:focus,
.modal-body textarea:focus {
    outline: none;
    border-color: rgba(79,142,255,0.6);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(79,142,255,0.12);
    color: white;
}
.modal-body input::placeholder,
.modal-body textarea::placeholder { color: rgba(255,255,255,0.35); }
.modal-body select option { background: var(--bg-elevated); color: white; }

.loginFooter button {
    width: 76px;
}

.main {
    flex: 1;
    height: 94vh;
}

.mainBody {
    height: 94vh;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    transition: padding-left 300ms ease-in-out;
}

/* Push content right when AI sidebar is open */
#mainBody.aiSidebarPushMain {
    padding-left: calc(320px + 1.5rem) !important;
}

/* Override Bootstrap .container centering so cards align flush with groups sidebar */
#mainBody.aiSidebarPushMain #cardsPageContainer,
#mainBody.aiSidebarPushMain #searchRowTop {
    margin-left: 0 !important;
    max-width: none !important;
}

/* Canvas should sit flush with AI sidebar edge — reduce padding to exactly the sidebar width */
#mainBody.aiSidebarPushMain.canvasActive {
    padding-left: 320px !important;
}
#mainBody.aiSidebarPushMain.canvasActive #cardsPageContainer {
    padding-left: 0 !important;
}
/* canSideBar is behind the AI sidebar when open — cancel its margin offset on konvaContainer */
#mainBody.aiSidebarPushMain.canvasActive #konvaContainer {
    margin-left: 0 !important;
}

.noOverflow {
    overflow-y: hidden;
}

.divOverflow {
    overflow-y: auto;
}

.main .top-row {
    justify-content: flex-end;
}

    .main .top-row > a {
        margin-left: 1.5rem;
    }

.logged, .linkAdmin {
    display: none;
    margin-left: 1rem;
}

.sidebar, .main .top-row, .tempDiv {
    background: rgba(10,10,20,0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255,255,255,0.07);
}

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

.navBottom {
    position: absolute;
    bottom: 0;
    width: 100%
}

.topDivLinkLeft {
    left: 0;
    position: absolute;
}
.kTopDiv {
    display: none;
    position: absolute;
    left: 45px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.kTopDiv.isPublic {
    left: 90px;
}
    .kTopDiv.isCanvas {
        left: 55px;
    }
.kTopAdd {
    cursor: pointer;
    display: inline-block;
    border-radius: 8px;
    padding: 4px 5px;
    transition: background 0.15s, transform 0.12s;
}

.kTopAdd:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.kTopAdd:active {
    background: rgba(255,255,255,0.18);
    transform: scale(0.94);
}
.kImgDiv {
    cursor: pointer;
    height: 3.2vh;
    width: 3.2vh;
    margin: 3px 0;
}
.topDivCenter {
    display: none;
    position: absolute;
    left: 60%;
}

.topDivCenter>i{
    cursor:pointer;font-size:1.7em;color:red;
}

#lbIndex {
    color: lightgray;
    margin: 0 10px;
    font-size: 0.9rem;
}
.notedexLink {
    display:none;
    margin-left: 0.5rem;
}
.notedexLink img {
    width: 35px;
    height: 35px;
    padding: 5px;
}

.backLink {
    display: none;
    padding: 0 10px 0 15px;
    vertical-align: middle;
    color: white;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

    .backLink:hover {
        color: #007bff;
    }
    .backLink:active, .backLink:visited {
        color: white;
    }

.loading-section {
    display: none;
    position: absolute;
}

.globalLoading, .saveLoading {
    z-index: 999;
    top: 40%;
    width: 100%;
    text-align: center;
}

.loader-dot {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--notedex);
    display: inline-block;
    -webkit-animation: grow 2.1s infinite ease-in-out both;
    animation: grow 2.1s infinite ease-in-out both;
    margin: 0 10px;
}

    .loader-dot.dot1 {
        -webkit-animation-delay: -0.96s;
        animation-delay: -0.96s;
    }

    .loader-dot.dot2 {
        -webkit-animation-delay: -0.48s;
        animation-delay: -0.48s;
    }

.imgHome {
    width: 24px;
    height: 24px;
    margin-left: 13px;
}

.divNotify {
    position: absolute;
    right: 26px;
    color: white;
    display: none;
    z-index: 3;
    top: 11vh;
}

.divNotify1 {
    position: absolute;
    top: 5vh;
    left: 11vw;
    color: white;
    display: none;
    z-index: 999;
    width: 87vw;
    max-height: 45px;
    overflow-y: auto;
    overflow-x:hidden;
    background-color: cornflowerblue;
}

    .divNotify1 img {
        width: 25px;
        height: auto;
        cursor: pointer;
        position: absolute;
        right: 10px;
    }

    .divNotify1 span {
        margin-right: 10px;
    }

.smallLoading {
    top: 4%;
    right: 8px;
    display: none;
    background: rgba(15,15,28,0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 6px 10px;
}

    .smallLoading .loader-dot {
        height: 8px;
        width: 8px;
        margin: 0 3px;
    }

@-webkit-keyframes grow {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

.sidebarGroup, .sidebarRight, #canSideBar {
    background: rgba(13,13,25,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255,255,255,0.07);
    color: white;
    height: 95vh;
    position: fixed;
    top: 5vh;
    display: none;
    overflow-y: auto;
}

.sidebarGroup {
    max-width: 192px;
    overflow-y: hidden;
    left: 0;
}

#canSideBar {
    width: 192px;
    overflow-y: hidden;
    left: 0;
    display:block;
}

#canSideBar .ui-resizable-e{
    right:0 !important;
}

.sidebarRight {
    background: rgba(13,13,25,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    right: 0;
    z-index: 4;
    overflow: hidden;
    width: auto;
}

.w335{
    width:335px;
}

.sidebarRightScrollBar {
    right: 8px;
}

.sidebarContentList {
    overflow-y: auto;
    width:300px;
}

.hideDivGroup {
    width: 22px;
    z-index: 2;
    height: 100%;
    display: inline-block;
    float: left;
}

.hideDivGroupRight {
    width: 25px;
    height: 93vh;
    position: relative;
    float: right;
}

.sidebarRightMobile {
    width: 100vw;
    left: 0;
    top: 15vh;
    height: 85vh;
    position: absolute;
    right: auto;
}

    .sidebarRightMobile .qcArrow {
        display:block; text-align:center;
    }
    .sidebarRightMobile .sidebarContent {
        padding-top:0;width:100%;height:100%;
    }
    .sidebarRightMobile .sideBarTit {
        width: 94vw;
    }
    .sidebarRightMobile .sidebarContentList {
        text-align: center;
        width:99vw;
    }
.iconMid {
    top: 50%;
    position: absolute;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: 6px 0 0 6px;
    padding: 10px 5px;
}

.iconMid:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
}

.tempDiv {
    height: 7vh;
}

.menuDiv {
    height: 93vh;
    background-color: rgb(29, 29,29);
    color: white;
}

.sidebarContent {
    padding-top: 20px;
    width: 300px;
    float: left;
    position: relative;
}

.sidebarContentCard {
    padding: 5px 0 10px 0;
}

.sidebarRightMobile .sidebarContentCard {
    padding: 0;
    padding-top: 15%;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 5;
}

.sideBarList {
    border-top: 1px solid white;
    margin-top: 15px;
}

.sidebarRightMobile .sideBarList {
    height:100%;
    margin-top:0;
}

.qcThumbnail {
    margin: 8px 0;
    text-align: center;
}

.sideBarTit {
    width: 284px;
    margin: 0 auto;
}

.qcDivRte {
    position: relative;   
    margin: 8px auto;
    background-color:white;
}

.qcDivRte, .qcDivCard, .qcWacomInk {
    width: 94vw;
    height: auto;
}

.qcDivCard, .qcWacomInk {
    position: absolute;
}
.qcDivCard {
    z-index: 2;
}
.sideBarTit img, .qcInkTool {
    width: 35px;
    height: 35px;
    float: right;
    cursor: pointer;
    margin-left:10px;
}

.sidebarRightMobile .qcClose {
    display: inline;
    margin-right: 15px;
}

.sBorder {
    border: 1px solid;
    padding: 2px 4px;
}

    .sBorder > div {
        width: 100%
    }

.sImgBg {
    width: 250px;
    height: auto;
    max-height: 400px;
    border: 1px solid;
    margin: 10px;
    cursor: pointer;
}

.wsBgImg {
    width: 35px;
    background-color: rgb(0, 0, 102);
}
.divCardColor {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: white;
    cursor: pointer;
    margin-left: 10px;
}
.boGray{
    border:1px solid gray;
}

#sColorShare {
    width: 150px;
    height: 150px;
}

.qcThumbnail > img {
    width: 80%;
    height: auto;
    cursor: pointer;
    margin:8px 9px;
}

#qcTitle_rte-edit-view, #qcBody_rte-edit-view {
    overflow-y: hidden;
    background: transparent;
    color: black;
}

#groupContainer {
    width: 165px;
    min-width: 165px;
    overflow-y: auto;
    display: inline-block;
    height: 100%;
}

.sidebarPadding {
    padding-right: 320px;
}

/* ===== AI Chat Sidebar ===== */
.sidebarAI {
    position: fixed;
    top: 5vh;
    left: 0;
    height: 95vh;
    width: 0;
    overflow: hidden;
    background-color: var(--bgDark1);
    z-index: 5;
    transition: width 300ms ease-in-out;
    pointer-events: none;
}

.sidebarAI.aiOpen {
    width: 320px;
    pointer-events: auto;
}

.aiChatPanel {
    width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.aiChatHeader {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.aiHeaderLeft {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aiPastConvLink {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    text-decoration: none;
}

.aiPastConvLink:hover { color: white; text-decoration: none; }

.aiPlusBtn {
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 13px;
    margin-left: 8px;
}

.aiPlusBtn:hover { background: rgba(255,255,255,0.15); color: white; }

.aiCloseBtn {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    text-decoration: none;
    line-height: 1;
}

.aiCloseBtn:hover { color: rgba(255,255,255,0.9); text-decoration: none; }

.aiContextBadge {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.1);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Past Conversations Panel */
.aiPastConvPanel {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    background: var(--bgDark1);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none;
    z-index: 10;
    max-height: 250px;
    overflow-y: auto;
    padding: 8px;
}

.aiPastConvEmpty {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    padding: 8px 10px;
}

.aiPastConvItem {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aiPastConvItem:hover { background: rgba(255,255,255,0.1); }

.aiPastConvTitle { font-weight: 500; }

.aiPastConvMeta { font-size: 10px; color: rgba(255,255,255,0.4); }

/* Messages */
.aiMessages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aiWelcome {
    text-align: center;
    padding: 20px 10px;
    color: rgba(255,255,255,0.8);
}

.aiWelcomeIcon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #4a9eff;
}

.aiWelcome p {
    font-size: 13px;
    line-height: 1.5;
}

.aiSuggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.aiSuggestions button {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    transition: background 0.15s;
}

.aiSuggestions button:hover { background: rgba(255,255,255,0.18); }

.aiMessage {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.aiUserMessage { flex-direction: row-reverse; }

.aiAvatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4a9eff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: white;
}

/* Solid FA icons in chat bubbles need explicit weight when injected dynamically */
.aiAvatar > i.fas {
    font-weight: 900;
}

.aiMessageContent {
    max-width: 86%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aiMessageText {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.aiUserMessage .aiMessageText {
    background: #4a9eff;
    color: white;
    border-radius: 12px 12px 4px 12px;
}

.aiAssistantMessage .aiMessageText {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    border-radius: 12px 12px 12px 4px;
}

.aiMessageTime {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    padding: 0 4px;
}

.aiUserMessage .aiMessageTime { text-align: right; }

.aiMessageActions { margin-top: 4px; }

.aiActionBtn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
}

.aiActionBtn:hover { background: rgba(255,255,255,0.18); }

.aiMatchedCards {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.aiMatchedCardsLabel {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    width: 100%;
    margin-bottom: 2px;
}

.aiCardLink {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    padding: 3px 9px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    text-align: left;
}

.aiCardLink:hover { background: rgba(255,255,255,0.14); color: white; }

.aiStackPicker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.aiActionBtnNew {
    background: rgba(74,158,255,0.15);
    border-color: rgba(74,158,255,0.4);
    color: #4a9eff;
}

.aiActionBtnNew:hover { background: rgba(74,158,255,0.28); }

/* Typing indicator */
.aiTypingDots {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px 12px 12px 4px;
    align-items: center;
}

.aiTypingDots span {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: aiTypingPulse 1.4s infinite;
}

.aiTypingDots span:nth-child(2) { animation-delay: 0.2s; }
.aiTypingDots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiTypingPulse {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Preview / Confirmation Area */
.aiPreviewArea {
    border-top: 1px solid rgba(255,255,255,0.1);
    max-height: 210px;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.aiPreviewHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.aiPreviewHeader span {
    flex: 1;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 600;
}

.aiConfirmBtn {
    background: #27ae60;
    border: none;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.aiConfirmBtn:hover { background: #2ecc71; }

.aiCancelBtn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.aiPreviewItem {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    padding: 4px 0;
}

.aiPreviewCard {
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 5px 8px;
    margin: 3px 0 3px 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.aiPreviewCardFront { font-weight: 600; margin-bottom: 2px; }
.aiPreviewCardBack { color: rgba(255,255,255,0.5); }
.aiPreviewMore { color: rgba(255,255,255,0.45); font-size: 11px; font-style: italic; padding-left: 16px; }

/* Input Area */
.aiInputArea {
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.aiInputRow {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.aiTextInput {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: white;
    padding: 8px 12px;
    font-size: 13px;
    resize: none;
    line-height: 1.4;
    min-height: 36px;
    max-height: 100px;
    font-family: inherit;
}

.aiTextInput::placeholder { color: rgba(255,255,255,0.35); }
.aiTextInput:focus { outline: none; border-color: rgba(74,158,255,0.6); }

.aiSendBtn {
    background: #4a9eff;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.aiSendBtn:hover { background: #2d87f0; }
.aiSendBtn:disabled { opacity: 0.45; cursor: not-allowed; }
.aiSendBtn.aiCancelMode { background: #e03e3e; }
.aiSendBtn.aiCancelMode:hover { background: #c72e2e; }

.aiInputRowBelow {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.aiAttachBtn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
    transition: color 0.15s;
}
.aiAttachBtn:hover { color: rgba(255,255,255,0.8); }

#aiCardContextBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 8px 2px;
}
.aiContextBtn {
    background: rgba(74,158,255,0.12);
    border: 1px solid rgba(74,158,255,0.3);
    color: rgba(255,255,255,0.75);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.aiContextBtn:hover {
    background: rgba(74,158,255,0.25);
    color: white;
    border-color: rgba(74,158,255,0.6);
}
.aiContextBtn:disabled { opacity: 0.5; cursor: default; }

.aiFilePill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(74,158,255,0.15);
    border: 1px solid rgba(74,158,255,0.35);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 5px;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    overflow: hidden;
}
.aiFilePill i { color: #4a9eff; flex-shrink: 0; }
#aiFilePillName { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiFilePillRemove {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
    flex-shrink: 0;
}
.aiFilePillRemove:hover { color: rgba(255,255,255,0.85); }

.aiInputActions { margin-top: 5px; }

.aiContextInfo {
    font-size: 10px;
    color: rgba(255,255,255,0.38);
}

/* AI top toolbar button */
.topAiToggle {
    display: none;
    color: white;
    cursor: pointer;
    margin-left: 1rem;
    margin-right: 3rem;
    font-size: 1.4em;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.topAiToggle:focus i { color: white; }

#navAiToggle.aiActive i { color: #4a9eff !important; }
#navAiToggle.aiActive:focus i { color: #4a9eff !important; }

/* Hide AI icon on tablet portrait (sidebar visible, space too tight) */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) {
    #navAiToggle {
        display: none !important;
    }
}

/* Context toast */
.aiContextToast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(74,158,255,0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.aiContextToast.show { opacity: 1; }

.aiSuggestTooltip {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,42,58,0.95);
    border: 1px solid rgba(79,142,255,0.4);
    color: #e0eaff;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 9990;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.aiSuggestTooltip .aiSuggestBtn {
    background: #4f8eff;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}
.aiSuggestTooltip .aiSuggestDismiss {
    background: none;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
/* ===== End AI Chat Sidebar ===== */

.divPaddingTop {
    height: 8vh;
    background-color: var(--bgDark1);
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 12px;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item a {
        color: rgba(255,255,255,0.6);
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        border-left: 2px solid transparent;
        padding-left: 10px;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        font-weight: 500;
    }

        .nav-item a.active {
            background: linear-gradient(90deg, rgba(79,142,255,0.18), rgba(108,99,255,0.08));
            border-left-color: var(--notedex);
            color: white;
        }

        .nav-item a:hover {
            background: rgba(255,255,255,0.07);
            border-left-color: rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.9);
        }

#groupContainer .nav-item a {
    height: auto;
    line-height: initial;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

/* Drag-to-group: pulse group panel when a card is being dragged */
#groupContainer.groupDragActive .nav-item a[data-groupid]:not([data-groupid="-1"]):not([data-groupid="-99"]) {
    outline: 1px dashed rgba(79, 142, 255, 0.4);
    border-radius: 20px;
}

/* Highlight when card is hovering over a group */
#groupContainer .nav-item a.groupDropHover {
    background: rgba(79, 142, 255, 0.3) !important;
    border-radius: 20px;
    transform: scale(1.04);
}

#groupContainer .nav-item {
    padding: 0.5rem 0;
}

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    margin: 4px 0 0 0;
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.activeMode i, .validation-message, .clRed {
    color: red !important;
}

.stackPadding {
    padding-top: 30px;
}

.stackDiv, .cardDetailDiv {
    position: relative;
    border-radius: 10px;
}

.stackThumbnailImg {
    border-radius: 6px;
}

.stackThumbnail {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.stackDiv:hover .stackThumbnail {
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.12);
}

.stackInlineBlock {
    display: inline-block;
}

.stackDiv .stackTitle {
    color: white;
}


.stackDiv img {
    cursor: pointer;
}

/* Gradient overlay on stack cover image for title readability */


.divInline {
    display: inline-block;
}

.divBackground {
    padding: 6px 8px;
    display: inline-block;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s;
}

.divBackground:hover {
    background: rgba(79,142,255,0.2);
    border-color: rgba(79,142,255,0.4);
}

.mobileScore {
    position: absolute;
    top: 60px;
    left: 45%;
}

.loadingSp {
    color: white;
}

#divCardContainer {
    margin-top: 20px;
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
}

.cardScrollIcon {
    position: absolute;
    top: 12%;
    cursor: pointer;
    z-index: 999;
    right: 0;
    display: none;
    background: transparent;
    width: 32px;
    height: 32px;
    text-align: center;
}

    .cardScrollIcon i{color:gray;}

    .cardScrollIconDown {
        top: 92%;
    }

.cardMoveIcon, .fsZoom {
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 999;
}

.cardMoveIcon {
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .cardMoveIcon:hover, .divRotate:hover, .cardScrollIcon:hover {
        background: rgba(79,142,255,0.2);
        border-color: rgba(79,142,255,0.4);
        color: white;
    }

    .cardMoveIcon > i, .cardMoveIcon > i {
        line-height: 42px;
    }

.cardMoveIconLeft {
    left: 5px;
}

.cardMoveIconRight {
    right: 0;
}

/* Pin desktop nav arrows to viewport so they don't jump during card re-render */
.cardMoveIconLeft.desktopEle,
.cardMoveIconRight.desktopEle {
    position: fixed;
    top: 50vh;
    transform: translateY(-50%);
}

.divScore .cardMoveIcon {
    position: inherit;
    display: inline-block;
    vertical-align: middle;
}

.fsZoom {
    color: white;
    display: none;
    font-size: 100px;
}

.fsZoomOut {
    top: 27%;
    left: 19px;
}

.fsZoomVal {
    position: absolute;
    top: 25%;
    z-index: 999;
    color: white;
    font-size: 30px;
    left: 5px;
}

.fsZoomIn {
    top: 3%;
    left: 5px;
}

.cardFrontTitle {
    text-align: left;
}

.frontCardLine, .backCardLine {
    z-index: 1;
    background-color: white;
    display: grid;
    grid-template-columns: auto;
}

.cardLineItem {
    border-bottom: 0;
    border-right: 0;
    padding: 0;
    margin: 0;
}

.divHr {
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
}

hr {
    display: block;
    height: 27px;
    border: 0;
    border-top: 1.5px solid rgb(169,190,225);
    padding: 0;
    margin: 0;
}

#kConfigModal hr {
    border-top-color:white;
    height:15px;
}

.frontImgLayer, .backImgLayer, .cardThumbnailImg, .frontImgLayerIndex, .backImgLayerIndex {
    z-index: 2;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: white;
}

.frontImgLayer, .backImgLayer {
    background-color: transparent;
}

.cardThumbnail {
    z-index: 2;
    background-repeat: no-repeat;
    background-size: cover;
}

.cardPageItem {
    position: relative;
}

.cardThumbnailImg, .cardThumbnail {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cardPageItem:hover .cardThumbnailImg,
.cardPageItem:hover .cardThumbnail {
    transform: scale(1.04);
    filter: brightness(1.12);
}

.slideItem {
    position: relative;
    cursor: pointer;
}

    .slideItem .imgThum, .emptyCard img {
        width: 210px;
    }

.cardThumbnail, .cardThumbnailImg {
    position: absolute;
    width: 100% !important;
    height: 100%;
    cursor: pointer;
}

.cardThumbnailImg {
    z-index: 1;
}

.cardDetailsFront, .cardBack, .cardDetailsBack {
    z-index: 6;
}

.cardImage {
    position: absolute;
    z-index: 7;
}

.wacomInk {
    z-index: 8;
}

.dInk {
    z-index:1;position:absolute;
}

.zIndex0 {
    z-index: -1;
}

.zIndex5 {
    z-index: 5;
}

.zIndex6 {
    z-index: 6;
}

.cardDetailsFront, .cardDetailsBack {
    text-align: initial !important;
}

    .cardDetailsFront a, .cardDetailsBack a {
        color: -webkit-link;
        text-decoration: underline;
    }

.cardImage span {
    padding-left:7px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;   
    display:block;
    color:black;
    text-align:center;
}

.cardImage img {
    width: 100%;
    height: 100%;
}

    .cardImage img.closeIcon, .cardImage img.viewIcon, .cardImage img.rotateIcon {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 1px;
        top: 1px;
        cursor: pointer;
    }

    .cardImage img.rotateIcon, .cardImage img.viewIcon {
        top: 40%;
    }

    .cardImage img.downIcon {
        position: absolute;
        top: 40%;
        width: 35px;
        height: auto;
        left: 1px;
        cursor: pointer;
    }

.cardImageActive {
    border: 1px solid #ff0099cc;
}

#cardFrontBody .e-rte-content .e-content, #cardBackBody .e-rte-content .e-content, #gcardFrontBody .e-rte-content .e-content, #gcardBackBody .e-rte-content .e-content {
    line-height: 1.26;
}

.flip-card-inner b {
    letter-spacing: 0;
}

.cardDetailsBack {
    width: 100%;
    height: 100%;
}

.flip-card {
    width: 43vw;
    height: 25.8vw;
    perspective: 1000px;
    display: inline-block;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.rteToolbar {
    margin: auto;
    text-align: center;
    transition: all .4s linear;
}

    .rteToolbar .e-toolbar-wrapper, .grteToolbar .e-toolbar-wrapper {
        height: 42px !important;
    }

.grteToolbar{
    margin-left:0.5px;
}
.flipCardMain {
    position: relative;
    width: 100%;
    height: 100%;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cardPageItem .flip-card {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 3px 10px rgba(0,0,0,0.4);
    border-radius: 4px;
    transition: box-shadow 0.2s ease;
}

.cardPageItem:hover .flip-card {
    box-shadow: 0 0 0 2px rgba(79,142,255,0.7), 0 10px 28px rgba(0,0,0,0.5);
}

.indexCardsSize {
    width: 50.31vw;
    height: 30.186vw;
}

    .indexCardsSize .flip-card-inner, .indexCardsSize .flip-card-front, .indexCardsSize .flip-card-back {
        max-width: 772.2px;
        max-height: 463.32px;
    }

    .indexCardsSize .rteToolbar {
        max-width: 772.2px;
    }

/*.rotateCard {
    transform: rotateX(-180deg);
}*/

.cardTagDetails, #cardTagDetails {
    text-align: left;
    position: relative;
    min-height: 28px;
    height: auto;
    margin: auto;
}

.cardNumber, .divScore {
    position:relative;
    color: white;
    text-align: left;
    width: 100%;
    margin: auto;
}

.cardDate {
    float: right;
}

.flip-card-back {
    transform: rotateX(180deg);
}

.transformNone {
    transform: none;
    transition: none;
}

.slideContainer {
    background-color: var(--bgDark);
    position: fixed;
    width: 97vw;
    left: 1vw;
}

#slideContainer {
    bottom: 33px;
    overflow: hidden;
    z-index: 2;
}

.hideDivSlide {
    height: 15px;
    bottom: 0;
    text-align: center;
}

.hideDivSlideMax {
    height: 30px;
}

#divSlideContainer {
    display: flex;
}

.divSlideArr {
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.divSlideArr:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
}

    .divSlideArr img {
        width: 35px;
        cursor: pointer;
    }

.divSlide {
    display: flex;
    margin-top: 37px;
    overflow-y: hidden;
    overflow-x: auto;
}

    .divSlide .slideItem {
        padding: 10px;
    }

.slideTag {
    min-height: 28px;
}

.slideThum {
    display: inline-block;
}

.tbSelection td {
    padding: 4px;
}

.divSlide .curCard, .groupActive, .tbSelection tr:hover {
    background-color: rgba(79,142,255,0.2);
    cursor: pointer;
}

.popupBgColor > div:hover {
    background: rgba(79,142,255,0.18);
    color: white;
    cursor: pointer;
}

/* Recent Stacks Bottom Bar */
#recentStacksContainer {
    bottom: 30px;
    overflow: hidden;
    z-index: 2;
}

#divRecentStacksArrow, #divSliderArrow {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#recentStacksArrowSpan, #hideDivSlideSpan {
    color: rgba(255,255,255,0.35);
    padding: 4px 12px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

#divRecentStacksArrow:hover #recentStacksArrowSpan,
#divSliderArrow:hover #hideDivSlideSpan {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
}

#divRecentStacksInner {
    display: flex;
}

.divRecentStacksScroll {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-grow: 1;
    padding: 6px 0;
}

    .divRecentStacksScroll::-webkit-scrollbar {
        display: none;
    }

.recentStackItem {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;
    min-width: 110px;
    max-width: 110px;
    border-radius: 4px;
}

    .recentStackItem:hover {
        background-color: rgb(16,91,169);
    }

.recentStackThumb {
    width: 100px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
}

.recentStackTitle {
    color: white;
    font-size: 11px;
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

.recentStacksLabel {
    color: white;
    font-size: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.recentStacksPanelLabel {
    color: white;
    font-size: 13px;
    padding: 4px 8px 0 8px;
    opacity: 0.7;
}

.trBorder {
    border-bottom: 2px solid rgb(0,77,230);
}

.divRotate {
    position: fixed;
    top: 41vh;
    z-index: 999;
}

    .divRotate > img, .imgRotate {
        width: 32px;
    }

#divImgRotate.desktopEle {
    width: 42px;
    height: 42px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

#divImgRotate.desktopEle > .rotateFront {
    width: 26px;
}

.rotateAbsolute {
    position: absolute;
    top: 65px;
    left: 46%;
}

.fullscreenExit, .fullscreenAdd {
    cursor: pointer;
    width: 60px;
    top: 9%;
    right: 7px;
}

.fullscreenAdd {
    top: 21%;
}

.rotateBack {
    background-color: var(--notedex);
}

.nav-link {
    padding: 0.4rem;
}

    .nav-link span {
        margin-left: 10px;
    }

.navHome {
    padding-left: 26px;
}

.cardTag {
    position: absolute;
    top: 2px;
}

    .cardTag > div, .cardTagDetails > div, .slideTag > div, #gcardTagDetails > div, #thumTagTb td > div {
        padding: 2px 9px;
        margin-right: 4px;
        margin-bottom: 2px;
        display: inline-block;
        border-radius: 4px;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        line-height: 1.6;
        vertical-align: middle;
        white-space: nowrap;
        opacity: 0.92;
    }

.cardTagDetails .closeIcon, #gcardTagDetails .closeIcon {
    width: 20px;
    height: auto;
    cursor: pointer;
}

#cardTagPopup, #studyFlagPopup {
    background: rgba(15,15,28,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}

#cardTagPopup {
    max-height: 400px;
    overflow-y: auto;
}

#cardTagPopup > div, #studyFlagPopup > div {
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 4px;
    margin: 3px 4px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.88;
    transition: opacity 0.12s, transform 0.1s;
}


#cardTagPopup > div:hover, #studyFlagPopup > div:hover {
    opacity: 1;
    transform: scale(1.04);
}

#inkColorPopup {
    background: rgba(15,15,28,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    padding: 10px;
}

.arrowIcon {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    position: absolute;
}

.hideDivGroupRight .arrowIcon, .arrowIcon {
    border-width: 0 4px 4px 0;
    padding: 7px;
}

.arrowBottom {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    bottom: 5px;
}

.arrowTop {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    bottom: 3px;
}

.arrowleft {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 5px;
}

.hideDivGroupRight .arrowleft {
    left: 8px;
}

.arrowRight {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    left: -2px;
}

.hideDivGroupRight .arrowRight {
    left: -3px;
}

.hideItem, .capture .e-toolbar-wrapper {
    display: none !important;
}

.stackExtraSmall .stackThumbnailImg {
    width: 272px;
    height: auto;
}

.cardExtraSmall {
    width: 272px;
    height: 163.2px;
}

/* Card thumbnail borders */
.cardExtraSmall, .cardSmall, .cardMedium, .cardLarge, .cardExtraLarge, .e-image {
    outline: 1px solid rgba(255,255,255,0.5);
    transition: outline-color 0.2s ease;
}

.cardPageItem:hover .cardExtraSmall,
.cardPageItem:hover .cardSmall,
.cardPageItem:hover .cardMedium,
.cardPageItem:hover .cardLarge,
.cardPageItem:hover .cardExtraLarge,
.cardPageItem:hover .e-image {
    outline-color: rgba(79,142,255,0.7);
}

.stackSmall .stackThumbnailImg {
    width: 329.8px;
    height: auto;
}

.cardSmall {
    width: 329.8px;
    height: 197.88px;
}

.stackMedium .stackThumbnailImg {
    width: 388px;
    height: auto;
}

.cardMedium {
    width: 388px;
    height: 232.8px;
}

.stackLarge .stackThumbnailImg {
    width: 446.2px;
    height: auto;
}

.cardLarge {
    width: 446.2px;
    height: 267.7px;
}

.cardExtraLarge {
    width:500px;
    height:300px;
}

.stackExtraSmall .ipStackTitle {
    width: 243px;
}

.stackSmall .ipStackTitle {
    width: 302px;
}

.stackMedium .ipStackTitle {
    width: 355px;
}

.stackLarge .ipStackTitle {
    width: 408px;
}

.stackExtraSmall img.shareActions {
    bottom: 38px;
    right: 12px;
}

.stackSmall img.shareActions {
    bottom: 41px;
    right: 10px;
}

.stackSmall .spCardNoBg, .stackSmall .spCardNo {
    bottom: 41px;
}

.stackMedium img.shareActions {
    bottom: 50px;
    right: 20px;
}

.stackLarge img.shareActions {
    bottom: 50px;
    right: 25px;
}

.cardPageItem img.shareActions {
    bottom: 0;
    right: 0;
    width: 44px;
    height: auto;
}

.stackExtraSmall img.moreActions {
    top: 15px;
    right: 13px;
}

.stackSmall img.moreActions {
    top: 24px;
    right: 12px;
}

.stackMedium img.moreActions {
    top: 30px;
    right: 18px;
}

.stackLarge img.moreActions {
    top: 38px;
    right: 25px;
}

.stackThumbnail {
    position: absolute;
}

/* Dark gradient at bottom of stack thumbnail for title legibility */
.stackThumbnail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    border-radius: 0 0 6px 6px;
    pointer-events: none;
}

.stackExtraSmall .stackThumbnail {
    top: 24px;
    left: 26px;
    width: 233px;
    height: 140px;
}

.stackSmall .stackThumbnail {
    top: 29px;
    left: 32px;
    width: 287px;
    height: 170px;
}

.stackMedium .stackThumbnail {
    top: 33px;
    left: 37px;
    width: 333px;
    height: 202px;
}

.stackLarge .stackThumbnail {
    top: 38px;
    left: 43px;
    width: 382px;
    height: 232px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switchButton {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .switchButton:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .switchButton {
    background-color: #2196F3;
}

input:focus + .switchButton {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .switchButton:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.switchButton.round {
    border-radius: 34px;
}

    .switchButton.round:before {
        border-radius: 50%;
    }

.col-sm {
    padding-left: 2px;
    padding-right: 2px;
}
.kTopLine {
    display: inline-block;
    margin:0;
}

    .kTopLine .switch {
        height: 26px;
    }

    .kTopLine .switchButton:before {
        height: 20px;
        width: 20px;
        left: 6px;
        bottom: 3px;
    }
.kConConfig {
    display: inline-block;
    font-size:18px;
    vertical-align:middle;
}

/* ===== Entrance Animations & Transitions ===== */

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.97) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Card grid — stagger fade-up on load */
.cardPageItem {
    animation: fadeSlideUp 0.28s ease both;
}
.cardPageItem:nth-child(1)  { animation-delay: 0.00s; }
.cardPageItem:nth-child(2)  { animation-delay: 0.04s; }
.cardPageItem:nth-child(3)  { animation-delay: 0.08s; }
.cardPageItem:nth-child(4)  { animation-delay: 0.12s; }
.cardPageItem:nth-child(5)  { animation-delay: 0.16s; }
.cardPageItem:nth-child(6)  { animation-delay: 0.20s; }
.cardPageItem:nth-child(7)  { animation-delay: 0.24s; }
.cardPageItem:nth-child(8)  { animation-delay: 0.28s; }
.cardPageItem:nth-child(9)  { animation-delay: 0.32s; }
.cardPageItem:nth-child(10) { animation-delay: 0.36s; }
.cardPageItem:nth-child(11) { animation-delay: 0.40s; }
.cardPageItem:nth-child(12) { animation-delay: 0.44s; }

/* Stack tiles — stagger fade-up on load */
.stackDiv {
    animation: fadeSlideUp 0.28s ease both;
}
.col-sm:nth-child(1)  .stackDiv { animation-delay: 0.00s; }
.col-sm:nth-child(2)  .stackDiv { animation-delay: 0.05s; }
.col-sm:nth-child(3)  .stackDiv { animation-delay: 0.10s; }
.col-sm:nth-child(4)  .stackDiv { animation-delay: 0.15s; }
.col-sm:nth-child(5)  .stackDiv { animation-delay: 0.20s; }
.col-sm:nth-child(6)  .stackDiv { animation-delay: 0.25s; }
.col-sm:nth-child(7)  .stackDiv { animation-delay: 0.30s; }
.col-sm:nth-child(8)  .stackDiv { animation-delay: 0.35s; }

/* Modal entrance */
.modal.show .modal-dialog {
    animation: modalIn 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

/* Popup / dropdown entrance */
#cardTagPopup, #studyFlagPopup, #inkColorPopup {
    animation: fadeSlideUp 0.15s ease both;
}

/* Smoother AI sidebar */
#aiSidebarPanel {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}

/* Nav items fade in on load */
.nav-item {
    animation: fadeIn 0.3s ease both;
}
.nav-item:nth-child(1) { animation-delay: 0.05s; }
.nav-item:nth-child(2) { animation-delay: 0.10s; }
.nav-item:nth-child(3) { animation-delay: 0.15s; }
.nav-item:nth-child(4) { animation-delay: 0.20s; }
.nav-item:nth-child(5) { animation-delay: 0.25s; }
.nav-item:nth-child(6) { animation-delay: 0.30s; }
.nav-item:nth-child(7) { animation-delay: 0.35s; }
.nav-item:nth-child(8) { animation-delay: 0.40s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .cardPageItem, .stackDiv, .nav-item,
    .modal.show .modal-dialog,
    #cardTagPopup, #studyFlagPopup, #inkColorPopup {
        animation: none !important;
    }
}

/* Page-leave fade */
#mainBody {
    transition: opacity 0.08s ease;
}
#mainBody.page-leaving {
    opacity: 0.4;
}

/* ===== End Entrance Animations & Transitions ===== */

/* ===== Skeleton Loaders ===== */

@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skeletonCard {
    display: inline-block;
    margin: 6px;
    vertical-align: top;
    animation: fadeSlideUp 0.28s ease both;
}

.skeletonCardInner {
    width: 329.8px;
    height: 197.88px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 600px 100%;
    animation: shimmer 1.6s infinite linear;
    outline: 1px solid rgba(255,255,255,0.12);
}

.skeletonCardLabel {
    width: 60%;
    height: 10px;
    margin-top: 8px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 600px 100%;
    animation: shimmer 1.6s infinite linear;
}

/* Stack skeleton matches stack tile size */
.skeletonStack .skeletonCardInner {
    width: 200px;
    height: 140px;
}

/* ===== End Skeleton Loaders ===== */

@media (max-width: 1023.98px) {
    .topLabel {
        white-space: nowrap;
        max-width: 216px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .imgFullscreen {
        margin-right: 1rem;
    }

    #mainBody, .pr-4, .px-4 {
        padding-right: 0 !important;
    }

    .desktopEle {
        display: none;
    }

    #divImgRotate.desktopEle {
        display: none !important;
    }

    .mobileEle {
        display: block;
    }

    .imgSearch {
        display: inline;
    }

    .desktopEleIm {
        display: none !important;
    }
}

.phoneEle {
    display: block;
}

@media (min-width: 768px) {
    .phoneEle {
        display: none;
    }
    .tabEle {
        display: block;
    }
    .topgCard {
        margin-right:7rem;
    }
    #addSSModal .btnAct {
        margin-top: 0;
    }
    #cardBgPopup {
        max-width: 96%;
    }
    .qcDivRte, .qcDivCard, .qcWacomInk {
        width: 85vw;
        height: auto;
    }
    #mainMenu > ul:first-child {
        margin-top: 12.5vh;
    }
    .topCanvas, .topAddCard {
        margin-right: 3rem;
    }
        .topCanvas span, .topAddCard span, .topgCard span, .topAddSS span, .topEditSS span {
            display: inline;
            color: white !important;
            margin-right: 5px;
        }
    .kTopAdd {
        margin-left: 1rem;
    }   
    .kTopDiv.isCanvas {
        left: 65px;
    }
    #mainMenu {
        position: initial;
    }
    .toast.show {
        left: 37%
    }
    .topDivCenter {
        left: 47%;
    }
    .divFooter button {
        margin-right: 10px;
    }
    #lbIndex {
        margin-left: 40px;
    }

    .cardMoveIconRight {
        right: 14px;
    }

    .cardMoveIconLeft {
        left: 14px;
    }

    .divNotify {
        top: 9.5vh;
    }

    .exampleModal .modal-body input {
        width: auto;
    }

    .exampleModal .modal-body {
        padding: 1rem;
    }
    .modal-footer {
        padding: 1rem;
    }
    .main {
        height: 100vh;
    }

    .logged, .linkAdmin {
        margin-left: 1.3rem;
    }

    .topRowLink {
        height: 9vh;
    }

    #CardsView {
        margin: 0px;
    }

    #ipTopSearch {
        width: 125px;
    }

    .mainBody {
        height: 95vh;
    }

    .mainContent {
        height: 94vh;
    }
    .mainContent1 {
        height: 83vh;
    }
    .cardsPageContainer {
        height: 87vh;
    }
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 20vw;
        min-width: 20vw;
        transition: width 200ms ease-in-out, min-width 200ms ease-in-out;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .sidebarCollapse {
        width: 11vw;
        min-width: 11vw;
    }
    .qnBtn{
        height:7vh;
    }
    .sidebarRightMobile {
        left: 11vw;
        width: 89vw;
        top: 12vh;
        height: 88vh;
    }
        .sidebarRightMobile .sidebarContentList {
            text-align: initial;
            margin: 0 auto;
        }
        .sidebarRightMobile .sideBarTit, .sidebarRightMobile .sidebarContentList {
            width: 85vw;
        }
    .sidebarRightCollapse {
        left: 20vw;
        width: 80vw;
    }

    .sidebar .nav-link span {
        animation: b-bar-link-small forwards;
        transition: font-size 200ms ease-out;
    }

    .sidebar .px-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebarCollapse .nav-link span {
        font-size: 0;
        transition: font-size 200ms ease-in;
    }

    .sidebarCollapse .fa, .sidebarCollapse .far, .sidebarCollapse .fas, .sidebarCollapse .fab {
        margin: auto;
    }

    .main {
        width: 80vw;
    }

    .slideContainer {
        width: 80vw;
        left: 21vw;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .navbar-toggler, .navUniversal, .topRowLink {
        display: none;
    }

    .sidebar .collapse {
        display: block;
    }

    .divLinkDesktop {
        display: inline-block;
        margin-right: 8px;
    }
}

@media only screen and (max-width: 375px) {
    .exampleModal .modalTitle {
        font-size: 1.3rem;
    }

    .exampleModal .modal-body span {
        font-size: 1.15rem;
    }
}

@media (min-width: 1024px) {
    #divImgRotate.desktopEle {
        display: flex;
    }
    .kTopLine {
        margin: 0 0.5rem 0 3rem;
    }
    .tabEle {
        display: none;
    } 
    .modalFull {
        max-width: 1210px;
    }
    #mainMenu > ul:first-child {
        margin-top: 50px;
    }
    #kCardTit {
        width: 320px;
    }
    .kTopDiv {
        left:45px;
    }
    .kTopDiv.isPublic {
        left: 110px;
    }
    .kTopDiv.isCanvas {
        left: 80px;
    }
    .qcThumbnail > img {
        width: 270px;
    }
    .divNotify {
        top: 5vh;
    }
    .cardsPagePadding {
        padding-left: 192px;
    }
    .toast.show {
        left: 42%
    }
    .qcDivRte, .qcDivCard, .qcWacomInk {
        width: 284px;
        height: 170.4px;
    }
    #searchRow {
        margin-left: 0;
    }
    #searchRowTop {
        margin-left: 15px;
    }
        #searchRowTop.cardsPagePadding {
            margin-left: 0px;
        }    
    .col-sm {
        padding-left: 15px;
        padding-right: 15px;
    }

    .contentHeight {
        height: 95vh;
        overflow-y: auto;
    }

    .cardTagDetails, #rte_tool_new, #divTimer, #ink_tool, .cardNumber, .divScore {
        max-width: 660px;
    }

    .flip-card-inner, .flipCardMain, .flip-card-front, .flip-card-back {
        max-width: 660px;
        max-height: 396px;
    }

    .rteToolbar {
        max-width: 660px;
    }

    .sidebar {
        width: 15vw;
        min-width: 15vw;
    }

    .sidebarCollapse {
        width: 7vw;
        min-width: 7vw;
    }

    .main {
        width: 85vw;
    }

    .slideContainer {
        width: 83vw;
        left: 16vw;
    }
}

@media (min-width: 1280px) {
    .kTopLine {
        margin: 0 0.5rem 0 10rem;
    }
    .topCanvas, .topAddCard, .topAddSS, .topEditSS {
        margin-right: 7rem;
    }
    #kCardTit {
        margin-right: 9vw;
    }
    .kTopAdd {
        margin-left: 10vw;
    }
    .sidebar {
        width: 10vw;
        min-width: 10vw;
    }

    .sidebarCollapse {
        width: 4vw;
        min-width: 4vw;
    }

    .main {
        width: 90vw;
    }

    .slideContainer {
        width: 87vw;
        left: 11vw;
    }
}
/*IPad Pro*/
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
    .flip-card {
        width: 68vw;
        height: 40.8vw;
    }
}

/*IPad*/
@media only screen and (min-width: 768px) and (max-width: 1023.98px) {
    #slGroupDetails {
        width: 100px;
    }

    #slSortDetails {
        width: 135px;
    }

    .cardTagDetails, #rte_tool_new, #divTimer, #ink_tool, .cardNumber, .divScore {
        width: 78vw;
    }

    .flip-card {
        width: 78vw;
        height: 46.8vw;
    }

    .imgRotate {
        width: 26px;
    }

    .cardDetailDiv .rotateFront {
        width: 40px;
    }

    .cardMoveIcon {
        top: 35%;
    }

    .stackDiv {
        margin-bottom: 38px;
    }

    .divRotate {
        right: 45%;
    }
}
/*Fold*/
@media only screen and (min-width: 963px) and (max-width: 983px) and (min-height: 633px) and (max-height:650px) {
    .flip-card {
        width: 58.3vw;
        height: 35vw;
    }
    .cardTagDetails, #rte_tool_new, #divTimer, #ink_tool, .cardNumber, .divScore {
        width: 58.3vw;
    }
    .cardMoveIcon.desktopEle, #divImgRotate.desktopEle {
        display: block;
    }
    .cardMoveIcon.desktopEle {
        top:50%;
    }
    #divImgRotate.desktopEle {
        top: 41vh;
        width: 42px;
        height: 42px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
        #divImgRotate.desktopEle > .rotateFront {
            width: 26px;
        }
}
/*Note 8/9, iPhone 6/7/8/X*/
@media only screen and (min-width: 321px) and (max-width: 767.98px) {
    #slWorkspace1 {
        -webkit-appearance: auto;
        appearance: auto;
        min-width: 140px;
        background-image: none;
        padding-right: 10px;
    }

    .indexPage {
        overflow-y: auto;
        height: 98%;
    }
    .navBottom {
        position: inherit;
    }

    #ipSearchDetails {
        display: none;
    }

    .cardTagDetails, #rte_tool_new, #divTimer, #ink_tool, .cardNumber, .divScore {
        width: 87vw;
    }

    .flip-card {
        width: 87vw;
        height: 52.2vw;
    }

    .fsZoom {
        top: 9px;
    }

    .cardMoveIcon {
        top: 3px;
    }

    .stackDiv {
        margin-bottom: 35px;
    }

    .imgRotate {
        width: 26px;
    }

    .divRotate {
        right: 42%;
        top: 3px;
    }

    .cardThumbnail {
        width: 100%;
    }

    .stackThumbnailImg {
        width: 330px;
    }

    .stackThumbnail {
        top: 29px;
        left: 32px;
        width: 282px;
        height: 170px;
    }

    .slideItem .imgThum, .emptyCard img {
        width: 200px;
    }

    .smallLoading {
        top: 8%;
    }
}

@media only screen and (min-width: 321px) and (max-width: 767.98px) and (orientation:landscape) {
    .slideContainer {
        position: initial;
        width: 92vw;
    }

    .noOverflow {
        overflow-y: auto;
    }

    .sidebar {
        height: 52px;
    }

    .cardTagDetails, #rte_tool_new, #divTimer, #ink_tool, .cardNumber, .divScore {
        width: 50vw;
    }

    .flip-card {
        width: 50vw;
        height: 30vw;
    }
}
/*Iphone5*/
@media only screen and (max-width: 320px) {
    .topLabel {
        font-size: 1.2rem;
    }

    .cardTagDetails, #rte_tool_new, #divTimer, #ink_tool, .cardNumber, .divScore {
        width: 85vw;
    }

    .flip-card {
        width: 85vw;
        height: 51vw;
    }

    .divRotate > img, .imgRotate {
        width: 26px;
    }

    .stackDiv {
        margin-bottom: 35px;
    }

    .divRotate {
        right: 43%;
        top: 35%;
    }

    .cardMoveIcon {
        top: 35%;
    }

    .cardThumbnail {
        width: 100%;
    }

    .stackThumbnailImg {
        width: 285px;
    }

    .stackThumbnail {
        position: absolute;
        top: 24px;
        left: 28px;
        width: 243px;
    }

    .slideItem .imgThum, .emptyCard img {
        width: 180px;
    }

    .smallLoading {
        top: 6%;
    }
}

.qcThumbnailGrid {
    margin: 8px 2%;
    display: contents;
}

    .qcThumbnailGrid > img {
        width: 47%;
        margin: 8px 4px;
    }

.canvasPage {
    height: 89vh;
    padding-left: 0;
}

.notMobile {
    display: none;
}

/*and (orientation:portrait)*/
@media only screen and (min-width: 768px) {
    .canvasPage {
        height: 95vh;
    }
    .notMobile {
        display: inline-block;
    }
}

@media only screen and (min-width: 1024px) and (orientation:landscape) {
    .canvasPage {
        height: 95vh;        
    }
    .notMobile {
        display: inline-block;
    }    
}

/* Drag-and-drop placeholder */
.ndDragPlaceholder {
    border: 2px dashed rgba(79, 142, 255, 0.6);
    border-radius: 10px;
    background: rgba(79, 142, 255, 0.08);
    visibility: visible !important;
}

.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon:not(.e-toolbar-pop), .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon:not(.e-toolbar-pop){
    display:inline-block;
}

/* ---- Draft Cards ---- */
.draftToolbarRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 4px 12px;
}
.draftGrid {
    padding: 8px 4px;
}
.draftTileCol {
    padding: 6px;
}
.draftTile {
    cursor: pointer;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}
.draftTileHeader {
    font-size: 11px;
    color: #888;
    padding: 4px 8px 3px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 4px;
}
.draftTileStack {
    font-weight: 600;
    color: #444;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.draftConvertedBadge {
    display: inline-block;
    background: #28a745;
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.draftTileThumb {
    position: relative;
}
.draftThumbImg {
    width: 100%;
    display: block;
}
.draftMoreBtn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    cursor: pointer;
    opacity: 0.7;
    z-index: 5;
}
.draftMoreBtn:hover {
    opacity: 1;
}
.draftTileTitle {
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.draftEmptyState {
    text-align: center;
    color: #aaa;
    padding: 60px 20px;
}
.draftEmptyState i {
    display: block;
    margin-bottom: 16px;
}
.draftEmptyHint {
    font-size: 16px;
}
.draftTextarea {
    font-family: inherit;
    resize: vertical;
}
.draftFormLabel {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}
.draftStackLabelVal {
    font-weight: normal;
    color: #555;
}