*, body, nav { 
    font-family: Inter,sans-serif !important;
}

.main-magic-color {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(270deg, #4f56ff, #ff4980);
    -webkit-background-clip: text;
    background-clip: text;
    
    /* color: #e20074; */
    /* color: #4f56ff; */
}







/* before after section */

.comparison-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* this is the change */
    position: relative;
    width: 100%;
    margin: 30px 0px 30px 0px;
}


.image-container {
    /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); */
    /* margin: 0 10px; */
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}


.image-container img {
    display: block;
    max-width: 100%;
    height: auto;
}


.svg-arrow-container {
    position: absolute;
    z-index: 1000; /* Adjust as needed to ensure it's above other content */
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    transform: rotate(130deg) scaleX(-1); /* Rotate and flip horizontally */
    top: 50%; /* Adjust positioning as needed */
    left: 50%; /* Adjust positioning as needed */
    transform-origin: center; /* Ensures the SVG rotates around its center */
}




.CTA {
    transition: opacity .65s,transform .85s;
    box-sizing: border-box;
    --icon-ms: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: linear-gradient(270deg, #4f56ff, #ff4980);

    padding: 10px !important;
    font-size: 20px !important;
    color: #ffffff !important;
    border-radius: 10px;
    margin-top:50px;
    transition: 0.4s linear;
    transition-duration: 0.4s;
}

.CTA:hover {
    /*background-color: #63ffdc !important;*/
    background: linear-gradient(230deg, #4f56ff, #ff4980);
    transition: 0.4s linear;
    transition-duration: 0.4s;
    /* box-shadow: 0 0 40px rgba(255, 255, 255, 1.5);  Shadow behind the box */
}



/* slider before after */

.custom-animated-handle {
    transition: transform 0.5s;
  }

.slider-with-animated-handle:hover .custom-animated-handle {
    transform: scale(1.7);
  }


  .before,
  .after {
    margin: 0;
  }

  .before figcaption,
  .after figcaption {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 12px;
    color: #2e3452;
    opacity: 0.8;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
  }

  .before figcaption {
    left: 12px;
  }

  .after figcaption {
    right: 12px;
  }

  .slider-split-line {
    --divider-width: 4px;
    --divider-color: #ffffff;
    --default-handle-opacity: 0;
  }



































































  /* legacy styles */

.btn-solid {
    background-color: #19efc1 !important;
    padding:30px !important;
    font-size: 20px !important;
    color: #181818 !important;
}



.placeholder-box {
    width: 500px;
    /*height: 500px;*/
    padding: 10px;
    background-color: gray;
    border-radius: 15px;  /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  /* Shadow behind the box */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top: 10 px;
}

/* Define keyframes for the flashing effect */
@keyframes flashing {
    0%   {opacity: 1;}
    50%  {opacity: 0.5;}
    100% {opacity: 1;}
}


.cool-title {
    /* font-family: 'Arial', sans-serif; */ /* Use a different font */
    text-align: center; /* Center the text */
    /* text-transform: uppercase; */ /* Transform the text to uppercase */
    color: white;
    font-size: 2.5em; /* Increase the size of the text */
    letter-spacing: 12px; /* Increase the spacing between letters */
    /*border-bottom: 3px solid #9d3d00; /* Add a bottom border */
    padding-bottom: 10px; /* Add some padding */
    background: linear-gradient(to right, #232526 , #414345); /* Create a gradient background */
    /* -webkit-background-clip: text; */ /* Clip the background to the text */
    /* -webkit-text-fill-color: transparent; */ /* Make the text color transparent to let the gradient show */
}





.btn-primary.disabled {
    /* Any specific styles you want when the button is disabled */
    background: gray;
    cursor: not-allowed;
    --borderWidth: 3px;
    border-color: gray;
}

.btn-primary.disabled:after {
    background: gray;
}





.btn-primary {
    align-items: center;
    justify-content: center;
    background: black;
    position: relative;
    border-color: rgba(0,0,0,0);
    /*background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);*/
    /*animation: animatedgradient 20s ease infinite;*/
    /*background-size: 500% 500%;*/

    /*background: linear-gradient(60deg, #1098ad, #07b39b, #6fba82);*/
    background-color: #2f4ac7;


    box-shadow: 4px 4px 6px 0px rgb(32 31 31 / 59%);
    font-size: medium;
    padding: 6px;
    --bs-btn-border-width: 0;
    margin: 0px 8px 0px 8px;
}

.btn-briz {
    background: linear-gradient(270deg, #4f56ff, #ff4980);
    border: 0px;
}

.adjustStartButton {
    /* position: fixed;  bottom: 0px; z-index: 1000; height: 10vh; */
    height: 10vh;
    width: 100%;
    position: inherit !important;

}

.btn-primary:hover {
    border-color: rgba(0,0,0,0);
    box-shadow: 0px 0px 8px 0px rgb(255 255 255/ 59%);


}


.btn-primary.disabled:after {
    opacity: 0.2;
}

/* Add this new rule */
.btn-primary.disabled {
    background: gray;
}

















/*.btn-primary {*/
/*    background-color: #9d3d00;*/
/*    border-color: #9d3d00;*/
/*    color: #fff;*/
/*}*/

.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.notification {
    visibility: hidden;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    font-size: 17px;
    background-color: #4CAF50;
    margin-top: 200px;
    /*width:75%; !*wtf...*!*/
}

.notification .closebtn {
    margin-left: 15px;
    color: #fff;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
}

.notification .closebtn:hover {
    color: black;
}


/* dropdown select menu */

.dropdown-menu {
    width: 100%;
    position: fixed;  /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    background-color: #a6a6a6;
    z-index: 100;  /* Added to ensure the menu is always on top */
}

.dropdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    color: white;
    text-align: center;
    position: relative;
    border-radius: var(--borderWidth);
    border-color: #000000;

    /*background: linear-gradient(60deg, #1098ad, #07b39b, #6fba82);*/
    background-color: #07b39b;

    /*background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);*/
    /*animation: animatedgradient 20s ease infinite;*/
    /*background-size: 500% 500%;*/

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Add this for shadow */
}


.dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;

    /*background-color: #f0f0f0; !* Light gray background *!*/

}

.dropdown-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
}


.dropdown-content.open {
    max-height: fit-content;
}








/* gallery */
.center-gallery {
    justify-content: center;
    align-items: center;
    height: 100%;
}

.box {
    margin: 10px;
    background-color: #a166ab;
    border: 1px solid gray;
    border-radius: 10px;
    overflow: hidden; /* Ensure the box does not overflow its boundaries */
}

.twenty-container {
    max-width: 100%; /* Limit the width of the TwentyTwenty container */
}

.twentytwenty-wrapper {
    overflow: visible !important; /* Override the default overflow property of TwentyTwenty wrapper */
}

.twentytwenty-wrapper .twentytwenty-before,
.twentytwenty-wrapper .twentytwenty-after {
    max-width: 100%; /* Ensure the images within TwentyTwenty wrapper do not overflow */
    width: auto !important; /* Override the default width property of TwentyTwenty images */
}

.box img {
    max-width: 100%;
    height: auto;
}




/* group image container */

.groupImgContainer {
    /*border: 3px solid white;*/
    /*border-radius: 20px;*/
    display: flex;  /* To handle the multiple images */
    flex-wrap: wrap;  /* To handle the wrapping of images */
    position: relative;
    width: 100%;
    /*margin-bottom: 10px;*/
    overflow: hidden;
    transition: height 0.3s;
    justify-content: center;
    align-items: center;
    /*background-color: #b9b9b9;*/
    /*margin: 3px;*/
}

.wrapperWrapper {
    justify-content: center;
    align-items: center;
    background-color: #808080;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    margin: 2px;
    padding: 0px
}

.imageWrapper {
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    background-color: #808080;
    overflow: hidden;
    /*position: relative;*/
    /*border-radius: 5px;*/
    /*margin: 5px;*/
    /*padding: 0px*/
}




@media (max-width: 575px) {
    #sidebar {
        height: 35vh !important;
    }
}

.selectableImage {
    max-width: 100%;
    height: auto;
}


.modal {
    z-index: 2000;  /* Choose a value high enough to be on top of other elements */
}


/* main image holder */
.project-name {
    color: black;
    font-size: small;
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 5px 38px 5px 38px;
}

.adjustProjectsPosition {
    right:-100px;
}
@media (max-width: 575px) {
    .adjustProjectsPosition {
        left:0px;
    }
}

#emptyBriz {
    text-align: center;
    margin-top: 100px;
    color: #CCC;
}

.currentProject {
    width:80%;
}

.projectHolder {
    padding: 0px 5px 0px 5px;
    border-radius: 5px;
    color: black;
    width:80%;
    margin:auto;
}

.displayCurrentProject {
    text-align: center;
    margin-top:10px;
    margin-bottom: 5px;
    color: black;
    font-weight: 600;
}

#project-container {
    margin:auto;
    text-align: center;
    margin-bottom: 10px;
}

.project-element {
    background-color: #949494;
    margin-bottom: 10px;
    font-size: small;
    position: relative;
}

#project-button, #project-input, .project-delete, #loadFromURL {
    border-radius: 5px;
}
#project-input, #loadFromURL {
    width: 60%;
}

#project-button {
    width: 29%;
}

#project-button,#project-input {
    border: none;
    margin: 5px;
}

.project-delete,.project-publish {
    width: 25px;
    border: none;
    border-radius: 7px;
    position: absolute;
    right:5px;
    top:6px;
    z-index: 999;
}

.project-publish {
    left:5px;
}


.project-element a {
    text-decoration: none;
}

.project-element:hover {
    background-color: #51585e;
}

.project-link {
    /*text-decoration: underline;*/
    color: #d3d4d5;
    font-size: large;
}

.projPubLink {
    color:black;
    padding: 10px;
}

.projPubLink a {
    color: #305dff;
}

#listOfAllProjects {
    display: inline-block;
}

#project-list-container {
    display: inline-block;
}

/* kinda messing BS default styles */
.full-width-container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* dashboard styles */

#sidebar {
    box-shadow: 0px 0px 10px 0px rgb(73 73 73);
    z-index: 10;
    background-color: #b0b0b0;
    height: 92vh !important;
    /* height: 83vh; */
    /*height: 100vh;*/
    overflow-y: auto; /* Enable vertical scrolling */
    /*position: -webkit-sticky; !* For Safari *!*/
    top: 0; /* Stick to the top of the viewport */
    padding-top: 40px;
    /*padding-bottom: 30px;*/
}

#preferenceForm {
    margin-top:10px;
    padding-bottom: 20px;
    position: relative;
    color: #232323;
}

#sidebar .btn-block {
    width: auto;
}


.form-control {
padding: 2px;
}

.form-row {
    padding:0px 8px 0px 8px;
}






/* overlay canvas section - for erasing */

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 100000;
    /*display: flex;*/
    justify-content: center;
}

#overlayContent {
    position: absolute;
    top:1%;
}


#editOptions {
    text-align: center;
    position: absolute;
    bottom: 0;
    color: #f1f1f1;
    width: 100%;
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(14, 16, 23, 0.2), rgba(14, 16, 23, 0.94) 24%);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#editOptions button {
    /*width: 110px;*/
    width: 100%;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    margin-bottom: 6px;
    color:black;
}

.editOptionsHidden {
    visibility: hidden;
    position: absolute;

}

.editOptionsVisible {
    visibility: visible;
    /*position:inherit;*/
}


.leftSide {
    width: 75%;
    display: inline-block;
    text-align: center;
}

.rightSide {
    width: 23%;
    display: inline-block;
    text-align: left;
}

.centerInInpainting {
    margin:auto;
    text-align: center;
    width:80%;
}

#sendEraseButton {
    background-color: #aae5da;
}



#closeOverlay, #resetCanvas {
    display: inline-block;
    padding: 8px 14px;
    cursor: pointer;
    width: auto !important;
    min-width: 124px;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
    font-weight: 720;
}
#closeOverlay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-width: 148px;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08);
    color: #f7f7f9 !important;
    font-size: 12px !important;
    font-weight: 750;
    letter-spacing: 0.01em;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

#closeOverlay:hover,
#closeOverlay:focus-visible {
    border-color: rgba(255, 255, 255, 0.36) !important;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.inpainting-button {
    padding: 5px;
    font-size: 14px !important;
    background-color: #727272;

}


/* tlacitka */


/* universal custom buttons and box around checkboxes on image */
.image-box {
    position: absolute;
    z-index: 5;
    padding: 0;
    height: 25px;
    width: 25px;
    border: 1.5px solid #dedede;
    border-radius: 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* Remove background color on hover */
}
.image-box-checked {
    border: 1.5px solid #ffffff  !important;
}

/* kinda checkbox for image as input */
.use-as-input-imgbtn {
    bottom: 7px;
    right: 38px;
}
.use-as-input-imgbtn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23AAAAAA' stroke-width='14' stroke-opacity='1.0' d='M170 154H22l46-70 42 42 16-16 44 44Z'/%3E%3Ccircle cx='150' cy='50' r='20' fill='none' stroke='%23AAAAAA' stroke-width='14' stroke-opacity='1.0'/%3E%3C/svg%3E");
}
.use-as-input-imgbtn-checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='14' d='M170 154H22l46-70 42 42 16-16 44 44Z'/%3E%3Ccircle cx='150' cy='50' r='20' fill='none' stroke='%23FFFFFF' stroke-width='14'/%3E%3C/svg%3E")  !important;
}


/* check mark - for selecting images */
.checkbox-imgbtn {
    bottom: 7px;
    right: 7px;
}
.checkbox-imgbtn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23AAAAAA' stroke-width='2' stroke-opacity='0.66' stroke-linecap='round' stroke-linejoin='round' fill='transparent'%3E%3C/path%3E%3C/svg%3E");
}
.checkbox-imgbtn-checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='transparent'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* toggle button for visual guidances */
.visual-guidances-imgbtn {
    bottom: 7px;
    right: 72px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cg stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13 4H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C4 6.28 4 7.12 4 8.8v6.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C6.28 20 7.12 20 8.8 20h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 17.72 20 16.88 20 15.2V11'/%3E%3Cpath d='m4 16 4.293-4.293a1 1 0 0 1 1.414 0L13 15m0 0 2.793-2.793a1 1 0 0 1 1.414 0L20 15m-7 0 2.25 2.25M18.5 3v2.5m0 2.5V5.5m0 0H16m2.5 0H21'/%3E%3C/g%3E%3C/svg%3E");
}

.visual-guidances-imgbtn-checked {
    bottom: 7px;
    right: 72px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cg stroke='%23dedede' stroke-linecap='round' stroke-width='2'%3E%3Cpath stroke-linejoin='round' d='M12 4H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C4 6.28 4 7.12 4 8.8v6.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C6.28 20 7.12 20 8.8 20h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 17.72 20 16.88 20 15.2V12'/%3E%3Cpath d='M15.879 3.879a3 3 0 1 0 4.243 4.243m-4.243-4.243a3 3 0 1 1 4.243 4.243m-4.243-4.243L18 6l2.121 2.121'/%3E%3Cpath stroke-linejoin='round' d='m4 16 4.293-4.293a1 1 0 0 1 1.414 0L13 15m0 0 2.793-2.793a1 1 0 0 1 1.414 0L20 15m-7 0 2.25 2.25'/%3E%3C/g%3E%3C/svg%3E");
}



.image-button {
    border: 0px solid #ffffff  !important;
}
.image-button:hover {
    transition: 0.1s;
    filter: brightness(110%);
    transform: scale(1.1);
}

.erase-inpaint-imgbtn {
    bottom: 7px;
    right: 127px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='none' viewBox='0 0 192 192'%3E%3Cpath d='m104.175 90.97-4.252 38.384 38.383-4.252L247.923 15.427V2.497L226.78-18.646h-12.93zm98.164-96.96 31.671 31.67' class='cls-1' style='fill:none;fill-opacity:1;fill-rule:nonzero;stroke:%23dedede;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' transform='translate(-77.923 40.646)'/%3E%3Cpath d='m195.656 33.271-52.882 52.882' style='fill:none;fill-opacity:1;fill-rule:nonzero;stroke:%23dedede;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5;stroke-dasharray:none;stroke-opacity:1' transform='translate(-77.923 40.646)'/%3E%3C/svg%3E");
}

.delete-imgbtn {
    bottom: 7px;
    left: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' stroke='%23fff' viewBox='-2.4 -2.4 28.8 28.8'%3E%3Cg stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 7h16M6 10l1.701 9.358A2 2 0 0 0 9.67 21h4.662a2 2 0 0 0 1.968-1.642L18 10M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2H9V5Z'/%3E%3C/g%3E%3C/svg%3E");
}

.delete-imgbtn-smaller {
    bottom: 10px;
    left: 10px;
    width: 15px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23fff' viewBox='-2.4 -2.4 28.8 28.8'%3E%3Cg stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 7h16M6 10l1.701 9.358A2 2 0 0 0 9.67 21h4.662a2 2 0 0 0 1.968-1.642L18 10M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2H9V5Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* selecting image as input */


#selectedImagesContainer img {
    /*border: 2px solid #333;*/
    border-radius: 5px;
    margin: 5px;
}

.inpaint-button  {
    position: absolute;
    top: 10px;
    left: 80px;
    z-index: 10;
    padding:3px 5px 3px 5px;
    font-size: x-large;
    display: inline-block;
}

/* image in visual guidance gallery */
.imgdiv {
    margin: 2px;
    border-radius: 5px;
    overflow: hidden;
    width: 75px;
    height: 75px;
    background-position: center;
    background-size: cover;
}
.visualStyle-overlay-for-select {
    width: 75px;
    height: 75px;
    background: rgba(0, 0, 0, 0); /* Fully transparent background */
    opacity: 0; /* Make the element fully transparent */
    transition: opacity 0.2s ease, background 0.2s ease; /* Smooth transition for opacity and background */
    display: flex;
    justify-content: center;
    align-items: center;
}

.visualStyle-overlay-for-select span, #projectsBtnLabel, .custom-hover, .visualStyle-overlay-for-deselect span  {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, supported by most modern browsers */
}

.visualStyle-overlay-for-select:hover {
    background: rgba(0, 0, 0, 0.5); /* Desired background on hover */
    opacity: 1; /* Make the element fully visible */
    cursor: pointer;
}

.visualStyle-overlay-for-deselect {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Fully transparent background */
    opacity: 0; /* Make the element fully transparent */
    transition: opacity 0.2s ease, background 0.2s ease; /* Smooth transition for opacity and background */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.visualStyle-overlay-for-deselect:hover {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    cursor: pointer;
}

#sendInpaintButton {

    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}


#inpaintPromptField {
    width: 100%;
    font-size: small;
    display: inline-block;
    /*width: 275px;*/
    border-radius: 5px;
    height: 3em;
    color: black;

}


#numInpaintsActions {
    display: inline-block;
    border-radius: 5px;
}

.inpaint-count-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: min(320px, 100%);
    margin: 0.65rem auto;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 700;
}

.inpaint-count-control select {
    min-width: 3.5rem;
    padding: 0.34rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(18, 24, 38, 0.92);
    color: white;
}


.editor-hint-card {
    display: flex;
    align-items: center;
    width: min(520px, calc(100% - 24px));
    margin: 0 auto 11px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    text-align: left;
}

.editor-hint-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.editor-hint-copy strong {
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
}

.editor-hint-copy > span {
    color: rgba(255, 255, 255, 0.67);
    font-size: 11px;
    line-height: 1.4;
}

.editor-close-row {
    display: flex;
    width: 100%;
    justify-content: center;
}

@media (max-width: 600px) {
    #editOptions {
        padding: 11px 10px 13px;
    }

    .editor-hint-card {
        width: 100%;
        margin-bottom: 9px;
        padding: 9px 10px;
    }
}

.drawingCanvas, .imageCanvas {
    /*width: 80%;*/
    /*height: 80%;*/

    position: absolute;
    left: 0;
    top: 0;
    /*width: 100%*/
}

.drawingCanvas {
    opacity: 50%;
}



.visible {
    visibility: visible;
    position:inherit;
}

.hidden-menu {
    /*visibility: hidden;*/

    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.1s ease-out, max-height 0.1s ease-out;
}

.visible-menu {
    background-color: #d3d4d5;
    max-height: 500px;
    transition: opacity 0.1s ease-in, max-height 0.1s ease-in;
    overflow-y: scroll;
    /*border-bottom-left-radius: 10px;*/
    /*border-bottom-right-radius: 10px;*/
    border-radius: 10px;
    /*width: 400px;*/
}


/* gallery part for displaying images */

#overlayGallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

#overlayGallery-img,
#overlayGallery-before-img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
    visibility: visible;
    object-fit: contain;
    pointer-events: auto;
}

#overlayGallery-before-img {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#overlayGallery.is-showing-before #overlayGallery-img {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#overlayGallery.is-showing-before #overlayGallery-before-img {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.galleryButton {
    position: absolute;
    padding: 10px 20px;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
}

#prevButton {
    left: 10px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m11 9-3 3m0 0 3 3m-3-3h8m-8.8 8h9.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C20 18.48 20 17.92 20 16.8V7.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C18.48 4 17.92 4 16.8 4H7.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C4 5.52 4 6.08 4 7.2v9.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C5.52 20 6.08 20 7.2 20Z'/%3E%3C/svg%3E");

}

#nextButton {
    right: 10px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m13 15 3-3m0 0-3-3m3 3H8m-.8 8h9.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C20 18.48 20 17.92 20 16.8V7.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C18.48 4 17.92 4 16.8 4H7.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C4 5.52 4 6.08 4 7.2v9.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C5.52 20 6.08 20 7.2 20Z'/%3E%3C/svg%3E");
}

#upButton {
    top: 10px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' transform='rotate(270)' viewBox='0 0 24 24'%3E%3Cpath stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m13 15 3-3m0 0-3-3m3 3H8m-.8 8h9.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C20 18.48 20 17.92 20 16.8V7.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C18.48 4 17.92 4 16.8 4H7.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C4 5.52 4 6.08 4 7.2v9.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C5.52 20 6.08 20 7.2 20Z'/%3E%3C/svg%3E");
}

#downButton {
    bottom: 10px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' transform='rotate(90)' viewBox='0 0 24 24'%3E%3Cpath stroke='%23dedede' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m13 15 3-3m0 0-3-3m3 3H8m-.8 8h9.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C20 18.48 20 17.92 20 16.8V7.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C18.48 4 17.92 4 16.8 4H7.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C4 5.52 4 6.08 4 7.2v9.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C5.52 20 6.08 20 7.2 20Z'/%3E%3C/svg%3E");
}






/* progress overlay */

#uploadProgressBackground {
    position: fixed;
    top: calc(30% - 100px);
    left: 0;
    width: 100%;
    height: calc(30px + 200px);
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 9998;
}
#uploadProgress {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    width: 90%;
    height: 30px;
    background: white;
    display: none;
    z-index: 9999;
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}
#uploadProgress .bar {
    height: 100%;
    background: green;
    width: 0%;
}
#uploadProgress .text {
    color: #dddddd;
    padding-top: 50px;
    position: absolute;
    width: 100%;
}



/* notificatoin toasts */

 #toastContainer {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 19999;
 }

.my-toast {
    position: relative;
    background: #333;
    color: #fff;
    padding: 27px 21px;
    margin-bottom: -8px;
    border-radius: 5px;
    opacity: 0.9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: right 0.5s;
    right: -300px; /* initial position, outside of screen */
}

.my-toast.show {
    /*right: 10px; !* final position, inside of screen *!*/
    right: 0px; /* final position, inside of screen */

}

.my-toast button {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: bold;
    padding-left: 20px;
}

.my-toast-progress {
    height: 4px;
    background-color: #007bff; /* choose color based on your preference */
    width: 100%;
    position: absolute;
    bottom: 0;
    animation: shrink 4s linear; /* '5s' should be the same as the toast display duration */
    left: 0px;

}

@keyframes shrink {
    from { width: 100%; }
    to { width: 0; }
}









/* navbar */



/* navbar controls */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.dot-green {
    background-color: green;
}
.dot-red {
    background-color: red;
}


/* thumbnail placeholder */
.thumbnail {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 2px;
    margin-bottom: 8px;
}

.thumbnailImage {
    width: 50px;
    height: 50px;
    margin: 2px;
}

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

.thumbnail::after {
    /*margin-top:15px;*/

    content: '×';
    position: absolute;
    top: 10px;
    left: 5px;
    bottom: 0;
    display: none;
    color: red;
    font-size: 50px;
    text-align: center;
    line-height: 40px;  /* Adjust this value to vertically center the cross */
}

.thumbnail:hover::after {
    display: block;
}

/* comparisons */

.before-after-caption {
    /*margin-bottom: 10px;*/
    margin-top: 20px;
    display: inline-block;
    /*background-color: #dadada;*/
    width: 100%;
}

.before-after-caption-2 {
    /*margin-bottom: -50px;*/
    margin-top: 10px;
    display: inline-block;
    /*background-color: #dadada;*/
    width: 100%;
}

.manual-heading-2 {
    margin-top: 10px;
    display: inline-block;
    background-color: #dadada;
    width: 100%;
}



.image-container {
    /* box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.4); */
    margin: 0 10px;
    position: relative;
    /*border:4px solid #1e1e1e;*/
    border-radius: 10px;
    overflow: hidden;
}


.image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    /*border-radius: 20px;*/

}

.image-container.before {
    z-index: 100;
}

.image-container.after {
    margin-left: 2%;

    top:5px;
    /*right:25px;*/
}

.image-container.after2 {
    margin-left: 2%;
    top:5px;
}


.arrow {
    position: absolute;
    top: 41%;
    left: 42%;
    transform: translate(-50%, -50%);
    width: 127px;
    transform: rotate(35deg);
    z-index: 200;
}


.beforeAfterText {
    position: absolute;
    color: white;
    font-size: x-large;
    top: 10px;
    left: 20px;
}

/* Styles for screens smaller than 768px (typical breakpoint for tablets and mobile devices) */
@media (max-width: 767px) {
    .comparison-container {
        flex-direction: column; /* stack the images vertically */
        align-items: center; /* center the images */
    }

    .beforeAfterText {
        font-size: large;
        top: 4px;
        left: 7px;
    }

    .image-container.before,
    .image-container.after {
        width: 80%; /* make the images take up most of the screen width */
        margin: 20px auto; /* center the images and add some vertical space between them */
        left: 0; /* remove the horizontal offset */
        top: 0; /* remove the vertical offset */
    }

    .before,
    .after {
        transform: rotate(0deg); /* remove the rotation */
    }

    .arrow {
        top: auto; /* remove the top position */
        left: 50%; /* center the arrow horizontally */
        bottom: -20px; /* position the arrow below the images */
        transform: rotate(90deg) translateX(50%); /* rotate the arrow and adjust its position */
    }
}

/* Context-aware workflow router. Kept under the regular dashboard scope so
   experimental layouts can be removed without carrying this UI with them. */
html[data-dashboard-lab] body.dashboard-page :is(
    .workflow-panel
) {
    display: none !important;
}

html[data-dashboard-lab] body.dashboard-page #legacyWorkflowControls[hidden] {
    display: contents !important;
}

html:not([data-dashboard-lab]) body.dashboard-page #legacyWorkflowControls,
html:not([data-dashboard-lab]) body.dashboard-page [hidden] {
    display: none !important;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedImagesContainer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    pointer-events: none;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedImagesContainer .thumbnail {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: var(--briz-media);
    overflow: hidden;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedImagesContainer .thumbnailImage {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-error {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 22px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background: color-mix(in srgb, var(--briz-surface) 88%, #d94b5f 12%);
    color: var(--briz-text);
    text-align: center;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-error strong {
    font-size: 14px;
    font-weight: 820;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-error span {
    max-width: 32ch;
    color: var(--briz-muted);
    font-size: 12px;
    line-height: 1.45;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-error button {
    margin-top: 4px;
    padding: 7px 10px;
    border: 1px solid var(--briz-line);
    border-radius: 9px;
    background: var(--briz-surface);
    color: var(--briz-text);
    font: inherit;
    font-size: 11px;
    font-weight: 760;
    cursor: pointer;
}

html:not([data-dashboard-lab]) body.dashboard-page .imageWrapper.is-generating {
    position: relative;
    isolation: isolate;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-loading {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(18px, 4vw, 38px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    transform: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, #6557e8 18%, transparent), transparent 34%),
        radial-gradient(circle at 82% 74%, color-mix(in srgb, #45a9d8 16%, transparent), transparent 38%),
        var(--briz-media);
    color: var(--briz-text);
    text-align: center;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-loading::before {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 30deg, rgba(101, 87, 232, .18), rgba(81, 163, 218, .08), rgba(188, 86, 202, .17), rgba(101, 87, 232, .18));
    content: '';
    filter: blur(28px);
    opacity: .8;
    animation: briz-generation-aurora 7s linear infinite;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-loading::after {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--briz-text) 13%, transparent) .7px, transparent .8px);
    background-size: 15px 15px;
    content: '';
    opacity: .22;
    pointer-events: none;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic {
    position: relative;
    z-index: 1;
    display: grid;
    width: clamp(54px, 8vw, 76px);
    aspect-ratio: 1.18;
    margin-bottom: 14px;
    padding: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--briz-text) 10%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--briz-surface) 72%, transparent);
    box-shadow: 0 14px 34px color-mix(in srgb, #6557e8 20%, transparent);
    transform: rotate(-3deg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: briz-generation-float 3.8s ease-in-out infinite;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic::after {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 24%;
    border-radius: 12px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
    content: '';
    filter: blur(1px);
    opacity: 0;
    transform: skewX(-12deg);
    animation: briz-generation-scan 2.8s ease-in-out infinite;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic > span {
    min-width: 0;
    min-height: 0;
    border-radius: 7px;
    background: linear-gradient(145deg, #6557e8, #8c65df 52%, #51a3da);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    animation: briz-generation-tile 2.4s ease-in-out infinite alternate;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic > span:nth-child(2) {
    background: linear-gradient(145deg, #51a3da, #67c1c7);
    animation-delay: -.6s;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic > span:nth-child(3) {
    background: linear-gradient(145deg, #a04fc4, #6557e8);
    animation-delay: -1.2s;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic > span:nth-child(4) {
    background: linear-gradient(145deg, #8175ea, #df77a8);
    animation-delay: -1.8s;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-loading > strong,
html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-detail,
html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-pulse {
    position: relative;
    z-index: 1;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-loading > strong {
    font-size: clamp(13px, 1.25vw, 17px);
    font-weight: 820;
    letter-spacing: -.015em;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-detail {
    margin-top: 4px;
    color: var(--briz-muted);
    font-size: clamp(9px, .8vw, 11px);
    line-height: 1.35;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-pulse {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-pulse i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6557e8;
    animation: briz-generation-dot 1.25s ease-in-out infinite;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-pulse i:nth-child(2) {
    animation-delay: .16s;
}

html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-pulse i:nth-child(3) {
    animation-delay: .32s;
}

@keyframes briz-generation-aurora {
    to { transform: rotate(1turn) scale(1.08); }
}

@keyframes briz-generation-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes briz-generation-scan {
    0%, 18% { left: -32%; opacity: 0; }
    32%, 68% { opacity: .8; }
    82%, 100% { left: 108%; opacity: 0; }
}

@keyframes briz-generation-tile {
    0% { opacity: .48; transform: scale(.82); filter: saturate(.75); }
    100% { opacity: 1; transform: scale(1); filter: saturate(1.18); }
}

@keyframes briz-generation-dot {
    0%, 65%, 100% { opacity: .28; transform: translateY(0) scale(.78); }
    28% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-loading::before,
    html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic,
    html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic::after,
    html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-mosaic > span,
    html:not([data-dashboard-lab]) body.dashboard-page .gallery-generation-pulse i {
        animation: none;
    }
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-analysis {
    display: flex;
    gap: 12px;
    padding: 15px 16px;
    align-items: center;
    border: 1px solid color-mix(in srgb, #6557e8 24%, var(--briz-line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--briz-surface) 94%, #6557e8 6%);
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-analysis > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-analysis strong {
    color: var(--briz-text);
    font-size: 15px;
    font-weight: 820;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-analysis small {
    color: var(--briz-muted);
    font-size: 12px;
    line-height: 1.45;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-analysis-pulse {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #6557e8;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-analysis.is-loading .workflow-analysis-pulse {
    animation: workflow-pulse 1.15s ease-in-out infinite;
}

@keyframes workflow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(101, 87, 232, .38); opacity: .8; }
    50% { box-shadow: 0 0 0 7px rgba(101, 87, 232, 0); opacity: 1; }
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choices {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 12px;
    margin-top: 12px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice-group {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--briz-line);
    border-radius: 15px;
    background: var(--briz-surface);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--briz-text) 5%, transparent);
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice-group-label {
    padding: 8px 11px 7px;
    border-bottom: 1px solid var(--briz-line);
    background: var(--briz-surface-soft);
    color: var(--briz-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice {
    position: relative;
    display: grid;
    width: 100%;
    gap: 4px;
    min-width: 0;
    padding: 10px 11px 11px;
    border: 0;
    border-bottom: 1px solid var(--briz-line);
    border-radius: 0;
    background: transparent;
    color: var(--briz-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 130ms ease, box-shadow 130ms ease;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice:last-child {
    border-bottom: 0;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice:hover,
html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice:focus-visible {
    background: color-mix(in srgb, var(--briz-surface) 87%, #6557e8 13%);
    box-shadow: inset 3px 0 #6557e8;
    outline: 0;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice strong {
    font-size: 14px;
    font-weight: 820;
    letter-spacing: -.01em;
    line-height: 1.25;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice small {
    max-width: 42ch;
    color: var(--briz-muted);
    font-size: 12px;
    line-height: 1.45;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-panel.is-running .workflow-choice:not(:disabled) {
    cursor: wait;
    opacity: .48;
    pointer-events: none;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-configuration {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    gap: 11px;
    margin-top: 12px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-config-heading {
    display: grid;
    gap: 8px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-config-heading > span {
    display: grid;
    gap: 2px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-config-heading strong {
    color: var(--briz-text);
    font-size: 15px;
    font-weight: 850;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-config-heading small {
    color: var(--briz-muted);
    font-size: 11px;
    line-height: 1.4;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-back-button {
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6557e8;
    font: inherit;
    font-size: 11px;
    font-weight: 820;
    cursor: pointer;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-control-group {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 10px 11px;
    border: 1px solid var(--briz-line);
    border-radius: 13px;
    background: var(--briz-surface);
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-control-group > label,
html:not([data-dashboard-lab]) body.dashboard-page .workflow-control-label label {
    margin: 0;
    color: var(--briz-muted) !important;
    font-size: 11px;
    font-weight: 790;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-control-group .form-control,
html:not([data-dashboard-lab]) body.dashboard-page #workflowManualPrompt {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    margin: 0 0 3px;
    padding: 7px 9px;
    font-size: 12px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-control-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html:not([data-dashboard-lab]) body.dashboard-page #workflowWeightLabel {
    color: #6557e8;
    font-size: 11px;
    font-weight: 850;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-switch {
    display: flex;
    gap: 9px;
    margin: 0;
    padding: 11px;
    align-items: flex-start;
    border: 1px solid var(--briz-line);
    border-radius: 11px;
    background: var(--briz-surface);
    cursor: pointer;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-switch input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex: 0 0 16px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-switch > span {
    display: grid;
    gap: 2px;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-switch strong {
    color: var(--briz-text);
    font-size: 12px;
    font-weight: 820;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-switch small {
    color: var(--briz-muted);
    font-size: 10px;
    line-height: 1.4;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 0 2px;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker[hidden] {
    display: none;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker label {
    position: relative;
    display: block;
    margin: 0;
    min-width: 0;
    cursor: pointer;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker label span {
    display: flex;
    min-height: 32px;
    padding: 6px 9px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--briz-line);
    border-radius: 8px;
    background: var(--briz-surface);
    color: var(--briz-muted);
    font-size: 10.5px;
    font-weight: 720;
    line-height: 1.25;
    text-align: center;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker label:hover span {
    border-color: color-mix(in srgb, #6557e8 42%, var(--briz-line));
    color: var(--briz-text);
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker label:has(input:checked) span {
    border-color: color-mix(in srgb, #6557e8 58%, var(--briz-line));
    background: color-mix(in srgb, #6557e8 10%, var(--briz-surface));
    color: #6557e8;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker label:focus-within span {
    outline: 2px solid color-mix(in srgb, #6557e8 36%, transparent);
    outline-offset: 1px;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-position-picker .visualization-off-option {
    grid-column: 1 / -1;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-output-settings {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--briz-line);
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-settings-toggle {
    display: grid;
    width: 100%;
    min-height: 34px;
    padding: 5px 1px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-settings-toggle > span:first-child {
    overflow: hidden;
    color: var(--briz-text);
    font-size: 10.5px;
    font-weight: 820;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not([data-dashboard-lab]) body.dashboard-page #visualizationSettingsSummary {
    grid-column: 1;
    color: var(--briz-muted);
    font-size: 10px;
    font-weight: 620;
    line-height: 1.3;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-settings-action {
    grid-column: 2;
    grid-row: 1 / 3;
    color: #6557e8;
    font-size: 10px;
    font-weight: 820;
}

html:not([data-dashboard-lab]) body.dashboard-page .visualization-settings-toggle:hover .visualization-settings-action {
    text-decoration: underline;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-submit-button {
    width: 100%;
    min-height: 45px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(125deg, #6557e8, #9a4fd8);
    box-shadow: 0 10px 24px rgba(101, 87, 232, .24);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: filter 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-submit-button:hover:not(:disabled) {
    box-shadow: 0 13px 29px rgba(101, 87, 232, .31);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

html:not([data-dashboard-lab]) body.dashboard-page .workflow-submit-button:disabled {
    cursor: wait;
    opacity: .62;
}

html:not([data-dashboard-lab]) body.dashboard-page #workflowVisualStyleSlot .image-scroll-container {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 2px 0 5px;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-color: color-mix(in srgb, #6557e8 44%, transparent) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

html:not([data-dashboard-lab]) body.dashboard-page [data-workflow-control="visual-style"],
html:not([data-dashboard-lab]) body.dashboard-page #workflowVisualStyleSlot,
html:not([data-dashboard-lab]) body.dashboard-page #workflowSelectedGuidanceSlot {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

html:not([data-dashboard-lab]) body.dashboard-page #workflowVisualStyleSlot .image-scroll-container > * {
    flex-shrink: 0;
}

html:not([data-dashboard-lab]) body.dashboard-page #workflowVisualStyleSlot .image-scroll-container::-webkit-scrollbar {
    height: 5px;
}

html:not([data-dashboard-lab]) body.dashboard-page #workflowVisualStyleSlot .image-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

html:not([data-dashboard-lab]) body.dashboard-page #workflowVisualStyleSlot .image-scroll-container::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, #6557e8 44%, transparent);
}

html:not([data-dashboard-lab]) body.dashboard-page .selected-guidance-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: var(--briz-muted);
    font-size: 10px;
}

@media (max-width: 767px) {
    html:not([data-dashboard-lab]) body.dashboard-page .workflow-choice {
        padding: 13px 14px;
    }
}

.theme-toggle-icon {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

html[data-theme-preference="auto"] .theme-toggle-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}

html[data-theme-preference="light"] .theme-toggle-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
}

html[data-theme-preference="dark"] .theme-toggle-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

.theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Regular dashboard sidebar polish. Experiments retain their own layouts. */
html:not([data-dashboard-lab]) body.dashboard-page #showStartGenerationHint {
    display: none !important;
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 154px;
    margin: 0 0 18px;
    padding: 20px 16px;
    border: 1.5px dashed color-mix(in srgb, #6557e8 44%, var(--briz-line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--briz-surface) 92%, #6557e8 8%) !important;
    color: var(--briz-text);
    line-height: 1.35;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone:hover,
html:not([data-dashboard-lab]) body.dashboard-page #dropZone.is-dragover {
    border-color: #6557e8;
    background: color-mix(in srgb, var(--briz-surface) 84%, #6557e8 16%) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, #6557e8 16%, transparent);
    transform: translateY(-1px);
}

html:not([data-dashboard-lab]) body.dashboard-page .drop-zone-copy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    transition: opacity 150ms ease, background-color 150ms ease;
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source {
    border-style: solid;
    border-color: var(--briz-line);
    background: var(--briz-media) !important;
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source .drop-zone-copy {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 18px;
    justify-content: center;
    background: rgba(16, 18, 25, .62);
    color: #fff;
    opacity: 0;
    pointer-events: none;
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source:hover .drop-zone-copy,
html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source:focus-within .drop-zone-copy {
    opacity: 1;
    pointer-events: auto;
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source .drop-zone-subtitle {
    color: rgba(255, 255, 255, .78);
}

html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source .drop-zone-action {
    border-color: rgba(255,255,255,.32);
    background: rgba(17,19,25,.56);
    color: #fff;
}

@media (hover: none) {
    html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source .drop-zone-copy {
        padding: 10px 12px;
        justify-content: flex-end;
        background: linear-gradient(transparent, rgba(16,18,25,.82));
        opacity: 1;
        pointer-events: auto;
    }

    html:not([data-dashboard-lab]) body.dashboard-page #dropZone.has-active-source .drop-zone-subtitle {
        display: none;
    }
}

html:not([data-dashboard-lab]) body.dashboard-page .drop-zone-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

html:not([data-dashboard-lab]) body.dashboard-page .drop-zone-subtitle {
    color: var(--briz-muted);
    font-size: 13px;
}

html:not([data-dashboard-lab]) body.dashboard-page .drop-zone-actions {
    display: flex;
    gap: 7px;
    margin-top: 7px;
}

html:not([data-dashboard-lab]) body.dashboard-page .drop-zone-action {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    border: 1px solid color-mix(in srgb, #6557e8 28%, var(--briz-line));
    border-radius: 999px;
    background: var(--briz-surface);
    color: #6557e8;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}

html:not([data-dashboard-lab]) body.dashboard-page button.drop-zone-action {
    cursor: pointer;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedGuidanceContainer {
    display: grid;
    width: 64px;
    height: 64px;
    min-height: 64px;
    margin: 3px 0 0;
    padding: 0;
    place-items: center;
    border: 1px solid var(--briz-line);
    border-radius: 11px;
    background: var(--briz-surface-soft);
    color: var(--briz-muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    overflow: hidden;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedGuidanceContainer .selectedImageAsGuidance {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedGuidanceContainer .visualStyle-overlay-for-deselect {
    display: grid;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    place-items: center;
    border-radius: 10px;
    background: rgba(17, 19, 25, 0);
    opacity: 0;
    transition: background-color 140ms ease, opacity 140ms ease;
}

html:not([data-dashboard-lab]) body.dashboard-page #selectedGuidanceContainer:hover .visualStyle-overlay-for-deselect {
    background: rgba(17, 19, 25, 0.58);
    opacity: 1;
}

html:not([data-dashboard-lab]) body.dashboard-page .selected-visual-remove {
    margin: 0 !important;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

html:not([data-dashboard-lab]) body.dashboard-page .sidebar-projects-section {
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--briz-line);
}

html:not([data-dashboard-lab]) body.dashboard-page .sidebar-projects-section .projectsHolder,
html:not([data-dashboard-lab]) body.dashboard-page .sidebar-projects-section .dashboard-project-trigger {
    width: 100%;
    min-width: 0;
}

html:not([data-dashboard-lab]) body.dashboard-page .sidebar-projects-section .dashboard-project-trigger {
    box-sizing: border-box;
    min-height: 38px;
}

html:not([data-dashboard-lab]) body.dashboard-page .sidebar-projects-section .dashboard-project-panel {
    position: static;
    width: 100%;
    max-height: min(460px, 52vh);
    margin-top: 8px;
    transform: none;
}

#submitButtonLabel {
    font-weight: 800;
    font-size: larger;
    margin-top: 13px;
}

/* some mother fucking magic and effects on hovering over some links in sidebar */

.custom-hover {
    line-height: 1.05em;
    /*color: #0d6efd!important; !* Change color on hover *!*/
    color: #506fe8 !important; /* Change color on hover */
    transition: font-size 0.1s ease-in-out, color 0.1s ease-in-out; /* Smooth transition for font-size and color */
}

.custom-hover:hover {
    /*font-size: 1.05em;*/
    color: #0a58ca !important; /* Change color on hover */
    text-decoration: underline;
}


.custom-hover2 {
    color: #506fe8 !important; /* Change color on hover */
    transition: font-size 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for font-size and color */
    /*text-decoration: none !important;*/
}

.custom-hover2:hover {
    color: #0a58ca !important; /* Change color on hover */
    transition: font-size 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for font-size and color */
    cursor: pointer;
    text-decoration: underline;
}

.custom-hover3 {
    font-weight: bold;
    color: #e3e3e3 !important; /* Change color on hover */
    transition: font-size 0.1s ease-in-out, color 0.1s ease-in-out; /* Smooth transition for font-size and color */
}

.custom-hover3:hover {
    transition: font-size 0.1s ease-in-out, color 0.1s ease-in-out; /* Smooth transition for font-size and color */
    cursor: pointer;
    font-size: 1.1em;
}


/* create colorful moving background on hover to drop zone */

#dropZone {
    transition: font-size 0.1s ease-in-out, color 0.1s ease-in-out; /* Smooth transition for font-size and color */

    cursor: grab;
    line-height:30px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    margin: auto;
    width: 95%;
    margin-bottom: 20px;
    display:flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
    height: 140px;
    background-color: #ffffff;

}

#dropZone:hover {
    /*border-radius: 5px;*/
    /*background-image: linear-gradient(270deg, #4f56ff, #ff4980);*/
    transition: 0.1s linear;
    box-shadow: 0 0 20px rgba(255, 255, 255, 1.5);  /* Shadow behind the box */

    /*transition: font-size 0.1s ease-in-out, color 0.1s ease-in-out; !* Smooth transition for font-size and color *!*/

}


/* footer */

.footer {
    background-color: #797979;
    text-align: center;
    min-height: 80px;
    padding-top: 15px;
    justify-content: center;
    justify-items: center;
}

.footer a {
    padding: 10px;
}







#settingsBtnLabel{
    margin-top:10px;
    color: #232323;
    line-height: 1.05em;
    transition: font-size 0.1s ease-in-out, color 0.1s ease-in-out; /* Smooth transition for font-size and color */
    /*text-decoration: underline;*/
    cursor: pointer;
    padding: 0px 8px 0px 8px;
    height: 30px;
}

#settingsBtnLabel:hover {
    text-decoration: underline;
}

/* Light gallery/sidebar polish for the regular dashboard. Dashboard-lab
   variants own their layout and are intentionally excluded here. */
html:not([data-dashboard-lab]) .wrapperWrapper {
    border:0;
    border-radius:11px;
    background:transparent;
    box-shadow:none;
    overflow:visible;
}
html:not([data-dashboard-lab]) .imageWrapper,
html:not([data-dashboard-lab]) .imageWrapper img {
    border-radius:11px;
}
html:not([data-dashboard-lab]) .info-box { display:none; }
html:not([data-dashboard-lab]) .result-caption {
    position:static;
    display:block;
    box-sizing:border-box;
    width:100%;
    height:26px;
    min-height:26px;
    padding:6px 8px 0;
    border:0;
    background:transparent;
    color:#d7dae0;
    font-size:10px;
    font-weight:650;
    line-height:14px;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
html:not([data-dashboard-lab]) .result-caption.is-empty { color:transparent; }
html:not([data-dashboard-lab]) .image-box {
    top:8px;
    bottom:auto;
    left:auto;
    width:24px;
    height:24px;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:7px;
    background-color:rgba(20,23,29,.58);
    background-size:14px 14px;
    box-shadow:0 4px 12px rgba(0,0,0,.14);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}
html:not([data-dashboard-lab]) .checkbox-imgbtn { right:8px; }
html:not([data-dashboard-lab]) .erase-inpaint-imgbtn { right:36px; }
html:not([data-dashboard-lab]) .upscale-imgbtn { right:64px; }
html:not([data-dashboard-lab]) .download-imgbtn { right:92px; }
html:not([data-dashboard-lab]) .delete-imgbtn { left:8px; right:auto; }
html:not([data-dashboard-lab]) .wrapperWrapper .image-button {
    opacity:.25;
    transform:translateY(-2px);
    transition:opacity .14s ease,transform .14s ease,background-color .14s ease;
}
html:not([data-dashboard-lab]) .wrapperWrapper:hover .image-button,
html:not([data-dashboard-lab]) .wrapperWrapper:focus-within .image-button {
    opacity:1;
    transform:none;
}
html:not([data-dashboard-lab]) .wrapperWrapper .image-button:hover {
    background-color:rgba(18,21,27,.88);
    filter:none;
    transform:translateY(-1px);
}
html:not([data-dashboard-lab]) .wrapperWrapper .delete-imgbtn {
    border-color:rgba(255,255,255,.38) !important;
    background-color:rgba(190,43,66,.88);
}
html:not([data-dashboard-lab]) .wrapperWrapper .delete-imgbtn:hover,
html:not([data-dashboard-lab]) .wrapperWrapper .delete-imgbtn:focus-visible {
    border-color:rgba(255,255,255,.72) !important;
    background-color:#d52f4d;
    box-shadow:0 5px 16px rgba(164,27,51,.38);
    filter:none;
    opacity:1;
}
html:not([data-dashboard-lab]) .checkbox-imgbtn-checked,
html:not([data-dashboard-lab]) .visual-guidances-imgbtn-checked {
    border-color:rgba(255,255,255,.55) !important;
    background-color:#6557e8;
}
html:not([data-dashboard-lab]) #sidebar {
    border-right:1px solid rgba(31,36,45,.10);
    background:#f1f2f4;
    box-shadow:5px 0 24px rgba(28,32,39,.10);
}
html:not([data-dashboard-lab]) #preferenceForm {
    margin:10px 7px 0;
    padding:12px 5px 22px;
    border:1px solid rgba(31,36,45,.09);
    border-radius:14px;
    background:rgba(255,255,255,.66);
    box-shadow:0 8px 24px rgba(36,40,49,.06);
}
html:not([data-dashboard-lab]) #sidebar .form-row {
    margin-right:0;
    margin-left:0;
    padding:5px 9px;
}
html:not([data-dashboard-lab]) #sidebar .form-control,
html:not([data-dashboard-lab]) #sidebar textarea {
    border:1px solid #d8dbe1;
    border-radius:8px;
    background:#fff;
    color:#272b33;
    box-shadow:inset 0 1px 1px rgba(25,29,36,.03);
}
html:not([data-dashboard-lab]) #sidebar .form-control:focus,
html:not([data-dashboard-lab]) #sidebar textarea:focus {
    border-color:#8175ea;
    outline:0;
    box-shadow:0 0 0 3px rgba(101,87,232,.10);
}
html:not([data-dashboard-lab]) #sidebar input[type="checkbox"],
html:not([data-dashboard-lab]) #sidebar input[type="range"] { accent-color:#6557e8; }
html:not([data-dashboard-lab]) #sidebar hr {
    margin:10px 12px;
    background:#d7dae0;
    opacity:.75;
}
html:not([data-dashboard-lab]) #dropZone {
    border-color:#c9ccd4;
    background:#fafafd;
    box-shadow:inset 0 1px rgba(255,255,255,.9);
}
html:not([data-dashboard-lab]) #dropZone:hover {
    border-color:#8175ea;
    background:#fff;
    box-shadow:0 10px 28px rgba(75,64,156,.10);
}
html:not([data-dashboard-lab]) #settingsBtnLabel {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 11px;
    border:1px solid #d8dbe1;
    border-radius:8px;
    background:#fff;
    color:#4c5260;
    font-size:12px;
    font-weight:700;
}
html:not([data-dashboard-lab]) #settingsBtnLabel:hover {
    border-color:#b9b2ef;
    color:#5547ce;
    text-decoration:none;
}
html:not([data-dashboard-lab]) .visible-menu { background:#f5f5f8; }
html:not([data-dashboard-lab]) .visual-style-upload-button {
    display:grid;
    flex:0 0 72px;
    width:72px;
    height:72px;
    place-content:center;
    gap:2px;
    border:1px dashed #aaa4df;
    border-radius:9px;
    background:#f7f6ff;
    color:#5547ce;
    cursor:pointer;
    text-align:center;
}
html:not([data-dashboard-lab]) .visual-style-upload-button span { font-size:21px;line-height:16px; }
html:not([data-dashboard-lab]) .visual-style-upload-button strong { font-size:9px;line-height:1.15; }
html:not([data-dashboard-lab]) .visual-style-upload-button:hover {
    border-color:#6557e8;
    background:#efedff;
}
html:not([data-dashboard-lab]) .visual-style-upload-button:disabled { cursor:wait;opacity:.65; }
html:not([data-dashboard-lab]) #visualGuidanceContainer .imgdiv { position:relative;background:#e5e6eb; }
html:not([data-dashboard-lab]) #visualGuidanceContainer .imgdiv > img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
html:not([data-dashboard-lab]) #visualGuidanceContainer .visualStyle-overlay-for-select {
    position:absolute;
    inset:0;
}

/* Compact project switcher in the regular dashboard header. */
html:not([data-dashboard-lab]) .projectsHolder {
    position:relative;
    width:auto;
    min-width:170px;
    text-align:left;
}
html:not([data-dashboard-lab]) .dashboard-project-trigger {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:38px;
    padding:0 14px;
    border:1px solid #d9dce3;
    border-radius:10px;
    background:#fff;
    color:#343943;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    user-select:none;
    transition:border-color .14s ease,box-shadow .14s ease,color .14s ease;
}
html:not([data-dashboard-lab]) .dashboard-project-trigger::after {
    content:'\2304';
    color:#858b97;
    font-size:14px;
    line-height:1;
    transform:translateY(-2px);
}
html:not([data-dashboard-lab]) .dashboard-project-trigger:hover,
html:not([data-dashboard-lab]) .dashboard-project-trigger:focus-visible {
    border-color:#b9b2ef;
    color:#5547ce;
    outline:0;
    box-shadow:0 0 0 3px rgba(101,87,232,.09);
}
html:not([data-dashboard-lab]) .dashboard-project-trigger[aria-expanded='true']::after {
    transform:rotate(180deg) translateY(2px);
}
html:not([data-dashboard-lab]) .dashboard-project-panel {
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    z-index:10000000;
    width:min(380px,calc(100vw - 24px));
    max-height:min(620px,calc(100vh - 110px));
    padding:14px;
    border:1px solid rgba(31,36,45,.11);
    border-radius:16px;
    background:rgba(250,250,252,.98);
    box-shadow:0 22px 60px rgba(22,26,34,.20);
    overflow:auto;
    transform:translateX(-50%);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
html:not([data-dashboard-lab]) .dashboard-project-panel.hidden-menu {
    display:none;
    pointer-events:none;
}
html:not([data-dashboard-lab]) .dashboard-project-panel.visible-menu {
    display:block;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
html:not([data-dashboard-lab]) .displayCurrentProject {
    display:grid;
    gap:2px;
    margin:0 0 12px;
    padding:2px 2px 12px;
    border-bottom:1px solid #e2e4e9;
    color:#858b96;
    text-align:left;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
html:not([data-dashboard-lab]) .displayCurrentProject strong {
    overflow:hidden;
    color:#272b33;
    font-size:15px;
    font-weight:800;
    letter-spacing:-.01em;
    text-overflow:ellipsis;
    text-transform:none;
    white-space:nowrap;
}
html:not([data-dashboard-lab]) #listOfAllProjects,
html:not([data-dashboard-lab]) #project-list-container {
    display:block;
    width:100%;
}
html:not([data-dashboard-lab]) #project-container {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin:0 0 12px;
    text-align:left;
}
html:not([data-dashboard-lab]) #project-input,
html:not([data-dashboard-lab]) #project-button {
    width:auto;
    min-width:0;
    min-height:38px;
    margin:0;
    padding:0 11px;
    border:1px solid #d9dce3;
    border-radius:9px;
    font-size:12px;
}
html:not([data-dashboard-lab]) #project-input {
    background:#fff;
    color:#292e37;
    outline:0;
}
html:not([data-dashboard-lab]) #project-input:focus {
    border-color:#8175ea;
    box-shadow:0 0 0 3px rgba(101,87,232,.09);
}
html:not([data-dashboard-lab]) #project-button {
    border-color:#6557e8;
    background:#6557e8;
    color:#fff;
    font-weight:800;
}
html:not([data-dashboard-lab]) #project-button:hover { background:#5547ce; }
html:not([data-dashboard-lab]) .project-element {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    margin:0 0 6px;
    padding:7px;
    border:1px solid transparent;
    border-radius:10px;
    background:#f0f1f4;
    font-size:12px;
    transition:border-color .14s ease,background-color .14s ease;
}
html:not([data-dashboard-lab]) .project-element:hover { background:#e8e9ee; }
html:not([data-dashboard-lab]) .project-element.is-current {
    border-color:rgba(101,87,232,.22);
    background:#efedff;
}
html:not([data-dashboard-lab]) .project-link {
    min-width:0;
    color:#30353e;
    text-decoration:none;
}
html:not([data-dashboard-lab]) .project-name {
    min-height:28px;
    padding:5px 7px;
    color:inherit;
    font-size:12px;
    font-weight:750;
}
html:not([data-dashboard-lab]) .project-actions { display:flex; gap:4px; }
html:not([data-dashboard-lab]) .project-delete,
html:not([data-dashboard-lab]) .project-publish {
    position:static;
    width:auto;
    min-height:28px;
    padding:0 7px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#6f7580;
    font-size:10px;
    font-weight:750;
}
html:not([data-dashboard-lab]) .project-publish:hover { background:#fff;color:#5547ce; }
html:not([data-dashboard-lab]) .project-delete:hover { background:#fff0f0;color:#b33a3a; }
html:not([data-dashboard-lab]) .projPubLink {
    grid-column:1 / -1;
    padding:7px 8px;
    border-radius:7px;
    background:#fff;
    color:#686e79;
    font-size:10px;
    overflow-wrap:anywhere;
}

@media (max-width:767px) {
    html:not([data-dashboard-lab]) .projectsHolder { min-width:0; }
    html:not([data-dashboard-lab]) .dashboard-project-trigger { min-height:34px;padding:0 9px;font-size:11px; }
    html:not([data-dashboard-lab]) .dashboard-project-panel { position:fixed;top:68px;right:12px;left:12px;width:auto;transform:none; }
}

@media (hover:none), (pointer:coarse) {
    html:not([data-dashboard-lab]) .wrapperWrapper .image-button { opacity:1; transform:none; }
}

#customURLBtnLabel {
    margin-bottom:10px;
}

.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 5px;
}




.error {
    color:red;
}



.custom-close:hover {
    opacity: 1;
    cursor: pointer;
}



/* Price cards */

.pricing-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform .2s;
}
.pricing-card:hover {
    transform: scale(1.05);
}
.pricing-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-top: 15px;
}
.pricing-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #888;
    margin-bottom: 20px;
}
.pricing-value {
    font-size: 32px;
    font-weight: 700;
    color: #007bff;
    margin: 15px 0 0;
}
.btn-custom {
    border-radius: 30px;
    background-color: #007bff;
    color: #fff;
    padding: 10px 25px;
    font-weight: 600;
    border: none;
    transition: background-color .3s;
}
.btn-custom:hover {
    background-color: #0056b3;
}
.check-icon {
    color: #007bff;
    margin-right: 8px;
}

.pricing-card li {
    margin-bottom: 10px;
}

.small-price-card {
    padding-bottom:20px;
    font-size: 14px;
    color: #007bff;
}



.manual p h2 {
    text-align: left !important;
}

.manual h2 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.manual li {
    padding-bottom: 20px;
}

.manual-image-steps {
    width: 35%;
    margin-bottom: 40px;
}

.right {
    float: right;
    margin-left:20px;
}

.left {
    float:left;
    margin-right:20px;
}

.half-image {
    width:48%;
}

.third-image {
    width:30%;
}

.twothird-image {
    width:60%;
}

.manual-small-pictures {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    margin: 10px;
}



/* visual styles plceholder */

.image-scroll-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* For iOS webkit browsers */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #f85a5a #f6f5bb; /* For Firefox */
    align-items: center;
    /*padding: 10px 0;*/
}

.selectedImageAsGuidance {
    width: 192px;
    height: auto;
    margin-right: 10px;
    border-radius: 5px;
}

#selectedGuidanceContainer {
    width: 192px;
    text-align: center;
    justify-content: center;
    position: relative;
}


.image-placeholder {
    min-width: 150px; /* Ensure the box maintains its width */
    height: 150px; /* Height of the placeholder */
    background-color: #c5f6bb; /* Corrected color value */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    border-radius: 5px; /* Rounded corners */
    margin-right: 10px; /* Space between placeholders */
}


/* Custom scrollbar for Webkit browsers */
.image-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.image-scroll-container::-webkit-scrollbar-thumb {
    background: #e02525;
    border-radius: 10px;
}

.image-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #d5c562;
}












/* over ridings of bootstrap*/
a:hover {
    text-decoration: none;
    color:inherit
}

/* Unified site theme. The default follows the operating-system preference;
   an explicit choice is applied by theme-controller.js. */
:root {
    --briz-page: #f5f6f8;
    --briz-surface: #ffffff;
    --briz-surface-soft: #f0f1f4;
    --briz-surface-raised: #fafafd;
    --briz-text: #242832;
    --briz-muted: #6f7581;
    --briz-line: rgba(31, 36, 45, 0.11);
    --briz-shadow: 0 8px 28px rgba(27, 31, 40, 0.07);
    --briz-media: #e8eaee;
    color-scheme: light;
}

html[data-theme="dark"] {
    --briz-page: #101217;
    --briz-surface: #181b22;
    --briz-surface-soft: #20242d;
    --briz-surface-raised: #252933;
    --briz-text: #eef0f5;
    --briz-muted: #a5aab5;
    --briz-line: rgba(235, 239, 247, 0.12);
    --briz-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
    --briz-media: #111318;
    color-scheme: dark;
}

body {
    background: var(--briz-page);
    color: var(--briz-text);
}

.site-navbar {
    width: 100%;
    border-bottom: 1px solid var(--briz-line);
    background: color-mix(in srgb, var(--briz-surface) 94%, transparent);
    box-shadow: var(--briz-shadow);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.site-navbar .navbar-new {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    padding: 12px clamp(16px, 3vw, 48px) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.site-navbar .navbar-new a,
.site-navbar .navbar-new span {
    color: var(--briz-text) !important;
}

.site-navbar .navbar-new a:hover {
    color: #6557e8 !important;
}

.site-navbar .theme-toggle {
    box-sizing: border-box;
    display: inline-flex;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--briz-line);
    border-radius: 10px;
    background: var(--briz-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--briz-text) 7%, transparent);
    color: var(--briz-muted);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.site-navbar .theme-toggle .theme-toggle-icon {
    color: inherit !important;
}

.site-navbar .theme-toggle:hover,
.site-navbar .theme-toggle:focus-visible {
    border-color: color-mix(in srgb, #6557e8 45%, var(--briz-line));
    background: color-mix(in srgb, #6557e8 7%, var(--briz-surface));
    color: #6557e8;
    outline: 0;
    transform: translateY(-1px);
}

body.dashboard-page > main,
body.dashboard-page .full-width-container,
body.dashboard-page .full-width-container > .row,
html:not([data-dashboard-lab]) body.dashboard-page #main-content,
html:not([data-dashboard-lab]) body.dashboard-page #gallery {
    background: var(--briz-page) !important;
}

html:not([data-dashboard-lab]) body.dashboard-page #sidebar {
    box-sizing: border-box;
    min-width: 0;
    padding: 8px 6px 28px;
    border-right: 1px solid var(--briz-line);
    background: var(--briz-surface-soft) !important;
    box-shadow: 5px 0 24px color-mix(in srgb, var(--briz-text) 8%, transparent);
}

html:not([data-dashboard-lab]) body.dashboard-page #preferenceForm {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 22px;
    border-color: transparent;
    background: transparent;
    color: var(--briz-text);
    box-shadow: none;
}

html:not([data-dashboard-lab]) body.dashboard-page #sidebar :is(label, .text-center, #weightLabel) {
    color: var(--briz-text);
}

html:not([data-dashboard-lab]) body.dashboard-page #sidebar .text-muted {
    color: var(--briz-muted) !important;
}

html:not([data-dashboard-lab]) body.dashboard-page #sidebar :is(.form-control, textarea, #settingsBtnLabel),
html:not([data-dashboard-lab]) body.dashboard-page #dropZone {
    border-color: var(--briz-line);
    background: var(--briz-surface) !important;
    color: var(--briz-text);
}

html:not([data-dashboard-lab]) body.dashboard-page #sidebar hr {
    background: var(--briz-line);
}

html:not([data-dashboard-lab]) body.dashboard-page .wrapperWrapper,
html:not([data-dashboard-lab]) body.dashboard-page .imageWrapper {
    background: var(--briz-media);
}

/* Gallery thumbnails are intentionally smaller than some desktop cards. The
   image must scale to the computed card box; otherwise its intrinsic 640px
   width leaves an empty strip while card actions remain aligned to the wider
   wrapper. Keeping one shared box also makes portrait and landscape controls
   line up identically. */
html:not([data-dashboard-lab]) body.dashboard-page .wrapperWrapper {
    flex: 0 0 auto;
    max-width: 100%;
}

html:not([data-dashboard-lab]) body.dashboard-page .imageWrapper {
    position: relative;
    max-width: 100%;
}

html:not([data-dashboard-lab]) body.dashboard-page .imageWrapper > .selectableImage {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

html:not([data-dashboard-lab]) body.dashboard-page .result-caption {
    color: var(--briz-muted);
}

html:not([data-dashboard-lab]) body.dashboard-page .groupImgContainer {
    background: transparent;
    justify-content: flex-start;
    align-items: flex-start;
}

html:not([data-dashboard-lab]) body.dashboard-page .dashboard-project-trigger,
html:not([data-dashboard-lab]) body.dashboard-page .dashboard-project-panel,
html:not([data-dashboard-lab]) body.dashboard-page #project-input,
html:not([data-dashboard-lab]) body.dashboard-page .project-element {
    border-color: var(--briz-line);
    background: var(--briz-surface);
    color: var(--briz-text);
}

html:not([data-dashboard-lab]) body.dashboard-page .displayCurrentProject {
    border-color: var(--briz-line);
    color: var(--briz-muted);
}

html:not([data-dashboard-lab]) body.dashboard-page :is(.displayCurrentProject strong, .project-link, .project-name) {
    color: var(--briz-text);
}

html[data-theme="dark"] body.dashboard-page :is(.modal-content, .modal-header, .modal-body, .modal-footer) {
    border-color: var(--briz-line);
    background: var(--briz-surface);
    color: var(--briz-text);
}

html[data-theme="dark"] body.dashboard-page .modal .form-control {
    border-color: var(--briz-line);
    background: var(--briz-surface-soft);
    color: var(--briz-text);
}

html[data-theme="dark"] body:not(.dashboard-page) :is(.bg-white, .bg-gray-50) {
    background-color: var(--briz-surface) !important;
}

html[data-theme="dark"] body:not(.dashboard-page) :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) {
    color: var(--briz-text) !important;
}

html[data-theme="dark"] .footer {
    border-color: var(--briz-line) !important;
    background: var(--briz-surface-soft) !important;
    color: var(--briz-muted) !important;
}

@media (max-width: 767px) {
    .site-navbar .navbar-new {
        gap: 12px;
        padding: 10px 14px !important;
    }

    .site-navbar .theme-toggle {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        flex-basis: 34px;
    }
}