@import url("/WebPatterns/Theme.Patterns_SilkUI.css?22901");

:root {
    --color-primary: #00acc1;
    --color-secondary: #00838f;
    --color-tertiary: #26c6da;
    --color-quaternary: #ddf0f6;

    --color-primary-hover: #0092a6;
    --color-primary-active: #006875;

    --gradient-color-primary: linear-gradient(0deg, rgba(0, 151, 167, 0.96) 0%, rgba(38, 198, 218, 0.96) 100%);

    --color-grey-1: #cfd8dc;
    --color-grey-2: #607d8b;
    --color-grey-3: #52646c;
    --color-grey-4: #37474f;
    --color-grey-5: #273136;
    --color-grey-6: #d4d4d4;
    --color-grey-7: #ededed;
    --color-grey-8: #9eb0b8;
    --color-grey-9: #fcfcfc;
    --color-grey-10: #f0f5fc;

    --color-appointment-primary: #ffb300;
    --color-appointment-secondary: #ff9800;

    --color-info-primary: #cce5ff;
    --color-info-secondary: #b8daff;

    --color-white: #fff;
    --color-alert: #de323b;
}

/*
          File: Patterns_Dublin
          
          1. Imports
          2.1 Patterns > Content
          2.2 Patterns > Controls
          2.3 Patterns > Data
          2.4 Patterns > Development
          2.5 Patterns > Email
          2.6 Patterns > Layout
          2.7 Patterns > Mobile
          2.8 Patterns > Navigation
          2.9 Patterns > Responsive
          2.10 Patterns > Structure
          2.11 Patterns > Utilities
          3. Usefull Classes
      */

/*------------------------------------*\
                    $1. Imports
      \*-------------------------------------*/

/* Moved font import to theme template (starter app) */

/*------------------------------------*\
              $2.1 Patterns > Content
      \*------------------------------------*/

/* Accordion **************************/
.AccordionVertical {
    background-color: #fff;
    border-radius: 4px;
}

.AccordionVertical_item.open > .AccordionVertical__header {
    border-top: 2px solid #d7a909;
    padding-top: 10px;
}

.AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
    background-color: #9ebdd0;
    border: 1px solid #9ebdd0;
    color: #fff;
}

/* Alerts **********************************/
.Alert {
    border-radius: 3px;
}

.Alert.Info {
    background-color: #5485a3;
    border-color: #5485a3;
}

.Alert.Success {
    background-color: #73a354;
    border-color: #73a354;
}

.Alert.Error {
    background-color: #bb5858;
    border-color: #bb5858;
}

.Alert.Warning {
    background-color: #bba758;
    border-color: #bba758;
}

/* Balloon ******************************/
.Balloon {
    border: 1px solid #dddedf;
    border-radius: 4px;
    box-shadow: 0 1px 5px 2px rgba(50, 50, 50, 0.1);
}

/* Cards ******************************/
.Card {
    background-color: #fff;
    border: 1px solid #dddedf;
    border-radius: 4px;
    padding: 0;
}

/* CardSimple ******************************/
.CardSimple {
    padding: 10px;
}

/* CardSimpleImage ******************************/
.CardSimpleImage img {
    border: 0;
}

.CardSimpleImage .Card_Image img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.CardSimpleImage .Card_Text {
    margin-bottom: 10px;
    padding: 10px;
}

.CardSimpleImage .Card_Actions {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/* CardLeftImage ******************************/
.CardLeftImage .Left .Card_Image img {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

/* Panel ******************************/
.Panel {
    background-color: #fff;
    border: 1px solid #dddedf;
    border-radius: 4px;
}

.Panel_header,
.Panel_footer {
    border-bottom: 1px solid #dddedf;
}

.Panel_header {
    border: 0;
}

.Panel_footer {
    background-color: #e5e5e5;
    border-top: 1px solid #dddedf;
    box-shadow: inset 0 4px 6px -6px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
}

/*  Post ******************************/
.Post_icon img {
    border: 2px solid #d7a909;
}

.Post_content {
    width: auto;
}

.Post__label {
    font-weight: 400;
}

.Post__description {
    color: #666;
    margin-top: 0;
}

.Panel .Post:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Panel -> Post ******************************/
.Panel .Post {
    border-bottom: 1px solid #dcddde;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.Panel .Post:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Section ******************************/
.Section_header {
    min-height: 42px;
    padding-bottom: 8px;
}

.tablet .Section_header,
.phone .Section_header {
    min-height: 48px;
}

/* SectionExpandable ******************************/
.SectionExpandable {
    background-color: transparent;
    border-radius: 4px;
    padding: 12px 12px 0 12px;
}

.SectionExpandable_header {
    border-bottom: 0;
    margin-bottom: 5px;
}

.SectionExpandable__icon.Heading2 {
    width: 35px;
}

.SectionExpandable__title {
    border-right: 1px solid #ccc;
}

.SectionExpandable_content {
    border-radius: 0;
}

.SectionExpandable__icon.Heading2 > .fa {
    height: 22px;
    width: 22px;
    margin-right: 3px;

    background-color: transparent;
    color: #00838f;
    font-size: 26px;
    border: none;
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: #9ebdd0;
    border: 1px solid #9ebdd0;
    border-radius: 22px;
    color: #fff;
    height: 22px;
    margin-right: 10px;
    width: 22px;
}

div.Timeline-SectionExpandable:not(.expanded) .SectionExpandable_content {
    height: 0;
    overflow: hidden;
    visibility: visible;
}

/*  Panel -> SectionExpandable ******************************/
.Panel .SectionExpandable {
    background-color: transparent;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
}

.Panel .SectionExpandable_header {
    border-bottom: 0;
    margin-bottom: 5px;
}

.Panel .SectionExpandable__icon.Heading2 {
    width: 35px;
}

.Panel .SectionExpandable__title {
    border-right: 1px solid #ccc;
}

.Panel .SectionExpandable_content {
    border-radius: 0;
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    background-color: transparent;
    border: 1px solid #9ebdd0;
    border-radius: 22px;
    color: #48687c;
    height: 22px;
    line-height: 1.3;
    margin-right: 3px;
    width: 22px;
}

.Panel .expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: #9ebdd0;
    border: 1px solid #9ebdd0;
    border-radius: 22px;
    color: #fff;
    height: 22px;
    line-height: 1.3;
    margin-right: 10px;
    width: 22px;
}

/* Separator ******************************/
.Separator {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #dfdfdf;
    margin: 20px 0;
}

/* Tooltipster ******************************/
.tooltipster-base {
    z-index: 100;
}

.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom-right span,
.tooltipster-arrow-bottom-left span {
    border-bottom: 8px solid;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    top: -7px;
}

.tooltipster-content .input-row-left {
    width: 24px;
    text-align: center;
}

.tooltipster-content .input-row .material-icons {
    line-height: 1;
}

/* Gallery ******************************/

.Gallery .GalleryWrapper {
    margin-left: -20px;
}

.tablet .GalleryWrapper {
    margin-left: -10px;
}

.phone .GalleryWrapper {
    margin-left: 0;
}

.Gallery .GalleryItem {
    margin-bottom: 20px;
    padding-left: 20px;
}

.tablet .Gallery .GalleryItem {
    margin-bottom: 10px;
    padding-left: 10px;
}

.phone .Gallery .GalleryItem {
    width: 100%;
    padding: 0;
}

/* .phone .Gallery .GalleryItem:not(:first-child) {
  margin-left: 10px;
} */

/* VERTICAL TIMELINE **************************************************************************************************************************/

/* -------------------------------- 
      Modules - reusable parts of our design
      -------------------------------- */

.VerticalTimeline-container {
    margin: 0 auto;
    width: 100%;
}

.VerticalTimeline-container::after {
    clear: both;
    content: "";
    display: table;
}

/* -------------------------------- 

      Main components 

      -------------------------------- */

.VerticalTimeline {
    margin-bottom: 2em;
    margin-top: 0;
    padding: 10px 0;
    position: relative;
}

.VerticalTimeline::before {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 1px;
    left: 27px;

    background-color: #cfd8dc;
}

.VerticalTimeline-block {
    margin: 2em 0;
    position: relative;
}

.VerticalTimeline-block:after {
    clear: both;
    content: "";
    display: table;
}

.VerticalTimeline-block:first-child {
    margin-top: 0;
}

.VerticalTimeline-block:last-child {
    margin-bottom: 0;
}

.VerticalTimeline-icon {
    height: 34px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
}

.VerticalTimeline-icon i.icon,
.VerticalTimeline-icon i.icon:before {
    line-height: 1.6;
}

.VerticalTimeline-img {
    position: relative;
    top: 8px;
    left: 11px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    background-color: #fcfcfc;

    
}

.VerticalTimeline-description {
    width: 180px;
    padding: 0 10px;
    background-color: #fcfcfc;
    text-align: left;
}

.VerticalTimeline-content {
    position: relative;
    margin-left: 53px;
    padding: 10px;
    padding-right: 35px;
    background: #fff;
    border-radius: 0.25em;
    border: 1px solid #cfd8dc;
}

.VerticalTimeline-content:after {
    clear: both;
    content: "";
    display: table;
}

.Timeline-SectionExpandable,
.Timeline-container {
    position: relative;
}

.Timeline-container {
    margin: 0 -30px;
}

.Timeline-container:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 67px;
    width: 1px;
    height: calc(100% - 20px);

    background-color: #cfd8dc;
}

.Timeline-container .Timeline-SectionExpandable {
    margin-bottom: 20px;
    padding: 0;
}

.Timeline-container .Timeline-SectionExpandable .Timeline-SectionExpandable {
    margin-top: 30px;
}

.Timeline-SectionExpandable .SectionExpandable_header,
.Timeline-SectionExpandable.expanded .SectionExpandable_header {
    padding: 0;
    margin-bottom: 0;
    background-color: #f4f7fc;
}

.Timeline-SectionExpandable .SectionExpandable__title.Heading2 {
    padding: 12px 15px;
    font-weight: 400;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    text-align: left;
}

.Timeline-SectionExpandable.is-primary .SectionExpandable__title.Heading2 {
    padding-left: 35px;
}

.Timeline-SectionExpandable.is-primary .Timeline-SectionExpandable .SectionExpandable__title.Heading2 {
    padding-left: 15px;
}

.Timeline-SectionExpandable.is-primary > div > .SectionExpandable__title.Heading2 {
    font-weight: 500;
    border-color: #00acc1;
    background-color: #00acc1;
    color: #fff;
}

.Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon {
    position: absolute;
    top: 22px;
    right: 40px;
    height: 2px;
    width: 18px;
    background-color: #9eb0b8;
}

.Timeline-SectionExpandable.is-primary .SectionExpandable__icon.timeline-section-icon {
    right: 60px;
}

.Timeline-SectionExpandable .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon {
    right: 40px;
}

.Timeline-SectionExpandable > div > .SectionExpandable__icon.timeline-section-icon.is-primary,
.Timeline-SectionExpandable.is-primary > div > .SectionExpandable__icon.timeline-section-icon:before {
    background-color: #fff;
}

.Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon.is-primary:before,
.Timeline-SectionExpandable.is-primary .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon:before {
    content: "";
    position: absolute;
    top: -8px;
    right: 8px;
    height: 18px;
    width: 2px;
    background-color: #9eb0b8;
}

.Timeline-SectionExpandable.expanded .SectionExpandable__icon.timeline-section-icon.is-primary:before,
.Timeline-SectionExpandable .Timeline-SectionExpandable.expanded .SectionExpandable__icon.timeline-section-icon:before {
    content: none;
}

.Timeline-SectionExpandable .SectionExpandable_content,
.Timeline-SectionExpandable.expanded .SectionExpandable_content {
    padding: 0 20px;
}

@-webkit-keyframes VerticalTimeline-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes VerticalTimeline-bounce-1 {
    0% {
        opacity: 0;
        -moz-transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -moz-transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
    }
}
@keyframes VerticalTimeline-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes VerticalTimeline-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes VerticalTimeline-bounce-2 {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(20px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@keyframes VerticalTimeline-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes VerticalTimeline-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes VerticalTimeline-bounce-2-inverse {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(-20px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@keyframes VerticalTimeline-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

/* <= TABLET*/
@media only screen and (min-width: 420px) {
    .VerticalTimeline {
        padding: 1em 0;
    }

    .VerticalTimeline-icon {
        height: 40px;
        width: 40px;
    }

    .VerticalTimeline-content {
        margin-top: 5px;
        margin-left: 57px;
        padding: 1em;
    }

    .VerticalTimeline-img {
        left: 8px;
    }

    .VerticalTimeline-description {
        padding: 10px 10px 0;
    }

    .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon {
        top: 28px;
        right: 40px;
    }

    .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon.is-primary:before,
    .Timeline-SectionExpandable.is-primary .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon:before {
        top: -8px;
        right: 8px;
    }

    .Timeline-container {
        margin: 0;
    }

    .Timeline-container::before {
        left: 27px;
    }

    .Timeline-container .Timeline-SectionExpandable {
        margin-bottom: 30px;
    }

    .Timeline-SectionExpandable .SectionExpandable_content,
    .Timeline-SectionExpandable.expanded .SectionExpandable_content {
        padding: 0;
    }
}
/* <= DESKTOP SMALL*/
@media only screen and (min-width: 1024px) {
    .VerticalTimeline {
        margin-bottom: 3em;
        margin-top: 0;
    }

    .VerticalTimeline::before {
        left: 50%;
        margin-left: -2px;
    }

    .VerticalTimeline-description {
        text-align: center;
        transform: translateX(-60px);
    }
    .VerticalTimeline-content {
        width: 38%;
        margin-left: 0;
        padding: 20px;
    }

    .VerticalTimeline-icon {
        height: 63px;
        width: 63px;
        border: 4px solid;
    }

    .VerticalTimeline-icon .icon.material-icons {
        font-size: 36px;
        line-height: 1.6;
    }

    .Timeline-SectionExpandable .SectionExpandable__title.Heading2 {
        padding: 10px;
        text-align: center;
    }

    .VerticalTimeline-content::before {
        content: "";
        height: 15px;
        width: 15px;
        position: absolute;
        right: 100%;
        left: -9px;
        top: 16px;
        background-color: #fff;
        border-right: 1px solid white;
        border-top: 1px solid;
        border-color: #cfd8dc;
        transform: rotate(225deg);
    }

    .VerticalTimeline-content::before {
        top: 24px;
        right: -9px;
        left: auto;
        border-color: #cfd8dc;
        border-left-color: white;
        transform: rotate(45deg);
    }

    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content {
        float: right;
    }
    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content::before {
        border-bottom-color: #cfd8dc;
        left: -9px;
        right: 100%;
        top: 24px;
        transform: rotate(225deg);
    }

    .VerticalTimeline-block {
        margin: 4em 0;
    }
    .VerticalTimeline-block:first-child {
        margin-top: 0;
    }
    .VerticalTimeline-block:last-child {
        margin-bottom: 0;
    }

    .VerticalTimeline-img {
        position: absolute;
        top: -9px;
        left: 50%;
        display: block;
        margin-left: -32px;
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }

    .Timeline-container:before {
        left: 50%;
        margin-left: -2px;
    }

    .cssanimations .VerticalTimeline-content.is-hidden {
        visibility: hidden;
    }
    .cssanimations .VerticalTimeline-content.bounce-in {
        -webkit-animation: VerticalTimeline-bounce-2 0.6s;
        -moz-animation: VerticalTimeline-bounce-2 0.6s;
        animation: VerticalTimeline-bounce-2 0.6s;
        visibility: visible;
    }
    /* inverse bounce effect on even content blocks */
    .cssanimations .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content.bounce-in {
        -webkit-animation: VerticalTimeline-bounce-2-inverse 0.6s;
        -moz-animation: VerticalTimeline-bounce-2-inverse 0.6s;
        animation: VerticalTimeline-bounce-2-inverse 0.6s;
    }
    .cssanimations .VerticalTimeline-img.is-hidden {
        visibility: hidden;
    }
    .cssanimations .VerticalTimeline-img.bounce-in {
        -webkit-animation: VerticalTimeline-bounce-1 0.6s;
        -moz-animation: VerticalTimeline-bounce-1 0.6s;
        animation: VerticalTimeline-bounce-1 0.6s;
        visibility: visible;
    }
}

/* < DESKTOP */
@media only screen and (min-width: 1600px) {
    .VerticalTimeline-content {
        width: 360px;
        margin-left: 5%;
    }

    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content {
        margin-right: 5%;
    }
}

/*------------------------------------*\
              $2.2 Patterns > Controls
      \*------------------------------------*/

/* ButtonGroup ******************************/

.ButtonGroup {
    padding: 2px;
    display: flex;
    outline: none;
    border-radius: 4px;
    background-color: #f4f7fc;
}

.ButtonGroup_button.Button {
    height: 34px;
    min-width: 100px;
    margin: 0;
    flex: 1;
    line-height: 34px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    background-color: #f4f7fc;
    color: #52646c;
}

.ButtonGroup_button.Button.active,
.ButtonGroup_button.Button.active:hover {
    background: #52646c;
    color: #fff;
}

.ButtonGroup_button.Button:hover {
    background: #cfd8dc;
}

.phone .ButtonGroup_button.Button {
    height: 24px;
    font-size: 12px;
    font-weight: 500;
}

.phone .ButtonGroup_button.Button:last-child {
    border-radius: inherit;
}

.phone .ButtonGroup_button.Button:first-child {
    border-radius: inherit;
}
.phone :not(.NoResponsive) > .ButtonGroup .ButtonGroup_button.Button,
.phone .ButtonGroup_button.Button.active {
    border: none;
}

/* Calendar **************************/
.pika-table th {
    border-bottom: 0;
}

.pika-prev:after,
.pika-next:after {
    top: 37%;
}

.pika-prev,
.pika-next {
    height: 48px;
}

.pika-title {
    border-bottom: 2px solid #d7a909;
}

.is-selected .pika-button {
    background-color: #48687c;
}

.has-event .pika-button:after {
    background-color: #48687c;
}

.pika-lendar .Calendar-navBtn {
    height: 48px;
}

.has-event .pika-button:after {
    bottom: 7px;
    left: 22px;
    margin-left: 0;
}

/* Calendar DEPRECATED **************************/
.Calendar-dayNames {
    border-bottom: 0;
    border-top: 2px solid #d7a909;
}

.Calendar-navBtn > div {
    color: #d7a909;
}

.Calendar-day-selected,
.Calendar-day-selected:hover {
    background: #48687c;
    color: #fff;
}

.Calendar-time-down,
.Calendar-time-up,
.Calendar-time-am {
    color: #d7a909;
}

/* Dropdown ******************************/
.DropdownMenu .PH > a {
    color: #999;
    font-weight: 400;
}

.DropdownMenu .PH > a:hover {
    color: #999;
}

/* Dropdown: ButtonDropdown ******************************/
.ButtonDropdown .ButtonDropdown_text {
    padding-right: 8px;
}

.ButtonDropdown .ButtonDropdown_icon > .fa {
    border-left: 1px solid #ccc;
    padding-left: 8px;
}

/* InputWithIcons **************************/
.InputWithIcons.Right .InputIcon {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.InputWithIcons .InputIcon {
    height: 38px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

/* Select2 ******************************/

.select2-search:after {
    color: #273136;
    content: "\f002";
    font-size: 17px;
    font-family: FontAwesome;
    right: 15px;
    position: absolute;
    top: 14px;
}

.select2-search input[type="text"] {
    margin-top: 4px;
    padding-right: 35px;
    background: transparent;
}

.select2-search .FormEditPencil {
    display: none;
}

.select2-container-open .select2-choice .select2-arrow b,
.select2-dropdown-open .select2-choice div b {
    background-position: -18px 4px;
}

a.select2-container .select2-choice,
.select2-container .select2-choice {
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    color: #273136;
    height: 40px;
    line-height: 40px;
}

.select2-container .select2-choice span {
    font-weight: 400;
    line-height: 30px;
}

.select2-container .select2-choice .select2-arrow,
.select2-container .select2-choice div {
    background: transparent;
    border-left: 0;
    border-radius: 0;
}

.select2-container .select2-choice .select2-arrow b,
.select2-container .select2-choice div b {
    background: none;
    display: inline-block;
    font-family: FontAwesome;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.select2-container .select2-choice .select2-arrow b:after,
.select2-container .select2-choice div b:after {
    content: "\f0d7";
}

.select2-container-active.select2-dropdown-open .select2-choice {
    border-bottom: 2px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    box-shadow: none;
}

.select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid #999;
}

.select2-container-multi .select2-choices {
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    overflow: hidden !important;
    height: auto !important;
}

.select2-container .select2-choice > .select2-chosen {
    display: inline;
}

/* ToggleButton ******************************/
.ToggleButton {
    background-color: #dcddde;
    border-color: rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    height: 32px;
}

.ToggleButton_label:after {
    border-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
    height: 18px;
    width: 20px;
}

.ToggleButton_label.changed:after {
    border-radius: 10px;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
    height: 18px;
    left: 24px;
    width: 20px;
}

.ToggleButton.changed {
    background-color: #82b660;
    border-color: rgba(0, 0, 0, 0.05);
}

/*------------------------------------*\
              $2.3 Patterns > Data
      \*------------------------------------*/

/* Badges ******************************/
.Badge {
    border: 1px solid #fff;
}

/* Counter ******************************/
.Counter {
    border-radius: 3px;
}

/* IconBadge ******************************/
.IconBadge_number {
    background-color: #f1c40f;
}

/* ProgressBar ******************************/
.Progress {
    border-radius: 4px;
    height: 18px;
}

.Progress span {
    top: -2px;
}

.Progress_bar {
    background-image: -webkit-linear-gradient(
        bottom left,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: -moz-linear-gradient(
        bottom left,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: -o-linear-gradient(
        bottom left,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        to top left,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

/* Tiles ******************************/
.Tile {
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}

a .Tile:hover {
    box-shadow: none;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

.TileIcon_text,
.TileNumber_text,
.TileIconText_label {
    font-weight: 400;
    text-transform: uppercase;
}

.TileIconText_label.Heading2 {
    color: inherit;
    font-size: 16px;
    text-align: left;
}

.TilleIconText_text {
    text-align: left;
}

/* Search ******************************/

.Search_wrapper input[type="text"] {
    padding-left: 40px;
}

.Search_wrapper:after {
    color: #273136;
    content: "\f002";
    font-size: 17px;
    left: 15px;
    position: absolute;
    top: 9px;
}

/*------------------------------------*\
              $2.7. Patterns > Mobile
      \*------------------------------------*/

/* ListItem ******************************/
a:hover > .ListItem {
    background-color: #f0f0f0;
}

a > .ListItem.active,
a:active > .ListItem {
    background-color: #f0f0f0;
}

/* ListItemGroup ******************************/
.ListItemGroup {
    background-color: #fff;
    border-radius: 4px;
}

.ListItemGroup a:first-child:hover .ListItem {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ListItemGroup a:last-child:hover .ListItem {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*------------------------------------*\
              $2.8 Patterns > Navigation
      \*------------------------------------*/

/* NavigationBar: Horizontal ******************************/
.NavigationBar a,
.NavigationBar a:link,
.NavigationBar a:visited {
    color: #c7c7c7;
}

.desktop .NavigationBar a:hover {
    text-decoration: none;
}

.desktop .NavigationBar a:hover,
.desktop .NavigationBar a:link:hover {
    color: #3e5154;
}

.NavigationBar a.Active {
    color: #3e5154;
}

.desktop .NavigationBar a:hover:after,
.desktop .NavigationBar a:link:hover:after,
.NavigationBar a.Active:after {
    background-color: #d7a909;
}

.NavigationBar a.Active:not(.IE8):before {
    border-bottom: 4px solid #d7a909;
}

/* NavigationBar: Vertical ******************************/
.desktop .NavigationBar.Vertical a:hover,
.desktop .NavigationBar.Vertical a:link:hover,
.NavigationBar.Vertical a.Active,
.NavigationBar.Vertical a:link.Active {
    border-color: #d7a909;
}

.NavigationBar.Vertical a.Active:not(.IE8):before {
    border-left: 4px solid #d7a909;
}

.phone .NavigationBar .InlineDropdown:active,
.phone .NavigationBar .InlineDropdown:link:active,
.tablet .NavigationBar .InlineDropdown:active,
.tablet .NavigationBar .InlineDropdown:link:active,
.phone .NavigationBar a:active,
.phone .NavigationBar a:link:active,
.tablet .NavigationBar a:active,
.tablet .NavigationBar a:link:active {
    color: #3e5154;
}

.phone .NavigationBar .InlineDropdown:active:after,
.phone .NavigationBar .InlineDropdown:link:active:after,
.tablet .NavigationBar .InlineDropdown:active:after,
.tablet .NavigationBar .InlineDropdown:link:active:after,
.phone .NavigationBar a:active:after,
.phone .NavigationBar a:link:active:after,
.tablet .NavigationBar a:active:after,
.tablet .NavigationBar a:link:active:after {
    background-color: #d7a909;
}

/* TabsClient ******************************/

.Tabs {
    border: 0;
}

.Tabs__tab {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: #52646c;
    flex: 1;
    font-weight: 400;
    border: none;
    border-bottom: 2px solid #00acc1;
    padding: 8px 12px;
}

.phone .Tabs__tab {
    padding: 8px 10px;
    font-size: 15px;
    white-space: normal;
}

.desktop .Tabs_header,
.tablet .Tabs_header,
.Tabs_header {
    height: 45px;
    display: flex;
    background-color: transparent;
    line-height: initial;
}

.phone .Tabs_header {
    line-height: initial;
    display: flex;
}

.Tabs_body {
    background-color: transparent;
    z-index: unset;
}

.Tabs__tab.active {
    background-color: #f4f7fc;
    border-bottom: 4px solid #00acc1;
    font-weight: 500;
    color: #37474f;
}

.Tabs .PH:empty {
    display: none;
}

.Tabs__Loading {
    display: none !important;
}

.phone .tabs-large .Tabs_header {
    height: 56px;
}

/* Wizard ******************************/

.WizardStep.Past,
.WizardStep.ActiveStep {
    background: transparent;
    border-bottom: 4px solid #00acc1;
}

.WizardParent {
    margin-bottom: 30px;
    display: flex;
    background: transparent;
    border: none;
}

.phone .WizardParent {
    display: none;
}

.WizardStep {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    line-height: 1.5;
    background-color: transparent;
    border-bottom: 1px solid #52646c;
}

.WizardStep:before {
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 20px solid transparent;
}

.WizardStep.ActiveStep:after,
.WizardStep:after {
    height: 8px;
    width: 8px;
    position: absolute;
    right: 8px;
    top: 21px;
    content: "";
    border-right: 2px solid #e2e2e2;
    border-top: 2px solid #e2e2e2;
}

.WizardStep.Past:after {
    border-color: #00acc1;
}

.WizardStep.ActiveStep,
.WizardStep.ActiveStep a,
.WizardStep.ActiveStep a:link {
    font-weight: 400;
    color: #37474f;
}

.WizardStep.Past,
.WizardStep.Past a,
.WizardStep.Past a:link {
    position: relative;
    color: #273136;
}

.WizardStep a,
.WizardStep a:link {
    text-decoration: none;
}
.WizardStep,
.WizardStep a,
.WizardStep a:link,
.WizardStep a[disabled="disabled"],
.WizardStep a[disabled="disabled"]:hover {
    font-size: 18px;
    font-weight: 400;
    color: #52646c;
}

.tablet .WizardStep,
.tablet .WizardStep a,
.tablet .WizardStep a:link,
.tablet .WizardStep a[disabled="disabled"],
.tablet .WizardStep a[disabled="disabled"]:hover {
    font-size: 15px;
}

.WizardStep.Past .step {
    position: relative;
}

.WizardStep.Past:before {
    content: none;
}

.WizardStep.ActiveStep:before {
    content: none;
}

.WizardStep:last-child:after {
    content: none;
}

.WizardStep > div {
    display: flex;
}

.WizardStep > div .icon {
    font-size: 22px !important;
}

/*------------------------------------*\
            $3 Usefull Classes
      \*------------------------------------*/

a,
a:link,
a:visited,
.EditableTable tr.RowControlGroup a {
    color: #00838f;
}

a:hover {
    text-decoration: underline;
}

/* Buttons ******************************/

a.Button,
.Button,
.fileupload-btn.fileupload-upload-button {
    height: 40px;
    min-width: 150px;
    padding: 0 30px;
    margin-left: 0;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    float: unset;
    border-radius: 40px;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
    color: #37474f;
    border: 2.5px solid #52646c;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

a.Button i.icon,
a.Button i.icon:before,
.Button i.icon,
.Button i.icon:before {
    margin-right: 5px;
    font-size: 18px;
}

.tablet a.Button,
.tablet .Button,
.phone a.Button,
.phone .Button {
    line-height: 1;
}

.phone a.Button,
.phone .Button {
    height: 34px;
    min-width: 114px;
    padding: 0 20px;
    font-size: 14px;
    border-width: 2.5px;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

/* input.Button {
          line-height: 30px;
      } */

.desktop button:hover,
.desktop a.Button:hover {
    background-color: #52646c;
    color: #fff;
}

.desktop button:active,
.desktop a.Button:active {
    background-color: #006875;
    color: #fff;
}

button:disabled,
a.Button:disabled {
    color: #52646c;
    border: 2px solid #52646c;
}

/* Button Tertiary ******************************/
.Button.Tertiary,
.fileupload-btn.fileupload-upload-button {
    border: 2.5px solid #26c6da;
    background-color: transparent;
}

.desktop .Button.Tertiary:hover,
.desktop .fileupload-btn.fileupload-upload-button:hover {
    background-color: #0092a6;
    border: 2.5px solid #0092a6;
    color: #fff;
}

.desktop .Button.Tertiary:active,
.desktop .fileupload-btn.fileupload-upload-button:active {
    background-color: #006875;
    border: 2.5px solid #006875;
    color: #fff;
}

.desktop .Button.Tertiary:disabled,
.desktop .fileupload-btn.fileupload-upload-button:disabled {
    border: 2.5px solid #d4d4d4;
    color: #d4d4d4;
}

/* Default Action Button ******************************/
.Button.ButtonDefault,
.Button.Is_Default {
    background-color: #26c6da;
    color: #fff;
    border: 2.5px solid transparent;
}

.desktop .Button.ButtonDefault:hover,
.desktop .Button.Is_Default:hover {
    background-color: #0092a6;
    border: 2.5px solid #0092a6;
}

a.Button:active,
.ButtonDropdown_button.Button:active {
    background-color: #00838f;
}

a.Button:disabled,
.ButtonDropdown_button.Button:disabled {
    background-color: #88bdc2;
}

/* Appointment Action ******************************/
.Button.Appointment {
    background-color: #ffb300;
    border: 2.5px solid #ffb300;
    box-shadow: none;
    color: #37474f;
}

.desktop .Button.Appointment:hover,
.desktop .Button.Appointment:active {
    background-color: #ff9800;
    border-color: #ff9800;
}

/* Appointment Secondary Action ******************************/
.Button.Appointment-Secondary {
    background-color: transparent;
    border: 2.5px solid #ffb300;
    box-shadow: none;
    color: #37474f;
}

.desktop .Button.Appointment-Secondary:hover,
.desktop .Button.Appointment-Secondary:active {
    background-color: #ff9800;
    border-color: #ff9800;
}

/* Link Button ******************************/
.Button.Link {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    box-shadow: none;
    color: #48687c;
}

.desktop .Button.Link:hover {
    background-color: transparent;
    border: 1px solid #69899d;
    color: #69899d;
}

.Button.Loading {
    white-space: nowrap;
}

.Button.Loading:before,
.Button.Loading[disabled]:before,
.Button.Loading:disabled:before {
    background-image: url(/WebPatterns/img/loadingdublin02.GIF?22901);
}

.Button.Is_Default.Loading:before,
.Button.Is_Default.Loading[disabled]:before,
.Button.Is_Default.Loading:disabled:before,
.Button.ButtonDefault.Loading:before,
.Button.ButtonDefault.Loading[disabled]:before,
.Button.ButtonDefault.Loading:disabled:before {
    background-image: url(/WebPatterns/img/loadingdublin01.GIF?22901);
}

/* Submit Button ******************************/

.Button.Submit {
    margin-top: 30px;
}

.tablet .Button.Submit {
    margin-top: 30px;
}

.phone .Button.Submit {
    margin-top: 20px;
}

.Button.Small {
    font-size: 11px;
    height: 26px;
    line-height: 24px;
    min-width: 60px;
    padding-left: 10px;
    padding-right: 10px;
}

.Button.Block {
    display: flex;
    width: 100%;
}

.Button.Icon {
    min-width: 0;
}

.Button.Icon span.fa {
    margin-left: 0;
}

/* Button AddNew (Registos) ******************************/

.Button.AddNew,
.tablet .Button.AddNew,
.phone .Button.AddNew {
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 5px;
    text-transform: uppercase;
    color: #37474f;
    height: 47px;
    font-weight: bold;
}

.desktop a.Button.AddNew:hover,
.tablet a.Button.AddNew:hover,
.phone a.Button.AddNew:hover,
.Button.AddNew:hover {
    background-color: #e1e9f4;
    border: 1px solid #cfd8dc;
    border-radius: 5px;
    text-transform: uppercase;
    color: #37474f;
    height: 47px;
    font-weight: bold;
}

.Button.AddNew span.fa-fw.fa-plus,
.fa-fw.fa-plus,
.fa-fw.fa-plus-circle {
    border: 2px solid #26c6da;
    border-radius: 30px;
    padding: 6px;
    height: 31px;
    width: 31px;
    color: #37474f;
    margin-right: 10px;
    vertical-align: bottom;
}

.Button.AddNew span.fa-fw.fa-plus {
    padding: 7px;
}

.Button.AddNew span.fa-fw.fa-plus:before {
    line-height: 14px;
    display: block;
    margin-left: 1px;
}

/* Buttons Area ******************************/

.edge .Buttons_Right,
.ie .Buttons_Right {
    display: flex;
    justify-content: flex-end;
}

/* Colors: Background and Text ******************************/
.background-white {
    background-color: #fff;
}

.background-transparent {
    background-color: transparent !important;
}

.background-color-grey-6 {
    background-color: #f4f7fc !important;
}

.background-color-grey-10 {
    background-color: #f0f5fc !important;
}

.color-white {
    color: #fff;
}

.color-light-green {
    color: #c1c000 !important;
}

.color-orange {
    color: #f9a109 !important;
}

.Red {
    background-color: #cd6a5d;
}

.Text_red {
    color: #cd6a5d;
}

.Green {
    background-color: #73a354;
}

.Text_green {
    color: #73a354;
}

.Blue {
    background-color: #5080b6;
}

.Text_blue {
    color: #5080b6;
}

.DarkBlue {
    background-color: #30495a;
}

.Text_darkblue {
    color: #30495a;
}

.Silver {
    background-color: #dcddde;
}

.Text_silver {
    color: #dcddde;
}

.Gray {
    background-color: #7f8c8d;
}

.Text_gray {
    color: #7f8c8d;
}

.Black {
    background-color: #292929;
}

.Text_black {
    color: #292929;
}

/* Text Classes ******************************/
h1,
.Heading1,
h2,
.Heading2,
h3,
.Heading3,
h4,
.Heading4 {
    margin: 0 0 10px;
    color: #273136;
    font-weight: 300;
}

.phone h1,
.phone .Heading1,
.phone h2,
.phone .Heading2,
.phone h3,
.phone .Heading3,
.phone h4,
.phone .Heading4 {
    margin: 0 0 5px;
    font-weight: 500;
}

h1,
.Heading1 {
    font-size: 50px;
    line-height: 52px;
}

.phone h1,
.phone .Heading1 {
    font-size: 24px;
    line-height: 26px;
}

h2,
.Heading2 {
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
}

.phone h2,
.phone .Heading2 {
    font-size: 18px;
    line-height: 23px;
}

h3,
.Heading3 {
    font-size: 26px;
    line-height: 33px;
    font-weight: 500;
}

.phone h3,
.phone .Heading3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

h4,
.Heading4 {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}

.phone h4,
.phone .Heading4 {
    font-size: 15px;
    line-height: 21px;
}

span.Heading1,
span.Heading2,
span.Heading3,
span.Heading4,
span.lead-normal,
span.lead-strong {
    display: block;
}

.lead-normal {
    margin-bottom: 10px;
    font-size: 20px;
    color: #52646c;
}

.lead-strong {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: #52646c;
}

.phone .lead-normal,
.phone .lead-strong {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 24px;
}

.notes-text,
.lead-message-text {
    color: #52646c;
}

.notes-text,
a.lead-message-text,
.lead-message-text {
    font-size: 14px;
    line-height: 21px;
}

.phone .notes-text,
a.lead-message-text,
.lead-message-text {
    font-size: 13px;
}

a.rich-text,
.rich-text {
    font-size: 16px;
    line-height: 26px;
    color: #52646c;
}

.phone a.rich-text,
.phone .rich-text {
    font-size: 15px;
    line-height: 21px;
}

.Thin {
    font-weight: 300 !important;
}

.Regular {
    font-weight: 400 !important;
}

.Medium {
    font-weight: 500 !important;
}

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

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

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

/* OS PopUps ******************************/
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #253b4a;
}

.os-internal-ui-widget-overlay {
    background-color: rgba(96, 125, 139, 0.5) !important;
    opacity: 1 !important;
}

/* RichWidget Tabs*/

.tablet .Tabs_TabOff,
.tablet li.Tabs_TabOff,
.phone .Tabs_TabOff,
.phone li.Tabs_TabOff {
    width: 32px;
}

/*------------------------------------*\
              $1. General Properties
      \*-------------------------------------*/

html,
body {
    background-color: #fff;
    color: #273136;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body,
form,
.Page {
    height: 100%;
}

/* a links **************************/

a {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a[disabled="disabled"],
a[disabled="disabled"]:hover {
    color: #ccc;
    text-decoration: none;
}

div[onclick] {
    cursor: pointer; /* add a pointer cursor when the div has a click event */
}

.OSAutoMarginTop {
    margin-top: 20px;
}

a.link-no-style {
    font-weight: inherit;
    font-size: inherit;
}

a.link-no-style:hover {
    text-decoration: none;
}

/*------------------------------------*\
              $2. Structure
      \*-------------------------------------*/

html .ThemeGrid_Container {
    position: relative;
    min-height: calc(100vh - 90px);
    min-width: 320px;
    width: auto;
    margin: 0 auto;
    padding: 0;
    background-color: #fff;
}

/* header **************************/
.Header {
    background: linear-gradient(to right, rgba(0, 151, 167, 1) 0%, rgba(38, 198, 218, 1) 100%);
    border-bottom: 1px solid #bbb;
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.24);
    color: #fff;
    display: table;
    height: 50px;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;

    
}

.tablet .Header {
    display: flex;
}

.phone .Header {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: left 300ms ease;
    transition: left 300ms ease;
}

/* button **************************/
.Header .Button.Header_buttonMenu {
    display: none;
    font-size: 20px;
    height: 36px;
    line-height: 24px;
    padding: 5px;
    position: absolute;
    top: 10px;
    width: 38px;
    z-index: 99;
}

.tablet .Header .Button.Header_buttonMenu,
.phone .Header .Button.Header_buttonMenu {
    display: block;
    left: 5px;
    border-radius: 0;
    border: none;
    background-color: transparent;
    color: white;
    font-weight: 400;
}

.Header .Balloon_content {
    display: none;
}

.Balloon_content {
    padding: 17px 19px 15px;
}

/* Application title **************************/
.Header_title {
    height: 100%;
    padding-left: 30px;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    line-height: 54px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    z-index: 2;
}

.tablet .Header_title {
    padding-left: 0;
    margin: 0 auto;
    position: relative;
}

.tablet .Header_title a {
    text-align: center;
}

.Application_Title img {
    height: 25px;
}

.tablet .Application_Title,
.phone .Application_Title {
    display: none;
}

/* Responsive Context **************************/

.Page.phone.MenuOpen .Header,
.Page.phone.MenuOpen .Content.ThemeGrid_Wrapper {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.phone .Header_title {
    left: 20px;
    border-right: none;
}

.phone .Header_title {
    margin-left: 40px;
}

.Header_title a {
    color: #2c4150;
    font-size: 25px;
    font-weight: 300;
}

.Header_title a img {
    vertical-align: middle;
}

.Header_title a,
.Header_title a:link,
.Header_title a:visited,
.Header_title a:hover {
    text-decoration: none;
}

/* application search **************************/
.Header_search {
    display: block;
    text-align: center;
    font-size: 22px;
    margin-top: 14px;
    min-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    position: fixed;
    vertical-align: middle;
    width: 100%;

    
    
    
    
}

.Header_search img {
    height: 24px;
}

/* application user **************************/
.Header_user {
    display: flex;
    align-items: center;
    height: 50px;
    padding-right: 20px;
    position: absolute;
    right: 0;
}

.Header__activity {
    margin-left: auto;
    color: #48687c;
    display: inline-block;
    vertical-align: middle;
}

.firefox .Header__activity {
    height: 50px;
    text-align: right;
}

.phone .Header__activity {
    display: none;
}

.Header__loginInfo a,
.Header__loginInfo {
    display: flex;
    color: #fff;
    font-weight: 400;
}

.tablet .Header__loginInfo a,
.tablet .Header__loginInfo,
.phone .Header__loginInfo a,
.phone .Header__loginInfo {
    color: #273136;
}

.tablet .Header__loginInfo,
.phone .Header__loginInfo {
    margin-top: 60px;
}

.tablet .Header__loginInfo,
.phone .Header__loginInfo {
    padding: 10px 20px;
}

/* login info web block **************************/

/* Login Info **************************/

.Login_Info {
    margin: 30px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.desktop .Login_Info {
    height: 114px;
}

.tablet .Login_Info {
    margin-top: 70px;
}

.phone .Login_Info {
    margin: 0;
    padding: 12px 15px;
    flex-direction: row;
    background: linear-gradient(to right, rgba(0, 151, 167, 1) 0%, rgba(38, 198, 218, 1) 100%);
}

.LoginInfo_image {
    height: 72px;
    width: 72px;
    margin-bottom: 10px;
    /* border: 3px solid #fff; */
    border-radius: 50%;
    /* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); */
    /* background-image: url("/PC_TH/img/default_user.png");*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: height 0.3s, width 0.3s ease;
}

.LoginInfo_image .UserInitials.Large {
    height: 72px;
    width: 72px;
    transition: height 0.3s, width 0.3s ease;
}

.LoginInfo_image .UserInitials.Large span {
    font-size: 30px;
    font-weight: 500;
    line-height: 2.5em;
    transition: all 0.3s;
}

.desktop.small .LoginInfo_image,
.desktop.small .LoginInfo_image .UserInitials.Large {
    height: 32px;
    width: 32px;
}

.desktop.small .LoginInfo_image .UserInitials.Large span {
    font-size: 15px;
    font-weight: 400;
    line-height: 2.2em;
}

.desktop.small .Menu:hover .LoginInfo_image,
.desktop.small .Menu:hover .LoginInfo_image .UserInitials.Large {
    height: 72px;
    width: 72px;
}

.desktop.small .Menu:hover .LoginInfo_image .UserInitials.Large span {
    font-size: 30px;
    font-weight: 500;
    line-height: 2.5em;
}

.phone .LoginInfo_image {
    height: 40px;
    width: 40px;
    margin-right: 10px;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

.phone .LoginInfo_image .UserInitials.Large {
    height: 40px;
    width: 40px;
}

.phone .LoginInfo_image .UserInitials.Large span {
    font-size: 16px;
    font-weight: 500;
    line-height: 2.7em;
}

.LoginInfo {
    color: #2d2b31;
    font-size: 14px;
    margin-top: 14px;
    text-align: right;
}

.LoginInfo_username {
    display: flex;
    align-items: center;
    line-height: 22px;
}

.phone .LoginInfo_username {
    color: #fff;
}

.LoginInfo_username-name {
    color: #273136;
    text-align: center;
    line-height: 1.4;
}

.desktop .LoginInfo_username-name {
    padding: 0 8px;
    margin-bottom: 10px;
}

.desktop.small .user-panel,
.desktop.small .LoginInfo_username-name {
    visibility: hidden;
    opacity: 0;
}

.desktop.small .Menu:hover .user-panel,
.desktop.small .Menu:hover .LoginInfo_username-name {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.3s, opacity 0.3s linear;
    transition-delay: 0.3s;
}

.phone .LoginInfo_username-name {
    font-size: 15px;
    color: #fff;
}

/* Menu **************************/
.Menu {
    background: -webkit-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
    background: -moz-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
    background: -ms-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
    background: -o-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
    background: linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
    bottom: 0;
    left: 0;
    position: fixed;
    top: 50px;
    width: 240px;
    z-index: 5;
    color: #52646c;

    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);

    
}

.desktop.small .Menu {
    width: 60px;
    transition: 0.3s ease-in-out width;
}

.desktop.small .Menu:hover {
    width: 240px;
}

.menu-link-label {
    margin-left: 15px;
    font-size: 14px;
    font-weight: 400;
    color: inherit;
    line-height: 32px;
}

.Menu_DropDownButton_Open .menu-link-label {
    margin-left: 13px;
}

.desktop.small .menu-link-label {
    opacity: 0;
    transition: 0.1s opacity;
}

.phone .menu-link-label {
    margin-left: 12px;
    line-height: 17px;
}

.desktop.small .Menu:hover .menu-link-label {
    opacity: 1;
    transition: 1s opacity;
}

@media (min-width: 1260px) and (max-width: 1366px) {
    .desktop.small .Menu {
        width: 240px;
    }

    .desktop.small .menu-link-label {
        opacity: 1;
    }

    .desktop.small .Menu .LoginInfo_image,
    .desktop.small .Menu .LoginInfo_image .UserInitials.Large {
        height: 72px;
        width: 72px;
    }

    .desktop.small .LoginInfo_image .UserInitials.Large span {
        font-size: 30px;
        font-weight: 500;
        line-height: 2.5em;
        transition: all 0.3s;
    }

    .desktop.small .user-panel,
    .desktop.small .LoginInfo_username-name {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.3s, opacity 0.3s linear;
        transition-delay: 0.3s;
    }

    .desktop.small .Menu_DropDownButton_Open {
        height: auto !important;
    }

    .desktop.small .Menu_DropDownButton_Open .Menu_DropDownPanel {
        display: block !important;
    }
}

.tablet .Menu,
.phone .Menu {
    height: 100%;
    left: -240px;
    overflow-x: hidden;
    top: 0;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: left 300ms ease;
    transition: left 300ms ease;
    width: 240px;
    -webkit-overflow-scrolling: touch;
}

.phone .Menu {
    left: -275px;
    width: 275px;
    z-index: 20;
}

.Page.tablet.MenuOpen .Menu,
.Page.phone.MenuOpen .Menu {
    left: 0;
}

/* login info  **************************/

.phone .Menu .LoginInfo {
    background-color: #355264;
    color: #fff;
    display: block;
    margin-top: 0;
    padding: 20px 20px 20px 25px;
    text-align: left;
    width: 240px;
}

.Application_Menu {
    position: relative;
    height: 100%;
    width: 100%;
}

.desktop.small .Application_Menu {
    margin-top: 0;
    height: calc(100% - 140px);
}

.Menu_TopMenus {
    margin-top: 10px;
    width: 100%;
}

.tablet .Menu_TopMenus,
.phone .Menu_TopMenus {
    margin-top: 0;
}

.phone .Menu_TopMenus {
    padding-bottom: 0;
}

.Menu_BottomMenus,
.Menu_ActionMenus {
    padding-bottom: 10px;
    border-top: 1px solid #cfd8dc;
}

.Menu_BottomMenus {
    padding: 10px 0;
}

.Menu_MiddleMenus {
    margin-bottom: 10px;
}

.tablet .Menu_MiddleMenus,
.tablet .Menu_BottomMenus,
.tablet .Menu_ActionMenus {
    margin-top: 0;
    padding: 10px 0;
}

.phone .Menu_MiddleMenus,
.phone .Menu_BottomMenus {
    margin-top: 0px;
}

.phone .Menu_MiddleMenus {
    padding: 0 0 5px;
    border: none;
}

.phone .Menu_BottomMenus {
    padding: 5px 0;
}

.Menu_ActionMenus {
    padding: 20px 30px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: none;
}

.desktop.small .Menu_ActionMenus {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
}

@media (min-width: 1260px) and (max-width: 1366px) {
    .desktop.small .Menu_ActionMenus {
        display: inline-block;
        visibility: visible;
        opacity: 1;
        transition: visibility 0.3s, opacity 0.3s linear;
        transition-delay: 0.3s;
    }
}

.desktop.small .Menu:hover .Menu_ActionMenus {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.3s, opacity 0.3s linear;
    transition-delay: 0.3s;
}

.tablet .Menu_ActionMenus {
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.phone .Menu_ActionMenus {
    margin-top: 10px;
    padding-bottom: 10px;
}

.phone .Menu_ActionMenus .Button {
    width: 100%;
}

.Menu_TopMenu {
    position: relative;
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    padding: 4px 7px 4px 30px;
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a,
.Menu_DropDownButton_Open .Menu_Item {
    color: #52646c;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
}

.Menu_TopMenu a:hover {
    background-color: rgba(0, 172, 193, 0.03);
}

.Menu_TopMenu.Menu_TopMenuActive a:hover {
    background-color: inherit;
}

.desktop.small .Menu_TopMenu a:link,
.desktop.small .Menu_TopMenu a:visited,
.desktop.small .Menu_TopMenu a,
.desktop.small .DropdownOpen .Menu_Item,
.tablet .Menu_TopMenu a:link,
.tablet .Menu_TopMenu a:visited,
.tablet .Menu_TopMenu a,
.tablet .DropdownOpen .Menu_Item {
    padding: 7px;
    padding-left: 20px;
    white-space: nowrap;
}

.phone .Menu_TopMenu a:link,
.phone .Menu_TopMenu a:visited,
.phone .Menu_TopMenu a,
.phone .Menu_TopMenu .Menu_DropDownButton_Open .Menu_Item {
    padding: 7px 18px;
    font-size: 14px;
}

.Menu_Sections {
    height: calc(100vh - 270px);
    padding: 10px 0 20px;
    border-top: 1px solid #cfd8dc;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* .ie .Menu_Sections {
    height: calc(100vh - 262px);
  } */

.phone .Menu_Sections {
    height: auto;
    border-top: none;
}

@media (min-height: 0px) and (max-height: 400px) {
    .Menu_Sections {
        height: auto;
    }
}

.Menu_Sections::-webkit-scrollbar {
    -webkit-appearance: none;
}

.Menu_Sections::-webkit-scrollbar:vertical {
    width: 6px;
}

.Menu_Sections::-webkit-scrollbar:horizontal {
    height: 6px;
}

.Menu_Sections::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, 0.5);
}

.Menu_DropDownArrow {
    display: none;
}

/* style icon font **************************/

.Menu_TopMenu a .icon,
.Menu_TopMenu a .icon.mdi:before,
.Menu_TopMenu a .icon.material-icons {
    font-size: 20px;
    color: inherit;
}

.Menu_TopMenu a span {
    margin-left: 15px;
    color: inherit;
}

.phone .Menu_TopMenu a span {
    margin-left: 12px;
}

/* show submenu if active **************************/
.Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty) {
    display: block;
}

.desktop.small .Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty),
.tablet .Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty) {
    display: none;
}

/* style icon on hover **************************/

.Menu_TopMenu .Badge {
    float: right;
    top: 6px;

    
    
    
    
}

.desktop.small .Menu_TopMenu .Badge,
.tablet .Menu_TopMenu .Badge {
    display: none;
}

.Menu_DropDownButton_Open,
.Menu_DropDownButton {
    display: block;
}

.Menu_DropDownButton {
    cursor: pointer;
}

.Menu_DropDownButton_Open .Menu_TopMenu,
.Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
    padding: 4px 7px 4px 29px;
}

.desktop.small .Menu_DropDownButton_Open .Menu_TopMenu,
.desktop.small .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder,
.phone .Menu_DropDownButton_Open .Menu_TopMenu,
.phone .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
    padding: 7px;
    padding-left: 18px;
}

.tablet .Menu_DropDownButton_Open .Menu_TopMenu,
.tablet .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
    padding: 7px;
    padding-left: 20px;
}

.MenuSlider_Toggler {
    color: #fff;
}

.Menu_DropDownPanel {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    display: none;
    list-style: none;
    margin: 0;
    position: relative;
}

.Menu_DropDownButton_Open .Menu_DropDownPanel {
    display: block;
    transition: display 1s;
}

.desktop.small .Menu .Menu_DropDownButton_Open {
    height: 40px;
}

.desktop.small .Menu .Menu_DropDownButton_Open .Menu_DropDownPanel {
    display: none;
}

.desktop.small .Menu:hover .Menu_DropDownButton_Open {
    height: auto;
}

.desktop.small .Menu:hover .Menu_DropDownButton_Open .Menu_DropDownPanel {
    display: block;
}

.desktop .Menu_DropDownPanel,
.desktop.small .Menu_DropDownPanel {
    height: 100%;
    position: relative;
    z-index: 219;
}

.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    background: none;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
    clear: both;
    color: #52646c;
    display: block;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    line-height: 32px;
    margin: 0;
    min-width: 0;
    padding: 0 0 0 56px;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
}

/* remove border from last submenu **************************/
.Menu_DropDownPanel a:last-child {
    border-bottom: none;
}

/* hover submenu **************************/

/* 
      a.Menu_SubMenuItem,
      .desktop a.Menu_SubMenuItem:hover,
      a.Menu_SubMenuItem:link,
      a.Menu_SubMenuItem:visited {
          border-bottom: 0;
          height: 32px;
          padding: 0;

          
      } */

.desktop.small .Menu_SubItemsPlaceholder,
.tablet .Menu_SubItemsPlaceholder {
    height: 100%;
    left: 0;
    position: relative;
    top: 0px;
    width: 100%;

    -webkit-overflow-scrolling: touch;
}

/* Page content header **************************/
.HeaderPage {
    display: block;
}

.HeaderPage .BreadcrumbsContainer {
    margin-bottom: 5px;
    background-color: #f4f7fc;
    border-bottom: 2px solid #cfd8dc;

    
}

.HeaderPage .BreadcrumbsContainer .Breadcrumbs {
    margin: 0 auto;
    padding: 10px 10px 0;
    max-width: 896px;
}

.desktop.big .HeaderPage .BreadcrumbsContainer .Breadcrumbs,
.desktop.hd .HeaderPage .BreadcrumbsContainer .Breadcrumbs {
    max-width: 65%;
}

.HeaderPage .Breadcrumbs,
.HeaderPage .Breadcrumbs a,
.HeaderPage .Breadcrumbs span {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    color: #273136;
}

.Breadcrumbs-separator {
    padding: 0 5px;
    font-size: 13px;
}

.phone .HeaderPage .BreadcrumbsContainer {
    margin-bottom: 0;
    border-width: 1px;
    
}

.phone .HeaderPage .BreadcrumbsContainer > div span {
    
}

/* Page Title **************************/
.Title {
    display: inline-block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.Title.Heading1 {
    border-bottom: 1px solid #ddd;
    height: 50px;
    margin-bottom: 20px;
    margin-top: 0;
    padding-left: 20px;

    
    
}

.tablet.portait .Title.Heading1,
.tablet.mini .Title.Heading1 {
    font-size: 22px;
    position: relative;
}

.phone.portrait .Title.Heading1 {
    border: none;
    display: block;
    height: 40px;
    margin-bottom: 10px;
    padding: 0 20px;
    position: relative;
    text-align: center;

    
}

.Title_Section {
    margin-top: 34px;
    position: relative;
}

/* Page actions **************************/
.Actions {
    display: inline-block;
    font-size: 14px;
    line-height: 34px;
    margin-right: 20px;
    position: absolute;
    right: 0;
    text-align: right;
    width: auto;

    
    
}

.Actions:not(empty) {
    
}

.phone.portrait .Actions {
    margin-bottom: 20px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    width: 100%;
}

.phone.portrait .Actions .Button {
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
}

.Actions a {
    margin-left: 10px;
}

.Actions a:first-child {
    margin-left: 0;
}

a.ActionAdd,
a.ActionEdit,
a.ActionDelete,
a.ActionChange {
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    height: 32px;
    line-height: 30px;
    margin-left: 10px;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
}

a.ActionAdd:hover,
a.ActionEdit:hover,
a.ActionDelete:hover,
a.ActionChange:hover {
    background-color: #efefef;
}

a.ActionAdd[disabled],
a.ActionAdd:disable,
a.ActionEdit[disabled],
a.ActionEdit:disable,
a.ActionDelete[disabled],
a.ActionDelete:disable,
a.ActionChange[disabled],
a.ActionChange:disable {
    background-color: #ccc;
    box-shadow: none;
    color: #999;
}

a.ActionAdd,
a.ActionEdit,
a.ActionChange {
    background-color: #fff;
    border-bottom: 2px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
    color: #48687c;
}

a.ActionAdd {
    background-color: #d7a909;
    border-bottom: 2px solid #b79008;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: #fff;
    text-shadow: none;
}

a.ActionAdd:hover {
    background-color: #e9bd24;
    border-bottom: 2px solid #c6a11f;
}

a.ActionDelete {
    background-color: #bb5858;
    border-bottom: 2px solid #9f4b4b;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
    color: #fff;
}

a.ActionDelete:hover {
    background-color: #d56565;
    border-bottom: 2px solid #b55656;
}

.Actions input.Button {
    margin-left: 20px;
}

/* Wrapper content **************************/
.Content.ThemeGrid_Wrapper {
    left: 0;
    min-width: 20px;
    overflow-x: hidden;
    padding-top: 0;
    position: absolute;
    right: 0;
    top: 50px;
    background-color: #fff;

    
    
    
}

.phone .Content.ThemeGrid_Wrapper {
    left: 0;
    overflow: hidden;
    -webkit-transition: left 300ms ease;
    transition: left 300ms ease;
    width: 100%;

    
}

/* Content **************************/
.MainContent {
    margin-left: 20px;
    margin-right: 20px;
    min-height: 20px;
    padding-bottom: 30px;

    
    
    
}

.phone .MainContent {
    margin: 0;

    
    
}

.Page.MenuOpen .MainContent {
    pointer-events: none;
}

/* footer **************************/
.Footer {
    height: 40px;
    padding: 10px 0;
    top: 100%;
    width: auto;
    background-color: #52646c;
    color: #fff;
    font-size: 12px;
    text-align: center;

    
}

.phone .Footer {
    display: none;
}

.MainPopup {
    background: #fff;
    display: table-cell;
    padding: 0;
    vertical-align: top;
}

.MainPopup .Button.ThemeGrid_MarginGutter {
    margin-left: 10px;
}

.OSInlineClear {
    /* This style will never be used in runtime.
        When applied in Service Studio, it will prevent the style 'OSInline' from being
        automatically applied to divs and tables with widths != (fill parent) */
}

/*------------------------------------*\
              $3. Forms
      \*-------------------------------------*/

.Form {
    margin-top: 30px;
}

.tablet .Form {
    margin-top: 20px;
}

.phone .Form {
    margin-top: 10px;
}

.Search_wrapper input[type="text"],
textarea,
select,
input {
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #273136;
    font-size: 14px;
    line-height: 18px;
}

textarea,
select,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="tel"],
.Search_wrapper input[type="text"],
input[type="date"] {
    min-height: 40px;
}

textarea::placeholder,
select::placeholder,
input::placeholder {
    color: #52646c;
    font-size: 14px;
}

html input {
    height: 40px;
}

html input::-ms-clear {
    display: none;
}

label,
.Form label {
    font-size: 16px;
    line-height: 20px;
    color: #273136;
}

.tablet label,
.tablet .Form label,
.phone label,
.phone-iframe label,
.phone .Form label {
    font-size: 15px;
}

.desktop input[type="date"] {
    padding-top: 0;
}

/* radio and checkbox override rules **************************/

html input[type="radio"]:before,
html input[type="checkbox"]:before,
html input[type="radio"],
html input[type="checkbox"] {
    box-shadow: none !important;
}

html input[type="radio"],
html input[type="checkbox"] {
    background-color: transparent;
    height: 26px;
    width: 26px;
}

/* force padding to center vertically on Firefox **************************/
select {
    color: rgb(102, 102, 102);
    height: 32px;
    line-height: 1.43;
    padding: 4px 8px;
}

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    background-color: #fff;
    border-bottom-color: #ccc;
    border-color: #ccc;
    border-left-color: #ccc;
    border-radius: 4px;
    border-right-color: #ccc;
    border-top-color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #666;
    font-size: 14px;
    vertical-align: middle;
}

.Form input.Not_Valid.ReadOnly,
.Form textarea.Not_Valid.ReadOnly,
.Form select.Not_Valid.ReadOnly,
.select2-container.Not_Valid .select2-choice {
    border: 1px solid #de323b;
}

.Form input.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
.Form textarea.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
.Form select.SmartInput_Changed.ReadOnly + a.SmartInput_Undo {
    display: none;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border: 1px solid #999;
    box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.06);
}

textarea:focus {
    border: 1px solid #999;
}

input[type="radio"]:disabled:before,
input[type="checkbox"]:disabled:before {
    background: rgba(204, 204, 204, 0.1);
}

input[disabled="disabled"],
input[disabled="disabled"][type="text"]:focus,
input[disabled="disabled"][type="password"]:focus,
textarea[disabled="disabled"]:focus,
textarea[readonly="readonly"]:focus,
select[disabled="disabled"]:focus,
input[readonly="readonly"]:focus,
input[disabled="disabled"]:focus,
.Form textarea[readonly="readonly"].ReadOnly:not(.Not_Valid):focus,
.Form textarea[disabled="disabled"].ReadOnly:not(.Not_Valid):focus {
    border: 1px solid #cfd8dc;
    background-color: #ededed;
    color: #767676;
}

.Form input.Not_Valid,
.Form select.Not_Valid,
.Form textarea.Not_Valid,
input.Not_Valid,
select.Not_Valid,
textarea.Not_Valid {
    border-radius: 4px;
}

.ie input[type="radio"],
.ie input[type="checkbox"],
.ie .Form input[type="radio"],
.ie .Form input[type="checkbox"] {
    border-radius: 0;
}

select.Not_Valid:focus,
input.Not_Valid:focus,
textarea.Not_Valid:focus {
    border: 1px solid #de323b;
}

select.Not_Valid::placeholder,
input.Not_Valid::placeholder,
textarea.Not_Valid::placeholder {
    color: #de323b;
}

.Form input[type="checkbox"].Not_Valid,
.Form input[type="radio"].Not_Valid,
input[type="checkbox"].Not_Valid,
input[type="radio"].Not_Valid {
    border: transparent;
    padding: 0;
}

select:not(.Not_Valid):focus {
    border: 1px solid #999;
}

select::-ms-value {
    background: none;
    color: #42413d;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* radio and checkbox **************************/

input[type="radio"]:before {
    box-shadow: none;
    border-color: #cfd8dc;
}

input[type="radio"]:checked:before {
    box-shadow: none;
    border-color: #00acc1;
    background-color: #00acc1;
}

input[type="radio"]:checked:after {
    height: 8px;
    width: 8px;
    top: 29%;
    left: 31%;
    border-color: #fff;
    background-color: #fff;
}

input[type="checkbox"]:before {
    box-shadow: none;
}

input[type="checkbox"]:checked:before {
    border-color: #00acc1;
    box-shadow: none;
}

input[type="checkbox"]:checked:after {
    height: 5px;
    width: 10px;
    top: 8px;
    left: 8px;
    border-color: #00acc1;
}

/* Validation Message*****/

.ValidationMessage {
    color: #de323b;
    font-size: 13px;
    line-height: 30px;
}

/* Mandatory*****/

.Form label.MandatoryLabel:after {
    color: #de323b;
}

/*------------------------------------*\
              $4. Buit-in widgets
      \*-------------------------------------*/

/* filter form **************************/
.Filters_Wrapper {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    line-height: 34px;
    padding: 20px;
}

.Filters_Wrapper .Button {
    margin-left: 10px;
}

.phone .Filters_Wrapper input[type="text"] {
    margin-bottom: 10px;
    width: 100%;
}

.phone .Filters_Wrapper input.Button.Is_Default {
    margin-left: 0;
}

/* editable table **************************/
.EditableTable {
    border: 1px solid #dedede;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.EditableTable thead td {
    border-bottom: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

.EditableTable tbody tr:not(.RowControlGroup) td {
    border-bottom: 1px solid #ddd;
}

.EditableTable tr.Selected td {
    background-color: #fafcff;
}

.EditableTable tr.OnEdit + tr.RowControlGroup .ControlActions,
.EditableTable tr.Selected + tr.RowControlGroup .ControlActions {
    background: #fafcff;
    border: 1px solid #ddd;
    border-top: 2px solid #fafcff; /* same as background */
    left: 50%;
    margin-left: -82px;
    margin-top: -2px;
    padding: 6px;
}

.EditableTable tr.RowControlGroup a {
    color: #125f90;
    cursor: pointer;
    display: none;
    width: 50px;
}

td.RowWithAddAction {
    border-bottom: 0;
}

td.RowWithAddAction i {
    font-size: 14px;
    margin-right: 5px;
}

body .EditableTable input:not(.InEditMode),
body .EditableTable textarea:not(.InEditMode),
body .EditableTable select:not(.InEditMode) {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    color: #666;
    font-size: 14px;
}

/* Submit Button */
.EditRecord_Buttons .Button {
    line-height: 15px;
}

/* Header **************************/
.TableRecords_Header {
    border-bottom: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 0 10px 10px;
}

/* table **************************/
table.EditRecord,
table.ShowRecord {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    margin-top: 0;
}

/* First row **************************/
table.EditRecord tr:first-child td,
table.ShowRecord tr:first-child td {
    padding-top: 20px;
}

/* All columns **************************/
table.EditRecord tr td,
table.ShowRecord tr td {
    padding-right: 20px;
}

/* First column **************************/
table.EditRecord tr td:first-child,
table.ShowRecord tr td:first-child {
    padding-left: 20px;
}

/* Last Row **************************/
table.EditRecord tr:last-child td,
table.ShowRecord tr:last-child td {
    padding-bottom: 20px;
}

/* First Column / first column - tablet and phone **************************/
.tablet table.EditRecord tr:first-child td:first-child,
.tablet table.ShowRecord tr:first-child td:first-child,
.phone table.EditRecord tr:first-child td:first-child,
.phone table.ShowRecord tr:first-child td:first-child {
    padding-top: 20px;
}

.tablet table.EditRecord tr td,
.tablet table.ShowRecord tr td,
.phone table.EditRecord tr td,
.phone table.ShowRecord tr td {
    padding-left: 20px;
    padding-right: 20px;
}

.tablet td.EditRecord_Caption:first-child + .EditRecord_Value,
.phone td.EditRecord_Caption:first-child + .EditRecord_Value {
    padding-right: 20px;
}

/* Last Row / Last Column on tablet and phone **************************/
.tablet table.EditRecord tr:last-child td:last-child,
.tablet table.ShowRecord tr:last-child td:last-child,
.phone table.EditRecord tr:last-child td:last-child,
.phone table.ShowRecord tr:last-child td:last-child {
    padding-bottom: 20px;
}

.TableRecords > tbody > tr > td a {
    font-weight: 400;
}

.TableRecords {
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 0;
}

.TableRecords tr:nth-child(even) {
    background-color: rgba(240, 245, 252, 0.3);
}

.TableRecords_OddLine,
.TableRecords_EvenLine {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    vertical-align: middle;
}

.TableRecords_OddLine:first-child,
.TableRecords_EvenLine:first-child,
.TableRecords_Header:first-child {
    padding-left: 20px;
}

.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine,
.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine {
    padding: 5px 16px;
}

/* Columns **************************/

.Columns2 > .Column {
    width: 50%;
    padding: 0 10px;
}

.Form .Columns.MarginBottom,
.Columns.MarginBottom {
    margin-bottom: 0;
}

.Form .Columns2 > .Column {
    padding: 0 15px;
}

.Form .Columns2 > .Column.ColFirst {
    padding-left: 0;
}

.Form .Columns2 > .Column.ColLast {
    padding-right: 0;
}

.tablet .Form .Columns2 > .Column {
    padding: 0 8px;
}

.phone .Form .Columns2 > .Column {
    padding: 0;
}

.tablet .Form .Columns2 > .Column.ColFirst,
.phone .Form .Columns2 > .Column.ColFirst {
    padding-left: 0;
}

.tablet .Form .Columns2 > .Column.ColLast,
.phone .Form .Columns2 > .Column.ColLast {
    padding-right: 0;
}

.tablet .Columns.MarginBottom.tab_BreakFirst,
.tablet .Columns.MarginBottom.tab_BreakLast,
.tablet .Columns.MarginBottom.tab_BreakAll,
.tablet .Columns.MarginBottom.tab_BreakMiddle,
.phone .Columns.MarginBottom.mob_BreakFirst,
.phone .Columns.MarginBottom.mob_BreakLast,
.phone .Columns.MarginBottom.mob_BreakAll,
.phone .Columns.MarginBottom.mob_BreakMiddle {
    margin-bottom: 0;
}

.Column.empty {
    display: none;
}

/*? Modifier add equal height to columns - Add a container with "columns-container--equal-height" class to columns pattern */
.columns-container--equal-height .Columns {
    display: flex;
}

.columns-container--equal-height .Columns .Column > div {
    height: 100%;
}

/*------------------------------------*\
              $5. RichWidgets
      \*-------------------------------------*/

/* Feedback Message **************************/
div.Feedback_Message_Info:before,
div.Feedback_Message_Success:before,
div.Feedback_Message_Error:before,
div.Feedback_Message_Warning:before {
    font-size: 20px;
    left: 15px;
    opacity: 0.5;
    top: 16px;
}

div.Feedback_Message_Success {
    background-color: #73bf00;
    border-color: #73bf00;
    border-radius: 0;
    color: #fff;
}

div.Feedback_Message_Error {
    background-color: #db2500;
    border-color: #db2500;
    border-radius: 0;
    color: #fff;
}

div.Feedback_Message_Warning {
    background-color: #debd00;
    border-color: #debd00;
    border-radius: 0;
    color: #fff;
}

div.Feedback_Message_Info {
    background-color: #009dde;
    border-radius: 0;
    color: #fff;
}

/* This margin-top:0px is for all pages without .Page in layout **************************/

div.Feedback_Message_Wrapper {
    left: 0;
    margin-top: 0;
    z-index: 5000;
}

.Page div.Feedback_Message_Wrapper {
    left: 0;
    margin-top: 0px;
}

div.Feedback_Message_Error,
div.Feedback_Message_Success,
div.Feedback_Message_Warning,
div.Feedback_Message_Info {
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    line-height: normal;
    font-size: 16px;
    max-width: 100%;
    min-width: 300px;
    padding: 18px 40px 18px 40px;
    width: 100%;
    word-break: break-word;
    -webkit-backface-visibility: hidden;
}

a.Feedback_Message_Wrapper_Close {
    color: #000;
    opacity: 0.7;
    right: 10px;
    top: 18px;
}

.tablet a.Feedback_Message_Wrapper_Close,
.phone a.Feedback_Message_Wrapper_Close {
    pointer-events: none;
}

div.Feedback_Message_Error .Feedback_Message_Wrapper_Close:after,
div.Feedback_Message_Warning .Feedback_Message_Wrapper_Close:after,
div.Feedback_Message_Info .Feedback_Message_Wrapper_Close:after,
div.Feedback_Message_Success .Feedback_Message_Wrapper_Close:after {
    color: #fff;
    content: "\f00d"; /* fa-times at http://fortawesome.github.io/Font-Awesome/icons/ */
    font-family: FontAwesome;
    text-align: right;
}

a.Feedback_Message_Wrapper_Close:hover {
    opacity: 0.6;
}

/* Ajax Loading **************************/
.Feedback_AjaxWait {
    
    
}

/* Pagination **************************/

.ListNavigation_Wrapper,
.list-navigation-wrapper {
    margin: 20px 0px;
    text-align: center;
}

a.ListNavigation_PageNumber:link,
span.ListNavigation_CurrentPageNumber,
span.ListNavigation_Ellipsis {
    height: 30px;
    width: 30px;
    background-color: #ededed;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #52646c;
    text-decoration: none;
}

a.ListNavigation_PageNumber:link:hover,
span.ListNavigation_CurrentPageNumber:hover,
span.ListNavigation_Ellipsis:hover {
    background-color: #efefef;
}

span.ListNavigation_CurrentPageNumber,
span.ListNavigation_CurrentPageNumber:hover {
    border: 1px solid #00acc1;
    box-shadow: none;
    color: #00acc1;
    cursor: default;
}

a.ListNavigation_Previous:link,
a.ListNavigation_Next:link,
span.ListNavigation_DisabledNext,
span.ListNavigation_DisabledPrevious {
    background-color: #ededed;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #52646c;
    text-decoration: none;
}

a.ListNavigation_Previous:link:hover,
a.ListNavigation_Next:link:hover,
span.ListNavigation_DisabledNext:hover,
span.ListNavigation_DisabledPrevious:hover {
    background-color: #efefef;
}

/* Ajax Loading **************************/
.Feedback_AjaxWait {
    position: fixed;
    top: 49px;
    right: 0;
    left: 241px;
    height: calc(100vh - 49px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #607d8b;
    color: white;
    font-size: 12px;

    z-index: 10000;
}

.Form .select2-container .select2-choice {
    box-shadow: none;
    height: 40px;
    line-height: 40px;
}

.Form .select2-container:after {
    top: 10px;
}

.Form .select2-container .select2-choice span {
    font-weight: normal;
    line-height: 40px;
}

/* Calendar Pika SIngle **************************/

.pika-single {
    z-index: 3;
    border: none;
    width: 360px;
}

.pika-single.is-bound {
    width: auto;
    border-radius: 4px;
}

@media only screen and (max-width: 420px) {
    .pika-single.is-bound {
        width: 85vw;
    }
}

.ModalMessage .pika-single.is-bound {
    position: fixed !important;
}

.phone .pika-single {
    width: auto;
}

.pika-lendar {
    padding: 17px;
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #fff FFF;
    box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.1);
}

.is-bound .pika-lendar {
    max-width: 360px;
}

.pika-lendar .pika-title {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    border: none;
    font-weight: 500;
    text-transform: uppercase;
}

.ie .pika-lendar .pika-title {
    padding-top: 0;
}

.pika-lendar .pika-label:first-child {
    padding: 0;
    margin-right: 10px;
}

.calendar-custom .pika-lendar .pika-label:first-child {
    margin-right: 25px;
}

.calendar-custom .pika-lendar .pika-label {
    position: relative;
    overflow: inherit;
}
.calendar-custom .pika-lendar .pika-label::before {
    content: "";
    height: 5px;
    width: 5px;
    position: absolute;
    top: 3px;
    right: -14px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(135deg);
}

.pika-lendar .Calendar-navBtn,
.pika-lendar .pika-time-container {
    display: none;
}

.pika-lendar .pika-prev {
    left: 0 !important;
    border: none;
}

.pika-lendar .pika-next {
    right: 0 !important;
    border: none;
}

.pika-lendar button.pika-prev:hover,
.pika-lendar button.pika-next:hover {
    background: transparent;
}

.pika-table th {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 15px;
    text-transform: uppercase;
    color: #37474f;
    opacity: 1;
}

.pika-table th > abbr {
    text-decoration: none;
}

.pika-lendar .pika-button {
    width: 32px;
    padding: 3px 4px;
    font-size: 14px;
    border-radius: 4px;
}

.pika-lendar .is-today .pika-button {
    border: 1px solid #00444f;
}

.pika-lendar .is-selected .pika-button {
    background-color: #52646c;
    color: #fff;
}

.pika-table td {
    height: 40px;
    padding-top: 6px;
    padding-left: 8px;
}
.is-outside-current-month .pika-button {
    opacity: 0;
}

.pika-title select {
    top: -20px;
    left: -5px;
}

.calendar-custom .pika-select {
    pointer-events: inherit;
}

/*------------------------------------*\
              $6. Login
      \*-------------------------------------*/

/* Feddback Message on Login **************************/
.Page .Login + div + span div.Feedback_Message_Wrapper {
    margin-top: 0;
    width: 100% !important;
}

.Login_Footer {
    background: -webkit-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
    background: -moz-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
    background: -ms-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
    background: -o-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
    background: linear-gradient(0deg, #00152a 0%, #2d4657 100%);
    box-shadow: inset 2px 4px 5px 0 rgba(0, 0, 0, 0.41);
    height: 20%;
    left: 0;
    margin-left: 0;
    width: 100%;
}

.tablet .Login_Footer,
.phone .Login_Footer {
    bottom: 0;
    height: 50px;
    padding-top: 15px;
    position: fixed;
}

.Login_Footer a,
.Login_Footer a:link,
.Login_Footer a:visited {
    color: #fff;
}

.Login__Form {
    background-color: rgba(0, 0, 0, 0);
}

.Login_Box {
    top: 50%;
}

.Login__Logo {
    padding-bottom: 0;
}

.Login_Text {
    color: #606060;
    font-size: 12px;
    font-weight: 400;
}

/*------------------------------------*\
              $7. Theme Grid
      \*-------------------------------------*/

/* 12 columns **************************/
html .ThemeGrid_Width12 {
    width: auto;
}

/* 12 columns **************************/
html .tablet .ThemeGrid_Width12 {
    width: 100%;
}

html .tablet .ThemeGrid_Width12 {
    margin-left: 0;
}

/*------------------------------------*\
              $7.1 Layout Custom
      \*------------------------------------*/

/*---Layout Base---*/

.layout-base {
    background-color: #fff;
}

.layout-base .MainContent {
    margin: 0;
    padding: 0;
    background-color: #fcfcfc;
}

/*---Content Base---*/

.content-base {
    max-width: 896px;
    min-height: calc(100vh - 90px);
    margin: 0 auto;
    padding: 30px 25px;
    background-color: #fcfcfc;
}

.desktop.hd .content-base,
.desktop.big .content-base {
    max-width: 65%;
}

.phone .content-base {
    padding: 25px 15px;
}

@media (min-width: 1260px) and (max-width: 1366px) {
    .desktop.small .content-base {
        margin: 0 auto 0 270px;
    }
}

.tablet .content-base {
    padding: 30px;
}

/*---Content Medium Left---*/

.content-medium-left {
    padding: 0;
    margin: 0;
    display: flex;
}

.content-medium-left .main-content-left,
.content-medium-left .main-content-right {
    min-height: calc(100vh - 97px);
    padding: 60px 0 30px;
    display: flex;
}

.content-medium-left .main-content-left {
    width: 40%;
    padding-right: 30px;
    justify-content: flex-end;
    background-color: #fff;
}

.content-medium-left .main-content-right {
    width: 60%;
    padding-left: 95px;
    justify-content: flex-start;
    background-color: #f4f7fc;
}

.content-medium-left .main-content-left-inner {
    width: 100%;
    max-width: calc(1100px * 0.4);
    padding-left: 20px;
}

.content-medium-left .main-content-right-inner {
    width: 100%;
    max-width: calc(1100px * 0.6);
    padding-right: 20px;
}

.content-medium-left .main-content-right-inner.col-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*-Responsive-*/

.desktop.small .content-medium-left .main-content-right {
    padding-left: 3%;
}

.tablet .content-medium-left .main-content-left,
.phone .content-medium-left .main-content-left {
    display: none;
}

.tablet .content-medium-left .main-content-right,
.phone .content-medium-left .main-content-right {
    width: 100%;
    padding: 50px 5% 70px;
    justify-content: center;
    background-color: #fff;
}

.phone .content-medium-left .main-content-right {
    padding: 30px 5% 50px;
}

.tablet .content-medium-left .main-content-right-inner,
.phone .content-medium-left .main-content-right-inner {
    max-width: none;
    padding-right: 0;
}

/*---Layout Custom---*/

.Content {
    padding-top: 50px;
}

.main-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.sub-wrapper {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 20px;
}

/*---Layout Backoffice---*/

.desktop .Content.content-backoffice {
    left: 240px;
    padding-top: 30px;
}

.desktop.small .Content.content-backoffice {
    left: 60px;
    padding-top: 30px;
}

.Content.content-backoffice .MainContent {
    min-height: calc(100vh - 200px);
}

.Content.content-backoffice .MainContent {
    min-height: calc(100vh - 200px);
}

/*------------------------------------*\
              $0. Studio Preview
      \*-------------------------------------*/

/* header **************************/
.Page.phone .Header__loginInfo,
.Page.phone .Header__activity,
.Page.phone .Header_search,
.Page.tablet .Header_search {
    
}

/* wrapper **************************/
.Page.phone .ThemeGrid_Wrapper {
    
}
.Page.tablet .ThemeGrid_Wrapper {
    
}

/* menu **************************/
.Menu {
    
    
}

.Application_Menu {
    
}

.tablet .Menu_TopMenu a:link,
.tablet .Menu_TopMenu a:visited,
.tablet .Menu_TopMenu a {
    white-space: normal;

    
    
    
}

.tablet .Menu_TopMenu a:link span.fa,
.tablet .Menu_TopMenu a:visited span.fa,
.tablet .Menu_TopMenu a span.fa {
    
}

/* Iphone X Landscape Styles */
.phone.iphonex.landscape .Button.Header_buttonMenu {
    margin-left: constant(safe-area-inset-left);
    margin-left: env(safe-area-inset-left);
}

.phone.iphonex.landscape .Header_title {
    margin-left: 70px;
}

.iphonex.landscape .MainContent {
    margin-left: constant(safe-area-inset-left);
    margin-left: env(safe-area-inset-left);
    margin-right: constant(safe-area-inset-right);
    margin-right: env(safe-area-inset-right);
}

.phone.iphonex.landscape .Menu .LoginInfo {
    padding: 20px 20px 20px constant(safe-area-inset-left);
    padding: 20px 20px 20px env(safe-area-inset-left);
}

.iphonex.landscape .Menu_TopMenu a,
.iphonex.landscape .Menu_TopMenu a:link,
.iphonex.landscape .Menu_TopMenu a:visited {
    padding: 12px 20px 12px constant(safe-area-inset-left);
    padding: 12px 20px 12px env(safe-area-inset-left);
}

/* ExcludeFromPickers: ActionAdd, ActionChange, ActionDelete, ActionEdit, Actions, Application_Menu, Badge, Breadcrumbs, BreadcrumbsContainer, , 
      Content, ControlActions, desktop, EditableTable, EditRecord, EditRecord_Buttons, fa, Feedback_AjaxWait, Feedback_Message_Error, 
      Feedback_Message_Info, Feedback_Message_Success, Feedback_Message_Warning, Feedback_Message_Wrapper, Feedback_Message_Wrapper_Close, 
      Filters_Wrapper, Footer, Form, Header, Header__activity, Header__loginInfo, Header_buttonMenu, Header_search, Header_title, Header_user, 
      HeaderPage, ie, ie10, ie11, ie8, InEditMode, ListNavigation_CurrentPageNumber, ListNavigation_DisabledNext, ListNavigation_DisabledPrevious, 
      ListNavigation_Ellipsis, ListNavigation_Next, ListNavigation_PageNumber, ListNavigation_Previous, Loader, Login__Form, Login__Logo, Login_Box, 
      Login_Footer, Login_Text, LoginInfo, LoginInfo_username, MainContent, MainPopup, Menu, Menu_DropDownArrow, Menu_DropDownButton, Menu_DropDownPanel, 
      Menu_SubItemsPlaceholder, Menu_SubMenuItem, Menu_SubMenuItemActive, Menu_TopMenu, Menu_TopMenuActive, Menu_TopMenus, menuOpen, MenuSlider_Toggler, 
      mini, Not_Valid, OnEdit, open, OSAutoMarginTop, OSInlineClear, Page, phone, portait, Responsive, RowControlGroup, RowWithAddAction, select2-choice, 
      select2-container, Selected, ShowRecord, SmartInput_Undo, TableRecords, TableRecords_EvenLine, TableRecords_Header, TableRecords_OddLine, tablet, 
      ThemeGrid_Container, ThemeGrid_MarginGutter, ThemeGrid_Width12, ThemeGrid_Wrapper, Title, Title_Section */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** * * * * * * *  * *   END OF PATTERNS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

      /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** * * * * * * *  * *   START OF THEME * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

      /*
          How to generate a theme for your company: 
          
              1 - Go to https://silkui.outsystems.com/ThemeCustomizer/GenerateDublin.aspx
              2 - Copy the generated CSS
              3 - Replace the CSS for Primary Color Customization below with the Generated CSS

      */

/*------------------------------------*\
                  Import Font
      \*------------------------------------*/

@font-face {
    font-family: "Azo Sans";
    src: url("/PC_TH/Fonts/AzoSans-Regular.eot") format("embedded-opentype");
    src: url("/PC_TH/Fonts/AzoSans-Regular.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Azo Sans";
    src: url("/PC_TH/Fonts/AzoSans-Thin.eot") format("embedded-opentype");
    src: url("/PC_TH/Fonts/AzoSans-Thin.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Thin.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Azo Sans";
    src: url("/PC_TH/Fonts/AzoSans-Medium.eot") format("embedded-opentype");
    src: url("/PC_TH/Fonts/AzoSans-Medium.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Azo Sans";
    src: url("/PC_TH/Fonts/AzoSans-Black.eot") format("embedded-opentype");
    src: url("/PC_TH/Fonts/AzoSans-Black.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Black.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Azo Sans";
    src: url("/PC_TH/Fonts/AzoSans-Bold.eot") format("embedded-opentype");
    src: url("/PC_TH/Fonts/AzoSans-Bold.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

/*------------------------------------*\
                  Font Definition
      \*------------------------------------*/

html,
body,
a,
select,
form,
fieldset,
table,
tr,
td,
img,
input,
button,
select,
textarea,
optgroup,
option,
.TileIcon_text,
.TileNumber_text,
.TileIconText_label,
.Heading1,
.Heading2,
.Heading3,
.Heading4,
.Header_title a,
.EditableTable thead td,
.TableRecords_Header {
    font-family: "Azo Sans", sans-serif;
}

/*------------------------------------*\
                    Font Classes
      \*------------------------------------*/

/***************************************/
/***** PRIMARY COLOR CUSTOMIZATION *****/
/***************************************/

.Menu_DropDownPanel {
    -webkit-filter: brightness(110%);
    filter: brightness(1.1);
}

.Header__activity,
.LoginInfo,
.Login_Text,
.Text_black {
    color: #fff;
}

.phone .Menu .LoginInfo {
    background-color: #00acc1; /*primary-color*/
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.Menu_DropDownPanel a.Menu_SubMenuItemActive,
.Menu_DropDownPanel a.Menu_SubMenuItemActive:visited,
.Menu_DropDownPanel a.Menu_SubMenuItemActive:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    color: #00acc1;
}

.Menu_TopMenu a span.fa {
    border-color: #fff;
}

.Menu_TopMenuActive a span.fa {
    color: #fff;
    border-color: #fff;
}

.Menu_TopMenuActive,
.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a,
.Menu_TopMenuActive .DropdownOpen,
.Menu_DropDownButton_Open .Menu_TopMenuActive .Menu_Item {
    background-color: #ddf0f6;
    color: #00acc1 !important;
    font-weight: 500;
}

.Menu_DropDownPanel a span.fa {
    color: #fff;
}

.Feedback_AjaxWait {
    color: #00acc1; /*primary-color*/
}

.Login_Footer {
    background: #00acc1; /*primary-color*/
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.AccordionVertical_item.open .AccordionVertical__header {
    border-top-color: #00acc1; /*primary-color*/
}

.AccordionVertical_item.open .AccordionVertical___icon > .fa {
    background-color: #00acc1; /*primary-color*/
    border-color: #00acc1; /*primary-color*/
}

.AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
    background-color: #00acc1; /*primary-color*/
    border-color: #00acc1; /*primary-color*/
}

.Post_icon img {
    border-color: #00acc1; /*primary-color*/
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: transparent;
    color: #00838f;
    font-size: 26px;
    border: none;
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    color: #00acc1; /*primary-color*/
    border: 1px solid #00acc1; /*primary-color*/
}

.Panel .expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: #00acc1; /*primary-color*/
    border: #00acc1; /*primary-color*/
}
.Calendar-day-selected,
.Calendar-day-selected:hover {
    background: #00acc1; /*primary-color*/
}

.Calendar-navDisabled > div,
.topBar-navDisabled .Calendar-navBtn > div,
.Calendar-time-down,
.Calendar-time-up,
.Calendar-time-am {
    color: #00acc1; /*primary-color*/
}

.Calendar-dayNames {
    border-top-color: #00acc1; /*primary-color*/
}

.Calendar-navBtn > div {
    color: #00acc1; /*primary-color*/
}

.desktop .NavigationBar a:hover,
.desktop .NavigationBar a:link:hover {
    color: #00acc1; /*primary-color*/
}

.NavigationBar a.Active {
    color: #00acc1; /*primary-color*/
}

.desktop .NavigationBar a:hover:after,
.desktop .NavigationBar a:link:hover:after,
.NavigationBar a.Active:after {
    background-color: #00acc1; /*primary-color*/
}

.NavigationBar a.Active:not(.IE8):before {
    border-bottom-color: #00acc1; /*primary-color*/
}

.desktop .NavigationBar.Vertical a:hover,
.desktop .NavigationBar.Vertical a:link:hover,
.NavigationBar.Vertical a.Active,
.NavigationBar.Vertical a:link.Active {
    border-color: #00acc1; /*primary-color*/
}

.NavigationBar.Vertical a.Active:not(.IE8):before {
    border-left-color: #00acc1; /*primary-color*/
}

.phone .NavigationBar .InlineDropdown:active,
.phone .NavigationBar .InlineDropdown:link:active,
.tablet .NavigationBar .InlineDropdown:active,
.tablet .NavigationBar .InlineDropdown:link:active,
.phone .NavigationBar a:active,
.phone .NavigationBar a:link:active,
.tablet .NavigationBar a:active,
.tablet .NavigationBar a:link:active {
    color: #00acc1; /*primary-color*/
}

.phone .NavigationBar .InlineDropdown:active:after,
.phone .NavigationBar .InlineDropdown:link:active:after,
.tablet .NavigationBar .InlineDropdown:active:after,
.tablet .NavigationBar .InlineDropdown:link:active:after,
.phone .NavigationBar a:active:after,
.phone .NavigationBar a:link:active:after,
.tablet .NavigationBar a:active:after,
.tablet .NavigationBar a:link:active:after {
    background-color: #00acc1; /*primary-color*/
}

a.ActionAdd:hover {
    background-color: #00acc1; /*primary-color*/
    border-bottom-color: #00acc1; /*primary-color*/
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}
a.ActionDelete:hover {
    background-color: #bb5858;
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

a.ActionAdd,
a.ActionDelete {
    color: #fff;
}

a.ActionAdd {
    background-color: #00acc1; /*primary-color*/
    border-bottom-color: #00acc1; /*primary-color*/
}

.desktop .Button.Link:hover {
    background-color: transparent;
    border-color: #00acc1; /*primary-color*/
    color: #00acc1; /*primary-color*/
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #00acc1; /*primary-color*/
}

.SectionIndex a.active,
.SectionIndex a:hover {
    border-bottom-color: #00acc1; /*primary-color*/
    color: #00acc1; /*primary-color*/
}

.SectionIndex.vertical a.active,
.SectionIndex.vertical a:hover {
    border-left-color: #00acc1; /*primary-color*/
}

.TableRecords > tbody > tr > td a {
    color: #00838f;
}

.IconBadge_number {
    background-color: #00acc1; /*primary-color*/
}

.pika-prev:after,
.pika-next:after {
    color: #00acc1; /*primary-color*/
}

.is-selected .pika-button {
    background-color: #00acc1; /*primary-color*/
}

.has-event .pika-button:after {
    background-color: #ffb300;
}

.Feedback_AjaxWait {
    color: #222;
}

@-webkit-keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em #222, 2em -2em 0 0 #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 0 #222;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 0.2em #222, 3em 0 0 0 #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 0 #222, 3em 0 0 0.2em #222, 2em 2em 0 0 #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    37.5% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 0 #222, 2em 2em 0 0.2em #222, 0 3em 0 0 #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    50% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 0 #222, 0 3em 0 0.2em #222, -2em 2em 0 0 #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    62.5% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 0 #222, -2em 2em 0 0.2em #222, -3em 0 0 0 #222, -2em -2em 0 -0.5em #222;
    }
    75% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0.2em #222, -2em -2em 0 0 #222;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0 #222, -2em -2em 0 0.2em #222;
    }
}
@keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em #222, 2em -2em 0 0 #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 0 #222;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 0.2em #222, 3em 0 0 0 #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 0 #222, 3em 0 0 0.2em #222, 2em 2em 0 0 #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    37.5% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 0 #222, 2em 2em 0 0.2em #222, 0 3em 0 0 #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    50% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 0 #222, 0 3em 0 0.2em #222, -2em 2em 0 0 #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
    }
    62.5% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 0 #222, -2em 2em 0 0.2em #222, -3em 0 0 0 #222, -2em -2em 0 -0.5em #222;
    }
    75% {
        box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0.2em #222, -2em -2em 0 0 #222;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0 #222, -2em -2em 0 0.2em #222;
    }
}

.Application_Menu {
     /*primary-color*/
    
}

/*------------------------------------*\
                  Custom CSS
      \*------------------------------------*/

/*---------------Input Col------------------*/

.input-col {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.input-col label {
    display: block;
    margin-bottom: 10px;
    padding-top: 0;
}

.input-col input,
.input-col select,
.input-col textarea,
.input-col .select2-container {
    width: 100%;
}

.input-col input[type="radio"],
.input-row input[type="radio"] {
    width: 26px;
}

/*-Responsive-*/

.phone .Columns .input-col {
    margin-bottom: 10px;
}

/*---------------Input Row------------------*/

.input-row {
    position: relative;
    display: flex;
}

.input-row .ValidationMessage {
    left: 0;
    right: inherit;
}

.input-row .ValidationMessage::before {
    right: inherit;
    height: 10px;
}

.input-row .lead-message-text,
.input-row .notes-text {
    line-height: 30px;
}

.input-row-right {
    margin-bottom: 0;
    margin-left: 8px;
}

.input-row .material-icons {
    line-height: 1.4;
}

.modal-custom .input-row .material-icons {
    line-height: 0.8;
}

.modal-custom .input-row {
    align-items: center;
}

.modal-custom .input-row-left {
    line-height: 10px;
}

/*---------------Row Icon Label------------------*/

.row-icon-label {
    display: flex;
    align-items: center;
}

.row-icon-label img,
.row-icon-label .icon {
    vertical-align: unset;
}

.row-icon-label .icon-left {
    margin-right: 15px;
}

.row-icon-label .icon-right {
    margin-left: 15px;
}

/*---------------Icon Content------------------*/

.icon-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 70px;
    display: flex;
    flex-direction: row;
}

.content-base .icon-content {
    max-width: 600px;
    padding-top: 40px;
}

.tablet .content-base .icon-content {
    max-width: auto;
    padding-top: 20px;
}

.phone .content-base .icon-content {
    max-width: auto;
    padding-top: 0;
}

.modal-custom .icon-content,
.main-content-right-inner .modal-custom .icon-content {
    max-width: auto;
    padding: 50px 30px 20px;
}

.icon-content-icon {
    text-align: right;
}

.icon-content-icon i.icon,
.icon-content-icon i.icon:before {
    font-size: 65px;
}

.phone .icon-content-icon i.icon,
.phone .icon-content-icon i.icon:before {
    font-size: 55px;
}

.icon-content-icon i.icon:before {
    margin-top: 15px;
}

.icon-content-icon,
.icon-content-content {
    padding: 0px 10px;
}

.main-content-right-inner .icon-content {
    padding-top: 0;
}

/*-Responsive-*/

.tablet .icon-content {
    padding-top: 50px;
}
.phone .main-content-right-inner .modal-custom .icon-content,
.phone .icon-content {
    max-width: none;
    padding-top: 20px;
    flex-direction: column;
}

.phone .icon-content-icon {
    margin-bottom: 20px;
    text-align: left;
}

/*---------------Card Icon Content------------------*/

.card-icon-content {
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #ffffff;
}

.card-icon-content .icon-content {
    max-width: none;
    padding: 30px;
}

.phone .card-icon-content .icon-content {
    padding: 20px;
}

.card-icon-content .icon-content-icon {
    padding: 0;
}

.card-icon-content .icon.material-icons {
    line-height: 0.9;
}

.phone .card-icon-content .icon.material-icons {
    font-size: 40px;
}

.card-icon-content .lead-normal {
    margin-bottom: 5px;
}

.phone .card-icon-content .icon-content {
    flex-direction: row;
}

.phone .card-icon-content .icon-content-content {
    padding-right: 0;
}

.phone .card-icon-content .rich-text {
    font-size: 13px;
}

/*---------------Input Password Message------------------*/

.message-link-row {
    margin: 30px 0 50px;
    text-align: center;
}

.tablet .message-link-row {
    margin: 30px 0;
}

.phone .message-link-row {
    margin: 20px 0;
}

/*---------------Input Password------------------*/

.input-password {
    position: relative;
}

.phone .input-password {
    padding-bottom: 20px;
}

.input-password-message,
.input-password-message a {
    font-size: 12px;
}

.input-password-message {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 12px;
    color: #52646c;
}

.phone .input-password-message {
    position: absolute;
    top: initial;
    right: initial;
    bottom: 0;
    left: 0;
    font-size: 12px;
    color: #52646c;
}

/*---------------Show Password------------------*/

a.show-password {
    position: absolute;
    top: 44px;
    right: 15px;
    color: #cdcdcd;
}

/*---------------Input Calendar/File Placeholder------------------*/

.input-calendar,
.input-file {
    position: relative;
}

.input-file::after,
.input-calendar:after {
    content: "";
    background: url(/PC_TH/img/iconcalendar_2x.png?27317) no-repeat;
    background-size: 80%;
    position: absolute;
    top: 11px;
    right: 8px;
    height: 20px;
    width: 20px;
    pointer-events: none;
}

.input-file::after {
    background: url(/PC_TH/img/filedocument.png?27317) no-repeat;
}

/*---------------Language Select------------------*/

.language-select {
    font-size: 14px;
    color: #fff;
}

/*---------------Check Password------------------*/

.check-password {
    height: 30px;
    display: flex;
    align-items: center;
}

.check-password .Progress {
    width: 70%;
}

.check-password-label {
    margin-left: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    color: #52646c;
}

/*---------------Password Items------------------*/

.password-items-container .input-row {
    align-items: center;
}

.password-items-container .input-row-right {
    margin-left: 5px;
}

.password-items-container i,
.password-items-container .input-row-right .notes-text {
    color: #9eb0b8;
}

.password-items-container .input-row i {
    font-size: 13px;
    line-height: 2.5;
}

.password-items-container .active .input-row i {
    color: #00acc1;
}

.password-items-container .active .notes-text {
    color: #52646c;
}

/*---------------Page Title------------------*/

.page-title {
    margin-bottom: 40px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cfd8dc;
}

.page-title.no-border {
    margin: 0;
    border: none;
}
.page-title .Heading1,
.page-title .Heading2,
.page-title .Heading3,
.page-title .Heading4 {
    margin: 0;
}

.tablet .page-title {
    margin-bottom: 30px;
}
.phone .page-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/*---------------Page Title Action------------------*/

.page-title-action {
    margin-left: auto;
}

.phone .page-title-action {
    width: 100%;
    margin: 10px 0 0 0;
}

/*---------------Page Subtitle------------------*/

.page-subtitle {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cfd8dc;
}

.page-subtitle.not-full-width {
    width: 66%;
}

.tablet .page-title {
    margin-bottom: 10px;
}

/*---------------Results Title------------------*/

.results-title {
    width: 66%;
    display: flex;
    margin-top: 10px;
    padding-top: 20px;
}

.tablet .results-title,
.phone .results-title {
    width: 100%;
}

/*---------------Section Title------------------*/

.section-title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.phone .section-title {
    margin-bottom: 30px;
}

.phone .section-title.has-button {
    flex-direction: column;
    align-items: flex-start;
}

.section-title:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #cfd8dc;
    width: 100%;
}

.phone .section-title:before {
    bottom: -8px;
}

.section-title.not-full-width:before {
    width: 66%;
}

.section-title-action {
    margin-left: auto;
}

.phone .section-title-action {
    margin: 5px 0 0 0;
    width: 100%;
}

.phone .section-title-action:empty {
    display: none;
}

.phone .section-title .Heading3 {
    font-weight: 500;
}

/*--------------- Tabs Alternative ------------------*/

.tabs-alternative .Tabs {
    border-radius: 4px;
}

.tabs-alternative .Tabs__tab {
    height: 40px;
    width: 160px;
    flex-basis: auto;
    flex-grow: 0;
    font-size: 15px;
    color: #52646c;
    border: 1px solid #cfd8dc;
    border-left: none;
}

.phone .tabs-alternative .Tabs__tab {
    font-size: 14px;
}

.tabs-alternative .Tabs .Tabs__tab:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.Tabs__tab:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tabs-alternative .Tabs__tab.active {
    color: #273136;
    border: 1px solid #26c6da;
    background-color: #26c6da;
    font-weight: 400;
}

.tabs-alternative .Tabs__tab:first-of-type {
    border-left: 1px solid #cfd8dc;
}

.tabs-alternative .Tabs_body {
    padding: 30px 0 10px;
}

.phone .tabs-alternative .Tabs_body {
    padding-top: 20px;
}
/*--------------- SectionExpandable Custom ------------------*/

.SectionExpandable-custom {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.SectionExpandable-custom .SectionExpandable_header {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.SectionExpandable-custom .SectionExpandable__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #52646c;
    border: none;
}

.SectionExpandable__person,
.SectionExpandable-custom .SectionExpandable__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #52646c;
    border: none;
}

.phone .SectionExpandable__person,
.phone .SectionExpandable-custom .SectionExpandable__title {
    padding-right: 10px;
    font-size: 15px;
    line-height: 18px;
}

.SectionExpandable__person {
    margin-left: 5px;
    font-weight: 400;
}

.SectionExpandable-custom.expanded .SectionExpandable__title {
    color: #00838f;
}

.SectionExpandable-custom .SectionExpandable__icon {
    margin-left: auto;
    position: relative;
    height: 2px;
    width: 14px;
    border-radius: 2px;
    background-color: #37474f;
    flex-shrink: 0;
}

.SectionExpandable-custom.expanded .SectionExpandable__icon {
    background-color: #00838f;
}

.SectionExpandable-custom .SectionExpandable__icon:after {
    content: "";
    position: absolute;
    top: -6px;
    left: 6px;
    height: 14px;
    width: 2px;
    background-color: #37474f;
}

.SectionExpandable-custom.expanded .SectionExpandable__icon:after {
    content: none;
}

.SectionExpandable-custom.expanded .SectionExpandable__icon:after {
    content: none;
}

.SectionExpandable-custom .SectionExpandable_content,
.SectionExpandable-custom.expanded .SectionExpandable_content {
    padding: 0;
}

/*--------------- SectionExpandable Info ------------------*/

.SectionExpandable-info {
    background-color: transparent;
}

.SectionExpandable-info .SectionExpandable_header {
    padding: 0;
}

.SectionExpandable-info.expanded .SectionExpandable_content {
    padding-top: 20px;
}

.SectionExpandable-info.expanded .SectionExpandable_content {
    color: #52646c;
}

.SectionExpandable-info.expanded .SectionExpandable__title {
    color: #52646c;
}

.SectionExpandable-info.expanded .SectionExpandable__icon {
    background-color: #52646c;
}

.phone .SectionExpandable-info .SectionExpandable__icon {
    width: 15px;
    margin-right: 6px;
}

/*---------------SectionExpandable Fatura & Exame------------------*/

.section-expandable-fatura,
.section-expandable-exame {
    min-height: 109px;
    padding: 15px 30px 0 30px;
    background-color: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}
.tablet .section-expandable-fatura,
.tablet .section-expandable-exame {
    padding: 20px 20px 0;
}

.phone .section-expandable-fatura,
.phone .section-expandable-exame {
    margin: 0 -20px;
    padding: 15px 20px 0 20px;
}

.section-expandable-fatura .SectionExpandable_header {
    padding-bottom: 10px;
}

.phone .section-expandable-fatura .SectionExpandable_header {
    padding-bottom: 0px;
}

.section-expandable-fatura.SectionExpandable .SectionExpandable_content {
    padding: 0;
}

.section-expandable-fatura.SectionExpandable.expanded .SectionExpandable_content {
    margin-top: 10px;
    padding: 20px 0;
    border-top: 1px solid #cfd8dc;
}

.section-expandable-fatura .SectionExpandable_header {
    margin-bottom: 0;
}

.section-expandable-fatura-header {
    width: 100%;
    display: flex;
    align-items: center;
}

.tablet .section-expandable-fatura-header,
.phone .section-expandable-fatura-header {
    flex-direction: column;
}

.section-expandable-fatura-info {
    padding-right: 5%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tablet .section-expandable-fatura-info,
.phone .section-expandable-fatura-info {
    padding-right: 0;
}

.section-expandable-fatura-type {
    flex-shrink: 0;
}

.section-expandable-fatura-info-top .section-expandable-fatura-value {
    margin: 0 0 0 auto;
}

.tablet .section-expandable-fatura-info-top .section-expandable-fatura-value {
    padding-right: 5%;
}

.section-expandable-fatura-action {
    padding: 10px 30px;
    margin-left: auto;
    display: flex;
    justify-content: space-around;
    flex-shrink: 0;
    border-left: 1px solid #cfd8dc;
}

.tablet .section-expandable-fatura-action,
.phone .section-expandable-fatura-action {
    width: 100%;
    padding: 10px 0;
    margin-left: 0;
    border: none;
    justify-content: flex-start;
    align-items: center;
}

.phone .section-expandable-fatura-action {
    flex-direction: column;
    align-items: initial;
}

.phone .section-expandable-fatura-action .Button {
    width: 100%;
}

.section-expandable-exame .section-expandable-fatura-action {
    border: none;
}

.section-expandable-exame-location i.icon {
    font-size: 17px;
}

.section-expandable-fatura-action .Button:nth-child(2) {
    margin-left: 20px;
}

.tablet .section-expandable-fatura-action .Button:nth-child(2) {
    margin-left: 10px;
}

.phone .section-expandable-fatura-action .Button:nth-child(2) {
    margin-top: 10px;
    margin-left: 0;
}

.section-expandable-fatura-reference {
    :root {
        --color-primary: #00acc1;
        --color-secondary: #00838f;
        --color-tertiary: #26c6da;
        --color-quaternary: #ddf0f6;

        --color-primary-hover: #0092a6;
        --color-primary-active: #006875;

        --gradient-color-primary: linear-gradient(0deg, rgba(0, 151, 167, 0.96) 0%, rgba(38, 198, 218, 0.96) 100%);

        --color-grey-1: #cfd8dc;
        --color-grey-2: #607d8b;
        --color-grey-3: #52646c;
        --color-grey-4: #37474f;
        --color-grey-5: #273136;
        --color-grey-6: #d4d4d4;
        --color-grey-7: #ededed;
        --color-grey-8: #9eb0b8;
        --color-grey-9: #fcfcfc;
        --color-grey-10: #f0f5fc;

        --color-appointment-primary: #ffb300;
        --color-appointment-secondary: #ff9800;

        --color-info-primary: #cce5ff;
        --color-info-secondary: #b8daff;

        --color-white: #fff;
        --color-alert: #de323b;
    }

    /*
          File: Patterns_Dublin
          
          1. Imports
          2.1 Patterns > Content
          2.2 Patterns > Controls
          2.3 Patterns > Data
          2.4 Patterns > Development
          2.5 Patterns > Email
          2.6 Patterns > Layout
          2.7 Patterns > Mobile
          2.8 Patterns > Navigation
          2.9 Patterns > Responsive
          2.10 Patterns > Structure
          2.11 Patterns > Utilities
          3. Usefull Classes
      */

    /*------------------------------------*\
                    $1. Imports
      \*-------------------------------------*/

    /* Moved font import to theme template (starter app) */

    /*------------------------------------*\
              $2.1 Patterns > Content
      \*------------------------------------*/

    /* Accordion **************************/
    .AccordionVertical {
        background-color: #fff;
        border-radius: 4px;
    }

    .AccordionVertical_item.open > .AccordionVertical__header {
        border-top: 2px solid #d7a909;
        padding-top: 10px;
    }

    .AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
        background-color: #9ebdd0;
        border: 1px solid #9ebdd0;
        color: #fff;
    }

    /* Alerts **********************************/
    .Alert {
        border-radius: 3px;
    }

    .Alert.Info {
        background-color: #5485a3;
        border-color: #5485a3;
    }

    .Alert.Success {
        background-color: #73a354;
        border-color: #73a354;
    }

    .Alert.Error {
        background-color: #bb5858;
        border-color: #bb5858;
    }

    .Alert.Warning {
        background-color: #bba758;
        border-color: #bba758;
    }

    /* Balloon ******************************/
    .Balloon {
        border: 1px solid #dddedf;
        border-radius: 4px;
        box-shadow: 0 1px 5px 2px rgba(50, 50, 50, 0.1);
    }

    /* Cards ******************************/
    .Card {
        background-color: #fff;
        border: 1px solid #dddedf;
        border-radius: 4px;
        padding: 0;
    }

    /* CardSimple ******************************/
    .CardSimple {
        padding: 10px;
    }

    /* CardSimpleImage ******************************/
    .CardSimpleImage img {
        border: 0;
    }

    .CardSimpleImage .Card_Image img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .CardSimpleImage .Card_Text {
        margin-bottom: 10px;
        padding: 10px;
    }

    .CardSimpleImage .Card_Actions {
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* CardLeftImage ******************************/
    .CardLeftImage .Left .Card_Image img {
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    /* Panel ******************************/
    .Panel {
        background-color: #fff;
        border: 1px solid #dddedf;
        border-radius: 4px;
    }

    .Panel_header,
    .Panel_footer {
        border-bottom: 1px solid #dddedf;
    }

    .Panel_header {
        border: 0;
    }

    .Panel_footer {
        background-color: #e5e5e5;
        border-top: 1px solid #dddedf;
        box-shadow: inset 0 4px 6px -6px rgba(0, 0, 0, 0.2);
        padding: 10px 20px;
    }

    /*  Post ******************************/
    .Post_icon img {
        border: 2px solid #d7a909;
    }

    .Post_content {
        width: auto;
    }

    .Post__label {
        font-weight: 400;
    }

    .Post__description {
        color: #666;
        margin-top: 0;
    }

    .Panel .Post:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* Panel -> Post ******************************/
    .Panel .Post {
        border-bottom: 1px solid #dcddde;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .Panel .Post:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* Section ******************************/
    .Section_header {
        min-height: 42px;
        padding-bottom: 8px;
    }

    .tablet .Section_header,
    .phone .Section_header {
        min-height: 48px;
    }

    /* SectionExpandable ******************************/
    .SectionExpandable {
        background-color: transparent;
        border-radius: 4px;
        padding: 12px 12px 0 12px;
    }

    .SectionExpandable_header {
        border-bottom: 0;
        margin-bottom: 5px;
    }

    .SectionExpandable__icon.Heading2 {
        width: 35px;
    }

    .SectionExpandable__title {
        border-right: 1px solid #ccc;
    }

    .SectionExpandable_content {
        border-radius: 0;
    }

    .SectionExpandable__icon.Heading2 > .fa {
        height: 22px;
        width: 22px;
        margin-right: 3px;

        background-color: transparent;
        color: #00838f;
        font-size: 26px;
        border: none;
    }

    .expanded .SectionExpandable__icon.Heading2 > .fa {
        background-color: #9ebdd0;
        border: 1px solid #9ebdd0;
        border-radius: 22px;
        color: #fff;
        height: 22px;
        margin-right: 10px;
        width: 22px;
    }

    div.Timeline-SectionExpandable:not(.expanded) .SectionExpandable_content {
        height: 0;
        overflow: hidden;
        visibility: visible;
    }

    /*  Panel -> SectionExpandable ******************************/
    .Panel .SectionExpandable {
        background-color: transparent;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        box-shadow: none;
    }

    .Panel .SectionExpandable_header {
        border-bottom: 0;
        margin-bottom: 5px;
    }

    .Panel .SectionExpandable__icon.Heading2 {
        width: 35px;
    }

    .Panel .SectionExpandable__title {
        border-right: 1px solid #ccc;
    }

    .Panel .SectionExpandable_content {
        border-radius: 0;
    }

    .Panel .SectionExpandable__icon.Heading2 > .fa {
        background-color: transparent;
        border: 1px solid #9ebdd0;
        border-radius: 22px;
        color: #48687c;
        height: 22px;
        line-height: 1.3;
        margin-right: 3px;
        width: 22px;
    }

    .Panel .expanded .SectionExpandable__icon.Heading2 > .fa {
        background-color: #9ebdd0;
        border: 1px solid #9ebdd0;
        border-radius: 22px;
        color: #fff;
        height: 22px;
        line-height: 1.3;
        margin-right: 10px;
        width: 22px;
    }

    /* Separator ******************************/
    .Separator {
        border-bottom: 1px solid #fff;
        border-top: 1px solid #dfdfdf;
        margin: 20px 0;
    }

    /* Tooltipster ******************************/
    .tooltipster-base {
        z-index: 100;
    }

    .tooltipster-arrow-bottom span,
    .tooltipster-arrow-bottom-right span,
    .tooltipster-arrow-bottom-left span {
        border-bottom: 8px solid;
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        top: -7px;
    }

    .tooltipster-content .input-row-left {
        width: 24px;
        text-align: center;
    }

    .tooltipster-content .input-row .material-icons {
        line-height: 1;
    }

    /* Gallery ******************************/

    .Gallery .GalleryWrapper {
        margin-left: -20px;
    }

    .tablet .GalleryWrapper {
        margin-left: -10px;
    }

    .phone .GalleryWrapper {
        margin-left: 0;
    }

    .Gallery .GalleryItem {
        margin-bottom: 20px;
        padding-left: 20px;
    }

    .tablet .Gallery .GalleryItem {
        margin-bottom: 10px;
        padding-left: 10px;
    }

    .phone .Gallery .GalleryItem {
        width: 100%;
        padding: 0;
    }

    /* .phone .Gallery .GalleryItem:not(:first-child) {
  margin-left: 10px;
} */

    /* VERTICAL TIMELINE **************************************************************************************************************************/

    /* -------------------------------- 
      Modules - reusable parts of our design
      -------------------------------- */

    .VerticalTimeline-container {
        margin: 0 auto;
        width: 100%;
    }

    .VerticalTimeline-container::after {
        clear: both;
        content: "";
        display: table;
    }

    /* -------------------------------- 

      Main components 

      -------------------------------- */

    .VerticalTimeline {
        margin-bottom: 2em;
        margin-top: 0;
        padding: 10px 0;
        position: relative;
    }

    .VerticalTimeline::before {
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        width: 1px;
        left: 27px;

        background-color: #cfd8dc;
    }

    .VerticalTimeline-block {
        margin: 2em 0;
        position: relative;
    }

    .VerticalTimeline-block:after {
        clear: both;
        content: "";
        display: table;
    }

    .VerticalTimeline-block:first-child {
        margin-top: 0;
    }

    .VerticalTimeline-block:last-child {
        margin-bottom: 0;
    }

    .VerticalTimeline-icon {
        height: 34px;
        width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 2px solid;
    }

    .VerticalTimeline-icon i.icon,
    .VerticalTimeline-icon i.icon:before {
        line-height: 1.6;
    }

    .VerticalTimeline-img {
        position: relative;
        top: 8px;
        left: 11px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        background-color: #fcfcfc;

        
    }

    .VerticalTimeline-description {
        width: 180px;
        padding: 0 10px;
        background-color: #fcfcfc;
        text-align: left;
    }

    .VerticalTimeline-content {
        position: relative;
        margin-left: 53px;
        padding: 10px;
        padding-right: 35px;
        background: #fff;
        border-radius: 0.25em;
        border: 1px solid #cfd8dc;
    }

    .VerticalTimeline-content:after {
        clear: both;
        content: "";
        display: table;
    }

    .Timeline-SectionExpandable,
    .Timeline-container {
        position: relative;
    }

    .Timeline-container {
        margin: 0 -30px;
    }

    .Timeline-container:before {
        content: "";
        position: absolute;
        top: 20px;
        left: 67px;
        width: 1px;
        height: calc(100% - 20px);

        background-color: #cfd8dc;
    }

    .Timeline-container .Timeline-SectionExpandable {
        margin-bottom: 20px;
        padding: 0;
    }

    .Timeline-container .Timeline-SectionExpandable .Timeline-SectionExpandable {
        margin-top: 30px;
    }

    .Timeline-SectionExpandable .SectionExpandable_header,
    .Timeline-SectionExpandable.expanded .SectionExpandable_header {
        padding: 0;
        margin-bottom: 0;
        background-color: #f4f7fc;
    }

    .Timeline-SectionExpandable .SectionExpandable__title.Heading2 {
        padding: 12px 15px;
        font-weight: 400;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        text-align: left;
    }

    .Timeline-SectionExpandable.is-primary .SectionExpandable__title.Heading2 {
        padding-left: 35px;
    }

    .Timeline-SectionExpandable.is-primary .Timeline-SectionExpandable .SectionExpandable__title.Heading2 {
        padding-left: 15px;
    }

    .Timeline-SectionExpandable.is-primary > div > .SectionExpandable__title.Heading2 {
        font-weight: 500;
        border-color: #00acc1;
        background-color: #00acc1;
        color: #fff;
    }

    .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon {
        position: absolute;
        top: 22px;
        right: 40px;
        height: 2px;
        width: 18px;
        background-color: #9eb0b8;
    }

    .Timeline-SectionExpandable.is-primary .SectionExpandable__icon.timeline-section-icon {
        right: 60px;
    }

    .Timeline-SectionExpandable .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon {
        right: 40px;
    }

    .Timeline-SectionExpandable > div > .SectionExpandable__icon.timeline-section-icon.is-primary,
    .Timeline-SectionExpandable.is-primary > div > .SectionExpandable__icon.timeline-section-icon:before {
        background-color: #fff;
    }

    .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon.is-primary:before,
    .Timeline-SectionExpandable.is-primary .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon:before {
        content: "";
        position: absolute;
        top: -8px;
        right: 8px;
        height: 18px;
        width: 2px;
        background-color: #9eb0b8;
    }

    .Timeline-SectionExpandable.expanded .SectionExpandable__icon.timeline-section-icon.is-primary:before,
    .Timeline-SectionExpandable .Timeline-SectionExpandable.expanded .SectionExpandable__icon.timeline-section-icon:before {
        content: none;
    }

    .Timeline-SectionExpandable .SectionExpandable_content,
    .Timeline-SectionExpandable.expanded .SectionExpandable_content {
        padding: 0 20px;
    }

    @-webkit-keyframes VerticalTimeline-bounce-1 {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.5);
        }

        60% {
            opacity: 1;
            -webkit-transform: scale(1.2);
        }

        100% {
            -webkit-transform: scale(1);
        }
    }
    @-moz-keyframes VerticalTimeline-bounce-1 {
        0% {
            opacity: 0;
            -moz-transform: scale(0.5);
        }

        60% {
            opacity: 1;
            -moz-transform: scale(1.2);
        }

        100% {
            -moz-transform: scale(1);
        }
    }
    @keyframes VerticalTimeline-bounce-1 {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -o-transform: scale(0.5);
            transform: scale(0.5);
        }

        60% {
            opacity: 1;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
    }

    @-webkit-keyframes VerticalTimeline-bounce-2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translateX(20px);
        }

        100% {
            -webkit-transform: translateX(0);
        }
    }
    @-moz-keyframes VerticalTimeline-bounce-2 {
        0% {
            opacity: 0;
            -moz-transform: translateX(-100px);
        }

        60% {
            opacity: 1;
            -moz-transform: translateX(20px);
        }

        100% {
            -moz-transform: translateX(0);
        }
    }

    @keyframes VerticalTimeline-bounce-2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            -moz-transform: translateX(-100px);
            -ms-transform: translateX(-100px);
            -o-transform: translateX(-100px);
            transform: translateX(-100px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translateX(20px);
            -moz-transform: translateX(20px);
            -ms-transform: translateX(20px);
            -o-transform: translateX(20px);
            transform: translateX(20px);
        }

        100% {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
        }
    }
    @-webkit-keyframes VerticalTimeline-bounce-2-inverse {
        0% {
            opacity: 0;
            -webkit-transform: translateX(100px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
        }

        100% {
            -webkit-transform: translateX(0);
        }
    }
    @-moz-keyframes VerticalTimeline-bounce-2-inverse {
        0% {
            opacity: 0;
            -moz-transform: translateX(100px);
        }

        60% {
            opacity: 1;
            -moz-transform: translateX(-20px);
        }

        100% {
            -moz-transform: translateX(0);
        }
    }

    @keyframes VerticalTimeline-bounce-2-inverse {
        0% {
            opacity: 0;
            -webkit-transform: translateX(100px);
            -moz-transform: translateX(100px);
            -ms-transform: translateX(100px);
            -o-transform: translateX(100px);
            transform: translateX(100px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
            -moz-transform: translateX(-20px);
            -ms-transform: translateX(-20px);
            -o-transform: translateX(-20px);
            transform: translateX(-20px);
        }

        100% {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
        }
    }

    /* <= TABLET*/
    @media only screen and (min-width: 420px) {
        .VerticalTimeline {
            padding: 1em 0;
        }

        .VerticalTimeline-icon {
            height: 40px;
            width: 40px;
        }

        .VerticalTimeline-content {
            margin-top: 5px;
            margin-left: 57px;
            padding: 1em;
        }

        .VerticalTimeline-img {
            left: 8px;
        }

        .VerticalTimeline-description {
            padding: 10px 10px 0;
        }

        .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon {
            top: 28px;
            right: 40px;
        }

        .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon.is-primary:before,
        .Timeline-SectionExpandable.is-primary .Timeline-SectionExpandable .SectionExpandable__icon.timeline-section-icon:before {
            top: -8px;
            right: 8px;
        }

        .Timeline-container {
            margin: 0;
        }

        .Timeline-container::before {
            left: 27px;
        }

        .Timeline-container .Timeline-SectionExpandable {
            margin-bottom: 30px;
        }

        .Timeline-SectionExpandable .SectionExpandable_content,
        .Timeline-SectionExpandable.expanded .SectionExpandable_content {
            padding: 0;
        }
    }
    /* <= DESKTOP SMALL*/
    @media only screen and (min-width: 1024px) {
        .VerticalTimeline {
            margin-bottom: 3em;
            margin-top: 0;
        }

        .VerticalTimeline::before {
            left: 50%;
            margin-left: -2px;
        }

        .VerticalTimeline-description {
            text-align: center;
            transform: translateX(-60px);
        }
        .VerticalTimeline-content {
            width: 38%;
            margin-left: 0;
            padding: 20px;
        }

        .VerticalTimeline-icon {
            height: 63px;
            width: 63px;
            border: 4px solid;
        }

        .VerticalTimeline-icon .icon.material-icons {
            font-size: 36px;
            line-height: 1.6;
        }

        .Timeline-SectionExpandable .SectionExpandable__title.Heading2 {
            padding: 10px;
            text-align: center;
        }

        .VerticalTimeline-content::before {
            content: "";
            height: 15px;
            width: 15px;
            position: absolute;
            right: 100%;
            left: -9px;
            top: 16px;
            background-color: #fff;
            border-right: 1px solid white;
            border-top: 1px solid;
            border-color: #cfd8dc;
            transform: rotate(225deg);
        }

        .VerticalTimeline-content::before {
            top: 24px;
            right: -9px;
            left: auto;
            border-color: #cfd8dc;
            border-left-color: white;
            transform: rotate(45deg);
        }

        .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content {
            float: right;
        }
        .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content::before {
            border-bottom-color: #cfd8dc;
            left: -9px;
            right: 100%;
            top: 24px;
            transform: rotate(225deg);
        }

        .VerticalTimeline-block {
            margin: 4em 0;
        }
        .VerticalTimeline-block:first-child {
            margin-top: 0;
        }
        .VerticalTimeline-block:last-child {
            margin-bottom: 0;
        }

        .VerticalTimeline-img {
            position: absolute;
            top: -9px;
            left: 50%;
            display: block;
            margin-left: -32px;
            /* Force Hardware Acceleration in WebKit */
            -webkit-transform: translateZ(0);
            -webkit-backface-visibility: hidden;
        }

        .Timeline-container:before {
            left: 50%;
            margin-left: -2px;
        }

        .cssanimations .VerticalTimeline-content.is-hidden {
            visibility: hidden;
        }
        .cssanimations .VerticalTimeline-content.bounce-in {
            -webkit-animation: VerticalTimeline-bounce-2 0.6s;
            -moz-animation: VerticalTimeline-bounce-2 0.6s;
            animation: VerticalTimeline-bounce-2 0.6s;
            visibility: visible;
        }
        /* inverse bounce effect on even content blocks */
        .cssanimations .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content.bounce-in {
            -webkit-animation: VerticalTimeline-bounce-2-inverse 0.6s;
            -moz-animation: VerticalTimeline-bounce-2-inverse 0.6s;
            animation: VerticalTimeline-bounce-2-inverse 0.6s;
        }
        .cssanimations .VerticalTimeline-img.is-hidden {
            visibility: hidden;
        }
        .cssanimations .VerticalTimeline-img.bounce-in {
            -webkit-animation: VerticalTimeline-bounce-1 0.6s;
            -moz-animation: VerticalTimeline-bounce-1 0.6s;
            animation: VerticalTimeline-bounce-1 0.6s;
            visibility: visible;
        }
    }

    /* < DESKTOP */
    @media only screen and (min-width: 1600px) {
        .VerticalTimeline-content {
            width: 360px;
            margin-left: 5%;
        }

        .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content {
            margin-right: 5%;
        }
    }

    /*------------------------------------*\
              $2.2 Patterns > Controls
      \*------------------------------------*/

    /* ButtonGroup ******************************/

    .ButtonGroup {
        padding: 2px;
        display: flex;
        outline: none;
        border-radius: 4px;
        background-color: #f4f7fc;
    }

    .ButtonGroup_button.Button {
        height: 34px;
        min-width: 100px;
        margin: 0;
        flex: 1;
        line-height: 34px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        background-color: #f4f7fc;
        color: #52646c;
    }

    .ButtonGroup_button.Button.active,
    .ButtonGroup_button.Button.active:hover {
        background: #52646c;
        color: #fff;
    }

    .ButtonGroup_button.Button:hover {
        background: #cfd8dc;
    }

    .phone .ButtonGroup_button.Button {
        height: 24px;
        font-size: 12px;
        font-weight: 500;
    }

    .phone .ButtonGroup_button.Button:last-child {
        border-radius: inherit;
    }

    .phone .ButtonGroup_button.Button:first-child {
        border-radius: inherit;
    }
    .phone :not(.NoResponsive) > .ButtonGroup .ButtonGroup_button.Button,
    .phone .ButtonGroup_button.Button.active {
        border: none;
    }

    /* Calendar **************************/
    .pika-table th {
        border-bottom: 0;
    }

    .pika-prev:after,
    .pika-next:after {
        top: 37%;
    }

    .pika-prev,
    .pika-next {
        height: 48px;
    }

    .pika-title {
        border-bottom: 2px solid #d7a909;
    }

    .is-selected .pika-button {
        background-color: #48687c;
    }

    .has-event .pika-button:after {
        background-color: #48687c;
    }

    .pika-lendar .Calendar-navBtn {
        height: 48px;
    }

    .has-event .pika-button:after {
        bottom: 7px;
        left: 22px;
        margin-left: 0;
    }

    /* Calendar DEPRECATED **************************/
    .Calendar-dayNames {
        border-bottom: 0;
        border-top: 2px solid #d7a909;
    }

    .Calendar-navBtn > div {
        color: #d7a909;
    }

    .Calendar-day-selected,
    .Calendar-day-selected:hover {
        background: #48687c;
        color: #fff;
    }

    .Calendar-time-down,
    .Calendar-time-up,
    .Calendar-time-am {
        color: #d7a909;
    }

    /* Dropdown ******************************/
    .DropdownMenu .PH > a {
        color: #999;
        font-weight: 400;
    }

    .DropdownMenu .PH > a:hover {
        color: #999;
    }

    /* Dropdown: ButtonDropdown ******************************/
    .ButtonDropdown .ButtonDropdown_text {
        padding-right: 8px;
    }

    .ButtonDropdown .ButtonDropdown_icon > .fa {
        border-left: 1px solid #ccc;
        padding-left: 8px;
    }

    /* InputWithIcons **************************/
    .InputWithIcons.Right .InputIcon {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .InputWithIcons .InputIcon {
        height: 38px;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    /* Select2 ******************************/

    .select2-search:after {
        color: #273136;
        content: "\f002";
        font-size: 17px;
        font-family: FontAwesome;
        right: 15px;
        position: absolute;
        top: 14px;
    }

    .select2-search input[type="text"] {
        margin-top: 4px;
        padding-right: 35px;
        background: transparent;
    }

    .select2-search .FormEditPencil {
        display: none;
    }

    .select2-container-open .select2-choice .select2-arrow b,
    .select2-dropdown-open .select2-choice div b {
        background-position: -18px 4px;
    }

    a.select2-container .select2-choice,
    .select2-container .select2-choice {
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        color: #273136;
        height: 40px;
        line-height: 40px;
    }

    .select2-container .select2-choice span {
        font-weight: 400;
        line-height: 30px;
    }

    .select2-container .select2-choice .select2-arrow,
    .select2-container .select2-choice div {
        background: transparent;
        border-left: 0;
        border-radius: 0;
    }

    .select2-container .select2-choice .select2-arrow b,
    .select2-container .select2-choice div b {
        background: none;
        display: inline-block;
        font-family: FontAwesome;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
    }

    .select2-container .select2-choice .select2-arrow b:after,
    .select2-container .select2-choice div b:after {
        content: "\f0d7";
    }

    .select2-container-active.select2-dropdown-open .select2-choice {
        border-bottom: 2px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        box-shadow: none;
    }

    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid #999;
    }

    .select2-container-multi .select2-choices {
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        overflow: hidden !important;
        height: auto !important;
    }

    .select2-container .select2-choice > .select2-chosen {
        display: inline;
    }

    /* ToggleButton ******************************/
    .ToggleButton {
        background-color: #dcddde;
        border-color: rgba(0, 0, 0, 0.05);
        border-radius: 30px;
        height: 32px;
    }

    .ToggleButton_label:after {
        border-color: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
        height: 18px;
        width: 20px;
    }

    .ToggleButton_label.changed:after {
        border-radius: 10px;
        box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
        height: 18px;
        left: 24px;
        width: 20px;
    }

    .ToggleButton.changed {
        background-color: #82b660;
        border-color: rgba(0, 0, 0, 0.05);
    }

    /*------------------------------------*\
              $2.3 Patterns > Data
      \*------------------------------------*/

    /* Badges ******************************/
    .Badge {
        border: 1px solid #fff;
    }

    /* Counter ******************************/
    .Counter {
        border-radius: 3px;
    }

    /* IconBadge ******************************/
    .IconBadge_number {
        background-color: #f1c40f;
    }

    /* ProgressBar ******************************/
    .Progress {
        border-radius: 4px;
        height: 18px;
    }

    .Progress span {
        top: -2px;
    }

    .Progress_bar {
        background-image: -webkit-linear-gradient(
            bottom left,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        background-image: -moz-linear-gradient(
            bottom left,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        background-image: -o-linear-gradient(
            bottom left,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        background-image: linear-gradient(
            to top left,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        -webkit-background-size: 40px 40px;
        background-size: 40px 40px;
    }

    /* Tiles ******************************/
    .Tile {
        border-radius: 3px;
        box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2);
        -webkit-transition: all 400ms ease;
        transition: all 400ms ease;
    }

    a .Tile:hover {
        box-shadow: none;
        -webkit-filter: brightness(1.1);
        filter: brightness(1.1);
    }

    .TileIcon_text,
    .TileNumber_text,
    .TileIconText_label {
        font-weight: 400;
        text-transform: uppercase;
    }

    .TileIconText_label.Heading2 {
        color: inherit;
        font-size: 16px;
        text-align: left;
    }

    .TilleIconText_text {
        text-align: left;
    }

    /* Search ******************************/

    .Search_wrapper input[type="text"] {
        padding-left: 40px;
    }

    .Search_wrapper:after {
        color: #273136;
        content: "\f002";
        font-size: 17px;
        left: 15px;
        position: absolute;
        top: 9px;
    }

    /*------------------------------------*\
              $2.7. Patterns > Mobile
      \*------------------------------------*/

    /* ListItem ******************************/
    a:hover > .ListItem {
        background-color: #f0f0f0;
    }

    a > .ListItem.active,
    a:active > .ListItem {
        background-color: #f0f0f0;
    }

    /* ListItemGroup ******************************/
    .ListItemGroup {
        background-color: #fff;
        border-radius: 4px;
    }

    .ListItemGroup a:first-child:hover .ListItem {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .ListItemGroup a:last-child:hover .ListItem {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    /*------------------------------------*\
              $2.8 Patterns > Navigation
      \*------------------------------------*/

    /* NavigationBar: Horizontal ******************************/
    .NavigationBar a,
    .NavigationBar a:link,
    .NavigationBar a:visited {
        color: #c7c7c7;
    }

    .desktop .NavigationBar a:hover {
        text-decoration: none;
    }

    .desktop .NavigationBar a:hover,
    .desktop .NavigationBar a:link:hover {
        color: #3e5154;
    }

    .NavigationBar a.Active {
        color: #3e5154;
    }

    .desktop .NavigationBar a:hover:after,
    .desktop .NavigationBar a:link:hover:after,
    .NavigationBar a.Active:after {
        background-color: #d7a909;
    }

    .NavigationBar a.Active:not(.IE8):before {
        border-bottom: 4px solid #d7a909;
    }

    /* NavigationBar: Vertical ******************************/
    .desktop .NavigationBar.Vertical a:hover,
    .desktop .NavigationBar.Vertical a:link:hover,
    .NavigationBar.Vertical a.Active,
    .NavigationBar.Vertical a:link.Active {
        border-color: #d7a909;
    }

    .NavigationBar.Vertical a.Active:not(.IE8):before {
        border-left: 4px solid #d7a909;
    }

    .phone .NavigationBar .InlineDropdown:active,
    .phone .NavigationBar .InlineDropdown:link:active,
    .tablet .NavigationBar .InlineDropdown:active,
    .tablet .NavigationBar .InlineDropdown:link:active,
    .phone .NavigationBar a:active,
    .phone .NavigationBar a:link:active,
    .tablet .NavigationBar a:active,
    .tablet .NavigationBar a:link:active {
        color: #3e5154;
    }

    .phone .NavigationBar .InlineDropdown:active:after,
    .phone .NavigationBar .InlineDropdown:link:active:after,
    .tablet .NavigationBar .InlineDropdown:active:after,
    .tablet .NavigationBar .InlineDropdown:link:active:after,
    .phone .NavigationBar a:active:after,
    .phone .NavigationBar a:link:active:after,
    .tablet .NavigationBar a:active:after,
    .tablet .NavigationBar a:link:active:after {
        background-color: #d7a909;
    }

    /* TabsClient ******************************/

    .Tabs {
        border: 0;
    }

    .Tabs__tab {
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        color: #52646c;
        flex: 1;
        font-weight: 400;
        border: none;
        border-bottom: 2px solid #00acc1;
        padding: 8px 12px;
    }

    .phone .Tabs__tab {
        padding: 8px 10px;
        font-size: 15px;
        white-space: normal;
    }

    .desktop .Tabs_header,
    .tablet .Tabs_header,
    .Tabs_header {
        height: 45px;
        display: flex;
        background-color: transparent;
        line-height: initial;
    }

    .phone .Tabs_header {
        line-height: initial;
        display: flex;
    }

    .Tabs_body {
        background-color: transparent;
        z-index: unset;
    }

    .Tabs__tab.active {
        background-color: #f4f7fc;
        border-bottom: 4px solid #00acc1;
        font-weight: 500;
        color: #37474f;
    }

    .Tabs .PH:empty {
        display: none;
    }

    .Tabs__Loading {
        display: none !important;
    }

    .phone .tabs-large .Tabs_header {
        height: 56px;
    }

    /* Wizard ******************************/

    .WizardStep.Past,
    .WizardStep.ActiveStep {
        background: transparent;
        border-bottom: 4px solid #00acc1;
    }

    .WizardParent {
        margin-bottom: 30px;
        display: flex;
        background: transparent;
        border: none;
    }

    .phone .WizardParent {
        display: none;
    }

    .WizardStep {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        line-height: 1.5;
        background-color: transparent;
        border-bottom: 1px solid #52646c;
    }

    .WizardStep:before {
        border-bottom: 20px solid transparent;
        border-left: 20px solid transparent;
        border-top: 20px solid transparent;
    }

    .WizardStep.ActiveStep:after,
    .WizardStep:after {
        height: 8px;
        width: 8px;
        position: absolute;
        right: 8px;
        top: 21px;
        content: "";
        border-right: 2px solid #e2e2e2;
        border-top: 2px solid #e2e2e2;
    }

    .WizardStep.Past:after {
        border-color: #00acc1;
    }

    .WizardStep.ActiveStep,
    .WizardStep.ActiveStep a,
    .WizardStep.ActiveStep a:link {
        font-weight: 400;
        color: #37474f;
    }

    .WizardStep.Past,
    .WizardStep.Past a,
    .WizardStep.Past a:link {
        position: relative;
        color: #273136;
    }

    .WizardStep a,
    .WizardStep a:link {
        text-decoration: none;
    }
    .WizardStep,
    .WizardStep a,
    .WizardStep a:link,
    .WizardStep a[disabled="disabled"],
    .WizardStep a[disabled="disabled"]:hover {
        font-size: 18px;
        font-weight: 400;
        color: #52646c;
    }

    .tablet .WizardStep,
    .tablet .WizardStep a,
    .tablet .WizardStep a:link,
    .tablet .WizardStep a[disabled="disabled"],
    .tablet .WizardStep a[disabled="disabled"]:hover {
        font-size: 15px;
    }

    .WizardStep.Past .step {
        position: relative;
    }

    .WizardStep.Past:before {
        content: none;
    }

    .WizardStep.ActiveStep:before {
        content: none;
    }

    .WizardStep:last-child:after {
        content: none;
    }

    .WizardStep > div {
        display: flex;
    }

    .WizardStep > div .icon {
        font-size: 22px !important;
    }

    /*------------------------------------*\
            $3 Usefull Classes
      \*------------------------------------*/

    a,
    a:link,
    a:visited,
    .EditableTable tr.RowControlGroup a {
        color: #00838f;
    }

    a:hover {
        text-decoration: underline;
    }

    /* Buttons ******************************/

    a.Button,
    .Button,
    .fileupload-btn.fileupload-upload-button {
        height: 40px;
        min-width: 150px;
        padding: 0 30px;
        margin-left: 0;
        display: -ms-inline-flexbox;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        float: unset;
        border-radius: 40px;
        font-size: 15px;
        line-height: 1;
        font-weight: 500;
        text-decoration: none;
        text-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: #fff;
        background-image: none;
        color: #37474f;
        border: 2.5px solid #52646c;
        -webkit-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }

    a.Button i.icon,
    a.Button i.icon:before,
    .Button i.icon,
    .Button i.icon:before {
        margin-right: 5px;
        font-size: 18px;
    }

    .tablet a.Button,
    .tablet .Button,
    .phone a.Button,
    .phone .Button {
        line-height: 1;
    }

    .phone a.Button,
    .phone .Button {
        height: 34px;
        min-width: 114px;
        padding: 0 20px;
        font-size: 14px;
        border-width: 2.5px;
        -webkit-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }

    /* input.Button {
          line-height: 30px;
      } */

    .desktop button:hover,
    .desktop a.Button:hover {
        background-color: #52646c;
        color: #fff;
    }

    .desktop button:active,
    .desktop a.Button:active {
        background-color: #006875;
        color: #fff;
    }

    button:disabled,
    a.Button:disabled {
        color: #52646c;
        border: 2px solid #52646c;
    }

    /* Button Tertiary ******************************/
    .Button.Tertiary,
    .fileupload-btn.fileupload-upload-button {
        border: 2.5px solid #26c6da;
        background-color: transparent;
    }

    .desktop .Button.Tertiary:hover,
    .desktop .fileupload-btn.fileupload-upload-button:hover {
        background-color: #0092a6;
        border: 2.5px solid #0092a6;
        color: #fff;
    }

    .desktop .Button.Tertiary:active,
    .desktop .fileupload-btn.fileupload-upload-button:active {
        background-color: #006875;
        border: 2.5px solid #006875;
        color: #fff;
    }

    .desktop .Button.Tertiary:disabled,
    .desktop .fileupload-btn.fileupload-upload-button:disabled {
        border: 2.5px solid #d4d4d4;
        color: #d4d4d4;
    }

    /* Default Action Button ******************************/
    .Button.ButtonDefault,
    .Button.Is_Default {
        background-color: #26c6da;
        color: #fff;
        border: 2.5px solid transparent;
    }

    .desktop .Button.ButtonDefault:hover,
    .desktop .Button.Is_Default:hover {
        background-color: #0092a6;
        border: 2.5px solid #0092a6;
    }

    a.Button:active,
    .ButtonDropdown_button.Button:active {
        background-color: #00838f;
    }

    a.Button:disabled,
    .ButtonDropdown_button.Button:disabled {
        background-color: #88bdc2;
    }

    /* Appointment Action ******************************/
    .Button.Appointment {
        background-color: #ffb300;
        border: 2.5px solid #ffb300;
        box-shadow: none;
        color: #37474f;
    }

    .desktop .Button.Appointment:hover,
    .desktop .Button.Appointment:active {
        background-color: #ff9800;
        border-color: #ff9800;
    }

    /* Appointment Secondary Action ******************************/
    .Button.Appointment-Secondary {
        background-color: transparent;
        border: 2.5px solid #ffb300;
        box-shadow: none;
        color: #37474f;
    }

    .desktop .Button.Appointment-Secondary:hover,
    .desktop .Button.Appointment-Secondary:active {
        background-color: #ff9800;
        border-color: #ff9800;
    }

    /* Link Button ******************************/
    .Button.Link {
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 20px;
        box-shadow: none;
        color: #48687c;
    }

    .desktop .Button.Link:hover {
        background-color: transparent;
        border: 1px solid #69899d;
        color: #69899d;
    }

    .Button.Loading {
        white-space: nowrap;
    }

    .Button.Loading:before,
    .Button.Loading[disabled]:before,
    .Button.Loading:disabled:before {
        background-image: url(/WebPatterns/img/loadingdublin02.GIF?22901);
    }

    .Button.Is_Default.Loading:before,
    .Button.Is_Default.Loading[disabled]:before,
    .Button.Is_Default.Loading:disabled:before,
    .Button.ButtonDefault.Loading:before,
    .Button.ButtonDefault.Loading[disabled]:before,
    .Button.ButtonDefault.Loading:disabled:before {
        background-image: url(/WebPatterns/img/loadingdublin01.GIF?22901);
    }

    /* Submit Button ******************************/

    .Button.Submit {
        margin-top: 30px;
    }

    .tablet .Button.Submit {
        margin-top: 30px;
    }

    .phone .Button.Submit {
        margin-top: 20px;
    }

    .Button.Small {
        font-size: 11px;
        height: 26px;
        line-height: 24px;
        min-width: 60px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .Button.Block {
        display: flex;
        width: 100%;
    }

    .Button.Icon {
        min-width: 0;
    }

    .Button.Icon span.fa {
        margin-left: 0;
    }

    /* Button AddNew (Registos) ******************************/

    .Button.AddNew,
    .tablet .Button.AddNew,
    .phone .Button.AddNew {
        background: #fff;
        border: 1px solid #cfd8dc;
        border-radius: 5px;
        text-transform: uppercase;
        color: #37474f;
        height: 47px;
        font-weight: bold;
    }

    .desktop a.Button.AddNew:hover,
    .tablet a.Button.AddNew:hover,
    .phone a.Button.AddNew:hover,
    .Button.AddNew:hover {
        background-color: #e1e9f4;
        border: 1px solid #cfd8dc;
        border-radius: 5px;
        text-transform: uppercase;
        color: #37474f;
        height: 47px;
        font-weight: bold;
    }

    .Button.AddNew span.fa-fw.fa-plus,
    .fa-fw.fa-plus,
    .fa-fw.fa-plus-circle {
        border: 2px solid #26c6da;
        border-radius: 30px;
        padding: 6px;
        height: 31px;
        width: 31px;
        color: #37474f;
        margin-right: 10px;
        vertical-align: bottom;
    }

    .Button.AddNew span.fa-fw.fa-plus {
        padding: 7px;
    }

    .Button.AddNew span.fa-fw.fa-plus:before {
        line-height: 14px;
        display: block;
        margin-left: 1px;
    }

    /* Buttons Area ******************************/

    .edge .Buttons_Right,
    .ie .Buttons_Right {
        display: flex;
        justify-content: flex-end;
    }

    /* Colors: Background and Text ******************************/
    .background-white {
        background-color: #fff;
    }

    .background-transparent {
        background-color: transparent !important;
    }

    .background-color-grey-6 {
        background-color: #f4f7fc !important;
    }

    .background-color-grey-10 {
        background-color: #f0f5fc !important;
    }

    .color-white {
        color: #fff;
    }

    .color-light-green {
        color: #c1c000 !important;
    }

    .color-orange {
        color: #f9a109 !important;
    }

    .Red {
        background-color: #cd6a5d;
    }

    .Text_red {
        color: #cd6a5d;
    }

    .Green {
        background-color: #73a354;
    }

    .Text_green {
        color: #73a354;
    }

    .Blue {
        background-color: #5080b6;
    }

    .Text_blue {
        color: #5080b6;
    }

    .DarkBlue {
        background-color: #30495a;
    }

    .Text_darkblue {
        color: #30495a;
    }

    .Silver {
        background-color: #dcddde;
    }

    .Text_silver {
        color: #dcddde;
    }

    .Gray {
        background-color: #7f8c8d;
    }

    .Text_gray {
        color: #7f8c8d;
    }

    .Black {
        background-color: #292929;
    }

    .Text_black {
        color: #292929;
    }

    /* Text Classes ******************************/
    h1,
    .Heading1,
    h2,
    .Heading2,
    h3,
    .Heading3,
    h4,
    .Heading4 {
        margin: 0 0 10px;
        color: #273136;
        font-weight: 300;
    }

    .phone h1,
    .phone .Heading1,
    .phone h2,
    .phone .Heading2,
    .phone h3,
    .phone .Heading3,
    .phone h4,
    .phone .Heading4 {
        margin: 0 0 5px;
        font-weight: 500;
    }

    h1,
    .Heading1 {
        font-size: 50px;
        line-height: 52px;
    }

    .phone h1,
    .phone .Heading1 {
        font-size: 24px;
        line-height: 26px;
    }

    h2,
    .Heading2 {
        font-size: 30px;
        font-weight: 500;
        line-height: 38px;
    }

    .phone h2,
    .phone .Heading2 {
        font-size: 18px;
        line-height: 23px;
    }

    h3,
    .Heading3 {
        font-size: 26px;
        line-height: 33px;
        font-weight: 500;
    }

    .phone h3,
    .phone .Heading3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
    }

    h4,
    .Heading4 {
        font-size: 22px;
        font-weight: 400;
        line-height: 28px;
    }

    .phone h4,
    .phone .Heading4 {
        font-size: 15px;
        line-height: 21px;
    }

    span.Heading1,
    span.Heading2,
    span.Heading3,
    span.Heading4,
    span.lead-normal,
    span.lead-strong {
        display: block;
    }

    .lead-normal {
        margin-bottom: 10px;
        font-size: 20px;
        color: #52646c;
    }

    .lead-strong {
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 500;
        line-height: 30px;
        color: #52646c;
    }

    .phone .lead-normal,
    .phone .lead-strong {
        margin-bottom: 5px;
        font-size: 16px;
        line-height: 24px;
    }

    .notes-text,
    .lead-message-text {
        color: #52646c;
    }

    .notes-text,
    a.lead-message-text,
    .lead-message-text {
        font-size: 14px;
        line-height: 21px;
    }

    .phone .notes-text,
    a.lead-message-text,
    .lead-message-text {
        font-size: 13px;
    }

    a.rich-text,
    .rich-text {
        font-size: 16px;
        line-height: 26px;
        color: #52646c;
    }

    .phone a.rich-text,
    .phone .rich-text {
        font-size: 15px;
        line-height: 21px;
    }

    .Thin {
        font-weight: 300 !important;
    }

    .Regular {
        font-weight: 400 !important;
    }

    .Medium {
        font-weight: 500 !important;
    }

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

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

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

    /* OS PopUps ******************************/
    div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
    div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
        background: #253b4a;
    }

    .os-internal-ui-widget-overlay {
        background-color: rgba(96, 125, 139, 0.5) !important;
        opacity: 1 !important;
    }

    /* RichWidget Tabs*/

    .tablet .Tabs_TabOff,
    .tablet li.Tabs_TabOff,
    .phone .Tabs_TabOff,
    .phone li.Tabs_TabOff {
        width: 32px;
    }

    /*------------------------------------*\
              $1. General Properties
      \*-------------------------------------*/

    html,
    body {
        background-color: #fff;
        color: #273136;
        font-size: 16px;
        line-height: 26px;
        font-weight: 400;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    html,
    body,
    form,
    .Page {
        height: 100%;
    }

    /* a links **************************/

    a {
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    a[disabled="disabled"],
    a[disabled="disabled"]:hover {
        color: #ccc;
        text-decoration: none;
    }

    div[onclick] {
        cursor: pointer; /* add a pointer cursor when the div has a click event */
    }

    .OSAutoMarginTop {
        margin-top: 20px;
    }

    a.link-no-style {
        font-weight: inherit;
        font-size: inherit;
    }

    a.link-no-style:hover {
        text-decoration: none;
    }

    /*------------------------------------*\
              $2. Structure
      \*-------------------------------------*/

    html .ThemeGrid_Container {
        position: relative;
        min-height: calc(100vh - 90px);
        min-width: 320px;
        width: auto;
        margin: 0 auto;
        padding: 0;
        background-color: #fff;
    }

    /* header **************************/
    .Header {
        background: linear-gradient(to right, rgba(0, 151, 167, 1) 0%, rgba(38, 198, 218, 1) 100%);
        border-bottom: 1px solid #bbb;
        box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.24);
        color: #fff;
        display: table;
        height: 50px;
        left: 0;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 20;

        
    }

    .tablet .Header {
        display: flex;
    }

    .phone .Header {
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: left 300ms ease;
        transition: left 300ms ease;
    }

    /* button **************************/
    .Header .Button.Header_buttonMenu {
        display: none;
        font-size: 20px;
        height: 36px;
        line-height: 24px;
        padding: 5px;
        position: absolute;
        top: 10px;
        width: 38px;
        z-index: 99;
    }

    .tablet .Header .Button.Header_buttonMenu,
    .phone .Header .Button.Header_buttonMenu {
        display: block;
        left: 5px;
        border-radius: 0;
        border: none;
        background-color: transparent;
        color: white;
        font-weight: 400;
    }

    .Header .Balloon_content {
        display: none;
    }

    .Balloon_content {
        padding: 17px 19px 15px;
    }

    /* Application title **************************/
    .Header_title {
        height: 100%;
        padding-left: 30px;
        position: absolute;
        left: 0;
        display: flex;
        align-items: center;
        line-height: 54px;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300px;
        z-index: 2;
    }

    .tablet .Header_title {
        padding-left: 0;
        margin: 0 auto;
        position: relative;
    }

    .tablet .Header_title a {
        text-align: center;
    }

    .Application_Title img {
        height: 25px;
    }

    .tablet .Application_Title,
    .phone .Application_Title {
        display: none;
    }

    /* Responsive Context **************************/

    .Page.phone.MenuOpen .Header,
    .Page.phone.MenuOpen .Content.ThemeGrid_Wrapper {
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }

    .phone .Header_title {
        left: 20px;
        border-right: none;
    }

    .phone .Header_title {
        margin-left: 40px;
    }

    .Header_title a {
        color: #2c4150;
        font-size: 25px;
        font-weight: 300;
    }

    .Header_title a img {
        vertical-align: middle;
    }

    .Header_title a,
    .Header_title a:link,
    .Header_title a:visited,
    .Header_title a:hover {
        text-decoration: none;
    }

    /* application search **************************/
    .Header_search {
        display: block;
        text-align: center;
        font-size: 22px;
        margin-top: 14px;
        min-height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        position: fixed;
        vertical-align: middle;
        width: 100%;

        
        
        
        
    }

    .Header_search img {
        height: 24px;
    }

    /* application user **************************/
    .Header_user {
        display: flex;
        align-items: center;
        height: 50px;
        padding-right: 20px;
        position: absolute;
        right: 0;
    }

    .Header__activity {
        margin-left: auto;
        color: #48687c;
        display: inline-block;
        vertical-align: middle;
    }

    .firefox .Header__activity {
        height: 50px;
        text-align: right;
    }

    .phone .Header__activity {
        display: none;
    }

    .Header__loginInfo a,
    .Header__loginInfo {
        display: flex;
        color: #fff;
        font-weight: 400;
    }

    .tablet .Header__loginInfo a,
    .tablet .Header__loginInfo,
    .phone .Header__loginInfo a,
    .phone .Header__loginInfo {
        color: #273136;
    }

    .tablet .Header__loginInfo,
    .phone .Header__loginInfo {
        margin-top: 60px;
    }

    .tablet .Header__loginInfo,
    .phone .Header__loginInfo {
        padding: 10px 20px;
    }

    /* login info web block **************************/

    /* Login Info **************************/

    .Login_Info {
        margin: 30px 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .desktop .Login_Info {
        height: 114px;
    }

    .tablet .Login_Info {
        margin-top: 70px;
    }

    .phone .Login_Info {
        margin: 0;
        padding: 12px 15px;
        flex-direction: row;
        background: linear-gradient(to right, rgba(0, 151, 167, 1) 0%, rgba(38, 198, 218, 1) 100%);
    }

    .LoginInfo_image {
        height: 72px;
        width: 72px;
        margin-bottom: 10px;
        /* border: 3px solid #fff; */
        border-radius: 50%;
        /* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); */
        /* background-image: url("/PC_TH/img/default_user.png");*/
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: height 0.3s, width 0.3s ease;
    }

    .LoginInfo_image .UserInitials.Large {
        height: 72px;
        width: 72px;
        transition: height 0.3s, width 0.3s ease;
    }

    .LoginInfo_image .UserInitials.Large span {
        font-size: 30px;
        font-weight: 500;
        line-height: 2.5em;
        transition: all 0.3s;
    }

    .desktop.small .LoginInfo_image,
    .desktop.small .LoginInfo_image .UserInitials.Large {
        height: 32px;
        width: 32px;
    }

    .desktop.small .LoginInfo_image .UserInitials.Large span {
        font-size: 15px;
        font-weight: 400;
        line-height: 2.2em;
    }

    .desktop.small .Menu:hover .LoginInfo_image,
    .desktop.small .Menu:hover .LoginInfo_image .UserInitials.Large {
        height: 72px;
        width: 72px;
    }

    .desktop.small .Menu:hover .LoginInfo_image .UserInitials.Large span {
        font-size: 30px;
        font-weight: 500;
        line-height: 2.5em;
    }

    .phone .LoginInfo_image {
        height: 40px;
        width: 40px;
        margin-right: 10px;
        margin-bottom: 0;
        border: none;
        box-shadow: none;
        flex-shrink: 0;
    }

    .phone .LoginInfo_image .UserInitials.Large {
        height: 40px;
        width: 40px;
    }

    .phone .LoginInfo_image .UserInitials.Large span {
        font-size: 16px;
        font-weight: 500;
        line-height: 2.7em;
    }

    .LoginInfo {
        color: #2d2b31;
        font-size: 14px;
        margin-top: 14px;
        text-align: right;
    }

    .LoginInfo_username {
        display: flex;
        align-items: center;
        line-height: 22px;
    }

    .phone .LoginInfo_username {
        color: #fff;
    }

    .LoginInfo_username-name {
        color: #273136;
        text-align: center;
        line-height: 1.4;
    }

    .desktop .LoginInfo_username-name {
        padding: 0 8px;
        margin-bottom: 10px;
    }

    .desktop.small .user-panel,
    .desktop.small .LoginInfo_username-name {
        visibility: hidden;
        opacity: 0;
    }

    .desktop.small .Menu:hover .user-panel,
    .desktop.small .Menu:hover .LoginInfo_username-name {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.3s, opacity 0.3s linear;
        transition-delay: 0.3s;
    }

    .phone .LoginInfo_username-name {
        font-size: 15px;
        color: #fff;
    }

    /* Menu **************************/
    .Menu {
        background: -webkit-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
        background: -moz-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
        background: -ms-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
        background: -o-linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
        background: linear-gradient(180deg, #fafcfe 0%, #f4f7fc 100%);
        bottom: 0;
        left: 0;
        position: fixed;
        top: 50px;
        width: 240px;
        z-index: 5;
        color: #52646c;

        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);

        
    }

    .desktop.small .Menu {
        width: 60px;
        transition: 0.3s ease-in-out width;
    }

    .desktop.small .Menu:hover {
        width: 240px;
    }

    .menu-link-label {
        margin-left: 15px;
        font-size: 14px;
        font-weight: 400;
        color: inherit;
        line-height: 32px;
    }

    .Menu_DropDownButton_Open .menu-link-label {
        margin-left: 13px;
    }

    .desktop.small .menu-link-label {
        opacity: 0;
        transition: 0.1s opacity;
    }

    .phone .menu-link-label {
        margin-left: 12px;
        line-height: 17px;
    }

    .desktop.small .Menu:hover .menu-link-label {
        opacity: 1;
        transition: 1s opacity;
    }

    @media (min-width: 1260px) and (max-width: 1366px) {
        .desktop.small .Menu {
            width: 240px;
        }

        .desktop.small .menu-link-label {
            opacity: 1;
        }

        .desktop.small .Menu .LoginInfo_image,
        .desktop.small .Menu .LoginInfo_image .UserInitials.Large {
            height: 72px;
            width: 72px;
        }

        .desktop.small .LoginInfo_image .UserInitials.Large span {
            font-size: 30px;
            font-weight: 500;
            line-height: 2.5em;
            transition: all 0.3s;
        }

        .desktop.small .user-panel,
        .desktop.small .LoginInfo_username-name {
            visibility: visible;
            opacity: 1;
            transition: visibility 0.3s, opacity 0.3s linear;
            transition-delay: 0.3s;
        }

        .desktop.small .Menu_DropDownButton_Open {
            height: auto !important;
        }

        .desktop.small .Menu_DropDownButton_Open .Menu_DropDownPanel {
            display: block !important;
        }
    }

    .tablet .Menu,
    .phone .Menu {
        height: 100%;
        left: -240px;
        overflow-x: hidden;
        top: 0;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: left 300ms ease;
        transition: left 300ms ease;
        width: 240px;
        -webkit-overflow-scrolling: touch;
    }

    .phone .Menu {
        left: -275px;
        width: 275px;
        z-index: 20;
    }

    .Page.tablet.MenuOpen .Menu,
    .Page.phone.MenuOpen .Menu {
        left: 0;
    }

    /* login info  **************************/

    .phone .Menu .LoginInfo {
        background-color: #355264;
        color: #fff;
        display: block;
        margin-top: 0;
        padding: 20px 20px 20px 25px;
        text-align: left;
        width: 240px;
    }

    .Application_Menu {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .desktop.small .Application_Menu {
        margin-top: 0;
        height: calc(100% - 140px);
    }

    .Menu_TopMenus {
        margin-top: 10px;
        width: 100%;
    }

    .tablet .Menu_TopMenus,
    .phone .Menu_TopMenus {
        margin-top: 0;
    }

    .phone .Menu_TopMenus {
        padding-bottom: 0;
    }

    .Menu_BottomMenus,
    .Menu_ActionMenus {
        padding-bottom: 10px;
        border-top: 1px solid #cfd8dc;
    }

    .Menu_BottomMenus {
        padding: 10px 0;
    }

    .Menu_MiddleMenus {
        margin-bottom: 10px;
    }

    .tablet .Menu_MiddleMenus,
    .tablet .Menu_BottomMenus,
    .tablet .Menu_ActionMenus {
        margin-top: 0;
        padding: 10px 0;
    }

    .phone .Menu_MiddleMenus,
    .phone .Menu_BottomMenus {
        margin-top: 0px;
    }

    .phone .Menu_MiddleMenus {
        padding: 0 0 5px;
        border: none;
    }

    .phone .Menu_BottomMenus {
        padding: 5px 0;
    }

    .Menu_ActionMenus {
        padding: 20px 30px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: none;
    }

    .desktop.small .Menu_ActionMenus {
        display: inline-block;
        visibility: hidden;
        opacity: 0;
    }

    @media (min-width: 1260px) and (max-width: 1366px) {
        .desktop.small .Menu_ActionMenus {
            display: inline-block;
            visibility: visible;
            opacity: 1;
            transition: visibility 0.3s, opacity 0.3s linear;
            transition-delay: 0.3s;
        }
    }

    .desktop.small .Menu:hover .Menu_ActionMenus {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.3s, opacity 0.3s linear;
        transition-delay: 0.3s;
    }

    .tablet .Menu_ActionMenus {
        margin-bottom: 10px;
        padding-bottom: 20px;
    }

    .phone .Menu_ActionMenus {
        margin-top: 10px;
        padding-bottom: 10px;
    }

    .phone .Menu_ActionMenus .Button {
        width: 100%;
    }

    .Menu_TopMenu {
        position: relative;
    }

    .Menu_TopMenu a:link,
    .Menu_TopMenu a:visited,
    .Menu_TopMenu a {
        padding: 4px 7px 4px 30px;
    }

    .Menu_TopMenu a:link,
    .Menu_TopMenu a:visited,
    .Menu_TopMenu a,
    .Menu_DropDownButton_Open .Menu_Item {
        color: #52646c;
        display: flex;
        align-items: center;
        text-decoration: none;
        text-shadow: none;
        white-space: nowrap;
    }

    .Menu_TopMenu a:hover {
        background-color: rgba(0, 172, 193, 0.03);
    }

    .Menu_TopMenu.Menu_TopMenuActive a:hover {
        background-color: inherit;
    }

    .desktop.small .Menu_TopMenu a:link,
    .desktop.small .Menu_TopMenu a:visited,
    .desktop.small .Menu_TopMenu a,
    .desktop.small .DropdownOpen .Menu_Item,
    .tablet .Menu_TopMenu a:link,
    .tablet .Menu_TopMenu a:visited,
    .tablet .Menu_TopMenu a,
    .tablet .DropdownOpen .Menu_Item {
        padding: 7px;
        padding-left: 20px;
        white-space: nowrap;
    }

    .phone .Menu_TopMenu a:link,
    .phone .Menu_TopMenu a:visited,
    .phone .Menu_TopMenu a,
    .phone .Menu_TopMenu .Menu_DropDownButton_Open .Menu_Item {
        padding: 7px 18px;
        font-size: 14px;
    }

    .Menu_Sections {
        height: calc(100vh - 270px);
        padding: 10px 0 20px;
        border-top: 1px solid #cfd8dc;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* .ie .Menu_Sections {
    height: calc(100vh - 262px);
  } */

    .phone .Menu_Sections {
        height: auto;
        border-top: none;
    }

    @media (min-height: 0px) and (max-height: 400px) {
        .Menu_Sections {
            height: auto;
        }
    }

    .Menu_Sections::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .Menu_Sections::-webkit-scrollbar:vertical {
        width: 6px;
    }

    .Menu_Sections::-webkit-scrollbar:horizontal {
        height: 6px;
    }

    .Menu_Sections::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white; /* should match background, can't be transparent */
        background-color: rgba(0, 0, 0, 0.5);
    }

    .Menu_DropDownArrow {
        display: none;
    }

    /* style icon font **************************/

    .Menu_TopMenu a .icon,
    .Menu_TopMenu a .icon.mdi:before,
    .Menu_TopMenu a .icon.material-icons {
        font-size: 20px;
        color: inherit;
    }

    .Menu_TopMenu a span {
        margin-left: 15px;
        color: inherit;
    }

    .phone .Menu_TopMenu a span {
        margin-left: 12px;
    }

    /* show submenu if active **************************/
    .Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty) {
        display: block;
    }

    .desktop.small .Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty),
    .tablet .Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty) {
        display: none;
    }

    /* style icon on hover **************************/

    .Menu_TopMenu .Badge {
        float: right;
        top: 6px;

        
        
        
        
    }

    .desktop.small .Menu_TopMenu .Badge,
    .tablet .Menu_TopMenu .Badge {
        display: none;
    }

    .Menu_DropDownButton_Open,
    .Menu_DropDownButton {
        display: block;
    }

    .Menu_DropDownButton {
        cursor: pointer;
    }

    .Menu_DropDownButton_Open .Menu_TopMenu,
    .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
        padding: 4px 7px 4px 29px;
    }

    .desktop.small .Menu_DropDownButton_Open .Menu_TopMenu,
    .desktop.small .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder,
    .phone .Menu_DropDownButton_Open .Menu_TopMenu,
    .phone .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
        padding: 7px;
        padding-left: 18px;
    }

    .tablet .Menu_DropDownButton_Open .Menu_TopMenu,
    .tablet .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
        padding: 7px;
        padding-left: 20px;
    }

    .MenuSlider_Toggler {
        color: #fff;
    }

    .Menu_DropDownPanel {
        background-color: transparent;
        border: 0;
        box-shadow: none;
        display: none;
        list-style: none;
        margin: 0;
        position: relative;
    }

    .Menu_DropDownButton_Open .Menu_DropDownPanel {
        display: block;
        transition: display 1s;
    }

    .desktop.small .Menu .Menu_DropDownButton_Open {
        height: 40px;
    }

    .desktop.small .Menu .Menu_DropDownButton_Open .Menu_DropDownPanel {
        display: none;
    }

    .desktop.small .Menu:hover .Menu_DropDownButton_Open {
        height: auto;
    }

    .desktop.small .Menu:hover .Menu_DropDownButton_Open .Menu_DropDownPanel {
        display: block;
    }

    .desktop .Menu_DropDownPanel,
    .desktop.small .Menu_DropDownPanel {
        height: 100%;
        position: relative;
        z-index: 219;
    }

    .Menu_DropDownPanel a,
    .Menu_DropDownPanel a:link,
    .Menu_DropDownPanel a:visited {
        background: none;
        border-radius: 0;
        border-width: 0;
        box-shadow: none;
        clear: both;
        color: #52646c;
        display: block;
        font-size: 14px;
        font-weight: 400;
        height: 32px;
        line-height: 32px;
        margin: 0;
        min-width: 0;
        padding: 0 0 0 56px;
        text-align: left;
        text-decoration: none;
        text-shadow: none;
        white-space: nowrap;
    }

    /* remove border from last submenu **************************/
    .Menu_DropDownPanel a:last-child {
        border-bottom: none;
    }

    /* hover submenu **************************/

    /* 
      a.Menu_SubMenuItem,
      .desktop a.Menu_SubMenuItem:hover,
      a.Menu_SubMenuItem:link,
      a.Menu_SubMenuItem:visited {
          border-bottom: 0;
          height: 32px;
          padding: 0;

          
      } */

    .desktop.small .Menu_SubItemsPlaceholder,
    .tablet .Menu_SubItemsPlaceholder {
        height: 100%;
        left: 0;
        position: relative;
        top: 0px;
        width: 100%;

        -webkit-overflow-scrolling: touch;
    }

    /* Page content header **************************/
    .HeaderPage {
        display: block;
    }

    .HeaderPage .BreadcrumbsContainer {
        margin-bottom: 5px;
        background-color: #f4f7fc;
        border-bottom: 2px solid #cfd8dc;

        
    }

    .HeaderPage .BreadcrumbsContainer .Breadcrumbs {
        margin: 0 auto;
        padding: 10px 10px 0;
        max-width: 896px;
    }

    .desktop.big .HeaderPage .BreadcrumbsContainer .Breadcrumbs,
    .desktop.hd .HeaderPage .BreadcrumbsContainer .Breadcrumbs {
        max-width: 65%;
    }

    .HeaderPage .Breadcrumbs,
    .HeaderPage .Breadcrumbs a,
    .HeaderPage .Breadcrumbs span {
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 500;
        color: #273136;
    }

    .Breadcrumbs-separator {
        padding: 0 5px;
        font-size: 13px;
    }

    .phone .HeaderPage .BreadcrumbsContainer {
        margin-bottom: 0;
        border-width: 1px;
        
    }

    .phone .HeaderPage .BreadcrumbsContainer > div span {
        
    }

    /* Page Title **************************/
    .Title {
        display: inline-block;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }

    .Title.Heading1 {
        border-bottom: 1px solid #ddd;
        height: 50px;
        margin-bottom: 20px;
        margin-top: 0;
        padding-left: 20px;

        
        
    }

    .tablet.portait .Title.Heading1,
    .tablet.mini .Title.Heading1 {
        font-size: 22px;
        position: relative;
    }

    .phone.portrait .Title.Heading1 {
        border: none;
        display: block;
        height: 40px;
        margin-bottom: 10px;
        padding: 0 20px;
        position: relative;
        text-align: center;

        
    }

    .Title_Section {
        margin-top: 34px;
        position: relative;
    }

    /* Page actions **************************/
    .Actions {
        display: inline-block;
        font-size: 14px;
        line-height: 34px;
        margin-right: 20px;
        position: absolute;
        right: 0;
        text-align: right;
        width: auto;

        
        
    }

    .Actions:not(empty) {
        
    }

    .phone.portrait .Actions {
        margin-bottom: 20px;
        padding: 0 20px;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .phone.portrait .Actions .Button {
        margin: 0;
        margin-bottom: 10px;
        width: 100%;
    }

    .Actions a {
        margin-left: 10px;
    }

    .Actions a:first-child {
        margin-left: 0;
    }

    a.ActionAdd,
    a.ActionEdit,
    a.ActionDelete,
    a.ActionChange {
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        height: 32px;
        line-height: 30px;
        margin-left: 10px;
        min-width: 80px;
        padding: 0 15px;
        text-align: center;
        text-decoration: none;
        -webkit-transition: background-color 300ms ease-out;
        transition: background-color 300ms ease-out;
    }

    a.ActionAdd:hover,
    a.ActionEdit:hover,
    a.ActionDelete:hover,
    a.ActionChange:hover {
        background-color: #efefef;
    }

    a.ActionAdd[disabled],
    a.ActionAdd:disable,
    a.ActionEdit[disabled],
    a.ActionEdit:disable,
    a.ActionDelete[disabled],
    a.ActionDelete:disable,
    a.ActionChange[disabled],
    a.ActionChange:disable {
        background-color: #ccc;
        box-shadow: none;
        color: #999;
    }

    a.ActionAdd,
    a.ActionEdit,
    a.ActionChange {
        background-color: #fff;
        border-bottom: 2px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
        color: #48687c;
    }

    a.ActionAdd {
        background-color: #d7a909;
        border-bottom: 2px solid #b79008;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        color: #fff;
        text-shadow: none;
    }

    a.ActionAdd:hover {
        background-color: #e9bd24;
        border-bottom: 2px solid #c6a11f;
    }

    a.ActionDelete {
        background-color: #bb5858;
        border-bottom: 2px solid #9f4b4b;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
        color: #fff;
    }

    a.ActionDelete:hover {
        background-color: #d56565;
        border-bottom: 2px solid #b55656;
    }

    .Actions input.Button {
        margin-left: 20px;
    }

    /* Wrapper content **************************/
    .Content.ThemeGrid_Wrapper {
        left: 0;
        min-width: 20px;
        overflow-x: hidden;
        padding-top: 0;
        position: absolute;
        right: 0;
        top: 50px;
        background-color: #fff;

        
        
        
    }

    .phone .Content.ThemeGrid_Wrapper {
        left: 0;
        overflow: hidden;
        -webkit-transition: left 300ms ease;
        transition: left 300ms ease;
        width: 100%;

        
    }

    /* Content **************************/
    .MainContent {
        margin-left: 20px;
        margin-right: 20px;
        min-height: 20px;
        padding-bottom: 30px;

        
        
        
    }

    .phone .MainContent {
        margin: 0;

        
        
    }

    .Page.MenuOpen .MainContent {
        pointer-events: none;
    }

    /* footer **************************/
    .Footer {
        height: 40px;
        padding: 10px 0;
        top: 100%;
        width: auto;
        background-color: #52646c;
        color: #fff;
        font-size: 12px;
        text-align: center;

        
    }

    .phone .Footer {
        display: none;
    }

    .MainPopup {
        background: #fff;
        display: table-cell;
        padding: 0;
        vertical-align: top;
    }

    .MainPopup .Button.ThemeGrid_MarginGutter {
        margin-left: 10px;
    }

    .OSInlineClear {
        /* This style will never be used in runtime.
        When applied in Service Studio, it will prevent the style 'OSInline' from being
        automatically applied to divs and tables with widths != (fill parent) */
    }

    /*------------------------------------*\
              $3. Forms
      \*-------------------------------------*/

    .Form {
        margin-top: 30px;
    }

    .tablet .Form {
        margin-top: 20px;
    }

    .phone .Form {
        margin-top: 10px;
    }

    .Search_wrapper input[type="text"],
    textarea,
    select,
    input {
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: #273136;
        font-size: 14px;
        line-height: 18px;
    }

    textarea,
    select,
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="tel"],
    .Search_wrapper input[type="text"],
    input[type="date"] {
        min-height: 40px;
    }

    textarea::placeholder,
    select::placeholder,
    input::placeholder {
        color: #52646c;
        font-size: 14px;
    }

    html input {
        height: 40px;
    }

    html input::-ms-clear {
        display: none;
    }

    label,
    .Form label {
        font-size: 16px;
        line-height: 20px;
        color: #273136;
    }

    .tablet label,
    .tablet .Form label,
    .phone label,
    .phone-iframe label,
    .phone .Form label {
        font-size: 15px;
    }

    .desktop input[type="date"] {
        padding-top: 0;
    }

    /* radio and checkbox override rules **************************/

    html input[type="radio"]:before,
    html input[type="checkbox"]:before,
    html input[type="radio"],
    html input[type="checkbox"] {
        box-shadow: none !important;
    }

    html input[type="radio"],
    html input[type="checkbox"] {
        background-color: transparent;
        height: 26px;
        width: 26px;
    }

    /* force padding to center vertically on Firefox **************************/
    select {
        color: rgb(102, 102, 102);
        height: 32px;
        line-height: 1.43;
        padding: 4px 8px;
    }

    .Form input.ReadOnly,
    .Form textarea.ReadOnly,
    .Form select.ReadOnly {
        background-color: #fff;
        border-bottom-color: #ccc;
        border-color: #ccc;
        border-left-color: #ccc;
        border-radius: 4px;
        border-right-color: #ccc;
        border-top-color: #ccc;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: #666;
        font-size: 14px;
        vertical-align: middle;
    }

    .Form input.Not_Valid.ReadOnly,
    .Form textarea.Not_Valid.ReadOnly,
    .Form select.Not_Valid.ReadOnly,
    .select2-container.Not_Valid .select2-choice {
        border: 1px solid #de323b;
    }

    .Form input.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
    .Form textarea.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
    .Form select.SmartInput_Changed.ReadOnly + a.SmartInput_Undo {
        display: none;
    }

    input[type="text"]:focus,
    input[type="password"]:focus {
        border: 1px solid #999;
        box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.06);
    }

    textarea:focus {
        border: 1px solid #999;
    }

    input[type="radio"]:disabled:before,
    input[type="checkbox"]:disabled:before {
        background: rgba(204, 204, 204, 0.1);
    }

    input[disabled="disabled"],
    input[disabled="disabled"][type="text"]:focus,
    input[disabled="disabled"][type="password"]:focus,
    textarea[disabled="disabled"]:focus,
    textarea[readonly="readonly"]:focus,
    select[disabled="disabled"]:focus,
    input[readonly="readonly"]:focus,
    input[disabled="disabled"]:focus,
    .Form textarea[readonly="readonly"].ReadOnly:not(.Not_Valid):focus,
    .Form textarea[disabled="disabled"].ReadOnly:not(.Not_Valid):focus {
        border: 1px solid #cfd8dc;
        background-color: #ededed;
        color: #767676;
    }

    .Form input.Not_Valid,
    .Form select.Not_Valid,
    .Form textarea.Not_Valid,
    input.Not_Valid,
    select.Not_Valid,
    textarea.Not_Valid {
        border-radius: 4px;
    }

    .ie input[type="radio"],
    .ie input[type="checkbox"],
    .ie .Form input[type="radio"],
    .ie .Form input[type="checkbox"] {
        border-radius: 0;
    }

    select.Not_Valid:focus,
    input.Not_Valid:focus,
    textarea.Not_Valid:focus {
        border: 1px solid #de323b;
    }

    select.Not_Valid::placeholder,
    input.Not_Valid::placeholder,
    textarea.Not_Valid::placeholder {
        color: #de323b;
    }

    .Form input[type="checkbox"].Not_Valid,
    .Form input[type="radio"].Not_Valid,
    input[type="checkbox"].Not_Valid,
    input[type="radio"].Not_Valid {
        border: transparent;
        padding: 0;
    }

    select:not(.Not_Valid):focus {
        border: 1px solid #999;
    }

    select::-ms-value {
        background: none;
        color: #42413d;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* radio and checkbox **************************/

    input[type="radio"]:before {
        box-shadow: none;
        border-color: #cfd8dc;
    }

    input[type="radio"]:checked:before {
        box-shadow: none;
        border-color: #00acc1;
        background-color: #00acc1;
    }

    input[type="radio"]:checked:after {
        height: 8px;
        width: 8px;
        top: 29%;
        left: 31%;
        border-color: #fff;
        background-color: #fff;
    }

    input[type="checkbox"]:before {
        box-shadow: none;
    }

    input[type="checkbox"]:checked:before {
        border-color: #00acc1;
        box-shadow: none;
    }

    input[type="checkbox"]:checked:after {
        height: 5px;
        width: 10px;
        top: 8px;
        left: 8px;
        border-color: #00acc1;
    }

    /* Validation Message*****/

    .ValidationMessage {
        color: #de323b;
        font-size: 13px;
        line-height: 30px;
    }

    /* Mandatory*****/

    .Form label.MandatoryLabel:after {
        color: #de323b;
    }

    /*------------------------------------*\
              $4. Buit-in widgets
      \*-------------------------------------*/

    /* filter form **************************/
    .Filters_Wrapper {
        background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 4px;
        line-height: 34px;
        padding: 20px;
    }

    .Filters_Wrapper .Button {
        margin-left: 10px;
    }

    .phone .Filters_Wrapper input[type="text"] {
        margin-bottom: 10px;
        width: 100%;
    }

    .phone .Filters_Wrapper input.Button.Is_Default {
        margin-left: 0;
    }

    /* editable table **************************/
    .EditableTable {
        border: 1px solid #dedede;
        border-radius: 4px;
        font-size: 14px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .EditableTable thead td {
        border-bottom: 1px solid #ddd;
        border-radius: 4px;
        color: #666;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 1px;
        padding-left: 20px;
        text-transform: uppercase;
    }

    .EditableTable tbody tr:not(.RowControlGroup) td {
        border-bottom: 1px solid #ddd;
    }

    .EditableTable tr.Selected td {
        background-color: #fafcff;
    }

    .EditableTable tr.OnEdit + tr.RowControlGroup .ControlActions,
    .EditableTable tr.Selected + tr.RowControlGroup .ControlActions {
        background: #fafcff;
        border: 1px solid #ddd;
        border-top: 2px solid #fafcff; /* same as background */
        left: 50%;
        margin-left: -82px;
        margin-top: -2px;
        padding: 6px;
    }

    .EditableTable tr.RowControlGroup a {
        color: #125f90;
        cursor: pointer;
        display: none;
        width: 50px;
    }

    td.RowWithAddAction {
        border-bottom: 0;
    }

    td.RowWithAddAction i {
        font-size: 14px;
        margin-right: 5px;
    }

    body .EditableTable input:not(.InEditMode),
    body .EditableTable textarea:not(.InEditMode),
    body .EditableTable select:not(.InEditMode) {
        background: transparent;
        border: 1px solid transparent;
        box-shadow: none;
        color: #666;
        font-size: 14px;
    }

    /* Submit Button */
    .EditRecord_Buttons .Button {
        line-height: 15px;
    }

    /* Header **************************/
    .TableRecords_Header {
        border-bottom: 1px solid #ddd;
        color: #666;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 10px 0 10px 10px;
    }

    /* table **************************/
    table.EditRecord,
    table.ShowRecord {
        background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 4px;
        margin-top: 0;
    }

    /* First row **************************/
    table.EditRecord tr:first-child td,
    table.ShowRecord tr:first-child td {
        padding-top: 20px;
    }

    /* All columns **************************/
    table.EditRecord tr td,
    table.ShowRecord tr td {
        padding-right: 20px;
    }

    /* First column **************************/
    table.EditRecord tr td:first-child,
    table.ShowRecord tr td:first-child {
        padding-left: 20px;
    }

    /* Last Row **************************/
    table.EditRecord tr:last-child td,
    table.ShowRecord tr:last-child td {
        padding-bottom: 20px;
    }

    /* First Column / first column - tablet and phone **************************/
    .tablet table.EditRecord tr:first-child td:first-child,
    .tablet table.ShowRecord tr:first-child td:first-child,
    .phone table.EditRecord tr:first-child td:first-child,
    .phone table.ShowRecord tr:first-child td:first-child {
        padding-top: 20px;
    }

    .tablet table.EditRecord tr td,
    .tablet table.ShowRecord tr td,
    .phone table.EditRecord tr td,
    .phone table.ShowRecord tr td {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tablet td.EditRecord_Caption:first-child + .EditRecord_Value,
    .phone td.EditRecord_Caption:first-child + .EditRecord_Value {
        padding-right: 20px;
    }

    /* Last Row / Last Column on tablet and phone **************************/
    .tablet table.EditRecord tr:last-child td:last-child,
    .tablet table.ShowRecord tr:last-child td:last-child,
    .phone table.EditRecord tr:last-child td:last-child,
    .phone table.ShowRecord tr:last-child td:last-child {
        padding-bottom: 20px;
    }

    .TableRecords > tbody > tr > td a {
        font-weight: 400;
    }

    .TableRecords {
        border: 1px solid #dedede;
        border-radius: 4px;
        padding: 0;
    }

    .TableRecords tr:nth-child(even) {
        background-color: rgba(240, 245, 252, 0.3);
    }

    .TableRecords_OddLine,
    .TableRecords_EvenLine {
        border-bottom: 1px solid #ddd;
        padding: 10px;
        vertical-align: middle;
    }

    .TableRecords_OddLine:first-child,
    .TableRecords_EvenLine:first-child,
    .TableRecords_Header:first-child {
        padding-left: 20px;
    }

    .phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine,
    .phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine {
        padding: 5px 16px;
    }

    /* Columns **************************/

    .Columns2 > .Column {
        width: 50%;
        padding: 0 10px;
    }

    .Form .Columns.MarginBottom,
    .Columns.MarginBottom {
        margin-bottom: 0;
    }

    .Form .Columns2 > .Column {
        padding: 0 15px;
    }

    .Form .Columns2 > .Column.ColFirst {
        padding-left: 0;
    }

    .Form .Columns2 > .Column.ColLast {
        padding-right: 0;
    }

    .tablet .Form .Columns2 > .Column {
        padding: 0 8px;
    }

    .phone .Form .Columns2 > .Column {
        padding: 0;
    }

    .tablet .Form .Columns2 > .Column.ColFirst,
    .phone .Form .Columns2 > .Column.ColFirst {
        padding-left: 0;
    }

    .tablet .Form .Columns2 > .Column.ColLast,
    .phone .Form .Columns2 > .Column.ColLast {
        padding-right: 0;
    }

    .tablet .Columns.MarginBottom.tab_BreakFirst,
    .tablet .Columns.MarginBottom.tab_BreakLast,
    .tablet .Columns.MarginBottom.tab_BreakAll,
    .tablet .Columns.MarginBottom.tab_BreakMiddle,
    .phone .Columns.MarginBottom.mob_BreakFirst,
    .phone .Columns.MarginBottom.mob_BreakLast,
    .phone .Columns.MarginBottom.mob_BreakAll,
    .phone .Columns.MarginBottom.mob_BreakMiddle {
        margin-bottom: 0;
    }

    .Column.empty {
        display: none;
    }

    /*? Modifier add equal height to columns - Add a container with "columns-container--equal-height" class to columns pattern */
    .columns-container--equal-height .Columns {
        display: flex;
    }

    .columns-container--equal-height .Columns .Column > div {
        height: 100%;
    }

    /*------------------------------------*\
              $5. RichWidgets
      \*-------------------------------------*/

    /* Feedback Message **************************/
    div.Feedback_Message_Info:before,
    div.Feedback_Message_Success:before,
    div.Feedback_Message_Error:before,
    div.Feedback_Message_Warning:before {
        font-size: 20px;
        left: 15px;
        opacity: 0.5;
        top: 16px;
    }

    div.Feedback_Message_Success {
        background-color: #73bf00;
        border-color: #73bf00;
        border-radius: 0;
        color: #fff;
    }

    div.Feedback_Message_Error {
        background-color: #db2500;
        border-color: #db2500;
        border-radius: 0;
        color: #fff;
    }

    div.Feedback_Message_Warning {
        background-color: #debd00;
        border-color: #debd00;
        border-radius: 0;
        color: #fff;
    }

    div.Feedback_Message_Info {
        background-color: #009dde;
        border-radius: 0;
        color: #fff;
    }

    /* This margin-top:0px is for all pages without .Page in layout **************************/

    div.Feedback_Message_Wrapper {
        left: 0;
        margin-top: 0;
        z-index: 5000;
    }

    .Page div.Feedback_Message_Wrapper {
        left: 0;
        margin-top: 0px;
    }

    div.Feedback_Message_Error,
    div.Feedback_Message_Success,
    div.Feedback_Message_Warning,
    div.Feedback_Message_Info {
        border: none;
        border-radius: 0;
        box-shadow: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: #fff;
        line-height: normal;
        font-size: 16px;
        max-width: 100%;
        min-width: 300px;
        padding: 18px 40px 18px 40px;
        width: 100%;
        word-break: break-word;
        -webkit-backface-visibility: hidden;
    }

    a.Feedback_Message_Wrapper_Close {
        color: #000;
        opacity: 0.7;
        right: 10px;
        top: 18px;
    }

    .tablet a.Feedback_Message_Wrapper_Close,
    .phone a.Feedback_Message_Wrapper_Close {
        pointer-events: none;
    }

    div.Feedback_Message_Error .Feedback_Message_Wrapper_Close:after,
    div.Feedback_Message_Warning .Feedback_Message_Wrapper_Close:after,
    div.Feedback_Message_Info .Feedback_Message_Wrapper_Close:after,
    div.Feedback_Message_Success .Feedback_Message_Wrapper_Close:after {
        color: #fff;
        content: "\f00d"; /* fa-times at http://fortawesome.github.io/Font-Awesome/icons/ */
        font-family: FontAwesome;
        text-align: right;
    }

    a.Feedback_Message_Wrapper_Close:hover {
        opacity: 0.6;
    }

    /* Ajax Loading **************************/
    .Feedback_AjaxWait {
        
        
    }

    /* Pagination **************************/

    .ListNavigation_Wrapper,
    .list-navigation-wrapper {
        margin: 20px 0px;
        text-align: center;
    }

    a.ListNavigation_PageNumber:link,
    span.ListNavigation_CurrentPageNumber,
    span.ListNavigation_Ellipsis {
        height: 30px;
        width: 30px;
        background-color: #ededed;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #52646c;
        text-decoration: none;
    }

    a.ListNavigation_PageNumber:link:hover,
    span.ListNavigation_CurrentPageNumber:hover,
    span.ListNavigation_Ellipsis:hover {
        background-color: #efefef;
    }

    span.ListNavigation_CurrentPageNumber,
    span.ListNavigation_CurrentPageNumber:hover {
        border: 1px solid #00acc1;
        box-shadow: none;
        color: #00acc1;
        cursor: default;
    }

    a.ListNavigation_Previous:link,
    a.ListNavigation_Next:link,
    span.ListNavigation_DisabledNext,
    span.ListNavigation_DisabledPrevious {
        background-color: #ededed;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        padding-bottom: 5px;
        padding-top: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #52646c;
        text-decoration: none;
    }

    a.ListNavigation_Previous:link:hover,
    a.ListNavigation_Next:link:hover,
    span.ListNavigation_DisabledNext:hover,
    span.ListNavigation_DisabledPrevious:hover {
        background-color: #efefef;
    }

    /* Ajax Loading **************************/
    .Feedback_AjaxWait {
        position: fixed;
        top: 49px;
        right: 0;
        left: 241px;
        height: calc(100vh - 49px);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #607d8b;
        color: white;
        font-size: 12px;

        z-index: 10000;
    }

    .Form .select2-container .select2-choice {
        box-shadow: none;
        height: 40px;
        line-height: 40px;
    }

    .Form .select2-container:after {
        top: 10px;
    }

    .Form .select2-container .select2-choice span {
        font-weight: normal;
        line-height: 40px;
    }

    /* Calendar Pika SIngle **************************/

    .pika-single {
        z-index: 3;
        border: none;
        width: 360px;
    }

    .pika-single.is-bound {
        width: auto;
        border-radius: 4px;
    }

    @media only screen and (max-width: 420px) {
        .pika-single.is-bound {
            width: 85vw;
        }
    }

    .ModalMessage .pika-single.is-bound {
        position: fixed !important;
    }

    .phone .pika-single {
        width: auto;
    }

    .pika-lendar {
        padding: 17px;
        width: 100%;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #fff FFF;
        box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.1);
    }

    .is-bound .pika-lendar {
        max-width: 360px;
    }

    .pika-lendar .pika-title {
        padding-top: 10px;
        display: flex;
        justify-content: center;
        border: none;
        font-weight: 500;
        text-transform: uppercase;
    }

    .ie .pika-lendar .pika-title {
        padding-top: 0;
    }

    .pika-lendar .pika-label:first-child {
        padding: 0;
        margin-right: 10px;
    }

    .calendar-custom .pika-lendar .pika-label:first-child {
        margin-right: 25px;
    }

    .calendar-custom .pika-lendar .pika-label {
        position: relative;
        overflow: inherit;
    }
    .calendar-custom .pika-lendar .pika-label::before {
        content: "";
        height: 5px;
        width: 5px;
        position: absolute;
        top: 3px;
        right: -14px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(135deg);
    }

    .pika-lendar .Calendar-navBtn,
    .pika-lendar .pika-time-container {
        display: none;
    }

    .pika-lendar .pika-prev {
        left: 0 !important;
        border: none;
    }

    .pika-lendar .pika-next {
        right: 0 !important;
        border: none;
    }

    .pika-lendar button.pika-prev:hover,
    .pika-lendar button.pika-next:hover {
        background: transparent;
    }

    .pika-table th {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.3px;
        line-height: 15px;
        text-transform: uppercase;
        color: #37474f;
        opacity: 1;
    }

    .pika-table th > abbr {
        text-decoration: none;
    }

    .pika-lendar .pika-button {
        width: 32px;
        padding: 3px 4px;
        font-size: 14px;
        border-radius: 4px;
    }

    .pika-lendar .is-today .pika-button {
        border: 1px solid #00444f;
    }

    .pika-lendar .is-selected .pika-button {
        background-color: #52646c;
        color: #fff;
    }

    .pika-table td {
        height: 40px;
        padding-top: 6px;
        padding-left: 8px;
    }
    .is-outside-current-month .pika-button {
        opacity: 0;
    }

    .pika-title select {
        top: -20px;
        left: -5px;
    }

    .calendar-custom .pika-select {
        pointer-events: inherit;
    }

    /*------------------------------------*\
              $6. Login
      \*-------------------------------------*/

    /* Feddback Message on Login **************************/
    .Page .Login + div + span div.Feedback_Message_Wrapper {
        margin-top: 0;
        width: 100% !important;
    }

    .Login_Footer {
        background: -webkit-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
        background: -moz-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
        background: -ms-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
        background: -o-linear-gradient(90deg, #00152a 0%, #2d4657 100%);
        background: linear-gradient(0deg, #00152a 0%, #2d4657 100%);
        box-shadow: inset 2px 4px 5px 0 rgba(0, 0, 0, 0.41);
        height: 20%;
        left: 0;
        margin-left: 0;
        width: 100%;
    }

    .tablet .Login_Footer,
    .phone .Login_Footer {
        bottom: 0;
        height: 50px;
        padding-top: 15px;
        position: fixed;
    }

    .Login_Footer a,
    .Login_Footer a:link,
    .Login_Footer a:visited {
        color: #fff;
    }

    .Login__Form {
        background-color: rgba(0, 0, 0, 0);
    }

    .Login_Box {
        top: 50%;
    }

    .Login__Logo {
        padding-bottom: 0;
    }

    .Login_Text {
        color: #606060;
        font-size: 12px;
        font-weight: 400;
    }

    /*------------------------------------*\
              $7. Theme Grid
      \*-------------------------------------*/

    /* 12 columns **************************/
    html .ThemeGrid_Width12 {
        width: auto;
    }

    /* 12 columns **************************/
    html .tablet .ThemeGrid_Width12 {
        width: 100%;
    }

    html .tablet .ThemeGrid_Width12 {
        margin-left: 0;
    }

    /*------------------------------------*\
              $7.1 Layout Custom
      \*------------------------------------*/

    /*---Layout Base---*/

    .layout-base {
        background-color: #fff;
    }

    .layout-base .MainContent {
        margin: 0;
        padding: 0;
        background-color: #fcfcfc;
    }

    /*---Content Base---*/

    .content-base {
        max-width: 896px;
        min-height: calc(100vh - 90px);
        margin: 0 auto;
        padding: 30px 25px;
        background-color: #fcfcfc;
    }

    .desktop.hd .content-base,
    .desktop.big .content-base {
        max-width: 65%;
    }

    .phone .content-base {
        padding: 25px 15px;
    }

    @media (min-width: 1260px) and (max-width: 1366px) {
        .desktop.small .content-base {
            margin: 0 auto 0 270px;
        }
    }

    .tablet .content-base {
        padding: 30px;
    }

    /*---Content Medium Left---*/

    .content-medium-left {
        padding: 0;
        margin: 0;
        display: flex;
    }

    .content-medium-left .main-content-left,
    .content-medium-left .main-content-right {
        min-height: calc(100vh - 97px);
        padding: 60px 0 30px;
        display: flex;
    }

    .content-medium-left .main-content-left {
        width: 40%;
        padding-right: 30px;
        justify-content: flex-end;
        background-color: #fff;
    }

    .content-medium-left .main-content-right {
        width: 60%;
        padding-left: 95px;
        justify-content: flex-start;
        background-color: #f4f7fc;
    }

    .content-medium-left .main-content-left-inner {
        width: 100%;
        max-width: calc(1100px * 0.4);
        padding-left: 20px;
    }

    .content-medium-left .main-content-right-inner {
        width: 100%;
        max-width: calc(1100px * 0.6);
        padding-right: 20px;
    }

    .content-medium-left .main-content-right-inner.col-space-between {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /*-Responsive-*/

    .desktop.small .content-medium-left .main-content-right {
        padding-left: 3%;
    }

    .tablet .content-medium-left .main-content-left,
    .phone .content-medium-left .main-content-left {
        display: none;
    }

    .tablet .content-medium-left .main-content-right,
    .phone .content-medium-left .main-content-right {
        width: 100%;
        padding: 50px 5% 70px;
        justify-content: center;
        background-color: #fff;
    }

    .phone .content-medium-left .main-content-right {
        padding: 30px 5% 50px;
    }

    .tablet .content-medium-left .main-content-right-inner,
    .phone .content-medium-left .main-content-right-inner {
        max-width: none;
        padding-right: 0;
    }

    /*---Layout Custom---*/

    .Content {
        padding-top: 50px;
    }

    .main-wrapper {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .sub-wrapper {
        max-width: 896px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /*---Layout Backoffice---*/

    .desktop .Content.content-backoffice {
        left: 240px;
        padding-top: 30px;
    }

    .desktop.small .Content.content-backoffice {
        left: 60px;
        padding-top: 30px;
    }

    .Content.content-backoffice .MainContent {
        min-height: calc(100vh - 200px);
    }

    .Content.content-backoffice .MainContent {
        min-height: calc(100vh - 200px);
    }

    /*------------------------------------*\
              $0. Studio Preview
      \*-------------------------------------*/

    /* header **************************/
    .Page.phone .Header__loginInfo,
    .Page.phone .Header__activity,
    .Page.phone .Header_search,
    .Page.tablet .Header_search {
        
    }

    /* wrapper **************************/
    .Page.phone .ThemeGrid_Wrapper {
        
    }
    .Page.tablet .ThemeGrid_Wrapper {
        
    }

    /* menu **************************/
    .Menu {
        
        
    }

    .Application_Menu {
        
    }

    .tablet .Menu_TopMenu a:link,
    .tablet .Menu_TopMenu a:visited,
    .tablet .Menu_TopMenu a {
        white-space: normal;

        
        
        
    }

    .tablet .Menu_TopMenu a:link span.fa,
    .tablet .Menu_TopMenu a:visited span.fa,
    .tablet .Menu_TopMenu a span.fa {
        
    }

    /* Iphone X Landscape Styles */
    .phone.iphonex.landscape .Button.Header_buttonMenu {
        margin-left: constant(safe-area-inset-left);
        margin-left: env(safe-area-inset-left);
    }

    .phone.iphonex.landscape .Header_title {
        margin-left: 70px;
    }

    .iphonex.landscape .MainContent {
        margin-left: constant(safe-area-inset-left);
        margin-left: env(safe-area-inset-left);
        margin-right: constant(safe-area-inset-right);
        margin-right: env(safe-area-inset-right);
    }

    .phone.iphonex.landscape .Menu .LoginInfo {
        padding: 20px 20px 20px constant(safe-area-inset-left);
        padding: 20px 20px 20px env(safe-area-inset-left);
    }

    .iphonex.landscape .Menu_TopMenu a,
    .iphonex.landscape .Menu_TopMenu a:link,
    .iphonex.landscape .Menu_TopMenu a:visited {
        padding: 12px 20px 12px constant(safe-area-inset-left);
        padding: 12px 20px 12px env(safe-area-inset-left);
    }

    /* ExcludeFromPickers: ActionAdd, ActionChange, ActionDelete, ActionEdit, Actions, Application_Menu, Badge, Breadcrumbs, BreadcrumbsContainer, , 
      Content, ControlActions, desktop, EditableTable, EditRecord, EditRecord_Buttons, fa, Feedback_AjaxWait, Feedback_Message_Error, 
      Feedback_Message_Info, Feedback_Message_Success, Feedback_Message_Warning, Feedback_Message_Wrapper, Feedback_Message_Wrapper_Close, 
      Filters_Wrapper, Footer, Form, Header, Header__activity, Header__loginInfo, Header_buttonMenu, Header_search, Header_title, Header_user, 
      HeaderPage, ie, ie10, ie11, ie8, InEditMode, ListNavigation_CurrentPageNumber, ListNavigation_DisabledNext, ListNavigation_DisabledPrevious, 
      ListNavigation_Ellipsis, ListNavigation_Next, ListNavigation_PageNumber, ListNavigation_Previous, Loader, Login__Form, Login__Logo, Login_Box, 
      Login_Footer, Login_Text, LoginInfo, LoginInfo_username, MainContent, MainPopup, Menu, Menu_DropDownArrow, Menu_DropDownButton, Menu_DropDownPanel, 
      Menu_SubItemsPlaceholder, Menu_SubMenuItem, Menu_SubMenuItemActive, Menu_TopMenu, Menu_TopMenuActive, Menu_TopMenus, menuOpen, MenuSlider_Toggler, 
      mini, Not_Valid, OnEdit, open, OSAutoMarginTop, OSInlineClear, Page, phone, portait, Responsive, RowControlGroup, RowWithAddAction, select2-choice, 
      select2-container, Selected, ShowRecord, SmartInput_Undo, TableRecords, TableRecords_EvenLine, TableRecords_Header, TableRecords_OddLine, tablet, 
      ThemeGrid_Container, ThemeGrid_MarginGutter, ThemeGrid_Width12, ThemeGrid_Wrapper, Title, Title_Section */

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** * * * * * * *  * *   END OF PATTERNS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

      /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** * * * * * * *  * *   START OF THEME * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

      /*
          How to generate a theme for your company: 
          
              1 - Go to https://silkui.outsystems.com/ThemeCustomizer/GenerateDublin.aspx
              2 - Copy the generated CSS
              3 - Replace the CSS for Primary Color Customization below with the Generated CSS

      */

    /*------------------------------------*\
                  Import Font
      \*------------------------------------*/

    @font-face {
        font-family: "Azo Sans";
        src: url("/PC_TH/Fonts/AzoSans-Regular.eot") format("embedded-opentype");
        src: url("/PC_TH/Fonts/AzoSans-Regular.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Regular.woff") format("woff");
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: "Azo Sans";
        src: url("/PC_TH/Fonts/AzoSans-Thin.eot") format("embedded-opentype");
        src: url("/PC_TH/Fonts/AzoSans-Thin.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Thin.woff") format("woff");
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: "Azo Sans";
        src: url("/PC_TH/Fonts/AzoSans-Medium.eot") format("embedded-opentype");
        src: url("/PC_TH/Fonts/AzoSans-Medium.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Medium.woff") format("woff");
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: "Azo Sans";
        src: url("/PC_TH/Fonts/AzoSans-Black.eot") format("embedded-opentype");
        src: url("/PC_TH/Fonts/AzoSans-Black.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Black.woff") format("woff");
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: "Azo Sans";
        src: url("/PC_TH/Fonts/AzoSans-Bold.eot") format("embedded-opentype");
        src: url("/PC_TH/Fonts/AzoSans-Bold.woff2") format("woff2"), url("/PC_TH/Fonts/AzoSans-Bold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
    }

    /*------------------------------------*\
                  Font Definition
      \*------------------------------------*/

    html,
    body,
    a,
    select,
    form,
    fieldset,
    table,
    tr,
    td,
    img,
    input,
    button,
    select,
    textarea,
    optgroup,
    option,
    .TileIcon_text,
    .TileNumber_text,
    .TileIconText_label,
    .Heading1,
    .Heading2,
    .Heading3,
    .Heading4,
    .Header_title a,
    .EditableTable thead td,
    .TableRecords_Header {
        font-family: "Azo Sans", sans-serif;
    }

    /*------------------------------------*\
                    Font Classes
      \*------------------------------------*/

    /***************************************/
    /***** PRIMARY COLOR CUSTOMIZATION *****/
    /***************************************/

    .Menu_DropDownPanel {
        -webkit-filter: brightness(110%);
        filter: brightness(1.1);
    }

    .Header__activity,
    .LoginInfo,
    .Login_Text,
    .Text_black {
        color: #fff;
    }

    .phone .Menu .LoginInfo {
        background-color: #00acc1; /*primary-color*/
        -webkit-filter: brightness(90%);
        filter: brightness(0.9);
        
    }

    .Menu_TopMenu a:link,
    .Menu_TopMenu a:visited,
    .Menu_TopMenu a {
        border-bottom-color: rgba(0, 0, 0, 0.1);
        box-shadow: none;
    }

    .Menu_DropDownPanel a.Menu_SubMenuItemActive,
    .Menu_DropDownPanel a.Menu_SubMenuItemActive:visited,
    .Menu_DropDownPanel a.Menu_SubMenuItemActive:link,
    .Menu_DropDownPanel a.Menu_SubMenuItem:hover {
        color: #00acc1;
    }

    .Menu_TopMenu a span.fa {
        border-color: #fff;
    }

    .Menu_TopMenuActive a span.fa {
        color: #fff;
        border-color: #fff;
    }

    .Menu_TopMenuActive,
    .Menu_TopMenuActive a:link,
    .Menu_TopMenuActive a,
    .Menu_TopMenuActive .DropdownOpen,
    .Menu_DropDownButton_Open .Menu_TopMenuActive .Menu_Item {
        background-color: #ddf0f6;
        color: #00acc1 !important;
        font-weight: 500;
    }

    .Menu_DropDownPanel a span.fa {
        color: #fff;
    }

    .Feedback_AjaxWait {
        color: #00acc1; /*primary-color*/
    }

    .Login_Footer {
        background: #00acc1; /*primary-color*/
        background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
        background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
        background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
        background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    }

    .AccordionVertical_item.open .AccordionVertical__header {
        border-top-color: #00acc1; /*primary-color*/
    }

    .AccordionVertical_item.open .AccordionVertical___icon > .fa {
        background-color: #00acc1; /*primary-color*/
        border-color: #00acc1; /*primary-color*/
    }

    .AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
        background-color: #00acc1; /*primary-color*/
        border-color: #00acc1; /*primary-color*/
    }

    .Post_icon img {
        border-color: #00acc1; /*primary-color*/
    }

    .expanded .SectionExpandable__icon.Heading2 > .fa {
        background-color: transparent;
        color: #00838f;
        font-size: 26px;
        border: none;
    }

    .Panel .SectionExpandable__icon.Heading2 > .fa {
        color: #00acc1; /*primary-color*/
        border: 1px solid #00acc1; /*primary-color*/
    }

    .Panel .expanded .SectionExpandable__icon.Heading2 > .fa {
        background-color: #00acc1; /*primary-color*/
        border: #00acc1; /*primary-color*/
    }
    .Calendar-day-selected,
    .Calendar-day-selected:hover {
        background: #00acc1; /*primary-color*/
    }

    .Calendar-navDisabled > div,
    .topBar-navDisabled .Calendar-navBtn > div,
    .Calendar-time-down,
    .Calendar-time-up,
    .Calendar-time-am {
        color: #00acc1; /*primary-color*/
    }

    .Calendar-dayNames {
        border-top-color: #00acc1; /*primary-color*/
    }

    .Calendar-navBtn > div {
        color: #00acc1; /*primary-color*/
    }

    .desktop .NavigationBar a:hover,
    .desktop .NavigationBar a:link:hover {
        color: #00acc1; /*primary-color*/
    }

    .NavigationBar a.Active {
        color: #00acc1; /*primary-color*/
    }

    .desktop .NavigationBar a:hover:after,
    .desktop .NavigationBar a:link:hover:after,
    .NavigationBar a.Active:after {
        background-color: #00acc1; /*primary-color*/
    }

    .NavigationBar a.Active:not(.IE8):before {
        border-bottom-color: #00acc1; /*primary-color*/
    }

    .desktop .NavigationBar.Vertical a:hover,
    .desktop .NavigationBar.Vertical a:link:hover,
    .NavigationBar.Vertical a.Active,
    .NavigationBar.Vertical a:link.Active {
        border-color: #00acc1; /*primary-color*/
    }

    .NavigationBar.Vertical a.Active:not(.IE8):before {
        border-left-color: #00acc1; /*primary-color*/
    }

    .phone .NavigationBar .InlineDropdown:active,
    .phone .NavigationBar .InlineDropdown:link:active,
    .tablet .NavigationBar .InlineDropdown:active,
    .tablet .NavigationBar .InlineDropdown:link:active,
    .phone .NavigationBar a:active,
    .phone .NavigationBar a:link:active,
    .tablet .NavigationBar a:active,
    .tablet .NavigationBar a:link:active {
        color: #00acc1; /*primary-color*/
    }

    .phone .NavigationBar .InlineDropdown:active:after,
    .phone .NavigationBar .InlineDropdown:link:active:after,
    .tablet .NavigationBar .InlineDropdown:active:after,
    .tablet .NavigationBar .InlineDropdown:link:active:after,
    .phone .NavigationBar a:active:after,
    .phone .NavigationBar a:link:active:after,
    .tablet .NavigationBar a:active:after,
    .tablet .NavigationBar a:link:active:after {
        background-color: #00acc1; /*primary-color*/
    }

    a.ActionAdd:hover {
        background-color: #00acc1; /*primary-color*/
        border-bottom-color: #00acc1; /*primary-color*/
        -webkit-filter: brightness(90%);
        filter: brightness(0.9);
        
    }
    a.ActionDelete:hover {
        background-color: #bb5858;
        -webkit-filter: brightness(90%);
        filter: brightness(0.9);
        
    }

    a.ActionAdd,
    a.ActionDelete {
        color: #fff;
    }

    a.ActionAdd {
        background-color: #00acc1; /*primary-color*/
        border-bottom-color: #00acc1; /*primary-color*/
    }

    .desktop .Button.Link:hover {
        background-color: transparent;
        border-color: #00acc1; /*primary-color*/
        color: #00acc1; /*primary-color*/
    }

    div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
    div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
        background: #00acc1; /*primary-color*/
    }

    .SectionIndex a.active,
    .SectionIndex a:hover {
        border-bottom-color: #00acc1; /*primary-color*/
        color: #00acc1; /*primary-color*/
    }

    .SectionIndex.vertical a.active,
    .SectionIndex.vertical a:hover {
        border-left-color: #00acc1; /*primary-color*/
    }

    .TableRecords > tbody > tr > td a {
        color: #00838f;
    }

    .IconBadge_number {
        background-color: #00acc1; /*primary-color*/
    }

    .pika-prev:after,
    .pika-next:after {
        color: #00acc1; /*primary-color*/
    }

    .is-selected .pika-button {
        background-color: #00acc1; /*primary-color*/
    }

    .has-event .pika-button:after {
        background-color: #ffb300;
    }

    .Feedback_AjaxWait {
        color: #222;
    }

    @-webkit-keyframes loader {
        0%,
        100% {
            box-shadow: 0 -3em 0 0.2em #222, 2em -2em 0 0 #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 0 #222;
        }
        12.5% {
            box-shadow: 0 -3em 0 0 #222, 2em -2em 0 0.2em #222, 3em 0 0 0 #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        25% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 0 #222, 3em 0 0 0.2em #222, 2em 2em 0 0 #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        37.5% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 0 #222, 2em 2em 0 0.2em #222, 0 3em 0 0 #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        50% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 0 #222, 0 3em 0 0.2em #222, -2em 2em 0 0 #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        62.5% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 0 #222, -2em 2em 0 0.2em #222, -3em 0 0 0 #222, -2em -2em 0 -0.5em #222;
        }
        75% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0.2em #222, -2em -2em 0 0 #222;
        }
        87.5% {
            box-shadow: 0 -3em 0 0 #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0 #222, -2em -2em 0 0.2em #222;
        }
    }
    @keyframes loader {
        0%,
        100% {
            box-shadow: 0 -3em 0 0.2em #222, 2em -2em 0 0 #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 0 #222;
        }
        12.5% {
            box-shadow: 0 -3em 0 0 #222, 2em -2em 0 0.2em #222, 3em 0 0 0 #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        25% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 0 #222, 3em 0 0 0.2em #222, 2em 2em 0 0 #222, 0 3em 0 -0.5em #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        37.5% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 0 #222, 2em 2em 0 0.2em #222, 0 3em 0 0 #222, -2em 2em 0 -0.5em #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        50% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 0 #222, 0 3em 0 0.2em #222, -2em 2em 0 0 #222, -3em 0 0 -0.5em #222, -2em -2em 0 -0.5em #222;
        }
        62.5% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 0 #222, -2em 2em 0 0.2em #222, -3em 0 0 0 #222, -2em -2em 0 -0.5em #222;
        }
        75% {
            box-shadow: 0 -3em 0 -0.5em #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0.2em #222, -2em -2em 0 0 #222;
        }
        87.5% {
            box-shadow: 0 -3em 0 0 #222, 2em -2em 0 -0.5em #222, 3em 0 0 -0.5em #222, 2em 2em 0 -0.5em #222, 0 3em 0 -0.5em #222, -2em 2em 0 0 #222, -3em 0 0 0 #222, -2em -2em 0 0.2em #222;
        }
    }

    .Application_Menu {
         /*primary-color*/
        
    }

    /*------------------------------------*\
                  Custom CSS
      \*------------------------------------*/

    /*---------------Input Col------------------*/

    .input-col {
        position: relative;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }

    .input-col label {
        display: block;
        margin-bottom: 10px;
        padding-top: 0;
    }

    .input-col input,
    .input-col select,
    .input-col textarea,
    .input-col .select2-container {
        width: 100%;
    }

    .input-col input[type="radio"],
    .input-row input[type="radio"] {
        width: 26px;
    }

    /*-Responsive-*/

    .phone .Columns .input-col {
        margin-bottom: 10px;
    }

    /*---------------Input Row------------------*/

    .input-row {
        position: relative;
        display: flex;
    }

    .input-row .ValidationMessage {
        left: 0;
        right: inherit;
    }

    .input-row .ValidationMessage::before {
        right: inherit;
        height: 10px;
    }

    .input-row .lead-message-text,
    .input-row .notes-text {
        line-height: 30px;
    }

    .input-row-right {
        margin-bottom: 0;
        margin-left: 8px;
    }

    .input-row .material-icons {
        line-height: 1.4;
    }

    .modal-custom .input-row .material-icons {
        line-height: 0.8;
    }

    .modal-custom .input-row {
        align-items: center;
    }

    .modal-custom .input-row-left {
        line-height: 10px;
    }

    /*---------------Row Icon Label------------------*/

    .row-icon-label {
        display: flex;
        align-items: center;
    }

    .row-icon-label img,
    .row-icon-label .icon {
        vertical-align: unset;
    }

    .row-icon-label .icon-left {
        margin-right: 15px;
    }

    .row-icon-label .icon-right {
        margin-left: 15px;
    }

    /*---------------Icon Content------------------*/

    .icon-content {
        width: 100%;
        margin: 0 auto;
        padding-top: 70px;
        display: flex;
        flex-direction: row;
    }

    .content-base .icon-content {
        max-width: 600px;
        padding-top: 40px;
    }

    .tablet .content-base .icon-content {
        max-width: auto;
        padding-top: 20px;
    }

    .phone .content-base .icon-content {
        max-width: auto;
        padding-top: 0;
    }

    .modal-custom .icon-content,
    .main-content-right-inner .modal-custom .icon-content {
        max-width: auto;
        padding: 50px 30px 20px;
    }

    .icon-content-icon {
        text-align: right;
    }

    .icon-content-icon i.icon,
    .icon-content-icon i.icon:before {
        font-size: 65px;
    }

    .phone .icon-content-icon i.icon,
    .phone .icon-content-icon i.icon:before {
        font-size: 55px;
    }

    .icon-content-icon i.icon:before {
        margin-top: 15px;
    }

    .icon-content-icon,
    .icon-content-content {
        padding: 0px 10px;
    }

    .main-content-right-inner .icon-content {
        padding-top: 0;
    }

    /*-Responsive-*/

    .tablet .icon-content {
        padding-top: 50px;
    }
    .phone .main-content-right-inner .modal-custom .icon-content,
    .phone .icon-content {
        max-width: none;
        padding-top: 20px;
        flex-direction: column;
    }

    .phone .icon-content-icon {
        margin-bottom: 20px;
        text-align: left;
    }

    /*---------------Card Icon Content------------------*/

    .card-icon-content {
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .card-icon-content .icon-content {
        max-width: none;
        padding: 30px;
    }

    .phone .card-icon-content .icon-content {
        padding: 20px;
    }

    .card-icon-content .icon-content-icon {
        padding: 0;
    }

    .card-icon-content .icon.material-icons {
        line-height: 0.9;
    }

    .phone .card-icon-content .icon.material-icons {
        font-size: 40px;
    }

    .card-icon-content .lead-normal {
        margin-bottom: 5px;
    }

    .phone .card-icon-content .icon-content {
        flex-direction: row;
    }

    .phone .card-icon-content .icon-content-content {
        padding-right: 0;
    }

    .phone .card-icon-content .rich-text {
        font-size: 13px;
    }

    /*---------------Input Password Message------------------*/

    .message-link-row {
        margin: 30px 0 50px;
        text-align: center;
    }

    .tablet .message-link-row {
        margin: 30px 0;
    }

    .phone .message-link-row {
        margin: 20px 0;
    }

    /*---------------Input Password------------------*/

    .input-password {
        position: relative;
    }

    .phone .input-password {
        padding-bottom: 20px;
    }

    .input-password-message,
    .input-password-message a {
        font-size: 12px;
    }

    .input-password-message {
        position: absolute;
        top: 2px;
        right: 0;
        font-size: 12px;
        color: #52646c;
    }

    .phone .input-password-message {
        position: absolute;
        top: initial;
        right: initial;
        bottom: 0;
        left: 0;
        font-size: 12px;
        color: #52646c;
    }

    /*---------------Show Password------------------*/

    a.show-password {
        position: absolute;
        top: 44px;
        right: 15px;
        color: #cdcdcd;
    }

    /*---------------Input Calendar/File Placeholder------------------*/

    .input-calendar,
    .input-file {
        position: relative;
    }

    .input-file::after,
    .input-calendar:after {
        content: "";
        background: url(/PC_TH/img/iconcalendar_2x.png?27317) no-repeat;
        background-size: 80%;
        position: absolute;
        top: 11px;
        right: 8px;
        height: 20px;
        width: 20px;
        pointer-events: none;
    }

    .input-file::after {
        background: url(/PC_TH/img/filedocument.png?27317) no-repeat;
    }

    /*---------------Language Select------------------*/

    .language-select {
        font-size: 14px;
        color: #fff;
    }

    /*---------------Check Password------------------*/

    .check-password {
        height: 30px;
        display: flex;
        align-items: center;
    }

    .check-password .Progress {
        width: 70%;
    }

    .check-password-label {
        margin-left: 20px;
        flex-shrink: 0;
        text-align: center;
        font-size: 12px;
        color: #52646c;
    }

    /*---------------Password Items------------------*/

    .password-items-container .input-row {
        align-items: center;
    }

    .password-items-container .input-row-right {
        margin-left: 5px;
    }

    .password-items-container i,
    .password-items-container .input-row-right .notes-text {
        color: #9eb0b8;
    }

    .password-items-container .input-row i {
        font-size: 13px;
        line-height: 2.5;
    }

    .password-items-container .active .input-row i {
        color: #00acc1;
    }

    .password-items-container .active .notes-text {
        color: #52646c;
    }

    /*---------------Page Title------------------*/

    .page-title {
        margin-bottom: 40px;
        padding-bottom: 20px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cfd8dc;
    }

    .page-title.no-border {
        margin: 0;
        border: none;
    }
    .page-title .Heading1,
    .page-title .Heading2,
    .page-title .Heading3,
    .page-title .Heading4 {
        margin: 0;
    }

    .tablet .page-title {
        margin-bottom: 30px;
    }
    .phone .page-title {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    /*---------------Page Title Action------------------*/

    .page-title-action {
        margin-left: auto;
    }

    .phone .page-title-action {
        width: 100%;
        margin: 10px 0 0 0;
    }

    /*---------------Page Subtitle------------------*/

    .page-subtitle {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #cfd8dc;
    }

    .page-subtitle.not-full-width {
        width: 66%;
    }

    .tablet .page-title {
        margin-bottom: 10px;
    }

    /*---------------Results Title------------------*/

    .results-title {
        width: 66%;
        display: flex;
        margin-top: 10px;
        padding-top: 20px;
    }

    .tablet .results-title,
    .phone .results-title {
        width: 100%;
    }

    /*---------------Section Title------------------*/

    .section-title {
        position: relative;
        margin-bottom: 20px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .phone .section-title {
        margin-bottom: 30px;
    }

    .phone .section-title.has-button {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid #cfd8dc;
        width: 100%;
    }

    .phone .section-title:before {
        bottom: -8px;
    }

    .section-title.not-full-width:before {
        width: 66%;
    }

    .section-title-action {
        margin-left: auto;
    }

    .phone .section-title-action {
        margin: 5px 0 0 0;
        width: 100%;
    }

    .phone .section-title-action:empty {
        display: none;
    }

    .phone .section-title .Heading3 {
        font-weight: 500;
    }

    /*--------------- Tabs Alternative ------------------*/

    .tabs-alternative .Tabs {
        border-radius: 4px;
    }

    .tabs-alternative .Tabs__tab {
        height: 40px;
        width: 160px;
        flex-basis: auto;
        flex-grow: 0;
        font-size: 15px;
        color: #52646c;
        border: 1px solid #cfd8dc;
        border-left: none;
    }

    .phone .tabs-alternative .Tabs__tab {
        font-size: 14px;
    }

    .tabs-alternative .Tabs .Tabs__tab:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .Tabs__tab:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .tabs-alternative .Tabs__tab.active {
        color: #273136;
        border: 1px solid #26c6da;
        background-color: #26c6da;
        font-weight: 400;
    }

    .tabs-alternative .Tabs__tab:first-of-type {
        border-left: 1px solid #cfd8dc;
    }

    .tabs-alternative .Tabs_body {
        padding: 30px 0 10px;
    }

    .phone .tabs-alternative .Tabs_body {
        padding-top: 20px;
    }
    /*--------------- SectionExpandable Custom ------------------*/

    .SectionExpandable-custom {
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .SectionExpandable-custom .SectionExpandable_header {
        padding-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .SectionExpandable-custom .SectionExpandable__title {
        font-size: 18px;
        font-weight: 500;
        line-height: 28px;
        color: #52646c;
        border: none;
    }

    .SectionExpandable__person,
    .SectionExpandable-custom .SectionExpandable__title {
        font-size: 18px;
        font-weight: 500;
        line-height: 28px;
        color: #52646c;
        border: none;
    }

    .phone .SectionExpandable__person,
    .phone .SectionExpandable-custom .SectionExpandable__title {
        padding-right: 10px;
        font-size: 15px;
        line-height: 18px;
    }

    .SectionExpandable__person {
        margin-left: 5px;
        font-weight: 400;
    }

    .SectionExpandable-custom.expanded .SectionExpandable__title {
        color: #00838f;
    }

    .SectionExpandable-custom .SectionExpandable__icon {
        margin-left: auto;
        position: relative;
        height: 2px;
        width: 14px;
        border-radius: 2px;
        background-color: #37474f;
        flex-shrink: 0;
    }

    .SectionExpandable-custom.expanded .SectionExpandable__icon {
        background-color: #00838f;
    }

    .SectionExpandable-custom .SectionExpandable__icon:after {
        content: "";
        position: absolute;
        top: -6px;
        left: 6px;
        height: 14px;
        width: 2px;
        background-color: #37474f;
    }

    .SectionExpandable-custom.expanded .SectionExpandable__icon:after {
        content: none;
    }

    .SectionExpandable-custom.expanded .SectionExpandable__icon:after {
        content: none;
    }

    .SectionExpandable-custom .SectionExpandable_content,
    .SectionExpandable-custom.expanded .SectionExpandable_content {
        padding: 0;
    }

    /*--------------- SectionExpandable Info ------------------*/

    .SectionExpandable-info {
        background-color: transparent;
    }

    .SectionExpandable-info .SectionExpandable_header {
        padding: 0;
    }

    .SectionExpandable-info.expanded .SectionExpandable_content {
        padding-top: 20px;
    }

    .SectionExpandable-info.expanded .SectionExpandable_content {
        color: #52646c;
    }

    .SectionExpandable-info.expanded .SectionExpandable__title {
        color: #52646c;
    }

    .SectionExpandable-info.expanded .SectionExpandable__icon {
        background-color: #52646c;
    }

    .phone .SectionExpandable-info .SectionExpandable__icon {
        width: 15px;
        margin-right: 6px;
    }

    /*---------------SectionExpandable Fatura & Exame------------------*/

    .section-expandable-fatura,
    .section-expandable-exame {
        min-height: 109px;
        padding: 15px 30px 0 30px;
        background-color: #fff;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }
    .tablet .section-expandable-fatura,
    .tablet .section-expandable-exame {
        padding: 20px 20px 0;
    }

    .phone .section-expandable-fatura,
    .phone .section-expandable-exame {
        margin: 0 -20px;
        padding: 15px 20px 0 20px;
    }

    .section-expandable-fatura .SectionExpandable_header {
        padding-bottom: 10px;
    }

    .phone .section-expandable-fatura .SectionExpandable_header {
        padding-bottom: 0px;
    }

    .section-expandable-fatura.SectionExpandable .SectionExpandable_content {
        padding: 0;
    }

    .section-expandable-fatura.SectionExpandable.expanded .SectionExpandable_content {
        margin-top: 10px;
        padding: 20px 0;
        border-top: 1px solid #cfd8dc;
    }

    .section-expandable-fatura .SectionExpandable_header {
        margin-bottom: 0;
    }

    .section-expandable-fatura-header {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .tablet .section-expandable-fatura-header,
    .phone .section-expandable-fatura-header {
        flex-direction: column;
    }

    .section-expandable-fatura-info {
        padding-right: 5%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .tablet .section-expandable-fatura-info,
    .phone .section-expandable-fatura-info {
        padding-right: 0;
    }

    .section-expandable-fatura-type {
        flex-shrink: 0;
    }

    .section-expandable-fatura-info-top .section-expandable-fatura-value {
        margin: 0 0 0 auto;
    }

    .tablet .section-expandable-fatura-info-top .section-expandable-fatura-value {
        padding-right: 5%;
    }

    .section-expandable-fatura-action {
        padding: 10px 30px;
        margin-left: auto;
        display: flex;
        justify-content: space-around;
        flex-shrink: 0;
        border-left: 1px solid #cfd8dc;
    }

    .tablet .section-expandable-fatura-action,
    .phone .section-expandable-fatura-action {
        width: 100%;
        padding: 10px 0;
        margin-left: 0;
        border: none;
        justify-content: flex-start;
        align-items: center;
    }

    .phone .section-expandable-fatura-action {
        flex-direction: column;
        align-items: initial;
    }

    .phone .section-expandable-fatura-action .Button {
        width: 100%;
    }

    .section-expandable-exame .section-expandable-fatura-action {
        border: none;
    }

    .section-expandable-exame-location i.icon {
        font-size: 17px;
    }

    .section-expandable-fatura-action .Button:nth-child(2) {
        margin-left: 20px;
    }

    .tablet .section-expandable-fatura-action .Button:nth-child(2) {
        margin-left: 10px;
    }

    .phone .section-expandable-fatura-action .Button:nth-child(2) {
        margin-top: 10px;
        margin-left: 0;
    }

    .section-expandable-fatura-reference {
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .phone .section-expandable-fatura-reference {
        margin-top: 5px;
    }

    .section-expandable-fatura-info-top {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .section-expandable-fatura-state {
        width: 93px;
        margin-left: auto;
        padding-right: 5%;
        flex-shrink: 0;
        color: #cfd8dc;
        font-size: 15px;
    }

    .phone .section-expandable-fatura-state {
        margin-bottom: 5px;
    }

    .section-expandable-fatura-state .icon {
        margin-right: 5px;
    }

    /*---------------SectionExpandable Fatura & Exame------------------*/

    .section-expandable-exame {
        min-height: 109px;
        padding: 15px 25px 0 25px;
        background-color: #fff;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }
    .tablet .section-expandable-exame {
        padding: 20px 20px 0;
    }

    .phone .section-expandable-exame {
        min-height: auto;
        margin: 0 -20px;
        padding: 15px 20px 10px;
    }

    .section-expandable-exame .SectionExpandable_header {
        padding-bottom: 10px;
    }

    .phone .section-expandable-exame .SectionExpandable_header {
        padding-bottom: 0px;
    }

    .section-expandable-exame.SectionExpandable .SectionExpandable_content {
        padding: 0;
    }

    .section-expandable-exame.SectionExpandable.expanded .SectionExpandable_content {
        padding: 10px 0 20px;
    }

    .section-expandable-exame .SectionExpandable_header {
        margin-bottom: 0;
    }

    .section-expandable-exame-header {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .phone .section-expandable-exame-header {
        flex-direction: column;
    }

    .section-expandable-exame-info {
        padding-right: 5%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .tablet .section-expandable-exame-info,
    .phone .section-expandable-exame-info {
        padding-right: 0;
    }

    .section-expandable-exame-type {
        flex-shrink: 0;
        font-weight: 500;
    }

    .phone .section-expandable-exame-type {
        margin-bottom: 5px;
    }

    .section-expandable-exame-info-top .section-expandable-fatura-value {
        margin: 0 0 0 auto;
    }

    .tablet .section-expandable-exame-info-top .section-expandable-fatura-value {
        padding-right: 5%;
    }

    .section-expandable-exame-location {
        font-size: 15px;
    }

    .section-expandable-exame-location i.icon {
        font-size: 17px;
    }

    .section-expandable-fatura-reference {
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .phone .section-expandable-fatura-reference {
        margin-top: 5px;
    }

    .section-expandable-exame-info-top {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .phone .section-expandable-exame-info-top {
        margin-bottom: 3px;
    }

    .section-expandable-exame-action {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-right: 20px;
    }

    .phone .section-expandable-exame-action {
        flex-direction: column;
        padding: 0 10px 10px;
        margin-right: 10px;
    }

    .phone .section-expandable-exame-action .Button {
        margin: 10px 0 0 0;
    }
    .section-expandable-exame-date {
        white-space: nowrap;
    }

    .section-expandable-exame-state {
        margin-left: 15px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        color: #607d8b;
        font-size: 14px;
        padding: 2px 10px;
        line-height: 1.1;
        border-radius: 3px;
    }

    .section-expandable-exame-state.read {
        background-color: #fcedc9;
    }

    .section-expandable-exame-state.shared {
        background-color: #d1f1f5;
    }

    .section-expandable-exame-state .icon {
        margin-right: 5px;
    }

    .section-expandable-exame.SectionExpandable.expanded .SectionExpandable__icon {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .section-expandable-exame.SectionExpandable.expanded .SectionExpandable__icon .fa {
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

    .section-expandable-exame.SectionExpandable .SectionExpandable__icon.Heading2 {
        width: 39px;
        color: #00838f;
    }

    .phone .section-expandable-exame.SectionExpandable .SectionExpandable__icon.Heading2 {
        width: auto;
    }

    .section-expandable-exame .SectionExpandable__icon.Heading2 .icon-container {
        display: flex;
        align-items: center;

        color: #00838f;
    }

    .phone .section-expandable-exame .SectionExpandable__icon.Heading2 .icon-container {
        display: inline-block;
    }
    .phone .section-expandable-exame .SectionExpandable__icon.Heading2 .icon-container .rich-text {
        display: none;
    }

    /*---------------Card Inner Fatura & Exame------------------*/

    .card-inner-fatura {
        padding: 15px 25px;
        background-color: #f4f7fc;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    .phone .card-inner-fatura {
        padding: 15px 20px;
    }

    .card-inner-fatura-content {
        display: flex;
        justify-content: space-between;
    }

    .card-inner-fatura-content {
        margin-bottom: 5px;
    }

    .tablet .card-inner-fatura-content,
    .phone .card-inner-fatura-content {
        display: block;
    }

    .card-inner-fatura-content > div:not(:last-child) {
        margin-right: 10px;
    }

    .tablet .card-inner-fatura-content > div:not(:last-child),
    .phone .card-inner-fatura-content > div:not(:last-child) {
        margin-right: 0px;
    }

    .card-inner-fatura-code,
    .card-inner-fatura-date,
    .card-inner-fatura-description,
    .card-inner-fatura-quantity,
    .card-inner-fatura-value {
        color: #52646c;
    }

    .card-inner-fatura-code {
        flex-basis: 20%;
    }

    .card-inner-fatura-value {
        flex-basis: 10%;
    }

    .tablet .card-inner-fatura-code,
    .tablet .card-inner-fatura-value,
    .phone .card-inner-fatura-code,
    .phone .card-inner-fatura-value {
        width: 40%;
        display: inline-block;
    }

    .card-inner-fatura-date,
    .card-inner-fatura-quantity {
        flex-basis: 15%;
    }

    .tablet .card-inner-fatura-date,
    .tablet .card-inner-fatura-quantity,
    .phone .card-inner-fatura-date,
    .phone .card-inner-fatura-quantity {
        width: 60%;
        display: inline-block;
    }

    .card-inner-fatura-description {
        flex-basis: 35%;
    }

    .tablet .card-inner-fatura-description,
    .phone .card-inner-fatura-description {
        width: 100%;
    }

    .card-inner-exame-exame {
        flex-basis: 40%;
    }

    .card-inner-exame-act {
        flex-basis: 30%;
    }

    /*---------------Card Inner Exame NEW------------------*/

    .card-inner-exame {
        padding: 15px 25px;
        background-color: #f4f7fc;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        display: flex;
        justify-content: space-between;
    }

    .card-inner-exame.no-results {
        align-items: center;
    }

    .phone .card-inner-exame {
        padding: 15px 20px;
        flex-direction: column;
    }

    .card-inner-exame-content {
        display: flex;
        width: 100%;
    }

    .phone .card-inner-exame-content {
        flex-direction: column;
    }

    .card-inner-exame-list {
        width: 100%;
    }

    .card-inner-exame-list.images-list {
        margin-right: auto;
    }

    .phone .card-inner-exame-list.images-list {
        margin-bottom: 10px;
    }

    .card-inner-exame-list.images-list.no-images {
        display: none;
    }

    .card-inner-exame-list.share-list {
        width: 40%;
    }

    .phone .card-inner-exame-list.share-list {
        width: 100%;
    }

    .card-inner-exame-list.images-list .input-row-left {
        color: #00838f;
    }

    .card-inner-exame-action {
        position: relative;
        flex-basis: 30%;
        padding: 6px 0 6px 20px;
        margin-left: 20px;
        text-align: right;
    }

    .phone .card-inner-exame-action {
        margin: 20px 0 0;
        padding: 0;
        flex-basis: 100%;
        text-align: center;
    }

    .card-inner-exame-action:before {
        content: "";
        height: 52px;
        width: 1px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #cfd8dc;
    }

    .phone .card-inner-exame-action:before {
        content: none;
    }

    .phone .card-inner-exame-action input {
        width: 100%;
    }

    .card-inner-exame-content > div:not(:last-child) {
        margin-right: 10px;
    }

    .card-inner-exame .card-inner-exame-content .input-row-right {
        line-height: 2;
    }

    .card-inner-exame-list.images-list .input-row-right {
        line-height: 1.5;
    }
    /*---------------Table Exame Share------------------*/

    .TableRecords.exame-share {
        border-color: #cfd8dc;
    }

    .phone .TableRecords.exame-share {
        border: none;
    }

    .TableRecords.exame-share .TableRecords_Header,
    .TableRecords.exame-share .TableRecords_OddLine,
    .TableRecords.exame-share .TableRecords_EvenLine {
        border-bottom: 0;
    }

    .desktop .TableRecords.exame-share .TableRecords_OddLine,
    .desktop .TableRecords.exame-share .TableRecords_EvenLine {
        border-top: 1px solid #cfd8dc;
    }

    .phone .TableRecords.exame-share .TableRecords_OddLine,
    .phone .TableRecords.exame-share .TableRecords_EvenLine {
        padding: 5px 15px 0 !important;
    }

    .phone .TableRecords.exame-share thead {
        display: none;
    }

    .phone .TableRecords.exame-share tbody tr {
        margin-bottom: 15px;
        padding: 5px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        position: relative;
    }

    .phone .TableRecords.exame-share tbody tr .text-right {
        position: absolute;
        top: 5px;
        right: 0px;
        display: flex;
        align-items: center;
        align-self: flex-end;
    }

    .desktop .TableRecords.exame-share .responsive-label,
    .tablet .TableRecords.exame-share .responsive-label {
        display: none;
    }

    .phone .TableRecords.exame-share .responsive-label {
        display: block;
    }
    .phone .TableRecords.exame-share .text-right .responsive-label {
        color: #00838f;
    }

    /*---------------Card Inner Prescription------------------*/

    .card-inner-prescription {
        padding: 15px 25px;
        background-color: #f4f7fc;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        display: flex;
        flex-direction: column;
    }

    .card-inner-prescription-top {
        margin-bottom: 15px;
    }

    .card-inner-prescription .Medium {
        display: block;
    }

    .card-inner-prescription .input-col {
        margin-top: 10px;
    }

    .card-inner-prescription .input-col > div {
        line-height: 1;
    }
    /*---------------Small Medium Left Columns------------------*/

    .SmallMediumLeftColumns > .Column.ColFirst {
        width: 42%;
        padding-right: 10px;
        padding-left: 0px;
    }

    .SmallMediumLeftColumns > .Column.ColLast {
        width: 58%;
        padding-left: 10px;
        padding-right: 0px;
    }

    .tablet .SmallMediumLeftColumns.tab_BreakAll > .Column.ColFirst,
    .tablet .SmallMediumLeftColumns.tab_BreakAll > .Column.ColLast,
    .phone .SmallMediumLeftColumns.mob_BreakAll > .Column.ColFirst,
    .phone .SmallMediumLeftColumns.mob_BreakAll > .Column.ColLast {
        width: 100%;
        padding: 0;
    }

    .tablet .SmallMediumLeftColumns.tab_BreakAll > .Column.ColLast,
    .phone .SmallMediumLeftColumns.mob_BreakAll > .Column.ColLast {
        margin-top: 10px;
    }

    /*---------------Card Contact------------------*/

    .card-contact {
        margin: 10px auto 0;
        padding: 20px 40px;
        display: flex;
        align-items: center;
        background: linear-gradient(270deg, #80deeb 0%, #00acc1 100%);
    }

    .card-contact span,
    .card-contact div {
        margin-bottom: 0;
        color: #fff;
    }

    .card-content-left {
        width: 50%;
        height: 65px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid #fff;
    }

    .card-content-left .Heading4 {
        color: #fff;
    }

    .card-content-right {
        margin-left: auto;
    }

    .card-content-right a {
        font-weight: 400;
        text-decoration: underline;
        color: #fff;
    }

    .card-contact .row-icon-label:first-child {
        margin-bottom: 10px;
    }

    .card-contact-small {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        margin: 0 auto;
        padding: 20px 20px 10px;

        width: 350px;
        color: #fff;
        background: linear-gradient(270deg, #80deeb 0%, #00acc1 100%);
    }

    .card-contact-small .card-content-left {
        position: relative;
        border: none;
        width: auto;
    }

    .card-contact-small .card-content-left:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 70px;
        border-bottom: 1px solid #fff;
    }

    .card-contact-small .card-content-right {
        margin: 0;
        padding-top: 15px;
    }

    /*-Responsive-*/

    .tablet .card-contact,
    .phone .card-contact {
        max-width: 360px;
        padding-bottom: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .tablet .card-contact .card-content-left,
    .phone .card-contact .card-content-left {
        position: relative;
        width: 100%;
        padding-bottom: 20px;
        border-right: none;
    }

    .tablet .card-contact .card-content-left:before,
    .phone .card-contact .card-content-left:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 70px;
        border-bottom: 1px solid #fff;
    }

    .tablet .card-contact .card-content-right,
    .phone .card-contact .card-content-right {
        margin-left: 0;
        padding-top: 20px;
    }

    .tablet .card-contact .row-icon-label:first-child,
    .phone .card-contact .row-icon-label:first-child {
        margin-bottom: 0;
    }

    /*---------------Card Appointment------------------*/

    .card-appointment {
        position: relative;
        height: 93px;
        margin-bottom: 10px;
        padding: 10px 12px;
        display: flex;
        border-radius: 7px;
        border: 4px solid transparent;
        background-color: #fff;
        box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.1);
        transition: border-color 0.3s;
    }

    .phone .card-appointment {
        min-height: 93px;
        height: auto;
    }

    .card-appointment .card-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-appointment .card-left a {
        color: #979797;
        line-height: 10px;
    }

    .card-appointment .card-left a i:before {
        font-size: 16px;
    }

    .card-appointment .card-right {
        width: 100%;
        padding: 0 35px 0 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        color: #52646c;
    }

    .card-appointment-image {
        height: 50px;
        width: 50px;
        margin-bottom: 2px;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

    .phone .card-appointment-image {
        height: 44px;
        width: 44px;
    }

    .card-appointment-info {
        height: 50px;
        width: 50px;
        flex-shrink: 0;
    }

    .card-appointment-time {
        font-size: 19px;
        font-weight: 700;
        line-height: 21px;
    }

    .card-appointment-name {
        font-size: 16px;
        font-weight: 500;
        color: #52646c;
        line-height: 21px;
    }

    .card-appointment.is-selected {
        border-color: #00acc1;
    }

    .card-appointment.is-selected > .icon {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
    }

    .card-appointment.is-selected:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 40px solid #00acc1;
        border-left: 40px solid transparent;
    }

    .card-appointment.is-selected:right {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        right: 0;
        border-top: 40px solid #00acc1;
        border-left: 40px solid transparent;
    }

    /*---------------Card Resume------------------*/

    .card-resume {
        position: relative;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    .card-resume:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 77px solid #00acc1;
        border-top-right-radius: 2px;
        border-left: 77px solid #f4f7fc;
        z-index: 2;
    }

    .card-resume-header {
        position: relative;
        padding: 20px 80px 15px 20px;
        color: #52646c;
        background-color: #f4f7fc;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .card-resume-header .corner-icon,
    .card-resume-notification .corner-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #fff;
        z-index: 2;
    }

    .card-resume-header > a {
        position: absolute;
        bottom: 10px;
        right: 15px;
    }

    .card-resume-content-block {
        position: relative;
        padding: 8px 20px;
        border-top: 1px solid #cfd8dc;
    }

    .agenda-detail .card-resume-content-block {
        border: none;
        padding: 0;
        margin-bottom: 24px;
    }

    .card-resume-content-actions a {
        position: absolute;
        bottom: 10px;
        right: 15px;
    }

    .card-resume-date,
    .card-resume-time {
        font-size: 20px;
        font-weight: 700;
        color: #37474f;
    }

    .card-resume-time {
        margin-left: auto;
        font-size: 32px;
    }

    .card-resume-image {
        height: 30px;
        width: 30px;
        margin-right: 10px;
        flex-shrink: 0;
        background-image: url("/PC_TH/img/medic.png?27317");
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

    .card-resume .rich-text {
        line-height: 22px;
    }

    .ListRecords .card-resume-appointment {
        display: inline-block;
        width: 48%;
        margin-bottom: 20px;
    }

    .ListRecords .card-resume-appointment:nth-child(odd) {
        margin-right: 4%;
    }

    .tablet .ListRecords .card-resume-appointment {
        display: block;
        width: auto;
        max-width: 440px;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .phone .ListRecords .card-resume-appointment {
        display: block;
        width: auto;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /*---------------Card Resume Agenda------------------*/

    .card-resume.card-resume-agenda {
        min-height: 135px;
        padding: 20px 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .phone .card-resume.card-resume-agenda {
        padding: 15px;
        margin-bottom: 6px;
    }

    .tablet .card-resume.card-resume-agenda,
    .phone .card-resume.card-resume-agenda {
        flex-direction: column;
    }

    .card-resume.card-resume-agenda:before {
        border-left: 77px solid #fff;
    }

    .phone .card-resume.card-resume-agenda:before {
        border-left: 44px solid #fff;
        border-top-width: 44px;
    }

    .card-resume-agenda .card-resume-header {
        width: 80%;
        padding: 0;
        padding-right: 50px;
        background-color: #fff;
        border-right: 1px solid #cfd8dc;
    }

    .tablet .card-resume-agenda .card-resume-header,
    .phone .card-resume-agenda .card-resume-header {
        width: 100%;
        margin-bottom: 10px;
        background-color: transparent;
        border-right: none;
        z-index: 2;
    }

    .phone .card-resume-agenda .card-resume-header {
        padding: 0;
    }

    .card-resume-person {
        margin-bottom: 5px;
    }

    .card-resume-agenda .card-resume-date {
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 700;
        color: #37474f;
    }

    .card-resume-agenda .card-resume-time {
        font-size: 38px;
        font-weight: 500;
    }

    .phone .card-resume-agenda .card-resume-time {
        margin-right: 25px;
        font-size: 19px;
    }

    .card-resume-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tablet .card-resume-info,
    .phone .card-resume-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-resume-doctor-info {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    .tablet .card-resume-doctor-info,
    .phone .card-resume-doctor-info {
        margin-left: 0;
    }

    .card-resume.card-resume-agenda .card-resume-name {
        margin-right: 10px;
        margin-bottom: 5px;
        font-weight: 500;
        color: #37474f;
    }

    .card-resume-agenda .card-resume-local {
        margin: 0 0 0 8px;
        line-height: 25px;
    }

    .card-resume-agenda .corner-icon {
        position: absolute;
        font-size: 22px;
        right: 10px;
        top: 10px;
        z-index: 2;
        color: #fff;
    }

    .phone .card-resume-agenda .corner-icon,
    .phone .card-resume-notification .corner-icon {
        position: absolute;
        font-size: 17px;
        right: 4px;
        top: 2px;
        z-index: 2;
        color: #fff;
    }

    .phone .card-resume-agenda .corner-icon:before,
    .phone .card-resume-notification .corner-icon:before {
        font-size: 17px;
    }

    .card-resume.card-resume-agenda.is-exam:before {
        border-top: 77px solid #00838f;
    }

    .phone .card-resume.card-resume-agenda.is-exam:before {
        border-top-width: 44px;
    }

    .card-resume-action {
        width: 30%;
        padding-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;

        text-align: center;
    }

    .tablet .card-resume-action,
    .phone .card-resume-action,
    .phone .card-resume-action div {
        width: 100%;
        padding-left: 0;
    }

    .card-resume-action .Button {
        z-index: 2;
    }

    .phone .card-resume-action .Button {
        width: 100%;
    }

    /*---------------Card Resume Agenda TELECONSULTA------------------*/

    .card-resume.card-resume-agenda.is-teleconsulta:before {
        border-top: 77px solid #00838f;
    }

    .phone .card-resume.card-resume-agenda.is-teleconsulta:before {
        border-top-width: 44px;
    }

    .card-resume-agenda.is-teleconsulta .card-resume-action {
        flex-direction: column;
    }

    .teleconsulta-message {
        padding: 0 40px;
        margin-top: 10px;
        font-size: 12px;
        color: #52646c;
        line-height: 1.5;
        text-align: left;
    }

    .teleconsulta-message:empty {
        display: none;
    }

    /*---------------Card Resume Agenda Is-Pendent------------------*/

    .card-resume.card-resume-agenda.is-pendent:before {
        border-top: 77px solid #cfd8dc;
    }

    .phone .card-resume.card-resume-agenda.is-pendent:before {
        border-top-width: 44px;
    }

    .card-resume.card-resume-agenda.is-pendent {
        border: 2px dashed #cfd8dc;
    }

    /*---------------Card Resume Notification------------------*/

    .card-resume.card-resume-notification {
        padding: 25px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .tablet .card-resume.card-resume-notification,
    .phone .card-resume.card-resume-notification {
        flex-direction: column;
    }

    .phone .card-resume.card-resume-notification {
        padding: 15px;
    }

    .card-resume.card-resume-notification::before {
        border-top-color: #ffb300;
        border-left-color: #fff;
    }

    .phone .card-resume.card-resume-notification::before {
        border-top-width: 44px;
        border-left-width: 44px;
        border-left-color: #fff;
    }

    .card-resume-notification-date,
    .card-resume-notification-title {
        margin-bottom: 5px;
    }

    .card-resume-notification-left {
        width: 80%;
        padding-right: 30px;
    }

    .tablet .card-resume-notification-left,
    .phone .card-resume-notification-left {
        width: 100%;
    }

    .card-resume-notification .card-resume-action {
        padding: 20px 0;
        border-left: 1px solid #cfd8dc;
    }

    .tablet .card-resume-notification .card-resume-action {
        padding-bottom: 0;
        border: none;
    }

    .phone .card-resume-notification .card-resume-action {
        padding: 15px 0 0;
        border-left: none;
    }

    /*---------------Card Bullet Content------------------*/

    .card-bullet-content {
        margin-bottom: 20px;
        display: flex;
    }

    .card-bullet-content .bullet-number {
        height: 35px;
        width: 35px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        justify-content: center;
        font-size: 18px;
        border-radius: 50%;
        background-color: #52646c;
        color: #fff;
    }

    /*---------------Card Simple Custom------------------*/

    .Card.card-simple-custom {
        margin-top: 20px;
        padding: 20px 25px;
        height: 610px;
        background-color: #f4f7fc;
        border: 1px solid #cfd8dc;
    }

    .tablet .Card.card-simple-custom {
        max-width: 500px;
        margin-top: 20px;
        padding: 20px 25px;
        height: 610px;
        background-color: #f4f7fc;
        border: 1px solid #cfd8dc;
    }

    .phone .Card.card-simple-custom {
        width: auto;
        margin: 20px -20px;
        padding: 20px;
    }

    .Card.card-simple-custom .ButtonGroup_button.Button {
        min-width: 0;
        padding: 0;
        margin-bottom: 10px;
    }

    .Card.card-simple-custom-title {
        font-weight: 400;
    }

    /*---------------Card Doctor------------------*/

    .card-doctor {
        width: 100%;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .card-doctor-header {
        padding: 20px 15px;
        display: flex;
        align-items: center;
        background-color: #f4f7fc;
        border-radius: 4px 4px 0 0;
        border-bottom: 1px solid #cfd8dc;
    }

    .phone .card-doctor-header {
        flex-direction: column;
        justify-content: center;
    }

    .card-doctor-header .favorite-container {
        position: absolute;
        top: -6px;
        left: -2px;
        height: 20px;
        width: 20px;
    }

    .card-doctor-header .favorite-container img {
        height: 100%;
        width: 100%;
    }

    .card-doctor-image {
        position: relative;
        height: 50px;
        width: 50px;
        margin: 0 10px 0 8px;
        flex-shrink: 0;
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

    .phone .card-doctor-image {
        height: 44px;
        width: 44px;
    }

    .card-doctor-name {
        font-size: 16px;
        font-weight: 400;
        color: #273136;
    }

    .phone .card-doctor-info {
        margin: 10px 0 15px;
        text-align: center;
    }

    .card-doctor-content {
        padding: 20px 15px;
        background-color: #fff;
        border-radius: 0 0 4px 4px;
    }

    .card-doctor-actions {
        margin-left: auto;
        display: flex;
    }

    .tablet .card-doctor-actions,
    .phone .card-doctor-actions {
        margin-left: auto;
        flex-direction: column;
    }

    .phone .card-doctor-actions {
        width: 100%;
        margin-left: 0;
    }

    .tablet .card-doctor-actions .Button:first-child,
    .phone .card-doctor-actions .Button:first-child {
        margin-bottom: 10px;
    }

    .desktop .card-doctor-actions .Button:first-child {
        margin-right: 20px;
    }

    .tablet .card-doctor-content .Button {
        margin-top: 10px;
    }

    /*---------------Detail Doctor------------------*/

    .detail-doctor {
        margin: 45px 0;
    }

    .tablet .detail-doctor {
        margin: 25px 0;
    }

    .phone .detail-doctor {
        margin: 20px 0;
    }

    .detail-doctor-header {
        padding-bottom: 30px;
        display: flex;
        align-items: flex-start;
    }

    .tablet .detail-doctor-header,
    .phone .detail-doctor-header {
        flex-direction: column;
        align-items: center;
    }

    .phone .detail-doctor-header {
        padding-bottom: 0;
    }

    .detail-doctor-header .favorite-container {
        position: absolute;
        top: 4px;
        left: 4px;
        height: 30px;
        width: 30px;
    }

    .detail-doctor-header .favorite-container img {
        height: 100%;
        width: 100%;
    }

    .phone .detail-doctor-header .favorite-container {
        position: absolute;
        top: 2px;
        left: 1px;
    }

    .detail-doctor-image {
        position: relative;
        height: 130px;
        width: 130px;
        margin: 0 20px 0 8px;
        flex-shrink: 0;
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

    .tablet .detail-doctor-image,
    .phone .detail-doctor-image {
        margin: 0 0 20px;
    }

    .phone .detail-doctor-image {
        height: 95px;
        width: 95px;
    }

    .detail-doctor-name {
        font-weight: 400;
    }

    .tablet .detail-doctor-name,
    .phone .detail-doctor-name {
        margin: 0;
    }

    .detail-doctor-position {
        margin-bottom: 35px;
    }

    .tablet .detail-doctor-position,
    .phone .detail-doctor-position {
        margin-bottom: 10px;
    }

    .tablet .detail-doctor-info,
    .phone .detail-doctor-info {
        text-align: center;
    }

    .tablet .detail-doctor-text {
        margin: 10px 0 20px;
    }

    .detail-doctor-action {
        margin-top: 30px;
        margin-right: 20px;
        display: flex;
        flex-shrink: 0;
    }

    .tablet .detail-doctor-action {
        margin-top: 20px;
    }

    .phone .detail-doctor-action {
        margin-top: 20px;
        margin-right: 0;
    }

    .detail-doctor-action .Button:first-child {
        margin-left: 10px;
    }

    .phone .detail-doctor-action .Button:first-child {
        margin-bottom: 10px;
        margin-left: 0;
    }

    .phone .detail-doctor-action .Button {
        width: 100%;
    }

    .detail-doctor-content {
        padding-top: 30px;
    }

    .phone .detail-doctor-content {
        padding-top: 20px;
    }

    /*---------------Card Unity------------------*/

    .card-unity {
        width: 100%;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .card-unity-image {
        height: 210px;
        width: 100%;
        flex-shrink: 0;
        background-image: url("/PC_TH/img/unidadesdefaultlist.jpg?27317");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .phone .card-unity-image {
        height: 180px;
    }

    .card-unity-name {
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: 400;
    }

    .card-unity-content {
        min-height: 190px;
        margin-top: auto;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
    }

    .tablet .card-unity-content {
        min-height: 240px;
    }

    .card-unity-location {
        display: flex;
    }

    .desktop.small .card-unity-location {
        height: 70px;
    }

    .phone .card-unity-content {
        min-height: 170px;
    }

    .card-unity-action {
        margin-top: auto;
        display: flex;
        align-items: flex-end;
    }

    .ie .card-unity-action {
        margin-top: 10px;
    }

    .tablet .card-unity-action,
    .phone .card-unity-action {
        flex-direction: column;
        align-items: center;
    }

    .card-unity-action .Button {
        margin-right: 20px;
    }

    .tablet .card-unity-action .Button,
    .phone .card-unity-action .Button {
        width: 100%;
        margin-right: 0px;
        margin-top: 10px;
        flex-shrink: 0;
    }

    /*---------------Card Message------------------*/

    .card-message {
        margin-bottom: 30px;
        padding: 10px 20px;
        display: flex;
        background-color: #cce5ff;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .card-message.padding-large {
        padding: 20px;
    }

    .card-message .notes-text {
        line-height: inherit;
    }

    .card-message-icon {
        margin-right: 15px;
        line-height: 1;
        color: #52646c;
    }

    .phone .card-message {
        margin-bottom: 20px;
    }

    .phone .card-message.padding-large {
        flex-direction: column;
    }

    .phone .card-message.padding-large .card-message-icon img {
        width: 62px;
    }

    .phone .card-message.padding-large .notes-text {
        margin-top: 15px;
        text-align: center;
    }

    /*---------------Card Specialty------------------*/

    .card-specialty {
        min-height: 200px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        background-color: #f4f7fc;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    .card-specialty .card-specialty-content {
        padding-right: 20%;
    }

    .card-specialty .card-specialty-description {
        margin-bottom: 20px;
    }

    .card-specialty .card-specialty-actions {
        margin-top: auto;
        display: flex;
    }

    .tablet .card-specialty .card-specialty-actions,
    .phone .card-specialty .card-specialty-actions {
        flex-direction: column;
    }

    .card-specialty-actions-left {
        display: flex;
    }

    .tablet .card-specialty .card-specialty-actions-left {
        margin-bottom: -10px;
    }

    .tablet .card-specialty .card-specialty-actions-left,
    .phone .card-specialty .card-specialty-actions-left {
        flex-direction: column;
    }

    .card-specialty .card-specialty-actions-left .Button {
        margin-right: 20px;
    }
    .tablet .card-specialty .card-specialty-actions-left .Button {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .phone .card-specialty .card-specialty-actions-left .Button {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .card-specialty .card-specialty-actions-right {
        margin-left: auto;
    }

    .tablet .card-specialty .card-specialty-actions-right {
        margin-top: 10px;
        margin-left: 0;
    }

    .phone .card-specialty .card-specialty-actions-right {
        margin: 0;
    }

    .tablet .card-specialty .Button,
    .phone .card-specialty .Button {
        width: 100%;
    }

    /*---------------Card Contacto Unidade------------------*/

    .card-contact-unity {
        position: relative;
        margin: 0 0 30px 20%;
        padding: 20px;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    .card-contact-unity .input-row {
        margin-bottom: 15px;
    }

    .card-contact-unity .input-row:last-child {
        margin-bottom: 0;
        word-break: break-all;
    }

    .card-contact-unity .input-row:last-child .input-row-right {
        word-break: break-all;
    }

    .tablet .card-contact-unity {
        margin-left: 10px;
        padding: 15px;
    }

    .phone .card-contact-unity {
        margin-left: 0;
        padding: 15px;
    }

    .card-contact-unity .icon.material-icons {
        font-size: 16px;
        color: #00acc1;
    }

    .card-contact-unity:after {
        content: "";
        position: absolute;
        background: transparent;
        height: 35px;
        width: 35px;
        right: 0;
        bottom: 0;
        border-right: 15px solid #00acc1;
        border-bottom: 15px solid #00acc1;
        border-bottom-right-radius: 3px;
        opacity: 0.1;
    }

    /*---------------Card News------------------*/

    .card-news {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }
    .desktop.hd .GalleryItem .card-news {
        height: 405px;
    }

    @media (max-width: 2100px) and (min-width: 1920px) {
        .desktop.hd .GalleryItem .card-news {
            height: 345px;
        }
    }

    .desktop.big .GalleryItem .card-news,
    .tablet .GalleryItem .card-news {
        height: 330px;
    }

    .desktop .GalleryItem .card-news {
        height: 300px;
    }

    .card-news-image {
        height: auto;
        width: 100%;
        flex-shrink: 0;
    }

    .card-news-image img {
        width: 100%;
        height: 100%;
    }

    .card-news-content {
        padding: 20px 15px 0px;
    }

    .card-news-title {
        margin-bottom: 5px;
        font-weight: 500;
        line-height: 20px;
        color: #273136;
    }

    .card-news-date {
        margin-bottom: 5px;
        color: #52646c;
        line-height: 19px;
    }

    .card-news-preview {
        margin-bottom: 10px;
        line-height: 21px;
    }

    .card-news-action {
        margin-top: auto;
        padding: 10px 15px 10px;
    }

    .card-news-action a {
        font-weight: 400;
        text-decoration: underline;
    }

    /*---------------Card News Detail------------------*/

    .card-news-detail {
        height: auto;
        width: 100%;
    }

    .card-news-detail img {
        width: 100%;
        
    }

    /*---------------Card Agregado------------------*/

    .card-agregado {
        padding: 30px;
        display: flex;
        align-items: center;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #f4f7fc;
    }

    .tablet .card-agregado,
    .phone .card-agregado {
        flex-direction: column;
        align-items: flex-start;
    }

    .phone .card-agregado {
        padding: 20px;
    }

    .List .card-agregado {
        margin-bottom: 20px;
    }

    .card-agregado-left {
        width: 40%;
        display: flex;
        align-items: center;
        border-right: 1px solid #cfd8dc;
    }

    .tablet .card-agregado-left,
    .phone .card-agregado-left {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px;
        align-items: flex-start;
        border-right: none;
        border-bottom: 1px solid #cfd8dc;
    }

    .tablet .card-agregado-left {
        align-items: center;
    }

    .phone .card-agregado-left {
        padding-bottom: 15px;
    }

    .card-agregado-image {
        height: 60px;
        width: 60px;
        margin-right: 15px;
        border-radius: 50%;
        flex-shrink: 0;
        background-image: url("/PC_TH/img/default_user.png?27317");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .card-agregado-name {
        margin-right: auto;
        padding-right: 10px;
    }

    .phone .card-agregado-image {
        height: 40px;
        width: 40px;
    }

    .card-agregado-right {
        width: 60%;
        padding-left: 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tablet .card-agregado-right,
    .phone .card-agregado-right {
        width: 100%;
        padding-top: 20px;
        padding-left: 0;
    }

    .phone .card-agregado-right {
        padding-top: 15px;
    }

    .card-agregado-col {
        padding: 0 10px;
        flex: 2;
    }

    .desktop .card-agregado-right .card-agregado-col:last-child {
        flex: 1;
        text-align: center;
    }

    .phone .card-agregado-type .input-col,
    .phone .card-agregado-validation .input-col {
        font-size: 13px;
    }

    .phone .card-agregado-remove i.icon,
    .phone .card-agregado-remove i.icon::before {
        font-size: 20px;
    }

    .card-agregado .input-col {
        padding: 0 5px;
    }

    .card-agregado .input-col,
    .card-agregado .lead-normal {
        margin: 0 !important;
    }

    .card-agregado-actions {
        padding-left: 80px;
        margin-top: 10px;
        display: flex;
        align-items: center;
    }

    .tablet .card-agregado-actions {
        margin-top: 20px;
    }

    .phone .card-agregado-actions {
        margin-top: 15px;
    }

    .card-agregado-actions .Button:not(:first-child) {
        margin-left: 20px;
    }

    .phone .card-agregado-actions .Button:not(:first-child) {
        margin-left: 0px;
        margin-top: 10px;
    }

    .phone .card-agregado-actions {
        padding-left: 0;
        flex-direction: column;
    }

    .phone .card-agregado-actions,
    .phone .card-agregado-actions .Button {
        width: 100%;
    }

    .card-agregado-actions:empty {
        display: none;
    }

    /*---------------Card Invitation------------------*/

    .card-invitation {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-invitation .card-agregado-left {
        width: 100%;
        padding-right: 0;
        align-items: flex-start;
        border-right: none;
    }

    .phone .card-invitation .rich-text {
        font-size: 13px;
    }

    /*---------------List Item Doctor------------------*/

    .list-item-doctor {
        position: relative;
        padding: 15px 25px 15px 15px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cfd8dc;
    }

    .list-item-doctor-image {
        height: 30px;
        width: 30px;
        margin-right: 10px;
        flex-shrink: 0;
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

    .list-item-doctor-icon {
        position: absolute;
        right: 5px;
        top: 18px;
        color: #52646c;
    }

    /*---------------Image Full Width------------------*/

    .image-full-width {
        height: 280px;
        width: 100%;
        background-image: url("/PC_TH/img/detalheunidadedefault.jpg?27317");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .phone .image-full-width {
        height: 125px;
    }

    .image-full-width.is-news {
        background-image: url("/PC_TH/img/detalhenoticiadefault.png?27317");
    }

    .phone .image-full-width.is-news {
        height: 135px;
    }
    /*---------------List Item Wait------------------*/

    .list-item-wait {
        width: 48%;
        padding: 20px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        background-color: #00838f;
        background-image: url("/PC_TH/img/accountcircle.png?27317");
        background-position: right;
        background-repeat: no-repeat;
        background-size: 70px;
        color: #fff;
    }

    .list-item-wait.is-pediatric {
        background-color: #00acc1;
        background-image: url("/PC_TH/img/accountchildcircle.png?27317");
    }

    .phone .list-item-wait {
        padding: 20px 15px;
        align-items: flex-start;
    }

    .ListRecords .list-item-wait:nth-child(odd) {
        margin-right: 4%;
    }

    .list-item-wait-time {
        margin-bottom: 5px;
        font-size: 25px;
        line-height: 1;
    }

    .list-item-wait-label {
        font-size: 18px;
        line-height: 1;
    }

    /*---------------Onboarding Popup------------------*/

    .onboarding-carousel-container {
        position: relative;
        width: 560px;
    }

    .tablet .onboarding-carousel-container {
        width: 480px;
    }

    .phone .onboarding-carousel-container {
        width: 300px;
    }

    .onboarding-carousel-image {
        width: auto;
        height: 280px;
        margin-bottom: 50px;
        align-self: center;
    }

    .desktop .onboarding-carousel-image {
        height: 25vh;
    }

    .tablet .onboarding-carousel-image {
        width: auto;
        height: 150px;
        margin-bottom: 30px;
    }

    .phone .onboarding-carousel-image {
        width: auto;
        height: 100px;
        margin-bottom: 20px;
    }

    .onboarding-carousel-item {
        padding: 20px 6px;
        display: flex;
        flex-direction: column;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: stretch;
    }

    .onboarding-carousel-item .page-title {
        margin-bottom: 10px;
        padding-bottom: 0;
        border: none;
        align-self: center;
    }

    .tablet .onboarding-carousel-item .page-title .Heading2 {
        font-size: 26px;
    }

    .phone .onboarding-carousel-item .page-title .Heading2 {
        font-size: 17px;
    }

    .onboarding-carousel-description {
        padding: 0px 40px;
        text-align: center;
    }

    .tablet .onboarding-carousel-description {
        padding: 0px 20px;
        text-align: center;
    }

    .phone .onboarding-carousel-description {
        padding: 0px 10px;
    }

    .onboarding-carousel-container .owl-theme .owl-controls .owl-buttons div {
        top: 35%;
        font-size: 60px;
        background-color: transparent;
        color: #cfd8dc;
    }

    .tablet .onboarding-carousel-container .owl-theme .owl-controls .owl-buttons div {
        font-size: 30px;
    }

    .phone .onboarding-carousel-container .owl-theme .owl-controls .owl-buttons div {
        top: 25%;
        font-size: 20px;
    }

    .onboarding-carousel-container .owl-next.fa.fa-fw.fa-angle-right {
        right: 0;
    }

    .onboarding-carousel-container .owl-prev.fa.fa-fw.fa-angle-left {
        left: 0;
    }

    .onboarding-carousel-container .owl-theme .owl-controls .owl-page span {
        width: 8px;
        height: 8px;
        background-color: #cfd8dc;
        opacity: 1;
    }

    .onboarding-carousel-container .owl-theme .owl-controls .owl-page.active span {
        background-color: #00acc1;
    }

    a.onboarding-carousel-close {
        position: absolute;
        bottom: 9px;
        right: 50px;
        color: #cfd8dc;
        font-weight: 400;
        font-size: 14px;
    }

    .phone a.onboarding-carousel-close {
        right: 20px;
    }

    /*---------------Banner User------------------*/

    .banner-user-header {
        height: 140px;
        background-image: url("/PC_TH/img/bannerimageuser.png?27317");
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .banner-user-content {
        height: 95px;
        padding: 0 20px;
        display: flex;
    }

    .banner-user-image {
        height: 140px;
        width: 140px;
        flex-shrink: 0;
        border: 10px solid #fff;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transform: translateY(-70px);
    }

    .banner-user-info {
        padding: 20px;
        display: flex;
    }

    .banner-user-name {
        margin-right: 15px;
        font-weight: 500;
    }

    /*---------------Tabs Agenda Content------------------*/

    .tabs-content-agenda {
        margin: -10px;
        padding: 40px 50px;
        background-color: #f4f7fc;
    }

    .tablet .tabs-content-agenda {
        padding: 30px;
    }

    .phone .tabs-content-agenda {
        padding: 20px;
    }

    .tabs-content-agenda .List {
        margin-bottom: 50px;
        background-color: transparent;
    }

    /*---------------Input Custom------------------*/

    .input-custom label {
        position: relative;
        height: 26px;
        width: 26px;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        white-space: nowrap;
        margin: 3px 0px;
        user-select: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .input-custom label::before {
        display: inline-block;
        font-style: normal;
    }

    .input-custom input[type="checkbox"]:checked + span + label {
        border-color: #00acc1;
        color: #fff;
        transition: all 0.2s;
    }

    .input-custom input[type="checkbox"]:checked + span + label:before {
        content: "";
        position: absolute;
        top: 4px;
        right: 8px;
        background-color: transparent;
        height: 10px;
        width: 5px;
        border-right: 2px solid #00acc1;
        border-bottom: 2px solid #00acc1;
        transform: rotate(45deg);
        transition: all 0.2s;
    }

    .input-custom input[type="checkbox"],
    .input-custom input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .input-custom input[type="radio"] + label {
        height: 26px;
        width: 26px;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #cfd8dc;
        border-radius: 50%;
        white-space: nowrap;
        margin: 3px 0px;
        user-select: none;
        cursor: pointer;
        transition: none;
    }

    .input-custom input[type="radio"]:checked + label {
        border: 7px solid #00acc1;
    }

    /*---------------Agenda Detail------------------*/

    .agenda-detail {
        position: relative;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .agenda-detail-header {
        padding: 30px;
        border-radius: 4px 4px 0 0;
        background-color: #f4f7fc;
        border-bottom: 1px solid #cfd8dc;
    }

    .agenda-detail.historic .agenda-detail-header {
        border-bottom: 0;
    }

    .tablet .agenda-detail-header {
        padding: 30px;
    }

    .tablet .historic .agenda-detail-header-content {
        flex-direction: column;
    }

    .phone .agenda-detail-header {
        padding: 20px 15px;
    }

    .agenda-detail.historic .agenda-detail-header-left {
        display: flex;
        align-items: center;
    }

    .agenda-detail-header-content {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .agenda-detail.historic .agenda-detail-header-content {
        margin-top: 0;
    }

    .phone .agenda-detail-header-content {
        flex-direction: column;
    }

    .phone .agenda-detail-header-right {
        margin-top: 20px;
    }

    .agenda-detail-content {
        padding: 32px;
        border-radius: 0 0 4px 4px;
        background-color: #fff;
    }

    .tablet .agenda-detail-content {
        padding: 30px;
    }

    .phone .agenda-detail-content {
        padding: 20px 15px;
    }

    .agenda-detail-icon {
        margin-right: 10px;
    }

    .agenda-detail-icon > i.icon,
    .agenda-detail-icon > i.icon:before {
        font-size: 38px;
        color: #00acc1;
    }

    .agenda-detail-info,
    .agenda-detail-location,
    .agenda-detail-actions,
    .agenda-detail-actions-left {
        display: flex;
        padding-left: 25px;
    }

    .agenda-detail-info {
        margin: 0 0 20px 25px;
    }

    .agenda-detail.historic .agenda-detail-info {
        margin-bottom: 0;
    }

    .phone .agenda-detail-info,
    .phone .agenda-detail-location,
    .phone .agenda-detail-actions,
    .phone .agenda-detail-actions-left {
        padding-left: 0;
    }

    .phone .agenda-detail-info {
        margin: 10px 0;
        flex-direction: column;
    }

    .agenda-detail-location {
        align-items: baseline;
    }

    .agenda-detail-location i.icon {
        margin-right: 5px;
        font-size: 16px;
    }

    .agenda-detail-title {
        padding-right: 40px;
    }

    .phone .agenda-detail-title {
        font-weight: 500;
    }

    .agenda-detail-date {
        margin-right: 40px;
    }

    .phone .agenda-detail-date {
        margin: 0 0 5px 0;
    }

    .phone .agenda-detail-actions {
        flex-direction: column;
    }

    .phone .agenda-detail-actions .Button {
        width: 100%;
    }

    .agenda-detail-actions-left .Button:first-child {
        margin-right: 20px;
    }

    .phone .agenda-detail-actions-left {
        flex-direction: column;
    }

    .phone .agenda-detail-actions-left .Button:first-child {
        margin-right: 0px;
    }

    .phone .agenda-detail-actions .Button {
        margin-top: 10px;
    }

    .agenda-detail-actions-right {
        margin-left: 20px;
        text-align: right;
    }

    .phone .agenda-detail-actions-right {
        margin-left: 0;
        align-items: center !important;
        text-align: center;
    }

    .agenda-detail.is-teleconsulta .agenda-detail-actions-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .agenda-detail-actions-right .Button {
        width: 100%;
        margin-bottom: 10px;
    }

    .tablet .agenda-detail.historic .agenda-detail-actions-right .Button {
        width: auto;
        margin-top: 20px;
    }

    .phone .agenda-detail-actions-right .Button {
        width: 100% !important;
        margin-bottom: 0;
    }

    .agenda-detail.is-teleconsulta .agenda-detail-actions-right .Button {
        width: auto;
    }

    .agenda-detail-vertical-separator {
        margin-bottom: 50px;
        display: flex;
    }

    .tablet .agenda-detail-vertical-separator,
    .phone .agenda-detail-vertical-separator {
        margin-bottom: 20px;
        flex-direction: column;
    }

    .agenda-detail-content-left,
    .agenda-detail-content-right {
        flex: 1;
    }

    .agenda-detail-content-left {
        padding-right: 20px;
    }

    .tablet .agenda-detail-content-left,
    .phone .agenda-detail-content-left {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .agenda-detail-content-right {
        padding-left: 20%;
    }

    .tablet .agenda-detail-content-right,
    .phone .agenda-detail-content-right {
        padding-left: 0;
    }

    .agenda-detail-card-left,
    .agenda-detail-card-right,
    .agenda-detail-card-bottom {
        margin-top: 10px;
    }

    .agenda-detail-card-left {
        margin-top: 0;
    }

    .agenda-detail-onboarding {
        position: absolute;
        top: 30px;
        right: 35px;
    }

    .phone .agenda-detail-onboarding {
        top: 17px;
        right: 15px;
    }

    .agenda-detail .Tabs_header {
        background-color: #f4f7fc;
        padding: 0;
    }

    .agenda-detail .Tabs_header .Tabs__tab:hover,
    .agenda-detail .Tabs_header .Tabs__tab.active {
        background-color: #eef2f7;
    }

    .agenda-detail .Tabs_body {
        background-color: #fff;
        padding: 0;
    }

    .agenda-detail .TableRecords {
        border: 0;
    }

    .agenda-detail .TableRecords_Header {
        padding: 5px 10px;
        font-size: 16px;
        font-weight: 400;
        color: #273136;
        border: 0;
    }

    .agenda-detail .TableRecords_OddLine,
    .agenda-detail .TableRecords_EvenLine {
        padding: 5px 10px;
        color: #52646c;
        border: 0;
    }

    .desktop .agenda-detail .TableRecords_OddLine:first-child,
    .desktop .agenda-detail .TableRecords_EvenLine:first-child,
    .desktop .agenda-detail .TableRecords_Header:first-child,
    .tablet .agenda-detail .TableRecords_OddLine:first-child,
    .tablet .agenda-detail .TableRecords_EvenLine:first-child,
    .tablet .agenda-detail .TableRecords_Header:first-child {
        padding-left: 0;
    }

    .tablet.portrait .agenda-detail .TableRecords:not(.NoResponsive) .TableRecords_Label,
    .phone .agenda-detail .TableRecords:not(.NoResponsive) .TableRecords_Label {
        color: #273136;
        line-height: 1;
    }

    .phone .agenda-detail .TableRecords {
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #ffffff;
        font-size: 13px;
    }

    .phone .agenda-detail .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine,
    .phone .agenda-detail .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine {
        padding: 0 16px;
        margin-bottom: 8px;
        height: 40px;
    }

    .phone .agenda-detail .TableRecords:not(.NoResponsive) tr:first-child td.TableRecords_OddLine:first-child {
        border: none;
        height: auto;
        margin-bottom: 0;
        padding: 16px;
        line-height: 1;
    }

    .phone .agenda-detail .TableRecords:not(.NoResponsive) > * > * > td:first-child:before,
    .phone .agenda-detail .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:first-child:before {
        content: "\f078" !important;
        font-size: 10px;
        color: #00838f;
    }

    .phone .agenda-detail .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:first-child:before {
        transform: rotate(180deg);
    }

    .agenda-detail-fatura {
        display: flex;
        align-items: center;
    }

    .phone .agenda-detail-fatura {
        flex-direction: column;
        align-items: flex-start;
    }
    .agenda-detail-fatura-info {
        display: flex;
        flex-direction: column;
    }

    .phone .agenda-detail-fatura-date,
    .phone .agenda-detail-fatura-reference {
        margin-bottom: 10px;
    }
    .agenda-detail-fatura-value {
        margin: 0 0 0 auto;
    }
    .agenda-detail-fatura-actions {
        flex-basis: 50%;
        display: flex;
        justify-content: flex-end;
        margin-left: auto;
    }

    .phone .agenda-detail-fatura-actions {
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
        justify-content: flex-end;
        margin: 0;
    }

    .phone .agenda-detail-fatura-actions .Button {
        width: 100%;
        margin: 10px 0 0;
    }

    .phone .agenda-detail.historic .Button {
        width: 100%;
    }

    .ListRecords .list-item-invoices:not(:last-child) {
        padding-bottom: 32px;
        margin-bottom: 40px;
        border-bottom: 1px solid #cfd8dc;
    }

    .ListRecords .list-item-invoices:not(:first-child) {
        margin-top: 40px;
    }

    /*---------------Agenda Card Detail------------------*/

    .card-detail-agenda {
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .card-detail-agenda .card-doctor-header {
        border-bottom: none;
    }

    .card-detail-agenda .card-doctor-content {
        padding: 0;
    }

    .phone .card-detail-agenda .card-doctor-content {
        padding: 10px;
    }

    /*---------------Card Map------------------*/

    .card-map {
        position: relative;
        padding: 20px;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .phone .card-map {
        padding: 10px;
    }

    .card-map-image {
        position: relative;
        margin-bottom: 20px;
        height: 150px;
        width: 100%;
        overflow: hidden;
    }

    .card-map-image > span > div {
        position: unset !important;
    }

    .card-map-content-top,
    .card-map-content-bottom {
        display: flex;
    }

    .card-map-content-bottom {
        margin-top: 10px;
    }

    .card-map-content-top a {
        font-weight: 400;
    }

    .card-map-content i.icon {
        margin-right: 10px;
        font-size: 15px;
        color: #78909c;
        line-height: 1;
    }

    .card-map-content-bottom i.icon {
        align-self: center;
    }

    .card-map-info-link a {
        padding-left: 20px;
        font-weight: 400;
        text-decoration: underline;
    }

    /*---------------Card Greeting------------------*/

    .card-greeting {
        position: relative;
        margin-bottom: 40px;
        padding: 20px 0;
        display: flex;
        align-items: center;
    }

    .phone .card-greeting {
        padding: 15px 10px;
        margin-bottom: 20px;
        flex-direction: row-reverse;
    }

    .card-greeting-title.Heading2 {
        margin-bottom: 0;
    }

    .card-greeting-content {
        margin-top: 5px;
        color: #52646c;
    }

    .phone .card-greeting-content {
        margin-top: 0;
        font-size: 15px;
        line-height: 21px;
    }

    .card-greeting-content:empty {
        display: none;
    }

    .card-greeting-info {
        padding-top: 20px;
    }

    .phone .card-greeting-info {
        padding-top: 10px;
    }

    .card-greeting-image {
        height: 136px;
        width: 124px;
        margin-right: 20px;
    }

    .phone .card-greeting-image {
        height: 102px;
        width: auto;
        margin-right: 10px;
    }

    /*---------------Vertical Timeline------------------*/

    .VerticalTimeline-content {
        box-shadow: none;
        border: 1px solid #cfd8dc;
    }

    .card-timeline-info .PH_Preview {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .phone .card-timeline-info .PH_Preview {
        margin-bottom: 5px;
    }

    .card-timeline-image {
        height: 25px;
        width: 25px;
        margin-right: 8px;
        border-radius: 50%;
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }

    .card-timeline-location {
        display: flex;
    }

    .card-timeline-location .icon.material-icons {
        font-size: 18px;
    }

    .phone .card-timeline-location .icon.material-icons {
        font-size: 15px;
        line-height: 1.3;
    }

    .card-timeline-location .rich-text {
        margin-left: 5px;
    }
    .card-timeline-action {
        margin-top: 15px;
    }

    .card-timeline-specialty {
        margin: 0;
    }

    .card-timeline-action-phone {
        position: absolute;
        top: 34px;
        right: 10px;
    }

    .card-timeline-action-phone .icon.material-icons {
        font-size: 28px;
        color: #52646c;
    }

    /*---------------Section Privacy------------------*/

    .section-privacy {
        margin-bottom: 20px;
        padding: 30px;
        background-color: #fff;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .tablet .section-privacy {
        padding: 20px;
    }

    .section-privacy .Section_header {
        padding-bottom: 20px;
        display: flex;
    }

    .section-privacy-icon {
        margin-right: 15px;
    }

    .section-privacy-icon .icon.material-icons,
    .section-privacy-icon .icon:before {
        font-size: 20px;
        line-height: 24px;
        color: #00acc1;
    }

    .section-privacy-action {
        margin-left: auto;
    }

    /*---------------Section Privacy Simple------------------*/

    .section-privacy-simple {
        padding: 30px;
    }

    .tablet .section-privacy-simple {
        padding: 20px;
    }

    .section-privacy-simple .Section_header {
        padding: 0;
        align-items: center;
        border: none;
    }

    .section-privacy-simple .section-privacy-icon .icon.material-icons,
    .section-privacy-simple .section-privacy-icon .icon:before {
        font-size: 30px;
        line-height: 40px;
        color: #00acc1;
    }

    /*----------------Card Payment-----------------*/

    .payment-method-container {
        display: flex;
        align-items: center;
    }

    .phone .payment-method-container .input-custom {
        display: none;
    }

    a .card-payment,
    .card-payment {
        height: 82px;
        width: 365px;
        position: relative;
        padding: 25px 22px;
        display: flex;
        align-items: center;
        background-color: #fff;
        color: #273136;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .payment-method-container .card-payment {
        margin-left: 36px;
    }

    .phone .payment-method-container .card-payment {
        width: 100%;
        margin-left: 0;
    }

    a .card-payment:hover,
    .card-payment:hover {
        text-decoration: none;
    }

    .card-payment.is-selected {
        border: 4px solid #00acc1;
        padding: 16px 18px;
    }

    .card-payment-reference,
    .card-payment-date {
        font-size: 16px;
        text-align: right;
    }

    .phone .card-payment-reference,
    .phone .card-payment-date {
        font-size: 15px;
    }

    .card-payment-reference {
        font-weight: 500;
    }

    .card-payment-image img {
        width: 80%;
    }

    .card-payment-content {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .card-payment-action {
        width: 16%;
        display: flex;
        justify-content: center;
    }

    .card-payment.is-selected > .icon {
        position: absolute;
        top: 3px;
        right: 3px;
        font-size: 18px;
        color: #fff;
    }

    .card-payment.is-selected:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -1px;
        right: -1px;
        width: 0;
        height: 0;
        border-top: 40px solid #00acc1;
        border-left: 40px solid transparent;
    }

    .payment-actions {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
    }

    .phone .payment-actions {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }

    .payment-actions .Button {
        flex-shrink: 0;
    }

    .phone .payment-actions .Button {
        width: 100%;
    }

    .payment-actions .Button:first-child {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .phone .payment-actions .Button:first-child {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .add-payment-link {
        margin-left: 65px;
        display: flex;
        align-items: center;
    }

    .phone .add-payment-link {
        margin-left: 0;
        font-size: 15px;
        text-decoration: underline;
    }

    /*----------------Input Date-----------------*/

    input.empty-input-date::before {
        width: 100%;
        content: attr(placeholder);
    }

    /*----------------MediumRightColumn COntainer-----------------*/

    .desktop .MediumRightColumns-container .MediumRightColumns > .Column.ColFirst {
        padding-right: 45px;
    }

    .desktop .MediumRightColumns-container .MediumRightColumns > .Column.ColLast {
        padding-left: 45px;
    }

    .tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakFirst > .Column,
    .tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakLast > .Column,
    .tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakAll > .Column,
    .tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakMiddle > .Column {
        margin-bottom: 50px;
    }

    .tablet .MediumRightColumns-container .card-news {
        max-width: 440px;
        margin: 0 auto;
    }

    .phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakFirst > .Column,
    .phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakLast > .Column,
    .phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakAll > .Column,
    .phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakMiddle > .Column {
        margin-bottom: 30px;
    }

    /*---------------Card Waiting Time------------------*/

    .card-waiting-time {
        margin: 0 0 80px;
        padding: 40px 30px;
        background-color: #f4f7fc;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
    }

    .phone .card-waiting-time {
        padding: 15px;
    }

    .card-waiting-time-header {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }

    .phone .card-waiting-time-header {
        margin-bottom: 10px;
    }

    .card-waiting-time .select2-container .select2-choice {
        width: auto;
        padding-right: 25px;
        background-color: transparent;
        border: none;
        font-size: 22px;
    }

    .phone .card-waiting-time .select2-container .select2-choice {
        width: auto;
        font-size: 16px;
    }

    .card-waiting-time .ListRecords {
        margin-bottom: 15px;
    }

    /*---------------Card Download App------------------*/

    .card-download-app {
        height: 0;
        display: none;
        justify-content: center;
        align-items: center;
        padding: 7px;
        background-color: #fff;
        box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    }

    .phone.login-layout .card-download-app {
        display: flex;
        height: 77px;
    }

    .card-download-image img {
        height: 50px;
        flex-shrink: 0;
        margin-right: 6px;
    }

    .card-download-info {
        display: flex;
        flex-direction: column;
    }

    .card-download-title {
        margin-bottom: 3px;
    }

    .card-download-actions {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 22px 0px 10px;
        height: 100%;
    }

    .card-download-description,
    a.card-download-open {
        font-size: 10px;
    }

    .card-download-description {
        color: #52646c;
        line-height: 12px;
    }

    .card-download-actions a.Button {
        height: 23px;
        min-width: auto;
        padding: 7px 40px;
        font-size: 10px;
        line-height: 5px;
    }

    a.card-download-open {
        display: flex;
        justify-content: center;
        text-decoration: underline;
    }

    .card-download-close {
        position: absolute;
        top: 0;
        right: 0;
    }

    .card-download-close .icon.material-icons {
        font-size: 16px;
        color: #00838f;
        padding: 2px;
    }

    /*---------------Card Appointment Price ------------------*/

    .card-appointment-price {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 100px;
        padding: 20px 25px;
        margin-bottom: 20px;

        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    /*---------------Login Layout------------------*/

    .phone.login-layout .Header {
        height: 130px;
    }

    .phone.login-layout .Content.ThemeGrid_Wrapper {
        top: 130px;
    }

    /*---------------Modal Custom------------------*/

    .modal-custom {
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.03), 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }

    .modal-custom .ModalContainer {
        padding: 0;
        box-shadow: none;
        border-radius: 4px;
        text-align: unset;
        max-width: 731px;
        width: 100%;
    }

    .modal-custom.is-small .ModalContainer {
        width: 590px;
    }

    .tablet .modal-custom.is-small .ModalContainer {
        width: 500px;
    }

    .phone .modal-custom.is-small .ModalContainer {
        width: 320px;
    }

    .ie .modal-custom .ModalContainer {
        text-align: left;
    }

    .tablet .modal-custom .ModalContainer {
        max-width: 80%;
    }

    body.ModalOpened .modal-custom .ModalBackground {
        background-color: #607d8b;
        opacity: 0.5;
    }

    .modal-custom .ModalHeader {
        position: relative;
        background-color: #00acc1;
    }

    .modal-custom .ModalTitle {
        padding: 28px 70px 28px 30px;
        margin-bottom: 0 !important;
        color: #fff;
        background-color: #00acc1;
        font-weight: 400;
        text-align: left;
        border-radius: 4px 4px 0 0;
    }

    .tablet .modal-custom .ModalTitle {
        padding: 20px 60px 20px 20px;
    }

    .phone .modal-custom .ModalTitle {
        padding: 15px 50px 15px 15px;
    }

    .modal-custom .ModalMessage {
        padding: 30px 70px;
        margin-bottom: 20px;
        padding-bottom: 0;
        font-size: inherit;
        max-height: calc(100vh - 290px);
        overflow-y: auto;
    }

    .modal-custom.is-onboarding .ModalMessage {
        max-height: unset;
        overflow: hidden;
    }

    .tablet .modal-custom .ModalMessage {
        padding: 20px 40px;
        padding-bottom: 0;
    }

    .phone .modal-custom .ModalMessage {
        padding: 20px;
        padding-bottom: 0;
        margin-bottom: 10px;
        max-height: calc(100vh - 330px);
    }

    .modal-custom.is-small .ModalMessage {
        padding: 0;
    }

    .modal-custom .ModalMessage::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .modal-custom .ModalMessage::-webkit-scrollbar:vertical {
        width: 6px;
    }

    .modal-custom .ModalMessage::-webkit-scrollbar:horizontal {
        height: 6px;
    }

    .modal-custom .ModalMessage::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white; /* should match background, can't be transparent */
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-custom .ModalActions {
        padding: 10px 70px 25px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .modal-custom.is-onboarding .ModalActions:empty {
        display: none;
    }

    .tablet .modal-custom .ModalActions {
        padding: 20px 40px;
    }

    .phone .modal-custom .ModalActions {
        padding: 20px;
    }

    .modal-custom .ModalActions .Button:last-child {
        margin-left: 20px;
    }

    .phone .modal-custom .ModalActions .Button:last-child {
        margin: 20px 0 0 0;
    }

    .modal-custom .ModalClose {
        position: absolute;
        top: 30px;
        right: 30px;
    }

    .tablet .modal-custom .ModalClose {
        top: 20px;
        right: 20px;
    }

    .phone .modal-custom .ModalClose {
        top: 14px;
        right: 15px;
    }

    .modal-custom .ModalClose a .icon {
        color: #fff;
    }

    .modal-custom.no-header .ModalClose a .icon {
        color: inherit;
    }

    .modal-custom.no-header:not(.modal-alert) .ModalMessage {
        padding-top: 20px;
    }

    body.ModalOpened .modal-custom .ModalContainer {
        top: 70px;
        bottom: inherit;
    }

    body.ModalOpened .phone .modal-custom .ModalContainer {
        max-height: calc(100vh - 150px);
        height: auto;
    }

    body.ModalOpened .modal-custom.is-onboarding .ModalContainer {
        border: none;
    }

    .modal-custom .Form {
        margin: 0;
    }

    .modal-calendar-container {
        padding: 25px;
    }

    .modal-calendar-container img {
        width: 30px;
    }

    .modal-calendar-container .Card .Card_Title.Heading3 {
        display: none;
    }

    .modal-calendar-container .CardSimple .Card_Text {
        margin: 0;
    }

    .modal-calendar-container .input-row {
        align-items: center;
        justify-content: center;
    }

    .modal-custom .Heading2 {
        font-weight: 400;
    }

    /*---------------Modal Alert ------------------*/

    .modal-custom.modal-alert .ModalActions {
        padding: 20px 70px;
    }

    .modal-custom.modal-alert.modal-new .ModalActions {
        padding: 0;
    }

    .phone .modal-custom.modal-alert .ModalActions {
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .phone .modal-custom.modal-alert .ModalActions .Button {
        width: 100% !important;
    }

    .modal-custom.modal-alert .ModalMessage {
        margin-bottom: 0;
    }

    .phone .modal-custom.modal-alert .icon-content {
        padding: 30px 15px 20px;
    }

    .phone .modal-alert.modal-custom .ModalContainer {
        overflow: auto;
    }

    /*---------------Modal Form ------------------*/

    .modal-form a.ModalClose {
        color: #fff;
    }

    .modal-form .ModalMessage {
        margin-bottom: 0;
        padding: 30px 40px;
    }

    .modal-form .ModalActions {
        padding: 20px 40px 25px;
    }

    .phone .modal-form .ModalActions {
        padding: 20px;
    }

    .phone .modal-form .ModalActions {
        display: flex;
        flex-direction: column;
    }

    .phone .modal-form .ModalActions .Button {
        width: 100%;
    }

    .phone .modal-form .ModalActions .Button:last-child {
        margin: 10px 0 0 0;
    }

    /*---------------Modal Alert NEW ------------------*/

    .modal-alert-new .ModalContainer {
        width: 590px;
        padding: 55px 80px 50px 55px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    }

    .phone .modal-alert-new .ModalContainer {
        width: 90vw;
        padding: 50px 24px 32px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    }

    .modal-alert-new .ModalMessage,
    .tablet .modal-alert-new .ModalMessage,
    .phone .modal-alert-new .ModalMessage {
        padding: 0;
        margin: 0;
    }

    .modal-alert-new .ModalClose,
    .tablet .modal-alert-new .ModalClose {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .modal-alert-new .ModalActions,
    .tablet .modal-alert-new .ModalActions,
    .phone .modal-alert-new .ModalActions {
        padding: 20px 0 0;
    }

    .phone .modal-alert-new .ModalActions {
        display: flex;
        flex-direction: column;
    }

    .phone .modal-alert-new .ModalActions .Button {
        width: 100%;
    }

    .phone .modal-alert-new .ModalActions .Button:last-child {
        margin: 10px 0 0 0;
    }

    .modal-alert-new .icon-content {
        padding: 0;
    }

    /*---------------User Panel ------------------*/

    .user-panel.InlineDropdown {
        width: 200px;
    }

    .user-panel .InlineDropdown_label {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .phone .user-panel .InlineDropdown_label {
        justify-content: flex-start;
    }

    .user-panel .DropdownMenu {
        left: 0px;
        min-width: 200px;
        padding: 20px 20px 0;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.2);
        z-index: 220;
    }

    .user-panel .DropdownMenu::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        height: 10px;
        width: 10px;
        background-color: #fff;
        border-top: 1px solid #cfd8dc;
        border-right: 1px solid #cfd8dc;
        transform: rotate(-45deg);
    }

    /*---------------User Item ------------------*/

    .user-item {
        margin-bottom: 15px;
        display: flex;
    }

    .user-item-image {
        height: 20px;
        width: 20px;
        flex-shrink: 0;
        margin-right: 12px;
        border-radius: 50%;
        background-image: url("/PC_TH/img/default_user.png?27317");
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }

    .user-item-name {
        font-size: 14px;
        line-height: 20px;
        color: #52646c;
    }

    /*---------- Blank Slate Custom ----------*/

    .BlankSlate_custom {
        padding: 50px 20%;
    }

    .BlankSlate_custom .Blank_icon .icon.material-icons,
    .BlankSlate_custom .Blank_icon .icon::before {
        font-size: 50px;
        color: #273136;
    }

    .BlankSlate_custom .Blank_desc.lead-normal {
        margin-bottom: 5px;
        color: #273136;
    }

    /*---------- Badge Custom ----------*/

    .Badge.badge_custom {
        height: 19px;
        padding: 1px 3px;
        border: 1px solid #fff;
        background-color: #00acc1;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        transform: translateY(-6px);
    }

    /*---------- Privacy Block ----------*/

    .privacy-block {
        padding: 25px 30px 20px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    .phone .privacy-block {
        padding: 15px;
    }

    .privacy-block-top {
        padding-bottom: 40px;
        border-bottom: 1px solid #cfd8dc;
    }

    .privacy-block-bottom {
        padding-top: 40px;
    }

    .privacy-block-action {
        display: flex;
        justify-content: flex-end;
    }

    .privacy-block .input-row .icon,
    .privacy-block .input-row .material-icons {
        line-height: unset;
        color: #00acc1;
    }

    /*---------- Card Privacy ----------*/

    .card-privacy {
        height: 300px;
        padding: 25px;
        margin-top: 10px;
        margin-bottom: 20px;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #fcfcfc;
        overflow-y: auto;
    }

    /*---------- Card Center Content ----------*/

    .card-center-content {
        padding: 35px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        background-color: #fff;
    }

    /* File Upload **************************/

    .FileUpload-custom {
        display: inline-block;
        background-color: transparent;
        border: none;
        padding: 0;
    }

    /* Error 404 **************************/

    .error-page {
        margin: 0 auto;
        height: 72vh;
        background-image: url("/PC_TH/img/erro404desktop.png?27317");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .tablet .error-page {
        height: 40vh;
    }

    .phone .error-page {
        height: 50vh;
    }

    .error-page.default {
        background-image: url("/PC_TH/img/ErroGenerico_2x.png?27317");
        background-size: 50%;
        background-position: bottom;
    }

    .desktop .error-page.default {
        background-size: 60%;
    }

    .desktop.small .error-page.default {
        background-size: 70%;
    }

    .desktop.big .error-page.default {
        background-size: 50%;
    }

    .tablet .error-page.default {
        height: 50vh;
        background-size: 70%;
    }

    .phone .error-page.default {
        height: 60vh;
        background-size: 100%;
    }

    .error-info {
        margin-top: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .error-info .Button {
        margin-top: 20px;
    }

    .tablet .error-info {
        margin-top: 50px;
    }

    .phone .error-info {
        margin-top: 30px;
    }

    .error-title,
    .error-message {
        display: block;
        text-align: center;
    }

    .error-title {
        margin-bottom: 30px;
        font-size: 50px;
        font-weight: 500;
    }

    .tablet .error-title {
        margin-bottom: 20px;
        font-size: 40px;
    }

    .phone .error-title {
        margin-bottom: 10px;
        font-size: 30px;
    }

    /* Download app **************************/

    .store-links img {
        height: 38px;
    }

    /*---------------Card Self Test ------------------*/

    .card-map-content-notes {
        border-bottom: 1px solid #cfd8dc;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .card-map-content-notes:empty {
        display: none;
    }

    /*---------------List Item Bullet ------------------*/

    .list-item-bullet {
        position: relative;
        padding-left: 20px;
    }

    .list-item-bullet:before {
        content: "";
        position: absolute;
        top: 9px;
        left: 0;
        height: 7px;
        width: 8px;
        background-image: url(/PC_TH/img/bullet.png?124868&27317);
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        background-repeat: no-repeat;
    }

    /*---------------Menu Balloon ------------------*/

    .menu-balloon {
        position: relative;
    }

    .balloon-menu-wrapper {
        display: none;
        position: absolute;
        top: 42px;
        left: -100px;
        padding: 20px 25px 15px;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.2);
        z-index: 2;
    }

    .balloon-menu-wrapper:after {
        content: "";
        position: absolute;
        top: -9px;
        right: 25px;
        height: 14px;
        width: 14px;
        border-left: 1px solid #cfd8dc;
        border-top: 1px solid #cfd8dc;
        background-color: #fff;
        border-radius: 2px;
        transform: rotate(45deg);
        z-index: 3;
    }

    .menu-balloon.open .balloon-menu-wrapper {
        display: block;
    }

    .menu-balloon .input-row {
        align-items: center;
    }

    /*---------------Document Item ------------------*/

    .document-table {
        border: 1px solid #dee2e6;
        border-radius: 4px;
    }

    .document-table th,
    .document-table td {
        padding: 15px 18px 10px;
        color: #273136;
        font-size: 14px;
        font-weight: 400;
    }

    .document-table td {
        color: #52646c;
    }

    .document-table td a {
        font-weight: 400;
    }

    .document-table tr:nth-child(even) {
        background-color: rgba(240, 245, 252, 0.3);
    }

    /*--------------- Declaration ------------------*/

    .content-declaration {
        padding: 40px 40px 0px 40px;
        font-weight: bold;
        background-color: #fff;
    }

    .declaration-logo img {
        width: 340px;
    }

    .declaration-title {
        margin-top: 120px;
        text-align: center;
    }

    .declaration-text {
        height: 160px;
        margin-top: 100px;
    }

    .declaration-signature {
        margin-top: 100px;
        margin-right: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .declaration-signature-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .declaration-signature img {
        width: 100px;
        margin-bottom: 10px;
    }

    .declaration-date {
        margin-top: 40px;
    }

    .declaration-footer {
        margin-top: 370px;
    }

    /*--------------- Card banner ------------------*/

    .card-banner {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        background-color: #f0f5fc;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        margin-bottom: 50px;
    }

    .phone .card-banner {
        padding: 10px 10px 0;
        flex-direction: column;
        justify-content: center;
    }

    .card-banner-info {
        padding-top: 10px;
        flex-basis: 48%;
        flex-shrink: 0;
    }

    .phone .card-banner-info {
        padding: 20px 10px 0px;
        order: 2;
    }

    .phone .card-banner-info .card-muda-content {
        display: flex;
        flex-direction: column;
    }

    .card-banner-info .rich-text {
        line-height: 20px;
        color: #6b7b84;
    }

    .phone .card-banner-info .rich-text {
        line-height: 20px;
        color: #6b7b84;
    }

    .phone .card-banner-info .rich-text p {
        margin-top: 0;
    }

    .card-banner-content {
        font-size: 13px;
    }

    .card-banner-image {
        width: 100%;
        height: auto;
        position: relative;
    }

    .card-banner-media {
        display: flex;
        align-items: center;
        flex-basis: 49%;
        flex-shrink: 0;
    }

    .card-banner-media img {
        width: 100%;
        height: 100%;
    }

    .card-banner a {
        font-weight: 400 !important;
        width: 100%;
    }

    /* .owl-carousel .card-banner-info {
  align-self: start;
} */

    .owl-carousel .Owlbuttons {
        position: absolute;
        right: 5px;
        bottom: 10px;
        width: 80px;
        display: flex;
    }

    .phone .owl-carousel .Owlbuttons {
        position: static;
        margin: 10px auto;
        display: block;
        right: 0;
        bottom: 0;
    }

    .owl-carousel .Owlbuttons .owlselect {
        padding: 4px;
    }

    .owl-carousel .Owlbuttons .owlselect.active div,
    .owl-carousel .Owlbuttons .owlselect:hover div {
        background: white;
    }

    .owl-carousel .Owlbuttons .owlselect div {
        width: 8px;
        height: 8px;
        border-radius: 20px;
        background: #cfd8dc;
        display: block;
    }

    .phone .owl-carousel .Owlbuttons .owlselect div {
        background-color: #b2e6f0;
    }

    .phone .owl-carousel .Owlbuttons .owlselect.active div {
        background-color: #26c6da;
    }

    .owl-carousel .owlleft,
    .owlright {
        color: #fff;
        line-height: 18px;
    }

    .phone .owl-carousel .owlleft,
    .phone .owlright {
        color: #26c6da;
        line-height: 18px;
    }

    .Owlbuttons.mobile {
        display: none;
    }

    .phone .Owlbuttons.mobile {
        display: block;
        width: 100px;
    }

    /*--------------- Card Link ------------------*/

    .card-link {
        padding: 15px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        font-weight: 400;
        color: inherit;
    }

    .desktop .card-link {
        padding: 25px;
        min-height: 127px;
        height: 100%;
    }

    .desktop .card-link:hover {
        box-shadow: none;
    }

    .phone .card-link {
        min-height: 130px;
        flex-direction: column;
        justify-content: center;
    }

    .card-link-icon {
        height: 40px;
        width: 40px;
        margin-right: 15px;
        flex-shrink: 0;
        color: #fff;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .phone .card-link-icon {
        margin: 0;
    }

    .card-link-icon .icon {
        line-height: 1;
    }

    .card-link.orange .card-link-icon {
        background-color: #f9a109;
    }

    .card-link.green .card-link-icon {
        background-color: #c1c000;
    }

    .card-link.red .card-link-icon {
        background-color: #ed5b73;
    }

    .card-link.blue .card-link-icon {
        background-color: #00838f;
    }

    .desktop .card-link.blue:hover {
        background-color: #00838f;
    }

    .desktop .card-link.blue:hover .card-link-icon {
        background-color: #fff;
        color: #00838f;
    }

    .desktop .card-link.orange:hover {
        background-color: #f9a109;
    }

    .desktop .card-link.orange:hover .card-link-icon {
        background-color: #fff;
        color: #f9a109;
    }

    .desktop .card-link.green:hover {
        background-color: #c1c000;
    }

    .desktop .card-link.green:hover .card-link-icon {
        background-color: #fff;
        color: #c1c000;
    }

    .desktop .card-link.red:hover {
        background-color: #ed5b73;
    }

    .desktop .card-link.red:hover .card-link-icon {
        background-color: #fff;
        color: #ed5b73;
    }

    .card-link.purple .card-link-icon {
        background-color: #7dabff;
    }

    .desktop .card-link.purple:hover {
        background-color: #7dabff;
    }

    .desktop .card-link.purple:hover .card-link-icon {
        background-color: #fff;
        color: #7dabff;
    }

    .phone .card-link-info {
        margin-top: 14px;
    }

    .phone .card-link-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-link-title {
        color: #273136;
        font-family: "Azo Sans";
        font-size: 18px;
        font-weight: 500;
        line-height: 23px;
    }

    .phone .card-link-title {
        text-align: center;
    }

    .card-link-subtitle {
        font-size: 16px;
        line-height: 26px;
        color: #52646c;
        margin-top: 6px;
    }

    .phone .card-link-subtitle {
        display: none;
    }

    .desktop .card-link:hover .card-link-subtitle {
        color: #273136;
    }

    /*--------------- Contact Menu ------------------*/

    .contact-menu {
        position: fixed;
        bottom: 52px;
        right: 32px;
        z-index: 200;
    }

    .contact-menu-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .contact-menu-content a:hover {
        text-decoration: none;
    }

    .contact-menu-trigger {
        height: 80px;
        width: 80px;
        background-color: #00838f;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
    }

    .desktop .contact-menu-trigger:hover {
        background-color: #364952;
    }

    .phone .contact-menu-trigger {
        height: 48px;
        width: 48px;
    }

    .contact-menu-trigger .icon.mdi:before {
        font-size: 40px;
        color: #fff;
        line-height: 1.2;
    }

    .phone .contact-menu-trigger .icon.mdi:before {
        font-size: 24px;
        line-height: 1.5;
    }

    .tooltipster-contact-menu.Balloon {
        border: none;
        border-radius: 4px;
        box-shadow: none;
        background: transparent;
    }

    .phone .tooltipster-contact-menu.Balloon .Balloon_content {
        padding: 0;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content {
        position: relative;
        top: 8px;
        right: 35px;
    }

    .phone .tooltipster-contact-menu.Balloon .tooltipster-content {
        right: 36px;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content .input-row {
        align-items: center;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left {
        height: 44px;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        padding: 15px;
        border-radius: 4px;
        background-color: #d4edf4;
        white-space: nowrap;
    }

    .tablet .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left,
    .phone .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left {
        white-space: nowrap;
    }

    .phone .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left {
        background-color: #fff;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right > div {
        display: inherit;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right {
        height: 40px;
        width: 40px;
        background-color: #ffffff;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right .icon {
        line-height: 1;
        font-size: 22px;
    }

    .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right .icon.mdi-24px.mdi:before {
        font-size: 28px;
    }

    .contact-menu-item {
        font-size: 16px;
        font-weight: 400 !important;
        margin-bottom: 16px;
    }

    .phone .contact-menu-item {
        font-size: 15px;
    }

    .contact-menu-background {
        background-color: rgba(55, 71, 79, 0.5);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

    /* CARTOES **************************************************************************************************************************/

    /****************** CALENDÁRIO ******************/

    .card-calendario-registo {
        border-left: 1px solid #cfd8dc;
        border-right: 1px solid #cfd8dc;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .card-calendario-registo .card-calendario-registo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #00838f;
        padding: 15px;
    }

    .phone .card-calendario-registo .card-calendario-registo-header {
        flex-direction: column;
    }

    .card-calendario-registo .card-calendario-registo-header .Heading3 {
        color: #fff;
        padding: 0;
        margin: 0;
    }
    .card-calendario-registo-header a,
    .card-calendario-registo-header .CardBtn {
        border: 2px solid #fff;
        /*padding: 10px 5px;*/
        padding: 3px 6px;
        border-radius: 4px;
        margin-left: 20px;
        color: #fff;
    }

    .card-calendario-registo-header a:hover,
    .card-calendario-registo-header .CardBtn:hover {
        background: #fff;
        transition: all 300ms linear;
    }

    .card-calendario-registo-header a .fa-fw,
    .card-calendario-registo-header .CardBtn .fa-fw {
        color: #fff;
        font-size: 16px;
    }
    .card-calendario-registo-header a:hover .fa-fw,
    .card-calendario-registo-header .CardBtn:hover .fa-fw {
        color: #00acc1;
    }

    .card-calendario-registo .card-calendario-registo-content {
        display: flex;
        border-bottom: 1px solid #cfd8dc;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #fff;
    }

    .light-calendario-registo .card-calendario-registo .card-calendario-registo-header {
        background-color: #f4f7fc;
        color: #273136;
    }

    .phone .card-calendario-registo-actions {
        margin-top: 10px;
    }

    .phone .card-calendario-registo-header .CardBtn:first-child {
        margin-left: 0px;
    }

    .card-calendario-registo div:nth-child(odd) .card-calendario-registo-content {
        background: #fcfdff;
    }
    .card-calendario-registo .card-calendario-registo-content:nth-child(even),
    .card-calendario-registo div:nth-child(even) .card-calendario-registo-content {
        background: #fff;
    }

    .light-calendario-registo. card-calendario-registo .card-calendario-registo-content:nth-child(odd) {
        background: #fcfcfc;
    }
    .light-calendario-registo. card-calendario-registo .card-calendario-registo-content:nth-child(odd) {
        background: #fcfdff;
    }

    .light-calendario-registo .card-calendario-registo .card-calendario-registo-header .Heading3 {
        color: #273136;
    }

    .summary .card-calendario-registo.light {
        width: 48%;
        min-width: 540px;
        display: inline-table;
    }

    .summary .card-calendario-registo.light:nth-child(odd) {
        margin-right: 3%;
    }

    .phone .summary .card-calendario-registo.light {
        width: 100%;
        min-width: unset;
        display: flex;
        flex-direction: column;
    }

    .summary .card-calendario-registo.light .card-calendario-registo-header {
        display: table-cell;
        width: 135px;
    }

    .phone .summary .card-calendario-registo.light .card-calendario-registo-header {
        display: flex;
        width: 100%;
    }

    .summary .card-calendario-registo.light .card-calendario-registo-content {
        display: table-cell;
    }

    .phone .summary .card-calendario-registo.light .card-calendario-registo-content .input-col {
        margin-bottom: 0;
        flex-direction: row;
        justify-content: space-between;
    }

    /****************** SLIDE RANGE ******************/

    .Slider {
        margin-top: 70px !important;
    }

    .SliderRange {
        background: linear-gradient(90deg, rgba(79, 182, 60, 1) 0%, rgba(253, 187, 45, 1) 50%, rgba(253, 45, 45, 1) 100%);
        height: 16px;
    }

    .Slider_currentvalue {
        border: 5px solid #ba5a45;
        border-radius: 50%;
        padding: 20px;
        color: #273136;
        font-size: 35px;
        padding: 0px;
        width: 70px;
        height: 70px;
        margin: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .LabelValues {
        position: relative;
    }

    .Slider_currentvalue {
        top: -70px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }

    .LabelValues > div {
        text-align: center;
    }
    .SliderRange .ui-slider-range {
        background: transparent;
    }

    .SliderRange .ui-slider-handle {
        background: none;
        background-color: #fff;
        border-radius: 30px;
        height: 30px;
        top: -6px;
        width: 30px;
    }

    .SliderRange .ui-slider-handle:before {
        height: 12px;
        left: 9px;
        top: 8px;
    }

    .SliderRange .ui-slider-handle:after {
        height: 12px;
        left: 13px;
        top: 8px;
        width: 2px;
    }

    /****************** MOOD SLIDE RANGE ******************/

    .MoodSlider_currentvalue {
        border: 5px solid #fff;
        box-shadow: 0px 0px 15px lightgrey;
        border-radius: 50%;
        padding: 20px;
        color: #fff;
        font-size: 50px;
        padding: 0px;
        width: 70px;
        height: 70px;
        line-height: 70px;
        margin: 20px 0;
        top: -70px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding-top: 6px;
    }

    .CurrentValue_sad {
        background-color: #ba5a45;
    }

    .CurrentValue_neutral {
        background-color: #fea634;
    }

    .CurrentValue_happy {
        background-color: #9bca94;
    }

    /***************** PAIN MOOD SLIDER ********/

    .pain-slider-icon-div {
        margin-left: 9px;
        margin-top: 2px;
    }

    /***************** MOON SLIDER *************/

    .pie {
        width: 70px;
        height: 70px;
        display: block;
        border-radius: 50%;
        background-color: #fbbb2d;
        border: 2px solid #fbbb2d;
        float: left;
        /*border: 5px solid #FFF;*/
        box-shadow: 0px 0px 15px lightgrey;
        padding: 20px;
        color: #fff;
        font-size: 50px;
        padding: 0px;
        width: 70px;
        height: 70px;
        line-height: 70px;
        margin: 20px 0;
        top: -70px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding-top: 6px;
    }

    .zero {
        background: white;
    }

    .twentyfive {
        background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
    }

    .fifty {
        background-image: linear-gradient(90deg, white 50%, transparent 50%);
    }

    /* Slices greater than 50% require first gradient
 to be transparent -> green */

    .seventyfive {
        background-image: linear-gradient(180deg, transparent 50%, #fbbb2d 50%), linear-gradient(90deg, white 50%, transparent 50%);
    }

    .onehundred {
        background-image: none;
    }

    /***************** REVERSE MOON SLIDER *************/

    .reverse-twentyfive {
        background-image: linear-gradient(-180deg, transparent 50%, #fbbb2d 50%), linear-gradient(-90deg, white 50%, transparent 50%);
    }

    .reverse-fifty {
        background-image: linear-gradient(-90deg, white 50%, #fbbb2d 50%);
    }

    .reverse-seventyfive {
        background-image: linear-gradient(-180deg, transparent 50%, white 50%), linear-gradient(-90deg, white 50%, transparent 50%);
    }

    /*---------------Iframe Phone------------------*/

    .phone-iframe {
        padding: 20px 15px;
    }

    .phone-iframe .MainContent {
        background: #fff;
    }

    .phone-iframe .Buttons {
        display: flex;
        flex-direction: column;
    }
    .phone-iframe .Buttons_Left,
    .phone-iframe .Buttons_Right {
        display: block;
        text-align: center;
        width: 100%;
        vertical-align: unset;
        order: 2;
    }

    .phone-iframe .Buttons_Right {
        margin-bottom: 10px;
        order: 1;
    }

    .phone-iframe .Buttons .Button {
        width: 100%;
    }

    /*---------------Full CAlendar ------------------*/

    .fc-toolbar.fc-header-toolbar {
        text-align: unset;
    }

    .fc-center {
        margin-top: 20px;
    }

    .tablet .fc-left,
    .tablet .fc-right,
    .tablet .fc-button-group,
    .phone .fc-left,
    .phone .fc-right,
    .phone .fc-button-group {
        display: flex;
        float: unset;
        width: 100%;
    }

    .tablet .fc-right,
    .phone .fc-right {
        margin: 10px 0 0;
    }

    .tablet .fc-left .fc-button,
    .tablet .fc-right .fc-button,
    .phone .fc-left .fc-button,
    .phone .fc-right .fc-button {
        min-width: unset;
        display: flex;
    }

    .phone .fc-button {
        padding: 0 10px;
        font-size: 15px;
    }

    /*---------------Sortable WB ------------------*/

    .sortable-wrapper {
        position: relative;
        margin-top: 1px;
        zoom: 1;
        color: black;
        outline: none;
        padding: 0.5em 0.5em 0.5em 0.7em;
        padding-left: 2.2em;
    }

    .sortable-icon {
        cursor: move;
    }

    .sortable-wrapper.blackfont {
        color: #000;
    }

    .sortable-wrapper > .inner {
        padding: 5px 10px;
        border: 1px solid #aaa;
    }

    .sortable-wrapper > .inner:hover {
    }

    .placeHolder {
        background-color: black;
    }

    /*---------------upload area ------------------*/

    .upload-actions {
        margin-bottom: 10px;
        display: flex;
    }

    .phone .upload-actions {
        flex-direction: column;
    }

    .upload-actions input {
        width: 70%;
        margin-right: 20px;
    }

    .phone .upload-actions input {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }

    .upload-actions .fileupload-btn.fileupload-upload-button {
        height: 34px;
        width: 205px;
        font-size: 13px;
    }

    .phone .upload-actions .fileupload-btn.fileupload-upload-button {
        width: 100%;
    }

    .ListRecords.list-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .ListRecords.list-wrap .margin-bottom {
        margin-right: 3%;
        flex-basis: 30%;
    }

    .tablet .ListRecords.list-wrap .margin-bottom {
        margin-right: 3%;
        flex-basis: 47%;
    }

    .phone .ListRecords.list-wrap .margin-bottom {
        margin-right: 0;
        flex-basis: 100%;
    }

    .phone .fileupload-container {
        width: 100%;
    }

    .ListRecords.list-wrap .input-row {
        align-items: flex-start;
    }

    /*---------------Button Container ------------------*/

    .button-container {
        display: flex;
        align-items: center;
    }

    .phone .button-container {
        width: 100%;
        flex-direction: column;
    }

    .button-container.right {
        justify-content: flex-end;
    }

    .button-container .Button:first-child {
        margin-right: 10px;
    }

    .phone .button-container .Button {
        width: 100%;
        margin: 0 0 10px 0 !important;
        order: 1;
    }

    .phone .button-container .Button:first-child {
        order: 2;
    }

    /*---------------Card Underage ------------------*/

    .card-underage {
        display: flex;
    }

    .desktop:not(.small) .card-underage {
        margin-top: 30px;
    }

    .desktop .card-underage {
        margin-bottom: 120px;
    }

    .tablet .card-underage {
        margin: 30px 0 40px;
    }

    .card-underage-container {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70%;
    }

    .desktop.small .card-underage-container {
        width: 80%;
        margin-top: 50px;
    }

    .tablet .card-underage-container {
        width: 90%;
    }

    .phone .card-underage-container {
        width: 100%;
    }

    .card-underage-image {
        height: 210px;
    }

    .tablet .card-underage-image {
        height: 170px;
    }

    .phone .card-underage-image {
        display: none;
    }

    .card-underage-image > img {
        height: 100%;
    }

    .card-underage-text {
        margin-top: 25px;
    }

    .phone .card-underage-text {
        margin-top: 0px;
        padding: 8px 16px;
        border: 1px solid var(--color-grey-1);
        border-radius: 4px;
        background-color: var(--color-grey-10);
    }

    /*---------------Card Safepay ------------------*/

    .card-safepay {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }
    .phone .card-safepay {
        flex-direction: row;
        align-items: flex-start;
        padding: 25px 10px;
    }

    .card-safepay-image {
        height: 150px;
        margin-bottom: 15px;
    }

    .phone .card-safepay-image {
        display: none;
    }

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

    .image-method img {
        margin: 0 auto;
        display: block;
        max-height: 400px;
    }

    .phone .image-method img {
        max-height: 222px;
    }

    .phone .image-method {
        margin-bottom: 30px;
    }

    .card-mb {
        padding: 15px 40px 15px 15px;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        background-color: #f0f5fc;
    }

    .method-payment {
        padding-right: 50px;
    }

    .phone .method-payment {
        padding-right: 0;
    }

    .payment-end {
        margin-top: 30px;
    }

    .payment-end-title {
        margin-bottom: 8px;
    }

    .phone .payment-end-title {
        font-size: 20px;
    }

    .payment-end-subtitle {
        margin-bottom: 25px;
    }
    .phone .payment-end-subtitle {
        margin-bottom: 15px;
    }

    .phone .payment-end {
        margin-top: 0;
    }

    .payment-end .button-container {
        margin-top: 50px;
    }

    .phone .payment-end .button-container {
        margin-top: 20px;
    }
    /*---------------TeleCOnsulta Test ------------------*/

    .teleconsulta-test-action {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .teleconsulta-test-action .input-row:first-child {
        margin-right: 20px;
    }

    .teleconsulta-test-footer {
        margin: 10px 0 30px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .phone .teleconsulta-test-footer {
        flex-direction: column;
    }

    .teleconsulta-test-footer input {
        margin-left: 20px;
    }

    .phone .teleconsulta-test-footer input {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .phone .teleconsulta-test-footer span {
        width: 100%;
    }

    .teleconsulta-test-remove .fa {
        color: #de323b;
    }

    .teleconsulta-test-check .fa {
        color: #73a354;
    }

    .teleconsulta-test-link .fa {
        color: #607d8b;
    }

    /*--------------- TeleConsulta ------------------*/

    .selftest-block {
        padding: 20px;
    }

    .phone .selftest-block {
        padding-top: 0;
    }

    .selftest-block .input-col {
        margin: 25px 0 0;
        align-items: flex-start;
    }

    .phone .selftest-block .input-col {
        margin: 15px 0 0;
    }

    .selftest .audiowrapper {
        height: 100px;
    }

    .selftest .audiowrapper.pid {
        background-color: rgb(230, 231, 232);
        width: calc(8%);
        height: 10px;
        display: inline-block;
        margin: 5px;
        margin-left: 0px;
        margin-right: 1%;
    }

    .selftest .card-center-content {
        min-height: 225px;
        background-color: #f0f5fc;
    }

    .selftest .card-center-content video {
        object-fit: cover;
        height: 50px;
        border-radius: 10px;
    }

    .selftest video {
        max-width: 100px;
        border-radius: 5px;
    }

    .loader {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .loader .question:before {
        content: "?";
        line-height: 48px;
        font-size: 50px;
        color: #607d8b;
    }

    .circle-loader {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-left-color: #949494;
        animation: loader-spin 1.2s infinite linear;
        position: relative;
        display: inline-block;
        vertical-align: top;
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }

    .load-complete {
        -webkit-animation: none;
        animation: none;
        border-color: #949494;
        transition: border 500ms ease-out;
    }

    .checkmark {
        display: none;
    }
    .checkmark.draw:after {
        animation-duration: 800ms;
        animation-timing-function: ease;
        animation-name: checkmark;
        transform: scaleX(-1) rotate(135deg);
    }
    .checkmark:after {
        opacity: 1;
        height: 30px;
        width: 15px;
        transform-origin: left top;
        border-right: 3px solid #5cb85c;
        border-top: 3px solid #5cb85c;
        content: "";
        left: 5px;
        top: 25px;
        position: absolute;
    }

    .cross {
        display: none;
    }
    .cross.draw:after,
    .cross.draw:before {
        animation-duration: 800ms;
        animation-timing-function: ease;
        animation-name: cross;
    }

    .cross:after,
    .cross:before {
        opacity: 1;
        position: absolute;
        left: 60px;
        content: " ";
        height: 50px;
        width: 3px;
        transform-origin: left top;
        background: #5cb85c;
        margin-top: 30px;
        background: #d06079;
    }

    .cross:after {
        transform: rotate(-45deg);
        margin-left: -30px;
        margin-top: 32px;
    }

    .cross:before {
        transform: rotate(45deg);
        margin-left: 3px;
    }

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

    @keyframes checkmark {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }
        20% {
            height: 0;
            width: 50px;
            opacity: 1;
        }
        40% {
            height: 50px;
            width: 50px;
            opacity: 1;
        }
        100% {
            height: 50px;
            width: 50px;
            opacity: 1;
        }
    }

    @keyframes cross {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }
        20% {
            height: 0;
            opacity: 1;
        }
        40% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }

    .pids-wrapper {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pid {
        width: calc(10% - 10px);
        height: 50px;
        display: inline-block;
        margin: 3px;
    }
    .selftest .iconlogo {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        color: rgba(0, 0, 0, 0.3);
    }

    .selftest .iconlogo .fa {
        color: #607d8b;
    }

    .bottom-controls {
        position: absolute;
        bottom: 0px;
        left: 0;
        display: block;
        width: 100%;
        padding: 10px;
    }

    .participant-video-canvas {
        display: flex;
        width: 1000px;
    }

    .participant-video-canvas > div {
        width: 50%;
        flex-shrink: 1;
    }

    /*.participant-video-canvas div {
  margin: 0px 12px;
  position: relative;
  display: inline-block;
  border: 2px solid #df8be6;
}

.participant-video-canvas div span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 5px;
  background-color: #df8be6;
}*/

    .self-video-canvas {
        position: absolute;
        bottom: 70px;
        right: 20px;
        z-index: 5;
        border: 2px solid #28a31a;
    }

    .div#meters > div {
        margin: 0 0 1em 0;
    }

    .div#meters div.label {
        display: inline-block;
        font-weight: 400;
        margin: 0 0.5em 0 0;
        width: 3.5em;
    }

    .div#meters div.value {
        display: inline-block;
    }

    .meter {
        width: 50%;
    }

    .meter#clip {
        color: #db4437;
    }

    .meter#slow {
        color: #f4b400;
    }

    .meter#instant {
        color: #0f9d58;
    }

    /*------------------------------------*\
                  Useful Classes
  \*------------------------------------*/

    /*---Colors---*/

    .color-primary {
        color: #00acc1 !important;
    }

    .color-secondary {
        color: #00838f !important;
    }

    .color-grey-1 {
        color: #cfd8dc !important;
    }

    .color-grey-2 {
        color: #52646c !important;
    }

    .color-grey-3 {
        color: #52646c !important;
    }

    .color-grey-4 {
        color: #37474f !important;
    }

    .color-grey-5 {
        color: #273136 !important;
    }

    .color-alert {
        color: #de323b !important;
    }

    .color-white {
        color: #fff !important;
    }

    .color-appointment-primary {
        color: #ffb300;
    }

    .color-burgundy {
        color: #a43366;
    }

    .border-primary {
        border: 1px solid #cfd8dc;
    }

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

    .display-block {
        display: block;
    }

    /*---Flex---*/

    .display-flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .display-inline-flex {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

    .flex-direction-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .flex-direction-row-reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .flex-direction-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .flex-direction-column-reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .flex-wrap-nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .flex-wrap-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-wrap-wrap-reverse {
        -webkit-flex-wrap: wrap-reverse;
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    .justify-content-flex-start {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .justify-content-flex-end {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .justify-content-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .justify-content-space-between {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .justify-content-space-around {
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .align-items-flex-start {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .align-items-flex-end {
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .align-items-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .align-items-baseline {
        -webkit-box-align: baseline;
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    .align-items-stretch {
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    .align-content-flex-start {
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }

    .align-content-flex-end {
        -webkit-align-content: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end;
    }

    .align-content-center {
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
    }

    .align-content-space-between {
        -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
        align-content: space-between;
    }

    .align-content-space-around {
        -webkit-align-content: space-around;
        -ms-flex-line-pack: distribute;
        align-content: space-around;
    }

    .align-content-strech {
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
    }

    .flex-1 {
        flex-grow: 1;
    }

    /*---------- padding ----------*/

    .padding5 {
        padding: 5px;
    }

    .padding {
        padding: 10px;
    }

    .padding15 {
        padding: 15px;
    }

    .padding20 {
        padding: 20px;
    }

    .padding30 {
        padding: 30px;
    }

    .padding-top5 {
        padding-top: 5px;
    }

    .padding-right5 {
        padding-right: 5px;
    }

    .padding-bottom5 {
        padding-bottom: 5px;
    }

    .padding-left5 {
        padding-left: 5px;
    }

    .padding-top {
        padding-top: 10px;
    }

    .padding-right {
        padding-right: 10px;
    }

    .padding-bottom {
        padding-bottom: 10px;
    }

    .padding-left {
        padding-left: 10px;
    }

    .padding-top15 {
        padding-top: 15px;
    }

    .padding-right15 {
        padding-right: 15px;
    }

    .padding-bottom15 {
        padding-bottom: 15px;
    }

    .padding-left15 {
        padding-left: 15px;
    }

    .padding-top20 {
        padding-top: 20px;
    }

    .padding-right20 {
        padding-right: 20px;
    }

    .padding-bottom20 {
        padding-bottom: 20px;
    }

    .padding-left20 {
        padding-left: 20px;
    }

    .padding-bottom80 {
        padding-bottom: 80px !important;
    }

    .no-padding {
        padding: 0 !important;
    }

    /*---------- margin ----------*/

    .margin-none {
        margin: 0 !important;
    }

    .margin5 {
        margin: 5px !important;
    }

    .margin {
        margin: 10px !important;
    }

    .margin15 {
        margin: 15px !important;
    }

    .margin20 {
        margin: 20px !important;
    }

    .margin-top5 {
        margin-top: 5px !important;
    }

    .margin-right5 {
        margin-right: 5px !important;
    }

    .margin-bottom5 {
        margin-bottom: 5px !important;
    }

    .margin-left5 {
        margin-left: 5px !important;
    }

    .margin-top {
        margin-top: 10px !important;
    }

    .margin-right {
        margin-right: 10px !important;
    }

    .margin-bottom {
        margin-bottom: 10px !important;
    }

    .margin-left {
        margin-left: 10px !important;
    }

    .margin-top15 {
        margin-top: 15px !important;
    }

    .margin-right15 {
        margin-right: 15px !important;
    }

    .margin-bottom15 {
        margin-bottom: 15px !important;
    }

    .margin-left15 {
        margin-left: 15px !important;
    }

    .margin-top20 {
        margin-top: 20px !important;
    }

    .margin-right20 {
        margin-right: 20px !important;
    }

    .margin-bottom20 {
        margin-bottom: 20px !important;
    }

    .margin-left20 {
        margin-left: 20px !important;
    }

    .margin-top30 {
        margin-top: 30px !important;
    }

    .margin-right30 {
        margin-right: 30px !important;
    }

    .margin-bottom30 {
        margin-bottom: 30px !important;
    }

    .margin-left40 {
        margin-left: 40px !important;
    }

    .margin-top40 {
        margin-top: 40px !important;
    }

    .phone .margin-top40-phone {
        margin-top: 40px !important;
    }

    .margin-right40 {
        margin-right: 40px !important;
    }

    .margin-right40-negative {
        margin-right: -40px;
    }

    .margin-bottom40 {
        margin-bottom: 40px !important;
    }

    .margin-left40 {
        margin-left: 40px !important;
    }

    .margin-top50 {
        margin-top: 50px !important;
    }

    .margin-right50 {
        margin-right: 50px !important;
    }

    .margin-bottom50 {
        margin-bottom: 50px !important;
    }

    .margin-left50 {
        margin-left: 50px !important;
    }

    .margin-right60 {
        margin-right: 60px !important;
    }

    .margin-top60 {
        margin-top: 60px !important;
    }

    .margin-top70 {
        margin-top: 70px !important;
    }

    .margin-right70 {
        margin-right: 70px !important;
    }

    .margin-bottom80 {
        margin-bottom: 80px !important;
    }

    .negative-margin {
        margin-top: -50px !important;
    }

    .margin-x-20 {
        margin: 20px 0;
    }

    .ml-auto {
        margin-left: auto !important;
    }

    .mr-auto {
        margin-right: auto !important;
    }

    .margin-top-xl {
        margin-top: 70px;
    }

    .tablet .margin-top-xl {
        margin-top: 50px;
    }

    .phone .margin-top-xl {
        margin-top: 40px;
    }

    .margin-bottom-xl {
        margin-bottom: 70px;
    }

    .tablet .margin-bottom-xl {
        margin-bottom: 50px;
    }

    .phone .margin-bottom-xl {
        margin-bottom: 20px;
    }

    .margin-top-l {
        margin-top: 50px;
    }

    .tablet .margin-top-l {
        margin-top: 30px;
    }

    .phone .margin-top-l {
        margin-top: 20px;
    }

    .margin-top-m {
        margin-top: 30px;
    }

    .tablet .margin-top-m {
        margin-top: 20px;
    }

    .phone .margin-top-m {
        margin-top: 10px;
    }

    .margin-bottom-l {
        margin-bottom: 50px;
    }

    .tablet .margin-bottom-l {
        margin-bottom: 30px;
    }

    .phone .margin-bottom-l {
        margin-bottom: 20px;
    }

    .margin-bottom-m {
        margin-bottom: 30px;
    }

    .tablet .margin-bottom-m {
        margin-bottom: 20px;
    }

    .phone .margin-bottom-m {
        margin-bottom: 10px;
    }

    .PH:empty {
        display: none;
    }

    .FullWidth {
        width: 100%;
    }

    .whitespace-nowrap {
        white-space: nowrap;
    }

    .hide-search .select2-search {
        display: none;
    }

    .modal-custom .calendar-container {
        position: absolute;
        z-index: 5;
    }

    .notification {
        display: inline-block;
        height: 6px;
        width: 6px;
        background-color: #de323b;
        border-radius: 50%;
        margin: 0 0 2px 5px;
    }

    .material-icons.md-14,
    .material-icons.mdi-14px {
        font-size: 14px;
    }

    .md-20 {
        font-size: 20px !important;
    }

    .md-22 {
        font-size: 22px !important;
    }

    .md-64 {
        font-size: 64px !important;
    }

    .line-height {
        line-height: 1;
    }

    .line-height2 {
        line-height: 2;
    }

    div.Feedback_AjaxWait {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #ffffff;
        z-index: 10000;
        zoom: 1;

        background-color: rgba(0, 0, 0, 0.5) !important; /* Overwrite LondonTheme */
        /*background: url("/FullScreenAjaxWait_Truewind/img/ajwait.png") !important;*/ /* Overwrite Theme */
        padding-left: 0px !important; /* Overwrite LondonTheme */
    }

    div.Feedback_AjaxWait > img {
        display: block;
        margin-bottom: 5px;
        width: initial;
        text-align: center;

        animation-name: unset;

        background-image: none !important; /* Overwrite LondonTheme */
        margin-right: unset !important; /* Overwrite LondonTheme */
    }

    /* Loading Block */

    .bottom-message {
        margin-top: 120px;
        color: white;
        z-index: 1000;
        font-size: 20px;
        padding: 0 40px;
    }

    .cube-wrapper {
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -50px;
        margin-left: -50px;
        width: 90px;
        height: 120px;
        text-align: center;
        z-index: 1000;
    }

    .Modal .cube-wrapper {
        width: 120px;
    }

    .cube-background {
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 0;
        background-color: #607d8b;
        opacity: 0.9;
        z-index: 1000;
    }

    .cube-folding {
        width: 80px;
        height: 80px;
        display: inline-block;
        font-size: 0;
    }
    .cube-folding span {
        position: relative;
        width: 40px;
        height: 40px;
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        display: inline-block;
    }
    .cube-folding span::before {
        content: "";
        background-image: url(/PC_TH/img/logols1.png?27317);
        background-size: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 40px;
        height: 40px;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -moz-animation: folding 2.5s infinite linear both;
        -webkit-animation: folding 2.5s infinite linear both;
        animation: folding 2.5s infinite linear both;
    }

    .cube-folding .leaf2 {
        -moz-transform: rotateZ(90deg) scale(1);
        -ms-transform: rotateZ(90deg) scale(1);
        -webkit-transform: rotateZ(90deg) scale(1);
        transform: rotateZ(90deg) scale(1);
    }
    .cube-folding .leaf2::before {
        -moz-animation-delay: 0.3s;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        background-image: url(/PC_TH/img/logols2.png?27317);
        background-size: 100%;
    }

    .cube-folding .leaf3 {
        -moz-transform: rotateZ(270deg) translateX(13px) scale(1);
        -ms-transform: rotateZ(270deg) translateX(13px) scale(1);
        -webkit-transform: rotateZ(270deg) translateX(13px) scale(1);
        transform: rotateZ(270deg) translateX(13px) scale(1);
    }
    .cube-folding .leaf3::before {
        -moz-animation-delay: 0.9s;
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
        background-image: url(/PC_TH/img/logols3.png?27317);
        background-size: 100%;
    }
    .cube-folding .leaf4 {
        -moz-transform: rotateZ(180deg) translateY(13px) scale(1);
        -ms-transform: rotateZ(180deg) translateY(13px) scale(1);
        -webkit-transform: rotateZ(180deg) translateY(13px) scale(1);
        transform: rotateZ(180deg) translateY(13px) scale(1);
    }
    .cube-folding .leaf4::before {
        -moz-animation-delay: 0.6s;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
        background-image: url(/PC_TH/img/logols4.png?27317);
        background-size: 100%;
    }

    @-moz-keyframes folding {
        0%,
        10% {
            -moz-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%,
        75% {
            -moz-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%,
        100% {
            -moz-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }
    @-webkit-keyframes folding {
        0%,
        10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%,
        75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%,
        100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }
    @keyframes folding {
        0%,
        10% {
            -moz-transform: perspective(140px) rotateX(-180deg);
            -ms-transform: perspective(140px) rotateX(-180deg);
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%,
        75% {
            -moz-transform: perspective(140px) rotateX(0deg);
            -ms-transform: perspective(140px) rotateX(0deg);
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%,
        100% {
            -moz-transform: perspective(140px) rotateY(180deg);
            -ms-transform: perspective(140px) rotateY(180deg);
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }

    /* Loading Block */

    .loading-block {
        visibility: hidden;
        opacity: 0;
        z-index: 1000;
        /* transition: visibility .3s, opacity .3s; */
    }

    .show-loading.loading-block {
        visibility: visible;
        opacity: 1;
    }

    .loading-block .cube-background {
        position: fixed;
    }

    .loading-message {
        width: 120px;
        margin-top: 10px;
        font-size: 20px;
        color: #fff;
    }

    .loading-block .cube-wrapper {
        width: 110px;
    }

    /* Expandable Menu */

    .ExpandableMenu i,
    .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
        margin-left: 30px;
    }

    .ExpandableMenu i.material-icons.md-24 {
        font-size: 20px !important;
        vertical-align: middle;
    }

    /*.desktop.small .MenuOpen .ExpandableMenu i, 
.desktop.small .MenuOpen .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a,
*/
    .tablet .Menu .ExpandableMenu i,
    .tablet .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a,
    .desktop.small .Menu .ExpandableMenu i,
    .desktop.small .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
        margin-left: 20px;
    }

    .desktop.small .Menu .ExpandableMenu .Menu_DropDownArrow {
        display: none;
    }

    .ExpandableMenu .Menu_DropDownArrow,
    .MenuOpen .ExpandableMenu .Menu_DropDownArrow,
    .desktop.small .Menu:hover .ExpandableMenu .Menu_DropDownArrow {
        display: -moz-inline-box;
        display: inline-block;
    }

    .ExpandableMenu .Menu_DropDownButton.open .Menu_DropDownArrow {
        -moz-transform: scale(-1, -1);
        -o-transform: scale(-1, -1);
        -webkit-transform: scale(-1, -1);
        transform: scale(-1, -1);
    }

    .Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
        padding: 4px 7px 4px 14px !important;
    }

    .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a,
    .desktop.small .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
        margin-left: 14px;
    }

    .tablet .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
        margin-left: 6px;
    }

    .phone .ExpandableMenu i {
        margin-left: 18px;
    }

    /**********************************************/
    /*TELECONSULTA*/
    .phone .TC_container .self-video-canvas {
        right: 15px;
        bottom: 15px;
    }

    .phone .TC_container {
        max-width: 100%;
        margin-top: 60px;
    }

    .TC_container .participant-video-canvas,
    .TC_container .self-video-canvas {
        background-image: url(/PC_TH/img/TC.png?27317);
        background-position: center;
        background-repeat: no-repeat;
    }

    .TC_container .participant-video-canvas {
        padding: 0px !important;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        display: flex;
        width: 100%;
        overflow: hidden;
        height: 430px;
    }

    .TC_container .participant-video-canvas > div > video {
        object-fit: cover !important;
        width: 100%;
        height: 100%;
    }

    .TC_container.full .FullScreen {
        position: absolute;
        right: -5px !important;
        top: 0;
        zoom: 2;
        padding: 5px !important;
        padding-right: 15px !important;
    }

    .TC_container .FullScreen {
        z-index: 9999 !important;
    }

    .TC_container .participant-video-canvas > div > span {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 5px;
        background-color: #df8be6;
        height: 10px;
        width: 10px;
        z-index: 5px;
        display: none;
    }

    .TC_container .bottom-controls {
        position: absolute;
        bottom: -50px;
        left: 0;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px;
        justify-content: flex-end;
    }

    .phone .TC_container .bottom-controls {
        bottom: auto;
        top: -60px;
        left: auto;
        right: -10px;
    }

    .TC_container .bottom-controls .icon.mdi:before {
        line-height: 1.4;
    }

    .phone .TC_container.full .participant-video-canvas > div:nth-of-type(2) {
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        position: absolute;
        z-index: 5;
        height: 100px;
        width: 150px;
        max-width: 150px;
        overflow: hidden;
        left: 15px;
        top: 55px;
        min-width: 150px;
    }

    .TC_container.full .self-video-canvas {
        width: 350px;
        height: 250px;
        right: 30px;
        bottom: 20px;
    }

    .tablet .TC_container.full .self-video-canvas {
        width: 200px;
        height: 150px;
    }

    .phone .TC_container.full .self-video-canvas {
        bottom: 0;
        height: 100px;
        max-width: 150px;
    }

    .TC_container .participant-video-canvas > div {
        margin: 0px;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
    }

    .TC_container.full .participant-video-canvas > div:nth-of-type(2) {
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        position: absolute;
        bottom: 40px;
        right: 40px;
        z-index: 5;
        height: 150px;
        width: 450px;
        overflow: hidden;
        left: 15px;
        top: 20px;
        min-width: 350px;
        width: 350px;
        height: 250px;
    }

    .tablet .TC_container.full .participant-video-canvas > div:nth-of-type(2) {
        min-width: auto;
        width: 200px;
        height: 150px;
    }

    .phone .TC_container.full {
        height: calc(100vh - 80px);
        top: -10px;
    }

    .phone .TC_container.full .participant-video-canvas > div:nth-of-type(2) video {
        object-position: center;
        object-fit: cover;
    }

    .TC_container .self-video-canvas {
        background-color: #fff;
        background-size: 20%;
        border-radius: 4px;
        border: 1px solid #cfd8dc;
        position: absolute;
        bottom: 40px;
        right: 40px;
        z-index: 5;
        height: 100px;
        width: 150px;
        overflow: hidden;
    }

    .TC_container .self-video-canvas > video {
        object-fit: cover !important;
        width: inherit;
    }

    .TC_container {
        height: 430px;
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .desktop.hd .TC_container,
    .desktop.big .TC_container {
        width: 80%;
    }

    .TC_container.full {
        min-width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0px;
        z-index: 999;
        transition: all 0.15s linear;
    }

    .TC_container.full .participant-video-canvas,
    .TC_container.full .participant-video-canvas > div {
        padding: 0px;
        margin: 0px;
        height: 100vh;
        max-height: auto;
        top: 0;
        position: absolute;
        border-radius: 0;
        border: none;
    }

    .TC_container.full .bottom-controls {
        top: 0px;
        right: 100px;
        left: auto;
        bottom: auto;
    }

    .phone .TC_container.full .bottom-controls {
        top: -3px;
        right: 0;
        left: 6px;
        bottom: auto;
    }

    .TC_container.full a {
        background: white;
        border-radius: 40px;
        border: 2.5px solid #0096a9;
        padding: 2px 10px;
    }

    .phone .TC_container.full a {
        border-width: 1px;
        padding: 0px 4px;
    }

    .phone .TC_container.full a .icon.mdi-24px,
    .phone .TC_container.full a .icon.mdi-24px:before {
        font-size: 20px;
    }

    .TC_container.full a:hover {
        background-color: #0092a6;
        border: 2.5px solid #0092a6;
        color: #fff;
    }

    .desktop .TC_container.full .bottom-controls {
        top: unset;
        right: 410px;
        bottom: 10px;
        left: unset;
        justify-content: space-between;
        width: calc(100vw - 460px);
    }

    .tablet .TC_container.full .bottom-controls {
        top: unset;
        bottom: 10px;
        left: 10px;
        justify-content: space-between;
        width: calc(100vw - 260px);
    }

    .TCContent {
        margin-top: 40px;
        margin-bottom: 80px;
    }

    .desktop .TC_container.full .participant-video-canvas,
    .tablet .TC_container.full .participant-video-canvas,
    .phone .TC_container.full .participant-video-canvas {
        width: 100%;
        max-height: none;
    }

    .TC_container.full .FullScreen {
        position: absolute;
        right: 10px;
        top: 0;
        zoom: 2;
        padding: 5px;
        z-index: 9999;
    }

    .phone .TC_container.full .FullScreen {
        top: 20px;
    }

    .TC_container .FullScreen {
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .mute-btn {
        position: absolute;
        top: 10px;
        left: 0;
    }

    /*************** TC NEW LAYOUT ****************/

    .desktop .TC_container .participant-video-canvas,
    .tablet .TC_container .participant-video-canvas {
        width: calc(100% - 245px);
    }

    .TC_container .self-video-canvas {
        height: 160px;
        width: 240px;
        right: 0;
        bottom: 0;
    }

    .phone .TC_container .self-video-canvas {
        height: 100px;
        width: 150px;
    }

    .desktop .TC_container.full .self-video-canvas:hover .icon-container,
    .desktop .TC_container .self-video-canvas .icon-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        display: none;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 10;
        transition: display 0.3s ease-in-out;
    }

    .desktop .TC_container .self-video-canvas:hover .icon-container {
        display: flex;
    }

    .tablet.portrait .TC_container .self-video-canvas .icon-container,
    .phone .TC_container .self-video-canvas .icon-container {
        display: none !important ;
    }

    .desktop .TC_container .self-video-canvas .icon-container span.fa {
        font-size: 40px;
        color: #00838f;
    }

    .TC_container:not(.full) .self-video-canvas.max-self {
        height: 430px;
    }

    .TC_container .self-video-canvas video {
        height: auto;
        min-height: 160px;
    }

    .TC_container .self-video-canvas.max-self video {
        height: 100%;
    }

    .TC_container .self-video-canvas .self-video-canvas {
        border: none;
    }

    .phone .TC_container .self-video-canvas .self-video-canvas,
    .TC_container.full .self-video-canvas .self-video-canvas {
        right: 0;
        bottom: 0;
    }

    /*************** LAST ADDED ****************/

    /*************** Teleconsulta ***************/

    .tablet a.Button:hover,
    .tablet .Button:hover,
    .phone a.Button:hover,
    .phone .Button:hover {
        background-color: #e2e2e2;
        text-decoration: none;
    }

    .Button.ButtonDefault:hover,
    .Button.Is_Default:hover {
        background-color: #0092a6;
        border: 2.5px solid #0092a6;
        text-decoration: none;
    }

    .selftest .Button.Tertiary.active {
        background-color: #0092a6;
        border: 2.5px solid #0092a6;
        color: #fff;
    }

    .selftest .Button.Secondary.active {
        background-color: #e2e2e2;
        border: 2.5px solid #52646c;
        color: #52646c;
    }

    /***************************** Glicemias *****************************/

    /*************** Card Glicemias ***************/

    .card-glicemias {
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #f0f5fc;
        overflow-x: auto;
    }

    .card-glicemias-header {
        padding: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-glicemias-header-month {
        margin-bottom: 0;
        width: 180px;
        font-weight: 500;
        text-align: center;
    }

    .card-glicemias-measure-header {
        padding: 0 25px 0 78px;
        display: flex;
        align-items: center;
    }

    .card-glicemias-measure-header .col {
        width: 130px;
        padding: 0 2px;
        display: flex;
        justify-content: center;
        text-align: center;
        flex-shrink: 0;
    }

    .card-glicemias .card-glicemias-body {
        min-width: 615px;
    }

    .card-glicemias.is-pregnant .card-glicemias-body {
        min-width: 700px;
    }

    .card-glicemias-measure-list {
        padding-right: 25px;
    }

    .empty-list .card-glicemias-measure-list {
        padding-right: 0;
    }

    .card-glicemias .BlankSlate_custom {
        border: none;
    }
    /***************  Glicemias Day ***************/

    .glicemias-day {
        width: 78px;
        padding: 0 25px;
    }

    .glicemias-day-weekday,
    .glicemias-day-number {
        text-align: center;
    }

    /***************  Glicemias List Item  ***************/

    .glicemias-list-item-day,
    .glicemias-list-item-columns {
        display: flex;
        align-items: center;
    }

    .glicemias-list-item-columns {
        width: 100%;
        align-items: stretch;
        border-bottom: 1px solid #cfd8dc;
    }

    /***************  Glicemias Item  ***************/

    .glicemias-item {
        display: flex;
        align-items: baseline;
    }

    .glicemias-item-value,
    .glicemias-item-value .notes-text {
        font-weight: 400;
        color: #273136;
    }

    .glicemias-item-value {
        position: relative;
        margin-right: 3px;
        font-size: 16px;
    }

    .glicemias-item-value a {
        color: inherit;
    }

    .glicemias-item-label {
        position: relative;
        top: 2px;
        margin-right: 5px;
        height: 16px;
        width: 8px;
        border-radius: 8px;
    }

    .glicemias-item-label.yellow {
        background-color: #f1c40f;
    }

    .glicemias-item-label.red {
        background-color: #ba5a45;
    }

    .glicemias-item-label.green {
        background-color: #b9cf84;
    }

    /***************************** Glicemias New*****************************/

    .block-glicemias {
        overflow: visible;
    }

    .block-glicemias-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 32px;
    }

    .block-glicemias-header-month {
        margin-bottom: 0;
        width: 180px;
        font-weight: 500;
        text-align: center;
    }

    .block-glicemias-header-columns {
        height: 60px;
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #f4f7fc;
    }

    .block-glicemias-col {
        width: 100%;
        min-width: 132px;
        justify-content: center;
        display: flex;
        align-items: center;
        padding: 11px;
        text-align: center;
        color: #52646c;
        font-size: 14px;
        line-height: 20px;
        border-right: 1px solid #e2ebf0;
    }

    .block-glicemias-col:last-child {
        border-right: 0;
    }

    .block-glicemias-body {
        margin-top: 24px;
    }

    .glicemias-list-item {
        margin-bottom: 16px;
        border: 1px solid #cfd8dc;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .glicemias-list-item-header {
        background-color: #f4f7fc;
        color: #52646c;
        font-size: 13px;
        text-transform: uppercase;
        border-radius: 3px 3px 0 0;
        padding: 0 16px;
    }
    .glicemias-list-item-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }

    .glicemias-list-item-col {
        min-height: 59px;
        min-width: 132px;
        padding: 0 16px;
        flex: 1;
        justify-content: center;
        flex-shrink: 0;
        border-right: 1px solid #f0f3f4;
    }

    .glicemias-list-item-col:last-child {
        border-right: 0;
    }

    .glicemias-list-item-col .ListRecords a {
        height: 31px;
        display: block;
        color: #273136;
    }

    .glicemias-value {
        font-size: 13px;
        border-radius: 10px;
        padding: 4px 8px;
    }

    .glicemias-value.yellow {
        background-color: #ffc663;
    }

    .glicemias-value.red {
        background-color: #ff8f7d;
    }

    .glicemias-value.green {
        background-color: #c1c000;
    }

    .glicemia-value-icon:before {
        margin-left: 3px;
    }

    /*---------- GLicemias MIN WIDTH ----------*/

    .block-glicemias-header,
    .block-glicemias-header-columns,
    .block-glicemias-body,
    .glicemias-list-item {
        min-width: auto;
    }

    .seven-columns .block-glicemias-header,
    .seven-columns .block-glicemias-header-columns,
    .seven-columns .block-glicemias-body,
    .seven-columns .glicemias-list-item {
        min-width: 924px;
    }

    .six-columns .block-glicemias-header,
    .six-columns .block-glicemias-header-columns,
    .six-columns .block-glicemias-body,
    .six-columns .glicemias-list-item {
        min-width: 792px;
    }

    @media screen and (max-width: 1200px) {
        .block-glicemias {
            overflow-x: auto;
        }
    }

    .wave-wrapper {
        display: none !important;
    }

    .phone .store-links-login,
    .tablet .store-links-login {
        text-align: center;
    }

    .store-links-login {
        margin-top: 50px;
    }

    .store-links-login img {
        height: 55px;
    }

    .store-links-login a + a {
        margin-left: 20px;
    }

    .TC_container .participant-video-canvas {
        background-image: url("/PC_TH/img/backgroundwaiting.png?27317");
    }

    .TC_container.full .participant-video-canvas {
        background-image: url(/PC_TH/img/TC.png?27317);
    }

    .TC_container.full .participant-video-canvas .disclaimer-container {
        display: none;
    }

    .TC_container .participant-video-canvas .disclaimer-container {
        margin: 45% 20% 0 20%;
        margin-top: 165px;
        border: 0;
    }

    .TC_container .participant-video-canvas .disclaimer-icon,
    .TC_container .participant-video-canvas .disclaimer-text {
        color: #fff;
    }

    .TC_container .participant-video-canvas .pip {
        display: none;
    }

    /*formatação dos documentos legais*/
    .inner-margin-bottom5 div {
        margin-bottom: 10px;
        text-align: justify;
    }

    margin-bottom: 0;
    text-transform: uppercase;
}

.phone .section-expandable-fatura-reference {
    margin-top: 5px;
}

.section-expandable-fatura-info-top {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.section-expandable-fatura-state {
    width: 93px;
    margin-left: auto;
    padding-right: 5%;
    flex-shrink: 0;
    color: #cfd8dc;
    font-size: 15px;
}

.phone .section-expandable-fatura-state {
    margin-bottom: 5px;
}

.section-expandable-fatura-state .icon {
    margin-right: 5px;
}

/*---------------SectionExpandable Fatura & Exame------------------*/

.section-expandable-exame {
    min-height: 109px;
    padding: 15px 25px 0 25px;
    background-color: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}
.tablet .section-expandable-exame {
    padding: 20px 20px 0;
}

.phone .section-expandable-exame {
    min-height: auto;
    margin: 0 -20px;
    padding: 15px 20px 10px;
}

.section-expandable-exame .SectionExpandable_header {
    padding-bottom: 10px;
}

.phone .section-expandable-exame .SectionExpandable_header {
    padding-bottom: 0px;
}

.section-expandable-exame.SectionExpandable .SectionExpandable_content {
    padding: 0;
}

.section-expandable-exame.SectionExpandable.expanded .SectionExpandable_content {
    padding: 10px 0 20px;
}

.section-expandable-exame .SectionExpandable_header {
    margin-bottom: 0;
}

.section-expandable-exame-header {
    width: 100%;
    display: flex;
    align-items: center;
}

.phone .section-expandable-exame-header {
    flex-direction: column;
}

.section-expandable-exame-info {
    padding-right: 5%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tablet .section-expandable-exame-info,
.phone .section-expandable-exame-info {
    padding-right: 0;
}

.section-expandable-exame-type {
    flex-shrink: 0;
    font-weight: 500;
}

.phone .section-expandable-exame-type {
    margin-bottom: 5px;
}

.section-expandable-exame-info-top .section-expandable-fatura-value {
    margin: 0 0 0 auto;
}

.tablet .section-expandable-exame-info-top .section-expandable-fatura-value {
    padding-right: 5%;
}

.section-expandable-exame-location {
    font-size: 15px;
}

.section-expandable-exame-location i.icon {
    font-size: 17px;
}

.section-expandable-fatura-reference {
    margin-bottom: 0;
    text-transform: uppercase;
}

.phone .section-expandable-fatura-reference {
    margin-top: 5px;
}

.section-expandable-exame-info-top {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.phone .section-expandable-exame-info-top {
    margin-bottom: 3px;
}

.section-expandable-exame-action {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-right: 20px;
}

.phone .section-expandable-exame-action {
    flex-direction: column;
    padding: 0 10px 10px;
    margin-right: 10px;
}

.phone .section-expandable-exame-action .Button {
    margin: 10px 0 0 0;
}
.section-expandable-exame-date {
    white-space: nowrap;
}

.section-expandable-exame-state {
    margin-left: 15px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #607d8b;
    font-size: 14px;
    padding: 2px 10px;
    line-height: 1.1;
    border-radius: 3px;
}

.section-expandable-exame-state.read {
    background-color: #fcedc9;
}

.section-expandable-exame-state.shared {
    background-color: #d1f1f5;
}

.section-expandable-exame-state .icon {
    margin-right: 5px;
}

.section-expandable-exame.SectionExpandable.expanded .SectionExpandable__icon {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.section-expandable-exame.SectionExpandable.expanded .SectionExpandable__icon .fa {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.section-expandable-exame.SectionExpandable .SectionExpandable__icon.Heading2 {
    width: 39px;
    color: #00838f;
}

.phone .section-expandable-exame.SectionExpandable .SectionExpandable__icon.Heading2 {
    width: auto;
}

.section-expandable-exame .SectionExpandable__icon.Heading2 .icon-container {
    display: flex;
    align-items: center;

    color: #00838f;
}

.phone .section-expandable-exame .SectionExpandable__icon.Heading2 .icon-container {
    display: inline-block;
}
.phone .section-expandable-exame .SectionExpandable__icon.Heading2 .icon-container .rich-text {
    display: none;
}

/*---------------Card Inner Fatura & Exame------------------*/

.card-inner-fatura {
    padding: 15px 25px;
    background-color: #f4f7fc;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

.phone .card-inner-fatura {
    padding: 15px 20px;
}

.card-inner-fatura-content {
    display: flex;
    justify-content: space-between;
}

.card-inner-fatura-content {
    margin-bottom: 5px;
}

.tablet .card-inner-fatura-content,
.phone .card-inner-fatura-content {
    display: block;
}

.card-inner-fatura-content > div:not(:last-child) {
    margin-right: 10px;
}

.tablet .card-inner-fatura-content > div:not(:last-child),
.phone .card-inner-fatura-content > div:not(:last-child) {
    margin-right: 0px;
}

.card-inner-fatura-code,
.card-inner-fatura-date,
.card-inner-fatura-description,
.card-inner-fatura-quantity,
.card-inner-fatura-value {
    color: #52646c;
}

.card-inner-fatura-code {
    flex-basis: 20%;
}

.card-inner-fatura-value {
    flex-basis: 10%;
}

.tablet .card-inner-fatura-code,
.tablet .card-inner-fatura-value,
.phone .card-inner-fatura-code,
.phone .card-inner-fatura-value {
    width: 40%;
    display: inline-block;
}

.card-inner-fatura-date,
.card-inner-fatura-quantity {
    flex-basis: 15%;
}

.tablet .card-inner-fatura-date,
.tablet .card-inner-fatura-quantity,
.phone .card-inner-fatura-date,
.phone .card-inner-fatura-quantity {
    width: 60%;
    display: inline-block;
}

.card-inner-fatura-description {
    flex-basis: 35%;
}

.tablet .card-inner-fatura-description,
.phone .card-inner-fatura-description {
    width: 100%;
}

.card-inner-exame-exame {
    flex-basis: 40%;
}

.card-inner-exame-act {
    flex-basis: 30%;
}

/*---------------Card Inner Exame NEW------------------*/

.card-inner-exame {
    padding: 15px 25px;
    background-color: #f4f7fc;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    display: flex;
    justify-content: space-between;
}

.card-inner-exame.no-results {
    align-items: center;
}

.phone .card-inner-exame {
    padding: 15px 20px;
    flex-direction: column;
}

.card-inner-exame-content {
    display: flex;
    width: 100%;
}

.phone .card-inner-exame-content {
    flex-direction: column;
}

.card-inner-exame-list {
    width: 100%;
}

.card-inner-exame-list.images-list {
    margin-right: auto;
}

.phone .card-inner-exame-list.images-list {
    margin-bottom: 10px;
}

.card-inner-exame-list.images-list.no-images {
    display: none;
}

.card-inner-exame-list.share-list {
    width: 40%;
}

.phone .card-inner-exame-list.share-list {
    width: 100%;
}

.card-inner-exame-list.images-list .input-row-left {
    color: #00838f;
}

.card-inner-exame-action {
    position: relative;
    flex-basis: 30%;
    padding: 6px 0 6px 20px;
    margin-left: 20px;
    text-align: right;
}

.phone .card-inner-exame-action {
    margin: 20px 0 0;
    padding: 0;
    flex-basis: 100%;
    text-align: center;
}

.card-inner-exame-action:before {
    content: "";
    height: 52px;
    width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #cfd8dc;
}

.phone .card-inner-exame-action:before {
    content: none;
}

.phone .card-inner-exame-action input {
    width: 100%;
}

.card-inner-exame-content > div:not(:last-child) {
    margin-right: 10px;
}

.card-inner-exame .card-inner-exame-content .input-row-right {
    line-height: 2;
}

.card-inner-exame-list.images-list .input-row-right {
    line-height: 1.5;
}
/*---------------Table Exame Share------------------*/

.TableRecords.exame-share {
    border-color: #cfd8dc;
}

.phone .TableRecords.exame-share {
    border: none;
}

.TableRecords.exame-share .TableRecords_Header,
.TableRecords.exame-share .TableRecords_OddLine,
.TableRecords.exame-share .TableRecords_EvenLine {
    border-bottom: 0;
}

.desktop .TableRecords.exame-share .TableRecords_OddLine,
.desktop .TableRecords.exame-share .TableRecords_EvenLine {
    border-top: 1px solid #cfd8dc;
}

.phone .TableRecords.exame-share .TableRecords_OddLine,
.phone .TableRecords.exame-share .TableRecords_EvenLine {
    padding: 5px 15px 0 !important;
}

.phone .TableRecords.exame-share thead {
    display: none;
}

.phone .TableRecords.exame-share tbody tr {
    margin-bottom: 15px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    position: relative;
}

.phone .TableRecords.exame-share tbody tr .text-right {
    position: absolute;
    top: 5px;
    right: 0px;
    display: flex;
    align-items: center;
    align-self: flex-end;
}

.desktop .TableRecords.exame-share .responsive-label,
.tablet .TableRecords.exame-share .responsive-label {
    display: none;
}

.phone .TableRecords.exame-share .responsive-label {
    display: block;
}
.phone .TableRecords.exame-share .text-right .responsive-label {
    color: #00838f;
}

/*---------------Card Inner Prescription------------------*/

.card-inner-prescription {
    padding: 15px 25px;
    background-color: #f4f7fc;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    display: flex;
    flex-direction: column;
}

.card-inner-prescription-top {
    margin-bottom: 15px;
}

.card-inner-prescription .Medium {
    display: block;
}

.card-inner-prescription .input-col {
    margin-top: 10px;
}

.card-inner-prescription .input-col > div {
    line-height: 1;
}
/*---------------Small Medium Left Columns------------------*/

.SmallMediumLeftColumns > .Column.ColFirst {
    width: 42%;
    padding-right: 10px;
    padding-left: 0px;
}

.SmallMediumLeftColumns > .Column.ColLast {
    width: 58%;
    padding-left: 10px;
    padding-right: 0px;
}

.tablet .SmallMediumLeftColumns.tab_BreakAll > .Column.ColFirst,
.tablet .SmallMediumLeftColumns.tab_BreakAll > .Column.ColLast,
.phone .SmallMediumLeftColumns.mob_BreakAll > .Column.ColFirst,
.phone .SmallMediumLeftColumns.mob_BreakAll > .Column.ColLast {
    width: 100%;
    padding: 0;
}

.tablet .SmallMediumLeftColumns.tab_BreakAll > .Column.ColLast,
.phone .SmallMediumLeftColumns.mob_BreakAll > .Column.ColLast {
    margin-top: 10px;
}

/*---------------Card Contact------------------*/

.card-contact {
    margin: 10px auto 0;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, #80deeb 0%, #00acc1 100%);
}

.card-contact span,
.card-contact div {
    margin-bottom: 0;
    color: #fff;
}

.card-content-left {
    width: 50%;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #fff;
}

.card-content-left .Heading4 {
    color: #fff;
}

.card-content-right {
    margin-left: auto;
}

.card-content-right a {
    font-weight: 400;
    text-decoration: underline;
    color: #fff;
}

.card-contact .row-icon-label:first-child {
    margin-bottom: 10px;
}

.card-contact-small {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    margin: 0 auto;
    padding: 20px 20px 10px;

    width: 350px;
    color: #fff;
    background: linear-gradient(270deg, #80deeb 0%, #00acc1 100%);
}

.card-contact-small .card-content-left {
    position: relative;
    border: none;
    width: auto;
}

.card-contact-small .card-content-left:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    border-bottom: 1px solid #fff;
}

.card-contact-small .card-content-right {
    margin: 0;
    padding-top: 15px;
}

/*-Responsive-*/

.tablet .card-contact,
.phone .card-contact {
    max-width: 360px;
    padding-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
}

.tablet .card-contact .card-content-left,
.phone .card-contact .card-content-left {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    border-right: none;
}

.tablet .card-contact .card-content-left:before,
.phone .card-contact .card-content-left:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    border-bottom: 1px solid #fff;
}

.tablet .card-contact .card-content-right,
.phone .card-contact .card-content-right {
    margin-left: 0;
    padding-top: 20px;
}

.tablet .card-contact .row-icon-label:first-child,
.phone .card-contact .row-icon-label:first-child {
    margin-bottom: 0;
}

/*---------------Card Appointment------------------*/

.card-appointment {
    position: relative;
    height: 93px;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: flex;
    border-radius: 7px;
    border: 4px solid transparent;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.1);
    transition: border-color 0.3s;
}

.phone .card-appointment {
    min-height: 93px;
    height: auto;
}

.card-appointment .card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-appointment .card-left a {
    color: #979797;
    line-height: 10px;
}

.card-appointment .card-left a i:before {
    font-size: 16px;
}

.card-appointment .card-right {
    width: 100%;
    padding: 0 35px 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #52646c;
}

.card-appointment-image {
    height: 50px;
    width: 50px;
    margin-bottom: 2px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.phone .card-appointment-image {
    height: 44px;
    width: 44px;
}

.card-appointment-info {
    height: 50px;
    width: 50px;
    flex-shrink: 0;
}

.card-appointment-time {
    font-size: 19px;
    font-weight: 700;
    line-height: 21px;
}

.card-appointment-name {
    font-size: 16px;
    font-weight: 500;
    color: #52646c;
    line-height: 21px;
}

.card-appointment.is-selected {
    border-color: #00acc1;
}

.card-appointment.is-selected > .icon {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
}

.card-appointment.is-selected:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 40px solid #00acc1;
    border-left: 40px solid transparent;
}

.card-appointment.is-selected:right {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-top: 40px solid #00acc1;
    border-left: 40px solid transparent;
}

/*---------------Card Resume------------------*/

.card-resume {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

.card-resume:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 77px solid #00acc1;
    border-top-right-radius: 2px;
    border-left: 77px solid #f4f7fc;
    z-index: 2;
}

.card-resume-header {
    position: relative;
    padding: 20px 80px 15px 20px;
    color: #52646c;
    background-color: #f4f7fc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.card-resume-header .corner-icon,
.card-resume-notification .corner-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    z-index: 2;
}

.card-resume-header > a {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.card-resume-content-block {
    position: relative;
    padding: 8px 20px;
    border-top: 1px solid #cfd8dc;
}

.agenda-detail .card-resume-content-block {
    border: none;
    padding: 0;
    margin-bottom: 24px;
}

.card-resume-content-actions a {
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.card-resume-date,
.card-resume-time {
    font-size: 20px;
    font-weight: 700;
    color: #37474f;
}

.card-resume-time {
    margin-left: auto;
    font-size: 32px;
}

.card-resume-image {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    flex-shrink: 0;
    background-image: url("/PC_TH/img/medic.png?27317");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.card-resume .rich-text {
    line-height: 22px;
}

.ListRecords .card-resume-appointment {
    display: inline-block;
    width: 48%;
    margin-bottom: 20px;
}

.ListRecords .card-resume-appointment:nth-child(odd) {
    margin-right: 4%;
}

.tablet .ListRecords .card-resume-appointment {
    display: block;
    width: auto;
    max-width: 440px;
    margin-right: 0;
    margin-bottom: 20px;
}

.phone .ListRecords .card-resume-appointment {
    display: block;
    width: auto;
    margin-right: 0;
    margin-bottom: 10px;
}

/*---------------Card Resume Agenda------------------*/

.card-resume.card-resume-agenda {
    min-height: 135px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.phone .card-resume.card-resume-agenda {
    padding: 15px;
    margin-bottom: 6px;
}

.tablet .card-resume.card-resume-agenda,
.phone .card-resume.card-resume-agenda {
    flex-direction: column;
}

.card-resume.card-resume-agenda:before {
    border-left: 77px solid #fff;
}

.phone .card-resume.card-resume-agenda:before {
    border-left: 44px solid #fff;
    border-top-width: 44px;
}

.card-resume-agenda .card-resume-header {
    width: 80%;
    padding: 0;
    padding-right: 50px;
    background-color: #fff;
    border-right: 1px solid #cfd8dc;
}

.tablet .card-resume-agenda .card-resume-header,
.phone .card-resume-agenda .card-resume-header {
    width: 100%;
    margin-bottom: 10px;
    background-color: transparent;
    border-right: none;
    z-index: 2;
}

.phone .card-resume-agenda .card-resume-header {
    padding: 0;
}

.card-resume-person,
.card-resume-schedule-info {
    margin-bottom: 5px;
}

.card-resume-agenda .card-resume-date {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
    color: #37474f;
}

.card-resume-agenda .card-resume-time {
    font-size: 38px;
    font-weight: 500;
}

.phone .card-resume-agenda .card-resume-time {
    margin-right: 25px;
    font-size: 19px;
}

.card-resume-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tablet .card-resume-info,
.phone .card-resume-info {
    flex-direction: column;
    align-items: flex-start;
}

.card-resume-doctor-info {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.tablet .card-resume-doctor-info,
.phone .card-resume-doctor-info {
    margin-left: 0;
}

.card-resume.card-resume-agenda .card-resume-name {
    margin-right: 10px;
    margin-bottom: 5px;
    font-weight: 500;
    color: #37474f;
    line-height: 30px;
}

.card-resume-agenda .card-resume-local {
    margin: 0 0 0 8px;
    line-height: 25px;
}

.card-resume-agenda .corner-icon {
    position: absolute;
    font-size: 22px;
    right: 10px;
    top: 10px;
    z-index: 2;
    color: #fff;
}

.phone .card-resume-agenda .corner-icon,
.phone .card-resume-notification .corner-icon {
    position: absolute;
    font-size: 17px;
    right: 4px;
    top: 2px;
    z-index: 2;
    color: #fff;
}

.phone .card-resume-agenda .corner-icon:before,
.phone .card-resume-notification .corner-icon:before {
    font-size: 17px;
}

.card-resume.card-resume-agenda.is-exam:before {
    border-top: 77px solid #00838f;
}

.phone .card-resume.card-resume-agenda.is-exam:before {
    border-top-width: 44px;
}

.card-resume-action {
    width: 30%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;

    text-align: center;
}

.tablet .card-resume-action,
.phone .card-resume-action,
.phone .card-resume-action div {
    width: 100%;
    padding-left: 0;
}

.card-resume-action .Button {
    z-index: 2;
}

.phone .card-resume-action .Button {
    width: 100%;
}

/*---------------Card Resume Agenda TELECONSULTA------------------*/

.card-resume.card-resume-agenda.is-teleconsulta:before {
    border-top: 77px solid #00838f;
}

.phone .card-resume.card-resume-agenda.is-teleconsulta:before {
    border-top-width: 44px;
}

.card-resume-agenda.is-teleconsulta .card-resume-action {
    flex-direction: column;
}

.teleconsulta-message {
    padding: 0 40px;
    margin-top: 10px;
    font-size: 12px;
    color: #52646c;
    line-height: 1.5;
    text-align: left;
}

.teleconsulta-message:empty {
    display: none;
}

/*---------------Card Resume Agenda Is-Pendent------------------*/

.card-resume.card-resume-agenda.is-pendent:before {
    border-top: 77px solid #cfd8dc;
}

.phone .card-resume.card-resume-agenda.is-pendent:before {
    border-top-width: 44px;
}

.card-resume.card-resume-agenda.is-pendent {
    border: 2px dashed #cfd8dc;
}

/*---------------Card Resume Notification------------------*/

.card-resume.card-resume-notification {
    padding: 25px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.tablet .card-resume.card-resume-notification,
.phone .card-resume.card-resume-notification {
    flex-direction: column;
}

.phone .card-resume.card-resume-notification {
    padding: 15px;
}

.card-resume.card-resume-notification::before {
    border-top-color: #ffb300;
    border-left-color: #fff;
}

.phone .card-resume.card-resume-notification::before {
    border-top-width: 44px;
    border-left-width: 44px;
    border-left-color: #fff;
}

.card-resume-notification-date,
.card-resume-notification-title {
    margin-bottom: 5px;
}

.card-resume-notification-left {
    width: 80%;
    padding-right: 30px;
}

.tablet .card-resume-notification-left,
.phone .card-resume-notification-left {
    width: 100%;
}

.card-resume-notification .card-resume-action {
    padding: 20px 0;
    border-left: 1px solid #cfd8dc;
}

.tablet .card-resume-notification .card-resume-action {
    padding-bottom: 0;
    border: none;
}

.phone .card-resume-notification .card-resume-action {
    padding: 15px 0 0;
    border-left: none;
}

/*---------------Card Bullet Content------------------*/

.card-bullet-content {
    margin-bottom: 20px;
    display: flex;
}

.card-bullet-content .bullet-number {
    height: 35px;
    width: 35px;
    margin-right: 25px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    background-color: #52646c;
    color: #fff;
}

/*---------------Card Simple Custom------------------*/

.Card.card-simple-custom {
    margin-top: 20px;
    padding: 20px 25px;
    height: 610px;
    background-color: #f4f7fc;
    border: 1px solid #cfd8dc;
}

.tablet .Card.card-simple-custom {
    max-width: 500px;
    margin-top: 20px;
    padding: 20px 25px;
    height: 610px;
    background-color: #f4f7fc;
    border: 1px solid #cfd8dc;
}

.phone .Card.card-simple-custom {
    width: auto;
    margin: 20px -20px;
    padding: 20px;
}

.Card.card-simple-custom .ButtonGroup_button.Button {
    min-width: 0;
    padding: 0;
    margin-bottom: 10px;
}

.Card.card-simple-custom-title {
    font-weight: 400;
}

/*---------------Card Doctor------------------*/

.card-doctor {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.card-doctor-header {
    padding: 20px 15px;
    display: flex;
    align-items: center;
    background-color: #f4f7fc;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #cfd8dc;
}

.phone .card-doctor-header {
    flex-direction: column;
    justify-content: center;
}

.card-doctor-header .favorite-container {
    position: absolute;
    top: -6px;
    left: -2px;
    height: 20px;
    width: 20px;
}

.card-doctor-header .favorite-container img {
    height: 100%;
    width: 100%;
}

.card-doctor-image {
    position: relative;
    height: 50px;
    width: 50px;
    margin: 0 10px 0 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.phone .card-doctor-image {
    height: 44px;
    width: 44px;
}

.card-doctor-name {
    font-size: 16px;
    font-weight: 400;
    color: #273136;
}

.phone .card-doctor-info {
    margin: 10px 0 15px;
    text-align: center;
}

.card-doctor-content {
    padding: 20px 15px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
}

.card-doctor-actions {
    margin-left: auto;
    display: flex;
}

.tablet .card-doctor-actions,
.phone .card-doctor-actions {
    margin-left: auto;
    flex-direction: column;
}

.phone .card-doctor-actions {
    width: 100%;
    margin-left: 0;
}

.tablet .card-doctor-actions .Button:first-child,
.phone .card-doctor-actions .Button:first-child {
    margin-bottom: 10px;
}

.desktop .card-doctor-actions .Button:first-child {
    margin-right: 20px;
}

.tablet .card-doctor-content .Button {
    margin-top: 10px;
}

/*---------------Detail Doctor------------------*/

.detail-doctor {
    margin: 45px 0;
}

.tablet .detail-doctor {
    margin: 25px 0;
}

.phone .detail-doctor {
    margin: 20px 0;
}

.detail-doctor-header {
    padding-bottom: 30px;
    display: flex;
    align-items: flex-start;
}

.tablet .detail-doctor-header,
.phone .detail-doctor-header {
    flex-direction: column;
    align-items: center;
}

.phone .detail-doctor-header {
    padding-bottom: 0;
}

.detail-doctor-header .favorite-container {
    position: absolute;
    top: 4px;
    left: 4px;
    height: 30px;
    width: 30px;
}

.detail-doctor-header .favorite-container img {
    height: 100%;
    width: 100%;
}

.phone .detail-doctor-header .favorite-container {
    position: absolute;
    top: 2px;
    left: 1px;
}

.detail-doctor-image {
    position: relative;
    height: 130px;
    width: 130px;
    margin: 0 20px 0 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.tablet .detail-doctor-image,
.phone .detail-doctor-image {
    margin: 0 0 20px;
}

.phone .detail-doctor-image {
    height: 95px;
    width: 95px;
}

.detail-doctor-name {
    font-weight: 400;
}

.tablet .detail-doctor-name,
.phone .detail-doctor-name {
    margin: 0;
}

.detail-doctor-position {
    margin-bottom: 35px;
}

.tablet .detail-doctor-position,
.phone .detail-doctor-position {
    margin-bottom: 10px;
}

.tablet .detail-doctor-info,
.phone .detail-doctor-info {
    text-align: center;
}

.tablet .detail-doctor-text {
    margin: 10px 0 20px;
}

.detail-doctor-action {
    margin-top: 30px;
    margin-right: 20px;
    display: flex;
    flex-shrink: 0;
}

.tablet .detail-doctor-action {
    margin-top: 20px;
}

.phone .detail-doctor-action {
    margin-top: 20px;
    margin-right: 0;
}

.detail-doctor-action .Button:first-child {
    margin-left: 10px;
}

.phone .detail-doctor-action .Button:first-child {
    margin-bottom: 10px;
    margin-left: 0;
}

.phone .detail-doctor-action .Button {
    width: 100%;
}

.detail-doctor-content {
    padding-top: 30px;
}

.phone .detail-doctor-content {
    padding-top: 20px;
}

/*---------------Card Unity------------------*/

.card-unity {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.card-unity-image {
    height: 210px;
    width: 100%;
    flex-shrink: 0;
    background-image: url("/PC_TH/img/unidadesdefaultlist.jpg?27317");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.phone .card-unity-image {
    height: 180px;
}

.card-unity-name {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 400;
}

.card-unity-content {
    min-height: 190px;
    margin-top: auto;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
}

.tablet .card-unity-content {
    min-height: 240px;
}

.card-unity-location {
    display: flex;
}

.desktop.small .card-unity-location {
    height: 70px;
}

.phone .card-unity-content {
    min-height: 170px;
}

.card-unity-action {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
}

.ie .card-unity-action {
    margin-top: 10px;
}

.tablet .card-unity-action,
.phone .card-unity-action {
    flex-direction: column;
    align-items: center;
}

.card-unity-action .Button {
    margin-right: 20px;
}

.tablet .card-unity-action .Button,
.phone .card-unity-action .Button {
    width: 100%;
    margin-right: 0px;
    margin-top: 10px;
    flex-shrink: 0;
}

/*---------------Card Message------------------*/

.card-message {
    margin-bottom: 30px;
    padding: 10px 20px;
    display: flex;
    background-color: #cce5ff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.card-message.padding-large {
    padding: 20px;
}

.card-message .notes-text {
    line-height: inherit;
}

.card-message-icon {
    margin-right: 15px;
    line-height: 1;
    color: #52646c;
}

.phone .card-message {
    margin-bottom: 20px;
}

.phone .card-message.padding-large {
    flex-direction: column;
}

.phone .card-message.padding-large .card-message-icon img {
    width: 62px;
}

.phone .card-message.padding-large .notes-text {
    margin-top: 15px;
    text-align: center;
}

/*---------------Card Specialty------------------*/

.card-specialty {
    min-height: 200px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    background-color: #f4f7fc;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

.card-specialty .card-specialty-content {
    padding-right: 20%;
}

.card-specialty .card-specialty-description {
    margin-bottom: 20px;
}

.card-specialty .card-specialty-actions {
    margin-top: auto;
    display: flex;
}

.tablet .card-specialty .card-specialty-actions,
.phone .card-specialty .card-specialty-actions {
    flex-direction: column;
}

.card-specialty-actions-left {
    display: flex;
}

.tablet .card-specialty .card-specialty-actions-left {
    margin-bottom: -10px;
}

.tablet .card-specialty .card-specialty-actions-left,
.phone .card-specialty .card-specialty-actions-left {
    flex-direction: column;
}

.card-specialty .card-specialty-actions-left .Button {
    margin-right: 20px;
}
.tablet .card-specialty .card-specialty-actions-left .Button {
    margin-right: 10px;
    margin-bottom: 10px;
}

.phone .card-specialty .card-specialty-actions-left .Button {
    margin-right: 0;
    margin-bottom: 10px;
}

.card-specialty .card-specialty-actions-right {
    margin-left: auto;
}

.tablet .card-specialty .card-specialty-actions-right {
    margin-top: 10px;
    margin-left: 0;
}

.phone .card-specialty .card-specialty-actions-right {
    margin: 0;
}

.tablet .card-specialty .Button,
.phone .card-specialty .Button {
    width: 100%;
}

/*---------------Card Contacto Unidade------------------*/

.card-contact-unity {
    position: relative;
    margin: 0 0 30px 20%;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

.card-contact-unity .input-row {
    margin-bottom: 15px;
}

.card-contact-unity .input-row:last-child {
    margin-bottom: 0;
    word-break: break-all;
}

.card-contact-unity .input-row:last-child .input-row-right {
    word-break: break-all;
}

.tablet .card-contact-unity {
    margin-left: 10px;
    padding: 15px;
}

.phone .card-contact-unity {
    margin-left: 0;
    padding: 15px;
}

.card-contact-unity .icon.material-icons {
    font-size: 16px;
    color: #00acc1;
}

.card-contact-unity:after {
    content: "";
    position: absolute;
    background: transparent;
    height: 35px;
    width: 35px;
    right: 0;
    bottom: 0;
    border-right: 15px solid #00acc1;
    border-bottom: 15px solid #00acc1;
    border-bottom-right-radius: 3px;
    opacity: 0.1;
}

/*---------------Card News------------------*/

.card-news {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}
.desktop.hd .GalleryItem .card-news {
    height: 405px;
}

@media (max-width: 2100px) and (min-width: 1920px) {
    .desktop.hd .GalleryItem .card-news {
        height: 345px;
    }
}

.desktop.big .GalleryItem .card-news,
.tablet .GalleryItem .card-news {
    height: 330px;
}

.desktop .GalleryItem .card-news {
    height: 300px;
}

.card-news-image {
    height: auto;
    width: 100%;
    flex-shrink: 0;
}

.card-news-image img {
    width: 100%;
    height: 100%;
}

.card-news-content {
    padding: 20px 15px 0px;
}

.card-news-title {
    margin-bottom: 5px;
    font-weight: 500;
    line-height: 20px;
    color: #273136;
}

.card-news-date {
    margin-bottom: 5px;
    color: #52646c;
    line-height: 19px;
}

.card-news-preview {
    margin-bottom: 10px;
    line-height: 21px;
}

.card-news-action {
    margin-top: auto;
    padding: 10px 15px 10px;
}

.card-news-action a {
    font-weight: 400;
    text-decoration: underline;
}

/*---------------Card News Detail------------------*/

.card-news-detail {
    height: auto;
    width: 100%;
}

.card-news-detail img {
    width: 100%;
    
}

/*---------------Card Agregado------------------*/

.card-agregado {
    padding: 30px;
    display: flex;
    align-items: center;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #f4f7fc;
}

.tablet .card-agregado,
.phone .card-agregado {
    flex-direction: column;
    align-items: flex-start;
}

.phone .card-agregado {
    padding: 20px;
}

.List .card-agregado {
    margin-bottom: 20px;
}

.card-agregado-left {
    width: 40%;
    display: flex;
    align-items: center;
    border-right: 1px solid #cfd8dc;
}

.tablet .card-agregado-left,
.phone .card-agregado-left {
    width: 100%;
    padding-right: 0;
    padding-bottom: 20px;
    align-items: flex-start;
    border-right: none;
    border-bottom: 1px solid #cfd8dc;
}

.tablet .card-agregado-left {
    align-items: center;
}

.phone .card-agregado-left {
    padding-bottom: 15px;
}

.card-agregado-image {
    height: 60px;
    width: 60px;
    margin-right: 15px;
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("/PC_TH/img/default_user.png?27317");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-agregado-name {
    margin-right: auto;
    padding-right: 10px;
}

.phone .card-agregado-image {
    height: 40px;
    width: 40px;
}

.card-agregado-right {
    width: 60%;
    padding-left: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tablet .card-agregado-right,
.phone .card-agregado-right {
    width: 100%;
    padding-top: 20px;
    padding-left: 0;
}

.phone .card-agregado-right {
    padding-top: 15px;
}

.card-agregado-col {
    padding: 0 10px;
    flex: 2;
}

.desktop .card-agregado-right .card-agregado-col:last-child {
    flex: 1;
    text-align: center;
}

.phone .card-agregado-type .input-col,
.phone .card-agregado-validation .input-col {
    font-size: 13px;
}

.phone .card-agregado-remove i.icon,
.phone .card-agregado-remove i.icon::before {
    font-size: 20px;
}

.card-agregado .input-col {
    padding: 0 5px;
}

.card-agregado .input-col,
.card-agregado .lead-normal {
    margin: 0 !important;
}

.card-agregado-actions {
    padding-left: 80px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.tablet .card-agregado-actions {
    margin-top: 20px;
}

.phone .card-agregado-actions {
    margin-top: 15px;
}

.card-agregado-actions .Button:not(:first-child) {
    margin-left: 20px;
}

.phone .card-agregado-actions .Button:not(:first-child) {
    margin-left: 0px;
    margin-top: 10px;
}

.phone .card-agregado-actions {
    padding-left: 0;
    flex-direction: column;
}

.phone .card-agregado-actions,
.phone .card-agregado-actions .Button {
    width: 100%;
}

.card-agregado-actions:empty {
    display: none;
}

/*---------------Card Invitation------------------*/

.card-invitation {
    flex-direction: column;
    align-items: flex-start;
}

.card-invitation .card-agregado-left {
    width: 100%;
    padding-right: 0;
    align-items: flex-start;
    border-right: none;
}

.phone .card-invitation .rich-text {
    font-size: 13px;
}

/*---------------List Item Doctor------------------*/

.list-item-doctor {
    position: relative;
    padding: 15px 25px 15px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cfd8dc;
}

.list-item-doctor-image {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    flex-shrink: 0;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.list-item-doctor-icon {
    position: absolute;
    right: 5px;
    top: 18px;
    color: #52646c;
}

/*---------------Image Full Width------------------*/

.image-full-width {
    height: 280px;
    width: 100%;
    background-image: url("/PC_TH/img/detalheunidadedefault.jpg?27317");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.phone .image-full-width {
    height: 125px;
}

.image-full-width.is-news {
    background-image: url("/PC_TH/img/detalhenoticiadefault.png?27317");
}

.phone .image-full-width.is-news {
    height: 135px;
}
/*---------------List Item Wait------------------*/

.list-item-wait {
    width: 48%;
    padding: 20px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: #00838f;
    background-image: url("/PC_TH/img/accountcircle.png?27317");
    background-position: right;
    background-repeat: no-repeat;
    background-size: 70px;
    color: #fff;
}

.list-item-wait.is-pediatric {
    background-color: #00acc1;
    background-image: url("/PC_TH/img/accountchildcircle.png?27317");
}

.phone .list-item-wait {
    padding: 20px 15px;
    align-items: flex-start;
}

.ListRecords .list-item-wait:nth-child(odd) {
    margin-right: 4%;
}

.list-item-wait-time {
    margin-bottom: 5px;
    font-size: 25px;
    line-height: 1;
}

.list-item-wait-label {
    font-size: 18px;
    line-height: 1;
}

/*---------------Onboarding Popup------------------*/

.onboarding-carousel-container {
    position: relative;
    width: 560px;
}

.tablet .onboarding-carousel-container {
    width: 480px;
}

.phone .onboarding-carousel-container {
    width: 300px;
}

.onboarding-carousel-image {
    width: auto;
    height: 280px;
    margin-bottom: 50px;
    align-self: center;
}

.desktop .onboarding-carousel-image {
    height: 25vh;
}

.tablet .onboarding-carousel-image {
    width: auto;
    height: 150px;
    margin-bottom: 30px;
}

.phone .onboarding-carousel-image {
    width: auto;
    height: 100px;
    margin-bottom: 20px;
}

.onboarding-carousel-item {
    padding: 20px 6px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: stretch;
}

.onboarding-carousel-item .page-title {
    margin-bottom: 10px;
    padding-bottom: 0;
    border: none;
    align-self: center;
    text-align: center;
}

.tablet .onboarding-carousel-item .page-title .Heading2 {
    font-size: 26px;
}

.phone .onboarding-carousel-item .page-title .Heading2 {
    font-size: 17px;
}

.onboarding-carousel-description {
    padding: 0px 40px;
    text-align: center;
}

.tablet .onboarding-carousel-description {
    padding: 0px 20px;
    text-align: center;
}

.phone .onboarding-carousel-description {
    padding: 0px 10px;
}

.onboarding-carousel-container .owl-theme .owl-controls .owl-buttons div {
    top: 35%;
    font-size: 60px;
    background-color: transparent;
    color: #cfd8dc;
}

.tablet .onboarding-carousel-container .owl-theme .owl-controls .owl-buttons div {
    font-size: 30px;
}

.phone .onboarding-carousel-container .owl-theme .owl-controls .owl-buttons div {
    top: 25%;
    font-size: 20px;
}

.onboarding-carousel-container .owl-next.fa.fa-fw.fa-angle-right {
    right: 0;
}

.onboarding-carousel-container .owl-prev.fa.fa-fw.fa-angle-left {
    left: 0;
}

.onboarding-carousel-container .owl-theme .owl-controls .owl-page span {
    width: 8px;
    height: 8px;
    background-color: #cfd8dc;
    opacity: 1;
}

.onboarding-carousel-container .owl-theme .owl-controls .owl-page.active span {
    background-color: #00acc1;
}

a.onboarding-carousel-close {
    position: absolute;
    bottom: 9px;
    right: 50px;
    color: #cfd8dc;
    font-weight: 400;
    font-size: 14px;
}

.phone a.onboarding-carousel-close {
    right: 20px;
}

/*---------------Banner User------------------*/

.banner-user-header {
    height: 140px;
    background-image: url("/PC_TH/img/bannerimageuser.png?27317");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-user-content {
    height: 95px;
    padding: 0 20px;
    display: flex;
}

.banner-user-image {
    height: 140px;
    width: 140px;
    flex-shrink: 0;
    border: 10px solid #fff;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-70px);
}

.banner-user-info {
    padding: 20px;
    display: flex;
}

.banner-user-name {
    margin-right: 15px;
    font-weight: 500;
}

/*---------------Tabs Agenda Content------------------*/

.tabs-content-agenda {
    margin: -10px;
    padding: 40px 50px;
    background-color: #f4f7fc;
}

.tablet .tabs-content-agenda {
    padding: 30px;
}

.phone .tabs-content-agenda {
    padding: 20px;
}

.tabs-content-agenda .List {
    margin-bottom: 50px;
    background-color: transparent;
}

/*---------------Input Custom------------------*/

.input-custom label {
    position: relative;
    height: 26px;
    width: 26px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    white-space: nowrap;
    margin: 3px 0px;
    user-select: none;
    cursor: pointer;
    transition: all 0.2s;
}

.input-custom label::before {
    display: inline-block;
    font-style: normal;
}

.input-custom input[type="checkbox"]:checked + span + label {
    border-color: #00acc1;
    color: #fff;
    transition: all 0.2s;
}

.input-custom input[type="checkbox"]:checked + span + label:before {
    content: "";
    position: absolute;
    top: 4px;
    right: 8px;
    background-color: transparent;
    height: 10px;
    width: 5px;
    border-right: 2px solid #00acc1;
    border-bottom: 2px solid #00acc1;
    transform: rotate(45deg);
    transition: all 0.2s;
}

.input-custom input[type="checkbox"],
.input-custom input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.input-custom input[type="radio"] + label {
    height: 26px;
    width: 26px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cfd8dc;
    border-radius: 50%;
    white-space: nowrap;
    margin: 3px 0px;
    user-select: none;
    cursor: pointer;
    transition: none;
}

.input-custom input[type="radio"]:checked + label {
    border: 7px solid #00acc1;
}

/*---------------Agenda Detail------------------*/

.agenda-detail {
    position: relative;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.agenda-detail-header {
    padding: 30px;
    border-radius: 4px 4px 0 0;
    background-color: #f4f7fc;
    border-bottom: 1px solid #cfd8dc;
}

.agenda-detail.historic .agenda-detail-header {
    border-bottom: 0;
}

.tablet .agenda-detail-header {
    padding: 30px;
}

.tablet .historic .agenda-detail-header-content {
    flex-direction: column;
}

.phone .agenda-detail-header {
    padding: 20px 15px;
}

.agenda-detail.historic .agenda-detail-header-left {
    display: flex;
    align-items: center;
}

.agenda-detail-header-content {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.agenda-detail.historic .agenda-detail-header-content {
    margin-top: 0;
}

.phone .agenda-detail-header-content {
    flex-direction: column;
}

.phone .agenda-detail-header-right {
    margin-top: 20px;
}

.agenda-detail-content {
    padding: 32px;
    border-radius: 0 0 4px 4px;
    background-color: #fff;
}

.tablet .agenda-detail-content {
    padding: 30px;
}

.phone .agenda-detail-content {
    padding: 20px 15px;
}

.agenda-detail-icon {
    margin-right: 10px;
}

.agenda-detail-icon > i.icon,
.agenda-detail-icon > i.icon:before {
    font-size: 38px;
    color: #00acc1;
}

.agenda-detail-info,
.agenda-detail-location,
.agenda-detail-actions,
.agenda-detail-actions-left {
    display: flex;
    padding-left: 25px;
}

.agenda-detail-info {
    margin: 0 0 20px 25px;
}

.agenda-detail.historic .agenda-detail-info {
    margin-bottom: 0;
}

.phone .agenda-detail-info,
.phone .agenda-detail-location,
.phone .agenda-detail-actions,
.phone .agenda-detail-actions-left {
    padding-left: 0;
}

.phone .agenda-detail-info {
    margin: 10px 0;
    flex-direction: column;
}

.agenda-detail-location {
    align-items: baseline;
}

.agenda-detail-location i.icon {
    margin-right: 5px;
    font-size: 16px;
}

.agenda-detail-title {
    padding-right: 40px;
}

.phone .agenda-detail-title {
    font-weight: 500;
}

.agenda-detail-schedule-list .ListRecords > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 50px;
    line-height: 30px;
}

.agenda-detail-schedule-list .ListRecords li:not(:first-of-type)::before {
    content: "•";
    color: #00acc1;
    margin-left: 8px;
    margin-right: 8px;
}

.agenda-detail-date {
    margin-right: 40px;
}

.phone .agenda-detail-date {
    margin: 0 0 5px 0;
}

.phone .agenda-detail-actions {
    flex-direction: column;
}

.phone .agenda-detail-actions .Button {
    width: 100%;
}

.agenda-detail-actions-left .Button:first-child {
    margin-right: 20px;
}

.phone .agenda-detail-actions-left {
    flex-direction: column;
}

.phone .agenda-detail-actions-left .Button:first-child {
    margin-right: 0px;
}

.phone .agenda-detail-actions .Button {
    margin-top: 10px;
}

.agenda-detail-actions-right {
    margin-left: 20px;
    text-align: right;
}

.phone .agenda-detail-actions-right {
    margin-left: 0;
    align-items: center !important;
    text-align: center;
}

.agenda-detail.is-teleconsulta .agenda-detail-actions-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.agenda-detail-actions-right .Button {
    width: 100%;
    margin-bottom: 10px;
}

.tablet .agenda-detail.historic .agenda-detail-actions-right .Button {
    width: auto;
    margin-top: 20px;
}

.phone .agenda-detail-actions-right .Button {
    width: 100% !important;
    margin-bottom: 0;
}

.agenda-detail.is-teleconsulta .agenda-detail-actions-right .Button {
    width: auto;
}

.agenda-detail-vertical-separator {
    margin-bottom: 50px;
    display: flex;
}

.tablet .agenda-detail-vertical-separator,
.phone .agenda-detail-vertical-separator {
    margin-bottom: 20px;
    flex-direction: column;
}

.agenda-detail-content-left,
.agenda-detail-content-right {
    flex: 1;
}

.agenda-detail-content-left {
    padding-right: 20px;
}

.tablet .agenda-detail-content-left,
.phone .agenda-detail-content-left {
    padding-right: 0;
    margin-bottom: 20px;
}

.agenda-detail-content-right {
    padding-left: 20%;
}

.tablet .agenda-detail-content-right,
.phone .agenda-detail-content-right {
    padding-left: 0;
}

.agenda-detail-card-left,
.agenda-detail-card-right,
.agenda-detail-card-bottom {
    margin-top: 10px;
}

.agenda-detail-card-left {
    margin-top: 0;
}

.agenda-detail-onboarding {
    position: absolute;
    top: 30px;
    right: 35px;
}

.phone .agenda-detail-onboarding {
    top: 17px;
    right: 15px;
}

.agenda-detail .Tabs_header {
    background-color: #f4f7fc;
    padding: 0;
}

.agenda-detail .Tabs_header .Tabs__tab:hover,
.agenda-detail .Tabs_header .Tabs__tab.active {
    background-color: #eef2f7;
}

.agenda-detail .Tabs_body {
    background-color: #fff;
    padding: 0;
}

.agenda-detail .TableRecords {
    border: 0;
}

.agenda-detail .TableRecords_Header {
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 400;
    color: #273136;
    border: 0;
}

.agenda-detail .TableRecords_OddLine,
.agenda-detail .TableRecords_EvenLine {
    padding: 5px 10px;
    color: #52646c;
    border: 0;
}

.desktop .agenda-detail .TableRecords_OddLine:first-child,
.desktop .agenda-detail .TableRecords_EvenLine:first-child,
.desktop .agenda-detail .TableRecords_Header:first-child,
.tablet .agenda-detail .TableRecords_OddLine:first-child,
.tablet .agenda-detail .TableRecords_EvenLine:first-child,
.tablet .agenda-detail .TableRecords_Header:first-child {
    padding-left: 0;
}

.tablet.portrait .agenda-detail .TableRecords:not(.NoResponsive) .TableRecords_Label,
.phone .agenda-detail .TableRecords:not(.NoResponsive) .TableRecords_Label {
    color: #273136;
    line-height: 1;
}

.phone .agenda-detail .TableRecords {
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 13px;
}

.phone .agenda-detail .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine,
.phone .agenda-detail .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine {
    padding: 0 16px;
    margin-bottom: 8px;
    height: 40px;
}

.phone .agenda-detail .TableRecords:not(.NoResponsive) tr:first-child td.TableRecords_OddLine:first-child {
    border: none;
    height: auto;
    margin-bottom: 0;
    padding: 16px;
    line-height: 1;
}

.phone .agenda-detail .TableRecords:not(.NoResponsive) > * > * > td:first-child:before,
.phone .agenda-detail .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:first-child:before {
    content: "\f078" !important;
    font-size: 10px;
    color: #00838f;
}

.phone .agenda-detail .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:first-child:before {
    transform: rotate(180deg);
}

.agenda-detail-fatura {
    display: flex;
    align-items: center;
}

.phone .agenda-detail-fatura {
    flex-direction: column;
    align-items: flex-start;
}
.agenda-detail-fatura-info {
    display: flex;
    flex-direction: column;
}

.phone .agenda-detail-fatura-date,
.phone .agenda-detail-fatura-reference {
    margin-bottom: 10px;
}
.agenda-detail-fatura-value {
    margin: 0 0 0 auto;
}
.agenda-detail-fatura-actions {
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.phone .agenda-detail-fatura-actions {
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
}

.phone .agenda-detail-fatura-actions .Button {
    width: 100%;
    margin: 10px 0 0;
}

.phone .agenda-detail.historic .Button {
    width: 100%;
}

.ListRecords .list-item-invoices:not(:last-child) {
    padding-bottom: 32px;
    margin-bottom: 40px;
    border-bottom: 1px solid #cfd8dc;
}

.ListRecords .list-item-invoices:not(:first-child) {
    margin-top: 40px;
}

/*---------------Agenda Card Detail------------------*/

.card-detail-agenda {
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.card-detail-agenda .card-doctor-header {
    border-bottom: none;
}

.card-detail-agenda .card-doctor-content {
    padding: 0;
}

.phone .card-detail-agenda .card-doctor-content {
    padding: 10px;
}

/*---------------Card Map------------------*/

.card-map {
    position: relative;
    padding: 20px;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.phone .card-map {
    padding: 10px;
}

.card-map-image {
    position: relative;
    margin-bottom: 20px;
    height: 150px;
    width: 100%;
    overflow: hidden;
}

.card-map-image > span > div {
    position: unset !important;
}

.card-map-content-top,
.card-map-content-bottom {
    display: flex;
}

.card-map-content-bottom {
    margin-top: 10px;
}

.card-map-content-top a {
    font-weight: 400;
}

.card-map-content i.icon {
    margin-right: 10px;
    font-size: 15px;
    color: #78909c;
    line-height: 1;
}

.card-map-content-bottom i.icon {
    align-self: center;
}

.card-map-info-link a {
    padding-left: 20px;
    font-weight: 400;
    text-decoration: underline;
}

/*---------------Card Greeting------------------*/

.card-greeting {
    position: relative;
    margin-bottom: 40px;
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.phone .card-greeting {
    padding: 15px 10px;
    margin-bottom: 20px;
    flex-direction: row-reverse;
}

.card-greeting-title.Heading2 {
    margin-bottom: 0;
}

.card-greeting-content {
    margin-top: 5px;
    color: #52646c;
}

.phone .card-greeting-content {
    margin-top: 0;
    font-size: 15px;
    line-height: 21px;
}

.card-greeting-content:empty {
    display: none;
}

.card-greeting-info {
    padding-top: 20px;
}

.phone .card-greeting-info {
    padding-top: 10px;
}

.card-greeting-image {
    height: 136px;
    width: 124px;
    margin-right: 20px;
}

.phone .card-greeting-image {
    height: 102px;
    width: auto;
    margin-right: 10px;
}

/*---------------Vertical Timeline------------------*/

.VerticalTimeline-content {
    box-shadow: none;
    border: 1px solid #cfd8dc;
}

.card-timeline-info .PH_Preview {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.phone .card-timeline-info .PH_Preview {
    margin-bottom: 5px;
}

.card-timeline-image {
    height: 25px;
    width: 25px;
    margin-right: 8px;
    border-radius: 50%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.card-timeline-location {
    display: flex;
}

.card-timeline-location .icon.material-icons {
    font-size: 18px;
}

.phone .card-timeline-location .icon.material-icons {
    font-size: 15px;
    line-height: 1.3;
}

.card-timeline-location .rich-text {
    margin-left: 5px;
}
.card-timeline-action {
    margin-top: 15px;
}

.card-timeline-specialty {
    margin: 0;
}

.card-timeline-action-phone {
    position: absolute;
    top: 34px;
    right: 10px;
}

.card-timeline-action-phone .icon.material-icons {
    font-size: 28px;
    color: #52646c;
}

/*---------------Section Privacy------------------*/

.section-privacy {
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.tablet .section-privacy {
    padding: 20px;
}

.section-privacy .Section_header {
    padding-bottom: 20px;
    display: flex;
}

.section-privacy-icon {
    margin-right: 15px;
}

.section-privacy-icon .icon.material-icons,
.section-privacy-icon .icon:before {
    font-size: 20px;
    line-height: 24px;
    color: #00acc1;
}

.section-privacy-action {
    margin-left: auto;
}

/*---------------Section Privacy Simple------------------*/

.section-privacy-simple {
    padding: 30px;
}

.tablet .section-privacy-simple {
    padding: 20px;
}

.section-privacy-simple .Section_header {
    padding: 0;
    align-items: center;
    border: none;
}

.section-privacy-simple .section-privacy-icon .icon.material-icons,
.section-privacy-simple .section-privacy-icon .icon:before {
    font-size: 30px;
    line-height: 40px;
    color: #00acc1;
}

/*----------------Card Payment-----------------*/

.payment-method-container {
    display: flex;
    align-items: center;
}

.phone .payment-method-container .input-custom {
    display: none;
}

a .card-payment,
.card-payment {
    height: 82px;
    width: 365px;
    position: relative;
    padding: 25px 22px;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #273136;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.payment-method-container .card-payment {
    margin-left: 36px;
}

.phone .payment-method-container .card-payment {
    width: 100%;
    margin-left: 0;
}

a .card-payment:hover,
.card-payment:hover {
    text-decoration: none;
}

.card-payment.is-selected {
    border: 4px solid #00acc1;
    padding: 16px 18px;
}

.card-payment-reference,
.card-payment-date {
    font-size: 16px;
    text-align: right;
}

.phone .card-payment-reference,
.phone .card-payment-date {
    font-size: 15px;
}

.card-payment-reference {
    font-weight: 500;
}

.card-payment-image img {
    width: 80%;
}

.card-payment-content {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.card-payment-action {
    width: 16%;
    display: flex;
    justify-content: center;
}

.card-payment.is-selected > .icon {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 18px;
    color: #fff;
}

.card-payment.is-selected:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-top: 40px solid #00acc1;
    border-left: 40px solid transparent;
}

.payment-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

.phone .payment-actions {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
}

.payment-actions .Button {
    flex-shrink: 0;
}

.phone .payment-actions .Button {
    width: 100%;
}

.payment-actions .Button:first-child {
    margin-right: 20px;
    margin-bottom: 20px;
}

.phone .payment-actions .Button:first-child {
    margin-right: 0;
    margin-bottom: 10px;
}

.add-payment-link {
    margin-left: 65px;
    display: flex;
    align-items: center;
}

.phone .add-payment-link {
    margin-left: 0;
    font-size: 15px;
    text-decoration: underline;
}

/*----------------Input Date-----------------*/

input.empty-input-date::before {
    width: 100%;
    content: attr(placeholder);
}

/*----------------MediumRightColumn COntainer-----------------*/

.desktop .MediumRightColumns-container .MediumRightColumns > .Column.ColFirst {
    padding-right: 45px;
}

.desktop .MediumRightColumns-container .MediumRightColumns > .Column.ColLast {
    padding-left: 45px;
}

.tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakFirst > .Column,
.tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakLast > .Column,
.tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakAll > .Column,
.tablet .MediumRightColumns-container .Columns.MarginBottom.tab_BreakMiddle > .Column {
    margin-bottom: 50px;
}

.tablet .MediumRightColumns-container .card-news {
    max-width: 440px;
    margin: 0 auto;
}

.phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakFirst > .Column,
.phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakLast > .Column,
.phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakAll > .Column,
.phone .MediumRightColumns-container .Columns.MarginBottom.mob_BreakMiddle > .Column {
    margin-bottom: 30px;
}

/*---------------Card Waiting Time------------------*/

.card-waiting-time {
    margin: 0 0 80px;
    padding: 40px 30px;
    background-color: #f4f7fc;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
}

.phone .card-waiting-time {
    padding: 15px;
}

.card-waiting-time-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.phone .card-waiting-time-header {
    margin-bottom: 10px;
}

.card-waiting-time .select2-container .select2-choice {
    width: auto;
    padding-right: 25px;
    background-color: transparent;
    border: none;
    font-size: 22px;
}

.phone .card-waiting-time .select2-container .select2-choice {
    width: auto;
    font-size: 16px;
}

.card-waiting-time .ListRecords {
    margin-bottom: 15px;
}

/*---------------Card Download App------------------*/

.card-download-app {
    height: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 7px;
    background-color: #fff;
    box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.phone.login-layout .card-download-app {
    display: flex;
    height: 77px;
}

.card-download-image img {
    height: 50px;
    flex-shrink: 0;
    margin-right: 6px;
}

.card-download-info {
    display: flex;
    flex-direction: column;
}

.card-download-title {
    margin-bottom: 3px;
}

.card-download-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px 0px 10px;
    height: 100%;
}

.card-download-description,
a.card-download-open {
    font-size: 10px;
}

.card-download-description {
    color: #52646c;
    line-height: 12px;
}

.card-download-actions a.Button {
    height: 23px;
    min-width: auto;
    padding: 7px 40px;
    font-size: 10px;
    line-height: 5px;
}

a.card-download-open {
    display: flex;
    justify-content: center;
    text-decoration: underline;
}

.card-download-close {
    position: absolute;
    top: 0;
    right: 0;
}

.card-download-close .icon.material-icons {
    font-size: 16px;
    color: #00838f;
    padding: 2px;
}

/*---------------Card Appointment Price ------------------*/

.card-appointment-price {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 100px;
    padding: 20px 25px;
    margin-bottom: 20px;

    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

/*---------------Login Layout------------------*/

.phone.login-layout .Header {
    height: 130px;
}

.phone.login-layout .Content.ThemeGrid_Wrapper {
    top: 130px;
}

/*---------------Modal Custom------------------*/

.modal-custom {
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.03), 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.modal-custom .ModalContainer {
    padding: 0;
    box-shadow: none;
    border-radius: 4px;
    text-align: unset;
    max-width: 731px;
    width: 100%;
}

.modal-custom.is-small .ModalContainer {
    width: 590px;
}

.tablet .modal-custom.is-small .ModalContainer {
    width: 500px;
}

.phone .modal-custom.is-small .ModalContainer {
    width: 320px;
}

.ie .modal-custom .ModalContainer {
    text-align: left;
}

.tablet .modal-custom .ModalContainer {
    max-width: 80%;
}

body.ModalOpened .modal-custom .ModalBackground {
    background-color: #607d8b;
    opacity: 0.5;
}

.modal-custom .ModalHeader {
    position: relative;
    background-color: #00acc1;
}

.modal-custom .ModalTitle {
    padding: 28px 70px 28px 30px;
    margin-bottom: 0 !important;
    color: #fff;
    background-color: #00acc1;
    font-weight: 400;
    text-align: left;
    border-radius: 4px 4px 0 0;
}

.tablet .modal-custom .ModalTitle {
    padding: 20px 60px 20px 20px;
}

.phone .modal-custom .ModalTitle {
    padding: 15px 50px 15px 15px;
}

.modal-custom .ModalMessage {
    padding: 30px 70px;
    margin-bottom: 20px;
    padding-bottom: 0;
    font-size: inherit;
    max-height: calc(100vh - 290px);
    overflow-y: auto;
}

.modal-custom.is-onboarding .ModalMessage {
    max-height: unset;
    overflow: hidden;
}

.tablet .modal-custom .ModalMessage {
    padding: 20px 40px;
    padding-bottom: 0;
}

.phone .modal-custom .ModalMessage {
    padding: 20px;
    padding-bottom: 0;
    margin-bottom: 10px;
    max-height: calc(100vh - 330px);
}

.modal-custom.is-small .ModalMessage {
    padding: 0;
}

.modal-custom .ModalMessage::-webkit-scrollbar {
    -webkit-appearance: none;
}

.modal-custom .ModalMessage::-webkit-scrollbar:vertical {
    width: 6px;
}

.modal-custom .ModalMessage::-webkit-scrollbar:horizontal {
    height: 6px;
}

.modal-custom .ModalMessage::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-custom .ModalActions {
    padding: 10px 70px 25px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.modal-custom.is-onboarding .ModalActions:empty {
    display: none;
}

.tablet .modal-custom .ModalActions {
    padding: 20px 40px;
}

.phone .modal-custom .ModalActions {
    padding: 20px;
}

.modal-custom .ModalActions .Button:last-child {
    margin-left: 20px;
}

.phone .modal-custom .ModalActions .Button:last-child {
    margin: 20px 0 0 0;
}

.modal-custom .ModalClose {
    position: absolute;
    top: 30px;
    right: 30px;
}

.tablet .modal-custom .ModalClose {
    top: 20px;
    right: 20px;
}

.phone .modal-custom .ModalClose {
    top: 14px;
    right: 15px;
}

.modal-custom .ModalClose a .icon {
    color: #fff;
}

.modal-custom.no-header .ModalClose a .icon {
    color: inherit;
}

.modal-custom.no-header:not(.modal-alert) .ModalMessage {
    padding-top: 20px;
}

body.ModalOpened .modal-custom .ModalContainer {
    top: 70px;
    bottom: inherit;
}

body.ModalOpened .phone .modal-custom .ModalContainer {
    max-height: calc(100vh - 150px);
    height: auto;
}

body.ModalOpened .modal-custom.is-onboarding .ModalContainer {
    border: none;
}

.modal-custom .Form {
    margin: 0;
}

.modal-calendar-container {
    padding: 25px;
}

.modal-calendar-container img {
    width: 30px;
}

.modal-calendar-container .Card .Card_Title.Heading3 {
    display: none;
}

.modal-calendar-container .CardSimple .Card_Text {
    margin: 0;
}

.modal-calendar-container .input-row {
    align-items: center;
    justify-content: center;
}

.modal-custom .Heading2 {
    font-weight: 400;
}

/*---------------Modal Alert ------------------*/

.modal-custom.modal-alert .ModalActions {
    padding: 20px 70px;
}

.modal-custom.modal-alert.modal-new .ModalActions {
    padding: 0;
}

.phone .modal-custom.modal-alert .ModalActions {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.phone .modal-custom.modal-alert .ModalActions .Button {
    width: 100% !important;
}

.modal-custom.modal-alert .ModalMessage {
    margin-bottom: 0;
}

.phone .modal-custom.modal-alert .icon-content {
    padding: 30px 15px 20px;
}

.phone .modal-alert.modal-custom .ModalContainer {
    overflow: auto;
}

/*---------------Modal Form ------------------*/

.modal-form a.ModalClose {
    color: #fff;
}

.modal-form .ModalMessage {
    margin-bottom: 0;
    padding: 30px 40px;
}

.modal-form .ModalActions {
    padding: 20px 40px 25px;
}

.phone .modal-form .ModalActions {
    padding: 20px;
}

.phone .modal-form .ModalActions {
    display: flex;
    flex-direction: column;
}

.phone .modal-form .ModalActions .Button {
    width: 100%;
}

.phone .modal-form .ModalActions .Button:last-child {
    margin: 10px 0 0 0;
}

/*---------------Modal Alert NEW ------------------*/

.modal-alert-new .ModalContainer {
    width: 590px;
    padding: 55px 80px 50px 55px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}

.phone .modal-alert-new .ModalContainer {
    width: 90vw;
    padding: 50px 24px 32px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}

.modal-alert-new .ModalMessage,
.tablet .modal-alert-new .ModalMessage,
.phone .modal-alert-new .ModalMessage {
    padding: 0;
    margin: 0;
}

.modal-alert-new .ModalClose,
.tablet .modal-alert-new .ModalClose {
    position: absolute;
    top: 15px;
    right: 15px;
}
.modal-alert-new .ModalActions,
.tablet .modal-alert-new .ModalActions,
.phone .modal-alert-new .ModalActions {
    padding: 20px 0 0;
}

.phone .modal-alert-new .ModalActions {
    display: flex;
    flex-direction: column;
}

.phone .modal-alert-new .ModalActions .Button {
    width: 100%;
}

.phone .modal-alert-new .ModalActions .Button:last-child {
    margin: 10px 0 0 0;
}

.modal-alert-new .icon-content {
    padding: 0;
}

/*---------------User Panel ------------------*/

.user-panel.InlineDropdown {
    width: 200px;
}

.user-panel .InlineDropdown_label {
    display: flex;
    justify-content: center;
    text-align: center;
}

.phone .user-panel .InlineDropdown_label {
    justify-content: flex-start;
}

.user-panel .DropdownMenu {
    left: 0px;
    min-width: 200px;
    padding: 20px 20px 0;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.2);
    z-index: 220;
}

.user-panel .DropdownMenu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-top: 1px solid #cfd8dc;
    border-right: 1px solid #cfd8dc;
    transform: rotate(-45deg);
}

/*---------------User Item ------------------*/

.user-item {
    margin-bottom: 15px;
    display: flex;
}

.user-item-image {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 50%;
    background-image: url("/PC_TH/img/default_user.png?27317");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.user-item-name {
    font-size: 14px;
    line-height: 20px;
    color: #52646c;
}

/*---------- Blank Slate Custom ----------*/

.BlankSlate_custom {
    padding: 50px 20%;
}

.BlankSlate_custom .Blank_icon .icon.material-icons,
.BlankSlate_custom .Blank_icon .icon::before {
    font-size: 50px;
    color: #273136;
}

.BlankSlate_custom .Blank_desc.lead-normal {
    margin-bottom: 5px;
    color: #273136;
}

/*---------- Badge Custom ----------*/

.Badge.badge_custom {
    height: 19px;
    padding: 1px 3px;
    border: 1px solid #fff;
    background-color: #00acc1;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transform: translateY(-6px);
}

/*---------- Privacy Block ----------*/

.privacy-block {
    padding: 25px 30px 20px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

.phone .privacy-block {
    padding: 15px;
}

.privacy-block-top {
    padding-bottom: 40px;
    border-bottom: 1px solid #cfd8dc;
}

.privacy-block-bottom {
    padding-top: 40px;
}

.privacy-block-action {
    display: flex;
    justify-content: flex-end;
}

.privacy-block .input-row .icon,
.privacy-block .input-row .material-icons {
    line-height: unset;
    color: #00acc1;
}

/*---------- Card Privacy ----------*/

.card-privacy {
    height: 300px;
    padding: 25px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #fcfcfc;
    overflow-y: auto;
}

/*---------- Card Center Content ----------*/

.card-center-content {
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    background-color: #fff;
}

/* File Upload **************************/

.FileUpload-custom {
    display: inline-block;
    background-color: transparent;
    border: none;
    padding: 0;
}

/* Error 404 **************************/

.error-page {
    margin: 0 auto;
    height: 72vh;
    background-image: url("/PC_TH/img/erro404desktop.png?27317");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.tablet .error-page {
    height: 40vh;
}

.phone .error-page {
    height: 50vh;
}

.error-page.default {
    background-image: url("/PC_TH/img/ErroGenerico_2x.png?27317");
    background-size: 50%;
    background-position: bottom;
}

.desktop .error-page.default {
    background-size: 60%;
}

.desktop.small .error-page.default {
    background-size: 70%;
}

.desktop.big .error-page.default {
    background-size: 50%;
}

.tablet .error-page.default {
    height: 50vh;
    background-size: 70%;
}

.phone .error-page.default {
    height: 60vh;
    background-size: 100%;
}

.error-info {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error-info .Button {
    margin-top: 20px;
}

.tablet .error-info {
    margin-top: 50px;
}

.phone .error-info {
    margin-top: 30px;
}

.error-title,
.error-message {
    display: block;
    text-align: center;
}

.error-title {
    margin-bottom: 30px;
    font-size: 50px;
    font-weight: 500;
}

.tablet .error-title {
    margin-bottom: 20px;
    font-size: 40px;
}

.phone .error-title {
    margin-bottom: 10px;
    font-size: 30px;
}

/*? Erro generico update: Change background image to img (add class to container) */
.error-page.default.error-page--no-background {
    background-image: none;
}

.error-info__image {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    max-height: 440px;
}

.phone .error-page.default.error-page--no-background {
    height: calc(100vh - 100px);
    display: flex;
}

.phone .error-page.default.error-page--no-background .error-info {
    flex: 1;
}

.phone .error-info__image {
    margin: auto auto 20px;
}

/* Download app **************************/

.store-links img {
    height: 38px;
}

/*---------------Card Self Test ------------------*/

.card-map-content-notes {
    border-bottom: 1px solid #cfd8dc;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.card-map-content-notes:empty {
    display: none;
}

/*---------------List Item Bullet ------------------*/

.list-item-bullet {
    position: relative;
    padding-left: 20px;
}

.list-item-bullet:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    height: 7px;
    width: 8px;
    background-image: url(/PC_TH/img/bullet.png?124868&27317);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    background-repeat: no-repeat;
}

/*---------------Menu Balloon ------------------*/

.menu-balloon {
    position: relative;
}

.balloon-menu-wrapper {
    display: none;
    position: absolute;
    top: 42px;
    left: -100px;
    padding: 20px 25px 15px;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 121, 121, 0.2);
    z-index: 2;
}

.balloon-menu-wrapper:after {
    content: "";
    position: absolute;
    top: -9px;
    right: 25px;
    height: 14px;
    width: 14px;
    border-left: 1px solid #cfd8dc;
    border-top: 1px solid #cfd8dc;
    background-color: #fff;
    border-radius: 2px;
    transform: rotate(45deg);
    z-index: 3;
}

.menu-balloon.open .balloon-menu-wrapper {
    display: block;
}

.menu-balloon .input-row {
    align-items: center;
}

/*---------------Document Item ------------------*/

.document-table {
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.document-table th,
.document-table td {
    padding: 15px 18px 10px;
    color: #273136;
    font-size: 14px;
    font-weight: 400;
}

.document-table td {
    color: #52646c;
}

.document-table td a {
    font-weight: 400;
}

.document-table tr:nth-child(even) {
    background-color: rgba(240, 245, 252, 0.3);
}

/*--------------- Declaration ------------------*/

.content-declaration {
    padding: 40px 40px 0px 40px;
    font-weight: bold;
    background-color: #fff;
}

.declaration-logo img {
    width: 340px;
}

.declaration-title {
    margin-top: 120px;
    text-align: center;
}

.declaration-text {
    height: 160px;
    margin-top: 100px;
}

.declaration-signature {
    margin-top: 100px;
    margin-right: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.declaration-signature-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.declaration-signature img {
    width: 100px;
    margin-bottom: 10px;
}

.declaration-date {
    margin-top: 40px;
}

.declaration-footer {
    margin-top: 370px;
}

/*--------------- Card banner ------------------*/

.card-banner {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fc;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    margin-bottom: 50px;
}

.phone .card-banner {
    padding: 10px 10px 0;
    flex-direction: column;
    justify-content: center;
}

.card-banner-info {
    padding-top: 10px;
    flex-basis: 48%;
    flex-shrink: 0;
}

.phone .card-banner-info {
    padding: 20px 10px 0px;
    order: 2;
}

.phone .card-banner-info .card-muda-content {
    display: flex;
    flex-direction: column;
}

.card-banner-info .rich-text {
    line-height: 20px;
    color: #6b7b84;
}

.phone .card-banner-info .rich-text {
    line-height: 20px;
    color: #6b7b84;
}

.phone .card-banner-info .rich-text p {
    margin-top: 0;
}

.card-banner-content {
    font-size: 13px;
}

.card-banner-image {
    width: 100%;
    height: auto;
    position: relative;
}

.card-banner-media {
    display: flex;
    align-items: center;
    flex-basis: 49%;
    flex-shrink: 0;
}

.card-banner-media img {
    width: 100%;
    height: 100%;
}

.card-banner a {
    font-weight: 400 !important;
    width: 100%;
}

/* .owl-carousel .card-banner-info {
  align-self: start;
} */

.owl-carousel .Owlbuttons {
    position: absolute;
    right: 5px;
    bottom: 10px;
    width: 80px;
    display: flex;
}

.phone .owl-carousel .Owlbuttons {
    position: static;
    margin: 10px auto;
    display: block;
    right: 0;
    bottom: 0;
}

.owl-carousel .Owlbuttons .owlselect {
    padding: 4px;
}

.owl-carousel .Owlbuttons .owlselect.active div,
.owl-carousel .Owlbuttons .owlselect:hover div {
    background: white;
}

.owl-carousel .Owlbuttons .owlselect div {
    width: 8px;
    height: 8px;
    border-radius: 20px;
    background: #cfd8dc;
    display: block;
}

.phone .owl-carousel .Owlbuttons .owlselect div {
    background-color: #b2e6f0;
}

.phone .owl-carousel .Owlbuttons .owlselect.active div {
    background-color: #26c6da;
}

.owl-carousel .owlleft,
.owlright {
    color: #fff;
    line-height: 18px;
}

.phone .owl-carousel .owlleft,
.phone .owlright {
    color: #26c6da;
    line-height: 18px;
}

.Owlbuttons.mobile {
    display: none;
}

.phone .Owlbuttons.mobile {
    display: block;
    width: 100px;
}

/*--------------- Card Link ------------------*/

.card-link {
    padding: 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    font-weight: 400;
    color: inherit;
}

.desktop .card-link {
    padding: 25px;
    min-height: 127px;
    height: 100%;
}

.desktop .card-link:hover {
    box-shadow: none;
}

.phone .card-link {
    min-height: 130px;
    flex-direction: column;
    justify-content: center;
}

.card-link-icon {
    height: 40px;
    width: 40px;
    margin-right: 15px;
    flex-shrink: 0;
    color: #fff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone .card-link-icon {
    margin: 0;
}

.card-link-icon .icon {
    line-height: 1;
}

.card-link.orange .card-link-icon {
    background-color: #f9a109;
}

.card-link.green .card-link-icon {
    background-color: #c1c000;
}

.card-link.red .card-link-icon {
    background-color: #ed5b73;
}

.card-link.blue .card-link-icon {
    background-color: #00838f;
}

.desktop .card-link.blue:hover {
    background-color: #00838f;
}

.desktop .card-link.blue:hover .card-link-icon {
    background-color: #fff;
    color: #00838f;
}

.desktop .card-link.orange:hover {
    background-color: #f9a109;
}

.desktop .card-link.orange:hover .card-link-icon {
    background-color: #fff;
    color: #f9a109;
}

.desktop .card-link.green:hover {
    background-color: #c1c000;
}

.desktop .card-link.green:hover .card-link-icon {
    background-color: #fff;
    color: #c1c000;
}

.desktop .card-link.red:hover {
    background-color: #ed5b73;
}

.desktop .card-link.red:hover .card-link-icon {
    background-color: #fff;
    color: #ed5b73;
}

.card-link.purple .card-link-icon {
    background-color: #7dabff;
}

.desktop .card-link.purple:hover {
    background-color: #7dabff;
}

.desktop .card-link.purple:hover .card-link-icon {
    background-color: #fff;
    color: #7dabff;
}

.phone .card-link-info {
    margin-top: 14px;
}

.phone .card-link-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-link-title {
    color: #273136;
    font-family: "Azo Sans";
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
}

.phone .card-link-title {
    text-align: center;
}

.card-link-subtitle {
    font-size: 16px;
    line-height: 26px;
    color: #52646c;
    margin-top: 6px;
}

.phone .card-link-subtitle {
    display: none;
}

.desktop .card-link:hover .card-link-subtitle {
    color: #273136;
}

/*--------------- Contact Menu ------------------*/

.contact-menu {
    position: fixed;
    bottom: 52px;
    right: 32px;
    z-index: 200;
}

.contact-menu-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contact-menu-content a:hover {
    text-decoration: none;
}

.contact-menu-trigger {
    height: 80px;
    width: 80px;
    background-color: #00838f;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
}

.desktop .contact-menu-trigger:hover {
    background-color: #364952;
}

.phone .contact-menu-trigger {
    height: 48px;
    width: 48px;
}

.contact-menu-trigger .icon.mdi:before {
    font-size: 40px;
    color: #fff;
    line-height: 1.2;
}

.phone .contact-menu-trigger .icon.mdi:before {
    font-size: 24px;
    line-height: 1.5;
}

.tooltipster-contact-menu.Balloon {
    border: none;
    border-radius: 4px;
    box-shadow: none;
    background: transparent;
}

.phone .tooltipster-contact-menu.Balloon .Balloon_content {
    padding: 0;
}

.tooltipster-contact-menu.Balloon .tooltipster-content {
    position: relative;
    top: 8px;
    right: 35px;
}

.phone .tooltipster-contact-menu.Balloon .tooltipster-content {
    right: 36px;
}

.tooltipster-contact-menu.Balloon .tooltipster-content .input-row {
    align-items: center;
}

.tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left {
    height: 44px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    padding: 15px;
    border-radius: 4px;
    background-color: #d4edf4;
    white-space: nowrap;
}

.tablet .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left,
.phone .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left {
    white-space: nowrap;
}

.phone .tooltipster-contact-menu.Balloon .tooltipster-content .input-row-left {
    background-color: #fff;
}

.tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right > div {
    display: inherit;
}

.tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right {
    height: 40px;
    width: 40px;
    background-color: #ffffff;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right .icon {
    line-height: 1;
    font-size: 22px;
}

.tooltipster-contact-menu.Balloon .tooltipster-content .input-row-right .icon.mdi-24px.mdi:before {
    font-size: 28px;
}

.contact-menu-item {
    font-size: 16px;
    font-weight: 400 !important;
    margin-bottom: 16px;
}

.phone .contact-menu-item {
    font-size: 15px;
}

.contact-menu-background {
    background-color: rgba(55, 71, 79, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

/* CARTOES **************************************************************************************************************************/

/****************** CALENDÁRIO ******************/

.card-calendario-registo {
    border-left: 1px solid #cfd8dc;
    border-right: 1px solid #cfd8dc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.card-calendario-registo .card-calendario-registo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00838f;
    padding: 15px;
}

.phone .card-calendario-registo .card-calendario-registo-header {
    flex-direction: column;
}

.card-calendario-registo .card-calendario-registo-header .Heading3 {
    color: #fff;
    padding: 0;
    margin: 0;
}
.card-calendario-registo-header a,
.card-calendario-registo-header .CardBtn {
    border: 2px solid #fff;
    /*padding: 10px 5px;*/
    padding: 3px 6px;
    border-radius: 4px;
    margin-left: 20px;
    color: #fff;
}

.card-calendario-registo-header a:hover,
.card-calendario-registo-header .CardBtn:hover {
    background: #fff;
    transition: all 300ms linear;
}

.card-calendario-registo-header a .fa-fw,
.card-calendario-registo-header .CardBtn .fa-fw {
    color: #fff;
    font-size: 16px;
}
.card-calendario-registo-header a:hover .fa-fw,
.card-calendario-registo-header .CardBtn:hover .fa-fw {
    color: #00acc1;
}

.card-calendario-registo .card-calendario-registo-content {
    display: flex;
    border-bottom: 1px solid #cfd8dc;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
}

.light-calendario-registo .card-calendario-registo .card-calendario-registo-header {
    background-color: #f4f7fc;
    color: #273136;
}

.phone .card-calendario-registo-actions {
    margin-top: 10px;
}

.phone .card-calendario-registo-header .CardBtn:first-child {
    margin-left: 0px;
}

.card-calendario-registo div:nth-child(odd) .card-calendario-registo-content {
    background: #fcfdff;
}
.card-calendario-registo .card-calendario-registo-content:nth-child(even),
.card-calendario-registo div:nth-child(even) .card-calendario-registo-content {
    background: #fff;
}

.light-calendario-registo. card-calendario-registo .card-calendario-registo-content:nth-child(odd) {
    background: #fcfcfc;
}
.light-calendario-registo. card-calendario-registo .card-calendario-registo-content:nth-child(odd) {
    background: #fcfdff;
}

.light-calendario-registo .card-calendario-registo .card-calendario-registo-header .Heading3 {
    color: #273136;
}

.summary .card-calendario-registo.light {
    width: 48%;
    min-width: 540px;
    display: inline-table;
}

.summary .card-calendario-registo.light:nth-child(odd) {
    margin-right: 3%;
}

.phone .summary .card-calendario-registo.light {
    width: 100%;
    min-width: unset;
    display: flex;
    flex-direction: column;
}

.summary .card-calendario-registo.light .card-calendario-registo-header {
    display: table-cell;
    width: 135px;
}

.phone .summary .card-calendario-registo.light .card-calendario-registo-header {
    display: flex;
    width: 100%;
}

.summary .card-calendario-registo.light .card-calendario-registo-content {
    display: table-cell;
}

.phone .summary .card-calendario-registo.light .card-calendario-registo-content .input-col {
    margin-bottom: 0;
    flex-direction: row;
    justify-content: space-between;
}

/****************** SLIDE RANGE ******************/

.Slider {
    margin-top: 70px !important;
}

.SliderRange {
    background: linear-gradient(90deg, rgba(79, 182, 60, 1) 0%, rgba(253, 187, 45, 1) 50%, rgba(253, 45, 45, 1) 100%);
    height: 16px;
}

.Slider_currentvalue {
    border: 5px solid #ba5a45;
    border-radius: 50%;
    padding: 20px;
    color: #273136;
    font-size: 35px;
    padding: 0px;
    width: 70px;
    height: 70px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.LabelValues {
    position: relative;
}

.Slider_currentvalue {
    top: -70px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.LabelValues > div {
    text-align: center;
}
.SliderRange .ui-slider-range {
    background: transparent;
}

.SliderRange .ui-slider-handle {
    background: none;
    background-color: #fff;
    border-radius: 30px;
    height: 30px;
    top: -6px;
    width: 30px;
}

.SliderRange .ui-slider-handle:before {
    height: 12px;
    left: 9px;
    top: 8px;
}

.SliderRange .ui-slider-handle:after {
    height: 12px;
    left: 13px;
    top: 8px;
    width: 2px;
}

/****************** MOOD SLIDE RANGE ******************/

.MoodSlider_currentvalue {
    border: 5px solid #fff;
    box-shadow: 0px 0px 15px lightgrey;
    border-radius: 50%;
    padding: 20px;
    color: #fff;
    font-size: 50px;
    padding: 0px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin: 20px 0;
    top: -70px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding-top: 6px;
}

.CurrentValue_sad {
    background-color: #ba5a45;
}

.CurrentValue_neutral {
    background-color: #fea634;
}

.CurrentValue_happy {
    background-color: #9bca94;
}

/***************** PAIN MOOD SLIDER ********/

.pain-slider-icon-div {
    margin-left: 9px;
    margin-top: 2px;
}

/***************** MOON SLIDER *************/

.pie {
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 50%;
    background-color: #fbbb2d;
    border: 2px solid #fbbb2d;
    float: left;
    /*border: 5px solid #FFF;*/
    box-shadow: 0px 0px 15px lightgrey;
    padding: 20px;
    color: #fff;
    font-size: 50px;
    padding: 0px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin: 20px 0;
    top: -70px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding-top: 6px;
}

.zero {
    background: white;
}

.twentyfive {
    background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
    background-image: linear-gradient(90deg, white 50%, transparent 50%);
}

/* Slices greater than 50% require first gradient
 to be transparent -> green */

.seventyfive {
    background-image: linear-gradient(180deg, transparent 50%, #fbbb2d 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
    background-image: none;
}

/***************** REVERSE MOON SLIDER *************/

.reverse-twentyfive {
    background-image: linear-gradient(-180deg, transparent 50%, #fbbb2d 50%), linear-gradient(-90deg, white 50%, transparent 50%);
}

.reverse-fifty {
    background-image: linear-gradient(-90deg, white 50%, #fbbb2d 50%);
}

.reverse-seventyfive {
    background-image: linear-gradient(-180deg, transparent 50%, white 50%), linear-gradient(-90deg, white 50%, transparent 50%);
}

/*---------------Iframe Phone------------------*/

.phone-iframe {
    padding: 20px 15px;
}

.phone-iframe .MainContent {
    background: #fff;
}

.phone-iframe .Buttons {
    display: flex;
    flex-direction: column;
}
.phone-iframe .Buttons_Left,
.phone-iframe .Buttons_Right {
    display: block;
    text-align: center;
    width: 100%;
    vertical-align: unset;
    order: 2;
}

.phone-iframe .Buttons_Right {
    margin-bottom: 10px;
    order: 1;
}

.phone-iframe .Buttons .Button {
    width: 100%;
}

/*---------------Full CAlendar ------------------*/

.fc-toolbar.fc-header-toolbar {
    text-align: unset;
}

.fc-center {
    margin-top: 20px;
}

.tablet .fc-left,
.tablet .fc-right,
.tablet .fc-button-group,
.phone .fc-left,
.phone .fc-right,
.phone .fc-button-group {
    display: flex;
    float: unset;
    width: 100%;
}

.tablet .fc-right,
.phone .fc-right {
    margin: 10px 0 0;
}

.tablet .fc-left .fc-button,
.tablet .fc-right .fc-button,
.phone .fc-left .fc-button,
.phone .fc-right .fc-button {
    min-width: unset;
    display: flex;
}

.phone .fc-button {
    padding: 0 10px;
    font-size: 15px;
}

/*---------------Sortable WB ------------------*/

.sortable-wrapper {
    position: relative;
    margin-top: 1px;
    zoom: 1;
    color: black;
    outline: none;
    padding: 0.5em 0.5em 0.5em 0.7em;
    padding-left: 2.2em;
}

.sortable-icon {
    cursor: move;
}

.sortable-wrapper.blackfont {
    color: #000;
}

.sortable-wrapper > .inner {
    padding: 5px 10px;
    border: 1px solid #aaa;
}

.sortable-wrapper > .inner:hover {
}

.placeHolder {
    background-color: black;
}

/*---------------upload area ------------------*/

.upload-actions {
    margin-bottom: 10px;
    display: flex;
}

.phone .upload-actions {
    flex-direction: column;
}

.upload-actions input {
    width: 70%;
    margin-right: 20px;
}

.phone .upload-actions input {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;
}

.upload-actions .fileupload-btn.fileupload-upload-button {
    height: 34px;
    width: 205px;
    font-size: 13px;
}

.phone .upload-actions .fileupload-btn.fileupload-upload-button {
    width: 100%;
}

.ListRecords.list-wrap {
    display: flex;
    flex-wrap: wrap;
}

.ListRecords.list-wrap .margin-bottom {
    margin-right: 3%;
    flex-basis: 30%;
}

.tablet .ListRecords.list-wrap .margin-bottom {
    margin-right: 3%;
    flex-basis: 47%;
}

.phone .ListRecords.list-wrap .margin-bottom {
    margin-right: 0;
    flex-basis: 100%;
}

.phone .fileupload-container {
    width: 100%;
}

.ListRecords.list-wrap .input-row {
    align-items: flex-start;
}

/*---------------Button Container ------------------*/

.button-container {
    display: flex;
    align-items: center;
}

.phone .button-container {
    width: 100%;
    flex-direction: column;
}

.button-container.right {
    justify-content: flex-end;
}

.button-container .Button:first-child {
    margin-right: 10px;
}

.phone .button-container .Button {
    width: 100%;
    margin: 0 0 10px 0 !important;
    order: 1;
}

.phone .button-container .Button:first-child {
    order: 2;
}

/*---------------Card Underage ------------------*/

.card-underage {
    display: flex;
}

.desktop:not(.small) .card-underage {
    margin-top: 30px;
}

.desktop .card-underage {
    margin-bottom: 120px;
}

.tablet .card-underage {
    margin: 30px 0 40px;
}

.card-underage-container {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
}

.desktop.small .card-underage-container {
    width: 80%;
    margin-top: 50px;
}

.tablet .card-underage-container {
    width: 90%;
}

.phone .card-underage-container {
    width: 100%;
}

.card-underage-image {
    height: 210px;
}

.tablet .card-underage-image {
    height: 170px;
}

.phone .card-underage-image {
    display: none;
}

.card-underage-image > img {
    height: 100%;
}

.card-underage-text {
    margin-top: 25px;
}

.phone .card-underage-text {
    margin-top: 0px;
    padding: 8px 16px;
    border: 1px solid var(--color-grey-1);
    border-radius: 4px;
    background-color: var(--color-grey-10);
}

/*---------------Card Safepay ------------------*/

.card-safepay {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
.phone .card-safepay {
    flex-direction: row;
    align-items: flex-start;
    padding: 25px 10px;
}

.card-safepay-image {
    height: 150px;
    margin-bottom: 15px;
}

.phone .card-safepay-image {
    display: none;
}

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

.image-method img {
    margin: 0 auto;
    display: block;
    max-height: 242px;
}

.phone .image-method img {
    max-height: 222px;
}

.phone .image-method {
    margin-bottom: 30px;
}

.card-mb {
    padding: 15px 40px 15px 15px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    background-color: #f0f5fc;
}

.method-payment {
    padding-right: 50px;
}

.phone .method-payment {
    padding-right: 0;
}

.payment-end {
    margin-top: 30px;
}

.payment-end-title {
    margin-bottom: 8px;
}

.phone .payment-end-title {
    font-size: 20px;
}

.payment-end-subtitle {
    margin-bottom: 25px;
}
.phone .payment-end-subtitle {
    margin-bottom: 15px;
}

.phone .payment-end {
    margin-top: 0;
}

.payment-end .button-container {
    margin-top: 50px;
}

.phone .payment-end .button-container {
    margin-top: 20px;
}
/*---------------TeleCOnsulta Test ------------------*/

.teleconsulta-test-action {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.teleconsulta-test-action .input-row:first-child {
    margin-right: 20px;
}

.teleconsulta-test-footer {
    margin: 10px 0 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.phone .teleconsulta-test-footer {
    flex-direction: column;
}

.teleconsulta-test-footer input {
    margin-left: 20px;
}

.phone .teleconsulta-test-footer input {
    width: 100%;
    margin: 0 0 10px 0;
}

.phone .teleconsulta-test-footer span {
    width: 100%;
}

.teleconsulta-test-remove .fa {
    color: #de323b;
}

.teleconsulta-test-check .fa {
    color: #73a354;
}

.teleconsulta-test-link .fa {
    color: #607d8b;
}

/*--------------- TeleConsulta ------------------*/

.selftest-block {
    padding: 20px;
}

.phone .selftest-block {
    padding-top: 0;
}

.selftest-block .input-col {
    margin: 25px 0 0;
    align-items: flex-start;
}

.phone .selftest-block .input-col {
    margin: 15px 0 0;
}

.selftest .audiowrapper {
    height: 100px;
}

.selftest .audiowrapper.pid {
    background-color: rgb(230, 231, 232);
    width: calc(8%);
    height: 10px;
    display: inline-block;
    margin: 5px;
    margin-left: 0px;
    margin-right: 1%;
}

.selftest .card-center-content {
    min-height: 225px;
    background-color: #f0f5fc;
}

.selftest .card-center-content video {
    object-fit: cover;
    height: 50px;
    border-radius: 10px;
}

.selftest video {
    max-width: 100px;
    border-radius: 5px;
}

.loader {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.loader .question:before {
    content: "?";
    line-height: 48px;
    font-size: 50px;
    color: #607d8b;
}

.circle-loader {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-left-color: #949494;
    animation: loader-spin 1.2s infinite linear;
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.load-complete {
    -webkit-animation: none;
    animation: none;
    border-color: #949494;
    transition: border 500ms ease-out;
}

.checkmark {
    display: none;
}
.checkmark.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
    opacity: 1;
    height: 30px;
    width: 15px;
    transform-origin: left top;
    border-right: 3px solid #5cb85c;
    border-top: 3px solid #5cb85c;
    content: "";
    left: 5px;
    top: 25px;
    position: absolute;
}

.cross {
    display: none;
}
.cross.draw:after,
.cross.draw:before {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: cross;
}

.cross:after,
.cross:before {
    opacity: 1;
    position: absolute;
    left: 60px;
    content: " ";
    height: 50px;
    width: 3px;
    transform-origin: left top;
    background: #5cb85c;
    margin-top: 30px;
    background: #d06079;
}

.cross:after {
    transform: rotate(-45deg);
    margin-left: -30px;
    margin-top: 32px;
}

.cross:before {
    transform: rotate(45deg);
    margin-left: 3px;
}

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

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 50px;
        opacity: 1;
    }
    40% {
        height: 50px;
        width: 50px;
        opacity: 1;
    }
    100% {
        height: 50px;
        width: 50px;
        opacity: 1;
    }
}

@keyframes cross {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.pids-wrapper {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pid {
    width: calc(10% - 10px);
    height: 50px;
    display: inline-block;
    margin: 3px;
}
.selftest .iconlogo {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: rgba(0, 0, 0, 0.3);
}

.selftest .iconlogo .fa {
    color: #607d8b;
}

.bottom-controls {
    position: absolute;
    bottom: 0px;
    left: 0;
    display: block;
    width: 100%;
    padding: 10px;
}

.participant-video-canvas {
    display: flex;
    width: 1000px;
}

.participant-video-canvas > div {
    width: 50%;
    flex-shrink: 1;
}

/*.participant-video-canvas div {
  margin: 0px 12px;
  position: relative;
  display: inline-block;
  border: 2px solid #df8be6;
}

.participant-video-canvas div span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 5px;
  background-color: #df8be6;
}*/

.self-video-canvas {
    position: absolute;
    bottom: 70px;
    right: 20px;
    z-index: 5;
    border: 2px solid #28a31a;
}

.div#meters > div {
    margin: 0 0 1em 0;
}

.div#meters div.label {
    display: inline-block;
    font-weight: 400;
    margin: 0 0.5em 0 0;
    width: 3.5em;
}

.div#meters div.value {
    display: inline-block;
}

.meter {
    width: 50%;
}

.meter#clip {
    color: #db4437;
}

.meter#slow {
    color: #f4b400;
}

.meter#instant {
    color: #0f9d58;
}

/*------------------------------------*\
                  Useful Classes
  \*------------------------------------*/

/*---Colors---*/

.color-primary {
    color: #00acc1 !important;
}

.color-secondary {
    color: #00838f !important;
}

.color-grey-1 {
    color: #cfd8dc !important;
}

.color-grey-2 {
    color: #52646c !important;
}

.color-grey-3 {
    color: #52646c !important;
}

.color-grey-4 {
    color: #37474f !important;
}

.color-grey-5 {
    color: #273136 !important;
}

.color-alert {
    color: #de323b !important;
}

.color-white {
    color: #fff !important;
}

.color-appointment-primary {
    color: #ffb300;
}

.color-burgundy {
    color: #a43366;
}

.border-primary {
    border: 1px solid #cfd8dc;
}

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

.display-block {
    display: block;
}

/*---Flex---*/

.display-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.display-inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.flex-direction-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-direction-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-direction-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-wrap-wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

.justify-content-flex-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.justify-content-flex-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.justify-content-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-content-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify-content-space-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.align-items-flex-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.align-items-flex-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.align-items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.align-items-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.align-items-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.align-content-flex-start {
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.align-content-flex-end {
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.align-content-center {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.align-content-space-between {
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

.align-content-space-around {
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

.align-content-strech {
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.flex-1 {
    flex-grow: 1;
}

/*---------- padding ----------*/

.padding5 {
    padding: 5px;
}

.padding {
    padding: 10px;
}

.padding15 {
    padding: 15px;
}

.padding20 {
    padding: 20px;
}

.padding30 {
    padding: 30px;
}

.padding-top5 {
    padding-top: 5px;
}

.padding-right5 {
    padding-right: 5px;
}

.padding-bottom5 {
    padding-bottom: 5px;
}

.padding-left5 {
    padding-left: 5px;
}

.padding-top {
    padding-top: 10px;
}

.padding-right {
    padding-right: 10px;
}

.padding-bottom {
    padding-bottom: 10px;
}

.padding-left {
    padding-left: 10px;
}

.padding-top15 {
    padding-top: 15px;
}

.padding-right15 {
    padding-right: 15px;
}

.padding-bottom15 {
    padding-bottom: 15px;
}

.padding-left15 {
    padding-left: 15px;
}

.padding-top20 {
    padding-top: 20px;
}

.padding-right20 {
    padding-right: 20px;
}

.padding-bottom20 {
    padding-bottom: 20px;
}

.padding-left20 {
    padding-left: 20px;
}

.padding-bottom80 {
    padding-bottom: 80px !important;
}

.no-padding {
    padding: 0 !important;
}

/*---------- margin ----------*/

.margin-none {
    margin: 0 !important;
}

.margin5 {
    margin: 5px !important;
}

.margin {
    margin: 10px !important;
}

.margin15 {
    margin: 15px !important;
}

.margin20 {
    margin: 20px !important;
}

.margin-top5 {
    margin-top: 5px !important;
}

.margin-right5 {
    margin-right: 5px !important;
}

.margin-bottom5 {
    margin-bottom: 5px !important;
}

.margin-left5 {
    margin-left: 5px !important;
}

.margin-top {
    margin-top: 10px !important;
}

.margin-right {
    margin-right: 10px !important;
}

.margin-bottom {
    margin-bottom: 10px !important;
}

.margin-left {
    margin-left: 10px !important;
}

.margin-top15 {
    margin-top: 15px !important;
}

.margin-right15 {
    margin-right: 15px !important;
}

.margin-bottom15 {
    margin-bottom: 15px !important;
}

.margin-left15 {
    margin-left: 15px !important;
}

.margin-top20 {
    margin-top: 20px !important;
}

.margin-right20 {
    margin-right: 20px !important;
}

.margin-bottom20 {
    margin-bottom: 20px !important;
}

.margin-left20 {
    margin-left: 20px !important;
}

.margin-top30 {
    margin-top: 30px !important;
}

.margin-right30 {
    margin-right: 30px !important;
}

.margin-bottom30 {
    margin-bottom: 30px !important;
}

.margin-left40 {
    margin-left: 40px !important;
}

.margin-top40 {
    margin-top: 40px !important;
}

.phone .margin-top40-phone {
    margin-top: 40px !important;
}

.margin-right40 {
    margin-right: 40px !important;
}

.margin-right40-negative {
    margin-right: -40px;
}

.margin-bottom40 {
    margin-bottom: 40px !important;
}

.margin-left40 {
    margin-left: 40px !important;
}

.margin-top50 {
    margin-top: 50px !important;
}

.margin-right50 {
    margin-right: 50px !important;
}

.margin-bottom50 {
    margin-bottom: 50px !important;
}

.margin-left50 {
    margin-left: 50px !important;
}

.margin-right60 {
    margin-right: 60px !important;
}

.margin-top60 {
    margin-top: 60px !important;
}

.margin-top70 {
    margin-top: 70px !important;
}

.margin-right70 {
    margin-right: 70px !important;
}

.margin-bottom80 {
    margin-bottom: 80px !important;
}

.negative-margin {
    margin-top: -50px !important;
}

.margin-x-20 {
    margin: 20px 0;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.margin-top-xl {
    margin-top: 70px;
}

.tablet .margin-top-xl {
    margin-top: 50px;
}

.phone .margin-top-xl {
    margin-top: 40px;
}

.margin-bottom-xl {
    margin-bottom: 70px;
}

.tablet .margin-bottom-xl {
    margin-bottom: 50px;
}

.phone .margin-bottom-xl {
    margin-bottom: 20px;
}

.margin-top-l {
    margin-top: 50px;
}

.tablet .margin-top-l {
    margin-top: 30px;
}

.phone .margin-top-l {
    margin-top: 20px;
}

.margin-top-m {
    margin-top: 30px;
}

.tablet .margin-top-m {
    margin-top: 20px;
}

.phone .margin-top-m {
    margin-top: 10px;
}

.margin-bottom-l {
    margin-bottom: 50px;
}

.tablet .margin-bottom-l {
    margin-bottom: 30px;
}

.phone .margin-bottom-l {
    margin-bottom: 20px;
}

.margin-bottom-m {
    margin-bottom: 30px;
}

.tablet .margin-bottom-m {
    margin-bottom: 20px;
}

.phone .margin-bottom-m {
    margin-bottom: 10px;
}

.PH:empty {
    display: none;
}

.FullWidth {
    width: 100%;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.hide-search .select2-search {
    display: none;
}

.modal-custom .calendar-container {
    position: absolute;
    z-index: 5;
}

.notification {
    display: inline-block;
    height: 6px;
    width: 6px;
    background-color: #de323b;
    border-radius: 50%;
    margin: 0 0 2px 5px;
}

.material-icons.md-14,
.material-icons.mdi-14px {
    font-size: 14px;
}

.md-20 {
    font-size: 20px !important;
}

.md-22 {
    font-size: 22px !important;
}

.md-64 {
    font-size: 64px !important;
}

.line-height {
    line-height: 1;
}

.line-height2 {
    line-height: 2;
}

div.Feedback_AjaxWait {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    z-index: 10000;
    zoom: 1;

    background-color: rgba(0, 0, 0, 0.5) !important; /* Overwrite LondonTheme */
    /*background: url("/FullScreenAjaxWait_Truewind/img/ajwait.png") !important;*/ /* Overwrite Theme */
    padding-left: 0px !important; /* Overwrite LondonTheme */
}

div.Feedback_AjaxWait > img {
    display: block;
    margin-bottom: 5px;
    width: initial;
    text-align: center;

    animation-name: unset;

    background-image: none !important; /* Overwrite LondonTheme */
    margin-right: unset !important; /* Overwrite LondonTheme */
}

/* Loading Block */

.bottom-message {
    margin-top: 120px;
    color: white;
    z-index: 1000;
    font-size: 20px;
    padding: 0 40px;
}

.cube-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 90px;
    height: 120px;
    text-align: center;
    z-index: 1000;
}

.Modal .cube-wrapper {
    width: 120px;
}

.cube-background {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    background-color: #607d8b;
    opacity: 0.9;
    z-index: 1000;
}

.cube-folding {
    width: 80px;
    height: 80px;
    display: inline-block;
    font-size: 0;
}
.cube-folding span {
    position: relative;
    width: 40px;
    height: 40px;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    display: inline-block;
}
.cube-folding span::before {
    content: "";
    background-image: url(/PC_TH/img/logols1.png?27317);
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 40px;
    height: 40px;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -moz-animation: folding 2.5s infinite linear both;
    -webkit-animation: folding 2.5s infinite linear both;
    animation: folding 2.5s infinite linear both;
}

.cube-folding .leaf2 {
    -moz-transform: rotateZ(90deg) scale(1);
    -ms-transform: rotateZ(90deg) scale(1);
    -webkit-transform: rotateZ(90deg) scale(1);
    transform: rotateZ(90deg) scale(1);
}
.cube-folding .leaf2::before {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background-image: url(/PC_TH/img/logols2.png?27317);
    background-size: 100%;
}

.cube-folding .leaf3 {
    -moz-transform: rotateZ(270deg) translateX(13px) scale(1);
    -ms-transform: rotateZ(270deg) translateX(13px) scale(1);
    -webkit-transform: rotateZ(270deg) translateX(13px) scale(1);
    transform: rotateZ(270deg) translateX(13px) scale(1);
}
.cube-folding .leaf3::before {
    -moz-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    background-image: url(/PC_TH/img/logols3.png?27317);
    background-size: 100%;
}
.cube-folding .leaf4 {
    -moz-transform: rotateZ(180deg) translateY(13px) scale(1);
    -ms-transform: rotateZ(180deg) translateY(13px) scale(1);
    -webkit-transform: rotateZ(180deg) translateY(13px) scale(1);
    transform: rotateZ(180deg) translateY(13px) scale(1);
}
.cube-folding .leaf4::before {
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    background-image: url(/PC_TH/img/logols4.png?27317);
    background-size: 100%;
}

@-moz-keyframes folding {
    0%,
    10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}
@-webkit-keyframes folding {
    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}
@keyframes folding {
    0%,
    10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        -ms-transform: perspective(140px) rotateX(-180deg);
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        -ms-transform: perspective(140px) rotateX(0deg);
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        -ms-transform: perspective(140px) rotateY(180deg);
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

/* Loading Block */

.loading-block {
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    /* transition: visibility .3s, opacity .3s; */
}

.show-loading.loading-block {
    visibility: visible;
    opacity: 1;
}

.loading-block .cube-background {
    position: fixed;
}

.loading-message {
    width: 120px;
    margin-top: 10px;
    font-size: 20px;
    color: #fff;
}

.loading-block .cube-wrapper {
    width: 110px;
}

/* Expandable Menu */

.ExpandableMenu i,
.ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
    margin-left: 30px;
}

.ExpandableMenu i.material-icons.md-24 {
    font-size: 20px !important;
    vertical-align: middle;
}

/*.desktop.small .MenuOpen .ExpandableMenu i, 
.desktop.small .MenuOpen .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a,
*/
.tablet .Menu .ExpandableMenu i,
.tablet .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a,
.desktop.small .Menu .ExpandableMenu i,
.desktop.small .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
    margin-left: 20px;
}

.desktop.small .Menu .ExpandableMenu .Menu_DropDownArrow {
    display: none;
}

.ExpandableMenu .Menu_DropDownArrow,
.MenuOpen .ExpandableMenu .Menu_DropDownArrow,
.desktop.small .Menu:hover .ExpandableMenu .Menu_DropDownArrow {
    display: -moz-inline-box;
    display: inline-block;
}

.ExpandableMenu .Menu_DropDownButton.open .Menu_DropDownArrow {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

.Menu_DropDownButton_Open .Menu_SubItemsPlaceholder {
    padding: 4px 7px 4px 14px !important;
}

.ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a,
.desktop.small .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
    margin-left: 14px;
}

.tablet .Menu .ExpandableMenu .Menu_DropDownPanel .Menu_SubItemsPlaceholder a {
    margin-left: 6px;
}

.phone .ExpandableMenu i {
    margin-left: 18px;
}

/**********************************************/
/*TELECONSULTA*/
.phone .TC_container .self-video-canvas {
    right: 15px;
    bottom: 15px;
}

.phone .TC_container {
    max-width: 100%;
    margin-top: 60px;
}

.TC_container .participant-video-canvas,
.TC_container .self-video-canvas {
    background-image: url(/PC_TH/img/TC.png?27317);
    background-position: center;
    background-repeat: no-repeat;
}

.TC_container .participant-video-canvas {
    padding: 0px !important;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    display: flex;
    width: 100%;
    overflow: hidden;
    height: 430px;
}

.TC_container .participant-video-canvas > div > video {
    object-fit: cover !important;
    width: 100%;
    height: 100%;
}

.TC_container.full .FullScreen {
    position: absolute;
    right: -5px !important;
    top: 0;
    zoom: 2;
    padding: 5px !important;
    padding-right: 15px !important;
}

.TC_container .FullScreen {
    z-index: 9999 !important;
}

.TC_container .participant-video-canvas > div > span {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 5px;
    background-color: #df8be6;
    height: 10px;
    width: 10px;
    z-index: 5px;
    display: none;
}

.TC_container .bottom-controls {
    position: absolute;
    bottom: -50px;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    justify-content: flex-end;
}

.phone .TC_container .bottom-controls {
    bottom: auto;
    top: -60px;
    left: auto;
    right: -10px;
}

.TC_container .bottom-controls .icon.mdi:before {
    line-height: 1.4;
}

.phone .TC_container.full .participant-video-canvas > div:nth-of-type(2) {
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    position: absolute;
    z-index: 5;
    height: 100px;
    width: 150px;
    max-width: 150px;
    overflow: hidden;
    left: 15px;
    top: 55px;
    min-width: 150px;
}

.TC_container.full .self-video-canvas {
    width: 350px;
    height: 250px;
    right: 30px;
    bottom: 20px;
}

.tablet .TC_container.full .self-video-canvas {
    width: 200px;
    height: 150px;
}

.phone .TC_container.full .self-video-canvas {
    bottom: 0;
    height: 100px;
    max-width: 150px;
}

.TC_container .participant-video-canvas > div {
    margin: 0px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
}

.TC_container.full .participant-video-canvas > div:nth-of-type(2) {
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 5;
    height: 150px;
    width: 450px;
    overflow: hidden;
    left: 15px;
    top: 20px;
    min-width: 350px;
    width: 350px;
    height: 250px;
}

.tablet .TC_container.full .participant-video-canvas > div:nth-of-type(2) {
    min-width: auto;
    width: 200px;
    height: 150px;
}

.phone .TC_container.full {
    height: calc(100vh - 80px);
    top: -10px;
}

.phone .TC_container.full .participant-video-canvas > div:nth-of-type(2) video {
    object-position: center;
    object-fit: cover;
}

.TC_container .self-video-canvas {
    background-color: #fff;
    background-size: 20%;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 5;
    height: 100px;
    width: 150px;
    overflow: hidden;
}

.TC_container .self-video-canvas > video {
    object-fit: cover !important;
    width: inherit;
}

.TC_container {
    height: 430px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.desktop.hd .TC_container,
.desktop.big .TC_container {
    width: 80%;
}

.TC_container.full {
    min-width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0px;
    z-index: 999;
    transition: all 0.15s linear;
}

.TC_container.full .participant-video-canvas,
.TC_container.full .participant-video-canvas > div {
    padding: 0px;
    margin: 0px;
    height: 100vh;
    max-height: auto;
    top: 0;
    position: absolute;
    border-radius: 0;
    border: none;
}

.TC_container.full .bottom-controls {
    top: 0px;
    right: 100px;
    left: auto;
    bottom: auto;
}

.phone .TC_container.full .bottom-controls {
    top: -3px;
    right: 0;
    left: 6px;
    bottom: auto;
}

.TC_container.full a {
    background: white;
    border-radius: 40px;
    border: 2.5px solid #0096a9;
    padding: 2px 10px;
}

.phone .TC_container.full a {
    border-width: 1px;
    padding: 0px 4px;
}

.phone .TC_container.full a .icon.mdi-24px,
.phone .TC_container.full a .icon.mdi-24px:before {
    font-size: 20px;
}

.TC_container.full a:hover {
    background-color: #0092a6;
    border: 2.5px solid #0092a6;
    color: #fff;
}

.desktop .TC_container.full .bottom-controls {
    top: unset;
    right: 410px;
    bottom: 10px;
    left: unset;
    justify-content: space-between;
    width: calc(100vw - 460px);
}

.tablet .TC_container.full .bottom-controls {
    top: unset;
    bottom: 10px;
    left: 10px;
    justify-content: space-between;
    width: calc(100vw - 260px);
}

.TCContent {
    margin-top: 40px;
    margin-bottom: 80px;
}

.desktop .TC_container.full .participant-video-canvas,
.tablet .TC_container.full .participant-video-canvas,
.phone .TC_container.full .participant-video-canvas {
    width: 100%;
    max-height: none;
}

.TC_container.full .FullScreen {
    position: absolute;
    right: 10px;
    top: 0;
    zoom: 2;
    padding: 5px;
    z-index: 9999;
}

.phone .TC_container.full .FullScreen {
    top: 20px;
}

.TC_container .FullScreen {
    position: absolute;
    right: 5px;
    top: 5px;
}

.mute-btn {
    position: absolute;
    top: 10px;
    left: 0;
}

/*************** TC NEW LAYOUT ****************/

.desktop .TC_container .participant-video-canvas,
.tablet .TC_container .participant-video-canvas {
    width: calc(100% - 245px);
}

.TC_container .self-video-canvas {
    height: 160px;
    width: 240px;
    right: 0;
    bottom: 0;
}

.phone .TC_container .self-video-canvas {
    height: 100px;
    width: 150px;
}

.desktop .TC_container.full .self-video-canvas:hover .icon-container,
.desktop .TC_container .self-video-canvas .icon-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    transition: display 0.3s ease-in-out;
}

.desktop .TC_container .self-video-canvas:hover .icon-container {
    display: flex;
}

.tablet.portrait .TC_container .self-video-canvas .icon-container,
.phone .TC_container .self-video-canvas .icon-container {
    display: none !important ;
}

.desktop .TC_container .self-video-canvas .icon-container span.fa {
    font-size: 40px;
    color: #00838f;
}

.TC_container:not(.full) .self-video-canvas.max-self {
    height: 430px;
}

.TC_container .self-video-canvas video {
    height: auto;
}

.TC_container .self-video-canvas.max-self video {
    height: 100%;
}

.TC_container .self-video-canvas .self-video-canvas {
    border: none;
}

.phone .TC_container .self-video-canvas .self-video-canvas,
.TC_container.full .self-video-canvas .self-video-canvas {
    right: 0;
    bottom: 0;
}

/*************** LAST ADDED ****************/

/*************** Teleconsulta ***************/

.tablet a.Button:hover,
.tablet .Button:hover,
.phone a.Button:hover,
.phone .Button:hover {
    background-color: #e2e2e2;
    text-decoration: none;
}

.Button.ButtonDefault:hover,
.Button.Is_Default:hover {
    background-color: #0092a6;
    border: 2.5px solid #0092a6;
    text-decoration: none;
}

.selftest .Button.Tertiary.active {
    background-color: #0092a6;
    border: 2.5px solid #0092a6;
    color: #fff;
}

.selftest .Button.Secondary.active {
    background-color: #e2e2e2;
    border: 2.5px solid #52646c;
    color: #52646c;
}

/***************************** Glicemias *****************************/

/*************** Card Glicemias ***************/

.card-glicemias {
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #f0f5fc;
    overflow-x: auto;
}

.card-glicemias-header {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-glicemias-header-month {
    margin-bottom: 0;
    width: 180px;
    font-weight: 500;
    text-align: center;
}

.card-glicemias-measure-header {
    padding: 0 25px 0 78px;
    display: flex;
    align-items: center;
}

.card-glicemias-measure-header .col {
    width: 130px;
    padding: 0 2px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
}

.card-glicemias .card-glicemias-body {
    min-width: 615px;
}

.card-glicemias.is-pregnant .card-glicemias-body {
    min-width: 700px;
}

.card-glicemias-measure-list {
    padding-right: 25px;
}

.empty-list .card-glicemias-measure-list {
    padding-right: 0;
}

.card-glicemias .BlankSlate_custom {
    border: none;
}
/***************  Glicemias Day ***************/

.glicemias-day {
    width: 78px;
    padding: 0 25px;
}

.glicemias-day-weekday,
.glicemias-day-number {
    text-align: center;
}

/***************  Glicemias List Item  ***************/

.glicemias-list-item-day,
.glicemias-list-item-columns {
    display: flex;
    align-items: center;
}

.glicemias-list-item-columns {
    width: 100%;
    align-items: stretch;
    border-bottom: 1px solid #cfd8dc;
}

/***************  Glicemias Item  ***************/

.glicemias-item {
    display: flex;
    align-items: baseline;
}

.glicemias-item-value,
.glicemias-item-value .notes-text {
    font-weight: 400;
    color: #273136;
}

.glicemias-item-value {
    position: relative;
    margin-right: 3px;
    font-size: 16px;
}

.glicemias-item-value a {
    color: inherit;
}

.glicemias-item-label {
    position: relative;
    top: 2px;
    margin-right: 5px;
    height: 16px;
    width: 8px;
    border-radius: 8px;
}

.glicemias-item-label.yellow {
    background-color: #f1c40f;
}

.glicemias-item-label.red {
    background-color: #ba5a45;
}

.glicemias-item-label.green {
    background-color: #b9cf84;
}

/***************************** Glicemias New*****************************/

.block-glicemias {
    overflow: visible;
}

.block-glicemias-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
}

.block-glicemias-header-month {
    margin-bottom: 0;
    width: 180px;
    font-weight: 500;
    text-align: center;
}

.block-glicemias-header-columns {
    height: 60px;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #f4f7fc;
}

.block-glicemias-col {
    width: 100%;
    min-width: 132px;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 11px;
    text-align: center;
    color: #52646c;
    font-size: 14px;
    line-height: 20px;
    border-right: 1px solid #e2ebf0;
}

.block-glicemias-col:last-child {
    border-right: 0;
}

.block-glicemias-body {
    margin-top: 24px;
}

.glicemias-list-item {
    margin-bottom: 16px;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #ffffff;
}

.glicemias-list-item-header {
    background-color: #f4f7fc;
    color: #52646c;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 3px 3px 0 0;
    padding: 0 16px;
}
.glicemias-list-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.glicemias-list-item-col {
    min-height: 59px;
    min-width: 132px;
    padding: 0 16px;
    flex: 1;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid #f0f3f4;
}

.glicemias-list-item-col:last-child {
    border-right: 0;
}

.glicemias-list-item-col .ListRecords a {
    height: 31px;
    display: block;
    color: #273136;
}

.glicemias-value {
    font-size: 13px;
    border-radius: 10px;
    padding: 4px 8px;
}

.glicemias-value.yellow {
    background-color: #ffc663;
}

.glicemias-value.red {
    background-color: #ff8f7d;
}

.glicemias-value.green {
    background-color: #c1c000;
}

.glicemia-value-icon:before {
    margin-left: 3px;
}

/*---------- GLicemias MIN WIDTH ----------*/

.block-glicemias-header,
.block-glicemias-header-columns,
.block-glicemias-body,
.glicemias-list-item {
    min-width: auto;
}

.seven-columns .block-glicemias-header,
.seven-columns .block-glicemias-header-columns,
.seven-columns .block-glicemias-body,
.seven-columns .glicemias-list-item {
    min-width: 924px;
}

.six-columns .block-glicemias-header,
.six-columns .block-glicemias-header-columns,
.six-columns .block-glicemias-body,
.six-columns .glicemias-list-item {
    min-width: 792px;
}

@media screen and (max-width: 1200px) {
    .block-glicemias {
        overflow-x: auto;
    }
}

.wave-wrapper {
    display: none !important;
}

.phone .store-links-login,
.tablet .store-links-login {
    text-align: center;
}

.store-links-login {
    margin-top: 50px;
}

.store-links-login img {
    height: 55px;
}

.store-links-login a + a {
    margin-left: 20px;
}

.TC_container .participant-video-canvas {
    background-image: url("/PC_TH/img/backgroundwaiting.png?27317");
}

.TC_container.full .participant-video-canvas {
    background-image: url(/PC_TH/img/TC.png?27317);
}

.TC_container.full .participant-video-canvas .disclaimer-container {
    display: none;
}

.TC_container .participant-video-canvas .disclaimer-container {
    margin: 45% 20% 0 20%;
    margin-top: 165px;
    border: 0;
}

.TC_container .participant-video-canvas .disclaimer-icon,
.TC_container .participant-video-canvas .disclaimer-text {
    color: #fff;
}

.TC_container .participant-video-canvas .pip {
    display: none;
}

/*formatação dos documentos legais*/
.inner-margin-bottom5 div {
    margin-bottom: 10px;
    text-align: justify;
}