html {
    box-sizing: border-box;
}
*, :after, :before {
    box-sizing: inherit;
}
div.splashPage {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: opacity 300ms linear;
}
div.splashPage {
    color: rgb(166,166,166) !important;
}
div.splashPage {
    background-color: rgb(28,28,28) !important;
}
div.splashPage div.logo {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    left: 0;
    height: 45px;
    width: 45px;
    margin: 5px 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("/console/static/images/wr-studio-logo.png");
}
div.splashPage.active div#loader,
div.splashPage.active div#loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
div.splashPage.active div#loader {
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    transform: translateY(-35%);
    font-size: 10px;
    position: absolute;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* START - CUSTOM CSS */
:root {
  --wr-teal: rgb(0, 173, 164);
  --wr-sea: rgb(48, 228, 208);
  --wr-dark-teal: rgb(76, 166, 157);
  --wr-dark-sea: rgb(104, 219, 199);
  --wr-white: rgb(255, 255, 255);
  --wr-lightgrey: rgba(34, 36, 38, 0.15);
  --wr-grey: rgb(166, 166, 166);
  --wr-amethyst: rgb(132, 115, 173);
  --wr-black: rgb(28, 28, 28);

  --wr-celadon: rgb(108, 150, 148);
  --wr-mint: rgb(163, 218, 214);
  --wr-lavender: rgb(209, 154, 255);
  --wr-mauve: rgb(207, 189, 249);
  --wr-slate: rgb(80, 80, 80);
  --wr-granite: rgb(119, 119, 119);

  --primary-dark-color: var(--wr-teal);
  --primary-normal-color: var(--wr-sea);
  --primary-light-color: var(--wr-mint);
  --primary-text-color: var(--wr-white);
  --secondary-dark-color: var(--wr-amethyst);
  --secondary-light-color: var(--wr-mauve);
  --secondary-text-color: var(--wr-white);

  --main-background-color: var(--wr-black);
  --main-text-color: var(--wr-black);
  --main-link-color: var(--wr-teal);
  --menu-text-color: var(--wr-grey);
  --menu-hover-color: var(--primary-text-color);
  --menu-active-color: var(--primary-text-color);
  --header-text-color: var(--wr-grey);

  --icon-dark-color: var(--wr-granite);
  --icon-light-color: var(--wr-grey);

  --button-background-color: var(--primary-normal-color);
  --button-hover-color: var(--primary-dark-color);
  --button-text-color: var(--primary-text-color);

  --button-dropdown-background-color: var(--wr-dark-sea);
  --button-dropdown-hover-color: var(--wr-dark-teal);

  --status-success-color: rgb(0, 183, 164);
  --status-warning-color: rgb(255, 209, 153);
  --status-error-color: rgb(235, 78, 91);

  --status-success-background: rgba(0, 183, 164, 0.5);
  --status-warning-background: rgba(255, 209, 153, 0.5);
  --status-error-background: rgba(235, 78, 91, 0.5);
}

/* Login */
div.loginContainerExtended {
  background-color: var(--main-background-color) !important;
  height: 450px !important;
}

div.loginContainer {
  width: 400px !important;
}

div.loginContainer button {
  background-color: var(--primary-normal-color) !important;
  color: var(--primary-text-color) !important;
  text-transform: capitalize !important;
}

div.loginContainer > div.logo {
  width: 400px !important;
  height: 200px !important;
}

div.splashPage > div.logo {
  display: none;
}

/* Header */
div.headerBar {
  height: 70px !important;
}

h1.ui.header {
  font-family: 'Roboto Slab', Sans-Serif !important;
  font-size: 1.24rem !important;
  font-weight: 100 !important;
  text-transform: uppercase !important;
  color: var(--header-text-color) !important;
}

a > div.logo {
  display: block !important;
  background-image: url('/console/static/images/wr-studio-logo.png') !important;
  margin: 0 auto !important;
  width: 205px !important;
  height: 70px !important;
  text-align: center !important;
  transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) !important;
}

a > div.logo + div > span {
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
  width: 205px !important;
  transition: all 500ms cubic-bezier(0.55, 0, 0.1, 1) !important;
}

h1.ui.header > span {
  color: var(--primary-dark-color) !important;
  display: inline-block;
  vertical-align: top !important;
  margin-top: 30px;
}

/* top level ui segment div of login page */
div#app > div.ui.segment {
  background-color: var(--main-background-color) !important;
}

/* apply background image with 30% opacity */
div#app > div.ui.segment::before {
  content: '';
  background-image: url('/console/static/images/wr-rings.png');
  background-size: 1600px;
  background-repeat: no-repeat;
  background-position: top -800px left -800px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.3;
}

/* Main */
.main {
  top: 70px !important;
}

.main .sidebar.ui.left.menu .link.item {
  color: var(--menu-text-color);
}

.main .sidebar.ui.left.menu .link.item:hover {
  background-color: #000 !important;
  color: var(--menu-hover-color) !important;
}

.main .sidebar.ui.left.menu .link.item.active,
.main .sidebar.ui.left.menu .link.item.active:hover {
  color: var(--menu-active-color) !important;
  background-color: var(--primary-normal-color) !important;
}

.main .sidebar.ui.left.menu .link.item:hover {
  color: var(--menu-hover-color) !important;
}

/* Tours */
button#toursButton {
  display: none;
}

/* UI elements */
.widget .widgetItem.ui.segment:not(.inverted) {
  border-top-color: var(--primary-dark-color) !important;
}

.ui.table {
  border-color: var(--wr-lightgrey) !important;
}

.ui.table {
  border-color: var(--wr-lightgrey) !important;
}

.ui.table a,
.ui.table a:hover,
.ui.modal a,
.ui.modal a:hover,
.ui.breadcrumb a,
.ui.breadcrumb a:hover {
  color: var(--main-link-color) !important;
}
.ui.modal .content label {
  font-weight: 700 !important;
}
.ui.form input:focus,
.ui.selection.active.dropdown,
.ui.selection.active.dropdown .menu {
  border-color: var(--primary-dark-color) !important;
}

div.ui.toggle.checkbox input:checked ~ .box:before,
div.ui.toggle.checkbox input:checked ~ label:before,
div.ui.toggle.checkbox input:focus:checked ~ .box:before,
div.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: var(--primary-dark-color) !important;
}

.ui.message.info,
.ui.message.positive,
.editModeSidebar > .ui.message {
  color: var(--primary-text-color) !important;
  background-color: var(--status-success-background) !important;
  box-shadow: 0 0 0 1px var(--status-success-color) inset, 0 0 0 0 transparent !important;
}

.ui.message.positive .header,
.editModeSidebar > .ui.message .header {
  color: var(--primary-text-color) !important;
}

.ui.positive.button,
.ui.positive.buttons .button {
  background-color: var(--primary-normal-color) !important;
}

.widget .ui.label,
.widget .ui.form .field > label,
.widget .ui.form .inline.field > label {
  font-weight: 700;
}

.widget .ui.label,
.widget .ui.form .field > label,
.widget .ui.form .inline.field > label {
  font-weight: 700;
}

table.ui.table td.row-error,
table.ui.table tr.row-error {
  box-shadow: 0 0 0 var(--status-error-color) inset;
  background: var(--status-error-background) !important;
  color: var(--main-text-color) !important;
}

table.ui.table td.row-warning,
table.ui.table tr.row-warning {
  box-shadow: 0 0 0 var(--status-warning-color) inset;
  background: var(--status-warning-background) !important;
  color: var(--main-text-color) !important;
}

table.ui.table td.row-debug,
table.ui.table tr.row-debug {
  box-shadow: 0 0 0 var(--primary-normal-color) inset;
  background: var(--primary-light-color) !important;
  color: var(--main-text-color) !important;
}

table.ui.eventsTable i.icon {
  color: var(--icon-light-color) !important;
}

table.ui.eventsTable i.icon.inverted {
  background-color: var(--icon-light-color) !important;
}

.deployBlueprintModal .pretty-json-container .variable-value > div {
  color: var(--secondary-dark-color) !important;
}

.rc-tree .rc-tree-node-selected {
  background-color: var(--primary-normal-color) !important;
  border-color: var(--primary-dark-color);
}

/* NOTE: color selectors for the following are required due to !important scope override */

button.blue,
button.green,
.widget button,
.modal button.ok,
.modal button.primary,
button.ui.button.primary,
button.ui.button.editModeButton,
button.ui.button.createPageButton,
button.ui.button.createTemplateButton {
  color: var(--button-text-color) !important;
  background-color: var(--button-background-color) !important;
}

button.blue:hover,
button.green:hover,
.widget button:hover,
.modal button.ok:hover,
.modal button.primary:hover,
button.ui.button.editModeButton:hover,
button.ui.button.createPageButton:hover,
button.ui.button.createTemplateButton:hover,
#gridContainer div.toolbar button:hover:not(:disabled) {
  color: var(--button-text-color) !important;
  background-color: var(--button-hover-color) !important;
}

.ui.blue.buttons .button.dropdown {
  background-color: var(--button-dropdown-background-color) !important;
}

.ui.blue.buttons .button.dropdown:hover {
  background-color: var(--button-dropdown-hover-color) !important;
}

button.ui.basic.blue.button,
button.ui.basic.blue.button:hover,
button.ui.basic.blue.button:not(:disabled):hover,
button.ui.button.basic.blue:not(:disabled):active,
button.ui.button.basic.blue:not(:disabled):focus {
  -webkit-box-shadow: 0 0 0 1px var(--button-hover-color) inset !important;
  box-shadow: 0 0 0 1px var(--button-hover-color) inset !important;
  color: var(--button-hover-color) !important;
  background: none !important;
  background-color: transparent !important;
}

div.ui.blue.label,
div.ui.blue.labels .label,
div.ui.green.label,
div.ui.green.labels .label {
  background-color: var(--primary-dark-color) !important;
  border-color: var(--primary-dark-color) !important;
  color: var(--primary-text-color) !important;
}

div.ui.purple.label,
div.ui.purple.labels .label {
  background-color: var(--secondary-dark-color) !important;
  color: var(--secondary-text-color) !important;
}

div.ui.red.segment:not(.inverted),
div.ui.blue.segment:not(.inverted) {
  border-top-color: var(--primary-dark-color) !important;
}

i.blue.globe.icon,
i.green.user.icon {
  color: var(--primary-normal-color) !important;
}

i.green.icon,
i.green.icon.play,
i.green.icon.checkmark,
i.green.icon.statusIcon {
  color: var(--status-success-color) !important;
}

i.yellow.icon,
i.yellow.icon.spinner,
i.yellow.icon.statusIcon {
  color: var(--status-warning-color) !important;
}

i.orange.icon,
i.orange.icon.ban {
  color: var(--status-warning-color) !important;
}

i.red.icon,
i.red.icon.stop,
i.red.icon.remove,
i.red.icon.statusIcon {
  color: var(--status-error-color) !important;
}

.ui.green.progress .bar,
.nodeState .ui.green.inverted.segment {
  background-color: var(--status-success-color) !important;
}

.ui.yellow.progress .bar,
.nodeState .ui.yellow.inverted.segment {
  background-color: var(--status-warning-color) !important;
}

.ui.orange.progress .bar,
.nodeState .ui.orange.inverted.segment {
  background-color: var(--status-warning-color) !important;
}

.ui.red.progress .bar,
.deploymentSegment .ui.progress.error .bar,
.nodeState .ui.red.inverted.segment {
  background-color: var(--status-error-color) !important;
}

.ui.indicating.progress[data-percent^='1'] .bar,
.ui.indicating.progress[data-percent^='2'] .bar {
  background-color: #d95b5b !important;
}
.ui.indicating.progress[data-percent^='3'] .bar {
  background-color: #c7dd4b !important;
}
.ui.indicating.progress[data-percent^='4'] .bar,
.ui.indicating.progress[data-percent^='5'] .bar {
  background-color: #6cdf42 !important;
}
.ui.indicating.progress[data-percent^='6'] .bar {
  background-color: #38e16b !important;
}
.ui.indicating.progress[data-percent^='7'] .bar,
.ui.indicating.progress[data-percent^='8'] .bar {
  background-color: #b4d95c !important;
}
.ui.indicating.progress[data-percent^='9'] .bar,
.ui.indicating.progress[data-percent^='100'] .bar {
  background-color: #30e3ce !important;
}
.ui.black.labels .label,
.ui.black.label {
  font-weight: 700 !important;
}
.ui.black.labels .label,
.ui.black.label {
  font-weight: 700 !important;
}

/* END - CUSTOM CSS */