.nonmobile-device {
    display: none;
}

/* Show the nonmobile-device content for desktop and tablet devices */
@media (min-width: 1400px) {

    /* Custom column width between col-xl-2 and col-xl-3 */
    .col-xl-2-5 {
        flex: 0 0 20%; /* Adjust the width as needed (20% in this example) */
        max-width: 20%; /* Same value as flex-basis for browser compatibility */
    }

    body{
        background-color: white;
    }

    @media (max-width: 1921px) and (max-height: 1081px) {
        #home-body {
            /* overflow: hidden;
            background-image: url('/public/desktop_tablet/images/flashcards/background_flashcards.png'); */
        }
        #grile-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
        #grile-last-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
        #_grile-body{
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
        #materii-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
    
        #universitati-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
        #chapters-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
    
        #statistici-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/background.png');
        }
        #chat-dante-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/background_dante.png');
        }
    
        #chat-dante-chimie-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/background_dante.png');
        }
    
        #chat-dante-barrons-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/background_dante.png');
        }
    
        #chat-dante-corint-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/background_dante.png');
        }
        #chat-dante-fizica-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/background_dante.png');
        }
        #chats-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/chat/background.png');
        }
    
        #chat-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/chat/background.png');
        }
    }
    @media (min-width: 1922px), (min-height: 1082px) and (max-width: 2560px) and (max-height: 1440px){
        #home-body {
            /* overflow: hidden;
            background-image: url('/public/desktop_tablet/images/flashcards/flashcards_2560x1440.png'); */
        }
        #grile-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #grile-last-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #_grile-body{
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #materii-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #chapters-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #statistici-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #universitati-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile_2560x1440.png');
        }
        #chat-dante-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante_2560x1440.png');
        }
        #chat-dante-chimie-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante_2560x1440.png');
        }
    
        #chat-dante-barrons-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante_2560x1440.png');
        }
    
        #chat-dante-corint-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante_2560x1440.png');
        }
        #chat-dante-fizica-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante_2560x1440.png');
        }
        #chats-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/chat/chat_2560x1440.png');
        }
        #chat-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/chat/chat_2560x1440.png');
        }
    }
    @media (min-width: 2561px), (min-height: 1441px){
        /* #home-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/flashcards/flashcards@2x.png'); */
        }
        #grile-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #grile-last-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #_grile-body{
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #materii-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #chapters-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #statistici-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #universitati-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/grile/grile@2x.png');
        }
        #chat-dante-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante@2x.png');
        }
    
        #chat-dante-chimie-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante@2x.png');
        }
    
        #chat-dante-barrons-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante@2x.png');
        }
    
        #chat-dante-corint-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante@2x.png');
        }
        #chat-dante-fizica-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/dante/dante@2x.png');
        }
        #chats-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/chat/chat@2x.png');
        }
        #chat-body {
            overflow: hidden;
            background-image: url('/public/desktop_tablet/images/chat/chat@2x.png');
        }
    }

    #chapters-card {
        zoom: 0.8;
        max-height:100vh;
    }
    #grile-card {
        zoom: 0.9;
        max-height: 95vh;
        margin-bottom: 5vh;
    }
    #grile-card-body{
        zoom: 0.8;
    }

    @media(max-height: 870px) {
        #chapters-card {
            zoom: 0.8;
        }
        #parent-chapters-card-body {
            zoom: 0.8;
        }
    }

    @media(max-height: 680px) {
        #chapters-card {
            zoom: 0.7;
        }
        #parent-chapters-card-body {
            zoom: 0.7;
        }
    }

    @media(max-width: 1600px) {
        #chapters-card {
            zoom: 0.9;
            max-height:110vh; 
        }
        #parent-chapters-card-body {
            zoom: 0.8;
        }
        #grile-card-header {
            zoom: 0.9;
        }

        #grile-card {
            zoom: 0.8
        }
        #grile-card-body {
            zoom: 0.7;
        }
        
    }

    @media(max-width: 1300px) {
        #chapters-card  {
            zoom: 0.9;
            max-height:110vh; 
        }
        #parent-chapters-card-body {
            zoom: 0.6;
        }
        #grile-card-body {
            zoom: 0.6;
        }
    }


    @font-face {
        font-family: "Montserrat Regular";
        src: url('/public/mobile/fonts/webfonts/Montserrat-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Montserrat Semibold";
        src: url('/public/mobile/fonts/webfonts/Montserrat-SemiBold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .nonmobile-device {
        display: flex;
    }

    .mobile-device {
       /* display: none; */
    }


    .page-title-icon {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        background: none;
        margin-top: 12px;
        padding-bottom: 50px; 
        /* padding-top: 20px; */
        margin-right: 0px;
        position: relative;
    }

    /* Custom CSS for the divider */
    .divider-vertical {
        border-left: 2px solid #ccc; /* Adjust the thickness as needed */
        height: 60px; /* Adjust the height as needed */
        margin: 0 auto; /* Center the divider horizontally */
        padding-left: 33px; /* Add some padding to separate content from the divider */
    }

    .page-title {
        margin-top: 0;
        height: 80px;
        margin-bottom: -15px;
        background-color: #f9f9f9;
    }

    .navbar-logo-img {
        height:50px; 
        width:auto; 
        margin-top:5px;
    }

    .navbar-icon-img {
        margin-bottom: -10px;
    }

    @media (max-width: 1025px) {
        .page-title-icon-text {
            font-size: 10px !important;
        }
    
        .page-title-icon img {
            height: 18px;
            width: auto;
        }
        
        .navbar-logo-img {
            height: 30px;
            width:auto;
            margin-top:7px;
        }

        .navbar-icon-img {
            margin-bottom: -18px;
        }

        .page-title {
            margin-top: 0;
            height: 60px;
            margin-bottom: -20px;
            background-color: #f9f9f9;
        }

        .page-title-icon {
            padding-bottom: 10px !important;
        }

        .page-title-clear {
            height: calc(70px + (constant(safe-area-inset-top))*0.8) !important;
            height: calc(70px + (env(safe-area-inset-top))*0.8) !important;
          }

        .nav-link-wrapper {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: top !important;
            text-align: center;
            top: 45% !important;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 50px !important;
            width: 95%;
            line-height: 39px;
            /* padding: 10px; */
            padding-top: 0px !important;
            background: transparent;
        }
    }

    @media (min-width: 1025px) AND (max-width: 1249px) {
        .page-title-icon i {
            font-size: 4px;
        }
    
        .page-title-icon img {
            height: 25px;
            width: auto;
        }
    }

    @media (min-width: 1250px) {
        .page-title-icon i {
            font-size: 5px;
        }
    
        .page-title-icon img {
            height: 30px;
            width: auto;
        } 
    }

    .page-title-icon span {
    font-family: "Montserrat Regular";
    color: #565656;
    font-size: 14px;
    }

   .page-title-icon:nth-child(2) {
        margin-left: 55px;
        border-left: 2px solid #a0a0a0;
        border-radius: 0;
   }

   .page-title-icon:not(:last-child) {
        border-right: 2px solid #a0a0a0;
        border-radius: 0;
    }

    .nav-link-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 75px;
        width: 95%;
        line-height: 39px;
        /* padding: 10px; */
        padding-top: 8px;
        background: transparent;
    }

    /* Styles for hovering */
    .nav-link-wrapper:hover {
        border: 2px transparent #a0a0a0;
        border-radius: 10px;
        background: radial-gradient(circle at center, white, rgb(223, 222, 222));
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .floating-button {
        position: fixed;
        bottom: 35px;
        right: 35px;
    }
    .floating-button-report {
        position: fixed;
        bottom: 35px;
        left: 35px;
    }

    /* Hide the extra large image by default */
    #extra-large-icon-image {
        display: none;
    }

    /* Default styles for large image */
    #large-icon-image {
        display: block;
    }

    /* Hide the small image by default */
    #small-icon-image {
        display: none;
    }

    @media (min-width: 2400px) {
        /* Show the extra large image */
        #extra-large-icon-image {
            display: block;
        }

        /* Hide styles for large image */
        #large-icon-image {
            display: none;
        }

        /* Hide styles for small image */
        #small-icon-image {
            display: none;
        }
    }

    @media (max-width: 1200px) {
        /* Hide the large image */
        #large-icon-image {
            display: none;
        }
    
        /* Show the small image */
        #small-icon-image {
            display: block;
        }

        /* Hide the extra large image */
        #extra-large-icon-image {
            display: none;
        }
    }


    .notite-button:hover{
        background-color: none;
    }

    .flashcards-page-content {
        display: flex;
    }

    .category-list {
        flex: 1; /* Take up 1/3 of the available space */
        background: linear-gradient(#e9e6e6, #f1f2f2);
        /* background-color: #dedede; */
        padding: 15px;
        width: 500px;
        max-height: 95vh;
    }

    .flashcard-container {
        vertical-align: middle;
        flex: 2; /* Take up 2/3 of the available space */
        /* padding: 15px; */
        padding-left: 0px;
        margin-left: 30px;
        margin-right: 10px;
        font-family: "Montserrat Regular";
        max-height: 85vh;
    }

    .nonmobile-card .front {
        background: radial-gradient(#f7f5f5, #e1e0e0);
        padding-top: 20%;
        padding-bottom: 20%;
        border-radius: 30px;
        border: none;
        /* margin-top: 15em; */
    }

    .nonmobile-card .back {
        background: radial-gradient(#f7f5f5, #e1e0e0);
        padding-top: 20%;
        padding-bottom: 20%;
        border-radius: 30px;
        border: none;
        /* margin-top: -25em; */
    }

    /* The Modal (background) */
    #image-viewer {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(35, 35, 35, 0.4);
    }
    .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
    }
    .modal-content { 
        animation-name: zoom;
        animation-duration: 0.6s;
    }
    @keyframes zoom {
        from {transform:scale(0)} 
        to {transform:scale(1)}
    }
    #image-viewer .close {
        position: absolute;
        top: 50px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }
    #image-viewer .close:hover,
    #image-viewer .close:focus {
        color: #ebebeb;
        text-decoration: none;
        cursor: pointer;
    }

    .msger-inputarea {
        display: flex;
        padding: 10px;
        border-top: var(--border);
        background: none;
      }

    .inactive-button {
        opacity: 0.5;
        cursor: default;
    }

    .inactive-button:hover{
        opacity: 0.5;
    }

    /* Hide the checkbox */
    .show-correct-answers-checkbox input {
        display: none;
    }

    /* Style for the image */
    .show-correct-answers-checkbox .raspunsuri-toggle{
        cursor: pointer;
    }

    /* Hide the checkbox */
    .time-test-checkbox input {
        display: none;
    }

    /* Style for the image */
    .time-test-checkbox .timer-toggle{
        cursor: pointer;
    }

      /* Customize the slider track */
    .nonmobile-slider::-webkit-slider-runnable-track {
        background-color: #7472728b; /* Change the background color */
        height: 13px; /* Adjust the height of the track */
        border-radius: 25px; /* Rounded borders for the track */
    }

    /* Customize the slider thumb (slider handle) */
    .nonmobile-slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Remove default appearance */
        width: 30px !important; /* Set the width of the thumb */
        height: 30px !important; /* Set the height of the thumb */
        background: url('/public/desktop_tablet/images/grile/chapters/slider_knob.png') no-repeat !important; /* Replace with your slider image */
        background-size: cover !important; /* Ensure the image covers the thumb */
        border-radius: 50% !important; /* Rounded borders for the thumb */
        cursor: pointer; /* Add a pointer cursor */
        margin-top: -8.5px;
    }

    .medclass-card {
        margin-right: 3%;
        margin-left: 3%;
        border-radius: 25px;
        font-family: Montserrat Regular;      
    }

    .card-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((110vh - 160px) * 1.77777778);
    }

    @media (max-width: 1025px), (max-height: 820px) {
        .medclass-card-title {
            color: #086986;
            font-size: 24px !important;
        }
    }

    @media (min-width: 1026px), (min-height: 821px) {
        .medclass-card-title {
            color: #086986;
            font-size: 32px !important;
        }
    }

    @media (max-height: 580px) {
        .medclass-card-title {
            color: #086986;
            font-size: 19px !important;
        }
    }

    .medclass-card-body {
        width:100%;
    }
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}