:root {
  font-size: 60%;
  --font-name: Nunito;

  /* CORES CUSTOMIZADAS   */
  --color-background: #F2F4F5;
  --color-secondary: #52518E;
  --color-grey-dark: #696969;
  --color-grey-light: #CFCFCF;
  --color-ice: #F3F3F3;
  --color-font-button: #FFF;
  --color-lighter: #FFF;

  /* CORES PADRÃO DO SISTEMA */
  --color-default-normal: #696969;
  --color-default-normal-dark: #4F4F4F;

  --color-default-success: #43CD80;
  --color-default-success-dark: #2E8B57;

  --color-default-danger: #EE3B3B;
  --color-default-danger-dark: #8B2323;

  --color-default-info: #4F94CD;
  --color-default-info-dark: #36648B;

  --color-default-warning: #EE9A00;
  --color-default-warning-dark: #CD8500;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, #portal-vendas {
  height: 100vh;
  background-color: var(--color-background);
}

#portal-vendas,
input,
button,
textarea,
select {
  font: 500 1.3rem var(--font-name), sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input {
  border: 0.1rem solid #c1c1c1;
  border-radius: 0.8rem;
  background: var(--color-lighter);
  padding: 1rem 0.8rem;
  outline: 0;
  transition: border-bottom 0.5s;
  color: #1c1c1c!important;

  font: 400 1.7rem var(--font-name);
}

input:disabled {
  background: #e0e0e0;
}

select {
  box-sizing: content-box;
  border: 0.1rem solid #c1c1c1;
  border-radius: 0.8rem;
  background: var(--color-lighter);
  padding: 0.5rem 0;
  outline: 0;
  transition: border-bottom 0.5s;

  font: 400 1.7rem var(--font-name);
}

button {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

button:disabled {
  cursor: not-allowed;
  background-color: var(--color-grey-light)!important;
}

button.change-button {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #FF4500;
  color: #fff;
  border: 0;
  padding: 0.2rem 1rem;
  margin-left: 2rem;
  border-radius: 0.8rem;
}

.change-button-icon {
  margin-left: 1rem;
  cursor: pointer;
}

select {
  height: 3.55rem !important;
}

textarea {
  border: 0.1rem solid #c1c1c1;
  border-radius: 0.8rem;
  background: var(--color-lighter);
  padding: 1rem 0.8rem;
  outline: 0;
  transition: border-bottom 0.5s;
  color: #1c1c1c!important;

  font: 400 1.7rem var(--font-name);
  width: 100%;
  resize: vertical;
}

label {
  font-weight: 600;
  color: #3c3c3c;
}

span.required {
  color: #ff0000;
}

/* input:focus {
  border: none;
  border-bottom: 0.2rem solid var(--color-main-dark);
}

input:hover {
  border: none;
  border-bottom: 0.2rem solid var(--color-main);
} */

input[type="file"] {
  display: none;
}

input[type="number"] {
  text-align: center;
}

/* Enquanto o portal estiver carregando, esconder a div content */
main div.app-container main.container div.content {
  visibility: hidden;
}

div.campos {
  flex-grow: 1;
}

.f3-block {
  display: flex;
  margin-right: 2rem;
}

.f3-block button {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: -4rem;
  border: 0;
  border-radius: 0 0.8rem 0.8rem 0;
  width: 5rem;
  background: #3c3c3c;
  color: #fff;
}

.input-search-container {
  display: flex;
  align-items: center;
}

.input-search-container .input-search-icon {
  margin-right: -3.2rem;
  z-index: 2;
}

.input-search-container button.btn-filters {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 4rem;
  padding: 0 2rem;

  background: var(--color-main);
  color: #fff;
  border: 0;
  border-radius: 0.8rem;
  margin: 0 2rem;
  transition: 0.2s ease-out;
}

.input-search-container button.btn-filters:hover {
  background: var(--color-main-dark);
}

.input-search-container button.btn-filters span.btn-filters-text {
  margin-left: 1rem;
}

.input-search-container div.filters-container {
  display: none;
  flex-direction: column;
  
  position: absolute;
  min-height: 24rem;
  min-width: 40rem;
  background: #f0f0f0;
  /* margin-top: 48rem;
  left: 30.5%; */
  border-radius: 0.8rem;
  padding-bottom: 2rem;
  border: 0.1rem solid #bebebe;
}

.input-search-container div.filters-container.opened {
  display: flex;
}

.input-search-container div.filters-container div.filters-titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  padding: 1rem 2rem;
  font-size: 1.6rem;
  color: #1c1c1c;
}

.input-search-container div.filters-container div.filters-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  padding: 0 2rem;
  margin-top: 2rem;
}

.input-search-container div.filters-container div.filters-footer button {
  border: 0;
  padding: 0.5rem 2rem;
  background: var(--color-main);
  color: #fff;
  border-radius: 0.8rem;
  transition: 0.2s ease-out;
}

.input-search-container div.filters-container div.filters-footer button:hover {
  background: var(--color-main-dark);
}

.input-search-container div.filters-container div.filters-titles .filters-titles-clean-all {
  font-size: 1.3rem;
  color: #5c5c5c;
  cursor: pointer;
  transition: 0.2s ease-out;
}

.input-search-container div.filters-container div.filters-titles .filters-titles-clean-all:hover {
  color: #4F94CD;
}

.input-search-container div.filters-container hr {
  width: 100%;
  border: 0.1rem solid #e1e1e1;
}

.input-search-container div.filters-container div.filters {
  display: flex;
  /* width: 100%; */
  padding: 0 2rem;
}

.input-search-container div.filters-container div.filters fieldset {
  padding: 0 1rem;
  border: 0.1rem solid #e1e1e1;
  margin-top: 2rem;
  border-radius: 0.8rem;
  margin-right: 1rem;
}

.input-search-container div.filters-container div.filters div.filter {
  display: flex;
  flex-direction: column;
  /* Scroll nos filtros */
  max-height: 35rem;
  overflow-y: auto;
}
  /* Scroll nos filtros */

.input-search-container div.filters-container div.filters div.filter::-webkit-scrollbar {
  width: 12px;     
}
.input-search-container div.filters-container div.filters div.filter::-webkit-scrollbar-track {
  background: #EEEEEE;    
  border-radius: 20px;       

}

.input-search-container div.filters-container div.filters div.filter::-webkit-scrollbar-thumb {
  background-color: #CCCCCC;    
  border-radius: 20px;       
  border: 3px solid #EEEEEE;  
}
/* ************* */

.input-search-container div.filters-container div.filters div.filter > span {
  font-size: 1.7rem;
}

.input-search-container div.filters-container div.filters div.filter ul li {
  list-style: none;
  margin: 1rem 0;
  padding: 1rem;
}

.input-search-container div.filters-container div.filters div.filter ul li.status-filter {
  display: flex;
  align-items: center;

  background: #fff;
  border-radius: 0.8rem;
  cursor: pointer;

  transition: 0.2s ease-out;
}

.input-search-container div.filters-container div.filters div.filter ul li.status-filter:hover {
  background: #b5b5b5;
}

.input-search-container div.filters-container div.filters div.filter ul li.numeric-filters {
  display: flex;
  flex-direction: column;

  border-bottom: 0.1rem solid #e1e1e1;
}

.input-search-container div.filters-container div.filters div.filter ul li.numeric-filters div.fields {
  display: flex;
}

.input-search-container div.filters-container div.filters div.filter ul li.numeric-filters div.field {
  display: flex;
  flex-direction: column;
}

.input-search-container div.filters-container div.filters div.filter ul li.numeric-filters div.field + div.field {
  margin-left: 1rem;
}

.input-search-container div.filters-container div.filters div.filter ul li.numeric-filters div.field input {
  height: 3rem;
  border-radius: 0.3rem;
  font-size: 1.3rem;
  width: 10rem;
}

.input-search-container div.filters-container div.filters div.filter ul li.date-filters {
  display: flex;
  flex-direction: column;
}

.input-search-container div.filters-container div.filters div.filter ul li.date-filters div.fields {
  display: flex;
}

.input-search-container div.filters-container div.filters div.filter ul li.date-filters div.field {
  display: flex;
  flex-direction: column;
}

.input-search-container div.filters-container div.filters div.filter ul li.date-filters div.field + div.field {
  margin-left: 1rem;
}

.input-search-container div.filters-container div.filters div.filter ul li.date-filters div.field input {
  height: 3rem;
  border-radius: 0.3rem;
  font-size: 1.3rem;
}

.input-search-container div.filters-container div.filters div.filter ul li.filter-active {
  background: #7c7c7c;
  color: #fff;
}

.input-search-container div.filters-container div.filters div.filter ul li div.status-filter-color {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 2rem;
  background: #000;
  margin-right: 1rem;
}

input[type='search'].input-search {
  border: 0.1rem solid #B5B5B5;
  border-radius: 0.8rem;
  padding-left: 4rem;
  width: 50rem;
}

input:read-only,
textarea:read-only {
  background-color: #f5f5f5;
  color: #3c3c3c!important;
}

table.data-table > thead > tr th {
  border-bottom: 0.5rem solid var(--color-grey-light);
  padding: 2rem 0;
  color: var(--color-grey-dark);
  font-size: 1.2rem;
}

table.data-table > thead > tr th.STATUS {
  width: 7%;
}

table.data-table > tbody > tr td {
  border-bottom: 0.1rem solid var(--color-grey-light);
  padding: 0.4rem 0;
  font-size: 1.2rem;
  white-space: nowrap;
}

table.data-table > tbody > tr td input {
  font-size: 1.2rem;
  min-width: 10rem;
  /* margin: 0 0.5rem; */
  width: 100%;
}

table.data-table > tbody > tr td div.campositens {
  min-width: 8rem;
}

table.data-table > tbody > tr td input[type="date"] {
  width: 14rem;
  font-size: 1.2rem;
}

table > tbody tr.selected-row {
  background: var(--color-default-info);
  color: var(--color-font-button)
}

table > tbody tr {
  transition: background 0.3s ease-out;
}

table > tbody tr:hover {
  background-color: #E8E8E8;
  cursor: pointer;
  color: #000;
}

table > tbody tr .imgprodutos {
  height: 4rem;
  width: 4rem;
}

table > tbody tr td input[type="text"] {
  width: 90%;
}

table > tbody tr td input[type="number"] {
  width: 50%;
}

table > tfoot tr td {
  padding: 3rem 0;
  font-size: 1.6rem;
}

table tr td .button-delete-product {
  background: var(--color-default-danger);
  border: 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.8rem;
  width: 2.8rem;

  transition: 0.3s background ease-out;
}

table tr td .button-delete-product box-icon {
  height: 2rem;
}

table tr td .button-delete-product:hover {
  background: var(--color-default-danger-dark);
}

table tr td .button-add-product {
  background: var(--color-default-success);
  border: 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.8rem;
  width: 2.8rem;

  transition: 0.3s background ease-out;
}

table tr td .button-add-product box-icon {
  height: 2rem;
}

table tr td .button-add-product:hover {
  background: var(--color-default-success-dark);
}

#portal-vendas .app-container {
  display: flex;
}

#portal-vendas > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1rem;
  background: var(--color-lighter);
  border-bottom: 0.1rem solid var(--color-grey-light);
  height: 6rem;
}

#portal-vendas > header .company-logo {
  max-height: 5rem;
  max-width: 10rem;
}

#portal-vendas > header .header-user-info {
  display: flex;
  align-items: center;
}

#portal-vendas > header .header-user-info strong {
  color: var(--color-main);
  font-size: 1.6rem;
}

#portal-vendas > header .header-user-info span {
  color: var(--color-grey-dark);
}

#portal-vendas > header .header-user-info img {
  width: 3.2rem;
  margin: 0 1rem;
}

#portal-vendas > header .user-settings-button {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  border-radius: 2rem;
  width: 2rem;
  height: 2rem;
}

#portal-vendas > header .user-settings-button .user-settings {
  margin-left: 1rem;
  cursor: pointer;

  transition: 0.3s background ease-out;
}

#portal-vendas > header .user-settings-button .user-settings:hover {
  background: #F5F5F5;
}

#portal-vendas > header .user-settings-button .user-settings[active] {
  color: var(--color-main)!important;
}

[hidden-element] {
  display: none;
}

#user-dropdown {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;

  right: 7rem;
  top: 13rem;
  padding: 2rem 0;
  border-radius: 0.8rem;
  width: 40rem;

  position: absolute;
  background-color: #fff;
  border: 0.1rem solid #CFCFCF;

  z-index: 9999;
}

#user-dropdown[dropdown-active] {
  visibility: visible !important;
}

#user-dropdown ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 2rem;
}

#user-dropdown ul li {
  list-style: none;
  padding: 1.5rem 0;
}

#user-dropdown ul li + li {
  border-top: 0.1rem solid #CFCFCF;
}

#user-dropdown ul li label {
  font-weight: 600;
}

#user-dropdown ul li select {
  width: 100%;

  border: 0.1rem solid #cfcfcf;
  border-radius: 0.8rem;

  margin-top: 1rem;
}

#user-dropdown ul li button {
  width: 100%;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 0;
  padding: 1rem;
  border-radius: 0.8rem;

  transition: 0.2s background ease-out, 0.2s color ease-out;
}

#user-dropdown ul li button:hover {
  background: var(--color-main);
  color: #fff;
}

#user-dropdown ul li button .dropdown-button-icon {
  margin-right: 2rem;
}

#portal-vendas > main-footer footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  background-color: #fff;
  border-top: #CFCFCF;
  color: #696969;
  font-size: 1.2rem;
  padding: 0.1rem 3rem;
  position: fixed;
  bottom: 0;
}

#portal-vendas > main-footer footer span {
  padding: 0.5rem;
}

main.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  padding-left: 7rem;
}

main.container > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  color: var(--color-grey-dark);
  border-bottom: 0.1rem solid var(--color-grey-light)
}

main.container > header div.compay-container fieldset {
  display: flex;
  align-items: center;
  /* width: 30rem; */
  padding: 1rem 2rem;
}

main.container > header div.compay-container fieldset > div.context-item {
  display: flex;
  align-items: center;
}

main.container > header div.compay-container fieldset > div.context-item + div.context-item {
  margin-left: 3rem;
}

main.container > header div.compay-container fieldset > div.context-item select {
  font-size: 1.2rem;
  padding: 0;
  height: auto !important;
  border-radius: 0.5rem;
  width: 10rem;
}

main.container > header div.compay-container fieldset div.context-item > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

main.container > header .page-name .page-name-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
}

main.container > header .page-name {
  display: flex;
  align-items: center;
  font-size: 2.5rem;
  margin-left: 1rem;
}

main.container > header .company-name {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  margin-right: 5rem;
}

main.container > header .company-name .company-name-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1.5rem;
}

main.container > header .company-name .txtSubsidiarySelect {
  height: 2rem !important;
  font-size: 1.5rem;
  padding: 0 1rem;
  border-radius: 0.3rem;
  width: 18rem;
}

main.container > header .company-name span select {
  height: 2rem!important;
  width: 100%;
  flex-grow: 1;
  border-radius: 0.5rem;
}

main.container > header .compay-container {
  display: flex;
}

main.container div.content {
  display: flex;
  width: 100%;
  overflow: auto;
}

main.container div.content .panel-content {
  display: flex;
  flex-direction: column;

  width: 99%;
  height: 81rem;
  padding: 2rem;
  
  background: #fff;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 0.8rem;
}

main.container div.content .panel-content .panel-content-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

main.container div.content .panel-content .panel-content-header .totalizer-container span strong {
  text-transform: uppercase;
  color: #3c3c3c;
}

main.container div.content .panel-content .panel-content-header .page-buttons-container {
  display: flex;
  flex-direction: center;
  height: 8rem;
}

main.container div.content .panel-content .panel-content-header .page-buttons-container .page-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  height: 8rem;
  width: 8rem;
  border-radius: 10rem;

  transition: 0.2s background ease-out;
}

main.container div.content .panel-content .panel-content-header .page-buttons-container .page-button:hover {
  background: #fbfbfb;
}

main.container div.content .panel-content .panel-content-header .page-buttons-container .page-button img {
  height: 3rem;
}

.f3-modal {
  display: flex;
  flex-direction: column;
  background: #FFF;
  border: 0.1rem solid #b5b5b5;
  width: 90rem;
  max-height: 80rem;
  border-radius: 0.5rem;
  position: absolute;

  z-index: 100;
}

.f3-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 0.1rem solid #E5E5E5;
  padding: 2rem;

  color: #3c3c3c;
}

.f3-modal main {
  display: flex;
  flex-direction: column;
  padding: 2rem;

  color: #3c3c3c;
}

.f3-modal footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem;

  border-top: 0.1rem solid #E5E5E5;
}

/* TODO: Tornar esse cara responsivo */
.items-display {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

main.container div.content .panel-content .items-display .items-display-title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-grey-dark);
  border-bottom: 0.5rem solid var(--color-grey-light);
  padding: 2rem 0;
}

main.container div.content .panel-content .items-display .items-display-title-bar span {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

main.container div.content .panel-content .items-display .items-display-data {
  display: flex;
  width: 100%;
  height: 100%;
}

main.container div.content .panel-content .items-display .items-display-data ul {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

main.container div.content .panel-content .items-display .items-display-data ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

main.container div.content .panel-content .items-display .items-display-data ul li .item-data-field {
  /* width: 10.5rem; */
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paginate-buttons-container button.btn-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  padding: 0;
}

.barrapages,
.paginate-buttons-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.barrapages button,
.paginate-buttons-container button {
  background: var(--color-main);
  border: 0;
  color: var(--color-font-button);
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  margin: 2rem;
  transition: background 0.2s ease-out;

  display: flex;
  align-items: center;
}

main.container div.content .barrapages span + button,
main.container div.content .paginate-buttons-container span + button  {
  margin-right: 0;
}

main.container div.content .barrapages button:hover,
main.container div.content .paginate-buttons-container button:hover {
  background: var(--color-main-dark);
}

main.container div.content .panel-content.complement-panel .complement-panel-title {
  font-size: 2.5rem;
  color: var(--color-grey-dark);
  border-bottom: 0.1rem solid var(--color-grey-light);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

main.container div.content .panel-content.complement-panel .complement-panel-title > div {
  display: flex;
  align-items: center;
}

main.container div.content .panel-content.complement-panel .complement-panel-title .panel-title-icon {
  color: var(--color-main);
  margin-right: 1rem;
}

.panel-content.complement-panel .complement-panel-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

div.modal-panel .complement-panel-content {
  width: 100%;
  margin-top: 3rem;
  overflow: auto;
}

.complement-panel-menu-buttons {
  display: flex;
  align-items: center;
}

.complement-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 2rem 0;
}

main.container div.content .panel-content-modal {
  display: flex;
  flex-direction: column;
}

main.container div.content #carrinhotudo .total-count-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.1rem solid var(--color-grey-light);
  padding-bottom: 2rem;
}

main.container div.content #carrinhotudo .total-count-container .total-values-cards {
  display: flex;
  align-items: center;
}

main.container div.content #carrinhotudo .total-count-container .total-values-cards .search-produtos-container {
  display: flex;
  flex-direction: column;
  margin-left: 10rem;
}

main.container div.content #carrinhotudo .total-count-container .total-values-cards .search-produtos-container > div {
  display: flex;
  align-items: center;
}

main.container div.content #carrinhotudo .total-count-container .total-values-cards .search-produtos-container input {
  width: 40rem;
}

main.container div.content #carrinhotudo .total-count-container .total-values-cards .search-produtos-container button {
  height: 4.4rem;
  width: 4.4rem;
  border-radius: 0 0.8rem 0.8rem 0;
  border: 0;
  background: var(--color-main);
  margin-left: -2rem;
}

main.container div.content #carrinhotudo .total-count-container .total-values-cards .search-produtos-container span {
  display: none;
  color: #8f8f8f;
}

main.container div.content #carrinhotudo .total-count-container .cart-value {
  font-size: 3rem;
  background: var(--color-default-success);
  color: var(--color-lighter);
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
  margin-right: 2rem;
}

main.container div.content #carrinhotudo .total-count-container .cart-value-percent {
  font-size: 3rem;
  background: var(--color-default-warning);
  color: var(--color-lighter);
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
}

main.container div.content #carrinhotudo .total-count-container .cart-action-buttons {
  display: flex;
}

main.container div.content #carrinhotudo .total-count-container .cart-action-buttons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 7rem;
  width: 7rem;
  background: transparent;
  border: 0;
  margin-left: 4rem;
}

main.container div.content #carrinhotudo .filters-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 2rem 0;
  justify-content: flex-start;
}

main.container div.content #carrinhotudo .filters-container .memo {
  width: 100%;
}

main.container div.content #carrinhotudo .filters-container .memo .input-block {
  width: 100%;
}

main.container div.content #carrinhotudo .filters-container .input-block textarea {
  width: 100%;
  resize: vertical;
}

main.container div.content .totalizer-container {
  display: flex;
}

main.container div.content .totalizer-container .totais {
  margin-right: 2rem;
}

main.container div.content .totalizer-container .totais div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #F5F5F5;
  padding: 1rem;
  border-radius: 0.8rem;
}

main.container div.content .totalizer-container .totais div.active {
  border-width: 0;
  background: #B0C4DE;
}

main.container div.content .totalizer-container .totais div .botao {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 1rem;
  border: 0;
  box-shadow: none;
  width: 10rem;
}

table thead tr th.checkbox-table-container {
  width: 1rem;
}

.button-search-product-grade {
  border: 0;
  background: var(--color-main);
  padding: 1rem;
  border-radius: 0 0.8rem 0.8rem 0;
  cursor: pointer;
  transition: background 0.3s ease-out;
  margin-left: -6rem;
  margin-right: 3rem;

  display: flex;
  align-items: center;
}

.button-search-product-grade:hover {
  background: var(--color-main-dark);
}

.label-money {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-default-success-dark);
}

.searchcabec {
  width: 40rem;
}

.cabaclista {
  display: flex;
  flex-direction: column;
  border-bottom: 0.1rem solid var(--color-grey-light);
  padding-bottom: 3rem;
}

.divcabec {
  display: flex;
}

.divcabec input {
  width: 35rem;
  margin-right: 2rem;
}

#emailxml,
#emailboleto {
  display: none;
  align-items: center;
  justify-content: space-between;
}

#emailxml .buttons-display,
#emailboleto .buttons-display {
  display: flex;
  align-items: center;
}

.exit-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s ease-out;
}

.exit-button:hover {
  color: var(--color-default-danger)
}

div.loading-layer {
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  cursor: wait;
  z-index: 99998;
}

.loading-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 30rem;
  border-radius: 2rem;
  padding: 2rem;
  z-index: 99999;
}

.loading-div strong {
  font-weight: 600;
  font-size: 1.7rem;
  color: #4F4F4F;
}

.loading-div span {
  font-weight: 400;
  color: #4F4F4F;
  margin-top: 2rem;
}

.loading-div img {
  height: 3rem;
  margin-bottom: 3rem;
}

/* .swal2-title {
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.swal2-content {
  font-size: 1.7rem;
} */

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

.button-ok {
  display: flex;
  align-items: center;

  cursor: pointer;
  background: var(--color-default-success);
  color: #fff;
  padding: 0.3rem;
  border: 0;
  border-radius: 0.5rem;
  transition: background 0.3s ease-out;
}

.button-ok:hover {
  background: var(--color-default-success-dark);
}

.button-upload-file {
  display: flex;
  align-items: center;
  margin: 1rem;

  cursor: pointer;
  background: var(--color-default-info);
  color: #fff;
  padding: 0.3rem 2rem;
  border-radius: 0.5rem;
  transition: background 0.3s ease-out;
}

.button-upload-file:hover {
  background: var(--color-default-info-dark);
}

.button-upload-file .button-upload-file-icon {
  margin-right: 1rem;
}

.color-icon {
  color: var(--color-main);
}

.button {
  border: 0;
  background: #c1c1c1;
  padding: 1rem 1rem;
  border-radius: 0.8rem;
  cursor: pointer;
  text-transform: uppercase;

  display: flex;
  align-items: center;
}

.button .button-icon {
  margin-left: 1rem;
}

.button + .button {
  margin-left: 2rem;
}

.button.button-danger {
  background: var(--color-default-danger);
  color: var(--color-lighter);
  transition: background 0.7s ease-out;
}

.button.button-danger:hover {
  background: var(--color-default-danger-dark);
}

.button.button-success {
  background: var(--color-default-success);
  color: var(--color-lighter);
  transition: background 0.7s ease-out;
}

.button.button-success:hover {
  background: var(--color-default-success-dark);
  color: var(--color-lighter);
}

.input-price-table-container .f3-block {
  width: 20rem;
}

.input-price-table-container input {
  height: 3.5rem;
}

.input-price-table-container button {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-price-table-container button .input-search-icon {
  width: 2rem;
}

h1 {
  font-weight: 600;
  font-size: 2rem;
}

/* ----- HOMEPAGE ----- */
main.container div.content #home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--color-grey-dark);
}

main.container div.content #home .exibemensagem {
  background-color: var(--color-lighter);
  width: 80%;
  padding: 2rem 0;
  border-radius: 0.8rem;
  margin: 2rem 0;
}

main.container div.content #home #mensagemcliente {
  background-color: var(--color-lighter);
  width: 80%;
  padding: 2rem 4rem;
  border-radius: 0.8rem;
}

div.modal-layer {
  display: none;
  align-items: center;
  justify-content: center;

  background: transparent;
  position: absolute;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

div.modal-layer .modal-panel {
  display: flex;
  flex-direction: column;
  background: #FFF;
  border: 0.1rem solid #b5b5b5;
  width: 140rem;
  max-height: 80rem;
  border-radius: 0.5rem;

  z-index: 99;
}

div.modal-layer .modal-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 0.1rem solid #E5E5E5;
  padding: 2rem;

  color: #3c3c3c;
}

div.modal-layer .modal-panel footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem;
  width: 100%;

  border-top: 0.1rem solid #E5E5E5;
}

div.modal-layer .modal-panel#mostrardiv main {
  width: 100%;
}

div.modal-layer .modal-panel#doc {
  width: 60rem;
  min-height: 60rem;
  top: 16rem;
  left: 70rem;
}

div.modal-layer .modal-panel#mostrardiv {
  /* width: auto; */
  width: 150rem;
}

div.modal-layer .modal-panel header .modal-panel-header-title {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
}

div.modal-layer .modal-panel main {
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
}

div.modal-layer .modal-panel .items-display {
  width: 100%;
}

div.modal-layer .modal-panel#doc .menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  margin-bottom: 3rem;
}

div.modal-layer .modal-panel#doc main {
  width: 100%;
}

div.modal-layer .modal-panel#doc main .menu-actions > div {
  display: flex;
  align-items: center;
}

div.modal-layer .modal-panel#doc main input {
  margin-bottom: 0;
  width: 40rem;
}

div.table-details-container div.jumbotron {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #e1e1e1;
  margin: 1rem 0;
  padding: 0.5rem 0;
  border-radius: 0.8rem;
  font-size: 1.4rem;
}

/* ----- CSS DOS CADASTROS ---- */
#portal-vendas #incluir {
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
}

#portal-vendas #incluir .register-title {
  display: flex;
  align-items: center;

  color: var(--color-grey-dark);
  padding: 3rem 0;
  width: 100%;
  font-size: 3rem;
  border-bottom: 0.1rem solid var(--color-grey-light);
}

#portal-vendas #incluir .register-title .register-title-icon {
  margin-right: 1.5rem;
  color: var(--color-main);
}

#portal-vendas #incluicli main {
  display: flex;
  max-height: 80rem;
  padding: 3rem 2rem;
  overflow-y: auto;
}

#portal-vendas #incluir .fieldset {
  display: flex;
  width: 100%;
  overflow-y: auto;
  flex-wrap: wrap;
  padding: 3rem 0;
  border-bottom: 0.1rem solid var(--color-grey-light);
}

#portal-vendas #incluicli .fieldset .user-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#portal-vendas #incluicli .fieldset .user-info .field {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  justify-content: flex-start;
  margin-right: 1rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

#portal-vendas #incluicli .fieldset .user-info .field .field-label {
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
}

#portal-vendas #incluicli .fieldset .user-info .field .field-label .help-icon {
  margin-left: 1rem;
}

#portal-vendas #incluicli .fieldset .user-info .field label {
  font-size: 1.5rem;
}

.angular-tooltip {
  font-size: 1.5rem!important;
  background: #3c3c3c!important;
  border-radius: 0.5rem;
}

/* #portal-vendas #incluicli .fieldset .user-info .field .field-input {
  display: flex;
  align-items: center;
  flex-grow: 1;
} */

/* #portal-vendas #incluicli .fieldset .user-info .field .field-input input {
  width: 100%;
} */

#portal-vendas #incluicli .fieldset .user-info .field-textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  border: 0.1rem solid #f0f0f0;
  flex-grow: 1;
  width: 100%;
  min-height: 12rem;
  padding: 1rem;
  margin: 0.3rem;
}

#portal-vendas #incluicli .fieldset .user-info .field strong {
  font-size: 1.4rem;
  font-weight: 600;
}

#portal-vendas #incluicli .fieldset .user-info .field .input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#portal-vendas #incluicli .fieldset .user-info .field .input-group button {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  height: 4.5rem;
  width: 4.5rem;
  background: var(--color-main);
  color: #fff;

  border-radius: 0 0.8rem 0.8rem 0;

  /* margin-top: -3rem; */
  margin-left: -1rem;
}

#portal-vendas #incluicli .fieldset .user-info .field input,
#portal-vendas #incluicli .fieldset .user-info .field select {
  width: 100%!important;
}



#portal-vendas .input-block {
  display: flex;
  flex-direction: column;
  padding: 0.8rem;
  width: 100%;
  flex-grow: 1;
}

#portal-vendas .input-block label {
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
  /* text-transform: uppercase; */
}

#portal-vendas .input-block input,
#portal-vendas .input-block select  {
  width: 100% !important;
}

#portal-vendas .input-block .input-group {
  display: flex;
}

#portal-vendas .input-block .input-group button {
  border: 0;
  background: var(--color-main);
  color: var(--color-font-button);
  padding: 0 1rem;
  border-radius: 0 0.8rem 0.8rem 0;
  cursor: pointer;
  transition: background 0.3s ease-out;
  margin-left: -1rem;

  display: flex;
  align-items: center;
}

#portal-vendas .input-block .input-group button:hover {
  background: var(--color-main-dark);
}

#portal-vendas .input-block .input-group button.search-button .search-button-icon {
  width: 16px;
  height: 16px;
}

/* .campos-approval {
  display: flex;
}

.search-button-approval {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  height: 4.5rem;
  width: 4.5rem;
  background: var(--color-main);
  color: #fff;
  border-radius: 0 0.8rem 0.8rem 0;
  margin-left: -1rem;
} */

#portal-vendas .items-display.cart-table-container {
  max-height: 60rem;
  overflow: auto;
}

.accordion .accordion-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 2rem;
  padding: 1rem;
  background-color: var(--color-grey-light);
  cursor: pointer;
}

.accordion .accordion-content {
  display: none;
}

.accordion .accordion-content[active] {
  display: flex;
  max-height: 42rem;
  overflow-y: auto;
  background-color: #fff;
  border: 0.1rem solid var(--color-grey-light);
}

.panel-modal-actions {
  display: flex;
  justify-content: flex-end;
}

.panel-modal-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 3rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
}

.toast {
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 50rem;
  height: 5rem;
  position: fixed;
  top: 0;
  right: 0;
  margin: 8rem;
  transition: visibility 0s, opacity 0.5s linear;
  background-color: var(--color-grey-dark);
  animation: wiggle 2s;
  animation-delay: -1s;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  80% { transform: rotate(0deg); }
  85% { transform: rotate(5deg); }
  95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.toast .toast-icon {
  margin-right: 3rem;
}

.button-pdf-download {
  background: #4fbfe8;
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 1rem 2rem;
  border-radius: 0.8rem;
}

.table-title {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: 0.2s ease-out;
}

.table-title.ordered {
  color: #1C1C1A;
}

.table-title:hover {
  color: #1C1C1A;
}

.table-title .table-title-icon {
  margin-right: 0.3rem;
}

/* TODO: Ajustar CSS posteriormente */
.col-50 {
  width: 50%;
}

.col-100 {
  width: 100%;
}

.mostrardiv2 .menuhorizontal .bntmenu2 img {
  height: 3rem;
}

.details {
  display: flex;
  align-items: center;
  justify-content: space-between;
} 

.mostrardiv2 .order-details {
  display: flex;
  flex-direction: row;
  align-items: center;

  flex-wrap: wrap;
}

.mostrardiv2 .order-details .detail {
  display: flex;
  flex-direction: column;
  border: 0.1rem solid #f1f1f1;
  padding: 1rem;
  margin: 0.3rem 0;
}

.mostrardiv2 .order-details .detail strong {
  font-size: 1.7rem;
}

.mostrardiv2 .order-details .detail textarea {
  border: 0;
  resize: none;
}



.mostrardiv2 {
  flex-direction: column;
  background-color: #fff;
  z-index: 999;

  position: fixed;
  height: 80rem;
  width: 180rem;

  box-shadow: 4px 11px 59px 6px black;
  border-radius: 0.8rem;
}

.mostrardiv2 header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3c3c3c;
  color: #fff;
  margin-bottom: 2rem;
  padding: 2rem 1rem;
}

.mostrardiv2 header .headers-buttons-container {
  display: flex;
}

.mostrardiv2 header .headers-buttons-container button {
  display: flex;
  align-items: center;
  border: 0;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
  margin: 1rem;
}

.mostrardiv2 header .headers-buttons-container .button-approve {
  background-color: var(--color-default-success);
  transition: 0.2s background ease-out;
}

.mostrardiv2 header .headers-buttons-container .button-approve:hover {
  background-color: var(--color-default-success-dark);
}

.mostrardiv2 header .headers-buttons-container .button-reprove {
  background-color: var(--color-default-danger);
  transition: 0.2s background ease-out;
}

.mostrardiv2 header .headers-buttons-container .button-reprove:hover {
  background-color: var(--color-default-danger-dark);
}

.mostrardiv2 header .headers-buttons-container button .approval-button-icon {
  background: #fff;
  margin-left: 1rem;
  border-radius: 3rem;
}

.mostrardiv2 main {
  padding: 1rem 2rem;
}

.button-close {
  cursor: pointer;
}

.group-filter-container {
  display: flex;
  /* background: #888; */
  align-items: center;
  justify-content: center;
  text-align: left;
}

.group-filter-container h3 {
  display: flex;
  align-items: center;
  font: 500 1.6rem Nunito;
  color: #1c1c1c;
  width: 100%;
}

.group-filter-container .filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  margin-top: 1rem;
  width: 100%;
}

.group-filter-container .filter {
  display: flex;
  align-items: center;
  padding: 1.2rem;
  min-height: 10rem; 
  margin-right: 1rem; 
  border-radius: 0.8rem;
}

.group-filter-container .group-filter-item img {
  width: 5rem;
  height: 5rem;

  cursor: pointer;
  border: 0.1rem solid #b5b5b5;
  border-radius: 3rem;
  margin: 0 0.5rem;
}

.group-filter-container .group-filter-item img:hover {
  border: 0.3rem solid #E066FF;
}

.group-filter-container .group-filter-item img.active {
  border: 0.3rem solid #B452CD;
  filter: opacity(0.7);
}

.menuhorizontal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

button.button-mini-danger {
  background: var(--color-default-danger);
  color: #fff;
  height: 5rem;
  width: 5rem;
}

button.button-cart {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #3c3c3c;
  border: 0;
  height: 5rem;
  width: 5rem;
  border-radius: 5rem;

  transition: 0.2s background ease-out;
}

button.button-cart:hover {
  background: #4F4F4F;
}

button.button-cart-all {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #8968CD;
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
  margin-right: 2rem;

  transition: 0.2s background ease-out;
}

.button-cart-all-icon {
  background: #fff;
  margin-left: 1rem;
  border-radius: 5rem;
  width: 2.5rem;
  height: 2.5rem;
}

/* button.button-cart-all:hover {

} */

span.cart-items-badge {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #FF4500;
  color: #fff;
  font-weight: 600;
  font-size: 1.5rem;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 3rem;

  margin-left: -2rem;
  margin-top: -4rem;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  filter: opacity(0.7);
  z-index: 50;

  display: none;
}

.confirmate-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  
  margin-top: -10rem;
  background: #fff;
  height: 40rem;
  width: 100rem;
  border-radius: 0.8rem;
  z-index: 100;
}

.confirmate-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #3c3c3c;
  color: #fff;
  width: 100%;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 0.8rem 0.8rem 0 0;
}

.confirmate-modal header .modal-panel-header-title {
  font-size: 2.3rem;
}

.confirmate-modal main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem;

  width: 100%;
}

.confirmate-modal main .input-question-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.confirmate-modal main .input-question-block label {
  font-size: 1.7rem;
}

.confirmate-modal main .input-question-block textarea {
  margin-top: 1rem;
  margin-bottom: 2rem;
  resize: vertical;
}

.confirmate-modal footer button + button {
  margin-left: 1rem;
}

.confirmate-modal footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 20rem;
  padding: 2rem;
  width: 100%;
  border-top: 0.1rem solid #f1f1f1;
}

.confirmate-modal footer .button-approve {
  display: flex;
  align-items: center;
  border: 0;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;

  background: var(--color-default-success);
  transition: 0.2s background ease-out;
}

.confirmate-modal footer .button-approve:hover {
  background: var(--color-default-success-dark);
}

.confirmate-modal footer .button-reprove {
  display: flex;
  align-items: center;
  border: 0;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;

  background: var(--color-default-danger);
  transition: 0.2s background ease-out;
}

.confirmate-modal footer .button-reprove:hover {
  background: var(--color-default-danger-dark);
}

/* STATUS */
.status-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  
  border-radius: 0.5rem;
  padding: 0.4rem 0.2rem;
  color: #FFF;
  width: 90%;
  margin-left: 0.7rem;
}

.status-pill.totalizer {
  margin-bottom: 1rem;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.Analise,
.Pago,
.verba,
.regra,
.Finalizado {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #4fbfe8;
  text-align: center;
}

.Entrada,
.Regular,
.Disp {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #70c386;
}

.REPROVADO,
.Faturado,
.Encerrado,
.Vencido,
.Bloqueado,
.bloqueado,
.Inativo,
.Fechado,
.Irregular,
.Pend.AC,
.A_D,
.Indi {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #ff6363;
}

.Documentos,
.Doc,
.Liberado,
.Baixado,
.Andamento {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #e2cb00;
}

.ENTREGA {
  width: 30rem;
}

.Saiu.Para.Entrega,
.SaiuParaEntrega,
.A_C {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #4fbfe8;
}

.Naoorcado {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #B5B5B5;
}

.Blqregra,
.Blq.regra {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #0000CD;
}

.BlqRegraComercial {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
  background-color: #3c3c3c;
}

/* .Status {
  width: 10rem;
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0;
  margin: 0 1rem;
  border: 0;
} */

.ENTREGA {
  width: 5rem;
}

.VENDEDOR {
  width: 5rem !important;
}

#table-products {
  overflow: hidden;
}

.table-f3-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-f3-container button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.9rem;
  height: 3.9rem;
  margin-left: -1rem;
  border: 0;
  background: #3c3c3c;
  border-radius: 0 0.8rem 0.8rem 0;
}

button > * {
  pointer-events: none;
}

/* STATUS */
.Analise,
.Pago,
.verba,
.regra,
.Finalizado {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #4fbfe8;
  text-align: center;
  white-space: nowrap;
}

.Aprovado,
.APROVADO,
.Aberto,
.Entrada,
.Ativo,
.Regular,
.Disp {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #70c386;
  white-space: nowrap;
}

.REPROVADO,
.Faturado,
.Encerrado,
.Vencido,
.Bloqueado,
.bloqueado,
.Inativo,
.Fechado,
.Irregular,
.Pend.AC,
.A_D,
.Indi {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #ff6363;
  white-space: nowrap;
}

.Documentos,
.Doc,
.Liberado,
.Baixado,
.Andamento {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #e2cb00;
  white-space: nowrap;
}

.ENTREGA {
  width: 30rem;
}

.Saiu.Para.Entrega,
.SaiuParaEntrega,
.A_C {
  border-radius: 0.8rem;
  color: #fff;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #4fbfe8;
  white-space: nowrap;
}

.Naoorcado {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #B5B5B5;
  white-space: nowrap;
}

.Blqregra,
.Blq.regra {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #0000CD;
  white-space: nowrap;
}

.Blqverba,
.Blq.verba,
.Separando,
.A_G,
.Pend_Doc {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #FF8C00;
  white-space: nowrap;
}

.BlqRegraComercial {
  border-radius: 0.8rem;
  color: #FFF;
  padding: 0.5rem 0.5rem;
  margin: 0 1rem;
  border: 0;
  background-color: #3c3c3c;
  white-space: nowrap;
}

/* COMPONENTES */

#logger-container {
  display: grid;
  grid-template-columns: 93vw;
  grid-template-rows: 15vh 65vh;
}

#logger-container .logger-header {
  grid-row-start: 1;
  grid-row-end: 2;
  width: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 2rem;
}

#logger-container .logger-body {
  grid-row-start: 2;
  grid-row-end: 3;

  padding: 0 2rem;
  margin-top: 1rem;
}

#logger-container .logger-body .tabs {
  display: flex;
  justify-content: space-between;
}

#logger-container .logger-body .tabs .tabs-container {
  display: flex;
}

#logger-container .logger-body .tabs .submenu-container {
  display: flex;
}

#logger-container .logger-body .tabs .submenu-container button {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0.7rem 1rem;
  transition: 0.2s ease-out;
  color: #fff;
}

#logger-container .logger-body .tabs .submenu-container button.button-reload {
  background: #4F94CD;
}

#logger-container .logger-body .tabs .submenu-container button.button-pdf {
  background: #CD0000;
}

#logger-container .logger-body .tabs .submenu-container button.button-excel {
  background: #00CD00;
}

#logger-container .logger-body .tabs .submenu-container button.button-csv {
  background: #CDCD00;
}

#logger-container .logger-body .tabs .submenu-container button:hover {
  background: #36648B; 
}

#logger-container .logger-body .tabs .submenu-container button .export-button-icon {
  margin-right: 1rem;
}

#logger-container .logger-body .tabs .tab {
  display: flex;
  background: #E5E5E5;
  color: #3c3c3c;
  font-weight: 600;
  font-size: 1.4rem;
  padding: 1rem 2rem;
  margin-right: 1rem;
  cursor: pointer;
  margin-bottom: -0.1rem;
  border: 0.1rem solid #c1c1c1;
  border-top-right-radius: 0.8rem;
  border-top-left-radius: 0.8rem;
}

#logger-container .logger-body .tabs .tab.active-tab {
  background: #FFF;
  color: #4fbfe8;
  border-bottom: none;
}

#tab-content {
  position: relative;
  height: 63.5vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#logger-container .logger-body .tab-contents {
  background: #FFF;
  height: 96%;
  border: 0.1rem solid #c1c1c1;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
}

#logger-container .logger-body .tab-contents .tab-content {
  height: 100%;
}

#logger-container .logger-header .totalizer-container {
  width: 12%;
  background: #fff;
  height: 13rem;
  border-radius: 0.8rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 2rem;
  margin-right: 2rem;
}

#logger-container .logger-header .totalizer-container .totalizer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#logger-container .logger-header .totalizer-container .totalizer .totalizer-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  width: 5rem;
  height: 5rem;
  background: #52518E;
}

#logger-container .logger-header .totalizer-container .totalizer-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #696969;
}

#logger-container .logger-header .totalizer-container .totalizer-text span {
  font-size: 2.8rem;
  font-weight: 600;
  color: #3c3c3c;
}

#logger-container .logger-header .graph-container {
  width: 32%;
  background: #FFF;
  height: 13rem;
  border-radius: 0.8rem;

  display: flex;
  align-items: center;

  padding: 0 1rem;
  margin-right: 2rem;
}

.logger-success-login {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 2.5rem;
  width: 2.5rem;
  background: #43CD80;
  border-radius: 5rem;
}

.logger-error-login {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 2.5rem;
  width: 2.5rem;
  background: #EE3B3B;
  border-radius: 5rem;
}

.status-logger {
  display: flex;
  align-items: center;
  justify-content: center;
}

.items-display .tabs {
  display: flex;
  justify-content: space-between;
}

.items-display .tabs .tabs-container {
  display: flex;
}

.items-display .tabs .submenu-container {
  display: flex;
}

.items-display .tabs .submenu-container button {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0.7rem 1rem;
  transition: 0.2s ease-out;
  color: #fff;
}

.items-display .tabs .tab {
  display: flex;
  background: #E5E5E5;
  color: #3c3c3c;
  font-weight: 600;
  font-size: 1.4rem;
  padding: 1rem 2rem;
  margin-right: 1rem;
  cursor: pointer;
  margin-bottom: -0.1rem;
  border: 0.1rem solid #c1c1c1;
  border-top-right-radius: 0.8rem;
  border-top-left-radius: 0.8rem;
}

.items-display .tabs .tab.active-tab {
  background: #FFF;
  color: #4fbfe8;
  border-bottom: none;
}

.items-display .tab-contents {
  background: #FFF;
  /* height: 96%; */
  border: 0.1rem solid #c1c1c1;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
}

.items-display .tab-contents .tab-content {
  height: 100%;
}

#analytics-browser div.graphs-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* height: 52rem;
  overflow-y: auto; */
}

#analytics-browser button.analytics-browser-back-button {
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--color-main);
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;

  transition: 0.2s ease-out;
}

#analytics-browser button.analytics-browser-back-button:hover {
  background: var(--color-main-dark);
}

#analytics-browser div.graphs-container div.graph {
  border: 0.1rem solid #e1e1e1;
  border-radius: 0.8rem;
  padding: 2rem;
  margin: 1rem;
  flex: 1;
  max-width: 32%;
  background: #fff;
  transition: 0.2s ease-out;
}

#analytics-browser div.graphs-container div.graph:hover {
  transform: scale(1.03);
  z-index: 2;
}

#analytics-browser div.graphs-container div.graph div.graph-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#analytics-browser div.graphs-container div.graph div.graph-preview-header .new-window-icon {
  cursor: pointer;
}

#analytics-browser div.graphs-container div.graph div.graph-preview-header span.graph-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: #696969;
}

#analytics-browser div.graphs-container div.graph div.graph-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 19rem;
  margin-top: 3rem;
  cursor: pointer;
}

svg > g[class^="raphael-group-"] > g > path{
  display: none;
}

#analytics-browser div.graphs-container div.graph div.graph-preview img {
  width: 30rem;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

/* Modal */
#myModal {
  display: none;
  position: fixed;
  z-index: 999999999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#myModal-contetn {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  display: flex;
  border-radius: 12px;
}

#image-container {
  width: 50%;
}

#ficha-tecnica {
  width: 50%;
  text-align: center;
  padding: 1rem;
}

#ficha-tecnica main {
  text-align: left;
  margin-top: 1.5rem;
  line-height: 4rem;
  font-size: 2rem;
}

/* Dashboard demolist */
#demolista-newTab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3rem;
}

.submenu-container-dashboard {
  display: none;
  margin: 2rem;
  justify-content: flex-end;
}

.submenu-container-dashboard button {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0.7rem 1rem;
  transition: 0.2s ease-out;
  color: #fff;
}

.submenu-container-dashboard button.button-reload {
  background: #4F94CD;
}

.submenu-container-dashboard button.button-pdf {
  background: #CD0000;
}

.submenu-container-dashboard button.button-excel {
  background: #00CD00;
}

.submenu-container-dashboard button.button-csv {
  background: #CDCD00;
}

.submenu-container-dashboard button:hover {
  background: #36648B; 
}

.submenu-container-dashboard button .export-button-icon {
  margin-right: 1rem;
}

/* PLANILHA */

#planilha {
  display: none;
  position: fixed;
  z-index: 99999;
  padding-top: 20px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.2);
}

#planilha-contetn {
  background-color: #fefefe;
  margin: auto;

  border: 1px solid #888;
  width: 80%;
  padding: 2rem;
  border-radius: 15px;
}

.close-planilha-modal {
  padding: 3px 6px;
  cursor: pointer;
  border: 1px solid gray;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #325d6f, -1px -1px 1px #bfe3f2;
  -webkit-box-shadow: 1px 1px 1px #325d6f, -1px -1px 1px #bfe3f2;
  -moz-box-shadow: 1px 1px 1px #325d6f, -1px -1px 1px #bfe3f2;
  position: relative;
  width: 20px;
  display: inline-block;
}

.planilha-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.planilha-pedidos {
  margin: 20px 0;
}

table#planilha-table {
  border-collapse: collapse;
}

table#planilha-table thead {
}

table#planilha-table thead tr th {
  padding: 5px;
}

table#planilha-table tbody tr td {
  border: 1px solid #ccc;
  padding: 5px;

}


.swal2-container {
  z-index: 99999999999;
}
/* Filter Dashboard */
div#filterModalFullScreen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  z-index: 3;
  border-radius: 1rem;
  background: #f0f0f0;
}

div#filterModalFullScreen img {
  width: 14px;
  position: absolute;
  right: 5px;
  top: 5px;
}

div#filterModalFullScreen #input-group-graph {
  padding: 1rem;
}

div#filterModalFullScreen label {
  font-size: 14px;
}

div#filterModalFullScreen select  {
  width: 100%;
}

div#filterModalFullScreen input  {
  width: 100%;
}

div#filterModalFullScreen button {
  padding: 1rem;
  background-color: #087bc5;
  color: #fff;
  cursor: pointer;
  border: 0;
  margin-top: 2rem;
}

#grid { 
  /* arrumar isso  */
  height: 57vh;
}
#toggleFiltering {
  display: none;
  margin-bottom: 1rem;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.42857143;
  border-radius: 4px;
  color: #fff;

  background-color: var(--color-main);
}