/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/
/**                GLOBAL CSS                                  */
/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/

/* Global CSS are used globally */

@font-face {
    font-family: 'museo_sans_500regular';
    src: url('MuseoSans_500-webfont.eot');
    src: url('MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('MuseoSans_500-webfont.woff') format('woff'),
         url('MuseoSans_500-webfont.ttf') format('truetype'),
         url('MuseoSans_500-webfont.svg#museo_sans_500regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
}

body, .body-font {
    font-family: 'museo_sans_500regular', arial, freesans, clean, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

pre.body-font {
    white-space: pre-wrap;
    word-break: break-word;
}

.section-panel-container
{
    border: 1px solid #EEE;
    margin-top: 20px;
}
.section-panel-title
{
    background-color: #DDD;
    font-weight: bold;
    border: 1px solid #DDD;
    padding: 8px;
}
.section-panel-body
{
    padding: 20px;
}

.environment-footer
{
    position: fixed;
    z-index: 102;
    bottom: 0;
    left: 0;
    width: 150px;
    font-size: 16px;
    padding-top: 8px;
    text-align: center;
    font-weight: bold;
    height: 38px;
}
.environment-footer-Development
{
    background-color: #2CA01C;
}
.environment-footer-Test
{
    background-color: #E89223;
}
.live-environment-alert
{
    background-color: #f2dede;
    border: 1px solid #ffaeae;
    color: #000;
    padding: 10px;
    font-size: 16px;
    text-align: center;
}
body.chat-body .signup-footer, body.rtc-body .signup-footer {
    display: none;
}
body.chat-body #perspectives-footer, body.rtc-body #perspectives-footer {
    display: none;
}

/***************************************************************/
/**  NAV                                                       */
/***************************************************************/
@media (min-width: 768px) and (max-width: 990px) {
    #securevideo-navbar {
        font-size: 90%;
    }
}

#perspectives-footer {
    position: fixed;
    z-index: 100; /* This should be below anything else, such as chat and environment (which are 101 & 102) */
    bottom: 0;
    right: 0;
    background-color: inherit;
    padding: 6px;
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
    background-color: #DDD;
    max-width: 500px;
    margin: 0 auto;
    font-size: 10px;
    text-align: center;
}

#perspectives-footer {
    padding: 3px;
    border-radius: 0;
    font-size: 12px;
    font-weight: bold;
}

.signup-footer {
    position: fixed;
    z-index: 100; /* This should be below anything else, such as chat and environment (which are 101 & 102) */
    bottom: 0;
    width: 100%;
    font-size: 14px;
    padding: 0;
    background-color: #BDD9EF;
    /* border-top: 1px solid #e7e7e7; */
    border-top: 1px solid #AAA;
    text-align: center;
    font-weight: bold;
    height: auto;
    padding: 8px 0 8px 0;
}

.signup-footer .signup-footer-text
{
    /*height: auto;*/
    /*padding: 8px 0;*/
    /*border-top: 1px solid #AAA;*/
    margin-left: 70px;
    margin-right: 70px;
}
.signup-footer .signup-footer-button
{
    padding: 4px 4px 0 4px;
    display: inline-block;
}
.signup-footer-body-spacer
{
    height: 30px;
}

a
{
    /* This is needed because Chrome does not show pointer over link with no href, used in nav elements that have flyouts */
    cursor: pointer;
}

/* Give some spacing to lists */
ol > li, ul > li
{
    margin-top: 5px;
}

/* Make exception for Smart Wizard */
div#smartwizard ul > li
{
    margin-top: unset;
}

#main-body {
}

#main-body blockquote {
    font: inherit;
    border-left: 4px solid #000;
}

.main-body-framed {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    /* Avoid undesired scrollbars on Firefox */
    overflow: hidden;
}

a.anchor{display: block; position: relative; top: -100px; visibility: hidden;}

/** Simple, commonly-used classes (can be used on any page) **/
/* These are classes that Bootstrap 3 doesn't have convenient equivalents for */
.large
{
    font-size: 18px;
}
.top-margin
{
    margin-top: 20px;
}
.top-margin10 
{
    margin-top: 10px;
}
.top-margin-tiny 
{
    margin-top: 5px;
}
.top-margin-large
{
    margin-top: 40px;
}
.bottom-margin
{
    margin-bottom: 20px;
}
.bottom-margin-tiny 
{
    margin-bottom: 5px;
}
.bottom-margin-large
{
    margin-bottom: 40px;
}
.left-margin-tiny 
{
    margin-left: 5px;
}
.right-margin-tiny 
{
    margin-right: 5px;
}
.padding-tiny 
{
    padding: 5px;
}
.top
.invisible
{
    visibility: hidden;    
}
td.column-word-break
{
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Toggle radios */
input[type="radio"].toggle {
    display: none;
}
/*  */
body div#main-body input[type="radio"].toggle + label.btn-primary {
    background-color: #666666;
    color: #FFFFFF;
    border-color: #000000;
}
body div#main-body input[type="radio"].toggle + label.btn-default {
    background-color: #EEEEEE;
    color: #999999;
    border-color: #CCCCCC;
}


.checkbox-list-single-row-floated { padding-top: 7px; }
.checkbox-list-single-row-floated > div { float: left; margin-right: 10px; }

/* Not used often */
.spinner-left {
    /* Add a spinner at left-hand edge */
    background: #ffffff url("/Images/Spinner.gif") no-repeat left center;
    background-size: 25px;
    padding: 3px 0px 0px 36px;
}
.spinner-center
{
    background: #ffffff url("/Images/Spinner.gif") no-repeat center top;
    background-size: 25px;
    padding: 36px 0px 0px 0px;
    text-align: center;
}
.error
{
    color: Red;
}
.bold
{
    font-weight: bold;
}
.strikethrough
{
    text-decoration: line-through;
}
.tiny
{
    font-size: 65%;
}
.nowrap {
    white-space: nowrap;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.indent-small
{
    margin-left: 8px;
}
.indent
{
    margin-left: 25px;
}
.indent-big
{
    margin-left: 40px;
}

.list-non-indented
{
    padding: 0;
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}

.list-non-indented > li {
    padding-left: 1em;
}

.wrap-superlong-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.break-all {
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.autocomplete-item-desc {
    font-size: 90%;
}

.ui-autocomplete-loading {
    background-image: url('/Images/crosshatch.png');
}

.text-center > input {
    text-align: center;
}

/* Keeps wide columns from getting too greedy and hogging entire table width */
.table-column-limit {
    width: 50%;
}

/* Required field indicators, use with bootstrap, or just add "add-required-indicator" class to element */
.required.control-label:after, .add-required-indicator:after {
  content:" \2022";
  color:red;
  font-weight: 700; /* match bootstrap.css */
}


/***************************************************************/
/**  BOOTSTRAP OVERRIDES                                       */
/***************************************************************/
#main-body .navbar-brand {
    padding: 4px 4px;
}
#main-body .tooltip-inner {
    max-width: 600px;
}

.modal-body .col-sm-3 {
    padding-right: 10px;
}

/* Decrease fonts dramatically on small devices (phones, but not tablets) so modals fit properly--otherwise scrolling within a modal is broken in 20 different ways */
@media (max-width: 700px) {
    #session-modal .modal-content,
    #participant-modal .modal-content,
    #translator-modal .modal-content {
        font-size: 8px;
    }

        #session-modal .modal-content h3,
        #participant-modal .modal-content h3,
        #translator-modal .modal-content h3 {
            font-size: 12px;
        }

        #session-modal .modal-content h4,
        #participant-modal .modal-content h4,
        #translator-modal .modal-content h4 {
            font-size: 10px;
        }

    #session-modal .modal-header,
    #session-modal .modal-footer,
    #participant-modal .modal-header,
    #participant-modal .modal-footer,
    #translator-modal .modal-header,
    #translator-modal .modal-footer {
        padding: 5px;
    }

    #session-modal .modal-body,
    #participant-modal .modal-body,
    #translator-modal .modal-body {
        padding: 0px 15px;
    }

    #session-modal .alert,
    #participant-modal .alert,
    #translator-modal .alert {
        padding: 2px;
        margin-bottom: 3px;
    }

    #session-modal .input-lg,
    #participant-modal .input-lg,
    #translator-modal .input-lg {
        /* Do not change font-size here, or the viewport seems to zoom in on iPhone 5, which requires a manual zoom-out
             font-size: 10px;
        height: 35px;
            */
    }

    #session-modal .top-margin,
    #participant-modal .top-margin,
    #translator-modal .top-margin {
        margin-top: 3px;
    }

    #session-modal .form-group,
    #participant-modal .form-group,
    #translator-modal .form-group {
        margin-bottom: 3px;
    }
}

/* Make Entire Bootstrap Collapse Panel clickable */
.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
    text-decoration: none;
}

    .panel-title a:hover {
        background-color: #F0F0F0;
    }


.legend-container
{
    margin-bottom: 10px;
}
.legend
{
    float:left;
    margin-right: 15px;
}
.legend-box
{
    display: inline-block;
    border-radius: 4px;
    width: 15px;
    height: 15px;
    margin-top: 0px;
}
.legend-text
{
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
}


/***************************************************************/
/**  BUTTONS                                                   */
/***************************************************************/
/* All go, submit, and panel buttons are within a button container */
/* Buttons */
.button-container {
    padding-right: 10px;
    padding-left: 10px;
}
.button-container > button, .button-container > a , .button-container > input
{
    min-width: 200px;
    margin-bottom: 12px;
}
.button-container > button.button-wide, .button-container > a.button-wide
{
    width: 300px;
}
.button-container > button.button-wide-minor, .button-container > a.button-wide-minor {
    width: 250px;
}
/* Responsive section contains a group of buttons which are pulled to the left but stack on a small viewport */
.responsive-button-section {
    margin-top: 10px;
    text-align: left;
}
.responsive-button-section > .button-container {
    float: left;
}
/* Avoiding float left caused by responsive-button-section > button-container */
.responsive-button-section-in-panel > .button-container {
    display: inline-block;
}
.responsive-button-section .btn {
    margin-top: 5px;
}
.responsive-button-section-right {
    margin-top: 0px;
    text-align: right;
}
.responsive-button-section-right > .button-container {
    float: right;
}
.responsive-button-section-right .btn {
    margin-top: 5px;
}
/* Responsive buttons within a table */
.table-responsive-button-section {
    text-align: left;
    min-width: 100px;
    max-width: 300px;
}
.table-responsive-button-section > .btn {
    float: left;
    margin-bottom: 8px;
    margin-right: 8px;
}

.input-group.copy-ip input {
    width: 9em;
    text-overflow: ellipsis;
}

/***************************************************************/
/**  Template/Index                                            */
/***************************************************************/
table.packet-table tr td {
    padding-top: 15px;
    padding-bottom: 15px;
}
table.packet-table tr.packet-top-row td.packet-available-label {
    background-color: #AAA;
    color: #FFF;
    font-weight: bold;
    border-top: 1px solid #CCC;
    text-align: center;
}
table.packet-table tr td.packet-assignment-radios
{
    text-align: center;
}
table.packet-table tr td.packet-assignment-radios label
{
    font-size: 10px;
    display: inline-block;
    width: 80px;
    padding: 2px;
}
table.packet-table tr td.packet-assignment-radios label.disabled
{
    cursor: default;
    pointer-events: none;
}

table.packet-table tr.packet-top-row td
{
    background-color: #FFF;
    color: #FFF;
    border-top: 0;
}
table.packet-table tr td.packet-table-cell-no-top-border
{
    border-top: 0;
}
table.packet-table tr td.packet-table-cell-no-left-border
{
    border-left: 0;
}
table.packet-table tr td.packet-table-cell-bottom-border
{
    border-bottom: 1px solid #CCC;
}
table.packet-table tr.packet-header-row td
{
    background-color: #EEE;
    text-align: center;
    font-weight: bold;
}
#associations-container .packet-table tr td:nth-child(3), 
#associations-container .packet-table tr td:last-child {
    border-left: 1px solid #CCC;
}

/******************************************/
/* Large Format (for more than 100 items) */
#associations-large-container .packet-table tr td:first-child,
#associations-large-container .packet-table tr th:first-child {
    border-right: 1px solid #CCC;
}

#associations-large-container .packet-table td:nth-child(even),
#associations-large-container .packet-table th:nth-child(even) {
    background-color: #F8F8F8;
}

#associations-large-container select {
    font-size: 10px;
}

.packet-table-large-format-wrapper {
    overflow: auto;
    height: 650px;
    width: 100%;
}

#associations-large-container table {
    position: relative;
    border-collapse: separate;
    border-spacing: 0;
}

#associations-large-container table th,
#associations-large-container table td {
    width: 50px;
    padding: 5px;
    background-color: white;
}

#associations-large-container table th:first-child,
#associations-large-container table td:first-child {
    min-width: 250px;
}

#associations-large-container table tbody {
    height: 690px;
}

#associations-large-container table th {
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

#associations-large-container table th:nth-child(1) {
    left: 0;
    z-index: 3;
}

#associations-large-container table tbody tr td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 1;
}
/* End Large Format for /Template/Index   */
/******************************************/


/***************************************************************/
/**  DISPATCH                                                  */
/***************************************************************/
#dispatch-framework { 
}

#dispatch-provider-modal-container {
    border: 1px solid #AAA;
    text-align: left;
}
#dispatch-provider-modal-container > div {
    padding: 10px;
}
#dispatch-provider-panels-container {
    border-bottom: 1px solid #AAA;
}
#dispatch-provider-panels {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #DDD;
}
.dispatch-provider-panel {
    border-top: 1px solid #DDD;
    padding: 10px;
    display: flex;
}
.dispatch-provider-panel:hover {
    background-color: #BBB;
    cursor: pointer;
}
.dispatch-provider-panel.provider-selected {
    background-color: #666;
    color: #FFF;
    cursor: default;
}
.dispatch-provider-panel > div {
    padding: 3px;
}
.dispatch-provider-panel > div:nth-child(1) {
    flex: 0 0 40%;
}
.dispatch-provider-panel > div:nth-child(2) {
    flex: 0 0 20%;
}
.dispatch-provider-panel > div:nth-child(3) {
    flex: 0 0 40%;
}
.dispatch-availability-declined {
    color: #BB0000;
}
.dispatch-availability-unavailable {
    color: #660000;
}
.dispatch-availability-available {
    color: #00BB00;
}
.dispatch-availability-preferred:after {
    margin-left: 4px;
    content: url('/Images/light-green.png');
}
.dispatch-provider-heading {
    background-color: #000;
    color: #FFF;
    font-size: 12px;
    padding: 4px;
}

.dispatch-provider-panel:first-child {
    border-top: 0;
}
#dispatcher-response-notes-container {
    border-bottom: 1px solid #AAA;
}
#dispatcher-response-notes-container #ResponseNotes {
    resize: none;
    border-radius: 0;
}

#dispatch-filter-dialog .modal-body
{
    text-align: left;
}

.dispatch-panels-container-header {
    color: #FFF;
    background-color: #666;
    margin: 12px 0 2px 0;
    padding: 15px;
    font-size: 20px;
}
.dispatch-no-requests {
    font-style: italic;
    margin-top: 10px;
    font-size: 14px;
}
.dispatch-panel {
    border: 1px solid #AAA;
    margin-top: 3px;
    padding: 10px;
}
.dispatch-panel button {
    min-width: inherit;
}

.dispatch-schedule-times > .proposal-intention,
.dispatch-proposal-notes
{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E4E4E4;
}


.dispatch-panel > .dispatch-buttons {
    float: left;
    width: 120px;
    margin-top: 10px;
}

.dispatch-panel > .dispatch-buttons button {
    width: 90px;
    margin-bottom: 5px;
}

.dispatch-panel > .dispatch-request-info {
    float: left;
    width: 300px;
    margin-top: 10px;
}
.dispatch-panel > .dispatch-service-info {
    float: left;
    width: 400px;
    margin-top: 10px;
}

.dispatch-panel > .dispatch-open-time,
.dispatch-panel > .dispatch-recent-status
{
    float: left;
    width: 400px;
    margin-top: 10px;
}

.dispatch-panel > .dispatch-recent-status li
{
    margin-top: 0;
}

.dispatch-panel .x-large {
    font-size: 28px;
}
.dispatch-pending-time-ok {
    color: #009900;
}
.dispatch-pending-time-exceeded {
    color: #FF0000;
}

#dispatch-select-dialog .modal-title > div:first-child {
    font-weight: bold;
}
#dispatch-select-dialog .modal-title > div:last-child {
    font-size: 14px;
}
#dispatch-select-dialog #spinner-span {
    /* Spinner launched when Accept/Decline proposal */
    display:inline-block; 
    height: 29px; 
    width: 40px;
}
#dispatcher-accept-buttons-container .btn-group {
    vertical-align: inherit;
}

/***************************************************************/
/**  E-DOCUMENTS                                               */
/***************************************************************/
/* Make document look like a sheet of paper */
.document-template
{
    background-color: #FFF;
    padding: 40px;
    margin: 0px;
    border: 1px solid #666;
    min-height: 300px;
}
.document-template.display-iphone {
    font-size: 16px;
}
.document-template .edoc-paragraph {
    margin-bottom: 15px;
}

.eDocControl 
{
    min-width: 100px;
}

.eDocReadonlyElement 
{
    pointer-events: none
}

.eDocControlEditorLabel {
    color: rgba(34,47,62,.7);
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    padding: 0 8px 0 0;
    text-transform: none;
    white-space: nowrap;
}

.eDocControlEditorInput {
    margin-top: 5px;
}

.eDocControlEditorInputName {
    width: 100%;
}

.eDocControlEditorAnswer {
    width: 90%;
}

.eDocControlEditorListContainer {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}

.eDocControlEditorListButton {
    margin-left: 5px;
}

.eDocControlEditorError {
    font-size: 12px;
    color: #ea3917;
    line-height: 18px;
    margin-top: 4px;
    display: none;
}


.eDocControlEditorToolBoxHeader {
    padding: 5px;
    font-weight: bold;
}

.eDocImageUpload {
    max-width: 50%;
}

/*HUB-1245 Adjust labels for checkboxes and radio buttons*/
.eDocControlRadioSpan input[type="radio"], 
.eDocControlCheckedListBoxSpan input[type="checkbox"] {
    vertical-align: top;
    margin-right: 8px;
}

#toolBoxDiv {
    border-left: 1px solid lightgray;
    padding: 5px;
}

#tinymce {
    padding: 5px;
}

#input-editor-modal #input-type-select {
    padding: 5px;
}

/* When users create a table, format it */
.document-template table
{
    padding: 20px;
}
.document-template table td
{
    padding: 5px 35px 5px 5px;
}
/* Don't apply the styling from these tables to our edoc-field-container tables */
.document-template table.edoc-field-container
{
    padding: 0;
}
.document-template table.edoc-field-container td
{
    padding: 0;
}

#signature {
    border: 1px solid #AAA;
}
#signature-instructions {
    text-align: center;
    color: forestgreen;
    font-weight: bold;
    font-size: 12px;
}

#add-signature-container
,#initial-signature-container {
    padding: 20px;
    border: 1px solid #E8E8E8;
}
#add-signature-container {
    display: none;
    margin: 50px 0 0 0;
}

.electronic-signature-block {
    font-size: 11px;
    font-weight: bold;
    word-break: break-word;
}

.drawn-signature-block > img {
    max-width: 100%;
}

.rendered-signature-container {
    padding: 20px;
    margin-top: 10px;
    border: 1px solid #E0E0E0;
}
/* FORM FIELD CONTAINERS */
table.edoc-field-container {
    display: inline-block;
    vertical-align: top;
}
.edoc-form-element
{
    border-radius: 5px;
    padding: 4px;
}
table.edoc-field-container .edoc-field-container-error
{
    color: red;
}
table.edoc-field-container .edoc-field-container-error td
{
    padding-right: 10px;
}
.edoc-field-error {
    padding-left: 10px;
    color: red;
    display: none;
}
table.edoc-field-container .edoc-required-indicator {
    display: inline-block;
    margin-left: 2px;
    font-weight: bold;
    color: red;
    vertical-align: top;
}
table.edoc-field-container .edoc-form-element.edoc-validation-failure
{
    background-color: #F2DEDE;
}
table.edoc-field-container label.edoc-validation-failure
{
    color: #A94442;
}
table.edoc-field-container .edoc-select
{
    min-width: 100px;
    padding: 3px;
}
table.edoc-field-container textarea.edoc-textarea 
{
    resize: none;
    max-width: 100%;
    margin: 0 0 -2px 0;
}
table.edoc-field-container label:last-child
{
    margin: 0;
}
table.edoc-field-container .edoc-radio, table.edoc-field-container .edoc-checkbox
{
    display: inline-block;
    margin-right: 3px;
}
table.edoc-field-container .edoc-date
{
    width: 120px;
}
table.edoc-field-container .edoc-field-container-error
{
    display: none;
}
table.edoc-field-container table.edoc-field-container.edoc-validation-failure 
{
    padding: 1px;
    border: 1px solid #000;
}

.document-template .edoc-paragraph.edoc-single-element-paragraph
{
    /* Full-line singl;e form elements with no headers (textbox, textarea, select) -- cozy these up to the line above */
    margin-top: -15px;
}

/* FORM FIELD CONTAINERS - WITHIN DYNAMIC FORMS (ProposalNotes, SessionNotes) */
/* structured-data-input-container governs styles for displaying form fields for user input */
.structured-data-input-container
{
    padding: 0px 10px;
}

/* structured-data-output-container governs styles for displaying form tables in HTML output */
.structured-data-output-container > table
{
    width: 100%;
    border: 1px solid #CCC;
    table-layout: fixed;
}
.structured-data-output-container > table td
{
    padding: 5px;
    width: auto;
}
.structured-data-output-container > table tr:nth-child(odd) td
{
    background-color: #EEE;
}
.structured-data-output-container > table tr:nth-child(even) td
{
    background-color: #E4E4E4;
}
.structured-data-output-container > table td:first-child
{
    font-weight: bold;
}
.structured-data-output-container.proposal-notes
{
    margin: 15px 5px;
}

/* static-data-output-container governs styles for displaying static single-field text in HTML output */
.static-data-output-container.proposal-notes
{
    padding: 8px;
}
.static-data-output-container.proposal-notes::before
{
    content: "\25B6\2002";
}
/* Display in the dashboard meeting */
.session-container-proposal-notes .static-data-output-container {
    background-color: #EEE;
    padding: 8px;
}
.session-container-proposal-notes .static-data-output-container::before {
    content: "\25B6\2002";
}
/* Add some margin if showing on Create Document */
#document-create-header-section .session-container-proposal-notes {
    margin-bottom: 20px;
}

/***************************************************************/
/**  E-DOCUMENTS PDFs                                          */
/***************************************************************/
body.document-template-pdf-body {
    margin: 10px;
    padding: 10px 0 0 0;
    font-size: 130% !important;
    border-top: 0;
}
body.document-template-pdf-body .document-template
{
    background-color: #FFF;
    padding: 0;
    border: 0;
}
body.document-template-pdf-body .navbar
{
    padding: 10px;
}

/***************************************************************/
/**  PROVIDER SCHEDULER                                        */
/***************************************************************/
.provider-slot-panel
{
    border: 1px solid #CCC;
    background-color: #F8F8F8;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}
.provider-slot-frequency
{
    font-weight: bold;
}
.provider-slot-panel.slot-highlight
{
    background-color: #DDD;
}

/***************************************************************/
/**  LASKER - VIRTUAL CLINIC SCHEDULING                        */
/***************************************************************/

.lasker-provider-name {
    font-weight: bold;
}

.lasker-provider-addl-desc {
    font-weight: normal;
}
.lasker-provider-tab {
    padding: 15px;
    background-color: #EEE;
    border: 1px solid #DDD;
    cursor: pointer;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
}

.lasker-provider-direct-click-tab {
    padding: 8px;
    margin-bottom: 3px;

    background-color: #EEE;
    border: 1px solid #DDD;
    border-radius: 15px;
}

.lasker-provider-tab .lasker-provider-desc {
    margin-left: 10px;
    align-self: center;
    overflow: hidden;
}

.lasker-provider-tab .lasker-provider-photo {
    margin-left: 5px;
    align-self: center;
    width: 35px;
    height: 35px;
    flex: none;
    text-align: center;
}

/* Kludge for IE since object-fit not supported */
.lasker-provider-tab .lasker-provider-photo img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10%
}

.lasker-provider-tab:hover
{
    background-color: #F8F8F8;
}
.lasker-provider-tab-active
{
    background-color: #FFF;
    font-weight: bold;
    cursor: default;
}

.lasker-provider-tab-active:hover
{
    background-color: #FFF;
}

.lasker-provider-tab .glyphicon {
    opacity: 0;
    align-self: center;
}

.lasker-provider-tab-active .glyphicon {
    opacity: 1;
}

.lasker-provider-direct-click-tab
{
    float: left;
    margin-right: 10px;
    height: 100px;
    width: 200px;
    text-align: center;
}
.lasker-provider-direct-click-tab > div
{
    margin-bottom: 10px;
}
.lasker-provider-unavailable
{
    background-image: url('/Images/crosshatch.png');
    background-repeat: repeat;

}
.lasker-provider-unavailable-none:after {
    content: ' (Currently Unavailable)';
}
.lasker-provider-unavailable-allow-scheduled:after {
    content: ' (Available for Scheduled Sessions Only)';
}
.lasker-provider-unavailable-allow-on-demand:after {
    content: ' (Available for On Demand Sessions Only)';
}
#lasker-container
{
    margin-bottom: 20px;
}

.lasker-instruction {
    font-size: 18px;
    padding: 0 6px 6px 0;
}

.lasker-selection {
    border-style: solid;
    border-radius: 15px 0 0 15px;
    border-width: 1px 1px 1px 4px;
    border-color: lightgrey;
    padding: 14px;
    margin: 0px 5px 10px 5px;
    background-color: rgba(255,255,255,0.8);
}

.lasker-selection-item {
    border-radius: 15px 0 0 15px;
}

#lasker-selection-container {
    margin-bottom: 15px;
}

#lasker-content-calendar-legend > div
{
    height: 14px;
    font-size: 12px;
    float: left;
    margin: 5px 10px 5px 0;
}
.lasker-content-calendar-legend-box
{
    border: 1px solid #000;
    width: 14px;
}

.lasker-service {
    padding: 15px;
    border: 1px solid #CCC;
    cursor: pointer;
}

.lasker-service-selected {
    background-color: #FFF;
    cursor: default;
}

.lasker-service-selected .glyphicon {
    opacity: 1;
}

.lasker-service-unselected {
    background-color: #F2F2F2; 
}
.lasker-service-unselected .glyphicon {
    opacity: 0;
}
.lasker-service-unselected:hover {
    background-color: #F8F8F8;
}

.lasker-clinic {
    background-color: #F2F2F2;
    padding: 15px;
    border: 1px solid #CCC;
    cursor: pointer;
    font-weight: bold;
}
.lasker-clinic-selected {
    background-color: #FFF;
    cursor: default;
}
.lasker-clinic-selected .glyphicon {
    opacity: 1;
}
.lasker-clinic-unselected {
    background-color: #F2F2F2; 
}
.lasker-clinic-unselected .glyphicon {
    opacity: 0;
}
.lasker-clinic-unselected:hover {
    background-color: #F8F8F8;
}
#lasker-clinic-change button 
{
    font-size: 10px;
    padding: 4px;
    margin-left: 10px;
}

#lasker-content-calendar-times-container
{
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #EEE;
    padding: 10px;
}
#lasker-content-calendar-selected-times
{
    margin-top: 10px;
    margin-bottom: 15px;
}
.lasker-placard {
    padding: 2px 3px 5px 6px;
    border: 1px solid #CCC;
    margin-bottom: 5px;
}
.lasker-placard .lasker-placard-datetime:before
,.proposal-intention p:before
{
    font-weight: bold;
    display: block;
    font-size: 12px;
}
.lasker-placard:nth-child(1) .lasker-placard-datetime:before
,.proposal-intention p:nth-child(1):before
{
    content: 'Preferred Appointment Time';
}
.lasker-placard:nth-child(2) .lasker-placard-datetime:before
,.proposal-intention p:nth-child(2):before
{
    content: 'Backup Appointment Time';
}
.lasker-placard:nth-child(3) .lasker-placard-datetime:before
,.proposal-intention p:nth-child(3):before
{
    content: 'Second Backup Appointment Time';
}
.proposal-intention .proposal-appt-slot.proposee-unavailable::after {
    content: ' **You are unavailable at this time**';
    color: red;
}
@media (max-width: 480px) {
    table.proposal-confirmation-table > tbody > tr td {
        display: inline-block;
        width: 100%;
        white-space: normal !important;
    }
}
.lasker-placard-datetime
{
    padding-top: 3px;
}
.lasker-placard-button-container
{
    float: right;
    vertical-align: top;
    margin: 3px;
}
.lasker-placard-button-container > button
{
    padding: 4px 4px 0 4px;
    font-size: 0.8em;
    vertical-align: middle;
    border-radius: 4px;
    background-color: #FFF;
    color: #000;
    border: 1px solid black;
}
#lasker-content-calendar-times-header
{
    margin-bottom: 2px;
    font-weight: bold;
}
#lasker-content-calendar-times-subheader
{
    font-size: 11px;
    margin-bottom: 5px;
}
#lasker-content-calendar-times-error
{
    font-size: 12px;
    margin-bottom: 10px;
    color: #FF0000;
}
#lasker-content-calendar-times label
{
    font-weight: normal;
}

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

.lasker-time-option {
    white-space: nowrap;
}

.lasker-time-option label 
{
    font-size: 12px;
}

/* Full Calendar.js Style Overrides */
#lasker-content-calendar-container #lasker-content-calendar-fullcalendar .fc-today.lasker-today-highlight
{
    /* Need lasker-today-highlight--if today has an appointment, we don't want this treatment for background color */
    background-color: #F8F8F8;
}
#lasker-content-calendar-container #lasker-content-calendar-fullcalendar .fc-today
{
    /* We always want to boldface the date for today */
    font-weight: bold;
}
#lasker-content-calendar-container #lasker-content-calendar-fullcalendar .fc-body .fc-row 
{ 
    min-height: 20px; 
}
#lasker-content-calendar-container #lasker-content-calendar-fullcalendar .fc-body
{
    cursor: pointer;
}
#lasker-content-calendar-container #lasker-content-calendar-fullcalendar .clicked-day
{
    background-color: #AAA;
}
#lasker-content-calendar-container #lasker-content-calendar-fullcalendar .fc-toolbar .fc-center h2
{
    font-size: 22px;
    margin-top: 5px;
}

.lasker-content-section-container {
    padding: 20px;
    margin: 0 5px 20px 5px;
    border: 1px solid lightgrey;
    background-color: rgba(255,255,255,0.8);
}
.lasker-content-instruction
{
    font-size: 20px;
    margin-bottom: 10px;
}
.lasker-content-instruction-target
{
    font-weight: bold;
}
#lasker-content-calendar-button-container
{
    margin-bottom: 10px;
}
.lasker-content-action-button-container
,#lasker-content-calendar-button-container
{
    text-align: center;
}


/***************************************************************/
/**  PLATES                                                    */
/***************************************************************/
/* Plates are used to convey static information, are used on Billing and a couple other places */
.plate {
    width: 200px;
    height: 120px;
    background-color: #F6F6F6;
    border: 1px solid #E7E7E7;
    color: #000000;
    padding-top: 10px;
    margin: 0px 15px 15px 0px;
}
.plate-inner
{
    width: 160px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.plate-header
{
    color: #666666;
}



/***************************************************************/
/**  MODALS                                                    */
/***************************************************************/
/* On modals, want to have labels stay on same line as radio buttons */
.modal label
{
    display: inline;
}
/* Modal buttons should stack with margin, and not be too wide */
.modal-body button
{
    margin-top: 10px;
    width: 200px;
}
.modal-footer button, .modal-footer a
{
    margin-top: 10px;
}
#save-dialog-main-text, .dialog-main-text
{
    font-weight: bold;
}
#save-dialog-small-text, .dialog-small-text
{
    font-size: 9pt;
}

/* Clipboard Copy Boxes should not get jacked up in a modal */
.modal-body button#clipboard-copy-button {
    margin-top: 0;
    width: inherit;
}

/***************************************************************/
/**  Stripe Elements                                           */
/***************************************************************/
/* This should match .form-control:focus in bootstrap */
.StripeElement--focus
{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);

}
.card-errors
{
    color: red;
}

/***************************************************************/
/**  DRAGIN                                                    */
/***************************************************************/
#dragin-results
{
    margin: 0;
}
tr.dragin-result-deleted > td
{
    text-decoration: line-through;
}
.dragin-result-option-column-wide
{
    width: 220px;
}
.dragin-result-option-column-narrow
{
    width: 110px;
}
.dragin-result-option-column .btn
{
    width: 94px;
}
#dragin-results-confirm-action-type
{
    font-weight: bold;
}
#dragin-results .table {
    margin-bottom: 0;
}
.dragin-pager
{
    background-color: #DDD;
    padding: 10px;
}
.dragin-pager:first-child {
    margin-top: 15px;
}
#dragin-controls, #dispatch-controls
{
    background-color: #DDD;
    padding: 10px;
}
.dragin-search-button
{
    width: 25px;
}
.dragin-buttons-group {
    line-height: 25px;
}
.dragin-pager .dragin-page-number
{
    width: 50px;
}
.dragin-pager .dragin-page-size
{
    width: 200px;
    display: inline-block;
}

#dragin-results .maskedcallusage-footer
{
    margin-top: 10px;
    font-weight: bold;
}

#dragin-results .translatorserviceusage-footer {
    margin-top: 10px;
    font-weight: bold;
}

/* Smaller text in jQuery UI autocomplete */
/* Make autocomplete always show up on top */
.ui-autocomplete {
    font-size: 12px;
    z-index: 9999 !important;
    height: 200px;
    overflow: scroll;
}
/* Bold favorites */
.autocomplete-favorite
{
    color: #000000;
    font-weight: bold;
}
.autocomplete-group {
    color: #000000;
    font-weight: bold;
    /*font-style: italic; */
    /*font-size: 1.3em;*/
}

div.datepicker
{
    z-index: 3150;  /* Necessary or datepicker can hide behind fixed topnav */
}


/***************************************************************/
/**  SURVEYS                                                   */
/***************************************************************/
.survey-stars
{
    padding-top: 7px;
    cursor: pointer;
}

/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/
/**                DASHBOARDS                                  */
/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/

/***************************************************************/
/**  DASHBOARD - COMMON                                        */
/***************************************************************/
.panel-recorded
{
    font-size: 12px;
    color: #FF0000;
    font-weight: bold;
    margin: 10px 0px;
}
.panel-stale-session-message
{
    padding: 20px 20px 15px 20px;
    color: #FF0000;
}
.rsvp-yes {
    color: #60bf16;
}
.rsvp-no
{
    color: #FF0000;
}
.rsvp-unknown {
    color: #A94442;
    font-weight: bold;
}
.availability-row
{
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding: 0px 0px 10px 5px;
}
.availability-status-section
{
    float: left;
}
.availability-group-name
{
    padding: 1px 0px 0px 13px;
    font-size: 22px;
    font-weight: bold;
}
.availability-status-image
{
    height: 33px;
    width: 62px;
    background: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    border: none !important;
    font-size:0;
}
.availability-on
{
    background-image: url("/Images/availability-on.png");
}
.availability-off
{
    background-image: url("/Images/availability-off.png");
}
.dashboard-panel div.panel-presence
{
    padding: 0px;
    margin: 10px;
    background-position-x: 15px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.image-vertical-align-helper {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.participant-dashboard .meeting-pass-deposit
{
    margin-top: 20px;
    font-size: 20px;
}
.meeting-pass-deposit
{
    font-size: 11px;
    padding-top: 4px;
}

.session-host-participant-container .waiting-for-translator 
{
    /* Spinner while waiting for translator acceptance */
    vertical-align: middle;
    height: 1.2em;
    width: 1.2em;
}

.session-host-participant-container span.translator-status-text 
{
    margin-left: 1em;
    margin-right: 1em;
}

.session-host-participant-container span.countdown-time
{
    margin-left: .5em;
}

#session-container-title-dropdown .dropdown-menu > li > a {
    padding: 0 5px 0 5px;
    font-size: 12px;
}

.session-container-topic {
    padding: 5px;
    font-style: italic;
    font-size: 110%
}

.meeting-pass-deposit > span.glyphicon
{
    font-size: 14px;
}

.panel-host-all-links-container
{
    margin-top: 15px;
    max-height: 121px;
    overflow-y: auto;
}
@media screen and (max-width:767px) {
    .panel-host-all-links-container
    {
        margin-top: 15px;
        max-height: inherit;
        overflow-y: inherit;
    }
}

.panel-double-button
{
    width: 254px;
}
@media screen and (max-width:1199.9px) {
    .panel-double-button {
        width: 200px;
    }
}

.panel-side-button
{
    width: 200px;
}
.host-meeting-panel-button
{
    width: 125px;
}
.host-meeting-panel-button-wide {
    width: 180px;
}

.panel-host-participant-hide-container
{
    margin-top: 10px;
}
.panel-host-participant-unhide-container
{
    margin-top: 10px;
    border: 1px solid #CCC;
    background-color: #EEE;
    padding: 2px;
    text-align: center;
}
.panel-host-participant-unhide-container > div
{
    margin-bottom: 10px;
    font-size: 12px;
}

.panel-host-link-container
{
    margin-top: 6px;
}
.panel-host-link
{
    font-size: 12px;
    padding-left: 18px;
    background-position: left top;
    background-size: 14px;
    background-repeat: no-repeat;
}
.panel-host-link-web
{
    background-image: url("/Images/panel-button-web-70.png");
}
.panel-host-link-doc
{
    background-image: url("/Images/panel-button-doc-70.png");
}

.meeting-dialin-button-container
{
    margin-top: 10px;
}

.meeting-dialin-text
,.meeting-h323-text
{
    padding: 10px;
    font-size: 14px;
    background-color: #F0F0F0;
    border: 1px solid #DDD;
}

.switch-user-container
{
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #E8E8E8;
    padding: 20px;
}

/***************************************************************/
/**  PLANS                                                     */
/***************************************************************/
.plan-container td:nth-child(2) {
    font-weight: bold;
}
#confirm-upgrade-dialog-minimum 
{
    font-weight: bold;
}

/***************************************************************/
/**  MED CART                                                  */
/***************************************************************/
#med-cart-control-panel {
    position: fixed;
    top: 10%;
    left: 0px;
    display: none;
    z-index: 5;
   
    /*  Since left-justified, tried having sharp corners on left. Currently leaves white pixels exposed in top left. */
    /*
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    */
}

#med-cart-control-panel .panel-heading {
    text-align: center;
    font-weight: bold;
}

.med-cart-option-sep {
    border: 1px solid gray;
    margin-top: 8px;
    margin-bottom: 10px;
}

.med-cart-controller-options {
    flex-direction: column;
    max-height: 70vh;
    overflow-y: auto;
}

.med-cart-option {
    margin-bottom: 1rem;
    display: grid;
}

.med-cart-option button {
    font-size: 1.25rem;
}

.med-cart-option .fa {
    font-size: 2rem !important;
}

.med-cart-option .far {
    font-size: 2.2rem !important;
}

.med-cart-option-icon {
    display: block !important;
    padding: .5rem;
}

.med-cart-option med-cart-usb {
}

.med-cart-option button:disabled, button[disabled] {
    background-image: url('/Images/crosshatch.png');
    background-repeat: repeat;
}


/***************************************************************/
/**  RTC SCREEN - HIDE IT ALL!!!                               */
/***************************************************************/
body.rtc-body .custom-menu-container
, body.rtc-body #securevideo-navbar
, body.rtc-body #chat-notification-container
, body.rtc-body .footer-content
, body.rtc-body .page-header
{
    display: none;
}
body.rtc-body #main-form {
    margin-top: 20px;
}


/***************************************************************/
/**  CHAT                                                      */
/***************************************************************/
body.chat-body {
    /* This keeps MS Edge from blank-screening on some systems (with hardware acceleration on) */
    padding: 0 0 0 1px;
    overflow: hidden;
}
#chat-framework {
    font-size: 14px;
    box-sizing: border-box;
}
.modern-browser#chat-framework.chat-framework-ios
{ 
    height: 80vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#chat-header-close {
    font-weight: bold;
}

/* Show/hide nav resize buttons */
#chat-framework td.resize-button-show-when-minimized {
    display: none;
}
#chat-framework td.resize-button-show-when-not-minimized {
    display: table-cell;
}
#chat-framework.nav-minimized td.resize-button-show-when-minimized {
    display: table-cell;
}
#chat-framework.nav-minimized td.resize-button-show-when-not-minimized {
    display: none;
}

/* Show/hide nav text and remove buttons */
#chat-framework .chat-nav-title-container,
#chat-framework.nav-minimized .chat-nav-remove-container
{
    display: block;
}
#chat-framework .chat-nav-abbreviation-container {
    display: none;
}
#chat-framework .chat-nav-badge-container {
    float: right;
}
#chat-framework.nav-minimized .chat-nav-title-container,
#chat-framework.nav-minimized .chat-nav-remove-container
{
    display: none;
}
#chat-framework.nav-minimized .chat-nav-abbreviation-container {
    display: block;
    text-align: center;
}
#chat-framework.nav-minimized .chat-nav-badge-container {
    float: none;
    text-align: center;
}
.chat-nav-element .chat-notify {
    display: none;
}
.chat-notify {
    position: relative;
    line-height: 0;
    vertical-align: baseline;
    margin-left: 2px;
    top: -.5em;
    font-size: 10px;
}
.chat-notify-n, .notify-manually {
    color: #FF4E4E;
}

.chat-notify-radio-container {
    margin-top: 10px;
}
@media screen and (max-width: 480px) {
    .chat-notify-radio-container {
        margin-top: 2px;
        font-size: 10px;
    }
    #set-notify-minutes-dialog hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}
.chat-notify-radio + label {
    font-weight: normal;
}

#chat-topnav {
    margin: 5px 15px 0 0;
    font-size: 14px;
    max-height: 45px;
}
#chat-topnav > a {
    padding: 15px 12px 10px 12px;
    float: right;
    cursor: pointer;
    color: #777777;
}
#chat-topnav > a:hover {
    text-decoration: none;
}
#chat-topnav > a.selected {
    background-color: #e7e7e7;
}
@media (max-width: 450px) {
    #chat-topnav > a {
        font-size: 10px;
        padding: 15px 5px 10px 5px;
    }
}


.chat-dropdown-menu {
    position: relative;
}
.chat-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 200px;
    border: 1px solid #ccc;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px 0;
    z-index: 1;
    right: 0;
    margin: 9px 0 0 0;
}
.chat-dropdown-content > li {
    list-style: none;
    padding: 5px 10px;
    color: #333;
}
.chat-dropdown-content > li:hover {
    background-color: #EEE;
}

.modern-browser#chat-framework { 
    height: 100vh;
    display: grid;
    grid-template-columns: 150px 1fr 1fr; /* This is ALWAYS overridden on initial load in application-chat.js: setChatNavWidthAndResizeButtons(true) */
    grid-template-rows: 50px auto 1fr 110px;
}

/* Header is fixed bar across the top */
#chat-grid-header {
    border-bottom: 1px solid #E7E7E7;
}
.modern-browser #chat-grid-header {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: span 3;
}

/* Nav should be on the left */
#chat-grid-nav {
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #CCC;
}
.modern-browser #chat-grid-nav {
    grid-column: 1;
    grid-row-start: 2;
    grid-row-end: span 3;
}
.ancient-browser #chat-grid-nav {
    float: left;
    height: 705px;  /* ancient-browser tuned to 1024x768 screen resolution */
    width: 100px;
}

.ancient-browser .grid-right-column {
    margin-left: 100px;
}

#chat-grid-participants {
    overflow-y: auto;
}
.modern-browser #chat-grid-participants {
    grid-column: 3;
    grid-row-start: 2;
    grid-row-end: span 3;
}

#chat-grid-manage {
}
.modern-browser #chat-grid-manage {
    grid-column: 2;
    grid-row: 2;
}
.ancient-browser #chat-grid-manage,
.ancient-browser #chat-thread-header,
.ancient-browser #chat-thread-header-participants
{
    height: 95px;
}
.ancient-browser #chat-thread-header-participants
{
    overflow-y: auto;
}


.modern-browser #chat-grid-content
{
    grid-column: 2;
    grid-row: 3;
    overflow-y: auto;
}
.ancient-browser #chat-grid-content {
    height: 500px;
}

.chat-nav-resize-button {
    padding:10px;
}
#chat-grid-send {
    padding: 5px;
}
.modern-browser #chat-grid-send
{
    grid-column: 2;
    grid-row: 4;
}
.ancient-browser #chat-grid-send {
    height: 100px;
}

#chat-nav-resize-container {
    border-bottom: 1px solid #CCC;
    line-height: 20px;
}
#chat-nav-resize-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
#chat-nav-resize-table td {
    font-size: 10px;
    border-left: 1px solid #CCC;
    text-align: center;
    cursor: pointer;
}
#chat-nav-resize-table td:first-child {
    border-left: 0;
}
#chat-nav-resize-table td:hover {
    background-color: #DDD;
}

.chat-code {
    color: #999;
}

#chat-nav-container {
    overflow-y: auto;
    height: 100%;
}
.chat-remove-button {
    padding: 2px;
}
.ancient-browser .chat-remove-button {
    background-color: #000;
    color: #fff;
    border: 0;
}

#chat-header-logo
{
    float: left;
}
@media (max-width: 767px) {
    #chat-header-logo
    {
        display: none;
    }
}

/* The container used off-chat-app */
#chat-notification-container {
    display: none;
    border-top: 1px solid #BBB;
    position: fixed;
    z-index: 101;     /* Chat frame must always be on top of everything except modals */
    background-color: #CC0000;
    bottom: 0;
    right: 0;
    padding: 10px 0 0 60px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
    margin: 0px;
    width: 300px;
    height: 39px;
    background-image: url("/Images/chat.png");
    background-position: left top;
    background-repeat: no-repeat;
}
#chat-notification-container:hover {
    background-color: #FF0000;
}

#chat-logged-in-link-hidden a { 
    display: none;
}

#chat-logged-in-link-if-exists-unread-messages a,
#chat-keyed-link-if-exists-unread-messages a 
{
    display: none;
}
#chat-logged-in-link-if-exists-unread-messages a.has-unread-chat-messages,
#chat-keyed-link-if-exists-unread-messages a.has-unread-chat-messages
{
    display: inherit;
}

#chat-header-button-container {
    float: right;
    margin: 4px 4px 0 0;
}
#chat-header-container img
{
    height: 45px;
}
#chat-thread-edit-participants-title
{
    padding: 10px;
    background-color: #000;
    color: #FFF;
}
#chat-thread-edit-participants-body
{
    padding: 20px;
}
#chat-thread-edit-participants-body .dropdown-menu
{
    min-width: inherit;
    z-index: 50000;
}
#chat-thread-edit-participants-body .dropdown-menu > li > a
{
    padding: 3px 15px;
    font-size: 12px;
}
.chat-edit-button-container
{
    margin: 22px 0 12px 0;
}

#set-notify-minutes-dialog select {
    padding: 5px;
}
#set-notify-minutes-dialog .modal-body
{
    text-align: left;
}

#chat-participant-details-container {
    margin-top: 20px;
    padding: 20px;
}
.edit-contact-info-button {
    margin-top: 3px;
    min-width: 260px;
    line-height: 1.6;
    min-height: 85px;
}

/* Remove the outline when clicked, but keep it for accessibility on hover, focus, etc. */
#chat-framework button {
    outline: 0;
}
a:hover, a:active, a:focus {
  outline: inherit !important;
}
#chat-framework .control-label {
    font-size: 14px;
}
.refresh-page-link-container
{
    font-size: 60%;
}
#chat-framework .chosen-container-multi .chosen-choices {
    /* Round off the select box and make larger */    
    padding: 10px;
    border-radius: 5px;
}
#chat-framework .chosen-container-multi .chosen-choices li.search-choice,
#chat-framework .chosen-container .chosen-results li
{
    /* Make the selected participants bigger and nicer */
    padding: 8px 30px 8px 10px;
    line-height: 100%;
}

#chat-threads-container
{
    height: 100%;
    padding-top: 5px;
    overflow-y: auto;
    border-top: 1px solid #CCC;
}
#chat-thread-header-participants 
{ 
    font-weight: bold; 
    padding: 10px;
}
.chat-thread:empty::after
{
    padding: 10px;
    content: "This chat thread has no messages";
    font-style: italic;
    font-size: 80%;
}

/* Chat title abbreviation and expansion */
.chat-nav-title-container .chat-title-others-list
{
    /* Don't ever display the link or others list in the navbar */
    display:none;
}
.chat-nav-title-container .chat-title-others-list
{
    /* Don't ever display the link or others list in the navbar */
    display:none;
}
/* By default, don't show list of others, only show indicator for others */
#chat-thread-header-participants .chat-title-others-list
{
    display: none;
}
#chat-thread-header-participants .chat-title-others-indicator-link,
.chat-title-others-shorten-link
{
    text-decoration: underline;
}
#chat-thread-header-participants .chat-title-others-indicator-link:hover,
.chat-title-others-shorten-link:hover
{
    color: #999;
    cursor: pointer;
}
/* When shown by adding class .chat-title-show-others to #chat-thread-header-participants */
#chat-thread-header-participants.chat-title-show-others .chat-title-others-list
{
    display: inline;
}
#chat-thread-header-participants.chat-title-show-others .chat-title-others-indicator
{
    display: none;
}
.chat-title-others-shorten
{
    font-size: 12px;
}

#chat-thread-header-buttons {
    margin: 5px 5px 5px 10px;
    float: right;
}
#chat-thread-header-buttons button {
    width: 120px;
}
#chat-thread-header-buttons .dropdown-menu {
    left: inherit;
    right: 0;
}

#chat-keyed-link-hidden, .guest-user #chat-keyed-link {
    display: none;
}

.chat-message-send-container
{
    height: 100px;
}
.chat-message-send-textarea-container
{
    margin-right: 112px;
}
.chat-message-send-textarea-container .chat-message-send-textarea
{
    resize:none;
    border-radius: 4px;
    height: 100px;
    font-size: 100%;
    color: #000;
}
.chat-message-send-button-container
{
    float: right;
    height: 100%;
}
.chat-message-send-button
{
    float: right;
    height: 100%;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
}
.chat-message-upload-button {
    float: right;
    height: 100%;
    font-weight: bold;
}
#chat-form-select-container {
    padding: 0 10px 20px 10px;
    border-bottom: 1px solid #DDD;
}
#chat-form-complete-container {
    padding: 0 10px 20px 10px;
}
.chat-dropzone-container {
    padding: 0 10px;
}
.chat-dropzone {
    color: #1F6E42;
    height: 200px;
}
.chat-window-dropzone
{
    background-color: #FFF;
    color: #999;
    font-size: 10px;
    padding: 6px;
    margin: 4px 0px;
    height: 140px;
    max-height: 300px;
    overflow: auto;
}
.chosen-container.chosen-container-multi {
    font-size: 100%;
}
.chat-nav-element {
    padding: 10px 4px;
    border-bottom: 1px solid #999 !important;
    cursor: pointer;
}
.chat-nav-element.chat-nav-selected {
    cursor: default;
}
.chat-nav-remove-container {
    float:left;
    margin-top: -7px;
}
.chat-nav-remove-container > button {
    font-size: 10px;
    margin-right: 10px;
    color: #000;
}
.chat-nav-badge-container
{
    float: right;
}
.chat-nav-badge-container > .badge,
.navbar .badge
{
    background-color: #FF0000;
    margin-right: 4px;
}
.chat-message-container
{
    margin-bottom: 12px;
}
.chat-message-footer
{
    font-size: 75%;
    margin: 0 10px;
}
.chat-delete-message-button
{
    font-size: 80%;
    padding: 1px;
    margin-left: 5px; 
}
.chat-message-body
{
    width: 80%;   /* Must specify this to get word-wrap to work properly! */
    padding: 10px;
    position: relative;
    border-radius: 4px;
    white-space: pre-line;  /* Honor line breaks */
}
.chat-message-footer
{
    padding: 2px;
}
.chat-message-footer-self
{
    text-align: right;
}
/* Chat triangles */
.chat-message-body-self:after
{
    content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: auto;
	right: -5px;
    top: 0px;
	bottom: auto;
	border: 5px solid;
	border-color: #eee transparent transparent transparent;
}
.chat-message-body-other:after
{
    content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: -5px;
	right: auto;
    top: 0px;
	bottom: auto;
	border: 5px solid;
	border-color: #DAD9E2 transparent transparent transparent;
}
.chat-message-body-self
{
    margin-right:5px;
    margin-left: auto;
    background-color: #eee;
}
.chat-message-body-other
{
    margin-left: 5px;
    margin-right: auto;
    background-color: #DAD9E2;
}
.chat-typing .chat-message-body-other
{
    background-color: #DAD9E2;
}

.dz-progress
{
    height: 6px;
    background-color: #CCC;
    padding: 0px;
}
.dz-progress > .dz-upload
{
    display: block;
    background-color: #000;
    height: 6px;
    padding: 0px;
}

#upload-dropzone-container .dz-progress
{
    width: inherit;
}

.dz-success-mark,
.dz-error-mark
{
    display: none;
}

/***************************************************************/
/**  DASHBOARD - HOST DASHBOARDS                               */
/***************************************************************/
.session-container-session-anchor
{
    display: block; 
    position: relative; 
    top: -60px; 
    visibility: hidden;
}
.session-container
{
    background-color: #FFFFFF;
    border: 1px solid #BBB;
    margin-bottom: 40px;
}
.session-container-title
{
    padding: 7px;
    margin: 0px;
    font-size: 20px;
}
.session-container-title .session-date,
.session-container-title .session-time
{
    float: left;
    margin-right: 30px;
    width: 300px;
}
.session-container-title .session-id
{
    float: right;
    margin-left: 50px;
}

 .session-container-title .title-text {
        margin-left: 25px;
 }

.session-container-title .title-image {
    height: 21px;
}

.session-container-title.dropdown-toggle {
    margin-top: 3px;
    border-radius: 4px;
}

.session-container-title.dropdown-toggle:focus {
    outline: none;
}

.session-container-title.dropdown-toggle:hover {
    background-color: white;
}

.session-container-title .glyphicon {
   top: 3px;
}


.session-container-title .session-timezone {
    font-size: 70%;
}
.session-container-proposal-notes
{
    background-color: #FFF;
    color: #666;
    padding: 0px;
}
.session-container-proposal-svc-header {
    background-color: #EEE;
    padding: 8px;
}
.session-container-body
{
    padding: 7px;
}

.pending-panel-time .x-large {
    font-size: 28px;
}

.proposal-progress-container {
    float: left;
    margin: 30px;
}

#position-in-queue {
    font-weight: bold;
    font-size: 16px;
}

.session-container-no-meetings {
    padding: 20px;
    font-style: italic;
}

.meeting-recurrence-label {
    width: 140px;
    margin-right: 10px;
    margin-top: 10px;
}

.meeting-recurrence-radiobutton-label {
    margin-right: 10px;
}

.meetingOccurrenceContainer {
    font-size: 12px;
    background-color: #EDEDED;
}

.meetingOccurrenceContainerPadding {
    padding: 7px;
    padding-top: 12px;
}

.occurrence-start-date {
    width: 270px;
}

.occurrence-freq {
    width: 207px;
}

.occurrence-endon {
    width: 223px;
}

.occurrence-endafterX {
    width: 161px;
}

.occurrence-future-sessions-header {
    margin-top: 17px;
}

.occurrenceCollpasableContent .occurrenceClear {
    clear: both;
}

.occurrenceCollpasableContent .occurrenceCommandButton {
    float: right;
}

.occurrence-content-list-legend-item {
    height: 14px;
    font-size: 12px;
    display: inline-block;
    margin: 5px 10px 5px 0;
}

.occurrence-content-list-legend-box {
    height: 14px;
    border: 1px solid #000;
    width: 14px;
    display: inline-block;
    margin-right: 6px;
}
.occurrence-content-list-legend-text {
    margin-right: 12px;
}


@media (max-width: 990px) {
    .occurrence-content-list-legend-item {
        display: block;
        margin-bottom: 10px;
    }
}


#occurrence-content-list-fullcalendar .fc-body {
    cursor: pointer;
}

.occurrence-disabled {
    cursor: default;
}

.occurrence-meetingday-highlight {
    background-color: #E9B2BC;
}

.occurenceDisplayHide {
    display: none !important;
}

.occurenceDisplayBlock {
    display: block;
}

.occurrence-normal {
    background: #F1F9F9 !important;
}

.occurrence-added-color {
    background: #F3DFE3;
}

.occurrence-calendar-cell-time {
    font-weight: bold;
    padding: 5px !important;
    font-size: 8px;
}

.occurrence-added {
    background: #F3DFE3 url("/Images/occurrence-added.png") no-repeat center center !important;
}

.occurrence-removed-color {
    background: #FFDCB8;
}

.occurrence-removed {
    background: #FFDCB8 url("/Images/occurrence-removed.png") no-repeat center center !important;
}

.occurrence-changed-color {
    background: #E1F2FB;
}

.occurrence-changed {
    background: #E1F2FB url("/Images/occurrence-changed.png") no-repeat center center !important;
}

.occurrence-start {
    background: #BBDED6 
}

.occurrence-info {
   height: 16px;
}

#occurrenceDates .fc-unthemed td {
    border-color: darkgray !important;
}

.radioLeft {
    text-align: left;
}

.occurrenceDates ol li label{
    list-style-type: none;
    counter-increment: item;
}

.occurrenceDates ol li[data-exclude="True"] label {
    text-decoration: line-through;
}

.occurrenceDates ol li[data-exclude="true"] label {
    text-decoration: line-through;
}

.occurrenceDates .occurrenceDateBtn {
    width: 120px;
}

.occurrenceExcludeDateLabel {
    width: 175px;
}

.session-host-participant-container {
    /* If changing the container height, width, or font size, make sure to change the shrinkToFit jquery extension */
    float: left;
    margin: 6px 12px 6px 0px;
    width: 260px;
    height: 215px;
    padding: 10px;
    text-align: center;
}
.show-securevideo-ui-false .session-host-participant-container
{
    height: 120px;
}
.securevideo-dialog-main-text
{
    font-weight: bold;
    font-size: 14px;
}
.securevideo-dialog-small-text
{
    margin-top: 15px;
}
.session-host-participant-container .session-host-participant-name
{
    /* This is resized via JS in dashboard cshtml files upon reload--if changing font-size, change shrinkToFit jquery extension */
    font-weight: bold;
    font-size: 18px;
    height: 35px;
    line-height: 110%;
    overflow: hidden;
}
.session-host-participant-container .session-host-participant-email {
    height: 35px;
    word-break: break-word;
    line-height:100%;
}
.session-host-participant-svc {
    font-size: 12px;
    margin-top: 5px;
    text-transform: uppercase;
}
.session-add-buttons
{
    background-color: #F8F8F8;
    text-align: center;
}
.dashboard-range-picker-container
{
    margin-bottom: 5px;
}

body div#main-body .dashboard-range-picker-container .btn-default {
    background-color: #FFFFFF;
    color: #333333;
    border-color: #CCCCCC;
}
body div#main-body .dashboard-range-picker-container .btn-default:hover,
body div#main-body .dashboard-range-picker-container .btn-default.dashboard-range-picker-selected {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
body div#main-body .dashboard-range-picker-container .btn-default.dashboard-range-picker-selected {
    cursor: default;
    font-weight: bold;
}

/* Session Documents in Document/Create */
#document-create-header-section .session-documents-table {
    margin: 0;
}
#document-create-header-section .session-container-title {
    margin-top: 20px;
}

/* Session Documents */
.session-documents-table {
    margin: 25px 0 0 0;
    border: 1px solid #CCC;
    border-collapse: separate;  /* This seems to be necessary for the right border to appear on Chrome */
}

.session-documents-panel .session-documents-header {
    background-color: #DDD;
    color: #000;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
}
@media (max-width: 767px) {
    .session-documents-panel .session-documents-header {
        text-align: left;
        font-weight: bold;
        font-size: 16px;
    }
}
.session-documents-table td:first-child .btn {
    width: 100px;
}

.document-view-subtable {
    width: 100%;
}
.document-view-subtable td:nth-child(2) {
    text-align: right;
    padding: 3px 0;
}

.document-highlight {
    color: #8a6d3b;
    background-color: #fcf8e3; /* must match immediate below */
    border-color: #faebcc;
    border-radius: 6px;
    padding: 20px;
}
table.table-striped > tbody > tr.document-completing-instant {
    background-color: #fcf8e3;  /* must match immediate above */
}
table.table-striped > tbody > tr.document-completing-instant > td {
    font-weight: bold;
}

#document-create-session-documents .session-documents-panel {
    margin-bottom: 20px;
}

.participant-dashboard .session-documents-panel {
    margin: 0 15px;
}

.proposee-proposal-container
{
    border: 1px solid #888;
    border-radius: 0px;
}
.proposee-proposal-container > div
{
    padding: 8px;
}
.proposee-proposal-header
{
    border-bottom: 1px solid #CCC;
    font-size: 18px;
    background-color: #F8F8F8;
}
.proposee-proposal-footer
{
    border-top: 1px solid #F0F0F0;
    font-size: 12px;
    font-style: italic;
}
.proposee-proposal-notes
{
    font-size: 14px;
}
#ProposalNotes, #ResponseNotes
{
    height: 75px;
}
.proposal-response
{
    margin: 8px 0px 8px 10px;
}
.proposal-response-host
{
    font-weight: bold;
}
.proposable-panel-container
{
    padding: 0px;
}
.proposable-panel
{
    margin: 12px;
    text-align: center;
    padding: 15px;
    background-color: #F4F4F4;
    border: 1px solid #E2E2E2;
}
.proposable-panel-floating
{
    float: left;
    width: 260px;
    height: 130px;
}
.proposable-panel-proposee
{
    font-size: 18px;
    margin-bottom: 10px;
}
.proposable h4
{
    margin: 10px 0px 10px 12px;
    border-bottom: 1px solid #DDD;
}
.proposable + .proposable
{
    /* Second and subsequent proposables */
    margin-top: 40px;
}
.proposal-confirmation-table td:last-child
{
    font-weight: bold;
}

/***************************************************************/
/**  DASHBOARD - PARTICIPANT DASHBOARDS                        */
/***************************************************************/
.participant-dashboard .session-container
{
    /* On participant dashboard, we don't want border/margin/padding */
    background-color: inherit;
    border: inherit;
    padding: inherit;
    margin-bottom: inherit;
}
.participant-dashboard .session-container-title
{
    /* Always override the themes on the participant dashboard */
    background-color: inherit !important;
    color: inherit !important;
    padding: 0;
    margin: 0;
    font-size: 24px;
}
.participant-dashboard .session-container-title .session-date,
.participant-dashboard .session-container-title .session-time
{
    float: inherit;
    margin-right: inherit;
    width: inherit;
    margin-bottom: 20px;
}
/* panel-buttons: used on the participant dashboard ONLY, for rsvp docs, payment, etc. */
.panel-button-container {
    text-align: center;
    width: 200px;
    height: 160px;
    overflow-y: hidden;
}
.panel-button-below-text {
    padding: 4px;
    margin: 0 auto;
    width: 120px;
    font-size: 12px;
}
.panel-button {
    /* For width and height, rely on image */
    text-decoration: none; 
    display: inline-block; 
    background: #E0E0E0;
    padding: 10px;
    border: 1px solid #999999;
    border-radius: 5px;
}
.panel-button:hover {
    background: #E6E6E6;
}
.panel-main-button {
    padding-top: 30px;
    padding-bottom: 30px;
}
@media (min-width:768px) {
    .panel-main-button {
        font-size: 150%;
        width: 70%;
    }
}


/***************************************************************/
/**  Styles for jquery-sortable (used on Branding Menus)       */
/***************************************************************/
body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.sortable-list li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.sortable-list li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}



/***************************************************************/
/**  Styles for Google CSE (search used in Support Center)     */
/***************************************************************/
.gsc-wrapper .gs-no-results-result .gs-snippet, 
.gsc-wrapper .gs-error-result .gs-snippet
{
    padding: 10px;
    border: 1px solid #999;
    background-color: #EEE;
}



/*******************************************/
/*    Bootstrap Modal Positioning          */
.modal{
    width: 100%;
    position: fixed;
    text-align: center;
    margin: 0px auto;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1050;
}
.modal_wrapper{
    display: table;
    overflow: auto;
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    text-align: center;
    margin: 0px auto;
}
.modal-dialog{
    display: table-cell;
    vertical-align: middle;
}
.modal-light-background
{
    background-color: orange;
}
/**********************************/


/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/
/**                VIEW-SPECIFIC CSS                           */
/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/

/***************************************************************/
/**  Layout.cshtml                                             */
/***************************************************************/
.main-logo {
    max-height: 45px;
    max-width: 225px;
}

.oneclick-waiting-room-image-preview {
    max-height: 150px;
    max-width: 300px;
}

.page-header > h1
{
    overflow: hidden;
}
#page-title-margin-push {
    height: 60px;   /* This will be overridden in javascript, every time, but looks better on long page load if reasonably close */
}
.footer-content {
    padding: 10px;
    font-size: 10px;
    background-color: #ffffff;
    text-align: center;
    margin-bottom: 35px;
}

/*Account/*/
#togglePassword {
    position: absolute;
    top: 17px;
    display: flex;
    align-items: baseline;
    justify-content: space-evenly;
    right: 0;
    text-decoration: none;
    padding: 0;
    width: 72px;
    color: gray;
    cursor: pointer;
    right: 16px;
}

/* Account/Edit */
#new-account-pricing .section-panel-body {
    padding: 10px;
}
#new-account-pricing .table {
    margin-bottom: 0;
}
#new-account-pricing .small {
    margin-top: 5px;
}

#sms-opt-in {
    background-color: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
    color: #000;
    border-radius: 4px;
    font-size: 80%;
    margin: 0;
}
#group-membership-panel {
    display: none;
}
#email-in-use-check, #password-check
{
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 15px;
    font-size: 13px;
}
.email-in-use-success, .password-check-success
{
    background-color: #dff0d8;
    border: 1px solid #cfe0c8;
}
.email-in-use-notification {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.password-check-error, .email-in-use-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
/* Account/Public */
.action-button
{
    position: absolute;
    bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    left: 40px;
    right: 40px;
}

/* Virtual Clinic Setup Wizard */
button.sw-btn-wiz-cancel
{
    background-color: gray !important;
    border-color: gray !important;
}

/*button.sw-btn-wiz-create, button.sw-btn-wiz-appt-slots {
    background-color: green !important;
    border-color: green !important;
}
*/
.wizard-suggestion-container {
    margin-left: 5em;
}


/* Pass/Dashboard */
.session-participant-container .securevideo-connector {
    height: 80px;
    font-size: 120%;
}

/* Pass/BypassLinkChecker */
#confirm-or-decline-spinner-container {
    position: relative;
    height: 400px;
}
#confirm-or-decline-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
}

/* Shared/PassPanel Add/Edit Participant */
#participant-modal .modal-body, 
#session-modal .modal-body,
#translator-modal .modal-body {
    text-align: left;
}
.geoinfo
{
    font-size: 10px;
}

/* Knowledge/Index */
.support-header {
    background-color: #eef8ff;
    border: 1px solid #ced8df;
    border-radius: 4px;
    padding: 25px;
    margin-bottom: 40px;
}

/* Knowledge/Edit */
.screencap {
    width: 390px;
    float: left;
    font-size: 8pt;
}
.screencap img
{
    width: 380px;
}
.screencap-url
{
    font-family: Courier;
    font-size: 7pt;
    width: 380px;
    margin-bottom: 30px;
}

/* Knowledge/Details */
/* Get named anchors to work properly with fixed headers */
.knowledge-base-container a[id]:before, .knowledge-base-container a[name]:before
{
    content:"";
    display:block;
    height:110px;
    margin:-80px 0 0;
}
.knowledge-base-article-title {
    font-size: 24px;
    font-weight: bold;
}
.knowledge-base-section-title {
    font-size: 24px;
    font-style: italic;
}

/* Knowledge/Edit */
/* Forces images to render not-too-wide on mobile devices */
.kb-section img {
    max-width: 100%;
}

/* Manage/Index */
#main-body .search-result-customer
{
    /*
    padding: 11px;
    */
    text-indent: -10px !important;
    padding-left: 10px;
}
#main-body .search-result-customer > a
{
    font-weight: bold;
}
#main-body .search-result-host
{
    font-size: 12px;
}
#main-body .search-result-host > span
,#main-body .search-result-customer > span
{
    font-size: 10px;
}
#main-body .search-result-host > a
{
    margin-left: 10px;
}

/* Options */
.option-item > div {
    margin-top: 10px;
}
.option-name {
    font-weight: bold;
    font-size: 16px;
}
.option-description {
}
.option-sublabel {
    font-size: 10px;
}
.option-value {
    font-weight: bold;
}
.option-item-disabled {
    background-color: #EEE;
    opacity: 0.4;
    z-index: 1;
}
.option-item-container {
    position: relative;
    margin: auto;
    list-style: none;
}
.option-item-centering {
    text-align: center;
}
.section-spinner-container {
    display: none;
    width: 100%;
    position: absolute;
    top: 45%;
    left: 0;
    list-style: none;
    margin: auto;
    text-align: center;
}
.section-spinner {
    display: inline-block;
    height: 25px;
    width: 25px;
    border: 4px solid #000; /* This color will get opaqued out somewhat */
    border-top: 4px solid #0468Ab; /* This color will get opaqued out somewhat */
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Interstitial/View */
.big-question {
    font-size: 16px;
    margin: 40px 0;
    padding-left: 50px;
}
.big-question > div {
    margin-top: 15px;
    padding-left: 20px;
    font-size: 14px;
}
.interstitial-form-error {
    margin: 10px 0;
    border: 1px solid #DDC8C8;
    border-radius: 6px;
    background-color: #FFF8F8;
    font-weight: bold;
    padding: 20px;
    color: red;
}
.interstitial-graphics {
    margin-top: 15px;
}

.interstitial-graphics img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* Customer/Usage */
table#gross-margin-table.table tr:first-child td  {
    font-weight: bold;
}
table#gross-margin-table.table .gross-margin {
    padding-left: 15px;
}
.gross-margin-light-blue {
    background: url('/images/light-blue.png') no-repeat left center;
}
.gross-margin-light-green {
    background: url('/images/light-green.png') no-repeat left center;
}
.gross-margin-light-yellow {
    background: url('/images/light-yellow.png') no-repeat left center;
}
.gross-margin-light-red {
    background: url('/images/light-red.png') no-repeat left center;
}

/* Customer/Baa */
.baa-iframe {
    width: 100%;
    height: 500px;
}

.baa-options {
    display: inline;
}

.baa-buttons button {
    display: inline;
}

/* Customer/ManagedSettings */
#evaluated-json pre {
    text-align: left;
    height: 600px;
    overflow-y: auto;
}
textarea#EhrConfigurationJson
{
    height: 600px;
}

/* Customer/Pricing */
#CustomerNote {
    color: red;
}

/* Custom top menu for customers using branding */
.custom-menu-container
{
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 0px;
    margin-bottom: 8px;
}
.custom-menu
{
    font-size: 16px;
    padding: 0px;
    border-left: 1px solid #666;
    display: table-cell;
}
.custom-menu a
{
    display: block;
    padding: 3px;
    text-align: center;
    overflow: hidden;
    height: 30px;
    text-decoration: none;
}

@media screen and (max-width:767px) {
    .custom-menu a
    {
        font-size: 10px;
    }
}

/* One-Click Readiness Check */
#network-test-results-table tr:first-child,
#network-test-results-table td:first-child {
    font-weight: bold;
}
#network-test-results-table glyphicon-ok {
    color: green;
}
#network-test-results-table glyphicon-remove {
    color: red;
}
.result-network {
    font-size: 20px;
}
#s3Key {
    font-size: 36px;
}

/* Book */
a.book-select-option {
    display: block;
    height: 100px;
    padding: 35px 0 0 30px;
    font-size: 18px;
    background-color: #EEE;
    border: 1px solid #CCC;
    margin: 20px 0 10px 0;
}
a.book-select-option:hover {
    text-decoration: none;
    background-color: #F8F8F8;
}

/* Terms of Service */
div.tos-message {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 110%;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    color: #333333;
    background-color: #f5f5f5;
}
div.tos-body ol li, div.tos-body p {
    margin: 20px 0;
}
div.tos-body, div.tos-footer-accept, div.tos-footer-later {
    padding: 20px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.tos-footer-later {
    color: #777;
    margin-top: 20px;
    font-size: 90%;
}

/* Calendars */
a.calendar-meeting {
    padding: 4px;
    border: 0;
}

.user-calendar .fc-day-grid-event .fc-content {
    white-space: normal !important;
}

a.calendar-recurring-meeting {
    padding: 4px;
    border: 0;
}
a.calendar-global-securevideo
{
    padding: 4px;
    background-color: #000 !important;
    color: #FFF !important;
    border: 0;
}
a.calendar-global-customer
{
    padding: 4px;
    background-color: #666 !important;
    color: #FFF !important;
    border: 0;
}
a.slot-REMOVE, div.slot-REMOVE
{
    padding: 4px;
    background-color: #BF0000 !important;
    color: #FFF !important;
    border: 0;
}
a.slot-ADD, div.slot-ADD
{
    padding: 4px;
    background-color: #267F00 !important;
    color: #FFF !important;
    border: 0;
}

a.calendar-google-event {
    padding: 4px;
    color: #FFF !important;
    border: 0;
}
.calendar-legend-google-session, a.calendar-google-event {
    background-color: #B7CCBE !important;
}

a.calendar-microsoft-event {
    padding: 4px;
    color: #FFF !important;
    border: 0;
}
.calendar-legend-microsoft-session, a.calendar-microsoft-event {
    background-color: #B9B7CC !important;
}

a.calendar-past-event {
    padding: 4px;
    color: #FFF !important;
    border: 0;
    cursor: default;
}
.calendar-legend-past-session, a.calendar-past-event {
    background-color: #E7E7E7 !important;
    color: black !important;
}

.fc-scroller {
    height: auto !important; /* set the height of the events container to be determined by the number of events */
    overflow: hidden !important; /* hide any overflow beyond the calendar */
}

.fc-bgevent {
    background: none !important;
    background-image: url(/Images/crosshatch.png) !important;
    background-repeat: repeat !important;
    opacity: 0.5 !important;
}

/* CloudRecording/Upload */
#upload-dropzone-container
{
    border: 1px solid #CCC;
    border-radius: 5px;
    font-size: 16px;
}

/* Favorite/Index */
.favorite-radios
{
    width: 300px;
}
.favorite-radios label
{
    width: 80px;
}
.favorite-names
{
    padding-top: 10px !important;
}

/* Notes/Edit */
.note-tag
{
    display: inline-block;
    background-color: #EEE;
    font-size: 12px;
    padding: 3px 10px;
    margin: 5px 10px 5px 0px;
}
.note-tag > button
{
    border: 0;
}
.other-note
{
    border: 1px solid #CCC;
    margin: 15px 3px;
}
.other-note > div
{
    padding: 5px;
}
.other-note-header
{
    border-bottom: 1px solid #CCC;
}
.other-note-timestamps
{
    font-size: 12px;
    font-weight: bold;
}
.other-note button
{
    font-size: 10px;
    vertical-align: top;
}
.other-note-text pre
{
    border: 0;
}

/* Super/System */
.show-cache-key
{
    background-color: #F0F0F0;
    padding: 4px;
    display: inline-block;
    font-size: 10px;
    margin: 0px;
    width: 210px;
    overflow: hidden;
}
#mass-delete-result{
    font-weight: bold;
}

/* IndividualClinicAssoc/Edit */
.individual-clinic-assoc input 
{
    vertical-align: top;
}

.virtual-clinic-assoc label 
{
    max-width: 22px;
}

/* Listing/Edit */
.practice-types input {
    vertical-align: top;
}
.practice-types label
{
    max-width: 220px;
}

/* Listing Displays */
.listing-photo-container {
    margin-bottom: 20px;
}
@media (min-width: 600px) {
    .listing-photo-container {
        float: left;
    }
}
.provider-card
{
    margin-bottom: 10px;
    border-radius: 3px;
    padding: 24px;
    border: 1px solid #DDD;
}
.provider-card.provider-featured
{
    border: 2px solid #AFC0A8; /* #DFF0D8 */ 
}
.provider-card .provider-thumb
{
    float: left;
    margin: 10px 20px 10px 10px;
}
.provider-card .provider-name
{
    font-size: 18px;
    font-weight: bold;
}
.provider-card .provider-name a
{
    text-decoration: underline;
}
.provider-card .provider-license
{
    font-size: 13px;
    /* font-style: italic;*/
    margin: 5px 0px;
    line-height: 12px;
}
.provider-card .provider-member-since
{
    font-size: 11px;
    /* font-style: italic;*/
    margin: 5px 0px;
    line-height: 12px;
}
.provider-card .provider-specialties
{
    font-size: 12px;
    text-align:justify;
    line-height: 20px;
}


/***********************************************/
/* Cloud Recording playback */

/***********************************************/
.chunks-complete
{
    margin-bottom: 5px;
}
.chunk-button
{
    margin-right: 3px;
    margin-bottom: 5px;
    width: 45px;
}
.chunk-button-disabled
{
    background-color: #333;
    color: #FFF;
}
pre.pre-bookmark {
    border: 0;
    background-color: inherit;
    max-width: 350px;
    word-break: normal;
    word-wrap: break-word;
    white-space: pre-wrap;
    vertical-align: top;
    padding: 0;
}


/***********************************************/
/* Recording playback */
/* Cloud Recording playback */
.chunk-viewer, #video-full, #audio-full, .audio-container
{
    width: 100%;
    min-width: 250px;   /* Needed to keep download button hidden in Chrome */
}

/* VSee Recording playback */
.video-container {
    width: 420px;
    height: 320px;
    position: relative;
    margin: 5px;
    float: left;
}

.user-name {
    position: absolute;
    top: 3px;
    padding: 5px;
    left: 0px;
    right: 0px;
    opacity: 0;
    border: none;
    margin: 0;
    background-color: #666666;
    color: #FFFFFF;
    font-size: 12px;
    transition: opacity .2s;
    -webkit-transition: opacity .2s; /* Safari */
}

.video-controls {
    position: absolute;
    bottom: 10px;
    left: 5px;
    right: 5px;
    opacity: 0;
    border: none;
    margin: 10px 0 0 0;
    transition: opacity .2s;
    -webkit-transition: opacity .2s; /* Safari */
    background-color: #CCCCCC;
    border:2px solid #a1a1a1;
    border-radius:10px;
    padding: 4px;
}

.video-controls input
{
    float: left;
    height: 15px;
}

.video-container:hover .user-name {
    opacity: 0.9;
}

.video-container:hover .video-controls {
    opacity: 0.9;
}

/***********************************************/
/* Masked Calling Dialer */

.masked-call-connect-panel {
    background-color: green;
    padding: 5px;
    /*display: flex;
    flex-direction: row;*/
}

.masked-call-connect-panel .info-panel {
    color: white;
}

.masked-call-connect-panel .connect-panel-buttons {
/*    position: absolute;
    top: 10px;
    right: 10px;*/
}

.masked-call-connect-panel .connect-panel-buttons button {
    margin-left: 5px;
    margin-bottom: 5px;
    height: 45px;
    width: 45px;
}

.secondary-dashboard[nested-by="maskedcall"] {
    /*flex-grow: 1;*/
    position: relative;
}

.secondary-dashboard[nested-by="maskedcall"] iframe {
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: none;
}

#dialer-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.dialer-component-container {
    background-color: #fefefe;
    /*margin: 15% auto;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 20px 20px 23px;
    border: 1px solid #888;
    width: 300px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.dialer {
    display: inline-flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #333;
    width: 100%;
}

.dialer-localmedia-controls.settings {
    background-color: #FFF;
    padding: 5px 0;
}
.dialer-localmedia-controls.settings button {
    background-color: #999;
    color: #FFF;
    width: 100%;
    border: 0;
    border-radius: 5px;
}

.dialer-keypad {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    grid-column-gap: 7px;
    grid-row-gap: 7px;
    background-color: #FFF;
    padding: 10px 0;
}

/* Atomic show/hide of omnibox textboxes */
/* By default, omnibox will be name lookup. When class dialer-show-omnibox-numbers is added to dialer-omnibox, then atomically show the cleave.js number box */
.dialer #dialer-omnibox-container {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background-color: white;
    padding-right: 5px;
    border-style: solid;
    border-width: 2px;
    margin: 5px;
}

.dialer #dialer-omnibox-container .dialer-delete {
}

.dialer #dialer-omnibox #dialer-omnibox-number {
    display: none;
    border: none;
}

.dialer #dialer-omnibox #dialer-omnibox-number:focus {
    outline: 0 !important;
}

.dialer #dialer-omnibox #dialer-omnibox-name {
    display: block;
    border: none;
}

.dialer #dialer-omnibox #dialer-omnibox-name:focus {
    outline: 0 !important;
}

.dialer #dialer-omnibox.dialer-show-omnibox-numbers #dialer-omnibox-number {
    display: block;
}
.dialer #dialer-omnibox.dialer-show-omnibox-numbers #dialer-omnibox-name {
    display: none;
}

.dialer .dialer-footer {
    padding: 10px 0 5px 0;
    color: #FFF;
    font-size: 75%;
    padding-left: 10px;
}
.dialer .dialer-call-from {
    text-align: center;
    border-bottom: 1px solid #999;
    padding: 10px 0 5px 0;
    font-size: 75%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dialer .dialer-call-from .dialer-call-from-number {
    font-weight: bold;
    font-size: 1.1em;
}

.dialer .dialer-call-to {
    background-color: #FFF;
    text-align: center;
}

.dialer #dialer-omnibox {
    font-size: 1.3em;
    padding: 1px;
    /*background-color: #FFF;*/
    color: #333;
    flex-grow: 1;
}
.dialer #dialer-omnibox input {
    width: 100%;
    border-radius: 3px;
    padding: 5px;
}
.dialer #dialer-omnibox input::placeholder {
    color: #AAA;
    font-size: 60%;
}

button.media-control.dialer-settings:focus {
    outline: 0 !important;
}

.dialer #dialer-omnibox-number {
    text-align: center;
}

.dialer-action-row {
    float: right;
}

.dialer-button {
    height: 3.5em;
    width: 3.5em;
    font-weight: bolder;
    border-radius: 25px;
}

.dialer-button:focus {
    outline: 0 !important;
}

.dialer-action {
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

.dialer-extension {
   float:right;
    margin-left: auto;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 75%;
}

.dialer-number[keyval="0"] {
    grid-column: 2;
}

.dialer .dialer-action.dialer-call {
    grid-column: 2;
}

.dialer-action {
    background-size: 25px;
}

.dialer-action.dialer-call[dial-status="notready"] {
    background-image: url("/Images/phone-notready.png");
}

.dialer-action.dial-tones {
    background-image: url("/Images/dial-tones.png");
}

.dialer-action.dialer-call[dial-status="dial"] {
    background-image: url("/Images/phone-call.png");
}

.dialer-action.dialer-call[dial-status="hangup"] {
    background-image: url("/Images/phone-hangup.png");
}

.dialer-action.dialer-settings {
    background-image: url('/Images/settings-black.png') !important;
}


.dialer .dialer-delete {
    background-image: url("/Images/phone-delete.png");
    background-size: 75%;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    border: none;
    background-position: center;
}

.dialer-delete:focus {
    outline: 0 !important;
}

.dialer-close-button {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dialer-close-button:focus {
    outline: 0 !important;
}

.dialer-call-status {
    font-size: 1em;
    text-align: left;
}

.dialer-call-status-text {
    white-space: normal;
}

.dialer-call-status-desc {
}

.dialer-call-status-duration {
}

.dialer-call-status-addl {
    font-size: .75em;
    text-align: left;
}

#dialer-settings {
    position: relative;
}

#`-dropdown.dropdown-menu {
    width: 150px;
}

#dialer-dtmf-dropdown.dropdown-menu .col-sm-4 {
    width: 25px;
}

#dialer-dtmf-dropdown.dropdown-menu li a {
    margin: 0;
    padding: 0;
}

#dtmf-tones button.dialer-dtmf {
    /*height: 3em;*/
    /*width: 1.1em;*/
    font-size: .9em;
    padding: .5em;
    background-color: #eeeeee;
    border-color: #666666;
    color: #333333;
}

#dtmf-tones button.dialer-dtmf:hover {
    background-color: #cccccc;
}

#dtmf-tones button.dialer-dtmf:focus {
    outline: none !important;
}

#dialer-settings .dropdown-menu > li.settings-dropdown-header {
    margin-right: 15px;
}

#dialer-settings-dropdown li[selected=true]::before {
    content: url('/Images/light-green.png');
    position: fixed;
    padding: 3px;
}

#masked-calling-extension-modal {
    z-index: 10000000 !important;
}

/* Masked Calling Dialer */
/***********************************************/


/***********************************************/
/* Masked Calling Connect */

.masked-call-connect-panel {
    padding: 10px 5px 10px 5px;
}

.masked-call-connect-panel .info-panel {
    display: flex;
    flex-direction: row;
}

.masked-call-connect-panel .info-panel .info-col {
    margin-right: 5px;
    margin-left: 5px;
    white-space: nowrap;
}

.masked-call-connect-panel .info-panel .center {
    flex-grow: 1;
    overflow: hidden;
    text-align: right;
    align-self: center;
    min-width: 30px;
}

.masked-call-connect-panel .info-panel .right {
    text-align: right;
    align-self: center;
    white-space: normal;
}

/* Masked Calling Pricing */
.masked-call-plan-container {
    float: left;
    width: 345px;
    margin: 0 10px;
}
.masked-call-plan-container .section-panel-container {
    border: 1px solid #EEE;
    margin-top: 0;
}
.masked-call-plan-container-selected .section-panel-container {
    border: 1px solid green;
}
.masked-call-plan-container .section-panel-body {
    height: 320px;
}
.masked-call-plan-container .section-panel-title {
    background-color: #EEE;
    color: #666;
    border: 0;
}
.masked-call-plan-container-selected .section-panel-title {
    background-color: green;
    color: #FFF;
}
.masked-call-plan-selected {
    color: green;
    font-weight: bold;
    font-style: italic;
}

/* Masked Calling Connect */
/***********************************************/
.dragincollpasecontent {
    padding-bottom: 15px !important;
}

#maskedcallnumbers li {
    width: 180px;
    margin: 15px 0 0 0;
    padding: 0 10px 0 0;
    line-height: 15px;
    float: left;
}

#vsee-main-control button {
    background: #ffffff;
    border-radius: 5px;
    color: #000000;
    height: 30px;
    width: 70px;
    font-size: 11px;
}

#vsee-main-control button:hover {
    cursor: pointer;
}

/* User seek bars */
input.seek-bar{
    width: 260px;
    margin-left: 6px;
    margin-right: 6px;
}

/* Main seek bar */
input#seek-bar 
{
    width: 400px;
}

input.volume-bar{
    width: 60px;
    margin-left: 5px;
}

#vsee-main-control {
    background: #c0c0c0;
    color: #000000;    
    width: 424px;
    padding: 12px;
    font-size: 12px;
    border-radius: 3px;
}

/* In Chrome, hide download bar */
video::-webkit-media-controls-enclosure, 
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel,
audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}


/* End Recording Playback */
/***********************************************/



/** CSS SPINNER */
/* https://codepen.io/MattIn4D/pen/LiKFC?editors=1111 */
/* Absolute Center Spinner */
.css-spinner {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.css-spinner:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.05);
}

/* :not(:required) hides these rules from IE9 and below */
.css-spinner:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.css-spinner:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

.noscroll { 
    overflow: hidden;
}

:root {
    --video-panel-padding: 5px;
    --video-controlbar-height: 70px;    /* must be in px */
    --media-control-button-height-percentage: 0.61;
    --media-control-button-font-size: .9em;
}

.secondary-dashboard[nested-by="oneclick"] {
    position: relative;
}

.secondary-dashboard[nested-by="oneclick"] iframe {
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: none;
}

#oneclick-overlay {
    height: 100%;
    width: 100%;
    padding: 5px 0 0 0;
    margin: 0;
    z-index: 100; /* so dropdown menu can be seen when iframed */
    background: rgba(0,0,0,1.0);
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.disabledDiv {
    pointer-events: none !important;
    opacity: 0.4 !important;
}

#oneclick-reconnecting-notice {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: .7;
    background-color: #222222;
    padding: 5px;
    color: whitesmoke;
}

.meeting-elapsed-time {
    font-size: .75em;
    color: white;
    opacity: 75%;
    top: 106px;
    right:6px;
    position:fixed;
}

#participant-waiting-room {
    height: 100%;
}

#participant-waiting-room .waiting-room-title {
    font-size: 3em;
    color: whitesmoke;
    text-align: center;
}

#participant-waiting-room .waiting-room-desc {
    font-size: 2em;
    color: whitesmoke;
    text-align: center;
}

#participant-waiting-room .waiting-room-display {
    height: 100%;
    width: 100%;
    /*background-image: url('/Images/waiting-room.jpg');*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.participant-admission-request .participant-admit {
    margin: 2px;
    width: 5em;
    height: 2em;
    font-size: .75em
}

#waiting-room-requests {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    background-color: white;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    z-index: 20;
    box-shadow: 0px 0px 10px black;
}

.participant-admission-request {

}

.participant-admission-request .participant-desc {
    margin-left: 5px;
    margin-right: 5px;
}

#oneclick-overlay #participant-list {
    background-image: url('/Images/oneclick-persons.png');
    margin-left: 10px;
    background-color: black;
}

#oneclick-overlay #the-room {
    width: 100%;
    height: calc(100% - var(--video-controlbar-height));
    overflow: hidden;
}

#oneclick-overlay .remote-gallery {
    width: 100%;
    height: 100%;
}

#oneclick-overlay .remote-screen-share {
    width: 100%;
    height: calc(100% - var(--video-controlbar-height));
    overflow: hidden;
}

#oneclick-overlay .remote-screen-share .remote-video {
    width: 100%;
    height: 100%;
}

#oneclick-overlay .video-controlbar {
    width: 100%;
    height: var(--video-controlbar-height);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: black;
    padding: 3px;
    margin-bottom: 3px;
}

#oneclick-overlay .empty-room-view {
    /*position: absolute;*/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    /*top: 5%;*/
    /*bottom: 30%;*/
    left: 10%;
    right: 10%;
    height: 90%;
}

#oneclick-overlay .empty-room-view.reduced {
}

#oneclick-overlay .empty-room-view .room-text {
    color: whitesmoke;
    font-weight: lighter;
    font-size: 1.5em;
    align-self: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

#oneclick-overlay .empty-room-view.reduced .room-text {
    font-size: 1.0em;
}

#oneclick-overlay .empty-room-participant-view.reduced .room-text {
    font-size: 1.0em;
}

#oneclick-overlay .empty-room-view-with-image {
    /*position: absolute;*/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    /*top: 5%;*/
    /*bottom: 30%;*/
    left: 10%;
    right: 10%;
    height: 90%;
}

#oneclick-overlay .empty-room-view-with-image .empty-room-participant-waiting-image
{
    height: 80%;
    width: 80%;
    align-self: center;
    object-fit: contain;
}

#oneclick-overlay .empty-room-view-with-image .room-text {
    color: whitesmoke;
    font-weight: lighter;
    font-size: 1.5em;
    align-self: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

#oneclick-overlay .empty-room-view-with-image.reduced .room-text {
    font-size: 1.0em;
}

#oneclick-overlay .session-ended-message {
    text-align: center;
    color: whitesmoke;
    font-size: 1.5em;
}

#oneclick-overlay .remote-gallery .participant-container .participant-info-overlay {
    position: absolute;
    left: 6px;
    bottom: 6px;
    opacity: .7;
    background-color: #222222;
    height: 1.75em;
}

#oneclick-overlay .remote-gallery .participant-container .participant-info-overlay .participant-name {
    color: white;
    font-size: 1.0em;
    padding: 5px;
    vertical-align: sub;
    text-shadow: 0 0 4px #000000;
}

#oneclick-overlay .remote-gallery .participant-container .participant-info-overlay .participant-muted {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: text-top;
    margin: 0 0 0 5px;
    background-image: url('/Images/microphone-muted.png');
    background-size: 90%;
    background-repeat: no-repeat;
}

#oneclick-overlay .remote-gallery .participant-container {
    position: relative;
    padding: var(--video-panel-padding);
    display: inline-block;
    height: 100%;
    width: 100%;
    vertical-align: top;
}

#oneclick-overlay .remote-gallery {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 10px;
}

#oneclick-overlay .remote-gallery .participant-container {
    overflow: hidden;
}

@media screen and (max-width: 500px) {
    #oneclick-overlay .remote-gallery[participant-count="2"] .participant-container {
        width: 100%;
        height: 50%;
    }
}

#oneclick-overlay .remote-gallery .participant-container .remote-video {
    object-fit: contain;
    width: 100%;
    height: 100%;
    background-color: #10100c;
    border: 1px solid #333333;
}

#oneclick-overlay .remote-gallery .participant-container .muted-video-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: lighter;
    color: whitesmoke;
    font-size: 1.5em;
}

#oneclick-overlay .local-video-container {
    position: fixed;
    top: 2px;
    right: 2px;
    z-index: 10;
}

#oneclick-overlay .local-video {
    height: 100px;
    object-fit: contain;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#oneclick-overlay .local-video-container.reduced .local-video {
    height: 60px;
}

.oneclick-participant-controls {
    display: inline-flex;
    flex-direction: column;
    opacity: 1.0;
    margin-left: 3px;
    padding: 3px;
    position: absolute;
    top: 0;
    z-index: 11;
    width: 100%;
}

.oneclick-localmedia-controls {
    width: 100%;
    height: 100%;
    display: inline-flex;
    opacity: 1.0;
}

.oneclick-localmedia-controls.toggles {
    justify-content: center;
}

.oneclick-localmedia-controls.settings {
    justify-content: flex-start;
}

.oneclick-localmedia-controls.actions {
    justify-content: flex-end;
}

.media-control {
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    /*outline: none;*/
    width: calc(var(--video-controlbar-height)*var(--media-control-button-height-percentage));
    height: calc(var(--video-controlbar-height)*var(--media-control-button-height-percentage));
    border-width: 2.5px;
    background-size: 65%; /* image centers on certain multiples - acts like decimal truncation is occurring in centering calculation */
    text-align: center;
}

.oneclick-localmedia-controls .media-control {
    margin: 0 auto;
    display: block;
}

.oneclick-buttontext {
    color: whitesmoke;
    text-align: center;
    font-weight: lighter;
    font-size: var(--media-control-button-font-size);
    display: block;
    white-space: nowrap;
    overflow: hidden;
}


.oneclick-localmedia-controls .oneclick-buttontext {
    margin: 5px 0 0 0;
}

.oneclick-participant-controls .oneclick-buttontext {
    margin: 0 0 5px 0;
    text-align: left;
    text-shadow: 1px 1px 3px black;
}

.oneclick-button-with-text .dropdown-menu {
    background-color: black;
    color: white;
    border-color: white;
    top: unset;
    left: unset;
    box-shadow: 3px 3px 10px black;
}

.oneclick-button-with-text .dropdown-menu > li {
    margin-left: 15px;
}

#oneclick-participant-options.oneclick-button-with-text .dropdown-menu > li {
}

.oneclick-button-with-text .dropdown-menu > li > a {
    color: white;
}

.oneclick-button-with-text .dropdown-menu > li > a:hover {
    color: white;
    background-color: cornflowerblue;
}

.oneclick-button-with-text .dropdown-menu > li.connected-participant {
    margin-left: 5px;
    margin-right: 5px;
}

.connected-participant .connected-participant-name {
    margin-left: 5px;
}

.connected-participant .participant-action {
    color: black;
}

.media-control:focus {
    outline: none !important;
}

.oneclick-localmedia-controls .media-control.oneclick-muteaudio {
    background-image: url('/Images/microphone.png');
}

.oneclick-localmedia-controls .media-control.oneclick-screensharing {
    background-image: url('/Images/screenshare.png');
}

.oneclick-localmedia-controls .media-control.oneclick-screensharing.active {
    background-image: url('/Images/screenshare-active.png');
}

.oneclick-localmedia-controls .media-control.oneclick-mutevideo {
    background-image: url('/Images/camera.png');
}

.oneclick-localmedia-controls .media-control.oneclick-showdashboard {
    background-image: url('/Images/webpageinfo.png');
}

.oneclick-localmedia-controls .media-control.oneclick-showdashboard.active {
    background-image: url('/Images/webpageinfo-active.png');
}

.oneclick-localmedia-controls .media-control.oneclick-close {
    background-image: url('/Images/oneclick-close.png');
}

.oneclick-localmedia-controls .media-control.oneclick-muteaudio.muted {
    background-image: url('/Images/microphone-muted.png');
}

.oneclick-localmedia-controls .media-control.oneclick-mutevideo.muted {
    background-image: url('/Images/camera-muted.png');
}

.oneclick-localmedia-controls .media-control.oneclick-test.add-person {
    background-image: url('/Images/person-add.png');
}

.oneclick-localmedia-controls .media-control.oneclick-test.remove-person {
    background-image: url('/Images/person-remove.png');
}

.oneclick-localmedia-controls .media-control.oneclick-record {
    background-image: url('/Images/record.png');
}

.oneclick-localmedia-controls .media-control.oneclick-record.recording {
    background-image: url('/Images/stop_circle.png');
}

.oneclick-localmedia-controls .oneclick-button-with-text {
    margin: 0 5px 0 5px;
}

.oneclick-localmedia-controls .media-control.oneclick-settings {
    background-image: url('/Images/settings.png');
}

#oneclick-settings-dropdown li[selected=true]::before {
    content: url('/Images/light-green.png');
    position: fixed;
    padding: 3px;
}

.calendar-button {
    padding: 0px;
    padding-left: 0px;
    padding-right: 10px;
    background: linear-gradient(270deg, rgba(40, 141, 211, 1) 83%, white 10% 100%);
    height: 33px;
    width: 230px;
    border: 1px solid #A4A1AD;
}

.calendar-button-image {
    margin: 0px;
    height: 20px;
    width: 20px;
}

.calendar-button-image-google-link {
    margin-right: 15px;
}

.calendar-button-image-google-unlink {
    margin-right: 6px;
}

.calendar-button-image-microsoft-unlink {
    margin-right: -6px;
}

.calendar-button-text {
    padding-left: 20px;
    color: #FFF;
}

#preview-overrides-dialog .overrides-content {
    max-height: 300px;
    overflow-y: auto;
}

.token-overrides .template-name {
    font-weight: lighter;
    margin-bottom: 10px;
}

.token-overrides .token-row label {
    width: 500px;
    display: inline-block;
    text-align: start;
    overflow-wrap: break-word;
    vertical-align: text-bottom;
}

.token-overrides .token-row input {
    float: right;
}

.token-overrides .token-row .token-name {

}

.token-overrides .token-row .token-value {

}
/*HUB-342 Firefox Add/Edit Participant Modal shows required dot on second line*/
label[for="SystemUserFullName"] {
    white-space: nowrap;
}
/*This style is used to hide fields to implement honeypot recpatch technique as per
    https://dev.to/felipperegazio/how-to-create-a-simple-honeypot-to-protect-your-web-forms-from-spammers--25n8
*/
.testsimple_1234 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

/*HUB-966 Override Firefox's default style for <select> tags and disabled inputs*/
select.input-sm {
    background-color: #ffffff;
}
input.input-sm[disabled="disabled"] {
    background-color: #ededed;
}
/* Animation */
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}