/*
    MySpa 2017
*/

@import url('https://fonts.googleapis.com/css?family=Quicksand+Condensed:300,400,700|Quicksand:300');
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300&subset=vietnamese);
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&subset=vietnamese);
html {
    background-color: #f0f3f4;
}

body {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    color: #58666e;
    background-color: transparent;
}

*:focus {
    outline: 0 !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0;
}

a {
    color: #363f44;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
a:focus {
    color: #141719;
    text-decoration: none;
}

label {
    font-weight: normal;
    margin-bottom: 2px;
}

small,
.small {
    font-size: 13px;
}

.badge,
.label {
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.badge.bg-light,
.label.bg-light {
    text-shadow: none;
}

.badge {
    background-color: #cfdadd;
}

.badge.up {
    position: relative;
    top: -10px;
    padding: 3px 6px;
    margin-left: -10px;
}

.badge-sm {
    padding: 2px 5px !important;
    font-size: 85%;
}

.label-sm {
    padding-top: 0;
    padding-bottom: 1px;
}

.badge-white {
    padding: 2px 6px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.badge-empty {
    color: inherit;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.cusor-not-allowed {
    cursor: not-allowed !important;
    opacity:0.5 !important; 
    pointer-events: none;
}

blockquote {
    border-color: #dee5e7;
}

.caret-white {
    border-top-color: #fff;
    border-top-color: rgba(255, 255, 255, 0.65);
}

a:hover .caret-white {
    border-top-color: #fff;
}

.thumbnail {
    border-color: #dee5e7;
}

.progress {
    background-color: #edf1f2;
}

.progress-xxs {
    height: 2px;
}

.progress-xs {
    height: 6px;
}

.progress-sm {
    height: 12px;
}

.progress-sm .progress-bar {
    font-size: 10px;
    line-height: 1em;
}

.progress,
.progress-bar {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.progress-bar-primary,
.label-primary {
    background-color: #7266ba;
}

.progress-bar-info,
.label-info {
    background-color: #23b7e5;
}

.progress-bar-success,
.label-success {
    background-color: #abd373;
}

.progress-bar-warning,
.label-warning {
    background-color: #fad733;
}

.progress-bar-danger,
.label-danger {
    background-color: #f26c4f;
}

.progress-bar-black,
.label-black {
    background-color: #1c2b36;
}

.progress-bar-white {
    background-color: #fff;
}

.accordion-group,
.accordion-inner {
    border-color: #dee5e7;
    border-radius: 2px;
}

.alert {
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alert .close i {
    display: block;
    font-size: 12px;
    font-weight: normal;
}

.form-control {
    border-color: #cfdadd;
    border-radius: 2px;
}

.form-control,
.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control:focus {
    border-color: #23b7e5;
}

.form-horizontal .control-label.text-left {
    text-align: left;
}

.form-control-spin {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    margin-top: -7px;
}

.input-lg {
    height: 45px;
}

.input-group-addon {
    background-color: #edf1f2;
    border-color: #999;
}

.list-group {
    border-radius: 2px;
}

.list-group.no-radius .list-group-item {
    border-radius: 0 !important;
}

.list-group.no-borders .list-group-item {
    border: none;
}

.list-group.no-border .list-group-item {
    border-width: 1px 0;
}

.list-group.no-bg .list-group-item {
    background-color: transparent;
}

.list-group-item {
    padding-right: 15px;
    border-color: #e7ecee;
}

a.list-group-item:hover,
a.list-group-item:focus,
a.list-group-item.hover {
    background-color: #f6f8f8;
}

.list-group-item.media {
    margin-top: 0;
}

.list-group-item.active {
    color: #fff;
    background-color: #23b7e5 !important;
    border-color: #23b7e5 !important;
}

.list-group-item.active .text-muted {
    color: #ace4f5 !important;
}

.list-group-item.active a {
    color: #fff;
}

.list-group-item.focus {
    background-color: #e4eaec !important;
}

.list-group-item.select {
    position: relative;
    z-index: 1;
    background-color: #dbeef9 !important;
    border-color: #c5e4f5;
}

.list-group-alt .list-group-item:nth-child(2n+2) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.list-group-lg .list-group-item {
    padding-top: 15px;
    padding-bottom: 15px;
}

.list-group-sm .list-group-item {
    padding: 6px 10px;
}

.list-group-sp .list-group-item {
    margin-bottom: 5px;
    border-radius: 3px;
}

.list-group-item>.badge {
    margin-right: 0;
}

.list-group-item>.fa-chevron-right {
    float: right;
    margin-top: 4px;
    margin-right: -5px;
}

.list-group-item>.fa-chevron-right+.badge {
    margin-right: 5px;
}

.nav-pills.no-radius>li>a {
    border-radius: 0;
}

.nav-pills>li.active>a {
    color: #fff !important;
    background-color: #23b7e5;
}

.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:active {
    background-color: #19a9d5;
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: #f6f8f8;
}

.nav.nav-lg>li>a {
    padding: 20px 20px;
}

.nav.nav-md>li>a {
    padding: 15px 15px;
}

.nav.nav-sm>li>a {
    padding: 6px 12px;
}

.nav.nav-xs>li>a {
    padding: 4px 10px;
}

.nav.nav-xxs>li>a {
    padding: 1px 10px;
}

.nav.nav-rounded>li>a {
    border-radius: 20px;
}

.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
    background-color: #f6f8f8;
}

.nav-tabs {
    border-color: #dee5e7;
}

.nav-tabs>li>a {
    border-bottom-color: #fff;
    border-radius: 2px 2px 0 0;
}

.nav-tabs>li:hover>a,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover {
    border-color: #dee5e7;
}

.nav-tabs>li.active>a {
    border-bottom-color: #fff !important;
}

.nav-tabs-alt .nav-tabs.nav-justified>li {
    display: table-cell;
    width: 1%;
}

.nav-tabs-alt .nav-tabs>li>a {
    background: transparent !important;
    border-color: transparent !important;
    border-bottom-color: #dee5e7 !important;
    border-radius: 0;
}

.nav-tabs-alt .nav-tabs>li.active>a {
    border-bottom-color: #23b7e5 !important;
}

.tab-container {
    margin-bottom: 15px;
}

.modal-body .tab-setting .tab-content.tab-content-1,
.tab-container .tab-content {
    padding: 15px;
    background-color: #fff;
    border-top-width: 0;
    border-radius: 0 0 2px 2px;
}

.pagination>li>a {
    border-color: #dee5e7;
}

.pagination>li>a:hover,
.pagination>li>a:focus {
    background-color: #edf1f2;
    border-color: #dee5e7;
}

.panel {
    border-radius: 2px;
}

.panel .accordion-toggle {
    display: block;
    font-size: 14px;
    cursor: pointer;
}

.panel .list-group-item {
    border-color: #edf1f2;
}

.panel.no-borders {
    border-width: 0;
}

.panel.no-borders .panel-heading,
.panel.no-borders .panel-footer {
    border-width: 0;
}

.panel-heading {
    border-radius: 2px 2px 0 0;
}

.panel-default .panel-heading {
    background-color: #f6f8f8;
}

.panel-heading.no-border {
    margin: -1px -1px 0 -1px;
    border: none;
}

.panel-heading .nav {
    margin: -10px -15px;
}

.panel-heading .list-group {
    background: transparent;
}

.panel-footer {
    background-color: #ffffff;
    border-color: #edf1f2;
    border-radius: 0 0 2px 2px;
}

.panel-default {
    border-color: #dee5e7;
}

.panel-default>.panel-heading,
.panel-default>.panel-footer {
    border-color: #edf1f2;
}

.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 1px solid #eaedef;
}

.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 8px 15px;
    border-top: 1px solid #E1E1E1;
}

.table>thead>tr>th {
    padding: 8px 15px;
    border-bottom: 1px solid #E1E1E1;
}

.table-bordered {
    border-color: #E1E1E1;
}

.table-bordered>tbody>tr>td {
    border-color: #E1E1E1;
}

.table-bordered>thead>tr>th {
    border-color: #E1E1E1;
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #FBFBFB;
}

.table-striped>thead>th {
    background-color: #fafbfc;
    border-right: 1px solid #E1E1E1;
}

.table-striped>thead>th:last-child {
    border-right: none;
}

.well,
pre {
    background-color: #edf1f2;
    border-color: #dee5e7;
}

.dropdown-menu {
    border: 1px solid #dee5e7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu.pull-left {
    left: 100%;
}

.dropdown-menu>.panel {
    margin: -5px 0;
    border: none;
}

.dropdown-menu>li>a {
    padding: 5px 15px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    color: #141719;
    background-color: #abd373 !important;
    background-image: none;
    filter: none;
}

.dropdown-header {
    padding: 5px 15px;
}

.navbar-nav-branch .dropdown-menu>li {
    display: inline-block;
    width: 100%;
}

.navbar-nav-branch .dropdown-menu>li>a {
    display: inline-block;
    padding: 15px !important;
    width: 100%;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
    color: #58666e;
    background-color: #edf1f2 !important;
}

.dropdown-submenu:hover>.dropdown-menu,
.dropdown-submenu:focus>.dropdown-menu {
    display: block;
}

.dropdown-submenu.pull-left {
    float: none !important;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
}

.dropup .dropdown-submenu>.dropdown-menu {
    top: auto;
    bottom: 0;
}

.btn-group>.btn {
    margin-left: -1px;
}


/*cols*/

.col-lg-2-4 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-0 {
    clear: left;
}

.row.no-gutter {
    margin-right: 0;
    margin-left: 0;
}

.no-gutter [class*="col"] {
    padding: 0;
}

.row-sm {
    margin-right: -10px;
    margin-left: -10px;
}

.row-sm>div {
    padding-right: 10px;
    padding-left: 10px;
}

.modal-backdrop {
    background-color: #3a3f51;
}

.modal-backdrop.in {}

.modal-over {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.modal-center {
    position: absolute;
    top: 50%;
    left: 50%;
}


/*layout*/

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
}

.app {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
}

.app:before {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: block;
    width: inherit;
    background-color: #f0f3f4;
    border: inherit;
    content: "";
}

.app-header-fixed {
    padding-top: 50px;
}

.app-header-fixed .app-header {
    position: fixed;
    top: 0;
    width: 100%;
}

.app-header {
    z-index: 1025;
    border-radius: 0;
}

.app-aside {
    float: left;
}

.app-aside:before {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: inherit;
    background-color: inherit;
    border: inherit;
    content: "";
}

.app-aside-footer {
    position: absolute;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    max-width: 200px;
}

.app-aside-folded .app-aside-footer {
    max-width: 60px;
}

.app-aside-footer~div {
    padding-bottom: 50px;
}

.app-aside-right {
    padding-bottom: 50px;
}

.app-content {
    height: 100%;
}

.app-content:before,
.app-content:after {
    display: table;
    content: " ";
}

.app-content:after {
    clear: both;
}

.app-content-full {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: auto !important;
    height: auto;
    padding: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app-content-full.h-full {
    bottom: 0;
    height: auto;
}

.app-content-body {
    float: left;
    width: 100%;
    padding-bottom: 50px;
}

.app-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 105;
}

.app-footer.app-footer-fixed {
    position: fixed;
}

.hbox {
    display: table;
    width: 100%;
    height: 100%;
    border-spacing: 0;
    table-layout: fixed;
}

.hbox .col {
    display: table-cell;
    float: none;
    height: 100%;
    vertical-align: top;
}

.v-middle {
    vertical-align: middle !important;
}

.v-top {
    vertical-align: top !important;
}

.v-bottom {
    vertical-align: bottom !important;
}

.vbox {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    min-height: 240px;
    border-spacing: 0;
}

.vbox .row-row {
    display: table-row;
    height: 100%;
}

.vbox .row-row .cell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ie .vbox .row-row .cell {
    display: table-cell;
}

.vbox .row-row .cell .cell-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.navbar {
    margin: 0;
    border-width: 0;
    border-radius: 0;
}

.navbar .navbar-form-sm {
    margin-top: 10px;
    margin-bottom: 10px;
}

.navbar-md {
    min-height: 60px;
}

.navbar-md .navbar-btn {
    margin-top: 13px;
}

.navbar-md .navbar-form {
    margin-top: 15px;
}

.navbar-md .navbar-nav>li>a {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.navbar-md .navbar-brand {
    line-height: 60px;
}

.navbar-header>button {
    padding: 10px 17px;
    font-size: 16px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    border: none;
}

.navbar-brand {
    display: inline-block;
    float: none;
    height: auto;
    padding: 0 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
}

.navbar-brand:hover {
    text-decoration: none;
}

.navbar-brand img {
    display: inline;
    max-height: 20px;
    width: auto;
    margin-top: -4px;
    vertical-align: middle;
}

.form-control.error {
    border-color: #ff373f;
}

.cus-popup-regis-brandapp{
    height: 580px; 
    background-size: cover;
    align-items: center;
    display: flex;
    background-repeat: no-repeat;
    border-radius: 10px;
    position: relative;
}

.cus-popup-regis-brandapp > .modal-body.form-moba{
    margin: 16px;
}
.wrap-popup-regis-branch{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}
#popup-regis-branchapp-form .wrap-popup-regis-branch .not_show_later{
    position: absolute;
    bottom: -8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.animation-title-nav{
    /* background-color: #7266ba !important; */
    /* border-top: 1px solid #9acc51;
    border-bottom: 1px solid #9acc51; */

}
.animation-title-nav > span, .animation-title-nav > i {
    color: #99ff00 ;
    font-weight: bold;
    animation: blink 1s ease infinite;
}
@keyframes blink {
    0% {
        color: #9acc51 ;
    }
    50% {
        color: #94e120 ;
    }
    100% {
        color: #9acc51;
    }
}

.animation-title-nav2 {
    width: 100%;
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7266ba ;
    animation: AnimateBG 2s ease forwards infinite;
}
.animation-title-nav2 > span, .animation-title-nav2 > i {
    color: #fff ;
    font-weight: bold;
}

@keyframes AnimateBG {
    0% {
        background-color: #7266ba;
    }
    50% {
        background-color: #4e4693;
    }
    100% {
        background-color: #7266ba;
    }
}

.gradient-border-news {
    --border-size: 2px;
    --border-angle: 0turn;
    background-image: conic-gradient(
        from var(--border-angle),
        #213,
        #112 50%,
        #213
        ),
        conic-gradient(from var(--border-angle), transparent 20%, #08f, #7266ba) !important;
    background-size: calc(100% - 2px * 2)
        calc(100% - 2px * 2),
        cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    animation: bg-spin 2s linear infinite;
    background-color: unset !important;
}
@keyframes bg-spin {
    to {
    --border-angle: 1turn;
    }
}
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@media (min-width: 768px) {
    .app-aside,
    .navbar-header {
        width: 200px;
    }
    .navbar-collapse,
    .app-content,
    .app-footer {
        margin-left: 200px;
    }
    .app-aside-right {
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 0;
        z-index: 1000;
    }
    .app-aside-right.pos-fix {
        z-index: 1010;
    }
    .visible-folded {
        display: none;
    }
    .app-aside-folded .hidden-folded {
        display: none !important;
    }
    .app-aside-folded .visible-folded {
        display: inherit;
    }
    .app-aside-folded .text-center-folded {
        text-align: center;
    }
    .app-aside-folded .pull-none-folded {
        float: none !important;
    }
    .app-aside-folded .w-auto-folded {
        width: auto;
    }
    .app-aside-folded .app-aside,
    .app-aside-folded .navbar-header {
        width: 60px;
    }
    .app-aside-folded .navbar-collapse,
    .app-aside-folded .app-content,
    .app-aside-folded .app-footer {
        margin-left: 60px;
    }
    .cls-merchant-app .app-aside-folded .navbar-collapse,
    .cls-merchant-app .app-aside-folded .app-content,
    .cls-merchant-app .app-aside-folded .app-footer {
        margin-left: 0;
    }
    .app-aside-folded .app-header .navbar-brand {
        display: block;
        padding: 0;
        padding-right: 15px;
    }
    .app-aside-fixed .app-header .navbar-header {
        position: fixed;
    }
    .app-aside-fixed .aside-wrap {
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: 199px;
        overflow: hidden;
    }
    .app-aside-fixed .aside-wrap .navi-wrap {
        position: relative;
        width: 217px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
        width: 17px;
    }
    .app-aside-fixed .aside-wrap .navi-wrap>* {
        width: 200px;
    }
    .smart .app-aside-fixed .aside-wrap .navi-wrap {
        width: 200px;
    }
    .app-aside-fixed.app-aside-folded .app-aside {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1010;
    }
    .app-aside-fixed.app-aside-folded .aside-wrap {
        width: 59px;
    }
    .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap {
        width: 77px;
    }
    .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap>* {
        width: 60px;
    }
    .smart .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap {
        width: 60px;
    }
    .bg-auto:before {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: inherit;
        background-color: inherit;
        border: inherit;
        content: "";
    }
    .bg-auto.b-l:before {
        margin-left: -1px;
    }
    .bg-auto.b-r:before {
        margin-right: -1px;
    }
    .col.show {
        display: table-cell !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hbox-auto-sm {
        display: block;
    }
    .hbox-auto-sm>.col {
        display: block;
        width: auto;
        height: auto;
    }
    .hbox-auto-sm>.col.show {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .mb-hidden{
        display: none;
    }
    #popup_moba_app_register_fixed .wrap-popup-regis-branch{
        display: block;
    }
    #popup-regis-branchapp-form > div .img_moba_mobile{
        margin: 0;
        border-radius: 10px;
        padding-right: 0;
    }
    .cus-popup-regis-brandapp > .modal-body.form-moba{
        background-color: #b00f43;
        padding: 24px ;
        margin: 0;
    }
    .cus-popup-regis-brandapp{
        height: 100%; 
        display: block;
        position: relative;
        overflow: hidden;
        background: unset !important ;
    }
    .app-aside {
        float: none;
    }
    .app-content-full {
        width: 100% !important;
    }
    .hbox-auto-xs {
        display: block;
    }
    .hbox-auto-xs>.col {
        display: block;
        width: auto;
        height: auto;
    }
    .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
    }
    .navbar-nav>li>a {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    }
    .navbar-nav>li>a .up {
        top: 0;
    }
    .navbar-nav>li>a .avatar {
        width: 30px;
        margin-top: -5px;
    }
    .navbar-nav .open .dropdown-menu {
        background-color: #fff;
    }
    .navbar-form {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    }
    .navbar-form .form-group {
        margin-bottom: 0;
    }
}

html {
    background: #FAFAFA;
    background-attachment: fixed;
    background-size: cover;
}

.app.container {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 768px) {
    .app.container {
        width: 750px;
        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    }
    .app.container .app-aside {
        overflow-x: hidden;
    }
    .app.container.app-aside-folded .app-aside {
        overflow-x: visible;
    }
    .app.container.app-aside-fixed .aside-wrap {
        left: inherit;
    }
    .app.container.app-aside-fixed.app-aside-folded .app-aside>ul.nav {
        position: absolute;
    }
    .app.container .app-header,
    .app.container .app-aside {
        max-width: 750px;
    }
    .app.container .app-footer-fixed {
        right: auto;
        left: auto;
        width: 100%;
        max-width: 550px;
    }
    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 690px;
    }
    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 750px;
    }
}

@media (min-width: 992px) {
    .app.container {
        width: 970px;
    }
    .app.container .app-header,
    .app.container .app-aside {
        max-width: 970px;
    }
    .app.container .app-footer-fixed {
        max-width: 770px;
    }
    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 910px;
    }
    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 970px;
    }
}

@media (min-width: 1200px) {
    .app.container {
        width: 1170px;
    }
    .app.container .app-header,
    .app.container .app-aside {
        max-width: 1170px;
    }
    .app.container .app-footer-fixed {
        max-width: 970px;
    }
    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px;
    }
    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 1170px;
    }
}

.nav-sub {
    height: 0;
    margin-left: -20px;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

.active>.nav-sub,
.app-aside-folded li:hover>.nav-sub,
.app-aside-folded li:focus>.nav-sub,
.app-aside-folded li:active>.nav-sub {
    height: auto !important;
    margin-left: 0;
    /* overflow: auto; */
    opacity: 1;
}

.nav-sub-header {
    display: none !important;
}

.nav-sub-header a {
    padding: 15px 20px;
}

.navi ul.nav li {
    position: relative;
    display: block;
}

/* .navi ul.nav li li a {
    padding-left: 55px;
} */

.navi ul.nav li li ul {
    display: none;
}

.navi ul.nav li li.active>ul {
    display: block;
}

.navi ul.nav li a {
    position: relative;
    display: block;
    padding: 10px 20px;
    font-weight: normal;
    text-transform: none;
    -webkit-transition: background-color 0.2s ease-in-out 0s;
    transition: background-color 0.2s ease-in-out 0s;
    min-height: 40px;
}

.navi ul.nav li a .badge,
.navi ul.nav li a .label {
    padding: 2px 5px;
    margin-top: 2px;
    font-size: 11px;
}

.navi ul.nav li a>i {
    position: relative;
    float: left;
    width: 40px;
    margin: -10px -10px;
    margin-right: 5px;
    overflow: hidden;
    line-height: 40px;
    text-align: center;
}

.navi ul.nav li a>i:before {
    position: relative;
    z-index: 2;
}

.navi ul.nav li a .badge {
    font-size: 7px;
    padding: 1px 3px;
    top: 0;
}

.navbar-nav-branch.navbar-nav>li>a>span {
    font-size: 10px;
    display: inline-block;
    max-width: 105px;
    max-height: 14px;
    overflow: hidden;
}

.nav.navbar-right.navbar-nav>li:first-child>a {
    font-size: 10px;
    line-height: 12px;
    max-width: 138px;
    max-height: 50px;
    min-height: 50px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
}

.nav.navbar-right.navbar-nav>li:first-child>a>span {
    margin-top: -5px;
    margin-left: 2px;
}

@media (min-width: 768px) {
    .app-aside-folded .nav-sub-header {
        display: block !important;
    }
    .app-aside-folded .nav-sub-header a {
        padding: 15px 20px !important;
    }
    .app-aside-folded .navi>ul>li>a {
        position: relative;
        height: 50px;
        padding: 0;
        text-align: center;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .app-aside-folded .navi>ul>li>a span {
        display: none;
    }
    .app-aside-folded .navi>ul>li>a span.pull-right {
        display: none !important;
    }
    .nav_img_icon{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
    }
    .app-aside-folded .navi>ul>li>a i {
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
        width: auto;
        margin: 0;
        font-size: 16px;
        border: none !important;
    }
    .app-aside-folded .navi>ul>li>a i b {
        left: 0 !important;
    }
    .app-aside-folded .navi>ul>li>a .badge,
    .app-aside-folded .navi>ul>li>a .label {
        position: absolute;
        top: 8px;
        right: 12px;
        z-index: 3;
    }
    .app-aside-folded .navi>ul>li>ul {
        position: absolute;
        top: 0 !important;
        left: 100%;
        z-index: 1050;
        width: 200px;
        height: 0 !important;
        -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    .app-aside-folded .navi li li a {
        padding-left: 20px !important;
    }
    .app-aside-folded.app-aside-fixed .app-aside>ul.nav {
        position: fixed;
        left: 80px;
        z-index: 1010;
        display: block;
        width: 260px;
        height: auto;
        overflow: visible;
        overflow-y: auto;
        opacity: 1;
        -webkit-overflow-scrolling: touch;
    }
    .app-aside-folded.app-aside-fixed .app-aside>ul.nav:before {
        position: absolute;
        top: 0;
        left: -60px;
        width: 60px;
        height: 50px;
        content: "";
    }
    .app-aside-folded.app-aside-fixed .app-aside>ul.nav a {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}

@media (max-width: 767px) {
    .app {
        overflow-x: hidden;
    }
    .app-content {
        -webkit-transition: -webkit-transform 0.2s ease;
        -moz-transition: -moz-transform 0.2s ease;
        -o-transition: -o-transform 0.2s ease;
        transition: transform 0.2s ease;
    }
    .off-screen {
        position: absolute;
        top: 50px;
        bottom: 0;
        z-index: 1010;
        display: block !important;
        width: 75%;
        overflow-x: hidden;
        overflow-y: auto;
        visibility: visible;
        -webkit-overflow-scrolling: touch;
    }
    .off-screen+* {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1015;
        width: 100%;
        padding-top: 50px;
        overflow: hidden;
        background-color: #f0f3f4;
        -webkit-transform: translate3d(75%, 0, 0px);
        transform: translate3d(75%, 0, 0px);
        -webkit-transition: -webkit-transform 0.2s ease;
        -moz-transition: -moz-transform 0.2s ease;
        -o-transition: -o-transform 0.2s ease;
        transition: transform 0.2s ease;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .off-screen+* .off-screen-toggle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1020;
        display: block !important;
    }
    .off-screen.pull-right {
        right: 0;
    }
    .off-screen.pull-right+* {
        -webkit-transform: translate3d(-75%, 0, 0px);
        transform: translate3d(-75%, 0, 0px);
    }
    .nav.navbar-right.navbar-nav>li:first-child>a {
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .app-aside-dock .app-content,
    .app-aside-dock .app-footer {
        margin-left: 0;
    }
    .app-aside-dock .app-aside-footer~div {
        padding-bottom: 0;
    }
    .app-aside-dock.app-aside-fixed.app-header-fixed {
        padding-top: 115px;
    }
    .app-aside-dock.app-aside-fixed .app-aside {
        position: fixed;
        top: 50px;
        z-index: 1000;
        width: 100%;
    }
    .app-aside-dock .app-aside,
    .app-aside-dock .aside-wrap,
    .app-aside-dock .navi-wrap {
        position: relative;
        top: 0;
        float: none;
        width: 100% !important;
        overflow: visible !important;
    }
    .app-aside-dock .navi-wrap>* {
        width: auto !important;
    }
    .app-aside-dock .app-aside {
        bottom: auto !important;
    }
    .app-aside-dock .app-aside.b-r {
        border-bottom: 1px solid #dee5e7;
        border-right-width: 0;
    }
    .app-aside-dock .app-aside:before {
        display: none;
    }
    .app-aside-dock .app-aside nav>.nav {
        float: left;
    }
    .app-aside-dock .app-aside .hidden-folded,
    .app-aside-dock .app-aside .line,
    .app-aside-dock .app-aside .navi-wrap>div {
        display: none !important;
    }
    .app-aside-dock .app-aside .navi>ul>li {
        position: relative;
        display: inline-block;
        float: left;
    }
    .app-aside-dock .app-aside .navi>ul>li>a {
        height: auto;
        padding: 10px 15px 12px 15px;
        text-align: center;
    }
    .app-aside-dock .app-aside .navi>ul>li>a>.badge,
    .app-aside-dock .app-aside .navi>ul>li>a>.label {
        position: absolute;
        top: 5px;
        right: 8px;
        padding: 1px 4px;
    }
    .app-aside-dock .app-aside .navi>ul>li>a>i {
        display: block;
        float: none;
        width: 40px;
        margin-top: -10px;
        margin-right: auto;
        margin-bottom: -7px;
        margin-left: auto;
        font-size: 14px;
        line-height: 40px;
    }
    .app-aside-dock .app-aside .navi>ul>li>a>span.pull-right {
        position: absolute;
        bottom: 2px;
        left: 50%;
        display: block !important;
        margin-left: -6px;
        line-height: 1;
    }
    .app-aside-dock .app-aside .navi>ul>li>a>span.pull-right i {
        width: 12px;
        font-size: 12px;
        line-height: 12px;
    }
    .app-aside-dock .app-aside .navi>ul>li>a>span.pull-right i.text {
        line-height: 14px;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .app-aside-dock .app-aside .navi>ul>li>a>span {
        display: block;
        font-weight: normal;
    }
    .app-aside-dock .app-aside .navi>ul>li .nav-sub {
        position: absolute;
        top: auto !important;
        left: 0;
        z-index: 1050;
        display: none;
        width: 200px;
        height: auto !important;
        -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    .app-aside-dock .app-aside .navi>ul>li .nav-sub-header {
        display: none !important;
    }
    .app-aside-dock .app-aside .navi li li a {
        padding-left: 15px;
    }
    .app-aside-dock .app-aside .navi li:hover>.nav-sub,
    .app-aside-dock .app-aside .navi li:focus>.nav-sub,
    .app-aside-dock .app-aside .navi li:active>.nav-sub {
        display: block;
        height: auto !important;
        margin-left: 0;
        overflow: auto;
        opacity: 1;
    }
}

.arrow {
    z-index: 10;
    border-width: 9px;
}

.arrow,
.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.arrow:after {
    border-width: 8px;
    content: "";
}

.arrow.top {
    top: -9px;
    left: 50%;
    margin-left: -9px;
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-top-width: 0;
}

.arrow.top:after {
    top: 1px;
    margin-left: -8px;
    border-bottom-color: #ffffff;
    border-top-width: 0;
}

.arrow.top.arrow-primary:after {
    border-bottom-color: #7266ba;
}

.arrow.top.arrow-info:after {
    border-bottom-color: #23b7e5;
}

.arrow.top.arrow-success:after {
    border-bottom-color: #abd373;
}

.arrow.top.arrow-danger:after {
    border-bottom-color: #f26c4f;
}

.arrow.top.arrow-warning:after {
    border-bottom-color: #fad733;
}

.arrow.top.arrow-light:after {
    border-bottom-color: #edf1f2;
}

.arrow.top.arrow-dark:after {
    border-bottom-color: #3a3f51;
}

.arrow.top.arrow-black:after {
    border-bottom-color: #1c2b36;
}

.arrow.right {
    top: 50%;
    right: -9px;
    margin-top: -9px;
    border-left-color: rgba(0, 0, 0, 0.1);
    border-right-width: 0;
}

.arrow.right:after {
    right: 1px;
    bottom: -8px;
    border-left-color: #ffffff;
    border-right-width: 0;
}

.arrow.right.arrow-primary:after {
    border-left-color: #7266ba;
}

.arrow.right.arrow-info:after {
    border-left-color: #23b7e5;
}

.arrow.right.arrow-success:after {
    border-left-color: #abd373;
}

.arrow.right.arrow-danger:after {
    border-left-color: #f26c4f;
}

.arrow.right.arrow-warning:after {
    border-left-color: #fad733;
}

.arrow.right.arrow-light:after {
    border-left-color: #edf1f2;
}

.arrow.right.arrow-dark:after {
    border-left-color: #3a3f51;
}

.arrow.right.arrow-black:after {
    border-left-color: #1c2b36;
}

.arrow.bottom {
    bottom: -9px;
    left: 50%;
    margin-left: -9px;
    border-top-color: rgba(0, 0, 0, 0.1);
    border-bottom-width: 0;
}

.arrow.bottom:after {
    bottom: 1px;
    margin-left: -8px;
    border-top-color: #ffffff;
    border-bottom-width: 0;
}

.arrow.bottom.arrow-primary:after {
    border-top-color: #7266ba;
}

.arrow.bottom.arrow-info:after {
    border-top-color: #23b7e5;
}

.arrow.bottom.arrow-success:after {
    border-top-color: #abd373;
}

.arrow.bottom.arrow-danger:after {
    border-top-color: #f26c4f;
}

.arrow.bottom.arrow-warning:after {
    border-top-color: #fad733;
}

.arrow.bottom.arrow-light:after {
    border-top-color: #edf1f2;
}

.arrow.bottom.arrow-dark:after {
    border-top-color: #3a3f51;
}

.arrow.bottom.arrow-black:after {
    border-top-color: #1c2b36;
}

.arrow.left {
    top: 50%;
    left: -9px;
    margin-top: -9px;
    border-right-color: rgba(0, 0, 0, 0.1);
    border-left-width: 0;
}

.arrow.left:after {
    bottom: -8px;
    left: 1px;
    border-right-color: #ffffff;
    border-left-width: 0;
}

.arrow.left.arrow-primary:after {
    border-right-color: #7266ba;
}

.arrow.left.arrow-info:after {
    border-right-color: #23b7e5;
}

.arrow.left.arrow-success:after {
    border-right-color: #abd373;
}

.arrow.left.arrow-danger:after {
    border-right-color: #f26c4f;
}

.arrow.left.arrow-warning:after {
    border-right-color: #fad733;
}

.arrow.left.arrow-light:after {
    border-right-color: #edf1f2;
}

.arrow.left.arrow-dark:after {
    border-right-color: #3a3f51;
}

.arrow.left.arrow-black:after {
    border-right-color: #1c2b36;
}

.arrow.pull-left {
    left: 19px;
}

.arrow.pull-right {
    right: 19px;
    left: auto;
}

.arrow.pull-up {
    top: 19px;
}

.arrow.pull-down {
    top: auto;
    bottom: 19px;
}

.btn {
    font-weight: 500;
    border-radius: 2px;
    outline: 0 !important;
    padding: 5px 12px;
}

.btn-link {
    color: #58666e;
}

.btn-link.active {
    box-shadow: none;
    webkit-box-shadow: none;
}

.btn-default {
    color: #58666e !important;
    background-color: #fcfdfd;
    background-color: #fff;
    border-color: #999;
    border-bottom-color: #999;
    -webkit-box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
    box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    color: #58666e !important;
    background-color: #edf1f2;
    border-color: #c7d3d6;
}

.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    background-color: #fcfdfd;
    border-color: #dee5e7;
}

.btn-default.btn-bg {
    border-color: rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
}

.btn-primary {
    color: #ffffff !important;
    background-color: #7266ba;
    border-color: #7266ba;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: #ffffff !important;
    background-color: #6254b2;
    border-color: #5a4daa;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #7266ba;
    border-color: #7266ba;
}

.btn-success {
    color: #ffffff !important;
    background-color: #abd373;
    border-color: #abd373;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    color: #ffffff !important;
    background-color: #9ACC51;
    border-color: #20a03f;
}

.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
    background-color: #D6EAB7;
    border-color: #D6EAB7;
}

.btn-info {
    color: #ffffff !important;
    background-color: #23b7e5;
    border-color: #23b7e5;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
    color: #ffffff !important;
    background-color: #19a9d5;
    border-color: #189ec8;
}

.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
    background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
    background-color: #23b7e5;
    border-color: #23b7e5;
}

.btn-warning {
    color: #ffffff !important;
    background-color: #fad733;
    border-color: #fad733;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
    color: #ffffff !important;
    background-color: #f9d21a;
    border-color: #f9cf0b;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
    background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
    background-color: #fad733;
    border-color: #fad733;
}

.btn-danger {
    color: #ffffff !important;
    background-color: #f26c4f;
    border-color: #f26c4f;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
    color: #ffffff !important;
    background-color: #ee3939;
    border-color: #ed2a2a;
}

.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
    background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
    background-color: #f26c4f;
    border-color: #f26c4f;
}

.btn-dark {
    color: #ffffff !important;
    background-color: #3a3f51;
    border-color: #3a3f51;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
    color: #ffffff !important;
    background-color: #2f3342;
    border-color: #292d39;
}

.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
    background-image: none;
}

.btn-dark.disabled,
.btn-dark[disabled],
fieldset[disabled] .btn-dark,
.btn-dark.disabled:hover,
.btn-dark[disabled]:hover,
fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus,
.btn-dark[disabled]:focus,
fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled:active,
.btn-dark[disabled]:active,
fieldset[disabled] .btn-dark:active,
.btn-dark.disabled.active,
.btn-dark[disabled].active,
fieldset[disabled] .btn-dark.active {
    background-color: #3a3f51;
    border-color: #3a3f51;
}

.btn-black {
    color: #ffffff !important;
    background-color: #1c2b36;
    border-color: #1c2b36;
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
    color: #ffffff !important;
    background-color: #131e25;
    border-color: #0e161b;
}

.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
    background-image: none;
}

.btn-black.disabled,
.btn-black[disabled],
fieldset[disabled] .btn-black,
.btn-black.disabled:hover,
.btn-black[disabled]:hover,
fieldset[disabled] .btn-black:hover,
.btn-black.disabled:focus,
.btn-black[disabled]:focus,
fieldset[disabled] .btn-black:focus,
.btn-black.disabled:active,
.btn-black[disabled]:active,
fieldset[disabled] .btn-black:active,
.btn-black.disabled.active,
.btn-black[disabled].active,
fieldset[disabled] .btn-black.active {
    background-color: #1c2b36;
    border-color: #1c2b36;
}

.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    text-align: center;
}

.btn-icon i {
    position: relative;
    top: -1px;
    line-height: 34px;
}

.btn-icon.btn-sm {
    width: 30px;
    height: 30px;
}

.btn-icon.btn-sm i {
    line-height: 30px;
}

.btn-icon.btn-lg {
    width: 45px;
    height: 45px;
}

.btn-icon.btn-lg i {
    line-height: 45px;
}

.btn-rounded {
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 50px;
}

.btn-rounded.btn-lg {
    padding-right: 25px;
    padding-left: 25px;
}

.btn>i.pull-left,
.btn>i.pull-right {
    line-height: 1.42857143;
}

.btn-block {
    padding-right: 12px;
    padding-left: 12px;
}

.btn-group-vertical>.btn:first-child:not(:last-child) {
    border-top-right-radius: 2px;
}

.btn-group-vertical>.btn:last-child:not(:first-child) {
    border-bottom-left-radius: 2px;
}

.btn-addon i {
    position: relative;
    float: left;
    width: 34px;
    height: 34px;
    margin: -7px -12px;
    margin-right: 12px;
    line-height: 34px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px 0 0 2px;
}

.btn-addon i.pull-right {
    margin-right: -12px;
    margin-left: 12px;
    border-radius: 0 2px 2px 0;
}

.btn-addon.btn-sm i {
    width: 30px;
    height: 30px;
    margin: -6px -10px;
    margin-right: 10px;
    line-height: 30px;
}

.btn-addon.btn-sm i.pull-right {
    margin-right: -10px;
    margin-left: 10px;
}

.btn-addon.btn-lg i {
    width: 45px;
    height: 45px;
    margin: -11px -16px;
    margin-right: 16px;
    line-height: 45px;
}

.btn-addon.btn-lg i.pull-right {
    margin-right: -16px;
    margin-left: 16px;
}

.btn-addon.btn-default i {
    background-color: transparent;
    border-right: 1px solid #dee5e7;
}

.btn-groups .btn {
    margin-bottom: 5px;
}

.btn-dashed {
    border: 1px dashed #999;
}

.list-icon i {
    display: inline-block;
    width: 40px;
    margin: 0;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    -webkit-transition: font-size 0.2s;
    transition: font-size 0.2s;
}

.list-icon div {
    line-height: 40px;
    white-space: nowrap;
}

.list-icon div:hover i {
    font-size: 26px;
}

.settings {
    position: fixed;
    top: 120px;
    right: -240px;
    z-index: 1050;
    width: 240px;
    -webkit-transition: right 0.2s;
    transition: right 0.2s;
}

.settings.active {
    right: -1px;
}

.settings>.btn {
    position: absolute;
    top: -1px;
    left: -42px;
    padding: 10px 15px;
    background: #f6f8f8 !important;
    border-color: #dee5e7;
    border-right-width: 0;
}

.settings .i-checks span b {
    display: inline-block;
    float: left;
    width: 50%;
    height: 20px;
}

.settings .i-checks span b.header {
    height: 10px;
}

.streamline {
    position: relative;
    border-color: #dee5e7;
}

.streamline .sl-item:after,
.streamline:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 9px;
    height: 9px;
    margin-left: -5px;
    background-color: #fff;
    border-color: inherit;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    content: '';
}

.sl-item {
    position: relative;
    padding-bottom: 1px;
    border-color: #dee5e7;
}

.sl-item:before,
.sl-item:after {
    display: table;
    content: " ";
}

.sl-item:after {
    clear: both;
}

.sl-item:after {
    top: 6px;
    bottom: auto;
}

.sl-item.b-l {
    margin-left: -1px;
}

.timeline {
    padding: 0;
    margin: 0;
}

.tl-item {
    display: block;
}

.tl-item:before,
.tl-item:after {
    display: table;
    content: " ";
}

.tl-item:after {
    clear: both;
}

.visible-left {
    display: none;
}

.tl-wrap {
    display: block;
    padding: 15px 0 15px 20px;
    margin-left: 6em;
    border-color: #dee5e7;
    border-style: solid;
    border-width: 0 0 0 4px;
}

.tl-wrap:before,
.tl-wrap:after {
    display: table;
    content: " ";
}

.tl-wrap:after {
    clear: both;
}

.tl-wrap:before {
    position: relative;
    top: 15px;
    float: left;
    width: 10px;
    height: 10px;
    margin-left: -27px;
    background: #edf1f2;
    border-color: inherit;
    border-style: solid;
    border-width: 3px;
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 4px #f0f3f4;
}

.tl-wrap:hover:before {
    background: transparent;
    border-color: #fff;
}

.tl-date {
    position: relative;
    top: 10px;
    display: block;
    float: left;
    width: 4.5em;
    margin-left: -7.5em;
    text-align: right;
}

.tl-content {
    position: relative;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
}

.tl-content.block {
    display: block;
    width: 100%;
}

.tl-content.panel {
    margin-bottom: 0;
}

.tl-header {
    display: block;
    width: 12em;
    margin-left: 2px;
    text-align: center;
}

.timeline-center .tl-item {
    margin-left: 50%;
}

.timeline-center .tl-item .tl-wrap {
    margin-left: -2px;
}

.timeline-center .tl-header {
    width: auto;
    margin: 0;
}

.timeline-center .tl-left {
    margin-right: 50%;
    margin-left: 0;
}

.timeline-center .tl-left .hidden-left {
    display: none !important;
}

.timeline-center .tl-left .visible-left {
    display: inherit;
}

.timeline-center .tl-left .tl-wrap {
    float: right;
    padding-right: 20px;
    padding-left: 0;
    margin-right: -2px;
    border-right-width: 4px;
    border-left-width: 0;
}

.timeline-center .tl-left .tl-wrap:before {
    float: right;
    margin-right: -27px;
    margin-left: 0;
}

.timeline-center .tl-left .tl-date {
    float: right;
    margin-right: -8.5em;
    margin-left: 0;
    text-align: left;
}

.i-switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    background-color: #abd373;
    border-radius: 30px;
}

.i-switch input {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
}

.i-switch input:checked+i:before {
    top: 50%;
    right: 5px;
    bottom: 50%;
    left: 50%;
    border-width: 0;
    border-radius: 5px;
}

.i-switch input:checked+i:after {
    margin-left: 16px;
}

.i-switch i:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 30px;
    content: "";
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.i-switch i:after {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 18px;
    background-color: #fff;
    border-radius: 50%;
    content: "";
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-transition: margin-left 0.3s;
    transition: margin-left 0.3s;
}

.i-switch-md {
    width: 40px;
    height: 24px;
}

.i-switch-md input:checked+i:after {
    margin-left: 17px;
}

.i-switch-md i:after {
    width: 22px;
}

.i-switch-lg {
    width: 50px;
    height: 30px;
}

.i-switch-lg input:checked+i:after {
    margin-left: 21px;
}

.i-switch-lg i:after {
    width: 28px;
}

.i-checks {
    padding-left: 20px;
    cursor: pointer;
}

.i-checks input {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
}

.i-checks input:checked+i {
    border-color: #23b7e5;
}

.i-checks input:checked+i:before {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background-color: #23b7e5;
}

.i-checks input:checked+span .active {
    display: inherit;
}

.i-checks input[type="radio"]+i,
.i-checks input[type="radio"]+i:before {
    border-radius: 50%;
}

.i-checks input[disabled]+i,
fieldset[disabled] .i-checks input+i {
    border-color: #dee5e7;
}

.i-checks input[disabled]+i:before,
fieldset[disabled] .i-checks input+i:before {
    background-color: #dee5e7;
}

.i-checks>i {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: -2px;
    margin-right: 4px;
    margin-left: -20px;
    line-height: 1;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #999;
}

.i-checks>i:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: transparent;
    content: "";
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.i-checks>span {
    margin-left: -20px;
}

.i-checks>span .active {
    display: none;
}

.i-checks-sm input:checked+i:before {
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
}

.i-checks-sm>i {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-left: -18px;
}

.i-checks-lg input:checked+i:before {
    top: 8px;
    left: 8px;
    width: 12px;
    height: 12px;
}

.i-checks-lg>i {
    width: 30px;
    height: 30px;
}

.datepicker {
    margin: 0;
}

.datepicker .btn-default {
    border-width: 0;
    box-shadow: none;
}

.datepicker .btn[disabled] {
    opacity: 0.4;
}

.datepicker .btn-info .text-info {
    color: #fff !important;
}


/*Charts*/

.jqstooltip {
    padding: 5px 10px !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: solid 1px #000 !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.easyPieChart {
    position: relative;
    text-align: center;
}

.easyPieChart>div {
    position: relative;
    z-index: 1;
}

.easyPieChart>div .text {
    position: absolute;
    top: 60%;
    width: 100%;
    line-height: 1;
}

.easyPieChart>div img {
    margin-top: -4px;
}

.easyPieChart canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#flotTip {
    z-index: 100;
    padding: 4px 10px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border: solid 1px #000 !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.legendColorBox>div {
    margin: 5px;
    border: none !important;
}

.legendColorBox>div>div {
    border-radius: 10px;
}

.sortable-placeholder {
    min-height: 50px;
    margin-bottom: 5px;
    list-style: none;
    border: 1px dashed #CCC;
}

.panel .dataTables_wrapper {
    padding-top: 10px;
}

.panel .dataTables_wrapper>.row {
    margin: 0;
}

.panel .dataTables_wrapper>.row>.col-sm-12 {
    padding: 0;
}

.st-sort-ascent:before {
    content: '\25B2';
}

.st-sort-descent:before {
    content: '\25BC';
}

.st-selected td {
    background: #f0f9ec !important;
}

.chosen-choices,
.chosen-single,
.bootstrap-tagsinput {
    border-color: #cfdadd !important;
    border-radius: 2px !important;
}

.bootstrap-tagsinput {
    padding: 5px 12px !important;
}

.item {
    position: relative;
}

.item .top {
    position: absolute;
    top: 0;
    left: 0;
}

.item .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

.item .center {
    position: absolute;
    top: 50%;
}

.item-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
}

.item-overlay.active,
.item:hover .item-overlay {
    display: block;
}

.form-validation .form-control.ng-dirty.ng-invalid {
    border-color: #f26c4f;
}

.form-validation .form-control.ng-dirty.ng-valid,
.form-validation .form-control.ng-dirty.ng-valid:focus {
    border-color: #abd373;
}

.form-validation .i-checks .ng-invalid.ng-dirty+i {
    border-color: #f26c4f;
}

.ng-animate .bg-auto:before {
    display: none;
}

[ui-view].ng-leave {
    display: none;
}

[ui-view].ng-leave.smooth {
    display: block;
}

.smooth.ng-animate {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fade-in-right-big.ng-enter {
    -webkit-animation: fadeInRightBig 0.5s;
    animation: fadeInRightBig 0.5s;
}

.fade-in-right-big.ng-leave {
    -webkit-animation: fadeOutLeftBig 0.5s;
    animation: fadeOutLeftBig 0.5s;
}

.fade-in-left-big.ng-enter {
    -webkit-animation: fadeInLeftBig 0.5s;
    animation: fadeInLeftBig 0.5s;
}

.fade-in-left-big.ng-leave {
    -webkit-animation: fadeOutRightBig 0.5s;
    animation: fadeOutRightBig 0.5s;
}

.fade-in-up-big.ng-enter {
    -webkit-animation: fadeInUpBig 0.5s;
    animation: fadeInUpBig 0.5s;
}

.fade-in-up-big.ng-leave {
    -webkit-animation: fadeOutUpBig 0.5s;
    animation: fadeOutUpBig 0.5s;
}

.fade-in-down-big.ng-enter {
    -webkit-animation: fadeInDownBig 0.5s;
    animation: fadeInDownBig 0.5s;
}

.fade-in-down-big.ng-leave {
    -webkit-animation: fadeOutDownBig 0.5s;
    animation: fadeOutDownBig 0.5s;
}

.fade-in.ng-enter {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

.fade-in.ng-leave {
    -webkit-animation: fadeOut 0.5s;
    animation: fadeOut 0.5s;
}

.fade-in-right.ng-enter {
    -webkit-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}

.fade-in-right.ng-leave {
    -webkit-animation: fadeOutLeft 0.5s;
    animation: fadeOutLeft 0.5s;
}

.fade-in-left.ng-enter {
    -webkit-animation: fadeInLeft 0.5s;
    animation: fadeInLeft 0.5s;
}

.fade-in-left.ng-leave {
    -webkit-animation: fadeOutRight 0.5s;
    animation: fadeOutRight 0.5s;
}

.fade-in-up.ng-enter {
    -webkit-animation: fadeInUp 0.5s;
    animation: fadeInUp 0.5s;
}

.fade-in-up.ng-leave {
    -webkit-animation: fadeOutUp 0.5s;
    animation: fadeOutUp 0.5s;
}

.fade-in-down.ng-enter {
    -webkit-animation: fadeInDown 0.5s;
    animation: fadeInDown 0.5s;
}

.fade-in-down.ng-leave {
    -webkit-animation: fadeOutDown 0.5s;
    animation: fadeOutDown 0.5s;
}

.bg-gd {
    background-image: -webkit-gradient(linear, left 0, left 100%, from(rgba(40, 50, 60, 0)), to(rgba(40, 50, 60, 0.075)));
    background-image: -webkit-linear-gradient(top, rgba(40, 50, 60, 0), 0, rgba(40, 50, 60, 0.075), 100%);
    background-image: -moz-linear-gradient(top, rgba(40, 50, 60, 0) 0, rgba(40, 50, 60, 0.075) 100%);
    background-image: linear-gradient(to bottom, rgba(40, 50, 60, 0) 0, rgba(40, 50, 60, 0.075) 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0028323c', endColorstr='#1328323c', GradientType=0);
    filter: none;
}

.bg-gd-dk {
    background-image: -webkit-gradient(linear, left 10%, left 100%, from(rgba(40, 50, 60, 0)), to(rgba(40, 50, 60, 0.5)));
    background-image: -webkit-linear-gradient(top, rgba(40, 50, 60, 0), 10%, rgba(40, 50, 60, 0.5), 100%);
    background-image: -moz-linear-gradient(top, rgba(40, 50, 60, 0) 10%, rgba(40, 50, 60, 0.5) 100%);
    background-image: linear-gradient(to bottom, rgba(40, 50, 60, 0) 10%, rgba(40, 50, 60, 0.5) 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0028323c', endColorstr='#8028323c', GradientType=0);
    filter: none;
}

.bg-light {
    color: #58666e;
    background-color: #edf1f2;
}

.bg-light.lt,
.bg-light .lt {
    background-color: #f3f5f6;
}

.bg-light.lter,
.bg-light .lter {
    background-color: #f6f8f8;
}

.bg-light.dk,
.bg-light .dk {
    background-color: #e4eaec;
}

.bg-light.dker,
.bg-light .dker {
    background-color: #dde6e9;
}

.bg-light.bg,
.bg-light .bg {
    background-color: #edf1f2;
}

.bg-dark {
    color: #a6a8b1;
    background-color: #3a3f51;
}

.bg-dark.lt,
.bg-dark .lt {
    background-color: #474c5e;
}

.bg-dark.lter,
.bg-dark .lter {
    background-color: #54596a;
}

.bg-dark.dk,
.bg-dark .dk {
    background-color: #2e3344;
}

.bg-dark.dker,
.bg-dark .dker {
    background-color: #232735;
}

.bg-dark.bg,
.bg-dark .bg {
    background-color: #3a3f51;
}

.bg-dark a {
    color: #c1c3c9;
}

.bg-dark a:hover {
    color: #ffffff;
}

.bg-dark a.list-group-item:hover,
.bg-dark a.list-group-item:focus {
    background-color: inherit;
}

.bg-dark .nav>li:hover>a,
.bg-dark .nav>li:focus>a,
.bg-dark .nav>li.active>a {
    color: #ffffff;
    background-color: #2e3344;
}

.bg-dark .nav>li>a {
    color: #b4b6bd;
}

.bg-dark .nav>li>a:hover,
.bg-dark .nav>li>a:focus {
    background-color: #32374a;
}

.bg-dark .nav .open>a {
    background-color: #2e3344;
}

.bg-dark .caret {
    border-top-color: #a6a8b1;
    border-bottom-color: #a6a8b1;
}

.bg-dark.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #2e3344;
}

.bg-dark .open>a,
.bg-dark .open>a:hover,
.bg-dark .open>a:focus {
    color: #ffffff;
}

.bg-dark .text-muted {
    color: #8b8e99 !important;
}

.bg-dark .text-lt {
    color: #eaebed !important;
}

.bg-dark.auto .list-group-item,
.bg-dark .auto .list-group-item {
    background-color: transparent;
    border-color: #2f3342 !important;
}

.bg-dark.auto .list-group-item:hover,
.bg-dark .auto .list-group-item:hover,
.bg-dark.auto .list-group-item:focus,
.bg-dark .auto .list-group-item:focus,
.bg-dark.auto .list-group-item:active,
.bg-dark .auto .list-group-item:active,
.bg-dark.auto .list-group-item.active,
.bg-dark .auto .list-group-item.active {
    background-color: #2e3344 !important;
}

.bg-black {
    color: #7793a7;
    background-color: #1c2b36;
}

.bg-black.lt,
.bg-black .lt {
    background-color: #263845;
}

.bg-black.lter,
.bg-black .lter {
    background-color: #314554;
}

.bg-black.dk,
.bg-black .dk {
    background-color: #131e26;
}

.bg-black.dker,
.bg-black .dker {
    background-color: #0a1015;
}

.bg-black.bg,
.bg-black .bg {
    background-color: #1c2b36;
}

.bg-black a {
    color: #96abbb;
}

.bg-black a:hover {
    color: #ffffff;
}

.bg-black a.list-group-item:hover,
.bg-black a.list-group-item:focus {
    background-color: inherit;
}

.bg-black .nav>li:hover>a,
.bg-black .nav>li:focus>a,
.bg-black .nav>li.active>a {
    color: #ffffff;
    background-color: #131e26;
}

.bg-black .nav>li>a {
    color: #869fb1;
}

.bg-black .nav>li>a:hover,
.bg-black .nav>li>a:focus {
    background-color: #16232d;
}

.bg-black .nav .open>a {
    background-color: #131e26;
}

.bg-black .caret {
    border-top-color: #7793a7;
    border-bottom-color: #7793a7;
}

.bg-black.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #131e26;
}

.bg-black .open>a,
.bg-black .open>a:hover,
.bg-black .open>a:focus {
    color: #ffffff;
}

.bg-black .text-muted {
    color: #5c798f !important;
}

.bg-black .text-lt {
    color: #c4d0d9 !important;
}

.bg-black.auto .list-group-item,
.bg-black .auto .list-group-item {
    background-color: transparent;
    border-color: #131e25 !important;
}

.bg-black.auto .list-group-item:hover,
.bg-black .auto .list-group-item:hover,
.bg-black.auto .list-group-item:focus,
.bg-black .auto .list-group-item:focus,
.bg-black.auto .list-group-item:active,
.bg-black .auto .list-group-item:active,
.bg-black.auto .list-group-item.active,
.bg-black .auto .list-group-item.active {
    background-color: #131e26 !important;
}

.bg-primary {
    color: #f4f3f9;
    background-color: #7266ba;
}

.bg-primary.lt,
.bg-primary .lt {
    background-color: #847abf;
}

.bg-primary.lter,
.bg-primary .lter {
    background-color: #958dc6;
}

.bg-primary.dk,
.bg-primary .dk {
    background-color: #6051b5;
}

.bg-primary.dker,
.bg-primary .dker {
    background-color: #5244a9;
}

.bg-primary.bg,
.bg-primary .bg {
    background-color: #7266ba;
}

.bg-primary a {
    color: #ffffff;
}

.bg-primary a:hover {
    color: #ffffff;
}

.bg-primary a.list-group-item:hover,
.bg-primary a.list-group-item:focus {
    background-color: inherit;
}

.bg-primary .nav>li:hover>a,
.bg-primary .nav>li:focus>a,
.bg-primary .nav>li.active>a {
    color: #ffffff;
    background-color: #6051b5;
}

.bg-primary .nav>li>a {
    color: #f2f2f2;
}

.bg-primary .nav>li>a:hover,
.bg-primary .nav>li>a:focus {
    background-color: #6658b8;
}

.bg-primary .nav .open>a {
    background-color: #6051b5;
}

.bg-primary .caret {
    border-top-color: #f4f3f9;
    border-bottom-color: #f4f3f9;
}

.bg-primary.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #6051b5;
}

.bg-primary .open>a,
.bg-primary .open>a:hover,
.bg-primary .open>a:focus {
    color: #ffffff;
}

.bg-primary .text-muted {
    color: #d6d3e6 !important;
}

.bg-primary .text-lt {
    color: #ffffff !important;
}

.bg-primary.auto .list-group-item,
.bg-primary .auto .list-group-item {
    background-color: transparent;
    border-color: #6254b2 !important;
}

.bg-primary.auto .list-group-item:hover,
.bg-primary .auto .list-group-item:hover,
.bg-primary.auto .list-group-item:focus,
.bg-primary .auto .list-group-item:focus,
.bg-primary.auto .list-group-item:active,
.bg-primary .auto .list-group-item:active,
.bg-primary.auto .list-group-item.active,
.bg-primary .auto .list-group-item.active {
    background-color: #6051b5 !important;
}

.bg-success {
    color: #fff;
    background-color: #abd373;
}

.bg-success.lt,
.bg-success .lt {
    background-color: #31d257;
}

.bg-success.lter,
.bg-success .lter {
    background-color: #48d46a;
}

.bg-success.dk,
.bg-success .dk {
    background-color: #20af42;
}

.bg-success.dker,
.bg-success .dker {
    background-color: #1a9c39;
}

.bg-success.bg,
.bg-success .bg {
    background-color: #abd373;
}

.bg-success a {
    color: #eefaf1;
}

.bg-success a:hover {
    color: #ffffff;
}

.bg-success a.list-group-item:hover,
.bg-success a.list-group-item:focus {
    background-color: inherit;
}

.bg-success .nav>li:hover>a,
.bg-success .nav>li:focus>a,
.bg-success .nav>li.active>a {
    color: #ffffff;
    background-color: #20af42;
}

.bg-success .nav>li>a {
    color: #daf5e0;
}

.bg-success .nav>li>a:hover,
.bg-success .nav>li>a:focus {
    background-color: #22b846;
}

.bg-success .nav .open>a {
    background-color: #20af42;
}

.bg-success .caret {
    border-top-color: #c6efd0;
    border-bottom-color: #c6efd0;
}

.bg-success.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #20af42;
}

.bg-success .open>a,
.bg-success .open>a:hover,
.bg-success .open>a:focus {
    color: #ffffff;
}

.bg-success .text-muted {
    color: #9ee4af !important;
}

.bg-success .text-lt {
    color: #ffffff !important;
}

.bg-success.auto .list-group-item,
.bg-success .auto .list-group-item {
    background-color: transparent;
    border-color: #9ACC51 !important;
}

.bg-success.auto .list-group-item:hover,
.bg-success .auto .list-group-item:hover,
.bg-success.auto .list-group-item:focus,
.bg-success .auto .list-group-item:focus,
.bg-success.auto .list-group-item:active,
.bg-success .auto .list-group-item:active,
.bg-success.auto .list-group-item.active,
.bg-success .auto .list-group-item.active {
    background-color: #20af42 !important;
}

.bg-info {
    color: #dcf2f8;
    background-color: #23b7e5;
}

.bg-info.lt,
.bg-info .lt {
    background-color: #3dbde5;
}

.bg-info.lter,
.bg-info .lter {
    background-color: #55c3e6;
}

.bg-info.dk,
.bg-info .dk {
    background-color: #3DBCF8;
}

.bg-info.dker,
.bg-info .dker {
    background-color: #1199c4;
}

.bg-info.bg,
.bg-info .bg {
    background-color: #23b7e5;
}

.bg-info a {
    color: #ffffff;
}

.bg-info a:hover {
    color: #ffffff;
}

.bg-info a.list-group-item:hover,
.bg-info a.list-group-item:focus {
    background-color: inherit;
}

.bg-info .nav>li:hover>a,
.bg-info .nav>li:focus>a,
.bg-info .nav>li.active>a {
    color: #ffffff;
    background-color: #3DBCF8;
}

.bg-info .nav>li>a {
    color: #f2f2f2;
}

.bg-info .nav>li>a:hover,
.bg-info .nav>li>a:focus {
    background-color: #17b2e2;
}

.bg-info .nav .open>a {
    background-color: #3DBCF8;
}

.bg-info .caret {
    border-top-color: #dcf2f8;
    border-bottom-color: #dcf2f8;
}

.bg-info.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #3DBCF8;
}

.bg-info .open>a,
.bg-info .open>a:hover,
.bg-info .open>a:focus {
    color: #ffffff;
}

.bg-info .text-muted {
    color: #b0e1f1 !important;
}

.bg-info .text-lt {
    color: #ffffff !important;
}

.bg-info.auto .list-group-item,
.bg-info .auto .list-group-item {
    background-color: transparent;
    border-color: #19a9d5 !important;
}

.bg-info.auto .list-group-item:hover,
.bg-info .auto .list-group-item:hover,
.bg-info.auto .list-group-item:focus,
.bg-info .auto .list-group-item:focus,
.bg-info.auto .list-group-item:active,
.bg-info .auto .list-group-item:active,
.bg-info.auto .list-group-item.active,
.bg-info .auto .list-group-item.active {
    background-color: #3DBCF8 !important;
}

.bg-warning {
    color: #fffefa;
    background-color: #fad733;
}

.bg-warning.lt,
.bg-warning .lt {
    background-color: #f8da4e;
}

.bg-warning.lter,
.bg-warning .lter {
    background-color: #f7de69;
}

.bg-warning.dk,
.bg-warning .dk {
    background-color: #fcd417;
}

.bg-warning.dker,
.bg-warning .dker {
    background-color: #face00;
}

.bg-warning.bg,
.bg-warning .bg {
    background-color: #fad733;
}

.bg-warning a {
    color: #ffffff;
}

.bg-warning a:hover {
    color: #ffffff;
}

.bg-warning a.list-group-item:hover,
.bg-warning a.list-group-item:focus {
    background-color: inherit;
}

.bg-warning .nav>li:hover>a,
.bg-warning .nav>li:focus>a,
.bg-warning .nav>li.active>a {
    color: #ffffff;
    background-color: #fcd417;
}

.bg-warning .nav>li>a {
    color: #f2f2f2;
}

.bg-warning .nav>li>a:hover,
.bg-warning .nav>li>a:focus {
    background-color: #fcd621;
}

.bg-warning .nav .open>a {
    background-color: #fcd417;
}

.bg-warning .caret {
    border-top-color: #fffefa;
    border-bottom-color: #fffefa;
}

.bg-warning.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #fcd417;
}

.bg-warning .open>a,
.bg-warning .open>a:hover,
.bg-warning .open>a:focus {
    color: #ffffff;
}

.bg-warning .text-muted {
    color: #fbf2cb !important;
}

.bg-warning .text-lt {
    color: #ffffff !important;
}

.bg-warning.auto .list-group-item,
.bg-warning .auto .list-group-item {
    background-color: transparent;
    border-color: #f9d21a !important;
}

.bg-warning.auto .list-group-item:hover,
.bg-warning .auto .list-group-item:hover,
.bg-warning.auto .list-group-item:focus,
.bg-warning .auto .list-group-item:focus,
.bg-warning.auto .list-group-item:active,
.bg-warning .auto .list-group-item:active,
.bg-warning.auto .list-group-item.active,
.bg-warning .auto .list-group-item.active {
    background-color: #fcd417 !important;
}

.bg-danger {
    color: #ffffff;
    background-color: #f26c4f;
}

.bg-danger.lt,
.bg-danger .lt {
    background-color: #f06a6a;
}

.bg-danger.lter,
.bg-danger .lter {
    background-color: #f18282;
}

.bg-danger.dk,
.bg-danger .dk {
    background-color: #f13636;
}

.bg-danger.dker,
.bg-danger .dker {
    background-color: #f21b1b;
}

.bg-danger.bg,
.bg-danger .bg {
    background-color: #f26c4f;
}

.bg-danger a {
    color: #ffffff;
}

.bg-danger a:hover {
    color: #ffffff;
}

.bg-danger a.list-group-item:hover,
.bg-danger a.list-group-item:focus {
    background-color: inherit;
}

.bg-danger .nav>li:hover>a,
.bg-danger .nav>li:focus>a,
.bg-danger .nav>li.active>a {
    color: #ffffff;
    background-color: #f13636;
}

.bg-danger .nav>li>a {
    color: #f2f2f2;
}

.bg-danger .nav>li>a:hover,
.bg-danger .nav>li>a:focus {
    background-color: #f13f3f;
}

.bg-danger .nav .open>a {
    background-color: #f13636;
}

.bg-danger .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

.bg-danger.navbar .nav>li.active>a {
    color: #ffffff;
    background-color: #f13636;
}

.bg-danger .open>a,
.bg-danger .open>a:hover,
.bg-danger .open>a:focus {
    color: #ffffff;
}

.bg-danger .text-muted {
    color: #e6e6e6 !important;
}

.bg-danger .text-lt {
    color: #ffffff !important;
}

.bg-danger.auto .list-group-item,
.bg-danger .auto .list-group-item {
    background-color: transparent;
    border-color: #ee3939 !important;
}

.bg-danger.auto .list-group-item:hover,
.bg-danger .auto .list-group-item:hover,
.bg-danger.auto .list-group-item:focus,
.bg-danger .auto .list-group-item:focus,
.bg-danger.auto .list-group-item:active,
.bg-danger .auto .list-group-item:active,
.bg-danger.auto .list-group-item.active,
.bg-danger .auto .list-group-item.active {
    background-color: #f13636 !important;
}

.bg-white {
    color: #58666e;
    background-color: #fff;
}

.bg-white a {
    color: #363f44;
}

.bg-white a:hover {
    color: #1f2427;
}

.bg-white .text-muted {
    color: #98a6ad !important;
}

.bg-white .lt,
.bg-white .lter,
.bg-white .dk,
.bg-white .dker {
    background-color: #fff;
}

.bg-white-only {
    background-color: #fff;
}

.bg-white-opacity {
    background-color: rgba(255, 255, 255, 0.5);
}

.bg-black-opacity {
    background-color: rgba(32, 43, 54, 0.5);
}

a.bg-light:hover {
    color: #363f44;
}

a.bg-primary:hover {
    background-color: #6254b2;
}

a.text-primary:hover {
    color: #6254b2;
}

.text-primary {
    color: #7266ba;
}

.text-primary-lt {
    color: #8278c2;
}

.text-primary-lter {
    color: #9289ca;
}

.text-primary-dk {
    color: #6254b2;
}

.text-primary-dker {
    color: #564aa3;
}

a.bg-info:hover {
    background-color: #19a9d5;
}

a.text-info:hover {
    color: #19a9d5;
}

.text-info {
    color: #23b7e5;
}

.text-info-lt {
    color: #3abee8;
}

.text-info-lter {
    color: #51c6ea;
}

.text-info-dk {
    color: #19a9d5;
}

.text-info-dker {
    color: #1797be;
}

a.bg-success:hover {
    background-color: #9ACC51;
}

a.text-success:hover {
    color: #9ACC51;
}

.text-success {
    color: #abd373;
}

.text-success-lt {
    color: #2ed556;
}

.text-success-lter {
    color: #43d967;
}

.text-success-dk {
    color: #9ACC51;
}

.text-success-dker {
    color: #1e983b;
}

a.bg-warning:hover {
    background-color: #f9d21a;
}

a.text-warning:hover {
    color: #f9d21a;
}

.text-warning {
    color: #fad733;
}

.text-warning-lt {
    color: #fbdc4c;
}

.text-warning-lter {
    color: #fbe165;
}

.text-warning-dk {
    color: #f9d21a;
}

.text-warning-dker {
    color: #f4ca06;
}

a.bg-danger:hover {
    background-color: #ee3939;
}

a.text-danger:hover {
    color: #ee3939;
}

.text-danger {
    color: #f26c4f;
}

.text-danger-lt {
    color: #f26767;
}

.text-danger-lter {
    color: #f47f7f;
}

.text-danger-dk {
    color: #ee3939;
}

.text-danger-dker {
    color: #ec2121;
}

a.bg-dark:hover {
    background-color: #2f3342;
}

a.text-dark:hover {
    color: #2f3342;
}

.text-dark {
    color: #3a3f51;
}

.text-dark-lt {
    color: #454b60;
}

.text-dark-lter {
    color: #4f566f;
}

.text-dark-dk {
    color: #2f3342;
}

.text-dark-dker {
    color: #252833;
}

a.bg-#000000:hover {
    background-color: #131e25;
}

a.text-#000000:hover {
    color: #131e25;
}

.text-#000000 {
    color: #1c2b36;
}

.text-#000000-lt {
    color: #253847;
}

.text-#000000-lter {
    color: #2d4658;
}

.text-#000000-dk {
    color: #131e25;
}

.text-#000000-dker {
    color: #0b1014;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #000;
}

.text-muted {
    color: #98a6ad;
}

.pos-rlt {
    position: relative;
}

.pos-stc {
    position: static !important;
}

.pos-abt {
    position: absolute;
}

.pos-fix {
    position: fixed;
}

.show {
    visibility: visible;
}

.line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    overflow: hidden;
    font-size: 0;
}

.line-xs {
    margin: 0;
}

.line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
}

.line-dashed {
    background-color: transparent;
    border-style: dashed !important;
    border-width: 0;
}

.no-line {
    border-width: 0;
}

.no-border,
.no-borders {
    border-color: transparent;
    border-width: 0;
}

.no-radius {
    border-radius: 0;
}

.block {
    display: block;
}

.block.hide {
    display: none;
}

.inline {
    display: inline-block !important;
}

.none {
    display: none;
}

.pull-none {
    float: none;
}

.rounded {
    border-radius: 500px;
}

.clear {
    display: block;
    overflow: hidden;
}

.no-bg {
    color: inherit;
    background-color: transparent;
}

.no-select {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.l-h {
    line-height: 1.42857143;
}

.l-h-0x {
    line-height: 0;
}

.l-h-1x {
    line-height: 1.2;
}

.l-h-2x {
    line-height: 2em;
}

.l-s-1x {
    letter-spacing: 1;
}

.l-s-2x {
    letter-spacing: 2;
}

.l-s-3x {
    letter-spacing: 3;
}

.font-normal {
    font-weight: normal;
}

.font-thin {
    font-weight: 300;
}

.font-bold {
    font-weight: 700;
}

.text-3x {
    font-size: 3em;
    line-height: 1.4;
}

.text-2x {
    font-size: 2em;
}

.text-lg {
    font-size: 18px;
}

.text-md {
    font-size: 16px;
}

.text-base {
    font-size: 14px;
}

.text-sm {
    font-size: 13px;
}

.text-xs {
    font-size: 12px;
}

.text-xxs {
    text-indent: -9999px;
}

.text-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-u-c {
    text-transform: uppercase;
}

.text-l-t {
    text-decoration: line-through;
}

.text-u-l {
    text-decoration: underline;
}

.text-active,
.active>.text,
.active>.auto .text {
    display: none !important;
}

.active>.text-active,
.active>.auto .text-active {
    display: inline-block !important;
}

.box-shadow {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}

.box-shadow-lg {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
}

.text-shadow {
    font-size: 170px;
    text-shadow: 0 1px 0 #dee5e7, 0 2px 0 #fcfdfd, 0 5px 10px rgba(0, 0, 0, 0.125), 0 10px 20px rgba(0, 0, 0, 0.2);
}

.no-shadow {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.wrapper-xs {
    padding: 5px;
}

.wrapper-sm {
    padding: 10px;
}

.wrapper {
    padding: 15px;
}

.wrapper-md {
    padding: 20px;
}

.wrapper-lg {
    padding: 30px;
}

.wrapper-xl {
    padding: 50px;
}

.padder-lg {
    padding-right: 30px;
    padding-left: 30px;
}

.padder-md {
    padding-right: 20px;
    padding-left: 20px;
}

.padder {
    padding-right: 15px;
    padding-left: 15px;
}

.padder-v {
    padding-top: 15px;
    padding-bottom: 15px;
}

.no-padder {
    padding: 0 !important;
}

.pull-in {
    margin-right: -15px;
    margin-left: -15px;
}

.pull-out {
    margin: -10px -15px;
}

.b {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.b-a {
    border: 1px solid #dee5e7;
}

.b-t {
    border-top: 1px solid #dee5e7;
}

.b-r {
    border-right: 1px solid #dee5e7;
}

.b-b {
    border-bottom: 1px solid #dee5e7;
}

.b-l {
    border-left: 1px solid #dee5e7;
}

.b-light {
    border-color: #edf1f2;
}

.b-dark {
    border-color: #3a3f51;
}

.b-black {
    border-color: #3a3f51;
}

.b-primary {
    border-color: #7266ba;
}

.b-success {
    border-color: #abd373;
}

.b-info {
    border-color: #23b7e5;
}

.b-warning {
    border-color: #fad733;
}

.b-danger {
    border-color: #f26c4f;
}

.b-white {
    border-color: #ffffff;
}

.b-pink {
    border-color: #fa91c8;
}

.b-brown{
    border-color: #873e23;
}

.b-lavender{
    border-color: #59546c;
}

.b-dashed {
    border-style: dashed !important;
}

.b-l-light {
    border-left-color: #edf1f2;
}

.b-l-dark {
    border-left-color: #3a3f51;
}

.b-l-black {
    border-left-color: #3a3f51;
}

.b-l-primary {
    border-left-color: #7266ba;
}

.b-l-success {
    border-left-color: #abd373;
}

.b-l-info {
    border-left-color: #23b7e5;
}

.b-l-warning {
    border-left-color: #fad733;
}

.b-l-danger {
    border-left-color: #f26c4f;
}

.b-l-white {
    border-left-color: #ffffff;
}

.b-l-2x {
    border-left-width: 2px;
}

.b-l-3x {
    border-left-width: 3px;
}

.b-l-4x {
    border-left-width: 4px;
}

.b-l-5x {
    border-left-width: 5px;
}

.b-2x {
    border-width: 2px;
}

.b-3x {
    border-width: 3px;
}

.b-4x {
    border-width: 4px;
}

.b-5x {
    border-width: 5px;
}

.r {
    border-radius: 2px 2px 2px 2px;
}

.r-2x {
    border-radius: 4px;
}

.r-3x {
    border-radius: 6px;
}

.r-l {
    border-radius: 2px 0 0 2px;
}

.r-r {
    border-radius: 0 2px 2px 0;
}

.r-t {
    border-radius: 2px 2px 0 0;
}

.r-b {
    border-radius: 0 0 2px 2px;
}

.p-xs {
    padding: 3px;
}

.m-xxs {
    margin: 2px 4px;
}

.m-xs {
    margin: 5px;
}

.m-sm {
    margin: 10px;
}

.m {
    margin: 15px;
}

.m-md {
    margin: 20px;
}

.m-lg {
    margin: 30px;
}

.m-xl {
    margin: 50px;
}

.m-n {
    margin: 0 !important;
}

.m-l-none {
    margin-left: 0 !important;
}

.m-l-xs {
    margin-left: 5px;
}

.m-l-sm {
    margin-left: 10px;
}

.m-l {
    margin-left: 15px;
}

.m-l-md {
    margin-left: 20px;
}

.m-l-lg {
    margin-left: 30px;
}

.m-l-xl {
    margin-left: 40px;
}

.m-l-xxl {
    margin-left: 50px;
}

.m-l-n-xxs {
    margin-left: -1px;
}

.m-l-n-xs {
    margin-left: -5px;
}

.m-l-n-sm {
    margin-left: -10px;
}

.m-l-n {
    margin-left: -15px;
}

.m-l-n-md {
    margin-left: -20px;
}

.m-l-n-lg {
    margin-left: -30px;
}

.m-l-n-xl {
    margin-left: -40px;
}

.m-l-n-xxl {
    margin-left: -50px;
}

.m-t-none {
    margin-top: 0 !important;
}

.m-t-xxs {
    margin-top: 1px;
}

.m-t-xs {
    margin-top: 5px;
}

.m-t-sm {
    margin-top: 10px;
}

.m-t {
    margin-top: 15px;
}

.m-t-md {
    margin-top: 20px;
}

.m-t-lg {
    margin-top: 30px;
}

.m-t-xl {
    margin-top: 40px;
}

.m-t-xxl {
    margin-top: 50px;
}

.m-t-n-xxs {
    margin-top: -1px;
}

.m-t-n-xs {
    margin-top: -5px;
}

.m-t-n-sm {
    margin-top: -10px;
}

.m-t-n {
    margin-top: -15px;
}

.m-t-n-md {
    margin-top: -20px;
}

.m-t-n-lg {
    margin-top: -30px;
}

.m-t-n-xl {
    margin-top: -40px;
}

.m-t-n-xxl {
    margin-top: -50px;
}

.m-r-none {
    margin-right: 0 !important;
}

.m-r-xxs {
    margin-right: 1px;
}

.m-r-xs {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 10px;
}

.m-r {
    margin-right: 15px;
}

.m-r-md {
    margin-right: 20px;
}

.m-r-lg {
    margin-right: 30px;
}

.m-r-xl {
    margin-right: 40px;
}

.m-r-xxl {
    margin-right: 50px;
}

.m-r-n-xxs {
    margin-right: -1px;
}

.m-r-n-xs {
    margin-right: -5px;
}

.m-r-n-sm {
    margin-right: -10px;
}

.m-r-n {
    margin-right: -15px;
}

.m-r-n-md {
    margin-right: -20px;
}

.m-r-n-lg {
    margin-right: -30px;
}

.m-r-n-xl {
    margin-right: -40px;
}

.m-r-n-xxl {
    margin-right: -50px;
}

.m-b-none {
    margin-bottom: 0 !important;
}

.m-b-xxs {
    margin-bottom: 1px;
}

.m-b-xs {
    margin-bottom: 5px;
}

.m-b-sm {
    margin-bottom: 10px;
}

.m-b {
    margin-bottom: 15px;
}

.m-b-md {
    margin-bottom: 20px;
}

.m-b-lg {
    margin-bottom: 30px;
}

.m-b-xl {
    margin-bottom: 40px;
}

.m-b-xxl {
    margin-bottom: 50px;
}

.m-b-n-xxs {
    margin-bottom: -1px;
}

.m-b-n-xs {
    margin-bottom: -5px;
}

.m-b-n-sm {
    margin-bottom: -10px;
}

.m-b-n {
    margin-bottom: -15px;
}

.m-b-n-md {
    margin-bottom: -20px;
}

.m-b-n-lg {
    margin-bottom: -30px;
}

.m-b-n-xl {
    margin-bottom: -40px;
}

.m-b-n-xxl {
    margin-bottom: -50px;
}

.p-n {
    padding: 0 !important;
}

.avatar {
    position: relative;
    display: block;
    white-space: nowrap;
    border-radius: 500px;
}

.avatar img {
    width: 100%;
    border-radius: 500px;
}

.avatar i {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: 2px;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
}

.avatar i.right {
    right: 0;
    left: auto;
}

.avatar i.bottom {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
}

.avatar i.left {
    top: auto;
    bottom: 0;
}

.avatar i.on {
    background-color: #abd373;
}

.avatar i.off {
    background-color: #98a6ad;
}

.avatar i.busy {
    background-color: #f26c4f;
}

.avatar i.away {
    background-color: #fad733;
}

.avatar.thumb-md i {
    width: 12px;
    height: 12px;
    margin: 3px;
}

.avatar.thumb-sm i {
    margin: 1px;
}

.avatar.thumb-xs i {
    margin: 0;
}

.w-1x {
    width: 1em;
}

.w-2x {
    width: 2em;
}

.w-3x {
    width: 3em;
}

.w-xxs {
    width: 60px;
}

.w-xs {
    width: 90px;
}

.w-sm {
    width: 150px;
}

.w {
    width: 200px;
}

.w-md {
    width: 240px;
}

.w-lg {
    width: 280px;
}

.w-xl {
    width: 320px;
}

.w-xxl {
    width: 360px;
}

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.thumb-xl {
    display: inline-block;
    width: 128px;
}

.thumb-lg {
    display: inline-block;
    width: 96px;
}

.thumb-md {
    display: inline-block;
    width: 64px;
    max-width: 100%;
}

.thumb {
    display: inline-block;
    width: 50px;
}

.thumb-sm {
    display: inline-block;
    width: 40px;
}

.thumb-xs {
    display: inline-block;
    width: 34px;
}

.thumb-xxs {
    display: inline-block;
    width: 30px;
}

.thumb-wrapper {
    padding: 2px;
    border: 1px solid #dee5e7;
}

.thumb img,
.thumb-xs img,
.thumb-sm img,
.thumb-md img,
.thumb-lg img,
.thumb-btn img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.img-full {
    width: 100%;
}

.img-full img {
    width: 100%;
}

.scrollable {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.scrollable.hover {
    overflow-y: hidden !important;
}

.scrollable.hover:hover {
    overflow: visible !important;
    overflow-y: auto !important;
}

.smart .scrollable {
    overflow-y: auto !important;
}

.scroll-x,
.scroll-y {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-y {
    overflow-y: auto;
}

.scroll-x {
    overflow-x: auto;
}

.hover-action {
    display: none;
}

.hover-rotate {
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
}

.hover-anchor:hover>.hover-action,
.hover-anchor:focus>.hover-action,
.hover-anchor:active>.hover-action {
    display: inherit;
}

.hover-anchor:hover>.hover-rotate,
.hover-anchor:focus>.hover-rotate,
.hover-anchor:active>.hover-rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
}

.backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
}

.backdrop.in {
    opacity: 0.8;
    filter: alpha(opacity=80);
}


/*desktop*/

@media screen and (min-width: 992px) {
    .col-lg-2-4 {
        float: left;
        width: 20.000%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm.show {
        display: inherit !important;
    }
    .no-m-sm {
        margin: 0 !important;
    }
}


/*phone*/

@media (max-width: 767px) {
    .w-auto-xs {
        width: auto;
    }
    .shift {
        display: none !important;
    }
    .shift.in {
        display: block !important;
    }
    .row-2 [class*="col"] {
        float: left;
        width: 50%;
    }
    .row-2 .col-0 {
        clear: none;
    }
    .row-2 li:nth-child(odd) {
        margin-left: 0;
        clear: left;
    }
    .text-center-xs {
        text-align: center;
    }
    .text-left-xs {
        text-align: left;
    }
    .text-right-xs {
        text-align: right;
    }
    .no-border-xs {
        border-width: 0;
    }
    .pull-none-xs {
        float: none !important;
    }
    .pull-right-xs {
        float: right !important;
    }
    .pull-left-xs {
        float: left !important;
    }
    .dropdown-menu.pull-none-xs {
        left: 0;
    }
    .hidden-xs.show {
        display: inherit !important;
    }
    .wrapper-lg,
    .wrapper-md {
        padding: 15px;
    }
    .padder-lg,
    .padder-md {
        padding-right: 15px;
        padding-left: 15px;
    }
    .no-m-xs {
        margin: 0 !important;
    }
}

.butterbar {
    position: relative;
    height: 3px;
    margin-bottom: -3px;
}

.butterbar .bar {
    position: absolute;
    width: 100%;
    height: 0;
    text-indent: -9999px;
    background-color: #23b7e5;
}

.butterbar .bar:before {
    position: absolute;
    right: 50%;
    left: 50%;
    height: 3px;
    background-color: inherit;
    content: "";
}

.butterbar.active {
    -webkit-animation: changebar 2.25s infinite 0.75s;
    -moz-animation: changebar 2.25s infinite 0.75s;
    animation: changebar 2.25s infinite 0.75s;
}

.butterbar.active .bar {
    -webkit-animation: changebar 2.25s infinite;
    -moz-animation: changebar 2.25s infinite;
    animation: changebar 2.25s infinite;
}

.butterbar.active .bar:before {
    -webkit-animation: movingbar 0.75s infinite;
    -moz-animation: movingbar 0.75s infinite;
    animation: movingbar 0.75s infinite;
}

.time_opening_div input {
    border-bottom: none;
}

.time_opening_div .input-group-addon {
    border: none;
    border-top: 1px solid #999;
}

.time_opening_div>div:last-child input,
.ip-b-b input,
.ip-b-b .input-group-addon {
    border-bottom: 1px solid #999;
}


/* Moving bar */

@-webkit-keyframes movingbar {
    0% {
        right: 50%;
        left: 50%;
    }
    99.9% {
        right: 0;
        left: 0;
    }
    100% {
        right: 50%;
        left: 50%;
    }
}

@-moz-keyframes movingbar {
    0% {
        right: 50%;
        left: 50%;
    }
    99.9% {
        right: 0;
        left: 0;
    }
    100% {
        right: 50%;
        left: 50%;
    }
}

@keyframes movingbar {
    0% {
        right: 50%;
        left: 50%;
    }
    99.9% {
        right: 0;
        left: 0;
    }
    100% {
        right: 50%;
        left: 50%;
    }
}


/* change bar */

@-webkit-keyframes changebar {
    0% {
        background-color: #23b7e5;
    }
    33.3% {
        background-color: #23b7e5;
    }
    33.33% {
        background-color: #fad733;
    }
    66.6% {
        background-color: #fad733;
    }
    66.66% {
        background-color: #7266ba;
    }
    99.9% {
        background-color: #7266ba;
    }
}

@-moz-keyframes changebar {
    0% {
        background-color: #23b7e5;
    }
    33.3% {
        background-color: #23b7e5;
    }
    33.33% {
        background-color: #fad733;
    }
    66.6% {
        background-color: #fad733;
    }
    66.66% {
        background-color: #7266ba;
    }
    99.9% {
        background-color: #7266ba;
    }
}

@keyframes changebar {
    0% {
        background-color: #23b7e5;
    }
    33.3% {
        background-color: #23b7e5;
    }
    33.33% {
        background-color: #fad733;
    }
    66.6% {
        background-color: #fad733;
    }
    66.66% {
        background-color: #7266ba;
    }
    99.9% {
        background-color: #7266ba;
    }
}


/*------------------------ CUSTOM -------------------*/

body {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: #252525;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}

h1,
.h1 {
    font-size: 24px;
}

h2,
.h2 {
    font-size: 18px;
}

.app::before {
    background-color: #fafafa;
}

.text-dark {
    color: #898989;
}

.bg-dark {
    background-color: #252525;
}

.bg-dark-1 {
    background-color: #363636;
}

.bg-dark .nav>li:hover>a,
.bg-dark .nav>li:focus>a,
.bg-dark .nav>li.active>a,
.bg-dark .nav>li>a:hover,
.bg-dark .nav>li>a:focus {
    background-color: #363636;
}

.bg-dark.dk,
.bg-dark .dk {
    background-color: #141414;
}

.navbar-brand img {
    max-height: 35px;
}

.navbar-brand {
    padding-left: 0px;
}

.navbar-nav>li>a {
    background: #abd373;
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
}

.navbar-nav>li>a:hover,
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus,
.nav>li>a:focus {
    background: #9ACC51;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    background: #abd373 !important;
}

.bg-dark .nav>li>a {
    color: #CCC;
}

.dropdown-menu {
    border: none;
    border-radius: 0;
}

.panel>.list-group:first-child .list-group-item:first-child,
.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child {
    border-radius: 0;
}

.panel-footer {
    border-radius: 0;
}

.panel-footer a {
    color: #FFF;
}

.navbar-nav .list-group-item {
    background-color: #99CB50;
    color: #FFF;
}

.navbar-nav .panel-footer {
    background-color: #89b650;
    color: #FFF;
}

.nav .panel-footer:hover {
    background-color: #89c050;
}

a.list-group-item {
    color: #FFF;
}

.navbar-nav .text-muted {
    color: #F1F1F1;
}

a.list-group-item:hover,
a.list-group-item:focus,
a.list-group-item.hover {
    background-color: #ABD373;
    color: #FFF;
}

.panel {
    border-radius: 0;
}

.navi ul.nav li a {
    font-size: 13px;
}

.btn-xs,
.btn-group-xs>.btn {
    padding: 3px 6px;
    font-size: 11px;
}

.btn-success {
    background-color: #ABD373;
    border-color: #ABD373;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    background-color: #9acc51;
    border-color: #9acc51;
}

.btn-info {
    background-color: #69CAF7;
    border-color: #69CAF7;
}

.btn-info:hover {
    background-color: #3dbcf8;
    border-color: #3dbcf8;
}

.bg-info {
    background-color: #69CAF7;
}

.panel {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
}

.panel-body {
    padding: 0 15px 15px;
}

.carousel-control.left,
.carousel-control.right {
    background: none;
}

.box-booking-list .carousel-control.left,
.box-booking-list .carousel-control.right {
    height: 40px;
    top: 25px;
    color: #69CAF7;
    text-shadow: none;
}

.box-booking-list .carousel-control.left {
    left: 30px;
}

.box-booking-list .carousel-control.right {
    right: 30px;
}

.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 13px 10px;
}

.table>tfoot>tr>td {
    border-top: none;
}

.pagination>li>a,
.pagination>li>span {
    height: 24px;
    width: 24px;
    border-radius: 24px;
    padding: 1px 0 0 0;
    text-align: center;
    margin: 0 2px;
    border: 2px solid #abd373;
    color: #abd373;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background: #abd373;
    border-color: #abd373;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span,
.pagination>li:first-child>a,
.pagination>li:first-child>span {
    border-radius: 24px;
}

.form-group {
    margin-bottom: 10px;
}

.form-control {
    height: 32px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    /*box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.08) inset;*/
    border-color: #999;
    padding: 0 10px;
}

.form-control:focus {
    border-color: #abd373;
}


/*---------Write-------*/

.navbar-form .form-control {
    height: 30px;
    text-align: left;
    padding: 0 10px;
    box-shadow: none;
}

.navbar-nav .open .dropdown-menu,
.navbar-nav .dropdown-menu {
    background: #9acc51;
}

.navbar-nav .dropdown-menu>li>a {
    color: #FFF;
}

.box-center {
    width: 100%;
    text-align: center;
}

.navi {
    padding-top: 30px;
    border-top: 1px solid #464646;
}

.navi ul.nav li {
    border-bottom: 1px solid #464646;
}

.navi ul.nav li:last-child {
    border-bottom: none;
}

.page-content {
    padding-top: 30px;
    ;
}

.easyPieChart .h1 {
    line-height: inherit;
}

.text-red {
    color: #f26c4f;
}

.text-orange {
    color: #f68e56;
}

.text-blue {
    color: #69caf7;
}

.text-green {
    color: #ABD373;
}

a.text-blue:hover {
    color: #3dbcf8;
}

.mg-bt-10 {
    margin-bottom: 10px;
}

.mg-bt-12 {
    margin-bottom: 12px;
}

.mg-t-b-10 {
    margin: 10px 0;
}

.box-promotion {
    min-height: 260px;
}

.box-promotion .btn {
    border: none;
    color: #6ACAF7 !important;
}

.box-promotion .btn-xs,
.box-promotion .btn-group-xs>.btn {
    padding-left: 5px;
    padding-right: 5px;
}

.app-content .btn-sm,
.app-content .btn-group-sm>.btn,
.app-content .btn-xs,
.app-content .btn-group-xs>.btn {
    line-height: 1;
}

.box-promotion h2 {
    margin-top: 27px;
}

.box-promotion .text-muted {
    color: #FFF !important;
}

.box-booking-list .text-sm {
    font-size: 11px;
}

.slimScrollBar {
    background-color: #ABD373 !important;
}

.box-booking-list .pull-in {
    margin: 0px;
}

.bk-l-t {
    display: block;
    padding-bottom: 10px;
}

.table th {
    font-weight: normal;
    font-size: 13px;
}

.box-popular-sv .col-xs-6 {
    padding-left: 0;
}

.box-popular-sv .badge {
    margin-top: 15px;
    width: 20px;
    height: 20px;
    padding: 2px 0 0 0;
    text-shadow: none;
}

.p-sv-i {
    margin-bottom: 15px;
}


/*--------------- Box Chart -------------*/

.box-chart .nav-tabs {
    display: inline-table;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

.box-chart .nav-tabs>li {
    display: inline-block;
    width: 50%;
    margin-bottom: 0;
}

.box-chart.apt-tracking .nav-tabs>li:first-child {
    width: 40%
}

.box-chart.apt-tracking .nav-tabs>li:last-child {
    width: 60%
}

.box-chart .nav-tabs>li a {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    color: #898989;
    border: none;
    padding: 30px 15px 20px;
}

.box-chart .nav-tabs>li:first-child {
    text-align: right;
}

.box-chart .nav-tabs>li:last-child {
    text-align: left;
}

.box-chart .nav-tabs>li.active a {
    color: #6ACAF7;
    text-decoration: underline;
}

.box-chart .nav-tabs>li.active>a,
.box-chart .nav-tabs>li.active>a:hover,
.box-chart .nav-tabs>li.active>a:focus {
    border: none;
}

.box-chart .nav>li>a:hover,
.box-chart .nav>li>a:focus {
    border: none;
    background: none;
}

.box-chart .tab-container .tab-content {
    border: none;
}

.box-chart .tab-content {
    padding-top: 0;
}

.box-chart .tab-content .line-summary h1 {
    margin-bottom: 0;
}

.line-summary>div {
    text-align: center;
}

.line-summary>div:first-child {
    padding: 32px 0;
    border-right: 1px solid #FFF;
}

.dropdown-menu>li>a.text-blue {
    color: #69caf7;
}

.dropdown-menu>li>a.text-blue:hover {
    color: #FFF;
}

.btn-default.text-blue {
    color: #69caf7 !important;
}

.line-summary .dropdown .btn-default {
    border: none;
    width: 100px;
}

.text-xs-ex {
    font-size: 11px;
    line-height: 13px;
    padding-top: 2px;
    display: block;
}

.app-aside-folded .navi>ul>li>ul {
    z-index: 1003;
}

.cls-relative {
    position: relative;
}

.explain {
    width: 14px;
    height: 14px;
    border-radius: 12px;
    position: absolute;
    bottom: -7px;
    left: 50%;
    margin-left: -7px;
    z-index: 10;
    background: #FFF;
    box-shadow: 0 0px 2px #FFF;
}

.bd-blue {
    border: 3px solid #6ACAF7;
}

.bd-pink {
    border: 3px solid #fa91c8;
}

.bd-brown {
    border: 3px solid #873e23;
}

.bd-lavender {
    border: 3px solid #59546c;
}

.bd-orange {
    border: 3px solid #fbaf5d;
}

.bd-danger {
    border: 3px solid #F26C4F;
}

.summary-box {
    position: relative;
    height: 86px;
}

.box-notification {
    padding: 30px 50px;
}

.text-bold {
    font-weight: bold;
}

.text-normal {
    font-weight: 400;
}

.tbl-notification>tbody>tr:first-child>td {
    border-top: none;
}

.tbl-notification>tbody>tr>td:first-child {
    width: 70px;
    padding: 13px 0;
}

.bg-gold {
    background-color: #FEE267;
}

.bg-pink {
    background-color: #fa91c8;
    color: #FFF;
}

.bg-brown {
    background-color: #873e23;
}

.bg-lavender {
    background-color: #59546c;
}

.bg-silver {
    background-color: #E1E3E4;
}

.bg-bronze {
    background-color: #F8C394;
}

.tbl-notification .footable-odd {
    background: none;
}

.no-pd {
    padding: 0;
}

.no-mg {
    margin: 0;
}

.tbl-notification .btn {
    margin: 5px 0;
}

.mr-t-5 {
    margin-top: 5px;
}

.mt-15 {
    margin-top: 15px;
}


/*-------------- Tab Setting ------------*/

.tab-setting {
    margin-top: 5px;
    position: relative;
}

.tab-setting .nav-tabs h1 {
    margin-top: 0;
    margin-bottom: 3px;
}

.tab-setting ul.nav-tabs {
    border-bottom: 1px solid #6ACAF7;
    padding-bottom: 7px;
}

.tab-setting ul.nav-tabs li {
    float: right;
}

.tab-setting ul.nav-tabs .btn {
    margin: 0 5px 10px 0;
}

.tab-setting .btn-none {
    background: #FFF;
    color: #6ACAF7 !important;
}

.tab-setting .btn-none:hover,
.tab-setting .btn-none:focus {
    background: #3dbcf8;
    color: #FFF !important;
}

.tab-setting .tab-container .tab-content {
    border: none;
}

.tab-setting .nav-tabs>li>a.tab-icon {
    display: block;
    width: 70px;
    margin-top: 4px;
    padding: 38px 0 0 0;
    text-align: center;
    color: #6ACAF7;
    border: none;
    height: 77px;
    margin-right: 0;
    margin-left: 1px;
}

.tab-setting .nav-tabs>li>a.ti-medical {
    background-image: url(../img/ms-6.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-gallery {
    background-image: url(../img/ms-5.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-omicall {
    background-image: url(../img/pm-3.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-op-hour {
    background-image: url(../img/ms-4.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-description {
    background-image: url(../img/ms-3.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-info {
    background-image: url(../img/ms-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-account {
    background-image: url(../img/ms-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-merchant {
    background-image: url(../img/bs-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-branch {
    background-image: url(../img/bs-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-staff {
    background-image: url(../img/bs-3.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-customer {
    background-image: url(../img/bs-4.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-service {
    background-image: url(../img/bs-5.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-package {
    background-image: url(../img/pk-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-retail {
    background-image: url(../img/pk-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-appointment {
    background-image: url(../img/ap-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-redemption {
    background-image: url(../img/pm-3.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-1st-deal {
    background-image: url(../img/pm-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-time-deal {
    background-image: url(../img/pm-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-calendar {
    background-image: url(../img/cl-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-message {
    background-image: url(../img/cl-4.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav-tabs>li>a.ti-list {
    background-image: url(../img/cl-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

.tab-setting .nav>li>a:hover,
.tab-setting .nav>li>a:focus,
.tab-setting .nav-tabs>li.active>a {
    background-color: unset;
    border-bottom: 4px solid #6ACAF7 !important;
}

.tab-setting .logo {
    width: 150px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.tab-setting .logo img {
    max-width: 100%;
}

.tab-setting .tab-content {
    padding: 50px 0 80px;
}

.separate {
    position: relative;
    top: 6px;
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #6ACAF7;
    margin-right: 5px;
}

.text-1-5x {
    font-size: 1.5em;
}

.text-1-25x {
    font-size: 1.25em;
}

.form-control.text-left,
.btn.text-left {
    text-align: left;
}

.btn-country {
    margin-bottom: 10px;
}

.no-pd-right {
    padding-right: 0;
}

.no-pd-left {
    padding-left: 0;
}

.no-mr {
    margin: 0;
}

.form-control-1-5x {
    height: 34px;
    font-size: 16px;
}

.i-sw-vertical-md {
    vertical-align: text-bottom;
}

.form-control.col-xs-10 {
    width: 82%;
}

.box-social {
    margin-top: 10px;
}

.box-social .fa {
    padding: 6px 0px;
    border-radius: 50px;
    background: #6ACAF7;
    color: #FFF;
    font-size: 14px;
    width: 26px;
    float: left;
    margin-right: 6px;
    text-align: center;
}

.box-social .form-group {
    float: left;
    margin-bottom: 13px;
}

.btn-editor .btn-default.text-blue.btn-info {
    color: #FFF !important;
}

.box-gallery>.col-md-2 {
    padding: 4px 0.5%;
}

.box-gallery img {
    max-width: 100%;
}

.btn-remove {
    float: right;
    margin: 8px;
    padding: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    padding-top: 2px;
}

.effect-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.effect-1:hover {
    opacity: 1;
}


/*---- Time Slot ----*/

.date {
    width: 50px;
    height: 50px;
    color: #FFF;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    background: #6ACAF7;
    border-radius: 100px;
    text-align: center;
    padding-top: 12px;
    display: inline-block;
    vertical-align: bottom;
}

.timeslots {
    margin-bottom: 12px;
}

.elessar-label {
    font-size: 11px;
    border-left: none;
    text-indent: -20px;
    color: #999;
    top: 14px;
}

.elessar-rangebar {
    height: 10px;
    border-radius: 20px;
    background: #E3F7FF;
    margin-top: 20px;
    line-height: 10px;
}

.elessar-range {
    background: #6ACAF7;
    overflow: visible;
    border-radius: 20px;
    height: 10px;
}

.elessar-handle {
    width: 20px;
    height: 20px;
    top: -5px;
    border-radius: 20px;
    background: #6ACAF7;
}

.elessar-handle:first-child {
    left: -10px;
}

.elessar-handle:last-child {
    right: -10px;
}

.elessar-barlabel {
    float: left;
    margin-top: -23px;
    color: #6ACAF7;
}

.elessar-phantom .elessar-barlabel {
    margin-top: 0;
    color: #FFF;
    padding-left: 3px;
    margin-left: 0;
    min-width: 20px;
}

.elessar-barlabel-1 {
    margin-left: -18px;
}

.elessar-barlabel-2 {
    float: right;
    margin-right: -18px;
}

.elessar-deal {
    width: 150px;
    height: auto;
    position: absolute;
    bottom: 6px;
    left: 50%;
    margin-left: -75px;
    z-index: 9999;
}

.de-wrap {
    display: none;
    width: 100%;
    background: #FFF;
    padding: 10px 10px 20px;
    box-shadow: 0 0 5px rgba(180, 180, 180, 0.5);
    border-radius: 5px;
    margin-bottom: 40px;
}

.elessar-deal h4 {
    margin: 5px;
    font-size: 16px;
    color: #69caf7;
}

.elessar-deal input {
    font-family: 'Oswald', sans-serif;
    color: #69caf7;
}

.elessar-range:hover .elessar-deal .de-wrap,
.elessar-range:focus .elessar-deal .de-wrap,
.elessar-range:active .elessar-deal .de-wrap {
    display: block;
}

.elessar-range:hover .elessar-deal .discount-val,
.elessar-range:focus .elessar-deal .discount-val,
.elessar-range:active .elessar-deal .discount-val {}

.discount-val {
    font-family: 'Oswald', sans-serif;
    color: #f26c4f;
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.input-discount {
    width: 100px;
    margin: 0 auto;
    text-align: center;
}

.input-discount .input-dis {
    text-align: center;
}

.input-discount .input-group-addon {
    border-radius: 0 50px 50px 0;
    padding: 0 8px;
}

.am12 {
    position: absolute;
    right: 5px;
    font-size: 11px;
    color: #999;
}

.btn-circle {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    padding: 4px 0 0 0;
    text-align: center;
}

.reset-time {
    margin-top: 16px;
    display: inline-block;
    color: #6ACAF7;
    font-size: 18px;
    cursor: pointer;
    width: 18px;
    /*-ms-transform: rotate(0); */
    /* IE 9 */
    /*-webkit-transform: rotate(0); */
    /* Chrome, Safari, Opera */
    /*transform: rotate(0);*/
    /*-webkit-transition: transform 0.2s ease;*/
    /*-moz-transition: transform 0.2s ease;*/
    /*-o-transition: transform 0.2s ease;*/
    /*-ms-transition: transform 0.2s ease;*/
    /*transition: transform 0.2s ease;*/
}

.reset-time:hover {
    /*-ms-transform: rotate(-180deg); */
    /* IE 9 */
    /*-webkit-transform: rotate(-180deg); */
    /* Chrome, Safari, Opera */
    /*transform: rotate(-180deg);*/
}

.opening-hour {
    display: none;
    width: 90%;
    margin: 0 auto;
}

.setting-advance>div {
    margin-top: 40px;
}

.setting-advance .form-control {
    width: 60px;
    font-family: 'Oswald', sans-serif;
    color: #6ACAF7;
    font-size: 20px;
    height: 34px;
}

.setting-advance>div .form-group:first-child .form-control {
    border-radius: 50px 0 0 50px;
    padding-right: 0;
}

.setting-advance>div .form-group:nth-child(2) .form-control {
    border-radius: 0 50px 50px 0;
    margin-left: -4px;
}

.setting-advance .form-group {
    display: inline-block;
}

.setting-advance>div:first-child {
    border-right: 1px solid #EEE;
}

.categories .chosen-container,
.categories .chosen-container-multi .chosen-choices {
    width: 100% !important;
}

.categories input[type='text'],
.categories .chosen-container-multi .chosen-choices {
    height: 26px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.08) inset;
    text-align: center;
    border-color: #ebebeb;
    padding: 0 10px;
    border-radius: 50px !important;
}

.categories .chosen-choices input[type='text'] {
    height: 26px !important;
    padding: 4px 0 !important;
    text-align: left;
}

.categories input[type='text']:focus,
.categories .chosen-container-multi .chosen-choices:focus {
    border-color: #6ACAF7;
}

.categories .chosen-container-multi .chosen-choices .search-choice {
    margin-top: 2px;
    margin-left: 0;
    margin-right: 2px;
}

.chosen-container .chosen-results li {
    font-size: 13px;
    color: #6ACAF7;
}

.active-result.highlighted,
.chosen-container .chosen-results li:hover {
    color: #FFF;
    background: #6ACAF7 !important;
}

#tab_info .dropdown-menu {
    width: 100%;
}


/*------------- Add Customer ----------*/

.avatar-150 {
    border: 4px solid #ddd;
    margin-bottom: 12px;
    width: 150px;
    height: 150px;
    border-radius: 500px;
}

.avatar-view img.avatar-150 {
    width: 150px;
    height: 150px;
}

.no-sd {
    box-shadow: none;
}

.country-list .btn-sm {
    padding-top: 6px;
    padding-bottom: 6px;
}

.country-list .open>.dropdown-menu {
    width: 100%;
}

.gender .radio+.radio,
.gender .checkbox+.checkbox,
.gender .radio,
.gender .checkbox {
    margin: 3px 0;
}

.bg-light {
    background: #fbfbfb;
}


/*---------- Add Service ----------*/

.i-checks-sm>i,
.i-checks-sm input:checked+i::before,
.i-checks input:checked+i {}

.avatar-150.no-radius {
    border-radius: 0;
}

.setting-advance>div.small-space {
    margin-top: 20px;
}

.setting-advance .small-space .form-control {
    width: 50px;
    margin-left: -3px;
    text-align: right;
}

.setting-advance>div.small-space:first-child {
    border-right: none;
}

.rounded-left {
    border-radius: 500px 0 0 500px;
}

.rounded-right {
    border-radius: 0px 500px 500px 0 !important;
}

.setting-advance .small-space .form-control.price-dollar {
    width: 80px;
}

.setting-advance .small-space .form-control.price-dollar.price-vnd {
    width: 120px;
}

.setting-advance .small-space .form-control.price-cent {
    width: 40px;
}

.assign-staff {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-table;
}

.assign-staff li {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

.assign-staff li img {
    max-width: 50px;
    max-height: 50px;
    border-radius: 100px;
}

.avatar-name-50 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: #6ACAF7;
    text-transform: uppercase;
    background: #E3F7FE;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    font-weight: 400;
}

.btn-xs.btn-icon {
    padding: 5px;
    width: 24px;
    height: 24px;
}

.btn-xs.btn-icon.text-2x {
    font-size: 2em;
    line-height: 24px;
}

.btn-plus {
    margin-top: 13px;
}

.btn-remove-xs {
    position: absolute;
    width: 16px;
    height: 16px;
    padding: 0;
    text-align: center;
    font-size: 10px;
    line-height: 16px;
    right: 0px;
    top: 0px;
    display: none;
}

.assign-staff>li:hover .btn-remove-xs {
    display: block;
}

.assign-staff-list {
    width: 190px;
}

.assign-staff-list li {
    width: 100%;
    margin-right: 0;
    height: auto;
}

.assign-staff .popover-content,
.assign-staff .popover-content .panel-body {
    padding: 0;
}

.assign-staff-list li a {
    display: block;
    width: 100%;
    color: #6ACAF7;
    text-decoration: none;
    padding: 5px;
}

.assign-staff-list li:first-child a {
    border-radius: 4px 4px 0 0;
}

.assign-staff-list li:last-child a {
    border-radius: 0 0 4px 4px;
}

.assign-staff-list li a:hover {
    background: #6ACAF7;
    color: #FFF;
}

.popover {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
}

.chosen-choices,
.chosen-single,
.bootstrap-tagsinput {
    border-radius: 500px !important;
}

.chosen-container-single .chosen-single {
    height: 26px !important;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    line-height: 26px !important;
}

.chosen-container-single .chosen-single div {
    top: -3px !important;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.08) inset;
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-choices {
    box-shadow: none !important;
    border-color: #6ACAF7 !important;
}

.categories input[type="text"],
.categories .chosen-container-multi .chosen-choices {
    height: 26px !important;
}

.pu-right {
    float: right;
}

.pu-left {
    float: left;
}

.page-url .input-group-addon:first-child {
    border-radius: 40px 0 0 40px;
}

.page-url .input-group .form-control {
    height: 28px;
    border-radius: 0 40px 40px 0;
}

.input-money .input-group-addon:first-child {
    border-radius: 40px 0 0 40px;
}

.input-money .input-group .form-control {
    height: 28px;
    border-radius: 0 40px 40px 0;
    width: 60px;
}

.input-money .input-group-addon {
    padding: 6px 10px;
}


/*------------- Management --------*/

.tab-setting .tab-content-1 {
    padding: 30px 0 0;
    min-height: 400px;
}

.search-bar {
    width: 0px;
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: width 0.2s ease;
    -moz-transition: width 0.2s ease;
    -o-transition: width 0.2s ease;
    -ms-transition: width 0.2s ease;
    transition: width 0.2s ease;
}

.search-bar.hien {
    width: 350px;
}

.search-bar.hien.w-xxl {
    width: 460px;
}

.search-bar .btn-sm {
    padding: 6px 10px;
    height: 32px;
}

.btn-xs.btn-icon i {
    top: -6px;
}

.table>thead>tr>th:last-child,
.table>tbody>tr>td:last-child {
    padding: 13px 5px;
    text-align: right;
    min-width: 70px;
}

.notes-list .table>thead>tr>th:last-child,
.notes-list .table>tbody>tr>td:last-child {
    text-align: left;
}

.table>thead>tr>th {
    vertical-align: top;
}

.page-content-thin-gap {
    padding-top: 0px;
    padding-bottom: 17px;
}

.page-content-thin-gap .panel {
    margin-bottom: 0;
}

.text-italic {
    font-style: italic;
}

.breadcrumb {
    background: none;
    margin-bottom: 0;
}

.navbar-form .input-group-btn .btn:hover {
    color: #333;
}

.i-checks.i-check-danger input:checked+i::before {
    background-color: #F26C4F;
}

.i-checks.i-check-danger input:checked+i {
    border-color: #F26C4F;
}

.radio label>label,
.checkbox label>label {
    padding-left: 0;
}


/*------------ Table ------------*/

table .filters {
    /*display: none;*/
}

table .filters td input {
    max-width: 180px;
}

table .filters.hien {
    display: table-row;
}

table thead tr th a {
    color: #AAA;
}

.table>thead>tr>th {
    padding: 13px 10px;
    color: #333;
    font-weight: 900;
}


/*------------ loading -------------*/

.loading {
    width: 100%;
    height: 300px;
    min-height: 300px;
    background-image: url(../img/loading.gif);
    background-position: center 100px;
    background-repeat: no-repeat;
    background-size: 100px auto;
    background-color: rgba(255, 255, 255, 0.75);
}

.loading.height-100p {
    background-position: center 200px;
    height: 100%;
}

.tab-pane .loading {
    height: 600px;
    min-height: 600px;
}

.loading-abs {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    background-image: url(../img/loading.gif);
    background-position: center;
    background-size: 100px auto;
    background-repeat: no-repeat;
    z-index: 9;
}

.loading-t-100 {
    background-position: center 100px;
}

.grid-view-loading {}


/*-------------*/

.pk-sv-item {
    clear: both;
    margin-bottom: 5px;
    float: left;
    width: 100%;
}

.assign-service {
    float: right;
    width: 95%;
}

.pk-sv-item .i-checks-sm>i {
    margin-top: 17px;
}

.pk-sv-item .form-group {
    margin-bottom: 0;
}

.pk-sv-item .checkbox {
    margin: 0;
}

.setting-advance .stock-input .form-control {
    width: 80px;
}

select {
    height: 26px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.08) inset;
    border: 1px solid #ebebeb;
    padding: 0;
    background-color: #fff;
    background-image: none;
    color: #555;
    display: block;
    line-height: 1.42857;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

select:focus {
    border-color: #6ACAF7;
}

textarea.form-control {
    border-radius: 10px;
}

textarea.form-control.embeb-code {
    height: 230px;
}

.table.no-border-top>tbody>tr:first-child>td {
    border-top: none;
}

.opening-hour.w-full {
    width: 100%;
}

.work-hour {
    padding-top: 12px;
    text-align: center;
}


/*------------- REVIEW ------------*/

.positioner {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.starbox .colorbar,
.starbox .ghost {
    z-index: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.starbox .stars {
    display: inline-block;
}

.starbox .stars .star_holder {
    position: relative;
    z-index: 1;
}

.starbox .stars .star_holder .star {
    display: inline-block;
    vertical-align: baseline;
    background-repeat: no-repeat;
}


/* Override with your own image and sizeĂ¢â‚¬Â¦ */

.starbox .stars .star_holder .star {
    background-image: url('../img/5-large.png');
    background-size: 26px;
    width: 26px;
    height: 26px;
}


/* Override with your own coloursĂ¢â‚¬Â¦ */

.starbox .stars {
    background: #cccccc;
}

.starbox .rated .stars {
    background: #dcdcdc;
}

.starbox .rated.hover .stars {
    background: #cccccc;
}

.starbox .colorbar {
    background: #3DBCF8;
}

.starbox .hover .colorbar {
    background: #3DBCF8;
}

.starbox .rated .colorbar {
    background: #69CAF7;
}

.starbox .rated.hover .colorbar {
    background: #69CAF7;
}

.starbox .ghost {
    background: #a1a1a1;
}


/*----------- / REVIEW ------------*/

.label-horizontal {
    padding-top: 3px;
}

textarea.comment-area {
    height: 100px;
}


/*------------- Modal Crop Image ------------*/

#avatar-modal.modal.fade.in {
    /*left:50%;*/
    /*overflow: visible !important;*/
    /*position: absolute;*/
}


/*------------------------------*/

.btn-re-schedule i {
    color: #FFF;
    margin-top: 0;
    margin-left: 1px;
    font-size: 13px;
}

.form-group h4,
.form-group h5 {
    margin-top: 0;
}

.border-blue {
    border-color: #6ACAF7;
}


/*------------- Modal -------------*/

.modal-header,
.modal-footer {
    /*border-color:#69caf7;*/
}

.modal-content {
    border-radius: 10px;
}

.modal-backdrop {
    position: fixed;
    height: 100% !important;
}

.mg-top-10 {
    margin-top: 8px;
}

.pd-t-10 {
    padding-top: 10px;
}

.pd-t-15 {
    padding-top: 15px;
}

.pd-t-30 {
    padding-top: 30px;
}

.pd-t-40 {
    padding-top: 40px;
}

.pd-t-45 {
    padding-top: 45px;
}

.pd-t-50 {
    padding-top: 50px;
}


/*------------ / Modal ----------*/

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #f1f1f1 !important;
}

.datepicker.form-control[disabled],
.datepicker.form-control[readonly],
fieldset[disabled] .datepicker.form-control,
#date_start,
#date_end,
#date_start_2,
#date_end_2 {
    background-color: #fff !important;
}

.form-control.col-sm-2 {
    width: 16%;
}

.label-info {
    background-color: #69CAF7;
}

.modal-alert {
    position: fixed;
    width: 300px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -120px;
    background: #FFF;
    border: 1px solid #999;
    z-index: 9999;
    display: none;
    box-shadow: 0 0 10px rgba(180, 180, 180, 0.8);
}

.md-header,
.md-body,
.md-footer {
    padding: 10px;
}

.md-body {
    padding: 20px 10px;
}

.md-body,
.md-footer {
    border-top: 1px solid #e5e5e5;
}

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

.modal-alert h2 {
    margin: 0;
    color: #69caf7;
}


/*------/ Modal ---------*/

.btn-sw.active {
    background-color: #69caf7;
    border-color: #69caf7;
    color: #FFF !important;
    box-shadow: none;
}

.navbar-btn:focus i {
    color: #FFF;
}

.symbol-list {
    list-style: none;
    margin: 0px 0 0;
    padding: 0;
    display: inline-table;
}

.symbol-list li {
    width: 100%;
    display: inline-block;
    text-align: left;
    margin-bottom: 5px;
}

.symbol-list li span.symbol {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 30px;
    margin-right: 10px;
}

.symbol-appt {
    background: #3DBCF8;
}

.symbol-appt-online {
    background: #FF68B6;
}

.symbol-request {
    background: #11B1A9;
}

.symbol-time-deal {
    background: #FE9A3A;
}

.symbol-1st-time-deal {
    background: #FE9A3A;
}

.symbol-redeemed {
    background: #FE9A3A;
}

.symbol-class {
    background: #9ACC51;
}

.symbol-block {
    background: #E63A3A;
}

.symbol-noshow {
    background: #CCC;
}

.symbol-list hr {
    margin: 0;
}

.pd-r-5 {
    padding-right: 5px;
}

.pd-l-5 {
    padding-left: 5px;
}

.bg-30 {
    min-height: 30px !important;
    height: 30px;
}

.label-success {
    background-color: #ABD373;
}

.label-warning {
    background-color: #f68e56;
}

.avatar-50 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.avatar-40 {
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

.avatar-30 {
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.avatar-25 {
    width: 25px;
    height: 25px;
    border-radius: 25px;
}

.avatar-20 {
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

.avatar-15 {
    width: 15px;
    height: 15px;
    border-radius: 15px;
}

.avatar-10 {
    width: 10px;
    height: 10px;
    border-radius: 10px;
}

.chosen-container-single .chosen-search input[type="text"] {
    height: 26px !important;
    border-radius: 100px !important;
}


/*============== Re-style ============*/

.thumb_on_list {
    width: 80px;
    height: 80px;
}

#service-grid table td ul {
    margin: 0;
    padding: 0;
    display: inline-table;
    list-style: none;
}

#service-grid table td ul li {
    display: inline-block;
}

#service-grid table td ul li img {
    width: 30px;
    height: 30px;
    border-radius: 60px;
    margin-bottom: 3px;
}

#service-grid .avatar-name-50,
.avatar-name-30 {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: #e3f7fe;
    color: #6acaf7;
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    font-weight: 400;
    padding-top: 5px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 3px;
}

#service-grid .table>tbody>tr>td,
#service-grid .table>tfoot>tr>td,
#service-grid .table>thead>tr>th {
    width: 5%;
    padding-left: 5px;
    padding-right: 5px;
}

#service-grid .table tr>td:nth-child(2),
#service-grid .table tr>td:nth-child(3),
#service-grid .table tr>td:nth-child(4) {
    width: 20%;
}

#service-grid .table tr>td:nth-child(9),
#service-grid .table tr>td:nth-child(5),
#service-grid .table tr>td:nth-child(6),
#service-grid .table tr>td:nth-child(7),
#service-grid .table tr>th:nth-child(9),
#service-grid .table tr>th:nth-child(5),
#service-grid .table tr>th:nth-child(6),
#service-grid .table tr>th:nth-child(7) {
    text-align: center;
}

.dropdown-menu {
    font-size: 13px;
}

#staff-grid table tr td:first-child img,
#customers-grid table tr td:first-child img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
}


/*------ Editor ------*/

.mce-panel {
    background: #FFF !important;
    border: none !important;
}

.mce-edit-area {
    margin-top: 10px !important;
    border: 1px solid #ebebeb !important;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.08) inset !important;
}

.mce-btn button {
    color: #69caf7 !important;
    padding: 6px 10px !important;
}

.mce-toolbar-grp .mce-flow-layout-item {
    margin: 0 2px 0 0 !important;
}

.mce-ico {
    color: #69caf7 !important;
}

.mce-btn {
    background: #FFF !important;
}

#mce_55,
#mce_54,
#mce_49,
#mce_50 {
    display: none !important;
}

.mce-btn-group .mce-first,
.mce-btn button,
.mce-btn-group .mce-last,
.mce-btn {
    border-color: #dee5e7 #dee5e7 #d8e1e3 !important;
}

.mce-btn i {
    text-shadow: none !important;
}

.mce-btn.mce-active {
    background: #69caf7 !important;
    border-color: #69caf7 !important;
}

.mce-btn.mce-active .mce-ico {
    color: #FFF !important;
}

.mce-btn {
    border-left: 1px solid #999 !important;
}

.mce-splitbtn .mce-open {
    border-right: none !important;
}

.mce-caret {
    border-top: 4px solid #69caf7 !important;
}

.mce-btn.mce-active .mce-caret {
    border-top: 4px solid #FFF !important;
}

.mce-primary button,
.mce-primary button i {
    text-shadow: none !important;
}


/*-----------------*/

.avatar-view {
    margin: 10px auto;
    box-shadow: none;
    border: none;
    height: auto;
}

.timeslots .col-sm-1:last-child {
    padding: 0;
}

.timeslots .col-sm-1 .btn-icon {
    padding: 0;
    display: inline-block;
    vertical-align: bottom;
}

.thumb-sm.avatar {
    height: 40px;
}

#customer_note_list {
    clear: both;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}

.avatar-preview {
    border-radius: 50%;
}


/*=========== DATEPICKER ============*/

.ui-widget-content {
    border: 1px solid #999 !important;
    border-radius: 0 !important;
}

.ui-widget-header {
    background: none !important;
    border: none !important;
}

.ui-widget {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 400 !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 400 !important;
    height: 30px !important;
    width: 30px !important;
    text-align: center !important;
    padding-top: 5px !important;
}

.ui-datepicker th {
    color: #6ACAF7 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: none !important;
    border: none !important;
    text-align: center !important;
    font-weight: 400 !important;
    color: #555 !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #6ACAF7 !important;
    border: none !important;
    color: #FFF !important;
    border-radius: 50px !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: #A1DEFA !important;
    border-radius: 50px !important;
    color: #FFF !important;
}

.ui-widget-header .ui-state-hover {
    background: none !important;
    color: #FFF !important;
}

.ui-widget-header .ui-icon.ui-icon-circle-triangle-w {
    background: url("images/ms-nr-left.png") no-repeat;
    background-size: 100% auto;
}

.ui-widget-header .ui-icon.ui-icon-circle-triangle-e {
    background: url("images/ms-nr-right.png") no-repeat;
    background-size: 100% auto;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    float: left;
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
    border-radius: 100px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: #fa91c8 !important;
    border-radius: 100px;
    color: #FFF;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 13px;
    font-weight: 400;
}

.btn-icon {
    margin: 1px;
}

.suggest-list-search {
    position: absolute;
    display: block;
    top: 40px;
    right: -15px;
    z-index: 9;
    list-style: none;
    width: 300px;
    margin: 0;
    padding: 0;
    background: #FFF;
    box-shadow: 0 0 5px rgba(200, 200, 200, 0.6);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.suggest-list-search li {
    width: 100%;
    padding: 5px;
}

.suggest-list-search li:hover {
    background-color: #F1F1F1;
}

.suggest-list-search li:last-child {
    padding: 15px 0;
}

.suggest-list-search li:last-child:hover {
    background: none;
}

.suggest-list-search li img {
    max-width: 100%;
}

.daterangepicker select.yearselect,
.daterangepicker select.monthselect {
    display: inline-block;
    width: 40%;
}

.errorMessage {
    font-size: 12px;
    color: #f26c4f;
}

.errorSummary {
    padding-top: 30px;
}

.errorSummary ul {
    color: #f26c4f;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info.active[disabled],
fieldset[disabled] .btn-info.active {
    background: #ddd;
    border-color: #ddd;
    color: #666 !important;
}

.tab-setting .nav-tabs .badge.up {
    top: -45px;
    margin-left: -20px;
}

.select2-container .select2-choice {
    padding-left: 0;
    background: none;
    border: none;
}

.select2-container .select2-choice .select2-arrow {
    background: none;
    border: none;
}

.select2-search input {
    border-radius: 500px;
    background: none !important;
}

.select2-drop-active,
.chosen-container-single .chosen-drop {
    border-color: #CCC;
    border-top: 1px solid #CCC;
    border-radius: 4px;
}

.select2-drop-active {
    padding-top: 3px;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    box-shadow: none;
}

.panel-1 {
    min-height: 295px;
}

.panel-2 {
    min-height: 465px;
}

.panel-3 {
    min-height: 432px;
}

.mc-list {
    max-width: 200px;
}

#links {
    text-align: center;
}

#form_add .modal-body {
    position: relative;
}

#form_add .modal-body .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FFF;
    background-image: url('../img/loading.gif');
    background-position: center 200px;
    z-index: 999;
}

.panel {
    margin-bottom: 28px;
}

.modal-body {
    clear: both;
}

.label {
    text-shadow: none;
}

.text-gray-light {
    color: #999;
}

.chartnum-2 {
    line-height: 18px;
    padding-top: 30px;
}

.text-pink {
    color: #fa91c8;
}

.text-brown {
    color: #873e23;
}

.text-lavender {
    color: #59546c;
}

.mg-bt-25 {
    margin-bottom: 25px;
}

.box-desc {
    text-align: left;
    width: 85px;
    margin: 10px auto 0;
}

.mg-t-10 {
    margin-top: 10px;
}

.table-responsive.grid-view-loading {
    background-image: url(../img/loading-1.gif);
    background-repeat: no-repeat;
    background-position: right top 15px;
}

.disc-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    display: inline-table;
}

.disc-list li {
    display: inline-block;
    float: left;
    width: 160px;
}

.disc-list li.dis-sp {
    width: 100%;
    height: 8px;
}

.disc-list li.dis-day {
    text-align: center;
    clear: both;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    background: #69CAF7;
    color: #FFF;
    padding-top: 2px;
    font-size: 11px;
    font-family: 'Oswald', sans-serif;
}

.disc-list li .text-red {
    font-family: 'Oswald', sans-serif;
}

.disc-list li .text-info {
    font-family: 'Oswald', sans-serif;
}

.disc-list ul {
    padding-left: 0px;
    list-style: none;
    line-height: 16px;
}

.disc-list ul li {
    padding-left: 1em;
    text-indent: -.7em;
}

.disc-list ul li:before {
    content: "Ă¢â‚¬Â¢ ";
    display: inline;
    vertical-align: middle;
    font-size: 20px;
    color: #333;
}

#edit_s_t_deal_c3,
#service_1st_deal_c3 {
    width: 250px;
}

#edit_s_t_deal_c4,
#service_1st_deal_c4 {
    width: 130px;
}

#edit_s_t_deal_c5,
#service_1st_deal_c5,
#class_time_deal_c6,
#class_1st_deal_c6 {
    width: 90px;
}

a.search-item {
    margin-left: 15px;
}

.navi {
    padding-top: 0;
}

.navi-wrap {
    padding-bottom: 180px;
}

.navi ul.nav li:first-child {
    border-top: 1px solid #464646;
}

h5.solo-name {
    margin: 2px 0;
}

.panel-footer a {
    width: 85%;
}

.col-lg-2-5 {
    width: 20%;
    margin: 0;
    padding: 0;
}

.row-sm .col-lg-2-5 {
    padding: 0;
}

.col-lg-2-5 .b-a {
    border-right: none;
}

.row-sm .col-lg-2-5:last-child .b-a {
    border-right: 1px solid #dee5e7;
}

.order-content table {
    width: 100%;
}

.cus-note-list {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.cus-note-list li {
    margin-bottom: 10px;
}

.mg-bt-5 {
    margin-bottom: 5px;
}

.md-wrap {
    width: 100%;
    text-align: center;
}

.m-dashboard {
    list-style: none;
    display: inline-table;
    margin: 30px auto;
    padding: 0;
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.m-dashboard li {
    display: inline-block;
    padding: 10px 20px 20px;
    width: 45%;
    margin: 5px;
    text-align: left;
    vertical-align: top;
}

.bg-light-1 {
    background-color: #F1F1F1;
}

.bg-light-2 {
    background-color: #F9F9F9;
}

.upgrade-pl {
    position: relative;
    overflow: hidden;
    color: #888;
}

.upgrade-pl .upgrade-ly {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(240, 240, 240, 1);
    /*rgba(105,202,247,1);*/
    z-index: 1;
    opacity: 0;
    text-align: center;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.upgrade-pl:hover .upgrade-ly {
    opacity: 1;
}

ul.list-group-1-4x>li {
    border: none;
    display: inline-flex;
    width: 48%;
}

ul.list-group-1-4x>li>i {
    margin-top: 3px;
}

.select2-container .select2-choice .select2-arrow b {
    background: none;
}

.text-unlimted {
    font-size: 2em;
    line-height: 20px;
}

.s-tooltip {
    cursor: pointer;
}

.plan-detail-wrap {
    padding-bottom: 0;
    clear: both;
}

.plan-detail-wrap .panel {
    margin-bottom: 10px;
}

.plan-detail-wrap .list-group-item i {
    font-weight: 900;
}

.icon-unlimited {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 2px;
    font-size: 2em;
}

.wrap-rd {
    width: 180px;
}

.wrap-rd input {
    width: 100px;
    display: inline-block;
}

.wrap-rd .btn {
    width: 92px;
    display: inline-block;
}

.wrap-rd .bg-loading,
.wrap-rd-dt .bg-loading {
    width: 100%;
    height: 14px;
    background-image: url(../img/loading-1.gif);
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
}

.wrap-rd-dt .bg-loading {
    width: 40px;
}

.wrap-rd .btn {
    height: 26px;
}

.wrap-rd-dt {
    display: none;
    width: 320px;
    color: #252525;
}

.wrap-rd-dt .group-control>span {
    display: inline-block;
}

.wrap-rd-dt .group-control>span.rd-title {
    width: 150px;
}

.wrap-rd-dt .group-control:last-child {
    margin-top: 5px;
}

.db-rd .popover,
.box-promotion .popover {
    max-width: 350px;
}

.noti-des .popover {
    max-width: none;
}

i[data-toggle="popover"] {
    cursor: pointer;
}

.tab-content.no-pd {
    padding: 0;
}

.panel-hd-ct h4 {
    margin-top: 21px;
}

.panel-hd-ct h2 {
    margin-bottom: 20px;
}

.mc-pricing .list-group i {
    font-weight: 900;
}

.mc-pricing .btn {
    margin-top: 5px;
    margin-bottom: 10px;
}

.mc-pricing .btn:hover {
    color: #FFF;
}

.plan-unavailable .panel-heading {
    background-color: #F1F1F1;
    color: #888;
}

.plan-unavailable .bg-info .text-lt {
    color: #888 !important;
}

.plan-unavailable .list-group,
.plan-unavailable .list-group i {
    color: #888;
}

.plan-unavailable .btn,
.plan-unavailable .btn:hover {
    background-color: #F1F1F1;
    color: #888;
}

.plan-unavailable h5 {
    color: #888;
}

.mc-pricing .panel-footer h5 {
    margin: 0;
}

.sm-qt {
    margin: 0 auto;
}

.md-btn-upgrade {
    display: none;
}

.box-promotion .btn#btn_checkcode,
.box-promotion .btn#btn_redeem {
    color: #FFF !important;
}

.s-dashboard {
    list-style: none;
    margin: 20px auto;
    padding: 0;
    display: inline-table;
    text-align: center;
    width: 100%;
}

.s-dashboard li {
    display: inline-block;
    width: 49%;
}

.sort-link.desc {
    display: inline-block;
    padding-right: 10px;
    background-image: url("images/srt-u.png");
    background-position: top 8px right;
    background-repeat: no-repeat;
}

.sort-link.asc {
    display: inline-block;
    padding-right: 10px;
    background-image: url("images/srt-d.png");
    background-position: top 6px right;
    background-repeat: no-repeat;
}

.clock-list table tr th:last-child,
.clock-list table tr td:last-child {
    padding-right: 15px !important;
}

.box-clock h1 {
    margin-top: 5px;
}

.box-clock hr {
    margin: 8px 0 3px;
}

.box-clock .table>thead>tr>th {
    padding: 4px 10px;
}

.table>thead>tr>th:last-child,
.table>tbody>tr>td:last-child {
    min-width: 100px;
    text-align: right;
}

.box-calendar .calendar .table tbody td {
    height: 45px;
}

.box-calendar .calendar .table td span {
    bottom: 18px;
}

#changePassModal {
    margin-top: 120px;
}

.mg-l-5 {
    margin-left: 5px;
}

.loading-200 {
    height: 200px !important;
    min-height: 200px !important;
    background-position: center 80px !important;
}

.sp-week-picker {
    position: absolute;
    z-index: 1;
}

.schedules-edit-table {
    border: 1px solid #e1e1e1 !important;
}

.schedules-table tr td {
    background: none !important;
}

.bd-right-i {
    border-right: 1px solid #e1e1e1 !important;
}

.sp-week-hide {
    display: none;
}

.firsttime-icon {
    position: relative;
}

.firsttime-icon img {
    position: absolute;
    right: 5px;
    top: -25px;
}


/*------------- Remind ------------*/

.date-loop {
    color: #6acaf7;
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    width: 80px;
    max-width: 80px;
    height: 28px;
    text-align: right;
}

.date-loop-group {
    width: 100px;
    max-width: 100px;
}

.date-loop-group .input-group-addon {
    padding-left: 5px;
    padding-right: 8px;
    font-size: 13px;
}

textarea.form-control.reminder-msg {
    height: 160px;
}

table .name-item {
    padding: 0px 5px 5px;
}


/*------------- Sales Report -----------*/

.date-filter {
    float: left;
    width: 310px;
    max-width: 100%;
}

#tab_sales_report #filter_form select.form-control,
#tab_sales_report .date-filter .form-control {
    display: inline-block;
}

.datetime {
    max-width: 120px;
    display: inline-block;
}

#tab_sales_report #filter_form {
    min-height: 30px;
    width: auto;
    margin-right: 5px;
}

#filter_form select,
#tab_sales_report .date-filter {
    max-width: 140px;
    text-align: left;
}

.pd-t-80 {
    padding-top: 80px;
}

.mc-login {
    height: 32px;
}

.footer-col ul.language-selector a {
    font-size: 14px;
}

#login-form .errorMessage {
    padding-top: 2px;
}

.app-aside-folded .btn-cus-checkin span {
    display: none;
}

#ui-datepicker-div {
    z-index: 4;
}


/*----------- MySpa 12/12/2016 ----------*/

.no-shadow {
    box-shadow: none;
}

.dropdown button {
    height: 32px;
}

.select2-container .select2-choice {
    line-height: 32px;
}

.list-tudo>div {
    margin-top: 10px;
    margin-bottom: 10px;
}

.list-tudo .popover {
    width: 200px;
}

.list-tudo .text-3x {
    font-size: 24px;
    line-height: 50px;
}

.popover-title .btn-xs {
    margin-top: -5px;
    margin-right: -3px;
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    background: none;
    border: none;
}

#input_redeem {
    height: 26px;
}

.bc-sumary h1 {
    margin: 5px 0;
}

.bc-sumary {
    padding: 10px 0;
}

.sale-chart {
    margin: 5px;
}

table#checkin_list>thead>tr>th:last-child,
table#checkin_list>tbody>tr>td:last-child {
    min-width: 45px;
}

.tr-highlight td {
    background: #FFF0C9 !important;
}

.mbs-check {
    margin-top: 1px;
}

.text-10 {
    font-size: 10px;
}

.select2-hidden-accessible {
    display: none;
}

.no-m-t {
    margin-top: 0;
}

.w-100 {
    width: 100%;
}

.identified-upload .glyphicon {
    display: none;
}

.identified-upload input.form-control {
    padding: 2px;
    border-left: none;
    border-radius: 0;
}

.identified-upload .group-span-filestyle label {
    padding-left: 2px;
    padding-right: 4px;
    border-radius: 0 500px 500px 0;
}

.no-pd-l {
    padding-left: 0;
}

.no-pd-r {
    padding-right: 0;
}

.table.member-note>thead>tr>th:last-child,
.table.member-note>tbody>tr>td:last-child {
    text-align: left;
}

#header .list-group {
    max-height: 420px;
    overflow: auto;
}

.modal .tab-container .tab-content {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.select2-container.select2-container-disabled .select2-choice,
.select2-container-multi.select2-container-disabled .select2-choices {
    background: none;
    border: none;
}

.modal .tab-setting .nav-tabs>li>a.tab-icon {
    background-size: 20px;
}

.modal .tab-setting .nav-tabs>li>a.tab-icon {
    height: 60px;
    padding-top: 30px;
    width: 70px;
}

.modal .tab-setting .tab-content-1 {
    min-height: auto;
}

.modal .table>tbody>tr>td,
.modal .table>tfoot>tr>td {
    padding: 6px;
}

.lost-towel {
    height: 0;
    overflow: hidden;
}

.mbs-info {
    display: none;
}

.btn-bar {
    width: 80%;
    margin: 0 auto;
}

.chart-revenue-header {
    padding-top: 1px;
}

.chart-revenue-header h1 {
    margin-bottom: 0;
}

.box-popular-sv {
    min-height: 432px;
}

.search-by-date {
    width: 140px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
}

.identified-upload .bootstrap-filestyle input {
    border-radius: 50px 0 0 50px;
}


/*-- View Page --*/

.view-page .form-control {
    border: none;
    box-shadow: none;
}

.view-page .select2-container {
    background: #e1f1f1;
}

.view-page .datepicker.form-control[disabled],
.view-page .datepicker.form-control[readonly],
.view-page fieldset[disabled] .datepicker.form-control,
.view-page #date_start,
.view-page #date_end,
.view-page #date_start_2,
.view-page #date_end_2 {
    background-color: #f1f1f1 !important;
}

.view-page .input-group-addon {
    border: none;
    background: #e1f1f1;
}

.view-page .form-control[disabled],
.view-page .form-control[readonly],
.view-page fieldset[disabled] .form-control,
.view-page .select2-container .select2-choice .select2-arrow b,
.view-page .i-checks input[disabled]+i::before,
.view-page fieldset[disabled] .i-checks input+i::before {
    background: #e1f1f1 !important;
}

.view-page .i-checks input[disabled]+i::before,
.view-page fieldset[disabled] .i-checks input+i::before {
    background: #555 !important;
}

.view-page .i-checks input[disabled]+i,
.view-page fieldset[disabled] .i-checks input+i {
    border-color: #555 !important;
}

.access-title {
    text-align: left;
    text-transform: uppercase;
    background: #e1f1f1 !important;
}

.h-200 {
    height: 200px;
}

textarea.h-150 {
    height: 150px;
}

thead {
    background: #FFF;
}


/* List services */

ul.list-services,
ul.list-products {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: inline-table;
}

ul.list-services li,
ul.list-products li {
    display: inline-block;
    width: 138px;
    margin: 5px 0%;
    border: 1px solid #999;
    padding: 3px;
}

.n-b {
    border: none;
}

.tab-setting ul.nav-tabs.n-b {
    border: none;
}

.tab-setting .nav.order-cate>li>a:hover,
.tab-setting .nav.order-cate>li>a:focus,
.tab-setting .nav-tabs.order-cate>li.active>a {
    border-color: #abd373;
    border-bottom: 1px solid #abd373 !important;
}

.tab-setting ul.nav-tabs.order-cate li {
    float: left;
}

.pre-order-box {
    position: fixed;
    top: 50px;
    right: 0;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    z-index: 1000;
}

.pre-order-btns {
    position: fixed;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    z-index: 1001;
}

.pre-order-box .table-order {
    margin-bottom: 10px;
}

.select-staff-wrap {
    display: none;
}

.table.table-order>tbody>tr>td,
.table.table-order>tfoot>tr>td {
    padding: 3px;
}

.table-order thead {
    background: none;
}

.table-order td {
    border-top: 1px dotted #eee;
}

.table-order.table>thead>tr>td {
    padding: 8px 3px;
}

.table-order.table>tbody>tr>td,
.table-order.table>tfoot>tr>td {
    border-top: 1px dotted #000;
}

ul.list-services>li,
ul.list-products>li {
    cursor: pointer;
    min-height: 115px;
    vertical-align: bottom;
}

tr.staff-assign td {
    border-top: none !important;
}

.text-logo {
    letter-spacing: 10px;
    font-weight: 400;
}

.text-logo-h2 {
    letter-spacing: 8px;
    font-weight: 400;
}

.cursor {
    cursor: pointer;
}

#drift-widget-container {
    display: none;
}

.v-b {
    display: inline-block;
    vertical-align: bottom;
}

.i-checks input:checked+i::before {
    background-color: #7266ba;
}

.i-checks input:checked+i {
    border-color: #7266ba;
}

.i-checks input.bg-info:checked+i::before {
    background-color: #23b7e5;
}

.i-checks input.bg-info:checked+i {
    border-color: #23b7e5;
}

.i-checks input.bg-success:checked+i::before {
    background-color: #abd373;
}

.i-checks input.bg-success:checked+i {
    border-color: #abd373;
}

.i-checks input.bg-warning:checked+i::before {
    background-color: #fad733;
}

.i-checks input.bg-warning:checked+i {
    border-color: #fad733;
}

.i-checks input.bg-danger:checked+i::before {
    background-color: #f26c4f;
}

.i-checks input.bg-danger:checked+i {
    border-color: #f26c4f;
}

.i-checks input.bg-pink:checked+i::before {
    background-color: #fa91c8;
}

.i-checks input.bg-pink:checked+i {
    border-color: #fa91c8;
}

.i-checks input.bg-brown:checked+i::before {
    background-color: #873e23;
}

.i-checks input.bg-brown:checked+i {
    border-color: #873e23;
}

.i-checks input.bg-lavender:checked+i::before {
    background-color: #59546c;
}

.i-checks input.bg-lavender:checked+i {
    border-color: #59546c;
}

#appointmentModal textarea {
    height: 150px;
}

.max-height-50 {
    max-height: 50px;
}

.pre-order-box input {
    background: #FFF;
    border: none;
    border-bottom: 1px solid #999;
}

.pre-order-btns .select2-choices {
    background: none;
    box-shadow: none;
}

.ord-detail tr {
    border-bottom: 1px dotted #CCC;
}

.ord-detail tr:last-child {
    border: none;
}

.order-history tbody tr {
    border-bottom: none;
}

.floatThead-container {
    z-index: 99 !important;
}

#links>a {
    margin-right: 5px;
    border: 1px solid #e1f1f1;
}

a.photo-thumb {
    width: 100px;
    height: 100px;
    background-size: cover !important;
    background-position: center !important;
    display: inline-block;
}

.select2-container-multi {
    height: auto;
    min-height: 32px;
}

.select2-container-multi .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
    border: none;
    background: none;
    box-shadow: none;
}

.select2-container-multi .select2-choices .select2-search-choice {
    background: #eee;
    border: none;
    border-radius: 50px;
    box-shadow: none;
}

.select2-search-choice .select2-search-choice-close {
    background-size: 60px 40px;
}


/* TOGGLE BUTTON */

.material-button-anim {
    position: fixed;
    padding: 0px 15px 0px;
    text-align: center;
    max-width: 320px;
    margin: 0 auto 20px;
    bottom: 0px;
    left: -5px;
    z-index: 9999;
}

.material-button {
    position: relative;
    top: 0;
    z-index: 1;
    width: 50px;
    height: 50px;
    font-size: 1.5em;
    color: #fff;
    background: #7266ba;
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .275);
    outline: none;
}

.material-button-toggle {
    z-index: 3;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.material-button-toggle span {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: -webkit-transform .175s cubic-bazier(.175, .67, .83, .67);
    transition: transform .175s cubic-bazier(.175, .67, .83, .67);
}

.material-button-toggle.open {
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    -webkit-animation: toggleBtnAnim .175s;
    animation: toggleBtnAnim .175s;
}

.material-button-toggle.open span {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform .175s cubic-bazier(.175, .67, .83, .67);
    transition: transform .175s cubic-bazier(.175, .67, .83, .67);
}

#options {
    height: 50px;
}

.option {
    position: relative;
}

.option .option1,
.option .option2,
.option .option3 {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -webkit-transition: all .175s;
    transition: all .175s;
}

.option .option1 {
    -webkit-transform: translate3d(60px, 60px, 0) scale(.8, .8);
    transform: translate3d(60px, 60px, 0) scale(.8, .8);
}

.option .option2 {
    -webkit-transform: translate3d(0, 60px, 0) scale(.8, .8);
    transform: translate3d(0, 60px, 0) scale(.8, .8);
}

.option .option3 {
    -webkit-transform: translate3d(-60px, 60px, 0) scale(.8, .8);
    transform: translate3d(-60px, 60px, 0) scale(.8, .8);
}

.option.scale-on .option1,
.option.scale-on .option2,
.option.scale-on .option3 {
    filter: blur(0);
    -webkit-filter: blur(0);
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all .175s;
    transition: all .175s;
}

.option.scale-on .option2 {
    -webkit-transform: translateY(-28px) translateZ(0);
    transform: translateY(-28px) translateZ(0);
    -webkit-transition: all .175s;
    transition: all .175s;
}

a.material-button {
    display: inline-block;
    padding-top: 12px;
}

a.material-button:hover {
    background: #abd373;
    color: #FFF;
}

.panel-default .panel-heading {
    background: #7266ba;
    color: #f4f3f9;
}

.panel-default .panel-heading.bg-light {
    background: #F1F1F1;
    color: #333;
}

.panel-default .panel-heading .form-group {
    color: #333;
}

.bed-in-out {
    position: absolute;
    bottom: 3px;
    right: 3px;
}


/* Login Background */

.app-header-fixed.bg-2019 {
    padding-top: 0;
}

.welcome-clock {
    font-size: 120px;
}

.bg-2019 {
    /*background: #abd373;*/
    background: url('../frontend/images/login-background-2019.jpg') center;
    background-size: cover;
    background-position: -200px center;
}

.bg-2019 .left-side {
    position: absolute;
    width: 65%;
    min-height: 100%;
    padding-top: 180px;
    padding-right: 80px;
    z-index: 2;
}

.login-wrap {
    position: absolute;
    width: 35%;
    height: 100%;
    overflow: auto;
    right: 0;
    top: 0;
    z-index: 2;
    background: #FFF;
}

.bg-2019 .login-wrap .container {
    padding: 100px 50px 0;
    width: 100%;
    max-width: 100%;
}

.bg-2019 .login-wrap .container img {
    width: 150px;
    height: auto;
}

.blur-layout {
    position: absolute;
    width: 100%;
    min-height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
}

.support-contact {
    position: fixed;
    color: #fff;
    z-index: 2;
    bottom: 20px;
    left: 80px;
}


/* End Background 2018 */

.text-xxs {
    font-size: 10px;
}

ul.bed-list {
    margin: 0;
    padding: 0;
    display: table;
}

ul.bed-list>li {
    position: relative;
    display: inline-table;
    vertical-align: bottom;
    padding: 3px;
    width: 160px;
    height: 115px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #58666e;
}

ul.bed-list>li.active {
    background-color: #e1f1f1;
}

ul.bed-list h5 {
    margin-top: 0;
}


/* -- Service card -- */

ul.service-card-list {
    display: table-cell;
    margin: 0;
    padding: 0;
}

ul.service-card-list li {
    position: relative;
    width: 250px;
    height: 140px;
    border-radius: 5px;
    padding: 5px;
    display: inline-table;
    margin-right: 2px;
    margin-bottom: 20px;
    padding-bottom: 35px;
}

ul.service-card-list li.service-card-active {
    background: #7266ba;
    color: #FFF;
}

ul.service-card-list li.service-card-disable {
    background: #AAA;
    color: #FFF;
}

ul.service-card-list li .card-times {
    position: absolute;
    left: 5px;
    bottom: 5px;
}

ul.service-card-list li .card-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
}

.table-order.table>tbody>tr>td.no-bd {
    border: none;
}

.table-order.table>tbody>tr>td.b-t {
    border-top: 1px solid #000;
}


/*------ Search on top ------*/

.navbar-form #s2id_customer_info .select2-arrow {
    display: none;
}

.navbar-form #s2id_customer_info {
    background-image: url('select2x2.png') !important;
    background-repeat: no-repeat !important;
    background-size: 60px 40px !important;
    background-position: 100% -19px !important;
    width: 180px;
}

.navbar-form #s2id_customer_info.select2-dropdown-open {
    width: 260px;
}

.select2-drop-active {
    border: none;
}

#select2-drop-mask {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.select2-results .select2-highlighted {
    background: #7266BA;
}

.card-selected {
    background: #abd373 !important;
}

.prepay-card li {
    position: relative;
    cursor: pointer;
}

.prepay-card .exp {
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.prepay-card .price {
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.dropdown-menu li.disabled a {
    color: #999;
}

.wrap-note-table {
    max-height: 1000px;
    overflow: auto;
}


/*--- User photo list ---*/

.photo-list {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.photo-list li {
    width: 100%;
    border-bottom: 1px solid #999;
    padding-top: 10px;
}

.photo-list li h2 {
    text-align: left;
}

.photo-list li:last-child {
    border-bottom: none;
}

.delete-photo {
    position: relative;
    top: 3px;
    right: 3px;
    display: block;
    background: #f26c4f;
    color: #FFF;
    width: 15px;
    height: 15px;
    text-align: center;
    border-radius: 500px;
    z-index: 5;
    line-height: 15px;
    float: right;
}


/*----- Edit member note -----*/

.member-note-area {
    border: none;
    border-bottom: 1px solid #999;
    overflow: visible;
}

.no-show {
    display: none;
    width: 100%;
    min-height: 150px;
}


/*----- CHECKIN -----*/

.checkedin-info,
.checkedout-info {
    display: none;
}

.textarea-st {
    border: none;
    border-bottom: 1px solid #ddd;
    font-style: italic;
}

.table-striped>tbody>tr:nth-child(2n+1)>td textarea {
    background: #FBFBFB;
}

.advance-search {
    display: none;
}

.row-commission {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.text-xs-1 {
    font-size: 10px;
}

.table-responsive {
    border: none;
}

.n-pd-r {
    padding-right: 0;
}

.repeat {
    display: none;
}

.panel-today {
    max-height: 384px;
}

.chart-label {
    position: absolute;
    bottom: 40px;
    left: 30px;
    z-index: 9;
    font-size: 11px;
    color: #AAA;
}

.p-l-xs {
    padding-left: 5px;
}

.p-r-xs {
    padding-right: 5px;
}

.p-wrap {
    padding: 10px 30px;
}

.dropdown button.btn-readed {
    height: 22px;
    margin-top: -2px;
}


/* -- Rating -- */

.rating {
    border: none;
    float: left;
}

.rating>input {
    display: none;
}

.rating>label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.rating>.half:before {
    content: "\f089";
    position: absolute;
}

.rating>label {
    color: #ddd;
    float: right;
}


/***** CSS Magic to Highlight Stars on Hover *****/

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
    color: #FFD700;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
    color: #FFED85;
}

.rating-tbl td {
    padding: 5px !important;
}

.rating-tbl td:first-child {
    padding: 0px !important;
}

.rating-tbl input {
    max-width: 90px;
}


/*----- Stars -----*/

div.stars {
    width: 100%;
    display: inline-block;
}

input.star {
    display: none;
}

label.star {
    float: right;
    padding: 10px;
    font-size: 36px;
    color: #444;
    transition: all .2s;
}

input.star:checked~label.star:before {
    content: '\f005';
    color: #FD4;
    transition: all .25s;
}

input.star-5:checked~label.star:before {
    color: #FE7;
    text-shadow: 0 0 20px #952;
}

input.star-1:checked~label.star:before {
    color: #F62;
}

label.star:hover {
    transform: rotate(-15deg) scale(1.3);
}

label.star:before {
    content: '\f006';
    font-family: FontAwesome;
}


/*----- End stars -----*/

.break-br {
    width: 100%;
    height: 16px;
}

.item-photo .avatar-preview {
    border-radius: 0;
}

.item-photo .preview-lg,
.item-photo .preview-md,
.item-photo .preview-sm {
    height: auto
}

.product-units {
    padding: 0 !important;
    margin: 0 !important;
    margin-top: -5px !important;
    border: none !important;
    border-bottom: 1px solid #999 !important;
    border-radius: 0 !important;
    width: 80px;
    background: none !important;
}

.service_list_choose ul {
    padding-left: 0;
}

.service_list_choose ul li {
    height: auto;
    margin-bottom: 0;
    padding: 0;
}

@keyframes up-right {
    0% {
        transform: scale(1);
        opacity: .25
    }
    50% {
        transform: scale (1, 5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: .25;
    }
}

.red-blink {
    position: absolute;
    right: 5px;
    top: 5px;
    -webkit-animation: up-right 1s infinite;
    -moz-animation: up-right 1s infinite;
    -o-animation: up-right 1s infinite;
    animation: up-right 1s infinite;
}

.pinkBg {
    background-color: #f26c4f!important;
    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}

.intro-banner-vdo-play-btn {
    height: 10px;
    width: 10px;
    position: absolute;
    right: 10px;
    top: 15px;
    text-align: center;
    margin: -5px 0 0 -5px;
    border-radius: 100px;
    z-index: 1
}

.intro-banner-vdo-play-btn i {
    line-height: 56px;
    font-size: 30px
}

.intro-banner-vdo-play-btn .ripple {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: -1;
    left: 50%;
    top: 50%;
    opacity: 0;
    margin: -15px 0 0 -15px;
    border-radius: 100px;
    -webkit-animation: ripple 1.8s infinite;
    animation: ripple 1.8s infinite
}

.navi .intro-banner-vdo-play-btn {
    left: 30px;
}

.app-aside-folded a span.navi-text,
.app-aside-folded .a-version {
    visibility: hidden;
}

.apt-label {
    display: none;
}

.btn-hide {
    display: none !important;
}

#wrap_order input.n-b {
    border: none;
}

#wrap_order input.b-b {
    border-bottom: 1px solid #999;
}

.fc-list-item-time>span.pull-right {
    float: left !important;
}

.appointment-staff-wrap {
    width: 100%;
    overflow-x: auto;
}

.cls-appointment-staff {
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.cls-opacity-50 {
    opacity: 0.5;
}

.cls-opacity-30 {
    opacity: 0.3;
}

.app-aside-folded a span.navi-text,
.app-aside-folded .a-version,
.app-aside-folded .a-language {
    visibility: hidden;
}

.order-detail {
    position: fixed;
    top: 50px;
    right: 0px;
    z-index: 1000;
    height: 100%;
    overflow: scroll;
}


/*---- Signature -----*/

.signature-area {
    width: 100px;
    height: 100px;
    text-align: center;
    border: 2px dashed #999;
    font-size: 30px;
    color: #999;
    padding-top: 30px;
    cursor: pointer;
    line-height: 20px;
    float: left;
}

.signature-img {
    width: 100px;
    height: 100px;
    text-align: center;
    margin-left: 10px;
    float: left;
}

.signature-customer {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #FFF;
    top: 0;
    left: 0;
}

.itemform {
    margin-bottom: 10px;
    overflow: hidden;
}

.item_combo_choose {
    padding-bottom: 20px;
}

.item_combo_choose .noactive {
    color: #afafaf;
}

ul.service-card-list.list-sm>li {
    height: 120px;
    margin-bottom: 10px;
}

ul.service-card-list.list-sm li {
    width: 180px;
    font-size: 11px;
    padding: 2px;
}

ul.service-card-list.list-sm ul li {}

ul.service-card-list.list-sm li .card-btn {
    right: 0;
    bottom: 0px;
}

ul.service-card-list.list-sm .btn-xs.btn-icon {
    width: 18px;
    height: 18px;
}

ul.service-card-list.list-sm .btn-icon i {
    line-height: 30px;
}

.dp-btn-group {
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
}

@-webkit-keyframes ripple {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ripple {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.intro-banner-vdo-play-btn .ripple:nth-child(2) {
    animation-delay: .3s;
    -webkit-animation-delay: .3s
}

.intro-banner-vdo-play-btn .ripple:nth-child(3) {
    animation-delay: .6s;
    -webkit-animation-delay: .6s
}

@keyframes toggleBtnAnim {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    25% {
        -webkit-transform: scale(1.4, 1.4);
        transform: scale(1.4, 1.4);
    }
    75% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
    }
    100% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
    }
}

@-webkit-keyframes toggleBtnAnim {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    25% {
        -webkit-transform: scale(1.4, 1.4);
        transform: scale(1.4, 1.4);
    }
    75% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
    }
    100% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
    }
}

.avatar-noborder-radius {
    border-radius: 0;
}

.check_custom {
    margin-top: 7px;
}

/* custom popup event */
#popup-regis-event{
    /* display: flex; */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#popup-regis-event .popup-event-cus{
    height: max-content;
    width: 1000px;
    margin: 0;
}
#popup-regis-event .modal-content{
    border-radius: 16px;
    background-color: transparent;
    box-shadow: none;
    border: none;
}
#popup-regis-event .popup-bg-mb{
    display:none
}
#popup-regis-event .popup-bg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#popup-regis-event .modal-body{
    padding: 0;
}
#popup-regis-event .form-events {
    position: absolute;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto;
    width: 80%;
    max-width: 480px;
    box-shadow: -3px 5px 20px rgb(113 97 186 / 15%);
    border-radius: 32px;
    background-color: #2a1a06;
}
#popup-regis-event .form-event{
    display: flex;
    flex-direction: column;
    border-radius: 0 0 32px 32px;
    background-color: transparent;
    padding: 0 24px 24px 24px;
}
#popup-regis-event .form-events .form-event-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 2;
    border-radius: 16px;
    border: 3px solid #fac670;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 
    background-color: #2a1a06;
    overflow: hidden;
}
.form-event_header {
    padding: 16px 0;
    background-image: linear-gradient(#684318, #492f11);
    text-align: center;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
.form-event_title {
    font-size: 28px;
    font-weight: bold;
    color: #ebd594;
    padding: 5px;
}
.wrap-popup-regis-event{
    border-radius: 16px;
    overflow: hidden;
}
#popup-regis-event .form-event .input-wrap {
    padding: 4px 0;
}
#popup-regis-event .input-wrap input {
    width: 100%;
    background-color: transparent;
    outline: 0;
    border: 0;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    padding: 8px 0;
    color: #ebd594;
    padding-left: 4px;
}
#popup-regis-event .input-wrap input::placeholder{
    color: #fff
}
#popup_event_select.input-select {
    width: 100%;
    background-color: transparent;
    outline: 0;
    border: 0;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    padding: 8px 0;
    height: unset;
    color: #fff
}
#popup-regis-event .form-event .form-btn_wrap {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
#popup-regis-event .form-event .form-event_btn {
    padding: 8px 16px;
    background-image: linear-gradient(#684318, #492f11);
    border: 0;
    outline: 0;
    color: #ebd594;
    font-size: 18px;
    border-radius: 24px;
    font-weight: bold;
    width: max-content;
    cursor: pointer;
    border: 3px solid #fac670;
}
#popup-regis-event .form-event .form-event_btn:hover{
    background-image: linear-gradient(#492f11, #684318);
}
#popup-regis-event .form-event .event-seemore {
    font-weight: 500;
    color: #fff;
    margin-top: 10px;
    font-size: 12px;
    text-decoration: underline !important;
    cursor: pointer;
}
#popup-regis-event .input-select option {
    color: #492f11;
    font-weight: 700;
}
.btn-close-event{
    position: absolute;
    z-index: 2;
    right: 10px;   
    top: 10px;
    color: #fff;
    opacity: 1;
    width: 36px;
    font-weight: 700;
    height: 36px;
    font-size: 24px;
    border-radius: 100rem;
    border: 0;
    outline: none;
    background-color: transparent;
    transition: all .3s ease;
}
.btn-close-event:hover{
    color: red;
    transform: rotate(90deg);
    border: 0;
    outline: none;
    transition: all .3s ease;
}
/* close custom popup event */
.icon_new-slider-header{
    width: 50px;
    position: absolute; 
    top: 0px; 
    right: 20px;
    animation: scaleAnimation 1s infinite forwards;
}
.regis_event_30yr{
    background-image: linear-gradient(#684318, #492f11); 
    border: 1px solid #fac670 !important;
    box-shadow: 0 0 0 0 #c7c1e4;
    animation: pulsing-primary-2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    transition: all 0.3s ease;
}
.btn-regis_zns, .btn-regis_marketing, .btn-regis_brand_app{
    border: 1px solid #fff !important;
    box-shadow: 0 0 0 0 #c7c1e4;
    animation: pulsing-primary-2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    transition: all 0.3s ease;
    font-weight: bold;
}
.btn-regis_zns{
    background-image: linear-gradient(#01a5fb, #0590e3); 
}
.btn-regis_marketing{
    background-image: linear-gradient(#86b919, #69aa1e); 
}
.btn-regis_brand_app{
    background-image: linear-gradient(#7161ba, #7161ba); 
}

.popup-event-cus{
    display: flex; 
    align-items: center; 
    justify-content: center;
    height: 100%;
    width: 100%;
    z-index: 10;
} 
.event-30yr-wraper{
    width: 100%;
    height: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.event-30yr-imgs{
    position: relative;
    width: 80%;
    margin-bottom: 48px;
}
.event-30yr-img{
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.popup-event-btn{
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: transparent;
    font-size: 50px;
    font-weight: bold;
    padding: 0;
    border: 0;
    outline: none
}
/* custom countdown in header */
.events-the-face-beauty .countdown-wraper{
    margin-top: 14px;
}
.events-the-face-beauty .countdown-title{
    font-size: 12px;
}
.events-the-face-beauty .countdown-event ul{
    gap: 6px;
    margin-top: 8px;
}
.events-the-face-beauty .countdown-event ul li{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #000;
    border-radius: 8px;
}
.events-the-face-beauty .countdown-event ul li span{
    font-size: 14px;
}
/* custom countdown in header */

@keyframes scaleAnimation{
    0% {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
    100% {
        scale: 1;
    }
}
@keyframes pulsing-primary-2{
    100% {
    box-shadow: 0 0 0 10px rgba(165, 0, 100, 0);
}
}

/*============= Responsive ============*/


/* CSS Document */

@media only screen and (min-width: 980px) and (max-width: 1199px) {
    .m-dashboard li {
        width: 48%;
    }
    .bg-login {
        background-size: auto 110%;
    }
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }
}


/* Tablet Portrait size to standard 960 (devices and browsers) */

@media only screen and (min-width: 768px) and (max-width: 979px) {
    /* Tab Setting */
    .tab-setting .nav-tabs>li>a.tab-icon {
        font-size: 12px;
        width: 64px;
    }
    .tab-setting .nav-tabs>li:first-child h1+button+button {
        display: none;
    }
    .country-list .btn-sm {
        width: 100%;
    }
    .tab-setting .nav-tabs>li>a.tab-icon {
        width: 48px;
        text-indent: -9999px;
    }
    .opening-hour {
        width: 100%;
    }
    .date {
        width: 40px;
        height: 40px;
        font-size: 14px;
        padding-top: 9px;
    }
    /*---------------*/
    .m-dashboard li {
        width: 100%;
        margin: 5px 0;
    }
    .m-dashboard>li>div>div:last-child>.btn {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .m-dashboard {
        max-width: 380px;
    }
    .bg-login {
        background-size: 150% auto;
    }
    .bg-2019 {
        background-position: -300px 0;
    }
    .bg-2019 .left-side {
        width: 50%;
        padding-top: 180px;
        padding-right: 40px;
    }
    .bg-2019 .login-wrap {
        width: 400px;
    }
    .bg-2019 .login-wrap .container {
        padding: 100px 30px 0;
    }
    .welcome-text {
        font-size: 30px;
    }
    .welcome-clock {
        font-size: 90px;
    }
    .shortcut-btn {
        display: none;
    }
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }
}


/* All Mobile Sizes (devices and browser) */


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media screen and (max-width: 767.98px) {
    #popup_moba_app_register_fixed .modal-content{
        background: unset !important;
        background-color: #fcecb9 !important;
        padding: 0 !important;
    }
    #popup-regis-event .popup-bg-mb{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #popup-regis-event .popup-bg{
        display:none
    }
    .wrap-popup-regis-event{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #popup-regis-event .form-events{
        position: unset;
        max-width: unset;
        width: 100%;
    }
    #popup-regis-event {
        width: calc(100vw - 48px);
        margin: 0 auto;
    }
    .wrap-popup-regis-event{
        background-color: #2a1a06;
    }
    #popup-regis-event .form-events .form-event-wrap{
        position: unset;
        width: 100%;
        z-index: 2;
        border-radius: 16px;
        transform: unset;
    }
    .form-event_title{
        font-size: 16px;
    }
    #popup-regis-event .input-wrap input, #popup_event_select.input-select{
        font-size: 12px;
    }
    #popup-regis-event .form-event .form-event_btn{
        font-size: 12px;
        border: 2px solid #fac670;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .line-summary>div:first-child {
        padding: 25px 0 5px;
        border-right: none;
    }
    .line-summary>div:last-child {
        padding-bottom: 20px;
    }
    .box-chart .nav-tabs>li a {
        font-size: 15px;
    }
    .p-sv-i {
        float: left;
        clear: none;
    }
    .setting-advance>div:first-child {
        border: none;
    }
    .country-list .btn-sm {
        width: 100%;
    }
    .pu-right,
    .pu-left {
        float: none;
    }
    .assign-staff {
        text-align: center;
    }
    /* Tab Setting */
    .tab-setting .nav-tabs>li {
        width: 16%;
    }
    .tab-setting .nav-tabs>li:first-child {
        width: 100%;
        text-align: center;
    }
    .tab-setting .nav-tabs>li:first-child h1 {
        margin-bottom: 20px;
    }
    .tab-setting .nav-tabs>li>a.tab-icon {
        width: 100%;
    }
    .opening-hour .timeslots {
        position: relative;
        margin-bottom: 50px;
    }
    .opening-hour .timeslots .col-sm-1:last-child {
        position: absolute;
        right: 0;
        top: 10px;
    }
    /*---------------*/
    .m-dashboard li {
        width: 100%;
        margin: 5px 0;
    }
    .m-dashboard>li>div>div:last-child.col-lg-4 {
        text-align: center;
    }
    .m-dashboard>li>div>div:last-child>.btn {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .m-dashboard .upgrade-pl .upgrade-ly {
        padding: 0 10px;
    }
    .wrap-rd .btn {
        height: 30px;
    }
    ul.list-group-1-4x>li {
        width: 100%;
    }
    .plan-detail-wrap>p>a {
        width: 100%;
        margin-bottom: 10px;
    }
    #modal_plan,
    #modal_cancel_plan {
        padding-right: 0 !important;
    }
    .col-lg-2-5 {
        width: 100%;
    }
    .col-lg-2-5>div,
    .col-lg-2-5 .b-a {
        border: 1px solid #dee5e7;
    }
    .m-dashboard {
        max-width: 380px;
    }
    .bg-login {
        background-size: auto 110%;
    }
    .no-pd-l {
        padding-left: 15px;
    }
    .no-pd-r {
        padding-right: 15px;
    }
    .tet-2018>.container {
        background: none;
    }
}

@media only screen and (max-width: 767px) {
    .calendar-note {
        float: left;
        clear: both;
        width: 100% !important;
        text-align: right;
        margin-bottom: 15px !important;
    }
    #search_form {
        float: left !important;
        width: 100%;
    }
    .bg-2019 {
        background-position: -300px 0;
    }
    .bg-2019 .left-side {
        width: 50%;
        padding-top: 80px;
        padding-right: 40px;
    }
    .bg-2019 .login-wrap {
        width: 400px;
        max-width: 100%;
    }
    .bg-2019 .login-wrap .container {
        padding: 30px 30px 0;
    }
    .welcome-text {
        font-size: 30px;
    }
    .welcome-clock {
        font-size: 60px;
    }
    .search-bar.hien.w-xxl {
        max-width: 85%;
    }
    .member-list #search_form .w-sm {
        max-width: 48%;
    }
    .member-list #search_form .pull-right {
        float: left !important;
        margin: 0;
        margin-right: 3px;
        padding: 10px;
        max-width: 40%;
    }
    .break-br {
        height: 0;
    }
    .order-list #search_form .w-xs {
        max-width: 28%;
    }
    .sale-report-all #search_form .w-xs {
        max-width: 28%;
    }
    .sale-report-all #search_form .w-sm {
        max-width: 48%;
    }
    .sale-report-all #search_form .m-l-xs {
        margin-left: auto;
    }
    .sale-report-all #search_form .select2-container {
        margin-right: 2px;
    }
    .sale-report-all #search_form .date-filter {
        text-align: left;
    }
    .sale-chart .form-control {
        height: 30px;
    }
    .app-footer span.pull-right {
        float: none !important;
    }
    .app-footer .footer-hotline {
        float: left !important;
    }
    .app-footer .text-xxs.text-muted {
        clear: both;
        display: inline-block;
        text-indent: 0;
    }
    .appointment-staff-wrap .badge.up {
        top: 0;
    }
    .date-filter.pull-right,
    .select2-container.pull-right {
        float: left !important;
    }
    .search-bar.hien,
    .select2-container.pull-right,
    .select2-container.w-sm,
    .select_service_card.pull-right,
    .select_prepay_card.pull-right {
        width: 100% !important;
    }
    .date-filter.text-right {
        text-align: left;
    }
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }
    .order-page .tab-setting .nav-tabs>li:first-child {
        width: auto;
    }
    .order-page .tab-setting .nav-tabs>li {
        width: auto;
    }
    .order-detail {
        position: relative;
        top: 0px;
        right: 0px;
        overflow: scroll;
    }
    .no-pd-sm {
        padding: 0 !important;
    }
    .no-mg-sm {
        margin: 0 !important;
    }
}

@media only screen and (max-width: 650px) {
    .bg-2019 {
        background: #FFF;
    }
    .bg-2019 .left-side,
    .blur-layout {
        display: none;
    }
    .bg-2019 .login-wrap {
        width: 100%;
        max-width: 100%;
    }
    .bg-2019 .container {
        position: relative;
        padding: 50px 30px 0;
        width: 100%;
    }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

@media only screen and (max-width: 479px) {
    .line-summary>div:first-child {
        padding: 25px 0 5px;
        border-right: none;
    }
    .line-summary>div:last-child {
        padding-bottom: 20px;
    }
    .box-chart .nav-tabs>li a {
        font-size: 15px;
    }
    .p-sv-i {
        float: left;
        clear: both;
    }
    .box-notification {
        padding: 20px;
    }
    /* Notification */
    .table>tbody>tr>td,
    .table>tfoot>tr>td {
        padding: 13px 0;
    }
    .tbl-notification>tbody>tr>td:first-child {
        width: 50px;
    }
    .tbl-notification>tbody>tr>td:last-child {
        width: 50px;
    }
    .tbl-notification>tbody>tr>td:first-child img {
        max-width: 90%
    }
    .setting-advance>div:first-child {
        border: none;
    }
    .country-list .btn-sm {
        width: 100%;
    }
    .pu-right,
    .pu-left {
        float: none;
    }
    .assign-staff {
        text-align: center;
    }
    /* Tab Setting */
    .tab-setting .nav-tabs>li {
        width: 16%;
    }
    .tab-setting .nav-tabs>li:first-child {
        width: 100%;
        text-align: center;
    }
    .tab-setting .nav-tabs>li:first-child h1 {
        margin-bottom: 20px;
    }
    .tab-setting .nav-tabs>li:first-child h1+button+button {
        display: none;
    }
    .tab-setting .nav-tabs>li:first-child .btn {
        padding: 6px 10px;
    }
    .tab-setting .nav-tabs>li>a.tab-icon {
        width: 100%;
    }
    .tab-setting .nav-tabs>li.text-indent>a.tab-icon {
        width: 100%;
        text-indent: -9999px;
        height: 50px;
    }
    .box-social .form-control.col-xs-10 {
        width: 75%;
        float: right;
    }
    .pd-sm-sc {
        padding-left: 15px;
        padding-right: 15px;
    }
    .input-group-addon:first-child {
        font-size: 9px;
        padding: 0 3px;
    }
    .opening-hour .timeslots {
        position: relative;
        margin-bottom: 50px;
    }
    .opening-hour .timeslots .col-sm-1:last-child {
        position: absolute;
        right: 0;
        top: 10px;
    }
    .opening-hour .elessar-labels>div {
        display: none;
    }
    .opening-hour .elessar-labels>div:first-child {
        display: block;
    }
    .tab-pane .loading {
        height: 300px;
        min-height: 300px;
    }
    .modal-alert {
        width: 240px;
        margin-left: -120px;
    }
    .form-control {
        height: 30px;
    }
    /*---------------*/
    .page-content {
        padding: 0;
    }
    .page-content>.col-md-12 {
        padding: 0;
    }
    .app-content-body {
        padding-bottom: 0;
    }
    .chosen-container-single .chosen-single {
        height: 30px !important;
    }
    /*---------------*/
    .m-dashboard li {
        width: 100%;
        margin: 5px 0;
    }
    .m-dashboard>li>div>div:last-child.col-lg-4 {
        text-align: center;
    }
    .m-dashboard>li>div>div:last-child>.btn {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .m-dashboard .upgrade-pl .upgrade-ly {
        padding: 0 10px;
    }
    .wrap-rd .btn {
        height: 30px;
    }
    ul.list-group-1-4x>li {
        width: 100%;
    }
    .plan-detail-wrap>p>a {
        width: 100%;
        margin-bottom: 10px;
    }
    #modal_plan,
    #modal_cancel_plan {
        padding-right: 0 !important;
    }
    .col-lg-2-5 {
        width: 100%;
    }
    .col-lg-2-5>div,
    .col-lg-2-5 .b-a {
        border: 1px solid #dee5e7;
    }
    .m-dashboard {
        max-width: 380px;
    }
    .bg-login {
        background-size: auto 110%;
    }
    .chart-revenue-header {}
    .form-control,
    .search-bar .btn-sm {
        height: 32px;
    }
    .no-pd-l {
        padding-left: 15px;
    }
    .no-pd-r {
        padding-right: 15px;
    }
    .tet-2018>.container {
        background: none;
    }
    .bg-2019 {
        background: #FFF;
    }
    .bg-2019 .left-side,
    .blur-layout {
        display: none;
    }
    .bg-2019>.container {
        position: relative;
        padding: 50px 30px 0;
        width: 100%;
    }
    .p-wrap {
        padding: 10px 10px;
    }
    .app-footer {
        position: relative;
    }
    .panel {
        margin-bottom: 10px;
    }
    .no-pd-left-on-mobile {
        padding-left: 0;
    }
    .mg-l-xs {
        margin-left: 5px !important;
    }
    .mg-r-xs {
        margin-right: 5px !important;
    }
}

@media only screen and (max-width: 1024px) {
    .elessar-rangebar {
        height: 20px;
        line-height: 20px;
        margin-top: 10px;
    }
    .elessar-range {
        height: 20px;
    }
    .elessar-handle {
        height: 30px;
        width: 30px;
    }
    .modal-footer {
        padding-bottom: 50px;
    }
}


/*=============== FOR RETINA DISPLAY ================*/

@media only screen and ( -webkit-min-device-pixel-ratio: 1.3),
only screen and ( min--moz-device-pixel-ratio: 1.3),
only screen and ( -o-min-device-pixel-ratio: 2.6/2),

/* returns 1.3, see Dev.Opera */

only screen and ( min-device-pixel-ratio: 1.3),
only screen and ( min-resolution: 124.8dpi),
only screen and ( min-resolution: 1.3dppx) {
    .tab-setting .nav-tabs>li>a.ti-medical {
        background-image: url(../img/ms-6@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-gallery {
        background-image: url(../img/ms-5@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-op-hour {
        background-image: url(../img/ms-4@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-description {
        background-image: url(../img/ms-3@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-info {
        background-image: url(../img/ms-2@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-account {
        background-image: url(../img/ms-1@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-merchant {
        background-image: url(../img/bs-1@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-branch {
        background-image: url(../img/bs-2@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-staff {
        background-image: url(../img/bs-3@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-customer {
        background-image: url(../img/bs-4@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-service {
        background-image: url(../img/bs-5@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-package {
        background-image: url(../img/pk-1@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-retail {
        background-image: url(../img/pk-2@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-appointment {
        background-image: url(../img/ap-1@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-redemption {
        background-image: url(../img/pm-3@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-1st-deal {
        background-image: url(../img/pm-2@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-time-deal {
        background-image: url(../img/pm-1@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-calendar {
        background-image: url(../img/cl-1@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-message {
        background-image: url(../img/cl-4@2x.png);
        background-size: 35px;
    }
    .tab-setting .nav-tabs>li>a.ti-list {
        background-image: url(../img/cl-2@2x.png);
        background-size: 32px;
    }
    .loading {
        background-image: url(../img/loading@2x.gif);
        background-size: 100px auto;
        background-position: center 40px;
    }
    .loading-abs {
        background-image: url(../img/loading@2x.gif);
        background-size: 100px auto;
    }
}

.medical_tab_list_details {
    display: none;
}

.medical_tab_list_details.active {
    display: block;
}

#notifications {
    cursor: pointer;
    position: fixed;
    right: 0px;
    z-index: 9999;
    top: 0px;
    margin-top: 55px;
    margin-right: 15px;
    max-width: 300px;
}

.alert-notification {
    margin-bottom: 10px;
}

.payment-value {
    width: calc(100% - 12px);
    text-align: right !important;
    background-color: transparent !important;
    border: none !important;
}

.payment-value:disabled {
    cursor: not-allowed;
}

.payment-btn {
    cursor: pointer;
}

.invisibile {
    visibility: hidden;
}

.visibile {
    visibility: visible;
}

.super_visible {
    visibility: visible!important;
}

.text-line-through {
    text-decoration-line: line-through;
}

.icon-blink {
    -webkit-animation: up-right 2s infinite;
    -moz-animation: up-right 2s infinite;
    -o-animation: up-right 2s infinite;
    animation: up-right 2s infinite;
}

.progress-button {
    position: relative;
    display: inline-block;
    text-align: center;
    margin-bottom: 15px;
}

.progress-button button {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-radius: 40px;
    background: transparent;
    color: #abd373;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}

.progress-button i {
    line-height: 1.42857143 !important;
}

.progress-button svg.progress-circle path {
    stroke: #abd373;
    stroke-width: 3;
    opacity: 0;
    fill: none;
}

.progress-button svg {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}

.text-overflow-el {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.spinner {
    height: 60px;
    width: 60px;
    margin: auto;
    display: flex;
    position: absolute;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0, 174, 239, .15);
    border-right: 6px solid rgba(0, 174, 239, .15);
    border-bottom: 6px solid rgba(0, 174, 239, .15);
    border-top: 6px solid rgba(0, 174, 239, .8);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    cursor: pointer;
}

.box-booking-wrap {
    width: 100%;
    overflow: auto;
}

.box-booking {
    min-width: 960px;
}

.box-booking-col {
    min-width: 300px;
}

.m-r-md {
    margin-right: 15px;
}

#popup_notify_brand_app .modal-backdrop.in {
    opacity: 0.9;
}

.modal {
    overflow-y: auto !important;
}

.custom .nav.nav-tabs {
    background: #7161BA;
    color: white;
    text-align: center;
    /* padding: 20px 0px; */
    padding: 0px;
}

.custom .form-group {
    display: flex;
    align-items: center;
}

.custom .form-group input {
    border: none;
    border-bottom: 1px solid #EEEDF2;
    border-radius: 0;
    background: none;
    box-shadow: unset;
}

.custom .form-group label i {
    color: #7161BA;
}

.custom p {
    text-align: center;
    font-family: 'Quicksand';
    font-size: 13px;
    font-weight: 600;
    color: #7161BA;
}

.custom p>span {
    color: #EA6B1E;
}

.custom .modal-footer {
    text-align: center;
    border: none;
    padding: 0;
    /* padding-bottom: 15px; */
}

.custom .modal-footer .btn {
    background: #7161BA;
    border: none;
    width: max-content;
    padding: 8px 16px;
    font-size: 16px;
    color: white;
    margin-bottom: 10px;
    font-weight: bold;
}

.custom .modal-footer p>a {
    color: #7161BA;
}

.custom .tab-container {
    border-radius: 20px;
    overflow: hidden;
}

.img_moba_mobile {
    width: 100%;
    display: none;
}

.box_over_popup_moba {
    position: absolute;
    /* background: #756bb2; */
    bottom: 5%;
    right: 15px;
    /* height: 2.5%; */
    width: 37%;
    white-space: normal;
    text-align: center;
    font-size: 1.3vw;
    font-weight: 700;
    font-style: italic;
}

.box_over_popup_moba button {
    background: #ea6715;
    border: none;
    padding: 4% 11%;
    box-shadow: -3px 6px 5px #0000004f;
    border-radius: 40px;
}

.box_over_popup_moba p {
    color: #f0945d;
    padding-right: 10%;
    text-align: center;
}

#btn-reset-filter {
    width: fit-content;
}

.left-input {
    padding-left: 0;
}

.filter-btn {
    margin-top: 20px !important;
}

@media (max-width: 800px) {
    .img_moba_mobile {
        display: block !important;
    }
    .modal-body {
        width: auto !important;
    }
}

.pointer_event_none {
    pointer-events: none;
}

.multi-select2-input .select2-choices .select2-search-field input {
    padding-left: 0;
    padding-right: 0;
    font-family: 'Quicksand', sans-serif;
    color: #363f44 !important;
}

@media (max-width: 540px) {
    .left-input {
        padding-left: 15px;
    }
}

ul.timeline {
    list-style-type: none;
    /* position: relative; */
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li {
    margin: 20px 0;
    padding-left: 35px;
}

ul.timeline>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

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

.action-omicall {
    margin-top: 8px !important;
}

.omical_loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #80808066;
    z-index: 99999;
    left: 0;
    top: 0;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: black;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

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

#call_transaction_global .info-cus-omicall h4, #call_callio_transaction_global .info-cus-callio h4, #call_grandstream_transaction_global .info-cus-grandstream h4 {
    color: #288ba8;
}

#call_transaction_global .info-cus-omicall p, #call_callio_transaction_global .info-cus-callio p, #call_grandstream_transaction_global .info-cus-grandstream p {
    font-family: 'Oswald', sans-serif;
    text-indent: 8%;
    color: #808080;
}

#call_transaction_global h1, #call_callio_transaction_global h1, #call_grandstream_transaction_global h1 {
    color: #468499;
}

#call_transaction_global .call-history h4, #call_callio_transaction_global .call-history h4, #call_grandstream_transaction_global .call-history h4 {
    color: #23b7e5;
}

#call_transaction_global .call-history ul, #call_callio_transaction_global .call-history ul, #call_callio_grandstream_global .call-history ul
#call_transaction_global .call-history a, #call_callio_transaction_global .call-history a, #call_grandstream_transaction_global .call-history a {
    font-family: 'Oswald', sans-serif;
    color: #808080
}

.loader-callio {
    width: 30px;
    height: 30px;
    border: 5px solid #3bbad5;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation-loader-callio 1s linear infinite;
}

@keyframes rotation-loader-callio {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.grecaptcha-badge {
    visibility: hidden;
}

.tab-setting.event_30year{
    padding: 60px 0;
    width: 90%;
}

.is-ecommerce-enable-input {
    height: 49.8px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.is-ecommerce-enable-input label { margin-top: 10px; }

.sub_label__field { font-style: italic; font-weight: 700; font-size: .85em; color: red; }

/* Permission modal */
#permissionModal .modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#permissionModal .modal-content .modal-header .modal-title {
    font-weight: 600;
}

#permissionModal .modal-content .modal-header .btn-close {
    border: none;
    background: transparent;
    font-size: 1em;
}

#permissionModal .modal-content .modal-header .btn-close:hover {
    transform: scale(1.2);    
}

#permissionModal .modal-content .modal-body .title {
    text-align: center;
    font-size: 2.1rem;
}

#permissionModal .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#permissionModal .modal-content .modal-body .title {
    text-align: center;
    font-size: 2.1rem;
    padding: 10px 40px;
}

@media only screen and (max-width: 767px) {
    .tab-setting.event_30year{
        padding: unset;
        width: 100%;
    } 
}