@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap');

body {
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    background: #EAEAEA;
    color: rgba(52,73,94,1.0);
    --background : #EAEAEA;
    --background_2 : #FFFFFF;
    --primary: rgba(52,73,94,1.0);
    --primary_medium: #5c6d7e;
    --primary_ligth: #EAEAEA;
    --blue: rgba(60,131,255,1.0);
    --blue_ligth: rgba(60,131,255,0.2);
    --blue_medium: rgba(60,131,255,0.3);
    --blue_dark: rgba(60,131,255,0.6);
    --green: rgba(16, 172, 132,1.0);
    --green_light: rgba(16, 172, 132,0.2);
    --green_medium: rgba(16, 172, 132,0.3);
    --red: rgba(238, 82, 83,1.0);
    --red_light: rgba(238, 82, 83,0.2);
    --red_medium: rgba(238, 82, 83,0.3);
    --orange: rgba(255, 159, 67,1.0);
    --orange_light: rgba(255, 159, 67,0.2);
    --orange_medium: rgba(255, 159, 67,0.3);
    --btn_light : #7e7e7e;
    --dark: rgba(0,0,0,0.2);
    --dark_medium: rgba(0,0,0,0.3);
    --svg-radius: 20;
    --stroke_circle: 125;
}

section {
    display: none;
}

input, textarea {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    color: var(--primary);
}

/* ------------------------ ATTRIBUT ------------------------ */

.btn1 {
    padding: 25px 15px;
    display: grid;
    grid-template-columns: 20px calc(100% - 30px);
    gap: 10px;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    color: var(--primary);
    background: var(--primary_ligth);
    font-weight: bold;
    font-size: 12px;
}

.btn1 i {
    font-size: 20px;
}

.btn1.active {
    color: var(--blue);
    background: var(--blue_ligth);
}

.btn1.close {
    color: var(--red);
    background: var(--red_light);
}

.right_clic_menu {
    width: 100%;
}

.load_error .container{
    background: var(--blue);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
}

.load_error .sub_container{
    width: 60%;
    color: var(--primary);
    background: var(--background_2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}

.load_error .header{
    padding: 25px 0;
    width: 100%;
    background: var(--primary_ligth);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.load_error .header h1{
    margin: 15px 0;
    font-size: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.load_error .header h5{
    margin: 0;
    font-size: 13px;
    font-weight: normal;
}

.load_error .header i{
    margin: 0;
    font-size: 75px;
}

.load_error .header h1 span{
    margin: 0;
    font-size: 16px;
    padding: 8px 12px;
    background: var(--blue);
    color: var(--background_2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
}

.load_error .loading{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 25px;
}

#error_sub_title b{
    color: var(--red);
}

.load_error .sub_container .arrow-down {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid var(--primary_ligth);
    margin: 0 0 0 calc(50% - 30px);
}

.lds-heart {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    transform: rotate(45deg);
    transform-origin: 40px 40px;
}
.lds-heart div {
    top: 32px;
    left: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    background: var(--blue);
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lds-heart div:after,
.lds-heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    background: var(--blue);
}
.lds-heart div:before {
    left: -24px;
    border-radius: 50% 0 0 50%;
}
.lds-heart div:after {
    top: -24px;
    border-radius: 50% 50% 0 0;
}
@keyframes lds-heart {
    0% {
        transform: scale(0.95);
    }
    5% {
        transform: scale(1.1);
    }
    39% {
        transform: scale(0.85);
    }
    45% {
        transform: scale(1);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(0.9);
    }
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
}
.lds-ripple.blue div {
    position: absolute;
    border: 5px solid var(--blue);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple.red div {
    position: absolute;
    border: 5px solid var(--red);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 75px;
        left: 75px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}

#login .container{
    position: fixed;
    background: var(--blue);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
}

#login .left{
    display: none;
}

#login .right{
    width: 70%;
    background: var(--background_2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
}

#login .right .header{
    background: var(--primary_ligth);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

#login .right .arrow-down {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid var(--primary_ligth);
    margin: 0 0 0 calc(50% - 30px);
}

#login .right .header img{
    height: 75px;
}

#login .right .form{
    margin: 25px;
}

#login .right .form h2{
    margin: 0 0 25px 0;
}

#login .right .form label{
    display: block;
    margin: 15px 0 5px 0;
    width: 100%;
    font-weight: bold;
    font-size: 13px;
}

#login .right .form input{
    margin: 0;
    padding: 10px;
    border: none;
    width: calc(100% - 20px);
    background: var(--primary_ligth);
    outline: none;
    border-radius: 10px;
    font-size: 13px;
}

#login .right .form .button{
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 13px;
    background: var(--blue_ligth);
    color: var(--blue);
    transition: 0.5s ease;
    margin: 35px 0 25px 0;
}

#login .right .form .button:hover {
    background: var(--blue_medium);
    transition: 0.5s ease;
}

#nav .container {
    background: var(--background_2);
    width: 100%;
    height: 100vh;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    z-index: 100;
}

#nav ul {
    margin: 0;
    padding: 0;
    width: 80%;
    margin-left: 10%;
}

#nav ul li{
    margin: 10px 0;
}

#nav ul li p{
    margin: 0;
}

#nav img {
    width: 100px;
    margin: 15px 0 0 calc(50% - 50px);
}

#nav h1 {
    margin: 10px 0 5px 0;
    text-align: center;
}

#nav h6 {
    margin: 0 0 20px 0;
    text-align: center;
}

.content {
    margin: 107px 0 0 0;
    width: 100%;
}

.content_header {
    position: fixed;
    width: 100%;
    top: 0;
    text-align: center;
    padding: 20px 0;
    color: var(--background_2);
    background: var(--blue);
    font-size: 10px;
    z-index: 95;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}

.content_header h1{
    margin: 0;
}

.explorer {
    width: 90%;
    margin-left: 5%;
    display: grid;
    grid-template-columns: repeat(3, calc(calc(100%/3) - 10px));
    gap: 15px;
    padding: 15px 0;
}

.explorer div {
    border-radius: 10px;
    text-align: center;
    padding: 30px 0;
    cursor: pointer;
    color: var(--blue);
    background: var(--blue_ligth);
    transition: 0.5s ease;
}

.explorer div:hover {
    background: var(--blue_medium);
    transition: 0.5s ease;
}

.explorer div i{
    margin: 0;
    font-size: 40px;
}

.explorer div h1{
    margin: 0;
    font-size: 2vw;
}

.nav_explorer {
    padding: 12.5px;
    width: calc(90% - 30px);
    margin-left: 5%;
    background: var(--background_2);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2,39px) calc(100% - 206px) repeat(2,39px);
    gap: 12.5px;
    align-items: center;
}

.nav_explorer .side {
    padding: 7.5px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 10px;
    transition: 0.5s ease;
}

.nav_explorer .middle {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
}

.content .blue {
    background: var(--blue_ligth);
    color: var(--blue);
    transition: 0.5s ease;
}

.content .blue:hover {
    background: var(--blue_medium);
    transition: 0.5s ease;
}

.content .red {
    background: var(--red_light);
    color: var(--red);
    transition: 0.5s ease;
}

.content .red:hover {
    background: var(--red_medium);
    transition: 0.5s ease;
}

.content .green {
    background: var(--green_light);
    color: var(--green);
    transition: 0.5s ease;
}

.content .green:hover {
    background: var(--green_medium);
    transition: 0.5s ease;
}

.content .orange {
    background: var(--orange_light);
    color: var(--orange);
    transition: 0.5s ease;
}

.content .orange:hover {
    background: var(--orange_medium);
    transition: 0.5s ease;
}

.content .dark {
    background: var(--dark);
    color: var(--primary);
    transition: 0.5s ease;
}

.content .dark:hover {
    background: var(--dark_medium);
    transition: 0.5s ease;
}

.nav_explorer h1 {
    margin: 0;
    text-align: center;
    font-size: 20px;
}

.nav_explorer input {
    margin: 0;
    padding: 12.5px;
    border: none;
    width: calc(100% - 30px);
    background: var(--primary_ligth);
    outline: none;
    border-radius: 10px;
    font-size: 13px;
}

.histo_explorer {
    margin-top: 15px;
    width: 90%;
    margin-left: 5%;
}

.histo_explorer>div {
    font-size: 12px;
    color: var(--btn_light);
    font-weight: bold;
    cursor: default;
}

.histo_explorer>div a {
    cursor: pointer;
}

.rclic {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 150px;
    background: var(--background_2);
    border-radius: 10px;
    padding: 5px 0;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}

.rclic div {
    padding: 15px 0;
    margin: 5px 0;
    width: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

.rclic div p {
    margin: 0;
    font-size: 13px;
}

#data_editor_container {
    display: none;
    margin-top: 15px;
    width: 90%;
    margin-left: 5%;
    justify-content: center;
    gap: 15px;
}

#data_editor {
    width: calc(100% - 115px);
    background: #2D3142;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}

#data_editor input[type="number"]{
    width: calc(80% - 30px);
    padding: 15px;
    border: none;
    border-radius: 10px;
    outline: none;
    background: #EAEAEA;
    font-size: 12px;
    font-weight: bold;
    color: #8C0576;
    margin-top: 50px;
    margin-left: 10%;
}

#data_editor input[type="checkbox"]{
    position: relative;
    margin: 50px 0 0 calc(50% - 40px);
    width: 80px;
    height: 40px;
    -webkit-appearance: none;
    background: var(--red);
    outline: none;
    border-radius: 20px;
    transition: 0.5s;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

#data_editor h4{
    text-align: center;
    color: var(--red);
}

#data_editor h4.true{
    color: var(--blue);
}

#data_editor input:checked[type="checkbox"]{
    background: var(--blue);
}

#data_editor input[type="checkbox"]:before{
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: var(--background_2);
    transition: 0.5s;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#data_editor input:checked[type="checkbox"]:before{
    left: 40px;
}

#data_editor_nav {
    width: 100px;
    height: calc(100vh - 257px);
    background: var(--background_2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 0;
    gap: 20px;
}

#data_editor_nav i {
    padding: 17.5px;
    font-size: 25px;
    border-radius: 10px;
    cursor: pointer;
}

#data_editor_header {
    padding: 25px;
    width: calc(90% - 50px);
    margin-left: 5%;
    background: var(--background_2);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-top: 30px;
    display: none;
    grid-template-columns: 100%;
    align-items: center;
    text-align: center;
}

#data_editor_header h1 {
    margin: 0;
    text-align: center;
}

.div_message {
    width: calc(90% - 50px);
    padding: 25px;
    margin: 25px 0 0 5%;
    background: var(--blue_ligth);
    color: var(--blue);
    border-radius: 10px;
    text-align: center;
}

.div_message h3 {
    margin: 0;
    font-size: 25px;
}

.div_message h6 {
    margin: 5px 0 15px 0;
    font-size: 12px;
}

.div_message a{
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

.benchmark_new {
    width: 90%;
    margin: 25px 0 0 5%;
    border-radius: 10px;
    text-align: center;
    padding: 30px 0;
    cursor: pointer;
    color: var(--blue);
    background: var(--blue_ligth);
    transition: 0.5s ease;
}

.benchmark_new:hover {
    background: var(--blue_medium);
    transition: 0.5s ease;
}

.benchmark_new i {
    margin: 0;
    font-size: 40px;
}

.benchmark_new h1 {
    margin: 0;
    font-size: 15px;
}

.view_benchmark_header {
    width: calc(90% - 30px);
    margin: 25px 0 25px 5%;
    display: grid;
    grid-template-columns: repeat(3, 25%);
    gap: 12.5%;
    background: var(--background_2);
    border-radius: 10px;
    padding: 15px;
}

.view_benchmark_header div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 0;
}

.view_benchmark_header div p {
    font-size: 13px;
}

.view_benchmark_content {
    width: calc(90% - 25px);
    margin-left: 5%;
    display: grid;
    grid-template-columns: 80% 20%;
    gap: 25px;
}

.view_benchmark_content>div {
    background: var(--background_2);
    border-radius: 10px;
    padding: 15px;
}
.view_benchmark_content>div h3 {
    text-align: center;
}

#view_benchmark_resume>div {
    border-top: 1px solid var(--primary_ligth);
}

#view_benchmark_resume div:nth-child(1) {
    border: none !important;
}

.view_benchmark_resume>div h5 {
    margin: 10px 0;
}

.view_benchmark_resume>div b{
    color: var(--primary_medium);
}

.view_benchmark_resume>div h6 {
    margin: 5px 0;
    color: var(--primary_medium);
}

.new_benchmark_content {
    width: calc(90% - 30px);
    margin: 25px 0 25px 5%;
    background: var(--background_2);
    border-radius: 10px;
    padding: 15px;
}

.new_benchmark_content>div {
    padding: 15px 0;
    border-top: 1px solid var(--primary_ligth);
}

.new_benchmark_content .command_header{
    width: 100%;
    display: grid;
    grid-template-columns: calc(100% - 24px) 24px;
    align-items: center;
}

.new_benchmark_content .command_header i {
    cursor: pointer;
    user-select: none;
}

.new_benchmark_content .command_header h4 {
    margin: 0;
}

.new_benchmark_content .button {
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.5s ease;
}

.new_benchmark_content input {
    background: var(--primary_ligth);
    width: calc(100% - 24px);
    font-weight: bold;
    font-size: 12px;
    padding: 12px;
    border-radius: 10px;
    outline: none;
    border: none;
    margin: 0 0 15px 0;
}

.new_benchmark_content textarea {
    background: var(--primary_ligth);
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    height: 100px;
    font-weight: bold;
    font-size: 12px;
    padding: 12px;
    border-radius: 10px;
    outline: none;
    border: none;
}

.new_benchmark_content .title {
    margin: 0 0 10px 0;
}

.new_benchmark_content h5 {
    margin: 15px 0 10px 0;
}

.wrapper .select_wrap {
    width: 100%;
    position: relative;
    user-select: none;
}

.wrapper .default_option {
    background: #EAEAEA;
    border-radius: 10px;
    list-style: none;
    margin: 0;
    padding: 15px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.wrapper .default_option:before {
    content: "";
    position: absolute;
    top: 15px;
    right: 15px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: transparent transparent var(--primary) var(--primary);
    transform: rotate(-45deg);
}

.wrapper .select_wrap.active .default_option:before {
    top: 20px;
    transform: rotate(-225deg);
}

.wrapper .select_ul {
    display: none;
    background: #EAEAEA;
    border-radius: 10px;
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.wrapper .select_ul li {
    padding: 15px;
}

.wrapper .select_ul li:hover {
    text-decoration: underline;
}

#view_benchmark_no_result {
    text-align: center;
}

#view_benchmark_no_result .button {
    width: 40%;
    margin-left: 30%;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.5s ease;
}

#view_benchmark_no_result i {
    font-size: 75px;
}

#view_benchmark_no_result h4 {
    margin: 15px 0 10px 0;
    font-size: 30px;
}

#view_benchmark_no_result h5 {
    margin: 0 0 15px 0;
    font-size: 15px;
}

.dashboard_content {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 11.25px));
    gap: 15px;
    margin: 50px 5%;
}

.dashboard_content>div {
    border-radius: 10px;
    background: var(--background_2);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.dashboard_content>div.click {
    cursor: pointer;
    transition: 0.5s ease;
}

.dashboard_content>div .header{
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.dashboard_content>div .header i{
    font-size: 30px;
}

.dashboard_content>div .header div{
    text-align: left;
}

.dashboard_content>div .social{
    padding: 15px 0;
}

.dashboard_content>div .social i{
    font-size: 30px;
}

.dashboard_content>div h1{
    font-size: 16px;
    margin: 0;
}

.dashboard_content>div h2{
    font-size: 10px;
    margin: 0;
}

.dashboard_content .request {
    grid-column: 1 / 3;
    grid-row: 1;
}

.dashboard_content .storage {
    grid-column: 3 / 5;
    grid-row: 1;
}

.dashboard_content .linkendin {
    grid-column: 1 / 3;
    grid-row: 2;
    background: rgba(40,103,178,0.3);
    color: rgba(40,103,178,1);
}

.dashboard_content .linkendin:hover {
    background: rgba(40,103,178,0.4);
    transition: 0.5s ease;
}

.dashboard_content .features {
    grid-column: 1 / 3;
    grid-row: 3;
}

.dashboard_content .users_online {
    grid-column: 3 / 5;
    grid-row: 3;
}

.dashboard_content .discord {
    grid-column: 3 / 5;
    grid-row: 2;
    background: rgba(114,137,218,0.3);
    color: rgba(114,137,218,1);
}

.dashboard_content .discord:hover {
    background: rgba(114,137,218,0.4);
    transition: 0.5s ease;
}

.progress_circle {
    position: relative;
    width: 45px;
    height: 45px;
    color: var(--primary_medium);
}

.progress_circle svg {
    position: relative;
    width: 45px;
    height: 45px;
}

.progress_circle svg circle{
    width: 40px;
    height: 40px;
    fill: none;
    stroke-width: 3;
    stroke: var(--primary_medium);
    transform: translate(3px,3px);
    stroke-dasharray: var(--stroke_circle);;
    stroke-dashoffset: var(--stroke_circle);
    stroke-linecap: round;
    cx: var(--svg-radius);
    cy: var(--svg-radius);
    r: var(--svg-radius);
}

.progress_circle svg circle:nth-child(1){
    stroke-dashoffset: 0;
    stroke: var(--primary_ligth);
}

.progress_circle .number{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress_circle .number h3{
    font-size: 12px;
}

.dashboard_content>div .infos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

.dashboard_content>div .infos h4{
    margin: 0;
    padding: 0 0 10px 0;
    color: var(--primary_medium);
    font-size: 12px;
}

.users_header {
    padding: 15px;
    width: calc(90% - 30px);
    margin-left: 5%;
    background: var(--background_2);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 100px calc(100% - 230px) 100px;
    gap: 15px;
    align-items: center;
}

.users_header .btn {
    padding: 7.5px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 10px;
    transition: 0.5s ease;
}

.users_header .middle {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
}

.users_header input {
    margin: 0;
    padding: 15px;
    border: none;
    width: calc(100% - 30px);
    background: var(--primary_ligth);
    outline: none;
    border-radius: 10px;
    font-size: 13px;
}

.users_content {
    width: 90%;
    margin: 30px 0 0 5%;
    display: grid;
    grid-template-columns: 100%;
    gap: 30px;
    align-items: center;
}

.users_content>div {
    position: relative;
    background: var(--background_2);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 15px;
}

.users_content .btn-group {
    display: grid;
    grid-template-columns: repeat(4,calc(25% - 11.25px));
    gap: 15px;
}

.users_content .btn {
    padding: 5px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 10px;
    transition: 0.5s ease;
}

.users_content .btn li{
    font-size: 18px;
}

.users_content h2{
    margin: 0;
    font-size: 20px;
    position: relative;
    z-index: 90;
}

.users_content h2 span{
    display: block;
    color: var(--primary_medium);
    font-size: 11px;
    margin: 0 0 30px 0;
}

.users_content h4{
    margin: 0 0 30px 0;
    font-size: 13px;
}

.users_content h4 span{
    font-size: 13px;
}

.users_content h4 span.off{
    color: var(--red);
}

.users_content h4 span.on{
    color: var(--green);
}

.users_content .admin_hover {
    position: absolute;
    height: 66px;
    background: var(--blue_ligth);
    width: 100%;
    left: 0;
    top: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.users_content .admin_hover span {
    position: absolute;
    padding: 7.5px 12.5px;
    background: var(--blue);
    right: 15px;
    top: 20px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    color: var(--background_2);
}

.users_content .admin h2{
    color: var(--blue);
}

.users_content .admin h2 span{
    color: var(--blue_dark);
}

.swal_btn {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
}

.swal_btn .btn {
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
    transition: 0.5s ease;
    background: var(--blue_ligth);
    color: var(--blue);
    transition: 0.5s ease;
}

.swal_btn .btn:hover {
    background: var(--blue_medium);
    transition: 0.5s ease;
}

.website_header {
    width: calc(90% - 30px);
    margin: 25px 0 25px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background_2);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}

.website_header .btn {
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.5s ease;
}

.website_content {
    width: 90%;
    margin: 50px 0 50px 5%;
    display: grid;
    grid-template-columns: 100%;
    gap: 25px;
    align-items: center;
}

.website_content>div {
    background: var(--background_2);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: calc(30% - 172.5px) calc(70% - 172.5px) repeat(2, 150px);
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.website_content>div h2{
    margin: 0;
    font-size: 20px;
}

.website_content>div input{
    margin: 0;
    padding: 15px;
    border: none;
    width: calc(100% - 30px);
    background: var(--primary_ligth);
    outline: none;
    border-radius: 10px;
    font-size: 13px;
}

.website_content .btn {
    padding: 5px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
    transition: 0.5s ease;
}

.marketplace_content {
    width: 90%;
    margin: 50px 0 50px 5%;
    display: grid;
    grid-template-columns: 100%;
    gap: 25px;
    align-items: center;
}

.marketplace_content>div {
    background: var(--background_2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
    overflow: hidden;
    height: calc(100% - 53px);
    position: relative;
    padding-bottom: 53px;
}

.marketplace_content .top {
    padding: 25px;
    text-align: center;
    color: #FFFFFF;
    background: var(--blue);
}

.marketplace_content .top i{
    margin: 0;
    font-size: 50px;
}

.marketplace_content .top h2{
    margin: 0;
    font-size: 25px;
}

.marketplace_content .desc{
    width: 80%;
    margin: 0;
    font-size: 13px;
    color: var(--primary);
    text-align: justify;
    padding: 15px 10%;
}

.marketplace_content .action{
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.marketplace_content .action a{
    font-weight: bold;
    font-size: 12px;
    padding: 10px 15px;
    border-radius: 10px;
}

.marketplace_content .not-available{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
    flex-direction: column;
}

.marketplace_content .not-available i{
    margin: 0;
    font-size: 45px;
}

.mobile_menu{
    cursor: pointer;
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
}
.mobile_menu svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 57px;
    height: 57px;
}
.mobile_menu.active svg {
    transform: rotate(90deg);
}
.mobile_menu path {
    stroke: #FFFFFF;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile_menu path:nth-child(1) {
    transform-origin: 36% 40%;
}
.mobile_menu path:nth-child(2) {
    stroke-dasharray: 29 299;
}
.mobile_menu path:nth-child(3) {
    transform-origin: 35% 63%;
}
.mobile_menu path:nth-child(4) {
    stroke-dasharray: 29 299;
}
.mobile_menu path:nth-child(5) {
    transform-origin: 61% 52%;
}
.mobile_menu path:nth-child(6) {
    transform-origin: 62% 52%;
}
.mobile_menu.active path {
    stroke: var(--red);
}
.mobile_menu.active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
}
.mobile_menu.active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
}
.mobile_menu.active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
}
.mobile_menu.active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
}
.mobile_menu.active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
}
.mobile_menu.active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
}

.security_header {
    width: calc(90% - 30px);
    margin: 50px 5%;
    background: #FFFFFF;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    display: grid;
    grid-template-columns: 44px calc(100% - 118px) 44px;
    gap: 15px;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
}

.security_header.edit {
    width: calc(90% - 30px);
    margin: 50px 5%;
    background: #FFFFFF;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    display: grid;
    grid-template-columns: repeat(2,44px) calc(100% - 236px) repeat(2,44px);
    gap: 15px;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
}

.security_header .btn {
    border-radius: 10px;
    display: flex;
    gap: 5px;
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}

.security_header .btn p {
    margin: 0;
    display: none;
}

.security_header h2 {
    margin: 0;
    font-size: 15px;
    text-align: center;
}

.security_header input {
    margin: 0;
    padding: 15px;
    border: none;
    width: calc(100% - 30px);
    background: var(--primary_ligth);
    outline: none;
    border-radius: 10px;
    font-size: 13px;
}

.security_container {
    width: 90%;
    margin: 0 0 0 5%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
}

.security_container.edit {
    width: 90%;
    margin: 0 0 50px 5%;
    display: grid;
    grid-template-columns: 100%;
}

.security_container.edit.empty {
    width: 90%;
    margin: 0 0 0 5%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
}

.security_container.edit.empty>div {
    background: var(--blue_ligth);
    color: var(--blue);
    box-shadow: none;
    padding: 50px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
}

.security_container>div {
    background: #FFFFFF;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    gap: 10px;
}

.security_container>div h3 {
    margin: 0;
    font-size: 15px;
    padding: 5px 0;
}

.security_container>div h4 {
    margin: 0;
    font-size: 12px;
    width: 50%;
}

.security_container>div input {
    margin: 0;
    padding: 10px;
    border: none;
    width: calc(50% - 30px);
    background: var(--primary_ligth);
    outline: none;
    border-radius: 10px;
    font-size: 13px;
}

.security_container.edit.empty>div h5 {
    font-size: 25px;
    margin: 0;
}

.security_container.edit.empty>div p {
    font-size: 12px;
    margin: 0;
}

.security_container.edit.empty>div a {
    font-size: 12px;
    margin: 0;
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--blue);
    color: #FFFFFF;
    margin: 15px 0 0 0;
}

.security_container>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.security_container>div>div span {
    margin: 0;
    font-size: 12px;
    background: var(--blue_ligth);
    color: var(--blue);
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: bold;
}

.security_container .delete {
    transition: 0.5s ease;
}

.security_container .delete:hover {
    transition: 0.5s ease;
    color: var(--red);
}

#new_limit_input {
    width: calc(100% - 40px);
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: var(--primary_ligth);
    outline: none;
}

#new_limit {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, calc(calc(100%/3) - 10px));
    gap: 15px;
    align-items: center;
    padding: 15px 0 0 0;
}

#new_limit div {
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    background: var(--blue_ligth);
    color: var(--blue);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s ease;
}

#new_limit div:hover {
    background: var(--blue_medium);
    transition: 0.5s ease;
}

.security_container.edit>div {
    background: #FFFFFF;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    cursor: pointer;
    gap: 10px;
}