input::-ms-input-placeholder {color:#cccccc !important;}
input::-webkit-input-placeholder {color:#cccccc !important;}
input::-moz-input-placeholder {color:#cccccc !important;}
button:focus {outline:none;}
.form-control:focus {box-shadow: none;}
.btn:focus {box-shadow: none !important;}


  .container-fluid {
    margin-top: 1.5rem;
  }

  .load_wrap {
    z-index: 9999;
    background-color: #00000087;
    width: 100%;
    min-height: 100%;
    position: absolute;
  }
  .spinner-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .sidebar {
    background-color: #3a4651;
  }
  .sidebar .nav-link .nav-icon {
    color:#ffffff;
  }
  
  .spinner-border {
    width: 10rem;
    height: 10rem;
    border: 1em solid currentColor;
    border-right-color: transparent;
  }

  .sidebar .fa {
    width:30px;
    text-align: center;
  }  

  .nav-dropdown-items li a {
    font-size: 12px;
    padding-left:50px !important;
  }

  .breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
    list-style: none; 
    float:right;   
    border-bottom: none;
  }

  .pageheader {
    display: flow-root;
    height:70px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid #c8ccd3;
  }

  .pageheader h3 {
    float:left;
    padding-left:15px; 
    padding-top:10px; 
  }

  .form-control, .input-group-text {
    border-radius: 0px;
  }

  .badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 100%;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0rem;
    color:#ffffff;
    font-weight: 500;
  }

  .card-header {
    display: flex;
    flex-wrap: wrap;
  }

  .card-header-title {
    font-weight: bold;
    padding-top:8px;
    padding-bottom:5px;
  }
  
  .card-body-action {
    border-top: 1px solid #e4e7ea;
    padding-top:0.8rem;
    text-align: right;;
  }

  .card-footer {
    text-align: right;
  }

  .card .nav-dropdown-toggle::before {
    position: absolute;
    right: 1rem;
    display: block;
    width: 12px;
    height: 37px;
    padding: 0;
    margin-top: 0px;
    content: "";
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    transform:rotate(-90deg);
    cursor: pointer;
  }
  
  .card .card-header.open > .nav-dropdown-toggle::before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .list-count {
    margin-left:auto;
    padding-right:15px;
  }

  .card-header .list-count {    
    padding-right:0px;
  }  

  .table-responsive td, .table-responsive th {
    white-space: nowrap;
  }

  .page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
  }
  
  .page-item:last-child .page-link {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
  }

  a.page-link:hover {
    color: #2e3841;
    }

  .modal-header button {
    font-size:1.8rem;
  }


  .tui-grid-header-area {
    border-bottom: 1px solid #eee;
  }

  .tui-grid-cell-header {
    background-color: #cccccc !important;
  }

  

  #cat-tree .fa {
    color:#ffc107;
  }


  .help-block {
    color:#999999;
  }



@media (max-width: 992px) {
  .help {
    display: none;
  }
}



@media (min-width: 992px) {
  .modal-dialog {
    max-width: 800px;
    margin: 1.75rem auto;
  }
}



@media (max-width: 430px) {
  .pageheader {
      height:140px;
  }
}

@media (max-width: 720px) {
  .col-4 {
      display:contents;   
  }

  .col-4 .form-control {
      border:1px solid #e4e7ea;
      margin:0px 10px 5px 10px;
  }

  .col-4 .input-group-append {
      margin:0px 10px 5px 0px;
  }
}






/* PRELOADER */
figure { 
  position: absolute;
  margin: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 6.250em; height: 6.250em;
  animation: rotate 2.4s linear infinite;
}
.white { 
  top: 0; bottom: 0; left: 0; right: 0; 
  background: white; 
  animation: flash 2.4s linear infinite;
  opacity: 0;
}
.dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

@keyframes rotate {
  0% { transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}

@keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}

@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}

.box-loader {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 2rem auto;
}
.box {
  width: 45%;
  height: 45%;
  background: rgba(133,206,54, 1);
  opacity: 0;
  animation: show 1s linear infinite;
}
.box:nth-child(1)
{
     position: absolute;
     top: 2.5%;
     left: 2.5%;
}

.box:nth-child(2) {
     position: absolute;
     top: 2.5%;
     right: 2.5%;
     animation-delay: 0.25s;
}

.box:nth-child(3) {
     position: absolute;
     bottom: 2.5%;
     right: 2.5%;
     animation-delay: 0.5s;
}

.box:nth-child(4) {
     position: absolute;
     bottom: 2.5%;
     left: 2.5%;
     animation-delay: 0.75s;
}
@keyframes show {
  0% {
      opacity: 0;
  }
  30% {
      opacity: 0;
  }
  90% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}


.fixed-table-header table, .fixed-table-border {width:100% !important;}
.card-body .row {min-height:auto !important;}
.modal-body .card {border:none;}

.input-group {margin-bottom: 10px;}
.input-group-prepend, .input-group-append {display:initial;}

#list-table, #left-table, #right-table {line-height:1.2em;}
.remote {text-align:left; padding-left:30px; height:40px; background-color:#000000; border:0px; color:#77ff04;}
.remote i {font-size:18px;}
.remote span {font-size:13px; padding-left:5px;}
.manual {text-align:left; padding-left:30px; height:40px; background-color:#000000; border:0px; color:#ffb004;}
.manual i {font-size:18px;}
.manual span {font-size:13px; padding-left:5px;}

.fa-question-circle {color:#bbb;}


/* Toast UI */
.tui-grid-table tr > th {height:40px !important;}
.tui-grid-header-area {height:40px !important;}
.tui-grid-layer-state {top:40px !important;}
.tui-grid-row-hover {top:40px !important;}
.tui-grid-scrollbar-right-top {top:40px !important;}
.tui-grid-cell-header {background-color:#eee !important; color:#5c6873 !important;}
.tui-grid-container {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;}
.tui-grid-cell-content-editor select {border:0px; border-radius:0; outline:0; width:100%;}
.tui-grid-cell-content-editor input {border:0px !important; border-radius:0; outline:0;} 
.tui-grid-cell-content input[type='text'],.tui-grid-cell-content input[type='password'] {border: solid 1px #ddd;}


/* Label Print */
.label-form-wrap {
  display:inline-table;
  /*text-align:center;*/
  }
  .label-form {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  width:223px;
  margin:16px;
  border: 1px solid transparent;
  }
  .label-form:hover {
  border: 1px solid #007bff;
  box-sizing:border-box;        
  }
  .label-view img {
  border:1px solid #ddd;
  border-radius:10px;
  width:200px;
  height:120px;
  }
  .label-index {
  margin-top:6px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  }

  /*¹öÆ° Á¤·Ä*/
.flexend {
    display: flex;
    justify-content: flex-end;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
    overflow: hidden;
    position: relative;
}

.callout {
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    background-color: #fff;
    border-left: 5px solid #e9ecef;
    margin-bottom: 1rem;
    padding: 1rem;
}

    .callout a {
        color: #000;
        text-decoration: none;
    }

        .callout a:hover {
            color: #007bff;
        }

    .callout p:last-child {
        margin-bottom: 0;
    }

    .callout.callout-danger {
        border-left-color: #bd2130;
    }

    .callout.callout-warning {
        border-left-color: #d39e00;
    }

    .callout.callout-info {
        border-left-color: #117a8b;
    }

    .callout.callout-success {
        border-left-color: #1e7e34;
    }