html,
body {
    height: 100%;
    background-color: #121212;
    color: #fff;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #222222;
    border-top: 1px solid #121212;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.btn-nav {
    border-color: #fff;
    border-width: 2px;
    padding: 4px 20px;
    margin: 8px 0px;
    border-radius: 15px; /* Set the desired margin values */
    background-color: transparent;
}

.btn-nav:hover {
    color: #fff;
    background-color: #333;
}

.btn-nav.important {
    color: black;
    background-color: white;
    font-weight: bold;
}

.btn-nav-group {
    margin: 0;
}

.btn-nav-group div:first-child {
    padding: 0 7px 0 15px;
}

.btn-nav-group div:last-child {
    padding: 0 15px 0 7px;
}

.btn-rounded {
    border-radius: 30px;
}

.btn-full-width {
    width: 100%;
}

.modal-form {
    margin: 0 auto 15px auto;
    max-width: 300px;
}

.modal-title {
    text-align: center;
}

.modal-sub-title {
    text-align: center;
    font-size: 14px;
}

/* Style for the container */
.progress-container {
    display: flex;
    align-items: center;
}

/* Style for each progress line */
.progress-line {
    flex-grow: 1; /* Make the lines fill the container width */
    height: 10px; /* Adjust the height of the line */
    margin-right: 3px; /* Adjust the space between each line */
    border-radius: 5px;
}

/* Gray color for initial lines */
.progress-line-gray {
    background-color: #ccc;
}

/* Green color for active lines */
.progress-line-green {
    background-color: #4CAF50;
}

.toggle-password-wrapper {
    position: relative;
    margin: auto;
    max-width: 300px;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 36px;
    /*transform: translateY(-50%);*/
    cursor: pointer;
}

.doc-page-container {
    margin: 15px 100px;
}

@media(max-width:767px) {
    .doc-page-container {
        margin: 15px 15px;
    }
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\e151";
}

a.desc:after {
    content: "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li button.menu-item {
    padding: 15px;
    border: none;
}

.dropdown-menu-stack {
    background-color: #222;
}

.nav li .menu-item.dropdown-item {
    padding: 10px;
    background-color: #222;
}

@media(max-width:767px) {
    .nav li > button.menu-item {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }

    .nav li .menu-item.dropdown-item {
        padding-left: 25px;
    }
}

.nav > li button.menu-item:focus,
.nav > li button.menu-item:hover {
    text-decoration: none;
}

.nav > li button.menu-item:focus {
    outline: none;
}

a.footer-link {
    color: white;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------
    PALETTE
------------------------------------------------------------ */
.plt-brown-bg-dark {
    background-color: #3c301a;
}
/* B 15% from dark */
.plt-brown-bg-darker {
    background-color: #261d10;
}
/* B 10% from dark */
.plt-brown-bg-darkest {
    background-color: #1a130b;
}
/* from base to dark */
.plt-brown-radial {
    background: radial-gradient(circle at center, #66512c 0%, #3c301a 100%);
}
.plt-brown-bg-base {
    background-color: #66512c;
}
.plt-brown-text-dark {
    color: #3c301a;
}
.plt-brown-text-base {
    color: #66512c;
}
.plt-brown-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #66512c;
    background-blend-mode: overlay;
}
.plt-brown-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #66512c;
    background-blend-mode: overlay;
}

.plt-red-bg-dark {
    background-color: #3c1a1a;
}
/* B 15% from dark */
.plt-red-bg-darker {
    background-color: #261010;
}
/* B 10% from dark */
.plt-red-bg-darkest {
    background-color: #1a0b0b;
}
/* from base to dark */
.plt-red-radial {
    background: radial-gradient(circle at center, #662c2c 0%, #3c1a1a 100%);
}
.plt-red-bg-base {
    background-color: #662c2c;
}
.plt-red-text-dark {
    color: #3c1a1a;
}
.plt-red-text-base {
    color: #662c2c;
}
.plt-red-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #662c2c;
    background-blend-mode: overlay;
}
.plt-red-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #662c2c;
    background-blend-mode: overlay;
}

.plt-green-bg-dark {
    background-color: #233c1a;
}
/* B 15% from dark */
.plt-green-bg-darker {
    background-color: #162610;
}
/* B 10% from dark */
.plt-green-bg-darkest {
    background-color: #0f1a0b;
}
/* from base to dark */
.plt-green-radial {
    background: radial-gradient(circle at center, #3d662c 0%, #233c1a 100%);
}
.plt-green-bg-base {
    background-color: #3d662c;
}
.plt-green-text-dark {
    color: #233c1a;
}
.plt-green-text-base {
    color: #3d662c;
}
.plt-green-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #3d662c;
    background-blend-mode: overlay;
}
.plt-green-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #3d662c;
    background-blend-mode: overlay;
}

.plt-aqua-bg-dark {
    background-color: #1a3c31;
}
/* B 15% from dark */
.plt-aqua-bg-darker {
    background-color: #10261f;
}
/* B 10% from dark */
.plt-aqua-bg-darkest {
    background-color: #0b1a15;
}
/* from base to dark */
.plt-aqua-radial {
    background: radial-gradient(circle at center, #2c664f 0%, #1a3c31 100%);
}
.plt-aqua-bg-base {
    background-color: #2c664f;
}
.plt-aqua-text-dark {
    color: #1a3c31;
}
.plt-aqua-text-base {
    color: #2c664f;
}
.plt-aqua-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #2c664f;
    background-blend-mode: overlay;
}
.plt-aqua-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #2c664f;
    background-blend-mode: overlay;
}

.plt-sky-bg-dark {
    background-color: #1a323c;
}
/* B 15% from dark */
.plt-sky-bg-darker {
    background-color: #102026;
}
/* B 10% from dark */
.plt-sky-bg-darkest {
    background-color: #0b151a;
}
/* from base to dark */
.plt-sky-radial {
    background: radial-gradient(circle at center, #2c5666 0%, #1a323c 100%);
}
.plt-sky-bg-base {
    background-color: #2c5666;
}
.plt-sky-text-dark {
    color: #1a323c;
}
.plt-sky-text-base {
    color: #2c5666;
}
.plt-sky-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #2c5666;
    background-blend-mode: overlay;
}
.plt-sky-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #2c5666;
    background-blend-mode: overlay;
}

.plt-navy-bg-dark {
    background-color: #1a213c;
}
/* B 15% from dark */
.plt-navy-bg-darker {
    background-color: #101526;
}
/* B 10% from dark */
.plt-navy-bg-darkest {
    background-color: #0b0e1a;
}
/* from base to dark */
.plt-navy-radial {
    background: radial-gradient(circle at center, #2c3966 0%, #1a213c 100%);
}
.plt-navy-bg-base {
    background-color: #2c3966;
}
.plt-navy-text-dark {
    color: #1a213c;
}
.plt-navy-text-base {
    color: #2c3966;
}
.plt-navy-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #2c3966;
    background-blend-mode: overlay;
}
.plt-navy-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #2c3966;
    background-blend-mode: overlay;
}

.plt-purple-bg-dark {
    background-color: #271a3c;
}
/* B 15% from dark */
.plt-purple-bg-darker {
    background-color: #191026;
}
/* B 10% from dark */
.plt-purple-bg-darkest {
    background-color: #110b1a;
}
/* from base to dark */
.plt-purple-radial {
    background: radial-gradient(circle at center, #3d2c66 0%, #271a3c 100%);
}
.plt-purple-bg-base {
    background-color: #3d2c66;
}
.plt-purple-text-dark {
    color: #271a3c;
}
.plt-purple-text-base {
    color: #3d2c66;
}
.plt-purple-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #3d2c66;
    background-blend-mode: overlay;
}
.plt-purple-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #3d2c66;
    background-blend-mode: overlay;
}

.plt-pink-bg-dark {
    background-color: #391a3c;
}
/* B 15% from dark */
.plt-pink-bg-darker {
    background-color: #241026;
}
/* B 10% from dark */
.plt-pink-bg-darkest {
    background-color: #180b1a;
}
/* from base to dark */
.plt-pink-radial {
    background: radial-gradient(circle at center, #622c66 0%, #391a3c 100%);
}
.plt-pink-bg-base {
    background-color: #622c66;
}
.plt-pink-text-dark {
    color: #391a3c;
}
.plt-pink-text-base {
    color: #622c66;
}
.plt-pink-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #622c66;
    background-blend-mode: overlay;
}
.plt-pink-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #622c66;
    background-blend-mode: overlay;
}

.plt-gray-bg-dark {
    background-color: #414141;
}
/* B 15% from dark */
.plt-gray-bg-darker {
    background-color: #262626;
}
/* B 10% from dark */
.plt-gray-bg-darkest {
    background-color: #1a1a1a;
}
/* from base to dark */
.plt-gray-radial {
    background: radial-gradient(circle at center, #696969 0%, #414141 100%);
}
.plt-gray-bg-base {
    background-color: #696969;
}
.plt-gray-text-dark {
    color: #414141;
}
.plt-gray-text-base {
    color: #696969;
}
.plt-gray-bg-radial-base {
    background: url("/img/cards/bw-half-burst-400.jpg");
    background-position: center center;
    background-color: #696969;
    background-blend-mode: overlay;
}
.plt-gray-bg-full-radial-base {
    background: url("/img/cards/bw-full-burst-400.jpg");
    background-position: center center;
    background-color: #696969;
    background-blend-mode: overlay;
}

i.spin{
    -webkit-transform-origin: 50% 78%;
    transform-origin:50% 78%;
    -ms-transform-origin:50% 78%; /* IE 9 */
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

/** Override alerts on frontend*/
.alert-success.alert-black-bg {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.alert-warning.alert-black-bg {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.alert-danger.alert-black-bg {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.alert-success.alert-black-bg > button.close {
    color: #fff;
}

.alert-warning.alert-black-bg > button.close {
    color: #fff;
}

.alert-danger.alert-black-bg > button.close {
    color: #fff;
}

.icon-important {
    color: #f0ad4e;
}

/* Add rounded corners to Gravatar image */
.rounded-gravatar {
    border-radius: 50%;
}

.row-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.navbar-brand {
    padding-top: 0 !important;
}

.fancy-heading {
    color: #fffec8;
}

.fancy-modal-border {
    border: 8px solid #fffec8;
    border-radius: 20px;
}

.breadcrumb {
    background-color: #222; /* Change this to the color you want */
    padding: 10px;             /* Optional: Add padding if needed */
    border-radius: 5px;        /* Optional: Add rounded corners */
}

.breadcrumb a {
    color: #fffec8;
}

.breadcrumb a:hover {
    text-decoration: none;
}

.modal-theme-default {
    color: black !important;
}

.modal-theme-dark {
    color: white !important;
}

.modal-content-theme-dark {
    background-color: #121212 !important;
}

.modal-close-theme-dark {
    color: white;
}

.input-dark {
    background-color: #121212;
    color: white;
}

.input-upper {
    text-transform: uppercase;
}

.icon-gr-lock {
    font-size: 4vw;
}

@media(max-width:767px) {
    .icon-gr-lock {
        font-size: 8vw;
    }
}

.icon-gr-lock.red {
    color: red;
}

.icon-gr-lock.green {
    color: green;
}

.icon-gr-lock.blue {
    color: blue;
}

.icon-gr-lock.cyan {
    color: cyan;
}

.icon-gr-lock.magenta {
    color: magenta;
}

.icon-gr-lock.yellow {
    color: yellow;
}

.reward-modal-gr-key-code {
    font-size: 30px;
    font-weight: bold;
}