@import "var";

.mw-ui-btn-nav-tabs {
  float: left;
}

.mw-ui-btn-nav-tabs .mw-ui-btn {
  border-width: 1px 1px 0 0;
  float: left;
  border-radius: 0px;
}

.mw-ui-btn-nav-tabs .mw-ui-btn:first-child {
  border-radius: @radius 0 0 0;
}

.mw-ui-btn-nav-tabs .mw-ui-btn:last-child {
  border-radius: 0 @radius 0 0;
}

.mw-ui-btn-nav-tabs + .mw-ui-box {
  border-radius: 0 0 @radius @radius;
}

/* /Tabs Navigation */

/*********************************************
              jQuery UI Slider
*********************************************/

.mw-slider {
  height: 8px;
  position: relative;
  border-radius: 5px;
  max-width: 100%;
  clear: both;
  background-color: #EEEEEE;
}

.mw-slider .ui-slider-handle {
  background-color: #575757;
  display: block;
  width: 8px;
  height: 16px;
  top: -4px;
  position: absolute;
  border-radius: 5px;
}

/* Sidebar navigation */

.mw-ui-sidenav li {
  list-style: none;
}

.mw-ui-sidenav a {
  display: block;
  padding: 12px 40px 14px 14px;
  border-radius: 0 2px 2px 0;
}

.mw-ui-sidenav a:hover,
.mw-ui-sidenav a:focus {
  background-color: rgba(139, 139, 139, 0.1)
}

.mw-ui-sidenav a:active {
  box-shadow: 0 1px 6px -4px #000000 inset;
}

.mw-ui-sidenav a.active,
.mw-ui-sidenav a.active:active,
.mw-ui-sidenav a.active:hover,
.mw-ui-sidenav a.active:focus {
  background-color: #8B8B8B;
  color: white;
  box-shadow: 0 1px 5px -2px #000000 inset;
}

/************************************
       Richtext editor
*************************************/

.mw-ui-richtext-editor {
  border: 1px solid #EEEEEE;
  min-height: 300px;
  max-width: 100%;
}

.mw-wrapper {
  max-width: 1100px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.mw-picker-frame {
  overflow: hidden;
  width: 280px;
  height: 280px;
  min-height: 280px;
}

.mw-text-upper {
  text-transform: uppercase;
}

body.bup.dragStart.state-element {
  .edit .element.currentDragMouseOver {
  }
  .edit .element:empty {
    background-color: #ffffb9;
    background-image: none;
    opacity: 0.6;
  }
}

.th-in-td {
  display: none;
}

.mw-color-invert {
  color: @invert;
}

.mw-color-info {
  color: @info;
}

.mw-color-warn {
  color: @warn;
}

.mw-color-important {
  color: @important;
}

.mw-color-notification {
  color: @notification;
}

.mw-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 101;
}

.mw-progress-index {
  width: 0;
  height: 3px;
  max-width: 100%;
  background: @info;
  transition: width 10s;
}

.mw-progress-slow .mw-progress-index {
  transition-duration: 5s;
}

.mw-progress-normal .mw-progress-index {
  transition-duration: 2s;
}

.mw-progress-fast .mw-progress-index {
  transition-duration: .6s;
}

.mw-component-post-search {
  position: relative;
  display: inline-block;
}

.mw-component-post-search ul {
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  min-width: 100%;
  list-style: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  background: white;
}

.mw-component-post-search ul li {
  padding: 3px 12px;
}

.mw-component-post-search ul li:hover {
  background: #3363c6;
  color: #fff;
}

/* MW Notif */
.mw-notif-box {
  padding: 15px;
}

.mw-notif-box i {
  font-size: 20px;
}

.mw-notif-box.mw-notif-box-info {
  background-color: @info;
  border-left: 3px solid @info;
}

.mw-notif-box.mw-notif-box-info span {
  color: @info;
}

.mw-hr {
  display: block;
  clear: both;
  height: 1px;
  overflow: hidden;
  margin: 2rem auto;
  background: @borderColor;
  font-size: 0;
}

.mw-hero {
  position: relative;
  clear: both;
  background-size: cover;
  background-position: center 33%;
  background-repeat: no-repeat;
  background-size: cover;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-height: 100vh;
  .mw-hero-content {
    max-width: 90%;
    padding: 5%;
    position: relative;
    display: block;
    text-align: center;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    color: white;
    & > h1,
    & > h2,
    & > h3,
    & > h4,
    & > h5,
    & > h6 {
      padding-bottom: .3em;
      & + p {
        padding-bottom: 1rem;
      }
    }

  }
  &:after {
    position: absolute;
    display: block;
    z-index: 0;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
  }

}

.mw-color-picker-holder{
  .mw-ui-btn{
    width: 50px;
  }
  .mw-color-picker{
    max-width: ~"-webkit-calc(100% - 50px)";
    max-width: ~"calc(100% - 50px)";
  }
}

  .mw-selector{
   width:1px;
   height: 1px;
   position: absolute;
   z-index: 100;
   background: #0899E6;
   pointer-events: none;
   top: -20px;
   left: -20px;
   z-index: 1;

}


.mw-selector-bottom:after,
.mw-selector-bottom:before,
.mw-selector-top:after,
.mw-selector-top:before{
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background: #0899E6;
    position: absolute;
}

.mw-interactor:after,
.mw-interactor:before,
.mw-interactor{
   background: #C4D6E8;
   z-index: 0;
   transition: all .1s;
}

.mw-selector-top:before{top:-2px;left:-2px;}
.mw-selector-top:after{top:-2px;right:-2px;}

.mw-selector-bottom:before{bottom:-2px;left:-2px;}
.mw-selector-bottom:after{bottom:-2px;right:-2px;}



