@media print {
    a[href]:after {
        content: none !important;
    }
}

html, body {
    height: 100%;
    color: #303030;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
}

#logo_readawrite {
    margin-top: 5px;
    width: 160px;
}

/* Google Adsense */

.google-auto-placed {
    display: none;
}

.btn {
    font-size: 14px;
    font-weight: 300;
}

.btn-block {
    display: block;
    width: 93%;
    margin-top: 10px
}

.black-screen {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 1);
}
.btnSaveNewStyle {
    width: 177px;
    height: 45px;
    border-radius: 23px;
    background-color: var(--cardBgColor) !important;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

/* START Pagination CSS */

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: black;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    z-index: 2;
    color: #5cb85c;
    background-color: #eee;
    border-color: #ddd
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #d73c72;
    border-color: #d73c72;
}

/* END Pagination CSS */

.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}

.form-signin .checkbox {
    font-weight: normal;
}

.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-control[readonly] {
    background-color: #ffffff;
}

.bannerTop {
    background-color: #464646;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 130px;
}

a.back-to-top {
    display: none;
    width: 45px;
    height: 45px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background-color: #aaaaaa;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 8 */
    filter: alpha(opacity=50);
    /* IE 5-7 */
    -moz-opacity: 0.5;
    /* Netscape */
    -khtml-opacity: 0.5;
    /* Safari 1.x */
    opacity: 0.5;
    /* Good browsers */
}

a:hover.back-to-top {
    background-color: #555555;
}

a.delete_element {
    width: 35px;
    height: 35px;
    position: absolute;
    z-index: 999;
    right: 10px;
    top: 0;
    background-color: #ff0000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
}

.commentContent p>a, .loadedContent p>a, #chapterContents a:not[id^="footnote-marker"], #chapterCartoonContents a:not[id^="footnote-marker"], #singleChapterContents a:not[id^="footnote-marker"], #articleContent a:not[id^="footnote-marker"], #articleContents a:not[id^="footnote-marker"], #topicContent a:not[id^="footnote-marker"] {
    text-decoration: underline;
    color: var(--linkColor);
}
label.switch {
    position: relative;
    display: inline-block;
    /* width: 60px; */
    /* height: 34px; */
}

/* Hide default HTML checkbox */
label.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    width: 34px;
    height: 18px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2.5px;
    bottom: 2.5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--linkColor);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--linkColor);
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/*slide nav bar*/

.sidenav {
    height: 90%;
    width: 0;
    position: fixed;
    z-index: 0;
    top: 80px;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #818181;
    display: block;
}

.sidenav a:hover, .offcanvas a:focus {
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

.myArticleElement {
    margin-top: 20px;
    background-clip: content-box;
}

.articleElement {
    background-clip: content-box;
}

.topicElement {
    height: 200px;
    background-clip: content-box;
}

.articleName, .articleSynopsis {
    display: block;
    overflow: hidden;
    word-wrap: break-word;
}

.articleSynopsis {
    max-height: 40px;
}

.articleName>a:hover {
    text-decoration: none;
    color: white;
}

.tagList {
    height: 35px;
    display: block;
    overflow: hidden;
}

.articleDetail {
    margin-top: 10px;
    float: right;
}

.categoryList {
    height: 40px;
    display: block;
    overflow: hidden;
}

.authorList {
    height: 40px;
    display: block;
    overflow: hidden;
}

.publisherList {
    height: 40px;
    display: block;
    overflow: hidden;
}

.publisherName, .chapterNum, .viewNum {
    display: block;
}

#errMsg {
    word-break: keep-all;
    word-wrap: break-word;
}

.btnGoogle {
    background-color: #ffffff;
    border-style: solid;
    padding: 10px;
    border-color: #dadce0;
    color: #3c4043;
    max-width: 275px;
    width: 100%;
}

.btnGoogle:hover {
    background-color: rgba(66,133,244,.1);
}

.btnFacebook {
    background-color: #4267B2;
    border: none;
    padding: 10px;
    color: #ffffff;
    max-width: 275px;
    width: 100%;
}

.btnFacebook:hover {
    background-color: #3B5998;
}

.btnLine {
    background-color: #00B900;
    border: none;
    padding: 10px;
    color: #ffffff;
    max-width: 275px;
    width: 100%;
}

.btnLine:hover {
    background-color: #00E000;
}

.btnApple {
    background-color: black;
    border: none;
    padding: 10px;
    color: #ffffff;
    max-width: 275px;
    width: 100%;
}

.btnApple:hover {
    background-color: #404040;
}

.btnGoogle:hover, .btnFacebook:hover, .btnLine:hover, .btnApple:hover {
    text-decoration: none;
}

.btnMeb {
    width: 100%;
    cursor: pointer;
    background-position: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-color: #FBB03B;
    border: none;
    padding: 10px;
    color: #ffffff;
    border-radius: 5px;
    font-size: 14px;
}

.btnMeb:hover {
    width: 100%;
    cursor: pointer;
    background-position: 10px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-color: #555;
    border: none;
    padding: 10px;
    color: #ffffff;
    border-radius: 5px;
    font-size: 14px;
}

.btnPink {
    color: white;
    background-color: #e24674;
}

.btnPink:hover {
    color: white;
    background-color: #cb3f68;
    cursor: pointer;
}

.boxReplyComment {
    position: relative;
    left: 0%;
    top: 10px;
    margin-bottom: 10px;
}

.btn_standard_share_size {
    border-radius: 18pt !important;
    width: 82px;
    margin-right: 17px;
    height: 32px;
}

.btn_standard_share_size:last-child {
    border-radius: 18pt !important;
    width: 82px;
    margin-right: 0px;
}

/* css background color */

.bgWhite {
    background-color: #ffffff;
}

.bgBlack {
    background-color: #000000;
}

.bgGrey93 {
    background-color: #ededed;
}

.bgLightGrey {
    background-color: #d3d3d3;
}

.bgDavyGrey {
    background-color: #555555;
}

.bgBlueFacebook {
    background-color: #3b5a94;
}

.bgDarkElectricBlue {
    background-color: #536878;
}

.bgGold {
    background-color: #ffd700;
}

.bgGrey {
    background-color: #bbbbbb;
}

.bgLightPink {
    background-color: #e34574;
    ;
}

.bgAwesome {
    background-color: #ff2052;
}

.bgBootstrapInverse {
    background-color: #222222;
}

.bgRed {
    background-color: #ff0000;
}

.bgGreen {
    background-color: green;
}

.bgYellow {
    background-color: yellow;
}

.bgGray {
    background-color: grey;
}

.bgAliceBlue {
    background-color: aliceblue;
}

.bgLightGreen {
    background-color: lightgreen;
}

.bgLemonChiffon {
    background-color: lemonchiffon;
}

.bgBlanchedAlmond {
    background-color: blanchedalmond;
}

.bgTopic {
    background-color: #F3F3F3;
}

.bgCartoon {
    background-color: #E4EEF0;
}

.bgFiction {
    background-color: #E4EEF0;
}

.bgNonfiction {
    background-color: #FDE2EB;
}

.bgReaderMode {
    background-color: #D6F7AD !important;
}

.bgWriterMode {
    background-color: #FFF8B5 !important;
}

.bgLightBlue {
    background-color: #e3eef0 !important;
}

.bgGreenPurchase {
    background-color: #c2ecc2;
}

.bgGreenBlue {
    background-color: #1fb49f;
}

.bgUltraLightGrey {
    background-color: #F9F9F9;
}

.bgAnnouncement {
    background-color: var(--bgAnnouncement);
}

/* css background white and border color */

.borderNone {
    border: none;
}

.borderRed {
    border: 1px solid #ff0000;
}

.borderDavyGrey {
    border: 1px solid #555555;
}

.borderLightGrey {
    border: 1px solid #d3d3d3;
}

.borderBottomLightGrey {
    border-bottom: 1px solid #d3d3d3;
}

.borderRound0 {
    border-radius: 0;
}

.borderRound3 {
    border-radius: 3px;
}

.borderRound {
    border-radius: 4px;
}

.borderRound5 {
    border-radius: 5px;
}

.borderLeftNewGrey2 {
    border-left: 1px solid #c0c0c0;
}

.borderGreenBlue {
    border: solid 1px var(--linkColor) !important;
}

.borderLightPink {
    border: solid 1px var(--lightPinkColor) !important;
}

.borderNewGrey1 {
    border: solid 1px #606060;
}

.borderNewGrey2 {
    border: solid 1px #c0c0c0;
}

.borderNewGrey3 {
    border: solid 1px #909090;
}

.borderNewGrey4 {
    border: solid 1px #e1e1e1;
}

.borderNewGrey5 {
    border: solid 1px #707070;
}

.borderNewGrey6 {
    border: solid 1px #d1d1d1;
}

/* css text color */

.txtDavyGrey {
    color: #555555;
}

.txtMediumGrey{
    color: #8d8d92;
}

.txtWhite {
    color: #ffffff;
}

.txtYellow {
    color: #ffff00;
}

.txtRed {
    color: #ff0000;
}

.txtBlue {
    color: #0000ff;
}

.txtLightBlue {
    color: #0884E4;
}

.txtGold {
    color: #ffd700;
}

.txtAwesome {
    color: #ff2052;
}

.txtBlack {
    color: #000000;
}

.txtLightGrey {
    color: #cccccc;
}

.txtGrey {
    color: grey;
}

.txtPink {
    color: #ed306b;
}

.txtLightPink {
    color: #e34574;
}

.txtGreenBlue {
    color: #1fb49f;
}

.txtBlueGreen {
    color: #00cbc3;
}

.txtNewGrey1 {
    color: #606060;
}

.txtNewGrey2 {
    color: #c0c0c0;
}

.txtNewGrey3 {
    color: #909090;
}

.txtNewGrey4 {
    color: #e1e1e1;
}

.txtNewGrey5 {
    color: #707070;
}

.txtNewGrey6 {
    color: #d1d1d1;
}

/* css margin padding element */

.paddingAll50 {
    padding: 50px;
}

.paddingAll30 {
    padding: 30px;
}

.paddingAll25 {
    padding: 25px;
}

.paddingAll20 {
    padding: 20px;
}

.paddingAll15 {
    padding: 15px;
}

.paddingAll10 {
    padding: 10px;
}

.paddingAll5 {
    padding: 5px;
}

.paddingAllNone {
    padding: 0px;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingTop15 {
    padding-top: 15px;
}

.paddingTop20 {
    padding-top: 20px;
}

.paddingTop30 {
    padding-top: 30px;
}

.paddingTop40 {
    padding-top: 40px;
}

.paddingTop50 {
    padding-top: 50px;
}

.paddingTop60 {
    padding-top: 60px;
}

.paddingTop70 {
    padding-top: 70px;
}

.paddingTop100 {
    padding-top: 100px;
}

.paddingTopBottomNone {
    padding-top: 0;
    padding-bottom: 0;
}

.paddingTopBottom100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.paddingTopNone {
    padding-top: 0px;
}

.paddingRight100 {
    padding-right: 100px;
}

.paddingRight80 {
    padding-right: 80px;
}

.paddingRight70 {
    padding-right: 70px;
}

.paddingRight60 {
    padding-right: 60px;
}

.paddingRight50 {
    padding-right: 50px;
}

.paddingRight45 {
    padding-right: 45px;
}

.paddingRight40 {
    padding-right: 40px;
}

.paddingRight30 {
    padding-right: 30px;
}

.paddingRight20 {
    padding-right: 20px;
}

.paddingRight15 {
    padding-right: 15px;
}

.paddingRight10 {
    padding-right: 10px;
}

.paddingRight5 {
    padding-right: 5px;
}

.paddingRightNone {
    padding-right: 0px;
}

.paddingBottom70 {
    padding-bottom: 70px;
}

.paddingBottom30 {
    padding-bottom: 30px;
}

.paddingBottom20 {
    padding-bottom: 20px;
}

.paddingBottom10 {
    padding-bottom: 10px;
}

.paddingBottomNone {
    padding-bottom: 0px;
}

.paddingLeft145 {
    padding-left: 145px;
}

.paddingLeft80 {
    padding-left: 80px;
}

.paddingLeft70 {
    padding-left: 70px;
}

.paddingLeft60 {
    padding-left: 60px;
}

.paddingLeft50 {
    padding-left: 50px;
}

.paddingLeft45 {
    padding-left: 45px;
}

.paddingLeft40 {
    padding-left: 40px;
}

.paddingLeft30 {
    padding-left: 30px;
}

.paddingLeft20 {
    padding-left: 20px;
}

.paddingLeft10 {
    padding-left: 10px;
}

.paddingLeft5 {
    padding-left: 5px;
}

.paddingLeftNone {
    padding-left: 0px;
}

.paddingTopBottom50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.paddingTopBottom30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.paddingTopBottom25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.paddingTopBottom20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.paddingTopBottom15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.paddingTopBottom10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paddingTopBottom5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.paddingTopBottom3 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.paddingLeftRight150 {
    padding-left: 150px;
    padding-right: 150px;
}

.paddingLeftRight145 {
    padding-left: 145px;
    padding-right: 145px;
}

.paddingLeftRight120 {
    padding-left: 120px;
    padding-right: 120px;
}

.paddingLeftRight100 {
    padding-left: 100px;
    padding-right: 100px;
}

.paddingLeftRight50 {
    padding-left: 50px;
    padding-right: 50px;
}

.paddingLeftRight45 {
    padding-left: 45px;
    padding-right: 45px;
}

.paddingLeftRight40 {
    padding-left: 40px;
    padding-right: 40px;
}

.paddingLeftRight30 {
    padding-left: 30px;
    padding-right: 30px;
}

.paddingLeftRight20 {
    padding-left: 20px;
    padding-right: 20px;
}

.paddingLeftRight15 {
    padding-left: 15px;
    padding-right: 15px;
}

.paddingLeftRight10 {
    padding-left: 10px;
    padding-right: 10px;
}

.paddingLeftRight5 {
    padding-left: 5px;
    padding-right: 5px;
}

.paddingLeftRightNone {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.marginAll20 {
    margin: 20px;
}

.marginAll15 {
    margin: 15px;
}

.marginAll10 {
    margin: 10px !important;
}

.marginAll5 {
    margin: 5px;
}

.marginTop70 {
    margin-top: 70px;
}

.marginTop60 {
    margin-top: 60px;
}

.marginTop50 {
    margin-top: 50px;
}

.marginTop40 {
    margin-top: 40px;
}

.marginTop35 {
    margin-top: 35px;
}

.marginTop30 {
    margin-top: 30px;
}

.marginTop25 {
    margin-top: 25px;
}

.marginTop20 {
    margin-top: 20px;
}

.marginTop15 {
    margin-top: 15px;
}

.marginTop10 {
    margin-top: 10px;
}

.marginTop5 {
    margin-top: 5px;
}

.marginTopNone {
    margin-top: 0;
}

.marginRight30 {
    margin-right: 30px;
}

.marginRight20 {
    margin-right: 20px !important;
}

.marginRight15 {
    margin-right: 15px;
}

.marginRight10 {
    margin-right: 10px;
}

.marginRight5 {
    margin-right: 5px;
}

.marginRightNone {
    margin-right: 0;
}

.marginBottom70 {
    margin-bottom: 70px;
}

.marginBottom60 {
    margin-bottom: 60px;
}

.marginBottom50 {
    margin-bottom: 50px;
}

.marginBottom40 {
    margin-bottom: 40px;
}

.marginBottom30 {
    margin-bottom: 30px;
}

.marginBottom20 {
    margin-bottom: 20px;
}

.marginBottom15 {
    margin-bottom: 15px;
}

.marginBottom10 {
    margin-bottom: 10px;
}

.marginBottom5 {
    margin-bottom: 5px;
}

.marginBottomNone {
    margin-bottom: 0 !important;
}

.marginLeft50 {
    margin-left: 50px;
}

.marginLeft40 {
    margin-left: 40px;
}

.marginLeft30 {
    margin-left: 30px;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginLeftNone {
    margin-left: 0;
}

.marginTopBottom30 {
    margin: 30px auto;
}

.marginTopBottom20 {
    margin: 20px auto;
}

.marginTopBottom15 {
    margin: 15px auto;
}

.marginTopBottom10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.marginTopBottom5 {
    margin: 5px auto;
}

.marginTopBottomNone {
    margin: 0 auto;
}

.marginLeftRight45 {
    margin-left: 45px;
    margin-right: 45px;
}
.marginLeftRight50 {
    margin-left: 50px;
    margin-right: 50px;
}

.marginLeftRight20 {
    margin-left: 20px;
    margin-right: 20px;
}

.marginLeftRight15 {
    margin-left: 15px;
    margin-right: 15px;
}

.marginLeftRight10 {
    margin-left: 10px;
    margin-right: 10px;
}

.marginLeftRight5 {
    margin-left: 5px;
    margin-right: 5px;
}

/* css element width */

.width100Percent {
    width: 100% !important;
}

.width95Percent {
    width: 95% !important;
}

.width93Percent {
    width: 93% !important;
}

.width90Percent {
    width: 90% !important;
}

.width85Percent {
    width: 85% !important;
}

.width80Percent {
    width: 80% !important;
}

.width75Percent {
    width: 75% !important;
}

.width70Percent {
    width: 70% !important;
}

.width65Percent {
    width: 65% !important;
}

.width60Percent {
    width: 60% !important;
}

.width55Percent {
    width: 55% !important;
}

.width50Percent {
    width: 50% !important;
}

.width45Percent {
    width: 45% !important;
}

.width40Percent {
    width: 40% !important;
}

.width35Percent {
    width: 35% !important;
}

.width30Percent {
    width: 30% !important;
}

.width25Percent {
    width: 25% !important;
}

.width20Percent {
    width: 20% !important;
}

.width15Percent {
    width: 15% !important;
}

.width10Percent {
    width: 10% !important;
}

.widthReplayComment {
    width: 97.5% !important;
}

.width100 {
    width: 100px;
}

.width150 {
    width: 150px;
}

.width180 {
    width: 180px;
}

.width270 {
    width: 270px;
}

.width300 {
    width: 300px;
}

.width325 {
    width: 325px;
}

.maxWidth100 {
    max-width: 100px;
}

.maxWidth140 {
    max-width: 140px;
}

.maxWidth300 {
    max-width: 300px;
}

/* css element height */

.height100Percent {
    height: 100% !important;
}

.height95Percent {
    height: 95% !important;
}

.height90Percent {
    height: 90% !important;
}

.height85Percent {
    height: 85% !important;
}

.height80Percent {
    height: 80% !important;
}

.height75Percent {
    height: 75% !important;
}

.height70Percent {
    height: 70% !important;
}

.height65Percent {
    height: 65% !important;
}

.height60Percent {
    height: 60% !important;
}

.height50Percent {
    height: 50% !important;
}

.height40Percent {
    height: 40% !important;
}

.height30Percent {
    height: 30% !important;
}

.height25Percent {
    height: 25% !important;
}

.height20Percent {
    height: 20% !important;
}

.height10Percent {
    height: 10% !important;
}

.height60 {
    height: 60px;
}

.height100 {
    height: 100px;
}

.height110 {
    height: 110px;
}

.height150 {
    height: 150px;
}

.height180 {
    height: 180px;
}

.height200 {
    height: 200px;
}

.height250 {
    height: 250px;
}

.height270 {
    height: 270px;
}

.height300 {
    height: 300px;
}

.height500 {
    height: 500px;
}

.height1000 {
    height: 1000px;
}

.maxHeight100 {
    max-height: 100px;
}

.maxHeight110 {
    max-height: 110px;
}

.maxHeight140 {
    max-height: 140px;
}

.maxHeight200 {
    max-height: 200px;
}

.maxHeight300 {
    max-height: 300px;
}

/* css font size */

.txtSize60 {
    font-size: 60px;
}

.txtSize50 {
    font-size: 50px;
}

.txtSize40 {
    font-size: 40px;
}

.txtSize36 {
    font-size: 36px;
}

.txtSize32 {
    font-size: 32px;
}

.txtSize31 {
    font-size: 31px;
}

.txtSize30 {
    font-size: 30px;
}

.txtSize29 {
    font-size: 29px;
}

.txtSize28 {
    font-size: 28px;
}

.txtSize27 {
    font-size: 27px;
}

.txtSize26 {
    font-size: 26px;
}

.txtSize25 {
    font-size: 25px;
}

.txtSize24 {
    font-size: 24px;
}

.txtSize23 {
    font-size: 23px;
}

.txtSize22 {
    font-size: 22px;
}

.txtSize21 {
    font-size: 21px;
}

.txtSize20 {
    font-size: 20px;
}

.txtSize19 {
    font-size: 19px;
}

.txtSize18 {
    font-size: 18px;
}

.txtSize17 {
    font-size: 17px;
}

.txtSize16 {
    font-size: 16px;
}

.txtSize15 {
    font-size: 15px;
}

.txtSize14 {
    font-size: 14px;
}

.txtSize13 {
    font-size: 13px;
}

.txtSize12 {
    font-size: 12px;
}

.txtSize11 {
    font-size: 11px;
}

.txtSize10 {
    font-size: 10px;
}

.txtSize9 {
    font-size: 9px;
}

.txtSize8 {
    font-size: 8px;
}

/* css font style*/

.txtBold {
    font-weight: bold;
}

.txtNormal {
    font-weight: normal;
}

.txtUnderline {
    text-decoration: underline;
}

/* css position */

.fixedPos {
    position: fixed;
}

.absolutePos {
    position: absolute;
}

.relativePos {
    position: relative;
}

.clearfix {
    clear: both;
}

.floatNone {
    float: none;
}

/* css display element */

.showInline {
    display: inline;
}

.showBlock {
    display: block;
}

.showInlineBlock {
    display: inline-block;
}

.showTable {
    display: table;
}

.notShowOnDesktop {
    display: none;
}

.absoluteRight0 {
    right: 0;
}

.absoluteRight5 {
    right: 5px;
}

.absoluteTop5 {
    top: 5px;
}

.absoluteTop15 {
    top: 15px;
}

.absoluteLeft10 {
    left: 10px;
}

/* css pointer */

.cursorPointer {
    cursor: pointer;
}

.setFontNotoSans * {
    font-family: 'NotoSans';
}

.txtTitleInArticle {
    font-size: 30px;
    margin-top: 39px;
}

/* facebook */

.button-fb-login {
    color: #FFF;
    background-color: #3B5A94;
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
    height: 31px;
    width: 62%;
    font-weight: bold;
    padding-left: 13px;
    background-repeat: no-repeat;
    background-size: 9px;
    background-position: 5px center;
    float: right;
}

.button-fb-login:hover {
    color: #FFF;
    background-color: #555;
}


.lightgoldenrodyellow {
    background-color: rgb(250, 250, 210);
}

.userAuthorDetail {
    vertical-align: text-top;
    position: relative;
    min-height: 1px;
    width: 50%;
}

.footnotes {
    padding-top: 20px;
    border-top: solid 1px #eee;
}

.banner-div, .header-div {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* flex box */

.flex-container {
    display: flex;
}

.flex-default {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

.flex-item {
    display: inline-block;
    order: 0;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
}

/* image coin */

.imgCoin {
    width: 24px;
}

.text-center-vertical {
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--textLightColor) !important;
}
.hideForBlock {
    background-color: var(--cardBgColor);
    border-radius: 8px;
    border: solid 1px var(--lineColor);
}

@media screen and (max-width: 320px) {
    .articleElement {
        height: auto;
    }
    /* Add your styles for devices with a maximum width of 320 */
    /* Add your styles for devices with a maximum height of 320*/
    .pager li>a, .pager li>span {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .txtTitle {
        font-size: 14px;
    }
    .txtInfo {
        font-size: 10px;
    }
    .decoratedHeader {
        margin: 0 0 20px 0;
    }
    .widthContent {
        width: 90%;
    }
}

@media screen and (max-width: 480px) {
    .articleElement {
        height: auto;
    }
    .smNotiLineHeight {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    .smOverNoti {
        height: 41px !important;
        overflow: hidden;
    }
    /* Add your styles for devices with a maximum width of 480 */
    /* Add your styles for devices with a maximum height of 480*/
    .pager li>a, .pager li>span {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .smShowScrollX {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 767px) {
    .smdWidth100Percent {
        width: 100% !important;
    }
    .articleElement {
        height: auto;
        overflow: auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    .listArticleItem {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .icnChapterAmt{
        height: 14px;
    }
    .icnRatingAmt{
        height: 10px;
    }
    /* Add your styles for devices with a maximum width of 767*/
    /* Add your styles for devices with a maximum height of 767*/
    .nav>li>a {
        padding: 10px 5px;
    }
    .btn_standard_share_size {
        margin-right: 0px;
        width: 82px;
    }
    .btn_standard_share_size:last-child {
        width: 82px;
    }
    .imgCoin {
        width: 20px;
    }
    .btnSaveNewStyle {
        width: 150px;
        height: 36px;
        border-radius: 23px;
    }
}

@media screen and (max-width: 991px) {
    /* Add your styles for devices with a maximum width of 1024 */
    .md-pull-right {
        float: right !important;
    }
    .md-pull-left {
        float: left !important;
    }
    .md-pull-none {
        float: none !important;
    }
    .mdPaddingTop50 {
        padding-top: 50px;
    }
    .mdPaddingTopBottom50 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .md-text-center {
        text-align: center !important;
    }
    .mdPaddingLeft0 {
        padding-left: 0 !important;
    }
    .mdPaddingRight0 {
        padding-right: 0 !important;
    }
    .mdMarginTop10 {
        margin-top: 10px !important;
    }
    .borderTopSmShow {
        border-top: 1px solid lightgray;
    }
    .banner-div, .header-div {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media screen and (max-width: 1024px) {
    /* Add your styles for devices with a maximum width of 1024 */
}

@media screen and (min-width: 995px) {
    /* Add your styles for devices with a maximum width of 1024 */
    .btnDel {
        display: none;
    }
}

/* Mobile S */

@media only screen and (min-device-width: 320px) and (max-device-width: 374px) and (orientation: portrait) {
    .smFullScreen, .smFullScreen.content-container {
        margin-left: -15px;
        width: calc(100% + 30px);
        border-radius: 0;
    }
    #containerOfContentOfAction.bgReadSpace.smBgWhite, .container.content.bgReadSpace.smBgWhite, #content.bgReadSpace.smBgWhite {
        background-color: white !important;
    }
    .btn_standard_share_size {
        margin-right: 0px;
        width: 70px;
    }
    .btn_standard_share_size:last-child {
        width: 70px;
        margin-right: 0px;
    }
}

/* Mobile M */

@media only screen and (min-device-width: 375px) and (max-device-width: 424px) and (orientation: portrait) {
    .smFullScreen, .smFullScreen.content-container {
        margin-left: -15px;
        width: calc(100% + 30px);
        border-radius: 0;
    }
    #containerOfContentOfAction.bgReadSpace.smBgWhite, .container.content.bgReadSpace.smBgWhite, #content.bgReadSpace.smBgWhite {
        background-color: white !important;
    }
}

/* Mobile L */

@media only screen and (min-device-width: 425px) and (max-device-width: 767px) and (orientation: portrait) {
    .smFullScreen, .smFullScreen.content-container {
        margin-left: -15px;
        width: calc(100% + 30px);
        border-radius: 0;
    }
    #containerOfContentOfAction.bgReadSpace.smBgWhite, .container.content.bgReadSpace.smBgWhite, #content.bgReadSpace.smBgWhite {
        background-color: white !important;
    }
}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Add your styles for devices with a maximum width of 1024 */
}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Add your styles for devices with a maximum width of 768 */
}

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

.disable-selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea, input {
    -webkit-touch-callout: auto !important;
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}

/* Border color */

.borderMultiChapter {
    border: 3px solid #FF7F50;
}

.borderSingleChapter {
    border: 3px solid #87CEFA;
}

.borderNoChapter {
    border: 3px solid #90EE90;
}

.imageIcon {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.imageIconDiv {
    height: 100px;
    width: 100px;
    background: #DCDCDC;
}

.myImageIconDiv {
    height: 100px;
    width: 100px;
    background: #DCDCDC;
}

.articleContent, .loadedContent {
    word-wrap: break-word;
}

.articleContent p img, .loadedContent p img, .articleContent div img, .loadedContent div img {
    max-height: 100%;
    max-width: 90%;
    height: auto !important;
}

.commentContent>p>img:not(.sticker), .commentContent>img:not(.sticker) {
    max-height: 100%;
    max-width: 90%;
    height: auto !important;
}

.commentContent>span>img:not(.sticker) {
    max-height: 100%;
    max-width: 90%;
    height: auto !important;
}

.sticker {
    max-height: 100px;
}

.sticker-vip {
    width: 22px !important;
    height: 10px !important;
    margin: auto !important;
    background-image: var(--iconStickerVip) !important;
    position: absolute !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    bottom: 12px;
    left: 7px;
}

#divSearchSticker .sticker-vip {
    bottom: 10px;
    left: 15px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.dropdown-menu {
    padding: 0;
}

ol#paging, ol.paging {
    float: right;
    padding: 0px;
    list-style: none;
}

ol#paging li, ol.paging li {
    float: left !important;
    height: 23px;
    margin: 4px 0px 0px 0px;
    padding-top: 3px;
    cursor: pointer;
}

ol#paging li a, ol.paging li a {
    color: var(--textOnCardLightColor) !important;
    text-decoration: none !important;
    cursor: pointer;
}

ol#paging li.text, ol.paging li.text {
    width: 40px;
    cursor: text;
    font-size: 16px;
    font-family: HEL, Tahoma;
    color: var(--textOnCardLightColor) !important;
    margin-top: 5px;
}

ol#paging li.prev, ol.paging li.prev {
    height: 23px;
    background: none;
    cursor: pointer;
    border: 1px solid var(--textOnCardLightColor);
    border-radius: 20%;
    height: 25px;
    width: 25px;
    background-color: transparent;
    padding-left: 8px;
    padding-right: 4px;
    padding-top: 0px;
    margin-top: 3px;
}

ol#paging li.next, ol.paging li.next {
    background: none;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--textOnCardLightColor);
    border-radius: 20%;
    height: 25px;
    width: 25px;
    background-color: transparent;
    padding-left: 10px;
    padding-right: 4px;
    padding-top: 0px;
    margin-top: 3px;
}

ol#paging li.last, ol.paging li.last {
    margin: 0px 0px 0px 0px;
    background: none;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--textOnCardLightColor);
    border-radius: 10%;
    height: 25px;
    width: 25px;
    background-color: transparent;
    padding-left: 8px;
    padding-right: 4px;
    padding-top: 0px;
    margin-top: 3px;
}

ol#paging li.on, ol.paging li.on {
    text-decoration: none;
    border-radius: 10%;
    color: var(--textWhiteColor) !important;
    height: 25px;
    width: 25px;
    background-color: var(--bgActivePagePaginatorColor);
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

ol#paging li.on span, ol.paging li.on span {
    height: 23px;
    display: table;
    padding: 0px 0px;
    vertical-align: top;
    font-weight: bold;
    font-size: 13px;
    font-family: HEL, Tahoma;
    color: var(--textOnCardLightColor) !important;
}

ol#paging li.off, ol.paging li.off {
    text-decoration: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10%;
    color: var(--textWhiteColor) !important;
    height: 25px;
    width: 25px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

ol#paging li.off span, ol.paging li.off span {
    height: 23px;
    display: table;
    padding: 0px 0px;
    vertical-align: top;
    font-size: 13px;
    font-family: HEL, Tahoma;
    text-decoration: none;
}

.bgClip {
    background-clip: content-box;
}

/* Start Optimize header */

.navbar-inverse {
    background-color: #95DBD5;
    border: none;
}

.navbar-inverse .navbar-brand {
    color: white;
}

.navbar-inverse .navbar-nav>li>a, .header-menu a, .navbar-inverse #profileMenu *, .navbar-inverse #profileSmMenu *, .search-box-header .close_search {
    color: #ffffff;
}

.navbar-nav>li>a:hover {
    color: #303030 !important;
    text-decoration: underline;
}

.navbar-inverse .navbar-nav>li>a:hover, .header-menu a:hover, .navbar-inverse #profileMenu:hover *, .navbar-inverse #profileSmMenu:hover *, .search-box-header .close_search:hover {
    color: #303030 !important;
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
    color: #fff;
    background-color: #95DBD5;
}

.navbar-inverse-submenu {
    background-color: #D8D8D8;
}

.navbar-inverse-submenu .navbar-brand {
    color: #555;
}

.navbar-inverse-submenu .navbar-nav>li>a {
    color: #555;
}

.navbar-inverse-submenu .navbar-nav>.open>a, .navbar-inverse-submenu .navbar-nav>.open>a:focus, .navbar-inverse-submenu .navbar-nav>.open>a:hover {
    color: #555;
    background-color: #95DBD5;
}

/* Start Optimize header */

.form-group>label {
    display: inline-block;
    font-size: 18px;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500;
}

*, body {
    font-family: Thonburi,Tahoma,sans-serif;
}

.form-group>label>small {
    font-size: 85%;
    font-weight: normal;
}

.swal2-modal {
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    max-height: 100% !important;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1050;
}

.swal2-modal h1, .swal2-modal h2, .swal2-modal h3 {
    font-family: Thonburi, Tahoma, sans-serif !important;
}

.swal2-overlay {
    z-index: 1050 !important;
}

.swal2-cancel.styled {
    color: #606060 !important;
    background-color: #ffffff !important;
    border: 1px solid #c0c0c0 !important;
}

.swal2-cancel.styled:hover, .swal2-cancel.styled:focus {
    color: #606060 !important;
    background-color: #f4f4f4 !important;
    border: 1px solid #c0c0c0 !important;
}

a {
    color: black;
    text-decoration: none
}

.scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
}

/* START::zoom */

.zoom90 {
    zoom: 0.9;
    -moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;
}

.zoom95 {
    zoom: 0.95;
    -moz-transform: scale(0.95);
    -moz-transform-origin: 0 0;
}

.zoom100 {
    zoom: 1;
    -moz-transform: scale(1);
    -moz-transform-origin: 0 0;
}

.zoom105 {
    zoom: 1.05;
    -moz-transform: scale(1.05);
    -moz-transform-origin: 0 0;
}

.zoom110 {
    zoom: 1.1;
    -moz-transform: scale(1.1);
    -moz-transform-origin: 0 0;
}

.zoom115 {
    zoom: 1.15;
    -moz-transform: scale(1.15);
    -moz-transform-origin: 0 0;
}

.zoom120 {
    zoom: 1.2;
    -moz-transform: scale(1.2);
    -moz-transform-origin: 0 0;
}

.zoom125 {
    zoom: 1.25;
    -moz-transform: scale(1.25);
    -moz-transform-origin: 0 0;
}

.zoom130 {
    zoom: 1.3;
    -moz-transform: scale(1.3);
    -moz-transform-origin: 0 0;
}

.zoom135 {
    zoom: 1.35;
    -moz-transform: scale(1.35);
    -moz-transform-origin: 0 0;
}

.zoom140 {
    zoom: 1.4;
    -moz-transform: scale(1.4);
    -moz-transform-origin: 0 0;
}

.zoom145 {
    zoom: 1.45;
    -moz-transform: scale(1.45);
    -moz-transform-origin: 0 0;
}

.zoom150 {
    zoom: 1.5;
    -moz-transform: scale(1.5);
    -moz-transform-origin: 0 0;
}

.zoom155 {
    zoom: 1.55;
    -moz-transform: scale(1.55);
    -moz-transform-origin: 0 0;
}

.zoom160 {
    zoom: 1.6;
    -moz-transform: scale(1.6);
    -moz-transform-origin: 0 0;
}

.zoom165 {
    zoom: 1.65;
    -moz-transform: scale(1.65);
    -moz-transform-origin: 0 0;
}

.zoom170 {
    zoom: 1.7;
    -moz-transform: scale(1.7);
    -moz-transform-origin: 0 0;
}

.zoom180 {
    zoom: 1.8;
    -moz-transform: scale(1.8);
    -moz-transform-origin: 0 0;
}

.zoom190 {
    zoom: 1.9;
    -moz-transform: scale(1.9);
    -moz-transform-origin: 0 0;
}

.zoom200 {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

/* END::zoom */

/* START::manage_article */

.dropdown-menu>li {
    position: relative;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display: none;
    margin-top: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: #fff;
    box-shadow: none;
}

.dropdown-menu *, .bgMainTheme .dropdown-menu * {
    color: #303030;
}

.right-caret:after, .left-caret:after {
    content: "";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left: 5px;
}

.right-caret:after {
    border-left: 5px solid #ffaf46;
}

.left-caret:after {
    border-right: 5px solid #ffaf46;
}

/* END::manage_article */

/* START::bootstrap-rating */

.symbol {
    display: inline-block;
    border-radius: 50%;
    border: 5px double white;
    width: 30px;
    height: 30px;
}

.symbol-empty {
    background-color: #ccc;
}

.symbol-filled {
    background-color: gold;
}

.rating-symbol-foreground .glyphicon.glyphicon-star {
    color: gold;
}

.glyphicon-heart-empty {
    color: #ed306b;
}

.rating-symbol-background.glyphicon-heart {
    color: #d5d5d5;
}

/* END::bootstrap-rating */

/*------- new style button ---------*/

input:focus, button:focus, button:active, button:active:focus, .btn:focus, .btn:active, .btn:active:focus {
    outline: unset;
}

.btnborderGreen
{
    border-color: var(--linkColor) !important;
}
.btnRound20Pt {
    border-radius: 20pt !important;
}
.btnround10px {
    border-radius: 10px !important;
}

.btnNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 20px;
}

.btnNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
}

.btnNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
}

.btnNewStyleWithIconLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
}

.btnNewStyleWithIconDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
}

.btnNewStyleWithIconSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
}

.btnTxtWhiteBgRedNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    background-color: #E01D1D !important;
    border: solid 1px #E01D1D !important;
    color: #ffffff !important;
}

.btnTxtRedBgWhiteBorderRedNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #E01D1D !important;
    background-color: #ffffff !important;
    color: #E01D1D !important;
}

.btnTxtWhiteBgRedNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    background-color: #E01D1D !important;
    border: solid 1px #E01D1D !important;
    color: #ffffff !important;
}

.btnTxtRedBgWhiteBorderRedNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #E01D1D !important;
    border: solid 1px #E01D1D !important;
    background-color: #ffffff !important;
    color: #E01D1D !important;
}

.btnTxtWhiteBgRedNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    background-color: #E01D1D !important;
    border: solid 1px #E01D1D !important;
    color: #ffffff !important;
}

.btnTxtRedBgWhiteBorderRedNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #E01D1D !important;
    border: solid 1px #E01D1D !important;
    background-color: #ffffff !important;
    color: #E01D1D !important;
}

.btnTxtWhiteBgGreenBlueNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #1FB49F !important;
    background-color: #1FB49F !important;
    color: #ffffff !important;
}

.btnTxtGreenBlueBgWhiteBorderGreenBlueNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #1FB49F !important;
    background-color: #ffffff !important;
    color: #1FB49F !important;
}

.btnTxtWhiteBgGreenBlueNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #1FB49F !important;
    background-color: #1FB49F !important;
    color: #ffffff !important;
}

.btnTxtWhiteBgGreenBlueNewStyleEndofArticle {
    border-radius: 20px !important;
    padding: 0px 8px;
    border: solid 1px var(--linkColor) !important;
    background-color: var(--linkColor) !important;
    color: #ffffff !important;
}
.btnTxtGreenBlueBgWhiteBorderGreenBlueNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #1FB49F !important;
    background-color: #ffffff !important;
    color: #1FB49F !important;
}

.btnTxtWhiteBgGreenBlueNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #1FB49F !important;
    background-color: #1FB49F !important;
    color: #ffffff !important;
}

.btnTxtGreenBlueBgWhiteBorderGreenBlueNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #1FB49F !important;
    background-color: #ffffff !important;
    color: #1FB49F !important;
}

.btnTxtWhiteBgPinkNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #ED306B !important;
    background-color: #ED306B !important;
    color: #ffffff !important;
}

.btnTxtPinkBgWhiteBorderPinkNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #ED306B !important;
    background-color: #ffffff !important;
    color: #ED306B !important;
}

.btnTxtWhiteBgPinkNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #ED306B !important;
    background-color: #ED306B !important;
    color: #ffffff !important;
}

.btnTxtPinkBgWhiteBorderPinkNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #ED306B !important;
    background-color: #ffffff !important;
    color: #ED306B !important;
}

.btnTxtWhiteBgPinkNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #ED306B !important;
    background-color: #ED306B !important;
    color: #ffffff !important;
}

.btnTxtPinkBgWhiteBorderPinkNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #ED306B !important;
    background-color: #ffffff !important;
    color: #ED306B !important;
}

.btnTxtWhiteBgGreyNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #909090 !important;
    background-color: #909090 !important;
    color: #ffffff !important;
}

.btnTxtGreyBgWhiteBorderGreyNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #909090 !important;
    background-color: #ffffff !important;
    color: #909090 !important;
}

.btnTxtWhiteBgGreyNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #909090 !important;
    background-color: #909090 !important;
    color: #ffffff !important;
}

.btnTxtGreyBgWhiteBorderGreyNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #909090 !important;
    background-color: #ffffff !important;
    color: #909090 !important;
}

.btnTxtWhiteBgGreyNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #909090 !important;
    background-color: #909090 !important;
    color: #ffffff !important;
}

.btnTxtGreyBgWhiteBorderGreyNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #909090 !important;
    background-color: #ffffff !important;
    color: #909090 !important;
}

.btnTxtGoldBgWhiteBorderWhiteNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #ffffff !important;
    background-color: #ffffff !important;
    color: #FF8205 !important;
    height: auto;
}

.btnTxtGoldBgWhiteBorderWhiteNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #ffffff !important;
    background-color: #ffffff !important;
    color: #FF8205 !important;
    height: auto;
}

.btnTxtGoldBgWhiteBorderWhiteNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #ffffff !important;
    background-color: #ffffff !important;
    color: #FF8205 !important;
    height: auto;
}

.btnTxtWhiteBgGoldNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #FF8205 !important;
    background-color: #FF8205 !important;
    color: #ffffff !important;
    height: auto;
}

.btnTxtWhiteBgGoldNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #FF8205 !important;
    background-color: #FF8205 !important;
    color: #ffffff !important;
    height: auto;
}

.btnTxtWhiteBgGoldNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #FF8205 !important;
    background-color: #FF8205 !important;
    color: #ffffff !important;
    height: auto;
}

.btnTxtYellowGoldBgWhiteBorderWhiteNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #ffffff !important;
    background-color: #ffffff !important;
    color: #fcb614 !important;
    height: auto;
}

.btnTxtYellowGoldBgWhiteBorderWhiteNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #ffffff !important;
    background-color: #ffffff !important;
    color: #fcb614 !important;
    height: auto;
}

.btnTxtYellowGoldBgWhiteBorderWhiteNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #ffffff !important;
    background-color: #ffffff !important;
    color: #fcb614 !important;
    height: auto;
}

.btnTxtWhiteBgYellowGoldNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #fcb614 !important;
    background-color: #fcb614 !important;
    color: #ffffff !important;
    height: auto;
}

.btnTxtWhiteBgYellowGoldNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #fcb614 !important;
    background-color: #fcb614 !important;
    color: #ffffff !important;
    height: auto;
}

.btnTxtWhiteBgYellowGoldNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #fcb614 !important;
    background-color: #fcb614 !important;
    color: #ffffff !important;
    height: auto;
}

.btnTxtYellowGoldBgLightYellowNewStyleLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: solid 1px #FFF5DC !important;
    background-color: #FFF5DC !important;
    color: #fcb614 !important;
    height: auto;
}

.btnTxtYellowGoldBgLightYellowNewStyleDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: solid 1px #FFF5DC !important;
    background-color: #FFF5DC !important;
    color: #fcb614 !important;
    height: auto;
}

.btnTxtYellowGoldBgLightYellowNewStyleSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: solid 1px #FFF5DC !important;
    background-color: #FFF5DC !important;
    color: #fcb614 !important;
    height: auto;
}

.btnTxtGreenBlueNoBgEffectHoverLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: none !important;
    background-color: transparent !important;
    color: #1FB49F !important;
}

.btnTxtGreenBlueNoBgEffectHoverDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: none !important;
    background-color: transparent !important;
    color: #1FB49F !important;
}

.btnTxtGreenBlueNoBgEffectHoverSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: none !important;
    background-color: transparent !important;
    color: #1FB49F !important;
}

.btnTxtGreenBlueNoBgEffectHoverLarge:hover {
    background-color: #1fb49f1a !important;
}

.btnTxtGreenBlueNoBgEffectHoverDefault:hover {
    background-color: #1fb49f1a !important;
}

.btnTxtGreenBlueNoBgEffectHoverSmall:hover {
    background-color: #1fb49f1a !important;
}

.btnPinkNoBgEffectHoverLarge {
    border-radius: 20pt !important;
    padding: 12px 18px;
    border: none !important;
    background-color: transparent !important;
    color: #ED306B !important;
}

.btnPinkNoBgEffectHoverDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: none !important;
    background-color: transparent !important;
    color: #ED306B !important;
}

.btnPinkNoBgEffectHoverSmall {
    border-radius: 20pt !important;
    padding: 5px 16px;
    border: none !important;
    background-color: transparent !important;
    color: #ED306B !important;
}

.btnGrayNoBgEffectHoverDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: none !important;
    background-color: transparent !important;
    color: var(--textLightColor) !important;
}

.btnRedNoBgEffectHoverDefault {
    border-radius: 20pt !important;
    padding: 9px 16px;
    border: none !important;
    background-color: transparent !important;
    color: var(--redColor) !important;
}

.btnPinkNoBgEffectHoverLarge:hover {
    background-color: #ed306b1a !important;
}

.btnPinkNoBgEffectHoverDefault:hover {
    background-color: #ed306b1a !important;
}

.btnPinkNoBgEffectHoverSmall:hover {
    background-color: #ed306b1a !important;
}

.btnWhiteNoBgEffectHover {
    border-radius: 20pt !important;
    border: none !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

.btnWhiteNoBgEffectHover:hover {
    background-color: #ffffff1a !important;
}

.btnGrayNoBgEffectHoverDefault:hover {
    background-color: var(--lineColor) !important;
}

.btnRedNoBgEffectHoverDefault:hover {
    /* color: var(--redColor) !important; */
    background-color: #ed306b1a !important;
}

.btnSelectWriting {
    border-radius: 5px !important;
    width: 190px;
    height: 50px;
    border: solid 1px #e6e6e6;
}

.donate_btn {
    font-size: 16px;
}

/*---- new style disable button ----*/

.btnTxtWhiteBgRedNewStyleLarge.disabled, .btnTxtRedBgWhiteBorderRedNewStyleLarge.disabled, .btnTxtWhiteBgRedNewStyleDefault.disabled, .btnTxtRedBgWhiteBorderRedNewStyleDefault.disabled, .btnTxtWhiteBgRedNewStyleSmall.disabled, .btnTxtRedBgWhiteBorderRedNewStyleSmall.disabled, .btnTxtWhiteBgGreenBlueNewStyleLarge.disabled, .btnTxtGreenBlueBgWhiteBorderGreenBlueNewStyleLarge.disabled, .btnTxtWhiteBgGreenBlueNewStyleDefault.disabled, .btnTxtGreenBlueBgWhiteBorderGreenBlueNewStyleDefault.disabled, .btnTxtWhiteBgGreenBlueNewStyleSmall.disabled, .btnTxtGreenBlueBgWhiteBorderGreenBlueNewStyleSmall.disabled, .btnTxtWhiteBgPinkNewStyleLarge.disabled, .btnTxtPinkBgWhiteBorderPinkNewStyleLarge.disabled, .btnTxtWhiteBgPinkNewStyleDefault.disabled, .btnTxtPinkBgWhiteBorderPinkNewStyleDefault.disabled, .btnTxtWhiteBgPinkNewStyleSmall.disabled, .btnTxtPinkBgWhiteBorderPinkNewStyleSmall.disabled, .btnTxtWhiteBgGreyNewStyleLarge.disabled, .btnTxtGreyBgWhiteBorderGreyNewStyleLarge.disabled, .btnTxtWhiteBgGreyNewStyleDefault.disabled, .btnTxtGreyBgWhiteBorderGreyNewStyleDefault.disabled, .btnTxtWhiteBgGreyNewStyleSmall.disabled, .btnTxtGreyBgWhiteBorderGreyNewStyleSmall.disabled {
    opacity: 0.3;
}

.btnTxtWhiteBgRedNewStyleLarge:hover, .btnTxtWhiteBgRedNewStyleDefault:hover, .btnTxtWhiteBgRedNewStyleSmall:hover {
    background-color: #c70000 !important;
}

.btnTxtWhiteBgGreenBlueNewStyleLarge:hover, .btnTxtWhiteBgGreenBlueNewStyleDefault:hover, .btnTxtWhiteBgGreenBlueNewStyleSmall:hover {
    background-color: #02A08E !important;
}

.btnTxtWhiteBgPinkNewStyleLarge:hover, .btnTxtWhiteBgPinkNewStyleDefault:hover, .btnTxtWhiteBgPinkNewStyleSmall:hover {
    background-color: #CB2257 !important;
}

.btnTxtWhiteBgGreyNewStyleLarge:hover, .btnTxtWhiteBgGreyNewStyleDefault:hover, .btnTxtWhiteBgGreyNewStyleSmall:hover {
    background-color: #5d5d5d !important;
}

/*---- end new style disable button ----*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.form-contact-us-border {
    border: solid 2px #ccc;
    background-color: #FFFFFF;
    margin-bottom: 25px;
    padding: 8px 5px;
    width: initial;
    max-width: 760px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin: auto;
}

.form-contact-us-field {
    font-size: 14px;
}

.form-contact-us-require {
    color: #F00;
}

.form-contact-us-red-font {
    color: #F00;
}

div.form-contact-us-field>label>span.require {
    color: red;
}

.form-contact-us-button {
    width: 100%;
    color: #FFF;
    background-color: #A6E6E0;
    max-width: 339.5px;
    border: 0px;
    cursor: pointer;
    border-radius: 5px;
    height: 31px;
    font-weight: bold;
}

.form-contact-us-button:hover {
    color: #FFF;
    background-color: #27AAE2;
}

.commentContent {
    font-size: 16px;
    word-wrap: break-word;
    color: #303030;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -ms-animation: spin .7s infinite linear;
    -webkit-animation: spinw .7s infinite linear;
    -moz-animation: spinm .7s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spinw {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spinm {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

table.dataTable tbody td {
    vertical-align: middle;
}

span.chapter_title_word {
    word-break: break-all;
}

.has-success>.resultIconElement {
    color: #3c763d;
}

.has-error>.resultIconElement {
    color: #a94442;
}

.circle {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: inline-block;
}

/* Tag Styling */

.tags {
    flex-wrap: wrap;
    display: inline-flex;
    list-style: none;
}

.tags li {
    display: inline;
    width: auto;
    margin: 12px 4px;
}

.tags li:hover {
    display: inline;
    width: auto;
    margin: 12px 4px;
}

.tags a {
    display: inline;
    width: auto;
    height: 36px;
    padding: 7px 14px;
    border-radius: 18px;
    background: #FFFFFF;
    color: #52C1B2;
    text-decoration: none;
}

.tags a:hover {
    color: #FFFFFF !important;
    background: #80DACD;
}

.tags a.tagSelected {
    color: #FFFFFF !important;
    background: #52C1B2;
}

/* FanTag Styling */

.fantags {
    flex-wrap: wrap;
    display: inline-flex;
    list-style: none;
}

.fantags li {
    display: inline;
    width: auto;
    margin: 12px 4px;
}

.fantags li:hover {
    display: inline;
    width: auto;
    margin: 12px 4px;
}

.fantags a {
    display: inline;
    width: auto;
    height: 36px;
    padding: 7px 14px;
    border-radius: 18px;
    background: #FFFFFF;
    color: #ed306b;
    text-decoration: none;
}

.fantags a:hover {
    color: var(--textWhiteColor) !important;
    background: var(--heartColor);
}

.fantags a.fantagSelected {
    color: var(--textWhiteColor) !important;
    background: var(--heartColor);
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: default;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

/* for calling multiple sweetalert bugs */

@media screen and (max-width: 550px) {
    .swal2-modal {
        width: auto !important;
        left: 5% !important;
        right: 5% !important;
        margin-left: 0 !important;
    }
}

.wordWrapDot {
    overflow: hidden;
    text-overflow: ellipsis;
}

.header_label {
    font-size: 18px;
    font-weight: 400;
}

.header_label>a {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-right: 20px;
}

.header_label>a:hover {
    text-decoration: none !important;
    background-color: transparent !important;
}

.sub_header_label a {
    padding-left: 0 !important;
    padding-right: 0px !important;
    margin-right: 24px;
}

.swiper-container {
    width: 100%;
    height: auto;
}

.swiper-slide-banner {
    text-align: center;
    font-size: 18px;
    width: 100%;
    max-width: 655px;
    /* 728px */
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.custom-control-square input[type=checkbox] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.custom-control-square label {
    position: relative;
    cursor: pointer;
}

.custom-control-square label:before {
    content:'';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid var(--textOnCardDarkColor);
    padding: 7px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 12px;
    border-radius: 3px;
}

.custom-control-square input:checked + label:before {
    content:'';
    -webkit-appearance: none;
    background-color: var(--linkColor);
    border: 1px solid var(--linkColor);
    padding: 7px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 12px;
    border-radius: 3px;
}

.custom-control-square input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid var(--textWhiteColor);
    border-width: 0px 2px 2px 0;
    transform: rotate(45deg);
}

.custom-control input[type=checkbox] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.custom-control label {
    position: relative;
    cursor: pointer;
}

.custom-control label:before {
    content:'';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid var(--textLightColor);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 15px;
    border-radius: 50%;
}

.custom-control input:checked + label:before {
    content:'';
    -webkit-appearance: none;
    background-color: var(--linkColor);
    border: 1px solid var(--linkColor);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 15px;
    border-radius: 50%;
}

.custom-control input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 7px;
    width: 7px;
    height: 12px;
    border: solid var(--textWhiteColor);
    border-width: 0px 2px 2px 0;
    transform: rotate(45deg);
}

.pallete_category{
    display: block;
    float: left;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 11px;
    margin-top: 20px;
    position: relative;
}
.pallete_category:nth-child(6n+1){
    clear: both;
}
.pallete_category:nth-child(6n+6){
    margin-right: 0;
}
.pallete_category.active:after{
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 15px;
    width: 12px;
    height: 26px;
    border: solid var(--textWhiteColor);
    border-width: 0px 3px 3px 0;
    transform: rotate(40deg);
}

a.lnkViewMoreCat:hover span.iconSeeMore{
    background-color: var(--linkColor) !important;
}

@media (max-width: 480px) {
    .col-480-1, .col-480-2, .col-480-3, .col-480-4, .col-480-5, .col-480-6, .col-480-7, .col-480-8, .col-480-9, .col-480-10, .col-480-11, .col-480-12 {
        float: left;
    }
    .col-480-12 {
        width: 100%;
    }
    .col-480-11 {
        width: 91.66666667%;
    }
    .col-480-10 {
        width: 83.33333333%;
    }
    .col-480-9 {
        width: 75%;
    }
    .col-480-8 {
        width: 66.66666667%;
    }
    .col-480-7 {
        width: 58.33333333%;
    }
    .col-480-6 {
        width: 50%;
    }
    .col-480-5 {
        width: 41.66666667%;
    }
    .col-480-4 {
        width: 33.33333333%;
    }
    .col-480-3 {
        width: 25%;
    }
    .col-480-2 {
        width: 16.66666667%;
    }
    .col-480-1 {
        width: 8.33333333%;
    }
    .col-480-pull-12 {
        right: 100%;
    }
    .col-480-pull-11 {
        right: 91.66666667%;
    }
    .col-480-pull-10 {
        right: 83.33333333%;
    }
    .col-480-pull-9 {
        right: 75%;
    }
    .col-480-pull-8 {
        right: 66.66666667%;
    }
    .col-480-pull-7 {
        right: 58.33333333%;
    }
    .col-480-pull-6 {
        right: 50%;
    }
    .col-480-pull-5 {
        right: 41.66666667%;
    }
    .col-480-pull-4 {
        right: 33.33333333%;
    }
    .col-480-pull-3 {
        right: 25%;
    }
    .col-480-pull-2 {
        right: 16.66666667%;
    }
    .col-480-pull-1 {
        right: 8.33333333%;
    }
    .col-480-pull-0 {
        right: auto;
    }
    .col-480-push-12 {
        left: 100%;
    }
    .col-480-push-11 {
        left: 91.66666667%;
    }
    .col-480-push-10 {
        left: 83.33333333%;
    }
    .col-480-push-9 {
        left: 75%;
    }
    .col-480-push-8 {
        left: 66.66666667%;
    }
    .col-480-push-7 {
        left: 58.33333333%;
    }
    .col-480-push-6 {
        left: 50%;
    }
    .col-480-push-5 {
        left: 41.66666667%;
    }
    .col-480-push-4 {
        left: 33.33333333%;
    }
    .col-480-push-3 {
        left: 25%;
    }
    .col-480-push-2 {
        left: 16.66666667%;
    }
    .col-480-push-1 {
        left: 8.33333333%;
    }
    .col-480-push-0 {
        left: auto;
    }
    .col-480-offset-12 {
        margin-left: 100%;
    }
    .col-480-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-480-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-480-offset-9 {
        margin-left: 75%;
    }
    .col-480-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-480-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-480-offset-6 {
        margin-left: 50%;
    }
    .col-480-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-480-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-480-offset-3 {
        margin-left: 25%;
    }
    .col-480-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-480-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-480-offset-0 {
        margin-left: 0;
    }
}

@media (max-width: 320px) {
    .col-320-1, .col-320-2, .col-320-3, .col-320-4, .col-320-5, .col-320-6, .col-320-7, .col-320-8, .col-320-9, .col-320-10, .col-320-11, .col-320-12 {
        float: left;
    }
    .col-320-12 {
        width: 100%;
    }
    .col-320-11 {
        width: 91.66666667%;
    }
    .col-320-10 {
        width: 83.33333333%;
    }
    .col-320-9 {
        width: 75%;
    }
    .col-320-8 {
        width: 66.66666667%;
    }
    .col-320-7 {
        width: 58.33333333%;
    }
    .col-320-6 {
        width: 50%;
    }
    .col-320-5 {
        width: 41.66666667%;
    }
    .col-320-4 {
        width: 33.33333333%;
    }
    .col-320-3 {
        width: 25%;
    }
    .col-320-2 {
        width: 16.66666667%;
    }
    .col-320-1 {
        width: 8.33333333%;
    }
    .col-320-pull-12 {
        right: 100%;
    }
    .col-320-pull-11 {
        right: 91.66666667%;
    }
    .col-320-pull-10 {
        right: 83.33333333%;
    }
    .col-320-pull-9 {
        right: 75%;
    }
    .col-320-pull-8 {
        right: 66.66666667%;
    }
    .col-320-pull-7 {
        right: 58.33333333%;
    }
    .col-320-pull-6 {
        right: 50%;
    }
    .col-320-pull-5 {
        right: 41.66666667%;
    }
    .col-320-pull-4 {
        right: 33.33333333%;
    }
    .col-320-pull-3 {
        right: 25%;
    }
    .col-320-pull-2 {
        right: 16.66666667%;
    }
    .col-320-pull-1 {
        right: 8.33333333%;
    }
    .col-320-pull-0 {
        right: auto;
    }
    .col-320-push-12 {
        left: 100%;
    }
    .col-320-push-11 {
        left: 91.66666667%;
    }
    .col-320-push-10 {
        left: 83.33333333%;
    }
    .col-320-push-9 {
        left: 75%;
    }
    .col-320-push-8 {
        left: 66.66666667%;
    }
    .col-320-push-7 {
        left: 58.33333333%;
    }
    .col-320-push-6 {
        left: 50%;
    }
    .col-320-push-5 {
        left: 41.66666667%;
    }
    .col-320-push-4 {
        left: 33.33333333%;
    }
    .col-320-push-3 {
        left: 25%;
    }
    .col-320-push-2 {
        left: 16.66666667%;
    }
    .col-320-push-1 {
        left: 8.33333333%;
    }
    .col-320-push-0 {
        left: auto;
    }
    .col-320-offset-12 {
        margin-left: 100%;
    }
    .col-320-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-320-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-320-offset-9 {
        margin-left: 75%;
    }
    .col-320-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-320-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-320-offset-6 {
        margin-left: 50%;
    }
    .col-320-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-320-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-320-offset-3 {
        margin-left: 25%;
    }
    .col-320-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-320-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-320-offset-0 {
        margin-left: 0;
    }
}

.bw-text-shadow {
    text-shadow: -1px -1px 12px #fff, 1px -1px 12px #fff, -1px 1px 12px #fff, 1px 1px 12px #fff;
}

.bgMainTheme {
    font-family: 'NotoSans';
    font-weight: bold;
    background-color: #95dbd5;
}

.bgMainTheme * {
    font-family: 'NotoSans';
    font-weight: bold;
}

.h-divider {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 2px;
    width: 100%;
    border-top: 1px solid #CCC;
}

.visible-sxs-inline-block, .visible-sxs-block, .visible-sxs-inline {
    display: none !important;
}

@media (min-width: 641px) {
    .popularity {
        width: 59%;
        display: inline-block;
        vertical-align: top;
        height: 210px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .meb-book {
        width: 41%;
        display: inline-block;
        vertical-align: top;
        height: 210px;
        border-left: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        float: right;
    }
}

.meb-color-bg {
    background: #00BF6C;
    color: #FFFFFF;
}

.popularity-count {
    text-align: left;
}

.popularity-rating {
    text-align: center;
}

.popularity-trophy {
    text-align: right;
}

.popularity-separator {
    display: none;
}

@media (max-width: 640px) {
    .popularity-count {
        padding-left: 0;
        padding-right: 0;
    }
    .popularity-rating {
        padding-left: 0;
        padding-right: 0;
    }
    .popularity-trophy {
        padding-left: 0;
        padding-right: 0;
    }
    .meb-book {
        margin-top: 20px;
        width: 100%;
    }
    .hidden-sxs {
        display: none !important;
    }
    .sxsWidth100Percent {
        width: 100% !important;
    }
    .visible-sxs-inline-block {
        display: inline-block !important;
    }
    .visible-sxs-block {
        display: block !important;
    }
    .visible-sxs-inline {
        display: inline !important;
    }
    .sxs-pull-none {
        float: none !important;
    }
}

@media (max-width: 480px) {
    .popularity-count {
        text-align: center;
    }
    .popularity-rating {
        text-align: center;
    }
    .popularity-trophy {
        text-align: center;
    }
    .popularity-separator {
        display: block;
    }
    .meb-book {
        margin-top: 20px;
        width: 100%;
    }
    .sxsBtnPopup {
        display: block !important;
        margin: 5px auto !important;
        width: 70%;
    }
}

/********* new index design **********/

/* headlines with lines */

/* source : http://stackoverflow.com/questions/15557627/heading-with-horizontal-line-on-either-side/23155413#23155413 */

.decoratedHeader {
    font-family: 'NotoSans';
    overflow: hidden;
    text-align: center;
    margin: 0 0 40px 0;
}

.decoratedHeader>span {
    font-family: 'NotoSans';
    position: relative;
    display: inline-block;
}

.decoratedHeader.lightHeader>span:before, .decoratedHeader.lightHeader>span:after {
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 10px solid #EEEEEE;
    width: 592px;
    /* half of limiter */
    margin: 0 50px;
}

.decoratedHeader.darkHeader>span:before, .decoratedHeader.darkHeader>span:after {
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 10px solid #CBCBC8;
    width: 592px;
    /* half of limiter */
    margin: 0 50px;
}

.decoratedHeader>span:before {
    right: 100%;
}

.decoratedHeader>span:after {
    left: 100%;
}

.decoratedHeader>span, .decoratedHeader>span>a, .decoratedHeaderLink:hover {
    font-size: 30px;
    color: #736f80;
    font-weight: 500;
}

.decoratedHeader>span>a:hover {
    border-bottom: 2px solid #B9B7BF;
    color: #736f80;
    text-decoration: none;
}

.decoratedSubHeader {
    overflow: hidden;
    text-align: left;
    margin-bottom: 20px;
}

.decoratedSubHeader>span {
    position: relative;
    display: inline-block;
}

.decoratedSubHeader>span:before, .decoratedSubHeader>span:after {
    content: '';
    position: absolute;
    bottom: 5px;
    border-bottom: 1px solid #CBCBC8;
    width: 1100px;
    /* half of limiter */
    margin: 0 10px;
}

.decoratedSubHeader>span:before {
    right: 100%;
}

.bottomShadow {
    -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
}

.bottomBorder {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #9CBDC9;
}

.menuSelected, menuSelected a {
    color: #303030 !important;
}

.submenuSelected, .submenuSelected a {
    color: #d73c72 !important;
}

.HiddenText {
    display: none;
}

.DivForHoverItem:hover .HiddenText {
    display: block;
}

.HiddenText span {
    color: silver;
    cursor: pointer;
}

.HiddenText span:hover {
    color: black;
}

.tagListInHoriArtileList_1Line{
    padding: 4px 14px 6px 15px;
    border-radius: 14px;
    border: 1px solid var(--lineColor);
    margin-right:3px;
    color:var(--textOnCardLightColor);
    line-height:1.36;
    margin-bottom:5px;
    /* -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display:-webkit-box; */
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: max-content;
    max-width: 150px;
}
.myListArticleInfo .zoneTag{
    overflow: hidden;
}

@media (min-width: 320px) {
    .listArticleInfo {
        float: left;
        position: relative;
        margin-left: -5px;
    }
    .indexArticleInfo, .myListArticleInfo, .continueArticleInfo {
        float: left;
        position: relative;
        margin-left: -10px;
        padding: 10px;
        width: calc(100% - 100px);
    }
    .smallArticleInfo {
        width: calc(100% - 100px);
    }
    .verySmallArticleInfo {
        width: 170px;
    }
    .listArticleImage, .listArticleImageMd {
        max-width: 110px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .shelf_thumbnail {
        max-width: 75px !important;
    }
    .shelf_article_info {
        max-width: calc(100% - 75px) !important;
    }
    .newDarkSection {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .darkSection, .topicSection {
        padding: 20px 10px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .lightSection {
        padding: 5px 10px 20px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .txtTitle {
        font-size: 14px;
    }
    .txtInfo {
        font-size: 10px;
    }
    .bottomLine {
        padding: 0 3px;
        margin-right: -3px;
    }
    .boxSearchLeft {
        width: 100%;
    }
    .boxSearchRight {
        width: 100%;
    }
    .decoratedHeader {
        margin: 0 0 20px 0;
    }
    .widthContent {
        width: 90%;
        min-width: 270px;
        max-width: 500px;
    }
}

@media (min-width: 375px) {
    .verySmallArticleInfo {
        width: 225px;
    }
    .bottomLine {
        padding: 0 10px;
        margin-right: 5px;
    }
}

@media (min-width: 425px) {
    .listArticleInfo {
        float: left;
        position: relative;
        width: calc(100% - 130px) !important;
    }
    .verySmallArticleInfo {
        width: 280px;
    }
    .articleElement {
        display: inline-block;
    }
    .indexArticleInfo, .myListArticleInfo, .continueArticleInfo {
        min-width: 240px;
        max-width: inherit;
        float: left;
        position: relative;
        margin-left: 0px;
        width: calc(100% - 110px);
    }
    .shelf_thumbnail {
        max-width: 130px !important;
    }
    .shelf_article_info {
        max-width: calc(100% - 130px) !important;
    }
}

@media (max-width: 767px) {
    .catSelectText {
        font-size: 13px;
        vertical-align: middle;
        padding-bottom: 4px;
    }
    .smLineMarginTop0 {
        margin: inherit;
        margin-top: 0px;
    }
    .txtTitle2Line {
        height: initial !important;
        max-height: 2.8em
    }
    .hideOverTitle {
        overflow: hidden;
        height: 4.8em;
        margin-bottom: 3px;
    }
    .marginTop100SmNone {
        margin-top: 0px;
    }
    .comment-list {
        margin-left: 0px;
        margin-right: 0px;
    }
    .main-activity-box {
        padding-bottom: 20px;
    }
    .main_col_top_chart {
        font-size: 14px;
    }
    .sub_col_top_chart {
        font-size: 12px;
    }
    .date_topchart {
        font-size: 14px;
    }
    .headerTopChart span {
        font-size: 26px;
    }
    .headerTopChart img {
        width: 200px;
    }
    .xsHeight1Line {
        height: 1.4em !important;
        /*overflow: hidden;*/
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .xsHeight2Line {
        height: 3em !important;
        /*overflow: hidden;*/
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .content-container.boxPreOrder, .content-container.boxPreOrderShadow {
        max-width: unset;
        width: unset;
        margin-right: 0;
        margin-left: 0;
    }
    .continueArticleName {
        font-size: 14px;
    }
    .continueArticleChapterName {
        display: inline;
        font-size: 13px;
    }
    .topic {
        max-width: 600px;
        margin: 0 auto;
    }

    .sticker-vip {
        bottom: 12px;
        left: 7px;
    }

    #divSearchSticker .sticker-vip {
        bottom: 10px;
        left: 5px;
    }
}

.fullScreenContent {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 568px) and (max-width: 767px) {
    .fullScreenContent {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .indexIcon {
        width: 16.66666667%;
    }
    .boxSearchLeft {
        width: 51.3%;
    }
    .boxSearchRight {
        width: 47.7%;
    }
    .widthContent {
        width: 500px;
        max-width: none;
    }
    .main_col_top_chart {
        font-size: 16px;
    }
    .sub_col_top_chart {
        font-size: 14px;
    }
    .date_topchart {
        font-size: 16px;
    }
    .headerTopChart span {
        font-size: 30px;
    }
    .headerTopChart img {
        width: 240px;
    }
}

@media (min-width: 768px) {
    .catSelectText {
        font-size: 15px;
        vertical-align: middle;
        padding-bottom: 4px;
    }
    .containerSection {
        padding: 10px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .fullScreenContent {
        width: 100%;
        max-width: 726px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .display_footer {
        width: 756px;
    }
    footer {
        width: 756px;
    }
    .container.content>#content {
        padding-left: 0px;
        padding-right: 0px;
    }
    .topic {
        width: 600px;
        margin: 0 auto;
    }
    .indexArticleInfo, .myListArticleInfo, .continueArticleInfo {
        min-width: 220px;
        float: left;
        position: relative;
        margin-left: -10px;
        width: calc(100% - 110px);
    }
    .verySmallArticleInfo {
        width: 245px;
    }
    .listArticleImage, .listArticleImageMd {
        max-width: 120px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .articleElement {
        display: inline-block;
    }
    .txtTitle {
        font-size: 16px;
    }
    .txtInfo {
        font-size: 12px;
    }
    .lgHeight100Percent {
        height: 100%;
    }
    .bottomLine {
        padding: 0 5px;
        margin-right: 0px;
    }
    .boxSearchLeft {
        width: 51.3%;
        padding-right: 10px;
    }
    .boxSearchRight {
        width: 47.7%;
    }
    .widthContent {
        width: 678px;
        max-width: none;
    }
    .lineMarginBottom0 {
        margin: inherit;
        margin-bottom: 0px;
    }
    .chapterListMaxWidth {
        max-width: calc(100% - 100px);
    }
    .noti-container {
        margin-left: -260px
    }
    .marginTop100SmNone {
        margin-top: 100px;
    }
    .comment-list {
        margin-left: 40px;
        margin-right: 10px;
    }
    .main-activity-box {
        padding-bottom: 20px;
    }
    .search-box-header {
        padding: 10px 0px;
    }
    .main_col_top_chart {
        font-size: 16px;
    }
    .sub_col_top_chart {
        font-size: 14px;
    }
    .date_topchart {
        font-size: 16px;
    }
    .headerTopChart span {
        font-size: 30px;
    }
    .headerTopChart img {
        width: 240px;
    }
    .boxSmNoneMarginLeftRight {
        margin: 0 -10px;
    }
    .content-container.boxPreOrder, .content-container.boxPreOrderShadow {
        max-width: 800px !important;
    }
    .continueArticleName {
        font-size: 17px;
    }
    .continueArticleChapterName {
        display: inline;
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .continueArticleChapter {
        height: 1.4em;
        overflow: hidden;
    }
}

@media (min-width: 992px) {
    .catSelectText {
        font-size: 17px;
        vertical-align: middle;
        padding-bottom: 4px;
    }
    .container.content, .lightSection, .darkSection, .topicSection {
        width: 100%;
        max-width: 1072px;
    }
    .fullScreenContent {
        width: 100%;
        max-width: 1040px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .display_footer {
        width: 977px;
    }
    footer {
        width: 977px;
    }
    .container {
        max-width: 980px;
    }
    .container.content>#content {
        padding-left: 0px;
        padding-right: 0px;
    }
    .topic {
        width: 600px;
        margin: 0 auto;
    }
    .newDarkSection {
        padding-left: 30px;
        padding-right: 30px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .containerSection {
        padding: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .lightSection, .darkSection, .topicSection {
        padding: 20px 30px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .indexArticleInfo, .myListArticleInfo, .continueArticleInfo {
        min-width: 270px;
        float: left;
        position: relative;
        width: calc(100% - 120px);
    }
    .listArticleImage {
        max-width: 130px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .listArticleImageMd {
        max-width: 120px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .bottomLine {
        padding: 0 5px;
        margin-right: 0px;
    }
    #featuredPublisher>div {
        padding: 0 80px;
    }
    .decoratedHeader {
        margin: 0 0 40px 0;
    }
    .widthContent {
        width: 678px;
        max-width: none;
    }
    .noti-container {
        margin-left: -90px;
    }
    .contain_connect_fb {
        display: flex;
    }
    .borderLeftSmNone {
        border-left: 1px solid lightgray;
    }
    .continueArticleChapterName {
        display: inline;
        font-size: 13px;
    }
}

@media (min-width: 1025px) {
    .catSelectText {
        font-size: 16px;
        vertical-align: middle;
        padding-bottom: 20px;
        line-height: 1.38;
        color: var(--textOnCardDarkColor);
    }
    .verySmallArticleInfo {
        width: 185px;
    }
    .indexArticleInfo, .myListArticleInfo, .continueArticleInfo {
        min-width: 327px;
        max-width: 340px;
        float: left;
        position: relative;
        width: calc(100% - 130px);
    }
    .noti-container {
        margin-left: -70px;
    }
}

@media (min-width: 1200px) {
    .container.content, .lightSection, .darkSection, .topicSection {
        width: 1182px;
        max-width: inherit;
    }
    .fullScreenContent {
        width: 100%;
        max-width: 1040px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .display_footer {
        width: 1182px;
    }
    footer {
        width: 1182px;
    }
    .topic {
        width: 600px;
        margin: 0 auto;
    }
    .newDarkSection {
        padding-left: 100px;
        padding-right: 100px;
        margin-left: -70px;
        margin-right: -70px;
    }
    .containerSection {
        padding: 30px;
        margin-left: -70px;
        margin-right: -70px;
    }
    .lightSection, .darkSection, .topicSection {
        padding: 20px 100px;
        margin-left: -70px;
        margin-right: -70px;
    }
    .verySmallArticleInfo {
        width: 220px;
    }
    .indexArticleInfo, .myListArticleInfo, .continueArticleInfo {
        width: 340px;
        float: left;
        position: relative;
    }
    .container.content>#content {
        padding-left: 55px;
        padding-right: 55px;
    }
    .noti-container {
        margin-left: -85px
    }
}

@media (min-width: 1300px) {
    .container.content, .lightSection, .darkSection, .topicSection {
        width: 1180px;
    }
    .fullScreenContent {
        width: 100%;
        max-width: 1040px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .display_footer {
        width: 1180px;
    }
    footer {
        width: 1180px;
    }
    .topic {
        width: 600px;
        margin: 0 auto;
    }
    .noti-container {
        margin-left: -50px
    }
}

.lightSection {
    background-color: white;
}

.newDarkSection {
    width: 100%;
    margin: 0;
    max-width: unset;
    display: block;
}

.containerSection {
    width: 100%;
    margin: 0;
    max-width: unset;
    display: block;
}

.darkSection {
    background-color: #f4f4f4;
    display: block;
}

.bgDarkGrey {
    background-color: #414141;
}

.bgDarkGrey .indexSubHeader>span>a, .bgDarkGrey .indexSubHeaderMenu>span>a {
    color: white;
}

.topicSection {
    background-color: #7cafab;
}

.fontWeight500 {
    font-weight: 500;
}

.fontWeight300 {
    font-weight: 300;
}

.fontWeight100 {
    font-weight: 100;
}

.img-thumbnail-no-border {
    display: block;
    max-width: 100%;
    height: auto;
    line-height: 1.42857143;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.rating-symbol-foreground {
    color: #ed306b;
}

.height1Line {
    height: 1.4em;
    /*overflow: hidden;*/
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.height2Line {
    height: 2.8em;
    /* overflow: hidden; */
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.height3Line {
    height: 4.0em;
    overflow: hidden;
    word-break: break-word;
}

.height1Line .fa, .height1Line .fab, .height1Line .fad, .height1Line .fal, .height1Line .far, .height1Line .fas, .height1Line .glyphicon {
    display: initial;
}

.content-container {
    max-width: 980px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#popup_login_and_register .modal-body {
    background: #FFF;
}

#popup_login_and_register .current {
    background: #FFF;
    border-radius: 5px 5px 0px 0px;
}

.btn_login_and_register {
    max-width: 275px;
    background: #1fb49f;
    color: #FFF;
    border: 1px solid #1fb49f;
    font-size: 18px;
}

.bs-wizard {
    margin-top: 0px;
}

/*Form Wizard*/

.bs-wizard {
    border-bottom: solid 1px #e0e0e0;
    padding: 0 0 10px 0;
}

.bs-wizard>.bs-wizard-step {
    padding: 0;
    position: relative;
}

.bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 16px;
    margin-bottom: 5px;
}

.bs-wizard>.bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 14px;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background: #fbe8aa;
    top: 45px;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
    content: ' ';
    width: 14px;
    height: 14px;
    background: #fbbd19;
    border-radius: 50px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.bs-wizard>.bs-wizard-step>.progress {
    position: relative;
    border-radius: 0px;
    height: 8px;
    box-shadow: none;
    margin: 20px 0;
}

.bs-wizard>.bs-wizard-step>.progress>.progress-bar {
    width: 0px;
    box-shadow: none;
    background: #fbe8aa;
}

.bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
    width: 50%;
}

.bs-wizard>.bs-wizard-step:first-child.active>.progress>.progress-bar {
    width: 0%;
}

.bs-wizard>.bs-wizard-step:last-child.active>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
    background-color: #f5f5f5;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after {
    opacity: 0;
}

.bs-wizard>.bs-wizard-step:first-child>.progress {
    left: 50%;
    width: 50%;
}

.bs-wizard>.bs-wizard-step:last-child>.progress {
    width: 50%;
}

.bs-wizard>.bs-wizard-step.disabled a.bs-wizard-dot {
    pointer-events: none;
}

/*END Form Wizard*/

input.error, textarea.error, select.error {
    border: 1px solid red;
}

label.error {
    display: inline-block;
    float: left;
    color: red;
    font-weight: normal;
}

#tb_form_register_reader tr {
    height: 40px;
}

#tb_form_register_reader td {
    padding: 5px;
    vertical-align: middle;
}

/* BEG select chapter view chapter*/

#block-select-chapter>.bootstrap-select>.dropdown-toggle {
    padding-top: 0;
    padding-bottom: 0;
}

#block-select-chapter>.bootstrap-select>.dropdown-toggle>.filter-option {
    text-align: center !important;
    font-size: 23px;
}

/* END select chapter view chapter*/

/* BEG read content */

#articleContents p, #chapterContents p, #chapterCartoonContents p, #singleChapterContents p {
    text-indent: 10%;
    margin-bottom: 22px;
    cursor: context-menu;
}

#articleContents p img, #chapterContents p img, #chapterCartoonContents p img, #singleChapterContents p img {
    max-width: 90%;
}

#author_info_content_div p.AlignLeft, #topicContent p.AlignLeft, #articleContents p.AlignLeft, #chapterContents p.AlignLeft, #singleChapterContents p.AlignLeft, #chapterCartoonContents p.AlignLeft {
    text-indent: 10%;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div p.AlignLeft img, #topicContent p.AlignLeft img, #articleContents p.AlignLeft img, #chapterContents p.AlignLeft img, #singleChapterContents p.AlignLeft img, #chapterCartoonContents p.AlignLeft img {
    max-width: 90%;
}

#author_info_content_div p.AlignCenter, #topicContent p.AlignCenter, #articleContents p.AlignCenter, #chapterContents p.AlignCenter, #chapterCartoonContents p.AlignCenter, #singleChapterContents p.AlignCenter, .commentContent p.AlignCenter {
    text-indent: 0;
    text-align: center;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div p[align="center"], #topicContent p[align="center"], #articleContents p[align="center"], #chapterContents p[align="center"], #singleChapterContents p[align="center"], .commentContent p[align="center"] {
    text-indent: 0;
    text-align: center;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div p.AlignRight, #topicContent p.AlignRight, #articleContents p.AlignRight, #chapterContents p.AlignRight, #chapterCartoonContents p.AlignRight, #singleChapterContents p.AlignRight, .commentContent p.AlignRight {
    text-indent: 0;
    text-align: right;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div p[align="right"], #topicContent p[align="right"], #articleContents p[align="right"], #chapterContents p[align="right"], #singleChapterContents p[align="right"], .commentContent p[align="right"] {
    text-indent: 0;
    text-align: right;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div>p[style*="text-align: center"], #topicContent>p[style*="text-align: center"], #articleContents>p[style*="text-align: center"], #chapterContents>p[style*="text-align: center"], #singleChapterContents>p[style*="text-align: center"], #author_info_content_div>p[style*="text-align:center"], #topicContent>p[style*="text-align:center"], #articleContents>p[style*="text-align:center"], #chapterContents>p[style*="text-align:center"], #chapterCartoonContents>p[style*="text-align:center"], #chapterCartoonContents>p[style*="text-align: center"], #singleChapterContents>p[style*="text-align:center"], .commentContent>p[style*="text-align:center"] {
    text-indent: 0;
    text-align: right;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div>p.AlignJustify, #topicContent>p.AlignJustify, #articleContents>p.AlignJustify, #chapterContents>p.AlignJustify, #chapterCartoonContents>p.AlignJustify, #singleChapterContents>p.AlignJustify, .commentContent>p.AlignJustify {
    text-indent: 0;
    text-align: justify;
    margin-bottom: 22px;
    cursor: context-menu;
}

#topicContent p {
    line-height: 1.7;
    cursor: context-menu;
}

/* START image content zone */

#author_info_content_div>p.ImageLeft, #topicContent>p.ImageLeft, #articleContents>p.ImageLeft, #chapterContents>p.ImageLeft, #chapterCartoonContents>p.ImageLeft, #singleChapterContents>p.ImageLeft, .commentContent>p.ImageLeft {
    text-indent: 0;
    text-align: left;
}

#author_info_content_div>p.ImageCenter, #topicContent>p.ImageCenter, #articleContents>p.ImageCenter, #chapterContents>p.ImageCenter, #chapterCartoonContents>p.ImageCenter, #singleChapterContents>p.ImageCenter, .commentContent>p.ImageCenter {
    text-align: center;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div>p.ImageRight, #topicContent>p.ImageRight, #articleContents>p.ImageRight, #chapterContents>p.ImageRight, #chapterCartoonContents>p.ImageRight, #singleChapterContents>p.ImageRight, .commentContent>p.ImageRight {
    text-indent: 0;
    text-align: right;
    margin-bottom: 22px;
    cursor: context-menu;
}

#author_info_content_div>p.ImageCenter img, #topicContent>p.ImageCenter img, #articleContents>p.ImageCenter img, #chapterContents>p.ImageCenter img, #chapterCartoonContents>p.ImageCenter img, #singleChapterContents>p.ImageCenter img, .commentContent>p.ImageCenter img {
    margin: auto;
}

#author_info_content_div>p[style*="text-align:center"]>img, #topicContent>p[style*="text-align:center"]>img, #chapterContents>p[style*="text-align:center"]>img, #chapterCartoonContents>p[style*="text-align:center"]>img, #singleChapterContents>p[style*="text-align:center"]>img, #articleContents>p[style*="text-align:center"]>img, .commentContent>p[style*="text-align:center"]>img {
    margin: auto
}

#author_info_content_div>p.AlignCenter>img, #topicContent>p.AlignCenter>img, #articleContents>p.AlignCenter>img, #chapterContents>p.AlignCenter>img, #chapterCartoonContents>p.AlignCenter>img, #singleChapterContents>p.AlignCenter>img, .commentContent>p.AlignCenter>img {
    margin: auto;
}

/* for image that doesn't have any style */

/* END image content zone */

/* START: Font Face: DroidSansThai */

@font-face {
    font-family: 'Droid-Sans-Thai';
    src: url('../../fonts/DroidSansThai/DroidSansThai.eot');
    src: url('../../fonts/DroidSansThai/DroidSansThai.eot?#iefix') format('embedded-opentype'), url('../../fonts/DroidSansThai/DroidSansThai.woff2') format('woff2'), url('../../fonts/DroidSansThai/DroidSansThai.woff') format('woff'), url('../../fonts/DroidSansThai/DroidSansThai.ttf') format('truetype'), url('../../fonts/DroidSansThai/DroidSansThai.svg#DroidSansThai') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Droid-Sans-Thai';
    src: url('../../fonts/DroidSansThai/DroidSansThai-Bold.eot');
    src: url('../../fonts/DroidSansThai/DroidSansThai-Bold.eot?#iefix') format('embedded-opentype'), url('../../fonts/DroidSansThai/DroidSansThai-Bold.woff2') format('woff2'), url('../../fonts/DroidSansThai/DroidSansThai-Bold.woff') format('woff'), url('../../fonts/DroidSansThai/DroidSansThai-Bold.ttf') format('truetype'), url('../../fonts/DroidSansThai/DroidSansThai-Bold.svg#DroidSansThai-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* END: Font Face: DroidSansThai */

/* START: Font Face: MebCloudLoop */

@font-face {
    font-family: 'MebCloudLoop';
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop-BoldItalic.eot');
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../../fonts/MebCloudLoop/MEBCloudLoop-BoldItalic.woff2') format('woff2'), url('../../fonts/MebCloudLoop/MEBCloudLoop-BoldItalic.woff') format('woff'), url('../../fonts/MebCloudLoop/MEBCloudLoop-BoldItalic.ttf') format('truetype'), url('../../fonts/MebCloudLoop/MEBCloudLoop-BoldItalic.svg#MEBCloudLoop-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'MebCloudLoop';
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop-Bold.eot');
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop-Bold.eot?#iefix') format('embedded-opentype'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Bold.woff2') format('woff2'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Bold.woff') format('woff'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Bold.ttf') format('truetype'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Bold.svg#MEBCloudLoop-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MebCloudLoop';
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop.eot');
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop.eot?#iefix') format('embedded-opentype'), url('../../fonts/MebCloudLoop/MEBCloudLoop.woff2') format('woff2'), url('../../fonts/MebCloudLoop/MEBCloudLoop.woff') format('woff'), url('../../fonts/MebCloudLoop/MEBCloudLoop.ttf') format('truetype'), url('../../fonts/MebCloudLoop/MEBCloudLoop.svg#MEBCloudLoop') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MebCloudLoop';
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop-Italic.eot');
    src: url('../../fonts/MebCloudLoop/MEBCloudLoop-Italic.eot?#iefix') format('embedded-opentype'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Italic.woff2') format('woff2'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Italic.woff') format('woff'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Italic.ttf') format('truetype'), url('../../fonts/MebCloudLoop/MEBCloudLoop-Italic.svg#MEBCloudLoop-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

/* END: Font Face: MebCloudLoop */

#chapterContents *:not(.glyphicon), #chapterCartoonContents *:not(.glyphicon, .btn_suggest_next_chapter_template, .setFontNotoSans *), #singleChapterContents *, #articleContents *, #articleContent *, #author_info_content_div *, .commentContent *, .reviewContent *, .commentChapter *, .commentDate *, .chapterListTable *, .commentEdition * {
    font-family: 'Droid Sans', 'Droid-Sans-Thai', sans-serif;
}

#line-separate {
    display: none;
    position: absolute;
    height: 1px;
    border-bottom: 1px;
    border-bottom-style: dashed;
}

#author_info_content_div>p.AlignCenter>img, #topicContent>p.AlignCenter>img, #articleContents>p.AlignCenter>img, #chapterContents>p.AlignCenter>img, #chapterCartoonContents>p.AlignCenter>img, #singleChapterContents>p.AlignCenter>img {
    margin: auto;
}

/* END read content */

/* BEG my_page */

.subMenuPill {
    margin: 0 auto;
}

.subMenuPill>li>a {
    color: #909090;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0;
    border-radius: 17px;
    font-family: 'NotoSans';
    font-weight: 500;
    padding: 10px 12px;
}

.subMenuPill>li>a:hover {
    color: #303030;
    text-decoration-line: underline;
}

.subMenuPill>li.active>a, .subMenuPill>li.active>a:focus, .subMenuPill>li.active>a:hover {
    color: #303030;
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6;
    text-decoration-line: none;
}

.subMenuPillWhite {
    background: #ffffff;
    border-radius: 3px;
}

.subMenuPillWhite>li.active>a, .subMenuPillWhite>li.active>a:focus, .subMenuPillWhite>li.active>a:hover {
    background-color: #e8e8e8;
    border-color: #bebebe;
    color: #303030;
    font-weight: 500;
}

.subMenuPillWhite>li>a {
    background-color: #ffffff;
    border: solid 1px #eeeeee;
    color: #707070;
    font-weight: 300;
}

.subMenuPillWhite>li>a:hover {
    border: solid 1px #ccc;
    border-radius: 4px;
}

.subMenuPillWhite>li+li {
    margin-left: 6px;
}

.subMenuPillWhite>li>a {
    padding: 10px 15px;
}

.bgTabDescription {
    background-color: #efefef;
    color: rgb(123, 120, 135);
    min-height: 70px;
    font-size: 16px;
    padding: 20px 10px;
    border-radius: 4px;
}

.uncheckCheckbox, .disabledCheckbox {
    color: rgb(186, 186, 186);
}

/* END my_page */

/* BEG new element color */

.btnBorderWhite {
    color: #fff !important;
    background-color: transparent;
    border-color: #fff !important;
}

.btnBorderWhite :focus, .btnBorderWhite :hover {
    color: #fff !important;
    background-color: transparent;
    border-color: #9e9e9e !important;
}

.btnBorderGrey {
    color: #e1e1e1 !important;
    background-color: transparent;
    border-color: #707070 !important;
}

.btnBorderGrey:focus, .btnBorderGrey:hover {
    color: #d1d1d1 !important;
    background-color: transparent;
    border-color: #7e7e7e !important;
}

.btnBorderBlue {
    color: var(--linkColor) !important;
    background-color: transparent;
    border-color: var(--linkColor) !important;
}

.btnBorderBlue:focus, .btnBorderBlue:hover {
    color: var(--linkHoverColor) !important;
    background-color: transparent;
    border-color: var(--linkHoverColor) !important;
}

.btnCancel {
    color: #606060;
    background-color: #ffffff;
    border-color: #c0c0c0;
}

.btnCancel:hover {
    color: #606060;
    background-color: #f4f4f4;
    border-color: #c0c0c0;
}

.btnDraft {
    color: white;
    background-color: #6f4dd2;
    border-color: #6f4dd2;
}

.btnDraft:hover {
    color: white;
    background-color: #5f47bb;
    border-color: #5f47bb;
}

.btnSave {
    color: white;
    background-color: #1fb49f;
    border-color: #1fb49f;
}

.btnSave:hover {
    color: white;
    background-color: #1ea28f;
    border-color: #1ea28f;
}

.btnPreorder {
    color: white;
    background-color: var(--linkColor);
    border-color: var(--linkColor);
}

.btnPreorder:hover {
    color: white;
    background-color: var(--linkColor);
    border-color: var(--linkColor);
}

.btnNew {
    color: white;
    background-color: #e34574;
    border-color: #e34574;
}

.btnNew:hover {
    color: white;
    background-color: #d73c72;
    border-color: #d73c72;
}

.btnManageNew{
    color: white;
    background-color: var(--heartColor);
    border-color: var(--heartColor);
}

.btnManageNew:hover {
    color: white;
    background-color: var(--pinkHoverColor);
    border-color: var(--pinkHoverColor);
}

.btnCreate {
    color: #1fb49f;
    background-color: #ffffff;
    border: solid 1px #54c0b1;
}

.btnCreate:hover {
    color: #1fb49f;
    background-color: #f4f4f4;
    border: solid 1px #54c0b1;
}

.btnDelete {
    color: #e34574;
    background-color: #ffffff;
    border: solid 1px #e34574;
}

.btnDelete:hover {
    color: #e34574;
    background-color: #f4f4f4;
    border: solid 1px #e34574;
}

.btnCoin {
    color: white;
    background-color: #f58b1a;
    border-color: #f58b1a;
}

.btnCoin:hover {
    color: white;
    background-color: #e6801a;
    border-color: #e6801a;
}

.btnReleaseSchedule {
    color: white;
    background-color: green;
    border-color: green;
}

.btnIgnore {
    color: white;
    background-color: #999;
    border-color: #999;
}

.btnManage {
    color: #303030;
    background-color: #e1e1e1;
    border-color: #e1e1e1 !important;
}

.borderNone {
    border-color: transparent;
}

.tableHeader {
    color: white;
    background-color: #d73c72;
    border-color: #d73c72;
}

.linkColorChangeOnHover:hover, .linkColorChangeOnHover:visited:hover, .linkColorChangeOnHover:hover *, .linkColorChangeOnHover:visited:hover *, .read-mode-night .linkColorChangeOnHover:hover, .read-mode-night .linkColorChangeOnHover:visited:hover, .read-mode-night .linkColorChangeOnHover:hover *, .read-mode-night .linkColorChangeOnHover:visited:hover *, .read-mode-dark .linkColorChangeOnHover:hover, .read-mode-dark .linkColorChangeOnHover:visited:hover, .read-mode-dark .linkColorChangeOnHover:hover *, .read-mode-dark .linkColorChangeOnHover:visited:hover * {
    color: #12b8a8 !important;
    text-decoration: none;
}

.linkEditColorChangeOnHover:hover, .linkEditColorChangeOnHover:visited:hover, .linkEditColorChangeOnHover:hover *, .linkEditColorChangeOnHover:visited:hover *, .read-mode-night .linkEditColorChangeOnHover:hover, .read-mode-night .linkEditColorChangeOnHover:visited:hover, .read-mode-night .linkEditColorChangeOnHover:hover *, .read-mode-night .linkEditColorChangeOnHover:visited:hover *, .read-mode-dark .linkEditColorChangeOnHover:hover, .read-mode-dark .linkEditColorChangeOnHover:visited:hover, .read-mode-dark .linkEditColorChangeOnHover:hover *, .read-mode-dark .linkEditColorChangeOnHover:visited:hover * {
    color: #d14170 !important;
    text-decoration: none;
}

.linkColorChangeOnHover:visited, .linkEditColorChangeOnHover:visited {
    color: #656565;
}

/* END new element color */

.underlineOnHover {
    border-bottom: solid white 3px;
}

.underlineOnHover:hover {
    border-bottom: solid #736f80 3px;
}

.commentChapter a {
    color: #AFB0B1;
}

.btnSubmitComment {
    background-color: #52c1b2;
    color: white;
}

.btnSubmitComment:hover {
    background-color: rgb(74, 174, 160);
}

@media (min-width: 641px) {
    /* width >= 641 */
    .commentBoxDiv {
        max-width: 746px;
        margin: 0 auto;
    }
    .commentProfile {
        float: left;
        width: 40px !important;
        height: 40px !important;
        margin-top: 10px !important;
    }
    .noti-img-publisher.commentProfile {
        float: left;
        width: 26px !important;
        height: 26px !important;
        margin-top: 10px !important;
    }
    .commentChapter {
        font-size: 12px;
        color: #D1D3D4;
        float: right;
        padding-top: 12px;
    }
    .countLikeScore {
        float: left;
        margin-top: 12px;
        font-size: 12px;
        color: #a9a9a9;
    }
    .commentHeader {
        padding-top: 33px;
        padding-left: 10px;
    }
    .commentFooter {
        margin-top: 33px;
    }
    .commentName {
        font-size: 16px;
    }
    .commentDate {
        font-size: 12px;
    }
    .commentContent {
        font-size: 16px;
    }
    .btnShowReplyComment {
        font-size: 14px;
    }
    .commentEdition {
        margin-top: 10px;
        font-size: 12px;
    }
    .commentNumber {
        font-size: 20px;
    }
    .rating_only .commentProfile {
        width: 35px !important;
        height: 35px !important;
        margin-top: 8px !important;
    }
    .rating_only .commentName {
        font-size: 12px;
    }
    .rating_only .commentDate {
        font-size: 9px;
    }
    .rating_only .commentFooter {
        margin-top: unset;
    }
    /* edit my follow */
    .followBox {
        height: 55px;
    }
    .cancelfollowBtn {
        margin: 0;
    }
    .txtSize30sm20 {
        font-size: 30px;
    }
    .txtSize30sm22 {
        font-size: 30px;
    }
    .txtSize20sm16 {
        font-size: 20px;
    }
    .txtSize25sm18 {
        font-size: 25px;
    }
    .txtSize22sm18 {
        font-size: 22px;
    }
    .txtSize18sm16 {
        font-size: 18px;
    }
    .txtSize18sm14 {
        font-size: 18px;
    }
    .txtSize18sm13 {
        font-size: 18px;
    }
    .txtSize16sm15 {
        font-size: 16px;
    }
    .txtSize16sm14 {
        font-size: 16px;
    }
    .txtSize16sm13 {
        font-size: 16px;
    }
    .txtSize16sm12 {
        font-size: 16px;
    }
    .txtSize14sm13 {
        font-size: 14px;
    }
    .txtSize14sm12 {
        font-size: 14px;
    }
    .txtSize12sm10 {
        font-size: 12px;
    }
    .absoluteSmRelative {
        position: absolute;
    }
    .width110Sm55 {
        width: 110px;
    }
    .replyCommentHeaderText {
        font-size: 18px;
    }
    .showBodyTableLarge {
        display: table-row-group !important;
    }
    .showInlineBlockLarge {
        display: inline-block !important;
    }
    .reviewContent {
        margin-left: 60px;
    }
    .thumbnailCoverPreOrder {
        width: 180px;
        margin-right: 20px;
    }
    .infoCoverPreOrder {
        width: calc(100% - 200px);
        vertical-align: top;
    }
    .infoCoverPreOrder .articleSynopsis {
        font-size: 16px;
        max-height: 153px !important;
        height: 100%;
        overflow: hidden;
    }
    .lineBottomPreorderCover {
        font-size: 16px;
    }
    .lineBottomPreorderCover i {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .commentProfile {
        float: left;
        width: 30px !important;
        height: 30px !important;
        margin-top: 12px !important;
    }
    .commentChapter {
        font-size: 9px;
        color: #D1D3D4;
        padding-left: 40px;
        float: right;
        padding-top: 12px;
    }
    .countLikeScore {
        float: left;
        margin-top: 12px;
        font-size: 9px;
        color: #a9a9a9;
    }
    .commentFooter {
        width: 100%;
        margin-top: 20px;
    }
    .commentHeader {
        padding-top: 10px;
    }
    .commentContent {
        font-size: 14px;
    }
    .commentName {
        font-size: 12px;
    }
    .commentDate {
        font-size: 12px;
    }
    .btnShowReplyComment {
        font-size: 11px;
    }
    .spoiler {
        width: 100% !important;
        padding: 0px;
    }
    .spoiler-title, .spoiler-content {
        font-size: 11px !important;
    }
    .commentEdition {
        font-size: 9px;
        margin-top: 8px;
    }
    .commentNumber {
        font-size: 16px;
    }
    .btnComment, .btnSubmitComment {
        padding: 1px 5px;
        font-size: 16px;
        line-height: 1.5;
        border-radius: 3px;
    }
    .commentBoxTextHeader {
        font-size: 16px;
    }
    /* edit my follow */
    .followBox {
        height: 70px;
    }
    .cancelfollowBtn {
        margin: 0;
    }
    .txtSize30sm22 {
        font-size: 22px;
    }
    .txtSize30sm20 {
        font-size: 20px;
    }
    .txtSize25sm18 {
        font-size: 18px;
    }
    .txtSize20sm16 {
        font-size: 16px;
    }
    .txtSize22sm18 {
        font-size: 18px;
    }
    .txtSize18sm16 {
        font-size: 16px;
    }
    .txtSize18sm14 {
        font-size: 14px;
    }
    .txtSize18sm13 {
        font-size: 13px;
    }
    .txtSize16sm15 {
        font-size: 15px;
    }
    .txtSize16sm14 {
        font-size: 14px;
    }
    .txtSize16sm13 {
        font-size: 13px;
    }
    .txtSize16sm12 {
        font-size: 12px;
    }
    .txtSize14sm13 {
        font-size: 13px;
    }
    .txtSize14sm12 {
        font-size: 12px;
    }
    .txtSize12sm10 {
        font-size: 10px;
    }
    .absoluteSmRelative {
        position: relative;
    }
    .width110Sm55 {
        width: 55px;
    }
    .replyCommentHeaderText {
        font-size: 12px;
    }
    .showButtonSmall {
        display: block !important;
        cursor: pointer;
    }
    .thumbnailCoverPreOrder {
        width: 100px;
        margin-left: 10px;
        margin-right: 20px;
    }
    .infoCoverPreOrder {
        width: calc(100% - 140px);
        vertical-align: top;
        margin-right: 10px;
    }
    .infoCoverPreOrder .articleSynopsis {
        font-size: 14px;
        max-height: 70px !important;
        height: 100%;
        overflow: hidden;
        padding-top: 10px;
        margin-bottom: 10px;
    }
    .lineBottomPreorderCover {
        font-size: 14px;
        margin-right: 10px;
    }
    .lineBottomPreorderCover i {
        font-size: 12px;
    }
    .sxs-pull-left {
        float: left !important;
    }
    .sxsPaddingBottomNone {
        padding-bottom: 0;
    }
    .sxsMarginBottom20 {
        margin-bottom: 20px;
    }
}

.page_empty {
    margin-top: 20px;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 60%;
    background-size: 150px;
    font-size: 24px;
    text-align: center;
    color: #736f80;
    background-image: url('../../images/not_found.png?2');
    display: inline-block;
}

.not_found {
    margin-top: 20px;
    width: 100%;
    min-height: 150px;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 60%;
    font-size: 16px;
    text-align: center;
    color: #736f80;
    display: inline-block;
}

.main-cover_detail {
    width: 100%;
}

@media (min-width: 768px) {
    .main_cover_background_thumbnail {
        width: 100% !important;
        margin-left: 0px !important;
        margin-top: 0px !important;
        height: 550px;
        -webkit-filter: blur(50px);
        filter: blur(50px);
    }
    .main-cover_detail {
        width: calc(100% - 224px);
    }
}

@media (max-width: 369px) {
    .submenuMobile {
        font-size: 12px;
    }
}

.submenuMobileSelected a {
    color: #d73c72;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 180px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background-color: #868F8D;
}

#footer * {
    color: #cccccc;
}

#emptySpaceFooter {
    height: 180px;
}

#footerMobile {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #868F8D;
}

#footerMobile * {
    color: #cccccc;
}

#emptySpaceFooterMobile {
    height: 60px;
}

#containerOfContentOfAction.bgReadSpace, .container.content.bgReadSpace, #content.bgReadSpace {
    background-color: #f4f4f4 !important;
}

/* for 5 column */

.col-xs-5column {
    width: 20%;
}

.col-xs-pull-5column {
    right: 20%;
}

.col-xs-push-5column {
    left: 20%;
}

.col-xs-offset-5column {
    margin-left: 20%;
}

@media (min-width: 768px) {
    .col-sm-5column {
        width: 20%;
    }
    .col-sm-pull-5column {
        right: 20%;
    }
    .col-sm-push-5column {
        left: 20%;
    }
    .col-sm-offset-5column {
        margin-left: 20%;
    }
}

@media (min-width: 992px) {
    .col-md-5column {
        width: 20%;
    }
    .col-md-pull-5column {
        right: 20%;
    }
    .col-md-push-5column {
        left: 20%;
    }
    .col-md-offset-5column {
        margin-left: 20%;
    }
}

@media (min-width: 1200px) {
    .col-lg-5column {
        width: 20%;
    }
    .col-lg-pull-5column {
        right: 20%;
    }
    .col-lg-push-5column {
        left: 20%;
    }
    .col-lg-offset-5column {
        margin-left: 20%;
    }
}

/* for 5 column */

@media (max-width: 459px) {
    .hidden-459-down {
        display: none !important;
    }
    .col-459-down-1, .col-459-down-2, .col-459-down-3, .col-459-down-4, .col-459-down-5, .col-459-down-6, .col-459-down-7, .col-459-down-8, .col-459-down-9, .col-459-down-10, .col-459-down-11, .col-459-down-12 {
        float: left;
    }
    .col-459-down-12 {
        width: 100%;
    }
    .col-459-down-11 {
        width: 91.66666667%;
    }
    .col-459-down-10 {
        width: 83.33333333%;
    }
    .col-459-down-9 {
        width: 75%;
    }
    .col-459-down-8 {
        width: 66.66666667%;
    }
    .col-459-down-7 {
        width: 58.33333333%;
    }
    .col-459-down-6 {
        width: 50%;
    }
    .col-459-down-5 {
        width: 41.66666667%;
    }
    .col-459-down-4 {
        width: 33.33333333%;
    }
    .col-459-down-3 {
        width: 25%;
    }
    .col-459-down-5column {
        width: 20%;
    }
    .col-459-down-2 {
        width: 16.66666667%;
    }
    .col-459-down-1 {
        width: 8.33333333%;
    }
    .col-459-down-pull-12 {
        right: 100%;
    }
    .col-459-down-pull-11 {
        right: 91.66666667%;
    }
    .col-459-down-pull-10 {
        right: 83.33333333%;
    }
    .col-459-down-pull-9 {
        right: 75%;
    }
    .col-459-down-pull-8 {
        right: 66.66666667%;
    }
    .col-459-down-pull-7 {
        right: 58.33333333%;
    }
    .col-459-down-pull-6 {
        right: 50%;
    }
    .col-459-down-pull-5 {
        right: 41.66666667%;
    }
    .col-459-down-pull-4 {
        right: 33.33333333%;
    }
    .col-459-down-pull-3 {
        right: 25%;
    }
    .col-459-down-pull-5column {
        right: 20%;
    }
    .col-459-down-pull-2 {
        right: 16.66666667%;
    }
    .col-459-down-pull-1 {
        right: 8.33333333%;
    }
    .col-459-down-pull-0 {
        right: auto;
    }
    .col-459-down-push-12 {
        left: 100%;
    }
    .col-459-down-push-11 {
        left: 91.66666667%;
    }
    .col-459-down-push-10 {
        left: 83.33333333%;
    }
    .col-459-down-push-9 {
        left: 75%;
    }
    .col-459-down-push-8 {
        left: 66.66666667%;
    }
    .col-459-down-push-7 {
        left: 58.33333333%;
    }
    .col-459-down-push-6 {
        left: 50%;
    }
    .col-459-down-push-5 {
        left: 41.66666667%;
    }
    .col-459-down-push-4 {
        left: 33.33333333%;
    }
    .col-459-down-push-3 {
        left: 25%;
    }
    .col-459-down-push-5column {
        left: 20%;
    }
    .col-459-down-push-2 {
        left: 16.66666667%;
    }
    .col-459-down-push-1 {
        left: 8.33333333%;
    }
    .col-459-down-push-0 {
        left: auto;
    }
    .col-459-down-offset-12 {
        margin-left: 100%;
    }
    .col-459-down-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-459-down-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-459-down-offset-9 {
        margin-left: 75%;
    }
    .col-459-down-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-459-down-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-459-down-offset-6 {
        margin-left: 50%;
    }
    .col-459-down-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-459-down-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-459-down-offset-3 {
        margin-left: 25%;
    }
    .col-459-down-offset-5column {
        margin-left: 20%;
    }
    .col-459-down-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-459-down-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-459-down-offset-0 {
        margin-left: 0;
    }
}

@media (min-width: 460px) and (max-width: 599px) {
    .hidden-460-599 {
        display: none !important;
    }
    .col-460-599-1, .col-460-599-2, .col-460-599-3, .col-460-599-4, .col-460-599-5, .col-460-599-6, .col-460-599-7, .col-460-599-8, .col-460-599-9, .col-460-599-10, .col-460-599-11, .col-460-599-12 {
        float: left;
    }
    .col-460-599-12 {
        width: 100%;
    }
    .col-460-599-11 {
        width: 91.66666667%;
    }
    .col-460-599-10 {
        width: 83.33333333%;
    }
    .col-460-599-9 {
        width: 75%;
    }
    .col-460-599-8 {
        width: 66.66666667%;
    }
    .col-460-599-7 {
        width: 58.33333333%;
    }
    .col-460-599-6 {
        width: 50%;
    }
    .col-460-599-5 {
        width: 41.66666667%;
    }
    .col-460-599-4 {
        width: 33.33333333%;
    }
    .col-460-599-3 {
        width: 25%;
    }
    .col-460-599-5column {
        width: 20%;
    }
    .col-460-599-2 {
        width: 16.66666667%;
    }
    .col-460-599-1 {
        width: 8.33333333%;
    }
    .col-460-599-pull-12 {
        right: 100%;
    }
    .col-460-599-pull-11 {
        right: 91.66666667%;
    }
    .col-460-599-pull-10 {
        right: 83.33333333%;
    }
    .col-460-599-pull-9 {
        right: 75%;
    }
    .col-460-599-pull-8 {
        right: 66.66666667%;
    }
    .col-460-599-pull-7 {
        right: 58.33333333%;
    }
    .col-460-599-pull-6 {
        right: 50%;
    }
    .col-460-599-pull-5 {
        right: 41.66666667%;
    }
    .col-460-599-pull-4 {
        right: 33.33333333%;
    }
    .col-460-599-pull-3 {
        right: 25%;
    }
    .col-460-599-pull-5column {
        right: 20%;
    }
    .col-460-599-pull-2 {
        right: 16.66666667%;
    }
    .col-460-599-pull-1 {
        right: 8.33333333%;
    }
    .col-460-599-pull-0 {
        right: auto;
    }
    .col-460-599-push-12 {
        left: 100%;
    }
    .col-460-599-push-11 {
        left: 91.66666667%;
    }
    .col-460-599-push-10 {
        left: 83.33333333%;
    }
    .col-460-599-push-9 {
        left: 75%;
    }
    .col-460-599-push-8 {
        left: 66.66666667%;
    }
    .col-460-599-push-7 {
        left: 58.33333333%;
    }
    .col-460-599-push-6 {
        left: 50%;
    }
    .col-460-599-push-5 {
        left: 41.66666667%;
    }
    .col-460-599-push-4 {
        left: 33.33333333%;
    }
    .col-460-599-push-3 {
        left: 25%;
    }
    .col-460-599-push-5column {
        left: 20%;
    }
    .col-460-599-push-2 {
        left: 16.66666667%;
    }
    .col-460-599-push-1 {
        left: 8.33333333%;
    }
    .col-460-599-push-0 {
        left: auto;
    }
    .col-460-599-offset-12 {
        margin-left: 100%;
    }
    .col-460-599-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-460-599-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-460-599-offset-9 {
        margin-left: 75%;
    }
    .col-460-599-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-460-599-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-460-599-offset-6 {
        margin-left: 50%;
    }
    .col-460-599-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-460-599-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-460-599-offset-3 {
        margin-left: 25%;
    }
    .col-460-599-offset-5column {
        margin-left: 20%;
    }
    .col-460-599-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-460-599-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-460-599-offset-0 {
        margin-left: 0;
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .hidden-600-767 {
        display: none !important;
    }
    .col-600-767-1, .col-600-767-2, .col-600-767-3, .col-600-767-4, .col-600-767-5, .col-600-767-6, .col-600-767-7, .col-600-767-8, .col-600-767-9, .col-600-767-10, .col-600-767-11, .col-600-767-12 {
        float: left;
    }
    .col-600-767-12 {
        width: 100%;
    }
    .col-600-767-11 {
        width: 91.66666667%;
    }
    .col-600-767-10 {
        width: 83.33333333%;
    }
    .col-600-767-9 {
        width: 75%;
    }
    .col-600-767-8 {
        width: 66.66666667%;
    }
    .col-600-767-7 {
        width: 58.33333333%;
    }
    .col-600-767-6 {
        width: 50%;
    }
    .col-600-767-5 {
        width: 41.66666667%;
    }
    .col-600-767-4 {
        width: 33.33333333%;
    }
    .col-600-767-3 {
        width: 25%;
    }
    .col-600-767-5column {
        width: 20%;
    }
    .col-600-767-2 {
        width: 16.66666667%;
    }
    .col-600-767-1 {
        width: 8.33333333%;
    }
    .col-600-767-pull-12 {
        right: 100%;
    }
    .col-600-767-pull-11 {
        right: 91.66666667%;
    }
    .col-600-767-pull-10 {
        right: 83.33333333%;
    }
    .col-600-767-pull-9 {
        right: 75%;
    }
    .col-600-767-pull-8 {
        right: 66.66666667%;
    }
    .col-600-767-pull-7 {
        right: 58.33333333%;
    }
    .col-600-767-pull-6 {
        right: 50%;
    }
    .col-600-767-pull-5 {
        right: 41.66666667%;
    }
    .col-600-767-pull-4 {
        right: 33.33333333%;
    }
    .col-600-767-pull-3 {
        right: 25%;
    }
    .col-600-767-pull-5column {
        right: 20%;
    }
    .col-600-767-pull-2 {
        right: 16.66666667%;
    }
    .col-600-767-pull-1 {
        right: 8.33333333%;
    }
    .col-600-767-pull-0 {
        right: auto;
    }
    .col-600-767-push-12 {
        left: 100%;
    }
    .col-600-767-push-11 {
        left: 91.66666667%;
    }
    .col-600-767-push-10 {
        left: 83.33333333%;
    }
    .col-600-767-push-9 {
        left: 75%;
    }
    .col-600-767-push-8 {
        left: 66.66666667%;
    }
    .col-600-767-push-7 {
        left: 58.33333333%;
    }
    .col-600-767-push-6 {
        left: 50%;
    }
    .col-600-767-push-5 {
        left: 41.66666667%;
    }
    .col-600-767-push-4 {
        left: 33.33333333%;
    }
    .col-600-767-push-5column {
        left: 20%;
    }
    .col-600-767-push-3 {
        left: 25%;
    }
    .col-600-767-push-2 {
        left: 16.66666667%;
    }
    .col-600-767-push-1 {
        left: 8.33333333%;
    }
    .col-600-767-push-0 {
        left: auto;
    }
    .col-600-767-offset-12 {
        margin-left: 100%;
    }
    .col-600-767-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-600-767-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-600-767-offset-9 {
        margin-left: 75%;
    }
    .col-600-767-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-600-767-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-600-767-offset-6 {
        margin-left: 50%;
    }
    .col-600-767-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-600-767-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-600-767-offset-3 {
        margin-left: 25%;
    }
    .col-600-767-offset-5column {
        margin-left: 20%;
    }
    .col-600-767-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-600-767-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-600-767-offset-0 {
        margin-left: 0;
    }
}

.img_close_swal {
    position: absolute;
    right: 20px;
    z-index: 2;
    cursor: pointer;
}

#tabArticle th {
    text-align: center;
}

.td_article_name {
    vertical-align: middle;
    max-width: 300px !important;
}

.td_article_status {
    max-width: 75px !important;
}

@media (max-width: 400px) {
    .font_text_login_and_register {
        font-size: 16px !important;
        ;
    }
    .img-logo-meb {
        width: 30px !important;
    }
}

.dropdown-menu>li>a {
    padding: 10px 20px;
}

@media (max-width: 767px) {
    .tableChapter {
        margin-left: -20px;
        margin-right: -20px;
    }
    .innerTableChapter {
        padding: 5px;
    }
}

.navbar-proof {
    background-color: #5b4a90;
    border: none;
}

.btn-save-proof {
    color: #fff;
    background-color: #4abfad;
    border-color: #379a8b;
}

.btn-save-proof:hover {
    color: #fff;
    background-color: #3caa99;
    border-color: #318e7f;
}

.btn-cancel-proof {
    color: #fff;
    background-color: #ea5858;
    border-color: #ac2925;
}

.btn-cancel-proof:hover {
    color: #fff;
    background-color: #e73a3a;
    border-color: #ac2925;
}

.btn-reproof {
    color: #fff;
    background-color: #7b5bd6;
    border-color: #6f4dd2;
    border-radius: 23px !important;
}

.btn-reproof:hover {
    color: #fff;
    background-color: #6f4dd2;
    border-color: #6f4dd2;
}

.btn-reproof:focus {
    color: #fff !important;
}

.btn-next-wrong-word {
    color: #fff;
    background-color: #c45ee5;
    border-color: #c100ff;
}

.btn-next-wrong-word:hover {
    color: #fff;
    background-color: #c100ff;
    border-color: #c100ff;
}

.btn-next-wrong-word:focus {
    color: #fff !important;
}

.btn-define-word {
    color: #fff;
    background-color: #8dafdd;
    border-color: #719fdc;
}

.btn-define-word:hover {
    color: #fff;
    background-color: #749dd6;
    border-color: #648ec7;
}

.badge-notify {
    background: #ed306b;
    position: absolute;
    top: 5px;
    margin-left: 25px;
    font-weight: normal;
}

.noti-container {
    width: 340px;
    max-height: 420px;
    padding-top: 0;
    padding-bottom: 0;
}

.noti-container>.noti-seemore {
    bottom: 0px;
    width: 100%;
    text-align: center;
    border-top: solid #e5e5e5 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
}

.noti-container>.noti-list {
    height: 100%;
    max-height: 361px;
}

.noti-message:first-child {
    margin-top: -9px;
}

.noti-message-wrapper {
    padding-bottom: 0 !important;
}

.noti-message {
    height: 66px;
    color: #f2f3f9;
    cursor: pointer;
}

.noti-message:hover {
    background-color: #eeeeee;
}

.noti-seemore-space {
    height: 50px;
}

div.noti-message-thumbnail-wrapper {
    display: inline-block;
    padding: 6px 5px;
}

img.noti-message-thumbnail {
    width: 50px !important;
    height: 50px !important;
    max-width: 100%;
    max-height: 100%;
}

div.noti-message-content {
    display: inline-block;
    height: 50px;
    padding: 5px 0px 5px 10px;
    vertical-align: top;
    position: relative;
    width: calc(100% - 60px);
    line-height: 1.8;
    font-family: 'Droid-Sans-Thai';
}

.noti-list-message-content {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.38;
    text-align: left;
    color: var(--textOnCardDarkColor);
}
.noti-list-message-content-detail {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.36;
    text-align: left;
    color: var(--textOnCardDarkColor);
}

.noti-list-message-border {
    border-top: solid #e5e5e5 1px;
}

.noti-message-content-date {
    font-size: 11px;
    color: rgba(159, 159, 159, 1);
    float: right;
}

.noti-list-message-content-date {
    font-size: 14px;
    color: var(--textLightColor);
    float: left;
}

.noti-list-message {
    width: 100%;
}

.noti-list-message:first-child {
    border-top: 1px solid #e5e5e5;
}

.noti-list-message:hover {
    background-color: #f8f8f8;
}

.noti-loading {
    width: 100%;
}

.noti-list-scrollbar {
    overflow-y: hidden;
    overflow-x: hidden;
}

.noti-list-scrollbar:hover {
    overflow-y: auto;
    overflow-x: auto;
}

.noti-list-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.noti-list-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}

.noti-list-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
    background-color: rgba(107, 107, 107, 0.65);
}

.noti-new-color {
    background: #edf2fa;
}

.noti-new-color:hover {
    background: #dde1e8;
}

.article-name-comment {
    font-size: 14px;
    font-weight: 300;
    color: rgba(94, 94, 94, 1);
    text-align: left;
}

.donate_container {
    color: #fe8105;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

thead.donate_container>tr>th {
    vertical-align: bottom;
    border-bottom: none;
}

.donate_btn {
    font-size: 18px;
    display: inline-block;
    margin-top: 33px;
    margin-bottom: 27px;
    width: 350px;
    background-color: #ff8205;
    border-radius: 22px;
    border: none;
}

.read-mode-night .donate_btn, .read-mode-dark .donate_btn {
    color: #333333 !important;
}

.read-mode-sepia #containerOfContentOfAction .chatStoryBox {
    background-color: #edece2 !important;
}

.read-mode-sepia #chatStoryArea>.chatStoryContent.chatStoryLeft>.chatStoryBubble>div {
    background-color: #ffffff !important;
}

.read-mode-night #containerOfContentOfAction .chatStoryBox, .read-mode-dark #containerOfContentOfAction .chatStoryBox {
    background-color: #36373b !important;
}

.read-mode-night #containerOfContentOfAction .chatStoryBox>.chatStoryHead, .read-mode-dark #containerOfContentOfAction .chatStoryBox>.chatStoryHead {
    background-color: #18191c !important;
}

.read-mode-night #chatStoryArea .chatStoryContent .chatStoryBubble .chatStoryText, .read-mode-dark #chatStoryArea .chatStoryContent .chatStoryBubble .chatStoryText {
    background-color: #4a4d57 !important;
}

.read-mode-sepia #chatStoryArea .chatStoryContent.chatStoryMiddle .chatStoryBubble .chatStoryText, .read-mode-night #chatStoryArea .chatStoryContent.chatStoryMiddle .chatStoryBubble .chatStoryText, .read-mode-dark #chatStoryArea .chatStoryContent.chatStoryMiddle .chatStoryBubble .chatStoryText {
    opacity: 0.6;
    background-color: #303030 !important;
}

.read-mode-night .chatStoryBox #chapterContents *, .read-mode-dark .chatStoryBox #chapterContents * {
    background-color: unset !important;
}

.read-mode-night #chatStoryArea>.chatStoryContent, .read-mode-night #chatStoryArea>.chatStoryContent *, .read-mode-dark #chatStoryArea>.chatStoryContent, .read-mode-dark #chatStoryArea>.chatStoryContent * {
    color: #ffffff !important;
}

.read-mode-night .chatStoryBox #chatStoryClick, .read-mode-night .chatStoryBox #chatStoryClick *, .read-mode-dark .chatStoryBox #chatStoryClick, .read-mode-dark .chatStoryBox #chatStoryClick *, .read-mode-night .chatStoryBox #chatStoryPlay, .read-mode-night .chatStoryBox #chatStoryPlay *, .read-mode-dark .chatStoryBox #chatStoryPlay, .read-mode-dark .chatStoryBox #chatStoryPlay *, .read-mode-night .chatStoryBox #chatStoryPause, .read-mode-night .chatStoryBox #chatStoryPause *, .read-mode-dark .chatStoryBox #chatStoryPause, .read-mode-dark .chatStoryBox #chatStoryPause * {
    border-color: #18191c !important;
    color: #18191c !important;
}

.read-mode-night .chatStoryBox .chatStoryClickBtn, .read-mode-dark .chatStoryBox .chatStoryClickBtn {
    border-color: #18191c !important;
}

.read-mode-night #suggest_chapter *, .read-mode-dark #suggest_chapter * {
    color: #707070 !important;
}

.read-mode-night #allArticles li.active>a, .read-mode-dark #allArticles li.active>* {
    border-bottom: solid 3px #ffffff;
    color: #ffffff !important;
}

.popup_donate {
    background-color: #fcbc87 !important;
    color: #ffffff !important;
}

.popup_donate .swal2-close {
    color: #ffffff !important;
}

.popup_donate .swal2-close:hover {
    color: #d55 !important;
}

#give_donate {
    border-color: #ff8452;
    background-color: #ff8452;
    color: #ffffff;
    outline: none !important;
}

#give_donate:hover {
    border-color: #f56b33;
    background-color: #f56b33;
}

.firstDonator {
    cursor: pointer;
}

.firstDonator:hover {
    cursor: pointer;
    color: #ff8452;
}

.borderDonatorTable {
    border-top: solid 1px #d3d3d3;
    border-bottom: solid 1px #d3d3d3;
}

.borderNoneDonatorTable {
    border-top: none !important;
    border-bottom: none !important;
}

.topVertically {
    vertical-align: top !important;
}

.reviewBoxBorder {
    border: 1px solid wheat;
    border-left: none;
    border-bottom: none;
    background-color: #FFFFFF !important;
}

.reviewBoxBorderLeft {
    border-left: 1px solid wheat;
    height: calc(100% - 28px);
    position: absolute;
    top: 0px;
    left: 0px;
}

.reviewBoxBorderBottom {
    border-bottom: 1px solid wheat;
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.videodetector {
    display: block;
    margin: 0 auto;
}

.linkTxt {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.newradio {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    margin: 10px 0 0;
}

#problem_report .newradio {
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: 5px 3px 0;
}

.newradio input[type='radio'] 
, #problem_report .newradio input[type='radio'] {
    display: none !important;
}

.newradio label {
    font-weight: normal;
}

.newradio label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 10px 0 0;
    width: 18px;
    height: 18px;
    border-radius: 11px;
    border: 1px solid #c0c0c0;
    background-color: transparent;
}

#problem_report .newradio label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 3px;
    margin: 0 6px 0 0;
    width: 14px;
    height: 14px;
    border-radius: 11px;
    border: 1px solid #c0c0c0;
    background-color: transparent;
    vertical-align: text-top;
}

.newradio input[type=radio]:checked + label:before
, #problem_report .newradio input[type=radio]:checked + label:before {
    border: 1px solid var(--linkColor);
}

.newradio input[type=radio]:checked + label:after {
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 8px;
    left: 9px;
    content: " ";
    display: block;
    background: var(--linkColor);
}

#problem_report .newradio input[type=radio]:checked + label:after {
    border-radius: 11px;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 6px;
    left: 3px;
    content: " ";
    display: block;
    background: var(--linkColor);
}

#subHeaderMenu .nav>li>a {
    padding: 10px 12px;
}

.form_flexible_price section {
    display: flex;
    flex-flow: row wrap;
}

.form_flexible_price section>div {
    flex: 1;
    padding: 0.5rem;
}

.form_flexible_price input[type="radio"] {
    display: none;
}

.form_flexible_price input[type="radio"]:not(:disabled)~label {
    cursor: pointer;
}

.form_flexible_price input[type="radio"]:disabled~label {
    color: #bcc2bf;
    border-color: #bcc2bf;
    box-shadow: none;
    cursor: not-allowed;
}

.form_flexible_price label {
    height: 100%;
    display: block;
    background: transparent;
    border: 2px solid #f1b040;
    border-radius: 6px;
    padding: 10px 0px;
    margin-bottom: 1rem;
    text-align: center;
    /* box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5); */
    position: relative;
    cursor: pointer;
}

.form_flexible_price input[type="radio"]:checked+label {
    /* background: #f1b040;
    color: #ffffff; */
}

.form_flexible_price input[type="radio"]#control_05:checked+label {
    background: red;
    border-color: red;
}

.form_flexible_price p {
    font-weight: 500;
}

.flexible_price_btn {
    color: #ffffff;
    background-color: #a29c99;
    border: 2px solid #a29c99;
}

.flexible_price_btn:hover, .flexible_price_btn:focus {
    color: #ffffff;
    background-color: #aba8a6;
}

@media only screen and (max-width: 700px) {
    .form_flexible_price section {
        display: block;
    }
    .div_flexible_price {
        width: 45%;
        display: inline-block;
        padding: 5px !important;
    }
    .input_flexible_price input {
        width: calc(100% - 100px) !important;
    }
}

.link-topchart {
    color: #e24574;
    padding: 0 10px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 349px) {
    .mebSticker {
        width: 50px !important;
        height: 50px !important;
    }
}

@media only screen and (min-device-width: 350px) and (max-device-width: 767px) {
    .mebSticker {
        width: 70px !important;
        height: 70px !important;
    }
}

@media only screen and (min-device-width: 768px) {
    .mebSticker {
        width: 80px !important;
        height: 80px !important;
    }
}

.msg_pick_comment .mebSticker {
    width: 15% !important;
    height: 15% !important;
    min-height: 60px;
    min-width: 60px;
}

.row_conversation_list {
    border-bottom: 1px solid #CCC;
}

img.profile_pic {
    border-radius: 50%;
    width: 40px;
}

#cke_CK_Comment {
    border-bottom: 1px solid var(--lineColor) !important;
    border-top: 1px solid var(--lineColor) !important;
    border-left: 1px solid var(--lineColor) !important;
    border-right: 1px solid var(--lineColor) !important;
}

#cke_CK_Comment_General {
    border-bottom: 1px solid var(--lineColor) !important;
    border-top: 1px solid var(--lineColor) !important;
    border-left: 1px solid var(--lineColor) !important;
    border-right: 1px solid var(--lineColor) !important;
}

.cke_dialog {
    max-width: 100%;
}

.cke_dialog_tabs {
    overflow-y: auto;
    overflow-x: auto;
    width: 95% !important;
}

.cke_dialog_tabs::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.cke_dialog_tabs::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}

.cke_dialog_tabs::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
    background-color: rgba(107, 107, 107, 0.65);
}

#newCommentText {
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -o-user-select: text !important;
    user-select: text !important;
}

.current_vote_up {
    color: #50a500 !important;
}

.current_vote_down {
    color: #f26876 !important;
}

.thumbs_up_text {
    color: #666;
}

.thumbs_down_text {
    color: #666;
}

.icon_thumbs_up {
    cursor: pointer;
    color: #ccc;
}

.icon_thumbs_down {
    cursor: pointer;
    color: #ccc;
}

.fontAccept {
    font-family: 'Thonburi' !important;
}

.fontNotosans {
  font-family: 'NotoSans' !important;  
}

.headerDateDiv {
    margin-top: 30px;
    border-bottom: solid 1px #1fb49f;
    width: 20px;
    display: inline-block;
}

.headerDate {
    margin-top: -16px;
    margin-left: 40px;
}

.dropdown-select {
    padding: 0;
    margin: 20px 0px;
}

.dropdown-select-border {
    border: 2px solid rgba(166, 230, 224, 1);
    display: inline-block;
    text-align: left;
}

.dropdown-select-toggle {
    display: inline-block;
    text-decoration: none !important;
    padding: 13px 10px;
    text-align: left;
}

.dropdown-menu-button {
    color: #707070;
    margin-left: 10px;
    font-size: 20px !important;
    vertical-align: middle;
}

.dropdown-select-border>.dropdown-select-toggle>.dropdown-menu-button {
    color: rgba(166, 230, 224, 1);
    margin-left: 10px;
    font-size: 20px !important;
    vertical-align: middle;
}

.dropdown-menu-selcted {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

.dropdown-select:hover a {
    color: unset !important;
}

.read-mode-night .dropdown-menu-selcted, .read-mode-dark .dropdown-menu-selcted {
    color: #ccc!important;
}

.dropdown-select-menu-header {
    padding: 0;
    margin: 0px;
}

.dropdown-select-border-menu-header {
    display: inline-block;
    text-align: left;
}

.dropdown-select-toggle-menu-header {
    display: inline-block;
    text-decoration: none !important;
    padding: 0px 10px;
}

.dropdown-menu-button-menu-header {
    margin-left: 5px;
    font-size: 16px !important;
    vertical-align: middle;
    color: #555555;
}

.dropdown-menu-selcted-menu-header {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
    color: #555555;
}

.dropdown-menu-option {
    margin-left: -2px;
    min-width: calc(100% + 4px);
    border-radius: 0;
    padding: 0;
}

.img-circle-user {
    border-radius: 100%;
    border: 3px solid var(--lineColor);
    width: 42px;
    height: 42px;
}

.img-circle-user.pmImgProfile {
    border-radius: 100%;
    border: 1px solid var(--lineColor);
    width: 60px;
    height: 60px;
}

.img-circle-user.commentProfile {
    border-radius: 100%;
    border: 2px solid var(--lineColor);
    width: 42px;
    height: 42px;
}

.pm-img-div {
    margin: 10px 5px;
    float: left;
    margin-top: 20px;
}

.pm-detail-div {
    margin: 10px 5px;
    float: left;
    width: calc(100% - 70px);
    word-wrap: break-word;
    margin-left: 10px;
}

.is_read_username {
    height: 20px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: rgba(94, 94, 94, 1);
    text-align: left;
}

.is_read_message {
    height: 20px;
    overflow: hidden;
    max-width: calc(100% - 140px);
    font-size: 14px;
    font-weight: 300;
    color: rgba(94, 94, 94, 1);
    text-align: left;
}

.no_read_username {
    height: 20px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: rgba(17, 17, 17, 1);
    text-align: left;
}

.no_read_message {
    height: 20px;
    overflow: hidden;
    max-width: calc(100% - 140px);
    font-size: 14px;
    font-weight: 600;
    color: rgba(17, 17, 17, 1);
    text-align: left;
}

.btn-border-green {
    background-color: #ffffff;
    border: 1px solid #96dbd5;
    color: #12b8a8;
}

.btn-border-white {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.btn-border-green span {
    color: #12b8a8;
}

.btn-border-white span {
    color: #ffffff;
}

.arrow-up-box {
    position: absolute;
    top: -6px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-left: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    background: #ffffff;
    transform: rotate(135deg);
}

.activity-menu-dropdown {
    margin: 0 10px;
    padding: 10px 0;
    display: grid;
    border-bottom: solid #e5e5e5 1px;
}

.activity-menu-dropdown img {
    max-width: 100%;
    max-height: 100%;
}

.dropdown-menu.dropdown-menu-login>li>a {
    padding: 10px 17px;
}

.category_name_top_chart {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #333333;
}

.article_img_top_chart {
    width: 80px;
    float: left;
    position: relative;
}

.article_info_top_chart {
    padding: 5px;
    width: calc(100% - 80px);
    float: left;
    position: relative;
}

.main_col_top_chart {
    font-size: 12px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #333333;
}

.sub_col_top_chart {
    font-size: 12px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #808080;
}

.top_chart_table tr {
    vertical-align: sub;
}

.bgNewBox {
    background: #FFFFFF;
    /* box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.08); */
}

.bgNewBoxLight {
    background: #FFFFFF;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.08);
}

.date_topchart {
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #333333;
}

.headerTopChart span {
    font-family: 'NotoSans';
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.37;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
}

/* list css */

/* preorder css */

/* standard breakpoint */

.padding-left-0 {
    padding-left: 0;
}

.padding-left-5 {
    padding-left: 5px;
}

.padding-left-10 {
    padding-left: 10px;
}

.padding-left-15 {
    padding-left: 15px;
}

.padding-left-20 {
    padding-left: 20px;
}

.padding-right-0 {
    padding-right: 0;
}

.padding-right-5 {
    padding-right: 5px;
}

.padding-right-10 {
    padding-right: 10px;
}

.padding-right-15 {
    padding-right: 15px;
}

.padding-right-20 {
    padding-right: 20px;
}

.btn-action {
    height: 40px;
    padding: 6px 8px 8px;
}

.payslip_card {
    padding: 20px;
}

.cardWigthWriting {
    width: calc(20% - 8px);
    float:left; 
    padding: 7px; 
    margin-left: 4px;
    margin-right: 4px;
}

.cardAuthor {
    width: calc(33% - 20px);
    min-height: 185px; 
    display: inline-block;
    border: solid 1px #e1e1e1;
    border-radius: 10px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}
.authorLinkSocial {
    height: 75px;
}

@media screen and (min-width: 992px) {
    .blackFilter {
        display: none;
        background: #0d0d0d88;
        z-index: 1;
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .donate_see_more .blackFilter {
        display: block;
    }
    .donateAmtBox {
        margin: auto;
        background: white;
        border-radius: 25px;
        padding: 4px;
        width: 379px;
        height: 108px;
        text-align: right;
        margin-top: 53px;
        padding-right: 23px;
    }
    .donateAmtBox>span {
        font-size: 70px;
        color: #fbb040;
        font-weight: 500;
    }
    .campaignLogo {
        position: absolute;
        left: 50%;
        top: 12px;
        margin-left: -172px;
    }
    .campaignTimeDetail {
        text-align: right;
        padding: 3px;
        font-weight: 500;
        color: #fbb040;
        width: 379px;
        margin: 0px auto;
    }
    .overallDonate {
        min-width: 50%;
        margin: 0px auto;
    }
    .campaignTitle {
        font-family: 'NotoSans';
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        color: #ed4971;
    }
    .campaignDetail {
        font-size: 16px;
        text-align: center;
        width: 155px;
        margin: 0px auto;
        margin-bottom: 8px;
        margin-top: -5px;
    }
    .campaignSupporterLogo {
        text-align: center;
    }
    .lightSection {
        padding-left: 0;
        padding-right: 0;
        max-width: 980px;
        display: block;
        margin: 0 auto;
    }
    #div_list_articles {
        margin-top: 40px;
    }
    #listCover {
        height: 260px;
    }
    .coverImg {
        margin-left: 15px;
        float: right;
        height: 260px;
        width: 390px;
    }
    .listContent {
        width: calc(100% - 390px);
        height: 100%;
        padding: 20px;
        position: relative;
    }
    .listContent .listName {
        font-size: 30px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listDescription {
        font-size: 18px;
        height: 4.0em;
        overflow: hidden;
    }
    .listContent .listMenu {
        font-size: 16px;
        position: absolute;
        bottom: 10px;
    }
    /* article */
    .listArticleItem {
        height: 124px;
        margin-bottom: 20px;
    }
    .icn-1st-rank{
        width: 15px;
        height: 15px;
        margin-bottom: 3px;
    }
    .lnkImgTopWeek{
        width:65px;
        height:65px;
        border-radius:8px;
    }       
    .listArticleImageTopWeek{
        cursor:pointer;
        width:65px;
        height:65px;
        border-radius:8px;
    }
    .listVertArticleImageSmall {
        height: 180px;
        border-radius: 14px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageSmall img.listVertArticleImageSmall{
        border: 1px solid var(--lineColor);
    }
    .listVertArticleImageLarge {
        height: 184px;
        border-radius: 14px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageLarge img.listVertArticleImageLarge{
        border: 1px solid var(--lineColor);
    }
    .listVertArticleThumbnailSmall {
        width: 150px;
        height: 150px;
        border-radius: 14px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .listVertArticleThumbnailLarge {
        width: 184px;
        height: 184px;
        border-radius: 14px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .viewMoreVertArticle{
        margin-top:90px;
    }
    .lblIsEndOnThumb{
        background: var(--linkColor); 
        padding: 0px 8px 3px; 
        border-radius: 12px; 
        vertical-align: middle;
        position:absolute;
        top:10px;
        right:10px;
        z-index:10;
        font-size:12px;
        color:var(--textWhiteColor);
    }
    .listArticleThumbnail {
        width: 124px;
        height: 124px;
    }
    .listArticleThumbnailMd {
        width: 90px;
        height: 90px;
    }
    .listVertArticleNameSmall, .listVertArticleNameLarge {
        font-size: 16px;
        line-height: 1.5;
        color: var(--textOnCardDarkColor);
    }
    .listVertArticleSubCatBody .listVertArticleNameSmall, .listVertArticleSubCatBody .listVertArticleNameLarge {
        font-size: 14px;
    }
    .listVertArticleDescriptionSmall, .listVertArticleDescriptionLarge {
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleUpdateChapterSmall, .listVertArticleUpdateChapterLarge {
        height: 32px;
        margin-top: -5px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleStatsSmall, .listVertArticleStatsLarge {
        font-size: 12px;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatsSmall .glyphicon, .listVertArticleStatsLarge .glyphicon {
        font-size: 10px;
    }    
    .listVertArticleAuthorNameSmall, .listVertArticleAuthorNameLarge {        
        font-size: 14px;
        line-height: 1.5;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatus {
        background-color: transparent !important;
        color: var(--textOnCardLightColor) !important;
    }
    .listArticleName {
        font-size: 17px;
        font-weight: 500;
    }
    .listArticleDescription {
        font-size: 12px;
        color: #909090;
    }
    .listArticleUpdateChapter {
        height: 32px;
        margin-top: -5px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleStatsLarge .icnChapterAmt, .listVertArticleStatsSmall .icnChapterAmt{
        width:16px;
        height: 16px;
        margin-right:5px;
    }
    .listVertArticleStatsLarge .icnRatingAmt, .listVertArticleStatsSmall .icnRatingAmt{
        margin-top:-2px;
        width:12px;
        margin-right:5px;
    }
    .listVertArticleStatsLarge .icnBubbleCnt, .listVertArticleStatsSmall .icnBubbleCnt{
        width:12px;
    }
    .listVertArticleStatsLarge .txtChapterAmt, .listVertArticleStatsSmall .txtChapterAmt{
        font-size:12px;
    }
    .listArticleStats .glyphicon {
        font-size: 10px;
    }
    .listAuthorName {
        margin-bottom: 6px;
    }
    .listArticleItem.newListArticleItem.col-left {
        padding-left: 20px !important;
        height: 140px;
    }
    .listArticleItem.newListArticleItem.col-right {
        padding-right: 20px!important;
        height: 140px;
    }
    .listArticleItem.newListArticleItem .listArticleThumbnail{
        width: 140px;
        height: 140px;
    }
    .newListArticleImage {
        max-width: 140px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .listArticleItem.newListArticleItem .listArticleBody .listArticleStatus {
        background-color: #0000 !important;
        color: var(--textOnCardLightColor) !important;
    }
    .listArticleBody .zoneTag {
        height: 35px;
        margin-top: 5px;
    }
    .myListArticleInfo {
        padding: 0px 10px 0px;
        width: calc(100% - 154px);
        max-width: unset;
        min-width: unset;
    }
    .continueArticleInfo {
        min-width: unset;
        width: calc(100% - 90px);
    }
    .myListArticleInfo>hr {
        margin: 4px 0 !important;
    }
    .myListArticleInfoMd {
        width: calc(100% - 90px);
        padding: 12px 10px;
    }
    .myListArticleInfoMd>hr {
        margin: 8px 0 !important;
    }
    .listArticleStats .author {
        width: 50px;
    }
    .listArticleStats .view {
        width: 50px;
    }
    .listArticleStats .comment {
        width: 45px;
    }
    .listArticleStats .rating {
        width: 37px;
    }
    .listArticleStats .read {
        width: 60px;
    }
    .col-left {
        padding-left: 0 !important;
        padding-right: 10px !important;
    }
    .col-right {
        padding-right: 0 !important;
        padding-left: 10px !important;
    }
    /* preorder */
    .txt14sm12 {
        font-size: 14px !important;
    }
    .txt16sm14 {
        font-size: 16px;
    }
    .lg-img-center {
        display: block;
        margin: 0 auto;
    }
    .lg-width-5-percent {
        width: 5%;
    }
    .lg-width-10-percent {
        width: 10%;
    }
    .lg-width-15-percent {
        width: 15%;
    }
    .lg-width-20-percent {
        width: 20%;
    }
    .lg-width-25-percent {
        width: 25%;
    }
    .lg-width-30-percent {
        width: 30%;
    }
    .lg-width-35-percent {
        width: 35%;
    }
    .lg-width-40-percent {
        width: 40%;
    }
    .lg-width-45-percent {
        width: 45%;
    }
    .lg-width-50-percent {
        width: 50%;
    }
    .lg-width-55-percent {
        width: 55%;
    }
    .lg-width-60-percent {
        width: 60%;
    }
    .lg-width-65-percent {
        width: 65%;
    }
    .lg-width-70-percent {
        width: 70%;
    }
    .lg-width-75-percent {
        width: 75%;
    }
    .lg-width-80-percent {
        width: 80%;
    }
    .lg-width-85-percent {
        width: 85%;
    }
    .lg-width-90-percent {
        width: 90%;
    }
    .lg-width-95-percent {
        width: 95%;
    }
    .lg-width-100-percent {
        width: 100%;
    }
    .lg-show-flex {
        display: flex;
    }
    .lg-position-absolute {
        position: absolute;
    }
    .lg-position-relative {
        position: relative;
    }
    /* padding */
    .lg-padding-left-0 {
        padding-left: 0;
    }
    .lg-padding-left-5 {
        padding-left: 5px;
    }
    .lg-padding-left-10 {
        padding-left: 10px;
    }
    .lg-padding-left-15 {
        padding-left: 15px;
    }
    .lg-padding-left-20 {
        padding-left: 20px;
    }
    .lg-padding-right-0 {
        padding-right: 0;
    }
    .lg-padding-right-5 {
        padding-right: 5px;
    }
    .lg-padding-right-10 {
        padding-right: 10px;
    }
    .lg-padding-right-15 {
        padding-right: 15px;
    }
    .lg-padding-right-20 {
        padding-right: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .blackFilter {
        display: none;
        background: #0d0d0d88;
        z-index: 1;
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .donate_see_more .blackFilter {
        display: block;
    }
    .donateAmtBox {
        margin: auto;
        background: white;
        border-radius: 25px;
        padding: 4px;
        width: 379px;
        height: 108px;
        text-align: right;
        margin-top: 53px;
        padding-right: 23px;
    }
    .donateAmtBox>span {
        font-size: 70px;
        color: #fbb040;
        font-weight: 500;
    }
    .campaignLogo {
        position: absolute;
        left: 50%;
        top: 12px;
        margin-left: -172px;
    }
    .campaignTimeDetail {
        text-align: center;
        padding: 3px;
        padding-bottom: 9px;
        font-weight: 500;
        color: #fbb040;
        width: 379px;
        margin: 0px auto;
    }
    .overallDonate {
        min-width: 50%;
        margin: 0px auto;
    }
    .campaignTitle {
        font-family: 'NotoSans';
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        color: #ed4971;
    }
    .campaignDetail {
        font-size: 16px;
        text-align: center;
        width: 155px;
        margin: 0px auto;
        margin-bottom: 8px;
        margin-top: -5px;
    }
    .campaignSupporterLogo {
        text-align: center;
    }
    .header_label {
        font-size: 16px;
    }
    #logo_readawrite {
        width: 120px;
        margin-top: 10px;
    }
    .lightSection {
        padding-left: 0;
        padding-right: 0;
        display: block;
        margin: 0 auto;
    }
    #listCover {
        height: 162px;
    }
    .coverImg {
        margin-left: 15px;
        float: right;
        height: 162px;
        width: 243px;
    }
    .listContent {
        width: calc(100% - 213px);
        height: 100%;
        padding: 20px;
        position: relative;
    }
    .listContent .listName {
        font-size: 20px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listDescription {
        font-size: 14px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listMenu {
        font-size: 14px;
        position: absolute;
        bottom: 10px;
    }
    /* article */
    #div_list_articles {
        margin-top: 40px;
    }
    .listArticleItem {
        height: 110px;
        margin-bottom: 20px;
    }
    .listArticleThumbnail, .listArticleThumbnailMd {
        width: 110px;
        height: 110px;
    }
    .listArticleName {
        font-size: 14px;
        font-weight: 500;
        height: 39px;
        margin-bottom: 5px;
    }
    .listAuthorName{
        font-size: 13px;
    }
    .listArticleDescription {
        display: none;
    }
    .listArticleUpdateChapter {
        display: unset;
        height: 16px;
        margin: 3px 0 3px;
        font-size: 12px;
        color: #909090;
    }
    .listArticleStats {
        font-size: 12px;
    }
    .listArticleStats .glyphicon {
        font-size: 10px;
    }
    .newListArticleItem.col-left {
        padding-left: 20px !important;
    }
    .newListArticleItem.col-right {
        padding-right: 20px !important;
    }
    .newListArticleImage {
        width: 110px;
        display: inline-block;
        float: left;
        position: relative;
    }
    .myListArticleInfo {
        width: calc(100% - 110px);
        padding: 0px 10px;
        min-width: unset;
    }
    .continueArticleInfo {
        width: calc(100% - 90px);
        padding: 5px 10px;
    }
    .myListArticleInfoMd {
        width: calc(100% - 90px);
        padding: 12px 10px;
    }
    .myListArticleInfo>hr, .myListArticleInfoMd>hr {
        margin: 8px 0 !important;
    }
    .newListArticleItem .listArticleStatus {
        background-color: transparent !important;
    }
    .listArticleStats .author {
        width: 50px;
    }
    .listArticleStats .view {
        width: 50px;
    }
    .listArticleStats .comment {
        width: 45px;
    }
    .listArticleStats .rating {
        width: 37px;
    }
    .listArticleStats .read {
        width: 60px;
    }
    .listArticleItem.newListArticleItem .listArticleBody .listArticleStatus {
        background-color: #0000 !important;
        color: var(--textOnCardLightColor) !important;
    }
    .col-left {
        padding-left: 0 !important;
        padding-right: 10px !important;
    }
    .col-right {
        padding-right: 0 !important;
        padding-left: 10px !important;
    }
    .zoneTag{
        margin-top: 5px;
        height: 35px;
    }
    /* preorder */
    .txt14sm12 {
        font-size: 14px !important;
    }
    .txt16sm14 {
        font-size: 16px;
    }
    .md-img-center {
        display: block;
        margin: 0 auto;
    }
    .md-width-5-percent {
        width: 5%;
    }
    .md-width-10-percent {
        width: 10%;
    }
    .md-width-15-percent {
        width: 15%;
    }
    .md-width-20-percent {
        width: 20%;
    }
    .md-width-25-percent {
        width: 25%;
    }
    .md-width-30-percent {
        width: 30%;
    }
    .md-width-35-percent {
        width: 35%;
    }
    .md-width-40-percent {
        width: 40%;
    }
    .md-width-45-percent {
        width: 45%;
    }
    .md-width-50-percent {
        width: 50%;
    }
    .md-width-55-percent {
        width: 55%;
    }
    .md-width-60-percent {
        width: 60%;
    }
    .md-width-65-percent {
        width: 65%;
    }
    .md-width-70-percent {
        width: 70%;
    }
    .md-width-75-percent {
        width: 75%;
    }
    .md-width-80-percent {
        width: 80%;
    }
    .md-width-85-percent {
        width: 85%;
    }
    .md-width-90-percent {
        width: 90%;
    }
    .md-width-95-percent {
        width: 95%;
    }
    .md-width-100-percent {
        width: 100%;
    }
    .md-show-flex {
        display: flex;
    }
    .md-position-absolute {
        position: absolute;
    }
    .md-position-relative {
        position: relative;
    }
    /* padding */
    .md-padding-left-0 {
        padding-left: 0;
    }
    .md-padding-left-5 {
        padding-left: 5px;
    }
    .md-padding-left-10 {
        padding-left: 10px;
    }
    .md-padding-left-15 {
        padding-left: 15px;
    }
    .md-padding-left-20 {
        padding-left: 20px;
    }
    .md-padding-right-0 {
        padding-right: 0;
    }
    .md-padding-right-5 {
        padding-right: 5px;
    }
    .md-padding-right-10 {
        padding-right: 10px;
    }
    .md-padding-right-15 {
        padding-right: 15px;
    }
    .md-padding-right-20 {
        padding-right: 20px;
    }
}

@media screen and (min-width: 574px) and (max-width: 655px) {
    .txtCollabOnImg{
        font-size: 16px !important;
    }
    .txtMemCollabOnImg{
        font-size: 12px !important;
    }
}

@media screen and (min-width: 574px) and (max-width: 767px) {
    .blackFilter {
        display: block;
        background: #0d0d0d88;
        z-index: 1;
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .donateAmtBox {
        margin: auto;
        background: white;
        border-radius: 25px;
        padding: 4px;
        width: 379px;
        height: 108px;
        text-align: right;
        margin-top: 53px;
        padding-right: 23px;
    }
    .donateAmtBox>span {
        font-size: 70px;
        color: #fbb040;
        font-weight: 500;
    }
    .campaignLogo {
        position: absolute;
        left: 50%;
        top: 12px;
        margin-left: -172px;
    }
    .campaignTimeDetail {
        width: 100%;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 9px;
        font-weight: 500;
        color: #fbb040;
        margin: 0px auto;
    }
    .overallDonate {
        min-width: 50%;
        margin: 0px auto;
    }
    .campaignTitle {
        font-family: 'NotoSans';
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        color: #ed4971;
    }
    .campaignDetail {
        font-size: 16px;
        text-align: center;
        margin: 0px auto;
        margin-bottom: 8px;
        margin-top: -5px;
    }
    .campaignSupporterLogo {
        text-align: center;
    }
    .lightSection {
        padding-left: 0;
        padding-right: 0;
        display: block;
        margin: 0 auto;
    }
    #listCover {
        height: 142px;
    }
    .coverImg {
        margin-left: 15px;
        float: right;
        height: 142px;
        width: 213px;
    }
    .listContent {
        width: calc(100% - 213px);
        height: 100%;
        padding: 20px;
        position: relative;
    }
    .listContent .listName {
        font-size: 18px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listDescription {
        font-size: 14px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listMenu {
        font-size: 14px;
        position: absolute;
        bottom: 10px;
    }
    /* article */
    #div_list_articles {
        margin-top: 40px;
    }
    .listArticleItem {
        height: 90px;
        margin-bottom: 10px;
    }
    .listArticleThumbnail, .listArticleThumbnailMd {
        width: 90px;
        height: 90px;
    }
    .listArticleName {
        font-size: 16px;
        font-weight: 500;
    }
    .listArticleDescription {
        display: none;
    }
    .listArticleUpdateChapter {
        display: unset;
        height: 16px;
        margin: 1px 0 2px;
        font-size: 12px;
        color: #909090;
    }
    .listArticleStats .glyphicon {
        font-size: 10px;
    }
    .myListArticleInfo, .continueArticleInfo {
        width: calc(100% - 90px);
        padding: 5px 10px;
    }
    .myListArticleInfoMd {
        width: calc(100% - 90px);
        padding: 12px 10px;
    }
    .myListArticleInfo>hr, .myListArticleInfoMd>hr {
        margin: 7px 0 !important;
    }
    .listArticleStats .author {
        width: 150px;
    }
    .listArticleStats .view {
        width: 70px;
    }
    .listArticleStats .comment {
        width: 70px;
    }
    .listArticleStats .rating {
        width: 70px;
    }
    .listArticleStats .read {
        width: 80px;
    }
    .cardWigthWriting {
        width: calc(25% - 8px);
    }
    .col-left, .col-right {
        padding: 0;
    }
    /* preorder */
    .txt14sm12 {
        font-size: 12px !important;
    }
    .txt16sm14 {
        font-size: 14px;
    }
    .sm-img-center {
        display: block;
        margin: 0 auto;
    }
    .sm-width-5-percent {
        width: 5%;
    }
    .sm-width-10-percent {
        width: 10%;
    }
    .sm-width-15-percent {
        width: 15%;
    }
    .sm-width-20-percent {
        width: 20%;
    }
    .sm-width-25-percent {
        width: 25%;
    }
    .sm-width-30-percent {
        width: 30%;
    }
    .sm-width-35-percent {
        width: 35%;
    }
    .sm-width-40-percent {
        width: 40%;
    }
    .sm-width-45-percent {
        width: 45%;
    }
    .sm-width-50-percent {
        width: 50%;
    }
    .sm-width-55-percent {
        width: 55%;
    }
    .sm-width-60-percent {
        width: 60%;
    }
    .sm-width-65-percent {
        width: 65%;
    }
    .sm-width-70-percent {
        width: 70%;
    }
    .sm-width-75-percent {
        width: 75%;
    }
    .sm-width-80-percent {
        width: 80%;
    }
    .sm-width-85-percent {
        width: 85%;
    }
    .sm-width-90-percent {
        width: 90%;
    }
    .sm-width-95-percent {
        width: 95%;
    }
    .sm-width-100-percent {
        width: 100%;
    }
    /* padding */
    .sm-padding-left-0 {
        padding-left: 0;
    }
    .sm-padding-left-5 {
        padding-left: 5px;
    }
    .sm-padding-left-10 {
        padding-left: 10px;
    }
    .sm-padding-left-15 {
        padding-left: 15px;
    }
    .sm-padding-left-20 {
        padding-left: 20px;
    }
    .sm-padding-right-0 {
        padding-right: 0;
    }
    .sm-padding-right-5 {
        padding-right: 5px;
    }
    .sm-padding-right-10 {
        padding-right: 10px;
    }
    .sm-padding-right-15 {
        padding-right: 15px;
    }
    .sm-padding-right-20 {
        padding-right: 20px;
    }
    .btn-action {
        height: 36px;
    }
}

@media screen and (max-width: 574px) {
    .blackFilter {
        display: block;
        background: #0d0d0d88;
        z-index: 1;
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .donateAmtBox {
        margin: auto;
        background: white;
        border-radius: 25px;
        padding: 4px;
        width: 280px;
        height: 83px;
        text-align: right;
        margin-top: 41px;
        padding-right: 25px;
    }
    .donateAmtBox>span {
        font-size: 50px;
        color: #fbb040;
        font-weight: 500;
    }
    .campaignLogo {
        width: 270px;
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -135px;
    }
    .campaignTimeDetail {
        width: 100%;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 7px;
        font-weight: 500;
        color: #fbb040;
        margin: 0px auto;
    }
    .overallDonate {
        min-width: 100%;
        margin: 0px auto;
    }
    .campaignTitle {
        font-family: 'NotoSans';
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        color: #ed4971;
    }
    .campaignDetail {
        font-size: 16px;
        text-align: center;
        margin: 0px auto;
        margin-bottom: 8px;
        margin-top: -2px;
    }
    .campaignSupporterLogo {
        text-align: center;
    }
    #cover_img_container {
        overflow: hidden;
        margin: 0px auto;
    }
    .coverImg {
        width: 100%;
        margin: 0 auto;
        display: block;
        position: relative;
        z-index: 200;
    }
    .listContent {
        margin-top: -40px;
        padding: 50px 20px 20px;
        border-top: 1px solid lightgrey;
        border-bottom: 1px solid lightgrey;
        position: relative;
        margin-left: -15px;
        width: calc(100% + 25px);
        border-radius: 0;
        height: 200px;
    }
    .listContent .listName {
        font-size: 22px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listDescription {
        font-size: 14px;
        height: 2.8em;
        overflow: hidden;
    }
    .listContent .listMenu {
        font-size: 14px;
    }
    /* article */
    #div_list_articles {
        margin-top: 10px;
    }
    .listArticleItem {
        height: 90px;
        padding: 0;
        margin-bottom: 10px;
    }
    .listArticleThumbnail, .listArticleThumbnailMd {
        width: 90px;
        height: 90px;
    }
    .listArticleName {
        font-size: 16px;
        font-weight: 500;
    }
    .listArticleDescription {
        display: none;
    }
    .listArticleUpdateChapter {
        display: unset;
        height: 16px;
        margin: 1px 0 2px;
        font-size: 12px;
        color: #909090;
    }
    .listArticleStats .glyphicon {
        font-size: 10px;
    }
    .myListArticleInfo, .continueArticleInfo {
        width: calc(100% - 90px);
        padding: 5px 10px;
    }
    .myListArticleInfoMd {
        width: calc(100% - 90px);
        padding: 12px 10px;
    }
    .myListArticleInfo>hr, .myListArticleInfoMd>hr {
        margin: 7px 0 !important;
    }
    .listArticleStats .author {
        width: calc(100% - 160px);
    }
    .listArticleStats .view {
        width: 50px;
    }
    .listArticleStats .comment {
        width: 45px;
    }
    .listArticleStats .rating {
        width: 35px;
    }
    .listArticleStats .read {
        width: 60px;
    }
    .cardWigthWriting {
        width: calc(50% - 8px);
    }
    .indexSubHeader {
        font-size: 20px !important;
    }
    .indexSubHeaderMenu {
        font-size: 12px !important;
        margin-top: 3px !important;
    }
    .catHeader {
        font-size: 24px !important;
    }
    .catHeaderContainerBtnSetting {
        padding-top: 5px;
    }
    /* preorder */
    .txt14sm12 {
        font-size: 12px !important;
    }
    .sm-img-center {
        display: block;
        margin: 0 auto;
    }
    .sm-width-5-percent {
        width: 5%;
    }
    .sm-width-10-percent {
        width: 10%;
    }
    .sm-width-15-percent {
        width: 15%;
    }
    .sm-width-20-percent {
        width: 20%;
    }
    .sm-width-25-percent {
        width: 25%;
    }
    .sm-width-30-percent {
        width: 30%;
    }
    .sm-width-35-percent {
        width: 35%;
    }
    .sm-width-40-percent {
        width: 40%;
    }
    .sm-width-45-percent {
        width: 45%;
    }
    .sm-width-50-percent {
        width: 50%;
    }
    .sm-width-55-percent {
        width: 55%;
    }
    .sm-width-60-percent {
        width: 60%;
    }
    .sm-width-65-percent {
        width: 65%;
    }
    .sm-width-70-percent {
        width: 70%;
    }
    .sm-width-75-percent {
        width: 75%;
    }
    .sm-width-80-percent {
        width: 80%;
    }
    .sm-width-85-percent {
        width: 85%;
    }
    .sm-width-90-percent {
        width: 90%;
    }
    .sm-width-95-percent {
        width: 95%;
    }
    .sm-width-100-percent {
        width: 100%;
    }
    /* padding */
    .sm-padding-left-0 {
        padding-left: 0;
    }
    .sm-padding-left-5 {
        padding-left: 5px;
    }
    .sm-padding-left-10 {
        padding-left: 10px;
    }
    .sm-padding-left-15 {
        padding-left: 15px;
    }
    .sm-padding-left-20 {
        padding-left: 20px;
    }
    .sm-padding-right-0 {
        padding-right: 0;
    }
    .sm-padding-right-5 {
        padding-right: 5px;
    }
    .sm-padding-right-10 {
        padding-right: 10px;
    }
    .sm-padding-right-15 {
        padding-right: 15px;
    }
    .sm-padding-right-20 {
        padding-right: 20px;
    }
    .btn-action {
        height: 36px;
    }
    .payslip_card {
        padding: 10px;
    }
}

@media screen and (max-width: 360px) {
    .blackFilter {
        display: block;
        background: #0d0d0d88;
        z-index: 1;
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .donateAmtBox {
        margin: auto;
        background: white;
        border-radius: 25px;
        padding: 4px;
        width: 280px;
        height: 83px;
        text-align: right;
        margin-top: 41px;
        padding-right: 25px;
    }
    .donateAmtBox>span {
        font-size: 50px;
        color: #fbb040;
        font-weight: 500;
    }
    .campaignLogo {
        width: 270px;
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -135px;
    }
    .campaignTimeDetail {
        width: 100%;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 7px;
        font-weight: 500;
        color: #fbb040;
        margin: 0px auto;
    }
    .overallDonate {
        min-width: 100%;
        margin: 0px auto;
    }
    .campaignTitle {
        font-family: 'NotoSans';
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        color: #ed4971;
    }
    .campaignDetail {
        font-size: 13px;
        text-align: center;
        margin: 0px auto;
        margin-bottom: 8px;
        margin-top: -2px;
    }
    .campaignSupporterLogo {
        text-align: center;
    }
    #cover_img_container {
        overflow: hidden;
        margin: 0px auto;
    }
    .listArticleStats .author {
        width: calc(100% - 100px) !important;
    }
    #div_list_articles {
        margin-top: 10px;
    }
    .listItem .list_name {
        font-size: 14px !important;
    }
    .cardWigthWriting {
        width: calc(50% - 8px);
    }
}

.listVertArticleSmall{
    width: 150px !important;
    margin-right: 20px;
}

.listVertArticleLarge{
    width: 184px !important;
    margin-right: 20px;
}

.viewMoreVertArticle{
    margin-top:90px;
}

.listItem .list_name {
    font-size: 16px;
}

.listArticleStats, .listArticleDescription, .listDescription, .listArticleUpdateChapter {
    font-weight: 300;
}

.myListArticleInfo, .continueArticleInfo, .myListArticleInfoMd {
    margin-left: 0;
}

.list_thumbnail {
    height: 98%;
    width: 98%;
}

.indexSubHeader {
    font-size: 24px;
}

.indexSubHeaderMenu {
    font-size: 16px;
    margin-top: 15px;
}

.catHeader {
    font-size: 36px;
    font-family: 'NotoSans';
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.38;
    color: #656565;
}

.myListArticleInfo>hr, .myListArticleInfoMd>hr {
    margin: 5px 0;
}

.headerMenuPopupNoti {
    padding: 0px 5px;
    background-color: #f0f0f0;
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #555555;
    border-bottom: solid #e5e5e5 1px;
}

.indexSubHeader {
    font-family: 'NotoSans';
    font-size: 30px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.37;
    letter-spacing: normal;
    text-align: left;
    color: #635e65;
    border-bottom: solid 1px #d1d1d1;
    margin: 20px 0 5px;
}

.indexSubHeader * {
    font-family: 'NotoSans';
    color: #635e65;
    text-decoration: none;
}

.list-noti-pm {
    overflow-y: auto;
    max-height: 332px;
}

.gotoLink, .gotoLink * {
    font-family: Thonburi, Tahoma, sans-serif;
    color: #909090;
    font-size: 13px;
    font-weight: 300;
}

.gotoLink i {
    color: #a5a5a5;
    font-weight: 100;
    font-size: 10px;
}

.container {
    width: 100%;
}

#subHeaderMenu .sub_header_label a:hover, #subHeaderMenuSm .submenuMobile a:hover, #subHeaderMenu .sub_header_label a:focus, #subHeaderMenuSm .submenuMobile a:focus {
    background: unset !important;
    color: #d73c72 !important;
}

.tblAddress, .tblPaymentAccount {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    text-align: start;
    font-variant: normal;
    display: table;
}

.tblAddress input, textarea {
    font-size: 16px;
}

.tblAddress tr {
    height: 40px;
}

.tblAddress td {
    vertical-align: top;
    padding-bottom: 15px;
}

.btnSaveAddress {
    padding: 9px 17px;
}

.tblAddress td:first-child {
    padding-right: 10px;
}

.widthFullScreen {
    width: 100%;
    margin: 0;
    max-width: unset;
}

.widthMaxDesktop {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 50px;
}

.thbanks {
    display: inline-block;
    border-radius: 3px;
    padding: 0;
    margin-left: -3px;
    margin-right: -3px;
}

.thbanks:before {
    color: white;
    padding: 10px;
    font-size: 2em;
}

#tblPaymentAccount td {
    padding-bottom: 20px;
}

#tblPurchasePreorder td {
    padding: 5px 10px 5px 10px;
}

.payslipMoneyTransfer {
    color: #fa8254;
    text-decoration: underline;
}

.payslipPendingDelivery {
    color: #ed306b;
    text-decoration: underline;
}

.payslipCompleteDelivery {
    color: #12b8a8;
    text-decoration: underline;
}

.payslipFail {
    color: #ef1d1d;
    text-decoration: underline;
}

.tblPaymentAccount tr {
    height: 40px;
}

.tblPaymentAccount td:first-child {
    padding-right: 10px;
    width: 140px;
}

#tabPaymentAccount, #tabAddress {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    text-align: start;
    font-variant: normal;
}

.tblPaymentAccount input, textarea {
    font-size: 16px;
}

.boxPreOrderShadow {
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.08);
}

.maxWidthContainer {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

#tblNotificationSetting {
    border-collapse: separate;
    border-spacing: 0 10px;
}

#btnSubmitNotificationSetting {
    background-color: #52c1b2;
    color: white;
}

#btnSubmitNotificationSetting:hover {
    background-color: rgb(74, 174, 160);
}

.btnEventNoti {
    vertical-align: top !important;
    padding: 0px 6px !important;
    border-radius: 4px !important;
    background-color: #ed306b !important;
    font-size: 10px !important;
    text-align: center;
    color: #ffffff;
}

#btnNotificationSetting {
    width: 162px;
    height: 32px;
    border-radius: 16px;
    background-color: #ffffff;
    border: solid 1px #1fb49f;
    display: inline-block;
    cursor: pointer;
    margin-right: 5px;
}

#btnNotificationSetting:hover {
    background-color: #f0faf9;
}

#btnClearNotification {
    width: 123px;
    height: 32px;
    border-radius: 16px;
    background-color: #ffffff;
    border: solid 1px #b7b7b7;
    display: inline-block;
    cursor: pointer;
    margin-right: 5px;
}

#btnClearNotification:hover {
    background-color: #f0faf9;
}

/* .activity_center_div {
    border-left: solid 1px #1fb49f;
}

.headerLineDate {
    margin-top: 30px;
    border-bottom: solid 1px #1fb49f;
    width: 20px;
    display: inline-block;
} */

.activityDate {
    /*margin-top: -16px;
    margin-left: 40px;*/
    width: fit-content;
    height: 36px;
    margin: 20px auto 5px;
    padding: 8px 25px 7px 26px;
    border-radius: 18px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px var(--lineColor);
    background-color: var(--cardBgColor);
    color: var(--textOnCardDarkColor);
    font-size: 16px;
    line-height: 1.38;
}

.headerLineDateMobile {
    margin-top: -10px;
    border-bottom: solid 1px #bebebe;
    width: calc(100% - 115px);
}

.headbar_view_unpublished {
    background-color: #e34574;
    border-color: #e34574;
    color: #fff;
}

.headbar_view_unpublished a {
    color: #fff;
}

.columnChapter>img {
    max-width: 50%;
}

#articleContents *, #chapterContents * {
    max-width: 100%;
    transform: unset !important;
}

#articleContents blockquote, #chapterContents blockquote {
    font-size: unset !important;
}

@media screen and (max-width: 767px) {
    /* mobile */
    .hideTextMobile {
        display: none;
    }
    #btnNotificationSetting {
        width: 35px;
        height: 29px;
        padding: 0;
    }
    #btnClearNotification {
        width: 35px;
        height: 29px;
        padding: 0;
    }
    .headerDate {
        margin-left: 20px;
    }
    .noti-list-message:hover {
        background-color: transparent;
    }
    .custom-control input:checked + label:after {
        top: 4px;
    }
    .cardAuthor {
        margin-left: 0;
        margin-right: 0;
        min-height: 160px; 
    }
    .authorLinkSocial {
        height: 60px;
    }
}

.listSubPage{
    border-bottom: solid 1px var(--lineColor);
    width: 100%;
}

.listSubPageType{
    font-family: 'NotoSans-Medium' !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: var(--textOnCardDarkColor);
    display: inline-block !important;
    width: fit-content;
    margin-right: 40px;
    cursor: pointer;
}
.listSubPageType a{
    font-family: 'NotoSans-Medium' !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: var(--textOnCardDarkColor);
}

.listSubPageType.active{
    color: var(--linkColor);
    border-bottom: solid 4px var(--linkColor);
}

.listSubPageType.active a, .listSubPageType.active a:hover, .listSubPageType.active a:focus, .listSubPageType.active a:active{    
    color: var(--linkColor);
}

.listSubPageType a:hover, .listSubPageType a:focus, .listSubPageType a:active, .listSubPageType.active a:hover, .listSubPageType.active a:focus, .listSubPageType.active a:active{
    text-decoration: none;
}

#html_share_thumbnail{
    clear:both;
    overflow: hidden;
    width:1200px;/* 1x = 600px;*/
    height:630px;/* 1x = 315px;*/
    /*background: linear-gradient(#303030 273px, #525050 42px);*/ /* 1x */
    background: linear-gradient(#303030 546px,#525050 84px);
}

#imgThumbnail{
    width: 1014px/* 1x = 507px*/;
    height: 1068px/* 1x = 534px*/;
    float: right;
    border-radius: 521px; /* tis value is (508 + 534)/2 */
    /*border-bottom-left-radius: 508px 534px;/* 1x = 254px 267px */ /* not support in some device*/
    /*border-top-left-radius: 508px 534px;/* 1x = 254px 267px */ /* not support in some device*/
    margin-top: -220px; /* 1x = -110px;*/
    margin-right: -190px; /* 1x = -95px;*/
    display: block;
}

#imgThumbnail img{
    width: 1068px;/* 1x = 534px;*/
    height: 1068px;/* 1x = 534px;*/
    border-radius: 521px;
    /*border-bottom-left-radius: 508px 534px;/* 1x = 254px 267px */ /* not support in some device*/
    /*border-top-left-radius: 508px 534px;/* 1x = 254px 267px */ /* not support in some device*/
    margin-right: -54px;/* 1x = -27px;*/
}

#articleInfo {
    width: calc(100% - 826px);/* 1x = 413px*/
    height: 100%;
    position: relative;
}

#articleInfo *{
    font-family: 'NotoSans';
}

#authorInfoDiv{
    display: -webkit-box; 
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 52px;/* 1x = 26px;*/
    line-height: 1.5;
    color: #b9b9b9;
    height: 42px;/* 1x = 21px;*/
    padding-left: 58px;/* 1x = 29px;*/
    background-color: #303030 !important;
    text-align: left;
    font-size: 28px;/* 1x = 14px;*/
}

#articleName{
    word-break: break-word;
    font-family: 'NotoSans';
    font-size: 40px;/* 1x = 20px;*/
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: #ffffff;
    max-height: 302px;/* 1x = 151px;*/
    min-height: 60px;/* 1x = 30px;*/
    display: -webkit-box; 
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-left: 58px;/* 1x = 29px;*/
    max-width: 246px;/* 1x = 123px;*/
    float: left;
}

#logoRAW{
    height: 84px;/* 1x = 42px;*/
    padding: 20px 0px 22px;/* 1x = 11px 0px;*/
    background-color: #525050;
    bottom: 0px;
    position: absolute;
    text-align: left;
}

.yourname_value {
    font-style: italic;
}

#full-logo{
    margin-left: 35px;/* 1x = 12px;*/
    width: 299px;/* 1x = 116px;*/
    height: 43px;/* 1x = 20px;*/
}

#minimal-logo{
    margin-right: 30px;/* 1x = 20px;*/
}

.myPurchasedArticleImg {
    width: 144px;
}

.myPurchasedArticleInfo {
    width: calc(100% - 144px);
}

.commentContent p {
    margin: 0 0 2px;
}

.commentContent div.spoiler {
    margin-bottom: 0;
    font-size: 14px;
}

.commentContent div.spoiler div.spoiler-title {
    padding: 0;
}

.cartoonComment #ratingOnlyList, .borderCommentBox {
    border: 1px solid #c7c7c7;
}

#commentListBox>nav:last-child {
    margin-top: 20px;
}

#chapterCartoonContents canvas {
    display: block;
}

.divDoublePage canvas {
    display: inline-block !important;
    height: 100vh;
    width: unset;
}

.divDoublePage {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    position: relative;
}

.divDoublePage div>canvas:first-child {
    float: left;
}

#chapterCartoonContents {
    display: flex;
    flex-direction: column;
}

#mouseHoverPrev {
    cursor: url('../../images/cartoon_pagination_left.png'), auto;
    position: absolute;
    z-index: 20;
    left: 0;
}

#mouseHoverNext {
    cursor: url('../../images/cartoon_pagination_right.png'), auto;
    position: absolute;
    z-index: 20;
    right: 0;
}

.modal_read_option.in {
    text-align: center;
}

.modal_read_option.in:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.modal_read_option .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.btnCloseOnDiv {
    color: #373737;
    position: absolute;
    right: -10px;
    text-shadow: 0 1px 0 #fff;
    top: -10px;
    cursor: pointer;
}

#btn_suggest_next_chapter {
    bottom: 5px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    text-align: center;
    padding: 5px;
    color: white;
    z-index: 100;
}

div#modal_newsfeed_body{
    margin: 0px;
    padding: 0px;
    max-height: 95vh;
    max-width: calc(90vh * 0.6);
}
.newsfeedContent{
    padding: 8px 18px 18px;
}
.newsfeed_message{    
    font-family: Helvetica,Thonburi,Tahoma,sans-serif;
    font-size: 14px;
    line-height: 1.36;
}
.newsfeed_button{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0px;
    font-family: Helvetica,Thonburi,Tahoma,sans-serif;
}
.newsfeedBox{
    margin: auto; 
    border-radius: 17px; 
    /*max-height: 90vh; 
    max-width: calc(90vh * 0.6);*/
    margin-bottom: 40px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.newsfeedHeader{
    font-size: 22px;
    font-weight: bold;
    font-family: 'NotoSans'; 
    text-align: center; 
    line-height: 2;
}
.newsfeed_img > img{
    width: 100%; 
    border-radius: 17px 17px 0px 0px;
    object-fit: cover;
}

.pinkHeart {
    color: #ed306b;
}

.greyHeart {
    color: #d5d5d5;
}

.blackFilter>span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    font-size: 15px;
    transform: translateX(-50%) translateY(-50%);
}

/* .squareCheckedNew // can use without jquery bind click */

/* Create the checkmark/indicator */

.squareCheckedNew .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    border: 1px solid var(--lineColor);
    border-radius: 3px;
    margin: 0;
}

.squareCheckedNew .bigcheckmark
{
    width: 24px !important;
    height: 24px !important;
    border-color: #8d8d92 !important;
}

.squareCheckedNew .middlecheckmark
{
    width: 20px !important;
    height: 20px !important;
    border-color: #8d8d92 !important;
}

.squareCheckedNew .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.squareCheckedNew {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 20px auto;
    cursor: pointer;
    font-weight: unset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.squareCheckedNew input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.squareCheckedNew input[type=checkbox]:disabled~.checkmark {
    background: #c0c0c0;
    border: 2px solid #c0c0c0;
    cursor: default;
}

.squareCheckedNew input[type=checkbox]:disabled~.checkmark:after {
    display: none;
}

/* When the checkbox is checked */

.squareCheckedNew input:checked~.checkmark {
    background: #1fb49f;
    border: 2px solid #1fb49f;
}

/* Show the checkmark when checked */

.squareCheckedNew input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.squareCheckedNew .checkmark:after {
    content: '';
    width: 12px;
    height: 6px;
    position: absolute;
    top: 3px;
    border: 2px solid #ffffff;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
}

.squareCheckedNew .bigcheckmark:after{
    top: 5px !important;
    left: 3px !important;
}

.squareCheckedNew .middlecheckmark:after{
    left: 2px !important;
}

/* end .squareCheckedNew */

/* . circleCheckedNew  // can use without jquery bind click */

.circleCheckedNew .checkmark {
    width: 25px;
    height: 25px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    border: 2px solid var(--linkColor);
    border-radius: 50%;
    margin: 0;
}

.circleCheckedNew .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.circleCheckedNew {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 20px auto;
    cursor: pointer;
    font-weight: unset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.circleCheckedNew input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.circleCheckedNew input[type=checkbox]:disabled~.checkmark {
    background: #c0c0c0;
    border: 2px solid #c0c0c0;
    cursor: default;
}

.circleCheckedNew input[type=checkbox]:disabled~.checkmark:after {
    display: none;
}

/* When the checkbox is checked */

.circleCheckedNew input:checked~.checkmark {
    background: var(--linkColor);
    border: 2px solid var(--linkColor);
}

/* Show the checkmark when checked */

.circleCheckedNew input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.circleCheckedNew .checkmark:after {
    content: '';
    width: 12px;
    height: 6px;
    position: absolute;
    top: 7px;
    left: 5px;
    border: 2px solid #ffffff;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
}

/* end .circleCheckedNew */

/* . radioCheckedNew  // can use without jquery bind click */

.radioCheckedNew .checkmark {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 50%;
    margin: 0;
}

.radioCheckedNew .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radioCheckedNew {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 20px auto;
    cursor: pointer;
    font-weight: unset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radioCheckedNew input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radioCheckedNew input[type=checkbox]:disabled~.checkmark {
    background: #c0c0c0;
    border: 2px solid #c0c0c0;
    cursor: default;
}

.radioCheckedNew input[type=checkbox]:disabled~.checkmark:after {
    display: none;
}

/* When the checkbox is checked */

.radioCheckedNew input:checked~* {
    color: var(--linkColor);
}

.radioCheckedNew input:checked~.checkmark {
    background: var(--linkColor);
    border: 1px solid var(--linkColor);
}

/* Show the checkmark when checked */

.radioCheckedNew input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.radioCheckedNew .checkmark:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: transparent;
}

/* end .radioCheckedNew */

.selector {
    border: 0;
    cursor: pointer;
}

.selector .text_category, .selector .text_style {
    color: var(--linkColor);
}

.selector.disabled .text_category, .selector.disabled .text_style {
    color: #bcbcbc;
}

.selector .icon, .selector .text_selected {
    color: var(--textOnCardDarkColor);
}

.selector.disabled {
    cursor: default;
}

ins#google_pedestal_container {
    display: none;
}

#allArticlesItem li>a, #allArticlesItem li>*, #searchBar>ul>li>a, #searchBar>ul>li>* {
    border: 0;
    color: #909090;
    background: transparent;
}

#allArticlesItem li:hover>a, #allArticlesItem li:hover>*, #searchBar>ul>li:hover>a, #searchBar>ul>li:hover>* {
    color: #303030;
    text-decoration-line: underline;
}

#allArticlesItem li.active>a, #allArticlesItem li.active>*, #searchBar>ul>li.active>a, #searchBar>ul>li.active>* {
    border-bottom: solid 5px #3f7267;
    color: #3f7267 !important;
    text-decoration: none;
}

/* for sticker tab */

.cke_dialog_tabs {
    height: 35px !important;
}

.topicCat10:before, .topicCat16:before, .topicCat34:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 22px;
    border-radius: 5px 0 0 0;
}

.bgCat10, .bgCat16, .bgCat34, .bgCat10 *, .bgCat16 *, .bgCat34 * {
    color: #ffffff;
}

.bgCat10 .category_menu, .bgCat16 .category_menu, .bgCat34 .category_menu, .bgCat10 .category_menu *, .bgCat16 .category_menu *, .bgCat34 .category_menu * {
    font-weight: 500;
    color: #ffffff;
    opacity: 0.6;
}

.bgCat10 .category_menu.selected, .bgCat16 .category_menu.selected, .bgCat34 .category_menu.selected, .bgCat10 .category_menu.selected *, .bgCat16 .category_menu.selected *, .bgCat34 .category_menu.selected * {
    opacity: 1;
}

.bgCat10 .category_menu.selected>a, .bgCat16 .category_menu.selected>a, .bgCat34 .category_menu.selected>a {
    border-bottom: solid 3px #ffffff;
    text-decoration: none;
}

.topicCat10:before {
    background-color: #443e6d;
}

.topicCat10 .textCategory * {
    color: #443e6d;
}

.bgCat10 {
    background-color: #443e6d;
}

.read-mode-dark .bgCat10, .read-mode-dark .topicCat10:before {
    background-color: #2b2b2b;
}

.read-mode-dark .topicCat10 .textCategory * {
    color: #2b2b2b;
}

.topicCat16:before {
    background-color: #912b69;
}

.topicCat16 .textCategory * {
    color: #912b69;
}

.bgCat16 {
    background-color: #912b69;
}

.read-mode-dark .bgCat16, .read-mode-dark .topicCat16:before {
    background-color: #8c8c8c;
}

.read-mode-dark .topicCat16 .textCategory * {
    color: #8c8c8c;
}

.topicCat34:before {
    background-color: #d67a74;
}

.topicCat34 .textCategory * {
    color: #d67a74;
}

.bgCat34 {
    background-color: #d67a74;
}

.read-mode-dark .bgCat34, .read-mode-dark .topicCat34:before {
    background-color: #b3b3b3;
}

.read-mode-dark .topicCat34 .textCategory * {
    color: #b3b3b3;
}

#headerMenu * {
    font-family: 'NotoSans';
    font-weight: bold;
}

.header_no_preview, .header_no_preview * {
    font-family: 'NotoSans';
}

#profileMenu, #profileMenu * {
    font-family: Thonburi, Tahoma, sans-serif;
    font-weight: 300 !important;
}

.dropdown-menu * {
    font-family: Thonburi, Tahoma, sans-serif !important;
    font-weight: 300 !important;
}

.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

.fa {
    font-family: FontAwesome !important;
}

hr {
    border-color: #E6E6E6;
}

.txtEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab1space {
    margin-left: 32px;
    width: calc(100% - 32px);
}

.maxWidth200 {
    max-width: 200px;
}

.articleItemCardNew21 {
    font-size: 14px;
}

.articleItemCardNew21.listArticleItem {
    height: unset;
    border-radius: 15px;
    position: relative;
    display: inline-flex;
    /* add border transparent cause of when list active have border: 1px solid var(--linkColor) and layout is crash (others no border)*/
    border: 1px solid transparent;
}
.articleItemCardNew21 .listArticleImage {
    max-width: 140px;
    width: 140px;
    height: 140px;
}
.articleItemCardNew21 .myListArticleInfo, .articleItemCardNew21 .continueArticleInfo {
    min-width: unset;
    width: calc(100% - 140px);
    padding: 0 0 0 15px;
    overflow: hidden;
}
.articleItemCardNew21 .listArticleName {
    font-size: 16px;
    color: #000000;
    padding-right: 40px;
    margin: 0 0 15px; 
    word-break: break-all;
}
.articleItemCardNew21 .listArticleUpdateChapter {
    height: unset;
    margin: 3px 0;
}
.articleItemCardNew21 .listArticleUpdateChapter *, .articleItemCardNew21 .listArticleStats *, .articleItemCardNew21 .listDetail * {
    font-weight: 300;
    color: var(--textLightColor) !important;
}
.articleItemCardNew21 .btnContinueRead {
    background: var(--linkColor);
    border: 1px solid var(--linkColor);
    color: #ffffff !important;
    font-size: 16px;
    padding: 6px 20px;
    border-radius: 17px;
    text-decoration: none !important;
}
.articleItemCardNew21 .listArticleThumbnail {
    width: 100%;
    height: unset;
    border-radius: 8px;
    background-color: #e6e6e6;
}
.articleItemCardNew21 .listArticleStats .view,
.articleItemCardNew21 .listArticleStats .comment,
.articleItemCardNew21 .listArticleStats .rating,
.articleItemCardNew21 .listArticleStats .read,
.articleItemCardNew21 .listArticleStats .amount_chapter {
    min-width: 35px;
    width: unset;
}

.dropdown-menu {
    /* overflow: hidden; */
    border-radius: 10px;
    font-size: 16px;
    border: 0;
}

.dropdown-menu>li:first-child>a {
    padding-top: 10px;
    border-radius: 10px 10px 0 0; 
}

.dropdown-menu>li:last-child>a {
    padding-bottom: 10px;
    border-radius: 0 0 10px 10px;
}

.divPageList {
    min-height: 45px;
}

.cardNew21 {
    width: 50%;
    display: inline-block;
}

.cardNew21:nth-child(even) {
    padding-left: 0;
    padding-right: 10px;
}

.cardNew21:nth-child(odd) {
    padding-left: 10px;
    padding-right: 0;
}

.cardNew21 .continueArticleChapter > div + div, .cardNew21 .listDetail > div + div {
    padding-left: 10px;
}

.menu-item {
    position: absolute;
    right: 10px;
    z-index: 1;
}

.menu-item img {
    width: 30px;
}

.vertical .cardNew21 {
    min-width: 120px;
    width: 20%;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: text-top;
}

.vertical .articleItemCardNew21 .listArticleImage {
    max-width: 100%;
    width: 100%;
    height: unset;
}

.vertical .articleItemCardNew21 .listArticleThumbnail {
    width: 100%;
}

.vertical .articleItemCardNew21 .myListArticleInfo, .vertical .articleItemCardNew21 .continueArticleInfo {
    width: 100%;
    min-width: unset;
    padding: 5px 0;
}

.vertical .articleItemCardNew21 .listArticleName {
    padding-right: 0;
}

.vertical .cardNew21 .btnContinueRead, .vertical .cardNew21 .listArticleUpdateChapter {
    display: none;
}

.vertical .menu-item {
    right: 15px;
    top: 15px;
    background-color: var(--cardBgColor);
    border-radius: 50%;
}

.vertical .listAuthorName {
    font-size: 16px;
}

.vertical .listArticleStats {
    font-size: 12px;
}

.continueArticleChapter > div + div, .listDetail > div + div {
    padding-left: 10px;
}

.iconOnlyMe {
    vertical-align: middle;
    background-image: var(--iconOnlyMe);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.iconPublic {
    vertical-align: middle;
    background-image: var(--iconPublic);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.listVertArticleSubCat{
    width: 116px !important;
    display: inline;        
    --remainSize: calc(100% - 928px);
    --marginR: calc(var(--remainSize) / 7);
    margin-right: var(--marginR);
}
.listVertArticleSubCatImage{
    width: 116px;
    height: 116px;
}
.listVertArticleSubCatImage img{
    width: 116px;
    height: 116px;
    border: 1px solid var(--lineColor);
    border-radius: 8px;
}
.listVertArticleSubCatLarge{
    width: 184px !important;
    display: inline;
    margin-right: 20px;
}
.listVertArticleSubCatImageLarge{
    width: 184px;
    height: 184px;
}
.listVertArticleSubCatImageLarge img{
    width: 184px;
    height: 184px;
    border: 1px solid var(--lineColor);
    border-radius: 8px;
}
.password-strength-bar {
    position: relative;
    height: 18px;
    display: inherit;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 2px;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
    font-size: 12px;
    color: #fff;
    text-align: center;
}

.password-strength-bar .password-strength-bar-meter {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    transition: width .3s linear;
}

/*----- css for popup insert sticker, images in ckeditor ------*/
.cke_dialog_container table.cke_dialog.cke_browser_webkit, 
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body{
    border-radius: 17px;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body .cke_dialog_title{
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    text-align: center;
    background-color: transparent;
    color: var(--textOnCardDarkColor);
    font-family: 'NotoSans-medium';
    font-size: 18px;
    border-bottom: none;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body .cke_dialog_close_button{
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body .cke_dialog_tabs{
    border: none;
    height: auto !important;
    margin-top: 0;
    overflow-y: hidden;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body .cke_dialog_tabs a.cke_dialog_tab{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    font-size: 14px;
    font-family: 'NotoSans-medium';
}

.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body .cke_dialog_tabs a.cke_dialog_tab.cke_dialog_tab_selected{
    border-bottom: 3px solid var(--linkColor);
    color: var(--linkColor);
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body .cke_dialog_contents {
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    background-color: transparent;
    border-top: none;
}
.cke_dialog_container .cke_dialog_contents .cke_dialog_contents_body{
    padding-top: 20px;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body tr .cke_dialog_footer{
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    background-color: transparent;
    border: none;
    text-align: center;
    padding-bottom: 10px;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body tr .cke_dialog_footer .cke_dialog_ui_button.cke_dialog_ui_button_cancel{
    border-radius: 21px;
    font-size: 15px;
    padding: 8px;
    min-width: 150px;
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body tr .cke_dialog_footer .cke_dialog_ui_button.cke_dialog_ui_button_ok{
    border-radius: 21px;
    font-size: 15px;
    padding: 8px;
    min-width: 150px;
    color: var(--textWhiteColor);
    background-color: var(--linkColor);
    border-color: var(--linkColor);
}
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body tr .cke_dialog_footer .cke_dialog_ui_button.cke_dialog_ui_button_cancel span,
.cke_dialog_container table.cke_dialog.cke_browser_webkit .cke_dialog_body tr .cke_dialog_footer .cke_dialog_ui_button.cke_dialog_ui_button_ok span{
    font-size: 15px;
    font-family: Thonburi,Tahoma,sans-serif;
    font-weight: normal;
}

.img-icon-write, .img-icon-reading, .img-icon-my-page, .img-icon-profile-setting {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 30px 30px !important;
}

.img-icon-write {
    background-image: var(--iconProfileWriting);
}

.img-icon-reading {
    background-image: var(--iconProfileReading);
}

.img-icon-my-page {
    background-image: var(--iconProfileMyPage);
}

.img-icon-profile-setting {
    background-image: var(--iconProfileSetting);
}

.img-icon-up, .img-icon-down {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 8px !important;
}

.img-icon-up {
    background-image: var(--iconProfileUp);
}

.img-icon-down {
    background-image: var(--iconProfileDown);
}

.datetimepicker-days > .table-condensed .day.old,
.datetimepicker-days > .table-condensed .day.new {
    color: var(--textLightColor) !important;
}

/* style sheet ที่ไม่กำหนดการแสดงผลตามขนาดจอ ให้เขียนก่อนบรรทัดนี้ */

@media screen and (min-width: 1280px){
    .icn-1st-rank{
        width: 15px;
        height: 15px;
        margin-bottom: 3px;
    }
    .lnkImgTopWeek{
        width:65px;
        height:65px;
        border-radius:8px;
    }   
    .listArticleImageTopWeek{
        cursor:pointer;
        width:65px;
        height:65px;
        border-radius:8px;
    }
    .listVertArticleImageSmall {
        height: 150px;
        border-radius: 14px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageSmall img.listVertArticleImageSmall {
        border: 1px solid var(--lineColor);
    }
    .listVertArticleImageLarge {
        height: 184px;
        border-radius: 14px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageLarge img.listVertArticleImageLarge{
        border: 1px solid var(--lineColor);
    }
    .listVertArticleThumbnailSmall {
        width: 150px;
        height: 150px;
        border-radius: 14px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .listVertArticleThumbnailLarge {
        width: 184px;
        height: 184px;
        border-radius: 14px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .listVertArticleNameSmall, .listVertArticleNameLarge {
        font-size: 16px;
        line-height: 1.5;
        color: var(--textOnCardDarkColor);
    }
    .listVertArticleSubCatBody .listVertArticleNameSmall, .listVertArticleSubCatBody .listVertArticleNameLarge {
        font-size: 14px;
    }
    .listVertArticleDescriptionSmall, .listVertArticleDescriptionLarge {
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleUpdateChapterSmall, .listVertArticleUpdateChapterLarge {
        height: 32px;
        margin-top: -5px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleStatsSmall, .listVertArticleStatsLarge {
        font-size: 12px;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatsSmall .glyphicon, .listVertArticleStatsLarge .glyphicon {
        font-size: 10px;
    }    
    .listVertArticleAuthorNameSmall, .listVertArticleAuthorNameLarge {        
        font-size: 14px;
        line-height: 1.5;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatus {
        background-color: transparent !important;
        color: var(--textOnCardLightColor) !important;
    }
    .listVertArticleStatsLarge .icnChapterAmt, .listVertArticleStatsSmall .icnChapterAmt{
        width:16px;
        height: 16px;
        margin-right:5px;
    }
    .listVertArticleStatsLarge .icnRatingAmt, .listVertArticleStatsSmall .icnRatingAmt{
        margin-top:-2px;
        width:12px;
        margin-right:5px;
    }
    .listVertArticleStatsLarge .icnBubbleCnt, .listVertArticleStatsSmall .icnBubbleCnt{
        width:12px;
    }
    .listVertArticleStatsLarge .txtChapterAmt, .listVertArticleStatsSmall .txtChapterAmt{
        font-size:12px;
    }   
    .viewMoreVertArticle{
        margin-top:90px;
    }
    .lblIsEndOnThumb{
        background: var(--linkColor); 
        padding: 0px 8px 3px; 
        border-radius: 12px; 
        vertical-align: middle;
        position:absolute;
        top:10px;
        right:10px;
        z-index:10;
        font-size:12px;
        color:var(--textWhiteColor);
    }

    .indexSubHeader{
        margin-top: 50px;
    }

    .newListArticleItem {
        margin-bottom:30px;
        height:140px;
    }
    
    .newListArticleImage{
        max-width: 140px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .newListArticleImage .listArticleThumbnail {
        border-radius: 8px;
        width: 140px;
        height: 140px;
    }

    .listArticleBody .myListArticleInfo{
        display: inline-grid;
        width: calc(100% - 154px);
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .listArticleBody .listArticleName{
        margin: 0;
        word-break: break-word;
        font-size: 16px;
        line-height: 1.5;
        max-height: 52px;
    }

    .listArticleBody .listAuthorName{
        font-size: 14px;
        line-height: 1.36;
        font-weight: 300; 
        color: var(--textOnCardLightColor);
        margin-top: 6px;
    }
    .listArticleBody .listAuthorName .fas.fa-user-alt{
        font-size: 14px;
        color:var(--textOnCardLightColor);
    }
    .listArticleBody .listArticleStats {
        font-size: 14px;
        line-height: 1.36;
        margin-top: 2px;
        color: var(--textOnCardLightColor);
    }
    .listArticleBody .listArticleStatus {
        background-color: transparent !important;
        color: var(--textOnCardLightColor) !important;
        word-break: break-all;
        vertical-align: top;
    }
    .listArticleBody .zoneTag{
        height: 35px;
        margin-top: 10px;
    }
}

@media screen and (max-width: 1279px) and (min-width: 992px){
    .newListArticleImage .listArticleThumbnail {
        border-radius:8px;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px){
    .header-container {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    .widthMaxDesktop {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    .articleItemCardNew21 {
        font-size: 13px;
    }
    .articleItemCardNew21 .listArticleImage {
        max-width: 100px;
        width: 100px;
        height: 100px;
    }
    .articleItemCardNew21 .myListArticleInfo, .articleItemCardNew21 .continueArticleInfo {
        min-width: unset;
        width: calc(100% - 100px);
        padding: 0 0 0 10px;
    }
    .articleItemCardNew21 .listArticleName {
        font-size: 15px;
        margin: 0 0 10px; 
        height: 1.4em;
    }
    .articleItemCardNew21 .myListArticleInfo .txtSize16, .articleItemCardNew21 .continueArticleInfo .txtSize16 {
        font-size: 15px;
    }
    .articleItemCardNew21 .listArticleUpdateChapter {
        margin: 0px;
    }
    .articleItemCardNew21 .btnContinueRead {
        font-size: 15px;
        padding: 4px 10px;
    }
    .articleItemCardNew21 .listArticleStats .view,
    .articleItemCardNew21 .listArticleStats .comment,
    .articleItemCardNew21 .listArticleStats .rating,
    .articleItemCardNew21 .listArticleStats .read,
    .articleItemCardNew21 .listArticleStats .amount_chapter {
        min-width: 30px;
    }
    .menu-item img {
        width: 25px;
    }

    .vertical .cardNew21 {
        min-width: 120px;
        width: 25%;
        padding-left: 5px;
        padding-right: 5px;
    }

    .vertical .articleItemCardNew21 .listArticleImage {
        max-width: 100%;
        width: 100%;
        height: unset;
    }
    
    .newListArticleImage .listArticleThumbnail {
        border-radius:8px;
    }
}


/* desktop >= 768 */

@media screen and (min-width: 768px) {
    .icn-1st-rank{
        width: 15px;
        height: 15px;
        margin-bottom: 3px;
    }   
    .lnkImgTopWeek{
        width:65px;
        height:65px;
        border-radius:8px;
    }   
    .listArticleImageTopWeek{
        cursor:pointer;
        width:65px;
        height:65px;
        border-radius:8px;
        border: 1px solid var(--lineColor);
    }
    .listVertArticleImageSmall {
        height: 150px;
        border-radius: 14px;
        display: block;
        clear: both;
        position: relative;
    }
    .icnArticleSpecies{
        width: 14px;
    }
    .listVertArticleImageSmall img.listVertArticleImageSmall{
        border: 1px solid var(--lineColor);
    }
    .listVertArticleImageLarge {
        height: 184px;
        border-radius: 14px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageLarge img.listVertArticleImageLarge{
        border: 1px solid var(--lineColor);
    }
    .listVertArticleThumbnailSmall {
        width: 150px;
        height: 150px;
        border-radius: 14px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .listVertArticleThumbnailLarge {
        width: 184px;
        height: 184px;
        border-radius: 14px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .listVertArticleNameSmall, .listVertArticleNameLarge {
        font-size: 16px;
        line-height: 1.5;
        color: var(--textOnCardDarkColor);
    }
    .listVertArticleSubCatBody .listVertArticleNameSmall, .listVertArticleSubCatBody .listVertArticleNameLarge {
        font-size: 14px;
    }
    .listVertArticleDescriptionSmall, .listVertArticleDescriptionLarge {
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleUpdateChapterSmall, .listVertArticleUpdateChapterLarge {
        height: 32px;
        margin-top: -5px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #909090;
    }
    .listVertArticleStatsSmall, .listVertArticleStatsLarge {
        font-size: 12px;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatsSmall .glyphicon, .listVertArticleStatsLarge .glyphicon {
        font-size: 10px;
    }    
    .listVertArticleAuthorNameSmall, .listVertArticleAuthorNameLarge {        
        font-size: 14px;
        line-height: 1.5;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatus {
        background-color: transparent !important;
        color: var(--textOnCardLightColor) !important;
    }
    .listVertArticleStatsLarge .icnChapterAmt, .listVertArticleStatsSmall .icnChapterAmt{
        width:16px;
        height: 16px;
        margin-right:5px;
    }
    .listVertArticleStatsLarge .icnRatingAmt, .listVertArticleStatsSmall .icnRatingAmt{
        margin-top:-2px;
        width:12px;
        margin-right:5px;
    } 
    .listVertArticleStatsLarge .icnBubbleCnt, .listVertArticleStatsSmall .icnBubbleCnt{
        width:12px;
    } 
    .listVertArticleStatsLarge .txtChapterAmt, .listVertArticleStatsSmall .txtChapterAmt{
        font-size:12px;
    }
    
    .viewMoreVertArticle{
        margin-top:90px;
    }
    .lblIsEndOnThumb{
        background: var(--linkColor); 
        padding: 0px 8px 3px; 
        border-radius: 12px; 
        vertical-align: middle;
        position:absolute;
        top:10px;
        right:10px;
        z-index:10;
        font-size:12px;
        color:var(--textWhiteColor);
    }
    
    .boxSpaceRim {
        padding-left: 10px;
        padding-right: 10px;
    }
    .outerBoxSpaceRim {
        margin-left: -10px !important;
        width: calc(100% + 20px) !important;
    }
    .borderLeftDonator {
        border-left: 1px solid lightgray;
    }
    .containDonatorTable {
        display: flex;
    }
    .lblCategoryName {
        margin-top: 30px;
        margin-left: 36px;
        padding: 5px 15px;
        border-radius: 15px;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: normal;
        color: #ffffff;
    }
    .lblCategoryName.cat10 {
        background-color: #443e6d;
    }
    .lblCategoryName.cat16 {
        background-color: #912b69;
    }
    .lblCategoryName.cat34 {
        background-color: #d67a74;
    }
    .lblUpdateDate {
        margin-right: 40px;
        margin-top: 26px;
        font-size: 16px;
        line-height: 1.5;
        color: #909090;
    }
    .titleTopic {
        font-size: 30px;
        line-height: 45px;
        word-break: break-word;
        color: #303030;
        font-weight: 500;
        margin-top: 10px;
        margin-left: 64px;
    }
    .authorTopic {
        color: #19a797;
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        margin-left: 64px;
    }
    #articleContent {
        padding-left: 64px;
        padding-right: 45px;
    }
    #bottomTopicContent {
        padding-left: 64px;
    }
    #categoryTagElement {
        margin-bottom: 26px;
    }
    #imgFavor {
        margin-right: 5px;
        width: 18px;
    }
    #imgView {
        margin-right: 5px;
        width: 21px;
    }
    #imgComment {
        margin-right: 5px;
        width: 18px;
    }
    #favoriteCount, #viewCount, #commentCount {
        font-size: 16px;
    }
    #boxRelatedTopic {
        margin-top: 40px;
        margin-bottom: 30px;
        width: 600px;
        padding: 20px 30px;
        background-color: #ffedeb;
    }
    #boxReport {
        top: 98px;
        right: 40px;
        color: #d7d7d7;
    }
    #txtReport {
        font-size: 16px;
    }
    #zoneShare {
        margin-right: 40px;
        display: block;
        width: 30%;
        float: right;
        position: relative;
        text-align: right;
    }
    #boxLoveAndShelf {
        padding-top: 40px;
    }
    #boxAddShelf {
        display: block;
        float: left;
    }
    #boxAddShelf>span:first-child {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        padding-top: 8px;
    }
    #boxFavorite {
        display: block;
        margin-right: 38px;
        text-align: center;
        cursor: pointer;
        float: left;
    }
    #txtGiveRating {
        display: block;
        font-size: 16px;
        font-weight: 300;
        color: #909090;
        margin-top: 10px;
    }
    #txtAddShelf {
        display: block;
        color: #909090;
        margin-top: 10px;
        font-size: 16px;
        font-weight: 300;
    }
    #headerMenu .navbar-nav>li>a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .newsfeed_img > img {
        width: 450px;
        height: 450px;
    }
    #modal_newsfeed .newsfeedContent{
        max-height: calc(95vh - 452px);
        overflow-y: auto;
    }
}

@media screen and (max-width: 767px){    
    .navbar-xs {
        box-shadow: none;
    }
    .sub-head-menu * {
        font-family: 'NotoSans';
        font-weight: bold;
    }
    .sub-head-menu a.menuSelected {
        text-decoration: underline;
    }
    .sub-head-menu > li > a{
        padding-bottom: 0px;
    }
    .smDisabledSwiper .swiper-wrapper {
        transform: translate3d(0px, 0, 0) !important;
    }
    .smDisabledSwiper > .swiper-button-prev, .smDisabledSwiper > .swiper-button-next{
        display: none !important;
    }   
    .smlistVerticalLarge .listVertArticleSmall, .listVertArticleLarge{
        width: 110px !important;
    }
    .smlistVerticalLarge .listVertArticleImageSmall, .listVertArticleImageLarge{
        height: 110px;
    }
    .swiper-slide.listVertArticleLarge:nth-child(4),
    .swiper-slide.listVertArticleLarge:nth-child(5),
    .swiper-slide.listVertArticleLarge:nth-child(6),
    .swiper-slide.listVertArticleLarge:nth-child(7),
    .swiper-slide.listVertArticleLarge:nth-child(8),
    .swiper-slide.listVertArticleLarge:nth-child(9),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(4),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(5),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(6),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(7),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(8),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(9),
    .swiper-slide.listVertArticleSmall:nth-child(5),
    .swiper-slide.listVertArticleSmall:nth-child(6),
    .swiper-slide.listVertArticleSmall:nth-child(7),
    .swiper-slide.listVertArticleSmall:nth-child(8),
    .swiper-slide.listVertArticleSmall:nth-child(9){
        display: none;
    }
    .swiper-slide.listVertArticleLarge{
        /*--remainSize: calc(100% - 342px);*/
        --remainSize: calc(100% - 330px);
        --marginR: calc(var(--remainSize) / 2);
        margin-right: var(--marginR);
    }
    .swiper-slide.listVertArticleSmall{
        --remainSize: calc(100% - 328px);
        --marginR: calc(var(--remainSize) / 3);
        margin-right: var(--marginR);
    }
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall{
        /*--remainSize: calc(100% - 342px);*/
        --remainSize: calc(100% - 330px);
        --marginR: calc(var(--remainSize) / 2);
        margin-right: var(--marginR);
    }
    .swiper-slide.listVertArticleLarge:nth-child(3),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(3),
    .swiper-slide.listVertArticleSmall:nth-child(4){
        margin-right: 0;
    }

    .listVertArticleSubCat
    {
        width: 82px !important;
        display: inline;
        --remainSize: calc(100% - 328px);
        --marginR: calc(var(--remainSize) / 3);
        margin-right: var(--marginR);
    }
    .listVertArticleSubCatImage{
        width: 82px;
        height: 82px;
        border-radius: 8px;
    }
    .listVertArticleSubCatImage img{
        width: 82px;
        height: 82px;
        border-radius: 8px;
        border: 1px solid var(--lineColor);
    }

    .listVertArticleSubCat:nth-child(4){
        margin-right: 0;
    }

    .listVertArticleSubCat:nth-child(5),
    .listVertArticleSubCat:nth-child(6),
    .listVertArticleSubCat:nth-child(7),
    .listVertArticleSubCat:nth-child(8)
    {
        display: none;
    }
    .listSubPageType{
        margin-right: 24px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .listSubPageType:last-child{
        margin-right: 0px !important;
    }
    .listSubPageType a{
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .listVertArticleSmall {
        width: 82px !important;
        margin-right: 9px;
    }
    .smlistVerticalLarge .listVertArticleSmall, .listVertArticleLarge {
        width: 110px !important;
        margin-right: 7px;
    }
    .icn-1st-rank{
        width: 12px;
        height:12px;
        margin-bottom: 2px;
    } 
    .lnkImgTopWeek{
        width:51px;
        height:51px;
        border-radius:10px;
    } 
    .icnArticleSpecies{
        width: 10px;
    }        
    .listArticleImageTopWeek{
        cursor:pointer;
        width:51px;
        height:51px;
        border-radius:10px;
        border: 1px solid var(--lineColor);
    }
    .listVertArticleImageSmall {
        height: 82px;
        border-radius: 8px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageSmall img.listVertArticleImageSmall{
        border: 1px solid var(--lineColor);
    }
    .smlistVerticalLarge .listVertArticleImageSmall, .listVertArticleImageLarge {
        height: 110px;
        border-radius: 8px;
        display: block;
        clear: both;
        position: relative;
    }
    .listVertArticleImageLarge img.listVertArticleImageLarge{
        border: 1px solid var(--lineColor);
    }
    .listVertArticleThumbnailSmall {
        width: 82px;
        height: 82px;
        border-radius: 8px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .smlistVerticalLarge .listVertArticleThumbnailSmall, .listVertArticleThumbnailLarge {
        width: 110px;
        height: 110px;
        border-radius: 8px;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .listVertArticleNameSmall, .listVertArticleNameLarge {
        font-size: 14px;
        line-height: 1.42;
        color: var(--textOnCardDarkColor);
    }
    .listVertArticleSubCatBody .listVertArticleNameSmall, .listVertArticleSubCatBody .listVertArticleNameLarge {
        font-size: 12px;
    }
    .listVertArticleDescriptionSmall, .listVertArticleDescriptionLarge { /* no new design, now use old design */
        font-size: 12px;
        color: var(--textOnCardDarkColor);
    }
    .listVertArticleUpdateChapterSmall, .listVertArticleUpdateChapterLarge {/* no new design, now use old design */
        height: 32px;
        margin-top: -5px;
        margin-bottom: 5px;
        font-size: 12px;
        color: var(--textOnCardDarkColor);
    }
    .listVertArticleStatsSmall, .listVertArticleStatsLarge {
        font-size: 10px;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatsSmall .glyphicon, .listVertArticleStatsLarge .glyphicon {
        font-size: 7px;
    }    
    .listVertArticleAuthorNameSmall, .listVertArticleAuthorNameLarge {        
        font-size: 12px;
        line-height: 1.42;
        color: var(--textOnCardLightColor);
    }
    .listVertArticleStatus {
        background-color: transparent !important;
        color: var(--textOnCardLightColor) !important;
    }
    .listVertArticleStatsLarge .icnChapterAmt, .listVertArticleStatsSmall .icnChapterAmt{
        width:11px;
        height: 11px;
        margin-right:3px;
    }
    .listVertArticleStatsLarge .icnRatingAmt, .listVertArticleStatsSmall .icnRatingAmt{
        margin-top:-2px;
        width:9px;
        margin-right:3px;
    }
    .listVertArticleStatsLarge .icnBubbleCnt, .listVertArticleStatsSmall .icnBubbleCnt{
        width:9px;
    }
    .listVertArticleStatsLarge .txtChapterAmt, .listVertArticleStatsSmall .txtChapterAmt{
        font-size:9px;
    }
    .viewMoreVertArticle{
        margin-top:40px;
    }
    .lblIsEndOnThumb{
        background: var(--linkColor); 
        padding: 0px 8px 3px; 
        border-radius: 12px; 
        vertical-align: middle;
        position:absolute;
        top:10px;
        right:10px;
        z-index:10;
        font-size:12px;
        color:var(--textWhiteColor);
    }
    .indexSubHeader{
        margin-top: 50px;
    }
    .newListArticleItem {
        height: 100px;
        margin-bottom: 20px;
    }
    .newListArticleImage{
        max-width: 100px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .newListArticleImage .listArticleThumbnail {
        border-radius:8px;
        width:100px;
        height:100px;
    }

    .listArticleBody .myListArticleInfo{
        display: inline-grid;
        width: calc(100% - 100px);
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .listArticleBody .listArticleName{
        margin: 0;
        word-break: break-word;
        font-size: 15px;
        line-height: 1.2;
        max-height: 36px;
    }

    .listArticleBody .listAuthorName{
        font-size: 13px;
        line-height: 1.23; 
        font-weight: 300; 
        color: var(--textOnCardLightColor);
        margin-top: 6px;
    }
    .listArticleBody .listAuthorName .fas.fa-user-alt{
        font-size: 10px;
        color:var(--textOnCardLightColor);
    }
    .listArticleBody .listArticleStats {
        font-size: 10px;
        line-height: 1.2;
        margin-top: 2px;
        color: var(--textOnCardLightColor);
    }
    .listArticleBody .listArticleStatus {
        background-color: transparent !important;
        color: var(--textOnCardLightColor) !important;
        word-break: break-all;
        vertical-align: top;
    }
    .listArticleBody .zoneTag{
        height: 18px;
        margin-top: 5px;
    }
    .listArticleBody .tagListInHoriArtileList_1Line{
        font-size: 10px;
        line-height: 1.2;
        padding: 2px 9px 2px 8px;
    }
    .listArticleBody .iconRating{
        width: 10px;
    }
    :root{
        --dWidth:calc(100vw - 20px);
    }    
    .newsfeedBox{
        width: var(--dWidth);
        max-width: var(--dWidth);
    }
    .newsfeedHeader{
        font-size: 18px;
    }
    .newsfeed_img > img{
        height: var(--dWidth);
        width: var(--dWidth);
    }
    div#modal_newsfeed_body{
        max-width: var(--dWidth);
    }
    #modal_newsfeed .newsfeedContent{
        max-height: calc(95vh - var(--dWidth) - 2px);
        overflow-y: auto;
    }

    .cardNew21:nth-child(even), .cardNew21:nth-child(odd) {
        padding-left: 0;
        padding-right: 0;
    }

    .cardNew21 {
        width: 100%;
    }
    
    .articleItemCardNew21 {
        font-size: 13px;
    }

    .articleItemCardNew21.listArticleItem {
        padding: 5px !important;
    }

    .articleItemCardNew21 .listArticleImage {
        max-width: 100px;
        width: 100px;
        height: 100px;
    }
    .articleItemCardNew21 .myListArticleInfo, .articleItemCardNew21 .continueArticleInfo {
        min-width: unset;
        width: calc(100% - 100px);
        padding: 0 0 0 10px;
    }
    .articleItemCardNew21 .listArticleName {
        font-size: 15px;
        margin: 0 0 10px; 
        height: 1.4em;
    }
    .articleItemCardNew21 .myListArticleInfo .txtSize16, .articleItemCardNew21 .continueArticleInfo .txtSize16 {
        font-size: 15px;
    }
    .articleItemCardNew21 .btnContinueRead {
        font-size: 15px;
        padding: 4px 10px;
    }    
    .articleItemCardNew21 .listArticleStats .view,
    .articleItemCardNew21 .listArticleStats .comment,
    .articleItemCardNew21 .listArticleStats .rating,
    .articleItemCardNew21 .listArticleStats .read,
    .articleItemCardNew21 .listArticleStats .amount_chapter {
        min-width: 30px;
    }
    
    .menu-item img {
        width: 20px;
    }

    .vertical .cardNew21 {
        min-width: unset;
        width: 33.33%;
        padding-left: 5px;
        padding-right: 5px;
    }

    .vertical .articleItemCardNew21 .listArticleImage {
        max-width: 100%;
        width: 100%;
        height: unset;
    }
    .vertical .menu-item {
        right: 12px;
        top: 12px;
    }
    .vertical .articleItemCardNew21 .listArticleStats .view,
    .vertical .articleItemCardNew21 .listArticleStats .comment,
    .vertical .articleItemCardNew21 .listArticleStats .rating,
    .vertical .articleItemCardNew21 .listArticleStats .read,
    .vertical .articleItemCardNew21 .listArticleStats .amount_chapter {
        min-width: unset;
    }
    .listDetail {
        font-size: 13px;
    }
    
    .tagListInHoriArtileList_1Line{
        padding: 2px 10px;
    }
}

/* tablet 360-767 */

@media screen and (max-width: 767px) and (min-width: 360px) {
    .widthMaxDesktop {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }
    
    .tableChapter {
        margin-left: -10px;
        margin-right: -10px;
    }

    /* css border color */
    .smBorderGreenBlue {
        border: solid 1px #1fb49f !important;
    }
    .smBorderLightPink {
        border: solid 1px #e34574 !important;
    }
    .smBorderNewGrey1 {
        border: solid 1px #606060;
    }
    .smBorderNewGrey2 {
        border: solid 1px #c0c0c0;
    }
    .smBorderNewGrey3 {
        border: solid 1px #909090;
    }
    .smBorderNewGrey4 {
        border: solid 1px #e1e1e1;
    }
    .smBorderNewGrey5 {
        border: solid 1px #707070;
    }
    .smBorderNewGrey6 {
        border: solid 1px #d1d1d1;
    }
    .smBorderNewGrey7 {
        border: solid 0.5px #d3d3d3;
    }
    /* css text color */
    .smTxtDavyGrey {
        color: #555555;
    }
    .smTxtWhite {
        color: #ffffff;
    }
    .smTxtYellow {
        color: #ffff00;
    }
    .smTxtRed {
        color: #ff0000;
    }
    .smTxtBlue {
        color: #0000ff;
    }
    .smTxtLightBlue {
        color: #0884E4;
    }
    .smTxtGold {
        color: #ffd700;
    }
    .smTxtAwesome {
        color: #ff2052;
    }
    .smTxtBlack {
        color: #000000;
    }
    .smTxtLightGrey {
        color: #cccccc;
    }
    .smTxtGrey {
        color: grey;
    }
    .smTxtPink {
        color: #ed306b;
    }
    .smTxtLightPink {
        color: #e34574;
    }
    .smTxtGreenBlue {
        color: #1fb49f;
    }
    .smTxtNewGrey1 {
        color: #606060;
    }
    .smTxtNewGrey2 {
        color: #c0c0c0;
    }
    .smTxtNewGrey3 {
        color: #909090;
    }
    .smTxtNewGrey4 {
        color: #e1e1e1;
    }
    .smTxtNewGrey5 {
        color: #707070;
    }
    .smTxtNewGrey6 {
        color: #d1d1d1;
    }
    /* font-size */
    .smTxtSize30 {
        font-size: 30px;
    }
    .smTxtSize29 {
        font-size: 29px;
    }
    .smTxtSize28 {
        font-size: 28px;
    }
    .smTxtSize27 {
        font-size: 27px;
    }
    .smTxtSize26 {
        font-size: 26px;
    }
    .smTxtSize25 {
        font-size: 25px;
    }
    .smTxtSize24 {
        font-size: 24px;
    }
    .smTxtSize23 {
        font-size: 23px;
    }
    .smTxtSize22 {
        font-size: 22px;
    }
    .smTxtSize21 {
        font-size: 21px;
    }
    .smTxtSize20 {
        font-size: 20px;
    }
    .smTxtSize19 {
        font-size: 19px;
    }
    .smTxtSize18 {
        font-size: 18px;
    }
    .smTxtSize17 {
        font-size: 17px;
    }
    .smTxtSize16 {
        font-size: 16px;
    }
    .smTxtSize15 {
        font-size: 15px;
    }
    .smTxtSize14 {
        font-size: 14px;
    }
    .smTxtSize13 {
        font-size: 13px;
    }
    .smTxtSize12 {
        font-size: 12px;
    }
    .smTxtSize11 {
        font-size: 11px;
    }
    .smTxtSize10 {
        font-size: 10px;
    }
    .smTxtSize9 {
        font-size: 9px;
    }
    .smTxtSize8 {
        font-size: 8px;
    }
    /* padding */
    .smPaddingAllNone {
        padding: 0px;
    }
    .smPaddingAll5 {
        padding: 5px;
    }
    .smPaddingAll10 {
        padding: 10px;
    }
    .smPaddingAll15 {
        padding: 15px;
    }
    .smPaddingAll20 {
        padding: 20px;
    }
    .smPaddingBottom0 {
        padding-bottom: 0;
    }
    .smPaddingBottom5 {
        padding-bottom: 5px;
    }
    .smPaddingBottom10 {
        padding-bottom: 10px;
    }
    .smPaddingBottom20 {
        padding-bottom: 20px;
    }
    .smPaddingBottom30 {
        padding-bottom: 30px;
    }
    .smPaddingLeft0 {
        padding-left: 0;
    }
    .smPaddingLeft5 {
        padding-left: 5px;
    }
    .smPaddingLeft10 {
        padding-left: 10px;
    }
    .smPaddingLeft15 {
        padding-left: 15px;
    }
    .smPaddingLeft20 {
        padding-left: 20px;
    }
    .smPaddingLeft25 {
        padding-left: 25px;
    }
    
    .smPaddingLeftRight0 {
        padding-left: 0;
        padding-right: 0;
    }
    .smPaddingLeftRight5 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .smPaddingLeftRight10 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .smPaddingLeftRight15 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .smPaddingLeftRight20 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .smPaddingLeftRight25 {
        padding-left: 25px;
        padding-right: 25px;
    }
    .smPaddingLeftRight50 {
        padding-left: 50px;
        padding-right: 50px;
    }
    .smPaddingRight0 {
        padding-right: 0;
    }
    .smPaddingRight5 {
        padding-right: 5px;
    }
    .smPaddingRight10 {
        padding-right: 10px;
    }
    .smPaddingTop0 {
        padding-top: 0;
    }
    .smPaddingTop5 {
        padding-top: 5px;
    }
    .smPaddingTop10 {
        padding-top: 10px;
    }
    .smPaddingTop15 {
        padding-top: 15px;
    }
    .smPaddingTop20 {
        padding-top: 20px;
    }
    .smPaddingTop30 {
        padding-top: 30px;
    }
    .smPaddingTop40 {
        padding-top: 40px;
    }
    .smPaddingTop50 {
        padding-top: 50px;
    }
    .smPaddingTop60 {
        padding-top: 60px;
    }
    .smPaddingTop70 {
        padding-top: 70px;
    }
    .smPaddingTopBottom7 {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .smPaddingTopBottom10 {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .smPaddingTopBottom20 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .smPaddingTopBottom50 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /* margin */
    .smMarginAllNone {
        margin: 0;
    }
    .smMarginAll5 {
        margin: 5px;
    }
    .smMarginAll10 {
        margin: 10px !important;
    }
    .smMarginBottomNone {
        margin-bottom: 0;
    }
    .smMarginBottom5 {
        margin-bottom: 5px;
    }
    .smMarginBottom10 {
        margin-bottom: 10px;
    }
    .smMarginBottom20 {
        margin-bottom: 20px;
    }
    .smMarginBottom30 {
        margin-bottom: 30px;
    }
    .smMarginBottom40 {
        margin-bottom: 40px;
    }
    .smMarginLeftRight25 {
        margin-left: 25px;
        margin-right: 25px;
    }
    .smMarginLeftRight10 {
        margin-left: 10px;
        margin-right: 10px;
    }
    .smMarginLeftRightNone {
        margin-left: 0;
        margin-right: 0;
    }
    .smMarginLeft70 {
        margin-left: 70px;
    }
    .smMarginLeft60 {
        margin-left: 60px;
    }
    .smMarginLeft50 {
        margin-left: 50px;
    }
    .smMarginLeft40 {
        margin-left: 40px;
    }
    .smMarginLeft30 {
        margin-left: 30px;
    }
    .smMarginLeft20 {
        margin-left: 20px;
    }
    .smMarginLeft10 {
        margin-left: 10px;
    }
    .smMarginLeft15 {
        margin-left: 15px;
    }
    .smMarginLeft5 {
        margin-left: 5px;
    }
    .smMarginLeft3 {
        margin-left: 3px;
    }
    .smMarginLeftNone {
        margin-left: 0;
    }
    .smMarginRight70 {
        margin-right: 70px;
    }
    .smMarginRight60 {
        margin-right: 60px;
    }
    .smMarginRight50 {
        margin-right: 50px;
    }
    .smMarginRight40 {
        margin-right: 40px;
    }
    .smMarginRight30 {
        margin-right: 30px;
    }
    .smMarginRight20 {
        margin-right: 20px;
    }
    .smMarginRight15 {
        margin-right: 15px;
    }
    .smMarginRight10 {
        margin-right: 10px;
    }
    .smMarginRight5 {
        margin-right: 5px;
    }
    .smMarginRightNone {
        margin-right: 0;
    }
    .smMarginTop-5 {
        margin-top: -5px;
    }
    .smMarginTopNone {
        margin-top: 0 !important;
    }
    .smMarginTop5 {
        margin-top: 5px;
    }
    .smMarginTop10 {
        margin-top: 10px;
    }
    .smMarginTop15 {
        margin-top: 15px;
    }
    .smMarginTop20 {
        margin-top: 20px;
    }
    .smMarginTop30 {
        margin-top: 30px !important;
    }
    .smMarginTop40 {
        margin-top: 40px !important;
    }
    .smMarginTop50 {
        margin-top: 50px !important;
    }
    .smMarginTopBottomNone {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .smMarginTopBottom5 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .smMarginTopBottom10 {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .smMarginTopBottom20 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /* Add your styles for devices with a maximum width */
    .smWidth250 {
        width: 250px !important;
    }
    .smWidth230 {
        width: 230px !important;
    }
    .smWidth200 {
        width: 200px !important;
    }
    .smWidth150 {
        width: 150px !important;
    }
    .smWidthNone {
        width: unset !important;
    }
    .smWidth30Percent {
        width: 30% !important;
    }
    .smWidth40Percent {
        width: 40% !important;
    }
    .smWidth45Percent {
        width: 45% !important;
    }
    .smWidth50Percent {
        width: 50% !important;
    }
    .smWidth55Percent {
        width: 55% !important;
    }
    .smWidth60Percent {
        width: 60% !important;
    }
    .smWidth65Percent {
        width: 65% !important;
    }
    .smWidth70Percent {
        width: 70% !important;
    }
    .smWidth75Percent {
        width: 75% !important;
    }
    .smWidth80Percent {
        width: 80% !important;
    }
    .smWidth85Percent {
        width: 85% !important;
    }
    .smWidth90Percent {
        width: 90% !important;
    }
    .smWidth100Percent {
        width: 100% !important;
    }
    /* Add your styles for devices with a maximum height */
    .smHeight30Percent {
        height: 30% !important;
    }
    .smHeight40Percent {
        height: 40% !important;
    }
    .smHeight50Percent {
        height: 50% !important;
    }
    .smHeight55Percent {
        height: 55% !important;
    }
    .smHeight60Percent {
        height: 60% !important;
    }
    .smHeight65Percent {
        height: 65% !important;
    }
    .smHeight70Percent {
        height: 70% !important;
    }
    .smHeight75Percent {
        height: 75% !important;
    }
    .smHeight80Percent {
        height: 80% !important;
    }
    .smHeight85Percent {
        height: 85% !important;
    }
    .smHeight90Percent {
        height: 90% !important;
    }
    .smHeight100Percent {
        height: 100% !important;
    }
    .smShow {
        display: block;
        overflow: auto;
    }
    .smShowTransparent {
        opacity: 0.5;
    }
    .smShowInlineBlock {
        display: inline-block;
    }
    .smShowInline {
        display: inline;
    }
    .smShowBlock {
        display: block;
    }
    .sm-show-flex {
        display: flex;
    }
    .sm-position-absolute {
        position: absolute;
    }
    .sm-position-relative {
        position: relative;
    }
    .sm-pull-left {
        float: left !important;
    }
    .sm-pull-right {
        float: right !important;
    }
    .sm-pull-none {
        float: none !important;
    }
    .sm-clearfix {
        clear: both;
    }
    .sm-text-none {
        text-align: unset;
    }
    .sm-text-center {
        text-align: center;
    }
    .sm-text-left {
        text-align: left;
    }
    .sm-text-right {
        text-align: right;
    }
    .smBorderNone {
        border: none !important;
    }
    .smBorderTop {
        border-top: 1px solid #D3D3D3;
    }
    .smBorderBottom {
        border-bottom: 1px solid #D3D3D3;
    }
    .smAbsoluteTop0 {
        top: 0px;
    }
    .smAbsoluteRight0 {
        right: 0px;
    }
    .smClearBoth {
        clear: both;
    }
    .smBorderLeftRightNone {
        border-left: none;
        border-right: none;
    }
    .smHeight150 {
        height: 150px;
    }
    .smTextShadowNone {
        text-shadow: none;
    }
    .smTxtBlue {
        color: rgb(0, 0, 139) !important;
    }
    .smMaxWidthUnset {
        max-width: unset !important;
    }
    /* อื่นๆ */
    .boxSpaceRim {
        padding-left: 5px;
        padding-right: 5px;
    }
    .outerBoxSpaceRim {
        margin-left: -5px !important;
        width: calc(100% + 10px) !important;
    }
    .btnPreventLink {
        display: block;
        margin: 5px auto !important;
        width: 80%;
        float: unset !important;
    }
    .btnGroupPreventLink {
        display: unset;
    }
    .btn-group.btnGroupPreventLink>.btn {
        margin: 5px auto;
    }
    .myPurchasedArticleImg {
        width: 90px;
    }
    .myPurchasedArticleInfo {
        width: calc(100% - 90px);
    }
    .sidebar {
        display: none;
    }
    .btn_in_main_cover {
        width: 100% !important;
        margin-top: 10px !important;
    }
    .smHide {
        display: none;
    }
    .lblCategoryName {
        margin-top: 34px;
        margin-left: 0px;
        padding: 5px 15px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: normal;
    }
    .lblCategoryName.cat10 {
        color: #443e6d;
        border-left: solid 6px #443e6d;
        border-right: none;
        border-top: none;
        border-bottom: none;
    }
    .lblCategoryName.cat16 {
        color: #912b69;
        border-left: solid 6px #912b69;
        border-right: none;
        border-top: none;
        border-bottom: none;
    }
    .lblCategoryName.cat34 {
        color: #d67a74;
        border-left: solid 6px #d67a74;
        border-right: none;
        border-top: none;
        border-bottom: none;
    }
    .lblUpdateDate {
        margin-top: 34px;
        padding: 5px 15px;
        font-size: 12px;
        font-weight: 300;
        line-height: 1.5;
        color: #909090;
        text-align: right;
    }
    .titleTopic {
        font-size: 20px;
        line-height: 30px;
        word-break: break-word;
        color: #303030;
        font-weight: 500;
        margin-top: 10px;
        margin-left: 20px;
    }
    .authorTopic {
        color: #19a797;
        font-size: 14px;
        line-height: 30px;
        font-weight: 500;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        margin-left: 20px;
    }
    #articleContent {
        padding-left: 20px;
        padding-right: 20px;
    }
    #bottomTopicContent {
        padding-left: 20px;
    }
    #categoryTagElement {
        margin-bottom: 10px;
    }
    #categoryTagElement>.tags a {
        font-size: 14px;
        line-height: 1.46;
    }
    #imgFavor {
        margin-right: 5px;
        height: 12px;
    }
    #imgView {
        margin-right: 5px;
        height: 15px;
    }
    #imgComment {
        margin-right: 5px;
        height: 15px;
    }
    #favoriteCount, #viewCount, #commentCount {
        font-size: 14px;
    }
    #boxRelatedTopic {
        margin-top: 40px;
        margin-bottom: 30px;
        width: 100%;
        padding: 20px 30px;
        background-color: #ffedeb;
    }
    #boxReport {
        top: -50px;
        right: 5px;
        color: #d7d7d7;
    }
    #txtReport {
        font-size: 14px;
    }
    #zoneShare {
        display: block;
        width: 50%;
        position: absolute;
        text-align: left;
        top: 91px;
        right: -24px;
    }
    #boxLoveAndShelf {
        padding-top: 10px;
    }
    #boxAddShelf {
        position: absolute;
        border-radius: 3px;
        border: solid 1px #707070;
        top: 80px;
        left: -10px;
        display: block;
        padding: 5px 15px;
    }
    #boxAddShelf>span:first-child {
        display: none;
    }
    #boxFavorite {
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        cursor: pointer;
    }
    #txtGiveRating {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.46;
        color: #707070;
        margin-top: 7px;
    }
    #txtAddShelf {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.46;
        color: #303030;
        padding: 5px 15px;
    }
}

@media (min-width: 414px) and (max-width: 767px) {
    .widthMaxDesktop {
        padding: 0 20px !important;
    } 
    .tableChapter {
        margin-left: -20px;
        margin-right: -20px;
    } 
    .divMenuMulti {
        margin: 0 -15px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {        
    .smlistVerticalLarge .listVertArticleSmall, .listVertArticleLarge{
        width: 114px !important;
    }
    .smlistVerticalLarge .listVertArticleImageSmall, .listVertArticleImageLarge{
        height: 114px;
    }
    .swiper-slide.listVertArticleLarge, 
    .swiper-slide.listVertArticleLarge:nth-child(3),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall,
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(3)
    {
        --remainSize: calc(100% - 456px);
        --marginR: calc(var(--remainSize) / 3);
        margin-right: var(--marginR);
    }
    .swiper-slide.listVertArticleSmall, .swiper-slide.listVertArticleSmall:nth-child(4), .swiper-slide.listVertArticleSmall:nth-child(5), .swiper-slide.listVertArticleSmall:nth-child(6){
        --remainSize: calc(100% - 492px);
        --marginR: calc(var(--remainSize) / 5);
        margin-right: var(--marginR);
    }
    .swiper-slide.listVertArticleLarge:nth-child(4),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(4),
    .swiper-slide.listVertArticleSmall:nth-child(5),
    .swiper-slide.listVertArticleSmall:nth-child(6){
        display: block;
    }

    .swiper-slide.listVertArticleLarge:nth-child(4),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(4),
    .swiper-slide.listVertArticleSmall:nth-child(6){
        margin-right: 0;
    }

    .listVertArticleSubCat, .listVertArticleSubCat:nth-child(4), 
    .listVertArticleSubCat:nth-child(5), .listVertArticleSubCat:nth-child(6)
    {
        width: 82px;
        display: inline;
        --remainSize: calc(100% - 492px);
        --marginR: calc(var(--remainSize) / 5);
        margin-right: var(--marginR);
    }
    .listVertArticleSubCat:nth-child(6){
        display: block;
        margin-right: 0;
    }
}

@media screen and (min-width: 450px){
    .newsfeedBox{
        max-width: 450px;
    }
    .newsfeed_img > img{
        max-width: 450px;
        height: 450px;
    }
    div#modal_newsfeed_body{
        max-width: 450px;
    }
    #modal_newsfeed .newsfeedContent{
        max-height: calc(95vh - 452px);
        overflow-y: auto;
    }
}

@media screen and (max-width: 525px) {
    
    .vertical .cardNew21 {
        width: 33.33%;
        padding-left: 0px;
        padding-right: 0px;
    }  
    .vertical .menu-item {
        right: 10px;
        top: 10px;
    }

    .vertical .cardNew21 .dropdown-menu {
        right: -60px !important;
        width: 120px !important;
    }
    
    .vertical .articleItemCardNew21 .listArticleStats {
        font-size: 11px;
    }
    
    .vertical .articleItemCardNew21 .listArticleStats .view,
    .vertical .articleItemCardNew21 .listArticleStats .comment,
    .vertical .articleItemCardNew21 .listArticleStats .rating,
    .vertical .articleItemCardNew21 .listArticleStats .read,
    .vertical .articleItemCardNew21 .listArticleStats .amount_chapter {
        margin-right: 3px !important;
    }

    .vertical .cardNew21 .dropdown-menu > li > a {
        padding: 5px 20px;
        font-size: 14px;
    }

    .vertical .cardNew21 .dropdown-menu > li:first-child > a {
        padding-top: 10px;
    }

    .vertical .cardNew21 .dropdown-menu > li:last-child > a {
        padding-bottom: 10px;
    }
    

}

@media screen and (max-width: 375px) {
    .articleItemCardNew21 .listArticleImage {
        max-width: 100px;
        width: 100px;
        height: 100px;
    }
    .articleItemCardNew21 .myListArticleInfo, .articleItemCardNew21 .continueArticleInfo {
        min-width: unset;
        width: calc(100% - 100px);
        padding: 0 0 0 10px;
    }
    .articleItemCardNew21 .myListArticleInfo .txtSize16, .articleItemCardNew21 .continueArticleInfo .txtSize16 {
        font-size: 13px;
    }
    .articleItemCardNew21 .btnContinueRead {
        font-size: 13px;
    }    
    .articleItemCardNew21 .listArticleStats .view,
    .articleItemCardNew21 .listArticleStats .comment,
    .articleItemCardNew21 .listArticleStats .rating,
    .articleItemCardNew21 .listArticleStats .read,
    .articleItemCardNew21 .listArticleStats .amount_chapter {
        min-width: 20px;
    }
    .vertical .cardNew21 {
        width: 33.33%;
        padding-left: 0px;
        padding-right: 0px;
    }  
    .vertical .menu-item {
        right: 10px;
        top: 10px;
    }
    .articleItemCardNew21 .listArticleStats, .articleItemCardNew21 .isEnd {
        font-size: 10px;
    }
}

/* mobile <= 359 */

@media screen and (max-width: 359px) {
    .widthMaxDesktop {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }
    .tableChapter {
        margin-left: -10px;
        margin-right: -10px;
    }
    .swiper-slide.listVertArticleLarge{
        --remainSize: calc(100% - 228px);            
        margin-right: calc(var(--remainSize) / 4);
        margin-left: calc(var(--remainSize) / 4);
    }
    .swiper-slide.listVertArticleSmall{
        --remainSize: calc(100% - 246px);
        --marginR: calc(var(--remainSize) / 6);
        margin-right: var(--marginR);
        margin-left: var(--marginR);
    }
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall{
        --remainSize: calc(100% - 228px);            
        margin-right: calc(var(--remainSize) / 4);
        margin-left: calc(var(--remainSize) / 4);
    }
    .swiper-slide.listVertArticleLarge:nth-child(3),
    .swiper-slide.listVertArticleLarge:nth-child(4),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(3),
    .smlistVerticalLarge .swiper-slide.listVertArticleSmall:nth-child(4),
    .swiper-slide.listVertArticleSmall:nth-child(4),
    .swiper-slide.listVertArticleSmall:nth-child(5)
    {
        display: none;
    }

    .listVertArticleSubCat
    {
        width: 82px;
        display: inline;
        --remainSize: calc(100% - 246px);
        --marginR: calc(var(--remainSize) / 6);
        margin-right: var(--marginR);
        margin-left: var(--marginR);
    }
    .listVertArticleSubCat:nth-child(4){
        display: none;
    }
    /* css border color */
    .smBorderGreenBlue {
        border: solid 1px #1fb49f !important;
    }
    .smBorderLightPink {
        border: solid 1px #e34574 !important;
    }
    .smBorderNewGrey1 {
        border: solid 1px #606060;
    }
    .smBorderNewGrey2 {
        border: solid 1px #c0c0c0;
    }
    .smBorderNewGrey3 {
        border: solid 1px #909090;
    }
    .smBorderNewGrey4 {
        border: solid 1px #e1e1e1;
    }
    .smBorderNewGrey5 {
        border: solid 1px #707070;
    }
    .smBorderNewGrey6 {
        border: solid 1px #d1d1d1;
    }
    .smBorderNewGrey7 {
        border: solid 0.5px #d3d3d3;
    }
    /* css text color */
    .smTxtDavyGrey {
        color: #555555;
    }
    .smTxtWhite {
        color: #ffffff;
    }
    .smTxtYellow {
        color: #ffff00;
    }
    .smTxtRed {
        color: #ff0000;
    }
    .smTxtBlue {
        color: #0000ff;
    }
    .smTxtLightBlue {
        color: #0884E4;
    }
    .smTxtGold {
        color: #ffd700;
    }
    .smTxtAwesome {
        color: #ff2052;
    }
    .smTxtBlack {
        color: #000000;
    }
    .smTxtLightGrey {
        color: #cccccc;
    }
    .smTxtGrey {
        color: grey;
    }
    .smTxtPink {
        color: #ed306b;
    }
    .smTxtLightPink {
        color: #e34574;
    }
    .smTxtGreenBlue {
        color: #1fb49f;
    }
    .smTxtNewGrey1 {
        color: #606060;
    }
    .smTxtNewGrey2 {
        color: #c0c0c0;
    }
    .smTxtNewGrey3 {
        color: #909090;
    }
    .smTxtNewGrey4 {
        color: #e1e1e1;
    }
    .smTxtNewGrey5 {
        color: #707070;
    }
    .smTxtNewGrey6 {
        color: #d1d1d1;
    }
    /* font-size */
    .smTxtSize30 {
        font-size: 30px;
    }
    .smTxtSize29 {
        font-size: 29px;
    }
    .smTxtSize28 {
        font-size: 28px;
    }
    .smTxtSize27 {
        font-size: 27px;
    }
    .smTxtSize26 {
        font-size: 26px;
    }
    .smTxtSize25 {
        font-size: 25px;
    }
    .smTxtSize24 {
        font-size: 24px;
    }
    .smTxtSize23 {
        font-size: 23px;
    }
    .smTxtSize22 {
        font-size: 22px;
    }
    .smTxtSize21 {
        font-size: 21px;
    }
    .smTxtSize20 {
        font-size: 20px;
    }
    .smTxtSize19 {
        font-size: 19px;
    }
    .smTxtSize18 {
        font-size: 18px;
    }
    .smTxtSize17 {
        font-size: 17px;
    }
    .smTxtSize16 {
        font-size: 16px;
    }
    .smTxtSize15 {
        font-size: 15px;
    }
    .smTxtSize14 {
        font-size: 14px;
    }
    .smTxtSize13 {
        font-size: 13px;
    }
    .smTxtSize12 {
        font-size: 12px;
    }
    .smTxtSize11 {
        font-size: 11px;
    }
    .smTxtSize10 {
        font-size: 10px;
    }
    .smTxtSize9 {
        font-size: 9px;
    }
    .smTxtSize8 {
        font-size: 8px;
    }
    .xsTxtSize30 {
        font-size: 30px;
    }
    .xsTxtSize29 {
        font-size: 29px;
    }
    .xsTxtSize28 {
        font-size: 28px;
    }
    .xsTxtSize27 {
        font-size: 27px;
    }
    .xsTxtSize26 {
        font-size: 26px;
    }
    .xsTxtSize25 {
        font-size: 25px;
    }
    .xsTxtSize24 {
        font-size: 24px;
    }
    .xsTxtSize23 {
        font-size: 23px;
    }
    .xsTxtSize22 {
        font-size: 22px;
    }
    .xsTxtSize21 {
        font-size: 21px;
    }
    .xsTxtSize20 {
        font-size: 20px;
    }
    .xsTxtSize19 {
        font-size: 19px;
    }
    .xsTxtSize18 {
        font-size: 18px;
    }
    .xsTxtSize17 {
        font-size: 17px;
    }
    .xsTxtSize16 {
        font-size: 16px;
    }
    .xsTxtSize15 {
        font-size: 15px;
    }
    .xsTxtSize14 {
        font-size: 14px;
    }
    .xsTxtSize13 {
        font-size: 13px;
    }
    .xsTxtSize12 {
        font-size: 12px;
    }
    .xsTxtSize11 {
        font-size: 11px;
    }
    .xsTxtSize10 {
        font-size: 10px;
    }
    .xsTxtSize9 {
        font-size: 9px;
    }
    .xsTxtSize8 {
        font-size: 8px;
    }
    /* padding */
    .smPaddingAllNone {
        padding: 0px;
    }
    .smPaddingAll5 {
        padding: 5px;
    }
    .smPaddingAll10 {
        padding: 10px;
    }
    .smPaddingAll15 {
        padding: 15px;
    }
    .smPaddingAll20 {
        padding: 20px;
    }
    .smPaddingBottom0 {
        padding-bottom: 0;
    }
    .smPaddingBottom5 {
        padding-bottom: 5px;
    }
    .smPaddingBottom10 {
        padding-bottom: 10px;
    }
    .smPaddingBottom20 {
        padding-bottom: 20px;
    }
    .smPaddingBottom30 {
        padding-bottom: 30px;
    }
    .smPaddingLeft0 {
        padding-left: 0;
    }
    .smPaddingLeft5 {
        padding-left: 5px;
    }
    .smPaddingLeft10 {
        padding-left: 10px;
    }
    .smPaddingLeft15 {
        padding-left: 15px;
    }
    .smPaddingLeftRight0 {
        padding-left: 0;
        padding-right: 0;
    }
    .smPaddingLeftRight5 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .smPaddingLeftRight10 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .smPaddingLeftRight15 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .smPaddingLeftRight20 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .smPaddingLeftRight25 {
        padding-left: 25px;
        padding-right: 25px;
    }
    .smPaddingRight0 {
        padding-right: 0;
    }
    .smPaddingRight5 {
        padding-right: 5px;
    }
    .smPaddingRight10 {
        padding-right: 10px;
    }
    .smPaddingTop0 {
        padding-top: 0;
    }
    .smPaddingTop5 {
        padding-top: 5px;
    }
    .smPaddingTop10 {
        padding-top: 10px;
    }
    .smPaddingTop15 {
        padding-top: 15px;
    }
    .smPaddingTop20 {
        padding-top: 20px;
    }
    .smPaddingTop30 {
        padding-top: 30px;
    }
    .smPaddingTop40 {
        padding-top: 40px;
    }
    .smPaddingTop50 {
        padding-top: 50px;
    }
    .smPaddingTop60 {
        padding-top: 60px;
    }
    .smPaddingTop70 {
        padding-top: 70px;
    }
    .smPaddingTopBottom7 {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .smPaddingTopBottom10 {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .smPaddingTopBottom20 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .smPaddingTopBottom50 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .xsPaddingAllNone {
        padding: 0px;
    }
    .xsPaddingAll5 {
        padding: 5px;
    }
    .xsPaddingAll10 {
        padding: 10px;
    }
    .xsPaddingAll20 {
        padding: 20px;
    }
    .xsPaddingBottom0 {
        padding-bottom: 0;
    }
    .xsPaddingBottom10 {
        padding-bottom: 10px;
    }
    .xsPaddingBottom20 {
        padding-bottom: 20px;
    }
    .xsPaddingLeft0 {
        padding-left: 0;
    }
    .xsPaddingLeft5 {
        padding-left: 5px;
    }
    .xsPaddingLeft10 {
        padding-left: 10px;
    }
    .xsPaddingLeftRight0 {
        padding-left: 0;
        padding-right: 0;
    }
    .xsPaddingLeftRight5 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .xsPaddingLeftRight10 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .xsPaddingLeftRight15 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .xsPaddingLeftRight20 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .xsPaddingLeftRight25 {
        padding-left: 25px;
        padding-right: 25px;
    }
    .xsPaddingRight0 {
        padding-right: 0;
    }
    .xsPaddingRight5 {
        padding-right: 5px;
    }
    .xsPaddingRight10 {
        padding-right: 10px;
    }
    .xsPaddingTop0 {
        padding-top: 0;
    }
    .xsPaddingTop5 {
        padding-top: 5px;
    }
    .xsPaddingTop10 {
        padding-top: 10px;
    }
    .xsPaddingTop20 {
        padding-top: 20px;
    }
    .xsPaddingTop30 {
        padding-top: 30px;
    }
    .xsPaddingTop40 {
        padding-top: 40px;
    }
    .xsPaddingTop50 {
        padding-top: 50px;
    }
    .xsPaddingTop60 {
        padding-top: 60px;
    }
    .xsPaddingTop70 {
        padding-top: 70px;
    }
    .xsPaddingTopBottom10 {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .xsPaddingTopBottom20 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .xsPaddingTopBottom50 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /* margin */
    .smMarginAllNone {
        margin: 0;
    }
    .smMarginAll5 {
        margin: 5px;
    }
    .smMarginAll10 {
        margin: 10px !important;
    }
    .smMarginAll20 {
        margin: 20px !important;
    }
    .smMarginBottomNone {
        margin-bottom: 0;
    }
    .smMarginBottom5 {
        margin-bottom: 5px;
    }
    .smMarginBottom10 {
        margin-bottom: 10px;
    }
    .smMarginBottom20 {
        margin-bottom: 20px;
    }
    .smMarginBottom30 {
        margin-bottom: 30px;
    }
    .smMarginBottom40 {
        margin-bottom: 40px;
    }
    .smMarginLeftRight10 {
        margin-left: 10px;
        margin-right: 10px;
    }
    .smMarginLeft70 {
        margin-left: 70px;
    }
    .smMarginLeft60 {
        margin-left: 60px;
    }
    .smMarginLeft50 {
        margin-left: 50px;
    }
    .smMarginLeft40 {
        margin-left: 40px;
    }
    .smMarginLeft30 {
        margin-left: 30px;
    }
    .smMarginLeft20 {
        margin-left: 20px;
    }
    .smMarginLeft10 {
        margin-left: 10px;
    }
    .smMarginLeft15 {
        margin-left: 15px;
    }
    .smMarginLeft5 {
        margin-left: 5px;
    }
    .smMarginLeft3 {
        margin-left: 3px;
    }
    .smMarginLeftNone {
        margin-left: 0;
    }
    .smMarginRight70 {
        margin-right: 70px;
    }
    .smMarginRight60 {
        margin-right: 60px;
    }
    .smMarginRight50 {
        margin-right: 50px;
    }
    .smMarginRight40 {
        margin-right: 40px;
    }
    .smMarginRight30 {
        margin-right: 30px;
    }
    .smMarginRight20 {
        margin-right: 20px;
    }
    .smMarginRight15 {
        margin-right: 15px;
    }
    .smMarginRight10 {
        margin-right: 10px;
    }
    .smMarginRight5 {
        margin-right: 5px;
    }
    .smMarginRightNone {
        margin-right: 0;
    }
    .smMarginTop-5 {
        margin-top: -5px;
    }
    .smMarginTopNone {
        margin-top: 0 !important;
    }
    .smMarginTop5 {
        margin-top: 5px;
    }
    .smMarginTop10 {
        margin-top: 10px;
    }
    .smMarginTop15 {
        margin-top: 15px;
    }
    .smMarginTop20 {
        margin-top: 20px;
    }
    .smMarginTopBottom5 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .smMarginTopBottom10 {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .smMarginTopBottom20 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .xsMarginAllNone {
        margin: 0;
    }
    .xsMarginAll5 {
        margin: 5px;
    }
    .xsMarginBottomNone {
        margin-bottom: 0;
    }
    .xsMarginBottom5 {
        margin-bottom: 5px;
    }
    .xsMarginBottom10 {
        margin-bottom: 10px;
    }
    .xsMarginBottom20 {
        margin-bottom: 20px;
    }
    .xsMarginBottom30 {
        margin-bottom: 30px;
    }
    .xsMarginBottom40 {
        margin-bottom: 40px;
    }
    .xsMarginLeftRight10 {
        margin-left: 10px;
        margin-right: 10px;
    }
    .xsMarginLeft70 {
        margin-left: 70px;
    }
    .xsMarginLeft60 {
        margin-left: 60px;
    }
    .xsMarginLeft50 {
        margin-left: 50px;
    }
    .xsMarginLeft40 {
        margin-left: 40px;
    }
    .xsMarginLeft30 {
        margin-left: 30px;
    }
    .xsMarginLeft20 {
        margin-left: 20px;
    }
    .xsMarginLeft10 {
        margin-left: 10px;
    }
    .xsMarginLeft5 {
        margin-left: 5px;
    }
    .xsMarginLeftNone {
        margin-left: 0;
    }
    .xsMarginRight70 {
        margin-right: 70px;
    }
    .xsMarginRight60 {
        margin-right: 60px;
    }
    .xsMarginRight50 {
        margin-right: 50px;
    }
    .xsMarginRight40 {
        margin-right: 40px;
    }
    .xsMarginRight30 {
        margin-right: 30px;
    }
    .xsMarginRight20 {
        margin-right: 20px;
    }
    .xsMarginRight10 {
        margin-right: 10px;
    }
    .xsMarginRight5 {
        margin-right: 5px;
    }
    .xsMarginRightNone {
        margin-right: 0;
    }
    .xsMarginTop-5 {
        margin-top: -5px;
    }
    .xsMarginTopNone {
        margin-top: 0;
    }
    .xsMarginTop5 {
        margin-top: 5px;
    }
    .xsMarginTop10 {
        margin-top: 10px;
    }
    .xsMarginTop20 {
        margin-top: 20px;
    }
    .xsMarginTopBottom5 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .xsMarginTopBottom10 {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .xsMarginTopBottom20 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /* Add your styles for devices with a maximum width */
    .smWidth250 {
        width: 250px !important;
    }
    .smWidth230 {
        width: 230px !important;
    }
    .smWidth200 {
        width: 200px !important;
    }
    .smWidth150 {
        width: 150px !important;
    }
    .smWidthNone {
        width: unset !important;
    }
    .smWidth30Percent {
        width: 30% !important;
    }
    .smWidth40Percent {
        width: 40% !important;
    }
    .smWidth45Percent {
        width: 45% !important;
    }
    .smWidth50Percent {
        width: 50% !important;
    }
    .smWidth55Percent {
        width: 55% !important;
    }
    .smWidth60Percent {
        width: 60% !important;
    }
    .smWidth65Percent {
        width: 65% !important;
    }
    .smWidth70Percent {
        width: 70% !important;
    }
    .smWidth75Percent {
        width: 75% !important;
    }
    .smWidth80Percent {
        width: 80% !important;
    }
    .smWidth85Percent {
        width: 85% !important;
    }
    .smWidth90Percent {
        width: 90% !important;
    }
    .smWidth100Percent {
        width: 100% !important;
    }
    /* Add your styles for devices with a maximum height */
    .smHeight30Percent {
        height: 30% !important;
    }
    .smHeight40Percent {
        height: 40% !important;
    }
    .smHeight50Percent {
        height: 50% !important;
    }
    .smHeight55Percent {
        height: 55% !important;
    }
    .smHeight60Percent {
        height: 60% !important;
    }
    .smHeight65Percent {
        height: 65% !important;
    }
    .smHeight70Percent {
        height: 70% !important;
    }
    .smHeight75Percent {
        height: 75% !important;
    }
    .smHeight80Percent {
        height: 80% !important;
    }
    .smHeight85Percent {
        height: 85% !important;
    }
    .smHeight90Percent {
        height: 90% !important;
    }
    .smHeight100Percent {
        height: 100% !important;
    }
    .smShow {
        display: block;
        overflow: auto;
    }
    .smShowTransparent {
        opacity: 0.5;
    }
    .smShowInlineBlock {
        display: inline-block;
    }
    .smShowInline {
        display: inline;
    }
    .smShowBlock {
        display: block;
    }
    .sm-show-flex {
        display: flex;
    }
    .sm-position-absolute {
        position: absolute;
    }
    .sm-position-relative {
        position: relative;
    }
    .sm-pull-left {
        float: left !important;
    }
    .sm-pull-right {
        float: right !important;
    }
    .sm-pull-none {
        float: none !important;
    }
    .sm-clearfix {
        clear: both;
    }
    .sm-text-none {
        text-align: unset;
    }
    .sm-text-center {
        text-align: center;
    }
    .sm-text-left {
        text-align: left;
    }
    .sm-text-right {
        text-align: right;
    }
    .smBorderNone {
        border: none !important;
    }
    .smBorderTop {
        border-top: 1px solid #D3D3D3;
    }
    .smBorderBottom {
        border-bottom: 1px solid #D3D3D3;
    }
    .smAbsoluteTop0 {
        top: 0px;
    }
    .smAbsoluteRight0 {
        right: 0px;
    }
    .smClearBoth {
        clear: both;
    }
    .smBorderLeftRightNone {
        border-left: none;
        border-right: none;
    }
    .smHeight150 {
        height: 150px;
    }
    .smTextShadowNone {
        text-shadow: none;
    }
    .smTxtBlue {
        color: rgb(0, 0, 139) !important;
    }
    .smMaxWidthUnset {
        max-width: unset !important;
    }
    /* อื่นๆ */
    .boxSpaceRim {
        padding-left: 5px;
        padding-right: 5px;
    }
    .outerBoxSpaceRim {
        margin-left: -5px !important;
        width: calc(100% + 10px) !important;
    }
    .btnPreventLink {
        display: block;
        margin: 5px auto !important;
        width: 80%;
        float: unset !important;
    }
    .btnGroupPreventLink {
        display: unset;
    }
    .btn-group.btnGroupPreventLink>.btn {
        margin: 5px auto;
    }
    .myPurchasedArticleImg {
        width: 90px;
    }
    .myPurchasedArticleInfo {
        width: calc(100% - 90px);
    }
    .sidebar {
        display: none;
    }
    .btn_in_main_cover {
        width: 100% !important;
        margin-top: 10px !important;
    }
    .smHide {
        display: none;
    }
    .lblCategoryName {
        margin-top: 34px;
        margin-left: 0px;
        padding: 5px 15px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: normal;
    }
    .lblCategoryName.cat10 {
        color: #443e6d;
        border-left: solid 6px #443e6d;
        border-right: none;
        border-top: none;
        border-bottom: none;
    }
    .lblCategoryName.cat16 {
        color: #912b69;
        border-left: solid 6px #912b69;
        border-right: none;
        border-top: none;
        border-bottom: none;
    }
    .lblCategoryName.cat34 {
        color: #d67a74;
        border-left: solid 6px #d67a74;
        border-right: none;
        border-top: none;
        border-bottom: none;
    }
    .lblUpdateDate {
        margin-top: 34px;
        padding: 5px 15px;
        font-size: 12px;
        font-weight: 300;
        line-height: 1.5;
        color: #909090;
        text-align: right;
    }
    .titleTopic {
        font-size: 20px;
        line-height: 30px;
        word-break: break-word;
        color: #303030;
        font-weight: 500;
        margin-top: 10px;
        margin-left: 20px;
    }
    .authorTopic {
        color: #19a797;
        font-size: 14px;
        line-height: 30px;
        font-weight: 500;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        margin-left: 20px;
    }
    #bottomTopicContent {
        padding-left: 20px;
    }
    #categoryTagElement {
        margin-bottom: 10px;
    }
    #categoryTagElement>.tags a {
        font-size: 14px;
        line-height: 1.46;
    }
    #imgFavor {
        margin-right: 5px;
        height: 12px;
    }
    #imgView {
        margin-right: 5px;
        height: 11px;
    }
    #imgComment {
        margin-right: 5px;
        height: 13px;
    }
    #imgFavor {
        margin-right: 5px;
        height: 12px;
    }
    #imgView {
        margin-right: 5px;
        height: 15px;
    }
    #imgComment {
        margin-right: 5px;
        height: 15px;
    }
    #favoriteCount, #viewCount, #commentCount {
        font-size: 14px;
    }
    #boxRelatedTopic {
        margin-top: 40px;
        margin-bottom: 30px;
        width: 100%;
        padding: 20px 30px;
        background-color: #ffedeb;
    }
    #boxReport {
        top: -50px;
        right: 5px;
        color: #d7d7d7;
    }
    #txtReport {
        font-size: 14px;
    }
    #zoneShare {
        display: block;
        width: 50%;
        position: absolute;
        text-align: left;
        top: 91px;
        right: -24px;
    }
    #boxLoveAndShelf {
        padding-top: 10px;
    }
    #boxAddShelf {
        position: absolute;
        border-radius: 3px;
        border: solid 1px #707070;
        top: 80px;
        left: 0px;
        display: block;
        padding: 5px 15px;
    }
    #boxAddShelf>span:first-child {
        display: none;
    }
    #boxFavorite {
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        cursor: pointer;
    }
    #txtGiveRating {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.46;
        color: #707070;
        margin-top: 7px;
    }
    #txtAddShelf {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.46;
        color: #303030;
    }
}
@media only screen {
    .customScrollBar::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .customScrollBar::-webkit-scrollbar:horizontal {
        height: 10px;
    }
    .customScrollBar::-webkit-scrollbar:vertical {
        width: 10px;
    }
    .customScrollBar::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white;
        background-color: rgba(0, 0, 0, .1);
    }
    .customScrollBar::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 8px;
    }
    .customScrollBarMini::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .customScrollBarMini::-webkit-scrollbar:horizontal {
        height: 3px;
    }
    .customScrollBarMini::-webkit-scrollbar:vertical {
        width: 3px;
    }
    .customScrollBarMini::-webkit-scrollbar-thumb {
        border-radius: 2px;
        border: 1px solid white;
        background-color: rgba(0, 0, 0, .1);
    }
    .customScrollBarMini::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 2px;
    }
}

/* style sheet ที่ไม่กำหนดการแสดงผลตามขนาดจอ ให้เขียนก่อนส่วนนี้ */