/*
Buttons and Brand Colors
*/
/* Background Color */
.brand-bg {
    background-color: #015eab !important;
}

.brand-text {
    color: #015eab !important;
}

.topbar.brand-bg {}

.color-bordered-table.primary-bordered-table thead th {
    background-color: #015eab !important;
    color: #ffffff;
}

.color-bordered-table.primary-bordered-table {
    border: 2px solid #015eab;
}

/* Brand fonts */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/odnos_tapit.eot?wwa3oi');
    src: url('../fonts/odnos_tapit.eot?wwa3oi#iefix') format('embedded-opentype'),
        url('../fonts/odnos_tapit.ttf?wwa3oi') format('truetype'),
        url('../fonts/odnos_tapit.woff?wwa3oi') format('woff'),
        url('../fonts/odnos_tapit.svg?wwa3oi#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icod-"],
[class*=" icod-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icod-odnos_tap_it_logo .path1:before {
    content: "\e900";
    color: rgb(0, 0, 0);
}

.icod-odnos_tap_it_logo .path2:before {
    content: "\e901";
    margin-left: -1.4453125em;
    color: rgb(0, 0, 0);
}

.icod-odnos_tap_it_logo .path3:before {
    content: "\e902";
    margin-left: -1.4453125em;
    color: rgb(0, 0, 0);
}

.icod-odnos_tap_it_logo .path4:before {
    content: "\e903";
    margin-left: -1.4453125em;
    color: rgb(0, 0, 0);
}

.icod-odnos_tap_it_logo .path5:before {
    content: "\e904";
    margin-left: -1.4453125em;
    color: rgb(0, 0, 0);
}

.icod-odnos_tap_it_logo .path6:before {
    content: "\e905";
    margin-left: -1.4453125em;
    color: rgb(32, 32, 32);
}

.icod-odnos_tap_it_logo .path7:before {
    content: "\e906";
    margin-left: -1.4453125em;
    color: rgb(32, 32, 32);
}

.icod-odnos_tap_it_logo .path8:before {
    content: "\e907";
    margin-left: -1.4453125em;
    color: rgb(32, 32, 32);
}

.icod-odnos_tap_it_logo .path9:before {
    content: "\e908";
    margin-left: -1.4453125em;
    color: rgb(32, 32, 32);
}

.icod-odnos_tap_it_logo .path10:before {
    content: "\e909";
    margin-left: -1.4453125em;
    color: rgb(32, 32, 32);
}

.icod-odnos_tap_it_logo .path11:before {
    content: "\e90a";
    margin-left: -1.4453125em;
    color: rgb(72, 99, 235);
}

.icod-odnos_tap_it_logo .path12:before {
    content: "\e90b";
    margin-left: -1.4453125em;
    color: rgb(72, 99, 235);
}

/* Brand fonts */

/* Spacing */
.gap-1 {
    gap: 1rem;
}

/* Spacing */

/* Bg */
.bg-image-cover {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.bg-fixed {
    background-attachment: fixed;
}

.card.bg-overlay-white {
    box-shadow: 0 0 0 100px rgba(255, 255, 255, .6) inset, 0 0 2rem 0 rgb(136 152 170 / 15%) !important;
}

.card.bg-overlay-odnos {
    box-shadow: 0 0 0 100px rgb(80 5 185 / 19%) inset, 0 0 2rem 0 rgb(136 152 170 / 15%) !important;
}

/* Bg */

/* Button primary */
.btn-primary,
.btn-primary:visited {
    background-color: #015eab;
}

.bg-primary {
    background-color: #015eab;
}

/* Text */
.text-primary {
    color: var(--primary);
}

.text-hover-hidden {
    display: flex;
}

.text-hover-hidden .hidden {
    width: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    transition: ease-in .3s width, ease-in .3s opacity;
}

.text-hover-hidden:hover .hidden {
    width: auto;
    opacity: 1;
}

.flexed-button {
    gap: 4px;
}

.flexed-actions {
    gap: 6px;
}

.flexed-actions2 {
    gap: 10px;
}

/* Text */

/* Shadows */
.shadow-35 {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

/* Shadows */

/* Margins */
.mb-last-0:last-child,
.mb-last-0:only-child {
    margin-bottom: 0 !important;
}

/* Margins */

/* Width */
.w-fit {
    width: fit-content;
}

/* Width */

/* Empty */
.empty-msg:empty:after {
    content: attr(data-empty);
    text-align: center;
    width: 100%;
    display: block;
    color: #99abb4 !important;
    font-style: italic;
}

.empty-hide:empty {
    display: none;
}

/* Empty */

/* Borders */
.border-md-left {
    border-left: none !important;
}

.border-md-right {
    border-right: none !important;
}

.border-md-top {
    border-top: none !important;
}

.border-md-bottom {
    border-bottom: none !important;
}

.border-bottom-last-0:last-child,
.border-bottom-last-0:only-child {
    border-bottom: none !important;
}

@media only screen and (min-width: 768px) {
    .border-md-left {
        border-left: 1px solid #dee2e6 !important;
    }

    .border-md-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-md-top {
        border-top: 1px solid #dee2e6 !important;
    }

    .border-md-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }
}

/* Borders */

/* Border radius */
.rounded-0 {
    border-radius: 0px;
}

.rounded-3 {
    border-radius: 3px;
}

.rounded-5 {
    border-radius: 5px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-13 {
    border-radius: 13px;
}

.rounded-15 {
    border-radius: 15px;
}

.rounded-18 {
    border-radius: 18px;
}

.rounded-20 {
    border-radius: 20px;
}

.rounded-23 {
    border-radius: 23px;
}

.rounded-25 {
    border-radius: 25px;
}

.rounded-28 {
    border-radius: 28px;
}

.rounded-30 {
    border-radius: 30px;
}

.rounded-33 {
    border-radius: 33px;
}

.rounded-35 {
    border-radius: 35px;
}

.rounded-38 {
    border-radius: 38px;
}

.rounded-40 {
    border-radius: 40px;
}

.rounded-43 {
    border-radius: 43px;
}

.rounded-45 {
    border-radius: 45px;
}

.rounded-48 {
    border-radius: 48px;
}

.rounded-50 {
    border-radius: 50px;
}

/* Border radius */

/* IMAGES */
/* Max sizes */
.img-h-75 {
    height: 75px;
}

/* Square */
.img-sq-50 {
    height: 50px;
    width: 50px;
}

.img-sq-75 {
    height: 75px;
    width: 75px;
}

.img-sq-100 {
    height: 100x;
    width: 100px;
}

.img-cover {
    object-fit: cover;
}

.img-contain {
    object-fit: contain;
}

.img-fill {
    object-fit: fill;
}

/* IMAGES */

/* LISTS */
/* List-group */
.list-group {}

.list-group .list-group-item {
    transition: ease-in-out .3s all;
}

.list-group .list-group-item[data-toggle=antab] {
    cursor: pointer;
}

.list-group .list-group-item.active {
    color: #67757c;
}

/* List-group */
/* LISTS */

/* Product images */
#imagesContainer {}

#imagesContainer>label>div {
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #fff;
    transition: ease-in-out .3s all;
    cursor: grab;
}

#imagesContainer>label>div:hover {
    background: #ecf0f5;
    border-color: #ecf0f5;
}

#imagesContainer>label>div:active {
    cursor: grabbing;
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, .2), 0 -10px 60px -12px rgba(50, 50, 93, .1), 0 18px 36px -18px rgba(0, 0, 0, .2), 0 -12px 36px -8px rgba(0, 0, 0, .02);
    box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.35);
}

/* HEADER */
header .navbar-header {
    overflow: hidden;
}

/* HEADER */

/* PAGE */
.page-wrapper.page-wrapper-fullheight {
    padding-bottom: 0;
}

/* PAGE */

/* Dropzone */
.mdropzone {
    display: table;
    border: 2px dashed #b568ef;
    height: 90px;
    width: 100%;
    border-radius: 8px;
    background-color: #e8dcef;
    position: relative;
}

.mdropzone:after {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    content: "Da click o arrastra hasta aquí las imágenes";
    color: #b568ef;
}

.mdropzone button {
    display: block;
    border: 5px dashed #d7dee8;
    border-radius: 8px;
    background: #ecf0f5;
    width: 100%;
    padding: 35px;
    color: #bdcadb;
    font-size: 20px;
    transition: ease-in-out .3s all;
}

.mdropzone button.dragenter {
    border-color: #00a65a;
    background: #a7e1c7;
}

.mdropzone button.dragenter {
    color: #00a65a;
}

.mdropzone-list .media-upload-item,
.mdropzone .media-upload-item {
    display: block;
    padding: 8px;
    background: #f5f5f5;
    border: 1px solid #fefefe;
    margin-top: 5px;
    border-radius: 8px;
}

.mdropzone-list .media-upload-item>img,
.mdropzone .media-upload-item>img {}

.mdropzone-list .media-upload-item>.details,
.mdropzone .media-upload-item>.details {}

.mdropzone-list .media-upload-item>.details>span.name,
.mdropzone .media-upload-item>.details>span.name {}

.mdropzone-list .media-upload-item>.details>span.prog,
.mdropzone .media-upload-item>.details>span.prog {}

.mdropzone-list .media-upload-item>.details>.prog-bar,
.mdropzone .media-upload-item>.details>.prog-bar {
    display: block;
    height: 5px;
    width: 100%;
    background: #f5f5f5;
}

.mdropzone-list .media-upload-item>.details>.prog-bar>.prog-bar-inner,
.mdropzone .media-upload-item>.details>.prog-bar>.prog-bar-inner {
    display: block;
    height: 5px;
    width: 0%;
    background: #00c0ef;
}

.mdropzone .dz-preview {}

.mdropzone .dz-preview>.dz-image {}

.mdropzone .dz-preview>.dz-details {}

.mdropzone .dz-preview>.dz-details>.dz-size {}

.mdropzone .dz-preview>.dz-details>.dz-filename {}

.mdropzone .dz-preview>.dz-progress {}

.mdropzone .dz-preview>.dz-progress>.dz-upload {}

.mdropzone .dz-preview>.dz-error-message {
    display: none;
}

.mdropzone .dz-preview>.dz-success-mark {
    display: none;
}

.mdropzone .dz-preview>.dz-error-mark {
    display: none;
}

.mdropzone.dz-clickable {
    cursor: pointer;
}

/* MyToolTip */
.mytooltip,
.mytooltip1,
.mytooltip2,
.mytooltip3 {
    z-index: 10;
}

/* MyToolTip */

/* Calendar */
.calendar-activity-event {
    background: none;
    color: #67757c !important;
}

.fc .fc-toolbar {
    padding-top: 0 !important;
}

.dashboard .fc .fc-toolbar {
    display: block;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0 !important;
}

.calendar-activity-event {
    padding: 0 5px !important;
}

.gantt-container .popup-wrapper {
    background: none !important;
    box-shadow: 1px 1px 2px rgb(0 0 0, .1);
}

.gantt-container .popup-wrapper .bg-white {
    width: 250px !important;
}

.gantt-container .popup-wrapper .pointer {
    margin: 0 0 0 -3px !important;
    border-top-color: #fff !important;
}

.gantt .bar-progress {
    fill: rgb(76, 209, 55, 1) !important;
}

.gantt .bar-wrapper.active .bar-progress {
    fill: rgb(76, 209, 55, .8) !important;
}

/* Calendar */

/* Assistance */
.check {
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    transition: ease-in-out .3s all;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(3, 94, 171, 0);
}

.check:last-child {
    box-shadow: none;
    margin-bottom: 0px;
}

.check:active,
.check:focus,
.check:hover,
.check.checked {
    box-shadow: 0 3px 5px rgba(3, 94, 171, .28);
    margin-top: -2px;
    margin-bottom: 12px;
}

.check2:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

/* Order New */
.order-products-add {
    list-style: none;
    padding: 0;
    height: 300px;
    overflow: hidden;
    overflow-y: auto;
}

.order-products-add>li {
    margin: 0;
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    border-radius: .25rem;
    transition: ease-in-out .3s all;
}

.order-products-add>li:last-child {
    bordr-bottom: 0;
}

.order-products-add>li:hover {
    background: #f5f5f5;
}

.order-products-add>li p:first-child {
    font-size: 15px;
    margin-bottom: 5px;
    line-height: 100%;
}

.order-products-add>li p:last-child(2) {
    font-size: 13px;
    margin-bottom: 0px;
    line-height: 100%;
}

/* Order New */

.w-60 {
    width: 60%;
}

/* Positions */
.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

/* Positions */

/* NoMargin */
section.nomargin,
.card.nomargin,
.chat-app.nomargin {
    margin: 0 -30px -25px -30px;
}

/* NoMargin */

/* Fullheight */
section.fullheight,
.card.fullheight,
.chat-app.fullheight {
    height: calc(100vh - 66px);
}

/* Fullheight */

/* Customer Cart */
.customer-card {
    position: relative;
    border-color: #d7dfe3;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    background: #fff;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    transition: ease-in-out .3s all;
}

.customer-card:hover {
    -webkit-box-shadow: 0px 5px 20px #035eab57;
    box-shadow: 0px 5px 20px #035eab57;
}

.customer-card>.ribbon {
    font-size: 12px;
    top: 10px;
}

.customer-card>.ribbon-right {
    border-radius: 4px 0 0 4px;
}

.customer-card>h4 {
    color: #222;
    font-size: 15px;
    font-weight: bold;
}

.customer-card>h5 {
    color: #222;
    font-size: 14px;
    font-weight: normal;
}

.customer-card>p.act {
    font-size: 12px;
    margin-bottom: 0px;
}

.customer-card .btn-txt {
    display: inline-block;
    padding: 7px 12px;
    font-size: 14px;
    vertical-align: middle;
    line-height: 28px;
}

.customer-card .btn {
    font-size: 18px;
}

/* Customer Cart */

/* Funnel */
.funnel {
    overflow-x: auto;
}

.funnel .header {}

.funnel .header>.head {
    position: relative;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    display: table-cell;
    height: 44px;
    padding: 5px 10px;
    padding-left: 25px;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #d7dfe2;
    border-left: none;
}

.funnel .header>.head::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #ffffff;
    border-width: 22px 0 22px 20px;
    top: 50%;
    right: -20px;
    margin-top: -22px;
}

.funnel .header>.head::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #d7dfe2;
    border-width: 22px 0 22px 20px;
    top: 50%;
    right: -22px;
    margin-top: -22px;
}

.funnel .header>.head:first-child {
    border-radius: 8px 0 0 8px;
    border: 1px solid #d7dfe2;
}

.funnel .header>.head:last-child {
    border-radius: 0 8px 8px 0;
}

.funnel .header>.head:last-child::after,
.funnel .header>.head:last-child::before {
    border: none;
}

.funnel .header>.head>.circle-status {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.funnel .header>.head>.name {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    line-height: 20px;
}

.funnel>.funnel-col {
    display: table-cell;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    vertical-align: top;
    padding: 10px 0;
    padding-right: 10px;
}

.funnel>.funnel-col:last-child {
    padding-right: 0;
}

.funnel .funnel-container {
    min-height: 200px;
}

.funnel>.funnel-col .customer-card {
    cursor: pointer;
}

.funnel>.funnel-col .customer-card:active {
    cursor: move;
}

.funnel>.funnel-col .customer-card.ghost {
    background-color: #f6f6f6;
    opacity: .5;
}

/* Funnel */

/* Funnel Edit */
#modalStatusEditor .status-preview {
    min-height: 35px;
    border-radius: 8px;
    background-color: #f6f6f6;
}

#modalStatusEditor .status-preview>span {
    font-size: 18px;
    padding: 5px 10px;
    display: block;
}

.status-list {
    position: relative;
    list-style: none;
    margin: 10px 0;
    padding: 0;
}

.status-list.empty:empty:after {
    content: '<li>' + attr(data-empty) + '</li>';
    text-align: center;
    width: 100%;
    display: block;
    color: #99abb4 !important;
    font-style: italic;
}

.status-list>li {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #d7dfe3;
    border-bottom: none;
    background: #fff;
}

.status-list>li:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.status-list>li:last-child {
    border-bottom: 1px solid #d7dfe3;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.status-list>li.ghost {
    background: #f6f6f6;
    opacity: .6;
}

.status-list>li span:not(.select2):not(.selection):not(.select2-selection):not(.dropdown-wrapper):not(.select2-selection__rendered):not(.select2-selection__placeholder) {
    display: inline-block;
    vertical-align: middle;
    padding: 7px 12px;
}

.status-list>li span:not(.select2)>span:not(.selection):not(.select2-selection):not(.dropdown-wrapper):not(.select2-selection__rendered):not(.select2-selection__placeholder) {
    padding: 0 10px;
    font-size: .9rem;
}

.status-list>li span.selection {
    height: 30px;
}

.status-list>li .circle-status {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 0;
}

.status-list:empty:after {
    content: attr(data-empty);
    padding: 1rem;
    text-align: center;
    width: 100%;
    display: block;
    color: #99abb4 !important;
    font-style: italic;
}

/* Funnel Edit */

/* Activity Cart */
.activity-card {
    position: relative;
    border-color: #d7dfe3;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    background: #fff;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    transition: ease-in-out .3s all;
}

.activity-card:hover {
    -webkit-box-shadow: 0px 5px 20px #035eab57;
    box-shadow: 0px 5px 20px #035eab57;
}

.activity-card>.ribbon {
    font-size: 12px;
    top: 10px;
}

.activity-card>.ribbon-right {
    border-radius: 4px 0 0 4px;
}

.activity-card>h4 {
    color: #222;
    font-size: 15px;
    font-weight: bold;
}

.activity-card>h5 {
    color: #222;
    font-size: 14px;
    font-weight: normal;
}

/* Activity Cart */

/* Tabs */
.vtabs {
    width: 100%;
    display: flex;
}

.vtabs .tab-content {
    width: calc(100% - 150px);
}

@media only screen and (max-width: 992px) {
    .vtabs {
        width: 100%;
        display: block;
    }

    .vtabs .tabs-vertical {
        width: auto;
        border-right: 0px;
        border-bottom: 1px solid rgba(120, 130, 140, 0.13);
        display: block;
        vertical-align: bottom;
    }

    .vtabs .tabs-vertical .nav-item {
        display: inline-block;
    }

    .vtabs .tabs-vertical .nav-link {
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
        margin-right: 10px;
    }

    .vtabs .tab-content {
        width: calc(100% - 0px);
    }
}

.clearfix {
    clear: both;
}

/* Tabs */

/* Comments */
.comment-text .text-container {
    max-height: none;
    font-size: .9rem;
}

.comment-footer .pull-right {
    font-size: .8rem;
}

.comment-media {
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #f6f6f6;
    display: inline-block;
}

.comment-media img {
    width: auto;
    height: 250px;
    max-width: 100%;
    max-height: 250px;
}

/* Comments */

/* Tables */
.table {
    font-size: 0.90rem;
}

/* Tables */

/* Hover */
.hover-buttons {}

.hover-buttons .btn {
    opacity: 0;
    transition: ease-in-out .3s all;
}

.hover-buttons:hover .btn {
    opacity: 1;
}

@media only screen and (max-width: 790px) {
    .hover-buttons .btn {
        opacity: 1;
    }
}

/* Hover */

/* ToDo */
.todo {
    position: relative;
}

.todo .progress {}

.todo .list {}

.todo .counter {
    font-size: .8rem;
}

/* Group */
.todo .list .todo-group {
    counter-reset: todoListItems;
    margin-bottom: 1rem;
    border-radius: .5rem;
}

.todo .list .todo-group .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: .4rem;
}

.todo .list .todo-group .title h3 {
    font-size: 1rem;
    margin-bottom: 0;
    border-bottom: 2px solid transparent;
}

.todo .list .todo-group .title h3:empty {
    display: none;
}

.todo .list .todo-group:last-child {
    margin-bottom: 0;
}

.todo .list .todo-group:hover .title h3 {
    /*background-color: #fbfbfb;*/
    border-color: var(--primary);
}

.todo .list .todo-group>.title>.action {
    margin-left: 8px;
    display: none;
    opacity: 0;
    transition: ease-in .3s opacity;
}

.todo .list .todo-group>.title>.action .hidden {
    font-size: 80%;
}

.todo .list .todo-group>.title:hover>.action {
    display: flex;
    opacity: 1;
}

/* Group */

/* Item */
.todo .list .todo-item {
    position: relative;
    counter-increment: todoListItems;
    display: flex;
    border-radius: .5rem;
    margin-bottom: 0px;
    padding: 5px 8px 0px 8px;
    transition: ease-in-out .5s all;
    font-size: .9rem;
}

.todo .list .todo-item:hover {
    background: #f5f5f5;
}

.todo .list .add:before,
.todo .list .todo-item:before {
    content: counter(todoListItems) ".";
    width: 22px;
    margin-right: 3px;
}

.todo .list .todo-item:hover:before {
    color: var(--primary);
}

.todo .list .todo-item label {
    display: flex;
    flex-direction: row;
    align-items: flext-start;
    flex: 1;
    height: auto;
    font-size: .9rem;
}

.todo.hide-completed .list .todo-item:has(input[type=checkbox]:checked) {
    display: none;
}

/* Item */

/* Comment */
.todo .list .todo-item .comments {
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo .list .todo-item .comments>a,
.todo .list .todo-item .comments>a:visited {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #777;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    transition: ease .3s all;
}

.todo .list .todo-item .comments>a[data-total]:before {
    content: "\F36A";
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: .9rem;
    color: #777;
    transition: ease .3s all;
}

.todo .list .todo-item .comments>a[data-total='0']:before {
    content: "\F10BB";
}

.todo .list .todo-item .comments>a[data-total]:after {
    content: attr(data-total);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: .65rem;
    border-radius: 50%;
    top: 0;
    right: 0;
    line-height: .65rem;
    height: .8rem;
    width: .8rem;
    transition: ease .3s all;
}

.todo .list .todo-item .comments>a[data-total='0']:after {
    display: none;
}

.todo .list .todo-item .comments>a:hover {
    color: #fff;
    background-color: var(--primary);
}

.todo .list .todo-item .comments>a:hover:before {
    color: #fff;
}

.todo .list .todo-item .comments>a:hover:after {
    color: var(--primary);
    background: #fff;
}

#vComments:empty+.row {
    display: none;
}

/* Comment */

/* Add */
.todo .list .add {
    position: relative;
    counter-increment: todoListItems;
    padding: 5px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo .list .add>form {
    display: flex;
    flex: 1;
}

/* Add */

/* Empty */
.todo .list .empty {
    border-radius: .5rem;
    border-color: #99abb4;
    color: #99abb4;
    display: none;
}

.todo .list .todo-group>.todo-group-items>.empty:first-child {
    display: block;
}

/* Empty */

/* Task */
.todo .list .todo-item .task {}

/* Task */

/* Action */
.todo .list .todo-item .action {
    display: none;
    justify-content: flex-end;
}

.todo .list .todo-item:hover .action {
    display: flex;
}

.todo .list .todo-item .action a,
.todo .list .todo-item .action a:visited {
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo .list .todo-item .action .hidden {
    font-size: 80%;
}

/* Action */

/* Members */
.todo .list .todo-item .members {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 10px;
}

.todo .list .todo-item .members .member {
    position: relative;
    margin-left: -8px;
    transition: ease-in-out .3s all;
}

.todo .list .todo-item .members .member:first-child,
.todo .list .todo-item .members:hover .member {
    margin-left: 0;
}

.todo .list .todo-item .members .member>img,
.todo .list .todo-item .members .member>span {
    height: 25px;
    width: 25px;
    border-radius: 50%;
}

.todo .list .todo-item .members .member>a,
.todo .list .todo-item .members .member>a:visited {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: var(--primary-transparent);
    opacity: 0;
    display: none;
    transition: ease-in .3s all;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    line-height: 17px;
    transition: ease .3s all;
}

.todo .list .todo-item .members .member:hover>a {
    opacity: 1;
    display: flex;
}

.todo .list .todo-item .members>a,
.todo .list .todo-item .members>a:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #777;
    height: 25px;
    width: 25px;
    border-radius: 50%;
}

.todo .list .todo-item .members>a:hover,
.todo .list .todo-item .members>a:focus,
.todo .list .todo-item .members>a:active {
    color: #fff;
    background-color: var(--primary);
}

/* Members */

#vTodoMembers {
    position: absolute;
    width: 200px;
    flex-direction: column;
    background: #fff;
    padding: .5rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    z-index: 99;
    border-radius: .5rem;
    opacity: 0;
    display: none;
    transition: ease-in-out .3s opacity;
}

#vTodoMembers.shown {
    opacity: 1;
    display: flex;
}

#vTodoMembers>a,
#vTodoMembers>a:visited {
    position: relative;
    display: flex;
    padding: .25rem .35rem;
    font-size: .9rem;
    flex-direction: row;
    align-items: center;
    border-radius: .33rem;
    transition: ease-in-out .3s all;
}

#vTodoMembers>a>img {
    margin-right: .2rem;
}

#vTodoMembers>a:hover {
    background-color: var(--primary);
    color: #fff !important;
}

/* ToDo */

/* USER MEMBERS */
.user-members {}

.user-members>.user-member {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: .25rem;
    padding: .25rem;
}

.user-members>.user-member:first-child {
    margin-top: 0;
}

.user-members>.user-member>a {
    display: flex;
    align-items: center;
}

.user-members>.user-member>a>.img {
    margin-right: 5px;
}

.user-members>.user-member>a>.info {
    flex: 1;
    font-size: .95rem;
    line-height: .95rem;
}

.user-members>.user-member>a>.info>span {
    display: block;
}

.user-members>.user-member>a>.info>small {
    display: block;
}

.user-members>.user-member>.action {}

.user-members>p {
    margin-bottom: 0;
    display: none;
}

.user-members>p:first-child {
    display: block;
}

/* USER MEMBERS */

/* Fullscreen */
.fullscreen,
.fullscreenWysi {
    position: relative;
    transition: ease-in-out .3s all;
}

.fullscreen .CodeMirror {
    transition: ease-in-out .3s all;
}

.fullscreen.active,
.fullscreenWysi.active {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    margin-bottom: 0;
    overflow: auto !important;
}

.fullscreen.active .CodeMirror {
    height: 100%;
}

.fullscreen .btn-group {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 101;
    opacity: .5;
    transition: ease-in-out .3s all;
}

.fullscreen .btn-group:hover {
    opacity: 1;
}

.fullscreen .btnToggleFullscreen i:after,
.fullscreenWysi .btnToggleFullscreen i:after {
    font-family: "Font Awesome 5 Free";
    content: "\f065";
}

.fullscreen.active .btnToggleFullscreen i:after,
.fullscreenWysi.active .btnToggleFullscreen i:after {
    font-family: "Font Awesome 5 Free";
    content: "\f066";
}

/* Fullscreen */

/* Btn placeholder */
.btn-placeholder {
    color: #b9b9b9;
    border: 2px dashed #b9b9b9;
}

.btn-muted {
    opacity: 0.4;
}

/* Btn placeholder */

/* Slider */
.site-slider {}

.site-slider>.item {
    border-radius: 15px;
    border: 1px solid #dee2e5;
    padding: 10px;
    margin-bottom: 10px;
}

.site-slider>.item .item-img {
    cursor: pointer;
}

/* Slider */

/* Product categories */
.product-category {
    clear: both;
    border: 1px solid #f5f5f5;
    padding: 5px 10px;
    margin-bottom: 5px;
    transition: ease-in-out .3s all;
}

.product-category:hover {
    border-color: #ddd;
}

/* Product categories */

/* Input */

/* Input */

/* Input Ajax */
.input-ajax {}

.input-ajax>.input-field {}

.input-ajax>img {
    max-width: 100%;
    min-height: 20px;
    cursor: pointer;
}

.input-ajax>.input-field-loader {
    display: inline-block;
    font-size: 16px;
    margin: 2px 5px;
    vertical-align: middle;
}

/* Input Ajax */

/* Input Stars */
.input-stars {
    display: flex;
}

.input-stars>span {
    font-size: 25px;
    line-height: 25px;
    color: #ddd;
    cursor: pointer;
    transition: ease-in-out .1s all;
}

.input-stars-md>span {
    font-size: 32px;
    line-height: 32px;
}

.input-stars-lg>span {
    font-size: 40px;
    line-height: 40px;
}

.input-stars>span>i {
    font-size: 100%;
    line-height: 100%;
}

.input-stars:has(> span:nth-of-type(1).active)>span:nth-of-type(n+0):nth-of-type(-n+1),
.input-stars:has(> span:nth-of-type(2).active)>span:nth-of-type(n+0):nth-of-type(-n+2),
.input-stars:has(> span:nth-of-type(3).active)>span:nth-of-type(n+0):nth-of-type(-n+3),
.input-stars:has(> span:nth-of-type(4).active)>span:nth-of-type(n+0):nth-of-type(-n+4),
.input-stars:has(> span:nth-of-type(5).active)>span:nth-of-type(n+0):nth-of-type(-n+5),
.input-stars:has(> span:nth-of-type(1):hover)>span:nth-of-type(n+0):nth-of-type(-n+1),
.input-stars:has(> span:nth-of-type(2):hover)>span:nth-of-type(n+0):nth-of-type(-n+2),
.input-stars:has(> span:nth-of-type(3):hover)>span:nth-of-type(n+0):nth-of-type(-n+3),
.input-stars:has(> span:nth-of-type(4):hover)>span:nth-of-type(n+0):nth-of-type(-n+4),
.input-stars:has(> span:nth-of-type(5):hover)>span:nth-of-type(n+0):nth-of-type(-n+5) {
    color: #f1c40f;
}

.text-star {
    color: #f1c40f;
}

/* Input Stars */

/* btnToggleOnOf */
.btnToggleOnOf {
    opacity: .5;
}

.btnToggleOnOf.active {
    opacity: 1;
}

/* btnToggleOnOf */

/* Pagination */
.pagination {
    flex-flow: row wrap;
}

/* Pagination */

/* cPanel */
.text-cpanel {
    color: #ff6c2c;
}

.bg-cpanel {
    background: #ff6c2c;
}

.btn-cpanel {
    background: #ff6c2c;
    border-color: #ff6c2c;
    color: #fff;
}

/* cPanel */

/* Paola Flow */
.paola-flow-list {
    margin: 0;
    padding: 0;
}

.paola-flow-list>li {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #d7dfe3;
    border-bottom: none;
    background: #fff;
    list-style: none;
}

.paola-flow-list>li:last-child {
    border-bottom: 1px solid #d7dfe3;
    margin-bottom: 10px;
}

.paola-flow-list>li>.head {
    cursor: pointer;
}

.paola-flow-list>li>.head .vFlow-title {
    display: inline-block;
    position: relative;
}

.paola-flow-list>li>.head .vFlow-title::before {
    content: "\f0c9";
    font-family: 'Font Awesome 5 Free';
}

.paola-flow-list>li>.body {
    display: none;
}

/* Paola Flow */

/* Steps */
.steps .step-progress-bar {
    margin: 0 auto;
    display: block;
}

.steps .step-progress-bar ul.step-bar {
    counter-reset: step;
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.steps .step-progress-bar li {
    list-style-type: none;
    color: #c8d6e5;
    position: relative;
    text-align: center;
    font-weight: 400;
    flex: 1;
    transition: ease-in-out .3s all;
}

.steps .step-progress-bar li[data-target] {
    cursor: pointer;
}

.steps .step-progress-bar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    border: 2px solid #c8d6e5;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 30px;
    margin: 0 auto 10px auto;
    z-index: 9;
    background-color: white;
    font-weight: 600;
    position: relative;
    transition: ease-in-out .3s all;
}

.steps .step-progress-bar li:after {
    content: "";
    width: 100%;
    position: absolute;
    height: 2px;
    background-color: #c8d6e5;
    top: 16px;
    left: 50%;
    z-index: 0;
    transition: ease-in-out .3s all;
}

.steps .step-progress-bar li:last-child:after {
    content: none;
}

.steps .step-progress-bar li.completed,
.steps .step-progress-bar li.active {
    color: var(--primary);
}

.steps .step-progress-bar li.completed:before,
.steps .step-progress-bar li.active:before {
    border-color: var(--primary);
}

.steps .step-progress-bar li.completed:after {
    background-color: var(--primary);
}

.steps .step {
    display: none;
    opacity: 0;
    transition: ease-in-out .3s all;
}

.steps .step.active,
.steps.debug .step {
    display: block;
    opacity: 1;
}

/* Steps */

/* Circle progress */
@keyframes growProgressBar {

    0%,
    33% {
        --pgPercentage: 0;
    }

    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

div[role="circleprogressbar"] {
    --size: 12rem;
    --fg: var(--primary);
    --bg: transparent;
    /*#def;*/
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}

div[role="circleprogressbar"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
    font-size: 145%;
    line-height: 145%;
}

/* Circle progress */

/* Table */
.table-borderless>tbody>tr>td,
.table-borderless>tbody>tr>th,
.table-borderless>tfoot>tr>td,
.table-borderless>tfoot>tr>th,
.table-borderless>thead>tr>td,
.table-borderless>thead>tr>th {
    border: none;
}

/* Table */

/* PM CARDS */
.pm-check {}

.pm-check>input+label::before,
.pm-check>input+label::after {
    display: none;
}

.pm-cards {}

.pm-card,
.pm-check>input+label {
    position: relative;
    border-radius: .75rem;
    width: 100% !important;
    height: 150px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    padding: 10px !important;
    margin-bottom: .8rem;
    border: 0px solid transparent;
    overflow: hidden;
}

.pm-check>input+label {
    filter: grayscale(1);
    opacity: .4;
}

.pm-check>input+label:hover,
.pm-check>input:checked+label {
    position: relative;
    border-color: var(--green);
    filter: grayscale(0);
    opacity: 1;
}

.pm-check>input:checked+label::after {
    position: absolute;
    display: flex;
    top: 0;
    left: auto;
    padding: 1.25rem 1.2rem;
    content: "\F012C";
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 1.5rem;
    color: #fff;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    right: 0;
}

.pm-card>.info {
    font-size: .9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pm-card>.info>.number {
    width: 100%;
    font-size: .9rem;
    margin-bottom: 5px;
    font-weight: 500;
}

.pm-card>.info>.name {
    font-size: .8rem;
}

.pm-card>.info>.date {
    font-size: .8rem;
}

.pm-card>.utilities {
    display: block;
}

.pm-card .icon {
    height: 30px;
    width: auto;
}

.pm-card>.actions {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    background: rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: ease-in-out .3s all;
}

.pm-card:hover>.actions {
    opacity: 1;
}

.pm-card.paypal {
    background: linear-gradient(135deg, rgb(87, 84, 99) 0%, rgb(27, 61, 146) 100%);
}

.pm-card.mastercard {
    background: #f12711;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f5af19, #f12711);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f5af19, #f12711);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.pm-card.visa {
    background: #0f0c29;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.pm-card.american_express {
    background: #396afc;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2948ff, #396afc);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2948ff, #396afc);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* PM CARDS */

/* CHAT */
.chat {
    display: flex;
    height: 100%;
    background-color: #F9F9FA;
    flex-direction: row;
}

/* Aside */
.chat>.chat-aside {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 285px;
}

.chat>.chat-aside>.search {
    padding: .9rem;
}

.chat>.chat-aside>.search>.input-wicon {
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .3rem 1rem;
}

.chat>.chat-aside>.search>.input-wicon>i {
    font-size: 1.3rem;
    margin-right: .8rem;
    line-height: 1.3rem;
}

.chat>.chat-aside>.search>.input-wicon>input {
    border: none;
    background: transparent;
    font-size: 1rem;
}

.chat>.chat-aside>ul.conversations {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

.chat>.chat-aside>ul.conversations>li {
    border-top: 1px solid #fff;
    padding: .8rem .8rem;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    transition: ease-in-out .3s all;
}

.chat>.chat-aside>ul.conversations>li:last-child {
    border-bottom: none;
}

.chat>.chat-aside>ul.conversations>li:hover {
    background: #e0e0e0;
}

.chat>.chat-aside>ul.conversations>li.opened {
    background: #efefef;
}

.chat>.chat-aside>ul.conversations>li>.img {
    --icon-size: 13px;
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e3e3e3;
    background-size: cover;
    background-position: center;
    margin-right: .8rem;
}

.chat>.chat-aside>ul.conversations>li>.img>.channel {
    position: absolute;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 2px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.chat>.chat-aside>ul.conversations>li>.img>.channel>i,
.chat>.chat-aside>ul.conversations>li>.img>.channel>img {
    height: var(--icon-size);
    width: var(--icon-size);
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    object-fit: contain;
}

.chat>.chat-aside>ul.conversations>li>.info {
    flex: 1;
}

.chat>.chat-aside>ul.conversations>li>.info>.irow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.chat>.chat-aside>ul.conversations>li>.info .name {
    font-size: .9rem;
    font-weight: 400;
}

.chat>.chat-aside>ul.conversations>li>.info .time {
    font-size: .78rem;
    align-self: center;
}

.chat>.chat-aside>ul.conversations>li.new>.info .time {
    color: var(--primary);
    font-weight: 400;
}

.chat>.chat-aside>ul.conversations>li>.info .message {
    font-size: .78rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.chat>.chat-aside>ul.conversations>li>.info .icon {
    font-size: .78rem;
    line-height: .78rem;
    align-self: center;
}

.chat>.chat-aside>ul.conversations>li.new>.info .icon {
    background-color: var(--primary);
    color: #fff;
    border-radius: 50%;
    padding: 0.25rem 0.2rem;
    line-height: .78rem;
    width: 21px;
    height: 21px;
    text-align: center;
    display: inline-block;
}

/* Aside */

/* Content */
.chat>.chat-content {
    flex-grow: 1;
    height: 100%;
    flex-direction: row;
    align-items: strech;
    position: relative;
    display: none;
    opacity: 0;
    transition: ease-in-out .3s all;
}

.chat>.chat-content.show {
    display: flex;
    opacity: 1;
}

.chat>.chat-closed {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 1rem;
    background-color: #fff;
}

.chat:has(.chat-content.show)>.chat-closed {
    display: none;
}

.chat>.chat-closed>div {
    text-align: center;
}

.chat>.chat-closed>div>img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin-bottom: 28px;
}

.chat>.chat-closed>div>h2 {
    font-size: 1.1rem;
    line-height: 1.1rem;
    margin-bottom: 5px;
}

.chat>.chat-closed>div>p {
    font-size: 0.88rem;
}

.chat>.chat-content>.conversation {
    position: relative;
    display: flex;
    flex: 2;
    flex-direction: column;
    background-color: #fff;
    padding: .9rem;
}

.chat>.chat-content>.conversation>.cheader {
    display: flex;
    flex-direction: row;
    padding-bottom: .9rem;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.chat>.chat-content>.conversation>.cheader>.user {
    flex: 1;
    display: flex;
}

.chat>.chat-content>.conversation>.cheader>.user>.img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    margin-right: .8rem;
    background-color: #ededed;
}

.chat>.chat-content>.conversation>.cheader>.user>.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chat>.chat-content>.conversation>.cheader>.user>.info>.name {
    font-size: 1rem;
    display: block;
    font-weight: 500;
}

.chat>.chat-content>.conversation>.cheader>.user>.info>.descrip {
    font-size: .8rem;
    display: none;
}

.chat>.chat-content>.conversation>.cheader>.user>.info>.descrip.show {
    display: block;
}

.chat>.chat-content>.conversation>.cheader>.actions {
    font-size: 1.4rem;
}

.chat>.chat-content>.conversation>.cbody {
    flex: 1;
    overflow-x: auto;
    list-style: none;
    margin: 0;
    padding: .9rem 0;
}

.chat>.chat-content>.conversation>.cbody>li {
    display: block;
}

.chat>.chat-content>.conversation>.cbody>li.message {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    padding-right: 20%;
    margin-top: 0.9rem;
    margin-bottom: 0.9rem;
}

.chat>.chat-content>.conversation>.cbody>li.message.me {
    flex-direction: row-reverse;
    padding-left: 20%;
    padding-right: 0%;
}

.chat>.chat-content>.conversation>.cbody>li.message>.avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f5f5f5;
    font-size: 27px;
    border: 2px solid var(--participant-color);
}

.chat>.chat-content>.conversation>.cbody>li.message.me>.avatar {
    display: none;
}

.chat>.chat-content>.conversation>.cbody>li.message>.avatar>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat>.chat-content>.conversation>.cbody>li.message>.content {}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble {
    background-color: var(--primary);
    color: var(--primary-contrast);
    border-radius: 0px 15px 15px 15px;
    padding: 15px;
    font-size: 0.85rem;
    list-style: 0.85rem;
}

.chat>.chat-content>.conversation>.cbody>li.message.me>.content>.bubble {
    background-color: #ebebeb;
    color: #5d5d5d;
    border-radius: 15px 0px 15px 15px;
}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble:not(:first-child) {
    margin-top: 5px;
    border-radius: 15px 15px 15px 15px;
}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble>div>a {
    background-color: var(--primary-contrast);
    color: var(--primary);
}

.chat>.chat-content>.conversation>.cbody>li.message.me>.content>.bubble>div>a {
    color: var(--primary-contrast);
    background-color: var(--primary);
}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble>.date {
    display: flex;
    gap: 3px;
    font-size: 0.7rem;
    margin-top: 5px;
}

.chat>.chat-content>.conversation>.cbody>li.message.me>.content>.bubble>.date {
    justify-content: flex-end;
}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble>.date>span {}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble>.date>i {}

.chat>.chat-content>.conversation>.cbody>li.message>.content>.bubble img {
    cursor: pointer;
}

.chat>.chat-content>.conversation>.cbody>li.message.alert {
    justify-content: center;
    padding-left: 20%;
    padding-right: 20%;
}

.chat>.chat-content>.conversation>.cbody>li.message.alert>.dialog {
    border-radius: 5px;
    padding: 5px 12px;
    background-color: #f0f3f4;
    color: #afb0b6;
    font-size: .75rem;
}

.chat>.chat-content>.conversation>.cbody>li.message.date {
    --color: #c3c3c3;
    display: block;
    position: relative;
    text-align: center;
    font-size: 0.73rem;
    margin-top: 25px;
    margin-bottom: 25px;
    color: var(--color);
    padding-right: 0;
}

.chat>.chat-content>.conversation>.cbody>li.message.date:after {
    position: absolute;
    content: "";
    background-color: #ededed;
    width: 100%;
    height: 1px;
    left: 0;
    z-index: 0;
    top: calc(50% - 0.5px);
}

.chat>.chat-content>.conversation>.cbody>li.message.date>span {
    background-color: #fff;
    display: inline-block;
    padding: 0px 10px;
    position: relative;
    z-index: 1;
}

.chat>.chat-content>.conversation>.cfooter {
    position: relative;
    border-top: 1px solid #ededed;
    padding-top: .9rem;
}

.chat>.chat-content>.conversation>.cfooter>div {
    position: relative;
    display: flex;
    align-items: center;
}

.chat>.chat-content>.conversation>.cfooter>div>.input {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 30px 0 0 30px;
    padding: .3rem .5rem;
    padding-right: calc(20px + .5rem);
    position: relative;
    z-index: 1;
}

.chat>.chat-content>.conversation>.cfooter>div>.input>a,
.chat>.chat-content>.conversation>.cfooter>div>.input>a:visited {
    margin: 0 .2rem;
}

.chat>.chat-content>.conversation>.cfooter>div>.input>a>i {
    font-size: 1.2rem;
    line-height: 1.2rem;
}

.chat>.chat-content>.conversation>.cfooter>div>.input>textarea {
    flex: 1;
    border: none;
    background: transparent;
    font-size: .9rem;
    height: 1.6rem;
    padding: .1rem .2rem;
    max-height: 25vh;
}

.chat>.chat-content>.conversation>.cfooter>div>button.btnSend {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-left: -20px;
    font-size: 1.2rem;
    position: relative;
    z-index: 2;
}

.chat>.chat-content>.conversation>.cfooter>div>button.btnSend>i {
    margin-left: 4px;
}

.chat>.chat-content>.conversation>.cfooter .popup-helper {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #fff;
    bottom: 0;
    opacity: 0;
    max-height: 40vh;
    overflow-y: auto;
    box-shadow: rgb(0 0 0 / 5%) 0px 1px 2px 0px;
    z-index: 10;
    border-radius: 10px;
    padding: .6rem;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    transition: ease-in-out .3s all;
}

.chat>.chat-content>.conversation>.cfooter .popup-helper.opened {
    display: block;
    bottom: 100%;
    opacity: 1;
}

.chat>.chat-content>.conversation>.cfooter .popup-helper>a,
.chat>.chat-content>.conversation>.cfooter .popup-helper>a:visited {
    font-size: .9rem;
}

.chat>.chat-content>.conversation>.cfooter .popup-helper>a:hover {
    background-color: #f9f9f9;
    border-radius: 3px;
}

.chat>.chat-content>.profile {
    flex: 1;
}

/* Content */

/* Loader */
.chat>.chat-content>.conversation>.loader {
    --loader-size: 60px;
    position: absolute;
    top: calc(var(--loader-size) * -1);
    left: calc(50% - (var(--loader-size) / 2));
    width: var(--loader-size);
    height: var(--loader-size);
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 15px;
    border-radius: 50%;
    z-index: 10;
    opacity: 0;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: ease-in-out .3s all;
}

.chat>.chat-content>.conversation>.loader.show {
    top: 75px;
    display: flex;
    opacity: 1;
}

.chat>.chat-content>.conversation>.loader>.loader-icon {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    animation: chatLoaderAnimationv2 2s infinite;
}

@keyframes chatLoaderAnimationv2 {
    0% {
        box-shadow:
            0 -16px var(--primary), calc(10px*0.707) calc(-10px*0.707) var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken),
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken)
    }

    12.5% {
        box-shadow:
            0 0 var(--primary), calc(10px*0.707) calc(-10px*0.707) var(--primary-darken), 16px 0 var(--primary), 0 0 var(--primary-darken),
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken)
    }

    25% {
        box-shadow:
            0 0 var(--primary), 0 0 var(--primary-darken), 16px 0 var(--primary), calc(10px*0.707) calc(10px*0.707) var(--primary-darken),
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken)
    }

    37.5% {
        box-shadow:
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), calc(10px*0.707) calc(10px*0.707) var(--primary-darken),
            0 16px var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken)
    }

    50% {
        box-shadow:
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken),
            0 16px var(--primary), calc(-10px*0.707) calc(10px*0.707) var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken)
    }

    62.5% {
        box-shadow:
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken),
            0 0 var(--primary), calc(-10px*0.707) calc(10px*0.707) var(--primary-darken), -16px 0 var(--primary), 0 0 var(--primary-darken)
    }

    75% {
        box-shadow:
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken),
            0 0 var(--primary), 0 0 var(--primary-darken), -16px 0 var(--primary), calc(-10px*0.707) calc(-10px*0.707) var(--primary-darken)
    }

    87.5% {
        box-shadow:
            0 -16px var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken),
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), calc(-10px*0.707) calc(-10px*0.707) var(--primary-darken)
    }

    100% {
        box-shadow:
            0 -16px var(--primary), calc(10px*0.707) calc(-10px*0.707) var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken),
            0 0 var(--primary), 0 0 var(--primary-darken), 0 0 var(--primary), 0 0 var(--primary-darken)
    }
}

/* Loader */

/* Profile */
.chat>.chat-content>.profile {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-left: 1px solid #ededed;
}

.chat>.chat-content>.profile>.pheader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.3rem;
}

.chat>.chat-content>.profile>.pheader>img {
    background-color: #ededed;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.chat>.chat-content>.profile>.pheader>h4 {
    font-size: 1.15rem;
    margin-bottom: 0;
}

.chat>.chat-content>.profile>.pheader>p {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
}

.chat>.chat-content>.profile>.pheader>p>.icon>img {
    height: 0.9rem;
}

.chat>.chat-content>.profile>.pbody {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem;
    gap: 0.9rem;
}

.chat>.chat-content>.profile>.pbody>.members {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat>.chat-content>.profile>.pbody>.members>li.title {
    font-size: 0.75rem;
    line-height: 0.75rem;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: space-between;
}

.chat>.chat-content>.profile>.pbody>.members>li.title a {
    float: right;
    font-size: 0.75rem;
    line-height: 0.75rem;
}

.chat>.chat-content>.profile>.pbody>.members>li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.chat>.chat-content>.profile>.pbody>.members>li>.img {
    --icon-size: 13px;
    position: relative;
    display: flex;
    align-items: center;
}

.chat>.chat-content>.profile>.pbody>.members>li>.img>img {
    background-color: #ededed;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    z-index: 0;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--participant-color);
}

.chat>.chat-content>.profile>.pbody>.members>li>.img>.crown {
    position: absolute;
    z-index: 1;
    left: 0px;
    top: -8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-15deg);
}

.chat>.chat-content>.profile>.pbody>.members>li>.img>.crown>i {
    --icon-size: 17px;
    color: #f1c40f;
    height: var(--icon-size);
    width: var(--icon-size);
    font-size: var(--icon-size);
    line-height: var(--icon-size);
}

.chat>.chat-content>.profile>.pbody>.members>li>.img>.type {
    position: absolute;
    z-index: 1;
    right: 0px;
    bottom: 0px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 1px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.chat>.chat-content>.profile>.pbody>.members>li>.img>.type>i,
.chat>.chat-content>.profile>.pbody>.members>li>.img>.type>img {
    height: var(--icon-size);
    width: var(--icon-size);
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    object-fit: contain;
}

.chat>.chat-content>.profile>.pbody>.members>li>.info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.chat>.chat-content>.profile>.pbody>.members>li>.info>span {
    font-size: 0.9rem;
    line-height: 0.9rem;
}

.chat>.chat-content>.profile>.pbody>.members>li>.info>small {
    font-size: 0.6rem;
    line-height: 0.6rem;
}

.chat>.chat-content>.profile>.pbody>.members>li>.actions {
    display: flex;
    gap: 2px;
}

.chat>.chat-content>.profile>.pbody>.members>li>.actions>button {}

.chat>.chat-content>.profile>.pbody .box {
    font-size: 0.9rem;
}

.chat>.chat-content>.profile>.pbody .box>p:has(.v-data:empty) {
    display: none;
}

.chat>.chat-content>.profile>.pfooter>.actions {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.chat>.chat-content>.profile>.pfooter>.actions>button {}

/* Profile */

/* CHAT */

/* Email accounts */
.email-account {
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px;
    background: #fff;
    border-radius: 8px;
    transition: ease-in-out .3s all;
    border: 1px solid #ededed;
}

.email-account>.actions {
    border-top: 1px solid #f5f5f5;
}

.email-account:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* Email accounts */

/* TAGS */
.tag {
    display: inline-block;
    padding: 2px 6px;
    background-color: var(--primary);
    border-radius: 3px;
    font-size: 85%;
    color: #fff;
    margin-right: 3px;
    margin-bottom: 2px;
}

.tags:last-child {
    margin-right: 0;
}

/* TAGS */

/* INVENTORY */
.product-inventory {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-inventory li.resume {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    margin-top: 8px;
    padding: 8px;
    font-weight: bold;
    border-top: var(--input-border) 2px solid;
}

.product-inventory li.item {
    position: relative;
    margin-bottom: 8px;
}

.product-inventory li.item.notforsale {
    opacity: .5;
}

.product-inventory li.item.blocked:not(.admin) {
    display: none;
}

.product-inventory li.item.blocked.admin {
    opacity: .25;
}

.product-inventory.small li.item {
    margin-bottom: 4px;
}

.product-inventory li.item:last-child {}

.product-inventory>li.item>.content {
    border-radius: 8px;
    padding: 8px;
    background-color: var(--light);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
}

.product-inventory.small>li.item>.content {
    padding: 5px;
}

.product-inventory li.item .info .name {
    font-weight: 500;
}

.product-inventory li.item .total {
    text-align: right;
    transition: ease-in-out 0.3s all;

    display: flex;
    align-items: center;
    gap: 8px;
}

.product-inventory li.item .total .amount {
    transition: ease-in-out 0.3s all;
}

.product-inventory>li.item>.content>.total>.buttons {
    position: absolute;
    display: flex;
    opacity: 0;
    overflow: hidden;
    width: 0;
    transition: ease-in-out 0.3s all;
    /*right: 8px;
    top: 8px;*/
    /*transform: translateX(47px);*/
    margin-right: -100px;
}

.product-inventory>li.item>.content:hover>.total>.buttons {
    position: relative;
    display: flex;
    transform: translateX(0);
    opacity: 1;
    /*width: 95px;*/
    width: auto;
    margin-right: 0;
}

.product-inventory li.item>.content:hover>.total:has(> .buttons:not(:empty)) {
    /*padding-right: 100px;*/
    /*padding-right: auto;*/
    /*margin-left: auto;
    margin-right: auto;*/
}

.product-inventory li.item>.content>.total>.buttons>a,
.product-inventory li.item>.content>.total>.buttons>a[aria-expanded=true] {
    display: inline-block;
    margin-left: .4rem;
}

.product-inventory li.item .form-group {
    text-align: left;
}

.product-inventory li.item>ul.product-inventory {
    flex-basis: 100%;
    padding: 3px 10px;
    font-size: 85%;
}

.product-inventory li.item>ul.product-inventory>li.item {
    margin-bottom: 0;
}

.product-inventory li.item>ul.product-inventory>li.item>.content {
    background: transparent;
}

.product-inventory li.item>ul.product-inventory>li.item .info .name {
    font-weight: normal;
}

.product-inventory li.actions {}

/* INVENTORY */

/* HTML BUILDER */
.reset-view {
    animation: none;
    animation-delay: 0;
    animation-direction: normal;
    animation-duration: 0;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-name: none;
    animation-play-state: running;
    animation-timing-function: ease;
    backface-visibility: visible;
    background: 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: repeat;
    background-size: auto auto;
    border: 0;
    border-style: none;
    border-width: medium;
    border-color: inherit;
    border-bottom: 0;
    border-bottom-color: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-collapse: separate;
    border-image: none;
    border-left: 0;
    border-left-color: inherit;
    border-left-style: none;
    border-left-width: medium;
    border-radius: 0;
    border-right: 0;
    border-right-color: inherit;
    border-right-style: none;
    border-right-width: medium;
    border-spacing: 0;
    border-top: 0;
    border-top-color: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-style: none;
    border-top-width: medium;
    bottom: auto;
    box-shadow: none;
    box-sizing: content-box;
    caption-side: top;
    clear: none;
    clip: auto;
    color: inherit;
    columns: auto;
    column-count: auto;
    column-fill: balance;
    column-gap: normal;
    column-rule: medium none currentColor;
    column-rule-color: currentColor;
    column-rule-style: none;
    column-rule-width: none;
    column-span: 1;
    column-width: auto;
    content: normal;
    counter-increment: none;
    counter-reset: none;
    cursor: auto;
    direction: ltr;
    display: inline;
    empty-cells: show;
    float: none;
    font: normal;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    hyphens: none;
    left: auto;
    letter-spacing: normal;
    line-height: normal;
    list-style: none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: disc;
    margin: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    orphans: 0;
    outline: 0;
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: auto;
    perspective: none;
    perspective-origin: 50% 50%;
    position: static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes: '\201C' '\201D' '\2018' '\2019';
    right: auto;
    tab-size: 8;
    table-layout: auto;
    text-align: inherit;
    text-align-last: auto;
    text-decoration: none;
    text-decoration-color: inherit;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    top: auto;
    transform: none;
    transform-style: flat;
    transition: none;
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: none;
    transition-timing-function: ease;
    unicode-bidi: normal;
    vertical-align: baseline;
    visibility: visible;
    white-space: normal;
    widows: 0;
    width: auto;
    word-spacing: normal;
    z-index: auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#htmlBuilderPreview {
    all: initial;

    * {
        all: unset;
    }
}

.anubbe-builder {}

.popover {
    z-index: 1049;
    max-width: 100%;
}

.popover .wysihtml5-sandbox {
    width: 100% !important;
    height: 200px !important;
}

.popover+.select2-container {
    z-index: 1061;
}

.modal {
    /*z-index: 1061;*/
}

/* Title */
.anubbe-builder .builder-title {
    padding: .8rem;
    top: 0;
    background: #fff;
    z-index: 2;
}

.anubbe-builder .builder-title .site {
    font-size: .8rem;
}

.anubbe-builder .builder-title .site+i {
    font-size: .8rem;
}

.anubbe-builder .builder-title .name {
    font-size: 1.2rem;
    display: block;
}

/* Title */

/* Versions */
.anubbe-builder .anubbe-builder-versions-container {}

.anubbe-builder .anubbe-builder-versions {
    margin: 0;
    padding: .8rem;
    list-style: none;
}

.anubbe-builder .anubbe-builder-versions:
}

:after {
    display: block;
    text-align: center;
    content: attr(data-
    });
font-style: italic;
font-size: .9rem;
color: #99abb4;
}

.anubbe-builder .anubbe-builder-versions>li {
    font-size: .9rem;
    border-radius: .9rem;
}

.anubbe-builder .anubbe-builder-versions>li>div {}

.anubbe-builder .anubbe-builder-versions>li .number {}

.anubbe-builder .anubbe-builder-versions>li .user {
    font-size: .7rem;
}

.anubbe-builder .anubbe-builder-versions>li .date {
    color: #99abb4;
}

.anubbe-builder .anubbe-builder-versions>li .actions {
    font-size: .7rem;
}

/* Versions */

/* Elements picker */
.anubbe-builder-elements {
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: .8rem;
    justify-content: flex-start;
    align-items: stretch;
}

.anubbe-builder-elements>li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 5px;
    flex: 1;
    flex-basis: calc(50% - 0.3rem);
    margin-bottom: .3rem;
    text-align: center;
    cursor: pointer;
    min-width: 120px;
}

.anubbe-builder-elements>li>i {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0rem;
}

.anubbe-builder-elements>li:after {
    display: block;
    text-align: center;
    content: attr(data-name);
    font-size: .9rem;
    font-weight: 400;
}

.anubbe-builder-elements>li:nth-child(odd) {
    margin-right: .3rem;
}

.anubbe-builder-elements>li:nth-child(even) {
    margin-left: .3rem;
}

.anubbe-builder-elements>li:hover {
    border-color: var(--primary);
}

.anubbe-builder-elements>li.dragging {
    width: 100%;
    min-width: 150px;
    display: block;
}

.anubbe-builder .buttons {
    position: absolute;
    width: calc(100% - 30px);
    bottom: 0;
    background: #fff;
}

.anubbe-builder .buttons-padding {
    padding-bottom: 53px !important;
}

/* Elements picker */

/* Zone */
.anubbe-builder .anubbe-builder-zone {
    font-family: "Poppins", sans-serif;
    margin: 1.5rem;
    padding: 15px;
    padding-bottom: 100px;
    border: 1px dashed #e0e0e0;
    border-radius: 10px;
    overflow-x: auto;
    height: calc(100vh - 66px - 30px - 1.5rem);
}

.anubbe-builder .ui-droppable {
    min-height: 150px !important;
}

.anubbe-builder .anubbe-builder-zone:empty:after {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(data-empty-text);
    min-height: 200px;
    text-align: center;
    color: #e0e0e0;
    font-family: "Poppins", sans-serif;
}

.anubbe-builder .anubbe-builder-zone>* {
    margin-bottom: 15px;
}

.anubbe-builder .anubbe-builder-zone>*:last-child {
    margin-bottom: 0px;
}

.anubbe-builder .anubbe-builder-zone img {
    max-height: 125px;
    max-width: 100%;
}

.anubbe-builder .anubbe-builder-zone slider,
.anubbe-builder .anubbe-builder-zone form,
.anubbe-builder .anubbe-builder-zone div.embed-responsive {
    display: block;
    height: 120px;
    max-width: 100%;
}

.anubbe-builder .anubbe-builder-zone div.embed-responsive {
    min-height: 200px;
    height: auto !important;
}

.anubbe-builder .anubbe-builder-zone div.embed-responsive:before {
    padding-top: 0 !important;
}

.anubbe-builder .anubbe-builder-zone slider:after,
.anubbe-builder .anubbe-builder-zone form:after {
    content: attr(data-name);
    text-align: center;
}

.anubbe-builder .anubbe-builder-zone *:not(b, strong, span, i, u, ul, ol, li) {
    --margin-right: 20px;

    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-right: var(--margin-right);
    height: auto !important;
}

.anubbe-builder .anubbe-builder-zone *:not(b, strong, span, i, u, ul, ol, li):before {
    display: block;
    width: 100%;
    color: #ddd;
    content: attr(data-type) '#' attr(id);
    margin-top: -15px;
}

.anubbe-builder .anubbe-builder-zone *:last-child {
    margin-right: 0;
}

.anubbe-builder .anubbe-builder-zone *.active {
    border-color: var(--primary);
}

/* Fix columns */
.anubbe-builder .anubbe-builder-zone *.col-md-1 {
    max-width: calc((100% / 12) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-2 {
    max-width: calc((100% / 6) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-3 {
    max-width: calc((100% / 4) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-4 {
    max-width: calc((100% / 3) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-5 {
    max-width: calc((100% / (12 / 5)) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-6 {
    max-width: calc((100% / 2) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-7 {
    max-width: calc((100% / (12 / 7)) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-8 {
    max-width: calc((100% / (12 / 8)) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-9 {
    max-width: calc((100% / (12 / 9)) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-10 {
    max-width: calc((100% / (12 / 10)) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-11 {
    max-width: calc((100% / (12 / 11)) - var(--margin-right));
}

.anubbe-builder .anubbe-builder-zone *.col-md-12 {
    max-width: calc((100% / (12 / 12)) - var(--margin-right));
}

/* Fix columns */

.anubbe-builder .anubbe-builder-zone .ui-resizable-handle.ui-resizable-s,
.anubbe-builder .anubbe-builder-zone .ui-resizable-handle.ui-resizable-se,
.anubbe-builder .anubbe-builder-zone .ui-resizable-handle.ui-resizable-e:before {
    display: none;
}

.anubbe-builder .anubbe-builder-zone .ui-resizable-handle.ui-resizable-e {
    cursor: e-resize;
    padding: 0;
    border: none;
    margin-bottom: 0;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100% !important;
}

/* Zone */

/* Drag & drop */
.anubbe-builder .dragging {
    z-index: 500;
}

.anubbe-builder .droppable-zone {
    min-height: 100px;
    text-align: center;
    border: 1px dashed #e0e0e0;
    border-style: dashed !important;
    border-radius: 10px;
    margin-bottom: 20px;
}

.anubbe-builder .droppable-zone:last-child {
    margin-bottom: 0;
}

.anubbe-builder .anubbe-builder-zone.hover,
.anubbe-builder .droppable-zone.hover {
    border-color: var(--primary);
}

/* Drag & drop */
/* HTML BUILDER */

/* WhatsApp */
.wa-conversation {
    background-image: url(https://f.odnos.app/utilities/whatsapp/bg-min.png);
    background-size: cover;
    height: 100%;
    padding: .8rem;
}

.wa-conversation .wa-template-message {
    background-color: #fff;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
    border-radius: 7.5px;
    border-top-left-radius: 0;
    padding: 6px 7px 8px 9px;
    width: 75%;
    word-wrap: break-word;
}

.wa-conversation .wa-template-message .wa_header {
    color: #111b21;
    font-size: .85rem;
}

.wa-conversation .wa-template-message .wa_body {
    color: #111b21;
    font-size: .85rem;
}

.wa-conversation .wa-template-message .wa_footer {
    color: #111b215a;
    font-size: .75rem;
}

.picmo-popup {
    z-index: 10000;
}

/* WhatsApp */

/* RECAPTCHA */
.grecaptcha-badge {
    display: none !important;
}

/* RECAPTCHA */

/********
 * BDAY *
 ********/
.bday {
    position: fixed;
    z-index: 100000;
    bottom: 8px;
    right: 50%;
    width: 368px;
    height: 95px;
}

.balloon {
    width: 738px;
    margin: 0 auto;
    padding-top: 30px;
    position: relative;
    transform: scale(.5);
}

.balloon>div {
    width: 104px;
    height: 140px;
    background: rgba(182, 15, 97, 0.9);
    border-radius: 0;
    border-radius: 80% 80% 80% 80%;
    margin: 0 auto;
    position: absolute;
    padding: 10px;
    box-shadow: inset 17px 7px 10px @gps-burg;
    -webkit-transform-origin: bottom center;
}

.balloon>div:nth-child(1) {
    background: rgba(182, 15, 97, 0.9);
    left: 0;
    box-shadow: inset 10px 10px 10px darken(@gps-burg, 10%);
    -webkit-animation: balloon1 6s ease-in-out infinite;
    -moz-animation: balloon1 6s ease-in-out infinite;
    -o-animation: balloon1 6s ease-in-out infinite;
    animation: balloon1 6s ease-in-out infinite;
}

.balloon>div:nth-child(1):before {
    color: rgba(182, 15, 97, 0.9);
}

.balloon>div:nth-child(2) {
    background: rgba(242, 112, 45, 0.9);
    left: 120px;
    box-shadow: inset 10px 10px 10px darken(@gps-orange, 10%);
    -webkit-animation: balloon2 6s ease-in-out infinite;
    -moz-animation: balloon2 6s ease-in-out infinite;
    -o-animation: balloon2 6s ease-in-out infinite;
    animation: balloon2 6s ease-in-out infinite;
}

.balloon>div:nth-child(2):before {
    color: rgba(242, 112, 45, 0.9);
}

.balloon>div:nth-child(3) {
    background: rgba(45, 181, 167, 0.9);
    left: 240px;
    box-shadow: inset 10px 10px 10px darken(@gps-skyblue, 10%);
    -webkit-animation: balloon4 6s ease-in-out infinite;
    -moz-animation: balloon4 6s ease-in-out infinite;
    -o-animation: balloon4 6s ease-in-out infinite;
    animation: balloon4 6s ease-in-out infinite;
}

.balloon>div:nth-child(3):before {
    color: rgba(45, 181, 167, 0.9);
}

.balloon>div:nth-child(4) {
    background: rgba(190, 61, 244, 0.9);
    left: 360px;
    box-shadow: inset 10px 10px 10px darken(@gps-purple, 10%);
    -webkit-animation: balloon1 5s ease-in-out infinite;
    -moz-animation: balloon1 5s ease-in-out infinite;
    -o-animation: balloon1 5s ease-in-out infinite;
    animation: balloon1 5s ease-in-out infinite;
}

.balloon>div:nth-child(4):before {
    color: rgba(190, 61, 244, 0.9);
}

.balloon>div:nth-child(5) {
    background: rgba(180, 224, 67, 0.9);
    left: 480px;
    box-shadow: inset 10px 10px 10px darken(@gps-green, 10%);
    -webkit-animation: balloon3 5s ease-in-out infinite;
    -moz-animation: balloon3 5s ease-in-out infinite;
    -o-animation: balloon3 5s ease-in-out infinite;
    animation: balloon3 5s ease-in-out infinite;
}

.balloon>div:nth-child(5):before {
    color: rgba(180, 224, 67, 0.9);
}

.balloon>div:nth-child(6) {
    background: rgba(242, 194, 58, 0.9);
    left: 600px;
    box-shadow: inset 10px 10px 10px darken(@gps-yellow, 10%);
    -webkit-animation: balloon2 3s ease-in-out infinite;
    -moz-animation: balloon2 3s ease-in-out infinite;
    -o-animation: balloon2 3s ease-in-out infinite;
    animation: balloon2 3s ease-in-out infinite;
}

.balloon>div:nth-child(6):before {
    color: rgba(242, 194, 58, 0.9);
}

.balloon>div:before {
    color: rgba(182, 15, 97, 0.9);
    position: absolute;
    bottom: -11px;
    left: 52px;
    content: "▲";
    font-size: 1em;
}

.balloon>div>span {
    font-size: 4.8em;
    color: white;
    position: relative;
    top: 12px;
    left: 50%;
    margin-left: -18px;
    text-transform: uppercase;
}

/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(-6deg);
    }

    50% {
        -webkit-transform: translateY(-20px) rotate(8deg);
    }
}

@-moz-keyframes balloon1 {

    0%,
    100% {
        -moz-transform: translateY(0) rotate(-6deg);
    }

    50% {
        -moz-transform: translateY(-20px) rotate(8deg);
    }
}

@-o-keyframes balloon1 {

    0%,
    100% {
        -o-transform: translateY(0) rotate(-6deg);
    }

    50% {
        -o-transform: translateY(-20px) rotate(8deg);
    }
}

@keyframes balloon1 {

    0%,
    100% {
        transform: translateY(0) rotate(-6deg);
    }

    50% {
        transform: translateY(-20px) rotate(8deg);
    }
}

/* BAllOON 2 5*/
@-webkit-keyframes balloon2 {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(6eg);
    }

    50% {
        -webkit-transform: translateY(-30px) rotate(-8deg);
    }
}

@-moz-keyframes balloon2 {

    0%,
    100% {
        -moz-transform: translateY(0) rotate(6deg);
    }

    50% {
        -moz-transform: translateY(-30px) rotate(-8deg);
    }
}

@-o-keyframes balloon2 {

    0%,
    100% {
        -o-transform: translateY(0) rotate(6deg);
    }

    50% {
        -o-transform: translateY(-30px) rotate(-8deg);
    }
}

@keyframes balloon2 {

    0%,
    100% {
        transform: translateY(0) rotate(6deg);
    }

    50% {
        transform: translateY(-30px) rotate(-8deg);
    }
}

/* BAllOON 0*/
@-webkit-keyframes balloon3 {

    0%,
    100% {
        -webkit-transform: translate(0, -10px) rotate(6eg);
    }

    50% {
        -webkit-transform: translate(-20px, 30px) rotate(-8deg);
    }
}

@-moz-keyframes balloon3 {

    0%,
    100% {
        -moz-transform: translate(0, -10px) rotate(6eg);
    }

    50% {
        -moz-transform: translate(-20px, 30px) rotate(-8deg);
    }
}

@-o-keyframes balloon3 {

    0%,
    100% {
        -o-transform: translate(0, -10px) rotate(6eg);
    }

    50% {
        -o-transform: translate(-20px, 30px) rotate(-8deg);
    }
}

@keyframes balloon3 {

    0%,
    100% {
        transform: translate(0, -10px) rotate(6eg);
    }

    50% {
        transform: translate(-20px, 30px) rotate(-8deg);
    }
}

/* BAllOON 3*/
@-webkit-keyframes balloon4 {

    0%,
    100% {
        -webkit-transform: translate(10px, -10px) rotate(-8eg);
    }

    50% {
        -webkit-transform: translate(-15px, 20px) rotate(10deg);
    }
}

@-moz-keyframes balloon4 {

    0%,
    100% {
        -moz-transform: translate(10px, -10px) rotate(-8eg);
    }

    50% {
        -moz-transform: translate(-15px, 10px) rotate(10deg);
    }
}

@-o-keyframes balloon4 {

    0%,
    100% {
        -o-transform: translate(10px, -10px) rotate(-8eg);
    }

    50% {
        -o-transform: translate(-15px, 10px) rotate(10deg);
    }
}

@keyframes balloon4 {

    0%,
    100% {
        transform: translate(10px, -10px) rotate(-8eg);
    }

    50% {
        transform: translate(-15px, 10px) rotate(10deg);
    }
}

.pyro {
    position: fixed;
    right: 50%;
    bottom: 50px;
}

.pyro>.before,
.pyro>.after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro>.after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: 29px -134.66666667px #00d9ff, -36px -391.66666667px #00ffae, -40px -309.66666667px #009dff, 79px -207.66666667px #6aff00, 7px -376.66666667px #ff0048, 207px -203.66666667px #009dff, 175px -280.66666667px red, 176px -49.66666667px #00ff77, -16px -232.66666667px #1aff00, 36px -277.66666667px #ff9d00, 157px 67.33333333px #d9ff00, -9px -221.66666667px #00ff84, -206px -251.66666667px #ff7700, 23px -381.66666667px #001eff, 170px -119.66666667px #ff0026, -43px -300.66666667px #5eff00, 81px -395.66666667px #9dff00, 9px -170.66666667px #b700ff, -25px 32.33333333px #1100ff, 59px -160.66666667px #ff2200, -182px -324.66666667px #00ffc8, -118px -28.66666667px #0062ff, -162px -344.66666667px #a2ff00, 141px -384.66666667px #2f00ff, -55px -294.66666667px #00ffc4, -149px -38.66666667px #0009ff, 184px -69.66666667px #0073ff, -216px -24.66666667px #04ff00, 215px -99.66666667px #00ffb3, 143px 69.33333333px #ff00dd, 171px -58.66666667px #00aeff, 122px -119.66666667px #0095ff, -211px -26.66666667px #0037ff, 27px -383.66666667px #ff00ae, -236px -192.66666667px #008cff, 94px -143.66666667px #ffe100, 76px -244.66666667px #ff0033, 148px -409.66666667px #ff00ee, -205px -224.66666667px #ff0026, 116px -58.66666667px #ff0080, -193px -89.66666667px #ddff00, 121px -26.66666667px #00ff7b, -161px -80.66666667px #0011ff, -152px -127.66666667px #00ff66, -183px -399.66666667px #aa00ff, -43px -205.66666667px #00fff7, 116px -403.66666667px #0048ff, 120px -63.66666667px #ff008c, 181px -374.66666667px #ff4800, 124px -320.66666667px #00ff04, -121px -63.66666667px #ff0011;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 29px -134.66666667px #00d9ff, -36px -391.66666667px #00ffae, -40px -309.66666667px #009dff, 79px -207.66666667px #6aff00, 7px -376.66666667px #ff0048, 207px -203.66666667px #009dff, 175px -280.66666667px red, 176px -49.66666667px #00ff77, -16px -232.66666667px #1aff00, 36px -277.66666667px #ff9d00, 157px 67.33333333px #d9ff00, -9px -221.66666667px #00ff84, -206px -251.66666667px #ff7700, 23px -381.66666667px #001eff, 170px -119.66666667px #ff0026, -43px -300.66666667px #5eff00, 81px -395.66666667px #9dff00, 9px -170.66666667px #b700ff, -25px 32.33333333px #1100ff, 59px -160.66666667px #ff2200, -182px -324.66666667px #00ffc8, -118px -28.66666667px #0062ff, -162px -344.66666667px #a2ff00, 141px -384.66666667px #2f00ff, -55px -294.66666667px #00ffc4, -149px -38.66666667px #0009ff, 184px -69.66666667px #0073ff, -216px -24.66666667px #04ff00, 215px -99.66666667px #00ffb3, 143px 69.33333333px #ff00dd, 171px -58.66666667px #00aeff, 122px -119.66666667px #0095ff, -211px -26.66666667px #0037ff, 27px -383.66666667px #ff00ae, -236px -192.66666667px #008cff, 94px -143.66666667px #ffe100, 76px -244.66666667px #ff0033, 148px -409.66666667px #ff00ee, -205px -224.66666667px #ff0026, 116px -58.66666667px #ff0080, -193px -89.66666667px #ddff00, 121px -26.66666667px #00ff7b, -161px -80.66666667px #0011ff, -152px -127.66666667px #00ff66, -183px -399.66666667px #aa00ff, -43px -205.66666667px #00fff7, 116px -403.66666667px #0048ff, 120px -63.66666667px #ff008c, 181px -374.66666667px #ff4800, 124px -320.66666667px #00ff04, -121px -63.66666667px #ff0011;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 29px -134.66666667px #00d9ff, -36px -391.66666667px #00ffae, -40px -309.66666667px #009dff, 79px -207.66666667px #6aff00, 7px -376.66666667px #ff0048, 207px -203.66666667px #009dff, 175px -280.66666667px red, 176px -49.66666667px #00ff77, -16px -232.66666667px #1aff00, 36px -277.66666667px #ff9d00, 157px 67.33333333px #d9ff00, -9px -221.66666667px #00ff84, -206px -251.66666667px #ff7700, 23px -381.66666667px #001eff, 170px -119.66666667px #ff0026, -43px -300.66666667px #5eff00, 81px -395.66666667px #9dff00, 9px -170.66666667px #b700ff, -25px 32.33333333px #1100ff, 59px -160.66666667px #ff2200, -182px -324.66666667px #00ffc8, -118px -28.66666667px #0062ff, -162px -344.66666667px #a2ff00, 141px -384.66666667px #2f00ff, -55px -294.66666667px #00ffc4, -149px -38.66666667px #0009ff, 184px -69.66666667px #0073ff, -216px -24.66666667px #04ff00, 215px -99.66666667px #00ffb3, 143px 69.33333333px #ff00dd, 171px -58.66666667px #00aeff, 122px -119.66666667px #0095ff, -211px -26.66666667px #0037ff, 27px -383.66666667px #ff00ae, -236px -192.66666667px #008cff, 94px -143.66666667px #ffe100, 76px -244.66666667px #ff0033, 148px -409.66666667px #ff00ee, -205px -224.66666667px #ff0026, 116px -58.66666667px #ff0080, -193px -89.66666667px #ddff00, 121px -26.66666667px #00ff7b, -161px -80.66666667px #0011ff, -152px -127.66666667px #00ff66, -183px -399.66666667px #aa00ff, -43px -205.66666667px #00fff7, 116px -403.66666667px #0048ff, 120px -63.66666667px #ff008c, 181px -374.66666667px #ff4800, 124px -320.66666667px #00ff04, -121px -63.66666667px #ff0011;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 29px -134.66666667px #00d9ff, -36px -391.66666667px #00ffae, -40px -309.66666667px #009dff, 79px -207.66666667px #6aff00, 7px -376.66666667px #ff0048, 207px -203.66666667px #009dff, 175px -280.66666667px red, 176px -49.66666667px #00ff77, -16px -232.66666667px #1aff00, 36px -277.66666667px #ff9d00, 157px 67.33333333px #d9ff00, -9px -221.66666667px #00ff84, -206px -251.66666667px #ff7700, 23px -381.66666667px #001eff, 170px -119.66666667px #ff0026, -43px -300.66666667px #5eff00, 81px -395.66666667px #9dff00, 9px -170.66666667px #b700ff, -25px 32.33333333px #1100ff, 59px -160.66666667px #ff2200, -182px -324.66666667px #00ffc8, -118px -28.66666667px #0062ff, -162px -344.66666667px #a2ff00, 141px -384.66666667px #2f00ff, -55px -294.66666667px #00ffc4, -149px -38.66666667px #0009ff, 184px -69.66666667px #0073ff, -216px -24.66666667px #04ff00, 215px -99.66666667px #00ffb3, 143px 69.33333333px #ff00dd, 171px -58.66666667px #00aeff, 122px -119.66666667px #0095ff, -211px -26.66666667px #0037ff, 27px -383.66666667px #ff00ae, -236px -192.66666667px #008cff, 94px -143.66666667px #ffe100, 76px -244.66666667px #ff0033, 148px -409.66666667px #ff00ee, -205px -224.66666667px #ff0026, 116px -58.66666667px #ff0080, -193px -89.66666667px #ddff00, 121px -26.66666667px #00ff7b, -161px -80.66666667px #0011ff, -152px -127.66666667px #00ff66, -183px -399.66666667px #aa00ff, -43px -205.66666667px #00fff7, 116px -403.66666667px #0048ff, 120px -63.66666667px #ff008c, 181px -374.66666667px #ff4800, 124px -320.66666667px #00ff04, -121px -63.66666667px #ff0011;
    }
}

@keyframes bang {
    to {
        box-shadow: 29px -134.66666667px #00d9ff, -36px -391.66666667px #00ffae, -40px -309.66666667px #009dff, 79px -207.66666667px #6aff00, 7px -376.66666667px #ff0048, 207px -203.66666667px #009dff, 175px -280.66666667px red, 176px -49.66666667px #00ff77, -16px -232.66666667px #1aff00, 36px -277.66666667px #ff9d00, 157px 67.33333333px #d9ff00, -9px -221.66666667px #00ff84, -206px -251.66666667px #ff7700, 23px -381.66666667px #001eff, 170px -119.66666667px #ff0026, -43px -300.66666667px #5eff00, 81px -395.66666667px #9dff00, 9px -170.66666667px #b700ff, -25px 32.33333333px #1100ff, 59px -160.66666667px #ff2200, -182px -324.66666667px #00ffc8, -118px -28.66666667px #0062ff, -162px -344.66666667px #a2ff00, 141px -384.66666667px #2f00ff, -55px -294.66666667px #00ffc4, -149px -38.66666667px #0009ff, 184px -69.66666667px #0073ff, -216px -24.66666667px #04ff00, 215px -99.66666667px #00ffb3, 143px 69.33333333px #ff00dd, 171px -58.66666667px #00aeff, 122px -119.66666667px #0095ff, -211px -26.66666667px #0037ff, 27px -383.66666667px #ff00ae, -236px -192.66666667px #008cff, 94px -143.66666667px #ffe100, 76px -244.66666667px #ff0033, 148px -409.66666667px #ff00ee, -205px -224.66666667px #ff0026, 116px -58.66666667px #ff0080, -193px -89.66666667px #ddff00, 121px -26.66666667px #00ff7b, -161px -80.66666667px #0011ff, -152px -127.66666667px #00ff66, -183px -399.66666667px #aa00ff, -43px -205.66666667px #00fff7, 116px -403.66666667px #0048ff, 120px -63.66666667px #ff008c, 181px -374.66666667px #ff4800, 124px -320.66666667px #00ff04, -121px -63.66666667px #ff0011;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

/********
 * BDAY *
 ********/

/* Floating Places */
.floating-search {
    display: none;
    position: absolute;
    list-style: none;
    padding: 8px;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    width: calc(100% - 20px);
    left: 10px;
}

.floating-search.wide {
    width: 80vw !important;
    max-width: 400px !important;
    left: 50% !important;
    border-radius: 8px !important;
    transform: translateX(-50%);
    height: auto;
    max-height: 400px;
    overflow-y: auto;
}

.floating-search.shown {
    display: block;
}

.floating-search>li {
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.floating-search>li.message {}

.floating-search>li.error {}

.floating-search>li.subtitle {
    padding: 5px 3px;
    font-size: 0.8rem;
}

.floating-search>li.result {
    display: block;
    border-bottom: #f5f5f5 solid 1px;
    padding: 5px 8px;
    cursor: pointer;
}

.floating-search>li.result:last-child {
    border-bottom: none;
}

.floating-search>li.result>.name {
    display: block;
    color: #222;
}

.floating-search>li.result>.descrip {
    display: block;
    color: #777;
    font-size: .85rem;
}

.floating-search>li.result:hover {
    background: #f5f5f5;
}

.floating-search>li.btn-more {
    padding: 8px;
    cursor: pointer;
}

.floating-search>li.btn-more:hover {
    background: #f5f5f5;
}

/* Floating Places */

/* Google Ads in tap it */
.tapit-google-banner {
    background: transparent;
    position: sticky;
    bottom: 0;
    width: 320px;
    height: 50px;
    max-height: 50px;
    margin: 0px auto;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .tapit-google-banner {
        position: fixed;
        height: 250px;
        width: 250px;
        max-height: 250px;
        bottom: calc((100vh / 2) - 125px);
        right: 0;
    }
}

/* Google Ads in tap it */

/* Radio group selector */
.radio-group-selector {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    position: relative;
    --border-color: #d2d6da;
}

.radio-group-selector .radio-item-edit {
    position: absolute;
    border: none;
    background: none;
    top: 0.4rem;
    right: 0.65rem;
    padding: 2px;
    color: var(--gray);
    transition: ease-in-out .3s all;
    display: none;
    opacity: 0;
}

.radio-group-selector:has(input[type=radio]:checked) .radio-item-edit {
    display: block;
    opacity: 1;
}

.radio-group-selector .radio-item-edit:hover {
    color: var(--danger);
}

.radio-group-selector .radio-item {
    flex-grow: 1;
    margin-bottom: 0;
    cursor: pointer;
}

.radio-group-selector .radio-item>input[type=checkbox],
.radio-group-selector .radio-item>input[type=radio] {
    display: none;
}

.radio-group-selector .radio-item>.radio-item-content {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    line-height: 1.7rem;
    padding: 0.375rem 0.75rem;
    color: #444;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: ease-in-out .3s all;
}

.radio-group-selector .radio-item>.radio-item-content>i {}

.radio-group-selector .radio-item>.radio-item-content>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-group-selector .radio-item>input[type=checkbox]:checked~.radio-item-content,
.radio-group-selector .radio-item>input[type=radio]:checked~.radio-item-content,
.radio-group-selector .radio-item:hover>.radio-item-content {
    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);
}

.radio-group-selector:has(input[type=checkbox]:checked) .radio-item:has(> input[type=checkbox]:not(:checked)),
.radio-group-selector:has(input[type=radio]:checked) .radio-item:has(> input[type=radio]:not(:checked)) {
    opacity: .5;
    filter: grayscale(1);
    display: none;
}

/* Radio group selector */

/* Menu Sortable Item */
.menu-sortable-items {}

.menu-sortable-items>.item {}

.menu-sortable-items>.item>.ancollapse {
    border: 1px solid var(--input-border);
    margin-bottom: 10px;
    padding: 0px 10px;
    background-color: #ffffff;
}

.menu-sortable-items>.item>.ancollapse>div[data-toggle="collapse"] {
    border-bottom: none;
}

.menu-sortable-items>.item>.menu-sortable-items {
    margin-left: 20px;
}

/* Menu Sortable Item */

/* Customer-address */
.customer-address {
    background-color: var(--light);
    border-radius: 10px;
    padding: 15px;
}

/* Customer-address */

/* Map */
.map-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--input-border);
}

.map-container>.map-view {
    width: 100%;
    height: 100%;
}

.map-container>.map-view:focus {
    outline: none;
}

.map-container>.marker {
    position: absolute;
    height: 50px;
    width: 50px;
    top: calc(50% - 50px);
    left: calc(50% - 25px);
}

.map-container>.camera {
    --camera-height: 280px;
    position: fixed;
    height: var(--camera-height);
    width: 300px;
    background-color: #ffffff;
    top: calc(50% - var(--camera-height) - 25px);
    left: calc(50% - 150px);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 20px;
}

.map-container>.camera:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #fff transparent;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-width: 15px 10px 0;
    bottom: -15px;
    left: 50%;
    margin-left: -10px;
}

.map-container>.camera>.stream {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.map-container>.camera>.preview {
    display: none;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    object-fit: contain;
}

.map-container>.camera>.btnSnap,
.map-container>.camera>.btnRetake {
    position: absolute;
    bottom: 5px;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
    display: flex;
}

.map-container>.camera>.btnRetake {
    display: none;
}

.map-container>.camera>canvas {
    display: none;
}

.map-container>.btnGeolocateMe,
.map-container>.btnGeolocateMeClass {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    left: 8px;
    bottom: 8px;
    background-color: #fff;
    color: #444;
    border: none;
    font-size: 1.2rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.map-container>button[type=submit] {
    position: absolute;
    width: 250px;
    left: calc(50% - (250px / 2));
    bottom: 20%;
}

/* Map */

/* Custom Check Boxed */
.check-selector {
    position: relative;
    display: block;
    border-radius: .5rem;
    margin-bottom: 10px;
    padding: 5px 8px 5px 8px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    transition: ease-in-out .3s background-color;
}

.check-selector:last {
    margin-bottom: 0;
}

.check-selector:hover {
    background-color: #f5f5f5;
}

.check-selector>label {
    display: flex;
    flex-direction: row;
    align-items: start;
    height: auto;
    font-size: .9rem;
    margin-bottom: 0;
}

.check-selector>input:checked {}

.check-selector:has(> input:checked) {
    background-color: #f5f5f5;
}

.check-selector>label>.row {
    margin-left: 0;
    margin-right: 0;
    flex-basis: 100%;
}

.check-selector.ghost {
    opacity: .5;
}

.check-selector.drag {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.check-selector.toUp {
    transform: rotate(1deg);
}

.check-selector.toDown {
    transform: rotate(-1deg);
}

/* Custom Check Boxed */

/* Swal */
.swal2-container:has(.swal2-modal) {
    backdrop-filter: blur(10px);
}

.swal2-popup {
    border-radius: 20px !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel {
    border-radius: 0.5rem !important;
    padding: 7px 12px !important;
}

.swal2-styled.swal2-confirm {
    color: #fff;
    background-color: var(--primary) !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:active {
    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;
}

.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel {
    color: #fff !important;
    background: #fc4b6c !important;
}

.swal2-styled.swal2-deny:hover,
.swal2-styled.swal2-deny:active,
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-cancel:active {
    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2) !important;
}

.swal2-container .swal2-title {
    font-size: 1.55rem;
}

.swal2-container .swal2-html-container {
    font-size: 1rem;
}

/* Swal */

/* Profile Blow Animation */
.user-profile {
    --blow-color: rgba(0, 0, 0, 0.1);
}

.user-profile .profile-text>a {
    color: #ffffff !important;
    width: 100%;
    padding: 6px 30px;
    background: rgba(0, 0, 0, 0.25);
    display: block;
}

.user-profile .profile-text>a:after {
    top: 15px;
}

@-webkit-keyframes blow {
    0% {
        -webkit-box-shadow: 0 0 0 0px var(--blow-color);
        box-shadow: 0 0 0 0px var(--blow-color);
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5);
    }

    50% {
        -webkit-box-shadow: 0 0 0 10px var(--blow-color);
        box-shadow: 0 0 0 10px var(--blow-color);
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5);
    }

    100% {
        -webkit-box-shadow: 0 0 0 20px var(--blow-color);
        box-shadow: 0 0 0 20px var(--blow-color);
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5);
    }
}

@keyframes blow {
    0% {
        -webkit-box-shadow: 0 0 0 0px var(--blow-color);
        box-shadow: 0 0 0 0px var(--blow-color);
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5);
    }

    50% {
        -webkit-box-shadow: 0 0 0 10px var(--blow-color);
        box-shadow: 0 0 0 10px var(--blow-color);
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5);
    }

    100% {
        -webkit-box-shadow: 0 0 0 20px var(--blow-color);
        box-shadow: 0 0 0 20px var(--blow-color);
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 0.5);
        transform: scale3d(1, 1, 0.5);
    }
}

/* Profile Blow Animation */

/* Card timeline for estatuses */
.card-timeline {
    overflow-x: auto;
    display: flex;
}

.card-timeline a {
    position: relative;
    width: 180px;
    min-width: 180px;
    max-width: 280px;
    display: table-cell;
    height: 38px;
    padding: 5px 10px;
    padding-left: 25px;
    vertical-align: middle;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eaecef;
    border-left: none;
    border-top: none;
    border-left: none;
}

.card-timeline a::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #ffffff;
    border-width: 19px 0 19px 20px;
    top: 50%;
    right: -20px;
    margin-top: -19px;
}

.card-timeline a::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #eaecef;
    border-width: 19px 0 19px 20px;
    top: 50%;
    right: -22px;
    margin-top: -19px;
}

.card-timeline a:first-child {
    border-radius: 1rem 0 0 0px;
    border: 1px solid #eaecef;
}

.card-timeline a:last-child {
    border-radius: 0 1rem 0px 0;
}

.card-timeline a:last-child::after,
.card-timeline a:last-child::before {
    border: none;
}

.card-timeline a>.circle-status {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.card-timeline a>.name {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 13px;
}

.card-timeline a.disabled {
    color: #99abb4;
    cursor: not-allowed;
}

.card-timeline a.disabled>.name {
    opacity: .8;
}

/* Card timeline for estatuses */

/* Header Searchbar */
header .search-bar {
    max-width: 400px;
    position: relative;
    transition: ease-in-out all .3s;
}

header .search-bar:has(input:placeholder-shown) {
    opacity: 0.8;
}

header .search-bar:has(input:focus) {
    opacity: 1;
}

@media (min-width: 600px) {

    header .search-bar:has(input:focus),
    header .search-bar:has(input:not(:placeholder-shown)) {
        width: 300px;
        transform: scale(1.05);
    }
}

header .search-bar button,
header .search-bar .form-control,
header .form-control:not([type=range]):not([readonly]):not([disabled]):focus {
    border: none !important;
    padding: 0.3rem 0.75rem !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
}

header .search-bar button {}

header .search-bar ul.floating-search {
    width: calc(100% - 12px);
    left: 6px;
}

/* Header Searchbar */

/* Sticky */
.stricky-element {
    position: sticky;
    top: 150px;
}

/* Sticky */

/* topix-index */
.topic-index {}

.topic-index .category {
    font-size: 0.9rem;
    padding-top: 3px;
    padding-bottom: 3px;
}

.topic-index>.category {
    padding-top: 5px;
    padding-bottom: 5px;
}

.topic-index>.category:last-child {
    border-bottom: none !important;
}

.topic-index .category.dragging {
    border-bottom: none !important;
    background-color: #fff;
    transform: rotate(45deg);
    transform-origin: center right;
    padding: 5px;
    border-radius: 8px;
}

.topic-index .category>.info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topic-index .category>.info>.name {}

.topic-index .category>.info>.actions {}

.topic-index .category>.info>.actions>.btn {
    padding: 3px;
}

.topic-index .category>.subcategories {
    padding-left: 15px;
    border-radius: 5px;
}

/* topix-index */

/* Annoucements Carousel */
.announcement-slider {
    border-radius: 1rem;
    overflow: hidden;
}

.announcement-slider .carousel-indicators {
    margin-bottom: 0;
}

.announcement-slider .carousel-control-prev,
.announcement-slider .carousel-control-next {
    width: 0;
    opacity: 0;
    transition: ease-in-out .4s all;
}

.announcement-slider:hover .carousel-control-prev,
.announcement-slider:hover .carousel-control-next {
    opacity: .5;
    width: 6%;
}

.announcement-slider .carousel-item {
    padding-top: 35%;
    background-color: #fff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.announcement-image-modal {
    padding-top: 35%;
    border-radius: var(--border-radius);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#modalAnnouncementView .modal-body:has(.descrip:empty):has(.conditions:empty) {
    display: none;
}

/* Annoucements Carousel */

/* Image thumbnail */
.image-thumbnail {
    position: relative;
    border: 1px solid var(--border-color);
    padding: 5px;
    padding-bottom: calc(40% + 10px);
    border-radius: 8px;
    background-color: var(--border-color);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-thumbnail.image-loading .details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    word-break: break-all;
    padding: 15px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.image-thumbnail.image-loading .details .icon {
    line-height: 2rem;
    font-size: 2rem;
    color: var(--primary);
}

.image-thumbnail.image-loading .details .progress {
    width: 100%;
}

/* Image thumbnail */

/* Modal Media Editor */
#modalMediaEditor .image-thumbnail {
    background-size: contain;
    padding-bottom: calc(60% + 10px);
}

/* Modal Media Editor */

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

/* Cursors */

/* Group Area */
.group-area-container {}

.group-area {
    --placeholdercolor: #f1f1f1;
    border: 3px dashed var(--placeholdercolor);
    border-radius: 10px;
    padding: 10px;
}

.group-area-container>.group-area:nth-child(n + 2) {
    margin-top: 15px;
}

.group-area>ul {
    border-radius: 8px;
}

.group-area>ul.empty:empty:after {
    background-color: var(--placeholdercolor);
    border-radius: 8px;
}

.group-area>ul>li:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.group-area>ul>li:last-child {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* Group Area */

/* An selector */
.anselector {}

.anselector>.input-content {
    display: block;
}

.anselector:has(.selected > div:not(:empty)) .input-content {
    display: none;
}

.anselector>.selected {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    line-height: 1.7rem;
    padding: 0.375rem 0.75rem;
    color: #444;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: ease-in-out .3s all;
}

.anselector>.selected:hover {
    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);
}

.anselector>.selected:has(> div:empty) {
    display: none;
    overflow: hidden;
}

.anselector>.selected>div {
    flex-grow: 1;
    margin-bottom: 0;
}

.anselector>.selected>button {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    background: none;
    padding: 0px 5px;
    transition: 0.3s ease-in-out;
    background-color: #f5f5f5;
    border: 1px solid transparent;
    border-radius: 0 .5rem 0 .5rem;
    font-size: 0.8rem;
}

.anselector>.selected>button:hover {
    opacity: 1;
    background-color: var(--primary);
    color: var(--primary-contrast);
}

.anselector>.selected>button.danger:hover {
    background-color: var(--danger);
    color: #fff;
}

/* An selector */

/* Search In Page */
.find-in-page {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 80%;
    max-width: 400px;
    z-index: 1000;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 0px 0px 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    display: none;
    opacity: 0;
    transition: ease-in-out 3.8s all;
}

.find-in-page.show {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0%);
}

.find-in-page input {
    padding: 0.3rem 0.75rem !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin-right: 5px;
}

.find-in-page button {
    color: inherit;
    font-size: 18px;
    padding: 0px 4px;
    border: none;
    background-color: transparent;
}

/* Search In Page */

/* Quill */
/* Toolbar */
.ql-toolbar {
    border-radius: 8px 8px 0 0;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
    height: 20px;
}

.ql-snow .ql-picker-label::before {
    line-height: 20px;
    font-size: 13px;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--input-border);
    border-radius: 4px;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--primary);
}

/* Contenedor del editor */
.ql-container {
    border-radius: 0 0 8px 8px;
}

/* Opcional: suavizar el editor por dentro */
.ql-editor {
    border-radius: 0 0 8px 8px;
    color: #222;
}

/* Quill */

/* Margins */
@media (min-width: 768px) {
    .mt-md-65 {
        margin-top: 65px !important;
    }
}

/* Margins */

/* An Tabs */
.antabs {
    background-color: var(--bg-gray-light);
    border-radius: 8px;
    padding: 3px;
}

.antabs.nav-fill .nav-link {
    flex: 1 1 auto;
    text-align: center;
    color: #6B7280;
    font-weight: 400;
    transition: ease-in-out .3s all;
}

.antabs.nav-fill .nav-link:hover {
    color: #222;
}

.antabs.nav-fill .nav-link.active {
    background-color: #fff;
    color: #222;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.04);
}

/* An Tabs */

/* Inner Card */
.inner-card {
    border-radius: 8px;
    border: 1px solid var(--bg-gray-light);
    background-color: #fff;
    padding: 15px;
    margin-bottom: 15px;
    transition: ease-in-out .3s all;
}

.inner-card.wshadow,
.inner-card.wshadow-hover:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.04);
}

/* Inner Card */

/* Page grapper */
.page-wrapper:has(.fullheight) {
    padding-bottom: 0px;
}

/* Page grapper */

/* Aside vCurrentActivity */
body.mini-sidebar .vCurrentActivityBox {
    display: none !important;
}

/* Aside vCurrentActivity */

/* List */
.first-success li:first-child {
    position: relative;
    background-color: var(--success);
    padding: 1px;
    border-radius: 8px;
}

.first-success li:first-child:after {
    content: "\F012C";
    /* mdi-check */
    font-family: "Material Design Icons";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    color: var(--success);
    font-size: 16px;
}