/* Copyright (C) 2018-2024 skY Widget v2025- Ramadan Addtion. */

*,
::after,
::before {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent
}

a:hover {
    color: #0056b3;
    text-decoration: underline
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0
}

img {
    vertical-align: middle;
    border-style: none
}

table {
    border-collapse: collapse
}

label {
    display: inline-block;
}

button {
    #border-radius: 0;
    border: none;
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    #font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,
input {
    #overflow: visible
}

button,
select {
    text-transform: none;

}

button {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    /* This will make the tabs move smoothly and be visible/hidden */
}

button:focus {
    outline: none; /* Optional: Remove focus outline */
}


select {
    word-wrap: normal
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.row {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ChatContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    flex-flow: column;
    background-color: #f0f0f0;
}

.PadContainer {
    padding: 3px;
}

.ToolbarPanel {
    position: relative;
}

.ChatToolbar {
    position: relative;
    #height: 46px;
    border: 1px solid #d2d2d2;
    border-style: outset;
    position: relative;
    padding: 6px;
    overflow: hidden;
    margin-bottom: 6px;
    display: flex;
    flex-flow: row;
}

.ChannelCounter {
    position: relative;
    margin-top: 0px;
    font-size: 12px;
    float: left;
}

.ChannelName {
    position: relative;
    margin-top: 0px;
    font-size: 12px;
    float: left;
}

.ChannelTopic {
    overflow: auto;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
    text-align: center;
    font-size: 10px;
    margin-top: 0px;
}

/* Mobile view adjustments */
@media (max-width: 480px) {
    .ChannelCounter, .ChannelName {
        font-size: 10px; /* Smaller font size */
        margin: 0 2px;   /* Reduce margins */
        float: none;     /* Stack elements */
        text-align: center; /* Center align text */
    }

    .ChannelTopic {
        font-size: 8px;  /* Reduce font size */
        white-space: normal; /* Allow wrapping for small screens */
        text-align: center;  /* Center align text */
    }
}

.ChannelName,
.ChannelCounter {
    font-weight: 600;
}

.StatusIcon {
    position: relative;
    float: right;
    margin: 8px;
    width: 16px;
    height: 16px;
}

.ChatButton {
    position: relative;
    float: left;
    border: 1px solid #d2d2d2;
    border-style: outset;
    background-color: #fbfbfb;
    border-radius: 4px;
    margin-right: 6px;
    padding: 0px;
    height: 32px;
    width: 32px;
    min-width: 32px;
}

.ChatButton img {
    position: relative;
    top: -2px;
    height: 16px;
    width: 16px;
}

.scroll-button {
    #padding: 5px 10px;
    border: none;
    #background: #ddd;
    cursor: pointer;
    #border-radius: 4px;
}

#csTabsWrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform 0.2s ease-in-out; /* Smooth transition with fast movement */
    overflow: hidden; /* Hide overflow if needed */
}

#csTabs {
    #display: flex;
    #overflow-x: auto; /* Allow horizontal scrolling */
    #white-space: nowrap;
    scroll-behavior: smooth;

    /* Hide the scrollbar */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    scrollbar-width: none;    /* Firefox */
}

#csTabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

.TabBar {
    position: relative;
    margin-bottom: 0px;
    display: flex;
    overflow: auto;
    white-space: nowrap;
	flex-flow: 1;
	width: 2px;
    height: 20px;
    font-size: 12px;
    padding-top: 3px;
}

.TabBar:empty {
    display: none;
}

.TabBar button {
    #border: 1px solid #d2d2d2;
    /* background-color: #fbfbfb; */
    /* border-style: outset; */
    border-radius: 4px;
    padding: 0px 8px;
}

.close-tab {
    margin-left: 10px;
    cursor: pointer;
    color: red;
    font-weight: bold;
}



.ChatArea {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-flow: row;
}

.MainPanel {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-flow: column;
    min-width: calc(70%);
}

.SidePanel {
    position: relative;
    width: 206px;
}

.PanelSlideBar {
    position: relative;
    height: 100%;
    cursor: e-resize;
    width: 6px;
}

.PanelSplit {
    position: relative;
    flex-grow: 1;
	background-color: #f0f0f0;
}

.HistoryPanel {
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px solid #ffffff;
    border-style: outset;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f0f0f0;
    max-height: 100%; /* Ensure it doesn't exceed container */
    border-radius: 0px;
    padding: 6px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-style: solid;
    display: flex;
    flex-direction: column-reverse; /* Messages stack from bottom */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f9f9f9;	
}

/* Webkit scrollbar styling */
.HistoryPanel::-webkit-scrollbar {
    width: 8px;
}

.HistoryPanel::-webkit-scrollbar-track {
    background: #f9f9f9;
}

.HistoryPanel::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
    border: 2px solid #f9f9f9;
}

/* Message element styling */
.HistoryPanel p {
    margin: 0 0 2px 0;
    padding: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
    #animation: fadeIn 0.3s ease-out; /* Optional fade-in effect */
}

#@keyframes fadeIn {
#    from { opacity: 0.5; }
#    to { opacity: 1; }
#}

.HistoryContent {
    position: relative;
    white-space: pre-wrap;
    top: 0px;
    bottom: 0px;
    margin: 0px 0px;
    left: 0px;
    right: 0px;
}

.FixedFont {
    font-size: 22px;
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.HistoryContent p {
    margin: 0px 0px;
    padding: 4px 4px;
    line-height: 21px;
}

/* Small Mobile Devices (up to 480px) */
@media (max-width: 480px) {
    .HistoryContent p {
        padding: 6px;
        font-size: 14px;
        line-height: 1.5;
    }
}

/* Medium Mobile Devices (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .HistoryContent p {
        padding: 8px;
        font-size: 15px;
        line-height: 1.6;
    }
}

/* Large Mobile Devices & Small Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .HistoryContent p {
        padding: 10px;
        font-size: 16px;
        line-height: 1.7;
    }
}

.HistoryContent br {
    clear: left;
}

.FormatBar {
    position: relative;
    top: 6px;
    height: 37px;
    overflow: hidden;
}

.FormatButton {
    float: left;
    border: 0px;
    background-color: #f0f0f0;
    padding: 0px;
    height: 32px;
    width: 32px;
}

.FormatButton img {
    position: relative;
    top: -2px;
    width: 20px;
    height: 20px;
}

.FormatButton~.FormatButton {
    margin-left: 4px;
}

.FormatButton:hover {
    border: 1px solid #d2d2d2;
    border-style: outset;
    border-radius: 4px;
}

.FormatCheckbox {
    display: none;
}

.fcBold {
    background-image: url(../images/formatbar/bold.png);
}

.fcItalic {
    background-image: url(../images/formatbar/italic.png);
}

.fcUnderline {
    background-image: url(../images/formatbar/underline.png);
}

.fcAway {
    background-image: url(../images/formatbar/away.png);
}

.fcPause {
    background-image: url(../images/formatbar/pause.png);
}

.FormatCheckboxLabel {
    float: left;
    margin-left: 4px;
    cursor: pointer;
    border: 1px solid #fbfbfb;
    background-position: 5px 5px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
}

.FormatCheckbox:checked+.FormatCheckboxLabel {
    border: 1px solid #d2d2d2;
    background-color: #ffffff;
    background-position: 6px 6px;
    border-radius: 4px;
    border-style: inset;
}

.FormatCheckbox:not(:checked)+.FormatCheckboxLabel:hover {
    border: 1px solid #d2d2d2;
    border-style: outset;
    border-radius: 4px;
}

.OnRight {
    float: right;
}

.MemberList {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - -6px);
    bottom: 0px;
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    border-style: outset;
    overflow-x: hidden;
    overflow-y: auto;
}

#lblMembers div {
    height: 24px;
    border: 1px solid #f0f0f0;
    background-position: 3px 1px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding-left: 27px;
    margin-left: 0px;
    cursor: default;
    font-size: 14px;
    overflow: hidden;
}

/* Adjust for smaller screens */
@media screen and (max-width: 480px) {
    #lblMembers div {
        font-size: 12px;
        padding-left: 20px;
        background-size: 16px 16px;
    }
}

/* Adjust for medium screens */
@media screen and (min-width: 481px) and (max-width: 768px) {
    #lblMembers div {
        font-size: 13px;
        padding-left: 23px;
        background-size: 18px 18px;
    }
}

/* Adjust for large mobile screens */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #lblMembers div {
        font-size: 14px;
        padding-left: 25px;
        background-size: 20px 20px;
    }
}

#lblMembers div:hover {
    border: 1px solid #1881c4;
    background-color: #daf1ff;
}

#lblMembers .Selected {
    border: 1px solid #aec3d0;
    background-color: #9ad8ff;
}

#lblMembers .Selected:hover {
    border: 1px solid #6cc6fe;
    background-color: #edf4f8;
}

.group-header {
    #padding: 3px 5px;
    margin-top: px;
    font-weight: bold;
    background-color: #d7d7d7;
    color: #333;
    border-bottom: 1px solid #ddd;
    #text-transform: uppercase;
    font-size: 0.8em;
}

.group-header {
    padding-left: 0 !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
}

.group-header-text {
    display: inline-block;
    padding-left: 0;
    margin-left: 0;
}

.MemberList .group-header {
    margin-left: 2px;
} 

.MemberList .IRCop {
    background-image: url(../images/members/host.png);
}

.MemberList .Owner {
    background-image: url(../images/ranks/Owner-v1.png);
}

.MemberList .SuperAdmin {
    background-image: url(../images/ranks/Admin-v1.png);
} 

.MemberList .Admin {
    background-image: url(../images/ranks/Admin-OP.png);
}

.MemberList .RJ {
    background-image: url(../images/ranks/rjlive.gif);
}

.MemberList .Vip {
    background-image: url(../images/ranks/Vip-v1.png);
}

.MemberList .Participant {
    background-image: url(../images/members/participant.png);
}

.MemberList .Spectator {
    background-image: url(../images/members/spectator.png);
}

.MemberList .Away {
    background-image: url(../images/members/away.png);
}

.MemberList .Register {
    background-image: url(../images/members/away.png);
}

.MemberList .Ignored {
    background-image: url(../images/members/ignored.png);
}

.MemberList .avatar {
    background-image: url(../images/members/participant.png);
}

#.group-ircop {
#    background-image: url(../images/members/host.png);
#}

#.group-superadmin {
#    background-image: url(../images/ranks/Admin-v1.png);
#} 

#.group-admin {
#    background-image: url(../images/ranks/Admin-OP.png);
#} 

#.group-rj {
#    background-image: url(../images/ranks/rjlive.gif);
#}

#.group-vip {
#    background-image: url(../images/ranks/Vip-v1.png);
#}

#.group-other {
#    background-image: url(../images/members/participant.png);
#}


@keyframes fire {
    0% { text-shadow: 0px 0px 5px #ff4500, 0px 0px 10px #ff6347, 0px 0px 15px #ff0000; }
    50% { text-shadow: 0px 0px 10px #ff6347, 0px 0px 15px #ff0000, 0px 0px 20px #ff4500; }
    100% { text-shadow: 0px 0px 5px #ff0000, 0px 0px 10px #ff4500, 0px 0px 15px #ff6347; }
}

.IRCop span {
    font-weight: bold;
    color: hsl(162, 44%, 95.1%); /* Correct HSL format */
    animation: fire 0.8s infinite alternate;
}

@property --k {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.Owner span {
  --k: 0;
  background: 
    linear-gradient(90deg, 
      hsl(calc(var(--k)*1turn), 95%, 65%), 
      hsl(calc(var(--k)*1turn + 90deg), 95%, 65%)) text;
  color: transparent;
  font: 700 clamp(.875em, 7.25vw, 1.0em) sans-serif;
  text-transform: uppercase;
  animation: k 4s linear infinite;
}

@keyframes k { 
  to { --k: 1; } 
}

@keyframes rainbow {
    0% { color: red; }
    14% { color: orange; }
    28% { color: yellow; }
    42% { color: green; }
    57% { color: blue; }
    71% { color: indigo; }
    85% { color: violet; }
    100% { color: red; }
}

.SuperAdmin span {
    font-weight: bold; /* Make text bold */
    animation: rainbow 2s infinite linear;
}


.Admin span {
    color: Blue; 
}

@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@400;600;700&display=swap");

@keyframes flicker {
	0% {
		opacity: 0.5;
		text-shadow: 2px 2px 10px #2962ff;
	}
	100% {
		opacity: 1;
		text-shadow: 2px 2px 20px #FFD166;
	}
}


.Vip span {
	font-style: italic;
	#text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: #2C3E50;
	-webkit-text-stroke-width: 1px;
	text-shadow: 2px 2px 10px #2962ff;
	transition: all 0.10s ease-in-out;
	text-align: center;
	letter-spacing: 0.1em;
	animation: flicker 0.25s ease-in-out infinite alternate;
}

.tisha::after {
    content: "🦋";
    color: #ff69b4; /* Pink butterfly */
    font-size: 1.1em;
    display: inline-block;
    animation: float 2s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.testest::after {
    content: "🦋";
    color: #ff69b4; /* Pink butterfly */
    font-size: 1.1em;
    display: inline-block;
    animation: float 2s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}


.shayaan {
    position: relative;
    padding-right: 1.6em; /* Space for the lion */
}

.shayaan::after {
    content: "🦁";
    display: inline-block;
    color: #d4a017;
    font-size: 1.2em;
    position: absolute;
    #right: 0;
    top: 50%;
    transform: translateY(-50%);
    animation: roar 1.5s infinite;
}

@keyframes roar {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

.ash {
    position: relative;
    padding-right: 1.6em; /* Space for the heart */
}

.ash::after {
    content: "❤️";
    display: inline-block;
    color: #ff0000;
    font-size: 1.2em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    animation: heartbeat 1.5s infinite;
}

@keyframes ash {
    0% { transform: translateY(-50%) scale(1); }
    25% { transform: translateY(-50%) scale(1.3); }
    50% { transform: translateY(-50%) scale(1); }
    75% { transform: translateY(-50%) scale(1.3); }
    100% { transform: translateY(-50%) scale(1); }
}

.ash-msgs {
    color: #800080;
}

.yum {
    position: relative;
    padding-right: 1.6em; /* Space for the penguin */
}

.yum::after {
    content: "🐧";
    display: inline-block;
    font-size: 1.2em;
    position: absolute;
    #right: 0;
    top: 50%;
    transform: translateY(-50%);
    animation: waddle 1s infinite ease-in-out;
}

@keyframes waddle {
    0%, 100% { transform: translateY(-50%) rotate(-5deg); }
    50% { transform: translateY(-50%) rotate(5deg); }
}

.cub {
    position: relative;
    padding-right: 1.6em; /* Space for the ghost */
}

.cub::after {
    content: "👻";
    display: inline-block;
    font-size: 1.4em; /* Slightly bigger for visibility */
    position: absolute;
    #right: 0;
    top: 8px;
    transform: translateY(-50%);
    animation: float 3s infinite ease-in-out;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); /* Glow effect */
}

@keyframes float {
    0%, 100% { 
        transform: translateY(-50%) translateX(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-55%) translateX(-5px) rotate(2deg); 
    }
    50% { 
        transform: translateY(-60%) translateX(5px) rotate(-2deg); 
    }
    75% { 
        transform: translateY(-55%) translateX(-5px) rotate(2deg); 
    }
}

/* Optional: Pulsing glow (for extra spookiness) */
.ghost:hover::after {
    animation: float 3s infinite ease-in-out, glow 1.5s infinite alternate;
}

@keyframes glow {
    from { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); }
    to { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }
}

.khofsurat {
  position: relative;
  padding: 0 1em; /* Space for both skulls */
  display: inline-block;
}

/* Left skull (before) */
.khofsurat::before {
  content: "☠️";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  animation: 
    float-left 4s infinite ease-in-out,
    rotate 8s infinite linear;
  filter: drop-shadow(0 0 2px rgba(255,0,0,0.5));
}

/* Right skull (after) */
.khofsurat::after {
  content: "☠️";
  position: absolute;
  right: 10;
  top: 50%;
  transform: translateY(-50%);
  animation: 
    float-right 3s infinite ease-in-out,
    rotate-reverse 6s infinite linear;
  filter: drop-shadow(0 0 2px rgba(0,255,255,0.5));
}

/* Animations */
@keyframes float-left {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-55%) translateX(-5px); }
}

@keyframes float-right {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-45%) translateX(5px); }
}

@keyframes rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes rotate-reverse {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(-360deg); }
}

/* Bonus: Pulsing glow on hover */
.khofsurat:hover::before,
.khofsurat:hover::after {
  animation: 
    float-left 4s infinite ease-in-out,
    rotate 8s infinite linear,
    pulse 1.5s infinite alternate;
}

@keyframes pulse {
  from { filter: drop-shadow(0 0 2px rgba(255,0,0,0.5)); }
  to { filter: drop-shadow(0 0 8px rgba(255,0,0,0.9)); }
}

.solitude {
  position: relative;
  padding-right: 1.8em; /* Space for the teddy */
  display: inline-block;
}

/* Right teddy only */
.solitude::after {
  content: "🧸";
  position: absolute;
  #right: 0;
  top: 50%;
  font-size: 1.3em;
  transform: translateY(-50%);
  animation: 
    teddy-hug 2s infinite ease-in-out;
}

/* Simple hug animation */
@keyframes teddy-hug {
  0%, 100% { 
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  50% { 
    transform: translateY(-50%) scale(1.1) rotate(15deg);
  }
}

/* Optional color change (brown teddy) */
.solitude.tan::after {
  filter: hue-rotate(-20deg) saturate(1.3);
}

.kish_mish {
  position: relative;
  padding-right: 2em; /* Space for the cigarette */
}

.kish_mish::after {
  content: "🚬";
  position: absolute;
  #right: 0;
  top: 35%;
  transform: translateY(-50%);
  animation: smoke 3s infinite ease-out;
}

/* Smoke animation */
@keyframes smoke {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  50% {
    content: "🚬💨";
    transform: translateY(-50%) translateX(5px);
    opacity: 0.8;
    filter: blur(1px);
  }
  100% {
    content: "🚬";
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Optional: Burning tip */
.kish_mish::before {
  content: "";
  position: absolute;
  left: 4.6em;
  top: 45%;
  width: 4px;
  height: 4px;
  background: #ff4500;
  border-radius: 50%;
  animation: flicker 0.5s infinite alternate;
  opacity: 0;
}

@keyframes flicker {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 0.8; transform: scale(1.2); }
}

.kish_mish:hover::before {
  opacity: 1;
}

.shayaan-msgs {
    color: #0063b5;
}

.thechic-msgs {
    color:#009300;
}

.InputPanel {
    position: relative;
}

.InputBar {
    margin-top: 6px;
    position: relative;
    border: 1px solid #d2d2d2;
    border-style: outset;
    padding: 8px;
    height: 48px;
    width: 100%;
    display: flex;
    flex-flow: row;
}

.CommandInput {
    float: left;
    height: 32px;
    padding-top: 2px;
    flex-grow: 1;
    background-color: #ffffff;
    border: 1px solid #d2d2d2;
    border-style: outset;
    overflow-x: hidden;
    overflow-y: hidden;
}

.CommandInput:focus {
    outline: none;
    background-color: #ffffff;
    border: 1px solid #d2d2d2;
    border-style: outset;
}

.CommandButtons {
    #min-width: 140px;
}

.CommandButtons button {
    margin-right: 0px;
}

.CommandButtons button:first-of-type {
    margin-left: 6px;
}

.CommandButtons button~button {
    margin-left: 2px;
}

.CommandButtons button:disabled,
button[disabled] {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.Spacer {
    margin-right: 18px;
}

.Hide {
    display: none;
}

.Cwm {
    width: 180px;
    box-shadow: 3px 3px 5px #888888;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    position: fixed;
    display: none;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
}

.CwfHeader {
    position: relative;
    background-color: #afc7e1;
    padding: 4px;
    cursor: default;
}

.CwfHeaderIcon {
    margin: 4px;
    height: 16px;
    width: 16px;
}

.CwfArea {
    position: absolute;
    background-color: #f0f0f0;
    border: 1px solid #d2d2d2;
    border-style: outset;
    left: 50%;
    top: 50%;
    width: 100%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0px 0px 0px 0px;
}

.CwfContainer {
    padding: 4px 12px 4px 12px;
}

.CwmItem {
    padding-left: 12px;
    height: 25px;
}

.CwmItem.Disabled {
    padding-left: 12px;
    color: #A0A0A0;
    height: 25px;
}

.CwmItem:hover {
    background-color: #6CB5FF;
    cursor: pointer;
}

.CwmItem.Disabled:hover {
    background-color: #EFEFEF;
    cursor: pointer;
}

#csConnectDialog {
    max-width: 380px;
}

#csJoinDialog {
    max-width: 380px;
}

#csCaptchaDialog {
    max-width: 430px;
}

#csListDialog {
    max-width: 620px;
}

#csNickDialog {
    max-width: 380px;
}

#csKickDialog {
    max-width: 380px;
}

#csAboutDialog {
    max-width: 370px;
}

#csBanDialog {
    max-width: 400px;
}

#csModeDialog {
    max-width: 424px;
}

#CaptchaImage {
    border: 1px solid #000000;
    width: 360px;
}

#lblModeInfo {
    height: 55px;
}

#csBanList {
    height: 97px;
}

.CwfCol-5 {
    float: left;
    width: 5%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-10 {
    float: left;
    width: 10%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-15 {
    float: left;
    width: 15%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-20 {
    float: left;
    width: 20%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-25 {
    float: left;
    width: 25%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-30 {
    float: left;
    width: 30%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-35 {
    float: left;
    width: 35%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-40 {
    float: left;
    width: 40%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-45 {
    float: left;
    width: 45%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-50 {
    float: left;
    width: 50%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-55 {
    float: left;
    width: 55%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-60 {
    float: left;
    width: 60%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-65 {
    float: left;
    width: 65%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-70 {
    float: left;
    width: 70%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-75 {
    float: left;
    width: 75%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-80 {
    float: left;
    width: 80%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-90 {
    float: left;
    width: 90%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.CwfCol-100 {
    float: left;
    #width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.Cwf .NoMargin {
    margin-top: 0px;
    margin-bottom: 0px;
}

.Cwf .NoTopMargin {
    margin-top: 0px;
}

.Cwf .NoBottomMargin {
    margin-bottom: 0px;
}

.ConnectInputLabel {
    float: left;
    #width: 110px;
    text-align: center;
    margin: 2px;
}

.ConnectInput {
    float: left;
    margin: 2px 0px 2px 0px;
    height: 34px;
    width: 220px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea.ConnectInput {
    overflow: hidden;
    white-space: nowrap;
}

.ModeInputLabel {
    float: left;
    width: 75px;
    text-align: right;
    margin: 2px;
}

.ModeInput {
    float: left;
    margin: 2px 0px 2px 0px;
    height: 220px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ModeInputCheckboxA {
    float: left;
    width: 170px;
}

.ModeInputCheckboxB {
    float: left;
    width: 210px;
}

.ModeInputCheckboxC {
    float: left;
    width: 190px;
}

.ModeCheckboxInput {
    float: left;
    margin: 2px 0px 2px 0px;
    height: 34px;
    width: 190px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.StackedInput {
    margin-top: 0px;
    clear: both;
}

.StackedInput Input {
    width: 100%;
}

.StackedButtons,
.CaptchaSpacer {
    margin-top: 9px;
    clear: both;
}

.RoomList {
    width: 100%;
    height: 200px;
}

.Cwf label {
    padding: 4px 8px 4px 0px;
    display: inline-block;
}

.Cwf .row {
    margin-right: 0px;
    margin-left: 0px;
}

.Cwf row:after {
    content: "";
    display: table;
    clear: both;
}

.CwfLeft {
    float: left;
}

.CwfRight {
    #float: right;
}

.CwfRight input {
    #margin: 4px;
}

.CwfSlimInput {
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.CwfInput {
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.Cwf input[type=button] {
    min-width: 120px;
}

.Cwf input[type=radio] {
    margin-right: 2px;
}

.CwfLeft,
.CwfRight {
    margin-top: 12px;
    margin-bottom: 12px;
}

.CwfLeft input[type=button]~input[type=button] {
    margin-left: 12px;
	padding-bottom: 4px;
}

.CwfRight input[type=button]~input[type=button] {
    margin-right: 12px;
	padding-bottom: 4px;
}

.CwfListCheckbox {
    margin: 6px 6px;
}

.CwfModeCheckbox {
    margin: 14px 6px;
}

.StackedButtons label {
    margin-top: -4px;
}

.CwfValidationError {
    color: #ff0000;
}

.Cwf textarea,
.Cwf select {
    resize: none;
}

#csChannelName,
#csChannelTopic {
    white-space: pre-wrap;
}

.RoomList .Emoji {
    padding: 0px 18px 18px 0px;
    background-size: 18px 18px;
}

#csChannelTopic .Emoji {
    padding: 0px 22px 22px 0px;
    background-size: 22px 22px;
}

.RoomList table {
    position: relative;
    width: 100%;
    height: 200px;
    border: 1px outset #d2d2d2;
    background-color: #ffffff;
}

.RoomList td {
    overflow: hidden;
}

.RoomList th:nth-child(1),
.RoomList td:nth-child(1) {
    white-space: pre-wrap;
    min-width: 170px;
    width: 170px;
}

.RoomList th:nth-child(2),
.RoomList td:nth-child(2) {
    min-width: 70px;
    width: 70px;
}

.RoomList th:nth-child(3),
.RoomList td:nth-child(3) {
    white-space: pre-wrap;
    flex-grow: 1;
}

.FixedHeader tbody {
    display: block;
    overflow: auto;
    width: 100%;
}

#csChannelList tbody {
    height: 169px;
}

.FixedHeader tr {
    display: flex;
    flex-flow: row;
    height: 28px;
}

.Cwt thead th {
    cursor: pointer;
    padding-left: 6px;
    background-color: #fbfbfb;
    border: 1px solid #d2d2d2;
}

.FixedHeader td {
    cursor: pointer;
    padding-left: 6px;
    background-color: #ffffff;
    border: 1px solid #f4f4f4;
}

.FixedHeader .Selected td {
    border: 1px solid #aec3d0;
    background-color: #9ad8ff;
}

.FixedHeader tr:hover td {
    border: 1px solid #1881c4;
    background-color: #daf1ff;
}

.FixedHeader .Selected:hover td {
    border: 1px solid #6cc6fe;
    background-color: #edf4f8;
}

.Cwt thead th:after {
    padding-left: 7px
}

.Cwt thead th[CwtColSortOrder="1"]:after {
    content: "\25B4"
}

.Cwt thead th[CwtColSortOrder="-1"]:after {
    content: "\25BE"
}

#csColorPicker {
    box-shadow: 3px 3px 5px #888888;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    position: fixed;
    display: none;
    background-color: #ffffff;
    height: 41px;
    width: 140px;
}

.ColorButton {
    float: left;
    border: 0px;
    padding: 0px;
    height: 16px;
    width: 16px;
    cursor: pointer;
}

.ColorButton:hover {
    border: 1px solid #000000;
    border-style: outset;
}

.Color00 {
    background-color: #FFFFFF;
}

.Color01 {
    background-color: #000000;
}

.Color02 {
    background-color: #00007F;
}

.Color03 {
    background-color: #009300;
}

.Color04 {
    background-color: #FF0000;
}

.Color05 {
    background-color: #7F0000;
}

.Color06 {
    background-color: #9C009C;
}

.Color07 {
    background-color: #FC7F00;
}

.Color08 {
    background-color: #FFFF00;
}

.Color09 {
    background-color: #00FC00;
}

.Color10 {
    background-color: #009393;
}

.Color11 {
    background-color: #00FFFF;
}

.Color12 {
    background-color: #0000FC;
}

.Color13 {
    background-color: #FF00FF;
}

.Color14 {
    background-color: #7F7F7F;
}

.Color15 {
    background-color: #D2D2D2;
}

#csEmojisPicker,
#csGifsPicker,
#csStickersPicker {
    box-shadow: 3px 3px 5px #888888;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    position: fixed;
    display: none;
    background-color: #ffffff;
    height: 103px;
    width: 255px;
    overflow-x: hidden;
    overflow-y: auto;
}

#csGifsPicker {
    height: 262px;
    width: 405px;
}

#csStickersPicker {
    height: 199px;
    width: 364px;
}

.EmojiButton {
    float: left;
    border: 0px;
    background-color: #ffffff;
    padding: 0px;
    height: 32px;
    width: 32px;
    cursor: pointer;
}

.GifButton {
    float: left;
    border: 0px;
    background-color: #ffffff;
    padding: 0px;
    height: 85px;
    width: 125px;
    cursor: pointer;
}

.StickerButton {
    float: left;
    border: 0px;
    background-color: #ffffff;
    padding: 0px;
    height: 64px;
    width: 64px;
    cursor: pointer;
}

.EmojiButton img {
    position: relative;
    top: -2px;
    height: 20px;
    width: 20px;
}

.GifButton img {
    position: relative;
    height: 81px;
    width: 121px;
}

.StickerButton img {
    position: relative;
    top: -2px;
    height: 60px;
    width: 60px;
}

.EmojiButton:hover,
.StickerButton:hover {
    border: 1px solid #d2d2d2;
    border-style: outset;
    border-radius: 4px;
}

.GifButton:hover {
    background-color: blue;
}

.Emoji {
    border: 0px;
    padding: 0px;
    width: 20px;
    height: 20px;
    background-position: 0px 0px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
}

.Gif {
    border: 0px;
    padding: 5px;
    max-height: 200px;
    background-position: 0px 0px;
    background-size: 0px 0px;
}

.Sticker {
    border: 0px;
    padding: 0px;
    height: 160px;
    background-position: 0px 0px;
    background-size: 0px 0px;
    background-repeat: no-repeat;
}

.CwfAboutIcon {
    height: 64px;
    width: 64px;
}

.CwfAboutTitles {
    margin: 0px 0px 0px 5px;
}

.CwfAboutTitle {
    font-size: 28px;
    font-weight: 700;
    margin: 0px;
    color: #000000;
    padding: 0px;
}

.CwfAboutSubTitle {
    font-size: 20px;
    font-weight: 500;
    margin-top: -8px;
    color: #000000;
    clear: both;
    padding: 0px;
}