:root {
        --SHADOWCOLOR:#2017c3;
        --POINTCOLOR:#7b66f3;
        --FONTCOLOR:#fff;
        --PLACEHOLDER:#ccc;
        --BLUE:#4d9cea;
    }
    [v-cloak] {
        display: none;
    }
    tr:hover{
        box-shadow: 0 0  5px 2px #786eff inset;
    }
    .main{
        min-width:  1350px;
        width: 95%;
        margin:20px auto ;
        background:none;  
        padding: 20px  ;
        box-sizing: border-box;
        background: #292e42;
        border-radius: 5px;
    }
    .custom-checkbox{
        display: block;
        width: 15px;
        height: 15px;
        border: solid 1px #999;
        border-radius: 3px;
        display: flex;
        margin: auto;
        cursor: pointer;
    }
    .custom-checkbox.active{
        border: solid 1px #46a2e0;
    }
    .custom-checkbox i{
        margin: auto;
        color: #46a2e0;
    }
    
    .bannerPrompt{
        background: #1f2230;
        padding: 15px ;
        margin: 10px 0;
        border-radius: 11px;
        color: #fff;
        font-size: 14px;
    }
    .navigate{
        margin: 20px 0;
    }
    .navigate ul{
        width: 100%;
        border-bottom:solid 1px #5a5a5a;
        margin: 20px 0;
        display: flex;
    }
    .navigate ul li{
        display: inline-block;
        padding: 7px 20px;
        font-size: 14px;
        color: #fff;
        background: #5a5a5a;
        border-radius: 5px 5px 0 0;
        margin-right: 7px;
        cursor:pointer;
    }
    .navigate ul li.back{
        background: orangered;
        color: #fff;
        margin-left: auto;
        cursor: pointer;
    }
    .navigate ul li.active{
        background: #46a2e0;
    }
    
    .navigate div{
        margin: 20px 0;
    }
    .navigate div button{
        margin: auto 10px;
        padding: 3px 20px;
        color: #fff;
        background: orange;
        border-radius: 4px;
        font-size: 14px;
        border: none;
        cursor: pointer;
    }
    .tb-ava{
        border-radius: 100%;
        width: 40px;
        height: 40px;
    }
    .pageBar{ 
        display: flex;
        border-bottom: solid 1px #4e4e4e;
        margin-bottom: 20px;
        
    }
    .pageBar span {
        padding: 10px 15px;
        color: #fff;
        font-size: 13px;
        border: 1px solid #e8edf0;
        border-bottom: none;
        border-radius: 7px 7px 0 0;
        margin-right: 10px;
    }
    .pageBar span.active{
        background: #888;
    }
    .control-controlBtn{
        display: flex;
        background-color: #808080;
        border: solid 1px #ddd; 
        border-radius:5px;
        margin: auto 5px;
        margin-left: auto;
    }
    .control-controlBtn .control-controlBtn-item {
        border-right: soild 1px  #fff;
        border-radius: 6px;
        padding: 3px 10px;
        position: relative;
    }
    .control-controlBtn .control-controlBtn-item:nth-last-child(1){
        border:none;
    }
    .control-controlBtn .control-controlBtn-item i {
        vertical-align: middle;
        margin: auto 0;
        color: #fff;
        font-size: 22px;
    }
    .control-controlBtn .control-controlBtn-item span {
        margin: auto 0;
        vertical-align: middle;
        display: inline-block;
        border-top: solid 5px #fff;
        border-right: solid 4px transparent;
        border-left: solid 4px transparent;
    }
    .control-controlBtn .control-controlBtn-item .columnList{
        position:absolute ;
        background: #fff;
        border-radius: 6px;
        padding: 10px;
        top: 100%;
        right: 0;
    }
    .control-controlBtn .control-controlBtn-item .columnList div {
        display: flex;
        padding: 5px 10px;
    }
    .control-controlBtn .control-controlBtn-item .columnList div input{
         margin: auto 0;
         margin-right: 7px;
    }
    .control-controlBtn .control-controlBtn-item .columnList div label{
        white-space: nowrap;
        margin: auto 0;
    }
    
    .search {
        display: flex;
        margin: 10px 0;
    }
    .search input[type = 'date']::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
    .search-input{
        flex: 1;
        display: flex;
        margin: 0 8px;
        font-size: 14px;
        color: #fff;
    }
    .search-input span ,.search-range span {
        vertical-align: middle;
        margin-bottom: 0;
        padding-top: 7px;
        white-space: nowrap;
        margin-right: 5px;
        text-align: right;
        min-width: 4rem;
        max-width: 70px;
        flex: 1;
    }
    
    .search-input input{
        min-width: 200px;
        flex: 1;
        margin-left: 0;
        border: 1px solid #ccc;
        padding: 6px 5px;
        height: 31px;
        font-size: 12px;
        line-height: 1.42857143;
        background-color: #3a3a3e;
        /*margin-left: 30px;*/
        box-sizing:border-box;
        color: var(--FONTCOLOR);
    }
    .search-input input::placeholder {
        color:var(--PLACEHOLDER);
    }
    .search-input select{
        border: 1px solid #ccc;
        padding: 6px 12px;
        height: 31px;
        font-size: 12px;
        line-height: 1.42857143;
        background: #3a3a3e;
        /*margin-left: 30px;*/
        min-width: 200px;
        flex: 1;
        color: var(--FONTCOLOR);
    }
    .search-btn {
        margin: 0 auto;
        width: 200px;
        
    }
    .search-btn span:nth-child(1) {
        border-radius: 4px;
        text-align: center;
        background-color: #f39c12;
    }
    .search-btn span{
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.42857143;
        /*border: 1px solid transparent;*/
        border-radius: 3px;
        display: inline-block;
        margin-bottom: 0;
        margin-right: 3px ;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        background-color: #808080;
        color: #e6ebeb;
        border-color: #ddd;
        flex: 0;
        
    }
    .search-range span {
        color: #fff;
    }
    .search-range{
        display: flex;
        flex: 1;
        margin: 0 8px;
    }
    .search-range div {
        width: 200px;
        margin-left: 0;
        display: flex;
        flex: 1;
    }
    .search-range div input{
        flex: 1;
        border: 1px solid #ccc;
        padding: 6px 0px;
        height: 31px;
        background: none;
        color: #fff;
        background: #3a3a3e;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        min-width:90px;
    }
    .search-range div input[type = 'number']{
        width: 45%;
    }
    .search-range div label{
        margin: auto 3px;
        color: #fff;
        font-size: 13px;
    }
    .search-menu{
        padding: 7px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        top: calc(100% + 15px);
        right: 0;
        display: flex;
        flex-direction: column;
    }
    .search-menu:before{
        content: '';
        display: inline-block;
        border-bottom:solid 10px #fff;
        border-right:solid 10px transparent;
        border-left:solid 10px transparent;
        margin: 0 auto;
        margin-top: -15px;
        margin-right: 0;
    }
    .search-menu-list{
        display: flex;
        flex-direction:column;
        width: 100px;
    }
    .search-menu .search-menu-list div {
        text-align: center;
        font-size: 13px;
        color: #333;
        background: #f5f5f5;
        margin:5px 0;
        padding: 5px;
        border-radius: 3px;
    }
    .search-menu .search-menu-list div.active{
        background-color: #4d9cea;
        color: #fff;
    }
    .control {
        display: flex;
        margin:20px 0;
    }
    .control-btn {
        vertical-align: middle;
        display: inline-block;
        color: #fff;
        border-radius: 3px;
        padding:6px 10px;
        background-color: #f39c12;
        background-color: #808080;
        margin-right: 10px;
        cursor: pointer;
    }
    .control-reload {
        background-color: #4d9cea;
        font-size: 18px;
        margin-right: 10px;
    }
    .control-add {
        background-color: #f39c12;
    }
    .control-add i {
        vertical-align: middle;
        font-weight: bold;
    }
    .control-add span {
        vertical-align: middle;
    }
    .control-search {
        /*margin-left: auto;*/
        border:solid 1px  #ddd;
    }
    
    .tb {
        width:100%;
    }
    .tb th {
        color: #fff;
        font-size: 13px;
        text-align: center;
        padding: 8px;
    }
    .tb td{
        font-size: 13px;
        text-align: center;
        padding: 8px;
        color: #fff;
    }
    .tb tbody tr:nth-child(odd){
        background: #464545;
    }
    .td-result {
        color: orange;
    }
    .tb-btn {
        /*display: flex;*/
            /* display: flex; */
        margin: 0 auto;
        text-align: center;
        /* white-space: nowrap; */
        max-width: 250px;
    }
    
    .tb-btn .tb-btn-item{
        padding: 1px 5px;
        font-size: 11px;
        line-height: 1.5;
        border-radius: 2px;
        white-space: nowrap;
        margin:  3px;
        display: inline-block;
    }
    .tb-btn .tb-btn-item:nth-child(1){
        background: #46a2e0;
    }
    .tb-btn .tb-btn-item:nth-child(2){
        background: #f39c12;
    }
    .tb-btn .tb-btn-item:nth-child(3){
        background: #e74c3c;
    }
    .tb-btn .tb-btn-item i{
        vertical-align: middle;
    }
    .tb-btn .tb-btn-item span{
        font-size: 12px;
        color: #fff;
    }
    
    
    
    .tb-name {
        display: inline-block;
        min-width:120px;
    }
    .tb-count {
        display: inline-block;
        min-width:50px;
    }
    .tb-time {
        display: inline-block;
        min-width:120px;
    }
    .td-result {
        display: inline-block;
        min-width:70px;
    }
    
    .list2{
        width: 100%;
    }
    .list2 tr { padding: 8px;display: flex;flex-direction: column;}
    .list2 tr:nth-child(odd) {
        background: #464545;
       
    }
    .list2 input[type = 'checkbox']{}
    .list2-info {
        display: flex;
        margin: 3px 0;
    }
    .list2-info-title {
        color: #fff;
        min-width: 30%; 
        text-align: left;
    }
    .list2-info-content {
        display: flex;
    }
    .list2-info-content label{}
    .list2-info-content .value {
        color: #fff;
        font-size: 13px;
       
    }
    .controlBtn{
        color: #fff;
        font-size: 13px;
        border-radius: 4px;
        padding: 5px;
        margin: 0 auto;
        /*width: 30px;*/
        white-space: nowrap;
        
        margin-right: 10px;
    }
    
    .msk-animation{
        position: relative;
    }
    .msk-animation:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px; 
        box-shadow: 0 0 8px 3px var(--POINTCOLOR);
        border-radius: 100%;
        /*z-index: -1;*/
        
        animation: pointerMove 25s linear infinite;
    }
    .pages {
        display: flex;
        margin-top:30px;
    }
    .pages-info {
        color: #fff;
        display: flex;
        
    }
    .pages-info span {
        margin: auto 0;
    }
    .pages-info select {
        background: transparent;
        border: solid 1px #999;
        color: #ccc;
        border-radius: 3px;
        padding: 3px 10px;
        margin: auto 10px;
    }
    .pages-list{
        margin: auto 0;
        margin-left: auto;
        display: flex;
        
    }
    .pages-choose{
        background: #fff;
        border-radius: 3px;
        overflow: hidden;
        margin-right: 10px;
        display: flex;
    }
    .pages-choose div {
        display: flex;
        margin: auto 0;
    }
    .pages-choose button{
        color: #666;
        padding: 3px 10px;
        border: none;
        border-radius: 4px;
        background: transparent;
    }
    .pages-choose span{
        padding: 0 7px ;
        cursor: pointer;
        line-height: 1.5rem;
    }
    .pages-choose span:hover{
        background: #dedede;
    }
    .pages-link{
        display: flex;
    }
    .pages-link input{
        height: 100%;
        width: 50px;
        margin-left: 5px;
        margin-right: 5px;
        text-align: center;
        background: none;
        border: solid 1px #fff;
        border-radius: 3px ;
        color: #fff;
    }
    .pages-link button{
        background-color: #808080;
        color: #e6ebeb;
        border-color: #ddd;
        border: solid 1px #fff;
        padding: 2px 7px;
        border-radius: 3px;
    }
    .activePage{
        background: var(--BLUE);
        color: #FFF;
    }
    @keyframes pointerMove {
        0% {
            top: 0;
            right: 0;
            left: 100%;
            bottom: 100%;
        }
        30%{
            top: 0;
            right: 100%;
            left: 0;
            bottom: 100%;
        }
        50%{
            top: 100%;
            right: 100%;
            left: 0;
            bottom: 0;
        }
        80%{
            top: 100%;
            right: 0%;
            left: 100%;
            bottom: 0;
        }
        100%{
            top: 0;
            right: 0;
            left: 100%;
            bottom: 100%;
        }
    }
    
    .dialogGroup{
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        
    }
    .dialog {
        margin: auto;
        border-radius:7px;
        min-width: 300px;
        margin: auto;
        /*background: #fff;*/
        background: #262b3d;
        overflow: hidden;
    }
    .dialog-title {
        padding: 20px 30px;
        box-sizing: border-box;
        display: flex;
        box-shadow: 0 2px 3px #dedede;
        
        background: none;
        color: #fff;
    }
    .dialog-close {
        margin: 0 auto;
        margin-right: 0;
        font-size: 20px;
        cursor: pointer;
    }
    
    .dialog-content{
        padding: 20px ;
        box-sizing: border-box;
        min-height: 10vh;
        display: flex;
        position: relative;
    }
    .dialog-content-text {
        text-align: center;
        font-size: 15px;
        color: #666;
        white-space: pre-wrap;
        width: 100%;
        margin: auto 0;
    }
    
    .chatGroup{
        width: 500px;
        border-radius: 5px ;
    }
    .chatGroup-content{
        height: 300px;
        padding:20px;
        box-sizing: border-box;
        background: #141721;
    }
    .chatGroup-list {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    .chatGroup-list::-webkit-scrollbar {
        width: 5px;
        background: #666;
    }
    .chatGroup-list::-webkit-scrollbar-thumb{
        background: #999;
        width: 5px;
    }
    .chatGroup-msg {
        display: flex;
        margin-bottom: 10px;
    }
    .chatGroup-msg-avatar {
        
        margin-bottom: auto;
    }
    .chatGroup-msg-avatar img{
        width: 30px;
        height: 30px;
        border-radius: 100%;
    }
    .chatGroup-msg-info {
        margin:0 10px;
    }
    .chatGroup-msg-info p{
        color: #999;
        font-size: 12px;
        text-align: right;
    }
    .chatGroup-msg-info p:nth-child(1){
        background: #262b3d;
        border: solid 1px #3e3e3e;
        color: #fff;
        font-size: 13px;
        border-radius: 4px;
        padding:5px 10px;
        min-width: 200px;
        max-width: 300px;
        margin-bottom: 8px;
        text-align: left;
    }
    .chatGroup-send {}
    .chatGroup-send textarea{
        width: 100%;
        background: #141721;
        border: none;
        border-top: solid 1px #333;
        color: #fff;
        padding: 20px;
        box-sizing: border-box;
        resize: none;
        font-size: 12px;
    }
    .chatGroup-send div {
        text-align: right;
        margin-top:10px;
    }
    .chatGroup-send div button{
        width: 140px;
    }
    .chatGroup-msg-my  .chatGroup-msg-info{
        margin-left: auto;
    }
    .chatGroup-msg-my  .chatGroup-msg-info p{
        text-align: left;
    }
    
    .total-prompt{
         padding: 10px 20px;
        background: linear-gradient(45deg, #589bff, #314162,transparent);
        color: #fff;
        /*font-weight: bold;*/
        font-size: 15px;
        border-radius: 30px;
    }
    .total-prompt span {
        font-size: 17px;
        font-weight:bold;
        margin-right:10px;
    }
    
    .media-list {
        background: #1d1d2b;
        padding: 20px;
        width: 800px;
    }
    .media-list-data {
        height: 68vh;
        overflow-y: auto;
    }
    .media-list-item {
        display: inline-block;
        width: 145px;
        margin: 10px 5px;
        border: solid 1px #666;
        border-radius: 4px;
    }
    .media-list-item div {
        height: 75px;
        width: 100%;
        background: #333;
        display: flex;
    }
    .media-list-item div img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        margin: auto;
    }
    .media-list-item div p{
        width: 100%;
        height: 100%;
        display: flex;
        cursor: pointer;
        background-position: center !important;
        background-size: contain !important;
        background-repeat: no-repeat !important; 
    }
    .media-list-item div p i {
        width: 25px;
        height: 25px;
        color: #ccc;
        margin: auto;
        font-size: 25px;
    }
    .media-list-item div video{
        width: 100%;
        height: 100%;
    }
    .media-list-item div audio{
        margin:auto 0;
    }
    .media-list-item button{
        display: block;
        width: 100%;
        
    }
    .tmp-classify,.tmp-size {
        display: flex;
        margin: 5px 0;
        background: #1f2130;
        padding: 5px 10px;
        border-radius: 5px;
    }
    
    .tmp-size div {
       flex: 1;
       display: flex;
       flex-wrap: wrap;
    }
    .tmp-classify div {
       flex: 1;
       /*display: flex;*/
       /*flex-wrap: wrap;*/
       overflow: hidden;
       overflow-x: auto;
       white-space: nowrap;
    }
    .tmp-classify div::-webkit-scrollbar{
        height: 14px;
        background: #666;
    }
    .tmp-classify div::-webkit-scrollbar-thumb{
        height: 14px;
        background: #999;
    }
    .tmp-classify div span,.tmp-size div span{
        margin: 3px 5px;
        font-size: 13px;
        color: #fff;
        padding: 2px 6px;
        min-width: 85px;
        text-align: center;
        border: solid 1px #666;
        cursor: pointer;
        display: inline-block;
        position: relative;
    }
    .tmp-classify label,.tmp-size label{
        margin: auto 0;
        margin-right: 10px;
        color: #fff;
    }
    .tmp-classify span.active{
        border: solid 1px #46a2e0;
        background: #46a2e0;
        color: #fff;
    }
    .tmp-classify span i {
        position: absolute;
        right: -21px;
        top: -10px;
        z-index: 1;
        background: #333;
        color: #fff;
        font-size: 12px;
        padding: 3px 5px;
        font-style: normal;
        transform: scale(.8);
        
    }
    
    
    .price-result{}
    .price-result div{
        width: 300px;
        text-align: center;
        color: #fff;
        font-size: 14px;
    }
    .price-result div span{
        display: inline-block;
        color: darkorange;
        margin:0 10px;
        cursor: pointer;
    }
    .price-result button {
        display: block;
        margin: 0 auto;
        width: 150px;
        margin-top: 20px;
    } 
    
    
    
    
    .first-group{
        width: 100%;
    }
    .first-tip{
        width: 700px;
        height: 400px;
        padding: 10px;
        border-radius: 7px;
        background: #1f2230;
    }
    .first-tip div {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        color: #fff;
    }
    .first-tip div pre{
        
    }
    .first-group button {
        display: block;
        margin: 10px auto;
        width: 200px;
    }