/* *************css reset**************************************************
*************************************************************
*****************************************************
********************************************
*********************************
*/


/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
* {
    --varg2color1: #021024;
    --varg2color2: #052659;
    --varg2color3: #083a87;
    --varg2color4: #5483b3;
    --varg2color5: #7da0ca;
    --varg2color6: #c1e8ff;
    --varg2color7: #00b0fd;
    --varg2color8: #dcf2fd;
    --varg1color1: #050C9C;
    --varg1color2: #3572EF;
    --varg1color3: #3ABEF9;
    --varg1color4: #A7E6FF;
    --varg1color5: #afbsb7;
    --varg1color6: #5a636a;
}

body {
    text-align: right;
    direction: rtl;
    background-color: #e4f5ff !important;
    /*margin: 0px;
    padding: 0px;
    min-height: 100vh;
    background-color: #f7fbfb;
     background-image: url('/Pic/3122287.webp');
    background-repeat: repeat-x;
    background-size: cover;
    background-image: url('/Pic/pngtree-abstract-white-geometric-volume-hexagonal-decorative-background-in-minimalist-style-picture-image_1329186.jpg');
    color: #000000;
    text-decoration: none;*/
    font-size: 1.3rem !important;
    font: 400 0.8rem;
    font-weight: normal !important;
    font-family: IranYekan,Vazir,IRYekan,IRANSansWeb, 'B Roya',"tahoma", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif !important;
    overflow-x: auto;
}

* {
}
.publicSearchTitle {
    color: #FFFFFF;
    font-size: 15px;
    padding-right: 4px;
    text-shadow: 0px 0px 1px #FFFFFF;
}
.publicSearchTextbox {
    padding: 3px 5px 0px 5px;
    width: 225px;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #666666;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    direction: ltr;
    box-shadow: 0 0 1px #000000;
    opacity: 0.8;
}
    .publicSearchTextbox[title2]:hover::after {
        background-color: black;
        border-radius: 7px;
        content: attr(title2);
        position: absolute;
        top: 100%;
        left: 0;
        color: white;
        padding: 3px;
        border: solid 2px white;
        z-index: 1000;
    }

.lastloginpanel {
    border-radius: 10px;
    border: solid 1px Red;
    padding: 5px;
    background-color: rgb(243 245 150 / 0.89);
}

    .lastloginpanel:hover {
        background-color: rgb(243 245 150 / 0.69);
        text-shadow: 0px 0px 2px #000;
        transform: scale(1.06,1.06);
    }


.input-validation-error {
    background: linear-gradient( #FEF1EC 20%, #f7cae9 100%) !important;
    border: 1px solid #CD0A0A !important;
    color: black !important;
}

.field-validation-error {
    background-color: gold;
    border: 1px solid rgba(255, 169, 8, 0.9) !important;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 7px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
    box-sizing: border-box;
}

[class*="col-"] {
    float: right;
    padding: 1px;
    box-sizing: border-box;
}
/*
.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-9- {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    position: absolute;
    width: 98%;
    left: 1%;
    right: 1%;
    box-shadow: 2px 2px 2px gray;
    padding: 4px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 23px;
}*/

@font-face {
    font-family: BYekan;
    src: url(../fonts/BYekan.eot) format('eot'), url(../fonts/BYekan.woff) format('woff'), url(../fonts/BYekan.ttf) format('truetype');
    font-family: BTitr;
    src: url('../fonts/BTitr.ttf') format('truetype');
   
}
@font-face {
    
    font-family: BNazanin;
    src: url('../fonts/BNazanin.ttf') format('truetype');
    font-family: BNaznnBd;
    src: url('../fonts/BNaznnBd.ttf') format('truetype');
}

@font-face {
    font-family: Digikala;
    src: url(../fonts/digikala/digikala.eot) format('eot'), url(../fonts/digikala/digikala.woff) format('woff'), url(../fonts/digikala/digikala.ttf) format('truetype');
   
}

@font-face {
    font-family: IranYekan;
    src: url(../Fonts/iranyekan/IRANYekan.eot) format('eot'), url(../Fonts/iranyekan/IRANYekan.woff) format('woff'), url(../Fonts/iranyekan/IRANYekan.ttf) format('truetype');
}

@font-face {
    font-family: IRYekan;
    src: url(../Fonts/IRYekan.eot) format('eot'), url(../fonts/IRYekan.woff) format('woff'), url(../fonts/IRYekan.ttf) format('truetype');
    font-family: BTitr;
    src: url('../fonts/BTitr.ttf') format('truetype');
    font-family: Vazir;
    src: url(../Fonts/Vazir-FD-WOL.eot) format('eot'), url(../fonts/Vazir-FD-WOL.woff) format('woff'), url(../fonts/Vazir-FD-WOL.ttf) format('truetype');
    font-family: VazirB;
    src:  url(../fonts/Vazir-Bold-FD-WOL.woff) format('woff');
}
@font-face {
    font-family: IRANSansWeb_Light;
    font-style: normal;
    font-weight: bold;
    src: url('../font/IRANSansWeb_Light.eot');
    src:    url('../fonts/IRANSansWeb_Light.ttf') format('truetype');
}
/*.required-indicator {
    color: red;
    font-size: 1.2em;
    font-weight: bold;
}

input[type=text]:required ::after {
    content: "*";
    color: red;
    font-size: large;
}*/

.tablepay {
    border: solid 2px;
    border-color: blue;
    border-radius: 10px;
    box-shadow: 2px 2px 1px 1px gray;
    border-collapse: inherit;
}

    .tablepay tr td, .tablepay tr th {
        border: solid 1px;
        border-color: blue;
        padding-right: 10px;
        text-align-last: center;
        text-shadow: 1px 1px 1px orange
    }


.IranYekan {
    font-family: IranYekan!important;
}

.IRANSansWeb_Light {
    font-family: IRANSansWeb_Light !important;
}

.canvasjs-chart-canvas {
    font: inherit;
}

html {
    height: 100%;
}


.moadibox {
   
    padding: 5px;
    border: 1px #cde solid;
    margin: 5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
   max-width: 700px;
    max-height: 270px;
    transition-duration: 0.5s;
}

    .moadibox:hover {
        border-color: darkgoldenrod;
        border-radius: 20px;
    }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,  header, hgroup, menu, nav, section {
    display: block;
}

.Headergroupbtn {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: black;
    color: white;
    max-width: 70%;
    text-align: center;
    left: 10%;
    right: 10%;
    position: relative;
    margin-top: 7px;
}

.groupbtn {
    border-radius: 7px;
    border: 2px black solid;
    padding: 2px;
}

.stiJsViewerReportPanel table, .stiMvcViewerReportPanel table, .stiReportPanel table, .stiJsViewerPage table {
    direction: ltr !important
}

.stiJsViewerToolBarTable tbody tr td table, .stiViewerToolBarTable tbody tr td table {
    direction: ltr !important
}



.navigator {
    width: 600px;
    background-color: rgba(200,250,200,1);
    border-radius: 5px;
    margin: 5px;
    align-content: center;
    padding: 3px;
    border-color: rgba(150,200,150,1);
    border-style: solid;
    text-shadow: 2px 2px 2px rgba(50, 100, 50, 0.9);
    box-shadow: rgba(30,30,30,0.5)1px 3px 5px;
}

    .navigator select {
        border-radius: 4px;
        background-color: rgba(230,250,230,1);
        box-shadow: rgba(30,30,30,0.5)1px 2px 5px;
        text-shadow: 1px 1px 1px rgba(50, 100, 50, 0.9);
    }

.nowarp {
    white-space: nowrap;
}

.ForceWarp {
    word-wrap: break-word;
}

.navigatorselect {
    width: 60px;
    height: 25px;
}

.alert {
    border-style: none solid none solid;
    max-width: 70%;
    left: 15%;
    right: 15%;
    position: relative;
    border-width: 2px;
    border-color: #e1ab0f;
    background-position: right center;
    background-color: #F3E17D;
    color: #000000;
    padding: 6px 30px 6px 30px;
    margin: 3px 0px 1px 0px;
    display: block;
    border-radius: 7px;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    min-height: 20px;
    vertical-align: middle;
    text-align: justify;
    line-height: 1.6em;
}
.alertgreen {
    background-color: var(--varg1color3) !important;
    border: 1px solid var(--varg1color2) !important;
    border-radius: 5px;
    color:var(--varg1color5)!important;
    padding: 3px;
}
.alertBlue {
    background-color: #6fc5fe !important;
    border:1px solid #3b3bf5 !important;
    border-radius:5px;
    padding:3px;
}
.alertred {
    background-color: #fb8faa !important;
    border: 1px solid #f53b3b !important;
    border-radius: 5px;
    padding: 3px;
}


.navigator input {
    border-radius: 7px;
}

.textboxintable {
    width: 100%;
    font: inherit;


    height: 23px;
    vertical-align: middle;
    border: none;
    background-color: inherit;
}

    .textboxintable:disabled {
        background-color: #FFFFFF;
    }

    .textboxintable:focus {
        background-color: rgba(255, 255, 0, 1);
    }

table {
    width: 100%;
}

.GrideFilter {
   
   display:inline-block;
   margin-left:3em;
}

    .GrideFilter input {
       
        
    }

   /* .GrideFilter span {
        margin: 2px;
        right: 1px;
        padding: 3px;
    }*/

.leftborder {
    border: groove;
    border-color: azure;
}

.btn-max {
    width: 100% !important;
    margin: 0px;
}

.linkbutton, .linkbutton2 {
    background-color: #000000;
    border: 1px none #FFFFFF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    padding: 0px;
    padding-top: 3px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 10px;
    text-shadow: 0 0px 2px #FFFFFF;
    display: inline-block;
    min-width: 50px;
    text-align: center;
    box-shadow: 0px 0px 3px 1px gray;
    transition: 0.8s;
}

.linkbutton:hover, .linkbutton2:hover {
    background-color: darkorange;
    color: #000;
}

.linkbuttonGreen, .linkbuttongreen {
    background-color: #047a04;
}

.linkbuttonbrown {
    background-color: brown;
}

.linkbuttonred {
    background-color: red;
}
.linkbuttonwhite {
    background-color: white;
    color: black;
}

.linkbuttonorange {
    background-color: orange;
}



.linkbuttonaquamarine {
    background-color: aquamarine;
    color:black;
}
.linkbuttondarkcyan {
    background-color: darkcyan;
    color: black;
}
.linkbuttonsolid {
    background-color: var(--varg1color3);
    color: white;
}

.list-control-min {
    width: 100px !important;
}


/*.tablecontent {
    box-shadow: rgba(50,50,50,0.6)3px 5px 3px;
    border-collapse: collapse;
    border-radius: 1em;
    overflow: hidden;
    padding: 2px;
    border: solid 2px #71c6f1;
}
    .tablecontent .RowDanger {
        background: linear-gradient(#fee9e9 20%, #f6e9eb 50%, #ffe0e0 52%, #faeeee 100%);
    }*/
   
/*.tablecontent tr td {
    transition: 0.5s;
    padding-right: 8px;
    border: solid 1px #71c6f1;
   
}
.tablecontent thead {
    border-radius: 5px;
}


.tablecontent tr {
    background-color: #fdfdfd;
    background: linear-gradient(#f2f2fc 20%, #f5f5f8 50%, #eeeeff 52%, #fafafc 100%);
    border-bottom: solid 1px #77c6ee;
    transition: 0.3s;

}

    .tablecontent tr:nth-child(2n+1) {
        background-color: #f5f3f3;
        background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%)
    }
       
.tablecontent .RowDanger {
    background: linear-gradient(#fee9e9 20%, #f6e9eb 50%, #ffe0e0 52%, #faeeee 100%)!important;
}


    .tablecontent tr td, .tablecontent tr th {
        font-size: 12px;
        direction: rtl;
        font-weight: bold;
        padding: 1px;
    }

    .tablecontent tr:hover {
        background-color: rgba(83, 123, 252, 0.60);
        background: linear-gradient(#fffccc 20%, #f4f6c6 50%, #fffebb 52%, #f4f3c4 100%);
    }

.tablecontent tr th {
    background-color: #ebebeb;
    white-space: normal;
    padding-left: 1px;
    color: #000079;
    line-height: 1.2em;
    max-height: 3em;
    padding-right: 4px;
    border: solid 1px dodgerblue;
    border-top: solid 2px dodgerblue;
    border-bottom: solid 2px dodgerblue;
    cursor: pointer;
    font: VazirB;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align: top;
    background: linear-gradient(#b4d7f5 20%, #7cbdf5 50%, #7cbdf5 52%, #b7d8f3 100%);
}*/

  
/*

*/


.tableFixHead {
    table-layout: fixed;
    border-collapse: collapse;
    overflow-x: auto;
}
    .tableFixHead table {
        overflow-x:no-display;
    }
    .tableFixHead tbody {
        display: block;
        overflow-y: auto;
        overflow-x:hidden;
       max-height: 45vh;
    }

    .tableFixHead thead tr {
        display: block;
    }

        .tableFixHead tbody tr td, .tableFixHead thead tr th, .tableFixHead thead tr th span {
            box-sizing: border-box;
            /* padding-right:6px!important;*/
            min-width:70px;
        }
           
.mvc-grid-title {
    padding-right: 3px ;
}
.Search-field {
    font-weight: normal;
    max-width: 300px;
    margin: 1px;
    margin-right: 1em;
    margin-bottom: -1px;
    width: 100%;
    padding: 5px 8px;
    line-height: 1.0;
    color: #000;
    font-weight: bold;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid var(--varg1color3);
    border-radius: 1px;
}
    .Search-field:hover, .Search-field:active, .Search-field:focus {
        box-shadow: 1px 1px 1px #009879;
    }

    .tablecontent tfoot tr td input {
        background-color: green;
        border-radius: 5px;
        min-width: 29px;
        padding: 3px;
        cursor: pointer
    }
.tablecontent tfoot tr td input:hover {
    background-color: darkgreen;
    
}

.gridHeader {
   
  
    font-weight: bolder;
    color: white;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    line-height: 30px;
    background-color: #009879;
   
    font: VazirB ;
    font-size:2em;
    caption-side: top;
    text-align: center;
}

.styled-table, .tablecontent {
    border-collapse: collapse;
    margin: 1em;
    margin-top:0;
    width:98%;
    font-size: 0.9em;
   
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    text-indent: initial;
    border-spacing: 2px;
    box-shadow: 15px 3px 14px -2px rgb(0 0 0 / 39%) !important;
}
    .styled-table caption, .tablecontent caption {
        caption-side: top;
        text-align: center;
        color: black;
        font-size: large;
        border: 1px solid rgb(32, 136, 196);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-family: IRANSansWeb_Light !important;
    }
    .styled-table thead tr, .tablecontent thead tr {
        background-color: var(--varg1color3);
        color: #ffffff;
        text-align: center;
        border-right: 5px;
        font-size: 0.8em;
        line-height: 1.2em;
        font-weight: bold;
    }

    .styled-table td, .tablecontent td {
        padding: 3px;
        font-size: 0.8em;
        text-align: center;
        font-weight: bold;
       font-style:normal;
        line-height:1.05em;
    }
    .styled-table tbody tr, .tablecontent tbody tr {
        border-bottom: 1px solid #dddddd;
        transition: 0.5s;
        background-color: #f3f3f3;
        color: #000000;
    }

  


        .styled-table tbody tr:nth-of-type(even), .tablecontent tbody tr:nth-of-type(even) {
            background-color: #ffffff;
            color: #020656;
        }

        .styled-table tbody tr:last-of-type, .tablecontent tbody tr:last-of-type {
            border-bottom: 2px solid var(--varg1color3);
        }
       
           


    .styled-table tbody .pinkrow, .tablecontent tbody .pinkrow {
        background-color: #fff0f7;
    }

        .styled-table tbody .pinkrow:nth-of-type(even), .tablecontent tbody .pinkrow:nth-of-type(even) {
            background-color: #ffe1f0;
        }

    .styled-table tbody .greenrow, .tablecontent tbody .greenrow {
        background-color: #f3fee7;
    }

        .styled-table tbody .greenrow:nth-of-type(even), .tablecontent tbody .greenrow:nth-of-type(even) {
            background-color: #ecfcda;
        }

        .styled-table tbody .pinkrow:hover, .tablecontent tbody .pinkrow:hover .styled-table tbody .greenrow:hover, .tablecontent tbody .greenrow:hover, .styled-table tbody tr:hover, .tablecontent tbody tr:hover {
            background-color: #cae0e9;
        }

    .styled-table a:hover, .tablecontent a:hover {
        background-color: #009879;
        /*border: solid 1px #009879;*/
        color: #FFF;
        text-shadow: 0px 0px 2px #000;
        border-radius: 4px;
    }
    .styled-table a, .tablecontent a {
        text-decoration: blink;
    }
    .styled-table td, .styled-table th, .tablecontent td, .tablecontent th {
        text-align: center;
        font-family: IRANSansWeb_Light !important;
        vertical-align: middle;
        align-items:center;
        align-content:center;
        padding:0.1rem;
    }
        .styled-table th span,  .tablecontent th span
        {
vertical-align:central;
        }
        .tablecontentHomePage tr th, .tablecontentHomePage tr td {
            font-size: 0.8rem;


        }
.tablecontentHomePage {
    border-collapse: unset;
    border-radius: 0;
    margin:0;
}
    .tablecontentHomePage tr th {
        background: #005298;
    }

.styled-table tbody tr.activerowgride, .tablecontent tbody tr.activerowgride {
    font-weight: bolder;
    background-color: #92c9f7;
}
.w3-green.activerowgride {
    font-weight: bolder;
    background-color: #459c49!important;
}

    .styled-table tbody tr.activerowgride td, .tablecontent tbody tr.activerowgride td {
        font-weight: bolder;
        
    }
.GrideinHome {
    background-color: white;
    padding: 5px;
    font: VazirB;
    font-size: 14px;
    font-weight: bolder;
    overflow:hidden;
    align-items:center;
}
.GrideinHome img{
    margin:5px;
    position:relative;
    align-self:center;
    left:40%;
    right:40%;
}


    .GrideinHome p {
        background-color: #b7bcce;
        box-shadow: rgba(50,50,50,0.6)3px 0px 3px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border: solid 1px dodgerblue;
        text-align: center;
        width: 98%;
        color: #014178;
        box-shadow: 15px 3px 14px -2px rgb(0 0 0 / 39%) !important;
    }
    /*
.tablecontent tr td {
    padding: 3px;
    border: 2px solid rgba(255,255, 255, 1);
   
    text-align:center;
    }
    .tablecontent tr td:hover {
    background-color: rgb(180, 210, 180);
}
   
    .headertable {
    background-color: burlywood;
    color: black;
    font: 22px B Roya,arial,helvetica,clean,sans-serif;
    border: solid;
    text-align: center;
    line-height: 1.5;
}

    */


.rowheader {
    background-color: cornflowerblue;
    border-top: solid;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-color: black;
    text-align: center;
    font: 19px ;
}






.mosehover :hover {
    background-color: darkgray;
    color: white;
}
.alertbox {
    padding: 15px;
    margin: 2px;
    color: black;
    font-size: 14px;
   /* font-weight: bold;*/
    margin-bottom: 10px;
    border: 1px solid transparent;
    background-color: #e0f7fb79;
    border-radius: 4px;
    font-family:BYekan;
    border: 1px solid #fff;
    box-shadow:1px 1px 1px gray;
}
.userTopKeys {
    display: inline-block;
    cursor: pointer;
    margin: 0px 2px 1px 2px;
    padding: 2px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 12px;
    color: #000;
    z-index: 800;
    height: 19px;
    min-width: 60px;
    text-align: center;
    text-shadow: 0px 0px 2px rgba(200, 200, 200, 0.9);
    float: left;
    transition-duration: 1.9s;
    transition-property: background-color;
}
    .userTopKeys:hover {
        border: 2px;
        box-shadow: 1px 1px 1px rgba(100,100,100,0.9) inset, 2px 2px 2px rgba(150,150,150,0.9);
    }



    .trborder {
        border: solid;
        border-color: brown;
    }

.anchor_bottom {
    position: relative;
    top: 50%;
    left: 50%;
    right: 50%;
}

.container-border {
    border: 2px solid rgba(60, 100, 60, 0.90);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0px 0px 8px rgba(82,235,168,0.6);
}


.form-control-ingroup {
    height: 30px;
    background-color: white;
    color: rgba(0, 0, 0, 0.82);
    width: 70%;
    margin: 0;
    font: 25px ;
    border: 0px solid rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    text-align: right;
    padding-right: 30%;
    display: inline-block;
}

.lable-ingroup {
    position: absolute;
    right: 16px;
    font-size: 17px;
    top: 10px;
    color: #b3b3b3;
    z-index: 1000;
}

.form-group1 {
    background-color: white;
    display: inline-block;
    margin: 8px;
    margin-bottom: 12px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.22);
    text-align: right;
    padding: 1px;
    border-radius: 5px;
    font-size: medium;
    color: rgba(0, 0, 0, 0.22);
}

.w-field {
    font: 16px ;
    font-weight: normal;
    max-width: 250px;
    font-weight: normal;
    margin: 5px;
    margin-right:1px;
    display: inline-block;
    width: 100%;
 
    padding: 5px 8px;
    line-height: 1.0;
    color: #000;
    font-weight:bold;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 4px;
    /*background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%)*/
}

.w-field-area {
    height: 50px;
    overflow: auto;
    vertical-align: top;
    max-width: 99% !important;
    width: 95%;
    
}

.list-control:focus, .w-field:focus {
    border-color: #49a7f2;
    box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset,0px 0px 8px rgba(82,100,235,0.8);
    outline: 0 none;
}

.list-control:hover, .w-field:hover {
    /*  border-color: #75b9f0;*/
    box-shadow: 0px 0px 5px rgba(82,100,235,0.9);
    outline: 0 none
}

.w-field-disable {
}

.w-field-min {
    width: 30px;
    display: inline-block;
}

.w-field50 {
    width: 80px !important;
}

.w-field80 {
    width: 110px !important;
}

.w-label, .control-label {
    text-align: left;
    font: 14px ;
    font-weight: normal;
    color: #000;
    font-weight: normal;
    display: inline-block;
}

.text-danger {
    color: red;
    
    font-size: smaller;
    text-shadow: 3px 2px 2px rgba(255, 169, 8, 0.9);
}

.textField {
    color: #161616;
    vertical-align: middle;
    text-align: left;
    vertical-align: top;
    text-shadow: 0 0 2px #AAAAAA;
   
    font-weight:bold;
    padding-top: 4px;
    max-width: 250px;
   
    background: linear-gradient(to right,rgba(115 ,199, 247,  0.15) 00%,#ffffff55 50%,#ffffff55 100%)
}
.textFieldGreen {
    background: linear-gradient(to right,#07caa28e 00%,#ffffff 50%,#ffffff 100%)
}




.HeaderText {
    margin: 0px;
    padding: 0px 4px 0px 4px;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    direction: rtl;
    -webkit-text-shadow: 0px 0px 2px #000000;
    text-shadow: 0px 0px 2px #000000;
    margin-bottom: 0.5em;
    text-align: center;
}
.HeaderTextwhite {
    color: white;
}
        .HeaderTextSmall {
            font-size: 14px;
            text-shadow: 0px 0px 0px #000000;
        }
.tableParameter {
    width: 75em;
}
.tablemodal {
    font-family: IRANSansWeb_Light !important;
    font-size:1.0em;
   
}
    .tablemodal tr td {
        text-align: right;
    }
    .tablemodal tr td:nth-child(2n+1) {
        text-align: left;
    }
    .tablemodal td {
        vertical-align: middle;
        font-size: 1.1em;
        padding: 5px;
        font-weight: bolder;
        font-style: normal;
        line-height: 1em;
    }
.valueField {
    color: #333333;
    vertical-align: top;
    text-align: right;
    text-shadow: 0 0 2px #AAAAAA;
    font-weight: bold;
    background: linear-gradient(to left, rgba(115, 199, 247, 0.15) 00%,#ffffff55 50%,#ffffff55 100%)
}
.valueFieldGreen {
    background: linear-gradient(to left,#07caa28e 00%,#ffffff 50%,#ffffff 100%);
}

.valuetable .textField {
    border: 1px solid #FFFFFF;
    -webkit-text-shadow: 0 0 2px #AAAAAA;
    text-shadow: 0 0 2px #AAAAAA;
   
    font-weight: bold;
    padding: 1px 2px 1px 2px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
   
    height: 18px;
    text-align: left;
    background-color: var(--varg1color3);
}

.valuetable .valueField {
    padding: 2px;
    border: 1px solid #FFFFFF;
    background: linear-gradient(to left, var(--varg1color6) 10%,var(--varg1color8) 20%,rgb(255, 255, 255) 100% );
    color: #000000;
    text-align: right;
}


.col-10 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}
.h_iframe-aparat_embed_frame {
    position: relative;
   
}

    .h_iframe-aparat_embed_frame .ratio {
        display: block;
        width: 100%;
       
        height: auto;
    }

    .h_iframe-aparat_embed_frame iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 15px;
        box-shadow:2px 2px 2px var(--varg1color2);
        height: 100%;
    }
.headerpanel {
    background-color: rgba(255, 169, 8, 0.7);
    height: 29px;
    border-radius: 15px 15px 0 0;
    text-shadow: 0px 0 2px #AAA;
    font-weight: bolder;
}

.tablecontainer {
    width: 100%;
    padding: 15px;
    border-radius: 15px;
}

.tableshow {
    background-color: antiquewhite;
    max-width: 800px;
    height: 23px;
}

.list-control {
    font: 15px ;
    font-weight: normal;
     font-weight: normal;
    margin: 8px;
    width: auto;
    height: 39px;
    padding: 6px 12px;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 7px;
}


.loginpanel {
   
    background-color: rgba(255, 255, 255, 0.5);
  /*  padding: 5px;
    margin: 1px;*/
    border-radius: 15px;
    /*position:absolute;*/
  /*  margin:10px;*/
  /*  left:0;
    top:10%;*/
    text-align: center;
    box-shadow: rgba(0, 200, 100, 1);
    box-sizing: border-box;
    align-self: center;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    transition-property: right height;
    animation-fill-mode: both;
    animation-duration: 2s;
   
  /*  width:30%;*/
}

.LoginMain {
   /* width: 30%;
    min-width:380px;*/
   /* height: 35em;*/
/*    left: 0%;
    right: 1%;*/
    border: 2px solid rgba(255, 255, 255, 0.83);
    box-shadow: 2px 2px 2px black;
   /* top: 15%;*/
    position: absolute;
    border-radius: 15px;
    text-align: center;
    box-shadow: rgba(200, 200, 100, 1);
    background-color: rgba(200, 200, 200, 0.23);
}
.hadisLoginMain {
    right: 69%;
    left: 1%;
}





.container-header {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    padding: 1px;
    font-size: 20px;
    text-shadow: 2px 2px 2px Green;
    font-weight: bold;
    text-align: center;
}

.container-header-list {
    background-color: rgba(100, 200, 100, 0.6) !important;
    padding: 1px !important;
    font-size: 20px !important;
    color: #000;
    padding: 5px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    text-shadow: 2px 2px 2px Green;
    font-weight: bold;
    text-align: center;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
    direction: rtl;
}


/* *************css reset**************************************************
*************************************************************
*****************************************************
********************************************
*********************************
*/




@font-face {
    font-family: BYekan;
    src: url(../fonts/BYekan.eot) format('eot'), url(../fonts/BYekan.woff) format('woff'), url(../fonts/BYekan.ttf) format('truetype')
}



@media print {
    body {
    }
}

tbody {
   
}

table {
    /*  border-radius: 2px;*/
    display: table;
}

td {
    vertical-align: top;
    horiz-align: center;
    margin: 2px;
   /* padding: 2px;*/
  
    font-weight: 500;
}

.tdpage {
    box-shadow: 3px 3px 5px grey;
    /* border-radius: 7px;*/
    border-style: solid;
    height: 100%;
    font-family:IRANSansWeb_Light;
}

.width60 {
    width: 60% !important;
}

.glass {
    border: solid 1px;
    border-color: azure;
    padding: 8px;
    border-radius: 10px;
    background-color: rgba(230, 230, 230, 0.20);
    text-align: center;
    line-height: 20px;
    min-width: 100px;
    box-shadow: 1px 1px 3px grey inset,2px 2px 3px rgba(247, 250, 177, 0.20);
    margin: 3px;
    display: inline-block;
}

.smallloading {
    position: relative;
    top: 3px;
    margin-left: 3px;
    display: block;
    float: right;
    border: 2px solid #081bf8;
    border-top: 2px solid #fb0909;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: fastrotate 0.3s linear infinite;
}

.smallloadingbtn {
    position: absolute !important;
}

.smallloadingfull {
    animation: fastrotate 0.7s linear infinite;
    border: 8px solid rgba(0, 0, 150, 0.20);
    border-top: 8px solid rgba(0, 0,150, 1);
    top: 150px;
    right: 50%;
    width: 120px !important;
    height: 120px !important;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.00);
}

@keyframes fastrotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loadingwaite2 {
    position: fixed;
    bottom: 30px;
    left: 100px;
    border: 5px solid rgba(0, 0, 150, 0.20);
    border-top: 5px solid rgba(0, 0, 150, 1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: rotate 1s linear infinite;
}

.loadingwaite {
    position: fixed;
    bottom: 30px;
    left: 100px;
    width: 70px;
    height: 70px;
}


    .loadingwaite img {
        width: 60px;
        height: 60px;
    }

.loadingwaitetop {
    position: fixed;
    font-size:small;
    padding:5px;
    top: -1px;
    left: 50%;
    right: 50%;
    width: 250px;
   /* height: 50px;*/
    z-index: 10000;
    background-color: coral;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid ;
    border-color:brown;
    box-shadow:2px 2px 2px gray;
}


    .loadingwaitetop img {
        width: 10px;
        height: 10px;
    }



.loadingwaiteCenter {
    position: fixed;
    top: 30%;
    left: 30%;
    width: 30%;
    height: 30%;
    align-content:center;
    align-items:center;
    text-align:center;
    z-index:0;
}

.contentform {
    min-height: 100vh;
    background-color: white;
    position: relative;
    z-index: 2;
}

.loadingwaiteCenter img {
    width: 100%;
    height: 100%;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 650px) {
  /*  .slide {
        display: none;
    }*/

    .content {
        width: 100%;
       
    }
}

.link {
    margin: 1px;
    padding: 2px 2px 2px 2px;
    width: 130px;
    height: 60px;
    position: absolute;
    float: right;
    border-radius: 2px;
    background-color: rgba(70,168,230,0.7);
    border: solid 1px rgba(70,168,230,0.7);
    min-height: 20px;
    color: #000;
    -webkit-text-shadow: 0px 0px 2px #000000;
    text-shadow: 0px 0px 2px #fff;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
}

 .link:hover {
    background-color: rgba(70,168,230,0.9);
    border: solid 1px rgba(70,100,255,0.9);
    color: #FFF;
    text-shadow: 0px 0px 2px #000;
    transform: scale(1.06,1.06);
}

.linkinTable {
    margin: 5px;
    padding: 2px 2px 2px 2px;
    border-radius: 5px;
    border: solid 1px rgba(70,100,255,0.0);
    min-height: 20px;
    color: blue;
    -webkit-text-shadow: 0px 0px 2px #000000;
    text-shadow: 0px 0px 2px #fff;
    font-weight: bold;
    font-size: 15px;
    transition-duration:1s;
}

    .linkinTable:hover {
        background-color: rgba(70,168,230,0.9);
        border: solid 1px rgba(70,100,255,0.9);
        color: #FFF;
        text-shadow: 0px 0px 2px #000;
    }

.slide {
    /*align-content: center;*/
    /* align-items: center;*/
    /*padding: 4px 4px 4px 9px;
    min-height: 600px;*/
    /*margin: 3px 3px 3px 3px;*/
    /*background-color: aliceblue;
    background-image: url("../Pic/MenuBack.png");
    background-repeat: repeat-y;
    background-position: center;
    background-position: top;
    text-shadow: 0px 0px 2px #000000;
  
    top: 40px;*/ /* Header Height */
    /*bottom: 20px;*/ /* Footer Height */
}




@media print {
    .slide, .loadingwaite, .noprint {
        display: none;
    }
    #topArea > img, #topArea {
        display: none;
    }
}

a {
    cursor: pointer;
    text-decoration: none;
}


.backError {
    width: 100%;
    height: 100%;
    background-image: url(img/Tax.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/*///////////////*/



.nav {
    z-index: 999;
    width: 100%;
    position: fixed;
    height: 50px;
}

.level0 {
    width: 100%;
    background-color: rgba(37,121,207,1);
    color: white;
    padding: 0;
    padding-right: 20px;
    direction: rtl;
    position: relative;
    display: inline-table;
    border-radius: 1px;
}

    .level0 .li0 {
        float: right;
        padding-right: 5px;
        border: 0;
        margin-left: 0px;
        padding-right: 5px;
        min-width: 5em;
        padding-left: 5px;
        border-left: solid 2px #444;
        text-align: center;
        vertical-align: bottom;
        transition-duration: 1.5s;
        font-size: 18px;
        font-weight: bolder;
        transition-delay: 100ms;
        border-top: 4px solid rgba(0, 0, 0, 0.00);
        background-color: rgba(37,100,180,1);
    }

        .level0 .li0:hover {
            border-top: 4px solid red;
            border-left: solid 2px #760606;
            color: black;
            background-color: rgb(255, 255, 255)
        }



.level1 {
    position: absolute;
    color: black;
    top: 100%;
    right: 1%;
    left: 1%;
    width: 98%;
    padding: 0;
    box-shadow: gray 5px 5px 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image: linear-gradient(to bottom, rgb(230, 230, 230) 30%,rgb(251, 255, 255) 100% );
    background-image: url(img/backmenu.jpg);
    background-size: 100% 100%;
    transform: rotateX(-90deg);
    backface-visibility: hidden;
    transition: all 400ms ease-in-out 200ms;
    transform-origin: 0% 0%;
}


.ReportMenu {
    background-image: url(../Pic/backmenu.jpg);
}

.VatMenu {
    background-image: url(../Pic/backmenuVat.jpg);
}




.level2 {
    position: relative;
    top: 0%;
    min-width: 10em;
    right: 0%;
    padding: 0;
    border-radius: 0;
    border-top: solid;
    border-top-color: Highlight;
    margin: 5px;
    margin-top: 0;
}

.li1 span {
    padding: 6px;
    padding-bottom: 0;
    margin-top: 10px;
    color: Highlight;
}

.li2 a {
    color: inherit;
}

.li2 {
    padding: 6px;
    transition-duration: 0.5s;
}

    .li2:hover > a {
        font-weight: bolder;
        color: orangered;
    }

.level1 .li1 {
    float: right;
    position: relative;
    border: none;
    margin-top: 10px;
    margin-right: 30px;
}


.level0 .li0:hover > .level1 {
    transform: rotateX(0deg) !important;
    transition: all 400ms ease-in-out 200ms !important;
}

/*///////////////////////////////////*/
.menubutton {
    text-align: center;
    padding: 3px 4px 4px 1px;
    width: 100%;
    min-height: 26px;
    z-index: 1;
    cursor: pointer;
    border: 0.5px solid var(--varg1color3);
    background-color: rgba(255,255,255,1);
    color: #000;
    text-align: right;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    box-sizing: content-box;
    margin-bottom: 0px;
    border-radius: 7px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    transition: 0.2s;
    /* box-shadow: 0 4px rgba(1, 250, 141, 0.8);*/
}

.menubuttonClicked {
    color: white;
    background-color: var(--varg1color4);
    border-radius: 7px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
/*.menubuttonClicked .markerspan {
        content: "";
        position: relative;
        top: -21px;
        left: -194px;
        margin-left: -5px;
        border-style: solid;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-right: 30px solid rgba(1, 174, 1, 1);
        z-index: 100;
    }*/


.menubutton:active {
    box-shadow: 0 1px rgba(1, 174, 1, 1);
  
}

.menubutton:hover {
    
    background-color: var(--varg1color3);
    color:white;
}
/*.menubuttonClicked:hover {
    background-color: rgba(1, 174, 1, 1);
}*/
.subpopup1 {
    box-shadow: 0px 1px 2px 1px #2a757b;
    padding:1px;
}

.titleArea {


  background-image:url('../Pic/grey-blocks_backs.png');
    color: #000;
}

.tooltip2 {
    position: relative;
}

    .tooltip2 .tooltip2text {
        visibility: hidden;
        width: 300px;
        background-color: rgba(255, 169, 8, 0.9);
        color: #000000;
        text-align: center;
        box-shadow: -1px -0px 1px 1px #ff5503;
        border-radius: 18px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-width: 1px;
        padding: 8px;
        position: absolute;
        z-index: 10000;
        top: 0px;
        left: -230px;
        text-justify: distribute;
        margin-left: -100px;
        transition-property: opacity 0.6s;
        transition-duration: 0.6s;
        opacity: 0;
        box-sizing: content-box;
    }
    .tooltip2 .tooltip2textright {
        left: 430px;
        border-radius: 18px;
    }

.tooltip2 .tooltip2text::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 321px;
    margin-left: -5px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 169, 8, 0.9);
    z-index: 10000;
}

    .tooltip2 .tooltip2textright::after {
      
        border-width: 0;
    
    }


    .tooltip2:hover .tooltip2text {
        visibility: visible;
        opacity: 1;
    }

    .tooltip2 .tooltip2text:hover {
        opacity: 0;
        visibility: hidden;
    }

.menucaption {
    display: block;
    margin: 0px;
    padding: 1px 10px 1px 10px;
    border-width: 1px;
    border-style: solid solid none solid;
    border-color: #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #333333;
    color: #FFFFFF;
    font-weight: bold;
    width: 76%;
    font-size: smaller;
    float: right;
}
.subbtn {
    margin: 0px 0px 0px 1px;
    padding: 4px 2px 4px 1px;
    width: 100%;
    min-height: 16px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--varg1color3);
    -webkit-border-radius: 8px;
    border-radius: 0;
    background-color: rgba(255,255,255,1);
    color: #000;
    text-align: right;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    /* white-space: nowrap;*/
    transition-duration: 0.5s;
    margin-bottom: -1px;
}

    .subbtn:hover {
    }

    .subsubbtn:hover, .subbtn:hover {
        background-color: #abdefb;
        border-color: var(--varg1color3);
        text-shadow: 0px 0px 15px #FFFFFF;
        color: #000;
        text-decoration: none;
        transform: scale(1.03);
    }


.activesubbtn {
    background: rgba(195, 163, 75, 0.58);
}

    .activesubbtn:hover {
        background: rgba(165, 100, 46, 0.58);
    }


.headersubbtn {
    text-align: center;
    cursor: auto;
    padding: 2px;
    width: 90%;
    max-height: 15px;
    min-height: 10px;
    z-index: 1;
    left: 5%;
    right: 5%;
    background-color: #2088c4a6;
    box-shadow: 0px 1px 1px 1px rgba(88,89,90,0.5);
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
    margin: 0px 2px 4px 2px;
    border-radius: 0px 0px 12px 12px;
    box-sizing: content-box;
}

.panelsub {
    background-color: rgba(2, 255, 31, 0);
    box-shadow: 0px 1px 2px 1px #88f;
    border-radius: 8px;
    border: 1px solid #2088c4a6;
    padding: 0px 2px 5px 3px;
    margin: 7px 2px 3px 3px;
}


 

    .panelsub a {
        text-decoration: none;
    }
    main{
        padding:7px;
    }

    .Critical {
        border-style: none solid none solid;
        border-width: 2px;
        border-color: #380606;
        background-position: right center;
        background-color: #FB5438;
        color: #fff;
        padding: 6px 30px 6px 30px;
        margin: 3px 0px 1px 0px;
        display: block;
        border-radius: 7px;
        -webkit-box-shadow: 0px 0px 5px #000000;
        box-shadow: 0px 0px 5px #000000;
        background-image: url('img/alertyello.png');
        background-repeat: no-repeat;
        min-height: 20px;
        max-width: 70%;
        left: 15%;
        right: 15%;
        position: relative;
        vertical-align: middle;
        text-align: justify;
        line-height: 1.6em;
    }

.Critical-col {
    border-style: none solid none solid;
    border-width: 2px;
    border-color: #380606;
  
    background-color: #FB5438;
    color: #fff;
    padding: 6px 30px 6px 30px;
    
   
    border-radius: 7px;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
   
  
    
}

#topArea {
    padding-right: 20px;
    height: 100px;
   
   
    border-bottom-style: solid;
    background-image: url(../Pic/grey-blocks_backs.png);
    background-position: right;
    text-align: right;
    width: 100%;
    position: fixed;
    transition-duration: 0.1s;
    transition-property: opacity,top;
    z-index: 700;
}
.list-group {
    margin-bottom: 20px;
    padding-right: 0;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 1px 5px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #eee;
}

@media print {
    #topArea {
        background-image: url(../Content/grey-blocks_backs.png1);
        background-color: rgba(51, 51, 51, 0);
    }
}

img {
    vertical-align: middle;
    border: 0;
}



.formbtn {
    width: 120px;
    color: #000;
    font-size: 15px;
    font-style: normal;
    height: 35px;
    text-decoration: none;
    padding: 4px;
    transition: 0.8s;
    border-radius: 5px;
    text-shadow: 2px 2px 6px #000;
    min-width: 100px;
    text-align: center;
    font: inherit;
    /*box-shadow: 0px 0px 1px 1px gray;*/
    margin: 3px 2px 2px 1px;
    background: rgba(201, 190, 211, 0.5);
    direction: rtl;
    cursor: default;
    display: inline-block;
    cursor: pointer;
    box-shadow: 2px 2px 2px #bebc97;
    border-radius: 13px;
}

    .formbtn :hover {
        box-shadow: 5px 5px 5px #beba69 !important;
        text-shadow: 0px #FFFFFF !important;
    }

.formbtn-green {
    background-color: forestgreen;
}

    .formbtn-green:hover {
        background-color: green !important;
    }

.formbtn-red {
    background-color: hotpink;
}

    .formbtn-red:hover {
        background-color: deeppink !important;
    }

.formbtn-blue {
    background-color: dodgerblue;
}

    .formbtn-blue:hover {
        background-color: blue !important;
        color: white !important;
    }

.formbtn-yello {
    background-color: #eaf306;
}

    .formbtn-yello:hover {
        background-color: #c1c807 !important;
    }

.formbtn-white {
    background-color: #dddddd;
}

    .formbtn-white:hover {
        background-color: #ffffff !important;
    }

dl {
    font-weight: normal;
}

    dl dd {
        position: relative;
        right: -6px;
        display: inline-block;
        max-width: 20%;
        font: inherit;
        font-weight: normal;
        padding: 1px;
        background-color: rgba(220, 256, 220, 0.7);
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        padding-right: 12px;
        border: solid;
        border-color: rgba(150, 200, 150, 0.7);
        border-right: none;
        max-width: 500px;
        margin-top: 10px;
    }

    dl dt {
        display: inline-block;
        max-width: 504px;
        font: inherit;
        font-weight: bold;
        background-color: bisque;
        padding: 1px;
        padding-right: 8px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: 3px;
        background-color: rgba(200, 250, 200, 0.7);
        border: solid;
        border-color: rgba(150, 200, 150, 0.7);
        margin-top: 10px;
    }



a {
    cursor: pointer;
}
.select {
    font-size: 15px;
    font:inherit;
    border-radius: 4px;
    width: 100%;
    max-width:250px;
    background-color: transparent;
    border: 1px solid #cccccc;
    height: 30px;
    line-height: 5px;
    margin: 1px auto;
    border-color: rgb(169, 169, 169);
    direction: rtl;
    box-sizing: border-box;
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    cursor: default;
}

#select {
    align-items: center;
    margin: 1px auto;
    width: 220px;
}




/******************* popup div*/

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1010; /* Sit on top */
    padding-top: 15px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content-base {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    /* border: 1px solid #888;*/
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.3s;
    animation-name: animatetop;
    animation-duration: 0.3s;
    border-radius: 15px;
    max-width: 95%;
}
/* Modal Content */
.modal-content {
    width: 55%;
    height: 95%;
}

.modal-content_meesage {
    -webkit-animation-name: animatetopmessage !important;
    -webkit-animation-duration: 0.3s;
    animation-name: animatetopmessage !important;
    animation-duration: 0.3s;
    width: 400px;
    height: 160px;
    padding-right: 5px;
    top: 40%;
}

.modal-content_Center {
    -webkit-animation-name: animateCenter !important;
    -webkit-animation-duration: 0.3s;
    animation-name: animateCenter !important;
    animation-duration: 0.2s;
    height: 320px;
    width: 600px;
    padding: 0;
    top: 30%;
}

.modal-content_blue {
    border: 2px solid var(--varg1color3);
}


@keyframes animatetop {
    0% {
        top: -300px;
        opacity: 0
    }

    100% {
        top: -0px;
        opacity: 1
    }
}

@keyframes animatetopmessage {
    0% {
        top: -10%;
        opacity: 0
    }

    100% {
        top: 46%;
        opacity: 1
    }
}

@keyframes animateCenter {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0
    }

    80% {
        height: 320px;
        width: 600px;
        opacity: 0.5
    }

    90% {
        height: 320px;
        width: 600px;
        opacity: 0.8
    }

    100% {
        height: 320px;
        width: 600px;
        opacity: 1
    }
}
/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background-image: url("../Images/close-button-big-white-black.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    opacity: 1;
    height: 30px;
    position: relative;
    left: 10px;
    min-height: 35px;
    top: 0px;
    min-width: 35px;
    transition-duration: 0.3s;
    transition-property: all;
}

    .close:hover,
    .close:focus {
        cursor: pointer;
        background-image: url("../Images/close-button-big-white-blackhover.png");
    }

.addlogin {
    background-image: url("img/1463.png");
    height: 60px;
    width: 60px;
    background-size: 60px;
    right: 5px;
    border: solid 3px #fc7d03;
    top: 140px;
    border-radius: 10px;
    box-shadow: 4px 4px 4px rgba(50,50,50,0.6), inset 4px 4px 4px rgba(200,150,0,0.6);
}

    .addlogin:hover {
        background-image: url("img/1463.png");
        box-shadow: 4px 4px 4px #f7fa03, inset 7px 7px 7px rgba(200,150,0,0.9);
    }

    .addlogin:active {
        background-image: url("img/1463.png");
        box-shadow: 4px 4px 4px #f70303, inset 7px 7px 7px rgba(200,15,0,0.9);
    }

.modal-header {
    padding: 1px 16px;
    background-color: rgba(113, 118, 116, 0.23);
    color: white;
    margin: auto;
    min-height: 10px;
    height: 7%;
    border-radius: 15px 15px 0 0;
}
.modal-content_blue .modal-header {
    background-color: var(--varg1color3);
    color: white !important;
    text-align: center;
    align-items: center;
}
.modal-header-message {
    padding: 0px 2px 8px 2px;
    background-color: rgba(dc,35,45, 0.33);
    color: white;
    margin: 0px;
    min-height: 20px;
    height: 12%;
    border-radius: 15px 15px 0 0;
    font-weight: bolder;
    font-size: 20px;
    font-style: normal;
}

    .modal-header-message h1 {
        font-size: 14px;
        font-weight: bold;
        text-shadow: 0px 0px 1px 1px gray;
    }

.notshow {
    display: none;
}

.modal-body {
    padding: 2px 16px;
    height: 92%;
}

.modal-body-message {
    padding: 2px 2px 2px 2px;
    height: 57%;
}

    .modal-body-message h1 {
        font-family: BYekan !important;
        font-size: 14px;
        text-shadow: 0px 0px 1px 1px gray;
    }

    .modal-body-message h7 {
        font-size: 15px;
        text-shadow: 0px 0px 1px 1px gray;
        font-weight: bold;
    }

.modal-footer {
    padding: 5px 16px;
    background-color: rgba(113, 118, 116, 0.36);
    color: white;
    border-radius: 0px 0 15px 15px;
    height: 2%;
}

.modal-footer-message {
    padding: 1px 10px;
    background-color: rgba(113, 118, 116, 0.70);
    color: white;
    border-radius: 0px 0 15px 15px;
    height: 20%;
}

    .modal-footer-message input {
        margin: 0 !important;
        height: 100% !important;
        min-height: 20% !important;
    }

.contionframeinpage {
    border: none;
}

.frameinpage {
    border: none;
}

.iconbtn {
    width: 29px;
    height: 29px;
    display: inline-block;
    margin: 2px;
    padding: 2px;
    background-color: transparent;
    user-select: none;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    color: transparent;
}


  

.navcontrol {
    background-color: lightgoldenrodyellow;
    box-shadow: 0px 4px 4px rgba(200,150,0,0.6);
    width: 500px;
    padding-right: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

nav ul {
   
    position: relative;
}

    .nav ul li {
        float: right;
        position: relative;
        border: solid 2px;
        margin: 2px;
    }

        nav ul li:hover {
            border-color: blue;
        }

.iconbtn-del {
    background-image: url(img/1075.png);
}

.iconbtn-print {
    background-image: url(img/0017.png);
}

.iconbtn-ok-send {
    background-image: url(img/7035.png);
}

.iconbtn-ok {
    background-image: url(img/0457.png);
}

.iconbtn-edite {
    background-image: url(img/0508.png);
}

.iconbtn-return {
    background-image: url(img/4674.png);
}

.iconbtn-printall {
    background-image: url(img/0016.png);
}

.iconbtn-details {
    background-image: url(img/0047-ID-icon32.png);
}

.panel-color {
    border: solid;
    border-radius: 10px;
    margin: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    font-weight: normal;
    box-shadow: 3px 3px 3px #aaaaaa;
}

    .panel-color .subcolordiv {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        text-align: center;
        line-height: 20px;
        padding: 7px;
        font-weight: bold;
        margin-bottom: 10px;
        align-items: center;
        box-shadow: 3px 3px 3px #aaaaaa;
    }

.panel-red {
    border-color: red;
}

    .panel-red .subcolordiv {
        background-color: red;
    }

.panel-blue {
    border-color: deepskyblue;
}

    .panel-blue .subcolordiv {
        background-color: deepskyblue;
    }


.panel-darkblue {
    border-color: var(--varg2color2);
}

    .panel-darkblue .subcolordiv {
        background-color: var(--varg2color2);
        color:white;
    }

.panel-green {
    border-color: green;
}

    .panel-green .subcolordiv {
        background-color: green;
    }

.panel-yello {
    border-color: yellow;
}

    .panel-yello .subcolordiv {
        background-color: yellow;
    }

.panel-black {
    border-color: black;
}

    .panel-black .subcolordiv {
        background-color: black;
        color: white
    }

.ascending {
    border-top: solid 3px red !important;
}

.descending {
    border-bottom: solid 3px red !important;
}

.chartContainermain {
    direction: ltr;
    width: 95em;
    height: 40em;
    overflow-x: scroll;
    overflow-y: scroll;
}

.calendars-popup, .calendars-popup td, .calendars-popup div, .calendars-popup select {
    font-family: Vazir,IRYekan,IRANSansWeb, 'B Roya',"tahoma", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif !important;
}

.datepicker {
    padding-right: 5px !important;
    padding-left: 24px !important;
    border: 1px solid Gray !important;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: White;
    background-image: url('/Images/Icon_itxt_Calendar_16x16.png') !important;
    background-position: 2px 5px !important;
    background-repeat: no-repeat !important;
    font-weight: bold;
    font-size: 14px !important;
    direction: ltr !important;
}



/*/////////////////*/ /*///////////////////*/

.anime, .anime-fast {
    animation-fill-mode: both;
    animation-duration: 2s;
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounceInRight {
    animation-name: bounceInRight;
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounceInLeft {
    animation-name: bounceInLeft;
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    to {
        transform: translate3d(50%, 50%, 0);
    }
}

.bounceInUp {
    animation-name: bounceInUp;
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation-name: bounceIn;
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes buz {
    20% {
        transform: translate3d(0px, 20px, 0);
    }

    to {
        transform: translate3d(0px, 0px, 0);
    }
}



.bounceOutRight {
    animation-name: bounceOutRight;
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    animation-name: bounceOutLeft;
}



@keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 0.7;
        transform: translate3d(0, -20px, 0);
    }

    99% {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutDown {
    animation-name: bounceOutDown;
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    animation-name: slideInRight;
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    animation-name: slideOutRight;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation: fadeIn 3s linear;
}

@keyframes fadeLoading {
    0% {
        opacity: .1;
    }

    50% {
        opacity: .7;
    }

    100% {
        opacity: .1;
    }
}

.fadeLoading {
    animation: fadeLoading 2s linear;
    animation-iteration-count: infinite;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOut2 {
    from {
        opacity: .5;
    }

    to {
        opacity: 0;
    }
}

.fadeOut2 {
    animation-name: fadeOut2;
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    animation-name: zoomOut;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.4, 0.4);
        opacity: 0.0;
    }

    50% {
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}

.pulsate {
    -webkit-animation: pulsate 1500ms cubic-bezier(0, 0.88, 0, 0.89);
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate-y {
    0% {
        -webkit-transform: translateY(-10px);
        opacity: 0.0;
    }

    50% {
        opacity: 1.0;
    }

    100% {
        -webkit-transform: translateY(3px);
        opacity: 0.0;
    }
}

.transform-y {
    -webkit-animation: pulsate-y 2s cubic-bezier(0, 0.88, 0, 0.89);
    -webkit-animation-iteration-count: infinite;
}

@keyframes headShake {
    0% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake;
}

@keyframes fastHeadShake {
    0% {
        transform: translateX(0);
    }

    2% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    4% {
        transform: translateX(5px) rotateY(7deg);
    }

    6% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    8% {
        transform: translateX(2px) rotateY(3deg);
    }

    10% {
        transform: translateX(0);
    }
}

.fastHeadShake {
    animation-timing-function: ease-in-out;
    animation-name: fastHeadShake;
}

@keyframes headShakeY {
    0% {
        transform: translateY(0);
    }

    6.5% {
        transform: translateY(-6px) rotateX(-9deg);
    }

    18.5% {
        transform: translateY(5px) rotateX(7deg);
    }

    31.5% {
        transform: translateY(-3px) rotateX(-5deg);
    }

    43.5% {
        transform: translateY(2px) rotateX(3deg);
    }

    50% {
        transform: translateY(0);
    }
}

.headShakeY {
    animation-timing-function: ease-in-out;
    animation-name: headShakeY;
}

@keyframes fastheadShakeY {
    0% {
        transform: translateY(0);
    }

    2% {
        transform: translateY(-6px) rotateX(-9deg);
    }

    4% {
        transform: translateY(5px) rotateX(7deg);
    }

    6% {
        transform: translateY(-3px) rotateX(-5deg);
    }

    8% {
        transform: translateY(2px) rotateX(3deg);
    }

    10% {
        transform: translateY(0);
    }
}

fastHeadShake
.fastheadShakeY {
    animation-timing-function: ease-in-out;
    animation-name: fastheadShakeY;
}

.spin {
    animation: spin 1s linear infinite;
}


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


/*checkbox hn dropdown*/

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

    .dropdown-check-list .anchor:after {
        position: absolute;
        content: "";
        border-left: 4px solid black;
        border-bottom: 4px solid black;
        padding: 5px;
        right: 10px;
        top: 20%;
        transform: rotate(-45deg);
    }
    .dropdown-check-list .anchor::before {
        content: "\e019";
    }

    .dropdown-check-list .anchor:active:after {
        right: 8px;
        top: 21%;
        animation: spin 0.4s linear;
    }


.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

    .dropdown-check-list ul.items li {
        transition: background-color .4s ease;
        list-style: none;
    }

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}
    .dropdown-check-list ul.items li.active  {
        background-color: #cbcbff;
        font-weight: bold;
    }
    .dropdown-check-list.visible .items {
        animation: bounceIn 0.4s linear;
        display: block;
    }
    .dropdown-check-list ul.items li:hover,
    .dropdown-check-list ul.items li:focus {
        background-color: #b8b8ff;
    }
    .dropdown-check-list ul.items li.active :hover,
    .dropdown-check-list ul.items li.active : {
        background-color: #b8b8ff;
    }

.SingleBorder, .SingleBorder td, .SingleBorder th {
    border: solid 1px black;
    /*font-family: BTitr,IRYekan,IRANSansWeb, 'B Roya',"tahoma", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif !important;*/
}

.NoBorder
.NoBorder, .NoBorder td, .NoBorder th {
    border: none;
}

.btitr {
    font-family: BTitr;
}

.text_align_center {
    text-align: center;
}
.text_align_left {
    text-align: left;
}
.text_align_right {
    text-align: right;
}
.padding3 {
    padding: 3px;
}

.mintd50 td, .mintd50 th {
    min-width: 100px;
}

@media print {
    breakpage {
        page-break-after: always;
        page-break-before: always;
    }
}

@media only screen and (max-width: 700px) {
    .LoginMain {
        width: 95% !important;
    }
    .hadisLoginMain{display:none;}

    .loginpanel {
        width: 100% !important;
        left: 0% !important;
        right: 0% !important;
    }

    .alertpanel {
        display: none !important;
    }
}
.helpspan:hover >img
{
    display:block;
    position:absolute;
}
.excelExport {
    display: inline-block;
    background-color: #cef8ce;
    border: 1px solid green;
    box-sizing: content-box;
    line-height: 2.5em;
    padding: 0.2em 0.2em;
    cursor: pointer;
    margin: 0 !important;
    min-width: 2em;
    color: green;
    font-weight: bold;
    border-radius: 7px;
    transition-duration:1s;
}
    .excelExport:hover {
        background-color: green;
        color: white;
        text-decoration:none;
    }




/* (A) TABLE WRAPPER */
#demoDW {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}

    #demoDW table {
        width: 100%;
        text-align: center;
        border-collapse: separate; /* Don't collapse */
        border-spacing: 0;
    }

       
    



/* (B) STICKY HEADERS */
    #demoDW table thead {
        position: sticky !important;
        top: 0;
        z-index: 2;
    }
    #demoDW table th:first-child {
        right: 0;
        position: sticky !important;
        top: 0;
        z-index: 2;
    }

        #demoDW table td[scope=FixCol] {
            position: sticky !important;
            top: 0;
            z-index: 2;
            right: 0;
            z-index: 0;
            border-bottom: 1px solid;
            border-color: #dee2e6;           
            background: inherit;
        }


    #demoDW table th {
        background: var(--varg1color3);
        color:white;
     
      
        /*border: 1px solid #fff;*/
    }



.demoDW {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}



    .demoDW table {
        width: 100%;
        text-align: center;
        border-collapse: separate; /* Don't collapse */
        border-spacing: 0;
    }






        /* (B) STICKY HEADERS */
        .demoDW table thead {
            position: sticky !important;
            top: 0;
            z-index: 2;
        }

        .demoDW table th:first-child {
            right: 0;
            position: sticky !important;
            top: 0;
            z-index: 2;
        }

        .demoDW table td[scope=FixCol] {
            position: sticky !important;
            top: 0;
            z-index: 2;
            right: 0;
            z-index: 0;
            border-bottom: 1px solid;
            border-color: #dee2e6;
            font-family: IRANSansWeb_Light !important;
            font-size: 1.0em;
            background: inherit;
        }


        .demoDW table th {
            background: var(--varg1color3);
            /*border: 1px solid #fff;*/
        }



.searchlistdiv {
   
}
.searchlist {
    position: absolute;
    width: 250px;
    left: 10px;
    overflow-y: auto;
    max-height: 300px;
}
    .searchlist li {
        border: 1px solid var(--varg1color3);
        padding: 3px;
        border-radius: 5px;
        background-color: white;
    }
        .searchlist li:hover {
            border: 1px solid rgba(0, 0, 0, 0.90);
            background-color: var(--varg1color3);
            color:white;
            
      
            
            }



.menuitem {
  
    margin: 1px !important;
    border: 1px solid #ccc !important;
    border-color: #4CAF50 !important;
    color: black;
    border-radius:5px;
    transition-duration:1s;
}
    .menuitem :hover {
        color: white !important;
        background-color: #4CAF50 !important;
    }

    .menuitem :hover a {
        color: white !important;
        
    }

.SearchResult li {
    display: inline-block;
    margin: 2px;
    border: 1px solid black;
    padding: 1px;
    border-radius: 5px;
    min-width: 14rem;
    text-align: right;
    font-size: 0.8em;
    /* font-weight:bolder;*/
    font-family: VazirB;
    color: black;
    transition-duration: 0.5s;
    box-shadow: 1px 1px 2px black inset;
    /* box-shadow: 1px 1px 3px blue inset, 1px 1px 2px gray;*/
}

    .SearchResult li:hover {
        /* transform: scale( 1.03);*/
        box-shadow: 1px 1px 1px gray;
        border: 1px solid gold;
        background-color: black;
        color: white;
        box-shadow: 1px 1px 2px gold inset;
    }

    .SearchResult li img {
        width: 2rem;
    }
    .SearchResult li span {
        background-color: gold;
        min-width: 30px;
        border-radius: 50px;
        font-size: 19px;
        color: black;
        padding-bottom: 6px;
       
    }
header{
    border-bottom:1px solid black ;
    background-color:#ffffffbb !important;
    box-shadow:1px 1px 1px gray;
    
}


#print_this{
    
}
.resulttable {
    padding: 2px;
    /*border: 2px solid gray;*/
    margin: 5px;
    border-radius:10px;
    /*box-shadow:1px 1px 3px gray inset, 2px 2px 2px gray;*/
}
.resulttable img {
    width: 200px;
    height: 200px;
}

.loginbody {
    background-image: url(../Pic/Capture.PNG);
    background-size: cover;
    height: 100vh;
    width: 100vw;
}
#Searchtext{
    color:black;
    border:1px solid black;
}

.btnprint {
    background-image: url(/Pic/0017.png);
    background-size: cover;
    display: inline-block;
    width: 35px;
    height: 35px;
    right: 0px;
    left: 0px;
    cursor: pointer;
    border: 1px solid #bbb;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    top: 16px;
}

.btnprint:hover {
    /*background-image: url(/Pic/0019.png);*/
    border:1px solid black;
}

.Search1{
    border:1px solid black;
    padding:5px;
    margin:5px;
    border-radius:10px;
    box-shadow:2px 2px 2px white inset;
    background-color:#47e5fa55;
  /*  background-image:url('/Pic/topBack.png');*/
   

}

.Search2 {
    border: 1px solid black;
    opacity:1;
    margin:5px;
    padding:5px;
    border-radius: 10px;
    background-color:#ffffff33;
    box-shadow: 3px 3px 30px #ffffff inset,3px 3px 3px white;
    /*background: linear-gradient(#61d8a599 2%, #FFFFFF99 13%,#FFFFFF99 83%, #61d8a599 100%) !important;*/
    /*background-image:url('/Pic/vector2 (1).jpg');*/
}

/* TABS */
.idTabs {
    width: 100%;
    border-width: 2px;
    border-color: var(--varg1color3);
    border-bottom-style: ridge;
}

    .idTabs >div {
        min-width: 110px;
    }

        .idTabs div a> div {
            margin: 0px 1px 0px 1px;
            padding: 7px;
            white-space: nowrap;
            border: 1px solid var(--varg1color3);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: var(--varg1color6);
            -webkit-box-shadow: 0 0 2px #000000;
            box-shadow: 0 0 2px #000000;
            color: var(--varg1color1);
            text-align: center;
            font-weight: bold;
            font-size: 1.1rem;
            opacity: 1;
            transition-duration: 0.5s;
        }

    .idTabs .selected {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: var(--varg1color3);
        color: #FFFFFF;
        opacity: 1;
    }

        .idTabs .selected div {
            background-color: var(--varg1color3);
            color: #FFFFFF;
            opacity: 1;
        }

.idTabsContent {
    padding: 2px;
    border: 1px solid var(--varg1color3);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image: url('Images/Back_Tab.png');
    background-repeat: repeat-x;
    height: 200px;
    vertical-align: top;
}

    .idTabsContent a {
        /*color: #1E1E1E;*/
    }


.metroback {
    background-color: rgba(202, 197, 197, 0.10);
    width: 517px;
    height: 290px;
    border-radius: 10px;
    border: 2px solid rgba(202, 197, 197, 0.22);
}

.metrotitle {
    width: 100px;
    height: 29px;
    margin-left: 50%;
    margin-right: 50%;
    text-align: center;
    margin-bottom: 5px;
    background-color: rgba(202, 197, 197, 0.22);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.Metrobtn {
    text-align: center;
    width: 15rem;
    height: 6rem;
    padding: 0.5rem;
    margin: 2px;
    display: inline-block;
    font-size: 1rem;
    transition: border 0.01s ease-in-out;
    background-color: #eeaa99;
    color: black;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    border: 3px solid transparent;
    align-items: center;
    justify-content: space-between;
    outline: none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: auto;
    transition: 0.35s;
}


    .Metrobtn:hover,
    .Metrobtn:active {
        text-decoration: none;
        border: 3px solid #000;
        transform: scale(1.09);
    }

    .Metrobtn:active {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(190, 190, 190, 0.45);
        transform: translateY(1px);
        border-bottom: 1px solid white;
        box-shadow: none;
    }

    .Metrobtn:disabled {
        opacity: 0.65;
    }

.MetrobtnRed {
    background-color: rgb(246 75 75);
}

.MetrobtnRed2 {
    background-color: rgb(247 100 100);
}

.MetrobtnRed3 {
    background-color: rgb(250 117 117);
}

.MetrobtnRed4 {
    background-color: rgb(246 142 142);
}

.MetrobtnRed:hover {
    background-color: rgba(255, 40, 40, 1);
}

.MetrobtnBlue {
    background-color: rgb(82 82 208);
}

.MetrobtnBlue2 {
    background-color: rgb(92 178 242);
}

    .MetrobtnBlue2:hover {
        background-color: rgb(45 45 248);
        color: white;
    }

.MetrobtnBlue:hover {
    background-color: rgba(40, 40, 255, 1);
    color: white;
}

.Metrobtnbrown {
    background-color: #8a5e20;
}

.Metrobtnbrown2 {
    background-color: #a38522;
}

.Metrobtnbrown3 {
    background-color: #a39c22;
}

.Metrobtnbrown:hover {
    background-color: #864220;
    color: white;
}

.Metrobtndarkviolet {
    background-color: #d857fe;
}

    .Metrobtndarkviolet:hover {
        background-color: #cd2cfb;
        color: white;
    }

.Metrobtnorangered {
    background-color: #fc9a59;
}

    .Metrobtnorangered:hover {
        background-color: #fc7c26;
        color: white;
    }


.MetrobtnGreen {
    background-color: rgb(153 252 153);
}

.MetrobtnGreen2 {
    background-color: rgb(116 185 116);
}

.MetrobtnGreen:hover {
    background-color: rgba(60, 255, 60, 1);
}

.MetrobtnGreen2:hover {
    background-color: rgb(49 207 49);
}

.MetrobtnYello {
    background-color: rgb(255 255 103);
}

    .MetrobtnYello:hover {
        background-color: rgba(255, 255, 60, 1);
    }

.MetrobtnBlack {
    background-color: rgb(77 76 76);
    color: white;
}

    .MetrobtnBlack:hover {
        background-color: rgb(29 28 28);
    }

.Metrobtn div {
    -moz-box-sizing: border-box;
    display: inline-block;
    background-repeat: no-repeat;
    width: 60px; /* Width of new image */
    height: 50px; /* Height of new image */
    background-size: 100% 100%;
}

@media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 95vw;
    }
}

.imginhome{border-radius:10px;box-shadow: 3px 3px 3px gray;max-width:98%;

}

.carousel-item img
{
    max-height:50vh;
}

.elementor-background-overlay {
    border-radius: 12px 12px 0px 0px;
}
.elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(-90deg, #000 65%, #1F2F4D91 100%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;

    height: 50vh;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    overflow:clip;
}

.width_to_max
{
   /* width:45vw;*/
}
@media screen and (max-width: 650px) 

{
    .width_to_max {
/*        width: 80vw;*/
    }
}


.btn-solid {
    color: #fff!important;
    background-color: var(--varg1color3);
    border: 1px solid #fff;
    border-radius: 10px
}

/*.btn-solid,
.btn-outline-solid {
    width: 160px;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    padding: 8px;
    transition: all .3s
}*/

.btn-outline-solid {
    color: var(--varg1color3);
    border: 1px solid var(--varg1color3);
    border-radius: 10px
}



.btn-solid:hover {
    background: var(--varg1color2);
    /*color: var(--varg1color3);*/
    transition: all .3s;
    border-color: var(--varg1color3)
}

.btn-outline-solid {
    /*width: 80px;*/
    border: 1px solid var(--varg1color3);
    /*border-radius: 10px;*/
    color: var(--varg1color3);
    /*   text-align: center;
    padding: 5px*/
}

    .btn-outline-solid:hover {
        background: var(--varg1color3);
        color: #FFF!important;
    }

.text-solid {
    color: var(--varg1color3);
}

.form-label {
    color: var(--varg1color3);
}

.form-floating > label {
    left: auto;
    color: var(--varg1color3);
}

a {
    color: black;
    text-decoration: none;
}

    a:hover {
        color: var(--varg1color3);
    }


.vh100 {
    height: 100vh;
}

.sec1 {
    background-image: url(/Pic/Back/White-background-with-blue-tech-hexagon.jpg);
    background-size: cover;
}

.sec2 {
    background-image: url(/Pic/Back/White-elegant-texture-background-style.jpg);
    background-size: cover;
}

.sec3 {
    background-image: url(/Pic/Back/White-abstract-background-design-HD.jpg);
    background-size: cover;
}

.site-footer {
    background-color: #000;
    position: absolute;
    bottom: 0;
    width: 100%;
}

@media (min-width: 1200px) {
    .vc-container {
        max-width: 1230px;
    }
}

@media (min-width: 992px) {
    .vc-container {
        max-width: 1180px;
    }
}

@media (min-width: 768px) {
    .vc-container {
        max-width: 920px;
    }
}

@media (min-width: 576px) {
    .vc-container {
        max-width: 540px;
    }
}

.vc-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#box-widget-icon {
    float: right;
}

#box-widget-icon {
    cursor: pointer;
    width: 80px;
    height: 80px;
    float: right;
    text-align: center;
    padding-top: 10px;
    position: fixed;
    z-index:1000;
    bottom:60px;
}

.widget-icon {
    background:Red
}

.widget-icon {
    transition: all .2s ease !important;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2),0 1px 10px rgba(0,0,0,.15);
    margin: 0 auto;
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.loadingwaitetop {
    position: fixed;
    font-size: small;
    padding: 5px;
    top: -1px;
    left: 50%;
    right: 50%;
    width: 250px;
    /* height: 50px;*/
    z-index: 10000;
    background-color: var(--varg1color3);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid;
    border-color: #0b9862;
    box-shadow: 2px 2px 2px gray;
}


    .loadingwaitetop img {
        width: 10px;
        height: 10px;
    }



/*.trapezius.top-right::before {
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}*/

footer.base-footer {
    overflow: hidden;
    margin-top: 25px;
    z-index: 1;
    position: relative;
    bottom: 0;
    width: 100%;
    --bg: red;
}

.trapezius {
    --bg: white;
    position: relative;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    --shape-height: 215px;
    --shape-positions: relative;
    --shape-insset: 1px;
}


    /*.trapezius.top-left::before, .trapezius.top-right::before {
        height: var(--shape-height);
    }

    .trapezius::before {
        top: var(--shape-insset);
    }

    .trapezius::before, .trapezius::after {
        position: var(--shape-positions);
        z-index: -1;
        content: "";
        width: 100%;
        background: var(--varg1color3);
    }*/

    .trapezius .content {
        background-color: var(--varg1color3);
        background-position: top;
        background-size: contain;
        background-repeat: no-repeat;
        padding-top: calc(var(--shape-height)/2);
        padding-bottom: calc(var(--shape-height)/2);
    }

footer.base-footer > * {
    position: relative;
    z-index: 1;
}

.pt-0 {
    padding-top: 0 !important;
}



footer.base-footer .content::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    background-image: url("../img/icons/logo-icon-gradient-part.svg");
    width: 305px;
    height: 363px;
    background-size: 100% 100%;
    z-index: 0;
}


footer.base-footer .contact-us {
    border-top: solid 1px rgba(255,255,255,.1);
}

nav.light, .navbar.light > nav {
    --color: white;
    --color-icon: white;
}

@media (min-width: 992px) {
    .justify-content-lg-start {
        justify-content: flex-start !important;
    }
}

.pt-3 {
    padding-top: 1rem !important;
}

.justify-content-center {
    justify-content: center !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

nav {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 4px;
    --color: var(--secondary);
    --color-icon: var(--secondary-60);
    --color-hover: var(--primary);
}

    nav > :not(.btn, button) {
        font-weight: 700;
        font-size: 17px;
        line-height: 26px;
        padding: var(--py) var(--px);
        position: relative;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        color: var(--color);
        min-width: fit-content;
    }

    .navbar > *, nav > * {
        flex-shrink: 0;
    }

        nav > *, nav > * > * {
            --px: 24px;
            --py: 28px;
        }

.MuiSvgIcon-fontSizeMedium {
    font-size: 10px;
}
.cardab {
    border: 2px solid var(--varg1color2);
    box-shadow: 2px 2px 2px var(--varg1color2);
    border-radius: 10px;
    transition-duration: 0.5s;
    margin: 3px;
}

    .cardab .card-header {
        background-color: var(--varg1color2);
        box-shadow: 1px 1px 1px var(--varg1color2);
        padding: 5px;
        color:white;
        
        border-radius:10px 10px 0 0;
    }

.cardab:hover{
    /*transform:scale(1.1);*/
    background-color:var(--varg1color8);
    transform:scale(1.02);
}
.cardab-Moadian {
    border: 2px solid var(--varg1color7);
}
.cardab-Moadian .card-header {
    background-color: var(--varg1color7) !important;
}
.cardab-Complex {
    border: 2px solid var(--varg1color4);
}
.cardab-Complex .card-header {
    background-color: var(--varg1color4) !important;
}
    .bgcolor1 {
        background-color: var(--varg1color1);
    }
.bgcolor2 {
    background-color: var(--varg1color2);
}
.bgcolor3 {
    background-color: var(--varg1color3);
}
.bgcolor4 {
    background-color: var(--varg1color4);
}
.bgcolor5 {
    background-color: var(--varg1color5);
}
.bgcolor6 {
    background-color: var(--varg1color6);
}

.bgcolor7 {
    background-color: var(--varg1color7);
}

.bgcolor8 {
    background-color: var(--varg1color8);
}
.tcolor1{
    color :var(--varg1color1);
}
.tcolor2 {
    color: var(--varg1color2);
}
.tcolor3 {
    color: var(--varg1color3);
}
.tcolor4 {
    color: var(--varg1color4);
}
.tcolor5 {
    color: var(--varg1color5);
}
.tcolor6 {
    color: var(--varg1color6);


}
.tcolor7 {
    color: var(--varg1color7);
}
.tcolor8 {
    color: var(--varg1color8);
}

.arow-left {
    margin-right: 5px;
    border-color: transparent var(--varg1color7) transparent transparent;
    border-width: 10px;
    border-style: solid;
    display:inline-block;
}

.arow-right {
    margin-right: 5px;
    border-color: transparent transparent transparent var(--varg1color7);
    border-width: 10px;
    border-style: solid;
    display: inline-block;
}

.h25vw {
    height: 20vw;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(204, 204, 204);
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

.input-group-addon, .input-group-btn {
    /*width: 1%;*/
    white-space: nowrap;
    vertical-align: middle;
}
.form-control {
    border-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


.team
{
    display:inline-flex;
    float:right;
    width:25%;
}

.card-img{
    height:50%;
    width:50%;
    max-height:150px;
    max-width:150px;
    transition-duration:0.2s;
    position:relative;
    left:25%;
    right:25%;
    border-radius:20px;
    box-shadow:2px 2px 2px gray;
}
.card-img:hover{
    transform:scale(1.03);
}

#chatMessage {
    list-style-type: none;
    text-align: right;
    height: 400px;
    overflow-y: scroll;
    margin-bottom: 0;
}
    #Messages li, #chatMessage li {
        padding-bottom: 3px;
        border: 1px solid var(--varg1color7);
        border-bottom-left-radius: 10px;
        border-radius: 10px;
        box-shadow: 1px 1px 1px gray;
        background: linear-gradient(90deg,var(--varg1color6) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100% );
    }

    #Messages li .name ,#chatMessage li .name {
        font-weight: bold;
        margin-right: 5px;
        color: #999;
    }

    #chatMessage li .time, #Messages li .time {
        color: #999;
        margin-right: 5px;
    }

    #chatMessage div.message, #Messages div.message {
        color: black;
    }
#MessageInput{
    padding:5px;
    margin:15px;
    max-width:90%;
}
#roomList a {
    margin: 5px;
    font-weight: bold;
    font-size:1.1rem;
    max-width:85%;
}