html,
body {
  min-height: 100%;
  height: 100%;
  background-color: #ffffff;
  font-size:93%;
  color: #445566;
  line-height:1;
  margin-bottom: 30px;
  font-display: fallback;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (max-width: 767px) {
  body {
        font-size: 4vw;
   }
}
.wrapper {
  /* min-height: 1200px; */
  position: static;
  overflow: hidden;
  background-color: #d5dade;  
}
.wrapper:before,
.wrapper:after {
  content: " ";
  display: table;
}
.wrapper:after {
  clear: both;
}

.add-icon {
  background: url(/assets/img/ekle.png);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 5px 5px;
  width: 35px;
  cursor: pointer;
}
.remain {
  font-weight: bold;
  border-radius: 6px;
  font-size: 16px;
  background-color: #1a4863;
  width: 60px;
  padding: 5px;
  margin: 0;
  display: flex;
  align-items: right;
  justify-content: right;
}
.remain-white {
  color: #758798;
}
.remain-red {
  color: #fe2e2e;
}
.remain-green {
  color: #00be00;
}
.remain-arrow {
  color: #8db2bb;
  margin-left: 3px;
  font-size: 20px;
}
.trade-tab {
  width: 94px;
  height: 35px;
  font-size: 17px;
  background-color: #c5d2dc42;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  padding-top: 9px;
  margin-top: 4px;
  border-style: solid;
  border-color: #a3b5c340;
}
.trade-tab:active {
  width: 94px;
  height: 35px;
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  background-color: #225588;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  padding-top: 9px;
  margin-top: 4px;
  border-style: solid;
  border-color: #336699;
}
.trade-tab-active {
  font-weight: bold;
  color: #ffffff;
  background-color: #225588;
  border-color: #336699;
}

.content-wrapper {
  -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  /* margin-left: 50px; */
  z-index: 820;
}

.st-big-icon{
  color: var(--st-accent, #336699) !important;
}

/* accents per type */
.st-exp{ --st-accent: #3d78c2; }   /* Export */
.st-imp{ --st-accent: #2f7d6a; }   /* Import */
.st-crs{ --st-accent: #9d61c5; }   /* Cross */
.st-dms{ --st-accent: #8c5e2d; }   /* Domestic */

.st-sea{ --st-accent: #5f7fe0; }   /* Sea */
.st-air{ --st-accent: #009ec9; }   /* Air */
.st-land{ --st-accent: #3dae00; }   /* Land */
.st-rail{ --st-accent: #c96800; }   /* Rail */

.st-full{ --st-accent: #c73800; }   /* FULL */
.st-partial{ --st-accent: #6e8600; }   /* Partial */

@media (max-width: 767px) {
  .content-wrapper {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  
}


@media (min-width: 767px) {
  .content-wrapper {
    padding-top: 55px;
  }
}
@media (max-width: 767px) {
  .content-wrapper {
    padding-top: 55px;
  }
}
.content-wrapper {
  min-height: 100%;
  z-index: 800;
}

.fixed .main-header,
.fixed .main-sidebar {
  position: fixed;
}
.fixed .main-header {
  top: 0;
  right: 0;
  left: 0;
}
.fixed .content-wrapper {
  padding-top: 50px;
}


.content {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 50px;
  min-height: 700px;
}



a {
  color: #445f6f;
}
a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: none;
  color: #c53434;
}
.page-title {
  position: relative;
  margin: 10px 0 10px 0;
  top: 14px;
  font-size: 18px;
  color: #fff;
  text-shadow: 2px 2px 1px #552244;
  max-width: 300px;
}
.page-header {
  margin: 10px 0 15px 0;
  font-size: 22px;
}
.page-header > small {
  color: #666;
  display: block;
  margin-top: 5px;
}
.list-page {
  max-width: 1600px;
}
.notify-item {
  width: 95%;  
  padding-top: 7px; 
  padding-bottom: 7px; 
  padding-left: 5px; 
  display: grid; 
  background: linear-gradient(to bottom, #e8e8e8 1px, #ffffff 1px);
}
.notify-time {
  text-align: right; 
  color: #383838;  
}
.notify-time-viewed {
  text-align: right; 
  color: #999999;  
}
.not-viewed-notify {
  font-weight: bold;
  color: #1f385e;
}
.viewed-notify {
  color: #999999;
}
.main-header {
  position: fixed;
  top: 0;
  max-height: 100px;
  z-index: 1030;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.main-header > .navbar {
  -webkit-transition: margin-left 0.3s ease-in-out;
  -o-transition: margin-left 0.3s ease-in-out;
  transition: margin-left 0.3s ease-in-out;
  margin-bottom: 0;
  margin-left: 180px;
  border: none;
  height: 0px;
  border-radius: 0;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.main-header #navbar-search-input.form-control {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}
.main-header #navbar-search-input.form-control:focus,
.main-header #navbar-search-input.form-control:active {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
}
.main-header #navbar-search-input.form-control::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
.main-header #navbar-search-input.form-control:-ms-input-placeholder {
  color: #ccc;
}
.main-header #navbar-search-input.form-control::-webkit-input-placeholder {
  color: #ccc;
}
.main-header .navbar-custom-menu {
  float: right;
}
@media (max-width: 991px) {
  .main-header .navbar-custom-menu a {
    color: inherit;
    background: transparent;
  }
}
@media (max-width: 767px) {
  
}
.main-header .sidebar-toggle {
  float: left;
  background-color: transparent;
  background-image: none;
  padding: 15px 15px;
  
  color: #ccc;
}
.main-header .sidebar-toggle:before {
  content: "\f0c9";
}
.main-header .sidebar-toggle:hover {
  color: #fff;
}
.main-header .sidebar-toggle:focus,
.main-header .sidebar-toggle:active {
  background: transparent;
}

.main-header .navbar .nav > li > a > .label {
  position: absolute;
  top: 9px;
  right: 7px;
  text-align: center;
  font-size: 9px;
  padding: 2px 3px;
  line-height: .9;
}
.main-header .logo {
  -webkit-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  display: block;
  float: left;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  width: 180px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  overflow: hidden;
}
.main-header .logo .logo-lg {
  position: fixed;
  display: block;
}
@media (max-width: 768px) {
  .main-header .logo .logo-lg {
    display: none;
  }
}
.main-header .logo .logo-mini {
  position: fixed;
  display: none;
}

.export{
  background-color: #2563ebb8 !important;
  color: #FFFFFF !important;
}

/* IMPORT */
.import{
  background-color: #1faa53c2 !important;
  color: #FFFFFF !important;
}

/* CROSS */
.cross{
  background-color: #d68600ba !important;
  color: #FFFFFF !important;
}

@media (max-width: 991px) {
  
}

@media (max-width: 991px) {
  .navbar-custom-menu .navbar-nav > li {
    float: left;
  }
  .navbar-custom-menu .navbar-nav {
    margin: 0;
    float: left;
  }
  .navbar-custom-menu .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .main-header {
    position: relative;
  }
  .main-header .logo,
.main-header .navbar {
    width: 100%;
    float: none;
  }
  .main-header .navbar {
    margin: 0;
  }
  .main-header .navbar-custom-menu {
    float: right;
  }
}
@media (max-width: 991px) {
  
}
.main-sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  padding-top: 50px;
  min-height: 100%;
  max-height: 100%;
  width: 180px;
  z-index: 1020;
  -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  box-shadow: 1px 0 1px 0 rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
  .main-sidebar {
    padding-top: 50px;
  }
}
@media (max-width: 767px) {
  .main-sidebar {
    -webkit-transform: translate(-180px, 0);
    -ms-transform: translate(-180px, 0);
    -o-transform: translate(-180px, 0);
    transform: translate(-180px, 0);
  }
}
@media (min-width: 768px) {
  
}
@media (max-width: 767px) {
  .sidebar-open .main-sidebar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.sidebar {
  padding-bottom: 0;
  line-height: 0.8;
  font-size: 1.1em;
}

@media (min-width: 768px) {
  .sidebar-mini.sidebar-open .content-wrapper {
    margin-left: 180px!important;
    margin-right: 40px;
    z-index: 840;
  }

  .sidebar-mini.content-bg .content-wrapper {
      margin-left: 10px !important;
      margin-right: 10px;
  }
}

.main-sidebar:hover {
  width: 180px;
}

.header-menu-li {
  padding: 2px;
  font-size: 25px;
}

.control-sidebar {
  top: 20px;
  right: -200px;
  width: 200px;
  -webkit-transition: right 0.3s ease-in-out;
  -o-transition: right 0.3s ease-in-out;
  transition: right 0.3s ease-in-out;
}
.control-sidebar {
  position: fixed;
  padding-top: 0px;
  z-index: 1010;
  height: 100%;
  overflow: auto;
}
@media (max-width: 768px) {
  .control-sidebar {
    padding-top: 0px;
  }
}
.control-sidebar > .tab-content {
  padding: 10px 15px;
}

@media (min-width: 768px) {
  
}

@media (max-width: 768px) {
  
}
.control-sidebar-heading {
  font-weight: 400;
  font-size: 16px;
  padding: 10px 0;
  margin-bottom: 10px;
}
.control-sidebar-subheading {
  display: block;
  font-weight: 400;
  font-size: 14px;
}
.control-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
}
.control-sidebar-menu > li > a {
  display: block;
  padding: 5px 15px;
}
.control-sidebar-menu > li > a:before,
.control-sidebar-menu > li > a:after {
  content: " ";
  display: table;
}
.control-sidebar-menu > li > a:after {
  clear: both;
}
.control-sidebar-menu > li > a > .control-sidebar-subheading {
  margin-top: 0;
}
.control-sidebar-menu .menu-icon {
  float: left;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  margin-right: 5px;
  line-height: 0px;
  color: #787aa5 !important;
}
.control-sidebar-menu .menu-info {
  margin-left: 45px;
  margin-top: 3px;
}
.control-sidebar-menu .menu-info > .control-sidebar-subheading {
  margin: 0;
}
.control-sidebar-menu .menu-info > p {
  margin: 0;
  font-size: 11px;
}
.control-sidebar-menu .progress {
  margin: 0;
}
.control-sidebar-light {
  color: #5e5e5e;
}
.control-sidebar-light {
  background: #f9fafc;
  border-left: 1px solid #d2d6de;
}
.control-sidebar-light .control-sidebar-heading,
.control-sidebar-light .control-sidebar-subheading {
  color: #111;
}
.control-sidebar-light .control-sidebar-menu {
  margin-left: -14px;
}
.control-sidebar-light .control-sidebar-menu > li > a:hover {
  background: #f4f4f5;
}
.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
  color: #5e5e5e;
}
.dropdown-menu {
  border-color: #e6e4e4;
}
.dropdown-menu > li > a {
  color: #777;
}
.dropdown-menu > li > a > .glyphicon,
.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .ion {
  margin-right: 10px;
}
.dropdown-menu > li > a:hover {
  background-color: #e1e3e9;
  color: #333;
}

.navbar-nav > .notifications-menu > .dropdown-menu {
  width: 350px;
  padding: 0 0 0 0;
  margin: 0;
  top: 100%;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.navbar-nav > .tasks-menu > .dropdown-menu {
  width: 250px;
  padding: 0 0 0 0;
  margin: 0;
  top: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.navbar-nav > .notifications-menu > .dropdown-menu > li,
.navbar-nav > .tasks-menu > .dropdown-menu > li {
  position: relative;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #ffffff;
  padding: 7px 10px;
  border-bottom: 1px solid #f4f4f4;
  color: #444444;
  font-size: 16px;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 12px;
  background-color: #fff;
  padding: 7px 10px;
  border-bottom: 1px solid #eeeeee;
  color: #444!important;
  text-align: center;
}
@media (max-width: 991px) {
  .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
    background: #fff!important;
    color: #444!important;
  }
}
.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
  text-decoration: none;
  font-weight: normal;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
  max-height: 500px;
  margin: 0;
  padding: 0px 4px 0px 2px;
  list-style: none;
  background-color: #ffffff;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
  display: block;
  white-space: nowrap;
  border-bottom: 1px solid #f4f4f4;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
  background: #bdd6e5;
  text-decoration: none;
  color: #335566;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
  color: #444444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
  width: 20px;
}

.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
  padding: 10px;
}
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
  font-size: 14px;
  padding: 0;
  margin: 0 0 10px 0;
  color: #666666;
}
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
  padding: 0;
  margin: 0;
}
.navbar-nav > .user-menu > .dropdown-menu {
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  padding: 1px 0 0 0;
  border-top-width: 0;
  width: 250px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.navbar-nav > .user-menu > .dropdown-menu {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  padding: 10px;
  text-align: center;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
  z-index: 5;
  height: 150px;
  width: 150px;
  border: 3px solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
  z-index: 5;
  color: #fff;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  margin-top: 10px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
  display: block;
  font-size: 14px;
}

@media (max-width: 991px) {
  
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  background-color: #27374f;
  padding: 10px;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer:before,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
  content: " ";
  display: table;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
  clear: both;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
  color: #666666;
}
@media (max-width: 991px) {
  .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
    background-color: #eaeaea;
  }
  .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
    background-color: #f9f9f9;
  }
}
.navbar-nav > .user-menu .user-image {
  float: left;
  width: 35px;
  height: 35px;
  border-radius: 20%;
  margin-right: 10px;
  margin-top: 7px;
}
@media (max-width: 767px) {
  .navbar-nav > .user-menu .user-image {
    float: none;
    margin-right: 0;
    margin-top: 7px;
    line-height: 10px;
  }
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    transform: perspective(400px);
  }
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
  }
}
.navbar-custom-menu > .navbar-nav > li {
  position: relative;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  position: absolute;
  right: 0;
  left: auto;
}
@media (max-width: 991px) {
  .navbar-custom-menu > .navbar-nav {
    float: right;
  }
  .navbar-custom-menu > .navbar-nav > li {
    position: static;
  }
  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    position: absolute;
    right: 5%;
    left: auto;
    border: 1px solid #ddd;
    background: #fff;
  }
}
.form-control:focus {
  border-color: #3c8dbc;
  box-shadow: none;
}
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder {
  color: #bbb;
  opacity: 1;
}
.form-control:not(select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.input-group .input-group-addon {
  border-color: #d2d6de;
}
.progress,
.progress > .progress-bar {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.progress,
.progress > .progress-bar,
.progress .progress-bar,
.progress > .progress-bar .progress-bar {
  border-radius: 1px;
}
.table tr > td .progress {
  margin: 0;
}
@media (max-width: 767px) {
  
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@media (max-width: 991px) {
  
}
.save-alert-box {
  position: fixed !important;
  top: 80px;
  z-index: 9999;
  max-width: 600px;
  width: fit-content;
  height: fit-content;
  background: linear-gradient(135deg, #1a7a44, #146035) !important;
  border: 1px solid #28a85e !important;
  border-radius: 10px !important;
  color: #d4f5e4 !important;
  padding: 12px 16px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(40,168,94,0.25) !important;
  animation: fh-slide-in 0.3s ease;
  min-width: 225px;
  min-height: 65px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 15px;
  padding-top: 0;
  text-align: center;
}
.save-alert-box b { color: #7ef0b4; }
.save-alert-box .fa-info { font-size: 22px; color: #7ef0b4; vertical-align: middle; }

.error-alert-box {
  position: fixed !important;
  top: 80px;
  z-index: 9999;
  max-width: 420px;
  width: fit-content;
  height: fit-content;
  background: linear-gradient(135deg, #8e2020, #6b1818) !important;
  border: 1px solid #c03030 !important;
  border-radius: 10px !important;
  color: #fdd !important;
  padding: 12px 16px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(192,48,48,0.25) !important;
  font-size: 14px;
  animation: fh-slide-in 0.3s ease;
  min-width: 225px;
  min-height: 65px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 15px;
  padding-top: 0;
  text-align: center;
}

.con-dash-box {
  display: block;
  height: 100%;
  background: #fff;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 15px;
  box-shadow: 1px 0 0 2px rgba(0, 0, 0, 0.08), 1px 3px 2px 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.con-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 40px;
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
  font-size: 20px;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.9);
}
.con-box-content {
  padding: 0 5px;
}
.con-box-icon > img {
  max-width: 100%;
}
.default-item {
  border-bottom-style: dashed !important;
  border-bottom-color: crimson !important;
}
.prc-list-edit {
  margin: 10px;
  padding: 5px;
  width: 98%;
  background-color: #eaebeb;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3), 0px 3px 12px 0 rgba(0, 0, 0, 0.1);  
  line-height: 3;
}
.prc-main-box {
  display: flex;
  height: 150px;
  margin: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;  
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3), 0px 3px 12px 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.prc-main-icon {
  width: 120px;
  padding: 10px;
  font-size: large;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;  
  background-color: #b0c2d5;
  border-radius: 10px 0 0 10px;
}
.prc-main-count {
  background-color: #dcdcdc;
  color: #c36d6d;
  border-radius: 30px;
  width: 60px;
  padding: 13px;
  margin-top: 20px;
  font-size: large;
  text-align: center;
}

.prc-main-content {
  padding: 20px;
  width: 100%;
  font-size: large;
  font-weight: bold;
  color: #357ba5;  
}
.prc-main-count:hover,
.prc-main-count:active {
  background-color: #b0d0df !important;
}
.percentage-ex {
  background-color:#e6ebbd !important;
}
.percentage-lc {
  background-color: #c1e8f1 !important
}
.percentage-subtotal {
  color: #234568;
}
.percentage-total {
  color: #682830;
}
.opr-icon-ship {
  background-image: url(/assets/img/ship.png);
}
.opr-icon-aircraft {
  background-image: url(/assets/img/aircraft.png);
}
.opr-icon-trailer {
  background-image: url(/assets/img/trailer.png);
}
.opr-icon-train {
  background-image: url(/assets/img/train.png);
}
.opr-icon-domestic {
  background-image: url(/assets/img/domestic.png);
}
.opr-icon-transshipment {
  background-image: url(/assets/img/transshipment.png);
}
.opr-main-box {
  display: flex;
  height: 150px;
  background: #f0f0f0;
  border-radius: 2px;
  margin: 20px;
  box-shadow: 1px 0 0 2px rgba(0, 0, 0, 0.08), 1px 3px 2px 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
  border-radius: 10px;
}

.opr-main-icon {
  width: 120px;
  padding: 10px;
  font-size: large;
  border-radius: 10px 0 0 10px;
  box-shadow: 1px 0 0 2px rgba(0, 0, 0, 0.08), 1px 3px 2px 0 rgba(0, 0, 0, 0.1);  
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;  
}
.opr-main-count {
  
  color: #c36d6d;
  
  width: 60px;
  padding: 13px;
  margin-top: 20px;
  font-size: x-large;
  text-align: center;
}
.opr-main-count-red {
  color: #ffffff;
  background-color: #d05252;
  border-radius: 5px;
  width: 45px;
  padding: 8px;
  margin-top: 5px;
  font-size: x-large;
  text-align: center;
}
.opr-main-content {
  padding: 20px;
  width: 100%;
  font-size: large;
  font-weight: bold;
  /* color: #357ba5;   */
}
.opr-dash-box {
  display: block;
  height: 325px;
  width: 100%;
  margin-bottom: 15px;
  line-height: 1;
}

.opr-header {
  padding: 15px;
  height: 100%;
  
  background: none;
  background-color: #fff;
  border-radius: 5px;
  border-color: #c8d7dc;
  border-width: 2px;
  border-style: solid;
}
.opr-box {
  display: block;
  background-color: #f0f0f0;
  width: 100%;
  line-height: 1;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.opr-box-icon {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #3974a8; 
  color: #fff;
  display: block;
  float: left;
  height: 40px;
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
  font-size: medium;
  line-height: 40px;
  padding-left: 15px;
}
.opr-box-content {
  padding: 10px 10px;
  overflow: auto;
}
.opr-box-icon > img {
  max-width: 100%;
}
.container-header {
  background-color: #34639b;
}
.dashboard_title {
  text-align: left; 
  width: 70%; 
  line-height: 1.3 !important; 
  cursor: pointer;
}
.one-box-height {
  height: 160px !important;
}
.two-box-height {
  height: 335px !important;
}
.three-box-height {
  height: 510px !important;
}
.four-box-height {
  height: 685px !important;
}
.calendar-box {
  display: block;
  height: 160px;
  background: linear-gradient(to bottom, #cfdde8 25px, #ffffff 26px);
  width: 100%;
  border-radius: 0px 7px 7px 7px;
  margin-bottom: 15px;
  box-shadow: 1px 0 0 2px rgba(0, 0, 0, 0.08), 1px 2px 2px 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}
.info-box {
  display: block;
  overflow: overlay;
  height: 160px;
  background-color: #ffffff;
  background: linear-gradient(to bottom, #cfdde8 25px, #ffffff 26px);
  width: 100%;
  border-radius: 0px 7px 7px 7px;
  margin-bottom: 15px;
  box-shadow: 1px 0 0 2px rgba(0, 0, 0, 0.08), 1px 2px 2px 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.info-box small {
  font-size: 14px;
}
.info-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px -10px;
  height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar {
  border-radius: 0;
}
.info-box .progress .progress-bar {
  background: #fff;
}
.info-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 70px;
  width: 70px;
  text-align: center;
  font-size: 30px;
  line-height: 90px;
  background: rgba(0, 0, 0, 0.9);
}
.info-box-icon > img {
  max-width: 100%;
}
.info-box-content {
  padding: 5px 10px;
  margin-left: 75px;
  font-size: 13px;
  font-weight: 600;  
}
.info-box-number {
  display: inline;
  font-weight: bold;
  font-size: 13px;
  color: #196e9e;
  float: right;
  padding-right: 4px;
}


.info-box-text {
  display: inline;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #636b69;
  position: absolute;
  top: 6px;
  left: 15px;
  max-width: 50%;
}
.opr-box-text {
  display: inline;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #636b69;
  position: relative;
  top: -7px;
  left: 5px;
}
.opr-box-number {
  display: inline;
  font-weight: bold;
  font-size: 14px;
  color: #196e9e;
  float: right;
  padding-right: 4px;
  position: relative;
  top: -7px;
  right: 2px;
}
.calendar-current-day {
  background-color: #c4d7eb;
  vertical-align: top;
  font-weight: bold;
  font-size: larger;
  border-style: solid;
  border-color: #d2deeb;
  height: 120px;
  padding: 5px;
  max-width: 1vw;
}
.calendar-active-day {
  background-color: #fff;
  vertical-align: top;
  font-weight: bold;
  font-size: larger;
  border-style: solid;
  border-color: #d2deeb;
  height: 120px;
  padding: 5px;
  max-width: 1vw;
}
.calendar-passive-day {
  background-color: #eee;
  color: #eee;
  height: 120px;
  max-width: 1vw;
}
.calendar-weekend-day {
  background: #ededea;
  vertical-align: top;
  font-weight: bold;
  font-size: larger;
  border-style: solid;
  border-color: #d2deeb;
  height: 120px;
  padding: 5px;
  max-width: 1vw;
}
.calendar-event {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-style: dashed;
  border-width: 1px;
  border-color: #8080803d;
  border-radius: 5px !important;
  padding: 11px 5px 3px 7px;
  margin-bottom: 2px;
  background-color: #e7f1ff;  
}
.calendar-done {
  white-space: nowrap;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: line-through;
  color: #8080806d;
  border-style: solid;
  border-width: 1px;
  border-color: #8080803d;
  border-radius: 5px !important;
  padding: 11px 5px 3px 7px;
  margin-bottom: 2px;
}
.calendar-plus {
  float: right;
  cursor: pointer;
  color: #9fc4e3;
}
.calendar-photo {
  border-radius: 4px;
  height: 23px;
  margin-top: -8px;
  margin-right: 2px;
}
.calendar-daynum {
  cursor: pointer;
}
.calendar-daynum:hover {
  text-decoration: underline;
  color: #336699;
}
.calendar-more {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #336699;
  padding: 2px 5px;
  margin-top: 1px;
  border-radius: 5px;
  background-color: #eef4fb;
  text-align: center;
}
.calendar-more:hover {
  background-color: #d7e6f7;
}
.calendar-view-switch .btn {
  height: 35px;
  padding-top: 7px;
}
.calendar-week-cell {
  vertical-align: top !important;
}
.calendar-day-view {
  min-height: 70vh;
  padding: 10px 5px;
}
.calendar-day-head {
  font-size: 20px;
  font-weight: bold;
  color: #336699;
  border-bottom: 2px solid #d2deeb;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.calendar-day-empty {
  color: #999;
  font-size: 15px;
  padding: 20px 5px;
}
.calendar-day-list {
  display: flex;
  flex-direction: column;
}
.calendar-day-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.calendar-day-item .calendar-photo {
  margin-top: 0;
}
.calendar-day-subject {
  font-weight: 600;
  margin-left: 8px;
}
.calendar-time {
  display: inline-block;
  min-width: 48px;
  font-weight: 700;
  color: #336699;
  margin-right: 10px;
}

.access-box {
  display: inline-block;
  vertical-align: top;
  margin-right: 25px;
  min-width: 300px;
  background: #f0f0f0;
  border-radius: 2px 2px 15px 2px;
  margin-bottom: 25px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}
.access-box-icon {
  text-align: center;
  font-size: 45px;
}
.access-box-icon > img {
  max-width: 100%;
}
.access-box-content {
  padding: 5px 10px;
}

.access-box-text {
  width: 160px;
  display: block;
  font-size: 14px;
  text-overflow: ellipsis;
}

.admin-box {
  display: inline-block;
  vertical-align: top;
  margin-right: 25px;
  height: 60px;
  width: 160px;
  background: #f0f0f0;
  border-radius: 2px 2px 15px 2px;
  margin-bottom: 25px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}
.admin-box small {
  font-size: 14px;
}
.admin-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px -10px;
  height: 2px;
}
.admin-box .progress,
.admin-box .progress .progress-bar {
  border-radius: 0;
}
.admin-box .progress .progress-bar {
  background: #fff;
}
.admin-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 60px;
  width: 60px;
  text-align: center;
  font-size: 45px;
  line-height: 70px;
  background: rgba(0, 0, 0, 0.2);
}
.admin-box-icon > img {
  max-width: 100%;
}
.admin-box-content {
  padding: 5px 10px;
  margin-left: 60px;
}

.admin-box-text {
  display: block;
  font-size: 14px;
  text-overflow: ellipsis;
}

.report-box {
  display: block;
  height: 250px;
  width: 350px;
  background: #f0f0f0;
  border-radius: 2px 2px 15px 2px;
  margin-bottom: 15px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1);
  line-height: 1;
}
.report-box small {
  font-size: 14px;
}
.report-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px -10px;
  height: 2px;
}
.report-box .progress,
.report-box .progress .progress-bar {
  border-radius: 0;
}
.report-box .progress .progress-bar {
  background: #fff;
}
.report-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 40px;
  width: 50px;
  text-align: center;
  font-size: 35px;
  line-height: 40px;
}
.report-box-icon > img {
  max-width: 100%;
}
.report-box-content {
  padding: 5px 10px;
  margin-left: 50px;
}
.report-box-list {
  margin-top: 22px;
  margin-left: -40px;
  font-size: 14px;
  line-height: 1.5;  
}

.report-box-text {
  display: block;
  font-size: 20px;
  font-weight: bold;  
  text-overflow: ellipsis;
}


.box-items {
  position: absolute;
  bottom: 15%;
  font-size: 15px;
  left: 6px;
  color: #5d6c7e;
}
.bar-icon {
  display: block;
  float: left;
  height: 43px;
  width: 19px;
  text-align: center;
  font-size: 19px;
  line-height: 65px;
  cursor: pointer;
}
.week-circle {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.m-list-title {
  display: inline-block; 
  padding: 3px;
  white-space: nowrap;
  overflow: visible;
}
.m-list-content {
  display: inline;
  padding: 3px;
}
.btn {
  border-radius: 5px;
  box-shadow: none;
  border: 2px solid;
}

.btn:active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:focus {
  outline: none;
}

.btn-default {
  background-color: #b1cadf;
  color: #404148;
  border-color: #c8d7de;
  top: -5px;
}
.btn-default:hover,
.btn-default:active {
  background-color: #5790ac;
}
.btn-primary {
  background-color: #2a6486;
  border-color: #367fa9;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: #367fa9;
}
.btn-success {
  background-color: #2e7d5d;
  border-color: #6cb798;
}
.btn-success:hover,
.btn-success:active {
  background-color: #18c780;
}
.btn-info {
  background-color: #00c0ef;
  border-color: #00acd6;
}
.btn-info:hover,
.btn-info:active {
  background-color: #00acd6;
}

.btn-warning {
  background-color: #e33c32;
  border-color: #d03e3b;
}
.btn-warning:hover,
.btn-warning:active {
  background-color: #e08e0b;
}

.offer-type {
  background-color: rgba(66, 133, 244, 0.1);
  color: #c47e00;
  border-width: 0 !important;
}
.frigian-exp {
  color: #fff !important;
  background: linear-gradient(180deg, #3d78c2 61%, #2e578a 84%) !important;
  border-color: #3c72b4 !important;
}
.frigian-imp {
  color: #fff !important;
  background: linear-gradient(180deg, #2f7d6a 61%, #245a4d 84%) !important;
  border-color: #46c2a3 !important;
}
.frigian-crs {
  color: #fff !important;
  /* background: linear-gradient(180deg, #b57a2a 61%, #a57129 84%) !important; */
  background: linear-gradient(180deg, #660082d1 61%, #6f2c8a 84%) !important;
  border-color: #5b29a5 !important;
}
.frigian-dms {
  color: #fff !important;
  background: linear-gradient(180deg, #c66262bd 61%, #8b4040db 84%) !important;
  border-color: #d67f7f !important;
}

.frigian-sea {
  color: #fff !important;
  background: linear-gradient(180deg, #5c85c3 61%, #7ea7d1 84%) !important;
  border-color: #7ea7d1 !important;
}
.frigian-air {
  color: #fff !important;
  background: linear-gradient(180deg, #5894c5 61%, #75b3d1 84%) !important;
  border-color: #75b3d1 !important;
}
.frigian-land {
  color: #fff !important;
  background: linear-gradient(180deg, #629f9a 61%, #91c9c5 84%) !important;
  border-color: #91c9c5 !important;
}
.frigian-rail {
  color: #fff !important;
  background: linear-gradient(180deg, #af9696 61%, #cfcdcc 84%) !important;
  border-color: #cfcdcc !important;
}
.gantt-cell {
  position: relative;
  height: 15px;
}
.gantt-bar {
  position: absolute;
  top: 10px;
  height: 50%;
  background-color: #d0d0e0;
  border-radius: 10px;
  overflow: hidden;
}
.progress-done {
  height: 100%;
  text-align: center;
  line-height: 20px;
  color: white;
  font-size: 12px;
  white-space: nowrap;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
.marker-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: red;
  top: 0;
  transform: translateX(-50%);
}
.btn-offer:hover,
.btn-offer:focus,
.btn-offer:active,
.btn-offer.active {
  color: #fff;
  background-color: #36414b;
  border-color: #4a5661;
}
.btn-offer:active,
.btn-offer.active {
  background-image: none;
}
.btn-offer[disabled],
fieldset[disabled] .btn-offer,
.btn-offer[disabled]:hover,
fieldset[disabled] .btn-offer:hover,
.btn-offer[disabled]:focus,
fieldset[disabled] .btn-offer:focus,
.btn-offer[disabled]:active,
fieldset[disabled] .btn-offer:active,
.btn-offer[disabled].active,
fieldset[disabled] .btn-offer.active {
  background-color: #bbccdd;
  border-color: #aabbcc;
}

.btn[class*='bg-']:hover {
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}
.alert {
  border-radius: 3px;
}
.alert h4 {
  font-weight: 600;
}
.alert a {
  color: #fff;
  text-decoration: underline;
}
.alert-warning {
  border-color: #e08e0b;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
  color: #444;
  background: #f7f7f7;
}
[data-theme="light"] .pagination > li > a {
  background: #fafafa;
  color: #666;
}
[data-theme="light"] .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    background-color: #a4a4a4;
    border-color: #c1c2cd;
}
[data-theme="light"] .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    background-color: #609eef;
    border-color: #60a9c9;
}
[data-theme="light"] .pagination > li > a, .pagination > li > span {
    background-color: #ffffff;
    border: 1px solid #bdc6da;
}

/* .table thead {
  font-weight:bold;
  background-color: #7c95a9;
  color: #fff;
  table-layout: fixed;
} */

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-bottom: 1px solid #6e788942;
}
.table > thead > tr > th {
  border-bottom: 2px solid #9abcd6;
  height: 35px;
}
.table tr td .progress {
  margin-top: 5px;
}
.table-bordered {
  border: 1px solid #f4f4f4;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #f4f4f4;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

table.text-center,
table.text-center td,
table.text-center th {
  text-align: center;
}

.label {
  font-size: 14px;
  width: 20px;
}
.modal {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, 0 ) url(/assets/img/shiptier_rudder_spinner.png) 50% 50% no-repeat;
}

@media (min-width: 768px) {
  
}
.modal-footer {
  border-top-color: #f4f4f4;
}
@media (max-width: 768px) {
  
}
@media (max-width: 991px) {
  
}
#add-new-event {
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}
.master-only {
  background-color: #d70000bd;
  display: inline-block;
  width: 40px;
  height: 22px;
  font-weight: bold;
  font-size: 10pt;
  color: #fff;
  text-align: center;
  border-radius: 15px;
  margin-left: 1px;
  padding: 1px 2px 1px 2px;
}
.mini-info {
  width: 25px !important;
  height: 18px !important;
  padding: 0px 0px 0px 1px !important;
}
.release-request {
  background-color: darkcyan;
  display: inline-block;
  width: 45px;
  height: 22px;
  font-weight: bold;
  font-size: 10pt;
  color: #fff;
  text-align: center;
  border-radius: 15px;
  margin-left: 1px;
  padding: 1px 2px 1px 2px;
}
.status-bar-container {
  width: 100%;
  position: relative;
  padding: 8px 0;
}
.status-bar-track {
  height: 4px;
  background-color: var(--step-not-started);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.status-bar-progress {
  height: 100%;
  background-color: #00a387;
  border-radius: 3px;
  transition: width 0.5s ease;
  position: absolute;
  left: 0;
  top: 0;
}
.status-bar-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  position: relative;
}
.status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45px;
  position: relative;
  z-index: 2;
}
.step-marker.completed {
  background-color: var(--step-completed);
  border-color: var(--step-completed);
  color: white;
}
.step-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #2e2a2a;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: normal;
  white-space: nowrap;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  margin-bottom: 5px;
  pointer-events: none;
}
.step-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.1;
  max-width: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-marker.pending {
  background-color: var(--step-pending);
  border-color: var(--step-pending);
  color: white;
}
.step-marker.in-progress {
  background-color: var(--step-in-progress);
  border-color: var(--step-in-progress);
  color: white;
  animation: pulse 2s infinite;
}
.step-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--step-not-started);
  background-color: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-secondary);
  margin-bottom: 3px;
  transition: all 0.3s ease;
}
.status-overview {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}
.terms-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  margin-top: 3px;
  font-weight: 600;
}
.terms-hbl {
  background-color: rgb(198 201 69 / 12%);
  border-color: rgb(111 130 175 / 39%);
  border-style: solid;
  border-width: 1px;
  color: #638ae1;
}
.terms-prd {
  background-color: rgb(198 201 69 / 12%);
  border-color: rgb(111 130 175 / 39%);
  border-style: solid;
  border-width: 1px;
  color: #638ae1;
}
.step-marker:hover + .step-tooltip {
  opacity: 1;
  visibility: visible;
}

.message-indicator {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--purple-color);
  color: white;
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.action {
  display: inline-block;
  width: 36px;
  height: 24px;
  font-weight: bold;
  font-size: 10pt;
  color: #fff;
  text-align: center;
  border-radius: .25em;
  margin-left: 1px;
  padding: 6px;
}
.action-small {
  margin-right: 2px;
  padding: 0px 2px 0px 2px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 3px;  
}
.action-full {
  color: #fff;
  background: linear-gradient(to top, #059431 30%, #86da8d);
}
.action-some {
  color: #fff;
  background: linear-gradient(to top, #44a261 30%, #4efbf3);
}
.action-empty {
  color: #fff;
  background: linear-gradient(to top, #7c7c7c 30%, #e8e8e8);
}
.action-waiting {
  color: #fff;
  background: linear-gradient(to top, #005b90 30%, #90d1ff);
}

.action-inactive {
  color: #618487 !important;
  background-color: #7b7b7b4f !important;
}
.icon-full {
  color: #009216 !important;
}

.icon-empty {
  color: #bababa !important;
}

.icon-warning {
  color: #e4321e !important;
}

.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-olive,
.bg-aqua-active,
.bg-light-blue-active,
.bg-olive-active,
.alert-warning,
.label-danger {
  color: #fff !important;
}
.green-index {
  color:#5deb3c;
}
.gray-index {
  color:#56c8ff;
}
.red-index {
  color:#ff4f4f;
}
.bg-gray {
  color: #5a7582;
  background: linear-gradient(to bottom, #cfdde8 40px, #f5f5f5 60px) !important;
  border-radius: 0 0 7px;
}

.label-danger {
  background-color: #dd4b39 !important;
}
.alert-warning {
  background-color: #f39c12 !important;
}
.bg-aqua {
  background-color: #2b8bad !important;
}
.bg-blue {
  background-color: #007dc794 !important
}
.bg-light-blue {
  background-color: #3c8dbc !important;
}

.bg-olive {
  background-color: #988ea5 !important;
}
.bg-aqua-active {
  background-color: #00a7d0 !important;
}

.bg-light-blue-active {
  background-color: #357ca5 !important;
}

.bg-olive-active {
  background-color: #6a7ca5 !important;
}

.text-red {
  color: #dd4b39 !important;
}
.text-yellow {
  color: #f39c12 !important;
}
.text-aqua {
  color: #00c0ef !important;
}
.text-blue {
  color: #0073b7 !important;
}

.text-light-blue {
  color: #3c8dbc !important;
}
.text-green {
  color: #00a65a !important;
}
.text-gray {
  color: #d2d6de !important;
}

.text-orange {
  color: #ff851b !important;
}

.text-purple {
  color: #605ca8 !important;
}
.text-maroon {
  color: #d81b60 !important;
}
.hide {
  display: none !important;
}
@media print {
  .no-print,
.main-sidebar,
.main-header {
    display: none!important;
  }
  .content-wrapper {
    margin-left: 0!important;
    min-height: 0!important;
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;
  }
  .fixed .content-wrapper {
    padding-top: 0!important;
  }
  
}

.datepicker {
  position: relative;
}
.datepicker .dropdown-menu {
   left: auto !important;
   right: 0px;
 }
 
.card-bonus-level {
  position: relative;
  width: 300px;
  padding: 10px;
  background-color: #e3eaf1;
  border-radius: 10px;
  margin-left: 15px;
  margin-top: 15px;
}
.bonus-amount {
  background-color: #c6d4dc;
  padding: 5px;
}
.bonus-sharing {
  background-color: #c9e2f2;
  padding: 5px;
}
.card-balance {
  transition: box-shadow .25s;
  padding: 20px;
  margin: auto;
  position: absolute;
  z-index: 1000;
  top: 20%;
  left: 0;
  right: 0;
  border-radius: 5px;
  background-color: #ffffff; 
  box-shadow: 3px 6px 10px #737373;
}
.icon-menu-collapse {
  height: 25px;
  cursor: pointer;
}

.icon-menu-text {
  display: grid;
  padding-bottom: 6px;
  background: linear-gradient(to bottom, #333f60 25px, #3a5372 26px);
  line-height: 1.3;  
  padding-left: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.menu-text-icon {
  font-size: 15px;
  color: #e9e1e6 !important;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.menu-text-icon:hover{
  color: #3fffbe !important;
  border-radius: 5px;
  box-shadow: 1px 0 0 2px rgb(255 255 255 / 38%), 1px 2px 2px 0 rgb(0 0 0 / 84%);
}
.menu-text-item{
  font-size: 14px;
  color: #efefef;
  line-height: 1.8;
  width: 110px;               
  white-space: nowrap;        
  overflow: hidden;           
  text-overflow: ellipsis;    
  margin-left: 5px;
  margin-right: 5px;
}
.menu-text-item:hover{
  color: #3fffbe !important;
  border-radius: 5px;
  box-shadow: 1px 0 0 2px rgb(255 255 255 / 38%), 1px 2px 2px 0 rgb(0 0 0 / 84%);
}
.icon-menu-box {
  display: block;
  margin: 5px;
  padding-bottom: 6px;
  min-height: 71px;
  background: linear-gradient(to bottom, #38466c 25px, #445d7c 26px);
  width: 94%;
  border-radius: 0px 7px 7px 7px;
  margin-bottom: 11px;
  box-shadow: 1px 0 0 2px rgb(0 0 0 / 8%), 1px 2px 2px 0 rgb(0 0 0 / 10%);
  line-height: 1;
}
.icon-menu-title {
  display: block;
  font-size: large;
  font-weight: bold;
  color: #fdf8e8;
  padding: 3px;
  text-shadow: 1px 1px 1px #552244;
}
.menu-icon {
  font-size: 25px;
  padding: 7px;
  line-height: initial;
  color: #e9e1e6 !important;
  width: 34px;
  text-align: center;
}
.menu-icon:hover{
  color: #3fffbe !important;
  border-radius: 5px;
  box-shadow: 1px 0 0 2px rgb(255 255 255 / 38%), 1px 2px 2px 0 rgb(0 0 0 / 84%);
}
a.menu-item {
  display: flex;
  align-items: center;
  height: 25px;
  text-decoration: none;
}
.icon-menu-number {
  font-size: 12px;
  position: relative;
  display: inline-block;
  top: 8px;
  left: -24px;
  margin-right: -24px;
  padding: 1px 4px 1px 4px;
}
.text-menu-number {
  font-size: 13px;
  height: 17px;
  border-radius: 4px;
  padding: 1px 4px;
  flex-shrink: 0;
  width: 27px;
  text-align: center;
}
.card-graph {
  transition: box-shadow .25s;
  padding: 15px;
  margin: auto;
  position: absolute;
  width: 400px;
  height: 200px;
  z-index: 1000;
  border-radius: 5px;
  background-color: #e2edf2; 
  box-shadow: 3px 6px 10px #737373;
  line-height: 1.5;
  border-color: aliceblue;
}
.tree-list {
  transition: box-shadow .25s;
  position: absolute;
  width: auto;
  height: auto;
  min-width: 180px;
  z-index: 1000;
  border-radius: 5px;
  background-color: #e1e1e1;
  box-shadow: 3px 6px 10px #1a1a1a;
  line-height: 1;  
}
.status-list {
  transition: box-shadow .25s;
  padding: 8px;
  margin: auto;
  position: absolute;
  width: 280px;
  min-height: 100px;
  z-index: 1000;
  border-radius: 5px;
  background-color: #e2e2e2;
  box-shadow: 2px 2px 3px #737373;
  line-height: 1;
}
.index-graph {
  position: absolute;
  width: 470px;
  height: 270px;
  z-index: 1040;
  border-radius: 5px;
  box-shadow: 3px 6px 10px #737373;
}
.cropArea {
  overflow: hidden;
  width:370px;
  height:300px;
}
.card-image {
  transition: box-shadow .25s;
  padding: 10px;
  position: fixed;
  z-index: 1030;
  top: 50px;
  right: 0;
  height: 420px;
  max-width: 400px;
  border-radius: 5px;
  background-color: #fdf9f9; 
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  line-height: 1;
}
.card-price-detail {
  transition: box-shadow .25s;
  padding: 10px;
  position: fixed;
  z-index: 1000;
  top: 170px;
  margin: auto;
  left: 185px;
  right: 0;
  max-height: 550px;
  width: 790px;
  max-width: 100%;
  border-radius: 5px;
  border-color: #d6e2e2;
  border-style: solid;
  background-color: #d0e2f4;
  box-shadow: 2px 3px 27px 8px rgba(0, 0, 0, 0.5);
  line-height: 1;
  overflow: auto;
}
.card-unpaid-title {
  transition: box-shadow .25s;
  padding: 10px;
  margin: auto;
  position: fixed;
  z-index: 1000;
  top: 70px;
  left: 0;
  right: 0;
  max-height: 500px;
  width: 650px;
  max-width: 100%;
  overflow: auto;
  border-radius: 5px;
  background-color: #f9f9f9; 
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.6), 0 12px 50px 0 rgba(0, 0, 0, 0.2);
  line-height: 1;
}
.cell-first-item {
  font-weight: bold;
  font-size: 14px;
}
.cell-second-item {
  font-weight: normal;
  font-size: smaller;
}
.card-unpaid-list {
  top: 10px;
  max-height: 400px;
  overflow: auto;
  overflow: initial;
  background-color: #f9f9f9; 
}
.card-panel {
  transition: box-shadow .25s;
  padding: 0 0 10px 0;
  margin: 0.3rem 0 0 0;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  background-color: #f0f0f0; 
  box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.05);
  line-height: 1;
}

.inv-header {
  padding: 15px;
  margin: 0 0 0.7rem 0;
  background-color: #51728c;
  line-height: 0.8;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  border-bottom: 2px solid #adc5d4;
  border-radius: 5px;
}
.inv-panel1 {
  transition: box-shadow .25s;
  padding: 0 0 10px 0;
  margin: 0.3rem 0 0 0;
  border-radius: 5px;
  background-color: #f0f0f0; 
  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.05);
  line-height: 0.8;
}
.inv-panel2 {
  transition: width 0.25s;
  padding: 10px;
  margin: 0.3rem 0 0 0;
  border-radius: 5px;
  background-color: #f0f0f0; 
  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.05);
  line-height: 1;
}
.long-string {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
}
.card-filter {
  width: 100%;
  display: inline-flex;
  position: inherit;
  background-color: #eaebeb;
  line-height: 0.9;
  padding: 5px;
  border-radius: 5px;
  display: -webkit-inline-box;
  box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.05);
}
.path-finder {
  position:relative; 
  text-decoration: none;
  font-size: 12pt;
  margin-top: 5px;
}
.tools-box {
  position:fixed; 
  right:2px; 
  top:52px; 
  width:40px; 
  z-index: 1029;
}

.cheque {
  background-image: url(/assets/img/cheque-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.gcheque {
  background-image: url(/assets/img/getcheque-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.tools-button {
  width:40px; 
  height:35px; 
  font-size: 17pt;
  text-align: center;
  border-radius: 5px;
  background-color: #316c9b;
  color: #ffffff;
  margin-bottom: 2px;
  border-color: #7eabcf;
  padding: 1px 8px !important;
}
.tools-button-s {
  width: 30px;
  height: 26px;
  font-size: 12pt;
  border-radius: 5px;
  background-color: #6e8c9a;
  color: #ffffff;
  margin-bottom: 2px;
  padding: 4px;
}
.console-header {
  padding: 15px;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
  border-color: #c8d7dc;
  border-width: 2px;
  border-style: solid;
}
.email-box {
  position:fixed; 
  right:2px; 
  top:50px; 
  padding: 10px;
  padding-top: 20px;
  width:320px; 
  max-width: 100%; 
  height:120px; 
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: rgb(236, 234, 234);
  color: #336699;
  z-index: 1040;
}
.eArsiv-box {
  position: absolute;
  overflow: visible;
  right:45px; 
  top:54px; 
  padding: 10px;
  padding-top: 20px;
  width:520px;
  max-width: 100%; 
  border-radius: 5px;
  box-shadow: 6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #e4e4e3;
  z-index: 1050;
  border-style: solid;
  border-width: 3px;
  border-color: #fff;
}
.eArsive-box-footer {
  position: absolute;
  font-size: 50px;
  text-align: right;
  width: 90%;
  padding-right: 40px;
  bottom: 10px;
  right: 0;
  z-index: -1;
  color: rgb(122 122 122 / 25%);  
}
.event-popup {
  position: fixed;
  overflow: unset;
  width: 960px;
  right: 0;
  left: 0;
  margin: auto;
  background-color: #dae3e9;  
  box-shadow: 6px 12px 5px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);  
}
.customer-popup {
  overflow: overlay;
  color: #525252;
  font-size: 15px;
  width: 650px;
  max-width: 100%;
  min-height: 530px;
  max-height: 550px;
  position: fixed;
  top: 50px;
  padding: 10px;
  padding-top: 20px;
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #ececea;
  z-index: 1040;
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  height: auto;
  margin: auto;
  left: 0;
  right: 0;
}
.feedback-box {
  position:fixed; 
  right:2px; 
  bottom:30px; 
  padding: 10px;
  padding-top: 20px;
  width:600px;
  max-width: 100%; 
  max-height: 90%;
  min-height: 200px;
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #383838;
  color: #c6d2de;
  z-index: 1040;
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  overflow: auto; 
  height: auto;
}
.system-documents {
  position: fixed;
  margin: auto;
  right: 0;
  left: 0;
  top: 300px;
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  width: 900px;
  max-width: 100%;
  max-height: 50%;
  overflow: auto;
  border-radius: 5px;
  box-shadow: 6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #f7f2e1;
  z-index: 1030;
  border-style: solid;
  border-width: 5px;
  border-color: #d6dadc;
}
.upload-box {
  position:fixed;
  margin: auto; 
  right: 0; 
  left: 0;
  top: 100px; 
  padding: 10px;
  padding-top: 20px;
  width:550px;
  max-width: 100%; 
  max-height: 400px;
  overflow: auto;
  border-radius: 5px;
  box-shadow: 6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #e0e0e0;
  z-index: 1040;
  border-style: solid;
  border-width: 5px;
  border-color: #d6dadc;
}

.notes-box {
  position: fixed;
  right: 30px;
  top: 50px;
  max-height: 90%;
  z-index: 1150;
}
.note-paper {
  position: relative;
  padding: 20px 20px 40px;
  width: 230px;
  min-height: 190px;
  background-image: url(/assets/img/sticky-note-bg.png);
  background-repeat: round;
  z-index: 1040;
  overflow: auto;
  margin-bottom: -10px;
}
.transfer-box {
  position: fixed;
  overflow: auto;
  max-height: 80%;
  margin: auto; 
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  right:0; 
  left:0; 
  top:50px; 
  padding: 0 10px 10px 10px;
  width:520px;
  max-width: 100%; 
  border-radius: 5px;
  box-shadow: 0px 12px 1px 5px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #ecebe6;
  color: #c6d2de;
  z-index: 810;
}
.fast-offer-box {
  position: fixed;
  margin: auto; 
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  right:0; 
  left:0; 
  top:50px; 
  padding: 0 10px 10px 10px;
  width:520px;
  height: auto;
  max-width: 100%; 
  min-height: 450px;
  max-height: 90%;
  border-radius: 5px;
  box-shadow: 0px 12px 1px 5px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #f0f0f0;
  color: #c6d2de;
  z-index: 1029;
}


.inland-popup {
  position:absolute;
  border-style: solid;
  border-width: 2px;
  border-color: #c5c3c3;
  background-color: #fff;
  padding: 25px;
  width:420px;
  max-width: 100%;
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  color: #c6d2de;
  z-index: 1040;
}
.special-popup {
  position:absolute;
  border-style: solid;
  border-width: 5px;
  border-color: #c5c3c3;
  background-color: #ececec;
  padding: 10px;
  width:520px;
  max-width: 100%;
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  color: #c6d2de;
  z-index: 1040;
}
.user-big-card {
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: #5977a6;
  background: linear-gradient(180deg, #5a85c2 0%, #042659 100%) !important;
  width: 280px;
  height: 137px;
  border-radius: 10px;
  z-index: 1040;
}
.user-big-photo {
  border-width: 3px;
  width: 130px;
  height: 130px;
  border-radius: 100px;
  border-style: solid;
  border-color: #738da46e;
}
.addShip-popup {
  position: absolute;
  border-style: solid;
  border-width: 5px;
  border-color: #c5c3c3;
  background-color: #e4e4e3;
  padding: 10px;
  width:420px;
  max-width: 100%;
  height: 290px; 
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  color: #c6d2de;
  z-index: 1040;
}
.editQuote-popup {
  position: absolute;
  top: 115px;
  margin: auto;
  left: 0;
  right: 0;
  border-style: solid;
  border-width: 5px;
  border-color: #c5c3c3;
  background-color: #e4e4e3;
  padding: 10px;
  width: 550px;
  padding: 30px;
  max-width: 100%;
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgb(0 0 0 / 20%), 0 11px 11px 0 rgb(0 0 0 / 12%);
  color: #c6d2de;
  z-index: 1040;
}
.sources-popup {
  position: absolute;
  border-style: solid;
  border-width: 2px;
  border-color: #c5c3c3;
  background-color: #e1e7eb;
  padding: 5px 5px 5px 10px;
  width: 350px;
  max-width: 100%;
  height: 335px;
  border-radius: 5px;
  box-shadow: 2px 4px 7px 1px rgb(0 0 0 / 20%), 0 10px 9px 0 rgb(0 0 0 / 12%);
  z-index: 1040;
}
.addTruck-popup {
  position:absolute;
  border-style: solid;
  border-width: 5px;
  border-color: #c5c3c3;
  background-color: #e4e4e3;
  padding: 10px;
  width:550px;
  max-width: 100%;
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  color: #c6d2de;
  z-index: 1040;
}
.message-box {
  position:fixed;
  margin: auto; 
  border-style: solid;
  border-width: 5px;
  border-color: #9e9a9a;
  right:0; 
  left:0; 
  top:50px; 
  padding: 5px;
  min-height: 560px;
  max-height: 100%; 
  width:700px;
  max-width: 100%; 
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
  color: #333;
  z-index: 1040;
}
.photo-box {
  position:fixed;
  margin: auto; 
  border-style: solid;
  border-width: 5px;
  border-color: #9e9a9a;
  text-align: -webkit-center;
  right:0; 
  left:0; 
  top:50px; 
  padding: 10px;
  height: 560px;
  max-height: 100%; 
  width:800px;
  max-width: 100%; 
  border-radius: 5px;
  box-shadow: -6px 12px 1px 1px rgba(0, 0, 0, 0.2), 0 11px 11px 0 rgba(0, 0, 0, 0.12);
  background-color: #333333;
  color: #333;
  z-index: 1040;
}

.filter-close {
  position:absolute; 
  right:2px; 
  top:2px; 
  width:40px; 
  height:35px; 
  font-size: 14pt;
  z-index: 810;
}
.filter-reset {
  position: static;
  margin-right: 5px;
  color: #ffffff;
  background-color: #6e8c9a;
  z-index: 810;
  width: 40px;
  height: 34px;
  top: 62px;
}
.pagination-back {
  position: fixed;
  margin: auto;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 25px;
  height: 33px;
  width: fit-content;
  z-index: 800;
  background-color: rgb(90 90 90 / 11%);
  border-style: solid;
  border-width: 1px;
  border-color: #869bad;
  border-radius: 6px;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.05);
}
.pagination {
  margin: auto;
 }
@media only screen and (max-width : 600px) {
  .pagination-back {
    bottom: 12px;
    height: auto;
    max-width: calc(100% - 16px);
    padding: 5px;
    border-radius: 14px;
    border-color: #7f9ab3;
    background-color: rgba(90, 90, 90, 0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px 2px rgba(0, 0, 0, 0.22);
  }
  .pagination-back .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    margin: 0;
  }
  .pagination > li {
    display: flex;
    float: none;
  }
  .pagination > li > a,
  .pagination > li > span {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 1.05rem;
    line-height: 1;
  }
  .pagination > .active > a,
  .pagination > .active > span {
    font-weight: 700;
  }
}
.calculator {
  position: fixed;
  top: 50px;
  right: 20px;
  padding: 10px;
  width: 296px;
  max-width: 100%;
  max-height: 90%;
  border-radius: 5px;
  box-shadow: -2px 0px 1px 1px rgba(0, 0, 0, 0.2), 0 3px 1px 0 rgba(0, 0, 0, 0.12);
  background-color: #60676d;
}
.search-result {
  position: fixed;
  top: 50px;
  right: 0;
  padding: 10px;
  width: 420px;
  max-width: 100%;
  max-height: 90%;
  border-radius: 5px;
  box-shadow: -2px 0px 1px 1px rgba(0, 0, 0, 0.2), 0 3px 1px 0 rgba(0, 0, 0, 0.12);
  background-color: #fff;
  overflow: auto;
}
.search-result-row {
  padding-top: 12px; 
  padding-bottom: 12px; 
  padding-left: 5px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #7f9ab34f;
}
.export-console {
  color: #065ba5 !important;
}
.import-console {
  color: #04924b !important;
}
.domestic-console {
  color: #b35959 !important;
}
@media only screen and (max-width : 992px) {
    }
@media only screen and (max-width : 600px) {
    }

textarea {
  width: 100%;
  height: 3rem;
  background-color: transparent; 
}

input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search] {
  background-color: #ffffff;
  border: none;
  border: 2px solid #becfe0;
  outline: none;
  width: 90%;
  font-size: 0.98rem;
  margin: 5px 0 0 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
  }
  input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=email]:disabled, input[type=email][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"] {
    color: rgba(0, 0, 0, 0.26);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26); 
  }
  input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=email]:disabled + label, input[type=email][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label {
    color: rgba(0, 0, 0, 0.26); 
  }
  input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]) {
    border-bottom: 1px solid #26a69a;
    box-shadow: 0 1px 0 0 #26a69a; 
    background-color: #ffffd0;
  }
  input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label {
    color: #26a69a; 
    background-color: #ffffd0;
  }
  input[type=text] + label:after, input[type=password] + label:after, input[type=email] + label:after, input[type=url] + label:after, input[type=time] + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=tel] + label:after, input[type=number] + label:after, input[type=search] + label:after {
    display: block;
    content: "";
    position: absolute;
    opacity: 0;
    transition: .2s opacity ease-out, .2s color ease-out; 
}

.help-sidebar {
  top: 50px;
  right: -230px;
  width: 230px;
  -webkit-transition: right 0.3s ease-in-out;
  -o-transition: right 0.3s ease-in-out;
  transition: right 0.3s ease-in-out;
}
.help-sidebar {
  position: fixed;
  padding-top: 0px;
  z-index: 1005;
  overflow: auto;
  height: 100%;
}
@media (max-width: 768px) {
  .help-sidebar {
    padding-top: 0px;
  }
}
.help-sidebar > .tab-content {
  padding: 0px 5px;
}

@media (min-width: 768px) {
  
}
@media (max-width: 768px) {
  
}
.help-sidebar-heading {
  font-weight: 400;
  font-size: 16px;
  padding: 10px 0;
  margin-bottom: 10px;
}

.help-sidebar-light {
  color: #5e5e5e;
}
.help-sidebar-light {
  background: #fefefe;
  border-left: 1px solid #d2d6de;
}

.help-sidebar-light .help-sidebar-heading {
  color: #111;
}
.customer-status-smile {
  display: inline-block;
  
  font-size: 18pt;
  margin-left: 10px;
  color: #23b913;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  vertical-align: sub;
  padding-top: 5px;
}
.customer-status-meh {
  display: inline-block;
  
  font-size: 18pt;
  margin-left: 10px;
  color: #2a79d0;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  vertical-align: sub;
  padding-top: 5px;
}
.customer-status-frown {
  display: inline-block;
  
  font-size: 18pt;
  margin-left: 10px;
  color: #ff0000ab;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  vertical-align: sub;
  padding-top: 5px;
}
.fa-add-edit {
  display: inline-block;
  cursor: pointer;
  font-size: 18pt;
  color: #525252;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  background-color: #ffffff;
  padding: 1px 3px 3px 4px;
  min-width: 35px;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: #aeb1bd;
  text-align: center;
}
.fa-info {
  display: inline-block;
  font-size: 18pt;
  text-align: center;  
}
.card-panel-label {
  display: inline-block;
  color: #404040;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  margin-top: 6px;
  margin-bottom: 0px;
}
.card-panel-item {
  color: #336699;
  border-bottom: 2px solid #d4dce0;
  width: 90%;
  font-size: 14px;
  min-height: 32px;
  background-color: #f7f7f7;
  padding: 8px 5px 5px 5px;
  line-height: 1.1;
  margin-top: 5px;
  border-radius: 5px;
  white-space: pre-line;
}
.card-panel-view {
  color: #336699;
  border-bottom: 1px solid #c2ced4;
  width: 80%;
  min-height: 22px;
  padding: 5px 5px 0 5px;
}

.row {
  padding-left: 20px;
  padding: 10px;
}

.highlight {
  
  cursor: pointer;
}

.debit {
  color: #1e7802;
  white-space: nowrap;
}
.credit {
  color: #c50000;
  white-space: nowrap;
}

div.tab {
    overflow: hidden;
    background-color: #fbfcfe;
}

div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 14px;
    transition: 0.2s;
    font-size: larger;
    font-weight: bold;
}

div.tab button:hover {
    background-color: #6cb5fb;
}

div.tab button.active {
    background-color: #9fbfde;
}

.otabcontent {
    display: none;
    padding: 6px 0px;
    border-top: none;
}

label {
    font-weight: inherit;
    color: #3a3a54;
}
input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;

    line-height: normal;
      -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.skin-light .main-header .navbar {
  background: radial-gradient(circle at center, #2f5886 15%, #214062 50%)
}
.skin-light .main-header .navbar .nav > li > a {
  color: #ffffff;
}
.skin-light .main-header .navbar .nav > li > a:hover,
.skin-light .main-header .navbar .nav > li > a:active,
.skin-light .main-header .navbar .nav > li > a:focus,
.skin-light .main-header .navbar .nav .open > a,
.skin-light .main-header .navbar .nav .open > a:hover,
.skin-light .main-header .navbar .nav .open > a:focus {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}
@media (max-width: 767px) {
  .skin-light .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .skin-light .main-header .navbar .dropdown-menu li a {
    color: #336699;
  }
  .skin-light .main-header .navbar .dropdown-menu li a:hover {
    background: #d73925;
  }
}
.skin-light .main-header .logo {
  position: fixed;
  top: 0;
  left: 0;
  color: #ffffff;
  border-bottom: 0px solid transparent;
}
.skin-light .main-header .logo:hover {
  background-color: #2b527e;
}
.skin-light .main-header li.user-header {
  background-color: #2b4a66;
}
.skin-light .content-header {
  background: transparent;
}
.skin-light .main-sidebar,
.skin-light .left-side {
  background-color: #103f69;
}
.skin-light .logo
{
  position: fixed;
  top: 0;
}
.skin-light .main-sidebar{
  position: fixed;
  top: 0;
}
.skin-light .user-panel > .info,
.skin-light .user-panel > .info > a {
  color: #fff;
}
.skin-light .sidebar-menu > li.header {
  color: #4b646f;
  background: #1a2226;
}
.skin-light .sidebar-menu > li > a {
  border-left: 3px solid transparent;
}
.skin-light .sidebar-menu > li:hover > a,
.skin-light .sidebar-menu > li.active > a {
  color: #ffffff;
  border-left-color: #ffffff;
}
.skin-light .sidebar a {
  color: #c8d7de;
}
.skin-light .sidebar a:hover {
  text-decoration: none;
}
.skin-light .treeview-menu > li.active > a,
.skin-light .treeview-menu > li > a:hover {
  color: #f5b00c;
}
.skin-light .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}
.skin-light .sidebar-form input[type="text"],
.skin-light .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.skin-light .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 2px !important;
}
.skin-light .sidebar-form input[type="text"]:focus,
.skin-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
}
.skin-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.skin-light .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
  border-bottom-left-radius: 0 !important;
}

.ui-select-highlight {
  font-weight: bold;
}

.ui-select-offscreen {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  left: 0px !important;
  top: 0px !important;
}

.ng-dirty.ng-invalid > a.select2-choice {
    border-color: #D44950;
}

.select2-result-single {
  padding-left: 0;
}

.select2-locked > .select2-search-choice-close{
  display:none;
}

.select-locked > .ui-select-match-close{
    display:none;
}

body > .select2-container.open {
  z-index: 9999;
}

.selectize-input.selectize-focus{
  border-color: #007FBB !important;
}

.selectize-control > .selectize-input > input {
  width: 100%;
}

.selectize-control > .selectize-dropdown {
  width: 100%;
}

.ng-dirty.ng-invalid > div.selectize-input {
    border-color: #D44950;
}

.btn-default-focus {
  color: #333;
  box-shadow: 0 2px 0 0 #26a69a;
  /* background-color: #fcd876 !important; */
  /* border-radius: 5px; */
  border-color: #ADADAD;
  text-decoration: none;
}

.ui-select-bootstrap .ui-select-toggle {
  position: relative;
}

.ui-select-bootstrap .ui-select-toggle > .caret {
  position: absolute;
  height: 10px;
  top: 50%;
  right: 10px;
  margin-top: -2px;
}

.input-group > .ui-select-bootstrap.dropdown {
  position: static;
}

.input-group > .ui-select-bootstrap > input.ui-select-search.form-control {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ui-select-bootstrap > .ui-select-match > .btn{
  text-align: left !important;
  margin-top: 5px;
  /* border-bottom-style: groove; */
}

.ui-select-bootstrap > .ui-select-match > .caret {
  position: absolute;
  top: 45%;
  right: 15px;
}
.ui-select-match-text{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}
.ui-select-toggle > .btn.btn-link {
  margin-right: 10px;
  top: 6px;
  position: absolute;
  right: 10px;
}
.ui-select-bootstrap > .ui-select-choices {
  width: auto;
  min-width: 100%;
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
  margin-top: -1px;
}

body > .ui-select-bootstrap.open {
  z-index: 1000;
}


.ui-select-bootstrap .ui-select-choices-row>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 2.5;
    color: #333;
    white-space: nowrap;
}

.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

.ui-select-bootstrap .ui-select-choices-row.active>a {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
}

.ui-select-bootstrap .ui-select-choices-row.disabled>a,
.ui-select-bootstrap .ui-select-choices-row.active.disabled>a {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
}

.ui-select-match.ng-hide-add,
.ui-select-search.ng-hide-add {
    display: none !important;
}

.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
    border-color: #D44950;
}

:root,
html[data-theme="light"],
body[data-theme="light"]{
  /* Core surfaces */
  --c-bg:            #dddee5;  /* app background */
  --c-surface:       #ffffff;  /* cards/panels */
  --c-surface-2:     #f7fafc;  /* subtle alt surface */
  --c-surface-3:     #eef3f8;  /* inputs/stripes */
  --c-text:          #2f3a49;
  --c-text-2:        #445566;
  --c-muted:         #6b7b8c;

  /* Borders & shadows */
  --c-border:        #d5dde6;
  --c-border-2:      #bfcbd8;

  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;

  --shadow-sm:       0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md:       0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-lg:       0 18px 55px rgba(15, 23, 42, 0.14);

  /* Brand / accent */
  --c-accent:        #2563eb;
  --c-accent-2:      #0ea5e9;
  --c-link:          #474747;
  --c-link-hover:    #c53434;
  --c-focus:         rgba(37, 99, 235, 0.30);

  /* Status */
  --c-success:       #16a34a;
  --c-warning:       #f59e0b;
  --c-danger:        #dc2626;
  --c-info:          #0284c7;

  /* Components */
  --table-head-bg:   #6f879c;
  --table-head-txt:  #ffffff;
  --table-row-even:  var(--c-surface-2);

  --input-bg:        #ffffff;
  --input-border:    #becfe0;
  --input-focus-bg:  #ffffd0;

  --btn-default-bg:  #b8ccdd;
  --btn-default-txt: #1f2a37;
  --btn-default-bd:  #c8d7de;

  --btn-primary-bg:  #2a6486;
  --btn-primary-bd:  #367fa9;

  --btn-success-bg:  #2e7d5d;
  --btn-success-bd:  #6cb798;

  --btn-danger-bg:   #dd4b39;
  --btn-danger-bd:   #dc8a7f;

  --btn-warning-bg:  #e33c32;
  --btn-warning-bd:  #d03e3b;

  --btn-info-bg:     #00c0ef;
  --btn-info-bd:     #00acd6;

  color-scheme: light;
}


/* ------------------------------
   Base polish (both themes)
   ------------------------------ */
body{
  background-color: var(--c-bg) !important;
  color: var(--c-text-2) !important;
}

a{
  color: var(--c-link) !important;
}
a:hover,
a:active,
a:focus{
  color: var(--c-link-hover) !important;
}

.wrapper{
  background-color: var(--c-bg) !important;
}

/* Make most “panel/card” blocks feel consistent */
.box,
.card-panel,
.card-panel2,
.inv-panel1,
.inv-panel2,
.opr-box,
.opr-dash-box,
.opr-dash-box-m,
.prc-main-box,
.prc-list-edit,
.con-dash-box,
.con-box,
.calendar-box,
.info-box,
.access-box,
.admin-box,
.report-box,
.search-result,
.tree-list,
.status-list,
.customer-popup,
.help-box,
.system-documents,
.upload-box,
.transfer-box,
.fast-offer-box,
.invoice-view,
.message-box{
  background-color: var(--c-surface) !important;
  color: var(--c-text-2) !important;
  border-color: var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Some blocks intentionally have their own backgrounds (keep them) */
.photo-box{
  box-shadow: var(--shadow-lg) !important;
}

/* Headers/footers */
.main-footer{
  background-color: var(--c-surface) !important;
  color: var(--c-text-2) !important;
  border-top: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Box internals */
.box{
  border: 1px solid var(--c-border) !important;
  border-top-width: 3px !important; /* keep the colored “state” strip */
}
.box-header{
  color: var(--c-text) !important;
}
.box-header.with-border{
  border-bottom: 1px solid var(--c-border) !important;
}
.box-footer{
  background-color: var(--c-surface) !important;
  border-top: 1px solid var(--c-border) !important;
}

/* Dropdowns / menus */
.dropdown-menu{
  border-color: var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.dropdown-menu > li > a{
  color: var(--c-text-2) !important;
}
.dropdown-menu > li > a:hover{
  background-color: var(--c-surface-2) !important;
}

/* Notifications dropdown header/footer (AdminLTE style) */
.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header,
.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu{
  background-color: var(--c-surface) !important;
  color: var(--c-text-2) !important;
  border-color: var(--c-border) !important;
}

.opr-list-icon {
  display: flex;
  width: 100px;
  margin: 0;
  margin-right: 5px;
  font-size: x-large;
  background-color: #00000014;
  padding: 3px;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  border-color: #3974a83d;
}
.opr-delete-link {
  position: absolute; 
  right: 75px; 
  top: 60px;
}
/* Tables */
.table thead{
  background: linear-gradient(180deg, #4577ad 61%, #315a86 84%);
  color: var(--table-head-txt);
}
tr:nth-child(even){
  background-color: var(--table-row-even) !important;
}
.table > thead > tr > th{
  border-bottom: 2px solid var(--c-border-2) !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{
  border-color: var(--c-border) !important;
}
.table > thead > tr > th,
.table > tbody > tr > td{
  border-bottom-color: var(--c-border) !important;
}

/* Form controls */
.form-control:focus{
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 4px var(--c-focus) !important;
}
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder{
  color: var(--c-muted) !important;
  opacity: 1;
}

/* Materialize-like inputs defined in this file */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=time],
input[type=date], input[type=datetime-local], input[type=tel], input[type=number],
input[type=search], textarea.materialize-textarea{
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--c-text-2) !important;
}
input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]){
  background-color: var(--input-focus-bg) !important;
  border-bottom-color: var(--c-accent) !important;
  box-shadow: 0 0 0 4px var(--c-focus) !important;
}

/* Buttons */
.btn{
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active{
  transform: translateY(1px);
  box-shadow: none !important;
}
.btn-default{
  background-color: var(--btn-default-bg) !important;
  color: var(--btn-default-txt) !important;
  border-color: var(--btn-default-bd) !important;
}
.btn-primary{
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bd) !important;
}
.btn-success{
  background-color: var(--btn-success-bg) !important;
  border-color: var(--btn-success-bd) !important;
}
.btn-danger{
  background-color: var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-bd) !important;
}
.btn-warning{
  background-color: var(--btn-warning-bg) !important;
  border-color: var(--btn-warning-bd) !important;
}
.btn-info{
  background-color: var(--btn-info-bg) !important;
  border-color: var(--btn-info-bd) !important;
}

/* Small improvements for “clickable cards” feeling */
.icon-menu-box,
.opr-header,
.console-header{
  border-radius: var(--radius-lg) !important;
}



/* Panels that use a hard-coded light gradient in the original CSS */
.calendar-box,
.info-box{
  background: linear-gradient(to bottom, var(--c-surface-3) 25px, var(--c-surface) 26px) !important;
}

/* “Gray” helper background (adapt to theme) */
.bg-gray{
  color: var(--c-text-2) !important;
  background: linear-gradient(to bottom, var(--c-surface-3) 40px, var(--c-surface-2) 60px) !important;
}

/* Calendar cells/events */
.calendar-active-day,
.calendar-weekend-day{
  background-color: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
.calendar-passive-day{
  background-color: var(--c-surface-3) !important;
  color: transparent !important;
}
.calendar-event{
  background-color: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-2) !important;
}
.calendar-done{
  border-color: var(--c-border) !important;
  color: var(--c-muted) !important;
}
.calendar-plus{
  color: var(--c-accent-2) !important;
}

/* Better focus for keyboard users */
:focus-visible{
  outline: 2px solid var(--c-accent) !important;
  outline-offset: 2px;
}

/* Reduce motion (optional accessibility) */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================
   Theme Toggle Button
   ========================= */

.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 28px;
  padding: 4px;
  border-radius: 30px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(to bottom, #f8fafc, #e2e8f0);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15),
              0 2px 6px rgba(0,0,0,.15);
}

/* knob */
.theme-toggle-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff, #dbeafe);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: all 0.25s ease;
}

/* icons */
.theme-toggle-btn .icon {
  font-size: 14px;
  z-index: 2;
  opacity: 0.7;
  transition: opacity .2s ease;
}

.theme-toggle-btn .sun { color: #f59e0b; }
.theme-toggle-btn .moon { color: #64748b; }

/* hover */
.theme-toggle-btn:hover {
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2),
              0 4px 10px rgba(0,0,0,.25);
}




/* ------------------------------
   Design tokens (override / extend)
   ------------------------------ */

:root,
html[data-theme="light"],
body[data-theme="light"]{
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  16px;
  --text-xl:  18px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Radii (slightly more modern) */
  --radius-sm: 8px;
  --radius-md: 5px;
  --radius-lg: 16px;

  /* Header / Sidebar */
  --header-bg:        linear-gradient(180deg, #204a74 0%, #0b2742 100%);
  --header-text:      rgba(255,255,255,.92);
  --header-text-dim:  rgba(255,255,255,.72);
  --header-hover:     rgba(255,255,255,.10);

  --sidebar-bg:       linear-gradient(180deg, #213f61 0%, #19497b 100%);
  --sidebar-border:   rgba(255,255,255,.08);
  --sidebar-link:     rgba(255,255,255,.80);
  --sidebar-link-dim: rgba(255,255,255,.62);
  --sidebar-hover-bg: rgba(255,255,255,.08);
  --sidebar-active-bg:rgba(255,255,255,.10);
  --sidebar-active-accent: rgba(96,165,250,.85);

  /* Surfaces / borders */
  --c-bg:        #f3f6f9;
  --c-surface:   #ffffff;
  --c-surface-2: #f7fafc;
  --c-surface-3: #eef3f8;

  --c-text:      #17212b;
  --c-text-2:    #2f3a49;
  --c-muted:     #6b7b8c;

  --c-border:    #d5dde6;
  --c-border-2:  #bfcbd8;

  --secondary-color: #00add3;

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --border-color: #e0e0e0;

  /* Accents */
  --c-accent:    #2563eb;
  --c-accent-2:  #0ea5e9;
  --c-focus:     rgba(37, 99, 235, 0.28);

  /* Shadows (cleaner) */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 10px 30px rgba(15, 23, 42, 0.10);
  /* --shadow-3: 0 18px 55px rgba(15, 23, 42, 0.14); */
  --shadow-3: 2px 3px 27px 8px rgba(0, 0, 0, 0.5);

  --ring: 0 0 0 4px var(--c-focus);

  /* Scrollbar */
  --scroll-thumb: rgba(100, 116, 139, 0.35);
  --scroll-thumb-hover: rgba(100, 116, 139, 0.55);

  color-scheme: light;
}


/* ------------------------------
   Global base
   ------------------------------ */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  height: 100%;
}

body{
  font-family: var(--font-sans) !important;
  font-size: var(--text-md) !important;
  line-height: 1.55 !important;
  background: var(--c-bg) !important;
  color: var(--c-text-2) !important;
}

::selection{
  background: rgba(37, 99, 235, 0.22);
}

a{
  transition: color .15s ease, background-color .15s ease;
}

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover);
}

/* HR */
hr{
  border: 0;
  border-top: 1px solid var(--c-border);
  opacity: .9;
}

/* ------------------------------
   Layout: header / sidebar
   ------------------------------ */

/* Header */
.main-header{
  background: var(--header-bg) !important;
  box-shadow: var(--shadow-2) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* .main-header .navbar{
  background: transparent !important;
  box-shadow: none !important;
} */

.main-header .logo{
  /* background: transparent !important; */
  color: var(--header-text) !important;
  letter-spacing: .2px;
}

.main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > a > span{
  color: var(--header-text) !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus{
  background: var(--header-hover) !important;
  color: var(--header-text) !important;
}

.main-header .sidebar-toggle{
  color: var(--header-text-dim) !important;
}
.main-header .sidebar-toggle:hover{
  color: var(--header-text) !important;
}

/* Sidebar */
.main-sidebar{
  background: var(--sidebar-bg) !important;
  box-shadow: 1px 0 0 rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.18) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

.sidebar a{
  color: var(--sidebar-link) !important;
}

.sidebar a:hover{
  color: var(--header-text) !important;
}

.sidebar-menu > li > a{
  border-radius: 10px;
  margin: 4px 8px;
  padding: 10px 12px;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sidebar-menu > li > a:hover{
  background: var(--sidebar-hover-bg) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li:hover.active > a{
  background: var(--sidebar-active-bg) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

.sidebar-menu > li.active > a{
  border-left-color: transparent !important;
}

.sidebar-menu > li.active > a::before{
  content: "";
  position: absolute;
  left: 0;
  margin-left: -8px;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: var(--sidebar-active-accent);
}

/* Icon menu blocks (if you use them) */
.icon-menu-box,
.icon-menu-text{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none !important;
}

.menu-icon,
.menu-text-icon{
  color: rgba(255,255,255,.9) !important;
}

/* ------------------------------
   Content & cards
   ------------------------------ */
.content{
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.page-header{
  border-bottom: 1px solid var(--c-border) !important;
  padding-bottom: 10px;
  margin-top: 12px;
  color: var(--c-text) !important;
}

.page-title{
  text-shadow: none !important;
  color: var(--header-text) !important;
  font-weight: 600;
}

/* “Card-like” blocks: make them cleaner and consistent */
.box,
.card-panel,
.inv-panel1,
.inv-panel2,
.opr-box,
.opr-header,
.calendar-box,
.info-box,
.access-box,
.admin-box,
.report-box,
.prc-main-box,
.prc-list-edit,
.con-dash-box,
.search-result,
.tree-list,
.status-list,
.customer-popup,
.system-documents,
.upload-box,
.transfer-box,
.fast-offer-box,
.message-box,
.eArsiv-box,
.email-box{
  background: var(--c-surface) !important;
  color: var(--c-text-2) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
}

.box:hover,
.opr-box:hover,
.calendar-box:hover,
.info-box:hover,
.access-box:hover,
.admin-box:hover,
.report-box:hover,
.prc-main-box:hover{
  box-shadow: var(--shadow-2) !important;
}

/* Header strip inside boxes */
.inv-header{
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0 !important;
  background: linear-gradient(180deg, rgb(40 77 117) 0%, rgb(81 129 184) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: none !important;
}


/* Panels that used hard-coded gradients */
.calendar-box,
.info-box{
  background: linear-gradient(to bottom, var(--c-surface-3) 28px, var(--c-surface) 29px) !important;
}

/* Small labels / badges */
.label,
.text-menu-number,
.icon-menu-number{
  border-radius: 10px !important;
  font-weight: 600;
}

/* ------------------------------
   Tables
   ------------------------------ */
.table{
  color: var(--c-text-2) !important;
}

/* .table thead{
  background: linear-gradient(180deg, rgb(117 172 220) 0%, rgb(17 44 68) 100%) !important;
  color: #fff !important;
} */

.table-hover > tbody > tr:hover{
  background-color: rgba(37, 99, 235, 0.08) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td{
  border-bottom: 1px solid var(--c-border) !important;
  padding: 10px 10px !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{
  border-color: var(--c-border) !important;
}

/* ------------------------------
   Forms (inputs / selects)
   ------------------------------ */
.form-control{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--c-text-2) !important;
  box-shadow: none !important;
  height: 38px;
  padding: 8px 12px;
}

.form-control:focus{
  border-color: var(--c-accent) !important;
  box-shadow: var(--ring) !important;
}

textarea{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--c-text-2) !important;
  padding: 10px 12px;
}

/* Your custom input rules (Materialize-like) – modernize a bit */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=time],
input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search]{
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--c-text-2) !important;
  height: 38px;
  padding: 0px 0px 0px 5px !important;
  box-sizing: border-box !important;
}

input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]){
  background-color: var(--c-surface-2) !important;
  border-color: var(--c-accent) !important;
  box-shadow: var(--ring) !important;
}

/* ui-select / select2 dropdowns */
.ui-select-bootstrap > .ui-select-choices,
.select2-drop,
.select2-dropdown{
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-2) !important;
}

.ui-select-bootstrap .ui-select-choices-row>a:hover{
  background-color: var(--c-surface-2) !important;
}

/* ------------------------------
   Buttons
   ------------------------------ */
.btn{
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  box-shadow: var(--shadow-1) !important;
  /* font-weight: 600 !important; */
  /* padding: 8px 12px; */
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:hover{
  box-shadow: var(--shadow-2) !important;
  filter: brightness(1.02);
}

.btn:active{
  transform: translateY(1px);
  box-shadow: none !important;
}

/* ------------------------------
   Dropdown menus / popovers
   ------------------------------ */
.dropdown-menu{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-2) !important;
  backdrop-filter: blur(10px);
}

/* ------------------------------
   Modals / popups
   ------------------------------ */
.card-price-detail,
.card-unpaid-title,
.card-graph,
.tree-list,
.status-list,
.message-box,
.eArsiv-box,
.customer-popup,
.transfer-box,
.fast-offer-box,
.upload-box,
.system-documents{
  box-shadow: var(--shadow-3) !important;
}


/* ------------------------------
   Small responsive tweaks
   ------------------------------ */
@media (max-width: 767px){
  .content{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .sidebar-menu > li > a{
    margin: 4px 6px;
  }
}

/* ------------------------------
   Accessibility
   ------------------------------ */
:focus-visible{
  outline: 2px solid var(--c-accent) !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
  }
}



/* ===================================================================
   Frigian Comfort Palette v1.1  (Less glare + More color variety)
   =================================================================== */

:root,
html[data-theme="light"],
body[data-theme="light"]{
  /* Softer, warmer light background to reduce eye fatigue */
  --c-bg:            #f2f4f7;  /* app background (no pure white) */
  --c-surface:       #fbfcfe;  /* cards/panels (off-white) */
  --c-surface-2:     #f1f5fa;  /* subtle alt surface (cool tint) */
  --c-surface-3:     #e8eef6;  /* inputs/stripes */

  /* Text (slightly softer than pure black) */
  --c-text:          #263246;
  --c-text-2:        #3a475b;
  --c-muted:         #6b7a90;

  /* Borders & shadows (lower contrast) */
  --c-border:        #d7e0ea;
  --c-border-2:      #c3cfdd;

  --shadow-sm:       0 1px 2px rgba(15, 23, 42, 0.07);
  --shadow-md:       0 10px 28px rgba(15, 23, 42, 0.09);
  --shadow-lg:       0 18px 52px rgba(15, 23, 42, 0.12);

  /* Accents (more variety, still professional) */
  --c-accent:        #8db9cf; /* light blue */
  --c-accent-2:      #0891b2;  /* teal */
  --c-accent-3:      #7c3aed;  /* purple */
  --c-accent-warm:   #d97706;  /* amber */

  --g-accent:        linear-gradient(90deg, var(--c-accent), var(--c-accent-2), var(--c-accent-3));

  /* Links */
  --c-link:          #1d4ed8;
  --c-link-hover:    #c53434;

  /* Focus ring (less aggressive) */
  --c-focus:         rgba(37, 99, 235, 0.22);

  /* Table */
  --table-head-bg:   #3d6189;   /* keep readable but not too harsh */
  --table-head-txt:  #ffffff;
  --table-row-even:  #f4f7fb;

  /* Inputs */
  --input-bg:        #fbfcfe;
  --input-border:    #c2d3e4;
  --input-focus-bg:  #fff7e6;   /* softer than pure yellow */

  /* Buttons (slightly softer default) */
  --btn-default-bg:  #c7d5e1;
  --btn-default-txt: #1f2a37;
  --btn-default-bd:  #d2dee7;

  color-scheme: light;

  /* Subtle colorful hover/background tints */
  --c-hover:         rgba(37, 99, 235, 0.08);
  --c-hover-2:       rgba(8, 145, 178, 0.08);
  --c-hover-3:       rgba(124, 58, 237, 0.08);

  --step-completed: #34a853;
  --step-pending: #f9ab00;
  --step-not-started: #e0e0e0;
  --step-in-progress: #4285f4;  
}

/* ------------------------------
   Subtle color variety without visual noise
   ------------------------------ */

/* Use gentle tinted hovers (menus/tables) */
.dropdown-menu > li > a:hover{
  background-color: var(--c-hover) !important;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus{
  background-color: var(--c-hover) !important;
}

/* Table hover: calmer than strong blue */
.table-hover > tbody > tr:hover{
  background-color: var(--c-hover-2) !important;
}

/* Soft “accent underline” for page headers (adds color, not loud) */
.page-header{
  position: relative;
  padding-bottom: 10px;
}
.page-header::after{
  content: "";
  display: block;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--g-accent);
  opacity: 0.25;
}

/* AdminLTE box state colors (more variety if you already use these classes) */
.box.box-primary{ border-top-color: var(--c-accent) !important; }
.box.box-info{    border-top-color: var(--c-info)   !important; }
.box.box-success{ border-top-color: var(--c-success)!important; }
.box.box-warning{ border-top-color: var(--c-warning)!important; }
.box.box-danger{  border-top-color: var(--c-danger) !important; }

/* Tabs: readable + a bit more “modern” color */
.nav-tabs{
  border-bottom-color: var(--c-border) !important;
}
.nav-tabs > li > a{
  color: var(--c-text-2) !important;
  border-radius: 10px 10px 0 0;
}
.nav-tabs > li > a:hover{
  background-color: var(--c-hover) !important;
  border-color: var(--c-border) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
  color: var(--c-text) !important;
  background-color: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
}

/* Chips/labels (optional; adds subtle color variety where used) */
.label,
.badge{
  border-radius: 999px;
}

/* Theme toggle button adapts to the softer palettes */
.theme-toggle-btn{
  border-color: var(--c-border) !important;
  background: linear-gradient(to bottom, var(--c-surface), var(--c-surface-2)) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.12) !important;
}
.theme-toggle-btn::after{
  background: linear-gradient(to bottom, var(--c-surface), var(--c-surface-3)) !important;
}

/* Make separators less harsh (both themes) */
hr{
  border-top-color: var(--c-border) !important;
  opacity: 0.8;
}

/* ========= Receipted Invoices ================ */
.invoice-card{
  background: var(--c-surface-3);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.invoice-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.invoice-card-no{
  font-weight:700;
  color: var(--c-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 85%;
}

.invoice-card-actions{
  flex-shrink:0;
}

.invoice-card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.invoice-item{
  background: var(--c-surface-2);
  border: 1px dashed var(--c-border);
  border-radius: 10px;
  padding: 10px;
}

.invoice-k{
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-v{
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* responsive */
@media (max-width: 992px){
  .invoice-card-grid{
    grid-template-columns: 1fr;
  }
}

.project-no {
  font-family: monospace;
  text-decoration: underline;
  font-weight: bold;  
  color: #009b95;
  cursor: pointer;
}

.user-abb {
  white-space: nowrap;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #00b6ff4d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* ── Desktop sidebar toggle ─────────────────────────── */
@media (min-width: 768px) {
  .main-sidebar {
    transform: translate(0, 0);
  }

  .sidebar-collapse .main-sidebar {
    transform: translate(-180px, 0);
  }

  .sidebar-collapse .content-wrapper {
    margin-left: 0 !important;
  }

  .sidebar-collapse .main-header .logo {
    width: 50px;
  }
  .sidebar-collapse .main-header .logo .logo-lg {
    display: none;
  }
  .sidebar-collapse .main-header .logo .logo-mini {
    display: block;
  }
  .sidebar-collapse .main-header > .navbar {
    margin-left: 50px;
  }
}

/* ── Desktop sidebar collapse ─────────────────────── */
@media (min-width: 768px) {

  .sidebar-collapse .main-sidebar {
    transform: translate(-180px, 0);
  }

  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .right-side,
  .sidebar-collapse .main-footer {
    margin-left: 0 !important;
  }

  .sidebar-collapse .main-header .logo {
    width: 50px;
  }
  .sidebar-collapse .main-header .logo .logo-lg {
    display: none;
  }
  .sidebar-collapse .main-header .logo .logo-mini {
    display: block;
  }

  .sidebar-collapse .main-header > .navbar {
    margin-left: 50px;
  }
}

/* ===================================================================
   Frigian Theme v2 – Dark Mode (Comfort Edition)
   -------------------------------------------------------------------
   Renk paleti: Koyu kurşun-gri + petrol mavisi arası
   Ne çok siyah, ne çok mavi. Gözü yormayan orta ton.

   Kullanım: <html data-theme="dark"> ya da <body data-theme="dark">
   =================================================================== */

/* ─── Ana CSS değişkenleri ─────────────────────────────────────── */
html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark {

  /* Yüzey renkleri – slate-gri + az petrol */
  --c-bg:            #1c2333;   /* sayfa arka planı */
  --c-surface:       #293449;   /* kartlar, paneller */
  --c-surface-2:     #293449;   /* iç yüzeyler */
  --c-surface-3:     #1c273c;   /* daha derin yüzeyler */

  /* Metin renkleri – saf beyaz yerine yumuşak krem/gri */
  --c-text:          #dde3ee;
  --c-text-2:        #c8d0de;
  --c-muted:         #8a95a8;

  /* Kenarlık renkleri */
  --c-border:        #334055;
  --c-border-2:      #445570;

  /* Gölgeler */
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-md:       0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg:       0 16px 48px rgba(0, 0, 0, 0.35);

  /* Aksanlar – petrol mavisi, neon değil */
  --c-accent:        #6b9fd4;
  --c-accent-2:      #3ebfb8;
  --c-accent-3:      #b79af5;
  --c-accent-warm:   #e8b86d;

  /* Gradient aksanı */
  --g-accent: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));

  /* Linkler */
  --c-link:          #89b8e0;
  --c-link-hover:    #a8d5c4;

  /* Focus ring */
  --c-focus:         rgba(107, 159, 212, 0.28);

  /* Hover durumları */
  --c-hover:         rgba(107, 159, 212, 0.10);
  --c-hover-2:       rgba(62, 191, 184, 0.10);
  --c-hover-3:       rgba(183, 154, 245, 0.10);

  /* Tablo */
  --table-head-bg:   #2c3a52;
  --table-head-txt:  #dde3ee;
  --table-row-even:  rgba(255, 255, 255, 0.028);

  /* Input alanları */
  --input-bg:        #1e2c42;
  --input-border:    #334055;
  --input-focus-bg:  #1b2a3e;

  /* Border / text (eski kodlarla uyumluluk) */
  --border-color:    #334055;
  --text-primary:    #dde3ee;
  --text-secondary:  #8a95a8;
  --text-light:      #5a6478;
  --shadow:          0 2px 10px rgba(0, 0, 0, 0.30);
  --shadow-hover:    0 4px 14px rgba(0, 0, 0, 0.40);

  /* Butonlar */
  --btn-default-bg:  #2a3a52;
  --btn-default-txt: #dde3ee;
  --btn-default-bd:  #3e5070;

  --btn-primary-bg:  #2c5f9e;
  --btn-primary-bd:  #4080c0;

  --btn-success-bg:  #1a7a44;
  --btn-success-bd:  #28a85e;

  --btn-danger-bg:   #8e2020;
  --btn-danger-bd:   #c03030;

  --btn-warning-bg:  #8c5510;
  --btn-warning-bd:  #c07820;

  --btn-info-bg:     #1a6080;
  --btn-info-bd:     #2890b8;

  /* Scroll bar */
  --scroll-thumb:       rgba(140, 160, 190, 0.22);
  --scroll-thumb-hover: rgba(140, 160, 190, 0.38);

  /* Header / Sidebar */
  --header-bg:        linear-gradient(180deg, #1a2438 0%, #131c2d 100%);
  --header-text:      rgba(220, 228, 240, .92);
  --header-text-dim:  rgba(220, 228, 240, .65);
  --header-hover:     rgba(255, 255, 255, .055);

  --sidebar-bg:       linear-gradient(180deg, #1c2740 0%, #141e30 100%);
  --sidebar-border:   rgba(255, 255, 255, .07);
  --sidebar-link:     rgba(220, 228, 240, .80);
  --sidebar-link-dim: rgba(220, 228, 240, .55);
  --sidebar-hover-bg: rgba(255, 255, 255, .055);
  --sidebar-active-bg:rgba(107, 159, 212, .12);
  --sidebar-active-accent: rgba(62, 191, 184, .85);

  /* Durum renkleri */
  --c-success: #2dba68;
  --c-warning: #e8a030;
  --c-danger:  #e04545;
  --c-info:    #44aad4;

  color-scheme: dark;
}

/* ─── Tema toggle düğmesi ──────────────────────────────────────── */
[data-theme="dark"] .theme-toggle-btn {
  background: linear-gradient(to bottom, var(--c-surface), var(--c-surface-2));
  border-color: var(--c-border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.40), 0 5px 14px rgba(0,0,0,.30);
}
[data-theme="dark"] .theme-toggle-btn::after {
  left: 31px;
  background: linear-gradient(to bottom, var(--c-surface-2), var(--c-surface-3));
}
[data-theme="dark"] .theme-toggle-btn .sun  { opacity: 0.38; }
[data-theme="dark"] .theme-toggle-btn .moon { opacity: 1; color: #dde3ee; }

/* ─── Genel yüzeyler ────────────────────────────────────────────── */
[data-theme="dark"] .card-filter     { background-color: var(--c-surface-2); }
[data-theme="dark"] .card-panel-item {
  color: var(--c-text);
  border-bottom: 2px solid var(--c-border);
  background-color: var(--c-surface-2);
}
[data-theme="dark"] .card-panel-label { color: var(--c-muted); }
[data-theme="dark"] label             { color: var(--c-text-2); }

/* ─── Formlar ─────────────────────────────────────────────────── */
[data-theme="dark"] .form-control {
  color: var(--c-text);
  background-color: var(--input-bg);
  border: 2px solid var(--input-border);
}
[data-theme="dark"] .form-control:focus {
  background-color: var(--input-focus-bg);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-focus);
}

/* ─── Tablo ────────────────────────────────────────────────────── */
[data-theme="dark"] .table thead {
  background: linear-gradient(180deg, #2c3a52 0%, #243145 100%);
  color: var(--table-head-txt);
}
[data-theme="dark"] .table > caption + thead > tr:first-child > th,
[data-theme="dark"] .table > thead:first-child > tr:first-child > th {
  border-top: 2px solid var(--c-accent);
}
[data-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: var(--c-hover) !important;
}

/* ─── Navigasyon / Sekmeler ─────────────────────────────────────── */
[data-theme="dark"] .nav-tabs { border-bottom: 1px solid var(--c-border); }
[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-bottom-color: transparent;
  color: var(--c-text);
}
[data-theme="dark"] .nav > li > a:hover,
[data-theme="dark"] .nav > li > a:active,
[data-theme="dark"] .nav > li > a:focus {
  color: var(--c-text);
  background: var(--sidebar-hover-bg);
}

/* ─── Dropdown ─────────────────────────────────────────────────── */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}

/* ─── Pagination ────────────────────────────────────────────────── */
[data-theme="dark"] .pagination > li > a {
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
}
[data-theme="dark"] .pagination > li > a:hover,
[data-theme="dark"] .pagination > li > span:hover {
  background-color: var(--c-surface);
  border-color: var(--c-accent);
}
[data-theme="dark"] .pagination > .disabled > span {
  background-color: var(--c-surface-3);
  border-color: var(--c-border);
}

/* ─── Modal ─────────────────────────────────────────────────────── */
[data-theme="dark"] .modal-content  { background-color: var(--c-surface); }
[data-theme="dark"] .modal-header   { border-bottom: 1px solid var(--c-border-2); }
[data-theme="dark"] .modal-footer   { border-top:    1px solid var(--c-border-2); }

/* ─── HR / Sayfa başlığı ─────────────────────────────────────────── */
[data-theme="dark"] hr           { border-top: 1px solid var(--c-border); }
[data-theme="dark"] .page-header { border-bottom: 1px solid var(--c-border); }

/* ─── Özel kartlar / kutular ─────────────────────────────────────── */
[data-theme="dark"] .inv-header {
  background: linear-gradient(180deg, #2f5488 0%, #22365c 100%);
  color: var(--c-text);
  border-bottom: 2px solid var(--c-border-2);
}
[data-theme="dark"] .card-price-detail,
[data-theme="dark"] .card-unpaid-list,
[data-theme="dark"] .card-unpaid-title,
[data-theme="dark"] .email-box,
[data-theme="dark"] .event-popup,
[data-theme="dark"] .eArsiv-box,
[data-theme="dark"] .console-header,
[data-theme="dark"] .opr-header,
[data-theme="dark"] .card-graph {
  background-color: #192131 !important;
  border-color: var(--c-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .card-balance  { background-color: var(--c-surface-3); }
[data-theme="dark"] .userCard {
  border: 2px solid var(--c-border);
  background-color: var(--c-surface-2);
}
[data-theme="dark"] .opr-main-box  { background: var(--c-surface-2); }
[data-theme="dark"] .opr-box-icon  { background-color: var(--c-surface-3); color: var(--c-accent-warm); }
[data-theme="dark"] .container-header  { background-color: var(--c-surface-3); }

/* ─── Sidebar / Header ───────────────────────────────────────────── */
[data-theme="dark"] .main-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 1px 0 0 rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.16) !important;
}
[data-theme="dark"] .skin-light .main-header .navbar {
  background: radial-gradient(circle at center, #0d355f 15%, #0b2139 50%);
}

/* ─── Bildirimler / Uyarılar ─────────────────────────────────────── */
[data-theme="dark"] .notify-item {
  background: linear-gradient(to bottom, #31435e 1px, var(--c-surface-2) 1px);
}
[data-theme="dark"] .alert-info {
  color: #c8d8e8;
  background-color: #1a3d62;
  border-color: #284f7e;
}

/* ─── Finans renkleri ────────────────────────────────────────────── */
[data-theme="dark"] .debit  { color: #3acf78; white-space: nowrap; }
[data-theme="dark"] .credit { color: #e05a5a; white-space: nowrap; }

/* ─── Özel popuplar / overlayler ────────────────────────────────── */
[data-theme="dark"] .inland-popup,
[data-theme="dark"] .sources-popup {
  border-color: var(--c-border);
  background-color: var(--c-surface);
}
[data-theme="dark"] .addShip-popup {
  border-color: var(--c-border-2);
  background-color: var(--c-surface);
}
[data-theme="dark"] .step-tooltip {
  background-color: #1e4070;
  color: #f0f0d8;
}
[data-theme="dark"] .tooltip-inner {
  color: #e8e8e8;
  background-color: #162338;
}

/* ─── Tab divi ────────────────────────────────────────────────────── */
[data-theme="dark"] div.tab             { background-color: var(--c-surface); }
[data-theme="dark"] div.tab button:hover { background-color: var(--c-accent); }
[data-theme="dark"] div.tab button.active { background-color: #4e7aad; }

/* ─── Çeşitli elemanlar ──────────────────────────────────────────── */
[data-theme="dark"] .prc-main-count { background-color: var(--c-surface-2); color: var(--c-accent-warm); }
[data-theme="dark"] .prc-main-icon  { background-color: var(--c-surface-3); }
[data-theme="dark"] .card-panel-view { color: var(--c-accent-warm); }

[data-theme="dark"] .fa-add-edit {
  background-color: var(--c-surface-3);
  border-color: var(--c-border);
  color: var(--c-muted);
}

[data-theme="dark"] .calendar-current-day {
  background-color: rgba(107, 159, 212, 0.15);
  border-color: rgba(107, 159, 212, 0.35);
}

[data-theme="dark"] .ui-select-choices-row:hover {
  background-color: rgba(107, 159, 212, 0.18);
}

/* ─── SEA Dashboard ──────────────────────────────────────────────── */
[data-theme="dark"] .sea-frame {
  background: var(--c-surface);
  border: 1px solid rgba(140, 165, 200, .14);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
}
[data-theme="dark"] .sea-frame-head {
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(140, 165, 200, .14);
  color: var(--c-text);
}
[data-theme="dark"] .sea-frame-body      { background: var(--c-surface); }
[data-theme="dark"] .sea-frame-body div  { color: var(--c-text-2); }
[data-theme="dark"] .sea-frame-body hr   { border-color: rgba(140, 165, 200, .14); }
[data-theme="dark"] .sea-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(0,0,0,.40);
}
[data-theme="dark"] .badge-alert {
  background: #c53030;
  color: #fff;
  box-shadow: 0 0 10px rgba(197, 48, 48, .50);
}

/* ─── Cheque / fatura arka planları ─────────────────────────────── */
[data-theme="dark"] .cheque  { background-image: none; }
[data-theme="dark"] .gcheque { background-image: none; }

/* ─── Not kağıdı ─────────────────────────────────────────────────── */
[data-theme="dark"] .note-paper { background-image: url(/assets/img/sticky-note-bg-dark.png); }

/* ─── Scrollbar ──────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 7px; height: 7px; }
[data-theme="dark"] ::-webkit-scrollbar-track  { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb  { background: var(--scroll-thumb); border-radius: 4px; }

/* ===================================================================
   Mobile floating action tools  (Filter / New / Export …)
   Shared style for _m views' .tools-box button stacks.
   Turns the desktop top-right toolbar into a thumb-reachable FAB
   stack at the bottom-right, with the primary "New (+)" action
   visually emphasised. Pages that still carry an inline .tools-box
   override will keep their own look until it is removed.
   =================================================================== */
@media (max-width: 767px) {
  .tools-box {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    z-index: 1035 !important;              /* above content, below modal/backdrop */
    display: flex !important;
    flex-direction: column !important;      /* primary (+) ends up at the bottom */
    align-items: center !important;
    gap: 12px !important;
  }

  /* Don't cover an open modal */
  body.modal-open .tools-box { display: none !important; }

  .tools-box .tools-button {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16pt !important;
    line-height: 1 !important;
    background-color: #ffffff !important;
    color: var(--c-accent, #2563eb) !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16) !important;
    transition: transform .12s ease, box-shadow .12s ease !important;
  }
  .tools-box .tools-button:active {
    transform: scale(.92) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
  }

  /* Primary action = the "New / +" button — larger and filled */
  .tools-box .tools-button.fa-plus {
    width: 58px !important;
    height: 58px !important;
    font-size: 22pt !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--c-accent, #2563eb), var(--c-accent-2, #0ea5e9)) !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .40) !important;
  }

  /* Dark theme */
  [data-theme="dark"] .tools-box .tools-button {
    background-color: var(--c-surface-2, #1f2937) !important;
    color: var(--c-accent, #6b9fd4) !important;
    border-color: var(--c-border, rgba(140, 165, 200, .18)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45) !important;
  }
  [data-theme="dark"] .tools-box .tools-button.fa-plus {
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .50) !important;
  }
}

/* ===================================================================
   Operation "show*" directive popups — mobile layout
   (views/_m/operation/directives/show*.html)
   These panels are absolutely positioned with large fixed pixel
   widths (520–700px) meant for desktop, so on a phone they overflow
   off-screen. On mobile turn every one of them into a single
   centered, scrollable sheet and make their inner fixed-width
   controls (ui-select / inputs / textareas / tables) fluid.
   =================================================================== */
@keyframes opr-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (max-width: 767px) {

  /* --- The floating panel becomes a bottom sheet (matches the
         documentation edoc-email-panel treatment): full width,
         pinned to the bottom, rounded top, dim backdrop, slide-up --- */
  .eArsiv-box,
  .inland-popup,
  .addShip-popup,
  .addTruck-popup,
  .message-box,
  .photo-box,
  .shipsgo-popup > .card-graph {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 22px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    border: none !important;
    border-top: 4px solid #2f5488 !important;
    border-radius: 16px 16px 0 0 !important;
    /* the huge spread doubles as a full-screen dim backdrop */
    box-shadow: 0 0 0 100vh rgba(15,28,45,0.55),
                0 -8px 30px rgba(0,0,0,0.30) !important;
    box-sizing: border-box !important;
    z-index: 1055 !important;
    animation: opr-sheet-up 0.24s cubic-bezier(0.16, 0.84, 0.44, 1);
  }
  .photo-box { background-color: #333 !important; }
  [data-theme="dark"] .eArsiv-box,
  [data-theme="dark"] .inland-popup,
  [data-theme="dark"] .addShip-popup,
  [data-theme="dark"] .addTruck-popup,
  [data-theme="dark"] .message-box,
  [data-theme="dark"] .shipsgo-popup > .card-graph {
    box-shadow: 0 0 0 100vh rgba(0,0,0,0.62),
                0 -8px 30px rgba(0,0,0,0.55) !important;
  }

  /* --- Fluid form controls inside every panel --- */
  .eArsiv-box ui-select,
  .eArsiv-box .ui-select-container,
  .eArsiv-box input.form-control,
  .eArsiv-box input.input_modal_properties,
  .eArsiv-box input[type="text"],
  .eArsiv-box textarea,
  .inland-popup ui-select,
  .inland-popup .ui-select-container,
  .inland-popup input.form-control,
  .inland-popup input[type="text"],
  .inland-popup textarea,
  .addShip-popup ui-select,
  .addShip-popup .ui-select-container,
  .addShip-popup input.form-control,
  .addShip-popup input[type="text"],
  .addTruck-popup ui-select,
  .addTruck-popup .ui-select-container,
  .addTruck-popup input.form-control,
  .addTruck-popup input[type="text"],
  .message-box ui-select,
  .message-box input.form-control,
  .message-box textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Inline flex rows (e.g. plate-no + flag, shiptier + subdomain) stack */
  .eArsiv-box div[style*="display: flex"],
  .eArsiv-box div[style*="display:flex"],
  .inland-popup div[style*="display: flex"],
  .addTruck-popup div[style*="display: flex"],
  .addShip-popup div[style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Bootstrap columns (showSI / showAWB): label on its own row, value
     and the edit-pencil column stay side-by-side */
  .eArsiv-box .form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin: 0 0 6px !important;
  }
  .eArsiv-box .form-group > [class*="col-"] {
    float: none !important;
    padding: 0 !important;
  }
  .eArsiv-box .form-group > .col-xs-12 { flex: 0 0 100% !important; width: 100% !important; }
  .eArsiv-box .form-group > .col-xs-11 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  .eArsiv-box .form-group > .col-xs-1  { flex: 0 0 auto !important; width: auto !important; text-align: right !important; }

  /* card-panel value chips / labels must not keep their desktop px width */
  .eArsiv-box .card-panel-item,
  .eArsiv-box .card-panel-label,
  .inland-popup .card-panel-item,
  .inland-popup .card-panel-label,
  .addTruck-popup .card-panel-item {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Images never overflow the sheet */
  .eArsiv-box img,
  .inland-popup img,
  .message-box img,
  .photo-box img,
  .shipsgo-popup img { max-width: 100% !important; height: auto !important; }

  /* Action buttons wrap tidily instead of floating off the edge */
  .eArsiv-box .btn,
  .inland-popup .btn,
  .addTruck-popup .btn {
    float: none !important;
    margin: 8px 8px 0 0 !important;
    min-height: 36px !important;
  }

  /* Footer watermark: smaller so it doesn't force horizontal scroll */
  .eArsive-box-footer {
    font-size: 26px !important;
    width: 100% !important;
    padding-right: 12px !important;
  }

  /* --- Wide tables (showShipsgo / showMessage) become fluid/scrollable --- */
  .shipsgo-popup table { width: 100% !important; }
  .shipsgo-popup > .card-graph > table,
  .shipsgo-popup > .card-graph > table > tbody,
  .shipsgo-popup > .card-graph > table > tbody > tr,
  .shipsgo-popup > .card-graph > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }
  .shipsgo-popup th,
  .shipsgo-popup td { width: auto !important; }
  .message-box .table { display: block !important; overflow-x: auto !important; }
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ═══════════════════════════════════════════════════════════════════
   Form sections (reusable card + field grid)
   Kullanım:
     <div class="form-section">
       <div class="form-section-head">
         <h4 class="form-section-title">...</h4>
         <p class="form-section-alert">...</p>
       </div>
       <div class="form-grid">
         <div class="form-field is-invalid?">
           <label class="form-field-label">...</label>
           <input class="form-control"> | <ui-select>
         </div>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════ */
.form-section {
  background-color: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #d5dde6);
  border-radius: 10px;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.08));
  padding: 14px 18px 18px 18px;
  margin: 15px 0 0 0;
  line-height: 1.25;
}
.form-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--c-border, #d5dde6);
}
.form-section-title {
  position: relative;
  margin: 0;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-text, #17212b);
  line-height: 1.3;
}
.form-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-accent-2, #0ea5e9), var(--c-accent, #2563eb));
}
.form-section-alert {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #b42318;
  background-color: #fef3f2;
  border: 1px solid #fecdca;
}
.form-section-alert::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #d92d20;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* --- Alan ızgarası: sütun sayısı kendini genişliğe göre ayarlar --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
}
.form-field {
  min-width: 0;
  margin: 0;
}
.form-field-label {
  display: block;
  margin: 0 0 6px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-muted, #6b7b8c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-field .form-control,
.form-field .ui-select-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* NOT: global .form-control kuralı border/radius/background'ı !important ile
   veriyor; burada sadece hizalamayı düzeltip hata rengini !important ile eziyoruz. */
.form-field .form-control,
.form-field .ui-select-bootstrap > .ui-select-match > .btn {
  height: 38px;
  margin-top: 0;
  font-size: 14px;
}
.form-field .ui-select-bootstrap > .ui-select-match > .btn {
  padding-right: 26px;
  line-height: 1.6;
}
.form-field.is-invalid .form-field-label {
  color: #d92d20;
}
.form-field.is-invalid .form-control,
.form-field.is-invalid .ui-select-bootstrap > .ui-select-match > .btn {
  border-color: #f04438 !important;
  background-color: #fffbfa !important;
}
.form-field-hint {
  display: block;
  margin: 5px 0 0 0;
  font-size: 11.5px;
  color: var(--c-muted, #6b7b8c);
}

/* --- Karanlık tema --- */
[data-theme="dark"] .form-section-alert {
  color: #fda29b;
  background-color: rgba(240, 68, 56, 0.14);
  border-color: rgba(240, 68, 56, 0.38);
}
[data-theme="dark"] .form-field.is-invalid .form-control,
[data-theme="dark"] .form-field.is-invalid .ui-select-bootstrap > .ui-select-match > .btn {
  background-color: rgba(240, 68, 56, 0.12) !important;
}

/* --- Mobil --- */
@media (max-width: 767px) {
  .form-section {
    padding: 12px 12px 14px 12px;
    margin-top: 12px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .form-section-title { font-size: 15px; }
  .form-section-alert { font-size: 12px; }
  .form-field-label { font-size: 12px; white-space: normal; }
  .form-field .form-control,
  .form-field .ui-select-bootstrap > .ui-select-match > .btn { height: 40px; }
}