@charset "utf-8";

.bg_holder {
    display: block;
    width: 100%;
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    z-index: -1;
}

.bg_holder .circle_left {
    float: left;
}

.bg_holder .circle_right {
    float: right;
}

.side_menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    box-sizing: border-box;
    background: var(--light);
    z-index: 11;
}

.side_menu .side_header {
    background: var(--gray);
    padding: 10px;
    box-sizing: border-box;
}

.side_menu .side_header .site_name {
    display: inline-block;
    color: var(--primary);
    font-size: 12pt;
    margin: 15px 0;
}

.side_menu i {
    cursor: pointer;
    width: 24px;
    height: 24px;
    color: var(--gray);
    font-size: 14px;
    padding-right: 7px;
    padding-top: 5px;
    box-sizing: border-box;
    margin: 0 15px;
    vertical-align: top;
    background: var(--light);
    border-radius: 50%;
    float: left;
}

.side_menu i:hover {
    background: #B2B7BD;
    color: #eeeeee;
}

.side_menu .fa-times {
    display: inline-block;
    background: var(--light);
    color: var(--red);
    border-radius: 5px;
    float: none;
    margin: 0;
    vertical-align: middle;
}

.side_menu .fa-times:hover {
    background: var(--red);
    color: var(--light);
}

.side_menu .side_logo {
    display: inline-block;
    width: calc(100% - 55px);
    font-weight: bold;
    vertical-align: middle;
    margin-right: 20px;
}

.side_menu .side_logo img {
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
}

.side_menu .side_logo span {
    vertical-align: middle;
    color: var(--primary);
}

.side_menu .menu {
    height: calc(100vh - 125px);
    margin-top: 15px;
    overflow: auto;
}

.side_menu .menu a {
    display: block;
    padding: 10px;
    vertical-align: middle;
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 10pt;
}

.side_menu .menu a:hover {
    color: var(--secondary);
}

.side_menu .menu i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.menu_holder {
    background: var(--light);
    padding: 10px 20px 15px 20px;
    margin: 25px auto 10px auto;
    box-sizing: border-box;
    border-radius: 20px;
}

.menu_holder .fa_bars {
    display: none;
    color: var(--primary);
    vertical-align: middle;
    background: transparent;
    background: var(--gray);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 16px;
    margin-left: 5px;
}

.menu_holder .fa_bars:hover {
    background: var(--red);
    color: var(--white);
}

.menu_holder .fa_bars i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.main_panel .menu_holder {
    width: calc(100% - 60px);
    margin: 25px 20px 5px 40px;
}

.main_panel .user_bars {
    display: none;
    background: var(--accsent_hover);
    padding: 4px 15px 0 10px;
    box-sizing: border-box;
    border-radius: 0 20px 20px 0;
    border: 1px solid var(--accsent);
    color: var(--accsent);
    margin-left: 5px;
}

.main_panel .user_bars:hover {
    background: var(--accsent);
    color: var(--white);
}

.menu_holder .user_notif {
    display: inline-block;
    color: var(--accsent);
    padding: 8px 0;
    font-weight: bold;
}

.user_profile_menu {
    display: block;
    position: fixed;
    left: 45px;
    top: -255px;
    background: var(--light);
    padding: 10px;
    width: 220px;
    border-radius: 20px;
    z-index: 1;
}

.user_profile_menu a {
    display: block;
    width: calc(100% - 20px);
    padding: 10px 10px;
    margin: 5px 10px;
    font-weight: 200;
    color: #a1a0a5;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 5px;
}

.user_profile_menu a:hover {
    color: var(--accsent);
}

.user_profile_menu a i {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    font-size: 16px;
}

.user_profile_menu a span {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

.user_profile_menu .user_out:hover img {
    filter: invert(29%) sepia(79%) saturate(1741%) hue-rotate(342deg) brightness(103%) contrast(82%);
}

.user_profile_menu .user_out:hover {
    color: #e74c3c;
}

.logo_holder {
    display: inline-block;
    vertical-align: middle;
    width: 140px;
}

.logo_holder img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    object-fit: contain;
    object-position: right;
}

.menu_holder .menu {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 257px);
    text-align: center;
}

.menu_holder .menu a {
    color: var(--primary);
    margin: 0 15px;
}

.menu_holder .menu .select,
.menu_holder .menu .select:hover {
    color: var(--black);
    font-weight: bold;
    cursor: context-menu;
}

.menu_holder .menu a:hover {
    color: var(--secondary)
}

.menu_holder .btn_holder {
    display: inline-block;
    width: 110px;
    vertical-align: middle;
    text-align: left;
}

.menu_holder .btn_holder_panel {
    background: var(--secondary);
    border-radius: 15px;
    width: auto;
    float: left;
    cursor: pointer;
}

.menu_holder .btn_holder_panel img {
    display: inline-block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 15px;
    margin-left: var(--margin_m);
    padding: 4px 2px;
}

.menu_holder .btn_holder_panel .user_name {
    display: inline-block;
    vertical-align: middle;
    color: var(--primary);
}

.menu_holder .btn_holder_panel .user_name i {
    display: inline-block;
    vertical-align: middle;
    margin: 0 var(--margin_m);
}

.menu_holder .btn_secondary {
    border-radius: 15px;
    padding: 5px 15px;
    margin: 0;
}

.site_title {
    text-align: center;
    margin: 80px auto 50px auto;
}

.site_title strong {
    color: var(--secondary)
}

.site_title .title {
    display: block;
    font-size: 22pt;
    margin-bottom: 30px;
    font-weight: bold;
}

.site_title .text {
    display: inline-block;
    width: calc(100% - 50px);
    max-width: 900px;
    font-size: 12pt;
    margin-bottom: 30px;
    font-family: var(--font_secondary);
}

.slider_holder {
    position: relative;
    line-height: 0;
    border-radius: 20px;
    overflow: hidden;
}

.slider_holder img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
}

.slider_holder .slider_shadow {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: calc(100% + 40px);
    height: 50px;
    border-radius: 20px;
    box-shadow: inset 0 -30px 20px var(--accsent);
}

.scroll_btn {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
}

.scroll_btn i {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    text-align: center;
    color: var(--primary);
    background: #FFF8DC;
    opacity: 50%;
    padding-top: 8px;
    font-size: 18px;
    box-sizing: border-box;
    cursor: pointer;
}

.scroll_btn .fa-arrow-right,
.scroll_btn .fa-chevron-right {
    margin-right: 10px;
}

.scroll_btn .fa-chevron-left,
.scroll_btn .fa-arrow-left {
    float: left;
    margin-left: 10px;
}

.scroll_btn i:hover {
    background: var(--secondary_hover);
    color: var(--primary);
    opacity: 100%;
}

.slider_holder .circle_holder {
    display: block;
    width: 150px;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider_holder .circle_holder .circle {
    display: block;
    width: calc(100% - 20px);
    height: 20px;
    border-radius: 10px 10px 0 0;
    background: var(--white);
    text-align: center;
    float: right;
    padding-top: 5px;
    box-sizing: border-box;
}

.slider_holder .circle_holder .circle i {
    display: inline-block;
    margin: 0 1px;
    cursor: pointer;
    color: var(--gray_dark_2);
}

.slider_holder .circle_holder .circle .selected_circle {
    color: var(--primary);
}

.slider_holder .circle_holder .radius_negative_right,
.slider_holder .circle_holder .radius_negative_left {
    display: block;
    position: relative;
    margin-top: 10px;
    width: 10px;
    height: 10px;
    background: var(--white);
    float: right;
}

.slider_holder .circle_holder .radius_negative_right:after,
.slider_holder .circle_holder .radius_negative_left:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--accsent);
}

.slider_holder .circle_holder .radius_negative_right:after {
    border-bottom-left-radius: 10px;
}

.slider_holder .circle_holder .radius_negative_left:after {
    border-bottom-right-radius: 10px;
}

.title_half {
    display: inline-block;
    width: calc(100% - 140px);
    vertical-align: middle;
    padding: 35px 20px;
    box-sizing: border-box;
    border-radius: 20px;
}

.title_faq {
    vertical-align: top;
    width: 450px;
}

.title_half .title i {
    color: var(--accsent);
    font-size: var(--font_xl);
}

.page_title .title_half {
    display: block;
    width: calc(100% - 50px);
    max-width: 900px;
    margin: auto;
}

.title_half .title {
    font-weight: 300;
    font-size: 18pt;
    margin-bottom: 5px;
}

.title_half .mini_title {
    color: var(--secondary);
}

.title_half .text {
    display: block;
    margin: 35px 0;
    text-align: justify;
    font-family: var(--font_secondary);
}

.page_title .title_half .text {
    text-align: center;
}

.title_road,
.title_road a {
    color: var(--gray_dark_2);
    margin-bottom: 8px;
}

.title_road a:hover {
    color: var(--secondary_hover);
}

.about_holder {
    width: calc(100% - 50px);
    max-width: 1100px;
    margin-top: 80px;
    text-align: center;
}

.about_holder .about_content {
    display: inline-block;
    position: relative;
    width: 100%;
    border-radius: 20px;
    background: var(--primary);
    padding: 20px;
    box-sizing: border-box;
}

.about_holder .text {
    display: block;
    padding: 40px 25px 20px 25px;
    box-sizing: border-box;
    text-align: justify;
    color: var(--white);
}

.about_holder .btn_primary {
    margin-bottom: 60px;
    background: var(--white);
    color: var(--primary);
}

.about_holder .btn_primary:hover {
    background: var(--red);
    color: var(--white);
}

.main_title {
    display: block;
    position: absolute;
    width: fit-content;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.main_title .title {
    display: block;
    height: 30px;
    border-radius: 0 0 15px 15px;
    background: var(--white);
    text-align: center;
    float: right;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14pt;
    font-weight: bold;
    font-family: 'YekanBakh';
    color: var(--black);
}

.main_title .title .title_logo {
    display: block;
    width: 120px;
    position: relative;
    bottom: 25px;
}

.side_menu_holder .radius_negative_top,
.side_menu_holder .radius_negative_bottom,
.main_title .radius_negative_right,
.main_title .radius_negative_left {
    display: block;
    position: relative;
    width: 15px;
    height: 15px;
    background: var(--white);
    float: right;
}

.side_menu_holder .radius_negative_top,
.side_menu_holder .radius_negative_bottom {
    float: left;
}

.side_menu_holder .radius_negative_top:after,
.side_menu_holder .radius_negative_bottom:after,
.main_title .radius_negative_right:after,
.main_title .radius_negative_left:after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary);
}

.side_menu_holder .radius_negative_top:after,
.side_menu_holder .radius_negative_bottom:after {
    background-color: var(--light);
}

.side_menu_holder .radius_negative_top:after {
    border-bottom-left-radius: 15px;
}

.main_title .radius_negative_right:after {
    border-top-left-radius: 15px;
}

.side_menu_holder .radius_negative_bottom:after {
    border-top-left-radius: 15px;
}

.main_title .radius_negative_left:after {
    border-top-right-radius: 15px;
}

.video_holder {
    display: block;
    width: 700px;
    height: 360px;
    position: relative;
    margin: auto;
    top: -50px;
}

.video_holder .video_box video {
    width: 100%;
    height: 360px;
    border-radius: 20px;
    object-fit: cover;
}

.video_holder .video_box .video_controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360px;
    display: grid;
    place-items: center;
}

.video_holder .video_box .video_controls i {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--secondary_hover);
    text-align: center;
    margin: auto;
    font-size: 22px;
    color: var(--white);
    padding-top: 12px;
    padding-left: 3px;
    box-sizing: border-box;
    border: 1px solid var(--secondary_hover);
    box-shadow: 0 0 8px rgb(255, 213, 36);
}

.video_holder .video_box .video_controls i:hover {
    background-color: var(--secondary);
}

.video_holder .video_box .circle_1 {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--secondary_hover);
    opacity: 0.2;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.video_holder .video_box .circle_2 {
    display: inline-block;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: var(--secondary_hover);
    opacity: 0.2;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.licence_holder {
    margin-top: 80px;
}

.panel .licence_holder {
    margin-top: 0;
}

.licence_holder .title_half {
    width: 500px;
    height: 260px;
    position: relative;
    overflow: hidden;
    background-image: var(--gradiant_red);
}

.panel .title_half {
    display: block;
    width: 100%;
    position: relative;
}

.licence_holder .title_half .stars {
    display: block;
    position: absolute;
    bottom: -190px;
    left: -130px;
}

.licence_holder .title_half .text {
    color: var(--white);
}

.licence_holder .title_half .wallet_amount {
    display: block;
    color: var(--black);
    font-size: 12pt;
    margin-top: 10px;
}

.licence_holder .title_half .wallet_profit_red,
.licence_holder .title_half .wallet_profit_green {
    display: inline-block;
    text-align: center;
    color: var(--light);
    box-sizing: border-box;
    padding: var(--margin_s) var(--margin_l);
    margin: var(--margin_s);
    border-radius: var(--radius_15);
    background: var(--green);
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 1;
}

.licence_holder .title_half .wallet_profit_red {
    background: var(--red);
}

.licence_holder .title_half .main_title {
    right: 40px;
    left: unset;
}

.licence_holder .title_half .main_title .radius_negative_right,
.licence_holder .title_half .main_title .radius_negative_left {
    background: var(--white);
}

.licence_holder .title_half .main_title .radius_negative_right:after,
.licence_holder .title_half .main_title .radius_negative_left:after {
    background: var(--red);
}

.licence_holder .title_half .btn_secondary {
    background: var(--white);
    color: var(--dark);
}

.licence_holder .title_half .btn_secondary:hover {
    background: var(--secondary_hover);
    color: var(--white);
}

.licence_img {
    display: inline-block;
    width: calc(100% - 524px);
    height: 260px;
    vertical-align: top;
    margin-right: 20px;
}

.licence_img .img_item {
    display: inline-block;
    width: calc(33% - 7px);
    height: 125px;
    border-radius: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 5px;
    box-sizing: border-box;
    background: var(--gray_dark);
    text-align: center;
    vertical-align: top;
}

.licence_img .img_item:nth-child(3n) {
    margin-left: 0;
}

.licence_img .img_item i,
.licence_img .img_item img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin: 5px auto;
    font-size: 50px;
    text-align: center;
}

.licence_img .img_item span {
    display: block;
    font-weight: bold;
    color: var(--black);
}

.cta_holder {
    margin: 40px auto;
}

.cta_holder .title_half {
    display: inline-block;
    width: calc((100% / 3) - 26px);
    position: relative;
    background: var(--secondary);
    text-align: center;
    margin-left: 35px;
}

.cta_holder .title_half:last-child {
    margin-left: 0;
}

.cta_holder .title_half .main_title .title {
    font-weight: 300;
}

.cta_holder .title_half .main_title .radius_negative_right:after,
.cta_holder .title_half .main_title .radius_negative_left:after {
    background: var(--secondary);
}

.faq_item_holder {
    display: inline-block;
    width: calc(100% - 480px);
    vertical-align: middle;
    margin-right: 10px;
}

.faq_archive .faq_item_holder {
    display: block;
    width: calc(100% - 50px);
    margin: auto;
}

.faq_item_holder .faq_item {
    margin: var(--margin_m) 0;
    background: var(--light);
    border-radius: 15px;
    padding: var(--margin_s) var(--margin_m);
    box-sizing: border-box;
}

.faq_item_holder .faq_item .title {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 65px);
    margin-right: 10px;
    font-weight: bold;
    cursor: pointer;
}

.faq_item_holder .faq_item i {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    text-align: center;
    padding-top: 18px;
    box-sizing: border-box;
    cursor: pointer;
}

.faq_item_holder .faq_item .text {
    display: block;
    width: 100%;
    background: var(--white);
    border-radius: 15px;
    padding: var(--margin_l) var(--margin_m);
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 5px;
    font-family: var(--font_secondary);
}

.faq_item_holder .faq_item .text_close {
    height: 0;
    padding: 0 !important;
    border-color: #F0F1F900;
}

.faq_item_holder .faq_item .text span {
    display: block;
    width: 100%;
}

.faq_item_holder .faq_item .text a {
    color: var(--accsent);
}

.faq_item_holder .faq_item .text a:hover {
    color: var(--secondary_hover);
}

/**********************************************  inner  ************************************/
.page_title {
    margin: 65px auto 25px auto;
    text-align: center;
}

.page_title .category a {
    display: inline-block;
    vertical-align: middle;
    border: solid 1px var(--primary);;
    text-align: center;
    color: var(--primary);
    box-sizing: border-box;
    padding: 2px var(--margin_l);
    margin: var(--margin_s);
    border-radius: 15px;
    cursor: pointer;
}

.page_title .category a:hover {
    background: #373D4944;
}

.page_title .category .selected {
    background: var(--primary) !important;
    color: var(--white) !important;
    cursor: context-menu !important;
}

.paging {
    text-align: center;
    margin: var(--margin_x2) auto;
}

.paging a {
    display: inline-block;
    width: 35px;
    height: 35px;
    padding-top: 2px;
    margin: 0 2px;
    border: 1px solid var(--gray);
    box-sizing: border-box;
    border-radius: 10px;
    color: var(--dark);
    background: var(--white);
}

.paging a:hover {
    background-color: #FFD524aa;
}

.paging .page_selected {
    background: var(--secondary) !important;
    color: var(--light) !important;
    border: 1px solid var(--secondary) !important;
    cursor: context-menu;
}

/*******************************************  blog *******************************/
.gallery {
    display: block;
}

.gallery .gallery_content {
    display: block;
    position: absolute;
    width: calc(100% - 40px);
    right: 20px;
    bottom: 20px;
    background-color: #F8CF5Baa;
    border-radius: 0 0 20px 20px;
    padding: 15px;
    box-sizing: border-box;
}

.gallery .gallery_content .title {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 15px;
    font-size: 11pt;
    font-weight: normal;
}

.gallery .gallery_1 {
    display: inline-block;
    vertical-align: top;
    width: calc(35% - 5px);
}

.gallery .gallery_1 .img_full {
    display: block;
    width: 100%;
    position: relative;
}

.gallery .gallery_1 img {
    display: block;
    width: 100%;
    height: 510px;
    border-radius: 20px;
    object-fit: cover;
}

.gallery .gallery_3 {
    display: inline-block;
    vertical-align: top;
    width: calc(65% - 5px);
}

.gallery .gallery_3 .img_half {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 15px);
    height: 250px;
    border-radius: 20px;
    object-fit: cover;
    position: relative;
}

.gallery .gallery_3 .img_half {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 15px);
}

.gallery .gallery_3 .img_half:first-child {
    margin-left: 10px;
}

.gallery .gallery_3 .img_half img {
    display: block;
    vertical-align: top;
    width: 100%;
    height: 250px;
    border-radius: 20px;
    object-fit: cover;
}

.gallery .gallery_3 .img_full {
    display: block;
    width: calc(100% - 15px);
    position: relative;
}

.gallery .gallery_3 .img_full img {
    display: block;
    width: 100%;
    height: 250px;
    border-radius: 20px;
    object-fit: cover;
    margin-top: 10px;
}

.archive_holder {
    border-radius: 20px;
    background: var(--light);
    margin: 20px 0;
    padding: 20px;
    box-sizing: border-box;
}

.archive_holder .title {
    font-weight: normal;
    font-size: 12pt;
    margin-bottom: 10px;
}

.blog_item {
    background: var(--white);
    border-radius: 10px;
    padding: 20px 15px 15px 15px;
    box-sizing: border-box;
    margin: 15px 0;
    vertical-align: top;
}

.blog_item_holder {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.blog_item_holder .blog_item {
    display: inline-block;
    width: 295px;
    margin: 0 5px;
}

.post_holder .blog_item {
    background: transparent;
}

.blog_item .img_hold {
    display: inline-block;
    width: 200px;
    height: 140px;
    vertical-align: top;
    position: relative;
}

.blog_item_holder .blog_item .img_hold {
    display: block;
    width: 100%;
}

.post_holder .blog_item .img_hold {
    display: block;
    width: 100%;
    max-width: 900px;
    height: 450px;
    vertical-align: top;
    margin: auto;
}

.blog_item .img_hold a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog_item .img_hold .blog_img,
.blog_item .img_hold img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
    border-radius: 20px;
    overflow: hidden;
}

.blog_item .img_hold .blog_category {
    display: block;
    text-align: center;
    z-index: 1;
    width: 100%;
    position: absolute;
    top: -15px;
}

.blog_item .img_hold .blog_category a,
.blog_item .img_hold .blog_category span {
    display: inline-block;
    background: var(--secondary);
    border-radius: 20px;
    border: 2px solid var(--white);
    padding: 2px var(--margin_l);
    box-sizing: border-box;
    color: var(--white);
    font-size: 8pt;
    text-align: center;
    width: auto;
    height: auto;
}

.blog_item .img_hold .blog_category:hover a,
.blog_item .img_hold .blog_category:hover span {
    background: var(--secondary_hover);
}

.blog_item .text_hold {
    display: inline-block;
    width: calc(100% - 220px);
    vertical-align: top;
    margin-right: 15px;
}

.post_holder .blog_item .text_hold {
    display: block;
    width: 100%;
    margin: 0;
}

.blog_item_holder .blog_item .text_hold {
    display: block;
    width: 100%;
    background: var(--light);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 20px;
    margin-top: 10px;
    margin-right: 0;
}

.blog_item_holder .blog_item .text_hold .title {
    display: block;
    min-height: 60px;
    font-weight: bold;
}

.blog_item_holder .blog_item .text_hold .text {
    text-align: justify;
}

.post_holder .blog_item .text_hold .detail_hold {
    display: block;
    width: calc(100% - 50px);
    max-width: 900px;
    margin: 20px auto;
}

.blog_item .text_hold .detail_hold i {
    margin-left: 5px;
}

.blog_item .text_hold .detail_hold .writer {
    margin-left: 20px;
    color: var(--gray_dark_2);
}

.blog_item .text_hold .detail_hold .date {
    color: var(--gray_dark_2);
}

.blog_item_holder .blog_item .text_hold .detail_hold .writer {
    font-size: 8pt;
}

.blog_item_holder .blog_item .text_hold .detail_hold .date {
    font-size: 8pt;
}

.blog_item .text_hold .title {
    display: block;
}

.blog_item .text_hold .title:hover {
    color: var(--accsent);
}

.blog_item .text_hold .btn_primary {
    float: left;
    padding: 0 var(--margin_xl);
}

.cta_holder .btn_secondary {
    margin: auto;
    background: var(--red);
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    width: 120px;
}

.cta_holder .btn_secondary:hover {
    margin: auto;
    background: var(--primary);
}

.blog_holder .btn_primary {
    text-align: center;
    margin: auto;
}

.img_cta {
    display: block;
    margin: 8px auto;
    text-align: center;
    width: 60px;
    height: 60px;
    object-fit: cover;
    font-size: 60px;
}

.row_text {
    margin: 10px 0;
    text-align: right;
}

.img_icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    vertical-align: middle;
    margin-left: 10px;
}

.user_holder {
    margin: 15px auto;
}

.user_item_holder {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.user_holder .user_item {
    display: inline-block;
    vertical-align: top;
    width: 295px;
    height: 250px;
    background: var(--accsent_hover);
    border-radius: 20px;
    position: relative;
    margin-top: 100px;
    margin-left: 10px;
    margin-bottom: 20px;
}

.archive_holder .user_item {
    width: calc(25% - 20px);
}

.user_holder .user_item img {
    display: inline-block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 10px solid var(--white);
    object-fit: cover;
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    margin: auto;
}

.user_item {
    display: inline-block;
    width: 100%;
    height: 250px;
    background: var(--secondary);
    border-radius: 20px;
    position: relative;
    margin-top: 100px;
    margin-right: 5px;
}

.user_item img {
    margin-right: 5px;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 8px solid var(--white);
    object-fit: cover;
    position: absolute;
    top: -60px;
    right: 30px;
}

.user_holder .user_item .u_name {
    position: absolute;
    top: 120px;
    right: 20px;
}

.user_item .u_name {
    position: absolute;
    top: 70px;
    right: 20px;
    left: 20px;
}

.user_holder .user_item .u_name .name {
    font-weight: bold;
    font-size: 12pt;
    color: var(--primary);
}

.user_item .u_name .name {
    font-weight: bold;
    font-size: 14pt;
    color: var(--primary);
}

.user_holder .user_item .u_name .name:hover,
.user_item .u_name .name:hover {
    color: var(--accsent);
}

.user_holder .user_item .u_name .type {
    font-size: 8pt;
    color: var(--accsent);
}

.user_holder .user_item .u_name i,
.user_item .u_name i {
    margin-left: 5px;
}

.user_holder .social_holder {
    display: block;
    width: 170px;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.user_holder .social_holder .social {
    display: block;
    width: calc(100% - 20px);
    height: 30px;
    border-radius: 20px 20px 0 0;
    background: var(--white);
    text-align: center;
    float: right;
    padding-top: 5px;
    box-sizing: border-box;
}

.user_holder .social_holder .social i {
    display: inline-block;
    margin: 3px;
    cursor: pointer;
    background: var(--accsent_hover);
    color: var(--accsent);
    padding: 12px;
    box-sizing: border-box;
    font-size: 18px;
}

.user_holder .social_holder .social i:hover {
    background: var(--accsent);
    color: var(--accsent_hover);
}

.user_holder .social_holder .social .btn_user_box {
    display: inline-block;
    width: calc(100% - 15px);
    margin: 3px;
    cursor: pointer;
    background: var(--accsent_hover);
    color: var(--accsent);
    padding: 5px 0;
    font-size: 12pt;
    box-sizing: border-box;
    border-radius: 15px;
}

.user_holder .social_holder .social .btn_user_box:hover {
    background: var(--accsent);
    color: var(--accsent_hover);
}

.user_holder .social_holder_yellow .social .btn_user_box,
.user_holder .social_holder_yellow .social i {
    background: var(--secondary);
    color: var(--primary);
}

.user_holder .social_holder_yellow .social .btn_user_box:hover,
.user_holder .social_holder_yellow .social i:hover {
    background: var(--primary);
    color: var(--secondary);
}

.user_holder .social_holder .social .icon_left,
.social_holder .social .icon_left {
    border-radius: 30px 0 0 30px;
}

.user_holder .social_holder .social .icon_right,
.social_holder .social .icon_right {
    border-radius: 0 30px 30px 0;
}

.user_holder .social_holder .radius_negative_right,
.user_holder .social_holder .radius_negative_left,
.social_holder .radius_negative_right,
.social_holder .radius_negative_left {
    display: block;
    position: relative;
    margin-top: 20px;
    width: 10px;
    height: 10px;
    background: var(--white);
    float: right;
}

.user_holder .social_holder .radius_negative_right:after,
.user_holder .social_holder .radius_negative_left:after,
.social_holder .radius_negative_right:after,
.social_holder .radius_negative_left:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--accsent_hover);
}

.user_holder .social_holder_yellow .radius_negative_right:after,
.user_holder .social_holder_yellow .radius_negative_left:after {
    background: var(--secondary);
}

.user_holder .social_holder .radius_negative_right:after,
.social_holder .radius_negative_right:after {
    border-bottom-left-radius: 20px;
}

.user_holder .social_holder .radius_negative_left:after,
.social_holder .radius_negative_left:after {
    border-bottom-right-radius: 20px;
}

/********************************** login *****************************/

.login_holder {
    margin: 120px auto;
}

.login_holder .slider_holder {
    position: relative;
    line-height: 0;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    width: 100%;
    height: calc(100vh - 240px);
}

.login_holder .slider_holder a,
.login_holder .slider_holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.message_box {
    display: block;
    width: 100%;
    height: calc(100vh - 240px);
    background: var(--light);
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
}

.message_box .form {
    height: calc(100% - 100px);
    overflow: auto;
    display: grid;
    place-items: center;
}

.message_box .form div {
    display: block;
    width: 100%;
}

.message_box input {
    background: var(--white);
    border-radius: 10px;
    margin-bottom: 15px;
}

.message_box .btn_primary {
    display: block;
    margin: var(--margin_s) 0;
}

.message_box .main_title .radius_negative_right:after,
.message_box .main_title .radius_negative_left:after {
    background: var(--light);
}

.message_box .box_title {
    font-weight: normal;
    font-size: 12pt;
    margin-bottom: 30px;
    padding-top: 50px;
}

.message_box .law {
    display: block;
    text-align: center;
    margin: 10px 0;
    font-size: 8pt;
    cursor: pointer;
    color: var(--blue);
}

.message_box .positive_title {
    background: var(--secondary);
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 25px;
}

.message_box .negative_title {
    background: var(--red);
}

.message_box .positive_title img {
    display: inline-block;
    width: 70px;
    height: 70px;
    object-fit: contain;
    vertical-align: middle;
}

.message_box .positive_title .fa-triangle-exclamation {
    display: inline-block;
    vertical-align: middle;
    font-size: 35px;
    color: white;
    margin: 0 8px;
}

.message_box .positive_title .positive_content {
    display: inline-block;
    width: calc(100% - 75px);
    vertical-align: middle;
    color: var(--black);
}

.message_box .positive_title .positive_content .content_title {
    display: block;
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 15px;
}

.message_box .positive_title .negative_content .content_title {
    margin-bottom: 0;
    color: white;
}

.message_box .positive_title .positive_content .content_sub_title {
    display: block;
    line-height: 100%;
    margin-bottom: 8px;
    font-weight: 300;
}

.message_box .box_detail {
    padding: 15px;
    box-sizing: border-box;
}

.message_box .box_detail .detail_row {
    margin-bottom: 10px;
}

.message_box .box_detail .detail_row:last-child {
    margin-bottom: 0;
}

.message_box .box_detail .detail_row .detail_title,
.message_box .box_detail .detail_row .detail_value {
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: top;
    font-weight: bold;
    color: var(--black);
}

.message_box .box_detail .detail_row .detail_value {
    text-align: left;
}

.message_box .box_text {
    display: block;
    padding: 15px;
    box-sizing: border-box;
    text-align: justify;
}

/********************************* p a n e l *******************************/

.panel_33 {
    display: inline-block;
    vertical-align: top;
    width: calc((100% / 3) - 7px);
    margin-right: 5px;
}

.panel_50 {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 7px);
    margin-right: 5px;
}

.panel_30 {
    display: inline-block;
    vertical-align: top;
    width: 280px;
    margin-right: 5px;
}

.panel_30 .slider_holder {
    width: 100%;
    height: 250px;
}

.panel_30 .slider_holder a,
.panel_30 .slider_holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.panel_70 {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 295px);
    margin-left: 5px;
}

.week_holder {
    display: block;
    background: var(--light);
    border-radius: 20px;
    padding: 10px 0;
    box-sizing: border-box;
    margin: 5px auto 25px auto;
    text-align: center;
}

.week_holder .item {
    display: inline-block;
    width: calc((100% / 7) - 20px);
    text-align: center;
    margin: 0 8px;
    border-radius: 10px;
    background: var(--accsent_hover);
    padding: 5px 0;
    box-sizing: border-box;
}

.week_holder .item_selected,
.week_holder .item:hover {
    background: var(--red);
    cursor: pointer;
}

.week_holder .day {
    font-weight: bold;
}

.week_holder .item_selected .day,
.week_holder .item:hover .day {
    color: var(--white);
    font-weight: bold;
}

.week_holder .item .num {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--white);
    padding: 1px 3px 3px 3px;
    box-sizing: border-box;
    text-align: center;
    margin: 5px auto;
    color: var(--primary);
    font-weight: bold;
}

.week_holder .item:hover .num {
    color: var(--primary);
}

.holder_plan {
    padding: 5px 0;
    box-sizing: border-box;
    position: relative;
}

.holder_plan .plan_line {
    display: block;
    position: absolute;
    width: 3px;
    height: calc(100% - 100px);
    background-color: var(--accsent);
    z-index: 1;
    margin: auto;
    top: 25px;
    right: 23px;
}

.holder_plan .plan_item {
    margin-bottom: 15px;
}

.holder_plan .plan_item:last-child {
    margin-bottom: 0;
}

.holder_plan .plan_item .plan_circle {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 2;
}

.holder_plan .plan_item .plan_circle:before {
    display: block;
    position: absolute;
    content: " ";
    width: 20px;
    height: 20px;
    border-radius: 20px;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--light);
    border: solid 2px var(--accsent);
    z-index: 2;
}

.holder_plan .plan_item:last-child .plan_circle:after {
    /*display: none;*/

    display: block;
    position: absolute;
    content: " ";
    width: 5px;
    height: 100px;
    background-color: var(--light);
    z-index: 1;
    margin: auto;
    top: 25px;
    left: 0;
    right: 0;
}

.holder_plan .plan_item_done .plan_circle:before {
    background-color: var(--accsent);
    border: solid 2px var(--accsent);
}

.holder_plan .plan_item_current .plan_circle:before {
    width: 12px;
    height: 12px;
    background-color: var(--light);
    border: solid 6px var(--accsent);
}

.holder_plan .plan_item .plan_content {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 55px);
    background: var(--accsent_hover);
    border-radius: 10px;
    padding: 15px 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.holder_plan .plan_item_current .plan_content {
    background: var(--accsent);
}

.holder_plan .plan_item .plan_content .plan_time {
    display: inline-block;
    vertical-align: middle;
    width: 110px;
    text-align: center;
    padding: 5px 0;
    border-radius: 10px;
    background: var(--white);
    color: var(--accsent);
    font-size: 11pt;
}

.holder_plan .plan_item_current .plan_content .plan_time {
    background: #54B8C3;
    color: var(--white);
}

.holder_plan .plan_item .plan_content .content_holder {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 115px);
}

.holder_plan .plan_item .plan_content .content_holder .title {
    display: block;
    font-size: 12pt;
    font-weight: 400;
    color: var(--accsent);
    margin-bottom: 5px;
}

.holder_plan .plan_item .plan_content .content_holder .sub_title {
    display: block;
    font-size: 10pt;
    color: var(--accsent);
}

.holder_plan .plan_item_current .plan_content .content_holder .title,
.holder_plan .plan_item_current .plan_content .content_holder .sub_title {
    color: var(--white);
}

.panel_box_holder {
    margin: 5px auto 25px auto;
}

.print_box {
    margin: 0 auto;
}

.panel_box_holder .title_half {
    width: 100%;
    position: relative;
    background-color: var(--light);
    padding: 40px 20px;
    box-sizing: border-box;
}

.print_box .title_half {
    background-color: var(--white);
    padding: 10px;
    box-sizing: border-box;
}

.panel_box_holder .title_half .text {
    color: var(--black);
    margin: 15px 0;
}

.panel_box_holder .title_half .main_title {
    right: 40px;
    left: unset;
}

.panel_box_holder .title_half .main_title .radius_negative_right,
.panel_box_holder .title_half .main_title .radius_negative_left {
    background: var(--white);
}

.panel_box_holder .title_half .main_title .radius_negative_right:after,
.panel_box_holder .title_half .main_title .radius_negative_left:after {
    background: var(--light);
}

.host_result {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.icon_container {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--white);
    box-sizing: border-box;
    margin-left: 25px;
}

.icon_container .icon_active_border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 8px;
    box-sizing: border-box;
}

.icon_container .icon_circle {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--light);
    color: #a6a6a6;
    font-size: 20pt;
    box-shadow: inset 0 0 80px -30px rgba(120, 120, 120, 1);
}

.host_result .detail {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 180px);
    color: #2F2E2E;
}

.host_result .detail .title {
    font-size: 14pt;
    font-weight: 300;
    margin-bottom: 10px;
}

.host_result .detail .sub_title {
    font-size: 10pt;
    font-weight: 300;
    margin-bottom: 5px;
    color: var(--dark);
}

.host_result .detail .sub_title:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray_dark);
}

.host_result .detail .sub_red:before {
    background: var(--red);
}

.host_result .detail .sub_orange:before {
    background: var(--orange);
}

.host_result .detail .sub_yellow:before {
    background: var(--yellow);
}

.host_result .detail .sub_green:before {
    background: var(--success);
}

.host_result .detail .sub_blue:before {
    background: var(--blue);
}

.host_result .detail .sub_purple:before {
    background: var(--purple);
}

.host_result .detail .used:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
}

.back_white .title_half {
    background: var(--white) !important;
    display: inline-block;
    width: calc(100% - 155px);
    vertical-align: middle;
    color: var(--black);
}

.back_white .btn_primary {
    display: inline-block;
    width: 140px;
    vertical-align: middle;
}

.back_white .title_half i {
    margin-left: 5px;
}

.statistic_item {
    display: inline-block;
    vertical-align: top;
    width: calc(33% - 5px);
    height: 160px;
    background: var(--light);
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 5px;
}

.statistic_item:hover {
    background: var(--primary);
}

.statistic_item .title {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
}

.statistic_item .title span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 60px);
    font-weight: 300;
    font-size: 14pt;
}

.statistic_item:hover .title span {
    color: var(--light);
}

.statistic_item i {
    display: inline-block;
    color: var(--white);
    background: var(--red);
    border-radius: 10px;
    padding: 10px 0;
    vertical-align: middle;
    font-size: 16px;
    width: 55px;
    box-sizing: border-box;
    text-align: center;
}

.statistic_item .progress_holder {
    display: block;
    margin: 20px 0;
}

.statistic_item .progress_holder span {
    display: inline-block;
    margin-bottom: 10px;
}

.statistic_item .progress_holder .title {
    color: var(--red);
    font-size: 14pt;
    font-weight: 300;
}

.statistic_item .progress_holder .progress_percent {
    color: var(--primary);
    float: left;
    font-weight: 300;
    font-size: 10pt;
}

.statistic_item:hover .progress_holder .progress_percent {
    color: var(--light);
}

.progress_bar {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 15px;
    overflow: hidden;
    background: var(--red);
    margin-bottom: var(--margin_m);
    text-align: left;
}

.progress_bar .progress_bar_show {
    display: inline-block;
    height: 10px;
    background: var(--gray);
}

.chart_holder .chart {
    display: inline-block;
    width: calc(100% - 480px);
    vertical-align: top;
    background: var(--gray_dark);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 20px;
    margin-right: 20px;
}

.main_panel .panel_100 .chart_holder .chart {
    width: 100%;
    margin-right: 0;
    margin-bottom: 40px;
    background: var(--light);
}

.chart_holder .buy_form_holder {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 5px);
    border-radius: 20px;
    margin: 50px auto;
}

.chart_holder .buy_form_holder .chart_filter {
    display: inline-block;
    width: calc(60% - 5px);
    background: var(--accsent_hover);
    border-radius: 20px 0 0 20px;
    padding: 8px 20px;
    margin: 8px 0;
}

.chart_holder .buy_form_holder .chart_filter:hover {
    background: var(--accsent);
}

.chart_holder .buy_form_holder .chart_filter:hover span,
.chart_holder .buy_form_holder .chart_filter:hover i {
    color: var(--white);
}

.chart_holder .buy_form_holder .chart_filter i {
    display: inline-block;
    color: var(--accsent);
    font-size: 13px;
    text-align: left;
    width: 30px;
}

.chart_holder .buy_form_holder .chart_filter span {
    display: inline-block;
    color: var(--accsent);
    font-weight: 300;
    font-size: 11pt;
    width: calc(100% - 35px);
}

.chart_holder .buy_form_holder .filter_selected span,
.chart_holder .buy_form_holder .filter_selected i {
    color: var(--white);
}

.chart_holder .buy_form_holder .filter_selected {
    background: var(--accsent);
    cursor: context-menu;
}

.chart_holder .buy_form_holder .chart_help {
    margin-top: 80px;
}

.chart_holder .buy_form_holder .chart_help .help_line {
    margin: 10px 0;
}

.chart_holder .buy_form_holder .chart_help .circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 8px;
}

.chart_holder .buy_form_holder .chart_help span {
    display: inline-block;
    width: calc(100% - 30px);
    vertical-align: middle;
}

.chart_holder .buy_form_holder .chart_help .green_cir {
    background: var(--accsent);
}

.chart_holder .buy_form_holder .chart_help .yellow_cir {
    background: var(--secondary);
}

.chart_holder .buy_chart_holder {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 5px);
}

.chart_holder .buy_chart_holder .chart_tab_holder {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 10px;
}

.chart_holder .buy_chart_holder .chart_tab_holder .chart_tab {
    display: inline-block;
    vertical-align: middle;
    width: calc(33% - 45px);
    color: var(--black);
    margin: 0 20px;
    padding: 5px 0;
    box-sizing: border-box;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
    border: solid 1px transparent;
}

.chart_holder .buy_chart_holder .chart_tab_holder .tab_active {
    background: var(--secondary_hover);
    border: solid 1px var(--secondary_hover);
    color: var(--white);
    font-weight: bold;
}

.chart_holder .buy_chart_holder .chart_tab_holder .chart_tab:hover {
    border: solid 1px var(--secondary_hover);
    color: var(--secondary_hover) !important;
}

.chart_main {
    display: inline-block;
    width: 100%;
    direction: rtl;
    text-align: center;
}

.chart_main .chart_bar {
    display: inline-block;
    vertical-align: top;
    width: 70px;
    text-align: center;
}

.chart_main .chart_bar .bar {
    display: inline-block;
    border-radius: 15px;
    width: 10px;
    background: var(--secondary);
    position: relative;
    left: 4px;
}

.chart_main .chart_bar .bar_not_fill {
    background: var(--accsent);
}

.chart_main .chart_bar .text {
    text-align: center;
    display: block;
}

.chart_main .chart_bar .text_red {
    color: var(--red);
}

.chart_main .chart_bar .text_green {
    color: var(--secondary);
}

.chart_main .chart_amount_green,
.chart_main .chart_amount_yellow {
    display: block;
    text-align: center;
    padding: 3px 0;
    box-sizing: border-box;
    border-radius: 10px;
    line-height: 100%;
    margin-bottom: 5px;
    font-weight: 200;
    font-size: 8pt;
}

.chart_main .chart_amount_green {
    background: var(--accsent);
    color: #fff;
}

.chart_main .chart_amount_yellow {
    background: var(--secondary);
    color: #000;
}

.chart_main .chart_bar .bold {
    font-weight: 400;
    display: block;
}

.panel_box_holder .label {
    display: block;
    font-weight: 300;
    margin-right: 10px;
}

.panel_box_holder select,
.panel_box_holder textarea,
.panel_box_holder .input_span,
.panel_box_holder .input_show,
.panel_box_holder .input,
.panel_box_holder input {
    width: 100%;
    background: var(--white);
    border-radius: 10px;
    margin-bottom: 20px;
}

.panel_box_holder .input_show .btn_show_span,
.panel_box_holder .input_span .btn_show_span {
    display: inline-block;
    text-align: center;
    color: var(--light);
    box-sizing: border-box;
    padding: 0 var(--margin_xl);
    border-radius: var(--radius_15);
    background: var(--primary);
    cursor: pointer;
    float: right;
}

.panel_box_holder .input_show .btn_show_span:hover,
.panel_box_holder .input_span .btn_show_span:hover {
    color: var(--light);
    background: var(--accsent);
}

.autin_row .selected .num {
    color: var(--secondary_hover) !important;
}

.autin_row .selected .circle_num_1 i {
    display: inline-block !important;
}

.autin_row .autin_item .circle_num_1 .circle_num_2 {
    display: none !important;
}

.autin_row .autin_item .circle_num_1 .circle_num_2 {
    display: none !important;
}

.panel_box_holder .btn_left_holder {
    text-align: left;
}

.achievements {
    display: block;
    width: 100%;
    overflow: auto;
    margin: 35px 0 0 0;
}

.achievements a {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    text-align: center;
}

.achievements a span {
    display: block;
}

.achievements a img {
    display: block;
    width: 120px;
    height: 70px;
    object-fit: contain;
}

.achievement_off img {
    filter: grayscale(100);
}

/***************************************** panel main *******************************/

.side_bar_panel {
    vertical-align: top;
    width: 270px;
    display: inline-block;
    background-color: var(--light);
    height: calc(100vh - 50px);
    margin-top: 25px;
    border-radius: 20px;
    margin-right: 40px;
}

.main_panel {
    width: calc(100% - 315px);
    display: inline-block;
    background-color: var(--white);
    height: 100vh;
    overflow: hidden;
    vertical-align: top;
}

.logo_name {
    display: block;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.logo img {
    display: inline-block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.logo_name i {
    float: left;
    margin-top: 10px;
    display: none;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
}

.side_bar_panel .side_menu_holder {
    width: 100%;
    display: block;
    height: calc(100vh - 220px);
    overflow: auto;
}

.side_bar_panel .side_menu_holder .menu_item {
    margin: 8px 0;
}

.side_bar_panel .side_menu_holder .panel_selected {
    margin: 0;
}

.side_bar_panel .side_menu_holder .menu_item i {
    display: inline-block;
    width: 50px;
    text-align: left;
    font-size: 14px;
    color: var(--primary);
    vertical-align: middle;
}

.side_bar_panel .side_menu_holder .menu_item .menu_item_title {
    display: inline-block;
    width: calc(100% - 60px);
    margin: 0 10px 0 0;
    border-radius: 0 50px 50px 0;
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: var(--light);
    vertical-align: middle;
}

.side_bar_panel .side_menu_holder .menu_item:hover .menu_item_title {
    color: var(--secondary);
}

.side_bar_panel .side_menu_holder .menu_item:hover i {
    color: var(--secondary);
}

.side_bar_panel .side_menu_holder .panel_selected .menu_item_title {
    background-color: var(--white);
    color: var(--primary) !important;
}

.side_bar_panel .side_menu_holder .panel_selected i {
    color: var(--secondary);
}

.side_bar_panel .side_menu_holder .menu_item_sub {
    margin: 0;
}

.side_bar_panel .side_menu_holder .menu_item_sub .menu_item_title {
    width: calc(100% - 90px);
    margin: 0;
    padding: 0 15px;
}

.side_bar_panel .side_menu_holder .menu_item_sub i {
    width: 80px;
    font-size: 8px;
}

.side_bar_panel .side_menu_holder .sub_selected .menu_item_title,
.side_bar_panel .side_menu_holder .sub_selected i {
    color: var(--secondary);
}

.counter {
    color: var(--white);
    background: var(--accsent);
    font-size: 8pt;
    padding: 2px 5px;
    border-radius: 15px;
    vertical-align: middle;
    float: left;
    min-width: 20px;
    display: grid;
    text-align: center;
    place-items: center;
    line-height: 100%;
    margin-top: 8px;
}

.main_panel .panel_100 {
    display: block;
    width: 100%;
    height: calc(100vh - 101px);
    padding: 20px 20px 10px 40px;
    box-sizing: border-box;
    overflow: auto;
}

.checkbox {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 25px;
    height: 25px;
    padding: 12px;
    box-sizing: border-box;
    font-size: 10pt;
    border-radius: 10px;
    border: 1px solid var(--accsent);
    box-shadow: inset 0 0 0 0 var(--accsent);
    transition: all 0.1s linear;
}

.checkbox_product {
    border-radius: 35px;
}

.checkbox_current {
    box-shadow: inset 0 0 0 13px var(--accsent);
}

.checkbox_text {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 10pt;
}

.checkbox_text_current {
    color: var(--accsent);
}

.sub_holder_active{
    background: #4b9ba433;
    width: calc(100% - 15px);
    border-radius: 15px;
    border: dashed 1px var(--accsent);
}

/************************************************** table ***************/

.table {
    display: flex;
    flex-direction: column;
    width: calc(100% - 5px);
    padding-top: 20px;
    box-sizing: border-box;
}

.table .table_header {
    display: block;
    margin-bottom: 10px;
}

.table .table_row {
    display: block;
    margin: 8px 0;
    border-radius: var(--radius_15);
    padding: 4px 0;
    background-color: var(--white);
}

.print_box .table .table_row {
    margin: 0;
    border-radius: 0;
    padding: 4px 0;
    border-bottom: dashed 1px #000;
}

.print_box .table .table_row:last-child {
    border-bottom: none;
}

.table .table_row .row .t_title {
    display: none;
}

.table .table_row .row .table_list_img {
    display: block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
}

.table .table_row .num {
    display: none;
    font-size: 18pt;
    font-weight: 900;
    color: var(--primary);
}

.table .table_row .green_color,
.table .table_row .read_text {
    color: var(--green);
}

.table .table_row .red_color,
.table .table_row .dread_text {
    color: var(--red);
}

.table .table_row .yellow_color,
.table .table_row .inread_text {
    color: var(--secondary);
}

.table .table_row span,
.table .table_header span {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 15px;
    box-sizing: border-box;
    height: 40px;
    font-size: 10pt;
}

.table .table_row .empty_box {
    height: auto !important;
    border-radius: 15px;
    cursor: pointer;
}

.table .table_row .empty_box:hover {
    background: #4b9ba422;
}

.table .table_row .program_box {
    display: block;
    width: 100%;
    min-height: 120px;
    line-height: 16pt;
    border: solid 1px var(--primary);
    border-radius: 15px;
    cursor: pointer;
    background: #fff;
}

.table .table_row .program_box_print {
    display: block;
    width: 100%;
    min-height: 96px;
    line-height: 15pt;
    border: solid 1px #000;
    border-radius: 15px;
    background: #fff;
}

.table .table_row .program_box:hover {
    border: solid 1px var(--accsent);
    background: #4b9ba422;
}

.table .table_row .program_box_blink {
    border: solid 1px #f5db02;
    background: #f5db0222;
    animation-name: anim_blink;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes anim_blink {
    0% {
        background: #f5db0222;
    }
    50% {
        background: #f5db0244;
    }
    1000% {
        background: #f5db0222;
    }
}

.table .table_row .row .right_click {
    display: none;
    position: absolute;
    top: 25px;
    right: 25px;
    width: 150px;
    padding: 5px;
    box-sizing: border-box;
    background: var(--white);
    border-radius: 15px;
    z-index: 1;
    border: solid 1px #0009;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35);
}

.table .table_row .row .right_click span {
    display: block;
    width: calc(100% - 10px);
    margin-bottom: 10px;
    padding: 0;
    height: auto;
    color: var(--light);
}

.table .table_row .row .right_click span:last-child {
    margin-bottom: 0;
}

.table .table_row .table_header_hidden span,
.table .table_header span {
    font-weight: 300 !important;
    color: var(--dark) !important;
}

.table .table_row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark);
}

.print_box .table .table_row span {
    color: #000;
}

.table .table_row .t_text div {
    display: block !important;
}

.table .table_row .text_btn,
.table .table_row .btn_icon {
    padding: var(--margin_s);
    width: 28px;
    height: 28px;
    border-radius: var(--radius_oval);
    margin-right: 10px;
    box-sizing: border-box;
}

.table .table_row .row div {
    display: inline-block;
    vertical-align: middle;
}

.table .table_row .row .separator {
    display: block;
    position: relative;
    padding-top: 5px;
    margin-top: 5px;
    border-top: dashed 3px var(--light);
    z-index: 1;
}

.table .table_row .row .separator:after,
.table .table_row .row .separator:before {
    display: block;
    position: absolute;
    content: "";
    background: var(--light);
    width: 14px;
    height: 14px;
    border-radius: 10px;
    top: -7px;
}

.table .table_row .row .separator:after {
    left: -7px;
}

.table .table_row .row .separator:before {
    right: -7px;
}

.table .table_row .row .table_order {
    display: block;
    width: 100%;
    color: var(--secondary_hover);
    margin-top: 10px;
    padding: 0 10px;
    box-sizing: border-box;
}

.table .table_row .row .table_order_image {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
    margin: 2px;
}

.table .table_row:nth-last-child(even) {
    background: var(--white);
}

.table .table_row .waiting_view span {
    font-weight: 700;
}

.table .table_row .btn_normal {
    padding: 5px;
    margin-right: 5px;
}

.table .table_row .successfully {
    color: var(--green);
    font-weight: 600;
}

.table .table_row .pending {
    color: var(--secondary);
    font-weight: 600;
}

.table .table_row .deny {
    color: var(--red);
    font-weight: 600;
}

.table .table_row .row .status {
    width: 20px;
    height: 20px;
    background: var(--light);
    padding: 0;
    text-align: center;
    border-radius: 5px;
    margin-left: 5px;
}

.table .table_row .row .status i {
    font-size: 7px;
}

/************************************************** massage ***************/

.message_holder {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.message_holder .message_item .user_detail {
    display: block;
    margin-bottom: 15px;
}

.message_holder .message_item .user_detail .user_img {
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: var(--radius_50);
    border: 1px solid var(--primary);
    position: relative;
    color: var(--primary);
    background: var(--white);
    margin-left: 10px;
}

.message_holder .message_item .user_detail .user_img i {
    font-size: 26px;
    margin: auto;
    text-align: center;
    display: inline-block;
    padding: 7px 0 7px 10px;
    box-sizing: border-box;
    vertical-align: middle;
}

.message_holder .message_item {
    margin-bottom: 30px;
}

.message_holder .message_item:last-child {
    margin-bottom: 0;
}

.message_holder .overflow_auto {
    height: 450px;
    overflow: auto;
}

.message_holder .message_item .user_detail img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius_50);
    background: #aaadcf33;
    padding: 3px;
    box-sizing: border-box;
}

.message_holder .message_item .user_detail span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 300;
    font-size: 10pt;
}

.message_holder .message_item .message_text {
    display: block;
    width: fit-content;
    max-width: calc(100% - 75px);
    margin-right: 50px;
    padding: 16px;
    color: var(--dark);
    background-color: var(--gray_dark);
    vertical-align: top;
    box-sizing: border-box;
    font-size: 11pt;
    border-radius: 15px;
}

.message_holder .message_item .massage_img {
    display: block;
    margin: 10px 50px 0 0;
}

.message_holder .message_item .massage_img img {
    display: inline-block;
    width: 400px;
    border-radius: 20px;
}

.message_holder .message_item .message_text p {
    display: inline-block;
    font-size: 11pt;
    line-height: 1.6;
    margin-bottom: 10px;
}

.message_holder .message_date {
    display: inline-block;
    font-size: 8pt;
    color: var(--gray_dark_2);
    margin-right: 50px;
}

.message_holder .message_date {
    display: block;
    font-size: 8pt;
    color: var(--gray_dark_2);
}

.message_holder .message_date_new {
    display: block;
    color: var(--secondary);
    font-size: 8pt;
    font-weight: 300;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    border-bottom: 1px dashed var(--secondary);
    max-width: 800px;
    margin: auto;
    padding-bottom: 5px;
}

.message_holder .admin {
    float: left;
    text-align: left;
}

.message_holder .admin .user_detail span {
    margin-top: 15px;
    margin-left: 10px;
}

.message_holder .admin .message_text {
    background-color: var(--white);
    float: left;
    margin-right: 0;
    margin-left: 50px;
    text-align: right;
}

.message_holder .admin .massage_img {
    margin: 10px 0 0 50px;
}

.message_holder .admin .message_date {
    margin-right: 0;
    margin-left: 50px;
}

.message_holder .form {

}

.message_holder .form textarea {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
    background: var(--white);
    resize: none;
}

.form_btn_holder {
    display: block;
    margin-top: 5px;
}

/******************************************************* music player *****************************/

.music_holder {
    position: fixed;
    bottom: 20px;
    left: 40px;
    width: 280px;
    z-index: 2;
}

.music_holder .music_list {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: var(--light);
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.music_holder .music_list .music_list_holder {
    display: block;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.music_item {
    display: block;
    width: 100%;
    cursor: pointer;
    color: var(--dark);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: solid 1px var(--dark);
}

.music_item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
}

.music_item span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 25px);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music_item i {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
}

.music_holder .music_list .music_selected {
    color: var(--red);
}

.music_holder .music_player {
    display: block;
    width: 100%;
    background: var(--light);
    border-radius: 50px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    margin-top: 10px;
}

.music_holder .music_player audio {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 50px;
}

/******************************************************* f o o t e r *****************************/

.footer {
    background-image: var(--gradiant_primary);
    border-radius: 20px;
    padding-top: var(--margin_xl);
    margin-top: var(--margin_x4);
    box-sizing: border-box;
    position: relative;
}

.footer .main_title {
    right: 40px;
    left: unset;
}

.footer .main_title .radius_negative_right,
.footer .main_title .radius_negative_left {
    background: var(--white);
}

.footer .main_title .radius_negative_right:after,
.footer .main_title .radius_negative_left:after {
    background: var(--primary);
}

.footer .footer_item {
    display: inline-block;
    width: 500px;
    min-height: 335px;
    border-radius: 20px;
    padding: var(--margin_x2) var(--margin_xl);
    box-sizing: border-box;
    vertical-align: top;
    margin-left: 20px;
}

.footer .footer_two {
    display: inline-block;
    width: calc(100% - 525px);
}

.footer .footer_item_mid {
    width: calc(50% - 5px);
    display: inline-block;
}

.footer .footer_item .img_holder {
    display: inline-block;
    margin-top: var(--margin_x2);
    vertical-align: bottom;
}

.footer .footer_item img {
    display: inline-block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    background: var(--white);
    margin-left: var(--margin_s);
    background-color: #FFD52466;
    border: 1px solid var(--secondary);
    border-radius: 10px;
    padding: var(--margin_m);
    box-sizing: border-box;
    cursor: pointer;
}

.footer .footer_item img:hover {
    background-color: #FFD524aa;
}

.footer .footer_item .text {
    display: block;
    color: var(--gray_dark_2);
    margin: var(--margin_x) 0;
    text-align: justify;
    font-size: 10pt;
    font-family: var(--font_secondary);
}

.footer .footer_item_mid .social_holder {
    display: inline-block;
    margin-top: var(--margin_x2);
    vertical-align: bottom;
}

.footer .footer_item_mid .social_holder i {
    color: var(--white);
    margin-left: var(--margin_s);
    background-color: var(--secondary);
    border-radius: 10px;
    padding: var(--margin_m);
    box-sizing: border-box;
    font-size: 20px;
}

.footer .footer_item_mid .social_holder i:hover {
    background-color: var(--primary);
}

.footer .footer_item_mid .footer_title {
    display: block;
    margin-bottom: var(--margin_l);
    padding-bottom: var(--margin_l);
    font-size: 12pt;
    font-weight: bold;
    color: var(--secondary);
}

.footer .footer_item_mid .footer_menu_holder a {
    display: block;
    margin-bottom: var(--margin_m);
    font-size: 9pt;
    color: var(--gray_dark_2);
    box-sizing: border-box;
}

.footer .footer_item_mid .footer_menu_holder a:hover {
    color: var(--white);
    padding-right: var(--margin_l);
}

.footer .footer_item_mid .footer_menu_holder a i {
    width: 25px;
    color: var(--secondary);
    margin-left: var(--margin_m);
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 14px;
}

.copyright .right {
    display: inline-block;
    margin: 10px 0;
    font-family: var(--font_secondary);
}

.copyright .right a {
    background: var(--white);
    color: var(--secondary);
    border-radius: 5px;
    padding: 0 5px;
    box-sizing: border-box;
    font-weight: bold;
}

.copyright .right a:hover {
    background: var(--secondary);
    color: var(--white);
}

.copyright .left {
    display: inline-block;
    margin: 10px 0;
    float: left;
    font-family: var(--font_secondary);
}

.copyright .left a {
    background: var(--white);
    color: #5d7803;
    border-radius: 5px;
    padding: 0 5px;
    box-sizing: border-box;
    font-weight: bold;
}

.copyright .left a:hover {
    background: #5d7803;
    color: var(--white);
}

/************************************************* r e s p o n s i v e *************************************/

@media screen and (max-width: 1150px) {
    .licence_holder .title_half {
        width: 300px;
        height: 395px;
    }

    .licence_img {
        width: calc(100% - 325px);
    }

    .licence_img .img_item {
        width: calc(50% - 7px);
    }

    .licence_img .img_item:nth-child(3n) {
        margin-left: 10px;
    }

    .licence_img .img_item:nth-child(2n) {
        margin-left: 0;
    }

    .faq_archive .faq_item_holder {
        width: 100%;
    }

    .main_panel .menu_holder .fa_bars {
        display: inline-block;
    }

    .side_bar_panel {
        display: block;
        position: fixed;
        margin-right: 0;
        right: -280px;
        z-index: 11;
    }

    .main_panel {
        display: block;
        width: 100%;
    }

    .main_panel .menu_holder {
        width: calc(100% - 40px);
        margin: 25px 20px 5px 20px;
    }

    .main_panel .panel_100 {
        padding: 20px 20px 10px 20px;
    }
}

@media screen and (max-width: 1000px) {
    .cta_holder .title_half {
        display: inline-block;
        width: calc(50% - 19px);
        margin-left: 35px;
    }

    .cta_holder .title_half:nth-child(2n) {
        margin-left: 0;
    }

    .cta_holder .title_half:last-child {
        display: block;
        margin: 55px auto 0 auto;
    }
}

@media screen and (max-width: 900px) {
    .archive_holder .user_item {
        width: calc((100% / 3) - 20px);
    }

    .faq_item_holder {
        width: calc(100% - 330px);
    }

    .title_faq {
        vertical-align: top;
        width: 300px;
    }

    .footer .footer_item {
        width: 300px;
    }

    .footer .footer_two {
        width: calc(100% - 325px);
    }
}

@media screen and (max-width: 800px) {
    .menu_holder .fa_bars {
        display: inline-block;
    }

    .menu_holder .menu {
        display: none;
    }

    .site_title {
        margin: 40px auto 10px auto;
    }

    .slider_holder img {
        height: 300px;
    }

    .licence_holder .title_half,
    .licence_img {
        display: block;
        width: 100%;
        margin-right: 0;
        height: auto;
        margin-bottom: 10px;
    }

    .about_holder {
        width: calc(100% - 20px);
    }

    .video_holder {
        width: calc(100% - 100px);
        margin-left: 50px;
    }

    .video_holder .video_box video {
        height: 260px;
    }

    .cta_holder .title_half {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 55px;
    }

    .cta_holder .title_half:first-child {
        margin-top: 0;
    }

    .title_faq {
        display: block;
        width: 100%;
    }

    .faq_item_holder {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    .archive_holder .user_item {
        width: 100%;
    }

    .footer .footer_item {
        display: block;
        width: 100%;
        min-height: auto;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--primary);
    }

    .footer .footer_two {
        display: block;
        width: 100%;
        padding: 5px var(--margin_xl) 5px var(--margin_xl);
        box-sizing: border-box;
    }

    .footer .footer_item .img_holder {
        margin-top: 0;
    }

    .page_title {
        margin: 0 auto;
        text-align: center;
    }

    .gallery .gallery_1,
    .gallery .gallery_3 {
        display: block;
        margin-bottom: 5px;
        width: 100%;
    }

    .gallery .gallery_3 .img_full,
    .gallery .gallery_3 .img_half {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        height: 220px;
    }

    .gallery .gallery_3 .img_full img,
    .gallery .gallery_3 .img_half img {
        width: 100%;
        height: 100%;
    }

    .gallery .gallery_1 img {
        height: 250px;
    }

    .blog_item {
        display: flow-root;
        padding: 5px;
    }

    .blog_item .img_hold,
    .blog_item .text_hold {
        display: block;
        width: 100%;
    }

    .panel_50,
    .panel_33,
    .panel_30,
    .panel_70 {
        display: block;
        width: 100%;
        margin-left: 0;
    }

    .chart_holder .buy_form_holder,
    .chart_holder .buy_chart_holder {
        display: block;
        width: 100%;
        margin: 0;
    }

    .w50,
    .w33 {
        display: block;
        width: 100%;
        padding: 0;
    }

    .login_holder .slider_holder {
        display: none;
    }

    .table .table_header {
        display: none;
    }

    .table .table_row .row div {
        display: block;
        width: 100% !important;
        border-bottom: dashed 1px var(--gray);
    }

    .table .table_row .row div:last-child {
        border-bottom: none;
    }

    .table .table_row .row .t_title {
        display: block;
        font-weight: bold;
        padding: 0 15px;
        width: 100%;
    }

    .table .table_row .row .t_text {
        display: block;
        padding: 0 15px;
        width: 100%;
    }

    .host_result .detail {
        display: block;
        width: 100%;
        margin-top: 25px;
    }
}

@media screen and (max-width: 700px) {
    .menu_holder .user_notif {
        display: none;
    }

    .week_holder .item {
        width: calc((100% / 7) - 5px);
        margin: 0;
    }

    .week_holder .day {
        display: none;
    }

    .statistic_item {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .statistic_item:last-child {
        margin-bottom: 0;
    }

    .chart_holder .buy_form_holder .chart_filter {
        display: block;
        width: 100%;
        margin: 8px 0;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 500px) {
    .footer .footer_item_mid {
        display: block;
        width: 100%;
    }

    .footer .footer_item_mid .social_holder {
        margin-top: 0;
    }

    .footer .footer_item_mid .footer_title {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 5px;
    }

    .footer .footer_item_mid .footer_menu_holder a {
        margin-bottom: 0;
    }

    .copyright .left,
    .copyright .right {
        display: block;
        float: right;
        margin: 0 5px;
    }
}