@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Abel);
@import url(https://fonts.googleapis.com/css?family=Karma:600);

html {
    padding: 0;
}
*   {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body[dir=rtl]
{
	//background-image: url('img/WebChatHeader_rtl.png');
	//background-position: right top;
}
body table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
body
{
	margin-left:auto;
	margin-right:auto;
    color: #141414;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

label   {
    display: none;
}

.ieLogo {
    visibility: visible;
    width: auto;
    max-height: 90px;
    padding: 10px;
    float: left;
    image-rendering: crisp-edges;
}

/*              LOGOS              */

div[name="REE"] { background-image: url(../chat/Img/ree2color.png);}

[data-tag="customBG"]  {background-color: #fafafa!important}
[data-tag="custom"] .preChatInput {
    background-color: #ebebeb!important;
    border-color: #aeaca6!important;
}
/* <-------------> Flex Rules <-------------> */

.container, .container-row   {
    flex-wrap: nowrap;
    display: -webkit-flex; /*Safari*/
    display: -moz-flex; /*Mozilla*/
    display: -ms-flex; /*IE*/
    display: flexbox; /*Tweener*/
    display: flex; /*Tweener*/
    display: box; /*Legacy*/
}
.container  {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.container-row  {
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.item   {
    order: 1;
    justify-content: space-around;
}
.itemFlexStart   {
    order: 1;
    flex-grow: 1;
    justify-content: flex-start;
    min-width: 60px;
}

.itemFlexStart:first-child  {
        margin-right: 5px;
}

/* <------------> END Flex Rules <------------> */

/* /\/\/\/\/\/\/\/\/  COLORS  /\/\/\/\/\/\/\/\/ */
.blackBG  {background-color: rgba(51, 51, 51, 0.56);}
.black  {color: #333333;}
.white  {background-color: white;}
.white  {background-color: white;}
.whiteT  {color: white;}
.LightblueBorder   {
    border-color:#71c4cd!important;
    border-bottom-width: 4px!important;}
.Lightblue   {background-color: #71c4cd;}
.blue   {background-color:#2d4667;}
.Jblue   {background-color:#043d58;}
.GHblue   {background-color:#09212d;}
.brown  {border-color: #a3957d; background-color:#a3957d;}
.brownT {color: #5d564e;}
.butter {color: #f9d381; border-color: #f9d381; background-color: #f9d381;}
.grey   {background-color: #333333;}
.tan   {background-color:#aeaca6;}
.grey3  {background-color: #aeaeb4;}
.grey3Border  {border-color: #aeaeb4!important;}
.grey2  {background-color: #aeaeae;}
.grey3  {background-color: #bababa;}
.grey4  {background-color: #ebebeb;}
.lightGrey  {background-color: #f1f0e3;}
.lime   {color: #adbf59; border-color: #adbf59;}
.olive  {color: #687235; border-color: #687235;}
.green  {background-color: #617972;}
.cream  {background-color: #e7e2cd;}
.orange  {background-color: #ae5639;}

/* /\/\/\/\/\/\/\/\/  END COLORS  /\/\/\/\/\/\/\/\/ */

/*      [ |   | ]     CONTAINERS    [ |    | ]      */

.fullWidth  {
    width: 100%;
}
.wrapper {
    padding: 3vw 3vw;
    margin: 0 auto 0 auto;
    width: 80vw;
    transition: ease-in-out 0.3s
}
.wrapper2 {
    padding: 10px 0px;
    margin: 0 auto 0 auto;
    width: 90vw;
    transition: ease-in-out 0.3s;
}
/* -------------     END CONTAINERS    ------------ */

h3  {
    -webkit-margin-after: 0px;
    -webkit-margin-before: 10px;
}
.abel   {
    font-family: 'Abel', sans-serif!important;
}

.karma   {
    font-family: 'karma', serif!important;
}

.font-22    {
    font-size: 22px;
}
.arial-12  {
    font-family:'Arial', sans-serif!important;
    font-size: 13px!important;
    line-height: 16px;
}
.uppercase  {
    text-transform: uppercase;
}
.borderTop {
    border-top: 6px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-style: solid;
}
.borderBottom {
    border-top: 0px;
    border-right: 0px;
    border-bottom: 4px;
    border-left: 0px;
    border-style: solid;
}
.logo   {
    height: 55px;
    width: 220px;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 1vh 0vw;
    transition: ease-in-out 0.3s;
    flex-grow: 2;
}
.intro, .pre    {
    width: 100%;
}
.title  {
    text-align: right;
    margin-right: 0!important;
}
.intro  {
    width: 100%;
    padding: 0;
    font-weight: normal!important;
    text-align: center;
}
.pre    {

}
.rwd-line   {
    display: block;
}
.title, .intro p, .pre p    {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
.title h2   {
    height: 100%;
    font-size: 18px;
}
.wrapperNoPad {
    margin: 0 auto 0 auto;
    max-width: 84vw;
    height: auto;
}

.wrapperNoPad2 {
    margin: 0 auto 0 auto;
    max-width: 84vw;
    height: auto;
}

H1.ChatTitle  {
    font-family: Arial, Helvetica, Sans-Serif;
    color:#bababa;
    margin-top: 20px;
    font-size: 1.6em;
    font-weight: normal;
    margin-left: 0px;
    display: block;
}

.dropDown   {
    color: #5d564e;
    height: 40px!important;
    padding: 4px;
    margin: 0px!important;
    width: 100%;
    background-color: #ebebeb!important;
}

.preChatForm    {
    width: 100%;
}

.preChatInput   {
    width: 100% -2px;
    height: auto;
    margin: 1vh 0px;
    border: 0px;
    border: 1px solid #a3957d;
    background-color: #ffffff;
}

.clear  {
    background-color: transparent;
    border: none;
    width: auto;
    margin: 10px 8px;
    outline: none;
    font-size: 16px;
    color: #5d564e;
}
input[type="text"].clear::-webkit-input-placeholder {
    color: #5f5f5f;
    transition: ease-in-out 0.3s;
}

.require    {
    min-height: 20px;
    font-size: 12px;
    color: firebrick;
    border-bottom: 3px solid firebrick;
}

input:focus::-webkit-input-placeholder {
    color: transparent!important;
}

input:focus::-moz-placeholder {
    color: transparent!important;
}
input:focus:-moz-placeholder {
    color: transparent!important;
}

.buttonclass   {
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: none;
    border-radius: none;
    width: 100%;
    height: 30px;
    border: 0px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}
.buttonclass:hover    {
    opacity: .9;
    transition: ease-in-out 0.3s;
}
input[value="Submit"]   {
    color: #ffffff;
    /*  GID  */
    background-color: #2d4667;
    border-bottom: 4px solid #1b2c41;
}
input[value="Clear"]   {
    color: #ffffff;
    /*  GID  */
    background-color: firebrick;
    border-bottom: 4px solid #861919;
}

/*              START @MEDIA              */

@media (min-width: 1024px)  {
    .wrapper2    {
        max-width: 600px;
    }
    .wrapperNoPad2    {
        max-width: 1024px;
    }
    .wrapperNoPad    {
        max-width: 600px;
    }
    .wrapper    {
        max-width: 480px;
    }
}
@media (min-width: 540px) {

}
@media (max-width: 540px) {

}
@media (min-width: 481px) {

    .title  {
        font-size: 14px!important;
        transition: ease-in-out 0.3s;
        word-break: keep-all;
    }
}
@media (max-width: 480px) {
    .wrapper2    {
		margin: 0 auto 0 auto;
		padding: 10px 0px;
		width: 90vw;
    }
    .title  {
        font-size: 14px!important;
        transition: ease-in-out 0.3s;
        word-break: keep-all;
    }
    .karma  {font-size: 1.3em;}
    .buttonclass.item[type="button"]   {
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 375px) {
    .title  {
        font-size: 12px!important;
        transition: ease-in-out 0.3s;
    }
    .preChatInput   {
        margin: 1.2vh 0px;
    }
    .clear  {
        margin: 10px 12px;
    }
}
@media (max-width: 343px) {
    .wrapper    {    }
    .title  {
        font-size: 12px!important;
        transition: ease-in-out 0.3s;
    }
    .preChatInput   {
        margin: 1.1vh 0px;
    }
    .clear  {
        margin: 9px 11px;
    }
}
@media (max-width: 330px) {
    .wrapper    {    }
    .title  {
        font-size: 12px!important;
        transition: ease-in-out 0.3s;
    }
    .preChatInput   {
        margin: 1vh 0px;
    }
    .clear  {
        margin: 8px 10px;
    }
}
@media (max-width: 320px) {
    .wrapper    {    }
    .preChatInput input  {
        font-size: 11px!important;
    }
    .clear  {
        margin: 6px 8px;
    }
}
/*            END @MEDIA              */