.btn-bg-rose{
    background-color: #d97979;
    color: #fff;
    border: solid 1px #db8080;
}
.btn-bg-rose:hover{
    background-color: #393939;
    color: #fff;
    border: solid 1px #3a3a3a;
}
.btn-bg-rose2{
    background-color: #F59AA0;
    color: #fff;
    border: solid 1px #f59aa0;
}
.btn-bg-rose2:hover{
    background-color: #393939;
    color: #fff;
    border: solid 1px #3a3a3a;
}
.btn-bg-rose3{
    background-color: #e37d3e;
    color: #ffffff;
    border: solid 1px #f6bf98;
}
.btn-bg-rose3:hover{
    background-color: #393939;
    color: #ffffff;
    border: solid 1px #3a3a3a;
}
.btn-outline-bg-rose{
    background-color: #e48e71;
    color: #ffffff;
    border: solid 1.5px #dc8e72;
}
.btn-outline-bg-rose:hover{
    background-color: #f6aa8f;
    color: #ffffff;
    border: solid 1px #f6aa8f;
}
.btn-bg-maroon{
    background-color: #c50031;
    color: #ffffff;
    border: solid 1px #f0194f;
    border-radius: 0.75rem;
}
.btn-bg-maroon:hover{
    background-color: #f0194f;
    color: #ffffff;
    border: solid 1px #f0194f;
    border-radius: 0.75rem;
}
.btn-bg-gray{
    background-color: #7e7e7e;
    color: #ffffff;
    border: solid 1px #8f8f8f;
}
.btn-bg-gray:hover{
    background-color: #3a3a3a;
    color: #ffffff;
    border: solid 1px #3a3a3a;
}
.btn-bg-yellow{
    background-color: #efa803;
    color: #ffffff;
    border: solid 1.5px #f2bd43;
    border-radius: 0.75rem;
}
.btn-bg-yellow:hover{
    background-color: #3a3a3a;
    color: #ffffff;
    border: solid 1.5px #3a3a3a;
    border-radius: 0.75rem;
}
.btn-bg-orange{
    background-image: linear-gradient(to right, #fea135 0%, #F09819  21%, #e67b10 100%);
    margin: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    border-radius: 0.5rem;
}

.btn-orange{
    background-color: #FD9E02;
    color: #fff;
    border: solid 1px #FD9E02;
    border-radius: 0.75rem;
}
.btn-orange:hover{
    background-color: #FFB703;
    color: #fff;
    border: solid 1px #FFB703;
    border-radius: 0.75rem;
}
.btn-cyan{
    background-color: #126782;
    color: #ffffff;
    border: solid 1px #126782;
    border-radius: 0.75rem;
}
.btn-cyan:hover{
    background-color: #219EBC;
    color: #ffffff;
    border: solid 1px #219EBC;
    border-radius: 0.75rem;
}
.btn-bluedeep{
    background-color: #004669;
    color: #ffffff;
    border: solid 1px #004669;
    border-radius: 0.75rem;
}
.btn-bluedeep:hover{
    background-color: #219EBC;
    color: #000;
    border: solid 1px #219EBC;
    border-radius: 0.75rem;
}

.btn-bg-roselight2{
    background-color: #d97979;
    color: #ffffff;
    border: solid 1px #cf6e6e;
    box-shadow: 1px 1px 3px rgba(1, 1, 1, 3, 0.5);
}
.btn-bg-roselight2:hover{
    background-color: #3a3a3a;
    color: #ffffff;
    border: solid 1px #3a3a3a;
    box-shadow: 1px 1px 3px rgba(1, 1, 1, 3, 0.5);
}

.bg-welcome{
    background-image: url('../img/bg2.png');
    background-position: center;
    width: 100%;
    height: 90vh;
    background-repeat: no-repeat;
    background-size: cover;
}
.sosial-media{
    width: 30%;
    height: 15vh;
    background-color: #fff;
}
.grad1 {
    background: rgb(75,81,124);
    background: linear-gradient(30deg, rgba(75,81,124,1) 0%, rgba(89,94,126,1) 50%, rgba(172,176,201,1) 100%);
    background: -moz-linear-gradient(30deg, rgba(75,81,124,1) 0%, rgba(89,94,126,1) 50%, rgba(172,176,201,1) 100%);
    background: -webkit-linear-gradient(30deg, rgba(75,81,124,1) 0%, rgba(89,94,126,1) 50%, rgba(172,176,201,1) 100%);   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4568dc",endColorstr="#b06ab3",GradientType=1); 
} 

.grad2 {
    background: rgb(33,37,41);
    background: linear-gradient(30deg, rgba(33,37,41,1) 0%, rgba(67,73,79,1) 50%, rgba(85,91,97,1) 100%);
    background: -moz-linear-gradient(30deg, rgba(33,37,41,1) 0%, rgba(67,73,79,1) 50%, rgba(85,91,97,1) 100%);
    background: -webkit-linear-gradient(30deg, rgba(33,37,41,1) 0%, rgba(67,73,79,1) 50%, rgba(85,91,97,1) 100%);   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#212529",endColorstr="#555b61",GradientType=1); 
} 

.btn-grad {
    background-image: linear-gradient(to right, #e58f27 0%, #b35d12  51%, #e58027  100%);
    margin: 2px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    /* box-shadow: 0 0 20px #eee; */
    border-radius: 0.5rem;
}

.btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

         
.btn-grad2 {
    background-image: linear-gradient(to right, #ff712f 0%, #F09819  51%, #ff712f  100%);
    margin: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    border-radius: 0.5rem;
}

  .btn-grad2:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
         
.btn-grad3 {
    background-image: linear-gradient(to right, #1c8909 0%, #1b6104  51%, #28aa07  100%);
    margin: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    border-radius: 0.5rem;
}

  .btn-grad3:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
         
.btn-grad4 {
    background-image: linear-gradient(to right, #136a8a 0%, #267871  51%, #136a8a  100%);
    margin: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    border-radius: 0.5rem;
}

.btn-grad4:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
 
.dark-mode .input-group-text {
    color: #fff;
    background-color: #b8621b;
}

/* Fix sidebar overflow boundaries */
.layout-fixed .main-sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.layout-footer-fixed.layout-fixed .main-sidebar {
    height: 100vh;
    padding-bottom: 0;
}

.layout-fixed .main-sidebar .brand-link {
    flex-shrink: 0;
}

.layout-fixed .sidebar {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0; /* Penting untuk flexbox */
}

.layout-footer-fixed.layout-fixed .sidebar {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0; /* Penting untuk flexbox */
}

.sidebar nav {
    height: 100%;
    overflow: visible;
    min-height: 0;
}

.sidebar .nav-sidebar {
    height: auto;
    overflow: visible;
}