:root {
    --bg-color: #1d2125;
    /* Default Dark Mode Background */
    --text-color: #f7f8f9;
    --text-no-file: white;
    --file-folder: #e0e0e0;
    --file-folder-shadow: rgba(68, 55, 53, 0.3);
    --progress-body-bg: #2d2d2d;
    --progress-box-shadow: rgba(255, 255, 0, 0.5);
    --bg-card: #161a1d;
    /* Default Dark Mode Text */
    --border-color: #32363d;
    --icon-mi1: url("../icon/icon-mi-1.svg");
    --icon-mi1a: url("../icon/icon-mi-1-a.svg");
    --icon-mi2: url("../icon/icon-mi-2.svg");
    --icon-mi2a: url("../icon/icon-mi-2-a.svg");
    --icon-mi3: url("../icon/icon-mi-3.svg");
    --icon-mi3a: url("../icon/icon-mi-3-a.svg");
    --icon-mi4: url("../icon/icon-mi-4.svg");
    --icon-mi4a: url("../icon/icon-mi-4-a.svg");
    --icon-mi5: url("../icon/icon-mi-5.svg");
    --icon-mi5a: url("../icon/icon-mi-5-a.svg");
    --icon-mi6: url("../icon/icon-mi-6.svg");
    --icon-mi6a: url("../icon/icon-mi-6-a.svg");
}

/* Light Mode Styles */
.light-mode {
    --bg-color: #f7f8f9;
    --text-color: #1d2125;
    --text-no-file: #575757;
    --file-folder: #d5dbdd;
    --file-folder-shadow: rgba(146, 146, 146, 0.8);
    --progress-body-bg: #f7f8f9;
    --progress-box-shadow: rgba(0, 0, 0, 0.5);
    --bg-card: #f1f2f4;
    --border-color: #b9c1d0;
    --icon-mi1: url("../icon/operation-standard-active.svg");
    --icon-mi1a: url("../icon/icon-mi-1-a.svg");
    --icon-mi2: url("../icon/safety-active.svg");
    --icon-mi2a: url("../icon/icon-mi-2-a.svg");
    --icon-mi3: url("../icon/layout-information-active.svg");
    --icon-mi3a: url("../icon/icon-mi-3-a.svg");
    --icon-mi4: url("../icon/structure-active.svg");
    --icon-mi4a: url("../icon/icon-mi-4-a.svg");
    --icon-mi5: url("../icon/information-active.svg");
    --icon-mi5a: url("../icon/icon-mi-5-a.svg");
    --icon-mi6: url("../icon/technology-active.svg");
    --icon-mi6a: url("../icon/icon-mi-6-a.svg");
}

.main-grid {
    display: grid;
    grid-template-areas:
        "card-1 card-7"
        "card-2 card-7"
        "card-3 card-7"
        "card-4 card-7"
        "card-5 card-7"
        "card-6 card-7";
    grid-template-columns: 20% 79.5%;
    grid-template-rows: 14.7vh 14.7vh 14.7vh 14.7vh 14.7vh 14.7vh;
    grid-gap: 0.5rem;
}

@media screen and (height: 1080px), screen and (height: 1076px) {
    .main-grid {
        grid-template-rows: 14.8vh 14.8vh 14.8vh 14.8vh 14.8vh 14.8vh;
    }
}

.card-1 {
    grid-area: card-1;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    cursor: pointer;
}

.card-1:hover,
.card-1.active,
.card-2:hover,
.card-2.active,
.card-3:hover,
.card-3.active,
.card-4:hover,
.card-4.active,
.card-5:hover,
.card-5.active,
.card-6:hover,
.card-6.active {
    background: var(--bg-card);
}

.card-1 i {
    content: var(--icon-mi1);
    width: 2rem;
    margin-bottom: 0.5rem;
}

.card-1:hover i,
.card-1.active i {
    content: var(--icon-mi1a);
}

.card-2 {
    grid-area: card-2;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    cursor: pointer;
}

.card-2 i {
    content: var(--icon-mi2);
    width: 2rem;
    margin-bottom: 0.5rem;
}

.card-2:hover i,
.card-2.active i {
    content: var(--icon-mi2a);
}

.card-3 {
    grid-area: card-3;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    cursor: pointer;
}

.card-3 i {
    content: var(--icon-mi3);
    width: 2rem;
    margin-bottom: 0.5rem;
}

.card-3:hover i,
.card-3.active i {
    content: var(--icon-mi3a);
}

.card-4 {
    grid-area: card-4;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    cursor: pointer;
}

.card-4 i {
    content: var(--icon-mi4);
    width: 2rem;
    margin-bottom: 0.5rem;
}

.card-4:hover i,
.card-4.active i {
    content: var(--icon-mi4a);
}

.card-5 {
    grid-area: card-5;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    cursor: pointer;
}

.card-5 i {
    content: var(--icon-mi5);
    width: 2rem;
    margin-bottom: 0.5rem;
}

.card-5:hover i,
.card-5.active i {
    content: var(--icon-mi5a);
}

.card-6 {
    grid-area: card-6;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    cursor: pointer;
}

.card-6 i {
    content: var(--icon-mi6);
    width: 2rem;
    margin-bottom: 0.5rem;
}

.card-6:hover i,
.card-6.active i {
    content: var(--icon-mi6a);
}

.card-7 {
    grid-area: card-7;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 0.5rem;
    position: relative;
}

.image-show {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
}

.back-image-list {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: auto;
    height: auto;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 0.3rem 1rem;
    border-radius: 0.3rem;
    color: var(--text-color);
    cursor: pointer;
    font-family: "Poppins Medium";
    z-index: 9;
}

.back-image-list:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border: 1px solid var(--text-color);
}

.card-btn-next {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: auto;
    height: auto;
    z-index: 9;
}

.btn-next-media {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 0.3rem 1rem;
    border-radius: 0.3rem;
    color: var(--text-color);
    cursor: pointer;
    font-family: "Poppins Medium";
}

.btn-prev-media {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 0.3rem 1rem;
    border-radius: 0.3rem;
    color: var(--text-color);
    cursor: pointer;
    font-family: "Poppins Medium";
}

.btn-next-media:hover,
.btn-prev-media:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

.card-idenditas-image {
    position: absolute;
    width: auto;
    height: auto;
    bottom: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.judul-information-img {
    width: 100%;
    font-size: 1.5rem;
    font-family: "Poppins Medium";
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.title-information-img {
    width: 100%;
    font-size: 1rem;
    font-family: "Poppins Medium";
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.date-information-img {
    width: 100%;
    font-size: 1rem;
    font-family: "Poppins Medium";
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.conyright-text {
    position: absolute;
    width: auto;
    margin: 0rem;
    right: 1.2rem;
    bottom: 1rem;
    color: var(--text-color);
    font-size: 0.8rem;
    font-family: "Poppins Italic";
}

.text-judul-name {
    font-family: "Poppins Medium";
    color: var(--text-color);
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 0rem;
}

.btn-upload {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.2rem;
    padding: 0.5re 1rem;
    background: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    font-family: "Poppins Medium";
    color: var(--bg-color);
}

.btn-upload:hover {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.btn-add-folder {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.2rem;
    padding: 0.5re 1rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-family: "Poppins Medium";
    color: var(--text-color);
    font-weight: bold;
}

.btn-add-folder:hover {
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.search-input {
    position: absolute;
    top: 0.85rem;
    right: 4.1rem;
    font-size: 1.2rem;
    padding-left: 10px;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 0.3rem;
    font-family: "Poppins Medium";
    color: var(--text-color);
    font-weight: bold;
}
#searchFile {
    position: absolute;
    top: 0.85rem;
    right: 9rem;
    font-size: 1.2rem;
    padding-left: 10px;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 0.3rem;
    font-family: "Poppins Medium";
    color: var(--text-color);
    font-weight: bold;
}

.card-1:hover .text-judul-name,
.card-1.active .text-judul-name,
.card-2:hover .text-judul-name,
.card-2.active .text-judul-name,
.card-3:hover .text-judul-name,
.card-3.active .text-judul-name,
.card-4:hover .text-judul-name,
.card-4.active .text-judul-name,
.card-5:hover .text-judul-name,
.card-5.active .text-judul-name,
.card-6:hover .text-judul-name,
.card-6.active .text-judul-name {
    color: var(--text-color);
}

.thumbnail-folder {
    display: flex;
    width: 12rem;
    height: 12rem;
    cursor: pointer;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    text-align: center;
    color: var(--text-color);
    flex-basis: 20%;
    font-family: "Poppins Medium";
}

.thumbnail-folder .title-main-folder {
    margin-top: auto;
    padding: 0 0 20px 0;
}

.main-folder {
    position: relative;
    width: 10rem;
    height: 7rem;
    margin-top: auto;
    background: var(--text-color);
    border-radius: 0 4px 0 0;
}

.main-folder,
.main-folder:before {
    transition: background 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms;
}

.main-folder:after,
.main-folder:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

.main-folder:after {
    transform: scaleY(1) skewX(-2deg);
    border-radius: 4px 4px 0 0;
    transform-origin: bottom left;
    background: var(--border-color);
    transition: all 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms;
}

.main-folder:before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    height: 10px;
    width: 30%;
    background: var(--text-color);
    border-radius: 2px 6px 0 0;
}

.main-folder .file {
    transform: scale(0.93, 0.94) skewX(-2deg) translate(-2px, 0);
}

.main-folder .file,
.main-folder .file:after,
.main-folder .file:before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--file-folder);
    box-shadow: -1px -1px 1px var(--file-folder-shadow);
}

.main-folder .file:before {
    content: "";
    transform: scale(1, 0.95) skewX(-3deg) translate(1px, 0);
    transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1) 250ms;
}

.main-folder .file:after {
    content: "";
    transform: scale(1, 0.88) skewX(-4deg) translate(3px, 0);
}

.thumbnail-folder:hover .main-folder,
.thumbnail-folder:hover .main-folder:before {
    background: var(--text-color);
}

.thumbnail-folder:hover .main-folder:after {
    transform: scaleY(0.9) skewX(-6deg);
    background: var(--border-color);
}

.thumbnail-folder:hover .main-folder .file:before {
    transform: scale(1, 0.95) skewX(-4deg) translate(15px, -30%) rotate(25deg);
    box-shadow: -1px 1px 1px var(--file-folder-shadow);
}

.thumbnail-folder img {
    width: 90%;
    height: 85%;
    object-fit: cover;
    border-radius: 0.3rem;
}

.thumbnail-folder video {
    width: 90%;
    height: 85%;
    border-radius: 0.3rem;
}

.input-group-text {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.card-action-button {
    top: 0rem;
    width: 100%;
    height: 100%;
    background: #cbcbcb6e;
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
}

.card-action-button.folder {
    background: transparent;
    height: auto;
    top: 50%;
}

.thumbnail-folder:hover .card-action-button {
    opacity: 1;
    visibility: visible;
}

.btn-icon-action {
    color: var(--text-color);
    font-size: 1.5rem;
}

.btn-icon-action:hover {
    color: var(--text-color);
    font-size: 1.5rem;
}

nav .breadcrumb {
    margin-bottom: 0rem !important;
}

nav .breadcrumb .breadcrumb-item,
nav .breadcrumb .breadcrumb-item a {
    font-family: "Poppins Italic";
    color: var(--text-color);
    font-size: 1.2rem;
}

nav .breadcrumb .breadcrumb-item.active {
    font-family: "Poppins Medium";
    color: var(--text-color);
    font-size: 1.2rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: bootstrap-icons !important;
    content: var(--bs-breadcrumb-divider, "\f231");
    color: var(--text-color);
}

.modal-title {
    color: white;
}

.title-no-file {
    font-family: "Poppins Light";
    color: var(--text-no-file);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    width: 100%;
    height: calc(100vh - 140px);
    display: flex;
    align-items: center;

    justify-content: center;
}

.dropzone {
    height: calc(100vh - 140px);
}

.filegrid {
    display: flex;
    flex-direction: row;
    /* gap: 12px; */
    flex-wrap: wrap;
}

.progress-content {
    border-radius: 15px !important;
}

.progress-body {
    background: var(--progress-body-bg);
    color: var(--text-color);
    box-shadow: 2px 3px 5px 0 var(--progress-box-shadow);
}

.card-scroll {
    /* max-height: 90vh; */
    overflow: scroll;
}