/* CardModal.css */

        /* Overlay scuro dietro la modale */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        /* Contenuto della modale */
        .modal-content {

            padding: 1.5rem;
            /* p-6 */
            border-radius: 0.75rem;
            /* rounded-lg */
            max-width: 32rem;
            /* max-w-lg */
            width: 100%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
            animation: fadeIn 0.25s ease-out;
            position: relative;
            background: var(--bg-div-color);
            color: var(--font-color);
        }

        /* Titolo */
        .modal-title {
            font-weight: bold;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        /* Immagine */
        .modal-img {
            width: 100%;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            max-width: 200px;
        }

        /* Link */
        .modal-link {
            color: #3b82f6;
            text-decoration: none;
        }

        .modal-link:hover {
            text-decoration: underline;
        }

        /* Bottone */
        .modal-button {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: #3b82f6;
            color: white;
            border-radius: 0.375rem;
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .modal-button:hover {
            background: #2563eb;
        }

        /* Animazione fadeIn */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .notification-item {
            background-color: var(--bg-div-color);
            font-size: 15px;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            cursor: pointer;
        }


        .notification-item-img {
            width: 100%;
            object-fit: cover;
            background-color: var(--bg-color);
            max-width: 50px;
        }

        .notification-item-img img {
            width: 100%;
            cursor: pointer;
            transition: opacity 0.5s ease-in;
        }


        .notification-item-content {
            font-size: 13px;
            color: var(--font-color);
            padding-left: 10px;
        }

        .notification-item-title {
            font-weight: bold
        }

        .notification-item-description {
            font-size: 12px
        }


        .notification-item-time {
            color: var(--subfont-color);
            font-size: 12px
        }


        /* Sort Select Style */

        .sort-select-style {
            display: flex;
            justify-content: space-between;
            margin: 11px 0px
        }

        .sort-select-style select {
            border: none;
            color: grey;
            appearance: none;
            cursor: pointer;
            padding: 0px 5px;
            background: none;
            text-align: right
        }

        .sort-select-style-explorer {
            display: flex;
        }

        .sort-select-style-explorer select {
            border: none;
            color: grey;
            appearance: none;
            cursor: pointer;
            padding: 0px 5px;
            background: none;
        }


        /* CardAnimeExplorer Style */


        .CardAnimeExplorer {
            width: 16.66%;
            padding: 5px;
        }




        .MiniCardAnimeExplorer {
            width: 14.2857%;
            padding: 5px;
        }


        .DetailedCardAnimeExplorer {
            width: 50%;
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-left: 5px;

        }

        .DetailedCardAnimeExplorerImageContainer {
            width: 25%;
            aspect-ratio: 0.75;
            object-fit: cover;
            background-color: var(--bg-color);
            flex-shrink: 0;
            flex-grow: 0;
        }
        
        .DetailedCardAnimeExplorerDescriptionContainer{
            font-size: 13px;
            padding-top: 5px;
            padding-left: 10px;
            color: var(--font-color)
        }

        /* Tablets */
        @media (max-width: 768px) {

            .CardAnimeExplorer {
                width: 20%;
            }

            .MiniCardAnimeExplorer {
                width: 16.6666666666666%;
            }

            .DetailedCardAnimeExplorer {
                width: 100%;
            }

            .DetailedCardAnimeExplorerImageContainer {
                width: 15%;
            }

            
        }



        @media (max-width: 600px) {

            .CardAnimeExplorer {
                width: 25%;
            }

            .MiniCardAnimeExplorer {
                width: 20%;
            }

            .DetailedCardAnimeExplorerDescriptionContainer{
                padding-top: 0px;
            }
        }

        @media (max-width: 450px) {

            .CardAnimeExplorer {
                width: 33.333333%;
            }

            .MiniCardAnimeExplorer {
                width: 25%;
            }
        }


        @media (max-width: 380px) {

            .CardAnimeExplorer {
                width: 50%;
            }

            .MiniCardAnimeExplorer {
                width: 33.3333%;
            }
        }



        .portalMenuStyle {
            padding: 0px;
            width: 100%;
            max-width: 500px;
            background-color: var(--bg-div-color);
            margin: 50px auto;
        }

        .portalMenuStyle .modal-tlt {
            padding: 20px;
            color: var(--font-color);
            font-weight: bold;
            font-size: 20px;
        }


        .tagList {

            list-style: none;
            padding: 0;
            margin: 0;

        }

        .tagList li {
            padding: 10px;
            border-bottom: 1px solid var(--bg-color);

        }

        .tagList li:last-child {
            border-bottom: none;
            /* stili */
        }



        .tabitem a {
            height: 40px;
            font-weight: 100;
            line-height: 40px;
            font-size: 12px;
        }

        .active {
            font-size: 14px;
        }


        #containerBox {
            display: flex;
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 61px;
        }




        #sideBarBox {
            max-width: 200px;
            width: 100%;
            /* background:red;opacity:0.2;  */
            height: 900px;
            position: sticky;
            top: 61px;
            padding-right: 10px
        }

        #mainBox {
            /*max-width: 800px;*/
            max-width: 1050px;
            width: 100%;
            /*background:green;*/
            min-height: 80px;
            padding: 10px;
            padding-top: 0px;


        }

        @media (max-width: 770px) {
            #mainBox {
                padding: 0
            }
        }

        #main_horiz_menu {
            display: none
        }

        #thirdBox {
            width: 100%;
            /*max-width: 200px;*/
            display: none;
            min-width: 100px;
            background: blue;
            opacity: 0.2;
            min-height: 80px;
        }

        @media (max-width: 1270px) {
            #sideBarBox {
                display: none
            }

            #mainBox {
                margin: 0 auto;
            }

            main_horiz_menu {
                display: block
            }
        }

     .previewSliderCardAnime {
            padding-right: 10px;
            width: 148px;
            flex-shrink: 0;
        }

        .previewSliderCardAnime img {
            width: 100%;
            height: 188px;
            object-fit: cover;
        }

        .previewSliderCardAnimeDetails {
            padding-top: 5px;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--font-color);
        }

        .previewSliderCardAnimeDetails a {
            color: var(--font-color);
        }

        @media (max-width: 1270px) {
            .previewSliderCardAnime {

                width: 115px;
                min-width: 115px;
            }

            .previewSliderCardAnime img {

                height: 145px;

            }

            .previewSliderCardAnimeDetails {

                font-size: 12px;

            }
        }


        .previewSliderCardAnime {
            padding-right: 10px;
            width: 148px;
        }

        .previewSliderCardAnime img {
            width: 100%;
            height: 188px;
            object-fit: cover;
        }

        .previewSliderCardAnimeDetails {
            padding-top: 5px;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--font-color);
        }

        .previewSliderCardAnimeDetails a {
            color: var(--font-color);
        }

        @media (max-width: 1270px) {
            .previewSliderCardAnime {

                width: 115px;
                min-width: 115px;
            }

            .previewSliderCardAnime img {

                height: 145px;

            }

            .previewSliderCardAnimeDetails {

                font-size: 12px;

            }
        }


        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;
            margin: 10px 0;
        }

        .switch input {
            display: none;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--subfont-color);
            -webkit-transition: .4s;
            transition: .4s;
        }

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

        input:checked+.slider {
            background-color: var(--button-bg-color);
        }

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

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

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

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