/*  RESET*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0 !important;
    line-height: 1.3em;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    font-size: 1em;
    line-height: 1.5em;
    border-collapse: collapse;
    border-spacing: 0;
}

form {
    font-size: 1em;
    line-height: 1.5em;
}

a {
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

input[type="breadcrumbs"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clear {
    clear: both;
}

.clearfix {
    display: table;
}

.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    content: ".";
}

* html .clearfix {
    height: 1%;
}


/*RESET*/

table.dataTable thead .sorting {
    background-image: none!important;
}

img {
    max-width: 100%
}

small {
    font-size: 12px;
}


/***
*
* nav
*
***/

.header-bar {
    z-index: 3;
}

.main-content {
    min-width: 1024px;
    margin-left: 135px;
}

.wrap {
    /*    min-width: 1024px;*/
    padding: 60px 0 0;
    overflow-x: auto;
    background: #fff;
}

.toolBar {
    position: fixed;
    top: 60px;
    right: 0;
    left: 140px;
    padding: 20px 30px;
    width: calc(100% - 140px);
    min-height: 50px;
    background: #fff;
    z-index: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mainContent {
    padding-top: 56px;
}


/***
*
* color
*
***/

.txt-blu {
    color: #1366E1
}

.txt-dark-gry {
    color: #333
}


/***
*
* backgorund color
*
***/

.bg-grey {
    background-color: #F6F6F6;
}


/***
*
* lightBox
*
***/

#trashlightbox,
#editlightbox,
#addlightbox {
    padding: 20px 40px 20px;
    font-size: 15px;
    line-height: 25px;
    color: #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#addlightbox {
    width: 400px;
}


/***
*
* button
*
***/

.btn {
    color: #fff;
}

.btn-blue {
    padding: 0 50px;
    height: 48px;
    line-height: 50px;
    font-size: 18px;
    background: #027FFF;
    border-radius: 30px;
    border: none;
}

.btn-blue:hover {
    background: #2a92fd;
}

.btn-gry {
    padding: 0 50px;
    height: 48px;
    line-height: 40px;
    font-size: 18px;
    background: #C4C4C4;
    border-radius: 30px;
    border: none;
}

.btn-gry:hover {
    background: #e0e0e0;
}

.btn-refresh {
    padding: 0 14px;
    height: 32px;
    font-size: 12px;
    line-height: 26px;
    color: #fff;
    background-color: #1366E1;
    border-radius: 20px;
    border: none;
}

.btn-refresh .ic-refresh {
    display: inline-block;
    width: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.btn-lg {
    min-width: 250px;
}

.btn-md {
    padding: 0 40px;
    height: 38px;
    line-height: 40px;
    font-size: 15px;
}

.ic-refresh.spining {
    -webkit-animation-name: spining;
    animation-name: spining;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.btn.btn-blue[disabled] {
    color: #808080;
    background: #B9E9FD;
}


/***
*
* loading
*
***/

.mask-loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .75);
    z-index: 4;
}

.spinner {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0b60dd;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    background-color: #2bbff4;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}


/***
*
* toggle button
*
***/

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

.btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}

.btn-toggle {
    margin: 0 4rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.5rem;
    width: 3rem;
    border-radius: 1.5rem;
    color: #fff;
    background: #888;
}

.btn-toggle.btn-sm {
    margin: 0;
    padding: 0;
    position: relative;
    border: none;
    height: 1.6rem;
    width: 3.4rem;
    border-radius: 1.5rem;
}

.btn-toggle.btn-sm.active {
    background: #027FFF;
}

.btn-toggle:before,
.btn-toggle:after {
    line-height: 1.5rem;
    width: 4rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s;
}

.btn-toggle:before {
    content: 'Off';
    left: -4rem;
}

.btn-toggle:before,
.btn-toggle:after {
    color: #6b7381;
}

.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
    line-height: -0.5rem;
    color: #fff;
    letter-spacing: .75px;
    left: 0.4125rem;
    width: 2.325rem;
}

.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
    line-height: 1.5rem;
    width: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s;
}

.btn-toggle.btn-sm:after {
    text-align: left;
    opacity: 0;
}

.btn-toggle.btn-sm:before {
    text-align: right;
}

.btn-toggle.btn-sm:before {
    content: 'Off';
    left: -0.5rem;
}

.btn-toggle.btn-sm:after {
    content: 'On';
    right: -0.5rem;
    opacity: .5;
}

.btn-toggle.btn-sm:after {
    text-align: left;
    opacity: 0;
}

.btn-toggle.btn-sm>.handle {
    position: absolute;
    top: 0.255rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 1.125rem;
    background: #fff;
    transition: left .25s;
}

.btn-toggle.btn-sm.active>.handle {
    left: 1.9875rem;
    transition: left .25s;
}

.btn-toggle.btn-sm.btn-sm:before,
.btn-toggle.btn-sm.btn-sm:after {
    line-height: -0.5rem;
    color: #fff;
    letter-spacing: .74px;
    left: 0.7125rem;
    width: 2.325rem;
}

.btn-toggle.btn-sm.btn-sm:after {
    text-align: left;
    opacity: 0;
    bottom: 0;
    left: 9px;
}

.btn-toggle.btn-sm.btn-sm.active:after {
    opacity: 1;
}

.btn-toggle.btn-sm.btn-sm:before {
    text-align: right;
}

.btn-toggle.btn-sm.btn-sm.active:before {
    opacity: 0;
}

.btn-toggle.btn-sm.btn-sm:before {
    text-align: right;
}


/* runing circle */

@-webkit-keyframes spining {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spining {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/***
*
* icon
*
***/

.na-back {
    margin-right: 10px;
}

.ic-editor-lg {
    display: block;
    width: 32px;
    cursor: pointer;
}

.ic-editor-wht {
    display: inline-block;
    width: 32px;
    margin-right: 10px;
    vertical-align: -10%;
}

.icn_comb {
    display: inline-block;
    margin: 0 14px 0 0;
}

.icon_status,
.num_status {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    line-height: 30px;
    color: #333;
}

.icon_status {
    width: 36px;
    margin-right: 2px;
}

.icon_status.buton,
.icon_status.watch {
    width: 34px;
}

.icon_status img {
    width: 100%;
    vertical-align: middle;
}


/***
*
* breadcrumb
*
***/

.breadcrumbs {
    width: 100%;
}

.store-Breadcrumb {
    float: left;
    padding: 36px 0 0;
}

.backPrev {
    display: inline-block;
    width: 20px;
    margin-right: 30px;
    vertical-align: 15%;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.store-Breadcrumb>li>a {
    display: inline-block;
    color: #0046AF;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
}

.breadLink {
    margin: 16px 22px 0 12px;
    float: right;
}

.breadLink li {
    display: inline-block;
    margin: 0 10px;
}

.breadLink li a {
    display: block;
}

.ic-circle {
    display: inline-block;
    width: 62px;
    overflow: hidden;
}

.ic-circle img {
    width: 100%
}


/***
*
* header
*
***/

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 0;
    font-size: 18px;
    line-height: 20px;
}

.navbar-default .navbar-brand {
    color: #fff;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    border-radius: 4px;
    margin: 0;
}


/***
*
* log in
*
***/

.firstPage {
    height: 100vh;
    /* IE10+ */
    background-image: -ms-radial-gradient(center, ellipse farthest-corner, #2BBFF4 0%, #0B60DD 100%);
    /* Mozilla Firefox */
    background-image: -moz-radial-gradient(center, ellipse farthest-corner, #2BBFF4 0%, #0B60DD 100%);
    /* Opera */
    background-image: -o-radial-gradient(center, ellipse farthest-corner, #2BBFF4 0%, #0B60DD 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, #2BBFF4), color-stop(100, #0B60DD));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #2BBFF4 0%, #0B60DD 100%);
    /* W3C Markup */
    background-image: radial-gradient(ellipse farthest-corner at center, #2BBFF4 0%, #0B60DD 100%);
}

.firstPage .account-wall {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    transform: translate(-50%, -50%);
}

.firstPage .logoBox {
    width: 184px;
    margin: 0 auto 40px;
}

.firstPage h1 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 10px;
    font-weight: normal;
    color: #fff;
    text-align: center;
}

.firstPage p {
    font-size: 14px;
    line-height: 18px;
    color: #fff;
}

.firstPage .form-forget {
    margin-top: 12px;
}

.firstPage .form-forget .box {
    margin-bottom: 20px;
}

.firstPage .form-control {
    display: block;
    width: 100%;
    height: 45px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #808080;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.firstPage input.top {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.firstPage input.middle {
    margin-bottom: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.firstPage input.bottom {
    margin-bottom: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.firstPage .checkboxWrap label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
    line-height: 20px;
    color: #fff;
    min-height: 20px;
    padding-left: 6px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.firstPage .checkboxWrap input[type=checkbox]+label:before {
    position: absolute;
    left: -20px;
    top: 2px;
    content: " ";
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background-color: #E4E4E4;
}

.firstPage .checkboxWrap input[type=checkbox]:checked+label:before {
    width: 16px;
    height: 16px;
    background: #E4E4E4 url(../../img/icon/icon_check_blue.png) no-repeat center center;
    background-size: 14px auto;
}

.firstPage .txtWrap {
    width: 100%;
    margin: 16px 0 0;
}

.firstPage .box {
    position: relative;
}

.firstPage .box .ic-visi {
    opacity: 0;
    position: absolute;
    right: 38px;
    top: 10px;
    display: block;
    width: 50px;
    cursor: pointer;
}

.firstPage .box .ic-close {
    opacity: 0;
    position: absolute;
    right: 14px;
    top: 10px;
    display: block;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.firstPage .box.show-icn .ic-close,
.firstPage .box.show-icn .ic-visi {
    opacity: 1;
}

.firstPage .noticeBox {
    display: none;
    position: relative;
    margin: 10px -10px;
    padding: 0 10px;
    width: calc(100% + 20px);
    height: 38px;
    font-size: 14px;
    line-height: 38px;
    color: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.noticeBox .ic-close {
    position: absolute;
    right: 14px;
    top: 0px;
    display: block;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.firstPage .noticeBox.meg-red {
    background-color: #EC2727
}

.firstPage .noticeBox.meg-green {
    background-color: #44CB3E
}

.firstPage .logNote {
    margin: 20px 0;
}


/***
*
* sign out
*
***/

.signOut .logoBox {
    width: 100px;
    margin: 0 auto 10px;
}

.signOut .logoBox.shrink {
    width: 50px;
}

.signOut h1 {
    font-size: 16px;
    font-weight: normal;
}

.signOut .btnArea {
    margin-top: 30px;
}

.prvBox {
    position: absolute;
    top: 20px;
    left: 15px;
}

.prvBox a {
    display: block;
}

.prvBox span {
    display: inline-block;
    vertical-align: middle;
}

.prvBox:hover a {
    color: #f3f3f3
}


/* confirm success */

.box.success input#confirmChecked {
    font: caption;
    font-size: 17px;
    color: #2BD207
}

.ic-confirm {
    position: absolute;
    right: 20px;
    top: 9px;
    background: none;
    font-size: 0;
    height: 24px;
    width: 24px;
    outline: none;
    opacity: 0;
    -webkit-transition: background, opacity 400ms ease-in-out;
    transition: background, opacity 400ms ease-in-out;
}

.ic-confirm.is-success {
    opacity: 1;
}

.ic-confirm svg {
    width: 0;
    height: 0;
}

.ic-confirm.is-success svg {
    height: 30px;
    width: 30px;
}

.check-gren {
    stroke-dasharray: 130px 130px;
    stroke-dashoffset: 130px;
    transition: stroke-dashoffset 500ms ease-in-out;
}

.is-success .check-gren {
    stroke-dashoffset: 0px;
}


/* confirm fail */

.box.fail input#confirmChecked {
    font: caption;
    font-size: 17px;
    color: #FF1818
}

.logInPage h1 {
    color: #ffae00;
    font-size: 35px;
    font-weight: 600;
    line-height: 50px;
}

.navbar {
    margin: 0;
    padding: 0 20px;
    min-height: 64px;
    background: rgba(43, 191, 244, 1);
    background: -moz-linear-gradient(left, rgba(43, 191, 244, 1) 0%, rgba(11, 96, 221, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(43, 191, 244, 1)), color-stop(100%, rgba(11, 96, 221, 1)));
    background: -webkit-linear-gradient(left, rgba(43, 191, 244, 1) 0%, rgba(11, 96, 221, 1) 100%);
    background: -o-linear-gradient(left, rgba(43, 191, 244, 1) 0%, rgba(11, 96, 221, 1) 100%);
    background: -ms-linear-gradient(left, rgba(43, 191, 244, 1) 0%, rgba(11, 96, 221, 1) 100%);
    background: linear-gradient(to right, rgba(43, 191, 244, 1) 0%, rgba(11, 96, 221, 1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.page-header {
    width: 100%;
    border: none!important;
    padding-top: 40px;
    padding-bottom: 9px;
    margin: 0px 0 20px;
    border-bottom: 1px solid #eee;
}

.nav-search-input {
    border: 1px solid #6fb3e0;
    width: 152px;
    height: 28px!important;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 6px;
    border-radius: 4px!important;
    font-size: 13px;
    line-height: 1.3;
    color: #666!important;
    z-index: 11;
    -webkit-transition: width ease .15s;
    -o-transition: width ease .15s;
    transition: width ease .15s;
}

.page-header h4 {
    font-size: 24px;
    color: #2fb09a;
    line-height: 35px;
}

h4 span {
    padding-left: 10px;
}


/***
*
* form
*
***/

table.dataTable thead th,
table.dataTable thead td {
    color: #757575;
    padding: 14px 18px;
    border-bottom: 2px solid #e0e0e0;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 12px 14px;
    color: #757575;
    vertical-align: middle;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.even>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even>.sorting_1,
table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
.dataTable>thead>tr>th.sorting_desc,
.dataTable>thead>tr>th.sorting_asc {
    background-color: transparent;
    background-image: none;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    border: 1px solid #0CB5F5;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #e0e0e0;
}

.dataTable>thead>tr>th[class*=sort]:after {
    float: none;
    margin-left: 10px;
    display: inline;
    content: "\f0dd";
    font-family: FontAwesome;
    font-size: 15px;
    font-weight: 400;
    color: #0CB5F5;
    vertical-align: 10%;
}

.dataTable>thead>tr>th.sorting_desc:after {
    content: "\f0dd";
    top: -6px;
    color: #0CB5F5;
}

.dataTable>thead>tr>th.sorting_asc:after {
    content: "\f0dd";
    top: 4px;
    color: #0CB5F5;
}

.dataTable>thead>tr>th[class*=sorting_] {
    color: #0CB5F5;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #666;
}

.dataTables_wrapper .dataTables_length {
    float: right;
}

.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}

.ic-na-box {
    min-height: 40px;
}

.ic_na {
    display: block;
    width: 10px;
    margin: 0 15px;
    cursor: pointer;
    float: right;
}

.ic_close {
    display: block;
    width: 16px;
    cursor: pointer;
}

.form-group label {
    font-size: 15px;
    margin-bottom: 6px;
    font-weight: normal;
    line-height: 18px;
    color: #757575;
    text-align: left;
}

.form-group select {
    height: 42px;
    line-height: 36px;
    font-size: 14px;
    color: #333;
    border-radius: 0px;
    background: #fff url(../../img/icon/icon_na-down.png) no-repeat 96% center;
    background-size: 12px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* edit form */

.modal-body-whtBG {
    position: relative;
    padding: 15px 30px;
    background: #fff;
}

.modal-body-whtBG input[type='text'],
.modal-body-whtBG select,
.modal-body-whtBG textarea,
.modal-body-whtBG .form-control:focus,
select:focus {
    color: #333;
    background-color: #E7F7FF
}

.modal-footer-whtBG {
    border: none;
    text-align: center;
    background-color: #fff;
}

.modal-body-whtBG .form-control {
    display: block;
    width: 100%;
    height: 42px;
    font-size: 14px;
    line-height: 40px;
}

.modal-body-whtBG .form-group input[type=text] .modal-body-whtBG .form-group input[type=email],
.modal-body-whtBG .form-group input[type=password],
.modal-body-whtBG .form-group select,
.modal-body-whtBG .form-group textarea {
    border-radius: 0;
    color: #333;
    border: 0;
    padding: 0 10px;
    font-size: 14px;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    background-color: #E7F7FF
}

.modal-body-whtBG .form-group input[type=text]:focus,
.modal-body-whtBG .form-group input[type=email]:focus,
.modal-body-whtBG .form-group input[type=password]:focus,
.modal-body-whtBG .form-group select:focus,
.modal-body-whtBG .form-group textarea:focus {
    border: 1px solid #0090FF
}

.edit {
    width: 840px;
    margin: 0 auto;
}


/* email verify */

.vertifyInputBox {
    position: relative;
}

.send {
    position: absolute;
    right: 10px;
    top: 9px;
    background: none;
    background: #027FFF;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    height: 24px;
    width: 24px;
    outline: none;
    opacity: 0;
    -webkit-transition: background, opacity 400ms ease-in-out;
    transition: background, opacity 400ms ease-in-out;
}

.send.is-success {
    opacity: 1;
    background: #027FFF;
}

.send svg {
    width: 0;
    height: 0;
}

.is-success svg {
    padding: 2px 0 0 6px;
    height: 23px;
    width: 18px;
}

.check {
    stroke-dasharray: 130px 130px;
    stroke-dashoffset: 130px;
    transition: stroke-dashoffset 500ms ease-in-out;
}

.is-success .check {
    stroke-dashoffset: 0px;
}


/***
*
* search
*
***/

.seachListBox {
    margin-top: 40px;
}

.searchBox {
    display: inline-block;
}

.searchBox input[type=search] {
    position: relative;
    border: 1px solid #aaa;
    cursor: text;
    background: #c4c4c4 url(../../img/icon/icon_search_wht.png) no-repeat 6px center;
    background-size: 22px auto;
    border: none;
    padding-left: 32px;
    width: 1px;
    height: 33px;
    color: #666;
    line-height: 32px;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    z-index: 2;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    transition: all 300ms linear;
    overflow: hidden;
}

.searchBox.searching input[type=search] {
    border-bottom-left-radius: 10em;
    border-bottom-right-radius: 10em;
    width: 100%;
    border: 1px solid #157CE4;
    background: #fff url(../../img/icon/icon_search_gry.png) no-repeat 6px center;
    background-size: 22px auto;
}

.LineBox {
    display: inline-block;
    vertical-align: middle;
}

.LineBox .drop-menu {
    position: relative;
    width: 110px;
    display: inline-block;
    background-color: #fff;
    border-radius: 50px;
    position: relative;
    font-size: 16px;
    color: #666;
    height: 100%;
    text-align: left;
    z-index: 2;
    outline: none;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.LineBox .drop-menu .select {
    position: relative;
    cursor: pointer;
    display: block;
    padding: 8px 12px 8px 10px;
    border: 1px solid #c4c4c4;
    background: #fff;
    border-radius: 20px;
    z-index: 3
}

.LineBox .drop-menu .select i {
    font-size: 13px;
    line-height: 20px;
    color: #888;
    cursor: pointer;
    transition: all .5s ease;
    float: right;
}

.LineBox .drop-menu:active {
    background-color: #fff
}

.LineBox .drop-menu.active .select i {
    transform: rotate(180deg)
}

.LineBox .drop-menu .dropeddown {
    display: none;
    position: absolute;
    color: #999;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: -20px;
    overflow: hidden;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1;
    outline: none;
    border: 1px solid #DEDEDE;
}

.LineBox .drop-menu .dropeddown li {
    padding: 10px;
    border-bottom: 1px solid #DEDEDE;
    transition: all .2s ease;
    cursor: pointer
}

.LineBox .drop-menu .dropeddown li:last-child {
    border-bottom: none;
}

.LineBox .drop-menu .dropeddown {
    padding: 20px 0 0 0;
    list-style: none
}

.LineBox .drop-menu .dropeddown li:hover {
    background-color: #E7F7FF;
}

.LineBox .drop-menu .dropeddown li:active {
    background-color: #E7F7FF;
    color: #999
}

.pageBox {
    display: inline-block;
    margin: 0 8px;
    font-size: 16px;
    color: #666;
    vertical-align: middle;
}

.breakLine {
    margin: 0 10px;
}

.paginateBox,
.paginateBox>div {
    display: inline-block;
    vertical-align: middle;
}

.paginate_button {
    width: 32px;
    height: 32px;
    margin: 0 4px;
    border-radius: 50%;
    border: 1px solid #c4c4c4;
    background-color: #fff;
    cursor: pointer;
}

.paginate_button.previous {
    background: #fff url(../../img/icon/icon_na_grey.png) no-repeat 48% center;
    background-size: 9px auto;
}

.paginate_button.next {
    background: #fff url(../../img/icon/icon_na_grey.png) no-repeat 48% center;
    background-size: 9px auto;
    transform: rotate(-180deg);
}

.paginate_button.previous.active {
    background: #fff url(../../img/icon/icon_na_blue.png) no-repeat 50% center;
    background-size: 9px auto;
    border: 1px solid #1366E1;
    transform: rotate(-180deg);
}

.paginate_button.next.active {
    background: #fff url(../../img/icon/icon_na_blue.png) no-repeat 50% center;
    background-size: 9px auto;
    border: 1px solid #1366E1;
    transform: rotate(0deg);
}

.paginate_button.disabled {
    cursor: not-allowed;
}


/* pagination */

.dataTables_wrapper .paginate_button.previous {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: #333 !important;
    border: 1px solid #c4c4c4;
    border-radius: 50%;
    background: #fff url(../../img/icon/icon_na-right.png) no-repeat center center;
    background-size: 10px auto;
}


/***
*
* addBTN
*
***/

.addNEW {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 64px;
    height: 64px;
    transition: bottom 200ms ease-in;
}

.addNEW>* {
    display: block;
}

.addNEW img {
    width: 82px;
}

.addNEW:hover {
    bottom: 14px;
}


/***
*
* tabs
*
***/

.store-panel .nav-tabs>li>a {
    padding: 10px 12px 8px;
}

.store-panel.panel-primary {
    border-color: #DEDEDE
}

.store-panel .panel-heading {
    padding: 0;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.store-panel .nav-tabs {
    top: 0;
    border: none;
}

.store-panel .nav-tabs>li {
    width: 20%;
    height: 75px;
    float: left;
    margin-bottom: 0;
}

.store-panel .nav-tabs>li>a,
.store-panel .nav-tabs>li>a:focus {
    position: relative;
    height: 75px;
    border-radius: 0!important;
    border-color: transparent;
    color: #fff;
    margin-right: 0;
    font-size: 14px;
    font-weight: bold;
    background-color: #27BFFC;
    text-align: center;
    border-right: 1px solid #fff;
    background-color: #1366E1;
    text-decoration: none;
}

.store-panel .nav-tabs>li:last-child>a {
    border-right: 0;
}

.store-panel .nav-tabs>li.active>a,
.store-panel .nav-tabs>li.active>a:hover,
.store-panel .nav-tabs>li.active>a:focus {
    margin-top: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: bold;
    background-color: #27BFFC;
    text-align: center;
    text-decoration: none;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #fff;
    border-color: transparent;
    border-top: none;
    border-bottom-color: transparent;
    z-index: 1;
}

.store-panel .panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #DEDEDE;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.store-panel .tab-ic {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto
}

.store-panel .ic-btn {
    padding-top: 10px;
    width: 44px;
}

.store-panel .ic-info {
    width: 30px;
}

.store-panel .panel-body,
.store-panel .tab-content {
    padding: 0
}


/* tab1 */

#tab1primary .col-sm-6 {
    display: table-cell;
}

#tab1primary .col-sm-6.leftSide {
    height: 100vh
}

#tab1primary .pd30 {
    padding: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#tab1primary .table tr td:first-child {
    width: 50%;
    font-size: 16px;
    color: #666;
}

#tab1primary .table tbody tr td:last-child {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

#tab1primary .table.user-table thead tr td {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.store-info-Card {
    max-height: 400px;
    overflow-y: auto;
}

.store-info-Card table tbody tr:last-child {
    text-align: right;
    border-bottom: 0px;
}

.store-info-Card table tbody tr:last-child:hover {
    background-color: #fff;
    transform: scale(1);
}

.store-info-Card .addNEWUser {
    float: right;
    width: 40px;
}


/* tab2 */

#tab2primary,
#tab3primary {
    padding: 30px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#buttonTab.nav-tabs {
    margin: 0 auto;
    border: none;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

#buttonTab.nav-tabs>li {
    display: inline-block;
    margin: 0 -4px;
    min-width: 150px;
    height: 40px;
    float: none;
    margin-bottom: 0;
}

#buttonTab.nav-tabs>li>a {
    position: relative;
    height: 40px;
    color: #999;
    margin-right: 0;
    font-size: 20px;
    font-weight: normal;
    line-height: 40px;
    text-align: center;
    border-right: none;
    background-color: #fff;
    text-decoration: none;
    border-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#buttonTab.nav-tabs>li.active>a,
#buttonTab.nav-tabs>li.active>a:hover,
#buttonTab.nav-tabs>li.active>a:focus {
    text-decoration: none;
    color: #1366E1;
    border-bottom: 2px solid #1366E1;
}

#buttonTab.nav-tabs>li>a {
    padding: 0;
}

.buttonSetBox .btnWrap {
    margin: 80px auto 60px;
    text-align: center;
}

.buttonSetBox .btnWrap button {
    width: 228px;
}

.buttonSetBox .form-group label {
    width: 100%;
    margin-bottom: 12px;
    font-weight: bold;
    text-align: center
}

.table.user-table thead tr td {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.table.user-table tr td:nth-child(2) {
    text-align: right;
}

.table.user-table .fa {
    vertical-align: middle;
}


/* table fixed */

.table-fixed thead {
    width: 100%;
}

.table-fixed tbody {
    overflow-y: auto;
    width: 100%;
}

.table-fixed>thead>tr {
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
    text-align: left
}

.table-fixed td,
.table-fixed th {
    float: left !important;
}

.table-fixed td.narIcon,
.table-fixed th.narIcon {
    min-width: 50px;
}

.table-fixed tr:after {
    clear: both;
    content: ' ';
    display: block;
    visibility: hidden;
}


/***
*
* table
*
***/

.table.borderless>thead>tr>th,
.table.borderless>tbody>tr>th,
.table.borderless>tfoot>tr>th,
.table.borderless>thead>tr>td,
.table.borderless>tbody>tr>td,
.table.borderless>tfoot>tr>td {
    padding: 12px 8px;
    border: none
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 12px 8px;
    vertical-align: middle;
    word-break: break-all;
}

.table>thead>tr>th {
    padding: 14px 8px;
}

.table>thead {
    border-bottom: 3px solid #dedede;
}

.table>tbody>tr {
    color: #999;
}

.table.txt-dark-gry>tbody>tr {
    color: #333
}

.table>thead>tr {
    color: #707070;
    font-weight: 400;
    background: #fff;
    background-image: initial;
    background-repeat: repeat-x;
}

.table>thead>tr>th {
    border-color: transparent;
    font-weight: 700;
}

.table>tbody>tr {
    border-bottom: 1px solid #dedede;
}

.table-hover>tbody>tr:hover {
    color: #333;
    background-color: #F6F6F6;
    font-size: 17px;
    border-bottom: 3px solid #0CA8F2;
}

.table .comingDay {
    color: #FF199A;
    opacity: .5
}


/*  collaps table */

.mappingWrapper {
    margin-top: 30px;
}

.mappingWrapper .table {
    margin-bottom: 80px;
}

.mappingWrapper .panel {
    border: none;
    box-shadow: none;
}

.mappingWrapper .table-hover>tbody>tr:hover {
    color: #333;
    -webkit-transform: scale(1);
    transform: scale(1);
    background-color: #F6F6F6;
    border-bottom: 1px solid #0CA8F2;
}

.mappingWrapper .table>thead>tr>th,
.mappingWrapper .table>thead>tr>th,
.mappingWrapper .table>tbody>tr>th,
.mappingWrapper .table>tfoot>tr>th,
.mappingWrapper .table>thead>tr>td,
.mappingWrapper .table>tbody>tr>td,
.mappingWrapper .table>tfoot>tr>td {
    padding: 10px 24px;
}

.itemListBox {
    display: inline-block;
    margin: 0 2px;
}

.itemListBox input[type="checkbox"] {
    width: 34px;
    height: 34px;
    margin: 0;
    border: 0 none;
    padding: 0;
}

.itemListBox input[type="checkbox"]:before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #D5D5D5;
    overflow: hidden;
}

.itemListBox.water input[type="checkbox"]:before {
    background: #D5D5D5 url(../../img/icon/icon_item_water.png) center center;
    background-size: 26px auto;
}

.itemListBox.water input[type="checkbox"]:checked:before {
    background: #0090FF url(../../img/icon/icon_item_water.png) center center;
    background-size: 26px auto;
}

.itemListBox.order input[type="checkbox"]:before {
    background: #D5D5D5 url(../../img/icon/icon_item_order.png) 40% center;
    background-size: 28px auto;
}

.itemListBox.order input[type="checkbox"]:checked:before {
    background: #0090FF url(../../img/icon/icon_item_order.png) 40% center;
    background-size: 28px auto;
}

.itemListBox.money input[type="checkbox"]:before {
    background: #D5D5D5 url(../../img/icon/icon_item_money.png) 50% center;
    background-size: 28px auto;
}

.itemListBox.money input[type="checkbox"]:checked:before {
    background: #0090FF url(../../img/icon/icon_item_money.png) 50% center;
    background-size: 28px auto;
}

.itemListBox.service input[type="checkbox"]:before {
    background: #D5D5D5 url(../../img/icon/icon_item_service.png) 50% center;
    background-size: 28px auto;
}

.itemListBox.service input[type="checkbox"]:checked:before {
    background: #0090FF url(../../img/icon/icon_item_service.png) 50% center;
    background-size: 28px auto;
}

.mappingWrapper .addBtn {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 46px;
}

.mappingWrapper .panel-heading .icn-naDown {
    content: " ";
    float: right;
    display: block;
    margin-right: 20px;
    width: 23px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    transform-origin: 72% center;
}

.mappingWrapper .panel-heading .icn-naDown img {
    vertical-align: middle;
}

.mappingWrapper .panel-heading.active .icn-naDown {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}


/***
*
* store info page
*
***/

.store-info-Card .ttl {
    padding: 0 20px;
    min-height: 40px;
    font-size: 24px;
    font-weight: bold;
    line-height: 40px;
    color: #27BFFC;
    border-bottom: 1px solid #D0D0D0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.store-info-Card .cont {
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/***
*
* store button page
*
***/

.buttonListBox {
    min-width: 1100px;
    margin-top: 0px;
}

.hidden-sm {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    transform: translateX(20px);
    transition: all 300ms linear
}

.show-sm {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    transform: translateX(40px);
    transition: all 400ms linear 300ms
}

.table-hover>tbody>tr:hover .hidden-sm {
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
    transition: all 300ms linear 200ms
}

.table-hover>tbody>tr:hover .show-sm {
    visibility: hidden;
    opacity: 0;
    transform: translateX(0px);
    transition: all 300ms linear
}

.buttonListBox p {
    font-size: 15px;
    font-weight: bold;
    line-height: 24px;
    color: #757575;
}

.groupWrapper {
    width: 100%;
    margin: 20px auto;
}

.groupWrapper .Wrapper {
    margin-bottom: 30px;
}

.radius-group {
    width: calc(100% - 0px);
    border-radius: 40px;
    border: 2px solid #027FFF;
    margin: 0;
    padding-left: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.radius-group label {
    display: inline-block;
    margin: 0 -4px;
    width: calc(14.08% + 4px);
    height: 60px;
    font-size: 15px;
    line-height: 56px;
    border: none;
    color: #9E9E9E;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
}

.radius-group label:hover {
    color: #027FFF;
}

.radius-group input[type="checkbox"] {
    display: none;
}

.radius-group input[type="checkbox"]:checked+label {
    color: #fff;
    background-color: #027FFF;
}

.radius-group label.firstLab {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.radius-group label.lastLab {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}


/* status content */

h2.ttl-gry {
    font-size: 30px;
    line-height: 36px;
    font-weight: bold;
    color: #888;
    border-bottom: 2px solid #888;
}

h2.ttl-gry .icn {
    display: inline-block;
    width: 40px;
    margin-right: 6px;
    vertical-align: middle;
}

h2.ttl-blue {
    font-size: 30px;
    line-height: 36px;
    font-weight: bold;
    color: #27BFFC;
    border-bottom: none;
    text-align: left;
}

h2.ttl-blue .icn {
    display: inline-block;
    width: 40px;
    margin-right: 6px;
    vertical-align: middle;
}

.deviceBox {
    margin-bottom: 40px;
}


/* mapping */

.store-panel .mappingWrapper .panel {
    margin-bottom: 0;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: none;
}

.mappingWrapper .panel-group .panel-heading {
    height: 42px;
    color: #fff;
    background: #b8b8b8;
    padding: 0;
}

.mappingWrapper .panel-title {
    font-size: 18px;
    line-height: 42px;
    line-height: 42px;
}

.mappingWrapper .icn-btn {
    display: inline-block;
    width: 50px;
    margin-right: 5px;
}

.mappingWrapper .icn-btn img {
    width: 100%
}

.mappingWrapper .panel-body {}


/* ajax slide in */

.ajaxReportBox {
    position: relative;
    left: 100%;
    opacity: 0;
    transition: all 400ms ease-in
}

.ajaxReportBox.open {
    position: relative;
    left: 0;
    opacity: 1;
}

@media (max-width: 900px) {
    .main-content {
        margin-left: 0px;
    }
    .toolBar {
        width: 100%;
        left: 0;
        padding: 20px 30px;
    }
}

@media (max-width: 767px) {
    .firstPage {
        background: rgba(43, 190, 244, 1);
        background: -moz-radial-gradient(center, ellipse cover, rgba(43, 190, 244, 1) 0%, rgba(43, 190, 244, 1) 20%, rgba(11, 96, 221, 1) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(43, 190, 244, 1)), color-stop(20%, rgba(43, 190, 244, 1)), color-stop(100%, rgba(11, 96, 221, 1)));
        background: -webkit-radial-gradient(center, ellipse cover, rgba(43, 190, 244, 1) 0%, rgba(43, 190, 244, 1) 20%, rgba(11, 96, 221, 1) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(43, 190, 244, 1) 0%, rgba(43, 190, 244, 1) 20%, rgba(11, 96, 221, 1) 100%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(43, 190, 244, 1) 0%, rgba(43, 190, 244, 1) 20%, rgba(11, 96, 221, 1) 100%);
        background: radial-gradient(ellipse at center, rgba(43, 190, 244, 1) 0%, rgba(43, 190, 244, 1) 20%, rgba(11, 96, 221, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2bbef4', endColorstr='#0b60dd', GradientType=1);
    }
}


/* table fixed js plugin */

.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
    /* position */
    margin: 0;
    /* size */
    padding: 0;
    /* text */
    font-size: 100%;
    font: inherit;
    vertical-align: top;
}

.fht-table {
    /* appearance */
    border-collapse: collapse;
    border-spacing: 0;
}


/* @end */


/* @group Content */

.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
    /* appearance */
    overflow: hidden;
    /* position */
    position: relative;
}

.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
    /* appearance */
    height: 550px !important;
    overflow: auto;
}

.fht-table-wrapper .fht-table .fht-cell {
    /* appearance */
    overflow: hidden;
    /* size */
    height: 1px;
}

.fht-table-wrapper .fht-fixed-column,
.fht-table-wrapper .fht-fixed-body {
    /* position */
    top: 0;
    left: 0;
    position: absolute;
}

.fht-table-wrapper .fht-fixed-column {
    /* position */
    z-index: 1;
}

.modal-content span.note {
    color: #ff0000;
    font-size: 20px;
}

.lg-box span.note {
    color: #ff0000;
    font-size: 20px;
}