/*
  DEMO STYLE
*/

html {
  overflow-y: scroll;
}

body {
  background: #fafafa;
}

p {
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 0px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  /*margin-bottom: 40px;*/
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}

i, span {
  display: inline-block;
}

.indicatorIn:before {
  content: "\e257";
}

.indicatorOut:before {
  content: "\e258";
}

/* ---------------------------------------------------
  SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebarCollapse {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 1100;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #28475d;
  color: #fff;
  transition: all 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1099;
}

#sidebar.active {
  min-width: 64px;
  max-width: 64px;
  text-align: center;
}

#sidebar.active .sidebar-header h3 {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right:  0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
  top: auto;
  bottom: 5px;
  right: 50%;
  -webkit-transform: translateX(30%);
  -ms-transform: translateX(30%);
  transform: translateX(30%);
}

#sidebar.active a > span {
  display: none;
}

#sidebar .sidebar-header {
  padding: 5px;
  background: #28475d;
  margin-top: 50px;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar .logo {
  width: 42%;
  transition: all 0.3s;
}

#sidebar.active .logo {
  width: 100%;
  transition: all 0.3s;
}

#sidebar ul.components {
  /*padding: 20px 0;*/
  /*border-bottom: 1px solid #47748b;*/
}

#sidebar ul li a {
  padding: 5px;
  font-size: 1.1em;
  display: block;
  border: 2px solid #4f6879
}

#sidebar ul li a:hover, .selected {
  color: #28475d;
  background: #cff3f1;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
  color: #fff;
  /*background: #76b787;*/
}

#sidebar a[aria-expanded="true"] {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#sidebar a[aria-expanded="false"] {
  border-radius: 8px;
}

#sidebar ul ul li:last-child > a {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#sidebar ul li {
  margin: 4px;
}

#sidebar ul ul li {
  margin: 0;
}
a[data-toggle="collapse"] {
  position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
  content: '\e259';
  display: block;
  position: absolute;
  right: 20px;
  font-family: 'Glyphicons Halflings';
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  content: '\e260';
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #4f6879;
  border: none !important;
}

/* ---------------------------------------------------
  CONTENT STYLE
----------------------------------------------------- */
#content {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
  width: calc(100% - 250px);
  position: absolute;
  top: 0;
  right: 0;
}

#content.active, header.active, footer.active {
  width: calc(100% - 64px);
  transition: all 0.3s;
}

header, footer {
  width: calc(100% - 250px);
  right: 0;
  transition: all 0.3s;
}

header {
  top: 0;
  position: absolute;
}

footer {
  position: fixed;
}

#content.no-sidebar, header.no-sidebar, footer.no-sidebar {
  width: 100%;
}

th.civ_tbl {
  background-color: #505D75;
  color: rgba(255, 255, 255, 0.66);
}

/* ---------------------------------------------------
  BOOTSTRAP OVERRIDE
----------------------------------------------------- */
header.navbar-fixed-top {
  left:auto;
}

.modal {
  z-index: 1550;
}

.modal-backdrop {
  z-index: 1500;
}

p {
  color: #777;
}

/* ---------------------------------------------------
  screen.css OVERRIDE
----------------------------------------------------- */
#row_container {
  padding-top: 48px;
}

#my_container {
  padding: 0;
}

#my_container.no-sidebar {
  padding-top: 54px;
  padding-bottom: 100px;
}

/* ---------------------------------------------------
  MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {

  #sidebar {
    min-width: 64px;
    max-width: 64px;
    text-align: center;
    margin-left: -64px !important ;
  }

  a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(30%);
    -ms-transform: translateX(30%);
    transform: translateX(30%);
  }

  #sidebar.active {
    margin-left: 0 !important;
  }

  #sidebar .sidebar-header h3/*, #sidebar .CTAs*/ {
    display: none;
  }

  #sidebar .sidebar-header strong {
    display: block;
  }

  #sidebar ul li a {
    padding: 20px 10px;
  }

  #sidebar ul li a span {
    font-size: 0.85em;
  }
  #sidebar ul li a i {
    margin-right:  0;
    display: block;
  }

  #sidebar ul ul a {
    padding: 5px !important;
  }

  #sidebar ul li a i {
    font-size: 1.3em;
  }

  #sidebar {
    margin-left: 0;
  }

  #content, header, footer {
    width: 100%;
  }

  #content.active. header.active, footer.active {
    width: calc(100% - 80px);
  }

  #sidebarCollapse span {
    display: none;
  }

  .indicatorIn:before {
    content: "\e258";
  }

  .indicatorOut:before {
    content: "\e257";
  }

}

/**
 * Lines (for Loader)
 */
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s -0.4s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s -0.3s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s -0.2s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s -0.1s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div {
  background-color: #fff;
/*
  width: 4px;
  height: 35px;
*/  
/*
  width: 8px;
  height: 70px;
  border-radius: 2px;
  margin: 2px;
*/  
  width: 32px;
  height: 200px;
  border-radius: 8px;
  margin: 8px;
  background-color: #7A9AD2;
  border: 2px solid #C2695F;

  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; 
}