.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: smaller;
    color: #000000cf;
    font-style: italic;
}
.truncate-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #000000cf;
}
 .modal-dialog.large {
    width: 80% !important;
    max-width: unset;
  }
  .modal-dialog.mid-large {
    width: 50% !important;
    max-width: unset;
  }
  @media (max-width:720px){
     #logito {
      background-image: url("../uploads/logoise.jpg") !important;
    }
    
    #usuariodt{
         display: none !important;
         
    }
     
    .modal-dialog.large {
        width: 100% !important;
        max-width: unset;
      }
      .modal-dialog.mid-large {
        width: 100% !important;
        max-width: unset;
      }  
      
      .brand-image{
          display: -none !important;
      }
  
  }
  #viewer_modal .btn-close {
    position: absolute;
    z-index: 999999;
    /*right: -4.5em;*/
    background: unset;
    color: white;
    border: unset;
    font-size: 27px;
    top: 0;
}
#viewer_modal .modal-dialog {
        width: 80%;
    max-width: unset;
    height: calc(90%);
    max-height: unset;
}
  #viewer_modal .modal-content {
       background: black;
    border: unset;
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #viewer_modal img,#viewer_modal video{
    max-height: calc(100%);
    max-width: calc(100%);
  }
  

.bodyLogin {
  background-image: url("../../dist/img/fondologin.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.logoPerfil {
    padding: 40px
}

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}


.imagen:hover{
border-radius:80%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 3px 3px #23C2CF;
-webkit-box-shadow: 0px 0px 3px 3px #23C2CF;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

.imagenview:hover{
border-radius:80%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 3px 3px #B5C1C2;
-webkit-box-shadow: 0px 0px 3px 3px #B5C1C2;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}


.boton{
text-align:center;
border-radius: 3px;
background:rgb(102, 181, 255);
/*añadimos sombras inferiores*/
-moz-box-shadow: 0px 5px 0px 0px rgb(0, 105, 202);
-webkit-box-shadow: 0px 5px 0px 0px rgb(0, 105, 202);
box-shadow: 0px 5px 0px 0px rgb(0, 105, 202);

display:inline-block;
margin:0px 10px 10px 0px;
padding:2px;
text-decoration:none;/*anulamos subrayado del texto dentro del enlace*/
/*añadimos un efecto de transición para que el efecto sea progresivo*/
transition: all 0.10s ease-in-out;
-webkit-transition: all 0.10s ease-in-out;
/*IMPORTANTE, si no posicionamos de manera relativa el elemento, al hacer click se moverá entero, sin realizar el engaño que buscamos*/
position:relative;

} 

.boton:active{
/*Gracias a que el elemento está en posición relativa, podemos bajarlo 4 px sin alterar el HTML*/
top:4px;
/*bajamos el tamaño de la sombra para conseguir el efecto de profundidad*/
-moz-box-shadow: 0px 1px 0px 0px rgb(0, 85, 102);
-webkit-box-shadow: 0px 1px 0px 0px rgb(0, 8, 102);
box-shadow: 0px 1px 0px 0px rgb(0, 85, 102);
}
.boton:hover{
cursor: pointer;
background-color: rgb(112, 113, 152);
}


.checkbox-xl .custom-control-label::before, 
.checkbox-xl .custom-control-label::after {
  top: 1.2rem;
  width: 1.85rem;
  height: 1.85rem;
}

.linkperfil { 
    color: white; 
} 
.linkperfil:hover {
    color: #EAD221; 
} 

.circulo {
border-radius: 50%;  
display: inline-block;
width: 32px;
height: 32px;
}

/* div.demo-content{box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.20);color:#8d9090;} */
#notification-header {
	background: #fff;
    padding: 6px;
    text-align: right;
    /* margin-top: 4px; */
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 10px;
}
button#notification-icon {
	background: transparent;
	border: 0;
	position:relative;
	cursor:pointer;
}
#notification-count{
	position: absolute;
    left: -2px;
    top: -8px;
    font-size: 14px;
    color: #de5050;
    font-weight: bold;
}
#form-header {
	font-size:1.5em;
}
#frmNotification {
	padding:20px 30px;
}
.form-row{
	padding-bottom:20px;
}
#btn-send {
	background: #258bdc;
	color: #FFF;
	padding: 10px 40px;
	border: 0px;
}
div.demo-content input[type='text'],textarea{
	width: 100%;
	padding: 10px 5px;
}
#notification-latest {
	color: #555;
  position: absolute;
  right: 0px;
  background: #f5f5f5;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.20);
  /* max-width: 250px; */
  text-align: left;
  font-size: 12px;
}
.notification-item {
	padding:10px;
	border-bottom: #ce2078 2px solid;
	cursor:pointer;
}
.notification-subject {		
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-comment {		
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style:italic;
}



/*POST*/

.inline-btn{
   background-color: purple;
   color:white;
}

.inline-btn:hover {
   background-color: gray;
   color:black;
}


.account-form form{
   background: var(--white);
   box-shadow: var(--box-shadow);
   box-shadow: var(--box-shadow);
   padding: 2rem;
   border: var(--border);
   border-radius: .5rem;
   max-width: 50rem;
   margin: 0 auto;
}

.account-form form h3{
   padding-bottom: .5rem;
   font-size: 2rem;
   color: var(--black);
   text-transform: capitalize;
   text-align: center;
}

.account-form form p{
   padding-top: 1rem;
   font-size: 1rem;
   color: var(--light-color);
}

.account-form form p span{
   color: var(--red);
}

.account-form form .box{
   width: 100%;
   border-radius: .5rem;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
   margin: 1rem 0;
}
.account-form form .select{
   width: 100%;
   border-radius: .5rem;
   padding: .5rem;
   font-size: 1.2rem;
   color: var(--black);
   background-color: var(--light-bg);
}

.account-form form textarea{
   height: 8rem;
   resize: none;
}

.account-form form .image{
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-top: .5rem;
}

.account-form form .link{
   padding: 1rem 0;
   text-align: center;
   font-size: 1.8rem;
   color: var(--light-color);
}

.account-form form .link a{
   color: var(--red);
}

.account-form form .link a:hover{
   text-decoration: underline;
}


.all-posts .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 20rem);
   gap: 0rem;
   align-items: flex-start;
   justify-content: center;
}

.all-posts .box-container .box{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   padding: 1rem;

}

.all-posts .box-container .box .image{
   width: 100%;
   height: 15rem;
   border-radius: .5rem;
   object-fit: cover;
   margin-bottom: 1.5rem;
}

.all-posts .box-container .box .title{
   font-size: 1.2rem;
   color: purple;
   text-overflow: ellipsis;
   overflow-x: hidden;
}

.all-posts .box-container .box .total-reviews{
   font-size: 1.2rem;


}

.all-posts .box-container .box .total-reviews i{
   color: var(--orange);
}

.all-posts .box-container .box .total-reviews span{
   color: var(--light-color);
}

.view-post .heading{
   display: flex;
   justify-content: space-between;
}

.view-post h3{
   font-size: 1.2rem;
   
}

.view-post .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 2rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border: var(--border);
   background-color: var(--white);
   padding: 1rem;
   border-radius: .5rem;
}

.view-post .row .col{
   flex: 1 1 15rem;
}

.view-post .row .col .image{
   width: 100%;
   height: 15rem;
   border-radius: .5rem;
   object-fit: cover;
   margin-bottom: 1rem;
}

.view-post .row .col .title{
   font-size: 1rem;
   color: var(--black);
}

.view-post .row .col .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   align-items: center;
   justify-content: space-evenly;
}

.view-post .row .col .flex .total-reviews{
   text-align: center;
}

.view-post .row .col .flex .total-reviews h3{
   font-size: 1rem;
   color: var(--black);
}

.view-post .row .col .flex .total-reviews i{
   font-size: 2rem;
}

.view-post .row .col .flex .total-reviews p{
   font-size: 1rem;
   color: var(--light-color);
   padding-top: 0rem;
}


.view-post .row .col .flex .total-ratings{
   font-size: 1.2rem;
}

.view-post .row .col .flex .total-ratings p{
   padding: 0rem ;
}

.view-post .row .col .flex .total-ratings p i{
   color: var(--orange);
}

.view-post .row .col .flex .total-ratings p span{
   color: var(--light-color);
}

.inline-btn,
.inline-delete-btn,
.inline-option-btn{
   display: flex;
   
}


.reviews-container .heading{
   display: flex;
   justify-content: space-between;
}

.reviews-container h3{
   font-size: 1.2rem;
}


.reviews-container .box-container{
   display: grid;
   row-gap: 1rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border: var(--border);
   border-radius: .5rem;
   padding: 2rem;
}


.reviews-container .box-container .box{
   border-bottom: var(--border);
   overflow-x: hidden;
   padding-bottom: 1.5rem;
   position: relative;
}

.reviews-container .box-container .box .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 0rem;
}

.reviews-container .box-container .box .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.reviews-container .box-container .box .user h3{
   font-size: 1rem;
   height: 4rem;
   width: 4rem;
   border-radius: 50%;
   background-color: var(--light-bg);
   text-transform: uppercase;
   text-align: center;
   line-height: 3.5rem;   
}

.reviews-container .box-container .box .user p{
   font-size: 1rem;
   color: var(--black);
   text-overflow: ellipsis;
   overflow-x: hidden;
   
}

.reviews-container .box-container .box .user span{
   color: var(--light-color);
   font-size: 1rem;
}

.reviews-container .box-container .box .ratings{
   display: flex;
   position: absolute;
   top: 0; right: 0;
   z-index: 10;
}

.reviews-container .box-container .box .ratings p{
   border-radius: .5rem;
   color: var(--white);
   padding: .5rem 1rem;
}

.reviews-container .box-container .box .ratings p span{
   font-size: 1.2rem;
}

.reviews-container .box-container .box .ratings p i{
   font-size: 1.2rem;
}

.reviews-container .box-container .box .title{
   font-size: 1.5rem;
   color: var(--black);
   padding: .5rem 0;
}

.reviews-container .box-container .box .description{
   font-size: 1rem;
   white-space: pre-line;
   color: var(--light-color);
   line-height: 1.5;
}