*{
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
}
:root{
   --primary-color: #fdf7e6;
   --secondary-color: #575A4B;
   --tertiary-color: #f8e7dd;
   --quaternary-color: #C03221;
   --senary-color: #b4713e;
   --text-color: #F6F1DE;
}

body{
   overflow-x: hidden;
   margin: 0px;
   padding: 0px;
   background: var(--primary-color);
   font-family: Zain;
   font-size: 20px;
   text-align: center;
   
   min-height: 89vh;
   display: grid;
   grid-template-rows: 1fr auto;
}
.centerAbsolute{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: 100%;
    text-align: center;
}
.centerAbsolute2{
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    width: 100%;
    text-align: center;
}
@keyframes popup{
   0%{top: -25%;}
   25%{top: 0;}
   75%{top: 0;}
   100%{top: -25%;}
}
@keyframes input-invalid{
  25%{transform: translateX(3px);}
  50%{transform: translateX(-3px);}
  75%{transform: translateX(3px);}
}
#loginBtn{
   float: right;
   margin-right: 10%;
   padding: 10px 20px;
   border: none;
   background: none;
   font-family: Zain;
   font-size: 22px;
}
#loginBtn:hover{
   background-color: #0000001a !important;
}
#opening {
   font-size: 26px;
   display: grid;
   gap: 30px;
   grid-template-columns: 40% auto;
   width: 80%;
   margin: auto;
   margin-bottom: 5%;
   justify-items: center;
   justify-content: center;
   align-items: center;
   overflow-x: hidden;
}
#opening>div{
   align-content: center;
   align-self: center;
   padding: 10px;
   height: auto;
}
#opening img{
   transition: all 0.3s ease;
   border-radius: 27px;
   border-width: 5px;
   pointer-events: none;
}
#openingText{
   justify-self: left;
}
#openingText>h1{
   font-size: 100px;
   font-weight: normal;
   margin: 0;
   text-align: left;
   line-height: 1;
   animation: rightToLeft .7s ease-out both, fadeIn 0.5s linear both;
}
#openingText>p{
   text-align: justify;
   padding: 20px;
   padding-right: 50px;
   margin-top: 0px;
   font-size: 22px;
   line-height: 1.1;
   color: var(--secondary-color);
   animation: rightToLeft .7s .2s ease-out both, fadeIn 0.5s .2s linear both;
}
.btnPrimary{
   float: right;
   background: var(--quaternary-color);
   color: var(--text-color);
   border: none;
   border-radius: 7px;
   padding: 14px 26px;
   font-size: 17px;
   font-weight: bold;
   font-family: inherit;
   text-decoration: none;
   letter-spacing: 1px;
   cursor: pointer;
}
#hubBtn{
    animation: fadeIn 0.5s linear both, rightToLeft .7s .2s ease-out both;
}
#mockup{
   position: relative;
   width: 90%;
   min-height: 440px;
   perspective: 1000px;
   transform-style: preserve-3d;
   z-index: 5;
   
}
#mockup .themePhoto{
   position: absolute;
   align-self: center;
   justify-self: center;
   height: auto;
   width: 33%;
   opacity: 0;
   transform: translateX(0px);
   transition: all 0.9s ease;
   z-index: 1;
}
#mockup .themePhoto.center{
   transform: translateZ(20px);
   width: calc(40% + 80px);
   margin: 0 -50px;
   opacity: 1;
   z-index: 2;
}
#mockup .themePhoto.center>img{
   border-radius: 34px;
}
#mockup .themePhoto.left{
   transform: translate3d(-77%, 0, -20px) scale(0.8) rotateY(-12deg);
   opacity: 1;
}
#mockup .themePhoto.right{
   transform: translate3d(77%, 0, -20px) scale(0.8) rotateY(12deg);
   opacity: 1;
}
#mockup img{
   width: 80%;
}

#features{
   margin-bottom: 80px;
   padding: 0 20px;
}
.featureCard{
   display: inline-grid;
   background: var(--tertiary-color);
   width: 250px;
   height: 110px;
   padding: 25px;
   margin: 5px;
   text-align: center;
   line-height: 1;
   border-radius: 5px;
   justify-content: center;
}
.featureTitle{
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 10px;
}
.featureDesc{
   font-size: 18px;
   color: var(--secondary-color);
   text-align: justify;
}
.Title{
   font-size: 19px;
   font-weight: normal;
   color: var(--senary-color);
   background: #e1d0a5;
   width: fit-content;
   padding: 4px 19px;
   margin: auto;
}
.subTitle{
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   font-size: 50px;
   font-weight: normal;
   margin: 25px;
   padding: 0 15px;
   line-height: 0.7;
}
.subTitle>hr{
   width: 30%;
   height: 2px;
   border: none;
   background: #686d56de;
}
.subTitle>div{
   background: var(--primary-color);
   position: relative;
   padding: 5px 15px;
   z-index: 2;
}
.subDesc{
   margin: 0;
   margin-bottom: 50px;
   font-weight: normal;
   font-size: 21px;
   color: var(--secondary-color);
   padding: 0 15px;
   line-height: 1.1;
   white-space: pre-line;
}
#theme{
   /* background: var(--secondary-color); */
   /* display: grid; */
   justify-content: center;
   /* grid-template-columns: 200px 1fr;
   grid-gap: 1%; */
   padding: 35px;
   padding-top: 0px;
}
#themeFilter{
   padding-left: 15px;
}
.themeFilterItem{
   cursor: pointer;
   padding: 5px;
   border-radius: 5px;
}
.themeFilterItem:hover:not(.selected){
   border: 1px solid var(--secondary-color);
   padding-left: 5px;
}
.themeFilterItem.selected{
   background-color: var(--quaternary-color);
   color: var(--text-color);
   font-family: ZainBold;
   font-size: 20px;
}
#themeCards{
   display: grid;
   grid-gap: 30px;
   grid-template-columns: repeat(auto-fit, minmax(120px , 220px));
   margin: 15px 15px 77px;
   justify-content: center;
}
.themeCard{
   color: var(--secondary-color);
   border-radius: 7px;
   box-shadow: 4px 3px 10px 0px #cbc8c2;
   text-decoration: none;
   text-align: center;
   transition: all 0.2s;
   padding: 6px;
}
.themeCard:hover{
   box-shadow: 7px 7px 20px 0px #cbc8c2;
}
.themeName{
   font-family: ZainBold;
   font-size: 30px;
   margin-top: 25px;
   /* color: var(--text-color); */
}
.themePhoto>img{
   border-radius: 13px;
   border: 3px solid #131a29;
   border-bottom: 4px solid #131a29;
   box-shadow: 0px 0px 1px 3px #838385;
}
.themePhoto{
   overflow: hidden;
   height: 250px;
   padding: 10px;
   /* background-color: white; */
}

.themeAction a{
   display: inline-block;
   text-decoration: none;
   font-weight: normal;
   margin: 10px 5px;
   padding: 3px;
   width: 30%;
   min-width: 65px;
   border-radius: 7px;
   cursor: pointer;
}
.themeBtnPrimary{
   background: var(--quaternary-color);
   color: var(--text-color);
}
.themeBtnSecondary{
   border: 1px solid var(--quaternary-color);
   color: var(--quaternary-color);
   background: var(--text-color);
}
.themeBtnSecondary:hover{
   background: var(--tertiary-color);
   color: var(--quaternary-color);
}
#pagination{
   height: 40px;
   /* width: 90%; */
}
.page-btn{
   border-radius: 5px;
   padding: 5px 10px;
   cursor: pointer;
}
.page-btn-container{
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.page-btn.active{
   background: var(--quaternary-color);
   color: var(--text-color);
   pointer-events: none;
}
.page-btn:hover{
   color: var(--primary-color);
   background: var(--tertiary-color);
}
.page-btn-secondary{
   width: 0; 
   height: 0; 
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent; 
   
   border-right:25px solid var(--quaternary-color); 
   cursor: pointer;
}
.page-btn-secondary:last-child{
   transform: rotate(180deg);
}
.page-btn-secondary:hover{
   border-right:25px solid var(--tertiary-color);
}
#trial{
   background: var(--tertiary-color);
   padding: 60px 20px;
   margin: 0 -10px;
   text-align: center;
   width: calc(100% - 30px);
}
#trial h2{
   font-size: 50px;
   font-weight: normal;
   margin: 25px;
   line-height: 0.7;
}
#trial .btnPrimary{
   float: none;
   display: block;
   width: fit-content;
   margin: auto;
}
.btnPrimary:hover, .themeBtnPrimary:hover{
   background: #8f2417;
}
footer{
   text-align: center;
   color: var(--secondary-color);
   /* font-family: 'TaiHeritage'; */
   padding: 25px 0;
   font-size: 18px;
}
.inputFail{
   border-color: red !important;
   animation: input-invalid 0.2s;
}
.inputFail:focus-visible{
   outline: red !important;
}

/* halaman dengan table, link.php, rsvp.php */
.autogrid{
   display: grid;
   grid-template-columns: auto auto;
}
.btnTable{
   display: block;
   padding: 0px 20px;
   margin: auto;
   border: none;
   border-radius: 7px;
   background-color: #03522c;
   color: #fff;
}
.btnTable:last-child{
   background-color: red;
   margin-top: 10px;
}
.btnLink>img{vertical-align: middle;}
.btnLink:hover{background: #1b4e23;}
.btnLink{background: #2f873e; min-width: 80px;}
.btnCopy{background: #2f5f87;}
.btnLink, .btnCopy{
   color: #ffffff;
   border: none;
   border-radius: 7px;
   padding: 5px 26px;
   font-size: 14px;
   font-weight: normal;
   font-family: inherit;
   text-decoration: none;
   letter-spacing: 1px;
   cursor: pointer;
}
.popup{
   position: absolute;
   top: -25%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 99;
   padding: 30px 7%;
   width: max-content;
   background-color: white;
   box-shadow: 0px 5px 13px 0px #0000008c;
   border-radius: 0 0 10px 10px;
   font-size: 17px;
   font-weight: normal;
   color: #131a29;
   animation: popup 4s;
}
.popupShade.open{display: block;}
.popupShade{
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 20;
   background-color: #0000004d;
}
.popupModal.open{display: block;}
.popupModal{
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #E2E2FF;
   box-shadow: 0px 0px 10px 0px #979797;
   border-radius: 10px;
   width: 40%;
   min-width: 300px;
   padding: 20px;
   z-index: 22;
}
.popupModal>.closeSideBtn>img{width: 30px;}
.popupModal>.closeSideBtn{
   position: absolute;
   top: 5px;
   right: 5px;
   padding: 3px 0;
   width: 50px;
   background: none;
   border-radius: 5px;
   border: none;
   cursor: pointer;
}
.popupModal>.popupContent{
   text-align: center;
   padding: 25px 0;
}
.popupModal>.popupContent>h4 {
   margin-left: 5%;
   margin-bottom: 30px;
}
.popupModal>.popupContent input{
   display: block;
   width: 90%;
   max-width: 500px;
   height: 30px;
   margin: 10px auto;
   border-radius: 7px;
   border: none;
   padding: 20px;
   font-size: 17px;
   font-family: Zain;
}
.popupModal>.popupContent button:hover{background-color: #002864;}
.popupModal>.popupContent button{
   font-family: Zain;
   font-size: 17px;
   padding: 10px 30px;
   background-color: #0066FF;
   border: none;
   border-radius: 8px;
   margin: auto;
   margin-top: 30px;
   color: white;
   cursor: pointer;
}
#tmpUcapan {
   width: 100%;
   height: 300px;
   border: none;
   border-radius: 10px;
   padding: 10px;
   font-size: large;
}

.pageTitle{
   text-align: left;
   line-height: 0px;
   margin: 3vh 3%;
   margin-bottom: 9vh;
}
.pageContent{
   position: relative;
   background: white;
   padding: 5%;
}
.pageContent table{margin-top: 5%;}
.pageContent td{vertical-align: middle;}
.dt-column-header {text-align: center;}
.dt-control:before {margin-right: 5px !important;}
dl>p{text-align: left;}
input[type = "search"]{
   background-color: #E2E2FF;
   background-position: 10px center;
   background-repeat: no-repeat;
   background-image: url("../svg/search.svg");
   background-size: 18px;
   padding: 0px;
   padding-left: 40px;
   border-radius: 10px;
   font-size: 18px;
   min-height: unset;
   height: min-content;
}
.tableButton.tableData{
   color: black;
   cursor: unset;
}
.tableButton{
   color: #fff;
   border-radius: 10px;
   height: min-content;
   max-width: 250px;
   min-width: 120px;
   width: 20vw;
   padding: 0;
   cursor: pointer;
}
#orderBtn.tableButton{
   background-color: #D9D9D9;
   color: #00000096;
   width: fit-content;
   padding: 0 15px;
   font-size: 15px;
   cursor: unset;
}
#orderBtn.tableButton>div{display: contents;}
#orderBtn.tableButton>p{
   color: #000;
   display: unset;
}

.tableButton.green{background-color: #068a4a;}
.tableButton.blue{background-color: #0066FF;}
.tableButton.green:hover{background-color: #03522c;}
.tableButton.blue:hover{background-color: #05347a;}

.tableButton>select{
   background: none;
   border: none;
   cursor: pointer;
}

.pageContent>div>div:first-child>div:last-child{width: unset;padding-right: 0;}
.pageContent table>tbody>tr>td:last-child{position: relative;}
.pageContent table>tbody>tr>td:last-child>p{display: none;}
.pageContent table>tbody>tr>td:last-child label{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   /* background: red; */
}
.pagination>li>button{
   background: none;
   background-color: unset !important;
   border: none;
   border-radius: 5px;
   color: #000;
}
.pagination>li.active>button{
   background: none;
   background-color: #E2E2FF !important;
   color: #000;
}

/* Halaman akun => user.php */
.pageTitle.akun{
   margin-top: 50px;
   line-height: 6px;
}
.pageTitle.akun>h1{
   font-weight: 500;
}
.pageContent.akun{
   text-align: left !important;
   padding-bottom: 70px;
}
.pageContent.akun>h2:first-child{
   margin-top: 0px;
}
.pageContent.akun>h2{
   margin-top: 35px;
   margin-bottom: 15px;
}
.akunTable button:hover{
   text-decoration: underline;
   color: #0042a5;
}
.akunTable button{
   background: none;
   border: none;
   color: #0066FF;
   cursor: pointer;
   font-family: Zain;
   font-size: 16px;
}
.akunTable td{
   padding: 10px 15px;
   border-bottom: 1px solid #dee2e6;
}
.akunTable{
   width: 100%;
   max-width: 800px;
   margin-top: 0 !important;
   padding: 20px;
   border-collapse: collapse;
}
.logoutBtn>img{
   margin-right: 10px;
   vertical-align: sub;
}
.logoutBtn:hover{background-color: #afafc9;}
.logoutBtn{
   background-color: #E2E2FF;
   border-radius: 8px;
   padding: 7px 31px;
   text-decoration: none;
   color: var(--quaternary-color);
   float: right;
}
.akun.checkbox{
   text-align: right;
   margin-right: 3%;
}
.akun>div>input{
   display: unset !important;
   width: unset !important;
   max-width: unset !important;
   height: unset !important;
}

/* login and register page */
#login{
   display: grid;
   grid-template-columns: 40% auto;
   width: 80%;
   margin: auto;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}
#login #mockup{
   margin: auto;
   align-content: center;
   min-height: calc(90vh - 230px);
}
#login .leftSide{
   background-color: var(--tertiary-color);
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   padding: 25px 25px;
}
#login .rightSide{
   text-align: center;
   align-content: center;
   background-color: white;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}
#login .rightSide input, .swalReset input{
   display: block;
   padding: 15px 20px;
   min-width: 185px;
   width: 40%;
   margin: 15px auto;
   font-size: 16px;
   font-family: 'Zain';
   background-color: var(--primary-color);
   border: 1px solid var(--tertiary-color);
   border-radius: 10px;
}

#login .rightSide input[type="checkbox"]{
   display: inline-block;
   min-width: 20px;
   width: 20px;
}
.formFlex{
   display: flex;
   width: 50%;
   min-width: 190px;
   margin: auto;
   align-items: center;
   justify-content: space-between;
}
#login form button{
   float: none;
   width: 160px;
   margin: 40px auto;
   display: block;
}
#login .rightSide p{
   font-weight: normal;
   font-size: 18px;
   color: #6b6b6b;
   margin-top: 10%;
}
.btnPrimary.google{
   float: none;
   background: white;
   color: var(--quaternary-color);
   border: 1px solid var(--quaternary-color);
}
.linkText{
   background: none;
   border: none;
   color: #C03221;
   cursor: pointer;
   text-decoration: none;
}
.show-password-icon{
   position: absolute;
   right: 20px;
   width: 26px;
   top: 25%;
}
.passForm{
   position: relative;
   width: fit-content;
   margin: auto;
}

/* Forgot Password page */
#forgotPassword{
   position: relative;
   background: white;
   padding: 5%;
}
#forgotPassword h2{
   font-size: larger;
}
#forgotPassword input{
   display: block;
   padding: 15px 20px;
   min-width: 185px;
   width: 40%;
   margin: 15px auto;
   font-size: smaller;
   font-family: 'Zain';
   background-color: var(--primary-color);
   border: 1px solid var(--tertiary-color);
   border-radius: 10px;
}
#forgotPassword .checkbox{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: fit-content;
   margin: auto;
   font-size: smaller;
}
#forgotPassword .checkbox input{
   display: inline-block;
   min-width: 20px;
   width: 20px;
}
#forgotPassword button{
   display: block;
   margin: 40px auto;
   padding: 10px 30px;
   background-color: var(--quaternary-color);
   border: none;
   border-radius: 8px;
   color: white;
   font-size: 17px;
   font-family: Zain;
   cursor: pointer;
}

.loadingSpinner1 {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid var(--quaternary-color);
  border-left: 2px solid var(--quaternary-color);
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: loadingRotate1 1s linear infinite;
}

@keyframes loadingRotate1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

/* order page */
.order{
   display: grid;
   grid-template-columns: 35% auto;
   width: 80%;
   border-radius: 10px;
   margin: auto;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}
.orderCart{
   background-color: var(--tertiary-color);
   align-content: center;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   padding: 0 20%;
}
.order h2{
   font-size: 30px;
}
.order h3{
   font-weight: normal;
   font-size: 20px;
}
.order h4{
   font-weight: bold;
   font-size: larger;
   margin-bottom: 5%;
}
.order p{
   line-height: 1;
   font-size: 17px;
   color: rgb(82, 82, 82);
   max-width: 300px;
   margin-top: 5%;
}
.order button{
   background-color: var(--quaternary-color);
   color: var(--text-color);
   text-decoration: none;
   font-weight: normal;
   font-family: inherit;
   font-size: 14px;
   padding: 12px 39px;
   min-width: 145px;
   border: none;
   border-radius: 7px;
   cursor: pointer;
   position: absolute;
   bottom: 10%;
   right: 8%;
}
.orderForm{
   position: relative;
   text-align: justify;
   padding: 4% 15%;
   padding-bottom: 100px;
   background-color: white;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}
.orderForm input[type="text"]{
   width: 100%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-sizing: border-box;
   font-family: inherit;
}
.orderForm a{
   /* padding: 10px 50px; */
   margin-top: 15px;
}
#voucherDiv .loadingSpinner1{
   display: none;
   position: absolute;
   top: 8px;
   right: 11px;
}
#voucherDiv.loading .loadingSpinner1{
   display: inline-block;
}
#voucherDiv{
   position: relative;
   margin: -5px 0 10px 10px;

}
.vValid,.vInvalid, .vError{
   font-size: 14px;
   font-weight: normal;
   margin-top: 5px;
   text-align: right;
   display: none;
}
#voucherDiv.valid .vValid{
   display: block;
   color: green;
}
#voucherDiv.invalid .vInvalid, #voucherDiv.error .vError{
   display: block;
   color: red;
}
.orderForm.wide{
   padding: 4%;
}
.qrNotif{
   display: grid;
   margin-bottom: 20px;
   grid-template-columns: 1fr 95px;
   align-items: center;
}

.qrNotifText{
   font-size: medium !important;
   font-weight: normal !important;
   color: #6b6b6b;
   margin: 0px !important;
}
#qrTimeDate{
   display: block;
   font-size: 14px;
   font-weight: normal;
   color: #6b6b6b;
   margin-bottom: 10px;
}
#qrTimerMin, #qrTimerSec{
   font-size: 20px;
   font-weight: bold;
   color: #C03221;
   background: var(--tertiary-color);
   border-radius: 9px;
   padding: 7px 12px;
}
.qrContainer{
   margin-bottom: 50px;
}
.qrImageContainer{
   position: relative;
   border-radius: 12px;
   width: 90%;
   max-width: 360px;
   margin: auto;
   padding: 5%;
   text-align: center;
   background: var(--secondary-color);
}
.qrImageContainer h2{
   font-family: 'Neuton';
   font-weight: normal;
   color: white;
   margin: 10px 0 15px;
}
.qrImageContainer img{
   border-radius: 10px;
   width: 84%;
   object-fit: cover;
   object-view-box: inset(5%);
}


.labelList{
   margin-bottom: 0;
}

@media screen and (max-width: 768px) {
   #loginBtn{padding: 0; font-size: 13px;}
   #mockup{display: none;}
   #opening {
      grid-template-columns: 1fr;
      /* margin-top: -50px; */
      gap: 0px;
   }
   #openingText>h1{
      font-size: 50px;
      margin-left: -10px;
   }
   #openingText>p{
      font-size: 18px;
      padding: 10px;
   }
   .featureCard{
      height: unset;
      width: 20%;
      padding: 10px;
   }
   .featureIcon {
      align-content: center;
      height: 35px;
   }
   .featureTitle{
      align-content: center;
      height: 50px;
      font-size: 14px;
      font-weight: normal;
      margin: 0;
   }
   .featureDesc{display: none;}

   #theme{
      padding: 5px;
      margin-bottom: 55px;
   }
   #themeCards {
      grid-gap: 2px;
      row-gap: 5px;
      grid-template-columns: repeat(3, 30%);
      margin: 0;
   }   
   .themeCard{
      box-shadow: none;
   }
   .themePhoto {
      height: 150px;
   }
   .themeAction a{
      margin: 5px;
      font-size: 14px;
   }
   .themeName{
      font-size: 20px;
      margin-top: 5px;
      height: 45px;
      align-content: center;
      line-height: 0.9;
   }
   .themePrice {
      font-size: 14px;
   }
   .Title {
      font-size: 14px;
   }
   .subTitle{font-size: 38px;}
   .subTitle>hr{width: 15%;}
   .subDesc{
      font-size: 14px;
      white-space: normal;
      margin-bottom: 10px;
      padding: 0 20px;
   }

   #trial h2{font-size: 35px;}
   .btnPrimary{font-size: 14px;}
   .btnLink{font-size: 13px;}
   #login{grid-template-columns: 100%; border-radius: 10px; width: 90%;margin-top: 73px;}
   #login h1{
      font-size: 30px;
      margin-top: 30px;
      margin-bottom: 35px;
   }
   #login .leftSide{display: none;}
   #login .rightSide{border-radius: 10px; padding-bottom: 10%;}
   #login .formFlex{
      width: 80%;
      flex-direction: column;
      align-items: flex-start;
      font-size: 14px;
   }
   #login .rightSide p{
      font-size: 14px;
   }
   .order{
      grid-template-columns: 1fr;
      width: 95%;
   }
   .order>div:first-child{
      border-top-left-radius: 10px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 10px;
   }
   .order>div:last-child{
      border-top-right-radius: 0px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
   }
   .orderForm input[type="text"]{
      width: 100%;
   }
   #voucherDiv{
      margin: 10px 0;
   }
   .qrContainer{margin-bottom: 80px;}
   .orderForm .qrNotif{
      display: block;
   }
   .orderForm .qrNotif div:last-child{
      margin: 30px auto !important;
      text-align: center;
   }
   .orderForm button.cekPayment{
      bottom: 5%;
   }
   .order h2{font-size: 25px;}
   .order h3{font-size: 15px;}
   .order h4{font-size: 15px;}
   .order p{font-size: 13px;}
   footer{font-size: 12px;}
   .pageTitle{margin-top: 0; margin-bottom: 5vh;}
   .pageTitle>h1{font-size: 33px; margin: 0;}
   .pageTitle>p{font-size: 13px;}
   .pageContent .dt-layout-full{overflow-x: auto;}
   .pageContent *{font-size: 13px !important; --bs-gutter-y: 0 !important;}
   .dt-search {text-align: right !important;}
   .popupContent h4, .popupContent button{font-size: 15px;}
   .popupContent input{font-size: 13px !important; padding: 10px !important;}
   .popupModal>.popupContent button{padding: 8px 17px; font-size: 13px;}
   .akunTable button {font-size: 13px;}
   .btnLink, .btnCopy{padding: 2px 17px;}
   .row.mt-2.justify-content-between {margin-top: 5px !important;}
   .pageTitle.akun {margin-top: 20px;}
   .akun .logoutBtn{padding: 5px 20px;}
   .logoutBtn>img {width: 20px;}
}

.hide{
   display: none !important;
}