@font-face {
    font-family: 'Gelion Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Regular Italic'), url('../../fonts/darwin/Gelion Regular Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Regular'), url('../../fonts/darwin/Gelion Regular.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Light'), url('../../fonts/darwin/Gelion Light.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Thin Italic'), url('../../fonts/darwin/Gelion Thin Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Light Italic'), url('../../fonts/darwin/Gelion Light Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Thin'), url('../../fonts/darwin/Gelion Thin.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Medium Italic'), url('../../fonts/darwin/Gelion Medium Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Medium'), url('../../fonts/darwin/Gelion Medium.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Semi Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Semi Bold Italic'), url('../../fonts/darwin/Gelion SemiBold Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Semi Bold'), url('../../fonts/darwin/Gelion SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Bold Italic'), url('../../fonts/darwin/Gelion Bold Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Bold'), url('../../fonts/darwin/Gelion Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Black Italic'), url('../../fonts/darwin/Gelion Black Italic.woff') format('woff');
}

@font-face {
    font-family: 'Gelion Black';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Black'), url('../../fonts/darwin/Gelion Black.woff') format('woff');
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Gelion Regular' !important;
    font-size: 1rem;
    padding-right: 0rem;
    overflow: auto;
}

p {
    font-size: 0.9rem;
}

html {
    height: -webkit-fill-available;
}

main {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

.fixed-font {
    font-family: monospace;
}

.object-viewer {
    width: 100%;
    min-height: 450px;
}

.invalid-tooltip {
    position: unset !important;
}

.footer {
    margin-top: 40px;
}

.btn-primary {
    background-color: #ff0080 !important;
    border-color: #ff0080 !important;
}

.btn-info {
    background-color: #ffc4e8 !important;
    border-color: #960050 !important;
}

.button-primary {
    background-color: #ff0080 !important;
    border-color: #ff0080 !important;
}

.form-input-uppercase {
    text-transform: uppercase;
    &::placeholder {
        text-transform: none;
    }
}

.form-switch .form-check-input {
    margin-left: 0rem !important;
}

.form-check-input {
    margin-left: 0rem !important;
    margin-top: .4rem;
}

.form-check-label {
    margin-top: .2rem;
}

.table-success {
    --bs-table-bg: rgba(0,0,0,.03);
    --bs-table-striped-bg: rgba(0,0,0,.05);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: rgba(0,0,0,.07);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: rgba(0,0,0,.15);
    --bs-table-hover-color: #000;
    color: #000;
    border-color: rgba(0,0,0,.15);
}

.toast {
    background-color: #00008f;
    color: white;
}

.toast label {
    margin-top: 10px;
}

/*-------------------------------------------------
    Intro Page
-------------------------------------------------*/
#home {
    background: url("../../../content/img/darwin/background0.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
#intro {
    background: url("../../../content/img/darwin/background1.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
#app {
    background-color: #6d0037;
    background: url("../../../content/img/darwin/background1.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 960px;
}
#headband {
    background-color: #6d0037;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.headband {
    background-color: #960050;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 0 0 60px 0;
    overflow: hidden;
    z-index: 10;
}

.headband-pages-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.headband-pages-content {
    margin-left: 0px;
}

.section-title {
    color: white;
    line-height: 1.05;
    font-size: 3.125rem;
    font-weight: 600;
}

.section-subtitle {
    color: white;
    line-height: 1.05;
    font-size: 16px;
    font-weight: 600;
}

.section-group {
    color: #de0078;
    line-height: 1.05;
    font-size: 1.9rem;
    font-weight: 600;
}

.card-header {
    background-color: #ffc4e8;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

@media (max-width: 769px) {
    #intro {
        background-image: none !important;
        background-color: #960050;
    }
    #app {
        background-image: none !important;
        background-color: #960050;
    }
    .headband {
        background-image: none !important;
        background-color: #960050;
        height: 200px;
    }

    .section-title {
        color: black;
        line-height: 1;
        font-size: 2.5rem;
        font-weight: 400;
    }

    .section-subtitle {
        color: black;
        line-height: 1;
        font-size: 14px;
        font-weight: 400;
    }
}

.dropdown-menu {
    background-color: lightgrey;
}

.menu-sidebar-size {
    width: 66px;
    height: 55px;
}

.menu-sidebar-icon {
    font-size: 2rem;
    color: black; /* #002e5d; */
}

.menu-item-icon {
    font-size: 1.2rem;
    color: #ff0080; /* #002e5d; */
    margin-right: 10px;
}

.menu-subitem-icon {
    font-size: 1.1rem;
    color: #ff0080; /* #002e5d; */
    margin-right: 10px;
    margin-left: 25px;
}

.menu-group-text {
    font-size: 1rem;
    font-weight: 500;
}

.menu-item-text {
    font-size: 1rem;
}

.header {
    margin-top: 10px;
    margin-bottom: 20px;
}

.header-title {
    font-size: calc(1.3rem + .6vw);
    line-height: 1.2;
    font-weight: 700;
    color: black;
    margin-left: 15px;
}

.page-header {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.page-title {
    font-size: medium;
    font-weight: bold;
}

.breadcrumb {
    font-size: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
}

    .breadcrumb > li {
        margin-left: 15px;
    }

.block-area-filter {
    font-size: 12px;
    padding: 5px 5px 10px;
    display: inline-block;
    letter-spacing: 0.5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0px;
    margin-bottom: 10px;
}

.block-area-content {
    font-size: 12px;
    padding: 5px 5px 10px;
    display: inline-block;
    letter-spacing: 0.5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0px;
    margin-bottom: 10px;
}

.is-block {
    display: flex;
    width: 100%;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 3 !important;
}

.alert {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.doc-pendente {
    text-align: left;
    background-color: #FF4500;
}

.doc-analisando {
    text-align: left;
    background-color: #FFFF00;
}

.doc-aprovado {
    text-align: left;
    background-color: #98FB98;
}

.doc-rejeitado {
    text-align: left;
    background-color: #FF4500;
}

.button-enviar {
    height: 25px;
    width: 135px;
    font-size: 90% !Important;
}

table.table-bordered {
    border: 1px solid #960050;
    margin-top: 20px;
}

table.table-bordered > thead > tr > th {
    background: #ffc4e8;
    border: 1px solid #960050;
}

table.table-bordered > tbody > tr > td {
    border: 1px solid #960050;
}

/*-------------------------------------------------
    center block areaSizing
-------------------------------------------------*/
.center-block-area {
    height: 700px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: white;
    border: 2px solid #de0078 !important;
    border-radius: 15px;
}
/* X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

/* Small devices (phones, 400px and up) */
@media (min-width: 400px) {
    .center-block-area {
        width: 95%;
        top: 5px;
    }
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
    .center-block-area {
        width: 95%;
        top: 5px;
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .center-block-area {
        width: 95%;
        top: 5px;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .center-block-area {
        width: calc(100% - 580px);
        top: -40px;
    }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
    .center-block-area {
        width: calc(100% - 600px);
        top: -40px;
    }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width:1400px) {
    .center-block-area {
        width: calc(100% - 900px);
        top: -40px;
    }
}

/*-------------------------------------------------
    Modal Sizing
-------------------------------------------------*/
@media (min-width:480px) { /* Phones */
    .modal-lg {
        width: calc(100% - 10px);
        max-width: 90%;
    }

    .modal-xl {
        width: calc(100% - 4px);
        max-width: 90%;
    }
}

@media (min-width:769px) { /* Tablets */
    .modal-lg {
        width: calc(100% - 50px);
        max-width: 90%;
    }

    .modal-xl {
        width: calc(100% - 5px);
        max-width: 90%;
    }
}

@media (min-width:992px) { /* Desktop */
    .modal-lg {
        width: calc(100% - 100px);
        max-width: 80%;
    }

    .modal-xl {
        width: calc(100% - 20px);
        max-width: 90%;
    }
}

@media (min-width:1200px) { /* wide screen */
    .modal-lg {
        width: calc(100% - 150px);
        max-width: 80%;
    }

    .modal-xl {
        width: calc(100% - 30px);
        max-width: 90%;
    }
}

@media (min-width:1920px) { /* XL */
    .modal-lg {
        width: calc(100% - 200px);
        max-width: 80%;
    }

    .modal-xl {
        width: calc(100% - 50px);
        max-width: 90%;
    }
}

.block-title {
    background: #ff0080;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 10px 5px;
    display: inline-block;
    letter-spacing: 0.5px;
    border-radius: 8px;
}

.btn {
    font-weight: 500;
    line-height: 1;
    font-size: 1rem;
    border-radius: 30px;
}

.button {
    font-weight: 500;
    font-size: 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 28px;
    padding: 10px 20px;
    color: #fff;
    background-color: #de0078;
    border: 0;
    border-radius: 8px;
    transition: .2s cubic-bezier(.39,.575,.565,1)
}

.btn-ghost {
    font-weight: 700;
    line-height: 1;
    font-size: 1rem;
}

.btn-filter {
    margin-top: 22px;
    ;
}

.form-control {
    font-size: 1rem;
    padding: 0.275rem 0.45rem;
}

.form-control-sm {
    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
    font-size: .875rem !important;
    padding: .25rem .5rem !important;
    border-radius: var(--bs-border-radius-sm);
}

/* Adapts a floating label for use with a left-handed input group icon */
.form-floating > .bi-calendar-date + .datepicker_input + label {
    padding-left: 3.5rem;
    z-index: 3;
}

.form-label {
    margin-bottom: 0.2rem;
}


@media (min-width: 600px) {
    .container, .container-sm {
        max-width: 540px
    }
}

@media (min-width: 800px) {
    .container, .container-md, .container-sm {
        max-width: 720px
    }
}

@media (min-width: 1000px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px
    }
}

@media (min-width: 1280px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1272px
    }
}


@media (min-width: 600px) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-sm-1 > * {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-sm-2 > * {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-sm-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-sm-4 > * {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-sm-5 > * {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-sm-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-sm-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-sm-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-sm-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-sm-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-sm-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-sm-first {
        order: -1
    }

    .order-sm-last {
        order: 13
    }

    .order-sm-0 {
        order: 0
    }

    .order-sm-1 {
        order: 1
    }

    .order-sm-2 {
        order: 2
    }

    .order-sm-3 {
        order: 3
    }

    .order-sm-4 {
        order: 4
    }

    .order-sm-5 {
        order: 5
    }

    .order-sm-6 {
        order: 6
    }

    .order-sm-7 {
        order: 7
    }

    .order-sm-8 {
        order: 8
    }

    .order-sm-9 {
        order: 9
    }

    .order-sm-10 {
        order: 10
    }

    .order-sm-11 {
        order: 11
    }

    .order-sm-12 {
        order: 12
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.33333%
    }

    .offset-sm-2 {
        margin-left: 16.66667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.33333%
    }

    .offset-sm-5 {
        margin-left: 41.66667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.33333%
    }

    .offset-sm-8 {
        margin-left: 66.66667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.33333%
    }

    .offset-sm-11 {
        margin-left: 91.66667%
    }
}

@media (min-width: 800px) {
    .col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-md-1 > * {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-md-2 > * {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-md-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-md-4 > * {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-md-5 > * {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-md-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-md-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-md-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-md-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-md-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-md-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-md-first {
        order: -1
    }

    .order-md-last {
        order: 13
    }

    .order-md-0 {
        order: 0
    }

    .order-md-1 {
        order: 1
    }

    .order-md-2 {
        order: 2
    }

    .order-md-3 {
        order: 3
    }

    .order-md-4 {
        order: 4
    }

    .order-md-5 {
        order: 5
    }

    .order-md-6 {
        order: 6
    }

    .order-md-7 {
        order: 7
    }

    .order-md-8 {
        order: 8
    }

    .order-md-9 {
        order: 9
    }

    .order-md-10 {
        order: 10
    }

    .order-md-11 {
        order: 11
    }

    .order-md-12 {
        order: 12
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.33333%
    }

    .offset-md-2 {
        margin-left: 16.66667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.33333%
    }

    .offset-md-5 {
        margin-left: 41.66667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.33333%
    }

    .offset-md-8 {
        margin-left: 66.66667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.33333%
    }

    .offset-md-11 {
        margin-left: 91.66667%
    }
}

@media (min-width: 1000px) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-lg-1 > * {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-lg-2 > * {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-lg-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-lg-4 > * {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-lg-5 > * {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-lg-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-lg-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-lg-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-lg-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-lg-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-lg-first {
        order: -1
    }

    .order-lg-last {
        order: 13
    }

    .order-lg-0 {
        order: 0
    }

    .order-lg-1 {
        order: 1
    }

    .order-lg-2 {
        order: 2
    }

    .order-lg-3 {
        order: 3
    }

    .order-lg-4 {
        order: 4
    }

    .order-lg-5 {
        order: 5
    }

    .order-lg-6 {
        order: 6
    }

    .order-lg-7 {
        order: 7
    }

    .order-lg-8 {
        order: 8
    }

    .order-lg-9 {
        order: 9
    }

    .order-lg-10 {
        order: 10
    }

    .order-lg-11 {
        order: 11
    }

    .order-lg-12 {
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.33333%
    }

    .offset-lg-2 {
        margin-left: 16.66667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.33333%
    }

    .offset-lg-5 {
        margin-left: 41.66667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.33333%
    }

    .offset-lg-8 {
        margin-left: 66.66667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.33333%
    }

    .offset-lg-11 {
        margin-left: 91.66667%
    }
}

@media (min-width: 1280px) {
    .col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-xl-1 > * {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-xl-2 > * {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-xl-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-xl-4 > * {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-xl-5 > * {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-xl-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-xl-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-xl-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-xl-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-xl-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-xl-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-xl-first {
        order: -1
    }

    .order-xl-last {
        order: 13
    }

    .order-xl-0 {
        order: 0
    }

    .order-xl-1 {
        order: 1
    }

    .order-xl-2 {
        order: 2
    }

    .order-xl-3 {
        order: 3
    }

    .order-xl-4 {
        order: 4
    }

    .order-xl-5 {
        order: 5
    }

    .order-xl-6 {
        order: 6
    }

    .order-xl-7 {
        order: 7
    }

    .order-xl-8 {
        order: 8
    }

    .order-xl-9 {
        order: 9
    }

    .order-xl-10 {
        order: 10
    }

    .order-xl-11 {
        order: 11
    }

    .order-xl-12 {
        order: 12
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.33333%
    }

    .offset-xl-2 {
        margin-left: 16.66667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.33333%
    }

    .offset-xl-5 {
        margin-left: 41.66667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.33333%
    }

    .offset-xl-8 {
        margin-left: 66.66667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.33333%
    }

    .offset-xl-11 {
        margin-left: 91.66667%
    }
}