/**
 * Sometimes we need a universal class that can be used in any component. 
 * Things like clear fixes, vertical alignment, and text truncation.
 * Denote these classes by prefixing them with .u-.
 *
 * All the utils should be in a single file. There should not be any need to overwrite them in components or mixins.
 *
 * You should really only need a few utilities. 
 * We do not need something like .u-float-left { float: left; } where including float: left; in the component is just as easy
 * and more visible.
 */
.u-truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-break-word {
  word-wrap: break-word;
}

.u-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.u-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 55%;
  right: 55%;
  bottom: 0;
  background: #fff;
  height: 1px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.u-underline-from-center:hover:before, .u-underline-from-center:focus:before, .u-underline-from-center:active:before {
  left: 0;
  right: 0;
}

.u-hidden,
.hide,
.u-display-none {
  display: none !important;
}

.u-cursor-pointer {
  cursor: pointer;
}

.u-hover-effect {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.u-hover-effect:hover {
  opacity: 0.8;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.u-shadow-effect {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(43, 59, 93, 0.4);
  -moz-box-shadow: 0px 1px 3px 0px rgba(43, 59, 93, 0.4);
  box-shadow: 0px 1px 3px 0px rgba(43, 59, 93, 0.4);
}

.u-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.u-line-separator {
  border-bottom: solid 1px #E0E0E0;
  display: block;
  overflow: hidden;
  height: 0px;
  margin: 10px -20px;
  clear: both;
}

.u-separator {
  border-bottom: solid 1px #E0E0E0;
  width: 100%;
  overflow: hidden;
  height: 0px;
  margin: 10px 0px;
  clear: both;
}

.u-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.u-no-border {
  border: none !important;
}

.u-buttons-spacer {
  width: 5px;
}

.u-vertical-align-center {
  vertical-align: middle;
}

.u-italic-font {
  font-style: italic;
}

.u-invisibility {
  visibility: hidden;
}

.u-mar-right-5 {
  margin-right: 5px !important;
}

.MarRight10,
.u-mar-right-10 {
  margin-right: 10px;
}

.u-mar-right-15 {
  margin-right: 15px !important;
}

.u-mar-right-20 {
  margin-right: 20px !important;
}

.u-padding-0 {
  padding: 0 !important;
}

.u-padding-right-5 {
  padding-right: 5px !important;
}

.u-padding-right-10 {
  padding-right: 10px !important;
}

.u-no-padding-top {
  padding-top: 0 !important;
}

.u-no-padding-bottom {
  padding-bottom: 0 !important;
}

@media ( max-width : 767px) {
  .u-no-padding-bottom-sm-down {
    padding-bottom: 0 !important;
  }
}

.u-no-padding-left {
  padding-left: 0 !important;
}

.u-no-padding-right {
  padding-right: 0 !important;
}

.TexAlRight,
.u-text-align-right {
  text-align: right !important;
}

.TexAlLeft,
.u-text-align-left {
  text-align: left !important;
}

.TexAlCenter,
.u-text-align-center {
  text-align: center !important;
}

.FontBold,
.u-font-bold {
  font-weight: bold !important;
}

@media screen and (min-width: 40em) {
  .ui-sm-hidden-op {
    display: none !important;
  }
}

@media screen and (max-width: 40em) {
  .ui-sm-hidden {
    display: none !important;
  }
}

@media screen and (min-width: 40.063em) and (max-width: 64.062em) {
  .ui-md-hidden {
    display: none !important;
  }
}

@media screen and (min-width: 64.063em) and (max-width: 90.062em) {
  .ui-lg-hidden {
    display: none !important;
  }
}

@media screen and (min-width: 90.063em) {
  .ui-xl-hidden {
    display: none !important;
  }
}

.ui-vertical-align-sub {
  vertical-align: sub;
}

.ui-line-height-2 {
  line-height: 2;
}

@media ( max-width : 575px) {
  .u-hidden-xs-down {
    display: none !important;
  }
  .u-visibility-hidden-xs-down {
    visibility: hidden;
  }
  .height-100{
    height:100% !important;
  }
}

@media ( min-width : 576px) {
  .u-hidden-sm-up {
    display: none !important;
  }
}

@media ( max-width : 767px) {
  .u-hidden-sm-down {
    display: none !important;
  }
}

@media ( min-width : 768px) {
  .u-hidden-md-up {
    display: none !important;
  }
}

@media ( max-width : 991px) {
  .u-hidden-md-down {
    display: none !important;
  }
}

@media ( min-width : 992px) {
  .u-hidden-lg-up {
    display: none !important;
  }
}

@media ( max-width : 1199px) {
  .u-hidden-lg-down {
    display: none !important;
  }
}

@media ( min-width : 1200px) {
  .u-hidden-xl-up {
    display: none !important;
  }
}

@media ( max-width : 1024px) {
  .u-hidden-1024-down {
    display: none !important;
  }
}

@media ( min-width : 1025px) {
  .u-hidden-1024-up {
    display: none !important;
  }
}

/* For Serenity theme - Start */
/* Do not use them for new code, these classes are for backward compatibility
* Some style is removed after migrated to Serenity - need re-define
*/
.MarLeft10 {
  margin-left: 10px;
}

.MarTop20 {
  margin-top: 20px;
}

.Fleft {
  float: left;
}

.Fright {
  float: right;
}

.Separator {
  border-bottom: solid 1px #E0E0E0;
  width: 100%;
  overflow: hidden;
  height: 0px;
  margin: 10px 0px;
  clear: both;
}

.MarTop0 {
  margin-top: 0 !important;
}

.MarTop5 {
  margin-top: 5px !important;
}

.MarTop10 {
  margin-top: 10px !important;
}

/* For Serenity theme - End */

.u-default-cursor {
  cursor: default;
}

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

.display-inline-flex-center {
  display: inline-flex;
  align-items: center;
}

.display-inline-flex-end {
  display: inline-flex;
  align-items: flex-end;
}

.u-dialog-footer-actions-group {
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  padding-right: .5em;
  margin-top: 10px;
}

.w-full {
  width: 100%;
}