:root {
  --header-texture-color: url("gplay.png"), linear-gradient(to right top, #5f319e, #5b3ca2, #564ba9, #4e59ad, #4a64b1, #4570b5, #407fbc, #3d8ac2, #3796c4, #369dc7, #2eb3d1, #2abfd5, #22d0db);
  --body-font: "Lato", sans-serif;

  /* Dark Mode */
  --body-bg-color: #3d4550;
  --theme-bg-color: rgba(16 18 27 / 40%);
  --border-color: rgba(113 119 144 / 25%);
  --theme-color: #f9fafb;
  --inactive-color: rgb(113 119 144 / 78%);
  --hover-menu-bg: rgba(12 15 25 / 30%);
  --content-title-color: #797e84;
  --content-bg: rgb(146 151 179 / 13%);
  --button-inactive: rgb(249 250 251 / 55%);
  --border-card-color: rgb(70 70 70);
  --dropdown-bg: #21242d;
  --dropdown-hover: rgb(42 46 60);
  --popup-bg: rgb(22 25 37);
  --subtitle-bg: rgb(0 102 153);
  --search-bg: rgb(255 255 255 / 8%);
  --overlay-bg: rgba(36, 39, 59, 0.3);
  --scrollbar-bg: #428bff;
  --border-box: #777;
  --shador-color-icons: rgb(79 79 79 / 100%);
  --subtitle: rgb(255 255 255 / 100%);
  --search-color: rgb(155 155 155 / 100%);
  --search-color-over: #fff;
  --footer-bg-color: #2a303a;
  --box-color-shadow-01: rgba(0, 0, 0, 0.2);
  --text-a-color: #ccc;
  /* Normal */
  --svg-dark-light: #ffce45;
  --light-mode-active: rgba(255, 255, 255, 0.94);
  --light-mode-body: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
  --content-button-color: #3a6df0;
  --white-color: #fff;
  --black-color: #000;
  --content-text-color: #ebecec;
  --modal-color: rgba(0, 0, 0, 0.4);
  --disabled-color: #777;
  --remove-button-color: #dd0000;
  --box-item-bgcolor: #e0e0e0;
  --box-imagem-icon-color: #4285f4;
}

.light-mode {
  /* Light Mode */
  --body-bg-color: #252d37;
  --theme-bg-color: rgb(255 255 255 / 31%);
  --theme-color: #3c3a3a;
  --inactive-color: #333333;
  --button-inactive: #3c3a3a;
  --border-card-color: rgb(188 191 193);
  --search-bg: rgb(255 255 255 / 31%);
  --dropdown-bg: #f7f7f7;
  --overlay-bg: rgb(255 255 255 / 30%);
  --dropdown-hover: rgb(236 236 236);
  --border-color: rgb(255 255 255 / 35%);
  --popup-bg: rgb(255 255 255);
  --subtitle-bg: rgb(255 255 255);
  --hover-menu-bg: rgba(255 255 255 / 35%);
  --scrollbar-bg: #428bff;
  --content-title-color: --theme-color;
  --content-bg: rgb(255 255 255 / 19%);
  --border-box: #aaa;
  --logo-big: invert(100%);
  --shador-color-icons: rgb(0 0 0 / 28%);
  --subtitle: rgb(0 0 0 / 100%);
  --search-color: rgb(100 100 100 / 100%);
  --search-color-over: #000;
  --footer-bg-color: #6c6d6d;
  --box-color-shadow-01: rgba(0, 0, 0, 0.2);
  --text-a-color: #444;
}

* {
  user-select: none;
}

.dark-light {
  position: fixed;
  bottom: 20px;
  right: 30px;
  background-color: var(--dropdown-bg);
  box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 50%;
  z-index: 3;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.dark-light svg {
  width: 24px;
  flex-shrink: 0;
  fill: #ffce45;
  stroke: #ffce45;
  transition: 0.5s;
}

.light-mode .dark-light svg {
  fill: transparent;
  stroke: var(--theme-color);
}

.light-mode .profile-img {
  border: 2px solid var(--theme-bg-color);
}

.light-mode .content-section ul {
  background-color: var(--theme-bg-color);
}

.light-mode .pop-up__title {
  border-color: var(--theme-color);
}

.light-mode .dropdown.is-active ul {
  background-color: rgba(255, 255, 255, 0.94);
}

body.light-mode:before,
body.light-mode .video-bg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
  /*backdrop-filter: saturate(3);*/
}

.biglinux-left-panel {
  background-color: var(--theme-bg-color);
  border-radius: 10px;
  width: 50%;
  margin-right: 1rem;
  flex-shrink: 0;
  text-align: left;
  padding: 20px;
}

.content-section-title {
  color: var(--text-a-color);
  margin-bottom: 14px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

  input[type=checkbox],
  input[type=radio] {
    --active: #275efe;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, 0.3);
    --border: #bbc1e1;
    --border-hover: #275efe;
    --background: #fff;
    --disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  input[type=checkbox]:after,
  input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }

  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  input[type=checkbox]:disabled+label,
  input[type=radio]:disabled+label {
    cursor: not-allowed;
  }

  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  input[type=checkbox]:focus,
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  input[type=checkbox]+label,
  input[type=radio]+label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
}

/* GENERAL RESETS */
* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/* BODY */
body {
  font-size: 16px;
  /* background-image: url("https://forum.biglinux.com.br/uploads/default/original/2X/f/f5679ca17fad618b3dc755347e2cb2677dd5ecfb.jpeg"); */
  background: #252d37;
  position: relative;
  color: var(--text-a-color);
  font: 16px/26px lato, sans-serif;
  text-align: left;
  height: 100%;
  overflow: hidden;
}

/* LOGIN */
.login {
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
}

/* WRAP */
.wrap {
  position: static;
  width: 100%;
  height: auto;
  margin: 5px;
  overflow: hidden;
  background: #171b26;
  border-radius: 10px;
}

.wrap:after {
  content: "";
  display: table;
  clear: both;
}

/* LOGO */
.logo-biglinux {
  filter: var(--logo-big);
}

.logo {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  display: block;
}

.logo img {
  position: absolute;
  margin-top: auto;
  top: 0;
  right: 0;
  bottom: 20px;
  left: 20px;
  width: 40px;
  pointer-events: none;
}

/* USER (FORM WRAPPER) */
.form-wrap {
  width: 100%;
  color: #fff;
}

.form-wrap .tabs-content {
  padding: 0 1em;
}

.user {
  position: relative;
  z-index: 0;
  float: none;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 100vh;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.form-wrap form .button:hover {
  background-color: #3a6df0;
}

/* FORM ELEMENTS */
div#add-tab-content {
  width: 100%;
  text-align: center;
}

input {
  font: 12px/26px "Lato", sans-serif;
}

.form-wrap {
  width: 100%;
}

.form-wrap .tabs-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.form-wrap form .input {
  margin: 0 0 0.8em 0;
  padding: 0.8em 2em 10px 0;
  width: 100%;
  display: inline-block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text-a-color);
  outline: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
}

::placeholder {
  color: var(--text-a-color);
  opacity: 1;
}

.button {
  float: left;
  margin: 0 0 3px 3px;
  padding: 0.1em 1em;
  width: auto;
  display: inline-block;
  background-color: #3a6df0;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.8em;
  border-radius: 30px;
}

.button:hover {
  background-color: #5c9fed;
}

.form-wrap form label[for] {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}

.form-wrap form label[for]:after {
  position: absolute;
  top: 1px;
  left: -10px;
  width: 15px;
  height: 8px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  content: "";
  background-color: transparent;
  border: solid #5c9fed;
  border-width: 0 0 3px 3px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.form-wrap .help-text {
  margin-top: 0.6em;
}

.form-wrap .help-text p {
  text-align: left;
  font-size: 14px;
}

.fa {
  display: none;
}

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style: none;
}

li {
  margin: 0;
  padding: 0;
}

li label {
  display: block;
  margin: 0 0 0 0;
  padding: 0 0 15px 0;
}

#desc {
  text-align: -webkit-center;
}

.fc-card {
  height: 100%;
  width: 100vw;
  color: var(--text-a-color);
  /*width: 60%;*/
  min-width: 400px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  font-size: 1.1em;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-delay: 0.2s;
  -moz-animation-duration: 0.3s;
  -moz-animation-delay: 0.2s;
}

/* SCROLL BARRA DE ROLAGEM */
::-webkit-scrollbar {
  width: 6px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

* {
  outline: none;
  box-sizing: border-box;
}

input[type=button] {
  background: -moz-linear-gradient(#ffffff, #dfdfdf);
  background: -ms-linear-gradient(#ffffff, #dfdfdf);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));
  background: -webkit-linear-gradient(#ffffff, #dfdfdf);
  background: -o-linear-gradient(#ffffff, #dfdfdf);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dfdfdf");
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')";
  background: linear-gradient(#ffffff, #dfdfdf);
}

.svg-center {
  display: flex;
  text-align: center;
  margin: 5px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}

main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

main>div {
  display: inline-block;
  width: 10px;
  height: 4em;
  border-radius: 5px;
  margin: 0 2px;
  background: #00ffff;
  transform: scaleY(0.1);
  opacity: 0.25;
  transform: translate(-50%, -50%);
  z-index: 1;
  /*box-shadow: 3px 3px 80px 5px #00ffff;*/
}

main.error {
  color: red;
  min-width: 20em;
  max-width: 30em;
  margin: 0 auto;
  white-space: pre-line;
}

main:before,
main:after {
  background-color: #00ffff;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

main:before {
  right: -5em;
  margin-left: 0%;
}

main:after {
  left: -5em;
  margin-right: 0%;
}