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

:root {
    --primary-color: rgba(0, 0, 0, 0.7);
    --bgDark: rgb(42,39,40);
    --bgDark1: rgb(29,29,29);
    --gray: gray;
    --notedex: #007FFF;
    --white: white;
    --navBg: #363636;
}

html, body {
    font-family: Helvetica, sans-serif, 'Helvetica Neue', Arial;
    overscroll-behavior-x: none;
}

body {
    background-color: rgb(2, 1, 17);
    background-size: cover;
    overflow-y: hidden;
}
#cardBgPopup {
    max-width: 96%;
}
.tabCloseIcon {
    float: right;
    height: 30px;
    margin-top: 3px;
    cursor: pointer;
}
#tabCardBg .e-content > div {
    max-height: 65vh;
    overflow-y: auto;
}
#tabCardBg .e-content > div:not(:first-child) {
    max-width: 930px;
}
.modal-dialog {
    max-width: 740px;
}
#cardContainer {
    transform-origin: center center;
}
#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{
    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{width:250px;}

.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 {
    background: transparent;
}

.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 {
    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;
    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 {
    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 {
    cursor: pointer;
    padding: 5px;
    border-width: 0.3px;
    border-style: solid;
    border-color: darkgrey;
    background-color: var(--bgDark);
}

.e-multi-select-wrapper .e-delim-values, .e-multi-select-wrapper .e-delim-values .e-remain, #slQcStack, #slRecent, #slQCStacks {
    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{
    color:var(--notedex);
}

#divTextOutliner {
    display: none;
    padding: 1rem 2rem;
    background-color: rgb(59,56,56);
}

.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;
}
.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator){
    padding:1.7px;
}
.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 {
    background-color: rgb(0,125,255);
    color: white;
    padding: 6px 68px;
    font-size: 28px;
    border-radius: 10px;
    border-color: rgb(0,125,255);
}
.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: -500px;
}

#hDivCard, #hDivCardBack {
    width: 270px;
    background-color: white;
    color: black;
    font-size: 12.169px;
}

#hDivCardBack {
    height: 162px;
}

#hTitle {
    height: 20px;
    line-height: 20px;
    border-bottom: 0.6136px solid red;
}

#hBody {
    height: 142px;
}

.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 .imgStudyFlag {
    top: 6px;
    margin-left: 7px;
}

.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-color: purple;
    border-color: purple;
    color: white;
}

#app {
    color: white;
}

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

.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);
}

.navbar_bg_color {
    background-color: var(--navBg);
}

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

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

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

#tagImg {
    border: 2px solid white;
}

#inkImg {
    display: inline-block;
}

    #inkImg > 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 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;
}

.tbShare {
    width: 100%;
}

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

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

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

.divItem {
    margin: 12px 0;
}

.slide-left {
    animation: slide-out 0.2s forwards;
    -webkit-animation: slide-out 0.2s forwards;
    -webkit-transform: translateX(-150%);
}

.slide-right {
    animation: slide-out 0.2s forwards;
    -webkit-animation: slide-out 0.2s forwards;
    -webkit-transform: translateX(100%);
}

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

.ui-icon {
    background-image: url(https://free.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 {
    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 {
        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;
}

    #rte_tool_new img, #ink_tool img {
        cursor: pointer;
    }

#divTimer {
    text-align: right;
    color: white;
    font-size: 18px;
    display: block;
}

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

.qcClose, .indexPage, #colorpickerHolder2, .purchaseLink, #globalModal, #moreActionPopup, #saveAsPopup, .sidebar, #topMenu, .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 {
    display: none;
}

#slWorkspace1 {
    margin: 0.5rem 0 0 -0.5rem;
}

#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: 30px;
}

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

.slTag > option {
    background-color: blue;
    color: white;
}

.ipSearch {
    width: 137px;
    background-color: var(--bgDark);
    text-indent: 5px;
    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;    
}

.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;
    }

.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;
}

#thumTagTb {
    width: 100%;
}

.tbPadding td {
    padding: 4px;
}

#backColorPopup .e-container, #textColorPopup .e-container, #inkColorPopup .e-container,
.popupBgColor, #cardSysBgPopup, #sysDfCardBg .e-container {
    background-color: #1f1f1f;
}

.popupBgColor, .cardCanvas {
    border: 1px solid;
}

    .popupBgColor > div {
        color: white;
        padding: 7px 20px;
        cursor: pointer;
    }

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: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: var(--bgDark);
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

#cardFrontBody_rte-edit-view::-webkit-scrollbar, #cardBackBody_rte-edit-view::-webkit-scrollbar {
    width: 15px;
}
/*#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;
}

.topMore, .topSearch, .topRefresh, .topAddCard, .topClose, .topCheck, .topDelete, .topMove,
.topCopy, .topMoveGroup, .topTag, .topBg, .topShow, .topHide, .topImport, .topCanvas {
    display: none;
    color: white;
    cursor: pointer;
    margin-right: 1rem;
}

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

    .topRefresh img, .topRefresh1, .topAddCard 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: rgb(77,77,77);
}

#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;
    }

.modal-footer {
    justify-content: center;
    border-top: none;
    padding:0.5rem;
}

.loginFooter button {
    width: 76px;
}

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

.mainBody {
    height: 94vh;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.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: var(--bgDark1);
}

    .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;
}
.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: rgb(0,127,255);
    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: 1px;
    display: none;
}

    .smallLoading .loader-dot {
        height: 20px;
        width: 20px;
    }

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

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

.sidebarGroup, .sidebarRight {
    background-color: var(--bgDark);
    color: white;
    height: 95vh;
    position: fixed;
    top: 5vh;
    display: none;
    overflow-y: auto;
}

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

.sidebarRight {
    background-color: var(--bgDark1);
    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: var(--gray);
}

.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;
}

.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: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

#groupContainer .nav-item a {
    height: auto;
    line-height: initial;
    cursor: pointer;
}

#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;
}

.stackInlineBlock {
    display: inline-block;
}

.stackDiv .stackTitle {
    color: white;
}

.stackDiv img {
    cursor: pointer;
}

.divInline {
    display: inline-block;
}

.divBackground {
    padding: 5px;
    display: inline-block;
    cursor: pointer;
    background-color: rgba(255,255,255,0.3);
}

.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-color: rgba(255,255,255,0.3);
    width: 42px;
    height: 42px;
    text-align: center;
}

    .cardMoveIcon:hover, .divRotate:hover, .cardScrollIcon:hover {
        background-color: rgba(255,255,255,0.7);
    }

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

.cardMoveIconLeft {
    left: 5px;
}

.cardMoveIconRight {
    right: 0;
}

.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;
}

.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 img {
    width: 100%;
    height: 100%;
}

    .cardImage img.closeIcon {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 1px;
        top: 1px;
    }

    .cardImage img.rotateIcon {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 1px;
        top: 40%;
    }

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

#cardFrontBody .e-rte-content .e-content, #cardBackBody .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{
    height:42px !important;
}

.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;
}

.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 {
    text-align: left;
    position:relative;
    height:28px;
    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: 3px;
    text-align: center;
}

.hideDivSlideMax {
    height: 30px;
}

#divSlideContainer {
    display: flex;
}

.divSlideArr {
    margin: auto;
    height: 100%;
}

    .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, .popupBgColor > div:hover {
    background-color: rgb(16,91,169);
    cursor:pointer;
}

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

.divRotate {
    position: absolute;
    top: 35%;
    right: 15px;
    z-index: 999;
}

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

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

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

.fullscreenAdd {
    top: 21%;
}

.rotateBack {
    background-color: rgb(0,127,255);
}

.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 {
        padding: 2px;
        margin-right: 5px;
        display: inline-block;
    }

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

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

#cardTagPopup > div, #studyFlagPopup > div {
    padding: 5px 10px;
    cursor: pointer;
}

.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;
}

.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;
}

.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;
}

@media (max-width: 1023.98px) {
    /*.modalFull {
        max-width: 1014px;
    }*/

    .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;
    }

    .mobileEle {
        display: block;
    }

    .imgSearch {
        display: inline;
    }

    .desktopEleIm {
        display: none !important;
    }
}

@media (min-width: 768px) {  
    .qcDivRte, .qcDivCard, .qcWacomInk {
        width: 85vw;
        height: auto;
    }
    #mainMenu > ul:first-child {
        margin-top: 12.5vh;
    }
    .topCanvas, .topAddCard {
        margin-right: 3rem;
    }
    .topCanvas span, .topAddCard 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) {
    #cardBgPopup {
        max-width: 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) {    
    .topCanvas, .topAddCard {
        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;
    }

    .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 {
        right:15px;
    }
        #divImgRotate.desktopEle > .rotateFront {
            width:34px;
        }
}
/*Note 8/9, iPhone 6/7/8/X*/
@media only screen and (min-width: 321px) and (max-width: 767.98px) {
   /* .modalFull {
        max-width: 758px;
    }*/
    .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;
    }

    .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;
        margin-right:26px;
    }
    .notMobile {
        display: inline-block;
    }
}

.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;
}