.headway-container {
  display: flex;
  align-items: center; 
}

#HW_badge_cont {
  display: inline-block;
  position: relative !important; 
  height: 25px;
}

.HW_badge.HW_softHidden {
  background: #CD4B5B !important;
  opacity: 0.8;
}

#HW_frame_cont {
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(99, 114, 130, 0.2), 0 10px 20px rgba(27, 39, 51, 0.2);
  width: 400px;
  left: 200px !important;
  margin-top: 75px !important;
}


#headwayButton {
  position: relative;
  cursor: pointer; 
}

md-dialog.fullscreen-dialog {
    max-width: 100vw;
    max-height: 90vh;
    width: 100vw;
    height: 90vh;
    border-radius: 0;
}
.md-dialog-container {
  z-index: 1100 !important;
}
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.dot {
  height: 5px;
  width: 5px;  
  border-radius: 50%;
  display: inline-block;
}
.padding-0{
  padding-right: 0 !important;
  padding-left:0 !important;
  padding-top:0  !important;
  padding-bottom: 0 !important;
}
.padding-0-5{
  padding: 0.5% !important;
}
.padding-1{
  padding: 1% !important;
}
.padding-1-5{
  padding: 1.5% !important;
}
.padding-2{
  padding: 2% !important;
}
.padding-4{
  padding: 4% !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.pb-0-3{
  padding-bottom: 0.3% !important;
}
.pb-1{
  padding-bottom: 1% !important;
}
.pl-0{
  padding-left: 0% !important;
}
.pl-1{
  padding-left: 1% !important;
}
.pl-2{
  padding-left: 2% !important;
}
.pl-3{
  padding-left: 3% !important;
}
.pl-4{
  padding-left: 4% !important;
}
.pl-6{
  padding-left: 6% !important;
}
.pr-0{
  padding-right: 0% !important;
}
.pr-1{
  padding-right: 1% !important;
}
.pr-2{
  padding-right: 2% !important;
}
.pr-3{
  padding-right: 3% !important;
}
.pr-4{
  padding-right: 4% !important;
}
.pt-0{
  padding-top: 0% !important;
}
.pt-1{
  padding-top: 1% !important;
}
.pt-2{
  padding-top: 2% !important;
}
.pt-3{
  padding-top: 3% !important;
}
.pt-4{
  padding-top: 4% !important;
}

.ma{
  margin: auto;
}
.mb-0{
  margin-bottom: 0px !important;
}
.mb-2{
  margin-bottom: 2% !important;
}
.mb-1{
  margin-bottom: 1% !important;
}
.mb-4{
  margin-bottom: 4% !important;
}
.margin-0{
  margin:0 !important;
}

.margin-0-5{
  margin:0.5% !important;
}
.margin-1{
  margin:1% !important;
}
.margin-1-5{
  margin:1.5% !important;
}
.margin-2{
  margin:2% !important;
}
.shadow {
  -webkit-box-shadow: 1px 2px 3px 3px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 2px 3px 3px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 2px 3px 3px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.notif-bell{
  font-size: 17px;
  vertical-align: sub;
}
.notif-no{
  padding: 1.2px 2.5px;
  vertical-align: super;
  margin-left: -9.5px;
}
.pointer{
  cursor: pointer;
}
.mr-0{
  margin-right: 0% !important;
}
.mr-1{
  margin-right: 1%;
}
.mr-2{
  margin-right: 2%;
}
.mr-3{
  margin-right: 3%;
}
.mr-4{
  margin-right: 4%;
}
.mt-0{
  margin-top: 0% !important;
}
.mt-1{
  margin-top: 1%;
}
.mt-2{
  margin-top: 2%;
}
.mt-3{
  margin-top: 3%;
}
.mt-4{
  margin-top: 4%;
}
.ml-0{
  margin-left: 0% !important;
}
.ml-1{
  margin-left: 1% !important;
}
.ml-2{
  margin-left: 2% !important;
}
.opacity-1{
  opacity: 1 !important;
  transition: all linear 100ms;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-y-scroll{
  overflow-y : scroll; 
}
.position-absolute{
  position: absolute;
}
.bottom-0{
  bottom: 0;
}
.danger{
  color: red;
  font-size: bold;
}
.warning{
  color: #f2a12e;
  font-weight: bold;
}
.white{
  color: #fff;
}

.text-right{
  text-align: end;
}
.text-left{
  text-align: start;
}

.word-wrap-break{
  word-wrap: break-word;
}
/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uppercase{
  text-transform:uppercase;
}
.equal-height {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display:         flex;
    }
    .equal-height > [class*='col-'] {
       display: flex;
       flex-direction: column;
    }
.success-box{
  border: 1px solid green;
  -webkit-box-shadow: 1.2px 2.3px 3.2px 3.2px green;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1.2px 2.3px 3.2px 3.2px green;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1.2px 2.3px 3.2px 3.2px green;
}
.error-box{
  -webkit-box-shadow: 1.2px 2.3px 3.2px 3.2px red;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1.2px 2.3px 3.2px 3.2px red;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1.2px 2.3px 3.2px 3.2px red;
  border: 1px solid red;
}
.red-box{
  border:1px solid red;
}
.fade-animate.ng-hide {
  opacity: 0;
}

.fade-animate.ng-hide-remove,
.fade-animate.ng-hide-add {
  display: block !important;
}

.fade-animate.ng-hide-remove {
  transition: all linear 500ms;
}

.fade-animate.ng-hide-add {
  transition: all linear 500ms;
}
.fade-animate-300.ng-hide {
  opacity: 0;
}

.fade-animate-300.ng-hide-remove,
.fade-animate-300.ng-hide-add {
  display: block !important;
}

.fade-animate-300.ng-hide-remove {
  transition: all linear 300ms;
}

.fade-animate-300.ng-hide-add {
  transition: all linear 300ms;
}

.spinner {
  margin: 15% auto 15% !important;
  width: 100%;
  height: 100%;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.spinner-btn {  
  width: 100%;
  height: 100%;
  text-align: center;
}

.spinner-btn > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner-btn .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner-btn .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}



.item-animate.ng-move,
.item-animate.ng-enter,
.item-animate.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.item-animate.ng-leave.ng-leave-active,
.item-animate.ng-move,
.item-animate.ng-enter {
  opacity:0;
}

.item-animate.ng-leave,
.item-animate.ng-move.ng-move-active,
.item-animate.ng-enter.ng-enter-active {
  opacity:1;
}

.item-animate-fast.ng-move,
.item-animate-fast.ng-enter,
.item-animate-fast.ng-leave {
  -webkit-transition:all linear 0.25s;
  transition:all linear 0.25s;
}

.item-animate-fast.ng-leave.ng-leave-active,
.item-animate-fast.ng-move,
.item-animate-fast.ng-enter {
  opacity:0;
}

.item-animate-fast.ng-leave,
.item-animate-fast.ng-move.ng-move-active,
.item-animate-fast.ng-enter.ng-enter-active {
  opacity:1;
}

#items { list-style: none; }

.repeated-item {
    position: relative;    
}

/*
 * Animations 
 * ---------- */


.repeated-item.ng-enter {
    -webkit-transition:0.23s linear all;
    -moz-transition:0.23s linear all;
    -o-transition:0.23s linear all;
    transition:0.23s linear all;
    max-height: 0;
    opacity: 0;
    left: -50px;
}
 
.repeated-item.ng-enter.ng-enter-active {
    max-height: 90px;
    opacity: 1;
    left: 0;
}
 
.repeated-item.ng-leave {
  -webkit-animation:0.33s my_animation;
  -moz-animation:0.33s my_animation;
  -o-animation:0.33s my_animation;
  animation:0.33s my_animation;
}
 
@keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}
 
/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}
 
@-moz-keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}
 
@-o-keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}


.font-size-4{
  font-size: 4em !important;
}
.font-size-3-5{
  font-size: 3.5em !important;
}
.font-size-3{
  font-size: 3em !important;
}
.font-size-2-5{
  font-size: 2.5em !important;
}
.font-size-2{
  font-size: 2em !important;
}
.font-size-1{
  font-size: 1em !important;
}
.font-size-1-75{
  font-size: 1.75em !important;
}
.font-size-1-5{
  font-size: 1.5em !important;
}
.font-size-1-15{
  font-size: 1.15em !important;
}
.font-size-1-1{
  font-size: 1.1em !important;
}
.font-size-1-25{
  font-size: 1.25em !important;
}
.font-size-0-5{
  font-size: 0.5em !important;
}
.font-size-1-3{
  font-size:1.3em !important;
}
.font-size-0-8{
  font-size:0.8em !important;
}
.font-size-0-75{
  font-size: 0.75em !important;
}
.green{
  color: green;
}
.blue{
  color: blue;
}
.yellow{
  color: yellow;
}
.brown{
  color: brown;
}
.vertical-align{
  position: relative;
  top: calc(45%);
}
.bold{
  font-weight: bold;
}
.grey{
  color: grey;
}
.grey-bold{
  color: grey;
  font-weight: bold;
}
.black{
  color: #000;
}
.black-bold{
  color: #000;
  font-weight: bold;
}
.base-bold {
  color: #283e4a;
  font-weight: bold;
}
.white-bold{
  color: #fff;
  font-weight: bold;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.stuff-to-show {
    position: relative;
    height: 100px;
    -webkit-transition:top linear 0.23s;
    transition:top linear 1.5s;
    top: 0;
}

.stuff-to-show.ng-hide {
  top: -100px;
}

.stuff-to-show.ng-hide-add, .stuff-to-show.ng-hide-remove {
  display:block!important;
}
.background{
  background-color: rgb(252, 252, 252);
}
.border-highlight{
  border: 1px dashed #000;
}
.border{
  border:1px solid #000;
}
.border-gray{
  border:1.2px solid #ececec;
}
.button-hover{
  background: cyan !important;
  color: #fff;
}
.button-hover-add,
.button-hover-remove {
  /* Here we specify the transition property and
   * initial state of the animation, which is hidden 
   * state having 0 opacity
   */
  opacity: 0;  
  transition: all linear 200ms;
}
.button-hover-add-active,
.button-hover-remove-active {
  /* Here we specify the final state of the animation,
   * which is visible having 1 opacity
   */
  opacity: 1;
  transition: all linear 200ms;
}

.border-bottom{  
  border-bottom:2px solid #000;
}
.border-left-grey{  
  border-left: 0.8px solid #ececec !important;
}
.border-right-grey{  
  border-right: 0.8px solid #ececec !important;
}
.border-bottom-grey{  
  border-bottom: 0.8px solid #ececec !important;
}
.border-top-grey{  
  border-top: 0.8px solid #ececec !important;
}
.border-right-grey-2{  
  border-right: 2px solid grey !important;
}
.animate-slide-up {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-slide-up.ng-hide-add.ng-hide-add-active,
.animate-slide-up.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-slide-up.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}
.rotate, 
.rotateCounterwise {
  -webkit-transition: 300ms ease all;
  -moz-transition: 300ms ease all;
  -o-transition: 300ms ease all;
  transition: 300ms ease all;
}
.rotate {
  -webkit-transform: rotate(90deg);
}
.rotateCounterwise {
  -webkit-transform: rotate(0deg);
}
.rotate180 {
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

.rotate-back {
    display: inline-block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

.gly-rotate-45 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  display: inline-block;
}
.special-character-error {
  position: fixed;
  width: 100%;
  background-color: red;
  color: #fff;
  z-index: 1100;
  left: 0;
  font-weight: bold;
}

#bg_mask {
position: absolute;
/*top: 0;*/
right: 0;  bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
/*width: 50%;*/
height: 100%;
background : rgba(0, 0, 0, 0.5);
z-index: 10010;      
} 

#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*margin: 70px 140px 175px 140px;*/
padding : 30px;
/*width: 49px;*/
height: auto;
background : rgba(0, 0, 0, 0.5);     
border: 1px solid black;
z-index: 10011;
}
.outer-box{      
position: relative;
}
.inner-box{
background: rgba(0, 0, 0, 0.7);
height: 100%;
width: 100%;
opacity: 0.9;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
}
.inner-box-opaque{
background: rgba(0, 0, 0, 1);
height: 100%;
width: 100%;
opacity: 0.9;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
}
.disabled{
opacity: 0.5;
pointer-events: none;
z-index: 1000;

> * {
  opacity: 0.5;
  pointer-events: none;
  z-index: 1000;
}
}
.cursor-disabled{
cursor: not-allowed;
}
.strikeout {
font-size: 4em;
line-height: 1em;
position: relative;
}
.strikeout::after {
border-bottom: 0.125em solid red;
content: "";
left: 0;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}
.custom-input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
}
.button {
cursor: pointer;
outline: none;
}
.outline-button-round {
position: relative;
z-index: 3;
background: transparent;
color: #1172c4;
/*font-size: 14px;*/
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 22px;
padding: 10px 40px;
text-transform: uppercase;
transition: all 0.2s linear;
a {
    text-decoration: none;
}
}
.outline-button{
position: relative;
z-index: 3;
background: transparent;
color: #1172c4;
/*font-size: 14px;*/
border-color: #1172c4;
border-style: solid;
border-width: 2px;        
/*padding: 10px 40px;*/
text-transform: uppercase;
transition: all 0.2s linear;
a {
    text-decoration: none;
}
}
.outline-button,.outline-button-round:hover {
color: white;
background: #1172c4;
border-color: white;
transition: all 0.2s linear;
}    
.black-white {
    font-weight: 700;
    border-color: #283e4a;
    background: white;
    color: #283e4a;
}
.black-white:hover {
    color: white;
    background: #283e4a;
    border-color: #000;
}

.active-black {
color: white;
background: #000;
border-color: #000;
}
.white-blue {
font-weight: 700;
color: #00aeef;
border-color: white;
background: white;
}
.white-blue:hover {
color: white;
background: #00aeef;
border-color: white;
}
.white-cyan {
font-weight: 700;
color: darkcyan;
border-color: white;
background: white;
}
.white-cyan:hover {
color: white;
background: darkcyan;
border-color: white;
}
.white-darkred {
font-weight: 700;
color: darkred;
border-color: white;
background: white;
}
.white-darkred:hover {
color: white;
background: darkred;
border-color: white;
}
.white-magenta {
font-weight: 700;
color: darkmagenta;
border-color: white;
background: white;
}
.white-magenta:hover {
color: white;
background: darkmagenta;
border-color: white;
}
.white-darkblue {
font-weight: 700;
color: darkblue;
border-color: white;
background: white;
}
.white-darkblue:hover {
color: white;
background: darkblue;
border-color: white;
}
.white-red {
font-weight: 700;
color: red;
border-color: white;
background: white;
}
.white-red:hover {
color: white;
background: red;
border-color: white;
}
.blue-white {
font-weight: 700;
color: #00aeef;
border-color: #00aeef;
background: transparent;
}
.blue-white:hover {
color: white;
background: #00aeef;
border-color: #00aeef;
}
.active-blue {
color: white;
background: #00aeef;
border-color: white;
}
.active-cyan {
color: white;
background: darkcyan;
border-color: white;
}
.active-darkred {
color: white;
background: darkred;
border-color: white;
}
.active-magenta {
color: white;
background: darkmagenta;
border-color: white;
}
.active-darkblue {
color: white;
background: darkblue;
border-color: white;
}
.white-green {
font-weight: 700;
color: #7dc21e;
border-color: white;
background: white;
}
.white-green:hover {
color: white;
background: #7dc21e;
border-color: white;
}    
.green-white {
font-weight: 700;
color: #7dc21e;
border-color: #7dc21e;
background: transparent;
}
.green-white:hover {
color: white;
background: #7dc21e;
border-color: #7dc21e;
}
.active-green{
color: white;
background: #7dc21e;
border-color: #7dc21e;
}
.purple-white {
font-weight: 700;
color: #664e96;
border-color: #664e96;
background: transparent;
}
.purple-white:hover {
color: white;
background: #664e96;
border-color: #664e96;
}
.active-purple {
color: white;
background: #664e96;
border-color: #664e96;
}
.white-purple {
font-weight: 700;
color: #664e96;
border-color: white;
background: white;
}
.white-purple:hover {
color: white;
background: #664e96;
border-color: white;
}
.white-purple:active {
color: white;
background: #664e96;
border-color: white;
}
.highlighted {
  background: #e2e2dd;
}

.blue-deep{
  color: #233661
}
.animate-hide {
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
  position: absolute;
  left: 0;
}

.animate-hide.ng-hide {
  left: -100%;
  opacity:1;
  padding:0 10px;
}
.disabled{
  background-color:#989191 !important;
}
.not-disabled{
  background-color:#4caf50 !important;
}

.text-color{
  color:#6b6161;
}
.border-right{
  border-right:1px solid #ececec;
}
.border-left{
  border-left:1px solid #ececec;

/* Styles go here */

.grip{
    width:20px;
    height:20px;
    margin-top:-10px;
    background-image:url('http://lorempixel.com/20/20/abstract');
    margin-left:-5px;
    position:relative;
    z-index:88;
    cursor:e-resize;
}

.grip:hover{
    background-position:20px 0px;
}

.dragging .grip{
    background-position:40px 0px;
}
/*button loader css*/
.circular-progress-button {
    height: 36px;
}

.circular-progress-button>md-progress-circular {
    margin: auto;
    margin-top: -6px; /* If circular does not appear at the center, change this value. */
}

.circular-progress-button>md-progress-circular .md-half-circle {
    border-top-color: white !important;
}

.circular-progress-button>md-progress-circular .md-left>.md-half-circle {
    border-left-color: white;
}

.circular-progress-button>md-progress-circular .md-right>.md-half-circle {
    border-right-color: white;
}

/*end button loader css*/

/*md-table css*/
a {
  text-decoration: none;
}

i {
  vertical-align: middle;
  font-size: 24px;
}

.main-fab {
  position:absolute;
  z-index:20;
  font-size:30px;
  top:100px;
  left:24px;
  transform:scale(.88,.88);
}

.md-breadcrumb {
  padding-left:88px;  
}

.JCLRgrip:first-child {
  left:105px!important;
  display: none!important;
}

.JColResizer th:first-child {
  width: 105px!important;
}

.md-table {
  min-width: 100%;
  border-collapse: collapse;
}

.md-table tbody tr:hover, .md-table tbody tr:focus {
  cursor:pointer;
  background-color:rgba(63,81,181,0.2);
}

.md-table-header {
  border-bottom: 1px solid rgb(230,230,230);
  color: rgb(130,130,130);
  text-align: left;
  font-size: 0.75em;
  font-weight: 700;
  padding: 16px 16px 16px 0;
}

.md-table-header a{
  text-decoration: none;
  color: inherit;
}

.md-table-content {
  white-space: nowrap;
  font-size: 0.8em;
  padding: 16px 16px 16px 0;
  height: 72px;
}

.md-table-td-more {
  max-width:72px;
  width:72px;
  padding:16px;
}

.md-table-thumbs {
  max-width: 104px;
  width: 104px;
  padding: 16px 32px;
}

.md-table-thumbs div {
  overflow:hidden;
  width: 70px;
  height:70px;
  /*border-radius:20px;*/
  border: 1px solid rgba(0,0,0,0.2);
  background-size:cover;
  box-shadow: 0 8px 10px rgba(0,0,0,.3);
  -webkit-box-shadow: 0 8px 10px rgba(0,0,0,.1);
}

.md-table-footer {
  height:40px;
  padding-left: 32px;
  padding-right: 32px;
}

.md-table-count-info {
  line-height:40px;
  font-size:.75em;
}

.md-table-footer-item {
  width: 40px;
  height: 40px;
  vertical-align:middle;
}

.md-table-active-page {
  font-weight: 700;
}

.bold {
  font-weight: 700;
}

.grey {
  color: grey;
}

md-input-container.md-default-theme .md-input {
  color: white;
  border-color: white;
  margin-top: 24px;
}
/*end md-table css*/

/*md-dialog z-index*/
.md-dialog-container {
  z-index: 10 !important;
}
/*end md-dialog z-index*/

/*animate add delete ng-repeat*/
/* you can also define the transition style
   on the base class as well (.repeat-item) */
.repeat-item.ng-enter,
.repeat-item.ng-leave {
  -webkit-transition:1.5s linear all !important;
  transition:1.5s linear all !important;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity:0 !important;
  height: 0px !important;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity:1 !important;
   height: 30px !important;
}
.repeat-item {  
  background: green;
  margin-bottom: 5px;
  height: 30px !important;
}



/*end add delete ng-repeat*/

.animate-drop.ng-enter {
    -webkit-animation:300ms open ease;
    animation:300ms open ease;
}

.animate-drop.ng-leave {
    -webkit-animation:270ms close ease;
    animation:270ms close ease;
}


@-webkit-keyframes open {
  From {
    margin-bottom:-50px;
  }
  To {
    margin-bottom:0px;
  }
}


@keyframes open {
  From {
    margin-bottom:-50px;
  }
  To {
    margin-bottom:0px;
  }
}

@-webkit-keyframes close {
  From {
    margin-bottom:0px;
  }
  To {
    margin-bottom:-50px;
  }
}


@keyframes close {
  From {
    margin-bottom:0px;
  }
  To {
    margin-bottom:-50px;
  }
}