:root {
    --primary: #f62459;
    --primary-transparent: #f62459bd;
    --secondary: #f62459;
    --tertiary: #e53366;

    --paola-primary: #f62459;
    --paola-primary-transparent: #f62459bd;
    --paola-secondary: #f62459;

    --awe-primary: rgba(255,102,153,1);
    --awe-secondary: rgba(153,51,179,1);
    --awe-tertiary: rgba(51,0,204,1);
    
    --input-border: #d2d6da;
    --input-border-disabled: #eaebec;
    
    --green: #2dce89;/*#66d432;*/
    --red: #f5365c;
    --yellow: #fb6340;

    --muted: #99abb4 !important;
    --bg-light: #f8f9fa;
    --white: #ffffff;

    --purble: #5c52f7;

    --tapit: #4863eb;

    --g-weekend-highlight-color: #f8f9fa;
}

html, body {
    font-size: 13px; /* 14.5 */
}

/* Texts */
.text-success {
    color: var(--green) !important;
}
.text-error {
    color: var(--red) !important;
}
.text-warning {
    color: var(--yellow) !important;
}
.text-danger {
    color: var(--red) !important;
}

.text-purple {
    color: var(--purble) !important;
}

.text-paola {
    color: var(--paola-primary);
}

.font-semibold,
.font-weight-semi,
.font-weight-semibold {
    font-weight: 500 !important;
}

/* Overflow */
.text-lines[data-lines]:not(.opened) > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    transition: ease-in .3s all;
}
.text-lines[data-lines="1"]:not(.opened) > div:first-child {
    -webkit-line-clamp: 1;
}
.text-lines[data-lines="2"]:not(.opened) > div:first-child {
    -webkit-line-clamp: 2;
}
.text-lines[data-lines="3"]:not(.opened) > div:first-child {
    -webkit-line-clamp: 3;
}
.text-lines[data-lines="4"]:not(.opened) > div:first-child {
    -webkit-line-clamp: 4;
}
.text-lines[data-lines="5"]:not(.opened) > div:first-child {
    -webkit-line-clamp: 5;
}
.text-lines[data-lines] > small {
    display: none;
    cursor: pointer;
    color: var(--primary);
    cursor: pointer;
}
.text-lines[data-lines].can-collapse > small {
    display: block;
}
.text-lines[data-lines].can-collapse > small:before {
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f6cf";
    font-size: 80%;
    margin-right: 3px;
}
.text-lines[data-lines].can-collapse.opened > small:before {
    content: "\f6d0";
}
.text-lines[data-lines].opened {
    
}
/* Overflow */
/* Texts */

/* Image */
.img-120x80 {
    width: 120px;
    height: 80px;
    object-fit: cover;
}
/* Image */

/* BACKGROUNS */
.bg-success {
    background-color: var(--green) !important;
}
.bg-error {
    background-color: var(--red) !important;
}
.bg-warning {
    background-color: var(--yellow) !important;
}

.bg-primary {
    background-image: linear-gradient(310deg,var(--headerBg1),var(--headerBg2));
}
.bg-secondary {
    background-image: linear-gradient(310deg,#627594,#8ca1cb);
}
.bg-success {
    background-image: linear-gradient(310deg,var(--green),#26adab);
}
.bg-info {
    background-image: linear-gradient(310deg,#1171ef,#0eadca);
}
.bg-danger {
    background-image: linear-gradient(310deg,#f5365c,#f3410f);
}
.bg-warning {
    background-image: linear-gradient(310deg,#fb6340,#faa118);
}
.bg-light {
    /*background-image: linear-gradient(310deg,#ced4da,#d1dae6);*/
    background-color: var(--bg-light) !important;
}
.bg-dark {
    background-image: linear-gradient(310deg,#212229,#0f1112);
}
.bg-red {
    background-color: var(--red);
}
.bg-purple {
    background-color: var(--purble);
}

.bg-paola {
    background-image: linear-gradient(310deg,var(--paola-primary), var(--paola-secondary));
}

.bg-awe {
    background: linear-gradient(90deg, var(--awe-primary) 0%, var(--awe-secondary) 50%, var(--awe-tertiary) 100%);
}

.bg-gradient-1to2 {
    background: var(--primary);
    background: -moz-linear-gradient(left, var(--primary) 2%, var(--secondary) 82%);
    background: -webkit-linear-gradient(left, var(--primary) 2%, var(--secondary) 82%);
    background: linear-gradient(to right, var(--primary) 2%, var(--secondary) 82%);
}

.bg-gradient {
    background: var(--primary);
    background: -moz-linear-gradient(left, var(--primary) 2%, var(--tertiary) 82%);
    background: -webkit-linear-gradient(left, var(--primary) 2%, var(--tertiary) 82%);
    background: linear-gradient(to right, var(--primary) 2%, var(--tertiary) 82%);
}

/* Animated circles */
.bg-animated-circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bg-animated-circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate-bg-animated-circles 25s linear infinite;
    bottom: -150px;
}
.bg-animated-circles li:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 0 23% 20% 0;
    border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
    bottom: -20%;
    left: 10%;
    margin-left: -11.5%;
}
.bg-animated-circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.bg-animated-circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.bg-animated-circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.bg-animated-circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.bg-animated-circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.bg-animated-circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.bg-animated-circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.bg-animated-circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.bg-animated-circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.bg-animated-circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate-bg-animated-circles {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
/* Animated circles */

/* */
.bg-cover, .mask {
    background-size: cover;
}
/* BACKGROUNDS */

/* Cursors */
.cursor-pointer {
    cursor: pointer;
}
/* Cursors */

/* ALERTS */
.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: #fff;
}
.alert-primary {
    background-image: linear-gradient(310deg,var(--headerBg1),var(--headerBg2));
}
.alert-secondary {
    background-image: linear-gradient(310deg,#627594,#8ca1cb);
}
.alert-success {
    background-image: linear-gradient(310deg,var(--green),#26adab);
}
.alert-info {
    background-image: linear-gradient(310deg,#1171ef,#0eadca);
}
.alert-danger {
    background-image: linear-gradient(310deg,#f5365c,#f3410f);
}
.alert-warning {
    background-image: linear-gradient(310deg,#fb6340,#faa118);
}
.alert-light {
    background-image: linear-gradient(310deg,#ced4da,#d1dae6);
}
.alert-dark {
    background-image: linear-gradient(310deg,#212229,#0f1112);
}
/* ALERTS */

/* HEADER */
body:not(.mini-sidebar) .header-icon,
body.mini-sidebar.show-sidebar .header-icon {
    display: none !important;
}
body.mini-sidebar .header-icon {
    display: inline-block !important;
}
body.mini-sidebar .header-logo {
    display: none !important;
}
body:not(.mini-sidebar) .header-logo,
body.mini-sidebar.show-sidebar .header-logo {
    display: inline-block !important;
}
body.mini-sidebar.show-sidebar .navbar-header {
    width: 485px !important;
}
/* HEADER */

/* FOOTER */
footer.footer {
    font-size: .85rem;
    color: #67748e!important;
    background: var(--bg-light) !important;
    border: none;
}
footer.footer .copyright {
    
}
/* FOOTER */

/* PAGE WRAPPER */
.page-wrapper {
    background: var(--bg-light)!important;
}
/* PAGE WRAPPER */

/* PAGE TITLES */
.page-titles {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 0;
    --bs-card-border-color: rgba(0,0,0,.125);
    --bs-card-border-radius: 1rem;
    --bs-card-box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius) !important;
    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%) !important;
    
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    transition: ease-in .4s all;
}
.page-titles.sticky {
    position: -webkit-sticky;
    position: sticky;
    padding-top: 80px;
    font-size: 90%;
}
.page-titles.sticky .breadcrumb {
    display: none !important;
}
.page-titles.sticky .m-t-10 {
    margin-top: 0;
}
/* PAGE TITLES */

/* CARD */
.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 0;
    --bs-card-border-color: rgba(0,0,0,.125);
    --bs-card-border-radius: 1rem;
    --bs-card-box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
    border-radius: var(--bs-card-border-radius) !important;
    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%) !important;
}
.card.card-plain {
    background-color: transparent;
    box-shadow: none;
}
.card .card-body {
    padding: 1.5rem;
}
.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card.fromleft {
    border-top-left-radius : 0 !important;
    border-bottom-left-radius : 0 !important;
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card.card-background {
    align-items: center;
}

/* Height */
.angrid .card-h-100 {
    margin-bottom: 1rem;
    height: calc(100% - 1rem);
}
/* Height */

/* Card bg */
.card-primary {
    
}
/* Card bg */

/* Card loader */
.card:has(> .card-loader) {
    overflow: hidden;
}
.card-loader {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .85);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 5;
    transition: ease-in-out .3s all;
}
.card-loader.filled {
    background-color: rgb(248 249 250);
}
.card-loader.show {
    display: flex !important;
    opacity: 1;
}
.card-loader .circular {

}
.card-loader span {
    margin-top: 90px;
    font-size: .95rem;
    font-weight: 600;
}
/* Card loader */

/* Card Icon */
.card-mini-icon {
    position: relative;
    overflow: hidden;
}
.card-mini-icon > .card-body {
    padding: 0.8rem;
}
.card-mini-icon > .icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    color: #fff;
    border-radius: 12% 84% 84% 12% / 46% 0% 0% 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
.card-mini-icon > .icon > .waves {
    position: absolute;
    bottom: 0;
}
/* Card Icon */

/* SIDEBAR */
.sidebar-nav > ul > li {
    margin-bottom: 7px;
}
.sidebar-nav ul li.nav-devider {
    margin: 10px 0;
}
.card-no-border .sidebar-nav > ul > li > a {
    border-radius: 0.6rem;
}
.card-no-border .sidebar-nav > ul > li > a.active {
    
}
.card-no-border .sidebar-footer {
    background: var(--bg-light);
    border-top: none;
}
/* SIDEBAR */

/* Tabs */
.card .nav-tabs .nav-item.show .nav-link, .card .nav-tabs .nav-link.activefix {
    color: #495057;
    background-color: transparent;
}
.card > .nav-tabs .nav-item:first-child .nav-link.active {
    border-top-left-radius: 1rem;
}
.card > .nav-tabs .nav-item:last-child .nav-link.active {
    border-top-right-radius: 1rem;
}
/* Tabs */
/* CARD */

/* Move Over */
.move-on-hover {
    transition: .2s ease-out;
    overflow: hidden;
    transform-origin: 50% 0;
    transform: perspective(999px) rotateX(0deg) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform,box-shadow;
}
.move-on-hover:hover {
    transform: perspective(999px) rotateX(7deg) translate3d(0,-4px,5px);
}
/* Move Over */

/* MODAL */
.modal-backdrop {

}
.modal {
    --border-radius: 20px;
    backdrop-filter: blur(5px);
}
.modal .modal-content {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}
.modal .modal-content .modal-header {
    border-bottom: none;
    background-color: #fafafa;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.modal .modal-content .modal-header > h3,
.modal .modal-content .modal-header > h4 {
    font-weight: 500;
}
.modal .floating-close {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgb(220 53 69);
    color: #fff;
    opacity: .85;
    transition: ease-in .3s all;
}
.modal .absolute-close {
    position: absolute;
    top: 10px;
    right: 15px;
}
.modal .floating-close:hover {
    opacity: 1;
    box-shadow: 0 0 12px rgb(221 53 69 / 100%);
}
/* MODAL */

/* FORMS */
/* .form-group */
.form-group {
    margin-bottom: 15px;
}
/* .form-control */
.form-control:not([type=range]) {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--input-border);
    appearance: none;
    border-radius: 0.5rem;
    transition: box-shadow .15s ease,border-color .15s ease;
}
.form-control:not([type=range]):focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 3px 9px rgb(50 50 9 / 0%), 3px 4px 8px rgb(94 114 228 / 10%);
}
.form-control[readonly]:not([type=range]),
.form-control[disabled]:not([type=range]) {
    background-color: var(--input-border-disabled);
}
.form-control:not([type=range]):not([readonly]):not([disabled]):focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 3px 9px rgb(50 50 9 / 0%), 3px 4px 8px rgb(94 114 228 / 10%);
}
.form-control:not([type=range]).is-invalid {
    border-color: var(--red);
}
.form-control:not([type=range]).is-valid {
    border-color: var(--green);
}
.form-control[type=range] {
    padding: 0;
}
.form-control[type=range]:-webkit-slider-runnable-track {
    background-color: var(--primary);
}
.form-control-lg {
    padding: 0.6rem 0.85rem;
    font-size: 1.1rem;
    line-height: 1.5rem;
}
.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
/* .form-control */

/* .select2 */
.select2 .select2-container {
    width: 100%;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    display: block;
    width: 100%;
    padding: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--input-border);
    appearance: none;
    border-radius: 0.5rem;
    transition: box-shadow .15s ease,border-color .15s ease;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active,
.select2-selection .select2-selection--multiple:focus,
.select2-selection .select2-selection--multiple:active,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    color: #495057;
    background-color: #fff;
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 3px 9px rgb(50 50 9 / 0%), 3px 4px 8px rgb(94 114 228 / 10%);
}
.input-group .select2-container--default:not(:first-child) .select2-selection--single {
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
.input-group .select2-container--default:nth-child(2) .select2-selection--single {
    border-radius: 0.5rem 0 0 0.5rem;
    border-left-width: 1px;
}
.input-group .select2-container--default:last-child .select2-selection--single {
    border-radius: 0 0.5rem 0.5rem 0;
    border-right-width: 1px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--primary);
    color: #fff;
}
.select2-container .select2-selection--single {
    
}
.select2-container .select2-selection--single .select2-selection__rendered {
    
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.7rem;
    padding: .375rem .75rem;
    padding-right: 0.95rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 3px;
    right: 11px;
    width: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f5f5f5;
    border: 1px solid transparent;
    border-radius: .5rem;
}
.input-group .select2-container {
    width: auto !important;
}
.input-group .select2-container .select2-selection--single {
    padding-right: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    
}
/* .select2 */

/* Buttons */
.btn {
    border-radius: 0.5rem;
    transition: box-shadow .15s ease,border-color .15s ease;
    transition: ease-in-out .3s all;
}
.input-group > .btn {
    border-color: var(--input-border);
}
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.input-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.btn.btn-primary:hover,
.btn.btn-info:hover {
    box-shadow: 0 14px 26px -12px var(--primary-shadow45),
        0 4px 23px 0 rgb(0 0 0 / 12%), 
        0 8px 10px -5px var(--primary-shadow20) !important;
}
.btn.btn-link:hover {
    color: var(--primary);
    box-shadow: none;
}
.btn.btn-primary:focus, .btn.btn-primary:active {
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 3px 9px rgb(50 50 9 / 0%), 3px 4px 8px rgb(94 114 228 / 10%);
}

.btn.btn-tapit {
    color: #fff;
    background-color: var(--tapit) !important;
}

.btn.btn-primary {
    color: #fff;
    background-color: var(--primary) !important;
}
.btn.btn-primary:hover {
    color: #fff;
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
    /*box-shadow: 0 3px 9px rgb(50 50 9 / 0%), 3px 4px 8px rgb(94 114 228 / 10%);*/
}

.btn.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 2px 0 var(--primary-shadow15), 
        0 3px 1px -2px var(--primary-shadow20), 
        0 1px 5px 0 var(--primary-shadow15);
}
.btn.btn-outline-primary.btn-transparent {
    background-color: rgba(255, 255, 255, 0);
}
.btn.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-outline-white,
.btn.btn-white-outline {
    color: #fff;
    border-color: #fff;
}
.btn.btn-outline-white.btn-transparent,
.btn.btn-white-outline.btn-transparent {
    background-color: rgba(255, 255, 255, 0);
}
.btn.btn-outline-white:hover,
.btn.btn-white-outline:hover {
    color: #222;
    background-color: #fff;
    border-color: #fff;
}

.btn.btn-outline-success,
.btn.btn-success-outline {
    color: var(--green);
    border-color: var(--green);
}
.btn.btn-outline-success.btn-transparent,
.btn.btn-success-outline.btn-transparent {
    background-color: rgba(255, 255, 255, 0);
}
.btn.btn-outline-success:hover,
.btn.btn-success-outline:hover {
    color: #fff;
    background-color: var(--green);
    border-color: var(--green);
}

.btn-circle {
    border-radius: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-group-mini .btn {
    padding: 1px 5px !important;
    font-size: 9px;
}
.btn-group-mini .btn:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.btn-group-mini .btn:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.btn-success, .btn-success.disabled {
    background: var(--green) !important;
    border: 1px solid var(--green) !important;
    color: #fff !important;
}
.btn-success.disabled, .btn-success:disabled {
    opacity: .6;
}
/* Buttons */

/* Checkboxes */
[type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after {
    border-radius: .3rem;
    transition: ease-in-out .3s all;
}
[type="checkbox"]:checked + label:before, [type="checkbox"]:checked:not(.filled-in) + label:after {
    border-radius: 1px;
}
/* Checkboxes */

/* .strength-display */
.strength-display {
    font-size: .85rem;
    text-align: center;
    padding: .25rem;
    display: none;
    border-bottom: 3px solid transparent;
}
.strength-display.weak {
    color: var(--red);
    border-color: var(--red);
}
.strength-display.medium {
    color: var(--yellow);
    border-color: var(--yellow);
}
.strength-display.strong {
    color: var(--green);
    border-color: var(--green);
}
/* .strength-display */

/* FORMS */

/* TOASTR */
.jq-toast-single {
    border-radius: .1.2rem;
    margin: 0 0 8px;
    background-size: 20px;
    padding-left: 40px;
    border-radius: .9rem;
}
.jq-toast-single h2 {
    margin-bottom: 0;
}
.jq-toast-single > .jq-toast-loader {
    display: none;
}
.jq-toast-single > .close-jq-toast-single {
    
}
/* TOASTR */

/* BORDERS */
.border-dashed {
    border-style: dashed !important;
}
.border-radius-md {
    border-radius: 0.5rem;
}
.border-1 {
    border-width: 1px!important;
}
.border-secondary {
    border-color: #8392ab!important;
}
/* BORDERS */

/* Height Helpers */
.h-100-scroll {
    overflow: hidden;
    overflow-y: auto !important;
    height: 100% !important;
}
.overflow-y-auto {
    overflow-y: auto !important;
}
/* Height Helpers */

/* TABLES */
.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #67748e;
    --bs-table-striped-bg: rgba(0,0,0,.05);
    --bs-table-active-color: #67748e;
    --bs-table-active-bg: rgba(0,0,0,.1);
    --bs-table-hover-color: #67748e;
    --bs-table-hover-bg: rgba(0,0,0,.075);
    width: 100%;
    margin-bottom: 1rem;
    color: #67748e;
    vertical-align: top;
    border-color: #e9ecef;
    display: table;
    font-size: 0.90rem;
}
tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.table>thead {
    vertical-align: bottom;
    border-radius: 1rem 1rem 0 0;
}
.table > thead th:first-child {
    border-radius: 1rem 0 0 0;
}
.table > thead th:last-child {
    border-radius: 0 1rem 0 0;
}
.table>:not(:last-child)>:last-child>* {
    border-bottom-color: #e9ecef;
}
.table.align-items-center td, .table.align-items-center th {
    vertical-align: middle;
}
.table thead th, .table tbody td {
    padding: 0.75rem 1.5rem;
    letter-spacing: 0;
    border-bottom: 1px solid #e9ecef;
}
.table tfoot th,
.table tfoot td {
    padding: 0.75rem 1.5rem;
}
.table thead th {
    text-transform: capitalize;
}
.card-body .table thead th {
    padding: 0.5rem;
}
.table>:not(:first-child) {
    border-top: 1px solid currentColor;
}
.table>:not(caption)>*>* {
    padding: 0.5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table tbody tr:last-child td {
    border-width: 0;
}
.table-responsive {
    border-radius: 1rem;
}
/* TABLES */

/* BADGE */
.badge-dot {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    font-weight: 400;
    font-size: .875rem;
    text-transform: none;
}
.badge-odnos {
    background-color: var(--purble);
    color: var(--white);
}
/* BADGE */

/* Anubbe Collapse */
.ancollapse {
    
}
.ancollapse div[data-toggle="collapse"] {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    cursor: pointer;
    border-bottom: 1px solid #eaeaea;
    color: #222;
}
.ancollapse:last-of-type:not(:has(.collapse.show)) div[data-toggle="collapse"] {
    border-bottom: none;
}
.ancollapse:has(.collapse.show) > div[data-toggle="collapse"] {
    color: var(--primary);
    background-color: #fff;
    position: sticky;
    z-index: 1;
    top: 0;
}
.ancollapse div[data-toggle="collapse"] > i {
    
}
.ancollapse:hover div[data-toggle="collapse"] > i {
    color: var(--primary);
    transition: ease .2s all;
}
.ancollapse:has(.collapse.show) > div[data-toggle="collapse"] > i {
    transform: rotate(90deg);
    color: var(--primary);
}
.ancollapse .collapse {
    padding-top: .5rem;
    border-bottom: 1px solid #eaeaea;
}
/* Anubbe Collapse */

/* ANIMATIONS */
/* Left to right */
.animate-left-right {
    position: relative;
    animation: leftToRight 4s infinite;
}
@keyframes leftToRight {
    0%,
    100% {
      left: 0;
    }
  
    50% {
      left: 50px;
    }
}
/* Left to right */
/* Waves */
.waves {
    position: relative;
    width: 100%;
    margin-bottom: -7px;
}
.waves.waves-sm {
    height: 50px;
    min-height: 50px;
}
.waves.no-animation .moving-waves > use {
    animation: none;
}
.wave-rotate {
    transform: rotate(180deg);
}
.moving-waves.waves-animated > use {
    animation: h 40s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.moving-waves > use:first-child {
    animation-delay: -2s;
    animation-duration: 11s;
}
.moving-waves > use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.moving-waves > use:nth-child(3) {
    animation-delay: -3s;
    animation-duration: 15s;
}
.moving-waves > use:nth-child(4) {
    animation-delay: -4s;
    animation-duration: 20s;
}
.moving-waves > use:nth-child(5) {
    animation-delay: -4s;
    animation-duration: 25s;
}
.moving-waves > use:nth-child(6) {
    animation-delay: -3s;
    animation-duration: 30s;
}
@keyframes h {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    to {
        transform: translate3d(85px, 0, 0);
    }
}
@media (max-width: 767.98px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
}
/* Waves */
/* ANIMATIONS */

/* BODY ANIMATION */
body.signupNOT section {
    z-index: 2;
}
body.signupNOT {
    background: -moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background: -webkit-linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  /*min-height: calc(100vh - 2rem);*/
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  overflow: hidden;
  position: relative; 
}

body.signupNOT::before, 
body.signupNOT::after {
  content: "";
  width: 70vmax;
  height: 70vmax;
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
  left: -20vmin;
  top: -20vmin;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 1;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none; 
}
  
body.signupNOT::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%; 
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0 50%
  }
}

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% {
    border-radius: 40% 60%; } 
}

@keyframes spin {
  to {
    transform: rotate(1turn); 
  } 
}
  .st0{display:none;}
  .st1{display:inline;}
  .st2{opacity:0.29;}
  .st3{fill:#FFFFFF;}
  .st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
  .st5{clip-path:url(#SVGID_4_);}
  .st6{clip-path:url(#SVGID_6_);}
  .st7{clip-path:url(#SVGID_8_);}
  .st8{clip-path:url(#SVGID_10_);}
  .st9{fill:none;}
  .st10{clip-path:url(#SVGID_12_);}
  .st11{opacity:0.7;}
  .st12{clip-path:url(#SVGID_14_);}
  .st13{opacity:0.2;}
  .st14{clip-path:url(#SVGID_16_);}
  .st15{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
/* BODY ANIMATION */

/* Brands colors */
.bg-google {
    background-color: #4285f4 !important;
    color: #fff;
}
.border-google {
    border-color: #4285f4 !important;
}
.text-google {
    color: #4285f4 !important;
}
/* Brands colors */

/* Card Users */
.el-element-overlay .el-card-item .el-overlay-1 img {
    border-radius: 1rem 1rem 0 0;
}
.el-element-overlay .el-card-item .el-overlay-1:has(> img.userImgProfile) {
    border-radius: 1rem 1rem 0 0;
    cursor: pointer;
}
.el-element-overlay .el-card-item .el-overlay-1 img.userImgProfile {
    width: 100% !important;
    height: auto !important;
}
/* Card Users */

/* Plans */
.card-plan {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--plan-color-primary);
    background: linear-gradient(90deg, var(--plan-color-primary) 0%, var(--plan-color-secondary) 100%);
    color: #fff;
    border-radius: 15px;
    padding: 1rem;
    height: 100%;
}
.card-plan .card-plan-header {
    
}
.card-plan .card-plan-header .name {
    color: var(--plan-text);
    color: #fff;
    font-weight: bold;
}
.card-plan .card-plan-header .price {
    display: flex;
    align-items: center;
    font-size: 2.5rem;
    line-height: 2.5rem;
    gap: .3rem;
}
.card-plan .card-plan-header .price > .details {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.card-plan .card-plan-header .price > .details > small.sup {
    font-size: 1rem;
    line-height: .9rem;
    font-weight: normal;
}
.card-plan .card-plan-header .price > .details > small.down {
    font-size: .9rem;
    line-height: .9rem;
    font-weight: normal;
    /*margin-left: -30px;
    margin-bottom: 10px;*/
}
.card-plan .card-plan-header .price > span {
    display: none;
    font-weight: bolder;
}
.card-plan[data-billing-type='monthly'] .card-plan-header .price > span[data-period='1'] {
    display: inline-block;
}
.card-plan[data-billing-type='trimester'] .card-plan-header .price > span[data-period='3'] {
    display: inline-block;
}
.card-plan[data-billing-type='semester'] .card-plan-header .price > span[data-period='6'] {
    display: inline-block;
}
.card-plan[data-billing-type='yeary'] .card-plan-header .price > span[data-period='12'] {
    display: inline-block;
}
.card-plan .card-plan-body .descrip {

}
.card-plan .card-plan-body .features {

}
.card-plan .card-plan-body .features > li {

}
.card-plan .card-plan-body .price > small,
.card-plan .card-plan-body .features > li.off {

}
.card-plan .card-plan-footer {

}
.card-plan .card-plan-footer > .btn,
.card-plan .card-plan-footer > .btn:visited {
    position: relative;
    color: #222;
    background-color: #fff;
    border-color: #fff;
}
.card-plan .card-plan-footer > .btn:hover,
.card-plan .card-plan-footer > .btn:active {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}
label.plan-radio {
    height: 100%;
}
label.plan-radio > [type="checkbox"],
label.plan-radio > [type="radio"] {
}
label.plan-radio > [type="checkbox"] + .card-plan,
label.plan-radio > [type="radio"] + .card-plan {
    cursor: pointer;
    transition: ease-in-out margin .3s, ease-in-out box-shadow .3s;
}
label.plan-radio > [type="checkbox"] + .card-plan:hover,
label.plan-radio > [type="radio"] + .card-plan:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    margin-top: -1rem;
    margin-bottom: 1rem;
}
label.plan-radio > [type="checkbox"]:checked + .card-plan,
label.plan-radio > [type="radio"]:checked + .card-plan {
    box-shadow: var(--primary) 0px 2px 20px;
    margin-top: -1rem;
    margin-bottom: 1rem;
}
label.plan-radio > [type="checkbox"]:checked + .card-plan .btn,
label.plan-radio > [type="radio"]:checked + .card-plan .btn {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
label.plan-radio > [type="checkbox"]:checked + .card-plan .btn > span,
label.plan-radio > [type="radio"]:checked + .card-plan .btn > span {
    display: none;
}
label.plan-radio > [type="checkbox"]:checked + .card-plan .btn::before,
label.plan-radio > [type="radio"]:checked + .card-plan .btn::before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: '\F12C';
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-right: 0.3rem;
}
label.plan-radio > [type="checkbox"]:checked + .card-plan .btn::after,
label.plan-radio > [type="radio"]:checked + .card-plan .btn::after {
    content: attr(data-selected-text);
    display: inline-block;
    vertical-align: middle;
}
/* Plans */

/* Dropify */
.dropify-message > p {
    text-align: center !important;
}
/* Dropify */

/* Addreses */
ul.addresess {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.addresess > li {
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 0.8rem 0
}
ul.addresess > li:last-child {
    border-bottom: none;
}
ul.addresess > li > button:first-of-type {
    margin-left: .3rem;
}
ul.addresess:empty::after {
    content: attr(data-msg);
    padding: .8rem 1rem;
    text-align: center;
    font-style: italic;
    color: var(--muted) !important;
    width: 100%;
    display: block;
}
/* Addreses */

/* Social */
.social {
    
}

.social .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.social > .social-header {
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card.profile .photo {
    border: 4px solid #fff;
    background-color: var(--bg-light);
}
.card.profile .cover {
    position: relative;
    height: 180px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: ease-in-out .3s all;
}
.card.profile .cover.text-shadow:before {
    content: "";
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6363139005602241) 0%, rgba(0, 0, 0, 0) 40%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.social .profile {
    
}
.social .profile > .info {
    position: sticky;
    top: calc(70px + 20px + 1rem + 100px + .5rem);
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;
    padding: .8rem;
}
.social .profile > .info .name {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}
.social .profile > .info .title {
    display: block;
    margin-bottom: .5rem;
    text-align: center;
    font-size: .8rem;
}
.social .profile > .info .buttons {
    gap: .3rem;
    justify-content: center;
}
.social .profile > .info .buttons .btnRelationShip {
    flex-grow: 1;
    background-color: var(--primary) !important;
    color: #fff !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}
.social .profile .cover {
    opacity: 0;
    height: 132px;
    margin: 0 -0.8rem;
    margin-top: calc(-132px - 0.8rem);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1rem 1rem 0 0;
}
.social .profile img.rounded-circle {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 1rem;
    margin-top: calc(-100px - 2px);
    border: 4px solid #fff;
    background-color: var(--bg-light);
}

#modalPhotoViewer.modal.show {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
#modalPhotoViewer .modal-dialog {
    max-width: 100%;
    width: auto !important;
    display: inline-block;
}
#modalPhotoViewer button.btn-trans-close {
    position: absolute;
    background: transparent;
    border-color: transparent;
    top: 0.3rem;
    right: 0.3rem;
    opacity: .5;
    transition: ease-in-out .3s all;
    font-size: 1.2rem;
}
#modalPhotoViewer .modal-body:hover button.btn-trans-close {
    opacity: 1;
    border-color: var(--red);
    color: var(--red);
    background-color: rgba(0, 0, 0, 0.55);
}
#modalPhotoViewer .modal-body:hover button.btn-trans-close:hover {
    background-color: rgba(255, 255, 255, 0.75);
}
#modalPhotoViewer img {
    max-height: calc(100vh - 60px);
}
/* Social */

/* Social post */
.social-post {
    padding: .8rem .8rem;
    padding-bottom: calc(.8rem - 7px);
    /*border-bottom: 1px solid var(--bg-light);*/
    background: #fff;
    margin: 0.5rem 0px;
    border-radius: 0.8rem;
    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%)
}
.social-post:last-child {
    border-bottom: none;
}
.social-post > .social-post-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.social-post > .social-post-header > a > img {
    height: 40px;
    width: 40px;
    background-color: var(--bg-light);
}
.social-post > .social-post-header > .info {
    
}
.social-post > .social-post-header > .info > a:hover {
    color: var(--primary) !important;
}
.social-post > .social-post-header > .info > small {
    
}
.social-post > .content {

}
.social-post > .content > .text {
    color: #343a40;
    margin-bottom: .5rem;
}
.social-post > .content > .photo {
    
}
.social-post > .content > .photo > img {
    display: block;
    margin: 0 auto;
    border-radius: 1rem;
    cursor: pointer;
    height: 200px;
    background-color: var(--bg-light);
}
.social-post > .content > .photo > img.full {
    width: auto;
    height: auto;
    max-height: calc(100vh - 80px);
}
.social-post > .content > .photo-profile {

}
.social-post > .content > .photo-profile > img {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    height: 200px;
    width: 200px;
    background-color: var(--bg-light);
}
.social-post > .counters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.social-post > .counters > div {
    display: flex;
    align-items: center;
    gap: .3rem;
    height: .8rem;
    font-size: .8rem;
    margin-top: .5rem;
}
.social-post > .counters > div > i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    padding: 2px;
}
.social-post > .counters > div > i > i {
    font-size: 9px;
}
.social-post > .counters > .likes {

}
.social-post > .counters > .comments {

}
.social-post > .content .link {
    position: relative;
    display: block;
    border-radius: 1rem;
    border: 1px solid var(--bg-light);
    background-color: var(--bg-light);
}
.social-post > .content .link > .image {
    height: 150px;
    width: 100%;
    display: block;
}
.social-post > .content .link > .info {
    padding: .5rem;
}
.social-post > .content .link > .info > small,
.social-post > .content .link > .info > span {
    display: block;
}
.social-post > .content .link > .info > small.host {
    font-size: .9rem;
}
.social-post > .content .link > .info > span.title {
    font-size: .9rem;
}
.social-post > .content .link > .info > span.descrip {
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.social-post > .actions {
    display: flex;
    flex: 1 1 0px;
    justify-content: space-around;
}
.social-post > .actions > .btn {
    display: flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
}
.social-post > .actions > .btn.text-danger {
    font-weight: 500;
}
/* Social post */

/* Error handler */
body:has( .odnos-error) {
    counter-reset: odnosErrorCounter;
}
body:has( .odnos-error):before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.75);
}
.odnos-error {
    counter-increment: odnosErrorCounter;
    bottom:0px;
    right:15px;
    z-index:10000;
}
.odnos-error[data-error='Error'] {
    z-index:10001;
}
.odnos-error .card-body:before {
    content: "Error #" counter(odnosErrorCounter);
}
.odnos-error .card-body[data-error='Error']:before {
    color: var(--red);
}
body:has( .odnos-error) .preloader {
    display: none !important;
}
body:has( .odnos-error) .steps .step {
    display: block!important;
    opacity: 1;
}
/* Error handler */

/* Table */
.table.table-empty-hide:has(> tbody:empty) {
    display: none;
}
/* Table */

/* Empty Helpers */
.empty-hide:has( .values:empty) {
    display: none;
}
/* Empty Helpers */

/* Google Ads Ad */
.gad {
    border-radius: .9rem;
    border: 1px solid #eaeaea;
    padding: .8rem;
    font-size: 0.8rem;
}
.gad > .url {
    display: flex;
    flex-wrap: wrap;
}
.gad > .url:before {
    content: attr(data-text) " · ";
    font-weight: 500;
    margin-right: .4rem;
}
.gad > .title {
    display: flex;
    flex-wrap: wrap;
    font-size: 120%;
    color: var(--primary);
}
.gad > .title > span:before {
    content: "|";
    margin-left: .4rem;
    margin-right: .4rem;
}
.gad > .title > span:first-child:before {
    content: "";
    margin-left: 0;
    margin-right: 0;
}
.gad > .description {
    display: flex;
    flex-wrap: wrap;
}
.gad > .description > span:before {
    content: ".";
    margin-right: .4rem;
}
.gad > .description > span:first-child:before {
    content: "";
    margin-left: 0;
    margin-right: 0;
}
.gad > .callout {
    display: flex;
    flex-wrap: wrap;
    font-size: 85%;
}
.gad > .callout > span:before {
    content: "·";
    margin-left: .4rem;
    margin-right: .4rem;
}
.gad > .callout > span:first-child:before {
    content: "";
    margin-left: 0;
    margin-right: 0;
}
.gad > .phone {
    display: flex;
    flex-wrap: wrap;
    margin-top: .4rem;
}
/* Google Ads Ad */

/* card-check */
.card-check {
    display: block;
}
.card-check > input {
    
}
.card-check > input + div {
    border: 1px solid var(--input-border);
    border-radius: .5rem;
    padding: .5rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: ease-in-out .3s all;
    overflow: hidden;
}
.card-check.check-vertical.check-bg > input + div {
    background-position: center;
    background-size: cover;
    height: 150px;
    position: relative;
    justify-content: end;
}
.card-check.check-vertical.check-bg > input + div:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(14px + 1rem);
    background-color: rgba(255, 255, 255, .75);
    transition: ease-in-out .3s all;
}
.card-check.check-vertical.check-bg > input:checked + div:before,
.card-check.check-vertical.check-bg:hover > input + div:before {
    height: 100%;
}
.card-check.check-vertical.check-bg > input:checked + div:before {
    background-color: var(--primary);
    opacity: .75;
}
.card-check.check-vertical.check-bg > input + div > span {
    z-index: 2;
    color: #222;
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    transition: ease-in-out .3s all;
}
.card-check.check-vertical.check-bg > input:checked + div > span,
.card-check.check-vertical.check-bg:hover > input + div > span {
    margin-bottom: calc(50% - 14px * 2);
}
.card-check.check-vertical.check-bg > input:checked + div > span {
    color: #fff;
}
.card-check.check-vertical > input + div {
    flex-direction: column;
}
.card-check.check-vertical > input + div > i {
    font-size: 1.2rem;
}
.card-check.check-vertical > input + div > span {
    font-size: .9rem;
}
.card-check:hover > input:not(:checked) + div {
    background-color: var(--input-border);
}
.card-check > input:checked + div {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;;
}
/* card-check */

/* LP Editor */
.editor-container {
    display: flex;
    flex-direction: column;
}
.editor-container h3 {
    position: sticky;
    top: 0;
    background-color: #fff;
    font-weight: bold;
    z-index: 1;
}
.editor-container .editor-body {
    flex-grow: 1;
}
.editor-container .editor-footer {
    position: sticky;
    bottom: 0;
    background-color: #fff;
}
/* LP Editor */

/* Comments */
#modalCommentEditor .modal-dialog {
    max-width: 690px;
}
/* Comments */

/* WYSI */
.wysihtml5-sandbox,
.anwysi-sandbox {
    border-radius: 0px 0px 8px 8px !important;
    border-color: var(--input-border) !important;
    width: 100% !important;
    padding: 5px;
}
/* WYSI */

/* Dropify */
.dropify-wrapper {
    border-radius: 8px;
    border: 1px solid var(--input-border) !important;
}
/* Dropify */

/* PRODUCTS V2 */
.productv2-images {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.productv2-images > .item {
    position: relative;
    border-radius: 10px;
    padding-top: 33%;
    width: calc(50% - 5px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--input-border);
    cursor: move;
}
.productv2-images > .item:first-child {
    width: 100%;
    padding-top: 66%;
}
.productv2-images > .item:hover {}
.productv2-images > .item > a {
    position: absolute;
    top: 5px;
    right: 5px;
}
.productv2-images > .item > button {
    position: absolute;
    top: 35px;
    right: 5px;
}
/* PRODUCTS V2 */

/* Btn Checked */
.btn-check {
    border-color: var(--input-border);
    background-color: #fff;
    color: #222 !important;
}
label.btn-check {
    color: #222 !important;
}
.btn-check:not(:disabled):not(.disabled).active,
.btn-check:has(> input:checked) {
    border-color: var(--primary);
    background-color: var(--primary);
    color: #fff;
}
label.btn-check:not(:disabled):not(.disabled).active,
label.btn-check:has(> input:checked) {
    color: #fff !important;
}
/* Btn Checked */

/* Rounded */
.rounded-5 { border-radius: 5px !important; }
.rounded-8 { border-radius: 8px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-15 { border-radius: 15px !important; }
.rounded-20 { border-radius: 20px !important; }
.rounded-25 { border-radius: 25px !important; }
.rounded-30 { border-radius: 30px !important; }
.rounded-35 { border-radius: 35px !important; }
.rounded-40 { border-radius: 40px !important; }
.rounded-45 { border-radius: 45px !important; }
.rounded-50 { border-radius: 50px !important; }
/* Rounded */

/* Card actions */
.card-actions button[type=submit] {
    color: #67757c;
}
.card-actions a:hover,
.card-actions button[type=submit]:hover {
    color: var(--primary);
}
.card-actions .btn:last-child:not(:only-child),
.card-actions form:last-child:not(:only-child) > .btn {
    padding-right: 0 !important;
}
/* Card actions */

/* Comments */
.comment-text p {
    max-height: none;
}
/* Comments */

/* Odnos loader */
@keyframes odnosFadeZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
#odnos-loader {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: scale(0.9);
    animation: odnosFadeZoomIn 0.4s ease-out forwards;
}

#odnos-loader .loader-box {
    background-color: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 320px;
    width: 90%;
    text-align: center;
}

#odnos-loader .loader-content video {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

#odnos-loader .loader-text {
    position: relative;
    height: 24px;
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 14px;
    color: #767676;
}
#odnos-loader .loader-text:empty {
    display: none;
}
@keyframes odnosFadeInStep {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    10%, 90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}
#odnos-loader .loader-text span {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    opacity: 0;
    animation: odnosFadeInStep 2s ease-in-out forwards;
}

/* Odnos loader */

/* Pïll */
/* Pills con colores personalizados */
.pill-purple {
    --pill-bg: #f0e8fd;
    --pill-progress: #7e57c2;
    --pill-color: #5e35b1;
}

.pill-green {
    --pill-bg: #e6f4ea;
    --pill-progress: #43a047;
    --pill-color: #2e7d32;
}

.pill-red {
    --pill-bg: #fdecea;
    --pill-progress: #e53935;
    --pill-color: #b71c1c;
}

.pill-orange {
    --pill-bg: #fff3e0;
    --pill-progress: #fb8c00;
    --pill-color: #ef6c00;
}

.pill-blue {
    --pill-bg: #e3f2fd;
    --pill-progress: #1e88e5;
    --pill-color: #1565c0;
}

.pill-teal {
    --pill-bg: #e0f2f1;
    --pill-progress: #00897b;
    --pill-color: #00695c;
}

.pill-pink {
    --pill-bg: #fce4ec;
    --pill-progress: #d81b60;
    --pill-color: #ad1457;
}

.pill-yellow {
    --pill-bg: #fffde7;
    --pill-progress: #fbc02d;
    --pill-color: #f9a825;
}

.pill-brown {
    --pill-bg: #efebe9;
    --pill-progress: #6d4c41;
    --pill-color: #4e342e;
}

.pill-gray {
    --pill-bg: #f5f5f5;
    --pill-progress: #757575;
    --pill-color: #424242;
}
/* Pïll */

/* Gantt */
.gantt-container .grid-header {
    z-index: 1 !important;
}
.gantt-container .lower-text .dname {
    display: block;
    text-align: center;
    font-weight: 500;
}
.gantt-container .lower-text .dnumber {
    display: block;
    text-align: center;
    font-weight: 400;
}
.gantt-container .current-date-highlight {
    height: 30px !important;
}
.gantt-container .date-range-highlight {
    height: 30px !important;
    background-color: #efefef !important;
}
.gantt-container .lower-text {
    font-size: 12px;
    position: absolute;
    width: calc(var(--gv-column-width) * .8);
    height: calc(var(--gv-lower-header-height) * .8);
    align-content: center;
    text-align: center;
    color: var(--g-text-muted);
}
.gantt {
    --pill-bg: #f5f5f5;
    --pill-progress: #757575;
    --pill-color: #424242;
}
.gantt .bar-wrapper {
    
}
.gantt .bar-wrapper .bar {
    border-radius: 10px !important;
    outline: 1px solid var(--pill-progress) !important;
    fill: var(--pill-bg) !important;
    transition: filter 0.3s ease;
}
.gantt .bar-wrapper .bar:hover {
    filter: drop-shadow(rgba(0, 0, 0, 0.05) 0px 1px 2px 0px);
}
.gantt .bar-label {
    font-family: Helvetica !important;
    font-size: 12px !important;
    fill: var(--pill-color) !important;
}
.gantt .bar-progress {
    fill: var(--pill-progress) !important;
}

.gantt-container .popup-wrapper {
    background-color: rgba(255, 255, 255, 1) !important;
}
/* Gantt */

/* Modulus */
.mod-customers-bg {
    background-color: var(--paola-primary);
    color: #fff;
}
.mod-projects-bg {
    background-color: var(--purple);
    color: #fff;
}
/* Modulus */

/* Card v2 */
.card-header2 {
    position: sticky;
    border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    top: 139px;
    z-index: 1;
    transition: ease-in-out 0.3s all;
}
.card:has(>.card-header2) {
    position: sticky;
}
.card.stuck .card-header2 {
    border-radius: var(--bs-card-border-radius);
}
.card-header2 > .btn-right {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-header2 h3 {
    margin-bottom: 0;
    font-size: 18px;
}

.card .group-items .item {
    margin-top: 10px;
}
.card .group-items .item:first-child {
    margin-top: 0px;
}

.card .group-items .todo {
    margin-top: 8px;
}
.card .group-items .todo .list .todo-item {
    padding-left: 0px;
    padding-right: 0px;
} 
.card .group-items .todo .list .todo-item > input[type=checkbox]:checked + label {
    position: relative;
    opacity: 0.6;
}
.card .group-items .todo .list .todo-item > input[type=checkbox] + label:after {
    position: absolute;
    content: "";
    width: 0px;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: ease-in-out .4s all;
    display: none;
}
.card .group-items .todo .list .todo-item > input[type=checkbox]:checked + label:after {
    width: 0;
}
.card .group-items .todo .list .todo-item > input[type=checkbox]:checked + label .comments,
.card .group-items .todo .list .todo-item > input[type=checkbox]:checked + label .members,
.card .group-items .todo .list .todo-item > input[type=checkbox]:checked + label .actions {
    display: none !important;
}
.card .group-items .todo .list .add:before, 
.card .group-items .todo .list .todo-item:before {
    width: 15px;
    margin-right: 3px;
}
/* Card v2 */