/* login-page-responsive */

@media screen and (min-width : 2001px) {
    #headerMobile {
        display: none;
    }
}

@media screen and (min-width : 1441px) and (max-width : 2000px) {
    #headerMobile {
        display: none;
    }
}

@media screen and (max-width : 1440px) {
    #headerMobile {
        display: none;
    }

    .icon-user,
    .icon-setting {
        padding: 10px;
    }
}

@media screen and (min-width : 1023px) and (max-width : 1440px) {
    #headerMobile {
        display: none;
    }
}

@media screen and (min-width : 769px) and (max-width : 1023px) {
    #headerMobile {
        display: none;
    }

    #input_username::before,
    #input_password::before {
        top: 0.25vh;
    }

    .dropdown-menu li {
        top: -3px;
    }
}


@media screen and (max-width : 768px) {
    .container-login {
        position: relative;
        /* height: 120%; */
    }

    .container-content-login-card {
        width: 350px;
        height: 450px;
    }

    .icon-setting-mobile,
    .icon-user-mobile {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .card-login {
        width: 100%;
    }

    #headerMobile {
        display: flex;
    }

    .side-card {
        display: none;
    }

    #navbar {
        display: none;
    }

    #header {
        display: none;
    }

    .container-content {
        width: 100%;
    }

    .image-background-container {
        position: absolute;
        width: 100vw;
        height: 100vh;
        margin-bottom: 1vh;
        left: 0;
        overflow: hidden;
        z-index: -100;
        border: 0;
        outline: none;
    }

    @keyframes animation-matrix {
        0% {
            transform: matrix(1, 0, 0, 1, 0, 0);
        }

        50% {
            transform: matrix(1.025, 0, 0, 1.025, 5, 5);
        }

        100% {
            transform: matrix(1, 0, 0, 1, 0, 0);
        }
    }


    .image-background-container::before {
        width: 100%;
        height: 50%;
        transform: translate(0vw, 49.9vh);
        background: linear-gradient(to bottom,
                rgb(247, 247, 247) 0%,
                rgba(247, 247, 247, 0.95) 5%,
                rgba(247, 247, 247, 0.9) 10%,
                rgba(247, 247, 247, 0.7) 20%,
                rgba(247, 247, 247, 0.4) 50%,
                rgba(247, 247, 247, 0.1) 85%,
                rgba(247, 247, 247, 0) 100%);
        border: 0;
        outline: none;
    }

    .kilomedia-background {
        filter: brightness(80%);
        transform: translate(0vw, 50vh);
        width: clamp(0px, 100%, 2000px);
        height: clamp(0px, 50%, 1000px);
        border: 0;
        outline: none;
    }

    .text-home-container {
        margin-top: clamp(0px, 15vh, 500px);
        margin-left: clamp(0px, 5vh, 300px);
    }

    .sosmed-container {
        margin-left: clamp(0px, 5vh, 300px);
    }

    .type-text {
        top: 0px;
    }

    .list-dropdown {
        max-height: 20px;
    }

    .dropdown-btn {
        border-radius: 0px;
        width: clamp(60px, 100%, 165px);
        height: clamp(17.5px, 4.5vh, 20px);
    }

    .btn-jurnal {
        height: clamp(17.5px, 4.5vh, 20px);
    }

    .btn-dropdown-jurnal {
        margin: 0;
        width: clamp(60px, 10vw, 165px);
        height: clamp(17.5px, 4.5vh, 22.5px);
    }

    .dropdown-menu li {
        top: -1px;
        height: clamp(15px, 3vh, 40px);
    }

    .btn-dropdown-jurnal:hover {
        transform: scale(1, 1);
    }

    .table-jurnal thead th,
    .table-jurnal tbody td {
        padding: clamp(5px, .775vh, 15px) clamp(0px, .5vw, 8px);
    }

    .number-collumn-jurnal {
        width: clamp(0px, 5vw, 30px);
    }

    .username-collumn-jurnal {
        width: clamp(20px, 0vw, 175px);
    }

    .startend-collumn-jurnal {
        width: clamp(45px, 10vw, 55px);
    }

    .duration-collumn-jurnal {
        width: clamp(40px, 5vw, 150px);
    }

    .description-collumn-jurnal {
        width: 60vw;
    }
}

@media screen and (max-width : 550px) {
    .container-content-login-card {
        margin-bottom: 12.5vh;
    }
}

@media screen and (max-width : 426px) {
    .container-header-mobile {
        max-height: 57.5px;
    }

    .icon-setting-mobile,
    .icon-user-mobile {
        width: 17.5px;
        height: 17.5px;
        font-size: 7.5px;
    }

    .container-login {
        position: relative;
        /* height: 110%; */
    }

    .container-content-login-card {
        width: 300px;
        height: 400px;
    }

    .title {
        font-size: 40px;
    }

    .description {
        font-size: 12.5px;
    }

    .message {
        font-size: 12.5px;
    }

}

@media screen and (max-width : 100px) {}


/* header */

/* navbar */

/* page-home */
/* 
@media screen and (max-width : 1440px) {
    .text-home-container {
        left: 35vh;
        }
        
        .description-welcome-login {
            font-size: 20px;
    }
}

@media screen and (max-width : 1024px) {
    .text-home-container {
        left: 25vh;
        width: 90vh;
    }

    .title-welcome-login {
        font-size: 27.5px;
    }

    .description-welcome-login {
        font-size: 17.5px;
    }

    .title-type-text {
        font-size: 22.5px;
    }

    .type-text {
        font-size: 22.5px;
    }
}

@media screen and (max-width : 768px) {
    .text-home-container {
        left: 30vh;
        width: 80vh;
    }

    .title-head-navbar {
        font-size: 17.5px;
    }

    .link-description {
        font-size: 12.5px;
    }

    .icon {
        font-size: 13px;
    }

    .title-welcome-login {
        font-size: 20px;
    }

    .description-welcome-login {
        font-size: 12.5px;
    }

    .title-type-text {
        font-size: 15px;
    }

    .type-text {
        font-size: 15px;
        height: 20px;
    }
}

@media screen and (max-width : 650px) {
    .text-home-container {
        left: 20vh;
        width: 75vh;
    }
}

@media screen and (max-width : 600px) {
    .text-home-container {
        left: 17.5vh;
        width: 75vh;
    }
}

@media screen and (max-width : 550px) {
    .text-home-container {
        left: 15vh;
        width: 75vh;
    }
}

@media screen and (max-width : 500px) {
    .text-home-container {
        left: 5vh;
        width: 75vh;
    }
}

@media screen and (max-width : 426px) {
    .text-home-container {
        left: 10vh;
        width: 60vh;
    }

    .title-head-navbar {
        font-size: 17.5px;
    }

    .link-description {
        font-size: 12.5px;
    }

    .icon {
        font-size: 13px;
    }

    .title-welcome-login {
        font-size: 17.5px;
    }

    .description-welcome-login {
        font-size: 10px;
        margin-top: 2vh;
    }

    .type-text-box {
        left: 27.5%;
    }

    .title-type-text {
        font-size: 15px;
        margin-top: 10px;
    }

    .type-text {
        font-size: 15px;
        height: 20px;
    }

    .container-header {
        left: 20%;
    }

    .container-navbar {
        width: 20%;
    }

    .title-head-navbar {
        font-size: 15px;
    }

    .link-description {
        font-size: 10px;
    }

    .icon {
        font-size: 10px;
    }

    .container-content {
        width: 95%;
    }

    .container-navbar {
        width: 10%;
    }

    .container-header {
        left: 10%;
    }
}

@media screen and (max-width : 376px) {
    .text-home-container {
        left: 7.5vh;
        width: 55vh;
    }
}

@media screen and (max-width : 321px) {
    .text-home-container {
        width: 52.5vh;
        left: 5vh;
    }
} */