@charset "utf-8";
:root {
  --me-background: #1D2124;
  --me-charcoal: #25282A;
  --me-primary: #158AE1;
  --me-primary-hover: #0b70bd;
  --me-white: #ffffff;
  --me-text: #6c757d;
  --me-gray: #a0aeb6;
  --me-darkgray: #595D61;
  --me-deepgray: #292D2F;
  --me-pebble: #212528;
  --me-select: #464f5b;
  --me-red: #fa5c7c;
  --me-red-hover: #e43255;
  --me-secondary: #6587cb;
  --me-secondary-hover: #636dd6;
  --me-green: #0acf97;
  --me-green-hover: #099e74;
  --me-blue: #3cadce;
  --me-blue-hover: #339ab9;
  --me-lightgray: #f5f5f5;
  --me-sapphire: #1D58B1;
  --me-sapphire-hover: #0d408d;
  --me-danger: #D45342;
  --me-danger-hover: #af3423;
}

.text-primary {
  color: var(--me-primary);
}

.text-red {
  color: var(--me-red);
}

.text-green {
  color: var(--me-green);
}

/* header */
header {
  background-color: var(--me-charcoal);
  height: 70px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-title {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.import-yaml {
  line-height: 70px;
  background-color: var(--me-darkgray);
  margin-right: 16px;
}

.import-yaml:hover svg {
  fill: var(--me-primary);
}

.profile {
  position: relative;
  display: flex;
  align-self: stretch;
  transition: 0.5s;
  width: 170px;
}

.profile a.profile-drop {
  display: flex;
  align-items: center;
  width: 170px;
  padding: 0 16px;
  transition: 0.2s;
  color: var(--me-white);
  line-height: 16px;
}

.profile-drop span {
  display: inline-block;
}

.dropdown-toggle::after {
  display: none;
}

.profile-image {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 11px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

figure.profile-image {
  overflow: hidden;
  border-radius: 50%;
}

.profile-image img {
  display: none;
}

#username {
  font-size: 18px;
}
#department {
  color: var(--me-text)
}

/* container */
.contents-container {
  display: flex;
  align-items: stretch;
}

/* menu */
aside.menu {
  background-color: var(--me-charcoal);
  width: 260px;
  min-height: calc(100vh - 70px);
  flex-shrink: 0;
  line-height: 200%;
  font-weight: 300;
  text-indent: 16px;
}

.menu-item a {
  display: block;
  margin: 10px;
  padding: 13px 0px;
  font-size: 16px;
  font-weight: 500;
}

.menu-item a.menu.menu-active {
  color: var(--me-white);
  background-color: var(--me-primary);
  border-radius: 8px;
}
.menu-item a.menu svg {
  vertical-align: text-top;
  margin-right: 5px;
}
.menu-item a.menu,
.menu-item a.menu svg {
  color: var(--me-darkgray);
  stroke: white;
  transition: 0.5s;
}
.menu-item a.menu:hover,
.menu-item a.menu:hover svg {
  color: var(--me-white);
  stroke: var(--me-white);
  transition: 0.5s;
}

/* contents */
.content {
  width: 100%;
  padding: 24px;
  flex: 1;
  min-height: calc(100vh - 70px);
}

.content-title-group {
  display: flex;
  align-items: center;
  margin-bottom: 21px;
}

.content h2 {
  font-size: 18px;
  font-weight: 600;
  margin-right: 16px;
}

.btn {
  border: 0;
}

.btn-common {
  padding: 8px 12px;
  border-radius: 4px;
  color: #fff;
  /*text-shadow: 0 0 3px #333;*/
  background-color: #222;
  transition: 0.2s;
  font-size: 16px;
  font-weight: 500;
}

.btn-primary,
.btn.btn-primary {
  background-color: var(--me-primary);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--me-primary-hover);
}

.btn-red,
.btn.btn-primary.btn-red {
  background-color: var(--me-red);
}

.btn-red:hover,
.btn.btn-primary.btn-red:hover {
  background-color: var(--me-red-hover);
}

.btn-green {
  background-color: var(--me-green);
}

.btn-green:hover {
  background-color: var(--me-green-hover);
}

.btn-purple,
.btn.btn-primary.btn-purple {
  background-color: #6587cb;
}

.btn-purple:hover,
.btn.btn-primary.btn-purple:hover {
  background-color: var(--me-secondary-hover);
}

.btn-blue,
.btn.btn-primary.btn-blue {
  background-color: var(--me-blue);
}

.btn-blue:hover,
.btn.btn-primary.btn-blue:hover {
  background-color: var(--me-blue-hover);
}

.btn-lightgray,
.btn.btn-primary.btn-lightgray {
  background-color: var(--me-lightgray);
  color: var(--me-darkgray);
  font-size: 14px;
  width: 74px;
}

.btn-lightgray:hover,
.btn.btn-primary.btn-lightgray:hover {
  background-color: var(--me-darkgray);
  color: var(--me-lightgray);
}

.btn-sapphire {
  color: var(--me-white);
  background-color: var(--me-sapphire);
}

.btn-sapphire:hover {
  color: var(--me-white);
  background-color: var(--me-sapphire-hover);
}

.btn-danger {
  background-color: var(--me-danger);
}

.btn-danger:hover {
  background-color: var(--me-danger-hover);
}

.label-common {
  padding: 3px 8px;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  text-shadow: 0 0 3px #333;
}

.label-active,
.label-running,
.label-true,
.label-connected {
  border-color: var(--me-green);
  color: var(--me-green);
}

.label-enabled {
  border-color: #53c6ff;
  color: #53c6ff;
}

.label-pending,
.label-unavailable,
.label-disabled,
.label-notready,
.label-false {
  border-color: #98a6ad;
  color: #98a6ad;
}

.btn-measure {
  margin: -8px 10px;
}

/* selected */
.selected-name {
  color: var(--me-primary);
  margin-right: 16px;
}

.selected-info {
  margin: 16px 0 24px;
}

.selected-info p {
  display: inline-block;
  color: #98a6ad;
  margin-right: 24px;
  font-weight: 300;
}

.selected-info p span {
  font-size: 16px;
  font-weight: 300;
  color: #f5f5f5;
}

.content-selection .label-common {
  font-size: 14px;
}

/* tab */
.content-selection .nav-tabs {
  --bs-nav-tabs-border-width: 0;
  border-bottom: 2px solid #303437;
  background-color: var(--me-charcoal);
  border-radius: 3px 3px 0px 0px;
}

.content-selection .nav-tabs .nav-link {
  color: #808386;
  min-width: 150px;
  height: 50px;
  font-size: 16px;
  border-bottom: 3px solid transparent;
}

.content-selection .nav-tabs .nav-link.active {
  background-color: var(--me-deepgray);
  color: var(--me-white);
  border-bottom: 3px solid var(--me-primary);
}

.content-selection .nav-tabs .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.tab-content {
  background-color: var(--me-charcoal);
  min-height: 400px;
  padding: 16px;
  border-radius: 0px 0px 3px 3px;
}

.content-table thead.single-line tr {
  height: 50px;
}

.tab-nodes-info {
  padding: 16px 0 30px;
  display: flex;
  align-items: center;
}

.tab-nodes-info p {
  font-weight: 300;
  color: #98a6ad;
  margin-right: 50px;
}

.tab-nodes-info p strong {
  font-weight: 500;
  color: #f5f5f5;
  margin: 0 10px;
  font-size: 16px;
}

.tab-globalnet {
  padding: 0 0 30px;
}

.display-inlineblock {
  display: inline-block;
}

.mc-network-wrapper {
  display: flex;
}

.width-60 {
  width: 60%;
}

.width-100 {
  width: 100%;
}

.connection-wrapper {
  margin-right: 24px;
  background-color: var(--me-background);
  padding: 16px;
}

.connection-wrapper .content-table {
  margin-bottom: 0;
}

.network-wrapper {
  background-color: var(--me-background);
  padding: 16px;
  display: flex;
}

.network-wrapper > div > span {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 14px;
  color: #98a6ad;
}

.measure-rtt {
  position: relative;
  min-width: 232px;
  height: 265px;
  font-size: 32px;
  border: 1px solid #98a6ad;
  margin-right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.measure-network {
  position: relative;
  width: 100%;
  height: 265px;
  font-size: 32px;
  border: 1px solid #98a6ad;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.measure-network > div {
  width: 50%;
  height: 265px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.measure-network .send {
  color: #21a2ff;
}

.measure-network .recv {
  color: #ff2020;
}

.measure-network > div.measure-network-legend {
  position: absolute;
  bottom: 26px;
  height: 30px;
  font-size: 14px;
}

.measure-network-legend span {
  margin-right: 32px;
}

.measure-network-legend .send::before,
.measure-network-legend .recv::before {
  content: "∎";
  font-size: 26px;
}

.not-available {
  font-size: 18px;
  background-color: var(--me-darkgray);
  text-align: center;
  line-height: 350px;
}

/* graph */
.graph-wrapper {
  width: 100%;
  display: flex;
  margin-bottom: 24px;
}

.graph-wrapper h3 {
  font-size: 14px;
  color: #98a6ad;
  margin-bottom: 16px;
}

.graph-common {
  margin-right: 24px;
}

.graph {
  width: 233px;
  height: 222px;
  background-color: var(--me-background);
  display: flex;
  justify-content: center;
  align-items: center;
}

.graph-common.network,
.graph-common.network .graph {
  width: 100%;
  margin: 0;
}

#chart3 {
  min-width: 100%;
  padding-top: 10px;
}

.apexcharts-legend-text,
.apexcharts-xaxis-label {
  color: #fff !important;
}

.card {
  background-color: var(--me-charcoal);
  color: var(--me-darkgray);
  min-height: 320px;
  border: 0;
}

.card.cluster-summary {
  height: 300px;
}

.card.node-spec {
  height: auto;
}

.card-content {
  height: calc(100% - 30.391px);
  background-color: var(--me-background);
}

.card-content.vertical {
  height: 152px;
}

.card-content.vertical:not(:last-child) {
  margin-bottom: 16px;
}

.card-content-title {
  padding: 24px;
  color: var(--me-darkgray);
  font-size: 14px;
  font-weight: 500;
}

.card-content-text {
  color: var(--me-lightgray);
  font-size: 30px;
  font-weight: 500;
}

.status-message {
  min-height: 120px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: white;
}
.card-title::before,
.setting-title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #158AE1;
  margin-bottom: 4px;
  margin-right: 5px;
}

.setting-item {
  margin-bottom: 60px;
}

.setting-title {
  margin-bottom: 10px;
}

.setting-input-group input[type="text"] {
  width: 576px;
  height: 37px;
  line-height: 37px;
  border: 1px solid var(--me-darkgray);
  border-radius: 4px;
  background-color: transparent;
  color: var(--me-lightgray);
  text-indent: 8px;
}

.setting-input-group label {
  margin-right: 36px;
}

.content-wrapper {
  width: 100%;
  padding: 12px;
  flex: 1;
  min-height: calc(100vh - 70px);
}

.card-content.chart {
  height: 320px;
}

.node-spec.text {
  flex: 0 0 auto;
  width: 20%;
}

.node-spec.chart {
  flex: 0 0 auto;
  width: calc((100% - 20%) / 3);
  background-color: var(--me-charcoal);
}

.content-title {
  margin-bottom: 10px;
  width: 400px;
  padding: 9px;
  background-color: var(--me-charcoal);
  border-radius: 23px;
}

.content-title.secondary {
  padding: 26.5px 0;
}

.content-title > h2::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #158AE1;
  margin-bottom: 4px;
  margin-right: 9px;
  margin-left: 5px;
}

.sm-card {
  min-width: 120px;
}

.chart {
  background-color: var(--me-background);
}

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

/* overview page */
.card.ip-info {
  height: 65px !important;
  min-height: 65px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24px;
  color: #B0B8BE;
  font-size: 14px;
}

#center-ip {
  margin-left: 16px;
}

#registered-clusters{
  font-size: 50px;
  font-weight: 600;
  height: 100%;
  color: var(--me-lightgray);
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-wrapper {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
}

.btn-group {
  height: 40px;
}
.btn-group > button {
  min-width: 120px;
}

.w-18px {
  width: 18px !important;
}
.fs-17px {
  font-size: 17px !important;
}


/* scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #43494E;
}
::-webkit-scrollbar-thumb {
  background: var(--me-text); 
  border: 2px solid #43494E; 
  border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--me-gray); 
}



.map-error {
  width: 100%;
  height: 800px;
  background-image: url('../images/map.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}