@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800&family=Kanit:wght@200;300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-transform: capitalize;
  text-decoration: none;
}

body{
  background: rgba(246, 246, 246, 1) !important;
}

input[type="email"]{
  text-transform: lowercase !important;
}

a{
  text-transform: capitalize !important;
  text-decoration: none !important;
}

p{
  margin-bottom: 0 !important;
}

.image-light{
  display: inline !important;
}
.image-dark{
  display: none !important;
}


.blink {
  animation: blinker 0.5s linear infinite;
  color: red;
  font-family: sans-serif;
}

@keyframes blinker {
  50% {
      opacity: 0;
  }
}

.loading-btn{
  background-image: url('/assets/images/loading-2.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 64px;
  width: 100%;
}

.loading-bar {
  /* width: 250px; */
  /* height: 30px;  */
  /* background-color: #f0f0f0; */
  background-color: #f5f5f5;
  overflow: hidden;
  border-radius: 10px;
  /* position: relative; */
  /* margin: auto auto !important; */
}

.loading-bar-animation {
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to right, transparent, #e0e0e0, transparent); */
  background: linear-gradient(to right, transparent, #d2cfcf, transparent);
  animation: loadingbar 1.5s infinite;
}


@keyframes loadingbar {
  0% {
      transform: translateX(-100%);
  }

  100% {
      transform: translateX(100%);
  }
}


button:disabled{
  pointer-events: none !important;
  opacity: .65 !important;
}

header {
  height: 100vh;
  display: flex;
  gap: 60px;
  padding: 0px 20px;
  position: static;
}

.sidebar-overlay{
  position: fixed !important;
  width: 100%;
  height: 100vh;
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  left: -100%;
  transition: all 400ms ease-in;
  
}


.sidebar {
  /* width: 100%; */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0px;
  position: fixed !important;
  top: 0;
  /* background: rgba(0, 0, 0, 0.253); */
  left: -100%;
  transition: all 400ms ease-in;
  z-index: 999;
  /* padding-top: 15px; */
  
}

.loading-anime{
  animation-name: loading;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 100ms;
}


@keyframes loading {
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
}

#ref_link{
  text-transform: lowercase !important;
}

.close-sidebar{
  position: absolute;
  top: 10px;
  right: 10px;
  margin-right: 20px;
  margin-top: 20px;
  
}

.logo-section{
  background-color: rgba(242, 242, 242, 1);
    width: 280px;
    padding: 10px;
}

.logo-section img {
  width: 120px;
  height: 48px;
  margin: auto;
  display: block;
  
}

.sidebar-menu-container {
  width: 280px;
  border-radius: 0px;
  height: 100%;
  border: 1.5px solid rgba(229, 229, 229, 1);
  padding: 16px;
  background-color: rgba(242, 242, 242, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 400ms ease-in-out;
  overflow-y: scroll;
  /* overflow-x: hidden !important;  */
}

.main-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.close-icon {
  position: absolute;
  top: 70px;
  right: -32px;
  transition: all 500ms ease-in-out;
  display: none;
}

.menu-container {
  width: 100%;
  height: 55px;
  border-radius: 20px;
  border: 1px;
  display: flex;
  gap: 8px;
  border: 1px solid rgba(229, 229, 229, 1);
  padding: 16px;
  background: rgba(246, 246, 246, 1);
  align-items: center;
  text-decoration: none;
}

.menu-container p {
  font-family: Jost;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0em;
  /* text-align: left; */
  color: rgba(47, 47, 47, 1);
  margin-bottom: 0 !important;
  transition: all 200ms ease-in-out;

}

.select-elect{
  font-family: Jost;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0em;
  text-align: center;
  color:rgba(47, 47, 47, 1);
  
  }
  

.overlay-notification{
  display: none ;
}

.main-menu .active {
  width: 100%;
  height: 55px;
  border-radius: 20px;
  border: 1px;
  display: flex;
  gap: 8px;
  border: 1px solid rgba(15, 38, 235, 1) !important;
  padding: 16px;
  background: rgba(1, 20, 181, 1) !important;
  align-items: center;
}

/* .main-menu .active p {
  font-family: Jost;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(246, 246, 246, 1);
} */

.menu-container > img, .menu-container svg{
  height: 24px;
  width: 24px;
}

.logout-container {
  width: 100%;
  height: 55pxpx;
  border-radius: 20px;
  border: 1px;
  display: flex;
  gap: 8px;
  border: 1px solid rgba(229, 229, 229, 1);
  padding: 16px;
  background: rgba(246, 246, 246, 1);
  align-items: center;
  margin-top: 10px;
}

.logout-container p {
  font-family: Jost;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(220, 53, 69, 1);
}

.main-container {
  width: 100%;
}
.header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 5px;
  position: sticky;
  top: 0;
  background-color: rgba(246, 246, 246, 1);
  z-index: 9;
}

.header-tag{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(115, 115, 115, 1);
}

.header-tag span{
  font-weight: 700;
  color: rgba(47, 47, 47, 1);
}

.header-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.noti-icon {
  display: flex;
  align-items: center;
}
.user-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.icon-bg{
  border: 1.5px solid rgba(229, 229, 229, 1);
  background-color: rgba(242, 242, 242, 1);
  border-radius: 50%;
  height: 38px;
  width: 38px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.header-icons svg{
  height: 24px;
  width: 24px;
  
}

.caret{
  width: 8px !important;
  height: 5px !important;
}

.welcome-text {
  font-family: Kanit;
  font-size: 24px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(19, 19, 19, 1);
}


.content-container{
    display: flex;
    flex-direction: column;
    gap: 32px;
}


.overview{
    width: 100%;
border-radius: 40px;
border: 1.5px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
padding: 16px;
display: flex;
flex-direction: column;
gap: 32px;
}


.overview-notification{
border-radius: 16px;
border: 1.5px solid rgba(229, 229, 229, 1);
display: flex;
flex-direction: column;
/* align-items: center; */
gap: 5px;
padding: 16px;
background: rgba(242, 242, 242, 1);

}

.overview-notification svg{
  height: 24px !important;
  width: 24px !important;
}

.overview-notification p{
  width: 100%;
  font-size: 16px;
font-family: Jost;
font-weight: 500;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}

.balance-container{
    gap: 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.balance-container-2{
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.balance-add-container{
  display: flex;
  gap: 24px;
  flex-direction: column;
}

.ad-image{
  width: 100%;
}



.current-container{
    width: 100%;
height: 110px;
border-radius: 20px;
border: 1.5px;
padding: 24px;
border: 1.5px solid rgba(218, 222, 255, 1);
background: rgba(231, 233, 255, 1);
flex-direction: column;
justify-content: space-around;
gap: 6px;
display: flex;
}


.current-container h3{
font-family: Jost;
font-size: 18px;
font-weight: 500;
letter-spacing: 0em;
color:rgba(1, 20, 181, 1);
/* text-transform: capitalize; */

}


.current-container h1{
font-family: Kanit;
font-size: 30px;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
color: rgba(47, 47, 47, 1);
}


.overview-transaction{
    width: 100%;
height: 110px;
border-radius: 20px;
border: 1.5px;
padding: 24px;
border: 1.5px solid rgba(206, 234, 228, 1);
background: rgba(227, 245, 241, 1);
flex-direction: column;
gap: 6px;
display: flex;
justify-content: space-around;
}


.overview-transaction h3{
font-family: Jost;
font-size: 18px;
font-weight: 500;
letter-spacing: 0em;
color:rgba(14, 155, 120, 1);
/* text-transform: capitalize; */
}


.overview-transaction h1{
font-family: Kanit;
font-size: 30px;
font-weight: 600;
letter-spacing: 0em;
color: rgba(47, 47, 47, 1);
}


.actions{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.actions-header{
font-family: Kanit;
font-size: 30px;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}

.actions-container{
    width: 100%;
border-radius: 40px;
border: 1px solid rgba(229, 229, 229, 1);
color: rgba(242, 242, 242, 1);
padding: 16px;
display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
background: rgba(242, 242, 242, 1);
gap: 16px;

}


.action-item{
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    width: 100%;
    text-decoration: none;
    text-transform: capitalize;
}


.action-item p{
font-family: Jost;
font-size: 16px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
text-transform: capitalize;
}

/* .action-item svg{
  height: 24px;
  width: 24px;
} */


.action-1{
    border: 1.5px solid rgba(218, 222, 255, 1);
    background: rgba(231, 233, 255, 1);
}

.action-2{
    border: 1.5px solid rgba(206, 234, 228, 1);
    background: rgba(227, 245, 241, 1);
}

.action-3{
    border: 1.5px solid rgba(218, 222, 255, 1);
    background: rgba(231, 233, 255, 1);
}


.action-4{
    border: 1.5px solid rgba(206, 234, 228, 1);
    background: rgba(227, 245, 241, 1);
}

.transaction-header{
    font-family: Kanit;
    font-size: 30px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(19, 19, 19, 1);
}


.transaction{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }


.transaction-container{
border-radius: 40px;
border: 1.5px;
border: 1.5px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
padding: 24px;
overflow-x: scroll !important;

}

table{
    width: 100%;
}

.c-row{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 130vw;
}

.c-col-1{
  width: 5%;
}

.c-col-2{
  width: 40%;
}.c-col-3{
  width: 12%;
}.c-col-4{
  width: 14%;
}.c-col-5{
  width: 17%;
}



.table-header > div{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(115, 115, 115, 1);
height: 58px;
/* text-transform: capitalize; */
padding: 8px;
text-align: center;
}



td{
    height: 58px;
}

tr {
    border-bottom: 2px solid inherit;
    border-radius: 20px;

}


tbody > tr:nth-child(odd){
    background-color: aqua;
}

.table-content{
  flex-direction: column;
  display: flex;
  gap: 8px;
}

.table-content > div:nth-child(odd){
height: 72px;
padding: 8px;
border-radius: 20px;
gap: 10px;
background: rgba(236, 236, 236, 1);
text-align: center
}

.table-content > div:nth-child(even){
  height: 72px;
  padding: 8px;
  border-radius: 20px;
  gap: 10px;
  background: rgba(255, 254, 254, 1);
  text-align: center;
  }

.num , .table-price{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}

.table-price-success{
  font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
  color: rgba(25, 135, 84, 1);
}



.table-success{
height: 32px;
padding: 3px 12px 3px 12px;
border-radius: 32px;
border: 1.5px solid rgba(33, 172, 108, 1);
background: rgba(25, 135, 84, 1);
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0em;
text-align: center !important;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(246, 246, 246, 1);
}


.table-failed{
  height: 32px;
  padding: 3px 12px 3px 12px;
  border-radius: 32px;
  border: 1.5px solid rgba(241, 73, 89, 1);
  background: rgba(220, 53, 69, 1);
  font-family: Jost;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0em;
  text-align: center !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246, 246, 246, 1);
  }

  .table-view-more{
    height: 32px;
      padding: 3px 12px 3px 12px;
    border-radius: 32px;
    border: 1.5px solid rgba(15, 38, 235, 1);
    background:rgba(1, 20, 181, 1);
    font-family: Jost;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(246, 246, 246, 1);
    text-wrap: nowrap;
    }
  


.table-name{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.table-name img{
  width: 35px;
  height: 35px;
  border-radius: 10px;

}



.overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    align-items: center;
    justify-content: center;
    padding: 0px;
    opacity: 1;
    animation: popup 0.5s ease-in-out;
    transition: all 400ms allow-discrete;
}

@keyframes popup {
  0%{
    transform: scale(1.2);
  }
 
  100%{
    transform: scale(1);
  }
}

.showing {
    opacity: 1;
    display: flex;
}
  
  @starting-style {
    .showing {
      opacity: 0;
    }
  }

.overlay-image{
  height: 200px;
  width: 200px;
  align-self: center;
}

.trans-done{
    width: 100%;
border-radius: 40px;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
padding: 10px;
display: flex;
gap: 10px;
flex-direction: column;
}


.trans-done > svg{
    align-self: flex-end;
    margin-bottom: 4px;
}


.trans-done h3{
    align-self: center;
font-family: Kanit;
font-size: 30px;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
text-align: center;
color: rgba(19, 19, 19, 1);
/* text-transform: capitalize; */

}


.key-value{
    display: flex;
    align-items: center;
    gap: 8px;
  
padding: 8px;
border-radius: 10px;

}
.key-value:nth-child(odd){
    background: rgba(236, 236, 236, 1);
}

.key-value:nth-child(even){
    background: rgba(246, 246, 246, 1);
}

.key{
   
    
    font-family: Jost;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(47, 47, 47, 1);
    /* text-transform: capitalize; */
    
}


.value{
    font-family: Jost;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(85, 85, 85, 1);
    /* text-transform: capitalize; */
}



.trans-btn{
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
    margin-top: 10px;
    flex-direction: column;
}

.trans-primary{
height: 35px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 16px;
border: 1.5px solid rgba(15, 38, 235, 1);
background-color: rgba(1, 20, 181, 1);
color: rgba(246, 246, 246, 1);
font-family: Jost;
font-size: 16px;
font-weight: 700;
letter-spacing: 0em;
text-align: left;


}

.trans-outline{
    height: 35px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 16px;
    border: 1.5px solid rgba(229, 229, 229, 1);
        background-color: rgba(246, 246, 246, 1);
    color: rgba(47, 47, 47, 1);
    font-family: Jost;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0em;
    text-align: left;
    
    
    }

    .log-container{
      width: 502px;
  border-radius: 40px;
  border: 1px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);
  padding: 16px;
  display: flex;
  gap: 16px;
  flex-direction: column;

  }
  
  .log-container img{
    width: 166px;
    height: 200px;
    align-self: center;
  }
  
  .log-container > h3{
font-family: Jost;
font-size: 28px;
font-weight: 700;
letter-spacing: 0em;
text-align: center;
color: rgba(47, 47, 47, 1);
/* text-transform: capitalize; */
  }

  .log-container > svg{
      align-self: flex-end;
      margin-bottom: 4px;
  }
  
  
.log-primary{
height: 35px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 16px;
border: 1.5px solid rgba(241, 73, 89, 1);
background-color: rgba(220, 53, 69, 1);
color: rgba(246, 246, 246, 1);
font-family: Jost;
font-size: 16px;
font-weight: 700;
line-height: 28px;
letter-spacing: 0em;
text-align: left;


}

.notification-container{
  width: 550px;
border-radius: 40px;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
padding: 16px;
display: flex;
gap: 16px;
flex-direction: column;
}


.notification-container >svg{
  align-self: flex-end;
}

.notification-container div {
  /* margin: 15px auto; */
}


.close-notification{
  display: flex;
  justify-content: end;
}


.notification-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.notification-header h1{
font-family: Kanit;
font-size: 30px;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}

.notification-header button{
  outline: none;
  border: none;
font-family: Jost;
font-size: 18px;
font-weight: 600;
letter-spacing: 0em;
color: rgba(85, 85, 85, 1);

}

.notification-item{
padding: 8px;
border-radius: 20px;
gap: 4px;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(246, 246, 246, 1);
}

.notification-content{
  display: flex;
  gap: 8px;
  align-items: center;
}

.notification-content div{
  border: 1px solid inherit;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.notification-close-btn{
  height: 54px;
  outline: none;
}

.notification-container p{
width: 100%;
font-family: Jost;
font-size: 16px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0em;
text-align: left;

}

.notification-container .date{
font-family: Jost;
font-size: 16px;
font-weight: 500;
letter-spacing: 0em;
text-align: left;
color: rgba(115, 115, 115, 1);

}

.reader{
  border: 1px solid rgba(241, 73, 89, 1);
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 1);
}


.notification-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.notification-empty p{
font-family: Jost;
font-size: 16px;
font-weight: 500;
letter-spacing: 0em;
text-align: center;
color: rgba(47, 47, 47, 1);
}

.notification-empty-image{
  width: 200px;
}



.fund-container{
  width: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 30px;
  border: 1px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);

}

/* .fund-option-container::-webkit-s */
.fund-option-container::-webkit-scrollbar, .moni-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
.fund-option-container::-webkit-scrollbar-thumb, .moni-container::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/* .fund-option-container::-webkit-scrollbar-button{
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
} */

.fund-container h1{
  font-family: Kanit;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: center;
  color:rgba(19, 19, 19, 1);
  align-self: center;
}


.fund-option-container{
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* height: 250px; */
  /* overflow-y: scroll; */
  /* overflow-x: hidden; */
}


.fund-option-container > div:nth-child(odd){
display: flex;
flex-direction: row;
padding: 8px;
border-radius: 10px;
gap: 8px;
background-color:rgba(236, 236, 236, 1);
align-items: center;
cursor: pointer;
}

.fund-option-desc{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fund-option-desc h3{
font-family: Jost;
font-size: 18px;
font-weight: 600;
letter-spacing: 0em;
text-align: left;
color:rgba(47, 47, 47, 1);
margin-bottom: 0;
}

.fund-option-desc p{
  font-family: Jost;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0em;
  margin-bottom: 0;
  text-align: left;
  color:rgba(85, 85, 85, 1);  
}

.fund-option-container > p{
font-family: Jost;
font-size: 16px;
font-weight: 500;
letter-spacing: 0em;
text-align: center;
color: rgba(115, 115, 115, 1);
}



.fund-option img{
  width: 45px;
height: 45px;
border-radius: 10px;
}


.fund-option-container > div:nth-child(even){
  display: flex;
  flex-direction: row;
  padding: 8px;
  border-radius: 10px;
  gap: 8px;
  background-color:rgba(246, 246, 246, 1);
  align-items: center;
  cursor: pointer;
  }

  .vfd-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }


  .vfd-header p{
font-family: Jost;
font-size: 16px;
font-weight: 600;
letter-spacing: 0em;
color: rgba(47, 47, 47, 1);
/* text-transform: capitalize; */
  }

  .vfd-header:nth-child(2){
    text-align: right;
  }


  .vfd-container{
    display: flex;
    flex-direction: row;
padding: 8px;
border-radius: 10px;
background: rgba(236, 236, 236, 1);
align-items: center;
gap: 10px;
  }

  .vfd-container > p {
font-family: Jost;
font-size: 16px;
font-weight: 600;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
width: 100%;


  }


  .vfd-copy{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 4px;
  }


  .vfd-copy p{
font-family: Jost;
font-size: 16px;
font-weight: 500;
letter-spacing: 0em;
text-align: right;
color: rgba(85, 85, 85, 1);
  }


  .fund-container > p {
font-family: Jost;
font-size: 16px;
font-weight: 500;
letter-spacing: 0em;
text-align: center;
color: rgba(115, 115, 115, 1);
  }

.moni-container{
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 10px;
  gap: 5px;
  /* height: 180px; */
  /* overflow-y: scroll; */
  /* overflow-x: hidden; */

}

.moni-container > div:nth-child(odd){
  
  padding: 5px;
  border-radius: 10px;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  background-color: rgba(236, 236, 236, 1);
}

  .moni-container > div:nth-child(even){
   
    padding: 5px;
    border-radius: 10px;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    background-color: rgba(246, 246, 246, 1);
      }

  .moni-item > p {
font-family: Jost;
font-size: 14px;
font-weight: 600;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
width: 100%;

  }

  .moni-item p img{
    width: 23px;
    height: 23px;
  }

  .moni-copy{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 4px;
  }
  .moni-copy{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 4px;
  }


  .moni-copy p{
font-family: Jost;
font-size: 14px;
font-weight: 500;
letter-spacing: 0em;
text-align: right;
color: rgba(85, 85, 85, 1);
  }


.moni-btn-container{
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.moni-close{
  width:  100%;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
border: 1.5px solid rgba(229, 229, 229, 1);
background:rgba(246, 246, 246, 1);
color:rgba(47, 47, 47, 1);
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0em;
text-align: left;

}


.moni-generate{
  width:  100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1.5px solid rgba(193, 237, 226, 1);
  background:rgba(14, 155, 120, 1);
  color:rgba(246, 246, 246, 1);
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0em;
text-align: left;

}



@media only screen and (min-width: 1200px) {
  
  main {
  }
  
  header {
    height: initial;
    display: flex;
    gap: 60px;
    padding: 0px 40px;
  }
  
  .header-tag{
    font-family: Jost;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(115, 115, 115, 1);
    }
    
    .header-tag span{
      font-weight: 700;
      color: rgba(47, 47, 47, 1);
    }
  
  .sidebar {
    width: 316px;
    background: none;
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky !important;
    top: 0 !important;

  }
  .close-sidebar{
    display: none !important;
  }

  .open-sidebar{
    display: none;
  }




  .logo-section {
    width: 220px;
    height: 48px;
    background: initial;

  }
  .logo-section img {
    width: 210px;
    height: 48px;
    margin: initial;
    display: block;
    background-color: none !important;

  
    
  }
  
  .sidebar-menu-container {
    width: 300px;
    border-radius: 40px;
    height: 100%;
    border: 1.5px solid rgba(229, 229, 229, 1);
    padding: 16px;
    background-color: rgba(242, 242, 242, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
    /* overflow-x: hidden !important; */
  }
  
  .main-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }
  
  .close-icon {
    position: absolute;
    top: 70px;
    right: -32px;
    display: block;
  }
  
  .menu-container {
    width: 100%;
    height: 64px;
    border-radius: 20px;
    border: 1px;
    display: flex;
    gap: 8px;
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 16px;
    background: rgba(246, 246, 246, 1);
    align-items: center;
  }
  
  .menu-container p {
    font-family: Jost;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0em;
    /* text-align: left; */
    color: rgba(47, 47, 47, 1);
    margin-bottom: 0 !important;
  }
  
  .main-menu .active {
    width: 1005;
    height: 64px;
    border-radius: 20px;
    border: 1px;
    display: flex;
    gap: 8px;
    border: 1px solid rgba(15, 38, 235, 1);
    padding: 16px;
    background: rgba(1, 20, 181, 1);
    align-items: center;
  }
  
  /* .main-menu .active p {
    font-family: Jost;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(246, 246, 246, 1);
  } */

  .menu-container > img, .menu-container svg{
    height: initial;
    width: initial;
  }
  .logout-container {
    width: 1005;
    height: 64px;
    border-radius: 20px;
    border: 1px;
    display: flex;
    gap: 8px;
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 16px;
    background: rgba(246, 246, 246, 1);
    align-items: center;
  }
  
  .logout-container p {
    font-family: Jost;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(220, 53, 69, 1);
  }
  
  .main-container {
    width: 100%;
  }
  .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 78px;
  }
  
  .header-icons {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .noti-icon {
    display: flex;
    align-items: center;
  }
  .user-icon {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-icons svg{
    height: initial;
    width: initial;
  }
  .icon-bg{
    border: 1.5px solid rgba(229, 229, 229, 1);
    background-color: rgba(242, 242, 242, 1);
    border-radius: 50%;
    height: 48px;
    width: 48px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  
  .caret{
    width: initial;
    height:initial;
  }
  
  .welcome-text {
    font-family: Kanit;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(19, 19, 19, 1);
  }
  
  
  .content-container{
      display: flex;
      flex-direction: column;
      padding-bottom: 30px;
      gap: 32px;
  }
  
  
  .overview{
      width: 100%;
  border-radius: 40px;
  border: 1.5px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  }
  
  
  .overview-notification{
  border-radius: 16px;
  border: 1.5px solid rgba(229, 229, 229, 1);
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 5px;
  padding: 10px;
  background: rgba(242, 242, 242, 1);
  }
  
  
  .balance-container{
      display: flex;
      flex-direction: row;
      gap: 24px;
  }

  .balance-container-2{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .balance-add-container{
    display: flex;
    flex-direction: row;
    gap: 24px;
  }

  .ad-image{
    width: initial;
  }
  
  
  
  .current-container{
      width: 100%;
  height: 140px;
  border-radius: 20px;
  border: 1.5px;
  padding: 24px;
  border: 1.5px solid rgba(218, 222, 255, 1);
  background: rgba(231, 233, 255, 1);
  flex-direction: column;
  gap: 16px;
  display: flex;
  }
  
  
  .current-container h3{
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  color:rgba(1, 20, 181, 1);
  /* text-transform: capitalize; */
  
  }
  
  
  .current-container h1{
  font-family: Kanit;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0em;
  color: rgba(47, 47, 47, 1);
  }
  
  
  
  
  .overview-transaction{
      width: 100%;
  height: 140px;
  border-radius: 20px;
  border: 1.5px;
  padding: 24px;
  border: 1.5px solid rgba(206, 234, 228, 1);
  background: rgba(227, 245, 241, 1);
  flex-direction: column;
  gap: 16px;
  display: flex;
  }
  
  
  .overview-transaction h3{
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  color:rgba(14, 155, 120, 1);
  /* text-transform: capitalize; */
  }
  
  
  .overview-transaction h1{
  font-family: Kanit;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0em;
  color: rgba(47, 47, 47, 1);
  }
  
  
  .actions{
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  
  .actions-header{
  font-family: Kanit;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(19, 19, 19, 1);
  }
  
  .actions-container{
      width: 100%;
  border-radius: 40px;
  border: 1px solid rgba(229, 229, 229, 1);
  color: rgba(242, 242, 242, 1);
  padding: 24px;
  display: flex;
  flex-direction: row;
  background: rgba(242, 242, 242, 1);
  gap: 24px;
  /* flex-wrap: nowrap; */
  }
  
  
  .action-item{
      padding: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      border-radius: 20px;
      text-decoration: none;
  }
  
  
  .action-item p{
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(19, 19, 19, 1);
  /* text-transform: lowercase; */
  }
  
  
  .action-1{
      border: 1.5px solid rgba(218, 222, 255, 1);
      background: rgba(231, 233, 255, 1);
  }
  
  .action-2{
      border: 1.5px solid rgba(206, 234, 228, 1);
      background: rgba(227, 245, 241, 1);
  }
  
  .action-3{
      border: 1.5px solid rgba(218, 222, 255, 1);
      background: rgba(231, 233, 255, 1);
  }
  
  
  .action-4{
      border: 1.5px solid rgba(206, 234, 228, 1);
      background: rgba(227, 245, 241, 1);
  }
  
  .transaction-header{
      font-family: Kanit;
      font-size: 40px;
      font-weight: 600;
      line-height: 48px;
      letter-spacing: 0em;
      text-align: left;
      color: rgba(19, 19, 19, 1);
      }
  
  
      .transaction{
          display: flex;
          flex-direction: column;
          gap: 16px;
      }
  
  
  .transaction-container{
  border-radius: 40px;
  border: 1.5px;
  border: 1.5px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);
  padding: 24px;
  overflow-x: hidden !important;

  }
  
  table{
      width: 100%;
  }
  
  .c-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    
  }

  .c-col-1{
    width: 5%;
  }
  
  .c-col-2{
    width: 40%;
  }.c-col-3{
    width: 12%;
  }.c-col-4{
    width: 14%;
  }.c-col-5{
    width: 17%;
  }
  
  
  
  .table-header > div{
  font-family: Jost;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(115, 115, 115, 1);
  height: 58px;
  padding: 8px;
  /* text-transform: capitalize; */
  text-align: center;

  }
  
  
  
  td{
      height: 58px;
  }
  
  tr {
      border-bottom: 2px solid inherit;
      border-radius: 20px;
  
  }
  
  
  tbody > tr:nth-child(odd){
      background-color: aqua;
  }
  
  .table-content{
    flex-direction: column;
    display: flex;
    gap: 8px;
  }
  
  .table-content > div:nth-child(odd){
  height: 72px;
  padding: 8px;
  border-radius: 20px;
  gap: 10px;
  background: rgba(236, 236, 236, 1);
  text-align: center;

  }
  
  .table-content > div:nth-child(even){
    height: 72px;
    padding: 8px;
    border-radius: 20px;
    gap: 10px;
    background: rgba(255, 254, 254, 1);
    text-align: center;

    }
  
  .num , .table-price{
  font-family: Jost;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(47, 47, 47, 1);
  }
  
  .table-price-success{
    font-family: Jost;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: left;
    color: rgba(25, 135, 84, 1);
  }
  
  
  
  .table-success{
  height: 32px;
  padding: 3px 12px 3px 12px;
  border-radius: 32px;
  border: 1.5px solid rgba(33, 172, 108, 1);
  background: rgba(25, 135, 84, 1);
  font-family: Jost;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246, 246, 246, 1);
  }
  
  
  .table-failed{
    height: 32px;
    padding: 3px 12px 3px 12px;
    border-radius: 32px;
    border: 1.5px solid rgba(241, 73, 89, 1);
    background: rgba(220, 53, 69, 1);
    font-family: Jost;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: center !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(246, 246, 246, 1);
    }
  
    .table-view-more{
      height: 32px;
      padding: 3px 12px 3px 12px;
      border-radius: 32px;
      border: 1.5px solid rgba(15, 38, 235, 1);
      background:rgba(1, 20, 181, 1);
      font-family: Jost;
      font-size: 18px;
      font-weight: 500;
      line-height: 26px;
      letter-spacing: 0em;
      text-align: center !important;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(246, 246, 246, 1);
      text-wrap: nowrap;
    }
    
  
  
  .table-name{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  
  .table-name img{
    width: 35px;
    height: 35px;
    border-radius: 10px;
  
  }
  
  
  
  .overlay{
      display: none;
      position: fixed;
      width: 100%;
      min-height: 100%;
      top: 0;
      align-items: center;
      justify-content: center;
      animation: popup 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }



    @keyframes popup {
      0%{
        transform: scale(1.2);
      }
     
      100%{
        transform: scale(1);
      }
    }

.showing {
    opacity: 1;
    display: flex;
}
  
  @starting-style {
    .showing {
      opacity: 0;
    }
  }
  
  .overlay-image{
    height: 200px;
    width: 200px;
    align-self: center;
  }
  
  .trans-done{
      width: 550px;
  border-radius: 40px;
  border: 1px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);
  padding: 24px;

  display: flex;
  gap: 16px;
  flex-direction: column;
  }
  
  
  .trans-done > svg{
      align-self: flex-end;
      margin-bottom: 4px;
  }
  
  
  .trans-done h3{
      align-self: center;
  font-family: Kanit;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(19, 19, 19, 1);
  /* text-transform: capitalize; */
  
  }
  
  
  .key-value{
      display: flex;
      align-items: center;
      gap: 8px;
    
  padding: 8px;
  border-radius: 10px;
  
  }
  .key-value:nth-child(odd){
      background: rgba(236, 236, 236, 1);
  }
  
  .key-value:nth-child(even){
      background: rgba(246, 246, 246, 1);
  }
  
  .key{
     
      
      font-family: Jost;
      font-size: 24px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 0em;
      text-align: left;
      color: rgba(47, 47, 47, 1);
      /* text-transform: capitalize; */
      
  }
  
  
  .value{
      font-family: Jost;
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: 0em;
      text-align: left;
      color: rgba(85, 85, 85, 1);
      /* text-transform: capitalize; */
  }
  
  
  
  .trans-btn{
      display: flex;
      gap: 8px;
      width: 100%;
      align-items: center;
      flex-direction: row;
      margin-top: 8px;
  }
  
  .trans-primary{
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  border: 1.5px solid rgba(15, 38, 235, 1);
  background-color: rgba(1, 20, 181, 1);
  color: rgba(246, 246, 246, 1);
  font-family: Jost;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  
  
  }
  
  .trans-outline{
      height: 64px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 16px;
      border: 1.5px solid rgba(229, 229, 229, 1);
          background-color: rgba(246, 246, 246, 1);
      color: rgba(47, 47, 47, 1);
      font-family: Jost;
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
      
      
      }
  
      .log-container{
        width: 502px;
    border-radius: 40px;
    border: 1px solid rgba(229, 229, 229, 1);
    background: rgba(242, 242, 242, 1);
    padding: 24px;
    display: flex;
    gap: 16px;
    flex-direction: column;
  
    }
    
    .log-container img{
      width: 166px;
      height: 200px;
      align-self: center;
    }
    
    .log-container > h3{
  font-family: Jost;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(47, 47, 47, 1);
  /* text-transform: capitalize; */
    }
  
    .log-container > svg{
        align-self: flex-end;
        margin-bottom: 4px;
    }
    
    
  .log-primary{
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  border: 1.5px solid rgba(241, 73, 89, 1);
  background-color: rgba(220, 53, 69, 1);
  color: rgba(246, 246, 246, 1);
  font-family: Jost;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  
  
  }
  
  .notification-container{
    width: 550px;
  border-radius: 40px;
  border: 1px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);
  padding: 24px;
  display: flex;
  gap: 16px;
  flex-direction: column;
  }
  
  
  
  .close-notification{
    display: flex;
    justify-content: end;
  }
  
  
  .notification-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  
  .notification-header h1{
  font-family: Kanit;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(19, 19, 19, 1);
  }
  
  .notification-header button{
    outline: none;
    border: none;
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  color: rgba(85, 85, 85, 1);
  
  }
  
  .notification-item{
  padding: 8px;
  border-radius: 20px;
  gap: 4px;
  border: 1px solid rgba(229, 229, 229, 1);
  background: rgba(246, 246, 246, 1);
  }
  
  .notification-content{
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .notification-content div{
    border: 1px solid inherit;
    height: 8px;
    width: 8px;
    border-radius: 50%;
  }
  
  .notification-close-btn{
    height: 54px;
    outline: none;
  }
  
  .notification-container p{
  width: 100%;
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  
  }
  
  .notification-container .date{
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(115, 115, 115, 1);
  
  }
  
  .reader{
    border: 1px solid rgba(241, 73, 89, 1);
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 1);
  }
  
  
  .notification-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .notification-empty p{
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(47, 47, 47, 1);
  }
  
  .notification-empty-image{
    width: 200px;
  
  }
  
  
  
  .fund-container{
    width: 500px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 40px;
  border: 1px solid rgba(229, 229, 229, 1);
  background: rgba(242, 242, 242, 1);
  
  }
  
  
  .fund-container h1{
    font-family: Kanit;
    font-size: 40px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: center;
    color:rgba(19, 19, 19, 1);
    align-self: center;
  }
  
  
  .fund-option-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  
  .fund-option-container > div:nth-child(odd){
  display: flex;
  flex-direction: row;
  padding: 8px;
  border-radius: 10px;
  gap: 8px;
  background-color:rgba(236, 236, 236, 1);
  align-items: center;
  }
  
  .fund-option-desc{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .fund-option-desc h3{
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  color:rgba(47, 47, 47, 1);
  margin-bottom: 0;
  }
  
  .fund-option-desc p{
    font-family: Jost;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: left;
    color:rgba(85, 85, 85, 1);  
    margin-bottom: 0;
  }
  
  .fund-option-container > p{
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(115, 115, 115, 1);
  margin-bottom: 0;
  }
  
  
  
  .fund-option img{
    width: 60px;
  height: 60px;
  border-radius: 10px;
  }
  
  
  .fund-option-container > div:nth-child(even){
    display: flex;
    flex-direction: row;
    padding: 8px;
    border-radius: 10px;
    gap: 8px;
    background-color:rgba(246, 246, 246, 1);
    align-items: center;
    }
  
    .vfd-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  
  
    .vfd-header p{
  font-family: Jost;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0em;
  color: rgba(47, 47, 47, 1);
  /* text-transform: capitalize; */
    }
  
    .vfd-header:nth-child(2){
      text-align: right;
    }
  
  
    .vfd-container{
      display: flex;
      flex-direction: row;
  padding: 8px;
  border-radius: 10px;
  background: rgba(236, 236, 236, 1);
  align-items: center;
  gap: 10px;
    }
  
    .vfd-container > p {
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(85, 85, 85, 1);
  width: 100%;
  
  
    }
  
  
    .vfd-copy{
      width: 100%;
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 4px;
    }
  
  
    .vfd-copy p{
  font-family: Jost;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: right;
  color: rgba(85, 85, 85, 1);
    }
  
  
    .fund-container > p {
  font-family: Jost;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(115, 115, 115, 1);
    }
  
  .moni-container{
      display: flex;
      flex-direction: column;
    padding: 8px;
    border-radius: 10px;
    /* gap: 10px;
    height: 180px;
    overflow-y: scroll; */
    /* overflow-x: hidden; */
  
  }
  
    .moni-container > div:nth-child(odd){
     
  padding: 8px;
  border-radius: 10px;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  background-color: rgba(236, 236, 236, 1);
    }
  
    .moni-container > div:nth-child(even){
     
      padding: 8px;
      border-radius: 10px;
      justify-content: space-between;
      display: flex;
      flex-direction: row;
      background-color: rgba(246, 246, 246, 1);
        }
  
    .moni-item > p {
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(85, 85, 85, 1);
  width: 100%;
  
  
    }
  
  
    .moni-copy{
      width: 100%;
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 4px;
    }
    .moni-copy{
      width: 100%;
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 4px;
    }
  
  
    .moni-copy p{
  font-family: Jost;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: right;
  color: rgba(85, 85, 85, 1);
    }
  
  
  .moni-btn-container{
    display: flex;
    flex-direction: row;
    gap: 24px;
  }
  
  .moni-close{
    width:  137px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1.5px solid rgba(229, 229, 229, 1);
  background:rgba(246, 246, 246, 1);
  color:rgba(47, 47, 47, 1);
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  
  }
  
  
  .moni-generate{
    width:  100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1.5px solid rgba(193, 237, 226, 1);
    background:rgba(14, 155, 120, 1);
    color:rgba(246, 246, 246, 1);
  font-family: Jost;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  
  }
  
  

}


/* buy data css */

.buy-data-container{
    width: 100%;
border-radius: 40px;
border: 1.5px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
align-self: center;
display: flex;
flex-direction: column;
padding: 8px;
gap: 16px;
}


.sub-text{
font-family: Jost;
font-size: 18px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(115, 115, 115, 1);
}

.buy-data-container h1{
    font-family: Kanit;
    font-size: 30px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0em;
    text-align: center;
    color: rgba(19, 19, 19, 1);
}


.drop-box-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drop-box-content{
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.input-label{
font-family: Jost;
font-size: 16px;
font-weight: 600;
letter-spacing: 0em;
text-align: left;
color:rgba(47, 47, 47, 1);
}

.drop-lead{
    display: flex;

    width: 76px;
height: 55px;
padding: 8px;
border-radius: 20px;
gap: 4px;
background: rgba(229, 229, 229, 1);
align-items: center;
}

.drop-end{
    width: 100%;
height:55px;
border-radius: 20px;
border: 1.5px solid rgba(221, 221, 221, 1);
background: rgba(229, 229, 229, 1);
padding: 8px;
outline: none;
font-family: Jost;
font-size: 16px;
font-weight: 500;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
}


.drop-lead img{
    border-radius: 10px;
    height: 38px;
    width: 38px;
}

.drop-end {
    display: flex;
    justify-content: space-between;
}

.prefer-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prefer-image-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.prefer-image-container img, .prefer-image-container .loading-bar{
    width: 50px;
    height: 50px;
  border-radius: 8px

}

.buy-data-primary{
font-family: Jost;
font-size: 16px;
font-weight: 600;
letter-spacing: 0em;
text-align: left;
color: rgba(246, 246, 246, 1);
height: 55px;
border-radius: 20px;
border: 1.5px solid rgba(15, 38, 235, 1);
background: rgba(1, 20, 181, 1);
display: flex;
align-items: center;
justify-content: center;
}

@media only screen and (min-width: 992px) {

    .buy-data-container{
        width: 538px;
    border-radius: 40px;
    border: 1.5px solid rgba(229, 229, 229, 1);
    background: rgba(242, 242, 242, 1);
    align-self: center;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 24px;
    }
    
    
    .sub-text{
    font-family: Jost;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(115, 115, 115, 1);
    }
    
    .buy-data-container h1{
        font-family: Kanit;
        font-size: 40px;
        font-weight: 600;
        line-height: 48px;
        letter-spacing: 0em;
        text-align: center;
        color: rgba(19, 19, 19, 1);
    }
    
    
    .drop-box-container{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .drop-box-content{
        display: flex;
        flex-direction: row;
        gap: 16px;
    }
    
    .input-label{
    font-family: Jost;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    color:rgba(47, 47, 47, 1);
    }
    
    .drop-lead{
        display: flex;
    
        width: 76px;
    height: 56px;
    padding: 8px;
    border-radius: 20px;
    gap: 4px;
    background: rgba(229, 229, 229, 1);
    align-items: center;
    }
    
    .drop-end{
        width: 100%;
    height:56px;
    border-radius: 20px;
    border: 1.5px solid rgba(221, 221, 221, 1);
    background: rgba(229, 229, 229, 1);
    padding: 10px;
    outline: none;
    font-family: Jost;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(85, 85, 85, 1);
    }
    
    
    .drop-lead img{
        border-radius: 10px;
        height: 40px;
        width: 40px;
    }
    .foneToolTip .bi-database{
      color: #394df8;
    }
    
    .drop-end {
        display: flex;
        justify-content: space-between;
    }
    
    .prefer-container{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .prefer-image-container{
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
    }
    
    .prefer-image-container img, .prefer-image-container .loading-bar{
      width: 90px;
    height: 90px;
    border-radius: 8px
    }
    
    .buy-data-primary{
    font-family: Jost;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(246, 246, 246, 1);
    height: 56px;
    border-radius: 20px;
    border: 1.5px solid rgba(15, 38, 235, 1);
    background: rgba(1, 20, 181, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    }
}


/* buy electicity css */

.select-elect{
    font-family: Jost;
    font-size: 25px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0em;
    text-align: center;
    color:rgba(47, 47, 47, 1);
    
    }
    
    
    .view-all{
    font-family: Jost;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    color:rgba(85, 85, 85, 1);
    border: 1px solid rgba(221, 221, 221, 1);
    padding: 8px 16px;
    background: rgba(229, 229, 229, 1);
    border-radius: 20px;
    align-self: flex-start;
    }
    
    
    @media only screen and (min-width: 992px) {
        .select-elect{
            font-family: Jost;
            font-size: 28px;
            font-weight: 700;
            line-height: 36px;
            letter-spacing: 0em;
            text-align: center;
            color:rgba(47, 47, 47, 1);
            
            }
            
            
            .view-all{
            font-family: Jost;
            font-size: 18px;
            font-weight: 500;
            line-height: 26px;
            letter-spacing: 0em;
            text-align: left;
            color:rgba(85, 85, 85, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            padding: 8px 16px;
            background: rgba(229, 229, 229, 1);
            border-radius: 20px;
            align-self: flex-start;
            }
    }
    


@media (prefers-color-scheme: dark) {

  body, .header-section{
    background: rgba(19, 19, 19, 1) !important;

  }
  .header-section svg.open-sidebar{
    filter: invert(1) !important;
  }

  .image-light{
      display: none !important;
  }
  .image-dark{
      display: inline !important;
  }

  .sidebar-overlay{
    background: rgba(19, 19, 19, 0.85) !important;
  }

  .logo-section {
    background: rgba(47, 47, 47, 1) !important;
    /* background: none !important; */
  }
  .sidebar-menu-container {
    background: rgba(47, 47, 47, 1) !important;
    border: 1.5px solid rgba(85, 85, 85, 1) !important;
  }
  .menu-container.active > * {
    color: none !important;
  }

  .menu-container, .trans-outline, .notification-item, .moni-close, .dropdown-menu, .drop-lead, .drop-end,
  span.select2, .select2-dropdown {
    background: var(--BLK-03, rgba(65, 65, 65, 1)) !important;
    border: 1px solid var(--BLK-02, rgba(89, 89, 89, 1)) !important;
  }

  .menu-container p, .welcome-text, .action-header, .action-item p, .transaction-header, .table-content h5,
  .trans-done h3, .notification-header h1, .notification-header h4, .fund-container h1, .buy-data-container h1, .search-form h3{
    color: rgba(246, 246, 246, 1) !important;
  }

  .logout-container p {
    color: var(--RED-02, rgba(244, 45, 64, 1)) !important;

  }
  .logout-container .logout-icon{
    filter: invert(0) !important;
  }

  .close-icon{
    filter: invert(0.8);
  }

  .header-section {
    /* background: none !important; */
  }

  .icon-bg, .actions-container, .transaction-container{
    background: rgba(47, 47, 47, 1);
    border: 1.5px solid rgba(85, 85, 85, 1);
  }

  .icon-bg svg path{
    stroke: #E5E5E5 !important;
  }
  .user-icon svg path{
    fill: #E5E5E5 !important;
  }

  .close-sidebar svg path{
    stroke: none !important;
    fill: #E5E5E5 !important;
  }

  .loading-bar, .dropdown-menu a:hover {
    background: rgba(47, 47, 47, 1) !important;
  }

.overview, .overview-notification, .overlay > div, .buy-data-container{
  background: rgba(47, 47, 47, 1);
  border: 1.5px solid rgba(85, 85, 85, 1);
}

.overview-notification p, .current-container h1, .overview-transaction h1, .trans-outline, .form-check-label, .prefer-image-container small,
.log-container h3, .notification-container p, .notification-empty p, .fund-option-desc h3, .fund-option-desc p, .drop-lead.currency span,
.fund-container p, .moni-item p, .moni-close, .dropdown-menu .dropdown-item.prof, .input-label, #r_message li{
  color: rgba(229, 229, 229, 1) !important;
}

.current-container, .overview-transaction, .action-item{
  background: var(--BLU-06, rgba(11, 12, 21, 1)) !important;
  border: 1.5px solid var(--BLU-03, rgba(0, 6, 54, 1)) !important;
}

.current-container h3{
  color: var(--BLU-08, rgba(97, 114, 254, 1));
}
.overview-transaction h3{
  color: rgba(10, 183, 140, 1);
}

.table-header > div, .value, .fund-option-container p, .sub-text, .select2-results__option--selectable span,  .select2-results__option span, .select2-results__option,
.drop-l{
  color: rgba(242, 242, 242, 1) !important;
}

.table-content > div:nth-child(odd), .key-value:nth-child(odd), .fund-option-container > div:nth-child(odd),
.moni-container > div:nth-child(odd), .frequent-numbers p:nth-child(odd) {
  background: var(--BLK-03, rgba(65, 65, 65, 1)) !important;
}

.table-content > div:nth-child(even), .key-value:nth-child(even), .fund-option-container > div:nth-child(even),
.moni-container > div:nth-child(even), .frequent-numbers p:nth-child(even) {
  background: var(--BLK-04, rgba(84, 84, 84, 1)) !important;
}

.num , .table-price, .table-item p, .key, .drop-end, input, .fa-pwd, .buy-data-container p, span.freq-number,
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: rgba(229, 229, 229, 1) !important;
}

.table-view-more, .trans-primary, .buy-data-primary, .page-btn{
  background: var(--BLU-07, rgba(65, 84, 241, 1)) !important;
  border: 1px solid var(--BLU-00, rgba(36, 59, 253, 1)) !important;
}

.overlay svg.close rect{
  fill: #555555 !important;
  stroke: #737373 !important;
}
.overlay svg.close path{
  fill: #DDDDDD !important;
}
.moni-copy > svg path{
  stroke: #DDDDDD !important;
}
.moni-generate{
  border: none !important;
}

.exampin-img{
  filter: invert(1);
}

.bg-danger-subtle{
  color: #dc3545 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
  /* outline: none !important; */
  outline: rgba(89, 89, 89, 1) !important;
  background-color: transparent !important;
  color: rgba(229, 229, 229, 1) !important;
}
.select2-results__option.select2-results__message{
  color: rgba(229, 229, 229, 1) !important;
}
.foneToolTip .bi-database{
  color: #7281ff;
}



}