/* Font Face */
@font-face {
    font-family: 'BebasNeue';
    src: url('./../fonts/BebasNeue-Regular.ttf') format(truetype);
}

@font-face {
    font-family: 'Arvoku';
    src: url('./../fonts/Arvo/Arvo-Regular.ttf') format(truetype);
}

@font-face {
    font-family: 'RobotRocket';
    src: url('./../fonts/robot-rocket-font/RobotRocket-pgjdK.ttf') format(truetype);
}

@font-face {
    font-family: 'Montserratku';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format(truetype);
}

.stabilo-bs {
    color: #42D392 !important;
}

.stabilo-warning {
    color: #ffd700 !important;
}

/* Display */
.my-dnone {
    display: none;
}

.overlay, .overlayOpacity-05, .overlayOpacity-03, .overlayOpacity-01, .overlayOpacity-02 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);
}

.overlayOpacity-05 {
    background-color: rgba(0, 0, 0, .5);
}

.overlayOpacity-03 {
    background-color: rgba(0, 0, 0, .3);
}

.overlayOpacity-01 {
    background-color: rgba(0, 0, 0, .1);
}

.overlayOpacity-02 {
    background-color: rgba(0, 0, 0, .2);
}


/* Font Size / Weight */
.fs-12px {
    font-size: 12px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fw-bold {
    font-weight: bold;
}

.fw-700 {
    font-weight: 700;
}

.family-bebasneue {
    font-family: 'BebasNeue', Arial, Helvetica, sans-serif;
}

.family-arvo {
    font-family: 'Arvoku', 'BebasNeue', Arial, Helvetica, sans-serif;
}

.family-robotrocket {
    font-family: 'RobotRocket', 'BebasNeue', Arial, Helvetica, sans-serif;
}

.pointer {
    cursor: pointer;
}

.defaultcursor {
    cursor: default;
}


/* On Hover */
.onHoverOpacity1 {
    opacity: .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);
}

/* Transition */
.transition3ms {
    transition: .3s ease !important;
}

.transition5ms {
    transition: .5s ease !important;
}

.bgOverlayHover:hover {
    background: rgba(0, 0, 0, .3);
}

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

.bg-green {
    background-color: #42D392;
    background: #42D392;
}

.mymodal-alert {
    height: auto;
    background-color: #E8E8E8;
    border: 1px solid white;
}

.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: 100;
}

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

.bg-gradient-bs {
    background: -webkit-linear-gradient(315deg, #42d392 25%, #007BFF);
}

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

.bg-gradient-flare {
    background: linear-gradient(315deg, #f12711 0%, #f5af19 100%);
    background-blend-mode: normal;
}

.bg-gradient-frost {
    background: linear-gradient(315deg, #000428 0%, #004e92 100%);
    background-blend-mode: normal;
}

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



.bg-whitesmoke {
    background: #e8e8e8;
    background-color: #e8e8e8;
}

.neumorphism-btn {
    background-color: #e0e0e0;
    /* height: 300px !important; */
    /* border-radius: 50px; */
    box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;
    border: 2px solid rgb(206, 206, 206);
    color: #4d4d4d;
    cursor: pointer;
    transition: .2s !important;
}

.neumorphism-btn:hover {
    box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px aqua, -2px -2px 5px #ffffff;
}

.neumorphism-btn:active {
    outline: none;
    box-shadow: inset 6px 6px 10px #bcbcbc, inset -6px -6px 10px #ffffff;
}

body.darkmode .neumorphism-btn {
    background-color: #1B1F22 !important;
    box-shadow: inset 4px 4px 10px #212529, inset -4px -4px 10px #000 !important;
    border: 2px solid #3f4349 !important;
    color: #e8e8e8 !important;
}

body.darkmode .neumorphism-btn:hover {
    box-shadow: inset 2px 2px 5px #212529, inset -2px -2px 5px #000, 2px 2px 5px aqua, -2px -2px 5px #000 !important;
}

body.darkmode .neumorphism-btn:active {
    box-shadow: inset 6px 6px 10px #212529, inset -6px -6px 10px #000 !important;
}

.typed-cursor {
    font-size: 30px; /* Ukuran cursor */
    color: #1B1F22; /* Warna cursor */
}

body.darkmode .typed-cursor {
    color: #e8e8e8 !important; /* Warna cursor */
}
  
body {
    background-color: #e8e8e8;
    background: #e8e8e8;
    color: #4d4d4d;
}

body.darkmode {
    background-color: #1B1F22;
    background: #1B1F22;
    color: #e8e8e8 !important;
}

body.darkmode.authPage {
    background-color:black;
    background: #000000;
    color: white !important;
}


.changeMode {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 25px;
    left: 25px;
    /* background-color: #e8e8e8;
    background: #e8e8e8;
    box-shadow: inset 4px 4px 20px #bcbcbc, inset -4px -4px 20px #fff;
    border-radius: 50%; */
}

.signOut {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 25px;
    right: 25px;
    /* background-color: #e8e8e8;
    background: #e8e8e8;
    box-shadow: inset 4px 4px 20px #bcbcbc, inset -4px -4px 20px #fff;
    border-radius: 50%; */
}

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

.container-icon {
    width: 95%;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50%;
    /* background-color: #E20C0C !important; */
    /* border: 5px solid #ECB747; */
    /* color: #ECB747 !important; */
}

.changeTheme {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    /* background-color: #e8e8e8;
    background: #e8e8e8;
    box-shadow: inset 4px 4px 20px #bcbcbc, inset -4px -4px 20px #fff;
    border-radius: 50%; */
}

.settingSidebar {
    position: fixed;
    width: 350px;
    top: 0;
    bottom: 0;
    right: 0;
    /* background: #fff; */
    /* border-radius: 100px 0 0 100px; */
    box-shadow: -.5px 0 10px rgba(0, 0, 0, .3);
    transition: .5s ease !important;
    transform: translateX(100%);
    opacity: 0;
}

.settingSidebar.activatedSidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.boxTheme {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    border: 1px solid #e8e8e8;
    transition: .5s ease;
}

.boxTheme .activatedBoxTheme {
    border: 1px solid #007BFF;
    background: rgba(121, 186, 255, 0.407) !important;
    background-color: rgba(121, 186, 255, 0.407) !important;
    width: 100% !important;
    height: 100%;
    border-radius: inherit !important;
}

.activatedBoxTheme.position-absolute {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

body.darkmode .settingSidebar {
    background-color: #212529 !important;
    background: #212529 !important;
}

button {
    border-radius: 20px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    transition: transform 80ms ease-in !important;
}

button:active {
    transform: scale(0.95) !important;
}

button:focus {
    outline: none !important;
}


body {
    font-family: 'Montserratku', Arial, Helvetica, sans-serif;
}

.bg-gradient-custom {
    background: -webkit-linear-gradient(to top right, #ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff) !important;
    background: linear-gradient(to top right, #ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff) !important;
    background: -moz-linear-gradient(to top right, #ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff) !important;
    background: -o-linear-gradient(to top right, #ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff) !important;
}

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

.w-60vw {
    width: 60vw !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;
}

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

.scrollViewHorizontal {
    overflow-x: scroll !important;
}


.boxColorPreview, .boxDirectionGradient {
    transition: .5s ease;
    border-radius: 20px;
    width: 100%;
    /* height: 100%; */
    aspect-ratio: 1 / 1 !important;
    background-color: #000;
}


.pickr .pcr-button {
    width: 40px !important;
    aspect-ratio: 1 / 1 !important;
}

.roundedinherit {
    border-radius: inherit;
}

.boxDirectionGradient.activatedBoxDirection {
    box-shadow: 0 0 0 3px #e8e8e8, 0 0 0 5px #000;
}


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

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

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

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

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

/* Scrollbar style */

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

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

.scrollThinHorizontal::-webkit-scrollbar {
    height: 1px !important;
}

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

}

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


.lineActivity
{
    width: 1px;
    /* height: 100%; */
}

.text-green-bs {
    color: #42D392 !important;
}

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

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


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

.overlay-hover-orange:hover {
    background-color:#a9d7f5;
}


.overlay-active-orange:active {
    background-color:#065990;
}

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

.input-bs:focus {
    box-shadow: none !important;
    border: none;
    /* border-color: #007BFF !important;
    border: 2px solid; */
}

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

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

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

.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);
}

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

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

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

.ts-control {
    padding: 0 !important;
}

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

.ts-wrapper .ts-control>div  {
    background: linear-gradient(315deg, #50e8ff 0%, #0DCAF0 100%) !important;
    background-blend-mode: normal !important;
	/* background: #007BFF !important;
	background-color: #007BFF !important; */
	color: white !important;
	padding: 2% !important;
}

.custom-tooltip {
    --bs-tooltip-bg: #AA121A !important;
   --bs-tooltip-color: white !important;
}

.custom-tooltip2 {
    --bs-tooltip-bg: #0DCAF0 !important;
   --bs-tooltip-color: white !important;
}

.textAutoContrast {
    transition: color .3s ease;
}

.userManagement {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    left: 25px;
    /* background-color: #e8e8e8;
    background: #e8e8e8;
    box-shadow: inset 4px 4px 20px #bcbcbc, inset -4px -4px 20px #fff;
    border-radius: 50%; */
}

.bg-gradientred-bs {
    background: -webkit-linear-gradient(315deg, #cb2d3e 25%, #ef473a);
}

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

body.darkmode .mymodal-alert {
    background-color: #212529 !important;
    background: #212529 !important;
}

body.darkmode .mymodal-alert .container-fluid.bg-white {
    background-color: #1B1F22 !important;
    background:  #1B1F22 !important;
}

body.darkmode .mymodal-alert, body.darkmode .mymodal-alert .text-dark {
    color: white !important;
}

body.darkmode .containerLogActivityEl {
    background-color: #212529 !important;
    background: #212529 !important;
}

body.darkmode .containerLogActivityEl, body.darkmode .containerLogActivityEl .text-dark {
    color: white !important;
}

.rowUserManagement {
    border-bottom: .5px solid #e8e8e8;
}

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

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

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


body.darkmode .box-overlay.bg-white {
    background-color: rgba(0, 0, 0, .1) !important;
    background: rgba(0, 0, 0, .1) !important;
}

body.darkmode .mymodal-alert {
    border: none !important;
}

.shadowBlue {
    box-shadow: 2px 2px 5px aqua;
}

/* 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;
}

.w-fit-content {
    width: fit-content;
}

.h-fit-content {
    height: fit-content;
}

.containerElBgCustom {
    width: 100%;
    height: 60vh;
}

body.darkmode .boxProfil {
    background-color: #212529 !important;
    background: #212529 !important;
}

body.darkmode .input-bs {
    background-color: #1B1F22 !important;
    background: #1B1F22 !important;
    color: #e8e8e8 !important;
}

body.darkmode .input-bs::placeholder {
    color: #e8e8e8 !important;
}

body.darkmode .ts-control {
    background: transparent !important;
    color: #e8e8e8 !important;
}

body.darkmode .box-overlay.bg-whitesmoke {
    background-color: #212529 !important;
    background: #212529 !important;
}

a.text-decoration-visible, .text-decoration-visible {
    text-decoration: underline !important;
}

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

    40% {
        left: 120%;
    }

    60% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}