/* Italic: 0
Optical Size: Auto
Width: 100
Weight: 200 – 1000
Lowercase Height: 500

.nunito-sans-<uniquifier> {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
  } */

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
    .sampel{
        font: white;
        background-image: linear-gradient(315deg, #a8a8a8 0%, #ffffff 100%);
    }
    :root{
        font-size: 0.7em;
        letter-spacing: -0.7px;
        font-family: "Poppins", sans-serif;
    }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 0;
    }
    body, a, span, label, div{
        font-family: 'Nunito Sans', sans-serif;
    }
    ._halamanKosong{
        height: 280px;
        background-color: #eff7ff;
    }
    ._halamanKosong div{
        height: 90%;
    } 
    ._header{
        background-color: burlywood;
    }

    /* PUTHI */
    ._colorTemautamaText{
        color: #0A8270;
    }
    ._colorTemautama{
        color: white;
        background-color: #0A8270;
    }
    ._colorTema0{
        background-color: white;
    }
    /* ABU ABU TIPIS */
    ._colorTema1putih{
        background-color: white;
    }
    /* ABU ABU TIPIS */
    ._colorTema2Abuabu{
        background-color: rgb(243, 243, 243);
    }
    ._top{
        height: 50px;
        background-color:white;
    }
    ._slider{
        border-radius: 0 0 50% 50%/100px;
        background-image: linear-gradient(-45deg, #0A8270 0%, #7CFF6B 100%);
    }

    ._sliderscroll{
        border-radius: 30px;
        height: 200px;
        /* max-width: 90%; */
        color:white;
        background-image: linear-gradient(-45deg, #0A8270 0%, #7CFF6B 100%);
    }
    ._title{
        font-weight: 900;
        font-size: 2.4em;
        text-decoration: none;
        color:white;
        font-family: poppins;
    } 
    ._titlegreen{
        font-weight: 900;
        font-size: 2.4em;
        font-family: 'Poppins', sans-serif; /* Make sure to include Poppins font */
        background: linear-gradient(-45deg, #0A8270 0%, #7CFF6B 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
    }   
    ._carouselhead {
        height: 170px;
        margin-bottom: -15px;
    }

    ._carouselheadscroll {
        height: 170px;
        margin-bottom: -15px;
    }
    
    ._carouselhead ._carouselbody{
        
        box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.137);
        width: 85%;
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    ._carouselhead ._carouselbodyscroll{
        width: 85%;
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    

    ._indikator span{
        color: #858585;
        font-weight: 100;
    }
    .btn-menu {
        background-color: #2fa761;
        color: white;
        border-radius: 25%;
        width: 50px;
        height: 50px;
        padding: 0;
        line-height: 40px;
    }
    .btn-menu.active {
        background-color: #24d642;
        border: none; /* Remove the outline */
    }

    @media (max-width: 575px) {
        .btn-menu:focus{
            color:white;
            background-color: #24d642;         
        }
    }

    ._icon{
        width: 50px;
        height: 50px;
    }
    ._menu::-webkit-scrollbar {
        width: 0;
        /* display: none; */
    }
    ._menu {
        width: 100%;
        display: flex;
        overflow-x: auto;
        
    }
    ._menuscroll::-webkit-scrollbar {
        width: 0;
        /* display: none; */
    }
    
    ._emptyelement{
        height: 270px;
    }
    ._bottomspace{
        height: 70px;
    }
    ._itembutton{
        margin-left: 2.0rem;
        margin-right: 2.0rem;
    }
    .container-fluid{
        overflow-x: hidden;
        height: 100vh;
    }
    ._indikator h5,
    ._nilaiIndikator h5{
        font-weight: bold;
    }
    ._nilaiIndikator span{
        font-weight: 600;
        font-size: 1.05em;
    }
    ._up{
        color:#24d642;
    }
    .pulse{
        color:#24d642;
    }
    ._down{
        color:#f33939
    }
    ._itemRow{
        animation: animatey .5s ease-in-out;
        transition: background-color 0.3s ease;
    }
    ._itemRow:focus{
        color:white;
        background-color: #2fa761;      
    }
    /* untuk halaman tabel */    
        
    ._footer{
        color: white;
        height: 55px;
    }
    ._footer i,
    ._footer span {
        color: white;
    }
    /* UNTUK MEDIA BUKAN HP */
    ._footer button:hover i,
    ._footer button:hover span{
        color: #caff67;
    }
    @media (max-width: 575px) {
        ._footer button:focus i,
        ._footer button:focus span {
        color: #caff67;
        }
    }
    @media (max-width: 575px) {
        ._footer button:focus, 
        ._footer button.active {
            background-color: #0A8270;
            border: none;      
        }
    }

    .layerbawah{
        height: 55px;
        font: white;
        background-image: linear-gradient(315deg, #0A8270 0%, #7CFF6B 100%);
        transition: height 0.9s ease, border-radius 0.9s ease;
    }
    .layerbawah.up{
        height: 300px;
        border-radius: 30px 30px 0 0;
        box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.137);
    }

    @keyframes animatey {
        from{
            opacity: 0;
            transform: translateY(50px);
        }
        to{
            opacity: 1;
            transform: translateY(0);
        }
      }
      @keyframes animateO {
          from{
              opacity: 0;
          }
          to{
              opacity: 1;
          }
      }




      /* MODAL? */
      .modal-content{
        border-radius: 30px !important;
      }