/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Aspect ratio */
.ar-1-1 .card,
.ar-2-1 .card,
.ar-1-2 .card,
.ar-3-2 .card,
.ar-2-3 .card {
    margin: 0;
}
.ar-1-1 {
    position: relative;
    width: 100%;
    /* desired width */
    overflow: hidden;
}
.ar-1-1:before {
    content: "";
    display: block;
    padding-top: 100%;
    /* initial ratio of 1:1*/
}
.ar-1-1 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.ar-2-1 {
    position: relative;
    width: 100%;
    /* desired width */
    overflow: hidden;
}
.ar-2-1:before {
    content: "";
    display: block;
    padding-top: calc(50% -  5px);
    /* initial ratio of 1:1*/
}
.ar-2-1 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.ar-1-2 {
    position: relative;
    width: 100%;
    /* desired width */
    overflow: hidden;
}
.ar-1-2:before {
    content: "";
    display: block;
    padding-top: calc(150% -  5px);
    /* initial ratio of 1:1*/
}
.ar-1-2 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.ar-3-2 {
    position: relative;
    width: 100%;
    /* desired width */
    overflow: hidden;
}
.ar-3-2:before {
    content: "";
    display: block;
    padding-top: calc(75% -  5px);
    /* initial ratio of 1:1*/
}
.ar-3-2 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.ar-2-3 {
    position: relative;
    width: 100%;
    /* desired width */
    overflow: hidden;
}
.ar-2-3:before {
    content: "";
    display: block;
    padding-top: calc(125% -  5px);
    /* initial ratio of 1:1*/
}
.ar-2-3 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Flip Cards CSS */
.card-flip {
  transform-style: preserve-3d;
  transition: all 0.5s ease-out;
}

.card-flip div {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.card-flip .card-back {
  display: none;
  transform: rotateY(-180deg);
}

.card-container:hover .card-flip {
  transform: rotateY(180deg);
}

.card-container:hover .card-front{
    display: none;
}
.card-container:hover .card-back{
    display: block;
}

.spinner_page{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    opacity: 0.8;
    z-index: 100000;
    cursor: progress;
}
.spinner_contenet{
    width: 120px;
    margin: 0 auto;
    background-color: #000;
    padding: 10px;
    color: #fff;
    margin-top: 20%;
}


/*/////// LOADING ////////*/
.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: 1s all;
    opacity: 0;
}

.loading-container.show {
    opacity: 0.9;
}
.loading-container .spin {
    border: 3px solid hsla(185, 100%, 62%, 0.2);
    border-top-color: #3cefff;
    border-radius: 50%;
    width: 3em;
    height: 3em;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Css Para contenedor customizer lateral derecho */
.customizer-content{
    margin-top: 70px !important;
    height: calc(100% - 70px) !important
}
.customizer-header-bloque{
    position: fixed;
    width: 400px;
    top:0;
    background-color: #ffffff;
    box-shadow: 6px 4px 17px 1px rgb(0 0 0 / 10%);
    z-index: 9;
    border-left: 1px solid #cfd8dc !important;
    transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
}

.customizer.customizer.open .customizer-header-bloque{
    right: 0;
}
@media (min-width: 1281px) {  
    .customizer.customizer-md, .customizer.customizer-md .customizer-header-bloque {
        width: calc(60% - 10px);
        right: calc(-60% + 10px);    
    }
    .customizer.customizer-md.open, .customizer.customizer-md.open .customizer-header-bloque{
        right: 0;
    }
}
@media (min-width: 1025px) and (max-width: 1280px) {  
    .customizer.customizer-md, .customizer.customizer-md .customizer-header-bloque {
        width: calc(60% - 10px);
        right: calc(-60% + 10px);   
    }
    .customizer.customizer-md.open, .customizer.customizer-md.open .customizer-header-bloque{
        right: 0;
    }
}
/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {  
    .customizer.customizer-md, .customizer.customizer-md .customizer-header-bloque {
        width: calc(60% - 10px);
        right: calc(-60% + 10px);
    }
    .customizer.customizer-md.open, .customizer.customizer-md.open .customizer-header-bloque{
        right: 0;
    }
}
/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .customizer.customizer-md, .customizer.customizer-md .customizer-header-bloque {
        width: calc(80% - 10px);
        right: calc(-80% + 10px);
    }
    .customizer.customizer-md.open, .customizer.customizer-md.open .customizer-header-bloque{
        right: 0;
    }
}
/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
    .customizer.customizer-md, .customizer.customizer-md .customizer-header-bloque {
        width: calc(80% - 10px);
        right: calc(-80% + 10px);
    }
    .customizer.customizer-md.open, .customizer.customizer-md.open .customizer-header-bloque{
        right: 0;
    }
}
/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {  
    .customizer.customizer-md, .customizer.customizer-md .customizer-header-bloque {
        width: calc(100% - 10px);
        right: calc(-100% + 10px);    
    }
    .customizer.customizer-md.open, .customizer.customizer-md.open .customizer-header-bloque{
        right: 0;
    }
} 

/*/////// LIKE DILIKE ////////*/
.btn-like{
    padding: 0.2rem;
    font-size: 1.2rem;
    line-height: 1;
    border-radius: 0.21rem;
    background-color: transparent;
    color: #827e7e;
}
.btn-like.active{
    color: #1d1c1c;
    border-bottom: solid 1px #1d1c1c;
/*    color: #fff;
    background-color: #464855;
    border-color: #464855;*/
}
.btn-like:hover{
    cursor: pointer;
    color: #1d1c1c;
}
.btn-like.active:hover{
    cursor: pointer;
/*    color: #fff;*/
    color: #1d1c1c;
}

.rating-star img {
    height: 20px;
}