@media (max-width: 991px) {

            /* PROJECT LOGO LOGIN */
            .project-name p {
                font-size: 10rem;
            }


            /* PROJECT LOGO NAVBAR */
            .navbar .navbar-logo {
                font-size: 3rem;
            }


            /* BLOCK-Navabar settings  --------------------------------------------------------------------------------------------------   */
            .navbar-block{
                top: 2px;
            }
            
            
            .navbar {
                padding: 1rem 5%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
            }


            .navbar-toggler {
                display: block;
            }


            .navigation-btn, .settings-btn {
                border-color: transparent;
                background-color: transparent;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 5;
            }


            .settings-btn:hover {
                box-shadow: 0 0 5px 3px var(--ofc-btns-hover-shadow);
                border: 1px solid var(--ofc-btns-hover-color); 
                color: var(--ofc-btns-color); 
                filter: brightness(1.2) ;
            }


            .navigation-btn:hover {
                border: 1px solid var(--ofc-btns-hover-color);
                color: var(--ofc-btns-color);
                filter: brightness(2) contrast(1.5);
            }


            .nav-right .theme-mode-btn {
                margin-right: 2em;
            }


           .navbar-brand {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }


            .navbar-brand:hover {
                color: var(--ofc-text-color);
                filter: brightness(4) contrast(1.5);
            }


            .navbar-toggler-icon {
                filter: var(--nav-toggler-icon);   /* lighter */
            }


            /* Button has to be fixed asap btn-light-mode */
            .btn-light-mode {
                display: flex;
                width: auto;
                margin-right: 10%;
            }


            /* BLOCK-Navabar settings  --------------------------------------------------------------------------------------------------   */
            .navbar {
                padding: 1rem 5%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                position: fixed;
                top: 5px;
                left: 0;
                z-index: 1000;
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }


            .navbar-toggler {
                display: block;
            }


            .navigation-btn, .settings-btn {
                border-color: transparent;
                background-color: transparent;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 5;
            }


            .settings-btn:hover {
                box-shadow: 0 0 5px 3px var(--ofc-btns-hover-shadow);
                border: 1px solid var(--ofc-btns-hover-color); 
                color: var(--ofc-btns-color); 
                filter: brightness(1.2) ;
            }


            .navigation-btn:hover {
                border: 1px solid var(--ofc-btns-hover-color);
                color: var(--ofc-btns-color);
                filter: brightness(2) contrast(1.5);
            }


            .nav-right .theme-mode-btn {
                margin-right: 2em;
            }


           .navbar-brand {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            .navbar-brand:hover {
                color: var(--ofc-text-color);
                filter: brightness(4) contrast(1.5);
            }


            .navbar-toggler-icon {
                filter: var(--nav-toggler-icon);   /* lighter */
            }


            /* Button has to be fixed asap btn-light-mode */ 
            .btn-light-mode {
                display: flex;
                width: auto;
                margin-right: 10%;
            }


            .settings-btn {
                transition: width 1s ease, box-shadow 1s ease;
                right: 10px;
            }


            .navigation-btn {
                transition: width 1s ease, box-shadow 1s ease;
                left: 10px;
            }
        

            .navigation-btn .navbar-toggler-icon {
                color: var(--ofc-btns-color);
            }

            
            .settings-btn label {
                color: var(--ofc-text-color);
            }

            
            /* OFF CANVAS Navigation  --------------------------------------------------------------------------------------------------   */
            .navbar-block .offcanvas-menu-navigation {
                width: 50% !important;
                box-sizing: border-box;
                background-color: var(--ofc-menu-shadows);
                align-items: center;
                justify-content: center;
                color: var(--ofc-text-color);
                overflow: hidden;                
                border-right: var(--ofc-menu-border);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border-radius: 0px 15px 15px 0px;
            }


            .btn-close {
                border: 2px solid var(--ofc-border-color);
                color: var(--ofc-btns-color);
                background-color: transparent;
                filter: brightness(2) contrast(0.01);
                margin: 5px 5px;
            }


            .btn-close:hover {
                background-color: transparent;
                box-shadow: 0 0 5px 3px var(--ofc-btns-hover-shadow); /* White glow */
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
            }




            /* OFF CANVAS SETTINGS  --------------------------------------------------------------------------------------------------   */            
            .offcanvas-body {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.3s ease, transform 0.3s ease;            
            }
            
            
            .navbar-block .offcanvas-menu-settings {
                width: 50% !important;
                box-sizing: border-box;
                background-color: var(--ofc-menu-shadows);
                align-items: center;
                justify-content: center;
                color: var(--ofc-text-color);
                overflow: hidden;
                border-left: var(--ofc-menu-border);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border-radius: 15px 0px 0px 15px;
            }
            
            
            .offcanvas-menu-settings .nav-link,  .offcanvas-menu-navigation .nav-link {
                color: var(--ofc-text-color);
                box-shadow: var(--ofc-nlink-shadow);
                transition: box-shadow .3s ease, transform .3s ease;
                background-color: var(--ofc-nlink-bg-color);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }


            .nav-link:hover, .nav-link:hover {
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
                /* box-shadow: var(--ofc-nlink-shadow-hover); */
                outline: var(--ofc-nlink-outline);
            }


            .nav-link:active, .nav-link:active {
                color: var(--ofc-nlink-active-color);
                box-shadow: 0 0 5px 3px var(--ofc-nlink-active-shadow); /* White glow */
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
            }



            .offcanvas-menu-settings .offcanvas-header, .offcanvas-menu-navigation .offcanvas-header {
                justify-content: center;
                transform: translateY(20px);                            
                background-color: transparent;
            }




            .offcanvas-body .offcanvas-profile-picture {
                width: 9rem;
                height: 9rem;
                border-radius: 50%;
                object-fit: cover;
                flex-shrink: 0;
                box-shadow: 0 2px 5px var(--cnt-propic-shadow);        
                margin-top: -10px !important;
            }




            /* Offcanvas body username */
            .offcanvas-body h5 {
                font-size: 3rem;
                margin-bottom: 2rem;
            }

        
            .offcanvas-menu-settings .offcanvas-header h5, .offcanvas-menu-navigation .offcanvas-header h5 {
                color: var(--ofc-text-color);
                justify-content: center;                
            }
        

            .offcanvas-menu {
                box-shadow: 10px 10px 15px 5px var(--ofc-menu-shadows);
                transition: transform 0.3s ease-in-out;
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1050;
                transform: translateX(100%);
            }






            /* Show the body when the offcanvas is open */
            .offcanvas.show .offcanvas-body {
                opacity: 1;
                transform: translateY(0);
            }


            /* Offcanvas container - sliding effect */
            .offcanvas {
                transition: transform 0.3s ease;
            }
        

            /* Homepage container cards -------------------------------------------------------------------------------------   */
            .container-cards .left-card .information-date {
                margin-bottom: 5px;
            }


            .container-cards .right-card .information-date {
                margin-bottom: 5px;
            }
            .container-cards .left-card .information-when {    
                margin-top: 0;
            }

            .container-cards .right-card .information-when {
                margin-top: 0;
            }

            /* .container-cards .information-when  */
            .container-cards .information-date {
                box-shadow: var(--cnt-information-date-shadow-mobile);        
            }


            /* CATALOGUE PAGE CARDS   */
            .catalogue-cards {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                width: 90%;
                padding: 10px;
            }



            .catalogue-cards .right-card .information-date {
                display: flex;
                align-items: center;      
                text-align: center;
                min-height: 70px;
                margin-top: 1rem;
                margin-bottom: 1rem;
                justify-content: flex-end;
                margin-left: auto;
            }
            
            
            .catalogue-cards .left-card .information-date {
                display: flex;
                align-items: center;  
                text-align: center;
                min-height: 70px;
                margin-top: 1rem;
                margin-bottom: 1rem;
            }




            .catalogue-cards .left-card .information-date:hover,
            .catalogue-cards .right-card .information-date:hover {
                transition: transform 1s;
                border-color:5px solid black;

            }


            /* Container settings   --------------------------------------------------------------------------------------------------   */  
            .container {
                width: 100%;
                max-width: 90%;
                margin-top: 5%;
            }  


            .bauble_box {
                margin-right: 40%;
            }
            

            /* TABLE WRAPPER --------------------------------------------------------------------------------------------------   */
            .table-wrapper {
                width: 95%;
                max-width: 100%;
                overflow-x: auto;
                box-shadow: var(--cnt-information-date-shadow-mobile);
            }


            /* SIGNUP POLICY LABEL */
            .policy-checkbox-field label { 
                width: 100%;
                white-space: normal;
            }
            /* Hide the table header */
            .session-elements thead {
                display: none;
            }


            /* Make every element block-level */
            .session-elements,
            .session-elements tbody,
            .session-elements tr,
            .session-elements td {
                display: block;
                width: 100%;
            }

            /* Each row becomes a card */
            .session-elements tr {
                margin-bottom: 1rem;
                /* border: 1px solid #ddd; */
                /* border-radius: 8px; */
                padding: 1rem;        
            }

            /* Each cell is on line */
            .session-elements td {
                display: flex;
                justify-content: space-between;
                gap: 1rem;
                padding: .5rem 0;
                border: none;
                color: var(--ofc-text-color);
            }

            /* Label */
            .session-elements td::before {
                content: attr(data-label);
                font-weight: bold;
                flex-shrink: 0;
                color: var(--ofc-text-color);
            }




}


@media (max-width: 400px){    

            /* PROJECT LOGO LOGIN */
            .project-name p {
                font-size: 6rem;
            }


            /* PROJECT LOGO NAVBAR */
            .navbar .navbar-logo {
                font-size: 3rem;
            }


            /* BLOCK-Navabar settings  --------------------------------------------------------------------------------------------------   */        
            .navbar {
                padding: 1rem 5%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
            }


            .navbar-toggler {
                display: block;
            }


            .navigation-btn, .settings-btn {
                border-color: transparent;
                background-color: transparent;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 5;
            }
            

            .settings-btn:hover {
                box-shadow: 0 0 5px 3px var(--ofc-btns-hover-shadow);
                border: 1px solid var(--ofc-btns-hover-color); 
                color: var(--ofc-btns-color); 
                filter: brightness(1.2) ;
            }


            .navigation-btn:hover {
                border: 1px solid var(--ofc-btns-hover-color);
                color: var(--ofc-btns-color);
                filter: brightness(2) contrast(1.5);
            }
            

            .theme-mode-btn {
                margin-right: 3em;
            }


           .navbar-brand {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }


            .navbar-brand:hover {
                color: var(--ofc-text-color);
                filter: brightness(4) contrast(1.5);
            }


            .navbar-toggler-icon {
                filter: var(--nav-toggler-icon);   /* lighter */
            }


            /* Button to be fixed somehow to be stable btn-light-mode */
            .btn-light-mode {
                display: flex;
                margin-right: 10%;
            }


            .settings-btn {
                transition: width 1s ease, box-shadow 1s ease;
                right: 10px;
            }

            
            .navigation-btn {
                transition: width 1s ease, box-shadow 1s ease;
                left: 10px;
            }
        

            .navigation-btn .navbar-toggler-icon {
                color: var(--ofc-btns-color);
            }


            .settings-btn label {
                color: var(--ofc-text-color);
            }


            /* OFF CANVAS Navigation Settings --------------------------------------------------------------------------------------------------   */
            .navbar-block .offcanvas-menu-navigation, .navbar-block .offcanvas-menu-settings {
                width: 60% !important;
                box-sizing: border-box;
                background-color: var(--ofc-menu-shadows);
                align-items: center;
                justify-content: center;
                color: var(--ofc-text-color);
                overflow: hidden;
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }


            .btn-close {
                border: 2px solid var(--ofc-border-color);
                color: var(--ofc-btns-color);
                background-color: transparent;
                filter: brightness(2) contrast(0.01);
                margin: 5px 5px;
            }


            .btn-close:hover {
                background-color: transparent;
                box-shadow: 0 0 5px 3px var(--ofc-btns-hover-shadow); /* White glow */
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
            }

        
            .offcanvas-body {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
            }


            .offcanvas-profile-picture {
                width: 8rem;
                height: 8rem;
                border-radius: 50%;
                object-fit: cover;
                flex-shrink: 0;
                margin: 10px;
            }


            /* OFF CANVAS SETTINGS  --------------------------------------------------------------------------------------------------   */
            /* .offcanvas-menu-settings .nav-link,  .offcanvas-menu-navigation .nav-link {
                background-color: var(--ofc-bg-color);
                color: var(--ofc-text-color);
            } */


            .nav-link:hover , .nav-link:hover {
                box-shadow: 0 0 5px 3px var(--ofc-menu-shadows); /* White glow */
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
            }


            .nav-link:active , .nav-link:active {
                color: var(--ofc-nlink-active-color);
                box-shadow: 0 0 5px 3px var(--ofc-nlink-active-shadow); /* White glow */
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
            }

/* 
            .offcanvas-menu-settings .offcanvas-header, .offcanvas-menu-navigation .offcanvas-header { 
                justify-content: center;
                transform: translateY(20px);                            
                background-color: transparent;
            }
         */

            .offcanvas-menu-settings .offcanvas-header h5, .offcanvas-menu-navigation .offcanvas-header h5 {
                color: var(--ofc-text-color);
                justify-content: center;
            }
        

            .offcanvas-menu {
                box-shadow: 10px 10px 15px 5px var(--ofc-menu-shadows);
                transition: transform 0.3s ease-in-out;
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1050;
                transform: translateX(100%);
            }


            .offcanvas-body {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }


            /* Show the body when the offcanvas is open */
            .offcanvas.show .offcanvas-body {
                opacity: 1;
                transform: translateY(0);
            }


            /* Offcanvas container - sliding effect */
            .offcanvas {
                transition: transform 0.3s ease;
            }
        
        
            /* Container settings   --------------------------------------------------------------------------------------------------   */  
            .container {
                width: 100%;
                max-width: 90%;            
            }   
            
            .bauble_box {
                margin-right: 55%;
            }
            

            /* Homepage container cards */
            .container-cards .left-card .information-date {
                margin-bottom: 5px;
            }

            .container-cards .right-card .information-date {
                margin-bottom: 5px;
            }


            .container-cards .left-card .information-when {    
                margin-top: 0;
            }
            .container-cards .right-card .information-when {
                margin-top: 0;
            }

            /* .container-cards .information-date,
            .container-cards .information-when {
                box-shadow: var(--cnt-information-date-shadow-mobile);            
            } */


            /* TABLE WRAPPER --------------------------------------------------------------------------------------------------   */
            .table-wrapper {
                width: 100%;
            } 


            .navigation-btn {
                transition: width 1s ease, box-shadow 1s ease;
                left: 10px;
            }
        

            .navigation-btn .navbar-toggler-icon {
                color: var(--ofc-btns-color);
            }


            .settings-btn label {
                color: var(--ofc-text-color);
            }


            .btn-close {
                border: 2px solid var(--ofc-border-color);
                color: var(--ofc-btns-color);
                background-color: transparent;
                filter: brightness(2) contrast(0.01);
                margin: 5px 5px;
            }


            .btn-close:hover {
                background-color: transparent;
                box-shadow: 0 0 5px 3px var(--ofc-btns-hover-shadow); /* White glow */
                transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
            }


            .offcanvas-body {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
            }


            .offcanvas-profile-picture {
                width: 8rem;
                height: 8rem;
                border-radius: 50%;
                object-fit: cover;
                flex-shrink: 0;
            }


}