/*
Griffin CSS Framework

made by
    Siamak Beheshti Langroudi
*/

/* ================================================
   TABLE OF CONTENTS
   ------------------------------------------------
   1. General page/section/containers/... customizations
        1.1. usefull classes
   2. Text
   3. Controls
   4. Media Queries

   ================================================  */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 1. General page/section/containers/... customizations   */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*#region General page/section/containers customizations*/

/*fix html&body*/
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: iranSans;
    font-size: 13px;
    font-weight: 400;
    color: #555;
}

body {
    direction: rtl;
}

    body.en {
        direction: ltr;
    }

.revers_direction {
    direction: ltr;
    text-align: left;
}

.en .revers_direction {
    direction: rtl;
    text-align: right;
}

main {
    display: block;
}

section {
    display: block;
    width: 100%;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.en .float-right {
    float: left;
}

.en .float-left {
    float: right;
}



/*main,page and content (main elements)*/
.MAIN, .PAGE, .CONTENT {
    width: 100%;
}

.MAIN-CONTENT {
}
/*
    CONTAINER: container is an element that contain one or more kind of panels(regular panel or grid panel)
    PANEL:panel is the only valid child of container

    WRAPPER:wrapper is just a seperator elements
    currently it has tow diffrent kind regular wrapper and inline-block warpper

*/
.container, .panel, .wrapper {
    display: block;
    min-height:;
    box-sizing: border-box;
}

    .container::after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
    }

.panel {
    padding: 10px;
    position: relative;
    width: 100%;
}

    .panel.panel_grid-xxsd-1, .panel.panel_grid-xsd-1, .panel.panel_grid-sd-1, .panel.panel_grid-nd-1, .panel.panel_grid-ld-1, .panel.panel_grid-xld-1, .panel.panel_grid-xxld-1,
    .panel.panel_grid-xxsd-2, .panel.panel_grid-xsd-2, .panel.panel_grid-sd-2, .panel.panel_grid-nd-2, .panel.panel_grid-ld-2, .panel.panel_grid-xld-2, .panel.panel_grid-xxld-2,
    .panel.panel_grid-xxsd-3, .panel.panel_grid-xsd-3, .panel.panel_grid-sd-3, .panel.panel_grid-nd-3, .panel.panel_grid-ld-3, .panel.panel_grid-xld-3, .panel.panel_grid-xxld-3,
    .panel.panel_grid-xxsd-4, .panel.panel_grid-xsd-4, .panel.panel_grid-sd-4, .panel.panel_grid-nd-4, .panel.panel_grid-ld-4, .panel.panel_grid-xld-4, .panel.panel_grid-xxld-4,
    .panel.panel_grid-xxsd-5, .panel.panel_grid-xsd-5, .panel.panel_grid-sd-5, .panel.panel_grid-nd-5, .panel.panel_grid-ld-5, .panel.panel_grid-xld-5, .panel.panel_grid-xxld-5,
    .panel.panel_grid-xxsd-6, .panel.panel_grid-xsd-6, .panel.panel_grid-sd-6, .panel.panel_grid-nd-6, .panel.panel_grid-ld-6, .panel.panel_grid-xld-6, .panel.panel_grid-xxld-6,
    .panel.panel_grid-xxsd-7, .panel.panel_grid-xsd-7, .panel.panel_grid-sd-7, .panel.panel_grid-nd-7, .panel.panel_grid-ld-7, .panel.panel_grid-xld-7, .panel.panel_grid-xxld-7,
    .panel.panel_grid-xxsd-8, .panel.panel_grid-xsd-8, .panel.panel_grid-sd-8, .panel.panel_grid-nd-8, .panel.panel_grid-ld-8, .panel.panel_grid-xld-8, .panel.panel_grid-xxld-8,
    .panel.panel_grid-xxsd-9, .panel.panel_grid-xsd-9, .panel.panel_grid-sd-9, .panel.panel_grid-nd-9, .panel.panel_grid-ld-9, .panel.panel_grid-xld-9, .panel.panel_grid-xxld-9,
    .panel.panel_grid-xxsd-10, .panel.panel_grid-xsd-10, .panel.panel_grid-sd-10, .panel.panel_grid-nd-10, .panel.panel_grid-ld-10, .panel.panel_grid-xld-10, .panel.panel_grid-xxld-10,
    .panel.panel_grid-xxsd-11, .panel.panel_grid-xsd-11, .panel.panel_grid-sd-11, .panel.panel_grid-nd-11, .panel.panel_grid-ld-11, .panel.panel_grid-xld-11, .panel.panel_grid-xxld-11,
    .panel.panel_grid-xxsd-12, .panel.panel_grid-xsd-12, .panel.panel_grid-sd-12, .panel.panel_grid-nd-12, .panel.panel_grid-ld-12, .panel.panel_grid-xld-12, .panel.panel_grid-xxld-12 {
        float: right;
    }

.en .panel.panel_grid-xxsd-1, .en .panel.panel_grid-xsd-1, .en .panel.panel_grid-sd-1, .en .panel.panel_grid-nd-1, .en .panel.panel_grid-ld-1, .en .panel.panel_grid-xld-1, .en .panel.panel_grid-xxld-1,
.en .panel.panel_grid-xxsd-2, .en .panel.panel_grid-xsd-2, .en .panel.panel_grid-sd-2, .en .panel.panel_grid-nd-2, .en .panel.panel_grid-ld-2, .en .panel.panel_grid-xld-2, .en .panel.panel_grid-xxld-2,
.en .panel.panel_grid-xxsd-3, .en .panel.panel_grid-xsd-3, .en .panel.panel_grid-sd-3, .en .panel.panel_grid-nd-3, .en .panel.panel_grid-ld-3, .en .panel.panel_grid-xld-3, .en .panel.panel_grid-xxld-3,
.en .panel.panel_grid-xxsd-4, .en .panel.panel_grid-xsd-4, .en .panel.panel_grid-sd-4, .en .panel.panel_grid-nd-4, .en .panel.panel_grid-ld-4, .en .panel.panel_grid-xld-4, .en .panel.panel_grid-xxld-4,
.en .panel.panel_grid-xxsd-5, .en .panel.panel_grid-xsd-5, .en .panel.panel_grid-sd-5, .en .panel.panel_grid-nd-5, .en .panel.panel_grid-ld-5, .en .panel.panel_grid-xld-5, .en .panel.panel_grid-xxld-5,
.en .panel.panel_grid-xxsd-6, .en .panel.panel_grid-xsd-6, .en .panel.panel_grid-sd-6, .en .panel.panel_grid-nd-6, .en .panel.panel_grid-ld-6, .en .panel.panel_grid-xld-6, .en .panel.panel_grid-xxld-6,
.en .panel.panel_grid-xxsd-7, .en .panel.panel_grid-xsd-7, .en .panel.panel_grid-sd-7, .en .panel.panel_grid-nd-7, .en .panel.panel_grid-ld-7, .en .panel.panel_grid-xld-7, .en .panel.panel_grid-xxld-7,
.en .panel.panel_grid-xxsd-8, .en .panel.panel_grid-xsd-8, .en .panel.panel_grid-sd-8, .en .panel.panel_grid-nd-8, .en .panel.panel_grid-ld-8, .en .panel.panel_grid-xld-8, .en .panel.panel_grid-xxld-8,
.en .panel.panel_grid-xxsd-9, .en .panel.panel_grid-xsd-9, .en .panel.panel_grid-sd-9, .en .panel.panel_grid-nd-9, .en .panel.panel_grid-ld-9, .en .panel.panel_grid-xld-9, .en .panel.panel_grid-xxld-9,
.en .panel.panel_grid-xxsd-10, .en .panel.panel_grid-xsd-10, .en .panel.panel_grid-sd-10, .en .panel.panel_grid-nd-10, .en .panel.panel_grid-ld-10, .en .panel.panel_grid-xld-10, .en .panel.panel_grid-xxld-10,
.en .panel.panel_grid-xxsd-11, .en .panel.panel_grid-xsd-11, .en .panel.panel_grid-sd-11, .en .panel.panel_grid-nd-11, .en .panel.panel_grid-ld-11, .en .panel.panel_grid-xld-11, .en .panel.panel_grid-xxld-11,
.en .panel.panel_grid-xxsd-12, .en .panel.panel_grid-xsd-12, .en .panel.panel_grid-sd-12, .en .panel.panel_grid-nd-12, .en .panel.panel_grid-ld-12, .en .panel.panel_grid-xld-12, .en .panel.panel_grid-xxld-12 {
    float: left;
}

.wrapper.wrapper_inline {
    display: inline-block;
    width: initial;
}

.scroller-wrapper {
    height: 100%;
    min-height: 100%;
}

.scroller-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.scroller-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

/*#region 1.1. usefull classes*/

._activePesdueEl {
}

    ._activePesdueEl:after {
        display: block;
        visibility: hidden;
        height: 0;
        content: '';
        clear: both;
    }

._centerByMargin {
    margin-left: auto;
    margin-right: auto;
}

._disableScroll {
    overflow-x: hidden;
    overflow-y: hidden;
}

.-centerV {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.-centerH {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.-center {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

._centerYByTransform {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

._CenterByText {
    text-align: center;
}

._fullWidth {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

._removeBorder {
    border: none !important;
}

.-none {
    visibility: hidden;
    opacity: 0;
    display: none;
    z-index: -1;
}
/*#endregion*/

/*#endregion*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 2. Text  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*#region Text*/
h1, h2, h3, h4, h5, h6, strong, label, span {
    color: inherit;
}

h6, label {
    font-size: .8em;
}

h5, strong {
    font-size: .9em;
}

h4 {
    font-size: 1em;
}

h3 {
    font-size: 1.1em;
}

h2 {
    font-size: 1.3em;
}

small {
    font-weight: 100;
}

h1 {
    font-size: 1.5em;
}
/*#region link*/
a, .link {
    -webkit-transition: color .15s ease-in-out;
    -moz-transition: color .15s ease-in-out;
    -o-transition: color .15s ease-in-out;
    transition: color .15s ease-in-out;
    cursor: pointer;
    font-family: inherit;
}

    a, a:visited,
    .link, .link:visited {
        color: #60acd4;
        text-decoration: none;
    }

        a:hover, a:active,
        .link:hover, .link:active {
            color: #165c82;
            text-decoration: underline;
        }
/*#endregion*/
/*#region lable*/
label {
    color: #555;
}

    span.lbl_note, label.lbl_note, .lbl_note {
        font-size: .9em;
        background: #f3f5f7;
        color: #a1a1a1;
    }

    span.lbl_info, label.lbl_info, .lbl_info {
        background-color: #d9edf7;
        font-size: .9em;
        color: #31708f;
    }

    span.lbl_warning, label.lbl_warning, .lbl_warning {
        font-size: .9em;
        background-color: #fcf8e3;
        color: #8a6d3b;
    }

    span.lbl_success, label.lbl_success, .lbl_success {
        font-size: .9em;
        background-color: #0aa699;
        color: #fff;
    }

    span.lbl_danger, label.lbl_danger, .lbl_danger {
        font-size: .9em;
        background-color: #f2dede;
        color: #a94442;
    }

.lbl_red {
    background-color: #f35958;
    color: #fff;
    border-radius: 5px;
}

.lbl_bordered {
    border-style: solid;
    border-width: 1px;
    border-color: #777;
}

    .lbl_bordered.lbl_red {
        border-color: #953a17;
    }
/*#endregion*/
/*region */

/*#endregion*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 3. controls  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*#region Controls*/
/*#region button*/

.btn, button {
    padding: .5em 2em;
    margin: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    outline: 0;
    color: #555;
    border: none;
    text-align: center;
}

    .btn *, button * {
        font-size: inherit;
        font-weight: inherit;
    }

    .btn, .btn:hover {
        text-decoration: none;
    }
        /*#region default*/
        .btn.btn_default {
            color: #333;
            background-color: transparent;
            border: none;
        }

            .btn.btn_default:hover {
                background-color: #dfdfdf;
                border-color: #adadad;
            }

            .btn.btn_default:active {
                background-color: #dfdfdf;
                border-color: #adadad;
            }
        /*#endregion*/

        .btn.btn-blue:hover {
            background-color: #084378;
            /* border-color: #222; */
        }

        .btn.btn-blue:active {
            background-color: #48a746;
            border-color: #3d8d3c;
        }

        .btn.btn-blue {
            color: #fff;
            background-color: #2c8de2;
            border-color: #2c8de2;
            border: none;
        }

        /*#region success*/
        .btn.btn_success {
            color: #fff;
            background-color: #64bd63;
            border-color: #52b551;
        }

            .btn.btn_success:hover {
                background-color: #48a746;
                border-color: #3d8d3c;
            }

            .btn.btn_success:active {
                background-color: #48a746;
                border-color: #3d8d3c;
            }
        /*#endregion*/

        /*#region danger*/
        .btn.btn-danger {
            color: #fff;
            background-color: #dd5826;
            border-color: #ca4e20;
        }

            .btn.btn-danger:hover {
                background-color: #b4461c;
                border-color: #953a17;
            }

            .btn.btn-danger:active {
                background-color: #b4461c;
                border-color: #953a17;
            }
        /*#endregion*/

        /*#region warning*/
        .btn.btn_warning {
            color: #fff;
            background-color: #f0b518;
            border-color: #e0a70f;
        }

            .btn.btn_warning:hover {
                background-color: #c8950d;
                border-color: #a67c0b;
            }

            .btn.btn_warning:active {
                background-color: #c8950d;
                border-color: #a67c0b;
            }
        /*#endregion*/

        /*#region user do*/
        .btn.btn_userDo {
            color: #fff;
            background-color: #5d8fc2;
            border-color: #4a82bb;
        }

            .btn.btn_userDo:hover {
                background-color: #4175ab;
                border-color: #376492;
            }

            .btn.btn_userDo:active {
                background-color: #4175ab;
                border-color: #376492;
            }
        /*#endregion*/

        /*#region sys do*/
        .btn.btn_sysDo {
            color: #fff;
            background-color: #5dc4bf;
            border-color: #4abdb8;
        }

            .btn.btn_sysDo:hover {
                background-color: #40aea9;
                border-color: #369490;
            }

            .btn.btn_sysDo:active {
                background-color: #40aea9;
                border-color: #369490;
            }
        /*#endregion*/
        /*#region black*/
        .btn.btn_black {
            color: #fff;
            background-color: #222;
            border-color: #111;
        }

            .btn.btn_black:hover {
                background-color: #333;
                border-color: #222;
            }

            .btn.btn_black:active {
                background-color: #333;
                border-color: #222;
            }

            .btn.btn_black.btn_disable {
                background-color: #555;
                color: #aaa;
                border-color: #444;
                pointer-events: none;
                cursor: default;
            }
        /*#endregion*/

        /*#region black*/
        .btn.btn_inverse {
            color: #555;
            background-color: #fff;
            border-color: #555;
        }

            .btn.btn_inverse:hover {
                background-color: #fafafa;
                border-color: #777;
            }

            .btn.btn_inverse:active {
                background-color: #fafafa;
                border-color: #777;
            }

            .btn.btn_inverse.btn_disable {
                background-color: #555;
                color: #aaa;
                border-color: #444;
                pointer-events: none;
                cursor: default;
            }
        /*#endregion*/
        /*#region black*/
        .btn.btn_green {
            color: white;
            background-color: #0aa699;
            border-color: #0aa699;
        }

            .btn.btn_green:hover {
                color: white;
                background-color: #088076;
                border-color: #088076;
            }

            .btn.btn_green:active {
                color: white;
                background-color: #0aa699;
                border-color: #0aa699;
            }

            .btn.btn_green.btn_disable {
                background-color: #555;
                color: #aaa;
                border-color: #444;
                pointer-events: none;
                cursor: default;
            }
        /*#endregion*/
        /*#region sys do*/
        .btn.btn_sysDo {
            color: #fff;
            background-color: #5dc4bf;
            border-color: #4abdb8;
        }

            .btn.btn_sysDo:hover {
                background-color: #40aea9;
                border-color: #369490;
            }

            .btn.btn_sysDo:active {
                background-color: #40aea9;
                border-color: #369490;
            }
        /*#endregion*/


        .btn.btn_disable {
            pointer-events: none;
            opacity: .65;
            cursor: initial;
        }

/*#endregion*/

/*#region textbox*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
    -webkit-transition-delay: 9999s;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(0,0,0,.4);
    font-size: .9em;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(0,0,0,.4);
    font-size: .9em;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(0,0,0,.4);
    font-size: .9em;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(0,0,0,.4);
    font-size: .9em;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(0,0,0,.4);
    font-size: .9em;
}

.textbox, input[type=text], select, input[type=number], textarea {
    color: #666;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: .9em;
    padding: 3px 10px;
    border-radius: 3px;
    margin: 4px;
    border-color: #ddd;
    transition: all .3s ease;
}

    .textbox:hover, .textbox:active, .textbox:focus,
    input[type=text]:hover, input[type=text]:active, input[type=text]:focus,
    input[type=number]:hover, input[type=number]:active, input[type=number]:focus,
    textarea:hover, textarea:active, textarea:focus {
        color: #555;
        border-color: #bbb;
    }

    select option {
        padding: 5px;
        line-height: 3rem;
        color: #000;
    }
/*#endregion*/


/*#region table*/
table {
    border-collapse: collapse;
    margin: 10px;
    width: 100%;
    border: 0px;
}

    table tr {
    }

    table > thead > tr > th {
        background-color: #f9f8f5;
        color: #6f7b8a;
        border-bottom: 3px solid #ddd;
        text-align: right;
    }

    table > tbody > tr {
        color: #777;
        border-bottom: 1px solid #efefef;
    }

        table > tbody > tr:nth-child(2n) {
            background-color: #fdfdfc;
        }

        table > thead > tr > th,
        table > tbody > tr > td {
            padding: 10px;
            border-left: 0;
            border-right: 0;
            border-top: 0;
            vertical-align: top;
        }

        table tr:hover,
        table > tbody > tr:nth-child(2n):hover {
            background-color: #f5f5f5;
        }
/*#endregion*/

/*#region breadcrump*/
.breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-weight: 100;
}

    .breadcrumb ul li {
        float: right;
        padding: 0px 2px;
        color: #999;
    }

.breadcrumb li span {
    position: relative;
}
/*#endregion*/
/*#endregion*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 4. Media Queries  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*#region media queries*/

/*xxsd*/
@media only screen and (min-width:320px) {
    .panel.panel_grid-xxsd-1 {
        width: 8.333333%;
    }

    .grid_offset-xxsd-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-xxsd-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-2 {
        width: 16.666666%;
    }

    .grid_offset-xxsd-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-xxsd-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-3 {
        width: 25%;
    }

    .grid_offset-xxsd-3 {
        margin-right: 25%;
    }

    .en .grid_offset-xxsd-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-4 {
        width: 33.333333%;
    }

    .grid_offset-xxsd-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-xxsd-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-5 {
        width: 41.666666%;
    }

    .grid_offset-xxsd-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-xxsd-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-6 {
        width: 50%;
    }

    .grid_offset-xxsd-6 {
        margin-right: 50%;
    }

    .en .grid_offset-xxsd-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-7 {
        width: 58.333333%;
    }

    .grid_offset-xxsd-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-xxsd-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-8 {
        width: 66.666666%;
    }

    .grid_offset-xxsd-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-xxsd-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-9 {
        width: 75%;
    }

    .grid_offset-xxsd-9 {
        margin-right: 75%;
    }

    .en .grid_offset-xxsd-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-10 {
        width: 83.333333%;
    }

    .grid_offset-xxsd-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-xxsd-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-11 {
        width: 91.666666%;
    }

    .grid_offset-xxsd-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-xxsd-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxsd-12 {
        width: 100%;
    }

    .grid_offset-xxsd-12 {
        margin-right: 100%;
    }

    .en .grid_offset-xxsd-12 {
        margin-left: 100%;
        margin-right: 0;
    }
}
/*xsd*/
@media only screen and (min-width:321px) {
    .panel.panel_grid-xsd-1 {
        width: 8.333333%;
    }

    .grid_offset-xsd-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-xsd-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-2 {
        width: 16.666666%;
    }

    .grid_offset-xsd-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-xsd-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-3 {
        width: 25%;
    }

    .grid_offset-xsd-3 {
        margin-right: 25%;
    }

    .en .grid_offset-xsd-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-4 {
        width: 33.333333%;
    }

    .grid_offset-xsd-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-xsd-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-5 {
        width: 41.666666%;
    }

    .grid_offset-xsd-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-xsd-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-6 {
        width: 50%;
    }

    .grid_offset-xsd-6 {
        margin-right: 50%;
    }

    .en .grid_offset-xsd-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-7 {
        width: 58.333333%;
    }

    .grid_offset-xsd-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-xsd-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-8 {
        width: 66.666666%;
    }

    .grid_offset-xsd-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-xsd-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-9 {
        width: 75%;
    }

    .grid_offset-xsd-9 {
        margin-right: 75%;
    }

    .en .grid_offset-xsd-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-10 {
        width: 83.333333%;
    }

    .grid_offset-xsd-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-xsd-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-11 {
        width: 91.666666%;
    }

    .grid_offset-xsd-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-xsd-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xsd-12 {
        width: 100%;
    }

    .grid_offset-xsd-12 {
        margin-right: 100%;
    }

    .en .grid_offset-xsd-12 {
        margin-left: 100%;
        margin-right: 0;
    }
}
/*sd*/
@media only screen and (min-width:480px) {
    .panel.panel_grid-sd-1 {
        width: 8.333333%;
    }

    .grid_offset-sd-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-sd-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-2 {
        width: 16.666666%;
    }

    .grid_offset-sd-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-sd-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-3 {
        width: 25%;
    }

    .grid_offset-sd-3 {
        margin-right: 25%;
    }

    .en .grid_offset-sd-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-4 {
        width: 33.333333%;
    }

    .grid_offset-sd-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-sd-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-5 {
        width: 41.666666%;
    }

    .grid_offset-sd-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-sd-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-6 {
        width: 50%;
    }

    .grid_offset-sd-6 {
        margin-right: 50%;
    }

    .en .grid_offset-sd-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-7 {
        width: 58.333333%;
    }

    .grid_offset-sd-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-sd-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-8 {
        width: 66.666666%;
    }

    .grid_offset-sd-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-sd-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-9 {
        width: 75%;
    }

    .grid_offset-sd-9 {
        margin-right: 75%;
    }

    .en .grid_offset-sd-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-10 {
        width: 83.333333%;
    }

    .grid_offset-sd-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-sd-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-11 {
        width: 91.666666%;
    }

    .grid_offset-sd-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-sd-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-sd-12 {
        width: 100%;
    }

    .grid_offset-sd-12 {
        margin-right: 100%;
    }

    .en.grid_offset-sd-12 {
        margin-left: 100%;
        margin-right: 0;
    }
}
/*nd*/
@media only screen and (min-width:600px) {
    body {
        font-size: 14px;
    }

    .panel.panel_grid-nd-1 {
        width: 8.333333%;
    }

    .grid_offset-nd-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-nd-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-2 {
        width: 16.666666%;
    }

    .grid_offset-nd-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-nd-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-3 {
        width: 25%;
    }

    .grid_offset-nd-3 {
        margin-right: 25%;
    }

    .en .grid_offset-nd-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-4 {
        width: 33.333333%;
    }

    .grid_offset-nd-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-nd-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-5 {
        width: 41.666666%;
    }

    .grid_offset-nd-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-nd-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-6 {
        width: 50%;
    }

    .grid_offset-nd-6 {
        margin-right: 50%;
    }

    .en .grid_offset-nd-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-7 {
        width: 58.333333%;
    }

    .grid_offset-nd-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-nd-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-8 {
        width: 66.666666%;
    }

    .grid_offset-nd-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-nd-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-9 {
        width: 75%;
    }

    .grid_offset-nd-9 {
        margin-right: 75%;
    }

    .en .grid_offset-nd-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-10 {
        width: 83.333333%;
    }

    .grid_offset-nd-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-nd-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-11 {
        width: 91.666666%;
    }

    .grid_offset-nd-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-nd-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-nd-12 {
        width: 100%;
    }

    .grid_offset-nd-12 {
        margin-right: 100%;
    }

    .en .grid_offset-nd-12 {
        margin-left: 100%;
        margin-right: 0;
    }
}
/*ld*/
@media only screen and (min-width:768px) {
    .panel.panel_grid-ld-1 {
        width: 8.333333%;
    }

    .grid_offset-ld-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-ld-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-2 {
        width: 16.666666%;
    }

    .grid_offset-ld-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-ld-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-3 {
        width: 25%;
    }

    .grid_offset-ld-3 {
        margin-right: 25%;
    }

    .en .grid_offset-ld-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-4 {
        width: 33.333333%;
    }

    .grid_offset-ld-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-ld-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-5 {
        width: 41.666666%;
    }

    .grid_offset-ld-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-ld-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-6 {
        width: 50%;
    }

    .grid_offset-ld-6 {
        margin-right: 50%;
    }

    .en .grid_offset-ld-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-7 {
        width: 58.333333%;
    }

    .grid_offset-ld-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-ld-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-8 {
        width: 66.666666%;
    }

    .grid_offset-ld-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-ld-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-9 {
        width: 75%;
    }

    .grid_offset-ld-9 {
        margin-right: 75%;
    }

    .en .grid_offset-ld-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-10 {
        width: 83.333333%;
    }

    .grid_offset-ld-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-ld-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-11 {
        width: 91.666666%;
    }

    .grid_offset-ld-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-ld-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-12 {
        width: 100%;
    }

    .grid_offset-ld-12 {
        margin-right: 100%;
    }

    .en .grid_offset-ld-12 {
        margin-left: 100%;
        margin-right: 0;
    }
}
/*xld*/
@media only screen and (min-width:992px) {
    .panel.panel_grid-xld-1 {
        width: 8.333333%;
    }

    .grid_offset-xld-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-xld-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-2 {
        width: 16.666666%;
    }

    .grid_offset-xld-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-xld-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-3 {
        width: 25%;
    }

    .grid_offset-xld-3 {
        margin-right: 25%;
    }

    .en .grid_offset-xld-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-4 {
        width: 33.333333%;
    }

    .grid_offset-xld-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-xld-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-5 {
        width: 41.666666%;
    }

    .grid_offset-xld-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-xld-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-6 {
        width: 50%;
    }

    .grid_offset-xld-6 {
        margin-right: 50%;
    }

    .en .grid_offset-xld-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-7 {
        width: 58.333333%;
    }

    .grid_offset-xld-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-xld-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-8 {
        width: 66.666666%;
    }

    .grid_offset-xld-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-xld-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-9 {
        width: 75%;
    }

    .grid_offset-xld-9 {
        margin-right: 75%;
    }

    .en .grid_offset-xld-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-10 {
        width: 83.333333%;
    }

    .grid_offset-xld-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-xld-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-11 {
        width: 91.666666%;
    }

    .grid_offset-xld-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-xld-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xld-12 {
        width: 100%;
    }

    .grid_offset-xld-12 {
        margin-right: 100%;
    }

    .en .grid_offset-xld-12 {
        margin-left: 100%;
        margin-right: 0;
    }
}
/*xxld*/
@media only screen and (min-width:1200px) {

    .panel.panel_grid-xxld-1 {
        width: 8.333333%;
    }

    .grid_offset-xxld-1 {
        margin-right: 8.333333%;
    }

    .en .grid_offset-xxld-1 {
        margin-left: 8.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-2 {
        width: 16.666666%;
    }

    .grid_offset-xxld-2 {
        margin-right: 16.666666%;
    }

    .en .grid_offset-xxld-2 {
        margin-left: 16.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-3 {
        width: 25%;
    }

    .grid_offset-xxld-3 {
        margin-right: 25%;
    }

    .en .grid_offset-xxld-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-4 {
        width: 33.333333%;
    }

    .grid_offset-xxld-4 {
        margin-right: 33.333333%;
    }

    .en .grid_offset-xxld-4 {
        margin-left: 33.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-5 {
        width: 41.666666%;
    }

    .grid_offset-xxld-5 {
        margin-right: 41.666666%;
    }

    .en .grid_offset-xxld-5 {
        margin-left: 41.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-6 {
        width: 50%;
    }

    .grid_offset-xxld-6 {
        margin-right: 50%;
    }

    .en .grid_offset-xxld-6 {
        margin-left: 50%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-7 {
        width: 58.333333%;
    }

    .grid_offset-xxld-7 {
        margin-right: 58.333333%;
    }

    .en .grid_offset-xxld-7 {
        margin-left: 58.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-ld-8 {
        width: 66.666666%;
    }

    .grid_offset-xxld-8 {
        margin-right: 66.666666%;
    }

    .en .grid_offset-xxld-8 {
        margin-left: 66.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-9 {
        width: 75%;
    }

    .grid_offset-xxld-9 {
        margin-right: 75%;
    }

    .en .grid_offset-xxld-9 {
        margin-left: 75%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-10 {
        width: 83.333333%;
    }

    .grid_offset-xxld-10 {
        margin-right: 83.333333%;
    }

    .en .grid_offset-xxld-10 {
        margin-left: 83.333333%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-11 {
        width: 91.666666%;
    }

    .grid_offset-xxld-11 {
        margin-right: 91.666666%;
    }

    .en .grid_offset-xxld-11 {
        margin-left: 91.666666%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-12 {
        width: 100%;
    }

    .grid_offset-xxld-12 {
        margin-right: 100%;
    }

    .en .grid_offset-xxld-12 {
        margin-left: 100%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-3 {
        width: 25%;
    }

    .grid_offset-xxld-3 {
        margin-right: 25%;
    }

    .en .grid_offset-xxld-3 {
        margin-left: 25%;
        margin-right: 0;
    }

    .panel.panel_grid-xxld-6 {
        width: 50%;
    }

    .grid_offset-xxld-6 {
        margin-right: 50%;
    }

    .en .grid_offset-xxld-6 {
        margin-left: 50%;
        margin-right: 0;
    }
}

/*#endregion*/




.form {
    padding: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}


.form-element {
    width: 100%;
    display: inline-block;
    padding: 10px 0px;
}

    .form-element strong {
        font-size: 16px;
        margin-bottom: 3px;
    }