html, body {
  padding: 0;
  margin: 0;
  font-size: 12px;
  background-color: #f3f3f3;
}

.content {
  width: 1000px;
  margin: auto;
}

input {
  margin: 0;
  border: 1px solid #bbbbbb;
  color: black;
  background-color: #f3f3f3;
}

.chainpath {
  padding: 4px;
  color: black;
}

.main {
  border: 1px solid #bbbbbb;
  background-color: #eee;
  color: black;
  width: 100%;
}
.main .ruleeditor {
  font-family: monospace;
}
.main input {
  width: 100%;
}
.main th {
  color: white;
  background-color: #888888;
}
.main .id {
  width: 30px;
  text-align: center;
}
.main .mon {
  width: 46px;
  text-align: center;
}
.main .rule {
  text-align: center;
}
.main .cmd {
  width: 35px;
  text-align: center;
}
.main .row {
  background-color: #e1e1e1;
  height: 21px;
  padding: 0 5px;
}
.main .row .edit {
  display: none;
  cursor: pointer;
  position: absolute;
  margin-top: 0px;
}
.main .row .edittext:hover .edit {
  display: inherit;
}
.main .rowright {
  background-color: #e1e1e1;
  text-align: right;
}
.main .rowcenter {
  background-color: #e1e1e1;
  text-align: center;
}
.main .newrulerow td:nth-child(1) {
  text-align: right;
}
.main .newrulerow td:nth-child(3) {
  text-align: center;
}

.ipt-DROP {
  color: red;
}

.ipt-ACCEPT {
  color: green;
}

.ipt-net {
  color: gray;
}

.ipt-port {
  color: blue;
}

.ipt-channel {
  color: blue;
}

.ipt-comment {
  color: blue;
  font-style: italic;
}

.error {
  color: white;
  padding: 15px;
  text-align: center;
  display: none;
  border: 1px solid #ff3c3c;
  background-color: #f88;
  cursor: pointer;
  position: static;
}

.info {
  color: black;
  padding: 15px;
  text-align: center;
  display: none;
  border: 1px solid #4ee44e;
  background-color: lightgreen;
  cursor: pointer;
  position: static;
}

/* Main menu */
.mainmenu {
  border: 1px solid #bbbbbb;
  color: black;
  margin: 5px auto 0;
  border-radius: 5px;
  padding: 3px;
  text-align: center;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(gainsboro));
  background: -moz-linear-gradient(top, #eee, gainsboro);
  background-image: -o-linear-gradient(top, #eee, gainsboro);
  background: -ms-linear-gradient(top, #eee, gainsboro);
}

ul.tabs {
  display: table;
  padding: 0 0px;
  list-style: none;
  position: relative;
}
ul.tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table-cell;
  float: left;
  position: relative;
}
ul.tabs li:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#eeeeee));
  background: -moz-linear-gradient(top, white, #eeeeee);
  background-image: -o-linear-gradient(top, white, #eeeeee);
  background: -ms-linear-gradient(top, white, #eeeeee);
}
ul.tabs li:hover:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
ul.tabs li:hover:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
ul.tabs a {
  position: relative;
  display: block;
  cursor: pointer;
}
ul.tabs .item {
  padding: 4px 15px;
  text-decoration: none;
}
ul.tabs .itemselect {
  padding: 4px 15px;
  text-decoration: none;
  background-color: #a2a2a2;
}
ul.dropdown {
  margin: 0 0 0 -36px;
  padding: 0px;
  display: block;
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  display: none;
  border: 1px solid #bbbbbb;
  background-color: #eee;
  box-shadow: 0 0 4px #ccc;
}
ul.dropdown ul.dropdown {
  top: 0;
  left: 95%;
}
ul.dropdown li {
  margin: 0;
  padding: 1px;
  float: none;
  position: relative;
  list-style: none;
  display: block;
}
ul.dropdown li:hover {
  background: none;
}
ul.dropdown li a {
  display: block;
  padding: 5px 15px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  background-color: #d5d5d5;
}
ul.dropdown li a:hover {
  background-color: #e6e6e6;
}
ul.dropdown .first-row {
  float: left;
}
ul.dropdown .second-row {
  float: right;
}
ul.dropdown .large {
  width: 284px;
  left: -60px;
}

/* Tool buttons */
.tools {
  padding: 10px;
  height: 24px;
  text-align: center;
}
.tools .button {
  color: black;
  padding: 5px 11px;
  text-decoration: none;
  float: right;
  cursor: pointer;
  height: 15px;
  margin-left: 5px;
  border-radius: 5px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(gainsboro));
  background: -moz-linear-gradient(top, #eee, gainsboro);
  background-image: -o-linear-gradient(top, #eee, gainsboro);
  background: -ms-linear-gradient(top, #eee, gainsboro);
  border: 1px solid #bbbbbb;
  box-shadow: 0 0 5px #ccc;
}
.tools .button:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#eeeeee));
  background: -moz-linear-gradient(top, white, #eeeeee);
  background-image: -o-linear-gradient(top, white, #eeeeee);
  background: -ms-linear-gradient(top, white, #eeeeee);
}
.tools .button[disabled=disabled] {
  background-color: #ccc;
  color: #999;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(gainsboro), to(#cacaca));
  background: -moz-linear-gradient(top, gainsboro, #cacaca);
  background-image: -o-linear-gradient(top, gainsboro, #cacaca);
  background: -ms-linear-gradient(top, gainsboro, #cacaca);
  cursor: default;
}
.tools .button .icon {
  float: right;
  margin: 0 4px;
}

/* Dialogs */
.settings {
  display: none;
}
.settings .splitter {
  background-color: #e1e1e1;
  padding: 3px;
  font-weight: bold;
}

.addchain {
  display: none;
}

.dialog {
  display: none;
}
.dialog .content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.dialog .content .params {
  padding-bottom: 10px;
}
.dialog .content .params input {
  margin: 3px;
  width: 115px;
}
.dialog .content .logpanel {
  overflow: auto;
  white-space: nowrap;
  flex-grow: 1;
}

#user-select-category {
  height: 200px;
  width: 140px;
  border: 1px solid #bbbbbb;
  vertical-align: top;
  float: left;
}
#user-select-category .item {
  padding: 3px;
}
#user-select-category .item:hover {
  background-color: #e1e1e1;
  cursor: pointer;
}
#user-select-category .itemselected {
  padding: 3px;
  background-color: #c8c8c8;
}
#user-select-category .item-icon {
  float: left;
  margin-right: 5px;
}

#settings-page1, #settings-page2, #settings-page3 {
  height: 200px;
  padding: 0px;
  display: none;
  border: 1px solid #bbbbbb;
  vertical-align: top;
  margin-left: 145px;
  overflow: auto;
}

.authform {
  border: 1px solid gray;
  background-color: #ccc;
  margin: auto;
  margin-top: 100px;
  padding: 15px;
}
.authform td {
  text-align: right;
}

.ui-dialog {
  background-color: #eee !important;
  box-shadow: 5px 5px 10px #ccc;
}
.ui-dialog .ui-widget-header {
  background: #888888 !important;
}
.ui-dialog .ui-widget-content {
  background: transparent !important;
  color: black !important;
}
.ui-dialog .ui-dialog-buttonpane {
  padding: 0;
}
.ui-dialog .ui-state-hover {
  background: #a2a2a2;
  box-shadow: inherit;
  border-color: #bbbbbb;
}
.ui-dialog .ui-button {
  box-shadow: 0 0 5px #ccc;
  color: black;
  margin-left: 5px;
  border-radius: 5px;
  border: 1px solid #bbbbbb;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(gainsboro));
  background: -moz-linear-gradient(top, #eee, gainsboro);
  background-image: -o-linear-gradient(top, #eee, gainsboro);
  background: -ms-linear-gradient(top, #eee, gainsboro);
}
.ui-dialog .ui-button:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#eeeeee));
  background: -moz-linear-gradient(top, white, #eeeeee);
  background-image: -o-linear-gradient(top, white, #eeeeee);
  background: -ms-linear-gradient(top, white, #eeeeee);
}
.ui-dialog .main {
  border: 0;
  margin-top: 0;
}

@media (max-width: 1000px) {
  .content {
    width: inherit;
  }

  .button {
    margin-bottom: 5px;
  }

  .ui-dialog {
    left: 0;
    max-width: 95%;
  }

  #logs div {
    white-space: nowrap;
  }
}