.login { width: 100%; height: 100vh; position: relative; font-family: numeralLight; &__options{ color: #B5B5B5; a { color: #84de56; } } img { transform: rotate(-90deg); } .MuiButtonBase-root{ padding: 0px !important; } background: linear-gradient( 135deg, hsla(0, 0%, 31%, 1) 0%, hsla(0, 0%, 0%, 1) 100% ); background: -moz-linear-gradient( 135deg, hsla(0, 0%, 31%, 1) 0%, hsla(0, 0%, 0%, 1) 100% ); background: -webkit-linear-gradient( 135deg, hsla(0, 0%, 31%, 1) 0%, hsla(0, 0%, 0%, 1) 100% ); .footer { position: fixed; bottom: 0px; left: 0px; } } @media screen and (min-width: 1441px) { .login { section { width: 410px; b { color: white; font-size: 20px; margin-bottom: 30px; font-weight: 500; p { font-size: 16px; } } button { margin-top: 25px; background-color: #84de56; color: white; font-size: 20px; padding: 10px 0px; border: 0px; border-radius: 10px; } } &__info { width: 350px; margin: 40px auto 0px; text-align: center; color: white; font-size: 14px; a { color: #84de56; } } &__back { margin-bottom: 60px; a { color: white; font-size: 13px; } } &__options{ div{ font-size: 13px; } a{ font-size: 15px; } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; font-size: 20px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0.5px); } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: 22px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #2F2F2F; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: 16px; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .login { section { width: 350px; transform: scale(0.9); b { color: white; font-size: calc(100vw / 80); margin-bottom: 30px; font-weight: 500; } button { margin-top: 25px; background-color: #84de56; color: white; font-size: calc(100vw / 80); padding: 10px 0px; border: 0px; border-radius: 10px; } } &__info { width: 300px; margin: 40px auto 0px; text-align: center; color: white; font-size: calc(100vw / 110); a { color: #84de56; } } &__back { margin-bottom: 40px; a { color: white; font-size: calc(100vw / 110); } } &__options{ div{ font-size: calc(100vw / 110); } a{ font-size: calc(100vw / 110); } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 10px 14px !important; font-family: numeralLight; font-size: calc(100vw / 80); &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0px); z-index: 100; } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: calc(50%); padding: 0px !important; transform: translate(0px, -50%) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #2F2F2F; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: calc(100vw / 100); z-index: 110; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } }