@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Black.woff2') format('woff2'),
        url('../fonts/Inter-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2'),
        url('../fonts/Inter-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'),
        url('../fonts/Inter-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraLight.woff2') format('woff2'),
        url('../fonts/Inter-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.woff2') format('woff2'),
        url('../fonts/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Light.woff2') format('woff2'),
        url('../fonts/Inter-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
        url('../fonts/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Thin.woff2') format('woff2'),
        url('../fonts/Inter-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2'),
        url('../fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/GLYPHICONSHalflings-Regular.woff2') format('woff2'),
        url('../fonts/GLYPHICONSHalflings-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}










main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left;
}

tr{height:20px}
input.hamburger {
  display: none;
}
input.hamburger:checked ~ label > i {
  background-color: transparent;
  transform: rotate(90deg);
}
input.hamburger:checked ~ label > i:before {
  transform: translate(-50%, 0%) rotate(45deg);
}
input.hamburger:checked ~ label > i:after {
  transform: translate(-50%, 0%) rotate(-45deg);
}
input.hamburger:checked ~ label > div::after {
  width: 100%;
}
input.hamburger:checked ~ label > div::before {
  width: 0;
}


.checkboxs input[type="checkbox"] {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.checkboxs label {
  position: relative;
  cursor: pointer;
}

.checkboxs label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}
.checkboxs input[type="checkbox"]:checked + label:before
{
	background:#fff;
}
.checkboxs input[type="checkbox"]:checked + label:after {
  content: '';
  display: block;
  position: absolute;
     top: 7px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #124634;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}



.btn {
    background: #104533;
    margin: 5px 0px;
    font-size: 12px;
    border-radius: 8px;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 10px 10px;
    border: 0;
    border: 2px solid #fff
    
}
.download {
    width: 40px;
    height: 30px;
    padding-bottom: 10px;
    background: #124634;
    color: white;
    
}
    .download:hover {
        box-shadow: 0px 15px 25px -5px ;
        transform: scale(1.03)
    }
    .download:active {
        box-shadow: 0px 4px 8px ;
        transform: scale(.98)
    }
    .v-align {
        align-items: center;
    }
.v-align label{ margin:0px;}
select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;  
    border-radius: 5px;
	border:1px solid #ccc;
	padding-left:10px;
    padding-right:10px;
    height: 34px;
	 margin: 10px 0px;
    background:url(../images/select-arrow.svg) no-repeat right;
    -webkit-appearance: none;
    background-position-x: 95%;
	width:75px;
}

.select-box {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;  
    background:url(../images/select-arrow.svg) no-repeat right;
    -webkit-appearance: none;
    background-position-x: 90%;
}


select:focus-visible{outline:0px;}
input[type="radio"]:checked {
 background:#114634;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
 /*background:#114634;*/
}

.form-input {
	width:100%;
    border: 1px solid #AAAAAA;
    border-radius: 5px;
    height: 35px;
    padding: 5px 10px;
    margin: 10px 0px;
}
.form-input:focus-visible{outline:0px;}
label { font-size:12px;}
label.hamburger {
  z-index: 9999;
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
}
label.hamburger:hover {
  cursor: pointer;
}
label.hamburger > div {
  font-size: 0.8em;
}
label.hamburger > div::after, label.hamburger > div::before {
  top: 100%;
  width: 100%;
  text-align: center;
  position: absolute;
  overflow: hidden;
  transition: width 0.25s 0.35s, color 0.45s 0.35s;
}
label.hamburger > div::after {
  content: "CLOSE";
  right: 0;
  width: 0;
}
label.hamburger > div::before {
  content: "MENU";
  left: 0;
}
label.hamburger > i {
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  top: 50%;
  background-color:#000;
  pointer-events: auto;
  transition-duration: 0.35s;
  transition-delay: 0.35s;
}
label.hamburger > i:before, label.hamburger > i:after {
  position: absolute;
  border-radius: 2px;
  display: block;
  width: 100%;
  height: 2px;
  left: 50%;
  background-color: #000;
  content: "";
  transition: transform 0.35s;
  transform-origin: 50% 50%;
}
label.hamburger > i:before {
  transform: translate(-50%, -14px);
}
label.hamburger > i:after {
  transform: translate(-50%, 14px);
}

html {
  font-family: "Inter", sans-serif;
}

body {
	  font-family: "Inter", sans-serif;
  margin: 0 auto;font-size: 14px;
  font-weight:400;
  background-color:#FAFAFA;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-wraper{width:70%;}
.primnav li img.active{display:none;}
.primnav li.active img.active{display:inline-block;}
.primnav li.active img{display:none;}

.primnav li img.active{display:none;}
.primnav li:hover img.active{display:inline-block;}
.primnav li:hover img{display:none;}

.primnav li.active {
  background-color: #124634;
  background-color: #124634;border-radius: 10px; 
  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.35));
}
.primnav li.active a{color:#fff;}
.primnav expand:hover, .primnav li:hover {
  background-color: #124634;
  background-color: #124634;border-radius: 10px; 
  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.35));
}
.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.primnav ul .sub-menu {
    display: flex;
    height: auto;
    min-height: 40px;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 8px;
}

.primnav ul li ul {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
	margin:15px 0px;width: 100%;overflow: hidden;
	display:none;
}
.primnav ul .sub-menu .menu-arrow {
    position: absolute;
    right: 5px;
    top: 9px;
    background: url(../images/select-arrow.svg) no-repeat center center;
    width: 25px;
    height: 25px;
    transform: rotate(270deg);
}
.primnav ul .sub-menu.su-active {
    padding-top: 8px;
    background-color: #124634;
    border-radius: 10px;
}
.primnav li.sub-menu.su-active img {display:none;}
.primnav li.sub-menu.su-active img.active{display:inline-block;}
.primnav ul .sub-menu.su-active a{color:#fff;}
.primnav ul li ul li{margin:5px 5px 5px 33px; filter: none; height:20px;width: 100%;}
.primnav ul li ul li:hover{background:none; color:#fff;}
.primnav ul li ul li:hover a {
    border-bottom: 1px solid #ccc;
}
input.hamburger:checked ~ nav.primnav ul .sub-menu .menu-arrow{display:none}

.primnav {
  position: relative;
  height: 58px;
  margin:20px;
  width: 100vw;
  font-size: 0.8em;
  text-transform: uppercase;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  transition: 0.6s;
  box-sizing: border-box;
}
@media (min-width: 650px) {
  .primnav {
    height: auto;
    width: 20%; max-width:300px; border-radius: 5px;
    transition: 0.6s ;
	filter: drop-shadow(1px 0px 8px rgba(0, 0, 0, 0.15));
  }
}
.primnav > ul {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;    margin: 15px 10px;
}
.primnav li {
    font-weight: 400;
    position: relative;
    margin: 10px 10px;
    height: 40px;
	display: flex;padding-left: 7px;
    align-items: center; cursor:pointer;
	  color: #000000;
}

.primnav li img{
	margin-right: 15px;
    width: auto;
}
.primnav li .tag {
  background-color: #005aa3;
  background-color: rgba(0, 112, 204, 0.8);
  color: rgba(255, 255, 255, 0.8);
  color: #e6e6e6;
  color: rgba(255, 255, 255, 0.9);
  padding: 0 0.5em;
  border-radius: 2em;
  margin-left: auto;
  
  margin-right: 0.75em;
}

.primnav li a {
    position: relative;
    align-items: center;
    white-space: nowrap;
    color: #000000;
    width: 100%;
    text-decoration: none;
    font-size: 16px;
    text-transform: capitalize;
}

.primnav li:hover a{
color:#fff;
}


.primnav li a:hover{
color:#fff;
}

.primnav .icon {
  height: 20px;
  flex-shrink: 0;
  width: 20px;
  padding: 19px;
  margin-right: 5px;
  padding-bottom: 15px;
  color: #e6e6e6;transition: 0.6s;
  color: rgba(255, 255, 255, 0.9);
}
.secnav {
  margin-left: 63px;
  border-left: 1px solid black;
  border-left-color: #0065b8;
  border-left-color: rgba(0, 112, 204, 0.9);
  overflow: hidden;
}
.secnav li {
  color: #e6e6e6;
  color: rgba(255, 255, 255, 0.9);
  max-height: 100px;
  transition: max-height 0.1s;
}
@media (min-width: 650px) {
  .secnav li {
    max-height: 0px;
    transition: max-height 0.5s 0.5s;
  }
}
.secnav li a {
  text-transform: initial;
  display: block;
  color: inherit;
  padding: 0.75em 10px;
}

user {
  padding: 5px;
  padding-bottom: 3px;
  flex-shrink: 0;
  position: fixed;
  font-weight: 400;
  right: 0;
  color: white;
  color: rgba(255, 255, 255, 0.9);
  z-index: 99999;
}
user > section {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
user > section > section {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
user img {
  height: 51px;
  width: 48px;
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
  margin-left: 10px;
  min-height: 51px;
  min-width: 48px;
  align-items: flex-end;
}
user name {
  font-weight: 400;
}
user actions {
  padding: 0.1em 0;
  font-size: 0.8em;
  display: flex;
  justify-content: flex-end;
}
user actions a {
  padding: 0 0.5em;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
user actions a:last-child {
  padding-right: 0;
}

content {
  
  color: rgba(255, 255, 255, 0.9);
  font-size: 8vw;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #FAFAFA;
  height: 100%;
  padding-top: 58px;
  box-sizing: border-box;
  position: relative;
}
@media (min-width: 650px) {
  content {
    padding-left: 58px;
    padding-top: 0;
  }
}

.features {
  
  font-size: 1rem;
  text-transform: uppercase;
}
.features li {
  width: 100%;
  text-align: center;
  padding: 0.25em;
}

/**
    SCROLLBAR STYLE FOR IE
*/
body {
  scrollbar-base-color: #0070cc;
  scrollbar-3dlight-color: #fff;
  scrollbar-highlight-color: #0070cc;
  scrollbar-track-color: #0070cc;
  scrollbar-arrow-color: #0070cc;
  scrollbar-shadow-color: #0070cc;
  scrollbar-dark-shadow-color: #0070cc;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.icon {
  display: inline-block;
  width: 5vw;
  height: 4vw;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/** hamburger */
input.hamburger {
  display: none;
}
input.hamburger:checked ~ nav.primnav {
  height: 450px;
}
@media (min-width: 650px) {
  input.hamburger:checked ~ nav.primnav {
    width: 71px;transition: 0.6s;
  }
   input.hamburger:checked ~ nav.primnav i {
     transform: rotate(-45deg);
	 margin-left: -2px;
  }
}
@media (min-width: 650px) {
  input.hamburger:checked ~ nav.primnav .secnav > li {
    max-height: 100px;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(1) {
    transition: max-height 0.5s 0.67s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(2) {
    transition: max-height 0.5s 0.69s ;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(3) {
    transition: max-height 0.5s 0.71s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(4) {
    transition: max-height 0.5s 0.73s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(5) {
    transition: max-height 0.5s 0.75s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(6) {
    transition: max-height 0.5s 0.77s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(7) {
    transition: max-height 0.5s 0.79s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(8) {
    transition: max-height 0.5s 0.81s;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(9) {
    transition: max-height 0.5s 0.83s ;
  }
  input.hamburger:checked ~ nav.primnav .secnav > li:nth-child(10) {
    transition: max-height 0.5s 0.85s;
  }
}
input.hamburger:checked ~ label > i {
  background-color: transparent;
  transform: rotate(90deg);
}
input.hamburger:checked ~ label > i:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
input.hamburger:checked ~ label > i:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
input.hamburger:checked ~ label close {
  color: rgba(255, 255, 255, 0.8);
  width: 100%;
}
input.hamburger:checked ~ label open {
  color: rgba(0, 0, 0, 0);
  width: 0;
}

label.hamburger {
  z-index: 9999;
  position: relative;
  display: block;
  height: 24px;
  width: 24px;
}
label.hamburger:hover {
  cursor: pointer;
}
label.hamburger text close,
label.hamburger text open {
  text-transform: uppercase;
  align-text: center;
  position: absolute;
  transform: translateY(24px);
  text-align: center;
  overflow: hidden;
  transition: width 0.25s 0.35s, color 0.45s 0.35s;
  font-size: 6px;
}
label.hamburger text close {
  color: rgba(255, 255, 255, 0.8);
  right: 0;
  width: 0;
}
label.hamburger text open {
  color: rgba(255, 255, 255, 0.8);
  width: 100%;
}
label.hamburger > i {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  background-color:#000;
  pointer-events: auto;
  transition-duration: 0.35s;
  transition-delay: 0.35s;
}
label.hamburger > i:before, label.hamburger > i:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  left: 50%;
  background-color: #000;
  content: "";
  transition: transform 0.35s;
  transform-origin: 50% 50%;
}
label.hamburger > i:before {
  transform: translate(-50%, -7px);
}
label.hamburger > i:after {
  transform: translate(-50%, 7px);
}

label.hamburger {
 position: relative;
  top: 14px;
  left: 17px;
}

.tabs {
 
  text-transform: uppercase;
  font-size: 1rem;
  position: fixed;
  top: 58px;
  left: 0;
  background-color: #007ee6;
  border-bottom: 1px solid #0062b3;
  width: 100vw;
  box-sizing: border-box;
}
@media (min-width: 650px) {
  .tabs {
    padding-left: calc(58px + .5rem);
    top: calc(58px - 3em);
    background-color: #0070cc;
    border: 0;
  }
}
.tabs > ul {
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
  flex-wrap: wrap;
}
@media (min-width: 650px) {
  .tabs > ul {
    justify-content: flex-start;
  }
}
.tabs .tab {
  font-weight: 300;
  font-size: 0.7em;
  padding: 1em 0.75em;
  white-space: nowrap;
  flex-shrink: 0;
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.tabs .tab:hover {
  background-color: #0062b3;
  cursor: pointer;
}

.corporate-header
{
    display: flex;
    height: 58px;
}

.corporate-header .topbar {
    min-height: 60px;
    position: fixed;
    z-index: 99;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}
.corporate-header .topbar .flex-bx {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 60px;
    max-height: 60px;
    border-bottom: 1px solid #E6E6E6;
    overflow: visible !important;
}
.corporate-header .shop-menu-btn {
    display: none;
}
.corporate-header .topbar .flex-bx a {
    padding: 20px 20px;
    max-height: 55px;
    height: 55px;
}
.corporate-header .topbar .flex-bx a {
  
    text-transform: none; 
    font-style: normal;
     font-weight: 500;
    color: #000;
    text-decoration: none;   
    flex-shrink: 1;
    font-size: 14px;
    min-height: 55px;
    max-height :55px;
}
.sp-border{ border-right: 1px solid #E6E6E6;}
.corporate-header .topbar .flex-bx .navbar {
    flex: 1 1 auto;
    padding: 0;
    height: 100%;
}
.corporate-header .topbar .flex-bx .navbar .navbar-primary {
    display: flex;
	justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1),
                -webkit-transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

table.dataTable {
    border: 1px solid #ddd;
	 font-size: 14px;order:3; 
	 border-spacing: 0;
	     /*margin-top: 20px !important;*/
}
.dataTables_wrapper{width:98%;}
.table.dataTable td{font-weight:500;vertical-align:middle !important;font-size: 12px;}
.dataTables_wrapper .dt-buttons .mRightExport, .dataTables_wrapper .dt-buttons .mRightExport:hover, .dataTables_wrapper .dt-buttons .mRightExport:focus, .dataTables_wrapper .dt-buttons .mRightExport:active {
    width: 29px;
    height: 29px;
    background: #124634 url(../images/Ecom/reset.svg) no-repeat scroll 2px 2px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
} 
.dataTables_wrapper .dt-buttons .refresh, .dataTables_wrapper .dt-buttons .refresh:hover, .dataTables_wrapper .dt-buttons .refresh:focus, .dataTables_wrapper .dt-buttons .refresh:active {
    width: 29px;
    height: 29px;
    background: #124634 url(../images/Ecom/repeat3.svg) no-repeat scroll 2px 3px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.refresh {
    width: 29px;
    height: 29px;
    background: #124634 url(../images/Ecom/repeat3.svg) no-repeat scroll 2px 3px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
}
.dataTables_wrapper .dt-buttons .buttons-colvis, .dataTables_wrapper .dt-buttons .buttons-colvis:hover, .dataTables_wrapper .dt-buttons .buttons-colvis:focus, .dataTables_wrapper .dt-buttons .buttons-colvis:active {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/download4.svg') no-repeat scroll 8px 7px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 16px;
    vertical-align: bottom;
}
.dataTables_wrapper .dt-buttons .downloadImgs, .dataTables_wrapper .dt-buttons .downloadImgs:hover, .dataTables_wrapper .dt-buttons .downloadImgs:focus, .dataTables_wrapper .dt-buttons .downloadImgs:active {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/download4.svg') no-repeat scroll 2px 2px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.downloadImgs {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/download4.svg') no-repeat scroll 2px 2px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.dataTables_wrapper .dt-buttons .filtertab, .dataTables_wrapper .dt-buttons .filtertab:hover, .dataTables_wrapper .dt-buttons .filtertab:focus, .dataTables_wrapper .dt-buttons .filtertab:active {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/download4.svg') no-repeat scroll 2px 2px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.dataTables_wrapper .dt-buttons .downloadUrl, .dataTables_wrapper .dt-buttons .downloadUrl:hover, .dataTables_wrapper .dt-buttons .downloadUrl:focus, .dataTables_wrapper .dt-buttons .downloadUrl:active {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/download3.svg') no-repeat scroll 2px 2px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.downloadUrl {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/download3.svg') no-repeat scroll 2px 2px;
    padding: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.dataTables_wrapper .dt-buttons .mRightFifteen, .dataTables_wrapper .dt-buttons .mRightFifteen:hover, .dataTables_wrapper .dt-buttons .mRightFifteen:focus, .dataTables_wrapper .dt-buttons .mRightFifteen:active {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/Search.svg') no-repeat scroll 2px 2px;
    padding-bottom: 5px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}
.mRightFifteen {
    width: 29px;
    height: 29px;
    background: #124634 url('../images/Ecom/Search.svg') no-repeat scroll 2px 2px;
    padding-bottom: 0px;
    border: 0px;
    border-radius: 5px;
    background-size: 25px;
    vertical-align: bottom;
}

.dataTables_length div {
    width: 25px;
    height: 25px;
    padding: 5px;
    cursor: pointer;
    border: 0px;
    margin: 0px 10px 0px 10px;
}
.dataTables_length div:hover {
    opacity: 0.5;
}
#sort-1:after {
    content: "";
    position: absolute;
    height: 28px;
    width: 1px;
    left: -13px;
    z-index: 9;
    top: 0;
    background: #cccc;
}
#sort-1 {
    background: url(../images/sort.svg) no-repeat scroll 2px 6px;
    background-size: 75%;
    pointer-events: none;
    margin-left: 35px; position:relative;
}

#sort-1.select-on {
    background: #cccc url(../images/sort-green.svg) no-repeat scroll 2px 6px;
    background-size: 75%; pointer-events: auto;
    border-radius: 5px;
}
#sort-2{  background:  url(../images/time.svg) no-repeat scroll 6px 6px; background-size: 60%;}
#sort-3{  background:  url(../images/Ecom/repeat3.svg) no-repeat scroll 6px 6px; background-size: 60%;}

.dataTables_length {
    width: auto;
    flex-grow:1;
    text-align: left;
    display: flex;
	    align-content: center;
    align-items: center; font-size:13px;
}
.dt-length {
    width: auto;
    flex-grow: 1;
    text-align: left;
    display: inline-grid;
    align-content: center;
    align-items: center;
    font-size: 13px;
}
.dt-buttons {
    float: right;
    order: 2;
    margin-left: 5px;
    padding-top:12px
}
.dataTables_wrapper .dt-buttons {
    float: right;
    order: 2;
    margin-left: 5px;
}
.dataTables_paginate {order:6;}
.dataTables_info {order:5;}
.dataTables_filter{order:1;margin-right: 10px;}
.dataTables_filter label{ font-weight:600 !important;}
.dataTables_wrapper.form-inline {
    justify-content: space-between;
}
.table.table-bordered.dataTable th {
    border-left-width: 0; font-size:12px;
    padding-right: 20px !important;
	 background: #124634; min-width:100px;
    color: #fff !important;
    background-repeat:no-repeat;
    background-position:center right;
    text-align:left;
}
#substitutes.table.table-bordered.dataTable th:nth-child(1){min-width:100px;}
.order-id{text-decoration:underline;}
.order-id.sorting.sorting_asc{text-decoration:none;}
.table.table-bordered.dataTable th:nth-child(1) {
  min-width:20px;
}
.table.table-bordered.dataTable td{ padding-left: 17px !important;}
.table.table-bordered.dataTable .col-2 {
  min-width: 250px;
}
.assignment {
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 20px;
    margin: 0px 0px 0px 20px;
    font-weight: 500;
    border-bottom: 3px solid #AE862E;
}

.user-name {
    background: #FAFAFA;
    padding: 8px 20px 11px 0px;
    border-radius: 20px;
}
.regular-in{    padding-left: 10px;}

.nav-arrow {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 6px 7px 7px 10px;
    position: absolute;
    right: -14px;top: 24px;
    cursor: pointer;
    background: #fff;
}


.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
table.dataTable thead .sorting_asc:after{ color:#CE9B2C;}
table.dataTable thead .sorting:after{color:#CE9B2C;}
.head-copy{ 
    font-size:28px; 
    margin:10px 5px 10px 5px
}

div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
    text-align:center;
}
    .assigned, .waiting, .preparing, .done {
    width: 10px;
    height: 10px;
    display: inline-block; margin-right:5px;
    cursor: pointer;
    border-radius: 5px;
}

.waiting { background:#FFDF00}
.preparing{ background:#2DC36A}
.assigned { background:#4174FF}
.done{ background:#C2C2C2}

.dataTable img{width:15px; margin:5px; display:inline-block;}
.data-wrap{width:100%;order: 3; }
.loginwrap{
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: space-between;
height: 100vh;}


.over-poup, .over-poup-filter, .over-poup-sort {
	display:none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: #1a1a1a8c;
    top: 0;
}

.over-poup .popup-box {
    position: absolute;
    z-index: 9999;  
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.over-poup .top {    padding: 25px;background:#114634;}
.over-poup .bottom {    padding: 15px 25px; }
.over-poup .top h3{ font-size:20px; color:#fff;}
.over-poup .top input {background:#fff url(../images/select-search.svg) no-repeat right;
background-position-x: 97%;}
.over-poup .bottom select{margin:0px; background-position-x: 96%;}
.closeme .close {
    color: #fff;
    font-weight: 400;
    position: absolute;
    top: 3px;
    right: 8px;
    text-shadow: navajowhite;
    opacity: 1;
    font-size: 16px;
    cursor: pointer;
}
.filter-popup.closeme .close { color: #000;}
.sort-popup.closeme .close { color: #000;}
.filter-popup {
    width: 50%;
    background: #fff;
    display: flex;
    padding: 25px;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));
    position: absolute;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.filter-popup .row {
    align-items: center;
}
.sort-popup {
    width: 30%;
    background: #fff;
    display: flex;
    padding: 25px;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));
    position: absolute;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#sortable{margin-top:15px;}
#sortable li {
    list-style: none;
    width: 48%;
    background: #114634;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    margin: 2px 2px;
    border: 0px;
    border-radius: 5px;
}
#sortable li.active{opacity:0.5;}


.loginwrap form{ background:#fff; padding:50px; border-radius:5px;filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.35));}
.loginwrap h3 {
    max-width: 300px;
    text-align: center;
    font-weight: 300;
}

.loginwrap h3 b {
    display: inline-block;
    font-weight: 600;
}
.login-logo {
    width: 100px;
    margin: 0px 0px 10px 0px;
    display: inline-block;
    text-align: center;
	padding:10px;
}
.login-logo-one{padding-right:15px; border-right:1px solid #ccc;}
.login-logo img{width:100%;}
.login-forgot{ color:#114634; text-decoration:underline; font-weight:600;}
.loginwrap:after {
    content: "";
    background: #114634;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
    height: 50vh;
}

.order-detail .head{align-items: center;    margin-bottom: 30px; }
.order-detail .l-panel .l-panel-bg {transition: width 246ms 0.5s ease;border-radius:5px;  padding:0px 15px;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));}
.order-detail .head h6{ margin-left:5px; padding:0px; font-size:16px; font-weight:600;}
.order-detail .head span{  padding:0px; font-size:14px; font-weight:600;}
.order-detail .head .btn{ font-size:14px; font-weight:600; pointer:none; background:none; color:#000; width:auto; padding:5px 15px; border:1px solid #cccccc59; border-radius:25px;}
.order-detail .head .btn .tooltip-point{ padding-right:10px;}
.order-detail .l-panel .d-bg{ background:#E6E6E6; padding:30px;}
.order-detail .l-panel .w-bg{background:#fff;padding:30px;}
.order-detail .l-panel .map{background:#fff; padding:0px;}
.order-detail .l-panel .map h4{padding-left:30px;font-size:14px;font-weight:600; margin-bottom:15px; }
.order-detail .l-panel table{width:100%;}
.order-detail .l-panel table td{font-size:14px; padding:10px 0px}
.order-detail .l-panel table td { width:50%; font-weight:300;}
.order-detail .l-panel table td img{padding-right:10px;}
.order-detail .l-panel table td:nth-child(even) {  font-weight:600;}

.order-detail .r-panel .head{ margin-top: -60px; margin-bottom: 28px; }
.order-detail .r-panel .btn img{padding-right:5px; width:20px;}
.order-detail .r-panel .btn.spb{padding:3px 5px 3px 10px; min-width:200px;}
.order-detail .r-panel .btn.spb2{min-width:208px;}
.order-detail .r-panel .w-bg-2{ border-radius:5px; filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));background:#fff; padding:0px;}
.order-detail .r-panel .w-bg{background:#fff;padding:30px; }
.order-detail .r-panel .map{}
.order-detail .r-panel h3{font-size:24px; margin-bottom:25px; text-align:center;}
.order-detail .r-panel .btn {
    min-width: 30%;
	width:auto;
    background: #104533;
    margin: 5px;
    font-size: 12px;
    border-radius: 10px;
    color: #fff;
    text-align: left;
    display: flex; padding:10px;
    align-items: center;border: 0;
    justify-content: flex-start;
}
.order-detail .btn:focus{border: 0;box-shadow:0 0 0 0.2rem rgb(255 255 255 / 0%);}
.order-detail .r-panel .btn span {
    padding: 5px 10px;
    background: #ccc; margin:3px;
    border-radius: 6px;
}
.order-detail .r-panel .btn span.active{background:#AE862E;}
.col-md-6.r-panel {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
}
.order-detail .r-panel .d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
    flex-wrap: wrap;
	max-width:450px;
    align-items: center;
    justify-content: flex-end;
}
.order-detail .r-panel .map {
    margin: 0px;
    padding: 0px;
}
.order-detail .r-panel .w-bg-2 .row .box {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;padding: 30px 20px 30px 20px; 
    margin-bottom: 0px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;
}
.order-detail .r-panel .w-bg-2 .col-sm-6 span{font-weight:600;}
.order-detail .r-panel .w-bg-2 .col-sm-6 span b{ color:#AE862E;}
.order-detail .r-panel .w-bg table th:first-child{text-align:left;}
.order-detail .r-panel .w-bg table td {
    text-align: center;
    font-size: 12px;
    padding: 14px 5px;
    vertical-align: middle;
}
.order-detail .r-panel .w-bg table th {
    border-left-width: 0;
	padding: 10px 16px;
    background: #124634; text-align:center;
    color: #fff !important;
}
.order-detail .r-panel .w-bg table td:first-child img{width:20px;}
.order-detail .r-panel .w-bg table td .active{text-decoration: line-through;}
.order-detail .r-panel .w-bg table td:first-child {
    text-align: left;
	text-decoration:underline;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.order-detail .r-panel .w-bg table .has-details {
  position: relative;
}
.order-detail .r-panel .w-bg table .details {
  position: absolute;
  transform: translateY(70%) scale(0);
  transition: transform 0.1s ease-in;
  transform-origin: left;
  display: inline;
  background: white;
  z-index: 20;
  min-width:300px;
  padding: 1rem;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.order-detail .r-panel .w-bg table .has-details .pop .close {
    position: absolute;
    top: 3px;
    right: 10px;
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
}

.order-detail .r-panel .w-bg table .has-details .pop .info {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 15px; font-weight:600;
}
.order-detail .r-panel .w-bg table .has-details .pop .info span{font-weight:400;}
.order-detail .r-panel .w-bg table .has-details .pop {  transform: translateY(70%) scale(1);}

.order-detail .r-panel .w-bg table td:first-child .details img{width:70px; margin-right:10px;}

.order-detail .r-panel .w-bg table .details:after {
  content: " ";
  position: absolute;
  left: 30px;
  top: -15px;
  border-top: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid #fff;
}



.order-detail .r-panel .t-box, .order-detail .r-panel .t-box-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;margin: 0px;
}
.order-detail .r-panel .t-box span{color:#AE862E;}

.order-detail .r-panel .t-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 5px solid #124634;
    padding-bottom: 15px;
}
.order-detail .r-panel .t-box-2 {border-top: 1px solid #124634;
    padding-top: 15px; margin-top:5px; margin-bottom:50px;} 
	
.order-detail .r-panel .gren-box {
    background: #124634;
    margin: 0px;
    padding: 15px;
    color: #fff;
}
.order-detail .r-panel .gren-box ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.order-detail .r-panel .gren-box ul li {
    padding: 5px 5px 5px 35px;
    min-width: 190px; font-size:12px;
    background: url(../images/foc-li.png) no-repeat 3px 8px;
    background-size: 16px;
}
.psw {
    background: url(../images/psw.svg) no-repeat 10px 12px;
    background-size: 17px;
    background-position-x: 96%;
}
.datepickers {    background: url(../images/date-icon.svg) no-repeat 3px 8px; background-size: 16px; background-position-x: 90%;}
.reports .w-bg{ border-radius:5px;     display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15)); background:#fff; padding:20px;    width: 31%; }

.reports-info .w-bg{ border-radius:5px;     display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15)); background:#fff; padding:20px;    width: 30%; }

.reports .w-bg h3 {
    font-size: 14px;
    width: 50%;
    display: inline-block;
}
.reports .w-bg select{ margin:0px;}

.reports .w-bg .btn {
    background: #104533;
    margin: 5px;
    font-size: 12px;
    border-radius:3px;
    color: #fff; width:auto;
    text-align: center;
    padding:5px 10px; border: 0;
}

.reports .w-bg .col-6 {
    display: flex; 
    flex-direction: column;
    justify-content: center;
}
.reports-info .row .row{align-items: center;}
.reports-info .row label{margin:0px;}
.profile .row{align-items: center;}
.profile .btn { width:60%;}
.profile h4{font-size:20px; margin-bottom:40px;}
table.dataTable.substitutes {
    border: 1px solid #ddd;
    font-size: 14px;
    order: 3;
    border-spacing: 0;
    min-width: 1030px;
	width:100%;
    margin-top: 20px !important;
}
.substitutes-top {
    background: #EFEFEF;
    border-radius: 5px;
    height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

.paginate_button {
    background: #fff !important;
    margin: 15px 5px 5px 5px;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    width: 120px;
}
.paginate_button:hover{background: #f1f1f1 !important;}
.paginate_button a{ color:#000; text-decoration:none; display:block; }
.paginate_button.active{width: auto;}
.paginate_button.previous a {text-align:left!important; position:relative; padding-left:25px!important; }
.paginate_button.previous a:after {
    content: "";
    background: url(../images/select-arrow.svg) no-repeat right;
    display: block;
    position: absolute;
    height: 20px;
    width: 20px;
    left: -3px;
    top: -2px;
    bottom: 90%;
    transform: rotate(90deg);
}

.paginate_button.next a {text-align:right!important; position:relative; padding-right:25px!important;}
.paginate_button.next a:after {
    content: "";
    background: url(../images/select-arrow.svg) no-repeat right;
    display: block;
    position: absolute;
    height: 20px;
    width: 20px;
    right: -3px;
    top: 4px;
    bottom: 90%;
    transform: rotate(270deg);
}

.foc label{font-size:14px;}
.foc .btn{font-size:14px;}
.foc-tab-th{width:45%}
.foc .dataTables_wrapper{width:100%}
.foc .dataTables_wrapper .row {
    width: 100%;
    margin: 0px;
}
.foc .datepickers{  background-position-x: 96%; height:40px;}
.foc input.form-control{background-color:transparent;}
.foc h3.head-copy{margin-bottom:0px;}
.foc .pagination{margin-bottom:20px;}
.foc .foc-based-box .col{background:#EFEFEF; padding:20px;}
.foc .foc-based-box .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.popup table .has-details {
	position:relative;
  text-decoration: underline;
}
.popup table .details {
  position: absolute;
  top:-60px;
  transform: translateY(70%) scale(0);
  transition: transform 0.1s ease-in;
  transform-origin: left;
  display: inline;
  background: white;
  z-index: 20;
  min-width:220px;
  padding: 1rem;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.popup table .has-details .pop .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
}
.popup .info span {
    text-decoration: none;
    color: #000;
    margin: 0px 0px;
    font-size: 14px;
    padding: 4px 0px;
    display: block;
}
.popup.order table .has-details .pop .info{ max-height:200px; width:250px;}
.popup table .has-details .pop .info { width:100%;
    align-items: center; max-height:100px;
    flex-direction: row; font-weight:600; margin-top:20px;
}
.popup table .has-details .pop {  transform: translateY(70%) scale(1);}
.popup table .details:after {
    content: " ";
    position: absolute;
    left: 30px;
    top: -9px;
    border-top: none;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #fff;
}
.foc {width:70%;}
.foc .foc-based-box .col-md-12 label{margin:0px;}
.foc input[type="radio"] {visibility:hidden;}
.foc input[type='radio']:after {
        width: 17px;
        height: 17px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: transparent;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #ccc;
    }

   .foc input[type='radio']:checked:after {
        width: 17px;
        height: 17px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #124634;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #ccc;
    }
.foc-repeat{ background:#FAFAFA; filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));display: inline-block;}
.foc-repeat .wb-bg{ background:#fff; padding:20px;}
.foc-repeat select{margin:0px;}
.foc-repeat .sort {
    display: flex;
    justify-content: space-around;
    background: #efefef;
    align-items: center;
    padding: 8px 5px;
}
.foc .more-button {
    width: 300px;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    padding: 10px 20px;
    background: #124634;
    border-radius: 10px;
}

.foc .more-button p{font-size:14px; color:#fff;}
.foc .more-button label{font-size:14px; color:#fff; margin:0px;}
.foc-repeat .sort label{ margin:0px;}

.foc textarea {width:100%; border:1px solid #ccc; padding:15px;}
#container-2, #container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}
.dataTables_wrapper .dataTables_length select{margin: 10px 5px;}
.footer{ margin-top:50px; font-size:12px; border-top:1px solid #ccc; padding-top:20px; margin-bottom:25px;}


.tooltips {
  position: relative;
}

.tooltips .tooltiptext {
  visibility: hidden;
  background-color: #AE862E;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 100;
  bottom: 150%;
  left: 50%;
  margin-left: -20px;
  box-sizing:border-box;
}

.tooltips .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #AE862E transparent transparent transparent;
}

.tooltips:hover .tooltiptext {
  visibility: visible;
}

.ex-5, .ex-10 {
    background: #6a6a6a;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px;
    color: #fff;
	cursor:pointer;
}
.ex-5.active, .ex-10.active { background: #124634;}
















@media only screen and (min-width:850px) and (max-width:1100px) {
	.primnav li a{font-size:12px;}
	.primnav li img {    margin-right: 6px;    width: auto;}
	input.hamburger:checked ~ nav.primnav ul li {overflow:hidden;}
	.corporate-header .topbar .flex-bx a{ font-size:12px;padding: 20px 10px;}
	.assignment{    margin: 0px 0px 0px 5px;}
	.position-toright img{width:20px}
	.logo-link img{    width: 85px;}
	.reports .w-bg{min-width: 296px; padding: 15px;}
	.reports-info .w-bg{min-width: 296px; padding: 15px;}
	.col-sm-8.foc-based-box {    width: 100%;    max-width: 100%;}
		.foc-repeat .col-md-3{width: 50%;
    max-width: 50%;
		-ms-flex: 0 0 50%;
    flex: 0 0 50%;}
	}


@media only screen and (min-width:300px) and (max-width:2850px) {
	.foc label {
    font-size: 12px;
}
    .btn-Mange {
        width: 100%
    }
.foc-based-box .row {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}
	.col-sm-8.foc-based-box {    width: 100%;   }
	.foc .foc-based-box .col {
    padding: 15px;
    max-width: 100%;
    margin: 5px;
}
	.reports-info .w-bg{min-width: 296px; padding: 15px;}
	.reports .w-bg{min-width: 296px; padding: 15px;}
.corporate-header .topbar .flex-bx {
    flex-wrap: wrap;
    max-height: initial;
    justify-content: left;
}
.corporate-header {    
    display: flex;    
    /*height: 130px;*/

}
.navbar.mobile-show{border-top:1px solid #ccc;}
.corporate-header .topbar .flex-bx .position-toright {    margin-bottom: 10px;  }
.corporate-header .topbar .flex-bx .position-toright a {
    padding: 10px 10px 0px 10px;min-height: 40px;
    width: auto;
    /*display: inline-block;*/
    font-size: 12px;
    min-height: 30px;
    height: 40px;
    /*padding-right:50px*/
}
.corporate-header .topbar .flex-bx .position-toright a img{width:30px;}
.corporate-header .topbar .flex-bx .position-toright a .assignment{margin:0px;}
.corporate-header .topbar .flex-bx .navbar .navbar-primary{    
    justify-content: end; 
    align-items: end;
    min-height:60px;
    max-height:60px;
}
.sp-border{border-left:1px solid #ccc;}
.primnav li{padding:5px; margin-left: 0px;}
.primnav li a{font-size:15px;}
.primnav li.active {    border-radius: 7px;    filter: none;}
.primnav li img {
    margin-right: 5px;    
    width: 30px;

}
.primnav{margin:5px; width: 25%; height:450px;}
.primnav expand:hover, .primnav li:hover{ filter:none}
.main-wraper {
    width: 68%;
    margin: 0px !important;
    padding: 5px;
    min-height:725px;
}
.primnav li {
    padding: 5px;
    margin-left: 0px;overflow: hidden;
}
.dataTables_length label{display: contents;}

}
@media only screen and (min-width:450px) and (max-width:850px) {
	.foc-repeat .col-md-3{width: 50%;
    max-width: 50%;
		-ms-flex: 0 0 50%;
    flex: 0 0 50%;}
.dataTables_wrapper.form-inline {
    justify-content: space-between;
}
.dataTables_filter {    margin-right: 0px;}	
input.hamburger:checked ~ nav.primnav {    width: 55px;height: auto;}
}
@media only screen and (min-width:300px) and (max-width:450px) {
	
	.order-detail .r-panel .btn.spb2 {    min-width: 190px;}
	.head-copy{
        margin:0px;
        font-size:large;
	}
    .primnav li img {
        margin-right: 10px;
        /*width: 15px;}*/
    }
    .modal-content {
        width: 80%;
    }
.primnav{width:80%}
.corporate-header {    display: flex;    height: 151px;}
input.hamburger:checked ~ nav.primnav {
    height: 100vh;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;   transition: 0.6s;
	margin: 0;
    filter: drop-shadow(19px 3px 34px black);
}
.corporate-header .topbar .flex-bx {
    flex-wrap: wrap;
    max-height: initial;
    justify-content: left;
}
.primnav li {
    padding: 8px 15px;
    margin-left: 10px;
}
.primnav {
    width: 100%;
    position: absolute;
    height: 100vh;
    z-index: 99;
    left: -350px;
    max-width: 300px;
	    transition: 0.6s;
    top: 0;
}
.corporate-header .topbar .flex-bx a {
    padding: 20px 13px;
}
input.hamburger {
    width: 40px;
    height: 40px;
    display: block;
    position: fixed;
    top: 6px;
    z-index: 99;
    right: 8px;
    -webkit-appearance: none;
    background: url(../images/menu.png) no-repeat left;
    background-size: 90%;
	border: 1px solid #ccc;
    border-radius: 5px;

}
    
    

    

input.hamburger[type="checkbox"]:checked {
	/* background: url(../images/close.png) no-repeat left;*/
    background-size: 90%;
}
.dataTables_filter label {
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
}
.dataTables_wrapper.form-inline {
    justify-content: flex-start;
}
.order-detail .head {
    align-items: baseline;
    margin-bottom: 30px;
}
.reports-info .w-bg{min-width: 320px; padding: 15px;}
	.reports .w-bg{min-width: 320px; padding: 15px;}

}

@media only screen and (min-width:300px) and (max-width:1100px) {
	.col-md-6.l-panel{    width: 100%;    max-width: 100%;    flex: 0 0 100%;}
	.col-md-6.r-panel{    width: 100%;    max-width: 100%;    flex: 0 0 100%;}
	.order-detail .r-panel .head {
    margin-top: 25px;
    margin-bottom: 28px;
}

    .darkgoldenrod {
        background-color: goldenrod;
    }
}