html{
position: relative;
width: 100%;
height: 100%;
}
.attach{
width: 60px;
height: 60px;
background-color: #d5d5d5;
bottom: 14px;
position: fixed;
z-index: 1;
border-radius: 50%;
right: 240px;
box-shadow: rgba(0, 0, 0, 0.45) 4px 4px 6px 0;
text-align: center;
line-height: 71px;
cursor: pointer;
font-size: 27px;
}
.title-program{
display: inline-block;
float: right;
width: calc(100% - 60px);
}
.col-texta{
padding: 0px 10px 0px 0px; width: calc(100% -
65px);float: left;height: 100%
}
.emojionearea .emojionearea-button>div{
background-image:none !important;
}
.emojionearea-button-open:before{
content:"\f118";
display: inline-block;
font: normal normal normal 24px/1 FontAwesome !important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.emojionearea-button-close:before{
content:"\f057";
display: inline-block;
font: normal normal normal 24px/1 FontAwesome !important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.title-program span{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
width: 100%;
color: #fff;
font-size: 18px;
}
.title-program span i{
width: 45px;
display: inline-block;
margin: 0 0 0 10px;
}
.title-program span i img{
width:100%;
}
.title-program span:before{
content: "";
display: inline-block;
width: 1px;
background-color: #fff;
height: 25px;
vertical-align: middle;
margin: 0 8px;
}
.heather_bar .pull-right{
width: calc(100% - 117px);
}
.tab-content .newContent{
float: right;
width: 100%;
}
.tab-alert{
position:absolute;
top:0;
left:0;
bottom:0;
right: 0;
background-color:#fff;
z-index: 7;
}
.tab-alert div.relative span{
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%)translateX(-50%);
-ms-transform: translateY(-50%)translateX(-50%);
transform: translateY(-50%)translateX(-50%);
transition: all 0.5s 0.5s;
opacity: 1;
position: absolute;
}
#AppendLoader{
float: right;
width: 100%;
}
.topic-text::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: rgb(255, 255, 255);
-webkit-box-shadow: 0 0 1px rgb(255, 255, 255);
width: 1px;
}
.heather_bar{
background-color: #b80d00;
position:fixed;
width:100%;
z-index:2;
height:45px;
line-height: 45px;
padding: 0 10px;
}
.heather_bar .user{
direction: rtl;
white-space: nowrap;
height: 45px;
}
.heather_bar .user .avarat {
overflow: hidden;
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
position: relative;
top: 4px;
cursor: pointer;
border: 3px solid #ac060b;
}
.heather_bar .user .avarat a,.heather_bar .user .avarat div{
display: block;
}
.heather_bar .user .avarat a img,.heather_bar .user .avarat
div img{
width: 100%;
}
.heather_bar .user .user-name {
width: initial;
height: initial;
border-radius: initial;
margin: 0 0;
background-color: transparent;
display: inline-block;
}
.heather_bar h1{
display: inline-block;
float: right;
font-size: 22px;
margin: 0;
color: #fff;
padding: 0 0px;
vertical-align:middle;
}
.heather_bar h1 img{
width:40px;
}
.heather_bar p{
display: inline-block;
padding: 0 0px;
color: #fff;
font-size: 18px;
margin: 0 0px;
}
.heather_bar p:before{
content:"";
display:inline-block;
width:1px;
background-color:#fff;
height:25px;
vertical-align:middle;
margin: 0 8px;
}
.heather_bar .live_play{
display: none;
}
.heather_bar .logo{
display: inline-block;
}
.heather_bar .logo:before{
/* content:""; */
width: 35px;
height: 35px;
vertical-align: middle;
display: inline-block;
}
.heather_bar .login:before{
content:"";
}
.chat #form1{
height: 100%;
width: 100%;
display: block;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
}
.is-hidden{
visibility: hidden;
}
.box.report{
color: #fff;
margin: 0 6px;
line-height: 45px;
}
.box.report i{
margin-right:7px
}
.box.report i:before{
font-size: 17px;
color:#c1c1c1;
}
.top {
width: 60px;
height: 60px;
background-color: #d5d5d5;
bottom: 88px;
position: fixed;
z-index: 1;
border-radius: 50%;
right: 14px;
box-shadow: rgba(0, 0, 0, 0.45) 4px 4px 6px 0;
text-align: center;
line-height: 60px !important;
cursor: pointer;
}
.top::before{
font-size:21px
}
.bottn-toolbar{
position: fixed;
bottom: 0;
width: 40%;
background-color: rgba(15, 15, 15, 0.81);
height: 40px;
z-index: 19;
left: 0;
min-width: 252px;
max-width: 300px;
}
.like-program{
color: #ffffff;
width: 60px;
height: 60px;
line-height: 64px;
border-radius: 50%;
font-size: 25px;
}
.likes-program,.dislike-program{
width: 60px;
height: 60px;
box-shadow: rgba(0, 0, 0, 0.45) 4px 4px 6px;
position: fixed;
z-index: 2;
border-radius: 50%;
}
.likes-program{
right: 88px;
bottom: 14px;
}
.dislike-program{
right: 162px;
bottom: 14px;
}
#rating{
list-style: none;
padding: 0;
margin: auto;
text-align: left;
width: 100%;
}
#rating li{
display: inline-block;
line-height: 40px;
}
.box .like-program,.box .dislike-program{
background-color: transparent;
border: none;
padding: 0;
}
.box .like-program .ico,.box .dislike-program .ico{
width: 32px;
height: 32px;
overflow: hidden;
background-color: rebeccapurple;
position: relative;
content: "";
}
.box .like-program .ico{
}
.box .dislike-program .ico{
}
.box .like-program .ico span,.box .dislike-program .ico span{
position: absolute;
right: -46px;
}
.box .like-program{
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
}
.box .like-program::before{
color:#fff;
width:35px;
height: 30px;
line-height: 33px;
display:block;
font-size: 22px;
float: left;
margin: 0 0 0 0;
}
.box .dislike-program{
}
.chat {
background-color: #dcdcdc;
height: 100%;
background-image: url("../img/chat/bg-chat.jpg");
}
.chat .avatar {
width: 40px;
height: 40px;
position: absolute;
}
.chat .avatar img {
display: block;
border-radius: 20px;
height: 100%;
}
.chat .avatar .status.off {
border: 1px solid #5a5a5a;
background: #ffffff;
}
.chat .avatar .status.online {
background: #4caf50;
}
.chat .avatar .status.busy {
background: #ffc107;
}
.chat .avatar .status.offline {
background: #ed4e6e;
}
/*****************CHAT BODY *******************/
.chat-body h6 {
font-size: 20px;
margin: 0 0 20px;
}
.chat-body .answer.left {
padding: 0 58px 0 75px;
text-align: left;
float: left;
}
.chat-body .answer {
position: relative;
max-width: 70%;
min-width: 347px;
overflow: hidden;
clear: both;
margin-bottom: 10px;
}
.chat-body .answer.left .avatar {
left: 0;
}
.chat-body .answer .avatar {
bottom: 36px;
}
.chat .avatar {
width: 70px;
height: 70px;
position: absolute;
background-color: #ac060b;
border-radius: 100%;
}
.chat .avatar img {
height: 100%;
width: 100%;
margin: auto;
display: block;
padding: 3px;
}
.chat-body .answer .name {
font-size: 17px;
line-height: 36px;
}
.chat-body .answer.left .avatar .status {
right: 4px;
}
.chat-body .answer .avatar .status {
bottom: 0;
}
.chat-body .answer.left .text {
background: #dacbb3;
color: #333333;
border-radius: 8px 8px 8px 0;
}
.chat-body .answer .text {
padding: 12px;
font-size: 22px;
line-height: 26px;
position: relative;
direction: rtl;
text-align: right;
width: 100%;
}
.chat-body .answer .text:before {
content: '';
display: block;
position: absolute;
bottom: 0;
border: 18px solid transparent;
border-bottom-width: 0;
}
.chat-body .answer.left .text:before {
left: -30px;
border-right-color: #dacbb3;
border-right-width: 12px;
}
.chat-body .answer.left .reporter {
padding-left: 12px;
color: #333333;
}
.chat-body .answer .reporter {
font-size: 16px;
line-height: 36px;
position: relative;
padding-bottom: 1px;
}
/*RIGHT*/
.chat-body .answer.right {
padding: 0 75px 0 46px;
text-align: right;
float: right;
}
.chat-body .answer.right .avatar {
right: 0;
}
.chat-body .answer.right .avatar .status {
left: 4px;
}
.chat-body .avatar-button{
left: 0;
position: absolute;
bottom: 30px;
text-align: center;
}
.avatar-button .forward{
text-decoration: none;
display: block;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: white;
text-align: center;
line-height: 34px;
margin-bottom: 7px;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
border: 2px solid rgba(167, 167, 167, 0.46);
}
.avatar-button a:hover{
border: 2px solid #a7a7a7;
}
.avatar-button .fa-share{
color: #000;
}
/*****************************************effect heart
button*********************************/
@-webkit-keyframes heartbeat {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform:scale(1.3);
transform: scale(1.3);
}
28% {
-moz-transform:scale(1);
-ms-transform: scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
42% {
-moz-transform:scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform: scale(1);
}
}
@-moz-keyframes heartbeat {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform:scale(1.3);
transform: scale(1.3);
}
28% {
-moz-transform:scale(1);
-ms-transform: scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
42% {
-moz-transform:scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform: scale(1);
}
}
@-o-keyframes heartbeat {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform:scale(1.3);
transform: scale(1.3);
}
28% {
-moz-transform:scale(1);
-ms-transform: scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
42% {
-moz-transform:scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform: scale(1);
}
}
@keyframes heartbeat {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform:scale(1.3);
transform: scale(1.3);
}
28% {
-moz-transform:scale(1);
-ms-transform: scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
42% {
-moz-transform:scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform: scale(1);
}
}
.heartbeat {
font-weight: 100;
}
.heartbeat:hover ,.chat-body .right:hover .heartbeat,.fa-
pencil:hover{
-webkit-animation: heartbeat 1300ms ease 0s infinite
normal;
-khtml-animation: heartbeat 1300ms ease 0s infinite
normal;
-moz-animation: heartbeat 1300ms ease 0s infinite normal;
-ms-animation: heartbeat 1300ms ease 0s infinite normal;
-o-animation: heartbeat 1300ms ease 0s infinite normal;
animation: heartbeat 1300ms ease 0s infinite normal;
-moz-transform:scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
/*****************************************end effect heart
Button*****************************/
.chat-body .answer.right .text {
background: rgba(230,230,230,0.8);
color: #000;
border-radius: 8px 8px 0 8px;
direction: rtl;
text-align: right;
min-height: 47px;
min-width: 100%;
position: relative;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-align: right;
}
.chat-body .answer.right .text .broken-heart:before{
background-image: url(../img/broken-heart-red.svg);
width: 88px;
height: 88px;
}
.chat-body .answer.right .text .fa-heart:before{
color: #d00101;
font-size: 5.5em;
vertical-align: middle;
}
.answer-user .text{
display: table;
}
.chat-body .answer.right .text:before {
right: -30px;
border-left-color: rgba(230,230,230,0.8);
border-left-width: 12px;
}
.chat-body .answer.right .reporter {
padding-right: 12px;
color: #333333;
}
.button-list{
margin-bottom: 6px;
}
div.active, .active-forwrad{
z-index: 30!important;
}
.active-forwrad{
width: 600px!important;
height: 400px!important;
}
.newContent .form-control{
width: 100%!important;
padding-left: 12px;
}
.newContent .emojionearea .emojionearea-button {
right: inherit!important;
left: 3px!important;
}
.emojionearea .emojionearea-button {
z-index: 5;
position: absolute;
right: 3px;
top: 3px;
width: 24px;
height: 24px;
opacity: 1;
background-color: #ffffff;
cursor: pointer;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.newContent .emojionearea-editor {
direction: rtl;
padding: 6px 5px 8px 15px;
word-wrap: break-word;
font-size: 21px;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.selected-text{
color: #5c5a5a;
position: relative;
padding: 5px 29px 5px 0;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.close-btn {
position: absolute;
width: 20px;
height: 20px;
background-color: #696262;
right: 0;
top: 5px;
border-radius: 100%;
text-align: center;
font-size: 14px;
line-height: 23px;
color: #fff;
}
.close-btn:hover{
color:#696262 ;
border: 1px solid #696262;
background-color: #fff;
cursor: pointer;
}
.answer-user .topic{
height: 100px;
border-bottom: 1px solid #dcdcdc;
margin-bottom: 5px;
position: relative;
overflow: hidden;
transition: height 0.15s ease-out;
background-color: #f7f7f7;
border-radius: 5px;
padding: 21px 10px 5px 10px;
color: #757575;
font-size:15px!important;
}
.btn-read{
position: absolute;
text-align: center;
left: 7px;
top: 5px;
background-color: rgba(212, 212, 212, 0.52);
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 45px;
cursor: pointer;
}
.fa-reading:before{
content: "\f141";
}
.answer-user .topic:focus,.answer-user .topic:hover{
/* overflow: hidden;
border-bottom: 1px solid #d6d6d6;
border-radius: 5px;
position: relative;
cursor: pointer;
height: 200px;
padding-bottom: 10px;
transition: height 0.15s ease-out;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
-webkit-moz-scrolling: touch;
-webkit-ms-scrolling: touch;
-webkit-overflow-scrolling: touch;*/
}
.EncreaseHeight{
overflow: hidden;
border-bottom: 1px solid #d6d6d6;
border-radius: 5px;
position: relative;
cursor: pointer;
height: 200px!important;
padding-bottom: 10px;
transition: height 0.15s ease-out;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
-webkit-moz-scrolling: touch;
-webkit-ms-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
.answer-user .topic:hover .fa-reading:before, .answer-user
.topic:focus .fa-reading:before{
/* content: "";*/
}
.answer-user .topic:hover .btn-read{
/* background-color:transparent;*/
}
.answer-user .topic:hover .btn-read,.answer-user .topic:focus
.btn-read{
/* top: inherit;
bottom: 10px!important;
line-height: 30px;*/
}
.icon-read:before{
content: "\f063";
}
.EncreaseHeight .btn-read{
position: absolute;
top: 154px!important;
}
.EncreaseHeight .icon-read:before{
content: "\f062";
}
.comment-news .pointer:hover{
color: #0e0e0e!important;
}
.btn-read:hover,.btn-read:focus{
color: #d00101!important;
box-shadow: 0px 0px 1px #4e4c4c;
}
.topic [class^=col-]{
padding-right: 0;
margin: 0;
}
.emojionearea .emojionearea-picker.emojionearea-picker-
position-top {
right: inherit;
left: 35px;
opacity: 1;
height: calc(100% + 83px);
}
.emojionearea .emojionearea-picker.emojionearea-picker-
position-top .emojionearea-wrapper:after {
right: inherit;
left: 0 !important;
top: 10px !important;
bottom: inherit !important;
}
.emojionearea .emojionearea-picker{
margin-top: 0!important;
top:0!important;
}
.emojionearea .emojionearea-filters {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #e5e5e5;
width: 100%;
height: 46px;
position: relative;
overflow: hidden;
}
.emojionearea .emojionearea-picker .emojionearea-scroll-area
.emojionearea-tones {
left: 10px!important;
right: inherit!important;
}
.form-message{
position: relative;
display: table;
width: 100%;
height: 100%;
}
/****************************************** button
Reply*******************************************/
.reply-button{
right: 14px;
bottom: 14px;
}
.float-popup{
width: 60px;
height: 60px;
position: fixed;
transition: all 0.5s;
border-radius: 50%;
overflow: hidden;
}
.float-popup .popup .close{
position: absolute;
bottom: -50px;
right: 0;
width: 50px;
height: 50px;
background-color: #FFF;
border-radius: 50%;
opacity: 1 !important;
z-index: 3;
text-align: center;
line-height: 50px;
color: #757575;
border: 1px solid #757575;
left: 0;
margin: auto;
}
.float-popup .popup-body{
/* background-color: #FFF;*/
position: absolute;
z-index: 2;
}
.float-popup .popup .open {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 66px;
font-size: 25px;
z-index: 100;
}
.deactive-popup{
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.45) 4px 4px 6px 0;
}
.active-popup{
width: 100% !important;
height: 100% !important;
bottom: 0 !important;
right: 0 !important;
border-radius: 0;
z-index: 20;
}
.float-popup .relative{
position: relative;
width: 100%;
height: 100%;
}
.float-popup .popup{
width: 100%;
height: 100%;
}
.active-popup .popup{
display: block;
}
.active-popup .popup .close{
display: block;
}
.active-popup .popup .open{
display: none;
}
.deactive-popup .popup .close{
display: none;
}
.deactive-popup .popup .open{
display: block;
cursor: pointer;
}
.deactive-popup .popup .popup-body{
width: 50%;
height: 50%;
top: 50%;
left: 50%;
-webkit-transform: translateY(-200%)translateX(-50%);
-ms-transform: translateY(-200%)translateX(-50%);
transform: translateY(-200%)translateX(-50%);
transition: all 0.5s 0s;
opacity: 0;
}
.active-popup .popup .popup-body{
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%)translateX(-50%);
-ms-transform: translateY(-50%)translateX(-50%);
transform: translateY(-50%)translateX(-50%);
transition: all 0.5s 0.5s;
opacity: 1;
}
.invalidmsg{
width:100%;
height:100%;
position: relative;
}
.invalidmsg span{
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%)translateX(-50%);
-ms-transform: translateY(-50%)translateX(-50%);
transform: translateY(-50%)translateX(-50%);
font-size: 19px;
min-width: 329px;
}
.tab-content{
position: relative;
top: -5px;
}
.deactive-popup .popup{
background-color: transparent;
}
.reply-button .open{
color: #FFF;
}
.reply-button.active-popup .popup{
background-color: rgba(0, 0, 0, 0.68);
}
.reply-button .popup{
background-color: #5fda67;
transition: all 0.5s;
}
.sum-likes .fa-heart{
margin-left: 2px;
font-size: 14px;
vertical-align: middle;
}
.send-message{
width: 60px;
height: 60px;
border-radius: 4px;
background-color:#5fda67;
color: #fff;
display: block;
bottom: 63px;
left: 0;
right: 0;
margin: auto;
text-align: center;
line-height: 65px;
font-size: 26px;
border: none;
}
.send-attach{
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
width: 60px;
height: 60px;
border-radius: 4px;
background-color: #999;
color: #fff;
display: block;
bottom: 63px;
left: 0;
right: 0;
margin: 10px auto;
text-align: center;
font-size: 16px;
border: none;
cursor: pointer; /* "hand" cursor */
}
.inputfile + label * {
pointer-events: none;
}
.inputfile + label i{
display:block;
top: 8px;
position:relative;
font-size: 25px;
margin: 7px 0px;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: #7e7e7e;
}
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.popup-body .nav-tabs {
border-bottom: 1px solid #ddd;
background-color: rgba(0, 0, 0, 0.35);
text-align: center;
padding-top: 10px;
}
.popup-body .nav-tabs > li.active > a, .nav-tabs > li.active
> a:hover, .nav-tabs > li.active > a:focus {
color: #666966;
border: none !important;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.popup-body .nav-tabs > li.active > .none-cursor, .nav-tabs >
li.active >.none-cursor:hover, .nav-tabs > li.active >
.none-cursor:focus {
cursor: default!important;
}
.none-cursor:hover,.none-cursor:focus{
cursor: default!important;
}
.popup-body .nav-tabs > li {
float: none!important;
display: inline-block;
}
.popup-body .nav-tabs > li.active{
background-color: #ededed;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.popup-body .tab-content > .active {
top: -3px;
position: relative;
width: 100%;
background-color: #ededed;
direction: rtl;
float: right;
height: inherit;
max-height: inherit;
}
.parent-sticker{
height:198px;
overflow-y:auto;
}
.popup-body .nav > li > a:hover, .nav > li > a:focus{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.popup-body .newContent{
padding: 15px 15px;
}
.like,.dislike{
display: table;
min-width: 39px;
text-align: center;
}
.dislikes{
border-top: 1px solid #c1c1c1;
}
a.like:hover,a.dislike:hover,
a.like:focus,a.dislike:focus{
cursor: pointer;
text-decoration: none;
border: none;
box-shadow: rgba(0, 0, 0, 0.19) 1px 1px 3px 0;
}
.like i,.dislike i{
width: 100%;
display: table;
color: #fff;
padding: 4px;
font-size: 13px;
}
.like i{
background-color: #5fda67;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.dislike i{
background-color: #ac060b;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.likes ,.dislikes {
display: table;
min-width: 100%;
padding: 0 2px;
background-color: #fff;
}
.picture-news{
display: table;
}
.picture-news img{
width: 100%;
height: 100%;
}
.comment-news h4{
margin: 0;
text-align: right;
}
.name .fa{
margin-left: 7px;
vertical-align: middle;
position: relative;
font-size: 30px;
}
.answer-user .fa-reply{
font-size: 20px!important;
}
.name .fa-envelope-o{
font-size: 20px;
}
.topic-text{
height: 100%;
text-align: justify;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 0;
position: relative;
}
.topic-text .k1-item{
}
.hidden {
display: none;
}
ul.stickerset_modal_stickers_list{
width: 100%;
list-style: none;
padding: 0;
height: 100%;
}
ul.stickerset_modal_stickers_list li{
padding: 10px 10px;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap{
width: 100%;
padding: 5px;
background-color: #fff;
display: block;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.19) 1px 1px 3px 0;
min-height: 120px;
cursor: pointer;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap .stickerset_modal_sticker{
width: 80%;
min-width: 25px;
display: table;
text-align: center;
margin: auto;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap .stickerset_modal_sticker img{
max-width: 100%;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap .stickerset_modal_sticker_alt{
height: 100%;
word-wrap: break-word;
display: block;
margin: auto;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap .stickerset_modal_sticker_alt
.emoji{
display: block;
width: 100%;
font-size: 13px;
padding: 3px;
text-align: center;
}
.heartbeat {
color:#fff ;
}
.popup-body .fa-pencil ,.popup-body .heartbeat{
margin-left: 5px;
position: relative;
top: 1px;
}
.active .heartbeat{
color:#ac060b ;
}
.active .fa-pencil{
color: #000;
}
.popup-body .tab-pane {
padding: 0 0px;
}
.live-program .live_play .wave1,.live-program .live_play
.wave2, .live_play .wave3 {
fill: #fff;
}
.live-program .live-icon{
width: 37px;
vertical-align: middle;
margin: 0 0 0 6px;
}
.parent-time{
position: relative;
width: calc(100% - 90px);
background-color: #e9e7e7;
height: 20px;
float: left;
}
.parent-time:after{
content: "";
position: absolute;
height: 1px;
background-color: #808080;
left: 0;
right: 0;
top: 10px;
z-index: 0;
}
.current-time {
position: absolute;
bottom: 9px;
margin: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: rgb(185, 42, 22);
color: #fff;
font-size: 12px;
height: 20px;
line-height: 20px;
border-radius: 4px;
font-size: 16px;
text-align: center;
min-width: 45px;
}
.current-time:before{
content: "";
border-top: 5px solid rgb(185, 42, 22);
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
bottom: -9px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.circle-time{
height: 4px;
border-radius: 50%;
position: absolute;
top: 8px;
width: 4px;
z-index: 2;
background-color: #403e3e;
}
.body-time{
width: 100%;height:20px;line-height: 20px;padding: 0
5px;font-size: 12px;
background-color: #e9e7e7;
}
.body-time .end,.body-time .start{
padding:0 5px;
height: 20px;
min-width: 35px;
font-size: 15px;
}
.login{
position: relative;
background-color: rgb(255, 255, 255);
top: 0;
right: 0;
left: 0;
bottom: 8px;
z-index: 100;
}
.Avatar.light-box{
min-height: 400px;
}
.Avatar {
height: 205px;
}
.Avatar ul{
width: 100%;
overflow: hidden;
overflow-Y: auto;
padding: 0;
height: 100%;
text-align: center;
}
.Avatar ul li{
display: inline-block;
}
.Avatar ul li .avatar-item{
width: 90px;
height: 90px;
margin: 5px;
background-color: #b9b9b9;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.Avatar ul li .avatar-item img{
width: 100%;
margin: auto;
display: block;
padding: 5px;
}
.emojionearea .emojionearea-picker .emojionearea-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.emojionearea .emojionearea-picker .emojionearea-scroll-area
{
height: calc(100% - 40px);
overflow: auto;
overflow-x: hidden;
width: 100%;
position: absolute;
padding: 0 0 5px;
}
.login-title{
border-right: 5px solid #c10000;
padding: 6px 10px;
background-color: #e8e8e8;
margin: 0 -15px;
font-size: 22px;
font-weight: bold;
}
.chat{
overflow: hidden!important;
overflow-x: auto!important;
}
.chat-scroll{
width: 100%;
height: 100%;
overflow: hidden;
overflow-y:auto;
-ms-overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 152px;
padding-top: 53px;
position: fixed;
top: 0;
bottom: 0;
}
.chat-scroll,.heather_bar,.chat{
min-width: 300px!important;
}
.chat-scroll::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #b80d00;
-webkit-box-shadow: 0 0 1px #ccc;
}
.iframe{
overflow: hidden;
}
/* ---------------------------
onair------------------------------ */
.on-air{
}
.heather_bar.on-air{
}
.heather_bar.on-air .logo{
}
.heather_bar.on-air .live_play{
display: inline-block;
width: 40px;
height: 40px;
float: left;
margin: 3px;
}
.heather_bar.on-air{
background: linear-gradient(144deg, #810000, #ff0000,
#810000, #ff0000, #720000);
background-size: 1000% 1000%;
-webkit-animation: on-air-bg 10s cubic-bezier(0.4, 0,
0.2, 1) infinite;
-moz-animation: on-air-bg 10s cubic-bezier(0.4, 0, 0.2,
1) infinite;
-o-animation: on-air-bg 10s cubic-bezier(0.4, 0, 0.2, 1)
infinite;
animation: on-air-bg 10s cubic-bezier(0.4, 0, 0.2, 1)
infinite;
}
@-webkit-keyframes on-air-bg {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
@-moz-keyframes on-air-bg {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
@-o-keyframes on-air-bg {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
@keyframes on-air-bg {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
/*--------------------------------------
end--------------------------------------------*/
/*=======================================like================
==========================*/
/* Button container */
.progress-button {
position: relative;
display: inline-block;
text-align: center;
width: 60px;
height: 60px;
min-width: 60px;
margin: 0;
}
/* Button style */
.progress-button button,.progress-button .button {
display: block;
line-height: 60px;
margin: 0 auto;
padding: 0;
width: 61px;
height: 60px;
border: 2px solid #d10000;
background-color: #d10000;
border-radius: 50%;
color: #ffffff;
letter-spacing: 1px;
font-size: 23px;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background-color 0.3s, color 0.3s,
width 0.3s, border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width
0.3s, border-width 0.3s, border-color 0.3s;
}
.progress-button button:hover,.progress-button .button:hover
{
background-color: #ff0000;
color: #fff;
}
.progress-button button:focus,.progress-button .button:focus
{
outline: none;
}
/* Text (transition for when returning to initial state) */
.progress-button button span,.progress-button .button span {
-webkit-transition: opacity 0.3s 0.1s;
transition: opacity 0.3s 0.1s;
}
/* Common style of SVGs */
.progress-button svg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.progress-button svg circle,.progress-button svg path {
opacity: 0;
fill: rgba(255, 255, 255, 0.59);
}
.progress-button svg.progress-circle circle,.progress-button
svg.progress-circle path {
stroke: #d10000;
stroke-width: 5;
}
.progress-button svg.checkmark path,
.progress-button svg.cross path {
stroke: #fff;
stroke-linecap: round;
stroke-width: 4;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
}
/* Loading, success and error effects */
.loading.progress-button button,.loading.progress-button
.button {
width: 60px; /* make a circle */
border-width: 5px;
border-color: #ddd;
background-color: transparent;
color: #fff;
}
.loading.progress-button span {
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}
.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
opacity: 0; /* keep it hidden in all states */
}
.success.progress-button button,
.error.progress-button button {
-webkit-transition: background-color 0.3s, width 0.3s,
border-width 0.3s;
transition: background-color 0.3s, width 0.3s, border-
width 0.3s;
}
.success.progress-button button,.success.progress-button
.button {
border-color: #d10000;
background-color: #d10000;
}
.error.progress-button button,.error.progress-button .button
{
border-color: #FB797E;
background-color: #FB797E;
}
.loading.progress-button svg.progress-circle path,
.success.progress-button svg.checkmark path,
.error.progress-button svg.cross path {
opacity: 1;
-webkit-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
}
/* Optional elastic effect for the width of the button */
.elastic.progress-button button,.elastic.progress-button
.button {
-webkit-transition: background-color 0.3s, color 0.3s,
width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width
0.3s, border-color 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s,
width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width
0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s
cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s,
border-color 0.3s;
}
.loading.elastic.progress-button button
,.loading.elastic.progress-button .button {
-webkit-transition: background-color 0.3s, color 0.3s,
width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width
0.3s, border-color 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s,
width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width
0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s
cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s,
border-color 0.3s;
}
.icon:before{
content: "";
width: 29px;
height: 29px;
display: inline-block;
margin: auto auto auto auto;
background-position: center center;
background-size: cover;
vertical-align: middle;
}
.report .icon:before{
width: 20px;
height: 20px;
vertical-align: sub;
}
.broken-heart-o:before{
background-image: url("../img/broken-heart-o.svg");
}
.broken-heart:before{
background-image: url("../img/broken-heart.svg");
}
.parent_sticker{
width: 100%;
float: right;
}
.parent_sticker img{
width: 100%;
height: auto;
min-width: 100px;
max-width: 250px;
display: block;
}
#myModal .close{
position: absolute;
bottom: -29px;
right: 0px;
width: 50px;
height: 50px;
background-color: #FFF;
border-radius: 50%;
opacity: 1 !important;
z-index: 3;
text-align: center;
line-height: 50px;
color: #757575;
border: 1px solid #757575;
left: 0px;
margin: auto;
}
.before-liked{
width: 100%;
height: 25px;
background-color: rgba(16, 16, 16, 0.56);
position: absolute;
left: 0;
top: 45px;
z-index: 1;
color: #fff;
text-align: center;
padding-bottom:22px;
padding-top: 5px;
}
.disabled_button{
background-color: #a3a9a3 ;
cursor: not-allowed;
}
.send-message:hover,.send-message:active{
background-color: #2ab133;
text-shadow: -1px 2px 1px #000;
}
.disabled_button:hover{
color: #fff;
background-color: #5fda67!important;
text-shadow:none!important;
}
.not_allow_like{
cursor: not-allowed!important;
}
.not_allow_disable{
cursor: not-allowed!important;
background-color: #b19f9f !important;
position: fixed;
border-radius: 50%;
}
.not_allow_disable button{
border: none!important;
background-color: inherit!important;
}
.emojionearea .emojionearea-picker .emojionearea-scroll-area
h1{
text-align:center;
}
.preload_back{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25);
position: fixed;
z-index: 10;
}
.test_back{
width: 100%;
height: 100%;
position: relative;
}
.test_back .spiner2{
top: 50%;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
}
.emojionearea{
height: inherit;
}
/*======================================end
like=============================================*/
@media screen and (max-width: 1600px) and (min-width: 320px)
and (orientation: landscape) {
*::-ms-backdrop, .float-popup .popup .close {
margin: inherit!important;right: inherit!important;left:
15px!important; } /* IE11 */
.float-popup .popup .close {
position: absolute;
bottom: initial;
top: 1px;
right: initial;
left: 15px !important;
background-color: inherit!important;
border-radius: 50%;
opacity: 1 !important;
z-index: 100!important;
text-align: center;
line-height: 50px;
color: red;
border: 0!important;
text-shadow: none!important;
margin: inherit\9;
}
.float-popup .popup .close #hack{
margin: inherit;/* Only works in IE10 */
}
.login-title {
padding: 13px 10px;!important;}
/* .login {
position: absolute;
top: 2px!important;
right: 15px!important;
left: 15px!important;
bottom: 8px!important;
}*/
.tab-content {
/* height: 198px; */
}
.Avatar {
height: 110px;
}
.newContent .form-control {
height: inherit!important;
}
.chat-body .answer {
min-width: 319px;
}
}
@media screen and (max-width: 768px){
.container {
min-width: 100%;
}
.answer-user .topic-picture {
height: 142px;
overflow: hidden;
}
}
@media screen and (max-width:700px){
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap {
text-align: center;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap .stickerset_modal_sticker {
width: 60%;
min-width: 88px;
display: table;
text-align: center;
margin: auto;
}
ul.stickerset_modal_stickers_list li
.stickerset_modal_sticker_wrap {
min-height: 139px;
}
.chat-body .answer.right .text{
text-align: right;
font-size: 15px;
}
}
@media screen and (max-width:670px){
.chat-body .answer.left {
padding: 0 0px 0 79px;
}
#AppendLoader {
margin: 0 -14px 0 0;
}
.answer-user .topic-picture {
height: 146px;
}
.topic-text .col-xs-4{
width: 110px!important;
}
.news-item-v1 .k1-item-a::before {
background-color: #a10007;
width: 22px;
height: 22px;
font-size:14px;
line-height:22px;
}
.chat-body .answer {
max-width: 100%;
}
}
@media screen and (max-width:560px){
.dislike-program,.likes-program,.reply-button,.attach {
bottom: 47px;
}
}
@media screen and (max-width:480px){
.top {
bottom: 121px;
}
.chat-body .answer {
max-width: 100%;
min-width: 274px;
}
.chat-body .answer.left,.chat-body .answer.right {
float: none;
margin: auto;
}
.container-fluid {
padding-right: 6px;
padding-left: 0;
}
.answer-user .topic {
height: 110px;
}
.chat .avatar {
width: 50px;
height: 50px;
}
.chat-body .answer.right {
padding: 0 54px 0 46px;
}
.chat-body .answer.left {
padding: 0 0 0 56px;
}
#AppendLoader {
margin: 0 -7px 0px 0px;
}
.emojionearea .emojionearea-picker.emojionearea-picker-
position-top {
width: calc(100% + 40px);
height: calc(100% + 83px);
}
.topic-text .col-xs-4{
width: 88px!important;
}
.news-item-v1 .k1-item-a::before {
background-color: #a10007;
width: 22px;
height: 22px;
font-size:14px;
line-height:22px;
}
.comment-news h4 {
margin: 0;
padding-right: 6px;
font-size: 14px;
font-weight: bold;
text-align: justify;
}
.comment-news div{
padding-right: 6px;
text-align: justify;
font-size: 14px;
}
.popup-body{
min-width: 300px;
}
}