.theme-light .text-primary {
  color: #1976D2;
}

.theme-light .text-onprimary {
  color: whitesmoke;
}

.theme-light .text-secondary {
  color: #00695c;
}

.theme-light .text-onsecondary {
  color: whitesmoke;
}

.theme-light .text-surface {
  color: whitesmoke;
}

.theme-light .text-onsurface {
  color: #636363;
}

.theme-light .text-error {
  color: #b00020;
}

.theme-light .text-onerror {
  color: #f8fafc;
}

.theme-light .text-background {
  color: whitesmoke;
}

.theme-light .text-onsurfacelow {
  color: rgba(0, 0, 0, 0.3);
}

.theme-light .text-onsurfacehigh {
  color: rgba(0, 0, 0, 0.8);
}

.theme-light .text-backgroundimg {
  color: url(/images/background3.jpg?bdf8cc22303f85dff1b1b16c114fec89);
}

.theme-dark .text-primary {
  color: #c57a32;
}

.theme-dark .text-onprimary {
  color: whitesmoke;
}

.theme-dark .text-secondary {
  color: #00695c;
}

.theme-dark .text-onsecondary {
  color: whitesmoke;
}

.theme-dark .text-surface {
  color: #2F2526;
}

.theme-dark .text-onsurface {
  color: #E1E6EC;
}

.theme-dark .text-error {
  color: #b00020;
}

.theme-dark .text-onerror {
  color: #f8fafc;
}

.theme-dark .text-background {
  color: #2F2526;
}

.theme-dark .text-onsurfacelow {
  color: rgba(255, 255, 255, 0.3);
}

.theme-dark .text-onsurfacehigh {
  color: rgba(255, 255, 255, 0.8);
}

.theme-dark .text-backgroundimg {
  color: url(/images/background3d.jpg?26ef66524e896b70d42c59c7a0d56578);
}

body {
  padding: 0;
  margin: 0;
}

.padding-left-xs {
  padding-left: 10px;
}

.padding-left-sm {
  padding-left: 25px;
}

.no-decor {
  text-decoration: none;
}

.vertical-top-space-xs {
  margin-top: 12px;
}

.vertical-top-space-sm {
  margin-top: 25px;
}

.vertical-top-space-md {
  margin-top: 50px;
}

.logo {
  -webkit-mask: url(/images/logo.svg?29b7d39afd5d9d3e8e4675022c80d018);
          mask: url(/images/logo.svg?29b7d39afd5d9d3e8e4675022c80d018);
  background-repeat: no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
  display: inline-block;
}

.theme-light .logo-primary-sm {
  background: #1976D2;
  width: 30px;
  height: 30px;
}

.theme-light .logo-primary-md {
  background: #1976D2;
  width: 60px;
  height: 60px;
}

.theme-light .logo-primary-lg {
  background: #1976D2;
  width: 90px;
  height: 90px;
}

.theme-light .logo-onprimary-sm {
  background: whitesmoke;
  width: 30px;
  height: 30px;
}

.theme-light .logo-onprimary-md {
  background: whitesmoke;
  width: 60px;
  height: 60px;
}

.theme-light .logo-onprimary-lg {
  background: whitesmoke;
  width: 90px;
  height: 90px;
}

.theme-light .logo-secondary-sm {
  background: #00695c;
  width: 30px;
  height: 30px;
}

.theme-light .logo-secondary-md {
  background: #00695c;
  width: 60px;
  height: 60px;
}

.theme-light .logo-secondary-lg {
  background: #00695c;
  width: 90px;
  height: 90px;
}

.theme-dark .logo-primary-sm {
  background: #c57a32;
  width: 30px;
  height: 30px;
}

.theme-dark .logo-primary-md {
  background: #c57a32;
  width: 60px;
  height: 60px;
}

.theme-dark .logo-primary-lg {
  background: #c57a32;
  width: 90px;
  height: 90px;
}

.theme-dark .logo-onprimary-sm {
  background: whitesmoke;
  width: 30px;
  height: 30px;
}

.theme-dark .logo-onprimary-md {
  background: whitesmoke;
  width: 60px;
  height: 60px;
}

.theme-dark .logo-onprimary-lg {
  background: whitesmoke;
  width: 90px;
  height: 90px;
}

.theme-dark .logo-secondary-sm {
  background: #00695c;
  width: 30px;
  height: 30px;
}

.theme-dark .logo-secondary-md {
  background: #00695c;
  width: 60px;
  height: 60px;
}

.theme-dark .logo-secondary-lg {
  background: #00695c;
  width: 90px;
  height: 90px;
}

/* For Login Stuff */

.theme-light .revealPassword,
.theme-light .revealPasswordConf {
  color: rgba(0, 0, 0, 0.3) !important;
}

.theme-light .mdc-floating-label--float-above.is-invalid {
  color: #b00020 !important;
}

.theme-dark .revealPassword,
.theme-dark .revealPasswordConf {
  color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .mdc-floating-label--float-above.is-invalid {
  color: #b00020 !important;
}

.mdc-text-field__icon.revealPassword,
.mdc-text-field__icon.revealPassword:focus,
.mdc-text-field__icon.revealPasswordConf,
.mdc-text-field__icon.revealPasswordConf:focus {
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
  pointer-events: all;
  outline: none;
}

input:-webkit-autofill:focus {
  z-index: auto !important;
}

.theme-light .codeContainer,
.theme-light .mdc-drawer {
  background: whitesmoke;
}

.theme-light .theme-surface-low {
  color: rgba(0, 0, 0, 0.3);
}

.theme-light .theme-surface-high {
  color: rgba(0, 0, 0, 0.8);
}

.theme-light .mdc-top-app-bar {
  border-color: whitesmoke;
}

.theme-light .material-icons {
  color: whitesmoke;
}

.theme-light .header-spacer {
  border-left: 1px solid whitesmoke;
}

.theme-light .mdc-list-item > .material-icons {
  color: #00695c;
}

.theme-light .mdc-notched-outline__leading,
.theme-light .mdc-notched-outline__notch,
.theme-light .mdc-notched-outline__trailing,
.theme-light .mdc-text-field,
.theme-light .mdc-text-field--outlined {
  color: #636363 !important;
  border-color: #636363 !important;
  caret-color: #636363 !important;
}

.theme-light .mdc-typography--headline5,
.theme-light .mdc-typography--body1,
.theme-light .mdc-floating-label,
.theme-light .mdc-floating-label--float-above,
.theme-light .mdc-list-item,
.theme-light .mdc-text-field__input,
.theme-light .mdc-text-field {
  color: #636363 !important;
  caret-color: #636363 !important;
}

.theme-light .mdc-button:not(.mdc-button--raised) {
  color: #1976D2;
}

.theme-light .mdc-button--raised {
  background-color: #1976D2;
  color: whitesmoke !important;
}

.theme-light .mdc-top-app-bar__section > .mdc-typography--body2 {
  color: whitesmoke !important;
}

.theme-light .mdc-list-item--selected {
  background-color: rgba(128, 128, 128, 0.5) !important;
}

.theme-light .landing-page-background {
  background-image: url(/images/background3.jpg?bdf8cc22303f85dff1b1b16c114fec89);
}

.theme-light .theme-light-only {
  display: auto;
}

.theme-light .theme-dark-only {
  display: none;
}

.theme-dark .codeContainer,
.theme-dark .mdc-drawer {
  background: #2F2526;
}

.theme-dark .theme-surface-low {
  color: rgba(255, 255, 255, 0.3);
}

.theme-dark .theme-surface-high {
  color: rgba(255, 255, 255, 0.8);
}

.theme-dark .mdc-top-app-bar {
  border-color: #c57a32;
}

.theme-dark .material-icons {
  color: #c57a32;
}

.theme-dark .header-spacer {
  border-left: 1px solid #c57a32;
}

.theme-dark .mdc-list-item > .material-icons {
  color: #c57a32;
}

.theme-dark .mdc-notched-outline__leading,
.theme-dark .mdc-notched-outline__notch,
.theme-dark .mdc-notched-outline__trailing,
.theme-dark .mdc-text-field,
.theme-dark .mdc-text-field--outlined {
  color: #E1E6EC !important;
  border-color: #E1E6EC !important;
  caret-color: #E1E6EC !important;
}

.theme-dark .mdc-typography--headline5,
.theme-dark .mdc-typography--body1,
.theme-dark .mdc-floating-label,
.theme-dark .mdc-floating-label--float-above,
.theme-dark .mdc-list-item,
.theme-dark .mdc-text-field__input,
.theme-dark .mdc-text-field {
  color: #E1E6EC !important;
  caret-color: #E1E6EC !important;
}

.theme-dark .mdc-button:not(.mdc-button--raised) {
  color: #c57a32;
}

.theme-dark .mdc-button--raised {
  background-color: #c57a32;
  color: #E1E6EC !important;
}

.theme-dark .mdc-top-app-bar__section > .mdc-typography--body2 {
  color: whitesmoke !important;
}

.theme-dark .mdc-list-item--selected {
  background-color: rgba(128, 128, 128, 0.5) !important;
}

.theme-dark .landing-page-background {
  background-image: url(/images/background3d.jpg?26ef66524e896b70d42c59c7a0d56578);
}

.theme-dark .theme-light-only {
  display: none;
}

.theme-dark .theme-dark-only {
  display: auto;
}

.preload-light-background {
  background: url(/images/background3.jpg?bdf8cc22303f85dff1b1b16c114fec89) no-repeat -9999px -9999px;
}

.preload-dark-background {
  background: url(/images/background3d.jpg?26ef66524e896b70d42c59c7a0d56578) no-repeat -9999px -9999px;
}

.landing-page-background {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  min-height: 100vh;
}

.mdc-top-app-bar {
  background: transparent;
  border-width: 0 0 1px 0;
  border-style: solid;
}

.mdc-top-app-bar__row {
  margin: auto;
  max-width: 1076px;
}

/* Using a big screen */

@media only screen and (min-width: 720px) {
  .hamburger-icon {
    display: auto;
  }

  .codeContainer {
    min-width: 350px;
  }

  .photoby {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}

/* Using a small screen */

@media only screen and (max-width: 720px) {
  .hamburger-icon {
    display: block;
  }

  .header-links {
    display: none;
  }

  .photoby {
    /*float:right;*/
    text-align: right;
    position: relative;
    right: 2px;
    bottom: 2px;
  }
}

.codeContainer {
  margin: auto;
  max-width: 350px;
  /*fit-content;*/
  border-radius: 5px;
  text-align: center;
  padding: 45px 45px 1px 45px;
}

.mdc-text-field {
  width: 100%;
}

.actionContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.theme-light .login-google {
  background-image: url(/images/google_light.svg?454fc322891777d8fd2872bd09e0c36b);
}

.theme-light .login-facebook {
  background-image: url(/images/fb_light.svg?a861e1ac78189f4984a5c53e093755b7);
}

.theme-light .login-github {
  background-image: url(/images/github_light.svg?1bc0b19cbbd3831855d85dcd0d832454);
}

.theme-light .login-discord {
  background-image: url(/images/discord_light.svg?07dd504daddced2b036d1fd3de722eb6);
}

.theme-dark .login-google {
  background-image: url(/images/google_dark.svg?bb92da0be0308c751a594cbfb50109a1);
}

.theme-dark .login-facebook {
  background-image: url(/images/fb_dark.svg?579365bcfaf84236be8e49368f4fee3b);
}

.theme-dark .login-github {
  background-image: url(/images/github_dark.svg?f4ef4ef3d8ef2b7dd5f81106715ad3ec);
}

.theme-dark .login-discord {
  background-image: url(/images/discord_dark.svg?abef26b981a9d7d4caff08ff1b1d1379);
}

.socialiteContainer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.socialiteContainer .social-button {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  width: 113px;
  height: 46px;
}

.photoby {
  border-radius: 5px;
  text-decoration: underline;
  padding: 1px 3px 1px 3px;
}

.header-spacer {
  margin: 0 10px 0 10px;
  width: 0px;
  height: 40%;
}

.switch-lightdark {
  cursor: pointer;
}

.app-drawer-layout {
  display: flex;
  flex: 1;
}

.app-drawer-layout .mdc-drawer--dismissible {
  top: 64px;
  height: calc(100% - 64px);
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1em;
}

.sitename-title {
  cursor: pointer;
}