@font-face {
    font-display: swap;
    font-family: S hne;
    font-style: normal;
    font-weight: 400;
    src: url(https://cdn.oaistatic.com/_next/static/media/soehne-buch.13189857.woff2) format("woff2")
}
/*@font-face {
    font-family: 'Agency FB';
    src: url('AGENCYR.TTF');
}

@font-face {
    font-family: 'Agency FB';
    font-weight: bold;
    src: url('AGENCYB.TTF');
}*/
@font-face {
    font-family: 'Agency FB';
    font-weight: bold;
    src: url('/fonts/AGENCYB.TTF');
}

@font-face {
    font-family: 'Agency FB';
    src: url('/fonts/AGENCYR.TTF');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bs-heading-color,inherit);
}

.h5, h5 {
    font-size: 1.2rem;
}

a {
    color: #09f;
    text-decoration: none !important;
}

/*    a:hover {
        color: #313533 !important;
    }*/

a, button {
    outline: 0 !important;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 0.875em;
    color: #313533;
}
/************Common CSS***********/
.d-f {
    display: flex;
}

.f-d-c {
    flex-direction: column;
}

.a-i-e {
    justify-content: flex-end;
}

.a-i-c {
    align-items: center;
}

.j-c-sw {
    justify-content: space-between;
}
.j-c-sa {
    justify-content:space-around;
}
.j-c-c {
    justify-content: center;
}

.w-20 {
    width: 20%;
}

.w-80 {
    width: 80%;
}

.m-0 {
    margin: 0 !important;
}

.m-l-10 {
    margin-left: 10px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.f-12 {
    font-size: 12px;
}

.f-13 {
    font-size: 13px;
}

.f-14 {
    font-size: 14px;
}

.f-15 {
    font-size: 15px;
}

.f-16 {
    font-size: 16px;
}



/********************************/
.dot-cursor {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #09f;
    float: left;
    margin: 8px 0 0 5px;
    animation: blink 0.5s infinite;
}

.form-label {
    margin-bottom: 0;
    font-weight: 500;
    display: flex;
    color: #1c73e8;
    font-size: 0.9rem;
    background-color: #fff;
    position: absolute;
    padding: 0 8px;
    margin-left: 10px;
    top: -10px;
}

.form-control {
    display: block;
    width: 100%;
    height: 56px;
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    color: #313533;
    background-clip: padding-box;
    border: 2px solid #1c73e8;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

    .form-control:focus {
        color: #313533;
        background-color: #fff;
        border-color: #a8abdf;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

input[type=password].form-control {
    font-size: 2.5rem;
}

.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

    .input-group > .form-control,
    .input-group > .form-floating,
    .input-group > .form-select {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.47rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: #313533;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.25rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.15rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}

.input-group .btn {
    position: relative;
    z-index: 2;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-eye {
    position: absolute;
    right: 0;
    top: 5px;
}

    .btn-eye:focus {
        box-shadow: none;
    }

    .btn-eye i {
        font-size: 20px;
    }

.password-div input[type=text] + .btn .mdi-eye-outline:before {
    content: "\f06d1";
}

.btn-login {
    background-color: #09f;
    border: 0;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 6px 0 rgba(81,86,190,.5);
    height: 50px;
    border-radius: 6px;
}

    .btn-login:hover {
        color: #fc0;
    }

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #e9e9ef;
    --bs-btn-border-color: #e9e9ef;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #c6c6cb;
    --bs-btn-hover-border-color: #bababf;
    --bs-btn-focus-shadow-rgb: 198,198,203;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bababf;
    --bs-btn-active-border-color: #afafb3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #e9e9ef;
    --bs-btn-disabled-border-color: #e9e9ef;
}

.btn-light {
    -webkit-box-shadow: 0 2px 6px 0 rgba(233,233,239,.5);
    box-shadow: 0 2px 6px 0 rgba(233,233,239,.5);
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.copyright {
    font-size: 13px;
    white-space: nowrap;
    margin-left: -10px;
}

.parent-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    background-color: #e5e5e5;
}

.brand-bar {
    width: 52px;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}

.brand-bar-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.5s;
    background-color: #e5e5e5;
    padding-top: 5px;
}

    .brand-bar-icon img {
        width: 24px;
    }

.brand-nav-item {
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.5s;
    width: 34px;
    margin-bottom: 0;
}

    .brand-nav-item:hover,
    .brand-bar-icon:hover {
        transform: scale(1.1);
    }

.ai-icon {
    margin-top: 15px;
}

.nb-title {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
/*.nb-txt {
    font-family: 'Agency FB', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #0099ff;
    font-weight: bold;
    font-size: 38px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    line-height: 36px;
    margin-left: -10px;
}*/
.nb-txt {
    font-family: 'Agency FB', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #0099ff;
    font-weight: bold;
    font-size: 38px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    line-height: 36px;
    margin-left: -10px;
    height: 220px;
}

    .nb-txt span {
        color: #fc0;
    }

    /*  .nb-txt small {
        font-size: 12px;
        color: #707070;
        position: absolute;
        bottom: -15px;
        right: 35px;
        line-height: 10px;
        text-transform: uppercase;
    }*/
    /*.nb-txt small {
    font-size: 12px;
    color: #707070;
    position: absolute;
    bottom: -25px;
    right: 35px;
    line-height: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-family:Arial, Helvetica, sans-serif;
}*/
    .nb-txt small {
        font-size: 9px;
        color: #707070;
        position: absolute;
        top: 0;
        right: 35px;
        line-height: 12px;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
    }

.brand-bar-logo {
    width: 40px;
    height: 40px;
}

.left-nav-bar {
    min-width: 200px;
    width: 280px;
    max-width: 350px;
    transition: min-width 1s;
    position: relative;
    /*overflow: hidden;*/
    background-color: #fff;
    resize: horizontal;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    transition: all 1s;
}

    .left-nav-bar.ui-resizable:before {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        content: '';
        /*background-color: #f1f3f4;*/
        z-index: 99;
    }

::-webkit-resizer {
    background-color: transparent;
    display: none;
}

.left-nav-bar:hover:before {
    width: 4px;
    height: 100%;
    content: '';
    position: absolute;
    right: 0;
    background-color: #09f;
}


.slide-handle {
    position: absolute;
    top: 50%;
    right: -6px;
    z-index: 1;
    /*width: 30px;*/
    cursor: col-resize;
}

    .slide-handle svg {
        fill: #767676;
    }

.left-nav-bar:hover .slide-handle svg {
    fill: #0099ff;
}

.close-nav .left-nav-bar {
    width: 0 !important;
    min-width: 0;
    overflow: hidden;
    transition: all 1s;
    margin-left: 0;
}

.nav-search-bar {
    height: 54px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.nav-search-wrap {
    background-color: #fff;
    border-radius: 6px;
    height: 36px;
    width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dddddd;
    flex-grow: 1;
}

.nav-search {
    background-color: #fff;
    border: 0 none;
    height: 100%;
    width: 1px;
    flex-grow: 1;
    outline: none;
    padding: 5px 10px;
    font-size: 15px;
    color: #757575;
}

.nav-search-btn {
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .nav-search-btn svg {
        transition: all 0.5s;
    }

    .nav-search-btn:hover svg {
        transform: scale(1.2);
    }

.nav-icon-panel {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.left-nav-panel {
    /*height: calc(100% - 162px);*/
    height: 1px;
    flex-grow: 1;
}

.bc-leftmenu .left-nav-panel {
    height: 100%;
}

.ui-resizable-s {
    display: none !important;
}

.left-nav-panel-inner {
    height: 100%;
    overflow: auto;
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.left-nav-item-wrap {
    margin-bottom: 2px;
}

    .left-nav-item-wrap.active {
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        height: 1px;
        flex-grow: 1;
        order: -1;
    }

.nav-icon-item {
    width: 60px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #9c9c9c;
    cursor: pointer;
}

    .nav-icon-item:hover {
        color: #09f;
    }

.nav-icon {
    width: 24px;
    height: 24px;
    filter: invert(62%) sepia(43%) saturate(8%) hue-rotate(314deg) brightness(111%) contrast(90%);
}

.chat-icon2 {
    background: url(../images/chat-icon2.svg) no-repeat center;
    background-size: 18px;
}

.delete-icon {
    background: url(../images/delete-icon.svg) no-repeat center;
    background-size: 16px;
}

.star-icon {
    background: url(../images/star-icon.svg) no-repeat center;
    background-size: 22px;
}

.star-icon2 {
    background: url(../images/star-icon.svg) no-repeat center;
}

.calendar-icon {
    background: url(../images/calendar-icon.svg) no-repeat center;
    background-size: 18px;
}

.nav-icon-item.active,
.nav-icon-item:hover .nav-icon {
    filter: invert(30%) sepia(100%) saturate(1024%) hue-rotate(182deg) brightness(97%) contrast(111%);
}

.nav-icon-title {
    font-size: 11px;
    margin: 0;
}

.nav-panle {
    min-height: 48px;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-panel-btn {
    height: 32px;
    border: 1px solid #e1e1e1;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #848484;
    min-width: 110px;
    background-color: #fff;
    cursor: pointer;
}

    .nav-panel-btn:hover {
        background-color: #fc0;
    }

    .nav-panel-btn img {
        margin-right: 3px;
    }

.left-nav-item {
    background-color: #a6a6a6;
    border-bottom: 1px solid #e1e1e1;
    min-height: 56px;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: bold;
    padding: 0 5px 0 10px;
    border-radius: 6px;
    justify-content: space-between;
}

.lnip {
    height: 1px;
    flex-grow: 1;
    overflow: auto;
}

}

.lnil-1 {
    margin: 0 0px;
    display: none;
}

.left-nav-item-wrap.active .lnip > .lnil-1 {
    display: block;
}

.left-nav-item-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.tabmenu-close {
    display: none;
}

.left-nav-item-wrap.active .tabmenu-close {
    display: block;
}

.left-nav-item-wrap.active .tabmenu-open {
    display: none;
}

.left-nav-panel p {
    margin: 0;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    width: 100%;
    text-overflow: ellipsis;
}

    .left-nav-panel p small {
        font-size: 10px;
    }

.lnil-1-nav-txt {
    white-space: nowrap;
    /*width: 140px;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.lnil-1-txt {
    white-space: nowrap;
    /*width: 180px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    width: 1px;
    flex-grow: 1;
}

.left-nav-item-icon svg {
    fill: #858585;
}

.lnil-1-content {
    height: 35px;
    display: flex;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding: 0 5px 0 20px;
    /*border-radius: 8px;*/
    margin: 1px 0;
    position: relative;
    justify-content: flex-start;
}

    .lnil-1-content:hover,
    .lnil-1.active .lnil-1-content {
        background-color: #f1f1f1;
    }

.lnil-1-icon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    filter: invert(62%) sepia(43%) saturate(8%) hue-rotate(314deg) brightness(111%) contrast(90%);
}
.lnil-2 {
    height: 35px;
    display: flex;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding: 0 5px 0 50px;
    margin: 1px 0;
    position: relative;
    justify-content: flex-start;
}
.chat-icon {
    background: url('../images/chat-icon.svg?v=1.1') no-repeat center;
}

.gear-icon {
    background: url('../images/gear-icon.svg?v=1.1') no-repeat center;
}

.password-icon {
    background: url('../images/password-icon.svg?v=1.1') no-repeat center;
}

.memory-icon {
    background: url('../images/memory-card.svg?v=1.1') no-repeat center;
    background-size: 18px;
}

.share-icon {
    background: url('../images/share-file.svg?v=1.1') no-repeat center;
    background-size: 18px;
}
.store-icon {
    background: url('../images/store.svg?v=1.1') no-repeat center;
    background-size: 18px;
}
.lnil-1-content svg {
    margin-right: 5px;
}

.lnil-1-txt {
    color: #000 !important;
    font-size: 13px;
}

.lnil-1:hover .lnil-1-txt,
.lnil-1.active .lnil-1-txt {
    color: #fff;
}

.lnil-1-content.active .lnil-1-txt {
    color: #fff;
}

.lnil-1-nav {
    display: none;
}

.lnil-1.active > .lnil-1-nav {
    display: block;
}

.lnil-1-nav-item {
    height: 31px;
    display: flex;
    border-bottom: 1px solid #dddddd;
    align-items: center;
    padding-left: 45px;
    padding-right: 5px;
}

    .lnil-1-nav-item:hover {
        background-color: #f8f8f8;
    }

    .lnil-1-nav-item a.btnPrompt {
        flex-grow: 1;
        width: 1px;
    }

.lnil-1-nav-txt {
    color: #000 !important;
    font-size: 13px;
}

.lnil-1-nav-item a.active p.lnil-1-nav-txt {
    color: #09f;
}

.lnil-1-nav-item.active .lnil-1-nav-txt {
    color: #09f;
}

.lnil-1-nav-item img {
    margin-right: 5px;
}

.left-nav-item-edit {
    margin-left: auto;
    cursor: pointer;
    display: none;
}

.lnil-1-nav-item:hover .left-nav-item-edit {
    display: block;
}

.thread_options {
    margin-left: auto;
    display: none;
    cursor: pointer;
}

.lnil-1.active .thread_options {
    display: block;
}

.thread-option-box {
    width: 120px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    position: absolute;
    right: -5px;
    bottom: -75px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    padding: 5px 0;
    display: none;
    z-index: 99;
}

.thread-option {
    font-size: 0.8em;
    padding: 5px 10px;
    cursor: pointer;
    color: #858585;
}

    .thread-option:hover {
        background-color: #f1f3f4;
    }




.main-container,
.main-container-inner,
.login-container {
    height: 100%;
    width: 1px;
    flex-grow: 1;
    position: relative;
    margin-left: 5px;
}

.page-container {
    height: 100%;
    width: 100%;
    position: relative;
    padding-top: 0px;
}

.page-content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px;
}

.page-heading {
    font-family: 'Impact', 'Open Sans', Arial, sans-serif;
    font-size: 34px;
    color: #0099ff;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 20px 0;
}

.page-content p {
    padding: 0;
    margin: 0 0 25px 0;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: #696969;
}

.page-content h4 {
    font-family: 'Impact', 'Open Sans', Arial, sans-serif;
    font-size: 24px;
    color: #0099ff;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 20px 0;
}

.page-content ol {
    margin-left: 30px;
    font-size: 16px;
    line-height: 24px;
    color: #696969;
}

.top-bar {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    /*border-bottom: 1px solid #e5e5e5;*/
    background-color: #fff;
    cursor: pointer;
    margin: 5px 5px 5px 0;
    border-radius: 6px;
}

.fixed-top-bar {
    position: fixed;
    top: 0;
    margin: 0;
    width: 100%;
}

.top-bar a.link {
    text-decoration: none;
    color: #bebebe;
    font-size: 13px;
}

    .top-bar a.link:hover {
        color: #09f !important;
    }

.top-bar a.header-link,
.top-bar button.header-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: #09f;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 20px;
    margin: 0 2px;
    border-radius: 24px;
    transition: all 0.5s;
    outline: none;
    border: 0;
    cursor: pointer;
}

    .top-bar a.header-link:hover {
        color: #fc0 !important;
    }

    .top-bar a.header-link:hover {
        color: #fc0;
    }

    .top-bar a.header-link.active,
    .top-bar button.header-link:hover {
        background-color: #09f;
        color: #fc0;
    }

.nav-link-devider {
    color: #bebebe;
    margin: 0 5px;
}

.user-info img {
    margin: 0 10px;
}

.user-info {
    display: flex;
    margin-right: auto;
    align-items: center;
}

    .user-info img {
        width: 38px;
    }

.user-img {
    border: 2px solid #000;
    width: 36px;
    height: 36px;
    margin: 0 12px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0px 1.5px #0099ff;
}

    .user-img img {
        margin: 0;
        width: 100%;
        height: 100%;
    }

.user-title {
    color: #09f;
    font-weight: bold;
    margin: 0;
}

    .user-title span {
        font-weight: normal;
        color: #bebebe;
        font-size: 13px;
    }

.search-container {
    width: 100%;
    max-width: 800px;
}

.site-logo {
    text-align: center;
    margin-bottom: 10px;
}

    .site-logo img {
        width: 100px;
    }

.logo {
    font-family: 'Agency FB', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 100px;
    color: #09f;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    margin-bottom: 15px;
    position: relative;
}

    .logo span:last-child {
        position: relative;
    }

        .logo span:last-child:before {
            content: 'Beta';
            position: absolute;
            color: #fff;
            top: -5px;
            left: 160px;
            background-color: #ccc;
            padding: 0 10px;
            border-radius: 8px;
            text-transform: uppercase;
            font-size: 36px;
            font-family: arial;
            font-weight: bold;
            line-height: 44px;
        }

.logo-txt {
    text-align: right;
    color: #909090;
    font-weight: bold;
    font-size: 22px;
    margin-right: 0;
    font-family: 'Agency FB', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.main-container-inner .logo,
.main-container-inner .logo-txt {
    display: none;
}

.logo span {
    color: #fc0
}

/*.logo:before {
    content: 'Beta';
    position: absolute;
    color: #fff;
    top: -20px;
    right: 100px;
    background-color: #ccc;
    padding: 0 10px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 36px;
    font-family: arial;
    font-weight: bold;
    line-height: 44px;
}*/

.header-logo {
    margin-right: auto;
    margin-left: 30px;
    font-family: 'Agency FB', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 30px;
    color: #09f;
    font-weight: bold;
}

.main-container-inner .header-logo {
    display: inline-block;
}

.logo span,
.header-logo span {
    color: #fc0
}

.search-container-wrapper {
    width: 100%;
    position: absolute;
    left: 0;
    top: 20%;
    display: flex;
    justify-content: center;
}

.main-container-inner .search-container-wrapper {
    width: 100%;
    border-top: 1px solid #e5e5e5;
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.search-container-inner {
    width: 100%;
    max-width: 768px;
}

.search-bar-container {
    display: flex;
    margin: 10px 0 0 0;
    min-height: 58px;
    background-color: #e5e5e5;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.main-container-inner .search-bar-container {
    margin: 10px 0 0 40px;
}

.search-bar-container:hover,
.search-bar-container:focus {
    border-color: #afafaf;
}

/*.search-bar {
    width: 1px;
    height: 100%;
    outline: 0;
    padding: 10px 0 10px 26px;
    font-size: 15px;
    color: #757575;
    border: 0;
    overflow: hidden;
    background: transparent;
    flex-grow: 1;
}*/

.search-bar {
    width: 1px;
    height: 100%;
    outline: 0;
    padding: 18px 55px 15px 15px;
    font-size: 15px;
    color: #757575;
    border: 0;
    overflow: hidden;
    /*background: url(/images/icon-chat.jpg) no-repeat 10px 10px;*/
    flex-grow: 1;
}

    .search-bar:focus + button.send-btn-icon {
        opacity: 1;
    }

    .search-bar::placeholder {
        color: #c4c4c4;
        opacity: 1;
    }

    .search-bar::-ms-input-placeholder {
        color: #c4c4c4;
    }

.textarea {
    display: block;
    width: 100%;
    overflow: hidden;
    resize: none;
    min-height: 56px;
    line-height: 20px;
    max-height: 270px;
    overflow-y: auto;
}

/* .textarea[contenteditable]:empty::before {
        content: "Placeholder still possible";
        color: gray;
    }*/


.send-btn {
    height: 100%;
    width: 56px;
    /*background: url(../images/send-icon.png) center no-repeat;*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .send-btn.loading {
        width: 40px;
    }

.send-btn-icon {
    width: 36px;
    height: 36px;
    background-color: #a6a6a6;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    border: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
}

    .send-btn-icon.active {
        display: flex;
    }

    .send-btn-icon svg {
        width: 14px;
        fill: #fff;
    }

.send-btn.loading .send-btn-icon {
    display: none;
}

.stop-btn-icon {
    width: 30px;
    height: 30px;
    background-color: #09f;
    border-radius: 8px;
    display: none;
    justify-content: center;
    align-items: center;
    border: 0;
    position: absolute;
    right: 10px;
    bottom: 14px;
}

    .stop-btn-icon.active {
        display: flex;
    }

.sign-up-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    height: 48px;
    border: 0;
    background-color: #09f;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 15px 2px rgba(0,0,0,0.1);
    width: 200px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.5s;
    margin-right: 4px;
}

    .sign-up-btn:hover {
        color: #fc0
    }

.loading {
    background: url(../images/spinner.svg) center no-repeat !important;
}

.disclaimer-txt {
    color: #c4c4c4;
    padding: 5px 3px;
    font-size: 12.4px;
    text-align: justify;
    margin: 0;
}

.main-container-inner .disclaimer-txt {
    margin: 0 0 0 40px;
    font-size: 12.3px;
}

.main-panel-container {
    display: flex;
    height: calc(100% - 64px);
    background: #ffffff;
    border-radius: 6px;
    margin-right: 5px;
}

.main-panel {
    width: 1px;
    flex-grow: 1;
    position: relative;
    transition: all 0.5s;
}

.main-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%
}

.result-panel {
    max-width: 100%;
    margin: 0 auto;
    max-height: calc(100% - 105px);
    overflow: hidden;
    flex: 1 1 0%;
    width: 100%;
    /*overflow: auto;*/
    display: none;
    padding: 0;
}

.main-container-inner .result-panel {
    display: block;
}

.promt-output {
    height: 100%;
    width: 100%;
    /* overflow-y: auto; */
    /*padding: 0 2px 0 25px;*/
}

#divResults {
    padding: 0 20px;
}

.user-search {
    padding: 28px 0 0;
    /* border-bottom: 1px solid #e5e5e5;*/
}

.user-response {
    padding: 20px 0 0;
    /*border-bottom: 1px solid #e5e5e5;
    background-color: #f7f7f8;*/
}

.question-container {
    max-width: 800px;
    margin: 0 auto;
}

.user-titles {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/*.user-name {
    margin-left: 10px;
    font-weight: bold;
}*/

.user-name {
    margin-left: 10px;
    color: #151515;
    font-size: 1rem;
    font-weight: bold;
    font-family: S hne,Roboto,sans-serif,Arial;
    font-variation-settings: normal;
}


.result-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    /*.result-container p {
        color: #464646;
        font-size: 16px;
        line-height: 20px;
        text-align: justify;
        margin: 5px 0;
        float: left;
    }*/

    .question-container p,
    .result-container p {
        color: #151515;
        font-size: 1rem;
        line-height: 1.75;
        text-align: justify;
        margin: 0 0 15px;
        font-family: S hne,Roboto,sans-serif,Arial;
        font-variation-settings: normal;
        word-break: break-word;
    }

.user-initials {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #09f;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
}

.result-wrapper {
    width: 100%;
    padding-left: 40px;
}

.askyeshua-icon {
    width: 34px;
    height: 34px;
    /*background: url('../images/askYeshuaGPT-Logo.png') no-repeat center #09f;*/
    background-size: 96%;
    border-radius: 50%;
}

    .askyeshua-icon img {
        width: 100%;
    }

.footer-bar {
    position: absolute;
    bottom: 0;
    height: 48px;
    width: 100%;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

    .footer-bar p {
        font-size: 13px;
        color: #8b8b8b;
    }

.flag-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-image: url('../images/all-country-flags.jpg');
    background-repeat: no-repeat;
    transform: scale(1);
    transition: all 0.5s;
}

.select-lang {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

    .select-lang .flag-icon:hover {
        transition: all 0.5s;
        transform: scale(1.1);
    }

.lang-name {
    margin-left: 8px;
    font-size: 13px;
    color: #bebebe;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-item .lang-name {
    width: auto;
    margin-left: 10px;
    color: #55575a;
}

.lang-name:hover {
    color: #09f
}

.lang-item.active .lang-name {
    color: #09f;
}

.flag-usa {
    background-position: -327px -579px;
}

.flag-heb {
    background-position: 0 -267px;
}

.flag-rom {
    background-position: -32px -490px;
}

.flag-chi {
    background-position: -426px -89px;
}

.flag-hin {
    background-position: -66px -267px;
}

.flag-spa {
    background-position: -525px -134px;
}

.flag-fil {
    background-position: -196px -446px;
}

.flag-ara {
    background-position: -33px 0;
}

.flag-fre {
    background-position: -196px -177px;
}

.flag-fre {
    background-position: -196px -177px;
}

.flag-haw {
    background-position: -330px -625px;
}

.flag-ben {
    background-position: -66px -267px;
}

.flag-por {
    background-position: -426px -446px;
}

.flag-rus {
    background-position: -98px -490px;
}

.flag-urd {
    background-position: -330px -625px;
}

.flag-ind {
    background-position: -32px -355px;
}

.flag-ger {
    background-position: -164px -133px;
}

.flag-jap {
    background-position: -361px -266px;
}


.flag-kor {
    background-position: -65px -311px;
}

.flag-ita {
    background-position: -230px -267px;
}

.flag-gre {
    background-position: -99px -224px;
}

.flag-tha {
    background-position: -393px -535px;
}

.flag-ukr {
    background-position: -230px -579px;
}

.flag-swa {
    background-position: -393px -267px;
}

.flag-yue {
    background-position: -330px -625px;
}

.flag-ira {
    background-position: -164px -268px;
}

.flag-tag {
    background-position: -196px -446px;
}

.flag-dut {
    background-position: -393px -402px;
}

.flag-swe {
    background-position: -294px -490px;
}

.flag-vie {
    background-position: -33px -625px;
}

.flag-tur {
    background-position: -66px -580px;
}

.flag-cze {
    background-position: -131px -134px;
}

.flag-tel {
    background-position: -66px -267px;
}

.flag-mar {
    background-position: -66px -267px;
}

.flag-tam {
    background-position: -66px -267px;
}

.flag-dan {
    background-position: -228px -133px;
}

.flag-nor {
    background-position: -426px -402px;
}

.flag-fin {
    background-position: -33px -179px;
}

.flag-hun {
    background-position: -460px -224px;
}

.flag-mal {
    background-position: -131px -400px;
}

.flag-slo {
    background-position: -458px -490px;
}

.flag-pun {
    background-position: -66px -267px;
}

.flag-lit {
    background-position: -426px -313px;
}

.flag-lat {
    background-position: -492px -313px;
}

.flag-est {
    background-position: -394px -133px;
}

.flag-ice {
    background-position: -197px -268px;
}

.flag-ser {
    background-position: -65px -490px;
}

.flag-cro {
    background-position: -394px -223px;
}

.flag-bul {
    background-position: -131px -45px;
}

.flag-slo {
    background-position: -394px -490px;
}

.flag-pol {
    background-position: -262px -442px;
}


.flag-afri {
    background-position: -66px 0;
}

.flag-armi {
    background-position: -196px 0;
}

.flag-azer {
    background-position: -492px 0;
}

.flag-bela {
    background-position: -33px -90px;
}

.flag-bons {
    background-position: -525px -0px;
}

.flag-cata {
    background-position: -525px -134px;
}

.flag-fini {
    background-position: -32px -179px;
}

.flag-gali {
    background-position: -262px -179px;
}

.flag-kaza {
    background-position: -163px -312px;
}

.flag-mace {
    background-position: -229px -356px;
}

.flag-maro {
    background-position: 0 -445px;
}

.flag-nepa {
    background-position: -454px -401px;
}

.flag-pers {
    background-position: -164px -267px;
}

.flag-kana {
    background-position: -66px -267px;
}


.flag-alb {
    background-position: -164px 0px;
}

.flag-amh {
    background-position: 0px -179px;
}

.flag-bas {
    background-position: -525px -135px;
}

.flag-bur {
    background-position: -295px -356px;
}

.flag-ceb {
    background-position: -194px -445px;
}

.flag-esp {
    background-position: -195px 0px; /* pending */
}

.flag-geo {
    background-position: -327px -179px;
}

.flag-guj {
    background-position: -66px -267px;
}

.flag-hai {
    background-position: -426px -223px;
}

.flag-iri {
    background-position: -524px -223px;
}

.flag-jav {
    background-position: -492px -223px;
}

.flag-kan {
    background-position: -66px -267px;
}

.flag-khm {
    background-position: -459px -267px;
}

.flag-kur {
    background-position: -133px -267px;
}

.flag-jav {
    background-position: -0px -39px;
}


.flag-kyr {
    background-position: -426px -267px;
}

.flag-lao {
    background-position: -197px -312px;
}

.flag-lat {
    background-position: -427px -577px;
}

.flag-mal {
    background-position: -524px -356px;
}

.flag-mon {
    background-position: -327px -356px;
}

.flag-pas {
    background-position: -65px 0px;
}

.flag-per {
    background-position: -163px -267px;
}

.flag-por {
    background-position: -427px -45px;
}

.flag-sam {
    background-position: -132px -623px;
}

.flag-sin-sindhi {
    background-position: -234px -445px;
}

.flag-sin-sinhala {
    background-position: -329px -313px;
}

.flag-som {
    background-position: -32px -535px;
}

.flag-sun {
    background-position: -491px -223px;
}

.flag-uzb {
    background-position: -330px -580px;
}

.flag-xho {
    background-position: -230px -623px;
}

.flag-yid {
    background-position: 0px -267px;
}

.flag-yor {
    background-position: -328px -399px;
}

.flag-zul {
    background-position: -230px -623px;
}

.flag-taj {
    background-position: -426px -535px;
}

.flag-tig {
    background-position: -487px -133px;
}

.flag-tsw {
    background-position: 0px -90px;
}

.flag-tur {
    background-position: -524px -534px;
}

.flag-uig {
    background-position: -426px -87px;
}

.flag-bho {
    background-position: -66px -267px;
}

.flag-chi {
    background-position: -65px -399px;
}

.flag-hau {
    background-position: -328px -399px;
}

.flag-igb {
    background-position: -328px -399px;
}

.flag-que {
    background-position: -99px -445px;
}

.flag-ses {
    background-position: -425px -310px;
}

.flag-sho {
    background-position: -296px -623px;
}

.flag-ton {
    background-position: -32px -578px;
}

.flag-wol {
    background-position: 0px -535px;
}



.lang-selection-popup {
    background-color: #fff;
    border-left: 3px solid #e5e5e5;
    width: 0;
    height: calc(100% - 64px);
    position: absolute;
    right: 0;
    padding: 0;
    z-index: 11;
    transition: all 0.5s;
    opacity: 0;
}

    .lang-selection-popup.show-lsp {
        width: 245px;
        padding: 10px 0 10px 8px;
        opacity: 1;
    }

    .lang-selection-popup:before {
        position: absolute;
        right: 25px;
        top: -7px;
        width: 0;
        height: 0;
        border-top: 15px solid #272727;
        border-right: 15px solid transparent;
        content: '';
        transform: rotate(45deg);
        opacity: 0;
    }

    .lang-selection-popup:after {
        position: absolute;
        right: 25px;
        top: -7px;
        width: 0;
        height: 0;
        border-top: 15px solid #fff;
        border-right: 15px solid transparent;
        content: '';
        transform: rotate(45deg);
        opacity: 0;
    }

    .lang-selection-popup.show-lsp:before,
    .lang-selection-popup.show-lsp:after {
        opacity: 1;
    }

.lang-selection-popup-inner {
    height: 100%;
    overflow: auto;
}

    .lang-selection-popup-inner::-webkit-scrollbar {
        width: 6px;
    }

    .lang-selection-popup-inner::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .lang-selection-popup-inner::-webkit-scrollbar-thumb {
        background-color: #cecece;
        border-radius: 20px;
        /*border: 6px solid transparent;*/
        background-clip: content-box;
        padding: 0 3px;
    }

        .lang-selection-popup-inner::-webkit-scrollbar-thumb:hover {
            background-color: #cecece;
        }

.lang-cat {
    font-size: 11px;
    text-transform: uppercase;
    color: #55575a;
    margin-bottom: 10px;
}

.lang-wrapper {
    padding-left: 5px;
    margin-bottom: 20px;
}

/*.lang-item {
    border-bottom: 1px solid rgb(229, 229, 229);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}*/

.lang-item {
    border-bottom: 1px solid rgb(229, 229, 229);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    cursor: pointer;
    height: 32px;
}

    .lang-item.active:before {
        position: absolute;
        right: 10px;
        top: 5px;
        font: normal normal normal 24px/1 "Material Design Icons";
        content: "\f05e0";
        font-size: 18px;
        color: #0099ff;
    }

    .lang-item .flag-icon {
        transform: scale(1);
    }

.lang-item-icons {
    margin-left: auto;
    display: none;
}

.lang-item-icon-box {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
}

.cam-icon {
    background: url('../images/camera_icon.svg') no-repeat center;
    background-size: 16px;
}

.mic-icon {
    background: url('../images/mic_icon.svg') no-repeat center;
    background-size: 16px;
}

.speaker-icon {
    background: url('../images/speaker-icon.svg') no-repeat center;
    background-size: 16px;
}

/***************************Sign up & Sign in ************************************/
.login-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.login-wrapper {
    width: 100%;
    max-width: 500px;
    position: relative;
    left: 50%;
    top: 45%;
    border: 1px solid #ced2db;
    border-radius: 16px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-family: "Open Sans", sans-serif;
}

.login-t {
    height: 70px;
    background-color: #f5f7f8;
    font-family: Impact;
    color: #0099ff;
    font-size: 40px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 14px 14px 0 0;
}

.login-body {
    padding: 20px;
}

.ep-form-wrap {
    display: flex;
    justify-content: space-between;
}

.log-in-txt {
    margin: 0 0 10px;
}

.h-field {
    width: 48%;
}

.ep-form {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}

    .ep-form:hover .ep-field,
    .ep-field:focus {
        border-color: #a1a1a1;
    }

.remember-me {
    font-size: 12px;
    text-align: justify;
    color: #494949;
    line-height: 14px;
}

    .remember-me a {
        font-weight: bold;
        color: #09f;
        text-decoration: underline;
    }

        .remember-me a:hover {
            text-decoration: none;
        }

.ep-title {
    font-size: 13px;
    margin: 0 0 10px;
    color: #000;
    font-weight: 600;
}

.ep-field {
    width: 100%;
    height: 100%;
    border: 1px solid #d4dbdf;
    border-radius: 4px;
    background-color: transparent;
    outline: none;
    padding: 15px 10px 15px 15px;
    font-size: 16px;
}

.login-btn.disabled {
    background-color: #bebebe !important;
    color: #000 !important;
}

.login-btn {
    width: 100%;
    height: 56px;
    background-color: #0099ff;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin: 30px auto 0;
    font-size: 16px;
    border-radius: 32px;
    border: 2px solid #0099ff;
    display: block;
    transition: all 0.5s ease;
    line-height: 52px;
    position: relative;
}

    .login-btn:hover,
    .login-btn.clicked {
        background-color: #fff;
        color: #0099ff;
        cursor: pointer;
    }

.field-err {
    border: 1px solid #d90000 !important;
    background-color: #ffe1e1 !important;
}

.err-msg {
    color: #d60303;
    padding: 2px 10px;
    display: block;
    font-size: 11px
}

.acc-loader {
    position: absolute;
    right: 15px;
    width: 44px;
    height: 44px;
    top: 4px;
    display: none;
}

.login-btn.clicked .acc-loader {
    display: block;
}

.signup-msg-popup {
    width: 100%;
    max-width: 500px;
    position: relative;
    left: 50%;
    top: 45%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-family: "Open Sans", sans-serif;
    background-color: #fff;
    border-radius: 16px;
    padding: 60px 30px 30px;
}

.success-chk {
    width: 80px;
    height: 80px;
    background: url('../images/check-green.svg') no-repeat center;
    position: absolute;
    top: -40px;
    left: 210px;
}

.success-heading {
    font-family: Impact;
    color: #09f;
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}

.success-txt {
    font-size: 14px;
    color: #6a6a6a;
    text-align: center;
    line-height: 24px;
    margin-bottom: 30px;
}

.nav-tabs-custom .nav-item {
    position: relative;
}

.nav-tabs-custom.card-header-tabs .nav-link {
    padding: 1.25rem 1rem;
    font-weight: 600;
    font-size: 0.875em;
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: #5156be;
}

.nav-tabs-custom .nav-item .nav-link::after {
    content: "";
    background: #5156be;
    height: 1px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -1px;
    -webkit-transition: all 250ms ease 0s;
    transition: all 250ms ease 0s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.nav-tabs-custom .nav-item .nav-link.active:after {
    -webkit-transform: scale(1);
    transform: scale(1);
}
/*********************************************************************************/

/****************************** POP UP ***********************************/
.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 999;
}


.overlay-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 999;
    /*Remove*/
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .overlay-popup.show {
        opacity: 1;
        visibility: visible;
    }

.upgrade-popup {
    width: 100%;
    max-width: 800px;
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-family: "Open Sans", sans-serif;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.popup-header {
    background-color: #f7f7f8;
    padding: 10px 15px;
    position: relative;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
}

.popup-heading {
    color: #4e4e4e;
    font-size: 24px;
    font-weight: bold;
}

.popup-header img {
    margin-right: 10px;
}

.popup-body {
    background-color: #fff;
    display: flex;
}

.plan-col {
    width: 50%;
    padding: 10px 30px;
    border-right: 1px solid #ececf1;
    position: relative;
}

ul.plan-feature {
    margin: 15px 10px 10px;
}

    ul.plan-feature li {
        list-style-type: none;
        margin-bottom: 15px;
        color: #4e4e4e;
        background: url('../images/check.svg') no-repeat 0 center;
        background-size: 18px;
        padding-left: 25px;
    }

.plan-name {
    color: #4e4e4e;
    font-size: 24px;
    margin: 50px 0 5px;
    font-weight: bold;
}

.plan-price {
    color: #c0c0c0;
    font-size: 24px;
}

.plan-feature-heading {
    font-weight: bold;
    color: #4e4e4e;
    margin: 10px 0;
    font-size: 16px;
}

.updrade-btn {
    width: 100%;
    border-radius: 6px;
    background-color: #09f;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    margin: 15px 0;
    border: 2px solid #09f;
    cursor: pointer;
}

    .updrade-btn:hover {
        color: #09f;
        background-color: #fff;
    }

.btn-inactive {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.5;
}

.plan-btn {
    margin: 0 auto;
    border-radius: 32px;
    color: #fff;
    background-color: #0099ff;
    border: 2px solid #09f;
    padding: 12px 20px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    width: 160px;
    cursor: pointer;
}

    .plan-btn:hover {
        color: #09f;
        background-color: #fff;
    }

.close-popup {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 24px;
    line-height: 24px;
    color: #999;
}

    .close-popup:hover {
        color: #900;
    }

    .close-popup svg {
        transition: all 0.5s;
    }

    .close-popup:hover svg {
        width: 100%;
        transform: rotate(180deg);
        transition: all 0.5s;
    }

.popup-footer {
    height: 70px;
    background-color: #f7f7f8;
    border-top: 1px solid #ececf1;
    padding: 10px 30px;
}

.popup-footer-btn {
    background-color: #959595;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border: 2px solid #959595;
    transition: all 0.3s;
    margin: 0 0 0 10px;
    letter-spacing: 1px;
    min-width: 150px;
}

    .popup-footer-btn:hover {
        background-color: #09f;
        border-color: #09f;
    }

.popup-body-img {
    width: 250px;
}

.pro-upload-pane {
    width: 1px;
    flex-grow: 1;
    margin-left: 10px;
}

.profile-popup-footer {
    height: 70px;
    display: flex;
    padding: 20px 20px;
    align-items: center;
    justify-content: flex-end;
    background-color: #e5e5e5;
    border-top: 3px solid #c3c2c2;
}

.plan-switch-panel {
    position: absolute;
    right: 20px;
    top: 10px;
    background-color: #e4e4e4;
    border-radius: 32px;
    width: 220px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #4e4e4e;
}

    .plan-switch-panel span {
        margin: 0 5px;
    }

.yearly-saving {
    background-color: #60d3ad;
    border-radius: 4px;
    color: #fff;
    padding: 5px;
}
/***************Subscription Plan Toggle Switch ****************/
.plan-switch-panel input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.plan-switch-panel label {
    cursor: pointer;
    text-indent: -9999px;
    width: 30px;
    height: 16px;
    background: grey;
    display: inline-block;
    border-radius: 100px;
    position: relative;
}

    .plan-switch-panel label:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }

.plan-switch-panel input:checked + label {
    background: #0099ff;
}

    .plan-switch-panel input:checked + label:after {
        left: calc(100% - 1px);
        transform: translateX(-100%);
    }

.plan-switch-panel label:active:after {
    width: 30px;
}
/****************************************/

/****************Custom Checkbox********************/
.checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 18px;
}

    .checkbox-wrapper-19 span {
        font-size: 13px;
        margin-left: 5px;
    }

@-moz-keyframes dothabottomcheck-19 {
    0% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) / 2);
    }
}

@-webkit-keyframes dothabottomcheck-19 {
    0% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) / 2);
    }
}

@keyframes dothabottomcheck-19 {
    0% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) / 2);
    }
}

@keyframes dothatopcheck-19 {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) * 1.2);
    }
}

@-webkit-keyframes dothatopcheck-19 {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) * 1.2);
    }
}

@-moz-keyframes dothatopcheck-19 {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) * 1.2);
    }
}

.checkbox-wrapper-19 input[type=checkbox] {
    display: none;
}

.checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #979797;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
    float: left;
}

    .checkbox-wrapper-19 .check-box::before,
    .checkbox-wrapper-19 .check-box::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        height: 0;
        width: calc(var(--checkbox-height) * .2);
        background-color: #0099ff;
        display: inline-block;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        border-radius: 5px;
        content: " ";
        -webkit-transition: opacity ease 0.5;
        -moz-transition: opacity ease 0.5;
        transition: opacity ease 0.5;
    }

    .checkbox-wrapper-19 .check-box::before {
        top: calc(var(--checkbox-height) * .72);
        left: calc(var(--checkbox-height) * .41);
        box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
        -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    .checkbox-wrapper-19 .check-box::after {
        top: calc(var(--checkbox-height) * .37);
        left: calc(var(--checkbox-height) * .05);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
    .checkbox-wrapper-19 .check-box.checked {
        border-color: #0099ff;
    }

        .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
        .checkbox-wrapper-19 .check-box.checked::after {
            height: calc(var(--checkbox-height) / 2);
            -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
            -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
            -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
            animation: dothabottomcheck-19 0.2s ease 0s forwards;
        }

        .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
        .checkbox-wrapper-19 .check-box.checked::before {
            height: calc(var(--checkbox-height) * 1.2);
            -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
            -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
            -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
            animation: dothatopcheck-19 0.4s ease 0s forwards;
        }

/******************************************************************/

/********************* CUSTOM CHECKBOX 2 (Rounded Toggle with YES/NO) *************************/
.custom-cbox-2 {
    padding: 0 0 0 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

    .custom-cbox-2 label {
        margin: 0;
        display: flex;
        cursor: pointer;
    }

        .custom-cbox-2 label ~ span {
            color: #999;
            font-size: 13px;
            padding-left: 5px;
            font-family: arial;
            font-weight: bold;
        }

        /*             .custom-cbox-2.locked-acc label ~ span {
                                        color: #e4151c !important;
                                    }

                                    .custom-cbox-2.enable-acc label ~ span {
                                        color: #4caf50 !important;
                                    } */

        .custom-cbox-2 label > span {
            color: #b4c6e5;
            font-size: 13px;
            font-weight: normal;
            padding-left: 6px;
            width: calc(100% - 90px);
            line-height: 14px;
            vertical-align: middle;
            align-self: center;
        }

    .custom-cbox-2 input[type="checkbox"] {
        display: none;
    }

    .custom-cbox-2 .csscheckbox {
        background-color: #eae8ea;
        border: 2px solid #bebcbf;
        color: #fff;
        display: inline-block;
        height: 26px;
        position: relative;
        -webkit-transition: all 200ms ease-in 0s;
        -o-transition: all 200ms ease-in 0s;
        transition: all 200ms ease-in 0s;
        width: 80px;
        border-radius: 16px;
    }

        .custom-cbox-2 .csscheckbox span {
            float: left;
            font-size: 11px;
            text-align: left;
            width: 38px;
            font-family: Impact;
            text-transform: uppercase;
            line-height: 22px;
            padding: 0px 7px;
            color: #696969;
        }

            .custom-cbox-2 .csscheckbox span.chk-no {
                text-align: right;
                color: #696969;
            }

        .custom-cbox-2 .csscheckbox div {
            background: #fff url(toggle-tab-dots.png) no-repeat scroll center;
            height: 22px;
            left: 0px;
            position: absolute;
            top: 0;
            -webkit-transition: all 200ms ease-in 0s;
            -o-transition: all 200ms ease-in 0s;
            transition: all 200ms ease-in 0s;
            width: 48px;
            border-radius: 10px;
        }

    .custom-cbox-2 input[type="checkbox"]:checked + label .csscheckbox div {
        left: 20px;
    }

    .custom-cbox-2 input[type="checkbox"]:checked + label .csscheckbox div {
        left: 28px;
    }

    .custom-cbox-2 input[type="checkbox"]:checked + label .csscheckbox {
        background: #eae8ea none repeat scroll 0 0;
    }

    .custom-cbox-2.locked-acc input[type="checkbox"]:checked + label .csscheckbox {
        background-color: #e4151c !important;
        border: 2px solid #e4151c !important;
    }

    .custom-cbox-2.enable-acc input[type="checkbox"]:checked + label .csscheckbox {
        background-color: #4caf50 !important;
        border: 2px solid #4caf50 !important;
    }


    .custom-cbox-2.locked-acc label ~ span {
        color: #e4151c !important;
    }

    .custom-cbox-2.enable-acc label ~ span {
        color: #4caf50 !important;
    }

    .custom-cbox-2 input[type="checkbox"]:disabled + label .csscheckbox {
        background: #bbbdbc;
    }

    .custom-cbox-2 input[type="checkbox"]:disabled + label > span {
        color: #bbbdbc;
    }

    .custom-cbox-2 input[type="checkbox"][data-warning="true"] + label .csscheckbox {
        background: #ba400d;
    }

    .custom-cbox-2 input[type="checkbox"][data-warning="true"] + label > span {
        color: #ba400d;
    }

    .custom-cbox-2.locked-acc label > span {
        font-weight: bold;
    }
/*****************************************************************************/

/***************************** My Checkbox ***********************************/

/************************************/
.loader {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
}

    .loader img {
        width: 60px;
    }

.bm-loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.cm-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.bm-loader img {
    width: 100px;
}

.cm-loader img {
    width: 200px;
}
/**************************** Subscription Plan ***********************************/
.subscription-plan {
    padding: 40px 80px 20px;
}
/*********************************************************************************/
/**************************** Payment Page ***********************************/
.payment-window {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    margin: 50px auto 20px;
    border: 1px solid #dedede;
}

.payment-header {
    background-color: #dedede;
    text-align: center;
    padding: 20px;
}

.p-title {
    color: #2b3338;
    font-size: 24px;
    line-height: 36px;
}

.p-cost {
    color: #2b3338;
    font-size: 32px;
    font-weight: bold;
}

.payment-body {
    padding: 20px 40px;
}

.pfo-wrap {
    margin-bottom: 20px;
}

.pf-title {
    font-size: 16px;
    margin-bottom: 5px;
    color: #2b2b2b;
}

.pf-wrap {
    height: 60px;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
    overflow: hidden;
}

.p-field {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    padding: 10px;
    font-size: 18px;
    color: #6f6f6f;
}

    .p-field:hover,
    .p-field:focus,
    .p-field-2:hover,
    .p-field-2:focus,
    .p-field-3:hover,
    .p-field-3:focus,
    .p-field-4:hover,
    .p-field-4:focus {
        background-color: #f9f9f9;
    }

.pf-wrap-2 {
    height: 60px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #dbdbdb;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p-field-2 {
    width: 50%;
    height: 100%;
    border: 0;
    outline: none;
    padding: 10px;
    font-size: 18px;
    color: #6f6f6f;
}

.pf-wrap-2 img,
.pf-wrap-4 img {
    margin-right: 10px;
}

.pfo-wrap-2 {
    height: 60px;
    border-radius: 0 0 8px 8px;
    border: 1px solid #dbdbdb;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pf-wrap-3 {
    width: 50%;
    height: 60px;
    overflow: hidden;
    border-right: 1px solid #dbdbdb;
}

.p-field-3 {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    padding: 10px;
    font-size: 18px;
    color: #6f6f6f;
}

.pf-wrap-4 {
    width: 50%;
    height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p-field-4 {
    width: 30%;
    height: 100%;
    border: 0;
    outline: none;
    padding: 10px;
    font-size: 18px;
    color: #6f6f6f;
}

.pf-wrap-5 {
    height: 60px;
    border-radius: 0 0 8px 8px;
    border: 1px solid #dbdbdb;
    overflow: hidden;
    border-top: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pay-btn {
    height: 56px;
    background-color: #2b3338;
    border: 2px solid #2b3338;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c0c3c7;
    font-size: 20px;
    cursor: pointer;
    margin-top: 20px;
}

    .pay-btn:hover {
        color: #2b3338;
        background-color: #fff;
    }

.mob-nav-dd {
    position: absolute;
    width: 200px;
    background: #fff;
    right: 10px;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    z-index: 1;
    overflow: hidden;
    height: 0;
    transition: all 0.5s;
}

    .mob-nav-dd.show {
        padding: 10px;
        overflow: visible;
        height: auto;
        transition: all 0.5s;
        z-index: 11;
    }

.mob-hamburger {
    padding-top: 5px;
    cursor: pointer;
}

    .mob-hamburger img {
        width: 24px;
    }

.mob-nav-menu {
    list-style-type: none;
}

    .mob-nav-menu li {
        padding: 5px 0;
        border-bottom: 1px dashed #ccc;
    }

        .mob-nav-menu li:last-child {
            border: 0 none;
        }

.mob-nav-dd .user-info img {
    margin: 0 5px 0 0;
    width: 30px;
}

.mob-nav-dd button.header-link {
    margin: 0 auto;
}

/*********************************************************************************/
/*********************************************************************************/

body.modal-open {
    overflow: hidden;
}

/************************************************/
.bg-primary {
    background-color: #09f !important;
}

.h-100 {
    height: 100% !important;
}

.w-100 {
    width: 100% !important;
}
/************************ Custom CSS ***********************/
.auth-logo {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-bg {
    background-image: url("../images/login-bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #09f;
}

.auth-bg .bg-overlay {
    opacity: 0.9;
}

.bg-bubbles {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .bg-bubbles li {
        position: absolute;
        list-style: none;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 30px;
        background-color: rgba(255, 255, 255, 0.1);
        bottom: -50px;
        -webkit-animation: square 20s infinite;
        animation: square 20s infinite;
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
    }

        .bg-bubbles li:nth-child(1) {
            right: 10%;
        }

        .bg-bubbles li:nth-child(2) {
            right: 20%;
            width: 120px;
            height: 120px;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-animation-duration: 17s;
            animation-duration: 17s;
        }

        .bg-bubbles li:nth-child(3) {
            right: 25%;
            -webkit-animation-delay: 4s;
            animation-delay: 4s;
        }

        .bg-bubbles li:nth-child(4) {
            right: 40%;
            width: 80px;
            height: 80px;
            -webkit-animation-duration: 22s;
            animation-duration: 22s;
        }

        .bg-bubbles li:nth-child(5) {
            right: 70%;
            width: 90px;
            height: 90px;
        }

        .bg-bubbles li:nth-child(6) {
            right: 70%;
            width: 120px;
            height: 120px;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }

        .bg-bubbles li:nth-child(7) {
            right: 32%;
            width: 150px;
            height: 150px;
            -webkit-animation-delay: 7s;
            animation-delay: 7s;
        }

        .bg-bubbles li:nth-child(8) {
            right: 55%;
            width: 80px;
            height: 80px;
            -webkit-animation-delay: 15s;
            animation-delay: 15s;
            -webkit-animation-duration: 40s;
            animation-duration: 40s;
        }

        .bg-bubbles li:nth-child(9) {
            right: 25%;
            width: 50px;
            height: 50px;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-animation-duration: 40s;
            animation-duration: 40s;
        }

        .bg-bubbles li:nth-child(10) {
            right: 90%;
            width: 140px;
            height: 140px;
            -webkit-animation-delay: 11s;
            animation-delay: 11s;
        }

@-webkit-keyframes square {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-1000px) rotate(-600deg);
        transform: translateY(-1000px) rotate(-600deg);
    }
}

@keyframes square {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-1000px) rotate(-600deg);
        transform: translateY(-1000px) rotate(-600deg);
    }
}

.color-orange {
    color: #ffcc00;
}

.color-blue {
    color: #09f !important;
}

.auth-logo .logo-txt {
    color: #09f;
    font-size: 46px;
}

.bg-primary {
    background-color: #09f !important;
}

.btn-primary {
    background-color: #09f !important;
    border-color: #09f !important;
}

.card {
    width: 100%;
}

.card-body-inner {
    padding: 20px 12px;
    height: 100%;
}

    .card-body-inner:hover {
        background-color: #ffefd4;
    }

.bg-primary .card-body-inner:hover {
    background-color: #0879c4;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-items: flex-start;
    min-height: 600px;
}

#divPlans .plan-container:nth-child(4) .card-content,
#divPlans .plan-container:nth-child(5) .card-content,
#divPlans .plan-container:nth-child(6) .card-content,
#divPlansYearly .plan-container:nth-child(4) .card-content,
#divPlansYearly .plan-container:nth-child(5) .card-content,
#divPlansYearly .plan-container:nth-child(6) .card-content {
    min-height: 1120px;
}

.mt-a {
    margin-top: auto;
}

.btn-blue {
    background-color: #0099ff;
    border-color: #0099ff;
    color: #fff;
}

.btn-orange {
    background-color: #ffcc00;
    border-color: #ffcc00;
    color: #000;
}

.text-blue {
    color: #0099ff !important;
}

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

.cust-col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666666%;
    display: flex;
    padding: 0 5px;
}

    .cust-col p {
        display: flex;
    }

@media (min-width: 1800px) {
    .cust-col {
        width: 16.66666666%;
    }
}

@media (max-width: 1024px) {
    .cust-col {
        width: 50%;
    }

    .card-content,
    #divPlans .plan-container:nth-child(4) .card-content,
    #divPlans .plan-container:nth-child(5) .card-content,
    #divPlans .plan-container:nth-child(6) .card-content,
    #divPlansYearly .plan-container:nth-child(4) .card-content,
    #divPlansYearly .plan-container:nth-child(5) .card-content,
    #divPlansYearly .plan-container:nth-child(6) .card-content {
        min-height: auto;
    }
}

@media (max-width:768px) {
    .cust-col {
        width: 100%;
    }

    .card-content,
    #divPlans .plan-container:nth-child(4) .card-content,
    #divPlans .plan-container:nth-child(5) .card-content,
    #divPlans .plan-container:nth-child(6) .card-content,
    #divPlansYearly .plan-container:nth-child(4) .card-content,
    #divPlansYearly .plan-container:nth-child(5) .card-content,
    #divPlansYearly .plan-container:nth-child(6) .card-content {
        min-height: auto;
    }
}

/*.dot-cursor123 {
    display: inline-block;
    animation: blink 0.5s infinite;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #09f;
}*/

.dot-cursor123 {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #09f;
    margin: 8px 0 0 0px;
    /*animation: blink 2s infinite;*/
    display: inline-block;
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 0;
    }

    25%, 75% {
        opacity: 1;
    }
}

/************* Plan Features Table *************/
.pft-wrap {
    border: 1px solid rgba(0, 0, 0, 0.125);
    margin-top: 50px;
}

.pft-header {
    display: flex;
}

.pfth-col1 {
    width: 37.5%;
    background-color: #ddd;
    border: 1px solid #fff;
}

.pfth-col2 {
    width: 37.5%;
    background-color: #f79848;
}

.pfth-col3 {
    width: 25%;
    background-color: #679ed7;
}

.plan-ver {
    min-height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #fff;
}

.plan-ver-col-wrap {
    display: flex;
}

.plan-ver-col {
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    width: 33.3%;
    border: 1px solid #fff;
}

.plan-ver-col2 {
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    width: 50%;
    border: 1px solid #fff;
}

.pftb-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.pftbr-col-h {
    background-color: #efefef;
    min-height: 38px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    color: #000;
    padding: 0 20px 0 30px;
    width: 37.5%;
    border: 1px solid #fff;
    background: url('../images/chk-icon.png') 8px center no-repeat;
    background-size: 12px;
}

.pftbr-col {
    width: 12.5%;
    background-color: #f6e1b5;
    min-height: 38px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pftbr-col2 {
    width: 12.5%;
    background-color: #d7e1f1;
    min-height: 38px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.f-y {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
}

.pftbr-col .f-y {
    background-color: #f79848;
}

.pftbr-col2 .f-y {
    background-color: #679ed7;
}

.pftf-row {
    display: flex;
}

.pftf-col-h {
    background-color: #fff;
    width: 37.5%;
    border: 1px solid #fff;
}

.pftf-col-p {
    width: 12.5%;
    background-color: #f79848;
    min-height: 80px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pftf-col-p-2 {
    width: 12.5%;
    background-color: #679ed7;
    min-height: 80px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plan-pricing {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
}

.plan-duraion {
    font-size: 13px;
    color: #fff;
    line-height: 16px;
    margin-left: 3px;
}

.pftf-col {
    width: 12.5%;
    background-color: #fff;
    min-height: 40px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/**************************************************/

/*********************Content Manager*************************/
.content-manager {
    display: flex;
    justify-content: space-around;
    width: 1px;
    flex-grow: 1;
    padding: 8px 0 8px 8px;
    background-color: #f7f9fc;
    position: relative;
    transition: all 0.5s;
}

.cm-left {
    width: calc(50% - 20px);
    background-color: #fff;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cm-right {
    width: calc(50% - 60px);
    background-color: #fff;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cmp-header {
    height: 42px;
    border-bottom: 2px solid #d7d7d7;
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .cmp-header p {
        font-size: 16px;
        font-weight: bold;
        color: #5f5f5f;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.cpm-header-tab {
    border-bottom: 3px solid transparent;
    line-height: 30px;
    cursor: pointer;
    font-size: 15px !important;
}

    .cpm-header-tab:hover {
        color: #09f;
    }

    .cpm-header-tab.active {
        border-color: #09f;
        color: #09f !important;
    }

.cmr {
    height: 43px;
    border-bottom: 1px solid #d7d7d7;
    display: flex;
    align-items: center;
}

    .cmr:hover,
    .cmr.active {
        background-color: #fff1d8;
    }

.cmr-expand-icon {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #cfcfcf;
    font-size: 20px;
    cursor: pointer;
}

.cmr-icon {
    width: 24px;
    height: 24px;
    display: flex;
    class ="cmr-ind" justify-content: flex-start;
    align-items: center;
}

    .cmr-icon img {
        width: 100%;
    }

    .cmr-icon i {
        color: #767676;
        font-size: 24px;
    }

.cm-settings {
    cursor: pointer;
}

.cmr-txt {
    font-size: 14px;
    width: 1px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-inner {
    padding: 0 15px;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.cmr-ch-1 {
    padding-left: 30px;
}

.cmr-ch-2 {
    padding-left: 80px;
}

.cmr-ind {
    display: none;
}

.cmr:hover .cmr-ind {
    display: block;
}

.cmr-ind i {
    font-size: 32px;
    color: #767676;
    cursor: pointer;
}

.cm-form {
    overflow: hidden;
    flex: 1 1 0%;
    width: 100%;
}


.cm-form-tab2 {
    display: none;
    flex-direction: column;
    height: 100%;
}

.cm-form-tab3,
.cm-form-tab5,
.cm-form-tab6,
.cm-form-tab7,
.cm-form-tab8,
.cm-form-tab9,
.cm-form-tab10 {
    display: none;
    flex-direction: column;
    height: 100%;
    padding-top: 30px;
}

    .cm-form-tab2.active,
    .cm-form-tab3.active,
    .cm-form-tab4.active,
    .cm-form-tab5.active,
    .cm-form-tab6.active,
    .cm-form-tab7.active,
    .cm-form-tab8.active,
    .cm-form-tab9.active,
    .cm-form-tab10.active {
        display: flex;
    }

.book-content-disp {
    border: 3px solid #09f;
    border-radius: 4px;
    flex: 1;
    margin-top: 20px;
    position: relative;
    padding: 20px 15px;
    line-height: 22px;
    background-color: #e8f0fe;
}

.grey-box {
    background-color: #e6e6e6 !important;
}

.sm-form-lbl {
    color: #0099ff;
    font-size: 14px;
    background-color: #fff;
    position: absolute;
    top: -14px;
    left: 10px;
    padding: 0 5px;
}

.book-content-icons {
    margin-top: -15px;
    display: flex;
    justify-content: flex-end;
}

    .book-content-icons .mdi {
        background-color: #0099ff;
        border-radius: 50%;
        color: #fff;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        cursor: pointer;
        transition: all 0.5s;
    }

        .book-content-icons .mdi:hover {
            transform: scale(1.2);
            transition: all 0.5s;
        }

.cm-footer {
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    grid-gap: 15px;
}

    .cm-footer .btn-login {
        flex: 1;
        font-size: 16px;
    }

.cont-type-change {
    flex: 1;
    flex-direction: column;
}

.cmf-item {
    margin-bottom: 25px;
    position: relative;
}

.clip-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.cmf-lable {
    font-size: 15px;
    color: #5f5f5f;
    margin-bottom: 0;
    min-width: 120px;
    background-color: #fff;
    position: absolute;
    padding: 2px 5px;
    left: 10px;
    top: -10px;
}

.cmf-field {
    border-radius: 4px;
    border: 2px solid #1c73e8;
    height: 56px;
    width: 100%;
    background-color: #e8f0fe;
    padding: 10px;
    font-size: 16px;
}

.cmf-txtarea {
    border-radius: 4px;
    border: 2px solid #1c73e8;
    height: 100%;
    width: 100%;
    background-color: #e8f0fe;
    padding: 15px 10px;
    font-size: 16px;
    font-family: Arial;
}

.cmf-txtarea-inner {
    border: 0 none;
    height: 100%;
    width: 100%;
    background: none;
    padding: 0;
    font-size: 16px;
    font-family: Arial;
    outline: none;
}

.req-field .cmf-field,
.req-field .cmf-txtarea {
    border-color: #e40000 !important;
}

.req-field .cmf-lable {
    color: #e40000;
}

.cmf-dd {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/cm-dd-icon.png) no-repeat right 10px center #e8f0fe;
}

.cm-inline-field {
    display: flex;
    grid-gap: 15px;
}


.lang-bar {
    width: 54px;
}

.lang-icon-wrapper {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lang-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.5s;
}

    .lang-icon:hover {
        transform: scale(1.15);
        transition: all 0.5s;
    }

.lang-icon1 {
    background: url(../images/cm-sidebar-book-icon.png) no-repeat 0 0;
}

    .lang-icon1.active {
        background-position: -42px 0;
    }

.lang-icon2 {
    background: url(../images/cm-sidebar-ai-icon.png) no-repeat 0 0;
}

    .lang-icon2.active {
        background-position: -42px 0;
    }

.cm-body {
    overflow: hidden;
    flex: 1 1 0%;
    width: 100%;
}

.cm-right .tox-tinymce {
    height: calc(100% - 25px) !important;
}

.scroll-inner::-webkit-scrollbar {
    width: auto;
}

.scroll-inner::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-inner::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

    .scroll-inner::-webkit-scrollbar-thumb:hover {
        background-color: #b5d1ff;
    }


.cm-nav {
    padding: 0 0px;
    background-color: #fff;
}

.cmn-item-1-title {
    height: 38px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

    .cmn-item-1-title:hover,
    .cmn-item-2-title:hover,
    .cmn-item-3-title:hover {
        background-color: #e7e7e7;
    }

.cmn-item-1.active .cmn-item-1-title,
.cmn-item-2.active .cmn-item-2-title {
    background-color: #ffedcd;
}

.cmn-expand-icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a6a6a6;
    font-size: 18px;
}

.collapse-nav {
    display: none;
}

.cmn-item-1.active .expand-nav {
    display: none;
}

.cmn-item-1.active .collapse-nav {
    display: block;
}

.cmi-icon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

    .cmi-icon img {
        width: 100%;
    }

.cmn-txt {
    color: #4b4b4b;
    font-size: 14px;
}

.left-nav-panel p.cmn-txt {
    color: #000;
    margin: 0;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 1px;
    flex-grow: 1;
    font-size: 11px;
    font-weight: bold;
}

.cmn-item-2-title {
    height: 38px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.cmn-item-3-title {
    height: 38px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    align-items: center;
    padding-left: 40px;
}

.cmn-item-subnav {
    display: none;
    /*padding-left: 26px;*/
}

.cmn-item-1.active > .cmn-item-subnav,
.cmn-item-2.active > .cmn-item-subnav {
    display: block !important;
    /*padding-left: 26px;*/
}

.cmn-item-1.active .cmn-item-1-title .mdi-plus-box::before,
.cmn-item-2.active .cmn-item-2-title .mdi-plus-box::before {
    content: "\f0375";
}

.nodata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 350px;
}

    .nodata p {
        font-size: 18px;
        color: #bebebe;
        margin: 25px 0 0;
    }

    .nodata i {
        font-size: 60px;
        color: #bebebe;
    }
/**************************Subscription Plan*********************/
.subs-plan {
    width: 100%;
    padding: 2rem 3rem;
}

.cp-header {
    height: 41px;
    border-bottom: 1px solid #e3e8ee;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .cp-header p {
        text-transform: uppercase;
        font-size: 1.0rem;
        margin: 0;
        font-weight: bold;
    }

.cp-body {
    display: flex;
    justify-content: space-between;
}

.cp-row {
    padding-bottom: 2rem;
}

.plan-type {
    font-size: 18px;
    font-weight: bold;
    color: #36c;
}

.plan-cost {
    font-size: 18px;
    font-weight: bold;
    color: #3d4257;
}

#divBillingInformation input[type='text'] {
    padding: 5px;
    border-radius: 6px;
    font-size: 16px;
    border: 0;
    border: 1px solid transparent;
    outline: 0;
    width: 400px;
}

#divBillingInformation .show input[type='text'] {
    border: 1px solid #d0d0d0;
}

.cp-btn {
    height: 46px;
    width: 230px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #c5c6c9;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(81,86,190,.5);
}
.preview-btn-wrap {
    width: 16%;
    margin-left: 3%;
}
.preview-btn {
    height: 46px;
    width: 100%;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #c5c6c9;
    border-radius: 8px;
    box-shadow: 0 2px 6px 0 rgba(81,86,190,.5);
    background-color: #f0f0f0;
    color: #000;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.preview-btn:hover {
    background-color: #0099ff;
    color: #fff;
    transition:all 0.5s;
}
.preview-btn svg {
    width: 20px;
    height: 16px;
    transition:all 0.5s;
    fill:black;
}
.preview-btn:hover svg {
    transition: all 0.5s;
    transform:scale(1.3);
    fill:white;
}
.cp-btn:hover {
    background-color: #09f;
    color: #fff;
}

.btn-sel-active {
    background-color: #fc0 !important;
}

.prompt-disclaimer {
    font-size: 14px !important;
}

html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    height: 100% !important;
    overflow-y: hidden;
}

.left-nav-item-wrap.active .left-nav-item .left-nav-item-icon .mdi-plus-circle-outline::before {
    content: "\f0377"
}

.add-new-btn {
    font-size: 24px;
    border: 1px solid #a9a9a9;
    border-radius: 16px;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: rgb(210,210,210);
    background: linear-gradient(0deg, rgb(229 229 229) 0%, rgb(189 189 189) 50%, rgb(229 229 229) 100%);
    color: #4c4a4a;
    font-weight: bold;
    margin-left: auto;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 12px;
}

.anct {
    height: 43px;
    border-bottom: 1px solid #f1f1f1;
    padding: 5px 10px;
}

    .anct input {
        width: 100%;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        height: 100%;
        padding: 0 5px;
    }

.add-new-lbl {
    font-size: 22px;
    color: #858585;
    cursor: pointer;
    margin-right: 3px;
    transition: all 0.5s;
    display: none;
}

.cmn-item-1-title:hover .add-new-lbl,
.cmn-item-2-title:hover .add-new-lbl,
.cmp-header .add-new-lbl {
    display: inline-block;
}

.add-new-row {
    height: 44px;
    border-top: 1px solid #d7d7d7;
    background-color: #f5f5f5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
    position: sticky;
    bottom: 0;
}

    .add-new-row input {
        width: 100%;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        height: 100%;
        padding: 0 5px;
    }

    .add-new-row i {
        font-size: 32px;
        color: #898585;
        cursor: pointer;
    }

    .add-new-row p {
        margin: 0 10px;
        font-weight: bold;
        font-size: 14px;
        color: #5f5f5f;
    }

    .add-new-row input {
        width: 1px;
        border-radius: 6px;
        border: 1px solid #e6e6e6;
        height: 36px;
        padding: 0 10px;
        flex-grow: 1;
        font-size: 14px;
    }

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

.gpt-stats {
    background-color: #fff;
    border-radius: 8px;
    /*margin: 5px;*/
}

.gpts-header {
    border-bottom: 2px solid #f1f3f4;
    padding: 5px 8px;
    display: flex;
    justify-content: space-between;
}

.dt-range {
    color: #7d7b7b;
    font-size: 11px;
    font-weight: bold;
}

.dtr-cal {
    display: flex;
}

.dtr-cal {
    color: #7d7b7b;
    font-weight: bold;
}

    .dtr-cal p {
        font-size: 13px;
    }

.stat-data {
    color: #c3c3c3;
    font-size: 12px;
    font-weight: bold;
}

    .stat-data p {
    }

.gpts-body {
    height: 170px;
    padding: 5px;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.web-visit {
    position: absolute;
    right: 5px;
    top: 5px;
    text-align: right;
}

.visit-stat {
    color: #675f55;
    font-size: 12px;
    font-weight: bold;
}

.visit-no {
    font-size: 40px;
    font-weight: bold;
    color: #0099ff;
    line-height: 36px !important;
}

.stat-graph {
    width: 100%;
    height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    .stat-graph canvas {
        width: 95% !important;
        height: 65% !important;
    }

#divRevenue {
    height: 20px;
    width: 100%;
    padding-top: 5px;
}


/*************************** Mode Panel View **************************/
.main-container-inner .result-panel.show-mode {
    display: flex;
}

    .main-container-inner .result-panel.show-mode #divResults {
        flex: 1 1 auto;
    }

.mode-panel {
    width: 0;
    overflow: hidden;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    transition: width 0.5s
}

.mode-container {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}

.main-container-inner .result-panel.show-mode .mode-panel {
    width: 350px;
    padding: 5px;
    transition: width 0.5s
}

.mode-name {
    height: 39px;
    background-color: #fafaf9;
    border-top: 1px solid #e4e2e1;
    padding: 0 5px;
    display: flex;
    align-items: center;
}

.mode-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: #09f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.mode-title {
    color: #6b6b6b;
    margin: 0 0 0 10px;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

.mode-option-wrapper {
    display: none;
}

.mode-wrapper:first-child .mode-name {
    border: 0;
}

.mode-wrapper.show-option {
    height: calc(100% - 78px);
}

    .mode-wrapper.show-option .mode-option-wrapper {
        display: block;
    }

.mode-option {
    height: 31px;
    background-color: #fff;
    border-top: 1px solid #e4e2e1;
    padding: 0 5px 0 5px;
    display: flex;
    align-items: center;
}

    .mode-option:last-child {
        border-bottom: 1px solid #e4e2e1;
    }

.mode-option-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #b0b0b0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.mode-option-title {
    color: #6b6b6b;
    margin: 0 0 0 10px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

/******************** Mode Panel Radio Button **************************/

.rad {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 26px;
    height: 26px;
}

    .rad input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.rad-chk {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #8b8b8b;
}

.rad:hover input ~ .rad-chk {
    background-color: #ccc;
}

.rad input:checked ~ .rad-chk {
    background-color: #fff;
    border: 1px solid #8b8b8b;
}

.rad-chk:after {
    content: "";
    position: absolute;
    display: none;
}

.rad input:checked ~ .rad-chk:after {
    display: block;
}

.rad .rad-chk:after {
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8b8b8b;
}
/***************************************/

/******************Voice Setting Radio Button*********************/

/*
.voice-setting [type="radio"]:checked,
.voice-setting [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
    .voice-setting [type="radio"]:checked + label,
    .voice-setting [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 15px;
        display: inline-block;
        color: #666;
    }
        .voice-setting [type="radio"]:checked + label:before,
        .voice-setting [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 100%;
            background: #fff;
        }
        .voice-setting [type="radio"]:checked + label:after,
        .voice-setting [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: #09f;
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        .voice-setting [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .voice-setting [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
*/
/***************************************/


.mode-btn-panel {
    width: calc((100% - 786px) / 2);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding: 0 50px 0 30px;
}

.main-container-inner .mode-btn-panel {
    display: flex;
}

.mode-btn-wrapper {
    position: absolute;
    right: 52px;
    transition: all 0.5s;
    display: flex;
    align-items: center;
}

.mode-btn-panel.mode-on .mode-btn-wrapper {
    position: absolute;
    right: calc(100% - 135px);
    transition: all 0.5s
}
/******************** Toggle Button ********************/
.switch-btn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

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

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

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

input:checked + .slider {
    background-color: #0099ff;
}

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

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

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

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

.mode-txt {
    margin-left: 10px;
    color: #939393;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
}


/*================================================*/

.form-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .form-file + label {
        color: #696969;
        cursor: pointer;
        background-color: white;
        display: flex;
        align-items: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0 20px;
        outline: none;
    }

        .form-file + label span {
            font-family: inherit;
        }

        .form-file + label .fa:before {
            margin-right: 10px;
            font-family: FontAwesome;
        }

.js .form-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.form-file:focus + label,
.form-file.has-focus + label,
.no-js .form-file {
    outline: none;
}

.form-file:focus + label, .form-file.has-focus + label,
.form-file + label:hover,
#fileName {
    color: #696969;
}

.mdi-attachment::before {
    transform: rotate(-90deg);
    font-size: 28px !important;
    margin-right: 10px;
}

#uploadContainer {
    display: flex;
    align-items: center;
}

#uploadProgress {
    display: none;
    margin-top: 10px;
    align-items: center;
}

#uploadAnimation {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 10px;
}

.signin-popup {
    width: 100%;
    max-width: 500px;
    position: relative;
    left: 50%;
    top: 45%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-family: "Open Sans", sans-serif;
    background-color: #fff;
    border-radius: 16px;
    padding: 20px;
}

.signin-popup-heading {
    font-family: Impact;
    font-size: 28px;
    color: #09f;
    border-bottom: 1px solid #ccc;
    padding: 0px 0 10px;
    margin-bottom: 20px;
}

.popup-closed {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 28px;
    cursor: pointer;
    color: #900;
    transition: all 0.5s;
}

    .popup-closed:hover {
        transform: scale(1.2);
        transition: all 0.5s;
    }

.persona-group {
    padding: 40px 20px 0;
    border: 3px solid #bababa;
    border-radius: 8px;
    position: relative;
    margin-bottom: 30px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.persona-block {
    display: flex;
    flex: 1;
}
/******************* Mode Panel Radio Button *************************/

.rad {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 26px;
    height: 26px;
}

    .rad input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.rad-chk {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #8b8b8b;
}

.rad:hover input ~ .rad-chk {
    background-color: #ccc;
}

.rad input:checked ~ .rad-chk {
    background-color: #fff;
    border: 1px solid #8b8b8b;
}

.rad-chk:after {
    content: "";
    position: absolute;
    display: none;
}

.rad input:checked ~ .rad-chk:after {
    display: block;
}

.rad .rad-chk:after {
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8b8b8b;
}
/***************************************/

.chk-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .chk-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
}

.chk-container:hover input ~ .checkmark {
    background-color: #ccc;
}

.chk-container input:checked ~ .checkmark {
    background-color: #2196F3;
    border-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.chk-container input:checked ~ .checkmark:after {
    display: block;
}

.chk-container .checkmark:after {
    left: 9px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*************************My Chk Container*************************/
.my-chk-container {
    display: block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 8px;
    height: 20px;
    display: flex;
    align-items: center;
}

.my-chk-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.my-chk-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #2196F3;
    border-radius: 4px;
}

.my-chk-container:hover input ~ .checkmark {
    background-color: #fff;
}

.my-chk-container input:checked ~ .checkmark {
    background-color: #fff;
    border-color: #2196F3;
}

.my-chk-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.my-chk-container input:checked ~ .checkmark:after {
    display: block;
}

.my-chk-container .checkmark:after {
    left: 7px;
    top: -5px;
    width: 6px;
    height: 14px;
    border: solid #2196F3;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/******************************************************************/
.disabled {
    filter: grayscale(1);
    pointer-events: none;
    cursor: not-allowed;
}

.hilight {
    background-color: #ffedcd;
}

.non-clickable {
    pointer-events: none;
}

/*.disabled {
    background-color: #f0f0f0;*/ /* Light gray background to indicate disabled state */
/*cursor: not-allowed;
    color: #aaa;*/ /* Light gray text color */
/*}*/
/*.disabled {
    pointer-events: none;
    opacity: 0.5;
}*/

p {
    margin: 10px 0;
}

.section-title {
    font-weight: bold;
    margin-top: 20px;
    text-decoration: underline;
}

.quote {
    font-style: italic;
    color: #555;
}

.bold {
    font-weight: bold;
}

.question {
    margin-top: 20px;
    font-style: italic;
}

.disclaimer {
    margin-top: 20px;
    font-size: 1.0em !important;
    color: gray;
    font-style: italic !important;
}

/*Mic part*/
.mic {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 40px;
    bottom: 0;
}

.mic-symbol {
    width: 30px;
    position: absolute;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.5s;
    display: none;
}

    .mic-symbol.active:hover {
        opacity: 1;
    }

    .mic-symbol.active {
        display: block;
    }

.mic:hover .mic-symbol,
.mic.active .mic-symbol {
    opacity: 1;
    transition: opacity 0.3s;
}

.circles {
    height: 100%;
    position: relative;
    width: 100%;
    display: none;
}

    .circles > div {
        animation: growAndFade 2s infinite ease-out;
        background-color: dodgerblue;
        border-radius: 50%;
        height: 100%;
        opacity: 0;
        position: absolute;
        width: 100%;
    }

    .circles .circle1 {
        animation-delay: 0.5s;
    }

    .circles .circle2 {
        animation-delay: 1s;
    }

    .circles .circle3 {
        animation-delay: 1.5s;
    }

@keyframes growAndFade {
    0% {
        opacity: 0.5;
        transform: scale(0);
    }

    100% {
        opacity: 0.0;
        transform: scale(1);
    }
}

.result-title {
    display: flex;
    justify-content: space-between;
}

.speak-loud {
    height: 30px;
    /*Remove following line to show speech button*/
    /*display: none;*/
}

    .speak-loud img {
        opacity: 0.2;
        cursor: pointer;
        display: none;
    }

        .speak-loud img:hover {
            opacity: 0.5;
        }

.result-wrapper:hover img.start-speak {
    display: block;
}

.result-wrapper:hover .speak-loud.active img.start-speak {
    display: none;
}

.stop-speak {
    display: none;
}

.speak-loud.active .stop-speak {
    display: block;
}

.speak-loud.active .start-speak {
    display: none;
}

.speak-loud2 {
    width: 32px;
    height: 32px;
    margin: 25px 0 0 0;
    display: flex;
    text-align: center;
    justify-content: center;
}

    .speak-loud2 img {
        opacity: 0.2;
        cursor: pointer;
        display: none;
        width: 24px;
        height: 24px;
    }

    .speak-loud2:hover img {
        opacity: 0.5;
    }

    .speak-loud2.active img.start-speak2 {
        display: block;
    }

    .speak-loud2.active.reading img.start-speak2 {
        display: none;
    }

    .speak-loud2.active.reading img.stop-speak2 {
        display: block;
    }

.error-msg {
    color: #cc4232;
    padding: 0;
    font-size: 12px;
    text-align: justify;
    margin: 0;
    /*display:none;*/
}

.voice-image {
    display: flex;
    align-items: center;
}

.mic-panel {
    position: absolute;
    bottom: 20px;
    width: 150px;
    display: flex;
    justify-content: space-between;
}

.mic-wrap {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ece9e9;
    cursor: pointer;
}

.close-symbol {
    width: 40px;
    position: absolute;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.5s;
}

    .close-symbol:hover {
        opacity: 1;
    }

.voice-animation {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*.voice-animation img {
    width: 100%;
}*/
.speech-circle {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #000;
    opacity: 0;
    transition: all 1s;
}

    .speech-circle.active {
        width: 60px;
        height: 60px;
        opacity: 1;
        transition: all 1s;
    }

.processing {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 1s;
}

    .processing.active {
        width: 100%;
        height: auto;
        opacity: 1;
        transition: all 1s;
    }

.response {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 1s;
}

    .response.active {
        width: 100%;
        height: auto;
        opacity: 1;
        transition: all 1s;
    }

.circle-ripple {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 1s;
}

    .circle-ripple.active {
        width: 100px;
        height: 100px;
        opacity: 1;
        transition: all 1s;
    }

.stop-speak-symbol {
    width: 40px;
    position: absolute;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.5s;
}

    .stop-speak-symbol:hover {
        opacity: 1;
    }

.stop-speak {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 1s;
}

    .stop-speak.active {
        width: 45px;
        height: 45px;
        opacity: 1;
        transition: all 1s;
    }

.voice-setting {
    padding: 0px 33px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: gray;
}

    .voice-setting label {
        padding: 5px 0;
    }

.right-panel {
    width: 52px;
    border-left: 3px solid #e5e5e5;
    height: 100%;
    display: flex;
    justify-content: space-between;
    transition: all 0.5s;
}

    .right-panel.active {
        width: 240px;
        transition: all 0.5s;
    }

.voice-panel {
    display: none;
    flex-grow: 1;
    width: 1PX;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.5s;
}

.right-panel.active .voice-panel {
    display: flex;
    transition: all 0.5s;
}

.voice-bubble {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #0099ff;
}

    .voice-bubble.ai-female {
        background: url(../images/askJubileeGPT-Logo-small.png) no-repeat center;
    }

    .voice-bubble.ai-male {
        background: url(../images/askJubileeGPT-Logo-Small-Male.png) no-repeat center;
    }

    .voice-bubble.thinking-female {
        background: url(../images/askJubileeGPT-Logo-small.png) no-repeat center;
        animation: blink 1s infinite; /* Apply the blinking animation */
    }

    .voice-bubble.thinking-male {
        background: url(../images/askJubileeGPT-Logo-Small-Male.png) no-repeat center;
        animation: blink 1s infinite; /* Apply the blinking animation */
    }

.thinking {
    width: 100px;
    height: 100px;
    background: url(../images/thinking.gif) no-repeat center;
    background-size: cover;
}

.voice-bubble.listening {
    border-radius: 39% 61% 55% 45% / 44% 37% 63% 56%;
    background: linear-gradient(134.39deg, #FFFBD6 9.97%, #302B00 87%), linear-gradient(180deg, #FF7373 0%, #4E0000 100%), linear-gradient(229.79deg, #7534FF 0%, #000000 94.19%), radial-gradient(56.26% 101.79% at 50% 0%, #8F00FF 0%, #493500 100%), linear-gradient(96.19deg, #D5B300 3.37%, #500052 96.63%);
    background-blend-mode: soft-light, color-dodge, difference, difference, normal;
    background-size: 400% 400%;
    animation: fluid-anim 3s infinite linear, gradienta 5s ease infinite;
    z-index: 1;
}

/* Keyframes for blinking effect */
@keyframes blink {
    0%, 100% {
        opacity: 1; /* Fully visible at start and end */
    }

    50% {
        opacity: 0; /* Fully transparent at the middle */
    }
}

@keyframes gradienta {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes fluid-anim {
    0% {
        border-radius: 39% 61% 55% 45% / 44% 37% 63% 56%;
    }

    25% {
        border-radius: 45% 55% 48% 52% / 60% 36% 64% 40%;
    }

    50% {
        border-radius: 56% 44% 28% 72% / 46% 63% 37% 54%;
    }

    75% {
        border-radius: 62% 38% 37% 63% / 39% 32% 68% 61%;
    }

    100% {
        border-radius: 39% 61% 55% 45% / 44% 37% 63% 56%;
    }
}

.mic-panel {
    position: absolute;
    bottom: 80px;
    width: 100px;
    display: flex;
    justify-content: space-between;
}

.mic-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b9b9b9;
}

.mic-on {
    background-color: #198ce9;
    display: none !important;
}

    .mic-on.active {
        display: flex !important;
    }

.mic-off {
    background-color: rgba(252, 66, 51, 0.3);
    display: none !important;
}

    .mic-off.active {
        display: flex !important;
    }

.lang-panel {
    width: 52px;
    background-color: #fff;
    border-radius: 0 6px 6px 0;
    transition: all 0.5s;
    padding: 2px 2px 2px 0;
}

.right-panel.active .lang-panel {
    border-left: 3px solid #e5e5e5;
    transition: all 0.5s;
}

.voice-icon {
    cursor: pointer;
}

.voice-mode {
    width: 36px;
    height: 36px;
    background-color: #a6a6a6;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    border: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
}

    .voice-mode.active {
        display: flex;
    }

.file-attach {
    width: 36px;
    height: 36px;
    background-color: #a6a6a6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    position: absolute;
    right: 56px;
    bottom: 10px;
    cursor: pointer;
}

    .file-attach.active {
    }

.voice-changer {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    justify-content: space-between;
    width: 158px;
}

.male-voice,
.female-voice,
.vp-close {
    display: none;
    cursor: pointer;
}

    .male-voice.active,
    .female-voice.active,
    .vp-close.active {
        display: inline-block;
    }

.sp-lang-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 0.5s;
}

.right-panel.active .sp-lang-wrapper {
    width: auto;
    height: auto;
    opacity: 1;
    transition: all 0.5s;
}

.sp-lang-wrapper .flag-icon {
    margin-bottom: 5px;
    filter: grayscale(1);
    cursor: pointer;
    border: 1px solid #c2c2c2;
    transform: scale(1);
    opacity: 0.4;
}

    .sp-lang-wrapper .flag-icon:hover {
        filter: none;
        opacity: 1;
    }

    .sp-lang-wrapper .flag-icon.active {
        filter: none;
        opacity: 1;
        z-index: 1;
    }
/*.sp-lang-wrapper .flag-icon:hover::after {
        content: attr(title);
        color: blue;
        position: absolute;
        top: 35px;
        left: -13px;
        border-bottom: 0 none transparent;
        background-color: #fff;
        font-size:14px;
    }*/


.right-panel .open-voice-mode {
    width: 36px;
    opacity: 1;
    transition: all 0.5s;
}

.open-voice-mode:hover {
    transform: scale(1.1);
    transition: all 0.5s;
}

.right-panel.active .open-voice-mode {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 0.5s;
}

.new-chat {
    height: 36px;
    width: 36px;
    border-radius: 6px;
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dddddd;
    padding-left: 2px;
    cursor: pointer;
}
/************* Scrollbar CSS **********/
.scrollbar-macosx > .scroll-element .scroll-bar {
    background-color: #cecece !important;
}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar {
    left: -7px !important;
}

.scroll-wrapper {
    height: 100%;
}
/************* END Scrollbar CSS **********/

/******************************* Chapter Sprite **********************************/
.book-content {
    height: 100%;
}

.chapter-sprite {
    padding: 10px;
    height: 100%;
}

.book-cover {
    width: 100%;
    height: auto;
    /*background:url(../images/genesis-book-cover.jpg) no-repeat center / cover;*/
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

    .book-cover img {
        width: 100%;
    }

.book-title {
    position: absolute;
    right: 80px;
    bottom: 30px;
    color: #fff;
    font-family: "Times New Roman", Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
}

.ch-section {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.ch-img {
    background-image: url(../images/books/genesis-chapter-srite.jpg?v=1);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 132px;
    height: 240px;
    margin: 0 4px 4px 0;
    border-radius: 12px;
}

.ch-1 {
    background-position: 0 0;
}

.ch-2 {
    background-position: -142px 0;
}

.ch-3 {
    background-position: -282px 0;
}

.ch-4 {
    background-position: -422px 0;
}

.ch-5 {
    background-position: -562px 0;
}

.ch-6 {
    background-position: -702px 0;
}

.ch-7 {
    background-position: -842px 0;
}

.ch-8 {
    background-position: -982px 0;
}

.ch-9 {
    background-position: -1122px 0;
}

.ch-10 {
    background-position: -1262px 0;
}

.ch-11 {
    background-position: 0px -250px;
}

.ch-12 {
    background-position: -142px -250px;
}

.ch-13 {
    background-position: -282px -250px;
}

.ch-14 {
    background-position: -422px -250px;
}

.ch-15 {
    background-position: -562px -250px;
}

.ch-16 {
    background-position: -702px -250px;
}

.ch-17 {
    background-position: -842px -250px;
}

.ch-18 {
    background-position: -982px -250px;
}

.ch-19 {
    background-position: -1122px -250px;
}

.ch-20 {
    background-position: -1262px -250px;
}

.ch-21 {
    background-position: 0px -500px;
}

.ch-22 {
    background-position: -142px -500px;
}

.ch-23 {
    background-position: -282px -500px;
}

.ch-24 {
    background-position: -422px -500px;
}

.ch-25 {
    background-position: -562px -500px;
}

.ch-26 {
    background-position: -702px -500px;
}

.ch-27 {
    background-position: -842px -500px;
}

.ch-28 {
    background-position: -982px -500px;
}

.ch-29 {
    background-position: -1122px -500px;
}

.ch-30 {
    background-position: -1262px -500px;
}

.ch-31 {
    background-position: 0px -756px;
}

.ch-32 {
    background-position: -140px -756px;
}

.ch-33 {
    background-position: -282px -756px;
}

.ch-34 {
    background-position: -422px -756px;
}

.ch-35 {
    background-position: -562px -756px;
}

.ch-36 {
    background-position: -702px -756px;
}

.ch-37 {
    background-position: -842px -756px;
}

.ch-38 {
    background-position: -982px -756px;
}

.ch-39 {
    background-position: -1122px -756px;
}

.ch-40 {
    background-position: -1262px -756px;
}

.ch-41 {
    background-position: 0 -1006px;
}

.ch-42 {
    background-position: -140px -1006px;
}

.ch-43 {
    background-position: -280px -1006px;
}

.ch-44 {
    background-position: -420px -1006px;
}

.ch-45 {
    background-position: -560px -1006px;
}

.ch-46 {
    background-position: -700px -1006px;
}

.ch-47 {
    background-position: -840px -1006px;
}

.ch-48 {
    background-position: -980px -1006px;
}

.ch-49 {
    background-position: -1120px -1006px;
}

.ch-50 {
    background-position: -1260px -1006px;
}

/*********************************************************************************/

.plan-container {
    margin-bottom: 30px;
}


.response-controls {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: -12px;
    visibility: hidden;
}

.user-response:hover .response-controls {
    visibility: visible;
}

.response-controls span.tooltip {
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 4px;
    padding-top: 3px;
    margin: 0 3px;
    cursor: pointer;
}

    .response-controls span.tooltip:hover {
        background-color: #f1f1f1;
    }

.response-controls span img {
    width: 18px;
}

.read-response,
.process-response,
.stop-read-response,
.copy-response,
.response-copied {
    display: none;
}

    .read-response.active,
    .stop-read-response.active,
    .process-response.active,
    .copy-response.active,
    .response-copied.active {
        display: inline-block;
    }
.thumbs-up svg,
.thumbs-down svg {
    width: 20px;
    height: 20px;
}
.thumbs-up svg path,
.thumbs-down svg path{
    fill: #b9b9b9;
}
.thumbs-up.liked svg path,
.thumbs-down.disliked svg path {
    fill: #09f;
}
.tooltip {
    position: relative;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: auto;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 3px 5px;
        position: absolute;
        z-index: 1;
        top: 120%;
        left: 50%;
        font-size: 11px;
        white-space: nowrap;
        transform: translateX(-50%);
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.countrytooltip {
    min-width: 80px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 5px 5px;
    position: absolute;
    right: 52px;
    font-size: 12px;
    display: none;
    z-index: 1;
}

.countrytooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

/************************** Custom Popup ***************************/
.cust-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 10;
}

.cust-popup {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 4px;
    border: 3px solid #fff;
    position: relative;
}

.cust-popup-inner {
    background-color: #4e9bea;
    min-height: 140px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: relative;
}

.popup-header p {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.popup-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.popup-inner {
    padding: 20px 20px 10px;
}
#responsePreview {
    min-height:80px;
    max-height:200px;
    overflow:auto;
}
.video-popup {
    width: 90%;
    max-width: 800px;
    border: 3px solid #09f;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    max-height: 80%;
}

.profile-popup {
    width: 100%;
    max-width: 500px;
    margin: 50px auto;
    border: 3px solid #09f;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.video-msg-panel {
    display: flex;
    padding: 10px 20px;
    align-items: center;
}

.video-msg-txt {
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    margin: 0 10px;
}

.video-msg-btn {
    background-color: #09f;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    text-align: center;
    color: #fff;
    width: 200px;
    cursor: pointer;
    border: 2px solid #09f;
    transition: all 0.3s;
}

    .video-msg-btn:hover {
        background-color: #fff;
        color: #09f;
        transition: all 0.3s;
    }

.close-video-popup {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    z-index: 1;
}

    .close-video-popup img {
        transition: all 0.3s;
    }

    .close-video-popup:hover img {
        transform: rotate(90deg) scale(1.1);
        transition: all 0.3s;
    }

.close-video-popup-share {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    z-index: 1;
}

    .close-video-popup-share img {
        transition: all 0.3s;
    }

    .close-video-popup-share:hover img {
        transform: rotate(90deg) scale(1.1);
        transition: all 0.3s;
    }

.close-video-popup-mp4 {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 1;
}

    .close-video-popup-mp4 img {
        transition: all 0.3s;
    }

    .close-video-popup-mp4:hover img {
        transform: rotate(90deg) scale(1.1);
        transition: all 0.3s;
    }

.popup-icon {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-header-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

    .popup-header-icon img {
        margin: 0;
    }

.gpt-img {
    width: 100px;
}

    .gpt-img img {
        width: 100%;
    }

.popup-content {
    margin-left: 20px;
}

    .popup-content p {
        font-size: 22px;
        color: #fff;
    }

p.popup-content-heading {
    font-family: 'Agency FB';
    font-size: 40px;
    font-weight: bold;
    color: #78716c;
    margin: 0 0 10px;
}

p.popup-text {
    font-family: Arial;
    font-size: 16px;
    margin: 0;
    line-height: 24px;
    font-weight: bold;
    color: #78716c;
}

.popup-content small {
    font-size: 16px;
    color: #fff;
}

.popup-btn-panel {
    display: flex;
    justify-content: flex-end;
    padding: 12px;
}

    .popup-btn-panel button {
        background-color: #4e9bea;
        border: 2px solid #4e9bea;
        border-radius: 6px;
        color: #fff;
        font-size: 13px;
        text-align: center;
        margin-left: 10px;
        text-transform: uppercase;
        min-width: 140px;
        height: 30px;
        padding: 5px 10px;
    }

        .popup-btn-panel button:hover {
            background-color: #fff;
            color: #4e9bea;
        }

        .popup-btn-panel button svg {
            margin-right: 5px;
            stroke: #fff;
        }

        .popup-btn-panel button:hover svg {
            stroke: #4e9bea;
        }
        .popup-btn-panel button svg.upload-svg {
            fill:#fff;
        }
        .popup-btn-panel button:hover svg.upload-svg {
            fill: #4e9bea;
        }
        .cust-popup-inner:before {
            position: absolute;
            background: none;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-right: 20px solid #ffffff;
            border-bottom: 20px solid transparent;
            content: '';
        }

.cust-popup-inner:after {
    position: absolute;
    background: none;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    content: '';
}

.fixTableHead {
    position: relative;
}

    .fixTableHead thead {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .fixTableHead table {
        border-collapse: collapse;
        width: 100%;
    }

    .fixTableHead th,
    .fixTableHead td {
        padding: 10px 8px;
        border-bottom: 2px solid #e5e5e5;
        vertical-align: top;
        background-color: #fff;
        position: relative;
    }

    .fixTableHead th {
        padding-top: 40px;
        padding-bottom: 80px;
    }

        .fixTableHead th::after {
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: 2px solid #e5e5e5;
            content: '';
            width: 100%;
        }

    .fixTableHead h2.plan-price {
        font-size: 24px;
        position: absolute;
        bottom: 50px;
        margin: 0;
        color: #000;
    }

    .fixTableHead h3 {
        font-size: 18px;
        text-align: left;
        margin-bottom: 2px;
    }

    .fixTableHead h4 {
        text-align: left;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .fixTableHead p {
        font-weight: normal;
        font-size: 12px;
        text-align: justify;
        margin-top: 0;
    }

    .fixTableHead th p {
        text-align: left;
    }

button.getstarted,
a.getstarted {
    background-color: #cbcbcb;
    border: 0;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    display: block;
    text-align: center;
}

.fixTableHead th button.getstarted,
.fixTableHead th a.getstarted {
    width: calc(100% - 20px);
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.fixTableHead th.recommended-plan button.getstarted,
.fixTableHead td.recommended button.getstarted,
.fixTableHead th.active-plan button.getstarted,
.fixTableHead td.active button.getstarted,
.fixTableHead th.active-plan a.getstarted,
.fixTableHead td.active a.getstarted {
    background-color: #38b6ff;
    color: #fff;
}

.fixTableHead button.getstarted:hover {
    background-color: #38b6ff;
}

.fixTableHead td.recommended {
    border-right: 2px solid #ffbd59;
    border-left: 2px solid #ffbd59;
    background-color: #ffdf9e;
}

.fixTableHead td.active {
    border-right: 2px solid #38b6ff;
    border-left: 2px solid #38b6ff;
    background-color: #e2f4ff;
}

td.yes::before {
    position: absolute;
    left: 50%;
    top: 50%;
    content: '\2713';
    font-size: 20px;
    color: #757575;
    margin-top: -10px;
    margin-left: -7px;
}

td.recommended.yes::before {
    color: #ff4b03;
}

th.recommended-plan {
    border-right: 2px solid #ffbd59;
    border-left: 2px solid #ffbd59;
    background-color: #ffdf9e;
    position: relative;
}

th.active-plan {
    border-right: 2px solid #38B6FF;
    border-left: 2px solid #38B6FF;
    background-color: #e2f4ff;
    position: relative;
}

th.recommended-plan::before {
    position: absolute;
    left: -2px;
    top: 0;
    width: calc(100% + 4px);
    background-color: #ffffff;
    content: '';
    height: 7px;
}

th.active-plan::before {
    position: absolute;
    left: -2px;
    top: 0;
    width: calc(100% + 4px);
    background-color: #fff;
    content: '';
    height: 7px;
}

th.recommended-plan::after {
    position: absolute;
    left: -1px;
    top: 3px;
    width: calc(100% + 3px);
    background-color: #ffbd59;
    content: 'Recommended';
    text-align: center;
    color: #000;
    font-size: 11px;
    height: 17px;
    border-radius: 4px 4px 0 0;
    padding-top: 6px;
    text-transform: uppercase;
    border: 0;
}

th.active-plan::after {
    position: absolute;
    left: -1px;
    top: 3px;
    width: calc(100% + 3px);
    background-color: #38b6ff;
    content: 'Active Plan';
    text-align: center;
    color: #fff;
    font-size: 11px;
    height: 17px;
    border-radius: 4px 4px 0 0;
    padding-top: 6px;
    text-transform: uppercase;
    border: 0;
}

.plan-switcher {
    display: flex;
    align-items: center;
}

    .plan-switcher span {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bold;
    }

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0 8px;
}

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

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

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

input:checked + .slider {
    background-color: #545454;
}

input:focus + .slider {
    box-shadow: 0 0 1px #545454;
}

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

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

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

.free-plan {
    background-color: #ffbd59;
    text-align: center;
    font-size: 11px;
    color: #545454;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: 'Agency FB', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 20px;
}

.backtohome {
    position: absolute;
    top: 5px;
    left: 10px;
    display: flex;
    align-items: center;
    color: #cbcbcb;
}

.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

    .close-icon:hover {
        background-color: #ddd;
        color: #000;
    }

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.custom-tooltip {
    visibility: hidden;
    width: 140px; /* Adjust the width as needed */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    top: 50%; /* Center vertically relative to the SVG */
    right: 110%; /* Position to the left of the SVG */
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

    .custom-tooltip::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%; /* Align the arrow to the right of the tooltip */
        transform: translateY(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #333; /* Arrow pointing to the left */
    }

.tooltip-container:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

.share-chat {
    width: 88px;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    color: #000;
    position: absolute;
    right: 20px;
    top: 17px;
    align-items: center;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    background-color: #fff;
    z-index: 1;
}

    .share-chat:hover {
        background-color: #ebebeb;
    }

    .share-chat img {
        width: 18px;
        margin-right: 5px;
    }

.share-popup {
    width: 100%;
    max-width: 550px;
    background-color: #fff;
    border-radius: 16px;
}

.share-popup-header {
    padding: 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-weight: bold;
    font-size: 18px;
}

    .share-popup-header p {
        margin: 0;
    }

.share-popup-body {
    padding: 20px;
}

    .share-popup-body p {
        margin: 0;
    }

.share-chat-txtbox {
    height: 68px;
    border: 1px solid #ccc;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    overflow: hidden;
}

    .share-chat-txtbox input[type='text'] {
        color: #868686;
        margin: 0;
        height: 100%;
        width: 1px;
        flex-grow: 1;
        font-size: 18px;
        border: 0;
        outline: none;
    }

.link-btn {
    width: 136px;
    height: 50px;
    border-radius: 36px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 5px 10px #fff;
}

    .link-btn img {
        width: 16px;
        margin-right: 8px;
    }

.newchat-tab {
    height: 35px;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding: 0 5px 0 20px;
    margin: 1px 0;
    position: relative;
    justify-content: center;
    display: none;
}

.newchat-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: #09f;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 20px;
    margin: 0 2px;
    border-radius: 24px;
    transition: all 0.5s;
    outline: none;
    border: 0;
    cursor: pointer;
}

.token-txt {
    display: flex;
    align-items: center;
}

    .token-txt p {
        font-size: 11px;
        font-weight: bold;
        margin: 0 0 0 2px;
        text-align: left;
    }

        .token-txt p small {
            font-size: 10px;
            font-weight: normal;
            display: block;
            margin-top: 2px;
        }
/************************* Manage Memory Start ************************/
.mm-wrapper {
    background-color: #fff;
    height: 100%;
    width: 1px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mm-wrapper-inner {
    height: 1px;
    flex-grow: 1;
}

.section-heading {
    /*border-bottom: 2px solid #ccc;*/
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    height: 30px;
    margin: 0 5px;
}

.mm-item-title {
    height: 36px;
    border-bottom: 2px solid #ccc;
    display: flex;
    align-items: center;
    margin: 0 15px;
}

.section-heading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-item-title p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.add-items {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.add-items span {
    cursor: pointer;
    margin-right: 4px;
}
.add-items .more-options  span {
    margin: 0;
}
    .add-items img {
    width: 20px;
}

.mm-item-nav-row {
    height: 36px;
    border-bottom: 2px solid #ccc;
    padding: 0 10px 0 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
}

    .mm-item-nav-row .add-items {
        display: flex;
        position:relative;
    }
.more-options {
    position: absolute;
    right: 30px;
    top: -30px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    width: 40px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    flex-direction:column;
    z-index:1;
}
    .more-options:before {
        position: absolute;
        right: -7px;
        top: 33px;
        width: 0;
        height: 0;
        border-right: 15px solid #272727;
        border-bottom: 15px solid transparent;
        content: '';
        transform: rotate(45deg);
    }
.more-options:after {
    position: absolute;
    right: -7px;
    top: 33px;
    width: 0;
    height: 0;
    border-right: 15px solid #fff;
    border-bottom: 15px solid transparent;
    content: '';
    transform: rotate(45deg);
}
.more-options-item {
    padding: 2px 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.more-options-item:hover {
    background-color: #ffedcd;
}
.more-options-item p {
    display:none;
}
.more-options-item:last-child {
    border: 0;
}

/*.mm-item-nav-row:hover .add-items {
    display: flex;
}*/

.mm-item-lvl-1 {
    padding-left: 25px;
}

.mm-item-lvl-2 {
    padding-left: 45px;
}

.mm-item-lvl-3 {
    padding-left: 65px;
}

.mm-item-lvl-4 {
    padding-left: 85px;
}

.mm-item-lvl-5 {
    padding-left: 105px;
}

.mm-item-nav-row:hover,
.mm-item-nav-row.selected,
.mm-item-nav-row.activeRow {
    background-color: #ffedcd;
}
/*.mm-item-nav-row + .mm-item-nav {
    display: none !important;
}
.mm-item-nav-row.active + .mm-item-nav {
    display: block !important;
}*/
/*#SubFolderID_1 + #navitem_1,
#SubFolderID_2 + #navitem_2,
#SubFolderID_3 + #navitem_3,
#SubFolderID_4 + #navitem_4,
#SubFolderID_5 + #navitem_5 {
    display: none !important;
}
#SubFolderID_1.active + #navitem_1,
#SubFolderID_2.active + #navitem_2,
#SubFolderID_3.active + #navitem_3,
#SubFolderID_4.active + #navitem_4,
#SubFolderID_5.active + #navitem_5 {
    display: block !important;
}*/
.mm-item-nav-row p {
    font-size: 13px;
    margin: 0;
    cursor: pointer;
    width: 1px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-item-nav-row input[type="text"] {
    height: 80%;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 1px;
    flex-grow: 1;
    outline: none;
}

    .mm-item-nav-row input[type="text"].edit-txt {
        padding: 0 10px;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
    }

        .mm-item-nav-row input[type="text"].edit-txt:focus {
            outline: auto;
        }

/*-----------------------------------------*/
.mm-item-title input[type="text"] {
    height: 80%;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 1px;
    flex-grow: 1;
    outline: none;
}

    .mm-item-title input[type="text"].edit-txt {
        padding: 0 10px;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
    }

        .mm-item-title input[type="text"].edit-txt:focus {
            outline: auto;
        }
.mm-row-trash {
    margin-left: auto;
    cursor: pointer;
    display: none;
}

.mm-item-nav-row:hover .mm-row-trash {
    display: block;
}

.mm-item-nav {
    display: none;
}

.mm-item.active .mm-item-nav {
    display: block;
}

.mm-nav-icon {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 2px;
    margin-right: 5px;
    cursor: pointer;
}

    .mm-nav-icon:hover {
        background-color: #969696;
    }

.mm-item-nav-row-icon {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

    .mm-item-nav-row-icon img {
        width: 18px;
        margin:0 5px;
        filter: invert(30%) sepia(40%) saturate(10%) hue-rotate(314deg) brightness(130%) contrast(100%);
    }

.mm-collapse {
    display: none;
}

.mm-item.active .mm-collapse {
    display: flex;
}

.mm-item.active .mm-expand {
    display: none;
}

.edit-form-wrap {
    padding: 10px 2px 0 0;
    display: flex;
    flex-direction: column;
    height: 1px;
    flex-grow: 1;
    position:relative;
}

.edit-container {
    margin: 10px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

    .edit-container p {
        font-size: 14px;
        line-height: 18px;
        text-align: justify;
    }

.edit-panel {
    width: 52px;
    border-left: 3px solid #e5e5e5;
    height: 100%;
    display: flex;
    justify-content: space-between;
    transition: all 0.5s;
    overflow: hidden;
}

    .edit-panel.active {
        width: 410px;
        transition: all 0.5s;
    }

.field-wrap {
    min-height: 46px;
    margin-bottom: 10px;
    position: relative;
}

.field-lbl {
    position: absolute;
    left: 10px;
    font-size: 11px;
    font-family: arial;
    top: 5px;
    color: #b2b2b2;
    font-weight: bold;
}

.txt-box {
    height: 100%;
    width: 100%;
    border: 2px solid #979797;
    border-radius: 8px;
    padding: 12px 10px 12px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #3d3d3d;
    outline: none;
}

.drop-box {
    height: 100%;
    width: 100%;
    border: 2px solid #979797;
    border-radius: 8px;
    padding: 15px 10px 10px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #3d3d3d;
}

.text-area {
    height: 100%;
    width: 100%;
    border: 2px solid #979797;
    border-radius: 8px;
    padding: 16px 10px 8px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #3d3d3d;
    outline: none;
}

.share-link-icon {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 26px;
    cursor: copy;
    transition: all 0.5s;
}

    .share-link-icon:hover {
        transform: scale(1.1);
        transition: all 0.5s;
    }

.share-link .txt-box {
    padding-right: 40px;
}
/*.redirect .txt-box {
    padding-right: 40px;
}*/
.qr-container {
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    border: 2px solid #979797;
    border-radius: 8px;
    position: absolute;
    right: 0px;
    top: 0;
    color: #b2b2b2;
}

.redirect-qr {
    position: absolute;
    right: 0px;
    top: 0;
    width: 44px;
    transition: width 0.5s;
    z-index: 1;
    cursor: zoom-in;
}
/*.redirect-qr:hover {
    width: 100px;
    transition: width 0.5s;
}*/
.redirect .txt-box {
    width: calc(100% - 50px);
}

#parausermemory {
    padding: 5px;
    border-radius: 8px;
}

    #parausermemory:focus {
        outline: 1px solid #000;
    }

.right-bar {
    width: 52px;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.edit-panel-inner {
    width: 1px;
    flex-grow: 1;
    display: none;
}

.close-edit-panel {
    display: none;
}

.edit-panel.active .edit-panel-inner {
    display: flex;
    flex-direction: column;
}

.edit-panel.active .right-bar {
    border-left: 3px solid #e5e5e5;
}

.edit-panel.active .close-edit-panel {
    display: block;
}

.edit-panel.active .edit-icon {
    display: none;
}
/************************* Manage Memory End ************************/

/************************* Share Redirector Starts ************************/
.mm-row-switch {
    width: 50px;
    margin-left: auto;
    text-align: right;
}

    .mm-row-switch .switch {
        width: 38px;
        height: 20px;
        margin: 0;
    }

    .mm-row-switch input:checked + .slider {
        background-color: #0099ff;
    }

    .mm-row-switch .slider:before {
        height: 18px;
        width: 18px;
        left: 1px;
        bottom: 1px;
    }

    .mm-row-switch input:checked + .slider:before {
        -webkit-transform: translateX(18px);
        -ms-transform: translateX(18px);
        transform: translateX(18px);
    }
.file-upload-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding: 5px 0;
}
/************************* Share Redirector Services End ************************/
/************************Drop Zone CSS Starts*********************/
#dropzone {
    height: 1px;
    flex-grow: 1;
}

.dropzone {
    height: 100%;
    min-height:220px !important;
    background: url("/images/hand-pointer.svg") no-repeat center 10px #fff !important;
    background-size: 60% !important;
    border: 0 !important;
    text-align: center;
    padding: 10px 10px !important;
}

    .dropzone .dz-preview .dz-success-mark,
    .dropzone .dz-preview .dz-error-mark {
        opacity: 1 !important;
    }

    .dropzone .dz-preview .dz-details {
        font-size: 10px;
    }
/************************Drop Zone CSS Ends *********************/
.control-center {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row-reverse;
    right: 15px;
    top: 17px;
}

.option-btn {
    background-color: #09f;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    box-shadow: 0px 0px 12px 2px rgba(103, 194, 255, 0.6);
    position: relative;
    cursor: pointer;
    z-index: 9;
    transition: all 0.3s;
}

    .option-btn:hover {
        transform: scale(1.1);
        transition: all 0.5s;
    }

    .option-btn:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        visibility: visible;
        transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
        background-position: center center;
        background-size: 20px;
        background-repeat: no-repeat;
        background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUyNS4xNTIgNTI1LjE1MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTI1LjE1MiA1MjUuMTUyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij4KPGc+Cgk8cGF0aCBkPSJNNDIwLjczNSwzNzEuMjE3Yy0yMC4wMjEsMC0zNy45NDIsNy44NTUtNTEuNTk2LDIwLjI0TDE4MS4xMTIsMjgyLjA5NGMxLjM1Ny02LjA2MSwyLjQwNy0xMi4xNjYsMi40MDctMTguNDY4ICAgYzAtNi4zMDItMS4wNzItMTIuMzg1LTIuNDA3LTE4LjQ2OGwxODUuOTA0LTEwOC4zMzVjMTQuMTc5LDEzLjEyOSwzMi45MzEsMjEuMzM0LDUzLjcxOSwyMS4zMzQgICBjNDMuODI4LDAsNzkuMTQ1LTM1LjI1MSw3OS4xNDUtNzkuMDc5QzQ5OS44OCwzNS4zMzgsNDY0LjU0MSwwLDQyMC43MzUsMGMtNDMuNzQxLDAtNzkuMDc5LDM1LjMzOC03OS4wNzksNzkuMDU3ICAgYzAsNi4zODksMS4wNzIsMTIuMzg1LDIuNDA3LDE4LjQ2OEwxNTguMTU4LDIwNS45NDdjLTE0LjIwMS0xMy4xOTQtMzIuOTMxLTIxLjM3OC01My43NDEtMjEuMzc4ICAgYy00My44MjgsMC03OS4xNDUsMzUuMzE3LTc5LjE0NSw3OS4wNTdzMzUuMzE3LDc5LjA3OSw3OS4xNDUsNzkuMDc5YzIwLjc4NywwLDM5LjU0LTguMjA2LDUzLjcxOS0yMS4zMzRsMTg3LjY5OCwxMDkuNjA0ICAgYy0xLjI5MSw1LjU4LTIuMTAxLDExLjQtMi4xMDEsMTcuMTk5YzAsNDIuNDUsMzQuNTk0LDc2Ljk3OSw3Ni45NzksNzYuOTc5YzQyLjQyOCwwLDc3LjA0NC0zNC41MDcsNzcuMDQ0LTc2Ljk3OSAgIFM0NjMuMTYzLDM3MS4yMTcsNDIwLjczNSwzNzEuMjE3eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    }

    .option-btn:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 16px;
        background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ljk3MSA0Ny45NzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3Ljk3MSA0Ny45NzE7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0yOC4yMjgsMjMuOTg2TDQ3LjA5Miw1LjEyMmMxLjE3Mi0xLjE3MSwxLjE3Mi0zLjA3MSwwLTQuMjQyYy0xLjE3Mi0xLjE3Mi0zLjA3LTEuMTcyLTQuMjQyLDBMMjMuOTg2LDE5Ljc0NEw1LjEyMSwwLjg4ICAgYy0xLjE3Mi0xLjE3Mi0zLjA3LTEuMTcyLTQuMjQyLDBjLTEuMTcyLDEuMTcxLTEuMTcyLDMuMDcxLDAsNC4yNDJsMTguODY1LDE4Ljg2NEwwLjg3OSw0Mi44NWMtMS4xNzIsMS4xNzEtMS4xNzIsMy4wNzEsMCw0LjI0MiAgIEMxLjQ2NSw0Ny42NzcsMi4yMzMsNDcuOTcsMyw0Ny45N3MxLjUzNS0wLjI5MywyLjEyMS0wLjg3OWwxOC44NjUtMTguODY0TDQyLjg1LDQ3LjA5MWMwLjU4NiwwLjU4NiwxLjM1NCwwLjg3OSwyLjEyMSwwLjg3OSAgIHMxLjUzNS0wLjI5MywyLjEyMS0wLjg3OWMxLjE3Mi0xLjE3MSwxLjE3Mi0zLjA3MSwwLTQuMjQyTDI4LjIyOCwyMy45ODZ6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
    }

    .option-btn.open:after {
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
    }

    .option-btn.open:before {
        opacity: 1;
        visibility: visible;
        transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
    }

.left-sidebar {
    list-style: none;
    background-color: #09f;
    height: 34px;
    padding: 0 20px 0 20px;
    margin: 0;
    margin-right: -25px;
    border-radius: 28px;
    box-shadow: 0px 2px 20px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

    .left-sidebar li {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 20px;
        height: 100%;
        width: 24px;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        opacity: 0;
    }

        .left-sidebar li:nth-child(5) {
            background-image: url('data:image/svg+xml,<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.50002 12C3.50002 7.30558 7.3056 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C10.3278 20.5 8.77127 20.0182 7.45798 19.1861C7.21357 19.0313 6.91408 18.9899 6.63684 19.0726L3.75769 19.9319L4.84173 17.3953C4.96986 17.0955 4.94379 16.7521 4.77187 16.4751C3.9657 15.176 3.50002 13.6439 3.50002 12ZM12 1.5C6.20103 1.5 1.50002 6.20101 1.50002 12C1.50002 13.8381 1.97316 15.5683 2.80465 17.0727L1.08047 21.107C0.928048 21.4637 0.99561 21.8763 1.25382 22.1657C1.51203 22.4552 1.91432 22.5692 2.28599 22.4582L6.78541 21.1155C8.32245 21.9965 10.1037 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5ZM14.2925 14.1824L12.9783 15.1081C12.3628 14.7575 11.6823 14.2681 10.9997 13.5855C10.2901 12.8759 9.76402 12.1433 9.37612 11.4713L10.2113 10.7624C10.5697 10.4582 10.6678 9.94533 10.447 9.53028L9.38284 7.53028C9.23954 7.26097 8.98116 7.0718 8.68115 7.01654C8.38113 6.96129 8.07231 7.046 7.84247 7.24659L7.52696 7.52195C6.76823 8.18414 6.3195 9.2723 6.69141 10.3741C7.07698 11.5163 7.89983 13.314 9.58552 14.9997C11.3991 16.8133 13.2413 17.5275 14.3186 17.8049C15.1866 18.0283 16.008 17.7288 16.5868 17.2572L17.1783 16.7752C17.4313 16.5691 17.5678 16.2524 17.544 15.9269C17.5201 15.6014 17.3389 15.308 17.0585 15.1409L15.3802 14.1409C15.0412 13.939 14.6152 13.9552 14.2925 14.1824Z" fill="%23ffffff"/></svg>');
            background-size: 24px;
        }

        .left-sidebar li:nth-child(4) {
            background-image: url('data:image/svg+xml,<svg width="24px" height="24px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="%23ffffff" stroke-width="12" d="M96 162c-14.152 0-24.336-.007-32.276-.777-7.849-.761-12.87-2.223-16.877-4.741a36 36 0 0 1-11.33-11.329c-2.517-4.007-3.98-9.028-4.74-16.877C30.007 120.336 30 110.152 30 96c0-14.152.007-24.336.777-32.276.76-7.849 2.223-12.87 4.74-16.877a36 36 0 0 1 11.33-11.33c4.007-2.517 9.028-3.98 16.877-4.74C71.663 30.007 81.847 30 96 30c14.152 0 24.336.007 32.276.777 7.849.76 12.87 2.223 16.877 4.74a36 36 0 0 1 11.329 11.33c2.518 4.007 3.98 9.028 4.741 16.877.77 7.94.777 18.124.777 32.276 0 14.152-.007 24.336-.777 32.276-.761 7.849-2.223 12.87-4.741 16.877a36 36 0 0 1-11.329 11.329c-4.007 2.518-9.028 3.98-16.877 4.741-7.94.77-18.124.777-32.276.777Z"/><circle cx="96" cy="96" r="30" stroke="%23ffffff" stroke-width="12"/><circle cx="135" cy="57" r="9" fill="%23ffffff"/></svg>');
            background-size: 28px;
        }

        .left-sidebar li:nth-child(3) {
            background-image: url('data:image/svg+xml,<svg fill="%23ffffff" width="28px" height="28px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M21.95 5.005l-3.306-.004c-3.206 0-5.277 2.124-5.277 5.415v2.495H10.05v4.515h3.317l-.004 9.575h4.641l.004-9.575h3.806l-.003-4.514h-3.803v-2.117c0-1.018.241-1.533 1.566-1.533l2.366-.001.01-4.256z"/></svg>');
            background-size: 32px;
        }

        .left-sidebar li:nth-child(2) {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="30px" height="30px" fill-rule="nonzero"><g fill="%23ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8.53333,8.53333)"><path d="M26.37,26l-8.795,-12.822l0.015,0.012l7.93,-9.19h-2.65l-6.46,7.48l-5.13,-7.48h-6.95l8.211,11.971l-0.001,-0.001l-8.66,10.03h2.65l7.182,-8.322l5.708,8.322zM10.23,6l12.34,18h-2.1l-12.35,-18z"></path></g></g></svg>');
            background-size: 28px;
        }

        .left-sidebar li:nth-child(1) {
            background-image: url('data:image/svg+xml,<svg width="24px" height="24px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-180.000000, -7479.000000)" fill="%23ffffff"><g id="icons" transform="translate(56.000000, 160.000000)"><path d="M144,7339 L140,7339 L140,7332.001 C140,7330.081 139.153,7329.01 137.634,7329.01 C135.981,7329.01 135,7330.126 135,7332.001 L135,7339 L131,7339 L131,7326 L135,7326 L135,7327.462 C135,7327.462 136.255,7325.26 139.083,7325.26 C141.912,7325.26 144,7326.986 144,7330.558 L144,7339 L144,7339 Z M126.442,7323.921 C125.093,7323.921 124,7322.819 124,7321.46 C124,7320.102 125.093,7319 126.442,7319 C127.79,7319 128.883,7320.102 128.883,7321.46 C128.884,7322.819 127.79,7323.921 126.442,7323.921 L126.442,7323.921 Z M124,7339 L129,7339 L129,7326 L124,7326 L124,7339 Z" id="linkedin-[%23161]"></path></g></g></g></svg>');
        }

.left-sidebar {
    opacity: 0;
    visibility: hidden;
}

.open .left-sidebar {
    animation-name: leftslide;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

    .open .left-sidebar li:nth-child(5) {
        animation-name: fadeIn;
        animation-duration: .3s;
        animation-delay: .4s;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

    .open .left-sidebar li:nth-child(4) {
        animation-name: fadeIn;
        animation-duration: .3s;
        animation-delay: .5s;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
        display: none;
    }

    .open .left-sidebar li:nth-child(3) {
        animation-name: fadeIn;
        animation-duration: .3s;
        animation-delay: .6s;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

    .open .left-sidebar li:nth-child(2) {
        animation-name: fadeIn;
        animation-duration: .3s;
        animation-delay: .7s;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

    .open .left-sidebar li:nth-child(1) {
        animation-name: fadeIn;
        animation-duration: .3s;
        animation-delay: .8s;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

@keyframes leftslide {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translate(30%, 0);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/************************************************************************/


/********************** Jubilee Books Starts*************************/
.book-wrapper {
    padding: 10px 30px 50px;
}

.book-list {
    list-style-type: none;
    display: flex;
    grid-gap: 15px;
    flex-wrap: wrap;
}

.book-item-wrapper {
    width: 11.4%;
    border-radius: 6px;
    border: 3px solid transparent;
    overflow: hidden;
    transition: all 0.5s;
    position: relative;
    box-shadow: 0px 0px 15px #000;
}

.book-item-wrapper {
    border: 0;
    perspective: 600px;
    display: block;
    box-shadow: none;
    line-height: 0;
}

    .book-item-wrapper:hover {
        transform: scale(1.1);
        transition: all 0.5s;
    }

    .book-item-wrapper .book-item {
        transition: all 0.5s;
        position: relative;
    }
/*.book-item-wrapper:hover .book-item {
    transition: all 0.5s;
    -webkit-transform: rotateY(-45deg) scale(0.88);    
    transform: rotateY(-45deg) scale(0.88);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.book-item-wrapper .book-item::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 98.5%;
	bottom: 3px;
	width: 45px;
	background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
}
.book-item-wrapper:hover {
    transform: none;
    border: 0;
}
.book-item-wrapper:hover img {
    transform: none;
    transition: all 0.5s;
}*/
.slick-slide {
    margin: 0;
    /* border: 1px solid #f00;*/
    border-radius: 12px;
    overflow: hidden;
    padding: 5px;
}

    .slick-slide img {
        width: 100%;
        height: 300px;
        border-radius: 12px;
        box-shadow: 0 0 6px rgba(0,0,0,0.7);
    }

.slick-prev:before,
.slick-next:before {
    color: #fff;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .5;
}

.slick-active {
    opacity: .7;
}

.slick-current {
    opacity: 1;
}

.slick-slide.slick-current {
    width: 700px !important;
}

.slick-img-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

    .slick-img-wrapper img {
        width: calc(100% + 350px);
        height: 300px;
        /* box-shadow: 0 0 6px rgba(0, 0, 0, 0.7); */
        margin-left: -350px;
    }

.slick-slide.slick-current .slick-img-wrapper img {
    width: 100%;
    margin-left: 0;
}
/********************** Jubilee Books Ends*************************/




@property --progress-value {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

@-webkit-keyframes html-progress {
    to {
        --progress-value: 0;
    }
}

@keyframes html-progress {
    to {
        --progress-value: 60;
    }
}

.token-counter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #bebebe;
    display: flex;
    align-items: center;
}


.progress-bar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* to center the percentage value */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}


.prog-container {
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#d9d9d9 calc(var(--progress-value) * 1%), #4CAF50 0);
    -webkit-animation: html-progress 2s 1 forwards;
    animation: html-progress 2s 1 forwards;
}

    .prog-container::before {
        -webkit-animation: html-progress 2s 1 forwards;
        animation: html-progress 2s 1 forwards;
    }

progress {
    visibility: hidden;
    width: 0;
    height: 0;
}

.voice-icon-text {
    font-size: 11px;
    font-style: italic;
    margin-top: 10px;
}


/*form validation*/
.danger {
    border: 2px solid red;
    background-color: #ffdddd;
}

/******************* Profile Page CSS Starts *******************/
.select-profile-popup {
    width: 90%;
    max-width: 1165px;
    border: 3px solid #09f;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 1px;
    flex-grow: 1;
    margin: 50px auto;
}

.popup-header-title {
    font-family: 'Agency FB';
    color: #09f;
    font-size: 40px !important;
    font-weight: bold;
    margin: 0 0 0 10px;
}

.popup-form-body {
    padding: 10px 20px 0;
}

.form-btn {
    background-color: #c2c2c2;
    padding: 5px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 5px;
    border: 0;
}

    .form-btn:hover {
        color: #09f;
    }

.w-50 .field-wrap {
    width: 49%;
}

.edit-pro-img {
    width: 140px;
    height: 140px;
    padding: 10px;
}

    .edit-pro-img img {
        width: 100%;
        border-radius: 50%;
        height: 100%;
        border: 4px solid #19a3ff;
    }
/******************* Profile Page CSS Ends *******************/
.avatar-wrap {
    width: 150px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.avatar-img-wrap {
    width: 140px;
    height: 140px;
    background: url("/images/Profile-Avatar-Sprite.webp") no-repeat 0 0;
    position: relative;
    transition: all 0.5s;
    cursor: pointer;
}

    .avatar-img-wrap.active:before {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        content: '';
        display: block;
        position: absolute;
        border: 10px solid #ffde59;
        left: 0;
        top: 0;
    }

    .avatar-img-wrap:hover {
        transform: scale(1.1);
        transition: all 0.5s;
    }

.user-info .avatar-img-wrap {
    transform: scale(0.32);
    float: left;
    margin-left: -40px;
    margin-right: -40px;
}

.avatar-main-wrap {
    display: flex;
    flex-wrap: wrap;
    /* max-height: 450px; */
    overflow-y: auto;
    /* display: grid;
            /* grid-template-columns: repeat(8, 1fr);*/
    /* gap: 10px; */
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #b3b3b3 transparent;
    overflow: auto;
    justify-content: center;
}

    .avatar-main-wrap::-webkit-scrollbar {
        width: 6px;
        /* Slim width */
    }

    .avatar-main-wrap::-webkit-scrollbar-thumb {
        background-color: #b3b3b3;
        /* Scroll thumb color */
        border-radius: 10px;
    }

    .avatar-main-wrap::-webkit-scrollbar-track {
        background: transparent;
        /* Hide track */
    }

.add-profile-wrap {
    width: 140px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-profile {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    border: 3px solid #959595;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5e5e5;
    cursor: pointer;
    transition: all 0.5s;
}

    .add-profile:hover {
        transform: scale(1.1);
        transition: all 0.5s;
    }

    .add-profile img {
        width: 48px;
    }

.avatar-name {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.avatar-1 {
    background-position: 0 0;
}

.avatar-2 {
    background-position: -140px 0;
}

.avatar-3 {
    background-position: -280px 0;
}

.avatar-4 {
    background-position: -420px 0;
}

.avatar-5 {
    background-position: -560px 0;
}

.avatar-6 {
    background-position: -700px 0;
}

.avatar-7 {
    background-position: -840px 0;
}

.avatar-8 {
    background-position: -980px 0;
}

.avatar-9 {
    background-position: 0 -140px;
}

.avatar-10 {
    background-position: -140px -140px;
}

.avatar-11 {
    background-position: -280px -140px;
}

.avatar-12 {
    background-position: -420px -140px;
}

.avatar-13 {
    background-position: -560px -140px;
}

.avatar-14 {
    background-position: -700px -140px;
}

.avatar-15 {
    background-position: -840px -140px;
}

.avatar-16 {
    background-position: -980px -140px;
}

.avatar-17 {
    background-position: 0 -280px;
}

.avatar-18 {
    background-position: -140px -280px;
}

.avatar-19 {
    background-position: -280px -280px;
}

.avatar-20 {
    background-position: -420px -280px;
}

.avatar-21 {
    background-position: -560px -280px;
}

.avatar-22 {
    background-position: -700px -280px;
}

.avatar-23 {
    background-position: -840px -280px;
}

.avatar-24 {
    background-position: -980px -280px;
}

.avatar-25 {
    background-position: 0 -420px;
}

.avatar-26 {
    background-position: -140px -420px;
}

.avatar-27 {
    background-position: -280px -420px;
}

.avatar-28 {
    background-position: -420px -420px;
}

.avatar-29 {
    background-position: -560px -420px;
}

.avatar-30 {
    background-position: -700px -420px;
}

.avatar-31 {
    background-position: -840px -420px;
}

.avatar-32 {
    background-position: -980px -420px;
}

.avatar-33 {
    background-position: 0 -560px;
}

.avatar-34 {
    background-position: -140px -560px;
}

.avatar-35 {
    background-position: -280px -560px;
}

.avatar-36 {
    background-position: -420px -560px;
}

.avatar-37 {
    background-position: -560px -560px;
}

.avatar-38 {
    background-position: -700px -560px;
}

.avatar-39 {
    background-position: -840px -560px;
}

.avatar-40 {
    background-position: -980px -560px;
}

.avatar-41 {
    background-position: 0 -700px;
}

.avatar-42 {
    background-position: -140px -700px;
}

.avatar-43 {
    background-position: -280px -700px;
}

.avatar-44 {
    background-position: -420px -700px;
}

.avatar-45 {
    background-position: -560px -700px;
}

.avatar-46 {
    background-position: -700px -700px;
}

.avatar-47 {
    background-position: -840px -700px;
}

.avatar-48 {
    background-position: -980px -700px;
}

.avatar-49 {
    background-position: 0 -840px;
}

.avatar-50 {
    background-position: -140px -840px;
}

.avatar-51 {
    background-position: -280px -840px;
}

.avatar-52 {
    background-position: -420px -840px;
}

.avatar-53 {
    background-position: -560px -840px;
}

.avatar-54 {
    background-position: -700px -840px;
}

.avatar-55 {
    background-position: -840px -840px;
}

.avatar-56 {
    background-position: -980px -840px;
}

.avatar-57 {
    background-position: 0 -980px;
}

.avatar-58 {
    background-position: -140px -980px;
}

.avatar-59 {
    background-position: -280px -980px;
}

.avatar-60 {
    background-position: -420px -980px;
}

.avatar-61 {
    background-position: -560px -980px;
}

.avatar-62 {
    background-position: -700px -980px;
}

.avatar-63 {
    background-position: -840px -980px;
}

.avatar-64 {
    background-position: -980px -980px;
}

.avatar-65 {
    background-position: 0 -1120px;
}





.avatar-66 {
    background-position: -140px -1120px;
}

.avatar-67 {
    background-position: -280px -1120px;
}

.avatar-68 {
    background-position: -420px -1120px;
}

.avatar-69 {
    background-position: -560px -1120px;
}

.avatar-70 {
    background-position: -700px -1120px;
}

.avatar-71 {
    background-position: -840px -1120px;
}

.avatar-72 {
    background-position: -980px -1120px;
}

.avatar-73 {
    background-position: 0 -1260px;
}

.avatar-74 {
    background-position: -140px -1260px;
}

.avatar-75 {
    background-position: -280px -1260px;
}

.avatar-76 {
    background-position: -420px -1260px;
}

.avatar-77 {
    background-position: -560px -1260px;
}

.avatar-78 {
    background-position: -700px -1260px;
}

.avatar-79 {
    background-position: -840px -1260px;
}

.avatar-80 {
    background-position: -980px -1260px;
}

.avatar-81 {
    background-position: 0 -1400px;
}

.avatar-82 {
    background-position: -140px -1400px;
}

.avatar-83 {
    background-position: -280px -1400px;
}

.avatar-84 {
    background-position: -420px -1400px;
}

.avatar-85 {
    background-position: -560px -1400px;
}

.avatar-86 {
    background-position: -700px -1400px;
}

.avatar-87 {
    background-position: -840px -1400px;
}

.avatar-88 {
    background-position: -980px -1400px;
}

.avatar-89 {
    background-position: 0 -1540px;
}

.avatar-90 {
    background-position: -140px -1540px;
}

.avatar-91 {
    background-position: -280px -1540px;
}

.avatar-92 {
    background-position: -420px -1540px;
}

.avatar-93 {
    background-position: -560px -1540px;
}

.avatar-94 {
    background-position: -700px -1540px;
}

.avatar-95 {
    background-position: -840px -1540px;
}

.avatar-96 {
    background-position: -980px -1540px;
}

.avatar-97 {
    background-position: 0 -1680px;
}

.avatar-98 {
    background-position: -140px -1680px;
}

.avatar-99 {
    background-position: -280px -1680px;
}

.avatar-100 {
    background-position: -420px -1680px;
}

.avatar-101 {
    background-position: -560px -1680px;
}

.avatar-102 {
    background-position: -700px -1680px;
}

.avatar-103 {
    background-position: -840px -1680px;
}

.avatar-104 {
    background-position: -980px -1680px;
}

.avatar-105 {
    background-position: 0 -1820px;
}

.avatar-106 {
    background-position: -140px -1820px;
}

.avatar-107 {
    background-position: -280px -1820px;
}

.avatar-108 {
    background-position: -420px -1820px;
}

.avatar-109 {
    background-position: -560px -1820px;
}

.avatar-110 {
    background-position: -700px -1820px;
}

.avatar-111 {
    background-position: -840px -1820px;
}

.avatar-112 {
    background-position: -980px -1820px;
}

.avatar-113 {
    background-position: 0 -1960px;
}

.avatar-114 {
    background-position: -140px -1960px;
}

.avatar-115 {
    background-position: -280px -1960px;
}

.avatar-116 {
    background-position: -420px -1960px;
}

.avatar-117 {
    background-position: -560px -1960px;
}

.avatar-118 {
    background-position: -700px -1960px;
}

.avatar-119 {
    background-position: -840px -1960px;
}

.avatar-120 {
    background-position: -980px -1960px;
}

.avatar-121 {
    background-position: 0 -2100px;
}

.avatar-122 {
    background-position: -140px -2100px;
}

.avatar-123 {
    background-position: -280px -2100px;
}

.avatar-124 {
    background-position: -420px -2100px;
}

.avatar-125 {
    background-position: -560px -2100px;
}

.avatar-126 {
    background-position: -700px -2100px;
}

.avatar-127 {
    background-position: -840px -2100px;
}

.avatar-128 {
    background-position: -980px -2100px;
}

.avatar-129 {
    background-position: 0 -2240px;
}

.avatar-130 {
    background-position: -140px -2240px;
}

.avatar-131 {
    background-position: -280px -2240px;
}

.avatar-132 {
    background-position: -420px -2240px;
}

.avatar-133 {
    background-position: -560px -2240px;
}

.avatar-134 {
    background-position: -700px -2240px;
}

.avatar-135 {
    background-position: -840px -2240px;
}

.avatar-136 {
    background-position: -980px -2240px;
}

.avatar-137 {
    background-position: 0 -2380px;
}

.avatar-138 {
    background-position: -140px -2380px;
}

.avatar-139 {
    background-position: -280px -2380px;
}

.avatar-140 {
    background-position: -420px -2380px;
}

.avatar-141 {
    background-position: -560px -2380px;
}

.avatar-142 {
    background-position: -700px -2380px;
}

.avatar-143 {
    background-position: -840px -2380px;
}

.avatar-144 {
    background-position: -980px -2380px;
}

.avatar-145 {
    background-position: 0 -2520px;
}

.avatar-146 {
    background-position: -140px -2520px;
}

.avatar-147 {
    background-position: -280px -2520px;
}

.avatar-148 {
    background-position: -420px -2520px;
}

.avatar-149 {
    background-position: -560px -2520px;
}

.avatar-150 {
    background-position: -700px -2520px;
}

.avatar-151 {
    background-position: -840px -2520px;
}

.avatar-152 {
    background-position: -980px -2520px;
}

.avatar-153 {
    background-position: 0 -2660px;
}

.avatar-154 {
    background-position: -140px -2660px;
}

.avatar-155 {
    background-position: -280px -2660px;
}

.avatar-156 {
    background-position: -420px -2660px;
}

.avatar-157 {
    background-position: -560px -2660px;
}

.avatar-158 {
    background-position: -700px -2660px;
}

.avatar-159 {
    background-position: -840px -2660px;
}

.avatar-160 {
    background-position: -980px -2660px;
}

.avatar-161 {
    background-position: 0 -2800px;
}

.avatar-162 {
    background-position: -140px -2800px;
}

.avatar-163 {
    background-position: -280px -2800px;
}

.avatar-164 {
    background-position: -420px -2800px;
}

.avatar-165 {
    background-position: -560px -2800px;
}

/*******************************************/

/*************** QR Code Popup Starts ***************/
.qrcode-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 4px solid #4e9bea;
    border-radius: 20px;
    position: relative;
}

    .qrcode-wrapper:before {
        width: 60%;
        height: 4px;
        background-color: #ffffff;
        content: '';
        position: absolute;
        left: 20%;
        top: -4px;
    }

    .qrcode-wrapper:after {
        width: 60%;
        height: 4px;
        background-color: #ffffff;
        content: '';
        position: absolute;
        left: 20%;
        bottom: -4px;
    }

.qrcode-wrapper-inner {
    width: 100%;
    height: 100%;
    padding: 5px;
    position: relative;
}

    .qrcode-wrapper-inner img {
        width: 100%;
    }

    .qrcode-wrapper-inner:before {
        width: 4px;
        height: 60%;
        background-color: #ffffff;
        content: '';
        position: absolute;
        left: -4px;
        top: 20%;
    }

    .qrcode-wrapper-inner:after {
        width: 4px;
        height: 60%;
        background-color: #ffffff;
        content: '';
        position: absolute;
        right: -4px;
        top: 20%;
    }
.product-thumb {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    border: 2px solid #000;
    border-radius: 4px;
    position: relative;
}
.product-thumb-inner {
    width: 100%;
    height: 100%;
    padding: 2px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.product-thumb:before {
    width: 50%;
    height: 2px;
    background-color: #ffffff;
    content: '';
    position: absolute;
    left: 25%;
    top: -2px;
}
.product-thumb:after {
    width: 50%;
    height: 2px;
    background-color: #ffffff;
    content: '';
    position: absolute;
    left: 25%;
    bottom: -2px;
}
.product-thumb-inner:before {
    width: 2px;
    height: 50%;
    background-color: #ffffff;
    content: '';
    position: absolute;
    left: -2px;
    top: 25%;
}
.product-thumb-inner:after {
    width: 2px;
    height: 50%;
    background-color: #ffffff;
    content: '';
    position: absolute;
    right: -2px;
    top: 25%;
}
.product-thumb-inner img {
    width: 100%;
}
.product-img-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 4px solid #4e9bea;
    padding: 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.product-img-wrapper img {
    width: 100%;
    height:auto;
}
/*************** QR Code Popup Ends ***************/
/*************** Browser Error Page Starts *****************/
.error-page {
    height: 100%;
    width: 100%;
}

.browser-warning-txt {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: column;
    font-size: 18px;
}

    .browser-warning-txt p {
        margin: 0 0 10px;
        text-align: center;
        line-height: 24px;
    }

.error-page-box {
    background: url("/images/error-page.jpg") no-repeat center top;
    height: 70%;
    background-size: contain;
}

@media screen and (max-width:1200px) {
    .error-page-box {
        background-position: center;
        height: 80%;
        background-size: 60%;
    }

    .browser-warning-txt {
        padding: 0 20px;
        height: 20%;
    }
}

@media screen and (max-width:1000px) {
    .error-page-box {
        background-size: 90%;
    }
}

@media screen and (max-width:900px) {
    .error-page-box {
        background-size: 90%;
    }
}

@media screen and (max-width:768px) {
    .error-page-box {
        background-size: 100%;
    }
}

@media screen and (max-width:600px) {
    .error-page-box {
        height: 70%;
        background-size: 140%;
    }

    .browser-warning-txt {
        font-size: 18px;
    }
}

@media screen and (max-width:500px) {
    .error-page-box {
        background-size: 150%;
    }
}

@media screen and (max-width:450px) {
    .error-page-box {
        background-size: 170%;
    }

    .browser-warning-txt {
        font-size: 20px;
    }
}

@media screen and (max-width:350px) {
    .browser-warning-txt {
        height: 30%;
    }
}
/*************** Browser Error Page Ends *****************/

/************************* Content Popup **************************/
.content-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.import-file-wrapper {
    width: 90%;
    height: 90%;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 5% auto;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    position: relative;
}

.audio-frame {
    height: 100%;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: end;
    background: url(/images/login-bg.jpg) no-repeat center;
    background-size: cover;
    position: relative;
}

    .audio-frame:before {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #09f;
        content: '';
        opacity: 0.9;
    }

    .audio-frame video,
    .audio-frame audio {
        margin-bottom: 30px;
        z-index: 1;
    }

.img-frame {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .img-frame img {
        max-width: 100%;
        max-height: 100%;
    }

.video-panel {
    line-height: 0;
}

.import-file-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.content-popup-footer {
    height: 40px;
    border-top: 1px solid #ccc;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
}
/***************************************************************/
/*************** Browser Error Page Ends *****************/
.token-tooltip {
    position: relative;
    display: inline-block;
}

    .token-tooltip .token-tooltip-txt {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 125%;
        left: 40%;
        margin-left: -60px;
    }

        .token-tooltip .token-tooltip-txt::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

    .token-tooltip:hover .token-tooltip-txt {
        visibility: visible;
    }

.voice-tooltip {
    position: relative;
    /*display: inline-block;*/
    border-bottom: 1px dotted black;
}

    .voice-tooltip .voicetooltiptext {
        visibility: visible;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 110%;
    }

        .voice-tooltip .voicetooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent black;
        }

    .voice-tooltip:hover .voicetooltiptext {
        visibility: visible;
    }
/*********************************** Survey Screens ***************************************/
.survey-popup-body {
    padding: 10px 15px;
}

.survey-heading {
    font-family: 'Agency FB';
    font-size: 28px;
    color: #959595;
    font-weight: bold;
}

.survey-block {
    margin-bottom: 20px;
}

.survey-q {
    font-size: 14px;
    font-weight: bold;
}

.survey-a {
    margin-left: 18px;
}

.cust-txtbox {
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
    width: 50%;
    padding: 5px 10px;
    color: #828282;
}

.cust-txtarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 150px;
    width: 100%;
    padding: 10px 10px;
    color: #828282;
    resize: vertical;
    font-family: Arial, Helvetica, sans-serif;
}
/*************************** Custom Checkbox ******************************/
.cust-chkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 20px;
    color: #828282;
}

    .cust-chkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.cust-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border: 2px solid #c3c3c3;
    border-radius: 50%;
}

.cust-chkbox:hover input ~ .cust-checkmark {
    background-color: #ccc;
}

.cust-chkbox input:checked ~ .cust-checkmark {
    background-color: #0099ff;
    border-color: #0099ff;
}

.cust-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.cust-chkbox input:checked ~ .cust-checkmark:after {
    display: block;
}

.cust-chkbox .cust-checkmark:after {
    left: 4px;
    top: 4px;
    width: 9px;
    height: 9px;
    background-color: #fff;
    border-radius: 50%;
}
/*********************************************************************/
}
/*Default image icon*/
.default-image {
    width: 140px;
    height: 140px;
    background: url(/images/user-icon.jpg) no-repeat center center;
    background-size: cover; /* Ensures image covers the div */
    border-radius: 50%; /* Matches the circular avatars */
    border: 2px solid #ddd; /* Optional: Matches user profile image border */
    position: relative;
    transition: all 0.5s;
    cursor: pointer;
}
.item-file-type-wrap {
    display: flex;
    justify-content: flex-start;
}
.item-file-type {
    display: flex;
    transform: scale(0.9);
    align-items: center;
    width: 65px;
    /*margin-right: 5px;*/
}
.item-file-type .rad {
    padding-left: 25px;
}
.item-file-type span {
    font-size: 12px;
    font-weight: bold;
}
/************** New Media Query ***********/
@media screen and (max-width: 1350px) {
    .book-item-wrapper {
        width: 11.2%;
    }
}

@media screen and (min-width: 1200px) {
    .mob-nav {
        display: none !important;
    }
}

@media screen and (max-width: 1200px) {
    .mh {
        display: none !important;
    }

    .book-item-wrapper {
        width: 12.9%;
    }

    .top-bar button.header-link {
        display: none;
    }

    .newchat-tab {
        display: flex;
    }
}

@media screen and (max-width: 1100px) {
    .book-item-wrapper {
        width: 15.1%;
    }
}

@media screen and (max-width: 1000px) {
    .book-item-wrapper {
        width: 23.4%;
    }
}

@media screen and (max-width: 900px) {
    .book-item-wrapper {
        width: 23.3%;
    }
}

@media screen and (max-width: 850px) {
    .slick-slide.slick-current {
        width: 600px !important;
    }

    .book-item-wrapper {
        width: 23.2%;
    }
}

@media screen and (max-width: 800px) {
    .book-item-wrapper {
        width: 23.1%;
    }
}

@media screen and (max-width: 768px) {
    .search-container, .search-container-inner {
        width: 95%;
    }

    .logo {
        font-size: 70px;
    }

        .logo span:last-child:before {
            top: -5px;
            left: 110px;
            padding: 0 5px;
            border-radius: 4px;
            font-size: 24px;
            line-height: 32px;
        }

    /* .search-container-wrapper, 
.main-container-inner .search-container-wrapper {
    display: none;
}*/
    .search-container-wrapper {
        display: none;
    }

    .result-panel {
        max-width: calc(100% - 5px);
        margin: 0;
    }

    .main-panel-container {
        position: relative;
        width: 100%;
        width: calc(100% - 5px);
    }

    .right-panel.active {
        display: none;
    }
    /*.parent-container.close-nav .right-panel*/
    .parent-container.close-nav .right-panel.active {
        width: calc(100% - 52px);
        position: absolute;
        height: 100%;
        top: 0;
        transition: none;
        display: flex;
        border: 0;
    }

    .right-panel {
        height: 0;
    }

    .voice-panel {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 100%;
    }

    .voice-changer {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 0;
        left: auto;
        text-align: right;
        width: 36px;
    }

    .mic-panel {
        bottom: 10px;
    }

    .lang-panel {
        right: 5px;
        position: fixed;
        height: calc(100% - 64px);
        top: 64px;
        border-left: 3px solid #e5e5e5;
    }

    .sp-lang-wrapper {
        width: auto;
        height: auto;
        opacity: 1;
    }

    .voice-bubble.ai-female,
    .voice-bubble.ai-male,
    .voice-bubble.thinking-female,
    .voice-bubble.thinking-male {
        background-size: contain;
    }

    .promt-output {
        padding-left: 10px;
    }

    .right-panel .open-voice-mode {
        margin-top: 10px !important;
    }

    .top-bar {
        display: none;
    }

    .parent-container.close-nav .top-bar {
        padding-right: 5px;
        display: flex;
    }

    .control-center {
        display: none;
    }

    #divResults {
        padding-right: 20px;
        padding-left: 0;
    }

    .main-container-inner .search-bar-container {
        margin: 10px 20px 0 40px;
    }

    .main-container-inner .disclaimer-txt {
        margin: 0 20px 0 40px;
    }

    .cancel-voice-mode {
        display: none;
    }

    .tab-content {
        width: 100%;
    }

    .mob-nav {
        margin: 0 15px 0 20px;
    }

    .mob-voice-launch {
        position: absolute;
        width: 97%;
        height: 100%;
        background: #fff;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        /*opacity:0;*/
    }

    .mob-voice-tap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .voice-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #b9b9b9;
    }

    .slick-slider {
        width: calc(100% - 60px);
    }

    .book-wrapper {
        padding: 10px 10px 20px;
        width: calc(100% - 60px);
    }

    .token-counter {
        left: 93px
    }

    .token-tooltip .token-tooltip-txt {
        left: 40%;
    }

        .token-tooltip .token-tooltip-txt::after {
            left: 25%;
        }

    .popup-header-title {
        font-size: 24px !important;
    }

    .import-file-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        border-radius: 0;
    }
    .left-nav-bar:hover:before,
    .ui-resizable-handle,
    .slide-handle {
        display: none;
    }
}

@media screen and (max-width: 750px) {
    .slick-slide.slick-current {
        width: 550px !important;
    }

    .book-item-wrapper {
        width: 23.0%;
    }
}

@media screen and (max-width: 700px) {
    .slick-slide.slick-current {
        width: 580px !important;
    }

    .book-item-wrapper {
        width: 22.8%;
    }
}

@media screen and (max-width: 650px) {
    .slick-slide.slick-current {
        width: 530px !important;
    }

    .book-item-wrapper {
        width: 22.5%;
    }
}

@media screen and (max-width: 600px) {
    .logo {
        font-size: 64px;
        margin-bottom: 10px;
    }

    .slick-slide.slick-current {
        width: 480px !important;
    }

    .book-item-wrapper {
        width: 48%;
    }
}

@media screen and (max-width: 550px) {
    .logo {
        font-size: 56px;
    }

        .logo span:last-child:before {
            top: -5px;
            left: 90px;
            font-size: 18px;
            line-height: 26px;
        }

    .slick-slide.slick-current {
        width: 430px !important;
    }

    .book-item-wrapper {
        width: 47%;
    }
}

@media screen and (max-width: 500px) {
    .logo {
        font-size: 50px;
    }

        .logo span:last-child:before {
            top: -8px;
            left: 75px;
            font-size: 18px;
        }

    .slick-slide.slick-current {
        width: 380px !important;
    }
}

@media screen and (max-height: 480px) {
    .nb-txt {
        font-size: 30px;
    }

    .search-container-wrapper {
        top: 3%;
    }

    .site-logo img {
        width: 70px;
    }

    .site-logo {
        margin-bottom: 5px;
    }

    .logo {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 450px) {
    .logo {
        font-size: 44px;
    }

        .logo span:last-child:before {
            left: 65px;
            line-height: 26px;
        }

    .slick-slide.slick-current {
        width: 330px !important;
    }
}

@media screen and (max-width: 400px) {
    .logo {
        font-size: 36px;
    }

        .logo span:last-child:before {
            top: -5px;
            left: 55px;
            font-size: 12px;
            line-height: 18px;
        }

    .slick-slide.slick-current {
        width: 280px !important;
    }

    .book-item-wrapper {
        width: 45%;
    }
}

@media screen and (max-width: 350px) {
    .logo {
        font-size: 28px;
        margin-bottom: 5px;
    }

        .logo span:last-child:before {
            left: 40px;
            line-height: 18px;
        }

    .slick-slide.slick-current {
        width: 230px !important;
    }
}

@media screen and (max-width: 320px) {
    .slick-slide.slick-current {
        width: 200px !important;
    }
}
/*************************** Media Query Ends ************************/



.uploaded-file {
    height: 50px;
    border-bottom: 1px solid rgb(204, 204, 204);
    position: relative;
    display: flex;
    align-items: end;
    padding: 0 8px 3px;
    justify-content: space-between;
}
/*.mm-item-nav-row .add-items > span,
.mm-item-title .add-items {
    display: none;
}*/
.mm-item-nav-row .add-items input:checked + .slider {
    background-color: #0099ff;
}
.mm-item-nav-row .add-items input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}
.mm-item-nav-row .add-items > span:last-child {
    display: flex;
}

/*validate required file type*/
.item-file-type-wrap.error {
    border: 2px solid red;
    border-radius: 5px;
}
.qr-icon-panel {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 2px 0;
}
.qr-icon-previw {
    width: 34px;
    height: 34px;
    border: 2px solid #ccc;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
}
.qr-icon-previw img {
    width: 34px;
    height: 34px;
}
.upload-qr-icon {
    fill: #8b8b8b;
    cursor:pointer;
    transition:all 0.2s;
}
.upload-qr-icon:hover {
    fill: #0099ff;
}
.remove-qr-icon {
    cursor:pointer;
}
.remove-qr-icon path {
    stroke: #8b8b8b;
}
.remove-qr-icon:hover path {
    stroke: #0099ff;
}