.text-color-1 {
  color: indigo; }

.bg-color-1 {
  background: indigo; }

.color-1 {
  background-color: indigo !important;
  color: #fff !important; }
  .color-1 + p > span {
    color: #2e004f;
    box-shadow: 0 0 0 2px rgba(75, 0, 130, 0.3); }

.text-color-2 {
  color: darkviolet; }

.bg-color-2 {
  background: darkviolet; }

.color-2 {
  background-color: darkviolet !important;
  color: #fff !important; }
  .color-2 + p > span {
    color: #7000a0;
    box-shadow: 0 0 0 2px rgba(148, 0, 211, 0.3); }

.text-color-3 {
  color: darkcyan; }

.bg-color-3 {
  background: darkcyan; }

.color-3 {
  background-color: darkcyan !important;
  color: #fff !important; }
  .color-3 + p > span {
    color: #005858;
    box-shadow: 0 0 0 2px rgba(0, 139, 139, 0.3); }

.text-color-4 {
  color: darkturquoise; }

.bg-color-4 {
  background: darkturquoise; }

.color-4 {
  background-color: darkturquoise !important;
  color: #fff !important; }
  .color-4 + p > span {
    color: #009c9e;
    box-shadow: 0 0 0 2px rgba(0, 206, 209, 0.3); }

.text-color-5 {
  color: darkseagreen; }

.bg-color-5 {
  background: darkseagreen; }

.color-5 {
  background-color: darkseagreen !important;
  color: #fff !important; }
  .color-5 + p > span {
    color: #6fa96f;
    box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3); }

.text-color-6 {
  color: burlywood; }

.bg-color-6 {
  background: burlywood; }

.color-6 {
  background-color: burlywood !important;
  color: #fff !important; }
  .color-6 + p > span {
    color: #d3a05f;
    box-shadow: 0 0 0 2px rgba(222, 184, 135, 0.3); }

.text-color-7 {
  color: mediumaquamarine; }

.bg-color-7 {
  background: mediumaquamarine; }

.color-7 {
  background-color: mediumaquamarine !important;
  color: #fff !important; }
  .color-7 + p > span {
    color: #40c095;
    box-shadow: 0 0 0 2px rgba(102, 205, 170, 0.3); }

.text-color-8 {
  color: mediumslateblue; }

.bg-color-8 {
  background: mediumslateblue; }

.color-8 {
  background-color: mediumslateblue !important;
  color: #fff !important; }
  .color-8 + p > span {
    color: #533ae9;
    box-shadow: 0 0 0 2px rgba(123, 104, 238, 0.3); }

.text-color-9 {
  color: crimson; }

.bg-color-9 {
  background: crimson; }

.color-9 {
  background-color: crimson !important;
  color: #fff !important; }
  .color-9 + p > span {
    color: #ad102f;
    box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.3); }

/*************/
/* Alert Box */
/*************/
.alertBox {
  display: flex;
  align-items: center;
  font-size: 1.2vw;
  position: absolute;
  /*    top: 75%;
    left: 50%;
    transform: translateX(-50%);*/
  z-index: 5000;
  border: 1px solid #ffffff;
  color: black;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  padding-right: 15px;
  border-radius: 3px;
  opacity: 0;
  transition: transform .3s, opacity .3s; }
  .alertBox.show-box {
    /*transform: translateX(-50%) translateY(-20px);*/
    opacity: 1; }
  .alertBox .icon {
    font-size: 1vw;
    font-weight: bold;
    margin: 10px;
    padding: 10px;
    border-radius: 100%;
    background-color: #ffffff; }

@media (min-width: 200px) and (max-width: 768px) {
  .alertBox {
    width: 80%;
    font-size: .8em !important;
    padding-top: 3px;
    padding-bottom: 3px; }
    .alertBox > .icon {
      font-size: .6em !important; } }

.successBox {
  background-color: #bbdcbc;
  border-color: #3c763d; }
  .successBox > .icon {
    color: #3c763d; }

.warningBox, .warnBox {
  background-color: #fae4c4;
  border-color: #c77c11; }
  .warningBox > .icon, .warnBox > .icon {
    color: #c77c11; }

.failBox, .errorBox {
  background-color: #f6dddb;
  border-color: #BD362F; }
  .failBox > .icon, .errorBox > .icon {
    color: #BD362F; }

.loadingBox {
  background-color: #dddddd;
  border-color: #909090; }
  .loadingBox > .icon {
    color: #909090; }

/*************
    GENERAL
*************/
:after, :before {
  box-sizing: initial; }

*:not(script):not(head) {
  margin: 0;
  padding: 0;
  font-family: 'ubunturegular'; }

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden; }

body.enable-overflow {
  overflow: auto; }

body {
  font-family: sans-serif;
  background-color: #efefef;
  font-size: 1.2vw;
  position: relative; }

.bold {
  font-weight: bold; }

.italic {
  font-style: italic; }

.flex-0 {
  flex: .0; }

.flex-05 {
  flex: .05; }

.flex-1 {
  flex: .1; }

.flex-15 {
  flex: .15; }

.flex-2 {
  flex: .2; }

.flex-25 {
  flex: .25; }

.flex-3 {
  flex: .3; }

.flex-35 {
  flex: .35; }

.flex-4 {
  flex: .4; }

.flex-45 {
  flex: .45; }

.flex-5 {
  flex: .5; }

.flex-55 {
  flex: .55; }

.flex-6 {
  flex: .6; }

.flex-65 {
  flex: .65; }

.flex-7 {
  flex: .7; }

.flex-75 {
  flex: .75; }

.flex-8 {
  flex: .8; }

.flex-85 {
  flex: .85; }

.flex-9 {
  flex: .9; }

.flex-95 {
  flex: .95; }

.flex-full {
  flex: 1; }

.flex, .flex-col, .flex-row, .flex-row-rev, .flex-col-rev {
  display: flex; }

.flex-self-start {
  align-self: flex-start; }

.flex-self-end {
  align-self: flex-end; }

.flex-self-stretch {
  align-self: stretch; }

.flex-self-center {
  align-self: center; }

.flex-center {
  align-items: center;
  justify-content: center; }

.flex-start-j {
  justify-content: flex-start; }

.flex-start-a {
  align-items: flex-start; }

.flex-end-j {
  justify-content: flex-end; }

.flex-end-a {
  align-items: flex-end; }

.flex-center-j {
  justify-content: center; }

.flex-center-a {
  align-items: center; }

.flex-row {
  flex-direction: row; }

.flex-row-rev {
  flex-direction: row-reverse; }

.flex-col {
  flex-direction: column; }

.flex-col-rev {
  flex-direction: column-reverse; }

.flex-around {
  justify-content: space-around; }

.flex-between {
  justify-content: space-between; }

.flex-evenly {
  justify-content: space-evenly; }

h2 {
  margin: 1.5vw 0 !important;
  text-align: center;
  font-weight: lighter;
  color: #3D3D3D;
  position: relative; }
  h2 #dropMenu {
    background: white; }
  h2 #meBtn {
    position: absolute;
    top: 0;
    left: 1.5vw; }
  h2 #versNum {
    position: absolute;
    top: 50%;
    right: 1vw;
    transform: translateY(-50%); }