/* CSS Document */
*{ padding:0px; margin:0px;}
img{ outline:none; border:0px;}
body{font-family: 'Roboto Condensed', sans-serif;}
.clear{ clear:both;}
a{ text-decoration:none; color:#000;}
input{
-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
 /* padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;*/
  border: 1px solid #DDDDDD;}
  input:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1)
; /* padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;*/
  border: 1px solid rgba(81, 203, 238, 1);
}
.login-box{ 
  position:fixed; 
  width:550px; 
  right:0px; 
  bottom:0px; 
  border:none;
  min-height: 566px;
  margin-right: 0px;
  z-index: 999;
}
.login-head{ background-color:#fff; padding:20px; color:#1C1E21; text-align:center; height: 69px;box-shadow: 0px 8px 20px 2px grey;border-bottom: .5px solid #ebedf0}
.login-txt{ float:left; text-align:center;padding: 6px;}
.minus-sign{ float:right; font-weight:bold;}
.input-main{ padding:10px; box-sizing:border-box; background-color:#fff; font-family: 'Roboto Condensed', sans-serif;}
.input-field{ width:348px; height:38px; border:solid 1px #d8d8d8; float:none;    padding: 0 0 0 10px;background: #f1f0f0;border-radius: 14px }  
.login-btn{ background-color:#313131; text-align:center; color:#fff; padding:10px; box-sizing:border-box;    width: 100%;
    /*margin:4px auto;*/-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
.login-btn:hover{ background-color:#F5B05A;  }
  
/*chat*/

.chat-m{ 
  width:420px; 
  position:fixed; 
  right:0px; 
  bottom:53px; 
  border: solid 1px #bfbfbf;
  min-height: 500px;
  margin-right: 45px;
  z-index: 99;
}
.chat-in{/*height:300px;*/ overflow:auto; min-height:100px; background-color:#fff;/*overflow-y: hidden;*/ 
overflow-x: hidden; }
.chat-in ul{ list-style-type:none; text-decoration:none;}
.chat-in li{ /*float:left;*/ /*width: 300px;*/ list-style-type: none;}
.chat-head{
  background-color: #fff;
    padding: 20px;
    color: #1C1E21;
    text-align: center;
    /*height: 60px;*/
    box-shadow: 0px 8px 20px 2px grey;
    border-bottom: .5px solid #ebedf0;
}

.chat-head-txt{ font-size:18px; float:right; float: right;font-weight: normal;}
.chat-head-txt i{ padding-right:10px;}
.chat-box{background-color:#fff;  box-sizing: border-box;}
.chat-icon {
    color: #6f6565;
    float: left;
    font-size: 12px;
    padding: 10px 0 0 17px;
}
.chat-icon-two{ float:right; padding:10px 29px 5px;}  
.chat-box img{ width:48px;}

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;    width: 130px;
}

/*.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:rotate( 29deg ) skew( -35deg );
    -moz-transform: rotate( 29deg ) skew( -35deg );
    -ms-transform:rotate( 29deg ) skew( -35deg );
    -o-transform:rotate( 29deg ) skew( -35deg );
    -webkit-transform:rotate( 29deg ) skew( -35deg );
    width: 20px;
}*/

.me {
    float: left;   
    margin:9px 10px 5px 14px; font-size: 12px;        
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {margin:8px 14px 6px 14px;font-size: 12px; }

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;    
    box-shadow: 2px -2px 2px 0 #c3ecce;
}
.enter-chat{ border:solid 0px #ececec !important; /*padding:10px;*/}
.input-chat{
     width: 94%;
    /* height: 3px; */
    background: #fff;
    padding: 10px;
    border: 1px solid #dbdbdb;

}
.enter-chat i{ float:right; color:#000;color: #888484;
    position: absolute;
    top:94%;
    bottom: 0;
    right: 8%;
    z-index: 999;    cursor: pointer;}    
.login-main{ width:40%; height:267px; margin:22% auto 0; background-color:#fff; box-shadow:0px 0px 11px 5px #e4e4e4; border-radius:12px;}
.login-main h4{ font-size:24px; font-weight:normal; text-align:center; padding:4% 0 2%;color: #4a4a4a}
.login-input{ width:80%; margin:0 auto;}
.login-input i{ float: left;color: #000; color: #888484; position: absolute; top: 40%; bottom: 0; /* right: 8%; */ z-index: 999; cursor: pointer;left:7%;}
.input-usr{ width:100%; margin:2% auto; height:46px; padding:10px 0px 10px 32px;}
.button-usr{ float:right;width:100%;}
.button-login{ background-color:#07b2dd; text-align:center; color:#fff; padding:10px; box-sizing:border-box; width:80%;
    margin:4px auto;-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
.button-login:hover{ background-color:#000;}
@media(max-width:768px){
.login-main{height: 248px;}
.login-main h4{ font-size:18px;}
.login-input i{ left:12%;}
}
/*** A.G style starts ***/
.chat-m{
  display: none;
}
.btn{
  background-color: transparent;
  border: none;
  color: inherit;
}
.chatclose{
  position: fixed;
  right: 0px;
  border: 2px solid;
  padding: 10px;
  background: #87CEEB;
  color: #fff !important;
  border-color: #fff;
  bottom: 0px;
  border-top-left-radius: 2em; 
  cursor: pointer;
}
.chatclosemain{
  background: #87ceeb none repeat scroll 0 0;
  border: 2px solid #fff;
  border-top-left-radius: 2em;
  bottom: 0;
  color: #fff !important;
  cursor: pointer;
  padding: 10px;
  position: fixed;
  right: 0;
}
.you, .me{
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;
   white-space: -o-pre-wrap;
   word-wrap: break-word;
}
/*** A.G style ends ***/
/*** A.G style starts under testing ***/

.bubble{
    background-color: rgb(241, 240, 240);
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    position: relative;
    vertical-align: top;    
    width: 290px; 
    color:#717070;
    padding: 10px 8px 17px;
    float: right;
    font-size: 15px;
    text-transform: capitalize;
}

/*.bubble::before {
    background-color: #dedede;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:rotate( 29deg ) skew( -35deg );
    -moz-transform: rotate( 29deg ) skew( -35deg );
    -ms-transform:rotate( 29deg ) skew( -35deg );
    -o-transform:rotate( 29deg ) skew( -35deg );
    -webkit-transform:rotate( 29deg ) skew( -35deg );
    width: 20px;
}
.bubble2::before {
    background-color: #cef5d8;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:rotate( 29deg ) skew( -35deg );
    -moz-transform: rotate( 29deg ) skew( -35deg );
    -ms-transform:rotate( 29deg ) skew( -35deg );
    -o-transform:rotate( 29deg ) skew( -35deg );
    -webkit-transform:rotate( 29deg ) skew( -35deg );
    width: 20px;
}*/
.bubble2{
    background-color: #0093D0;
    border-radius: 5px;
    box-shadow: 0 0 6px #0093D0;
    box-shadow: 0 0 6px #0093D0;
    display: inline-block;
    padding: 14px 18px;
    position: relative;
    vertical-align: top;    
    width: 290px; 
    color:#fff;
    float: left;
    font-size: 15px;
    text-transform: capitalize;
}
.chat-time{    
  float: right;
  position: absolute;
  font-size: 10px;
  right: 8px;
  /*bottom:-2px;*/
  color: #949494;
}
.bubble2 .chat-time{
  color: #fff;
}
    .chatwindow a{
        color: #fff;
    }
#loggedInUserName{
  float: left;
  font-size: 16px;
}
#framecode{
  width:99%; 
  position: absolute; 
  border:none; 
  height: 100%; 
  bottom: 0px; 
  padding: 0px; 
  margin: 0px;
}
.leavemessage{
  background: #87ceeb none repeat scroll 0 0;
  border: 2px solid #fff;
  border-top-left-radius: 2em;
  bottom: 0;
  color: #fff !important;
  cursor: pointer;
  padding: 10px;
  position: fixed;
  right: 0;
}
.leave_message{
  display: none;
}
form{
  /*border: solid 1px #bfbfbf;*/
}
/*** A.G style starts under testing ***/


/*##  bellow style Move from chat page : 23-12-2020 ##*/

select,
textarea {
    margin: 5px 7px;
    color: #666;
}
body {
    /*background-image: url(../../images/lwscLandingPage.jpg);*/
    background-size: cover;
    height: 100vh;
}
.white_col {
    background-color: rgb(0, 147, 208);
    color: #fff;
    border: 1px solid #fff;
}
.white_col:hover {
    background: #fff;
    color: #222;
    border: 1px solid #ebedf0;
}
/*.dark_green {
    background-color: darkblue;
}*/
.grad_col {
    background-color: #fff;
/*background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);*/
} 
/*#########################################################*/

#message_window{
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
   
}
#message_list{
     height: 200px;
    overflow-x: auto;
    background-color: #fff;
}

.wrapper {
  position: relative;
  max-width: 600px;
  margin: 0 auto; }
  .wrapper:after {
  content: "";
  display: table;
  clear: both; }

.box {
  border: 2px solid #CCC;
  padding: 1rem calc(1rem - 2px);
  margin-bottom: 1rem; }
  .box:after {
  content: "";
  display: table;
  clear: both; }
  .box h1,
  .box h2,
  .box h3 {
  margin-top: 0; }

footer {
  text-align: left; }

.hero {
  text-align: center;
  padding: 2rem; }
  .hero h1 {
  font-size: 4rem;
  margin: 0; }

a {
  color: #a795ef; }

.copyurl {
  width: 100%;
  font-size: 1.25rem; }

div.input label {
  font-weight: bold;
  font-size: smaller; }

.addon {
  display: flex;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 5px;
  background: #F0F0F0; }
  .addon input,
  .addon textarea {
  flex-grow: 1;
  border: 0;
  background: transparent; }
  .addon button {
  flex-grow: 0;
  background: transparent;
  border: 1px solid #999;
  border-radius: 6px;
  font-weight: bold; }
  .addon button.textarea {
    align-self: flex-start;
    padding: 0.5rem; }
  .addon button:hover {
    background: #FFF;
    color: #a795ef; }

div.hr {
  border: 1px dashed #ccc;
  width: 10%;
  margin: 4rem auto;
  height: 1px; }

a.button {
  border: 2px solid #a795ef;
  font-weight: bold;
  margin: 0;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5rem 2rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  background-color: #FFF;
  transition: box-shadow 0.1s linear; }
  a.button:hover {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); }

/* chat client */
#message_window {
  /* background: #e3f2fd; */
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  /*height: 500px;
  width: 320px;*/
  height: 100%;
  width: 100%;
  /*margin: 2rem auto;*/
  display: flex;
  flex-direction: column;
  font-family: 'verdana';
  /* background-image: linear-gradient(#f2d7d9, #f2d7d9, #f2d7d9, #f2d7d9); */
  /* border: 1px solid gray; */
  }
  #message_window .disconnected {
  background: #FFFFCC;
  padding: 0.25rem; }
  #message_window.connected .disconnected {
  display: none; }
  #message_window .offline {
  display: none; }
  #message_window.offline .disconnected {
  display: none; }
  #message_window.offline .offline {
  background: #FF0000;
  color: #FFF;
  padding: 0.25rem;
  display: block; }
  #message_window .powered_by {
  flex-shrink: 0;
  text-align: left;
  border-bottom: 1px solid rgb(0, 0, 0);
  font-size: 14px;
  padding: 0.25rem;
  color: rgb(39, 38, 38);
  background: rgb(255, 255, 255);
  /* background: #9e000c; */
  }
  #message_window .powered_by a {
    text-decoration: none;
    color: #666; }
  #message_window .powered_by img {
    position: relative;
    top: 2px;
  /*    display: block; */
      max-width:100%;
  }
  #message_window section {
  flex-grow: 1;
  flex-direction: column-reverse;
  display: flex;
  overflow-y: auto; }
  #message_window section div div {
    margin: 0.25rem;
    clear: both; }
  #message_window footer {
  border-top: 1px solid #CCC;
  padding: 0.25rem;
  background-color: #fff; 
}
  #message_window footer input[type="text"] {
    flex-grow: 1;
    font-size: 1.25rem;
    outline: none;
    border: none;
  width:80% }
  #message_window footer button {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.25rem;
    color: rgb(255, 0, 0);
    font-weight: bold
  }
  #message_window form {
  display:block;
  margin: 0;
  padding: 0.25rem; }
  #message_window .container {
    border-radius: 10px;
     border: 1px dashed rgb(160, 159, 159); 
    /* background-color:rgb(255,255,255); */
    padding: 1px;
  }
  #message_window #message_template {
  display: none; }
  #message_window .message {
  font-size: 14px;
  padding: 0.5rem;
  /* border-radius: 5px; */
  border-radius: 15px 15px 15px 0;
  width: auto;
  display: inline-block;
  max-width: 90%;
  /* border:solid; */
  border-width:1px;
  /* box-shadow: 5px 5px 6px #888888; */
  background-image: linear-gradient(to right, #e6e6e6,#e6e6e6);
  background: #e8e8e8;
  color: #000000;
  /*border: 1px solid gray; */
  }

  #message_window form #my-form {
  display:block;
  margin: 0;
  padding: 0.25rem;
  }    
  #message_window .file_attachment {
  background: #F0F0F0;
  color: #333;
  border-radius: 5px;
  display: inline-block;
  max-width: 75%; }
  #message_window .file_attachment img {
    max-width: 100%;
    display: block; }
  #message_window .button_message {
  margin: 1rem 0;
  border-radius: 4px;
  border-color: orange;
  border-style: solid;
  color: orange;
  border-width: 1px;
  padding: 0.25rem 1rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  display: block; }
  #message_window .message p {
  margin-top: 0;
  margin-bottom: 0.5rem; }
  #message_window .message p:last-child {
  margin-bottom: 0; }
    #message_window .message.outgoing {
        float: right;
        background: #ffffff;
        color: #ff0000;
        border-radius: 15px 15px 0;
        border: 1px solid #ff0000 
    }
  #message_window #message_replies {
  text-align: center;
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  /* Lets it scroll lazy */ }
  #message_window #message_replies ul {
    list-style-type: none;
    margin: 0px auto;
    padding: 0; }
    #message_window #message_replies ul li {
    display: inline-block;
    margin: 0.5rem;
    margin-left: 0; }
  #message_window #message_replies a {
    text-decoration: none;
    display: block;
    border: 1px solid #ff0000 ; 
    color: #ff0000;
    border-radius: 4px;
    padding: 0.25rem 0.25rem;
    font-size: 14px;
    cursor: pointer;

  }
    #message_window #message_replies a:hover {
    background: #ff0000;
    color: #ffffff; }

    #message_window #message_replies{
      background-color: #fff; 
      color: #ffffff; 
    }

    

/* typing indicator CSS based on code by Joseph Fusco -> https://codepen.io/fusco/pen/XbpaYv */
.typing-indicator {
  display: table;
  margin: 0 auto;
  position: relative; }
  .typing-indicator span {
  height: 5px;
  width: 5px;
  float: left;
  margin: 0 1px;
  background-color: #333;
  display: block;
  border-radius: 50%;
  opacity: 0.4; }
  .typing-indicator span:nth-of-type(1) {
    animation: 1s blink infinite 0.3333s; }
  .typing-indicator span:nth-of-type(2) {
    animation: 1s blink infinite 0.6666s; }
  .typing-indicator span:nth-of-type(3) {
    animation: 1s blink infinite 0.9999s; }

@keyframes blink {
  50% {
  opacity: 1; } }
/* special styles for homepage */
#home {
  position: relative;
  max-width: 650px;
  margin: auto; }
  #home:after {
  content: "";
  display: table;
  clear: both; }

#homepage_bot {
  width: 500px;
  height: 600px;
  float: right;
  border: 2px solid rgb(255, 22, 22);
 }
  #homepage_bot iframe {
  border: 0;
  height: 100%;
  width: 100%; }

#welcome {
  margin-left: 440px; }

  input.comments{
    margin-right: 10px;
}



input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -5px;
position: relative;
/* background-color: #ff0000; */
content: '';
display: inline-block;
visibility: visible;
padding: 0px -6px;
background-image: url(../checkmark.png);
background-repeat: no-repeat;
background-size: 100%;
/* border: none; */
background-position: ce center;
padding: 2px;
/* margin-left: 20px; */
border: none;
}

input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -3px;
position: relative;
background-color: #fff;
content: '';
display: inline-block;
visibility: visible;
border:1px solid #77787B;

}