@font-face {
    font-family: 'Lato';
    src: url(webfonts/Lato-Regular.ttf);
}


h2 { /* Header color */
    color: #046787;
}

button {
    background-color: #ff7800;
}

    button:hover {
        background-color: #ff9800;
    }

    button[disabled]:hover {
        box-shadow: none;
        text-decoration: none;
        background-color: lightgray;
    }

    button:disabled {
        background-color: lightgray;
    }

#chatDiv {
    background-color: white;
}

.w3-btn { /* Button background color and text color */
    background-color: #ff7800;
    color: whitesmoke;
}

    .w3-btn:hover { /* Text color and shadow when hovering over the button */
        color: white;
        background-color: #ff9800;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.w3-inputbox { /* Borders around writable text boxes */
    border: 1px #ff7800 solid;
}

.panel-heading { /* Background color and text color for header above chat*/
    background-color: #cce1e6;
    border-bottom-color: #DDD;
    color: #046787;
    font-weight:bold;
}

.panel-body-items, #openChatDiv { /* Border around the start session and chat areas */
    border-color: #ff7800;
    border-top: 0px;
}

.panel-body-item a {
    color: #ff7800;
}

    .panel-body-item a:hover {
        color: #ffA;
    }

.panel-customer-survey {
    font-size: larger;
}

.panel-body-item { /* Border for each chat message */
    border: 1px solid #258b44;
}

.msg-sender- { /* Text color for agent messages */
    color: #333333;
    background-color: #e5f0f2;
    border-color: #e5f0f2;
}

.msg-sender-agent { /* Text color for agent messages */
    color: #333333;
    background-color: #e5f0f2;
    border-color: #e5f0f2;
}

.msg-sender-system { /* Text color for system messages */
    color: #333333;
    background-color: #e5f0f2;
    border-color: #e5f0f2;
}

.msg-sender-customer { /* Text color and alignment for customer messages*/
    color: #ffffff;
    text-align: right;
    background-color: #006a84;
    border-color: #006a84;
}

body { /* Background color for entire page*/
    background-color: white;
    font-family: Lato;

    font-size:16px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: normal;
}