@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Vazir.eot');
    src: url('/fonts/Vazir.eot?#iefix') format('embedded-opentype'), url('/fonts/Vazir.woff2') format('woff2'), url('/fonts/Vazir.woff') format('woff'), url('/fonts/Vazir.ttf') format('truetype');
}



* :not(.e-icons,.e-rte-content *,.text-editor *, i, .rz-html-editor *) {
    font-family: 'Vazir' !important;
    /*font-size: 13px !important;*/
    /*unicode-bidi: plaintext;*/
}

/*#region IconCss */
.icon-steps {
    content: url('/img/64/steps.png');
}

.icon-add {
    content: url('/img/64/add.png');
    width: 15px;
    height: 15px;
    margin: auto;
}

.icon-add-Temp {
    content: url('/img/64/addTemp.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

.icon-edit {
    content: url('/img/64/edit.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

.icon-delete {
    content: url('/img/64/delete.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}


.icon-copyrow {
    content: url('/img/64/copyrow.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

.icon-copyrowheader {
    content: url('/img/64/copyrowheader.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

.icon-resetpass {
    content: url('/img/64/c-access.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

.icon-access {
    content: url('/img/64/key.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

.icon-note {
    content: url('/img/64/note.png');
    min-width: 15px;
    height: 15px;
    margin: auto;
}

/*#endregion IconCss*/

.btn-toolbar {
    background-color: whitesmoke;
    border: 1px solid silver;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    gap: 5px;
    white-space: nowrap;
}

    .btn-toolbar:hover {
        background-color: azure;
    }

    .btn-toolbar:active {
        background-color: white;
    }

.btn-grid {
    margin-right: 3px;
    height: 100% !important;
}

    .btn-grid span {
        /*min-height: 48px !important;*/
        font-size: 14px !important;
        font-weight: bold;
        text-align: center;
        padding: 13px 0;
    }

.active-button {
    background-color: white;
}

.gridtab-header {
    display: flex;
    gap: 5px;
    align-items: center;
}

    .gridtab-header img {
        opacity: 0.7;
        width: 17px;
        height: 17px;
    }

    .gridtab-header span {
        color: dimgray;
        font-size: 13px;
    }

    .gridtab-header .page-name {
        color: indianred;
    }

.form {
    background-color: #fcfdfe;
    border: 1px solid silver;
    /*font-size: 13px !important;*/
    border-radius: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    /*background-color: red;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

    .form hr {
        margin: 5px 0;
        /*margin: 0;*/
    }

    .form .form-header {
        /*background-color: silver;*/
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .form .form-body {
        height: 100%;
        overflow: auto;
        padding: 10px;
        margin-top: 5px;
        background-color: whitesmoke;
        border: 1px solid silver;
        border-radius: 5px;
    }

        .form .form-body .row {
            padding: 10px !important;
            border: 1px solid silver;
            border-radius: 10px;
        }

        .form .form-body div .box {
            display: flex;
            flex-direction: column;
            gap: 7px;
            padding-top: 10px;
            flex: 1;
        }

            .form .form-body div .box > div {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .form .form-body div .box div label {
                color: darkblue;
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 12px !important;
                white-space: nowrap;
            }

                .form .form-body div .box div label span {
                    color: orangered;
                }


.page-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: auto;
    max-height: 100%;
    padding: 10px;
}

    .page-info button {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid silver;
        min-width: 80px;
        height: 80px;
    }

        .page-info button:hover {
            background-color: white;
        }

        .page-info button:active {
            background-color: whitesmoke;
        }

        .page-info button img {
            width: 30px;
            height: 30px;
            opacity: 0.8;
        }

        .page-info button span {
            font-size: 12px !important;
            white-space: nowrap;
        }

.reload {
    color: blue !important;
}

    .reload:hover {
        color: darkblue !important;
    }


.lockScreen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 998;
    background-color: #f8f8f8;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/*.myModal {
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
    resize: none;*/
/*overflow: auto;*/
/*border-radius: 10px;
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    margin: auto;*/
/*  position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;*/
/*}

    .myModal .dragHeader {
        padding: 10px;
        cursor: move;
        z-index: 10;
        background-color: darkslateblue;
        color: #fff;
        text-align: left;
        padding-left: 15px;
        border-radius: 10px 10px 0 0;*/
/*        position: absolute;
        top: 0;
        left: 0;
        right: 0;*/
/*height: 40px;
    }

        .myModal .dragHeader i {
            cursor: pointer;
        }

            .myModal .dragHeader i:hover {
                color: silver;
            }

        .myModal .dragHeader span {
            float: right;
            margin-right: 10px;
            font-size: 13px !important;
        }

    .myModal .modalBody {*/
/*       position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;*/
/*direction: rtl;
        height:100%;
        flex:1;
    }*/
.myModal {
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
    resize: both;
    /*overflow: auto;*/
    border-radius: 10px;
    min-height: 100px;
    min-width: 100px;
    position: absolute;
    display: flex;
    flex-direction: column;
}

    .myModal .dragHeader {
        padding: 10px;
        cursor: move;
        z-index: 10;
        background-color: darkslateblue;
        border-radius: 10px 10px 0 0;
        color: #fff;
        text-align: left;
        padding-left: 15px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
    }

        .myModal .dragHeader i {
            cursor: pointer;
        }

            .myModal .dragHeader i:hover {
                color: silver;
            }

        .myModal .dragHeader span {
            float: right;
            margin-right: 10px;
            font-size: 13px !important;
        }

    .myModal .modalBody {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5px;
        direction: rtl;
    }

.showElement {
    visibility: visible;
}

.hideElement {
    visibility: collapse;
}

.showAnimate {
    transform: scale(1);
    transition: transform 500ms ease 0ms;
}

.hideAnimate {
    transform: scale(0);
    transition: transform 500ms ease 0ms;
}

.z-index-top {
    z-index: 9999;
}
/*#region Resposive width and height */
.W-100 {
    width: 100%;
}

.H-100 {
    height: 100%;
}

.W-95 {
    width: 95%;
}

.H-95 {
    height: 95%;
}

.W-90 {
    width: 90%;
}

.H-90 {
    height: 90%;
}

.W-80 {
    width: 80%;
}

.H-80 {
    height: 80%;
}

.W-70 {
    width: 70%;
}

.H-70 {
    height: 70%;
}

.W-60 {
    width: 60%;
}

.H-60 {
    height: 60%;
}

.W-50 {
    width: 50%;
}

.H-50 {
    height: 50%;
}

.W-45 {
    width: 45%;
}

.H-45 {
    height: 45%;
}

.W-40 {
    width: 40%;
}

.H-40 {
    height: 40%;
}

.W-30 {
    width: 30%;
}

.H-30 {
    height: 30%;
}

.W-25 {
    width: 25%;
}

.H-25 {
    height: 25%;
}

.login-W {
    width: 25%;
}

@media (width <= 1000px) {
    .W-95 {
        width: 98%;
    }

    .H-95 {
        height: 98%;
    }

    .W-80 {
        width: 98%;
    }

    .H-80 {
        height: 98%;
    }

    .W-70 {
        width: 98%;
    }

    .H-70 {
        height: 98%;
    }

    .W-60 {
        width: 98%;
    }

    .H-60 {
        height: 98%;
    }

    .W-50 {
        width: 98%;
    }

    .H-50 {
        height: 98%;
    }

    .W-45 {
        width: 98%;
    }

    .H-45 {
        height: 98%;
    }

    .W-40 {
        width: 98%;
    }

    .H-40 {
        height: 98%;
    }

    .W-30 {
        width: 98%;
    }

    .H-30 {
        height: 98%;
    }

    .W-25 {
        width: 98%;
    }

    .H-25 {
        height: 98%;
    }

    .login-W {
        width: 100%;
    }
}
/*#endregion Resposive width and height*/


.b-color-active {
    background-color: greenyellow !important;
}

.b-color-deactive {
    background-color: orangered !important;
}

.user-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid silver;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
    margin-top: 10px;
}

    .user-image a {
        width: 35px;
        height: 35px;
        margin: auto;
    }

    .user-image img {
        width: 200px;
        aspect-ratio: 1/1;
        object-fit: cover;
        cursor: pointer;
        border: 1px solid #e1e0de;
    }

    .user-image .buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }

        .user-image .buttons a img {
            width: 17px;
            height: 17px;
            margin: auto;
        }

.img-user-sign {
    /*width: 200px;*/
    aspect-ratio: auto !important;
    border-radius: 10px !important;
}

.v-line {
    display: inline;
    height: 100%;
    width: 1px;
    border: 1px inset;
    /*margin: 5px*/
}

.img-circle {
    aspect-ratio: 1/1;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid silver;
    border-radius: 50%;
}

.grid-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .grid-container .grid-header {
        display: flex;
    }

    .grid-container .grid-body {
        flex: 1;
        height: 100%;
        /*overflow:hidden;*/
    }



/*#region Automation */

.cc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.b-add-cc {
    height: fit-content;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 0 3px;
}

    .b-add-cc:hover {
        border: 1px solid silver;
        background-color: whitesmoke;
    }

    .b-add-cc span {
        font-weight: bold;
        color: blue;
    }

.b-del-user {
    /*height: fit-content;*/
    /*border: 1px solid silver;*/
    border-radius: 5px;
    padding: 0 2px !important;
    opacity: 0.8;
}

    .b-del-user span {
        font-weight: bold;
        color: indianred;
        font-size: 12px;
    }

    .b-del-user:hover {
        background-color: whitesmoke;
        opacity: 1;
    }

.receivers {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px !important;
    max-height: 100px;
    overflow: auto;
    border: 2px dotted silver;
    border-radius: 5px;
    padding: 3px;
    background-color: white;
    width: 100%;
    /*max-height: 100vh;*/
    /*background-color: yellow;*/
}

.receiver {
    border: 1px solid silver;
    border-radius: 5px;
    padding: 0 3px;
    /*color: green;*/
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .receiver a img {
        width: 20px;
        height: 20px;
    }
/*#endregion Automation*/

.btn-grid {
    width: 100%;
    border: 1px solid silver;
    border-radius: 5px;
}

    .btn-grid:hover {
        font-weight: bold;
    }

.btn-grid-link {
    width: 100%;
    height: 100%;
    border: 1px solid silver;
    border-radius: 5px;
}

    .btn-grid-link:hover {
        font-weight: bold;
    }


.div-grid {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /*gap: 5px;*/
}

.div-grid-header {
    padding: 10px;
    padding-top: 15px;
    padding-right: 5px;
    min-height: 30px;
    /*background-color: #e9e9e9;*/
    background-color: white;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    border: 1px solid #bbbbbd;
    border-radius: 5px;
}

.div-grid-body {
    flex: 1;
    /*height: 100%;*/
    overflow: hidden;
}

.div-grid-footer {
}

.btn-star img {
    width: 18px;
    height: 18px;
}

    .btn-star img:hover {
        width: 20px;
        height: 20px;
    }