body {
    background-color: #f3f3f3 !important;
    background: #f3f3f3 !important;
    background: #263238 !important;
    background: #20282c !important;
}

    body #MainContent {
        margin-bottom: 70px;
        margin-bottom: 0;
    }

        body #MainContent #ListReplace,
        body #MainContent #Process,
        body #MainContent #GenerateRow {
            padding: 0 10px;
        }

    body label {
        color: white;
    }

        body label.lbl {
            font-weight: normal;
        }

    body #SysSetting {
        margin-top: 10px;
    }
    /*Head*/

    body .navbar-inverse {
        background-color: transparent;
        background: transparent;
        border: unset;
        display: block;
        position: relative;
        margin: 0;
    }

    body .body-content {
        margin: 0;
        width: auto;
    }

    body .navbar-inverse .container {
        margin: 15px;
        border: 1px solid #cacaca;
        width: auto;
        padding: 10px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

        body .navbar-inverse .container h1 {
            margin-top: 0;
            color: white;
            font-size: 50px;
        }

            body .navbar-inverse .container h1 label {
                vertical-align: middle;
                margin-top: 5px;
                font-family: 'Borg 9';
                font-weight: normal;
                font-size: 36px;
            }

            body .navbar-inverse .container h1 img {
                border: 1px solid white;
                background-color: white;
                height: 50px;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
            }

        body .navbar-inverse .container .btns {
            text-align: right;
            margin-top: -59px;
            margin-bottom: 7px;
        }

        body .navbar-inverse .container button {
            border: 1px solid #cacaca;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            padding: 5px 15px;
            color: white;
            font-size: 17px;
            transition: all 0.4s;
            -moz-transition: all 0.4s;
            -webkit-transition: all 0.4s;
            text-align: center;
            min-width: 160px;
            min-width: auto;
            margin: 3px 5px;
        }

            body .navbar-inverse .container button svg {
                font-size: 27px;
                margin: 0 auto;
                height: 27px;
                width: 27px;
                vertical-align: bottom;
            }

            body .navbar-inverse .container button#btnSingleReplace {
                background-color: #7fc182;
                border-color: #43a047;
            }

                body .navbar-inverse .container button#btnSingleReplace.active,
                body .navbar-inverse .container button#btnSingleReplace:hover {
                    background-color: #ffe6cc;
                    box-shadow: 0 0 5px #43a047;
                    color: #43a047;
                    border-color: #43a047;
                }

            body .navbar-inverse .container button#btnSysSetting {
                background-color: #f57c00;
                border-color: #f57c00;
            }

                body .navbar-inverse .container button#btnSysSetting.active,
                body .navbar-inverse .container button#btnSysSetting:hover {
                    background-color: #ffe3c6;
                    box-shadow: 0 0 5px #f57c00;
                    color: #f57c00;
                    border-color: #f57c00;
                }

            body .navbar-inverse .container button#btnGenerateRow {
                background-color: #4fc3f7;
                border-color: #297da3;
            }

                body .navbar-inverse .container button#btnGenerateRow.active,
                body .navbar-inverse .container button#btnGenerateRow:hover {
                    background-color: #e4f6ff;
                    box-shadow: 0 0 5px #297da3;
                    color: #4fc3f7;
                }

            body .navbar-inverse .container button#btnProcess {
                background-color: #786cbf;
                border-color: #3c346a;
            }

                body .navbar-inverse .container button#btnProcess.active,
                body .navbar-inverse .container button#btnProcess:hover {
                    background-color: #c7c0f1;
                    box-shadow: 0 0 5px #3c346a;
                    color: #786cbf;
                }

            body .navbar-inverse .container button#btnPassGenerator {
                background-color: #6cbfa8;
                border-color: #4eb195;
            }

                body .navbar-inverse .container button#btnPassGenerator.active,
                body .navbar-inverse .container button#btnPassGenerator:hover {
                    background-color: #c7c0f1;
                    box-shadow: 0 0 5px #4eb195;
                    color: #6cbfa8;
                }

            body .navbar-inverse .container button#btnListReplace {
                background-color: #ce93d8;
                border-color: #9b49a9;
            }

                body .navbar-inverse .container button#btnListReplace.active,
                body .navbar-inverse .container button#btnListReplace:hover {
                    background-color: #f3dcf7;
                    box-shadow: 0 0 5px #9b49a9;
                    color: #ce93d8;
                }

            body .navbar-inverse .container button#btnNote {
                background-color: #e7be43;
                border-color: #b9921d;
            }

                body .navbar-inverse .container button#btnNote.active,
                body .navbar-inverse .container button#btnNote:hover {
                    background-color: #fff5d7;
                    box-shadow: 0 0 5px #b9921d;
                    color: #e7be43;
                }

            body .navbar-inverse .container button#btnLogin {
                background-color: white;
                border-color: #263238;
                color: #263238;
            }

                body .navbar-inverse .container button#btnLogin.active,
                body .navbar-inverse .container button#btnLogin:hover {
                    background-color: #e7e7e7;
                    box-shadow: 0 0 5px #263238;
                    color: #263238;
                }

            body .navbar-inverse .container button#btnJson {
                background-color: #df4f2b;
                border-color: #df4f2b;
                color: white;
            }

                body .navbar-inverse .container button#btnJson.active,
                body .navbar-inverse .container button#btnJson:hover {
                    background-color: #e7e7e7;
                    box-shadow: 0 0 5px #df4f2b;
                    color: #df4f2b;
                }

                    body .navbar-inverse .container button#btnJson:hover path {
                        fill: #df4f2b;
                    }

            body .navbar-inverse .container button.active,
            body .navbar-inverse .container button:hover {
                background-color: #efededf0 !important;
                box-shadow: 0 0 9px #ededed !important;
            }

    body #MainContent.hide-history .col-history {
        display: none;
    }

    body #MainContent.hide-history .col-replace-body,
    body #MainContent .Content-Box-Note {
        /* width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 100%;*/
        padding: 0 5px;
    }

    body .body-content #ReplaceHistory {
        overflow: hidden;
        overflow-y: scroll;
        min-height: 600px;
        border: 1px solid #cacaca;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding: 5px;
        margin-top: 5px;
    }

        body .body-content #ReplaceHistory .history-row:nth-child(Even) {
            background-color: #cacaca;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        body .body-content #ReplaceHistory .history-row label {
            margin: 0;
            padding: 2px;
        }

    body .body-content .b-b-1px {
        border-bottom: 1px solid #cacaca;
    }

    body .body-content .head {
        font-size: 21px;
    }

        body .body-content svg.ico,
        body .body-content .head svg {
            width: 21px;
            height: 21px;
            vertical-align: middle;
            margin: 0;
        }

    body .body-content .col-xs-9 {
        padding: 0 15px 0 0;
    }

    body .body-content .Content-Box .row {
        margin: 0;
    }

        body .body-content .Content-Box .row .col-xs-1, body .body-content .Content-Box .row .col-xs-2, body .body-content .Content-Box .row .col-xs-3, body .body-content .Content-Box .row .col-xs-4, body .body-content .Content-Box .row .col-xs-5, body .body-content .Content-Box .row .col-xs-6, body .body-content .Content-Box .row .col-xs-7, body .body-content .Content-Box .row .col-xs-8, body .body-content .Content-Box .row .col-xs-9, body .body-content .Content-Box .row .col-xs-10, body .body-content .Content-Box .row .col-xs-11, body .body-content .Content-Box .row .col-xs-12 {
            padding: 5px;
        }

    body .body-content .Content-Box textarea {
        min-height: 235px;
    }

        body #ListReplace_Except_List .content,
        body .body-content .Content-Box textarea#aListReplace_Format {
            min-height: 175px;
            height: 175px;
        }

    body .body-content .Content-Box textarea {
        width: 100%;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border: 1px solid #cacaca;
        outline: unset !important;
        resize: both;
        overflow: auto;
        white-space: nowrap !important;
    }

        body .body-content .Content-Box textarea#atxtGenerateRow_Result {
            min-height: 350px;
            height: 600px;
            background-color: #e4f6ff;
        }

        body .body-content .Content-Box textarea#atxtListReplace_Result {
            min-height: 300px;
            height: 535px;
        }

        body .body-content .Content-Box textarea#aListReplace_Format, body .body-content .Content-Box textarea#atxtListReplace_Result {
            background-color: #fcedff;
        }

        body .body-content .Content-Box textarea#atxtSingleReplace_Value, body .body-content .Content-Box textarea#atxtSingleReplace_Result {
            background-color: #eef7ef;
        }

        body .body-content .Content-Box textarea#atxtNote {
            height: calc(100vh - 240px);
            height: 555px;
            margin-top: 15px;
            resize: none;
            background-color: #fff6dc;
        }

    body .body-content .Content-Box #divSingleReplace_DateTimeFormats {
        white-space: nowrap;
        overflow-x: auto;
        background-color: #cacaca;
        padding: 3px 10px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

        body .body-content .Content-Box #divSingleReplace_DateTimeFormats label {
            margin: 0 5px;
            background-color: #f57c00;
            padding: 0 5px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }

    body .body-content .Content-Box .txt {
        width: 100%;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border: 1px solid #cacaca;
        outline: unset !important;
    }

        body .body-content .Content-Box .txt:hover, body .body-content .Content-Box .txt:active, body .body-content .Content-Box .txt:focus {
            border-color: darkblue;
        }

    body .body-content .Content-Box button {
        width: 100%;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

        body .body-content .Content-Box button#btnJsonConnvert {
            width: auto;
            display: block;
            margin: 0 auto;
            background-color: #7fc182;
            border: 1px solid #43a047;
            color: white;
        }

    body .body-content #ListReplace button {
        width: auto;
        vertical-align: middle;
    }

        body .body-content #ListReplace button.btnAdd {
            width: auto;
            vertical-align: middle;
            position: absolute;
            right: 5px;
            top: 10px;
            height: 333px;
            backdrop-filter: blur(11px);
            -webkit-backdrop-filter: blur(11px);
            background-color: #66a968c2;
            border-radius: 0 8px 8px 0;
            -moz-border-radius: 0 8px 8px 0;
            -webkit-border-radius: 0 8px 8px 0;
        }

            body .body-content #ListReplace button.btnAdd svg {
                font-size: 45px;
                padding: 8px;
                border: 8px double #cacaca;
                border-radius: 50%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
            }

    body .body-content #ListReplace #btnListReplace_Replace {
        margin-top: -5px;
        background-color: #7fc182;
        border: 1px solid #43a047;
        color: white;
        display: block;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 5px;
        width: 200px;
        padding: 10px 15px;
    }

    body .body-content .Content-Box#SingleReplace button {
        background-color: #7fc182;
        color: white;
        outline: unset;
        padding: 5px;
        border: 1px solid #43a047;
    }

        body .body-content .Content-Box#SingleReplace button:hover {
            box-shadow: 0 0 5px #43a047;
        }

        body .body-content .Content-Box#SingleReplace button#btnSingleReplace_CompressCss,
        body .body-content .Content-Box#SingleReplace button#btnCompressAsSingleLine,
        body .body-content .Content-Box#SingleReplace button#btnDeleteEmptyLines,
        body .body-content .Content-Box#SingleReplace button.btn-ctrls {
            width: auto;
            margin: 3px 0;
        }

    body .body-content .Content-Box#GenerateRow button {
        background-color: #4fc3f7;
        color: white;
        outline: unset;
        padding: 5px;
        border: 1px solid #297da3;
    }

        body .body-content .Content-Box#GenerateRow button:hover {
            box-shadow: 0 0 5px #4fc3f7;
        }

    body .body-content .fa-gear {
        font-size: 19px;
        vertical-align: text-bottom;
        cursor: pointer;
    }

    body .body-content .fa-trash-can {
        color: orangered;
        cursor: pointer;
        float: right;
        margin-top: 3px;
    }

    body .body-content button .fa-trash-can {
        float: unset;
    }

    body .body-content .fa-plus {
        color: #88d988;
        cursor: pointer;
        margin-top: 3px;
    }

    body .body-content .fa-check,
    body .body-content .fa-check-double {
        color: #88d988;
        cursor: pointer;
        margin-top: 3px;
    }

    body .body-content .ico-close {
        color: orangered;
        cursor: pointer;
        margin-top: 3px;
    }

    body .body-content .fa-copy {
        cursor: pointer;
        color: white;
    }

    body .body-content #box-Replace-Setting,
    body .body-content #box-List-Replace-Setting,
    body .body-content #box-GenerateRow-Setting,
    body .body-content #box-Process-Setting,
    body #SysSetting {
        border: 1px solid #cacaca;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        padding: 5px;
        margin-bottom: 5px;
        background-color: #dcdcff;
    }

        body .body-content #box-Replace-Setting label,
        body .body-content #box-List-Replace-Setting label,
        body .body-content #box-GenerateRow-Setting label,
        body .body-content #box-Process-Setting label,
        body #SysSetting label {
            color: #84685a;
            margin: 0;
            vertical-align: middle;
        }

        body .body-content #box-Replace-Setting label {
            margin: 0;
            vertical-align: middle;
        }

        body .body-content #box-Replace-Setting input {
            vertical-align: middle;
        }

    body .body-content .box-hidable-setting button {
        width: auto;
        vertical-align: middle;
    }

    body .required:before {
        content: '*';
        color: red;
    }

    body .emp-space {
        padding: 10px;
    }

    body .divider {
    }

    body .m-r-10px-imp {
        margin-right: 10px !important;
    }

.color-setting {
    color: #6464c1;
    color: #dcdcff;
}

#divLoading {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #81818159;
    z-index: 50000000000;
    text-align: center;
}

    #divLoading #content {
        display: inline-block;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        padding: 2px 5px;
        box-shadow: 0 0 5px black;
        margin-top: calc(50vh - 50px);
    }

        #divLoading #content svg {
            width: 100px;
            height: 100px;
            margin-top: 3px;
        }

body #ListReplace .row-cols {
    overflow-x: scroll;
    white-space: nowrap;
    border: 1px solid #cacaca;
    margin-top: 5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding-right: 95px;
}

    body #ListReplace .row-cols .box {
        width: 150px;
        display: inline-block;
        margin: 0 5px;
    }

        body #ListReplace .row-cols .box .btnActiveList {
            margin-left: 15px;
        }

        body #ListReplace .row-cols .box .btnDeleteList {
            margin-left: 15px;
            float: unset;
        }

        body #ListReplace .row-cols .box .txt {
            display: block;
            margin-bottom: 3px;
            width: 100%;
        }

        body #ListReplace .row-cols .box textarea {
            height: 230px;
            min-height: 230px;
        }

        body #ListReplace .row-cols .box.active input,
        body #ListReplace .row-cols .box.active textarea {
            background-color: #e5f9fd;
        }

        body #ListReplace .row-cols .box .line-cnt {
        }


/*        body #ListReplace .row-cols .box.active label.lblName:before {
            content: '*';
            color: red;
            margin: 0 3px;
        }*/

body #ListReplace #box-List-Replace-Setting button.btnAdd {
    background-color: #57994f;
    color: white;
    border: 1px solid #57994f;
}

body #ListReplace #box-List-Replace-Setting button.btnDelete {
    background-color: orangered;
    color: white;
    border: 1px solid orangered;
}

    body #ListReplace #box-List-Replace-Setting button.btnDelete svg {
        color: white;
    }

body #ListReplace_ExpManagement {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    backdrop-filter: blur(10px);
    background-color: #3c3c3cb8;
}

    body #ListReplace_ExpManagement label {
        color: black;
        margin: 0;
        vertical-align: middle;
    }

    body #ListReplace_ExpManagement .head,
    body #ListReplace_ExpManagement .content {
        width: 60%;
        min-width: 360px;
        max-width: 1024px;
        background-color: white;
        margin: 0 auto;
        padding: 10px;
        box-shadow: 0 0 16px #8f8f8f;
        -moz-box-shadow: 0 0 16px #8f8f8f;
        -webkit-box-shadow: 0 0 16px #8f8f8f;
    }

    body #ListReplace_ExpManagement .head {
        margin: 25px auto 0 auto;
        border-radius: 10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
        background-color: #1a1a1a;
        color: white;
    }

        body #ListReplace_ExpManagement .head h4 {
            margin: 0;
        }

    body #ListReplace_ExpManagement .content {
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
    }

        body #ListReplace_ExpManagement .content textarea {
            min-height: 115px;
            max-height: calc(100vh - 300px);
        }

        body #ListReplace_ExpManagement .content input,
        body #ListReplace_ExpManagement .content textarea {
            margin-bottom: 10px;
        }

    body #ListReplace_ExpManagement .box-buttons {
        margin-top: 25px;
    }

body #ListReplace .col-xs-7 .fa-trash-can {
    float: unset;
    margin-left: 15px;
}

body #ListReplace_Except_List {
}

    body #ListReplace_Except_List .header {
        color: white;
        padding-bottom: 5px;
    }

    body #ListReplace_Except_List .content {
        padding: 5px;
        border: 1px solid #fcedff;
        overflow: auto;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

        body #ListReplace_Except_List .content .row-exp {
            padding: 5px 0;
            margin-bottom: 10px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }

            body #ListReplace_Except_List .content .row-exp.active {
                background-color: #48695b !important;
            }

            body #ListReplace_Except_List .content .row-exp:nth-child(Even) {
                background-color: #cacaca59;
            }

        body #ListReplace_Except_List .content .lbl {
            width: 60px;
            text-align: right;
            margin: 5px;
        }

        body #ListReplace_Except_List .content input {
            width: calc(100% - 95px);
        }

        body #ListReplace_Except_List .content .fa-trash-can {
            margin-top: 5px;
            margin-right: 5px;
        }

        body #ListReplace_Except_List .content .fa-xmark,
        body #ListReplace_Except_List .content .fa-check {
            cursor: pointer;
        }

        body #ListReplace_Except_List .content .row-exp.active .fa-xmark,
        body #ListReplace_Except_List .content .fa-check {
            float: right;
            margin-top: -21px;
            margin-right: 4px;
            display: inline-block;
        }

        body #ListReplace_Except_List .content .fa-xmark,
        body #ListReplace_Except_List .content .row-exp.active .fa-check {
            display: none;
        }

        body #ListReplace_Except_List .content .row-exp.active .fa-xmark {
            margin-right: 3px;
            padding: 2px 4px;
            color: orangered;
        }

body .box-buttons {
}

    body .box-buttons .btnCancel {
    }

    body .box-buttons .btnConfirm {
        float: right;
    }

        body .box-buttons .btnConfirm svg {
            color: white;
        }


body .btn {
    padding: 4px 10px;
    color: white;
    background-color: #66a968;
    border: 1px solid #66a968;
    outline: unset !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

    body .btn.btnCancel {
        background-color: orangered;
        border: 1px solid orangered;
    }

    body .btn.btnExcept {
        background-color: orange;
        border: 1px solid orange;
    }

    body .btn:focus,
    body .btn:hover {
        color: white;
    }

    body .btn:hover {
        box-shadow: 0 0 5px #cacaca;
        -moz-box-shadow: 0 0 5px #cacaca;
        -webkit-box-shadow: 0 0 5px #cacaca;
    }

body #div-Messages {
    min-height: 75px;
    width: 300px;
    display: block;
    position: fixed;
    background-color: red;
    z-index: 20000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 auto;
    padding: 5px;
    box-shadow: 0 0 5px #989898;
}

body input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    margin-bottom: 1px;
}



body #Process .processes-list {
    height: 534px;
    padding: 0;
}

    body #Process .processes-list .head label {
        font-size: 14px;
    }

    body #Process .processes-list #btnProcess_Start {
        margin-top: 5px;
    }

    body #Process .processes-list .content {
        border: 1px solid #cacaca;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 5px;
        height: 465px;
        overflow: auto;
    }

        body #Process .processes-list .content .grp {
            min-height: 75px;
            background-color: #cfcfcf45;
            backdrop-filter: blur(9px);
            padding-top: 4px;
            margin-bottom: 5px;
            padding-bottom: 10px;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

            body #Process .processes-list .content .grp .fa-angle-down {
                float: right;
                margin-right: 2px;
                padding: 2px 4px;
                background-color: white;
                color: black;
                margin-top: 1px;
                cursor: pointer;
                border-radius: 3px;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
            }

            body #Process .processes-list .content .grp .fa-trash-can {
                padding: 2px 4px 3px 3px;
                margin-top: 1px;
                cursor: pointer;
                color: red;
                border-radius: 3px;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                margin-left: 9px;
            }

            body #Process .processes-list .content .grp .row .fa-trash-can {
                margin-right: 3px;
            }

            body #Process .processes-list .content .grp.mini {
                padding-bottom: 2px;
                min-height: unset;
            }

                body #Process .processes-list .content .grp.mini .row {
                    border: unset;
                }

                body #Process .processes-list .content .grp.mini .ProcessLvl {
                    display: none;
                }


            body #Process .processes-list .content .grp .row {
                text-align: center;
                color: white;
                border-bottom: 1px solid #cacaca;
                padding-bottom: 3px;
                margin-bottom: 8px;
            }

                body #Process .processes-list .content .grp .row label {
                    margin: 0;
                }


                body #Process .processes-list .content .grp .row input {
                    background-color: #545c61;
                    outline: unset !important;
                    border: unset;
                    text-align: center;
                    font-size: 15px;
                    font-family: vazir;
                    width: calc(100% - 35px);
                    width: 100%;
                }

                    body #Process .processes-list .content .grp .row input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                        color: white;
                        opacity: 1; /* Firefox */
                    }

                    body #Process .processes-list .content .grp .row input:-ms-input-placeholder { /* Internet Explorer 10-11 */
                        color: white;
                    }

                    body #Process .processes-list .content .grp .row input::-ms-input-placeholder { /* Microsoft Edge */
                        color: white;
                    }

                body #Process .processes-list .content .grp .row .ico-check,
                body #Process .processes-list .content .grp .row .ico-close {
                    margin-top: -4px;
                    vertical-align: middle;
                }

                body #Process .processes-list .content .grp .row .ico-check {
                    display: none !important;
                }

                body #Process .processes-list .content .grp .row .ico-close {
                    display: inline-block !important;
                }

            body #Process .processes-list .content .grp.active .row .ico-check {
                display: inline-block !important;
            }

            body #Process .processes-list .content .grp.active .row .ico-close {
                display: none !important;
            }

            body #Process .processes-list .content .grp.active {
                background-color: #a4ffb745;
            }

                body #Process .processes-list .content .grp.active .row input {
                    background-color: #48695b;
                }


        body #Process .processes-list .content .ProcessLvl {
            padding: 5px 8px 5px 8px;
        }

            body #Process .processes-list .content .ProcessLvl .fa-sort-down {
                vertical-align: middle;
                margin: 0;
                margin-top: -6px;
                margin-left: 3px;
            }

            body #Process .processes-list .content .ProcessLvl:nth-child(Odd) {
                background-color: #d3d3d338;
            }

            body #Process .processes-list .content .ProcessLvl .lvlContent {
                padding: 5px;
                border: 1px solid #cacaca;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
            }

            body #Process .processes-list .content .ProcessLvl label {
                cursor: pointer;
                margin: 0;
            }

                body #Process .processes-list .content .ProcessLvl label.lblCheckBox {
                    margin: 0 4px;
                    vertical-align: middle;
                }

        body #Process .processes-list .content pre {
            min-height: 25px;
            padding: 5px;
        }


    body #Process .processes-list .fa-check,
    body #Process .processes-list .fa-check-double,
    body #Process .processes-list .ico-close {
        padding: 3px 4px;
        margin: 0;
        vertical-align: middle;
    }



/* width */
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

/* Track */
*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #ffffff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

/* Handle */
*::-webkit-scrollbar-thumb {
    background: #f57c00;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}



body #Process button {
    background-color: #7fc182;
    color: white;
    outline: unset;
    padding: 5px;
    border: 1px solid #43a047;
}

    body #Process button:hover {
        box-shadow: 0 0 5px #43a047;
    }

    body #Process button svg {
        color: white;
    }

body #Process .Process_AddToLevels {
    border: 1px solid #cacaca;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

    body #Process .Process_AddToLevels .head {
        font-size: unset;
    }

        body #Process .Process_AddToLevels .head label {
            margin: 0 !important;
            font-size: 14px;
            font-weight: normal;
            vertical-align: middle;
            top: unset;
            position: relative;
            display: inline-block;
        }

            body #Process .Process_AddToLevels .head label svg {
                margin: 0;
                font-size: 14px;
                font-weight: normal;
                width: 14px;
                height: 14px;
            }

    body #Process .Process_AddToLevels .content {
        /*text-align: center;*/
    }

        body #Process .Process_AddToLevels .content button {
            margin: 5px;
            width: 45%;
        }



body #PassGenerator {
    padding: 0 10px;
}

    body #PassGenerator #txt_GeneratePassword {
        margin-top: 25px;
        width: 100%;
        margin-bottom: 10px;
        font-size: 30px;
        text-align: center;
        border: 1px solid #cacaca;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        outline: unset !important;
        padding-right: 50px;
    }

    body #PassGenerator .btn.btnConfirm {
        width: 160px;
    }

    body #PassGenerator .btn.btnCopy {
        width: auto;
        background-color: white;
        border-color: transparent;
        margin: 0;
        position: absolute;
        margin-top: 25px;
        font-size: 25px;
        right: 15px;
    }

        body #PassGenerator .btn.btnCopy * {
            color: black;
        }

    body #PassGenerator .box-option {
        padding: 10px;
        font-size: 18px;
        border: 1px solid #cacaca;
        margin-top: 20px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

        body #PassGenerator .box-option div {
            margin-bottom: 15px;
        }

            body #PassGenerator .box-option div:last-child {
                margin-bottom: unset;
            }

        body #PassGenerator .box-option input[type='number'] {
            width: 75px;
        }

        body #PassGenerator .box-option * {
        }

            body #PassGenerator .box-option *:hover {
                opacity: 1; /* Fully shown on mouse-over */
            }

        body #PassGenerator .box-option input[type=range] {
            display: inline-block;
            width: calc(100% - 80px);
            vertical-align: middle;
            /**/
            -webkit-appearance: none; /* Override default CSS styles */
            appearance: none;
            height: 29px; /* Specified height */
            background: #d3d3d3; /* Grey background */
            outline: none; /* Remove outline */
            -webkit-transition: .2s; /* 0.2 seconds transition on hover */
            transition: opacity .2s;
            margin-top: -2px;
            padding: 1px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }


            body #PassGenerator .box-option input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none; /* Override default look */
                appearance: none;
                width: 25px; /* Set a specific slider handle width */
                height: 25px; /* Slider handle height */
                background: #04AA6D; /* Green background */
                cursor: pointer; /* Cursor on hover */
                border-radius: 25px;
                -moz-border-radius: 25px;
                -webkit-border-radius: 25px;
            }

            body #PassGenerator .box-option input[type=range]::-moz-range-thumb {
                width: 25px; /* Set a specific slider handle width */
                height: 25px; /* Slider handle height */
                background: #04AA6D; /* Green background */
                cursor: pointer; /* Cursor on hover */
                border-radius: 25px;
                -moz-border-radius: 25px;
                -webkit-border-radius: 25px;
            }

        body #PassGenerator .box-option .chk {
            width: 20px;
            height: 20px;
            margin: 0;
            vertical-align: middle;
            cursor: pointer;
        }

        body #PassGenerator .box-option .lblCheckBox {
            margin: 0;
            vertical-align: middle;
            cursor: pointer;
        }





body #Json {
    padding: 0 10px;
}

    body #Json .box-cols {
        padding: 5px;
        border: 1px solid #cacaca;
        margin-top: 15px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

        body #Json .box-cols .head {
            border-bottom: 1px solid #cacaca;
            margin-bottom: 5px;
        }

            body #Json .box-cols .head label {
                margin: 0;
            }

        body #Json .box-cols #boxTableCols {
            overflow: auto;
            height: 400px;
        }

            body #Json .box-cols #boxTableCols .br {
            }

                body #Json .box-cols #boxTableCols .br input {
                }

                body #Json .box-cols #boxTableCols .br label {
                }

    body #Json .boxJsonTable {
        margin-top: 15px;
        border: 1px solid #cacaca;
        padding: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

        body #Json .boxJsonTable .head {
            border-bottom: 1px solid #cacaca;
            margin-bottom: 5px;
        }

            body #Json .boxJsonTable .head label {
                margin: 0;
            }

        body #Json .boxJsonTable #divJsonTable {
            overflow: auto;
            height: 400px;
        }

    body #Json .row {
        margin: 0;
    }

        body #Json .row .col-md-4,
        body #Json .row .col-md-8,
        body #Json .row .col-md-12 {
            padding: 5px;
        }

    body #Json #btnJsonConvertToTable {
        background-color: #7fc182;
        color: white;
        outline: unset;
        padding: 5px;
        border: 1px solid #43a047;
        width: 235px;
        margin: 0 auto;
        display: block;
    }

        body #Json #btnJsonConvertToTable:hover {
            box-shadow: 0 0 5px #43a047;
            -moz-box-shadow: 0 0 5px #43a047;
            -webkit-box-shadow: 0 0 5px #43a047;
        }

    body #Json #atxtJson_Value {
        white-space: break-spaces !important;
    }


body #divJsonTable table {
    background-color: white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

    body #divJsonTable table thead {
        position: sticky;
        z-index: 1;
        top: 0;
    }

        body #divJsonTable table thead th {
            text-align: center;
            background-color: #000000;
            color: white;
        }

        body #divJsonTable table thead th,
        body #divJsonTable table tbody td {
            padding: 5px 15px;
            border: 1px solid #cacaca;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 400px;
        }

    body #divJsonTable table tbody tr:nth-child(Even) {
        background-color: #f1f1f1;
    }

body #btnLySave {
    position: fixed;
    bottom: 15px;
    right: 15px;
    font-size: 30px;
    padding: 5px 14px;
    background-color: #4e98d7;
    border: 1px solid #4e98d7;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

    body #btnLySave svg {
    }







.d-none-imp {
    display: none !important;
}

.m-b-10px {
    margin-bottom: 10px;
}

.m-0 {
    margin: 0;
}

.m-r-15px {
    margin-right: 15px;
}

.m-t-5px {
    margin-top: 5px;
}

.p-0-imp {
    padding: 0 !important;
}

.p-r-l-5px-imp {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.float-left {
    float: left;
}

.cursor-pointer {
    cursor: pointer;
}

.no-resize {
    resize: unset !important;
}
/*===============================================================================*/
/*===============================================================================*/
/*===============================================================================*/
/*===============================================================================*/
/*===============================================================================*/
/*===============================================================================*/
@media screen and (max-width:992px) {
    body .navbar-inverse .container .btns {
        margin: 0;
        text-align: center;
    }

    body #Process .col-xs-2,
    body #Process .col-xs-3 {
        width: 50%;
        min-width: 0;
        flex: 0 0 50%;
        max-width: 100%;
    }

    body #Process .col-xs-12 {
        display: block !important;
    }

    body #Process .col-xs-7 {
        width: 100%;
        min-width: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    body #Process .btnProcess_Start {
        display: inline-block !important;
        margin-bottom: 27px;
        padding: 13px;
    }

    body #Process #btnProcess_Start {
        display: none !important;
    }


    body #ListReplace .col-xs-4,
    body #ListReplace .col-xs-8 {
        min-width: 0;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    body #ListReplace_Except_List .content,
    body .body-content .Content-Box #ReplaceHistory,
    body .body-content .Content-Box textarea {
        min-height: 300px !important;
        height: 300px !important;
        max-height: 300px !important;
    }

    body .body-content #ListReplace #btnListReplace_Replace {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 25px;
    }
}

@media screen and (max-width:768px) {
    #MainContent .col-xs-1, #MainContent .col-xs-2, #MainContent .col-xs-3, #MainContent .col-xs-4, #MainContent .col-xs-5, #MainContent .col-xs-6, #MainContent .col-xs-7, #MainContent .col-xs-8, #MainContent .col-xs-9, #MainContent .col-xs-10, #MainContent .col-xs-11, #MainContent .col-xs-12, /**/ #SingleReplace .col-xs-1, #SingleReplace .col-xs-2, #SingleReplace .col-xs-3, #SingleReplace .col-xs-4, #SingleReplace .col-xs-5, #SingleReplace .col-xs-6, #SingleReplace .col-xs-7, #SingleReplace .col-xs-8, #SingleReplace .col-xs-9, #SingleReplace .col-xs-10, #SingleReplace .col-xs-11, #SingleReplace .col-xs-12, /**/ #GenerateRow .col-xs-1, #GenerateRow .col-xs-2, #GenerateRow .col-xs-3, #GenerateRow .col-xs-4, #GenerateRow .col-xs-5, #GenerateRow .col-xs-6, #GenerateRow .col-xs-7, #GenerateRow .col-xs-8, #GenerateRow .col-xs-9, #GenerateRow .col-xs-10, #GenerateRow .col-xs-11, #GenerateRow .col-xs-12, /**/ #ListReplace .col-xs-1, #ListReplace .col-xs-2, #ListReplace .col-xs-3, #ListReplace .col-xs-4, #ListReplace .col-xs-5, #ListReplace .col-xs-6, #ListReplace .col-xs-7, #ListReplace .col-xs-8, #ListReplace .col-xs-9, #ListReplace .col-xs-10, #ListReplace .col-xs-11, #ListReplace .col-xs-12 {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 0 0 100%;
    }

    body .body-content .col-xs-9 {
        padding: 0 15px;
    }

    body .body-content #ReplaceHistory, body .body-content .Content-Box textarea#atxtGenerateRow_Result,
    body .body-content .Content-Box textarea, body .body-content .Content-Box textarea#atxtListReplace_Result {
        min-height: 300px;
        height: 500px;
    }

    #SingleReplace {
        margin-top: 15px;
    }

    body .navbar-inverse .container {
        text-align: center;
    }

        body .navbar-inverse .container button {
            min-width: 0;
        }
}

@media screen and (max-width:560px) {
    body .navbar-inverse .container button {
        /*width: 100%;*/
        margin: 3px 0;
    }

    body #Process .col-xs-2,
    body #Process .col-xs-3,
    body #Process .col-xs-7 {
        width: 100%;
        min-width: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width:425px) {
    body .body-content #box-List-Replace-Setting button {
        width: 100%;
        margin: 3px 0;
    }
}