@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/Iransans/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/Iransans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/Iransans/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/Iransans/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/Iransans/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/Iransans/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/Iransans/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/Iransans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/Iransans/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/Iransans/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/Iransans/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/Iransans/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum).eot');
    src: url('../fonts/Iransans/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/Iransans/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/Iransans/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/Iransans/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}


body {
    font-family: IRANSans;
}

.clear {
    clear: both;
}

.Header {
    background-image: url('../assets/fitness-man.jpg');
    background-position: center !important;
    background-size: cover !important;
    padding-bottom: 200px;
}

.TopBarHeader {
    width: 85%;
    margin: 0 auto;
    padding-top: 40px;
}

    .TopBarHeader .Logo {
        float: right;
        width: 123px;
        margin-top: 22px;
    }

.TopMenu {
    margin-right: 100px;
    float: right;
    margin-top: 40px;
    display:none;
}

    .TopMenu ul {
        list-style: none;
    }

        .TopMenu ul li {
            float: right;
        }

            .TopMenu ul li a {
                text-decoration: none;
                font-family: IRANSans;
                color: white;
                padding: 0px 27px;
            }

.ActionButton {
    background: #a51f38;
    height: 46px;
    padding: 12px 30px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

    .ActionButton:hover {
        color: white;
    }


.TopActions {
    float: left;
    margin-top: 30px;
}

    .TopActions a {
        float: left;
        margin-right: 10px;
        background: #a51f38;
        height: 46px;
        padding: 12px 30px;
        border-radius: 10px;
        color: white;
        text-decoration: none;
    }

.downloadAppLink {
    background-color: rgba(210, 210, 210, 0.5);
    border-radius: 16px;
    height: 46px;
    width: 166px;
    margin-right: 15%;
    position: relative;
}

    .downloadAppLink a {
        text-decoration: none;
        color: white;
        padding: 11px 40px;
        display: block;
    }

    .downloadAppLink span {
    }

    .downloadAppLink img {
        background-color: #a51f38;
        border-radius: 13px;
        padding: 5px 17px 8px 17px;
        margin-right: 10px;
        position: absolute;
        top: 4px;
        left: -30px;
        width: 59px;
    }

.initSection {
    margin-top: 100px;
}

    .initSection h2 {
        margin-right: 15%;
        color: white;
        margin-top: 26px;
        font-size: 32px;
    }

    .initSection p {
        margin-right: 15%;
        width: 400px;
        text-align: justify;
        color: #d9d9d9;
        font-size: 19px;
        line-height: 33px;
        margin-top: 20px;
        max-width: 90%;
    }

.infoSection {
    background: white;
    border-radius: 40px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin-top: -100px;
}

    .infoSection p {
        color: black;
        width: 100%;
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        margin-top: 50px;
        margin-bottom: 0px;
    }


    .infoSection span {
        color: #606060;
        width: 100%;
        text-align: center;
        display: block;
        font-size: 20px;
        font-weight: 500;
    }

.ServicesSection {
    background: rgba(165, 31, 56, 0.12);
    border-radius: 20px;
    width: 90%;
    margin: 80px auto;
    padding: 0px 40px;
    height: 350px;
}

    .ServicesSection h3 {
        text-align: center;
        color: #272C49;
        font-size: 36px;
        padding-top: 40px;
    }

.serviceItem {
    background: white;
    width: 95%;
    margin: 30px auto 0px auto;
    padding: 15px 45px 50px 45px;
    border-radius: 35px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    min-height: 353px;
}

    .serviceItem img {
        height: 65px;
        display: block;
        margin: 35px auto;
    }

    .serviceItem h2 {
        text-align: center;
        font-size: 25px;
        margin-bottom: 35px;
    }

    .serviceItem p {
        color: #808080;
        text-align: center;
    }

.AboutSection {
    background-image: url('../assets/Mask.jpg');
    background-position: left !important;
    background-size: cover !important;
    margin-top: 180px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
}

    .AboutSection span {
        color: white;
        margin-top: 89px;
        display: block;
        font-size: 29px;
        font-weight: bold;
    }

    .AboutSection h3 {
        color: white;
        font-size: 22px;
        margin: 23px 0px;
        font-weight: 500;
        width: 90%;
        line-height: 42px;
    }

    .AboutSection p {
        color: #bbb;
        text-align: justify;
        width: 90%;
        font-size: 20px;
        line-height: 38px;
    }

    .AboutSection a {
        margin-right: 10px;
        background: white;
        padding: 12px 30px;
        border-radius: 10px;
        color: #a51f38;
        text-decoration: none;
        margin-top: 50px;
        float: left;
        margin-left: 11%;
    }

.newsSection {
    width: 90%;
    margin: 50px auto;
}

    .newsSection h3 {
        text-align: center;
        color: #272C49;
        font-size: 36px;
        padding-top: 40px;
    }

.newsImg {
    width: 100%;
    padding-bottom: 60%;
    background-position: center !important;
    background-size: cover !important;
    border-radius: 20px;
}

.newsItem {
    width: 97%;
    margin: 20px auto;
    background: white;
    border: 2px solid #0F347F33;
    border-radius: 20px;
    padding-bottom: 40px;
}

    .newsItem > span {
        color: #6F707A;
        text-align: right;
        margin-right: 40px;
        margin-top: 20px;
        display: block;
    }

    .newsItem > h2 {
        margin-right: 40px;
        font-size: 24px;
        font-weight: 500;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: justify;
        margin-left: 40px;
        line-height: 42px;
        color: black;
    }

    .newsItem > p {
        margin: 0px 40px;
        text-align: justify;
        color: #6F707A;
        line-height: 32px;
    }

.author {
    margin-top: 25px;
}

.authorImg {
    float: right;
    width: 60px;
    height: 60px;
    border-radius: 200px;
    margin-right: 40px;
}

.authorContent {
    float: right;
    margin-right: 15px;
}

    .authorContent p {
        margin-bottom: 0px;
        margin-top: 10px;
        color: black;
    }

    .authorContent span {
        text-align: right;
        width: 100%;
        display: block;
        color: #6F707A;
    }

.newsSection a {
    text-decoration: none;
}

.newsSection > a {
    background: #a51f38;
    padding: 12px 30px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    margin: 30px auto;
    display: block;
    width: 183px;
    font-size: 23px;
}

.ContactSection {
    margin-top: 100px;
    margin-bottom: 100px;
    position: relative;
}

    .ContactSection img {
        width: 100%;
    }

    .ContactSection h3 {
        color: #A51F38;
        margin-right: 15%;
        font-size: 48px;
        margin-top: 230px;
    }

    .ContactSection p {
        color: #142641;
        margin: 50px 15%;
        font-size: 21px;
        line-height: 40px;
        text-align: center;
    }

.contactAction {
    float: left;
    margin-left: 15%;
    border-radius: 60px;
    color: #A51F38;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 18px 42px;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
}

    .contactAction:hover {
        color: #A51F38;
    }

.phoneAction {
    float: left;
    margin-left: 30px;
    border-radius: 60px;
    color: #132273;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 18px;
    text-decoration: none;
}

    .phoneAction img {
        width: 25px;
    }

.footerSection {
    background: #a51f38;
    position:relative;
}

    .footerSection .footerlogo {
        display: block;
        width: 150px;
        margin: 10px auto;
        padding: 20px 0px;
    }

    .footerSection p {
        width: 406px;
        margin: 0 auto;
        color: white;
        margin-bottom: 20px;
        text-align: justify;
        max-width: 90%;
        font-size: 15px;
    }



.seperateSection {
    border: 1px solid rgba(126, 140, 219, 0.38);
    width: 555px;
    margin: 21px auto 10px auto;
    height: 1px;
}

.footerSection span {
    display: block;
    color: #d9d9d9;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.NotIndexHeader {
    padding: unset;
    background: unset;
}

    .NotIndexHeader .TopMenu li a {
        color: black;
    }

    .NotIndexHeader .TopBarHeader {
        padding-top: 0px;
    }

.AboutUsSection1 {
    background-image: url('../assets/aboutus1.jpg');
    background-position: top !important;
    background-size: cover !important;
    height: 550px;
    margin-top: 20px;
    margin-right: -12px;
    margin-left: -12px;
}

    .AboutUsSection1 h2 {
        color: white;
        width: 345px;
        margin-right: 190px;
        padding-top: 110px;
        font-size: 44px;
        line-height: 65px;
    }

    .AboutUsSection1 p {
        color: white;
        width: 500px;
        margin-right: 190px;
        height: 150px;
        overflow: hidden;
        margin-top: 60px;
        font-size: 20px;
        text-align: justify;
        line-height: 38px;
    }

.AboutUsSection2 {
    margin-top: 40px;
    margin-right: -12px;
    margin-left: -12px;
}

    .AboutUsSection2 .rightSection {
        width: 50%;
        float: right;
    }

        .AboutUsSection2 .rightSection img {
            border-radius: 20px;
            width: 90%;
            display: block;
            margin-right: 3%;
        }

    .AboutUsSection2 .leftSection {
        width: 40%;
        float: right;
    }

        .AboutUsSection2 .leftSection h2 {
            color: #370000;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .AboutUsSection2 .leftSection p {
            color: #370000;
            line-height: 44px;
            font-size: 18px;
            height: 140px;
            overflow: hidden;
            text-align: justify;
        }

.AboutUsSection3 {
    background-image: url('../assets/aboutus3.jpg');
    background-position: top !important;
    background-size: cover !important;
    margin-right: -12px;
    margin-left: -12px;
}

    .AboutUsSection3 h2 {
        color: white;
        text-align: center;
        padding-top: 38px;
        font-size: 35px;
        font-weight: bold;
    }

.specItems {
    margin-top: 30px;
    padding-bottom: 30px;
    width: 90%;
    margin: 0 auto;
}

.specItemWrapper {
    width: 100%;
    padding-top: 30px;
}

.specItem {
    width: 90%;
    margin: 0 auto;
    border-radius: 40px;
    background: white;
    position: relative;
    padding-bottom: 20px;
    padding-top: 35px;
}

    .specItem h3 {
        color: #370000;
        text-align: center;
        margin: 15px 0px 20px 0px;
        font-weight: bold;
        padding: 0px 20px;
    }

    .specItem p {
        color: #370000;
        text-align: justify;
        height: 205px;
        overflow: hidden;
        padding: 0px 35px;
        font-size: 17px;
        line-height: 33px;
    }

.specIcon {
    position: absolute;
    background: #F55D1A;
    border-radius: 100%;
    top: 0px;
    width: 60px;
    height: 60px;
    text-align: center;
    right: calc(50% - 30px);
    z-index: 10;
}

    .specIcon img {
        width: 40px !important;
        margin-right: 10px;
        margin-top: 10px;
        height: 40px !important;
    }

.AboutUsSection4 .backSection {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 100px auto;
    position: relative;
}

    .AboutUsSection4 .backSection img {
        width: 100%;
        margin-top: 50px;
        border-radius: 70px;
    }

.AboutUsSection4 .qoute {
    background: white;
    position: absolute;
    right: 90px;
    top: 25%;
    width: 400px;
    border-radius: 25px;
    padding: 65px 50px;
}

    .AboutUsSection4 .qoute p {
        color: #370000;
    }

.ArticleMainArea {
    background: #F0ECE8;
    margin-right: -12px;
    margin-left: -12px;
}

.ArticlSection1 {
    height: 400px;
    background-image: url('../assets/articlesback.jpg');
    background-position: center !important;
    background-size: cover !important;
    position: relative;
    margin-top: 20px;
}

    .ArticlSection1 h2 {
        color: white;
        bottom: calc(50% - 40px);
        right: 70px;
        font-size: 66px;
        position: absolute;
    }

.ArticlSection2 {
    height: 60px;
    background: white;
}

.menuTitle {
    float: right;
    cursor: pointer;
    margin-right: 100px;
    height: 50px;
}

    .menuTitle span {
        color: #F14209;
        font-size: 22px;
        padding-top: 14px;
        display: block;
        float: right;
    }

    .menuTitle img {
        width: 26px;
        margin-top: 21px;
        margin-right: 15px;
    }

    .menuTitle .subMenu {
        display: none;
        background: white;
        border-radius: 10px;
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
        width: 200px;
        padding: 10px 20px;
        right: 100px;
        top: 50px;
    }

        .menuTitle .subMenu a {
            display: block;
            text-decoration: none;
            padding: 5px 0px;
            color: #370000;
        }

.Menu {
    position: relative;
}

.menuTitle:hover .subMenu {
    display: block;
}

.ArticlSection3 {
    padding-bottom: 40px;
    width: 95%;
    margin: 40px auto 0px auto;
}

    .ArticlSection3 a {
        color: unset;
    }

.oneArticle {
    width: 22%;
    margin: 0 1.5% 30px 1.5%;
    float: right;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 9px;
}

    .oneArticle .ArticleImg {
        width: 100%;
        height: 140px;
        background-position: center !important;
        background-size: cover !important;
    }

    .oneArticle span {
        color: #707070;
        padding: 0px 30px;
        margin-top: 10px;
        display: block;
    }

    .oneArticle h2 {
        font-size: 19px;
        padding: 10px 30px;
        text-align: justify;
        height: 70px;
        line-height: 30px;
        overflow: hidden;
    }

    .oneArticle p {
        margin: 10px 30px;
        text-align: justify;
        height: 165px;
        overflow: hidden;
        line-height: 32px;
    }

.articleHeader {
    height: 500px;
    background-position: center !important;
    background-size: cover !important;
    margin-right: -12px;
    margin-left: -12px;
    margin-top: 20px;
}

.articleContent {
    width: 90%;
    margin: 40px auto;
}

    .articleContent h1 {
        text-align: center;
    }

.ArticleText img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}

.ArticleText {
    margin-top: 50px;
}

    .ArticleText p {
        font-size: 18px;
        text-align: justify;
        line-height: 39px;
        margin-bottom: 30px;
    }

.articleMeta {
    margin-top: 30px;
}

    .articleMeta span, .ShareSection span {
        float: right;
        color: #8b8c8e;
        font-weight: bold;
        margin-left: 40px;
    }

.tags a {
    text-decoration: none;
    color: black;
    margin-left: 20px;
    color: #a51f38;
}

.ShareSection {
    margin-top: 20px;
}

    .ShareSection .socialSection {
        float: right;
        width: unset;
    }

        .ShareSection .socialSection a:hover {
            background: #132273;
        }

.ContactPage {
    margin-top: 20px;
    margin-left: -12px;
    margin-right: -12px;
    border-top: 2px solid #cecece;
}

    .ContactPage h3 {
        margin-top: 40px;
        margin-right: calc(7.5% + 12px);
    }

    .ContactPage p {
        margin-right: calc(7.5% + 12px);
        margin-top: 30px;
    }

    .ContactPage ul {
        list-style: none;
        margin-right: calc(7.5% + 12px);
        padding: 0px;
        margin-top: 30px;
    }

        .ContactPage ul li {
            float: right;
        }

            .ContactPage ul li a {
                background: rgb(19, 34, 115);
                padding: 10px;
                margin-left: 10px;
                width: 50px;
                display: block;
                border-radius: 50px;
                height: 50px;
            }

                .ContactPage ul li a img {
                    width: 30px;
                }

.contactCaption {
    width: 70%;
    margin: 30px auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 41px;
    text-align: center;
    min-width: 300px;
    font-size: 27px;
    font-weight: 300;
    border-radius: 20px;
}

.call {
    width: 157px;
    margin: 6px auto 10px auto;
}

    .call img {
        width: 30px;
        float: right;
    }

    .call span {
        color: white;
        float: right;
        margin-top: 5px;
        margin-right: 10px;
    }

.socialSection {
    width: 380px;
    margin: 0 auto 50px auto;
}

.socialItem {
    float: right;
    width: 75px;
    height: 75px;
    text-align: center;
    background: rgb(165,31,56,0.3);
    border-radius: 15px;
    margin: 0px 10px;
}

    .socialItem img {
        width: 40px;
        height: 40px;
        margin-top: 19px;
    }

.LoginSection {
    width: 90%;
    margin: 60px auto 200px auto;
}

    .LoginSection .imgSection {
        float: right;
        width: 50%;
    }

    .LoginSection .formSection {
        float: right;
        width: 50%;
    }

    .LoginSection .imgSection img {
        width: 90%;
        margin: 0 auto;
        display: block;
        border-radius: 40px;
    }

    .LoginSection .formSection h3 {
        color: #a51f38;
        margin-right: 2%;
    }

    .LoginSection .formSection .subTitle {
        color: #3E3E3E;
        margin-bottom: 20px;
        margin-right: 2%;
        display: block;
        margin-top: 10px;
    }

    .LoginSection .formSection .form_input {
        width: 48%;
        margin-right: 2%;
        float: right;
        border-radius: 10px;
        margin-top: 10px;
        background: #F6F6F6;
        border: none;
        height: 42px;
        padding: 10px 15px;
        font-size: 14px;
    }

    .LoginSection .formSection .big_input {
        width: 98%;
    }

    .LoginSection .formSection button {
        float: left;
        margin-top: 20px;
    }

.StatusSelector {
    width: 48%;
    margin-right: 2%;
    float: right;
    margin-top: 10px;
    height: 40px;
}

.select2-container--default .select2-selection--single {
    background: #F6F6F6 !important;
    border: none !important;
    border-radius: 10px !important;
}

    .select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
        font-size: 14px !important;
    }

.TextActionButton {
    float: right;
    color: #3E3E3E;
    margin-top: 10px;
    margin-right: 2%;
    margin-left: 10px;
    font-size: 14px;
    margin-bottom: 0px;
}

.RegisterButton {
    display: block;
    float: right;
    height: 40px;
    padding: 8px 18px;
    background: #ffc500;
}

.TextActionButton img {
    width: 30px;
}

.HLine {
    width: 98%;
    margin: 15px auto 0px auto;
    height: 2px;
    border: 2px solid #eaeaea;
    float: left;
}

.ErrorMessage {
    color: red;
    display: none;
}

.validation-summary-errors {
    background: #ff2c2c;
    color: white;
    padding: 6px;
    font-size: 14px;
    margin-top: 10px;
    border-radius: 10px;
}

    .validation-summary-errors ul {
        margin-bottom: 0px;
        list-style: none;
        padding: 0px 10px;
    }

.PackageProgress {
    margin: 80px auto 70px auto;
    width: 564px;
}

.ProgressItem {
    width: 75px;
    height: 75px;
    position: relative;
    border: 1px solid #464646;
    border-radius: 10px;
}

    .ProgressItem img {
        width: 35px;
        height: 35px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.ProgressLine {
    width: 78px;
    float: right;
    margin: 27px 5px;
}

.ProgressItem.active {
    background: #a51f38;
    border: none;
}

.ProgressItemWrapper {
    float: right;
}

    .ProgressItemWrapper span {
        display: block;
        text-align: center;
        color: #3E3E3E;
        font-size: 13px;
        width: 75px;
        margin-top: 10px;
    }

.backendPkgSelector {
    width: 95%;
    margin: 0px auto 200px auto;
    max-width: 1200px;
    background: #f4e3e7;
    border-radius: 30px;
    height: 350px;
}

    .backendPkgSelector h2 {
        color: #272C49;
        text-align: center;
        padding: 32px;
        font-size: 28px;
    }

.PkgItems {
    width: 95%;
    margin: 0 auto;
}

.PkgItemWrapper {
    width: 29%;
    margin: 0 2.15%;
    float: right;
    cursor: pointer;
}

.PkgItem {
    width: 100%;
    background: white;
    border-radius: 15px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
    padding-top: 20px;
    position: relative;
    padding-bottom: 85px;
}

    .PkgItem h3 {
        background: #A51F38;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        color: white;
        font-weight: 500;
        border-radius: 10px;
        padding: 16px;
        font-size: 22px;
    }

    /*    .PkgItem img {
        height: 50px;
        margin-right: calc(50% - 25px);
        margin-top: 20px;
        margin-bottom: 20px;
    } */
    .PkgItem p {
        color: #808080;
        width: 90%;
        margin: 15px auto;
        text-align: center;
        line-height: 30px;
        max-width: 300px;
        height: 120px;
    }

    .PkgItem .PriceSection {
        width: 220px;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        background: #EFEFEF;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2) inset;
        height: 76px;
        position: absolute;
        bottom: 0px;
        right: calc(50% - 110px);
    }

        .PkgItem .PriceSection p {
            text-align: center;
            color: #808080;
            padding-top: 23px;
            font-size: 38px;
            font-weight: bold;
            margin-top: 0px;
        }

        .PkgItem .PriceSection span {
            font-size: 16px;
            font-weight: normal;
        }

.PkgItemWrapper .SelectElement {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 3px solid #A51F38;
    margin: 25px auto;
    transition: all ease-in-out 0.3s;
}

    .PkgItemWrapper .SelectElement.active, .PkgItemWrapper:hover .SelectElement {
        background: #A51F38;
    }

.PackageSelector .ActionButton {
    display: block;
    width: 170px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 100px;
    font-size: 17px;
    margin-top: 255px;
}

.PkgItem .TimeSection {
    position: absolute;
    top: -20px;
    left: 16px;
    background: white;
    border-radius: 11px;
    color: #3E3E3E;
    padding: 4px 13px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    font-size: 14px;
}

.pkgImgWrapper {
    position: relative;
    height: 80px;
    width: 100%;
    margin: 20px 0px;
}

    .pkgImgWrapper img {
        position: absolute;
        height: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

.PaymentSectionWrapper {
    width: 95%;
    margin: 0 auto 110px auto;
    max-width: 1200px;
}

.PaymentSection {
    background: white;
    border-radius: 30px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
}

    .PaymentSection h3 {
        width: 90%;
        margin: 0 auto;
        text-align: revert;
        padding: 15px 0px;
        font-size: 16px;
        font-weight: normal;
        border-bottom: 2px solid #e4e4e4;
    }

.PackageDetails {
    background: #F5F5F5;
    width: 80%;
    margin: 30px auto 10px auto;
    border-radius: 15px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
}

    .PackageDetails p {
        float: right;
        padding: 15px 20px;
        margin-bottom: 0px;
    }

    .PackageDetails span {
        float: left;
        display: block;
        padding: 15px 20px;
    }

.seperateLine {
    border: 2px solid #e4e4e4;
    height: 2px;
    width: 80%;
    margin: 0 auto;
}

.totalPriceSection {
    float: left;
    margin-left: 10%;
    margin-bottom: 20px;
}

.totalPrice {
    float: left;
    background: #F5F5F5;
    width: 200px;
    margin: 10px auto;
    border-radius: 15px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
}

    .totalPrice span {
        display: block;
        padding: 15px 20px;
        float: left;
    }

.totalPriceSection p {
    float: left;
    margin-left: 20px;
    margin-top: 25px;
}

.PaymentAction {
    width: 80%;
    margin: 30px auto;
}

    .PaymentAction .ActionButton {
        margin-top: 20px;
    }

    .PaymentAction p {
        float: right;
        font-weight: 500;
        margin-top: 10px;
    }

.PaymentItem, .PaymentGate {
    float: right;
    margin-right: 30px;
    cursor: pointer;
    margin-top: 7px;
}

    .PaymentItem .selectBox, .PaymentGate .selectBox {
        float: right;
        width: 30px;
        height: 30px;
        border: 2px solid #A51F38;
        border-radius: 5px;
    }

    .PaymentItem.active .selectBox, .PaymentGate.active .selectBox {
        background: #A51F38;
    }

    .PaymentItem span, .PaymentGate span {
        float: right;
        margin-right: 10px;
        margin-top: 3px;
    }

.PaymentGate {
    margin: 20px;
}

    .PaymentGate span {
        max-width: calc(100% - 40px);
    }


.PaymentAction .ActionButton {
    float: left;
    margin-bottom: 0px;
}

.PaymentInfo {
    width: 80%;
    margin: 0 auto;
    background: #F6F6F6;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2) inset;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

    .PaymentInfo .rightSection {
        width: 50%;
        float: right;
    }


    .PaymentInfo .leftSection {
        width: 50%;
        float: right;
    }

        .PaymentInfo .leftSection img {
            margin: 65px auto 20px auto;
            width: 90%;
            display: block;
        }

    .PaymentInfo .rightSection h3 {
        width: 90%;
        margin: 0 auto 20px auto;
        text-align: right;
        border-bottom: 2px solid #c8c8c8;
        font-size: 16px;
        font-weight: normal;
        padding: 30px 0px 15px 0px;
    }

    .PaymentInfo .rightSection .inputGroup {
        width: 90%;
        margin-right: 5%;
    }

.inputGroup {
    margin-bottom: 20px
}

    .inputGroup label {
        float: right;
        margin-left: 10px;
        margin-top: 5px;
        font-size: 15px;
    }

    .inputGroup input {
        border-radius: 10px;
        float: right;
        height: 35px;
        padding: 10px;
        background: #E4E4E4;
        border: 1px solid lightgray;
    }

.PaymentInfo .inputGroup label {
    width: 130px;
}

.PaymentInfo .inputGroup input {
    width: calc(100% - 140px);
}

#paymentInfo_card {
    display: none;
}

.PaymentInfo .alertBox {
    padding: 24px 0px;
    width: 320px;
    margin: 0 auto;
    text-align: center;
}

    .PaymentInfo .alertBox p {
        margin-top: 0px;
        margin-bottom: 0px;
        color: #A51F38;
    }

.PaymentSection .validation-summary-errors, .FormWrapper .validation-summary-errors {
    background: #a51f38;
    width: 400px;
    margin: 20px auto;
    text-align: center;
    max-width: 90%;
}

.FormWrapper {
    width: 95%;
    margin: 0 auto 110px auto;
    max-width: 1200px;
    background: white;
    border-radius: 30px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    padding: 20px 0px;
}

    .FormWrapper h3 {
        text-align: center;
        padding-top: 25px;
        color: #a51f38;
        font-weight: bold;
        font-size: 26px;
    }

    .FormWrapper .ActionButton {
        float: left;
        margin-left: 10%;
    }

    .FormWrapper span {
        margin-right: 2.15%;
        margin-top: 45px;
        display: block;
        text-align: justify;
    }

.formgroup {
    width: 80%;
    margin: 30px auto;
}

.formAction .radio {
    float: right;
    margin-left: 20px;
}

.formgroup .descriptionInput {
    margin-top: 15px;
    width: 100%;
    border: none;
    background: #F1F1F1;
    padding: 9px 15px;
    font-size: 15px;
    border-radius: 10px;
}

.smallFormGroup {
    width: 29%;
    float: right;
    margin-right: 2.15%;
    margin-left: 2.15%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.FormImgSection {
    width: 80%;
    margin: 50px auto;
}

.BodyImgWrapper {
    width: 30%;
    float: right;
    margin-left: 5%;
}

.BodyImg {
    width: 100%;
    border-radius: 10px;
    height: 0px;
    padding-bottom: 100%;
    background-position: center !important;
    background-size: cover !important;
}

#FrontImg_input, #BackImg_input, #SideImg_input {
    display: none;
}

.ChooseBodyImg {
    width: 150px;
    color: white;
    background: #FFC500;
    border-radius: 9px;
    text-decoration: none;
    margin: 25px auto 0px auto;
    display: block;
    text-align: center;
    padding: 9px;
    cursor: pointer;
    font-weight: bold;
}

    .ChooseBodyImg:hover {
        color: white;
    }

.finishWrapper {
    width: 95%;
    margin: 0 auto 110px auto;
    max-width: 1200px;
    background: white;
    border-radius: 30px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

    .finishWrapper img {
        width: 78px;
        display: block;
        margin: 0px auto;
    }

    .finishWrapper p {
        text-align: center;
        font-size: 18px;
        margin: 30px 0px 10px auto;
    }

    .finishWrapper span {
        text-align: center;
        font-size: 14px;
        display: block;
    }

    .finishWrapper .ActionButton {
        width: 130px;
        margin: 20px auto;
        display: block;
        text-align: center;
    }

.prevButton {
    float: right !important;
    background: #8D8B8C;
    margin-right: 10%;
    margin-left: 0px !important;
}

.ProfileSection {
    width: 95%;
    max-width: 1200px;
    margin: 50px auto;
}

    .ProfileSection .rightSection {
        width: 300px;
        float: right;
        margin-left: 20px;
        box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
        background: white;
        border-radius: 30px;
        overflow: hidden;
    }


    .ProfileSection .leftSection {
        width: calc(100% - 320px);
        float: right;
        box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
        background: white;
        border-radius: 30px;
        overflow: hidden;
    }

.ProfileHead {
    background: #A51F38;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
}

    .ProfileHead .profileImg {
        border-radius: 500px;
        float: right;
        border: 1px solid white;
        width: 100px;
        height: 100px;
        margin: 20px;
        background-position: center !important;
        background-size: cover !important;
    }

    .ProfileHead span {
        float: right;
        display: block;
        color: white;
        margin-top: 60px;
    }

.ProfileMenuWrapper {
    margin-top: 20px;
}

.ProfileMenu {
    background: #F5F5F5;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    height: 48px;
    margin: 15px auto;
    width: 90%;
    border-radius: 15px;
    transition: all ease-in-out 0.3s;
}

    .ProfileMenu img {
        float: right;
        width: 28px;
        margin-right: 20px;
        margin-top: 10px
    }

    .ProfileMenu span {
        color: #262626;
        float: right;
        margin-right: 10px;
        margin-top: 10px;
    }

    .ProfileMenu.active, .ProfileMenu:hover {
        background: #A51F38;
    }

        .ProfileMenu.active span, .ProfileMenu:hover span {
            color: white;
        }

        .ProfileMenu.active img, .ProfileMenu:hover img {
            filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(327deg) brightness(105%) contrast(101%)
        }

.MyProgram {
    height: 120px;
    width: 90%;
    margin: 0px auto 20px auto;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    background: #F5F5F5;
}

.programDetail {
    width: 25%;
    float: right;
    border-left: 2px solid lightgray;
    text-align: center;
    height: 40px;
    margin-top: 10px;
    font-size: 14px;
}

    .programDetail span {
        margin-top: 10px;
        display: block;
    }

.pendingButton {
    background: #FFC500;
}

.completeButton {
    background: green;
}

.programDetail .ActionButton {
    padding: 10px 10px;
    margin: 1px auto;
    display: block;
    width: 80%;
    height: 39px;
    font-size: 14px;
}

.ProgramActions span {
    cursor: default;
}

.ProgramActions {
    border: none;
}

.TitleSection {
    width: 25%;
    float: right;
    text-align: center;
    color: #A8A8A8;
    font-size: 12px;
}

.MyProgramTitle {
    width: 90%;
    margin: 10px auto;
}

.ProfileSection .leftSection h2 {
    width: 90%;
    border-bottom: 2px solid lightgray;
    text-align: right;
    padding: 22px 0px;
    margin-right: 5%;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 25px;
}

.DownliadLinkSection {
    margin-top: 22px;
}

    .DownliadLinkSection .ActionButton {
        width: 48%;
        margin: 0px 1%;
        display: block;
        float: right;
        text-align: center;
        height: 40px;
        padding-top: 8px;
    }

#PayDate {
    width: calc(100% - 190px);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#dtp1 {
    width: 45px;
    float: right;
    margin-right: 5px;
    height: 35px;
    border-radius: 10px;
    text-align: center;
    padding-top: 7px;
    cursor: pointer;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background: #E4E4E4;
    border: 1px solid lightgray;
}

.PaymentInfo .timeGroup input {
    width: calc(50% - 75px);
    text-align: center;
}

.formgroup textarea {
    resize: none;
    height: 150px
}

#loginFormWrapper .inputGroup {
    width: 48%;
    float: right;
    margin-right: 2%;
}

    #loginFormWrapper .inputGroup #PayDate {
        width: calc(100% - 50px);
        margin-right:0px;
    }

    #loginFormWrapper .inputGroup #dtp1 {
        margin-top: 10px;
        height: 42px;
        padding-top: 10px;
    }

.enamad {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100px;
}

.enamad img{
    width:100px;
}

/*#region Loading */
@keyframes ldio-c3e11cu2eq9 {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.45,0,0.9,0.55)
    }

    0% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(0,116px);
        animation-timing-function: cubic-bezier(0,0.45,0.55,0.9);
    }

    100% {
        transform: translate(0,0);
    }
}

.ldio-c3e11cu2eq9 div {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #a51f38;
    left: calc(50% - 22px);
    top: calc(50% - 80px);
    animation: ldio-c3e11cu2eq9 1s linear infinite;
}

.loadingio-spinner-ball-rd8liqklqbg {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    background: #ffffff8f;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    border-radius: 20px;
}

.ldio-c3e11cu2eq9 {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}

    .ldio-c3e11cu2eq9 div {
        box-sizing: content-box;
    }

.loadingio-spinner-ball-rd8liqklqbg span {
    position: absolute;
    left: calc(50% - 61px);
    top: calc(50% + 110px);
    background: #a51f38;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}


/*#endregion */

.warningMsg {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    background: #FFC500;
    color: black;
    padding: 10px;
    border-radius: 25px;
    text-align: center;
}