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;
}

.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{
  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{
  background-color: var(--main_green);
}
.btn-save:hover{
  background-color: var(--main_green_hover);
  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;
  overflow-y: auto;
 }

 @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;
  overflow: auto;
}

.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: 20px !important;
  width: 16px !important;
  vertical-align: middle;
}

.fa-fix-lg{
  font-size: 24px !important;
  width: 20px !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; 
}