:root{--red:rgb(203,95,93);--white:rgb(255,255,255);--dark:rgb(26,26,26);--dark-gray:rgb(52,52,52);--blue:rgb(58,175,255);--pink:rgb(187,125,191);--green:rgb(34,255,169);--lavender:rgb(170,175,219);--yellow:rgb(189,190,130);--teal:rgb(143,194,187);--gray:rgb(173,174,178);--red2:rgb(255,67,119);--pink2:rgb(239,106,167);--purple:rgb(139,108,207);--brown:rgb(161,120,76)}

body {background:var(--dark); color:var(--gray);}
body {overflow-y:scroll; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:var(--dark-gray)}::-webkit-scrollbar-thumb:hover{background:var(--red2)}
::selection {color: white; background-color: var(--red2);}



textarea.form-control, input.form-control, textarea.form-control:focus, input.form-control:focus {background: #111; border:1px solid transparent; color:var(--gray);}

a, a:hover {color: var(--blue);}
code,a>code {color: var(--pink2)}
.btn-inline {line-height: 1}
.btn-group-inline label {line-height: 1 !important;}

.btn-outline-primary {
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline-primary:hover {
  background-color: var(--blue);
  border-color: var(--blue);
}
.text-primary {color: var(--blue) !important;}
.btn-outline-danger {
  color: var(--red2);
  border-color: var(--red2);
}
.btn-outline-danger:hover {
  background-color: var(--red2);
  border-color: var(--red2);
}
.text-danger {color: var(--red2) !important;}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle {background-color: var(--red2);border-color: var(--red2);}
.btn-outline-success {
  color: var(--green);
  border-color: var(--green);
}
.btn-outline-success:hover {
  background-color: var(--green);
  border-color: var(--green);
}
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle {background-color: var(--green);border-color: var(--green);}
.text-success {color: var(--green) !important;}
.btn-outline-red {
  color: var(--red);
  border-color: var(--red);
}
.btn-outline-red:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn-outline-red:not(:disabled):not(.disabled).active, .btn-outline-red:not(:disabled):not(.disabled):active, .show>.btn-outline-red.dropdown-toggle {background-color: var(--red);border-color: var(--red); color: #fff;}
.text-red {color: var(--red) !important;}



.modal-content {background: #222}
.modal-header {border-bottom: 1px solid #111;}
hr {border-top: 1px solid #111}
.card {background: #111}

.my-input-hr {
  border-style: none none solid;
  border-bottom-width: 2px;
  border-color: var(--red2);
  margin: 0px;
  width: 100%;
  transform: scaleX(0);
  opacity: 0;
  transition: 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transform-origin: 0 0;
  position: absolute;
  bottom: 0px;
}

.my-input:focus + .my-input-hr {
  transform: scaleX(1);
  opacity: 1; }

.my-input-div {
  display: inline-block;
  position: relative;
}
.my-input {
  background: #111;
  border: none;
  /*border-bottom: 1px solid #666;*/
  color: var(--gray);
  padding-left: 9px;
  padding-top: 10px;
  outline: none;
  /*line-height: 26px;*/
  padding-bottom: 5px;
  border-radius: .25rem;
  width:100%;
}
.my-input-label {
  transition: 100ms;
  position: absolute;
  top:10px;
  left:10px;
  /*font-size:14px;*/
  pointer-events: none;
  color: #666;
}
.my-input:not([data-empty]) +.my-input-hr+ .my-input-label, .my-input:focus +.my-input-hr+ .my-input-label {
  top:1px;
  left:4px;
  font-size:10px;
}
.my-input:focus +.my-input-hr+ .my-input-label {
  color: var(--red2);
}
.my-input[disabled] {background: none}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}