/*
==========================================================================
    mapping New Page
==========================================================================
*/
.mapping {
    font-size: $medium;
    color: $c-black2;
    overflow: hidden;
    .btn-deletecell {
        width: 30px;
        height: 24px;
        display: block;
        right: 1px;
        top: 1px;
    }
    .btn-add {
        width: 28px;
        height: 28px;
        display: block;
        cursor: pointer;
        @include flex-center(center, center);
    }
    .btn-close,
    .btn-save,
    .btn-edit { width: 30px; height: 30px; }
    .btn-hand {
        width: 30px;
        height: 26px;
        display: block;
    }
    .checksection .grayncheck .checkmark, 
    .checksection .grayncheck:hover input ~ .checkmark,
    .checksection .grayncheck input:checked ~ .checkmark { background-color: #e4e4e4; }
    .form-control {
        width: 100%;
        height: 26px;
        padding: 0 10px;
        line-height: 24px;
        color: $c-black2;
        border-radius: 0;
        background: $c-input !important;
        border: 1px solid $c-border;
    }
    .mapping-content {
        margin-top: 20px;
        padding: 0 15px;
        @media (max-width: 667px) {
            .content {
                overflow: scroll;
                height: 400px;
                margin-bottom: 20px;
                .maprow {
                    width: 600px;
                    max-width: inherit;
                }
            }
        }
    }
    .mappingarea {
        width: 660px;
        max-width: 100%;
        float: left;
        .title {
            height: 30px;
            padding: 0 15px;
            margin-bottom: 10px;
            @include linear-gradient(#dde0ec, #9da8ce);
            position: relative;
            h2 {
                font-family: $base-font-semibold;
                font-size: $medium;
                color: $c-blue3;
                line-height: 30px; 
                margin: 0;
                float: left;
            }
            .btn-save {
                position: absolute;
                right: 35px;
                top: 0;
            }
            .btn-edit {
                float: right;
                position: unset;
                right: 0 !important;
                top: 0;
                i {
                    -webkit-background-size: 28px 28px !important;
                    background-size: 28px 28px !important;
                }
            }
            .btn-close {
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .maprow {
            margin:  2px 0 0 0;
            background: $c-white;
            .mapcolumn {
                padding: 0;
                min-height: 26px;
                span {
                    height: 26px;
                    line-height: 24px;
                    padding: 0;
                    display: block;
                    position: relative;
                    span { padding: 0 10px; }
                }
                .btn-hand {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .mapcell > span { background-color: #dcedff; }
            .mapcell > div {
                background-color: $c-white;
                border: 1px solid $c-border;
            }
            .mapcolumn-2 {
                margin-left: 141px;
                .mapcell { padding: 0 1px; }
                .mapmapcell-4 { padding-right: 0; }
                .ui-sortable-helper { left: 141px !important; }
            }
            .mapcell { float: left; }
            .mapmapcell-1 { width: 140px; height: 100%; }
            .mapmapcell-1 > span { height: 100%; }
            .mapmapcell-2 { 
                width: 34%; 
                span { padding-left: 30px; }
                .form-control { padding: 0 40px 0 10px; }
            }
            .mapmapcell-3 { width: 38%; }
            .mapmapcell-4 { width: 28%;
                & > div { height: 26px; }
                &.blankcell {
                    span { background: $c-white !important; }
                    span span {
                        background: $c-white !important;
                        border: 1px solid $c-border;
                    }
                }
            }
            @media (max-width: 767px) {
                .mapmapcell-1 { width: 140px; }
                .mapcolumn-2 { margin-left: 141px; }
                .mapmapcell-2 { width: 34%; }
                .mapmapcell-3 { width: 42%; }
                .mapmapcell-4 { width: 24%; }
            }
            @media (max-width: 667px) {
                .mapmapcell-1 { width: 140px; }
                .mapcolumn-2 { margin-left: 141px; }
                .mapmapcell-2 { width: 134px; }
                .mapmapcell-3 { width: 180px; }
                .mapmapcell-4 { width: 145px; }
            }
            .mapwapcolumn { min-height: 26px; }
            .mapcolumn-1 .mapitem {
                position: relative;
                .mapmapcell-1 {
                    overflow-x: hidden;
                    &:before {
                        content: '';
                        position: absolute;
                        height: 100%;
                        width: 140px;
                        background: #dcedff;
                        display: block;
                    }
                }
                margin-top: 2px !important;
                &:first-child { margin-top: 0 !important; }
            }
            &.title-maprow {
                margin-top: 0;
                overflow: hidden;
                .btn-add {
                    position: absolute;
                    right: 0;
                    top: 0;
                    padding: 0;
                    margin: 0;
                    z-index: 100;
                }
                .mapcolumn { text-align: center; }
                .mapcell > span {
                    font-family: $base-font-semibold;
                    background-color: #b9c7d6;
                    padding: 0 5px;
                    position: relative;
                }
                .mapcolumn2 { span { padding: 0 5px; } }
                .mapmapcell-2 { span { padding-left: 0; } }
            }
            &.maprowblank {
                background-color: #e4e4e4;
                min-height: 26px;
            }
            &.new-maprow { background-color: #dcedff; }
        }
        &.mappingareasave {
            .mapmapcell-2 { 
                span { padding-left: 0; }
            }
            .maprow {
                .mapcolumn-2 {
                    span span {
                        background-color: $c-white;
                        border: 1px solid $c-border;
                        position: relative;
                        @include flex-center(center, center);
                        i {
                            width: 14px;
                            width: 20px;
                            height: 20px;
                            -webkit-background-size: 18px auto !important;
                            background-size: 18px auto !important;
                            &.chi-tic {
                                -webkit-background-size: 14px auto !important;
                                background-size: 14px auto !important;
                            }
                        }
                    }
                }
            }
            .title-maprow {
                .mapcolumn-2 {
                    span span {
                        border: none;
                        background: none;
                    }
                }
            }
        }
    }
}

.mapping {
    .submemu {
        margin-bottom: 5px;
        padding: 0 0;
        li {
            padding: 0 0 0 5px;
            &:first-child {
                padding-left: 0;
            }
            a {
                color: $c-black2;
                background: #e2f0d9;
                &:hover {
                    background: #85cdc1;
                }
            }
            &.active a {
                background: #85cdc1;
            }
        }
    }
    .mappingarea {
        .btn-edit {
            right: 10px !important;
        }
        .btn-save {
            right: 45px !important;
        }
        .btn-close {
            right: 10px !important;
        }
    }
    &.ms-mapping {
        .mapping-content {
            @media (max-width: 690px) {
                .content {
                    overflow: scroll;
                }
            }
        }
        .mappingarea {
            width: 800px;
            .maprow {
                width: 800px;
                .mapitem {
                    position: relative;
                }
                .mapitemdrag3 {
                    margin-top: 2px;
                    overflow: hidden;
                    &:first-child {
                        margin-top: 0;
                    }
                }
                .mapmapcell-1 {
                    width: 249px;
                    height: 100%;
                    &:before {
                        width: 249px !important;
                    }
                }
                .mapcolumn-2 {
                    margin-left: 250px;
                }
                .mapmapcell-2 {
                    width: 139px;
                    span {
                        padding: 0;
                        span {
                            padding: 0 10px;
                        }
                    }
                }
                .mapcolumn-2 .mapitem {
                    position: relative;
                    .mapmapcell-2 {
                        overflow-x: hidden;
                        height: 100%;
                        &:before {
                            content: '';
                            position: absolute;
                            left: 1px;
                            height: 100%;
                            width: 137px;
                            background: #dcedff;
                            display: block;
                        }
                    }
                }
                .mapcolumn-3 {
                    margin-left: 139px;
                    .ui-sortable-helper {
                        left: 139px !important;
                    }
                }
                .mapmapcell-3 {
                    width: 180px;
                    position: relative;
                    span {
                        padding: 0 30px 0 30px;
                    }
                    .form-control {
                        border-right: none;
                    }
                    .btn-deletecell {
                        border: 1px solid $c-border;
                        border-left: none;
                        height: 26px;
                        right: 0;
                        top: 0;
                    }
                }
                .mapmapcell-4 {
                    width: 230px;
                }
                &.title-maprow {
                    .mapcell {
                        span {
                            padding: 0;
                            span {
                                padding: 0 10px;
                            }
                            .btn-add {
                                padding: 0;
                            }
                        }
                    }
                }
                &.mapeditrow {
                    .mapmapcell-2 {
                        span {
                            span {
                                border: 1px solid $c-border;
                                background: $c-white;
                            }
                        }
                    }
                }
                &.mapviewrow {
                    .mapmapcell-2,
                    .mapmapcell-3,
                    .mapmapcell-4 {
                        span {
                            padding: 0;
                            span {
                                padding: 0 10px;
                                border: 1px solid $c-border;
                                background: $c-white;
                            }
                        }
                    }
                }
            }
        }
    }
    &.fmsetting {
        .mapping-content {
            @media (max-width: 918px) {
                .content {
                    overflow: scroll;
                }
            }
        }
        .mappingarea {
            width: 888px;
            .title {
                margin: 0;
            }
            .content {
                padding: 10px;
                background: $c-white3;
                overflow: auto;
                .fmsrow {
                    width: 878px;
                    margin-top: 1px;
                    overflow: hidden;
                    .fmscell {
                        float: left;
                        width: auto;
                        background: $c-white;
                        margin-left: 1px;
                        &:first-child {
                            margin-left: 0;
                        }
                        & > span {
                            height: 26px;
                            display: block;
                            padding: 0;
                            span {
                                display: block;
                                position: relative;
                                height: auto;
                                padding: 3px 10px;
                                border: none;
                            }
                        }
                        &.fmscell-1 {
                            width: 240px;
                            span {
                                span {
                                    text-align: right;
                                }
                            }
                        }
                        &.fmscell-2 {
                            width: 346px;
                            & > span {
                                padding: 0;
                            }
                        }
                        &.fmscell-3 {
                            width: 140px;
                        }
                        &.fmscell-4 {
                            width: 140px;
                        }
                        &.greencell {
                            span {
                                background: #e2f0d9;
                            }
                        }
                    }
                    &.title-maprow {
                        margin-bottom: 2px;
                        .fmscell {
                            & > span {
                                background: #b3c6e8;
                                height: 30px;
                                padding: 0;
                                span {
                                    text-align: center;
                                    padding: 5px 10px;
                                }
                            }
                        }
                    }
                    &.fmseditrow {
                        .fmscell {
                            .form-control {
                                float: left;
                                display: block;
                                width: 42px;
                                height: 24px;
                                padding: 0 10px;
                                border: 1px solid $c-border;
                            }
                            &.fmscell-2 {
                                .form-control {
                                    margin: 0 0 0 5px;
                                }
                            }
                            &.fmscell-3,
                            &.fmscell-4 {
                                .form-control {
                                    margin: 0 auto;
                                    float: none;
                                }
                            }
                        }
                        .common-row {
                            float: left;
                            border: none;
                            height: 26px;
                            padding: 1px 0;
                            strong {
                                line-height: auto;
                                font-weight: normal;
                                display: block;
                                float: left;
                            }
                            .radio {
                                float: left;
                                width: auto;
                                height: 24px;
                                line-height: 22px;
                                padding-right: 5px;
                                span i {
                                    opacity: 0;
                                }
                                &:first-child {
                                    .form-control {
                                        margin: 0 5px 0 5px;
                                    }
                                }
                            }
                            .radio.active {
                                span i {
                                    opacity: .55;
                                }
                            }
                        }
                    }
                    &.fmsviewrow {
                        .fmscell-2,
                        .fmscell-3,
                        .fmscell-4 {
                            span {
                                span {
                                    display: block;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}