.splash-screen {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #1e469a;
background-image: -webkit-gradient(linear, left top, right top, from(#1e469a), to(#49a7c1));
background-image: -webkit-linear-gradient(left, #1e469a, #49a7c1);
background-image: -moz-linear-gradient(left, #1e469a, #49a7c1);
background-image: -ms-linear-gradient(left, #1e469a, #49a7c1);
background-image: -o-linear-gradient(left, #1e469a, #49a7c1);
background-image: linear-gradient(to right, #1e469a, #49a7c1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e469a', endColorstr='#49a7c1', gradientType=1); }
.splash-screen .splash-loader {
margin: 0 auto;
width: 40px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px; }
.splash-screen .splash-loader .splash-cube1,
.splash-screen .splash-loader .splash-cube2 {
background-color: #ffffff;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out; }
.splash-screen .splash-loader .splash-cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }

@-webkit-keyframes sk-cubemove {
25% {
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
50% {
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
75% {
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
100% {
-webkit-transform: rotate(-360deg); } }
@keyframes sk-cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); }
50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg); } }

html {
  height: 100%; }

body {
  /* font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; */
    font-size: 13px;
    color: #252424;
    -webkit-font-smoothing: antialiased;
    padding: 0;
    margin: 0;
    min-height: 100%;
    background-color: #F5F7FA; }


.layout-wrapper .topbar {


    padding: 12px 15px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    color: #ffffff;
    height: 55px;
    border-bottom: solid 1px transparent;
    z-index: 100;
    box-sizing: border-box;
    background-color: #4c8fbd;
    /* background-image: linear-gradient(to right,#003399 0,#0066ff 65%); */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c3e50', endColorstr='#4ca1af', gradientType=1);
    -webkit-box-shadow: 2px 4px 20px -4px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 4px 20px -4px rgba(0, 0, 0, 0.1);

}

  .layout-wrapper .topbar .topbar-logo img {

    vertical-align: middle; }

    .layout-wrapper .topbar #languagemst {
    float: right !important;
    margin-top: -12px;
    text-decoration: none;
    width: 150px;
    }

  .layout-wrapper .topbar #user-display {
    float: right;
    text-align: right;
    /* margin-top: 2px; */
    /* margin-top: 9px; */
    text-decoration: none;
    right: 0%;
   }
    .layout-wrapper .topbar #user-display img {
      vertical-align: middle;
      width: 23px;
      margin-right: 10px;
      margin-top: -15px; }
    .layout-wrapper .topbar #user-display .username {
      -moz-transition: color 0.3s;
      -o-transition: color 0.3s;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      vertical-align: middle;
      margin-right: 8px;
        }
    .layout-wrapper .topbar #user-display .fa {
      -moz-transition: color 0.3s;
      -o-transition: color 0.3s;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      font-size: 16px;
      vertical-align: middle;
      color: #404E67;
    }
    .layout-wrapper .topbar #user-display:hover .username, .layout-wrapper .topbar #user-display:hover .fa {
      }
  .layout-wrapper .topbar #menu-button {
    /* vertical-align: middle; */
    font-size: 16px;
    margin-left: 210px;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }
    .layout-wrapper .topbar #menu-button:hover {
      color: #d9d9d9; }
  .layout-wrapper .topbar .fa-search {
    font-size: 16px;
    vertical-align: middle;
    margin-left: 36px; }
  .layout-wrapper .topbar .topbar-search {
    vertical-align: middle;
    border: 0 none;
    background-color: transparent;
    color: #404E67;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }
    .layout-wrapper .topbar .topbar-search:focus {
      outline: 0 none; }
    .layout-wrapper .topbar .topbar-search::-webkit-input-placeholder {
      color: #404E67; }
    .layout-wrapper .topbar .topbar-search:-moz-placeholder {
      color: #404E67; }
    .layout-wrapper .topbar .topbar-search::-moz-placeholder {
      color: #404E67; }
    .layout-wrapper .topbar .topbar-search:-ms-input-placeholder {
      color: #404E67; }
  .layout-wrapper .topbar a {
    color: #ffffff;
   }

  .layout-wrapper .topbar #topbar-menu {
    display: none;
    position: absolute;
    right: 15px;
    top: 51px;
    width: 210px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #4c8fbd;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    animation-duration: .5s;
   }
    .layout-wrapper .topbar #topbar-menu.topbar-menu-visible {
      display: block;
      border: 0px solid #E6E6E6;
      border-radius: 0 0 0.25rem 0.25rem;
      right: 5px;
      top: 45px;
      box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);

    }
    .layout-wrapper .topbar #topbar-menu > li a {
      color: #0d0d0d;
      padding: 10px 16px;
      display: block; }
      .layout-wrapper .topbar #topbar-menu > li a i {
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
}
      .layout-wrapper .topbar #topbar-menu > li a span {
        /* margin-left: 6px; */
        color: #fff;
        display: inline-block;
        vertical-align: middle; }
      .layout-wrapper .topbar #topbar-menu > li a img {
        display: inline-block;
        vertical-align: middle; }
      .layout-wrapper .topbar #topbar-menu > li a .topbar-badge {
        float: right;
        background-color: #36ae2c;
        padding: 2px 8px;
        display: block;
        margin-top: -2px;
        color: #404E67;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; }
      .layout-wrapper .topbar #topbar-menu > li a:hover {
        background-color: #4480AA;
        border: 1px solid #ffffff42;
        color: #fff;
      }
    .layout-wrapper .topbar #topbar-menu > li ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: none; }
      .layout-wrapper .topbar #topbar-menu > li ul a {
        padding-left: 32px; }
    .layout-wrapper .topbar #topbar-menu > li.menuitem-active > a {
      color: #404E67; }
    .layout-wrapper .topbar #topbar-menu > li.menuitem-active > ul {
      display: block; }
.layout-wrapper .layout-menu-wrapper {
  position: fixed;
  top: 55px;
  height: 100%;
  width: 55px;
  /* border-right: solid 1px #dee4e9; */
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
  .layout-wrapper .layout-menu-wrapper .sidebar-scroll-content {
    display: block;
    height: 100%;
    position: relative; }
    .layout-wrapper .layout-menu-wrapper .sidebar-scroll-content .menu-container {
      padding-bottom: 80px; }
  .layout-wrapper .layout-menu-wrapper .mobile-search {
    display: none; }
  .layout-wrapper .layout-menu-wrapper .layout-menu {
    list-style-type: none;
    margin: 0;
    padding: 0 0 120px 0;
    box-sizing: border-box;
    margin-top:-4px;

   }
    .layout-wrapper .layout-menu-wrapper .layout-menu li > a {
      position: relative;
      color: white;
      text-decoration: none;
      padding: 10px 16px;
      display: block;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 300;
      /* border-bottom: 1px solid #F5F6F7; */
    }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > a .menu-badge {
        position: absolute;
        right: 15px;
        top: 13px;
        color: #ffffff;
        padding: 2px 6px;
        background-color: #36ae2c;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > a .fa {
        vertical-align: middle;
        font-size: 17px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > a .fa:last-child {
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        float: right; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > a span {
        vertical-align: middle;
        margin-left: 10px;
        font-family: 'Meiryo';
        font-weight: 400;
        font-size: 13px;
        display: none;
       }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > a:hover {
        /* background-color: #F6F9FB; */
       }
        .layout-wrapper .layout-menu-wrapper .layout-menu li > a:hover .menu-badge {
          color: #fff;
        }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > a.active-menuitem-routerlink {
        color: #2c3e50;
        background-color: #465f78; }
    .layout-wrapper .layout-menu-wrapper .layout-menu li.active-menuitem > a {
      border-bottom: 0 none;
      background-color: #F6F9FB;
      color: #2c3e50; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li.active-menuitem > a .fa:last-child {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg); }
    .layout-wrapper .layout-menu-wrapper .layout-menu li > ul {
      overflow: hidden;
      list-style-type: none;
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: none; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li a {
        padding-left: 32px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li > ul li a {
        padding-left: 48px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li > ul li > ul li a {
        padding-left: 64px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li > ul li > ul > ul li a {
        padding-left: 80px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li > ul li > ul > ul > ul li a {
        padding-left: 96px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li > ul li > ul > ul > ul > ul li a {
        padding: 112px; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li > ul li > ul li > ul > ul > ul > ul > ul li a {
        padding: 128px; }
    .layout-wrapper .layout-menu-wrapper .layout-menu li.orange-badge > a .menuitem-badge {
      background-color: #f6ac2b;
      color: #ffffff; }
    .layout-wrapper .layout-menu-wrapper .layout-menu li.purple-badge > a .menuitem-badge {
      background-color: #7e8dcd;
      color: #ffffff; }
    .layout-wrapper .layout-menu-wrapper .layout-menu li.blue-badge > a .menuitem-badge {
      background-color: #3984b8;
      color: #ffffff; }
    .layout-wrapper .layout-menu-wrapper .layout-menu li .layout-menu-tooltip {
      display: block;
      padding: 0 5px;
      position: absolute;
      left: 40px;
      top: 8px;
      z-index: 101;
      line-height: 1; }
      .layout-wrapper .layout-menu-wrapper .layout-menu li .layout-menu-tooltip .layout-menu-tooltip-text {
        padding: 6px 8px;
        font-weight: 700;
        background-color: #2c3f51;
        color: #ffffff;
        min-width: 75px;
        white-space: nowrap;
        text-align: center;
        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); }
      .layout-wrapper .layout-menu-wrapper .layout-menu li .layout-menu-tooltip .layout-menu-tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        top: 50%;
        left: 0;
        margin-top: -5px;
        border-width: 5px 5px 5px 0;
        border-right-color: #2c3f51; }
    .layout-wrapper .layout-menu-wrapper .layout-menu li .menuitem-badge {
      position: absolute;
      right: 34px;
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 6px;
      text-align: center;
      background-color: #36ae2c;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      line-height: 16px;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%; }
  .layout-wrapper .layout-menu-wrapper.layout-menu-dark {
    background-color: #FFF;
  border-right-color: #CBCDD0;}
    .layout-wrapper .layout-menu-wrapper.layout-menu-dark .mobile-search i {
      color: #ffffff; }
    .layout-wrapper .layout-menu-wrapper.layout-menu-dark .mobile-search input {
      background-color: transparent;
      color: #ffffff; }
    .layout-wrapper .layout-menu-wrapper.layout-menu-dark .layout-menu li a {
      color: white;

    }
      .layout-wrapper .layout-menu-wrapper.layout-menu-dark .layout-menu li a:hover {
        /* background-color: #E4E6E8; */
        color: #fff;
 }

      .layout-wrapper .layout-menu-wrapper.layout-menu-dark .layout-menu li a.active-menuitem-routerlink {
        color: #fff;
        background: #465f78;
    font-weight: 400;
    border-left: 3px solid;}
      .layout-wrapper .layout-menu-wrapper.layout-menu-dark .layout-menu li{
        padding: 0;
        border-left: 2px solid transparent;
        position: relative;
    }

    .layout-wrapper .layout-menu-wrapper.layout-menu-dark .layout-menu li.active-menuitem {
      border-left: 2px solid #00B5B8;
    }

    .layout-wrapper .layout-menu-wrapper.layout-menu-dark .layout-menu li.active-menuitem > a {
      color: #F7F6F6;
      background: none;
  }
  .layout-wrapper .layout-menu-wrapper .p-scrollpanel {
    background: #4c8fbd;
    border-radius: 0;
    border: none; }
    .layout-wrapper .layout-menu-wrapper .p-scrollpanel .p-scrollpanel-bar {
      background-color: #aaaaaa;
      opacity: 0.3;
      filter: alpha(opacity=30); }
    .layout-wrapper .layout-menu-wrapper .p-scrollpanel .p-scrollpanel-hidden {
      display: block;
      visibility: hidden; }
    .layout-wrapper .layout-menu-wrapper .p-scrollpanel .layout-menu-container {
      width: 73px;
      padding-right: 18px;
      margin-top: 40px; }
.layout-wrapper .layout-content {
  padding: 0;
  -moz-transition: margin-left 0.3s;
  -o-transition: margin-left 0.3s;
  -webkit-transition: margin-left 0.3s;
  transition: margin-left 0.3s; }
.layout-wrapper .layout-footer {
  /* background-color: #343233;
  color: #ffffff;
  border-top: 1px solid #343233;
  border-bottom: 1px solid #343233; */
}
  .layout-wrapper .layout-footer img {
    width: 100px; }
  .layout-wrapper .layout-footer .layout-footer-right {
    float: right; }
  .layout-wrapper .layout-footer a {
    color: #7d8286;
    font-size: 20px;
    margin-left: 12px;
    line-height: 34px;
}
.layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > a:hover + .layout-menu-tooltip {
  display: block; }
@media (min-width: 641px) {
  .layout-wrapper.layout-menu-static .layout-menu-wrapper {
    /* padding-top: 15px; */
    left: 0; }
  .layout-wrapper.layout-menu-static .layout-footer {
    margin-left: 46px;
  }
  .layout-wrapper.layout-menu-static.layout-menu-static-inactive .layout-menu-wrapper {
    left: -220px; }
  .layout-wrapper.layout-menu-static.layout-menu-static-inactive .layout-content {
    margin-left: 0; }
  .layout-wrapper.layout-menu-static.layout-menu-static-inactive .layout-footer {
    margin-left: 0; }
  .layout-wrapper.layout-menu-overlay .layout-menu-wrapper {
    padding-top: 15px;
    left: -220px;
    z-index: 100; }
  .layout-wrapper.layout-menu-overlay .layout-content {
    margin-left: 0; }
  .layout-wrapper.layout-menu-overlay .layout-footer {
    margin-left: 0; }
  .layout-wrapper.layout-menu-overlay.layout-menu-overlay-active .layout-menu-wrapper {
    left: 0; }
  .layout-wrapper.layout-menu-slim #menu-button {
    /* display: none;  */
  }
  .layout-wrapper.layout-menu-slim .layout-menu-wrapper {
    width: 75px;
    overflow: visible;
    z-index: 100; }
    .layout-wrapper.layout-menu-slim .layout-menu-wrapper .p-scrollpanel {
      border: none;
      border-radius: 0; }
      .layout-wrapper.layout-menu-slim .layout-menu-wrapper .p-scrollpanel .p-scrollpanel-wrapper {
        overflow: visible; }
        .layout-wrapper.layout-menu-slim .layout-menu-wrapper .p-scrollpanel .p-scrollpanel-wrapper .p-scrollpanel-content {
          /* overflow: visible;  */
        }
      .layout-wrapper.layout-menu-slim .layout-menu-wrapper .p-scrollpanel .p-scrollpanel-bar {
        display: none; }
      .layout-wrapper.layout-menu-slim .layout-menu-wrapper .p-scrollpanel .layout-menu-container {
        width: 92px;
        margin-top: 0px;}
    .layout-wrapper.layout-menu-slim .layout-menu-wrapper.layout-menu-dark .layout-menu > li > ul {
      display: none; }
    .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu {
      padding: 0; }
      .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li {
        position: relative; }
        .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > a {
          text-align: center;
          padding-left: 0;
          padding-right: 0;
          padding-top: 8px;
          padding-bottom: 8px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > a i:first-child {
            font-size: 19px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > a span, .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > a i:last-child {
            display: none; }
        .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul {
          -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
          background-color: #ffffff;
          position: absolute;
          top: 0;
          left: 76px;
          min-width: 200px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul li a {
            padding-left: 16px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul li ul li a {
            padding-left: 32px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul li ul ul li a {
            padding-left: 48px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul li ul ul ul li a {
            padding-left: 64px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul li ul ul ul ul li a {
            padding: 80px; }
          .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li > ul li ul ul ul ul ul li a {
            padding: 96px; }
        .layout-wrapper.layout-menu-slim .layout-menu-wrapper .layout-menu > li.active-menuitem > a:hover + .layout-menu-tooltip {
          display: none; }
    .layout-wrapper.layout-menu-slim .layout-menu-wrapper.layout-menu-dark .layout-menu > li > ul {
      background-color: #ffffff; }
  .layout-wrapper.layout-menu-slim .layout-content {
    margin-left: 75px; }
  .layout-wrapper.layout-menu-slim .layout-footer {
    margin-left: 75px; } }
@media (max-width: 640px) {
  .main-navigation{
    display: none;
  }
  .layout-wrapper .layout-menu-wrapper {
    padding-top: 15px;
    left: -220px;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    z-index: 100;
   }
    .layout-wrapper .layout-menu-wrapper .mobile-search {
      display: block;
      padding: 10px 16px; }
      .layout-wrapper .layout-menu-wrapper .mobile-search .fa {
        font-size: 16px; }
      .layout-wrapper .layout-menu-wrapper .mobile-search input {
        border: 0 none;
        font-size: 13px;
      font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
        padding-left: 6px;
        color: #757575; }
        .layout-wrapper .layout-menu-wrapper .mobile-search input:focus {
          outline: 0 none; }
  .layout-wrapper .layout-content {
    margin-left: 0; }
  .layout-wrapper .layout-footer {
    margin-left: 0; }
  .layout-wrapper .topbar .topbar-logo {
    width:100px;
    display: block;
    margin: 0 auto; }
  .layout-wrapper .topbar .topbar-search-icon, .layout-wrapper .topbar .topbar-search {
    display: none; }
  .layout-wrapper .topbar #menu-button {
    font-size: 24px;
    float: left;
    margin-left: 0;
    margin-top: -36px; }
    .layout-wrapper .topbar #span_menu{
      display: none !important;
    }
    select#dropdown_select{
      display: none;
    }
    .layout-wrapper .topbar #topar_logo {
      width: 100px !important;
      height: 55px !important;
    }
  .layout-wrapper .topbar #user-help {
    /* margin-top: -30px; */
    display: none;
   }
    .layout-wrapper .topbar #user-display .username {
      /* display: none;  */
    }
  .layout-wrapper.layout-menu-active .topbar {
    z-index: 999999998; }
  .layout-wrapper.layout-menu-active .layout-menu-wrapper {
    left: 0;
    z-index: 999999999; }
  .layout-wrapper .layout-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #424242;
    top: 0;
    left: 0;
    z-index: 999999997;
    opacity: 0.9;
    filter: alpha(opacity=90); } }


    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
        .layout-wrapper .topbar #mobile_span{
          display: none;
        }
        .layout-wrapper .topbar #mobile_span1 {
          display: none !important;
      }
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
        .layout-wrapper .topbar #mobile_span{
          display: none;
        }
        .layout-wrapper .topbar #mobile_span1 {
          display: none !important;
      }
    }
    @media only screen and (min-width: 2000px) {
      .layout-wrapper .topbar #mobile_span{
        display: none;
      }
      .layout-wrapper .topbar #mobile_span1 {
        display: none !important;
    }
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
      #timelinesschartdiv{
        height: 65vh !important;
      }
      .layout-wrapper .topbar #mobile_span{
        padding-top: 0px !important;
      }
      .layout-wrapper .topbar #user-display{
        margin-top: 0px !important;
      }
      #padding_div{
        /* padding-left: 4vh; */
      }
      #user-help{
        display: none;
      }
      #main_div {
        height: calc(100vh - 313px) !important;
    }
    #vesseldashboard_div {
      height: calc(100vh - 257px) !important;
  }
  #dashboard_div {
    height: calc(100vh - 146px) !important;
}
#title_div{
  display: block !important;
}
#title_div1{
  display: block !important;
}
#title_div2{
  display: block !important;
  flex-direction: column-reverse;
}
#box.opened {
  max-height: 82vh !important;
}
div#missingvalidation{
  margin-left: -18vh !important;
}
div#missingvaluesdaata{
  margin-left: -20vh !important;
  width: 40vh !important;
}
div#mismatchvaluesdata{
  margin-left: -21vh !important;
  width: 40vh;
}
div#channelmissingvalues{
  margin-left: -23vh !important;
    width: 46vh !important;
}
div#completeness_rec{
  width: 45vh !important;
    margin-left: -10vh !important;
}
body .p-inputtext{
  width: 15vh;
}
      #label_id{
        font-size: 15px !important;
      }
      #vessel_data{
        float: none !important;
      }
      .timelinesschart{
        width: 150px !important;
        margin-left: 50px !important;
      }
      .completenesschart{
        width: 150px !important;
    margin-left: 50px !important;
      }
      .integritychart{
        width: 150px !important;
    margin-left: 50px !important;
      }
      .accuracychart{
        width: 150px !important;
    margin-left: 50px !important;
      }
      #scroll_div{
        max-height: 23vh;
        overflow: scroll;
      }
      #layout{
        display: inline-flex;
      }
       /* styles for mobile browsers smaller than 480px; (iPhone) */
       #vesseldashboard_responsive{
         height: auto !important;
       }
    }
    @media (min-width: 576px) {
      .modal-dialog {
        max-width: none !important;
        margin: 1.75rem auto;
      }

      @media only screen and (device-width: 768px) {
        .layout-wrapper .topbar #mobile_span {
          display: none;
        }

        /* default iPad screens */
      }
      /* different techniques for iPad screening */
      @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
        /* For portrait layouts only */
        .layout-wrapper .topbar #mobile_span {
          display: block;
        }

        .p-datatable {
          width: 100%;
          overflow-y: scroll;
        }

        #dashboard_div {
          overflow: auto !important;
          height: calc(100vh - 90px) !important;
        }

        .layout-wrapper .topbar #span_menu {
          display: none !important;
        }

        #vesseldashboard_responsive {
          height: auto !important;
        }

        #title_div1 {
          display: block !important;
        }

        #vesseldashboard_div {
          height: calc(100vh - 220px) !important;
        }

        #main_div {
          height: calc(100vh - 297px) !important;
        }
      }

      @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
        /* For landscape layouts only */
        .layout-wrapper .topbar #mobile_span {
          display: none !important;
        }
      }



      .p-breadcrumb ul li {
        margin: 0 3px !important;
      }

      .p-sortable-column-icon.fa-sort-asc:before {
        content: "\f09b";
      }

      .p-card-title {
        font-weight: 500 !important;
        letter-spacing: 1px;
        color: #1B2942;
        font-size: 1.12rem !important;

      }

      .p-card-subtitle {
        font-weight: 500 !important;
        letter-spacing: 1px;
        color: #1B2942;
        font-size: 1.12rem !important;
        opacity: 1 !important;
        margin-bottom: 0px !important;

      }

      #language .p-dropdown {
        border: none;
        padding-top: 12px;


      }

      #language .p-dropdown-panel {
        top: 50px !important;
        background: #6D8FF1 !important;

      }


      #language .p-dropdown .p-dropdown-trigger {
        /*background-color: transparent;
        padding-top: 8px; */

        color: #fc640c;
        padding-top: 9px;
      }

      #language .p-inputtext {
        color: white;
      }

      #language .p-dropdown-trigger {
        display: none;
      }


      .p-menuitem-link.p-state-disabled {
        color: #757575 !important;
        opacity: 1 !important;
      }


      .card {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        border-radius: 4px !important;

      }

      .media {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
      }

      .align-items-stretch {
        -webkit-box-align: stretch !important;
        -webkit-align-items: stretch !important;
        -moz-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important;

      }

      .bg-gradient-s1, .bg-gradient-s2, .bg-gradient-s3, .bg-gradient-s4, .bg-gradient-s5, .bg-gradient-s6 {
        border-radius: 10px;
      }

      .sideborder {
        border-radius: 3px 0px 0px 3px;
      }

      .bg-gradient-s1 {
        background-image: -webkit-gradient(linear, left top, right top, from(#3f51b5), to(#6262ce));
        background-image: -webkit-linear-gradient(left, #3f51b5 0, #6262ce 100%);
        background-image: -moz-linear-gradient(left, #3f51b5 0, #6262ce 100%);
        background-image: -o-linear-gradient(left, #3f51b5 0, #6262ce 100%);
        background-image: linear-gradient(to right, #3f51b5 0, #6262ce 100%);
        background-repeat: repeat-x;
      }

      .bg-gradient-s2 {
        background-image: -webkit-gradient(linear, left top, right top, from(green), to(#6eb36e));
        background-image: -webkit-linear-gradient(left, green 0, #6eb36e 100%);
        background-image: -moz-linear-gradient(left, green 0, #6eb36e 100%);
        background-image: -o-linear-gradient(left, green 0, #6eb36e 100%);
        background-image: linear-gradient(to right, green 0, #6eb36e 100%);
        background-repeat: repeat-x;
      }

      .bg-gradient-s3 {
        background-image: -webkit-gradient(linear, left top, right top, from(#a9a146), to(#b7b48d));
        background-image: -webkit-linear-gradient(left, #a9a146 0, #b7b48d 100%);
        background-image: -moz-linear-gradient(left, #a9a146 0, #b7b48d 100%);
        background-image: -o-linear-gradient(left, #a9a146 0, #b7b48d 100%);
        background-image: linear-gradient(to right, #a9a146 0, #b7b48d 100%);
        background-repeat: repeat-x;
      }

      .bg-gradient-s6 {
        background-image: -webkit-gradient(linear, left top, right top, from(#484740), to(#88877a));
        background-image: -webkit-linear-gradient(left, #484740 0, #88877a 100%);
        background-image: -moz-linear-gradient(left, #484740 0, #88877a 100%);
        background-image: -o-linear-gradient(left, #484740 0, #88877a 100%);
        background-image: linear-gradient(to right, #484740 0, #88877a 100%);
        background-repeat: repeat-x;
      }

      .bg-gradient-s4 {
        background-image: -webkit-gradient(linear, left top, right top, from(#FF6275), to(#FF9EAC));
        background-image: -webkit-linear-gradient(left, #FF6275 0, #FF9EAC 100%);
        background-image: -moz-linear-gradient(left, #FF6275 0, #FF9EAC 100%);
        background-image: -o-linear-gradient(left, #FF6275 0, #FF9EAC 100%);
        background-image: linear-gradient(to right, #FF6275 0, #FF9EAC 100%);
        background-repeat: repeat-x;
      }

      .bg-gradient-s5 {
        background-image: -webkit-gradient(linear, left top, right top, from(#FF976A), to(#FFC2A4));
        background-image: -webkit-linear-gradient(left, #FF976A 0, #FFC2A4 100%);
        background-image: -moz-linear-gradient(left, #FF976A 0, #FFC2A4 100%);
        background-image: -o-linear-gradient(left, #FF976A 0, #FFC2A4 100%);
        background-image: linear-gradient(to right, #FF976A 0, #FFC2A4 100%);
        background-repeat: repeat-x;
      }


      .white {
        color: #FFFFFF !important;
      }

      .media-body {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }

      .text-bold-400 {
        font-weight: 400;
      }

      .mb-0, .my-0 {
        margin-bottom: 0 !important;
      }

      h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-bottom: 0.5rem;
        font-weight: 400;
        line-height: 1.2;
        color: inherit;
      }

      h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 3px;
      }

      h5, .h5 {
        font-size: 11px;
        font-weight: bold;

      }

      /* .p-2 {
        width: 57%;
        padding: 8px 6px !important;

      } */

      .p-2 i {
        font-size: 16px;
        opacity: 0.6;

      }

      .p-2 h5 > span {
        font-size: 16px;
        font-weight: normal;
      }

      .p-2 h4 {
        /* text-align: center; */
        /* padding-top: 6px; */
        /* font-weight: bold; */
        opacity: 0.7;
        margin-top: 2% !important;
      }


      .svg-triangle {
        margin: 0 auto;
        width: 30px;
        height: 30px;
        margin-bottom: -25px;
        padding-right: 30px;
        transform: rotate(270deg);

        /* doesn't work as intended in Firefox
        * % values are taken relative to the SVG, not the element
        which actually seems to be correct */
        transform-origin: 50% 50%;
      }


      .svg-triangle polygon {
        fill: white;
        stroke: #c7cdd1;
        stroke-width: 1;
      }

      body .p-steps .p-steps-item.p-state-highlight .svg-triangle polygon {
        fill: #5B9CD6;
      }

      input {
        /* height:27px; */
      }

      .panelbutton {
        background-color: #E8EBEF !important;
        color: #757575 !important;
      }

      .p-picklist .p-picklist-buttons button:nth-child(1) {
        background: #599ECA;
      }

      .p-picklist .p-picklist-buttons button:nth-child(2) {
        background: #5874C7;
      }

      .p-picklist .p-picklist-buttons button:nth-child(3) {
        background: #F08080;
      }

      .p-picklist .p-picklist-buttons button:nth-child(4) {
        background: #E83535;
      }

      .p-confirmdialog .p-dialog-footer .p-button:nth-child(1) {
        background: #3EB839;
      }

      .p-confirmdialog .p-dialog-footer .p-button:nth-child(2) {
        background: #E17576;
      }

      .p-multiselect-item.p-state-highlight {
        background-color: #D2D4D6;
        color: #151414;
      }

      .layout-wrapper .topbar #topbar-menu.topbar-menu-visible li:nth-child(1) {
        /* border-bottom: 1px solid #A2A0A0; */
      }

      .layout-menu-wrapper .fa-dashboard {
        /* color: #FC6F8B; */
      }

      .layout-menu-wrapper .fa-database {
        /* color:#FFB64D; */
      }

      .layout-menu-wrapper .fa-cogs {
        color: #8C7CFA;
      }
    }