/* comments */
.hap-seekbar-comment-wrap{
    position: relative;
    min-height: 20px;
    width: 100%;
    touch-action:none;
    margin-bottom: 5px;
}
.hap-comments-hidden{
    display: none;
}
.hap-seekbar-comment-section{
    height: 20px;
}
.hap-seekbar-comment-section-bg{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
    background-color: #00000005;
    cursor: pointer;
}
.hap-seekbar-comment-holder{
    height: 20px;
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
}
.hap-comment{
    position: absolute;
    top:0;
    width: 20px;
    height: 20px;
}
.hap-comments-disabled .hap-comment:not(.hap-comment-active) .hap-comment-avatar{
    opacity: 0.3;
}
.hap-comment-avatar{
    display: block;
    width: 100%;
    height: 100%;
    user-select:none;
    -webkit-user-select:none;
    pointer-events: none;
    transition: opacity 0.4s;
}
.hap-comment-active{
    cursor: move;
    z-index: 5;
}
.hap-comment-active{
    outline: 3px solid #36f3f4;
}
.hap-view-comments{
    display: block;
    position: relative;
    min-width: 25px;
    margin-left: auto;
    height: 34px;
    margin-right: 10px;
}



/* comment input */

.hap-seekbar-comment-input-wrap{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
    z-index: 10;
    display: none;
    max-width: 500px;
    width: 100%;
}
.hap-seekbar-comment-form-data{
    display: flex;
    flex-direction: column;
    gap:10px;
    padding: 30px 20px 20px 20px;
}
.hap-input-comment-header{
    margin-top: 0;
}
.hap-comment-input-info{
    font-size: 0.7em;
    opacity: 0.7;
}
.hap-comment-input{
    background: rgba(0,0,0,0)!important;
    margin: 0!important;
    box-shadow: none!important;
    box-sizing: border-box;
}
.hap-comment-input-hidden{
    display: none!important;
}
.hap-comment-action-btn{ 
    display: inline-block;
    padding: 8px 12px!important;
    font-size: 13px;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    white-space: nowrap;
    background: #fff;
    color: #555;
    border-radius: 3px;
    transition: opacity 0.3s ease-out;
    background: #f3f3f3;
    color: #656565;
    cursor: pointer;
}
.hap-redirect-login-comment-cancel{
    cursor: pointer;
}


/*comment tooltip */
.hap-comment-tooltip{
    background-color: #111;
    position: absolute;
    bottom: 26px;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}
.hap-comment-tooltip-visible{
    opacity: 1;
    visibility: visible;
}
.hap-comment-tooltip-hover-helper{
    position: absolute;
    width: 60px;
    height: 10px;
    left: 0;
    top: 100%;
    background-color: rgba(0,0,0,0);
    /*background-color: red;*/
}
.hap-comment-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: #111 transparent transparent transparent;
}
.hap-comment-tooltip-left{
    left:-10px;
}
.hap-comment-tooltip-left::after{
    left: 16px;
}
.hap-comment-tooltip-right{
    right: -10px;
}
.hap-comment-tooltip-right::after{
    right: 16px;
}
.hap-comment-tooltip-center{
    left: -115px;
}
.hap-comment-tooltip-center::after{
    left: 50%;
    margin-left: -5px;
}
.hap-comment-tooltip-inner{
    max-height: 200px;
    padding: 15px;
    overflow-y: auto;
}
.hap-comment-tooltip-inner::-webkit-scrollbar {
    width: 5px; 
    height: 5px; 
}
.hap-comment-tooltip-inner::-webkit-scrollbar-thumb {
    background: #999; 
}
.hap-comment-tooltip-inner::-webkit-scrollbar-track {
    background: #eee; 
}
.hap-comment-tooltip-user{
    color: #53c3e2;
}
.hap-comment-tooltip-date{
    color: #888;
    font-size: 0.7em;
    margin: 3px
}
.hap-comment-tooltip-text{
    color: #ddd;
    margin-top: 5px;
}
/* enable hover to show tooltips on mobile */
.hap-comment:not(.hap-comment-active):hover .hap-comment-tooltip{
    opacity: 1;
    visibility: visible;
}
.hap-comment:hover{
    z-index: 1;
}



/* view all comments holder */
.hap-view-comments-holder{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 30%;
    width: 100%;
    max-height: 400px;
    height: 100%;
    z-index: 10;
    display: none;
    transition: opacity 0.3s ease-out;
}
@media (max-width: 1200px) { 
    .hap-view-comments-holder{
        max-width: 90%;
    }
}
@media (max-width: 800px) { 
    .hap-view-comments-holder{
        max-width: 100%;
    }
}
.hap-view-comments-holder-inner{
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hap-view-comments-header{
    font-size: 1.3em;
}
.hap-view-comments-content{
    overflow-y: auto;
    margin-top: 10px;
}
.hap-view-comments-content::-webkit-scrollbar {
    width: 12px; 
    height: 12px; 
}
.hap-view-comments-content::-webkit-scrollbar-thumb {
    background:#999;
}
.hap-view-comments-content::-webkit-scrollbar-track {
    background:#e6e6e6;
}
.hap-comment-list-item{
    margin-bottom: 20px;
}
.hap-comment-list-item-user{
    font-size: 1em;
}
.hap-comment-list-item-date{
    margin: 0;
    margin-top: 5px;
    font-size: 0.7em;
}
.hap-comment-list-item-comment{
    margin: 0;
    margin-top: 3px;
    font-size: 0.8em;
}
.hap-view-comments-close{
    position: absolute!important;
    width: 34px!important;
    height: 34px!important;
    top: 0!important;
    right: 0!important;
}



/* colors */
.hap-art-wide-light .hap-view-comments-holder{
    background: #fff;
    border: 1px solid #ddd;
}
.hap-art-wide-light .hap-comment-list-item-date{
    color: #2196F3;
}

.hap-art-wide-dark .hap-view-comments-holder{
    background: #1b1b1b;
    border: 1px solid #333;
}
.hap-art-wide-dark .hap-seekbar-comment-section-bg{
    background: #262626;
}
.hap-art-wide-dark .hap-view-comments-header{
    color: #fff;
}
.hap-art-wide-dark .hap-comment-list-item-user{
    color: rgb(33,150,243);
}
.hap-art-wide-dark .hap-comment-list-item-date{
    color: #838383;
}
.hap-art-wide-dark .hap-comment-list-item-comment{
    color: #ddd;
}

.hap-art-narrow-light .hap-view-comments-holder{
    background: #fff;
    box-shadow: rgb(34 34 34 / 16%) 1px 1px 11px;
}
.hap-art-narrow-light .hap-comment-list-item-date{
    color: #bbb;
}
.hap-art-narrow-light .hap-comment-list-item-user{
    color: rgb(63,186,243);
}

.hap-art-narrow-dark .hap-view-comments-holder{
    background: #1b1b1b; 
    border: 1px solid #333;
}
.hap-art-narrow-dark .hap-seekbar-comment-section-bg{
    background: #262626;
}
.hap-art-narrow-dark .hap-view-comments-header{
    color: #fff;
}
.hap-art-narrow-dark .hap-comment-list-item-user{
    color: rgb(33,150,243);
}
.hap-art-narrow-dark .hap-comment-list-item-date{
    color: #838383;
}
.hap-art-narrow-dark .hap-comment-list-item-comment{
    color: #ddd;
}


.hap-brona-light .hap-view-comments-holder{
    background: #fff; 
    border: 1px solid #ddd;;
}
.hap-brona-light .hap-comment-list-item-date{
    color: #bbb;
}
.hap-brona-light .hap-comment-list-item-user{
    color: #d24de9;
}

.hap-brona-dark .hap-view-comments-holder{
    background: #1b1b1b; 
    border: 1px solid #333;
}
.hap-brona-dark .hap-seekbar-comment-section-bg{
    background: #262626;
}
.hap-brona-dark .hap-view-comments-header{
    color: #fff;
}
.hap-brona-dark .hap-comment-list-item-user{
    color: #e91e63;
}
.hap-brona-dark .hap-comment-list-item-date{
    color: #838383;
}
.hap-brona-dark .hap-comment-list-item-comment{
    color: #ddd;
}

.hap-epic .hap-view-comments-holder{
    background: #fff; 
    border: 1px solid #ddd;
    box-shadow: rgba(135, 135, 135, 0.32) 0px 0px 11px;
}
.hap-epic .hap-comment-list-item-date{
    color: #bbb;
}
.hap-epic .hap-comment-list-item-user{
    color: #C90032;
}


.hap-metalic .hap-view-comments-holder{
    background: #222;
    border: 1px solid #41414194;
}
.hap-metalic .hap-seekbar-comment-section-bg{
    background: #262626;
}
.hap-metalic .hap-view-comments-header{
    color: #fff;
}
.hap-metalic .hap-comment-list-item-user{
    color: rgb(63,186,243);
}
.hap-metalic .hap-comment-list-item-date{
    color: #838383;
}
.hap-metalic .hap-comment-list-item-comment{
    color: #ddd;
}
.hap-metalic .hap-contr-btn.hap-view-comments{
    height: 34px;
    float: none;
}

.hap-wave .hap-view-comments-holder{
    background: #333;
    box-shadow: rgb(21 21 21 / 16%) 0px 0px 11px;
}
.hap-wave .hap-seekbar-comment-section-bg{
    background: #303030;
}
.hap-wave .hap-view-comments-header{
    color: #fff;
}
.hap-wave .hap-comment-list-item-user{
    color: #ffd454;
}
.hap-wave .hap-comment-list-item-date{
    color: #838383;
}
.hap-wave .hap-comment-list-item-comment{
    color: #ddd;
}

.hap-fixed .hap-view-comments-holder{
    background: #27363b; 
    border: 1px solid #444;
    box-shadow: 1px 1px 6px rgba(40,40,40,0.3);
}
.hap-fixed .hap-seekbar-comment-section-bg{
    background: #303030;
}
.hap-fixed .hap-view-comments-header{
    color: #fff;
}
.hap-fixed .hap-comment-list-item-user{
    color: #ffa48f;
}
.hap-fixed .hap-comment-list-item-date{
    color: #838383;
}
.hap-fixed .hap-comment-list-item-comment{
    color: #ddd;
}
.hap-fixed .hap-contr-btn.hap-view-comments{
    height: auto;
    margin-right: 0;
}

.hap-fixed2 .hap-view-comments-holder{
    background: #fafafa;
    box-shadow: 0px 0px 5px #99999954;
}
.hap-fixed .hap-seekbar-comment-section-bg{
    background: #0000000a;
}
.hap-fixed2 .hap-comment-list-item-user{
    color: #ff7e00;
}
.hap-fixed2 .hap-contr-btn.hap-view-comments{
    height: auto;
    margin-right: 0;
}