.support-area .container-main { padding-bottom: 30px; min-height: 255px; }
.support-area .container-main .inputBox { margin-top: 85px; }
.support-area .container-main label { }
.support-area .btn-close { float: right; margin: 0 1% 0 0; }
.support-area .btn-submit { float: right; margin: 0 1% 0 2%; }
.support-area .topic-list-li { margin: 0 0 2% 0; border: 1px solid #ddd; padding: 16px; display: flow-root; }
.support-area .support-hr{ margin: 2% 0 2% 0; border: 0; border-top: 1px solid #bcb; }
.support-area .main-page { background-image: url("../../public/image/community/header.svg"); background-position: center top; background-size: 100% auto; }
.support-area .sub-page { background-image: url("../../public/image/community/header.svg"); background-position: center top; background-size: 100% auto; height: 120px; }
.support-area .main-title { opacity: 0.9; margin: 6% 0 5% 0; color: #666666; text-align: center; background: #eee; border-radius: 40px; }
.support-area .main-title .title { font-size: 25px; }
.support-area .main-title .subtitle { font-size: 24px; }
.support-area .main-logo { width: 100%; text-align: center; }
.support-area .main-logo img { width: 200px; }
.support-area .sub-title { margin: 6% 0 3% 0; color: #585EA8; text-align: center; font-size: 4em; }
.support-area .page-control{ margin: 1% 0 3% 0; color: #585EA8; text-align: left; font-size: 1em; font-weight: 400; }
.support-area .category-title{ margin: 0 0 0 0; color: #585EA8; text-align: left; font-size: 2.8em; font-weight: 400; }
.support-area .category-description{ margin: 0 0 0 0; color: #666; text-align: left; font-size: 1.2em; font-weight: 400; }
.support-area .category { margin: 4% 0 2.5% 0; text-align: center; display: flow-root; width: 100%; }
.support-area .category-grid { padding: 10px; text-align: center; font-size: 1em; margin-bottom: 2%; height: 85px; width: 120px; display: inline-table; }
.support-area .category-image { padding: 13px; border-radius: 10px; background: #f9b861; width: 60px; height: 60px; margin-bottom:2%; }
.support-area .category-image:hover { transform: scale(1.1); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); z-index: 1; }
.support-area .name-group { font-family: 'GudeaBold'; font-size: 15px; }
.support-area .topic-list{ }
.support-area .topic-title { margin: 0 0 0 0; color: #000; text-align: left; font-size: 1.5em; font-weight: 400; }
.support-area .topic-subtitle { float: left; width: 100%; };
.support-area .topic-message-reply{ margin: 0 0 1% 0; color: #000; text-align: left; font-size: 1.2em; font-weight: 400; }
.support-area .topic-title-category{ margin: 0 0 0 0; color: #000; text-align: left; font-size: 20px; font-weight: 400; }
.support-area .archived { color: #aa0000; }
.support-area .topic-date{ color: #888; }
.support-area .messageTopic { float: left; font-size: 1.1em; width: 100%; color: #8e8989; white-space: nowrap; overflow: hidden; };
.support-area .topic-button:hover{ text-decoration: none; }
.support-area .topic-close-icon{ font-size: 0.55em; }
.support-area .topic-description { margin: 15px 0px 15px 0; color: #333; text-align: left; font-size: 1.4em; font-weight: 400; }
.support-area .topic-sub-title { margin: 0 0 1.5% 0; color: #585EA8; text-align: left; font-size: 23px; font-weight: 400; line-height: 35px; display: flow-root; }
.support-area .topic-date-create { color: #999; font-size: 1em; font-weight: 300; text-align: right;}
.support-area .topic-date-update { color: #999; font-size: 1em; font-weight: 300; margin-top: 1%; }
.support-area .box-status { float: right; }
.support-area .topic-likes { color: #666666; padding: 5px 16px 5px 8px; font-size: 0.9em; }
.support-area .topic-likes.on{ color: #00aa00; }
.support-area .topic-dislikes { color: #666666; padding: 5px 16px 5px 8px; font-size: 0.9em; }
.support-area .topic-dislikes.on { color: #aa0000; }
.support-area .topic-answer-count{ margin: 15px 0 15px 0; color: #585EA8; font-size: 1.2em; }
.support-area .topic-message{ margin: 0 0 0 0; }
.support-area .topic-answer-button{ border: 1px solid #0000aa; margin-left: 2%; padding: 0 16px 0 16px; text-decoration: none; }
.support-area .topic-answer-button:hover{ text-decoration: none; background-color: #00aa00; color: #fff; }
.support-area .topic-useful-yes{ border: 1px solid #0000aa; margin-left: 2%; padding: 0 16px 0 16px; text-decoration: none; }
.support-area .topic-useful-yes:hover{ text-decoration: none; background-color: #00aaee; color: #fff; }
.support-area .topic-useful-yes.on{ text-decoration: none; background-color: #00aaee; color: #fff; }
.support-area .topic-useful-no{ border: 1px solid #0000aa; margin-left: 2%; padding: 0 16px 0 16px; text-decoration: none; }
.support-area .topic-useful-no:hover{ text-decoration: none; background-color: #00aaee; color: #fff; }
.support-area .topic-useful-no.on{ text-decoration: none; background-color: #00aaee; color: #fff; }
.support-area .section-archive-topic { text-align: left; font-size: 1.4em; font-weight: 400; }
.support-area .topic-archive { border: 1px solid #0000aa; padding: 5px; color: #0000aa;text-decoration: none;  }
.support-area .topic-archive:hover{ text-decoration: none; background-color: #030327; color: #fff; }
.support-area .topic-useful-message{ margin: 2% 0 4% 0; color: #333; text-align: left; font-size: 1.4em; font-weight: 400; }
.support-area .topic-avatar-icon{ float: left; margin: 0 2% 0 0; border-radius: 100%; height: 50px; width: 50px; }
.support-area .reply-date-creation{ color: #999; font-size: 0.9em; font-weight: 300; }
.support-area .reply-date-update{ color: #999; font-size: 1em; font-weight: 300; margin-left: 5%; }
.support-area .topic-answer{ color: #008000; }
.support-area .topic-answer-background{ background-color: #ebffef; padding: 16px; }
.support-area .reply-button{ margin: 0 0 2% 0; text-align: right; }
.support-area .topic-answer-message{ margin-top: 1.5%;}
.support-area .answer-area{ display: none; margin: 0 0 60% 0; }
.support-area .box-edit-topic { padding-bottom: 30px; display: flow-root; }
.support-area .topic-list-reply{ margin: 0 0 2% 0; border: 1px solid #ddd; padding: 16px; }
.support-area .topic-button-create{ margin: 0 0 3% 0; text-align: right; }
.support-area .topic-like-button { border: 1px solid #0000aa; padding: 0 16px 0 16px; margin-left: 1%;}
.support-area .topic-like-button:hover { text-decoration: none; background-color: #00aaee; color: #fff; }
.support-area .message-likes-count { float: right; font-size: 1.3em; }
.support-area .message-button-like { text-decoration: none; color: #337ab7; border: 0.1px solid #0000aa; padding: 2px 6px 2px 4px; font-size: 1.2em; }
.support-area .message-button-like:hover { text-decoration: none; color: #0000aa; }
.support-area .message-button-like.on { text-decoration: none; color: #00aa00; border: 0.1px solid #00aa00;}
.support-area .message-button-dislike { text-decoration: none; color: #337ab7; border: 0.1px solid #0000aa; padding: 2px 6px 2px 4px; font-size: 1.2em; }
.support-area .message-button-dislike:hover { text-decoration: none; color: #0000aa; }
.support-area .message-button-dislike.on { text-decoration: none; color: #aa0000; border: 0.1px solid #aa0000;}
.support-area .message-likes { color: #337ab7; }
.support-area .message-likes:hover { text-decoration: none; }
.support-area .nav-pagination { position: relative; margin: 0 0 3% 0;}
.support-area .nav-pagination-button { color: #fff; margin: 0 1% 0 0; }
.support-area .topic-edit { margin-left: 1%; }
.support-area .topic-edit-category { margin-left: 1%; float: right; }
.support-area .message-edit { margin: 0.5% 1% 0 0; float: right; color:#fff; }
/* .support-area .message-update-label { text-align: center; padding: 0 0 0 0 !important; } */
.support-area .search-bx input { padding: 0px 20px; height: 40px; border-radius: 20px !important; font-size: 18px; opacity: 0.8; }
.support-area #footer { left: 0; bottom: 0; }
.support-area .market-disabled { text-align: center; font-size: 30px; text-transform: uppercase; padding: 20px; color: #999; }
.support-area .cursor-pointer { cursor: pointer; }


@media screen and (max-width: 1500px) {
	.support-area .main-page {
        background-size: 130% auto;
    }
    .support-area .sub-page {
        background-size: 130% auto;
    }
}

@media screen and (max-width: 1200px) {
	.support-area .main-page {
        background-size: 160% auto;
    }
    .support-area .sub-page {
        background-size: 160% auto;
    }
}

@media screen and (max-width: 1000px) {
	.support-area .main-page {
        background-size: 220% auto;
    }
    .support-area .sub-page {
        background-size: 220% auto;
    }
}

@media screen and (max-width: 780px) {
	.support-area .main-page {
        background-size: 270% auto;
    }
    .support-area .sub-page {
        background-size: 270% auto;
    }
    .support-area .topic-date-create { text-align: left; }
}

@media screen and (max-width: 600px) {
	.support-area .main-page {
        background-size: 330% auto;
    }
    .support-area .sub-page {
        background-size: 330% auto;
    }
    .support-area .topic-date-create { text-align: left; }
}