.box {
    background-color: #FFFFFF;
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);

    & .header {
        margin-bottom: 1rem;
        & h4 {
            font-size: 1.25rem !important;
            font-weight: 700;
            line-height: 24px;
        }
    }

    & .body {
        display: flex;
        flex-direction: column;
        row-gap: 0.75rem;

        & .list {
            display: flex;
            flex-direction: row;
            column-gap: 1rem;
            align-items: center;

            & .circle {
                width: 20px;
                height: 20px;
                border-radius: 99999px;
            }

            & .text {
                font-size: 0.875rem !important;
                font-weight: 500;
                line-height: 16px !important;
            }
        }

        & .list-progress {
            display: flex;
            flex-direction: column;
            row-gap: 1rem;

            & .list {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }

            & .progress-bar {
                height: 2.5rem;
                background-color: rgba(55, 92, 180, 1);
            }
        }

        & .text-lg {
            font-size: 1.875rem !important;
            line-height: 36px !important;
        }
    }
}

#main-dashboard {
    & div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: flex-end !important;
    }

    & .datepicker-dropdown {
        top: 201px !important;
        left: 970px !important;
    }

    #posisi-project {
        .header h4 {
            font-size: 14px !important;
            font-weight: 600;
            line-height: 17px;
            margin-bottom: 0;
        }

        .body {
            & ul {
                position: relative;
                height: 100%;
                padding: 0;
                margin: 0;
                list-style: none;

                &::after {
                    content: "";
                    position: absolute;
                    width: 1px;
                    left: 7px;
                    margin-left: -1px;
                    top: 0;
                    height: calc(100% - 30px);
                    background-color: rgba(133, 133, 133, 1);
                    margin-top: 4px;
                    z-index: 1;
                }

                & li {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 1.5rem;

                    & .circle-base {
                        height: 12px;
                        width: 12px;
                        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
                        background-color: rgba(241, 241, 241, 1);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 999px;
                        z-index: 2;

                        & .circle-orange {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(255, 140, 0, 1);
                            border-radius: 999px;
                        }

                        & .circle-blue {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(58, 134, 255, 1);
                            border-radius: 999px;
                        }

                        & .circle-pink {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(255, 0, 110, 1);
                            border-radius: 999px;
                        }

                        & .circle-yellow {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(255, 190, 11, 1);
                            border-radius: 999px;
                        }

                        & .circle-green {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(42, 157, 143, 1);
                            border-radius: 999px;
                        }

                        & .circle-purple {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(155, 93, 229, 1);
                            border-radius: 999px;
                        }

                        & .circle-teal {
                            height: 8px;
                            width: 8px;
                            background-color: rgba(38, 70, 83, 1);
                            border-radius: 999px;
                        }
                    }

                    & span {
                        font-size: 13px !important;
                        font-weight: 400;
                        line-height: 15px;
                    }
                }
            }
        }
    }

    & #table-project.table-hover tbody tr td {
        cursor: pointer;
    }
    & #project-aktif,
    & #project-non-aktif {
        max-height: 148px;
    }

    & #project-aktif .header h4,
    & #project-non-aktif .header h4 {
        font-size: 13px !important;
        font-weight: 400;
        line-height: 15px;
        margin-bottom: 0;
    }

    & #project-aktif .body,
    & #project-non-aktif .body{
        & h1 {
            font-size: 40px !important;
            font-weight: 500;
            line-height: 48px;
            margin-bottom: 0;
            padding: 0;
        }

        & p {
            font-size: 13px !important;
            font-weight: 600;
            line-height: 15px;
            margin-bottom: 0;
        }
    }

    & #daftar-project .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        & h4 {
            font-size: 14px !important;
            font-weight: 600;
            line-height: 17px;
            margin-bottom: 0;
        }

        & #btn-tambah-project {
            background-color: rgba(55, 92, 180, 1);
            color: #FFFFFF;
            outline: none;
            border: none;
            box-shadow: none;
            padding: 0.5rem;
            border-radius: 8px;

            &:active {
                background-color: rgba(55, 103, 170, 1);
            }
        }

        & .search-input {
            outline: none;
            border: 1px solid rgba(133, 133, 133, 1);
            border-radius: 100px;
            padding: 0.5rem 0.5rem 0.5rem 0.75rem;
        }
    }

    #chart-tagihan .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        & h4 {
            font-size: 13px !important;
            font-weight: 400;
            line-height: 15px;
            margin-bottom: 6px;
        }

        & p {
            margin-bottom: 0;
            color: rgba(133, 133, 133, 1);
            font-weight: 400;
            font-size: 10px !important;
            line-height: 12px;
        }

        & #nav-tagihan-chart {
            background-color: rgba(241, 241, 241, 1);
            border-radius: 100px;
            padding: 3px;
            border: none;

            & .nav-item {
                padding: 2px 8px;
                & .nav-link {
                    font-size: 8px !important;
                    font-weight: 400;
                    padding: 2px 8px;
                    &.active {
                        border: none;
                        background-color: rgba(55, 92, 180, 1);
                        color: #FFFFFF;
                        border-radius: 100px;

                        &::before {
                            background: transparent;
                            height: 0;
                            width: 0;
                        }
                    }
                }
            }
        }
    }

    & #daftar-project {
        & #table-project thead tr th {
            padding-right: 0 !important;
        }
    }

    & #reminder-project .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        & h4 {
            font-size: 20px !important;
            font-weight: 500;
            line-height: 24px;
            margin-bottom: 0;
        }

        & #datepicker-button {
            background-color: #FFFFFF;
            outline: none;
            box-shadow: none;
            border: none;
            padding: 0.25rem;
            border-radius: 8px;

            &:hover {
                background-color: #e5e5e5;
            }
        }
    }

    & #reminder-project .body {
        display: flex;
        flex-direction: column;
        column-gap: 0.5rem;

        & .reminder-box {
            display: flex;
            flex-direction: row;
            column-gap: 1.5rem;
            background-color: rgba(55, 92, 180, 1);
            border-radius: 8px;
            padding: 1rem 1.25rem;

            &.deadline {
                background-color: rgba(255, 0, 0, 1);
            }
        }
    }
}

#alert-permission-notification {
    position: fixed;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
    border-radius: 0.5em;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 30em;
    padding: 1.5em;
    z-index: 9999;
    display: flex;
    flex-direction: column;

    & h2 {
        font-size: 1em !important;
        font-weight: bold;
    }
}