body { background-color:#eee; margin:0; font-family:sans-serif; font-size:16px; text-align:center; } .user { display:flex; width:100%; justify-content:left; background-color:#ccc; box-sizing:border-box; } p.user { margin:0; padding:.9em; } #logoff { margin:0; background-color:darkorange; width:100px; } .container { display:flex; flex-direction:column; justify-content:center; align-items:center; height:95vh; } .incontainer { width:325px; max-width:325px; } h4 { border-radius:4px; background-color:red; padding:.9em; } input,select { background-color:#fff; text-align:center; width:100%; padding:12px 20px; margin:3px 0; display:inline-block; border:1px solid #aaa; border-radius:4px; box-sizing:border-box; font-size:16px; font-weight:bold; } select { background-color:#fff; margin-top:5px; cursor:pointer; padding-top:12px; padding-bottom:-7px; } input[type=datetime-local] { cursor:pointer; } input[type=email] { margin-bottom:15px; } input[type=file] { text-align:left; cursor:pointer; } input[type=submit] { background-color:#4CAF50; color:white; padding:14px 20px; margin:10px 0; border:none; cursor:pointer; } ::file-selector-button { -moz-opacity:0; filter:alpha(opacity:0); opacity:0; } .fileinput { position:relative; max-width:fit-content(325px); } .datetime { display:flex; flex-direction:rows; text-align:center; justify-content:space-between; } input[type=date] { width:56%; padding-left:0; padding-right:0; } input[type=time] { width:42%; padding-left:0; padding-right:0; } #name { padding-top:5px; font-weight:bold; width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } input.abs { background-color:#cfc; padding:14px 20px; margin:8px 0; border:1px solid #aaa; border-radius:4px; box-sizing:border-box; cursor:pointer; font-size:16px } .abs { position:absolute; top:0px; left:0px; z-index:1; } #input { position:relative; -moz-opacity:0; filter:alpha(opacity:0); opacity:0; z-index:2; }