/* CSS Document */
body{
	
}
nav.navbar.navbar-expand-lg.bg-primary.fixed-top.navbar-transparent {
    height: 10vh;
}
.sidebar-collapse .navbar .navbar-toggler-bar{
	background: #ffffff;
}

main.wrapper {
    height: 80vh;
    overflow: auto;
    position: fixed;
    top: 12vh;
    width: 100%;
}

footer.menu{
	position: fixed;
	z-index: 9;
	background-color: #ffffff;
	bottom: 0px;
	border-top: solid 1px #000000;
    column-count: 5;
    column-gap: 0;
    height: 8vh;
    width: 100%;
	padding-top: 10px;
}
footer.menu .icono{
    display: grid;
    grid-template-rows: 1fr auto;
	height: 4.5vh;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
}
/*
footer.menu .icono.reclamaciones.activo::before,
footer.menu .icono.reclamaciones::before{
	width: 0px;
	height: 0px;
	background-image: url("../../img/reclamaciones-hover.png");
}
footer.menu .icono.preguntas.activo::before,
footer.menu .icono.preguntas::before{
	width: 0px;
	height: 0px;
	
	background-image: url("../../img/preguntas-hover.png");
}
footer.menu .icono.calculadora.activo::before,
footer.menu .icono.calculadora::before{
	width: 0px;
	height: 0px;
	
	background-image: url("../../img/calculadora-hover.png");
}
footer.menu .icono.contratos.activo::before,
footer.menu .icono.contratos::before{
	width: 0px;
	height: 0px;
	
	background-image: url("../../img/contract-hover.png");
}
footer.menu .icono.usuarios.activo::before,
footer.menu .icono.usuarios::before{
	width: 0px;
	height: 0px;
	background-image: url("../../img/user-hover.png");
}
*/

footer.menu .icono.reclamaciones{
	
	background-image: url("../../img/reclamaciones.png");
}
footer.menu .icono.preguntas{
	
	background-image: url("../../img/preguntas.png");
}
footer.menu .icono.calculadora{
	
	background-image: url("../../img/calculadora.png");
}
footer.menu .icono.contratos{
	
	background-image: url("../../img/contract.png");
}
footer.menu .icono.usuarios{
	background-image: url("../../img/user.png");
}

footer.menu .icono.reclamaciones:hover,
footer.menu .icono.reclamaciones:active{
	
	background-image: url("../../img/reclamaciones-hover.png");
}
footer.menu .icono.preguntas.activo,
footer.menu .icono.preguntas:hover,
footer.menu .icono.preguntas:active{
	
	background-image: url("../../img/preguntas-hover.png");
}
footer.menu .icono.calculadora.activo,
footer.menu .icono.calculadora:hover,
footer.menu .icono.calculadora:active{
	
	background-image: url("../../img/calculadora-hover.png");
}
footer.menu .icono.contratos.activo,
footer.menu .icono.contratos:hover,
footer.menu .icono.contratos:active{
	
	background-image: url("../../img/contract-hover.png");
}
footer.menu .icono.usuarios.activo,
footer.menu .icono.usuarios:hover,
footer.menu .icono.usuarios:active{
	background-image: url("../../img/user-hover.png");
}

.textoamarillo{
	color:rgb(255,217,97);
}

.textopurpura{
	color: rgb(84,38,65);
}

.amarillo{
	background: rgb(255,217,97);
	background: linear-gradient(90deg, rgba(255,217,97,1) 0%, rgba(255,153,0,1) 100%);
}
.purpura{
	color:#ffffff;
	background: rgb(84,38,65);
	background: linear-gradient(90deg, rgba(84,38,65,1) 0%, rgba(53,38,65,1) 100%);
}


.main-page {
    column-count: 2;
    column-gap: 0;
}

.main-page .menu{
	width: 90%;
	margin: 0 5% 10%;
	border-radius: 25px;
    display: grid;
    grid-template-rows: 1fr auto;
	position: relative;
	padding: 20px 10px;
}

.main-page h4,
.content-page h4{
    font-weight: bold;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.2em;
}
.main-page .bg {
    position: absolute;
	width: 100%;
	margin:0;
	padding: 0;
    background-repeat: no-repeat;
    background-position: top;
	background-size: contain;
}
.main-page .reclamaciones{
	
	height: 200px;
	
}
.main-page .reclamaciones .bg{
	background-image: url("../../img/bg-reclamaciones.png");
	height: 200px;
}


.main-page .contratos{
	height: 200px;
}
.main-page .contratos .bg{
	background-image: url("../../img/bg-contratos.png");
	height: 200px;
}


.main-page .calculadora{
	height: 170px;
}
.main-page .calculadora .bg{
	background-image: url("../../img/bg-calculadora.png");
	height: 170px;
}


.main-page .preguntas{
	height: 170px;
}


.main-page .preguntas .bg{
	background-image: url("../../img/bg-preguntas.png");
	height: 170px;
}

.main-page .usuarios{
	height: 180px;
}


.main-page .usuarios .bg{
	background-image: url("../../img/bg-preguntas.png");
	height: 260px;
}

.content-page{
	padding: 5% 2.5%;
	display: none;
}

.contenido{
	padding: 10% 5%;
	border-radius: 25px;
}
.relativo{
	position: relative;
}
#app{
	padding-bottom: 0px;
    margin-top: 12vh;
    height: 80vh;
	overflow: auto;
    padding-top: 5vh;
	
}


.logo-account{
	width: 200px;
	margin: 3em auto 0;
	display: block;
}

.card-account{
	width: 100%;
	max-width: 300px;
	display: block;
	margin: auto;
}

.navbar.navbar-transparent{
	padding-top: 10px !important;
}

/*
Float Labels
*/

.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the 
* pesky delay.
*/
.field label, .field input, .field textarea{
  transition: all 0.2s;
  touch-action: manipulation;
}

.field textarea, .field select, .field input{
	cursor: text;
	background-color: #ffffff;
}

.field textarea:focus,
.field input:focus {
  outline: 0;

}

.field label {
	padding-left: 10px;
	pointer-events: none;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
.field textarea:placeholder-shown + label,
.field input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 1.75rem) scale(1.125);
}
/**
* By default, the placeholder should be transparent. Also, it should 
* inherit the transition.
*/
::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
.field textarea:focus::-webkit-input-placeholder,
.field input:focus::-webkit-input-placeholder {
  opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when 
* there's something in the input at all.
*/

.field textarea:not(:placeholder-shown) + label,
.field textarea:focus + label,

.field input:not(:placeholder-shown) + label,
.field input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
}

#accordion .card{
	background-color: transparent !important;
	position: relative;
}

#accordion .card .card-header button:before {
    content: "\ea3c";
    font: normal normal normal 32px/1 'Nucleo Outline';
    text-align: right;
    position: absolute;
    right: 5px;
    top: 20px;
    font-size: 10px;
}

#accordion .card .card-header button.collapsed:before {
    content: "\ea39";
    font: normal normal normal 32px/1 'Nucleo Outline';
    text-align: right;
    position: absolute;
    right: 5px;
    top: 20px;
    font-size: 10px;
}
div#quehacer-menu {
    position: sticky;
    top: 0;
	z-index: 999;
}

div#quehacer-ayuda {
    position: sticky;
    top: 0;
	z-index: 999;
}
.loader{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	color:#000000;
	padding: 45%;
	font-size: 4em;
	text-align: center;
	z-index: 99999;
}


#archivo .fas.fa-minus-circle{
	display: none;
}

.archivo{
	height: 30px;
}

#agregararchivo{
	position: relative;
}
.archivo i,
#agregararchivo i{
	margin-top:10px;
	margin-right: 20px;
    font-size: 3em;
	width: 25px;
	height: 25px;
	padding: 5px;
	cursor: pointer;
}

#agregararchivo i.fas.fa-plus-circle{
	position: absolute;
	right: 10px;
	top: -30px;
}

#formreclamacion,
#formcontrato,
#contrato{display: none;}


 #calculadora .nav-tabs {
	display: flex;
	width: auto; 
	padding-left: 0px;
	padding-right: 0px;
    text-align: center;
  }
#calculadora .card{
	background-color: transparent;
}


#calculadora .shot{
	height: 40px;
	position: relative;
	margin-bottom: 10px;
	padding-left: 40px;
	padding-right: 0;
	padding-top: 25px;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#calculadora .shot.cerveza{
	background-image: url("../../img/cerveza.png");
}
#calculadora .shot.vino{
	background-image: url("../../img/vino.png");
}
#calculadora .shot.mojito{
	background-image: url("../../img/mojito.png");
}
#calculadora .shot.wisky{
	background-image: url("../../img/wisky.png");
}
#calculadora .shot.martini{
	background-image: url("../../img/martini.png");
}

#calculadora .noUi-horizontal{
	height: 5px;
}

/*#calculadora .row.relativo{
	height: 300px;
	width: 100%;
	padding: 10px 0;
	position: relative;
}*/


#calculadora .auto{
	width: 100%;
	position: relative;
	right: 0;
	top:0;
	background-image: url("../../img/conducir.png");
	background-size: contain;
	background-repeat: no-repeat;
}
#calculadora .auto .noconducir{
	width: 100%;
	display: none;
}
#calculadora .corazon {
    width: 100%;
    margin-top: 30px;
}

#calculadora .corazon img{
	background-repeat: no-repeat;
}

.fa-merobaron:before {
    content: "";
	background-image: url("../../img/merobaron.png");
	
	background-size: contain;
	background-repeat: no-repeat;
    height: 20px;
    width: 30px;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
}

.fa-medetuvieron:before {
    content: "";
	background-image: url("../../img/medetuvieron.png");
	
	background-size: contain;
	background-repeat: no-repeat;
    height: 20px;
    width: 30px;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
}
.fa-medespidieron:before {
    content: "";
	background-image: url("../../img/medespidieron.png");
	
	background-size: contain;
	background-repeat: no-repeat;
    height: 20px;
    width: 30px;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
}

.dudas{
	position: relative;
    padding: 1rem;
}


.card.abogados .card-header{
	height: 62px;
	padding:5px 10px;
}
.card.abogados .card-header .img-abogado{
	float:left;
}

.card.abogados .card-header .nombre-abogado{
	float:left;
	height: 52px;
    padding-top: 17px;
	padding-left: 20px;
}

.card.abogados .card-header .nombre-abogado .recomendado{
	font-size: 1.2rem;
}
.card-pricing {
    text-align: center;
}
.card-pricing .icon {
    padding: 10px 0 0;
}
.card-pricing .card-title{
	margin-top: 30px;
	font-size: 1.825em;
	line-height: 1.25em;
}
.card-pricing ul {
    list-style: none;
    padding: 0;
    max-width: 240px;
    margin: 10px auto;
}

.card-pricing ul li {
    color: #888;
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid hsla(0,0%,53%,.3);
}

.icon.icon-primary {
    color: #352641;
}

.card-pricing .icon i {
    font-size: 30px;
    line-height: 2.7;
    max-width: 80px;
    color: #888;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 9px 35px -6px rgb(0 0 0 / 30%);
    background-color: #fff;
    position: relative;
}

.card-pricing .icon.icon-primary i {
    box-shadow: 0 9px 30px -6px #352641;
    color: #352641;
}

i.recomendado{
	color: #f96332;
}

.card-profile{
	text-align: center;
}
.card-plain {
    background: transparent;
    box-shadow: none;
}
.card-plain.card-profile .card-avatar, .card-plain.card-testimonial .card-avatar {
    margin-top: 0;
}
.card-profile .card-avatar, .card-testimonial .card-avatar {
    max-width: 130px;
    max-height: 130px;
    margin: -60px auto 0;
}
.card-profile .card-avatar img, .card-testimonial .card-avatar img {
    border-radius: 50%!important;
}

@media screen and (max-width: 320px) {

	#app{
    padding-top: 1vh;
	}
	
.nav-open .sidebar-collapse .navbar-translate {
    -webkit-transform: translate3d(-220px,0,0);
    -moz-transform: translate3d(-220px,0,0);
    -o-transform: translate3d(-220px,0,0);
    -ms-transform: translate3d(-220px,0,0);
    transform: translate3d(-220px,0,0);
}
	.sidebar-collapse [class*=navbar-expand-] .navbar-collapse{
		width: 220px;
	}
}

/*CIRCULAR*/
.circular{
  height:100px;
  width: 100px;
  position: relative;
  transform:scale(2);
}
.circular .inner{
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin: -40px 0 0 -40px;
  background: #dde6f0;
  border-radius: 100%;
 
}
.circular .number{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index:10;
  font-size:18px;
  font-weight:500;
  color:#4158d0;
}
.circular .bar{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  -webkit-border-radius: 100%;
  clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
  background: #4158d0;
}
.circle .left .progress{
  z-index:1;
  animation: left 4s linear both;
}
@keyframes left{
  100%{
    transform: rotate(180deg);
  }
}
.circle .right {
  transform: rotate(180deg);
  z-index:3;
 
}
.circle .right .progress{
  animation: right 4s linear both;
  animation-delay:4s;
}
@keyframes right{
  100%{
    transform: rotate(180deg);
  }
}


input,
textarea,
select{
	-webkit-appearance: none;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff !important;
  opacity: 0; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff !important;
}

.text-white{
	color:#ffffff;
}
.img-abogado{
	display:block;
	width:50px;
	height:50px;
	background-size:cover;
	background-position:center;
    border: solid 1px #3d3d3f;
    border-radius: 25px;
	box-shadow:0 10px 25px 0 rgb(0 0 0 / 30%);
}


/*$color: #fff;*/

.toggleButton {
    cursor: pointer;
    display: block;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: transform .14s ease;
    &:active {
        transform: rotateX(30deg);
    }
    input {
        display: none;
        & + div {
            border: 3px solid rgba(#fff, .2);
            border-radius: 50%;
            position: relative;
            width: 44px;
            height: 44px;
            svg {
                fill: none;
                stroke-width: 3.6;
                stroke:#fff;
                stroke-linecap: round;
                stroke-linejoin: round;
                width: 44px;
                height: 44px;
                display: block;
                position: absolute;
                left: -3px;
                top: -3px;
                right: -3px;
                bottom: -3px;
                z-index: 1;
                stroke-dashoffset: 162.6 - 38;
                stroke-dasharray: 0 162.6 133 (162.6 - 133);
                transition: all .4s ease 0s;
            }
            &:before,
            &:after {
                content: '';
                width: 3px;
                height: 16px;
                background: #fff;
                position: absolute;
                left: 50%;
                top: 50%;
                border-radius: 5px;
            }
            &:before {
                opacity: 0;
                transform: scale(.3) translate(-50%, -50%) rotate(45deg);
                animation: bounceInBefore .3s linear forwards .3s;
            }
            &:after {
                opacity: 0;
                transform: scale(.3) translate(-50%, -50%) rotate(-45deg);
                animation: bounceInAfter .3s linear forwards .3s;
            }
        }
        &:checked + div {
            svg {
                stroke-dashoffset: 162.6;
                stroke-dasharray: 0 162.6 28 (162.6 - 28);
                transition: all .4s ease .2s;
            }
            &:before {
                opacity: 0;
                transform: scale(.3) translate(-50%, -50%) rotate(45deg);
                animation: bounceInBeforeDont .3s linear forwards 0s;
            }
            &:after {
                opacity: 0;
                transform: scale(.3) translate(-50%, -50%) rotate(-45deg);
                animation: bounceInAfterDont .3s linear forwards 0s;
            }
        }
    }
}

@keyframes bounceInBefore {
    0% {
        opacity: 0;
        transform: scale(.3) translate(-50%, -50%) rotate(45deg);
    }
    50%{
        opacity: 0.9;
        transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
    }
    80%{
        opacity: 1;
        transform: scale(.89) translate(-50%, -50%) rotate(45deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(45deg);
    }
}

@keyframes bounceInAfter {
    0% {
        opacity: 0;
        transform: scale(.3) translate(-50%, -50%) rotate(-45deg);
    }
    50%{
        opacity: 0.9;
        transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
    }
    80%{
        opacity: 1;
        transform: scale(.89) translate(-50%, -50%) rotate(-45deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(-45deg);
    }
}

@keyframes bounceInBeforeDont {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(45deg);
    }
    100%{
        opacity: 0;
        transform: scale(.3) translate(-50%, -50%) rotate(45deg);
    }
}

@keyframes bounceInAfterDont {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(-45deg);
    }
    100%{
        opacity: 0;
        transform: scale(.3) translate(-50%, -50%) rotate(-45deg);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}
.caja-tabla{
	overflow-x: auto;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	background-color: #f96332 ;
    border-color: #f96332 ;
	color:#FFFFFF ;
	box-shadow: 0 5px 25px 0 rgb(0 0 0 / 20%) ;
	border: 0 ;
    border-radius: 30px ;
}
.onclic{
	cursor: pointer;
}
a.eliminar,
a.eliminar i{
	font-weight: bold;
	color:red;
}
.eliminado{
	cursor: none;
	pointer-events: none;
}