/* ##############################################################
# General
############################################################## */
body {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    color: #F1F1F1;
}


/* ##############################################################
# Preloader
############################################################## */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #1C1C1E;
}
  
  #preloader:before {
    content: "";
    position: fixed;
    top: calc( 50% - 30px );
    left: calc( 50% - 30px );
    border: solid 6px #1C1C1E;
    border-top-color: #F6DE02;
    border-bottom-color: #F6DE02;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}
  
@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate( 0deg );
    }
    100% {
        transform: rotate( 360deg );
    }
}
  
@keyframes animate-preloader {
    0% {
        transform: rotate( 0deg );
    }
    100% {
        transform: rotate( 360deg );
    }
}

/* ##############################################################
# Back to top button
############################################################## */
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #F6DE02;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
    text-decoration: none;
}

.back-to-top i {
    font-size: 24px;
    color: #1C1C1E;
    line-height: 0;
}

.back-to-top:hover {
    background: #F1F1F1;
    color: #1C1C1E;
}

html:not([data-scroll='0']) {
    .back-to-top {
        visibility: visible;
        opacity: 1;
    }
}

/* ##############################################################
# Header
############################################################## */
#header {
    transition: all 0.5s;
    z-index: 997;
    padding: 15px 0;

    .header-logo {
        margin-right: auto;
        text-decoration: none;

        .logo-name {
            height: 35px;
            font-size: 30px;
            font-weight: 700;
            color: #F6DE02;
        }
        
        .logo-by {
            font-size: 10px;
            font-weight: 300;
            color: #F1F1F1;
        }
    
        .logo img {
            max-height: 40px;
        }
    }

    &.alt {
        background: #1C1C1E;
    }
}

/* Search Bar */
form {
    margin-left: 30px;
    background-color: #F1F1F1;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .search-icon {
        width: 30px;
        height: 30px;
        display: flex;

        i {
            margin: auto;
            font-size: 20px;
            color: #1C1C1E;
        }
    }

    .search-input {
        all: unset;
        width: calc( 100% - 50px );
        font-size: 16px;
        font-weight: 300;
        color: #434343;
        padding: 6px 10px;
    }

    .search-input::placeholder {
        color: #434343;
        opacity: 0.7; 
    }
}

html:not([data-scroll='0']) {
    #header.inner-header {
        background: #1b1b1dcc;
    }
}

/* Dropdown */
.login-btn-container {
    .login-dropdown {
        .dropdown {
            .dropbtn {
                margin: 0 0 0 20px;
                padding: 0;
                width: 30px;
                height: 30px;
                border-radius: 50%;

                .avatar-container {
                    pointer-events: none;
                    
                    img {
                        width: 30px;
                        height: 30px;
                    }
                }
            }

            .dropdown-content {
                margin-top: 20px;
                right: -20px;
                min-width: 160px;
                border-radius: 15px;
                border: solid 1px #999;
                background: #FFF;
                
                .list-container {
                    display: flex;
                    pointer-events: none;

                    .login-icon {
                        margin: auto 10px auto 0;
                        font-size: 20px;
                        color: #1C1B17;
                    }

                    .social-platform {
                        margin: auto 0;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 1;
                        color: #1C1B17;
                        display: flex;
                    }
                }
            }


            /* Dropdown triangle */
            .dropdown-content::before {
                content: '';
                position: absolute;
                width: 15px;
                height: 15px;
                top: -8px;
                right: 27px;
                rotate: 45deg;
                border-top: solid 1px #999;
                border-left: solid 1px #999;
                /* border-style: solid; */
                /* border-width: 0 10px 10px 10px; */
                /* border-color: transparent transparent #FFF transparent; */
                background: #FFF;
                z-index: -1;
            }
        }
    }
}

#yes-login {
    display: none;
}

/* ##############################################################
# Navigation Menu
############################################################## */
/* Desktop Navigation */
.navbar {
    padding: 0;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar li {
    position: relative;
}

.navbar a, .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 20px;
    font-family: 'Space Grotesk';
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    line-height: 31.9px;
    color: #F1F1F1;
    white-space: nowrap;
    transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
    color: #F6DE02;
}
  
/* Mobile Navigation */
#mobile-nav {
    display: none !important;

    .dropdown {
        position: relative;
        display: inline-block;
    
        /* Dropdown Button */
        .dropbtn {
            margin-left: 15px;
            padding: 7.5px;
            width: 40px;
            height: 40px;
            font-size: 25px;
            color: #fff;
            border: none;
            background-color: transparent;
            cursor: pointer;
        }
        
        /* Dropdown button on hover & focus */
        .dropbtn:hover, .dropbtn:focus {
            color: #1C1C1E;
            background-color: #F6DE02;
        }
    
        /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            margin-top: 40px;
            right: 0;
            max-width: 300px;
            border-radius: 15px 0 15px 15px;
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            box-shadow: 0px 8px 16px 0px rgba( 0,0,0,0.2 );
            z-index: 1;
        }
    
        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
    
        /* Change color of dropdown links on hover */
        .dropdown-content a:hover { 
            background-color: #F6DE02; 
        }
    
        .dropdown-content a:first-child:hover { 
            border-radius: 15px 0 0 0;
        }
    
        .dropdown-content a:last-child:hover { 
            border-radius: 0 0 15px 15px;
        }
    
        /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
        .show { 
            display: block; 
        }
    }
}

@media ( max-width: 991px ) {
    #mobile-nav {
      display: block !important;
    }
  
    .navbar ul {
      display: none;
    }
}


/* ##############################################################
# Banner Section
############################################################## */
#banner {
    width: 100%;
    /* height: 95vh; */
    /* background: black; */
    background-image: url( '../../assets/images/backgrounds/bg-banner.jpg' );

    .container {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .banner-name {
        font-size: 30px;
        font-weight: 300;
        color: #F6DE02;
    }

    .banner-title {
        margin: 0 0 30px 0;
        font-size: 45px;
        font-weight: 700;
        line-height: normal;
        color: #F6DE02;
    }

    .btn {
        font-size: 20px;
        font-weight: 700;
        padding: 10px 30px;
        border: none;
        border-radius: 0;
        transition: 0.5s;

        &.btn-explore {
            color: #fff;
            background: #F716B2;
        }
    
        &.btn-explore:hover {
            background: #F716B2;
        }

        &.btn-login {
            margin-left: 20px;
            color: #1C1C1E;
            background: #F6DE02;
        }
    
        &.btn-login:hover {
            background: #F6DE02;
        }
    }

    .animated {
        animation: up-down 2s ease-in-out infinite alternate-reverse both;
    }

    .banner-img {
        text-align: right;
    }
    
    .banner-img img {
        max-width: 700px;
    }
}

@media ( max-width: 1280px ) {
    #banner {
        .banner-img img {
            width: 500px;
        }
    }
}
  
@media ( max-width: 991px ) {
    #banner {
        /* height: 100vh; */
        text-align: center;

        .animated {
            -webkit-animation: none;
            animation: none;
        }

        .banner-img {
            text-align: center;
        }

        .banner-img img {
            width: 50%;
        }
    }
}

@media ( max-width: 767px ) {
    #banner .banner-img img {
        width: 70%;
    }
}

@media ( max-width: 575px ) {
    #banner {
        .banner-img img {
            width: 80%;
        }

        .btn-explore, .btn-login {
            font-size: 16px;
            padding: 10px 24px 11px 24px;
        }
    } 
}
  
@-webkit-keyframes up-down {
    0% {
        transform: translateY( 10px );
    }
    100% {
        transform: translateY( -10px );
    }
}
  
@keyframes up-down {
    0% {
        transform: translateY( 10px );
    }
    100% {
        transform: translateY( -10px );
    }
}


/* ##############################################################
# Sections
############################################################## */
section {
    padding: 60px 0;
    overflow: hidden;

    .section-bg {
        background-color: #fff;
    }
    
    .section-title {
        text-align: center;
        padding-bottom: 30px;

        span {
            font-size: 50px;
            font-weight: 700;
            color: #F6DE02;
            position: relative;
        }

        p {
            margin-bottom: 0;
            font-size: 25px;
            font-weight: 500;
            color: #F1F1F1;
        }
    }
}


/* ##############################################################
# Features Assets
############################################################## */
.features {
    background: #1C1C1E;

    .img-features {
        height: 200px;
        object-fit: cover;
    }
    
    .title-box {
        background: #fff;
        box-shadow: 0px 3px 6px #00000029;
        transition: all ease-in-out 0.4s;

        span {
            margin: 20px auto;
            font-size: 15px;
            font-weight: 700;
            color: #1C1C1E;
        }
    }

    .btn {
        margin-top: 30px;
        font-size: 20px;
        font-weight: 700;
        padding: 10px 30px;
        border: none;
        border-radius: 0;
        transition: 0.5s;

        &.btn-explore {
            color: #1C1C1E;
            background: #F6DE02;
        }
    }
}


/* ##############################################################
# Demo Video
############################################################## */
.demo {
    background: #242426;
}


/* ##############################################################
# Contact
############################################################## */
.contact {
    background: #1C1C1E;

    .info {
        padding: 30px;
        width: 100%;
        border-radius: 3px;
        background: #242426;
        box-shadow: 0px 3px 6px #00000029;

        .header {
            margin-bottom: 20px;
        }

        .header {
            span {
                font-size: 25px;
                font-weight: 700;
                color: #F6DE02;
            }
            
            p {
                margin: 0;
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                color: #F1F1F1;
            }
        }

        .phone i {
            width: 35px;
            height: 35px;
            font-size: 33px;
            color: black;
            background: #F6DE02;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
            transform: scaleX(-1);
            transition: all 0.3s ease-in-out;
        }

        .email i, .address i, .time i {
            width: 35px;
            height: 35px;
            font-size: 33px;
            color: #F6DE02;
            background: none;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
            transform: scaleX(-1);
            transition: all 0.3s ease-in-out;
        }

        .phone p, .email p, .address p, .time p {
            margin: auto 0;
            padding: 0 0 0 15px;
            font-size: 20px;
            font-weight: 500;
            color: #fff;
        }
    }

    .google-map iframe {
        width: 100% !important;
        height: 100% !important;
        border-radius: 3px;
        box-shadow: 0px 3px 6px #00000029;
    }
}

@media ( max-width: 991px ) {
    .contact {
        .google-map iframe {
            height: 350px !important;
        }
    }
}

/* ##############################################################
# Pages Path
############################################################## */
#path-search {
    margin-top: 80px;
    background: #242426;

    .path-search-container {
        display: flex;
    }
}

#pages-path {
    width: calc( 100% - 300px );
    border-bottom: solid 1px #f2f2f280;

    .path-container {
        width: 100%;
        padding: 20px 15px 20px;

        #path-report, #path-icon {
            display: none;
        }

        .path {
            font-size: 15px;
            font-weight: 400;
            color: #999;
            text-decoration: none;
            line-height: 1.15;

            &.active {
                color: #F1F1F1;
            }
        }

        .arrow-icon {
            margin: 0 5px;
            font-size: 20px;
            color: #999;
        }

        #author-path {
            display: none;
        }
    }
}

#asset-search {
    padding: 20px 0;
    width: 300px;
    border-bottom: solid 1px #f2f2f280;
    display: flex;

    .form-group {
        margin: auto 0;

        .input-group {
            .form-control {
                width: 250px;
                height: 50px;
                /* border-radius: 0; */
                border: solid 1px #434343;
                color: #F1F1F1;
                background-color: #242426;

                &.form-search {
                    border-radius: 0;
                    border-right: none;
                }
            }

            .form-control::placeholder {
                color: #999;
                opacity: 0.7; 
            }
            
            .form-control:focus {
                border: solid 1px #F6DE02;
                box-shadow: 0 0 3px #F6DE02 !important;
                /* outline-offset: 0px !important;
                outline: none !important; */
            }

            .input-group-append .input-group-text {
                width: 50px;
                height: 50px;
                border-radius: 0;
                border: solid 1px #434343;
                border-left: none;
                background-color: #242426;

                i {
                    font-size: 25px;
                    color: #999;
                }
            }
        }
    }
}

#pages-path-alt {
    margin-top: 80px;
    background: #242426;

    .path-container {
        padding: 20px 15px 20px;
        border-bottom: solid 1px #f2f2f280;

        .path {
            font-size: 15px;
            font-weight: 400;
            color: #999;
            text-decoration: none;

            &.active {
                color: #F1F1F1;
            }
        }

        .arrow-icon {
            margin: 0 5px;
            font-size: 20px;
            color: #999;
        }
    }
}

@media ( max-width: 991px ) {
    #path-search .path-search-container {
        flex-direction: column;
    }

    #pages-path {
        width: 100%;

        /* .path-container {
            flex-direction: column;
        } */
    }

    #asset-search {
        width: 100%;

        .form-group {
            width: 100%;
    
            .input-group {
                .form-control {
                    width: calc( 100% - 50px);
                }
            }
        }
    }
}

/* @media ( max-width: 410px ) {
    #path-search .path-search-container {
        flex-direction: column;
    }

    #pages-path {
        width: 100%;

        .path-container {
            flex-direction: column;
        }
    }

    #asset-search {
        width: 100%;
    }
} */

/* ##############################################################
# Assets Categories
############################################################## */
#sidebar-content {
    padding: 20px 0;
    background: #242426;
}

#sidebar {
    &.sidebar-container {
        .category-container {
            margin-right: 30px;
            padding: 20px;
            width: 230px;
            background-color: #1C1C1E;

            .title {
                font-size: 15px;
                font-weight: 400;
                color: #F6DE02;
            }

            /* TODO: Fix Checkbox Color */
            .form-check {
                .form-check-label {
                    font-size: 15px;
                    font-weight: 400;
                    color: #fff;
                    display: flex;

                    .form-check-input {
                        width: 20px;
                        height: 20px;
                    }
                }
            }

            .form-check:not(:last-child) {
                margin-bottom: 10px;
            }
        }

        .category-container.type {
            margin-top: 15px;
        }
    }
}

#content {
    &.content-container {
        width: calc( 100% - 260px );

        #author-container {
            display: none;
        }

        .author-card {
            padding: 20px;
            margin-bottom: 30px;
            background-color: #1C1C1E;
            display: flex;

            .profile {
                width: 80%;
                display: flex;

                .img-profile {
                    margin-right: 20px;

                    img {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }

                .author-details {
                    display: flex;
                    flex-direction: column;

                    .detail-center {
                        width: 100%;
                        margin: auto 0;
                        display: flex;
                        flex-direction: column;
    
                        .name {
                            font-size: 20px;
                            font-weight: 700;
                            color:  #F1F1F1;
                        }
    
                        .organization {
                            font-size: 15px;
                            font-weight: 400;
                            color:  #F6DE02;
                        }
                    }
                }
            }

            .assets {
                padding: 0 20px;
                width: 20%;
                border-left: solid 1px #434343;
                display: flex;

                .asset-center {
                    width: 100%;
                    margin: auto 0;
                    display: flex;
                    flex-direction: column;

                    .no-asset {
                        font-size: 20px;
                        font-weight: 700;
                        color:  #F1F1F1;
                    }

                    .label {
                        font-size: 15px;
                        font-weight: 400;
                        color:  #F1F1F1;
                    }
                }
            }
        }

        .header {
            margin-bottom: 10px;

            .text {
                width: calc( 100% - 250px );

                span {
                    font-size: 15px;
                    font-weight: 400;
                    color:  #F1F1F1;
                }
                
                span.highlight {
                    font-size: 15px;
                    font-weight: 700;
                    color:  #F6DE02;
                }
            }

            .sorting {
                width: 250px;
                justify-content: flex-end;

                span {
                    font-size: 15px;
                    font-weight: 400;
                    color:  #F6DE02;
                }
            }
        }

        .category-hide {
            display: none;

            .mobile-category {
                margin-top: 10px;
                width: 100%;
                display: flex;
                flex-direction: column;

                span {
                    font-size: 15px;
                    font-weight: 400;
                    color:  #F6DE02;
                }

                .dropdown {
                    width: 100%;
    
                    .dropbtn {
                        margin: 0;
                        width: 100%;
                    }
    
                    .dropdown-content {
                        width: 100%;
                    }
                }
            }
        }

        .assets-card {
            padding: 12px;
            position: relative;

            .type-badge {
                padding: 5px 15px;
                border-radius: 15px 0;
                background-color: #F6DE02;
                position: absolute;
    
                span {
                    margin: auto;
                    font-size: 10px;
                    font-weight: 500;
                    color: #1C1C1E;
                }
            }

            .img-assets {
                width: 100%;
                height: 300px;
                object-fit: cover;
                border-radius: 15px 15px 0 0;
                border: solid 1px #fff;
                /* object-position: center center; */
            }

            .title-box {
                height: 75px;
                border-radius: 0 0 15px 15px;
                background: #fff;
                display: flex;
                flex-direction: column;
                box-shadow: 0px 3px 6px #00000029;
                transition: all ease-in-out 0.4s;

                .author-name {
                    margin: auto 15px 0 15px;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 1;
                    color: #1C1C1E;
                }
        
                .asset-name {
                    margin: 0 15px auto 15px;
                    font-size: 15px;
                    font-weight: 700;
                    line-height: 1.15;
                    color: #1C1C1E;

                    /* Ellipsis */
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

@media ( max-width: 500px ) {
    #content {
        .author-card {
            flex-direction: column;

            .profile {
                margin-bottom: 20px;
                width: 100% !important;
            }

            .assets {
                padding: 20px 0 0 !important;
                width: 100% !important;
                border-left: none !important;
                border-top: solid 1px #434343;
            }
        }
    }
}

/* ##############################################################
# Organization
############################################################## */
#organization-content {
    padding: 20px 0;
    background: #242426;

    .content-container {
        width: 100%;

        .organization-card {
            padding: 20px;
            margin-bottom: 30px;
            background-color: #1C1C1E;
            display: flex;

            .organization-profile {
                width: 80%;
                display: flex;

                .img-organization {
                    margin-right: 20px;

                    img {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }

                .organization-details {
                    padding-right: 20px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .detail-center {
                        width: 100%;
                        margin: auto 0;
                        display: flex;
                        flex-direction: column;
    
                        .name {
                            font-size: 20px;
                            font-weight: 700;
                            color:  #F1F1F1;
                        }
    
                        .address {
                            font-size: 15px;
                            font-weight: 400;
                            color:  #F1F1F1;
                        }

                        .organization {
                            font-size: 15px;
                            font-weight: 400;
                            color:  #F6DE02;
                        }

                    }
                }
            }

            .authors {
                padding: 0 20px;
                width: 20%;
                border-left: solid 1px #434343;
                display: flex;

                .authors-center {
                    width: 100%;
                    margin: auto 0;
                    display: flex;
                    flex-direction: column;

                    .no-authors {
                        font-size: 20px;
                        font-weight: 700;
                        color:  #F1F1F1;
                    }

                    .label {
                        font-size: 15px;
                        font-weight: 400;
                        color:  #F1F1F1;
                    }
                }
            }
        }

        .header {
            margin-bottom: 10px;

            .text {
                width: calc( 100% - 250px );

                span {
                    font-size: 15px;
                    font-weight: 400;
                    color:  #F1F1F1;
                }
                
                span.highlight {
                    font-size: 15px;
                    font-weight: 700;
                    color:  #F6DE02;
                }
            }

            .sorting {
                width: 250px;
                justify-content: flex-end;

                span {
                    font-size: 15px;
                    font-weight: 400;
                    color:  #F6DE02;
                }
            }
        }

        .authors-card {
            padding: 20px;
            margin: 10px;
            width: calc( 20% - 20px );
            border-radius: 20px;
            background-color: #1C1C1E;

            
            .img-authors {
                margin-bottom: 10px;

                img {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    object-fit: cover;
                }
            }

            .author-details {
                display: flex;
                flex-direction: column;

                .asset {
                    font-size: 12px;
                    font-weight: 400;
                    color:  #999;
                }

                .name {
                    font-size: 18px;
                    font-weight: 500;
                    color:  #F1F1F1;
                    line-height: 1.15;
                }
            }
        }
    }
}

@media ( max-width: 1100px ) {
    #organization-content .content-container .authors-card {
        width: calc( 25% - 20px );
    }
}

@media ( max-width: 991px ) {
    #organization-content .content-container .authors-card {
        width: calc( 33.33% - 20px );
    }
}

@media ( max-width: 767px ) {
    #organization-content .content-container .authors-card {
        width: calc( 50% - 20px );
    }
}

@media ( max-width: 575px ) {
    #organization-content .content-container .authors-card {
        width: calc( 100% - 20px );
    }
}

@media ( max-width: 500px ) {
    #organization-content .content-container {
        .organization-card {
            flex-direction: column;

            .organization-profile {
                margin-bottom: 20px;
                width: 100%;
            }

            .authors {
                padding: 20px 20px 0;
                width: 100%;
                border-left: none;
                border-top: solid 1px #434343;
                display: flex;

                .authors-center {
                    width: 100%;
                    margin: auto 0;
                    display: flex;
                    flex-direction: column;

                    .no-authors {
                        font-size: 20px;
                        font-weight: 700;
                        color:  #F1F1F1;
                    }

                    .label {
                        font-size: 15px;
                        font-weight: 400;
                        color:  #F1F1F1;
                    }
                }
            }
        }

        .header {
            flex-direction: column;
    
            .text {
                width: 100%;
            }
    
            .sorting {
                margin-top: 10px;
                width: 100%;
                display: flex;
                flex-direction: column;
            }
    
            .dropdown {
                width: 100%;
    
                .dropbtn {
                    margin: 0;
                    width: 100%;
                }
    
                .dropdown-content {
                    width: 100%;
                }
            }
        }
    }
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;

    /* Dropdown Button */
    .dropbtn {
        margin-left: 10px;
        padding: 10px 15px;
        width: 150px;
        height: 40px;
        font-size: 15px;
        font-weight: 400;
        color: #fff;
        border: none;
        background-color: #1C1C1E;
        cursor: pointer;
    }
    
    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        color: #1C1C1E;
        background-color: #F6DE02;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
        min-width: 160px;
        border-radius: 15px;
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        box-shadow: 0px 8px 16px 0px rgba( 0,0,0,0.2 );
        z-index: 1;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Change color of dropdown links on hover */
    .dropdown-content a:hover { 
        background-color: #F6DE02; 
    }

    .dropdown-content a:first-child:hover { 
        border-radius: 15px 15px 0 0;
    }

    .dropdown-content a:last-child:hover { 
        border-radius: 0 0 15px 15px;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show { 
        display: block; 
    }
}

/* Paginations */
#pagination {
    display: flex;
    justify-content: flex-end;

    .pagination {
        .page-item {
            width: 40px;
            height: 40px;
            padding: auto;
            display: flex;

            .page-link {
                margin: auto;
                border: none;
                color: #fff;
                background: transparent;

                &.arrow {
                    display: flex;
                }

                .arrow-icon {
                    font-size: 25px;
                }
            }

            .page-link:active, .page-link:focus {
                margin: auto;
                border: none;
                color: #1C1C1E;
                background: #F6DE02;
            }

            .page-more {
                margin: auto;
                border: none;
                color: #fff;
                background: transparent;
                text-decoration: none;
            }
        }
    }
}

@media ( max-width: 991px ) {
    #sidebar {
        &.sidebar-container {
            .category-container {
                display: none;
            }
        }
    }

    #content {
        &.content-container {
            width: 100%;

            .header {
                flex-direction: column;

                .text {
                    width: 100%;
                }

                .mobile-category {
                    display: block;
                }
    
                .sorting {
                    margin-top: 10px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                }
            }

            .category-hide {
                display: block;
            }

            .dropdown {
                width: 100%;

                .dropbtn {
                    margin: 0;
                    width: 100%;
                }

                .dropdown-content {
                    width: 100%;
                }
            }
        }
    }
}

@media ( max-width: 767px ) {
    #pagination {
        justify-content: center;
    }
}

/* ##############################################################
# Asset Details
############################################################## */
#details-container {
    padding: 60px 0;
    min-height: 100vh;
    background: #242426;

    #three-js {
        margin: 50px auto 50px;
        width: 100%;
        height: 650px;

        canvas { 
            outline: none;
            border-radius: 8px;
            border: solid 1px #434343;
            border-bottom: solid 0.5px #434343;
        }

        #model-3d {
            position: relative;
            background-color: #403C3C;
            width: 100%;
            height: 100%;
        }

        #controller-btn {
            position: relative;
            /* background-color: #403C3C; */

            .btn-container {
                margin-top: auto;
                margin-left: 20px;
                bottom: 20px;
                width: 45px;
                display: flex;
                flex-direction: column;
                position: absolute;

                .button {
                    width: 40px;
                    height: 40px;
                    border-radius: 5px;
                    background: #F6DE02;
                    display: flex;
                    transition: 0.5s;

                    &.active {
                        background: #F1F1F1;
                    }

                    i, svg {
                        margin: auto;
                        font-size: 20px;
                        color: #1C1C1E;
                        cursor: pointer;
                    }

                    img {
                        margin: auto;
                        width: 20px;
                        height: 20px;
                    }
                }

                .button:hover {
                    background: #F1F1F1;
                }

                .button:not(:first-child) {
                    margin-top: 10px;
                }
            }
        }

        .threeD-player {
            width: 100%;
            height: 25px;

            .control-bar {
              width: 100%;
              padding: 0 10px;
              display: flex;
              border-bottom-left-radius: 5px;
              border-bottom-right-radius: 5px;
              border: solid 1px #434343;
              border-top: solid 0.5px #434343;
              background-color: #242426;

              .button {
                width: 25px;
                height: 25px;
                /* background: #F6DE02; */
                display: flex;
                transition: 0.5s;

                i {
                  margin: auto;
                  font-size: 20px;
                  color: #F1F1F1;
                  cursor: pointer;

                  &.bx-revision {
                    font-size: 15px;
                  }
                }
              }

              label {
                width: 40px;
                margin: auto 5px;
                font-size: 13px;
                font-weight: 400;
                line-height: 1.15;
                color: #F1F1F1;
              }

              .keyframe-container {
                margin: auto 0;
                width: calc( 100% - 75px );
                display: flex;

                #keyframe-bar {
                  width: 100%;
                }

                input[type="range"] {
                  accent-color: #F6DE02;
                }
              }
            }
        }

        /* #model {
            position: relative;
            background-color: #403C3C;
            width: 100%;
            height: 100%;

            .btn-container {
                margin-top: auto;
                margin-left: 20px;
                bottom: 20px;
                width: 40px;
                display: flex;
                flex-direction: column;
                position: absolute;

                .button {
                    width: 40px;
                    height: 40px;
                    background: #F6DE02;
                    display: flex;
                    transition: 0.5s;

                    i, svg {
                        margin: auto;
                        font-size: 20px;
                        color: #1C1C1E;
                        cursor: pointer;
                    }
                }

                .button:hover {
                    background: #F1F1F1;
                }

                .button:not(:first-child) {
                    margin-top: 10px;
                }
            }
        } */
    }

    .asset-title {
        font-size: 40px;
        font-weight: 700;
        line-height: 1.25;
        color:  #F6DE02;
    }

    .asset-content {
        margin-top: 20px;
        width: 100%;
        display: flex;

        .author-container {
            width: calc( 100% - 210px );
            display: flex;

            .asset-author {
                margin: auto 0;
                font-size: 20px;
                font-weight: 300;
                color:  #F6DE02;
                text-decoration: none;

                .text-white {
                    color: #FFF;
                }
            }
        }

        .button-container {
            width: 210px;
            height: 40px;
            display: flex;

            .share-dropdown {
                width: 100px;

                .dropdown {
                    width: 100%;
    
                    .dropbtn {
                        margin: 0;
                        padding: 10px 15px;
                        width: 100%;
                        border: solid 1px #434343;
                        border-right: solid 0.5px #434343;
                        border-radius: 50px 0px 0px 50px;
                        background: #1C1B17;
                        transition: 0.5s;
                        display: inline-block;

                        .Share-container {
                            display: flex;
                            pointer-events: none;
                            
                            .share-icon {
                                font-size: 20px;
                                color: #FFF;
                            }

                            .Share-label {
                                margin: auto 0 auto 5px;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 1;
                                color: #F1F1F1;
                                display: flex;
                            }
                        }
                    }

                    .dropbtn:hover, .dropbtn:focus {
                        background: #F6DE02;

                        .Share-container {
                            .share-icon {
                                color: #1C1C1E;
                            }

                            .Share-label {
                                color: #1C1C1E;
                            }
                        }
                    }
    
                    .dropdown-content {
                        min-width: 200px;
                        border-radius: 5px;
                        border: solid 1px #999;
                        background: #1C1B17;
                        
                        .social-container {
                            display: flex;
                            pointer-events: none;

                            .social-icon {
                                font-size: 20px;
                                color: #F6DE02;
                            }

                            .twitter img {
                                width: 20px;
                                height: 20px;
                            }

                            .social-platform {
                                margin: auto 0 auto 10px;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 1;
                                color: #F1F1F1;
                                display: flex;
                            }
                        }
                    }
                }
            }

            .btn {
                padding: 10px 15px;
                width: 110px;
                border: solid 1px #434343;
                border-left: solid 0.5px #434343;
                border-radius: 0px 50px 50px 0px;
                background: #1C1B17;
                transition: 0.5s;

                &.btn-report {
                    .report-container {
                        display: flex;
                        pointer-events: none;
                        
                        .report-icon {
                            font-size: 20px;
                            color: #FFF;
                        }

                        .report-label {
                            margin: auto 0 auto 5px;
                            font-size: 14px;
                            font-weight: 500;
                            color: #F1F1F1;
                            display: flex;
                        }
                    }
                }
            
                &.btn-report:hover {
                    background: #F6DE02;

                    .report-container {
                        .report-icon {
                            color: #1C1C1E;
                        }

                        .report-label {
                            color: #1C1C1E;
                        }
                    }
                }
            }
        }
    }

    .btn {
        width: 100%;
        font-size: 20px;
        font-weight: 700;
        padding: 10px 30px;
        border: none;
        border-radius: 100px;
        transition: 0.5s;

        &.btn-download {
            margin-top: 20px;
            color: #1C1C1E;
            background: #F6DE02;
        }
    
        &.btn-download:hover {
            background: #F1F1F1;
        }
    }

    /* Tab */
    /* Style the tab */
    .tab {
        margin-top: 20px;
        overflow: hidden;
        border: none;
        background-color: #242426;

        /* Style the buttons inside the tab */
        button {
            padding: 10px 30px;
            font-size: 20px;
            font-weight: 300;
            color: #F1F1F1;
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            transition: 0.3s;
        }
        
        /* Change background color of buttons on hover */
        button:hover {
            color: #1C1C1E;
            background-color: #F6DE02;
        }
        
        /* Create an active/current tablink class */
        button.active {
            font-weight: 500;
            color: #F1F1F1;
            background-color: #242426;
            border-bottom: solid 2px #FD9601;
        }
    }
    
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: none;
    }

    #About {
        .about-details {
            .about-date {
                margin-top: 15px;
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                line-height: 1.15;
                color:  #C4CDD5;
            }

            .about-title {
                margin-top: 15px;
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                line-height: 1.15;
                text-transform: capitalize;
                color:  #F6DE02;
            }

            .about-description {
                margin-top: 5px;
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                line-height: 1.15;
                text-transform: capitalize;
                color:  #C4CDD5;
            }
        }
    }

    #Info {
        .info-title {
            margin-top: 15px;
            padding: 0;
            font-size: 20px;
            font-weight: 700;
            text-transform: uppercase;
            color:  #F6DE02;
        }

        .info-container {
            margin-top: 15px;
            padding: 0;
            border-radius: 8px;
            border: solid 2px #434343;

            .header {
                padding: 10px 20px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                cursor: pointer;

                span {
                    font-size: 15px;
                    font-weight: 700;
                    line-height: 1.15;
                    color: #F1F1F1;
                }

                .icon-container {
                    width: 40px;
                    height: 40px;
                    display: flex;

                    .icon-arrow {
                        margin: auto;
                        font-size: 35px;
                        color: #F1F1F1;
                    }
                }
            }

            .content {
                padding: 15px 20px;
                width: 100%;
                border-top: solid 1px #434343;
                display: none;

                .content-performer {
                    margin: 5px 0;
                    padding: 0;
                    font-size: 15px;
                    font-weight: 400;
                    line-height: 1.15;
                    text-transform: capitalize;
                    color:  #C4CDD5;
                }

                .content-table {
                    width: 100%;
                    display: flex;

                    .label-container {
                        margin: 5px 0;
                        width: 130px;
                    }

                    .detail-container {
                        margin: 5px 0;
                        width: calc( 100% - 130px );
                    }
                }

                .recording-container {
                    margin-top: 15px;
                    padding: 0;
                    border-radius: 8px;
                    border: solid 2px #434343;
        
                    .recording-header {
                        padding: 10px 20px;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        cursor: pointer;
        
                        span {
                            font-size: 15px;
                            font-weight: 700;
                            line-height: 1.15;
                            color: #F1F1F1;
                        }
                    }
        
                    .recording-content {
                        padding: 15px 20px;
                        width: 100%;
                        border-top: solid 1px #434343;
        
                        .recording-content-table {
                            width: 100%;
                            display: flex;
        
                            .label-container {
                                margin: 5px 0;
                                width: 110px;
                            }
        
                            .detail-container {
                                margin: 5px 0;
                                width: calc( 100% - 110px );
                            }
                        }
                    }
                }
            }

            .show {
                display: block;
            }
        }

        .about-details, .details {
            .info-text, .about-text {
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                color:  #C4CDD5;
            }

            .info-title, .about-title {
                margin-top: 10px;
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                text-transform: capitalize;
                color:  #F6DE02;
            }

            .info-text, .about-text {
                padding: 0;
                font-size: 15px;
                font-weight: 400;
                color:  #C4CDD5;
            }
        }

        .divider {
            width: 100%;
            border-bottom: solid 1px #434343;
        }
    }

    #report-title {

        .title-container {
            width: 100%;
            display: flex;
            flex-direction: column;

            .report-title {
                font-size: 40px;
                font-weight: 700;
                line-height: 1.25;
                color:  #F6DE02;
            }

            .report-text {
                font-size: 20px;
                font-weight: 500;
                line-height: 1;
                color:  #fff;
            }

            /* Button */
            .btn-container-back {
                justify-content: start;
          
                .btn {
                    margin-bottom: 20px;
                    padding: 10px;
                    width: 100px;
                    height: 40px;
                    border: solid 1px #F1F1F1;
                    border-radius: 5px;
                    transition: 0.5s;
            
                    &.btn-back {
                        display: flex;
                        background: #242426;
            
                        .icon-back {
                            margin: auto 0;
                            font-size: 16px;
                            color: #F1F1F1;
                        }
            
                        .text-back {
                            margin: auto auto auto 5px;
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 1;
                            color: #F1F1F1;
                        }
                    }
                
                    &.btn-back:hover {
                        border: solid 1px #242426;
                        background: #F6DE02;
            
                        .icon-back {
                            color: #1C1C1E;   
                        }
            
                        .text-back {
                            color: #1C1C1E;
                        }
                    }
                }
            }
        }
    }

    #report-form {
        .form-container {
            margin-top: 40px;
            padding-bottom: 20px;
            border-radius: 10px;
            background: #1C1C1E;
            box-shadow: 0px 3px 6px 0px rgba( 0, 0, 0, 0.25 );
            
            .asset-details-container {
                padding: 20px 20px 0;

                .asset-name {
                    font-size: 25px;
                    font-weight: 700;
                    line-height: 1.15;
                    color:  #FFF;
                }

                .author-id {
                    margin-top: 10px;
                    display: flex;
                    flex-direction: column;
                
                    .asset-author, .asset-id {
                        font-size: 15px;
                        font-weight: 400;
                        line-height: 1.15;
                        color:  #FFF;
                    }
                }
            }

            .dropdown-container {
                padding: 20px;
        
                .field-label {
                    font-size: 15px;
                    font-weight: 700;
                    line-height: 1.15;
                    color: #F1F1F1;
                    text-transform: uppercase;
                }
        
                .dropdown-view {
                  .dropdown {
                    width: 100%;
        
                    .dropbtn {
                        margin: 20px 0 0 0;
                        padding: auto 12px;
                        width: 100%;
                        height: 45px;
                        border-radius: 5px;
                        border: solid 1px #434343;
                        background-color: #242426;
                        display: flex;
                        justify-content: space-between;
                        cursor: pointer;
        
                        span {
                            margin: auto 0;
                            font-size: 15px;
                            font-weight: 400;
                            line-height: 1.15;
                            color: #F1F1F1;
                            text-align: left;
                            pointer-events: none;
                        }
        
                        .icon-down {
                            margin: auto 0;
                            font-size: 25px;
                            font-weight: 500;
                            color: #F1F1F1;
                            justify-self: end;
                            pointer-events: none;
                        }
                    }
        
                    .dropdown-content {
                        width: 100%;
                        border-radius: 5px;
                        border: solid 1px #434343;
                        background-color: #242426;
            
                        a {
                            font-size: 15px;
                            font-weight: 400;
                            line-height: 1.15;
                            color: #F1F1F1;
                            text-align: left;
                            text-decoration: none;
                            display: block;
                        }
        
                        a:hover {
                            border-radius: 5px;
                            color: #1C1C1E;
                        }
                    }
                  }
                }
            }
    
            .description-container {
                padding: 0 20px;
    
                .field-label {
                    font-size: 15px;
                    font-weight: 700;
                    line-height: 1.15;
                    color: #F1F1F1;
                    text-transform: uppercase;
                }
    
                .form-group {
                    margin-top: 10px;
                    margin-bottom: 20px;
    
                    .input-group {
                        .form-control {
                            font-size: 15px;
                            font-weight: 400;
                            line-height: 1.15;
                            color: #F1F1F1;
                            border-radius: 5px;
                            border: solid 1px #434343;
                            background-color: #242426;
                        }
    
                        .form-control::placeholder {
                            color: #999;
                            opacity: 0.7; 
                        }
                        
                        .form-control:focus {
                            border: solid 1px #F6DE02 !important;
                            box-shadow: 0 0 3px #F6DE02 !important;
                            /* outline-offset: 0px !important;
                            outline: none !important; */
                        }
                    }
                }
    
                textarea {
                    resize: none;
                }
            }
    
            .submit-container {
                padding: 0 20px;
                display: flex;
                justify-content: flex-end;
    
                .btn {
                    width: fit-content;
                    height: 45px;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 1.25;
                    padding: 10px 50px;
                    border: none;
                    border-radius: 100px;
                    transition: 0.5s;
    
                    &.btn-submit {
                        color: #1C1C1E;
                        background: #F6DE02;
                    }
                
                    &.btn-submit:hover {
                        background: #F1F1F1;
                    }
                }
            }
        }
    }

    #About {
        display: block;
    }
}

@media ( max-width: 991px ) {
    #content-details {
        margin-top: 30px;
    }
}

@media ( max-width: 415px ) {
    #details-container .asset-content {
        flex-direction: column;

        .author-container {
            width: 100%;
            justify-content: center;
        }

        .button-container {
            margin-top: 10px;
            width: 100%;
            justify-content: center;
        }
    }
}


/* ##############################################################
# Footer
############################################################## */
.footer {
    /* padding: 1.125rem 0; */
    text-align: center;
    background: #242426;

    .pull-center {
        display: inline-block;
        float: none;
    }
    
    .pull-right {
        float: right;
    }

    .footer-container {
        padding: 20px 15px 20px;
        border-bottom: solid 1px #f2f2f280;

        .footer-brand {
            float: left;
            text-decoration: none;
            /* font-size: 0.875rem;
            line-height: 44px; */
    
            .logo-name {
                height: 35px;
                font-size: 30px;
                font-weight: 700;
                color: #F6DE02;
            }
      
            .logo-by {
                font-size: 10px;
                font-weight: 300;
                color: #F1F1F1;
                text-align: left;
            }
        }

        .footer-nav li {
            display: inline-block;
        }
            
        .footer-nav li a {
            padding: 0 10px;
            font-size: 15px;
            font-weight: 700;
            color: #F6DE02;
            text-decoration: none;
        }
            
        .footer-nav li a:hover {
            text-decoration: none;
        }

        .policy-term li {
            display: inline-block;
        }
            
        .policy-term li a {
            padding: 0 5px;
            font-size: 13px;
            font-weight: 400;
            line-height: normal;
            text-decoration: underline;
            color: #F1F1F1;
        }
            
        .policy-term li a:hover {
            text-decoration: underline;
        }
    }

    .footer-bottom {
        padding: 20px 15px;
        text-align: center;
    }

    .copyright-by {
        font-size: 12px;
        font-weight: 400;
        color: #F1F1F1;

        span {
            transition: 0.3s;
        }
    }
}
  
.footer:after {
  display: table;
  clear: both;
  content: " ";
}

@media ( max-width: 1199px ) {
    .footer {
        .footer-container {
            padding: 20px 15px 50px;
        }
    }
}

@media ( max-width: 575px ) {
    .footer {
        .footer-container {
            .footer-nav li {
                width: 100%;
            }
        }
    }
}


/* ##############################################################
# Login, Forgot Password & Register
############################################################## */
.login-body, .forgot-body, .register-body {
    min-height: 100vh;
    background-image: url( '../../assets/images/backgrounds/bg-login.png' );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;

    .container {
        padding: 12px;
        height: 100vh;
        display: flex;
        overflow: scroll;
    }

    .login-container, .forgot-container, .register-container {
        margin: auto;
        padding: 30px;
        width: 420px;
        border-radius: 10px;
        background: #1C1C1E;
        box-shadow: 0px 0px 50px 10px rgba( 0, 0, 0, 0.05 );

        .header {
            .title {
                font-size: 35px;
                font-weight: 700;
                line-height: 1;
                text-transform: uppercase;
                color: #F6DE02;
            }

            .logo-by {
                font-size: 10px;
                font-weight: 300;
                line-height: 1;
                text-transform: uppercase;
                color: #F1F1F1;
            }
            
            .sub-title {
                margin-top: 30px;
                font-size: 20px;
                font-weight: 500;
                line-height: 1.15;
                color: #F1F1F1;
            }
            
            .text {
                font-size: 15px;
                font-weight: 300;
                line-height: 1.15;
                color: #999;
            }
        }

        .form-body {
            .form {
                margin: 25px 0 0;
                padding: 0;
                width: 100%;

                .form-field {
                    width: 100%;
                    background-color: #1C1C1E;

                    .field-label {
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 1.15;
                        text-transform: uppercase;
                        color: #999;
                    }

                    .required {
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 1.15;
                        color: #FF3E1D;
                    }

                    .field-forgot {
                        font-size: 15px;
                        font-weight: 400;
                        line-height: 1.15;
                        text-transform: capitalize;
                        color: #F6DE02;
                        text-decoration: none;
                        justify-content: flex-end;
                        cursor: pointer;
                    }

                    .field-forgot:hover {
                        color: #F1F1F1;
                    }

                    .form-group {
                        margin-top: 10px;
                        margin-bottom: 20px;

                        .input-group {
                            .form-control {
                                height: 40px;
                                border-radius: 5px;
                                border: solid 1px #434343;
                                color: #F1F1F1;
                                background-color: #242426;

                                &.form-password {
                                    border-radius: 5px 0 0 5px;
                                    border-right: none;
                                }
                            }

                            .form-control::placeholder {
                                color: #999;
                                opacity: 0.7; 
                            }
                            
                            .form-control:focus {
                                border: solid 1px #F6DE02;
                                box-shadow: 0 0 3px #F6DE02 !important;
                                /* outline-offset: 0px !important;
                                outline: none !important; */
                            }

                            .input-group-append .input-group-text {
                                height: 40px;
                                border-radius: 0 5px 5px 0;
                                border: solid 1px #434343;
                                border-left: none;
                                background-color: #242426;

                                i {
                                    font-size: 25px;
                                    color: #999;
                                }
                            }
                        }
                    }

                    .dropdown-view {
                        .dropdown {
                            width: 100%;

                            .dropbtn {
                                margin: 10px 0 20px;
                                padding: 6px 12px;
                                width: 100%;
                                height: 40px;
                                border-radius: 5px;
                                border: solid 1px #434343;
                                background-color: #242426;
                                display: flex;
                                justify-content: space-between;
                                cursor: pointer;

                                span {
                                    margin: auto 0;
                                    font-size: 16px;
                                    font-weight: 500;
                                    line-height: 1.15;
                                    color: #999;
                                    text-align: left;
                                    pointer-events: none;
                                }

                                .icon-down {
                                    margin: auto 0;
                                    font-size: 25px;
                                    font-weight: 500;
                                    color: #F1F1F1;
                                    justify-self: end;
                                    pointer-events: none;
                                }
                            }

                            .dropdown-content {
                                width: 100%;
                                border-radius: 5px;

                                a {
                                    font-size: 16px;
                                    font-weight: 500;
                                    line-height: 1.15;
                                    color: #1C1C1E;
                                }
                            }
                        }
                    }

                    .btn {
                        margin-top: 10px;
                        width: 100%;
                        height: 50px;
                        font-size: 20px;
                        font-weight: 500;
                        line-height: 1.15;
                        padding: 15px 30px;
                        border: none;
                        border-radius: 5px;
                        transition: 0.5s;
                
                        &.btn-login, &.btn-forgot, &.btn-register {
                            color: #1C1C1E;
                            background: #F6DE02;
                        }
                    
                        &.btn-login:hover, &.btn-forgot:hover, &.btn-register:hover {
                            background: #F1F1F1;
                        }
                    }

                    .create-account, .back-home, .back-login, .already-register {
                        margin-top: 10px;
                        display: flex;
                        justify-content: center;

                        .text-new, .text-already {
                            font-size: 15px;
                            font-weight: 300;
                            line-height: 1.15;
                            color: #999;
                        }

                        .text-create, .text-login {
                            font-size: 15px;
                            font-weight: 400;
                            line-height: 1.15;
                            text-decoration: none;
                            color: #F6DE02;
                            cursor: pointer;
                        }

                        .text-create:hover, .text-login:hover {
                            color: #F1F1F1;
                        }

                        .icon-back {
                            margin: auto 0;
                            font-size: 20px;
                            color: #F6DE02;
                        }

                        .text-back {
                            margin: auto auto auto 5px;
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 1.15;
                            text-decoration: none;
                            color: #F6DE02;
                            cursor: pointer;
                        }
                    }

                    .back-home div:hover, .back-login div:hover {
                        .icon-back, .text-back {
                            color: #F1F1F1;
                        }
                    }

                    .create-account, .back-login {
                        margin-top: 15px;
                    }

                    .already-register {
                        height: calc( 100% - 10px );
                        justify-content: start;

                        div {
                            margin: auto 0;
                        }
                    }
                }
            }
        }
    }

    .register-container {
        width: 800px;
    }
}

@media ( min-width: 2000px ) {
    .login-body, .forgot-body, .register-body {
        .login-container, .forgot-container, .register-container {
            padding: 60px;
            width: 720px;
            border-radius: 20px;

            .header {
                .title {
                    font-size: 65px;
                    font-weight: 900;
                    /* line-height: 1.25; */
                }

                .logo-by {
                    font-size: 20px;
                    font-weight: 300;
                    /* line-height: 1.25; */
                    text-transform: uppercase;
                    color: #F1F1F1;
                }
                
                .sub-title {
                    margin-top: 40px;
                    font-size: 30px;
                    font-weight: 700;
                    line-height: 1.25;
                }
                
                .text {
                    font-size: 25px;
                    font-weight: 400;
                    line-height: 1.25;
                }
            }
    
            .form-body {
                .form {
                    margin: 35px 0 0;
    
                    .form-field {
                        .field-label {
                            font-size: 26px;
                            font-weight: 500;
                            line-height: 1.25;
                        }
    
                        .field-forgot {
                            font-size: 25px;
                            font-weight: 400;
                            line-height: 1.25;
                        }
    
                        .form-group {
                            margin-top: 20px;
                            margin-bottom: 30px;
    
                            .input-group {
                                .form-control {
                                    height: 60px;
                                    font-size: 25px;
                                    border-radius: 10px;
                                    border: solid 2px #434343;
    
                                    &.form-password {
                                        border-radius: 10px 0 0 10px;
                                    }
                                }
                                
                                .form-control:focus {
                                    border: solid 2px #F6DE02;
                                }
    
                                .input-group-append .input-group-text {
                                    height: 60px;
                                    border-radius: 0 10px 10px 0;
    
                                    i {
                                        font-size: 30px;
                                    }
                                }
                            }
                        }
                        
                        .dropdown-view {
                            .dropdown {
                                .dropbtn {
                                    margin: 20px 0 30px;
                                    height: 60px;
                                    border-radius: 10px;
                                    border: solid 2px #434343;
    
                                    span {
                                        font-size: 25px;
                                    }
    
                                    .icon-down {
                                        font-size: 35px;
                                    }
                                }

                                .dropdown-content {
                                    width: 100%;
                                    border-radius: 10px;
    
                                    a {
                                        padding: 20px 20px;
                                        font-size: 25px;
                                    }
                                }
                            }
                        }
    
                        .btn {
                            margin-top: 20px;
                            height: 70px;
                            font-size: 30px;
                            font-weight: 500;
                            line-height: 1.25;
                            padding: 15px 30px;
                            border-radius: 10px;
                        }
    
                        .create-account, .back-home, .back-login, .already-register {
                            margin-top: 20px;
    
                            .text-new, .text-already {
                                font-size: 25px;
                                font-weight: 300;
                                line-height: 1.25;
                            }
    
                            .text-create, .text-login {
                                font-size: 25px;
                                font-weight: 400;
                                line-height: 1.25;
                            }

                            .icon-back {
                                font-size: 30px;
                            }
    
                            .text-back {
                                margin: auto auto auto 10px;
                                font-size: 26px;
                                line-height: 1.25;
                            }
                        }

                        .create-account, .back-login {
                            margin-top: 25px;
                        }

                        .already-register {
                            height: calc( 100% - 20px );
                            justify-content: start;
    
                            div {
                                margin: auto 0;
                            }
                        }
                    }
                }
            }
        }

        .register-container {
            width: 1400px;
        }
    }
}

@media ( max-width: 991px ) {
    .register-body .register-container .form-body .form .form-field .already-register {
        margin-top: 15px;
        height: calc( 100% - 15px );
        justify-content: center;
    }
}

#tooglePassword, #tooglePasswordConfirm {
    cursor: pointer;
}

#login, #register {
    color: #F6DE02 !important;
    border: solid 1px #434343 !important;
    background-color: #242426 !important;
}