.layui-table-view
  margin: 0

.layui-link-btn
  height: 30px
  line-height: 30px
  color: #000000
  background-color: #dcdfe2

.layui-btn-group .layui-btn
  border-left: none
  border-right: 1px solid rgba(255, 255, 255, 0.5)

.task-template-help-table td > code
  cursor: grabbing
  background: -webkit-gradient(linear, left top, right top, from(#fce4ed), to(#ffe8cc))
  background: linear-gradient(to right, #fce4ed, #ffe8cc)

svg
  overflow: visible

.nav-search
  position: absolute
  top: 50%
  left: 50%
  margin-left: -16rem
  margin-top: -3.5rem
  width: 32rem
  height: 7rem

  &:not(.active)
    cursor: pointer

.nav-search-svg
  position: absolute
  top: 20px
  left: 45px
  width: 50%
  height: 50%

.nav-search-svg__path
  fill: none
  stroke: #fff
  stroke-width: 6px

.nav-search-input
  position: relative
  width: 27rem
  height: 6rem
  padding: 1.2rem 0 1.2rem 2.5rem
  background: transparent
  outline: none
  border: none
  font-size: 3.6rem
  color: #fff
  z-index: -1
  opacity: 0
  -webkit-transition: opacity 0.2s
  transition: opacity 0.2s

  &.visible
    z-index: auto
    opacity: 1

.nav-search-close
  position: absolute
  top: 1.5rem
  right: 1.5rem
  width: 3rem
  height: 3rem
  cursor: pointer
  z-index: -1

  &.visible
    z-index: auto

    &:before
      -webkit-transform: rotate(-45deg)
      -ms-transform: rotate(-45deg)
      transform: rotate(-45deg)
      opacity: 1
      -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s
      transition: transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s

    &:after
      -webkit-transform: rotate(45deg)
      -ms-transform: rotate(45deg)
      transform: rotate(45deg)
      opacity: 1
      -webkit-transition: -webkit-transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.2s
      transition: transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.2s

  &:before, &:after
    content: ""
    position: absolute
    top: 1.2rem
    left: 0
    width: 100%
    height: 0.6rem
    background: #fff
    border-radius: 0.5rem
    opacity: 0

  &:before
    -webkit-transform: rotate(-45deg) translateX(2rem)
    -ms-transform: rotate(-45deg) translateX(2rem)
    transform: rotate(-45deg) translateX(2rem)
    -webkit-transition: -webkit-transform 0.2s, opacity 0.1s 0.1s
    transition: transform 0.2s, opacity 0.1s 0.1s

  &:after
    -webkit-transform: rotate(45deg) translateX(2rem)
    -ms-transform: rotate(45deg) translateX(2rem)
    transform: rotate(45deg) translateX(2rem)
    -webkit-transition: -webkit-transform 0.2s 0.2s, opacity 0.1s 0.3s
    transition: transform 0.2s 0.2s, opacity 0.1s 0.3s

.boarding-pulse
  width: 1rem
  height: 1rem
  border-radius: 50%
  background: rgba(95, 139, 250, 0.65)
  box-shadow: 0 0 0 rgba(95, 139, 250, 0.65)
  -webkit-animation: boarding-pulse 2s infinite
  animation: boarding-pulse 2s infinite

  &:hover
    -webkit-animation: none
    animation: none

@media print
  .boarding-pulse
    visibility: hidden

@-webkit-keyframes boarding-pulse
  0%
    box-shadow: 0 0 0 0 rgba(95, 139, 250, 0.65)

  70%
    box-shadow: 0 0 0 1rem rgba(95, 139, 250, 0)

  to
    box-shadow: 0 0 0 0 rgba(95, 139, 250, 0)


@keyframes boarding-pulse
  0%
    box-shadow: 0 0 0 0 rgba(95, 139, 250, 0.65)

  70%
    box-shadow: 0 0 0 1rem rgba(95, 139, 250, 0)

  to
    box-shadow: 0 0 0 0 rgba(95, 139, 250, 0)


.boarding-pulseWrapper
  margin: -1.5rem 0 0 -1.5rem
  padding: 1rem
  border-radius: 50%
  cursor: pointer

.popup-menu
  position: absolute

.side-menu
  position: absolute
  top: 100%
  left: 0
  //z-index: 1000;
  //display: none;
  float: left
  min-width: 100px
  width: fit-content
  padding: 3px 0
  margin: -1px 0 0 0
  font-size: 14px
  list-style: none
  background-color: #393d49
  //border: 1px solid #ccc;
  border: 1px solid rgba(57, 61, 73, 0.93333)
  border-radius: 4px
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
  background-clip: padding-box

.popup-menu
  .side-menu
    > li
      text-align: left
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      cursor: pointer

      > a
        height: 40px
        line-height: 40px
        padding: 0 10px
        /*color: #fff;
        color: rgba(255, 255, 255, 0.70196)

    li
      &.layui-this
        background-color: rgba(84, 88, 93, 0.25098)

      &.disabled-item
        padding: 0
        cursor: initial
        //cursor: not-allowed;
        //pointer-events: none;

        > a
          cursor: not-allowed
          pointer-events: none
          color: rgba(210, 210, 210, 0.56863)
          text-decoration-line: underline

      &.layui-this > a
        background: transparent
        color: #7ac142

  .pined-tab
    cursor: initial

.layui-side-collapsed .layui-nav-item.side-menu-group > a
  // pointer-events: none;
  cursor: default

.side-menu li:hover
  background-color: #4E5465

/*
 * NOTY - Notification Extension

.noty_layout
  margin-top: 55px !important
  opacity: 1

  a
    color: black

    &:hover
      color: #5a5a5a
      text-decoration: none

.noty_bar
  -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3)
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3)
  border-radius: 10px !important

.noty_body
  .title
    font-weight: 500
    padding-bottom: 10px

  .body
    color: grey
    font-weight: 400
    font-size: 12px
    top: 10px

.noty-question-color
  color: #f4c808

/*
 * color-picker for boot-strap4

.colorpicker-2x
  &.colorpicker-with-alpha
    width: 272px

  .colorpicker-saturation
    width: 200px
    height: 200px

  .colorpicker-hue
    width: 30px
    height: 200px

  .colorpicker-alpha
    width: 30px
    height: 200px
    background-size: 20px 20px
    background-position: 0 0, 10px 10px

  .colorpicker-preview
    background-size: 20px 20px
    background-position: 0 0, 10px 10px
    height: 30px
    font-size: 16px
    line-height: 160%

    div
      height: 30px
      font-size: 16px
      line-height: 160%

.colorpicker-saturation .colorpicker-guide
  height: 10px
  width: 10px
  border-radius: 10px
  margin: -5px 0 0 -5px

.sp-extension
  .sp-container
    border-radius: 0
    background-color: #fff
    border: none
    padding: 0

  .sp-color, .sp-hue, .sp-clear
    border: none

  .sp-color
    right: 14%

  .sp-hue
    left: 90%

  .sp-cancel, .sp-choose
    display: none

.sp-input-container
  width: 140px

.sp-picker-container
  width: 180px

  > div.sp-initial.sp-thumb.sp-cf > div.sp-cf.sp-palette-row-initial > span:nth-child(1)
    display: none

/* hide default color

.float-left
  float: left

.float-right
  float: right

.slot-place-holder
  border: 2px dashed #349ce4

.slot-drag-item
  z-index: 10000
  display: block
  position: absolute
  list-style: none

  li
    padding: 0 10px
    line-height: 30px
    -webkit-transition: .5s all
    transition: .5s all

  .layui-form-checkbox[lay-skin=primary] i
    width: 18px
    height: 18px

.bookmark_form input[type=checkbox]
  margin-right: 5px

.btn.btn-success[type=submit]
  border-radius: 4px

.align-right
  text-align: right !important

.align-left
  text-align: left !important

td.layui-table-col-special div.layui-table-cell
  text-align: center


