@charset "utf-8";

body {
    font-size: 11px;
    padding-top: 64px;
    background: #EFF3F8 none repeat scroll 0% 0%;
    overflow-x: hidden;
}

html[dir='ltr'] body {
    font-family: Arial,sans-serif !important;
}

html[dir='rtl'] body {
    font-family: 'DroidArabicKufiRegular', sans-serif !important;
}

html[dir='rtl'] .col-lg-pull-2 {
    right: -16.333%;
}

a {
    color: #226bb2;
    text-decoration: none !important;
}

.text-darkgray {
    color: #333;
}

.text-red {
    color: #fc4444;
}

#topnav.navbar-default {
    background: #fff;
    height: 65px;
    border-bottom: 1px solid #e8e8e8;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: none;
    background: #f0f;
}

.mCustomScrollBox {
    background: #226bb2;
}

#wrapper {
    width: 100%;
}

h5 {
    font-weight: bold;
}

label {
    vertical-align: middle;
}

.label-checkbox {
    line-height: 31px;
}

.unbold {
    font-weight: normal;
}

.oops {
    width: 50%;
    margin: 10px auto 55px auto;
}

.inputLabel input {
    width: auto;
    float: right;
}

.inputLabel label {
    line-height: 28px;
    float: right;
    padding-right: 6px;
}

.inputLabel-2 label {
    line-height: 28px;
}

.inputLabel-3 label {
    line-height: 14px;
    display: table-cell;
    height: 30px;
    vertical-align: middle;
}

#page-wrapper {
    padding: 15px;
    min-height: 568px;
    background: #EFF3F8;
}
/*--tree menu--*/
/*.tree {
	font-size: 12px;
}
.tree li {
	font-weight: bold;
}
.tree li ul li {
	font-weight: normal;
}
.tree, .tree ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.tree ul {
	margin-left: 1em;
	position: relative;
}
.tree ul ul {
	margin-left: .5em
}
.tree ul:before {
	content: "";
	display: block;
	width: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-left: 1px solid
}
.tree a:hover {
	border-radius: 4px;
	display: inline-block;
	color: #226bb2;
}
.tree li {
	margin: 0;
	padding: 0 1em;
	line-height: 2em;
	color: #333;
	position: relative
}
.tree ul li:before {
	content: "";
	display: block;
	width: 10px;
	height: 0;
	border-top: 1px solid;
	margin-top: -1px;
	position: absolute;
	top: 1em;
	left: 0
}
.tree ul li:last-child:before {
	background: #fff;
	height: auto;
	top: 1em;
	bottom: 0
}
.indicator {
	margin-right: 5px;
}
html[dir="rtl"] .indicator {
	margin-right: 0;
	margin-left: 5px;
}
html[dir="rtl"] .tree ul li:before {
	right: 0
}
html[dir="rtl"] .tree ul:before {
	right: 0
}
.tree li a {
	text-decoration: none;
	color: #333;
}
.tree li button, .tree li button:active, .tree li button:focus {
	text-decoration: none;
	color: #369;
	border: none;
	background: transparent;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	outline: 0;
}
.tree-box {
	overflow: auto;
	height: 385px;
	width: 100%;
	border: 1px solid #cccccc;
	padding: 12px 6px;
	border-radius: 3px;
}
/*--/tree menu--*/ */ .swap-box {
    overflow: auto;
    min-height: 250px;
    width: 100%;
    border: 1px solid #cccccc;
    padding: 12px 6px;
    border-radius: 3px;
}

.lan-box {
    width: auto;
    margin: 16px 10px 0 0;
    float: left;
}

html[dir="rtl"] .lan-box {
    margin: 16px 0 0 10px;
    float: right;
}

.top-label {
    float: left;
    margin-top: 24px;
    margin-right: 5px;
}

html[dir="rtl"] .top-label {
    float: right;
    margin-right: 0px;
    margin-left: 5px;
}



.dropdown-menu > li > a {
    color: #333;
}

.dropdown-menu > li i {
    color: #666;
}

.navbar-top-links {
    margin-right: 0;
    white-space: nowrap;
    min-width: 407px;
}

    .navbar-top-links li {
        display: inline-block;
    }

        .navbar-top-links li:last-child {
            margin-right: 15px;
        }

        .navbar-top-links li a {
            padding: 15px;
            min-height: 50px;
        }

    .navbar-top-links .dropdown-menu li {
        display: block;
    }

        .navbar-top-links .dropdown-menu li:last-child {
            margin-right: 0;
        }

        .navbar-top-links .dropdown-menu li a {
            padding: 3px 20px;
            min-height: 0;
        }

            .navbar-top-links .dropdown-menu li a div {
                white-space: normal;
            }

    .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts {
        width: 310px;
        min-width: 0;
    }

    .navbar-top-links .dropdown-messages {
        margin-left: 5px;
    }

    .navbar-top-links .dropdown-tasks {
        margin-left: -59px;
    }

    .navbar-top-links .dropdown-alerts {
        margin-left: -123px;
    }

    .navbar-top-links .dropdown-user {
        right: 0;
        left: auto;
    }

.sidebar {
    font-size: 12px;
}

html[dir="rtl"] .sidebar {
    /*font-size: 13px;*/
}

.sidebar .fa {
    font-size: 14px;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
    background: #226bb2;
}

.sidebar ul li ul {
    background: #418dd9;
}

.sidebar ul li {
    border-bottom: 1px solid #4e89c1;
}

.sidebar .nav > li > a:focus, .sidebar .nav > li > a:hover {
    background-color: #fff;
    color: #226bb2;
}

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f067";
}

.sidebar .active > a > .fa.arrow:before {
    content: "\f068";
}

.sidebar .nav-second-level li, .sidebar .nav-third-level li {
    border-bottom: 0 !important;
}

.sidebar a {
    color: #fff;
}

.sidebar .nav-second-level li a {
    padding-left: 37px;
}

.sidebar .nav-third-level li a {
    padding-left: 52px;
}

.sidebar .nav-fourth-level li a {
    padding-left: 65px;
}

.navbar-right .navtopicon {
    font-size: 24px;
}

.navbar-right a {
    color: #a2a8af;
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: #fff;
    color: #777;
}

.navbar-top-links .dropdown-messages {
    width: 200px;
    min-width: 0;
}

.gutter-right-0 {
    padding-right: 0;
}

.gutter-left-0 {
    padding-left: 0;
}

.padding-right-6-lg {
    padding-right: 6px;
}

.padding-left-6-lg {
    padding-left: 0;
}

.padding-top-20 {
    padding-top: 20px;
}

.padding-left-0 {
    padding-left: 0 !important;
}

.padding-right-0 {
    padding-right: 0 !important;
}

html[dir="rtl"] .padding-right-6-lg {
    padding-left: 6px;
    padding-right: 15px;
}

html[dir="rtl"] .padding-left-6-lg {
    padding-right: 6px;
    padding-left: 15px;
}

.gutter-right-6 {
    padding-right: 6px;
}

html[dir="rtl"] .gutter-right-6 {
    padding-left: 6px;
    padding-right: 0px;
}

.gutter-left-6 {
    padding-left: 6px;
}

html[dir="rtl"] .gutter-left-6 {
    padding-left: 0px;
    padding-right: 6px;
}

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

.margin-left-37 {
    margin-left: 37px;
}

.margin-right-5 {
    margin-right: 5px;
}

html[dir="rtl"] .margin-right-5 {
    margin-left: 5px;
    margin-right: 0px;
}

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

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-3 {
    margin-top: 3px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-3 {
    margin-top: 3px;
}


.margin-top-10 {
    margin-top: 10px;
}

.margin-top-50 {
    margin-top: 50px !important;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-0 {
    margin-top: 0px !important;
}

.margin-left-0 {
    margin-left: 0 !important;
}

.margin-left-2 {
    margin-left: 2px !important;
}

html[dir="rtl"] .margin-left-0 {
    margin-left: inherit !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .margin-left-2 {
    margin-left: inherit !important;
    margin-right: 2px !important;
}

.margin-left-4 {
    margin-left: 4px !important;
}

html[dir="rtl"] .margin-left-4 {
    margin-left: inherit !important;
    margin-right: 4px !important;
}

.margin-right-0 {
    margin-right: 0 !important;
}

.margin-right-2 {
    margin-right: 2px !important;
}

html[dir="rtl"] .margin-right-0 {
    margin-right: inherit !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .margin-right-2 {
    margin-right: inherit !important;
    margin-left: 2px !important;
}

.margin-right-4 {
    margin-right: 4px !important;
}

html[dir="rtl"] .margin-right-4 {
    margin-right: inherit !important;
    margin-left: 4px !important;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-bot-0 {
    margin-bottom: 0px !important;
}

.margin-bot-2 {
    margin-bottom: 2px !important;
}

.margin-bot-3 {
    margin-bottom: 3px !important;
}

.margin-bot-5 {
    margin-bottom: 5px;
}

.margin-top-7 {
    margin-top: 7px !important;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-bot-2 {
    margin-bottom: 2px;
}

.margin-bot-3 {
    margin-bottom: 3px;
}

.margin-bot-10 {
    margin-bottom: 10px;
}

/*.margin-bot-15 {
    margin-bottom: 15px;
}

.margin-bot-20 {
    margin-bottom: 20px;
}*/

.linked-dash {
    position: relative;
}

    .linked-dash:before {
        content: '';
        display: block;
        height: 1px;
        width: 8px;
        background-color: #000;
        position: absolute;
        right: 3px;
        top: 15px;
    }

html[dir="rtl"] .linked-dash:before {
    right: unset;
    left: 3px;
}

.breadcrumb {
    padding: 0;
    background: none;
}

    .breadcrumb > .active {
        color: #656565;
    }

    .breadcrumb > li + li::before {
        content: "› ";
    }

.form-control {
    font-size: 12px;
}
.inline-select {
    height: auto !important;
    border: 0 !important;
    padding: 0;
    background: transparent;
}

.icon-1 a {
    color: #aaaaaa;
    font-size: 20px;
    display: inline-block;
    padding: 3px;
}

    .icon-1 a:hover {
        color: #949494;
    }

.check-box-1 span {
    line-height: 36px;
}

.btn-group-1 .btn.btn-circle {
    width: 100%;
}

.btn-lang {
    background: none;
    padding-right: 15px;
    border-right: 1px solid #cccccc;
    color: #999;
    margin-top: -10px;
}

.btn .fa {
    font-size: 14px;
}

.btn {
    font-size: 12px;
}

.btn-darkgray {
    color: #fff;
    background: rgba(109,121,134,1);
    background: -moz-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(109,121,134,1)), color-stop(100%, rgba(79,90,103,1)));
    background: -webkit-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: -o-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: -ms-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: linear-gradient(to bottom, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d7986', endColorstr='#4f5a67', GradientType=0 );
    border-color: #626b76;
}

    .btn-darkgray:hover {
        opacity: .8;
        color: #fff;
    }

.btn-gray {
    border: 1px solid #bcbcbc;
    background: rgba(242,242,242,1);
    background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(218,218,218,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,242,242,1)), color-stop(100%, rgba(218,218,218,1)));
    background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(218,218,218,1) 100%);
    background: -o-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(218,218,218,1) 100%);
    background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(218,218,218,1) 100%);
    background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(218,218,218,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#dadada', GradientType=0 );
}

    .btn-gray:hover {
        opacity: .8;
    }

.bot-buffer {
    margin-bottom: 7px;
}

.panel {
    padding: 12px;
}

.btn.btn-circle {
    border-radius: 50px;
    width: auto;
    padding: 15 16px;
    padding-left: 10px;
    padding-right: 10px;
}

.btn-icon {
    padding: 0px 8px;
    background: none;
    color: #666666;
}

    .btn-icon:hover {
        color: #226bb2;
    }

.btn-switch .fa {
    font-size: 24px;
}

.btn-switch .fa-toggle-off {
    color: #999;
}

.btn-switch .fa-toggle-on {
    color: #226bb2;
}
.image-ctrl > .btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 5px;
    height: 18px;
    border: 0px;
}
    .image-ctrl > .btn > .fa {
        font-size: 12px;
    }

    .over-flow-auto {
        overflow: auto;
    }
html[dir="rtl"] .image-ctrl > .btn {
    right: unset;
    left: 0;
}
    .table-border-outer {
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
}

    .table-border-outer > tr, .table-border-outer > tbody > tr > td {
        border: none;
    }

.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border-bottom: 2px solid #90b5d8;
}

.table > thead > tr > th {
    border-bottom: 2px solid #90b5d8;
}

.table-nonfluid {
    width: auto;
}

.col-del {
    width: 50px;
    text-align: center;
}

.col-serial {
    width: 50px;
    text-align: center;
}

.navbar-default {
    background-color: transparent;
}

.mCSB_inside > .mCSB_container {
    margin-right: 0 !important;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background: #fff;
}

.dropdown-menu {
    font-size: 12px;
}

.modal-dialog {
    width: auto;
    max-width: 800px;
}

    .modal-dialog.modal-md {
        width: 600px;
    }

    .modal-dialog.modal-sm {
        width: 300px;
    }

    .modal-dialog.modal-lg {
        max-width: 900px;
    }

.modal-license-expiry {
    z-index: 10501;
}

.min-width-350 {
    min-width: 350px;
}

.min-width-175 {
    min-width: 175px !important;
}


.width-100 {
    width: 100px;
}

.min-width-100 {
    min-width: 100px !important;
}

.width-110 {
    width: 110px;
}

.min-width-110 {
    min-width: 110px !important;
}

.width-120 {
    width: 120px;
}

.min-width-120 {
    min-width: 120px !important;
}

.width-130 {
    width: 130px;
}

.min-width-130 {
    min-width: 130px !important;
}

.width-140 {
    width: 140px;
}

.min-width-140 {
    min-width: 140px !important;
}

.width-150 {
    width: 150px;
}

.min-width-150 {
    min-width: 150px !important;
}

.width-160 {
    width: 160px;
}

.min-width-160 {
    min-width: 160px !important;
}

.width-170 {
    width: 170px;
}

.min-width-170 {
    min-width: 170px !important;
}

.width-180 {
    width: 180px;
}

.min-width-180 {
    min-width: 180px !important;
}

.width-190 {
    width: 190px;
}

.min-width-190 {
    min-width: 190px !important;
}

.width-200 {
    width: 200px;
}

.min-width-200 {
    min-width: 200px !important;
}

.width-210 {
    width: 210px;
}

.min-width-210 {
    min-width: 210px !important;
}

.width-220 {
    width: 220px;
}

.min-width-220 {
    min-width: 220px !important;
}

.width-230 {
    width: 230px;
}

.min-width-230 {
    min-width: 230px !important;
}

.width-240 {
    width: 240px;
}

.min-width-240 {
    min-width: 240px !important;
}

.width-250 {
    width: 250px;
}

.min-width-250 {
    min-width: 250px !important;
}

.width-260 {
    width: 260px;
}

.min-width-260 {
    min-width: 260px !important;
}

.width-90 {
    width: 90px;
}

.width-30 {
    width: 30px;
}

.width-35 {
    width: 35px;
}

.width-40 {
    width: 40px;
}

.width-45 {
    width: 45px;
}

.width-50 {
    width: 50px;
}

.min-width-50 {
    min-width: 50px !important;
}

.width-60 {
    width: 60px;
}

.min-width-60 {
    min-width: 60px !important;
}

.width-70 {
    width: 70px;
}

.min-width-70 {
    min-width: 70px !important;
}

.width-80 {
    width: 80px;
}

.min-width-80 {
    min-width: 80px !important;
}

.width-400 {
    max-width: 400px;
}

.width-500 {
    max-width: 500px;
}

.width-600 {
    max-width: 600px;
}

.width-670 {
    max-width: 670px;
}

.width-980 {
    max-width: 980px;
}

.width-auto {
    width: auto;
}

.width-100pc {
    width: 100%;
}

.min-width-300 {
    min-width: 300px;
}

.min-width-350 {
    min-width: 350px;
}

.min-width-400 {
    min-width: 400px;
}

.min-width-450 {
    min-width: 450px;
}

.min-width-500 {
    min-width: 500px;
}

/*--RTL Direction--*/


html[dir='rtl'] .col-lg-1, html[dir='rtl'] .col-lg-10, html[dir='rtl'] .col-lg-11, html[dir='rtl'] .col-lg-12, html[dir='rtl'] .col-lg-2, html[dir='rtl'] .col-lg-3, html[dir='rtl'] .col-lg-4, html[dir='rtl'] .col-lg-5, html[dir='rtl'] .col-lg-6, html[dir='rtl'] .col-lg-7, html[dir='rtl'] .col-lg-8, html[dir='rtl'] .col-lg-9 {
    float: right;
}

html[dir='rtl'] .col-xs-2 {
    float: right;
}

html[dir='rtl'] .progress-bar {
    float: right;
}

html[dir='rtl'] .pull-right {
    float: left !important;
}

html[dir='rtl'] .pull-left {
    float: right !important;
}

html[dir='rtl'] .text-right {
    text-align: left !important;
}

html[dir='rtl'] .text-left {
    text-align: right !important;
}

html[dir='rtl'] .mCustomScrollBox {
    direction: rtl;
}

html[dir='rtl'] .sidebar .nav {
    padding-right: 0;
}

html[dir='rtl'] .sidebar .nav-second-level li a {
    padding-right: 37px;
    padding-left: 0;
}

html[dir='rtl'] .sidebar .nav-third-level li a {
    padding-right: 52px;
    padding-left: 0;
}

html[dir='rtl'] .sidebar .nav-fourth-level li a {
    padding-right: 65px;
    padding-left: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
    margin-left: 0px;
}

html[dir='rtl'] .sidebar .arrow {
    float: left;
}

html[dir='rtl'] .fa-angle-right:before {
    content: "\f104";
}

html[dir='rtl'] .sidebar ul li ul li .arrow {
    margin-left: 15px;
}

html[dir='rtl'] .navbar-header {
    float: right;
}

html[dir='rtl'] .navbar-right {
    float: left !important;
}

html[dir='rtl'] .btn-lang {
    padding-left: 15px;
    border-left: 1px solid #CCC;
    padding-right: 0;
    border-right: none;
}

html[dir='rtl'] .input-group .form-control:first-child {
    border-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

html[dir='rtl'] .input-group-btn:last-child > .btn {
    border-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

html[dir='rtl'] .dropdown-menu {
    text-align: right;
    left: inherit;
}

html[dir='rtl'] .navbar-right .dropdown-menu {
    left: 0px;
    right: auto;
}

html[dir='rtl'] .navbar-top-links li:last-child {
    margin-left: 15px;
    margin-right: 0;
}

html[dir='rtl'] .inputLabel input {
    float: left;
}

html[dir='rtl'] .inputLabel label {
    float: left;
    padding-left: 6px;
}

html[dir='rtl'] .navbar-toggle {
    float: left;
    margin-left: 15px;
}

html[dir='rtl'] .dropdown-messages li:last-child a {
    padding-left: 5px !important;
}

html[dir='rtl'] .close {
    float: left;
}

html[dir='rtl'] .gutter-right-0 {
    padding-left: 0;
    padding-right: 15px;
}

html[dir='rtl'] .gutter-left-0 {
    padding-right: 0;
    padding-left: 15px;
}

html[dir='rtl'] .margin-right-15 {
    margin-right: auto;
    margin-left: 15px;
}

html[dir='rtl'] .margin-left-15 {
    margin-left: auto;
    margin-right: 15px;
}

html[dir='rtl'] .margin-left-37 {
    margin-left: auto;
    margin-right: 37px;
}

.margin-left-25 {
    margin-left: 25px;
}

html[dir='rtl'] .margin-left-25 {
    margin-left: 0px;
    margin-right: 25px;
}

html [dir='rtl'] .text-right {
    text-align: left !important;
}

html[dir='rtl'] .text-left {
    text-align: right !important;
}
/*--/RTL Direction--*/
/*--Steps--*/
.bs-wizard {
    margin-top: 25px;
}
/*Form Wizard*/

.bs-wizard {
    padding: 0px 15px 20px 15px;
}

    .bs-wizard > .bs-wizard-step {
        padding: 0;
        position: relative;
    }

        .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
            font-size: 11px;
            font-weight: bold;
            height: 27px;
            display: block;
            padding: 0px 4px;
            word-break: break-all;
        }

        .bs-wizard > .bs-wizard-step > .bs-wizard-dot {
            position: absolute;
            width: 30px;
            height: 30px;
            display: block;
            background: #90b5d8;
            top: 50px;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            border-radius: 50%;
        }

            .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
                content: ' ';
                width: 14px;
                height: 14px;
                background: #226bb2;
                border-radius: 50px;
                position: absolute;
                top: 8px;
                left: 8px;
            }

        .bs-wizard > .bs-wizard-step > .progress {
            position: relative;
            border-radius: 0px;
            height: 8px;
            box-shadow: none;
            margin: 20px 0;
        }

            .bs-wizard > .bs-wizard-step > .progress > .progress-bar {
                width: 0px;
                box-shadow: none;
                background: #90b5d8;
            }

        .bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {
            width: 100%;
        }

        .bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {
            width: 50%;
        }

        .bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {
            width: 0%;
        }

        .bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {
            width: 100%;
        }

        .bs-wizard > .bs-wizard-step.active > .bs-wizard-stepnum {
            color: #226bb2;
        }

        .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
            background-color: #f5f5f5;
        }

            .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {
                opacity: 0;
            }

        .bs-wizard > .bs-wizard-step:first-child > .progress {
            left: 50%;
            width: 50%;
        }

html[dir='rtl'] .bs-wizard > .bs-wizard-step:first-child > .progress {
    right: 50%;
}

.bs-wizard > .bs-wizard-step:last-child > .progress {
    width: 50%;
}

.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot {
    /*pointer-events: none;*/
}

.wizard-panel .radio {
    margin-top: 5px;
    margin-bottom: 0;
}

    .wizard-panel .checkbox input[type=checkbox],
    .wizard-panel .radio input[type=radio] {
        margin: 2px 5px 0 5px;
    }


/*--/Steps--*/
.blue-tooltip + .tooltip > .tooltip-inner {
    background: rgba(109,121,134,1);
    background: -moz-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(109,121,134,1)), color-stop(100%, rgba(79,90,103,1)));
    background: -webkit-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: -o-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: -ms-linear-gradient(top, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    background: linear-gradient(to bottom, rgba(109,121,134,1) 0%, rgba(79,90,103,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d7986', endColorstr='#4f5a67', GradientType=0 );
    border-color: #626b76;
    min-width: 100px;
}

.blue-tooltip + .tooltip > .tooltip-arrow {
    border-bottom-color: #6b7784;
}

.tooltip-left .tooltip-inner {
    text-align: left;
}

html[dir="rtl"] .tooltip-left .tooltip-inner {
    text-align: right;
}

th {
    text-align: center;
}

.table-format-a td {
    padding: 2px;
}

.modal-footer {
    text-align: inherit;
}

.hr2 {
    border-width: 2px 0px 0px;
    border-color: #90B5D8;
}

.heading-box {
    background: #eff3f8;
    font-weight: bold;
    padding: 9px;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    margin-bottom: 11px;
    width: 100%;
}

.heading-field {
    background: #eff3f8;
    color: #1b67b3;
    font-weight: bold;
    padding: 9px;
    padding: 9px 10px 8px 50px;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    margin-bottom: 11px;
    width: 100%;
    border: 1px solid #1b67b3;
    border-radius: 3px;
    background: #f2f5fa;
    position: relative;
}

html[dir="rtl"] .heading-field {
    padding: 9px 50px 8px 10px;
}

.heading-field:before {
    content: "\f0f6";
    font-family: "FontAwesome";
    font-size: 14px;
    font-weight: normal;
    padding-left: 54px;
    color: #fff;
    border-top: 15px solid transparent;
    position: absolute;
    top: 0;
    /* margin-top: -58px; */
    z-index: 1;
    background: #1b67b3;
    width: 30px;
    height: 33px;
    left: 0px;
    padding: 0px;
    text-align: center;
    line-height: 5px;
}

html[dir="rtl"] .heading-field:before {
    left: auto;
    right: 0;
}

.heading-field:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 11px solid #1b67b3;
    position: absolute;
    left: 30px;
    top: 0px;
    z-index: 1;
}

html[dir="rtl"] .heading-field:after {
    left: auto;
    right: 30px;
    border-left: 0px;
    border-right: 11px solid #1b67b3;
}

.heading-field.heading-error {
    color: #c93333;
    border-color: #c93333;
    background: #faf2f2;
}
.heading-field.heading-error:before {
    background-color: #c93333;
    content: "\f05a";
}
.heading-field.heading-error:after {
    border-left-color: #c93333;
}
html[dir="rtl"] .heading-field.heading-error:after {
    border-left: 0px;
    border-right-color: #c93333;
}

.heading-field-boxy {
    background: #eff3f8;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 8px;
    width: 100%;
}
/*=========================================================================
Page Info
=========================================================================*/
.page-info {
    border: 1px solid #94d597;
    background: #fbfcfb;
    color: #333;
}

.page-info:before {
    content: "\f05a";
    background-color: #94d597;
    height: 100%;
}

.page-info:after {
    display: none;
}

.page-info span {
    font-size: 13px;
    color: #111;
}

.page-info ol {
    padding-left: 20px;
    margin-bottom: 0;
}

.page-info ol li {
    line-height: 26px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
}

.page-info ol li::marker {
    font-weight: 700;
}

#tab2, #tab3, #tab4, #tab5, #tab6 {
    display: none;
}
/*--set the min width of page*/
#wrapper {
    min-width: 320px;
}

#topnav {
    min-width: 320px;
}
/*--/set the min width of page*/
.side-btn .input-group-btn:last-child > .btn, .side-btn .input-group-btn:last-child > .btn-group {
    margin-left: 6px;
}

.side-btn .input-group .form-control:first-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.side-btn .input-group-btn:last-child > .btn {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.side-btn .input-group-btn .btn {
    border-radius: 3px !important;
}

html[dir="rtl"] .side-btn .input-group-btn:last-child > .btn, html[dir="rtl"] .side-btn .input-group-btn:last-child > .btn-group {
    margin-left: 0;
    margin-right: 6px;
}

html[dir="rtl"] .side-btn .input-group .form-control:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

html[dir="rtl"] .side-btn .input-group-btn:last-child > .btn {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.navbar-brand {
    display: block;
    /*background: url(../../images/SiteImages/logo-big.gif) no-repeat;*/
    background: url(../../images/SiteImages/smacc-logo.svg) no-repeat;
    width: 122px;
    height: 55px;
    margin-left: 10px;
    margin-top: 5px;
}

html[dir="rtl"] .navbar-brand {
    /*background-position: right;*/
    margin-left: 0px;
    margin-right: 20px;
}

.no-wrap {
    white-space: nowrap;
}
.unwrap {
    white-space: unset;
}

#page-wrapper {
    position: inherit;
    margin: 0 0 0 250px;
    padding: 15px;
    border-left: 1px solid #e7e7e7;
    background: #eff3f8;
}

html[dir='rtl'] #page-wrapper {
    margin: 0px 250px 0px 0px;
}

.sidebar {
    z-index: -1;
    position: fixed;
    width: 250px;
    padding-top: 65px;
    height: 100%;
    float: right;
}

.navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts {
    margin-left: auto;
}

.alert {
    z-index: 9999;
    position: fixed;
    top: 0px;
    width: 50%;
    left: 25%;
    right: 25%;
    text-align: center;
    border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border: 0px solid #000000;
    -webkit-box-shadow: 0px 2px 4px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 4px -4px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 4px -4px rgba(0,0,0,0.75);
}

    .alert .heading {
        font-size: 12px;
        font-weight: bold;
        margin: -12px -12px 5px;
        background: #fff;
        padding: 5px 0;
        display: block;
    }

    .alert .list-item {
        list-style: outside;
        list-style-type: circle;
        float: left;
        display: list-item;
        margin-left: 5px;
        clear: both;
    }

.alert2 {
    position: static;
    border-radius: 4px;
    box-shadow: 0px 2px 4px -4px rgba(0,0,0,0.75);
    padding: 10px;
}

.alert-login {
    border: 0px solid #000;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0px;
    margin: -30px;
    margin-bottom: 30px;
}

.btn-double-line {
    word-break: break-word;
    white-space: unset;
}

.input-group-double-line {
    max-width: 60px;
    white-space: unset;
    word-break: break-word;
    line-height: 14px !important;
    padding: 0 5px !important;
}
.input-group-double-line > span {
    word-break: normal;
}
html[dir='rtl'] .input-group-double-line > span.fontsize11 {
    font-size: 10px !important;
}

html [dir='rtl'] .input-group-addon:last-child {
    border-left: solid #ccc 1px;
    border-right: 0;
}

html[dir='rtl'] .input-group-addon:first-child {
    border-right: solid #ccc 1px;
    border-left: 0;
}

html[dir='rtl'] .input-group .input-group-addon:last-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

html[dir='rtl'] .input-group .input-corners {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.box-border {
    border: 1px solid #cccccc;
    padding: 12px 6px;
}

html[dir='rtl'] .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.radio-spacing div {
    float: left;
    margin-right: 10px;
}

/*.radio-list input+label {
    position: relative;
    top: 4px;
}*/

html[dir='rtl'] .radio-spacing div {
    float: right;
    margin-left: 10px;
    margin-right: 0;
}

.btn-next-back {
    margin-top: 110px;
}

    .btn-next-back .row:last-child button {
        margin-top: 5px;
    }

    .btn-next-back .row:first-child button {
        margin-bottom: 5px;
    }

.textarea-2-lines {
    height: 67px !important;
}

footer {
    background: #ccc;
    padding: 5px;
    padding-left: 270px;
    bottom: 0px;
    position: fixed;
    width: 100%;
    z-index: 9;
}

html[dir='rtl'] footer {
    padding-left: 0px;
    padding-right: 270px;
    bottom: 0px;
    position: fixed;
    width: 100%;
}

footer.login {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    background: #EFF3F8 none repeat scroll 0% 0%;
    color: #999;
    padding-bottom: 20px;
}
/*--login page styles--*/
#login-box {
    margin: 0 auto;
    margin-top: 100px;
    max-width: 450px;
}

    #login-box header {
        border-radius: 10px 10px 0px 0px;
        -moz-border-radius: 10px 10px 0px 0px;
        -webkit-border-radius: 10px 10px 0px 0px;
        border: 0px solid #000000;
        background: rgba(23,114,194,1);
        background: -moz-linear-gradient(top, rgba(23,114,194,1) 0%, rgba(15,95,165,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(23,114,194,1)), color-stop(100%, rgba(15,95,165,1)));
        background: -webkit-linear-gradient(top, rgba(23,114,194,1) 0%, rgba(15,95,165,1) 100%);
        background: -o-linear-gradient(top, rgba(23,114,194,1) 0%, rgba(15,95,165,1) 100%);
        background: -ms-linear-gradient(top, rgba(23,114,194,1) 0%, rgba(15,95,165,1) 100%);
        background: linear-gradient(to bottom, rgba(23,114,194,1) 0%, rgba(15,95,165,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1772c2', endColorstr='#0f5fa5', GradientType=0 );
        padding: 30px;
        text-align: center;
        color: #fff;
        font-size: 20px;
    }

    #login-box section {
        background: #fff;
        border: 1px solid #c8c8c8;
        padding: 30px;
        overflow: auto;
    }

    #login-box .button {
        padding: 10px 0;
        width: 100%;
    }

    #login-box section .forget a {
        color: #999;
    }

.logo-login {
    margin-top: 50px;
}
/*--/login page styles--*/

@media only screen and (min-width:991px) and (max-width: 1299px) {
    .dashboard-box-parent {
        width: 50%;
    }
}


@media only screen and (min-width:991px) and (max-width: 1200px) {
    /*.padding-left-0-lg {
        padding-left: 0;
    }*/

    html[dir='rtl'] .padding-left-0-lg {
        padding-left: 15px;
        padding-right: 15px;
    }

    .advanced-search .padding-left-0-lg {
        padding-left: 15px;
    }

    html[dir='rtl'] .advanced-search .padding-left-0-lg {
        padding-right: 15px;
        padding-left: 0px;
    }

    html[dir='rtl'] .col-sm-push-10 {
        left: -83.3333%;
    }

    .max-width-popup {
        max-width: 85%;
    }
}

@media (min-width: 1200px) {
    html[dir='rtl'] .col-lg-push-10 {
        left: -83.33333333%;
    }
}

@media only screen and (max-width:991px) {
    .gutter-right-0 {
        padding-right: 15px;
    }

    .gutter-left-0 {
        padding-left: 15px;
    }

    .clear-both-sm {
        clear: both;
    }

    /*.tree-box {
	height: 200px;
}*/
    .margin-top-5-sm {
        margin-top: 5px;
    }

    .margin-bot-5-sm {
        margin-bottom: 5px;
    }

    .btn-grup1 div:last-child .pull-right {
        float: left !important;
    }

    html[dir="rtl"] .btn-grup1 div:last-child .pull-right {
        float: right !important;
    }

    .padding-right-6-lg {
        padding-right: 15px;
    }

    .padding-left-6-lg {
        padding-left: 15px;
    }

    html[dir="rtl"] .padding-right-6-lg {
        padding-left: 15px;
    }

    html[dir="rtl"] .padding-left-6-lg {
        padding-right: 15px;
    }

    .padding-left-6-md {
        padding-left: 6px;
    }

    .padding-right-6-md {
        padding-right: 6px;
    }

    .col-lg-6.width-49 {
        width: 49%;
    }

    .navbar-top-links li a {
        padding: 15px 10px;
    }

    .max-width-popup {
        max-width: 85%;
    }

    .modal-xl {
        width: 90%;
    }
}

@media (min-width: 768px) {
    html[dir='rtl'] .col-sm-push-10 {
        left: -83.33333333%;
    }

    .cc-100 {
        min-width: 100px;
    }

        .cc-100 .btn-icon {
            padding: 0 5px;
        }

    .max-width-popup {
        max-width: 63%;
    }
}

@media only screen and (max-width:767px) {
    #page-wrapper {
        position: inherit;
        margin: 0px;
        padding: 15px;
        border-left: none;
    }

    html[dir='rtl'] .col-lg-pull-2 {
        right: 0;
    }

    html[dir='rtl'] #page-wrapper {
        margin: 0px;
    }

    .sidebar {
        z-index: 1;
        position: fixed;
        width: 100%;
        padding-top: 0;
        height: auto;
        float: none;
    }

    .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
    /*--*/
    .navbar-top-links {
        text-align: right;
        height: 50px;
        background: #fff;
    }

    #page-wrapper {
        margin-top: 36px;
    }

    .navbar-right .navtopicon {
        font-size: 16px;
    }

    #topnav.navbar-default {
        height: 60px;
        padding-top: 10px;
    }

    .navbar-brand {
        width: 80%;
    }

    .navbar-brand {
        /*background: url(../../images/SiteImages/logo-small.gif) no-repeat;*/
        background: url(../../images/SiteImages/smacc-logo.svg) no-repeat;
        width: 98px;
        height: 38px;
    }

    .gutter-left-6 {
        padding-left: 15px;
    }

    .gutter-right-6 {
        padding-right: 15px;
    }

    .gutter-left-0 {
        padding-left: 15px;
    }

    html[dir="rtl"] .gutter-left-0 {
        padding-right: 15px;
    }

    top-buffer-xs {
        margin-top: 20px;
    }

    html[dir="rtl"] .navbar-header {
        float: none;
    }

    html[dir="rtl"] .navbar-brand {
        float: right;
    }

    html[dir="rtl"] .navbar-right {
        float: none !important;
    }

    html[dir="rtl"] .navbar-top-links {
        text-align: left;
        padding: 0;
    }

    html[dir="rtl"] .col-lg-1, html[dir="rtl"] .col-lg-2, html[dir="rtl"] .col-lg-3, html[dir="rtl"] .col-lg-4, html[dir="rtl"] .col-lg-5, html[dir="rtl"] .col-lg-6, html[dir="rtl"] .col-lg-7, html[dir="rtl"] .col-lg-8, html[dir="rtl"] .col-lg-9, html[dir="rtl"] .col-lg-10, html[dir="rtl"] .col-lg-11, html[dir="rtl"] .col-lg-12 {
        float: none;
    }

    .gutter-right-0 {
        padding-right: 15px;
    }

    .navbar-top-links li a {
        padding: 13px;
    }
    /*enabling scroll bar on the responsive*/
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
        max-height: 300px;
    }

    .lan-box {
        width: 100px;
        margin: 10px 0 0 15px;
    }

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

    .navbar-top-links {
        min-width: 100px;
    }

    .alert {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: 0px;
        box-shadow: none;
    }

    .btn-next-back {
        margin-top: 10px;
        overflow: auto;
    }

        .btn-next-back .row {
            width: 50%;
            margin: 0 auto;
            float: left;
        }

            .btn-next-back .row:last-child button {
                float: left;
                margin-left: 5px;
                margin-top: 0;
            }

            .btn-next-back .row:first-child button {
                float: right;
                margin-right: 5px;
                margin-bottom: 0;
            }

        .btn-next-back button {
            padding: 10px 20px;
        }

    footer {
        text-align: center;
        padding-left: 5px;
        background-color: #fff;
        border-top: 1px solid #ddd;
        color: #999;
        position: fixed;
        float: left;
        width: 100%;
        padding: 0 15px 0 50px;
    }

    html[dir="rtl"] footer {
        padding: 0 50px 0 15px !important;
    }

    .navbar-top-links {
        width: auto;
    }

    .HeaderTrial {
        left: 12px !important;
        top: 0px !important;
        text-align: center !important;
    }

    html[dir="rtl"] .HeaderTrial {
        right: 12px !important;
        text-align: right !important;
    }

    #login-box {
        margin: 100px auto 20px auto;
        max-width: 290px;
    }

    .login-page {
        padding-top: 30px;
    }

        .login-page table {
            position: relative !important;
        }

    footer.login {
        border: 0;
        bottom: 10px;
        position: absolute;
    }

    .validation-error .alert {
        font-size: 11px;
    }

    .notification-box i {
        font-size: 36px;
    }

    .notification-box h3 {
        font-size: 24px;
    }

    .notification-box h4 {
    }

    .notification-box i,
    .notification-box h3,
    .notification-box h4 {
        min-height: inherit;
        padding: 15px 0;
    }

    .db-box2 .fa {
        height: 48px;
        width: 48px !important;
    }

    html[dir='rtl'] footer {
        padding-right: 0px;
    }

    .lan-box {
        margin: 0px 0 0 10px;
        width: 38%;
    }

    .navbar-top-links {
        height: 70px;
        padding-top: 8px;
    }

        .navbar-top-links > li {
            float: left;
            width: 19%;
            text-align: center;
        }

        .navbar-top-links li a {
            min-height: 30px;
            padding: 5px 10px;
        }

        .navbar-top-links .mobile-lang {
            float: left;
            margin: 0px 0 0 10px;
            width: 29%;
        }

    .mobile-lang .btn-lang {
        background-color: #fff;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        border: 1px solid #ccc;
        height: 30px;
        text-align: left;
        width: 100%;
    }

    #page-wrapper {
        margin-top: 60px;
    }

    html[dir="rtl"] #page-wrapper {
        margin-top: 60px;
    }


    .top-label {
        margin-top: 8px;
        margin-left: 10px;
    }

    html[dir="rtl"] .top-label {
        margin-top: 16px;
        margin-right: 10px;
        margin-left: 5px;
    }

    html[dir="rtl"] .lan-box {
        margin: 8px 0 0 10px;
    }

    .dropdown-info {
        right: auto !important;
        left: 0 !important;
    }

        .dropdown-info:before {
            right: auto;
            left: 25px;
        }

    html[dir="rtl"] .dropdown-info:before {
        right: auto !important;
        left: 25px !important;
    }

    .navbar-right .navtopicon:hover {
        background-color: rgba(0,0,0,0) !important;
    }

    html[dir='rtl'] .navbar-right .dropdown-user {
        left: auto;
        right: 0;
    }

    .dropdown-user:before {
        content: '\f0d8';
        /*color: rgba(0,0,0,.15);*/
        color: #fff;
        font-family: FontAwesome;
        font-size: 24px;
        position: absolute;
        top: -22px;
        right: 25px;
    }

    html[dir='rtl'] .dropdown-user:before {
    }

    .max-width-popup {
        max-width: 85%;
    }

    .measurement-separator {
        left: 0;
        right: 0 !important;
        position: relative !important;
        text-align: center !important;
        margin: 0 0 5px 0;
        padding: 0;
        display: block;
    }

    html[dir="rtl"] .table-meta .col-lg-4, html[dir="rtl"] .table-meta .col-lg-8 {
        float: right;
    }

    #divForm {
        display: flex;
    }
    #divForm .col-lg-12 {
        width: 100%;
    }

    #divRedeemLoyaltyCard .input-group {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

        #divRedeemLoyaltyCard .input-group #btnRedeemLoyaltyCard {
            width: 100%;
            position: relative;
            left: 3px;
            margin-bottom: 10px;
        }

    #divRedeemLoyaltyCard .input-group .input-group-btn {
        display: block;
        width: 100%;
    }
        #divRedeemLoyaltyCard .input-group .input-group-btn button {
            margin: 0;
            width: 100%;
        }
}

@media only screen and (max-width : 480px) {
    .nav > li > a {
        padding: 10px 10px;
    }

    #login-box {
        margin: 50px auto 15px auto;
    }

    .logo-login {
        margin-top: 15px;
    }

    .oops {
        width: 100%;
    }

    .max-width-popup {
        max-width: 85%;
    }
}

@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        #no-more-tables td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }
        /*
	Label the data
	*/
        #no-more-tables td:before {
            content: attr(data-title);
        }
}

.btn-labeltop {
    padding-top: 20px;
}

.text-wrap-normal {
    white-space: normal;
}

.image-ctrl img {
    -moz-transition: -moz-transform 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.1s ease-in;
    -o-transition: -o-transform 0.1s ease-in;
}

    .image-ctrl img:hover {
        -moz-transform: scale(2);
        -webkit-transform: scale(2);
        -o-transform: scale(2);
    }

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

/*
    Start- Style for Dashboard page
*/
.db-box2 {
    background: #7cb2e6;
    color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: auto;
    border: none;
    background-color: #ffffff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border: 1px solid #ddd;
}

    .db-box2.selected {
        background: #226bb2;
        color: #fff;
    }

    .db-box2 h2 {
        font-size: 15px;
        font-weight: bold;
        margin-top: 22px;
        float: left;
        width: 56%;
        text-align: center;
        color: #226bb2;
        font-size: 12px;
        margin-top: 0px;
        padding-top: 18px;
        text-align: left;
        width: 100%;
    }

html[dir="rtl"] .db-box2 h2 {
    float: right;
}

.blue-bar {
    background: #226bb2;
    height: 3px;
    clear: both;
    margin: 0 15px 15px 15px;
}

.db-box2 h3 {
    font-size: 38px;
    font-weight: bold;
    margin-top: 0;
    width: 18%;
    float: right;
    margin-top: 11px;
    text-align: right;
    color: #999;
    font-size: 40px;
    line-height: 48px;
    margin: 0;
    width: 19%;
}

html[dir="rtl"] .db-box2 h3 {
    float: left;
    text-align: left;
}

.db-box2 .fa {
    font-size: 40px;
    opacity: .5;
    width: 18%;
    margin-top: 11px;
}

html[dir="rtl"] .fa.pull-left {
    margin-right: 0;
    margin-left: 0.3em;
}

@media (min-width:1200px) {
    .db-box2 {
        margin-bottom: -1px;
    }
}
/*
    End- Style for Dashboard page
*/

/*-------------------------------------------------- */

/*
    Start- Style for Loading Popup
*/

#overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.50);
    width: 100%;
    height: 100%;
    z-index: 9999;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #fff;
    width: 150px;
    /*height: 150px;*/
    margin-left: -100px; /*Half the value of width to center div*/
    margin-top: -100px; /*Half the value of height to center div*/
    z-index: 100008;
    box-shadow: 0px 2px 6px rgba(0,0,0,1);
    /*box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);*/
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    /*
    End- Style for Loading Popup
*/
}

.login-refresh {
    padding: 6px 10px !important;
}

/*
    Start- Style for Upload progress bar
*/
.divUpload {
    display: none;
}

.progressContainer {
    width: 200pt;
    height: 20px;
    background: #ccc;
    overflow: hidden;
}

.uploading {
    width: 200pt;
    text-align: center;
}

.divProgress {
    width: 1pt;
    height: 20px;
    background-color: #226bb2;
    display: none;
}

.divPercentage {
    width: 200pt;
    text-align: center;
}

.labelMessage {
    color: red;
}
.reqStar {
    color: red;
}

.upload-progress-section {
    float: left;
    width: 100%;
}

.upload-progress-bar {
    float: left;
}

.upload-progress-section .btn {
    height: 20px;
    margin-top: 15px;
    padding: 2px 10px;
}

/*
    End- Style for Upload progress bar
*/

/* Added by awais*/
.fancy-icon {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    font-size: 10px;
    height: 15px;
    width: 15px;
    padding-top: 2px;
    text-align: center;
}

    .fancy-icon i {
        color: #fff;
    }

.status-active {
    background-color: #666;
}

.status-closed {
    background-color: #666;
}

.status-inprogress {
    background-color: #F8A14B;
}

.status-onload {
    background-color: #94CBD0;
}

.make-closed {
    border-right: 1px solid #ccc;
    display: inline-block;
    float: left;
    padding-right: 10px;
    margin-right: 10px;
}

    .make-closed a {
        color: #333;
        font-size: 11px;
    }

.select-row {
    display: inline-block;
    float: left;
}

    .select-row a {
        color: #333;
        font-size: 11px;
    }

.double-border {
    border-top: 2px solid #90b5d8;
}

/*------------------------------------------------------------
Notification Boxes
------------------------------------------------------------*/
.notification-box {
    border: 2px solid #226bb2;
    display: inline-block;
    margin: 0 0 20px 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 100%;
}

    .notification-box i {
        color: #226bb2;
        font-size: 48px;
        padding: 25px 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .notification-box h3 {
        color: #226bb2;
        font-size: 30px;
        font-weight: bold;
        margin: 0 auto;
        padding: 30px 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 80%;
        word-break: break-all;
    }

    .notification-box h4 {
        color: #226bb2;
        font-size: 18px;
        line-height: 24px;
        margin: 0 auto;
        min-height: 100px;
        padding: 30px 0 20px 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 80%;
    }

    .notification-box hr {
        border-top: 2px solid #ccc;
        margin: 0 auto;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 80%;
    }

    .notification-box:hover {
        background-color: #226bb2;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

        .notification-box:hover i,
        .notification-box:hover h3,
        .notification-box:hover h4 {
            color: #fff;
        }

        .notification-box:hover hr {
            border-top: 2px solid #fff;
        }


/*------------------------------------------------------------
DB Boxes
------------------------------------------------------------*/
/*.db-box2 {
	background-color:#ffffff;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}*/

.db-box2 .fa {
    background-color: #226bb2;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    color: #fff;
    font-size: 24px;
    opacity: 1;
    margin-top: 0;
    padding-top: 12px;
    text-align: center;
    height: 48px;
    width: 48px;
}

.db-box2 .db-box2-heading {
    float: left;
    width: 55%;
}

/*.db-box2 h2 {
	color:#226bb2;
	font-size:12px;
	margin-top:0px;
    text-align:left;
	width:100%;
}*/

/*.db-box2 h3 {
	color:#999;
	font-size:40px;
	line-height:48px;
	margin:0;
	width:19%;
}*/

.db-box2 h4 {
    color: #666;
    font-size: 11px;
    float: left;
    margin: 10px 0 0 0;
    width: 100%;
}

/*.db-box2.selected {
	color:#fff;
}*/

.db-box2.selected .fa {
    background-color: #fff;
    color: #226bb2;
}

.db-box2.selected h2,
.db-box2.selected h3,
.db-box2.selected h4 {
    color: #fff;
}

hr.empty {
    border: 0px;
    clear: both;
    height: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.db-box2:hover {
    background-color: #226bb2;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .db-box2:hover .fa {
        background-color: #fff;
        color: #226bb2;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .db-box2:hover h2,
    .db-box2:hover h3,
    .db-box2:hover h4 {
        color: #fff;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

html[dir="rtl"] .db-box2 {
    overflow: hidden;
}

    html[dir="rtl"] .db-box2 .db-box2-heading {
        float: right;
    }

    html[dir="rtl"] .db-box2 h2 {
        padding-top: 20px;
        text-align: right;
    }

/*------------------------------------------------------------
Product Costing Panel
------------------------------------------------------------*/
.product-panel {
    padding: 0;
}

    .product-panel .panel-heading {
        margin-bottom: 10px;
    }

    .product-panel .panel-body {
        padding: 15px;
    }

/*------------------------------------------------------------
Custom Tabs
------------------------------------------------------------*/
.custom-tabs {
}

    .custom-tabs ul.nav-tabs {
    }

        .custom-tabs ul.nav-tabs li {
        }

            .custom-tabs ul.nav-tabs li a {
                background: #fafafa;
                border: 1px solid #ddd;
                color: #666;
            }

            .custom-tabs ul.nav-tabs li.active a {
                background: #226bb2;
                border: 1px solid #226bb2;
                color: #fff;
            }

    .custom-tabs .tab-content {
        border: 1px solid #ddd;
        border-width: 0 1px 1px;
        padding: 5px 12px;
    }

/*------------------------------------------------------------
Dropdown Info
------------------------------------------------------------*/
.dropdown-info {
    background: #6b747e;
    background: -moz-linear-gradient(top, #6b747e 0%, #4e5966 100%);
    background: -webkit-linear-gradient(top, #6b747e 0%,#4e5966 100%);
    background: linear-gradient(to bottom, #6b747e 0%,#4e5966 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b747e', endColorstr='#4e5966',GradientType=0 );
    min-width: 200px;
    right: -10px;
    left: auto;
}

    .dropdown-info:before {
        content: '\f0d8';
        color: #6b747e;
        font-family: FontAwesome;
        font-size: 24px;
        position: absolute;
        top: -22px;
        right: 20px;
    }

html[dir="rtl"] .dropdown-info:before {
    right: auto;
    left: 20px;
}

.dropdown-info li span {
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    width: 100%;
}

.dropdown-info li.divider {
    background-color: #666f7a;
}


/*Sales Invoice / Sales Return Buttons */
.left-two-btn .input-group-btn .btn {
    -webkit-border-radius: 3px 0px 0px 3px !important;
    -moz-border-radius: 3px 0px 0px 3px !important;
    border-radius: 3px 0px 0px 3px !important;
}

.left-two-btn input.form-control {
    -webkit-border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}

.left-two-btn button {
    outline: none !important;
}

/* Popup Maximum Height Handler */
.modal .modal-body {
    overflow-y: auto;
    max-height: 500px;
}

/*Barcode Lable Printing Width*/
.barcode-label-printing-body-width {
    max-width: 1172px;
}

/*------------------------------------------------------------
Input XS
------------------------------------------------------------*/
.input-xs {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 26px !important;
    padding: 3px;
}

.btn-xs {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 26px;
    padding: 3px 10px;
}

.btn-xxs {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 20px;
    margin: 0 3px;
    padding: 2px 10px;
}


/*------------------------------------------------------------
Fonts
------------------------------------------------------------*/
.fontsize10 {
    font-size: 10px !important;
}

.fontsize11 {
    font-size: 11px !important;
}

.fontsize12 {
    font-size: 12px !important;
}

.fontsize13 {
    font-size: 13px !important;
}

.fontsize14 {
    font-size: 14px !important;
}

.fontsize15 {
    font-size: 15px !important;
}

.fontsize16 {
    font-size: 16px !important;
}



/*------------------------------------------------------------
Panel with Table
------------------------------------------------------------*/
.panel-table-custom {
    padding: 0;
    position: relative;
}

    .panel-table-custom .panel-heading h5 {
        margin: 0;
    }

    .panel-table-custom .panel-body {
        padding: 0;
    }

    .panel-table-custom .btn-icon {
        padding: 0 5px;
    }

    .panel-table-custom .panel-body table {
        border: 0;
        margin-bottom: 0;
    }

        .panel-table-custom .panel-body table td {
            padding: 5px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: baseline;
            vertical-align: top;
        }

            .panel-table-custom .panel-body table td:first-of-type,
            .panel-table-custom .panel-body table th:first-of-type {
                border-left: 0;
            }

            .panel-table-custom .panel-body table td:last-of-type,
            .panel-table-custom .panel-body table th:last-of-type {
                border-right: 0;
            }

html[dir="rtl"] .panel-table-custom .panel-body table td:first-of-type,
html[dir="rtl"] .panel-table-custom .panel-body table th:first-of-type {
    /*border-left: inherit;*/
    border-left: 1px solid #ddd;
    border-right: 0;
}

html[dir="rtl"] .panel-table-custom .panel-body table td:last-of-type,
html[dir="rtl"] .panel-table-custom .panel-body table th:last-of-type {
    border-right: inherit;
    border-left: 0;
}

.panel-table-custom .panel-footer {
    padding: 5px 0px;
}

    .panel-table-custom .panel-footer table {
        margin-bottom: 0;
    }

        .panel-table-custom .panel-footer table td {
            border: 0;
            padding: 5px;
        }

            .panel-table-custom .panel-footer table td button {
                width: 100%;
            }

                .panel-table-custom .panel-footer table td button.width-auto {
                    width: auto;
                }

html[dir="rtl"] .panel-table-custom .fa-chevron-right:before {
    content: "\f053";
}

/*------------------------------------------------------------
Truncate
------------------------------------------------------------*/
.truncate-50 {
    max-width: 50px;
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

.truncate-70 {
    max-width: 70px;
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

.truncate-100 {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

.truncate-150 {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

.truncate-200 {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}


/*------------------------------------------------------------
Side Button with Input Group
------------------------------------------------------------*/
.side-btn.input-group {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

    .side-btn.input-group .form-control:not(:first-child):not(:last-child) {
        border-radius: 4px;
    }

.btn-addon-sm {
    height: 32px;
    width: 24px;
    padding: 5px 6px;
    margin-left: -1px;
}

html[dir="rtl"] .btn-addon-sm {
    margin-left: 0px;
    margin-right: -1px;
}

.btn-addon-sm i {
    color: #1b67b3;
    line-height: 22px;
    font-size: 12px !important;
}

.btn-addon-xs {
    height: 26px;
    width: 24px;
    padding: 2px 6px !important;
    margin-left: -1px !important;
}

html[dir="rtl"] .btn-addon-xs {
    margin-left: 0px;
    margin-right: -1px;
}

.btn-addon-xs i {
    color: #1b67b3;
    line-height: 22px;
    font-size: 12px !important;
}

.btn-addon-xs .fa-minus {
    color: #d01f1f;
}

.input-group .btn-first {
    left: -3px;
}

html[dir="rtl"] .input-group .btn-first {
    left: unset;
    right: -3px;
}

.input-group .btn-first .btn {
    border-radius: 0px 3px 3px 0px !important;
}

html[dir="rtl"] .input-group .btn-first .btn {
    border-radius: 3px 0px 0px 3px !important;
}

/*------------------------------------------------------------
Sticky Table
------------------------------------------------------------*/
@media (max-width:991px) {
    table.table-sticky tbody {
        overflow-x: hidden;
    }

    table.table-sticky th,
    table.table-sticky td {
        min-width: 100px !important;
        width: 100px;
    }
}

@media (min-width:768px) {
    table.table-sticky tr {
        table-layout: fixed;
    }
}

@media (max-width:767px) {
    table.table-sticky th,
    table.table-sticky td {
        min-width: 150px !important;
    }

    table.table-sticky tbody {
        overflow-x: hidden;
    }
}

table.table-sticky tr {
    width: 100%;
    display: inline-table;
    float: left;
}

table.table-sticky th {
    padding-left: 0;
}

table.table-sticky {
    height: 190px;
    position: relative;
}

    table.table-sticky thead {
        display: table;
        /*width: calc(100% - 18px) !important;*/
        width: calc(100% - 17px) !important;
        /*width: calc(100% - 0px) !important;*/
    }

        table.table-sticky thead th:last-of-type {
            border-right: 0;
        }

    table.table-sticky tbody {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 150px;
        width: 100%;
        position: absolute;
    }

/*.table-responsive {
    overflow-x: inherit;
}*/

table.table-sticky-double tbody {
    height: 142px;
}

table.table-sticky tr.collapse {
    background-color: #eee;
    display: none;
}

    table.table-sticky tr.collapse.in {
        background-color: #eee;
        display: table;
    }

        table.table-sticky tr.collapse.in td {
            border: 0;
            color: #666;
            font-size: 11px;
            padding: 0px;
        }

            table.table-sticky tr.collapse.in td input {
                border: 0;
                background: transparent;
                box-shadow: none;
                color: #666;
                font-size: 11px;
            }

table.table-sticky tr.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

/*------------------------------------------------------------
Postion Sticky for Table
------------------------------------------------------------*/
.p-sticky thead {
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #90b5d8;
    z-index: 9;
}

.p-sticky thead tr {
    background-color: #fff;
}

.p-sticky thead tr th {
    background-color: #fff;
}

/*------------------------------------------------------------
Modal Levels
------------------------------------------------------------*/
    /*.modal-level-2 {
    z-index: 99999;
}

.modal-backdrop:nth-of-type(3) {
    z-index: 9999;
}*/
    /*------------------------------------------------------------
Inline
------------------------------------------------------------*/
    .inline {
    display: inline-block;
}


/*------------------------------------------------------------
Vertical Align
------------------------------------------------------------*/
.v-align-top {
    vertical-align: top !important;
}

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

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

.table-align-middle {
}

    .table-align-middle tr td,
    .table-align-middle tr th {
        vertical-align: middle !important;
    }

.table-align-top {
}

    .table-align-top tr td,
    .table-align-top tr th {
        vertical-align: top !important;
    }

.table-align-bottom {
}

    .table-align-bottom tr td,
    .table-align-bottom tr th {
        vertical-align: bottom !important;
    }

/*------------------------------------------------------------
Dashboard Box
------------------------------------------------------------*/
.dashboard-box {
    background-color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    display: inline-block;
    float: left;
    margin-bottom: 20px;
    min-height: 330px;
    width: 100%;
}

    .dashboard-box .dashboard-box-top {
        border-bottom: 1px solid rgba(0,0,0,0.1);
        /*min-height: 230px;*/
        min-height: 250px;
        padding: 15px 20px;
        position: relative;
    }

        .dashboard-box .dashboard-box-top h4 {
            float: left;
            font-size: 14px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            width: auto;
        }

html[dir="rtl"] .dashboard-box .dashboard-box-top h4 {
    font-family: DroidArabicKufiRegular, sans-serif !important;
    float: right;
}

.dashboard-box .dashboard-box-top h4 span {
    color: rgba(0,0,0,0.7);
    display: inline-block;
    font-size: 12px;
    margin: 0 5px;
}

.dashboard-box .dashboard-box-top .duration-dropdown {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 2px;
    cursor: pointer;
    float: right;
    outline: none !important;
    padding: 3px 5px;
}

html[dir="rtl"] .dashboard-box .dashboard-box-top .duration-dropdown {
    float: left;
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-box .dashboard-box-top .dashboard-box-price {
    float: left;
    margin-top: 0px;
    position: relative;
    width: 100%;
    z-index: 9;
}

    .dashboard-box .dashboard-box-top .dashboard-box-price:after {
        border: 0.5px solid rgba(0,0,0,0.1);
        content: '';
        display: block;
        float: left;
        position: relative;
        top: 10px;
        left: -20px;
        width: calc(100% + 40px);
    }

.highcharts-container {
    position: inherit !important;
}

g.highcharts-tooltip {
    display: none;
}

div.highcharts-tooltip {
    background-color: white !important;
    opacity: 1 !important;
    z-index: 9998;
}

.highcharts-tooltip > span {
    border: 1px solid #226bb2;
    border-radius: 3px;
    box-shadow: 5px 0 10px 0 rgba(0,0,0,0.4);
    padding: 5px;
    background-color: white;
    opacity: 1;
    z-index: 9999 !important;
}

html[dir="rtl"] .highcharts-tooltip > span {
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-box .dashboard-box-top .dashboard-box-price h3 {
    color: rgba(0,0,0,0.7);
    /*display: inline-block;*/
    display: none !important;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

html[dir="rtl"] .dashboard-box .dashboard-box-top .dashboard-box-price h3 {
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-box .dashboard-box-top .dashboard-box-price h2 {
    color: #000;
    float: left;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: -5px 0 0 0;
    width: auto;
}

html[dir='rtl'] .dashboard-box .dashboard-box-top .dashboard-box-price h2 {
    font-family: DroidArabicKufiRegular, sans-serif !important;
    float: right;
    margin: 0;
}

.dashboard-box .dashboard-box-top .dashboard-box-price h2 .form-control {
    background: rgba(0,0,0,0) !important;
    color: #000;
    border: 0;
    text-align: left;
    box-shadow: none;
    padding: 0;
    font-size: 22px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 22px;
    pointer-events: none;
    line-height: 22px;
    max-width: 150px;
}

html[dir='rtl'] .dashboard-box .dashboard-box-top .dashboard-box-price h2 .form-control {
    height: 24px;
    margin-top: -5px;
    text-align: right;
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-box .dashboard-box-top .dashboard-chart {
    margin-left: 0;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
}

.dashboard-box .dashboard-box-info {
    float: left;
    padding: 20px 20px 0 20px;
    width: 100%;
}

    .dashboard-box .dashboard-box-info.large-box {
        min-height: 165px;
    }

    .dashboard-box .dashboard-box-info ul {
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;
    }

        .dashboard-box .dashboard-box-info ul li {
            float: left;
            margin: 0 0 12px 0;
            width: 49%;
        }

            .dashboard-box .dashboard-box-info ul li h6 {
                color: #999;
                float: left;
                font-size: 13px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: normal;
                margin: 0;
                padding: 0;
                width: 100%;
            }

html[dir="rtl"] .dashboard-box .dashboard-box-info ul li h6 {
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-box .dashboard-box-info ul li h5 {
    color: #333;
    float: left;
    font-size: 24px;
    font-weight: normal;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
}

html[dir="rtl"] .dashboard-box .dashboard-box-info ul li h5 {
    font-family: DroidArabicKufiRegular, sans-serif !important;
    text-align: right;
}

.dashboard-box .dashboard-box-info ul li h5 .form-control {
    background: rgba(0,0,0,0) !important;
    color: #333;
    border: 0;
    pointer-events: none;
    text-align: left;
    box-shadow: none;
    padding: 0;
    font-size: 20px;
    height: auto;
    line-height: 16px;
    font-weight: normal;
}

html[dir="rtl"] .dashboard-box .dashboard-box-info ul li h5 .form-control {
    font-family: sans-serif;
    text-align: right;
}


/*------------------------------------------------------------
Dashboard Box Blue
------------------------------------------------------------*/
.dashboard-box-blue .dashboard-box-top {
    background: #2d8ae8;
    background: -moz-linear-gradient(-45deg, #2d8ae8 0%, #1b67b3 100%);
    background: -webkit-linear-gradient(-45deg, #2d8ae8 0%,#1b67b3 100%);
    background: linear-gradient(135deg, #2d8ae8 0%,#1b67b3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d8ae8', endColorstr='#1b67b3',GradientType=1 );
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    color: #fff;
    float: left;
    width: 100%;
}

    .dashboard-box-blue .dashboard-box-top .dashboard-box-price:after {
        border: 0.5px solid rgba(255,255,255,0.2);
    }

    .dashboard-box-blue .dashboard-box-top .duration-dropdown {
        border: 1px solid #fff;
        color: #fff;
    }

        .dashboard-box-blue .dashboard-box-top .duration-dropdown option {
            color: #000;
        }

    .dashboard-box-blue .dashboard-box-top h4 span {
        color: rgba(255,255,255,0.7);
    }

    .dashboard-box-blue .dashboard-box-top .dashboard-box-price h3 {
        color: rgba(255,255,255,0.7);
        display: inline-block;
        font-size: 16px;
    }

    .dashboard-box-blue .dashboard-box-top .dashboard-box-price h2 {
        color: #fff;
    }

        .dashboard-box-blue .dashboard-box-top .dashboard-box-price h2 .form-control {
            color: #fff;
        }


/*------------------------------------------------------------
Dashboard Box Gray
------------------------------------------------------------*/
.dashboard-box-gray .dashboard-box-top {
    background: #8a99a9;
    background: -moz-linear-gradient(-45deg, #8a99a9 0%, #515b67 100%);
    background: -webkit-linear-gradient(-45deg, #8a99a9 0%,#515b67 100%);
    background: linear-gradient(135deg, #8a99a9 0%,#515b67 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a99a9', endColorstr='#515b67',GradientType=1 );
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    color: #fff;
    float: left;
    width: 100%;
}

    .dashboard-box-gray .dashboard-box-top .dashboard-box-price:after {
        border: 0.5px solid rgba(255,255,255,0.2);
    }

    .dashboard-box-gray .dashboard-box-top .duration-dropdown {
        border: 1px solid #fff;
        color: #fff;
    }

        .dashboard-box-gray .dashboard-box-top .duration-dropdown option {
            color: #000;
        }

    .dashboard-box-gray .dashboard-box-top h4 span {
        color: rgba(255,255,255,0.9);
    }

    .dashboard-box-gray .dashboard-box-top .dashboard-box-price h3 {
        color: rgba(255,255,255,0.9);
        display: inline-block;
        font-size: 16px;
    }

    .dashboard-box-gray .dashboard-box-top .dashboard-box-price h2 {
        color: #fff;
    }

        .dashboard-box-gray .dashboard-box-top .dashboard-box-price h2 .form-control {
            color: #fff;
        }


/*------------------------------------------------------------
Dashboard Small Box
------------------------------------------------------------*/
.dashboard-small-box {
    background-color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    display: inline-block;
    float: left;
    margin-bottom: 20px;
    width: 100%;
}

    .dashboard-small-box h4 {
        border-bottom: 1px solid #eee;
        color: #666;
        float: left;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 12px;
        margin: 0;
        padding: 15px 20px 11px 20px;
        width: 100%;
    }

html[dir="rtl"] .dashboard-small-box h4 {
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-small-box-details {
    display: inline-block;
    float: left;
    padding: 20px;
    width: 100%;
}

    .dashboard-small-box-details h3 {
        float: left;
        font-size: 36px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 5px 0 0 0;
    }

html[dir="rtl"] .dashboard-small-box-details h3 {
    float: right;
    font-family: DroidArabicKufiRegular, sans-serif !important;
}

.dashboard-small-box-details .dashboard-box-icon {
    background-color: #1b67b3;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 0px rgba(27, 103, 179, 0.5);
    -moz-box-shadow: 0px 0px 0px rgba(27, 103, 179, 0.5);
    box-shadow: 0px 2px 10px rgba(27, 103, 179, 0.5);
    color: #fff;
    float: right;
    height: 50px;
    text-align: center;
    width: 50px;
}

html[dir="rtl"] .dashboard-small-box-details .dashboard-box-icon {
    float: left;
}

.dashboard-small-box-details .dashboard-box-icon i {
    display: inline-block;
    font-size: 20px;
    margin-top: 15px;
}

.dashboard-small-box-details .dashboard-box-icon.dashboard-green-box {
    background-color: #7ad835;
    -webkit-box-shadow: 0px 0px 0px rgba(122, 216, 53, 0.5);
    -moz-box-shadow: 0px 0px 0px rgba(122, 216, 53, 0.5);
    box-shadow: 0px 2px 10px rgba(122, 216, 53, 0.5);
}

.dashboard-small-box-details .dashboard-box-icon.dashboard-red-box {
    background-color: #dc3545;
    -webkit-box-shadow: 0px 0px 0px rgba(220, 53, 69, 0.5);
    -moz-box-shadow: 0px 0px 0px rgba(220, 53, 69, 0.5);
    box-shadow: 0px 2px 10px rgba(220, 53, 69, 0.5);
}

.dashboard-small-box-details .dashboard-box-icon.dashboard-yellow-box {
    background-color: #e5b31d;
    -webkit-box-shadow: 0px 0px 0px rgba(229, 179, 29, 0.5);
    -moz-box-shadow: 0px 0px 0px rgba(229, 179, 29, 0.5);
    box-shadow: 0px 2px 10px rgba(229, 179, 29, 0.5);
}


/*------------------------------------------------------------
Misc.
------------------------------------------------------------*/
.input-label {
    background-color: rgba(0,0,0,0) !important;
    border: 0px !important;
    margin: 0;
    padding: 0;
    outline: none !important;
}

/*.margin-auto {
    margin: 0 auto !important;
}*/

.button-control {
    position: relative;
}
.button-control .btn-addon {
    position: absolute;
    right: 4px;
    top: 4px;
    height: 24px;
    width: 24px;
    border: 1px solid #226bb2;
    background-color: #fff;
    font-size: 13px;
    color: #226bb2;
    transition: all 0.3s ease-in-out;
    text-align: center;
    border-radius: 2px;
}
.button-control .btn-addon i {
    position: relative;
    top: 4px;
}
.button-control .btn-addon:hover {
    background-color: #226bb2;
    color: #fff;
    transition: all 0.3s ease-in-out;
}
.button-control .btn-addon:active {
    background-color: #0c56a0;
    transition: all 0.3s ease-in-out;
}
html[dir="rtl"] .button-control .btn-addon {
    right: unset;
    left: 4px;
}
.btn-file input[type="file"] {
    display: none;
}
.btn-file {
    line-height: 17px !important;
}
input[type="file"][disabled],
input[type="file"][disabled="disabled"] {
    background-color: rgba(0,0,0,0) !important;
}
.btn-copy {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 6px;
    background: #fff;
    color: #2196f3;
    border: 1px solid #2196f3;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}
.btn-copy:hover {
    background: #2196f3;
    color: #fff !important;
    transition: all 0.3s ease-in-out;
}
html[dir="rtl"] .btn-copy {
    right: unset;
    left: 5px;
}

/*------------------------------------------------------------
Wizard Modal Two
------------------------------------------------------------*/
    .wizard-modal-two {
}

.wizard-modal-tw .modal-dialog {
}

.wizard-modal-two.modal {
    text-align: center;
    padding: 0 !important;
}

    .wizard-modal-two.modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

.wizard-modal-two .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.wizard-modal-two .modal-content {
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 0px;
}

    .wizard-modal-two .modal-content button.close {
        position: absolute;
        top: 5px;
        right: 10px;
        z-index: 99999;
        outline: none !important;
        background: rgba(255,0,0,0.7);
        opacity: 1;
        text-shadow: none;
        color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        font-size: 14px;
        text-align: center;
    }

        .wizard-modal-two .modal-content button.close:hover {
            background: rgba(255,0,0,1);
        }

    .wizard-modal-two .modal-content .control-label {
        margin-top: 8px;
    }

.wizard-modal-two .wizard-panel {
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.wizard-modal-two .wizard-left {
    background-color: #226bb2;
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
    color: #fff;
    text-align: center;
    padding-top: 60px;
}

html[dir="rtl"] .wizard-modal-two .wizard-left {
    -webkit-border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
}

.wizard-modal-two .modal-content h4 {
    margin-top: 30px;
    display: inline-block;
    width: 100%;
}

.wizard-modal-two .modal-content h6 {
    display: inline-block;
    margin: 0;
    width: 100%;
}

.wizard-modal-two .wizard-right {
    background-color: #fff;
    -webkit-border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
    padding: 0;
}

html[dir="rtl"] .wizard-modal-two .wizard-right {
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}

.wizard-modal-two .wizard-right .navbar {
    background-color: #226bb2;
    -webkit-border-radius: 0 9px 0 0;
    -moz-border-radius: 0 9px 0 0;
    border-radius: 0 9px 0 0;
    border: 0;
    float: left;
    min-height: initial;
    position: relative;
    width: 100%;
    z-index: 999;
}

html[dir="rtl"] .wizard-modal-two .wizard-right .navbar {
    background-color: #226bb2;
    -webkit-border-radius: 9px 0 0 0;
    -moz-border-radius: 9px 0 0 0;
    border-radius: 9px 0 0 0;
}

.wizard-modal-two .wizard-right .navbar ul.nav {
    padding: 0;
}

.wizard-modal-two .wizard-right .navbar li {
    pointer-events: none !important;
}

html[dir="rtl"] .wizard-modal-two .wizard-right .navbar li {
    float: right;
}

.wizard-modal-two .wizard-right .navbar li a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .wizard-modal-two .wizard-right .navbar li a:hover {
        background-color: #fff;
        color: #226bb2;
    }

.wizard-modal-two .wizard-right .navbar li.active a {
    background-color: #fff;
    color: #226bb2;
}

.wizard-modal-two .wizard-right .tab-content {
    padding-left: 15px;
    padding-right: 15px;
}

.wizard-modal-two .wizard-right ul.pager {
    padding: 0;
}

    .wizard-modal-two .wizard-right ul.pager li {
    }

        .wizard-modal-two .wizard-right ul.pager li a {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            color: #fff;
        }

@media (min-width: 1200px) {
    .wizard-modal-two .modal-dialog {
        max-width: 100%;
    }

    .wizard-modal-two .modal-lg {
        width: 1180px;
    }
}

@media (min-width: 768px) {
    .wizard-modal-two .wizard-panel,
    .wizard-modal-two .wizard-left,
    .wizard-modal-two .wizard-right {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex: 1 1 auto;
    }
}

.wizard-modal-two .wizard-left > div,
.wizard-modal-two .wizard-right > div {
    width: 100%;
}

@media (max-width: 767px) {
    .wizard-modal-two .wizard-left {
        -webkit-border-radius: 10px 10px 0px 0px;
        -moz-border-radius: 10px 10px 0px 0px;
        border-radius: 10px 10px 0px 0px;
        padding-bottom: 30px;
    }

    .wizard-modal-two .wizard-right {
        -webkit-border-radius: 0px 0px 10px 10px;
        -moz-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
    }

        .wizard-modal-two .wizard-right .navbar {
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
        }

        .wizard-modal-two .wizard-right .tab-content {
            padding-bottom: 10px;
        }
}

/*------------------------------------------------------------
Checkbox & Radio
------------------------------------------------------------*/
input[type=checkbox],
input[type=radio] {
    position: relative;
    top: 2px;
}

input[type=checkbox] ~ span,
input[type=radio] ~ span {
    position: relative;
    top: 2px;
}

html[dir="rtl"] .checkbox-inline,
html[dir="rtl"] .radio-inline {
    padding-left: 0px;
    padding-right: 20px;
}

html[dir="rtl"] .checkbox input[type=checkbox],
html[dir="rtl"] .checkbox-inline input[type=checkbox],
html[dir="rtl"] .radio input[type=radio],
html[dir="rtl"] .radio-inline input[type=radio] {
    margin-left: 0;
    margin-right: -20px;
}

table tr td input[type="radio"] + label {
    margin-top: 8px;
    margin-right: 15px;
}

html[dir="rtl"] table tr td input[type="radio"] + label {
    margin-right:0;
    margin-left: 15px;
}

table.RadioButtons tr td input[type="radio"] + label {
    margin-top: 2px;
}

/*label > span > input {
    display: inline-block;
}
label > span > label {
    display: inline-block;
    width: calc(100% - 24px);
}*/
    /*------------------------------------------------------------
Help Section
------------------------------------------------------------*/
    .help-wrapper {
    position: fixed;
    right: 30px;
    top: 75px;
    z-index: 9;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

html[dir="rtl"] .help-wrapper {
    right: unset;
    left: 0px;
}

.help-wrapper:hover {
    right: 200px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

html[dir="rtl"] .help-wrapper:hover {
    right: unhset;
    left: 170px;
}

.help-wrapper .help-icon {
    background-color: #1b67b3;
    -webkit-border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.20);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.20);
    color: #fff;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    height: 30px;
    position: absolute;
    width: 30px;
    z-index: 9;
    padding-top: 5px;
}

html[dir="rtl"] .help-wrapper .help-icon {
    -webkit-border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
    right: unset;
    left: 0px;
}

.help-wrapper .help-section {
    position: absolute;
    background-color: #1b67b3;
    margin-left: 30px;
    -webkit-border-radius: 0px 0px 0px 5px;
    -moz-border-radius: 0px 0px 0px 5px;
    border-radius: 0px 0px 0px 5px;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.20);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.20);
    width: 180px;
    z-index: 10;
}

html[dir="rtl"] .help-wrapper .help-section {
    -webkit-border-radius: 0px 0px 5px 0px;
    -moz-border-radius: 0px 0px 5px 0px;
    border-radius: 0px 0px 5px 0px;
}

.help-wrapper .help-section ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0 0 5px 0;
    width: 100%;
}

    .help-wrapper .help-section ul li {
    }

        .help-wrapper .help-section ul li:first-child {
            margin-bottom: 5px;
        }

            .help-wrapper .help-section ul li:first-child a {
                background-color: #2a78c6;
                font-size: 12px;
                font-weight: bold;
                padding: 7px 15px 5px 15px;
            }

        .help-wrapper .help-section ul li a {
            color: #fff;
            display: inline-block;
            padding: 10px 15px;
            width: 100%;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

html[dir="rtl"] .help-wrapper .help-section ul li a {
    text-align: right;
}

.help-wrapper .help-section ul li a:hover {
    background-color: #2a78c6;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.help-wrapper .help-section ul li a i {
    font-size: 14px;
    width: 18px;
}

.help-wrapper .help-section ul li a span {
    display: inline-block;
    margin: 0 5px;
}


/*------------------------------------------------------------
Switch Button
------------------------------------------------------------*/
.switch-button .checkbox {
    display: none;
}

.switch-button .switch {
    align-items: center;
    background-color: gray;
    border-radius: 500px;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: space-between;
    padding: 0 5px;
    position: relative;
    user-select: none;
    width: 60px;
}

.switch-button .checkbox:checked ~ .switch {
    background-color: #226bb2;
}

.switch-button .checkbox:not(:checked) ~ .switch {
    background-color: gray;
}

.switch-button .switch__left,
.switch-button .switch__right {
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 1px;
}

.switch-button .checkbox:checked ~ .switch .switch__left {
    visibility: hidden;
}

.switch-button .checkbox:not(:checked) ~ .switch .switch__right {
    visibility: hidden;
}

.switch-button .switch__circle {
    height: 28px;
    padding: 5px;
    position: absolute;
    transition: all 0.1s linear;
    top: -2px;
    width: 28px;
}

.switch-button .checkbox:checked ~ .switch .switch__circle {
    left: -1px;
    right: calc(100% - 40px);
}

.switch-button .checkbox:not(:checked) ~ .switch .switch__circle {
    left: calc(100% - 27px);
    right: 0;
}

html[dir="rtl"] .switch-button .checkbox:checked ~ .switch .switch__circle {
    left: calc(100% - 40px);
    right: -1px
}

html[dir="rtl"] .switch-button .checkbox:not(:checked) ~ .switch .switch__circle {
    left: 0;
    right: calc(100% - 27px);
}

.switch-button .switch__circle-inner {
    background-color: white;
    border-radius: 50%;
    display: block;
    height: 100%;
    width: 100%;
}


/*------------------------------------------------------------
Measurement Separator
------------------------------------------------------------*/
.measurement-separator {
    font-family: sans-serif;
    position: absolute;
    right: -3px;
    top: 0;
}

html[dir="rtl"] .measurement-separator {
    right: inherit;
    left: -3px;
}

/*------------------------------------------------------------
Current Table View
------------------------------------------------------------*/
.ckbox-meta {
    margin: 7px 0 12px;
}

    .ckbox-meta span {
        font-size: 11px;
        font-weight: 700;
        color: #333;
        display: block;
        padding: 5px 0 0;
    }

    .ckbox-meta label {
        margin-right: 25px;
    }

.status-panel ul li .pull-left {
    width: calc( 100% - 80px );
}

.status-panel ul li .pull-right {
    width: 80px;
    text-align: right;
}

.status-panel ul li .pull-left span {
    width: 100%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-panel .panel-body {
    width: 100%;
    /*float: left;*/
    padding: 15px !important;
    /*max-height: 160px;*/
    min-height: 160px;
}

    .custom-panel .panel-body .mCustomScrollBox {
        background: none;
    }

    .custom-panel .panel-body.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
        opacity: 1;
        margin: 5px 0;
    }

.custom-panel .panel-footer {
    width: 100%;
    float: left;
    padding: 10px 15px;
    background-color: transparent;
    border-top: 1px solid #ddd;
    border-radius: 0px;
    display: flex;
    text-align: center;
}

    .custom-panel .panel-footer .btn {
        border-radius: 3px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }

        .custom-panel .panel-footer .btn:first-child {
            flex: 1;
            align-items: center;
            padding: 7px 12px 4px;
        }

        .custom-panel .panel-footer .btn + .btn {
            margin: 0 0 0 5px;
        }

        .custom-panel .panel-footer .btn i {
            color: #333;
        }

ul.items-listing > li {
    width: 100%;
    float: left;
}

    ul.items-listing > li .item-name {
        font-size: 13px;
        font-weight: 700;
        color: #000;
        display: block;
        margin: 5px 0 0;
    }

.item-divider {
    width: calc( 100% + 30px );
    float: left;
    margin: 6px 0 12px -15px;
    border-top: 1px solid #ddd;
}

ul.items-listing > li .item-name.hide + .item-divider {
    display: block;
}

ul.items-listing > li {
    padding: 0 15px;
}

    ul.items-listing > li .item-wrap {
        width: 100%;
        display: flex;
        margin: 0 0 5px;
    }

    ul.items-listing > li .left-panel {
        min-width: 33px;
        max-width: 40px;
    }

    ul.items-listing > li .right-panel {
        width: calc( 100% - 40px);
    }

    ul.items-listing > li .left-panel span {
        font-size: 12px;
        color: #333;
        display: inline-block;
    }

    ul.items-listing > li .left-panel .item-sign {
        padding: 0 10px 0 3px;
        float: right;
    }

    ul.items-listing > li .right-panel span {
        font-size: 12px;
        color: #333;
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    ul.items-listing > li .right-panel p {
        font-size: 11px;
        color: #de2929;
        margin: -5px 0 0;
    }





/*------------------------------------------------------------
    Kitchen Display
------------------------------------------------------------*/

.box-body ul, .status-panel ul, .order-wrap ul, ul.items-listing {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.border-top-0 {
    border-top: none !important;
}

.status-blue {
    background: #edf5ff !important;
    border-color: #d2e6fe !important;
}

    .status-blue span {
        color: #1b67b3 !important;
    }

.status-green {
    background: #ebfdec !important;
    border-color: #bcffc0 !important;
}

    .status-green span {
        color: #05a309 !important;
    }

.status-yellow {
    background: #fffaea !important;
    border-color: #feeaac !important;
}

    .status-yellow span {
        color: #ff8f00 !important;
    }

.custom-box {
    background: #eee;
    padding: 15px;
    display: inline-block;
    width: 100%;
}

    .custom-box .panel-header {
        float: left !important;
        padding: 15px !important;
        width: 100%;
    }

    .custom-box .panel-body {
        float: left;
        padding: 15px;
        max-height: 160px !important;
        width: 100%;
    }

        .custom-box .panel-body br {
            display: none;
        }

    .custom-box .status-panel {
        float: left;
        width: 100%;
    }

.box-wrap, .custom-panel {
    width: 100%;
    float: left;
    background: #FFF;
    border-radius: 4px;
    margin: 0 0 20px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
}

.info-box, .panel-header {
    width: 100%;
    float: left;
    padding: 15px;
}

.panel-header {
    padding: 15px 15px 10px;
}

    .info-box .pull-left span,
    .panel-header .pull-left span {
        font-size: 13px;
        font-weight: 700;
        color: #000;
        display: block;
        margin: -3px 0;
    }

    .info-box p,
    .panel-header p {
        font-size: 11px;
        color: #666;
        display: block;
        margin: 0;
    }

    .info-box .pull-right span,
    .panel-header .pull-right span {
        font-size: 12px;
        font-weight: 700;
        color: #333;
        display: block;
        margin: -3px 0 -2px;
    }

.box-body ul li,
.status-panel ul li {
    width: 100%;
    float: left;
    padding: 8px 15px 5px;
    background: #fafafa;
    border-bottom: 1px solid #ddd;
}

.status-panel ul li {
    padding: 5px 15px 4px;
}

    .box-body ul li[class*='status-'],
    .status-panel ul li[class*='status-'] {
        border-top: 1px solid #ddd;
    }

    .box-body ul li .pull-left span,
    .status-panel ul li .pull-left span {
        font-size: 12px;
        font-weight: 700;
        color: #000;
        display: block;
    }

    .box-body ul li .pull-right span,
    .status-panel ul li .pull-right span {
        font-size: 11px;
        color: #000;
        display: block;
    }

.box-wrap .box-footer {
    width: 100%;
    float: left;
    padding: 15px;
}

    .box-wrap .box-footer .btn {
        width: 100%;
        font-size: 12px;
        font-weight: 700;
        color: #333;
        border-radius: 3px;
        padding: 7px 12px 4px;
    }


.order-wrap {
    padding: 0 15px;
}

ul.info-ul > li {
    background: #fafafa;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 7px 15px 5px;
    margin: 0 -15px 19px;
    overflow: hidden;
}

ul.info-ul li span {
    font-size: 13px;
    color: #000;
    display: block;
}

ul.info-ul li .pull-left span {
    font-weight: 700;
}

ul.order-ul {
    width: 100%;
    float: left;
    margin: 0 0 9px;
}

    ul.order-ul > li {
        width: 100%;
        float: left;
        margin: 2px 0 15px;
    }

        ul.order-ul > li .row {
            margin: 0;
        }

        ul.order-ul > li .col-xs-12 {
            padding-left: 12px;
            padding-right: 12px;
        }

        ul.order-ul > li .order-quantity, ul.order-ul > li .order-sign, ul.order-ul > li .name {
            font-size: 12px;
            color: #333;
            display: inline-block;
            line-height: 22px;
        }

        ul.order-ul > li .order-sign {
            padding: 0 3px;
        }

.order-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    display: block;
    margin: -5px 0 3px;
}

.order-attr {
    font-size: 12px;
    font-weight: 700;
    color: #de2929 !important;
}

.order-wrap ul.info-ul li .pull-right span {
    display: inline-block;
}

    .order-wrap ul.info-ul li .pull-right span + span {
        margin: 0 0 0 10px;
    }

/*------------------------------------------------------------
Tabs Wrapper
------------------------------------------------------------*/

.tabs-wrapper {
    width: 100%;
    float: left;
    border-radius: 3px;
}

    .tabs-wrapper .tab-content {
        padding: 20px;
        border: 1px solid #ddd;
        min-height: 310px;
    }

    .tabs-wrapper .nav-tabs {
        border: none;
        padding: 0;
    }

        .tabs-wrapper .nav-tabs > li > a {
            font-size: 13px;
            color: #333;
            background: #eee;
            padding: 10px 20px;
            border: 1px solid #ddd;
            border-top: 2px solid #ddd;
            border-bottom: none;
            border-radius: 3px 3px 0 0;
            margin-right: 5px;
        }

        .tabs-wrapper .nav-tabs > li.active > a, .tabs-wrapper .nav-tabs > li.active > a:focus, .tabs-wrapper .nav-tabs > li.active > a:hover {
            background-color: #FFF;
            font-weight: 500;
            color: #1b67b3;
            border: 1px solid #ddd;
            border-top: 2px solid #1b67b3;
            border-bottom: none;
            font-weight: 600;
        }


html[dir="rtl"] .tabs-wrapper .nav-tabs > li {
    float: right;
}

    html[dir="rtl"] .tabs-wrapper .nav-tabs > li > a {
        margin: 0 0 0 5px;
    }

/*------------------------------------------------------------
Borders
------------------------------------------------------------*/
.bordered {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

/*------------------------------------------------------------
Breadcrumb
------------------------------------------------------------*/
.breadcrumb {
    background-color: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    height: 30px;
    float: left;
    width: 100%;
}

    .breadcrumb li {
        float: left;
    }

html[dir="rtl"] .breadcrumb li {
    float: right;
}

.breadcrumb > li + li:before {
    display: none;
}

.breadcrumb li a {
    color: #034b93;
    float: left;
    padding: 8px 10px 7px 20px;
    position: relative;
}

html[dir="rtl"] .breadcrumb li a {
    padding: 8px 20px 7px 10px;
}

.breadcrumb li a:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid white;
    position: absolute;
    top: 50px;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}

html[dir="rtl"] .breadcrumb li a:before {
    border-left: 0px solid white;
    border-right: 10px solid white;
    left: unset;
    right: 99%;
}

.breadcrumb li a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid #1b67b3;
    position: absolute;
    top: 50px;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}

html[dir="rtl"] .breadcrumb li a:after {
    border-left: 0px solid #1b67b3;
    border-right: 10px solid #1b67b3;
    left: unset;
    right: 98%;
}

.breadcrumb li:first-child a {
    background-color: #1b67b3;
    border-radius: 3px 0 0 3px;
    color: #fff;
    font-size: 14px;
    padding: 8px 7px 8px 9px;
}

html[dir="rtl"] .breadcrumb li:first-child a {
    padding: 8px 9px 8px 7px;
}

.breadcrumb li:first-child a:after {
    border-left-color: #1b67b3;
}

html[dir="rtl"] .breadcrumb li:first-child a:after {
    border-right-color: #1b67b3;
}

.breadcrumb li:nth-child(2) a {
    background-color: #e4ecf9;
}

    .breadcrumb li:nth-child(2) a:before {
        border-left-color: #cdddf6;
        z-index: 3;
    }

html[dir="rtl"] .breadcrumb li:nth-child(2) a:before {
    border-right-color: #cdddf6;
}

.breadcrumb li:nth-child(2) a:after {
    border-left-color: #e4ecf9;
    z-index: 3;
}

html[dir="rtl"] .breadcrumb li:nth-child(2) a:after {
    border-right-color: #e4ecf9;
}

.breadcrumb li:nth-child(3) a {
    background-color: #f2f5fa;
}

    .breadcrumb li:nth-child(3) a:before {
        border-left-color: #e4ecf9;
    }

html[dir="rtl"] .breadcrumb li:nth-child(3) a:before {
    border-right-color: #e4ecf9;
}

.breadcrumb li:nth-child(3) a:after {
    border-left-color: #f2f5fa;
}

html[dir="rtl"] .breadcrumb li:nth-child(3) a:after {
    border-right-color: #f2f5fa;
}

.breadcrumb li:nth-child(4) a {
    background-color: #fff;
}

    .breadcrumb li:nth-child(4) a:before {
        border-left-color: #e5e5e5;
    }

html[dir="rtl"] .breadcrumb li:nth-child(4) a:before {
    right: 100%;
    border-right-color: #e5e5e5;
}

.breadcrumb li:nth-child(4) a:after {
    border-left-color: #ffffff;
}

html[dir="rtl"] .breadcrumb li:nth-child(4) a:after {
    border-right-color: #ffffff;
}



.breadcrumb li.active {
    background-color: rgba(0, 0, 0, 0) !important;
    float: left;
    padding: 8px 10px 7px 20px;
}

html[dir="rtl"] .breadcrumb li.active {
    padding: 8px 20px 7px 10px;
}

/*------------------------------------------------------------
OTP
------------------------------------------------------------*/
.otp-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.otp-wrapper .form-control {
    font-size: 24px;
    color: #000;
    height: 60px;
    flex: 1;
    text-align: center;
}
.otp-wrapper .form-control + .form-control {
    margin: 0 0 0 10px;
}
html[dir="rtl"] .otp-wrapper .form-control + .form-control {
    /*margin: 0 10px 0 0px;*/
}
.otp-wrapper.error .form-control {
    border-color: #D51111;
}
.otp-wrapper.error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(243, 112, 112, 0.45) !important;
}
.countdown-timer {
    width: 42px !important;
    height: 14px !important;
    display: inline-block;
    position: relative;
    top: 3px;
    margin: 0 5px;
}

    .countdown-timer .time_circles > div > h4 {
        display: inline-block !important;
        font-size: 13px !important;
        color: #1369B2;
        width: 17px;
        position: relative;
        left: -14px;
        top: 3px;
        text-align: left;

    }

.countdown-timer .time_circles > div > span {
    font-family: 'Cairo', sans-serif;
    font-size: 13px !important;
    color: #1369B2;
    margin: 5px 0 0;
}
.time_circles > div {
    position: relative !important;
    display: inline-block;
    width: auto !important;
}
.otp-modal-title {
    display: inline-block;
    margin: 1px 15px 0 15px;
}
.otp-text {
    font-size: 14px;
}
.otp-time {
    color: #fff;
    font-weight: bold;
    background: #1b67b3;
    padding: 0px 10px 0 10px;
    margin: -3px 5px 0 5px;
    border-radius: 3px;
}

/*------------------------------------------------------------
Resposnive
------------------------------------------------------------*/
/*Custom Media Query*/
@media (min-width:1200px) and (max-width:1360px) {
    .db-box2 {
                min-height: 82px;
            }

                .db-box2 .db-box2-heading {
                    width: 50%;
                }
        }

        @media (max-width:1199px) {
            .login-page {
                background-size: inherit !important;
                background-position: top center;
            }

            .bordered {
                border-left: 0px;
            }

            html[dir="rtl"] .bordered {
                border-left: 1px solid #ddd;
                border-right: 0px;
            }
        }

        @media (min-width:768px) and (max-width:991px) {
            .db-box2 {
                min-height: 82px;
            }

                .db-box2 .db-box2-heading {
                    width: 50%;
                }

            html[dir='rtl'] .gutter-left-0 {
                padding-right: 15px;
                padding-left: 15px;
            }

            .input-group-sm > .input-group-addon {
                padding: 5px 5px;
            }
        }

        @media (max-width:991px) {
            .bordered {
                border-left: 0px;
                border-right: 0px;
            }

            html[dir="rtl"] .bordered {
                border-left: 1px solid #ddd;
                border-left: 0px;
                border-right: 0px;
            }
        }

        @media (max-width:479px) {

            .db-box2 .fa {
                height: 48px;
                width: 48px !important;
            }

            #login-box {
                margin: 60px auto 20px auto;
            }
        }

        @media (max-width:320px) {
            footer.login {
                position: relative;
                bottom: 0px;
            }
        }

        @media (max-width:767px) and (orientation:landscape) {
            footer.login {
                position: relative;
                bottom: 10px;
            }
        }

        @media (min-width:1600px) {
            body,
            nav.navbar,
            footer {
                margin: 0 auto;
                max-width: 100%;
            }

            .modal-xl {
                width: 1200px;
                max-width: 1200px;
            }
        }
        /*Kitchen Display Responsive*/
        @media only screen and (max-width:767px) {
            .ckbox-meta .padding-0 {
                padding: 0 15px !important;
            }
        }
        /*------------------------------------------------------------
RTL for Medium & Small Devices
------------------------------------------------------------*/
        @media (min-width: 1200px) {
            html[dir="rtl"] .col-lg-1, html[dir="rtl"] .col-lg-2, html[dir="rtl"] .col-lg-3, html[dir="rtl"] .col-lg-4, html[dir="rtl"] .col-lg-5, html[dir="rtl"] .col-lg-6, html[dir="rtl"] .col-lg-7, html[dir="rtl"] .col-lg-8, html[dir="rtl"] .col-lg-9, html[dir="rtl"] .col-lg-10, html[dir="rtl"] .col-lg-11, html[dir="rtl"] .col-lg-12 {
                float: right;
            }

            html[dir="rtl"] .col-lg-pull-12 {
                left: 100%;
            }

            html[dir="rtl"] .col-lg-pull-11 {
                left: 91.66666667%;
            }

            html[dir="rtl"] .col-lg-pull-10 {
                left: 83.33333333%;
            }

            html[dir="rtl"] .col-lg-pull-9 {
                left: 75%;
            }

            html[dir="rtl"] .col-lg-pull-8 {
                left: 66.66666667%;
            }

            html[dir="rtl"] .col-lg-pull-7 {
                left: 58.33333333%;
            }

            html[dir="rtl"] .col-lg-pull-6 {
                left: 50%;
            }

            html[dir="rtl"] .col-lg-pull-5 {
                left: 41.66666667%;
            }

            html[dir="rtl"] .col-lg-pull-4 {
                left: 33.33333333%;
            }

            html[dir="rtl"] .col-lg-pull-3 {
                left: 25%;
            }

            html[dir="rtl"] .col-lg-pull-2 {
                left: 16.66666667%;
            }

            html[dir="rtl"] .col-lg-pull-1 {
                left: 8.33333333%;
            }

            html[dir="rtl"] .col-lg-pull-0 {
                left: auto;
            }

            html[dir="rtl"] .col-lg-push-12 {
                right: 100%;
            }

            html[dir="rtl"] .col-lg-push-11 {
                right: 91.66666667%;
            }

            html[dir="rtl"] .col-lg-push-10 {
                right: 83.33333333%;
            }

            html[dir="rtl"] .col-lg-push-9 {
                right: 75%;
            }

            html[dir="rtl"] .col-lg-push-8 {
                right: 66.66666667%;
            }

            html[dir="rtl"] .col-lg-push-7 {
                right: 58.33333333%;
            }

            html[dir="rtl"] .col-lg-push-6 {
                right: 50%;
            }

            html[dir="rtl"] .col-lg-push-5 {
                right: 41.66666667%;
            }

            html[dir="rtl"] .col-lg-push-4 {
                right: 33.33333333%;
            }

            html[dir="rtl"] .col-lg-push-3 {
                right: 25%;
            }

            html[dir="rtl"] .col-lg-push-2 {
                right: 16.66666667%;
            }

            html[dir="rtl"] .col-lg-push-1 {
                right: 8.33333333%;
            }

            html[dir="rtl"] .col-lg-push-0 {
                right: auto;
            }

            html[dir="rtl"] .col-lg-offset-12 {
                margin-right: 100%;
            }

            html[dir="rtl"] .col-lg-offset-11 {
                margin-right: 91.66666667%;
            }

            html[dir="rtl"] .col-lg-offset-10 {
                margin-right: 83.33333333%;
            }

            html[dir="rtl"] .col-lg-offset-9 {
                margin-right: 75%;
            }

            html[dir="rtl"] .col-lg-offset-8 {
                margin-right: 66.66666667%;
            }

            html[dir="rtl"] .col-lg-offset-7 {
                margin-right: 58.33333333%;
            }

            html[dir="rtl"] .col-lg-offset-6 {
                margin-right: 50%;
            }

            html[dir="rtl"] .col-lg-offset-5 {
                margin-right: 41.66666667%;
            }

            html[dir="rtl"] .col-lg-offset-4 {
                margin-right: 33.33333333%;
            }

            html[dir="rtl"] .col-lg-offset-3 {
                margin-right: 25%;
            }

            html[dir="rtl"] .col-lg-offset-2 {
                margin-right: 16.66666667%;
            }

            html[dir="rtl"] .col-lg-offset-1 {
                margin-right: 8.33333333%;
            }

            html[dir="rtl"] .col-lg-offset-0 {
                margin-right: 0;
            }

            .modal-xl {
                /*width: 1100px;
            max-width: 1100px;*/
                width: 90%;
                max-width: 90%;
            }
        }

        @media (min-width: 992px) {
            html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-md-3, html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-md-6, html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-md-9, html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-md-12 {
                float: right;
            }

            html[dir="rtl"] .col-md-pull-12 {
                left: 100%;
            }

            html[dir="rtl"] .col-md-pull-11 {
                left: 91.66666667%;
            }

            html[dir="rtl"] .col-md-pull-10 {
                left: 83.33333333%;
            }

            html[dir="rtl"] .col-md-pull-9 {
                left: 75%;
            }

            html[dir="rtl"] .col-md-pull-8 {
                left: 66.66666667%;
            }

            html[dir="rtl"] .col-md-pull-7 {
                left: 58.33333333%;
            }

            html[dir="rtl"] .col-md-pull-6 {
                left: 50%;
            }

            html[dir="rtl"] .col-md-pull-5 {
                left: 41.66666667%;
            }

            html[dir="rtl"] .col-md-pull-4 {
                left: 33.33333333%;
            }

            html[dir="rtl"] .col-md-pull-3 {
                left: 25%;
            }

            html[dir="rtl"] .col-md-pull-2 {
                left: 16.66666667%;
            }

            html[dir="rtl"] .col-md-pull-1 {
                left: 8.33333333%;
            }

            html[dir="rtl"] .col-md-pull-0 {
                left: auto;
            }

            html[dir="rtl"] .col-md-push-12 {
                right: 100%;
            }

            html[dir="rtl"] .col-md-push-11 {
                right: 91.66666667%;
            }

            html[dir="rtl"] .col-md-push-10 {
                right: 83.33333333%;
            }

            html[dir="rtl"] .col-md-push-9 {
                right: 75%;
            }

            html[dir="rtl"] .col-md-push-8 {
                right: 66.66666667%;
            }

            html[dir="rtl"] .col-md-push-7 {
                right: 58.33333333%;
            }

            html[dir="rtl"] .col-md-push-6 {
                right: 50%;
            }

            html[dir="rtl"] .col-md-push-5 {
                right: 41.66666667%;
            }

            html[dir="rtl"] .col-md-push-4 {
                right: 33.33333333%;
            }

            html[dir="rtl"] .col-md-push-3 {
                right: 25%;
            }

            html[dir="rtl"] .col-md-push-2 {
                right: 16.66666667%;
            }

            html[dir="rtl"] .col-md-push-1 {
                right: 8.33333333%;
            }

            html[dir="rtl"] .col-md-push-0 {
                right: auto;
            }

            html[dir="rtl"] .col-md-offset-12 {
                margin-right: 100%;
            }

            html[dir="rtl"] .col-md-offset-11 {
                margin-right: 91.66666667%;
            }

            html[dir="rtl"] .col-md-offset-10 {
                margin-right: 83.33333333%;
            }

            html[dir="rtl"] .col-md-offset-9 {
                margin-right: 75%;
            }

            html[dir="rtl"] .col-md-offset-8 {
                margin-right: 66.66666667%;
            }

            html[dir="rtl"] .col-md-offset-7 {
                margin-right: 58.33333333%;
            }

            html[dir="rtl"] .col-md-offset-6 {
                margin-right: 50%;
                margin-left: 0;
            }

            html[dir="rtl"] .col-md-offset-5 {
                margin-right: 41.66666667%;
            }

            html[dir="rtl"] .col-md-offset-4 {
                margin-right: 33.33333333%;
            }

            html[dir="rtl"] .col-md-offset-3 {
                margin-right: 25%;
            }

            html[dir="rtl"] .col-md-offset-2 {
                margin-right: 16.66666667%;
            }

            html[dir="rtl"] .col-md-offset-1 {
                margin-right: 8.33333333%;
            }

            html[dir="rtl"] .col-md-offset-0 {
                margin-right: 0;
            }
        }

        @media (min-width: 768px) {
            html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-sm-3, html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-sm-6, html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-sm-9, html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-sm-12 {
                float: right;
            }

            html[dir="rtl"] .col-sm-offset-12 {
                margin-right: 100%;
            }

            html[dir="rtl"] .col-sm-offset-11 {
                margin-right: 91.66666667%;
            }

            html[dir="rtl"] .col-sm-offset-10 {
                margin-right: 83.33333333%;
            }

            html[dir="rtl"] .col-sm-offset-9 {
                margin-right: 75%;
            }

            html[dir="rtl"] .col-sm-offset-8 {
                margin-right: 66.66666667%;
            }

            html[dir="rtl"] .col-sm-offset-7 {
                margin-right: 58.33333333%;
            }

            html[dir="rtl"] .col-sm-offset-6 {
                margin-right: 50%;
            }

            html[dir="rtl"] .col-sm-offset-5 {
                margin-right: 41.66666667%;
            }

            html[dir="rtl"] .col-sm-offset-4 {
                margin-right: 33.33333333%;
            }

            html[dir="rtl"] .col-sm-offset-3 {
                margin-right: 25%;
            }

            html[dir="rtl"] .col-sm-offset-2 {
                margin-right: 16.66666667%;
            }

            html[dir="rtl"] .col-sm-offset-1 {
                margin-right: 8.33333333%;
            }

            html[dir="rtl"] .col-sm-offset-0 {
                margin-right: 0;
            }

            /*Kitchen Display RTL*/

            html[dir="rtl"] .status-panel ul li .pull-right {
                text-align: left;
            }

            html[dir="rtl"] ul.items-listing > li .item-wrap {
                flex-direction: row-reverse;
            }

            html[dir="rtl"] ul.items-listing > li .left-panel {
                order: 1;
            }

            html[dir="rtl"] ul.items-listing > li .right-panel {
                text-align: right;
                flex: 1;
            }

            html[dir="rtl"] ul.items-listing > li .left-panel .item-sign {
                padding: 0 3px 0 10px;
                float: left;
            }

            html[dir="rtl"] .custom-panel .panel-footer .btn + .btn {
                margin: 0 5px 0 0;
            }

            html[dir="rtl"] .order-wrap ul.info-ul li .pull-right span + span {
                margin: 0 10px 0 0;
            }

            html[dir="rtl"] .ckbox-meta label {
                margin: 0 0 0 25px;
            }

            /*------------------------------------------------------------
        Horizontal Scroll
        ------------------------------------------------------------*/
            .horizontal-parent {
                display: inline-block;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                width: 100%;
            }

            .horizontal-child {
                display: inline-block;
                float: none;
                margin-left: -3px;
                vertical-align: top;
            }
        }
        /*------------------------------------------------------------
Calendar
------------------------------------------------------------*/
        #calendar {
    width: calc(100% - -3px);
    padding: 15px 0 0 0;
    margin-left: -1px;
    margin-bottom: -1px;
}

.fc-event {
    background-color: #E3F2FD;
    border: 1px solid #E3F2FD;
    color: #1565C0;
    border-radius: 0px;
}

.fc-day {
    border-color: #bbb !important;
    color: #000;
}

.fc-dayGrid-view .fc-day-number, .fc-dayGrid-view .fc-week-number {
    padding: 10px !important;
}

.fc-day:hover {
    background-color: #f3f3f3;
    cursor: pointer;
}

.fc-event:hover {
    color: #1565C0;
}

.fc-day-header {
    color: #666;
    border-color: #eee !important;
    background-color: #fafafa;
    padding: 10px 10px !important;
}

.fc-fri, .fc-sat {
    color: #000;
    background-color: #f3f3f3;
    border-color: #ddd !important;
}

.fc-today {
    background-color: rgba(0,0,0,0) !important;
}

.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
    opacity: 1;
    border-color: #ccc !important;
}

.fc-right .fc-today-button {
    display: none;
}

.calendar-wrapper {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 120px;
}

.fc-left {
    padding-left: 15px;
}

.fc-right {
    padding-right: 15px;
}

.fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active {
    color: #fff !important;
    background-color: #226bb2 !important;
    border-color: #226bb2 !important;
}

    .fc-button-primary:not(:disabled).fc-button-active .fc-icon, .fc-button-primary:not(:disabled):active .fc-icon {
        color: #fff !important;
    }

/*------------------------------------------------------------
notification-Messages
------------------------------------------------------------*/

.event-wrapper {
}

    .event-wrapper ul {
        margin: 0;
        padding: 0;
    }

        .event-wrapper ul li {
            list-style: none;
            width: 100%;
            float: left;
            border-left: 4px solid #000;
            padding: 15px;
            background: #f3f3f3;
            margin-bottom: 2px;
        }

.event-wrapper {
    padding: 15px;
    overflow: hidden;
}

    .event-wrapper .left-section {
        width: calc(100% - 40px);
        float: left;
    }

    .event-wrapper .right-section {
        width: 40px;
        float: right;
        text-align: right;
    }

    .event-wrapper .left-section span {
        font-size: 12px;
        font-weight: bold;
    }

    .event-wrapper .left-section p {
        margin: 0;
        font-size: 12px;
        color: #333333;
    }

    .event-wrapper .left-section h2 {
        margin: 0;
        font-size: 12px;
        color: #666666;
        margin-top: 3px;
    }

    .event-wrapper .right-section span {
        font-size: 12px;
        font-weight: bold;
    }

    /*------------------------------------------------------------
notification-event-success
------------------------------------------------------------*/

    .event-wrapper ul li.event-success {
        border-color: #689f38;
        background: #f1f8e9;
    }

        .event-wrapper ul li.event-success .left-section span,
        .event-wrapper ul li.event-success .right-section span {
            color: #558b2f;
        }


    /*------------------------------------------------------------
notification-event-danger
------------------------------------------------------------*/
    .event-wrapper ul li.event-danger {
        border-color: #ef5350;
        background: #fef5f6;
    }

        .event-wrapper ul li.event-danger .left-section span,
        .event-wrapper ul li.event-danger .right-section span {
            color: #ef5350;
        }


    /*------------------------------------------------------------
notification-event-info
------------------------------------------------------------*/
    .event-wrapper ul li.event-info {
        border-color: #42a5f5;
        background: #f0f7fc;
    }

        .event-wrapper ul li.event-info .left-section span,
        .event-wrapper ul li.event-info .right-section span {
            color: #42a5f5;
        }


    /*------------------------------------------------------------
notification-event-warning
------------------------------------------------------------*/
    .event-wrapper ul li.event-warning {
        border-color: #ffa726;
        background: #fff9f0;
    }

        .event-wrapper ul li.event-warning .left-section span,
        .event-wrapper ul li.event-warning .right-section span {
            color: #ffa726;
        }


/*New css for page listing*/


/*------------------------------------------------------------
Custom Panel Code
------------------------------------------------------------*/
.custom-panel {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: #FFF;
    border-radius: 4px;
    -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
}

html[dir="rtl"] .custom-panel {
    font-family: 'DroidArabicKufiRegular', sans-serif !important;
}

.custom-panel .panel-header {
    padding: 0 20px;
    border-bottom: 1px solid #e5e5e5;
    float: none;
}

    .custom-panel .panel-header .nav-tabs {
        border: none;
        padding: 0;
    }

        .custom-panel .panel-header .nav-tabs > li {
            margin: 0 30px 0 0;
        }

html[dir="rtl"] .custom-panel .panel-header .nav-tabs > li {
    float: right;
    margin: 0 0 0 30px;
}

.custom-panel .panel-header .nav-tabs > li > a {
    font-size: 13px;
    color: #666;
    padding: 14px 0 11px;
    margin: 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0px;
}

    .custom-panel .panel-header .nav-tabs > li > a .counter {
        font-size: 10px;
        color: #FFF;
        background: #999;
        border-radius: 1px;
        text-align: center;
        padding: 0px 6px;
        margin: 0 0 0 2px;
        display: inline-block;
        min-height: 15px;
    }

.custom-panel .panel-header .nav-tabs > li.active > a,
.custom-panel .panel-header .nav-tabs > li.active > a:focus,
.custom-panel .panel-header .nav-tabs > li.active > a:hover {
    font-weight: 500;
    color: #1b67b3;
    padding: 12px 0 13px;
    border-bottom-color: #1b67b3;
    position: relative;
    bottom: -2px;
}

    .custom-panel .panel-header .nav-tabs > li.active > a .counter {
        font-weight: normal;
        background: #1b67b3;
    }

.custom-panel .panel-header .nav-tabs > li > a img {
    display: inline-block;
}

.custom-panel .panel-header .nav-tabs > li.active > a img {
    filter: invert(32%) sepia(25%) saturate(3577%) hue-rotate(186deg) brightness(65%) contrast(88%);
}

/*------------------------------------------------------------
Custom Table Code
------------------------------------------------------------*/
.table-wrapper {
    float: left;
    position: relative;
    width: 100%;
}

    .table-wrapper .table {
        margin: 0 0 5px;
        border: 1px solid #e6ebed;
        border-radius: 2px;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FFF;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

.table-wrapper .table > thead > tr > th {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    background: #f2f5f6;
    border: none;
    padding: 9px 14px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

.table-wrapper .table.table-striped > thead > tr > th {
    border-bottom: 1px solid #eee;
}

.table-wrapper tbody > tr > td {
    font-size: 12px;
    color: #333;
    border: none;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    padding: 8px 14px;
}

.table-wrapper .table a {
    color: #2196f3;
    text-decoration: none;
}

.table-wrapper .table .custom-control {
    margin-bottom: 15px;
}

.table-wrapper .table > thead > tr > th .custom-control {
    top: -2px;
}

.table-wrapper .table > tbody > tr > td .custom-indicator {
    top: -1px;
}

.table-wrapper .table > thead > tr > th.partial-select .custom-checkbox .custom-indicator:after {
    top: 2px;
    left: 4.4px;
    width: 6px;
    height: 6px;
    transform: rotate(0deg);
    border-width: 0 0px 2px 0;
}

.add-item {
    width: 22px;
    height: 22px;
    border: 1px solid #e6ebed;
    border-radius: 50%;
    background: #FFF;
    position: absolute;
    top: 6px;
    right: -10px;
    transition: all .4s ease-in-out;
}

    .add-item svg {
        fill: #707070;
        transition: all .4s ease-in-out;
        height: 20px;
        width: 20px;
    }

    .add-item.open {
        border-color: #e23a3a;
        transition: all .4s ease-in-out;
        box-shadow: 0 0 0 3px #f1d2d2;
    }

        .add-item.open svg {
            fill: #e23a3a;
            transform: rotate(45deg);
            transition: all .4s ease-in-out;
        }

    .add-item .dropdown-menu {
        min-width: 190px;
        border: none;
        border-radius: 3px;
        -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
        padding: 20px 15px 5px;
        margin: 7px 0 0;
        left: auto;
        right: 0;
    }

        .add-item .dropdown-menu .custom-control {
            margin-bottom: 22px;
        }

            .add-item .dropdown-menu .custom-control:last-child {
                margin-bottom: 17px;
            }

.table-wrapper .table > thead > tr > th .item-selection .pull-left .custom-control {
    float: left;
    top: 4px;
}

.item-selection .pull-left span {
    font-size: 12px;
    color: #333;
    float: left;
    padding: 5px 0 0 6px;
}

.item-selection .btn {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 19px 3px;
    background: #FFF;
    border-radius: 2px;
}

    .item-selection .btn + .btn {
        margin: 0 0 0 5px;
    }

.table-wrapper.has-selected-rows .table > thead > tr > th {
    padding: 5px 14px;
    background: rgba(41,150,204,.08) !important;
}

.table-wrapper .table > thead tr:nth-child(1), .table-wrapper.has-selected-rows .table > thead tr:nth-child(2) {
    display: table-row;
}

.table-wrapper.has-selected-rows .add-item, .table-wrapper.has-selected-rows .table > thead tr:nth-child(1), .table-wrapper .table > thead tr:nth-child(2) {
    display: none;
}


.action-links {
    width: 200px;
    min-width: 170px;
}

    .action-links ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

        .action-links ul li {
            display: inline-block;
            margin: 0 0 0 2px;
        }

            .action-links ul li a {
                width: 25px;
                height: 25px;
                font-size: 14px;
                line-height: 24px;
                color: #1b67b3;
                background: #f0f6fc;
                display: block;
                text-align: center;
                border-radius: 2px;
            }

            .action-links ul li.print-li a {
                color: #259942;
                background: #f0fcf3;
            }

            .action-links ul li.del-li a {
                color: #e02727;
                background: #f8eded;
            }

            .action-links ul li a i {
                color: inherit;
                font-size: inherit !important;
                padding: 5px;
            }


/*------------------------------------------------------------
Custom table filter & search panel
------------------------------------------------------------*/
.table-filter {
    width: 100%;
    float: left;
}

    .table-filter .form-control {
        font-size: 12px;
        color: #333;
        height: 30px;
        padding: 5px 12px;
        border: 1px solid #ddd;
        box-shadow: none;
        border-radius: 2px;
    }

        .table-filter .form-control:hover, .table-filter .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
        }

        .table-filter .form-control:focus {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

.table-meta {
    margin: 0 0 7px;
}

.table-toolbar .input-group, .table-toolbar .btn {
    float: left;
    border-radius: 3px;
    height: 30px;
}

.table-toolbar .input-group {
    width: 250px;
    margin: 0 10px;
}

.table-pager {
    display: inline-block;
}

    .table-pager label {
        font-size: 12px;
        color: #333;
        font-weight: normal;
        margin: 0 10px 0 0;
        padding: 5px 0 0;
    }

        .table-pager label strong {
            font-weight: 500;
        }

    .table-pager .form-control {
        width: 85px;
        margin: 0 10px 0 0;
        padding: 5px 8px;
    }

.table-meta .btn-group {
    vertical-align: top;
}

    .table-meta .btn-group > .btn {
        height: 30px;
        border-radius: 3px;
    }

.table-search {
    border: 1px solid #dce3e9;
    border-radius: 3px;
    padding: 11px 14px 0;
    margin: 0 0 15px;
    display: none;
}

    .table-search label {
        font-size: 12px;
        color: #333;
        font-weight: normal;
        margin: 0;
    }

.search-meta {
    width: calc( 100% - 80px );
    float: left;
}

.search-button {
    width: 80px;
    float: right;
    text-align: right;
    padding: 18px 0 0;
}

    .search-button .btn {
        height: 30px;
        border-radius: 3px;
    }

.search-meta .input-group-addon {
    padding: 0;
    border-color: #ddd;
}

    .search-meta .input-group-addon .form-control {
        width: auto;
        height: 28px;
        background-color: #f3f3f3;
        box-shadow: none !important;
        border: none;
    }

.control-buttons {
    border-bottom: 1px solid #eee;
    float: left;
    margin-left: -15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    margin-bottom: 15px;
    width: calc(100% + 30px);
}

/*------------------------------------------------------------
Advanced Search
------------------------------------------------------------*/
.advanced-search {
    border-bottom: 1px solid #eee;
    float: left;
    margin-bottom: 15px;
    margin-left: -15px;
    padding: 0 15px 5px 15px;
    width: calc(100% + 30px);
}

    .advanced-search .btn {
        float: right
    }

html[dir="rtl"] .advanced-search .btn {
    float: left;
}

.search-meta {
    padding-right: 15px;
    width: calc(100% - 100px) !important;
}

html[dir="rtl"] .search-meta {
    float: right;
    padding-right: 0px;
    padding-left: 15px;
}

.btn-iconic {
    padding: 0;
    min-width: 100px;
}

    .btn-iconic span {
        padding: 0 12px;
    }

    .btn-iconic i {
        border-left: 1px solid #bcbcbc;
        padding: 8px 7px;
    }

html[dir="rtl"] .btn-iconic i {
    border-left: 0px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;
}

html[dir="rtl"] .input-group .form-control:last-child,
html[dir="rtl"] .input-group-addon:last-child,
html[dir="rtl"] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
html[dir="rtl"] .input-group-btn:first-child > .btn:not(:first-child),
html[dir="rtl"] .input-group-btn:last-child > .btn,
html[dir="rtl"] .input-group-btn:last-child > .btn-group > .btn,
html[dir="rtl"] .input-group-btn:last-child > .dropdown-toggle {
    border-radius: 0px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


@media (max-width: 991px) {
    .search-meta {
        padding: 0 !important;
        width: 100% !important;
    }

    .advanced-search {
        padding-bottom: 15px;
    }

        .advanced-search .btn-iconic {
            width: 100%;
        }

            .advanced-search .btn-iconic span {
                padding: 6px 12px;
                display: inline-block;
            }

            .advanced-search .btn-iconic i {
                float: right;
            }

    html[dir="rtl"] .advanced-search .btn-iconic i {
        float: left;
    }
}


/*====================================
	Custom Drawer Code 
======================================*/

.custom-drawer-md > * {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.7, .3, .1, 1),-webkit-box-shadow .3s cubic-bezier(.7, .3, .1, 1);
    transition: -webkit-transform .3s cubic-bezier(.7, .3, .1, 1),-webkit-box-shadow .3s cubic-bezier(.7, .3, .1, 1);
    transition: transform .3s cubic-bezier(.7, .3, .1, 1),box-shadow .3s cubic-bezier(.7, .3, .1, 1);
    transition: transform .3s cubic-bezier(.7, .3, .1, 1),box-shadow .3s cubic-bezier(.7, .3, .1, 1),-webkit-transform .3s cubic-bezier(.7, .3, .1, 1),-webkit-box-shadow .3s cubic-bezier(.7, .3, .1, 1);
}

.custom-drawer-md {
    position: fixed;
    z-index: 1100;
    width: 0%;
    height: 100%;
    display: block !important;
    overflow: hidden !important;
    -webkit-transition: height 0s ease .3s,width 0s ease .3s,-webkit-transform .3s cubic-bezier(.7, .3, .1, 1);
    transition: height 0s ease .3s,width 0s ease .3s,-webkit-transform .3s cubic-bezier(.7, .3, .1, 1);
    transition: transform .3s cubic-bezier(.7, .3, .1, 1),height 0s ease .3s,width 0s ease .3s;
    transition: transform .3s cubic-bezier(.7, .3, .1, 1),height 0s ease .3s,width 0s ease .3s,-webkit-transform .3s cubic-bezier(.7, .3, .1, 1);
}

.custom-drawer-left, .custom-drawer-right {
    top: 0 !important;
    width: 0% !important;
    height: 100% !important;
}

.custom-drawer-right {
    right: 0;
}

.custom-drawer-md.in {
    width: 100% !important;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.7, .3, .1, 1);
    transition: -webkit-transform .3s cubic-bezier(.7, .3, .1, 1);
    transition: transform .3s cubic-bezier(.7, .3, .1, 1);
    transition: transform .3s cubic-bezier(.7, .3, .1, 1), -webkit-transform .3s cubic-bezier(.7, .3, .1, 1);
}

    .custom-drawer-md.in .drawer-backdrop {
        height: 100%;
        opacity: 1;
        -webkit-transition: none;
        transition: none;
        -webkit-animation: DrawerFadeIn .3s cubic-bezier(.7, .3, .1, 1);
        animation: DrawerFadeIn .3s cubic-bezier(.7, .3, .1, 1);
    }

.drawer-backdrop {
    position: absolute;
    /*	position: fixed;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    filter: alpha(opacity=45);
    -webkit-transition: opacity .3s linear,height 0s ease .3s;
    transition: opacity .3s linear,height 0s ease .3s;
    /*-webkit-animation: DrawerFadeOut .3s cubic-bezier(.7, .3, .1, 1);
	animation: DrawerFadeOut .3s cubic-bezier(.7, .3, .1, 1);*/
}


.custom-drawer-md.fade {
    opacity: 1;
}


@keyframes DrawerFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.custom-drawer-md .drawer-wrapper {
    width: 700px;
    background: #FFF;
    position: absolute;
    height: 100%;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
}

    .custom-drawer-md .drawer-wrapper.w-50pc {
        width: 50%;
    }

    .custom-drawer-md .drawer-wrapper.w-60pc {
        width: 60%;
    }

    .custom-drawer-md .drawer-wrapper.w-70pc {
        width: 70%;
    }

    .custom-drawer-md .drawer-wrapper.w-80pc {
        width: 80%;
    }

    .custom-drawer-md .drawer-wrapper.w-90pc {
        width: 90%;
    }

    .custom-drawer-md .drawer-wrapper.w-100pc {
        width: 100%;
    }

    .custom-drawer-md .drawer-wrapper.w-450 {
        width: 450px;
    }

.custom-drawer-md.custom-drawer-right .drawer-wrapper {
    right: 0;
    transform: translateX(100%);
}

.custom-drawer-md.in.custom-drawer-right .drawer-wrapper {
    transform: translateX(0%);
}

.custom-drawer-md.custom-drawer-left .drawer-wrapper {
    left: 0;
    transform: translateX(-100%);
}

.custom-drawer-md.in.custom-drawer-left .drawer-wrapper {
    transform: translateX(0%);
}

.custom-drawer-md .drawer-header, .custom-drawer-md .drawer-footer {
    height: 50px;
    background: #fafafa;
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.custom-drawer-md .drawer-footer {
    border-top: 1px solid #ddd;
    justify-content: flex-end;
}

    .custom-drawer-md .drawer-footer .btn {
        min-width: 75px;
        border-radius: 3px;
    }

        .custom-drawer-md .drawer-footer .btn + .btn {
            margin-left: 10px;
        }

.custom-drawer-md .drawer-header span {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    width: calc( 100% - 30px );
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-drawer-md .drawer-header img {
    margin: 0 auto;
    cursor: pointer;
}

.custom-drawer-md .drawer-body {
    height: calc( 100vh - 100px );
    padding: 15px;
    overflow-y: auto;
}

    .custom-drawer-md .drawer-body .mCustomScrollBox {
        background: none;
    }

.grid-control .label, .grid-control .form-control {
    display: inline-block;
}

.grid-control label {
    display: block;
    margin-right: 5px;
    margin-bottom: 0;
}

.grid-control .form-control {
    width: 100px;
    width: 100%;
    height: 26px;
}

.grid-control {
    display: flex;
    flex-wrap: nowrap;
    /*justify-content: space-between;*/
    justify-content: normal;
}

    .grid-control .control-box {
        margin: 0 5px;
    }

.btn-grid {
    font-size: 12px;
    padding: 10px 10px 0 10px;
    line-height: 37px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border: none;
    border-left: 1px solid #ddd;
    border-radius: 0px;
    background-color: #fafafa;
}

.drawer-wrapper input[type=checkbox],
.drawer-wrapper input[type=radio] {
    position: relative;
    top: 1px;
}

.drawer-wrapper tr td {
    position: relative;
}

.table-matrix tr td {
    min-width: 60px;
    padding: 6px 8px !important;
    vertical-align: middle !important;
}

.table-matrix .collapsing {
    transition: none !important;
}

.draw-box {
    display: none;
}

.drawer-wrapper tr.detailRow {
    background-color: #fafafa;
}

    .drawer-wrapper tr.detailRow td {
        padding: 4px 8px;
    }

@media (max-width: 767px) {
    .custom-drawer-md .drawer-wrapper {
        width: 100% !important;
    }

    .grid-control {
        flex-wrap: wrap;
    }

        .grid-control .control-box {
            margin-bottom: 5px;
            width: 100%;
        }
}


html[dir="rtl"] .custom-drawer-md.drawer-right .drawer-wrapper {
    transform: translateX(-100%);
    right: auto;
    left: 0;
}

html[dir="rtl"] .custom-drawer-md.in.drawer-right .drawer-wrapper {
    transform: translateX(0%);
}

html[dir="rtl"] .drawer-wrapper .checkbox-inline + .checkbox-inline,
html[dir="rtl"] .drawer-wrapper .radio-inline + .radio-inline {
    margin-left: 0;
    margin-right: 10px;
}

html[dir="rtl"] .drawer-header img {
    transform: rotate(180deg);
}

html[dir="rtl"] .drawer-footer .btn + .btn {
    margin: 0 10px 0 0;
}

html[dir="rtl"] .btn-grid {
    border-left: none;
    border-right: 1px solid #ddd;
    right: auto;
    left: 0;
}

.control-meta {
    min-width: 140px;
    display: flex;
    justify-content: space-between;
}

.control-first, .control-second {
    width: 48%;
}

.control-meta label {
    margin: 0;
}

.control-meta .form-control {
    height: 24px;
    box-shadow: none;
    border-radius: 2px;
}
.table-matrix.table > thead > tr + tr th {
    padding: 6px;
    background: #f2f5f6;
}
/*======================================
	Table fixed columns
========================================*/
.table-fixed .table {
    margin: 0;
}

.table-fixed thead tr > :first-child,
.table-fixed tbody tr > :first-child {
    position: -webkit-sticky;
    position: sticky;
    left: -1px;
    background: #f2f5f6;
    z-index: 1;
}

.table-fixed thead tr > :first-child {
    background: #f2f5f6;
}

.table-fixed thead tr th,
.table-fixed tbody tr td {
    white-space: nowrap;
}

html[dir="rtl"] .table-fixed thead tr > :first-child,
html[dir="rtl"] .table-fixed tbody tr > :first-child {
    left: auto;
    right: -1px;
}

.wizard-tab-content {
    max-height: calc( 100vh - 200px );
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden;
}
/*======================================
	Product Categories Code
========================================*/
.mt-5 {
    margin-top: 5px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

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

.text-right {
    text-align: right !important;
}

.product-row.row, .product-row.row [class*=col-lg] {
    display: flex;
}

    .product-row.row [class*=col-lg] .custom-panel {
        height: 100%;
    }

.product-search-wrap {
    width: 100% !important;
    padding: 0 !important;
    margin: 5px 0 10px;
}

.product-collapse {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    overflow: hidden;
    border-radius: 4px;
    -webkit-box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
    -moz-box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
}

.product-collapse-header {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    width: 100%;
    float: left;
    min-height: 44px;
    background-color: #FFF;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}

    .product-collapse-header i {
        font-size: 18px;
        color: #1B67B3;
        margin: 0 10px 0 0;
    }

.product-collapse-body {
    width: 100%;
    float: left;
    padding: 15px;
}

    .product-collapse-body .panel-group {
        margin: 0;
    }

    .product-collapse-body .panel {
        padding: 0;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .product-collapse-body .panel-default > .panel-heading {
        padding: 7px 5px 7px 10px;
        min-height: 40px;
        background-color: #FFF;
        border: 1px solid #F3F3F3;
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 5%);
        -moz-box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 5%);
        box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 5%);
    }

    .product-collapse-body .panel-title, .product-collapse-body .panel-body ul li .product-tree-wrap {
        font-size: 13px;
        font-weight: 400;
        color: #000;
        display: flex;
    }

        .product-collapse-body .panel-title > a {
            display: flex;
            align-items: center;
            flex: 1;
        }

            .product-collapse-body .panel-title > a i {
                font-size: 14px;
                color: #034B93;
                position: relative;
                top: 1px;
                margin: 0 10px 0 0;
            }

            .product-collapse-body .panel-title > a.collapsed i.fa-minus-square-o, .product-collapse-body .panel-title > a:not(.collapsed) i.fa-plus-square-o {
                display: none;
            }

            .product-collapse-body .panel-title > a i.fa-minus-square-o {
                color: #E02727;
            }

        .product-collapse-body .panel-title .action-links, .product-collapse-body .panel-body ul li .product-tree-wrap .action-links {
            width: auto;
            min-width: unset;
        }

    .product-collapse-body .panel-body {
        padding: 5px 0 0;
        border: none !important;
    }

        .product-collapse-body .panel-body ul.product-tree {
            padding: 0 0 0 30px;
            margin: 0;
            list-style-type: none;
            position: relative;
        }

            .product-collapse-body .panel-body ul.product-tree::before {
                content: '';
                position: absolute;
                left: 15px;
                top: -5px;
                bottom: 19px;
                border-left: 1px dashed #999;
            }

        .product-collapse-body .panel-body ul li .product-tree-wrap {
            padding: 5px 5px 5px 15px;
            min-height: 40px;
            background-color: #FCFCFC;
            border: 1px solid #F3F3F3;
            border-radius: 3px;
            display: flex;
            align-items: center;
            margin: 0 0 5px;
            position: relative;
            -webkit-box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 5%);
            -moz-box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 5%);
            box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 5%);
        }

            .product-collapse-body .panel-body ul li .product-tree-wrap span {
                flex: 1;
            }

        .product-collapse-body .panel-body ul li.active span, .product-collapse-body .panel-title.active a {
            font-weight: 600;
        }

        .product-collapse-body .panel-body ul li .product-tree-wrap::before {
            content: '';
            width: 15px;
            position: absolute;
            left: -15px;
            top: 19px;
            border-top: 1px dashed #999;
        }

@media (max-width: 1199px) {
    .product-row.row, .product-row.row [class*=col-lg] {
        display: block;
    }
}

html[dir="rtl"] .product-collapse-header i, html[dir="rtl"] .product-collapse-body .panel-title > a i {
    margin: 0 0 0 10px;
}

html[dir="rtl"] .product-collapse-body .panel-default > .panel-heading {
    padding: 7px 10px 7px 5px;
}

html[dir="rtl"] .product-collapse-body .panel-body ul.product-tree {
    padding: 0 30px 0 0;
}

    html[dir="rtl"] .product-collapse-body .panel-body ul.product-tree::before {
        left: auto;
        right: 15px;
        border-left: none;
        border-right: 1px dashed #999;
    }

html[dir="rtl"] .product-collapse-body .panel-body ul li .product-tree-wrap::before {
    left: auto;
    right: -15px;
}

html[dir="rtl"] .product-collapse-body .panel-body ul li .product-tree-wrap {
    padding: 5px 15px 5px 5px;
}


/*======================================
	Box Buttons
========================================*/
.list-btns {
    display: inline-block;
    width: 100%;
}

    .list-btns li {
        display: inline-block;
        margin: 0 5px;
        vertical-align: top;
    }

.btn-box {
    width: 200px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    border: 1px solid #1b67b3;
    border-radius: 4px;
    color: #1b67b3;
    font-weight: 500;
    font-size: 14px;
    background: rgba(0, 123, 255, 0.05);
    margin-bottom: 5px;
}

    .btn-box:hover {
        background: #89c0f6;
        background: -moz-linear-gradient(top, #89c0f6 0%, #1b67b3 100%);
        background: -webkit-linear-gradient(top, #89c0f6 0%,#1b67b3 100%);
        background: linear-gradient(to bottom, #89c0f6 0%,#1b67b3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89c0f6', endColorstr='#1b67b3',GradientType=0 );
        color: #fff;
    }

    .btn-box img {
        margin-bottom: 5px;
        filter: invert(32%) sepia(25%) saturate(3577%) hue-rotate(186deg) brightness(65%) contrast(88%);
    }

    .btn-box:hover img {
        filter: brightness(0) invert(1);
    }

    .btn-box.gray {
        border: 1px solid #626B76;
        background: rgba(98, 107, 118, 0.05);
        color: #626B76;
    }

        .btn-box.gray:hover {
            color: #fff;
            background: #4d4f52;
            background: -moz-linear-gradient(top, #6d7986 0%, #4f5a67 100%);
            background: -webkit-linear-gradient(top, #6d7986 0%,#4f5a67 100%);
            background: linear-gradient(to bottom, #6d7986 0%,#4f5a67 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d7986', endColorstr='#4f5a67',GradientType=0 );
        }

        .btn-box.gray img {
            filter: invert(48%) sepia(15%) saturate(389%) hue-rotate(171deg) brightness(93%) contrast(89%);
        }

        .btn-box.gray:hover img {
            filter: brightness(0) invert(1);
        }



/*======================================
	Image Uplaod Page Code
========================================*/
.img-upload-wrap {
    width: 100%;
    float: left;
    background: #FFF;
    border-radius: 4px;
    margin: 0 0 20px;
    box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 15%);
}

.img-upload-header, .img-upload-footer {
    width: 100%;
    float: left;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.img-upload-header {
    padding: 14px 15px 9px;
    border-bottom: 1px solid #ddd;
}

    .img-upload-header span {
        font-size: 13px;
        font-weight: 700;
        color: #000;
        display: block;
    }

.img-upload-footer {
    border-top: 1px solid #ddd;
    gap: 10px;
}

    .img-upload-footer .btn {
        width: 100%;
        font-weight: 700;
        color: #333;
        border-radius: 2px;
        padding: 6px 12px 3px;
    }

        .img-upload-footer .btn i {
            font-size: 15px;
            color: #222;
        }

.img-upload-body {
    width: 100%;
    float: left;
    padding: 20px 15px;
}

.img-upload-thumb-wrap {
    width: 120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-upload-thumb {
    width: 100%;
    height: 120px;
    background: #f9f9f9 url(../../Images/SiteImages/no_thumb.svg) no-repeat center/30px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px;
}

    .img-upload-thumb:not(.no-thumb) {
        background: #f9f9f9;
    }

    .img-upload-thumb img {
        max-width: 100%;
        max-height: 100%;
    }

.img-upload-btn {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

    .img-upload-btn .btn {
        width: 100%;
        font-size: 13px;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        text-transform: capitalize;
    }

    .img-upload-btn input[type=file] {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        opacity: 0;
        bottom: 0;
        cursor: pointer;
    }



/*------------------------------------------------------------
	Multi Step Register Page
------------------------------------------------------------*/
.reg-page {
    background-image: url(../img/login-images/login-image-01.jpg);
    background-size: cover !important;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.reg-wrapper {
    width: 100%;
    max-width: 760px;
    display: flex;
    margin: 0 auto;
    background: #FFF;
    border-radius: 4px;
    min-height: 350px;
    overflow: hidden;
    direction: rtl;
    text-align: left;
}

    .reg-wrapper h2 {
        border-bottom: 1px solid #ddd;
        font-size: 20px;
        display: inline-block;
        margin: 0 0 15px 0;
        padding: 0 0 10px 0;
        width: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }

html[dir="rtl"] .reg-wrapper h2 {
    text-align: right;
}

.reg-wrapper h2 img {
    display: inline-block;
}

.reg-wrapper h2 span {
    color: #000;
    display: inline-block;
    margin: 0 5px;
    position: relative;
    top: 2px;
}

.reg-wrapper .table-responsive {
    border: 0px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
}

.reg-wrapper table {
    border-top-color: #4a9bec;
    direction: ltr;
    font-weight: 500;
    margin-bottom: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

    .reg-wrapper table input[type="checkbox"],
    .reg-wrapper table input[type="radio"] {
        margin: 0;
    }

    .reg-wrapper table thead th {
        background-color: #1f87f1;
        border-bottom: 0px;
        border-color: #4a9bec;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
    }

    .reg-wrapper table tbody td {
        font-size: 12px;
        font-weight: 400;
    }

html[dir="rtl"] .reg-wrapper table {
    direction: rtl;
}

.form-title {
    color: #000;
    font-size: 16px;
    margin: -6px 0 24px;
    display: block;
}

    .form-title strong {
        font-weight: 600;
    }

.reg-wrapper .btn {
    font-size: 12px;
    border-radius: 3px;
    padding: 8px 33px 7px;
    text-transform: uppercase;
    margin: 3px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.reg-wrapper .btn-primary {
    background: #1f87f1;
    border: 1px solid #1f87f1;
}

    .reg-wrapper .btn-primary:hover, .reg-wrapper .btn-primary:focus {
        background: #1a72cc;
        border: 1px solid #1a72cc;
    }

.reg-wrapper .btn.btn-gray {
    color: #333;
    font-weight: 500;
}

    .reg-wrapper .btn.btn-gray:hover {
        color: #111;
    }

.reg-wrapper hr {
    margin: 3px 0 17px;
}

.reg-wrapper .form-group {
    width: 100%;
    float: left;
    margin: 0 0 17px;
}

.reg-wrapper label {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    margin: 0 0 1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.reg-wrapper .form-control {
    font-size: 13px;
    color: #333;
    height: 32px;
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 2px;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

    .reg-wrapper .form-control:hover, .form-control:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
    }

    .reg-wrapper .form-control:focus {
        border-color: #2196f3;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }

.reg-wrapper > .leftbar {
    width: calc( 100% - 220px );
    float: left;
    padding: 40px;
}

.reg-wrapper > .rightbar {
    width: 220px;
    float: right;
    background: #1f87f1;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.reg-wrapper .nav-tabs {
    border: none;
    padding: 0;
}

    .reg-wrapper .nav-tabs > li {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 25px;
        position: relative;
        pointer-events: none;
    }

        .reg-wrapper .nav-tabs > li a {
            position: static;
            border: none;
        }

.reg-wrapper .nav > li > a:focus, .reg-wrapper .nav > li > a:hover {
    background-color: transparent;
}

.reg-wrapper .nav-tabs > li:hover a, .reg-wrapper .nav-tabs > li.active > a, .reg-wrapper .nav-tabs > li.active > a:focus, .reg-wrapper .nav-tabs > li.active > a:hover {
    color: #555;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.reg-wrapper .item-counter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #1f87f1;
    background: #FFF;
    text-align: center;
    display: block;
    position: absolute;
    left: -20px;
}

    .reg-wrapper .item-counter span {
        font-size: 12px;
        font-weight: 700;
        color: #1f87f1;
        display: block;
        line-height: 36px;
    }

    .reg-wrapper .item-counter i {
        display: none;
    }

.reg-wrapper .item-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    display: block;
    opacity: .5;
}

.reg-wrapper .sub-title {
    font-size: 13px;
    color: #FFF;
    display: block;
    opacity: .5;
}

.reg-wrapper .nav-tabs > li.complete a .item-counter,
.reg-wrapper .nav-tabs > li.active a .item-counter {
    background: #0051a3;
    border-color: #0051a3;
}

    .reg-wrapper .nav-tabs > li.complete a .item-counter i {
        display: block;
        font-size: 16px;
        color: #FFF;
        line-height: 35px;
    }

    .reg-wrapper .nav-tabs > li.active a .item-counter span {
        color: #FFF;
    }

.nav-tabs > li.complete a .item-counter span {
    display: none;
}

.reg-wrapper .nav-tabs > li.complete a .item-title, .reg-wrapper .nav-tabs > li.complete a .sub-title,
.reg-wrapper .nav-tabs > li.active a .item-title, .reg-wrapper .nav-tabs > li.active a .sub-title {
    opacity: 1;
}

.reg-wrapper .check-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #1968b3;
    display: block;
    margin: 30px auto 0;
}

    .reg-wrapper .check-circle i {
        font-size: 22px;
        color: #FFF;
        display: block;
        line-height: 70px;
        text-align: center;
    }

.reg-wrapper .span-1 {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    display: block;
    margin: 20px 0 5px 0;
    text-align: center;
}

.reg-wrapper .span-2 {
    font-size: 13px;
    color: #000;
    display: block;
    margin: 0 0 50px;
    text-align: center;
}

.reg-wrapper .wizard {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
}

    .reg-wrapper .wizard li {
        display: inline;
    }

.form-error {
    font-size: 13px;
    margin: -10px 0 15px;
    display: block;
    background: #f13e3e;
    color: #FFF;
    padding: 8px 10px;
    border-radius: 0px;
    border: 1px solid #f13e3e;
    border-left: 5px solid #f13e3e;
    background: #fff;
    color: #f13e3e;
}

html[dir="rtl"] .form-error {
    text-align: right;
}

.reg-wrapper .activating {
    direction: ltr;
    margin-bottom: 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

html[dir="ltr"] .reg-wrapper .activating {
    direction: ltr;
}

.reg-wrapper .activating li {
    font-size: 13px;
    line-height: 24px;
}

.reg-wrapper .activating img {
    margin: 0 auto;
}

.reg-wrapper .leftbar {
    direction: ltr;
}

html[dir="rtl"] .reg-wrapper .leftbar {
    direction: rtl;
}

.modal .reg-wrapper {
    max-width: 100%;
}



@media (max-width:767px) {
    .reg-wrapper {
        display: block;
        width: 90%;
    }

        .reg-wrapper .item-title, .reg-wrapper .sub-title {
            display: none;
        }

        .reg-wrapper > .leftbar, .reg-wrapper > .rightbar {
            width: 100%;
            float: none;
        }

        .reg-wrapper > .leftbar {
            padding: 30px;
        }

        .reg-wrapper .item-counter {
            position: relative;
            left: auto;
            margin: 0 auto;
        }

        .reg-wrapper .nav-tabs > li {
            float: left;
            width: 33.33%;
            padding: 0;
        }

        .reg-wrapper .nav-tabs > li {
            padding: 0;
        }

        .reg-wrapper .wizard {
            margin-bottom: 30px;
        }

        .reg-wrapper .check-circle {
            margin: 20px auto 0;
        }

        .reg-wrapper .span-2 {
            margin: 0 0 50px;
        }
}

html[dir="rtl"] .reg-page,
html[dir="rtl"] .reg-wrapper .activating,
html[dir="rtl"] .reg-wrapper .form-control,
html[dir="rtl"] .reg-wrapper label,
html[dir="rtl"] .reg-wrapper .btn,
html[dir="rtl"] .reg-wrapper table,
html[dir="rtl"] .reg-wrapper h2 {
    font-family: DroidArabicKufiRegular !important;
}

html[dir="rtl"] .reg-wrapper {
    direction: ltr;
}

    html[dir="rtl"] .form-title,
    html[dir="rtl"] .reg-wrapper .form-control {
        text-align: right;
    }

    html[dir="rtl"] .reg-wrapper label {
        text-align: right;
        display: block;
    }

    html[dir="rtl"] .reg-wrapper .item-counter {
        left: auto;
        right: -20px;
    }

    html[dir="rtl"] .reg-wrapper .item-title,
    html[dir="rtl"] .reg-wrapper .sub-title {
        text-align: right;
    }


@media (max-width:767px) {
    html[dir="rtl"] .reg-wrapper .nav-tabs > li {
        float: right;
    }
}


/*------------------------------------------------------------
	Color Field
------------------------------------------------------------*/

.color-field-sm {
    padding: 0px 2px;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 0;
    margin: 0;
}