﻿.AspTbx, .AspTbx_Dir
{
    /* برای تکس باکس */
    padding:5px ;
    border-radius: 4px;
    text-align:right;
    font-family:Tahoma;
    /*font-size:8pt;*/
    border:1px solid #0055A5;
    width:96%;
}

.AspTbx_Dir
{
    /* برای تکس باکس لاتین */
    direction:ltr;
    text-align:left;
    
}

.AspRF
{
    /* ورود اجباری */
    border:1px solid #EE3A43;
    border-right:5px solid #EE3A43;
    padding-left:0px;
}

.AspVal
{
    /* خطای ورود اطلاعات */
    background-color:#EDDDDD;
}


.AspControl, .AspControl_Dir
{
    /* برای کمبو باکس */
    padding:0px 5px 0px 5px;
    text-align:right;
    font-family:F1;
    font-size:12pt;
    border:1px solid #0055A5;
}

.AspControl_Dir
{
    /* برای کمبو باکس لاتین */
    direction:ltr;
    text-align:left;
}



.AspBtn, .AspBtn_Save, .AspBtn_Cancel, .AspBtn_Print, .AspBtn_Add, .AspBtn_Delete, .AspBtn_Edit, .AspBtn_Show, .AspBtn_Login
{
    /* دکمه */
    padding:5px 10px 5px 10px;
    font-family:Tahoma;
    font-size:8pt;
}

.AspBtn_Save
{
    background-image:url('../IMG/BtnIcon/Save.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}

.AspBtn_Cancel
{
    background-image:url('../IMG/BtnIcon/Cancel.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}

.AspBtn_Print
{
    background-image:url('../IMG/BtnIcon/Print.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}

.AspBtn_Add
{
    background-image:url('../IMG/BtnIcon/Add.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}


.AspBtn_Delete
{
    background-image:url('../IMG/BtnIcon/Delete.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}


.AspBtn_Edit
{
    background-image:url('../IMG/BtnIcon/Edit.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}

.AspBtn_Show
{
    background-image:url('../IMG/BtnIcon/Show.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}

.AspBtn_Login
{
    background-image:url('../IMG/BtnIcon/Login.png');
    background-position:center right;
    padding-right:20px;
    background-repeat:no-repeat;
}


.Form_Caption
{
    background-color: #0055A5;
    color:#FFFFFF;
    padding:5px;
    padding-right:10px;
    text-align:right;
    font-family:F1;
    font-size:12pt;
    font-weight:bold;
    line-height:16pt;
    border-radius:4px;
}

.Form_Head
{
    background-color: #0093D0;
    color:#FFFFFF;
    padding:5px;
    text-align:left;
    font-family:Tahoma;
    font-size:8pt;
    border-radius:4px;
    
}

.Form_Body
{
    background-color: #EEEEEE;
    color:#000000;
    padding:5px;
    text-align:right;
    font-family:Tahoma;
    font-size:8pt;
    border-radius:4px;
}



.List_Caption
{
    background-color: #0055A5;
    color:#FFFFFF;
    padding:5px;
    padding-right:10px;
    text-align:right;
    font-family:F1;
    font-size:12pt;
    font-weight:bold;
    line-height:16pt;
    border-radius:4px;
}

.List_Head
{
    background-color: #0093D0;
    color:#FFFFFF;
    padding:5px;
    text-align:center;
      font-family:Tahoma;
    font-size:8pt;
    border-radius:4px;
}

.List_Body, .List_Body_Center, .List_Body_Dir, .List_Body_HL, .List_Body_Center_HL, .List_Body_Dir_HL
{
    background-color: #EEEEEE;
    color:#222222;
    padding:5px;
    text-align:right;
      font-family:Tahoma;
    font-size:8pt;
    border-radius:4px;
}


.List_Body_Center, .List_Body_Center_HL
{
    text-align:center;
}

.List_Body_Dir, .List_Body_Dir_HL
{
    text-align:left;
    direction:ltr;
}

.List_Body_HL, .List_Body_Center_HL, .List_Body_Dir_HL
{
    background-color: #DDDDDD;
}



















/*
    کلاس های مربوط به فرم و جداول
    Jalali 1400/08/05
*/

/* #region Root */
:root {
    --C1: #014a94;
    --C2: #efc339;
    --C2-Over: #1f8981;
    --C3: #ededed;
    --BR: 4px;
    --H2W: 150px; /*اندازه عرض h2*/
    --BC: #DDDDDD; /*رنگ بوردرها*/
    --Font-veryLarge: 14pt;
    --Font-Large: 12pt;
    --Font-Normal: 10pt;
    --Font-Small: 8pt;
    --Font-varySmall: 6pt;
    --color-red: #B81414 !important;
    --color-orange: #B86314 !important;
    --color-yellow: #B8A814 !important;
    --color-green: #27a59b;
    --color-blue: #144BB8;
}
/* #endregion */


*, ::after, ::before {
    box-sizing: border-box;
}

input {
    margin: 0px;
}



.form {
    border: 1px solid var(--C2);
    border-radius: var(--BR);
    padding: 10px;
    margin: 10px;
    overflow-x: auto;
}

    .form:hover {
        box-shadow: 0px 0px 5px #CCC;
    }


    .form hr {
        border: none;
        border-bottom: 1px solid var(--C2);
        margin-bottom: 10px;
    }


    .form h1 {
        font-size: var(--Font-Large) !important;
        font-weight: bold !important;
        padding: 10px !important;
        border-bottom: 1px solid var(--C2) !important;
        margin-top: -5px !important;
        margin-bottom: 10px !important;
    }

        .form h1:before {
            content: "《 ";
            color: var(--C2);
        }

        .form h1:after {
            content: " 》";
            color: var(--C2);
        }


    .form h2 {
        font-size: var(--Font-Noraml) !important;
        font-weight: normal !important;
        display: inline-block;
        min-width: var(--H2W);
        text-align: left;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
        padding: 5px !important;
        line-height: 32px !important;
        background-color: #D7D7D7;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        white-space: nowrap;
    }


.h2-250 h2 {
    min-width: 250px;
}


.form h2:after {
    content: " : ";
}

.form h2.rf {
    border-right: 2px solid var(--color-red);
    width: auto !important;
    color: inherit !important;
}

    .form h2.rf:before {
        content: " * ";
        color: #CC0000;
    }


.form .rf {
    color: #CC0000;
}



.form .group {
    background-color: var(--C1);
    border-radius: var(--BR);
    color: #FFF;
    padding: 5px;
    margin-bottom: 5px;
}

    .form .group:before {
        content: ".: ";
    }



.form .btn-box {
    border-top: 1px solid var(--BC);
    margin-top: 5px;
    padding-top: 10px;
    text-align: center;
}



.form .r {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
}

    .form .r .c, .form .r .c1, .form .r .c2, .form .r .c3, .form .r .c4 {
        margin-bottom: 5px;
        display: flex;
        padding-left: 5px;
        flex-grow: 1;
    }

    .form .r :last-child {
        margin-left: 0px !important;
    }

    .form .r .c1 {
        width: 25%;
    }

    .form .r .c2 {
        width: 50%;
    }

    .form .r .c3 {
        width: 75%;
    }

    .form .r .c4 {
        width: 100%;
    }

    .form .r .b, .form .d {
        width: 100%;
        background-color: #EEEEEE;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        padding: 5px;
        line-height: 32px;
    }

.form .d {
    width: 100% !important;
    border-radius: 5px;
}



/*#region Esmaily 14010309 جهت کشویی شدن تب ها */
/*نمونه صفحه User_Profile*/
/*<h1 class='slide'></h1> یعنی هرچیزی در ادامه آمده باشد اسلاید تاگل میشود */
/*<h1 class='slide hidden'></h1> یعنی علاوه بر اسلاید تاگل شدن ، در ابتدا ماجرا حالت مخفی خواهد داشت*/
/**/
/**/
/*نکته مهم این هست که باید تابع form_Config()  در فایل Public فراخوانی شود تا اعمال شود*/
/**/
/**/

.form .hidden {
    display: none;
}

.form .showText {
    position: absolute;
    left: 30px;
    top: 17px;
    font-weight: bold;
}

.form .slide {
    cursor: pointer;
    position: relative;
}

    .form .slide::cue {
        display: inline-block;
        margin-right: 0.255em;
        vertical-align: 0.1em;
        content: "";
        border-top: 0.4em solid;
        border-left: 0.4em solid transparent;
        border-bottom: 0;
        border-right: 0.4em solid transparent;
        position: absolute;
        left: 10px;
        top: calc(50% - 0.4em);
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg);
        transition: all 0.3s;
    }


.form .toggle::after {
    -ms-transform: rotate(180deg); /* IE 9 */
    transform: rotate(180deg);
    transition: all 0.3s;
}

/*#endregion */





@media (max-width: 1000px) {
    .form .r .c1 {
        width: 50%;
    }

    .form .r .c2, .form .r .c3 {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .form .r .c1 {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .form .r .c {
        width: 100%;
    }

    .form .r .c, .form .r .c1, .form .r .c2, .form .r .c3, .form .r .c4 {
        margin-bottom: 5px;
        flex-direction: column;
        padding-left: 0px;
    }

    .form h2 {
        width: 100% !important;
        text-align: justify !important;
        padding: 0px 5px 0px 5px !important;
        border-top-left-radius: 5px !important;
        border-bottom-right-radius: 0px !important;
    }

    .form .r .b {
        width: 100% !important;
        border-top-left-radius: 0px !important;
        border-bottom-right-radius: 5px !important;
        min-height: 35px !important;
    }
}





.form input[type=text], .form input[type=password], .form textarea {
    border-radius: var(--BR);
    border: 1px solid var(--BC);
    padding: 5px;
    outline: none;
    width: 100%;
    font-family: Tahoma;
}

.form textarea {
    height: 75px !important;
    margin-bottom: -5px;
}

    .form input[type=text]:hover, .form input[type=password]:hover, .form textarea:hover {
        border: 1px solid #BBB;
    }

    .form input[type=text]:focus, .form input[type=password]:focus, .form textarea:focus {
        border: 1px solid #999;
    }


    .form input[type=text].md, .form input[type=password].md, .form textarea.md {
        width: 50% !important;
    }

    .form input[type=text].sm, .form input[type=password].sm, .form textarea.sm {
        width: 25% !important;
    }

@media (max-width: 1000px) {
    .form input[type=text].md, .form input[type=password].md, .form textarea.md {
        width: 100% !important;
    }

    .form input[type=text].sm, .form input[type=password].sm, .form textarea.sm {
        width: 50% !important;
    }
}

@media (max-width: 600px) {

    .form input[type=text].sm, .form input[type=password].sm, .form textarea.sm {
        width: 100% !important;
    }
}


input[type=checkbox], input[type=radio] {
    margin-left: 5px !important;
    font-family:Tahoma;
}



input[type=button], input[type=submit], input[type=reset], .btn {
    background-color: var(--C2);
    color: #fff !important;
    border-radius: 4px !important;
    margin: 5px !important;
    padding: 5px 10px 7px 10px !important;
    min-width: 100px !important;
    border: none !important;
    font-family:Tahoma;
}


    input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled, .btn:disabled {
        background-color: #DDD !important;
        color: #aaa;
        pointer-events: none;
    }

    input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, .btn:hover {
        box-shadow: 0px 0px 5px #888888;
        transform: translateY(-2px);
    }

.btn-red, .btn-orange, .btn-yellow, .btn-green, btn-blue {
}

.btn-red {
    background-color: var(--color-red) !important;
    color: #FFF;
}

.btn-orange {
    background-color: var(--color-orange) !important;
    color: #FFF;
}

.btn-yellow {
    background-color: var(--color-yellow) !important;
    color: #FFF;
}

.btn-green {
    background-color: var(--color-green) !important;
    color: #FFF;
}

.btn-blue {
    background-color: var(--color-blue) !important;
    color: #FFF;
}



/*#region width*/

.w5 {
    width: 5% !important;
}

.w10 {
    width: 10% !important;
}

.w15 {
    width: 15% !important;
}

.w20 {
    width: 20% !important;
}

.w25 {
    width: 25% !important;
}

.w30 {
    width: 30% !important;
}

.w35 {
    width: 35% !important;
}

.w40 {
    width: 40% !important;
}

.w45 {
    width: 45% !important;
}

.w50 {
    width: 50% !important;
}

.w55 {
    width: 55% !important;
}

.w60 {
    width: 60% !important;
}

.w65 {
    width: 65% !important;
}

.w70 {
    width: 70% !important;
}

.w75 {
    width: 75% !important;
}

.w80 {
    width: 80% !important;
}

.w85 {
    width: 85% !important;
}

.w90 {
    width: 90% !important;
}

.w95 {
    width: 95% !important;
}

.w100 {
    width: 100% !important;
}

/*#endregion*/


/*#region table*/



.tbl-f-col tr td:first-child, div.tbl-f-col table tr td:first-child {
    background-color: var(--C2) !important;
    color: #fff !important;
}

.tbl-l-col tr td:last-child, div.tbl-l-col table tr td:last-child {
    background-color: var(--C2) !important;
    color: #fff !important;
}

.tbl-l-row tr:last-child td, div.tbl-l-row table tr:last-child td {
    background-color: var(--C2) !important;
    color: #fff !important;
}


.tbl-nowarp, div.tbl-nowarp table {
    white-space: nowrap;
    display: block !important;
    overflow-x: auto !important;
}




div.tbl-list h1 {
    background-color: var(--C1) !important;
    color: #FFFFFF !important;
    font-size: var(--Font-Normal) !important;
    width: calc(100% - 10px) !important;
    padding: 10px !important;
    border-radius: 4px !important;
    margin: 0px 5px 0px 5px !important;
}

    div.tbl-list h1:before {
        content: ' :: ';
    }

.tbl-list, .tbl-list-caption, div.tbl-list table {
    border-collapse: separate !important;
    border-spacing: 5px !important;
    width: 100% !important;
}

    .tbl-list td, .tbl-list-caption td, div.tbl-list table td {
        background-color: #EEE;
        border-radius: 4px;
        padding: 3px;
        text-align: center;
    }

    .tbl-list-caption tr:first-child td {
        background-color: var(--C1) !important;
        color: #FFFFFF !important;
        font-size: var(--Font-Noraml) !important;
        padding: 10px !important;
        text-align: right !important;
    }

        .tbl-list-caption tr:first-child td:before {
            content: ' :: ';
        }


    .tbl-list tr:first-child td, .tbl-list-caption tr:nth-child(2) td, div.tbl-list table tr:first-child td {
        background-color: var(--C2) !important;
        color: #fff !important;
        border-radius: 4px !important;
        padding: 8px !important;
        text-align: center !important;
    }




    .tbl-list tr:nth-child(2n+1) td, .tbl-list-caption tr:nth-child(2n+1) td, div.tbl-list table tr:nth-child(2n+1) td {
        background-color: #F7F7F7;
    }

    .tbl-list tr:hover td, .tbl-list-caption tr:hover td, div.tbl-list table tr:hover td {
        background-color: #ededa0;
    }


/*#endregion table*/



.check-list,
.check-list-1,
.check-list-2,
.check-list-4 {
    display: inline-block;
    width: 100%;
}

    .check-list label,
    .check-list-1 label,
    .check-list-2 label,
    .check-list-4 label {
        vertical-align: top;
        margin-left: 5px;
    }

    .check-list-1 label {
        width: calc(100% - 24px);
    }

    .check-list-2 label {
        width: calc(50% - 24px);
    }

    .check-list label,
    .check-list-4 label {
        width: calc(25% - 24px);
    }


@media (max-width: 1000px) {
    .check-list label,
    .check-list-4 label {
        width: calc(50% - 24px);
    }
}

@media (max-width: 800px) {
    .check-list-2 label {
        width: calc(100% - 24px);
    }

    .check-list label,
    .check-list-4 label {
        width: calc(100% - 24px);
    }
}
