:root {
    --main-color: #1c2538;
    --subcolor: #161e2d;
    --marine-blue: #1c2538;
    --muted-marine-blue: #161e2d;
    --maroon: #6e2639;
    --mint: #00bf78;
    --grass-green: #1d8037;
    --running: #1d8037;
    --stopped: #838683;
    --deleted: #000000;
    --broken: #ce2b2b;
    --transition: #b3be27;
    --python-yellow: #ffd343;
    --python-blue: #2b5b84;
    --indigo: #6610f2;
    --dark-blue: #34495e;
}

/* General Styles */
body, html {
    height: 100%;
}

html {
    min-height: 100%;
    position: relative;
    background: whitesmoke;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    margin: auto;
}
body {
    background-color: whitesmoke;
    color: #a7a9ac;
    margin-bottom: 60px;
    padding-top: 4rem;
}
main {
    background: whitesmoke;
    /* overflow: auto; */
}
.title-ctn {
    text-align: center;
}
h3, h4, h5 {
    margin: 10px 0 30px 0;
    letter-spacing: 2px;  /* 10px */
    font-size: 20px;
    color: #111111;
}
.vh-100 {
    height: 100vh;
}
.margin-r-5 {
    margin-right: 5px;
}
.m-l-r-2 {
    margin: 0 2px;
}
.m-l-r-3 {
    margin: 0 3px;
}
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Container styles */
.tab-pane {
    padding-bottom: 20px;
}
#content-container {
    background-color: white;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid gray;
    border-radius: 1px;
    box-shadow: 1px 1px 5px #000000;
}
#content-row {
    height: 100vh;
}
.info-container {
    background-color: white;
    width: 100%;
    border: 1px solid darkgray;
    box-shadow: 1px 2px 3px 0 gray;
    margin-bottom: 20px;
    padding: 20px;
}
/* TODO: Needs to be removed from templates once styles have been updated */
.landing_container {
    margin:auto;
    background-color: white;
    min-height: 100%;
    position: relative;
}
.image-container {
    text-align: center;
    padding: 1rem;
    background: whitesmoke;
    border: whitesmoke;
    border-radius: 4px;
}
.form-ctn {
    width: 40%;
    margin-top: 10vh;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 15px 16px 8px -13px rgba(0,0,0,0.62);
    box-shadow: 0px 10px 13px -7px #000000, 15px 16px 8px -13px rgba(0,0,0,0.62);
    padding: 2%;
    background-color: white;
}
.input-field {
    margin-top: 5vh;
}
.form-input-group {
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 4px;
    margin: 15px 0 15px 0;
}
.vm-ctn {
    margin-bottom: 10vh;
}
.vm-list-ctn {
    margin: 0 auto;
}
.vm-card {
    margin-bottom: 5vh;
}
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
/* Footer styles */
footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 10px;
    background-color: #f5f5f5;
}
footer p {
    color: black;
}
footer a:hover {
    color: var(--maroon, #6e2639);
    text-decoration: none;
}


/* General Nav styles */
.nav-pills > li {
    padding-top: 10px;
}
.nav-pills > li:last-child {
    padding-bottom: 10px;
}

/* Main Navbar styles */
.top-navbar {
    background: var(--main-color);
    color: #ffffff;
    border-bottom: #535353 solid 0.1vh;
    box-shadow: 1px 1px 10px #000000;
}
.top-navbar-pill {
    padding-right: 10px;
}
.btn.top-navbar-btn {
    background-color: var(--main-color);
    color: white;
    width: 100%;
    margin-right: 10px;
}
.btn.top-navbar-btn:hover {
    background-color: whitesmoke;
    color: black;
}
.btn.top-navbar-btn#sign-out {
    background-color: var(--grass-green);
}
.btn.top-navbar-btn#sign-out:hover {
    background-color: whitesmoke;
    color: black;
}
.navbar-icon {
    width: 30px;
    height: auto;
    filter: invert(1);
    -webkit-filter: invert(1);
    transform: rotate(45deg);
}
ul.dropdown-menu-hover > li:hover {
    background-color: var(--python-blue);
    color: white;
}
#settings:hover {
    color: white;
}
/* Sidebar styles */
.nav-sidebar {
    top: 50px;
    padding-top: 1.5rem;
    background-color: var(--subcolor,#161e2d);
}
@media (min-width: 768px) {
    .nav-sidebar {
        top: 0;
        position: fixed;
    }
}
.nav-img {
    text-align: center;
    background: whitesmoke;
}

/*  Off Canvas sidebar at medium breakpoint */
@media screen and (max-width: 992px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }

  .row-offcanvas-left,
  .sidebar-offcanvas {
    left: -33%;
  }

  .row-offcanvas-left.active {
    left: 33%;
    margin-left: -6px;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 33%;
    height: 100%;
    overflow: auto;
  }
}

/* Off Canvas wider at sm breakpoint */
@media screen and (max-width: 34em) {
  .row-offcanvas-left,
  .sidebar-offcanvas {
    left: -45%;
  }

  .row-offcanvas-left.active {
    left: 45%;
    margin-left: -6px;
  }

  .sidebar-offcanvas {
    width: 45%;
  }
}

/* Misc. Styles */
ol.teams {
    list-style-type: none;
    counter-reset: elementcounter;
    padding-left: 0;
}
li.teams:before {
    content: "Team " counter(elementcounter) ": ";
    counter-increment: elementcounter;
    font-weight: bold;
}
td, th {
    text-align: center;
}
.popup-notif {
    border-radius: 3px;
    line-height:30px;
    position: fixed;
    display: block;
    margin: 0 auto !important;
    width: auto;
    min-width: 400px;
    height: 50px;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 0px 10px 50px rgba(0,0,0,.6);
    background: var(--mint);
    color: black;
    border: 1px solid gray;
}

/* Timer Styles */
.countdown-timer {
    pointer-events: none;
    font-family: 'Share Tech Mono', monospace;
    color: white;
    background: #242424;
    width: auto;
    box-shadow: inset 0 0 5px black;
    border-radius: 3px;
}
.countdown-timer span {
    font-size: 32px;
    color: whitesmoke;
}
@media (width: 1090px) {
    .countdown-timer span {
        font-size: 20px;
    }
}
/* Button Styles */
.nav-item button:hover {
    box-shadow: inset 0 0 5px black;
}
.nav-item button.active:hover {
    box-shadow: none;
    pointer-events: none;
}
.nav-link a:hover {
    color: black;
    box-shadow: inset 0 0 5px black;
}
.nav-link a.active:hover {
    color: black;
    box-shadow: none;
    pointer-events: none;
}
.nav-link.disabled {
    pointer-events: none;
    user-select: none;
    color: #666666;
}
#startEscapeRoomBtn:focus, #startEscapeRoomTimer:focus {
    opacity: 0.5;
    background-color: var(--muted-marine-blue);
    color: white;
}
.icon-button {
    border: none;
    background: none;
}
.icon-button:hover {
    cursor: pointer;
}
.icon-button:active, .icon-button:after, .icon-button:focus {
    border: none;
}

.loading-icon {
    visibility: hidden;
    margin-left: 2px;
}
.loading-icon.animated {
    visibility: visible;
    color: white;
    opacity: 0.6;
    animation: spin 2s linear infinite;
}

.bg-1 {
    background: var(--maroon, #6e2639); /* #2d2d30 */
    color: #a7a9ac; /*#bdbdbd */
}
.bg-1 h3 {
    color: #a7a9ac; /* #fff */
}
.bg-1 p {
    font-style: italic;
}
.btn-ctn {
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.btn-ctn {
    text-align: center;
    margin-top: 5vh;
}
.btn-deactivated {
    color: var(--maroon, #6e2639);
    background-color:grey;
}
.btn-fa {
    background-color: var(--subcolor, #161e2d);
    color: white;
    width: auto;
    min-width: 100px;
    max-height: 45px;
    border-radius: 4px;
    margin-right: 3px;
    padding: 10px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}
.btn-fa:hover {
    color: var(--subcolor, #161e2d);
    background-color: whitesmoke;
    text-decoration: none;
    box-shadow: inset 0 0 5px #c1c1c1;
}
.btn-fa:focus {
    background-color: whitesmoke;
    color: var(--subcolor, #161e2d);
    text-decoration: none;
}
.btn-fa-deactivated {
    color: var(--subcolor, #161e2d);
    background-color: gray;
    text-decoration: none;
}
.btn-primary {
    background-color: var(--maroon, #6e2639) !important;
    color: whitesmoke !important;
}
.btn-fa.btn-delete:hover, .btn-fa.btn-delete:active {
    background-color: firebrick;
    color: whitesmoke;
    box-shadow: inset 0 0 5px #861a1a;
    border: 1px solid #861a1a;
    cursor: pointer;
}
button.btn-delete:hover, button.btn-delete:active{
    background-color: firebrick;
    color: whitesmoke;
    box-shadow: inset 0 0 5px #861a1a;
    cursor: pointer;
}
.control_button {
    margin-top:2%;
    text-align:center;
}
.start-stop-btn {
    margin-left: 2vw;
}
.icon-light {
    color: whitesmoke;
    margin-right: 5px;
}
.btn-fa:hover > .icon-light, .btn-fa:active > .icon-light {
    color: var(--main-color, #1c2538);
}
.btn-fa.btn-delete:hover > .icon-light {
    color: whitesmoke;
}
a.btn-fa.connection-link.disabled.no-select {
    pointer-events: none;
    user-select: none;
    background-color: #cccccc;
    color: #666666;
}
.server-control-btn:disabled {
    pointer-events: none;
    opacity: 0.3;
}
/* Workout Controls Sidebar Container */
.control-container {
    border: 1px solid white;
    border-radius: 4px;
    margin-top: 10px;
    padding: 0 1px;
}
ul.control-container-list {
  padding: 0 4px
}
li.control-container-list {
    margin: 10px 0;
}

/* Load animation styles*/
.loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid var(--maroon, #6e2639); /* BG color */
    border-radius: 50%;
    margin: auto;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
#loading {
    text-align: center;
    margin-top: 5vh;
}
.loadAnimationWrapper {
    float: left;
    padding-bottom: 10px;
    margin-left: 5px;
}
.loadAnimation {
    /* Creates a spinning circle animation */
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #d00072;; /* BG color */
    border-radius: 50%;
    margin: auto;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Coffee waiting animation */
.floating-icon {
    position: relative;
    animation: cup-bounce 2s ease infinite;
}
@keyframes cup-bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0); color: var(--python-blue); transition: var(--mint) 1000ms linear;}
	40% {transform: translateY(-15px);}
	60% {transform: translateY(-8px); color: var(--mint); transition: var(--python-blue) 1000ms linear;}
}

/* Divider Divs */
.divider-5h {
    height: 5px;
    width: 80%;
    margin: 0 auto 15px auto;
    background: var(--subcolor);
    border-radius: 10px;
}
.divider-3h {
    height: 3px;
    width: 80%;
    margin: 0 auto 15px auto;
    background: var(--subcolor);
    border-radius: 10px;
}

/* FontAwesome Icon Styles */
.fa-pr-5 { padding-right: 5px; }
.fa-pl-5 { padding-left: 5px; }
.buildState {font-size: 30px;}
.buildState.running {color: var(--running, #1d8037);}
.buildState.stopped {color: var(--stopped, #838683);}
.buildState.deleted {color: var(--deleted, #000000);}
.buildState.transition {color: var(--transition, #b3be27);}
.buildState.broken {color: var(--broken, #ce2b2b);}
.buildState.notbuilt {color: var(--stopped, #838683);}
p.complete {
    color: green;
    font-weight: bold;
}

/* Text Highlighting */
.highlight-info {
    background-color: #7ab7dc;
    border-radius: 10px;
    padding: 5px;
}
.highlight-warning {
    background-color: #fbe9b1;
    border-radius: 10px;
    padding: 5px;
}
.highlight-error {
    background-color: #b75f5f;
    border-radius: 10px;
    padding: 5px;
}
.hidden {
    color: whitesmoke;
    border-radius: 10px;
    padding: 5px;
}

/* Assessment Styles */
.assessment-table-container {
    border: 1px solid gray;
    box-shadow: 1px 2px 3px 0 gray;
    padding: 10px;
    background: white;
}
.table.assessment-table thead th {
    border: none;
}
.table.assessment-table td {
    background: white;
}
td.assessment-question {
    text-align: left;
    word-break: break-word;
    overflow-y: auto;
}