html, body{
  margin: 0!important;
  padding: 0!important;
  overflow: hidden !important;
}

hr { 
  display: block !important; 
  height: 1px !important;
  border: 0 !important; 
  border-top: 1px solid #ccc !important;
  margin: 1em 0 !important; 
  padding: 0 !important; 
}

a{
color: dodgerblue !important;
}

.page-enter-active,
.page-leave-active {
  transition: opacity 0.4s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

.section{
padding-left: 50px;
}

.form-content input{
  width: 100% !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  outline: none !important;
  font-size: 16px !important;
  background-color: #fff;
}
.form-content input:focus{
  border-color: var(--main_color1) !important;
  transition: .5s !important;
}
.error{
background-color: white!important;
margin-bottom: 20px;
padding-top: 0px;
margin-top: -20px;
font-size: 12px; 
color: red;
}
::selection{
  background: var(--comp1);
  color: #fff;
}

.btn-hub{
background-color: var(--main_color1);
width: 100%;
border: none;
border-radius: 5px;
color: var(--white) !important;
font-size: 25px;
padding: 10px;
cursor: pointer;
transition: .5s;
}
.btn-hub:hover{
background-color: var(--comp8);
transition: .5s;
}
.btn-disabled{
background-color: var(--grey);
color: var(--white);
cursor: default;
transition: .5s;
}
.btn-disabled:hover{
background-color: var(--grey);
transition: .5s;
}
.content-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
z-index: 1;
}

/* Checkbox Input Field */
.checkfield{
display: flex !important;
}
.checkfield input{
width: auto !important;
margin-bottom: 0px !important;
}
.checkfield label{
margin-left: 5px !important;
color: var(--dark_grey) !important;
}

info{
padding: 2px 7px;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
background-color: var(--main_color1);
color: white;
transition: 1s;
}

info:hover{
background-color: var(--main_color2);
transition: 1s;
}
.page-title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.page-title h1{
font-size: 30px;
color: var(--main_color2);
font-weight: bold;
}

.page-title button{
background-color: var(--main_color2);
/* width: 150px; */
border: none;
border-radius: 5px;
color: var(--white) !important;
text-transform: uppercase;
font-weight: 500;
font-size: 20px;
padding: 5px 10px;
cursor: pointer;
transition: .5s;
}
.page-title button:hover{
background-color: var(--main_color1);
transition: .5s;
}

/* .page{
margin: 10px 20px!important;
} */
.permission{
background: var(--main_color1);
border-radius: 50%;
padding: 0px 7px;
color: var(--white);
font-size: 14px;
}

.hover-information{
position: absolute;
transform: translate(640%, 600%);
background: var(--main_color1);
border-radius: 50%;
padding: 0px 8px;
color: var(--white);
font-size: 14px;
}

.btn-save, .btn-cancel{
background-color: var(--main_color2);
/* width: 150px; */
border: none;
border-radius: 5px;
color: var(--white) !important;
text-transform: uppercase;
font-weight: 500;
font-size: 20px;
padding: 10px 15px;
cursor: pointer;
transition: .5s;
}
.btn-cancel{
background-color: var(--main_red);
}
.btn-save:hover{
background-color: var(--main_color1);
transition: .5s;
}
.btn-cancel:hover{
background-color: var(--main_red_hover);
transition: .5s;
}
.center-dt{
width: 50%;
margin: auto;
}
.loading{
height: 806px;
display: flex;
justify-content: center;
align-items: center;
}
.spinner{
font-size: 80px;
color: var(--dark_grey);
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 
100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
} 
}
.table-icon{
/* font-size: 20px!important; */
color: var(--main_color2)!important;
cursor: pointer;
transition: .5s;
}
.table-icon:hover{
color: var(--main_color1)!important;
transition: .5s;
}

svg{
width: 20px;
}

.sidebar svg,
.slidebar svg{
margin-left: 8px;
}
/* Talvez precise colocar no button apenas, mas isso pode causar erros */
.page-title button svg{
display: flex;
padding: 4px 0px;
}

.breadcrumbs {
margin: 1rem 0;
padding: .8em 1em;
border-radius: .3rem;
background: var(--comp2);
white-space: nowrap;
margin-bottom: 20px;
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
align-items: center;
}

.page-content{
height: 100%;
max-height: 80vh;
margin: 1rem 0;
padding: .8em 1em;
border-radius: .3rem;
background: var(--white);
white-space: nowrap;
}

@media only screen and (max-width: 768px){
 .page-content {
     padding: 5px;
 }
}

.v-application--wrap{
min-height: 100% !important;
}

.table-icon{
cursor: pointer;
color: dodgerblue !important;
}
.table-icon:hover{
color: steelblue !important;
}

.btn-create{
background-color: dodgerblue;
/* width: 150px; */
border: none;
border-radius: 5px;
color: var(--white) !important;
text-transform: uppercase;
font-weight: 500;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
transition: .5s;
}
.btn-create:hover{
background-color: steelblue;
transition: .5s;
}
.btn-create:disabled{
background-color: lightgrey;
transition: .5s;
cursor: not-allowed;
}

select{
width: 100% !important;
height: 36px !important;
padding: 5px !important;
margin-bottom: 5px !important;
border: 1px solid #ccc !important;
border-radius: 5px !important;
outline: none !important;
font-size: 16px !important;
background-color: #fff;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 1em;
}
select:focus{
  border-color: var(--main_color2) !important;
  transition: .5s !important;
}

.input-vuetifyless{
width: 100% !important;
height: 36px !important;
padding: 5px !important;
margin-bottom: 5px !important;
border: 1px solid #ccc !important;
border-radius: 5px !important;
outline: none !important;
font-size: 16px !important;
background-color: #fff;
}
.input-vuetifyless:focus{
  border-color: var(--main_color2) !important;
  transition: .5s !important;
}

.textarea-vuetifyless{
width: 100% !important;
padding: 5px !important;
margin-bottom: 5px !important;
border: 1px solid #ccc !important;
border-radius: 5px !important;
outline: none !important;
font-size: 16px !important;
background-color: #fff;
}
.textarea-vuetifyless:focus{
border-color: var(--main_color2) !important;
transition: .5s !important;
}

.div-form{
display: flex; 
flex-direction: column;
padding: 10px;
}

.btn-add{
width: 40px;
height: 36px;
background-color: dodgerblue;
border: none;
border-radius: 5px;
color: var(--white) !important;
text-transform: uppercase;
font-weight: 300;
font-size: 15px;
padding: 5px;
cursor: pointer;
transition: .5s;
}

.btn-remove{
width: 40px;
height: 36px;
background-color: palevioletred;
border: none;
border-radius: 5px;
color: var(--white) !important;
text-transform: uppercase;
font-weight: 300;
font-size: 15px;
padding: 5px;
cursor: pointer;
transition: .5s;
}

.fa-fix{
font-size: 16px !important;
width: 14px !important;
vertical-align: middle;
}

.fa-fix-lg{
font-size: 24px !important;
width: 20px !important;
vertical-align: middle;
}

.fa-fix-elg{
font-size: 72px !important;
width: 60px !important;
vertical-align: middle;
}

.grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
margin-bottom: 20px;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.col-5{
width: 5%;
}
.col-10{
width: 10%;
}
.col-15{
width: 15%;
}
.col-20{
width: 20%;
}
.col-25{
width: 25%;
}
.col-30{
width: 30%;
}
.col-35{
width: 35%;
}
.col-40{
width: 40%;
}
.col-45{
width: 45%;
}
.col-50{
width: 50%;
}
.col-55{
width: 55%;
}
.col-60{
width: 60%;
}
.col-65{
width: 65%;
}
.col-70{
width: 70%;
}
.col-75{
width: 75%;
}
.col-80{
width: 80%;
}
.col-85{
width: 85%;
}
.col-90{
width: 90%;
}
.col-95{
width: 95%;
}
.col-100{
width: 100%;
}

/* Scrollbar */
::-webkit-scrollbar {
width: 5px;
background: white; 
}
::-webkit-scrollbar-track {
background: white; 
}
::-webkit-scrollbar-thumb {
background: #181818; 
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background: #888; 
}