@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@font-face {
    font-family: CustomCalibri;
    font-weight: 100;
    src: url("/fonts/Calibri Light.ttf") format("opentype");
}

@font-face {
    font-family: CustomCalibri;
    font-weight: normal;
    src: url("/fonts/Calibri Regular.ttf") format("opentype");
}

@font-face {
    font-family: CustomCalibri;
    font-weight: bold;
    src: url("/fonts/Calibri Bold.ttf") format("opentype");
}

.swagger-ui .info {
    display: none!important;
}

.swagger-ui .wrapper {
    margin: 0!important;
    max-width: none!important;
    padding: 0!important;
}

:root {
    --pink: #ee8889;
    --purple: #7283be;
    --light-blue: #3fa7c2;
    --dark-blue: #094183;
    --dark-green: #59b17f;
    --yellow: #ffdca2;
    --light-green: #a0d172;
    --light-orange: #ecae65;
    --light-red: #e77052;
    --cyan: #6ed7c1;
    --grey: #a5a5a5;
    --navy: #5D6D7E;
    --magenta: #BB8FCE;
    --header-degraded: linear-gradient(170deg, #a5a5a5 30%, white);
    --header-degraded2: linear-gradient(170deg, rgba(48,49,59,1) 0%, rgba(102,99,110,1) 25%, rgba(136,135,142,1) 50%, rgba(159,164,165,1) 75%, rgba(217,216,212,1) 100%);
    --stat-report-degraded: linear-gradient(170deg, #172F4B 30%, #01B1FF);
    --common-main-color: #172f4b;
    --google-drive: #fcc62e;
    --dropbox: #0061FE;
    --one-drive: #0249B3;


/*    PLANNER - VARIABLES */

    --planner-media-xs: 575px;
    --planner-media-sm: 767px;
    --planner-media-md: 991px;
    --planner-media-lg: 1199px;
    --planner-media-xl: 1599px;
}

.table thead, .table tfoot, .row-subtotal, thead>.bg-primary {
    color: #172F4B!important;
    background-image: var(--header-degraded);
}

.table thead th, .table tfoot th {
    font-weight: 400!important;
}

.tree-checkbox.checked, .tree-checkbox.indeterminate {
    background-color: var(--common-main-color)!important;
    border-color: var(--common-main-color)!important;
}

.card:not(.card-tabs) > .card-header {
    color: #393737;
    background-image: var(--header-degraded);
}

.chart-not-results {
    color: var(--light-red)!important;
    font-weight: bold;
}

.alert-warning {
    color: #172F4B!important;
    background-color: var(--light-orange)!important;
    border-color: var(--light-orange)!important;
}

.input-group-append > .btn-primary {
    color: white!important;
    background-color: var(--company-color)!important;
    border-color: var(--company-color)!important;
}

.btn-secondary {
    color: #172F4B;
    background-color: var(--grey);
    border-color: var(--grey);
}

.btn-secondary:hover {
    color: white;
    background-color: var(--company-color);
    border-color: var(--company-color);
}

.btn-danger {
    color: #172F4B;
    background-color: var(--light-red);
    border-color: var(--light-red);
}

.btn-danger:hover {
    color: #172F4B;
    background-color: var(--red);
    border-color: var(--red);
}

.btn-warning {
    background-color: var(--light-orange);
    border-color: var(--light-orange);
}

.btn-warning:hover {
    background-color: var(--orange);
    border-color: var(--orange);
}

.btn-success{
    color: #172F4B;
    background-color: var(--light-green);
    border-color: var(--light-green);
}

.btn-success:hover {
    color: white!important;
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

.balance-row {
    background-color: var(--light-green)!important;
    color: var(--common-main-color)!important;
}

.total-row {
    background-color: #343a40!important;
    color: #FFFFFF!important;
    font-weight: bold;
}

.total-row-secondary {
    background-color: var(--light-blue)!important;
    color: #FFFFFF!important;
    font-weight: bold;
}

.jconfirm .jconfirm-box.jconfirm-type-orange {
    border-top: solid 7px var(--orange)!important;
}

.jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c {
    color: var(--orange)!important;
}

.jconfirm .jconfirm-box.jconfirm-type-blue {
    border-top: solid 7px var(--common-main-color)!important;
}

.jconfirm .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c {
    color: var(--common-main-color)!important;
}

.chart-title, .card .card-header h6 {
    color: rgba(255, 255, 255, 0.91);
}

.navbar {
    padding: 0.2rem 0.5rem;
}

#btnsave > .btn {
    color: #172F4B;
    background-color: var(--light-green);
    border-color: var(--light-green);
}

#btnsave > .btn:hover {
    color: white;
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

body,h1,h2,h3,h4,h5,h6 {
    font-family: "Source Sans 3", "Open Sans", serif;
}

::-webkit-scrollbar{
    width: 10px;
    background-color: #F5F5F5;
}
/**  STYLE 1 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: transparent;
    background-color: var(--company-color)!important;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: transparent;
    border-radius: 10px;
    background-color: #F5F5F5;
}

.os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle {
    background-color: var(--company-color)!important;
}

.tr-active .pending-docs-column {
    color: white!important;
}

.tr-active .documents-column {
    color: white!important;
}

.videohelp {
    --plyr-control-radius: '20px';
}

.float{
    position:fixed;
    width:40px;
    height:40px;
    background-color:#ffc107;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    cursor: pointer;
}
.float:hover {
    color: var(--common-main-color)!important;
}

.my-float{
    margin-top:13px;
}

.label-parp {
    animation-name: parpadeo;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes parpadeo {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

.hidetext {
    -webkit-text-security: disc;
    -moz-text-security: disc;
    text-security: disc;
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
}

.modal-ku > div.modal-dialog {
    width: 1500px;
    margin: auto;
    max-width: 1500px!important;
}

.modal-gl > div.modal-dialog {
    width: 1800px;
    margin: auto;
    max-width: 1800px!important;
}

.mirror-image {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.hideAttach{
    display: none;
}

.contentAttach {
    justify-content:end;
}

.btn-login-primary:hover {
    background-color: var(--company-color-secondary)!important;
    border-color: var(--company-color-secondary)!important;
}

@media only screen and (max-width: 650px) {
    .attachOn {
        display: none;
    }
    .hideAttach {
        display: inline;
    }
    .contentAttach {
        justify-content: center;
    }
    .order {
        order:2;
        justify-content: center;
    }
}

.mirror-image {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.nav-item.menu-open > a {
    background-color: #e5e5e5!important;
}

.nav-item.active > a
{
    background-color: #dddddd!important;
}

.nav-item.active a.active-page, .first-item > a.active-page
{
    background-color: #9ebfdb!important;
}

#toast-container>div {
    opacity: 1!important;
}

.loop-card {
    background-color: #fff;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif!important;
    padding: 2rem;
    box-shadow: 0px 1px 22px -12px #607d8b;
}
.loop-card-header-title {
    font-size: 20px;
    margin-bottom: 1rem;
    color: #000000c2;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif!important;
    font-weight: bold;
}
.loop-table {
    overflow: auto;
}
.loop-table table {
    width: 100%;
}
.loop-table table th, .loop-table table td  {
    padding: 0.4rem;
    border-bottom: thin solid #e1e1e1;
    text-align: left;
}
.loop-table table th {
    color: #534e4e !important;
    background: white!important;
}

.loop-table table tr:hover {
    background-color: rgba(128, 128, 128, 0.09);
}

.loop-table table tfoot tr td {
    background: rgba(51, 51, 51, 0.92);
    font-weight: bold;
    text-align: center;
}
.loop-table table tfoot tr td:nth-child(2) {
    text-align: right;
}

.loop-backdrop {
    display: none;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #0009;
}

.loop-inside-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.loop-spinner-title {
    font-weight: bold;
    background: white;
    font-size: 10px!important;
}

div[disabled].btn-success{
    background-color: #9cdba4 !important;
    border-color: #9cdba4 !important;
    opacity: 1;
    border-style:none !important;
    border-width: 0px !important;
    border: 1px solid #9cdba4 !important
}

div[disabled] .btn{
    background-color: grey;
    opacity: 0.5;
    border:1px solid grey;
}

div[disabled].btn-danger{
    background-color: #db9c9c !important;
    border-color: #db9c9c !important;
    opacity: 1;
    border-style:none !important;
    border-width: 0px !important;
    border: 1px solid #db9c9c !important
}

div[disabled].toggle-handle{
    background-color: dimgrey !important;
}

div[disabled] .btn:hover{
    color: #fff !important
}

/*.brand-link .brand-image {*/
/*    max-width: 70px;*/
/*}*/

/*.suite-product-greyscale {*/
/*    -webkit-filter: grayscale(80%);*/
/*    filter: grayscale(80%);*/
/*}*/


/* ESTILOS BOOTSTRAP TOGGLE SIN JS */

.toggle-wrapper {
    width: 48px;
    overflow: hidden;
    position: relative;
}

.toggle-wrapper.toggle-wrapper-xs {
    transform: scale(0.5);
}

.toggle-wrapper.toggle-wrapper-sm {
    transform: scale(0.8);
}

.toggle-wrapper.toggle-wrapper-l {
    transform: scale(1.2);
}

.toggle-wrapper.toggle-wrapper-xl {
    transform: scale(1.35);
}

.toggle-wrapper.toggle-wrapper-xxl {
    transform: scale(1.6);
}

.toggle-checkbox {
    appearance: none;
    position: absolute;
    z-index: 1;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    font: inherit;
    opacity: 0;
}

.toggle-checkbox:not(:disabled) {
    cursor: pointer;
}

.toggle-wrapper:has(.toggle-checkbox:disabled):hover .toggle-button {
    cursor: not-allowed;
    color: white;
}
.toggle-container {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 0.2rem;
    width: 46px;
    height: 1.5em;
    background-color: #e8e8e8;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    overflow: hidden;
    height: 27px;
}

.toggle-checkbox:checked + .toggle-container {
    background-color: #a0d172;
    border: 1px solid #a0d172;
    color: #172f4b;
}

.toggle-checkbox:checked:hover + .toggle-container {
    background-color: #59b17f;
    border: 1px solid #59b17f;
    color: #172f4b;
}

.toggle-checkbox:checked:hover + .toggle-container .toggle-button {
    color: white;
}

.toggle-checkbox:not(:checked) + .toggle-container {
    background-color: #e77052;
    border: 1px solid #e77052;
    color: #172f4b;
}
.toggle-checkbox:not(:checked):hover + .toggle-container {
    background-color: #dc3545;
    border: 1px solid #dc3545;
}

.toggle-checkbox:disabled + .toggle-container {
    background-color: #b08c8e;
    border: 1px solid #b08c8e;
    color: #172f4b;
}
.toggle-wrapper:has(.toggle-checkbox:disabled):hover .toggle-container {
    background-color: #b08c8e;
    border: 1px solid #b08c8e;
    cursor: not-allowed;
    color: white;
}

.toggle-checkbox:checked:disabled + .toggle-container {
    background-color: #8fad93;
    border: 1px solid #8fad93;
    color: #172f4b;
}
.toggle-wrapper:has(.toggle-checkbox:checked:disabled):hover .toggle-container {
    background-color: #8fad93;
    border: 1px solid #8fad93;
    cursor: not-allowed;
    color: white;
}
.toggle-checkbox:disabled:hover + .toggle-container {
    animation: shake 0.3s;
    animation-iteration-count: 1;
}
.toggle-wrapper:has(.toggle-checkbox:disabled):hover * {
    cursor: not-allowed;
}

.toggle-wrapper:has(.toggle-checkbox:disabled):hover .toggle-button::after,
.toggle-wrapper:has(.toggle-checkbox:disabled):hover .toggle-button::before {
    cursor: not-allowed;
    color: white;
}

.toggle-button::before {
    content: "Yes";
    content: attr(data-yes);
    padding-right: 10px;
    font-weight: bold;
    font-size: 0.8rem;
}
.toggle-button::after {
    content: "No";
    content: attr(data-no);
    color: #172f4b;
    padding-left: 20px;
    font-weight: bold;
    font-size: 0.8rem;
}
.toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -0.4rem;
    border-radius: 10px;
    width: 1rem;
    height: 30px;
    background-color: #e8e8e8;
    transition: all 0.25s;
}

.toggle-checkbox:checked + .toggle-container > .toggle-button {
    left: 36px;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.register-card-body {
    background-color: var(--company-color);
    color: white;
}

.register-card-body .fas {
    color: white;
}

.register-card-body .btn {
    background-color: white;
    color: var(--company-color);
    border-color: var(--company-color);
}

.register-card-body .forgot-text {
    color: white;
}

/* PLANNER - VARIABLES */

.gradient-1 {
    background: linear-gradient(to bottom, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.gradient-2 {
    background: linear-gradient(to bottom, #a1c4fd 0%, #c2e9fb 100%);
}

.gradient-3 {
    background: linear-gradient(to bottom, #fbc2eb 0%, #a6c1ee 100%);
}

.gradient-4 {
    background: linear-gradient(to bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.gradient-5 {
    background: linear-gradient(to bottom, #89f7fe 0%, #66a6ff 100%);
}

.gradient-6 {
    background: linear-gradient(to bottom, #fddb92 0%, #d1fdff 100%);
}

.gradient-7 {
    background: linear-gradient(to bottom, #9890e3 0%, #b1f4cf 100%);
}

.gradient-8 {
    background: linear-gradient(to bottom, #84fab0 0%, #8fd3f4 100%);
}

.gradient-9 {
    background: linear-gradient(to bottom, #ffecd2 0%, #fcb69f 100%);
}

.gradient-10 {
    background: linear-gradient(to bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.gradient-11 {
    background: linear-gradient(to bottom, #a18cd1 0%, #fbc2eb 100%);
}

.gradient-12 {
    background: linear-gradient(to bottom, #fad0c4 0%, #ffd1ff 100%);
}

.pattern-1 {

    --s: 84px; /* control the size*/

    &.pattern-small {
        --s: 28px; /* control the size */
    }

    --c1: #f2f2f2;
    --c2: #cdcbcc;
    --c3: #999999;

    --_g: 0 120deg, #0000 0;
    background: conic-gradient(from 0deg at calc(500% / 6) calc(100% / 3), var(--c3) var(--_g)),
    conic-gradient(from -120deg at calc(100% / 6) calc(100% / 3), var(--c2) var(--_g)),
    conic-gradient(from 120deg at calc(100% / 3) calc(500% / 6), var(--c1) var(--_g)),
    conic-gradient(from 120deg at calc(200% / 3) calc(500% / 6), var(--c1) var(--_g)),
    conic-gradient(from -180deg at calc(100% / 3) 50%, var(--c2) 60deg, var(--c1) var(--_g)),
    conic-gradient(from 60deg at calc(200% / 3) 50%, var(--c1) 60deg, var(--c3) var(--_g)),
    conic-gradient(from -60deg at 50% calc(100% / 3), var(--c1) 120deg, var(--c2) 0 240deg, var(--c3) 0);
    background-size: calc(var(--s) * 1.732) var(--s);

}

.pattern-2 {
    --s: 200px; /* control the size */

    &.pattern-small {
        --s: 100px; /* control the size */
    }

    --c1: #1d1d1d;
    --c2: #4e4f51;
    --c3: #3c3c3c;

    background: repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 180deg) calc(.5 * var(--s)) calc(.5 * var(--s) * 0.577),
    repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 180deg);
    background-size: var(--s) calc(var(--s) * 0.577);

}

.pattern-3 {
        --s: 200px; /* control the size */
    &.pattern-small {
        --s: 100px; /* control the size */
    }
        --c1: #b2b2b2;
        --c2: #ffffff;
        --c3: #d9d9d9;

        --_g: var(--c3) 0 120deg,#0000 0;
        background:
                conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
                conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
                conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
                conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
                linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                var(--c1) 0 calc(500%/6),var(--c2) 0);
        background-size: calc(1.732*var(--s)) var(--s);

}

.pattern-4 {
    --s: 222px; /* control the size */

    &.pattern-small {
        --s: 74px; /* control the size */
    }

    --c1: #7f727b;
    --c2: #d6b4c2;
    --c3: #baa0ab;

    --_g: var(--c1) 10%, var(--c2) 10.5% 19%, #0000 19.5% 80.5%, var(--c2) 81% 89.5%, var(--c3) 90%;
    --_c: from -90deg at 37.5% 50%, #0000 75%;
    --_l1: linear-gradient(145deg, var(--_g));
    --_l2: linear-gradient(35deg, var(--_g));
    background: var(--_l1), var(--_l1) calc(var(--s) / 2) var(--s),
    var(--_l2), var(--_l2) calc(var(--s) / 2) var(--s),
    conic-gradient(var(--_c), var(--c1) 0) calc(var(--s) / 8) 0,
    conic-gradient(var(--_c), var(--c3) 0) calc(var(--s) / 2) 0,
    linear-gradient(90deg, var(--c3) 38%, var(--c1) 0 50%, var(--c3) 0 62%, var(--c1) 0);
    background-size: var(--s) calc(2 * var(--s) / 3);
}

.pattern-5 {
    --s: 62px; /* control the size*/
    --c1: #cf4647;
    --c2: #524656;

    background:
            conic-gradient(from  45deg at 75% 75%,var(--c1) 25%,var(--c2) 0 50%,#0000 0)
            0 0/var(--s) var(--s),
            conic-gradient(from 225deg at 25% 25%,var(--c2) 25%,var(--c1) 0 50%,#0000 0)
            0 0/var(--s) var(--s),
            repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
            0 0/calc(2*var(--s)) calc(2*var(--s));

}

.pattern-6 {
    --s: calc(17rem / 2); /* control the size*/
    --c1: #336666;
    --c2: #ffffff;

    --_g: #0000 90deg,var(--c1) 0;
    background:
            conic-gradient(from 90deg at 2px 2px,var(--_g)),
            conic-gradient(from 90deg at 1px 1px,var(--_g)),
            var(--c2);
    background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
}

.pattern-7 {
    --r: 56px; /* control the size */

    &.pattern-small {
        --s: 18px; /* control the size */
    }

    --c1: #3FB8AF /*color 1*/ 99%, #0000 101%;
    --c2: #FF9E9D /*color 2*/ 99%, #0000 101%;

    --s: calc(var(--r) * .866); /* .866 = cos(30deg) */
    --g0: radial-gradient(var(--r), var(--c1));
    --g1: radial-gradient(var(--r), var(--c2));
    --f: radial-gradient(var(--r) at calc(100% + var(--s)) 50%, var(--c1));
    --p: radial-gradient(var(--r) at 100% 50%, var(--c2));
    background: var(--f) 0 calc(-5 * var(--r) / 2),
    var(--f) calc(-2 * var(--s)) calc(var(--r) / 2),
    var(--p) 0 calc(-2 * var(--r)),
    var(--g0) var(--s) calc(-5 * var(--r) / 2),
    var(--g1) var(--s) calc(5 * var(--r) / 2),
    radial-gradient(var(--r) at 100% 100%, var(--c1)) 0 calc(-1 * var(--r)),
    radial-gradient(var(--r) at 0% 50%, var(--c1)) 0 calc(-4 * var(--r)),
    var(--g1) calc(-1 * var(--s)) calc(-7 * var(--r) / 2),
    var(--g0) calc(-1 * var(--s)) calc(-5 * var(--r) / 2),
    var(--p) calc(-2 * var(--s)) var(--r),
    var(--g0) calc(-1 * var(--s)) calc(var(--r) / 2),
    var(--g1) calc(-1 * var(--s)) calc(var(--r) / -2),
    var(--g0) 0 calc(-1 * var(--r)),
    var(--g1) var(--s) calc(var(--r) / -2),
    var(--g0) var(--s) calc(var(--r) / 2) #FF9E9D; /*color 2 again here */
    background-size: calc(4 * var(--s)) calc(6 * var(--r));

}

.pattern-8 {
    --s: 34px; /* control the size (the circle diameter) */

    &.pattern-small {
        --s: 11px; /* control the size */
    }

    --c1: #ECBE13;
    --c2: #309292;

    --_g: radial-gradient(calc(var(--s) / 2), var(--c1) 97%, #0000);
    background: var(--_g), var(--_g) calc(2 * var(--s)) calc(2 * var(--s)),
    repeating-conic-gradient(from 45deg, #0000 0 25%, var(--c2) 0 50%) calc(-.707 * var(--s)) calc(-.707 * var(--s)),
    repeating-linear-gradient(135deg, var(--c1) calc(var(--s) / -2) calc(var(--s) / 2), var(--c2) 0 calc(2.328 * var(--s)));
    background-size: calc(4 * var(--s)) calc(4 * var(--s));
    /*
      0.707 = sqrt(2)/2
      2.328 = 2*sqrt(2) - .5
    */

}

.pattern-9 {
    --s: 71px; /* control the size */

    &.pattern-small {
        --s: 30.5px; /* control the size */
    }

    --c1: #78C0A8;
    --c2: #FCEBB6;

    background: radial-gradient(36% 72% at 25% -50%, var(--c2) 98%, #0000) 0 0/calc(2 * var(--s)) var(--s),
    radial-gradient(36% 72% at 75% 150%, var(--c2) 98%, #0000) 0 0/calc(2 * var(--s)) var(--s),
    radial-gradient(72% 36% at 150% 25%, var(--c2) 98%, #0000) 0 0/var(--s) calc(2 * var(--s)),
    radial-gradient(72% 36% at -50% 75%, var(--c2) 98%, #0000) 0 0/var(--s) calc(2 * var(--s)),
    repeating-conic-gradient(var(--c2) 0 45deg, var(--c1) 0 25%) 0 0/calc(2 * var(--s)) calc(2 * var(--s));

}

.pattern-10 {
    --s: 30px; /* control the size */

    &.pattern-small {
        --s: 10px; /* control the size */
    }

    --c1: #E5FCC2;
    --c2: #45ADA8;

    --_s: 37.5% 12.5% at 62.5%;
    --_g: 34% 99%, #0000 101%;
    --g1: radial-gradient(var(--_s) 100%, #0000 32%, var(--c1) var(--_g));
    --g2: radial-gradient(var(--_s) 0, #0000 32%, var(--c1) var(--_g));
    --g3: radial-gradient(var(--_s) 100%, #0000 32%, var(--c2) var(--_g));
    --g4: radial-gradient(var(--_s) 0, #0000 32%, var(--c2) var(--_g));
    background: var(--g1),
    var(--g2) 0 calc(3 * var(--s)),
    var(--g3) var(--s) calc(3 * var(--s)),
    var(--g4) var(--s) calc(6 * var(--s)),
    var(--g1) calc(2 * var(--s)) calc(6 * var(--s)),
    var(--g2) calc(2 * var(--s)) calc(9 * var(--s)),
    var(--g3) calc(3 * var(--s)) calc(9 * var(--s)),
    var(--g4) calc(3 * var(--s)) 0,
    repeating-linear-gradient(var(--c1) 0 25%, var(--c2) 0 50%);
    background-size: calc(4 * var(--s)) calc(12 * var(--s));

}

.pattern-11 {
    --s: 60px; /* control the size*/
    --c1: #1095c1;
    --c2: #426bbd;

    background:
            radial-gradient(var(--c1) 14%,var(--c2) 15% 30%,var(--c1) 31% 44%,var(--c2) 45% 60%,#0000 61%),
            linear-gradient( 45deg,#0000 46%,var(--c2) 0 54%,#0000 0),
            linear-gradient(-45deg,#0000 46%,var(--c2) 0 54%,#0000 0) var(--c1);
    background-size: var(--s) var(--s);

}

.pattern-12 {
    --s: 220px; /* control the size */

    &.pattern-small {
        --s: 73px; /* control the size */
    }

    --c1: #774F38;
    --c2: #F1D4AF;

    --_g: radial-gradient(#0000 60%, var(--c1) 61% 63%, #0000 64% 77%, var(--c1) 78% 80%, #0000 81%);
    /*ESTA LINEA NO TIENE ERROR DE SINTAXIS, NO TOCAR, TIENE QUE ESTAR ASÍ*/
    --_c: #0000 75%, var(--c2) 0; /*ESTA LINEA NO TIENE ERROR DE SINTAXIS, NO TOCAR, TIENE QUE ESTAR ASÍ*/
    /*ESTA LINEA NO TIENE ERROR DE SINTAXIS, NO TOCAR, TIENE QUE ESTAR ASÍ*/
    background: conic-gradient(at 12% 20% ,var(--_c)) calc(var(--s) * .44) calc(.9 * var(--s)),
    conic-gradient(at 12% 20% ,var(--_c)) calc(var(--s) * -.06) calc(.4 * var(--s)),
    conic-gradient(at 20% 12% ,var(--_c)) calc(.9 * var(--s)) calc(var(--s) * .44),
    conic-gradient(at 20% 12% ,var(--_c)) calc(.4 * var(--s)) calc(var(--s) * -.06),
    var(--_g), var(--_g) calc(var(--s) / 2) calc(var(--s) / 2) var(--c2);
    background-size: var(--s) var(--s);

}

.pattern-13 {
    --s: 37px; /* control the size */

    &.pattern-small {
        --s: 12px; /* control the size */
    }

    --c: #0000, #2FB8AC .5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
    background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)),
    var(--g2), var(--g2) var(--s) calc(1.73 * var(--s)),
    var(--g3) var(--s) 0, var(--g3) 0 calc(1.73 * var(--s)) #ECBE13;
    background-size: calc(2 * var(--s)) calc(3.46 * var(--s));

}

.pattern-14 {
    --s: 6px; /* control the size */

    &.pattern-small {
        --s: 2px; /* control the size */
    }

    --g: #0000 66%, #3B2D38 68% 98%, #0000;
    background: radial-gradient(30% 30% at 0% 30%, var(--g)) var(--s) calc(9 * var(--s)),
    radial-gradient(30% 30% at 100% 30%, var(--g)) var(--s) calc(-1 * var(--s)),
    radial-gradient(30% 30% at 30% 100%, var(--g)) calc(10 * var(--s)) 0,
    radial-gradient(30% 30% at 30% 0%, var(--g)) #F02475;
    background-size: calc(20 * var(--s)) calc(20 * var(--s));


}

.pattern-15 {
    --s: 194px; /* control the size */
    --c1: #f6edb3;
    --c2: #acc4a3;

    &.pattern-small {
        --s: 54.67px; /* control the size */
    }

    --_l: #0000 calc(25% / 3), var(--c1) 0 25%, #0000 0;
    --_g: conic-gradient(from 120deg at 50% 87.5%, var(--c1) 120deg, #0000 0);
    background: var(--_g), var(--_g) 0 calc(var(--s) / 2),
    conic-gradient(from 180deg at 75%, var(--c2) 60deg, #0000 0),
    conic-gradient(from 60deg at 75% 75%, var(--c1) 0 60deg, #0000 0),
    linear-gradient(150deg, var(--_l)) 0 calc(var(--s) / 2),
    conic-gradient(at 25% 25%, #0000 50%, var(--c2) 0 240deg, var(--c1) 0 300deg, var(--c2) 0),
    linear-gradient(-150deg, var(--_l)) #55897c /* third color here */;
    background-size: calc(0.866 * var(--s)) var(--s);

}

.pattern-16 {
    --s: 60px; /* control the size */
    --c1: #DCD1B4;
    --c2: #5E9FA3;

    &.pattern-small {
        --s: 20px; /* control the size */
    }

    background: repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0/calc(4 * var(--s)) calc(2 * var(--s)),
    conic-gradient(#0000 50%, var(--c2) 0) calc(var(--s) / 2) 0/calc(2 * var(--s)) 1%,
    radial-gradient(var(--c2) 70%, var(--c1) 72%) 0 0/var(--s) var(--s)

}

.pattern-17 {
    --s: 50px; /* control the size */

    &.pattern-small {
        --s: 16px; /* control the size */
    }

    --c: #0000 75%, #87BDB1 0;
    --g1: conic-gradient(at calc(200% / 3) 10%, var(--c));
    --g2: conic-gradient(at 10% calc(200% / 3), var(--c));
    background: var(--g1), var(--g2),
    var(--g1) var(--s) var(--s),
    var(--g2) var(--s) var(--s),
    var(--g1) calc(2 * var(--s)) calc(2 * var(--s)),
    var(--g2) calc(2 * var(--s)) calc(2 * var(--s)) #D3E2B6;
    background-size: calc(3 * var(--s)) calc(3 * var(--s));

}

.pattern-18 {
    --s: 100px;

    &.pattern-small {
        --s: 33px; /* control the size */
    }

    --c: #88C425;
    --g: #1B676B -5% 5%, #0000 0 45%;
    background: linear-gradient(45deg, #0000 10%, var(--c) 0 40%, #0000 0),
    repeating-linear-gradient(45deg, var(--g)),
    repeating-linear-gradient(-45deg, var(--g)) var(--c);
    background-size: var(--s) var(--s);

}


.fracture-1 {
    background-image: linear-gradient(328deg, rgba(29, 29, 29, 0.05) 0%, rgba(29, 29, 29, 0.05) 25%, rgba(226, 226, 226, 0.05) 25%, rgba(226, 226, 226, 0.05) 50%, rgba(21, 21, 21, 0.05) 50%, rgba(21, 21, 21, 0.05) 75%, rgba(216, 216, 216, 0.05) 75%, rgba(216, 216, 216, 0.05) 100%), linear-gradient(172deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 25%, rgba(108, 108, 108, 0.05) 25%, rgba(108, 108, 108, 0.05) 50%, rgba(21, 21, 21, 0.05) 50%, rgba(21, 21, 21, 0.05) 75%, rgba(236, 236, 236, 0.05) 75%, rgba(236, 236, 236, 0.05) 100%), linear-gradient(207deg, rgba(153, 153, 153, 0.05) 0%, rgba(153, 153, 153, 0.05) 25%, rgba(83, 83, 83, 0.05) 25%, rgba(83, 83, 83, 0.05) 50%, rgba(5, 5, 5, 0.05) 50%, rgba(5, 5, 5, 0.05) 75%, rgba(82, 82, 82, 0.05) 75%, rgba(82, 82, 82, 0.05) 100%), linear-gradient(297deg, rgba(26, 26, 26, 0.05) 0%, rgba(26, 26, 26, 0.05) 25%, rgba(223, 223, 223, 0.05) 25%, rgba(223, 223, 223, 0.05) 50%, rgba(232, 232, 232, 0.05) 50%, rgba(232, 232, 232, 0.05) 75%, rgba(153, 153, 153, 0.05) 75%, rgba(153, 153, 153, 0.05) 100%), linear-gradient(204deg, rgba(120, 120, 120, 0.05) 0%, rgba(120, 120, 120, 0.05) 25%, rgba(191, 191, 191, 0.05) 25%, rgba(191, 191, 191, 0.05) 50%, rgba(246, 246, 246, 0.05) 50%, rgba(246, 246, 246, 0.05) 75%, rgba(123, 123, 123, 0.05) 75%, rgba(123, 123, 123, 0.05) 100%), linear-gradient(90deg, rgb(32, 234, 255), rgb(37, 116, 255));
}
.fracture-2 {

    background-image: linear-gradient(92deg, rgba(168, 168, 168, 0.04) 0%, rgba(168, 168, 168, 0.04) 25%,rgba(92, 92, 92, 0.04) 25%, rgba(92, 92, 92, 0.04) 50%,rgba(25, 25, 25, 0.04) 50%, rgba(25, 25, 25, 0.04) 75%,rgba(50, 50, 50, 0.04) 75%, rgba(50, 50, 50, 0.04) 100%),linear-gradient(255deg, rgba(139, 139, 139, 0.04) 0%, rgba(139, 139, 139, 0.04) 25%,rgba(204, 204, 204, 0.04) 25%, rgba(204, 204, 204, 0.04) 50%,rgba(211, 211, 211, 0.04) 50%, rgba(211, 211, 211, 0.04) 75%,rgba(65, 65, 65, 0.04) 75%, rgba(65, 65, 65, 0.04) 100%),linear-gradient(331deg, rgba(21, 21, 21, 0.04) 0%, rgba(21, 21, 21, 0.04) 25%,rgba(63, 63, 63, 0.04) 25%, rgba(63, 63, 63, 0.04) 50%,rgba(243, 243, 243, 0.04) 50%, rgba(243, 243, 243, 0.04) 75%,rgba(191, 191, 191, 0.04) 75%, rgba(191, 191, 191, 0.04) 100%),linear-gradient(199deg, rgba(165, 165, 165, 0.04) 0%, rgba(165, 165, 165, 0.04) 25%,rgba(236, 236, 236, 0.04) 25%, rgba(236, 236, 236, 0.04) 50%,rgba(102, 102, 102, 0.04) 50%, rgba(102, 102, 102, 0.04) 75%,rgba(159, 159, 159, 0.04) 75%, rgba(159, 159, 159, 0.04) 100%),linear-gradient(302deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 25%,rgba(7, 7, 7, 0.04) 25%, rgba(7, 7, 7, 0.04) 50%,rgba(249, 249, 249, 0.04) 50%, rgba(249, 249, 249, 0.04) 75%,rgba(199, 199, 199, 0.04) 75%, rgba(199, 199, 199, 0.04) 100%),linear-gradient(90deg, rgb(41, 207, 59),rgb(94, 168, 92));

}
.fracture-3 {

    background-image: linear-gradient(35deg, rgba(253, 253, 253, 0.03) 0%, rgba(253, 253, 253, 0.03) 53%,rgba(109, 109, 109, 0.03) 53%, rgba(109, 109, 109, 0.03) 59%,rgba(228, 228, 228, 0.03) 59%, rgba(228, 228, 228, 0.03) 66%,rgba(42, 42, 42, 0.03) 66%, rgba(42, 42, 42, 0.03) 95%,rgba(165, 165, 165, 0.03) 95%, rgba(165, 165, 165, 0.03) 100%),linear-gradient(205deg, rgba(62, 62, 62, 0.03) 0%, rgba(62, 62, 62, 0.03) 31%,rgba(200, 200, 200, 0.03) 31%, rgba(200, 200, 200, 0.03) 41%,rgba(30, 30, 30, 0.03) 41%, rgba(30, 30, 30, 0.03) 47%,rgba(151, 151, 151, 0.03) 47%, rgba(151, 151, 151, 0.03) 60%,rgba(95, 95, 95, 0.03) 60%, rgba(95, 95, 95, 0.03) 100%),linear-gradient(30deg, rgba(7, 7, 7, 0.03) 0%, rgba(7, 7, 7, 0.03) 19%,rgba(63, 63, 63, 0.03) 19%, rgba(63, 63, 63, 0.03) 33%,rgba(175, 175, 175, 0.03) 33%, rgba(175, 175, 175, 0.03) 37%,rgba(244, 244, 244, 0.03) 37%, rgba(244, 244, 244, 0.03) 60%,rgba(177, 177, 177, 0.03) 60%, rgba(177, 177, 177, 0.03) 100%),linear-gradient(90deg, rgb(162, 162, 162),rgb(229, 229, 229));
}
.fracture-4{

    background-image: linear-gradient(302deg, rgba(162, 162, 162, 0.04) 0%, rgba(162, 162, 162, 0.04) 25%,rgba(156, 156, 156, 0.04) 25%, rgba(156, 156, 156, 0.04) 50%,rgba(52, 52, 52, 0.04) 50%, rgba(52, 52, 52, 0.04) 75%,rgba(75, 75, 75, 0.04) 75%, rgba(75, 75, 75, 0.04) 100%),linear-gradient(295deg, rgba(63, 63, 63, 0.04) 0%, rgba(63, 63, 63, 0.04) 25%,rgba(197, 197, 197, 0.04) 25%, rgba(197, 197, 197, 0.04) 50%,rgba(242, 242, 242, 0.04) 50%, rgba(242, 242, 242, 0.04) 75%,rgba(154, 154, 154, 0.04) 75%, rgba(154, 154, 154, 0.04) 100%),linear-gradient(253deg, rgba(73, 73, 73, 0.04) 0%, rgba(73, 73, 73, 0.04) 25%,rgba(100, 100, 100, 0.04) 25%, rgba(100, 100, 100, 0.04) 50%,rgba(240, 240, 240, 0.04) 50%, rgba(240, 240, 240, 0.04) 75%,rgba(126, 126, 126, 0.04) 75%, rgba(126, 126, 126, 0.04) 100%),linear-gradient(78deg, rgba(32, 32, 32, 0.04) 0%, rgba(32, 32, 32, 0.04) 25%,rgba(36, 36, 36, 0.04) 25%, rgba(36, 36, 36, 0.04) 50%,rgba(224, 224, 224, 0.04) 50%, rgba(224, 224, 224, 0.04) 75%,rgba(162, 162, 162, 0.04) 75%, rgba(162, 162, 162, 0.04) 100%),linear-gradient(90deg, rgb(252, 93, 34),rgb(215, 252, 30));
}
.fracture-5 {

    background-image: linear-gradient(246deg, rgba(234, 234, 234, 0.04) 0%, rgba(234, 234, 234, 0.04) 33.3%,rgba(69, 69, 69, 0.04) 33.3%, rgba(69, 69, 69, 0.04) 66.6%,rgba(189, 189, 189, 0.04) 66.6%, rgba(189, 189, 189, 0.04) 99.89999999999999%),linear-gradient(81deg, rgba(126, 126, 126, 0.05) 0%, rgba(126, 126, 126, 0.05) 33.3%,rgba(237, 237, 237, 0.05) 33.3%, rgba(237, 237, 237, 0.05) 66.6%,rgba(74, 74, 74, 0.05) 66.6%, rgba(74, 74, 74, 0.05) 99.89999999999999%),linear-gradient(14deg, rgba(3, 3, 3, 0.08) 0%, rgba(3, 3, 3, 0.08) 33.3%,rgba(156, 156, 156, 0.08) 33.3%, rgba(156, 156, 156, 0.08) 66.6%,rgba(199, 199, 199, 0.08) 66.6%, rgba(199, 199, 199, 0.08) 99.89999999999999%),linear-gradient(323deg, rgba(82, 82, 82, 0.06) 0%, rgba(82, 82, 82, 0.06) 33.3%,rgba(179, 179, 179, 0.06) 33.3%, rgba(179, 179, 179, 0.06) 66.6%,rgba(212, 212, 212, 0.06) 66.6%, rgba(212, 212, 212, 0.06) 99.89999999999999%),linear-gradient(32deg, rgba(70, 70, 70, 0.02) 0%, rgba(70, 70, 70, 0.02) 33.3%,rgba(166, 166, 166, 0.02) 33.3%, rgba(166, 166, 166, 0.02) 66.6%,rgba(53, 53, 53, 0.02) 66.6%, rgba(53, 53, 53, 0.02) 99.89999999999999%),linear-gradient(38deg, rgba(129, 129, 129, 0.09) 0%, rgba(129, 129, 129, 0.09) 33.3%,rgba(38, 38, 38, 0.09) 33.3%, rgba(38, 38, 38, 0.09) 66.6%,rgba(153, 153, 153, 0.09) 66.6%, rgba(153, 153, 153, 0.09) 99.89999999999999%),linear-gradient(63deg, rgba(51, 51, 51, 0.02) 0%, rgba(51, 51, 51, 0.02) 33.3%,rgba(12, 12, 12, 0.02) 33.3%, rgba(12, 12, 12, 0.02) 66.6%,rgba(158, 158, 158, 0.02) 66.6%, rgba(158, 158, 158, 0.02) 99.89999999999999%),linear-gradient(227deg, rgba(63, 63, 63, 0.03) 0%, rgba(63, 63, 63, 0.03) 33.3%,rgba(9, 9, 9, 0.03) 33.3%, rgba(9, 9, 9, 0.03) 66.6%,rgba(85, 85, 85, 0.03) 66.6%, rgba(85, 85, 85, 0.03) 99.89999999999999%),linear-gradient(103deg, rgba(247, 247, 247, 0.07) 0%, rgba(247, 247, 247, 0.07) 33.3%,rgba(93, 93, 93, 0.07) 33.3%, rgba(93, 93, 93, 0.07) 66.6%,rgba(208, 208, 208, 0.07) 66.6%, rgba(208, 208, 208, 0.07) 99%),linear-gradient(0deg, #0b91d7,#6efc29);
}
.fracture-6 {
    background-image: linear-gradient(316deg, rgba(234, 234, 234, 0.02) 0%, rgba(234, 234, 234, 0.02) 16.667%,rgba(128, 128, 128, 0.02) 16.667%, rgba(128, 128, 128, 0.02) 33.334%,rgba(161, 161, 161, 0.02) 33.334%, rgba(161, 161, 161, 0.02) 50.001000000000005%,rgba(154, 154, 154, 0.02) 50.001%, rgba(154, 154, 154, 0.02) 66.668%,rgba(77, 77, 77, 0.02) 66.668%, rgba(77, 77, 77, 0.02) 83.33500000000001%,rgba(10, 10, 10, 0.02) 83.335%, rgba(10, 10, 10, 0.02) 100.002%),linear-gradient(75deg, rgba(39, 39, 39, 0.03) 0%, rgba(39, 39, 39, 0.03) 20%,rgba(232, 232, 232, 0.03) 20%, rgba(232, 232, 232, 0.03) 40%,rgba(33, 33, 33, 0.03) 40%, rgba(33, 33, 33, 0.03) 60%,rgba(84, 84, 84, 0.03) 60%, rgba(84, 84, 84, 0.03) 80%,rgba(112, 112, 112, 0.03) 80%, rgba(112, 112, 112, 0.03) 100%),linear-gradient(103deg, rgba(174, 174, 174, 0.03) 0%, rgba(174, 174, 174, 0.03) 12.5%,rgba(190, 190, 190, 0.03) 12.5%, rgba(190, 190, 190, 0.03) 25%,rgba(191, 191, 191, 0.03) 25%, rgba(191, 191, 191, 0.03) 37.5%,rgba(23, 23, 23, 0.03) 37.5%, rgba(23, 23, 23, 0.03) 50%,rgba(227, 227, 227, 0.03) 50%, rgba(227, 227, 227, 0.03) 62.5%,rgba(71, 71, 71, 0.03) 62.5%, rgba(71, 71, 71, 0.03) 75%,rgba(162, 162, 162, 0.03) 75%, rgba(162, 162, 162, 0.03) 87.5%,rgba(85, 85, 85, 0.03) 87.5%, rgba(85, 85, 85, 0.03) 100%),linear-gradient(355deg, rgba(38, 38, 38, 0.02) 0%, rgba(38, 38, 38, 0.02) 25%,rgba(106, 106, 106, 0.02) 25%, rgba(106, 106, 106, 0.02) 50%,rgba(28, 28, 28, 0.02) 50%, rgba(28, 28, 28, 0.02) 75%,rgba(66, 66, 66, 0.02) 75%, rgba(66, 66, 66, 0.02) 100%),linear-gradient(137deg, rgba(38, 38, 38, 0.03) 0%, rgba(38, 38, 38, 0.03) 25%,rgba(211, 211, 211, 0.03) 25%, rgba(211, 211, 211, 0.03) 50%,rgba(4, 4, 4, 0.03) 50%, rgba(4, 4, 4, 0.03) 75%,rgba(24, 24, 24, 0.03) 75%, rgba(24, 24, 24, 0.03) 100%),linear-gradient(51deg, rgba(253, 253, 253, 0.03) 0%, rgba(253, 253, 253, 0.03) 14.286%,rgba(103, 103, 103, 0.03) 14.286%, rgba(103, 103, 103, 0.03) 28.572%,rgba(46, 46, 46, 0.03) 28.572%, rgba(46, 46, 46, 0.03) 42.858%,rgba(68, 68, 68, 0.03) 42.858%, rgba(68, 68, 68, 0.03) 57.144%,rgba(116, 116, 116, 0.03) 57.144%, rgba(116, 116, 116, 0.03) 71.42999999999999%,rgba(248, 248, 248, 0.03) 71.43%, rgba(248, 248, 248, 0.03) 85.71600000000001%,rgba(174, 174, 174, 0.03) 85.716%, rgba(174, 174, 174, 0.03) 100.002%),linear-gradient(283deg, rgba(20, 20, 20, 0.01) 0%, rgba(20, 20, 20, 0.01) 14.286%,rgba(23, 23, 23, 0.01) 14.286%, rgba(23, 23, 23, 0.01) 28.572%,rgba(19, 19, 19, 0.01) 28.572%, rgba(19, 19, 19, 0.01) 42.858%,rgba(134, 134, 134, 0.01) 42.858%, rgba(134, 134, 134, 0.01) 57.144%,rgba(4, 4, 4, 0.01) 57.144%, rgba(4, 4, 4, 0.01) 71.42999999999999%,rgba(254, 254, 254, 0.01) 71.43%, rgba(254, 254, 254, 0.01) 85.71600000000001%,rgba(87, 87, 87, 0.01) 85.716%, rgba(87, 87, 87, 0.01) 100.002%),linear-gradient(90deg, rgb(168, 1, 206),rgb(20, 120, 203));
}


.circle-1 {
    background-image: radial-gradient(circle at 67% 83%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 1%,transparent 1%, transparent 5%,transparent 5%, transparent 100%),radial-gradient(circle at 24% 80%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 27%,transparent 27%, transparent 63%,transparent 63%, transparent 100%),radial-gradient(circle at 23% 5%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 26%,transparent 26%, transparent 82%,transparent 82%, transparent 100%),radial-gradient(circle at 21% 11%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 35%,transparent 35%, transparent 45%,transparent 45%, transparent 100%),radial-gradient(circle at 10% 11%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 21%,transparent 21%, transparent 81%,transparent 81%, transparent 100%),radial-gradient(circle at 19% 61%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 20%,transparent 20%, transparent 61%,transparent 61%, transparent 100%),radial-gradient(circle at 13% 77%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 63%,transparent 63%, transparent 72%,transparent 72%, transparent 100%),radial-gradient(circle at 30% 93%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 33%,transparent 33%, transparent 82%,transparent 82%, transparent 100%),linear-gradient(90deg, rgb(22, 176, 207),rgb(103, 7, 215));
}
.circle-2 {
    background-image: radial-gradient(circle at 13% 60%, rgba(70, 70, 70,0.06) 0%, rgba(70, 70, 70,0.06) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 51% 56%, rgba(44, 44, 44,0.06) 0%, rgba(44, 44, 44,0.06) 18%,transparent 18%, transparent 100%),radial-gradient(circle at 97% 87%, rgba(219, 219, 219,0.06) 0%, rgba(219, 219, 219,0.06) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 45% 35%, rgba(83, 83, 83,0.06) 0%, rgba(83, 83, 83,0.06) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 81% 28%, rgba(215, 215, 215,0.06) 0%, rgba(215, 215, 215,0.06) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 95% 15%, rgba(213, 213, 213,0.06) 0%, rgba(213, 213, 213,0.06) 52%,transparent 52%, transparent 100%),linear-gradient(90deg, rgb(193, 60, 179),rgb(214, 39, 128));
}
.circle-3 {
    background-image: radial-gradient(circle at 25% 54%, rgba(18, 18, 18,0.06) 0%, rgba(18, 18, 18,0.06) 22%,transparent 22%, transparent 100%),radial-gradient(circle at 67% 98%, rgba(223, 223, 223,0.06) 0%, rgba(223, 223, 223,0.06) 52%,transparent 52%, transparent 100%),radial-gradient(circle at 7% 92%, rgba(169, 169, 169,0.06) 0%, rgba(169, 169, 169,0.06) 52%,transparent 52%, transparent 100%),radial-gradient(circle at 46% 37%, rgba(187, 187, 187,0.06) 0%, rgba(187, 187, 187,0.06) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 38% 35%, rgba(57, 57, 57,0.06) 0%, rgba(57, 57, 57,0.06) 99%,transparent 99%, transparent 100%),radial-gradient(circle at 46% 86%, rgba(100, 100, 100,0.06) 0%, rgba(100, 100, 100,0.06) 60%,transparent 60%, transparent 100%),linear-gradient(90deg, rgb(57, 8, 200),rgb(240, 145, 202));
}
.circle-4{
    background-image: radial-gradient(circle at 52% 84%, rgba(194, 194, 194,0.06) 0%, rgba(194, 194, 194,0.06) 18%,transparent 18%, transparent 100%),radial-gradient(circle at 38% 97%, rgba(239, 239, 239,0.06) 0%, rgba(239, 239, 239,0.06) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 86% 17%, rgba(210, 210, 210,0.06) 0%, rgba(210, 210, 210,0.06) 61%,transparent 61%, transparent 100%),radial-gradient(circle at 6% 48%, rgba(91, 91, 91,0.06) 0%, rgba(91, 91, 91,0.06) 27%,transparent 27%, transparent 100%),radial-gradient(circle at 27% 63%, rgba(86, 86, 86,0.06) 0%, rgba(86, 86, 86,0.06) 30%,transparent 30%, transparent 100%),radial-gradient(circle at 2% 91%, rgba(182, 182, 182,0.06) 0%, rgba(182, 182, 182,0.06) 29%,transparent 29%, transparent 100%),linear-gradient(90deg, rgb(203, 171, 120),rgb(227, 87, 5));
}
.circle-5 {
    background-image: radial-gradient(circle at 77% 26%, rgba(175, 175, 175,0.06) 0%, rgba(175, 175, 175,0.06) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 37% 90%, rgba(129, 129, 129,0.06) 0%, rgba(129, 129, 129,0.06) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 7% 92%, rgba(53, 53, 53,0.06) 0%, rgba(53, 53, 53,0.06) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 65% 17%, rgba(128, 128, 128,0.06) 0%, rgba(128, 128, 128,0.06) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 100% 39%, rgba(75, 75, 75,0.06) 0%, rgba(75, 75, 75,0.06) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 92% 34%, rgba(205, 205, 205,0.06) 0%, rgba(205, 205, 205,0.06) 35%,transparent 35%, transparent 100%),radial-gradient(circle at 63% 90%, rgba(98, 98, 98,0.06) 0%, rgba(98, 98, 98,0.06) 62%,transparent 62%, transparent 100%),radial-gradient(circle at 93% 74%, rgba(130, 130, 130,0.06) 0%, rgba(130, 130, 130,0.06) 65%,transparent 65%, transparent 100%),linear-gradient(90deg, rgb(18, 233, 78),rgb(160, 239, 92));
}
.circle-6 {
    background-image: radial-gradient(circle at 82% 63%, rgba(183, 183, 183,0.09) 0%, rgba(183, 183, 183,0.09) 84%,transparent 84%, transparent 100%),radial-gradient(circle at 88% 98%, rgba(232, 232, 232,0.07) 0%, rgba(232, 232, 232,0.07) 15%,transparent 15%, transparent 100%),radial-gradient(circle at 77% 83%, rgba(252, 252, 252,0.05) 0%, rgba(252, 252, 252,0.05) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 64% 0%, rgba(140, 140, 140,0.05) 0%, rgba(140, 140, 140,0.05) 54%,transparent 54%, transparent 100%),radial-gradient(circle at 57% 86%, rgba(241, 241, 241,0.07) 0%, rgba(241, 241, 241,0.07) 80%,transparent 80%, transparent 100%),radial-gradient(circle at 17% 93%, rgba(68, 68, 68,0.05) 0%, rgba(68, 68, 68,0.05) 82%,transparent 82%, transparent 100%),radial-gradient(circle at 85% 70%, rgba(10, 10, 10,0.02) 0%, rgba(10, 10, 10,0.02) 13%,transparent 13%, transparent 100%),linear-gradient(90deg, rgb(48, 62, 175),rgb(254, 18, 105));
}


.border-green {
    border-color: #28a745;
}
*[class^="introjs-"] {
    font-family: 'Source Sans 3'!important;
}