*{
margin:0px;
padding: 0px;
}

input[type=text] {   
-webkit-appearance: none!important;
-moz-appearance: none!important;
appearance: none;
outline: none;    
}

:root{
--main-txt-color:#ffffff;
--main-color: #16276d;
--blue-light: #4a61ba;
--blue-light-x2: #152562;
--green-light: #c6fff5;
--red-txt: #f23451;
}

::placeholder { 
color: var(--blue-light-x2);
opacity: 1;
}
:-ms-input-placeholder {
color: var(--blue-light-x2);
}
::-ms-input-placeholder {
color: var(--blue-light-x2);
}

body{
font-family: 'Montserrat', sans-serif;
color: var(--main-color);
}

a:hover{

}

.light{
font-weight: 300;
}

.medium{
font-weight: 500;
}

.bold{
font-weight: 600;
}

.color-label{
color: var(--blue-light-x2);
}

.light-color{
color: #a7a7a7;
}

.bg-blue-gradient{
background: rgb(28,50,144);
background: -moz-linear-gradient(22deg, rgba(28,50,144,1) 0%, rgba(74,97,186,1) 100%);
background: -webkit-linear-gradient(22deg, rgba(28,50,144,1) 0%, rgba(74,97,186,1) 100%);
background: linear-gradient(22deg, rgba(28,50,144,1) 0%, rgba(74,97,186,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c3290",endColorstr="#4a61ba",GradientType=1);
}

.bg-red-gradient{
background-color: #ed2444;
}

.btn-default, .btn-default:hover{
background-color: var(--main-color);
color: #fff;
border-radius: 50px;
padding: 8px 20px;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}

.flex-center-100vh{
height: calc(100vh - 54px);
display: flex;
flex-direction: column;
justify-content: center;
}

.uppercase{
text-transform: uppercase;
}

.fa-15x{
font-size: 1.5rem;
}

.error-message{
font-size: 12px;
color: var(--red-txt);
font-weight: bold;
position: absolute;
bottom: -20px;
}

.input-container{
position: relative;
margin-bottom: 25px;
}

/*Login*/
.header{
margin-bottom: 25px;
}
.bg-blue{
background-color: var(--main-color);
color: var(--main-color);
}

.loginForm{
width: 250px;
max-width: 250px;
margin: 0px auto 5px auto;
}

.login-input {
border-radius: 50px;
padding: 15px 20px 15px 42px;
display: block;
margin: auto auto 15px auto;
max-width: 250px;
width: 250px;
background-color: #fff;
color: #152562;
font-size: 16px;
font-weight: bold;
border: solid 2px #152562;
}

.password, .usercode{
position: relative;
}

.password img, .usercode img{
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
margin: auto;
left: 15px;
}

.btn-login{
border-radius: 50px;
padding: 15px 20px;
display: block;
margin: auto;
border: none;
max-width: 250px;
width: 250px;
color: #ffffff;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #ed2444;
}

.footer-bottom{
position: absolute;
bottom: 0px;
margin: auto;
text-align: center;
width: 100%;
padding: 15px 0px;
color:var(--blue-light-x2);
}

.welcome-message{
text-transform: uppercase;
text-align: center;
color: var(--main-txt-color);
margin-bottom: 25px;
}


/*armadoras*/
.title{
font-weight: 600;
letter-spacing: 1px;
font-size: 22px;
}
.main-top{
padding-top: 50px;
padding-bottom: 50px;
}

.armadora{
border-radius: 10px;
box-shadow: 0px 0px 11px 1px #e4e4e4;
cursor: pointer;
position: relative;
margin-bottom: 25px;
transition: all 0.5s ease;
}

.manufacturer-name{
background-color: #16286d;
position: absolute;
bottom: 0px;
width: 100%;
border-radius: 0px 0px 8px 8px;
text-align: center;
color: #fff;
font-size: 12px;
padding: 5px 0px;
font-weight: 600;
text-transform: uppercase;
}

.armadora:hover{
transform: scale(1.1);
}

.armadora img{
padding-bottom: 20px;
border-radius: 10px 10px 0px 0px;
}

/*vehicles*/
.vehicle-card{
border-radius: 10px;
box-shadow: 0px 0px 11px 1px #e4e4e4;
cursor: pointer;
transition: all 0.5s ease;
}

.vehicle-card img{
border-radius: 10px;
transition: all 0.5s ease;
}

.vehicle-card{
position: relative;
margin-bottom: 20px;
}

.vehicle-name{
background-color: #16286d;
position: absolute;
bottom: 0px;
width: 100%;
border-radius: 0px 0px 8px 8px;
text-align: center;
color: #fff;
font-size: 13px;
padding: 5px 0px;
font-weight: 600;
transition: height 0.5s ease;
}

.form-check-label{
font-weight: 600;
color: var(--main-color);
}
.form-check-input[type=checkbox] {
border:solid 1px var(--main-color);
}

a.small-link,a.small-link:hover{
text-transform: uppercase;
font-weight: 600;
color: #a7a7a7;
font-size: 12px;
text-decoration: none;
}

.subtitle{
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
color: var(--main-color);
}

.search-input{
border: solid 1px #16286d;
border-radius: 50px;
padding: 8px 10px;
width: 100%;
font-family: inherit;
}

.search-form{
display: flex;
align-items: center;
gap:5px;
}

.search-container-input{
position: relative;
width: 100%;
padding-left: 8px;
}

.search-container-input i{
position: absolute;
right: 12px;
bottom: 12px;
font-size: 20px;
cursor: pointer;
}

.containerForm{
background-color: #fff;
border-radius: 20px;
height: 65vh;
width: 800px;
margin: auto;
box-shadow: 0px 0px 11px 1px #e4e4e4;
}

.containerForm .row{
height: 65vh;
margin: 0px;
}

.login-col-right{
background-image: linear-gradient(to right,rgb(39 61 154 / 61%),rgb(40 63 155 / 41%)),url(/assets/images/car.jpg);
background-position: center center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0px 20px 20px 0px;
height: 65vh;
width: 400px;
}

.login-col-left{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
padding: 20px;
height: 65vh;
width: 400px;
}

.bg-texture{
background-image: url(/assets/images/fondo.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.navbar-expand-lg .navbar-collapse {
display: flex!important;
flex-basis: auto;
justify-content: flex-end;
}

nav{
background-color:#16276d;
}

.nav-link{
color: var(--bs-body-bg);
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
line-height: 14px;
}

.nav-link:hover{
color: #dee2e6;
}


.color-group{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

.color-container{
display: block;
width: 30px;
height: 30px;
border-radius: 50px;
border: solid 1px #16286d;
cursor: pointer;
transition: all 0.5s ease;
}

.color-group .active{
border: solid 2px var(--bs-yellow);
width: 32px;
height: 32px;
}

.color-container:hover{
transform:scale(1.1);
}

.color-still{
background-color: #04408E;
}

.color-farthor{
background-color: #1D2A55;
}

.color-tafetta{
background-color: #FDFDFD;
}

.color-grigio{
background-color: #565556;
}

.color-pomegranate{
background-color: #6A0019;
}

.color-kona{
background-color: #453C39;
}

.table-resume{
text-transform: uppercase;
font-weight: 600;
text-align: right;
}

.table-resume p{
margin-bottom:0px;
padding-bottom:0px;
}

tbody{
height: 250px;
border: solid 1px #16286d4f;
border-radius: 0px 0px 4px 20px;
}

thead{
background-color: #16286d;
color: #fff;
}


@media only screen and (max-width: 767px) {
  .login-col-left, .containerForm, .login-col-right{
    width: 100%;
  }

  .footer-bottom {
    display: none;
  }

  .containerForm .row{
    height: auto;
  }

  .login-col-left{
    height: 75vh;
    padding-top: 25px;
    justify-content: flex-start;
  }

  .login-col-left .ipesa-top{
  padding-bottom: 20px;
  }

  .login-col-right{
    height: 25vh;
  }

  .login-col-right{
    padding: 50px 0px;
    border-radius: 0px 0px 20px 20px;
  }

  .containerForm{
    width: 100%;
    height: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    box-shadow: none;
  }

  .flex-center-100vh{
    height: auto;
  }

  .bg-texture{
    background-image: none;
  }
}