html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /*background-color: #eeeeee; /*για κάποιο λόγο πρέπει να το βάλω και στο MainLayout αλλιώς θα δείχνει βαμμένο μόνο το κάτω μισό*/
    /*background-image: url('/images/background-book2.png');*/ /*background-book2*/
    /*background-size: cover;*/ /*Cover the whole page*/
    /*background-repeat: no-repeat;*/ /* Don't repeat the image */
    /*background-attachment: fixed;*/ /*Keep it fixed while scrolling */
    /*background-position: center;*/ /*Center the image   */
    /*background: #fefcf9;*/
    color: #333;
    /*  background-image: url('/images/forest.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; */
    /* .myGradient background: #434343;*/
    /*background: linear-gradient( to right, #484848,#222222 );*/
    /*background: linear-gradient(to right, #434343, #000044);*/ /* grey to dark blue */
    background: linear-gradient(to right, #434343, #002F00); /* grey to dark green */ /* αρχικο΄#004400   lacoste  #004526          σκούρο #002F00*/
    /*background: linear-gradient( to right, #434343,#000000 );*/ /* grey to black*/
    /* background: linear-gradient(90deg,rgba(67, 67, 67, 1) 0%, rgba(0, 0, 0, 1) 98%, rgba(67, 67, 67, 1) 100%);   */ /*gray to blacj with thin gary line in right*/

    /*Το παρακάτω  (λογικά) ΔΕΝ χρειάζεται*/
    background: linear-gradient( to right, #434343,#000000 );
    background: linear-gradient(90deg,rgba(67, 67, 67, 1) 0%, rgba(0, 0, 0, 1) 98%, rgba(67, 67, 67, 1) 100%);
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/fireflies-forest.jpg');
    /* background: linear-gradient(rgba(67, 67, 67, 0.7), rgba(0, 0, 0, 0.7)), url('/images/fireflies-forest.jpg');*/
    background-blend-mode: multiply;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    
    /**/
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/fireflies-forest.jpg');
    background-blend-mode: multiply;
    background-size: cover;
    background-attachment: fixed; /*fixed*/
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}


/* Mobile background override */
@media (max-width: 768px) {
    html, body {
        /* background: linear-gradient(to bottom, #222222, #555555);*/ /* Example: dark grey vertical for mobile */
        /*Αν ΔΕΝ θέλω backgroung στο κινητό*/
        /*background: linear-gradient( to right, #434343,#000000 );*//* grey to black*/
        /*Αν θέλω backgroung εικόνα στο κινητό*/

       /* background-attachment: scroll;
        background-size: cover;
        background-position: center;*/
    }
}

/* κίτρίνα κουμπιά λόγω background */
/*button {
    background-color: #FFC107 !important; 
    color: black !important;
    border: none !important;
}

.rz-button,
.rz-button.rz-button-text,
.rz-button.rz-button-md {
    background-color: #FFC107 !important;
    color: black !important;
    border: none !important;
}

.rz-button:hover,
button:hover {
    background-color: #FFB300 !important;
    color: black !important;
}
*/



/* Standard yellow used throughout */
/*:root {
    --my-yellow: #FFC107;*/ /*  #FFC107    #FFD700*/
    /*--my-yellow-hover: #FFB300;
}*/

/* All buttons */
/*button,
.btn,
.rz-button {
    background-color: var(--my-yellow) !important;
    color: black !important;
    border: none !important;
}*/

/* Outline-style buttons (like your <a> with .btn-outline-primary) */
/*.btn-outline-primary {
    background-color: var(--my-yellow) !important;
    color: black !important;
    border-color: var(--my-yellow) !important;
}*/

/* Hover effect */
/*button:hover,
.btn:hover,
.rz-button:hover,
.btn-outline-primary:hover {
    background-color: var(--my-yellow-hover) !important;
    color: black !important;
    border-color: var(--my-yellow-hover) !important;
}*/

























:root {
    --my-yellow: #FFC107;
    --my-yellow-hover: #FFB300;
}

/* (a + b) All Radzen buttons: yellow text, yellow border, transparent background */
.rz-button {
    background-color: transparent !important;
    color: var(--my-yellow) !important;
    border: 2px solid var(--my-yellow) !important;
    box-shadow: none !important;
}

    /* (c) All icons in buttons: yellow */
    .rz-button .rz-button-icon,
    .rz-button .material-icons {
        color: var(--my-yellow) !important;
    }

   /*  (b continued) Hover effect */
    .rz-button:hover {
        background-color: rgba(255, 193, 7, 0.1) !important;
        color: var(--my-yellow-hover) !important;
        border-color: var(--my-yellow-hover) !important;
    }

        /* (c continued) Icon hover */
        .rz-button:hover .rz-button-icon,
        .rz-button:hover .material-icons {
            color: var(--my-yellow-hover) !important;
        }

     /*(d) Optional: black icon override */
    .rz-button.black-icon .rz-button-icon,
    .rz-button.black-icon .material-icons {
        color: black !important;
    }

    /* (e) Optional: no border (transparent outline) */
    .rz-button.no-outline {
        border: 2px solid transparent !important;
    }



    /*Απλλά κουμπία*/
/* (a + b) All normal buttons: yellow text, yellow border, transparent background */
button {
    background-color: transparent !important;
    color: var(--my-yellow) !important;
    border: 2px solid var(--my-yellow) !important;
    box-shadow: none !important;
}

    /* (c) All icons in normal buttons (e.g., using <i> or <span class="material-icons">) */
    button .material-icons,
    button i {
        color: var(--my-yellow) !important;
    }

    /* (b continued) Hover effect */
    button:hover {
        background-color: rgba(255, 193, 7, 0.1) !important;
        color: var(--my-yellow-hover) !important;
        border-color: var(--my-yellow-hover) !important;
    }

        /* (c continued) Icon hover */
        button:hover .material-icons,
        button:hover i {
            color: var(--my-yellow-hover) !important;
        }

    /* (d) Optional: black icon override */
    button.black-icon .material-icons,
    button.black-icon i {
        color: black !important;
    }

    /* (e) Optional: no border (transparent outline) */
    button.no-outline {
        border: 2px solid transparent !important;
    }














#myHeader {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*font-size: 2rem;*/
    /*font-weight: bold;*/
   /* color: #FFC107;*/
}

/* Apply white color to everything */
* {
    color: white;
}

/* Override for text inside Radzen DataGrid */
.rz-datatable *,
.rz-data-table * {
    color: black !important;
}

/* 3. Specifically fix DataGrid headers */
.rz-datatable-thead > tr > th,
.rz-data-table-thead > tr > th {
    color: black !important;
}

/* Exclude text in dropdowns */
select *,
.rz-dropdown *,
.rz-dropdown-item,
.rz-dropdown-label,
.rz-listbox-item {
    color: black !important;
}

/* Fix dropdown popup list items */
.rz-dropdown-panel,
.rz-dropdown-panel * {
    color: black !important;
    background-color: white !important;
}

/* Make all button text black */
button,
button *,
.rz-button,
.rz-button * {
    color: #FFC107 !important; /*#FFC107*/
}

/*Για landing page*/
.overlay-image-left {
    max-width: 80%;
    height: auto;
    background-image: url('/images/book-fireflies.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

/*Για landing page*/
.overlay-image-right {
    max-width: 100%;
    height: auto;
    background-image: url('/images/fireflies-hunters.jpg');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

/*Για διαβάσαμε*/
.overlay-allread {
    max-width: 100%;
    height: auto;
    background-image: url('/images/wiseman2.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
    filter: brightness(0) invert(1);
}

/*Για τράπεζα*/
.overlay-bank {
    max-width: 100%;
    height: auto;
    background-image: url('/images/library-colored2.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

/*Για απορριφθέντα*/
.overlay-rejected {
    max-width: 100%;
    height: auto;   
    background-image: url('images/trash-bins-colored.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

/*Για κληρωθέντα*/
.overlay-picked {
    max-width: 100%;
    height: auto;
    background-image: url('images/books-colored.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

/*Για bookstagram*/
.overlay-bookstagramLogo {
    max-width: 100%;
    height: auto;
    background-image: url('images/bookstagramORwhiteTransp2.png'); /* bookstagramLogoTransp3d     bookstagramORwhiteTransp2*/
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
    filter: brightness(0) invert(1);
}

/*Για Πρόταση*/
.overlay-proposal {
    max-width: 100%;
    height: auto;
    background-image: url('images/girl-fireflies.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

.overlay-proposal2 {
    max-width: 100%;
    height: auto;
    background-image: url('images/sleeping-reader.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}



/*Φωτο από λιούλιακες στην landing*/
/*δεξιά πάνω*/
.angled-image1 {
    position: absolute;
    top: 200px;
    right: -200px;
    width: 0px;
    height: 300px;
    filter: brightness(0) invert(1);
    /*background-image: url('images/halloween-ghost.png'); /*firefly-1*/ /*  top: 100px; right: -150px;     width: 200px;     height: 200px; */
    /*background-image: url('icons/christmas-tree.png'); /* top: 100px; right: -300px; width: 500px; height: 500px; */
    background-image: url('icons/skiing.png');  /*200, -200, 255, 300*/
    background-size: cover;
    background-position: center;
    transform: rotate(0deg); /*45*/
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*αριστερά κάτω*/
.angled-image2 {
    position: absolute;
    top: 600px; 
    left: -35px;
    width: 100px;
    height: 0px;  
    filter: brightness(0) invert(1);
    background-image: url('images/pumpkin-smiling.png');*/ /*firefly-1*/ /*  top: 500px; right: -35px;     width: 150px;     height: 155px; */
    /**/background-image: url('icons/cooling-icon.png'); /*OXI 600, -350, 100, 0*/
    background-size: cover;
    background-position: center;
    transform: rotate(0deg);
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*αριστερά πάνω*/
.angled-image21 {
    position: absolute;
    top: 200px;
    left: -85px;
    width: 0px;
    height: 390px;
    filter: brightness(0) invert(1);
    /*background-image: url('images/bat-smiling.png'); /*firefly-1*/ /*  top: 50px; left: -35px;     width: 170px;     height: 150px; */
    background-image: url('icons/snowman-6879785_1280.png'); /* top: 200, left:-85,  width:220,  height:390 */
    background-size: cover;
    background-position: center;
    transform: rotate(0deg);
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*δεξιά κάτω*/
.angled-image3 {
    position: absolute;    
    top: 550px; 
    right: -150px;
    width: 100px;
    height: 0px;  
    filter: brightness(0) invert(1);
    /*background-image: url('images/grave.png'); /*firefly-1*/ /*  top: 600px; right: -150px;     width: 150px;     height: 165px; */
    background-image: url('icons/cooling-icon.png'); /* OXI 550, -150, 100, 0*/
    /*background-image: url('images/firefly-1.png'); /*firefly-1*/
    background-size: cover;
    background-position: center;
    transform: rotate(0deg); /*45*/
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*κάτω αριστερά*/
.angled-image6 {
    position: absolute;
    top: -100px;
    left: -400px;
    width: 0px; /*75*/
    height: 0px;
    background-image: url('images/firefly-1b.png');
    background-size: cover;
    background-position: center;
    transform: rotate(-45deg);
}


/* κάτβ δεξιά κυάλια */
.man-on-books-image {
    /*position: absolute;*/
    position: fixed;
    bottom: 20px;
    right: 20px;  /*αν βάλω αρνητικό θα φύγει δεξιά*/
    width: 150px; /*75*/
    height: 270px;
    background-image: url('images/man-on-books.png');
    background-size: cover;
    background-position: center;
    transform: scaleX(-1);
    /* transform: rotate(-45deg);*/
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/* κάτβ δεξιά βιβλία */
.two-books-image {
    /*position: absolute;*/
    position: fixed;
    bottom: 20px;
    right: 20px; /*αν βάλω αρνητικό θα φύγει δεξιά*/
    width: 180px; /*75*/
    height: 190px;
    background-image: url('images/books-two-colored.png');
    background-size: cover;
    background-position: center;
   /* filter: brightness(0) invert(1);*/
   /* transform: scaleX(-1);*/
    /* transform: rotate(-45deg);*/
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*Φωτο από λιούλιακες στην τράπεζα*/
.angled-image4 {
    position: absolute;
    top: 20px; /*10px*/
    left: -150px;
    width: 0px;  /*75*/
    height: 0px;
    background-image: url('images/firefly-1.png');
    background-size: cover;
    background-position: center;
    transform: rotate(30deg);
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*Φωτο από λιούλιακες στα διαβασμένα και στα κληρωθέντα*/
.angled-image5 {
    position: absolute;
    top: 10px;
    left: -100px;
    width: 0px; /*75*/
    height: 0px;
    background-image: url('images/firefly-1b.png');
    background-size: cover;
    background-position: center;
    transform: rotate(-45deg);
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*Φωτο από λιούλιακες στα διαβασμένα και στα κληρωθέντα*/
.grave-image {
    /*position: absolute;*/
    width: 80px; /*75*/
    height: 80px;
    background-image: url('images/grave.png');
    background-size: cover;
    background-position: center;
    filter: brightness(0) invert(1);
    /* transform: rotate(-45deg);*/
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.3);*/
}

/*Φωτο από λιούλιακες στα απορριφθέντα*/
.angled-image7 {
    position: absolute;
    top: -10px;
    left: 100px;
    width: 0px; /*75*/
    height: 0px;
    background-image: url('images/firefly-1b.png');
    background-size: cover;
    background-position: center;
    transform: rotate(-45deg);
}



/* κάτω από αυτά που επιλέξαμε*/
.overlay-image-picked-down {
    max-width: 100%;
    height: auto;
    background-image: url('images/frog-fish.png');
    background-size: contain; /* ← Scales the image to fit entirely */
    background-repeat: no-repeat;
    background-position: center; /* ← Optional: centers the image */
    pointer-events: none;
    opacity: 1;
    z-index: 10;
}

/*επικεφαλίδες κ.ά.*/
.coloredFont {
    color: #FFC107;
}

/*Αν έχω σκούρο φόντο αλλάζω χρώμα από γράμματα. Τα κάνω άσπρα, εκτός από τους πίνακες*/
/*
body, h1, h2, h3, h4, h5, h6, p, div, span, label, a {
    color: white;
}

table div,
table span {
    color: black !important; 
}

.radzen-paginator, .radzen-paginator * {
    color: black !important;
}

.rz-dropdown,
.rz-dropdown * {
    color: black !important;
}

.rz-dropdown-panel,
.rz-dropdown-item,
.rz-dropdown-item * {
    color: black !important;
}

.sxolia {
    color: black !important;
}

input,
textarea,
select {
    background-color: #e0e0e0 !important; 
}
*/
a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* Hide main content on small screens */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    /* η παρακάτω δεν χρησιμοποιείται */
    .hide-on-mobile {
        display: none !important;
    }

    /*στο κέντρο*/
    .mobile-warning {
        display: flex;  
        justify-content: center;
        align-items: center;
        /*height: 100vh;*/
        text-align:center;
    }
}

/* Hide the warning on larger screens */
@media (min-width: 769px) {
    .mobile-warning {
        display: none;
    }

    .desktop-only {
        display: block; /* or flex/grid depending on your layout */
    }
}

/* η παρακάτω δεν χρησιμοποείται */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .hide-on-tablet {
        display: none !important;
    }

    .bottomImages {
        /*position: fixed;*/
        /*bottom: 50px;*/
        /*left: 0;*/
        width: 85%;
        display: flex;
        gap: 10px;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: space-between;
        margin: auto;
        /*background-color: white; */ /* Optional */
        /* padding: 10px; */ /* Optional */
        z-index: 1000; /* Optional to ensure it's on top */
    }

    /* για όλα τα radzen buttons*/
    .rz-button {
        background-color: #0d6efd !important; /* Bootstrap primary blue */
        border-color: #0d6efd !important;
        color: white !important;
    }

    .rz-button:hover {
        background-color: white !important;
        border-color: #0d6efd !important;
        color: #0d6efd !important;
    }
}

/* Για statistics  */
/* Hide 2-row layout on small screens */
.layout-large {
    display: none;
}

/* Hide 3-row layout on large screens */
@media (min-width: 1500px) {
    .layout-small {
        display: none;
    }

    .layout-large {
        display: block;
    }
}

/*background Για κινητά*/
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2f4f6; /* your desired color */
    z-index: -1;
}


/*Fireflies*/
#firefly-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0; /* Behind content */
}

.firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: yellow;
    border-radius: 50%;
    opacity: 0;
    animation: move linear infinite;
}

@keyframes move {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(calc(var(--x) * 100px), calc(var(--y) * 100px));
    }
}


/*για mobile διάφανες λίστες*/
.transparent-list .list-group-item {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}