body {
margin:0px;
padding:0px;
background-color:#fff;
}
.box-form {
width:100%;
box-sizing: border-box;
background-color:rgba(255, 255, 255,.7);
}
.box-input-date-time {
position:absolute;
top:-250px;
}
.boxs-divide {
width:100%;
display:flex;
justify-content: center;
}
.boxs-divide .box-add {
width:50%;
padding:20px;
box-sizing: border-box;
margin:20px;
}
.type-car {
flex-grow:1;
background-color:#2343A0;
padding:20px;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.type-car p {
margin:0px;
padding: 0px;
font-size:14pt;
color:white;
font-family: 'Roboto', sans-serif;
}
.type-car:hover {
background-color:#4054B2;
}
.this-type {
background-color:#4054B2;
}
.box-form input, .box-form select {
width:400px;
padding:20px;
box-sizing: border-box;
border-radius: 3px;
outline: none;
border:none;
background-color:white;
border:2px solid rgba(0,0,0,.3);
font-family: 'Roboto', sans-serif;
font-size:13pt;
margin:10px;
display:block;
}
.box-form input[type="date"], .box-form input[type="time"]{
width:45%;
} .box-form h3 {
margin:0px 10px;
color:black;
font-family: 'Roboto', sans-serif;
} .box-form .resultado {
position: relative;
height:50px;
padding:20px;
margin:0px 20px;
font-size:12pt;
box-sizing: border-box;
border-radius: 3px;
outline: none;
border:none;
background-color:white;
}
#boxs {
width:100%;
margin:15px auto;
display:flex;
flex-wrap:wrap;
justify-content: center;
}
#boxs .box {
position: relative;
width:450px;
border-radius:10px;
overflow: hidden;
box-shadow:0 3px 40px rgba(36,36,36,.1);
background-color:white;
margin:15px;
cursor: pointer;
transition: box-shadow .4s;
}
#boxs .box:hover {
box-shadow:0 3px 10px rgba(5, 75, 156, 0.4);
}
#boxs .box .img-car {
position: relative;
margin:0px auto;
width:100%;
height:200px;
display:block;
}
.box .car h1 {
position: relative;
width:100%;
display:block;
color:rgb(10, 10, 10);
padding:5px;
box-sizing: border-box;
margin:0px;
font-size:18pt;
outline: none;
border:none;
font-family: 'Varela Round', sans-serif;
text-align: center;
border-bottom:1px solid rgba(0, 0, 0, 0.205);
}
.box .car {
position: relative;
display:block;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content: center;
box-shadow:0 3px 40px rgba(36,36,36,.3);
background-color:white;
}
.box .car h2{
width:50%;
margin:0px;
text-align: center;
padding:5px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size:15pt;
color:rgb(0, 0, 0);
}
.box .car span {
font-size:12pt;
}
.box .car .price-normal {
}
.box .car .price-full {
color:green;
}
#wrapper-car {
position: fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1000;
background-color:#ffffff;
overflow: auto;
}
#wrapper-car .buttonWrapper {
display: inline-block;
font-family: inherit;
background-color: #13aff0;
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin: 0;
padding: 14px 20px;
border: 0;
cursor: pointer;
text-align: center;
letter-spacing: 0.1em;
line-height: 1;
transition: all .3s;
}
#wrapper-car .buttonWrapper:hover {
opacity: .7;
}
.wrapper-car-insert {
position: relative;
width:1000px;
height: auto;
margin:20px auto;
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.wrapper-car-insert .box {
padding-top:100px;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.wrapper-car-insert .box .img-car {
width:500px;
height:300px;
}
.wrapper-car-insert .box .car {
width:500px;
background-color:transparent;
box-shadow:none;
}
.wrapper-car-insert .finalValueWrapper {
margin:0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
font-size:26pt;
}
.wrapper-car-insert .toFormWrapper {
display:block;
text-align:center;
font-family: "Roboto", Sans-serif;
font-weight: 700;
fill: #FFFFFF;
color: #FFFFFF;
background-color: #4054B2;
border-style: solid;
border-width: 3px 3px 3px 3px;
border-color: #4054B2;
font-size: 16px;
padding: 15px 30px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom:50px;
}
.wrapper-car-form {
position: relative;
width:800px;
height: 100vh;
margin:20px auto;
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.wrapper-car-form .top-form {
display: block;
width:100%;
text-align: center;
}
.wrapper-car-form .line-form {
display:block;
margin:0px auto;
width:50px;
height:5px;
background-color:#F6C10C;
}
.wrapper-car-form .title-form {
margin-top:20px;
color: #7A7A7A;
font-weight: 400;
letter-spacing: 2px;
font-family: 'Roboto', sans-serif;
}
.wrapper-car-form .subtitle-form {
font-size: 26pt;
font-family: 'Roboto', sans-serif;
}
.wrapper-car-form .box-input {
width:48%;
margin:5px;
}
.wrapper-car-form input[type="text"], .wrapper-car-form input[type="number"] {
max-width: none;
display: inline-block;
min-height: 40px;
width: 100%;
font-size: 14px;
line-height: 1.8;
padding: 6px 12px;
vertical-align: middle;
background-color: transparent;
color: #333;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
.wrapper-car-form textarea {
resize:vertical;
display: inline-block;
min-height: 40px;
width: 100%;
height:100px;
font-size: 14px;
line-height: 1.8;
padding: 6px 12px;
vertical-align: middle;
background-color: transparent;
color: #333;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-family: 'Roboto', sans-serif;
}
.wrapper-car-form label{
display: inline-block;
font-family: 'Roboto', sans-serif;
}
.errorMessage {
width:100%;
display:none;
margin:5px 0px;
padding:10px;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size:13pt;
background-color:brown;
color:#f3f3f3;
border-radius:5px;
}
.close-wrapper {
position: absolute;
top:0px;
left:100%;
transform: translateX(-100%);
padding:15px 20px;
background-color:rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 10px;
transition: opacity .3s;
cursor: pointer;
z-index:1001;
}
.close-wrapper i {
font-size:25pt;
color:rgb(0, 0, 0);
}
.close-wrapper:hover {
opacity: .7;
}
#return-message {
position: fixed;
width:100%;
height:100vh;
top:0px;
left:0px;
background-color:rgba(0, 0, 0, 0.9);
display:flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
align-content: center;
text-align: center;
z-index:1001;
}
#return-message .close-wrapper {
position: absolute;
top: 25%;
left: 80%;
transform: translate(-100%, -50%);
padding: 15px 20px;
background-color: rgba(255, 255, 255, 0.7);
transition: opacity .3s;
cursor: pointer;
border-bottom-left-radius: 0px;
}
#return-message .success i {
color:rgb(0, 255, 136);
display:block;
width:100%;
font-size:100pt;
}
#return-message .success h1 {
font-size:17pt;
font-family: 'Poppins', sans-serif;
color: #ebebeb;
}
#return-message .error i {
color:rgb(255, 30, 22);
display:block;
width:100%;
font-size:100pt;
}
#return-message .error h1 {
font-size:17pt;
font-family: 'Poppins', sans-serif;
color: #ebebeb;
}
#return-message .loading i {
display:block;
color:rgb(204, 177, 25);
width:100%;
font-size:100pt;
animation: rotate 1s infinite linear;
transition: all .5s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.adjust_jz {
max-height:250px; flex-wrap:wrap; align-items: flex-end;
}
@media (max-width:1000px){
.box-input-date-time {
position:relative;
top:0px;
}  .adjust_jz {
width:100%;
max-height: none;
}
.type-car {
display:block;
width:100%;
}
.box-form input {
margin: 10px 0px;
}
.wrapper-car-insert {
width:90%;
margin:0px auto;
height:auto;
}
.wrapper-car-form {
width:90%;
margin:0px auto;
height:auto;
}
.wrapper-car-form .box-input {
width:100%;
}
.boxs-divide {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.boxs-divide .box-add {
width: 100%;
padding: 0px;
box-sizing: border-box;
margin: 0px;
}
}
.box-form .hidden-box-divide {
display:none;
}