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

}

@font-face {
  font-family: 'Open Sansi';
  src: url("../fonts/Regular/OpenSans-Regular.eot?v=1.1.0");
  src: url("../fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("../fonts/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("../fonts/Regular/OpenSans-Regular.svg?v=1.1.0#OpenSansBold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sansi';
  src: url("../fonts/Italic/OpenSans-Italic.eot?v=1.1.0");
  src: url("../fonts/Italic/OpenSans-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Italic/OpenSans-Italic.woff?v=1.1.0") format("woff"), url("../fonts/Italic/OpenSans-Italic.ttf?v=1.1.0") format("truetype"), url("../fonts/Italic/OpenSans-Italic.svg?v=1.1.0#OpenSansBold") format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Open Sansi';
  src: url("../fonts/Bold/OpenSans-Bold.eot?v=1.1.0");
  src: url("../fonts/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"), url("../fonts/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"), url("../fonts/Bold/OpenSans-Bold.svg?v=1.1.0#OpenSansBold") format("svg");
  font-weight: bold;
  font-style: normal;
}

canvas{
	width: 100% !important;
	height: auto !important;
}

.topbtn>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
	border-top-left-radius: 0;
}
.topbtn>.btn:last-child:not(:first-child):not(.dropdown-toggle) {
	border-top-right-radius: 0;
}
	
html {
height: 100%;
}

#my_camera2 {
max-width: 100%;
text-align: center;
margin: 0 auto;
}

.shares {
height: 90px;
}

#my_camera2 video, #my_camera2 canvas {
max-height: 100%;
max-width: 100%;
}
body {
font-family: 'Open Sansi', sans-serif;
background: url('../images/taustat.jpg');
background-size: 100% auto;
background-position: top;
}

.unreaded {
background-color: orange;
}

.reveal-modal {
display: none;
}

.ignoreuser {
color: #ccc;
}

.ignoreuser:hover {
color: #666;
cursor: pointer;
}

.bgwhite {
background: #FFFFFF;
box-shadow: 0px 0px 20px #333;
}

.navbar-header a {
color: white !important;
font-size: 2.5em;
margin-top: 0em;
text-shadow: 0px 0px 5px #666;
}

.rezregular {
font-family: 'rezregular';
}

.gonline {
position: absolute;
right: 3em;
background: white;
z-index: 100;
border-radius: 0px 0px 5px 5px;
padding: 2px;
cursor: pointer;
border: 1px solid #ccc;
border-width: 0px 1px 1px 1px;
}

.gonline ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

.gonline li {
padding: 2px 0px;
border-top: 1px solid #eee;
}

.minichatbtn {
padding: .5em .5em;
border: 1px solid #ccc;
border-width: 1px 0px 1px 0px;
}

body .minichatbtn .close {
margin-top: 2px;
margin-left: 5px;
font-size: 1em;
}

body .minichatbtn .status {
margin-top: 5px;
}

#minichats {
height: 34px;
}

#minichats .chat {
width: 210px;
float: right;
margin-right: 1em;
margin-top: -305px;
border: 1px solid #ccc;
border-width: 0px 1px 0px 1px;
position: relative;
}

#minichats .moretab {
float: right;
margin-right: 1em;
border: 1px solid #ccc;
border-width: 0px 1px 0px 1px;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 5px;
}

#minichats .moretab.left {
position: fixed;
left: 1em;
}



#minichats .closed .statusline:before {
content: "...";
visibility: visible;
float: right;
margin-right: 5px;
}

.closed .statusline {
visibility: hidden;
}

#minichats .chatdata li {
padding: 0px 5px;
font-size: .9em;
line-height: 1.5em;
word-break: break-word;
}

#minichats .closed .chatwindow-info {
display: none;
}

#minichats .chatwindow-info {
position: relative;
margin-top: -30px;
left: 0px;
}

#minichats .chatwindow-info.hided {
margin-top: 0px;
}

#minichats .chatdata .line1, #minichats .chatdata .line2 {
font-size: .9em;
}

#minichats .chatdata li small {
float: right;
font-size: 65%;
}

#minichats li img {
max-width: 100%;
}

#minichats .chat.closed {
width: 150px;
margin-top: 0px;
}

#minichats .chatinputs textarea {
padding: 3px;
font-size: 12px;
height: 28px;
max-width: 100%;
}

#minichats .chat-window {
height: 277px;
overflow-y: auto;
}

.chat.closed .chat-window {
display:none;
}

.chat.closed .ignore {
display:none;
}

#minichats .medias, #minichats .sends {
padding: 3px;
}

#minichats .sends {
margin-right: -1px;
}

#chatmenu {
z-index: 2;
position: fixed;
bottom: 0;
right: 0;
box-shadow: 0px 0px 5px #ccc;
border-top-left-radius: 5px;
}

#minichats {
position: fixed;
bottom: 0;
right: 200px;
z-index: 2;
width: 100%;
}

#minichats .chatdata li.forstatus {
height: 20px;
}

#minichats .chatdata li.seemore:hover {
cursor: pointer;
background: #eee;
}

#minichats .chatdata li.seemore {
text-align: center;
padding: 3px;
}

#minichats .statusline {
font-size: 12px;
margin-top: -21px;
padding: 2px 10px;
}

#chatmenu:hover {
cursor: pointer;
}

#chatmenu input {
border-radius: 0px;
}

.menubutton {
width: 200px;
padding: .5em .5em ;
}
.menubutton.open {
}

.settingsmenu {
float: right;
line-height: 33px;
padding: 0px 10px;
}

.settings .list-group {
margin-bottom: 0px;
width: 200px;
}

.settings .list-group-item:first-child, .settings  .list-group-item:last-child {
border-radius: 0px;
}

.friendlist {
background: #fff;
max-height: 368px;
}

.newmsg {
	background: #D7F4DD;
}

.friendlist-of {
overflow-y: auto;
}

.friendlist ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

.friendlist li {
position: relative;
line-height: 35px;
border-bottom: 1px solid #eee;
padding: 5px;
}

.friendlist .status {
height: 10px;
width: 10px;
border-radius: 5px;
float: right;
margin-top: 13px;
}

.friendlist .away .status {
background: #f2902e;
}
.friendlist .online .status {
background: #6FEA2E;
}
.friendlist .offline .status {
background: #ccc;
}

.friendlist li.user:hover {
cursor: pointer;
background: #ddd;
}

#chatmenu .friendlist li img {
float: left;
border-radius: 20px;
margin-right: .5em;
}

.topper {

min-height: 300px;
margin-top: 50px;
color: white;
text-shadow: 0px 0px 10px #333;
}

.topper a {
color: #fff;
font-size: 0.7em;
}

.right {
float: right;
}

.left{
float: left;
}

.tabs {
margin-top: -41px;
      overflow-x: auto;
	  overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
height: 43px;

}

.tabs .nav-tabs {
max-height: 43px;
white-space: nowrap;
}

.tabs li {
display:inline; 
}

.tabs li a {
background-color: rgba(255,255,255,0.6);
margin-right: 10px;
}

#error {
padding-top: 1em;
}

.topperchat {
min-height: 50px;
}

@media (max-width: 768px) { 
	body {
		background-size: auto 100%;
	}
	.topperchat {
		min-height: 0px;
	}
	
	.hidden-mobile {
		display: none;
	}
	.inputmobileadd {
		padding-bottom: 9px;
	}
	
	.col-md-12:not(.visible-xs) .chats>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
		border-bottom-left-radius: 0;
	}
}

@media (min-width: 769px) { 
	.navbar-header {
		background: #222 !important;
	}
}

@media (min-width: 769px) and (max-width: 991px) { 
	.navbar .container {
		width: 100%;
	}
}

@media (max-width: 991px) {
	body .colorize li a:before {
		content: "";
	}
}

.topper p {
font-size: 1.5em;
}

.topper i {
font-size: 6em;
margin-bottom: .2em;
}

.topper h1 {
font-size: 4em;
margin-bottom: .5em;
}

p.teksti {
font-size: 1.3em;
}

.chats .btn {
line-height: 3em;
}

.navbar-brand {
margin-top:-0.15em;
}

.navbar-brand:hover {
opacity: 0.8;
}

body .colorize li a:before {
content: "// ";
font-weight: bold;
color: #B5CF47;

}

.footer {
color: white;
padding: 1em;
text-shadow: 0px 0px 10px #333;

  -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    -o-transition:all 1s ease-in;
    -ms-transition:all 1s ease-in;
    transition:all 1s ease-in;
}

.footer a {
color: white !important;
}

hr {
border: 1px solid #ccc;
}

.chats>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-left-radius: 0;
}

.chats>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
border-top-right-radius: 0;
}

/* CHAT */
.chatinputs .btn {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}

body .smileybtn {
border-radius: 0px;

}

.tools {
margin-top: 1.5em;
}

body textarea.messageinput {
border-left: 0;
border-right: 0;
height: 34px;
max-width: 100%;
}

.popover-content {
padding: 0px;
}

.webcam {
height: 270px;
}

.camblock {
margin-bottom: -34px;
z-index: 1000;
}

.camblock.bigger .webcam {
height: 90%;
}

.camblock.bigger .webcam#localVideo {
margin-top: -150px;
text-align: left;
}

.chatform .messageinput {
min-height: 34px;
}

.webcam#localVideo {
height: 150px;
text-align: center;
}

.webcam#localVideo object {
width: 100% !important;
height: 100% !important;
text-align: center;
}

.webcambtn .btn {
border-radius: 0px 0px 5px 5px;
}

.webcam video, .webcam object {
max-width: 100%;
max-height: 100%;
}

.webcam#remoteVideo video, .webcam#remoteVideo object {
width: 100% !important;
height: 100% !important;
}



.webcam:first-child {
border-radius: 0px 0px 5px 5px;
}

.webcam#remoteVideo video:not([src]) {
    display: none;
}
.webcam#remoteVideo object {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}


#smileybtn {
border-radius: 0px;
border-left-width: 0px;
border-right-width: 0px;
}

.special-class {
max-width: 700px;
max-height: 65%;
}

.special-class .arrow {
top: 100% !important;
}

.special-class .popover-inner {
overflow-y: auto;
height: 21em;
}

body .popover {
max-width: 350px;
}

.proress {
display: none;
}

.proress .progress {
height: 69px;
margin-top: -83px;
margin-bottom: 0px;
}

.proress .percent {
font-size: 2em;
line-height: 69px;
}

#minichats .proress {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
}

.chatpic {
border-radius: 5px;
background: #fff;
}

.chatpic:hover {
opacity: 0.8;
}



.infod {
line-height: 34px;
margin-bottom: 1.5em;
}

.chatwindow-info {
bottom: 0px;
background: white;
background: rgba(255,255,255,0.9);
position: absolute;
left: 1.2em;
z-index: 1;
right: 2.4em;
border: 1px solid #ccc;
border-width: 1px 0px 0px 0px;
font-weight: bold;
}

.chatwindow-info:hover {
background: white;
cursor: pointer;
}

.chatwindow-info .infomessage {
padding: 5px;
}

.chatdata {
  padding:0;
  margin:0;
  list-style: none;
  width: 100%;
  display: table-cell;
vertical-align: bottom;
}


.chat-window {
height: 500px;
border: 1px solid #ccc;
border-width: 0px 1px;
 position: relative;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  overflow: hidden;
  overflow-y: scroll;
  z-index: 1;
  -webkit-overflow-scrolling:touch;
}

.inner-chat {
display: table;
width: 100%;
height: 100%;
}

li.forstatus {
height: 32px;
}

.chatdata li {
  padding: 5px 10px 5px 10px;
  position: relative;
  font-size: 1.05em;
  word-break: break-word;
}

.chatdata li .line1 {
color: #D90000;
}

.chatdata li .line2 {
color: #004080;
}

.chatdata li.status {
font-style: italic;
}

.oldline:nth-child(even){
background: #f5f5f5;
} 
body .oldline {
  padding: 5px 10px 5px 10px;
}

.discon .ad {
margin-bottom: 5px;
}

.searching {
margin-bottom: 15%;
width: 100%;
text-align: center;
}

.sydan {
color: #d30000;
}

textarea.desc {
height: 5em;
}

#file.big {
height: 4em;
}

.suporttext {
line-height: 34px;
color: #999;
}

#esikatselu {
text-align: center;
}

#esikatselu img, #imagebox img {
border-radius: 5px;
}

.profilepic {
max-height: 200px;
max-width: 200px;
border-radius: 5px;
margin-right: 1em;
}

.getpartner {
padding-bottom: 6px;
}

.getpartner img {
height: 50px;
margin-left: 10%;
margin-bottom: -15px;
margin-right: -0.3em;
}

.statusline {
margin-top: -31px;
padding: 5px 10px 5px 10px;
font-size: 1.05em;
}

.dataTables_filter {
text-align: right;
}

.dataTables_paginate {
text-align: right;
}
.dataTables_paginate ul {
margin: 0px;
}


.loginpic {
margin: -1em .5em -1em -.5em;
border-radius: 20px;
}

.sydan:hover {
-webkit-animation: cssAnimation 1s 16 ease;
animation: cssAnimation 1s 16 ease;
}

.frequests {
list-style-type: none;
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(2) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) translate(0px); }
}
@keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(2) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) translate(0px); }
}

.searching i {
font-size: 4em;

    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
    animation: dot 1.3s infinite;
    animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
    animation: dot 1.3s infinite;
    animation-delay: 0.3s;
}

@-webkit-keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }