@import "~/app-resources/less/theme.less";

.vat-unbilled-invoice { 
    padding-left: 20px;  
    height: 100%;
    width:100%;

    .nav-wrapper {     
          display: inline-block;

        .nav-header {
            height: 40px;
            /*line-height: 54px;*/
            font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular", "Microsoft YaHei";
            font-weight: 700;
            font-style: normal;
            font-size: 15px;
            color: #333;
            display: inline-block;
        }
      }

    .total-container{
            width: 100%;
            height: calc(~"100% - 45px");
            /*border: 1px solid #E4E4E4;
            border-radius: 5px;*/
            display: inline-block;
            position: relative;

        .detail-table{
            width: 98%;
            height: calc(~"100% - 200px"); 
            display: inline-block;
            position: relative;  
            bottom:0px !important;

            .voucher-table{
                height:99%;
                width:49.5%;
                float:left;  

                .left-header{
                    width:100%;
                    display: inline-block;
                    height:50px; 
                    background-color:rgb(204, 204, 204);

                    .left-icon{                   
                       display: inline-block;
                        position:relative; 
                        top:-15px;
                        left:10px;
                        font-size:30px;
                        color:red; 
                    }

                    .left-title{
                        display: inline-block; 
                        padding-left:20px;
                        font-family: 'Microsoft YaHei'; 
                        font-style: normal;
                        font-size: 14px;
                        font-weight:600;
                        text-align:center;
                        /*line-height:65px;*/
                        color:red;
                    }

                      .voucher-tab {
                            display: inline-block;
                            float:right;
                            padding-right:20px;
                            padding-top: 12px;
                        span {
                            display: inline-block;
                            height: 25px;
                            width:80px;
                            text-align:center;
                            line-height: 25px;
                            /*padding: 0 10px;*/ 
                            color: #f16000;
                            font-family: "Microsoft YaHei";
                            font-weight: 400;
                            font-style: normal;
                            font-size: 14px;
                            cursor: pointer;
                            background-color: #ffffff;
                        }

                        .active {
                            color: #FFF;
                            background-color: #f16000;
                        }
                    }
                }
            }

            .invoice-table{
                height:99%;
                width:49.5%;
                float:right; 

                .right-header{
                width:100%;
                display: inline-block;
                height:50px; 
                background-color:rgb(204, 204, 204);

                .right-icon{                   
                    display: inline-block;
                    position:relative; 
                    top:-15px;
                    left:10px;
                    font-size:30px;
                    color:#b90808; 
                }

                .right-title{
                    display: inline-block; 
                    padding-left:20px;
                    font-family: 'Microsoft YaHei'; 
                    font-style: normal;
                    font-size: 14px;
                    font-weight:600;
                    text-align:center; 
                    color:red;
                }  
                
               .invoice-tab {
                            display: inline-block;
                            float:right;
                            padding-right:20px;
                            padding-top: 12px;
                        span {
                            display: inline-block;
                            height: 25px;
                            width:80px;
                            text-align:center;
                            line-height: 25px;
                            /*padding: 0 10px;*/ 
                            color: #f16000;
                            font-family: "Microsoft YaHei";
                            font-weight: 400;
                            font-style: normal;
                            font-size: 14px;
                            cursor: pointer;
                            background-color: #ffffff;
                        }

                        .active {
                            color: #FFF;
                            background-color: #f16000;
                        }
                    }
                                     
            }                 
            }
        }

        .map-container{ 
                width: 101%;
                position: absolute;
                height: 300px;
                bottom: 0;
                left: 0;
                right: 0;
                overflow: hidden;
                background-color: #FFF;
                margin-left: -20px;

                .map-title{
                    height:20px;
                    padding-top: 10px;
                    padding-left: 20px;     
                    padding-bottom:10px;
                    
                      .map-header {
                        height: 40px; 
                        font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular", "Microsoft YaHei";
                        font-weight: 700;
                        font-style: normal;
                        font-size: 15px;
                        color: #333;
                        display: inline-block;
                    }     
                }
                 
                .voucher-map-invoice{                    
                    .map-icon{
                         height:64px;
                         text-align:center;
                     }

                     .map-detail{
                         display:inline-block;
                         width:100%;

                      .map-voucher-table{
                         display:inline-block;
                         width:40%;
                         padding-left:20px;
                         float:left;
                     }

                     .map-transaction-detail{
                         display:inline-block;
                         width:20%;                        
                         text-align:center;

                         .trancode-div{               
                             position:relative;

                             .trancode-map{
                                   position: absolute;
                                   width: 100px; 
                                   height: 100px; 
                                   background-color: #f3f2f0;                            
                                   /*border:1px solid;*/
                                   border-radius: 50px; 
                                   top:65%;
                                   left:33%; 
                                   margin-top:30px;
                                   color:#b90808;
                             }
                         }
                     }

                      .map-invoice-table{
                         display:inline-block;
                         width:40%;
                         padding-right:20px;
                         float:right;
                      }
                     } 
                }
 
            }

         #content-resizer {
                    width: 103%;
                    position: absolute;
                    height: 4px;
                    bottom: 300px;
                    left: 0;
                    right: 0;
                    background-color: #6A6864;
                    cursor: n-resize;
                    margin-left: -40px;

                    #topIcon {
                        cursor: pointer;
                        margin-top: -19px;
                        width: 38px;
                        margin-left: 49%;
                    }
                }

    }

    
    

    }