@import "../node_modules/nprogress/nprogress.css";
/* @import "../node_modules/@fortawesome/fontawesome-free/css/all.min.css"; */
@import "../vendor/admin/perfect-scrollbar/perfect-scrollbar.css";

@import "../node_modules/vue-select/dist/vue-select.css";

@import "admin/theme.min.css";

@font-face {
  font-family: 'mercosul';
  src: url('/fonts/ginummernschild.ttf') format('truetype');  
}

@media only screen 
  and (min-device-width : 280px) 
  and (max-device-width : 440px) { 
    .img-placa-carro-unica { display: none; }
    .img-placa-carro-dupla { display: none; }
    .img-placa-moto { display: none; }
}

.img-placa-carro-unica{
  background-image: url('/images/placa-carro-unica.png'); 
  width: 471px; 
  height: 159px;     
  position: relative;
  margin-bottom: 20px;
}
.img-placa-carro-unica h1{  
  font-family: 'mercosul';
  font-size: 100px;  
  margin: 0;    
  position: absolute;
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.img-placa-carro-unica-autoatendimento {
  background-image: url('/images/placa-carro-unica-autoatendimento.png');
  width: 370px;
  height: 127px;
  position: relative;
  margin-bottom: 20px;
  margin-right: 40px;
}

.img-placa-carro-unica-autoatendimento h1 {
  font-family: 'mercosul';
  font-size: 100px;
  margin: 0;
  position: absolute;
  top: 60%;
  left: 53%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.img-placa-carro-dupla{
  background-image: url('/images/placa-carro-dupla.png'); 
  width: 514px; 
  height: 211px;     
  position: relative;
  margin-bottom: 20px;
}

.img-placa-carro-dupla-autoatendimento {
  background-image: url('/images/placa-carro-dupla-autoatendimento.png');
  width: 440px;
  height: 181px;
  position: relative;
  margin-bottom: 20px;
  margin-right: 40px;
}
.img-placa-carro-dupla-autoatendimento h1 {
  font-family: 'mercosul';
  font-size: 100px;
  margin: 0;
  position: absolute;
  top: 70%;
  left: 55%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.img-placa-carro-tripla{
  background-image: url('/images/placa-carro-tripla.png'); 
  width: 505px; 
  height: 198px;     
  position: relative;
  margin-bottom: 20px;
}
.img-placa-carro-dupla h1{  
  font-family: 'mercosul';
  font-size: 100px;  
  margin: 0;    
  position: absolute;
  top: 70%;
  left: 55%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.img-placa-carro-tripla h1{  
  font-family: 'mercosul';
  font-size: 100px;  
  margin: 0;    
  position: absolute;
  top: 65%;
  left: 55%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.img-placa-moto{
  background-image: url('/images/placa-moto.png'); 
  width: 289px; 
  height: 264px;     
  position: relative;
  margin-bottom: 20px;
}
.img-placa-moto p.placa1{  
  font-family: 'mercosul';
  text-align: center;
  font-size: 110px;  
  margin: 0;    
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);      
}
.img-placa-moto p.placa2{    
  font-family: 'mercosul';
  text-align: center;
  font-size: 110px;  
  margin: 0;    
  position: absolute;
  top: 70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);      
}

/* LiveView specific classes for your customizations */
.invalid-feedback {
  color: red;
  display: block;
  font-size: 15px;
  margin: 0rem 0 0rem;
}

.phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected{
  cursor: wait;
}
.phx-disconnected *{
  pointer-events: none;
}

.live-modal {
  opacity: 1 !important;
  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);
}

.live-modal .modal-title {
  margin-top: 0;
}

.live-modal .close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.phx-modal {
  opacity: 1!important;
  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);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Alerts and form errors */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: steelblue;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}