body {
    background: #f9fafb;
    color: #1F2937;
    font-family: 'Inter', sans-serif;
}
.content-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-direction: row;
}

.content {
    height: 100vh;
    width: 100vw;
    margin-left: 250px;

    /*position: relative;*/
    display: flex;
    flex-direction: column;
}

.content-wrapper-collapsed .side-navbar {
    min-width: 75px;
    width: 75px;
}

.content-wrapper-collapsed .side-navbar img {
    width: 30px;
}

.content-wrapper-collapsed .side-navbar span {
    visibility: hidden;
}

.content-wrapper-collapsed .content {
    margin-left: 75px;
}

.content-wrapper-collapsed .side-navbar-btn:hover {
    background: inherit;
    color: #DBE4F0;;
    filter: grayscale(60%);
}

.content-wrapper-collapsed img:hover {
    filter: brightness(120%) saturate(120%);
}

.head {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
}

.pagination {
    --bs-pagination-active-bg: #fe813a;
    --bs-pagination-active-border-color: #fe813a;
    --bs-link-color: #fe813a;
}

.nav-link {
    --bs-nav-link-color: #1F2937;
}

.btn {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primal {
    background-image: -webkit-gradient(linear, left top, right top, from(#fe813a), to(#ffaf48));
    background-image: linear-gradient(90deg, #fe813a, #ffaf48);
    font-weight: bold;
    color: #fff;
}

.btn-primal:hover {
    background-image: -webkit-gradient(linear, left top, right top, from(#fe813a), to(#fe813a));
    background-image: linear-gradient(90deg, #fe813a, #fe813a);
    color: #fff;
}

.btn-primal:disabled {
    border-color: #fe813a !important;
}

.btn-primal:active {
    background-image: -webkit-gradient(linear, left top, right top, from(#fe813a), to(#fe813a)) !important;
    background-image: linear-gradient(90deg, #fe813a, #fe813a);
    color: #fff !important;
}

.btn-sec {
    background-image: -webkit-gradient(linear, left top, right top, from(#E04C4C), to(#F05858));
    background-image: linear-gradient(90deg, #E04C4C, #F05858);
    font-weight: bold;
    color: #fff;
}

.btn-sec:hover {
    background-image: -webkit-gradient(linear, left top, right top, from(#ff5252), to(#ff0000));
    background-image: linear-gradient(90deg, #ff5252, #ff0000);
    color: #fff !important;
}

.btn-terc {
    background-image: -webkit-gradient(linear, left top, right top, from(#107c41), to(#21a366));
    background-image: linear-gradient(90deg, #107c41, #21a366);
    font-weight: bold;
    color: #fff;
}

.btn-terc:hover {
    background-image: -webkit-gradient(linear, left top, right top, from(#185c37), to(#0d7239));
    background-image: linear-gradient(90deg, #185c37, #0d7239);
    color: #fff !important;
}

.btn-secondary {
    background-image: -webkit-gradient(linear, left top, right top, from(#555555), to(#777777));
    background-image: linear-gradient(90deg, #555555, #777777);
    font-weight: bold;
    color: #fff;
}

.btn-secondary:hover {
    background-image: -webkit-gradient(linear, left top, right top, from(#333333), to(#555555));
    background-image: linear-gradient(90deg, #333333, #555555);
    color: #fff;
}

@media only screen and (max-width: 768px) {
    .table-inline {
        font-size: 0.95em;
        display: flex;
        align-items: center;
    }
    .tbody-inline {
        display: flex;
        flex-direction: row;
    }
    .tr-inline {
        display: flex;
        flex-direction: column;
    }
    .table-mobile {
        display: block;
    }
    .table-no-mobile {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .table-mobile {
        display: none;
    }
    .table-no-mobile {
        display: block;
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    table {
        font-size: 0.9em;
    }
}

:root{--header-height: 3rem;
    --nav-width: 68px;
    --first-color: #243245;
    --first-color-light: #FEC09C;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}

*, ::before, ::after{box-sizing: border-box}
body{
                                                position: relative;
                                                margin: var(--header-height) 0 0 0;
                                                padding: 0 1rem;font-family: var(--body-font);
                                                font-size: var(--normal-font-size);transition: .5s}
        a{text-decoration: none}
        .header{width: 100%;height: var(--header-height);position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: space-between;padding: 0 1rem;background-color: var(--white-color);z-index: var(--z-fixed);transition: .5s}
        .header_toggle{color: var(--first-color);font-size: 1.5rem;cursor: pointer}
        .header_img{width: 35px;height: 35px;display: flex;justify-content: center;}
        .header_img img{width: 40px}
        .l-navbar{position: fixed;top: 0;left: -30%;width: var(--nav-width);height: 100vh;background-color: var(--first-color);padding: .5rem 1rem 0 0;transition: .5s;z-index: var(--z-fixed)}
        .nav-menu{height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden}
        .nav_logo, .nav_link{display: grid;grid-template-columns: max-content max-content;align-items: center;column-gap: 1rem;padding: .5rem 0 .5rem 1.5rem}
        .nav_logo{margin-bottom: 2rem}
        .nav_logo-icon{font-size: 1.25rem;color: var(--white-color)}
        .nav_logo-name{color: var(--white-color);font-weight: 700}
        .nav_link{position: relative;color: var(--first-color-light);margin-bottom: 0.7rem;transition: .3s}
        .nav_link:hover{color: var(--white-color)}
        .nav_icon{font-size: 1.25rem}
        .show-sidebar{left: 0}
        .body-pd{padding-left: calc(var(--nav-width) + 1rem)}
        .active{color: var(--white-color)}
        .active::before{content: '';position: absolute;left: 0;width: 2px;height: 32px;background-color: var(--white-color)}
        .height-100{height:100vh}
        @media screen and (min-width: 768px){
            body{margin: calc(var(--header-height) + 1rem) 0 0 0;padding-left: calc(var(--nav-width) + 2rem)}
            .header{height: calc(var(--header-height) + 1rem);padding: 0 2rem 0 calc(var(--nav-width) + 2rem)}
            .header_img{width: 40px;height: 40px}
            .header_img img{width: 45px}
            .l-navbar{left: 0;padding: 1rem 1rem 0 0}
            .show-sidebar{width: calc(var(--nav-width) + 156px)}
            .body-pd{padding-left: calc(var(--nav-width) + 188px)}}

.icon-recurring-subscription {
    background-image:url('/img/recurring-subscription-icon.svg');
    height:22px;
    width:24px;
    filter: invert(99%) sepia(19%) saturate(5790%) hue-rotate(297deg) brightness(106%) contrast(101%);
}