@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300&family=Ubuntu:wght@500&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");


@font-face{
    font-family:'Noto Sans Javanese';
    src:url('../fonts/jawa/nykNgayogyanNew.eot');
    src:url('../fonts/jawa/nykNgayogyanNew.eot?#iefix') format('embedded-opentype'), url('../fonts/jawa/nykNgayogyanNew.woff2') format('woff2'),url('../fonts/jawa/nykNgayogyanNew.woff') format('woff'),url('../fonts/jawa/nykNgayogyanNew.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-display:swap
}

@font-face {
    font-family: 'Noto Sans Sundanese';
    src: url('../fonts/sunda/NotoSansSundanese-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Buginese';
    src: local("ᨀᨁᨂ"), url('../fonts/bugis/NotoSansBuginese.eot'), url('../fonts/bugis/NotoSansBuginese.eot?#iefix') format('embedded-opentype'), url('../fonts/bugis/NotoSansBuginese.woff') format('woff'), url('../fonts/bugis/NotoSansBuginese.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans Balinese';
    src: local("ᬳᬓ᭄ᬲᬭᬩᬮᬶ"),
         url('../fonts/bali/NotoSansBalinese-Regular.eot'),
         url('../fonts/bali/NotoSansBalinese-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bali/NotoSansBalinese-Regular.woff') format('woff'),
         url('../fonts/bali/NotoSansBalinese-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans Batak';
    src: local("ᯅᯖᯂ᯳"), 
        url('../fonts/batak/NotoSansBatak-Regular.eot'), 
        url('../fonts/batak/NotoSansBatak-Regular.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/batak/NotoSansBatak-Regular.woff') format('woff'), 
        url('../fonts/batak/NotoSansBatak-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AksaraLampung';
    src: url('../fonts/lampung/aksara-Lampung-Unila-v4rev2.ttf') format('truetype');
}
@font-face {
    font-family: 'Incoung';
    src: url("../fonts/incung/Incoung.otf") format("opentype");
    /*src: url('../fonts/incung/Incoung-Regular.ttf') format('truetype');*/
}


@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Candide';
    src: url("../fonts/candide/Candide-Regular.otf") format("opentype");
}
@font-face {
    font-family: 'Candide';
    src: url("../fonts/candide/Candide-Heavy-Italic.otf") format("opentype");
    font-style: italic;
    font-weight: 600;
}
@font-face {
    font-family: 'Candide';
    src: url("../fonts/candide/Candide-Light-Italic.otf") format("opentype");
    font-style: italic;
    font-weight: 200;
}


.clear {
    clear: both;
}
.form-control:focus {
    border-color: #829a4d;
    box-shadow: 0 0 0 .25rem rgba(130,154,77,.25);
}


.wrap-logo {
    position: relative;
    display: block;
    width: 100%;
    margin: 0px auto 35px;
    text-align: center;
}
.main-logo {
    width: 80px;
    height: auto;
}
.main-card {
    max-width: 1024px;
    width: 100%;
    padding: 0px 0px 30px;
    border: 0px;
    box-shadow: none !important;
    margin: 0px auto;
}
h2 .h2main {
    font-family: 'Manrope';
    color: #58585a;
    display: inline-block;
}
h2 .h2sub {
    font-family: 'Candide';
    color: #829a4d;
    display: inline-block;
}
.main-logo-alih-aksara {
    width: 450px;
    max-width: 90%;
    height: auto;
}
.aksara_latin_field {
    outline: 0;
    border-width: 0 0 2px;
    border-radius: 0px;
}
.aksara_latin_field:focus {
    border-radius: 0.375rem;
}
.placeholder_main {
    display: inline-block;
    color: #58585a;
    font-family: "Manrope";
    font-size: 15px;
    font-weight: bold;
}
.placeholder_sub {
    display: inline-block;
    color: #829a4d;
    font-family: "Candide";
    font-size: 28px;
    font-style: italic;
    font-weight: 200;
}

.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 {
    transform: scale(.65) translateY(-.5rem) translateX(.15rem);
}
.form-floating>.form-control, 
.form-floating>.form-control-plaintext, 
.form-floating>.form-select {
    height: calc(4rem + calc(var(--bs-border-width) * 2));
    padding-top: 2em;
}

.salin_info {
    position: absolute;
    top: -10px;
    right: 0;
}
.aksara_view {
    padding: .75rem .75rem;
    line-height: 2.5;
}
.btn_bottom_aksara {
    background-color: #7A9049;
    color: #fff;
}
.btn_bottom_aksara:hover {
    background-color: #67793f;
    color: #fff;
}
.footer_content {
    font-family: 'Candide';
    font-size: 14px;
}

/* ====== CUSTOM CSS ALIH AKSARA ====== */
.aksara-tab {
    gap: 25px;
}
.aksara-tab .nav-item {
    flex-basis: calc(20% - 10px);
}
.aksara-tab .nav-item .nav-link {
    background: #F8F8F8;
}
.aksara-tab .nav-item .nav-link.active {
    background: #DEDEDE;
}

.tab-content textarea {
    resize: none;
}
.aksara_jawa_text { 
    font-family: 'Noto Sans Javanese';
    width: 100%;
    text-align: left;
    font-size: 200%;
}
.aksara_sunda_text {
    font-family: 'Noto Sans Sundanese';
    width: 100%;
    text-align: left;
    font-size: 200%;
}
.aksara_bugis_text {
    font-family: 'Noto Sans Buginese';
    width: 100%;
    text-align: left;
    font-size: 200%;
}
.aksara_bali_text {
    font-family: 'Noto Sans Balinese';
    width: 100%;
    text-align: left;
    font-size: 200%;
}
.aksara_batak_text {
    font-family: 'Noto Sans Batak';
    width: 100%;
    text-align: left;
    font-size: 200%;
}
.aksara_lampung_text {
    font-family: 'AksaraLampung';
    width: 100%;
    text-align: left;
    font-size: 200%;
}
.aksara_incung_text {
    font-family: "Incoung", serif;
    width: 100%;
    text-align: left;
    font-size: 200%;
}

@media only screen and (max-width: 550px) {
    .card-body {
        padding: 0px;
    }
    .aksara-tab .nav-item {
        margin: 0px 8px;
    }
    .wrap-footer-btn {
        text-align: center !important;
    }
    .salin_info {
        left: 0;
        margin: auto;
    }
}
@media only screen and (max-width: 400px) {
    .aksara-tab .nav-item {
        margin: 0px 5px 10px;
        flex-basis: content;
    }
}
@media only screen and (max-width: 380px) {
    .btn_bottom_aksara,
    .btn_bottom_aksara {
        width: 100%;
    }
}