/* Table of Contents:
    0. Web Fonts
	1. Baseline Styles
	2. Utility Styles
    4. Fonts Local
    5. Font Icons
	6. Button Styles
    7. Form Styles
    8. List Styles
    9. Table Styles
    10. Badges, Alerts & Errors
    11. Modal & JS Modal
    12. Hidden Styles
    13. Layout, Nav Bar
    14. Skinny List
    15. Details Pannel
    16. Desktop
    17. Custom Desktop
    18. Mobile Devices
    19. Hamburger Button
    20. Custom Styles
    21. Help Icons
    22. Schedule Calendar Style
*/

/*=============================================
=                   Web Fonts                 =
=              _webfonts.scss                 =
=============================================*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,400italic);
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');


/*=============================================
=           Baseline (Default) Styles         =
=               _baseline.scss                =
=============================================*/

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    position: relative;
    height: 100%;
    font-family: sans-serif;
    font-size: 62.5%;
}

body {
    position: relative;
    height: 100%;
    margin: 0;
    background: #999;
    color: #333333;
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.2;
    color: #5f5f5f;
    font-weight: 400;
}

h1 {
    font-size: 30px;
    font-size: 3rem;
}

h2 {
    font-size: 24px;
    font-size: 2.4rem;
}

h3 {
    font-size: 18px;
    font-size: 1.8rem;
}

h4 {
    font-size: 16px;
    font-size: 1.6rem;
}

h5 {
    font-size: 14px;
    font-size: 1.4rem;
}

h6 {
    font-size: 13px;
    font-size: 1.3rem;
}

a {
    color: #007CBE;
    background: transparent;
}

a:hover, a:focus, a:active {
    color: #003e5f;
    outline: none;
}

:focus {
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
}

.center {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #cccccc;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/* Media */

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden],
template {
    display: none;
}

/* defaults*/

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

fieldset {
    margin: 0 2px;
    border: 1px solid #c0c0c0;
    /*border: none;*/
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

legend {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding-bottom: .25em;
    color: #666666;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    border: none;
}

label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: block;
    margin-right: .25em;
    padding-bottom: .25em;
    color: #666666;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.check,
.radio {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 400;
}

.list-form label {
    padding-bottom: 0;
}

abbr {
    cursor: help;
}

small {
    font-size: 13px;
    font-size: 1.3rem;
}

sup {
    top: -0.25em;
    font-size: 100%;
}

var {
    font-style: normal;
}

.alpha {
    font-size: 30px;
    font-size: 3rem;
}

.beta {
    font-size: 24px;
    font-size: 2.4rem;
}

.gamma {
    font-size: 18px;
    font-size: 1.8rem;
}

.delta {
    font-size: 16px;
    font-size: 1.6rem;
}

.epsilon {
    font-size: 14px;
    font-size: 1.4rem;
}

.zeta {
    font-size: 13px;
    font-size: 1.3rem;
}

.milli {
    font-size: 13px;
    font-size: 1.3rem;
}

.micro {
    font-size: 11px;
    font-size: 1.1rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

:invalid {
    box-shadow: none;
}

.u-noMargin {
    margin: 0;
}

/* Required */

.req {
    color: #757575;
    font-style: italic;
    font-weight: 600;
}

    .req:before {
        content: '\0028';
    }

    .req:after {
        content: '\0029';
    }

.req {
    color: #757575;
    font-style: italic;
    font-weight: 600;
}

    .req:before {
        content: '\0028';
    }

    .req:after {
        content: '\0029';
    }

/*=====  End of baseline (Default)  ======*/

/*=============================================
=                UTILITY STYLES               =
=               _utility.scss                 =
=============================================*/

.clearfix {
    clear: both;
}

.push-left {
    float: left;
}

.push-right {
    float: right;
}

.padding-xtra {
    padding: 1rem
}

.margin-top-xtra {
    margin-top: 2rem;
}

.margin-right-xtra {
    margin-right: 1rem;
}

/*=====  End of Utility Styles  ======*/

/*=============================================
=                Fonts local                 =
=              _fonts-local.scss                 =
=============================================*/

/* Roboto */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: bold;
    src: url('/Portal/Styles/fonts/Roboto-Bold.eot');
    src: url('/Portal/Styles/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('/Portal/Styles/fonts/Roboto-Bold.woff2') format('woff2'), url('/Portal/Styles/fonts/Roboto-Bold.woff') format('woff'), url('/Portal/Styles/fonts/Roboto-Bold.ttf') format('truetype'), url('/Portal/Styles/fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/Portal/Styles/fonts/Roboto-Medium.eot');
    src: local('/Portal/Styles/fonts/Roboto Medium'), url('/Portal/Styles/fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('/Portal/Styles/fonts/Roboto-Medium.woff2') format('woff2'), url('/Portal/Styles/fonts/Roboto-Medium.woff') format('woff'), url('/Portal/Styles/fonts/Roboto-Medium.ttf') format('truetype'), url('/Portal/Styles/fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('/Portal/Styles/fonts/Roboto-Light.eot');
    src: local('/Portal/Styles/fonts/Roboto Light'), url('/Portal/Styles/fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('/Portal/Styles/fonts/Roboto-Light.woff2') format('woff2'), url('/Portal/Styles/fonts/Roboto-Light.woff') format('woff'), url('Roboto-Light.ttf') format('truetype'), url('/Portal/Styles/fonts/Roboto-Light.svg#Roboto-Light') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: bold;
    src: url('Roboto-BoldItalic.eot');
    src: local('/Portal/Styles/fonts/Roboto Bold Italic'), url('/Portal/Styles/fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/Portal/Styles/fonts/Roboto-BoldItalic.woff2') format('woff2'), url('Roboto-BoldItalic.woff') format('woff'), url('/Portal/Styles/fonts/Roboto-BoldItalic.ttf') format('truetype'), url('/Portal/Styles/fonts/Roboto-BoldItalic.svg#Roboto-BoldItalic') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('/Portal/Styles/fonts/Roboto-MediumItalic.eot');
    src: local('/Portal/Styles/fonts/Roboto Medium Italic'), url('/Portal/Styles/fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'), url('/Portal/Styles/fonts/Roboto-MediumItalic.woff2') format('woff2'), url('/Portal/Styles/fonts/Roboto-MediumItalic.woff') format('woff'), url('/Portal/Styles/fonts/Roboto-MediumItalic.ttf') format('truetype'), url('/Portal/Styles/fonts/Roboto-MediumItalic.svg#Roboto-MediumItalic') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: url('/Portal/Styles/fonts/Roboto-LightItalic.eot');
    src: local('/Portal/Styles/fonts/Roboto Light Italic'), local('Roboto-LightItalic'), url('/Portal/Styles/fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'), url('Roboto-LightItalic.woff2') format('woff2'), url('/Portal/Styles/fonts/Roboto-LightItalic.woff') format('woff'), url('/Portal/Styles/fonts/Roboto-LightItalic.ttf') format('truetype'), url('/Portal/Styles/fonts/Roboto-LightItalic.svg#Roboto-LightItalic') format('svg');
}

/* Source Sans Pro */

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: url("/Portal/Styles/fonts/SourceSansPro-Regular.eot");
    src: url("/Portal/Styles/fonts/SourceSansPro-Regular.eot?#iefix") format("embedded-opentype"), url("/Portal/Styles/fonts/SourceSansPro-Regular.woff") format("woff"), url("/Portal/Styles/fonts/SourceSansPro-Regular.ttf") format("truetype"), url("/Portal/Styles/fonts/SourceSansPro-Regular.svg#source_sans_proregular") format("svg");
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: url("/Portal/Styles/fonts/SourceSansPro-Italic.eot");
    src: url("/Portal/Styles/fonts/SourceSansPro-Italic.eot?#iefix") format("embedded-opentype"), url("/Portal/Styles/fonts/SourceSansPro-Italic.woff") format("woff"), url("/Portal/Styles/fonts/SourceSansPro-Italic.ttf") format("truetype"), url("/Portal/Styles/fonts/SourceSansPro-Italic.svg#source_sans_proitalic") format("svg");
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: url("/Portal/Styles/fonts/SourceSansPro-SemiBold.eot");
    src: url("/Portal/Styles/fonts/SourceSansPro-SemiBold.eot?#iefix") format("embedded-opentype"), url("/Portal/Styles/fonts/SourceSansPro-SemiBold.woff") format("woff"), url("/Portal/Styles/fonts/SourceSansPro-SemiBold.ttf") format("truetype"), url("/Portal/Styles/fonts/SourceSansPro-SemiBold.svg#source_sans_prosemibold") format("svg");
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 200;
    src: url("/Portal/Styles/fonts/SourceSansPro-Light.eot");
    src: url("/Portal/Styles/fonts/SourceSansPro-Light.eot?#iefix") format("embedded-opentype"), url("/Portal/Styles/fonts/SourceSansPro-Light.woff") format("woff"), url("/Portal/Styles/fonts/SourceSansPro-Light.ttf") format("truetype"), url("/Portal/Styles/fonts/SourceSansPro-Light.svg#source_sans_prolight") format("svg");
}

@font-face {
    font-family: 'atlas-icons';
    font-style: normal;
    font-weight: normal;
    src: url("/Portal/Styles/fonts/atlas-icons.eot?-tg31vv");
    src: url("/Portal/Styles/fonts/atlas-icons.eot?#iefix-tg31vv") format("embedded-opentype"), url("/Portal/Styles/fonts/atlas-icons.woff?-tg31vv") format("woff"), url("/Portal/Styles/fonts/atlas-icons.ttf?-tg31vv") format("truetype"), url("/Portal/Styles/fonts/atlas-icons.svg?-tg31vv#atlas-icons") format("svg");
}

/*=====  End of Fonts Local  ======*/

/*=============================================
=                Font Icons                   =
=              _font-icons.scss               =
=============================================*/

[class^="icon-"], [class*=" icon-"] {
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'atlas-icons';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}

.icon-phone:before {
    content: "\e600";
}

.icon-mobile:before {
    content: "\e601";
}

.icon-message:before {
    content: "\e602";
}

.icon-edit:before {
    content: "\e603";
}

.icon-attachment:before {
    content: "\e604";
}

.icon-inbox:before {
    content: "\e605";
}

.icon-reply:before {
    content: "\e606";
}

.icon-reply-all:before {
    content: "\e607";
}

.icon-forward:before {
    content: "\e608";
}

.icon-person:before {
    content: "\e609";
}

.icon-people:before {
    content: "\e60a";
}

.icon-person-add:before {
    content: "\e60b";
}

.icon-profile:before {
    content: "\e60c";
}

.icon-export:before {
    content: "\e60d";
}

.icon-location:before {
    content: "\e60e";
}

.icon-heart:before {
    content: "\e60f";
}

.icon-heart-empty:before {
    content: "\e610";
}

.icon-star:before {
    content: "\e611";
}

.icon-star-empty:before {
    content: "\e612";
}

.icon-comments:before {
    content: "\e613";
}

.icon-comment:before {
    content: "\e614";
}

.icon-quote-close:before {
    content: "\e615";
}

.icon-home:before {
    content: "\e616";
}

.icon-popup:before {
    content: "\e617";
}

.icon-search:before {
    content: "\e618";
}

.icon-map:before {
    content: "\e619";
}

.icon-print:before {
    content: "\e61a";
}

.icon-bell:before {
    content: "\e61b";
}

.icon-link:before {
    content: "\e61c";
}

.icon-flag:before {
    content: "\e61d";
}

.icon-settings:before {
    content: "\e61e";
}

.icon-utilities:before {
    content: "\e61f";
}

.icon-photo:before {
    content: "\e620";
}

.icon-book:before {
    content: "\e621";
}

.icon-document:before {
    content: "\e622";
}

.icon-eye:before {
    content: "\e623";
}

.icon-clock:before {
    content: "\e624";
}

.icon-microphone:before {
    content: "\e625";
}

.icon-calendar:before {
    content: "\e626";
}

.icon-lightning:before {
    content: "\e627";
}

.icon-hourglass:before {
    content: "\e628";
}

.icon-dashboard:before {
    content: "\e629";
}

.icon-key:before {
    content: "\e62a";
}

.icon-drive:before {
    content: "\e62b";
}

.icon-globe:before {
    content: "\e62c";
}

.icon-keyboard:before {
    content: "\e62d";
}

.icon-desktop:before {
    content: "\e62e";
}

.icon-light-bulb:before {
    content: "\e62f";
}

.icon-credit-card:before {
    content: "\e630";
}

.icon-database:before {
    content: "\e631";
}

.icon-clipboard:before {
    content: "\e632";
}

.icon-cart:before {
    content: "\e633";
}

.icon-box:before {
    content: "\e634";
}

.icon-line-graph:before {
    content: "\e635";
}

.icon-pie-chart:before {
    content: "\e636";
}

.icon-bar-graph:before {
    content: "\e637";
}

.icon-plot-graph:before {
    content: "\e638";
}

.icon-lock:before {
    content: "\e639";
}

.icon-lock-open:before {
    content: "\e63a";
}

.icon-logout:before {
    content: "\e63b";
}

.icon-login:before {
    content: "\e63c";
}

.icon-checkmark:before {
    content: "\e63d";
}

.icon-close:before {
    content: "\e63e";
}

.icon-remove:before {
    content: "\e63f";
}

.icon-add:before {
    content: "\e640";
}

.icon-blocked:before {
    content: "\e641";
}

.icon-info:before {
    content: "\e642";
}

.icon-question:before {
    content: "\e643";
}

.icon-refresh:before {
    content: "\e644";
}

.icon-rotate-right:before {
    content: "\e645";
}

.icon-rotate-left:before {
    content: "\e646";
}

.icon-history:before {
    content: "\e647";
}

.icon-switch:before {
    content: "\e648";
}

.icon-list:before {
    content: "\e649";
}

.icon-add-to-list:before {
    content: "\e64a";
}

.icon-grid:before {
    content: "\e64b";
}

.icon-menu:before {
    content: "\e64c";
}

.icon-images:before {
    content: "\e64d";
}

.icon-folder:before {
    content: "\e64e";
}

.icon-archive:before {
    content: "\e64f";
}

.icon-trash:before {
    content: "\e650";
}

.icon-upload:before {
    content: "\e651";
}

.icon-download:before {
    content: "\e652";
}

.icon-save:before {
    content: "\e653";
}

.icon-cloud:before {
    content: "\e654";
}

.icon-bookmark:before {
    content: "\e655";
}

.icon-bookmarks:before {
    content: "\e656";
}

.icon-notebook:before {
    content: "\e657";
}

.icon-play:before {
    content: "\e658";
}

.icon-pause:before {
    content: "\e659";
}

.icon-record:before {
    content: "\e65a";
}

.icon-stop:before {
    content: "\e65b";
}

.icon-next:before {
    content: "\e65c";
}

.icon-previous:before {
    content: "\e65d";
}

.icon-start:before {
    content: "\e65e";
}

.icon-end:before {
    content: "\e65f";
}

.icon-expand:before {
    content: "\e660";
}

.icon-contract:before {
    content: "\e661";
}

.icon-sound-on:before {
    content: "\e662";
}

.icon-sound-off:before {
    content: "\e663";
}

.icon-triangle-left:before {
    content: "\e664";
}

.icon-triangle-down:before {
    content: "\e665";
}

.icon-triangle-up:before {
    content: "\e666";
}

.icon-triangle-right:before {
    content: "\e667";
}

.icon-caret-left:before {
    content: "\e668";
}

.icon-caret-down:before {
    content: "\e669";
}

.icon-caret-up:before {
    content: "\e66a";
}

.icon-caret-right:before {
    content: "\e66b";
}

.icon-arrow-left:before {
    content: "\e66c";
}

.icon-arrow-down:before {
    content: "\e66d";
}

.icon-arrow-up:before {
    content: "\e66e";
}

.icon-arrow-right:before {
    content: "\e66f";
}

.icon-sort:before {
    content: "\e670";
}

.icon-quote-open:before {
    content: "\e671";
}

.icon-code:before {
    content: "\e672";
}

.icon-warning:before {
    content: "\e673";
}

.icon-filter:before {
    content: "\e674";
}

/*=====  End of Fonts Icons  ======*/

/*=============================================
=               Button Styles                 =
=            _button-styles.scss              =
=============================================*/

button,
.button,
input[type="button"],
input[type="submit"] {
    background-color: #326AF5;
}
#decline-disclaimer {
    width: 106px;
    height: 34px;
    background-color: rgba(255, 255, 255, 1);
    border-width: 2px;
    border-color: rgba(0, 124, 190, 1);
    font-weight: 500;
    font-size: 14px;
    color: #007CBE;
    font-family: "Roboto-Medium", "Roboto Medium", "Roboto", sans-serif;
    margin-right:8px;
}
#decline-disclaimer:hover {
    background-color: rgba(230, 240, 249);
}
#accept-disclaimer {
    width: 106px;
    height: 34px;
    background-color: rgba(0, 124, 190, 1);
    border-width: 2px;
    border-color: rgba(0, 124, 190, 1);
    font-weight: 500;
    font-size: 14px;
    font-family: "Roboto-Medium", "Roboto Medium", "Roboto", sans-serif;
    color: white;
}
#accept-disclaimer:hover:enabled {
    background-color: rgba(230, 240, 249);
    color: #007CBE;
}
#accept-disclaimer[disabled] {
    background-color: rgba(196, 196, 196);
    border: none;
    color: rgba(51, 51, 51);
    cursor: not-allowed;
}

/* Custom Checkbox in Disclaimer.cshtml - start*/
/* The container */
.Disclaimer_checkbox_container {
    position: relative;
    cursor: pointer;
    width: 91.63px;
}
/* Hide the browser's default checkbox */
.Disclaimer_checkbox_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Create a custom checkbox */
.Disclaimer_checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 16px;
    width: 16px;
    outline: 2px solid #007cbe;
    background-color: #ffffff;
}
/* When the checkbox is checked, add a blue background */
.Disclaimer_checkbox_container input:checked ~ .Disclaimer_checkmark {
    background-color: #FFFFFF;
}
/* Create the checkmark/indicator (hidden when not checked) */
.Disclaimer_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.Disclaimer_checkbox_container input:checked ~ .Disclaimer_checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.Disclaimer_checkbox_container .Disclaimer_checkmark:after {
    left: 0.4rem;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid #007cbe;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Custom Checkbox in Disclaimer.cshtml - end*/

.disclaimer_accept_text {
    margin-left: 27px;
    padding-top: 5px;
    font-family: "Roboto-Medium", "Roboto Medium", "Roboto", sans-serif;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
}
.p_text_AcceptCapitalize {
    font-weight: 500;
}

.div_disclaimer_block {
    background-color: rgba(230, 242, 248, 1);
    border-radius: 5px;
    width: 891px;
    height: 218px;
    padding-left: 16px;
    padding-top: 1px;
    font-family: "Roboto-Regular", "Roboto", sans-serif;
}
.disclaimer_a_privacyPolicy {
    text-decoration: none;
}
.disclaimer_a_termsOfService {
    text-decoration: none;
}
.at-disclaimer-header {
    width: 207px;
    height: 21px;
    font-family: "Roboto-Regular", "Roboto", sans-serif;
    font-size: 20px;
    line-height: 21px;
}
.at-disclaimer-content {
    font-family: "Roboto-Regular", "Roboto", sans-serif;
    font-size: 14px;
    line-height: 16px;
}
button,
.button-alt,
.button-subtle,
.button-unstyled,
button[disabled],
.button-disabled,
input.button-alt,
input.button-subtle,
input.button-unstyled,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 5px;
    display: inline-block;
    width: auto;
    min-width: auto;
    height: 35px;
    margin: .25em 0;
    padding: .1em 1em 0;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    background-clip: padding-box;
    color: white;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    vertical-align: middle;
}

.button-alt.upload-attachment-button {
    overflow: visible;
}

.button-disabled.upload-attachment-button {
    background-color: #ccc;
    color: #fff;
    text-shadow: none;
    cursor: not-allowed;
}

.button-disabled.upload-attachment-button:hover {
    background-color: #ccc;
    color: #fff;
}

button:hover,
button:focus,
button:active,
.button:link:active,
.button:link:hover,
.button:link:focus,
.button:visited:hover,
.button:visited:focus
input[type="button"]:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:active
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: #78abf9;
    background-color: rgba(63, 136, 247, .7)
}

.button-disabled,
.button.button-disabled
.button-disabled.button,
button[disabled],
input[disabled],
input[type="button"][disabled],
input.button-disabled {
    background-color: #ccc;
    color: #fff;
    text-shadow: none;
    cursor: not-allowed;
}

.button-alt,
input.button-alt,
.button-alt:link,
.button-alt:visited,
input.button-alt:active {
    background-color: #6891f8;
}

.button-alt:hover,
.button-alt:focus,
.button-alt:active,
input.button-alt:hover,
input.button-alt:focus {
    background-color: #78abf9;
    background-color: rgba(63, 136, 247, .7)
}

.button-subtle,
input.button-subtle,
.button-subtle:link {
    border: 1px solid #c6c6c6;
    background-color: transparent;
    color: #666666;
}

.button-subtle:hover,
.button-subtle:focus,
.button-subtle:visited,
.button-subtle:active,
input.button-subtle:active,
input.button-subtle:hover,
input.button-subtle:focus {
    border: 1px solid #CCC;
    background-color: #e7e7e7;
    color: #666666;
}

.button-nostyle {
    padding: 0;
    border: none;
    background-color: transparent;
    color: #666666;
    text-shadow: none;
}

.button-unstyled,
input.button-unstyled {
    display: inline;
    border: 1px solid #ccc;
    background-color: transparent;
    color: #666666;
    /*width: auto !important;
    padding: 0 !important;*/
}

input.button-unstyled:hover,
input.button-unstyled:focus,
.button-unstyled:hover,
.button-unstyled:focus,
.button-unstyled:link,
.button-unstyled:visited,
.button-unstyled:active {
    background-color: #e7e7e7;
    color: #666666;
}

.button-lg,
input.button-lg,
.button-lg:link,
.button-lg:visited,
.button-lg:hover,
.button-lg:focus,
.button-lg:active {
    height: 50px;
    padding: 0 2em;
}

.button-lg:link,
.button-lg:visited,
.button-lg:hover,
.button-lg:focus,
.button-lg:active {
    padding-top: .7em;
}

.button-sm,
input.button-sm,
.button-sm:link,
.button-sm:visited,
.button-sm:hover,
.button-sm:focus,
.button-sm:active {
    height: 30px;
    padding: 0 1em;
    font-size: 14px;
    font-size: 1.4rem;
}

.hide-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

.hide-button-text:focus, .hide-button-text:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

.d-inline-block {
    display: inline-block;
}

/*=====  End of Button Style  ======*/

/*=============================================
=   Form Styles - Input, Select, Placeholder  =
=              _form-styles.scss              =
=============================================*/

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input,
select,
textarea {
    margin-bottom: 1em;
    border: 1px solid #999999;
    border-radius: 0.25em;
}

input[disabled],
select[disabled],
textarea[disabled] {
    background-color: #eeeeee;
    cursor: not-allowed;
}

input,
select {
    display: inline-block;
    margin: 0 .25em .25em 0;
    padding: .5em .5em .25em;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.2;
    vertical-align: middle;
}

input:focus,
select:focus,
textarea:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(30, 71, 102, 0.075), 0 0 8px rgba(30, 71, 102, 0.5);
    -moz-box-shadow: inset 0 1px 1px rgba(30, 71, 102, 0.075), 0 0 8px rgba(30, 71, 102, 0.5);
    box-shadow: inset 0 1px 1px rgba(30, 71, 102, 0.075), 0 0 8px rgba(30, 71, 102, 0.5);
    border-color: #6891f8;
    outline: none;
}

input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=number],
input[type=color],
input[type=date] {
    min-height: 2.5em;
}

input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=number],
input[type=color],
input[type=date] {
    width: 100%;
    margin: 0 .25em .25em 0;
    padding: .5em .5em .25em;
}

input[type=color] {
    width: 4em;
    height: 2em;
    padding: 0 .25em;
    cursor: pointer;
}

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Select */

select {
    min-width: 15em;
    padding: .5em;
}

select:hover {
    cursor: pointer;
}

select[disabled], select[multiple] {
    background-image: none;
}

select[disabled] {
    background-color: #eeeeee;
    cursor: not-allowed;
}

optgroup {
    font-weight: 600;
}

textarea {
    max-width: 98%;
    margin: 0;
    padding: .5em 1%;
    overflow: auto;
    font-size: 16px;
    font-size: 1.6rem;
}

textarea[disabled] {
    background-color: #eeeeee;
    cursor: not-allowed;
}

.field-help {
    color: #999999;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 600;
}

li > .field-help {
    margin-bottom: .75em;
}

/* Placeholder */

::-webkit-input-placeholder {
    font-size: 15px;
    font-size: 1.5rem;
    font-style: italic;
}

:-moz-placeholder {
    font-size: 15px;
    font-size: 1.5rem;
    font-style: italic;
}

::-moz-placeholder {
    font-size: 15px;
    font-size: 1.5rem;
    font-style: italic;
}

:-ms-input-placeholder {
    font-size: 15px;
    font-size: 1.5rem;
    font-style: italic;
}

/*=====  End of Forms Select Styles  ======*/

/*=============================================
=                  List Styles                =
=              _list-styles.scss              =
=============================================*/

ul,
ol {
    line-height: 1.7;
}

ul {
    list-style: square;
}

.list-no-bullets {
    width: 100%;
    margin-left: 0;
    padding: 0;
    float: left;
    list-style: none;
}

.list-form {
    width: 100%;
    margin: 0;
    padding-left: 0;
    float: left;
    list-style: none;
}

    .list-form li {
        margin-bottom: 0.5em;
    }

.list-form-horizontal li {
    display: inline-block;
    margin-right: .75em;
}

.list-form-horizontal li:last-of-type {
    margin-right: 0;
}

dt {
    font-weight: 600;
}

dd {
    margin-bottom: .5em;
    margin-left: 0;
}

dd:last-of-type {
    margin-bottom: 0;
}

/*=====  End of List Styles ======*/

/*=============================================
=                Table Styles                 =
=             _table-styles.scss              =
=============================================*/

.table, .table-striped {
    width: 100%;
    margin-bottom: 1.5em;
    border-collapse: collapse;
    border-spacing: 0;
}

.table caption, .table-striped caption {
    color: #666666;
    font-size: 14px;
    font-size: 1.4rem;
    text-align: left;
}

.table th, .table-striped th,
.table td,
.table-striped td {
    padding: .5em 1em;
    border-bottom: 1px dotted #cccccc;
    text-align: left;
    vertical-align: top;
}

.table td[data-type=currency], .table-striped td[data-type=currency] {
    text-align: right;
}

.table th, .table-striped th {
    font-weight: 600;
}

.table th[scope=col], .table-striped th[scope=col] {
    background-color: #eeeeee;
}

.table th[scope=row], .table-striped th[scope=row] {
    font-weight: 400;
}

.table thead th, .table-striped thead th {
    border-bottom: 1px solid #cccccc;
    vertical-align: bottom;
}

.table tfoot th, .table-striped tfoot th {
    border-bottom: none;
}

.table tbody, .table-striped tbody {
    font-size: 14px;
    font-size: 1.4rem;
}

.table tbody tr:last-of-type th, .table-striped tbody tr:last-of-type th,
.table tbody tr:last-of-type td,
.table-striped tbody tr:last-of-type td {
    border-bottom-style: solid;
}

.table-striped tbody tr:nth-of-type(even) th,
.table-striped tbody tr:nth-of-type(even) td {
    background-color: #f6f6f6;
    background-color: rgba(238, 238, 238, 0.5);
}

/* Table Responsive */

.table-responsive {
    width: 100%;
    margin-bottom: 1.5em;
}

.table-responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

@media (min-width: 48em) {
    .table-responsive thead {
        position: relative;
        width: auto;
        height: auto;
        overflow: auto;
        clip: auto;
    }
}

.table-responsive tbody,
.table-responsive tr,
.table-responsive th,
.table-responsive td {
    display: block;
    padding: 0;
    text-align: left;
    white-space: normal;
}

@media (min-width: 48em) {
    .table-responsive tr {
        display: table-row;
    }
}

.table-responsive th,
.table-responsive td {
    padding: .5em;
    border-bottom: 1px dotted #cccccc;
    vertical-align: middle;
}

@media (min-width: 48em) {
    .table-responsive th,
    .table-responsive td {
        display: table-cell;
    }
}

.table-responsive th {
    font-weight: 600;
}

.table-responsive th:first-of-type {
    text-align: left;
}

.table-responsive tbody {
    font-size: 14px;
    font-size: 1.4rem;
}

@media (min-width: 48em) {
    .table-responsive tbody {
        display: table-row-group;
    }
}

.table-responsive tbody tr {
    margin-bottom: 1em;
}

.table-responsive tbody td {
    text-align: right;
}

@media (min-width: 48em) {
    .table-responsive tbody td {
        text-align: left;
    }
}

.table-responsive tbody th[scope=row] {
    border-bottom: 1px solid #cccccc;
    background-color: #eeeeee;
}

@media (min-width: 48em) {
    .table-responsive tbody th[scope=row] {
        border-bottom: 1px dotted #cccccc;
        background-color: transparent;
        font-weight: 400;
        text-align: left;
    }
}

.table-responsive tbody td[data-type=currency] {
    text-align: right;
}

.table-responsive tbody td[data-title]:before {
    float: left;
    color: #333;
    font-size: 13px;
    font-size: 1.3rem;
    content: attr(data-title);
}

@media (min-width: 48em) {
    .table-responsive tbody td[data-title]:before {
        content: none;
    }
}

/*=====  End of Table Styles  ======*/

/*=============================================
=             BADGES ALERTS ERRORS            =
=             _badges-alerts.scss             =
=============================================*/

.badge {
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
}

.badge, .badge-alt, .badge-subtle, .badge-important {
    display: inline-block;
    margin: 0 .25em;
    padding: .3em .7em;
    border-radius: 50%;
    background-color: #0099ee;
    color: white;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: baseline;
}

.badge-alt {
    background-color: #2e6b99;
}

.badge-subtle {
    background-color: #cccccc;
    color: #333333;
}

.badge-important {
    background-color: #a60036;
    color: white;
}

/*=====     Alerts    ======*/

.alert, .alert-success, .alert-warning, .alert-error, .alert-info {
    -webkit-border-radius: 5px;
    margin: 20px 0 10px 0;
    padding: 1em 1.5em;
    overflow: hidden;
    border-radius: 5px;
    background-clip: padding-box;
    background-color: #cccccc;
    color: #666666;
}

h4.alert, h4.alert-success, h4.alert-warning, h4.alert-error, h4.alert-info {
    margin: 0 0 .1em;
    font-size: 18px;
    font-size: 1.8rem;
}

.alert p, .alert-success p, .alert-warning p, .alert-error p, .alert-info p {
    margin: 0;
}

.alert-success {
    background-color: #afdda6;
}

.alert-warning {
    background-color: #f6d8a4;
}

.alert-error {
    background-color: #ffa6c3;
}

.alert-error-intergy {
    height: 82px;
    background-color: #f7e7e6;
    font-family: "Roboto Medium", "Roboto", sans-serif;
    font-weight: 500;
    line-height: 18px;
    padding-left: 30px;
}

.alert-info {
    background-color: #d4e5f2;
}

/*=====  Errors  ======*/

.error-logo {
    -webkit-transform: translate(-50%, -50%);
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 50%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
}

.error-text {
    display: inline-block;
    position: absolute;
    top: 38%;
    left: 25%;
    width: 50%;
    margin: 0 auto;
    margin-top: 10rem;
    font-weight: 600;
    text-align: center;
}

/*=====  End of Badges, Alerts & Error  ======*/

/*=============================================
=               Modal Styles                  =
=            _modal-styles.scss               =
=============================================*/

html {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-content-padding {
    padding: 1em 1.5em
}

.modal {
    -webkit-overflow-scrolling: touch;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    outline: 0;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.is-open {
    display: block;
}

.modal-dialog {
    position: relative;
    width: 98%;
    margin: 1%;
    margin-top: 5rem;
    color: #333;
    pointer-events: all;
}

@media (min-width: 45em) {
    .modal-dialog {
        width: 40em;
        margin: 5em auto;
        pointer-events: all;
    }
}

.modal-content {
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    position: relative;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    outline: 0;
    background-clip: padding-box;
    background-color: #fff;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.modal-header {
    min-height: 45px;
    padding: 1em;
    border-bottom: 1px solid #E1E1E1;
}

.modal-header .close {
    height: auto;
    margin: 0;
    float: right;
    color: #333333;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1rem;
    padding: 0 !important;
}

.modal-title {
    margin: 0;
    font-size:1.6rem;
    line-height: 1.7;
}

/*css for visit details page wcag level A violation*/
.success-error-messageHeader {
    line-height: 1.2;
    font-size: 1.6rem;
}

.error-messageHeader-intergy {
    height: 19px;
    line-height: 10px;
    font-size: 1.6rem;
}

.at_date_range_popup_title {
    font-size: 1.6rem;
}
.modal-body {
    position: relative;
    padding: 1.5em 1em .5em;
}

.modal-footer {
    margin-top: 1em;
    padding: .5em;
    border-top: 1px solid #dedede;
    text-align: center;
}

@media (max-width: 560px) {
    .modal-footer {
        text-align: center;
    }
}

.modal-lg {
    background-color: #d5d5d5;
    background-color: rgba(150, 150, 150, 0.4);
}

@media (min-width: 65em) {
    .modal-lg .modal-dialog {
        width: 60em;
    }
}

@media (min-width: 45em) {
    .modal-sm .modal-dialog {
        width: 22em;
    }
}

.js-modal-close {
    display: none;
}

.js-modal-open {
    display: block;
    clear: both;
}

.js-popup-open {
    display: block;
    padding-top: 90px;
    padding-right: 5px;
    padding-left: 5px;
    z-index: 1000;
    pointer-events:auto;
}

@media (max-width: 390px) {
    .js-popup-open {
        padding-top: 125px;
    }
}

/*=====  End of Modal & JS Modal Styles ======*/

/*=============================================
=                 Hidden Styles               =
=             _hidden-styles.scss             =
=============================================*/

.hidden {
    display: none;
    visibility: hidden;
}

.ssn-hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

.invisible {
    visibility: hidden;
}


.ir {
    overflow: hidden;
    border: 0;
    background-color: transparent;
    *text-indent: -9999px;
}

.ir:before {
    display: block;
    width: 0;
    height: 150%;
    content: "";
}

.cf:before,
.cf:after {
    display: table;
    content: " ";
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

    /*=====  End of Hidden Styles  ======*/

/*=============================================
=               LAYOUT NAVBAR                =
=               _layout.scss                 =
=============================================*/

.layout-bgbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 360px;
}

.layout-wrapper {
    position: relative;
    top: 0;
    bottom: 50px;
    width: auto;
    height: 100%;
    margin: 0 auto;
    background: #FFF;
}

.layout-content-contain {
    max-width: 1020px;
    margin: 0;
    padding: 0;
}

.api-token-error-header, .warning-header {
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.2;
    color: #5f5f5f;
    font-weight: 400;
}

.panel {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
}

.no-items {
    overflow-y: hidden !important;
}

.has-banner .layout-topbar-logo {
    top: -0.6em;
}

.layout-navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.layout-navbar li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.layout-navbar-subsection-list {
    display: block;
}

.layout-skinny {
    background: #FDFDFD;
}

.layout-details {
    background: #FFF;
}

.layout-footer {
    overflow: hidden;
}

/* Section Navigation */

.navicon {
    position: relative;
    background-position: center 1.0rem;
    background-repeat: no-repeat;
    background-size: 3.0rem 3.0rem;
    color: #FFF;
    cursor: pointer;
    z-index: 10;
}

.navicon:hover,
.navicon:focus {
    background-color: #b2b2b2;
    background-color: rgba(0, 0, 0, 0.3);
}

.appointments-active .navbar-appointments,
.connections-active .navitem-connections,
.communicationlog-active .navbar-communicationlog,
.content-active .navbar-content,
.financials-active .navbar-financials,
.health-active .navbar-health,
.myapps-active .navbar-myapps,
.home-active .navbar-home,
.messages-active .navbar-messages,
.practice-active .navbar-practice,
.provider-active .navbar-provider,
.settings-active .navbar-settings,
.user-active .navbar-user,
.setup-active .navbar-setup,
.myprofile-active .navbar-myprofile {
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #b2b2b2;
    background-color: rgba(0, 0, 0, 0.3);
}

    .health-active .navbar-health:focus {
        background-color: rgba(160, 156, 156, 0.3);
    }

.expand-navbar-section.layout-navbar-section {
    background-color: #d8d8d8;
    background-color: rgba(0, 0, 0, 0.15);
}

/* Navbar */

/* These classes correspond to DB */
.navbar-appointments {
    background-image: url(../../img/icons/calendar.svg);
}

.navbar-communicationlog {
    background-image: url(../../img/icons/communicationlog.svg);
}

.navbar-content {
    background-image: url(../../img/icons/content.svg);
}

.navbar-financials {
    background-image: url(../../img/icons/financial.svg);
}

.navbar-health {
    background-image: url(../../img/icons/health.svg);
}

.navbar-home {
    background-image: url(../../img/icons/home.svg);
}

.navbar-messages {
    /* Ensure badge isn't covered */
    background-image: url(../../img/icons/messages.svg);
    z-index: 11;
}

.navbar-practice {
    background-image: url(../../img/icons/practice.svg);
}

.navbar-provider {
    background-image: url(../../img/icons/provider.svg);
}

.navbar-user,
.navbar-myprofile {
    background-image: url(../../img/icons/user.svg);
}

.navbar-setup {
    background-image: url(../../img/icons/settings.svg);
}

.navbar-myapps {
    background-image: url(../../img/icons/myapps.svg);
}

/* Subsection Navigation */
.layout-navbar-section {
    display: none;
}

.layout-navbar .layout-navbar-section-list > li {
    border: none;
}

.home-active .navbar-home.layout-navbar-section,
.health-active .navbar-health.layout-navbar-section,
.messages-active .navbar-messages.layout-navbar-section,
.appointments-active .navbar-appointments.layout-navbar-section,
.connections-active .navitem-connections.layout-navbar-section,
.content-active .navbar-content.layout-navbar-section,
.setup-active .navbar-setup.layout-navbar-section,
.myprofile-active .navbar-myprofile.layout-navbar-section,
.myapps-active .navbar-myapps.layout-navbar-section,
.financials-active .navbar-financials.layout-navbar-section,
.expand-navbar-section {
    display: block;
}

/*=====  End of Layout Styles  ======*/

/*=============================================
=                SKINNY LIST                 =
=                _skinny.scss                =
=============================================*/

#skinny-options ul {
    margin: 0;
    padding: 0;
}

#skinny ul {
    margin: 0;
    padding: 0;
}

#skinny li {
    margin-top: 0;
    margin-bottom: 0;
}

.skinny-header {
    padding: 0.5rem 1.0rem;
}

.skinny-header-title {
    font-size: 1.8rem;
    line-height: 3.0rem;
}

.skinny-list {
    border-top: 1px solid #DDD;
    list-style: none;
}

.skinny-item {
    display: block;
    margin-left: 1.0rem;
    padding: 1.0rem 1.0rem 1.0rem 0.0rem;
    border-bottom: 1px solid #ccD;
    line-height: 1.4rem;
    cursor: pointer;
}

.skinny-item:hover,
.skinny-item:focus {
    margin-left: 0.0rem;
    padding-left: 1.0rem;
    background: #1d1d1d;
    color: #fff;
}

.skinny-item:hover .skinny-item-4 {
    color: #fff;
}

.skinny-item table {
    width: 100%;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: baseline;
}

.skinny-item-1 {
    font-size: 1.6rem;
}

.skinny-item-2 {
    text-align: right;
    white-space: nowrap;
}

.skinny-item-3 {
    font-style: italic;
}

.skinny-item-4 {
    color: #666;
    font-style: italic;
    text-align: right;
}

.skinny-item-5 {
    font-size: 1.4rem;
}

.skinny-item-6 {
    text-align: right;
}

.skinny-item-readonly {
    color: red;
    font-style: italic;
    text-align: right
}

/*=====  End of Skinny Styles ======*/

/*=============================================
=                DETAILS PANEL                =
=               _details.scss                 =
=============================================*/

#loader {
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    background-image: url(../../img/loader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    -moz-transition: opacity 0.4s 0, top 0 0.4s;
    -webkit-transition: opacity 0.4s 0, top 0 0.4s;
    -o-transition: opacity 0.4s 0, top 0 0.4s;
    opacity: 0.0;
    transition: opacity 0.4s 0, top 0 0.4s;
}

.loading #loader {
    top: 0;
    opacity: 1.0;
    transition: opacity 0 0, top 0 0;
    -moz-transition: opacity 0 0, top 0 0;
    -webkit-transition: opacity 0 0, top 0 0;
    -o-transition: opacity 0 0, top 0 0;
}

.contactbox {
    margin-top: 3.0rem;
    margin-right: -3.0rem;
    margin-left: -3.0rem;
    padding: 1.5rem 3.0rem 2.0rem 3.0rem;
    background: #DDD;
}

.contactbox-textborder {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin: 2.0rem 0 0 0;
    padding: 1.0rem;
    border: 1px solid #999;
    border-radius: 5px;
    background: #FFF;
}

.contactbox textarea {
    width: 100%;
    max-width: 100%;
    height: 10.0rem;
    border: none;
    outline: none;
}

.details-content-actions {
    margin: 0;
    padding: 0;
    float: right;
    border-right: 1px solid #DDD;
}

.details-content-actions li {
    display: block;
    margin: 0;
    padding: 0 1.5rem;
    float: left;
    border-left: 1px solid #DDD;
    color: #666;
    line-height: 3.0rem;
    list-style: none;
    cursor: pointer;
}

.details-content-actions li:hover {
    background: #DDD;
    color: #333;
}

/*=====  End of Details Pannel  ======*/

/*=============================================
=               Desktop Styles                =
=             _desktop-layout.scss             =
=============================================*/

    /*============ DESKTOP ============*\
 ___________________________________
| .-------------------------------. |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| '-------------------------------' |
\_________________o_________________/
             |||||||||||
			  ///        \
			 //           \
			 '============'
        __        __   __          
    ___/ /__ ___ / /__/ /____  ___ 
   / _  / -_|_-</  '_/ __/ _ \/ _ \
   \_,_/\__/___/_/\_\__/\___/ .__/
                            /_/    */

@media all and (min-width: 1001px) {

    /* Z-Indices */
    .layout-topbar {
        z-index: 300;
    }

    .layout-navbar {
        z-index: 300;
    }

    .layout-profile {
        z-index: 400;
    }

    .layout-skinny {
        z-index: 200;
    }

    .layout-footer {
        z-index: 300;
    }

    .layout-topbar, .layout-footer {
        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }

    .layout-wrapper {
        -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.75);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.75);
    }

    /* Hide some items in desktop view */

    .hamburger-button,
    .layout-nav-logo,
    .layout-navbar-logo {
        display: none;
    }

    /* Navigation */

    .layout-topbar .navicon {
        min-width: 7.0rem;
        background-position: center 1.0rem;
        text-align: center;
    }

    .layout-navbar .navicon {
        background: none;
    }

    /* Patient Info */
    .layout-topbar-profile {
        position: absolute;
        top: 0.5rem;
        right: 2.0rem;
        height: 5.0rem;
        cursor: pointer;
    }

    .layout-topbar-profile-pic {
        width: 4.8rem;
        height: 4.8rem;
        margin-right: 1.0rem;
        float: left;
        border: 1px solid #FFF;
    }

        .layout-topbar-profile-pic img {
            width: 4.8rem;
            height: 4.8rem;
        }

    .layout-topbar-profile-info {
        padding-top: 0.5rem;
        float: left;
        color: #FFF;
    }

        .layout-topbar-profile-info a {
            color: #FFF;
            text-decoration: none;
        }

    .layout-topbar-profile a:hover,
    .layout-topbar-profile a:focus {
        text-decoration: underline;
    }

    .layout-topbar-profile-info-name {
        font-size: 1.8rem;
        line-height: 1.8rem;
    }

    .layout-topbar-profile-info-profile {
        font-size: 1.4rem;
        line-height: 4.0rem;
    }

    .layout-topbar-profile-info-profile:focus {
        outline: auto;
    }

        .layout-topbar-profile-info-profile .icon-triangle-up-down {
            font-size: 150%;
            vertical-align: middle;
        }

            .layout-topbar-profile-info-profile .icon-triangle-up-down:before {
                content: "\e665";
            }

    .popup-profile .layout-topbar-profile-info-profile .icon-triangle-up-down:before {
        content: "\e666";
    }

    /* Popup Profile */
    .layout-profile {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
        display: none;
        position: absolute;
        top: 9.5rem;
        right: 1.0rem;
        width: 21.0rem;
        min-height: 20.0rem;
        padding: 0.5rem 0 1.0rem 1.0rem;
        border: 1px solid #666;
        border-radius: 3px;
        background: #FFF;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    }

    .popup-profile .layout-profile {
        display: block;
        min-height: 5rem;
    }

    .layout-profile:after, .layout-profile:before {
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 0;
        height: 0;
        border: solid transparent;
        content: " ";
        pointer-events: none;
    }

    .layout-profile:after {
        margin-left: 0;
        border-width: 10px;
        border-color: #fff;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #fff;
    }

    .layout-profile:before {
        margin-left: 0;
        border-width: 11px;
        border-color: #666;
        border-color: rgba(102, 102, 6, 0);
        border-bottom-color: #666;
    }

    .layout-profile-loggedin {
        color: #666;
        font-size: 1.1rem;
        font-style: italic;
        line-height: 1.4rem;
        text-align: left;
    }

    .layout-profile-item {
        padding: 0 1.0rem;
        font-size: 1.4rem;
        line-height: 2.0rem;
        cursor: pointer;
    }

    .layout-profile-item-active {
        font-weight: 600;
    }

    .layout-profile-user {
        min-height: 5.0rem;
        padding: 0.5rem 1.0rem;
        clear: both;
        cursor: pointer;
    }

        .layout-profile-user:hover,
        .layout-profile-user:focus,
        .layout-profile-item:hover,
        .layout-profile-item:focus {
            color: #66ccff;
        }

    .layout-profile-user-pic {
        width: 4.8rem;
        height: 4.8rem;
        margin-right: 0.5rem;
        float: left;
        border: 1px solid #666;
        background: #CCC;
    }

        .layout-profile-user-pic img {
            width: 4.8rem;
            height: 4.8rem;
        }

    .layout-profile-user-name {
        padding-top: 1.0rem;
        float: left;
        color: #333;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.4rem;
    }

        .layout-profile-user-name span {
            display: block;
            color: #666;
            font-size: 1.2rem;
            font-style: italic;
            font-weight: 400;
            line-height: 1.4rem;
        }

    .layout-profile-user:hover .layout-profile-user-name,
    .layout-profile-user:hover .layout-profile-user-name a,
    .layout-profile-user:hover .layout-profile-user-name span,
    .layout-profile-user:focus .layout-profile-user-name,
    .layout-profile-user:focus .layout-profile-user-name a,
    .layout-profile-user:focus .layout-profile-user-name span {
        color: #FFF;
    }

    .layout-profile h3 {
        margin: 0 1.0rem;
        color: #999;
        font-size: 1.2rem;
        line-height: 2.4rem;
        text-transform: uppercase;
    }

    .layout-profile hr {
        margin: 0.5rem 1.0rem 1.0rem 0rem;
        border: none;
        border-bottom: 1px solid #CCC;
    }

    /* Desktop Layout */
    .layout-topbar-desktop {
        position: absolute;
        top: 4.0rem;
        right: 0;
        bottom: 0;
        left: 17.0rem;
        border-top: 1px solid #fff;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .layout-topbar-nav .navicon span {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .layout-topbar {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 10.0rem;
        overflow: hidden;
    }

    .layout-topbar-nav {
        position: absolute;
        left: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .layout-topbar-logo {
        position: absolute;
        top: 1.7rem;
        left: 1.8rem;
        width: 13.4rem;
        height: 6.5rem;
        text-align: center;
    }

        .layout-topbar-logo img {
            max-width: 13.0rem;
            max-height: 8.0rem;
        }

    .layout-topbar-nav li {
        display: inline-block;
        margin: 0 1rem 0 0;
        padding-top: 4.0rem;
        float: left;
        font-size: 1.0rem;
        line-height: 2.0rem;
        cursor: pointer;
    }

    .layout-navbar,
    .layout-details {
        top: 10.0rem;
        bottom: 5.0rem;
    }

    .layout-navbar {
        left: 0;
        width: 21.6rem;
        overflow-x:hidden;
        overflow-y:auto;
        background-color: #323232;
        background-color: rgba(0, 0, 0, 0.80);
    }

    .layout-navbar-profile {
        display: none;
    }

    .layout-skinny {
        top: 9.5rem;
        bottom: 4.5rem;
        left: 19.0rem;
        width: 35.0rem;
    }

    .layout-details {
        right: 0;
        left: 22.0rem;
        overflow-x:auto;
    }

    .layout-details-content-multi {
        padding: 3.0rem 0 0 1.0rem;
    }

    .layout-details-content {
        padding: 2.0rem 2.0rem 0 2.0rem;
    }

    .layout-details-content-documents {
        padding: 2.0rem 2.0rem 0 1.0rem;
    }

    .layout-footer {
        right: 0;
        bottom: 0;
        left: 0;
        height: 50px;
        position:fixed;
    }

    /* Background for active skinny menu */

    .layout-skinny {
        display: none;
    }

    .align-view {
        text-align: left;
    }

    /* Fixed Skinny Layout */

    .fixed-skinny .layout-navbar {
        display: none;
    }

    .fixed-skinny .layout-skinny {
        display: block;
        position: absolute;
        top: 10.0rem;
        bottom: 5.0rem;
        left: 0;
        border-right: 0.1rem solid #999;
        background-color: #fdfdfd;
    }

    .fixed-skinny .layout-details {
        left: 35.0rem;
    }

    .fixed-skinny .layout-skinny .panel {
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .layout-skinny .panel {
        width: 100%;
    }

    /* Popup Skinny */

    .popup-skinny .layout-skinny {
        display: block;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-right: 1px solid #999;
    }

    .layout-navbar li li:hover,
    .layout-navbar li li.active {
        background-color: #1d1d1d;
    }

    .layout-navbar li li:focus {
        background-color: #575757;
    }

    .layout-navbar li li.active-skinny {
        background-color: #1d1d1d;
    }

        .layout-navbar li li.active-skinny:focus {
            background-color: #575757;
        }

        .layout-navbar li li.active-skinny a {
            color: #FFF;
        }

    .layout-navbar li li a {
        display: table-cell;
        position: relative;
        height: 6.0rem;
        padding: 0 0 0 5.0rem;
        color: #fff;
        line-height: 1.5rem;
        text-decoration: none;
        vertical-align: middle;
    }

        .layout-navbar li li a:after,
        .layout-navbar li li a:before {
            position: absolute;
            top: 50%;
            right: -0.1rem;
            width: 0;
            height: 0;
            border: solid transparent;
            content: " ";
            opacity: 0.0;
            pointer-events: none;
        }

        .layout-navbar li li a:after {
            margin-top: -10px;
            border-width: 10px;
            border-color: #fff;
            border-color: rgba(255, 255, 255, 0);
            border-right-color: #fff;
        }

        .layout-navbar li li a:before {
            margin-top: -11px;
            border-width: 11px;
            border-color: #999;
            border-color: rgba(153, 153, 153, 0);
            border-right-color: #fff;
        }

    .layout-navbar li li.active-skinny a:after,
    .layout-navbar li li.active-skinny a:before {
        opacity: 1.0;
    }

    /* Banner */

    .has-banner .layout-banner {
        position: absolute;
        top: 6.0rem;
        right: 0;
        left: 0;
    }

    .has-banner .layout-banner-image {
        height: 30.0rem;
    }

    .has-banner .layout-banner-overlay {
        position: absolute;
        top: 0;
        width: 35.0rem;
        height: 30.0rem;
        border-right: 1px solid #111;
        background: #7f7f7f;
        background: rgba(0, 0, 0, 0.5);
    }

    .has-banner .layout-banner-logo {
        position: relative;
        top: 15%;
        width: inherit;
        height: inherit;
        background-position: center;
    }

    .has-banner .layout-skinny {
        top: 36.0rem;
    }

    .has-banner .layout-details {
        top: 36.0rem;
    }

    .has-banner .layout-topbar {
        height: 6.0rem;
    }

    .has-banner .layout-topbar-logo {
        display: none;
    }

    /* Subnav */

    .layout-navbar-section-header {
        display: none;
    }

    .layout-navbar li li {
        display: table;
        position: relative;
        min-width: 15rem;
        height: 6.0rem;
        margin: 0;
        padding: 0;
        float: none;
        border-bottom: 1px solid #989898;
        background-position: 1.0rem center;
        background-repeat: no-repeat;
        background-size: 34px 34px;
        background-size: 3.4rem 3.4rem;
        color: #fff;
        font-size: 1.4rem;
        width:100%;
    }

    /* These classes correspond to DB */

    .navitem-dashboard {
        background-image: url(../../img/navbar/info.svg);
    }

    .layout-navitem-visits {
        background-image: url(../../img/navbar/visits.svg);
    }

    .navitem-charthistory {
        background-image: url(../../img/icons/log.svg);
    }

    .navitem-chartgrowth {
        background-image: url(../../img/icons/growth-charts.svg);
    }

    .navitem-connections {
        background-image: url(../../img/icons/connections.svg);
    }

    .navitem-documents {
        background-image: url(../../img/icons/document.svg);
    }

    .navitem-financials {
        background-image: url(../../img/icons/billpay.svg);
    }

    .navitem-healthhistoryforms {
        background-image: url(../../img/icons/health-history.svg);
    }

    .navitem-visits {
        background-image: url(../../img/icons/visits.svg);
    }

    .navitem-clinical-notes {
        background-image: url(../../img/icons/clinicalnotes.svg);
    }

    .navitem-medications {
        background-image: url(../../img/icons/medications.svg);
    }

    .navitem-immunizations {
        background-image: url(../../img/icons/immunizations.svg);
    }

    .navitem-information {
        background-image: url(../../img/navbar/info.svg);
    }

    .navitem-insurance {
        background-image: url(../../img/icons/insurance.svg);
    }

    .navitem-apitoken {
        background-image: url(../../img/icons/apitoken.svg);
    }

    .navitem-scheduled {
        background-image: url(../../img/icons/scheduled.svg);
    }

    .navitem-directscheduled {
        background-image: url(../../img/icons/scheduled.svg);
    }

    .navitem-directscheduled {
        background-image: url(../../img/icons/add-scheduled.svg);
    }

    .navitem-appointments,
    .navitem-requested {
        background-image: url(../../img/icons/requested.svg);
    }

    .navitem-appearance {
        background-image: url(../../img/icons/appearance.svg);
    }

    .navitem-practicesettings {
        background-image: url(../../img/icons/practicesettings.svg);
    }

    .navitem-disclaimer {
        background-image: url(../../img/icons/disclaimer.svg);
    }

    .navitem-PatientEducation {
        background-image: url(../../img/icons/patientEducation.svg);
    }

    .navitem-addapps {
        background-image: url(../../img/icons/addapps.svg);
    }

    .navitem-manageapps {
        background-image: url(../../img/icons/manageapps.svg);
    }

    /* Footer */

    .layout-copyright {
        padding-left: 2.0rem;
        float: left;
        color: #DDD;
        font-size: 1.4rem;
        line-height: 2.0rem;
    }

    .layout-colophon {
        padding: 1.0rem 2.0rem;
        float: right;
    }

        .layout-colophon img {
            width: 14rem;
            height: 3.5rem;
        }

    .fixed-skinny.no-skinny .layout-details {
        left: 0;
    }

    .no-skinny .layout-skinny {
        display: none;
    }

    .no-details .layout-skinny {
        right: 0;
    }

    .no-details .layout-details {
        display: none;
    }

    .footer-terms {
        font-size: 1.3rem;
        cursor: pointer;
    }

    .dynamic-hide-terms {
        display: none;
    }

    /*=============================================
=               Custom Desktop                =
=            _custom-desktop.scss             =
=============================================*/

    .dynamic-skinny.popup-skinny .layout-skinny {
        -webkit-box-shadow: 4px 0 9px -2px rgba(0,0,0,0.50);
        -moz-box-shadow: 4px 0 9px -2px rgba(0,0,0,0.50);
        width: 25%;
        border-radius: 0;
        background-color: #fdfdfd;
        box-shadow: 4px 0 9px -2px rgba(0,0,0,0.50);
        opacity: 1;
        transition-delay: 0s, .4s, .4s, .4s, .4s, .4s, .4s, 0s;
        transition-duration: .4s, .4s, .4s, 0s, .4s, .4s, .4s, .2s;
        z-index: 400;
    }

    li.skinny-item.at_visit_item {
        display: none;
    }

    .popup-skinny li.skinny-item.at_visit_item {
        display: block;
    }

    .dynamic-skinny .layout-skinny {
        display: block;
        top: 10rem;
        bottom: 5rem;
        width: 0%;
        margin-left: -1px;
        border-right: 1px solid #000;
        border-radius: 0;
        opacity: 0;
        transition-delay: .2s, 0s, 0s, 0s, 0s, 0s, 0s, 0s;
        transition-duration: 0s, .2s, .2s, .2s, .2s, .2s, .2s, .2s;
        z-index: 200;
    }

    .dynamic-skinny .layout-navbar {
        z-index: 325;
    }

    .popup-skinny .layout-navbar li li a:after {
        margin-top: -10px;
        border-width: 10px;
    }

    .popup-skinny .layout-navbar li li a:before {
        margin-top: -11px;
        border-width: 11px;
    }

    .layout-navbar li li a:after,
    .layout-navbar li li a:before {
        -webkit-transition: margin-top, border-width, opacity;
        -moz-transition: margin-top, border-width, opacity;
        -o-transition: margin-top, border-width, opacity;
        margin-top: 0;
        border-width: 0;
        transition: margin-top, border-width, opacity;
        transition-duration: .2s, .2s, .2s;
    }

    .popup-skinny .layout-skinny-list {
        height: 100%;
    }

    /* Vertically Responsive Banner */

}

@media all and (min-width: 1001px) and (max-height: 750px) {
    .has-banner .layout-banner {
        top: 6.0rem;
    }

    .has-banner .layout-banner-image {
        height: 22.0rem;
        margin-top: -7.0rem;
    }

    .has-banner .layout-banner-overlay {
        position: absolute;
        top: 0;
        height: 15.0rem;
        border-right: 1px solid #111;
        background: #7f7f7f;
        background: rgba(0, 0, 0, 0.5);
    }

    .has-banner .layout-banner-logo {
        position: relative;
        top: 0;
        width: inherit;
        height: inherit;
        background-position: center;
    }

    .has-banner .layout-skinny {
        top: 21.0rem;
    }

    .has-banner .layout-details {
        top: 21.0rem;
    }
}

@media all and (min-width: 1001px) {
    .fixed-skinny .layout-navbar,
    .layout-navbar-profile {
        display: block;
        width: 0;
    }

    .fixed-skinny .layout-navbar-section-list {
        display: none;
    }

    .layout-navbar-logo,
    .layout-navbar-profile-show,
    .layout-navbar-profile-info-name,
    .layout-navbar-profile form {
        display: none;
    }

    .layout-navbar-profile .layout-logoff,
    .layout-navbar-profile .layout-logoff form {
        display: block;
        margin-left: -3.5px;
        color: #000;
        text-align: left;
    }

    .popup-profile .layout-profile {
        position: fixed;
        top: 10rem;
        right: 2rem;
    }

    .layout-profile .subtle {
        color: #595959;
        color: rgba(0, 0, 0, 0.65);
    }

    .layout-profile h4.subtle {
        margin-left: 0;
    }

    .select-message-inbox {
        max-width: 25rem;
    }

    .expand-navbar-section {
        display: none;
    }

    .layout-profile .layout-profile-item {
        color: #000;
    }

    .layout-profile .layout-profile-item a {
        color: #000000;
        text-decoration: none;
    }

    .layout-profile .layout-profile-item .subtle {
        opacity: 0.75;
    }

    .layout-profile .layout-profile-item:hover,
    .layout-profile .layout-profile-item:focus {
        color: #999;
    }

    .layout-profile .layout-profile-item:hover a,
    .layout-profile .layout-profile-item:focus a {
        color: #999;
    }

    .layout-profile .layout-profile-item:hover.active,
    .layout-profile .layout-profile-item:focus.active {
        color: #999;
        list-style: none;
    }

    .layout-profile .layout-profile-item:hover.active a,
    .layout-profile .layout-profile-item:focus.active a {
        color: #000;
        cursor: default;
    }

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

    .visible-on-focus a:focus {
        top: 0.5rem;
        right: 20.0rem;
    }

    .layout-display-name {
        top: 1.5rem;
        right: 18.0rem;
        left: 18.0rem;
    }

    .layout-main-header {
        font-size: 1.8rem;
    }

    .layout-display-phone {
        position: absolute;
        top: 0.25rem;
        right: 5.0rem;
        color: #fff;
    }

    .layout-phone-number {
        text-align: right;
    }

    .layout-navbar-phone {
        display: none;
    }

    .layout-topbar-profile {
        right: 1.0rem;
    }
}

/*=====      End of Desktop Styles     ======*/

/*=============================================
=             Mobile Device Styles            =
=             _mobile-styles.scss             =
=============================================*/

    /*=== MOBILE DEVICES ===*\
    __________________
   /      o ===       \
   |  ______________  |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |              | |
   | |______________| |
   |       /``\       |
   |       \__/       |
   \__________________/
              __   _ __   
  __ _  ___  / /  (_) /__ 
 /  ' \/ _ \/ _ \/ / / -_)
/_/_/_/\___/_.__/_/_/\__/ */

@media all and (max-width: 1000px) {
    /* Z-Indices */
    .layout-bgbar {
        display: none;
    }

    .layout-topbar {
        z-index: 300;
    }

    .layout-navbar {
        z-index: 300;
    }

    .layout-profile {
        z-index: 400;
    }

    .layout-skinny {
        z-index: 200;
    }

    .layout-footer {
        z-index: 300;
    }

    /* Hide some divs */
    .layout-topbar-desktop,
    .layout-topbar-logo {
        display: none;
    }

    /* Navigation */
    .layout-navbar .navicon {
        background-position: 0.5rem 1.0rem;
    }

    .layout-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .layout-topbar {
        right: 0;
        left: 0;
        width: auto;
        height: 40px;
    }

    .layout-navbar {
        top: 0;
        right: 100%;
        bottom: 0;
        left: -250px;
        width: 250px;
        background: #333;
        color: #FFF;
    }

    .layout-navbar-logo {
        margin: 3rem 3rem 4rem 3rem;
        text-align: center;
    }

    .layout-navbar-logo {
        width: 13.4rem;
        height: 6.5rem;
    }

    .layout-navbar a {
        color: #FFF;
        text-decoration: none;
    }

    .layout-navbar ul {
        margin: 2.0rem;
    }

    .layout-navbar ul ul {
        margin: 0;
    }

    .layout-navbar-section {
        display: block;
    }

    .layout-navbar li {
        padding-left: 4.0rem;
        color: #FFF;
        font-size: 2.0rem;
        line-height: 5.0rem;
    }

    .layout-navbar ul > li {
        border-radius: 0.5rem;
    }

    .layout-navbar li li {
        height: 0;
        padding-left: 1.0rem;
        overflow: hidden;
        font-size: 1.4rem;
        line-height: 3.0rem;
        opacity: 0;
        transition: height 0.4s ease-out, opacity 0.2s ease-out 0.4s;
        -webkit-transition: height 0.4s ease-out, opacity 0.2s ease-out 0.4s;
        -moz-transition: height 0.4s ease-out, opacity 0.2s ease-out 0.4s;
        -o-transition: height 0.4s ease-out, opacity 0.2s ease-out 0.4s;
    }

    .layout-navbar-profile {
        margin: 2.0rem;
        padding: 1.0rem;
        border-top: 1px solid #555;
    }

    .layout-skinny {
        top: 4.0rem;
        right: 0;
        bottom: 3.0rem;
        left: 0;
        width: 100%;
    }

    .layout-details {
        top: 4.0rem;
        bottom: 3.0rem;
        left: 100%;
        width: 100%;
        overflow-x:auto;
    }

    .layout-details-content {
        padding: 1.0rem 2.0rem;
    }

    .layout-footer {
        display: none;
        right: 0;
        bottom: 0;
        left: auto;
        width: 100%;
        height: 30px;
    }

    .layout-copyright {
        padding-left: 2.0rem;
        float: left;
        color: #DDD;
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .layout-colophon {
        padding: 0.25rem 1.0rem;
        float: right;
    }

    .layout-colophon img {
        width: 14rem;
        height: 2.0rem;
    }

    #navitem-directscheduled {
        line-height: 1.6rem;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 3%
    }

    .panel {
        transition: right 0.4s ease-out, left 0.4s ease-out;
        -webkit-transition: right 0.4s ease-out, left 0.4s ease-out;
        -o-transition: right 0.4s ease-out, left 0.4s ease-out;
    }

    .panel-scroll {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }

    .home-active .navbar-home.layout-navbar-section li {
        height: 30px;
        opacity: 1.0;
    }

    .health-active .navbar-health.layout-navbar-section li {
        height: 30px;
        opacity: 1.0;
    }

    .messages-active .navbar-messages.layout-navbar-section li {
        height: 30px;
        opacity: 1.0;
    }

    .appointments-active .navbar-appointments.layout-navbar-section li {
        height: 30px;
        opacity: 1.0;
    }

    .myprofile-active .navbar-myprofile.layout-navbar-section li {
        height: 30px;
        opacity: 1.0;
    }

    .myapps-active .navbar-myapps.layout-navbar-section li {
        height: 30px;
        opacity: 1.0;
    }

    .expand-navbar-section ul li {
        height: 30px;
        opacity: 1.0;
    }

    /* Show Skinny */
    .show-skinny .layout-navbar {
        right: auto;
        left: -250px;
    }

    .show-skinny .layout-skinny {
        position: absolute;
        right: 0;
        bottom: 0;
        left: auto;
    }

    .show-skinny .layout-details {
        right: auto;
        left: 100%;
    }

    .show-skinny .layout-footer {
        right: 0;
        left: auto;
    }

    .show-skinny .layout-skinny .panel {
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .show-skinny .layout-skinny .layout-skinny-options {
        width: 100%;
    }

    /* Show Details */
    .show-details .layout-navbar {
        right: auto;
        left: -250px;
    }

    .show-details .layout-skinny {
        right: 100%;
        left: auto;
    }

    .show-details .layout-details {
        right: 0;
        bottom: 0;
        left: 0;
    }

    .show-details .layout-footer {
        display: none;
        right: 0;
        left: auto;
    }

    /* No-Skinny Details */
    .no-skinny.show-skinny .layout-navbar {
        right: auto;
        left: -250px;
    }

    .no-skinny.show-skinny .layout-skinny {
        right: 100%;
        left: auto;
    }

    .no-skinny.show-skinny .layout-details {
        right: 0;
        left: 0;
    }

    .no-skinny.show-skinny .layout-footer {
        right: 0;
        left: auto;
    }

    /* No-Skinny Nav */
    .no-skinny.show-navbar .layout-navbar {
        right: auto;
        left: 0;
    }

    .no-skinny.show-navbar .layout-skinny {
        right: 100%;
        left: auto;
    }

    .no-skinny.show-navbar .layout-details {
        right: -250px;
        left: 250px;
    }

    .no-skinny.show-navbar .layout-footer {
        right: -250px;
        left: auto;
    }

    /* Show Navbar */
    .show-navbar .layout-navbar {
        right: auto;
        left: 0;
    }

    .show-navbar .layout-skinny {
        right: -250px;
        left: auto;
    }

    .show-navbar .layout-details {
        right: auto;
        bottom: 0;
        left: 100%;
    }

    .show-navbar .layout-footer {
        right: -250px;
        left: auto;
    }

    /* Global Nav */
    .show-navbar .layout-topbar {
        right: 0;
        left: 250px;
    }

    .show-navbar.show-skinny .layout-skinny {
        right: -250px;
        left: auto;
    }

    .show-navbar.show-skinny .layout-details {
        right: auto;
        left: 100%;
    }

    .show-navbar.no-skinny.show-skinny .layout-skinny,
    .show-navbar.show-details .layout-skinny {
        right: 100%;
        left: auto;
    }

    .show-navbar.no-skinny.show-skinny .layout-details,
    .show-navbar.show-details .layout-details {
        right: auto;
        left: 250px;
    }

    /* Banner */
    .layout-banner {
        display: none;
        z-index: 100;
    }

    .has-banner .layout-skinny {
        top: 10.0rem;
    }

    .has-banner .layout-details {
        top: 10.0rem;
    }

    .has-banner .layout-banner {
        display: block;
        position: absolute;
        top: 4.0rem;
        right: 0;
        left: 0;
    }

    .has-banner .layout-banner-image {
        height: 22.50rem;
        margin-top: -7.5rem;
    }

    .has-banner .layout-banner-overlay {
        position: absolute;
        top: 0;
        width: 25.0rem;
        height: 15.0rem;
        border-right: 1px solid #111;
        background: #7f7f7f;
        background: rgba(0, 0, 0, 0.5);
    }

    .has-banner .layout-banner-logo {
        position: relative;
        width: inherit;
        height: inherit;
        background-position: center;
    }

    .has-banner .layout-skinny {
        top: 19.0rem;
    }

    .has-banner .layout-details {
        top: 19.0rem;
    }

    .has-banner .layout-topbar {
        height: 4.0rem;
    }

    .has-banner .layout-topbar-logo {
        display: none;
    }

    .has-banner .skinny-list {
        -moz-transition: width 0.4s ease-out;
        -webkit-transition: width 0.4s ease-out;
        -o-transition: width 0.4s ease-out;
        width: 100%;
        transition: width 0.4s ease-out;
    }

    .has-banner.show-navbar .skinny-list {
        width: 75%;
    }

    .footer-terms :hover {
        color: lightblue;
        cursor: pointer;
    }
}

.layout-logoff > form > span:focus,
.layout-logoff > form > span:hover {
    color: gray;
}

.footer-link {
    cursor: pointer;
    color: #DDD !important;
}

.footer-link:focus {
    outline: auto;
}

@media all and (max-width: 1000px) and (max-height: 500px) {
    /* Vertically Responsive Banner */
    .has-banner .layout-skinny {
        top: 4.0rem;
    }

    .has-banner .layout-details {
        top: 4.0rem;
    }

    .has-banner .layout-banner {
        display: none;
    }
}

@media all and (max-width: 1000px) {
    /* Vertically Responsive Footer */
}

@media all and (max-width: 1000px) and (max-height: 500px) {
    .layout-footer {
        height: 0;
    }

    .layout-skinny {
        bottom: 0;
    }

    .layout-details {
        bottom: 0;
    }
}

@media all and (max-width: 1000px) {
    /* Mobile profile info and practice-patient picker */
    .layout-navbar-profile-frame ul {
        margin: 0;
    }

    .layout-navbar-profile > div {
        display: block;
    }

    .layout-logoff {
        display: none;
    }

    .layout-navbar-profile-frame {
        display: block;
        min-height: 3.2rem;
        margin: 0.5rem -0.5rem 1.0rem;
        padding: 0.5rem;
        overflow: hidden;
        border-radius: 5px;
        background-color: transparent;
        transition: max-height 0.4s ease-out;
    }

    .icon-triangle-up-down {
        font-size: 150%;
    }

    .icon-triangle-up-down:before {
        content: "\e665";
    }

    .layout-profile {
        max-height: 0.0rem;
        opacity: 0;
        transition: opacity 0s ease-out 0.8s, max-height 0.4s ease-out;
    }

    .layout-profile .layout-profile-item,
    .layout-profile .layout-profile-item:hover,
    .layout-profile .layout-profile-item:focus {
        color: #FFF;
        font-size: 110%;
    }

    .layout-profile .layout-profile-item.active,
    .layout-profile .layout-profile-item:hover.active,
    .layout-profile .layout-profile-item:focus.active {
        background: none;
        color: #FFF;
    }

    .layout-profile hr {
        margin: 1.0rem 0.5rem;
    }

    .popup-profile .layout-navbar-profile-frame {
        max-height: 200.0rem;
        background-color: #b2b2b2;
        background-color: rgba(0, 0, 0, 0.3);
        transition: max-height 0.8s ease-in;
    }

    .popup-profile .layout-profile {
        max-height: 200.0rem;
        opacity: 1;
        transition: opacity 0.8s ease-in 0.2s, max-height 0.8s ease-in;
    }

    .popup-profile .icon-triangle-up-down:before {
        content: "\e666";
    }

    .layout-profile .subtle {
        color: #fff;
        color: rgba(255, 255, 255, 0.65);
    }

    .visible-on-focus a:focus {
        top: 0.5rem;
        right: 0.5rem;
    }

    .layout-display-name {
        top: 1.3rem;
        right: 3.0rem;
        left: 5.0rem;
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .layout-main-header {
        font-size: 1.7rem;
        font-weight: 500;
    }

    .layout-display-phone {
        display: none;
    }

    .layout-navbar-phone {
        display: inline-block;
        margin-top: -1.0rem;
        margin-left: 1.8rem;
        padding: 0.5rem 0.5rem 0.75rem 4.0rem;
        border-radius: 0.5rem;
        cursor: pointer;
    }

    .layout-navbar-phone:hover,
    .layout-navbar-phone:focus {
        background-color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .layout-navbar-phone .icon-phone {
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        margin-top: 0.5rem;
        margin-left: -3.25rem;
        padding: 0.35rem;
        float: left;
        transform: rotateY(180deg);
        border: 2px solid #fff;
        border-radius: 2.0rem;
        }

    /*=====  End of Mobile Styles  ======*/

/*=============================================
=             HAMBURGER BUTTON                =
=              _hamburger.scss                =
=============================================*/

    .hamburger-button {
        user-select: none;
        display: inline-block;
        margin: 0.2rem;
        padding: 0 0.5rem;
        border: none;
        border-radius: 0;
        background: none;
        font-size: 1.0rem;
        cursor: pointer;
        transition: .3s;
    }

    .toggle-details-button {
        position: absolute;
        right: 0.0rem;
        margin-right: 31px !important;
    }

    .lines {
        display: inline-block;
        position: relative;
        width: 28px;
        height: 3px;
        border-radius: 1.5px;
        background: #FFF;
        transition: .3s;
    }

    .lines:before, .lines:after {
        -webkit-transform-origin: 1.5px center;
        -moz-transform-origin: 1.5px center;
        -ms-transform-origin: 1.5px center;
        -o-transform-origin: 1.5px center;
        display: inline-block;
        position: absolute;
        left: 0;
        width: 28px;
        height: 3px;
        transform-origin: 1.5px center;
        border-radius: 1.5px;
        background: #FFF;
        content: '';
        transition: .3s;
    }

    .lines:before {
        top: 8px;
    }

    .lines:after {
        top: -8px;
    }

    .hamburger-button .lines {
        transition: background .3s .6s ease;
        -webkit-transition: background .3s .6s ease;
        -moz-transition: background .3s .6s ease;
        -o-transition: background .3s .6s ease;
    }

    .hamburger-button .lines:before, .hamburger-button .lines:after {
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        transition: top .3s .6s ease, -webkit-transform .3s ease;
        transition: top .3s .6s ease, transform .3s ease;
    }

    .hamburger-button.hamburger-close .lines {
        background: transparent;
        transition: background .3s 0s ease;
        -webkit-transition: background .3s 0s ease;
        -moz-transition: background .3s 0s ease;
        -o-transition: background .3s 0s ease;
    }

    .hamburger-button.hamburger-close .lines:before, .hamburger-button.hamburger-close .lines:after {
        top: 0;
        width: 28px;
        transition: top .3s ease, -webkit-transform .3s .5s ease;
        transition: top .3s ease, transform .3s .5s ease;
        -webkit-transition: top .3s ease, -webkit-transform .3s .5s ease;
        -moz-transition: top .3s ease, -webkit-transform .3s .5s ease;
        -ms-transition: top .3s ease, -webkit-transform .3s .5s ease;
        -o-transition: top .3s ease, -webkit-transform .3s .5s ease;
    }

    .hamburger-button.hamburger-close .lines:before {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -moz-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        -o-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .hamburger-button.hamburger-close .lines:after {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -moz-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        -o-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
    }

    .toggle-details-button .lines {
        width: 14px;
        background: none;
        transition: 1.2s;
    }

    .toggle-details-button .lines:before, .toggle-details-button .lines:after {
        width: 14px;
        transition: top .3s ease, -webkit-transform .3s .5s ease;
        transition: top .3s ease, transform .3s .5s ease;
    }

    .toggle-details-button .lines:before {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -moz-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        -o-transform: rotate3d(0, 0, 1, 45deg);
        top: 0;
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .toggle-details-button .lines:after {
        top: 0;
        transform: rotate3d(0, 0, 1, -45deg);
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -moz-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        -o-transform: rotate3d(0, 0, 1, -45deg);
    }

    .toggle-details-button.bacon-strip-right .lines:before {
        top: -4px;
    }

    .toggle-details-button.bacon-strip-right .lines:after {
        top: 4px;
    }

    .toggle-details-button.bacon-strip-left .lines:before {
        top: 4px;
    }

    .toggle-details-button.bacon-strip-left .lines:after {
        top: -4px;
    }

    .no-skinny .toggle-details-button,
    .no-details .toggle-details-button {
        display: none;
    }
}

/*=====  End of Hamburger Button Styles  ======*/

/*=============================================
=                Custom Styles               =
=             _custom-styles.scss            =
=============================================*/

.banner-image {
    background: url(https://mmc.viterahealthcare.com:9999/portal/images/new2/headerpic.jpg) no-repeat;
}

.banner-image-temp {
    background: url(https://mmc.viterahealthcare.com:9999/portal/images/new2/headerpic.jpg) no-repeat;
}

/* Original color */
.customcolor {
    background: #2e5599;
}

/* Darker colors */
.customcolor-dk1 {
    background: #274882;
}

.customcolor-dk2 {
    background: #1E3966;
}

.customcolor-dk3 {
    background: #172C4F;
}

/* Lighter colors */
.customcolor-lt1 {
    background: #5B7BB3;
}

.customcolor-lt2 {
    background: #8FA5CC;
}

.customcolor-lt3 {
    background: #D0D8E7;
}

#skinny .skinny-empty-content {
    margin: 0.25rem 0.5rem;
    padding: 0.25rem 0.5rem;
}

.popup-dialog {
    display: none;
    border: 1px solid #D9D9D9;
    background: none repeat scroll 0 0 #FFFFFF;
    color: #666666;
    font-size: 16px;
    box-shadow: 10px 10px 5px #999999;
    z-index: 502;
}

.popUp-close-button {
    position: relative;
    top: 3px;
    left: -3px;
    width: 16px;
    height: 16px;
    float: right;
    cursor: pointer;
}

.layout-topbar .navicon {
    font-size: 1.2rem;
    text-shadow: 0 0 0;
    transition: background .3s ease-out, text-shadow .3s ease-out;
    -webkit-transition: background .3s ease-out, text-shadow .3s ease-out;
    -moz-transition: background .3s ease-out, text-shadow .3s ease-out;
    -o-transition: background .3s ease-out, text-shadow .3s ease-out;
}

.layout-topbar .navicon:hover,
.layout-topbar .navicon:focus {
    text-shadow: 0 0 20px;
}

.hide {
    display: none;
}

.no-select {
    cursor: default;
}

.no-select:hover {
    background: inherit;
    color: inherit;
}

#disclaimer-popup {
    display: none;
    width: 400px;
    height: 250px;
    border: 1px solid #D9D9D9;
    background: none repeat scroll 0 0 #FFFFFF;
    color: #666666;
    font-size: 16px;
    box-shadow: 10px 10px 5px #999999;
    z-index: 502;
}

.loading-indicator {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    transition: left 0s .3s;
    float: left;
    margin-right: 1rem;
    display: none;
}

.ajax-loader-gif-frame {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 11rem;
    height: 11rem;
    margin-left: -5.5rem;
    border: 1px solid rgba(100, 100, 100, 0.5);
    border-radius: 1.0rem;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    transition: left 0s .3s;
}

.icon-ajax-loader-gif {
    display: block;
    width: inherit;
    height: inherit;
    background: url("../../img/loader.gif") no-repeat center;
}

.overlay-gif-away .ajax-loader-gif-frame {
    left: 150%;
    transition: left 0s 0s;
}

.layout-ajax-loader-overlay {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
    transition: visibility, opacity;
    transition-delay: 0s, 0s;
    transition-duration: 0s, 0.5s;
    visibility: visible;
    z-index: 250;
}

.layout-wrapper {
    overflow: hidden;
}

.page-overlay.layout-ajax-loader-overlay {
    top: -1.0rem;
    bottom: -1.0rem;
}

.overlay-hidden {
    opacity: 0;
    transition: visibility, opacity;
    transition-delay: 0.5s, 0s;
    transition-duration: 0s, 0.5s;
    visibility: hidden;
}

.fixed-overlay {
    position: fixed;
    pointer-events:none;
}

.img-new-icon {
    height: 29px;
    float: right;
    cursor: pointer;
}

.fixed-color:hover {
    background-color: inherit;
}

.fixed-color:focus {
    background-color: inherit;
}

.layout-skinny.panel .layout-skinny-options {
    height: auto;
    background-color: #1d1d1d;
}

.layout-skinny.panel .layout-skinny-list {
    position: absolute;
    top: 0;
    bottom: 0;
}

.layout-skinny-options ul {
    list-style: none;
}

.layout-skinny-list .skinny-list,
.layout-skinny-list .skinny-list .skinny-item,
.layout-skinny-list .skinny-list .skinny-item:hover,
.layout-skinny-list .skinny-list .skinny-item:focus {
    position: relative;
    padding: 1.0rem;
}

.skinny-item,
.skinny-item:hover,
.skinny-item:focus {
    margin-left: 0;
    padding: 1.0rem;
    border-collapse: collapse;
}

.skinny-item-active {
    margin-left: 0.0rem;
    padding-left: 1.0rem;
    border: 1px solid #bbb;
    border-right: none;
    border-left: none;
    border-collapse: collapse;
    background-color: #f5f5f5;
}

select {
    text-overflow: ellipsis;
}

.practice-selection {
    background-color: #E8F0FF;
}

.layout-copyright {
    margin-top: 0.5rem;
}

.public.stacked-details.has-banner .layout-banner {
    display: none;
}

.public.stacked-details.has-banner .layout-details {
    top: 4.0rem;
}

.panel-no-scroll {
    overflow: hidden;
}

.layout-profile .subtle {
    font-size: 80%;
}

.layout-profile .accent {
    font-size: 90%;
    font-style: italic;
}

.layout-profile h4.subtle {
    margin-bottom: 0.75rem;
}

.layout-profile .layout-profile-loggedin {
    margin-top: 0.75rem;
}

.layout-profile .layout-profile-item,
.layout-profile .layout-profile-item:hover,
.layout-profile .layout-profile-item:focus {
    position: relative;
    left: 2.0rem;
    margin-right: 2.10rem;
    padding-left: 0rem;
    line-height: 1.2;
}

.layout-profile .layout-profile-item.active {
    position: relative;
    left: 2.0rem;
    margin-right: 2.10rem;
    padding-left: 0rem;
    color: green;
    list-style: disc;
    cursor: default;
}

.layout-profile .layout-profile-item:hover.active,
.layout-profile .layout-profile-item:focus.active {
    position: relative;
    left: 2.0rem;
    margin-right: 2.0rem;
    padding-left: 0rem;
    color: #999;
    list-style: disc;
    cursor: default;
}

.layout-profile .layout-profile-item:hover.active a,
.layout-profile .layout-profile-item:focus.active a {
    color: #999;
}

.appointment-request-form .field-wrapper {
    min-height: 4.4rem;
}

/* Eye Icon */

.eye-closed-icon {
    display: inline-block;
    width: 2.0rem;
    height: 3.0rem;
    margin-bottom: -1rem;
    background-image: url(../../img/icons/eye-closed-icon.png);
    background-image: url(../../img/icons/eye-closed-icon.svg);
    background-repeat: no-repeat;
}

.eye-open-icon {
    display: inline-block;
    width: 2.0rem;
    height: 3.0rem;
    margin-bottom: -1rem;
    background-image: url(../../img/icons/eye-open-icon.png);
    background-image: url(../../img/icons/eye-open-icon.svg);
    background-repeat: no-repeat;
}

a.button,
a[role="button"] {
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-title select {
    width: 45%;
    min-width: 45%;
    max-width: 45%;
    margin: 0.25rem 2.5%;
}

.popup {
    z-index: 1500;
}

.date-range-wrapper label {
    display: inline-block;
}

.clickable {
    cursor: pointer;
}

.button-group {
    margin: 2em 0 .5em;
    text-align: right;
}

.button-group .alert {
    margin: 0.5rem;
    text-align: left;
}

.disclaimer-textarea {
    width: 100%;
}

iframe {
    background: url("../../img/loader.gif") no-repeat center;
}

.iframe-no-loader {
    background: none;
}

.modal.confirm .modal-content {
    max-width: 30rem;
    margin: 0 auto;
}

.details-header {
    margin-bottom: 2.0rem;
}

.alert-group {
    margin-bottom: 0.5rem;
}

.alert-group-alt {
    position: absolute;
    top: 60px;
    width: 100%;
    padding: 10px;
}

.in-maintenance-portal {
    margin: 0;
    color: #808080;
    cursor: default;
}

@media all and (max-width: 850px) {
    .alert-group-alt {
        top: 100px;
        padding: 5px;
    }
}

.visible-on-focus a:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 0.5rem 1.0rem;
    color: #fff;
    text-decoration: underline;
    clip: auto;
    z-index: 1000;
}

.visible-on-focus a:hover {
    color: #cdf;
    cursor: pointer;
}

.ui-widget-content .ui-state-hover {
    background-color: #ddd;
    color: #333;
}

.layout-display-name {
    position: absolute;
    color: #fff;
}

.layout-display-name h1, .layout-display-name h2 {
    color: #fff;
    margin-right: 17px !important;
}

.layout-main-header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-practice-phone {
    margin: 0;
}

.layout-phone-number {
    display: block;
    line-height: 1.6rem;
}

.layout-emergency-msg {
    margin: 0;
    color: white;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: bold;
    line-height: 1rem;
}

.file-button {
    position: relative;
    cursor: pointer;
}

.file-button-text {
    cursor: pointer;
}

.file-input {
    box-sizing: padding-box;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 2.0rem 20rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: all;
    z-index: 2;
}

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

.layout-logo {
    background-image: url(../../img/MHR.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.layout-logo-SSOGeneric {
    background-image: url(../../img/MHR.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.layout-logo.layout-navbar-logo,
.layout-logo.layout-topbar-logo {
    background-size: contain;
}

.disabled-portal {
    pointer-events: none;
}

/*=====  End of Custom Styles  ======*/

/*=============================================
=                 Help icon                   =
=              _help-icon.scss                =
=============================================*/

.help-icon {
    display: block;
    position: relative;
    width: 4.5rem;
    margin-right: 0;
    padding-top: 4.0rem;
    float: right;
    background-image: url(../../img/Help-icon.png);
    background-position: center;
    background-repeat: no-repeat;
    font-size: 1.0rem;
    line-height: 2.0rem;
    text-align: center;
    cursor: pointer;
    opacity: 0.8;
    transition: background-color 0.5s ease;
}

.help-icon--with-badge {
    background-image: url(../../img/Help-with-Badge-icon.png);
}

@media (min-width: 1025px) {
    .help-icon:hover {
        background-color: #7f7f7f;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1.0;
    }
}

@media all and (max-width: 1023px) {
    .help-icon:active {
        margin-right: 20px;
        background-color: #7f7f7f;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1.0;
    }

    .help-icon {
        margin-right: -8px !important;
    }

    .help-icon--with-badge {
        margin-right: 19px;
        background-image: url(../../img/Help-with-Badge-icon.png);
    }

    .help-icon:hover {
        opacity: 1.0;
    }
}
/*=====  End of Help Icons  ======*/

/*=============================================
=       My Appointments Schedule cal         =
=         _schedule-calendar.scss            =
=============================================*/

.schedapptcal table {
    width: 100%;
    float: left;
    clear: both;
    border: 1px solid #DDD;
    border-collapse: unset;
}

.schedapptcal table thead tr td {
    width: 16%;
    text-align: center;
}

.schedapptcal table tr td {
    width: 16%;
    text-align: center;
}

.schedapptcal table thead {
    border: 1px solid #DDD;
}

.schedapptcal table tr td button {
    height: 35px;
    margin-top: 7px;
    margin-bottom: 7px;
    border: 1px solid #6891F8;
    background-color: white;
    color: #6891f8;
}

.schedapptcal table tr td button:hover {
    color: #999;
    opacity: 0.75;
}

div.nextprev {
    display: inline-block;
    width: 100%;
    clear: both;
}

div.nextprev span {
    width: 50%
}

div button.nextday,
div button.prevday {
    margin: 0;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #F6F6F6;
    color: #999;
    line-height: 10px;
}

div button.nextday:hover,
div button.prevday:hover {
    background-color: #E6E6E6;
}

div button.nextday {
    float: right
}

div button.prevday {
    float: left
}

.schedapptcal table tr td button.nextday,
.schedapptcal table tr td button.prevday {
    padding: 12px;
    border: 1px solid #ccc;
    line-height: 10px;
}

.schedapptcal table tr td button.nextday {
    float: right
}

.schedapptcal table tr td button.prevday {
    float: left
}

.schedapptcal table tr td button.nextday:hover,
.schedapptcal table tr td button.prevday:hover {
    color: #ddd;
    opacity: 0.75;
}

.schedapptcal table tr td button.schedmore {
    background-color: #6891f8;
    color: #fff;
}

.schedapptcal table tr td button.schedmore:hover {
    background-color: #78abf9;
    background-color: rgba(63, 136, 247, .7);
}

button.schedule {
    float: right;
}

@media all and (min-device-width: 481px) and (max-device-width: 767px) {

    .schedapptcal table thead {
        font-size: 1.25rem;
    }

    .schedapptcal table tr td button {
        height: 30px;
        margin: .5rem;
        padding: .25rem;
        border: 1px solid #6891F8;
        background-color: white;
        color: #6891f8;
        font-size: 1.25rem;
        line-height: 1.25rem;
    }

    .schedapptcal table tr td button.nextday,
    .schedapptcal table tr td button.prevday {
        line-height: 5px;
    }

    button.schedule {
        height: 30px;
        margin: 0 .5em .75em 0;
        padding: 0 .5em 0 .5em;
        float: right;
        font-size: 1.25rem;
    }

    div button.nextday, div button.prevday {
        height: 25px;
        padding: 8px;
        font-size: 1.25rem;
        line-height: 8px;
    }
}

@media only screen and (max-device-width:480px) {
    .schedapptcal table thead {
        font-size: 1rem;
    }

    .schedapptcal table tr td button {
        margin: .5rem;
        padding: .25rem;
        font-size: 1rem;
        line-height: 1rem;
    }

    button.schedule {
        font-size: 1rem;
    }

    div button.nextday, div button.prevday {
        height: 25px;
        padding: 8px;
        font-size: 1.25rem;
        line-height: 8px;
    }
}


/*=====  End of Schedule calendar styles  ======*/
.at-myInformation-header, .at-addInsuranceHeader, .at-noInsuranceMsg, .at-mymessage-header, .at-newmessage-header {
    font-size: 2.4rem;
}