/* index.css */

       /* CSS Reset */
        * {margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        body {
            display: flex;
        }

        /* Index Section */
        #index {
            width: 60px;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }

        #indexHead {
            height: 60px;
            width: 60px;
            background-image: url('images/headOff.png');
            background-size: cover;
            overflow: hidden;
            cursor: pointer;
        }

        #indexCenter {
            height: calc(100% - 120px);
            width: 60px;
            overflow: hidden;
        }

        #indexFoot {
            height: 60px;
            width: 60px;
            background-image: url('images/footOn.png');
            background-size: cover;
            overflow: hidden;
            cursor: pointer;
        }

        /* Window Section */
        #window {
            height: 100%;
            width: calc(100% - 60px);
            overflow: hidden;
        }

        #head {
			display: flex;
			flex-wrap: nowrap;
            height: 60px;
            width: 100%;
			background-color : SteelBlue;
            background-image: url('images/head.png');
            background-repeat: no-repeat;
            background-size: auto;
            overflow: hidden;
        }

        #center {
            height: calc(100% - 120px);
            width: 100%;
            overflow: hidden;
            display: flex;
			cursor : default;
        }

        #menu {
            width: 0px;
			min-width: 0px;
			max-width: 180px;
            height: 100%;
            background-color: #303030;
            overflow: hidden;
        }

        #dial {
            width: 0px;
			min-width: 0px;
			max-width: 300px;
            height: 100%;
            background-color: #303030;
            overflow: hidden;
        }
		
        #foot {
			display: flex;
			flex-wrap: nowrap;
            height: 0px;
            width: 100%;
            background-color: black;
            overflow: hidden;
        }

        #footCmd {
            height: 60px;
            width: 100%;
            overflow: hidden;
        }

        #footComm {
            height: 60px;
            width: 300px;
            overflow: hidden;
            background-color: #303030;
		}

        /* Main and Second Sections */
        #main {
            height: 100%;
            width: 100%;
			min-width: 20%;
			cursor : default;
            overflow-y: scroll;
            scrollbar-width: none; /* Hide scrollbar for Firefox */
            -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
        }

        #main::-webkit-scrollbar {
		       resize: horizontal;
            display: none; /* Hide scrollbar for Chrome/Safari */
        }

        #second {
            height: 100%;
			min-width: 20%;
			display : none;
            overflow: hidden;
			cursor : default;
			 border-left: 1px solid black;
        }

        /* Main Content */
        #mainHead, #secondHead {
            height: 30px;
            width: 100%;
            overflow: hidden;
			background-color : LightSteelBlue;
        }

        #mainPage, #secondPage {
            height: calc(100% - 60px);
            width: 100%;
            overflow-y: scroll;
			cursor : default;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
		
        #mainPage {
            background-color : white;
        }
		
        #secondPage {
            background-color : beige;
        }
		
        #mainPage::-webkit-scrollbar, #secondPage::-webkit-scrollbar {
            display: none;
        }

        #mainFoot, #secondFoot {
            height: 30px;
            width: 100%;
            overflow: hidden;
			background-color : LightSteelBlue;
        }

        /* Buttons */
        button {
            margin: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            z-index: 999;
        }