.bg-custom{
    background: #5f6062;
}

.icon-color{
    color: #10bdff;
}

.upload-card{
    background: #5e72e421;
    padding: 16px;
    border-radius: 8px;
}

.numberCircle {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 8px;
    background: #7e92ff;
    color: #fff;
    text-align: center;
    font: 12px Arial, sans-serif;
    margin: 0 auto;
    border: 1px solid #5e72e421;
}

.patente-estilo{
    width: 150px;
    margin: 0 auto;
    border: 2px solid black;
    border-radius: 8px;
    color: black;
    font-weight: bold;
}

.principal-dashboard {
    background-color: white;
  }

.principal-login {
    background-image: url("../img/brand/fondohome.jpg");
    background-repeat: no-repeat;
    /*background: linear-gradient(#62626259,rgb(0 0 0 / 56%)),url(../img/brand/combi2.jpg);*/
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.principal-lg {
    background-color: #000;
}

.principal-archivos {
    /*background-image: url("../img/brand/bg-capabilities.jpg");*/
    background-repeat: no-repeat;
    /*background: linear-gradient(#62626259,rgb(0 0 0 / 56%)),url(../img/brand/combi2.jpg);*/
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    /*background: radial-gradient(at top left,#1e8dff,#2445a6,#2445a6);*/
    /*background-image: linear-gradient(90deg, rgba(5, 5, 5, 1) 0%, rgba(67, 67, 67, 1) 73%);*/
    /*background-image: linear-gradient(90deg, #eaeef7 0%, #eaeef7 73%);*/
    /*background-image: linear-gradient(90deg, #d0dcf7 0%, #dee8ff 73%);*/
    background-image: linear-gradient(90deg, #e7e7e7 0%, #e7e7e7 73%);
}

#background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}



.radios-items ul {
    list-style: none;
    margin-bottom: 0px;
}
.radios-items li {
    display: inline-block;
    margin-right: 8px;
}
/*.radios-items input {
    visibility:hidden;
}*/
.radios-items label {
    cursor: pointer;
}
input:checked + label.radio-verde {
    background: #00bb00;
    color:white;
}
input:checked + label.radio-amarillo {
    background: yellow;
}
input:checked + label.radio-rojo {
    background: #ff4d4d;
    color:white;
}

.radio-verde{
    padding: 4px 14px 4px 14px;
    border-radius: 4px;
    border: 1px solid #1dc309;
    transition: all .5s ease;
    color: green;
}

.radio-verde:hover{
    background-color: #cfffc9;
}

.radio-amarillo{
    padding: 4px 14px 4px 14px;
    border-radius: 4px;
    border: 1px solid #e9e200;
    transition: all .5s ease;
    color: #9d9d00;
}

.radio-amarillo:hover{
    background-color: #fbff004f;
}

.radio-rojo{
    padding: 4px 14px 4px 14px;
    border-radius: 4px;
    border: 1px solid #ff7373;
    transition: all .5s ease;
    color: red;
}

.radio-rojo:hover{
    background-color: #ff000038;
}

.card-item{
    padding: 2px;
    border-radius: 4px !important;
    background-color: transparent;
}

.encabezado-peritaje{
    background: linear-gradient(-45deg,#10bdff,#0089bd);
    color: white;
    margin-bottom: 12px;
}

input[type=checkbox] {
    transform: scale(1.7);
    margin-left: 8px;
}

.efecto:hover,
.efecto:focus {
    background-color: #10bbfd24;
    transition: all .6s ease;
}

tbody, td, tfoot, th, thead, tr {
    border-style: inherit;
}  

table.dataTable thead th {
    text-align: left !important;
}

table.dataTable thead .sorting  { background: url("../img/brand/sort_both.png") no-repeat center right; }
table.dataTable thead .sorting_asc  { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc  { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled  { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled  { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right; }

table.dataTable thead .sorting:after {
    opacity: 0.2 !important;
    content: "" !important;
}

div.dataTables_filter input {
    margin-left: 0px !important;
    display: inherit !important;
    width: auto;
}

div.dataTables_wrapper div.dataTables_paginate {
    float: right !important;
}

.dataTables_info{
    font-size: 12px;
}

.img-peritaje {
    width:  100%;
    height: 200px;
    object-fit: cover;
}

.icono-trash {
    position: absolute;
    z-index: 2;
    color: #ff2323;
    position: absolute;
    background-color: white;
    padding: 8px;
    border: 1px solid red;
    transition: all .5s ease;
    cursor: pointer;
}

.icono-trash:hover{
    color: white;
    background-color: red;
    border: 1px solid red;
}

.input-border:focus{
    border-color: rgb(0, 176, 199);
    box-shadow: 0 1px 1px rgba(0, 247, 255, 0) inset, 0 0 8px rgba(0, 214, 221, 0);
    outline: 0 none;
}

.nav-link.text-white:hover > .icon-color {
    text-shadow: 0 0 8px #52c8ff88;
}

.button-expande{
    color: #ffffff;
}

.button-expande:hover{
    text-shadow: 0 0 8px #ffffff;
}

.button-expande:focus{
    text-shadow: none;
}

.button-negativo {
    border: solid 1px #cad1d7;
    position: relative;
}

.input-group-prepend {
    position: absolute;
    right: 4px;
    top: 6px;
    bottom: 6px;
    z-index:9;
}

.input-inyector {
    border: none !important;
    width: 100% !important;
    padding-right: 13px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.bg-glassmorph{
    background: rgb(255 255 255 / 9%) !important;
    box-shadow: 0 8px 32px 0 #00000066 !important;
    backdrop-filter: blur( 1px ) ;
    -webkit-backdrop-filter: blur( 1px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
} 


.btn-hover {
    border: none;
    background-size: 300% 100%;
    border-radius: 4px;
    /*moz-transition: all .4s ease-in-out;*/
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: white;
}

.btn-hover:hover {
    background-position: 100% 0;
    /*moz-transition: all .4s ease-in-out;*/
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: white;
}
  
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #2593e1, #4481eb, #0066ff, #3f86ed);
    box-shadow: 0 1px 7px 0 rgba(65, 132, 234, 0.75);
    color: white;
}
/*
.btn-primary{
    background: #1b55e2;
    color: #fafafa;
    background-image: linear-gradient( 135deg, #626aff 10%, #000DFF 100%);
    border: none;
}

.btn-success{
    background: #00b10e;
    color: #fafafa;
    background-image: linear-gradient( 135deg, #22cf06 16%, #13b500 100%);
    border: none;
}


.btn-danger{
    background: #f7957d;
    color: #fff;
    background-image: linear-gradient( 135deg, #f98798 16%, #e1002d 100%);
    border: none;
}

.btn-warning{
    background: linear-gradient(148deg, rgba(255,155,132,1) 0%, rgba(255,111,78,1) 40%, rgba(251,99,64,1) 100%, rgba(251,99,64,1) 100%)!important;
    border: none;
}*/

#draw-canvas {
    border: 2px dotted #CCCCCC;
    border-radius: 5px;
    cursor: crosshair;
}

.progress-bar {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none !important;
    transition: none !important;
}

#table.dataTable tbody tr.even{
    background-color:#f9f9f9;
}
#table.dataTable tbody tr.odd{
    background-color:white;
}

footer div.dataTables_scrollBody > table {
    border-bottom: none;
}

.table>:not(:first-child) {
    border-top: 0px;
}


.drop {
    margin: 6px 0;
    padding: 5px;
    border: 1px solid #10bdff;
    border-radius: 5px;
}

.drop.hovering {
    background-color: #10bbff26;
}

.dragdrop{
    z-index: 999;
}






.main-timeline{
    font-family: 'Poppins', sans-serif;
    padding: 25px 10px;
}
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline .timeline{
    width: calc(50% + 9px);
    padding: 20px 30px 20px 0;
    margin: -20px 0 0 0;
    border-radius: 20px;
    border: 10px solid transparent;
    border-right: 10px solid #fff;
    float: left; 
    position: relative;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
    content: '';
    /*background-color: #DA2677;*/
    background-color: #ffffff;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    position: absolute;
    right: -18px;
    bottom: 40px;
}
.main-timeline .timeline:after{
    border-radius: 3px;
    transform: rotate(45deg);
    right: 20px;
}
.main-timeline .timeline-content{
    color: #fff;
    background: linear-gradient(#D02578,#DA2677);
    min-height: 110px;
    padding: 0 0 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    border-radius: 8px;
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
    font-size: 25px;
    line-height: 40px;
    position: absolute;
    bottom: 15px;
    right: 16px;
}
.main-timeline .title{
    color: #DA2677 !important;
    background-color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    padding: 6px;
    margin: 0 0 5px;
}
.main-timeline .description{
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 20px;
    margin: 20px 80px 0 20px;
}
.main-timeline .timeline:nth-child(even){
    float: right;
    padding: 10px 0 10px 30px;
    margin: -20px 0 0 0;
    border-right: none;
    border-left: 10px solid #fff;
}
.main-timeline .timeline:nth-child(even):before{
    right: auto;
    left: -18px;
}
.main-timeline .timeline:nth-child(even):after{
    right: auto;
    left: 20px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
    right: auto;
    left: 16px;
}

.main-timeline .timeline:nth-child(even) .description{ margin: 20px 20px 0 80px; }
.main-timeline .timeline:nth-child(4n+2):before,
.main-timeline .timeline:nth-child(4n+2):after{
    /*background-color: #4EB543;*/
    background-color: #ffffff;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-content{ background: linear-gradient(#80B02C,#4EB543); }
.main-timeline .timeline:nth-child(4n+2) .title{ color: #4EB543 !important; }
.main-timeline .timeline:nth-child(4n+3):before,
.main-timeline .timeline:nth-child(4n+3):after{
    /*background-color: #3A3270;*/
    background-color: #ffffff;
}
.main-timeline .timeline:nth-child(4n+3) .timeline-content{ background: linear-gradient(#65286D,#3A3270); }
.main-timeline .timeline:nth-child(4n+3) .title{ color: #3A3270 !important; }
.main-timeline .timeline:nth-child(4n+4):before,
.main-timeline .timeline:nth-child(4n+4):after{
    /*background-color: #0A2C80;*/
    background-color: #ffffff;
}
.main-timeline .timeline:nth-child(4n+4) .timeline-content{ background: linear-gradient(#2FD8D8,#0A2C80); }
.main-timeline .timeline:nth-child(4n+4) .title{ color: #0A2C80 !important; }


@media screen and (max-width:767px){
    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even){
        width: 100%;
        padding: 10px 0 10px 30px;
        margin: -25px 0 0;
        border-left: 10px solid #fff;
        border-right: none;
    }
    .main-timeline .timeline:before,
    .main-timeline .timeline:nth-child(even):before{
        right: auto;
        left: -17px;
    }
    .main-timeline .timeline:after,
    .main-timeline .timeline:nth-child(even):after{
        right: auto;
        left: 20px;
    }
    .main-timeline .description,
    .main-timeline .timeline:nth-child(even) .description{
        margin: 20px 20px 0 80px;
    }
    .main-timeline .timeline-icon,
    .main-timeline .timeline:nth-child(even) .timeline-icon{
        left: 16px;
        right: auto;
    }
}
@media screen and (max-width:576px){
    .main-timeline .timeline-content{ padding-bottom: 70px; }
    .main-timeline .description,
    .main-timeline .timeline:nth-child(even) .description{
        margin: 20px 20px 0 20px;
    }
}

.card-border{
    border: 1px solid #1b2e4b;border-radius: 6px;
}

.icon-blue{
    color: #25d5e4;
}
.btn-play{
    border: 1px solid white;
    padding: 8px 5px 8px 5px; 
    color: white;
}

.btn-play:hover{
    background-color: #ffffff4a;
    color: white;
}

.badge-rojo {
    color: #fff;
    font-size: 85%;
    background: #ff0000;
    background: -moz-linear-gradient(-45deg, #ff0000 8%, #ff2f2f 83%);
    background: -webkit-linear-gradient(-45deg, #ff0000 8%, #ff2f2f 83%);
    width: 128px;
    box-shadow: 0 10px 12px -10px #ff0000;
    border-radius: 4px;
    /*font-weight: bold;*/
}

.badge-verde {
    color: #fff;
    font-size: 85%;
    background: #1c9c1e;
    background: -moz-linear-gradient(-45deg, #1c9c1e 8%, #00cd03 83%);
    background: -webkit-linear-gradient(-45deg, #1c9c1e 8%, #00cd03 83%);
    width: 128px;
    box-shadow: 0 10px 12px -10px #1c9c1e;
    border-radius: 4px;
    /*font-weight: bold;*/
}

.badge-amarillo {
    color: #fff;
    font-size: 85%;
    background: #F09819 !important;
    background: -moz-linear-gradient(-45deg, #F09819 8%, #d6c630 83%) !important;
    background: -webkit-linear-gradient(-45deg, #F09819 8%, #d6c630 83%) !important;
    width: 128px;
    box-shadow: 0 10px 11px -11px #F09819;
    border-radius: 4px;
    /*font-weight: bold;*/
}

.badge-azul {
    color: #fff;
    font-size: 85%;
    background: #004af1 !important;
    background: -moz-linear-gradient(-45deg, #004af1 8%, #1f8bd8 83%) !important;
    background: -webkit-linear-gradient(-45deg, #004af1 8%, #1f8bd8 83%) !important;
    width: 128px;
    box-shadow: 0 10px 11px -11px #004af1;
    border-radius: 4px;
    /*font-weight: bold;*/
}

.badge-blanco {
    color: #fff;
    font-size: 85%;
    width: 128px;
    border-radius: 4px;
    border: 1px solid #ffffff40;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .rotating {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
  }

/*.btn-primary {
    color: #fff !important;
    background: linear-gradient( 135deg, #3a86ff 10%, #3a86ff 100%) !important;
    border: 0px;
    box-shadow: 0 10px 20px -10px rgb(27 85 226 / 59%);
}*/

.btn-primario {
    color: #fff !important;
    background: linear-gradient( 135deg, #60d3fa 10%, #60d3fa 100%) !important;
    border: 0px;
    box-shadow: 0 10px 20px -10px rgba(27, 189, 226, 0.59);
}

.btn-primario:hover {
    box-shadow: none;
}

.btn-outline-primario
{
    color: #60d3fa;
    border-color: #60d3fa; 
    background-color: transparent;
    background-image: none;
    transition: all .5s ease;
}
.btn-outline-primario:hover
{
    color: #FFFFFF;
    border-color: #60d3fa; 
    background-color: #60d3fa;
}

.btn-secundario {
    color: rgb(255, 255, 255) !important;
    /*background: linear-gradient( 135deg, #eb417c 10%, #eb417c 100%) !important;*/
    background: #ff006e;
    border: 0px;
    box-shadow: 0 10px 20px -10px rgba(255, 92, 187, 0.59);
}

.btn-secundario:hover {
    box-shadow: none;
}

.btn-outline-secundario
{
    color: #eb417c;
    border-color: #eb417c; 
    background-color: transparent;
    background-image: none;
    transition: all .5s ease;
}
.btn-outline-secundario:hover
{
    color: #FFFFFF;
    border-color: #eb417c; 
    background-color: #eb417c;
}


.btn-verde {
    color: #fff !important;
    background: linear-gradient( 135deg, #00d0c2 10%, #00d0c2 100%) !important;
    border: 0px;
    box-shadow: none;
}

.btn-verde:hover {
    box-shadow: none;
}

.btn-gris {
    color: #fff !important;
    background: linear-gradient( 135deg, #838383 10%, #838383 100%) !important;
    border: 0px;
    box-shadow: none;
}

.btn-gris:hover {
    box-shadow: none;
}

.btn-amarillo {
    color: #fff !important;
    /*background: linear-gradient( 135deg, #f6cd38 10%, #f6cd38 100%) !important;*/
    background: #ffbe0b;
    border: 0px;
    box-shadow: 0 10px 20px -10px rgba(196, 226, 27, 0.59);
}

.btn-amarillo:hover {
    box-shadow: none;
}

.bton-inf {
    color: #fff !important;
    /*background: linear-gradient( 135deg, #51abf4 10%, #2196f3 100%) !important;*/
    background: #498fff;
    border: 0px;
    box-shadow: 0 10px 20px -10px rgb(33 150 243 / 59%);
}

.bton-inf:hover {
    background: #4a90ff;
}

.btn-dark {
    color: #fff !important;
    background-color: #3b3f5c !important;
    border-color: #3b3f5c !important;
    border: 0px;
    box-shadow: 0 10px 20px -10px rgb(59 63 92 / 59%) !important;
}

.dark-version .dropdown .dropdown-menu .dropdown-item:focus,.dark-version .dropdown .dropdown-menu .dropdown-item:hover{
    background-color:#eb417c1f !important;
}

.dropdown-login {
    background: white !important;
}

#table-panel_wrapper select{
    background: #12162e;
    color: white;
}

#table-panel_previous a{
    background: rgb(27, 46, 75);
}

#table-panel_next a{
    background: rgb(27, 46, 75);
}

#table-panel_filter input {
    background: #12162e;
    color: white;
}
/*
.page-link{
    background-color: linear-gradient( 135deg, #51abf4 10%, #2196f3 100%) !important;
}*/

.avatar-super-sm
{
    font-size: .875rem; 

    width: 28px;
    height: 28px;
}


.btn-outline-info {
    border: 1px solid #2196f3 !important;
    color: #2196f3 !important;
    background-color: transparent;
    box-shadow: none;
}

.btn-outline-info:hover {
    color: #fff !important;
    background-color: #2196f3;
    box-shadow: 0 10px 20px -10px rgba(33, 150, 243, 0.588);
}

.fila-roja{
    background: #ff000057 !important;
}

.fila-verde{
    background: #04c88b70 !important;
}

.fila-amarilla{
    background: #ffee286e !important;
}

.button-rec {
	width: 35px;
	height: 35px;
	font-size: 20px;
    color: white;
	background-color: red;
	border: 0;
	border-radius: 35px;
	/*margin: 18px;*/
	outline: none;
}

.notRec{
	background-color: darkred;
}

.Rec{
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes pulse{
	0%{
		box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 0.644);
	}
	65%{
		box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, 0.557);
	}
	90%{
		box-shadow: 0px 0px 5px 13px rgba(173,0,0,0);
	}
}


/*.selected{
    background: #008cff4f !important;
}*/

.login-fondo{
    background-image: url("../img/brand/card.mp4");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

#background-video {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    position: absolute;
    /*left: 0;
    right: 0;
    top: 0;
    bottom: 0;*/
    z-index: -1;
}

.btn-blanco
{
    color: #fff;
    border-color: #000;
    background-color: #000;
    /*box-shadow: 0 4px 6px rgba(255, 255, 255, 0.11), 0 1px 3px rgba(255, 255, 255, 0.08);*/
    transition: all .7s ease;
    border-radius: 0px;
}
.btn-blanco:hover
{
    color: #000000;
    border-color: #000; 
    background-color: #fff;
    transform: none;
    box-shadow: none;
}

.registra-text{
    color: #fff;
    transition: all .5s ease;
}

.registra-text:hover{
    color: #f5365c;
    text-shadow: 0 4px 6px rgba(255, 255, 255, 0.11), 0 1px 3px rgba(255, 255, 255, 0.08);
}

.dataTables_scrollBody {
    background: transparent !important;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.rotate {
    width: 100px;
    animation: rotation 12s infinite linear;
}

.pors{
    background-image: url("../img/brand/porshe4.png");
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: right bottom;
    background-attachment: fixed;
    z-index: 100;
}

@media (max-width: 576px) {
    .login-image {
        display: none;
    }
}



h3.nav01, h3.nav02 {
    position: absolute;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
}

nav.side-slide {
    background-color: #262626;
    top: 0;
    right: -350px; 
    height: 100%;
    position: fixed;
    width: 350px;
    z-index: 99;
}

.fondo-nav{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}


.login-stock1 {
    background: linear-gradient(#00000000,#00000000),url(../img/brand/cielo2.jpg);
    background-size: cover;
    background-position: center center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.login-stock2 {
    background: linear-gradient(#00000000,#00000000),url(../img/brand/cielo.jpeg);
    background-size: cover;
    background-position: center center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.login-stock3 {
    background: linear-gradient(#00000000,#00000000),url(../img/brand/cielo3.jpg);
    background-size: cover;
    background-position: center center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#loading {
    position: fixed;
    /*display: block;*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    /*opacity: 0.7;*/
    background-color: #1c1c1c;
    z-index: 99;
    display: flex;
    justify-content: center;
  }
  
  #loading-image {
    position: absolute;
    top: 180px;
    /*left: 240px;*/
    z-index: 100;
    /*animation: rotation 4s infinite linear;*/
  }

  .inicio-texto{
    font-size: 30px;
    color: white;
    /*font-family: Poppins-bold;*/
    font-weight: bold;
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

.floating1 {  
    animation-delay: 0s;
}
.floating2 {  
    animation-delay: 0.1s;
}
.floating3 {  
    animation-delay: 0.2s;
}
.floating4 {  
    animation-delay: 0.3s;
}
.floating5 {  
    animation-delay: 0.4s;
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }    
}

/*
.subrayar{
    background: linear-gradient(0deg, #e7e7e7, #e7e7e7) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
}

.subrayar:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}
  
.underline {
    padding-bottom: 2px;
    --bg-h: 2px;
}
  
.subrayar{
    text-decoration: none;
    color: inherit;
    padding: 2px 10px;
}
*/

.subrayar{
    padding: 0px 10px;
    transition: all .5s ease;
}

.subrayar:hover{
    background: #ebebeb;
    padding: 0px 10px;
    border-radius: 5px;
}

.btn-grad {background-image: linear-gradient(to right, #5FC3E4 0%, #E55D87  51%, #5FC3E4  100%)}
.btn-grad {
    /*margin: 10px;*/
    padding: 14px 2px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: black;            
    /*box-shadow: 0 0 20px #eee;*/
    border-radius: 1px;
    display: block;
    border: 1px solid black !important;
    font-weight: bold;
}

.btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: black;
    text-decoration: none;
}