/* these chat are hidden from lauch and will be released soon (claims and customer service)*/

a#chatTrigger3 {
    display: none;
    padding: 7px!important;
}

textarea.wc-message {
    color: #6a6a6a!important;
}

/* The chatModal (background) */
.chatModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
}


.chatModal-content {
    position: fixed;
    color:#6a6a6a!important;
    bottom:48px;
    right:10px;
    left: auto;
    margin: auto;
    padding: 0;
    border: 1px transparent;
    width: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: alternate;
    animation-duration: 0.4s

}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.chatModal-header h4{
    font-size: medium;
    margin: 5px 0px 0px 3px;
}


.close {
    margin-top:-29px!important;
    color: white;
    float: right;
    font-size: large;
    padding:5px;
    border-radius: 4px;
    display: none;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
}

.chatModal-header {
    background-color: #0073AC;
    color: white;
    height:40px;
    font-size:1.3em;
    border-radius: 5px 5px 0px 0px;
    padding:6px 0px  0px 10px;
}

.chatModal-body {padding: 0 15px; background-color: #fff}

.chatModal-footer {
    padding: 2px 16px;
    background-color: #fff;
    color: white;
    border:none;
    
}

.queuChannels img{
 width:22px;
}

.queuChannels{
    padding: 0px 0 15px 0;
}

.queuChannels a{
    text-decoration: none;
    font-size: smaller;
    color: #12AABB;
    font-weight: normal;
    /*display: inline-block;*/
}

.queuChannels a:hover {
    color:#eb462e!important;
}


header.wc-show.wc-online {
    background-color: #0c5592;
    margin-left: 0px;
}

p.wc-progress {
    width: auto;
}

.wc-webchat>header {
    height: 50px;  
    line-height: 52px;
}

span.brandLogo img {
    width: 45%;
    float: left;
    padding: 5px 3px 0 7px;
    max-width: 220px;
}

span.wc-title {
    float: right;
    margin: 0px 14px 5px 0;
    font-family: sans-serif;
}

#nowebchat {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    background-color: orangered;
    margin: 2px;
    border: red solid 1px;
    display: none;
}


/*....................Default Example..............................*/

.wc-webchat.wc-online.wc-show {
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #0c5592;
}

.wc-name-input {
    height: 32px;
   width: 270px;
    padding: 0 0 0 8px;
    margin: 20px 0 0 -2px;
}

.wc-chatbox {
    height: 423px;
    padding: 10px 20px 0 20px;
}

.wc-initiating {
    margin-top: 10px;
}

.wc-initiate, .wc-terminate {
    color:white;
    background-color:#ff7900;
    border-width: 0;
    width: 60%;
    height: 32px;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
}

.wc-typing {
    height:32px;
    width:282px;
    color:#000;
    font-size:14px;
    vertical-align:bottom;
    line-height:32px;
}

html > body > div.wc-webchat.wc-online.wc-show > div.wc-chatbox.wc-show > div.wc-status.wc-error {
    line-height:16px;   
    padding:6px 0 6px 6px;
}

.wc-history {
    margin-right: 0px;
    margin-top:20px;
    height:200px;
}

.wc-buttons a, .wc-buttons a:visited {

    font-size:32px;
    color: #99DAED;
    background-color:#09a0ce;
        }

.wc-buttons a:hover, .wc-terminate a:hover {

    color:#fff;
    background-color:#f06139;
    -webkit-background-color:#f06139;
        }

        .wc-initiate:enabled:hover, .wc-terminate:enabled:hover {
    background-color: orange;
}

span.z-dialog-welcome a {
    text-decoration: none;
    color: coral;
    line-height: 1.6em;
}

/*...........................Optional Config..................................*/

.wc-email-input {
    height: 32px;
    min-width: 270px;
    padding: 0 0 0 8px;
    margin: 0 0 0 -2px;
}

.wc-webchat {
    background-image: none!important;
}

p.wc-progress {
    font-style: normal;
    font-family: sans-serif;
    color: orange;
    font-size: inherit;
}
/*---------------------------*/

@media only screen and (max-width : 814px),
only screen and (max-device-width : 814px){
    
    #navBack {
    margin: 60px 0 0px 60px;
    position:relative;
}
}

@media only screen and (max-width: 600px) and (min-width: 340px) 
 {
    .chatModal-content{
        width:70%;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 600px) 
 {
    .chatModal-content{
        width:50%;
    }
}
        #pageText {
            margin: 0px 50% 0px 0px;
            position:relative;
            }
        #chatTemplate {
            display: none;
        }
        
      #wcNameDiv{
       display:none;
     }

        .chatTemplate h3 {
            margin: 20px 0px 20px 0px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: .9em;
            color: #666;
            font-weight:normal;
            display: block;
        }
        
@media only screen and (max-width : 815px),
only screen and (max-device-width : 815px){
         .wc-webchat {
            width: 380px;
            position: fixed;
            bottom: 0;
            left: 60px;
            background-color: #fff;
            z-index: 111111;
            background-image:none;
            
        }
        #pageText {
            margin: 0px 20% 0px 0px;
            position:relative;
            }
}