:root {
    --base-text-color: #2B2F87;
}

body {
    font-family: "Lato";
    font-weight: 600;
    font-style: normal;
}

.form-public-card {
    color: var(--base-text-color);
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border: 0;
}

.form-public-card .card-header {
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    background-color: #2B2F87;
    text-align: center;
}

.form-public-card .card-body {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    background-color: #E6ECFF;
}

.form-public-card .form-control {
    background-color: #FFF;
}

.form-public-card .form-select {
    background-color: #FFF;
    border: var(--bs-border-width) solid var(--bs-border-color);
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /* border: 1px solid #434346; */
    -webkit-text-fill-color: #000000;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: black;
    opacity: 0.29;
    /* Firefox */
}

.form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: black;
    opacity: 0.29;
    /* Firefox */
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: black;
    opacity: 0.29;
    /* Firefox */
}

.select2-selection.form-select .select2-selection__placeholder {
    color: black;
    opacity: 0.29;
}

.btn-submit {
    background-color: #2196f3;
    height: 60px;
    border: 0;
    border-radius: 10px;
}


.bg-body {
    /* background-image: url('<?= URL('assets/img/bg-header-landing-page.png'); ?>');
    height: 100%;
    width: 100%;
    background-position: center top;
    background-size: 100% auto; */
    /* display: flex; */
    /* position: absolute; */
    width: 100%;
}

.img-bg-body {
    width: 100%;
}

.header-body {
    position: absolute;
    /* top: 0; */
    text-align: center;
    width: 100%;
    /* top:30px; */
    /* top:15%; */
    /* top: 49%; */
    /* justify-content: center; */
    /* transform: translateY(-50%); */
}

.header-body-title {
    font-size: 10pt;
    color: white;
    /* padding-top: 25px; */
}

.header-body-subtitle {
    font-size: 8pt;
    color: white;
}


.card-list-menu {
    height: 175px;
    font-size: 12pt;
    text-align: center;
}

.card-list-menu .card-list-menu-items {
    width: 250px;
    background-color: #2B2F87;
    text-align: center;
    border-radius: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    /* margin-right: 20px; */
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-list-menu .card-list-menu-items img {
    width: 40px;
}

.content-body .row {
    --bs-gutter-x: 0;
}


@media (max-width:480px) {
    .header-title {
        color: white;
        font-size: 14pt;
        font-weight: bold;
    }

    .header-subtitle {
        color: white;
        font-size: 12pt;
    }
}

@media (min-width:481px) {

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .header-body-title {
        font-size: 20pt;
        color: white;
        font-weight: bold;
        /* padding-top: 30px; */
    }

    .header-body-subtitle {
        font-size: 10pt;
        color: white;
        padding-right: 25%;
        padding-left: 25%;
        line-height: 1.5;
    }
}

@media (min-width:641px) {

    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .header-body-title {
        font-size: 28pt;
        color: white;
        font-weight: bold;
        padding-top: 0px;
    }

    .header-body-subtitle {
        font-size: 12pt;
        color: white;
        padding-right: 25%;
        padding-left: 25%;
        line-height: 1.5;
    }
}

@media (min-width:961px) {

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .header-body-title {
        font-size: 40pt;
        color: white;
        font-weight: bold;
        padding-top: 60px;
    }

    .header-body-subtitle {
        font-size: 16pt;
        color: white;
        padding-right: 25%;
        padding-left: 25%;
        line-height: 1.5;
    }
}

@media (min-width:1025px) {

    /* big landscape tablets, laptops, and desktops */
    .header-body-title {
        font-size: 40pt;
        color: white;
        font-weight: bold;
        padding-top: 60px;
    }

    .header-body-subtitle {
        font-size: 16pt;
        color: white;
        padding-right: 25%;
        padding-left: 25%;
        line-height: 1.5;
    }
}


@media (min-width:1281px) {

    /* hi-res laptops and desktops */

    .header-body-title {
        font-size: 52pt;
        color: white;
        font-weight: bold;
        padding-top: 90px;
    }

    .header-body-subtitle {
        font-size: 18pt;
        color: white;
        padding-right: 25%;
        padding-left: 25%;
        line-height: 1.5;
    }
}

.btn-challenge {
    background-color: #2196F3;
    border-color: #2196F3;
}

.page-btn-detail .btn {
    background-color: #2196F3;
    border-color: #2196F3;
}



/* NEW STYLE */

.modal-sidu {}

.modal-sidu .card {
    /* color: #2196F3; */
    border-color: #2196F3;
}

.modal-sidu h1,
.modal-sidu h2,
.modal-sidu h3,
.modal-sidu h4,
.modal-sidu h5,

.modal-sidu h6 {
    color: #2B2F87;
}

.modal-sidu a.close .fa {
    color: #CCC;
    font-size: 2.5rem;
}

.modal-sidu .card img {
    padding: 10px 20px 0 20px;
}

.form-floating-sidu .form-control {
    border-radius: 10px;
    border-color: #2196F3;
}

.form-floating-sidu label {
    color: #2B2F87;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: #2B2F87;
    opacity: 0.7;
    /* color: rgba(var(--bs-body-color-rgb), .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem); */
}

.form-floating-sidu .form-select {
    border-radius: 10px;
    border-color: #2196F3;
}