@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
    /*--main-clr: #0000fe;
    --main-red-clr: #da2625;
    --main-green-clr: #86c129;
    --light-main-clr: #e5e3ff;*/


    --main-clr: #3a32ad;
    --main-red-clr: #da2625;
    --main-green-clr: #86c129;
    --light-main-clr: #3a32ad;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-clr);
    --bs-btn-border-color: var(--main-clr);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e78a5;
    --bs-btn-hover-border-color: #66b6dd;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3ba1d3;
    --bs-btn-active-border-color: #4a43b0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main-clr);
    --bs-btn-disabled-border-color: var(--main-clr)
}

.bg-blue {
    background-color: rgba(58, 50, 173, 1) !important;
    color: white !important;
}

.nav-design1 {
    font-weight: bold;
    color: black;
}

.text-main{
    color: var(--main-clr);
}

.nav-login-usahawan {
    color: var(--main-clr);
    font-weight: bold;
}

.nav-reg-usahawan {
    color: var(--main-clr);
    font-weight: bold;
    border: 2px solid var(--main-clr);
    border-radius: 5rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

    .nav-reg-usahawan:hover {
        color: white;
        font-weight: bold;
        /*border: 2px solid var(--main-clr);*/
        background-color: var(--main-clr);
        border-radius: 5rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }



@media(min-width: 1277px) {
    .home-hero {
        background-image: url('/Assets/ImgDesign/home-bg-1.jpg');
        width: 100%;
        height: 90vh;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

        .home-hero .home-hero-content {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,.9);
            border-radius: 1rem 1rem;
            padding: 3rem 1rem;
            max-width: 40%;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

            .home-hero .home-hero-content .home-hero-ttl {
                font-size: 3rem;
                color: var(--main-clr);
                font-weight: 800;
            }

            .home-hero .home-hero-content .home-hero-line {
                width: 6rem;
                background-color: var(--main-red-clr);
                border-radius: 1rem 1rem;
                min-height: .5rem;
                margin-top: 1rem;
                margin-bottom: 1rem;
            }

            .home-hero .home-hero-content .home-hero-caption {
                font-size: 2rem;
            }
}

@media(min-width: 855px) and (max-width: 1276px) {
    .home-hero {
        background-image: url('/Assets/ImgDesign/home-bg-1.jpg');
        width: 100%;
        height: 80vh;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

        .home-hero .home-hero-content {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,.9);
            border-radius: 1rem 1rem;
            padding: 3rem 1rem;
            max-width: 60%;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

            .home-hero .home-hero-content .home-hero-ttl {
                font-size: 2rem;
                color: var(--main-clr);
                font-weight: 800;
            }

            .home-hero .home-hero-content .home-hero-line {
                width: 6rem;
                background-color: var(--main-red-clr);
                border-radius: 1rem 1rem;
                min-height: .5rem;
                margin-top: 1rem;
                margin-bottom: 1rem;
            }

            .home-hero .home-hero-content .home-hero-caption {
                font-size: 1.5rem;
            }
}

@media(min-width: 488px) and (max-width: 854px) {
    .home-hero {
        background-image: url('/Assets/ImgDesign/home-bg-1.jpg');
        width: 100%;
        height: 70vh;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

        .home-hero .home-hero-content {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,.9);
            border-radius: 1rem 1rem;
            padding: 3rem 1rem;
            max-width: 70%;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

            .home-hero .home-hero-content .home-hero-ttl {
                font-size: 1.7rem;
                color: var(--main-clr);
                font-weight: 800;
            }

            .home-hero .home-hero-content .home-hero-line {
                width: 6rem;
                background-color: var(--main-red-clr);
                border-radius: 1rem 1rem;
                min-height: .5rem;
                margin-top: 1rem;
                margin-bottom: 1rem;
            }

            .home-hero .home-hero-content .home-hero-caption {
                font-size: 1.3rem;
            }
}

@media(min-width: 0px) and (max-width: 487px) {
    .home-hero {
        background-image: url('/Assets/ImgDesign/home-bg-1.jpg');
        width: 100%;
        height: 70vh;
        background-size: cover;
        background-repeat: no-repeat;
        /*position: relative;*/
        text-align: center;
    }

        .home-hero .home-hero-content {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255,255,255,.9);
            border-radius: 1rem 1rem;
            padding: 3rem 1rem;
            width: 90%;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

            .home-hero .home-hero-content .home-hero-ttl {
                font-size: 1.7rem;
                color: var(--main-clr);
                font-weight: 800;
            }

            .home-hero .home-hero-content .home-hero-line {
                width: 6rem;
                background-color: var(--main-red-clr);
                border-radius: 1rem 1rem;
                min-height: .5rem;
                margin-top: 1rem;
                margin-bottom: 1rem;
                margin-right: auto;
                margin-left: auto;
            }

            .home-hero .home-hero-content .home-hero-caption {
                font-size: 1.3rem;
            }
}

.text-ttl {
    font-size: 1.9rem;
    font-weight: bold;
}

.text-line {
    background-color: var(--main-clr);
    border-radius: 1rem 1rem;
    width: 7rem;
    height: .4rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.text-caption {
    font-size: 1.1rem;
    /*font-weight: bold;*/
}

@media(min-width: 481px) {
    .home-about-card {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 1rem 1rem;
        padding: 2rem 1rem;
        border-bottom: 5px solid var(--main-clr);
        height: 100%;
    }
}

@media(max-width: 480px) {
    .home-about-card {
        /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);*/
        border-radius: 1rem 1rem;
        border: 1px solid gray;
        padding: 2rem 1rem;
        border-bottom: 5px solid var(--main-clr);
        height: 100%;
    }
}

.home-about-card .home-about-icon {
    font-size: 2.5rem;
    color: var(--main-clr);
}

.home-about-card .home-about-ttl {
    font-size: 1.1rem;
    font-weight: 800;
    padding-top: 1.5rem;
}

.footer-line {
    background-color: white;
    border-radius: 1rem 1rem;
    width: 5rem;
    height: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.home-bg-footer {
    background-image: url('/Assets/ImgDesign/home-footer.jpg');
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-position: center  top;
}

.crd-dashboard-jmlh-ahli {
    background-color: #cd4989;
    color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .crd-dashboard-jmlh-ahli .icon-dashboard-jmlh-ahli {
        padding: .5rem .4rem;
        font-size: 1.2rem;
    }

    .crd-dashboard-jmlh-ahli .ttl-dashboard-jmlh-ahli {
        color: #fff2f9;
        font-weight: bold;
    }

    .crd-dashboard-jmlh-ahli .tahun-dashboard-jmlh-ahli {
        background-color: white;
        color: #cd4989;
        padding: 1px 1rem;
        border-radius: 1rem;
        font-size: 13px;
        font-weight: bold;
    }

.crd-dashboard-jantina {
    background-color: #7856b6;
    color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .crd-dashboard-jantina .icon-dashboard-jantina {
        padding: .5rem .4rem;
        font-size: 1.2rem;
    }

    .crd-dashboard-jantina .ttl-dashboard-jantina {
        color: #f7f2ff;
        font-weight: bold;
    }

    .crd-dashboard-jantina .tahun-dashboard-jantina {
        background-color: white;
        color: #7856b6;
        padding: 1px 1rem;
        border-radius: 1rem;
        font-size: 13px;
        font-weight: bold;
    }

.crd-dashboard-sektor {
    background-color: #ec8b43;
    color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .crd-dashboard-sektor .icon-dashboard-sektor {
        padding: .5rem .4rem;
        font-size: 1.2rem;
    }

    .crd-dashboard-sektor .ttl-dashboard-sektor {
        color: #fff2e8;
        font-weight: bold;
    }

    .crd-dashboard-sektor .tahun-dashboard-sektor {
        background-color: white;
        color: #ec8b43;
        padding: 1px 1rem;
        border-radius: 1rem;
        font-size: 13px;
        font-weight: bold;
    }

.mycheckbox input[type="checkbox"] {
    margin-right: 5px;
}

.UploadHyperLink {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/*.UploadIcon {*/
    /*margin-top: .8rem !important;*/
/*}*/

.sidebar-drpdwn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.cursor-pointer {
    cursor: pointer !important;
}

.helperMessage{
    font-size: .8rem;
}