#head_content { float: left; width: 92%; margin: 0%; padding: 4%; background: url("../img/bg-header.png") center }
#menu { float:left; width: 24px; margin: 20px 10px 20px }
#menu img { width: 100% !important }
#logo { float:left; width: 80%; padding: 3px 6% 0px 3% }
#logo img { float:left; width: 100% }
#logo span { float:left }
#logo span.section { float:left; width: 100%; color: #6EC11C; font-weight: bold !important }
#logo span.section span { color: #233052; margin-right: 5px }
#logo span.welcome { float:left; clear: both }
#logo span.user { float:left; color: #6EC11C; font-weight: bold !important; padding-left: 5px }
#logout{ float:right; width: 48px; font-size: 0.8em; color:#383838; text-align: center; background: url('../img/logout.png') no-repeat center top; background-size: 20px; height: 18px; padding-top: 24px }

#modalMenu { position: fixed; width: 76%; padding: 2%; background: #fff; inset: 0; z-index: 1; border-right: 2px solid #6EC11C; display: none }
#modalMenu p { color: #636363; float: left; margin: 0px 5px !important; box-shadow:none !important; padding: 0px }
#modalMenu ul { list-style: none; width: 90%; margin: 5%; padding: 0%; float: left }
#modalMenu ul li { list-style: none; display: block; padding-left: 32px; line-height: 36px }
#modalMenu ul li a { color:#233052; text-decoration: none; font-weight: bold }
h2.icon-settings { background: url('../img/icon-settings.png') no-repeat 5px center; background-size: 20px; text-align: left; padding: 20px 32px 16px 32px; float: left; width: 78%; margin: 0}
.icon-profile { background: url('../img/icon-profile.png') no-repeat 5px center; background-size: 12px; }
.icon-preferences { background: url('../img/icon-preferences.png') no-repeat 5px center; background-size: 12px; }
.icon-notifications { background: url('../img/icon-notifications.png') no-repeat 5px center; background-size: 12px; }
.icon-privacy { background: url('../img/icon-privacy.png') no-repeat 5px center; background-size: 12px; }
.icon-billing { background: url('../img/icon-billing.png') no-repeat 5px center; background-size: 12px; }
.icon-data { background: url('../img/icon-data.png') no-repeat 5px center; background-size: 12px; }
.icon-close { background: url('../img/icon-close.png') no-repeat 5px center; background-size: 12px; width: 24px; height: 24px; display: block; right: 4px; position: absolute; z-index: 2 }

#login { float: left; width: 90%; margin: 0% 0% 4%; padding: 4% 5%; text-align: center }
#login #logo { float:left; width: 90%; padding: 3px 5% 0px; text-align: center; margin-top: 3% }
#login #logo a { float:left; width: 100% }
#login #logo a img { float:left; width: 40%; padding: 3px 30% 0px }
#login #logo span { float:left; width: 90%; padding: 3px 5% 0px; text-align: center; font-size: 0.9em }

#login #options { float:left; width: 86%; margin: 10% 3% 5%; padding: 5% 4%; text-align: center; border:1px solid #E5E7EB }
#login #options p { float: left; font-weight: bold; text-align: center; width: 100% }
#login #options p span { text-align: left; font-size: 0.8em; float: left; margin: 5px 10% 0px 10%; font-weight: normal }
#login #options p a { color:#6EC11C }

#login #options ul { float: left; padding: 0px 10%; width: 80% }
#login #options ul li { float: left; display: grid; list-style: none; border:1px solid #E5E7EB; grid-template-columns: repeat(1, 3fr); gap: 6px; border-radius: 5px; width: 28%; padding: 1%; text-align: center; margin: 1%; cursor: pointer }
#login #options .facebook { background: url("../img/login-facebook.png") no-repeat center; float: left; background-size: 30%; width: 100%; height: 48px }
#login #options .apple { background: url("../img/login-apple.png") no-repeat center; float: left; background-size: 30%; width: 100%; height: 48px }
#login #options .google { background: url("../img/login-google.png") no-repeat center; float: left; background-size: 30%; width: 100%; height: 48px }
#login #options .discord { background: url("../img/login-discord.png") no-repeat center; float: left; background-size: 30%; width: 100%; height: 48px }
#login #options .microsoft { background: url("../img/login-microsoft.png") no-repeat center; float: left; background-size: 30%; width: 100%; height: 48px }
#login #options .separator { background: url("../img/login-separator.png") no-repeat center; width: 100%; height: 10px; float: left; background-size: 80% }

#login input[type=text], input[type=password] { border:1px solid #E5E7EB; border-radius:5px; width:60%; padding:2px 5% 2px 15%; line-height:36px; margin:0px 10% }

#login input[type=text] { background: url('../img/input-email.png') no-repeat 15px center; background-size: 12px; }
#login input[type=text].user { background: url('../img/input-name.png') no-repeat 15px center; background-size: 12px; }
#login input[type=password] { background: url('../img/input-pass.png') no-repeat 15px center; background-size: 12px; }
#login input[type=button] { background:#7CBB3B; border-radius:5px; color:#fff; border:none; padding: 10px 20px; font-weight:bold }