:root {
  --pt-mask-color: #3377FF; /* 主题色 */
  --pt-mask-hover: #E6EEFF; /* 主题色hover */
  --pt-mask-border: #DBDEE6; /* 边框颜色 */
  --pt-mask-font-color1: #242526; /* 常规文字 */
  --pt-mask-color-red: #FF4D4D;
  
}

#vue-newmask__wrapper, .vue-newmask__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
  z-index: 997;
  background-color: rgba(0, 0, 0, .5);
}
#vue-newmask__wrapper.show, .vue-newmask__wrapper.show {
  display: block;
}
#vue-newmask__container, .vue-newmask__container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  position: relative;
}

#vue-newmask, .vue-newmask {
  margin: 0;
  bottom: 0;
  position: absolute;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
#vue-newmask.mask-screen, .vue-newmask.mask-screen {
  top: 0;
  bottom: 0;
  left:0;
  right:0; 
}
#vue-newmask.mask-dialog, .vue-newmask.mask-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0 1px 3px #0000004d;
}
#vue-newmask.mask-right, .vue-newmask.mask-right {
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  box-shadow: -4px 0px 12px 0px rgba(0,0,0,0.24);
}
#vue-newmask.mask-left, .vue-newmask.mask-left {
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: -4px 0px 12px 0px rgba(0,0,0,0.24);
}
#vue-newmask.mask-top, .vue-newmask.mask-top {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: -4px 0px 12px 0px rgba(0,0,0,0.24);
}
#vue-newmask.mask-bottom, .vue-newmask.mask-bottom {
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -4px 0px 12px 0px rgba(0,0,0,0.24);
}
#vue-newmask.mask-in__right, .vue-newmask.mask-in__right {
  animation: rtl-drawer-in .3s forwards;
}
#vue-newmask.mask-out__right, .vue-newmask.mask-out__right {
  animation: rtl-drawer-out .3s forwards;
}
#vue-newmask.mask-in__left, .vue-newmask.mask-in__left {
  animation: ltr-drawer-in .3s forwards;
}
#vue-newmask.mask-out__left, .vue-newmask.mask-out__left {
  animation: ltr-drawer-out .3s forwards;
}
#vue-newmask.mask-in__top, .vue-newmask.mask-in__top {
  animation: ttb-drawer-in .3s forwards;
}
#vue-newmask.mask-out__top, .vue-newmask.mask-out__top {
  animation: ttb-drawer-out .3s forwards;
}
#vue-newmask.mask-in__bottom, .vue-newmask.mask-in__bottom {
  animation: btt-drawer-in .3s forwards;
}
#vue-newmask.mask-out__bottom, .vue-newmask.mask-out__bottom {
  animation: btt-drawer-out .3s forwards;
}


.vue-newmask__title {
  flex-shrink:0;
  padding: 5px 40px 0 8px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.vue-newmask__title:after {  
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  left: 0;
  right: 0;
  display: block;
  background-color:var(--pt-mask-border);
}
	
.vue-newmask__title .vue-newmask__title-close {
  position: absolute;
  top:6px;
  right: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.vue-newmask__title .vue-newmask__title-close span{
  font-size: 12px;
  transition: all linear 0.2s;
}

.vue-newmask__title .vue-newmask__title-close span:hover {
  color: var(--pt-mask-color-red);
  font-weight: 600;
}
#vue-newmask__title-tab, .vue-newmask__title-tab{
  flex-wrap: wrap;
  display: flex;
  align-items: center;
}

.vue-newmask__main{
  height: calc(100% - 54px);
  overflow: hidden;
}
.vuemask-main__framebox {
	height: 100%;
}

#vuemask-title__tab-first.vuemask-tab__option-current.vuemask-tab__option:last-child, .vuemask-title__tab-first.vuemask-tab__option-current.vuemask-tab__option:last-child{ 
  border-color: transparent;
  background-color:transparent;
  padding-left: 7px;
  top: -2px;
}
#vuemask-title__tab-first.vuemask-tab__option-current.vuemask-tab__option:last-child .vuemask-tab__option-link, .vuemask-title__tab-first.vuemask-tab__option-current.vuemask-tab__option:last-child .vuemask-tab__option-link{ 
  padding-right: 0;
  width: auto;
  color: var(--pt-mask-font-color1);
}

.vuemask-tab__option {
  margin-right: 4px;
  border: 1px solid var(--pt-mask-border);
  border-bottom: 0;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: #EFF0F2;
  border-radius: 4px 4px 0px 0px;
  padding-left: 10px;
}
.vuemask-tab__option:not(.vuemask-tab__option-current):hover {
  background-color: #ffff;
  z-index: 998;
}

.vuemask-tab__option-link {
  padding-right: 12px;
  box-sizing: border-box;
  display: flex;
  color: var(--pt-mask-font-color1);
  height:42px;
  line-height: 42px;
  cursor: pointer;
  width: 200px;
  /* border-bottom: 2px solid transparent; */
}
.vuemask-tab__option-link>span:first-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vuemask-tab__option-current  {
  position: relative;
  z-index: 998;
  background-color: #fff;
}
.vuemask-tab__option-current .vuemask-tab__option-link {
  font-weight: 600;
  color: var(--pt-mask-color);  
}

.vuemask-tab-option-close {
  float: right;
  cursor: pointer;
  transition: all linear 0.2s;
  font-size: 12px!important;
  margin-right: 4px;
  transform-origin: center center;
  padding: 4px 8px;
}  
.vuemask-tab-option-close:hover {
  color: var(--pt-mask-color-red);
  font-weight: 600;
}

@keyframes dialog-show {
  0% {
    background-color: transparent;
  }
  
  100% {
    background-color: rgba(0, 0, 0, .2);
  }
}

@keyframes dialog-hide {
  0% {
    background-color: rgba(0, 0, 0, .2);
  }
  
  100% {
    background-color: transparent;
  }
}

@keyframes el-drawer-fade-in {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

@keyframes rtl-drawer-in {
  0% {
      transform: translate(100%)
  }

  to {
      transform: translate(0)
  }
}

@keyframes rtl-drawer-out {
  0% {
      transform: translate(0)
  }

  to {
      transform: translate(100%)
  }
}

@keyframes ltr-drawer-in {
  0% {
      transform: translate(-100%)
  }

  to {
      transform: translate(0)
  }
}

@keyframes ltr-drawer-out {
  0% {
      transform: translate(0)
  }

  to {
      transform: translate(-100%)
  }
}

@keyframes ttb-drawer-in {
  0% {
      transform: translateY(-100%)
  }

  to {
      transform: translate(0)
  }
}

@keyframes ttb-drawer-out {
  0% {
      transform: translate(0)
  }

  to {
      transform: translateY(-100%)
  }
}

@keyframes btt-drawer-in {
  0% {
      transform: translateY(100%)
  }

  to {
      transform: translate(0)
  }
}

@keyframes btt-drawer-out {
  0% {
      transform: translate(0)
  }

  to {
      transform: translateY(100%)
  }
}