@import url(https://fonts.googleapis.com/css?family=Roboto:400,500|Sarabun:400,600,700);



body {

    background-repeat: repeat;

    background: #f8f8fa;

    font-family: Roboto, sans-serif;

    color: #5b626b;

    font-size: 14px;

}



html {

    overflow-x: hidden;

    position: relative;

    min-height: 100%;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 10px 0;

    font-family: Sarabun, sans-serif;

    font-weight: 600;

}



p {

    line-height: 1.7;

}



svg {

    max-width: 100%;

}



a {

    color: #6c757d;

}



a:hover {

    outline: 0;

    text-decoration: none;

}



a:active {

    outline: 0;

    text-decoration: none;

}



a:focus {

    outline: 0;

    text-decoration: none;

}



b,

strong {

    font-weight: 500;

}



.m0 {

    margin: 0

}



.p0 {

    padding: 0

}



a {

    color: #009efb

}



a:hover,

a:focus {

    color:#007fca

}



.fleft {

    float: left

}



.fright {

    float: right

}



.wrapper-section {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    padding-top: 40px;

    padding-bottom: 40px;

    background-color:#c3e9ff !important;

    background-color: #f5f5f5;

    height: 100%;

    position: relative;

	overflow:hidden;

}



.wrapper-section:before {

    position: absolute;

    content: '';

    background:url(../../images/app/header-bg-waves.svg);

	background-repeat:no-repeat;

	background-repeat: no-repeat;

    background-size: 100% auto;

    background-position: bottom;

    bottom: -20px;

    left: 0px;

    width: 100%;

    height: 100%;

}



.login-width {

    width: 100%;

    padding: 15px;

    margin: auto;

    background: -webkit-linear-gradient(top, #007fca, #009efb);

    background: -o-linear-gradient(top, #007fca, #009efb);

    background: -moz-linear-gradient(top, #007fca, #009efb);

    background: linear-gradient(top, #007fca, #009efb);

    padding: 55px 55px 37px 55px;

    border-radius: 10px;

}



.login-section {}



.logo-img {

    text-align: center;

}



.sign-txt {

    font-weight: 400;

    color: #ffffff;

    text-align: center;

}



.login-section input[type="email"] {

    margin-bottom: 20px;

}



.login-section .form-control:focus {

    z-index: 2;

}





.login-section .form-control {

    position: relative;

    box-sizing: border-box;

    height: auto;

    padding: 10px;

    font-size: 16px;

}



.login-section .checkbox {

    font-weight: 400;

    color: #ffffff;

}



.login-section p {

    color: #ffffff;

}



.login-section label {

    display: inline-block;

    margin-bottom: .5rem;

}

.with-errors{ color: #ff0000 !important; }

.with-errors ul li{ color: #ff0000 !important; }

.wrap-input100 input {

    outline: none;

    border: none;

}



.wrap-input100 input:focus {

    border-color: transparent !important;

}



.wrap-input100 input:focus::-webkit-input-placeholder {

    color: transparent;

}



.wrap-input100 input:focus:-moz-placeholder {

    color: transparent;

}



.wrap-input100 input:focus::-moz-placeholder {

    color: transparent;

}



.wrap-input100 input:focus:-ms-input-placeholder {

    color: transparent;

}



.wrap-input100 input::-webkit-input-placeholder {

    color: #fff;

}



.wrap-input100 input:-moz-placeholder {

    color: #fff;

}



.wrap-input100 input::-moz-placeholder {

    color: #fff;

}



.wrap-input100 input:-ms-input-placeholder {

    color: #fff;

}



.login100-form {

    width: 100%;

}



.wrap-input100 {

    width: 100%;

    position: relative;

    border-bottom: 2px solid rgba(255, 255, 255, 0.24);

    margin-bottom: 10px;

}



.input100 {

    font-size: 16px;

    color: #fff;

    line-height: 1.2;

    display: block;

    width: 100%;

    height: 45px;

    background: transparent;

    padding: 0 5px 0 38px;

}



.focus-input100 {

    position: absolute;

    display: block;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

}



.focus-input100::before {

    content: "";

    display: block;

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;



    -webkit-transition: all 0.4s;

    -o-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;



    background: #fff;

}



.focus-input100::after {

    font-size: 22px;

    color: #fff;

    background: url(../../images/app/user-512.svg);

    background-size:90% 90%;

    background-repeat: no-repeat;

    background-position: center;

    content: '';

    display: block;

    width: 10%;

    height: 38%;

    position: absolute;

    top: 14px;

    left: 0px;

    padding-left: 5px;

    -webkit-transition: all 0.4s;

    -o-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}



.focus-input1001::after {

    font-size: 22px;

    color: #fff;

    background: url(../../images/app/lock.svg);

    background-size:90% 90%;

    background-repeat: no-repeat;

    background-position: center;

    content: '';

    display: block;

    width: 10%;

    height: 38%;

    position: absolute;

    top: 14px;

    left: 0px;

    padding-left: 5px;

    -webkit-transition: all 0.4s;

    -o-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}



.input100:focus {

    padding-left: 5px;

}



.input100:focus + .focus-input100::after {

    top: -22px;

    font-size: 18px;

}



.input100:focus + .focus-input100::before {

    width: 100%;

}



.has-val.input100 + .focus-input100::after {

    top: -22px;

    font-size: 18px;

}



.has-val.input100 + .focus-input100::before {

    width: 100%;

}



.has-val.input100 {

    padding-left: 5px;

}



.contact100-form-checkbox {

    padding-left: 5px;

    padding-top: 5px;

    padding-bottom: 35px;

}



.input-checkbox100 {

    display: none;

}



.label-checkbox100 {

    font-size: 13px;

    color: #fff;

    line-height: 1.2;



    display: block;

    position: relative;

    padding-left: 26px;

    cursor: pointer;

}



.label-checkbox100::before {

    content: "";

    font-size: 13px;

    color: transparent;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: center;

    align-items: center;

    position: absolute;

    width: 16px;

    height: 16px;

    border-radius: 2px;

    background: #fff;

    left: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

}



.input-checkbox100:checked + .label-checkbox100::before {

    color: #555555;

    background-image: url(../../images/app/arrow-remember.svg);

    background-repeat: no-repeat;

    background-size: 70% 70%;

    background-position: center;

}



.container-login100-form-btn {

    width: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.login100-form-btn {

    font-size: 16px;

    color: #000000;

    line-height: 1.2;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 20px;

    min-width: 48%;

    height: 43px;

    border-radius:0px;

    border: 1px solid #ffffff;

    background: #ffffff;

    position: relative;

    z-index: 1;

    -webkit-transition: all 0.4s;

    -o-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

	margin:0px auto;

}





.login100-form-btn:hover {

    color: #000000;

    background:#f5f5f5;

    border-color: #f5f5f5;

}



.login100-form-btn:hover:before {

    opacity: 0;

}





@media (max-width: 576px) {

    .wrap-login100 {

        padding: 55px 15px 37px 15px;

    }

}



.validate-input {

    position: relative;

}



.alert-validate::before {

    content: attr(data-validate);

    position: absolute;

    max-width: 70%;

    background-color: #fff;

    border: 1px solid #c80000;

    border-radius: 2px;

    padding: 4px 25px 4px 10px;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

    right: 0px;

    pointer-events: none;

    color: #c80000;

    font-size: 13px;

    line-height: 1.4;

    text-align: left;

    visibility: hidden;

    opacity: 0;

    -webkit-transition: opacity 0.4s;

    -o-transition: opacity 0.4s;

    -moz-transition: opacity 0.4s;

    transition: opacity 0.4s;

}



.alert-validate::after {

    content: "\f12a";

    font-family: FontAwesome;

    font-size: 16px;

    color: #c80000;



    display: block;

    position: absolute;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

    right: 5px;

}



.alert-validate:hover:before {

    visibility: visible;

    opacity: 1;

}



@media (max-width: 992px) {

    .alert-validate::before {

        visibility: visible;

        opacity: 1;

    }

}









.main-title {

    border-bottom: 1px solid #f1f1f1;

    padding-bottom: 20px;

    color: #009efb;

    text-transform: uppercase;

    font-size: 26px;

    margin-bottom: 30px;

}



.container-alt {

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px;

    padding-right: 15px;

}



#wrapper {

    height: 100%;

    width: 100%;

}



.slimScrollDiv {

    height: auto !important;

}



.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {

    background-color: #009efb;

}



.social-links li a {

    border-radius: 50%;

    display: inline-block;

    height: 30px;

    line-height: 30px;

    width: 30px;

    text-align: center;

}



.dropdown-menu {

    padding: 4px 0;

    font-size: 14px;

    -webkit-box-shadow: 0 0 13px 0 rgba(236, 236, 241, .44);

    box-shadow: 0 0 13px 0 rgba(236, 236, 241, .44);

    background-color: #fff;

    border-color: #e9ecef;

    margin: 0;

}



.dropdown-item {

    background-color: #fff;

    padding: .55rem 1.5rem;

}



.dropdown-item:active,

.dropdown-item:hover {

    background-color: #f8f9fa;

    color: #2a3142;

}



.dropdown-item.active,

.dropdown-item:active {

    background-color: #f8f9fa;

    color: #2a3142;

}



.breadcrumb > li + li:before {

    padding: 0 5px;

    color: #9ca8b3;

    content: "\f105" !important;

    font-family: 'Font Awesome 5 Free';

    font-weight: 900;

}



.blockquote {

    padding: 10px 20px;

    margin-bottom: 20px;

    border-left: 4px solid #e9ecef;

}



.blockquote-reverse {

    border-left: 0;

    border-right: 4px solid #e9ecef;

    text-align: right;

}



.bg-primary {

    background-color: #009efb !important;

}



.bg-success {

    background-color: #02a499 !important;

}



.bg-info {

    background-color: #38a4f8 !important;

}



.bg-warning {

    background-color: #f8b425 !important;

}



.bg-danger {

    background-color: #ec4561 !important;

}



.bg-muted {

    background-color: #9ca8b3 !important;

}



.bg-white {

    background-color: #fff !important;

}



.text-white {

    color: #fff !important;

}



.text-danger {

    color: #ec4561 !important;

}



.text-muted {

    color: #9ca8b3 !important;

}



.text-primary {

    color: #009efb !important;

}



.text-warning {

    color: #f8b425 !important;

}



.text-success {

    color: #02a499 !important;

}



.text-info {

    color: #38a4f8 !important;

}



.text-dark {

    color: #2a3142 !important;

}



.badge {

    font-weight: 500;

}



.badge-primary {

    background-color: #009efb;

}



.badge-success {

    background-color: #02a499;

}



.badge-info {

    background-color: #38a4f8;

}



.badge-warning {

    background-color: #f8b425;

    color: #fff;

}



.badge-danger {

    background-color: #ec4561;

}



.badge-dark {

    background-color: #2a3142;

}



dt {

    font-weight: 500;

}



.spinner-border,

.spinner-grow {

    margin-right: 10px;

    margin-top: 10px;

}



.custom-control-input:checked ~ .custom-control-label:before {

    border-color: #009efb;

    background-color: #009efb;

}



.p-0 {

    padding: 0;

}



.p-t-10 {

    padding-top: 10px;

}



.p-b-10 {

    padding-bottom: 10px;

}



.m-0 {

    margin: 0;

}



.m-r-5 {

    margin-right: 5px;

}



.m-r-10 {

    margin-right: 10px;

}



.m-r-15 {

    margin-right: 15px;

}



.m-l-10 {

    margin-left: 10px;

}



.m-l-15 {

    margin-left: 15px;

}



.m-t-5 {

    margin-top: 5px;

}



.m-t-10 {

    margin-top: 10px;

}



.m-t-15 {

    margin-top: 15px;

}



.m-t-20 {

    margin-top: 20px;

}



.m-t-30 {

    margin-top: 30px;

}



.m-t-40 {

    margin-top: 40px;

}



.m-b-5 {

    margin-bottom: 5px;

}



.m-b-10 {

    margin-bottom: 10px;

}



.m-b-15 {

    margin-bottom: 15px;

}



.m-b-20 {

    margin-bottom: 20px;

}



.m-b-30 {

    margin-bottom: 30px;

}



.w-30 {

    max-width: 30px;

}



.w-xs {

    min-width: 80px;

}



.w-sm {

    min-width: 95px;

}



.w-md {

    min-width: 110px;

}



.w-lg {

    min-width: 140px;

}



.l-h-23 {

    line-height: 23px;

}



.l-h-34 {

    line-height: 34px;

}



.font-12 {

    font-size: 12px;

}



.font-14 {

    font-size: 14px;

}



.font-16 {

    font-size: 16px;

}



.font-18 {

    font-size: 18px;

}



.font-20 {

    font-size: 20px;

}



.font-24 {

    font-size: 24px;

}



.font-30 {

    font-size: 30px;

}



.thumb-sm {

    height: 32px;

    width: 32px;

}



.thumb-md {

    height: 48px;

    width: 48px;

}



.thumb-lg {

    height: 88px;

    width: 88px;

}



.font-500 {

    font-weight: 500;

}



.font-600 {

    font-weight: 600;

}



.header-title {

    font-size: 16px;

}



.waves-effect {

    position: relative;

    cursor: pointer;

    display: inline-block;

    overflow: hidden;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}



.waves-effect .waves-ripple {

    position: absolute;

    border-radius: 50%;

    width: 100px;

    height: 100px;

    margin-top: -50px;

    margin-left: -50px;

    opacity: 0;

    background: rgba(0, 0, 0, .2);

    background: radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);

    -webkit-transition: all .5s ease-out;

    transition: all .5s ease-out;

    -webkit-transition-property: -webkit-transform, opacity;

    -webkit-transition-property: opacity, -webkit-transform;

    transition-property: opacity, -webkit-transform;

    transition-property: transform, opacity;

    transition-property: transform, opacity, -webkit-transform;

    -webkit-transform: scale(0) translate(0, 0);

    transform: scale(0) translate(0, 0);

    pointer-events: none;

}



.waves-effect.waves-light .waves-ripple {

    background: rgba(255, 255, 255, .4);

    background: radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%);

}



.waves-effect.waves-classic .waves-ripple {

    background: rgba(0, 0, 0, .2);

}



.waves-effect.waves-classic.waves-light .waves-ripple {

    background: rgba(255, 255, 255, .4);

}



.waves-notransition {

    -webkit-transition: none !important;

    transition: none !important;

}



.waves-button,

.waves-circle {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);

}



.waves-button,

.waves-button-input,

.waves-button:hover,

.waves-button:visited {

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    border: none;

    outline: 0;

    color: inherit;

    background-color: rgba(0, 0, 0, 0);

    font-size: 1em;

    line-height: 1em;

    text-align: center;

    text-decoration: none;

    z-index: 1;

}



.waves-button {

    padding: .85em 1.1em;

    border-radius: .2em;

}



.waves-button-input {

    margin: 0;

    padding: .85em 1.1em;

}



.waves-input-wrapper {

    border-radius: .2em;

    vertical-align: bottom;

}



.waves-input-wrapper.waves-button {

    padding: 0;

}



.waves-input-wrapper .waves-button-input {

    position: relative;

    top: 0;

    left: 0;

    z-index: 1;

}



.waves-circle {

    text-align: center;

    width: 2.5em;

    height: 2.5em;

    line-height: 2.5em;

    border-radius: 50%;

}



.waves-float {

    -webkit-mask-image: none;

    -webkit-box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12);

    box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12);

    -webkit-transition: all .3s;

    transition: all .3s;

}



.waves-float:active {

    -webkit-box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3);

    box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3);

}



.waves-block {

    display: block;

}



.metismenu {

    padding: 0;

}



.metismenu ul {

    padding: 0;

}



.metismenu ul li {

    list-style: none;

}



.submenu li a {

    padding: 8px 20px 8px 10px;

    color: #8699ad !important;

    display: block;

    -webkit-transition: all .5s;

    transition: all .5s;

	cursor: pointer;

}



.submenu li a:focus {

    background-color: left-bar;

}



.submenu li a:hover {

    background-color: #333547;

    color: rgba(255, 255, 255, .8);

}



.submenu > li > a {

    padding-left: 50px;

}



.submenu li.mm-active > a {

    color: #b4c9de;

    background-color: #333547;

}



.topbar {

    left: 0;

    position: fixed;

    right: 0;

    top: 0;

    z-index: 999;

}



.topbar .topbar-left {

    background: #333547;

    float: left;

    text-align: center;

    height: 50px;

    position: relative;

    width: 240px;

    z-index: 1;

}



.topbar .topbar-left .logo {

    line-height: 50px;

}



.topbar .topbar-left .logo i {

    display: none;

}



.navbar-custom {

    background-color: #009efb;

    border-radius: 0;

    margin-bottom: 0;

    padding: 0 10px 0 0;

    margin-left: 240px;

    min-height: 50px;

}



.navbar-custom .nav-link {

    padding: 0 4px;

}



.navbar-custom .navbar-right .dropdown-toggle:after {

    content: initial;

}



.logo {

    color: #2a3142 !important;

    font-size: 20px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.logo span span {

    color: #009efb;

}



.side-menu {

    width: 240px;

    z-index: 10;

    background: #333547;

    bottom: 0;

    margin-top: 0;

    padding-bottom: 30px;

    position: fixed;

    top: 50px;

}



.side-menu .waves-effect .waves-ripple {

    background-color: rgba(51, 53, 71, .4);

}



.enlarged .side-menu {

    position: absolute;

}



.content-page {

    margin-left: 240px;

    overflow: hidden;

}



.content-page .content {

    padding: 0 15px 10px 15px;

    margin-top: 80px;

    margin-bottom: 50px;

}



.button-menu-mobile {

    border: none;

    color: #525f80;

    display: inline-block;

    height: 45px;

    width: 60px;

    background-color:transparent;

    font-size: 24px;

    background: none;

}



#sidebar-menu > ul > li > a {

    color: #8699ad;

    display: block;

    padding: 12.5px 25px;

    font-size: 15.7px;

    position: relative;

    -webkit-transition: all .5s;

    transition: all .5s;

    font-family: Sarabun, sans-serif;

}



#sidebar-menu > ul > li > a:active,

#sidebar-menu > ul > li > a:focus,

#sidebar-menu > ul > li > a:hover {

    color: #b4c9de;

    text-decoration: none;

}



#sidebar-menu > ul > li > a > span {

    vertical-align: middle;

    margin-left: 7px;

}



#sidebar-menu {

    padding-top: 10px;

}



#sidebar-menu .badge {

    margin-top: 7px;

}



#sidebar-menu li.mm-active .menu-arrow i {

    -webkit-transform: rotate(90deg);

    transform: rotate(90deg);

}



#sidebar-menu ul li a i {

    vertical-align: middle;

    font-size: 14.7px;

    width: 20px;

    display: inline-block;

}



#sidebar-menu > ul > li > a.mm-active {

    color: #b4c9de !important;

    background-color: #383b4e;

}



.menu-title {

    padding: 12px 20px !important;

    letter-spacing: 1px;

    font-size: 10px;

    font-weight: 500;

    text-transform: uppercase;

    color: #b4bfcc;

}



.enlarged .slimScrollDiv {

    overflow: inherit !important;

}



.enlarged .slimScrollBar {

    visibility: hidden;

}



.enlarged #wrapper .navbar-custom {

    margin-left: 70px;

}



.enlarged #wrapper #sidebar-menu .badge,

.enlarged #wrapper #sidebar-menu .menu-arrow,

.enlarged #wrapper #sidebar-menu .menu-title {

    display: none !important;

}



.enlarged #wrapper #sidebar-menu .mm-collapse.mm-show {

    display: none;

}



.enlarged #wrapper #sidebar-menu .nav.mm-collapse {

    height: inherit !important;

}



.enlarged #wrapper #sidebar-menu ul ul {

    margin-top: -2px;

    padding-bottom: 5px;

    padding-top: 5px;

    z-index: 9999;

    background-color: #333547;

}



.enlarged #wrapper .left.side-menu {

    width: 70px;

    z-index: 5;

}



.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a {

    padding: 15px 20px;

    min-height: 56px;

}



.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:active,

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:focus,

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:hover {

    color: #fff !important;

    background-color: #2e2f40;

}



.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a i {

    font-size: 18px;

    margin-left: 5px;

    margin-right: 20px !important;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li {

    position: relative;

    white-space: nowrap;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > a {

    position: relative;

    width: 260px;

    color: #009efb !important;

    background-color: #2e2f40;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > ul {

    display: block;

    left: 70px;

    position: absolute;

    width: 190px;

    height: auto !important;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > ul a {

    -webkit-box-shadow: none;

    box-shadow: none;

    padding: 8px 20px;

    position: relative;

    width: 190px;

    z-index: 6;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > ul a:hover {

    color: #fff;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover a span {

    display: inline;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li:hover > ul {

    display: block;

    left: 190px;

    margin-top: -36px;

    position: absolute;

    width: 190px;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li > a span.float-right {

    -ms-transform: rotate(270deg);

    -webkit-transform: rotate(270deg);

    position: absolute;

    right: 20px;

    top: 12px;

    transform: rotate(270deg);

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li.mm-active a {

    color: #fff;

}



.enlarged #wrapper .left.side-menu #sidebar-menu ul > li > a span {

    display:inline-block;

    padding-left: 10px;

}



#sidebar-menu ul li a span.listing-gray {

    vertical-align: middle;

    font-size: 14.7px;

    width: 20px;

    display: inline-block;

}



.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a span.listing-gray {

    font-size: 18px;

    margin-left: 5px;

    margin-right: 20px !important

}



.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a span.dashboard {

    font-size: 18px;

    margin-left: 5px;

    margin-right: 20px !important

}



.enlarged #wrapper #sidebar-menu .badge, .enlarged #wrapper #sidebar-menu .menu-arrow, .enlarged #wrapper #sidebar-menu .menu-title {

    display: none !important;

}



.enlarged #wrapper .left.side-menu .user-details {

    display: none;

}



.enlarged #wrapper .content-page {

    margin-left: 70px;

}



.enlarged #wrapper .footer {

    left: 70px;

}



.enlarged #wrapper .topbar .topbar-left {

    width: 70px !important;

}



.enlarged #wrapper .topbar .topbar-left .logo span {

    display: none;

    opacity: 0;

}



.enlarged #wrapper .topbar .topbar-left .logo i {

    display: block;

    line-height: 50px;

    color: #009efb !important;

}



.enlarged #wrapper #sidebar-menu > ul > li:hover > a.open :after {

    display: none;

}



.enlarged #wrapper #sidebar-menu > ul > li:hover > a.mm-active :after {

    display: none;

}



.footer {

	bottom: 0;

    text-align: center !important;

    padding: 19px 30px 20px;

    position: absolute;

    background-color: #f1f2f5;

    right: 0;

    left: 240px;

    font-family: Sarabun, sans-serif;

}

.dashbord .footer {

	bottom: auto !important;

}



.dropdown-menu-lg {

    width: 300px;

}





.btn {

    border-radius: 3px;

    font-size: 14px;

}



button:focus {

    outline: 0;

}



.btn-sm {

    font-size: 11.66667px;

}



.btn-lg {

    font-size: 16.8px;

}



.btn-blue-grey,

.btn-brown,

.btn-danger,

.btn-dark,

.btn-indigo,

.btn-info,

.btn-lime,

.btn-orange,

.btn-pink,

.btn-primary,

.btn-purple,

.btn-success,

.btn-teal,

.btn-warning {

    color: #fff;

}



.btn-primary {

    background-color: #009efb;

    border: 1px solid #009efb;

}



.btn-outline-primary.active,

.btn-outline-primary:active,

.btn-outline-primary:hover,

.btn-outline-primary:not([disabled]):not(.disabled).active,

.btn-outline-primary:not([disabled]):not(.disabled):active,

.btn-primary.active,

.btn-primary.focus,

.btn-primary:active,

.btn-primary:focus,

.btn-primary:hover,

.btn-primary:not(:disabled):not(.disabled).active,

.btn-primary:not(:disabled):not(.disabled):active,

.open > .dropdown-toggle.btn-primary,

.show > .btn-outline-primary.dropdown-toggle,

.show > .btn-primary.dropdown-toggle {

    background-color: #007fca;

    border: 1px solid #007fca;

}



.btn-outline-primary.focus,

.btn-outline-primary:focus,

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,

.btn-primary.focus,

.btn-primary:focus,

.btn-primary:not(:disabled):not(.disabled).active:focus,

.btn-primary:not(:disabled):not(.disabled):active:focus,

.show > .btn-outline-primary.dropdown-toggle:focus,

.show > .btn-primary.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(0, 158, 251, .3);

    box-shadow: 0 0 0 2px rgba(0, 158, 251, .3);

}



.btn-outline-secondary.focus,

.btn-outline-secondary:focus,

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,

.btn-secondary.focus,

.btn-secondary:focus,

.btn-secondary:not(:disabled):not(.disabled).active:focus,

.btn-secondary:not(:disabled):not(.disabled):active:focus,

.show > .btn-outline-secondary.dropdown-toggle:focus,

.show > .btn-secondary.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(42, 49, 66, .3);

    box-shadow: 0 0 0 2px rgba(42, 49, 66, .3);

}



.btn-success {

    background-color: #02a499;

    border: 1px solid #02a499;

}



.btn-outline-success.active,

.btn-outline-success:active,

.btn-outline-success:hover,

.btn-outline-success:not([disabled]):not(.disabled).active,

.btn-outline-success:not([disabled]):not(.disabled):active,

.btn-success.active,

.btn-success.focus,

.btn-success:active,

.btn-success:focus,

.btn-success:hover,

.btn-success:not(:disabled):not(.disabled).active:focus,

.btn-success:not(:disabled):not(.disabled):active:focus,

.open > .dropdown-toggle.btn-success,

.show > .btn-outline-success.dropdown-toggle,

.show > .btn-success.dropdown-toggle,

.show > .btn-success.dropdown-toggle:focus {

    background-color: #028b81;

    border: 1px solid #028b81;

}



.btn-outline-success.focus,

.btn-outline-success:focus,

.btn-outline-success:not(:disabled):not(.disabled).active:focus,

.btn-outline-success:not(:disabled):not(.disabled):active:focus,

.btn-success.focus,

.btn-success:focus,

.btn-success:not(:disabled):not(.disabled).active:focus,

.btn-success:not(:disabled):not(.disabled):active:focus,

.show > .btn-outline-success.dropdown-toggle:focus,

.show > .btn-success.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(2, 164, 153, .3);

    box-shadow: 0 0 0 2px rgba(2, 164, 153, .3);

}



.btn-info {

    background-color: #38a4f8;

    border: 1px solid #38a4f8;

}



.btn-info.active,

.btn-info.focus,

.btn-info:active,

.btn-info:focus,

.btn-info:hover,

.btn-info:not(:disabled):not(.disabled).active,

.btn-info:not(:disabled):not(.disabled):active,

.btn-outline-info.active,

.btn-outline-info:active,

.btn-outline-info:hover,

.btn-outline-info:not([disabled]):not(.disabled).active,

.btn-outline-info:not([disabled]):not(.disabled):active,

.open > .dropdown-toggle.btn-info,

.show > .btn-info.dropdown-toggle,

.show > .btn-outline-info.dropdown-toggle {

    background-color: #1f99f7;

    border: 1px solid #1f99f7;

}



.btn-info.focus,

.btn-info:focus,

.btn-info:not(:disabled):not(.disabled).active:focus,

.btn-info:not(:disabled):not(.disabled):active:focus,

.btn-outline-info.focus,

.btn-outline-info:focus,

.btn-outline-info:not(:disabled):not(.disabled).active:focus,

.btn-outline-info:not(:disabled):not(.disabled):active:focus,

.show > .btn-info.dropdown-toggle:focus,

.show > .btn-outline-info.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(56, 164, 248, .3);

    box-shadow: 0 0 0 2px rgba(56, 164, 248, .3);

}



.btn-warning {

    background-color: #f8b425;

    border: 1px solid #f8b425;

}



.btn-outline-warning.active,

.btn-outline-warning:active,

.btn-outline-warning:hover,

.btn-outline-warning:not([disabled]):not(.disabled).active,

.btn-outline-warning:not([disabled]):not(.disabled):active,

.btn-warning.active,

.btn-warning.focus,

.btn-warning:active,

.btn-warning:focus,

.btn-warning:hover,

.btn-warning:not(:disabled):not(.disabled).active,

.btn-warning:not(:disabled):not(.disabled):active,

.open > .dropdown-toggle.btn-warning,

.show > .btn-outline-warning.dropdown-toggle,

.show > .btn-warning.dropdown-toggle {

    background-color: #f7ac0c;

    border: 1px solid #f7ac0c;

    color: #fff;

}



.btn-outline-warning.focus,

.btn-outline-warning:focus,

.btn-outline-warning:not(:disabled):not(.disabled).active:focus,

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,

.btn-warning.focus,

.btn-warning:focus,

.btn-warning:not(:disabled):not(.disabled).active:focus,

.btn-warning:not(:disabled):not(.disabled):active:focus,

.show > .btn-outline-warning.dropdown-toggle:focus,

.show > .btn-warning.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(248, 180, 37, .3);

    box-shadow: 0 0 0 2px rgba(248, 180, 37, .3);

}



.btn-danger {

    background-color: #ec4561;

    border: 1px solid #ec4561;

}



.btn-danger.active,

.btn-danger.focus,

.btn-danger:active,

.btn-danger:focus,

.btn-danger:hover,

.btn-danger:not(:disabled):not(.disabled).active,

.btn-danger:not(:disabled):not(.disabled):active,

.btn-outline-danger.active,

.btn-outline-danger:active,

.btn-outline-danger:hover,

.btn-outline-danger:not([disabled]):not(.disabled).active,

.btn-outline-danger:not([disabled]):not(.disabled):active,

.open > .dropdown-toggle.btn-danger,

.show > .btn-danger.dropdown-toggle,

.show > .btn-outline-danger.dropdown-toggle {

    background-color: #ea2e4d;

    border: 1px solid #ea2e4d;

}



.btn-danger.focus,

.btn-danger:focus,

.btn-danger:not(:disabled):not(.disabled).active:focus,

.btn-danger:not(:disabled):not(.disabled):active:focus,

.btn-outline-danger.focus,

.btn-outline-danger:focus,

.btn-outline-danger:not(:disabled):not(.disabled).active:focus,

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,

.show > .btn-danger.dropdown-toggle:focus,

.show > .btn-outline-danger.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(236, 69, 97, .3);

    box-shadow: 0 0 0 2px rgba(236, 69, 97, .3);

}



.btn-dark {

    background-color: #2a3142;

    border: 1px solid #2a3142;

    color: #fff;

}



.btn-dark.active,

.btn-dark.focus,

.btn-dark:active,

.btn-dark:focus,

.btn-dark:hover,

.btn-dark:not(:disabled):not(.disabled).active,

.btn-dark:not(:disabled):not(.disabled):active,

.btn-outline-dark.active,

.btn-outline-dark:active,

.btn-outline-dark:hover,

.btn-outline-dark:not([disabled]):not(.disabled).active,

.btn-outline-dark:not([disabled]):not(.disabled):active,

.open > .dropdown-toggle.btn-dark,

.show > .btn-dark.dropdown-toggle,

.show > .btn-outline-dark.dropdown-toggle {

    background-color: #202532;

    border: 1px solid #202532;

    color: #fff;

}



.btn-dark.focus,

.btn-dark:focus,

.btn-dark:not(:disabled):not(.disabled).active:focus,

.btn-dark:not(:disabled):not(.disabled):active:focus,

.btn-outline-dark.focus,

.btn-outline-dark:focus,

.btn-outline-dark:not(:disabled):not(.disabled).active:focus,

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,

.show > .btn-dark.dropdown-toggle:focus,

.show > .btn-outline-dark.dropdown-toggle:focus {

    -webkit-box-shadow: 0 0 0 2px rgba(42, 49, 66, .3);

    box-shadow: 0 0 0 2px rgba(42, 49, 66, .3);

}



.btn-link {

    color: #2a3142;

}



.btn-link:hover {

    color:#009efb;

}



.btn-outline-primary {

    color: #009efb;

    border-color: #009efb;

}



.btn-outline-success {

    color: #02a499;

    border-color: #02a499;

}



.btn-outline-info {

    color: #38a4f8;

    border-color: #38a4f8;

}



.btn-outline-warning {

    color: #f8b425;

    border-color: #f8b425;

}



.btn-outline-danger {

    color: #ec4561;

    border-color: #ec4561;

}



.btn-outline-dark {

    color: #2a3142;

    background-image: none;

    background-color: transparent;

    border-color: #2a3142;

}



.card {

    border: none;

    -webkit-box-shadow: 0 0 13px 0 rgba(236, 236, 241, .44);

    box-shadow: 0 0 13px 0 rgba(236, 236, 241, .44);

    margin-bottom: 30px;

}



@media (min-width:576px) {

    .card-columns {

        -webkit-column-gap: 30px;

        column-gap: 30px;

    }

}



.card-columns .card {

    margin-bottom: 30px;

}





.button-items {

    margin-bottom: -8px;

}



.button-items .btn {

    margin-top: 8px;

    margin-right: 5px;

}



.icon-demo-content {

    text-align: center;

    color: #9ca8b3;

}



.icon-demo-content i {

    display: block;

    font-size: 24px;

    margin-bottom: 16px;

    color: #424d67;

    -webkit-transition: all .4s;

    transition: all .4s;

}



.icon-demo-content .col-md-4 {

    margin-bottom: 30px;

}



.icon-demo-content .col-md-4:hover i {

    color: #009efb;

    -webkit-transform: scale(1.5);

    transform: scale(1.5);

}



.pagination .page-link {

    color: #009efb;

}



.pagination .page-link:focus,

.pagination .page-link:hover {

    -webkit-box-shadow: none;

    box-shadow: none;

    color: #2a3142;

    background-color: #e9ecef;

}



.pagination .page-item.active .page-link {

    background-color: #009efb;

    border-color: #009efb;

}





label {

    font-weight: 500;

}



.form-control {

    font-size: 14px;

}



.form-control {

    display: block;

    width: 100%;

    height: calc(2em + .1rem + 2px);

    padding: .375rem .75rem;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: #495057;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    border-radius: .25rem;

    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}



.form-control:focus {

    border-color: #009efb;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.form-control-sm {

    font-size: .875rem;

}



.custom-select-sm {

    font-size: 75%;

}



.custom-control-input:checked ~ .custom-control-indicator {

    background-color: #009efb;

}



.custom-control-input:focus ~ .custom-control-indicator {

    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #009efb;

    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #009efb;

}



.has-success .form-control {

    border-color: #02a499;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.has-warning .form-control {

    border-color: #f8b425;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.has-error .form-control {

    border-color: #ec4561;

    -webkit-box-shadow: none;

    box-shadow: none;

}





th {

    font-weight: 500;

}



.table > tbody > tr > td,

.table > tfoot > tr > td,

.table > thead > tr > td {

    padding: 15px 12px;

}



.table-hover tbody tr:hover,

.table-striped tbody tr:nth-of-type(odd),

.thead-default th {

    background-color: #f8f9fa;

}



.table td,

.table th {

    vertical-align: middle;

}



.table-vertical td {

    vertical-align: middle;

}



.table-sm td,

.table-sm th {

    padding: .3rem !important;

}



table.focus-on tbody tr.focused th {

    background-color: #009efb;

    color: #fff;

}



table.focus-on tbody tr.focused td {

    background-color: #009efb;

    color: #fff;

}





@media print {



    .footer,

    .left,

    .page-title-box,

    .topbar {

        display: none;

    }



    .wrapper {

        padding: 0;

    }



    .content {

        margin-top: 0;

        padding-top: 0;

    }



    .content-page {

        margin-left: 0;

        margin-top: 0;

    }



    .container-fluid {

        width: 100%;

    }

}



@media (max-width:620px) {

    .mo-mb-2 {

        margin-bottom: 10px;

    }



    .mo-mt-2 {

        margin-top: 10px !important;

    }



    .ex-pages {

        padding: 24px 0;

    }

}



@media (min-width:768px) and (max-width:991px) {

    body {

        overflow-x: hidden;

    }

}



@media (max-width:768px) {

    body {

        overflow-x: hidden;

    }



    .topbar-left {

        width: 50px !important;

    }



    .topbar-left span {

        display: none !important;

    }



    .topbar-left i {

        display: block !important;

        line-height: 45px !important;

    }



    .navbar-custom {

        margin-left: 50px !important;

    }



    .topbar .topbar-left {

        height: 50px;

    }



    .content-page {

        margin-left: 0 !important;

    }



    .content-page .content {

        padding: 0;

    }



    .enlarged .left.side-menu {

        margin-left: -70px;

    }



    .footer {

        left: 0 !important;

    }

}



@media (max-width:480px) {

    .side-menu {

        z-index: 10 !important;

    }



    .button-menu-mobile {

        display: block;

    }



    .navbar-custom {

        margin-left: 0 !important;

    }



    .account-page-full.wrapper-page {

        width: 100%;

        position: relative;

    }

}



@media (max-width:419px) {

    .topbar-left {

        width: 70px !important;

    }



    .content-page {

        margin-left: 70px;

    }



    .enlarged .side-menu.left {

        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1) !important;

        box-shadow: 0 1px 1px rgba(0, 0, 0, .1) !important;

    }



    .topbar-left {

        display: none;

    }

}



@media (min-width:768px) {

    .enlarged .slimscroll-menu {

        overflow: inherit !important;

    }

}



.box-1 {

    border-radius: 5px;

    background-color: #5bc2ff ;

    transition: all ease .5s;

}



.box-1:hover {

    box-shadow:5px 7px 10px 0px #e0e0e0;

}



.box-2 {

    border-radius: 5px;

    background-color: #2cb1ff ;

    transition: all ease .5s;

}



.box-2:hover {

    box-shadow:5px 7px 10px 0px #e0e0e0;

}



.box-3 {

    border-radius: 5px;

    background-color: #009efb ;

    transition: all ease .5s;

}



.box-3:hover {

    box-shadow:5px 7px 10px 0px #e0e0e0;

}



.box-4 {

    border-radius: 5px;

    background-color: #0085d4 ;

    transition: all ease .5s;

}



.box-4:hover {

    box-shadow:5px 7px 10px 0px #e0e0e0;

}



.arrow-img {

    float: left;

    display: flex;

    padding-top: 22px;

}



.arrow-img-1 {

    float: left;

    display: flex;

    padding-top: 22px;

}



.arrow-img-2 {

    float: left;

    display: flex;

    padding-top: 22px;

}



.arrow-img-3 {

    float: left;

    display: flex;

    padding-top: 22px;

}



.chart-box {

    margin: 30px 0px 0px;

}



.title-2 {

    border-bottom: 1px solid #f1f1f1;

    padding-bottom: 20px;

    color: #009efb;

    text-transform: uppercase;

    font-size: 16px;

    margin-bottom: 30px;

}



.notification-list.list-inline-item:not(:last-child) {

    margin-right: 0;

}

.app-search {

    position: relative;

    display: table;

    height: 50px;

}

.app-search .form-group {

    display: table-cell;

    vertical-align: middle;

}

.app-search .form-control, .app-search .form-control:focus {

    border: 1px solid #e0e0ea;

    font-size: 13px;

    height: 34px;

    padding-left: 18px;

    padding-right: 40px;

    margin-right: 16px;

    background: #ffffff;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-radius: 30px;

    width: 200px;

}

.app-search button {

    position: absolute;

    top: 14px;

    right: 26px;

    display: block;

    color: #9ca8b3;

    font-size: 11px;

    border: none;

    background-color: transparent;

}

.notification-list.list-inline-item:not(:last-child) {

    margin-right: 0;

}

.notification-list .nav-link {

    padding: 0 15px;

    line-height: 50px;

    color: #525f80;

    display: block;

}

.waves-effect {

    position: relative;

    cursor: pointer;

    display: inline-block;

    overflow: hidden;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}

.notification-list .noti-icon-badge {

    display: inline-block;

    position: absolute;

    top: 5px;

    right: 9px;

}

.badge-danger {

    background-color: #ec4561;

}

.notification-list .nav-link {

    padding: 0 15px;

    line-height: 50px;

    color: #525f80;

    display: block;

}

.nav-user img {

    margin-top: -3px;

}

.nav-user img {

    height: 30px;

    width: 30px;

}

.notification-item-list {

    max-height: 230px;

}

.notification-list .notify-item {

    padding: 10px 20px;

}

.dropdown-item.active, .dropdown-item:active {

    background-color: #f8f9fa;

    color: #2a3142;

}

.notification-list .notify-item .notify-icon {

    float: left;

    height: 36px;

    width: 36px;

    line-height: 36px;

    text-align: center;

    margin-right: 10px;

    border-radius: 50%;

}

.notification-list .notify-item .notify-details {

    margin-bottom: 0;

    overflow: hidden;

    margin-left: 45px;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-weight: 600;

    font-family: Sarabun,sans-serif;

}

.notification-list .notify-item .notify-details span {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    font-size: 12px;

    font-weight: 400;

    font-family: Roboto,sans-serif;

}



.link-forgot {

    text-align: center;

}



.link-forgot a {

    color: #ffffff;

    display: inline-block;

}



.link-forgot a:hover {

    text-decoration: underline;

}



.label-radio {

    margin-bottom: 0;

    padding-right: 15px;

}



.custom-control {

    position: relative;

    display: inline-block;

    min-height: 1.5rem;

    padding-left: 1.5rem;

    margin-left: 1rem;

    margin-bottom: 0.5rem;

}

.parsley-errors-list.filled {

    display: block;

}

.parsley-errors-list {

    display: none;

    margin: 0;

    padding: 0;

}

.parsley-errors-list>li {

    font-size: 12px;

    list-style: none;

    color: #ec4561;

    margin-top: 5px;

}   



.bootstrap-filestyle .input-group-append .btn-secondary {

    padding:6.5px .75rem ;

}



.custom-control-label::before {

    top: .10rem;

}



.custom-control-label::after {

    top: .10rem;

}



legend {

    background-color: #009efb;

    color: #fff;

    padding: 3px 6px;

    font-size: 18px;

}

fieldset {

    width: 300px;

    border: 1px solid #009efb;

    padding: 15px;

    margin-left: 15px;

}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {

    font-size: 20px;

	color: red;

}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {

    font-size: 20px;

	color: red;

	

}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {

    bottom: 0.6em;

}

div.dataTables_wrapper div.dataTables_length select {width: 60px;min-height: 40px;}



.view-form .custom-control {display: block;}

.form-group label span{ color: #ff0000; }

.card.chart{ border:none; display: block; }

.card-body-chart{ display: block; }

.card-header .heading-elements{

    background-color: inherit;

    position: absolute;

    top: 20px;

    right: 21px;

}

.card-header{ background-color: #ffffff; border-bottom:none; }

.card-header .list-inline{ margin-top:6px; }

.card-header h4	{ border-bottom: 1px solid #f1f1f1;

padding-bottom: 20px;

color: #009efb;

text-transform: uppercase;

font-size: 16px;

margin-bottom: 0px; }

.list-inline, .list-unstyled {

    padding-left: 0;

    list-style: none;

}

ul.list-inline li {

    display: inline-block;

}

.nav-tabs .fa-icons{ margin-right:10px;  }

#chart-container, #chartbar-container, #chart-donut-container, #chart-line-container{ height: 400px; }



.mb-50{ margin-bottom: 50px; }

.mb-20{ margin-bottom: 20px; }



.submenu .fa-icons{ padding: 5px; margin-right:10px; }

.metismenu .waves-effect .arrow-down-gray,.metismenu .waves-effect .arrow-up-gray{ padding: 8px; margin-top: 6px; }

.buttonText{ color: #ffffff !important; }

.menu-title .fa-icons{ margin-right: 5px; }

.input-group-addon{ background: #ddd; padding: 7px 7px; }

.input-group-addon .calender{ padding: 15px; }



.breadcrumb-item+.breadcrumb-item::before {

    display:none;

}



.breadcrumb-item a {

}



.breadcrumb-sec li a:after {

    padding: 7px;

    color: #9ca8b3;

    content: "" !important;

    background: url(../../images/app/breadcrumb-arrow.svg);

    background-repeat: no-repeat;

    background-size: 100% 100%;

	margin-left:.5rem;

}



.input-group-append:focus {

	outline:none;

}



.banner-sec {

    background:url(../../images/app/login-bg2.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    padding:160px 0px 20px;

    position: relative;

    margin-left: -30px;

    width: 107%;

    margin-top: -30px;

}



.banner-sec:before {

	content:'';

	position:absolute;

	background:rgba(255,255,255,);

	top:0px;

	left:0px;

	height:100%;

	width:100%;

}



.breadcrumb-sec-1 {

	position:relative;

	background:rgba(255,255,255,.7);

	width:20%;

}



.breadcrumb-sec-1 li a:after {

    padding: 7px;

    color: #9ca8b3;

    content: "" !important;

    background: url(../../images/app/breadcrumb-arrow.svg);

    background-repeat: no-repeat;

    background-size: 100% 100%;

	margin-left:.5rem;

}



.content-page-1 {

	margin-left:0px;

}



.content-page-1 .footer {left:0px;}



.add-user {

    padding: 4px 4px;

	border:2px solid transparent;

	transition:all ease .6s;

}

.add-user:hover {

	background:none;

	border:2px solid #000000;

}

.help-sec {

    padding: 4px 4px;

	border:2px solid transparent;

	transition:all ease .6s;

}

.help-sec:hover {

	background:none;

	border:2px solid #000000;

}

.border-icon {

    padding: 4px 4px;

	border:2px solid transparent;

	transition:all ease .6s;

}

.border-icon:hover {

	background:none;

	border:2px solid #000000;

}







/*********** Responsive **********/



@media (min-width: 897px) and (max-width: 999px) {



.dashbord .footer {bottom: 0 !important;}

.breadcrumb-sec-1 {width:30%;}



}



@media (max-width: 896px) {



html,body {height:auto !important;}

.dashbord .footer {bottom: 0 !important;}

.breadcrumb-sec-1 {

    position: relative;

    background: rgba(255,255,255,.7);

    width: 30%;

}

.banner-sec {margin-left: -29px; width: 117%; padding: 100px 0px 20px;}





}



@media (max-width: 769px) {



html,body {height:100% !important;}

.banner-sec {margin-left: -19px; width: 117%; padding: 100px 0px 20px;}



}



@media (max-width: 766px) {



html,body {height:auto !important;}

.dashbord .footer {bottom: 0 !important;}

.footer {left: 0 !important; z-index:1;}

.page-link {padding: .5rem 0.65rem;}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {justify-content: center;}

.banner-sec {margin-left: -19px; width: 117%; padding: 100px 0px 20px;}

.breadcrumb-sec-1 {width:40%;}

.tabs-sec .nav-item .nav-link span:nth-child(2) {display:block !important;}

.tabs-sec .nav-item .nav-link {display: block; padding: .5rem 0.3rem; font-size: 13px;}

.button-box button {margin-bottom:15px;}



}









@media (min-width: 319px) and (max-width: 479px) {



html,body {height:100% !important;}

div.dataTables_wrapper div.dataTables_filter input {width: 75%;}

.breadcrumb-sec-1 {width:60%;}

fieldset {width: 100%; border: 1px solid #009efb; padding: 15px; margin-left: 0;}

.button-box button {margin-bottom:15px;}



}





@media screen and (max-device-height: 1280px) and (orientation : portrait){



html,body {height:100% !important;}



}



/* for loader*/

#loader {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 1;

  width: 150px;

  height: 150px;

  margin: -75px 0 0 -75px;

  border: 16px solid #f3f3f3;

  border-radius: 50%;

  border-top: 16px solid #3498db;

  width: 120px;

  height: 120px;

  -webkit-animation: spin 2s linear infinite;

  animation: spin 2s linear infinite;

}



@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}



@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#wrapper {
  display: none;
}

.breadcrumb-sec {
	display:block;
}

.breadcrumb-sec li {
	display:inline-block;
}

.two-links {
	width:7%;
	display:inline-flex;
}

.two-links span {float:none; margin-right:10px; padding:5px 5px;}

.two-links span:nth-child(2) {margin-right:0px;}

.two-links span:hover {border-color:#000;}

.first-width {width:92%; display:inline-block;}

.table{ border-collapse: collapse; border-spacing: 0; width: 100% !important; }

.breadcrumb{ background-color: transparent !important; }

.navbar-custom .breadcrumb{  border:none; padding: 12px 0px 0px 0px; }

.navbar-custom .breadcrumb li a{ color: #ffffff; }

.navbar-custom .breadcrumb li{ color: #ffffff; }

.icon-links{ text-align:right; padding-right: 3%; padding-top: 1%; }