/*
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;
}
/* 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;
    opacity: 0.8;
    transition: ease-in-out all .3s;
}
header .search-bar:has(input:focus) {
    opacity: 1;
}
@media (min-width: 600px) {
    header .search-bar:has(input:focus) {
        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 */