@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans:wght@300;400&display=swap');

html, body, main {
    font-family: 'Open Sans', sans-serif;
    background-color: whitesmoke;
}
a {text-decoration: none; color:black}
.font-1 {
    font-family: 'Fredoka One', cursive;
}
:root {
    --bg-main :rgba(17,24,39,1);
}
.crs {
    background-color:var(--bg-main);
    padding:20px 0
}

.imgcrs {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: 0px;
    /* aspect-ratio: 9 / 4.29; */
    padding:10px;
    margin:0 5px

}
.imgcrs img {
    width:100%;
    border-radius:10px;
    overflow: hidden;
}

.slick-dotted.slick-slider {
    margin-bottom:40px
}
.slick-dots {
    height:40px;
    background-color:var(--bg-main);
    bottom:-40px;
}

.slick-dots li button:before {
    color:white !important
}
.slick-dots li.slick-active button:before {
    color:white
}
.crs::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #111827;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(17,24,39,0));
    --tw-gradient-to: transparent;
    z-index: 10;
}
.crs::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(to left,var(--tw-gradient-stops));
    --tw-gradient-from: #111827;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(17,24,39,0));
    --tw-gradient-to: transparent;
    z-index: 10;
}
.beli-voucher-murah {
    padding:12px 0;
    text-indent: 20px;
    border-radius:30px;
    
    background-image:url('../img/bg-1.png');
    background-size:30%;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    font-family: 'Fredoka One', cursive;
}

input[type=text].beli-voucher-murah {
    color:purple
}

  .nav-link{
    padding: 0 1em;
    margin: 0 3em;
    border-radius: 2em;
    transition: all .4s;
  }
  
  .nav-link {margin:0 1em}
  section{
    height: 100vh;
  }
  .nav {
    --bs-nav-link-color: black;
  }
  #categoryHeader {
    background-color: white;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    z-index: 25;
  }
  .categoryHeader {
    margin:0 5px;
    background-color:white;
    border:1px solid #cccccc
  }
  
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.ac {
    background-color:var(--bs-blue);
    color:white !important;
    font-size:1rem;
    border:1px solid var(--bs-blue)
}
  
.bxitem {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border-radius:15px;
    border:none;
    padding:10px;
    transition: box-shadow 0.6s;
    background-color:white;
}

.bxitem:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.bxitem img {
    border-radius:10px;
}  
.titcategory, .titbread {
    text-transform: uppercase; 
    margin:1.3em 0;
    font-weight: 700;
}
.titcategory {
    letter-spacing: 1px;
    text-indent:0.5em;
    border-left:3px solid skyblue; 
    font-size:1.3em;
}
.titbread {
    font-size: 1em;
}
.tiitem {font-weight: 700; color:black}

footer .nav-link {
    color:white;
    font-weight:700
}
.mainHeader {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    background-color:white
}

.details {
    border-radius:10px;
    border:1px solid #cccccc;
    overflow: hidden;
    background-color: white;
}

.cattit, .cattit {
    font-size:1em;
    font-weight: 700;
}

.catnum {
    border-radius:0px 0px 10px 0;
    background-color:dodgerblue;
    color:white;
    height:3em;
    width:3.5em;
    text-align: center;
    line-height:3em
}
.cattit {
    height:3em;
    line-height: 3em;
}
.catdesc {
    font-size:0.9em
}

.smallt, .normali {font-size:12px;}
.panel {
    background-repeat: no-repeat;
    background-position: 10px 40%;
    padding:2em 0;
    font-weight: 700;
    text-align:center;
    border-radius:5px;
    border:1px solid dodgerblue
}
.panel:hover {
    cursor: pointer;
    background-color:#2bb6ff; 
    color:white;
    
}
.panel:active, .panelactive {
    background-color:#05a3f7;
    color:white;

}
.panel-payment {
    text-align: right;
    padding-right:10px;
    font-size:1em
}

.Okay {
    border:3px solid red;
}
.disabled, .disabled:hover {
    cursor:not-allowed !important;
    background-color:whitesmoke !important;
    border-color:grey !important; 
    color:#777777 !important;
}
.disabled::after {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    background-color:red
}
.invoice_item {
    padding:10px 0;
    border-bottom:1px dashed #dddddd
}
.invoice_title {
    font-size: 0.9em;
}
.invoice_title, .invoice_content {
    text-transform: uppercase;  
    padding:0 1.5em
}
.invoice_content {
    font-size:1em;
    font-weight: 700;
}