* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

html, body {
  height: 100%;
  background-color: rgba(245,245,245,0.8);
  font-family: 'Roboto Condensed', sans-serif;
}

body {
  background-image: url("../../assets/img/OEM-Logo.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  /*background-size: 80%;*/
  color: #0000aa;
  counter-reset: article;
}

@media (min-width: 300px) {
  body {
    background-size: 80%;
  }
}

@media (min-width: 576px) {
  body {
    background-size: 80%;
  }
}

@media (min-width: 768px) {
  body {
    background-size: 40%;
  }
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 300px) {
  .footer {
    height: 130px;
  }
}

@media (min-width: 576px) {
  .footer {
    height: 100px;
  }
}

@media (min-width: 768px) {
  .footer {
    height: 90px;
  }
}

@media (min-width: 992px) {
  .footer {
    height: 90px;
  }
}

@media (min-width: 1200px) {
  .footer {
    height: 100px;
  }
}

@media (min-width: 1400px) {
  .footer {
    height: 100px;
  }
}

.footer-box {
  top: 100%;
  position: relative;
  transition: all .3s ease-out;
  height: 100%;
  background: linear-gradient(rgba(245,245,245,0.0), rgba(200,200,200,0.8));
}

.footer:hover > .footer-box {
  top: 0%;
}

.footer-box.active {
  top: 0%;
}

.footer-box ul {
  padding: 40px;
  list-style: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer-box li {
  padding: 0 10px;
  font-weight: 600;
}

.footer-box ul a, .footer-box ul i {
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

.footer-box ul a:hover, .footer-box ul i:hover {
  opacity: 1;
  color: #0000aa;
}

.footer-box ul li .title {
  padding-left: 0.25em;
  font-family: 'Roboto Condensed', sans-serif;
}

/* Websites */

.content {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 300px) {
  .content {
    padding: 10px;
  }
}

@media (min-width: 576px) {
  .content {
    padding: 20px;
  }
}

.glass {
  background: white;
  background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  border-radius: 2rem;
  z-index: 2;
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(220,220,220,0.6);
}

@media (min-width: 300px) {
  .glass {
    min-height: 85vh;
    max-height: 85vh;
    width: 100%;
    margin: 15px 0px 120px 0px;
  }
}

@media (min-width: 576px) {
  .glass {
    min-height: 88vh;
    max-height: 88vh;
    width: 100%;
    margin: 0px 0px 60px 0px;
  }
}

@media (min-width: 768px) {
  .glass {
    min-height: 85vh;
    max-height: 85vh;
    width: 100%;
    margin: 0px 0px 60px 0px;
  }
}

@media (min-width: 992px) {
  .glass {
    min-height: 80vh;
    max-height: 475px;
    width: 90%;
    margin: 0px 0px 10px 0px;
  }
}

@media (min-width: 1200px) {
  .glass {
    min-height: 70vh;
    max-height: 475px;
    width: 80%;
    margin: 0px 0px 0px 0px;
  }
}

@media (min-width: 1400px) {
  .glass {
    min-height: 70vh;
    max-height: 475px;
    width: 80%;
    margin: 0px 0px 0px 0px;
  }
}

.text {
  overflow: auto;
}

@media (min-width: 300px) {
  .text {
    height: 80vh;
    width: 95%;
    padding: 0px 6px;
    margin: 20px 0px;
    overflow-x: hidden;
  }
}

@media (min-width: 576px) {
  .text {
    height: 80vh;
    width: 95%;
    padding: 0px 10px;
    margin: 20px 0px;
  }
}

@media (min-width: 768px) {
  .text {
    height: 80vh;
    width: 90%;
    padding: 0px 20px;
    margin: 30px 0px;
  }
}

@media (min-width: 992px) {
  .text {
    height: 70vh;
    width: 85%;
    padding: 0px 20px;
    margin: 30px 0px;
  }
}

@media (min-width: 1200px) {
  .text {
    height: 60vh;
    width: 70%;
    padding: 0px 20px;
    margin: 30px 0px;
  }
}

@media (min-width: 1400px) {
  .text {
    height: 60vh;
    width: 70%;
    padding: 0px 20px;
    margin: 30px 0px;
  }
}

.text::-webkit-scrollbar {
  width: 10px;
  background: #fff;
}

.text::webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

.text::-webkit-scrollbar-thumb {
  background: rgba(0,0,170,0.1);
  border-radius: 10px;
}

.text::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,170,1);
}

.text h1 {
  text-shadow: .15rem .15rem .5rem rgba(0,0,0,.35)!important;
}

.text.policy p {
  margin-bottom: 0.5em;
}

h4 {
  font-size: 18px;
  font-weight: 700;
  padding: 1.0em 0;
  text-transform: uppercase;
}

h4:before {
  content: counter(article, decimal) ' : ';
  counter-increment: article;
}

h5 {
  font-size: 18px;
  font-weight: 700;
  padding: 1.0em 0;
  text-transform: uppercase;
}

h5:before {
  content: 'Article ' counter(article, decimal) ' : ';
  counter-increment: article;
}

ol {
  counter-reset: article;
  list-style-type: none;
  margin-bottom: 0.0em;
  font-weight: normal;
}

ol > li {
  position: relative;
  padding: 0.0em;
  left: 0.5em;
}

ol > li::before {
  counter-increment: article;
  content: counters(article, ".") ". ";
  position: absolute;
  left: -2.5em;
  font-weight: 700;
}

ol ul {
  counter-reset: item;
  list-style-type: disc;
  margin-top: 0.5em;
  font-weight: normal;
}

ol ul > li {
  left: -1.5em;
}

ol ul > li::before {
  counter-increment: item;
  content: " ";
  position: absolute;
  left: -1.0em;
}

.more_info {
  margin: 2em 0;
  font-weight: 600;
  text-align: center;
}

.last_update {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  padding-bottom: 1.5em;
}

.exercise_rights {
  text-align: left;
  font-weight: normal;
}

.address {
  margin-left: 2.0em;
}

.sparkle {
  font-weight: 600;
}

/* login.php */

.text.login-form {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.links p {
  margin-bottom: 0rem;
}

/* register.php */

.text.register-form {
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* activate.php */

.text.activate-feedback {
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text.activate-feedback h2 {
  font-weight: 700;
  margin-bottom: 0.5em;
  text-shadow: .15rem .15rem .5rem rgba(0,0,0,.35)!important;
}

.text.activate-feedback p {
  margin-top: 0;
  margin-bottom: .15em;
}

.text.activate-feedback .downloads {
  padding: 1.0em;
  font-size: small;
  margin-bottom: .2em;
}

.text.activate-feedback .playstore, .text.activate-feedback .appstore {
  width: 90px;
  height: 25px;
  margin: 2px;
}

.text.activate-feedback img {
  width: 120px;
  height: 120px;
}

.text.activate-feedback .important {
  padding: .25em .25em 0.4em;
  border: solid thin #ff0000;
  border-radius: .5em;
  background-color: rgba(0,0,170,1.0);
  color: #ffffff;
  margin: .5em;
  display: grid;
}

.text.activate-feedback .instructions {
  font-size: small;
  font-style: italic;
}

/* device_confirmation.php */

.text.device-confirmation {
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text.device-confirmation .outer-wrapper {
  margin-bottom: 1em;
}

/* resendactivation.php */

.text.resendactivation {
  width: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text.resendactivation .outer-wrapper {
  margin-bottom: 1em;
}

/* resetpassword.php */

.text reset-form {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* General for forms */

.outer-wrapper {
  margin: 5px 0px;
}

.inner-wrapper {
  position: relative;
}

.checkbox-wrapper {
  margin: 10px 0px;
}

.form-label.label {
  margin-bottom: .25rem;
}

.my-input {
  padding: 0.2rem 0.75rem 0.2rem 2.0rem;
}

.input-icon {
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em);
  padding-left: 5px;
  color: #0000aa;
}

.btn.btn-submit {
  color: #ffffff;
  background-color: rgb(0,0,150);
  width: 6em;
  font-weight: 400;
  transition: all 0.2s ease-in-out;
}

.btn.btn-submit:hover, .btn.btn-submit:focus, .btn.btn-submit:active {
  box-shadow: 0em 0em 1.5em rgba(100,100,100,.75)!important;
  background-color: rgb(0,0,170);
  font-weight: 500;
}

.links {
  margin: 0.5em 0em;
  font-size: small;
  font-style: italic;
}

.msg {
  margin: 0.5em 0em;
  color: #e70000;
}

/* _private/home.php */

table {
  margin-bottom: 1.5em;
}

td {
  padding: 0.15em 1em;
}

/* _private/profile.php */

.text.profile-form {
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* _admin/account.php */

.text.accounts {
  width: 920px;
}

.text.accounts .content-block {
  font-size: small;
}

/* _admin/emailtemplate.php */

.text.template {
  width: 920px;
}

.text.template p {
  margin-bottom: 0.5em;
}

.text.template textarea {
  width: 100%;
  height: 335px;
  /*font-family: 'Oxygen Mono', monospace;*/
  /*font-size: x-small;*/
  font-size: small;
  resize: none;
}

/* _admin/settings.php */

.text.settings .row {
  width: 100%;
  clear: both;
}

.text.settings .col div {
  width: 100%;
  float: left;
}

.text.settings .col div label {
  display: block;
  float: left;
  width: 30%;
  text-align: left;
  margin-top: 5px;
}

.text.settings .col div input {
  width: 70%;
}

body {
}