@media (min-width:992px){ 
  .page-content-wrapper{ 
    float:left; 
    width:100%; 
    background-color:#4D5B69; 
  } 
  .page-footer{ 
    clear:left; 
    background-color:#4D5B69; 
  } 
}

body {
  background-color: #FFFFFF;
}

.my-portlet-icon {
  display: inline-block;
  height: 16px;
  width: 11px;
  margin-left: 5px;
  opacity: 1;
  color: white !important;
}

.my-portlet-icon-config {
  background-image: url(../assets/global/img/portlet-config-icon-white.png);
}
.my-portlet-icon-close {
  background-image: url(../assets/global/img/portlet-remove-icon-white.png);
}
.my-portlet-icon-close {
  background-image: url(../assets/global/img/portlet-remove-icon-white.png);
}

.my-color-picker {
  content: '';
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
  position: relative;
  /*top: 22px;*/
  overflow: hidden;
  background-color: #fff;
  background-image: -webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);
  background-image: linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);
  background-size: 8px 8px;
  background-position: 0 0,4px 4px;
}
.my-color-picker {
  background-color: #fff;
  background-image: -webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);
  background-image: linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);
  background-size: 8px 8px;
  background-position: 0 0,4px 4px;
}
.my-color-picker-item {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/*Colorpicker*/
.my-color-picker-item{
  padding: 20px;
  margin-left: -5px;
  margin-top: -5px;
}

.md-datepicker-button {
  display: none;
}

div[my-date-picker] md-datepicker .md-datepicker-input-container{
  width: 100%;
  margin-left: 0px;
}

.md-datepicker-input-container .md-datepicker-focused{
  border-bottom-color: rgba(54,198,211,1);
}

.my-date-picker-at-list {
  margin: 0 0 35px;
}

a.md-default-theme:not(.md-button), a:not(.md-button) {
    color: rgb(51, 138, 203);
}

.color-green{
  color: #18ca18!important;
}

.color-red{
  color: red!important; 
}

.color-warning {
  color: #f3aa0b;
}

.color-information {
  color: #f3aa0b;
}

.color-white {
  color: white;
}

.bg-color-blue1 {
  background-color: #1a9eb5;
}

.btn.btn-outline.green {
  border-color: #18ca18;
  color: #18ca18;
  background: none; }
  .btn.btn-outline.green:hover, .btn.btn-outline.red:active, .btn.btn-outline.red:active:hover, .btn.btn-outline.red:active:focus, .btn.btn-outline.red:focus, .btn.btn-outline.red.active {
    border-color: #18ca18;
    color: #ffffff;
    background-color: #18ca18; }

.btn.btn-outline.warning {
  border-color: #f3aa0b;
  color: #f3aa0b;
  background: none; }
  .btn.btn-outline.warning:hover, .btn.btn-outline.red:active, .btn.btn-outline.red:active:hover, .btn.btn-outline.red:active:focus, .btn.btn-outline.red:focus, .btn.btn-outline.red.active {
    border-color: #f3aa0b;
    color: #ffffff;
    background-color: #f3aa0b; }



.in-input{
  float: right;
  margin-right: 6px;
  margin-top: -20px;
  position: relative;
  z-index: 2;
}

md-checkbox.md-default-theme.md-checked ._md-icon, md-checkbox.md-checked ._md-icon {
    background-color: rgba(54,198,211,1);
}

.btn.default:not(.btn-outline).active, .btn.default:not(.btn-outline).active:focus{
  color: #666;
  background-color: #c0c3c3;
  border-color: #93a1bb;
}

.alert, .thumbnail {
    margin-bottom: 5px;
}
.login-spinner-bar { 
  display: inline-block; 
  width: 80px; 
  text-align: center; } 
.login-spinner-bar > div { 
    margin: 0 2px; 
    width: 15px; 
    height: 15px; 
    background: #49d5ee; 
    border-radius: 100% !important; 
    display: inline-block; 
    -webkit-animation: bounceDelay 1.4s infinite ease-in-out; 
    animation: bounceDelay 1.4s infinite ease-in-out; 
    /* Prevent first frame from flickering when animation starts */ 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; } 
.login-spinner-bar .bounce1 { 
    -webkit-animation-delay: -0.32s; 
    animation-delay: -0.32s; } 
.login-spinner-bar .bounce2 { 
    -webkit-animation-delay: -0.16s; 
    animation-delay: -0.16s; } 
 
.bar-gone{ 
  opacity: 0; 
} 
.bar-visible{ 
  opacity: 1; 
}

.margin-0{
  margin: 0px; 
}

.padding-0 {
  padding: 0px;
}

.my-spinner{
  font-size: 23px;
  color: rgb(20, 185, 214);
}

.my-col {
  display: inline-block;
  float: none;
}

.my-portlet>.portlet-body{
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
  /*border: 1px solid rgb(221, 221, 221);*/
}

.portlet>.portlet-title>.caption>i {
  color: #FFF; 
}

fieldset.standard {
    border-style: solid;
    border-width: 1px;
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    min-width: -webkit-min-content;
    border-color: threedface;
    border-image: initial;
}

fieldset>legend {
  width: inherit;
  display: block;
  -webkit-padding-start: 2px;
  -webkit-padding-end: 2px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
}

md-switch {
  all: unset;
}

.report-frame{
  width: 97%;
  height: 700px;
  position: absolute;
}

.page-content {
  min-height: 1000px;
}

.page-container {
  background-color: #eef1f5;
}

/*////////////////////////////////////   Drag List ///////////////////////*/
/*ul[dnd-list], ul[dnd-list] > li {
  position: relative;
  list-style-type: none;
}*/

.simple-drag-list ul[dnd-list],
.simple-drag-list ul[dnd-list] > li {
  position: relative;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.simple-drag-list ul[dnd-list] {
  min-height: 42px;
  padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.simple-drag-list ul[dnd-list] .dndDraggingSource {
  display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.simple-drag-list ul[dnd-list] .dndPlaceholder {
  display: block;
  background-color: #ddd;
  padding: 10px 15px;
  min-height: 42px;
}
/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
.simple-drag-list ul[dnd-list] li {
  background-color: #fff;
  border: 1px solid #ddd;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  display: block;
  margin-bottom: -1px;

  /* Disable text selection if item is not draggable */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.simple-drag-list ul[dnd-list] li dnd-nodrag {
  display: block;
  padding: 10px 15px;
}
.simple-drag-list .handle {
  cursor: move;
  position: absolute;
  top: 14px;
}
.simple-drag-list .after-handle {
  margin-left: 20px;
}


.simple-drag-list ul[dnd-list] li{
  border-radius: 0px;
}


/*////////////////////////////ANIMATION/////////////////////////////////////////////////////*/
@keyframes myFadeIn {
  0% {
    opacity: 0;
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    /*transform: translateY(0); */
  } 
}

@keyframes myFadeOut {
  0% {
    opacity: 1;
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 0;
    visibility: hidden;
    /*transform: translateY(0); */
  } 
}

@keyframes myFadeInV2 {
  0% {
    opacity: 0;
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    /*transform: translateY(0); */
  } 
}

@keyframes myFadeOutV2 {
  0% {
    opacity: 1;
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 0;
    /*transform: translateY(0); */
  } 
}

@keyframes inSlideUp {
  0% {
    opacity: 0;
    transform: translate(0px,30px);
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
    /*transform: translateY(0); */
  } 
}

@keyframes inSlideDown {
  0% {
    opacity: 0;
    transform: translate(0px,-30px);
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
    /*transform: translateY(0); */
  } 
}

@keyframes inSlideRight {
  0% {
    opacity: 0;
    transform: translate(-30px,0px);
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
    /*transform: translateY(0); */
  } 
}

@keyframes sidebarInSlideDown {
  0% {
    opacity: 0;
    transform: translate(0px,-100px);
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
    /*transform: translateY(0); */
  } 
}

@keyframes headerInSlideRight {
  0% {
    opacity: 0;
    transform: translate(-150px,0px);
    /*transform: translateY(15px); */
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
    /*transform: translateY(0); */
  } 
}

.ani-in-slide-up {
  opacity: 0;
  animation: inSlideUp 0.5s;
  animation-fill-mode: forwards;
}

.ani-sidebar-in-slide-down {
  opacity: 0;
  animation: sidebarInSlideDown 1s;
  animation-fill-mode: forwards;
}

.ani-header-in-slide-right {
  opacity: 0;
  animation: headerInSlideRight 0.5s;
  animation-fill-mode: forwards;
}

.ani-change-width {
  overflow: hidden;
  -webkit-transition: width 0.5s;/* For Safari 3.1 to 6.0 */
  transition: width 0.5s;
}

.ani-change-height {
  -webkit-transition: height 0.5s;/* For Safari 3.1 to 6.0 */
  transition: height 0.5s;
}

.ani-fade-in {
  animation: myFadeIn 0.5s;
  /*animation-delay: 2s;*/
}

.ani-fade-out {
  animation: myFadeOut 0.5s;
  /*animation-delay: 2s;*/
}

.ani-fade-in-v2 {
  animation: myFadeInV2 0.5s;
  animation-fill-mode: forwards;

}

.ani-fade-out-v2 {
  opacity: 1;
  animation: myFadeOutV2 0.5s;
  animation-fill-mode: forwards;

}

.ani-fade-in-0-25-v2 {
  opacity: 0;
  animation: myFadeInV2 0.25s;
  animation-fill-mode: forwards;
}

.ani-fade-out-0-25-v2 {
  opacity: 1;
  animation: myFadeOutV2 0.25s;
  animation-fill-mode: forwards;

}

.set-to-out {
  visibility: hidden;
  height: 0px;
  opacity: 0;
}

.ani-delay-0_25 {
  animation-delay: 0.25s;

}

@media (min-width: 1200px){
  .my-col-lg-2_4 {
    width: 20%;
  }
}


@media (min-width: 992px){
  .my-col-md-2_4 {
    width: 20%;
  }
}


.my-backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10051;
  background-color: rgba(0,0,0,0.6);
  transition: all 0.3s;
}

.my-backdrop.show{
  display: initial !important;
}
.my-backdrop.show .page-spinner-bar{
  display: initial !important;
}
.my-backdrop.hide{
  display: none !important;
}
.my-backdrop.hide .page-spinner-bar{
  display: none !important;
}

.sortorder:after {
  content: '\25b2';
}
.sortorder.reverse:after {
  content: '\25bc';
}