/* CSS Document */

/*
|--------------------------------------------------------------------------
| Fonts
|--------------------------------------------------------------------------
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg') format('svg');
}

/*
|--------------------------------------------------------------------------
| Boostrap v3.x
|--------------------------------------------------------------------------
*/

.hidden {
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| Core Theme
|--------------------------------------------------------------------------
*/

body {
    color: #333 !important;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: none !important;
    font-weight: 500 !important;
}

p.wordwrap { 
    width: auto; 
    word-break: break-all; 
}

.main{
    min-height: 600px;
}

section.page-header {
    background-color: #EEEEEE;
    /*border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    */
    border:0;
    margin: 0 0 35px;
    min-height: 50px;
    padding: 20px 0;
    position: relative;
    text-align: left;
}

section.page-header h1 {
    border-bottom-color: #015294;
    border:0;
    color:#32323C;
}

.col-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.embed .visible-embed {
    display: block;
}
body.embed .hidden-embed {
    display: none;
}

body.embed #header .header-body {
    background: #fff none repeat scroll 0 0;
    border-bottom: 1px solid transparent;
    border-top: 0;
    min-height: 100px;
    padding: 8px 0;
    transition: min-height 0.3s ease 0s;
    width: 100%;
    z-index: 1001;
}

a:hover, a:focus {
    text-decoration: none; 
    transition: all 0.5s ease; 
    color:#d53729;
}

img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

/*#header .header-logo img{max-width: 500px;} 

@media (max-width:1199px){
    #header .header-logo{float: none !important;}
}

@media (max-width:767px){
    #header .header-logo{float: none;}
    #header .header-logo img{margin: 15px auto; display: block; max-width: 300px;}
}
@media (max-width:480px){
    #header .header-logo img{max-width: 260px;}
}

#header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span { color: #666; }*/

#header .header-body {
    padding-bottom: 0;
}

#header .header-nav-top .nav > li > a, 
#header .header-nav-top .nav > li > span {
    color:#015294;
    font-weight: bold;
    font-size: 1.1em;

}

#header .header-nav-top .nav > li > a:hover, 
#header .header-nav-top .nav > li > a:focus {
    color:#d53729;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

#footer {
    background: #015294 none repeat scroll 0 0;
    border-top: 4px solid #015294;    
    
}

#footer .footer-ribbon::before {
    border-left-color: #d53729;
    border-right-color: #d53729;
}

#footer .footer-ribbon{
     background: #d53729
}

#footer p{
    color: #fff !important;
}

#footer .footer-copyright {
    background: #282A2B;
    border:0;
}

#footer .footer-copyright p,
#footer nav a:not(.btn)
{
    color: #ccc !important;
}

#footer .container .row > div{margin-bottom: 0;}
#footer .footer-copyright{padding:15px 0;}

#footer .link-list {
    padding-left: 0;
    padding-right: 0;
    list-style: none;
}

#footer .link-list li {
    margin-bottom: .25rem !important;
}

#footer .link-list li a{
    color: #fff !important;
}

#footer .link-list li a:hover {
    color: #cbd3da !important;
}

#footer-top #customer-review a {
    color: #fff !important;
}

#footer-top #customer-review a:hover{
    color: #cbd3da !important;
}

/*
|--------------------------------------------------------------------------
| Page Sidebar
|--------------------------------------------------------------------------
*/

.page-sidebar img{max-width: 100%;}
.page-sidebar h1,.page-sidebar h2,.page-sidebar h3,.page-sidebar h4,.page-sidebar h5,.page-sidebar h6{font-weight: 600; color:#333;}
.page-sidebar h1{font-size: 2.1em; line-height: 32px;}
.page-sidebar h2{font-size: 2em; line-height: 32px;}
.page-sidebar h3{font-size: 1.8em; line-height: 28px;}
.page-sidebar h4{font-size: 1.6em; line-height: 24px;}
.page-sidebar h5{font-size: 1.2em; line-height: 18px;}
.page-sidebar h6{font-size: 1.1em; line-height: 18px;}
.page-sidebar p{font-size: 14px; line-height: 24px; color:#333;}
.page-sidebar ul li{padding:8px 0 8px 20px; border-bottom: 1px solid #ddd; }
.page-sidebar ul li:after{
    content:"\f105 "; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block;position: absolute; left:0; top:7px;
}
.page-sidebar ul li a{color:#333;}
.page-sidebar ul li a:hover,.page-sidebar ul li a:focus{color:#d53729;}

/*
|--------------------------------------------------------------------------
| Page Content
|--------------------------------------------------------------------------
*/

.page-content img{max-width: 100%;}
.page-content p img{margin-right: 15px;}
.page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-content h5,.page-content h6{font-weight: 600; color: #333;}
.page-content h1{font-size: 2.2em; line-height: 32px;}
.page-content h2{font-size: 2em; line-height: 32px;}
.page-content h3{font-size: 1.8em; line-height: 28px;}
.page-content h4{font-size: 1.6em; line-height: 24px;}
.page-content h5{font-size: 1.2em; line-height: 18px;}
.page-content h6{font-size: 1.1em; line-height: 18px;}
.page-content p{font-size: 14px; line-height: 24px; color: #333;}
.page-content a,.page-sidebar a {color:#015294;}
.page-content a:hover,.page-sidebar a:hover{color:#d53729;} 
.page-content ul, .page-sidebar ul{list-style:none;padding-left: 0;margin-bottom:10px;}
.page-content ul li, .page-sidebar ul li{position: relative;}
.page-content ul li > div{margin-left: 0 !important;}
.page-content ul li{padding-left: 20px;}
.page-content ul li:after{
    content:"\f105"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block;position: absolute; left:0; top:0px;
}
.page-content table{margin-bottom: 15px;overflow-x: auto;box-shadow:0 1px 12px 2px rgba(0, 0, 0, 0.05)}
.page-content table tr td,.page-content table tr th{border:1px solid #dcdcdc; padding:8px;}
.page-content table tr:nth-child(2n){background-color:#f6f6f6;}
.page-content table tr th{color:#333;background-color: #f9f9f9 !important}
@media(max-width:991px){
    .page-content table{display:block;overflow-x: auto;}
}
@media(min-width:768px){
    .page-header .flex-wrapper{display: flex; justify-content: space-between;flex-wrap:wrap;}
    .page-header .flex-wrapper:before,.page-header .flex-wrapper:after{content:"";}
    .page-header .flex-wrapper .breadcrumb{text-align: right;}
    .page-header .flex-wrapper > [class*="col-"]{flex: 1;}
}
@media(max-width:767px){
    .page-header .flex-wrapper{display: block;}
}

/*
|--------------------------------------------------------------------------
| Main
|--------------------------------------------------------------------------
*/

/*.main .page-header{padding:10px 0;}
.main .page-header h1{font-size:22px;margin-bottom: 0; padding-bottom: 0;line-height: 30px;}
.main .btn{margin-bottom: 3px}*/
.image-holder > img{margin: 15px auto;display: block;max-width: 100% !important;}
#single-label-preview table img,#scm-label-preview table img, #print-preview img{width:100% !important;}


/*
|--------------------------------------------------------------------------
| Focus Indicator
|--------------------------------------------------------------------------
*/

.form-control:focus {
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.btn-primary:focus,
.btn-primary.focus {
    background-color: #0167ba;
    border-color: #016ec7 #016ec7 #015294;
    color: #FFF;
}

.btn-secondary:focus,
.btn-secondary.focus {
    background-color: #dc5448;
    border-color: #de5e53 #de5e53 #d53729;
    color: #FFF;
}

.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34
}

.btn-info:focus, 
.btn-info.focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b
}

.btn-warning:focus,
.btn-warning.focus {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00
}

.btn-danger:focus, 
.btn-danger.focus {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130
}

.btn-light:focus,
.btn-light.focus {
    background-color: #ececec !important;
    background-image: none !important;
    border-color: #e6e6e6 #e6e6e6 #cccccc !important;
}

.btn-dark:focus,
.btn-dark.focus {
    color: #FFF !important;
    background-color: #212529 !important;
    border-color: #212529 !important;
}

.btn-tertiary:focus,
.btn-tertiary.focus {
    background-color: #34c6ce;
    border-color: #3fc9d0 #3fc9d0 #2baab1;
    color: #FFF;
}

.btn-quaternary:focus,
.btn-quaternary.focus {
    background-color: #49525e;
    border-color: #4e5865 #4e5865 #383f48;
    color: #FFF;
}

/*
|--------------------------------------------------------------------------
| Circle Buttons
|--------------------------------------------------------------------------
*/

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

/*
|--------------------------------------------------------------------------
| Menu
|--------------------------------------------------------------------------
*/

ul.dropdown-menu li.active a{
    background: #f4f4f4 !important;
    color: #333 !important;
    border-radius: 0 !important;
}

ul.dropdown-menu li.active a:hover{    
    color: #333 !important;
}

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/

.required .form-label:after {
  content:" *";
  color:#a94442;
}
ul.form-validate-errors{list-style: none;}
ul.form-validate-errors li{list-style: none; text-align: left}
label.error{
    color:#a94442;
    display: block;
    margin-bottom: 10px;
    margin-top: 5px;
    font-weight: 700;
    clear: both;
}
label.error-:before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: normal;
    content:"\f00d ";
    color:#a94442;
    font-size: 16px;
    margin: 0 5px;
    font-weight: 900;
}
input[type="text"].error,
input[type="email"].error,
input[type="password"].error,
input[type="file"].error,
select.error{ 
    border: 1px solid #a94442 !important; 
}
.form-control[readonly],
.form-select[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

@media(max-width:1199px){
    .form-horizontal input.btn{margin-top: 3px !important;}
}
@media(max-width:767px){
    .form-horizontal{padding:0 15px;}
}

/*
|--------------------------------------------------------------------------
| Form Errors
|--------------------------------------------------------------------------
*/

.has-error .form-control:focus {
    box-shadow: none;
}
.has-error .form-control,
.has-error .form-control:focus {
    border-color: #a94442;
}
.has-error .control-label, 
.has-error .help-block {
    color: #a94442;
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/

.table tbody tr > td.success {
  background-color: #dff0d8 !important;
}

.table tbody tr > td.error {
  background-color: #f2dede !important;
}

.table tbody tr > td.warning {
  background-color: #fcf8e3 !important;
}

.table tbody tr > td.info {
  background-color: #d9edf7 !important;
}

.table-hover tbody tr:hover > td.success {
  background-color: #d0e9c6 !important;
}

.table-hover tbody tr:hover > td.error {
  background-color: #ebcccc !important;
}

.table-hover tbody tr:hover > td.warning {
  background-color: #faf2cc !important;
}

.table-hover tbody tr:hover > td.info {
  background-color: #c4e3f3 !important;
}

.table thead tr th{vertical-align: middle;background-color: #f9f9f9 !important;line-height: 1 !important;}
.table thead tr th a{line-height: 16px;vertical-align: middle;}
.table thead tr td .btn{width: 100%;display: block;}

@media(max-width:1199px){
    .table tbody td{max-width: 100% !important;}
    .table-custom-responsive tr{border:none; border-top:4px solid #ccc;}
    .table-custom-responsive td::before{position: static;display: inline-block;width:50%;}
    .table-hover > tbody > tr:hover{background-color: transparent;}
    .table-striped > tbody > tr:nth-of-type(2n+1){background-color: transparent;}
    .table-striped > tbody > tr > td:nth-of-type(2n+1){background-color: #f9f9f9;}
}
@media(max-width:480px){
    .table-custom-responsive td::before{position: static;display: block;}
}

/*
|--------------------------------------------------------------------------
| Responsive Table (Custom)
|--------------------------------------------------------------------------
*/

@media only screen and (max-width: 1199px) {
    
/* Force table to not be like tables anymore */
.table-custom-responsive table, 
.table-custom-responsive thead, 
.table-custom-responsive tbody, 
.table-custom-responsive th, 
.table-custom-responsive td, 
.table-custom-responsive tr { 
        display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
.table-custom-responsive thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
}

.table-custom-responsive tr { border: 1px solid #ccc; }

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

.table-custom-responsive 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 */
.table-custom-responsive td:before { content: attr(data-title); }
}

/*
|--------------------------------------------------------------------------
| JQuery Grid
|--------------------------------------------------------------------------
*/

.grid div#gridBody table.gridTable tr td {
    line-height: 20px;
    padding: 5px 5px;
    font-size: 12px;
}
table.gridTable tbody td{
    word-wrap:break-word;
    max-width: 120px;
}

/*
|--------------------------------------------------------------------------
| Webticker Header
|--------------------------------------------------------------------------
*/

#noticeboard-div {
    background-color: #7e7e7e;
    color: #fff;    
}

/*
|--------------------------------------------------------------------------
| Browser Compatibility
|--------------------------------------------------------------------------
*/

.browser-compatibility-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}

.browser-compatibility-icons li {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 20px;
    text-align: center;
}

.browser-compatibility-icons li a  {
	color: #0765ad;
    transition: color .5s;
}

.browser-compatibility-icons li a:hover {
	color: #3c92d5;
}

.browser-compatibility-icons li img  {
    opacity: 1;
    transition: opacity .5s;
}

.browser-compatibility-icons li img:hover {
    opacity: .6;
}

.browser-compatibility-icons li img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| Breadcrumb
|--------------------------------------------------------------------------
*/

.breadcrumb-item.active { color: #666; }

/*
|--------------------------------------------------------------------------
| Modal
|--------------------------------------------------------------------------
*/

/*
@media(min-width:1199px){
    .modal-lg{width: 80% !important; max-width: 920px} 
}
@media(max-width:991px){
    .modal-lg{width: 90% !important;} 
}
@media(max-width:767px){
    .modal-lg{width: auto !important;} 
}*/

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

/*
|--------------------------------------------------------------------------
| Tabs
|--------------------------------------------------------------------------
*/

.tab-content a[data-toggle="modal"] {
  display: inline-block; margin-top: 6px;
}

@media(max-width:600px){
   .tabs.tabs-simple .nav-tabs > li a{padding:15px 12px;}
   .tabs.tabs-simple .nav-tabs > li a:hover,.tabs.tabs-simple .nav-tabs > li a:focus{padding:15px 12px;}
}
@media(max-width:480px){
   .tabs.tabs-simple .nav-tabs > li {display: block;float: none;margin: 0 auto 20px !important; width: 65%;}
   }

/*
|--------------------------------------------------------------------------
| Feedback & Support
|--------------------------------------------------------------------------
*/
#feedback-support-link {
        height: 0px;
        width: 69px;
        position: fixed;
        right: -4px;
        top: 60%;
        z-index: 1000;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback-support-link a {
        display: block;
        background: #d53729;
        height: 31px;
        width: 200px;
        padding: 8px 16px;
        color: #fff;
        text-decoration: none;        
        border-color: #fff -moz-use-text-color #fff #fff;
        border-image: none;
        border-radius: 10px 10px 0 0;
        border-style: solid none solid solid;
        border-width: 1px medium 1px 1px;
        box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
        font: bold 17px/1em Arial,sans-serif;
}

#feedback-support-link a:hover {
        background: #CCC;
}

#feedback-support-left-side{
    max-height:640px;
    overflow-y:auto;
}

/*
|--------------------------------------------------------------------------
| Dashboard Featured Box Tab key focus indicator
|--------------------------------------------------------------------------
*/

.featured-box.featured-box-primary.featured-box-effect-2:focus-within .icon-featured::after{	
    box-shadow: 0 0 0 3px #015294;
    -webkit-box-shadow: 0 0 0 3px #015294;
    -webkit-transform: scale(.95);
    transform: scale(.95);
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Products
|--------------------------------------------------------------------------
*/

.product-list-info{
   padding: 9px 9px 0px 9px; 
}
.product-img{
    height: 220px !important;
}

/*
|--------------------------------------------------------------------------
| Dropzone
|--------------------------------------------------------------------------
*/

.dropzone .dz-preview .dz-error-message {
    top: 150px !important;
}

/*
|--------------------------------------------------------------------------
| Social Icons
|--------------------------------------------------------------------------
*/

.social-icons-x-twitter a:hover {
    background-color: #000 !important;
}

.social-icons-x-twitter a:hover svg {
    fill: #fff !important;
}