@import url(https://fonts.googleapis.com/css?family=Nunito);@media (max-width: 576px) {
  #right-login #username {
    width: 200px !important;
  }

  #button-submit button {
    width: 120px;
    margin: 0 10px !important;
  }

  #settings .inputs {
    margin: 0;
  }

  #settings #button-submit button {
    margin: 0 10px !important;
  }

  .dropdown .dropdown-item {
    font-size: 15px !important;
  }

  #dashboard .chart {
    height: 300px !important;
    width: 300px !important;
  }

  #dashboard .chart .no-data {
    height: 200px !important;
  }

  #dashboard #attendance #typeaccess-product-attendance .chart {
    height: 400px !important;
    width: 300px !important;
  }

  #dashboard #attendance #typeaccess-product-attendance .chart .no-data {
    height: 300px !important;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart,
  #dashboard #attendance #typeaccess-instantaneous-attendance .chart {
    height: 350px !important;
    width: 300px !important;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart .no-data,
  #dashboard #attendance #typeaccess-instantaneous-attendance .chart .no-data {
    height: 250px !important;
  }

  #dashboard #attendance #cumulative-attendance .data {
    flex-direction: column;
    height: 500px !important;
    width: 300px !important;
    margin-bottom: 20px;
  }

  #menus .select-menu {
    margin-left: 0;
  }

  #menus #links {
    display: block !important;
  }

  #menus #links .link {
    width: auto !important;
  }

  #logs textarea {
    width: 80px !important;
  }
}

@media (max-width: 768px) {
  header {
    margin-bottom: 50px;
    flex-wrap: wrap;
  }

  header #logo {
    margin-left: 40px;
  }

  nav a.nav-link {
    font-size: 18px;
  }

  .content {
    box-shadow: none;
  }

  .pagination {
    justify-content: normal;
  }

  #settings #personalization .d-inline-block {
    width: 100% !important;
  }

  #settings #personalization .d-inline-block h5 {
    text-align: center;
  }

  #settings #personalization .d-inline-block .inputs {
    width: 100%;
  }

  .dropdown .dropdown-item {
    font-size: 20px;
  }

  #dashboard #sales .data,
  #dashboard #clients .data,
  #dashboard #miscellaneous .data {
    margin: 10px 0 !important;
  }

  #statistics .carousel-inner {
    margin-top: 20px;
  }

  #statistics #miscellaneous {
    padding: 0;
  }

  #statistics #miscellaneous .col-md-8:not(.chart) {
    padding: 0 !important;
  }

  #statistics #miscellaneous .data {
    overflow: scroll;
  }

  #statistics #miscellaneous .data .day-month {
    padding-top: 20px;
    margin-left: 40px;
  }

  #statistics #miscellaneous .data .period {
    margin-right: 0;
  }

  #statistics #miscellaneous .data #origins-table {
    margin-bottom: 20px;
  }

  #statistics #miscellaneous #origin #charts {
    padding: 20px !important;
  }
}

@media (max-width: 992px) {
  .content select,
  .content input:not([type=radio], [type=checkbox]) {
    width: 200px;
  }

  .content .carousel-inner a p {
    display: none;
  }

  .content,
  #login {
    overflow: hidden;
    margin: 0;
  }

  #login #left-login {
    display: none;
  }

  #login #right-login {
    width: 100%;
  }

  #login #right-login #responsive-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }

  #login #right-login #responsive-logo #logo {
    width: 70px;
    height: auto;
    margin-right: 20px;
  }

  #login #right-login #lang {
    margin-right: 20px;
    margin-bottom: 150px;
  }

  #login #right-login #lang #changeLang {
    right: 32px;
  }

  header {
    justify-content: space-evenly !important;
  }

  #show-menu {
    display: block;
    z-index: 99;
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 40px;
  }

  #main-nav {
    display: none;
    width: 100% !important;
    background: #fff;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
    padding-top: 150px;
  }

  #main-nav a {
    display: block;
    font-size: 20px !important;
  }

  #nav-home {
    height: auto !important;
  }

  #nav-home #links {
    width: 100%;
    height: auto !important;
    padding: 20px;
  }

  #nav-home #links a.hover-link {
    opacity: 1 !important;
  }

  #nav-home #date {
    width: 100%;
  }

  .loading img {
    width: 300px !important;
  }

  .modal .modal-header a.close {
    font-size: 40px;
  }

  .modal .modal-footer {
    flex-wrap: nowrap;
  }

  #users-content {
    overflow: scroll;
  }

  #users-content #rights #div-modules {
    overflow: scroll;
    justify-content: normal;
  }

  #users-content #rights #div-modules #modules li {
    width: 180px;
  }

  #users #users-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #users .content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #users .content #form-create-user,
  #users .content #form-edit-user {
    justify-content: center;
  }

  #users .content .inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #templates #templates-email {
    padding: 0;
  }

  #templates #templates-email #templates-email-create,
  #templates #templates-email #templates-email-edit {
    margin-top: 50px;
    width: 100% !important;
  }

  #templates #templates-sms {
    padding: 0;
  }

  #templates #templates-sms .flex-column {
    margin: auto;
  }

  #templates #templates-sms #templates-sms-create #word-count,
  #templates #templates-sms #templates-sms-edit #word-count {
    width: 100%;
  }

  #setting-web #dashboard #v-pills-tab {
    margin: auto auto 20px;
  }

  #setting-web #dashboard .align-items-start {
    flex-wrap: wrap;
  }

  #setting-web #checkouts .checkout {
    margin-right: 0;
  }

  #setting-web #statistics #modules .module {
    margin-right: 0;
  }

  #history {
    overflow: scroll;
  }

  .dropdown h5 {
    white-space: normal;
    width: 250px;
  }

  .dropdown .dropdown-item {
    font-size: 20px;
  }

  #dashboard #selects .inputs {
    margin-bottom: 10px;
  }

  #dashboard #table {
    overflow: scroll;
  }

  #dashboard #send-export button {
    font-size: 40px;
    margin-bottom: 40px;
  }

  #dashboard #sales .chart {
    height: 600px;
    width: 600px;
  }

  #dashboard #sales .chart .no-data {
    height: 500px;
  }

  #dashboard #attendance .data:not(.margin-auto) {
    margin: 10px 10px !important;
  }

  #dashboard #attendance .data.margin-auto {
    margin: 10px auto auto !important;
  }

  #dashboard #attendance .chart {
    width: 600px !important;
  }

  #dashboard #attendance .chart .no-data {
    height: 500px !important;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart {
    height: 500px;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart .no-data {
    height: 400px;
  }

  #dashboard #attendance #typeaccess-instantaneous-attendance .chart {
    height: 550px;
  }

  #dashboard #attendance #typeaccess-instantaneous-attendance .chart .no-data {
    height: 450px;
  }

  #dashboard #attendance #cumulative-attendance h6 {
    margin-top: 20px;
  }

  #dashboard #attendance #cumulative-attendance .data {
    width: 500px;
    margin: 20px 20px;
  }

  #dashboard #miscellaneous #to-do-list {
    width: 100% !important;
  }

  #dashboard #miscellaneous #to-do-list #add-to-do {
    font-size: 40px;
  }

  #dashboard #miscellaneous #to-do-list .task {
    font-size: 25px;
  }

  #dashboard #miscellaneous #to-do-list .task .important {
    font-size: 25px;
  }

  #dashboard #sales .data,
  #dashboard #clients .data,
  #dashboard #miscellaneous .data {
    margin: 10px 10px;
  }

  #dashboard #sales,
  #dashboard #attendance,
  #dashboard #miscellaneous,
  #dashboard #clients {
    padding: 0;
  }

  #dashboard #sales .justify-content-between,
  #dashboard #attendance .justify-content-between,
  #dashboard #miscellaneous .justify-content-between,
  #dashboard #clients .justify-content-between {
    padding: 20px;
  }

  #supervisionBoard #slideRealTimePass {
    overflow: scroll;
  }

  #statistics #origin #results {
    padding: 0 !important;
  }

  #statistics #maximum-instantaneous-attendance .col-xl-3,
  #statistics #origin .col-xl-3 {
    width: 400px;
  }

  #menus #lists-menus {
    justify-content: center;
  }

  #menus #lists-menus #links {
    width: 100%;
    margin-left: 0;
    margin-bottom: 40px;
  }

  #menus #lists-menus #main-links {
    width: 100%;
    margin: 40px auto;
  }

  #logs {
    overflow: scroll;
  }

  #logs textarea {
    width: 150px;
  }
}

@media (max-width: 1200px) {
  #users #users-list {
    margin-left: 100px;
  }

  #users .content {
    margin-left: 100px;
    margin-right: 0;
    width: 70%;
  }

  #templates #templates-sms #templates-sms-create,
  #templates #templates-sms #templates-sms-edit {
    width: 100% !important;
    margin-top: 50px;
  }

  #templates #templates-sms #templates-sms-create .editor,
  #templates #templates-sms #templates-sms-edit .editor {
    width: 150%;
  }

  #templates #templates-sms #templates-sms-create .editor .flex-column,
  #templates #templates-sms #templates-sms-edit .editor .flex-column {
    width: auto;
  }

  #dashboard .carousel-control-prev p,
  #dashboard .carousel-control-next p {
    display: none;
  }

  #dashboard #sales #turnover .chart {
    width: 600px;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart,
  #dashboard #attendance #typeaccess-instantaneous-attendance .chart {
    width: auto;
  }

  #maximum-instantaneous-attendance .col-xl-8,
  #origin .col-xl-8 {
    width: 680px !important;
  }
}

@media (max-width: 1440px) {
  #button-submit button,
  .button-submit button {
    margin: 0 30px;
  }

  #templates #button-submit {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  #templates #templates-sms #templates-sms-create .preview-sms,
  #templates #templates-sms #templates-sms-edit .preview-sms {
    display: none !important;
  }

  #menus #links {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #menus #main-links {
    margin: 40px auto;
  }
}

@media (max-width: 1600px) {
  #login #left-login h1 {
    font-size: 50px;
    left: 6%;
  }

  #users-list {
    margin-left: 100px;
  }

  #templates #templates-sms #templates-sms-create,
  #templates #templates-sms #templates-sms-edit {
    width: 60%;
  }

  #templates #templates-sms #templates-sms-create .flex-column,
  #templates #templates-sms #templates-sms-edit .flex-column {
    width: 300px;
  }

  #templates #templates-sms #templates-sms-create .flex-column input,
  #templates #templates-sms #templates-sms-edit .flex-column input {
    width: 300px;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 200px;
  }

  .carousel-control-prev p,
  .carousel-control-next p {
    margin: auto;
  }

  #statistics #slide-sales-stats .col-md-8,
  #statistics #slide-trade-compare .col-md-8,
  #statistics #slide-trade-cashing .col-md-8 {
    padding: 0;
  }

  #statistics #slide-sales-stats .col-md-8 #table-sales-stats,
  #statistics #slide-sales-stats .col-md-8 #table-cashing-display,
  #statistics #slide-trade-compare .col-md-8 #table-sales-stats,
  #statistics #slide-trade-compare .col-md-8 #table-cashing-display,
  #statistics #slide-trade-cashing .col-md-8 #table-sales-stats,
  #statistics #slide-trade-cashing .col-md-8 #table-cashing-display {
    overflow: scroll;
  }

  #statistics #slide-sales-stats .align-items-stretch,
  #statistics #slide-trade-compare .align-items-stretch,
  #statistics #slide-trade-cashing .align-items-stretch {
    justify-content: center;
  }

  #statistics .col-xl-3 {
    width: 400px !important;
    flex: none;
    max-width: none;
  }

  #statistics #maximum-instantaneous-attendance .col-xl-8,
  #statistics #origin .col-xl-8 {
    flex: none !important;
    max-width: none !important;
  }

  #statistics #maximum-instantaneous-attendance .col-xl-8 {
    width: 640px;
  }

  #statistics #origin .col-xl-8 {
    width: 690px;
  }
}

@media (max-width: 1700px) {
  #templates-sms-create .flex-column,
  #templates-sms-edit .flex-column {
    width: 400px;
  }

  #menus #links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 20px;
    width: 50%;
  }

  #menus #main-links {
    width: 45%;
  }
}

@media (min-width: 1200px) {
  #dashboard .chart {
    width: 450px;
  }

  #dashboard #sales .chart {
    height: 600px;
    width: 600px;
  }

  #dashboard #sales .chart .no-data {
    height: 500px;
  }

  #dashboard #attendance .chart {
    height: 520px;
  }

  #dashboard #attendance .chart .no-data {
    height: 400px;
  }

  #dashboard #attendance #typeaccess-family-attendance .chart {
    height: 400px !important;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart {
    width: 600px !important;
    height: 350px !important;
  }

  #dashboard #attendance #typeaccess-hourly-attendance .chart .no-data {
    height: 300px !important;
  }

  #dashboard #attendance #typeaccess-instantaneous-attendance .chart {
    height: 400px;
    width: 550px;
  }

  #dashboard #attendance #typeaccess-instantaneous-attendance .chart .no-data {
    height: 250px;
  }

  #dashboard #attendance #cumulative-attendance .data {
    width: 500px;
  }
}

@media (min-width: 1201px) and (max-width: 1440px) {
  #statistics #maximum-instantaneous-attendance .col-xl-8,
  #statistics #origin .col-xl-8 {
    width: 890px;
  }
}

@media (min-width: 1600px) {
  #templates-sms-create,
  #templates-sms-edit {
    width: 70%;
  }
}

@media (min-width: 1701px) {
  #templates-sms-create .flex-column,
  #templates-sms-edit .flex-column {
    width: 600px;
  }

  #menus #links {
    margin-left: 70px;
    width: 40%;
  }

  #menus #main-links {
    width: 55%;
  }
}