<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMT OTP</title>
    <style>
        .TITLE {
            display: flex;
            justify-content: center; 
            margin-bottom: 10px; 
        }

        #rectangle {
            width: auto; 
            height: auto; 
            background-color: #F5F5F5;
            border: 2px solid black; 
            margin: 20px; 
            padding: 10px;
			font-size: 20px;
			margin-top: 0px;
        }
		#rectangle2 {
            width: auto; 
            height: auto; 
            background-color: #white; 
            border: 2px solid black; 
            margin: 20px; 
            padding: 10px;
			font-size: 20px;
        }
		#rectangle3 {
            background-color: #F5F5F5;
            border: 2px solid black;
            margin: 20px;
            padding: 10px;
			font-size: 20px;
			margin-bottom: 0px;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
			font-size: 20px;
        }     
		.container2 {
            display: flex;
            align-items: center;
            justify-content: center; 
            margin-bottom: 10px;
			font-size: 20px;
        }
      .container, .container2 {
        display: flex;
        align-items: center;
    }

    .container label{
        margin-right: 24px; 
    }
	.container2 label {
        margin-right: 10px;
    }

        select {
            width: auto;
            height: auto;
            padding: 5px;
            overflow-y: auto;
			font-size: 20px;
        }

        .pw2 {
            display: flex;
            justify-content: center; 
            margin-bottom: 10px; 
            flex-direction: column; 
            margin: 10px; 
            padding: 10px;
			font-size: 20px;
        }
		    .pwval {
            display: flex;
            justify-content: center; 
            align-items: center;
            width: 100%;
			font-weight: bold;
			font-size: 35px;
        }
    </style>
</head>
<body>

  <div class="TITLE" style="width: 100%;">
    <div id="rectangle3" style="width: 100%; text-align: center;">
        <h1>AMT OTP</h1>
    </div>
</div>
    <div id="rectangle">
        <div class="container">
            <label for="Eqip">EQIP:</label>
            <select id="Eqip" size=auto>
                <option value="MP3000">MP3000</option>
                <option value="AMT8336">AMT8336</option>
                <option value="AMT5000">AMT5000</option>
                <option value="AMT5000L">AMT5000L</option>
                <option value="MPS100">MPS100</option>
                <option value="AMT8495">AMT8495</option>
                <option value="AMT3100">AMT3100</option>
            </select>
        </div>

        <div class="container2">
            <label for="MENU">MENU:</label>
            <select id="MENU" size=auto>
                <option value="MOTORSPEED">MOTORSPEED</option>
                <option value="TEACHING">TEACHING</option>
                <option value="MAINTENANCE">MAINTENANCE</option>
            </select>
        </div>
    </div>

    <div class="pw2">
        <button id="btn_Convert" style="font-size: 20px;">Password</button>
    </div>

    <div class="pw">
    <div id="rectangle2">
        <label class="pwval"></label>
	</div>
    </div>