:root {   
    /* Typography */
    --textXJumbo : 24px;
    --textJumbo : 20px;
    --textXLG : 18px;
    --textLG : 16px;
    --textXMD : 14px;
    --textMD : 13px;
    --textSM : 12px;
    --textXSM : 11px;

    /* Rounded */
    --roundedCircle : 100%;
    --roundedJumbo : 30px;
    --roundedXLG : 24px;
    --roundedLG : 18px;
    --roundedMD : 14px;
    --roundedSM : 12px;
    --roundedMini : 6px;

    /* Spacing */
    --spaceJumbo : 35px;
    --spaceXLG : 24px;
    --spaceLG : 20px;
    --spaceXMD : 16px;
    --spaceMD : 12px;
    --spaceSM : 10px;
    --spaceXSM : 8px;
    --spaceXXSM : 6px;
    --spaceMini : 4px;

    /* Table column min width */
    --tcolMinXSM : 60px;
    --tcolMinSM : 120px;
    --tcolMinMD : 140px;
    --tcolMinLG : 180px;
    --tcolMinJumbo : 240px;
    --tcolMinHuge : 360px;

    /* Color Pallete */
    --successBG : #00C363;
    --dangerBG : #DD0022;
    --warningBG : #FFC352;
    --infoBG : #1ba6f7;
    --infoLightBG : #E7F4FE;
    --hoverBG : #F2F2F2;
    --semiDarkColor: #18233A;
    --primaryColor : #3b82f6;
    --darkColor : #121725;
    --whiteColor : #FFFFFF;
    --greyColor : #adadad;
    --shadowColor : #E0E0E0;
}

/* Body & Content */
body {
    background: var(--darkColor);
}
.bordered {
    border: 1.5px solid var(--whiteColor);
}
.rounded {
    border-radius: var(--roundedMD) !important;
}
hr {
    margin-top: var(--spaceXLG) !important;
}
.content {
    padding: var(--spaceJumbo);
    display: block;
    margin-inline: auto;
    max-width:1280px;
}
@media screen and (max-width: 1023px) {
    .content {
        width:auto;
        padding: var(--spaceMD);
    }
}

/* Background */
.bg-success {
    background: var(--successBG) !important;
}
.bg-dark {
    background: var(--darkColor) !important;
}

/* Transition */
button, .btn, tr, .btn-page, .img-responsive, .img-holder, .btn-feature, i, #col-analyze, #total-holder, .fc-daygrid-event, .fc-timegrid-event, .btn-icon-reset-image,
.fc-daygrid-event, .fc-timegrid-event {
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

/* Image */
.img-responsive {
    cursor: pointer;
    border-radius: var(--roundedLG);
    width: 100%;
}
.img-responsive:hover {
    transform: scale(1.025);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}