::-webkit-scrollbar {
    background-color: #fff;
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}

::-webkit-scrollbar-track:hover {
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 5px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a5;
    border: 4px solid #f4f4f4;
}

::-webkit-scrollbar-button {
    display: none;
}

img {
    pointer-events: none;
    -webkit-user-drag: none;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#canvas-container {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}
#canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

#tools {
    margin: 10px 0 10px 10px;
    top: 0;
    position: absolute;
    overflow: hidden;

    /* for vertical center align */
    top: 50%;
    transform: translateY(-50%);
    margin-top: auto;
    max-height: calc(100% - 80px) !important;
    min-height: 95px;
}

#propertyTools {
    margin: 10px 10px 10px 0px;
    top: 0;
    right: 0;
    position: absolute;
    overflow: hidden;
}

#tools:hover, #propertyTools:hover {
    overflow: auto;
}

#tools::-webkit-scrollbar, #propertyTools::-webkit-scrollbar  {
    display: none;
}

#tools, #propertyTools {
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-height: -webkit-fill-available;
}

.pop-panel {
    position: absolute;
    top: 0;
    left: 55px;
    height: 100%;
    z-index: 3;
}

#tools, #controls, #layoutPanel, #propertyPanel, #shapePanel, #templatePanel, #dataPanel, #propertyTools {
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

#controls {
    bottom: 0;
    right: 0;
    display: flex;
    position: absolute;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 10px;
    z-index: 1;
}

button {
    display: block;
    margin: 5px 0;
}

#tools button, #propertyTools button {
    background: none;
    border: none;
    margin: 3px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 18px;
}

#controls button {
    background: none;
    border: none;
    margin: 3px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.pop-panel button {
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    padding: 6px 10px;
}

#tools i, #controls i, .pop-panel i, #propertyTools i {
    width: 20px;
    height: 20px;
}

#tools button:hover, #controls button:hover, .pop-panel button:hover, #tools .main-btn.active, #propertyPanel button.active, #propertyTools button:hover {
    background-color: #e0e6f1;
}

#tools .divider, #propertyTools .divider {
    width: 70%;
    height: 1px;
    margin: 5px auto;
    background: #e4e4e4;
}

.fa-pen-swirl, .fa-pen-slash, .fa-camera {
    background: linear-gradient(45deg, #ff7eb3, #de596f, #80001d);background-clip: text;-webkit-text-fill-color: transparent;
}

.fa-palette, .fa-sparkles {
    background: linear-gradient(135deg, rgba(255,0,0,1) 0%, rgb(255, 153, 0) 25%, rgb(222, 216, 33) 30%, rgba(79,220,74,1) 38%, rgba(63,218,216,1) 46%, rgba(47,201,226,1) 52%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 68%, rgba(186,12,248,1) 75%, rgba(251,7,217,1) 80%, rgba(255,0,0,1) 100%);background-clip: text;-webkit-text-fill-color: transparent;
}

.fa-image {
    color: purple;
}

.fa-frame {
    color: #9c9b9b;
}

.fa-shapes {
    color: #0000ff;
}

#propertyPanel {
    position: absolute;
    width: 250px;
    right: 0;
    transition: height 0.2s;
    animation: fadeIn .4s;
    margin: 10px;
    top: 0;
    left: unset;
    height: calc(100% - 70px);
    z-index: 2;
}

#propertyPanel .tab-content {
    max-height: calc(100% - 50px);
    overflow: auto;
    height: -webkit-fill-available;
}

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

#layoutPanel, #shapePanel, #templatePanel, #dataPanel {
    width: 250px;
    margin: 10px 0 10px 10px;
    transition: height 0.2s;
    animation: fadeIn .4s;
    height: calc(100% - 20px);
}

.float-panel--grid-3 {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 76px);
}

.float-panel--grid-4 {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, 55px);
}

.float-panel--grid-6 {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(6, 42px);
}

.ed-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-panel .nav .nav-link.active:after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: #7856ff;
    margin: 0 auto;
    margin-top: 7px;
    border-radius: 3px 3px 0 0;
    background-color: #7856ff
}

.pop-panel .nav .nav-link.active {
    color: black;
}

.pop-panel .nav-tabs .nav-item.show .nav-link, .pop-panel .nav-tabs .nav-link, .pop-panel .nav-tabs {
    border: none;
    padding-bottom: 0;
}

.pop-panel .nav-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e4e4e4;
}

.pop-panel .nav-right button {
    margin: 4px;
    padding: 4px 8px;
}

.pop-panel .tab-content, .pop-panel .tab-pane {
    height: inherit;
    display: flex;
    flex-direction: column;
}

.pop-panel .tab-content .footer {
    height: 60px;
    border-top: 1px solid #e4e4e4;
    justify-content: center;
    bottom: 0;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: white;
}

.pop-panel .tab-content .footer button {
    border: 2px solid #8d8de8;
    background: #eee9ff;
    width: 100%;
    margin: 8px;
    font-size: 14px;
}

.pop-panel .tab-content .content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.pop-panel .tab-content .item-title {
    font-size: 14px;
    margin-left: 16px;
}

.pop-panel .nav-header .fa-xmark, .pop-panel .tab-content .item-title,
.pop-panel .nav-tabs .nav-item.show .nav-link, .pop-panel .nav-tabs .nav-link, .pop-panel .nav-tabs  {
    color: #8a8a8a;
}

.fa-box-open-full {
    margin-left: -1px;
}

.float-panel--tab-container {
    word-wrap: break-word;
    overflow: auto;
    height: inherit;
}

.hidden-dropdown-list {
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    position: absolute;
    width: 70px;
    text-align: center;
    cursor: context-menu;
}

.hidden-dropdown-list .dropdown-option:hover {
    background-color: #e3e5ff;
}

#layoutPanel #add-custom-w, #layoutPanel #add-custom-h {
    width: 75px;
    margin-left: -15px;
}

#propertyPanel .fontSizeContainer {
    width: 120px;
    margin-left:0 !important;
}

.fa-database {
    color: cornflowerblue;
}

#templates-container .card-content {
    background: #e3e5ff;
    text-align: center;
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

#templates-container .card-content button {
    font-size: 14px;
    height: 100%;
    width: 100%;
    margin: 0;
}

#deleteBtn i {
    color: cadetblue;
}

.fa-box-open-full {
    color: saddlebrown;
}

#fields_container {
    margin-top: 5px;
}

#fields_container button {
    background: #e0e6f1;
    border-radius: 16px;
    padding: 2px 10px;
    font-size: 14px;
    margin: 5px;
}

#fields_container span {
    cursor: context-menu;
    font-size: 15px;
    overflow: hidden;
    margin-right: 10px;
}

#clearDataBtn i {
    border: 2px solid #ea6464;
    background: #ffe0e0;
}

#cloneBtn i {
    color: #d5ae7c;
}

#loadTemplateToast {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #e3e5ff;
}

#loadTemplateToast .btn-close {
    position: absolute;
    right: 0;
    top: 25%;
}

.loadTemplateToastOuter {
    z-index: 4;
}

.strokeDashArray-select {
    position: relative;
}

.strokeDashArray-select .selected-option {
    cursor: pointer;
}

.strokeDashArray-select .options-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    display: none;
    position: absolute;
    width: 100%;
    border-radius: 8px;
}

.strokeDashArray-select .options-list li {
    padding: 14px 2px 14px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.strokeDashArray-select .options-list li:hover {
    background-color: #f0f0f0;
}

.strokeDashArray-select.open .options-list {
    display: block;
}

.strokeDashArray-select .selected-option span {
    margin-bottom: 5px;
}

.stroke {
    display: inline-block;
    width: 100%;
    height: 2px;
    margin-right: 10px;
    pointer-events: none;
}

.stroke.solid {
    background-color: black;
}

.stroke.dotted {
    background: repeating-linear-gradient(to right, black, black 4px, transparent 4px, transparent 8px);
}

.stroke.dashed {
    background: repeating-linear-gradient(to right, black, black 10px, transparent 10px, transparent 16px);
}

#dropImgBox {
    z-index: 10000;
    transition: all 0.3s ease;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(12, 0, 106, 0.6); 
    display: none;
    padding: 100px;
}

#dropImgBox .dropImgBoxContent {
    color: #ffffff; 
    font-size: 20px; 
    border-radius: 10px;
    border: 3px dashed #ffffff;
    width: 100%; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
    display: flex;
    min-height: fit-content;
    min-width: fit-content;
}

.pop-panel .footer button:hover {
    background: #dad6ea !important;
}

#templates-container button:hover {
    background: #d1cce3 !important;
}

#toggleTheme i {
    color: rgb(23, 0, 196);
}


[data-bs-theme="dark"] ::-webkit-scrollbar {
    background-color: #151722;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background-color: #151722;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track:hover {
    background-color: #151722;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    border: 5px solid #151722;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    border: 4px solid #1b1b1b;
}

[data-bs-theme="dark"] #tools, 
[data-bs-theme="dark"] #controls, 
[data-bs-theme="dark"] #layoutPanel, 
[data-bs-theme="dark"] #propertyPanel, 
[data-bs-theme="dark"] #shapePanel, 
[data-bs-theme="dark"] #templatePanel, 
[data-bs-theme="dark"] #dataPanel, 
[data-bs-theme="dark"] #propertyTools {
    background-color: #151722;
    box-shadow: 0px 0px 20px 0px rgb(126, 126, 126, 0.1);
}

[data-bs-theme="dark"] #tools button:hover, 
[data-bs-theme="dark"] #controls button:hover, 
[data-bs-theme="dark"] .pop-panel button:hover, 
[data-bs-theme="dark"] #tools .main-btn.active, 
[data-bs-theme="dark"] #propertyPanel button.active, 
[data-bs-theme="dark"] #propertyTools button:hover {
    background-color: #343434;
}

[data-bs-theme="dark"] .pop-panel .nav .nav-link.active {
    color: #fff;
}

[data-bs-theme="dark"] .hidden-dropdown-list,
[data-bs-theme="dark"] .strokeDashArray-select .options-list {
    background-color: #222;
}

[data-bs-theme="dark"] .hidden-dropdown-list .dropdown-option:hover,
[data-bs-theme="dark"] .strokeDashArray-select .options-list li:hover {
    background-color: #3f3f3f;
}

[data-bs-theme="dark"] .stroke.solid {
    background-color: #fff;
}

[data-bs-theme="dark"] .stroke.dotted {
    background: repeating-linear-gradient(to right, #fff, #fff 4px, transparent 4px, transparent 8px);
}

[data-bs-theme="dark"] .stroke.dashed {
    background: repeating-linear-gradient(to right, #fff, #fff 10px, transparent 10px, transparent 16px);
}

[data-bs-theme="dark"] .fa-image {
    color: #ff88ff;
}

[data-bs-theme="dark"] .fa-shapes {
    color: #8484ff;
}

[data-bs-theme="dark"] .fa-box-open-full {
    color: #db7f3c;
}

[data-bs-theme="dark"] #toggleTheme i {
    color: yellow;
}

[data-bs-theme="dark"] .pop-panel .tab-content .footer {
    background: #151722;
}

[data-bs-theme="dark"] .pop-panel .tab-content .footer button {
    background: #29243b;
}

[data-bs-theme="dark"] .pop-panel .footer button:hover {
    background: #3e365b !important;
}

[data-bs-theme="dark"] .pop-panel .nav-header .fa-xmark, 
[data-bs-theme="dark"] .pop-panel .tab-content .item-title, 
[data-bs-theme="dark"] .pop-panel .nav-tabs .nav-item.show .nav-link, 
[data-bs-theme="dark"] .pop-panel .nav-tabs .nav-link, 
[data-bs-theme="dark"] .pop-panel .nav-tabs {
    color: #c5c5c5;
}

[data-bs-theme="dark"] #fields_container button {
    background: #38568f;
}