@charset "utf-8";
/* CSS Document */
		/*-------------------------------------------*/
		@font-face { font-family: Ducosky; src: url('../fonts/IBM/IBMPlexSans-Regular.ttf'); }
		@font-face { font-family: Ducosky; font-weight: bold; src: url('../fonts/IBM/IBMPlexSans-Bold.ttf');}
		@font-face { font-family: Ducosky; font-weight: 800; src: url('../fonts/IBM/IBMPlexSans-Bold.ttf');}
		@font-face { font-family: Ducosky; font-weight: 700; src: url('../fonts/IBM/IBMPlexSans-SemiBold.ttf');}
		@font-face { font-family: Ducosky; font-weight: 500; src: url('../fonts/IBM/IBMPlexSans-Medium.ttf');}
		@font-face { font-family: Ducosky; font-weight: 200; src: url('../fonts/IBM/IBMPlexSans-Light.ttf');}
		@font-face { font-family: Ducosky; font-weight: 100; src: url('../fonts/IBM/IBMPlexSans-ExtraLight.ttf');}
		
		@font-face { font-family: RIGT; src: url('../fonts/Averia/AveriaSansLibre-Regular.ttf'); }
		@font-face { font-family: RIGT; font-style:italic; src: url('../fonts/Averia/AveriaSansLibre-Italic.ttf'); }
		@font-face { font-family: RIGT; font-weight: bold; src: url('../fonts/Averia/AveriaSansLibre-Bold.ttf');}
		@font-face { font-family: RIGT; font-weight: bold; font-style:italic; src: url('../fonts/Averia/AveriaSansLibre-BoldItalic.ttf');}
		@font-face { font-family: RIGT; font-weight: 200; src: url('../fonts/Averia/AveriaSansLibre-Light.ttf');}
		@font-face { font-family: RIGT; font-weight: 200; font-style:italic; src: url('../fonts/Averia/AveriaSansLibre-LightItalic.ttf');}
		
		
        body {
			font-family:Ducosky, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 0px;
			margin: 0px;
			font-size:12pt;
			touch-action: manipulation; /* Allows scrolling but blocks pinch-zoom */
        }
		.font-averia {
			font-family:RIGT, Arial, sans-serif;
		}
		.font-imb{
			font-family:Ducosky, Arial, sans-serif;
		}
        .app-background-pc {
			background-image:url(bg-blue1.jpg);
			background-color:#dde7ee;
			background-size:1000px;
			background-position:top;
			background-repeat:repeat;
			width:100%;
        }
        .app-background-mobile {
			background-image:none;
			background-color:transparent;
			background-size:1000px;
			background-position:top;
			background-repeat:repeat;
        }
		
        #app-container {
            width: 900px;
            overflow: auto;
			margin:auto;
		}
        .app-container {
            width: 880px;
            overflow: auto;
			margin:auto;
		}
        .app-containerfull {
            width: 100%;
            overflow: auto;
			margin:auto;
		}
		
		
		.app-padding-left {
			padding-left:12px;
			padding-right:12px;
		}
		.app-padding-top {
			padding-top:42px;
		}
		.app-grid-4{
			display:grid; gap:10px; grid-template-columns: 1fr 1fr 1fr 1.8fr;width:400px;
		}
		.logo-padding-bottom{
			padding-bottom:80px;
		}
		.logo-width{
			width:200px;
		}
		
		
		.month-1-container {
			display:inline-block;width:410px;margin-right:50px; padding:0px;
		}
		.month-2-container {
			display:inline-block;width:410px; margin-top:0px;
		}
		
		.calendar-legend{
			grid-template-columns: repeat(4, minmax(0, 1fr));
			width:600px;
		}
		
		
		.text-bluesuka {
			color:#15334a;
		}
		.text-bluesukaori {
			color:#114b7b;
		}
		
		.text-dropdown{
			font-size:0.8rem;
			margin-bottom: 0.25rem; /* 4px */
			font-weight: 500;
		}
		.dropdown-container{
			position:relative;
		}
		.dropdown-option{
			width:100%;
			font-size: 0.875rem; /* Equivalent to 14px */
			line-height: 1.25rem; /* Equivalent to 20px */
			background-color:white;
			border-width:0px;
			border-radius: 0.375rem; /* or a specific pixel value, e.g., 6px */
			padding: 0.5rem 2rem 0.5rem 0.5rem; /* or 8px, depending on the base font-size */
			appearance:none;
			cursor:pointer;
		}
		.dropdown-pointer{
			/*pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700*/
			pointer-events: none;
			display:flex;
			position:absolute;
			top: 0;
			bottom: 0;
			right:0;
			align-items: center;
			padding-left: 8px; /* or 0.5rem */
			padding-right: 8px; /* or 0.5rem */
		}
		.svg-size{
			height:1rem;
			width:1rem;
		}
		
		.display-footer{
			position:fixed;bottom: 0;width: 100%; padding-top:1rem; padding-bottom:1rem;
			z-index:100;
		}
		.display-footer-item{
			width:900px;margin:auto;
		}
		/*-------------------------------------------*/
		
		
		
		
		.calendar-month {
			font-family:RIGT, Arial, sans-serif;
			letter-spacing:2px;
		}


        /* Calendar grid setup */
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }
		
		#calendar-view{
			margin-top:50px;
		}

        .calendar-date {
            aspect-ratio: 1 / 1; /* Make dates square */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: normal;
            cursor: pointer;
            transition: background-color 0.15s;
            border-radius: 0; /* Calendar days remain square */
        }

        .day-header {
            font-size: 0.75rem;
            font-weight: 600;
            color: #718096;
            text-transform: uppercase;
        }
		
		/* Legend color blocks - MODIFIED to be bigger and square */
        .legend-color {
            display: inline-block;
            width: 30px; /* Increased size */
            height: 30px; /* Increased size */
            border-radius: 0; /* Removed border radius */
            margin-right: 8px; /* Increased margin for spacing */
        }
		.bg-notavail {
			background-color:red;
		}
		.bg-blackdate {
			background-color:#d9d9d9;
		}
		.bg-bluesuka {
			background-color:#114b7b;
		}
		
		.bg-sukasuperdarkblue{
			background-color:#15334a;
		}
		.bg-sukadarkblue{
			background-color:#092f4e;
		}
		.bg-sukablue{
			background-color:#114b7b;
		}
		.bg-sukalightblue{
			background-color:#5379a4;
		}
		.bg-sukasuperlightblue{
			background-color:#87aad0;
		}
		.bg-sukateal{
			background-color:#106562;
		}
		.bg-sukalightteal{
			background-color:#668f8c;
		}
		.bg-sukabrown{
			background-color:#8e8571;
		}
		.bg-sukaorange{
			background-color:#d3662e;
		}
		.bg-sukagray{
			background-color:#a6a6a6;
		}
		
		.border-bluesuka {
			border-color:#114b7b;
		}
		.border-orangesuka{
			border-color:#d3662e;
		}
		.border-sukalightteal{
			border-color:#668f8c;
		}
		.border-sukalightblue{
			border-color:#5379a4;
		}
		
		
		.header-name {
				font-family:RIGT, Arial, sans-serif;
				letter-spacing:0px;
		}
		
		@media screen and (max-width: 899px){
			.app-background-pc {
				background-image:none;
				background-color:#15334a;
			}
			.app-background-mobile {
				background-image:url(bg-blue1.jpg);
				background-color:#dde7ee;
			}
			#app-container {
				width: 100%;
				max-width: 500px; /* Typical phone width */
				min-width: auto;
				box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
				/* Flexbox properties applied via Tailwind classes below: flex flex-col h-[90vh] */
			}
			.app-container {
				width: 100%;
				max-width: 500px; /* Typical phone width */
				min-width: auto;
			}
			.app-containerfull {
				width: 100%;
				max-width: 500px; /* Typical phone width */
				min-width: auto;
				box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
				/* Flexbox properties applied via Tailwind classes below: flex flex-col h-[90vh] */
			}
			
			.app-padding-left {
				padding-left:20px;
				padding-right:20px;
			}
			.app-padding-top {
				padding-top:24px;
			}
			.app-grid-4{
				width:auto;
			}
			.logo-width{
				width:168px;
			}
			.logo-padding-bottom{
				padding-bottom:60px;
			}
			.month-1-container {
				display:block;width:auto;margin-right:0px;padding:0px;
			}
			.month-2-container {
				display:block;width:auto;margin-top:20px;
			}
			#calendar-view{
				margin-top:30px;
			}
			.calendar-legend{
				grid-template-columns: repeat(3, minmax(0, 1fr));
				width:auto;
			}
			
			.display-footer{
				width: 100%;
			}
			.display-footer-item{
				width: 100%;
				max-width: 500px; /* Typical phone width */
				min-width: auto;
				margin:auto;
			}
		}