* { margin: 0; box-sizing: border-box; } html { overflow-x: hidden; background-color: #b9dad8; } body { line-height: 120%; font-weight: 400; } header{ background: #39c5bb; padding: 20px; text-align: center; } .footer{ height: 25%; width: 100%; /*position: fixed;*/ bottom: 0px; z-index: 9999; background-color: #b9dad800; } .footconsole{ display: block; width:100%; height: 100%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); } .footclear{ height: 20px; background:#39c5bb; color:white; border: 1px solid #39c5bb; border-radius: 2px; cursor: pointer; font-weight: 500; font-size: 5px; float: right; } .title{ font-size: 25px; text-align: center; } .menu{ margin-top:20px; margin-bottom:10px; } .menu li{ display: inline-block; margin-right: 20px; } .menu li a{ color:black; text-decoration: none; padding:3px; font-weight: 900; }.active { border-bottom:3px solid black; } main { padding: 30px 50px 30px 50px; } .content{ margin:15px auto; padding:10px; border-radius: 5px; } .s1 { background-color: #41817c; color:white; } .nav-Service{ float: left; height: 440px; overflow-y: auto; width: 5%; } .nav-btn{ margin: 0; float: left; height: 50px; width:125%; background:#39c5bb; color:white; border: 2px solid rgb(0, 0, 0, 0.2); border-radius: 5px; cursor: pointer; font-weight: 900; text-transform: uppercase; } .serviceForm{ float: right; border: 1px solid rgb(0, 0, 0, 0.2);; border-radius: 5px; /* height: 440px; */ overflow-y: auto; width: 95%; } .serviceForm::-webkit-scrollbar { width:10px; height: 1px; } .serviceForm::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow:inset 0 0 5px rgb(0, 0, 0, 0.2); background-color: #535353; } .serviceForm::-webkit-scrollbar-track { border-radius: 10px; box-shadow:inset 0 0 5px rgb(0, 0, 0, 0.2); background-color: #EDEDED; } @media screen and (max-height : 1500px) { .serviceForm{height: 720px;} } @media screen and (max-height : 1000px) { .serviceForm{height: 580px;} } @media screen and (max-height : 760px) { .serviceForm{height: 440px;} } .form-service { float: left; height: 440px; width: 100%; } .form1 { float: left; border: 1px solid rgb(0, 0, 0, 0.2);; border-radius: 5px; height: 440px; overflow-y: auto; width: 100%; } .form1::-webkit-scrollbar { width:10px; height: 1px; } .form1::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow:inset 0 0 5px rgb(0, 0, 0, 0.2); background-color: #535353; } .form1::-webkit-scrollbar-track { border-radius: 10px; box-shadow:inset 0 0 5px rgb(0, 0, 0, 0.2); background-color: #EDEDED; } .checkarea{ display: table; } .form-group { margin:10px auto; margin-top: 0px; border-radius: 5px; width: 85%; background-color: rgb(100, 71, 155); color:white; } input[type='date'], input[type='email']{ display: block; padding:8px; width:80%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; } input[type='password'] { padding:8px; float: left; width:95%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 10px; } input[type='text'] { padding:8px; float: left; width:95%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 10px; } input[type='text1'] { padding:8px; float: left; width:30%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 10px; } input[type='textCon'] { background-color: #459792; color: #EDEDED; font-size: medium; font-weight: 700; cursor:default; padding:8px; float: left; width:30%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 10px; } textarea{ float: right; display: block; padding:8px; width:100%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; } .textarea1{ resize:vertical; padding:8px; float: left; width:95%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-bottom:3px; margin-left: 10px; margin-right: 10px; } select { float: left; display: block; padding:8px; width:30%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 10px; } .select1 { padding:8px; float: right; width:55%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 1px; } .select2 { padding:8px; float: left; width:75%; border-radius: 3px; border:2px solid rgba(203, 93, 93, 0.25); margin-top:3px; margin-left: 10px; margin-right: 1px; } input[type='text']:hover, input[type='date']:hover, input[type='email']:hover, textarea:hover, select:hover { border: 2px solid rgba(203, 93, 93, 1); } .btn{ padding: 10px 25px; background:rgb(69, 204, 69); color:white; border: 2px solid rgb(69, 204, 69); border-radius: 5px; cursor: pointer; font-weight: 900; text-transform: uppercase; } .help-tip{ top: 18px; right: 18px; text-align: center; background-color: #696fce; border-radius: 50%; width: 16px; height: 16px; font-size: 8px; line-height: 16px; cursor: default; margin: 5px; margin-top: 12px; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover{ background-color: #6bb0db; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; margin-top: 5px; background-color: #666c6e; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position:relative; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; line-height: 1.4; } .help-tip p:before{ position: relative; content: ''; width:0; height: 0; } .help-tip p:after{ width:100%; height:40px; content:''; position: relative; top:-40px; left:0; } .line{ width: 80%; float: left; margin-top: 5px; margin-bottom: 5px; } .lineleft{ width: 13%; float: left; } .lineright{ width: 87%; float: left; } .line-help{ width: 10%; float: left; margin-top: 5px; margin-bottom: 5px; } .shortline{ width: 60%; float: left; margin-top: 5px; margin-bottom: 5px; } label{ display: inline-block; vertical-align: middle; color:black; font-weight: 900; } .labelhead{ top: 50%; transform: translateY(50%); float: left; vertical-align: middle; color:black; font-weight: 900; } .labelService{ float: left; vertical-align: middle; color:black; font-weight: 900; } .hrline{ width: 100%; height: 1px; background-color: #46449b; overflow: hidden; } .hrlineshort{ width: 615px; height: 2px; background-color: #ffffff; overflow: hidden; } .hrlineService{ float: left; width: 40%; height: 2px; margin-top: 10px; margin-bottom: 10px; background-color: #1b0772; overflow: hidden; }