/*
==================================================
    TABLE OF CONTENTS
==================================================
    1. BASIC
    2. NAVBAR + SIDEBAR
    3. JUMBOTRON HOME
    4. HOME-ABOUT
    5. HOME-CHALLNGES
    6. FOOTER
    7. BACK TO TOP
    8. PRELOADER
    9. FOLDER NAVIGATION
    10. USERS
    11. THEME EDIT
    12. PAGE INACTION
    13. SCOREBOARD
    14. REGISTER
    15. LOGIN
    16. CHALLENGES
    17. SUPERADMIN
    18. SUPERADMIN-MENU
    19. ADMIN MENU
    19. ADMIN MENU
    20. SUPERADMIN ADMIN CONTROL
    21. SUPERADMIN SISTEM SETTINGS
    22. DASHBOARD ADMIN
    23. ADMIN USERS CONTROL
    24. ADMIN CHALLENGES CONTROL
    25. ADMIN CHALLENGES EDIT
    26. ADMIN SOLVERS CONTROL
    27. ADMIN BLOCKED CONTROL

==================================================
*/

/*
==================================================
    1. BASIC
==================================================
*/

* {
    margin: 0;
    padding: 0;
    font-family: consola;
}

body {
    background-color: var(--color-three);
    overflow-x: hidden;
}

.body-stop-scrool {
    overflow: hidden !important;
}

a, a:hover {
    color: inherit;
    text-decoration: inherit;
    font-style: inherit;
}


@font-face {
    font-family: consola;
    src: url(../fonts/CONSOLA.TTF);
}
@font-face {
    font-family: consolab;
    src: url(../fonts/CONSOLAB.TTF);
}
@font-face {
    font-family: consolai;
    src: url(../fonts/consolai.ttf);
}
@font-face {
    font-family: consolas;
    src: url(../fonts/Consolas.ttf);
}
@font-face {
    font-family: consolaz;
    src: url(../fonts/consolaz.ttf);
}

/*
==================================================
    2. NAVBAR + SIDEBAR
==================================================
*/

.navbar {
    /* background-color: var(--color-one); */
    z-index: 99;
    color: var(--color-two);
    overflow-x: hidden;
    transition: .5s;
    opacity: 1;
}

.navbar-user {
    background-color: var(--color-one) !important;
    box-shadow: 0 0 10px var(--color-six);
}

.navbar-home {
    background-color: transparent;
}

.navbar-transform {
    background-color: var(--color-one);
    transition: .5s;
    box-shadow: 0 0 10px var(--color-six);
}

.navbar .navbar-brand {
    opacity: 1;
    font-size: 1em;
    padding: 5px;
    z-index: 2;
    color: var(--color-two);
}

.navbar .navbar-brand img {
    width: 50px;
}

.navbar .navbar-brand span {
    color: var(--color-four);
}

.navbar a {
    color: var(--color-two);
    opacity: 1;
    cursor: pointer;
    font-family: consolaz;
}

.navbar .nav-item a img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.navbar-toggler {
    box-shadow: none !important;
    border: none;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 99 !important;
}

.navbar-toggler span {
    width: 30px;
    height: 2.1px;
    border-radius: 10px;
    display: absolute;
    background-color: var(--color-two);
    margin: 3px;
    transition: 0.5s;
}

.navbar-toggler span:nth-child(1) {
    transform-origin: center;
    animation: navtogspan1 2s ease-in-out forwards;
}

.navbar-toggler.open span:nth-child(1) {
    transform-origin: center;
    animation: navtogspan1hov 2s ease-in-out forwards;
}

.navbar-toggler span:nth-child(2) {
    transform-origin: center;
    animation: navtogspan2 2s ease-in-out forwards;
    transition: 0.5s;
}

.navbar-toggler:hover span:nth-child(2) {
    width: 30px;
    margin-left: 3px;
}

.navbar-toggler.open span:nth-child(2) {
    transform-origin: center;
    animation: navtogspan2hov 1s ease-in-out forwards;
    opacity: 0;
}

.navbar-toggler span:nth-child(3) {
    transform-origin: center;
    animation: navtogspan3 2s ease-in-out forwards;
}

.navbar-toggler.open span:nth-child(3) {
    transform-origin: center;
    animation: navtogspan3hov 2s ease-in-out forwards;
}

@keyframes navtogspan1 {
    0% {
        transform: translate(0, 6px) rotate(405deg);
    }

    10% {
        transform: translate(0, 6px) rotate(360deg);
    }

    70% {
        transform: translate(0, 6px) rotate(0deg);
    }

    80% {
        transform: translate(0, 6px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes navtogspan1hov {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(0, 6px) rotate(0deg);
    }

    30% {
        transform: translate(0, 6px) rotate(0deg);
    }

    70% {
        transform: translate(0, 6px) rotate(360deg);
    }

    80% {
        transform: translate(0, 6px) rotate(405deg);
    }

    100% {
        transform: translate(0, 6px) rotate(405deg);
    }
}

@keyframes navtogspan2 {
    0% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes navtogspan2hov {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes navtogspan3 {
    0% {
        transform: translate(0, -10px) rotate(495deg);
    }

    10% {
        transform: translate(0, -10px) rotate(360deg);
    }

    70% {
        transform: translate(0, -10px) rotate(0deg);
    }

    80% {
        transform: translate(0, -10px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes navtogspan3hov {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(0, -10px) rotate(0deg);
    }

    30% {
        transform: translate(0, -10px) rotate(0deg);
    }

    70% {
        transform: translate(0, -10px) rotate(360deg);
    }

    80% {
        transform: translate(0, -10px) rotate(495deg);
    }

    100% {
        transform: translate(0, -10px) rotate(495deg);
    }
}

/* Responsive */
/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
    .navbar-collapse {
        display: none;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .navbar-collapse {
        display: none;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .navbar-collapse {
        display: none;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {}

.sidebar-before {
    display: absolute;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-four);
    width: 100%;
    height: 100vh;
    transition: 0.5s ease-in-out;
    animation: sidebar-before-close 1s ease-in-out 1s forwards;
    z-index: 97 !important;
    opacity: 1;
}

.sidebar-before-open {
    animation: sidebar-before-open 1s ease-in-out forwards;
    z-index: 97 !important;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    background-color: var(--color-one);
    color: var(--color-two);
    width: 100%;
    height: 100vh;
    text-align: center;
    transform: translateX(-100%);
    transition: 0.5s ease-in-out;
    animation: sidebar-close 1s ease-in-out forwards;
    z-index: 98 !important;
}

.sidebar-open {
    animation: sidebar-open 1s ease-in-out 1s forwards;
    z-index: 98 !important;
}

.sidebar ul li {
    list-style: none;
    text-align: center;
    margin: 30px auto;
}

.sidebar ul li a {
    color: var(--color-two);
    font-family: consolaz;
}

.sidebar a img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.sidebar ul li a:hover {
    color: inherit;
}


@keyframes sidebar-open {
    0% {
        transform: translateX(-100%);
    }

    25% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes sidebar-close {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes sidebar-before-open {
    0% {
        transform: translateX(-100%);
    }

    25% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes sidebar-before-close {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Responsive */
/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
    .sidebar-before {
        width: 100%;
    }

    .sidebar {
        width: 100%;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .sidebar-before {
        width: 100%;
    }

    .sidebar {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .sidebar-before {
        width: 100%;
    }

    .sidebar {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .sidebar-before {
        display: none;
    }

    .sidebar {
        display: none;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .sidebar-before {
        display: none;
    }

    .sidebar {
        display: none;
    }
}


/*
==================================================
    3. JUMBOTRON HOME
==================================================
*/
.jumbotron-home {
    min-height: 100vh;
    background-color: var(--color-three);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-image: url('../images/bg2-min.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: 1s;
}

.jumbotron-home::after {
    content: '';
    width: 100%;
    height: 100vh;
    top: 0;
    display: block;
    position: absolute;
    background-color: var(--color-one);
    opacity: 0.7;
}

.jumbotron-home .container {
    z-index: 10;
}

.jumbotron-home-background {
    width: 450%;
    height: 100%;
    display: block;
    position: absolute;
    background-image: url('../images/bg2-min.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    animation: jumbotron-home-background-scroll 60s linear infinite;
}

@keyframes jumbotron-home-background-scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-66.85%);
    }
}

.jumbotron-home img {
    width: 50%;
    margin: 10px auto;
}

.jumbotron-home h1 {
    color: var(--color-two);
    transition: .5s;
    font-family: consolab;
    font-size: 3em;
}

.jumbotron-home h1 span:nth-child(1) {
    color: var(--color-four);
    font-family: consolaz;
}

.jumbotron-home h2 {
    color: var(--color-two);
    text-align: justify;
    transition: .5s;
    font-family: consolas;
}

.jumbotron-home a.btn {
    color: var(--color-two);
    border: 2px solid;
    margin: 10px;
    width: 90%;
    border-radius: 10px;
}

.jumbotron-home a.btn:hover {
    background-color: var(--color-four);
}

.jumbotron-home .button-group .col-md-6:nth-child(1) a {
    border-color: var(--color-four);
}

.jumbotron-home .button-group .col-md-6:nth-child(1) a:hover {
    border-color: var(--color-two);
}

.jumbotron-home .button-group .col-md-6:nth-child(2) a {
    border-color: var(--color-two);
}

.jumbotron-home p {
    color: var(--color-two);
    opacity: .5;
    font-style: italic;
    font-size: 1.5em;
}

/* Responsive */
/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
    .jumbotron-home h1 {
        text-align: center;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .jumbotron-home h1 {
        text-align: center;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .jumbotron-home h1 {
        text-align: center;
    }

    .jumbotron-home img {
        width: 50%;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .jumbotron-home h1 {
        text-align: left;
        padding-top: 50px;
    }

    .jumbotron-home img {
        float: right;
        width: 100%;
    }

    .jumbotron-home p {
        text-align: left;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .jumbotron-home h1 {
        text-align: left;
    }

    .jumbotron-home img {
        float: right;
        width: 100%;
    }
}

/*
==================================================
    4. HOME-ABOUT
==================================================
*/

.home-about {
    background-color: var(--color-three);
    padding: 100px 0;
    color: var(--color-two);
    font-size: 1.5em;
}

.home-about h2 {
    text-align: center;
    font-size: 2em;
    padding-bottom: 30px;
    font-family: consolab;
}

.home-about ul li {
    list-style: decimal;
    text-align: justify;
    margin: 0 30px;
}

.home-about span {
    color: var(--color-five);
}

.home-about a {
    color: var(--color-two);
}


/*
==================================================
    5. HOME-CHALLNGES
==================================================
*/

.home-challenges {
    color: var(--color-two);
    padding: 50px 0;
}

.home-challenges h2 {
    text-align: center;
    font-size: 3em;
    font-family: consolab;
}

.home-challenges h3 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 50px;
}

.home-challenges .card {
    background-color: var(--color-seven);
    color: var(--color-two);
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px;
    font-size: 1em;
    transition: .5s;
}

.home-challenges .card .row .col-4 {
    display: flex;
    justify-content: flex-end;
}

.home-challenges .card .col-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-challenges .card h4 {
    font-size: 1.5em;
}

.home-challenges .card .home-challenges-icon {
    width: 100px;
    height: 100px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-challenges .card .icons-kriptografi {
    background-image: var(--icon-kriptografi);
}
.home-challenges .card .icons-web-exploration {
    background-image: var(--icon-web-exploration);
}
.home-challenges .card .icons-forensics {
    background-image: var(--icon-forensics);
}
.home-challenges .card .icons-reverse-enginering {
    background-image: var(--icon-reverse-enginering);
}
.home-challenges .card .icons-misc {
    background-image: var(--icon-misc);
}
.home-challenges .card .icons-osint {
    background-image: var(--icon-osint);
}
.home-challenges .card .icons-programing {
    background-image: var(--icon-programing);
}



/*
==================================================
    6. FOOTER
==================================================
*/

footer {
    background-color: #15171B;
    color: white;
    padding: 50px 0;
}

footer h2 {
    text-align: center;
    margin-bottom: 20px;
    font-family: consolab;
}

footer img {
    width: 100%;
}

footer .col-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5em;
    text-align: justify;
}

footer .row:nth-child(3) {
    text-align: center;
    padding-top: 30px;
    font-size: 1.2em;
}

/*
==================================================
    7. BACK TO TOP
==================================================
*/

.backtotop {
    width: 50px;
    height: 50px;
    background-color: var(--color-four);
    border-radius: 5px;
    transform: rotate(180deg);
    transform-origin: center;
    display: absolute;
    position: fixed;
    transition: .5s;
    animation: backtotop-out 1s linear forwards;
    cursor: pointer;
}

.backtotop svg {
    color: white;
    width: 50px;
    height: 50px;
}

.backtotop-in {
    animation: backtotop-in .5s linear forwards;
}

@keyframes backtotop-in {
    0% {
        right: -50px;
        bottom: 30px;
        transform: rotate(180deg) scale(.5);
    }

    50% {
        right: 30px;
        transform: rotate(180deg) scale(.5);
        opacity: .5;
    }

    70% {
        right: 30px;
        transform: rotate(180deg) scale(.5);
        opacity: .5;
    }

    100% {
        bottom: 30px;
        right: 30px;
        transform: rotate(270deg) scale(1);
    }
}

@keyframes backtotop-out {
    0% {
        bottom: 30px;
        right: 30px;
        transform: rotate(270deg) scale(.5);
        opacity: 1;
    }

    30% {
        right: 30px;
        transform: rotate(90deg) scale(.5);
        opacity: .5;
    }

    70% {
        right: 30px;
        bottom: 30px;
        transform: rotate(90deg) scale(.5);
        opacity: .5;
    }

    98% {
        right: 30px;
        bottom: -100px;
        transform: rotate(90deg) scale(.5);
    }

    100% {
        right: -50px;
        bottom: -100px;
        transform: rotate(90deg) scale(.5);
    }
}

/*
==================================================
    8. PRELOADER
==================================================
*/

.preloader {
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-three);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    overflow: hidden;
}

.preloader .container {
    display: flex;
    justify-content: center;
    border: 2px solid;
    padding: 20px 50px;
    width: 250px;
    animation: preloader-container 2s linear infinite;
}

@keyframes preloader-container {
    0% {
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right-color: var(--color-four);
        border-left-color: var(--color-four);
    }

    20% {
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right-color: var(--color-four);
        border-left-color: var(--color-four);
    }

    40% {
        border-top-color: var(--color-four);
        border-bottom-color: var(--color-four);
        border-right-color: transparent;
        border-left-color: transparent;
    }

    60% {
        border-top-color: var(--color-four);
        border-bottom-color: var(--color-four);
        border-right-color: transparent;
        border-left-color: transparent;
    }

    80% {
        border-top-color: var(--color-four);
        border-bottom-color: var(--color-four);
        border-right-color: transparent;
        border-left-color: transparent;
    }

    100% {
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right-color: var(--color-four);
        border-left-color: var(--color-four);
    }
}

.preloader .circle-1 {
    margin: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: 1s preloader-circle-one linear infinite;
}

.preloader .circle-2 {
    margin: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: 1s preloader-circle-two linear infinite;
}

.preloader .circle-3 {
    margin: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: 1s preloader-circle-three linear infinite;
}

.onloading {
    overflow: hidden;
}

@keyframes preloader-circle-one {
    0% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    20% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    25% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    75% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    80% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    95% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    100% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }
}

@keyframes preloader-circle-two {
    0% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    20% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    25% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    50% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    55% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    70% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    75% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    95% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    100% {
        background-color: var(--color-one);
        transform: scale(1);
    }
}

@keyframes preloader-circle-three {
    0% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    45% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    50% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    75% {
        background-color: var(--color-four);
        transform: scale(1.2);
    }

    80% {
        background-color: var(--color-one);
        transform: scale(1);
    }

    100% {
        background-color: var(--color-one);
        transform: scale(1);
    }
}



/*
==================================================
    9. FOLDER NAVIGATION
==================================================
*/

.folder-navigation {
    padding: 100px 0 0 0;
    color: var(--color-two);
}

/* Responsive */
/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
    .folder-navigation {
        padding-left: 20px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .folder-navigation {
        padding-left: 20px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .folder-navigation {
        padding-left: 50px;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .folder-navigation {
        padding-left: 50px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .folder-navigation {
        padding-left: 100px;
    }

}

/*
==================================================
    10. USERS
==================================================
*/

.users {
    text-align: center;
    padding: 30px 0;
    color: var(--color-two);
    min-height: 50vh;
}

.users h1 {
    font-size: 3em;
    font-family: consolaz;
}

.users h2 {
    font-size: 2em;
    font-family: consolas;
}

.users table {
    border: none;
    padding: 20px 20px;
    width: 90%;
    margin: auto;
}

.users table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.users table thead tr th:nth-child(2) {
    text-align: left;
    padding-left: 60px;
}

.users table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
    line-height: 50px;
}

.users table tbody tr img {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

.users table tbody tr td:nth-child(2) {
    text-align: left;
}

.users table tr th,
.users table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 0;
}

.users table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.users-detail img {
    width: 300px;
    height: 300px;
    color: var(--color-two);
    fill: var(--color-two);
    display: block;
    margin: auto;
    border-radius: 10px;
}

.users-detail .users-detail-archievement-image {
    width: 75px !important;
    height: 75px !important;
    margin: 10px;
    padding: 0;
}

.users-detail .col-md-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.users-detail .col-md-8 .row {
    padding: 20px;
}

.users-detail .col-md-8 .col-3,
.users-detail .col-md-8 .col-1,
.users-detail .col-md-8 .col-8 {
    margin: 0;
    padding: 0;
}

.users-detail ul {
    margin: 0;
    padding: 0;
}

.users-detail ul li {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    text-align: justify;
    word-wrap: break-word;
    min-height: 25px;
}

.users-detail a.btn {
    background-color: var(--color-seventeen);
    margin: 10px;
    min-width: 50%;
    color: var(--color-two);
}

.users-edit h2 {
    padding: 30px;
    font-family: consolab;
}

.users-edit img {
    width: 300px;
    height: 300px;
    color: var(--color-two);
    fill: var(--color-two);
    display: block;
    margin: auto;
    margin-bottom: 30px;
    border-radius: 10px;
}

.users-edit input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background-color: var(--color-four);
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--color-white);
    cursor: pointer;
    transition: background .2s ease-in-out;
}

.users-edit input[type=file]::file-selector-button:hover {
    background: var(--color-four);
}

.users-edit .drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    color: var(--color-two);
    background: var(--color-eightteen);
    cursor: pointer;
}

.users-edit .drop-container:hover {
    background: var(--color-eightteen);
    border-color: var(--color-eleven);
}

.users-edit .drop-container:hover .drop-title {
    color: var(--color-two);
}

.users-edit .drop-title {
    color: var(--color-two);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
}

.users-edit .btn,
.users .danger-area .btn {
    background-color: var(--color-four);
    margin: 10px 0;
    min-width: 100%;
    color: var(--color-white);
    margin-bottom: 30px;
}

.users-edit .details,
.users .danger-area{
    text-align: justify;
    width: 90%;
    margin: auto;
}

.users-edit .details .row,
    .users .danger-area .row{
    margin: 20px auto;
}
.users-edit .details .row .col-md-4,
.users .danger-area .row .col-md-4{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.users-edit .details h2,
.users .danger-area h2{
    text-align: center;
    padding-bottom: 10px;
    font-family: consolab;
}

.users-edit .details input,
.users .danger-area input{
    width: 100%;
    background-color: var(--color-therteen);
    padding: 10px;
    border: none;
    border: 10px;
    box-shadow: none;
    outline: none;
    color: var(--color-two);
}

.users-solved{
    padding-bottom: 100px;
}

.users .danger-area .view-password{
    display: flex;
    margin-top: 10px;
    cursor: pointer;
}

.users .danger-area .view-password svg{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.users .danger-area .view-password span{
    margin-right: 5px;
}

.users .danger-area .view-password .view-password-old-off,
.users .danger-area .view-password .view-password-new-off,
.users .danger-area .view-password .view-password-repeat-off{
    display: block;
}

.users .danger-area .view-password .view-password-old-on,
.users .danger-area .view-password .view-password-new-on,
.users .danger-area .view-password .view-password-repeat-on{
    display: none;
}

.off{
    display: none !important;
}

.on{
    display: block !important;
}

/*
==================================================
    11. THEME EDIT
==================================================
*/

.theme-edit{
    background-color: var(--color-ten);
    color: var(--color-two);
    text-align: center;
    padding: 50px 10px;
}

.theme-edit h2{
    font-size: 2em;
    font-family: consolab;
}

.theme-edit .btn{
    background-color: var(--color-three);
    width: 90%;
    margin: 10px auto;
    color: var(--color-two);
    font-size: 1em;
    box-shadow: none;
}

.theme-edit .row:nth-child(2) .col-sm-4:nth-child(2) .btn{
    background-color: #1B1E23;
    color: white;
}

.theme-edit .row:nth-child(2) .col-sm-4:nth-child(3) .btn{
    background-color: #E2E6EE;
    color: black;
}


/* Responsive */
/* Small devices (portain phones, 576px and down) */
@media screen and (max-width: 576px) {
    .users-edit .details .row .col-md-4,
    .users .danger-area .row .col-md-4{
        display: block;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .users-edit .details .row .col-md-4,
    .users .danger-area .row .col-md-4{
        display: block;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .users-edit .details .row .col-md-4,
    .users .danger-area .row .col-md-4{
        display: flex;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {

}

/*
==================================================
    12. PAGE INACTION
==================================================
*/

.page-inaction {
    padding-bottom: 50px;
}

.page-inaction .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.page-inaction a {
    display: block;
    min-width: 50px;
    height: 50px;
    padding: 0 20px;
    background-color: #08090A;
    color: white;
    text-align: center;
    line-height: 50px;
    margin: 10px 5px;
    border-radius: 10px;
    opacity: 1;
}

.page-inaction a.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/*
==================================================
    13. SCOREBOARD
==================================================
*/

.scoreboard {
    text-align: center;
    padding: 30px 0;
    padding-bottom: 50px;
    color: var(--color-two);
    min-height: 50vh;
}

.scoreboard h1 {
    font-size: 3em;
    font-family: consolaz;
}

.scoreboard h2 {
    font-size: 2em;
    font-family: consolab;
}

.scoreboard table {
    border: none;
    padding: 20px 20px;
    width: 90%;
    margin: auto;
    background: none;
}

.scoreboard table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.scoreboard table thead tr th:nth-child(2) {
    text-align: left;
    padding-left: 60px;
}

.scoreboard table tbody tr td:nth-child(2) {
    text-align: left;
}

.scoreboard table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
    line-height: 50px;
}

.scoreboard table tbody tr img {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

.scoreboard table tr th,
.scoreboard table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 0;
}

.scoreboard table tbody tr:nth-of-type(odd) {
    background-color: var(--transparent);
    border: none !important;
    color: var(--color-two);
}

/*
==================================================
    14. REGISTER
==================================================
*/

.register {
    color: var(--color-two);
    padding: 30px 0;
}

.register h1 {
    text-align: center;
    font-size: 3em;
    font-family: consolaz;
}

.register h2 {
    text-align: center;
    font-size: 2em;
    font-family: consolab;
}

.register form {
    background-color: var(--color-therteen);
    width: 90%;
    margin: 30px auto;
    padding: 50px 10px;
    border-radius: 10px;
}

.register form input {
    width: 100%;
    margin-bottom: 30px;
    height: 50px;
    background-color: var(--color-twelve);
    color: var(--color-two);
    border: none;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    box-shadow: none;
}

.register form .col-md-6 p:nth-child(6) {
    margin-top: 30px;
    font-size: 1.2em;
}

.register form .col-md-6 p a {
    color: var(--color-four);
    font-size: 1.3em;
}

.register form input::placeholder {
    color: var(--color-two);
    opacity: .5;
}

.register form button {
    background-color: var(--color-four);
    color: var(--color-white);
}

.register form button:hover {
    color: var(--color-white);
}

.register .view-password{
    display: flex;
    margin-bottom: 20px;
    margin-top: -20px;
    cursor: pointer;
    flex-direction: row;
}

.register .view-password svg{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.register .view-password span{
    margin-right: 5px;
}

.register .view-password .view-password-register-off,
.register .view-password .view-repeat-password-register-off {
    display: block;
}

.register .view-password .view-password-register-on,
.register .view-password .view-repeat-password-register-on {
    display: none;
}

.view-password-register-condition-off{
    display: none !important;
}

.view-password-register-condition-on{
    display: block !important;
}

/*
==================================================
    15. LOGIN
==================================================
*/

.login {
    color: var(--color-two);
    padding: 30px 0;
}

.login h1 {
    text-align: center;
    font-size: 3em;
    font-family: consolaz;
}

.login h2 {
    text-align: center;
    font-size: 2em;
    font-family: consolab;
}

.login form {
    background-color: var(--color-therteen);
    width: 90%;
    margin: 30px auto;
    padding: 50px 10px;
    border-radius: 10px;
}

.login form input {
    width: 100%;
    margin-bottom: 30px;
    height: 50px;
    background-color: var(--color-twelve);
    color: var(--color-two);
    border: none;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    box-shadow: none;
}

.login form input::placeholder {
    color: var(--color-two);
    opacity: .5;
}

.login form button {
    background-color: var(--color-four);
    color: var(--color-white);
}

.login form button:hover {
    color: var(--color-white);
}


.login form .col-md-6 p:nth-child(6) {
    /* margin-top: 30px; */
    font-size: 1.2em;
}

.login form .col-md-6 p a.create {
    color: var(--color-four);
    font-size: 1.5em;
}

.login .view-password{
    display: flex;
    margin-bottom: 20px;
    margin-top: -20px;
    cursor: pointer;
    flex-direction: row;
}

.login .view-password svg{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.login .view-password span{
    margin-right: 5px;
}

.login .view-password .view-password-login-off {
    display: block;
}

.login .view-password .view-password-login-on {
    display: none;
}

.view-password-login-condition-off{
    display: none !important;
}

.view-password-login-condition-on{
    display: block !important;
}

.login .captcha canvas{
    background-color: var(--color-white);
    margin-bottom: 10px;
}

/*
==================================================
    16. CHALLENGES
==================================================
*/

.challenges {
    color: var(--color-two);
    padding: 30px 0;
    font-size: 1.2em;
    padding-bottom: 50px;
}

.challenges h1 {
    text-align: center;
    font-size: 3em;
    margin-bottom: 30px;
    font-family: consolaz;
}

.challenges .col-md-6 {
    margin: 10px auto;
}

.challenges .dropdown button {
    background-color: var(--color-four);
    color: var(--color-white);
    width: 100%;
    transition: .5s;
    box-shadow: none;
    outline: none;
}

.challenges .dropdown button svg {
    transform: rotateZ(90deg);
    transform-origin: center;
    width: 30px;
    height: 30px;
    transition: .5s;
}

.challenges .dropdownChallengesCategory-svg-rotate,
.dropdownChallengesDifficult-svg-rotate {
    transform: rotateY(-180deg) rotateZ(-90deg) !important;
}

.challenges ul {
    display: none;
    position: absolute;
    list-style: none;
    width: 100%;
    margin-top: 10px;
    padding: 0;
    transition: .5s;
    z-index: 9;
}

.challenges .dropdownChallengesCategory-open,
.dropdownChallengesDifficult-open {
    display: block !important;
}

.challenges ul li {
    border-bottom: 2px solid var(--color-fiveteen);
    padding: 5px;
    cursor: pointer;
    width: 100%;
    background-color: var(--color-fourteen);
    color: var(--color-white);
    padding: 5px;
    text-align: center;
    display: block;
}

.challenges .container .row:nth-child(3) {
    margin-top: 30px;
}

.challenges .card {
    background-color: var(--color-ten);
    padding: 20px;
    margin: 10px auto;
    width: 90%;
    border-radius: 10px;
    transition: .5s;
}

.challenges .card:hover {
    width: 95%;
}

.challenges .card .col-4 {
    text-align: right;
}

.challenges .card .col-4 p:nth-child(1) {
    background-color: green;
    text-align: center;
    margin-right: 0;
    border-radius: 5px;
    color: var(--color-white);
}

.challenges .card .col-4 p.Easy {
    background-color: #71A200;
}

.challenges .card .col-4 p.Medium {
    background-color: #A09400;
}

.challenges .card .col-4 p.Hard {
    background-color: #650000;
}

.challenges .card .col-4 p.Extreme {
    background-color: #020144;
}

.challenges .card .col-4 p.Unknown {
    background-color: #000000;
}

.challenge-detail {
    padding: 30px 0 50px 0;
    color: var(--color-two);
}

.challenge-detail h1 {
    text-align: center;
    font-size: 3em;
    font-family: consolaz;
}

.challenge-detail h2 {
    text-align: center;
    font-size: 2em;
    padding-bottom: 30px;
    font-family: consolab;
}

.challenge-detail .task p {
    text-align: justify;
    font-size: 1.5em;
    text-wrap: wrap;
}

.challenge-detail .task textarea {
    text-align: justify;
    font-size: 1.5em;
    text-wrap: wrap;
    background-color: var(--color-therteen);
    border: none;
    color: var(--color-two);
    min-height: 200px;
    max-height: 200px;
    outline: none;
}

.challenge-detail .task pre {
    text-align: justify;
    font-size: 1.5em;
    width: 100%;
    text-wrap: wrap;
    font-family: consola;
}

.challenge-detail .task p:nth-child(2),
.challenge-detail .task p:nth-child(3) {
    display: block;
    background-color: var(--color-therteen);
    width: 90%;
    padding: 10px;
    margin: 10px auto;
    border-radius: 10px;
    text-align: justify;
    font-size: 1.2em;
}

.challenge-detail .answer {
    padding-top: 50px;
    font-size: 1.3em;
}

.challenge-detail .answer h3 {
    margin-top: 20px;
}

.challenge-detail .answer input {
    background-color: var(--color-fourteen);
    border: none;
    width: 90%;
    margin: 20px auto;
    display: block;
    padding: 10px;
    outline: none;
    border-radius: 10px;
    text-align: center;
    color: var(--color-white);
}

.challenge-detail .answer input::placeholder {
    opacity: .5;
    color: var(--color-white);
}

.challenge-detail .answer button {
    background-color: var(--color-sixteen);
    color: var(--color-white);
    width: 50%;
    margin-left: 5%;
    margin-top: 20px;
    border-radius: 10px;
}

/*
==================================================
    17. SUPERADMIN
==================================================
*/
.superadmin-dashboard{
    color: var(--color-two);
    padding: 10px 0 50px 0;
}

.superadmin-dashboard h1{
    text-align: center;
    font-size: 3em;
    text-wrap: wrap;
    margin: 30px 0 30px 0;
    font-family: consolaz;
}

.superadmin-dashboard h2{
    text-align: center;
    font-size: 2em;
    text-wrap: wrap;
    padding: 30px 0 20px 0;
    font-family: consolab;
}

.pageVisitChart{
    width: 100%;
    height: 20px;
    background-color: var(--color-therteen);
    border-radius: 10px;
    padding: 20px;
    color: var(--color-one);
}

.superadmin-dashboard .card{
    background-color: var(--color-therteen);
    margin: 10px 0;
    padding: 20px;
    border-radius: 5px;
}

/*
==================================================
    18. SUPERADMIN-MENU
==================================================
*/

.superadmin-menu{
    transition: .5s;
}

.superadmin-menu-title h2{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    color: var(--color-two);
    font-family: consolab;
}

.superadmin-menu-title-toggler{
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 10px;
}

.superadmin-menu-title-toggler span{
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 2px;
    background-color: var(--color-two);
    margin: 3px 0;
    border-radius: 5px;
}

.superadmin-menu-title-toggler-open span{
    background-color: var(--color-two);
}

.superadmin-menu-title-toggler span:nth-child(1){
    transform-origin: center;
    animation: superadminMenuTitleTogglerSpan1 .5s linear forwards;
}

.superadmin-menu-title-toggler span:nth-child(2){
    transform-origin: center;
    animation: superadminMenuTitleTogglerSpan2 .5s linear forwards;
}

.superadmin-menu-title-toggler span:nth-child(3){
    transform-origin: center;
    animation: superadminMenuTitleTogglerSpan3 .5s linear forwards;
}

.superadmin-menu-title-toggler-open span:nth-child(1){
    transform-origin: center;
    animation: superadminMenuTitleTogglerOpenSpan1 .5s linear forwards;
}

.superadmin-menu-title-toggler-open span:nth-child(2){
    transform-origin: center;
    animation: superadminMenuTitleTogglerOpenSpan2 .5s linear forwards;
}

.superadmin-menu-title-toggler-open span:nth-child(3){
    transform-origin: center;
    animation: superadminMenuTitleTogglerOpenSpan3 .5s linear forwards;
}

@keyframes superadminMenuTitleTogglerSpan1 {
    0%{
        transform: rotate(45deg) translate(5px, 6px);
    }
    40%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    100%{
        transform: rotate(0deg) translate(0px, 0px);
    }
}

@keyframes superadminMenuTitleTogglerSpan2 {
    0%{
        opacity: 0;
    }
    40%{
        opacity: 0;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes superadminMenuTitleTogglerSpan3 {
    0%{
        transform: rotate(-45deg) translate(5px, -6px);
    }
    40%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    100%{
        transform: rotate(0deg) translate(0px, 0px);
    }
}
@keyframes superadminMenuTitleTogglerOpenSpan1 {
    0%{
        transform: rotate(0deg) translate(0px, 0px);
    }
    40%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    100%{
        transform: rotate(45deg) translate(5px, 6px);
    }
}

@keyframes superadminMenuTitleTogglerOpenSpan2 {
    0%{
        opacity: 1;
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@keyframes superadminMenuTitleTogglerOpenSpan3 {
    0%{
        transform: rotate(0deg) translate(0px, 0px);
    }
    40%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    100%{
        transform: rotate(-45deg) translate(5px, -6px);
    }
}

.superadmin-menu-list{
    height: 0;
    display: none;
    transition: .5s;
}

.superadmin-menu-list-open{
    height: auto;
    display: flex;
    transition: .5s;
}

.superadmin-menu a{
    width: 100%;
    margin: 10px 0;
    background-color: var(--color-four);
    color: var(--color-white) !important;
    box-shadow: none !important;
    border: none;
    transition: .5s;
}

/*
==================================================
    19. ADMIN MENU
==================================================
*/

.admin-menu{
    transition: .5s;
}

.admin-menu-title h2{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    color: var(--color-two);
    font-family: consolab;
}

.admin-menu-title-toggler{
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 10px;
}

.admin-menu-title-toggler span{
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 2px;
    background-color: var(--color-two);
    margin: 3px 0;
    border-radius: 5px;
}

.admin-menu-title-toggler-open span{
    background-color: var(--color-two);
}

.admin-menu-title-toggler span:nth-child(1){
    transform-origin: center;
    animation: adminMenuTitleTogglerSpan1 .5s linear forwards;
}

.admin-menu-title-toggler span:nth-child(2){
    transform-origin: center;
    animation: adminMenuTitleTogglerSpan2 .5s linear forwards;
}

.admin-menu-title-toggler span:nth-child(3){
    transform-origin: center;
    animation: adminMenuTitleTogglerSpan3 .5s linear forwards;
}

.admin-menu-title-toggler-open span:nth-child(1){
    transform-origin: center;
    animation: adminMenuTitleTogglerOpenSpan1 .5s linear forwards;
}

.admin-menu-title-toggler-open span:nth-child(2){
    transform-origin: center;
    animation: adminMenuTitleTogglerOpenSpan2 .5s linear forwards;
}

.admin-menu-title-toggler-open span:nth-child(3){
    transform-origin: center;
    animation: adminMenuTitleTogglerOpenSpan3 .5s linear forwards;
}

@keyframes adminMenuTitleTogglerSpan1 {
    0%{
        transform: rotate(45deg) translate(5px, 6px);
    }
    40%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    100%{
        transform: rotate(0deg) translate(0px, 0px);
    }
}

@keyframes adminMenuTitleTogglerSpan2 {
    0%{
        opacity: 0;
    }
    40%{
        opacity: 0;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes adminMenuTitleTogglerSpan3 {
    0%{
        transform: rotate(-45deg) translate(5px, -6px);
    }
    40%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    100%{
        transform: rotate(0deg) translate(0px, 0px);
    }
}
@keyframes adminMenuTitleTogglerOpenSpan1 {
    0%{
        transform: rotate(0deg) translate(0px, 0px);
    }
    40%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, 8px);
    }
    100%{
        transform: rotate(45deg) translate(5px, 6px);
    }
}

@keyframes adminMenuTitleTogglerOpenSpan2 {
    0%{
        opacity: 1;
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@keyframes adminMenuTitleTogglerOpenSpan3 {
    0%{
        transform: rotate(0deg) translate(0px, 0px);
    }
    40%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    60%{
        transform: rotate(0deg) translate(0px, -8px);
    }
    100%{
        transform: rotate(-45deg) translate(5px, -6px);
    }
}

.admin-menu-list{
    height: 0;
    display: none;
    transition: .5s;
}

.admin-menu-list-open{
    height: auto;
    display: flex;
    transition: .5s;
}

.admin-menu a{
    width: 100%;
    margin: 10px 0;
    background-color: var(--color-four);
    color: var(--color-white) !important;
    box-shadow: none !important;
    border: none;
}

/*
==================================================
    20. SUPERADMIN ADMIN CONTROL
==================================================
*/

.admin-control{
    padding-bottom: 50px;
}

.admin-control h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    padding-top: 30px;
    font-family: consolaz;
}

.admin-control h2{
    text-align: center;
    font-size: 2em;
    color: var(--color-two);
    padding-top: 30px;
    font-family: consolaz;
}

.admin-control table {
    border: none;
    padding: 20px 20px;
    width: 90%;
    margin: auto;
}

.admin-control table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.admin-control table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
}

.admin-control table tr th,
.admin-control table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 0;
}

.admin-control table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.admin-control table button.btn{
    color: var(--color-white);
    margin: 0 10px 10px 0;
    min-width: 100px;
}

.admin-control table td.action{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*
==================================================
    21. SUPERADMIN SISTEM SETTINGS
==================================================
*/

.sistem-settings{
    padding-bottom: 50px;
    color: var(--color-two);
}

.sistem-settings h1{
    text-align: center;
    padding: 30px 0;
    font-size: 3em;
    font-family: consolaz;
}

.sistem-settings .card{
    background-color: var(--color-therteen);
    padding: 20px;
    border-radius: 10px;
    margin: 10px auto;
}

.sistem-settings .card .btn{
    min-width: 100px;
}

/*
==================================================
    22. DASHBOARD ADMIN
==================================================
*/

.admin-dashboard{
    color: var(--color-two);
    padding: 10px 0 50px 0;
}

.admin-dashboard h1{
    text-align: center;
    font-size: 3em;
    text-wrap: wrap;
    margin: 30px 0 30px 0;
    font-family: consolaz;
}

.admin-dashboard h2{
    text-align: center;
    font-size: 2em;
    text-wrap: wrap;
    padding: 30px 0 20px 0;
    font-family: consolab;
}

.admin-dashboard .pageVisitChart{
    width: 100%;
    height: 20px;
    background-color: var(--color-therteen);
    border-radius: 10px;
    padding: 20px;
    color: var(--color-one);
}

.admin-dashboard .card{
    background-color: var(--color-therteen);
    margin: 10px 0;
    padding: 20px;
    border-radius: 5px;
}

/*
==================================================
    23. ADMIN USERS CONTROL
==================================================
*/

.admin-users-control{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-users-control h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-users-control .admin-users-control-search {
    display: flex;
    flex-direction: row;
    padding: 30px;
}

.admin-users-control .admin-users-control-search p {
    font-size: 2em;
    margin-right: 10px;
}

.admin-users-control .admin-users-control-search input {
    width: 200px;
    height: 50px;
    background-color: var(--color-ten);
    border: none;
    border-bottom: 1px solid var(--color-two);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
    color: var(--color-two);
    padding: 10px;
}

.admin-users-control .admin-users-control-search .btn{
    background-color: var(--color-four);
    color: var(--color-white);
    height: 50px;
    width: 100px;
    margin-left: 10px;
}


.admin-users-control .admin-users-control-table {
    overflow-x: scroll;
    padding: 0 20px;
}

.admin-users-control table {
    border: none;
    padding: 20px 50px;
    min-width: 90%;
    margin: auto;
    overflow-y: scroll;
}

.admin-users-control table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.admin-users-control table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
}

.admin-users-control table tr th,
.admin-users-control table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 5px;
}

.admin-users-control table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.admin-users-control table input{
    border: none !important;
    text-align: center;
    background-color: var(--transparent);
    outline: none;
    color: var(--color-two);
}

.admin-users-control table .btn{
    margin: 0 10px 10px 0;
    width: 90%;
}


/*
==================================================
    24. ADMIN CHALLENGES CONTROL
==================================================
*/

.admin-challenges-control{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-challenges-control h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-challenges-control .admin-challenges-control-search {
    display: flex;
    flex-direction: row;
    padding: 30px;
}

.admin-challenges-control .admin-challenges-control-search p {
    font-size: 2em;
    margin-right: 10px;
}

.admin-challenges-control .admin-challenges-control-search input {
    width: 200px;
    height: 50px;
    background-color: var(--color-ten);
    border: none;
    border-bottom: 1px solid var(--color-two);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
    color: var(--color-two);
    padding: 10px;
}

.admin-challenges-control .admin-challenges-control-search .btn{
    background-color: var(--color-four);
    color: var(--color-white);
    height: 50px;
    width: 100px;
    margin-left: 10px;
}


.admin-challenges-control .admin-challenges-control-table {
    overflow-x: scroll;
    padding: 0 20px;
}

.admin-challenges-control table {
    border: none;
    padding: 20px 50px;
    min-width: 90%;
    margin: auto;
    overflow-y: scroll;
    margin-bottom: 50px;
}

.admin-challenges-control table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.admin-challenges-control table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
}

.admin-challenges-control table tr th,
.admin-challenges-control table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 5px;
}

.admin-challenges-control table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.admin-challenges-control table input{
    border: none !important;
    text-align: center;
    background-color: var(--transparent);
    outline: none;
    color: var(--color-two);
}

.admin-challenges-control table .btn{
    margin: 0 10px 10px 0;
    width: 90%;
}

/*
==================================================
    25. ADMIN CHALLENGES EDIT
==================================================
*/

.admin-challenges-edit{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-challenges-edit h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-challenges-edit h2{
    color: var(--color-two);
    text-align: justify;
    font-family: consolab;
    font-size: 2em;
    padding-top: 30px;
}

.admin-challenges-edit input{
    width: 100%;
    padding: 10px;
    background-color: var(--color-seven);
    color: var(--color-two);
    border: none;
    outline: none;
    border-radius: 5px;
}

.admin-challenges-edit textarea{
    width: 100%;
    min-height: 200px;
    max-height: 200px;
    padding: 10px;
    background-color: var(--color-seven);
    color: var(--color-two);
    border: none;
    outline: none;
    border-radius: 5px;
}

.admin-challenges-edit select{
    width: 100%;
    padding: 10px;
    background-color: var(--color-seven);
    color: var(--color-two);
    border: none;
    outline: none;
    border-radius: 5px;
}

.admin-challenges-edit .btn{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 50px;
}

/*
==================================================
    26. ADMIN SOLVERS CONTROL
==================================================
*/

.admin-solvers-control{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-solvers-control h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-solvers-control .admin-solvers-control-table {
    overflow-x: scroll;
    padding: 0 20px;
}

.admin-solvers-control table {
    border: none;
    padding: 20px 50px;
    min-width: 90%;
    margin: auto;
    overflow-y: scroll;
    margin-bottom: 50px;
}

.admin-solvers-control table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.admin-solvers-control table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
}

.admin-solvers-control table tr th,
.admin-solvers-control table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 5px;
}

.admin-solvers-control table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.admin-solvers-control table input{
    border: none !important;
    text-align: center;
    background-color: var(--transparent);
    outline: none;
    color: var(--color-two);
}

.admin-solvers-control table .btn{
    margin: 0 10px 10px 0;
    width: 90%;
}

/*
==================================================
    27. ADMIN BLOCKED CONTROL
==================================================
*/

.admin-blocked-control{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-blocked-control h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-blocked-control .admin-blocked-control-table {
    overflow-x: scroll;
    padding: 0 20px;
}

.admin-blocked-control table {
    border: none;
    padding: 20px 50px;
    min-width: 90%;
    margin: auto;
    overflow-y: scroll;
    margin-bottom: 50px;
}

.admin-blocked-control table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.admin-blocked-control table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
}

.admin-blocked-control table tr th,
.admin-blocked-control table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 5px;
}

.admin-blocked-control table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.admin-blocked-control table input{
    border: none !important;
    text-align: center;
    background-color: var(--transparent);
    outline: none;
    color: var(--color-two);
}

.admin-blocked-control table .btn{
    margin: 0 10px 10px 0;
    width: 90%;
    color: var(--color-two);
}

/*
==================================================
    28. ADMIN ARCHIEVEMENT EDIT
==================================================
*/

.admin-archievement-control{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-archievement-control h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-archievement-control img{
    width: 50px;
}

.admin-archievement-control .admin-archievement-control-search {
    display: flex;
    flex-direction: row;
    padding: 30px;
}

.admin-archievement-control .admin-archievement-control-search p {
    font-size: 2em;
    margin-right: 10px;
}

.admin-archievement-control .admin-archievement-control-search input {
    width: 200px;
    height: 50px;
    background-color: var(--color-ten);
    border: none;
    border-bottom: 1px solid var(--color-two);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
    color: var(--color-two);
    padding: 10px;
}

.admin-archievement-control .admin-archievement-control-search .btn{
    background-color: var(--color-four);
    color: var(--color-white);
    height: 50px;
    width: 100px;
    margin-left: 10px;
}


.admin-archievement-control .admin-archievement-control-table {
    overflow-x: scroll;
    padding: 0 20px;
}

.admin-archievement-control table {
    border: none;
    padding: 20px 50px;
    min-width: 90%;
    margin: auto;
    overflow-y: scroll;
    margin-bottom: 50px;
}

.admin-archievement-control table thead {
    background-color: var(--color-nine);
    color: var(--color-two);
}

.admin-archievement-control table tbody tr {
    background-color: var(--color-ten);
    border: none !important;
    color: var(--color-two);
}

.admin-archievement-control table tr th,
.admin-archievement-control table tr td {
    border: none !important;
    text-align: center;
    padding: 10px 5px;
}

.admin-archievement-control table tbody tr:nth-of-type(odd) {
    background-color: var(--color-three);
    border: none !important;
    color: var(--color-two);
}

.admin-archievement-control table input{
    border: none !important;
    text-align: center;
    background-color: var(--transparent);
    outline: none;
    color: var(--color-two);
}

.admin-archievement-control table .btn{
    margin: 0 10px 10px 0;
    width: 90%;
}

/*
==================================================
    29. ADMIN ARCHIEVEMENT EDIT
==================================================
*/

.admin-archievement-edit{
    padding: 30px 0;
    color: var(--color-two);
}

.admin-archievement-edit h1{
    text-align: center;
    font-size: 3em;
    color: var(--color-two);
    font-family: consolaz;
}

.admin-archievement-edit h2{
    color: var(--color-two);
    text-align: justify;
    font-family: consolab;
    font-size: 2em;
    padding-top: 30px;
}

.admin-archievement-edit input{
    width: 100%;
    padding: 10px;
    background-color: var(--color-seven);
    color: var(--color-two);
    border: none;
    outline: none;
    border-radius: 5px;
}

.admin-archievement-edit textarea{
    width: 100%;
    min-height: 200px;
    max-height: 200px;
    padding: 10px;
    background-color: var(--color-seven);
    color: var(--color-two);
    border: none;
    outline: none;
    border-radius: 5px;
}

.admin-archievement-edit select{
    width: 100%;
    padding: 10px;
    background-color: var(--color-seven);
    color: var(--color-two);
    border: none;
    outline: none;
    border-radius: 5px;
}

.admin-archievement-edit .btn{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 50px;
}