.bg-gray-light{background-color: #FBFBFB;}
button:focus{outline: none;}
/* NEW CLASSES */
@media (min-width: 1024px){
  .lg\:w-1\/7 {
    width: 14.28%!important;
  }
}
html{font-size: .9rem!important;}

@media (max-width: 1600px){
  html{font-size: .8rem;}
}
.max-h-96{ max-height: 24rem;}
button{transition:.2s all ease-in-out}
.p-1\/10::after{content:"";display:block;padding-top:100%;}
.bg-gray-menu{background-color:#FBFBFB}
.shadow-custom { box-shadow: 0 0 30px 5px rgb(0 0 0 / 5%) } 
.shadow-custom-2 { box-shadow: 2px 9px 10px -2px rgb(0 0 0 / 10%) }
.create_post .datetimepicker{left:-115px!important}
.z-100{z-index: 100;}
.z-999{z-index: 999;}
.bg-gradient-blue { background: linear-gradient(to right,#5884dd 0%, #38c1d4 100%); }
.hover\:bg-gradient-blue:hover { background: linear-gradient(to right,#38c1d4 0%, #5884dd 100%); transition: all .8s ease; }

.bg-gray-200 { background-color: #fbfbfb; }
.bg-gray-300 { background-color: #f2f2f2; }
.bg-purple-100 { background-color: #edeffb; }
.bg-purple-200 { background-color: #8f7bff; }

.hover\:bg-purple-200:hover { background-color: #8f7bff; }

.hover\:mibot-purple:hover { background-color: #edeffb; }
.hover\:mibot-violeta:hover { background-color: #f2f2fe; }
.hover\:mibot-blue:hover { background-color: #f2f9ff; }
.hover\:mibot-yellow:hover { background-color: #fffbf2; }
.hover\:mibot-green:hover { background-color: #f5fcf4; }
.mibot-purple{background-color: #edeffb;}
.mibot-green{background-color: #f5fcf4}
.mibot-blue{background-color: #f2f9ff}
.mibot-violeta{background-color: #f2f2fe}
.bg-violeta-cutom { background-color: #f2f2fe; }
.bg-blue-custom { background-color: #f2f9ff; }
.bg-yellow-custom { background-color: #fffbf2; }
.bg-green-custom { background-color: #f5fcf4; }

.text-purple-200 { color: #8f7bff; }
.hover\:text-purple-200:hover { color: #8f7bff; }
.text-purple-300 { color: #31357c; }
.hover\:text-purple-300:hover { color: #31357c; }

.border-purple-200 { border-color: #8f7bff; }

.shadow-custom { box-shadow: 0 0 30px 5px rgb(0 0 0 / 5%) }
.shadow-custom-2 { box-shadow: 2px 9px 10px -2px rgb(0 0 0 / 10%) }
.hover\:shadow-custom:hover { box-shadow: 0 0 30px 5px rgb(0 0 0 / 5%) }
.hover\:grayscale-0:hover { --tw-grayscale: grayscale(0); }
.slide-left-enter-active,.slide-left-leave-active { transition: all .3s ease;}
.slide-left-enter, .slide-left-leave-to{ transform: translateX(100%);opacity: 1;}
.fade-enter-active,.fade-leave-active { transition: all .3s ease;}
.fade-enter, .fade-leave-to{ opacity: 0;}

/*
  Enter and leave animations can use different
  durations and timing functions.
*/
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
/* FIN */

/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.filter-white {filter:grayscale(100) brightness(0) invert(1); }

.config.sticky {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Login */
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.bg-gradient{ background: linear-gradient(to right,var(--main-color) 0%, var(--main-color-light) 100%); }

.gradient_login{
	background: linear-gradient(180deg, rgba(205, 219, 45, 0.1) 0%, #CDDB2D 100%);
}
.shadow_login{
    box-shadow: 0px 0px 138px -62px rgb(142 123 255);
	}
/* LISTADO DE POSTS */
.toastify{
	z-index: 9999!important;
}
.imageList-enter {
	transform: scale(0.5) translatey(-80px);
	opacity:0;
}

.imageList-leave-to{
	transform: translatey(30px);
	opacity:0;
}

.imageList-leave-active {
	position: absolute;
	z-index:-1;
}
.imageListItem {
	transition: all .35s ease-in-out;
}
.content-input{
	position: relative;
	margin-bottom: 30px;
	padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar
        el elemento <i> en este espacio*/
	display: block;
}

/* Estas reglas se aplicarán a todos las elementos i
después de cualquier input*/
.content-input input + i{
       background: #f0f0f0;
       border:2px solid rgba(0,0,0,0.2);
       position: absolute;
       left: 0;
       top: 0;
}

/* Estas reglas se aplicarán a todos los i despues
de un input de tipo checkbox*/
.content-input input[type=checkbox ] + i{
	width: 52px;
	height: 30px;
	border-radius: 15px;
	margin-top: 4px;
}
.content-input input[type=checkbox] + i:after{
	content: 'ON';
	position: absolute;
	font-size: 10px;
	color: rgba(255,255,255,0.6);
	top: 6px;
	left: 4px;
	opacity: 0 /* Ocultamos este elemento */;
	transition: all 0.25s ease 0.25s;
}

/* Cuando esté checkeado cambiamos la opacidad a 1 y lo mostramos */
.content-input input[type=checkbox]:checked + i:after{
 opacity: 1;
}

.content-input{
	position: relative;
	margin-bottom: 30px;
	padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar
        el elemento <i> en este espacio*/
	display: block;
}
.content-input input[type=checkbox] + i:before{
	transition: .3s all;
	content: ''; /* No hay contenido */
	width: 26px;
	height: 26px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	-webkit-box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
}
.grayscale{filter: grayscale(1)}
.content-input input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.content-input input{
	visibility: hidden;
	position: absolute;
	right: 0;
}
.content-input input[type=checkbox]:checked + i:before{
	left: 22px;
	-webkit-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 0 -3px 0 rgba(0,0,0,0.2);
}

.content-input input[type=checkbox]:checked + i{
 background: #2AC176;
}
body{scrollbar-width: none;    overscroll-behavior-y: contain;}
.bg-lime{background-color: #CDDB2D!important;}
.text-lime{color:#CDDB2D;}
.client-opts{max-height: 0;visibility: hidden;opacity: .0}
.client-opts.visible-opts{max-height: 220px!important;opacity: 1!important;visibility: visible;}
.gslider video {height: 100vh!important;}
.overflow-auto,.overflow-scroll,.overflow-y-auto{-ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */}
::-webkit-scrollbar { display: none; }
table input:focus{outline-width: 0;}
.fill-green{filter: invert(49%) sepia(35%) saturate(2878%) hue-rotate(83deg) brightness(110%) contrast(97%);}
.tab-active {background-color: #cbd5e0;}
.min-w-xs {min-width: 18rem;}
.min-w-sm {min-width: 24rem;}
.min-w-md {min-width: 28rem;}
.min-w-lg {min-width: 32rem;}
.p-1\/10::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.p-1\/15::after {
    content: "";
    display: block;
    padding-top: 150%;
}

.p-1\/20::after {
    content: "";
    display: block;
    padding-top: 200%;
}

.p-1\/7::after {
    content: "";
    display: block;
    padding-top: 70%;
}

.p-1\/6::after {
    content: "";
    display: block;
    padding-top: 60%;
}

.p-1\/5::after {
    content: "";
    display: block;
    padding-top: 50%;
}

.p-1\/4::after {
    content: "";
    display: block;
    padding-top: 40%;
}

.p-1\/3::after {
    content: "";
    display: block;
    padding-top: 30%;
}

/* #customdropzone{display: flex;justify-content: center;} */
#customdropzone .dz-message{width:100%;}
.gradientwhite{
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
}
.filter-gray {
    filter: grayscale(.8);
    opacity: .4
}
.w-full-2{width:calc(100% - 11rem);}
.day_block{min-height: 12rem;}
/* .w-full-post{width:calc(100% - 20px);} */
.w-128 {
    width: 32rem;
}
.w-256 {
    width: 64rem;
}
::-webkit-scrollbar {
    display: none;
}
.w-1\/7 {width: 14.28%}
.text-instagram{color:#DD2A7B!important}
.text-facebook{color:#3b5998!important}
.text-twitter{color:#00aced!important}
.text-linkedin{color:#4fa6c7!important}
.text-tiktok{color:#000000!important}
.text-pinterest{color:#c00!important}
.bg-instagram{background-color:#DD2A7B!important}
.bg-facebook{background-color: #3b5998!important}
.bg-twitter{background-color: #00aced!important}
.bg-linkedin{background-color: #4fa6c7!important}
.bg-tiktok{background-color: #000000!important}
.bg-pinterest{background-color: #c00!important}
.border-instagram{border-color:#DD2A7B!important}
.border-facebook{border-color: #3b5998!important}
.border-twitter{border-color: #00aced!important}
.border-linkedin{border-color: #4fa6c7!important}
.border-tiktok{border-color: #000000!important}
.border-pinterest{border-color: #c00!important}
.img::after{content: "";display: block;padding-top: 80%;}
.transition{transition: 0.2s all}
.center-absolute{left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}
div.img-gallery:hover .hidden{display: block}
li.img-gallery:hover .hidden{display: block}
#modalCreatePost .selectRed{text-align-last: center;}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: .75;
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }
    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}
.fadeInDown {
    animation: fadeInDown .4s;
}
.fadeIn {
    animation: fadeIn .4s;
}
.publishedClass{color: #38a169;border-color: #38a169;background-color: #f0fff4;}

/* notas */
.notas{
  overflow:hidden;
  padding:3em;
}
.notas li .content{
  text-decoration:none;
  background:#ffc;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
.notas li{
  margin:1em;
  float:left;
}
.notas li h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
/* .notas li p{
  font-family:"Reenie Beanie",arial,sans-serif;
} */
.notas li .content{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
.notas li:nth-child(even) .content{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
.notas li:nth-child(3n) .content{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
.notas li:nth-child(5n) .content{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
.notas li .content:hover,ul li .content:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

.tooltip {
  display: block !important;
  z-index: 10000;
}
.preview .tooltip .tooltip-inner {
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
  transition: all 3s;
}
.tooltip .tooltip-inner {
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
  transition: all 3s;
}

.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
}

.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="right"] {
  margin-left: 5px;
}

.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.tooltip[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}
.form_creaCliente-checkbox{width: 20px;height: 20px}
.masonry { /* Masonry container */
  margin:0 2rem;
  column-count: 5;
  column-gap: 1em;
}

.masonry-brick { /* Masonry bricks or child elements */
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}
@media screen and ( max-width:1200px ){
    .masonry { column-count: 4;}
}
@media screen and ( max-width:992px ){
    .masonry { column-count: 2;}
}
@media screen and ( max-width:768px ){
    .masonry { column-count: 1;}
}

.masonry-wrapper {

  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  columns: 1;
  column-gap: 10px;
}
.masonry-item {
  display: inline-block;
  vertical-align: top;
  width:100%;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1024px) {
  .p-1\/10::after {
    padding-top: 70%!important;
}
  .absolute-center{left:50%;transform: translate(-50%,-50%);top:50%;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {  .masonry {
    columns: 2;
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 3;
  }
}
@media only screen and (min-width: 1200px) {
  .masonry {
    columns: 4;
  }
}
.masonry-item, .masonry-content {
  border-radius: 4px;
  overflow: hidden;
}
.masonry-item {
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .05));
  transition: filter .25s ease-in-out;
}
.masonry-item:hover {
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .05));
}
.tooltip .tooltip-arrow{
  border-color:#f6e15e;
}
.tooltip .tooltip-inner {
  background: #f6e15e;
  color: #333 !important;
  padding:10px 20px !important;
  font-size:12px;
}