body {
  background: #fff
}

.notice,
div.error,
div.updated {
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 #5a5a5a57;
  border-right-width: 42px
}

.notice:before,
div.error:before,
div.updated:before,
.nav-tab-wrapper > a.nav-tab-active:after,
.wpp-settings-wrap div.updated:after {
  font-family: dashicons;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-rendering: auto;
  font-size: 30px;
  text-align: center;
  position: absolute;
  right: -37px;
  color: #fff;
  top: 4px
}

div.updated:before {
  content: "\f12a"
}

div.update-nag:before {
  content: "\f534"
}

.wpp-settings-wrap {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px 0 #808080b3;
  border: 1px solid #adaaaa;
  overflow: hidden;
  display: flex;
  flex-flow: row wrap
}

.wpp-settings-wrap .notice,
.wpp-settings-wrap div.error,
.wpp-settings-wrap div.updated {
  position: fixed;
  z-index: 2;
  left: 20px;
  transform: translateY(-150%);
  border-radius: 5px;
  box-shadow: 0 0 5px 0 #8080808a
}

.wpp-settings-wrap div.updated:after {
  content: '\f153';
  left: 0;
  right: auto;
  color: #d63638;
  top: -19px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid
}

.wpp-settings-wrap h2:first-child {
  flex: 1 100%;
  padding: 10px 20px;
  background: #1d23270d;
  color: #181818;
  text-align: center;
  border-bottom: 1px solid #adaaaa;
  box-shadow: inset 0px -5px 5px 0 #8080802b
}

.nav-tab-wrapper {
  flex: 1 120px;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #c3c4c7;
  background: #1d23270d;
  padding: 0 !important;
  overflow: hidden
}

.nav-tab-wrapper > a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px;
  transition: all ease-in-out .3s;
  border: 0;
  border-bottom: 1px solid #8080804a;
  position: relative
}

.nav-tab-wrapper > a.nav-tab-active:after {
  content: '\f341';
  position: absolute;
  left: 40px;
  right: auto;
  top: 12px;
  color: #797979
}

[dir="ltr"] .nav-tab-wrapper > a.nav-tab-active::after {
	transform: scale(-1);
	right: 40px;
	left: auto;
}

#tab_container {
  flex: 5;
  padding: 0 15px
}


input[type=checkbox] {
  opacity: 0;
  position: absolute
}

label.wpp-checkbox-label {
  position: relative;
  display: block;
  background: #f8f8f8;
  border: 1px solid #f0f0f0;
  border-radius: 2em;
  padding: 0.5em 1em 0.5em 5em;
  box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.1) inset;
  cursor: pointer;
  text-shadow: 0 2px 2px #fff
}

label.wpp-checkbox-label.empty-label {
  display: inline-block;
  background: #fff0;
  border: none;
  padding: 0.5em 0 0.5em 5em;
  box-shadow: none
}

label.wpp-checkbox-label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.7em;
  width: 3em;
  height: 1.2em;
  border-radius: 0.6em;
  background: #eee;
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.2) inset
}

label.wpp-checkbox-label:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5em;
  width: 1.4em;
  height: 1.4em;
  border: 0.25em solid #fafafa;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #ddd;
  background-image: linear-gradient(to top, #fff 0%, #fff 40%, transparent 100%);
  transform: translateY(-50%);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5)
}

label.wpp-checkbox-label,
label.wpp-checkbox-label:before,
label.wpp-checkbox-label:after {
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)
}

label.wpp-checkbox-label:hover,
input.wpp-checkbox-label:focus + label {
  color: black
}

label.wpp-checkbox-label:hover::after,
input.wpp-checkbox-label:focus + label::after {
  background-color: #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)
}

input[type=checkbox]:checked {
  counter-increment: total
}

input[type=checkbox]:checked + label.wpp-checkbox-label:before {
  background: #2271B1
}

input[type=checkbox]:checked + label.wpp-checkbox-label:after {
  transform: translateX(2em) translateY(-50%)
}

p.submit {
  text-align: left;
  padding: 15px !important;
  margin: 0 -15px 0;
  max-width: none;
  background: #f3f3f4;
  box-shadow: inset 0px 3px 5px 0 #80808040
}

#submit {
  padding: 10px 15px
}