div.overlay {
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 100;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    cursor: pointer;
    display: none;
}
div[data-zoom-in="dialog"], div[data-open="dialog"] {
    cursor: pointer !important;
}
div[data-show="dialog"] {
    background: rgba(47, 47, 31, 0.8);
    width: 100%;
    height: 100%;
    z-index: 200;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    display: none;
}
div.dialog-content {
    background: #fefefe;
    position: absolute;
}
.dialog-content-nicer {
    border: 1px solid #e1e1e1;
}
div.dialog-header {
    border-bottom: 1px solid transparent;
    padding: 3px !important;
    text-align: center;
}
div.dialog-header .dialog-header-nicer {
    background: url(../images/backgrounds/headerfinal.jpg) #29A9DF;
    color: white;
    padding: 10px !important;
    border-radius: 0px;
}
.dialog-header .dialog-header-nicer .close {
    opacity: 0.9;
    color: #000;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 2px;
}
.dialog-header .dialog-header-nicer .close:hover {
    opacity: 1;
    color: #000;
    border: 1px solid #e1e1e1;
}
div.dialog-header h1,  div.dialog-header h2,  div.dialog-header h3,  div.dialog-header h4,  div.dialog-header h5,  div.dialog-header h6 {
    margin: 0;
    font-size: 17px !important;
    font-weight: bold;
    text-transform: capitalize;
}
.dialog-body {
    padding: 05px;
}
.dialog-body .dialog-body-nicer {
    padding: 10px;
    border: 1px solid #e1e1e1;
}
.dialog-footer {
    padding: 0 5px;
    margin: 3px 0;
}
.dialog-footer .dialog-footer-nicer {
    padding: 10px;
    border: 1px solid #e1e1e1;
}
.open-customs {
    overflow: hidden;
    padding: 0;
}
div[data-show="alert"] {
    background: black;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    top: 35%;
    text-align: center;
    display: none;
}
div.alert-body {
    padding: 10px 0;
    font-size: 17px;
    color: #a1a1a1;
}
div.alert-footer {
    padding-bottom: 10px;
}
div[data-show="loading"] {
    width: 100%;
    height: 100%;
    z-index: 10000;
    position: fixed;
    background: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
}
div.loading-data {
    font-size: 21px;
    background: white;
    padding: 15px;
    min-width: 300px;
    max-width: 600px;
    position: fixed;
    overflow: hidden;
    line-height: 50px;
    left: 37%;
    top: 35%}
div.loading-data img {
    float: left;
    margin-right: 20px;
}
div[data-show="connection-error"] {
    width: 100%;
    height: 100%;
    z-index: 400;
    position: fixed;
    background: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    overflow-y: scroll;
}
div.connection-error {
    font-size: 21px;
    background: white;
    padding: 15px;
    min-width: 300px;
    max-width: 600px;
    position: fixed;
    overflow: hidden;
    line-height: 50px;
    left: 37%;
    top: 35%}
div.connection-error img {
    float: left !important;
}
.band-connection {
    background: #FFF;
    position: absolute;
    width: 550px;
    left: 30%;
    top: 55px;
    border-radius: 0px;
    padding: 10px;
}
.connection-header {
    border-bottom: 1px solid #e1e1e1;
    padding: 5px 5px;
    text-align: center;
    color: red;
    background: inherit;
    overflow: hidden;
}
.connection-header img {
    float: left !important;
    margin: 0;
    padding: 0;
}
.connection-body {
    padding: 5px 5px;
    color: #333;
    font-size: 16px;
}
.net-error {
    background: inherit;
    padding-left: 20px;
    padding-bottom: 5px;
}
.tip {
    position: relative;
}
.tip:hover:after {
    content: attr(data-tip);
    position: absolute;
    display: block;
    top: -35px;
    max-width: 500px;
    background: black;
    min-width: 200px;
    left: -37%;
    color: white;
    text-decoration: none;
    padding: 5px;
    border-radius: 2px;
    z-index: 500;
    overflow: hidden !important;
    text-align: center !important;
    font-size: 13px;
}
.tip:hover:before {
    content: "";
    position: absolute;
    border-bottom: none;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid black;
    top: -10px;
    left: 40%;
    z-index: 500;
}
.toolkit {
    display: none;
}
.waiting-toolkit {
    font-size: 23px;
    display: none;
}
[block] {
    display: block;
}
div[data-show='search'] {
    background-color: rgba(47,  47,  31,  0.8);
    position: fixed;
    z-index: 110;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    #overflow-y:  scroll;
}
div.search-content {
    background: white;
    width: 400px;
    height: 75%;
    background: white;
    position: absolute;
    top: 50px;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 1px 2px #292929;
    box-shadow: 1px 1px 1px 2px #292929;
}
div.search-body {
}
div.search-content:only-child>.search-body:hover {
    overflow-y: scroll;
    -webkit-transition: all 4ms ease-in-out;
    -moz-transition: all 4ms ease-in-out;
    -ms-transition: all 4ms ease-in-out;
    -o-transition: all 4ms ease-in-out;
    transition: all 4ms ease-in-out;
}
div.search-content-nicer {
    padding: 5px;
    border: 1px solid #e1e1e1;
}
div[data-show="search"] {
    display: none;
    overflow: hidden;
}
div.search-header-nicer {
    border: 1px solid #e1e1e1;
    padding: 5px;
}
div.search-header h1,  div.search-header h2,  div.search-header h3,  div.search-header h4,  div.search-header h5,  div.search-header h6 {
    font-size: 18px !important;
    margin: 0 !important;
    text-align: center;
}
div.search-header {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    color: #29A9DF !important;
}
div.search-body {
    padding: 10px;
    height: 75%;
    overflow: hidden;
}
div.search-footer {
    padding: 5px;
    border-top: 1px solid #e1e1e1;
}
[data-show='mobile-menu'] {
    position: fixed;
    z-index: 95;
    width: 100%;
    background-color: rgba(47, 47, 31, 0.8);
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    display: none;
}
div.mobile-menu-content {
    background: white;
    height: 100%;
    width: 250px;
    position: fixed;
    overflow-y: scroll !important;
}
div[data-show="mobile-menu"] [data-direction="left"] {
    left: 0 !important;
}
div[data-show="mobile-menu"] [data-direction="right"] {
    right: 0 !important;
}
.menu-them-all ul {
    list-style-type: none;
    padding: 0;
}
.menu-them-all ul li .main-menu {
    text-decoration: none !important;
    font-size: 16px;
    color: #4c7574;
    padding: 7px!important;
    display: block;
}
.menu-them-all ul li .main-menu:hover {
    background: #303946;
    color: #29A9DF;
}
div.mobile-menu-content:hover {
}
div.mobile-menu-header {
    height: 50px;
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
}
div.mobile-menu-header h1,  div.mobile-menu-header h2,  div.mobile-menu-header h3,  div.mobile-menu-header h4,  div.mobile-menu-header h5,  div.mobile-menu-header h6 {
    font-size: 19px;
    margin: 0;
    text-align: center;
    line-height: 35px;
    color: #6899d6;
}
div.mobile-menu-body {
    padding: 5px;
}
div.mobile-menu-footer {
    padding: 5px;
}
.notification-manager {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: none;
    display: none;
}
.notification-manager .notification-content {
    background: #303946;
    width: 270px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
    cursor: pointer;
}
.notification-manager .notification-content-nicer {
    margin: 5px;
    padding: 5px 15px 5px 10px;
    border-radius: 3px;
    border: 2px solid white;
}
.notification-manager .notification-title {
    font-size: 19px;
}
.notification-manager .close {
    opacity: 0.8;
    color: white !important;
    padding: 0 3px;
    border: 1px solid transparent;
}
.notification-manager .close:hover {
    opacity: 1;
    color: white !important;
    border: 1px solid white;
    border-radius: 2px;
}
.chat-idicator {
    color: white;
    background-color: #303946;
    z-index: 999;
    position: fixed;
    bottom: 20px;
    right: 0;
    font-size: 30px;
    cursor: pointer;
    display: none;
}
.chat-idicator .chat-idicator-content {
    margin: 4px;
    border: 1px solid white;
    padding: 0px 10px 0px 10px;
}
.form-field {
    display: block;
    border: 1px solid #29A9DF;
    border-radius: 3px;
    position: relative;
    padding: 45px 8px 8px 8px;
    margin: 20px 0 30px 0;
    box-shadow: 1px 1px 2px #a1a1a1 inset;
}
.form-label {
    display: block;
    font-size: 17px;
    background: #29A9DF;
    border: 1px solid #AAA;
    position: absolute;
    padding: 5px 10px;
    color: white;
    top: -15px !important;
    left: 20px;
    margin: 0 !important;
    box-shadow: 3px 3px 15px #BBB;
    border-radius: 2px;
    max-width: 100%}
.password-wizard {
    position: relative;
}
.show-password {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 0px;
}
[data-hide="password"] {
    background: #303946;
    color: white;
    padding: 3px;
    box-shadow: 3px 3px 15px #BBB;
    margin-top: 3px;
    display: none;
    border-radius: 3px;
    border: 1px solid #303946;
}
[data-show="password"] {
    background: inherit;
    color: #303946;
    padding: 3px;
    box-shadow: 3px 3px 15px #BBB;
    margin-top: 3px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
}
.input-hint {
    position: relative;
}
.input-hint ul {
    padding: 0 0 0 4px;
}
[data-hint] {
    position: absolute;
    background: #337AB7;
    color: #fff;
    padding: 7px 7px 7px 15px;
    top: 0px;
    box-shadow: 3px 3px 15px #BBB;
    right: -47%;
    min-height: 50px;
    border-radius: 2px;
    z-index: 9999999999999999;
    width: 200px;
    display: none;
}
[data-hint]:after {
    content: "";
    position: absolute;
    left: -15px;
    border-left: none;
    border-right: 15px solid #337AB7;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    top: 7px;
}
[data-input='select'] {
    border-radius: 0 !important;
    background: url(../q-software/q-icons/ic_keyboard_arrow_down_black_24dp.png) no-repeat right center;
    cursor: pointer;
}
[data-select] {
    position: absolute;
    z-index: 99999999999999999;
    top: 25px;
    display: none;
    max-height: 300px !important;
}
[data-select]:hover {
    overflow-y: scroll;
}
[data-select] ul {
    padding: 5px 0px;
    font-size: 14px;
    list-style-type: none;
    background-color: #FFF;
    background-clip: padding-box;
    border: 1px solid rgba(0,  0,  0,  0.15);
    border-radius: 4px;
    box-shadow: 0px 6px 12px rgba(0,  0,  0,  0.176);
    min-width: 160px;
}
[data-select] ul li {
    cursor: pointer;
    display: block;
    padding: 5px 7px;
    border-bottom: 1px solid #e1e1e1;
}
[data-select] ul li:hover {
    background: #337AB7;
    color: #fff;
}
div[data-show="log"] {
    padding: 10px;
    height: 200px;
    background: none;
    width: 100%;
    position: fixed;
    bottom: 3px;
    right: 0;
    left: 0;
    z-index: 150;
    display: none;
}
div[data-show='log'] .log-content {
    background: #303946;
    height: 180px;
    color: #e1e1a1;
    width: 100%}
div[data-show='log'] .log-content .log-header {
    border-bottom: 2px solid #000;
    padding: 5px;
}
div[data-show='log'] .log-content .log-header h1,  div[data-show='log'] .log-content .log-header h2,  div[data-show='log'] .log-content .log-header h3,  div[data-show='log'] .log-content .log-header h4,  div[data-show='log'] .log-content .log-header h5,  div[data-show='log'] .log-content .log-header h6 {
    margin: 0 0 5px 0 !important;
    font-size: 21px !important;
    text-align: center;
}
div[data-show='log'] .log-content .log-header .close {
    opacity: 0.9;
    color: #e1e1a1;
}
div[data-show='log'] .log-content .log-body {
    background: inherit;
    border-bottom: 2px solid #000;
    padding: 10px;
    overflow-y: scroll;
    height: 65%}
div.context-menu {
    position: absolute;
    background: none;
    padding: 5px;
    min-width: 200px;
    display: none;
    bottom: 0;
    z-index: 99999999999;
}
div.context-menu-content {
    background: white;
    height: ;
    padding: 5px;
    box-shadow: 0.2px 0.1px 25px 5px #a1a1a1 !important;
}
div.context-menu-content li {
    list-style-type: none !important;
}
div.context-menu-content li a {
    text-decoration: none;
    border-bottom: 1px solid #e1e1a1;
    display: block;
    text-transform: capitalize;
    padding: 7px 8px;
    color: #303946;
}
div.context-menu-content li a:hover {
    text-decoration: none !important;
    background-color: #069;
    color: white;
}
div.context-menu-footer {
    color: green;
    font-size: 10px !important;
    padding: 5px 3px;
}
.tabs {
    border: none;
    border-radius: 3px;
    padding: 5px;
}
.tabs .tab-title {
    margin: 0;
    background: #29A9DF;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tabs .tab-title [data-open='tab'] {
    display: inline-block;
    line-height: 50px;
    cursor: pointer;
    height: 50px;
    background: #29A9DF;
    padding: 0 10px;
    color: white;
    margin: 0;
}
.tabs .tab-title [active] {
    font-weight: bolder;
    background: rgba(1, 87, 155 , 1);
    color: #fff !important;
    border-bottom: none;
    position: relative;
    border-radius: 5px;
}
.tabs .tab-title [active]:after {
    content: "";
    position: absolute;
    bottom: -10px;
    border-bottom: none;
    border-top: 10px solid rgba(1, 87, 155 , 1);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    left: 10px;
}
.tabs .tab-body {
    min-height: 100px;
    border-bottom: 1px solid #a1a1a1;
    border-top: 1px solid #a1a1a1;
    border-left: 1px solid #a1a1a1;
    border-right: 1px solid #a1a1a1;
    padding: 25px 8px 7px 8px;
}
.tabs .tab-body .in-active-tab {
    display: none;
}
[data-open="mobile-tab"] {
    display: inline-block;
    line-height: 50px;
    cursor: pointer;
    height: 50px;
    background: #29A9DF;
    padding: 0 10px;
    color: white;
    margin: 0;
}
[data-open="mobile-tab"] span {
    font-weight: bolder;
    font-size: 15px !important;
}
.text-area {
    min-height: 50px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    min-width: 100%}
.text-area:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.holder {
    color: #66afe9;
    font-weight: bold;
}
.list-view {
    display: block !important;
    text-decoration: none !important;
    border: 1px solid #e1e1e1;
    padding: 7px 4px;
    margin-bottom: 10px;
}
.list-view:active {
    background: green;
    color: white;
}
.q-btn {
    display: inline-block;
    padding: 10px 12px;
    text-decoration: none !important;
    font-size: 16px;
    line-height: 1.42857;
    min-width: 160px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: all 200ms ease-in-out;
}
.q-btn:hover {
    font-weight: bold !important;
}
.btn-blue-default {
    border: 1px solid #29A9DF;
    color: #29A9DF;
}
.btn-blue-default:hover {
    background: #29A9DF;
    color: #fff;
}
.btn-green-default {
    border: 1px solid #5CB85C;
    color: #5CB85C;
}
.btn-green-default:hover {
    background: #5CB85C;
    color: #fff;
}
.btn-red-default {
    border: 1px solid #E84C3D;
    color: #E84C3D;
}
.btn-red-default:hover {
    background: #E84C3D;
    color: #fff;
}
.btn-blue {
    background: #337AB7;
    color: #fff;
    border: 1px solid #337AB7;
}
.btn-blue:hover {
    color: #fff;
}
.btn-red {
    background: #E84C3D;
    color: #fff;
    border: 1px solid #E84C3D;
}
.btn-green {
    background: #5CB85C;
    color: #fff;
    border: 1px solid #5CB85C;
}
.close {
    font-size: 21px;
}
.q-separator {
    display: inline-block;
    width: 15%;
    margin: 0;
    border: 1px solid #303946;
}
.nice-input {
    position: relative;
    margin-bottom:  }
.nice-input:after, .nice-input:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 10px;
}
.nice-input:after {
    border-left: 2px solid #3ca2e0;
    left: 0;
}
.nice-input:after {
    border-right: 2px solid #3ca2e0;
    right: 0;
}
.nice-input input[type="text"],  .nice-input input[type="password"] {
    background: inherit;
    border: none;
    color: #3ca2e0 !important;
    height: 45px;
    border: none;
    border-bottom: 2px solid #3ca2e0;
    border-radius: 0;
    font-weight: bold;
    outline: none;
    box-shadow: none !important;
}
.nice-input input[type="text"]:focus,  .nice-input input[type="password"]:focus,  .nice-input input[type="text"]:active,  .nice-input input[type="password"]:active {
    outline: none !important;
    box-shadow: none;
}
.nice-input label {
    position: absolute;
    left: 15px;
    font-weight: lighter;
    pointer-events: none;
    bottom: 10px;
    color: #999;
}
.nice-input input[type="text"]:focus + label,  .nice-input input[type="password"]:focus+label, .has-value+label {
    top: -12px;
    font-weight: bolder;
    color: #3ca2e0;
    font-size: 15px;
}
div[data-show="data"] {
    width: 100%;
    height: 100%;
    background: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    display: none;
}
div[data-show='data'] div.dialog-content {
    box-shadow: 0px 7px 20px -1px #727272;
    background: #727272;
    background: rgba(255,  255,  96,  1);
    color: #000;
    font-weight: bolder !important;
    font-size: 15px !important;
}
div#error div.dialog-content {
    border-top: 4px solid red;
    color: red;
}
div#success div.dialog-content {
    border-top: 4px solid green;
}
div#loading div.dialog-content {
    border-top: 4px solid black;
}
div[data-show='data'] div.dialog-content h3 {
    margin: 5px;
    font-size: 14px !important;
    font-weight: bolder;
}
.notification-padding {
    padding: 5px 5px 3px;
    overflow: auto;
}
.sidebar-fa-image {
    float: left;
}
.sidebar-fa-image img {
    width: 30px;
    height: 30px;
}
.sidebar-fa-text {
    font-size: 12px;
    padding-left: 35px;
}
.notification-row {
    float: left;
    width: 100%;
    border-top: 1px solid #DEE0E3;
}
div[data-show='side-bar'] {
    background: none;
    width: 100%;
    height: 100%;
    z-index: 11;
    overflow-y: scroll !important;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    display: none;
}
div[data-show='side-bar'] .side-bar-content {
    position: absolute;
    width: 280px;
    height: 100%;
    right: 0;
    border-radius: 0px;
    padding: 3px;
    top: 25px;
}
div[data-show='side-bar'] .side-bar-body {
    box-shadow: -3px 0px 3px 1px #a1a1a1;
    background: #fff;
    width: inherit;
    height: inherit;
    z-index: 200;
}
.password-redable {
    position:  relative;
}
.hide-the-password, .show-the-password {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position:  absolute;
    cursor: pointer;
    right:  20px;
    bottom:  -5px;
}
.hide-the-password img, .show-the-password img {
    height:  40px;
}
.hide-the-password {
    display:  none;
}
.form-info {
    background:  #333945;
     border-left:  3px solid #777777;
     padding:  5px;
     color:  #e1e1e1;
}