:root {
    /* Variables de color base */
    --primary-color: #00d4d4;
    --text-color: #151b26;
    --text-secondary: #6d727e;
    --background-color: #ffffff;
    --border-color: #e7e9ed;
    --hover-color: rgba(0, 0, 0, 0.05);
    --card-background: #ffffff;
    --unread-background: rgba(0, 212, 212, 0.05);
}

/* Tema oscuro */
[data-theme="black"] {
    --primary-color: #3F51B5;
    --text-color: #d8d5d1;
    --text-secondary: #95AAB2;
    --background-color: #1B2126;
    --border-color: #21313F;
    --hover-color: rgba(255, 255, 255, 0.05);
    --card-background: #142532;
    --unread-background: rgba(63, 81, 181, 0.1);
}

/* Tema Medusa */
[data-theme="medusa"] {
    --primary-color: #4b709c;
    --text-color: #ffffff;
    --text-secondary: #95AAB2;
    --background-color: #2C3F51;
    --border-color: #345382;
    --hover-color: rgba(255, 255, 255, 0.05);
    --card-background: #21313F;
    --unread-background: rgba(75, 112, 156, 0.1);
}

html, a {
/*font-family: 'Roboto', sans-serif!important;*/
/*font-family: 'Open Sans', sans-serif !important;*/
}


#profilePicture .clipImage ,.clipImage  {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    vertical-align: middle;
    /* middle*/
}
#profilePicture{
    margin-right: 16px;
}
#profilePicture img{
    margin-right: 5px;
}

.deleteCard-icon.material-icons{
    display: none;
}
/* Optimizado: usar clase en lugar de :hover para mejor performance */
.card.card-hovered .deleteCard-icon.material-icons {
    display: inline-block;
}
.deleteCard-icon:hover{
    cursor: pointer;
}

#profilePicture .dropdown-content {
    top: 100% !important;
  }

.dashboard {
    height: 100%;
    margin-top: 50px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.scuare_point{border:1px solid #D8DADC;}  
.userplan{

    color: #25eade;
    padding-right: 10px;
    font-size:14px;
    font-family: fa5-proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

span.free {
    border-radius: 20px;
    padding: 5px;
    color: #222222;
    border-radius: 20px;
    background-color: #ebca1a;
    
}

span.premium {
     background-color: #565962;
    border-radius: 20px;
    padding: 5px;
   /* border: 2px solid #25eade;*/
}
.userplan.premium {
    border: 2px solid gold;
    color: gold;
    font-family: fa5-proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/*Colores de  Horacio*/

.htext-1 {
    color: #4E5156;
    font-family: 'Roboto', sans-serif !important;
    font-weight: bold;
}

.htext-2 {
    color: #F75940;
    ffont-family: 'Roboto', sans-serif !important;
    font-weight: bold;
}

.paddingUD {
    padding: 15px 0px 15px 0px;
}

.margin-between {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.loaderView.center-align {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8);
}

.preloader-wrapper {
    margin-top: 25%;
}

.card {
    white-space: normal;
    border:1px solid transparent;
    -webkit-box-shadow: none;
    height: fit-content;
    box-shadow: none;
    /* Performance optimizations */
    contain: layout paint;
    will-change: auto;
}

/* GPU acceleration cuando se arrastra */
.card.sortable-ghost,
.card.sortable-drag {
    will-change: transform;
    transform: translateZ(0);
}

.dropdown-content { min-width: 150px;}

.hover_grey:hover{ 
	background-color:rgba(0,0,0,0.1);
}
.paddingS{padding:10px;}

.list {
    min-height: 300px; /* CLS FIX: Reserve space for list content */
    padding: 5px;
    display: inline-block;
    height: 100%;
    /* Performance: aislar cambios de layout */
    contain: layout style;
    transform: translateZ(0);
    will-change: transform; /* CLS FIX: Hint browser for optimization */
}


.mainDash.ui-sortable {
    background-color:#F6F8FA;
}

.mainDash.ui-sortable .list:hover {
     background: #e7e9eda8;
}
.placeHolder {
    background: red;
}

.droptrue {
    min-height: 200px; /* CLS FIX: Reserve space for cards */
    contain: layout style; /* CLS FIX: Isolate layout changes */
}

header,
main,
footer {
    padding-left: 300px;
}

#slide-out {
    top: 114px;
    overflow-y: scroll;
    min-width: 500px;
    /* padding-bottom: 150px; */
    height: calc(100% - 60px);
    height: -moz-calc(100%);
}

.slide-out-mitad {
    min-width: 50%!important;
}

.slide-out-completo {
    min-width: 100%!important;
}

.nopadding.user-view,
.user-view {
    padding: 0px !important;
}

.drag-target {
    right: 0;
}



.tabs.tabs-transparent .tab a.active {
    color: #ffffff;
    font-weight: 900;
     background-color: #2a3a4259;
    border-radius: 4px 4px 0px 0px;
    /* border-radius: 200px; */
}
.side-nav li.noline {}

.addCard.btn-floating i {
      color: #87939e!important;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.addCard.btn-floating {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*position: sticky;
    position: -webkit-sticky;
    bottom: 0;*/
}

.slide-out {
    display: none;
}

.loading:before {
    content: "..."
}

.addListContainer {
    display: inline-block;
    position: relative;
    top: -96%;
}
.addListContainer .btn-floating.addList.notSortable{
    margin-top: 1em;
}

.mainDash {
    height: calc(100% - 114px);
    min-height: 600px; /* CLS FIX: Reserve space for dashboard content */
    overflow-y: hidden;
    overflow-x: auto; /* Enable horizontal scroll */
    contain: layout; /* CLS FIX: Isolate layout changes */
    white-space: nowrap; /* Keep lists in a single row */
}

/* Horizontal scrollbar styles for .mainDash */
.mainDash::-webkit-scrollbar {
    height: 8px;
    display: block;
}

.mainDash::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.mainDash::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.mainDash::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.list.expanded .row{
    height: 100%;
    display: table;
}
.list ul {
    overflow-y: scroll;
    height: calc(100% - 25px);
    width: 250px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    position: initial;
}

ul::-webkit-scrollbar {
    width: 1em;
    display: none
}

ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    display: none
}

ul::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    display: none
}

html,
body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior-x: none;
}

.listTitle {
    width: 193px;
    overflow: hidden;
    cursor: all-scroll;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top !important;
}


/*****/

.hoverlink {
    color: #618092;
}

.hoverLink:hover {
    color: #4d758c;
    background-color: #d8dae0;
}

.hoverBtn:hover {
    background-color: #3DC7BE;
    color: fff!important;
}

.text-g {
    font-size: 24px !important;
}

.text-m {
    font-size: 20px !important;
}

.text-s {
    font-size: 16px !important;
}

.text-x {
    font-size: 14px !important;
}

.text-xx {
    font-size: 12px !important;
}

.text_black {
    color: #000;
}

.text_gray {
    color: #81838F;
}

.row {
    margin-bottom: 5px;
}

.bag {
    padding: 5px;
    border-radius: 4px;
}

.chips {
    min-height: 25px !important;
}

.hoverable:hover {
	
	box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
	/*-webkit-box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.25);
	  box-shadow:0px 5px 14px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);*/
}

.z-depth-1,
nav,
.card-panel,
.card,
.toast,
.btn,
.btn-large,
.btn-floating,
.dropdown-content,
.collapsible,
.side-nav {
	   box-shadow: 0 1px 3px 0 rgba(21,27,38,0.15);
	    -webkit-box-shadow:0 1px 3px 0 rgba(21,27,38,0.15);
   /* -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);*/
}

.emojionearea .emojionearea-editor:empty:before {
    content: ""!important;
    display: block;
    color: #ff4081;
}

.emojionearea.card-title.required.emojionearea-inline {
    background-color: transparent;
}

.emojionearea-button-open {
    /* background-color: #fff; */
}

.emojionearea,
.emojionearea.form-control {
    box-shadow: none!important;
    border-bottom: 1px solid #9e9e9e;
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;
}

.btn_orange {
    background-color: #FF7F50;
    color: #fff;
}

.btn_blue {background-color: #00d4d4;color: #fff;}
.btn_transparent{background-color:transparent; color:#81838F; webkit-box-shadow:none;box-shadow:none;}
.btn_transparent:hover{background-color: #fff!important;color:#00d4d4!important; font-weight:700; webkit-box-shadow:none;box-shadow:none;}



.btn-floating:hover {background-color: #0fd4cb;}

.red {
    background-color: #F75A41 !important;
}


/**COLOURS***/

.c_teal {
    color: #3DC7BE;
}

.material-icons {
    vertical-align: bottom !important;
}


/**/

.background_gray {
    background-color: #6d727e;
}

nav.noShadow {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select2-results__option {
    padding: 0.5rem;
}

.select2-results__options li {
    font-size: medium!important;
}

.card .card-content {
    padding: 15px!important;
}
.card .card-content pre{
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Roboto', sans-serif !important;
    margin: 0rem;
}

.card:hover {
    cursor: pointer;
}


textarea.materialize-textarea {
    padding: .1rem 0 0 0 !important;
}

.sidenav .input-field {
    margin-top: 0px !important;
}

[data-name="description"] {
    width: 100%;
    height: auto;
    background-color: transparent;
    min-height: auto!important;
}

.select2-search__field:focus {
    border-bottom: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.emojionearea,
.emojionearea.form-control {
    display: block;
    position: relative!important;
    width: 100%;
    height: auto;
    padding: 0;
    font-size: 14px;
    background-color: transparent;
    border: none;
    -moz-border-radius: 0px!important;
    -webkit-border-radius: 0px!important;
    border-radius: 0px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-box-shadow: inset 0 1px 1px rgba(36, 29, 29, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-transition: border-color .15s ease-in-out, -moz-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.focused {
    border-bottom: 1px solid #26a69a!important;
    -webkit-box-shadow: 0 1px 0 0 #26a69a!important;
    box-shadow: 0 1px 0 0 #26a69a!important;
}

#card_tags input {
    height: auto!important;
}

#cancel_card {
    padding: 0
}

.emojionearea-editor {
    color: black!important;
}

.emojionearea,
.emojionearea.form-control {
    display: block;
    position: relative!important;
    width: 100%;
    height: auto;
    padding: 0;
    font-size: 14px;
    background-color: transparent!important;
    border-bottom: 1px solid #9e9e9e!important;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-box-shadow: inset 0 1px 1px rgba(36, 29, 29, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-transition: border-color .15s ease-in-out, -moz-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.controlcolapse {
    cursor: pointer;     
}

.list.expanded .expand {
    display: none;
}

.list.collapsed .collapse {
    display: none;
}

.list.expanded .cardTitle .collapse {
    color: #cfcfcf;    
}

@media only screen and (min-width: 600px) {
    .list.expanded .cardTitle .collapse {
        width: 0px;
        height: 0px;
        overflow: hidden;
        transition:  width 200ms ease-out, height 200ms ease-out, opacity 100ms ease-out;
        opacity: 0; 
    }

    .list.expanded .cardTitle .toggleList:hover .collapse {
        width: 30px;
        height: 30px;
        overflow: visible;
        display: inline-block;
        opacity: 1;         
    }
}

.list.collapsed {
    width: 50px;  
    background-color: #e0e4eab8;
    border-radius: 5px; 
    margin: 1px;
    padding: 20px 0px 0px 5px; 
    transform: translate(0px,-24px);
    -webkit-transform: translate(0px,-24px);
    -webkit-transform-origin: center top;
    -webkit-backface-visibility: hidden;    
}

.list.collapsed .cardTitle .cardTitleControl {
    display: none !important;
}

.list.collapsed .cardTitle {
    transform: rotate(90deg) translate(20px, -15px);
    -webkit-transform: rotate(90deg) translate(20px, -15px);
    -webkit-transform-origin: center top;
    -webkit-backface-visibility: hidden;
}

.editList {
    /*display: none;*/
    vertical-align: top !important;
}

.list:hover .cardTitleControl.material-icons {
    display: inline-block
}

.emojionearea-button-open {
    background-color: transparent;
    background-image: url("/img/baseline_sentiment_satisfied_alt_black_18dp.png");
    background-position: center;
    background-size: cover;
}

.emojionearea-button-close {
    background-color: transparent;
    background-image: url("/img/baseline_close_black_18dp.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/***/

.draggablePoint {
    position: absolute;
    font-size: 12px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 8px;
    z-index: 10;
    top: 0;
    right: 0;
}

/* Ícono de drag - visible solo en móvil */
.draggablePoint .drag-icon {
    font-size: 18px;
    cursor: grab;
    display: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Mostrar ícono de drag en dispositivos móviles */
@media only screen and (max-width: 992px) {
    .draggablePoint .drag-icon {
        display: inline-block;
    }
    
    .draggablePoint:active .drag-icon {
        cursor: grabbing;
        opacity: 1;
    }
}

/* En desktop, ocultar el ícono de drag */
@media only screen and (min-width: 993px) {
    .draggablePoint .drag-icon {
        display: none;
    }
}

/* CLS FIX: Remove !important for GPU compositing - use higher specificity */
.droptrue .card.highlight_g,
.card.hoverable.highlight_g {
    /*color al hacer el drag en le elemento*/
    opacity: 1;
    border: none;
    padding:1px;
    background-color: #00BDD2;
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform, opacity;
    contain: layout style paint;
}


/*
.card:hover .draggablePoint {
    background-color: #0000000f;
}*/

.draggablePoint:hover {
    cursor: all-scroll;
}

.navbar-fixed {
    z-index: 999;
}

@media only screen and (min-width: 993px) {
    nav a.button-collapse {
        display: block;
    }
}


/** mEDIA QUERY*/

@media only screen and (max-width: 992px) {
    header,main,footer { padding-left: 0;}
    #slide-out {width: 100%!important; }
    #slide-out {min-width: 300px;}
}

.palette-color-picker-bubble {
    z-index: 9999;
}


/**input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {height:2rem !important;}*/

.card-responsible {
    display: inline-block;
}

.card-info {
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
    width: 100%;
    
}
.list .card-info{
    word-break: break-word;
}

#slide-out .emojionearea-editor::-webkit-scrollbar {
    display: none;
}

.cardTitle {
    position:relative;
}

.cardTitleControl.material-icons {
    position:absolute;
    top:2px;
    cursor:pointer;
}
#metadata{
    font-size: small;
    border-radius: 4px;
    padding: 8px;
    font-style: oblique;
    text-align: right;
    color: #48555F;
}

#slide-out #attachments .card .removeImage {
    display :none;
    position: absolute;
    top : 3px;
    right: 3px;
}
#slide-out #attachments .card:hover .removeImage {
    display: block
}
 .select2-selection__choice {
    border: none;
    color: #606060  !important;
    margin-top: 8px;
    padding: 3px 10px;
    background-color: #E4E4E4 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color:#606060!important;
    margin-right: 5px;
}
.palette-color-picker-button{
	border-radius:25px;
}
.openFileClass{
    width: 100%;
  max-width: 400px;
  color: #FFF;
  margin: 120px auto 0;
  text-align: center;
  
}
.card-tags{
    font-size: smaller;
    margin: 0;
}

.prefix-btn-input{
    position: absolute;
    font-size: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
    top: .5rem;
}
.sidenav-trigger{
   margin: 0 0 0 0 !important 
}

#notifications-side-nav {
    background-color: var(--background-color);
    color: var(--text-color);
    border-left: 1px solid var(--border-color);
}

#notifications-side-nav .notifications-header {
    padding: 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

#notifications-side-nav .notifications-header h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--text-color);
}

#notifications-side-nav .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#notifications-side-nav .header-actions a {
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#notifications-side-nav .header-actions a:hover {
    background-color: var(--hover-color);
    transform: scale(1.1);
}

#notifications-side-nav .notifications-actions {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

#notifications-side-nav .notifications-filters {
    padding: 0 16px;
    margin-bottom: 16px;
}

#notifications-side-nav .notifications-filters input {
    background-color: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    color: var(--text-color) !important;
    padding: 0 12px 0 40px !important;
}

#notifications-side-nav .notifications-filters input::placeholder {
    color: var(--text-secondary);
}

#notifications-side-nav .notifications-filters .material-icons {
    color: var(--text-secondary);
}

#notifications-side-nav .filter-chips {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

#notifications-side-nav .chip {
    background-color: var(--background-color);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

#notifications-side-nav .chip:hover {
    background-color: var(--hover-color);
}

#notifications-side-nav .chip.active {
    background-color: var(--primary-color);
    color: white;
    border-color: transparent;
}

#notifications-side-nav .notification-card {
    background-color: var(--card-background);
    border-radius: 12px;
    padding: 16px;
    margin: 8px 16px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

#notifications-side-nav .notification-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#notifications-side-nav .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#notifications-side-nav .notification-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

#notifications-side-nav .notification-icon {
    color: var(--primary-color);
    font-size: 20px;
}

#notifications-side-nav .notification-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}


#notifications-side-nav .status-change,
#notifications-side-nav .notification-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    color: var(--text-secondary);
}

#notifications-side-nav .status-change i,
#notifications-side-nav .notification-author i {
    font-size: 16px;
    opacity: 0.7;
}

#notifications-side-nav .notification-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

#notifications-side-nav .notification-actions a {
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    background-color: var(--background-color);
}

#notifications-side-nav .notification-actions a:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

#notifications-side-nav .notification-card.read {
    opacity: 0.7;
}

#notifications-side-nav .notificationItem.unread .notification-card {
    border-left: 4px solid var(--primary-color);
    background-color: var(--unread-background);
}

#notifications-side-nav .cardTitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.4;
}

#notifications-side-nav .cardStatusMove,
#notifications-side-nav .cardMadeBy {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 600px) {
    #notifications-side-nav .notification-header {
        flex-direction: column;
        gap: 8px;
    }
    
    #notifications-side-nav .notification-date {
        align-self: flex-start;
    }
    
    #notifications-side-nav .notification-actions {
        justify-content: space-around;
    }
}

#dashForm .tabs.tabs-transparent .tab a{
    color: #ffffff !important;
    font-weight: 900;
    background-color: #92afb9;
    border-radius: 4px 4px 0px 0px;
    /* border-radius: 200px; */
}
#dashForm .tabs.tabs-transparent .tab a.active{
    color: #ffffff;
    font-weight: 900;
     background-color: #2a3a4259;
    border-radius: 4px 4px 0px 0px;
    /* border-radius: 200px; */
}

.pcr-app .pcr-interaction input.pcr-result{
    height: auto;
    color: #75797e !important;
}

#ColorsModuleConfig .pcr-button{
    -webkit-box-shadow: 0px 0px 44px 3px rgba(0,0,0,0.37);
    -moz-box-shadow: 0px 0px 44px 3px rgba(0,0,0,0.37);
    box-shadow: 0px 0px 44px 3px rgba(0,0,0,0.37);
}

.mainCardContent .select2-selection.select2-selection--single, #search-side-nav .select2-selection.select2-selection--single{
    background: transparent;
}

.selectColorsDropDown .select2-search.select2-search--dropdown{
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 4px;
    padding-right: 4px;
    display: block;   
}
.selectColorsDropDown .select2-search__field{
    height: 2rem !important;
}
#membersList.collection .collection-item{
    min-height: 54px;
}
.superNano{
    font-size: 5px;
}

#dookTam{
    padding: 0 !important;
}

.imgIcon{
    filter: invert(36%) sepia(8%) saturate(1176%) hue-rotate(177deg) brightness(93%) contrast(81%);
}

.filter-fixed {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 30%;
    margin-left: 20%;
  }
.filter-fixed .closeFilter {
    position: absolute;
    top: 12px;
    font-size: 12px;
    height: 15px;
    display: block;
    user-select: none;
}

.comment-wrapper {
    display: flex;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #5623b617;
    border-radius: 10px;
}

.comment-avatar-container {
    flex-shrink: 0; /* Impide que la imagen cambie de tamaño */
    margin-right: 15px; /* Espacio entre la imagen y el contenido */
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover; /* Asegura que la imagen se ajuste bien al contenedor */
}

.comment-body {
    flex-grow: 1; /* Hace que el cuerpo del comentario ocupe el espacio restante */
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.author-name {
    font-weight: bold;
}

.comment-date {
    color: #aaa;
    font-size: 0.9rem;
    text-align: right;
}

.comment-text {
    font-size: 1rem;
    margin-top: 10px;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
}

.action-buttons span {
    color: rgb(157, 157, 157);

    cursor: pointer;
}

.comment-text img {
    max-width: 100%; /* La imagen no se puede exceder del tamaño de su contenedor */
    height: auto;    /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Asegura que la imagen no se recorte ni se deforme */
    border-radius: 5px; /* Si quieres un borde redondeado */
}

#save_card {
    padding: 5px 15px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    margin-right: 10px;
}

#save_card.btn_blue {
    background-color: #007bff;
    color: white;
}

#cancel_edit {
    color: black;
    background-color: transparent;
    margin-top: 10px;
    padding: 5px 15px;
    display: inline-flex;
    align-items: center;
    text-align: center;
}
/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
    .comment-wrapper {
        flex-direction: column; /* Apilar los elementos verticalmente en pantallas pequeñas */
    }

    .comment-body {
        width: 100%; /* Asegura que el contenido ocupe todo el ancho disponible */
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .comment-text {
        margin-top: 5px;
    }

    .action-buttons {
        justify-content: flex-start;
    }
}

.comment-text,
.comment-body {
    word-break: break-word;
    overflow-wrap: break-word;
}

.comment-text a {
    word-break: break-all;
}

/* Estilos para el widget de estadísticas Firebase */
.firebase-stats-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: transform 0.3s ease;
    transform: translateY(120%);
}

.firebase-stats-widget.show {
    transform: translateY(0);
}

/* Estilos para el tema oscuro */
[data-theme="black"] .firebase-stats-widget {
    background: var(--card-background);
    border-color: var(--border-color);
}

[data-theme="black"] .firebase-stats-header {
    border-bottom-color: var(--border-color);
}

[data-theme="black"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="black"] .stat-value {
    color: var(--text-color);
}

[data-theme="black"] .stats-section h6 {
    color: var(--text-color);
}

[data-theme="black"] #recommendations {
    color: var(--text-secondary);
}

[data-theme="black"] .stats-section {
    border-bottom-color: var(--border-color);
}

[data-theme="black"] .change-item {
    border-left-color: var(--border-color);
}

[data-theme="black"] .change-time {
    color: var(--text-secondary);
}

/* Estilos para SortableJS */
.sortable-ghost {
    opacity: 0.4;
    background: var(--hover-color);
}

.sortable-drag {
    opacity: 0.8;
    background: var(--card-background);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sortable-chosen {
    background: var(--hover-color);
}

.sortable-fallback {
    opacity: 0.8;
    background: var(--card-background);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Estilos mejorados para drag & drop en móvil */
.sortable-drag {
    opacity: 1 !important;
    background: var(--card-background);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    transform: rotate(3deg) scale(1.05);
    z-index: 9999 !important;
}

.sortable-chosen {
    background: var(--hover-color);
    opacity: 0.9;
}

.sortable-fallback {
    opacity: 1 !important;
    background: var(--card-background);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25) !important;
    transform: rotate(3deg) scale(1.05);
    cursor: grabbing !important;
    z-index: 9999 !important;
}

/* Estado durante el drag */
.card.is-dragging {
    opacity: 0.5;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Estilos para listas y tarjetas */
.list, .card {
    transition: all 0.3s ease;
}

/* Mejorar visibilidad del ghost durante drag entre listas */
.highlight_g {
    background-color: rgba(0, 189, 210, 0.15) !important;
    border: 2px dashed #00BDD2 !important;
    min-height: 80px;
    box-shadow: none !important;
}

/* Estilos para drag de listas (dashboard horizontal) */
.sortable-ghost-list {
    opacity: 0.3;
}

.sortable-chosen-list {
    opacity: 0.9;
}

.sortable-drag-list {
    opacity: 1 !important;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;
}

.sortable-fallback-list {
    opacity: 1 !important;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25) !important;
    cursor: grabbing !important;
    z-index: 9999 !important;
}

.list.is-dragging-list {
    opacity: 0.5;
}

.no-select {
    user-select: none;
}

/* Prevenir selección de texto durante drag en tarjetas y dashboards */
.card,
.card *:not(input):not(textarea):not([contenteditable="true"]),
.list .listTitle,
.nav-content .tabs .tab {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Permitir selección de texto en áreas editables dentro de las tarjetas */
.card input,
.card textarea,
.card [contenteditable="true"],
.card .card-description,
.card .comments-section {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.card-preview {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin: 8px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-preview-header {
    padding: 12px;
    border-radius: 4px 4px 0 0;
}

.card-preview .ticket-id {
    font-weight: bold;
    margin-right: 8px;
}

.card-preview .card-title {
    font-size: 14px;
}

.card-preview-body {
    padding: 12px;
    position: relative;
}

.card-preview .status-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.card-preview .status-row i {
    font-size: 18px;
    margin-right: 4px;
}

.card-preview .status-text {
    font-size: 13px;
    color: rgba(0,0,0,0.7);
}

.card-preview .progress {
    height: 4px;
    margin: 8px 0;
    background-color: #e0e0e0;
}

.card-preview .progress .determinate {
    background-color: #2196F3;
}

.card-preview .progress-text {
    font-size: 12px;
    color: rgba(0,0,0,0.6);
}

.card-preview .open-card {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.card-preview .open-card i {
    font-size: 18px;
}

/* Estilos para el configurador de compresión de imágenes */
.quality-profiles .quality-profile {
    margin: 5px;
    transition: all 0.3s ease;
}

.quality-profiles .quality-profile:not(.blue) {
    background-color: #f5f5f5 !important;
    color: #666 !important;
}

.quality-profiles .quality-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.quality-profiles .quality-profile.blue {
    background-color: #2196f3 !important;
    color: white !important;
}

#imageCompressionSettings .input-field label {
    font-size: 0.8rem;
}

#imageCompressionSettings .divider {
    height: 1px;
    background-color: #e0e0e0;
}

/* Estilos para indicador de perfil actual en settings */
#currentCompressionProfile {
    display: flex;
    align-items: center;
    height: 100%;
}

#currentCompressionProfile small {
    line-height: 1.2;
}

/* Estilos responsivos para el configurador */
@media (max-width: 600px) {
    .quality-profiles {
        flex-direction: column !important;
    }
    
    .quality-profiles .quality-profile {
        width: 100%;
        margin: 2px 0;
    }
    
    #imageCompressionSettings .col.s6 {
        width: 100% !important;
    }
}

/* Estilos para el configurador de T-Shirt Size */
.tshirt-profiles .tshirt-profile {
    margin: 5px;
    transition: all 0.3s ease;
    background-color: #f5f5f5 !important;
    color: #666 !important;
}

.tshirt-profiles .tshirt-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.tshirt-profiles .tshirt-profile.active {
    background-color: #4caf50 !important;
    color: white !important;
}

.size-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 10px;
    min-width: 35px;
    text-align: center;
}

.size-badge.xs {
    background-color: #4caf50;
    color: white;
}

.size-badge.s {
    background-color: #8bc34a;
    color: white;
}

.size-badge.m {
    background-color: #ff9800;
    color: white;
}

.size-badge.l {
    background-color: #ff5722;
    color: white;
}

.size-badge.xl {
    background-color: #f44336;
    color: white;
}

.size-badge.xxl {
    background-color: #d32f2f;
    color: white;
}

#tshirtSizeSettings .input-field label {
    font-size: 0.8rem;
}

#tshirtSizeSettings .divider {
    height: 1px;
    background-color: #e0e0e0;
}

#tshirtSizeSettings .collapsible-header {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

#tshirtSizeSettings .collapsible-body {
    padding: 1rem;
}

/* Estilos para indicador de perfil actual en settings */
#currentTShirtProfile {
    display: flex;
    align-items: center;
    height: 100%;
}

#currentTShirtProfile small {
    line-height: 1.2;
}

/* Animación para campos auto-rellenados */
.auto-filled {
    animation: autoFillGlow 2s ease-in-out;
    border-bottom: 2px solid #4caf50 !important;
    box-shadow: 0 1px 0 0 #4caf50 !important;
}

@keyframes autoFillGlow {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(76, 175, 80, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

/* Estilos responsivos para el modal de T-shirt Size */
@media (max-width: 600px) {
    .tshirt-profiles {
        flex-direction: column !important;
    }
    
    .tshirt-profiles .tshirt-profile {
        width: 100%;
        margin: 2px 0;
    }
    
    #tshirtSizeSettings .col.s6 {
        width: 100% !important;
    }
    
    .size-badge {
        margin-right: 5px;
        min-width: 30px;
    }
}

/* Estilos específicos para notificaciones de menciones */
.notificationItem.mention .mention-content {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 12px;
    margin: 8px 0;
    border-radius: 6px;
}

/* Texto principal del comentario */
.notificationItem.mention .mention-text {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(33, 150, 243, 0.2);
}

.notificationItem.mention .mention-text p {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #2c3e50;
}

.notificationItem.mention .mention-text strong {
    font-weight: 600;
    color: #1976d2;
}

.notificationItem.mention .mention-text em {
    font-style: italic;
    color: #424242;
}

.notificationItem.mention .mention-text a {
    color: #2196f3;
    text-decoration: underline;
}

.notificationItem.mention .mention-text ul,
.notificationItem.mention .mention-text ol {
    margin: 8px 0;
    padding-left: 20px;
}

.notificationItem.mention .mention-text blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 3px solid #2196f3;
    color: #666;
    font-style: italic;
}

/* Información contextual secundaria */
.notificationItem.mention .mention-context {
    margin-top: 8px;
}

.notificationItem.mention .context-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notificationItem.mention .context-tag {
    display: inline-block;
    background-color: rgba(33, 150, 243, 0.1);
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.notificationItem.mention .context-tag.ticket {
    background-color: #2196f3;
    color: white;
    border-color: #2196f3;
    font-weight: 600;
}

/* Ajustes para el ícono de la notificación de mención */
.notificationItem.mention .notification-icon {
    color: #2196f3 !important;
}

/* Tema negro para menciones */
[data-theme="black"] .notificationItem.mention .mention-content {
    background-color: #1a237e;
    border-left-color: #3f51b5;
}

[data-theme="black"] .notificationItem.mention .mention-text {
    border-bottom-color: rgba(63, 81, 181, 0.3);
}

[data-theme="black"] .notificationItem.mention .mention-text p {
    color: #e8eaf6;
}

[data-theme="black"] .notificationItem.mention .mention-text strong {
    color: #9fa8da;
}

[data-theme="black"] .notificationItem.mention .mention-text em {
    color: #b0bec5;
}

[data-theme="black"] .notificationItem.mention .mention-text a {
    color: #5c6bc0;
}

[data-theme="black"] .notificationItem.mention .mention-text blockquote {
    border-left-color: #3f51b5;
    color: #9e9e9e;
}

[data-theme="black"] .notificationItem.mention .context-tag {
    background-color: rgba(63, 81, 181, 0.2);
    color: #9fa8da;
    border-color: rgba(63, 81, 181, 0.4);
}

[data-theme="black"] .notificationItem.mention .context-tag.ticket {
    background-color: #3f51b5;
    color: white;
    border-color: #3f51b5;
}

[data-theme="black"] .notificationItem.mention .notification-icon {
    color: #5c6bc0 !important;
}

/* Tema medusa para menciones */
[data-theme="medusa"] .notificationItem.mention .mention-content {
    background-color: #2e2d47;
    border-left-color: #6366f1;
}

[data-theme="medusa"] .notificationItem.mention .mention-text {
    border-bottom-color: rgba(99, 102, 241, 0.3);
}

[data-theme="medusa"] .notificationItem.mention .mention-text p {
    color: #e2e8f0;
}

[data-theme="medusa"] .notificationItem.mention .mention-text strong {
    color: #c4b5fd;
}

[data-theme="medusa"] .notificationItem.mention .mention-text em {
    color: #94a3b8;
}

[data-theme="medusa"] .notificationItem.mention .mention-text a {
    color: #8b5cf6;
}

[data-theme="medusa"] .notificationItem.mention .mention-text blockquote {
    border-left-color: #6366f1;
    color: #9ca3af;
}

[data-theme="medusa"] .notificationItem.mention .context-tag {
    background-color: rgba(99, 102, 241, 0.2);
    color: #c4b5fd;
    border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="medusa"] .notificationItem.mention .context-tag.ticket {
    background-color: #6366f1;
    color: white;
    border-color: #6366f1;
}

[data-theme="medusa"] .notificationItem.mention .notification-icon {
    color: #8b5cf6 !important;
}

.mention {
    color: #ffffff !important;
}

#githubActivityModal .material-icons {
    vertical-align: middle !important;
}

#daily-planner-dialog .material-icons {
    vertical-align: middle !important;
}

/* Estilos para Select2 en el modal de crear branch */
#createBranchModal .select2-container {
    width: 100% !important;
    margin-top: 5px;
}

#createBranchModal .select2-container--default .select2-selection--single {
    height: 38px;
    line-height: 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--card-background);
    color: var(--text-color);
}

#createBranchModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color);
    padding-left: 12px;
    padding-right: 20px;
}

#createBranchModal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-secondary);
}

#createBranchModal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 10px;
}

#createBranchModal .select2-dropdown {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 9999; /* Asegurar que aparezca sobre el modal */
}

#createBranchModal .select2-results__option {
    color: var(--text-color);
    background-color: var(--card-background);
    padding: 8px 12px;
}

#createBranchModal .select2-results__option--highlighted {
    background-color: var(--hover-color);
    color: var(--text-color);
}

#createBranchModal .select2-results__option--selected {
    background-color: var(--primary-color);
    color: white;
}

#createBranchModal .select2-search__field {
    background-color: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
}

#createBranchModal .select2-search__field:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Estilos para tema oscuro en el modal */
[data-theme="black"] #createBranchModal .select2-container--default .select2-selection--single,
[data-theme="medusa"] #createBranchModal .select2-container--default .select2-selection--single {
    border-color: var(--border-color);
}

[data-theme="black"] #createBranchModal .select2-dropdown,
[data-theme="medusa"] #createBranchModal .select2-dropdown {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.comment-wrapper li{
    line-height: 1.42;
}
.comment-wrapper .ql-align-center{
    text-align: center;
}

/* ============================================
   Estilos para Dropdown de Acciones de Tarjeta
   ============================================ */

/* Dropdown de acciones en el sidebar */
#cardActionsDropdown {
    min-width: 220px !important;
    max-width: 280px;
}

/* Items del dropdown */
#cardActionsDropdown li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-color);
    transition: background-color 0.2s ease;
}

#cardActionsDropdown li > a:hover {
    background-color: var(--hover-color);
}

/* Iconos en el dropdown */
#cardActionsDropdown li > a i.material-icons {
    font-size: 20px;
    color: var(--text-secondary);
    margin: 0;
}

/* Divider en el dropdown */
#cardActionsDropdown li.divider {
    background-color: var(--border-color);
    margin: 4px 0;
}

/* Asegurar que el dropdown sea visible sobre el sidenav */
#cardActionsDropdown {
    z-index: 1100 !important;
}

/* Botón trigger del dropdown */
.dropdown-trigger[data-target="cardActionsDropdown"] {
    position: relative;
}

/* Ajustes para temas oscuros */
[data-theme="black"] #cardActionsDropdown,
[data-theme="medusa"] #cardActionsDropdown {
    background-color: var(--card-background);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="black"] #cardActionsDropdown li > a:hover,
[data-theme="medusa"] #cardActionsDropdown li > a:hover {
    background-color: var(--hover-color);
}

/* Responsive: En pantallas pequeñas, hacer los botones más compactos */
@media only screen and (max-width: 600px) {
    #cardActionsDropdown {
        min-width: 200px !important;
    }
    
    #cardActionsDropdown li > a {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    #cardActionsDropdown li > a i.material-icons {
        font-size: 18px;
    }
}

/* ============================================
   Estilos para Dashboard Tabs Sortable (Drag & Drop)
   ============================================ */

/* Indicar que las pestañas son arrastrables */
.nav-content .tabs .tab {
    cursor: move;
    cursor: grab;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Cursor al estar arrastrando */
.nav-content .tabs .tab:active {
    cursor: grabbing;
}

/* Estado ghost - elemento fantasma que sigue al cursor */
.dashboard-tab-ghost {
    opacity: 0.4;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Estado chosen - elemento seleccionado para arrastrar */
.dashboard-tab-chosen {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Estado drag - elemento mientras se arrastra */
.dashboard-tab-drag {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: rotate(2deg);
}

/* Excluir el botón de nuevo dashboard del cursor de arrastrar */
.nav-content .tabs .newDashboardButton {
    cursor: pointer;
}

/* Mejorar la visualización durante el arrastre */
.nav-content .tabs .tab a {
    transition: none;
}

/* Feedback visual al hacer hover sobre una pestaña */
.nav-content .tabs .tab:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Tema oscuro - ajustes específicos */
[data-theme="black"] .dashboard-tab-ghost,
[data-theme="medusa"] .dashboard-tab-ghost {
    opacity: 0.3;
    background-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="black"] .dashboard-tab-chosen,
[data-theme="medusa"] .dashboard-tab-chosen {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="black"] .dashboard-tab-drag,
[data-theme="medusa"] .dashboard-tab-drag {
    background-color: rgba(255, 255, 255, 0.15) !important;
}