:root {
  --ccpm-line-1: 0, 49, 169;
  --ccpm-bg-1: 0, 64, 96;
  --ccpm-dark: 26, 27, 48;
  --ccpm-light: 55, 48, 97;
  --border-width: 6px;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;

  background: #262626;
}

#main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background-image: radial-gradient(ellipse at 50% 50%, rgb(0, 0, 0) 30%, rgba(133, 133, 133, 0.17) 100%), url('../img/bg-test.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: black;
}

.content-wrapper {
  display: flex;
  justify-content: space-around;
  align-items:center;
  height: 100%;
  overflow: hidden;
  min-height: 0;
  align-self: center;
}

.wrapped-content {
  width: 70%;
  background-color: transparent;
  color: white;
  padding: 10px 30px;
  min-height: 0;
  max-height: 80%;
  flex: 0 1 auto;
  overflow-y: auto;
  border: 2px solid white;
  display: flex;
  flex-direction: column;
}

.static-header {
  margin-bottom: 5px;
}

.static-header :is(h1, h2, h3, h4, h5, h6, p, ul),
.static-content :is(h1, h2, h3, h4, h5, h6, p, ul) {
  font-weight: bold;
}

.static-content {
  margin-bottom: 10px;
  overflow-y: auto;
}

.dashboard-wrapper-lg {
  position: relative;
  background: #f7f7f7;
}

.nav-tabs {
  border: 1px solid #e6e6e6;
  padding: 4px 4px 0 4px;
  background-color: #ededed;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ededed));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #ededed);
  background-image: -moz-linear-gradient(top, #f7f7f7, #ededed);
  background-image: -ms-linear-gradient(top, #f7f7f7, #ededed);
  background-image: -o-linear-gradient(top, #f7f7f7, #ededed);
  background-image: linear-gradient(top, #f7f7f7, #ededed);
}

td, th {
  padding: 5px;
}

header {
  line-height: 60px;
}

header > .navigation {
  background-color: #121212;
  height: 70px;
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .header-text {
  color: #fff;
}

header .logo, header .header-text {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}

header .header-text .heading-title {
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
}

header .header-text a {
  vertical-align: top;
  color: white;
}

header .navigation .commands {
  align-self: center;
  height: 100%;
  flex: 5 0 auto;
  text-align: right;
}

header .navigation .commands img.sponsor {
  height: calc(100% - 1rem);
  padding: 0.25rem 0.5rem;
  margin: 0.5rem;
}

header #mini-nav {
  list-style: none;
  padding: 0;
}

header #mini-nav img {
  height: 70px;
}

header .candidate-info {
  color: #fff;
  text-align: center;
  height: fit-content;
  padding-left: 1em;
}

header .candidate-info .label-default {
  font-size: 1em;
  padding: 0.3em 0.6em;
  background-color: #767676;
}

header .candidate-info abbr {
  cursor: inherit;
  border-bottom: none;
  text-decoration: none;
}

header .candidate-info .popover {
  background-color: black;
  border: 1px solid #fff;
  border-radius: 0;
  /*border: 3px solid #35C928;*/
}

header .candidate-info .popover-content {
  padding: 5px 10px;
}

header .candidate-info .popover .arrow  {
  border-bottom-color: #fff;
}

header .candidate-info .popover .arrow:after {
  top: 2px;
  border-bottom-color: black;
}

footer {
  font-size: 11px;
  margin: 0;
  border-radius: 0 0 4px 4px;

  background: #121212;
  color: #000;
  font-weight: normal;
  line-height: 30px;
  padding: 0;
}

footer a, footer a:hover {
  color: #fff;
  text-decoration: inherit !important
}

footer p {
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
}

header h2 {
  margin: 0;
  padding: 0;
  font-size: 28px;
}

.challenge-details-wrapper,
.main-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#challenge-details {
  color: #fff;
  margin: 20px;
  max-width: 450px;
  border: 1px solid #fff;
  background: transparent;
  margin: 1rem;
  padding: 15px;
}

#challenge-details .row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

#reentry-btn {
  display: none;
  padding: 0
}

#reentry-btn:focus, #reentry-btn:focus-visible {
    outline: 0.25em solid white;
    outline-offset: 0.05em;
}

#reentry-btn > .btn-primary,
#logout-btn > .btn-primary {
  pointer-events: none;
}

.avatar{
  width: 100%;
  margin-right: 10px;
}

.challenge-list {
  border-radius: 5px;
}

.widget {
  background: #fafafa;
  border: 1px solid #cfcfcf;
  margin-bottom: 30px;
  
}

.widget-header {
  background-color: #e8e8e8;
  border-bottom: 1px solid #cfcfcf;
  height: 42px;
  padding: 11px;
}

.tab-content {
  padding: 15px;
  border: 1px solid #e6e6e6;
  background: #fff;
  border-top: 0;
  border-radius: 0 0 2px 2px;
}

#body-flex {
  display: flex;
  flex-flow: column;
  justify-content: safe center;
  align-items: center;
  flex: 1 0 auto;
  max-width: 100%;
  min-width: 0;
  margin: auto;
  padding: 25px;
}

#youkoso {
  border: 1px solid #f1f1f1;
  background: transparent;
  color: #fff;
  flex-basis: 35%;
}

#youkoso #yks-head {
  border-bottom: 1px solid #f1f1f1;
  margin: 0;
  padding: 1em 1em 0;
}

#yks-head img {
  width: 200px;
}

#youkoso h2 {
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#youkoso > div {
  margin: 15px 3.5em;
  text-align: center;
}

#youkoso > #yks-body > div {
  justify-content: center;
  display: flex;
}

.alert-container {
  display: none;
}

#request_pod_disabled,
#request_access_disabled {
  display: none;
}

.alert-container > .alert-warning a {
  color: #8a6d3b;
  text-decoration: underline;
}

@media (max-width: 1059px), (max-height: 499px) {

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

  .alert-container.replace-content {
    width: 100%;
    height: 100%;
  }

  .alert-container.replace-content > #warning-div {
    width: 85%;
  }

  .alert-container.replace-content > #warning-div hr {
    padding: 0 1em;
  }

  button#request_pod,
  button#request_access {
    display: none;
  }

  #request_pod_disabled,
  #request_access_disabled {
    display: inline-block;
  }

  .deployment-screen .work-area,
  .deployment-screen .guide-tab {
    display: none;
  }
}

#devices {
  width: 16em;
  display: flex;
  align-items: center;
  margin: 0 auto;
  height: 5.5em;
}

#browsers > div,
#devices > div {
  font-size: 0.9em;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

#browsers > div > div,
#devices > div > div {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
}

#devices .fa-stack {
  font-size: 1.2em;
}

#devices .left .fa-stack {
  font-size: 1.8em;
  width: fit-content;
  margin-right: 0.25em;
  height: fit-content;
  line-height: normal;
}

#browsers {
  display: flex;
  margin: 0 auto;
  width: 13.5em;
  height: 5em;
}

#browsers i {
  margin-right: 0.5em;
  font-size: 1.8em;
  vertical-align: bottom;
}

#mini-nav button.btn-link,
#youkoso button.btn-link {
  padding: 0;
  color: white;
  border-radius: 50%;
  line-height: 1em;
}

.ccpm-modal .modal-header .modal-title {
  font-size: 18px;
}

.ccpm-modal .modal-content h4 {
  margin: 0;
  font-size: 1em;
  font-weight: bold;
}

.ccpm-modal .modal-content ul {
  padding-left: 1em;
}

.ccpm-modal table.support-table,
.ccpm-modal table.support-table th,
.ccpm-modal table.support-table td {
  border: 1px solid black;
}

.ccpm-modal table.support-table {
  width: 100%;
  border-color: black;
}

.ccpm-modal table.support-table th {
  width: 50%;
  text-align: center;
}

.ccpm-modal tr th:first-child,
.ccpm-modal tr td:first-child {
  background-color: darkgreen;
}

.ccpm-modal tr th:nth-child(2),
.ccpm-modal tr td:nth-child(2) {
  background-color: darkred;
}

form:not(.ncfb.ncfb-form) fieldset legend {
  font-weight: bold;
  padding: unset;
  border: unset;
  color: white;
  font-size: unset;
  margin-bottom: 10px;
  margin-right: 5px;
}

#user-group-form .form-group {
  margin-top: 10px;
}

#user-group-form .form-group > label {
  display: block;
  margin-bottom: 10px;
  margin-right: 5px;
}

#user-group-form label .user-type-label {
  font-weight: normal;
}

#id_type {
  margin-left: 1em;
}

#info-container {
  margin-bottom: 1.5em;
}

#deploy-modal h5 {
  font-weight: bold;
  margin-bottom: 5px;
}

#deploy-modal ul {
  padding-left: 1em;
}

#deploy-modal .agreement-wrapper {
  display: flex;
  align-items: end;
}

#deploy-modal #agreement {
  width: 20px;
  height: 20px;
  margin-right: 0.5em;
}

#deploy-modal label[for="agreement"]{
  margin-bottom: 0;
}

.modal-content {
  border-radius: unset;
  border: 2px solid white;
  background: rgba(0,0,0,1);
  color: white;
}

.modal-content a,
.wrapped-content a {
  color: #35C928;
}

.modal-content > .modal-header > button.close {
  color: white;
  opacity: 1;
}

@media (max-width: 539px) {
  #mini-nav > li > a.logo > img, div.navigation > div.commands > img.sponsor {
    height: 11vw;
  }

  div.commands > button.btn-group {
    display: none;
  }

  header .header-text .heading-title {
    font-size: 5vw;
  }
}

@media ((max-width: 1024px) and (hover: none)) or (max-width: 810px) {
  .wrapped-content {
    max-height: 100%;
    width: 100%;
    border: unset;
    padding: 10px 20px;
  }
}

.btn:focus, .btn:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible {
  outline: 0.25em solid white;
  outline-offset: 0.05em;
}

select.tc-theme:focus {
  outline-style: dotted;
}

select.tc-theme {
  color: white;
  border-color: white;
  border-style: solid;
  border-radius: 0;
  background-color: black;
}

.btn-cyber-trials {
  margin-top: 20px;
}

.btn-cyber-trials,
.modal-content > .modal-footer > button,
.modal-content > .modal-footer > a.btn {
  border-radius:18px;
  min-width: 140px;
  height: 42px;
  background-color: black;
  color: #35C928;
  border: 2px solid #35C928;
  text-transform: uppercase;
  line-height: 2em;
  font-weight: bold;
}

.btn-cyber-trials:hover,
.modal-content > .modal-footer > button:hover,
.modal-content > .modal-footer > a.btn:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.modal-content > .modal-footer > button.btn-danger {
  color: #eb0a1d;
  border-color: #eb0a1d;
}

.modal-content > .modal-footer > button.btn-danger:hover {
  color: #fff;
  background-color: #d00b1c;
  border-color: #9d0b17;
}

article:not(:first-of-type) {
  margin-top: 2em;
}

article > p > span.li, .static-content p > span.li {
  display: list-item;
  margin-left: 2em;
}

article > p > span.li:first-of-type, .static-content p > span.li:first-of-type {
  margin-top: 0.5em;
}