/* Tipography */
.fs14pxrem {
    font-size: 0.875rem
}
.fs18pxrem {
    font-size: 1.125rem
}
.fs24pxrem {
    font-size: 1.5rem
}

.fs20pxrem {
    font-size: 1.25rem
}
.fs26pxrem {
    font-size: 1.625rem
}
.fs28pxrem {
    font-size: 1.75rem
}

.fs32pxrem {
    font-size: 2rem
}

.fs40pxrem {
    font-size: 2.5rem
    }
.fs44pxrem {
    font-size: 2.75rem
}
.fs48pxrem {
    font-size: 3rem
}
.fs60pxrem {
    font-size: 3.75rem
}

.textblack {
    color: #000
}

.font-bold {
    font-weight: bold
}


/* Widget */

.boxwidget {
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 20px

}
.boxwidgetnonshadow {
    background-color: #fff;
    border-radius: 25px;
    border: 1px solid #E3E8EF;
    padding: 25px;
    margin-bottom: 20px

}
.boxpengajuan {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 25 25px 0 rgba(0, 0, 0, 0.1);
    /* padding: 25px; */
    margin-bottom: 20px

}

.activenavigation {
    background-color: #E3E8EF;
}

.boxtooltip {
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 2px;
    margin-bottom: 20px;
    width: auto
}

.boxtooltipnumber {
    border-radius: 100%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 5px;
    margin-bottom: 20px;
    width: 35px
}

.boxtip {
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-bottom: 20px;
    width: auto

}


/* Color */
.bg-red-50 {
    background-color: #FFFBFB;
}
.bg-red-100 {
    background-color: #FFF4F2
}

.bg-red-500 {
    background-color: #CB3A31;
}

.textred {
    color: #CB3A31
}

.textgreen {
    color: #2E7D32
}

/* .bg-warning-100 {
    background-color: #FFF9F2;
} */

.bg-warning-50 {
    background-color: #fffdf7;

}

.bg-warning-100 {
    background-color: #f7f4e6;
}

.bg-green-50 {
    background-color: #F7FBF8;

}

.bg-blue-100{
    background-color: #b5c9f8;
}

.textblue {
    color: #2274FC
}

.bg-green-100 {
    background-color: #E5F1EA;
}

.textwarning {
    color: #CD7B2E
}


/* Form */

.form-group i {
    position: absolute;
    left: 10px;
    top: 55px;
    transform: translateY(-50%);
}
.form-control-icon {
    padding-left: 40px;
}

.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }
  .toggle.ios .toggle-handle { border-radius: 20rem; }



/* Box Absolute */
.total-amount {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    border-radius: 10px;
    font-size: 2em;
    text-align: center;
    width: 100%;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}
.box {
    background-color: #e9ecef;
    padding-top: 40px;
    border-radius: 10px;
    position: relative;
}