:root {
    --not-checkbox-color: #20cae5;
    --checkbox-color: #17a2b8;
}
    [v-cloak] > *,[vloading] {
     display: none;
}
[v-cloak] [vloading] {
     display: block !important;
}

/*vue transition*/
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}

.fade-enter, .fade-leave-to{
    opacity: 0
}

.slide-fade-enter-active ,slide-fade2-enter-active{
    transition: all .3s ease;
}

.slide-fade-leave-active,slide-fade2-leave-active  {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,.slide-fade-leave-to ,.slide-fade2-enter,.slide-fade2-leave-to{
    transform: translateY(-10px);
    opacity: 0;
}
/*滑動，可參考DisMoneyDateTimeRange2CalDetail.html*/
.sortTrans-enter-active, .sortTrans-leave-active {
    transition: all 0.5s ease;
}

.sortTrans-enter, .sortTrans-leave-to {
    opacity: 0;
    transform: translateX(100%);
}


/*#region act-checkbox  */
.label-cbx {
  user-select: none;
  cursor: pointer;
  margin-bottom: 0;
}
    .label-cbx input:checked + .checkbox {
        border-color: var(--checkbox-color);
    }
        .label-cbx input:checked + .checkbox svg path {
            /*fill: #20C2E0;*/
            fill: var(--checkbox-color);
        }
.label-cbx input:checked + .checkbox svg polyline {
  stroke-dashoffset: 0;
}
.label-cbx:hover .checkbox svg path {
  stroke-dashoffset: 0;
}
    .label-cbx .checkbox {
        position: relative;
        top: 2px;
        float: left;
        margin-right: 8px;
        width: 20px;
        height: 20px;
        border: 2px solid var(--not-checkbox-color);
        border-radius: 3px;
    }
.label-cbx .checkbox svg {
  position: absolute;
  top: -2px;
  left: -2px;
}
    .label-cbx .checkbox svg path {
        fill: none;
        stroke: var(--checkbox-color);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 71px;
        stroke-dashoffset: 71px;
        transition: all 0.6s ease;
    }
.label-cbx .checkbox svg polyline {
  fill: none;
  stroke: #FFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18px;
  stroke-dashoffset: 18px;
  transition: all 0.3s ease;
}
.label-cbx > span {
  pointer-events: none;
  vertical-align: middle;
}


.invisible {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  opacity: 0;
}
.actChkLabel{
    font-size:16px;
}
/*#endregion */


/*#region modal */
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}
.modal-body{
    overflow:auto;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 500px;
    margin: 0px auto;    
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
    max-height:95vh;
    overflow:auto;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .modal-container{width:100%;}
    .modal-wrapper{padding:0 .5rem;}


}

.modal-header {
    font-size: 1.25rem;
    background-color: var(--cardbg);
    color: #FFF;
    padding: .5rem 1rem .25rem 1rem;
    position: relative;
}

.modal-body {
   
}

.modal-default-button {
    
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content:flex-end;
    padding:.5rem;
}
.modal-default-button:hover {
    background-color: #f0f0f0;
}

    .modal-enter {
        opacity: 0;
    }

.modal-leave-active {
    opacity: 0;
}



.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.modalX {
    position:absolute;
    right:0;
    top:0px;
    font-size: 2rem;
    line-height: 31px;
}
.modalX:hover{
    
    background-color:rgba(216, 214, 214, 0.7);
    border-radius:5px;
}

/*#endregion */