/* Font Face */
@font-face {
    font-family: 'Montserratku';
    src: url('./../font/Montserrat-VariableFont_wght.ttf') format(woff);
}


@font-face {
    font-family: 'OpenSauceSansKu';
    src: url('./../font/OpenSauceSans-Regular.woff') format(woff);
}

@font-face {
  font-family: "PublicSansKu";
  src: url("./../font/PublicSans-VariableFont_wght.ttf") format(truetype);
}

/* Style */
body, h1, h2, h3, h4, h5, h6 {
    /* background-color: #1A2035; */
    font-family: 'OpenSauceSansKu', "PublicSansKu", 'Montserratku', 'Montserrat', Arial, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.text-blue-bs {
    color: #007BFF;
}

.gradient-blue-bs {
    background: -webkit-linear-gradient(315deg, #42d392 25%, #007BFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box-form {
    height: 400px;
    border-radius: 30px;
    /* box-shadow: 3px 3px 20px white, -3px -3px 20px white; */
    background-color: white;
}


.box-button {
    width: 60vw;
}

.input-bs {
    /* font-size: 23px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px; */
    padding: 14px;
}

.input-bs:focus {
    box-shadow: none !important;
    border-color: #007BFF !important;
}


.input-bs2 {
  padding: 10px;
  box-shadow: none;
  border-color: var(--primary);
}

.input-bs2:focus {
  border-color: #dee2e6 !important;
  box-shadow: inset 0 -2px var(--primary);
}

.input-bs3 {
  padding: 10px;
  box-shadow: none;
  background: transparent !important;
  border-color: var(--primary);
}

.input-bs3:focus {
  border-color: transparent !important;
  box-shadow: inset 0 -2px var(--primary);
}



.input-bs4-success:focus {
    border-color: var(--success) !important;
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success), transparent 90%) !important;
}


button.btn-bs {
    border-radius: 20px;
    background-image:linear-gradient(#42D392, #56A1D2);
    border:none;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button.btn-bs:active {
    transform: scale(0.95);
}

.input-con {
    position: relative;
}

.input-con input {
    padding-left: 4rem !important;
}

.input-con .icon-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
}

.input-con:has(input:focus) .icon-search {
    fill: var(--success) !important;
}



/* Scrollbar style */
/* Scrollbar style */
.overflow-clip {
    overflow: clip !important;
}

.scrollViewVertical {
  overflow-y: scroll;
  /* color: ; */
  overflow-x: hidden !important;
}

.scrollViewHorizontal {
  overflow-y: hidden !important;
  /* color: ; */
  overflow-x: scroll !important;
}

.scrollViewVerticalAuto {
  overflow-y: auti;
  /* color: ; */
  overflow-x: hidden !important;
}

.scrollViewHorizontalAuto {
  overflow-y: hidden !important;
  /* color: ; */
  overflow-x: auto !important;
}

.scrollView::-webkit-scrollbar,
.col-form-auth::-webkit-scrollbar {
  width: 3px !important;
  position: absolute;
  margin: 0 !important;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(143, 143, 143);
  border-radius: 10px;
}

.scrollDisplayNone::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollDisplayThin::-webkit-scrollbar {
  scrollbar-width: 1px !important;
}

/* Login Page */
.video-bg, 
.video-bg-forgotpw {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    right: 0;
    bottom: 0;
}


.box-overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, .7);
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    left: 0;
    z-index: 9999 !important;
}

.box-login,
.box-register {
    height: 500px;
    margin: 30px auto;
    border-radius: 30px;
    /* box-shadow: -20px 5px 5px white; */
    background-color: white;

}

.size-60vw {
    width: 60vw;
}

.size-80vw {
    width: 80vw;
}

.img-box-login {
    width: 100% !important;
    height: 100% !important;
    background-color: #000;
    background-image: url('../img/img_poster_login@2x.png');
    background-position: center center;
    background-size: contain;
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    /* object-fit: cover;
    object-position: center center;
    -o-object-fit: cover;
    -o-object-position: center center; */

    border-radius: 30px 0 0 30px;
}

.col-form-auth, .scrollView {
    overflow-x: hidden;
    overflow-y: scroll;
}
/* .img-box-login img {
    border-radius: 30px;
} */

.box-img-upload {
    width: 150px;
    height: fit-content;
    height: -moz-fit-content;
    border-radius: 10px;
    border: 1px solid #5F6368;
    transition: .2s;
}

.box-img-upload:active {
    background-color: rgba(0, 0, 0, .1);
}

.oops-text {
    font-size: 70px;
    font-weight: bold;
}

.big-judul {
    font-size: 40px !important;
    font-weight: bold;
}

.box-btn-action 
{
    width: 300px;
    height: 180px;
    position: relative;
    /* background-color: #fff; */
    background-image: url('../img/bg_pattern1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 20px;
    border: 1px solid darkgray;
}

.box-btn-action img {
    width: 100px;
}

.wrapOverlayTransparent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    transition: .2s;

    background-color: rgba(255, 255, 255, 0);
    border-radius: inherit;
}

.wrapOverlayTransparent6 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    transition: .2s;

    background-color: rgba(0, 0, 0, .6);
    border-radius: inherit;
}

.wrapOverlayBlack {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    transition: .2s;

    background-color: rgba(0, 0, 0, .7);
    z-index: 100;
    border-radius: inherit;
}

.box-btn-action:active .wrapOverlayTransparent {
    background-color: rgba(255, 255, 255, .2);
}

.con-img-larger {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.con-img-larger img {
    z-index: 120 !important;
}

.pointer:hover {
    cursor: pointer !important;
}

.nyuutKedalem {
    transition: .3s;
}

.nyuutKedalem:active {
    transform: scale(.9);
}

.display-none {
    display: none;
}

.fit-content {
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
}

.letter-spacing-bs {
    letter-spacing: 9px;
}

.upLitleOnHover {
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.upLitleOnHover:hover {
    transform: translateY(-5%);
}

.bouncing-click, .bouncing-click-thin {
    transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bouncing-click:active {
    transform: scale(.9);
}

.bouncing-click-thin:active {
    transform: scale(.97) !important;
}

.more-rounded {
    border-radius: 50px;
}

.badge-white-blue {
    border: 2px solid #0783F5;
    background-color: white;
    transition: .4s ease;
    color: #605D5D;
    width: 100px;
}

.badge-white-blue.active-badge {
    background-color: #BCD8F1;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-nonecase {
    text-transform: none !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.bg-gradient-bs {
    background: -webkit-linear-gradient(90deg, #42d392, #007BFF) !important;
}

.header-profile {
    width: 100%;
    height: 120px;
    background: -webkit-linear-gradient(90deg, #42d392, #007BFF);
    margin-bottom: 100px;
}

.con-el-profile {
    padding-top: 30px;
    width: 200px;
    height: 200px;
}

.img-profile {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 20px solid black;
}

.middle-rounded {
    border-radius: 1em;
}

.header-profile .editImgProfile {
    position: absolute;
    bottom: 0;
    right: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.fs-smaller, .fs-smaller * {
    font-size: smaller;
}

.mymodal-alert {
    width: 40vw;
    height: auto;
    margin: 20vh auto;
    /* background-color: #1F283D; */
    /* border: 1px solid white; */
    border-radius: 1rem;
}

.bg-gradient-purple-ig {
    background: linear-gradient(180deg, #f507b6 0%, #6d3dcd 100%);
    background-blend-mode: normal;
}

.bg-gradient-myred {
    background: linear-gradient(180deg, #F50707 0%, #410000 100%);
    background-blend-mode: normal;
}


.hov-arrow-trans .arrow-trans {
    transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hov-arrow-trans:hover .arrow-trans {
    transform: translateX(50%);
}

.bg-gradient-ibiza-sunset {
    background: linear-gradient(180deg, #EE0979 0%, #FF6A00 100%);
    background-blend-mode: normal;
}

.gradient-ibiza-bs {
    background: -webkit-linear-gradient(315deg, #EE0979 25%, #FF6A00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Shine Effect */


.shine-effect {
    position: absolute;
    top: 0;
    left: -20%;
    width: 10%;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, .3);
    transform: skewX(-40deg);
    animation: slideShine 3s linear forwards infinite;
}



.box-sizing-bb {
    box-sizing: border-box !important;
}

.fs-mobile-1 {
    font-size: 24px !important;
}

.fs-mobile-2 {
    font-size: 20px !important;
}

.fs-mobile-3 {
    font-size: 16px !important;
}

.fs-mobile-4 {
    font-size: 12px !important;
}

.fs-mobile-5 {
    font-size: 8px !important;
}

.fs-mobile-6 {
    font-size: 6px !important;
}

.imgAccountCircle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.fit-content {
    width: fit-content !important;
    width: -moz-fit-content !important;
    height: fit-content !important;
    height: -moz-fit-content !important;
}

.w-fit-content {
    width: fit-content !important;
    width: -moz-fit-content !important;
}

.h-fit-content {
    height: fit-content !important;
    height: -moz-fit-content !important;
}

.overlay-hover, .overlay-active {
    transition: .5s;
}

.overlay-hover:hover {
    background-color: rgba(0, 0, 0, .1);
}

.overlay-active:active {
    background-color: rgba(0, 0, 0, .2);
}

.body-card-standard {
    height: 80vh;
}

.chat-bubble, .chat-bubble-2 {
    width: 100%;
    height: max-content;
    border-radius: 40px !important;
    background: -webkit-linear-gradient(90deg, #42d392, #007BFF);
    color: white;
    overflow-x: hidden;
}

.chat-bubble-2 {
    background: -webkit-linear-gradient(90deg, #9DC40F, #0D8DEA);
}

.fs-2px,
.fs-2px * {
  font-size: 2px !important;
}

.fs-3px,
.fs-3px * {
  font-size: 3px !important;
}

.fs-4px,
.fs-4px * {
  font-size: 4px !important;
}

.fs-5px,
.fs-5px * {
  font-size: 5px !important;
}

.fs-6px,
.fs-6px * {
  font-size: 6px !important;
}

.fs-7px,
.fs-7px * {
  font-size: 7px !important;
}

.fs-8px,
.fs-8px * {
  font-size: 8px !important;
}

.fs-9px,
.fs-9px * {
  font-size: 9px !important;
}

.fs-10px,
.fs-10px * {
  font-size: 10px !important;
}

.fs-11px,
.fs-11px * {
  font-size: 11px !important;
}


.fs-12px, .fs-12px * {
    font-size: 12px !important;
}

.fs-13px, .fs-13px * {
    font-size: 13px !important;
}

.fs-14px, .fs-14px * {
    font-size: 14px !important;
}

.fs-16px, .fs-16px * {
    font-size: 16px !important;
}

.fs-18px, .fs-18px * {
    font-size: 18px !important;
}

.fs-20px,
.fs-20px * {
  font-size: 20px !important;
}

.fs-22px,
.fs-22px * {
  font-size: 22px !important;
}

.fs-24px,
.fs-24px * {
  font-size: 24px !important;
}

.fs-25px,
.fs-25px * {
  font-size: 25px !important;
}

.fs-26px,
.fs-26px * {
  font-size: 26px !important;
}

.fs-27px,
.fs-27px * {
  font-size: 27px !important;
}

.fs-28px,
.fs-28px * {
  font-size: 28px !important;
}

.fs-29px,
.fs-29px * {
  font-size: 29px !important;
}

.fs-30px,
.fs-30px * {
  font-size: 30px !important;
}

.fs-35px,
.fs-35px * {
  font-size: 35px !important;
}

.fs-40px,
.fs-40px * {
  font-size: 40px !important;
}

.fs-50px,
.fs-50px * {
  font-size: 50px !important;
}

.fs-60px,
.fs-60px * {
  font-size: 60px !important;
}

.fs-80px,
.fs-80px * {
  font-size: 80px !important;
}

.fs-075rem {
  font-size: 0.75rem !important;
}

.searchMyAdvice:focus {
    border-color: #dee2e6 !important;
    box-shadow: inset 0 -2px #007BFF !important;
}

input.searchUsaha:focus {
    border-color: #dee2e6 !important;
    box-shadow: inset 0 -2px #007BFF !important;
}

.un_allow {
    cursor: not-allowed !important;
}

.myjumbotron {
    background: url('../img/bgWelcomeJumbotron.jpg');
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    padding-top: 130px;
}

.z-front {
    z-index: 9977 !important;
}

.linkHoverWhite {
    color: #cfcfcf;
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.linkHoverWhite:hover {
    color: white !important;
}

.delay-2 {
    animation-delay: 200ms !important;
}

.delay-3 {
    animation-delay: 300ms !important;
}

.delay-4 {
    animation-delay: 400ms !important;
}

.delay-5 {
    animation-delay: 500ms !important;
}

.indicatorVerticalScroll {
    position: fixed;
    width: 5px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    /* background-color: #fff; */
    height: 35vh;
}

.indicatorItem {
    width: 100%;
    display: block;
    height: 15%;
    background: #ffffffa8;
    border-radius: 5px;
    transition: .4s ease-in-out;
}

.indicatorItem.active {
    height: 40%;
    background: #fff !important;
}

.aboutJumbotron {
    background: #000;
}

.aspectratio1p1 {
    aspect-ratio: 1 / 1 !important;
}

.aspectratio16p9 {
    aspect-ratio: 16 / 9 !important;
}

.aspectratio4p3 {
    aspect-ratio: 4 / 3 !important;
}

.aspectratio2p1 {
    aspect-ratio: 2 / 1 !important;
}

.aspectratio4p5 {
    aspect-ratio: 4 / 5 !important;
}

.border-input, .dark-version .input-group.input-group-outline .form-control {
    border: 1px solid #d2d6da !important;
    border-color: #d2d6da !important;
}

.border-input:focus {
    border-color: #E83975 !important;
}


.ql-toolbar, .ql-editor {
    background-color: #181E39 !important;
    color: white;
}

/* Warna icon toolbar */

/* .ql-toolbar button svg {
    fill: white !important; 
} */

/* Warna icon pas di-hover */
/* .ql-toolbar button:hover svg {
    fill: #E83975 !important; 
} */

.ql-toolbar.ql-snow {
    border-top-left-radius: 1em !important;
    border-top-right-radius: 1em !important;
    border: 1px solid #E83975 !important;
}

.ql-container.ql-snow {
    padding: 0 !important;
    border-bottom-left-radius: 1em !important;
    border-bottom-right-radius: 1em !important;
    border: 1px solid #E83975 !important;
}

.ql-container.ql-snow .ql-editor {
    width: 100% !important;
    border-bottom-left-radius: 1em !important;
    border-bottom-right-radius: 1em !important;
}




.ql-editor.ql-blank::before {
    color: #fff !important; /* Warna abu-abu */
    font-style: italic; /* Mirip placeholder default */
}

/* .ql-editor *, .ql-editor::placeholder {
    color: white !important;
} */

.ql-font-arial {
    font-family: Arial, sans-serif;
}
.ql-font-poppins {
    font-family: 'Poppins', sans-serif;
}
.ql-font-roboto {
    font-family: 'Roboto', sans-serif;
}
.ql-font-times-new-roman {
    font-family: 'Times New Roman', serif;
}
.ql-font-monospace {
    font-family: monospace;
}

.ql-font-montserrat {
    font-family: 'Montserratku', 'Montserrat';
}

.ql-container {
    width: 100%;
    height: 200px !important;
    overflow-y: scroll !important;
    /* border-radius: 1em !important; */
}

.boxFilter {
    border-left: 4px solid #E91E63;
    /* border-right: 4px solid #E91E63 !important; */
}

.z-front2 {
    z-index: 99999 !important;
}


.ts-wrapper .ts-control, .ts-wrapper.multi .ts-control {
	border: none !important;
}

.ts-wrapper .ts-control>div,
.ts-wrapper.multi .ts-control>div  {
	/* background: #E91E63 !important;
	background-color: #E91E63 !important; */
    background: linear-gradient(315deg, var(--primary) 0%, var(--secondary) 100%);
    background-blend-mode: normal;
    padding: 15px;
    border-radius: 13px;
    font-size: 16px;
	color: white !important;
}

.ts-control {
    background: transparent !important;
    background-color: transparent !important;
}

/* .ts-control input {
	color: white;
} */


.fc-day {
    background: #EDEDED !important;
    background-color: #EDEDED !important;
}

.fc-other-month {
    color: #6C757D !important;
}

.fc-toolbar h2 {
    color: #FB8C00 !important;
}

.fc-state-default {
    background: #E83975 !important;
    background-color: #E83975 !important;
    color: white !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.75);
}

.fc-widget-header {
    background: #54AD58 !important;
    color: white !important;
    background-color: #54AD58 !important;
}

.taskManagementPage .fc-widget-header {
    background: #FB8C00 !important;
    color: white !important;
    background-color: #FB8C00 !important;
}

.fc-axis {
    background: #EDEDED !important;
    color: #737373 !important;
    background-color: #EDEDED !important;
}

.fc-event, .fc-event-dot {
    background-color: #FB8C00 !important;
    background: #FB8C00 !important;
    border: 1px solid #FB8C00 !important;
}

hr.horizontal.danger {
    background-image: linear-gradient(90deg, hsla(1, 79%, 59%, 0), #e94744, hsla(1, 79%, 59%, 0));
    height: 2.5px;
}

.moving-tab a, .moving-tab {
    /* background: #E91E63 !important; */
    /* background: linear-gradient(315deg, #EE0979 0%, #FF6A00 100%) !important;
    box-shadow: none !important;
    color: #E91E63 !important; */
}

.boxDisplayNamaFileImport {
    background: #eee;
}

.bg-dark2 {
    background-color: #1F283D;
    background: #1F283D;
}

.bg-goodaqua {
    background-color: #1EADBF;
    background: #1EADBF;
}

.bg-goodaqua2 {
    background-color: #91c0c6;
    background: #91c0c6;
}

.text-goodaqua {
    color: #1EADBF !important;
}

.myframegoogleAnalytics {
    width: 100% !important;
    height: 100vh !important;
}

.bg-dark3 {
    background-color: #181E39;
    background: #181E39;
}


/* Border Radius or Rounded Styling */
.rounded-circle {
  border-radius: 50% !important;
}

.more-rounded {
  border-radius: 50px;
}

.rounded-3px {
  border-radius: 3px;
}

.rounded-8px {
  border-radius: 8px;
}

.rounded-5px {
  border-radius: 5px;
}

.rounded-10px {
  border-radius: 10px;
}

.rounded-11px {
  border-radius: 11px;
}

.rounded-12px {
  border-radius: 12px;
}

.rounded-13px {
  border-radius: 13px;
}

.rounded-14px {
  border-radius: 14px;
}

.rounded-15px {
  border-radius: 15px;
}

.rounded-16px {
  border-radius: 16px;
}

.rounded-top-16px {
    border-radius: 16px 16px 0 0;
}

.rounded-bottom-16px {
    border-radius: 0 0 16px 16px;
}

.rounded-17px {
  border-radius: 17px;
}

.rounded-18px {
  border-radius: 18px;
}

.rounded-19px {
  border-radius: 19px;
}

.rounded-20px {
  border-radius: 20px;
}

.rounded-top-left-20px {
  border-top-left-radius: 20px;
}

.rounded-bottom-left-20px {
  border-bottom-left-radius: 20px;
}

.rounded-top-right-20px {
  border-top-right-radius: 20px;
}

.rounded-bottom-right-20px {
  border-bottom-right-radius: 20px;
}

.rounded-21px {
  border-radius: 21px;
}

.rounded-22px {
  border-radius: 22px;
}

.rounded-23px {
  border-radius: 23px;
}

.rounded-24px {
  border-radius: 24px;
}

.rounded-25px {
  border-radius: 25px;
}

.rounded-30px {
  border-radius: 30px;
}

.rounded-40px {
  border-radius: 40px;
}

.rounded-1em {
  border-radius: 1em;
}

.rounded-2em {
  border-radius: 2em;
}

.rounded-3rem {
  border-radius: 3rem;
}

.rounded-3em {
  border-radius: 3em;
}

.myrounded-4 {
    border-radius: 1rem !important;
}

.myrounded-5 {
    border-radius: 1.5rem !important;
}
/* ./ Border Radius or Rounded Styling */
/* .design-icon {
    width: 50px;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50%;
} */

.bggreen-pastel {
    background-color: #A7D9A7;
    background: #A7D9A7;
}


/* Width Styling */
.w-30px {
    width: 30px;
}

.w-40px {
    width: 40px;
}

.w-45px {
    width: 45px;
}

.w-50px {
    width: 50px;
}

.w-20px {
    width: 20px;
}

.w-15px {
    width: 15px;
}

.w-10px {
    width: 10px;
}

.w-70px {
    width: 70px;
}

.w-60px {
    width: 60px;
}


.w-50vw {
    width: 50vw !important;
}

.w-60vw {
    width: 60vw !important;
}

.w-70vw {
    width: 70vw !important;
}

.w-80vw {
    width: 80vw !important;
}

.w-90vw {
    width: 90vw !important;
}

.w-95vw {
    width: 95vw !important;
}

.w-100vw {
    width: 100vw !important;
}

.w-60 {
    width: 60% !important;
}

.w-40 {
    width: 40% !important;
}


.w-100px {
  width: 100px;
}

.w-120px {
  width: 120px;
}

.w-150px {
  width: 150px;
}

.w-180px {
  width: 180px;
}

.w-200px {
  width: 200px;
}

.w-300px {
  width: 300px;
}

.w-350px {
  width: 350px;
}



/* Height Styling */
.h-30px {
    height: 30px;
}

.h-40px {
    height: 40px;
}

.h-50px {
    height: 50px;
}

.h-20px {
    height: 20px;
}

.h-15px {
    height: 15px;
}

.h-10px {
    height: 10px;
}

.h-70px {
    height: 70px;
}

.h-60px {
    height: 60px;
}

.h-100px {
    height: 100px;
}

.h-220px {
    height: 220px;
}

.h-1000px {
    height: 1000px;
}

.h-100vh {
    height: 100vh !important;
}

.h-75vh {
    height: 75vh !important;
}

.h-60vh {
    height: 60vh !important;
}

.h-50vh {
    height: 50vh !important;
}

.h-25vh {
    height: 25vh !important;
}



.conic-icon {
    padding: 10%;
    border-radius: 50%;
}


/* --- Customisasi Warna Ikon Quill di Sini! --- */
/* Targetkan toolbar dan atur variabel CSS --ql-color */
.ql-toolbar.ql-snow {
    /* background-color: #333; Latar belakang toolbar gelap */
    /* border-bottom: 1px solid #555; */
    --ql-color: white !important; /* Mengatur warna ikon dan teks toolbar menjadi putih */
}

/* Jika Anda ingin warna ikon saat di-hover/active juga berubah */
.ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--ql-color) !important; /* Pastikan ini mengambil dari variabel */
}
.ql-toolbar.ql-snow .ql-fill {
    fill: var(--ql-color) !important; /* Pastikan ini mengambil dari variabel */
}
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--ql-color) !important; /* Warna teks untuk dropdown seperti font size */
}
.ql-toolbar.ql-snow .ql-active .ql-stroke {
    stroke: #E91E63 !important; /* Warna ikon aktif/terpilih */
}
.ql-toolbar.ql-snow .ql-active .ql-fill {
    fill: #E91E63 !important; /* Warna ikon aktif/terpilih */
}


.my-dnone {
    display: none;
}

.dnoneall, .dnoneall * {
    display: none;
}

/* Transition Styling */
.transition-3ms {
    transition: 3ms ease !important;
}

.transition-500ms {
    transition: .5s ease !important;
}

.transition-1s {
    transition: 1s ease !important;
}

.transition-2s {
    transition: 2s ease !important;
}

.transition-3s {
    transition: 3s ease !important;
}

/* ./ Transition Styling */

.rotate180deg {
    transform: rotate(180deg) !important;
}

.rotate270deg {
    transform: rotate(270deg) !important;
}

.mh-200px {
    max-height: 200px !important;
}

.mh-280px {
    max-height: 280px !important;
}

.mw-150px {
    max-width: 150px !important;
}

.kotakWarna span {
    opacity: 0 !important;
}

.kotakWarna.selectedTheme span {
    opacity: 1 !important;
}

.bg-gradient-faded-maroon {
    /* Konsep sama: radial gradient, titik pusat mirip, fade dari transparan ke solid */
    background-image: radial-gradient(370px circle at 80% 50%, rgba(139, 0, 0, 0.6) 0, rgb(70, 0, 0) 100%);
    /*
    Penjelasan:
    - rgba(139, 0, 0, 0.6): Ini warna maroon standar (DarkRed), tapi dengan opacity 60%. Ini akan jadi titik terang/pudar awal.
    - rgb(70, 0, 0): Ini warna maroon yang jauh lebih gelap dan pekat. Ini akan jadi titik fokus di tengah.
    */
}

.bg-gradient-faded-navy {
    /* Konsep sama: radial gradient, titik pusat mirip, fade dari transparan ke solid */
    background-image: radial-gradient(370px circle at 80% 50%, rgba(0, 0, 80, 0.6) 0, rgb(0, 0, 40) 100%);
    /*
    Penjelasan:
    - rgba(0, 0, 80, 0.6): Ini warna biru navy gelap dengan opacity 60%.
    - rgb(0, 0, 40): Ini warna biru yang sangat gelap, mendekati hitam kebiruan.
    */
}

.bg-gradient-faded-plum {
    /* Konsep sama: radial gradient, titik pusat mirip, fade dari transparan ke solid */
    background-image: radial-gradient(370px circle at 80% 50%, rgba(80, 0, 80, 0.6) 0, rgb(40, 0, 40) 100%);
    /*
    Penjelasan:
    - rgba(80, 0, 80, 0.6): Ini warna ungu gelap (mirip plum/grape) dengan opacity 60%.
    - rgb(40, 0, 40): Ini versi ungu yang lebih pekat dan gelap.
    */
}

.bg-navy {
    background: #02B8FF !important;
    background-color: #02B8FF !important;
}

/* Styling dasar untuk tombol */

/* Pseudo-element ::before untuk membuat gradient animasi */
.futuristic-gradient-button {
    /* Ukuran dan bentuk */
     /* Padding internal tombol */
     /* Ukuran teks */
    
     /* Warna teks */
    border: none;
    border-radius: 9999px; /* Membuat tombol sangat rounded (pill shape) */
    cursor: pointer;
    overflow: hidden; /* Penting untuk menyembunyikan bagian gradient yang bergerak di luar batas */
    position: relative; /* Penting agar pseudo-element bisa diposisikan absolut di dalamnya */
    z-index: 1; /* Memastikan tombol di atas pseudo-element */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), /* Bayangan untuk efek kedalaman */
                0 6px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transisi untuk efek hover */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Bayangan teks agar lebih jelas */
    /* Pastikan background default tidak terlihat */
    background-color: transparent;
}
.futuristic-gradient-button::before {
content: ''; /* Konten kosong, wajib untuk pseudo-element */
position: absolute; /* Posisikan absolut di dalam tombol */
top: 0;
left: 0;
width: 200%; /* Lebar gradient 2x dari tombol, agar bisa digeser */
height: 100%;
/* Definisi gradient warna Google Asli */
background: linear-gradient(
90deg, /* Arah gradient dari kiri ke kanan */
#3E98EF 0%,   /* Google Blue */
#E69ECE 20%,  /* Google Red */
#3E98EF 40%,  /* Google Yellow */
#FF6A00 60%,
#E83975 80%,  /* Google Green */
#3E98EF 100%  /* Kembali ke Google Blue untuk transisi mulus saat looping */
);
background-size: 200% 100%; /* <<< PERUBAHAN: Ukuran background kembali ke 200% untuk 4 warna */
animation: gradient-animation 5s linear infinite alternate-reverse; /* <<< PERUBAHAN: Durasi animasi kembali ke 8s */
z-index: -1; /* Posisikan di belakang teks tombol */
border-radius: 9999px; /* Ikuti border-radius tombol */
}

/* Definisi keyframes untuk animasi gradient */
@keyframes gradient-animation {
0% {
background-position: 0% 50%; /* Mulai dari posisi paling kiri gradient */
}
100% {
background-position: 100% 50%; /* Geser gradient ke kanan penuh */
}
}

/* Efek saat tombol di-hover */
.google-gradient-button {
    /* Ukuran dan bentuk */
    padding: 1rem 2.5rem; /* Padding internal tombol */
    font-size: 1.5rem; /* Ukuran teks */
    font-weight: bold;
    color: white; /* Warna teks */
    border: none;
    border-radius: 9999px; /* Membuat tombol sangat rounded (pill shape) */
    cursor: pointer;
    overflow: hidden; /* Penting untuk menyembunyikan bagian gradient yang bergerak di luar batas */
    position: relative; /* Penting agar pseudo-element bisa diposisikan absolut di dalamnya */
    z-index: 1; /* Memastikan tombol di atas pseudo-element */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), /* Bayangan untuk efek kedalaman */
                0 6px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transisi untuk efek hover */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Bayangan teks agar lebih jelas */
    /* Pastikan background default tidak terlihat */
    background-color: transparent;
}

.textwhite-allchild * {
    color: white;
}

.mt-10vh{
    margin-top: 10vh !important;
}

.custom-tooltip {
    font-family: 'Montserratku', 'Montserrat', 'BebasNeue', 'Robotoku', 'Arvoku', 'Source Sans Pro', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
    /* --bs-tooltip-bg: #42D392 !important; */
    --bs-tooltip-bg: var(--primary) !important;
    --bs-tooltip-color: white !important;
    z-index: 99999 !important;
}

.textunset {
    color: unset;
}

/* Border Styling */
.border-01px {
  border-width: 0.1px !important;
}

.border-03px {
  border-width: 0.3px !important;
}

.border-05px {
  border-width: 0.5px !important;
}

.border-1px {
  border-width: 1px !important;
}

.border-2px {
  border-width: 2px !important;
}

.border-3px {
  border-width: 3px !important;
}

.border-4px {
  border-width: 4px !important;
}

.border-5px {
  border-width: 5px !important;
}

.border-6px {
  border-width: 6px !important;
}

.border-7px {
  border-width: 7px !important;
}

.border-8px {
  border-width: 8px !important;
}

.border-9px {
  border-width: 9px !important;
}

.border-10px {
  border-width: 10px !important;
}

.border-solid {
    border-style: solid;
}

.border-solid-transparent {
    border-style: solid;
    border-color: transparent;
}

.text-shadow-white {
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 1);
}

.border-stack {
    border: 2px dashed grey;
    border-radius: 10px;
}
/* ./ Border Styling */

/* Bg Styling */
.bg-indigoku {
  background-color: #161380;
  color: white;
}

.bg-indigo {
  background-color: #312E81;
}

.bg-indigo-2 {
    background-color: rgb(129 140 248 / 0.2);
}


.border-indigo {
    border-color: rgb(129 140 248 / 0.3);
}

.bg-indigo-2:hover {
  background-color: rgb(129 140 248 / 0.4);
}

.bg-indigo-2:active {
  background-color: rgb(129 140 248 / 0.3);
}

.bg-indigo3 {
    background: #4F46E5;
    background-color: #4F46E5;
}

.bg-slate {
    background-color: rgba(219, 232, 245, 0.5);
    background: rgba(219, 232, 245, 0.5);
}
/* ./ Bg Styling */


.conDesignSelectingBox {
  padding: 10px;
  box-sizing: border-box;
  transition: 0.5s;
  border-radius: 15px;
  border: 2px solid transparent;
}

.conDesignSelectingBox.primary-box.activated {
  background: color-mix(in srgb, var(--primary), transparent 85%) !important;
  border: 2px solid var(--primary) !important;
}

.conDesignSelectingBox.primary-box.text-onactivated.activated * {
  color: var(--primary) !important;
}

.conDesignSelectingBox.secondary-box.activated {
  background: color-mix(in srgb, var(--secondary), transparent 85%) !important;
  border: 2px solid var(--secondary) !important;
}

.conDesignSelectingBox.secondary-box.text-onactivated.activated * {
  color: var(--secondary) !important;
}

.conDesignSelectingBox.success-box.activated {
  background: color-mix(in srgb, var(--success), transparent 85%) !important;
  border: 2px solid var(--success) !important;
}

.conDesignSelectingBox.success-box.text-onactivated.activated * {
  color: var(--success) !important;
}

.conDesignSelectingBox.warning-box.activated {
  background: color-mix(in srgb, var(--warning), transparent 85%) !important;
  border: 2px solid var(--warning) !important;
}

.conDesignSelectingBox.warning-box.text-onactivated.activated * {
  color: var(--warning) !important;
}

.conDesignSelectingBox.info-box.activated {
  background: color-mix(in srgb, var(--info), transparent 85%) !important;
  border: 2px solid var(--info) !important;
}

.conDesignSelectingBox.info-box.text-onactivated.activated * {
  color: var(--info) !important;
}

.conDesignSelectingBox.danger-box.activated {
  background: color-mix(in srgb, var(--danger), transparent 85%) !important;
  border: 2px solid var(--danger) !important;
}

.conDesignSelectingBox.danger-box.text-onactivated.activated * {
  color: var(--danger) !important;
}

.conDesignSelectingBox.dark-box.activated {
  background: color-mix(in srgb, var(--dark), transparent 85%) !important;
  border: 2px solid var(--dark) !important;
}

.conDesignSelectingBox.dark-box.text-onactivated.activated * {
  color: var(--dark) !important;
}

.conDesignSelectingBox.light-box.activated {
  background: color-mix(in srgb, var(--light), transparent 85%) !important;
  border: 2px solid var(--light) !important;
}

.conDesignSelectingBox.light-box.text-onactivated.activated * {
  color: var(--light) !important;
}

.my-sticky {
    position: sticky;
}

.my-stickytop {
  position: sticky !important;
  top: 15px !important;
}

.my-stickytop-0px {
  position: sticky !important;
  top: 0px !important;
}

.my-stickybottom {
  position: sticky !important;
  bottom: 15px !important;
}

.my-stickybottom-0px {
  position: sticky !important;
  bottom: 0px !important;
}

/* On Hover Styling */
.onHoverOpacity1 {
  opacity: 0.7;
}

.onHoverOpacity1:hover {
  opacity: 1;
}

.onHoverUpLitle {
  transform: translateY(0);
}

.onHoverUpLitle:hover {
  transform: translateY(-2%);
}

.onHoverUp {
  transform: translateY(0);
}

.onHoverUp:hover {
  transform: translateY(-10%);
}

.onHoverScaleZoom {
  transform: scale(1);
}

.onHoverScaleZoom:hover {
  transform: scale(1.2);
}

.onHoverBgOverlay {
  background: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}

.onHoverBgOverlay:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.onHoverBgOverlay2 {
  background: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}

.onHoverBgOverlay2:hover {
  background: #DDE3EA !important;
  background-color: #DDE3EA !important;
}

.onHoverTextOrange {
  color: auto !important;
}

.onHoverTextOrange:hover {
  color: #f15d30 !important;
}

.onHoverBorderThemeOrange:hover {
  border: 2px solid #e75b1e !important;
}

.onHoverColorTextGreen:hover {
  color: #46c256 !important;
}
/* ./ On Hover Styling */

/* Shadow Styling */
.shadow-thin-top {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.05);
}

.shadow-thin-bottom {
    box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.05);
}
/* ./ Shadow Styling */

/* Position Styling */
.t-0 {
    top: 0;
}

.l-0 {
    left: 0;
}

.r-0 {
    right: 0;
}

.b-0 {
    bottom: 0;
}
/* ./ Position Styling */

/* Select2 Input Custom */
select, .select2-container--bootstrap4 .select2-selection, textarea {
  border-radius: 0.7em !important;
}
/* ./ Select2 Input Custom */


/* Backdrop Styling */
.backdrop-blur-12px {
    -webkit-backdrop-filter: blur(12px);
    -moz-backdrop-filter: blur(12px);
    -o-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* ./ Backdrop Styling */


/* Margin & Padding Styling */
.p-14px {
    padding: 14px;
}

.p-16px {
    padding: 16px;
}

.mt-100px {
    margin-top: 100px;
}

.mt-105px {
    margin-top: 105px;
}

.mt-110px {
    margin-top: 110px;
}
/* ./ Margin & Padding Styling */

/* On Focus Border Styling */
.onFocusBorder-primary:focus {
    border-color: var(--primary) !important;
}

.onFocusBorder-secondary:focus {
    border-color: var(--secondary) !important;
}

.onFocusBorder-success:focus {
    border-color: var(--success) !important;
}

.onFocusBorder-danger:focus {
    border-color: var(--danger) !important;
}

.onFocusBorder-warning:focus {
    border-color: var(--warning) !important;
}

.onFocusBorder-info:focus {
    border-color: var(--info) !important;
}

.onFocusBorder-dark:focus {
    border-color: var(--dark) !important;
}

.onFocusBorder-light:focus {
    border-color: var(--light) !important;
}
/* ./ On Focus Border Styling */

/* On Focus Background Styling */
.onFocusBg-white:focus {
    background: white !important;
}
/* ./ On Focus Background Styling */


/* Font Styling */
.ff-publicsans,
.ff-publicsans * {
  font-family: "PublicSansKu", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.ff-montserrat,
.ff-montserrat * {
  font-family: "Montserratku", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}


.ff-opensaucesans,
.ff-opensaucesans * {
  font-family: 'OpenSauceSansKu', 'Montserratku', 'Montserrat', Arial, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.ff-publicsans2 {
  font-family: "PublicSansKu", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
}

.ff-montserrat2 {
  font-family: "Montserratku", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
}

.ff-opensaucesans2 {
  font-family: 'OpenSauceSansKu', 'Montserratku', 'Montserrat', Arial, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.font-unset {
  font-family: unset;
}

.format-1line {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis !important;
    word-break: break-word;

    /* Opsional: Atur line-height agar tinggi konsisten */
    line-height: 1.4;
}

.format-2line {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis !important;
    word-break: break-word;

    /* Opsional: Atur line-height agar tinggi konsisten */
    line-height: 1.4;
}

.format-3line {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis !important;
    word-break: break-word;

    /* Opsional: Atur line-height agar tinggi konsisten */
    line-height: 1.4;
    /* max-height: 4.2em; 3 baris * 1.4 line-height */
}
/* ./ Font Styling */


/* .modalAnalyticBarangAi,
.modalAnalyticDeskripsiBarangAi,
.modalAnalyticDeskripsiDanHargaJualBarangAi {
    width: 80vw;
    height: 80vh;
    margin: 0 auto;
    border-radius: 1rem;
    background-color: #181E39;
} */


/* My Tabs Styling */
/* .mytabs .tabcontent {
    transition: .5s;
    display: none;
    opacity: 0;
}

.mytabs .tabcontent.active {
    display: block;
    opacity: 1;
} */
/* ./ My Tabs Styling */

/* General Styling */
.myIklanCard,
.myIklanCard .bodyBox,
.myIklanCard img {
    transition: .5s;
}
.myIklanCard:hover img {
    transform: scale(1.2);
}

.myIklanCard:hover {
    box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.05);
}

.myIklanCard:hover .bodyBox {
    transform: translateY(-10px);
}

.imagesMultipleContainer {
    position: relative;
}
.imagesMultipleContainer img {
    height: 75%;
    border-radius: 30px;
    box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.05);
    transition: .5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: absolute;
    z-index: var(--zindex);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: white;
    rotate: z var(--rotatedeg);
}

.imagesMultipleContainer img:first-child {
    rotate: 0deg;
}

.imagesMultipleContainer img:nth-child(even) {
    rotate: z 10deg;
}

.imagesMultipleContainer img:nth-child(odd) {
    rotate: z -10deg;
} 

.imagesMultipleContainer img.activefront {
    z-index: var(--zindex-last);
    rotate: z 0deg;
}

/* ./ General Styling */
/* Animation */
@keyframes slideShine {
    0% {
        left: 0;
    }

    40% {
        left: 120%;
    }

    60% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}