* [disabled] {
    opacity: 0.4;
    pointer-events: none;
}

* [blured] {
    -moz-filter: blur(7px);
    -webkit-filter: blur(7px);
    filter: blur(7px);
}

.DataGrid {
    width: 100%;
    text-align: center;
    border-spacing: 2px;
    border-collapse: separate;
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
    white-space: nowrap;
    background-color: var(--Datagrid-bgColor);
}

    .DataGrid th, tr {
        color: var(--Color);
    }

    .DataGrid thead th {
        top: 0;
        z-index: 200;
        position: sticky;
        background-color: var(--Datagrid-Header-bgColor);
    }
        /*ابزار مرتب سازی - صعودی - نزولی*/
        .DataGrid thead th .oi {
            visibility: collapse;
        }

        .DataGrid thead th:hover .oi {
            visibility: visible;
        }

    .DataGrid tbody td {
        padding: 0 5px;
    }

    .DataGrid tbody tr:nth-child(odd) {
        background: var(--Datagrid-Odd-bgColor);
    }

    .DataGrid tbody tr:nth-child(even) {
        background: var(--Datagrid-Even-bgColor);
    }

    .DataGrid tbody tr {
        cursor: default;
        -moz-transition: 500ms;
        -o-transition: 500ms;
        -webkit-transition: 500ms;
        transition: 500ms;
    }

        .DataGrid tbody tr:hover {
            background: #03A5FF;
        }

        .DataGrid tbody tr.selected {
            /*background-color: #1692d6;*/
            background: rgb(30,103,134);
            background: linear-gradient(180deg, rgba(30,103,134,1) 0%, rgba(13,181,255,1) 47%, rgba(38,106,155,1) 100%);
        }

        .DataGrid tbody tr.MultipleDetect {
            background-color: #dc00fb;
        }

        .DataGrid tbody tr.green {
            color: #fff;
            background: #2bb200;
        }

        .DataGrid tbody tr.red {
            color: #fff;
            background-color: red;
        }

        .DataGrid tbody tr.orange, .DataGrid tbody tr.orange1, .DataGrid tbody tr.orange2 {
            color: #fff;
            background: #a24300;
        }


        .DataGrid tbody tr.GroupParkingLimitReached {
            background-color: #c09132;
        }

    .DataGrid [class^="al-"], .DataGrid [class*=" al-"], .DataGrid [class^="oi-"], .DataGrid [class*=" oi-"] {
        cursor: pointer;
        display: inline-block;
        -moz-transition: 700ms;
        -o-transition: 700ms;
        -webkit-transition: 700ms;
        transition: 700ms;
    }

        .DataGrid [class^="al-"]:hover, .DataGrid [class*=" al-"]:hover, .DataGrid [class^="oi-"]:hover, .DataGrid [class*=" oi-"]:hover {
            color: yellow;
        }

textarea {
    border: none;
    padding: 0 5px;
    border-radius: 5px;
    vertical-align: middle;
    color: var(--Color);
    background-color: var(--Inputs-bgColor);
}

input {
    border: none;
    height: 30px;
    padding: 0 5px;
    border-radius: 5px;
    vertical-align: middle;
    color: var(--Color);
    background-color: var(--Inputs-bgColor);
}

    input:invalid {
        color: var(--Error-Message);
    }

    input[type=text] {
        width: 180px;
    }

    input[type=checkbox] {
        width: 15px;
    }

select {
    border: solid 1px var(--Select-Border-Color);
    height: 30px;
    border-radius: 5px;
    color: var(--Color);
    background-color: var(--Inputs-bgColor);
}

label {
    vertical-align: middle;
}

.dialog {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    /*-moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);*/
    backdrop-filter: blur(10px) saturate(50%) contrast(100%);
    background-color: var(--Dialog-bgColor);
}
fieldset {
    border: 1px solid var(--Color);
    border-radius: 8px;
    padding:10px;
    display: inline-block;
}
legend {
    font-weight:  100;
    font-size:.9em;
    width:auto;
    position: relative;
    display:inline-block;
    padding:0 10px;
    background-color: var(--TopMenu-Tabs-bgColor);
    top: -22px; /* بالا بردن legend روی خط */
}



.spacer2 {
    margin: 2px;
}

.spacer3 {
    margin: 3px;
}

.spacer5 {
    margin: 5px;
}

.spacer10 {
    margin: 10px;
}

.pointer {
    cursor: pointer;
}

.width30 {
    width: 30px;
}

.width50 {
    width: 50px;
}

.width80 {
    width: 80px;
}

.width100 {
    width: 100px;
}

.width120 {
    width: 120px;
}

.width180 {
    width: 180px;
}

.width197 {
    width: 197px !important;
}

.width240 {
    width: 240px;
}

.width300 {
    width: 300px;
}

.Connecting {
    color: var(--Status-Connecting);
}

.Connected {
    color: var(--Status-Connected);
}

.Disconnected {
    color: var(--Status-Disconnected);
}

.Error-msg {
    color: var(--Error-Message);
}

.vertical-center {
    position: absolute;
    top: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.horizontal-center {
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.Croped-Img {
    max-height: 38px;
    display: inline-block;
}

.flipX {
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.flipY {
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
