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

#vatInvoiceMapping {
    width: 100%;
    height: 100%;
    padding-left: 20px;

    .dropdown-common() {
        display: inline-block;

        .select-button {
            background-color: #F5F5F5;
            padding: 6px 0;
            width: 100px;
        }

        .caret {
            margin-top: 8px;
        }

        .dropdown-menu {
            min-width: 100px;

            li {
                padding: 5px;
                text-align: center;
                min-height: 0px;

                &:hover {
                    background-color: #F91000;
                    color: #FFF;
                }
            }
        }
    }


    .vat-invoice-mapping-title {

        .title {
            height: 54px;
            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;
        }

          .alert-warning {
            background-color: #FDE2DE;
            cursor: pointer;
        }

        .alert {
            color: #CF2D1B;
            font-weight: bold;
            display: inline-block;
            padding: 5px;
            margin-left: 60px;
            margin-bottom: 0px;

            i {
                font-size: 20px;
                vertical-align: middle;
                margin-right: 5px;
            }
        }

        .btn-right{
            float:right;
            margin:15px 25px 10px 10px;
        }
    }

    .vat-invoice-mapping-toolbar {
        width: 100%;

        .import-info-wrapper > span {
            margin-left: 10px;
            color: #333;
            font-family: "Microsoft YaHei";
            font-style: normal;
            font-size: 14px;
            font-weight: bold;
        }

        .dropdown {
            .dropdown-common();
        }

        input {
            width: 50px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #3c3a36;
            padding: 2px;
            text-align: center;
            background-color: #F5F5F5;
        }

        > button:last-child {
            float: right;
            margin-right: 20px;
        }

        .btn-wrapper {
            border-radius: 5px;
            background-color: #e0301e;
            color: #FFF;
            display: inline-block;
            float: right;
            margin-right: 20px;

            .btn-vat-primary {
                min-width: 80px;
            }
        }

        .import-info-wrapper {
            display: inline-block;
        }
        
        .ui-select-container {
            width: 100px;

            span {
                font-weight: bold;
            }
        }
    }

    .vat-invoice-mapping-result {
        width: 100%;
        margin: 10px 0;
        max-width: 99%;
        height: calc(~"100% - 121px");
        
        .listView {
            height: calc(~"100% - 15px");
        }

        .footer{
            text-align:right;
            margin-top: 5px;
        }
    }

    .vat-invoice-mapping-import {
        width: 100%;
        margin: 10px 0;
        max-width: 99%;
        height: calc(~"100% - 141px");
        
    }

    .error-list-modal {
        .modal-title {
            color: #FF0000;
        }

        .modal-body table {
            border: 1px solid #CCC;

            thead tr th {
                height: 30px;
                border: 1px solid #CCC;
            }

            tbody tr td {
                height: 25px;
                border: 1px solid #CCC;
            }
        }

        .modal-footer {
            text-align: center;
        }
    }

     #tab_total {
        display: block;
        height: calc(~'100% - 40px');
        position: relative;  

         .dt-init-wrapper {
            margin: 10px 0;
            max-width: 99%;
            height: calc(~'100% - 60px');
            position: relative;

            .dropdown {
                .dropdown-common();

                i {
                    color: #F85550;
                }
            }

            .balance-ouput-grid-wrapper {
                height: calc(~'100% - 30px');
                overflow: hidden;
                position: absolute;
                top: 0;
                bottom: 190px; /* 130 + 6 */
                left: 0;
                right: 0;
                background-color: #FFF;
            }
        }

         .ui-grid-render-container-body .ui-grid-viewport 
         {
             height:500px;
         }

        .error-info-wrapper {
            position: absolute;
            height: 190px;
            bottom: 0;
            left: 0;
            right: 0;
            overflow: hidden;
            background-color: #FFF;
            margin-left: -40px;
        }

        #content-resizer {
            width: 110%;
            position: absolute;
            height: 4px;
            bottom: 190px;
            left: 0;
            right: 0;
            background-color: red;
            cursor: n-resize;
            margin-left: -40px;

            #topIcon {
                cursor: pointer;
                margin-top: -19px;
                width: 38px;
                margin-left: 46%;
                z-index: 999;
                bottom: -381px;
                text-align: center;
                display: block !important;
            }
        }

       .dt-import-wrapper {
            margin: 10px 0;
            max-width: 99%;
            overflow: auto;
            height: calc(~"100% - 70px");

            .dropdown {
                .dropdown-common();

                i {
                    color: #F85550;
                }
            }
        }       
    }
}