/* Django 4.2.0 stopped shipping fonts.
See https://code.djangoproject.com/ticket/33878 */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold-webfont.woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular-webfont.woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light-webfont.woff");
  font-weight: 300;
  font-style: normal;
}

/* VARIABLE DEFINITIONS TO PREVENT DARK MODE */
:root {
  --primary: #79aec8 !important;
  --secondary: #417690 !important;
  --accent: #f5dd5d !important;
  --primary-fg: #fff !important;

  --body-fg: #333 !important;
  --body-bg: #fff !important;
  --body-quiet-color: #666 !important;
  --body-loud-color: #000 !important;

  --header-color: #ffc !important;
  --header-branding-color: var(--accent) !important;
  --header-bg: var(--secondary) !important;
  --header-link-color: var(--primary-fg) !important;

  --breadcrumbs-fg: #c4dce8 !important;
  --breadcrumbs-link-fg: var(--body-bg) !important;
  --breadcrumbs-bg: var(--primary) !important;

  --link-fg: #447e9b !important;
  --link-hover-color: #036 !important;
  --link-selected-fg: #5b80b2 !important;

  --hairline-color: #e8e8e8 !important;
  --border-color: #ccc !important;

  --error-fg: #ba2121 !important;

  --message-success-bg: #dfd !important;
  --message-warning-bg: #ffc !important;
  --message-error-bg: #ffefef !important;

  --darkened-bg: #f8f8f8 !important; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4 !important; /* E.g. selected table cells */
  --selected-row: #ffc !important;

  --button-fg: #fff !important;
  --button-bg: var(--primary) !important;
  --button-hover-bg: #609ab6 !important;
  --default-button-bg: var(--secondary) !important;
  --default-button-hover-bg: #205067 !important;
  --close-button-bg: #888 !important; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474 !important;
  --delete-button-bg: #ba2121 !important;
  --delete-button-hover-bg: #a41515 !important;

  --object-tools-fg: var(--button-fg) !important;
  --object-tools-bg: var(--close-button-bg) !important;
  --object-tools-hover-bg: var(--close-button-hover-bg) !important;
  --font-family-primary:
    "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana,
    Arial, sans-serif;
}
body {
  min-width: 320px;
}
.menu-backdrop {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: none;
}
.force-inactive {
  opacity: 0.1 !important;
  pointer-events: none !important;
}
#main-content .breadcrumbs,
.module caption,
div[class^="app-"].module th,
div[class^="app-"].module td {
  padding: 1rem 1.3rem;
}
div[class^="app-"].module td {
  padding-left: 0;
}
#main-content .results thead th .text a,
#main-content thead th {
  padding: 15px 10px;
  font-size: 13.5px;
}
#main-content .results tbody td,
#main-content .results tbody th,
div#main-content table tbody th,
div#main-content table tbody td {
  padding: 1rem 10px;
  vertical-align: middle;
  font-size: 14px;
}
/* #main-content .breadcrumbs {
  font-size: 15px;
} */
#main-content .breadcrumbs {
    font-size: 15px;
    position: sticky; /* Membuat elemen tetap di posisi saat scroll */
    top: 0; /* Menempel di bagian atas container atau viewport */
    background-color: #f5f5f5; /* Warna latar abu-abu terang */
    color: #333; /* Warna teks abu-abu gelap */
    padding: 10px; /* Memberi ruang agar terlihat rapi */
    z-index: 1000; /* Memastikan di atas elemen lain */
  }
#main-content .breadcrumbs a,
a.section:link,
a.section:visited,
.module th a,
#main .help a,
#main .helptext a,
fieldset.collapsed a.collapse-toggle,
fieldset a.collapse-toggle {
  color: #df5d43;
  text-decoration: none;
}
#main-content .breadcrumbs a:hover,
a.section:link:hover,
a.section:visited:hover,
.module th a:hover,
#main-content .breadcrumbs a:focus,
a.section:link:focus,
a.section:visited:focus,
.module th a:focus,
#main .help a:hover,
#main .help a:focus,
#main .helptext a:focus,
#main .helptext a:focus {
  text-decoration: underline;
}
#main-content .module caption a {
  text-decoration: none;
  color: #000;
}
#main-content .module caption a:hover {
  text-decoration: underline;
}
.module h2,
.module caption,
.inline-group h2,
fieldset.module h2 {
  background: #f9f9f9;
  color: #333;
  padding: 15px;
}
table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after,
a:link,
a:visited {
  color: #777;
  text-decoration: none;
}
table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after,
a:hover,
a:focus {
  color: #000;
  text-decoration: none;
}
#changelist-filter li.selected a {
  color: #df5d43 !important;
}
#netjsonconfig-hint,
#netjsonconfig-hint a,
#container .field-backend a {
  color: #df5d43;
}
#main .form-row label {
  color: #1b1818;
  display: inline-block;
}
#main .form-row .help,
#main .form-row .helptext,
#container #main-content .help,
#container #main-content .helptext {
  font-size: 14px !important;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.45);
}
.addlink,
.changelink {
  font-weight: bold;
}
.changelink {
  padding-left: 17px;
}
.addlink:hover,
.changelink:hover {
  color: #000;
}

/* increase font size and spacing */

.module caption,
.inline-group h2,
#content-related h3,
fieldset.module h2 {
  font-size: 16px;
}
#main .inline-related h3 {
  padding: 15px;
  font-size: 15px;
  background: #f9f9f9;
}
td,
th,
li {
  font-size: 14px;
}
.mini {
  font-size: 12px;
}
#main .actionlist li {
  line-height: 20px;
  background-position: 0px 4px;
}
#main .aligned label,
input,
textarea,
select,
.form-row p,
form .button,
.readonly,
#main .form-row {
  font-size: 15px;
}
select:not([disabled]):not(.readonly) {
  background: #fff;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
#main .vTextField {
  padding: 8px 12px;
  box-sizing: border-box;
  /* width: 100%; */
}
.aligned label {
  float: left;
}
input.readonly {
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background-color: rgba(0, 0, 0, 0.07);
}
select {
  height: 36px;
  padding: 0 12px;
}
#main span.select2-selection {
  min-height: 36px;
  min-width: 320px;
  position: relative;
}
.select2-dropdown,
.select2-container {
  min-width: 320px !important;
}
#main .select2-selection__arrow {
  height: 28px;
  top: 3px;
  right: 4px;
  width: 24px;
}
#main .select2-selection__rendered {
  line-height: 34px;
  height: 36px;
  padding: 0 0 0 12px;
  width: 100%;
  box-sizing: border-box;
}
.select2-results__option {
  padding: 10px 12px !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  box-sizing: border-box;
}
.select2-selection__clear {
  left: -27px;
}
.related-widget-wrapper .change-related {
  margin-left: 7px;
}
#main .form-row {
  /* Update Padding New 1 */
  padding: 4px;   
  box-sizing: border-box;
}
#main .inline-group .tabular td.original p {
  height: auto;
}
#main .inline-group thead th {
  background: transparent;
}
#main .inline-group thead th:not(.original),
#main .add-row td,
#main div.add-row {
  padding-top: 15px;
  padding-bottom: 15px;
}
#main .add-row td a,
#main div.add-row a {
  font-size: 15px !important;
}
#main .delete input {
  vertical-align: -1px;
}
#main .delete label {
  font-size: 14px;
}
#main ul.messagelist li {
  padding: 15px 10px 15px 65px;
  background-position: 40px 17px;
}

/* hide first delete link, hide save and add anoher */
#main .submit-row:first-child .deletelink-box,
.submit-row input[name="_addanother"] {
  display: none;
}

/* Django 4.2.0 changed the ordering of buttons in
submit row of the form. See https://code.djangoproject.com/ticket/33728

The following CSS reverts those changes*/
#main .submit-row {
  text-align: right;
  display: block;
}
#main .submit-row input {
  margin: 0 0 5px 5px;
}
#main .submit-row input.default {
  margin: 0 0 5px 8px;
  float: right;
}
.submit-row p.deletelink-box {
  float: left;
  margin: 0;
}

/* temporary frontend fix */
a.button.secondaryAction {
  background: transparent;
  border: 0 none;
  padding: 0;
  margin: 0.938rem 0;
  display: block;
}
html {
  overflow-x: hidden;
}
.ow-overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
}
.ow-overlay-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  padding: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.ow-loading-spinner {
  width: 3.125rem;
  height: 3.125rem;
  background-color: rgba(0, 0, 0, 0.9);
  margin: 0 auto;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
div.breadcrumbs {
  background: #fff;
  color: #8d7d76cf;
  border-bottom: 2px solid #f6f6f6;
}
#main-content div.breadcrumbs {
  padding: 1rem 2.5rem;
}
#main .selector-chosen h2 {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
span.datetimeshortcuts .date-icon {
  mask: url(../../ui/openwisp/images/date.svg) no-repeat center;
  -webkit-mask: url(../../ui/openwisp/images/date.svg) no-repeat center;
  -webkit-mask-size: contain;
  -webkit-mask: contain;
  background: #df5d43;
}
span.datetimeshortcuts .clock-icon {
  mask: url(../../ui/openwisp/images/clock.svg) no-repeat center;
  -webkit-mask: url(../../ui/openwisp/images/clock.svg) no-repeat center;
  -webkit-mask-size: contain;
  -webkit-mask: contain;
  background: #df5d43;
}
span.datetimeshortcuts .date-icon:hover,
span.datetimeshortcuts .clock-icon:hover {
  background: #b31e00;
}

/*******************************
* Common button styles
*******************************/

/* For toggle button [ class="toggle-btn" ] */
.toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 2px #00000040;
  border-radius: 4px;
  background: #ffff;
  cursor: pointer;
  border: 0;
  padding: 0.313rem 0.625rem;
}
.toggle-btn:hover,
.toggle-btn:focus,
.toggle-btn:active {
  outline: 0 none;
  background: #f8f8f8;
}

/* For danger,error, red button [ class="danger-btn" ] */
.danger-btn,
div.submit-row a.deletelink,
.delete-confirmation form input[type="submit"] {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background: #df5d43;
  cursor: pointer;
  border: 0;
  padding: 0.625rem 1rem;
  color: #fff;
  font-weight: 500;
}
div.submit-row a.deletelink {
  display: block;
}
.danger-btn:hover,
.danger-btn:focus,
.danger-btn:active,
div.submit-row a.deletelink:hover,
div.submit-row a.deletelink:focus,
div.submit-row a.deletelink:active,
.delete-confirmation form input[type="submit"]:hover,
.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus {
  background: #b31e00;
  outline: 0 none;
}
#content .submit-row p.deletelink-box {
  margin: 0;
}

/* For any normal, default, dark button [ class="default-btn" ] */

.default-btn,
.button.default,
input[type="submit"].default,
.object-tools a,
.object-tools a:link,
.object-tools a:visited,
.button,
button[type="submit"],
input[type="submit"],
input[type="button"],
.submit-row input,
.delete-confirmation form .cancel-link,
a.button,
.object-tools button {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background: #e8e8e8;
  cursor: pointer;
  border: 0;
  padding: 0.625rem 1rem;
  color: #000;
  font-weight: 500;
  font-size: 15px;
  border-radius: 10px;
}
.delete-confirmation form .cancel-link,
.delete-confirmation input[type="submit"] {
  height: auto !important;
  line-height: inherit !important;
}
div#toolbar {
  padding: 0.8rem 1.2rem;
}
div#toolbar form input[type="submit"] {
  margin: 0 10px 0 3px;
  padding: 0.47rem 1rem;
  background: #e8e8e8;
  border: 0 none;
  color: #000;
}
div#toolbar #searchbar {
  padding: 15px 0.8em;
  margin: 0 4px 0 7px;
  font-size: 15px;
}
div#changelist .actions label,
div#changelist .actions span {
  font-size: 14px !important;
  line-height: 26px;
}
div#changelist .actions select {
  height: 27px !important;
  margin-right: 7px;
}
div#changelist .actions .button {
  padding: 7px 1rem;
  border: 0 none;
  background: #333;
  color: #fff;
  height: unset;
}
div#changelist .actions .button:hover,
div#toolbar form input[type="submit"]:hover {
  opacity: 0.7;
  border-color: #333;
}
.object-tools a,
.object-tools a:link,
.object-tools a:visited,
.object-tools button {
  padding: 0.4rem 0.8rem;
  font-size: 13px;
  line-height: 20px;
  text-transform: uppercase;
}
#container .object-tools a.addlink {
  background-image: url(../../ui/openwisp/images/add.svg);
  background-repeat: no-repeat;
  background-size: 1.35rem;
  background-position: 0.5rem 43%;
  padding-left: 1.9rem;
}
.default-btn:hover,
.default-btn:active,
.button.default:hover,
.button.default:active,
.button.default:focus,
input[type="submit"].default:hover,
input[type="submit"].default:active,
input[type="submit"].default:focus,
.default-btn:focus,
.object-tools a:hover,
.object-tools a:active,
.object-tools a:focus,
.object-tools button:hover,
.object-tools button:focus,
.button:active,
button[type="submit"]:active,
button[type="submit"]:hover,
button[type="submit"]:focus,
input[type="submit"]:active,
input[type="button"]:active,
.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.delete-confirmation form .cancel-link:hover {
  outline: 0 none;
  background: rgba(51, 51, 51, 0.7);
}
#main .related-lookup {
  padding-left: 20px;
  width: auto;
}
.form-row .item-label {
  position: relative;
  bottom: -2px;
  margin-left: 2px;
  font-weight: bold;
}
#main label.vCheckboxLabel {
  width: auto;
}

/* For success, green button [ class="success-btn" ] */
.success-btn,
#main .submit-row .default {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background: #498b26 !important;
  cursor: pointer;
  border: 0;
  padding: 0.625rem 1rem;
  color: #fff;
  font-weight: 500;
}
.success-btn:hover,
.success-btn:active,
.success-btn:focus,
#main .submit-row .default:hover,
#main .submit-row .default:active,
#main .submit-row .default:focus {
  opacity: 0.8;
  outline: 0 none;
}
#main .submit-row input {
  font-size: 14px;
}
.inline-quick-link-container {
  text-align: center;
  margin: 20px 0 40px;
}

/*
  NOTE:
  "menu-toggle" is a class of a button which is use to close menu.
  "toggle-menu" is a class toggled on "#contianer" when menu changes it state.
*/

/* MENU TOGGLE BUTTONS */
.login h1#site-name {
  padding: 1.2rem 0;
}
.hamburger {
  display: flex;
  padding: 0.813rem 0.75rem;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.hamburger span {
  background: url(../../ui/openwisp/images/hamburger.svg) no-repeat center;
  height: 1.375rem;
  width: 1.375rem;
  display: inline-block;
}
.hamburger:hover {
  background: #efefef;
}
.menu-toggle {
  position: fixed;
  left: 18.75rem;
  width: 1.4rem;
  border: 0;
  height: 100px;
  cursor: pointer;
  display: none;
  justify-content: flex-end;
  align-items: center;
  top: 50vh;
  margin-top: -3.125rem;
  z-index: 1;
  transition: all ease;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0 3px 3px 0px;
}
.menu-toggle span {
  mask: url(../../ui/openwisp/images/left-arrow.svg) no-repeat center;
  -webkit-mask: url(../../ui/openwisp/images/left-arrow.svg) no-repeat center;
  mask-position: center;
  background: #ffffff;
  height: 1rem;
  width: 1rem;
  display: inline-block;
  transition: all 0.3s ease 0.5s;
  -webkit-mask-size: 1rem;
}
.menu-toggle:hover {
  opacity: 1;
  right: -1.65rem;
  width: 1.65rem;
  background: rgba(0, 0, 0, 0.6);
}

/* USER TOOLS */
#ow-user-tools {
  display: flex;
  align-items: center;
  margin-top: 3rem;
}
.account {
  position: relative;
}
.account-button:hover,
.account-button:focus {
  color: #df5d43;
}
.account-button:hover span,
.account-button:focus span,
.account-menu a:hover span {
  background: #df5d43;
}
.account-menu {
  position: absolute;
  opacity: 1;
  transition: all 0.3s ease;
  width: 200px;
  top: 2.5rem;
  right: 0;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0px 1px 0.188rem #00000040;
  z-index: 10;
  padding: 0.45rem 0.625rem;
}

/* Ubah posisi di layar kecil (mobile) */
@media (max-width: 576px) {
  .account-menu {
    right: -57px;
  }
}

.account-menu.hide {
  display: block;
  pointer-events: none;
  opacity: 0;
  top: 100px;
}
.account span {
  height: 1.375rem;
  width: 1.375rem;
  display: inline-block;
  background: #777;
  margin-right: 0.313rem;
  -webkit-mask-size: 1.375rem;
  -webkit-mask-repeat: no-repeat;
  mask-size: 1.375rem;
  mask-repeat: no-repeat;
}
.account-menu span {
  margin-right: 0.5rem;
}
.account-button {
  padding: 0.313rem 0.625rem;
  position: relative;
  color: #777;
}
.account-menu li {
  list-style: none;
  border-bottom: 2px solid #f6f6f6;
}
.account-menu-username {
  justify-content: center;
  align-items: center;
  display: none;
  color: #777;
}
#header .account-menu a {
  color: #777;
  display: flex;
  font-weight: 700;
  padding: 0.375rem;
  text-decoration: none;
  line-height: 22px;
}
#header .account-menu li:last-child {
  border-bottom: 0;
}
.account-menu-username:hover,
#header .account-menu a:hover {
  color: #df5d43;
}
#main-content #header {
  height: 0;
  overflow: visible;
  z-index: 9989;
  justify-content: flex-end;
  flex-direction: row;
  padding: 0px 2.5rem;
}
.no-auth #site-name a {
  margin-left: 2.5rem;
  width: 150px;
  height: 86px;
  background: url(../../../static/ui/openwisp/images/Logotop.png)
    no-repeat scroll 0 50%/100%;
}

/* Fix for object tools */
#content-main .object-tools {
  display: none;
}
#content-main .form-row a:link {
  text-decoration: underline;
}
#content-main .form-row a:link:hover,
#content-main a:link:focus {
  text-decoration: none;
}
.title-wrapper h1,
.title-wrapper h2 {
  display: inline-block;
  margin: 0px;
  margin-bottom: 20px;
}
.title-wrapper h2 {
  margin-left: 10px;
  font-weight: normal;
}
.title-wrapper h2::before {
  content: "(";
}
.title-wrapper h2::after {
  content: ")";
}
.title-wrapper .object-tools {
  margin-top: -4px;
  margin-bottom: 20px;
}
.title-wrapper .object-tools li {
  height: auto;
}
#changelist .paginator {
  box-sizing: border-box;
  font-size: 14px;
}
#changelist p.paginator a,
#changelist p.paginator .this-page {
  background: #df5d43;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 2px;
}
#changelist p.paginator .this-page {
  background: transparent;
  border: 1px solid rgba(223, 93, 67, 0.7);
  padding: 4px 9px;
}
#changelist p.paginator a:focus,
#changelist p.paginator a:hover {
  background: #b31e00;
}
#changelist p.paginator a.showall {
  background: none;
  color: #df5d43;
}
#changelist p.paginator a.showall:focus,
#changelist p.paginator a.showall:hover {
  color: #b31e00;
}
div#toolbar #searchbar {
  max-width: 68%;
}
#main .option-container {
  position: absolute;
  margin-top: 0px;
  top: 39px;
  display: flex;
  flex-direction: column;
  text-align: center;
  z-index: 999;
  background-color: #efefef;
  border-radius: 8px;
  box-shadow: 0px 1px 3px #00000040;
  color: #333333;
  font-weight: normal;
}
#main .option-container .option {
  padding: 10px;
  border: 0;
  font-weight: normal;
  cursor: pointer;
  background-color: #efefef;
  color: #333333;
  border-radius: 0;
}
#main .option-container .option:hover,
#main .option-container .option:focus,
#main .option-container .option:active {
  background: #df5d43;
  color: #fff;
  outline: 0 none;
}
#content p {
  margin: 10px 0;
}

/* Calender style */
div.calendar caption,
div.calendar td,
div.calendar th,
div.calendar-shortcuts,
p.calendar-cancel {
  font-size: 14px;
  line-height: 20px;
}
div.calendar caption,
div.calendarbox h2 {
  background: #df5d43;
  color: #fff;
}
div.calendar caption {
  padding: 0.9rem 10px;
}
.calendarbox a.calendarnav-previous,
.calendarbox a.calendarnav-next {
  background: rgb(255 255 255 / 75%);
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  top: 15px;
}
div.calendarbox,
div.clockbox {
  width: auto;
  background-color: #efefef;
  border-radius: 8px;
  box-shadow: 0px 1px 3px #00000040;
}
div.calendar th {
  padding: 10px;
}
div.calendar td a {
  padding: 10px;
}
ul.timelist a {
  padding: 8px 0px;
}
div.calendar td a:hover,
div.calendar td.selected a,
ul.timelist a:hover {
  background: #ffe5e5;
  color: #df5d43;
}
.calendarbox a.calendarnav-previous {
  mask: url(../../ui/openwisp/images/calender-prev.svg) no-repeat center;
  -webkit-mask: url(../../ui/openwisp/images/calender-prev.svg) no-repeat center;
}
.calendarbox a.calendarnav-next {
  mask: url(../../ui/openwisp/images/calender-next.svg) no-repeat center;
  -webkit-mask: url(../../ui/openwisp/images/calender-next.svg) no-repeat center;
}
.calendarbox a.calendarnav-previous,
.calendarbox a.calendarnav-next {
  padding: 4px;
  top: 13px;
  margin: 0 3px;
  mask-size: inherit !important;
  -webkit-mask-size: inherit !important;
}
ul.timelist,
div.calendarbox .calendarnav-next:focus,
div.calendarbox .calendarnav-next:hover,
.calendarbox .calendarnav-previous:focus,
.calendarbox .calendarnav-previous:hover {
  background: #fff;
}
div.calendar-shortcuts {
  padding: 10px;
}
p.calendar-cancel {
  padding: 10px;
}
div.calendar-shortcuts a:hover {
  color: #df5d43;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  #main-content div.breadcrumbs {
    padding: 1rem 1.875rem;
  }
  #main-content #header {
    padding: 0rem 1.875rem;
  }
  .no-auth #site-name a {
    margin-left: 1.875rem;
  }
}
@media (max-width: 768px) {
  #main-content div.breadcrumbs {
    padding: 1rem 0.938rem;
  }
  #main-content #header {
    padding: 0px 0.938rem;
    top: 0;
    position: sticky;
  }
  .account-menu-username {
    display: flex;
    padding-bottom: 5px;
  }
  .account-button strong {
    display: none;
  }
  #ow-user-tools .account-button .user {
    margin-right: 0;
  }
  .default-btn,
  .success-btn,
  .error-btn {
    display: block;
    text-align: center;
  }
  .title-wrapper h1,
  .title-wrapper h2 {
    margin-bottom: 15px;
    display: block;
  }
  .title-wrapper .object-tools {
    display: inline-block;
    margin-bottom: 15px !important;
  }
  .title-wrapper .object-tools li {
    margin-left: 0px;
    width: 100%;
  }
}

/*********** Selector fix ***********/
@media (max-width: 1226px) and (min-width: 1024px) {
  .related-widget-wrapper > a {
    order: 2;
  }
  div.selector {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  div.related-widget-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }
  div.selector ul.selector-chooser {
    margin: 15px auto 20px;
  }
}

/****** COMMON CSS FOR MENU ON MUTIPLE SCREEN SIZE *****/
#container.no-auth,
#container.toggle-menu.no-auth {
  flex-direction: column;
}
div#container.no-auth,
.popup div#container {
  display: flex;
}
#container.no-auth #menu {
  position: relative;
  height: auto;
  width: 100%;
  box-shadow: none;
  min-height: unset;
}
#container.no-auth #main-content {
  margin-left: 0;
}
#container.no-auth #site-name {
  display: block;
}
#container.no-auth .hamburger,
#container.no-auth .menu-toggle {
  display: none;
}
#menu {
  position: fixed;
  background: #fcfcfc;
  box-shadow: 0 1px 4px -1px #00000026;
  top: 0;
  left: 0;
}
.menu-bar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
a.menu-item,
.mg-link,
.mg-head {
  display: flex;
  padding: 0.875rem 1rem;
  word-break: break-word;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.86rem;
  font-weight: 500;
  align-items: center;
  color: #777;
  text-decoration: none !important;
}
/* Ikon default tetap putih untuk kasus umum */
.menu-item .icon,
.mg-heading .icon,
.mg-link .icon {
  background: #fff;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  display: inline-block;
  margin-right: 0.8rem;
}

/* Ikon di dalam dropdown yang terbuka dan tidak aktif menjadi hitam */
#menu .menu-group.active .mg-link:not(.active) .icon {
  background: #000;
}

/* Ikon untuk link aktif di dalam dropdown tetap merah muda */
#menu .menu-group.active .mg-body .mg-link.active .icon,
#menu .menu-group.active .mg-body a.menu-item.active .icon {
  background: #df5d43 !important;
}


.menu-item:hover,
.mg-head:hover,
#menu .mg-link:hover,
.menu-item:focus,
.mg-head:focus,
#menu .mg-link:focus,
.select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected="true"] {
  background: #ffffff !important;
  color: #df5d43 !important;
}
#menu .mg-link:hover,
#menu .mg-link:focus {
  color: #c74126;
}
.mg-head {
  justify-content: space-between;
}
#menu .mg-link {
  font-weight: 300;
  font-size: 0.8rem;
  padding: 0.55rem 1rem;
  text-transform: capitalize;
  color: rgba(0, 0, 0, 0.675);
}
.menu-item:hover .icon,
.mg-head:hover .icon,
.menu-item:focus .icon,
.mg-head:focus .icon,
.mg-head:hover .mg-arrow,
.mg-head:focus .mg-arrow,
.menu-group.active .mg-head .icon,
.menu-group.active .mg-head .mg-arrow,
.menu-group.active-mg .mg-head .icon,
.menu-group.active-mg .mg-head .mg-arrow,
.mg-link:hover .icon,
.mg-link:focus .icon,
#menu a.active .icon {
  background: #df5d43;
}
  
.mg-arrow {
  flex-shrink: 0;
  mask: url(../../ui/openwisp/images/down-arrow.svg) no-repeat center;
  -webkit-mask: url(../../ui/openwisp/images/down-arrow.svg) no-repeat center;
  height: 1.25rem;
  width: 1.25rem;
  margin-left: 1.25rem;
  background: #bbbbbb;
  transition: transform 0.3s;
}
.mg-heading {
  display: flex;
  align-items: center;
}
.mg-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #ffffff;
}
.mg-list li {
  padding: 0;
}

/* for transition in the height of mg-dropdown */
.menu-group.active .mg-dropdown {
  max-height: 200vh !important;
}
.mg-dropdown-label {
  text-transform: uppercase;
  color: #777;
  padding: 0.625rem 0.875rem;
  font-weight: 600;
  display: none;
}
.mg-list {
  padding: 0;
  margin: 0;
}
.mg-list li {
  list-style: none;
}
.menu-group.active .mg-arrow {
  transform: rotate(-90deg);
}
.menu-group.active .mg-head {
  color: #df5d43;
}
.mg-heading,
.mg-list span,
.mg-arrow {
  pointer-events: none;
}
.menu-group.active {
  /* background: #fdf2f2f2; */
  background: #fff;
}
h1#site-name {
  margin: 0;
  padding: 0.5rem 0px;
}
#site-name a {
  display: block;
  width: 165px;
  height: 95px;
  margin: auto;
  background: url(../../../static/ui/openwisp/images/ONESIA-Brand-White.png)
    no-repeat scroll 0 50%/100%;
  text-indent: -2000px;
}
#main-content.m-0 {
  margin: 0;
}
.popup #main-content {
  margin-left: 0;
}
#changelist-search > div {
  align-items: center;
}

/* Highlight menu item */
#menu a.active {
  /* background: #ffe5 !important; */
  color: #df5d43 !important;
  cursor: default;
}
.menu-group.active-mg:not(.active) .mg-head {
  background: #ffe5e5 !important;
}
#menu a.active:hover {
  background: #ffe5e5 !important;
}

/* Tambahan khusus mobile (<= 768px) */
@media (max-width: 768px) {
  a.menu-item[href*="openwisp-system-info"],
  li a[href*="openwisp-system-info"] {
    display: none !important;
  }
}

/****************** MENU(screen-size > 768px) ******************/
@media (min-width: 769px) {
  .toggle-menu .menu-toggle span {
    transform: rotate(180deg);
  }
  .toggle-menu .hamburger {
    display: flex;
  }
  .toggle-menu .menu-toggle {
    left: 3.75rem;
  }
  .toggle-menu .menu-backdrop {
    display: none;
  }
  .menu-backdrop {
    display: block;
  }
  #main-content {
    margin-left: 3.75rem;
  }

  /*** MENU OPEN ***/

  .hamburger {
    display: none;
  }
  #main-content #header {
    position: sticky;
    top: 0;
  }

  #menu {
    height: 100vh;
    overflow-y: auto !important;   /* ganti hidden jadi auto */
    overflow-x: hidden;
  }
  #menu {
    height: calc(100%);
    overflow-y: hidden;
    scrollbar-width: thin;
    background: url(../../../static/ui/openwisp/images/bg_login.png);
  }

  .login #menu {
    background: #fff;
    background-size: cover;
  }

  a.menu-item[href*="openwisp-system-info"] {
    display: none !important;
  }
  

    /* default menu utama tetap putih */
    /* #menu .nav > .menu-group > .mg-head,
    #menu .nav > a.menu-item {
    color: #fff !important;
    } */

    /* default menu induk putih */
    #menu .nav > .menu-group > .mg-head,
    #menu .nav > a.menu-item {
    color: #fff !important;
    }


    #menu .nav > .menu-group > .mg-head:hover ,
    #menu .nav > a.menu-item:hover {
    color: #000 !important;
    }
    /* kalau induk aktif/expanded jadi hitam */
    #menu .nav > .menu-group.active > .mg-head,
    #menu .nav > .menu-group[aria-expanded="true"] > .mg-head {
    color: #000 !important;
    }


    /* submenu (dropdown) text hitam */
    #menu .menu-group .mg-body .mg-link,
    #menu .menu-group .mg-body a.menu-item {
    color: #000 !important;
    }

    /* hover submenu jadi merah */
    #menu .menu-group .mg-body .mg-link:hover,
    #menu .menu-group .mg-body a.menu-item:hover {
    color: #df5d43 !important;
    }

    /* menu induk tetap putih walaupun aktif/expanded */
    #menu .nav > .menu-group.active > .mg-head,
    #menu .nav > .menu-group[aria-expanded="true"] > .mg-head {
    color: #000 !important;
    }
    
  #menu .nav:hover {
    overflow-y: auto;
    overflow-y: overlay;
    overflow-x: hidden;
  }

  a.menu-item,
  .mg-link,
  .mg-head {
    width: 268px;
  }
  

  /*** MENU CLOSE ***/

  .toggle-menu #main-content #header {
    position: relative;
  }

  .toggle-menu #menu {
    width: 3.75rem;
  }
  .toggle-menu .menu-item .icon,
  .toggle-menu .mg-heading .icon {
    margin: 0;
  }

  .toggle-menu .menu-item,
  .toggle-menu .mg-head {
    justify-content: center;
    width: auto;
  }
  .toggle-menu #menu .nav {
    height: calc(100% - 50px);
  }

  .toggle-menu .mg-arrow,
  .toggle-menu #site-name,
  .toggle-menu .menu-group.active .mg-heading .label {
    display: none;
  }

  .toggle-menu .mg-heading .label,
  .toggle-menu .menu-item .label {
    opacity: 0;
    position: absolute;
    left: 3.125rem;
    width: fit-content;
    background: #777;
    color: #fff;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
    border-radius: 0.188rem;
    box-shadow: 0px 0px 4px #00000030;
    pointer-events: none;
  }

  .toggle-menu .menu-item:hover .label,
  .toggle-menu .mg-head:hover .mg-heading .label {
    opacity: 1;
    left: 4.1rem;
    z-index: 2;
    transition: all 0.2s ease-in;
  }
  .toggle-menu .mg-dropdown {
    position: absolute;
    left: 3.95rem;
    opacity: 0;
    top: 47px;
    background: transparent;
    pointer-events: none;
    padding: 0.375rem;
    max-height: unset;
  }
  .toggle-menu .mg-dropdown-label,
  .toggle-menu .mg-list {
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0px 1px 4px #00000040;
  }
  .toggle-menu .mg-dropdown-label {
    display: block;
  }
  .toggle-menu .mg-list {
    padding: 0.625rem 0rem;
    margin-top: 0.375rem;
  }
  .toggle-menu .menu-group.active .mg-dropdown {
    opacity: 1;
    top: 0;
    z-index: 1;
    pointer-events: all;
    transition: top 0.3s ease;
  }
}

/****************** MENU(screen-size > 1024px) ******************/
@media (min-width: 1024px) {
  .menu-backdrop {
    display: none;
  }

  /*** MENU OPEN ***/
  #main-content {
    margin-left: 18.75rem;
  }

  /*** MENU CLOSE ***/
  .toggle-menu #main-content {
    margin-left: 3.75rem;
  }
}

/****************** MENU(screen-size < 768px) ******************/
@media (max-width: 768px) {
  #container {
    height: 100vh;
    overflow-y: scroll;
    overflow-y: overlay;
  }
  #container:not(.toggle-menu)::-webkit-scrollbar {
    display: none !important;
  }
  #container:not(.toggle-menu) {
    scrollbar-width: none;
  }
  #main-content #header {
    margin-bottom: 3rem;
    position: sticky;
    z-index: 9999;
  }
  .no-auth #main-content #header {
    margin-bottom: 0;
  }
  .menu-toggle {
    display: none;
  }
  h1#site-name {
    padding: 0;
  }

  /* #site-name a {
    width: 2.5rem;
    height: 2.5rem;
    background: url(../../../static/ui/openwisp/images/ONESIA-Brand-White.png);
  } */
   /* default (desktop) */
  #site-name a {
    width: 200px;
    height: 60px;
    background: url(../../../static/ui/openwisp/images/ONESIA-Brand-White.png)
      no-repeat center;
    background-size: contain;
  }

  /* mobile (small) */
  @media (max-width: 768px) {
    #site-name a {
      width: 150px;
      height: 40px;
      background: url(../../../static/ui/openwisp/images/onesia_1.png) no-repeat center !important;
      background-size: contain; /* gambar menyesuaikan, tidak terpotong */
      background-position: center;
    }

    .menu-item .icon,
    .mg-heading .icon,
    .mg-link .icon {
      background: #000;
  }

  }

  .hamburger {
    padding: 0.813rem 1rem;
  }
  .head {
    display: flex;
    align-items: center;
  }
  .nav {
    height: calc(100% - 3rem);
    overflow-y: auto;
  }
  .no-auth #site-name a {
    margin-left: 0.938rem;
  }

  /*** MENU OPEN ***/

  #menu {
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 9999;
    overflow: hidden;
    min-width: 314px;
    top: 0;
  }

  /*** MENU CLOSE ***/
  .toggle-menu #menu {
    height: 3rem;
  }
  .toggle-menu .nav {
    display: none;
  }
}

/* LOGIN PAGE */

.login #main-content {
  padding-bottom: 1.25rem;
}
.login #menu {
  box-shadow: none;
}
/* body.login {
  background: #f4f7f6;
} */
/* body.login {
    background: url(../../../static/ui/openwisp/images/bg_login.png)
    no-repeat scroll 0 50%/100%;
 } */

 body.login {
  background: url(../../../static/ui/openwisp/images/bg_login.png) no-repeat center center fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.login #container {
  box-shadow: 0px 0px 6px #f4f7f6;
  width: 31em !important;
}
.hide {
  display: none;
}
.login #menu {
  position: relative;
  height: auto;
  width: 100%;
}
.login .head {
  display: block;
}
.login #site-name {
  display: block;
}
.login #site-name a {
  background: url(../../../static/ui/openwisp/images/Logotop.png)
    no-repeat scroll 0 50%/100%;
  text-indent: -2000px;
  width: 150px;
  height: 86px;
  margin: auto;
}
.login .hamburger {
  display: none;
}
.login #main .form-row {
  padding: 4px 0;
}
.login #main #content {
  padding: 20px 35px 10px;
}
.login #main .submit-row {
  padding-left: 0;
  text-align: center;
}

/************
* Scrollbar
************/
:root {
  scrollbar-color: #777 #f1f1f1 !important;
}
body::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #777;
}
::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* UTILS ICONS */
.user {
  mask-image: url(../../ui/openwisp/images/user.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/user.svg);
}
.ow-dashboard-icon {
  mask-image: url(../../ui/openwisp/images/dashboard.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/dashboard.svg);
}
.ow-info-icon {
  mask-image: url(../../ui/openwisp/images/info.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/info.svg);
}
.password {
  mask-image: url(../../ui/openwisp/images/password.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/password.svg);
}
.logout {
  mask-image: url(../../ui/openwisp/images/logout.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/logout.svg);
}
.ow-help {
  mask-image: url(../../ui/openwisp/images/help.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/help.svg);
}
#menu .icon.None,
#menu .icon.None:hover {
  background: transparent;
}

/* USERS ICONS */

.ow-org {
  mask-image: url(../../ui/openwisp/images/org.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/org.svg);
}
.ow-org-user {
  mask-image: url(../../ui/openwisp/images/org-user.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/org-user.svg);
}
.ow-org-owner {
  mask-image: url(../../ui/openwisp/images/org-owner.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/org-owner.svg);
}
.ow-user-and-org {
  mask-image: url(../../ui/openwisp/images/user-and-org.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/user-and-org.svg);
}
.ow-permission {
  mask-image: url(../../ui/openwisp/images/permission.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/permission.svg);
}

/* CONTROLLER ICONS */

.ow-config {
  mask-image: url(../../ui/openwisp/images/config.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/config.svg);
}
.ow-device {
  mask-image: url(../../ui/openwisp/images/device.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/device.svg);
}
.ow-device-group {
  mask-image: url(../../ui/openwisp/images/device-group.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/device-group.svg);
}
.ow-template {
  mask-image: url(../../ui/openwisp/images/template.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/template.svg);
}
.ow-vpn {
  mask-image: url(../../ui/openwisp/images/vpn.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/vpn.svg);
}
.ow-geo {
  mask-image: url(../../ui/openwisp/images/geo-info.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/geo-info.svg);
}
.ow-location {
  mask-image: url(../../ui/openwisp/images/location.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/location.svg);
}
.ow-floor {
  mask-image: url(../../ui/openwisp/images/floor.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/floor.svg);
}
.ow-cer-group {
  mask-image: url(../../ui/openwisp/images/cer-group.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/cer-group.svg);
}
.ow-access-credential {
  mask-image: url(../../ui/openwisp/images/access-credential.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/access-credential.svg);
}
.ow-ca {
  mask-image: url(../../ui/openwisp/images/ca.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/ca.svg);
}
.ow-certificate {
  mask-image: url(../../ui/openwisp/images/certificate.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/certificate.svg);
}

/* RADIUS ICONS */

.ow-radius {
  mask-image: url(../../ui/openwisp/images/radius.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/radius.svg);
}
.ow-radius-accounting {
  mask-image: url(../../ui/openwisp/images/accounting.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/accounting.svg);
}
.ow-batch-creation {
  mask-image: url(../../ui/openwisp/images/batch-user.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/batch-user.svg);
}
.ow-radius-checks {
  mask-image: url(../../ui/openwisp/images/check.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/check.svg);
}
.ow-radius-group {
  mask-image: url(../../ui/openwisp/images/radius-group.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/radius-group.svg);
}
.ow-radius-nas {
  mask-image: url(../../ui/openwisp/images/nas.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/nas.svg);
}
.ow-radius-token {
  mask-image: url(../../ui/openwisp/images/token.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/token.svg);
}
.ow-radius-replies {
  mask-image: url(../../ui/openwisp/images/replies.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/replies.svg);
}
.ow-radius-post-log {
  mask-image: url(../../ui/openwisp/images/log.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/log.svg);
}

/* IPAM ICONS */

.ow-ipam {
  mask-image: url(../../ui/openwisp/images/ipam.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/ipam.svg);
}
.ow-subnet {
  mask-image: url(../../ui/openwisp/images/subnet.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/subnet.svg);
}
.ow-ip-address {
  mask-image: url(../../ui/openwisp/images/ip-address.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/ip-address.svg);
}

/* MONITORING ICONS */

.ow-monitoring {
  mask-image: url(../../ui/openwisp/images/monitoring.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/monitoring.svg);
}
.ow-metrics {
  mask-image: url(../../ui/openwisp/images/metrics.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/metrics.svg);
}
.ow-monitoring-checks {
  mask-image: url(../../ui/openwisp/images/montoring-checks.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/montoring-checks.svg);
}
.ow-monitoring-wifi {
  mask-image: url(../../ui/openwisp/images/monitoring-wifi.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/monitoring-wifi.svg);
}

/* FIRMWARE */

.ow-firmware {
  mask-image: url(../../ui/openwisp/images/firmware.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/firmware.svg);
}
.ow-build {
  mask-image: url(../../ui/openwisp/images/build.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/build.svg);
}
.ow-category {
  mask-image: url(../../ui/openwisp/images/category.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/category.svg);
}
.ow-mass-upgrade {
  mask-image: url(../../ui/openwisp/images/mass-upgrade.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/mass-upgrade.svg);
}

/* NETWORK TOPOLOGY */
.ow-network-topology {
  mask-image: url(../../ui/openwisp/images/network-topology.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/network-topology.svg);
}
.ow-link {
  mask-image: url(../../ui/openwisp/images/link.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/link.svg);
}
.ow-topology {
  mask-image: url(../../ui/openwisp/images/topology.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/topology.svg);
}
.ow-node {
  mask-image: url(../../ui/openwisp/images/node.svg);
  -webkit-mask-image: url(../../ui/openwisp/images/node.svg);
}

/* LOGIN SCREEN */
@media only screen and (max-width: 576px) {
  .login #container {
    width: auto !important;
  }
}