/* CLASSES PRINCIPAIS */
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
  font-family: "Roboto", sans-serif;
  background-color:#F2F2F2;
}

.content {
  flex-grow: 1;
}

#loading-overlay {
  position: fixed;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  /* backdrop-filter: blur(5px); */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #cac7c7;
  border-top-color: #000000;
  animation: loader-circle 1s linear infinite;
}

@keyframes loader-circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pagination > li > a{
  color: #000000;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: #f75959;
  border-color: #f75959;
}

.truncate{
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-presentation {
  display: flex;
}

#input-delete-all {
  margin-right: 10px
}

.input-checkbox-delete {
  margin-right: 10px
}

.btn-delete-batch {
  height: 30px;
}

/* Modals */
#copy-generalRegisters{
  border-radius: 5px;
}

#p-text-copy-generalRegisters{padding: 20px 36px;}

.p-empty-data, .p-none-registers{
  color: #f75959;
  font-size: 20px;
  text-align: center;
  padding: 50px !important;
}

.label-required{color: #fd0400; font-size: 15px;}

@media (min-width:1201px) {
  .generalRegisters{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .generalRegisters{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .generalRegisters{
    width: 100%;
  }
}

/*Departamento*/
#copy-department{
  border-radius: 5px;
}

#p-text-copy-department{padding: 0 45px;}

@media (min-width:1201px) {
  .department{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .department{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .department{
    /* margin-left: -2%; */
    width: 100%;
  }
}

/*Centro de Custo*/
#copy-costCenter{
  border-radius: 5px;
}

#p-text-copy-costCenter{padding: 0 45px;}

@media (min-width:1201px) {
  .costCenter{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .costCenter{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .costCenter{
    /* margin-left: -2%; */
    width: 100%;
  }
}

/*Ramal*/
#copy-ramal{
  border-radius: 5px;
}

#p-text-copy-ramal{padding: 0 45px;}

@media (min-width:1201px) {
  .ramal{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .ramal{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .ramal{
    /* margin-left: -2%; */
    width: 100%;
  }
}

/*Código de Conta*/
#copy-accountCode{
  border-radius: 5px;
}

#p-text-copy-accountCode{padding: 0 45px;}

@media (min-width:1201px) {
  .accountCode{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .accountCode{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .accountCode{
    /* margin-left: -2%; */
    width: 100%;
  }
}

/*Tronco*/
#copy-trunk{
  border-radius: 5px;
}

#p-text-copy-trunk{padding: 0 45px;}

@media (min-width:1201px) {
  .trunk{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .trunk{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .trunk{
    /* margin-left: -2%; */
    width: 100%;
  }
}

/*Operador*/
#copy-operator{
  border-radius: 5px;
}

#p-text-copy-operator{padding: 0 45px;}

@media (min-width:1201px) {
  .operator{
    margin-left: -50%;
    width: 200%;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  .operator{
    margin-left: -25%;
    width: 150%;
  }
}

@media (min-width:481px) and (max-width:768px) {
  .operator{
    /* margin-left: -2%; */
    width: 100%;
  }
}

.main {background-color:#F2F2F2;padding:100px 30px 30px 60px;min-height:94vmin}

.mainAdmin {background-color:#F2F2F2;padding:100px 30px 30px 55px;min-height:94vmin}

/* CSS SIDEBAR */
@media (min-width:768px) {
  body {
      padding-top: 0
  }
}

.navbar.fixed-top {
  background: linear-gradient(35deg, #f75959 , #f35587);
}

@media (min-width:768px) and (max-width:1250px) {
  .nav-text {
    display:none;
  }
}

.navbar.fixed-top a {
  display: block;
  color:#f8f8f8;
  padding: 15px;
  text-decoration: none;
  font-size:15px;
}

.navbar.fixed-top a.current-screen {
  display: block;
  color:rgba(240, 240, 240, 0.733);
  padding: 15px;
  text-decoration: none;
  font-size:15px;
}

.navbar.fixed-left a:hover:not(.active) {
  color:#ffff;
  cursor: pointer;
}

.navbar.fixed-top a:hover{
  color:rgba(240, 240, 240, 0.733);
  cursor: pointer;
}

.navbar-nav{margin-right:30px;}

.logo-container{padding:10px}
.logo-sidebar{
  margin-left:30px;
  max-width:180px;
}

.sidebar-header{padding: 10px 15px;}

.fa-navbar{width:20px;}

/* CSS CHECKLIST */
.box-empresa, .box-checklist{
  background-color:#ffffff;
  border-radius: 10px;
  padding: 10px 0px 10px 0px;
  margin-top:20px;
  box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
}

.subtitle{
  padding:5px 0px 10px 0px;
  margin-left:15px;
}

.example{color:#E85754;}
.title{ font-size:20px;}
.info{font-size:17px;}
.fa-circle-info:hover{text-decoration:none;color:#2774e9;}
.img-modal{width:100%;}


/* CSS FORMULÁRIO */
.form-control:disabled, .form-control[readonly] {
  padding-left: 5px;
}

.form-search{padding-left:5px !important}
.form-control{padding:0}

.forms-content{
  padding-top: 15px;
  /* padding-left: 15px; */
}

.form-input{
  height: 55px;
  border:none;
  border-bottom: 1px solid #CCCCCC;
  background: transparent;
}

.form-checklist{
  border:none;
  border-bottom: 1px solid #CCCCCC;
  background: transparent;
}

.form-login{
  border:none;
  border-bottom: 1px solid #CCCCCC;
  background: transparent;
}

.form-search:focus{
  box-shadow:none;
  border:1px solid #CCCCCC;
}

.form-input{text-indent:33px;}

.form-input:focus, .form-checklist:focus, .form-login:focus{
  box-shadow: none;
  border:none;
}

@media (max-width:768px){
  .form-search, .btn-search{bottom:5px}
}

/* CSS ICONS */
.fa-bars {
  color:#ffff;
}

.fa-search{
  top:20px;
  left: 20px;
  color: #f8f8f8;
}

.fa-circle-plus{
  color:#58E086;
  /* justify-content: space-between;
  align-items: center; */
}

.fa-circle-plus:hover{color:#43c56e;}
.fa-circle-info{color:#588EDD;}

.fa-lock{color: #E85754;}
.fa-lock:hover{color: #d63734}

.fa-lock-open{color: #58E086;}
.fa-lock-open:hover{color: #4FD377;}

/* CSS BOTÕES */
/* .btn-upload{background-color:#8858e0;color:#ffffff;} */
.btn-navigation {
  padding-right: 15px;
}

.btn-search{
 background-color:#d3d3d3;color:#ffffff;
 box-shadow:none !important;
}

.btn-search:hover{
  background-color:#c4c4c4;
 }

.btn{
  box-shadow:0px 3px 5px rgba(50, 50, 50, 0.2);
}

.btn-enviar-2{margin-top:5px}
.btn-send{margin-top:10px}
.btn-send, .btn-confirm{background-color:#58E086;color:#ffffff;}
.btn-enviar{width:100%;background-color:#58E086;color:#ffffff;}

.btn-add {background-color:#58E086;color:#ffffff;margin-left:30px;}
.btn-add:hover {background-color:#4FD377}
.btn-ramais{margin-left: inherit;}
.btn-new {background-color:#588EDD;color:#ffffff;margin-left:30px;}
.btn-new:hover {background-color:#587ADB}

.btn-new-2 {background-color:#588EDD;color:#ffffff;}
.btn-new-2:hover {background-color:#587ADB}

.btn-save, .btn-save{background-color:#58E086;color:#ffffff;}
.btn-save:hover, .btn-save:hover, .btn-save:hover{background-color:#4FD377}
.btn-add-2{background-color:#58E086;color:#ffffff;}
.btn-add-2:hover, .btn-send:hover, .btn-confirm:hover{background-color:#4FD377}
.btn-view{background-color:#588EDD;color:#ffffff}
.btn-view:hover{background-color:#587ADB}

.btn-edit, .btn-download{background-color:#588EDD;color:#F2F2F2;}
.btn-delete{background-color:#E85754;color:#F2F2F2;}
.btn-edit:hover, .btn-download:hover{background-color:#4366c4;color:#F2F2F2;}
.btn-delete:hover{background-color:#d63734;color:#F2F2F2;}

.submit{
  background: linear-gradient(35deg, #f75959 , #f35587);
  border:none;
  height: 50px;
}

.submit:hover{
  background: linear-gradient(35deg, #f35587 , #f75959);
  border:none
}

.pull-right{float:right}

.footer {
  bottom: 0;
  left: 0;
  position: relative;
}

@media (min-width: 768px){
  .footer{
    height: 55px;
    width: 100%;
  }
} 


/* CSS LOGIN */
.container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.login-section {
  padding: 7em 0;
}

.img-login{max-width: 300px;padding:10px}
.img-login{
  width:100%;
  height: auto;
  align:center;
}

.login-wrap{
  position:relative;
  background:#ffffff;
  box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
}

.text-wrap{
  background: linear-gradient(35deg, #f75959 , #f35587);
  color: #ffffff;
  box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
  width:50%;
}

.login-wrap{
  width:50%;
}

/* CSS PAINEL ADM */
.box-clientes{
  background-color:#ffffff;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
  margin-top:20px;
  box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
}

.nav-link{
  color:#000000;
}

/* CSS RESPONSIVO */
@media (min-width: 992px) {
  .container{
      max-width: 960px;
  }
}

@media (max-width: 991.98px){
.text-wrap, .login-wrap {
    width: 100%;
  }
}


.alert{font-size:15px;}