html, body {
    height: 100%;
}

body, input, select {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.checked {
    color: orange;
}

input[type="button"] {
    display: block;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    padding: .6em 1.4em;
    max-width: 100%;
    box-sizing: border-box;    
    border: 1px solid #4caf50;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 4px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #4caf50;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

input[type="button"]:hover {
    color: #ffffff;
    background: #449e48;
    border-color: #449e48;
}

input[type="button"]:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

input[type="button"]:active {
    transform: translateY(2px);
}

.sfselect {
    display: block;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;                
}

.sfselect:after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f107";
}

.sfselect:hover {
    border-color: #888;
}

.sfselect:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

.sfselect option {
    font-weight:normal;
}            

input[type="range"] {
    -webkit-appearance: none;
    opacity: 0.7;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]:hover{
    opacity :1;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #d3d3d3;
    height: 5px;
}

input[type="range"]::-moz-range-track {
    background: #d3d3d3;
    height: 5px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    background: #a3a3a3;
    margin-top: -5px;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background: #a3a3a3;
    margin-top: -5px;
    border-radius: 50%;
    cursor: pointer;
}

.loader {
    border: 16px solid #f3f3f3; 
    border-top: 16px solid #3498db; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sidenav {
    width: 32px;
    position: fixed;
    z-index: 10000;
    top: 50px;
    right: 0;
    overflow-x: hidden;
    transition: 0.5s;
    height: auto;
}

.sfContainer a {
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sfContainer a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    text-decoration: none;
    position: absolute;
    top: 0;
    right: 12px;
    font-size: 36px;
    margin-left: 50px;
}

.sideheading {
    background-color: #aecb54;
    color: #bbbbbb;
    padding: 8px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.sideheading:hover{
    color: black;
    cursor: pointer;
}

.logoimage{
    height:32px;
}

.sfContainer {
    height: auto;
    border-left: 1px solid #a3a3a3;  
    background: #ffffff;
    color: #495057;
    box-shadow: -3px 4px 7px 0px #787B82;
    border-radius: 4px;
    transition: 0.3s;
}

.sfPageBody {
    display: block;
    height: calc(100% - 200px);
    padding: 12px;
    overflow: auto;
}

.sfHeading {
    display: block;
    max-height: 128px;
    height: auto;
}

.sfFooter {
    display: block;
    padding: 4px;
    max-height: 128px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.chatPanel {
    width:30%;
    min-width: 380px;
    bottom: 0;
    right: 0;
    z-index:100000;
    position: fixed;
    background: white;
    border: 1px solid #dee2e6;
    padding: 1em;
}

.chatPanelHeader {
    background : #f8f9fa;
    display : flex;
    align-items : center;
    text-align: center;
    padding: 1em 0;
    margin-bottom:4px;
}

.showFaqButton {
    font-size: 2rem;
    color: black;
    margin-left: 8px;
    cursor: pointer;
    text-decoration: none;
}

.showFaqButton:hover {
    color: #dee2e6;
}

.returnToChatButton {
    font-size: 2rem;
    color: black;
    margin-left: 4px;
    cursor: pointer;
    text-decoration: none;
}

.returnToChatButton:hover {
    color: #dee2e6;
}

.closeChatButton {
    text-decoration: none;
    font-size: 1rem;
    color: black;
    margin-left: 30%;
}

.closeChatButton:hover {
    color: #dee2e6;
}

.agentButton {
    text-decoration: none;
    font-size: 2rem;    
    color: black;
    margin-left: 8px;
}

.agentButton:hover {
    color: #dee2e6;
}

.chatInput {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-top: 8px;
    background: white;
    padding: 1em;
}

.chatInputText {
    vertical-align: middle;
    margin: 5px 10px 5px 10px;
    padding: 10px;
    width: 60%;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.chatInputButton {
    width: 30%;
}

.chatDisplay {
    background: white;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 350px;
    padding: 1em;
}

.chatBubble {
    border-radius: 4px;
    padding: 4px;
    width: 55%;
    min-height: 24px;
    margin: 0px 8px 4px 8px;
    overflow-wrap: break-word;
}

.genericButton {
    border-radius: 4px;
    border: 1px solid #1B7ECF;
    padding: 0.5rem 1rem;
    margin-left: auto;
    margin-right: auto;
    background: #1B7ECF;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s
}

.genericButton:hover {
    background: #105da1;
}

.clickBubble {
    border-radius: 4px;
    padding: 4px;
    width: 50%;
    min-height: 24px;
    margin: 0px 4px 2px 4px;
    overflow-wrap: break-word;
    background: #46a6f5;
    color: white;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    .clickBubble {
        width: 100%;
    }
}

.clickBubble:hover {
    background: #1B7ECF;
}

.chatBubble .textTitle {
    font-weight: bolder;
    cursor: pointer;
    display : flex;
    align-items : center;
    width: 100%;
}

.chatBubble .textTitle .titleString {
    width: 90%; 
    text-align: left;
}

.chatBubble .textTitle .moreButton {
    width: 10%; 
    text-align: right;
    padding:1rem;
}

.chatBubble .textTitle:hover {
    color: #818181;
}

.chatBubble .textTitle .faqMainText {
    width:85%;
    font-size: 16px;
    margin-left:8px;
}

.floatChatButton {
    cursor: pointer;
    position: fixed;
    display: block;
    bottom: 50px;
    right: 50px;
    width: 100px;
    height: 100px;
    z-index: 1000;
}

.thumbsUpIcon {
    color: green;
    font-size: 1rem;
    margin-left: 8px;
    cursor: pointer;
}

.thumbsUpIcon:hover {
    opacity: 0.5;
}

.thumbsDownIcon {
    color: red;
    font-size: 1rem;
    margin-left: 8px;
    cursor: pointer;
}

.thumbsDownIcon:hover {
    opacity: 0.5;
}

.disabledThumb {
    pointer-events: none;
    opacity: 0.5;
}

.alertDialog {
    width: 10%;
    min-height: 50px;
    display: block;
    position: fixed;
    top: 5%;
    right: 5%;
    padding: 8px;
    border-radius: 4px;
}

.alertDialogInfo {
    border: 1px solid #3498db;
    border-width: 0 0 0 4px;
    background: #B3E5FC;
    color: #044868;
}

.alertDialogError {
    border: 1px solid #e60017;
    border-width: 0 0 0 4px;
    background: #FFCDD2;
    color: #73000c;
}

.alertDialogHeader {
    font-weight: bolder;
    text-align: center;    
}

.alertDialogBody {
    text-align: left;
}

.alertDialogHidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

.alertDialogVisible {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}