* {

    -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

            box-sizing: border-box;

}

html, body, form {

    padding:0px;

    margin:0px;

    width:100%;

    height:100%;

}

.FH {

    clear:both;

}

.FH:after {/* Fix Inner Height */

    content: "";

    display: block;

    clear:both;

}

.CB { /* Clear both */

    clear: both;

}



/* Tables */

.TB {

    display:table;

    width:100%;

    direction:ltr;

}

.TB .TR {

    display:table-row;

}

.TB .TH {

    display: table-header-group;

    background-color: #dadada;

    color: #848484;

    clear: both;

    font-weight: bold;

    position: relative;

    border-bottom: solid 1px #E0E0E0;

    font-size: 14px;

}

.TB .THM {/*Table Header Main*/

    display: table-header-group;

    background-color: #888888;

    color: #fff;

    clear: both;

    font-weight: bold;

    position: relative;

    border-bottom: solid 1px #888888;

    font-size: 18px;

}

    .TB .THM .TC {

        border:none !important;

    }

.TB .TC {

    display:table-cell;

    padding:5px;

    vertical-align:middle;

    /*white-space:nowrap;*/

    text-align:left;

}

.TB .TC.TAC {

    text-align:center;

}

.TB .TRG {

    display: table-row-group;

}

.TB.TRE1 .TR {/* Even Row */

    background-color:#eee;

}

.TB.TRE1 .TR:nth-child(2n+1) {

    background-color:#fff;

}

.TB.SVAT .TC {/* Table with vertical top in cell */

    vertical-align:top;

}

.TB.TBo1 .TC {/* Table with border */

    border-bottom:solid 1px #eee;

    border-left:solid 1px #eee;

}

.TB.TBo1 .TC:first-child {

    border-right:solid 1px #eee;

}

.TB.TBo1 .TR:first-child .TC, .TB.TBo1 .TH:first-child .TC {

    border-top:solid 1px #eee;

}

    .TB.Pa5 .TC {

        padding:5px;

    }

    .TB.Pa7 .TC {

        padding:7px;

    }

/* Styles */

.SDN {

    display:none !important;

}

.SMa5 {

    margin:5px;

}

.SMaT5 {

    margin-top:5px;

}

.SMaB5 {

    margin-bottom:5px;

}

.SPa5 {

    padding:5px;

}

.SFwB {

    font-weight:bold;

}

.SBC1 {

    background-color:gray;

}

.SVAT {

    vertical-align:top;

}

.STaR {

    text-align:left;

}

.STaL {

    text-align:right;

}

.STaC {

    text-align:center;

}

.SFL {

    float:right;

}

.SFR {

    float:left;

}

.SDRTL {

    direction:ltr;

}

.SDLTR {

    direction:ltr;

}

        /*#region AnimateInputGroup */





        .AnInGr {

            position: relative;

            margin-bottom: 45px;

        }



            .AnInGr input {

                font-size: 18px;

                padding: 10px 10px 10px 5px;

                display: block;

                width: 100%;

                border: none;

                border-bottom: 1px solid #757575;

                margin-top: 40px;

            }



                .AnInGr input:focus {

                    outline: none;

                }



            /* LABEL ======================================= */

            .AnInGr .Title {

                color: #211d1c;

                font-size: 18px;

                font-weight: normal;

                position: absolute;

                pointer-events: none;

                left: 5px;

                top: 10px;

                transition: 0.2s ease all;

                -moz-transition: 0.2s ease all;

                -webkit-transition: 0.2s ease all;

            }



            /* active state */

            .AnInGr input:focus ~ .Title, .AnInGr input.hasValue ~ .Title {

                top: -25px;

                font-size: 18px;

                color: #fff;

            }



            /* BOTTOM BARS ================================= */

            .AnInGr .bar {

                position: relative;

                display: block;

                width: 100%;

            }



                .AnInGr .bar:before, .AnInGr .bar:after {

                    content: '';

                    height: 2px;

                    width: 0;

                    bottom: 0px;

                    position: absolute;

                    background: #211d1c;

                    transition: 0.2s ease all;

                    -moz-transition: 0.2s ease all;

                    -webkit-transition: 0.2s ease all;

                }



                .AnInGr .bar:before {

                    right: 50%;

                }



                .AnInGr .bar:after {

                    left: 50%;

                }



            /* active state */

            .AnInGr input:focus ~ .bar:before, .AnInGr input:focus ~ .bar:after {

                width: 50%;

            }



            /* HIGHLIGHTER ================================== */

            .AnInGr .highlight {

                position: absolute;

                height: 60%;

                width: 100px;

                top: 25%;

                right: 0;

                pointer-events: none;

                opacity: 0.5;

            }



            /* active state */

            .AnInGr input:focus ~ .highlight {

                -webkit-animation: inputHighlighter 0.3s ease;

                -moz-animation: inputHighlighter 0.3s ease;

                animation: inputHighlighter 0.3s ease;

            }



        /* ANIMATIONS ================ */

        @-webkit-keyframes inputHighlighter {

            from {

                background: #5264AE;

            }



            to {

                width: 0;

                background: transparent;

            }

        }



        @-moz-keyframes inputHighlighter {

            from {

                background: #5264AE;

            }



            to {

                width: 0;

                background: transparent;

            }

        }



        @keyframes inputHighlighter {

            from {

                background: #5264AE;

            }



            to {

                width: 0;

                background: transparent;

            }

        }



        /*#endregion */



/* Form Blocks */

.FO {



}

.FO .n {

    color: #ff0000;

    font-size: 14px;

    display: block;

}

.FO .hl {

    border:1px solid #a9a9a9!important;

    border-bottom: 1px solid #ff0000!important;

}

.FO .S {

    height: 35px;

    width: 140px;

}

.FO .IT {/* input text */

    width: 100%;

    padding: 7px;

    font-size: 14px;

    font-family: Tahoma;

    float:left;

    resize:none;

}

.FO .IT5 {

    padding: 7px;

    font-size: 14px;

    font-family: Tahoma;

    float:left;

    resize:none;

}

    .FO .IT2 {

        width:50px;

    }

    .FO .IT3 {

        width:100px;

    }

    .FO .IT4 {

        width:400px;

    }

.FO .T {

    padding: 10px;

    font-size: 16px;

    font-family: Tahoma;

    font-weight: bold;

}



@media only screen and (max-width: 500px) {

    .TB, .TB .TR, .TB .TC, .TB .TH {

        display: block;

    }



    .TBL, .TBL .TR, .TBL .TC, .TBL .TH {

        display: inline;

        float: right;

    }



        .TBL .TR {

            border-top: 10px solid #fff;

            width: 100%;

            border-bottom: 10px solid #fff;

            background-color: #d4d4d4;

            padding: 5px;

        }



            .TBL .TR:nth-child(2n+1) {

                background-color: #d4d4d4;

            }



            .TBL .TR .TC:first-child {

                display: block;

                float: none;

                width: 100%;

                position: relative;

                padding-right: 10px;

                font-weight: bold;

            }



        .TBL input[type=submit] {

            padding: 8px;

            padding-right: 10px;

            padding-left: 10px;

            min-width: 70px;

        }



    .TB .TH .TC {

        display: none;

    }



    .TB .TC:after {

        content: "";

        display: block;

        clear: both;

    }



    .TB .TRG {

        display: block;

        width: 100%;

    }



    .TB.TBo1 .TC {

        border: none;

    }



        .TB.TBo1 .TC:first-child {

            border: none;

        }

}

@media only screen and (min-width: 501px) and (max-width: 750px) {

    .TB, .TB .TR, .TB .TC, .TB .TH {

        display: block;

    }



    .TBL, .TBL .TR, .TBL .TC, .TBL .TH {

        display: inline;

        float: right;

    }



        .TBL .TR {

            border-top: 10px solid #fff;

            width: 100%;

            border-bottom: 10px solid #fff;

            background-color: #d4d4d4;

            padding: 5px;

        }



            .TBL .TR:nth-child(2n+1) {

                background-color: #d4d4d4;

            }



            .TBL .TR .TC:first-child {

                display: block;

                float: none;

                width: 100%;

                position: relative;

                padding-right: 10px;

                font-weight: bold;

            }



        .TBL input[type=submit] {

            padding: 8px;

            padding-right: 10px;

            padding-left: 10px;

            min-width: 70px;

        }



    .TB .TH .TC {

        display: none;

    }



    .TB .TC:after {

        content: "";

        display: block;

        clear: both;

    }



    .TB .TRG {

        display: block;

        width: 100%;

    }



    .TB.TBo1 .TC {

        border: none;

    }



        .TB.TBo1 .TC:first-child {

            border: none;

        }

}

@media only screen and (min-width: 751px) and (max-width: 1000px) {



}

@media only screen and (min-width: 1001px) {



}





.UFI {/* Upload File Input */

      background-color:#eee;

      border:solid 1px #A4AEB8;

      box-shadow: 0px 3px 5px #888888;

}



.LG {/* LinkGroup */

    padding-top: 10px;

    padding-bottom: 10px;

}

    .LG .LT {

        padding: 10px;

        border: outset 2px;

        background-color: #ebebeb;

        color: #2d462f;

        font-size: 13px;

        font-weight: bold;

        letter-spacing: 1px;

        font-family: arial;

        display:block;

        float:left;

    }

    .LG .LT:active, .LG .LT.Off {

        border: inset 2px;

    }

        .LG .LTH {

            display:none;

        }



/* Icons */

.Ic {

    position: relative;

    width: 25px;

    height: 25px;

    display:block;

}

.Ic:before {

    content: "";

    position: absolute;

    background-repeat: no-repeat;

    width: 14px;

    height: 14px;

    top: 50%;

    right: 50%;

    margin-right: -7px;

    margin-top: -7px;

    

}

    .Ic.IcOp:before {

        opacity: 0.7;

    }

    .Ic.Ic2:before {

        width: 25px;

        height: 25px;

        margin-right: -12.5px;

        margin-top: -12.5px;

    }

.Ic.Ed:before {/* Icon Editor */

    background-image: url(../Images/icons-png/edit-black.png);

}

.Ic.Del:before {/* Delete Editor */

    background-image: url(../Images/icons-png/delete-black.png);

}

.Ic.Us:before {/* User */

    background-image: url(../Images/icons-png/user-white.png);

}

    .Ic.Fa:before { /* Favorite */

        background-image: url('../icons-png-page/Favorite.png');

    }

    .Ic.Fa.On:before { 

        background-image: url('../icons-png-page/FavoriteOn.png');

    }

    .Ic.St:before { /* Star */

        background-image: url('../icons-png-page/Star.png');

    }

    .Ic.St.On:before { 

        background-image: url('../icons-png-page/StarOn.png');

    }

    .Ic.Ct:before { /* Comment */

        background-image: url('../icons-png-page/Comment.png');

    }

    .Ic.Ct.On:before { 

        background-image: url('../icons-png-page/CommentOn.png');

    }

    .Ic.PlB:before {

    background-image: url(../icons-png/plus-black.png);

    cursor:pointer;

    }

    .Ic.MiB:before {

        background-image: url(../icons-png/minus-black.png);

        cursor: pointer;

    }

    .Ic.Load {

        width:200px;

        height:200px;

        position: absolute;

        right: 50%;

        margin-right: -100px;

    }

.Ic.Load:before {/* User */

    background-image: url(../Images/ajax-loader.gif);

    width: 200px;

    height: 200px;

    margin-right: -100px;

    margin-top: -100px;

}



.IconText {

    float:right;

    padding:5px;

    color:#000;

}

    .IconText .Ic {

        float:left;

    }

    .IconText .Text {

        float: left;

        font-weight: bold;

        padding: 4px;

    }

.Ic.IcOp:hover.Ic.IcOp:before, .IconText:hover.IconText .IcOp:before {

    opacity: 1;

}



.Button {

    border-radius:5px;

    padding: 10px;

    padding-right: 20px;

    padding-left: 20px;

    text-align: center;

    color: #fff;

    font-size: 30px;

    direction: rtl;

    background-color: #e4178e;

    box-shadow: 0px 3px 5px #888888;

    margin-right:10px;

    text-decoration: none;

    -webkit-transition: all 0.3s;

            transition: all 0.3s;

    -webkit-appearance: none;



}

    .Button.On {

        background-color: #888888;

        box-shadow: 0px 2px 5px #888888;

    }

    .Button:hover {

        box-shadow: 0px 2px 5px #888888;

    }

    .Button:active {

        box-shadow: 0px 0px 0px #888888;

    }

.TitleAsButton {

    border-radius:5px;

    padding: 10px;

    text-align: center;

    color: #fff;

    font-size: 30px;

    direction: rtl;

    background-color: #692977;

    box-shadow: 0px 3px 5px #888888;

    margin-right:10px;

}

.RateIcon {

    position: absolute;

    bottom: 0px;

    right: 0px;

    padding: 15px;

    padding-right: 35px;



}



    .RateIcon .StOn:before {

        background-image: url('../icons-png-page/StarOn.png');

    }

    .RateIcon .StOn1:before {

        background-image: url('../icons-png-page/StarOn1.png');

    }



    .RateIcon > div > a:hover:before,

    .RateIcon > div > a:hover ~ a:before {

        background-image: url('../icons-png-page/StarOn2.png');

    }