/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

[hidden],
template {
  display: none
}

@charset "UTF-8";

body,
html {
  font-size: 20px;
  font-family: "-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,\30D2\30E9\30AE\30CE\89D2\30B4   ProN W3,Arial,\30E1\30A4\30EA\30AA,Meiryo,sans-serif";
  height: 100%;
  background-color: #ccffff;
  color: #0f0e18
}

p {
  margin: 0
}

input {
  border: 1px solid #a7a9be;
  border-radius: 3px;
  padding: 2px
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number] {
  -moz-appearance: textfield
}

.disabled {
  pointer-events: none
}

main {
  padding: 5px;
  height: 100%
}

@media screen and (min-width:768px) {
  main {
    width: 80%;
    margin: 0 auto
  }
}

@media screen and (min-width:1280px) {
  main {
    width: 60%
  }
}

h1 {
  margin: 10px 0;
  font-size: 1.1rem
}

header {
  background-color: #0000cd;
  height: 3rem;
  color: #fff;
  display: flex;
  align-items: center;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}

header>div {
  flex-grow: 1
}

header .title {
  text-align: center;
  font-size: 1.2rem
}

.contents {
  position: absolute;
  width: 100%;
  top: 60px
}

.top nav ul {
  list-style: none;
  padding: 0
}

.top nav ul li {
  width: 100%;
  margin-top: 10px
}

.top nav ul li a {
  display: block;
  padding: 10px;
  color: #0f0e18;
  border: 3px solid #000;
  border-radius: 5px;
  text-decoration: none
}

.top nav ul li a:hover {
  background-color: #ff8906;
  color: #fff
}

ul.authority-none,
ul.login-user {
  list-style: none;
  padding: 0
}

ul.authority-none li,
ul.login-user li {
  width: 100%;
  margin-top: 10px
}

ul.authority-none li label,
ul.login-user li label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 10px;
  color: #467af1;
  border: 3px solid #87ceeb;
  border-radius: 5px;
  text-align: center;
  text-decoration: none
}

ul.authority-none li label {
  color: #e53170;
  border: 3px solid #e53170
}

.btn {
  padding: .5em 1em
}

.btn,
.btn-sm {
  display: inline-block;
  text-decoration: none;
  background: grey;
  color: #fff;
  border: none;
  border-bottom: 3px solid #737373;
  border-radius: 3px;
  cursor: pointer
}

.btn-sm {
  font-size: .9rem;
  padding: .35em .5em
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, .2);
  border-bottom: none
}

.btn-search {
  width: 100%;
  background-color: #ff8906;
  border-bottom: 3px solid #ec7c00
}

.btn-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  cursor: pointer
}

.btn-back svg {
  position: absolute;
  top: 10px;
  left: 20px
}

.btn-clear {
  width: 3.6rem;
  background-color: #a7a9be;
  border-bottom: 3px solid #989bb3;
  color: #585641;
  margin-left: 2rem
}

.paragraph {
  color: #a7a9be;
  font-size: .8rem
}

.card,
.card-white {
  background-color: #fff;
  border: 1px solid #0f0e17;
  border-radius: 3px;
  padding: 10px
}

.card-white .card-title,
.card .card-title {
  margin-bottom: 5px
}

.card {
  background-color: #0f0e17;
  color: #fff
}

.fade-in {
  animation-name: fade-in-left-to-right;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0
}

@keyframes fade-in-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-100px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

form.search-form {
  display: block
}

form.search-form .input-item {
  margin: 15px 0 10px
}

form.search-form .input-item .input-title {
  margin-bottom: 3px;
  font-size: .9rem
}

form.search-form input {
  width: 100%
}

.display-item {
  margin: 15px 0 10px
}

.display-item .label {
  color: #a7a9be;
  margin-bottom: 3px;
  font-size: .8rem
}

.display-item .value {
  margin-left: 1rem;
  white-space: pre-line
}

.display-item .form-row-value {
  margin-left: 1rem
}

.new-line {
  white-space: pre-line
}

.costomer-info {
  margin-top: 10px
}

.alert-text {
  color: #e53170
}

.list-font {
  font-size: 1.25rem;
  font-weight: 600
}

.title-font {
  color: #494949
}

.title-font.head {
  font-size: .9rem
}

.col-form-label {
  padding-top: 0
}

.device-no {
  margin: 5px 0
}

.device-no input {
  color: #000;
  width: 8rem;
  background-color: #fff
}

.macno1 {
  width: 100%;
  margin: 5px 0;
  padding-right: 4px
}

.macno1 select {
  width: 105px
}

.help-label {
  display: inline-block;
  color: #a7a9be;
  margin-top: auto;
  margin-bottom: auto;
  font-size: .8rem
}

@media screen and (min-width:768px) {
  .macno1 {
    width: 105px;
    margin: 5px 0;
    padding-right: 4px
  }

  .macno1 select {
    width: 100%
  }

  .help-label {
    display: none
  }
}

.macno7 {
  width: 44px;
  margin: 5px 0;
  padding-right: 4px
}

.macno7 select {
  width: 100%
}

.form-row {
  display: flex;
  flex-wrap: wrap
}

.loader-bg {
  height: 100%;
  top: 0;
  left: 0;
  opacity: .5
}

.loader-bg,
.loader-bg svg {
  background: #fff;
  width: 100%;
  position: fixed;
  z-index: 10
}

.loader-bg svg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.invalid-feedback {
  font-size: 85%
}

.invalid {
  border-color: #dc3545
}

.overlay {
  background-color: #000;
  filter: alpha(opacity=50);
  -moz-opacity: .5;
  opacity: .5
}

.dialog,
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh
}

.dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11
}

.dialog-inner {
  z-index: 11;
  width: 60vw;
  padding: 20px;
  background-color: #fff
}

.dialog-header {
  display: block;
  font-size: 1.2em;
  padding-bottom: 5px;
  margin-block-start: .25em;
  margin-block-end: .5em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 700;
  border-bottom: 1px solid
}

.dialog-body {
  padding: 10px;
  min-height: 150px
}

.button-set {
  display: flex
}

.btn-dialog {
  flex: 1;
  margin: 10px;
  background-color: #ff8906;
  border-bottom: 3px solid #ec7c00
}

.dialog-enter-active,
.dialog-leave-active {
  transition: opacity .3s
}

.dialog-enter-to,
.dialog-leave {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1
}

.dialog-enter,
.dialog-leave-to {
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0
}

.global-nav {
  position: fixed;
  right: -320px;
  top: 0;
  width: 250px;
  height: 15vh;
  padding-top: 60px;
  background-color: #fff;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto
}

.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 300
}

.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none
}

.global-nav__item {
  text-align: center;
  padding: 0 14px;
  color: #0f0e18
}

.global-nav__item label {
  display: block;
  padding: 8px 0;
  color: #0f0e18
}

.global-nav__item a {
  display: block;
  padding: 8px 0;
  border-top: 1px inset hsla(0, 0%, 93.3%, .5);
  text-decoration: none;
  text-decoration: underline;
  color: #467af1
}

.global-nav__item a:hover {
  background-color: #eee
}

.hamburger__line {
  position: absolute;
  left: 15px;
  width: 30px;
  height: 2px;
  background-color: #fff;
  transition: all .6s
}

.hamburger__line--1 {
  top: 20px
}

.hamburger__line--2 {
  top: 28px
}

.hamburger__line--3 {
  top: 36px
}

.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer
}

.nav-open .global-nav {
  right: 0
}

.nav-open .black-bg {
  opacity: .8;
  visibility: visible
}

.nav-open .hamburger__line {
  position: absolute;
  left: 15px;
  width: 30px;
  height: 2px;
  background-color: #0f0e18;
  transition: all .6s
}

.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 28px
}

.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%
}

.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 28px
}

.svg-inline--fa.fa-pull-right {
  width: 5%
}

.card_VONU {
  border: 5px solid #f6f
}

.card_DONU {
  border: 5px solid #393
}

.card_HGW {
  border: 5px solid #cc0
}

.combo-DownWidth {
  width: 100%;
  margin: 5px 0;
  padding-right: 4px
}

.combo-DownWidth select {
  width: 60%
}

.form-camera-input {
  display: block;
  width: 60%
}

.form-camera-input:-moz-read-only {
  background: grey
}

.form-camera-input:read-only {
  background: grey
}

.radio-vonu {
  margin-right: 20px
}

.btn-iconit {
  width: 50px;
  background-color: #ff8906;
  border-bottom: 3px solid #ec7c00
}

.btn-iconit:disabled {
  width: 50px;
  background-color: grey;
  border-bottom: 3px solid #737373
}