:root {
    /* --primary-color: #040404; This value is overridden by the next one. */
    /* --primary-color: rgb(16, 16, 16); This value is overridden by the next one. */
    --primary-color: #151515;
    --menu-color: #0f0f0f;
    --menuItems-color: rgb(23, 23, 23);
    --SmallGalery-color: #121212;
    --search-input-background: #1e1e1e;
    --LutList-color: #121212;
    --secondary-color: #179eff;
    --image-width: 300px;
    --image-height: 200px;
    --slider-width: 70px;
    --slider-height: 100%;
    --scrollbar-width: 6px;
    --scrollbar-track-colorGal: #282828;
    --scrollbar-thumb-colorGal: #b3b3b3;
    --scrollbar-track-colorList: #1f1f1f;
    --scrollbar-thumb-colorList: #838383;
}

@font-face {
    font-family: CustomFont_Medium;
    src: url(CustomFont/Inter-Medium.ttf) format('truetype')
}

@font-face {
    font-family: CustomFont_Regular;
    src: url(CustomFont/Inter-Regular.ttf) format('truetype')
}

@font-face {
    font-family: CustomFont_SemiBold;
    src: url(CustomFont/Inter-SemiBold.ttf) format('truetype')
}

@font-face {
    font-family: Icons;
    font-style: normal;
    src: url(icofont.ttf) format('truetype')
}

body {
    font-family: CustomFont_Medium;
    /* text-shadow: 0 0 .5px #000;*/
    background: var(--primary-color);
    user-select: none;
    overflow: hidden
}

* {
    margin: 0;
    /* line-height: 1.15;*/
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: 0
}

label {
    pointer-events: none
}


/*MenuBar*/

#menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1b1b1b;
    color: #fff;
    padding: 0;
    user-select: none;
    width: 100%;
    height: 26px;
}

#app-logo {
    width: 14px;
    height: auto;
    margin: 0;
    margin-left: 8px;
    margin-top: 5px;
    pointer-events: none;
}

#app-title {
    font-family: CustomFont_Regular;
    font-size: 10px;
    margin: 0;
    margin-left: 12px;
    margin-top: 2px;
    color: #898989;
    pointer-events: none;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

.semi-transparent {
    margin-left: 3px;
    opacity: 0.2;
}

.right {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* Pushes the buttons to the right */
    margin-right: 3px;
}

.menubar-btn {
    background: none;
    border: none;
    color: #5a5a5a;
    cursor: pointer;
    font-size: 20px;
    margin-left: 1px;
    margin-bottom: 5px;
    /*  z-index: 9999;*/
    filter: grayscale(1) brightness(1.2)
    /*filter: invert(30%);*/
}

.menubar-btn img {
    width: 7px;
    height: auto;
}

#info-btn:hover {
    filter: grayscale(1) brightness(3.5);
    cursor: help;
}

#info-btn img {
    width: 8.5px;
    height: auto;
    margin-right: -3px;
}

#minimize-btn:hover {
    filter: grayscale(1) brightness(3.5)
}

#close-btn:hover {
    filter: grayscale(0) brightness(1)
}

#drag-region {
    -webkit-app-region: drag;
    background-color: transparent;
    width: calc(100% - 65px);
    /* Subtract 35 pixels from the width */
    height: 26px;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: red;*/
    /*z-index: 9999;*/
}


/* style.css */


/* +_ Bolb*/

#ResetRequired {
    position: fixed;
    display: none;
    background-color: #121212;
    /* pointer-events: none;*/
    cursor: default;
    width: 100%;
    height: 100%;
    /*    z-index: 999999999999999999999999999999999;
*/
}

#LoaderRoot {
    position: fixed;
    display: none;
    /*flex*/
    /* top: calc(var(--image-height) + 4px);*/
    justify-content: center;
    width: 100%;
    height: 100vh;
    /* align-items: center;*/
    /*    z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000;
*/
    background-color: rgba(22, 22, 22, 1);
    opacity: 1;
    cursor: alias;
}

.LoaderRoot_imgContainer img {
    width: 100%;
    height: auto;
    margin-top: 0;
    /* background-color: red;*/
    /*  filter: hue-rotate(5deg);*/
    transform: scale(1);
    animation: pulseBrightnessHue 3s ease-in-out infinite;
    /* 2 seconds duration, looping forever */
}

#LoaderRootGrid {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*    z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000;
*/
    background-color: rgba(22, 22, 22, 1);
    opacity: 1;
    cursor: alias;
}

@keyframes pulseBrightnessHue {
    0% {
        filter: brightness(1) grayscale(1) opacity(0.27);
        transform: scale(1);
    }
    50% {
        filter: brightness(1) grayscale(0) opacity(0.97);
        transform: scale(1.01);
    }
    100% {
        filter: brightness(1) grayscale(1) opacity(0.27);
        transform: scale(1);
    }
}

.LoaderRootGrid_imgContainer img {
    width: calc(var(--image-width)/3);
    height: auto;
    margin: 0 auto;
    /* Horizontal centering */
    /* Horizontal centering */
    /*    transform: scale(0.5);
    transform-origin: top;*/
    /* Adjusting the origin to be center */
    opacity: 0.7;
}

#ScrollToSelected {
    position: absolute;
    /*   margin-top: -25px;*/
    display: none;
    /*    z-index: 100000000;
*/
    width: calc(var(--image-width) - 4px);
    height: calc(var(--image-width)/12);
    height: 25px;
    background-color: rgba(0, 0, 0, 0.45);
    /* Add transition properties for smooth hover effect */
    transition: color 0.3s ease, background-color 0.3s ease;
}

#ScrollToSelected span {
    margin-left: 4px;
    font-family: CustomFont_Regular;
    color: rgba(228, 228, 228, 0.571);
    font-size: 10px;
}

#ScrollToSelected:hover {
    color: rgba(228, 228, 228, 0.954);
    background-color: rgba(0, 0, 0, 0.774);
}

#BlobCenterLoader {
    position: fixed;
    display: block;
    /*flex*/
    justify-content: center;
    width: 100%;
    height: 100vh;
    /* align-items: center;*/
    /*    z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000;
*/
    background-color: #161616;
}

.BlobcontainerLoader img {
    width: 100%;
    height: auto;
    margin-top: 0;
    /* background-color: red;*/
    /*  filter: hue-rotate(5deg);*/
}

#BlobCenter {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    /* align-items: center;*/
}

.Blobcontainer img {
    width: 100%;
    height: auto;
    margin-top: 75px;
    /* background-color: red;*/
    /*  filter: hue-rotate(5deg);*/
}

#NotificationsType {
    position: fixed;
    color: rgba(255, 255, 255, 0.48);
    font-size: 5vw;
    /* Adjust the value as needed */
    top: 25px;
    font-family: CustomFont_Medium;
}

#NotificationAlert {
    display: flex;
    flex-direction: column;
    color: rgba(200, 200, 200, 0.48);
    font-size: 3.5vw;
    padding-top: 5px;
    font-family: CustomFont_Regular;
}

.part1 {
    margin-top: 2px;
}

.part2 {
    margin-top: 3px;
    /* or padding-top: 10px; to add more space */
}

.clickablepart2 {
    /*     font-size: 12px;*/
    color: #e0e0e0
}

.clickablepart2:hover {
    color: #179eff;
    cursor: alias;
}

#NotificationFooter {
    display: block;
    position: fixed;
    color: rgba(165, 165, 165, 0.48);
    font-size: 2.8vw;
    padding-top: 55px;
    font-family: CustomFont_Regular;
    bottom: 15px;
    /* Adjust the value as needed */
}

#ProjectName,
#NotificationAlert,
#NotificationFooter {
    justify-content: left;
    padding-left: 25px;
}

#wrap {
    position: absolute;
    top: 26px;
    right: 0.25px;
    /*left: -0.30px;*/
    background-color: var(--primary-color);
    /*   background-color: red;*/
    width: calc(var(--image-width) + 4px);
    /*    padding-top: .1px;
    padding-bottom: 2.5px;*/
    border-radius: 2px;
    /*  transform: scale(0.99);*/
    /*    transform-origin: center;*/
    /*    margin-left: -0.25px;
    margin-top: -0.5px;*/
    transition: filter 0.3s ease-in-out;
    /*    transform: scale(0.99);*/
}

#select_image,
#select_luts {
    display: none
}

.comparison_Slider {
    position: absolute;
    /*    z-index: 9;
*/
    cursor: ew-resize;
    width: var(--slider-width);
    height: var(--slider-height)
}

.comparison_Slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2.5px;
    height: 35%;
    background-color: #e5e5e5;
    margin-left: -0.75px;
    transform: translateY(95%);
    border-radius: 5%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, .2);
}

.comparison_Slider::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: rgba(167, 167, 167, 0.42);
    margin-left: 0;
    border-radius: 0
}

.comparison_Slider:hover::after {
    box-shadow: 0 0 10px 1px rgba(255, 255, 255, .6)
}


/* Lut Area Part*/


/*dropdown*/

#dropdownLUT_AREABlock {
    width: 40px;
    height: 64px;
    background-color: transparent;
    position: absolute;
    top: 7px;
    left: 7px;
    /*    z-index: 100;
*/
    transform: scale(0.65);
    transform-origin: top left;
}

.dropdown {
    position: absolute;
    top: 0;
    left: 0;
    /*   margin-top: 2px;
    margin-left: 1px;*/
    /*    z-index: 100;
*/
    border-radius: 2px;
    background-color: #e3e3e3;
    opacity: .9;
    transition: opacity .3s ease;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    /*transform: scale(.65)*/
}

.dropdown:hover {
    opacity: 1
}

.dropdown__list li,
.dropdown__select {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    flex: 1;
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .3s ease;
    width: 38px;
    height: 28px;
}

.dropdown__list li span,
.dropdown__select span {
    font-family: CustomFont_SemiBold;
    font-size: 10px;
    color: #555
}

.dropdown__list {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    max-height: 0;
    overflow-y: hidden;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 2px;
    background-color: #e3e3e3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    /*    z-index: 1;
*/
    opacity: 0;
    pointer-events: none
}

.dropdown__select:hover {
    background-color: transparent
}

.dropdown__select:hover span {
    color: #179eff
}

.dropdown__list li:hover {
    background-color: #f9f9f9
}

.dropdown--active .dropdown__list {
    max-height: 200px;
    opacity: 1;
    pointer-events: auto
}

.dropdown {
    opacity: 0;
    transition: opacity 0.2s ease;
}


/*dropdown_Grid*/

.dropdown_Grid {
    position: absolute;
    top: 34px;
    /*  top: 0;*/
    left: 0;
    /*    margin-top: 6px;
    margin-left: 1px;*/
    /*    z-index: 100;
*/
    border-radius: 2px;
    background-color: #e3e3e3;
    opacity: .9;
    transition: opacity .3s ease;
    /*transform: scale(.65)*/
}

.dropdown_Grid:hover {
    opacity: 1
}

.dropdown__list_Grid li,
.dropdown__select_Grid {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    flex: 1;
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .3s ease;
    width: 38px;
    height: 28px;
}

.dropdown__list_Grid li span,
.dropdown__select_Grid span {
    font-family: CustomFont_SemiBold;
    font-size: 10px;
    color: #555;
}

.dropdown__list_Grid {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    /* left: 37px;*/
    max-height: 0;
    overflow-y: hidden;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 2px;
    background-color: #e3e3e3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    /*    z-index: 1;
*/
    opacity: 0;
    pointer-events: none
}

.dropdown__select_Grid:hover {
    background-color: transparent
}

.dropdown__select_Grid:hover span {
    color: #179eff
}

.dropdown__list_Grid li:hover {
    background-color: #f9f9f9
}

.dropdown--active_Grid .dropdown__list_Grid {
    max-height: 200px;
    opacity: 1;
    pointer-events: auto
}

.gridOptions_active {
    opacity: 0.5;
}

.dropdown_Grid {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.show-opacity {
    opacity: 1;
}


/*lut_area*/

#lut_area {
    position: relative;
    height: var(--image-height);
    margin-left: 2px;
    margin-top: 2px;
    transition: filter 0.3s ease-in-out;
}

#image_holder {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    /*    z-index: 2
*/
}

.Main-Img-Canvas {
    position: absolute;
    width: var(--image-width);
    height: var(--image-height);
    border-radius: 2px
}

#image {
    width: var(--image-width);
    height: var(--image-height);
    object-fit: cover;
    border-radius: 2px
}

#videoElement {
    position: absolute;
    width: var(--image-width);
    height: var(--image-height);
    object-fit: cover;
    border-radius: 2px;
    /*    z-index: 2;
*/
    display: none;
}

#imageLoader {
    position: absolute;
    width: var(--image-width);
    height: var(--image-height);
    object-fit: cover;
    display: none;
    border-radius: 2px;
    filter: brightness(50%);
    /*    z-index: 100000;
*/
}

#Tool {
    font-family: CustomFont_Medium;
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
    /*    z-index: 9;
*/
    bottom: 0;
    left: 0;
    width: var(--image-width);
    height: 28px;
    transform: scaleY(0);
    transform-origin: bottom;
    /* Add 10 pixels to the bottom */
    background-color: rgb(18, 18, 18);
    opacity: 0.5;
    color: #ffffff;
    font-size: .6em;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    /* outline: 2px solid red;
    outline-offset: 0;*/
    /*  box-shadow: 0px 0px 0px  2px rgba(0, 0, 0, 0.5);*/
    /* Second shadow */
    transition: all 0.2s ease;
    /*    z-index: 10000;*/
}

@keyframes fadeCycle {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

#quickTip {
    font-family: CustomFont_Medium;
    display: none;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    bottom: 0px;
    left: 0;
    width: var(--image-width);
    height: 28px;
    transform: scaleY(0);
    transform-origin: bottom;
    background-color: transparent;
    color: #9d9d9d;
    font-size: 0.5em;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    transition: all 0.2s ease;
    opacity: 0.1;
    /* animation: fadeCycle 3s infinite; Apply animation */
}

#Import_Lut_Folder {
    position: absolute;
    /*    z-index: 999;
*/
    bottom: 5px;
    /*   left: 6px;*/
    left: 23%;
    background-color: #e3e3e3;
    /* background-color: rgba(43, 43, 43, 0.377);*/
    border-radius: 1px;
    border: none;
    cursor: pointer;
    outline: 0;
    filter: grayscale(0%);
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
    /*    width: 100px;
    height: 28px;*/
    /*    max-width: 305px;*/
    width: calc(var(--image-width) /1.8 - 1px);
    height: calc(var(--image-width) /10 - 1px);
    max-height: 28px;
    min-height: 22px;
    display: none;
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
    /*    border: 1px solid rgb(255, 255, 255);
    border-radius: 3px;*/
}

#Import_Lut_Folder img {
    filter: invert(100%);
    width: auto;
    /*   margin-bottom: 0.5px;*/
    margin-top: 3px;
    margin-right: 1px;
    height: 12px;
    height: calc(var(--image-width) /20 - 1px);
    max-height: 14px;
    min-height: 6px;
    pointer-events: none;
}

#Import_Lut_Folder:hover {
    background: #9949EB;
    background: linear-gradient(135deg, #9949EB, #134275);
    background: #121212;
    background: linear-gradient(45deg, #121212, #303030);
    background: #E86100;
    background: #179eff;
    /*    filter: invert(100%);*/
}

#Export_Lut_Preview:hover {
    background: #9949EB;
    background: linear-gradient(135deg, #9949EB, #134275);
    background: #121212;
    background: linear-gradient(45deg, #121212, #303030);
    background: #E86100;
    background: #179eff;
    /*    filter: invert(100%);*/
}

#Apply-Lut_Button {
    position: absolute;
    /*    z-index: 999;
*/
    bottom: 5px;
    left: 6px;
    /*   left: calc(var(--image-width) / 2 - 51.7px);*/
    left: 30%;
    background-color: #e3e3e3;
    border-radius: 1px;
    border: none;
    cursor: pointer;
    outline: 0;
    filter: grayscale(0%);
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
    /*    width: 100px;
    height: 28px;*/
    width: calc(var(--image-width) /2.5 - 1px);
    height: calc(var(--image-width) /10 - 1px);
    max-height: 28px;
    min-height: 22px;
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
    display: none;
}

#Apply-Lut_Button img {
    filter: invert(100%);
    width: auto;
    /*   margin-bottom: 0.5px;*/
    margin-top: 3px;
    height: 14px;
    height: calc(var(--image-width) /20 - 1px);
    max-height: 14px;
    min-height: 12px;
}

#Apply-Lut_Button:hover {
    /*    background: #9949EB;
    background: linear-gradient(135deg, #9949EB, #134275);
    background: #121212;
    background: linear-gradient(45deg, #121212, #303030);
    background: #E86100;
    background: #151515;*/
    filter: invert(100%);
}

#Apply-Lut_Button.active {
    background: #e3e3e3;
    /* Green background to indicate success */
    transition: background 0.1s;
    filter: invert(0%);
}


/*#Apply-Lut_Button:active img {
    filter: invert(0%);
}

#Apply-Lut_Button:hover img {
        filter: invert(0%);
}*/


/*
#Import_Lut_Folder:hover img {
    /~    filter: invert(0%);~/
}*/

#refresh_button {
    position: absolute;
    padding: 0 8px;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: 0;
    opacity: .3;
    display: block;
    /*    z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001;
*/
    transition: all 0.2s ease;
    /*   filter: invert(100%);*/
}

#refresh_button:hover {
    opacity: 1;
}

#refresh_button img {
    width: auto;
    height: 12px
}

#activateNotification_button {
    position: absolute;
    padding: 0 8px;
    left: 1px;
    bottom: 3px;
    background-color: transparent;
    border: none;
    cursor: help;
    outline: 0;
    opacity: .6;
    display: block;
    transition: all 0.2s ease;
    animation: fadeCycle 3s infinite; 
}

#activateNotification_button span {
    position: relative;
    font-size: 10px;
    font-family: CustomFont_Medium;
    color: rgb(255, 255, 255);
}

#activateNotification_button:hover {
    animation: none; /* Stop animation on hover */
    opacity: 1; /* Ensure hover overrides animation */

    
}

/*smallGalery_PART*/

#smallGalery_PART {
    display: block;
    position: relative;
    /* Add this line to make it the positioning context */
}

#remove-All-image_button {
    position: fixed;
    width: 10px;
    height: 32px;
    margin-top: 1px;
    margin-left: 2px;
    border-radius: 1px;
    padding: 0;
    /* background-color: #1d1d1d;*/
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: 0;
    opacity: 1;
    display: block;
}

#remove-All-image_button img {
    width: auto;
    height: 8px;
    opacity: .5;
    margin-bottom: .55px;
    margin-left: -0.75px;
    filter: invert(30%);
}

#remove-All-image_button:hover {
    opacity: 1;
    /*  background-color: #cd0f0f;*/
    background-color: #1d1d1d
}

#remove-All-image_button:hover img {
    opacity: 1;
    filter: invert(70%);
    /* filter: invert(100%); */
}

.img-preview-small {
    display: inline-block;
    height: 34px;
    width: 34px;
    position: relative;
    left: 28px;
    margin-top: -0.4px;
}

.img-preview-small img {
    height: calc(100% - 3px);
    width: calc(100% - 3px);
    object-fit: cover;
    filter: grayscale(100%);
    cursor: pointer;
    border-radius: 1px;
    padding: 0;
    opacity: 0.7;
}

.img-preview-small:hover img {
    opacity: 1;
    filter: grayscale(25%) !important;
}

.remove-button_smaillimgs {
    position: absolute;
    top: 0px;
    right: 3.25px;
    font-size: 12px;
    opacity: 0;
    color: #fff;
    background-color: #2e2e2e;
    /*background-color: transparent;*/
    border: none;
    padding: 1px 5px;
    padding-bottom: 1px;
    border-radius: 1px;
    cursor: pointer;
    transform: scale(.65);
    transition: opacity 0.3s;
    transform-origin: top right;
    /* Add transition for smooth effect */
}

.img-preview-small:hover .remove-button_smaillimgs {
    opacity: 0.7;
    /* Adjust the initial opacity as needed */
}

.remove-button_smaillimgs:hover {
    color: #ed1c1c;
    opacity: 1;
    cursor: auto;
}

.img-small-selected {
    filter: grayscale(0)!important;
    opacity: 1!important;
}

#AddPlaceHolder {
    position: absolute;
    height: 35px;
    cursor: pointer;
    opacity: 1;
    background-color: var(--primary-color);
    /*background-color: red;*/
    left: 13.5px;
    margin-top: 0.35px;
    /*    z-index: 25;
*/
    padding-right: 0;
}

#AddPlaceHolderImg {
    width: 30px;
    height: auto;
    cursor: pointer;
    /*opacity: 0.3;*/
    filter: brightness(30%);
    padding: 1.5px;
    left: 14px;
    transition: filter 0.20s ease-in-out;
}

#AddPlaceHolderImg:hover {
    filter: brightness(100%);
    opacity: 1;
}

#AddPlaceHolder:active {
    transform: scale(0.9);
}

#smallGalery {
    height: 34px;
    /*28*/
    width: calc(var(--image-width) - 12px);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 2px;
    background-color: var(--SmallGalery-color);
    background-color: transparent;

    margin-top: 2px;
    margin-left: 18px
}

.smallGalery-img-holder .img-preview-small:first-child {
    margin-left: 0
}

#smallGalery::-webkit-scrollbar {
    height: 1.5px;
}

#smallGalery::-webkit-scrollbar-track {
    background: var(--scrollbar-track-colorGal);
    border-radius: 1px
}

#smallGalery::-webkit-scrollbar-thumb {
    background: rgb(76, 76, 76);
    /*var(--scrollbar-thumb-colorGal);*/
    border-radius: 1px
}

#smallGalery::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color)
}

#menu-container_PART {
    display: block
}

.inputWrapper {
    display: flex;
    align-items: center;
    padding: 0;
    background-color: rgb(26, 26, 26);
    width: calc(var(--image-width) - 0px);
    margin-left: 2px;
    margin-top: 2px;
    border: none;
    border-radius: 1.5px;
    outline: 0;
    height: 30px;
    transition: opacity 0.15s;
}

#searchInput {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: CustomFont_Medium;
    border: none;
    background-color: var(--search-input-background);
    background-color: transparent;
    color: #acacac;
    outline: 0;
    box-shadow: inset 0 0 0 0 var(--search-input-background);
    font-size: 12px;
    transition: box-shadow 0.15s, background-color 0.15s, color 0.15s, opacity 0.15s;
    padding: 2px 0;
    height: 16px;
    padding-left: 35px;
    opacity: 0.6;
    text-align: left;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 3px;
    transition: all 0.25s;
}

#searchInput:hover {
    font-family: CustomFont_Medium;
    /*   box-shadow: inset 0 -1px 0 0 rgb(238, 229, 229);*/
    background-color: rgb(31, 31, 31);
    background-color: transparent;
    color: #e4e4e4;
    opacity: 1;
    /*  height: 24px;*/
}

.inputWrapper:hover {
    background-color: var(--search-input-background);
}

#searchInput:focus .inputWrapper {
    background-color: var(--search-input-background);
}

#SortOptions {
    margin-top: 1px;
    opacity: 1;
    margin-right: 0;
    padding: 0px 8px;
    height: auto;
    background-color: transparent;
    filter: invert(50%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* optional: a little spacing between the input and the count */
}

#SortOptions:hover {
    filter: invert(100%);
}

#SortOptions img {
    width: 12px;
    height: auto;
}

#countSearch {
    color: #5d5d5d;
    font-family: CustomFont_Medium;
    font-size: 10px;
    opacity: 0.8;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* optional: a little spacing between the input and the count */
}

.countSearch_FoldersMode::before {
    font-family: Icons;
    content: "\ef36";
    margin-right: 2px;
    font-size: 9px;
    color: #5b5b5b;
    opacity: 0.8;
}

.countSearch_FilesMode::before {
    font-family: Icons;
    content: "\ede8";
    margin-right: 2px;
    font-size: 9px;
    color: #5b5b5b;
    opacity: 0.8;
}

#SearchIcon {
    position: absolute;
    left: 14px;
    height: auto;
    opacity: 0.2;
    filter: invert(70%);
    /* margin-top: 6.5px;*/
    pointer-events: none;
    /* background-color: red;*/
    padding: 0 0;
}

#SearchIcon img {
    width: 12px;
    height: auto;
}

#BookFolderFavsContainer {
    position: relative;
    top: 0;
    /*    z-index: 1;
*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    border-radius: 2px;
    width: var(--image-width);
    height: 30px;
}

.ShowBookMarks,
.ShowFavourites {
    flex: 0.5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0;
    background-color: rgb(32, 32, 32);
    /* background-color: transparent;*/
    border: none;
    cursor: pointer;
    outline: 0;
    opacity: .5;
    border-radius: 1px;
}

.ShowBookMarks {
    margin-right: 2px;
}

.ShowFavourites {
    margin-left: 2px;
}

.ShowBookMarks img {
    width: auto;
    height: 8px;
    margin-bottom: 1px;
    margin-right: 4px;
}

.ShowFavourites img {
    width: auto;
    height: 8px;
    margin-bottom: 1px;
    margin-left: 4px;
}

.ShowBookMarks:hover,
.ShowFavourites:hover {
    opacity: .7;
    /* background-color: #2a2a2a;*/
    background-color: rgb(42, 42, 42);
}

.ShowBookMarks.noBook,
.ShowFavourites.noFavs {
    filter: grayscale(100%);
    opacity: .2;
    /* pointer-events: none;
 /*  cursor:not-allowed;
   cursor:not-allowed;*/
}

.ShowBookMarks.noBook:hover,
.ShowFavourites.noFavs:hover {
    opacity: .2
}

.ShowFavourites.isActive {
    filter: grayscale(0);
    opacity: 1;
    /* border-bottom: 1px solid rgba(255, 196, 0, 0.76);*/
    /*   box-shadow: inset 0 -3px 0 -2px rgba(255, 196, 0, 0.76);*/
    background-color: rgb(42, 42, 42);
}

.ShowBookMarks.isActive {
    filter: grayscale(0);
    opacity: 1;
    /* // border-bottom: 1px solid rgba(0, 179, 255, 0.76);*/
    /*  box-shadow: inset 0 -3px 0 -2px rgba(0, 179, 255, 0.76);*/
    background-color: rgb(42, 42, 42);
}


/*dropdown folders */

.dropdown_Folders {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /*    z-index: 110;
*/
    border-radius: 1px;
    background-color: #1f1f1f;
    background-color: transparent;
    opacity: 1;
    transition: opacity 0.3s ease;
    height: 30px;
    /*margin-top: 1px;*/
}

.dropdown_Folders:hover {
    opacity: 1;
}

.dropdown_Folders__select {
    /* margin-right: 15px;*/
    width: 100%;
    font-family: CustomFont_Medium;
    /*  font-style: italic;*/
    height: 30px;
    /*    font-size: 7px;
   color: #adadad;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-color: rgb(32, 32, 32);
    cursor: pointer;
    border-radius: 1px;
    /*    margin-left: 1.5px;
    margin-right: 1.5px;*/
}

.dropdown_Folders__select span {
    font-family: CustomFont_Medium;
    /*font-style: italic;*/
    /*font-family: CustomFont_SemiBold;*/
    font-size: 11px;
    color: #adadad;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown_Folders__select:hover {
    background-color: rgb(29, 29, 29);
    background-color: #2a2a2a;
}

.dropdown_Folders__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    position: absolute;
    top: 100%;
    overflow-y: auto;
    list-style-type: none;
    padding: 1px;
    margin: 0;
    margin-top: 0.25px;
    border-radius: 1px;
    background-color: rgb(19, 19, 19);
    background-color: var(--primary-color);
    /* background-color:red;*/
    /*    z-index: 105;
*/
    opacity: 0;
    pointer-events: none;
    transform-origin: top;
    transform: scaleY(0);
    /* max-height: 205px;*/
    width: calc(var(--image-width) + 2px);
    left: -2.25px;
    /* padding-bottom: 2px;*/
    /*background-color: red;*/
}

.dropdown_Folders__select:hover span {
    color: #1683d1;
}


/*FolderlistItem*/

.dropdown_Folders__list li {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: left;
    font-family: CustomFont_Regular;
    text-align: left;
    padding-left: 7px;
    height: 42px;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #1d1d1d;
    border: 1px solid rgb(19, 19, 19);
}

.dropdown_Folders__list li:active {
    opacity: 1 !important;
    box-shadow: inset 0 0 0 0.5px #1683d1 !important;
}

.FolderOpenClick {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.dropdown_Folders__list li::before {
    font-family: Icons;
    content: "\ef36";
    margin-right: 10px;
    font-size: 10px;
    color: #5b5b5b;
}

.dropdown_Folders__list li span {
    /*   font-family: CustomFont_Medium;*/
    font-size: 12px;
    color: #8e8e8e;
    padding-right: 6px;
}

.spanDDType {
    opacity: 0.4;
    color: #808080;
    margin-left: auto;
    /* Pushes to the right side */
}

.spanDDFoldersLength {
    opacity: 0.5;
    font-style: italic;
    color: #808080;
}

.spanDD {
    opacity: 1;
    color: #808080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.NofolderSystemLuts {
    opacity: 0.5 !important;
    /*  background-color: transparent  !important;  */
    /* border: 2px solid #5f5f5f  !important;  */
    /*  box-shadow: inset 0 0 0 1px #5f5f5f !important;   /~ Inset border effect ~/*/
}

.NofolderSystemLuts:hover {
    cursor: alias;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 0.2px #cccccc !important;
    /* background-color: rgb(100, 100, 100)  !important;   */
    transition: all 0.2s ease;
}

.NofolderSystemLuts::before {
    font-family: Icons;
    content: "\ec5b" !important;
    margin-right: 6px !important;
    margin-left: -1px !important;
    font-size: 8.4px !important;
    color: #f5f5f5 !important;
    padding-right: 6px !important;
    padding-left: 2px !important;
    animation: colorBreathe 2s ease-in-out infinite;
}

.Nofolder {
    opacity: 0.5 !important;
    /*  background-color: transparent  !important;  */
    /* border: 2px solid #5f5f5f  !important;  */
    /*  box-shadow: inset 0 0 0 1px #5f5f5f !important;   /~ Inset border effect ~/*/
}

.Nofolder:hover {
    cursor: alias;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 0.2px #cccccc !important;
    /* background-color: rgb(100, 100, 100)  !important;   */
    transition: all 0.2s ease;
}

.Nofolder::before {
    font-family: Icons;
    content: "\ec3e" !important;
    margin-right: 6px !important;
    margin-left: -1px !important;
    font-size: 8.4px !important;
    color: #f5f5f5 !important;
    padding-right: 6px !important;
    padding-left: 2px !important;
    animation: colorBreathe 2s ease-in-out infinite;
}

@keyframes colorBreathe {
    0% {
        /*  transform: scale(1);*/
        opacity: 0.5;
    }
    50% {
        /* transform: scale(1.1);*/
        opacity: 1;
    }
    100% {
        /*  transform: scale(1);*/
        opacity: 0.5;
    }
}

.dropdown_Folders__list li:hover {
    background-color: #2a2a2a;
}

.dropdown_Folders__list li:hover span {
    color: #179eff;
}

.dropdown_Folders--active .dropdown_Folders__list {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
}

.dropdown_Folders__list::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.dropdown_Folders__list::-webkit-scrollbar-track {
    background: var(--scrollbar-track-colorList);
    border-radius: 1px;
}

.dropdown_Folders__list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-colorList);
    border-radius: 1px;
}

.dropdown_Folders__list::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}


/*.B_F_F_btns{
    background-color: rgb(35, 35, 35);
}*/


/* +_ BookMarks*/

#bookmarktags_section {
    position: relative;
    margin-top: -1px;
    width: calc(var(--image-width) - 1px);
    padding-bottom: 0;
    /*    border-radius: 2px;*/
    left: 2px;
    background-color: transparent;
}

#bookmarktags_wrap {
    background-color: rgb(07, 07, 07);
    width: calc(var(--image-width) - 0px);
    margin-left: 2px;
    padding-bottom: 2px;
    border-radius: 2px;
    display: none;
}

#bookmarktags {
    width: calc(var(--image-width) + 8px);
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    /* align items to the left */
    margin-left: -10px;
    position: relative;
    height: 32px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 1px;
    margin-bottom: 10px;
}

#tag-list-Bookmark {
    margin-top: 0;
    margin-left: 8px;
}

#tag-list-Bookmark .tag-item {
    font-family: CustomFont_Medium;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /* put content to the left */
    align-items: center;
    /*   background-color: #ddd;s
    background-color: #262626;*/
    color: #cecece;
    background-color: #ddd;
    color: #333;
    font-style: normal;
    padding: 8px 4px;
    border-radius: 1.5px;
    margin-right: 2px;
    margin-bottom: 2px;
    font-size: 8.5px;
    cursor: pointer;
    /*    z-index: 1;
*/
    white-space: nowrap;
    /* Add this line to keep the text on a single line */
    opacity: 1;
    filter: brightness(100%);
    transition: filter 0.2s ease;
}

#tag-list-Bookmark .tag-item:hover {
    filter: brightness(130%);
    color: rgb(22, 131, 209);
}

#tag-list-Bookmark .DefaultFolderTagsClass-tag-item {
    /* filter: invert(99%);*/
    background-color: #1f1f1f;
    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    color: rgb(184, 184, 184);
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 8px;*/
    /* space between items, adjust as necessary */
}

.tag-checkbox:checked {
    background-color: #179eff;
}

@keyframes colorChangeCheck {
    0% {
        background-color: rgb(236, 236, 236);
    }
    50% {
        background-color: rgb(134, 134, 134);
    }
    100% {
        background-color: #179eff;
    }
}

.tag-checkbox:checked {
    animation: colorChangeCheck 0.5s forwards;
}

.tag-checkbox:focus {
    outline: 0
}

.tag-checkbox {
    margin-right: 5px;
    appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
    background-color: #959595;
    pointer-events: none
}

@keyframes colorChange {
    0% {
        background-color: rgb(236, 236, 236);
    }
    50% {
        background-color: rgb(134, 134, 134);
    }
    100% {
        background-color: #ff8b17;
    }
}

.exclude-checkbox:checked {
    animation: colorChange 0.5s forwards;
}

.exclude-checkbox:focus {
    outline: 0
}

.exclude-checkbox {
    margin-right: 1px;
    margin-left: 5px;
    appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
    background-color: #464646;
    cursor: pointer;
}

.exclude-checkbox:hover {
    background-color: rgb(255, 119, 35);
}

#tag-list-Bookmark .tag-remove-button {
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    margin-left: auto;
    font-size: 7px;
}

#tag-list-Bookmark .tag-remove-button:hover {
    color: red
}

#bookmarktags::-webkit-scrollbar {
    width: var(--scrollbar-width)
}

#bookmarktags::-webkit-scrollbar-track {
    background: var(--scrollbar-track-colorList);
    border-radius: 1px
}

#bookmarktags::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-colorList);
    border-radius: 1px
}

#bookmarktags::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

#resizeHandleTagsGridLine {
    position: absolute;
    background-color: transparent;
    width: 100%;
    margin-top: -5px;
    cursor: ns-resize;
    height: 14px;
    opacity: 0;
    /*    z-index: 1;
*/
    transition: all .15s ease;
}

#resizeHandleTags {
    transform: scale(0.7);
    /*    flex: 0.4;
    display: flex;
    justify-content: center;
    align-items: center;*/
    position: absolute;
    right: calc(var(--image-width)/ 2 - 10px);
    font-size: 7px;
    margin-top: 3px;
    background-color: transparent;
    /* border-radius: 3px;*/
    /*    background-color:transparent;*/
    padding: 7px 7px;
    border-radius: 5px;
    /*    z-index: 101;
*/
    /*    height: 10px;*/
    opacity: 1;
    pointer-events: none;
}

#resizeHandleTagsGrid_GuideLine {
    position: absolute;
    background-color: rgb(205, 205, 205);
    /*    width: calc(var(--image-width) + 20px);
    left: -10px;*/
    width: calc(var(--image-width) + 0px);
    left: -2px;
    margin-top: 8.5px;
    border-radius: 2px;
    /*    z-index: 101;
*/
    height: 2px;
    pointer-events: none;
}

#resizeHandleTags img {
    width: auto;
    height: 12px;
}

#resizeHandleTagsGridLine:active {
    opacity: 1;
}


/* +_ Tags*/

.tag-section {
    width: calc(var(--image-width) - 25px);
    border-radius: 2px;
    margin-top: 16px;
}

.tag-input-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tag-input {
    flex: 1;
    border: none;
    border-radius: 2px;
    background-color: #fff;
    font-size: 10px;
    padding: 6px;
    min-width: 25px;
    outline: none;
}

.tag-add-button,
.tag-exit-button,
.tag-copy-button,
.tag-clear-button {
    flex: 0.15;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: clamp(8px, 2vw, 10px);
    padding: 6px;
    font-family: CustomFont_Regular;
    background-color: #363636;
    color: #fff;
    white-space: nowrap;
    margin-left: 2px;
}

.tag-add-button:hover {
    background-color: #444;
    color: #179eff
}

.tag-exit-button:hover {
    background-color: #444;
    color: #ffb700
}

.tag-copy-button:hover {
    background-color: #444;
    color: #7bff00
}

.tag-clear-button {
    font-family: CustomFont_Medium;
    color: rgba(0, 0, 0, .5)
}

.tag-clear-button:hover {
    background-color: #d10f0f;
    color: rgba(19, 19, 19, 1);
    opacity: 1
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}

.tag-item {
    font-family: CustomFont_Medium;
    flex: 1;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ddd;
    color: #333;
    font-style: italic;
    /*  padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;*/
    padding: 5px;
    border-radius: 2px;
    margin-right: 2.5px;
    margin-bottom: 2.5px;
    font-size: 10.5px;
    white-space: nowrap;
    /* Add this line to keep the text on a single line */
}

.tag-remove-button {
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    margin-left: 0;
    font-size: 8px;
}

.tag-item:hover {
    background-color: #1e1e1e;
    color: rgb(206, 206, 206);
}

.tag-item:hover .tag-remove-button {
    color: red
}

.AddedTagOK {
    color: rgb(23, 158, 255);
    background-color: #232323;
    /*    background-color: #191919;    
    color: rgb(23, 158, 255);*/
    box-shadow: 0 0 0 0.5px rgb(23, 158, 255);
}

@keyframes shake {
    0% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(-1.5px)
    }
    /*   50% { transform: translateX(-1.5px) }*/
    75% {
        transform: translateX(-1.5px)
    }
    100% {
        transform: translateX(0)
    }
}

.shake {
    /*  animation: shake 0.20s;
    animation-iteration-count: 2;*/
    color: #f40404;
    background-color: #1b1b1b;
    box-shadow: 0 0 0 0.5px rgba(255, 0, 0, 0.799);
}

.remove-button {
    position: absolute;
    right: 3px;
    margin-top: -.5px;
    font-size: 9px;
    opacity: .2;
    color: #a7a7a7;
    background-color: transparent;
    border: none;
    padding: 4px 4px;
    cursor: pointer
}

.remove-button:hover {
    color: #ed1c1c;
    opacity: 1
}

.button-wrapper {
    position: absolute;
    top: 0;
    right: 10px;
}

.hash-button,
.favs-button {
    position: absolute;
    font-size: 9.5px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0;
    /* Remove any default margins */
    /*  margin-top: 1px;*/
    padding: 10px 6px;
    opacity: .5;
    outline: 0;
    right: 0;
}

.hash-button {
    top: 0.75px;
    right: 20px;
}

.favs-button:hover,
.hash-button:hover {
    opacity: 1;
}

.favs-button::after {
    font-family: Icons;
    content: "\ec79";
    color: #646464;
}

.favs-button_RemoveLiked::after {
    font-family: Icons;
    content: "\ec7b";
    color: #ffbd17;
}

.hash-button::before {
    font-family: Icons;
    content: '\eec0';
    right: 0;
    color: #4e4e4e;
}

.hash-button.has-tags::before {
    opacity: .7;
    color: #17aeff;
}

.hash-button.Close_Icon_::before {
    content: '\ef7c';
    color: #ff7c17;
}

.hash-button.BookMark_Icon_::before {
    content: '\eec0';
}

.hash-button:hover {
    color: #17b9ff;
}

.hash-button:hover::before {
    opacity: 1;
}

#NoResults_ {
    pointer-events: none;
    display: none;
    height: 45px;
}

#NoResultsSpan {
    font-family: CustomFont_Medium;
    font-size: 14px;
    color: rgba(200, 3, 3, 0.584);
    position: absolute;
    background-color: transparent;
    height: 45px;
    padding-top: 7px;
    padding-left: 7px;
    margin-left: 2px;
    margin-top: 2px;
    border-radius: 2px;
    text-align: left;
    /*    z-index: 1;
*/
    pointer-events: none;
    cursor: default;
    display: block;
}

#NoResultsSpanExtra {
    font-family: CustomFont_Medium;
    font-size: 12px;
    color: rgba(217, 217, 217, 0.584);
    position: absolute;
    background-color: rgb(16, 16, 16);
    width: calc(var(--image-width) - 0px);
    height: 19px;
    padding-top: 26px;
    margin-left: 2px;
    margin-top: 2px;
    border-radius: 2px;
    text-align: left;
    padding-left: 7px;
    cursor: pointer;
}

#NoResultsSpanExtra:hover {
    color: rgb(0, 136, 255)
}

#Grid_Container_PART {
    display: block;
    transition: filter 0.3s ease-in-out;
}

#Grid_Container::-webkit-scrollbar {
    width: var(--scrollbar-width)
}

#Grid_Container::-webkit-scrollbar-track {
    background: var(--scrollbar-track-colorList);
    border-radius: 1px
}

#Grid_Container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-colorList);
    border-radius: 1px
}

#Grid_Container::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color)
}
/* Add this CSS to your stylesheet */
.hidden {
    visibility: hidden;
}
#Grid_Container {
    opacity: 1;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0.5px;
    margin-left: 2px;
    border-radius: 2px;
    width: calc(var(--image-width));
    /* width: var(--image-width);*/
    min-height: 0;
    /*height: 120px;*/
    /*  height: calc(var(--image-height) * 0.96);*/
    /* height: calc(var(--image-height));*/
    height: 33.33vh;
    /* approximately one-third of the viewport height */
    overflow-y: auto;
    color: #b3b3b3;
    overflow-x: hidden
}

#lut_area_GRID {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-bottom: 2px;
    /*    background-color: red;*/
}

.CANVAS_GRID {
    width: calc(var(--image-width) / 2 - 7.5px);
    height: calc(var(--image-height) / 2 - 7.5px);
    border-radius: 1.5px;
    /*    border: 1px solid var(--primary-color);
    box-sizing: border-box;*/
    margin: 0 3px 3px 0;
    /* Top, Right, Bottom, Left margin in percentages */
    /* transition: all .15s ease;*/
}


/*/~updateGridOption_new~/
#lut_area_GRID {
    display: block;

    padding-bottom: 0; /~ Removed unnecessary spacing at the bottom ~/
}

.CANVAS_GRID {
    display: inline-block; /~ Keeps elements in a line ~/
    width: calc(var(--image-width) / 2 - 7.5px);
    height: calc(var(--image-height) / 2 - 7.5px);
    border-radius: 1.5px;
    line-height: 0;
    box-sizing: border-box;
    vertical-align: top; /~ Aligns items to the top ~/
    padding: 0;
    margin: 0 2px 2px 0; /~ Uniform margsin for right and bottom ~/
}
*/

.CANVAS_GRID.selected {
    filter: brightness(110%);
    opacity: 1;
    border: 2px solid rgb(230, 230, 230);
    box-shadow: 0 0 15px rgba(204, 204, 204, 0.5);
    box-sizing: border-box;
   /* transition: all 0.1s ease-in-out;*/
}

#resizeHandleGridLine,
#resizeHandleTagsGridLine {
    position: absolute;
    background-color: transparent;
    width: 100%;
    margin-top: -5px;
    /* Reduce to make it smaller */
    cursor: ns-resize;
    height: 10px;
    /* Reduce height to make it smaller */
    opacity: 0;
    transition: all 0.15s ease;
}

#resizeHandleGrid,
#resizeHandleTags {
    transform: scale(0.7);
    position: absolute;
    right: calc(var(--image-width) / 2 - 10px);
    font-size: 7px;
    margin-top: 2px;
    background-color: transparent;
    border-radius: 5px;
    padding: 7px;
    opacity: 1;
    pointer-events: none;
}

#resizeHandleGrid_GuideLine,
#resizeHandleTagsGrid_GuideLine {
    position: absolute;
    background-color: rgb(205, 205, 205);
    width: calc(var(--image-width) + 0px);
    /* Simplified width calculation */
    left: 2px;
    margin-top: 6.5px;
    border-radius: 2px;
    height: 2px;
    pointer-events: none;
}

#resizeHandleTagsGrid_GuideLine {
    left: -2px;
}

#resizeHandleGrid img,
#resizeHandleTags img {
    /* Fixed repeated selector */
    width: auto;
    height: 12px;
}

#resizeHandleGridLine:active,
#resizeHandleTagsGridLine:active {
    /* Fixed repeated selector */
    opacity: 1;
}

#List_Container_PART {
    display: block;
}

#List_Container {
    /*    min-height: 0;
max-height: 80px;*/
    height: 80px;
    width: var(--image-width);
    background-color: var(--primary-color);
    box-sizing: border-box;
    margin-top: 2px;
    margin-left: 2px;
    border-radius: 2px;
    bottom: 0;
    /*    z-index: 5;
*/
}

#List_Container::-webkit-scrollbar {
    width: var(--scrollbar-width)
}

#List_Container::-webkit-scrollbar-track {
    background: var(--scrollbar-track-colorList);
    border-radius: 1px
}

#List_Container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-colorList);
    border-radius: 1px
}

#List_Container::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color)
}

#lutList {
    list-style: none;
    padding: 0;
    margin: 0;
    width: var(--image-width);
    border: none;
    background: var(--LutList-color);
    color: #b3b3b3
}

.lutList-ShowFavourites_active {
    border-top: 1px solid #ffc400a7
}

.lutList-ShowBookMarks_active {
    border-top: 1px solid #00b3ffa5
}

.LUTlistitem {
    font-family: CustomFont_Regular;
    padding: 10px 10px;
    border-bottom: 0 solid #282828;
    cursor: pointer;
    text-align: left;
    transition: all .3s ease;
    position: relative;
    color: #787878;
    /*    height: 27px;*/
    width: calc(var(--image-width) - 26.5px);
    font-size: 10px;
    border-radius: 3px;
}

.LUTlistitem span {
    width: calc(var(--image-width) - 70px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    pointer-events: none;
    margin-bottom: -2px;
}

.LUTlistitem:last-child {
    border-bottom: none
}

#lutList .LUTlistitem {
    border-bottom: 1.5px solid rgb(17, 17, 17);
}

#lutList .LUTlistitem:hover {
    background: #282828;
    color: #fff
}

#lutList .LUTlistitem.selected {
    color: var(--secondary-color);
    background: #282828
}


/* +_ PopUp Save*/

.popup_ScreenshotBlock {
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(30, 30, 30, 0.5), rgba(0, 0, 0, 0.5));
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    justify-content: center;
    /* Adjusted to align children to the top */
    align-items: center;
    /*    z-index: 9999999999;
*/
}

.popup_LutName {
    display: flex;
    flex-direction: column;
    /*      background: linear-gradient(rgba(30, 30, 30, 0.91), rgba(0, 0, 0, 0.91));*/
    background: #000000;
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.85) 73%, rgba(30, 30, 30, 0.85) 100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    justify-content: center;
    /* Adjusted to align children to the top */
    align-items: center;
    /*    z-index: 9999999999;
*/
}

.popup_LutName-content {
    background-color: #161616;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: calc(var(--image-width) + 100px);
    border: 1px solid #1a1a1a;
    text-align: center;
    transform: scale(0.6);
    /*     margin-top: calc(var(--image-height) - 38px);*/
}

#HeaderPop {
    font-size: 28px;
    color: #909090;
}

#textInput_LutName {
    width: 100%;
    padding: 20px;
    outline: none;
    border: 1px solid #292929;
    border-radius: 5px;
    transition: border-color 0.3s;
    background-color: #232121;
    color: rgb(255, 255, 255);
    box-sizing: border-box;
    font-size: 22px;
    margin-bottom: 1px;
}

.popup_LutName-content h2 {
    color: #626262;
    font-family: Arial, sans-serif;
    font-size: 18px;
    margin-top: 2px;
    margin-bottom: 22px;
    margin-left: 6px;
    text-align: left;
    user-select: none;
    /* Align the title to the left */
}

#ButtonsHolder {
    display: flex;
    flex-direction: column;
    /*gap: 5px;*/
}


/* Features List Customization */

.popup_LutName-content ul {
    text-align: left;
    /* Aligns text of list items to the left */
    padding-left: 20px;
    /* Proper padding to align with other content */
    list-style: inside;
    /* Positions the bullet inside to align neatly */
    margin-top: -10px;
    /* Space above the list */
    margin-bottom: 25px;
    /* Space below the list */
}

.popup_LutName-content li {
    color: rgb(112, 112, 112);
    /* Ensures the text color is white for visibility */
    margin-bottom: 4px;
    /* Space between list items */
    font-size: 18px;
    /* Adjusts the font size for better readability */
    font-weight: 200;
    /* Lighter font weight, adjust as needed */
}

.FormBtn_LutName {
    flex: 1;
    /* Fill available vertical space */
    /* Center vertically */
    padding: 18px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 8px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 18px;
}

.FormBtn_LutName#okBtn {
    background-color: #d0d0d0;
    color: #1f1f1f;
    outline: none;
}

.FormBtn_LutName#okBtn:hover {
    background-color: #3498db;
    color: #fff;
}

.FormBtn_LutName#howBtn {
    background-color: transparent;
    background-color: #000000;
    color: rgb(0, 176, 224);
    outline: none;
}

.FormBtn_LutName#howBtn:hover {
    background-color: #3498db;
    color: #fff;
}

.FormBtn_LutName#cancelBtn {
    background-color: transparent;
    color: rgb(138, 138, 138);
    outline: none;
}

.FormBtn_LutName#cancelBtn:hover {
    background-color: #2c2c2c;
    color: white;
}

#textInput_LutName::placeholder {
    color: #595959;
    /* or any color you want */
}

.context_Menu {
    position: absolute;
    width: 160px;
    /*    display: flex;*/
    display: none;
    flex-direction: column;
    padding: 2px;
    /* background-color: rgba(35, 35, 35, 0.9);*/
    background-color: rgb(32, 32, 32);
    box-shadow: rgba(29, 29, 29, 0.2) 0px 8px 24px;
    border-radius: 2.5px;
    animation: open 0.18s;
    transform-origin: top left;
    border: 1px solid rgb(18, 18, 18);
    /*    z-index: 100000000000000000000000000000000000000000000000000000000000000000000000000;
*/
}

.context_Menu button {
    font-family: CustomFont_Medium;
    font-size: 10px;
    background: none;
    padding: 8px;
    border: none;
    text-align: left;
    cursor: pointer;
    color: #cecece;
    border-radius: 2.5px;
    /* border-bottom: 1px solid #f1f1f1; /~ A subtle separator ~/*/
}

.context_Menu hr {
    /*    border: none;
    height: 1px;
    background-color: rgba(91, 91, 91, 0.9);
    margin: 2px 0;*/
    border: 0;
    border-bottom: 1px solid rgba(91, 91, 91, 0.9);
    /* Adjust margin as needed */
}

.context_Menu button:hover {
    background-color: #e9ecef;
    color: #474747;
}

.small-iconBookmarkContext {
    width: 11px;
    height: 11px;
    /*    margin-bottom: -1px;
    margin-right: 6px;
    margin-left: -2px;*/
    margin-right: 6px;
    margin-left: -4px;
    margin-bottom: -1.5px;
    filter: grayscale(100%);
    opacity: 0.5;
    /* This adds spacing to the right of each image */
}

.small-iconFavouritesContext {
    width: 12px;
    height: 12px;
    /*    margin-right: 8px;
    margin-bottom: -1px;*/
    margin-right: 6px;
    margin-left: -4px;
    margin-bottom: -1.5px;
    filter: grayscale(100%);
    opacity: 0.5;
    /* This adds spacing to the right of each image */
}

.small-iconFavouritesContextHasFavs {
    width: 12px;
    height: 12px;
    /*    margin-right: 8px;
    margin-bottom: -1px;*/
    margin-right: 6px;
    margin-left: -4px;
    margin-bottom: -1.5px;
    filter: grayscale(0);
    opacity: 1;
    /* This adds spacing to the right of each image */
}

@keyframes open {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

#tooltip {
    /*  width: calc(var(--image-width)/ 4 - 4px);*/
    height: auto;
    position: absolute;
    display: none;
    font-family: CustomFont_SemiBold;
    font-size: 14px;
    background-color: rgba(32, 32, 32, 1);
    box-shadow: rgba(29, 29, 29, 0.2) 0px 8px 24px;
    color: rgb(179, 179, 179);
    padding: 7px 14px;
    border-radius: 3.5px;
    border: 1px solid rgb(18, 18, 18);
    pointer-events: none;
    transform: scale(0.80);
    transform-origin: top left;
    line-height: 1.5;
}

#tooltip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

#tooltip .dimmed {
    opacity: 0.7;
    /* Adjust the opacity value as needed */
    font-size: 12px;
    color: #999;
    /* You can also adjust the text color */
}

#tooltip .small-iconBookmarkTooltip {
    width: 11px;
    height: 11px;
    margin-bottom: -1px;
    margin-right: 6px;
    margin-left: -2px;
    filter: grayscale(100%);
    opacity: 0.3;
    /* This adds spacing to the right of each image */
}

#tooltip .small-iconFavouritesTooltip {
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    filter: grayscale(100%);
    opacity: 0.3;
    /* This adds spacing to the right of each image */
}

#liveContainer {
    display: none;
    position: absolute;
    width: 35px;
    height: auto;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.708);
    padding: 4px 2.5px;
    border: 1px solid rgb(255, 255, 255);
    pointer-events: none;
}

#redCircle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: red;
    margin-right: 5px;
    /* some space between the circle and the text */
    animation: pulse 1.5s infinite;
    margin-left: 2px;
    pointer-events: none;
}

#liveText {
    font-size: 8px;
    position: absolute;
    padding: 1px 5px;
    /* adjust padding as needed */
    margin-top: -9.5px;
    margin-left: 10px;
    pointer-events: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}


/*infoholders*/

#infoHolder {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 99px;
    height: 120px;
    background-color: rgba(20, 20, 20, 0.7);
    border-radius: 2.5px;
    /*    z-index: 100000000000000000000000000000000000000000000000000000000000000000000000000;
*/
    transform: scale(0.7);
    transform-origin: top right;
    display: none;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

#color-palette {
    position: absolute;
    top: 1px;
    right: 0;
    margin-top: -1px;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    /* Allows items to wrap onto new columns */
    align-items: center;
    padding: 6px;
    /*    z-index: 8;
*/
    opacity: 1;
    height: 60px;
    /* Set height to allow only 5 blocks vertically */
    max-width: calc(11px * 5);
    /* Set maximum width to the width of 5 blocks to limit the number of columns */
}

.color-block {
    width: 11px;
    height: 11px;
    margin: 0.5px 0.5px;
    border-radius: 1.5px;
    box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.51);
    cursor: pointer;
}

#canvasCurves {
    position: absolute;
    top: 6px;
    right: 34px;
    border-radius: 2.5px;
    /*    z-index: 8;
*/
    /*pointer-events: none;*/
    background-color: var(--primary-color);
    background-color: rgb(29, 29, 29);
    /*background-color: transparent;*/
    display: block;
    width: calc(var(--image-width)/ 4 - 4px);
    height: calc(var(--image-width)/ 4 - 4px);
    width: 59px;
    height: 59px;
    min-width: 28px;
    min-height: 28px;
    /* max-width:58px;
    max-height: 58px;*/
    cursor: pointer;
    /*opacity: 0.8;*/
    /* border: 0px solid rgba(220, 220, 220, 0.7);*/
    box-shadow: 0 0 0 1px rgba(39, 39, 39, 1);
    /* This mimics a border with shadow */
    overflow: auto;
    /*    resize: both;*/
}

#canvasHistogram {
    position: absolute;
    top: 69px;
    right: 6px;
    border-radius: 2.5px;
    /*    z-index: 8;
*/
    /*  pointer-events: none;*/
    background-color: rgb(29, 29, 29);
    /* background-color: var(--primary-color);*/
    cursor: pointer;
    display: block;
    width: 86px;
    height: 28px;
    border-left: 1px solid rgba(39, 39, 39, 1);
    border-right: 1px solid rgba(39, 39, 39, 1);
    /*    min-width: 28px;
    min-height: 28px;*/
}

#RampCanvas {
    position: absolute;
    top: 101px;
    right: 6px;
    border-radius: 2.5px;
    /*    z-index: 8;
*/
    /*  pointer-events: none;*/
    background-color: rgb(29, 29, 29);
    /* background-color: var(--primary-color);*/
    cursor: pointer;
    display: block;
    width: 88px;
    height: 14px;
    /*    border-left: 1px solid rgba(39, 39, 39, 1);
    border-right: 1px solid rgb(255, 255, 255);*/
    /*    min-width: 28px;
    min-height: 28px;*/
}


/*//=================================================
//                                                 
//  #####  ####    ##  ######   #####   #####    
//  ##     ##  ##  ##    ##    ##   ##  ##  ##   
//  #####  ##  ##  ##    ##    ##   ##  #####    
//  ##     ##  ##  ##    ##    ##   ##  ##  ##   
//  #####  ####    ##    ##     #####   ##   ##  
//                                                 
//=================================================
*/

.editor_ScreenshotBlock {
    display: none;
    flex-direction: column;
    background: linear-gradient(rgba(30, 30, 30, 1), rgba(0, 0, 0, 1));
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    justify-content: center;
    /* Adjusted to align children to the top */
    align-items: center;
    margin-top: calc(var(--image-height) + 41px);
    /*    z-index: 999999999;
*/
}

.editor_wrapper .editor-panel {
    padding: 7px 10px;
    border-radius: 5px;
    background-color: rgb(32, 32, 32);
    transform: scale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--image-width) - 18px);
    height: 100%;
}

#headereditor {
    display: flex;
    justify-content: left;
    /*background-color: rgb(25, 25, 25);*/
    border-radius: 3px;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    margin-bottom: 10px;
    margin-left: -4px;
    /* padding: 10px 5px;*/
}

.header-divider {
    margin: 10px 0;
    border: none;
    border-top: 1px solid #ccc;
}

.reset-All_filters {
    /*   margin-left: auto; */
    max-width: 20px;
    margin-left: -4px;
    /* This will push the button to the right-most side */
}

.reset-All_filters img {
    width: 10px;
    /* adjust as necessary */
    height: 10px;
    /* adjust as necessary */
}

#Reset_All {
    background-color: transparent;
    outline: none;
    opacity: 0.1;
}

#Reset_All:hover {
    opacity: 1;
    cursor: pointer;
}

.editor-panel .title {
    display: block;
    font-size: 10px;
    color: #b6b6b6;
}

#CloseEditor {
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 18px;
    min-width: 18px;
    background-color: transparent;
}

#CloseEditor:hover,
#CloseEditor:hover img {
    color: white;
    filter: grayscale(0%) brightness(100%);
    opacity: 1;
}

#CloseEditor img {
    width: 6px;
    height: 6px;
    filter: grayscale(100%) brightness(250%);
    opacity: 1;
}

#ExportSection {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin-top: 12px;
    margin-bottom: 5px;
}

#ExportLut_ {
    /* max-width: 66px;
min-width: 66px;*/
    background-color: transparent;
    border: 1px solid rgba(58, 58, 58, 0.419);
}

#ExportLut_:hover,
#ExportLut_:hover img {
    background-color: #2c2c2c;
    color: white;
    opacity: 1;
}

#ExportLut_ img {
    width: 8px;
    height: 8px;
    margin-left: 4px;
    opacity: 0.2;
}


/*.editor-panel .slider {
    /~ background-color: rgb(25, 25, 25);
    border-radius: 3px;~/
}
*/

#editorslider {
    margin-left: -0.5px;
}

.editor-panel .options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    /* gap: 6px;*/
}

.editor-panel button {
    outline: none;
    height: 17px;
    font-size: 7px;
    color: #6C757D;
    background: #dfdfdf;
    border-radius: 3px;
    margin-bottom: 0px;
    margin-right: 0px;
    border: 0px solid #aaa;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0px 1px;
    /* This will center the content horizontally */
    /* Make each button take up equal width */
}

.editor-panel .options button {
    min-width: 60px;
    font-size: 6px;
}

.editor-panel button span {
    margin-left: 5px;
    /* Adjust as needed */
}

.editor-panel button:hover {
    background: #f5f5f5;
}

.filter button.active {
    color: #fff;
    border-color: #5372F0;
    background: #5372F0;
}

.filter .slider .filter-info {
    display: flex;
    color: #929292;
    font-size: 9px;
    align-items: center;
    justify-content: left;
    gap: 3px;
    margin-bottom: -8px;
    margin-top: 5px;
    user-select: none;
}

.filter-info .value {
    margin-left: auto;
    pointer-events: none;
}

.filter-info .name {
    user-select: none;
    pointer-events: none;
}

.filter-info {
    margin-left: -6px;
}

.reset-This_filters {
    /*   margin-left: auto; */
    max-width: 20px;
    margin-left: -4px;
    /* This will push the button to the right-most side */
}

.reset-This_filters img {
    width: 10px;
    /* adjust as necessary */
    height: 10px;
    /* adjust as necessary */
}

#Reset_This {
    font-size: 20px;
    background-color: transparent;
    outline: none;
    opacity: 0.2;
    /*    z-index: 100;
*/
}

#Reset_This:hover {
    opacity: 1;
    cursor: pointer;
}

.filter .slider {
    margin-left: 2px;
}

.filter .slider input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    height: 2px;
    /* Reduced height for a slimmer track */
    border-radius: 1px;
    /* Soften the corners */
    background: #565656;
    /* Light grey background */
    outline: none;
    transition: opacity 0.2s;
    background: linear-gradient(to right, #565656 50%, rgb(64, 64, 64)50%);
    /* starting state: half green, half grey */
    /* Updated gradient */
    background: linear-gradient(to right, #565656 50%, #D3D3D3 50%, #D3D3D3 50%, #565656 50%);
    outline: none;
}

.filter .slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    width: 8px;
    /* Set a specific size for the thumb */
    height: 8px;
    border-radius: 50%;
    /* Circular shape */
    background: #9c9c9c;
    /* Accent color */
    cursor: pointer;
    /* Cursor changes to hand-over style on hover */
    transition: background 0.3s, transform 0.3s;
    /* Smooth transition for hover effects */
}

.filter .slider input[type="range"]::-webkit-slider-thumb:hover {
    background: rgb(255, 255, 255);
    /* Darken the thumb color on hover */
    transform: scale(1.1);
    /* Slightly increase the size on hover */
}


/*video modal*/

#videoFrameModal {
    position: absolute;
    margin: 0;
    top: 26px;
    width: 100%;
    height: 2000px;
    background-color: rgb(24, 24, 24);
    overflow: hidden;
    display: none;
    /*    z-index: 100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;
*/
}

.video-container {
    position: relative;
    width: 100%;
    height: auto;
    background-color: rgb(24, 24, 24);
}

#canvasElement {
    width: 100%;
    height: auto;
    filter: brightness(50%);
    transition: filter 500ms ease;
    /* Adjust duration and timing function as needed */
}


/* Style for the progress bar container */

.progress-bar {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    bottom: 20px;
    left: 2.5%;
    right: 0;
    width: 94%;
    cursor: pointer;
    box-sizing: border-box;
    height: 20px;
    background: rgba(240, 246, 249);
    outline: none;
    border-radius: 5px;
}

.progress-bar::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #0088ff;
    cursor: pointer;
    border-radius: 10%;
}

.thumbcontainer {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*  transform: scale(0.8);*/
    /* margin-bottom: 30px;*/
}

#generateThumbnail {
    font-family: CustomFont_SemiBold;
    background-color: rgba(240, 246, 249);
    width: 140px;
    height: 40px;
    border: 2px solid rgb(255, 255, 255);
    border: none;
    border-radius: 5px;
    font-weight: 600;
    overflow: hidden;
    transition-duration: 700ms;
}

#generateThumbnail span:first-child {
    color: #2a2a2a;
    position: absolute;
    transform: translate(-50%, -50%)
}

#generateThumbnail span:last-child {
    position: absolute;
    color: #e7e7e7;
    opacity: 0;
    transform: translateY(100%) translateX(-50%);
    height: 14px;
    line-height: 14px;
}

#generateThumbnail:focus {
    background-color: rgb(31, 31, 31);
    width: 120px;
    height: 40px;
    transition-delay: 100ms;
    transition-duration: 300ms;
}

#generateThumbnail:focus span:first-child {
    color: #e7e7e7;
    transform: translateX(-50%) translateY(-150%);
    opacity: 0;
    transition-duration: 300ms;
}

#generateThumbnail:focus span:last-child {
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    transition-delay: 300ms;
    transition-duration: 300ms;
}

#generateThumbnail:focus span:last-child {
    background-color: rgba(240, 246, 249);
    width: 120px;
    height: 40px;
    transition-duration: 10ms;
}

.thumbnail-gallery::-webkit-scrollbar {
    height: 1.5px;
}

.thumbnail-gallery::-webkit-scrollbar-track {
    background: var(--scrollbar-track-colorGal);
    border-radius: 1px
}

.thumbnail-gallery::-webkit-scrollbar-thumb {
    background: rgb(76, 76, 76);
    /*var(--scrollbar-thumb-colorGal);*/
    border-radius: 1px
}

.thumbnail-gallery::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color)
}

.action-buttons {
    /* Adjusts starting position */
    display: flex;
    justify-content: space-around;
    /* Adjust as needed */
    margin-top: 5px;
    margin-bottom: 7px;
    border-radius: 5px;
}

.action-buttons button {
    padding: 16px 10px;
    margin-left: 7px;
    margin-right: 7px;
    /* Adjust padding as needed */
    cursor: pointer;
    border-radius: 5px;
}

#letsGoButton {
    font-weight: 600;
    color: #9d9d9d;
    background-color: #1c1c1c;
    width: 50%;
}

#letsGoButton:hover {
    color: rgb(183, 183, 183);
    background-color: #232323;
}

#cancelButton {
    font-weight: 600;
    color: #464646;
    background-color: rgb(24, 24, 24);
    width: 50%;
}

#cancelButton:hover {
    color: rgb(183, 183, 183);
    background-color: #151515;
}

.thumbnail-gallery {
    /* Adjusts starting position */
    bottom: 0;
    /* Extends to the bottom of the window */
    height: calc(100vh - var(--image-height) + 1px);
    /* Adjusts height based on viewport */
    overflow-y: auto;
    /* Enables vertical scrolling */
    background-color: transparent;
    width: 100%;
    /* Ensures full width */
}

.thumbnail-gallery .thumbnail {
    line-height: 0;
    /* Remove extra space caused by line height */
    vertical-align: top;
    /* Adjust vertical alignment */
    display: inline-block;
    position: relative;
    /* This is crucial for the positioning of the remove button */
    width: calc(50%);
    cursor: pointer;
    border-radius: 5px;
    margin: 0;
}

.thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

.thumbnail .remove-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 20px;
    /* Adjust as needed for positioning within the thumbnail */
    background: transparent;
    color: rgb(196, 196, 196);
    border: none;
    cursor: pointer;
}

.thumbnail .remove-btn:hover {
    color: rgb(221, 6, 6);
}

.thumbnail-gallery,
.thumbnail-gallery .thumbnail,
.thumbnail img {
    margin: 0;
    padding: 0;
}


/*//============================================================================
//                                                                            
//  ######            ##  ##     ##  ####    #####  ##    ##  #####   ####  
//     ##             ##  ####   ##  ##  ##  ##      ##  ##   ##     ##     
//    ##    ########  ##  ##  ## ##  ##  ##  #####    ####    #####   ###   
//   ##               ##  ##    ###  ##  ##  ##      ##  ##   ##        ##  
//  ######            ##  ##     ##  ####    #####  ##    ##  #####  ####   
//                                                                            
//============================================================================
*/


/*zIndexes*/

#BookFolderFavsContainer,
#tag-list-Bookmark .tag-item,
#resizeHandleTagsGridLine,
#NoResultsSpan,
.dropdown__list_Grid,
.dropdown__list {
    z-index: 1;
}

#image_holder,
#videoElement {
    z-index: 2;
}



#color-palette,
#canvasCurves,
#canvasHistogram,
#RampCanvas {
    z-index: 4;
}

.comparison_Slider {
    z-index: 5;
}

#AddPlaceHolder {
    z-index: 6;
}

#dropdownLUT_AREABlock,
.dropdown,
.dropdown_Grid,
#Reset_This {
    z-index: 7;
}


.dropdown_Folders__list {
    z-index: 9;
}

.dropdown_Folders {
    z-index: 10;
}

#Import_Lut_Folder {
    z-index: 11;
}

.menubar-btn,
#drag-region {
    z-index: 12;
}

#imageLoader {
    z-index: 13;
}

#ScrollToSelected {
    z-index: 14;
}
#List_Container {
    z-index: 15;
}

#resizeHandleTags,
#resizeHandleGridLine,
#resizeHandleGrid,
#resizeHandleGrid_GuideLine,
#resizeHandleTagsGrid_GuideLine {
    z-index: 16;
}
.editor_ScreenshotBlock {
    z-index: 16;
}


.popup_ScreenshotBlock,
#activateNotification_button,
#ResetRequired {
    z-index: 17;
}

#quickTip,
#Tool,
#Apply-Lut_Button,
#refresh_button,
.context_Menu {
    z-index: 18;
}

#LoaderRoot,
#BlobCenterLoader {
    z-index: 19;
}

#infoHolder,
#tooltip,
#LoaderRootGrid,
#videoFrameModal {
    z-index: 20;
}

.popup_ScreenshotBlock,
.popup_LutName {
    z-index: 21;
}