@import url("/SilkUIFramework/Theme.Patterns_SilkUI.css?44493");

/* Wodify Admin Theme Base Styles */

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

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600");
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    outline: 0;
}

/* Prevent iOS text size adjust on device orientation change, without disabling user zoom */

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/*------------------------------------*\
    Icons Font
\*------------------------------------*/

/*------------------------------------*\
        Icons - SVG Sprite
\*-------------------------------------*/

/*
 WIP! (will have to change)
 For now its only used in:
 - New User Login Modal
 - (soon, also in) Athlete's Social Insights
*/

.icon {
    height: 1em;
    width: 1em;
}

.icon,
.icon use > svg {
    color: #717171;
}

/* sizes */

.icon--medium {
    font-size: 80px;
}

/*  states/colors */

.icon--active,
.icon--active use > svg {
    color: #468ee5;
}

.icon--success,
.icon--success use > svg {
    color: #00cf6a;
}

.icon--error,
.icon--error use > svg {
    color: #ec5a48;
}

/* versions/responsive */

.iconContainer-overProfilePic {
    position: relative;
}

.iconContainer-overProfilePic > span {
    background-color: #fff;
    border-radius: 10px;
    height: 20px;
    position: absolute;
    right: -11px;
    top: -4px;
    width: 20px;
}

.iconContainer-overProfilePic .icon {
    font-size: 18px;
    margin: 1px;
}

/* Help Icon - retina */

.helpIcon--ri {
    display: inline-block;
    font-size: 14px;
    line-height: 34px;
    margin-left: 3px;
    vertical-align: top;
}

/*------------------------------------*\
        Generic utilities
\*-------------------------------------*/

/* center unknow size Div in page or block (IE9+) */

.centerInHere {
    background-color: #fff;
    display: table;
    height: 100%;
    width: 100%;
}

.centerInHere > div,
.centerInHere > span {
    display: table-cell;
    vertical-align: middle;
}

.centerInHere > div > div,
.centerInHere > div > span,
.centerInHere > span > span,
.centerInHere > span > div {
    margin: 0 auto;
}

.vertical-center {
    align-items: center;
    display: flex !important;
}

.vertical-center--spaceBetween {
    align-items: center;
    display: flex !important;
    justify-content: space-between;
}

/*------------------------------------*\
        $A. Wodify Modal
\*-------------------------------------*/

.ModalBackground {
    background-color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    z-index: 102;
}

.desktop .ModalBackground {
    overflow: auto;
}

.os-internal-Popup.os-internal-ui-dialog iframe {
    border-radius: 0;
}

.ModalContainer {
    border: none;
    border-radius: 0;
    bottom: auto;
    box-shadow: 0 9px 30px 0 rgba(0, 0, 0, 0.5);
    height: auto;
    margin-bottom: 20px;
    max-width: 95%;
    
    min-width: 50%;
    overflow: hidden !important;
    padding: 0 0;
    position: absolute;
    
    text-align: left;
    top: 52px;
    width: auto;
}

.desktop .ModalContainer {
    margin-bottom: 40px;
    top: 100px;
}

.phone .ModalContainer,
.tablet.portrait .ModalContainer {
    width: 95%;
}

.phone .ModalContainer,
.tablet .ModalContainer {
    height: auto;
    max-height: 88%;
}

.phone .ModalContainer.hasScroll,
.tablet .ModalContainer.hasScroll {
    height: 88%;
    padding: 0 0 40px 0;
}

.ModalContainer .ModalHeader {
    left: 0;
    position: relative;
    right: 0;
    z-index: 12;
}

.ModalContainer .ModalHeader .ModalClose .icon {
    color: #ffffff;
    display: inline-block;
    height: 30px;
    margin: -10px 0;
    width: 30px;
}

.ModalContainer .ModalScrollWrapper {
    height: 100%;
    overflow-y: auto !important;
    position: relative;
    width: 100%;
    z-index: 10;
}

.ModalContainer .ModalContent div:nth-child(1) > span > a.Button {
    margin-bottom: 15px;
}

.ModalContainer .ModalContent div .ThemeGrid_Width6 span:first-child > a.Button {
    margin: 10px 0 10px 0;
}

.ModalContainerScrollable .ModalScrollWrapper {
    overflow-y: scroll !important;
}

.ModalFooter .ActionsContainer {
    min-width: 70px;
}

.tablet.portrait .ModalFooter .ActionsContainer,
.phone .ModalFooter .ActionsContainer {
    margin-left: 0 !important;
    width: 100%;
}

.ActionSheetModal .ModalContainer {
    background: transparent;
    border: none;
    border-radius: 0;
    bottom: 20px !important;
    box-shadow: none;
    margin: 0;
    margin-bottom: 0;
    position: fixed;
    top: auto;
    width: 90%;
    z-index: 103;
}
/* Needed for richwidgets autocomplete */
.os-internal-ui-autocomplete {
    z-index: 9999 !important;
}

/* Needed for Mobile modal's scroll */

/*.ModalOpened--phoneOrTablet,
.ModalOpened--phoneOrTablet .Content.ThemeGrid_Wrapper {
    position: fixed;
}*/

.ModalOpened--phoneOrTablet .Content.ThemeGrid_Wrapper {
    height: 100%;
    padding-top: 60px !important;
    top: 0 !important;
    z-index: 99;
}

.ModalOpened--phoneOrTablet .tablet .Content.ThemeGrid_Wrapper {
    padding-top: 140px !important;
}

.ModalOpened--phoneOrTablet .Page.tablet,
.ModalOpened--phoneOrTablet .Page > .Header {
    position: fixed !important;
}

.ModalOpened--phoneOrTablet .ActionSheetButton {
    display: none !important;
}

.ModalOpened--phoneOrTablet .ModalContainer {
    -webkit-overflow-scrolling: auto;
}

.ModalOpened--phoneOrTablet .ModalContainer .ModalScrollWrapper {
    -webkit-overflow-scrolling: touch;
}

.ModalOpened--phoneOrTablet > .fake {
    height: auto;
    position: fixed;
    width: 100%;
}

.phone .ModalContainerScrollable,
.tablet .ModalContainerScrollable {
    overflow-y: auto !important;
}

/* Fix iOS (Mobile App) input hidden chars (possibly caused by "-webkit-overflow-scrolling: touch" on container + element/layer on top of input) */

.ModalOpened--phoneOrTablet .iOS--fixInputHiddenChars {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/* Sort Icons for WODEdit_Component_Edit Pattern*/

.phone .WODComponentSortIcon {
    margin-right: -11px;
}

.phone .WODSectionSortIcon {
    margin-right: 11px;
}

/*WOD_Edit specific styles*/

.WodComponentDropLocation {
    border: 1px dashed #d5d5d5;
    border-radius: 0;
    margin-bottom: 20px;
}

.desktop .WodMainContentMinHeight {
    margin-bottom: 320px;
    min-height: 800px;
}

.wodComponent-description {
    height: 42px !important;
}

/* Action Sheet Button */

.ActionSheetButton {
    bottom: -10px;
    display: none;
    height: 82px;
    position: fixed;
    right: 0;
    width: 72px;
    z-index: 10;
}

.ActionSheetButton a {
    display: inline-block;
    text-align: center;
}

.ActionSheetButton a,
.ActionSheetButton a img {
    border: none;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
}

.ActionSheetModal .ModalContent {
    background: transparent;
    padding: 0;
}

.ActionSheetModal .ActionSheetDescription {
    border-bottom: 1px solid #eee;
    color: #8a8a8a;
    font-size: small;
    padding: 15px 20px;
}

.ActionSheetModal .MenuContainer {
    border-radius: 0;
    text-align: center;
    width: 100%;
}

.ActionSheetModal .MenuContainer .Button.Fill {
    background: #fff !important;
    color: #5d3e92;
}

.ActionSheetModal .MenuContainer .Button.Fill * {
    color: #5d3e92;
}

.ActionSheetModal .MenuContainer a,
.ActionSheetModal .CancelButton a {
    background: #fff;
    border-color: #eee !important;
    border-left: none !important;
    border-radius: 0;
    border-right: none !important;
    border-top: none !important;
    color: #5d3e92;
    display: block;
    font-size: 120% !important;
    height: 100% !important;
    line-height: normal !important;
    margin: 0 0 5px 0;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}

.ActionSheetModal .MenuContainer a.Button.Is_Default {
    background: #ffffff;
    color: #5d3e92;
}

.ActionSheetModal .CancelButton a {
    background: #5d3e92 !important;
    color: #fff !important;
}

.phone.landscape ~ .ActionSheetModal .MenuContainer a,
.tablet.landscape ~ .ActionSheetModal .MenuContainer a {
    font-size: 110% !important;
    padding: 5px 0;
}

.ActionSheetModal .MenuContainer a:hover {
    border-radius: 0;
    font-size: 120%;
    padding: 15px 20px;
}

/*.ActionSheetModal .MenuContainer a:last-child {
    border-bottom: none !important;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}*/

.ModalHeader {
    background-color: #5d3e92;
    color: #fff;
    padding: 10px;
    text-align: left;
}

.ModalTitle {
    max-width: 90%;
}

.ModalTabs {
    float: right;
    white-space: nowrap;
}

.ModalTabs > div {
    min-width: 0;
    padding: 0 10px;
    position: relative;
    white-space: nowrap;
}

.ModalTabs > div a,
.ModalTabs a:hover,
.ModalTabs span {
    color: #fff;
    text-decoration: none;
}

.ModalTabs > div a {
    opacity: 0.8;
}

.ModalTabs a:hover,
.ModalTabs a.Active {
    opacity: 1;
}

.ModalTabs a.Active:after,
.ModalTabs a.Active:before {
    border: solid transparent;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 28px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    width: 0;
}

.ModalTabs a.Active:after {
    border-bottom-color: #5d3e92;
    border-width: 8px;
    margin-left: -8px;
}

.ModalTabs a.Active:before {
    border-bottom-color: #fff;
    border-width: 9px;
    margin-left: -9px;
}

.ModalContent,
.ModalFooter {
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.ModalContent {
    padding-top: 20px;
}

.ModalFooter {
    padding-bottom: 20px;
    padding-top: 10px;
}

/* Modal Phone */

.phone .ModalContainer .ModalHeader {
    position: relative;
}

.phone .ModalTabs {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.phone .ModalTabs > div {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 2px;
    position: relative;
    text-align: center;
    width: 100%;
}

.phone .ModalTabs > div:first-child {
    margin-top: 15px;
}

.phone .ModalTabs > a {
    position: absolute;
    right: 0;
    top: -15px;
}

.phone .ModalTabs a.Active:after,
.phone .ModalTabs a.Active:before {
    display: none;
}

.phone .ModalContainer .ModalScrollWrapper {
    margin-top: 0;
}

/*Class to help the edge case where we have a Columns2 inside a modal and we don't want the margin bottom added by this SilkUI pattern*/

.phone .ModalContent .Col2NoMarginBottom .Columns.MarginBottom.mob_BreakFirst,
.phone .ModalContent .Col2NoMarginBottom .Columns.MarginBottom.mob_BreakLast,
.phone .ModalContent .Col2NoMarginBottom .Columns.MarginBottom.mob_BreakAll,
.phone .ModalContent .Col2NoMarginBottom .Columns.MarginBottom.mob_BreakMiddle {
    margin-bottom: 0;
}

/*------------------------------------*\
        $B. Wodify Split Buttons
\*-------------------------------------*/

.SplitButton,
.SplitButton-tooltipDropDown {
    position: relative;
}

.SplitButton .ButtonDropdown_text,
.SplitButton-tooltipDropDown .ButtonDropdown_text {
    padding-right: 8px;
}

.SplitButton .SplitButton_icon_Blue > .ri,
.SplitButton .SplitButton_icon_Red > .ri,
.SplitButton .SplitButton_icon_Green > .ri,
.SplitButton .SplitButton_icon_Gray > .ri,
.SplitButton-tooltipDropDown .SplitButton_icon_Blue > .ri,
.SplitButton-tooltipDropDown .SplitButton_icon_Red > .ri,
.SplitButton-tooltipDropDown .SplitButton_icon_Green > .ri,
.SplitButton-tooltipDropDown .SplitButton_icon_Gray > .ri {
    padding-left: 8px;
    padding-top: 8px;
}

.SplitButton .SplitButton_icon_Blue,
.SplitButton .SplitButton_icon_Red,
.SplitButton .SplitButton_icon_Green,
.SplitButton .SplitButton_icon_Gray,
.SplitButton-tooltipDropDown .SplitButton_icon_Blue,
.SplitButton-tooltipDropDown .SplitButton_icon_Red,
.SplitButton-tooltipDropDown .SplitButton_icon_Green,
.SplitButton-tooltipDropDown .SplitButton_icon_Gray {
    height: 100%;
}

.phone .SplitButton.FullWidthOnMobile .SplitButton_icon_Blue,
.phone .SplitButton.FullWidthOnMobile .SplitButton_icon_Red,
.phone .SplitButton.FullWidthOnMobile .SplitButton_icon_Green,
.phone .SplitButton.FullWidthOnMobile .SplitButton_icon_Gray {
    position: absolute;
    right: 13px;
    top: 0;
}

.Button.NoBorder .SplitButton_icon_Blue,
.Button.NoBorder .SplitButton_icon_Red,
.Button.NoBorder .SplitButton_icon_Green,
.Button.NoBorder .SplitButton_icon_Gray {
    border-left: none !important;
}

/* splitButton on last table row*/

.TableRecords tr:last-child .SplitButton.open .Button {
    /*margin-bottom: 30px;*/
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.TableRecords tr:last-child .SplitButton.open .DropdownMenu {
    top: 36px;
}

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

.DropdownMenu.arrangeVertical {
    bottom: initial;
    top: auto;
}

/*------------------------------------*\
        $C. Wodify Tags
\*-------------------------------------*/

.TagsContainer {
    margin-top: 10px;
}

.TagsContainer,
.TagsContainer select,
.TagsContainer .Tag {
    border-radius: 0;
}

.TagsContainer select {
    height: 28px;
}

.Tag {
    background-color: #8890a4 !important;
    border-radius: 0;
    color: #fff !important;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    height: 32px;
    line-height: 32px;
    margin: 0 5px 0 0;
    padding: 0 35px 0 10px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.TagClose {
    border: none;
    height: 32px;
    line-height: 35px;
    line-height: 34px;
    margin: 0 0 0 10px;
    position: absolute;
}

.TagClose a,
.TagClose span {
    color: #fff;
}

.tag {
    border: 1px solid #94909c;
    border-radius: 2px;
    color: #4d475b;
    cursor: default;
    display: inline-block;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    height: auto;
    line-height: 14px;
    min-width: auto;
    padding: 0 6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag.tag-primary {
    border: 1px solid #833adf;
    color: #833adf;
}

/* badges for environments */

.badge.background-env-dev {
    background-color: #2DB366;
    border-width: 0;
    color: white;
}

.badge.background-env-tst {
    background-color: #FCB425;
    border-width: 0;
    color: white;
}

.badge.background-env-stg {
    background-color: #62CEFB;
    border-width: 0;
    color: white;
}
.badge.background-env-prd {
    background-color: #833ADF;
    border-width: 0;
    color: white;
}

.badge.background-env-prd-impersonate {
    background-color: #EF4343;
    border-width: 0;
    color: white;
}

.badge.background-secondary {
    background-color: #F22C7C;
    border-width: 0;
    color: white;
    margin-left: 10px;
    line-height: 18px;
}

/*------------------------------------*\
        $D. Wodify Tags List
\*-------------------------------------*/

.TagList ul {
    background-color: #fff;
    border: 1px solid #aaa;
    cursor: text;
    overflow: hidden;
    padding: 3px 0 3px 5px;
}

.TagList li {
    cursor: default;
    float: left;
}

.TagList input[type="text"] {
    border: 0 !important;
}

.SelectionTagList ul {
    background: none;
    border: none;
}

/*------------------------------------*\
        $E. Wodify Calendar
\*-------------------------------------*/

.calendarPattern thead .button {
    color: #9b9b9b;
}

.calendarPattern tr.daynames {
    border-top: 2px solid #9b9b9b;
}

/*fix height (bottom border down appear) */

.CalendarContent.wodCalendar .fc-basic-view .fc-body .fc-row {
    min-height: 5em;
}

/*------------------------------------*\
        $F. Wodify Back Button
\*-------------------------------------*/

.Back {
    font-size: 16px;
    left: 0px;
    line-height: 34px;
    position: fixed;
    text-align: left;
    top: 0px;
    z-index: 999;
}

.Back a {
    color: #333 !important;
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    width: 60px;
}

/* NunoC, 2017-01-20: Because of WDFY-2437 */

.phone .Back a,
.tablet .Back a {
    padding: 0 5px 0 10px;
    width: 40px;
}

/*------------------------------------*\
    $G. Retina Icon Sizes & Default Styles
\*-------------------------------------*/

body .ri:after {
    content: "";
    /* revert offline font: fallback */
}

.ri {
    display: inline-block;
    font: normal normal normal 14px/1 "retinafont";
    font-size: inherit;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

/* makes the font 33% larger relative to the icon container */

.ri-lg {
    font-size: 1.33333333em;
    line-height: 1em;
    vertical-align: -15%;
}

.ri-2x {
    font-size: 2em;
}

.ri-3x {
    font-size: 3em;
}

.ri-4x {
    font-size: 4em;
}

.ri-5x {
    font-size: 5em;
}

.ri-fw {
    text-align: center;
    width: 1.28571429em;
}

.ri-small {
    font-size: 0.9em;
}

/*------------------------------------*\
        $H. Patterns
\*-------------------------------------*/

/* NunoC, 2016-12-31:
   NelsonR, acho que o default chip style nao devia ter tantas especificidades do Segments,
   eg: bgcolor, shadow, icon size e color, etc;
   Na minha opiniao o chip p o people contacts é q devia ser o default (é o mais "neutro"),
   mas depois falamos sobre a melhor forma de fazermos. */

/* default chip style (eg: segments) */

.chip {
    background-color: #f5f5f5;
    box-shadow: 0 1px 1px 0 #d8d5d5;
    box-sizing: border-box;
    color: #4a4a4a;
    display: inline-block;
    font-size: 13px;
    height: 32px;
    line-height: 24px;
    margin-right: 6px;
    overflow: hidden;
    padding: 5px 8px;
    position: relative;
    width: auto;
}

.phone .chip {
    margin-bottom: 5px;
    width: 100%;
}

.chip .chip-left,
.chip .chip-text,
.chip .chip-right {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

.phone .chip .chip-right {
    position: absolute;
    right: 10px;
}

.chip .icon {
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    font-size: 24px;
    line-height: 24px;
    margin: -1px -4px;
    transition: all 0.15s;
}

.chip .segments-nrPeople-nr {
    padding: 0 4px;
}

.phone .chip .Float_right .segments-nrPeople-nr {
    margin: 0 5px 0 10px;
}

/* chip style A (eg: people/contacts) */

.chip--styleA {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: none;
    font-size: 14px;
    line-height: 18px;
}

.chip--styleA .icon {
    color: #717171;
    font-size: 20px;
    line-height: 20px;
}

.chip--styleA .chip-left {
    min-width: 24px;
    padding: 1px 8px 0 0;
    text-align: center;
}

.chip--styleA .chip-left .icon {
    color: #717171;
    cursor: default;
    font-size: 14px;
    line-height: 18px;
}

.EditInline_Wrapper,
.Edit2Column_Wrapper.BorderAndPadding {
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 15px;
    position: relative;
}

/*.EditInline_Wrapper > .ItemsWrapper {
    padding: 0 15px 15px 15px;
}*/

.EditInline_Wrapper .FirstItemContainer .Heading2 {
    font-weight: 500;
}

.phone .EditInline_Wrapper {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding: 0 0 20px 0;
}

.EditInline_Wrapper.NoBorderOrPadding {
    border: none;
    border-radius: 0;
    padding: 0;
}

.EditInline_Wrapper.Selectable {
    border: none;
    -webkit-box-shadow: 0 0 0 1px #d0d0d0;
    -moz-box-shadow: 0 0 0 1px #d0d0d0;
    box-shadow: 0 0 0 1px #d0d0d0;
}

.EditInline_Wrapper.Selectable:hover {
    -webkit-box-shadow: 0 0 0 2px #5d3e92;
    -moz-box-shadow: 0 0 0 2px #5d3e92;
    box-shadow: 0 0 0 2px #5d3e92;
}

.EditInline_Wrapper.Selectable .SelectCorner {
    border-color: transparent #5d3e92 transparent transparent;
    border-style: solid;
    border-width: 0 50px 50px 0;
    display: none;
    height: 45px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    width: 45px;
}

.EditInline_Wrapper.Selectable.Selected,
.EditInline_Wrapper.Selectable.Selected:hover {
    -webkit-box-shadow: 0 0 0 2px #5aac6b;
    -moz-box-shadow: 0 0 0 2px #5aac6b;
    box-shadow: 0 0 0 2px #5aac6b;
}

.EditInline_Wrapper.Selectable.Selected .SelectCorner,
.EditInline_Wrapper.Selectable.Selected:hover .SelectCorner {
    border-color: transparent #5aac6b transparent transparent;
    display: block;
}

.EditInline_Wrapper.Selectable:hover .SelectCorner {
    display: block;
}

.EditInline_Wrapper.Selectable .SelectCorner .fa {
    color: #fff;
    margin-left: 22px;
    margin-top: 8px;
}

.tablet.portrait .EditInline_Wrapper.Selectable .FirstItemContainer .Heading4 {
    font-size: 14px;
}

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

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

.VAlignMiddleInlineBlock,
.EditInline_Wrapper .Item,
.UnderlineInput .Item {
    display: inline-block;
    vertical-align: middle !important;
}

.EditInline_Wrapper .Item.MarginRight,
.UnderlineInput .Item.MarginRight {
    margin-right: 15px;
}

.EditInline_Wrapper .SubHeading,
.Edit2Column_Wrapper .SubHeading,
.EditInline_Wrapper .SubHeading a,
.Edit2Column_Wrapper .SubHeading a,
.EditInline_Wrapper .DescriptionText,
.EditInline_Wrapper .DescriptionText a,
.UnderlineInput .DescriptionText,
.UnderlineInput .DescriptionText a {
    font-size: 14px;
}

.EditInline_Wrapper .DescriptionText,
.EditInline_Wrapper .DescriptionText a,
.UnderlineInput .DescriptionText,
.UnderlineInput .DescriptionText a {
    font-size: 12px;
}

.EditInline_Wrapper .selectize-control {
    text-align: left;
}

/* Two-Column Inner Block and UnderlineInput Table Display Styles */

.TwoColumn_InnerWrapper {
    border: solid 1px #e0e0e0;
    border-radius: 0;
}

.TwoColumn_InnerWrapper.NoBorder {
    border: none;
}

.UnderlineInput .TableContainer,
.TwoColumn_InnerWrapper .TableContainer {
    display: table;
    height: 100%;
    width: 100%;
}

.UnderlineInput .TableContainer .TableCellContainer,
.TwoColumn_InnerWrapper .TableContainer .TableCellContainer {
    display: table-cell;
}

.TableCellContainer.TwoColumnBlank .TableContainer .TableCellContainer {
    padding: 0;
}

.TableCellContainer.TwoColumnBlank .UnderlineInput:last-child {
    margin-bottom: 0;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer {
    padding: 20px;
    vertical-align: middle;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.LessPadding {
    color: #696969;
    padding: 10px;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.LessPadding .ri {
    color: #696969;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.LessPadding:nth-child(2) {
    padding-left: 0;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.NoPadding {
    padding: 0;
}

.TableContainer .TableCellContainer.SectionBlock {
    background-color: #f8f8f8;
}

.UnderlineInput .TableContainer .TableCellContainer.FirstCell,
.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.FirstCell {
    vertical-align: middle;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.FirstCell {
    background-color: #eee;
    border-right: 1px solid #d0d0d0;
    padding: 0;
    vertical-align: middle;
    width: 105px;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.FirstCell > .ri-fw {
    font-size: 4em;
}

.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer.FirstCell > .ri-fw {
    font-size: 3em;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer .InputLabel {
    color: #8e8e8e;
    font-size: 13px;
    font-weight: 500;
    margin-top: 5px;
    text-transform: uppercase;
}

.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer .InputLabel {
    color: #8e8e8e;
    font-size: 11px;
    font-weight: 500;
    margin-top: 5px;
    text-transform: uppercase;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer > div table a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer > div table span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
}

.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer > div table a {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.46;
}

.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer > div table span {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.46;
}

/* Specific Colors for First Cell */

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.Red {
    background-color: #ee5942;
    color: #fff;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.Green {
    background-color: #5aac6b;
    color: #fff;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.Blue {
    background-color: #4a90e2;
    color: #fff;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.Red .ri,
.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.Green .ri,
.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.Blue .ri {
    color: #fff;
}

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.SecondCell {
    background-color: #f7f7f7;
}

.phone .UnderlineInput .TableContainer,
.phone .TwoColumn_InnerWrapper .TableContainer {
    display: block;
}

.phone .UnderlineInput .TableContainer .TableCellContainer,
.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer {
    display: block;
    margin-bottom: 0;
    width: 100% !important;
}

.phone .TwoColumn_OuterWrapper .TableContainer .TableCellContainer {
    display: table-cell;
    width: auto !important;
}

.phone .WODComponentEditForm .TableContainer .TableCellContainer {
    margin-bottom: 0;
}

.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer.FirstCell {
    border-right: none;
    height: 80px;
    padding: 20px;
}

.phone .UnderlineInput .TableContainer .TableCellContainer:last-child,
.phone .TwoColumn_InnerWrapper .TableContainer .TableCellContainer:last-child {
    margin-bottom: 0;
}

/* Two Column Outer Wrapper */

.TwoColumn_OuterWrapper {
    background: transparent;
    border: 1px solid #e8e8e8;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.TwoColumn_OuterWrapper.Blue {
    border: 1px solid #609ee6;
}

.TwoColumn_OuterWrapper.Green {
    border: 1px solid #5aac6b;
}

.TwoColumn_OuterWrapper.Red {
    border: 1px solid #ec5a48;
}

.TwoColumn_OuterWrapper .TwoColumn_InnerWrapper.UnderlineInput {
    margin-bottom: 0;
}

.TwoColumn_OuterWrapper .ColumnContent {
    padding: 15px;
}

/* Two Column Inner Block Header */

.TwoColumn_InnerWrapper .TableContainer .TableCellContainer.FirstCell.IconNoBorder {
    border-right: none;
}

.TwoColumn_InnerWrapper .TableContainer.InnerBlockHeader {
    background-color: #eee;
}

.TwoColumn_InnerWrapper.NoBorder .TableContainer.InnerBlockHeader {
    background-color: #eee;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Desktop Styling */

.desktop .EditInline_Wrapper .Item.FirstCol .FirstItemContainer,
.desktop .UnderlineInput .Item.FirstCol .FirstItemContainer {
    max-width: 100%;
    white-space: nowrap;
}

.desktop .EditInline_Wrapper .Item.FirstCol .FirstItemContainer .Item,
.desktop .UnderlineInput .Item.FirstCol .FirstItemContainer .Item {
    white-space: normal;
}

/* Phone and Tablet Styling */

.tablet .FullWidthOnTablet {
    display: block;
    width: 100%;
}

.phone .FullWidthOnMobileAndTabletPortrait,
.tablet.portrait .FullWidthOnMobileAndTabletPortrait {
    display: block;
    margin-left: 0;
    width: 100%;
}

.phone .EditInline_Wrapper .Item.FirstCol,
.tablet .EditInline_Wrapper .Item.FirstCol,
.phone .UnderlineInput .Item.FirstCol,
.tablet .UnderlineInput .Item.FirstCol {
    white-space: nowrap;
}

.phone .EditInline_Wrapper .Item.FirstCol .Item,
.tablet .EditInline_Wrapper .Item.FirstCol .Item,
.phone .UnderlineInput .Item.FirstCol .Item,
.tablet .UnderlineInput .Item.FirstCol .Item {
    white-space: normal;
}

.phone .EditInline_Wrapper .Item.FirstCol .Item:last-child,
.tablet .EditInline_Wrapper .Item.FirstCol .Item:last-child,
.phone .UnderlineInput .Item.FirstCol .Item:last-child,
.tablet .UnderlineInput .Item.FirstCol .Item:last-child {
    padding-right: 70px;
    /* Need Padding for when last child of more than one */
}

.phone .EditInline_Wrapper .Item.FirstCol .Item:only-child,
.tablet .EditInline_Wrapper .Item.FirstCol .Item:only-child,
.phone .UnderlineInput .Item.FirstCol .Item:only-child,
.tablet .UnderlineInput .Item.FirstCol .Item:only-child {
    padding-right: 0;
    /* No padding when only child */
}

.phone .EditInline_Wrapper .Item.SecondCol,
.tablet .EditInline_Wrapper .Item.SecondCol {
    margin-top: 10px;
}

.phone .EditInline_Wrapper .HeadingTextAndBadge,
.tablet .EditInline_Wrapper .HeadingTextAndBadge,
.phone .UnderlineInput .HeadingTextAndBadge,
.tablet .UnderlineInput .HeadingTextAndBadge {
    margin-bottom: 8px;
}

.phone .EditInline_Wrapper .Item.MarginRight .tablet .EditInline_Wrapper .Item.MarginRight {
    text-align: left;
    width: 60px;
}

.phone .EditInline_Wrapper .ExpandableContent,
.tablet .EditInline_Wrapper .ExpandableContent {
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.EditInlineImage {
    border: none;
    border-radius: 0;
    max-height: 45px;
    max-width: 45px;
}

.EditInline_Wrapper,
.Edit2Column_Wrapper,
.Section_Wrapper {
    margin-bottom: 20px;
}

.PageTitle .Section_Wrapper {
    margin-bottom: 0;
}

.TwoColumn_InnerWrapper .EditInline_Wrapper:last-child,
.TwoColumn_InnerWrapper .Edit2Column_Wrapper:last-child,
.TwoColumn_InnerWrapper .Section_Wrapper:last-child {
    margin-bottom: 0;
}

.Section_Wrapper {
    margin-top: 30px;
}

.MainContent .Section_Wrapper:first-child {
    margin-top: 0;
}

.EditInline_Wrapper .Item .TableVerticalAlign .Cell1,
.EditInline_Wrapper .Item .TableVerticalAlign .Cell2 {
    padding: 0;
}

.EditInline_Wrapper .ExpandableContent {
    -webkit-box-shadow: inset 0 15px 30px -15px rgba(0, 0, 0, 0.08), inset 0 -15px 30px -13px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 15px 30px -15px rgba(0, 0, 0, 0.08), inset 0 -15px 30px -13px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 15px 30px -15px rgba(0, 0, 0, 0.08), inset 0 -15px 30px -13px rgba(0, 0, 0, 0.08);
    display: none;
    margin: 15px -15px 0;
    padding: 25px 15px 10px;
}

.phone .EditInline_Wrapper .ExpandableContent,
.tablet .EditInline_Wrapper .ExpandableContent {
    margin: 15px 15px 0;
}

.EditInline_Wrapper .CloseButton,
.EditInline_Wrapper .DisableButton {
    display: none;
}

.EditInline_Wrapper .CloseButton {
    margin-right: 10px;
}

.UnderlineInput {
    margin-bottom: 15px;
}

div .UnderlineInput:last-child,
.InputNoBottomMargin .UnderlineInput,
.ProfilePersonalInfo .UnderlineInput {
    margin-bottom: 0;
}

.selectize-input {
    border-radius: 0;
}

/*.UnderlineInput input[type='text'],
.UnderlineInput input[type='number'],
.UnderlineInput input[type='email'],
.UnderlineInput input[type='password'],
.UnderlineInput input[type='tel'],
.UnderlineInput input[type='date'],
.UnderlineInput select,
.UnderlineInput .ms-choice,
.selectize-input input[type='text'] {
    font-size: 14px;
    height: 32px;
    margin: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    -webkit-box-shadow: inset 0 -4px 0 -3px #d3dbe2 !important;
       -moz-box-shadow: inset 0 -4px 0 -3px #d3dbe2 !important;
            box-shadow: inset 0 -4px 0 -3px #d3dbe2 !important;

    -webkit-appearance: none;
}*/

.selectize-control.single .selectize-input input {
    border: none !important;
    box-shadow: none !important;
    width: 96% !important;
}

.UnderlineInput .ms-choice {
    background-color: transparent !important;
    cursor: auto !important;
}

.UnderlineInput .ms-choice > span {
    padding-left: 0;
}

/* Left Label Input */

.UnderlineInput .UnderlineInputPlaceholder.LeftLabelInputPlaceholder {
    display: inline-block;
    margin-left: 10px;
    width: auto;
}

/* Currency Input Placeholders */

.UnderlineInput .UnderlineInputPlaceholder.Currency,
.UnderlineInput .UnderlineInputPlaceholder.CreditCard {
    position: relative;
}

.UnderlineInput .UnderlineInputPlaceholder.Currency input[type="text"],
.UnderlineInput .UnderlineInputPlaceholder.Currency input[type="number"] {
    padding-left: 22px;
}

.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft2Chars input[type="text"],
.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft2Chars input[type="number"] {
    padding-left: 21px;
}

.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft3Chars input[type="text"],
.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft3Chars input[type="number"] {
    padding-left: 32px;
}

.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft4Chars input[type="text"],
.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft4Chars input[type="number"] {
    padding-left: 40px;
}

.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft5Chars input[type="text"],
.UnderlineInput .UnderlineInputPlaceholder.Currency--paddLeft5Chars input[type="number"] {
    padding-left: 47px;
}

.UnderlineInput .UnderlineInputPlaceholder.CreditCard input[type="text"],
.UnderlineInput .UnderlineInputPlaceholder.CreditCard input[type="number"] {
    padding-right: 30px;
}

.UnderlineInput .UnderlineInputPlaceholder.Currency:before {
    content: attr(currency-symbol);
    display: inline-block;
    font-size: 14px;
    height: 32px;
    left: 8px;
    line-height: 32px;
    position: absolute;
    top: 0;
    width: auto;
    /*font-weight: 700;*/
}

.UnderlineInput .UnderlineInputPlaceholder.CreditCard .CreditCardType {
    font-size: 12px;
    line-height: 22px;
    position: absolute;
    right: 5px;
    top: 4px;
}

img.SmallPaymentMethodIcon,
.UnderlineInput .UnderlineInputPlaceholder.CreditCard .CreditCardType img {
    max-height: 24px;
    max-width: 46px;
    vertical-align: bottom;
}

img.ExtraSmallPaymentMethodIcon {
    max-height: 20px;
    max-width: 34px;
}

.CreditCardTypeInvalid {
    display: none;
}

/*.UnderlineInput .selectize-input {
    line-height: 46px;
    height: 46px;
    padding: 0 12px;
    border: 0;
    box-shadow: none;
}*/

/*.UnderlineInput input[type='text']:enabled:focus,
.UnderlineInput input[type='number']:enabled:focus,
.UnderlineInput input[type='email']:enabled:focus,
.UnderlineInput input[type='password']:enabled:focus,
.UnderlineInput input[type='tel']:enabled:focus,
.UnderlineInput input[type='date']:enabled:focus,
.UnderlineInput select:enabled:focus,
.UnderlineInput .ms-parent:focus,
.UnderlineInput .UnderlineInputPlaceholder.Currency.Focus:before,
.UnderlineInput .selectize-input input:focus,
.selectize-input input[type='text']:focus {
    border: none !important;
    -webkit-box-shadow: inset 0 -5px 0 -3px #5d3e92 !important;
       -moz-box-shadow: inset 0 -5px 0 -3px #5d3e92 !important;
            box-shadow: inset 0 -5px 0 -3px #5d3e92 !important;
}

.UnderlineInput input[type='text'].Invalid,
.UnderlineInput input[type='number'].Invalid,
.UnderlineInput input[type='email'].Invalid,
.UnderlineInput input[type='password'].Invalid,
.UnderlineInput input[type='tel'].Invalid,
.UnderlineInput input[type='date'].Invalid,
.UnderlineInput select.Invalid,
.UnderlineInput input[type='text'].Not_Valid,
.UnderlineInput input[type='number'].Not_Valid,
.UnderlineInput input[type='email'].Not_Valid,
.UnderlineInput input[type='password'].Not_Valid,
.UnderlineInput input[type='tel'].Not_Valid,
.UnderlineInput input[type='date'].Not_Valid,
.UnderlineInput select.Not_Valid {
    padding-left: 0;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: inset 0 -4px 0 -3px #ec5a48 !important;
       -moz-box-shadow: inset 0 -4px 0 -3px #ec5a48 !important;
            box-shadow: inset 0 -4px 0 -3px #ec5a48 !important;
}

.UnderlineInput input[type='text'].Invalid:focus,
.UnderlineInput input[type='number'].Invalid:focus,
.UnderlineInput input[type='email'].Invalid:focus,
.UnderlineInput input[type='password'].Invalid:focus,
.UnderlineInput input[type='tel'].Invalid:focus,
.UnderlineInput input[type='date'].Invalid:focus,
.UnderlineInput select.Invalid:focus {
    border: none;
    -webkit-box-shadow: inset 0 -5px 0 -3px #5d3e92 !important;
       -moz-box-shadow: inset 0 -5px 0 -3px #5d3e92 !important;
            box-shadow: inset 0 -5px 0 -3px #5d3e92 !important;
}*/

/*.UnderlineInput .selectize-input {
    line-height: 32px;
    height: 100%;
    margin-bottom: 0;
    padding: 5px!important;
    padding-left: 0;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: inset 0 -4px 0 -3px #d3dbe2 !important;
       -moz-box-shadow: inset 0 -4px 0 -3px #d3dbe2 !important;
            box-shadow: inset 0 -4px 0 -3px #d3dbe2 !important;
}*/

.UnderlineInput .selectize-control.multi .selectize-input [data-value] {
    border-radius: 0;
    margin-top: 0;
}

.UnderlineInput .InputLabel.Focus,
.UnderlineInput .InputLabel.Focus label {
    color: #5d3e92 !important;
}

.UnderlineInput .LeftLabelPlaceholder {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.UnderlineInput .LeftLabelPlaceholder label {
    color: #8e8e8e;
}

/* Input Placeholder Styling */

::-webkit-input-placeholder {
    font-style: italic;
}

:-moz-placeholder {
    font-style: italic;
}

::-moz-placeholder {
    font-style: italic;
}

:-ms-input-placeholder {
    font-style: italic;
}

/* Text Alignment */

.CenterAligned,
.UnderlineInput .CenterAligned input[type="text"],
.UnderlineInput .CenterAligned input[type="number"],
.UnderlineInput .CenterAligned select,
.UnderlineInput .CenterAligned .UnderlineInputPlaceholder .PH div {
    text-align: center;
}

/* Hide Spin Wheel for Center Aligned Number Inputs */

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

.RightAligned,
.UnderlineInput .RightAligned input[type="text"],
.UnderlineInput .RightAligned input[type="number"],
.UnderlineInput .RightAligned select,
.UnderlineInput .RightAligned .UnderlineInputPlaceholder .PH div {
    text-align: right;
}

.UnderlineInput .LeftLabel {
    padding-right: 10px;
    vertical-align: middle;
    white-space: nowrap;
    width: 100px;
}

.UnderlineInput .DescriptionText {
    font-size: 12px;
}

.BulkSelectTable .FirstColumn .FirstColumnCheckbox {
    display: table-cell;
}

.EditImage_Wrapper .ImageContainer {
    border: 3px dashed #d0d0d0;
    border-radius: 23px;
    color: #d0d0d0;
    display: table-cell;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
}

.EditImage_Wrapper .ImageContainer .ImagePlaceholder {
    max-width: 100%;
    padding: 3px;
}

.EditImage_Wrapper .ImageContainer .ImagePlaceholder img {
    border-radius: 15px;
    max-height: 100%;
    max-width: 100%;
}

.phone .EditImage_Description {
    display: block;
    margin-top: 15px;
    width: 100%;
}

.EditImage_Wrapper .NoImageText,
.EditImage_Wrapper .HiddenButton {
    display: none;
}

.EditEmail_Wrapper .PreviewMode {
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.EditEmail_Wrapper .PreviewMode .EditEmailHeader {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.EditEmail_Wrapper .PreviewMode .EditEmailHeader .Circle {
    behavior: url(PIE.htc);
    border-radius: 50%;
    height: 12px;
    margin-top: -3px;
    vertical-align: middle;
    width: 12px;
    /* remove if you don't care about IE8 */
}

.EditEmail_Wrapper .PreviewMode .EditEmailHeader .Circle.Red {
    background: #ec5a48;
}

.EditEmail_Wrapper .PreviewMode .EditEmailHeader .Circle.Yellow {
    background: #f1c40f;
}

.EditEmail_Wrapper .PreviewMode .EditEmailHeader .Circle.Green {
    background: #5aac6b;
}

.EditEmail_Wrapper .PreviewMode .EditEmailHeader .SendTestContainer {
    float: right;
}

.EditEmail_Wrapper .PreviewMode .HeaderRow {
    border-bottom: 1px solid #eee;
    margin: 0;
    padding: 10px;
}

.EditEmail_Wrapper .PreviewMode .HeaderRow.BottomRow {
    border-bottom: 2px solid #ddd;
}

.EditEmail_Wrapper .PreviewMode .HeaderRow .Subject {
    font-weight: 600;
}

.EditEmail_Wrapper .PreviewMode .PreviewText {
    background: #f5f5f5;
    max-height: 600px;
    overflow-y: auto;
    padding: 20px;
}

.EnableLarge_Wrapper .ImageIconContainer img {
    max-height: 120px;
    max-width: 85%;
}

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

/* Class List Days of Week */

.ClassList_DaysOfWeek {
    border-radius: 20px;
    color: white;
    font-size: 80%;
    padding: 2px 15px;
}

/* Popup */

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    border-radius: 0;
}

/* Popup Close title */

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: #5d3e92;
    border-bottom: none;
    border-radius: 0;
    height: 40px;
    overflow: hidden;
    position: relative;
}

/* Popup Close Button - Top Right */

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title,
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover,
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover {
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20fill%3D%22%23717171%22%3E%3Cpolygon%20transform%3D%22translate(32%2032)rotate(-45)translate(-32%20-32)%22%20points%3D%2234%2016%2030%2016%2030%2030%2016%2030%2016%2034%2030%2034%2030%2048%2034%2048%2034%2034%2048%2034%2048%2030%2034%2030%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        center center no-repeat;
    transform: rotate(0deg);
}

@media only screen and (max-width: 568px) {
    .os-internal-Popup.os-internal-ui-dialog {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        transform: translate(0, 0) !important;
        width: auto !important;
    }
    #popup_arrow {
        display: none !important;
    }
    .os-internal-Popup.os-internal-ui-dialog iframe {
        width: 100% !important;
    }
}

/* Google Address Input */

.GoogleAddressInput {
    position: relative;
}

.GoogleAddressInput .EditAddressIcon {
    position: absolute;
    right: 10px;
    top: 8px;
}

.GoogleAddressInput input[type="text"] {
    padding-right: 25px;
}

/* Google Autocomplete */

.GoogleAutoCompleteAddress img {
    display: none;
}

/* Contracts */

.PaymentPlanTermsContainer {
    background-image: url(http://res.cloudinary.com/wodify/image/upload/v1441992731/ExampleContractBackgroundImage_nlw0bq.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 20px;
}

/* Favorite Styles */

a.Favorite,
a.NotFavorite {
    font-family: FontAwesome;
    font-size: 20px !important;
    margin-right: 5px;
    text-decoration: none !important;
}

a.Favorite {
    color: #f5d500 !important;
}

a.NotFavorite {
    color: #ccc !important;
}

/* Fourth Level Navigation */

.FourthLevelNav {
    /*height: 42px;
     background-color: #f7f7f7; */
}

.phone .FourthLevelNav {
    height: auto;
}

.FourthLevelNav .FourthLevelNavMenuItem {
    display: inline-block;
}

.phone .FourthLevelNav .FourthLevelNavMenuItem {
    float: none;
    width: 100%;
}

.FourthLevelNav .FourthLevelNavMenuItem a {
    /*font-size: .9em;*/
    display: block;
    padding: 12px 20px;
    text-decoration: none;
}

.phone .FourthLevelNav .FourthLevelNavMenuItem a {
    padding: 15px 20px;
    text-align: center;
}

.FourthLevelNav .FourthLevelNavMenuItem a.Active {
    /* border-right: 1px solid #e5e5e5; */
    /* border-left: 1px solid #e5e5e5; */
    background-color: #fff;
    border-bottom: 2px solid #5d3e92;
    color: #141414;
    text-decoration: none;
}

.FourthLevelNav .FourthLevelNavMenuItem a:hover {
    background-color: #fff;
}

.NoMarginBottomColumns .Columns .Column {
    margin-bottom: 0 !important;
}

.AnyAllSelectContainer {
    display: inline;
    margin: 0;
    width: 160px;
}

.AnyAllSelectContainer > div {
    margin: 0 20px 0 5px;
}

/*------------------------------------*\
        $Z. General
\*-------------------------------------*/

.SortDragAndDropIcon {
    cursor: -webkit-grab;
    padding: 6px;
}

.tooltip_style .tooltipster-content {
  background-color: #ffffff;
  border: 1px solid rgba(74, 74, 74, .5);
  color: #5D3E93;
  font-weight: bold;
}

.tooltip_style .tooltipster-arrow{
  display:none;
}

.PosRelative {
    position: relative;
}

.PosAbsolute {
    position: absolute;
}

.Strikethrough {
    text-decoration: line-through;
}

.NoWrap {
    white-space: nowrap;
}

.VAlignMiddle,
.VAlignMiddle .ri {
    vertical-align: middle;
}

.Status {
    border-radius: 0;
    line-height: 8px;
    width: 10px;
}

.desktop div.Feedback_Message_Wrapper {
    left: 240px;
}

.TableCell {
    display: table-cell;
    vertical-align: middle;
}

a.Delete {
    color: #bb5858 !important;
}

.Breadcrumbs a,
.Breadcrumbs a:link,
.Breadcrumbs a:visited {
    color: #888fa5;
    font-size: 22px;
    letter-spacing: 0.27px;
    line-height: 20px;
    margin: 0;
    text-decoration: none;
}

.Breadcrumbs {
    color: #000;
    font-size: 22px;
    letter-spacing: 0.27px;
    line-height: 35px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
}

.tablet .Breadcrumbs,
.phone .Breadcrumbs,
.tablet .Breadcrumbs a,
.phone .Breadcrumbs a {
    font-size: 16px;
    font-weight: 500;
}

.Breadcrumbs .InitialIcon {
    margin-top: -5px;
    padding-right: 10px;
    vertical-align: middle;
}

.Breadcrumbs .SeparatorIcon {
    color: #888fa5;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.27px;
    /* float: left; */
    line-height: 35px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    /* text-align: center; */
    width: auto;
}

.desktop.small .Breadcrumbs .BreadcrumbLevel1,
.desktop.small .Breadcrumbs .BreadcrumbLevel2,
.desktop.small .Breadcrumbs .BreadcrumbLevel3,
.desktop.small .Breadcrumbs .BreadcrumbLevel4,
.desktop.small .Breadcrumbs .BreadcrumbLevel5 {
    height: 35px;
    line-height: 35px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.OverFlowXAuto {
    overflow-x: auto;
}

.Font10 {
    font-size: 10px;
}

.Font12 {
    font-size: 12px;
}

.Font14 {
    font-size: 14px;
}

/* Roles List Style */

.RolesList div {
    margin-bottom: 15px;
    margin-top: 0;
}

.RolesList div:last-child {
    margin: 0;
}

/* When placing text between OSInLine inputs, need middle vertical align */

.OSInLineText {
    display: inline-block;
    vertical-align: middle !important;
}

.OSInLineText.Height32 {
    height: 32px;
    line-height: 32px;
}

/* Hide On Specific Displays */

.HideOnAll {
    display: none !important;
}

.phone.portrait .HideOnPhonePortrait {
    display: none !important;
}

.phone.landscape .HideOnPhonePortrait {
    display: none !important;
}

.phone .HideOnPhone,
.phone .HideOnMobile {
    display: none !important;
}

.minitablet.portrait .HideOnMiniTabletPortrait {
    display: none;
}

.minitablet.landscape .HideOnMiniTabletLandscape {
    display: none;
}

.minitablet .HideOnMiniTablet {
    display: none;
}

.tablet.portrait .HideOnTabletPortrait {
    display: none;
}

.tablet.landscape .HideOnTabletLandscape {
    display: none;
}

.tablet .HideOnTablet {
    display: none;
}

.desktop.small .HideOnSmallDesktop {
    display: none;
}

.desktop.hd .HideOnHdDesktop {
    display: none;
}

.desktop .HideOnDesktop {
    display: none;
}

/* Header Logo */

.HeaderLogo {
    /*height: 60px; */
}

/* Badge **************************/

/* wds badge */

.badge {
    background-color: #fff;
    border-radius: 4px;
    display: inline-block;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 600;
    line-height: 18px;
    margin-right: 4px;
    max-height: 18px;
    padding: 0 6px;
    text-transform: uppercase;
}

.badge.text-accent-darker {
    color: #5c299c !important;
}

.badge.bg-accent-lightest {
    background-color: #e6d8f9 !important;
}

.Badge {
    border-radius: 50%;
}

.Badge.Small {
    border-radius: 50%;
    font-size: 11px;
    height: 20px;
    width: 20px;
}

/* Badge: Medium **************************/

.Badge.Medium {
    font-size: 16px;
    font-weight: 600;
    height: 40px;
    line-height: 2.6em;
    width: 40px;
}

/* Badge: Large **************************/

.Badge.Large {
    font-size: 34px;
    font-weight: 600;
    height: 80px;
    line-height: 2.4em;
    width: 80px;
}

/* Collapsable Setting Title */

.CollapsableSettingDescription {
    color: #999;
}

/* Mobile Margin Classes */

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

.phone .FullWidthOnMobile,
.phone .FullWidthOnMobile .ButtonDropdown_button {
    display: block;
    width: 100% !important;
}

.phone .Width85PercentOnMobile {
    width: 85% !important;
}

.NoMarginLeft,
.phone .NoMarginLeftOnMobile {
    margin-left: 0 !important;
}

.NoMarginBottom,
.phone .NoMarginBottomOnMobile {
    margin-bottom: 0;
}

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

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

.phone .OneColumnNoBreakOnMobile {
    width: 6.5359477124183% !important;
}

.phone .TwoColumnNoBreakOnMobile {
    width: 15.0326797385621% !important;
}

.phone .ThreeColumnNoBreakOnMobile {
    width: 23.5294117647059% !important;
}

.phone .FourColumnNoBreakOnMobile {
    width: 32.0261437908497% !important;
}

.phone .FiveColumnNoBreakOnMobile {
    width: 40.5228758169935% !important;
}

.phone .SixColumnNoBreakOnMobile {
    width: 49.0196078431373% !important;
}

.phone .EightColumnNoBreakOnMobile {
    width: 66.0130718954248% !important;
}

.phone .TenColumnNoBreakOnMobile {
    width: 83.0065359477124% !important;
}

.phone .ColumnMarginLeftOnMobile {
    margin-left: 1.96078431372549% !important;
}

/* Vertical Align Styles */

.TableVerticalAlign {
    display: table;
}

.TableVerticalAlign.FirstColumn {
    width: 100%;
}

/* Table Records In-line Image */

.TableRecords td .ProfilePicture {
    border-radius: 40px;
    max-height: 40px;
    max-width: 40px;
}

.TableVerticalAlign .Cell {
    max-width: 150px;
    min-width: 40px;
    padding-left: 20px;
}

.phone .TableVerticalAlign .Cell {
    max-width: 100%;
    width: 100%;
}

.TableVerticalAlign .Cell.BulkSelectCell {
    min-width: 50px;
    width: 50px;
}

.phone .TableVerticalAlign .Cell.BulkSelectCell {
    min-width: 35px;
    width: 35px;
}

.TableVerticalAlign.FirstColumn .Cell.FullWidth {
    max-width: 100%;
}

.TableVerticalAlign.FirstColumn .Cell img {
    max-height: 65px;
    max-width: 100%;
}

.TableVerticalAlign .Cell,
.TableVerticalAlign .Cell1,
.TableVerticalAlign .Cell2,
.TableVerticalAlign .Cell3,
.TableVerticalAlign .Cell4,
.TableVerticalAlign .Cell5 {
    display: table-cell;
    vertical-align: middle;
}

.desktop .HeadingTextAndBadge .TableVerticalAlign .Cell,
.desktop .HeadingTextAndBadge .TableVerticalAlign .Cell1,
.desktop .HeadingTextAndBadge .TableVerticalAlign .Cell2,
.desktop .HeadingTextAndBadge .TableVerticalAlign .Cell3,
.desktop .HeadingTextAndBadge .TableVerticalAlign .Cell4,
.desktop .HeadingTextAndBadge .TableVerticalAlign .Cell5 {
    white-space: nowrap;
}

.TableVerticalAlign .Cell:first-child,
.TableVerticalAlign .Cell:nth-child(2) {
    padding-left: 0;
}

/* Expand last cell to full width on phone */

.phone .TableVerticalAlign .Cell.FullWidth {
    width: 100%;
}

/* Table Column Structure Styles */

.StructureTableHeader .Columns {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #7c7c7c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    margin-bottom: 0;
    padding: 12px 10px;
    text-transform: uppercase;
    text-transform: uppercase;
}

.StructureTableHeader .Columns .Column,
.StructureTableHeader .Columns .Column .Heading4 {
    color: #7c7c7c;
}

.StructureTableRow {
    border-bottom: 1px solid #ddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.StructureTableRow .Columns {
    margin-bottom: 0;
}

.StructureTableRow .Columns .Column {
    padding: 12px 10px;
}

/* Time Input Table */

.TimeInputTable {
    display: table;
}

.phone .TimeInputTable,
.tablet.portrait .TimeInputTable {
    width: 100%;
}

.TimeInputTable .InputCell {
    display: table-cell;
    padding-right: 5px;
    vertical-align: middle;
}

.TimeInputTable .InputCell:last-child {
    padding-right: 0;
}

/* Edit/Preview Email Buttons */

.EditEmailButtons .ButtonGroup label {
    font-weight: normal;
    text-transform: none;
    width: auto;
}

/* Notepad Style Textarea */

textarea.Notepad {
    background: url(/WodifyAdminTheme/img/notepad_bg.png?34380&34536&35700&36124) repeat-y !important;
    background-position-x: -75px !important;
    font-size: 14px !important;
    line-height: 25px !important;
    margin: 0;
    /* Need height and overflow set for elastic input to stop at 400px */
    max-height: 400px !important;
    overflow-y: auto !important;
    padding: 2px 10px 2px 30px !important;
}

/* WDFY-2363 - Start
 **********************************************************/

.phone .Form textarea.Notepad,
.tablet .Form textarea.Notepad {
    color: #333;
}

/* WDFY-2363 - End
 **********************************************************/

/* Tag List */

.TagListInput {
    line-height: 25px;
}

/* WOD Edit - Component Actions */

.WODComponent_Actions,
.WODComponent_Actions a {
    font-size: 22px;
    text-decoration: none;
}

.WODComponent_Actions {
    margin-top: 10px;
}

.WODComponent_Actions .action {
    margin-right: 10px;
    vertical-align: middle;
}

.WODComponent_Actions .action:last-child {
    margin-right: 0;
}

.SavedCheckmark {
    color: #5aac6b;
}

.WODComponent_Container {
    margin-left: 30px;
}

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

.WODComponentEditWrapper {
    margin-bottom: 20px;
}

span .WODComponentEditWrapper:last-child {
    margin-bottom: 0;
}

/* Preview WOD on WOD Edit Styles */

.PreviewWOD {
    background-color: #f9f9f9;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    position: fixed;
    width: 285px;
    z-index: 99;
}

.phone .PreviewWOD,
.tablet .PreviewWOD,
.desktop.small .PreviewWOD {
    display: none;
}

.PreviewWOD .PreviewHeader {
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
    color: #666;
    font-size: 0.8em;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}

.PreviewWOD .PreviewDetails {
    font-size: 0.9em;
    max-height: 800px;
    overflow-y: auto;
    padding: 10px;
    text-align: left;
}

/* Column Lists */

.ThreeColumnList .ThreeColumnListItem,
.SixColumnList span .SixColumnListItem {
    margin-left: 10px;
}

.ThreeColumnList span:first-child .ThreeColumnListItem,
.ThreeColumnList .ThreeColumnListItem[currentrowmod="1"],
.SixColumnList span:nth-child(odd) .SixColumnListItem,
.phone .SixColumnListItem {
    margin-left: 0;
}

input.CenterAligned {
    text-align: center;
}

input.NoPadding {
    padding: 0;
}

.OverflowVisible {
    overflow: visible !important;
}

.OverflowAuto {
    overflow: auto !important;
}

.TableLayoutFixed {
    table-layout: fixed;
}

.WordWrapBreak {
    word-wrap: break-word;
}

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

/* Line Heights */

.LineHeight14 {
    line-height: 14px !important;
}

.LineHeight32 {
    line-height: 32px !important;
}

.LineHeight40 {
    line-height: 40px !important;
}

.LineHeightNormal {
    line-height: normal;
}

/* Essentials */

.circle {
    border-radius: 50%;
}

.vertAlign-center > .Columns {
    align-items: center;
    display: flex;
}

.phone .vertAlign-center > .Columns {
    align-items: initial;
    display: initial;
}

/* Profile Picture Container */

.ProfilePictureContainer img {
    max-height: 100%;
    max-width: 100%;
}

/* Profile Picture Camera Link */

.ProfilePictureCameraLink {
    position: relative;
}

.ProfilePictureCameraLink:hover img,
.ProfilePictureCameraLink img:hover {
    opacity: 0.4;
}

.ProfilePictureCameraLink a {
    bottom: 0;
    color: #141414;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none !important;
    top: 0;
}

.ProfilePictureCameraLink:hover a {
    color: #141414;
    opacity: 1;
    top: 0;
    z-index: 500;
}

.ProfilePictureCameraLink a > div {
    height: 60px;
    left: 0;
    margin-top: -30px;
    position: absolute;
    right: 0;
    top: 50%;
}

.phone .ProfilePictureCameraLink a,
.phone .ProfilePictureCameraLink:hover a,
.phone .ProfileBadge {
    display: none;
    opacity: 0;
}

.phone .ProfilePictureCameraLink:hover img,
.phone .ProfilePictureCameraLink img:hover {
    opacity: 1;
}

.ProfileBadge {
    left: -5px;
    opacity: 1;
    position: absolute;
    top: -5px;
    z-index: 20;
}

.ProfileBadge div {
    border-radius: 25px;
    -webkit-box-shadow: 1px 1px 0 0 rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 1px 1px 0 0 rgba(50, 50, 50, 0.75);
    box-shadow: 1px 1px 0 0 rgba(50, 50, 50, 0.75);
    color: #fff !important;
    opacity: 1;
    padding: 8px 15px;
    position: static;
}

/*** Profile Picture New **********************/

.ProfilePicContainer img {
    max-height: 100%;
    max-width: 100%;
}

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

/* Profile Picture Camera Link */

.ProfilePicCameraLink {
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    position: relative;
}

.ProfilePicCameraLink:hover {
    background: #6d519d;
}

.ProfilePicCameraLink:hover img,
.ProfilePicCameraLink img:hover {
    opacity: 0;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.ProfilePicCameraLink a {
    bottom: 0;
    color: #141414;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none !important;
    top: 0;
}

.ProfilePicCameraLink:hover a {
    color: #141414;
    opacity: 1;
    top: 0;
    z-index: 500;
}

.ProfilePicCameraLink a > div,
.tablet .ProfilePicCameraLink a > div,
.desktop .ProfilePicCameraLink a > div {
    height: 60px;
    left: 0;
    margin-top: -30px;
    position: absolute;
    right: 0;
    top: 60%;
}

.phone .ProfilePicCameraLink a > div {
    height: 60px;
    left: 0;
    position: absolute;
    right: 0;
    top: 65%;
}

.ProfilePicCameraLink a > div .ri-fw,
.tablet .ProfilePicCameraLink a > div .ri-fw,
.desktop .ProfilePicCameraLink a > div .ri-fw {
    color: #e0e0e0;
    font-size: 40px;
    margin-top: auto;
}

.phone .ProfilePicCameraLink a > div .ri-fw {
    color: #e0e0e0;
    font-size: 28px;
    margin-top: auto;
}

.phone .ProfilePicCameraLink a {
    opacity: 0;
}

.phone .ProfilePicCameraLink:hover img,
.phone .ProfilePicCameraLink img:hover {
    opacity: 1;
}

.ProfilePicBadge,
.desktop .ProfilePicBadge,
.tablet .ProfilePicBadge {
    font-size: 13px;
    font-weight: normal;
    left: 31px;
    opacity: 1;
    position: absolute;
    top: 114px;
    z-index: 20;
}

.phone .ProfilePicBadge {
    font-size: 11px;
    left: 14px;
    opacity: 1;
    position: absolute;
    top: 66px;
    z-index: 9;
}

.ProfilePicBadge div,
.tablet .ProfilePicBadge div,
.desktop .ProfilePicBadge div {
    align-items: center;
    border-radius: 100px;
    color: #fff !important;
    display: flex;
    height: 35px;
    opacity: 1;
    padding: 9px 15px;
    position: static;
}

.phone .ProfilePicBadge div {
    border-radius: 100px;
    color: #fff !important;
    height: 25px;
    opacity: 1;
    padding: 6px 11px;
    position: static;
}

/************* Profile Picture New - End *****/

/*** Profile Card New ************************/

.profile-card-custom {
    padding: 0;
}

.profile-card-custom .profile-card-custom-header {
    display: flex;
    flex-direction: row;
}

.phone .profile-card-custom .profile-card-custom-header {
    flex-direction: column;
}

.profile-card-custom .profile-card-custom-header > .card-left-side,
.profile-card-custom .profile-card-custom-header > .card-right-side {
    padding: 15px;
}

.profile-card-custom .profile-card-custom-header > .card-left-side {
    max-width: 180px;
    width: 30%;
}

.profile-card-custom .profile-card-custom-header > .card-right-side {
    width: 70%;
}

.phone .profile-card-custom .profile-card-custom-header > .card-left-side,
.phone .profile-card-custom .profile-card-custom-header > .card-right-side {
    margin: auto;
    text-align: center;
    width: 100%;
}

.ProfilePicBadge {
    display: none;
}

.profile-card-custom .card-left-side .profile-card-image {
    margin: auto;
    max-width: 150px;
    width: 100%;
}

.profile-card-custom .card-left-side .profile-card-image img {
    border-radius: 50%;
    width: 180px;
}

.profile-card-custom .profile-card-custom-header .profile-card-custom-title .profile-card-title {
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 5px;
}

.profile-card-custom .profile-card-custom-header .profile-card-custom-title .profile-card-subtitle {
    font-size: 16px;
    font-weight: 100;
    padding-bottom: 15px;
}

.profile-card-custom .profile-card-custom-content {
    border-bottom: 1px solid #6d5197;
    border-top: 1px solid #6d5197;
    padding: 15px 0;
}

.profile-card-custom-row .row-label,
.profile-card-custom-row .row-link,
.profile-card-custom-row .row-icon {
    display: inline-block;
}

.profile-card-custom-row .row-label {
    font-size: 12px;
    font-weight: 100;
    line-height: 22px;
    margin-bottom: 0;
    margin-right: 10px;
    text-transform: uppercase;
}

.profile-card-custom-row .row-link {
    font-size: 14px;
    font-weight: 600;
}

.profile-card-custom-row .row-icon {
    font-size: 12px;
    padding-left: 5px;
}

.desktop .profile-card-custom-row .row-icon {
    display: none;
}

.desktop .profile-card-custom-row:hover .row-icon {
    display: inline-block;
}

.ProfilePicCameraLink {
    border: none;
    margin-bottom: 15px;
}

.UploadNewOrRemoveSmall {
    min-width: 95px;
    width: 100%;
}

.desktop .UploadNewOrRemoveSmall a,
.tablet .UploadNewOrRemoveSmall a,
.phone .UploadNewOrRemoveSmall a {
    display: block;
    font-size: 11px;
    font-weight: 100;
    height: 25px;
    line-height: 25px;
    margin: auto;
    max-width: 150px;
    text-transform: uppercase;
    width: 100%;
}

.desktop .UploadNewOrRemoveSmall .Button,
.tablet .UploadNewOrRemoveSmall .Button,
.phone .UploadNewOrRemoveSmall .Button {
    margin-bottom: 5px;
}

.PrimaryButton {
    display: inline-block;
}

.profile-card-helper-social {
    display: inline-block;
    padding: 15px 20px 15px 0;
    position: relative;
}

.profile-card-helper-social-btn {
    display: inline-block;
    font-size: 12px;
    height: 30px;
    margin: 0 10px 0 0;
    width: 30px;
}

.profile-card-helper-social .social-icon .bg {
    fill: #6d5197;
}

.profile-card-helper-social a.social-btn {
    display: block;
    height: 30px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 30px;
    z-index: 5;
}

.profile-card-helper-social a.social-btn:hover:after {
    height: 38px;
    left: -5px;
    opacity: 1;
    top: -5px;
    width: 38px;
}

.profile-card-helper-social-editBtn {
    position: absolute;
    right: 0;
    top: 20px;
}

.phone .profile-card-helper-social-editBtn {
    top: 20px;
}

.social-icon {
    height: 100%;
    opacity: 0.2;
    width: 100%;
}

.social-btn .social-icon {
    opacity: 1;
}

.social-icon .fg {
    fill: #fff;
}

.social-icon .bg {
    fill: #e0e0e0;
}

a.social-btn .social-icon-facebook .bg {
    /*fill: #3b5998;*/
    fill: #6d5197;
}

a.social-btn .social-icon-twitter .bg {
    /*fill: #55acee;*/
    fill: #6d5197;
}

a.social-btn .social-icon-linkedin .bg {
    /*fill: #0077b5;*/
    fill: #6d5197;
}

a.social-btn .social-icon-instagram .bg {
    /*fill: #000;*/
    fill: #6d5197;
}

a.social-btn {
    display: block;
    height: 40px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 40px;
    z-index: 5;
}

a.social-btn:after {
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    content: "";
    height: 38px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.2s;
    width: 38px;
    z-index: -1;
}

a.social-btn:hover:after {
    height: 48px;
    left: -5px;
    opacity: 1;
    top: -5px;
    width: 48px;
}

a.social-btn:active:after {
    height: 54px;
    left: -8px;
    opacity: 0;
    top: -8px;
    width: 54px;
}

.phone a.social-btn {
    height: 25px;
    width: 25px;
}

.phone a.social-btn:after {
    height: 23px;
    width: 23px;
}

.phone a.social-btn:hover:after {
    height: 31px;
    left: -4px;
    top: -4px;
    width: 31px;
}

.phone a.social-btn:active:after {
    height: 37px;
    left: -7px;
    top: -7px;
    width: 37px;
}

.profile-card-row-icon {
    display: inline-block;
    font-size: 12px;
    padding-left: 10px;
}

.desktop .profile-card-row .profile-card-row-icon {
    display: none;
}

.desktop .profile-card-row:hover .profile-card-row-icon,
.desktop .profile-card-title:hover .profile-card-row-icon {
    display: inline-block;
}

/* Profile Right Section */

.Profile-NotesAndTagsSection {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
}

.Profile-NotesAndTagsSection .TabsLittle-Header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.Profile-NotesAndTagsSection .selectize-control.plugin-remove_button .selectize-dropdown-content [data-value],
.Profile-NotesAndTagsSection .selectize-control.plugin-remove_button .selectize-dropdown-content .create strong {
    color: #141414;
}

.phone .Profile-NotesAndTagsSection,
.tablet.portrait .Profile-NotesAndTagsSection,
.phone .Profile-PictureSection,
.tablet.portrait .Profile-PictureSection {
    margin-left: 0;
    width: 100%;
}

.desktop .Profile-NotesAndTagsSection .Notepad,
.tablet.landscape .Profile-NotesAndTagsSection .Notepad {
    /* the notepad is elastic by default, but we want it to fill most of the notes section */
    color: #333;
    max-height: 140px !important;
    min-height: 140px;
}

@media only screen and (max-width: 1200px) {
    .Profile-PictureSection {
        width: 100% !important;
    }
    .Profile-NotesAndTagsSection {
        margin: 0 0 0 0 !important;
        width: 100% !important;
    }
}

/********* Profile Card New - End *****/

/********* Picture and Action *****/

.PictureAndAction img {
    border-radius: 50%;
    display: block;
    height: 210px;
    margin: 0 auto;
    object-fit: cover;
    width: 210px;
}

.phone .PictureAndAction img {
    height: 120px;
    width: 120px;
}

.PictureAndAction .action * {
    color: #c7c7c7;
    display: block;
    font-size: 12px;
    margin: 30px auto 0 auto;
    max-width: 210px;
    text-align: center;
}

.phone .PictureAndAction .action * {
    margin: 20px auto 0 auto;
    /* needed to override a .Button !important style property */
    margin-left: auto !important;
    width: auto;
}

/********* Picture and Action - End *****/

/********* Member Plans *********/

.memberPlanHoldModal-warningText {
    padding: 4px 0 8px 0;
}

/********* Member Plans - End *****/

/* Payment Account Type Select */

.PaymentAccountTypeContainer,
.PaymentMethodContainer {
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px;
}

.PaymentAccountTypeContainer:hover,
.PaymentMethodContainer:hover {
    -webkit-box-shadow: inset 3px 3px 4px 0 rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 3px 3px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: inset 3px 3px 4px 0 rgba(0, 0, 0, 0.05);
}

.PaymentAccountTypeContainer.Active,
.PaymentMethodContainer.Active {
    background-color: #5d3e92;
    -webkit-box-shadow: inset 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.PaymentAccountTypeContainer.Active,
.PaymentAccountTypeContainer.Active .Heading4,
.PaymentMethodContainer.Active,
.PaymentMethodContainer.Active .Heading4 {
    color: #fff;
}

.phone .PaymentAccountTypeContainer,
.phone .PaymentMethodContainer {
    margin-top: 10px;
}

.PaymentMethodContainer {
    font-size: 11px;
    height: 112px;
}

.PaymentMethodContainer .LocationsCount {
    text-transform: uppercase;
}

.WodListPreviewContainer .Balloon {
    max-height: 500px;
    max-width: 400px;
    overflow-y: auto;
}

.PaymentMethodSelectedLocations .SelectedLocation {
    margin-right: 5px;
}

.desktop .PaymentAccountTypeBtnsContainer,
.tablet .PaymentAccountTypeBtnsContainer {
    min-width: 530px;
}

.desktop .PaymentAccountTypeBtnsContainer .EditInline_Wrapper,
.tablet .PaymentAccountTypeBtnsContainer .EditInline_Wrapper {
    align-items: center;
    display: flex;
    height: 128px;
    justify-content: center;
    padding: 16px;
}

/* Upload New or Remove */

.UploadNewOrRemove {
    border: 1px dashed #d5d5d5;
    border-radius: 0;
    padding: 8px 10px;
}

.UploadNewOrRemove,
.UploadNewOrRemove a {
    font-size: 12px;
}

/* Initial Contract/Waiver */

.InitialSection,
.SignSection {
    background-color: #f7f7f7;
    border-radius: 0;
    padding: 5px;
}

.WaiverQuestionContainer {
    background-color: #f9f9f9;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 10px;
}

/* Fancy Multi Select */

div.ms-parent,
div.ms-parent button,
div.ms-parent .ms-drop {
    width: 100%;
}

/* Margin */

.MarginRight15,
.phone .PhoneMarginRight15 {
    margin-right: 15px;
}

.MarginLeft15,
.phone .PhoneMarginLeft15 {
    margin-left: 15px;
}

.MarginRight5,
.phone .PhoneMarginRight5 {
    margin-right: 5px;
}

.MarginLeft5,
.phone .PhoneMarginLeft5 {
    margin-left: 5px;
}

.MarginBottom10,
.phone .PhoneMarginBottom10 {
    margin-bottom: 10px;
}

.MarginBottom15,
.phone .PhoneMarginBottom15 {
    margin-bottom: 15px;
}

.MarginBottom20,
.phone .PhoneMarginBottom20 {
    margin-bottom: 20px;
}

.MarginBottom30,
.phone .PhoneMarginBottom30 {
    margin-bottom: 30px;
}

/* Font Weight */

.FontWeight500 {
    font-weight: 500;
}

/* Late Load Spinner */

.LateLoadSpinner {
    color: #9a9a9a;
    display: none;
}

.LateLoadSpinner.small {
    font-size: 12px;
}

.sk-circle {
    height: 40px;
    margin: 30px auto 20px auto;
    position: relative;
    width: 40px;
}

.sk-circle.small {
    height: 35px;
    margin: 10px auto;
    width: 35px;
}

.sk-circle .sk-child {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.sk-circle .sk-child:before {
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    background-color: #9a9a9a;
    border-radius: 100%;
    content: "";
    display: block;
    height: 15%;
    margin: 0 auto;
    width: 15%;
}

.sk-circle.small .sk-child:before {
    height: 13%;
    width: 13%;
}

.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/*

    To override a style copy and paste it to
    the application theme and then modify it

    1. General Properties
    2. Structure
    3. Forms
    4. Built-in widgets
    5. RichWidgets
    6. Login
    7. Theme Grid
    8. Patterns Silk
    9.1 Patterns Wodify > FormBox
    9.2 Patterns Wodify > FormSection
    9.3 Patterns Wodify > PanelNavigation
    0. Studio Preview

*/

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

html,
body {
    background-color: #f3f4f8;
    color: #141414;
    /*font-family: "Avenir", "open-sans", "Helvetica Neue Regular", Helvetica, Arial, sans-serif;*/
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.tablet body,
.phone body {
    overflow-x: hidden;
}

html,
body,
a,
fieldset,
input,
button,
select,
textarea,
optgroup,
option {
    /*font-family: "Avenir", "open-sans", Arial, Helvetica, sans-serif;*/
    font-family: "Source Sans Pro", sans-serif;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
}

/* a links */

a,
a:link,
a:visited {
    color: #5d3e92;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Override Phone number links */

span.gc-cs-link {
    color: #5d3e92 !important;
    text-decoration: none !important;
}

.Fill .profile-card-custom span.gc-cs-link {
    color: #ffffff !important;
}

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

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

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

/* top */

.top {
    height: 50px;
    left: 0;
    margin-left: 240px;
    position: absolute;
    right: 200px;
    top: 0;
    transition: margin 300ms;
    z-index: 1;
}

.tablet .top,
.phone .top {
    height: auto;
    left: initial;
    margin-top: 60px;
    position: relative !important;
    right: initial;
    top: initial;
    width: 100%;
    margin-left: 0px;
}

.top > div {
    width: 100%;
}

/* header */

.Header {
    border: 0;
    color: #000;
    display: block;
    margin: 0 0 0 240px;
    padding: 0;
    transition: margin 300ms;
    width: calc(100% - 240px);
    z-index: 21;
}

.Header_Container {
    display: table;
    margin: 0 auto;
    max-width: 1200px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
}

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

.ProgressBar {
    height: 5px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

/*.desktop .ProgressBar {
    margin-left: 276px;
}*/

#nprogress .bar {
    background: #f22c7c;
}

.tablet .Header,
.phone .Header {
    height: auto;
    margin: 0;
    position: relative !important;
    width: 100%;
}

/* button */

.Header .Button.Header_buttonMenu,
.Header .Button.Header_backButton {
    display: none;
    font-size: 20px;
    height: 36px;
    left: 0;
    line-height: 24px;
    padding: 5px;
    position: absolute;
    top: 12px;
    width: 38px;
    z-index: 99;
}

.tablet .Header .Button.Header_buttonMenu,
.phone .Header .Button.Header_buttonMenu,
.tablet .Header .Button.Header_backButton,
.phone .Header .Button.Header_backButton {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #4a4a4a;
    font-size: 20px;
    height: 60px;
    line-height: 60px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
    width: 40px;
}

.add-back-button .wodify-nav .wodify-nav-button {
    left: auto !important;
    right: 0 !important;
}

.tablet .Header .Button.Header_buttonMenu,
.phone .Header .Button.Header_buttonMenu {
    display: block;
}

.Header .Button.Header_buttonMenu {
    right: 0;
}

.tablet.MenuOpen .Header .Button.Header_buttonMenu,
.phone.MenuOpen .Header .Button.Header_buttonMenu {
    right: 240px;
}

/* Application title */

.Header_title {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 70px;
    padding: 22px 24px 8px;
    position: relative;
}

.Header_title img.logo {
    height: 41px;
    width: auto;
    margin-right: 10px;
    display: block;
}

.Header_title img.management-logo {
    height: 28px;
    width: auto;
    margin-right: 10px;
    display: block;
}

.tablet .Header_title,
.phone .Header_title {
    border-right: none;
    height: auto;
    margin: 0;
    padding: 4px 24px 0 60px;
    text-align: center;
}
.tablet .Header_title {
    padding-left: 68px;
}

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

.tablet .Header_title img.logo,
.phone .Header_title img.logo {
    max-height: 28px;
}

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

/* application search */

.Header_breadcrumbs {
    display: table-cell;
    
    padding-bottom: 30px;
    /*width: 60%;*/
    padding-top: 60px;
    vertical-align: middle;
}

.tablet.portraite .Header_breadcrumbs,
.phone .Header_breadcrumbs {
    display: block;
    width: 100%;
}

/* "Logged As" Stripes */

.LoggedAsStripes {
    background-color: #292929;
    display: block;
    height: 13px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Stripe Styles - change colors based on mode */

.LoggedAsStripes.SuperAdminLoginAsStripes {
    background: repeating-linear-gradient(-45deg, #85262a, #85262a 10px, #2a2a2a 10px, #2a2a2a 20px);
}

.LoggedAsStripes.DevEnvironmentStripes {
    background: repeating-linear-gradient(-45deg, #6a592d, #6a592d 10px, #2a2a2a 10px, #2a2a2a 20px);
}

.LoggedAsStripes.TestEnvironmentStripes {
    background: repeating-linear-gradient(-45deg, #2c4e64, #2c4e64 10px, #2a2a2a 10px, #2a2a2a 20px);
}

.LoggedAsStripes.StagingEnvironmentStripes {
    background: repeating-linear-gradient(-45deg, #8c5312, #8c5312 10px, #2a2a2a 10px, #2a2a2a 20px);
}

/* application user */

.Header_user {
    display: table-cell;
    height: 60px;
    padding: 15px;
    right: 0;
    width: 250px;
    z-index: 2;
}

.tablet .Header_user,
.phone .Header_user {
    padding-right: 0;
    right: -250px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

.tablet.MenuOpen .Header_user,
.phone.MenuOpen .Header_user {
    right: 0;
}

.tablet .Header .Header_user {
    display: none;
    height: 60px;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    width: 100%;
}

.Page.tablet .Header__activity > span[id*="HelpIcon"],
.Page.tablet .Header__activity > span[id*="AlertIcon"],
.Page.tablet .Header__activity > a,
.Page.phone .Header__activity > span[id*="HelpIcon"],
.Page.phone .Header__activity > span[id*="AlertIcon"],
.Page.phone .Header__activity > a {
    color: #fff;
    display: table-cell;
    padding-top: 13px;
    text-align: center;
    width: 80px;
}

.Page.desktop .Header__activity a.NotificationLink,
.Page.desktop .Header__activity span.ri,
.Page.desktop .Header__activity span.ri {
    color: #141414;
}

.Header__activity {
    display: table-cell;
    /*width: 40%;*/
    padding: 60px 0 30px 0;
    /* height: 90px; */
    text-align: right;
    vertical-align: middle;
    
}

.Header__activity > div > div > * {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
}

.tablet.portrait .Header__activity {
    display: block;
    height: auto;
    padding: 15px 0 5px;
    width: 100%;
}

.phone .Header__activity {
    height: 0;
    padding: 10px;
}

.phone .Header__activity > * {
    display: none;
}

.desktop.small .Header__activity .Button:not(:last-child),
.tablet .Header__activity .Button:not(:last-child),
.phone .Header__activity .Button:not(:last-child) {
    margin-bottom: 10px;
}

.Header__activity > span,
.Header__activity > a,
.Header__activity > .IconBadge,
.Header__activity span.ri {
    font-size: 20px;
}

.Header__activity .Button .ri {
    font-size: 14px;
}

.Header__activity .DropdownMenu .PH > a:hover {
    background: #5d3e8c;
    color: #ffffff;
}

.Header__activity .IconBadge {
    margin: 0 22px;
}

.Header__activity .DropdownMenu {
    left: auto;
    right: 0;
}

.IconBadge_number {
    background: #ec5a48;
    border: 0;
    height: 20px;
    line-height: 18px;
    min-width: 20px;
    right: -5px;
    text-align: center;
    top: 0;
}

.Header__loginInfo {
    display: table-cell;
    width: 100%;
}

.tablet .Header__loginInfo,
.phone .Header__loginInfo {
    display: inline-block;
    width: 30%;
}

/* login info web block */

.Menu_TopMenu .userMenu {
    display: table;
}

.Menu_TopMenu .userMenu .LoginInfo_username {
    display: table-cell;
    float: left;
    height: 35px;
    margin-right: 10px;
    margin-top: 7px;
    width: 35px;
}

.Menu_TopMenu .userMenu .LoginInfo_username_text {
    display: table;
    height: 48px;
    text-transform: capitalize;
}

.LoginInfo_username_text_in {
    display: table-cell;
    line-height: 20px;
    padding-right: 6px;
    vertical-align: middle;
}

.Menu_TopMenu .userMenu .LoginInfo_username img {
    border: 1px solid #fff;
    border-radius: 35px;
    height: 35px;
    width: 35px;
}

.Menu .UserIcon {
    border-radius: 50%;
    color: #5d3e92;
    font-size: 14px;
    height: 28px;
    line-height: 30px;
    margin-left: 5px;
    text-align: center;
    transition: all 0.3s;
    width: 28px;
}

.Menu .NotificationLink.UserIcon:hover {
    text-decoration: none;
}

.Menu .NotificationLink.UserIcon .IconBadge {
    justify-content: center;
}

.navSeparator {
    color: #bac1d6;
    display: block;
    font-size: 12px;
    font-weight: 500;
    height: 28px;
    line-height: 32px;
    margin-bottom: 5px;
    padding: 2px 15px 5px 10px;
    width: 100%;
}

.tablet.MenuOpen .navSeparator div,
.phone.MenuOpen .navSeparator div {
    pointer-events: initial;
}

.tablet .navSeparator div,
.phone .navSeparator div {
    pointer-events: none;
}

.navSeparator > div {
    align-items: baseline;
    -webkit-box-align: baseline;
    -webkit-box-pack: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.navSeparator div .icon {
    color: #623b90;
    font-size: 18px;
}

.navSeparator .actions-container .action-icon.help-action-icon {
    text-align: center;
}

.navSeparator .actions-container .action-icon {
    height: 25px;
    width: 25px;
}

.tablet .navSeparator .actions-container .action-icon,
.phone .navSeparator .actions-container .action-icon {
    margin-right: 5px;
}

.navSeparator .Label {
    margin: 10px 0 0 0;
}

/* Menu */

.wodify-nav {
    background-color: white;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    height: 100%;
    left: 0;
    max-width: 240px;
    min-width: 240px;
    position: fixed;
    top: 0;
    width: 276px;
    z-index: 99;
}

.tablet .wodify-nav,
.phone .wodify-nav {
    align-items: center;
    background: #edecee;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: flex;
    max-width: 100%;
    width: 100%;
    z-index: 10;
}

.tablet .wodify-nav {
    height: 72px;
}

.phone .wodify-nav {
    height: 56px;
}

.menu_mobile-overlay {
    background-color: rgba(77, 71, 91, 0.3);
    display: none;
    height: 100vh;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 200;
}

.tablet.MenuOpen .menu_mobile-overlay,
.phone.MenuOpen .menu_mobile-overlay {
    display: block;
}

.wodify-nav .nav .wodify-nav-button {
    -webkit-align-items: center;
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    cursor: pointer;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    height: 56px;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0;
    opacity: 0.6;
    position: absolute;
    right: auto;
    top: 0;
    width: 56px;
}

.tablet .wodify-nav .nav .wodify-nav-button {
    top: 8px;
}

.Menu {
    display: block;
    list-style: none;
    overflow: hidden;
    padding-left: 0;
    padding-top: 16px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 240px;
}

.Menu .scroll-area {
    height: calc(100vh - 160px);
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 14px;
    width: 270px;
}

.phone .Menu .scroll-area,
.tablet .Menu .scroll-area {
    height: calc(100vh - 130px);
    padding-bottom: 40px;
}

.Menu::-webkit-scrollbar {
    width: 0 !important;
}

.firefox.desktop .Menu,
.ie.desktop .Menu {
    overflow: hidden;
}

.firefox.desktop .Menu > .scroll-area,
.ie.desktop .Menu > .scroll-area {
    overflow-y: scroll;
    width: 264px;
}

.firefox.osx.desktop .Menu > .scroll-area {
    width: 240px;
}

.tablet .Menu,
.phone .Menu {
    background-color: #f3f4f8;
    -webkit-box-shadow: 10px 0 25px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 10px 0 25px 0 rgba(0, 0, 0, 0.1);
    height: 100vh;
    left: 0;
    margin-bottom: 0;
    margin-top: 0;
    max-height: 100vh;
    position: absolute;
    right: auto;
    top: 0;
    -webkit-transform: translateX(-240px);
    -ms-transform: translateX(-240px);
    transform: translateX(-240px);
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 240px;
}

.tablet.MenuOpen .Menu,
.phone.MenuOpen .Menu {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    width: 240px;
}

.Page.tablet.MenuOpen .Menu,
.Page.phone.MenuOpen .Menu {
    /*  padding-bottom: 60px;*/
    right: 0;
    z-index: 20;
}

.Application_Menu {
    display: table;
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.Menu_TopMenus_Container {
    display: table-row;
}

.Menu_TopMenus {
    display: table-cell;
    overflow-x: hidden;
    width: 100%;
}

.tablet .Menu_TopMenus,
.phone .Menu_TopMenus {
    max-width: 240px;
    min-width: 240px;
    width: 100%;
}

.Menu_TopMenu {
    position: relative;
}

.Menu_TopMenu [class^="ri"] {
    margin-right: 8px;
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    align-items: center;
    color: #94909c;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    line-height: 24px;
    margin: 0 8px 0 24px;
    overflow: hidden;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 300ms ease;
}
.Menu_TopMenu a:hover {
    color: #833adf;
}

.tablet .Menu_TopMenu a:link,
.tablet .Menu_TopMenu a:visited,
.tablet .Menu_TopMenu a,
.phone .Menu_TopMenu a:link,
.phone .Menu_TopMenu a:visited,
.phone .Menu_TopMenu a {
    font-size: 14px;
    line-height: 40px;
    padding: 0;
    width: auto;
}

/* remove shadow form de last link*/

.Menu_TopMenu a:link:last-child,
.Menu_TopMenu a:visited:last-child,
.Menu_TopMenu a:last-child {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* NEW style icon font */

.Menu_TopMenu a > span {
    line-height: 24px;
}

.Menu_TopMenu a > .BetaTag {
    line-height: 16px;
}

.BetaTag {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px #94909c;
    box-shadow: inset 0 0 0 1px #94909c;
    color: rgba(77, 71, 91, 0.6);
    font-size: 12px;
    line-height: 16px;
    margin: 0 4px 0 8px;
    max-height: 18px;
    padding: 0 6px;
}

.Menu_TopMenu a:hover .icon {
    opacity: 1;
    transition: all 0.1s;
}

.Menu_TopMenu a .icon {
    color: #21084f;
    font-size: 24px;
    line-height: 48px;
    margin-right: 15px;
    opacity: 0.3;
    transition: all 0.1s;
    vertical-align: middle;
}

/* style hover/active menu */

.Menu_TopMenu:hover,
.Menu_TopMenu:hover a [class^="ri"],
.Menu_TopMenuActive a:link [class^="ri"],
.Menu_TopMenuActive a:visited [class^="ri"],
.Menu_DropDownPanel a.Menu_SubMenuItemActive,
.Menu_DropDownPanel a.Menu_SubMenuItemActive:visited,
.Menu_DropDownPanel a.Menu_SubMenuItemActive:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

a.Menu_SubMenuItem:hover,
a.Menu_SubMenuItem:active,
.Menu_DropDownPanel a.Menu_SubMenuItem:hover,
.Menu_DropDownPanel a.Menu_SubMenuItem:active,
body .Menu_DropDownPanel a.Menu_SubMenuItemActive,
body .Menu_DropDownPanel a.Menu_SubMenuItemActive:visited {
    background: #fff;
    box-shadow: none;
    color: #4d475b;
    opacity: 1;
}
body .Menu_DropDownPanel a.Menu_SubMenuItemActive,
body .Menu_DropDownPanel a.Menu_SubMenuItemActive:visited {
    font-weight: 600;
}

.desktop .Menu_TopMenu a:hover,
.desktop .Menu_TopMenu a:link:hover,
.Menu_TopMenu a:visited {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

/* show submenu if active */

.menuItemsContainer.open .Menu_DropDownPanel:not(:empty),
.Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty) {
    display: block;
    max-height: 600px;
    transition: all 0.6s;
}

.menuItemsContainer {
    display: block;
}

.menuItemsContainer .Menu_DropDownPanel:not(:empty) {
    max-height: 0;
}

.LoginInfo .Menu_DropDownButton.open .Menu_DropDownPanel:not(:empty) {
    display: block;
    max-height: 600px;
    transition: all 0.6s;
}

.LoginInfo .Menu_DropDownButton .Menu_TopMenuActive + .Menu_DropDownPanel:not(:empty) {
    max-height: 0;
}

.Menu_DropDownButton.open .Menu_TopMenu {
    z-index: 0;
}

.Menu_DropDownPanel .ContextItem {
    background-color: #dedede;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    padding: 0 20px 0 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* style icon on hover */

.desktop .Menu_TopMenu:hover span.ri {
    /*color: #fff;
    border-color: #fff;*/
}

.Menu_TopMenu:hover .Menu_DropDownArrow {
    border-top-color: #fff;
}

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

.desktop .Menu_TopMenu:hover a,
.desktop .Menu_TopMenu:hover a:link {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #833adf;
    /* background: #212529; */
    font-weight: 400 !important;
    font-weight: 600;
}

.Menu_TopMenu .Menu_DropDownArrow,
.Menu_TopMenu:hover .Menu_DropDownArrow {
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #c3cfd8;
}

.Menu_DropDownArrow {
    background-color: transparent;
    border-style: solid dashed dashed;
    border-width: 0;
    display: -moz-inline-box;
    display: inline-block;
    height: 0;
    margin-top: 0;
    padding-top: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
}

.phone .Menu_DropDownArrow,
.tablet .Menu_DropDownArrow {
    right: 15px;
}

.Menu_DropDownButton {
    display: block;
}

.Menu_DropDownButton.open > div > a:link,
.Menu_DropDownButton.open a:visited,
.Menu_TopMenuActive a:link,
.Menu_TopMenuActive > div > a:visited {
    font-weight: 600;
    opacity: 1;
}

.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited {
    /* color: #fff; */
}

.MenuSlider_Toggler {
    color: white;
}

.Menu_DropDownPanel {
    /*-webkit-transition: all .6s cubic-bezier(.165, .84, .44, 1);
            transition: all .6s cubic-bezier(.165, .84, .44, 1);*/
    background-color: #eff0f4;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 0;
}

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

.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    background: none;
    border-radius: 0;
    border-width: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    clear: both;
    color: #333844;
    display: block;
    font-size: 14px;
    height: 30px;
    margin: 0;
    min-width: 0;
    padding: 0;
    padding-left: 66px;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* remove border from last submenu */

.Menu_DropDownPanel a:last-child {
    border-bottom: none;
}

/* hover submenu */

.Menu_DropDownPanel a:hover,
.Menu_DropDownPanel a:link:hover,
.Menu_DropDownPanel a:visited:hover {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.Menu_DropDownPanel a span.ri {
    margin-right: 8px;
}

.Menu_DropDownPanel {
    background-color: #fff;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 0;
}

a.Menu_SubMenuItem,
.desktop a.Menu_SubMenuItem,
a.Menu_SubMenuItem:link,
a.Menu_SubMenuItem:visited {
    color: #94909c;
    display: block;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    line-height: 32px;
    line-height: 24px;
    margin-left: 48px;
    padding: 8px 0 8px 16px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;
}

.Menu_DropDownPanel a:hover > span,
.Menu_DropDownPanel a:link:hover > span,
.Menu_DropDownPanel a:visited:hover > span {
    font-weight: normal;
}

/* Menu_BottomMenus  */

.desktop .Menu_BottomMenus_Container {
    background: #fff;
    bottom: 0;
    left: 0;
    max-width: 240px;
    position: fixed;
    width: 100%;
}

.Menu_BottomMenus_Container .Menu_BottomMenus {
    background: #fff;
}

.Menu_BottomMenus .bottom-externalIcon {
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
}

.Menu_BottomMenus .bottom-externalIcon .icon {
    opacity: 1 !important;
}

.Menu_BottomMenus {
    display: table-cell;
    vertical-align: bottom;
    width: 240px;
}

.phone .Menu_BottomMenus,
.tablet .Menu_BottomMenus {
    width: 100vw;
}

.Menu_BottomMenus .Menu_DropDownButton:last-child {
    border: none;
}

/* Menu Mobile */

.phone .MobileTopMenu,
.tablet .MobileTopMenu {
    height: 60px;
}

.phone .MobileTopMenu .ri,
.tablet .MobileTopMenu .ri {
    color: white;
    font-size: 30px;
    margin-top: 18px;
}

.phone .MobileTopMenu .IconBadge .ri,
.tablet .MobileTopMenu .IconBadge .ri {
    color: white;
    font-size: 30px;
    margin-top: 13px;
}

.phone .MobileTopMenu .LoginInfo,
.tablet .MobileTopMenu .LoginInfo {
    color: #fff;
    margin-top: 0;
    padding: 13px 0 0 0;
    text-align: left;
    width: 40px;
}

.phone .Menu_DropDownPanel,
.tablet .Menu_DropDownPanel {
    margin-top: auto;
}

/* $Notifications Panel */

.IconBadge_number {
    background: #623b90;
}

.supertrigger {
    background: tomato;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    height: 50px;
    left: calc(50% - 100px);
    line-height: 50px;
    position: absolute;
    text-align: center;
    width: 200px;
}

/*The panel to Hold the Notifications */

.nav-right-panel {
    background: #fff;
    -webkit-box-shadow: 4px 0 12px -4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 4px 0 12px -4px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 0 12px -4px rgba(0, 0, 0, 0.3);
    display: block;
    height: 100vh;
    max-width: 256px;
    opacity: 1;
    position: fixed;
    top: 0;
    transform: translateX(-20px) scaleY(0.97);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.58, 1.4, 0.81, 1.01);
    width: 100%;
    z-index: 98;
}

.nav-right-panel.expanded {
    transform: translateX(240px);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.58, 1.4, 0.81, 1.01);
}

.tablet .nav-right-panel,
.phone .nav-right-panel {
    left: -100%;
    max-width: 100%;
    z-index: 10;
}

.tablet .nav-right-panel.expanded,
.phone .nav-right-panel.expanded {
    transform: translateX(100%);
    z-index: 1000;
}

/*Removes the shadow of the nav when the panel is expanded*/

.wodify-nav.rightpanelON {
    box-shadow: none;
}

.notifications-wrapper {
    background: #fff;
    height: auto;
    max-width: 256px;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 100%;
}

.desktop .notifications-wrapper:after {
    background: #fff;
    content: "";
    height: 100%;
    position: absolute;
    right: 0px;
    top: 40px;
    width: 19px;
    z-index: 0;
}

.tablet .notifications-wrapper {
    max-width: 420px;
    right: calc(50% - 225px);
    top: 30px;
    width: 100%;
}

.phone .notifications-wrapper {
    max-width: calc(100% - 40px);
    right: 20px;
    top: 30px;
}

.notifications-wrapper .notifications-title {
    font-size: 14px;
    font-weight: 600;
    padding: 15px;
    text-transform: uppercase;
}

.tablet .notifications-wrapper .notifications-title,
.phone .notifications-wrapper .notifications-title {
    font-size: 18px;
    padding: 0 15px 30px 0;
}

.notifications-wrapper > .IconDiv {
    font-size: 25px;
    height: 40px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: -5px;
    transition: all 0.3s;
    width: 40px;
}

.tablet .notifications-wrapper > .IconDiv,
.phone .notifications-wrapper > .IconDiv {
    font-size: 25px;
    height: 60px;
    right: -10px;
    top: -15px;
    width: 60px;
}

.notifications-wrapper > .IconDiv > span {
    position: relative;
    right: -5px;
    top: 15px;
    transition: all 0.3s;
}

.notifications-wrapper > .IconDiv:hover span .icon {
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
}

.notifications-wrapper .notifications-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px);
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
}

.tablet .notifications-wrapper .notifications-container,
.phone .notifications-wrapper .notifications-container {
    max-width: 100%;
}

.notifications-wrapper .notification-item,
.notifications-wrapper .notifications-container .notification-item-holder .nt-url .notification-item {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #000;
    display: flex;
    flex-direction: row;
    /*height: 80px;*/
    min-height: 80px;
    /* max-height: 80px;*/
    padding: 15px 25px 20px 25px;
    position: relative;
    transition: all 0.5s;
    width: 100%;
}

.notifications-wrapper .notification-item-holder.UnRead .notification-item {
    background: #f6f5f9;
}

.notification-item-holder a.nt-url span .icon {
    color: #21084f;
    font-size: 16px;
    position: absolute;
    right: 8px;
    top: 10px;
    width: 16px;
    z-index: 1;
}

.notifications-wrapper .notification-item.unread {
    background: rgba(98, 59, 144, 0.1);
    transition: all 0.5s;
}

.notifications-wrapper .notification-item .notification-img {
    color: #fff;
    content: "IMG";
    display: inline-block;
    font-size: 14px;
    height: 32px;
    pointer-events: none;
    width: 32px;
}

.notifications-wrapper .notification-item .notification-img > img {
    max-width: 32px;
    pointer-events: none;
    width: 32px;
}

.notifications-wrapper .notification-item .notification-text {
    max-width: 156px;
    padding: 0 0 5px 10px;
    pointer-events: none;
    width: 100%;
}

.notifications-wrapper .notification-item .notification-date {
    bottom: 5px;
    left: 67px;
    opacity: 0.3;
    position: absolute;
}

.tablet .notifications-wrapper .notification-item .notification-text,
.phone .notifications-wrapper .notification-item .notification-text {
    max-width: 356px;
}

.notifications-wrapper .notifications-bottom-actions {
    padding-top: 50px;
    text-align: center;
    width: 100%;
}

.tablet .notifications-wrapper .notifications-bottom-actions {
    padding-top: 25px;
}

.notifications-wrapper a.dismiss-all {
    color: #623b90;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.dismiss-this {
    align-items: center;
    background: transparent;
    bottom: -5px;
    display: flex;
    height: 45px;
    opacity: 1;
    opacity: 0;
    position: absolute;
    right: -10px;
    text-align: center;
    transition: all 0.3s;
    width: 45px;
    z-index: 99;
}

.dismiss-this .icon {
    color: #623b90;
    font-size: 26px;
}

.dismiss-this > a.ntDismissThis {
    font-size: 13px;
    padding-right: 5px;
    pointer-events: none;
    width: 100%;
}

.notifications-wrapper .notification-item-holder:hover .dismiss-this {
    /*transform: translateX(-100%);*/
    opacity: 1;
    transition: all 0.2s;
}

.notifications-wrapper .notification-item-holder:hover .dismiss-this > a.ntDismissThis {
    opacity: 1;
    pointer-events: initial;
}

/*Remove Item animation*/

.notification-item.slide {
    animation-duration: 0.4s;
    transform: translateX(-100%);
    transform-origin: top left;
    transition: all 0.4s;
}

.notification-item-holder {
    max-height: 250px;
    opacity: 1;
    position: relative;
    transition: max-height 0.3s ease-in;
    transition: all 0.3s;
}

.notification-item-holder.smash {
    max-height: 0;
    opacity: 0;
    transition: all 0.3s;
    transition: max-height 0.3s ease-out;
}

.nav-right-panel .no-notifications {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 28px;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: calc(50vh - 160px);
}

.nav-right-panel .no-notifications p {
    opacity: 0.3;
    padding-top: 15px;
}

.nav-right-panel .no-notifications .nt-nont-icon {
    max-width: 85px;
    width: 100%;
}

/* ------- Adjusts for the Beta Notifications -------*/

.beta-nt .Notification_Content_PostDateTime {
    bottom: 0;
    display: none;
    font-size: 12px;
    font-style: italic;
    left: 65px;
    opacity: 0.5;
    position: absolute;
}

.beta-nt .notification-item:hover .dismiss-this {
    opacity: 1;
    transition: all 0.3s;
}

.notification-item:hover .dismiss-this > a.ntDismissThis {
    opacity: 1;
    pointer-events: initial;
}

.beta-nt.notifications-wrapper .notification-item:hover {
    transition: all 0.3s;
}

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

/* Global Filter */

.GlobalFilter {
    margin-bottom: 10px;
}

/* Page content header */

.HeaderPage {
    display: block;
}

.HeaderPage .BreadcrumbsContainer {
    margin-bottom: 5px;
    margin-left: 20px;
}

.HeaderPage .BreadcrumbsContainer .Breadcrumbs,
.HeaderPage .BreadcrumbsContainer .Breadcrumbs a,
.HeaderPage .BreadcrumbsContainer .Breadcrumbs span {
    font-size: 14px;
    margin-bottom: 0;
}

/* Mobile Page Title */

.phone .PageTitle,
.tablet.portrait .PageTitle {
    text-align: left;
}

.phone .Title,
.minitablet .Title {
    font-size: 22px;
    padding: 10px 20px;
}

/*
.Title.Heading1 {
    margin-top: 0;
    padding-left: 20px;
    margin-bottom: 20px;


}

.phone .Title.Heading1 {
    margin-bottom: 15px;
}

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

.phone .Title.Heading1 {
    padding-left: 10px;

}

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

/* Page actions */

.ActionsContainer .ActionButton {
    display: inline-block;
    vertical-align: middle;
}

.ActionsContainer .ActionButton.More {
    margin-left: 10px;
}

.ActionsContainer .TableVerticalAlign .Cell1,
.ActionsContainer .TableVerticalAlign .Cell2 {
    padding: 0;
}

.Actions {
    font-size: 14px;
    text-align: right;
}

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

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

a.ActionAdd,
a.ActionEdit,
a.ActionDelete,
a.ActionChange {
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
    -moz-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: #d7d7d8;
    box-shadow: none;
    color: #999;
}

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

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

a.ActionAdd:hover {
    background-color: #3979c1;
    border-bottom: 2px solid #5d3e92;
}

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;
}

/* Wrapper content */

body .tablet .Content.ThemeGrid_Wrapper,
body .phone .Content.ThemeGrid_Wrapper {
    left: 0;
    overflow: hidden;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

/* Content */

.MainContent {
    margin: 0 auto;
    /*background-color: #ffffff;
    padding: 20px;
    max-width: 1200px;*/
    width: 100%;
}

.MainContent > div {
    background-color: #fff;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    padding: 15px;
}

.MainContent > div.Fill {
    background: #5d3e92;
    color: #fff;
    margin-bottom: 15px;
}

.phone .MainContent {
    margin-left: 0;
    margin-right: 0;
}

/* footer */

.Footer {
    background-color: transparent;
    font-size: 12px;
    padding: 10px 0;
    text-align: center;
    top: 100%;
    width: auto;
    /*height: 40px; */
    /**/
}

.phone .Footer {
    background: #fff;
}

.MainPopup {
    background: #fff;
    display: table-cell;
    min-width: 320px;
    padding: 14px 16px;
    vertical-align: top;
}

.PopupColor .MainPopup {
    padding: 0;
}

.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
\*-------------------------------------*/

textarea,
select,
input {
    border: 1px solid #c7c7c7;
    border-radius: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 14px;
}

/*input[type='text'],
input[type='search'],
input[type='password'],
input[type='email'],
input[type='date'],
textarea,
select {

}*/

input[type="text"].Not_Valid,
input[type="password"].Not_Valid,
input[type="date"].Not_Valid {
    padding: 0 12px;
}

html input {
    height: 34px;
}

/* radio and checkbox override rules */

html input[type="radio"],
html input[type="checkbox"] {
    background-color: transparent;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

html input[type="radio"] {
    height: 24px;
    width: 24px;
}

html input[type="checkbox"] {
    height: 24px;
    -webkit-transition: box-shadow 0.3s ease-out;
    transition: box-shadow 0.3s ease-out;
    width: 24px;
}

html input[type="file"] {
    border: none;
    font-size: small;
}

input[type="radio"]:before {
    background-color: #fff;
    border: 1px solid #8890a4;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: none;
    -moz-box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);
    box-shadow: none;
    display: block;
}

input[type="radio"]:checked:before {
    background-color: #5d3e8c;
    border-color: transparent;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);
    /* border: none; */
    display: block;
}

input[type="checkbox"]:before {
    border: none;
    border: 1px solid #8890a4;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

input[type="checkbox"]:after {
    border: 1px solid #fff;
    border-right: 0;
    border-top: 0;
    color: #fff;
    content: " ";
    display: block;
    height: 6px;
    left: 27%;
    opacity: 0;
    position: absolute;
    top: 32%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 12px;
}

input[type="checkbox"]:checked:before {
    background-color: #5d3e8c;
    -webkit-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.16);
}

input[type="radio"]:after {
    background-color: white;
    border: 0;
    content: "";
    height: 10px;
    left: 8px;
    position: absolute;
    top: 8px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 10px;
}

/* force padding to center vertically on Firefox */

select {
    /*box-shadow: none !important;*/
    /* !imp to override */
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    color: #141414;
    height: 32px;
    line-height: 1.43;
    padding: 4px 18px 4px 5px;
}

.phone select,
.tablet select {
    height: 38px;
}

.phone.portrait input[type="text"],
.phone.portrait textarea,
.phone.portrait select {
    width: 100%;
}

.phone.landscape input[type="text"],
.phone.landscape textarea,
.phone.landscape select {
    width: 80%;
}

/* Use for widget InlineDropDown from W_Widgets_UI*/

.DivCombobox {
    display: inline;
    font-family: FontAwesome;
    height: 34px;
    position: relative;
}

.DivCombobox:after {
    content: "\f0dc";
    padding: 0 0 2px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 50%;
}

.DivCombobox:before {
    background: #fff;
    content: "";
    display: block;
    height: 20px;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 50%;
    width: 10px;
}

.DivCombobox select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none;
    display: inline-block;
    height: 34px;
    margin: 0;
}

.Form .InputPlaceholder,
.Form .InputPlaceholder a {
    font-size: 15px;
}

.Form .InputPlaceholder {
    margin: 5px 0;
}

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    background-color: #fff;
    font-size: 14px;
    vertical-align: middle;
}

.Form input[type="checkbox"] {
    margin-bottom: 0;
    margin-top: 0;
}

.Form input[type="checkbox"].ReadOnly {
    /* Prevent checkboxes from shifting inside forms */
    vertical-align: initial;
}

.Form input.ReadOnly:not(.Not_Valid),
.Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid) {
    border-color: #c7c7c7;
}

/* Don't show the undo link */

a.SmartInput_Undo {
    display: none !important;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="checkbox"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
textarea:hover {
    -webkit-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

input[type="text"]:focus,
input[type="number"]:hover,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    border: 1px solid #8890a4;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* Search input add search icon and padding */

.SearchInput {
    position: relative;
}

.SearchInput:after {
    color: #ccc;
    content: "\e3bc";
    font-family: "retinafont";
    left: 15px;
    position: absolute;
    top: 3px;
}

.SearchInput input[type="search"] {
    padding-left: 35px;
}

.Search_wrapper {
    font-family: "Source Sans Pro", sans-serif;
}

.Search_wrapper:after {
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20fill%3D%22%238a8a8a%22%3E%3Cg%20transform%3D%22translate(12%2012)%22%3E%3Cpolygon%20transform%3D%22translate(27%2028)translate(8.023833%207.159517)rotate(-315)translate(-8.023833%20-7.159517)%22%20points%3D%2216%205.2%2016%209.2%200.1%209.1%200.1%205.1%22%2F%3E%3Cpath%20d%3D%22M36%2018C36%208.1%2027.9%200%2018%200%208.1%200%200%208.1%200%2018%200%2027.9%208.1%2036%2018%2036%2027.9%2036%2036%2027.9%2036%2018ZM4%2018C4%2010.3%2010.3%204%2018%204%2025.7%204%2032%2010.3%2032%2018%2032%2025.7%2025.7%2032%2018%2032%2010.3%2032%204%2025.7%204%2018Z%22%2F%3E%3Cpath%20d%3D%22M7%2018L11%2018C11%2014.1%2014.1%2011%2018%2011L18%207C11.9%207%207%2011.9%207%2018Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        center center no-repeat;
    color: #717171;
    content: "";
    font-family: "Source Sans Pro", sans-serif;
    height: 32px;
    left: 3px;
    position: absolute;
    top: 2px;
    width: 32px;
}

.Search_wrapper input[type="text"],
.Search_wrapper input[type="search"] {
    -webkit-appearance: none;
    border: 1px solid #d8d8d8;
    border-radius: none;
    border-radius: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    height: 36px;
    line-height: normal;
    padding-left: 36px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    vertical-align: top;
}

.Search_wrapper input[type="text"]:focus,
.Search_wrapper input[type="search"]:focus {
    border-color: #c7c7c7;
    -webkit-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    -moz-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    outline: 0;
}

.Search_wrapper input[readonly="readonly"],
.Search_wrapper input[disabled="disabled"],
.Search_wrapper input[readonly="readonly"]:focus,
.Search_wrapper input[disabled="disabled"]:focus {
    background-color: #f0f1f6;
    border-color: #f0f1f6;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*.desktop .Search_wrapper:after {
    top: 2px;
}*/

.Search_wrapper .Button.Border {
    border: 1px solid #d8d8d8;
}

.ie8 input[type="text"],
.ie8 input[type="password"] {
    line-height: 32px;
}

/* Disabled checkbox colors */

input[type="radio"]:disabled:before,
input[type="checkbox"]:disabled:before {
    background: #e6e6e6;
}

input[type="checkbox"]:disabled:checked:after {
    border-color: #b9b9b9;
}

.GraySmallUppercase,
.Form .InputLabel,
.Form .InputLabel label,
.UnderlineInput .InputLabel {
    color: #8e8e8e;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.Form .InputLabel,
.Form .InputLabel label,
.UnderlineInput .InputLabel {
    padding-top: 0 !important;
    vertical-align: top;
    width: 100%;
}

.Form label + input,
.Form label + select,
.Form label + textarea {
    margin: 5px 0 0 0;
}

label.MandatoryLabel:after {
    color: #bf1601;
    content: "*";
    font-size: 12px;
    font-weight: normal;
    padding: 0 5px 5px 3px;
    position: absolute;
}

/* Hiding the Edit Form Pencil */

.FormEditPencil,
.Form:not(.WithTouchEvents) input.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil,
.Form:not(.WithTouchEvents) textarea.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil,
.Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil {
    display: none;
}

input[readonly="readonly"],
input[disabled="disabled"],
select[disabled="disabled"] {
    background-color: #f3f3f3 !important;
    border-color: #d3dbe2 !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: rgb(186, 180, 180) !important;
    cursor: default !important;
}

input[type="number"] {
    min-width: 50px;
    padding-right: 2px;
}

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

/* filter form */

.Filters_Wrapper {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 0;
    line-height: 34px;
    padding: 20px;
}

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

.phone .Filters input[type="submit"],
.phone .Filters input[type="password"],
.phone .Filters input[type="text"],
.phone .Filters input[type="search"],
.phone .Filters input[type="datetime"],
.phone .Filters input[type="date"],
.phone .Filters input[type="time"],
.phone .Filters input[type="number"],
.phone .Filters .OSInline,
.phone .Filters select {
    margin-bottom: 10px;
    margin-left: 0 !important;
    width: 100%;
}

/*editable table*/

.EditableTable {
    border: 1px solid #dedede;
    border-radius: 0;
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.EditableTable thead td,
.EditableTable thead th {
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
    color: #7c7c7c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    padding: 10px 0 10px 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.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 {
    /* same as background */
    background: #fafcff;
    border: 1px solid #ddd;
    border-top: 2px solid #fafcff;
    left: 50%;
    margin-left: -82px;
    margin-top: -2px;
    padding: 6px;
}

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

/* Save, Cancel, Delete Action Colors */

.EditableTable tr.RowControlGroup a.SaveRowAction {
    color: #5d3e92;
}

.EditableTable tr.RowControlGroup a.SaveRowAction:hover {
    color: #609ee6;
}

.EditableTable tr.RowControlGroup a.CancelRowAction {
    color: #9b9b9b;
}

.EditableTable tr.RowControlGroup a.CancelRowAction:hover {
    color: #666;
}

.EditableTable tr.RowControlGroup a.DeleteRowAction {
    color: #9b9b9b;
}

.EditableTable tr.RowControlGroup a.DeleteRowAction:hover {
    color: #d56565;
}

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;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /* override readonly color to look like labels*/
    color: #666;
    font-size: 14px;
}

/* edit record */

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

.TableRecords_Wrapper {
    overflow-x: auto !important;
}

.TableRecords_WrapperOverflowY--small {
    max-height: 200px;
    overflow-y: auto;
}

.TableRecords_WrapperOverflowY--small::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.TableRecords_WrapperOverflowY--small::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* fix Wod List */

.phone .WODTable_Wrapper .TableVerticalAlign .Cell:nth-child(2) {
    min-width: 20px;
    width: 20px;
}

.phone .WODTable_Wrapper .TableVerticalAlign .Cell.FullWidth {
    min-width: 100%;
    width: 100%;
}

.TableRecords_Header {
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
    color: #7c7c7c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    padding: 10px;
    text-transform: capitalize;
    text-transform: uppercase;
    white-space: nowrap;
}

.SortColumns_Sorted {
    color: #111;
}

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

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

table.EditRecord tr td:last-child,
table.ShowRecord tr td:last-child {
    padding-right: 20px;
}

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

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

.tablet .EditRecord td,
.phone .EditRecord td,
.tablet .ShowRecord td,
.phone .ShowRecord td {
    display: block;
    float: left;
    width: 100%;
}

.tablet table.EditRecord tr td:last-child,
.phone table.EditRecord tr td:last-child {
    padding-left: 20px;
    padding-top: 5px;
}

.tablet table.ShowRecord tr td:last-child,
.phone table.ShowRecord tr td:last-child {
    padding-left: 20px;
    padding-top: 5px;
}

.tablet table.EditRecord tr:last-child td:first-child,
.phone table.EditRecord tr:last-child td:first-child {
    padding-bottom: 0;
    padding-top: 5px;
}

.tablet table.ShowRecord tr:last-child td:first-child,
.phone table.ShowRecord tr:last-child td:first-child {
    padding-bottom: 0;
}

/* Down arrow on tablet & mobile */

.TableRecords {
    margin-top: 0;
}

.tablet.portrait .TableRecords td:first-child,
.mini.tablet .TableRecords td:first-child,
.phone .TableRecords td:first-child {
    position: relative;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td:first-child:before,
.mini.tablet .TableRecords:not(.NoResponsive) > * > * > td:first-child:before,
.phone .TableRecords:not(.NoResponsive) > * > * > td:first-child:before {
    position: absolute;
    right: 10px;
    top: 15px;
}

.tablet.portrait .TableRecords:not(.NoResponsive),
.mini.tablet .TableRecords:not(.NoResponsive),
.phone .TableRecords:not(.NoResponsive) {
    padding: 0;
    width: 100%;
}

.tablet.portrait .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_OddLine div > .tooltipstered,
.tablet.portrait .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_EvenLine div > .tooltipstered,
.mini.tablet .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_OddLine div > .tooltipstered,
.mini.tablet .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_EvenLine div > .tooltipstered,
.phone .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_OddLine div > .tooltipstered,
.phone .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_EvenLine div > .tooltipstered {
    margin-top: -24px;
    position: absolute;
    right: 10px;
}

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

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

.TableRecords {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.TableRecords tr:nth-child(even) {
    background-color: #f4f4f4;
}

/* Hover row cell background color */

.TableRecords tr:hover .TableRecords_OddLine,
.TableRecords tr:hover .TableRecords_EvenLine {
    background: #f4f5f8;
}

/* Invalid row cell background color */

.TableRecords tr.Invalid .TableRecords_OddLine,
.TableRecords tr.Invalid .TableRecords_EvenLine {
    background: rgba(255, 88, 71, 0.35);
}

/* Bulk select override first table header column to 50px wide */

.BulkSelectTable .TableRecords_Header:first-child {
    /*width: 50px !important;*/
}

/* Selected row with bulk select gets background color change */

tr.IsSelected .TableRecords_OddLine,
tr.IsSelected .TableRecords_EvenLine {
    background: #f4f5f8 !important;
}

.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;
}

.TableRecords_OddLine {
    background: #fff;
}

.TableRecords_EvenLine {
    background: #fff;
}

.BasicTable .TableRecords_EvenLine {
    background: #fff;
}

.ZebraStripedTable .TableRecords_EvenLine {
    background: #f7f7f7;
}

.HiddenCheckBoxContent {
    background-color: #f4f5f8;
}

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

/* Feedback Message */

div.Feedback_Message_Info:before,
div.Feedback_Message_Success:before,
div.Feedback_Message_Error:before,
div.Feedback_Message_Warning:before {
    display: none;
}

div.Feedback_Message_Success {
    background-color: #5aac6b;
    border-color: #5aac6b;
    border-radius: 0;
    color: white;
}

div.Feedback_Message_Error {
    background-color: #ec5a48;
    border-color: #ec5a48;
    border-radius: 0;
    color: white;
}

div.Feedback_Message_Warning {
    background-color: #ffc32b;
    border-color: #ffc32b;
    border-radius: 0;
    color: white;
}

div.Feedback_Message_Info {
    background-color: #5d3e92;
    border-color: #5d3e92;
    border-radius: 0;
    color: white;
}

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

div.Feedback_Message_Wrapper {
    left: 276px;
    margin-top: 2px;
    right: 0 !important;
    width: inherit !important;
    z-index: 9999;
}

.is-reactive .Feedback_Message_Wrapper {
    left: 0 !important;
}

.phone + span div.Feedback_Message_Wrapper,
.phone div.Feedback_Message_Wrapper,
.tablet + span div.Feedback_Message_Wrapper,
.tablet div.Feedback_Message_Wrapper {
    left: 0;
}

.Page div.Feedback_Message_Wrapper {
    margin-top: 2px;
    right: 0 !important;
    width: inherit !important;
}

div.Feedback_Message_Error,
div.Feedback_Message_Success,
div.Feedback_Message_Warning,
div.Feedback_Message_Info {
    -webkit-backface-visibility: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -moz-box-sizing: border-box;
    box-sizing: none;
    color: white;
    line-height: normal;
    max-width: 100%;
    min-width: 300px;
    text-align: center;
    width: 100%;
    word-break: break-word;
    z-index: 9999;
}

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

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: #000;
    content: "\f089";
    font-family: "retinafont";
    /* font-weight: 500; */
    font-size: 14px;
    /* padding: 5px 0; */
    /* margin-top: 15px; */
    text-align: right;
    vertical-align: middle;
}

a.Feedback_Message_Wrapper_Close:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

span.Feedback_Message_Text {
    padding-left: 0;
}

/* Ajax Loading */

/* Pagination */

a.ListNavigation_PageNumber:link,
span.ListNavigation_CurrentPageNumber,
span.ListNavigation_Ellipsis {
    background-color: #fff;
    border-bottom: 2px solid #d7d7d8;
    border-left: 1px solid #d7d7d8;
    border-radius: 0;
    border-right: 1px solid #d7d7d8;
    border-top: 1px solid #d7d7d8;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
    color: #48687c;
    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 {
    background-color: #d7d7d8;
    box-shadow: none;
    color: #999;
    cursor: default;
}

a.ListNavigation_Previous:link,
a.ListNavigation_Next:link,
span.ListNavigation_DisabledNext,
span.ListNavigation_DisabledPrevious {
    background-color: #fff;
    border-bottom: 2px solid #d7d7d8;
    border-left: 1px solid #d7d7d8;
    border-radius: 0;
    border-right: 1px solid #d7d7d8;
    border-top: 1px solid #d7d7d8;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.05);
    color: #48687c;
    padding-bottom: 5px;
    padding-top: 5px;
    text-decoration: none;
}

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

.InfiniteScrollLoadMore {
    display: block;
    margin: 0;
    padding: 15px;
}

.InfiniteScrollLoadMore:hover {
    background: #f6fafa;
}

div.Feedback_AjaxWait {
    background-color: rgba(0, 0, 0, 0.15);
    bottom: 0;
    color: transparent;
    font-size: 12px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

.ie .Feedback_AjaxWait:not(.ie11):not(.ie10) {
    border: 1px solid #dddedf;
    height: 70px;
    padding-top: 0;
    z-index: 10000;
}

.ie .Feedback_AjaxWait .Loader {
    -webkit-animation: none;
    animation: none;
    background: url("/Patterns/img/ajaxloader_new.gif?6356&34386&34536&35700&36124") no-repeat;
    background-position: 8px 9px;
    height: 81%;
    margin-bottom: 0;
    width: 100%;
}

.Feedback_AjaxWait:after {
    background: white;
    border-radius: 0;
    color: #48687c;
    content: "Loading";
    font-size: 13px;
    left: 50%;
    margin-left: -25px;
    margin-top: -15px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 40px;
    position: fixed;
    top: 50%;
}

.Feedback_AjaxWait .Loader {
    -webkit-animation: loader 1.3s infinite linear;
    animation: loader 1.3s infinite linear;
    border-radius: 50%;
    font-size: 4px;
    height: 1em;
    left: 50%;
    position: fixed;
    top: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    width: 1em;
    z-index: 9000;
}

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

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

/* select2 style overrides */

.select2-container .select2-choice {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    color: #48687c;
    /*box-shadow: none !important;*/
    color: #333;
    font-size: 14px;
    height: 34px;
    line-height: 1.43;
    padding: 5px 8px;
    padding-right: 18px;
}

.select2-container .select2-choice span {
    font-weight: normal;
    line-height: inherit;
}

.select2-container .select2-choice div b {
    display: none;
}

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

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

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

/* Tooltipster_v4 w-darkOnLight Theme */

.tooltipster_v4-sidetip.tooltipster_v4-show.w-darkOnLight {
    pointer-events: auto;
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-box {
    background: #edebf3;
    border: none;
    border-radius: 0;
    box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.16);
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-content {
    color: rgba(0, 0, 0, 0.8);
    font-size: 13px;
    padding: 16px;
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-arrow {
    height: 32px;
    width: 32px;
    z-index: 2;
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-arrow * {
    display: none;
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-arrow:after {
    border: solid transparent;
    border-color: transparent;
    border-width: 16px;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    width: 0;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-top .tooltipster_v4-arrow {
    bottom: 0;
    margin-bottom: -12px;
    margin-left: -16px;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-top .tooltipster_v4-arrow:after {
    border-top-color: #edebf3;
    bottom: 16px;
    left: 50%;
    margin-bottom: -22px;
    margin-left: -16px;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-right .tooltipster_v4-arrow {
    margin-left: -6px;
    margin-top: -16px;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-right .tooltipster_v4-arrow:after {
    border-right-color: #edebf3;
    margin-right: -16px;
    margin-top: 0;
    right: 100%;
    top: 0;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-bottom .tooltipster_v4-arrow {
    margin-left: -16px;
    margin-top: -12px;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-bottom .tooltipster_v4-arrow:after {
    border-bottom-color: #edebf3;
    left: 50%;
    margin-left: -16px;
    margin-top: -6px;
    top: 0;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-left .tooltipster_v4-arrow {
    margin-right: -6px;
    margin-top: -16px;
}

.tooltipster_v4-sidetip.w-darkOnLight.tooltipster_v4-left .tooltipster_v4-arrow:after {
    border-left-color: #edebf3;
    left: 100%;
    margin-left: -16px;
    margin-top: 0;
    top: 0;
}

/* Tooltipster_v4 w-dropDown Theme */

.tooltipster_v4-sidetip.w-darkOnLight,
.tooltipster_v4-sidetip.w-dropDown {
    z-index: 98 !important;
}

.tooltipster_v4-sidetip.tooltipster_v4--aboveModal {
    z-index: 110 !important;
}

.tooltipster_v4-sidetip.w-dropDown .tooltipster_v4-box {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.tooltipster_v4-sidetip.w-dropDown .tooltipster_v4-box,
.tooltipster_v4-sidetip.w-dropDown .tooltipster_v4-content {
    overflow: visible;
    padding: 0;
}

.tooltipster_v4-sidetip.w-dropDown .tooltipster_v4-arrow {
    display: none;
}

.tooltipster_v4-sidetip.w-dropDown.tooltipster_v4-top .DropdownMenu:after,
.tooltipster_v4-sidetip.w-dropDown.tooltipster_v4-top .DropdownMenu:before {
    bottom: initial;
    top: 100%;
}

.tooltipster_v4-sidetip.w-dropDown.tooltipster_v4-top .DropdownMenu:after {
    border-bottom-color: transparent;
    border-top-color: #fff;
}

.tooltipster_v4-sidetip.w-dropDown.tooltipster_v4-top .DropdownMenu:before {
    border-bottom-color: transparent;
    border-top-color: #9b9b9b;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu {
    display: block;
    left: initial;
    margin-top: 2px;
    position: relative;
    top: initial;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu .ListRecords > ul {
    list-style: none;
    padding-left: 0;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH {
    align-items: center;
    color: #141414;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    line-height: 20px;
    padding: 6px 10px;
    white-space: nowrap;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH .aside {
    color: #999;
    font-size: 11px;
    line-height: 18px;
    margin-left: 16px;
    margin-top: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH:hover {
    background: #5d3e8c;
    color: #fff;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH.active,
.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH.active:hover {
    background: #e5e2ed;
    color: #141414;
}

.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH.disabled,
.tooltipster_v4-sidetip.w-dropDown .DropdownMenu span.PH.disabled:hover {
    background: transparent;
    color: #141414;
    cursor: default;
    opacity: 0.5;
}

.InlineDropdown_label.tooltipstered_v4 .fa {
    transition: all 0.2s;
}

.InlineDropdown_label.tooltipstered_v4.opened .fa {
    transform: rotate(-180deg);
}

/* tooltipster_v4 w_lightOnDark Theme */

.tooltipster_v4-sidetip.w_lightOnDark .tooltipster_v4-box {
    background: #2a2a2a;
    border: none;
    border-radius: 0;
}

.tooltipster_v4-sidetip.w_lightOnDark .tooltipster_v4-content {
    color: #d7d7d8;
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
    padding: 8px 10px;
}

.tooltipster_v4-sidetip.tooltipster_v4-right.w_lightOnDark .tooltipster_v4-arrow-border,
.tooltipster_v4-sidetip.tooltipster_v4-right.w_lightOnDark .tooltipster_v4-arrow-background {
    border-right-color: #2a2a2a;
}

.tooltipster_v4-sidetip.tooltipster_v4-left.w_lightOnDark .tooltipster_v4-arrow-border,
.tooltipster_v4-sidetip.tooltipster_v4-left.w_lightOnDark .tooltipster_v4-arrow-background {
    border-left-color: #2a2a2a;
}

/* tooltipster_v4 Content */

.tooltipster_v4-content .section {
    padding: 0 0 10px 0;
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-content .section .title {
    align-items: center;
    color: #000;
    display: flex;
}

.tooltipster_v4-content .section .title .icon {
    font-size: 24px;
    margin: 0 4px -3px -6px;
}

.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-content .section .title .icon,
.tooltipster_v4-sidetip.w-darkOnLight .tooltipster_v4-content .section .title .icon use > svg {
    color: rgba(0, 0, 0, 0.7);
}

.tooltipster_v4-content .section .content {
    padding: 2px 0;
}

.tooltipster_v4-content .PH .tooltip-icon + .tooltip-content {
    display: none;
}

/* WDFY-3377 - Prevent initial .tooltip content from increasing .TableRecords_Header elements height (it was causing a bug on BulkSelect widget) */

.TableRecords_Header .tooltip-content {
    position: absolute;
}

/* WDFY-3870 - in phone make tooltip show in row instead of header (.phone and .tablet.portrait) */

.tooltip--inTableRow {
    display: block;
    position: relative;
}

.desktop .tooltip--inTableRow,
.tablet.landscape .tooltip--inTableRow {
    display: none;
}

.tooltip--inTableRow .tooltip-icon {
    left: 0;
    position: absolute;
    top: -39px;
}

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

.Responsive .Feedback_Message_Wrapper {
    margin-top: 0;
}

.Login_Footer {
    display: none;
}

.Login__Form {
    background-color: rgba(51, 56, 68, 0.85);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
    padding: 30px 50px 50px 50px;
}

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

.phone .Login__Form {
    padding: 20px;
}

.Login__Form .login-title {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    left: 50px;
    line-height: 16px;
    position: absolute;
    top: 85px;
}

.Login__Form .PanelError {
    margin: 20px 0 0 0;
}

.Login__Form .Button.Is_Default {
    background: #fff;
    border-color: transparent;
    color: #333;
    font-size: 18px;
    font-weight: normal;
    height: 40px;
    width: 100%;
}

.Login__Form .Button.Is_Default:hover {
    background: #5d3e92;
    border-color: transparent;
    color: #fff;
}

.Buttons_Right a {
    color: #fff;
}

.Login__Form input[type="text"],
.Login__Form input[type="password"] {
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    padding-left: 50px;
    width: 100%;
}

.Login__Form .UserName,
.Login__Form .UserPass,
.Login__Form .UserNameError,
.Login__Form .UserPassError {
    position: relative;
}

.Login__Form .UserName:before,
.Login__Form .UserPass:before,
.Login__Form .UserNameError:before,
.Login__Form .UserPassError:before {
    background-color: #9b9b9b;
    color: #fff;
    font: bold normal normal 24px "retinafont";
    height: 25px;
    line-height: 28px;
    padding: 10px;
    position: absolute;
    top: 0;
}

.Login__Form .UserName:before,
.Login__Form .UserPass:before {
    background-color: #9b9b9b;
}

.Login__Form .UserNameError:before,
.Login__Form .UserPassError:before {
    background-color: #ec5a48;
    border-radius: 0;
}

.Login__Form .UserName:before,
.Login__Form .UserNameError:before {
    content: "\f0c9";
}

.Login__Form .UserPass:before,
.Login__Form .UserPassError:before {
    content: "\f0e1";
}

.Login__Form .UserNameError span,
.Login__Form .UserPassError span {
    font-family: "Helvetica Neue Regular", Helvetica, Arial, sans-serif;
}

.Login__Form .ValidationMessage {
    color: #ff0000;
    font-weight: 600;
    padding: 5px 0 0;
}

.Login_Box {
    margin-left: -225px;
    top: 50%;
    width: 450px;
}

.phone .Login_Box {
    margin-left: -175px;
    width: 350px;
}

@media (max-width: 350px) {
    .phone .Login_Box {
        left: 0;
        margin-left: 0;
        width: 100%;
    }
}

.Login__Logo {
    background: #333844;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 18px 20px -6px #000;
    padding: 5px 0;
}

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

.phone .Login_Box .TableVerticalAlign {
    /*margin: 0 auto 10px;*/
}

.phone .Login_Box div[class*="ThemeGrid_Width"] {
    text-align: center;
}

/* New Login */

.loginLayout {
    text-align: center;
}

.loginLayout .Login__Form > div {
    margin-top: 0 !important;
    /* because of SilkUI inline styles :( */
}

.loginLayout-title.heading {
    color: #fff;
    line-height: 1.3;
    margin: 20px 0 0 0;
}

.loginLayout-text {
    padding: 5px 0;
}

.loginLayout-text .paragraph--big {
    padding: 5px 0;
}

.loginLayout-userName,
.loginLayout-userPass,
.Login__Form .PanelError {
    margin: 20px 0 0 0;
}

.loginLayout-actions,
.loginLayout-actions .Button {
    margin: 15px 0 0 0;
}

.loginLayout .Login__Form .Button {
    font-size: 18px;
    font-weight: normal;
    height: 40px;
    width: 100%;
}

.loginLayout--finalize .loginLayout-title.heading,
.loginLayout--finalizePassword .loginLayout-title.heading {
    padding: 0 0 10px 0;
}

.loginLayout--finalize .Button,
.loginLayout--finalizePassword .Button {
    margin: 20px 0 0 0;
}

.loginLayout--finalize .loginLayout-buttonsArea2 .Button:first-child {
    margin: 30px 0 0 0;
}

.loginLayout--forgotPassword .Login__Form {
    padding: 30px 50px 40px 50px;
}

.loginLayout--forgotPassword .loginLayout-userName {
    margin: 10px 0 20px 0;
}

.loginLayout--forgotPassword .Login__Form .Button {
    margin-bottom: 15px;
}

.loginLayout--actionCompleted .Login__Form {
    padding: 30px 30px 40px 30px;
    text-align: center;
}

.loginLayout--actionCompleted .Login__Form .Button {
    margin: 20px auto 10px auto;
    max-width: 350px;
    width: 100%;
}

.loginLayout--actionCompleted .Login__Form .loginLayout-text {
    padding: 5px 0 15px 0;
}

/* choose tenant */

.loginLayout-tenantsContainer {
    display: block;
    margin: 0 auto;
    max-width: 350px;
    padding: 30px 0 20px 0;
    width: auto;
}

.loginLayout-chooseTenantButton {
    background: #fafafa;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 1px #d7d6d7;
    color: #4a4a4a;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    height: 55px;
    line-height: 18px;
    margin: 0 1px 1px 1px;
    max-width: 348px;
    padding: 0 0;
    padding: 0 0;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: auto;
    word-break: break-all;
}

.loginLayout-chooseTenantButton:hover {
    background-color: #e8eaec;
}

a.loginLayout-chooseTenantButtonLink,
a.loginLayout-chooseTenantButtonLink:link,
a.loginLayout-chooseTenantButtonLink:visited {
    color: #4a4a4a;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    height: 55px;
    justify-content: center;
    line-height: 18px;
    max-width: 348px;
    padding: 0 86px 0 25px;
    position: relative;
    text-decoration: none;
    word-break: break-all;
}

.loginLayout-chooseTenantButton .ri {
    color: #717171;
    font-size: 14px;
    margin-top: -7px;
    position: absolute;
    right: 20px;
    top: 50%;
}

.loginLayout-chooseTenantButton .icon {
    margin-top: -8px;
    position: absolute;
    right: 46px;
    top: 50%;
}

/* inactive tenants */

.loginLayout-tenantsContainer--inactive {
    padding: 0 0;
}

.loginLayout-tenantsContainer--inactive .loginLayout-chooseTenantButton {
    background-color: #afafaf;
    border-bottom: 1px solid #d7d6d7;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0;
    max-width: 350px;
    padding: 0 25px 0 25px;
    text-align: center;
    width: auto;
    word-break: break-all;
}

.loginLayout-tenantsContainer--inactive .loginLayout-chooseTenantButton:hover {
    background-color: #afafaf;
}

.loginLayout-tenantsContainer--inactive .loginLayout-chooseTenantButton:last-child {
    border-bottom: none;
}

.loginLayout-chooseTenant .AccordionVertical {
    background-color: transparent;
    border: none;
    border-radius: 0;
    display: block;
    margin: 0 auto;
    max-width: 350px;
    overflow: hidden;
    width: auto;
}

.loginLayout-chooseTenant .AccordionVertical__header,
.loginLayout-chooseTenant .AccordionVertical_item.open .AccordionVertical__header {
    background-color: #9b9b9b;
    border: none;
    font-size: 16px;
    height: 45px;
    line-height: 25px;
    padding: 10px;
    position: relative;
}

.loginLayout-chooseTenant .AccordionVertical___title {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
}

.loginLayout-chooseTenant .AccordionVertical___icon {
    border: none;
    margin-top: -13px;
    position: absolute;
    right: 20px;
    top: 50%;
}

.loginLayout-chooseTenant .AccordionVertical_item.open .AccordionVertical___icon {
    margin-top: -10px;
}

.loginLayout-chooseTenant .AccordionVertical___icon > .fa,
.loginLayout-chooseTenant .AccordionVertical_item.open .AccordionVertical___icon > .fa {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
}

.loginLayout-chooseTenant .AccordionVertical__content {
    border: none;
    padding: 0;
}

.loginLayout-bottomLink {
    font-weight: 400;
    padding: 20px 0 0 0;
}

/* New Login Model Modal */

.updateToNewUserModelModal-modalContent {
    margin: 0 -30px -50px -30px;
    min-width: 660px;
    text-align: center;
}

.phone .updateToNewUserModelModal-modalContent,
.tablet.portrait .updateToNewUserModelModal-modalContent {
    min-width: 240px;
    padding: 0 20px;
}

.updateToNewUserModelModal-modalContent .Button,
.Login__Form .updateToNewUserModelModal-modalContent .Button,
.updateToNewUserModelModal-bottomArea--big .Button,
.Login__Form .updateToNewUserModelModal-bottomArea--big .Button {
    font-size: 15px;
    height: 36px;
    margin: 0 12px;
    width: 104px;
}

.updateToNewUserModelModal-modalContent .Button.Large,
.Login__Form .updateToNewUserModelModal-modalContent .Button.Large,
.updateToNewUserModelModal-bottomArea--big .Button.Large,
.Login__Form .updateToNewUserModelModal-bottomArea--big .Button.Large {
    width: 134px;
}

.updateToNewUserModelModal-tenantList {
    display: block;
    padding: 15px 30px 55px 30px;
}

.updateToNewUserModelModal-tenantName {
    border: 1px solid #717171;
    border-radius: 0;
    color: #717171;
    display: inline-block;
    font-size: 14px;
    height: 29px;
    line-height: 19px;
    margin: 5px;
    padding: 5px 16px;
}

.updateToNewUserModelModal-tenantName--mergeAccounts {
    clear: both;
    display: inline-block;
    margin: 7px 0 8px 0;
}

.updateToNewUserModelModal-contentArea {
    margin: 20px auto 0 auto;
    max-width: 800px;
}

.updateToNewUserModelModal-contentArea .icon {
    margin: 20px auto 4px auto;
}

.updateToNewUserModelModal-contentArea .heading {
    color: #717171;
    margin: 0 0;
    padding: 20px 0 5px 0;
}

.updateToNewUserModelModal-contentArea .paragraph--big {
    color: #717171;
    margin: 0 auto;
    max-width: 500px;
    padding: 5px 0;
}

.updateToNewUserModelModal-contentArea .paragraph--big a {
    font-weight: 600;
}

.updateToNewUserModelModal-contentArea .UnderlineInput {
    margin: 0 auto;
    max-width: 400px;
    padding: 5px 0 10px 0;
    width: 100%;
}

.updateToNewUserModelModal-contentArea .UnderlineInput input {
    padding: 0 0;
}

.updateToNewUserModelModal-contentArea .ValidationMessage {
    color: #e5371a;
    font-size: 12px;
    padding: 7px 0 0 0;
    text-align: left;
}

.updateToNewUserModelModal-chooseEmail {
    margin: 25px auto 60px auto;
    width: 384px;
}

.phone .updateToNewUserModelModal-chooseEmail,
.tablet.portrait .updateToNewUserModelModal-chooseEmail {
    width: auto;
}

.updateToNewUserModelModal-chooseEmail > div {
    display: inline-block;
    margin: 0 24px 0 0;
    width: 180px;
}

.phone .updateToNewUserModelModal-chooseEmail > div,
.tablet.portrait .updateToNewUserModelModal-chooseEmail > div {
    display: inline-block;
    margin: 0 0 5px 0;
}

.updateToNewUserModelModal-chooseEmail > div:last-of-type {
    margin: 0 0 0 0;
}

.updateToNewUserModelModal-chooseEmail > div > span:first-of-type {
    background-color: #fcfcfc;
    display: block;
    height: 140px;
    padding: 30px 44px 30px 44px;
    width: 180px;
}

.phone .updateToNewUserModelModal-chooseEmail > div > span:first-of-type,
.tablet.portrait .updateToNewUserModelModal-chooseEmail > div > span:first-of-type {
    display: none;
}

.Login__Form .updateToNewUserModelModal-chooseEmail > div .Button {
    display: block;
    margin: 10px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 180px;
}

.updateToNewUserModelModal-chooseEmail > div > span:first-of-type,
.updateToNewUserModelModal-chooseEmail > div .Button {
    border-radius: 0;
    box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15);
}

.updateToNewUserModelModal-chooseEmail > div .Button.Blue {
    padding: 0 6px;
}

.updateToNewUserModelModal-btnsArea {
    margin: 35px 0 60px 0;
}

.updateToNewUserModelModal-btnsArea span:first-of-type .Button {
    margin-left: 0;
}

.updateToNewUserModelModal-bottomArea {
    background-color: #efefef;
    padding: 20px;
}

.phone .updateToNewUserModelModal-bottomArea,
.tablet.portrait .updateToNewUserModelModal-bottomArea {
    margin: 0 -20px;
}

.updateToNewUserModelModal-bottomArea .Button.Fill.Gray {
    background-color: #bdbdbd !important;
    border-color: #bdbdbd !important;
    margin: 0 0 0 0;
}

.updateToNewUserModelModal-bottomArea .Button.Fill.Gray:hover {
    background-color: #eee !important;
}

.updateToNewUserModelModal-bottomArea--big {
    padding: 40px 20px 20px 20px;
}

.updateToNewUserModelModal-bottomArea--big .paragraph--big {
    font-size: 15px;
}

.updateToNewUserModelModal-bottomArea--big .updateToNewUserModelModal-btnsArea {
    margin: 30px 0 40px 0;
}

.phone .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button,
.phone .Login__Form .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button,
.tablet.portrait .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button,
.tablet.portrait .Login__Form .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button {
    margin: 0 12px !important;
}

.phone .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button.Large,
.phone .Login__Form .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button.Large,
.tablet.portrait .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button.Large,
.tablet.portrait .Login__Form .updateToNewUserModelModal-modalContent .updateToNewUserModelModal-btnsArea .Button.Large {
    display: block;
    margin: 0 auto 15px auto !important;
}

/* External Pages */

.externalPage {
    background-color: #fff;
    position: fixed;
}

.externalPage-centeredBlock {
    max-width: 540px;
    min-width: 240px;
    padding: 40px 20px;
    text-align: center;
}

.externalPage-centeredBlock .heading {
    color: #717171;
    padding: 30px 0 0 0;
}

.externalPage-centeredBlock .paragraph {
    color: #717171;
}

.externalPage-buttonsArea {
    padding: 30px 0 20px 0;
}

.externalPage-buttonsArea .Button {
    margin: 0 12px;
    width: 140px;
}

.externalPage-buttonsArea .Button.Gray.Is_Default:hover {
    border: 1px solid #9b9b9b !important;
}

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

html .ThemeGrid_Container {
    margin: 0 auto;
    max-width: 1200px;
    min-width: 320px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    width: 100%;
}

.tablet .ThemeGrid_Container,
.phone .ThemeGrid_Container {
    padding-left: 0;
    padding-right: 0;
}

html .ThemeGrid_Wrapper {
    min-width: 0;
}

html .Content.ThemeGrid_Wrapper {
    margin-left: 240px;
    margin-top: 0;

    /* Added to create a small scroll on page related
    to the issue with the floating button */
    padding-bottom: 64px;
    transition: margin 300ms;
    width: calc(100% - 240px);
}

/* 12 columns */

html .ThemeGrid_Width12 {
    width: auto;
}

/* 12 columns */

html .tablet .ThemeGrid_Width12 {
    width: 100%;
}

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

/*------------------------------------*\
        8. Patterns Silk
\*-------------------------------------*/

/* Default Button Style */

.Button,
a.Button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*border: none;*/
    background: #fff;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    color: #4a4a4a;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    line-height: 34px;
    padding: 0 15px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    white-space: nowrap;
}

.Button[disabled="disabled"],
a.Button[disabled="disabled"],
.Button[disabled="disabled"]:hover,
a.Button[disabled="disabled"]:hover {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    color: #4a4a4a;
    opacity: 0.6;
}

/* Include File Input Type Button */

input[type="file"] {
    font-size: 14px !important;
    height: 36px;
    padding: 8px 0 8px 40px;
    padding-left: 40px;
    position: relative;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}

input[type="file"]:before {
    background: #5d3e92;
    border: 1px solid #5d3e92;
    border-radius: 0;
    /*font-family: "Avenir", "open-sans", Arial, Helvetica, sans-serif !important;*/
    box-shadow: none;
    color: #fff;
    content: "Select a file";
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    height: 34px;
    left: 0;
    line-height: 31px;
    padding: 0 15px !important;
    position: absolute;
    top: 0;
}

input[type="file"]:hover:before {
    background-color: #5d3e92;
    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

input[type="file"][multiple]:before {
    content: "Select some files";
}

/* Button Sizes */

.Button.Small,
a.Button.Small,
.Small .ButtonGroup_button.Button {
    font-size: 12px;
    height: 28px;
    line-height: 26px;
}

.Button.Small.NoBorder,
a.Button.Small.NoBorder {
    line-height: 28px;
}

.Button.ExtraSmall,
a.Button.ExtraSmall,
.ExtraSmall .ButtonGroup_button.Button {
    font-family: Helvetica, Arial !important;
    font-size: 9px;
    height: 21px;
    line-height: 19px;
    min-width: 40px;
    padding: 0 8px;
}

/*Snippet to force the align of the Mail Button on table Records (Ex:Classes > List)*/

.TableRecords .TableRecords_OddLine div .Button.ExtraSmall,
.TableRecords .TableRecords_OddLine div a.Button.ExtraSmall,
.TableRecords .TableRecords_OddLine div .ExtraSmall .ButtonGroup_button.Button,
.TableRecords .TableRecords_EvenLine div .Button.ExtraSmall,
.TableRecords .TableRecords_EvenLine div a.Button.ExtraSmall,
.TableRecords .TableRecords_EvenLine div .ExtraSmall .ButtonGroup_button.Button {
    float: right;
}

.TableRecords .TableRecords_OddLine div a.Button.ExtraSmall .RetinaIcon,
.TableRecords .TableRecords_EvenLine div a.Button.ExtraSmall .RetinaIcon {
    line-height: 19px;
}

.Button.ExtraSmall.NoBorder,
a.Button.ExtraSmall.NoBorder {
    line-height: 21px;
}

.Button.Large,
a.Button.Large,
.Large .ButtonGroup_button.Button {
    font-size: 16px;
    height: 38px;
    line-height: 36px;
    padding-left: 25px;
    padding-right: 25px;
}

.Button.Large.NoBorder,
a.Button.Large.NoBorder {
    line-height: 38px;
}

/* New Button */

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

/* Mobile Button Styles */

.phone .Button.ButtonDefault,
.phone .Button.Is_Default,
.phone a.Button.ButtonDefault,
.phone a.Button.Is_Default,
.phone input[type="submit"],
.phone a.CancelLink {
    margin-left: 0 !important;
    width: 100%;
}

.phone a.CancelLink {
    margin-top: 10px;
}

/* Default Button Styles */

.Button.Is_Default,
a.Button.Is_Default,
.Button.ButtonDefault,
a.Button.ButtonDefault {
    background-color: #5d3e92;
    border: 1px solid #5d3e92;
}

.Button.Link {
    color: #5d3e92;
}

.Button.Danger,
a.ActionDelete {
    background-color: #ec5a48;
    border-color: #ec5a48;
    color: #fff;
}

.Button.Cancel {
    background-color: #fff;
    border-color: #d8d8d8;
    color: #4a4a4a;
}

/* Fill Button Styles */

.Fill {
    background-color: #5d3e92;
    color: #fff;
}

.Fill *,
.Fill a,
.Fill .TabsLittle-Tab,
a.Fill {
    color: #fff;
}

.Fill input[type="text"] {
    color: #333;
}

.Fill .Fill.Button {
    background-color: #6d5197 !important;
}

.Button.Fill,
.Button.Fill:hover {
    background-color: #5d3e92 !important;
    border: 1px solid #5d3e92;
    color: #fff;
}

.Button.Fill[disabled="disabled"],
a.Button.Fill[disabled="disabled"],
.Button.Fill[disabled="disabled"]:hover,
a.Button.Fill[disabled="disabled"]:hover {
    color: #fff;
}

.Button.Fill.Red,
.Button.Fill.Red:hover {
    background-color: #ec5a48 !important;
    border: 1px solid #ec5a48;
    color: #fff;
}

.Button.Fill.Gray,
.Button.Fill.Gray:hover {
    background-color: #9b9b9b !important;
    border: 1px solid #9b9b9b;
    color: #fff;
}

/* Button Hover Styles */

.desktop .Button:hover,
.desktop a.Button:hover {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.desktop .Button.ButtonDefault:hover,
.desktop .Button.Is_Default:hover {
    background-color: #5d3e92;
    border-color: rgba(93, 62, 146, 0);
}

.noShadow {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.BadgeButtonNoHover .Button {
    cursor: default;
}

.BadgeButtonNoHover .Button:hover,
.BadgeButtonNoHover a.Button:hover {
    background: #fff !important;
}

.BadgeButtonNoHover .Button.Blue:hover {
    color: #4a90e2 !important;
}

.BadgeButtonNoHover .Button.Green:hover {
    color: #5aac6b !important;
}

.BadgeButtonNoHover .Button.Gray:hover {
    color: #9b9b9b !important;
}

.BadgeButtonNoHover .Button.Red:hover {
    color: #ec5a48 !important;
}

/* Transparent Button Style */

.Button.Transparent {
    background: rgba(51, 51, 51, 0.65);
    border: 1px solid rgba(155, 155, 155, 0.5);
}

.MarginLeft,
.Button.MarginLeft {
    margin-left: 10px;
}

/* Icon Button Styles */

.Button.Icon {
    min-width: 38px;
    padding: 0;
    text-align: center !important;
}

a.Button .RetinaIcon {
    display: inline;
    line-height: 34px;
}

a.Button.Small .RetinaIcon {
    line-height: 24px;
}

a.Button .RetinaIcon:before {
    font-size: 14px;
    margin-right: 10px;
    vertical-align: middle;
}

a.Button.Icon .RetinaIcon:before {
    margin: 0;
}

a.Button.Small .icon {
    font-size: 20px;
    margin: -3px 8px 0 0;
    vertical-align: middle;
}

a.Button.Small .icon-code {
    font-size: 22px;
    margin: -2px 6px 0 0;
}

/* Heading buttons */

.Heading1 a.Button,
.Heading2 a.Button,
.Heading3 a.Button,
.Heading4 a.Button {
    vertical-align: middle;
}

/* other buttons */

.buttonBorder--purple {
    background: #fff;
    border: 1px solid #8e5ed6;
    color: #5d3e92;
    font-size: 12px;
    height: 32px;
    line-height: 30px;
}

.buttonBorder--purple:hover {
    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2) !important;
    -moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2) !important;
}

.button-delete--animated .icon,
a.button-delete--animated .icon,
.peopleContactsRecipient-delete .icon,
.termsEditor-delete .icon {
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    font-size: 20px;
    line-height: 20px;
    transition: all 0.15s;
}

.button-delete--animated:hover .icon,
.button-delete--animated:hover .icon use > svg,
a.button-delete--animated:hover .icon,
a.button-delete--animated:hover .icon use > svg,
.peopleContactsRecipient-delete:hover .icon,
.peopleContactsRecipient-delete:hover .icon use > svg,
.termsEditor-delete:hover .icon,
.termsEditor-delete:hover .icon use > svg {
    color: #ff213b;
}

.button-delete--animated:hover .icon,
a.button-delete--animated:hover .icon,
.peopleContactsRecipient-delete:hover .icon,
.termsEditor-delete:hover .icon {
    transform: rotate(90deg);
}

.textButton,
a.textButton {
    color: #623b90;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.05em;
    line-height: 16px;
    text-transform: uppercase;
}

.textButton:hover,
a.textButton:hover {
    text-decoration: underline;
}

.textBlink {
    animation: textBlink 0.5s linear 12;
}

/* Cards, Blocks, Containers */

.card,
.TableRecords .card:nth-child(even),
.TableRecords .card:nth-child(odd) {
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
    /*box-shadow: 0 2px 4px 0 rgba(98,59,144,.05);*/
    transition: all 0.2s;
}

.card:hover,
.TableRecords .card:nth-child(even):hover,
.TableRecords .card:nth-child(odd):hover {
    background-color: #fff;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1);
    /*box-shadow: 0 8px 26px 0 rgba(98,59,144,.11);*/
}

.card--noShadow,
a.card--noShadow {
    background-color: #fff;
    border: 1px solid #d8d6d6;
    color: rgba(0, 0, 0, 0.8);
    transition: all 0.2s;
}

a.card--noShadow.active,
a.card--noShadow.active:hover,
a.card--noShadow:hover {
    background-color: #5d3e92;
    border-color: #5d3e92;
    color: #fff;
    text-decoration: none;
}

a.card--noShadow.active {
    cursor: default;
}

.card--listItem,
a.card--listItem {
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    z-index: 1;
}

.card--listItem:not(:last-child):after,
a.card--listItem:not(:last-child):after {
    border-top: 1px solid #ededed;
    bottom: 0;
    content: " ";
    left: 12px;
    opacity: 1;
    position: absolute;
    right: 12px;
    /* needed for nice transitions in inner right action button */
    transition: opacity 0.2s ease 0.2s;
}

.card--listItem.active,
a.card--listItem.active,
.card--listItem:hover,
a.card--listItem:hover {
    box-shadow: 0 7px 32px 0 rgba(0, 0, 0, 0.18);
    z-index: 3;
}

.card--listItem.active,
a.card--listItem.active {
    z-index: 2;
}

.card--listItem.active:after,
a.card--listItem.active:after,
.card--listItem:hover:after,
a.card--listItem:hover:after {
    opacity: 0;
    right: 50%;
}

/* --- --- --- --- ---
    $Notes panel
--- --- --- --- --- --- */

.notesContainer {
    background-color: #eff0f4;
    color: rgba(0, 0, 0, 0.8);
    display: table;
    font-size: 15px;
    line-height: 20px;
    padding: 16px;
    width: 100%;
}

.notesContainer.noteSection {
    border-bottom: 1px solid #dedede;
}

.notesContainer.noteSection:last-child {
    border: none;
}

.notesContainer .noteIconContainer {
    display: table-cell;
    width: 60px;
}

.notesContainer .noteInfoContainer {
    display: table-cell;
    min-height: 60px;
    padding-left: 10px;
    position: relative;
}

.notesContainer .noteInfoContainer .noteTextContainer {
    display: table-cell;
    padding-right: 10px;
    width: 100%;
}

.notesContainer .noteInfoContainer .noteTextContainer > div > div:first-child {
    padding-top: 15px;
}

.notesContainer .noteInfoContainer .noteTextContainer > div > .Heading2 {
    padding-top: 0 !important;
}

.notesContainer .noteInfoContainer .noteActionContainer {
    display: table-cell;
    min-width: 200px;
    vertical-align: top;
}

.notesContainer .noteInfoContainer .noteActionContainer .Button {
    margin-top: 15px;
}

/*Error Style*/

.notesContainer.noteSection.note-error {
    background-color: rgba(236, 90, 72, 0.2) !important;
}

.notesContainer.noteSection.note-error .noteIconContainer .icon {
    color: #ec5a48;
}

/*Warning Style*/

.notesContainer.noteSection.note-warning {
    background-color: rgba(255, 195, 41, 0.2) !important;
}

.notesContainer.noteSection.note-warning .noteIconContainer .icon {
    color: #ffc329;
}

/*Success Style*/

.notesContainer.noteSection.note-success {
    background-color: rgba(90, 172, 107, 0.22) !important;
}

.notesContainer.noteSection.note-success .noteIconContainer .icon {
    color: #5aac6b;
}

/*Info Style*/

.notesContainer.noteSection.note-info {
    background-color: rgba(93, 62, 146, 0.2) !important;
}

.notesContainer.noteSection.note-info .noteIconContainer .icon {
    color: #5d3e92;
}

.notesContainer.noteSection.note-info .noteIconContainer .icon.icon2-warning {
    transform: rotate(180deg);
}

.notesContainer .noteStatus {
    font-weight: 600;
    text-transform: uppercase;
}

.notesContainer .noteStatus--TextRed {
    color: #ec5a48;
}

.notesContainer .noteActionContainer .Button {
    margin-left: 0;
    max-width: 200px;
    width: 100%;
}

.noteText {
    color: rgba(20, 20, 20, 0.4);
}

/* Media queries */

.desktop .notesContainer .noteIconContainer .icon {
    font-size: 60px;
    line-height: 60px;
}

.tablet .notesContainer .noteIconContainer .icon {
    font-size: 60px;
}

.phone .notesContainer .noteIconContainer,
.tablet .notesContainer .noteIconContainer {
    display: block;
    font-size: 80px;
    padding: 10px 0;
    width: 100%;
}

.tablet .notesContainer .noteIconContainer .icon {
    font-size: 80px;
}

.tablet .notesContainer .noteInfoContainer,
.phone .notesContainer .noteInfoContainer,
.tablet .notesContainer .noteActionContainer,
.phone .notesContainer .noteActionContainer {
    display: block;
    margin: 0;
    padding: 15px 0 5px 0;
    text-align: center;
    width: 100%;
}

.tablet .notesContainer > div,
.tablet .notesContainer .noteTextContainer,
.tablet .notesContainer .noteTextContainer > div,
.phone .notesContainer .noteTextContainer {
    display: block;
    margin: 0;
    width: 100%;
}

.phone .notesContainer .noteActionContainer .Button {
    max-width: 100%;
}

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

/* Text Classes */

.Heading1,
.Heading2,
.Heading3,
.Heading4 {
    font-weight: 500;
}

.Heading1 {
    font-size: 30px;
    margin-top: 0;
}

.Heading2,
.phone .Heading1 {
    font-size: 26px;
    line-height: 34px;
}

.Heading3,
.phone .Heading2 {
    font-size: 19px;
}

.Heading4,
.phone .Heading3 {
    font-size: 17px;
}

.phone .Heading4 {
    font-size: 14px;
}

.Page .Text_gray {
    color: #8a8a8a;
}

.Page .Text_small {
    /*font-size: .85em !important;*/
    font-style: 13px !important;
}

span.Heading1,
span.Heading2,
span.Heading3,
span.Heading4 {
    color: #4a4a48;
    display: block;
}

/* New Text Classes */

.heading {
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.6;
}

.heading--small {
    font-size: 20px;
}

.paragraph {
    display: block;
    padding: 10px 0;
}

.paragraph--big {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.Bold,
.heading.Bold,
.paragraph.Bold,
.paragraph--big.Bold {
    font-weight: 600;
}

/* ButtonDropdown */

.ButtonDropdown_LeftSide,
.ButtonDropdown_RightSidebutton.Button {
    border-radius: 0;
}

.ButtonDropdown .ButtonDropdown_icon > .ri {
    border: 0;
}

.ButtonGroup_button * {
    color: inherit;
}

.ButtonGroup_button.Button {
    border-color: #d8d8d8;
}

.ButtonGroup_button.Button.active {
    background: #5d3e92;
    color: #fff;
}

.ButtonGroup_button.Button.active:hover {
    background: #5d3e92;
    color: #fff;
}

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

/* ButtonGroup with icon */

.ButtonGroup_button span > svg.icon {
    float: left;
    height: 26px;
    margin: 5px 5px 0 -10px;
    width: 26px;
}

/* Dropdown */

.DropdownMenu {
    border: 1px solid #c7c7c7;
    box-shadow: 0 1px 4px 2px rgba(50, 50, 50, 0.1);
    top: 135%;
    z-index: 99;
}

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

.DropdownMenu .PH > a {
    font-size: 14px;
}

.phone .selectize-dropdown {
    margin-bottom: 10px;
}

.ActionButton.More .DropdownMenu:after,
.ActionButton.More .DropdownMenu:before {
    left: auto;
    right: 15%;
}

.DropdownMenu:after {
    border-bottom-color: #fff;
    border-width: 8px;
    margin-left: -8px;
}

.DropdownMenu:before {
    border-bottom-color: #9b9b9b;
    border-width: 9px;
    margin-left: -9px;
}

.ActionButton.More .DropdownMenu:before {
    margin-right: -2px;
}

.ButtonDropdown .ButtonDropdown_icon > .ri {
    padding-top: 10px;
}

/* Animations */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
    }
}

@keyframes textBlink {
    50% {
        opacity: 0;
    }
}

/* LoginInfo */

/* ---- New Styles*/

.LoginInfo > .Menu_DropDownButton > .Menu_TopMenu {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    height: 64px;
    padding: 0 0 0 0;
}

.phone .LoginInfo > .Menu_DropDownButton > .Menu_TopMenu {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    height: 48px;
    padding: 0 0 0 0;
}

.LoginInfo .Menu_TopMenu .Menu_DropDownArrow,
.LoginInfo .Menu_TopMenu:hover .Menu_DropDownArrow {
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpolygon%20points%3D%2238.1%2019%2026.9%2029.4%2024%2032%2026.9%2034.6%2038.1%2045%2041%2042.4%2029.7%2032%2041%2021.6%22%20transform%3D%22translate(32.5%2032)rotate(-90)translate(-32.5%20-32)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        center center no-repeat;
    border: none;
    display: inline-block;
    height: 10px;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 20px;
    transition: all 0.2s;
    width: 15px;
}

.Menu_TopMenu .userMenu .LoginInfo_username img {
    border: none;
    border-radius: 0 !important;
    height: 32px;
    width: 32px;
}

.desktop .LoginInfo .Menu_TopMenu a:link:hover {
    box-shadow: none;
}

.LoginInfo .Menu_DropDownPanel .ContextItem {
    background-color: #dfd7e8;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    padding: 0 20px 0 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.UserName_Text {
    color: #040404;
    font-size: 14px;
    line-height: 18px;
    text-transform: capitalize;
}

/*End -------*/

.LoginInfo_username .ri {
    color: #fff;
    font-size: 16px;
    margin-top: 10px;
}

.Page .LoginInfo .Balloon {
    margin-left: -60px;
    margin-top: 2px;
}

.phone .LoginInfo .Balloon {
    margin-left: -10px;
}

.phone .LoginInfo .Balloon:before,
.phone .LoginInfo .Balloon:after {
    left: 7%;
    margin-left: 0;
}

.LoginInfo .Balloon:before,
.LoginInfo .Balloon:after,
.Header_user .Balloon:before,
.Header_user .Balloon:after {
    left: 100%;
    margin-left: -25px;
}

.LoginInfo .Balloon_content,
.HelpContent .Balloon_content {
    padding: 0;
}

.LoginInfo .Balloon_content a,
.HelpContent a {
    border-bottom: 1px solid #eee;
    color: #757575;
    display: block;
    font-size: 12px;
    padding: 4px 15px;
    text-align: left;
}

.HelpContent .Text_uppercase {
    color: #757575;
    font-size: 10px;
    font-weight: 600;
    padding-left: 15px;
}

.LoginInfo .Balloon_content {
    width: 155px;
}

.HelpContent a {
    border-bottom: 0;
}

.HelpContent a.StatusLink {
    padding-top: 0;
}

.Balloon .Post {
    border-bottom: 1px solid #eee;
    color: #757575;
    font-size: 12px;
    margin: 0;
    padding: 5px;
    text-align: left;
}

.LoginInfo .Balloon_content a:last-child,
.Balloon a:last-child .Post {
    border-bottom: 0;
}

.Balloon .Post_icon img {
    border: 0;
    border-radius: 20px;
    height: 40px;
    width: 40px;
}

.Balloon .Post__description {
    color: #9b9b9b;
}

.Balloon .Post_content {
    padding-left: 5px;
}

.Balloon .Balloon_footer {
    border-top: 1px solid #ececec;
    padding: 0;
}

.Balloon_content,
.Balloon_content a {
    font-size: 12px;
}

.Balloon_content {
    color: #757575;
    padding: 10px;
    text-align: left;
}

.Balloon .Post:hover,
.HelpContent .quick-actions-list-item a:hover,
.Balloon_content a:hover {
    background: #f0f7fb;
    /*opacity: .7;*/
}

.HelpContent a:hover {
    cursor: pointer;
    /*background: #f0f7fb;*/
    opacity: 0.7;
}

.Balloon .Post a {
    color: #757575;
    text-decoration: none;
}

.Header_user .Balloon {
    margin-left: -120px;
    margin-top: 8px;
}

.HelpContent .Balloon {
    margin-left: -30px;
    width: 180px;
}

.phone .HelpContent .Balloon,
.tablet .HelpContent .Balloon {
    margin-left: -7px;
}

.HelpContent .Balloon:after,
.HelpContent .Balloon:before {
    left: 70%;
}

.HelpContent .Separator {
    border-bottom: 1px solid #eee;
    border-top: 0;
    margin: 0;
}

.HelpContent .Balloon_footer {
    border: 0;
}

/* StatusPage.io status styles for circle and text */

.color-dot {
    border-radius: 99px;
    display: inline-block;
    height: 10px;
    margin-right: 6px;
    margin-top: -3px;
    vertical-align: middle;
    width: 10px;
}

.color-dot.critical {
    background-color: #e74c3c;
}

.color-dot.major {
    background-color: #e67e22;
}

.color-dot.minor {
    background-color: #f1c40f;
}

.color-dot.none {
    background-color: #2ecc71;
}

/* SectionExpandable */

.SectionExpandable {
    padding: 30px 0 20px 0;
}

.phone .SectionExpandable {
    margin: 0 -15px;
    padding: 20px 15px 10px;
}

.SectionExpandable__title.Heading2 {
    font-size: 18px;
    font-weight: 600;
}

.Panel {
    min-height: 300px;
}

.Panel_content {
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0;
}

.Panel__title.Heading3 {
    color: #9b9b9b;
}

.Panel .SectionExpandable__title {
    border: 0;
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    line-height: 1.1;
}

.Panel .expanded .SectionExpandable__icon.Heading2 > .ri,
.Panel .SectionExpandable__icon.Heading2 > .ri {
    background: #fff;
    border: 1px solid #5d3e92;
    color: #5d3e92;
    height: 40px;
    margin-right: 0;
    width: 40px;
}

.SectionExpandable .SectionExpandable__icon.Heading2 .ri-angle-down:before {
    content: "+";
    line-height: 38px;
}

.SectionExpandable.expanded .SectionExpandable__icon.Heading2 .ri-angle-down:before {
    content: "-";
    line-height: 36px;
}

/* SearchBox */

.SearchBox .TableVerticalAlign .Cell1,
.SearchBox .TableVerticalAlign .Cell2 {
    padding: 0;
}

.SearchBox .TableVerticalAlign .Cell1 {
    padding-right: 12px;
}

.SearchBox .TableVerticalAlign .Cell2 {
    width: 100%;
}

.SearchBox .TableVerticalAlign .ButtonDropdown_button > div {
    display: table-cell;
    white-space: nowrap;
}

.SearchBox .Search_wrapper input[type="text"] {
    border: 1px solid #9b9b9b;
    border-radius: 0;
    box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.06);
    height: 38px;
    line-height: 34px;
}

.desktop .SearchBox .Search_wrapper input[type="text"] {
    height: 33px;
    padding-top: 2px;
}

.SearchBox .Search_wrapper:after {
    top: 12px;
}

.desktop .SearchBox .Search_wrapper:after {
    top: 10px;
}

/* Tabs */

.Tabs {
    border: 0;
}

.Tabs_header {
    background: #f6f6f6;
    border: 1px solid #eee;
    border-bottom: 1px solid #9b9b9b;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.phone .Tabs,
.phone .Tabs_header,
.tablet .Tabs_header,
.Tabs__content {
    overflow: visible;
}

.Tabs__tab {
    display: inline-block;
}

.Panel .Tabs__tab {
    border: 1px solid transparent;
    border-top: 0;
    color: #757575;
    font-weight: normal;
    padding: 9px 12px 7px;
}

.Panel .Tabs__tab.active {
    background: #fff;
    border: 1px solid #9b9b9b;
    border-bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin: -2px 0;
    padding: 10px 12px;
}

.Panel .Tabs__tab.active:before,
.Panel .Tabs__tab.active:after {
    display: none;
}

.Panel .Tabs_body {
    border: 0;
    padding: 15px 0;
}

.phone .Panel .Tabs__tab,
.tablet .Panel .Tabs__tab {
    width: initial;
}

/* Dynamic Tab Filters */

.TabItemActive {
    border-bottom: 2px solid #4a4a4a;
    color: #4a4a4a;
    font-weight: 600;
}

.TabListItem,
.TabListMenu,
.TabItemInBalloon {
    font-size: 14px;
    text-transform: uppercase;
}

.MainFilterButton {
    border-radius: 0 !important;
}

.FilterSearch input[type="text"],
.FilterSearch .tablet input[type="text"] {
    border: 1px solid #fff;
    border-radius: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.3s ease-in;
}

.FilterButton {
    border: 1px solid #fff;
    border-radius: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    color: #4a4a4a;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.FilterButton:hover {
    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
    color: #4a4a4a;
    -webkit-transition: all 0.3s ease-out;
}

.FilterButtonDisabled {
    border: 1px solid #fff;
}

.SaveSearchButton {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

/* Wizard */

.WizardStep.ActiveStep {
    background: #5aac6b;
}

.WizardParent .WizardStep.Past a {
    color: #fff;
    opacity: 0.5;
}

.WizardStep.ActiveStep a {
    color: #fff;
}

.WizardStep.ActiveStep:before {
    border-bottom-color: #5aac6b;
    border-top-color: #5aac6b;
}

.WizardStep.Past {
    background: #333844;
}

.WizardStep.Past:before {
    border-bottom-color: #333844;
    border-top-color: #333844;
}

/*------------------------------------*\
        9.1 Patterns Wodify > FormBox
\*-------------------------------------*/

.FormBox {
    background: transparent;
    border-radius: 0;
    color: inherit;
    margin-top: 10px;
    padding: 20px 20px 20px 0;
}

.phone .FormBox {
    padding: 0;
}

.FormBox:not(.Transparent) {
    padding: 20px;
}

.FormBox.Gray {
    background: #ececec;
    border: 1px solid #b8b8b8;
    color: inherit;
    padding: 20px;
}

.phone .FormBox:not(.Transparent),
.phone .FormBox.Gray {
    padding: 15px;
}

/*------------------------------------*\
        9.2 Patterns Wodify > FormSection
\*-------------------------------------*/

.FormSection {
    border-bottom: 1px solid #d7d7d8;
    padding: 40px 0;
}

.FormSection_title {
    color: #4a4a4a;
    font-weight: 600;
    margin: 0;
}

.phone .FormSection_description {
    margin-bottom: 20px;
}

/*------------------------------------*\
        9.3 Patterns Wodify > PanelNavigation
\*-------------------------------------*/

.PanelNavigation {
    border: 0;
}

.PanelNavigation .Panel_header {
    border-bottom: 2px solid #fff;
    /* background: #5D3E92; */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /*margin-bottom: 20px;*/
}

.desktop .PanelNavigation .Panel_header {
    padding: 0 10px;
}

.phone .PanelNavigation .Panel_header {
    background: transparent;
    padding: 0;
}

.PanelNavigation .Panel_header a {
    color: #8a8a8a;
    font-size: 16px;
    padding: 10px 30px;
    position: relative;
}

.phone .PanelNavigation .Panel_header a {
    display: block;
    font-size: 16px;
    line-height: 24px;
    opacity: 1;
    text-align: center;
}

.PanelNavigation .Panel_header a.Active,
.PanelNavigation .Panel_header a:hover {
    opacity: 1;
    text-decoration: none;
}

.PanelNavigation .Panel_header a:hover {
    color: #5d3e92;
    cursor: pointer;
}

.PanelNavigation .Panel_header a.Active {
    border-bottom: 2px solid #4a4a4a;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #141414;
    font-weight: 500;
}

.desktop .PanelNavigation.HasFourthLevelNav .Panel_header {
    background: #eff0f4;
    border: none;
    height: 50px;
    margin: -20px -20px 10px !important;
    margin-left: 0px;
    padding: 10px 15px 0 15px;
    width: calc(100% + 40px);
}

.tablet .PanelNavigation.HasFourthLevelNav .Panel_header {
    background: #eff0f4;
    border: none;
    margin: -15px -20px 10px !important;
    margin-left: 0px;
    overflow-x: auto;
    padding: 30px 15px 10px;
    width: calc(100% + 40px);
}

.desktop .PanelNavigation.HasFourthLevelNav .Panel_header a,
.tablet .PanelNavigation.HasFourthLevelNav .Panel_header a {
    background: #e4e4e4;
    border-bottom: none;
    margin-right: 10px;
}

.desktop .PanelNavigation.HasFourthLevelNav .Panel_header a.Active,
.tablet .PanelNavigation.HasFourthLevelNav .Panel_header a.Active {
    background: #fff;
}

/* Required for Down Triangle */

/*.desktop .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:before,
.desktop .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:after,
.tablet .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:before,
.tablet .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:after {
    position: absolute;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
}*/

/* Stroke */

/*.desktop .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:before,
.tablet .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:before {
    bottom: -13px;
    left: 50%;
    margin-left: -12px;
    border-width: 12px;
    border-top-color: #e1e1e1;
}*/

/* Fill */

/*.desktop .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:after,
.tablet .PanelNavigation.HasFourthLevelNav .Panel_header a.Active:after {
    bottom: -12px;
    left: 50%;
    margin-left: -12px;
    border-width: 12px;
    border-top-color: #fff;
}

.phone .PanelNavigation .Panel_header a.Active:after {
    display: none;
}*/

.PanelNavigation .Panel_content {
    border-top: 0;
    overflow-wrap: break-word;
}

.phone .PanelNavigation .Panel_content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 15px;
}

.PanelNavigation .Panel_content .Heading1 img {
    margin: 0 10px 0 0;
    max-height: 120px;
    max-width: 120px;
}

.phone .PanelNavigation .Panel_content .Heading1 img {
    height: 75px;
    margin: 0 10px 0 0;
    width: 75px;
}

.PanelNavigation .Heading1 {
    display: table-cell;
    font-weight: 600;
    line-height: 40px;
}

.phone .PanelNavigation .Heading1 {
    line-height: 45px;
}

/* avatar round image */

/* wds avatar */
.avatar--core-gradient {
    max-width: 100%;
    padding-bottom: 72px;
    position: relative;
    width: 72px;
}
.avatar {
    -webkit-align-items: center;
    align-items: center;
    background-color: #dbdade;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    color: #4d475b;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 24px;
    min-width: 24px;
    overflow: hidden;
}

.avatar--core-gradient::before {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#833adf));
    background: -o-linear-gradient(top, transparent 0%, #833adf 100%);
    background: linear-gradient(180deg, transparent 0%, #833adf 100%);
    border-radius: 0 0 200px 200px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
}

.avatar--core-gradient img {
    margin-bottom: -100%;
    min-width: 100%;
}
/* - - - - - - - - - - */

.Avatar {
    border-radius: 22px;
    height: 45px;
    width: 45px;
}

.phone div[class*="ThemeGrid_Width"] {
    margin-left: 0 !important;
    width: 100%;
}

.DisplayOnPhone {
    display: none;
}

.mini.tablet .DisplayOnPhone,
.phone .DisplayOnPhone {
    display: inline-block;
    line-height: 22px;
    padding: 0 5px;
    vertical-align: top;
}

/*------------------------------------*\
        9.3 Patterns Wodify > PanelError
\*-------------------------------------*/

.PanelError {
    background-color: #ec5a48;
    border-radius: 0;
    color: white;
    padding: 10px;
    text-align: center;
}

/*------------------------------------*\
        10 Colors: Background and Text
\*-------------------------------------*/

.WBlue {
    background-color: #4a90e2;
    color: #fff;
}

.WGray {
    background-color: #cbcbcb;
    color: #fff;
}

.WLightGray {
    background-color: #f7f7f7;
    color: #141414;
}

/*.Tag.WLightGray {
    border: 1px solid #ccc;
}*/

.WSalmon {
    background-color: #ec5a48;
    color: #fff;
}

.WGreen {
    background-color: #5aac6b;
    color: #fff;
}

.WOrange {
    background-color: #ffc32b;
    color: #fff;
}

.WRed {
    background-color: #ec5a48;
    color: #fff;
}

.Text-WRed {
    color: #ec5a48;
}

.WPurple {
    background-color: #5d3e8c;
    color: #fff;
}

/*------------------------------------*\
        11 Label
\*-------------------------------------*/

.Label {
    background: #5d3e8c;
    border-radius: 0.25em;
    color: #fff;
    display: inline;
    float: right;
    font-size: 75%;
    font-weight: 300;
    line-height: 11px;
    margin-left: 7px;
    min-width: 20px;
    padding: 0.4em;
    position: relative;
    text-align: center;
    white-space: nowrap;
}

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

/* STUDIO PREVIEW */

/* header */

/* wrapper */

/* menu */

.phone .Menu_TopMenu a:link span.ri,
.phone .Menu_TopMenu a:visited span.ri,
.phone .Menu_TopMenu a span.ri,
.tablet .Menu_TopMenu a:link span.ri,
.tablet .Menu_TopMenu a:visited span.ri,
.tablet .Menu_TopMenu a span.ri {
    font-size: 18px;
}

.tablet .Content.ThemeGrid_Wrapper,
.phone .Content.ThemeGrid_Wrapper {
    margin: 0;
    width: 100%;
}

.phone .Content.ThemeGrid_Wrapper {
    padding-top: 0;
}

/* Accordion */

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

.AccordionVertical_item.open .AccordionVertical___icon > .fa {
    background-color: #5d3e92;
    border: 1px solid #5d3e92;
    color: #fff;
}

.AccordionVertical__header .SettingIcon {
    max-height: 60px;
    max-width: 60px;
}

.AccordionVertical__header .SettingIcon img {
    border-radius: 6px;
    max-height: 50px;
    max-width: 50px;
}

/* Alerts */

.Alert {
    display: table;
    padding-left: 15px;
}

.Alert.Info {
    background-color: #5d3e92;
    border-color: #5d3e92;
}

.Alert.Success {
    background-color: #5aac6b;
    border-color: #5aac6b;
}

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

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

/* Balloon */

.Balloon {
    border: 1px solid #c7c7c7;
    box-shadow: 0 1px 4px 2px rgba(50, 50, 50, 0.1);
}

.js_open.Balloon {
    z-index: 101;
}

.Balloon.Balloon--above:before,
.Balloon.Balloon--above:after {
    bottom: initial;
    top: 100%;
}

.Balloon.Balloon--above:before {
    border-bottom-color: transparent;
    border-top-color: #ccc;
}

.Balloon.Balloon--above:after {
    border-bottom-color: transparent;
    border-top-color: #fff;
}

.Post_icon {
    vertical-align: middle;
}

.Post_icon img {
    border: 2px solid #5d3e92;
}

/* Boxes */

/* Carousel */

.owl-theme .owl-controls .owl-page span {
    background: #5d3e92;
    border-radius: 20px;
    display: block;
    filter: Alpha(Opacity=50);
    height: 10px;
    margin: 10px 10px;
    opacity: 0.5;
    width: 10px;
}

/* Calendar */

.calendarPattern tbody td.selected {
    background-color: #fff;
    color: #fff;
}

/* ToggleButton */

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

.ToggleButton_label.changed:after {
    background-color: #fff;
}

/* NavigationBar */

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

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

/* TabsClient */

.Tabs__tab.active {
    border-bottom-color: transparent;
    border-top: 2px solid #5d3e92;
    color: #939394;
    padding: 7px 12px;
}

.Tabs__tab {
    background: transparent;
    color: #bfbfbf;
    font-weight: 600;
    padding: 8px 12px;
}

/*....................*/

/* Tabs Little Widget */

/*....................*/

.TabsLittle {
    min-height: 80px;
}

.TabsLittle-Header {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
}

.desktop .TabsLittle-Header,
.tablet.landscape .TabsLittle-Header {
    display: table;
    table-layout: fixed;
}

.TabsLittle-Tab {
    color: #7c7c7c;
    cursor: pointer;
    display: table-cell;
    font-size: 14px;
    font-weight: 300;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.TabsLittle-Tab.active {
    border-bottom: 2px solid #4a4a4a;
    cursor: default;
    font-weight: 500;
}

.Fill .TabsLittle-Tab.active {
    border-bottom: 2px solid #fff;
    color: #fff;
}

.phone .Fill .TabsLittle-Tab.active {
    border-bottom: none;
}

.phone .TabsDropdown-Tab.active {
    border-bottom: none;
    font-size: 90%;
}

.TabsDropdown-HeaderMobile .TabsDropdown-Tab {
    display: block;
    font-size: 95%;
    width: 100%;
}

.tablet.landscape .TabsLittle-Tab {
    /* hack to make tabs adjust and still overflow if needed*/
    min-width: 100px;
    text-align: center;
    width: 1%;
}

.phone .TabsLittle-Tab,
.tablet.portrait .TabsLittle-Tab,
.phone .TabsLittle-Tab.active,
.tablet.portrait .TabsLittle-Tab.active {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    color: #333;
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin-top: 20px;
    padding: 3px 20px;
    text-align: left;
    width: 100%;
}

.phone .TabsLittle-Tab.WRed,
.tablet.portrait .TabsLittle-Tab.WRed {
    background-color: transparent;
    border: solid 1px #ec5a48;
    color: #ec5a48;
}

.phone .TabsLittle-Tab:first,
.tablet.portrait .TabsLittle-Tab:first {
    margin-top: 0;
    /* the first tab shouldn't have a top margin */
}

/*.phone .TabsLittle-Tab.active,
.tablet.portrait .TabsLittle-Tab.active {
    background-color: #4185de;
    color: #fff;
    padding-right: 40px; /* increase the padding on the right because of the collapse icon
}*/

.TabsLittle-Icon {
    color: #333;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.TabsLittle-Tab .TabsLittle-Icon.Collapse {
    display: none;
}

.TabsLittle-Tab.active .TabsLittle-Icon.Collapse {
    display: block;
}

.TabsLittle-Tab.active .TabsLittle-Icon.Expand {
    display: none;
}

.TabsLittle-Body {
    margin-top: 0;
    position: relative;
    z-index: 0;
}

.phone .TabsLittle-Body,
.tablet.portrait .TabsLittle-Body {
    /* content should not be displayed until it is moved to the header */
    border: none;
    opacity: 0;
}

.TabsLittle-Content {
    display: block;
    height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
}

.phone .TabsLittle-Content,
.tablet.portrait .TabsLittle-Content {
    line-height: initial;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.TabsLittle-Content.active {
    height: auto !important;
    min-height: 175px;
    opacity: 1;
    overflow: initial;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

.phone .TabsLittle-Content.active,
.tablet.portrait .TabsLittle-Content.active {
    background: #fff;
    padding: 15px;
}

.phone .TabsLittle-Content.active span,
.tablet.portrait .TabsLittle-Content.active span {
    color: #333;
}

.desktop .TabsLittle-Header .TabsLittle-Content,
.tablet.landscape .TabsLittle-Header .TabsLittle-Content {
    /* hide the content in the headers to prevent weird flickers on screen resizing */
    display: none;
}

.TabsLittle-Loading {
    padding: 25px 40px;
}

.phone .TabsLittle-Header,
.tablet .TabsLittle-Header {
    display: block;
    line-height: 36px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    white-space: normal;
    width: 100%;
}

.phone .TabsLittle-Tab .Badge,
.tablet.portrait .TabsLittle-Tab .Badge {
    /* make the badge small */
    border-radius: 50%;
    font-size: 11px;
    font-weight: normal;
    height: 22px;
    line-height: 2em;
    /* position:  the badge */
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
}

/* make the mrdium badge smaller */

.TabsLittle-Tab .Badge.Medium,
.TabsLittle-Tab.active .Badge.Medium {
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    line-height: 25px;
    width: 30px;
}

.TabsLittle-Tab.active .Badge.WBlue,
.TabsLittle-Tab.active .Badge.Blue {
    background-color: #609ee6;
    /* blue badge is hollow when active */
    color: #fff;
    font-weight: 400;
}

.TabsLittle-Tab.active .Badge.WRed,
.TabsLittle-Tab.active .Badge.Red {
    background-color: #ff213b;
    /* red badge is hollow when active */
    color: #fff;
    font-weight: 400;
}

.phone .TabsLittle-Tab.active .Badge,
.tablet.portrait .TabsLittle-Tab.active .Badge {
    display: none;
}

.phone .PH:empty,
.tablet.portrait .PH:empty {
    display: none;
}

.TabsLittle-Loading .LateLoadSpinner {
    display: block;
}

.phone .TabsLittle-Tab.FirstTab,
.tablet.portrait .TabsLittle-Tab.FirstTab,
.phone .TabsLittle-Tab.FirstTab.active,
.tablet.portrait .TabsLittle-Tab.FirstTab.active {
    background-color: #fff;
    border: solid 1px transparent;
    color: #333;
}

/* Tabs Little Widget END */

/*-------------------------------------------------------*\
    Tabs Dropdown Widget + "Tabs-Like" NavigationBar
\*-------------------------------------------------------*/

.TabsDropdown-Header,
ul.Tabs_Header,
.navBar-tabsLike .NavigationBar {
    display: table;
    height: 42px;
    table-layout: fixed;
}

.phone .TabsDropdown-Header,
.tablet.portrait .TabsDropdown-Header {
    height: 0;
}

.layoutListTabs > .Tabs_Wrapper {
    position: relative;
}

.phone .Tabs_Header,
.tablet.portrait .Tabs_Header,
.phone .navBar-tabsLike .NavigationBar .tablet.portrait .navBar-tabsLike .NavigationBar {
    width: 100%;
}

.TabsDropdown-Body {
    margin-top: 0;
    padding: 40px 0 20px 0;
    position: relative;
}

.TabsDropdown-Tab {
    display: table-cell;
    padding: 0 10px;
    position: relative;
}

.Tabs_Header > div.Tabs_TabOn,
.Tabs_Header > li.Tabs_TabOn,
.Tabs_Header > div.Tabs_TabOff,
.Tabs_Header > li.Tabs_TabOff,
.Tabs_Header > div.Tabs_TabDisabled,
.Tabs_Header > li.Tabs_TabDisabled {
    background: none;
    border: none;
    display: table-cell;
    float: initial;
    padding: 0 0;
    position: relative;
}

.TabsDropdown-Tab,
.Tabs_Header a.Tabs_TabOff,
.Tabs_Header a.Tabs_TabOff:link,
.Tabs_Header a.Tabs_TabOff:visited,
.Tabs_Header a.Tabs_TabDisabled,
.Tabs_Header a.Tabs_TabDisabled:link,
.Tabs_Header a.Tabs_TabDisabled:visited,
.Tabs_Header a.Tabs_TabDisabled:hover,
.Tabs_Header span.Tabs_TabDisabled,
.Tabs_Header a.Tabs_TabOn,
.Tabs_Header a.Tabs_TabOn:link,
.Tabs_Header a.Tabs_TabOn:visited,
.Tabs_Header a.Tabs_TabOn:hover,
.Tabs_Header span.Tabs_TabOn,
.navBar-tabsLike .NavigationBar a,
.navBar-tabsLike .NavigationBar a:link,
.navBar-tabsLike .NavigationBar a:visited,
.navBar-tabsLike .NavigationBar a:hover {
    background: none;
    color: #7c7c7c;
    cursor: pointer;
    font-size: 14px;
    line-height: 46px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.Tabs_Header a.Tabs_TabDisabled,
.Tabs_Header a.Tabs_TabDisabled:link,
.Tabs_Header a.Tabs_TabDisabled:visited,
.Tabs_Header a.Tabs_TabDisabled:hover,
.Tabs_Header span.Tabs_TabDisabled {
    background: none;
    color: #5d3e92;
    cursor: default;
    padding: 0 0;
}

.TabsDropdown-Tab:hover,
.Tabs_Header a.Tabs_TabOff:hover,
.Tabs_Header a.Tabs_TabOff:link:hover,
.Tabs_Header a.Tabs_TabOff:visited:hover {
    background: none;
    color: #5d3e92;
}

.TabsDropdown-Tab.active,
.Tabs_Header a.Tabs_TabOn,
.Tabs_Header a.Tabs_TabOn:link,
.Tabs_Header a.Tabs_TabOn:visited,
.Tabs_Header a.Tabs_TabOn:hover,
.Tabs_Header span.Tabs_TabOn,
.navBar-tabsLike .NavigationBar a.Active,
.navBar-tabsLike .NavigationBar a.Active:link,
.navBar-tabsLike .NavigationBar a.Active:visited,
.navBar-tabsLike .NavigationBar a.Active:hover {
    border-bottom: 2px solid #4a4a4a;
    color: #4a4a4a;
    cursor: default;
}

.TabsDropdown-Icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.TabsDropdown-Content {
    display: block;
    height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
}

.TabsDropdown-Content.active {
    height: auto;
    opacity: 1;
    overflow: initial;
}

.TabsDropdown-HeaderMobile .TabsDropdown-Tab {
    /* on mobile, tab pickers should take 100% width */
    border-radius: 0;
    display: block;
    width: 100%;
}

.TabsDropdown-HeaderMobile-Active .TabsDropdown-Tab {
    background-color: #5d3e8c;
    color: #fff;
}

.TabsDropdown-HeaderMobile-Other {
    height: 0;
    opacity: 0;
    -webkit-transition: height 1s;
    transition: height 1s;
}

.expand .TabsDropdown-HeaderMobile-Other {
    height: auto;
    opacity: 1;
}

.expand .TabsDropdown-Icon.Expand {
    display: none;
}

.TabsDropdown-Icon.Collapse {
    display: none;
}

.expand .TabsDropdown-Icon.Collapse {
    display: block;
}

.desktop .TabsDropdown-Icon,
.tablet.landscape .TabsDropdown-Icon {
    display: none;
}

.TabsDropdown-Loading .LateLoadSpinner {
    display: block;
}

.navBar-tabsLike .NavigationBar a,
.navBar-tabsLike .NavigationBar a:link,
.navBar-tabsLike .NavigationBar a:visited,
.navBar-tabsLike .NavigationBar a:hover {
    line-height: 1;
    margin: 0 0;
    padding: 12px 20px;
}

.navBar-tabsLike .NavigationBar a:after,
.navBar-tabsLike .NavigationBar a:link:after,
.navBar-tabsLike .NavigationBar a.Active:not(.ie7):before,
.navBar-tabsLike .NavigationBar a.Active:not(.ie8):before {
    display: none;
}

/* END: Tabs Dropdown Widget + "Tabs-Like" NavigationBar */

.SelectizeDiv .selectize-control {
    position: inherit;
    text-align: left;
}

/* Form */

.phone .Form input.Button {
    margin-left: 0;
    margin-top: 5px;
    width: 100% !important;
}

.MobileMenuButton {
    margin-right: 250px !important;
}

/*.tablet .TabletHeaderLogo,
.landscape .TabletHeaderLogo {
    margin-left: 10px !important;
    text-align: left;
}

.phone.portrait .TabletHeaderLogo {
    display: none;
}*/

.tablet.MenuOpen .HeaderLogo,
.phone.landscape.MenuOpen .HeaderLogo {
    text-align: left;
}

.tablet.landscape.MenuOpen .HeaderLogo {
    text-align: center;
}

.phone.portrait.MenuOpen .HeaderLogo {
    display: none;
}

/* Page Transitions */

.desktop .Menu_TopMenu a:link:hover {
    box-shadow: none;
    color: #833adf;
}

.menuItemsContainer.open .Menu_TopMenu a .icon,
.Menu_DropDownButton.open .Menu_TopMenu a .icon,
.menuItemsContainer.open .Menu_TopMenu a,
.Menu_TopMenu a:hover .icon {
    color: #833adf;
    fill: #833adf;
    opacity: 1;
    transition: all 300ms ease;
}

.Page:has(.env-dev) .sidebar-toggle svg,
.env-dev .Menu_TopMenu a:hover,
.desktop .env-dev .Menu_TopMenu a:link:hover,
.env-dev .menuItemsContainer.open .Menu_TopMenu a .icon ,
.env-dev .Menu_DropDownButton.open .Menu_TopMenu a .icon,
.env-dev .menuItemsContainer.open .Menu_TopMenu a,
.env-dev .Menu_TopMenu a:hover .icon { 
    color: #2DB366;
    fill: #2DB366;
}

.Page:has(.env-tst) .sidebar-toggle svg,
.env-tst .Menu_TopMenu a:hover,
.desktop .env-tst .Menu_TopMenu a:link:hover,
.env-tst .menuItemsContainer.open .Menu_TopMenu a .icon ,
.env-tst .Menu_DropDownButton.open .Menu_TopMenu a .icon,
.env-tst .menuItemsContainer.open .Menu_TopMenu a,
.env-tst .Menu_TopMenu a:hover .icon { 
    color: #fcb425;
    fill: #fcb425;
}

.Page:has(.env-stg) .sidebar-toggle svg,
.env-stg .Menu_TopMenu a:hover,
.desktop .env-stg .Menu_TopMenu a:link:hover,
.env-stg .menuItemsContainer.open .Menu_TopMenu a .icon ,
.env-stg .Menu_DropDownButton.open .Menu_TopMenu a .icon,
.env-stg .menuItemsContainer.open .Menu_TopMenu a,
.env-stg .Menu_TopMenu a:hover .icon { 
    color: #62CEFB;
    fill: #62CEFB;
}

.Page:has(.env-prd-impersonate) .sidebar-toggle svg,
.env-prd-impersonate .Menu_TopMenu a:hover,
.desktop .env-prd-impersonate .Menu_TopMenu a:link:hover,
.env-prd-impersonate .menuItemsContainer.open .Menu_TopMenu a .icon ,
.env-prd-impersonate .Menu_DropDownButton.open .Menu_TopMenu a .icon,
.env-prd-impersonate .menuItemsContainer.open .Menu_TopMenu a,
.env-prd-impersonate .Menu_TopMenu a:hover .icon { 
    color: #EF4343;
    fill: #EF4343;
}

.Menu_TopMenu a .icon {
    color: #94909c;
    fill: #94909c;
    font-size: 24px;
    line-height: 48px;
    margin-right: 16px;
    opacity: 1;
    transition: all 300ms ease;
    vertical-align: middle;
}

.Menu_TopMenu .Menu_DropDownArrow,
.Menu_TopMenu:hover .Menu_DropDownArrow {
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpolygon%20points%3D%2238.1%2019%2026.9%2029.4%2024%2032%2026.9%2034.6%2038.1%2045%2041%2042.4%2029.7%2032%2041%2021.6%22%20transform%3D%22translate(32.5%2032)rotate(-90)translate(-32.5%20-32)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        center center no-repeat;
    background-size: 25px 25px;
    border: none;
    display: inline-block;
    height: 10px;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 20px;
    transform: rotate(0deg);
    transform: rotate(0deg);
    transition: all 0.2s;
    width: 15px;
}

.Menu_DropDownButton.open .Menu_DropDownArrow {
    transform: rotate(180deg);
    transition: all 0.2s;
}

/* REMOVE submenuTitle from MENU */

.submenuTitle {
    display: none;
}

/* Media query to hide content for printing */

@media print {
    .wodify-nav {
        display: none !important;
    }
    html .Content.ThemeGrid_Wrapper {
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    .noPrint,
    .noPrint * {
        display: none !important;
    }
    .Content.ThemeGrid_Wrapper {
        left: 0 !important;
    }
    @page {
        margin-bottom: 0cm;
        margin-left: 0cm;
        margin-right: 0cm;
        /* margin: 2cm; */
        margin-top: 0cm;
        size: landscape;
    }
    .FiltersArea .MediumRightColumns > .Column.ColLast {
        width: 1% !important;
    }
    .FiltersArea .MediumRightColumns > .Column.ColFirst {
        width: 99% !important;
    }
    .globalSearch {
        display: none;
    }
    .fa,
    .ri {
        display: none;
    }
    ._pendo-guide_ {
        display: none;
    }
    .Feedback_Message_Error {
        display: none;
    }
    .invoiceEditContainer .Button {
        display: none;
    }

    .menu_quick-actions {
        display: none !important;
    }

    .fixed-help {
        display: none !important;
    }
}

/* Wodifind */

.WodifindPreviewBottomContainer {
    border: 1px solid #d0d0d0;
    border-radius: 0;
    margin-bottom: 10px;
    padding: 10px;
}

.WodifindPreviewContainer {
    border: 1px solid #d0d0d0;
}

/* List Navigation */

div.ListNavigation_Navigation {
    background-color: #eee;
    border-radius: 0;
    color: #9b9b9b;
    padding: 10px;
}

div.ListNavigation_Navigation.MarginRight {
    margin-right: 15px;
}

div.ListNavigation_Container {
    display: table-cell;
    vertical-align: middle;
}

/* Rx Icons */

.YellowCheckOff,
.YellowCheckOn,
.YellowCheckOffNoClick,
.YellowCheckOnNoClick {
    background: url(/WodifyAdminTheme/img/check_circle_3_yellow.png?34380&34536&35700&36124) left top no-repeat;
}

.RxOff,
.RxOn,
.RxOffNoClick,
.RxOnNoClick {
    background: url(/WodifyAdminTheme/img/rx_circle_blue.png?34380&34536&35700&36124) left top no-repeat;
}

.BigRxOff,
.BigRxOn,
.BigRxOffNoClick,
.BigRxOnNoClick {
    background: url(/WodifyAdminTheme/img/big_rx_blue.png?34380&34536&35700&36124) left top no-repeat;
}

.lockUnlockedNoClick {
    background: url(/WodifyAdminTheme/img/lock_unlocked.png?34380&34536&35700&36124) left top no-repeat;
}

.lockLockedNoClick {
    background: url(/WodifyAdminTheme/img/lock_locked.png?34380&34536&35700&36124) left top no-repeat;
}

.lockLockedNoClick,
.lockUnlockedNoClick {
    cursor: normal;
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    width: 24px;
}

.RxPlusOff,
.RxPlusOn,
.RxPlusOffNoClick,
.RxPlusOnNoClick {
    background: url(/WodifyAdminTheme/img/rx_plus_circle_red.png?34380&34536&35700&36124) left top no-repeat;
}

.BigRxPlusOff,
.BigRxPlusOn,
.BigRxPlusOffNoClick,
.BigRxPlusOnNoClick {
    background: url(/WodifyAdminTheme/img/big_rx_plus_red.png?34380&34536&35700&36124) left top no-repeat;
}

.GreenCheckOff,
.GreenCheckOn,
.GreenCheckOnNoClick,
.GreenCheckOffNoClick {
    background: url(/WodifyAdminTheme/img/check_circle_3_green.png?34380&34536&35700&36124) left top no-repeat;
}

.YellowCheckOff,
.RxOff,
.RxPlusOff,
.YellowCheckOffNoClick,
.RxOffNoClick,
.RxPlusOffNoClick,
.GreenCheckOff,
.GreenCheckOffNoClick {
    background-position: 0 -22px;
    cursor: pointer;
    display: inline-block;
    height: 22px;
    vertical-align: middle;
    width: 22px;
}

.BigRxOff,
.BigRxPlusOff,
.BigRxOffNoClick,
.BigRxPlusOffNoClick {
    background-position: 0 -44px;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    vertical-align: middle;
    width: 44px;
}

.BigRxOffNoClick,
.BigRxPlusOffNoClick,
.YellowCheckOffNoClick,
.RxOffNoClick,
.RxPlusOffNoClick,
.GreenCheckOffNoClick {
    cursor: auto;
}

.YellowCheckOff:hover,
.RxOff:hover,
.RxPlusOff:hover,
.GreenCheckOff:hover {
    background-position: 0 -44px;
}

.BigRxOff:hover,
.BigRxPlusOff:hover {
    background-position: 0 -88px;
}

.YellowCheckOn,
.RxOn,
.RxPlusOn,
.YellowCheckOnNoClick,
.RxOnNoClick,
.RxPlusOnNoClick,
.GreenCheckOn,
.GreenCheckOnNoClick {
    cursor: pointer;
    display: inline-block;
    height: 22px;
    vertical-align: middle;
    width: 22px;
}

.BigRxOn,
.BigRxPlusOn,
.BigRxOnNoClick,
.BigRxPlusOnNoClick {
    cursor: pointer;
    display: inline-block;
    height: 44px;
    vertical-align: middle;
    width: 44px;
}

.YellowCheckOnNoClick,
.RxOnNoClick,
.RxPlusOnNoClick,
.RxOffNoClick,
.RxPlusOffNoClick,
.GreenCheckOn,
.GreenCheckOnNoClick,
.BigRxOnNoClick,
.BigRxPlusOnNoClick,
.BigRxOffNoClick,
.BigRxPlusOffNoClick {
    cursor: auto;
}

/* Reporting_NEW - Override High charts CSS */

.phone .ChartWrapper {
    overflow-x: scroll;
}

.phone .ChartWrapper iframe {
    width: 800px !important;
}

g.highcharts-data-labels text {
    text-shadow: none !important;
}

.Lowercase {
    text-transform: lowercase;
}

.fileicon {
    font-family: FontAwesome;
}

/* Navigation Icon Styles */

.nav-icon-wod {
    cursor: pointer;
    height: 19px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    width: 23px;
}

.nav-icon-wod span {
    background: #fff;
    border-radius: 6px;
    display: block;
    height: 3px;
    left: 0;
    opacity: 1;
    position: absolute;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    width: 100%;
}

.nav-icon-wod span:nth-child(1) {
    top: 0;
}

.nav-icon-wod span:nth-child(2),
.nav-icon-wod span:nth-child(3) {
    top: 8px;
}

.nav-icon-wod span:nth-child(4) {
    top: 16px;
}

.nav-icon-wod.open span:nth-child(1) {
    left: 50%;
    top: 8px;
    width: 0;
}

.nav-icon-wod.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-icon-wod.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav-icon-wod.open span:nth-child(4) {
    left: 50%;
    top: 8px;
    width: 0;
}

.tablet .Header .Button.Header_buttonMenu .nav-icon-wod {
    margin-top: 5px;
}

.phone .Header .Button.Header_buttonMenu .nav-icon-wod {
    margin-top: 2px;
}

/*********************************************************************************************/

/**                        Affinity Webblocks stylesheet                                    **/

/**                                                                                         **/

/**         !!!Please prefix your selectors with the Affinity wrapper class!!!              **/

/**         !!!to scope further developments to this selector.                              **/

/*********************************************************************************************/

.Affinity {
    font-size: 16px;
    line-height: 1.8;
}

/* Responsive selectors */

.phone .Affinity {
    font-size: 14px;
}

/* SOCIAL INSIGHTS BANNER */

.Affinity .social-insights-banner,
.userGroup-banner {
    background-color: #f6f6f6;
    background-image: url(/Affinity_UI/img/Small_W.png?33038&34536&35700&36124);
    background-position: -100px -280px;
    background-repeat: no-repeat;
    border-radius: 5px;
    color: #9b9b9b;
    margin-bottom: 60px;
    min-height: 155px;
    position: relative;
    width: 100%;
}

/* Responsive selectors */

.phone .Affinity .social-insights-banner {
    display: none;
    margin-bottom: 30px;
    padding: 20px;
}

.phone .Affinity .social-insights-banner.has-interests {
    box-sizing: border-box;
    display: block;
}

.Affinity .social-insights-banner .text-content {
    display: inline-block;
    margin: 34px 42px;
    min-width: 300px;
    width: 60%;
}

/* Responsive selectors */

.phone .Affinity .social-insights-banner .text-content {
    font-size: 14px;
    margin: 0;
    min-width: auto;
    width: 100%;
}

.phone .Affinity .social-insights-banner .text-content .Bold {
    display: none;
}

.Affinity .social-insights-banner .icon,
.userGroup-bannerIcon {
    background: url(/Affinity_UI/img/group2.png?33038&34536&35700&36124);
    bottom: 0;
    display: block;
    height: 138px;
    position: absolute;
    right: 51px;
    width: 181px;
}

/* Responsive selectors */

.phone .Affinity .social-insights-banner .icon {
    display: none;
}

/* GENERIC */

.Affinity .social-insights-container {
    background-color: rgba(74, 144, 226, 1);
    background-image: url(/Affinity_UI/img/BigW_Blue.png?33038&34536&35700&36124);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: inherit;
    border-radius: 5px;
    color: #fff;
    height: 550px;
    width: 100%;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container {
    float: left;
    height: 427px;
    position: relative;
}

.Affinity .social-insights-container .social-insights-content {
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 296px;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container .social-insights-content {
    font-size: 14px;
    width: 100%;
}

.Affinity .social-insights-container.error {
    background-color: #f6f6f6;
    background-image: url(/Affinity_UI/img/Big_W.png?33038&34536&35700&36124);
    color: #717171;
}

.Affinity .social-insights-container .icon {
    display: block;
    height: 80px;
    margin: 0 auto 30px auto;
    margin-bottom: 30px;
    width: 80px;
}

.Affinity .social-insights-container .title {
    display: inline-block;
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container .title {
    font-size: 25px;
}

.phone .Affinity .social-insights-container .text-content {
    font-size: 14px;
    line-height: 1.1;
}

.Affinity .social-insights-container .button {
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    height: auto;
    line-height: 1em;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
}

.Affinity .social-insights-container .button.gray {
    border: solid 1px #717171;
    color: #717171;
}

.Affinity .social-insights-container .button.white {
    border: 1px solid #fff;
    color: #fff;
}

.Affinity .social-insights-container .button.gray.inverted {
    background: #717171;
    color: #fff;
}

.Affinity .social-insights-container .button.white.inverted {
    background: #fff;
    color: #468ee5;
}

.Affinity .social-insights-container .cta {
    border: solid 1px #fff;
    border-radius: 3px;
    color: #fff;
    display: block;
    font-size: 28px;
    font-weight: 300;
    height: 88px;
    line-height: 1.1;
    margin: 0 auto 15px auto;
    overflow: hidden;
    padding-top: 29px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 274px;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container .cta {
    height: 79px;
    padding-top: 24px;
    width: 247px;
}

.Affinity .social-insights-container .cta.loop:after {
    -webkit-animation: shine 1.2s infinite;
    -moz-animation: shine 1.2s infinite;
    -o-animation: shine 1.2s infinite;
    animation: shine 1.2s infinite;
    background: rgba(255, 255, 255, 0.2);
    content: "";
    height: 100px;
    position: absolute;
    top: 0;
    transform: skewX(-40deg);
    width: 300px;
}

/* LANDING */

.Affinity .social-insights-container.landing {
    background-color: #5d3e92;
    background-image: url(/Affinity_UI/img/BigW_Blue.png?33038&34536&35700&36124);
}

/* MISSING LINKS */

.Affinity .social-insights-container.missing-links .icon {
    background: url(/Affinity_UI/img/Exclamationicon.png?33038&34536&35700&36124);
}

.Affinity .social-insights-container.missing-links .button {
    margin-top: 40px;
}

/* NO RESULTS */

.Affinity .social-insights-container.no-results .icon {
    background: url(/Affinity_UI/img/errorsign.png?33038&34536&35700&36124);
}

/* WARNING */

.Affinity .social-insights-container.warning {
    background: #f6f6f6;
    box-sizing: border-box;
    color: #9b9b9b;
    height: 72px;
    margin-top: 60px;
    padding: 22px 65px;
    width: 100%;
}

/* Responsive selectors */

.tablet.portrait .Affinity .social-insights-container.warning,
.phone .Affinity .social-insights-container.warning {
    float: left;
    height: 92px;
    margin-bottom: 20px;
    padding: 20px;
    position: relative;
}

.tablet.portrait .Affinity .social-insights-container.warning a,
.phone .Affinity .social-insights-container.warning a {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.Affinity .social-insights-container.warning .text-content {
    display: inline-table;
    line-height: 1.4;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container.warning .text-content {
    font-size: 12px;
    line-height: 1.1;
    width: 150px;
}

.Affinity .social-insights-container.warning .text-content .days {
    font-size: 20px;
    font-weight: 600;
}

.Affinity .social-insights-container.warning .text-content .ready {
    font-size: 20px;
    font-weight: 600;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container.warning .text-content .ready {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.phone .Affinity .social-insights-container.warning .text-content .days {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.Affinity .social-insights-container.warning .button {
    display: block;
    float: right;
}

/* RERUN */

.Affinity .social-insights-container.warning.rerun {
    background: #468ee5;
    color: #fff;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container.warning.rerun {
    float: left;
    height: 76px;
    margin-bottom: 20px;
    padding: 13px 15px;
    position: relative;
}

.phone .Affinity .social-insights-container.warning.rerun .button {
    display: block;
    font-size: 12px;
    padding: 8px 9px;
    position: relative;
}

.phone .Affinity .social-insights-container.warning.rerun .text-content {
    font-size: 12px;
    width: 120px;
}

.Affinity .social-insights-container.warning.rerun .button:last-of-type {
    margin-right: 20px;
}

/* Responsive selectors */

.phone .Affinity .social-insights-container.warning.rerun .button:last-of-type {
    margin-right: 10px;
}

/* LOADING ANIMATION */

@-webkit-keyframes shine {
    0% {
        left: -120%;
        width: 300px;
    }
    100% {
        left: 120%;
        width: 0;
    }
}

@-moz-keyframes shine {
    0% {
        left: -120%;
        width: 300px;
    }
    100% {
        left: 120%;
        width: 0;
    }
}

@-o-keyframes shine {
    0% {
        left: -120%;
        width: 300px;
    }
    100% {
        left: 120%;
        width: 0;
    }
}

@keyframes shine {
    0% {
        left: -120%;
        width: 300px;
    }
    100% {
        left: 120%;
        width: 0;
    }
}

.Affinity .socialInsights-list {
    display: inline-block;
    width: 100%;
}

/* Responsive selectors */

.tablet.portrait .Affinity .socialInsights-list,
.phone .Affinity .socialInsights-list {
    display: block;
}

.Affinity .socialInsights-list .mobile-tab {
    display: none;
}

.Affinity .socialInsights-list .mobile-tab a,
.Affinity .socialInsights-list .mobile-tab a:link,
.Affinity .socialInsights-list .mobile-tab a:visited {
    text-decoration: none !important;
}

/* Responsive selectors */

.tablet.portrait .Affinity .socialInsights-list .mobile-tab,
.phone .Affinity .socialInsights-list .mobile-tab {
    display: inline-block;
    margin-bottom: 30px;
    width: 100%;
}

.tablet.portrait .Affinity .socialInsights-list .mobile-tab .option,
.phone .Affinity .socialInsights-list .mobile-tab .option {
    display: inline-block;
    height: 33px;
    text-align: center;
    width: 145px;
}

.tablet.portrait .Affinity .socialInsights-list .mobile-tab .option {
    width: 150px;
}

.tablet.portrait .Affinity .socialInsights-list .mobile-tab .option.selected,
.phone .Affinity .socialInsights-list .mobile-tab .option.selected {
    border-bottom: 3px solid #468ee5;
}

.Affinity .socialInsights-categories {
    float: left;
    height: 100%;
    min-width: 281px;
}

/* Responsive selectors */

.tablet.portrait .Affinity .socialInsights-categories,
.phone .Affinity .socialInsights-categories {
    min-width: 100%;
}

.Affinity .socialInsights-highlight-categories {
    border-right: 2px solid #ebebeb;
    color: #9b9b9b;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    text-decoration: none;
    text-transform: uppercase;
}

.Affinity .socialInsights-highlight-categories a,
.Affinity .socialInsights-highlight-categories a:link,
.Affinity .socialInsights-highlight-categories a:visited {
    color: inherit !important;
    text-decoration: none !important;
}

.Affinity .socialInsights-categories-name a,
.Affinity .socialInsights-categories-name a:link,
.Affinity .socialInsights-categories-name a:visited {
    color: inherit !important;
    text-decoration: none !important;
}

.Affinity .socialInsights-categories-name {
    border-right: 2px solid #ebebeb;
    color: #9b9b9b;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    text-decoration: none;
    text-transform: uppercase;
}

/* Responsive Selectors */

.tablet.portrait .Affinity .socialInsights-categories-name,
.phone .Affinity .socialInsights-categories-name {
    border-right: none;
    padding-left: 15px;
}

.tablet.portrait .Affinity .socialInsights-highlight-categories,
.phone .Affinity .socialInsights-highlight-categories {
    display: none;
}

.Affinity .socialInsights-categories-name-active,
.desktop .Affinity .socialInsights-categories-name:hover,
.desktop .Affinity .socialInsights-highlight-categories:hover {
    background-color: #f6f6f6;
    border-right: 4px solid #468ee5;
    color: #468ee5;
    font-weight: 600;
    padding-left: 40px;
}

/* Responsive Selectors */

.tablet.portrait .Affinity .socialInsights-categories-name-active,
.phone .Affinity .socialInsights-categories-name-active {
    border-right: none;
    padding-left: 15px;
}

.Affinity .socialInsights-interests-category {
    border: solid 1px #9b9b9b;
    border-radius: 2.3px;
    color: #9b9b9b;
    font-size: 11px;
    font-weight: 600;
    height: 26px;
    line-height: 17px;
    margin-left: 20px;
    min-width: 65px;
    padding: 5px;
    text-transform: uppercase;
}

/* Responsive Selectors */

.tablet.portrait .Affinity .socialInsights-interests-category,
.phone .Affinity .socialInsights-interests-category {
    border: none;
    float: left;
    margin-left: 0;
    padding: 0;
    text-align: left;
}

.Affinity .socialInsights-interests {
    padding-left: 280px;
}

/* Responsive selectors */

.tablet.portrait .Affinity .socialInsights-interests,
.phone .Affinity .socialInsights-interests {
    background: #fff;
    min-width: 100%;
    padding-left: 0;
    position: absolute;
    right: -105%;
    transition: right 1s ease-in-out;
    width: 100%;
}

.tablet.portrait .Affinity .socialInsights-interests.slideIn,
.phone .Affinity .socialInsights-interests.slideIn {
    right: 0;
}

.Affinity .socialInsights-interests-name {
    border-bottom: solid 1px #e0e0e0;
    height: 60px;
    margin-left: 60px;
    padding-top: 15px;
}

/* Responsive Selectors */

.tablet.portrait .Affinity .socialInsights-interests-name.highlight-interest,
.phone .Affinity .socialInsights-interests-name.highlight-interest {
    height: auto;
    padding-top: 0;
}

.tablet.portrait .Affinity .socialInsights-interests-name.highlight-interest .socialInsights-interests-category,
.phone .Affinity .socialInsights-interests-name.highlight-interest .socialInsights-interests-category {
    height: auto;
    line-height: initial;
    margin-top: 10px;
}

.tablet.portrait .Affinity .socialInsights-interests-name.highlight-interest .socialInsights-interests-label,
.phone .Affinity .socialInsights-interests-name.highlight-interest .socialInsights-interests-label {
    position: relative;
    top: 50%;
    transform: translateY(-10%);
}

.tablet.portrait .Affinity .socialInsights-interests-name.highlight-interest .socialInsights-interests-level,
.phone .Affinity .socialInsights-interests-name.highlight-interest .socialInsights-interests-level {
    position: relative;
}

.tablet.portrait .Affinity .socialInsights-interests-name,
.phone .Affinity .socialInsights-interests-name {
    float: left;
    height: auto;
    height: 75px;
    margin-left: 0;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.tablet.portrait .Affinity .socialInsights-interests-name:last-of-type,
.phone .Affinity .socialInsights-interests-name:last-of-type {
    border-bottom: none;
}

.Affinity .socialInsights-interests-label {
    color: #000;
    float: left;
    font-size: 16px;
}

/* Responsive Selectors */

.tablet.portrait .Affinity .socialInsights-interests-label,
.phone .Affinity .socialInsights-interests-label {
    clear: both;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
}

.Affinity .socialInsights-interests-level {
    border-radius: 3px;
    float: right;
    font-size: initial;
    height: 30px;
    width: 155px;
}

/* Responsive selectors */

.tablet.portrait .Affinity .socialInsights-interests-level,
.phone .Affinity .socialInsights-interests-level {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 115px;
}

.Affinity .socialInsights-interests-level--high {
    background-color: #e5371a;
}

.Affinity .socialInsights-interests-level--medium {
    background-color: #ff9800;
}

.Affinity .socialInsights-interests-level--low {
    background-color: #ffda46;
}

.Affinity .socialInsights-interests-level-description {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    height: 17px;
    text-align: center;
    text-transform: uppercase;
}

.Affinity .socialInsights-navigation {
    display: none;
}

.Affinity .socialInsights-navigation a,
.Affinity .socialInsights-navigation a:link,
.Affinity .socialInsights-navigation a:visited {
    text-decoration: none !important;
}

/* Responsive Selectors */

.tablet.portrait .Affinity .socialInsights-navigation,
.phone .Affinity .socialInsights-navigation {
    color: #5d3e92;
    display: block;
}

.Affinity .social-insights-container .social-insights-content {
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 296px;
}

/* WOD CSS Styles */

/******************************************************************** -> #8395 Card <- */

.wod_handler {
    background-image: url(/WodifyAdminThemeBase/img/DRAG_Icon.png);
    height: 16px;
    margin: 0 auto;
    position: relative;
    transition: transform 0.3s ease-in-out;
    width: 23px;
}

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

/******************************************************************** -> #8395 Card <- */

/*********************************************************************/

/** WOD Image                                                       **/

/*********************************************************************/

.Button.NoFill.Gray.wod-image-add-image-button {
    border-color: #d3dbe2;
    position: relative;
    z-index: 0;
}

.Button.NoFill.Gray.wod-image-add-image-button:hover {
    border-color: #d3dbe2 !important;
}

.WODComponentEditWrapper .Item.FirstCol {
    width: 100%;
}

.wod-image-preview {
    max-height: 300px;
    max-width: 530px;
    overflow: hidden;
}

.wod-image-preview img {
    max-height: 100% !important;
    width: 100%;
}

.wod-image-preview-caption .UnderlineInput input[type="text"] {
    box-shadow: none !important;
}

.wod-image-upload {
    color: #717171;
    cursor: initial;
    font-family: "Open Sans", sans-serif;
    height: 300px;
    width: 100%;
}

/*.phone .wod-image-upload,
.tablet .wod-image-upload{
    display:none;
}*/

.wod-image-upload .wod-image-upload-content {
    position: relative;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.wod-image-upload .wod-image-upload-content.enter > .show {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.wod-image-upload .wod-image-upload-content > *,
.wod-image-upload .wod-image-upload-content.loading > * {
    opacity: 0;
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
}

.wod-image-upload .wod-image-upload-content .icon {
    background: url(/WodifyAdminThemeBase/img/UPLOAD_Icon.png);
    background-size: 100%;
    height: 78px;
    margin: 0 auto;
    margin-bottom: 20px;
    position: relative;
    top: 0;
    transition: all 0.2s ease-in-out;
    width: 80px;
}

.wod-image-upload .wod-image-upload-content.loading .icon {
    opacity: 1;
    transform: translateY(60%);
    transition-delay: 0.4s;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}

.wod-image-upload .wod-image-upload-content .title {
    display: block;
    font-size: 25px;
    margin: 0;
    margin-bottom: 15px;
    position: relative;
    transition: all 0.2s ease-in-out 0.1s;
    width: 100%;
}

.phone .wod-image-upload .wod-image-upload-content .title,
.tablet .wod-image-upload .wod-image-upload-content .title {
    display: none;
}

.wod-image-upload .wod-image-upload-content .warning {
    display: block;
    font-size: 14px;
    position: relative;
    transition: all 0.2s ease-in-out 0.2s;
    width: 100%;
}

.wod-image-upload .wod-image-upload-content .wod-image-drag-area {
    height: 100%;
    left: 0;
    margin-top: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    transform: none;
    width: 100%;
    z-index: 2;
}

.wod-image-drag-area .qq-uploader {
    height: 100%;
    transform: none;
    width: 100%;
}

.wod-image-drag-area .qq-upload-drop-area {
    opacity: 0;
}

.wod-image-drag-area .qq-upload-list {
    display: none;
}

.wod-image-drag-area .qq-upload-button {
    float: initial;
    height: 40px;
    margin: 0 auto;
    opacity: 0;
    position: relative;
    top: 194px;
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    transition: all 0.2s ease-in-out 0.3s;
    width: 190px;
    z-index: 7;
}

.phone .wod-image-drag-area .qq-upload-button {
    width: 100%;
}

.wod-image-drag-area .qq-upload-button {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.wod-image-drag-area .qq-upload-button > a {
    color: #717171;
    display: block;
    font-size: 14px;
    height: 28px;
    line-height: normal;
    margin-top: 9px;
    z-index: 1;
}

.wod-image-drag-area .qq-upload-button:hover > a {
    color: #fff;
}

.wod-image-drag-area .qq-upload-button:hover:before {
    background: #717171;
    color: #fff;
}

.wod-image-drag-area .qq-upload-button:before {
    background: #fff;
    border: 1px solid #717171;
    border-radius: 0;
    color: #717171;
    content: "";
    font-size: 14px;
    height: 26px;
    left: 0;
    padding-top: 9px;
    position: absolute;
    top: 0;
    transition: background-color 0.2s linear;
    width: 187px;
    z-index: -2;
}

.phone .wod-image-drag-area .qq-upload-button:before {
    box-sizing: border-box;
    height: 38px;
    width: 100%;
}

.wod-image-drag-area .qq-upload-button input {
    display: block !important;
    width: 100%;
}

/* Progress Feedback - CSS Styles */

.progressFeedback-content {
    margin: 0 auto;
    max-width: 540px;
    padding: 20px 0 10px 0;
    position: relative;
    text-align: center;
    width: 90%;
}

.progressFeedback-content .icon {
    margin-top: 20px;
}

.progressFeedback-title {
    color: #717171;
    font-size: 30px;
    padding-top: 22px;
}

.progressFeedback-message {
    color: #717171;
    font-size: 16px;
    padding: 10px 0 0 0;
}

.progressFeedback-errormessage {
    color: #717171;
    font-size: 14px;
    padding: 10px 0 0 0;
}

.progressFeedback-message strong {
    font-size: 20px;
    font-weight: 700;
}

.progressFeedback-messageContainer .progressFeedback-message {
    padding: 0 0 0 0;
}

.progressFeedback-messageContainer > div:first-of-type {
    padding: 10px 0 0 0;
}

/* Progress Feedback - Buttons */

.progressFeedback-actions,
.progressFeedback-outerActions {
    padding: 40px 0 0 0;
}

.progressFeedback .Button {
    font-size: 15px;
    height: 36px;
    line-height: 36px;
    margin: 0 12px;
    padding: 0 0;
    width: 104px;
}

.phone .progressFeedback .Button {
    margin: 0 12px !important;
    width: 104px !important;
}

.progressFeedback .Button.NoFill.Gray,
.progressFeedback .Button.NoFill.Gray:hover {
    color: #717171 !important;
}

.progressFeedback .Button.NoFill.Border.Gray,
.progressFeedback .Button.NoFill.Border.Gray:hover {
    border-color: #717171 !important;
}

/* Progress Bar - CSS Styles */

.progressBar {
    background-color: #e0e0e0;
    border-radius: 0;
    margin-top: 12px;
    overflow: hidden;
    text-align: left;
}

.progressBar.Small {
    height: 2px;
}

.progressBar.Medium {
    font-size: 10px;
    height: 16px;
}

.progressBar.Large {
    font-size: 20px;
    height: 32px;
}

.progressBar span {
    display: table-cell;
    vertical-align: middle;
}

.progressBar-bar {
    background-color: #5d3e92;
    color: #fff;
    display: table;
    height: 100%;
    text-align: center;
    -webkit-transition: width 0.6s ease;
    -moz-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.progressBar-value {
    color: #5d3e92;
    font-size: 45px;
    font-weight: 900;
    line-height: 45px;
    padding: 20px;
}

.progressBar2 {
    width: 70px;
}

.progressBar2 .ui-progress-bar,
.progressBar2 .ui-progress-bar .ui-progress {
    background: none;
    background-color: transparent;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
    -khtml-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

.progressBar2 .ui-progress-bar {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: none;
    height: 1px;
    padding: 0;
}

.progressBar2--gradient .ui-progress-bar {
    border: 1px solid transparent;
    border-color: #623b90;
    height: 3px;
}

.progressBar2 .ui-progress-bar .ui-progress {
    background-color: #623b90 !important;
    height: 3px;
    overflow: visible;
    top: -1px;
    -moz-transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
}

.progressBar2--gradient .ui-progress-bar .ui-progress {
    height: 1px;
    top: 0;
}

.progressBar2--gradient .ui-progress-bar .ui-progress:after {
    background: transparent;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(246, 245, 249, 0.8), rgba(246, 245, 249, 0));
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(246, 245, 249, 0.8), rgba(246, 245, 249, 0));
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(246, 245, 249, 0.8), rgba(246, 245, 249, 0));
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(246, 245, 249, 0.8), rgba(246, 245, 249, 0));
    bottom: -1px;
    content: "";
    display: block;
    left: 100%;
    position: absolute;
    top: -1px;
    width: calc(70px - 100%);
    /* Standard syntax */
}

.progressBar2--waiting {
    position: relative;
}

.progressBar2--waiting .ui-progress-bar {
    margin-right: 18px;
}

.progressBar2--waiting:after,
.progressBar2--waiting:before,
.progressBar2--waiting .ui-progress-bar:after {
    background-color: #d2d1d2;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    right: 0;
    top: -1px;
    width: 3px;
}

.progressBar2--waiting:before {
    right: 6px;
}

.progressBar2--waiting .ui-progress-bar:after {
    right: -6px;
}

/*START Admin athlete - Edit user*/

.locationName.blockWithInfo {
    margin-right: 28px;
    position: relative;
}

.locationName .blockWithInfo-info {
    position: absolute;
    right: -28px;
    top: 10px;
}

.phone.landscape .locationName .blockWithInfo-info {
    margin-right: -28px;
    right: 20%;
}

/* END Admin athlete - Edit user*/

/*START WOD Builder - Edit user*/

a.OutlineLinkWOD:focus {
    -webkit-box-shadow: 0 0 5px;
    -moz-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;
    display: block;
    margin-right: -25px;
    padding: 5px;
}

a.OutlineBtnWOD:focus {
    -webkit-box-shadow: 0 0 5px;
    -moz-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;
}

.ToggleButton {
    background: #fff;
    /*-webkit-box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);*/
    border: 1px solid #8890a4;
    border-radius: 34px;
    height: 28px;
}

.ToggleButton_label {
    height: 28px;
}

.ToggleButton_label.onToggleFocus {
    -webkit-box-shadow: 0 0 5px #5d3e92;
    -moz-box-shadow: 0 0 5px #5d3e92;
    box-shadow: 0 0 5px #5d3e92;
}

.ToggleButton_label:after {
    background-color: #8890a4;
    border-radius: 10px;
    top: 4px;
}

/* END WOD Builder - Edit user*/

/* Location Themes */

.white-labeling-banner {
    background-color: #f6f6f6;
    background-image: url("/WodifyAdminTheme/img/small_w.png?34380&34536&35700&36124");
    background-position: right -280px;
    background-repeat: no-repeat;
    height: 90px;
    text-align: center;
    width: 100%;
}

.white-labeling-banner-icon {
    background-image: url("/WodifyAdminTheme/files/ThemeInformationIcon.svg");
    display: inline-block;
    height: 48px;
    margin-right: 25px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
}

.white-labeling-banner-copy {
    color: #9b9b9b;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    height: 28px;
    line-height: 28px;
    position: relative;
}

.white-labeling-custom {
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 20px 20px 10px 20px;
}

.phone {
    display: block;
    /*width: 320px;
    height: 480px;
    margin: 50px auto;*/
}

.phone .white-labeling-banner {
    box-sizing: border-box;
    height: auto;
    padding: 15px;
}

.phone .white-labeling-banner-icon {
    display: block;
    margin: 0 auto;
    top: initial;
    transform: none;
}

.phone .white-labeling-banner-copy {
    border-left: none;
    display: inline-block;
    font-size: 22px;
    line-height: 28px;
    padding: 0;
    top: 8px;
}

.HotKeys_Key {
    background-color: #f4f2f2;
    border: 1px solid #a1a1a1;
    border-radius: 0;
    color: #454e57;
    font-size: 10px;
    margin-top: 2px;
}

.HotKeys_Key.small {
    font-size: 9px;
    padding: 2px;
}

.HotKeys_Container {
    margin-top: 2px;
}

.HotKeys_Container div {
    margin: 0 2px 0 2px;
    vertical-align: middle;
}

.HotKeys_Container div:last-child {
    margin-right: 0;
}

/* Services/Appointments - Start CSS */

.providerList-item {
    border-right-color: grey;
    border-right-style: solid;
    border-right-width: 1px;
    font-size: 16px;
    margin-left: 10px;
    padding: 10px;
}

.providerList-itemActive {
    background-color: #f0f0f0;
    border-right-color: blue;
    border-right-style: solid;
    border-right-width: 2px;
    font-size: 16px;
    margin-left: 10px;
    padding: 10px;
}

.ServiceHeader .EditInline_Wrapper {
    border: none;
    /*margin: -15px -15px 0 -15px;*/
}

.ServiceHeader .service-duration {
    color: #333;
    font-size: 16px;
    line-height: 20px;
    padding: 0 0 15px 0;
    width: auto;
}

.ServiceHeader .service-description {
    color: #333;
    font-size: 16px;
}

.ServiceHeader .VAlignMiddleInlineBlock,
.ServiceHeader .EditInline_Wrapper .Item,
.ServiceHeader .UnderlineInput .Item {
    display: inline-block;
    vertical-align: top !important;
}

.ServiceHeader .SubHeading {
    max-height: 400px;
    opacity: 1;
    -webkit-transition: max-height 0.3s;
    -moz-transition: max-height 0.3s;
    transition: max-height 0.3s;
}

.ServiceHeader.section-expanded .SubHeading {
    max-height: 0;
    /*opacity: 0;*/
    overflow: hidden;
    -webkit-transition: max-height 0.3s;
    -moz-transition: max-height 0.3s;
    transition: max-height 0.3s;
}

.desktop .ServiceHeader .service-form-edit .Columns .ColLast,
.tablet .ServiceHeader .service-form-edit .Columns .ColLast {
    border-left: 1px solid #8a8a8c;
}

.tablet .ServiceHeader .ExpandableContent > span > .ThemeGrid_Width9 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.ServiceHeader .service-section {
    margin-top: 30px;
}

.ServiceHeader .service-section:first-child {
    margin-top: 0;
}

.ServiceHeader .Section_Wrapper .Heading3 {
    font-weight: 600;
}

.ServiceHeader .Heading3.service-title {
    padding-bottom: 10px;
}

.ServiceHeader .EditInline_Wrapper > .ItemsWrapper {
    padding: 0;
}

.ServiceHeader .service-section input {
    max-width: 60px;
}

.ServiceContent .EditInline_Wrapper,
.ServiceContent .Edit2Column_Wrapper.BorderAndPadding {
    padding: 30px 0 15px 0;
}

/*................*/

/* Location Tabs  */

/*................*/

.locationTab {
    white-space: nowrap;
}

.locationTabList {
    height: 42px;
    left: 0;
    position: absolute;
    right: 110px;
}

.phone .locationTabList {
    right: 0;
}

.locationTabSort {
    padding-bottom: 9px;
    padding-left: 15px;
    padding-right: 9px;
    padding-top: 11px;
    position: absolute;
    right: 0;
}

.locationTabContentListRecords {
    background-color: white;
    border-radius: 0 0 3px 3px;
    padding: 0 0 20px;
}

.locationTabContentFilters {
    background-color: white;
    padding: 20px 0 0 0;
}

.locationTabList-item,
.locationTabList-menu,
.locationTabItemInBalloon {
    font-size: 15px;
    line-height: 1;
    padding: 12px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.phone .locationTabList-item,
.phone .locationTabList-menu,
.phone .locationTabItemInBalloon {
    font-size: 14px;
    padding: 12px;
}

.locationTabList-item,
.locationTabList-menu {
    display: table-cell;
}

.locationTab-balloon .Balloon:after,
.locationTab-balloon .Balloon:before {
    left: auto;
    right: 20px;
}

.locationTab-balloon .Balloon:before {
    margin-left: 0;
    margin-right: -2px;
}

.locationTabItemInBalloon {
    color: #7c7c7c;
    cursor: pointer;
    display: block;
    white-space: nowrap;
}

.locationTab-item,
.locationTabList-menu {
    color: #7c7c7c;
    cursor: pointer;
}

.locationTab-item:hover,
.locationTabItemInBalloon:hover,
.locationTabSort:hover {
    color: #4a90e2;
}

.locationTab-item a:link,
.locationTabItemInBalloon a,
.locationTabSort a {
    color: #7c7c7c;
    text-decoration: none;
}

.locationTab-item--active {
    background-color: white;
    border-bottom: 4px solid #5d3e92;
    color: #5d3e92;
    cursor: default !important;
}

.calendarActionBackground {
    background-color: #f6f5f9;
    border-radius: 5px;
    display: inline-block;
    padding: 15px;
    width: 315px;
}

.phone .calendarActionBackground {
    width: 100%;
}

/* Calendar Actions Reskin - Start - Card 2370
********************************************************************/

.calendarActionBackground .closeModalButton {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
}

.calendarAction-buttonNew {
    background: none;
    border: 1px solid #623b90;
    color: #623b90;
    cursor: pointer;
    margin-bottom: 10px;
    text-transform: uppercase;
    width: 100%;
}

.calendarAction-button {
    background: none;
    border-color: #333;
    border-style: solid;
    border-width: 1px;
    color: #333;
    cursor: pointer;
    margin-bottom: 10px;
    text-transform: uppercase;
    width: 100%;
}

.calendarAction-back {
    color: #623b90;
    font-size: 14px;
    left: 8px;
    line-height: 19px;
    position: relative;
    text-align: left;
    text-transform: uppercase;
}

.calendarAction-back:before {
    content: "<";
    display: block;
    font-size: 10px;
    left: -7px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    width: 5px;
}

.calendarAction-athleteSelector {
    background: #fff;
    border: 1px solid #ededed;
    padding-left: 25px;
    position: relative;
}

.calendarAction-athleteSelector input {
    border: none;
    font-size: 13px;
    padding: 0 !important;
}

.calendarAction-athleteSelector input:focus {
    border: none !important;
}

.calendarAction-athleteSelector input:hover {
    box-shadow: none !important;
}

.calendarAction-athleteSelector svg {
    height: 15px;
    left: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    z-index: 1;
}

.calendarAction-book {
    box-shadow: 0 2px 5px 0 rgba(87, 61, 139, 0.4);
    width: auto;
}

.calendarAction-book--left {
    width: 100%;
}

.calendarAction-title {
    color: rgba(0, 0, 0, 0.8);
    font-size: 20px;
    line-height: 24px;
}

.calendarAction-title svg {
    height: 2.5em;
    width: 2.5em;
}

.calendarAction-time {
    border-bottom: 2px solid #808080;
    color: #000000;
    display: inline-block;
    font-weight: 300;
    margin: 0 10px;
    padding-bottom: 2px;
    text-decoration: none !important;
    text-transform: lowercase;
    width: auto;
}

.calendarAction-label {
    font-size: 12px;
    opacity: 0.5;
}

.calendarAction-membershipNameRenew {
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 5px;
}

.calendarAction-membershipNameRenew span {
    color: #ff0000;
}

.calendarAction-athleteInfo {
    color: rgba(0, 0, 0, 0.8);
    font-size: 13px;
    margin: 14px 9px 9px 25px;
}

.calendarAction-change {
    position: absolute;
    right: 10px;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
}

.calendarAction-membershipName {
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    line-height: 10px;
}

.calendarAction-back a:link {
    color: #a8a8a8;
    cursor: pointer;
    text-decoration: none;
}

.calendarAction-actionsContainer {
    float: left;
    position: relative;
    width: 100%;
}

.calendarAction-buttons {
    float: right;
}

.calendarAction-closeButton {
    position: absolute;
    right: 0;
    top: 0;
}

.calendarAction-closeButton svg {
    height: 2.5em;
    width: 2.5em;
}

/* Calendar Actions Reskin - End - Card 2370
********************************************************************/

.serviceCalendarList-item {
    border-top: 1px solid #f2f2f2;
    color: rgba(0, 0, 0, 0.5);
    padding: 10px 0px;
    position: relative;
}

.serviceCalendarList-color--big {
    border-radius: 50%;
    height: 32px;
    width: 32px;
}

.serviceCalendarList-item--inactive {
    border-top: 1px solid #f2f2f2;
    color: #f2f2f2;
    padding: 10px 0px;
    position: relative;
}

.serviceCalendarList-item a:link {
    color: #333;
    text-decoration: none;
}

.serviceCalendarList-item--inactive a:link {
    color: #f2f2f2;
    text-decoration: none;
}

.serviceCalendarList-arrow-right {
    color: #6a6a6a;
    position: absolute;
    right: 0px;
    top: 20px;
}

.serviceCalendarList-arrow-right:before {
    border-bottom-color: #6a6a6a;
    border-bottom-style: solid;
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #6a6a6a;
    border-left-style: solid;
    border-width: 2px;
    content: "";
    display: block;
    height: 8px;
    transform: rotate(-135deg);
    width: 8px;
}

.providersCalendarList-item .serviceCalendarList-arrow-right,
.providersCalendarList-item--inactive .serviceCalendarList-arrow-right {
    right: 7px;
    top: 1px;
}

.providersCalendarList-item .icon-visible,
.providersCalendarList-item .icon-invisible,
.providersCalendarList-item--inactive .icon-visible,
.providersCalendarList-item--inactive .icon-invisible {
    position: relative;
    top: 4px;
}

.overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 8;
}

.calendarBlockedTime {
    color: inherit;
    opacity: 0.7 !important;
    position: absolute;
    z-index: 100 !important;
}

.calendarBlockedTime:before {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
    background: -webkit-repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6) 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}

.calendarAvailability {
    color: white !important;
    opacity: 0.2 !important;
    position: absolute;
    z-index: -120 !important;
}

.fc-event.inactive {
    opacity: 0.6;
}

.fc-event.inactive .fc-title {
    color: #000 !important;
    text-decoration: line-through;
}

.providersCalendarList {
    padding: 10px 0;
    position: relative;
}

.providersCalendarList:after {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.06+0,0+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%);
    content: "";
    display: block;
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f000000', endColorstr='#00000000', GradientType=0);
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
    /* IE6-9 */
}

.providersCalendarList:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.06+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 100%);
    bottom: 0;
    content: "";
    display: block;
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#0f000000', GradientType=0);
    height: 10px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
    /* IE6-9 */
}

.providersCalendarList-item {
    border-bottom: 0px;
    color: #333333;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 5px;
    position: relative;
}

.providersCalendarList-item--inactive {
    border-bottom: 0px;
    color: #f2f2f2;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 5px;
}

.providersCalendarList-color--small {
    border-radius: 50%;
    height: 20px;
    left: -5px;
    position: relative;
    width: 20px;
}

.phone .providersCalendarList-color--small {
    margin-right: 11px;
}

.providersCalendarList-item a:link {
    color: #333333;
    text-decoration: none;
}

.providersCalendarList-item--inactive a:link {
    color: #d1d1d1;
    text-decoration: none;
}

.calendarLegendContainer {
    display: inline-block;
    width: 150px;
}

.calendarLegendContainer .providersCalendarList-color--small {
    border-radius: 0;
    float: left;
    left: 0;
}

.calendarLegendContainer .calendarLegend {
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    width: 108px;
}

.calendarLegendContainer .calendarLegend a {
    position: relative;
    top: 3px;
}

.centerBalloon .Balloon {
    background: none;
    border: none;
    left: calc(50% - 25px) !important;
    top: 300px !important;
}

.phone .centerBalloon .Balloon {
    left: 0px !important;
    position: fixed;
    top: 50% !important;
    transform: translateY(-50%);
    width: 100%;
}

.centerBalloon .Balloon:before,
.centerBalloon .Balloon:after {
    display: none;
}

.centerBalloon .Balloon_content {
    padding: 0;
}

.phone .calendarActions .Balloon select {
    width: auto;
}

.calendarActions .calendarActionsHours {
    color: #000000;
    font-size: 14px;
}

.calendarActions .calendarActionsHours select {
    background: transparent;
    border: none;
    padding: 0px 18px 4px 3px;
}

.calendarActions .calendarActionsAuxiliaryButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.phone .calendarActions .calendarActionsAuxiliaryButton {
    margin-bottom: 10px;
    position: relative;
    top: 0px;
}

.calendarActions .calendarActionsCheckboxContainer {
    font-size: 12px;
    margin-left: 15px;
    margin-right: 10px;
    margin-top: 0 !important;
    position: relative;
    text-align: left;
    vertical-align: baseline;
}

.calendarActions .calendarActionsCheckboxContainer input {
    margin-right: 10px;
    top: 5px;
}

.dateRangeSelector {
    display: inline-block;
    position: relative;
}

/*Pricing Section*/

.big-value {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 0 10px 0px;
}

.tablet .big-value,
.phone .big-value {
    padding-top: 20px;
}

.Appointments-records .ListRecords,
.Appointments-records .ListRecords > span {
    display: block;
    line-height: 48px;
    margin-bottom: 2px;
}

.Appointments-records .ListRecords .templates-list:hover,
.Appointments-records .ListRecords > span:hover {
    background: #5d3e92;
    color: #fff;
}

.Appointments-records .ListRecords .templates-list:hover .templates-list a,
.Appointments-records .ListRecords > span:hover > .templates-list a {
    color: #fff;
}

.Appointments-records .ListRecords .templates-list,
.Appointments-records .ListRecords > span > .templates-list {
    background: #f0f0f0;
    font-size: 16px;
    height: 48px;
    margin-bottom: 2px;
    padding: 0 15px;
    position: relative;
}

.Appointments-records .ListRecords .templates-list a,
.Appointments-records .ListRecords > span > .templates-list a {
    color: #141414;
    font-size: 16px;
    line-height: 35px;
}

.Appointments-records .ListRecords .templates-list a.remove-link,
.Appointments-records .ListRecords > span > .templates-list a.remove-link {
    color: #ec5a48;
    font-size: 14px;
    line-height: 45px;
    position: absolute;
    right: 15px;
    top: 0px;
}

.Appointments-records .ListRecords .templates-list a.remove-link:hover,
.Appointments-records .ListRecords > span > .templates-list a.remove-link:hover {
    font-weight: 600;
}

.no-singlesession {
    padding: 20px 0 20px 0;
}

.emailTemplates .emailTemplatesRow {
    background: #f0f0f0;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    margin-bottom: 2px;
    padding: 0 15px;
}

.emailTemplates .emailTemplatesRow:hover {
    background: #5d3e92;
    color: #fff;
}

.emailTemplates .emailTemplatesRow:hover a {
    color: #fff;
}

.AppointmentUser.ListRecords > br {
    display: none;
}

.AppointmentUser.ListRecords .ThemeGrid_Width4:hover {
    background-color: #eee;
}

.AppointmentUser.ListRecords .ThemeGrid_Width4 {
    display: block !important;
    padding: 8px 16px;
    width: 100%;
}

.AppointmentUser.ListRecords .ThemeGrid_Width4 tbody > tr > td:first-child {
    padding-right: 8px;
}

.AppointmentUser.ListRecords .ThemeGrid_Width4 div:hover {
    background-color: transparent;
}

/* Services/Appointments - End CSS */

/*------------------------------------*\
        Segments
\*-------------------------------------*/

/*.segments-title {
    font-weight: 300;
    color: #5d3e92;
}*/

.segments-helpText {
    color: #9b9b9b;
    display: block;
    font-size: 14px;
    padding: 10px 0 10px 22px;
    position: relative;
}

.segments-helpText:before {
    content: "\e681";
    font-family: "retinafont";
    font-size: 16px;
    left: 0;
    position: absolute;
    top: 10px;
}

/* Segments - List */

.segmentsList .phone .Panel_content > div,
.segmentsList .tablet.portrait .Panel_content > div {
    margin: 0 0 !important;
}

.segmentsList .Panel_content .HideOnDesktop.Heading2 {
    display: none;
}

.segmentsList .phone .FiltersArea .Columns2 > .Column,
.segmentsList .tablet.portrait .FiltersArea .Columns2 > .Column {
    padding: 0 0;
    width: 100%;
}

.segmentsList .phone .FiltersArea .Columns2 > .Column.ColLast,
.segmentsList .tablet.portrait .FiltersArea .Columns2 > .Column.ColLast {
    display: none;
}

.segmentsList .Heading1 {
    margin: 20px 0;
}

.segmentsList-search {
    margin: 0 0 20px 0;
    position: relative;
}

.phone .segmentsList-search,
.tablet.portrait .segmentsList-search {
    margin: 0 0;
}

/*.segmentsList-search:after {
    color: #ccc;
    content: "\f07d";
    font-family: "retinafont";
    left: 15px;
    position: absolute;
    top: 11px;
}
input.segmentsList-searchInput {
    height: 36px !important;
    padding-left: 35px !important;
    border: 1px solid #D8D8D8;
    border-radius: none;
    border-radius: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .08);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .08);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
input.segmentsList-searchInput:focus {
    border-color: #c7c7c7;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 6px 0 rgba(0,0,0, 0.06) !important;
    -moz-box-shadow: inset 0 3px 6px 0 rgba(0,0,0, 0.06) !important;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0, 0.06) !important;
}
input.segmentsList-searchInput[readonly="readonly"],
input.segmentsList-searchInput[disabled="disabled"],
input.segmentsList-searchInput[readonly="readonly"]:focus,
input.segmentsList-searchInput[disabled="disabled"]:focus {
    background-color: #F0F1F6;
    border-color: #F0F1F6;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.segmentsList-search .segments-helpText {
    position: absolute;
    top: 7px;
    left: 104%;
    width: 96%;
    text-align: left;
}*/

.segmentsList-container {
    display: block;
    margin: 0 -5px;
}

.segmentsList-container:after {
    clear: both;
    content: "";
    display: block;
}

.segmentsList .ListRecords > span {
    display: flex;
    float: left;
    position: relative;
    width: 50%;
}

@media (max-width: 1280px) {
    .segmentsList .ListRecords > span {
        width: 100%;
    }
}

.segmentsList .phone .ListRecords > span,
.segmentsList .tablet.portrait .ListRecords > span {
    width: 100%;
}

.segmentsList-mobileHeader {
    color: #6a6a6a;
    display: block;
    font-family: Avenir;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 15px;
}

.segmentsList-mobileHeader-text {
    display: inline-block;
    padding: 6px 0;
}

.segments-doneButton {
    float: right;
    width: initial !important;
}

.segmentCard {
    background-color: #f6f5f9;
    display: block;
    height: 120px;
    margin: 10px;
    padding: 20px;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 100%;
    /* box-shadow: 0 1px 1px 0 #D8D5D5; */
    z-index: 2;
}

.phone .segmentCard,
.tablet.portrait .segmentCard {
    height: 100px;
    margin: 5px;
    padding: 10px;
}

/*
.segmentCard:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 3px 1px 1px #D8D5D5;
    opacity: 0;
    transition: opacity .2s linear;
    z-index: -1;
}*/

.segmentCard .segments-title,
.segments-rulesSummary,
.segmentCard-tapText {
    display: block;
    overflow: hidden;
    position: absolute;
    right: 140px;
    white-space: nowrap;
    width: auto;
}

.segmentCard-tapText {
    text-overflow: ellipsis;
}

.segmentCard .segments-title {
    color: #4a4a4a;
    font-size: 20px;
    font-weight: 600;
    height: 24px;
    left: 46px;
    line-height: 24px;
    text-overflow: ellipsis;
    top: 18px;
}

.phone .segments-title,
.tablet.portrait .segments-title {
    font-size: 14px;
    left: 34px;
    line-height: 20px;
    right: 50px;
    top: 8px;
}

.segments-starred {
    height: 22px;
    left: 28px;
    position: absolute;
    top: 28px;
    width: 22px;
    z-index: 3;
}

.phone .ListRecords .segments-starred,
.tablet.portrait .ListRecords .segments-starred {
    left: 12px;
    top: 12px;
}

.segments-starred .icon {
    color: #5d3e92;
    font-size: 22px;
    opacity: 0.3;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

.segments-starred .icon use > svg {
    color: #5d3e92;
}

.segments-starred:hover .icon {
    opacity: 0.5;
}

.segments-starred.active .icon {
    opacity: 1;
}

.segments-nrPeople {
    position: absolute;
    right: 20px;
    top: 21px;
}

.phone .segments-nrPeople,
.tablet.portrait .segments-nrPeople {
    right: 10px;
    top: 10px;
}

.segments-nrPeople-label {
    color: #9b9b9b;
    font-size: 11px;
    line-height: 20px;
    padding: 0 0;
}

.segments-nrPeople-nr {
    background-color: #5d3e92;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0 5px;
    min-width: 20px;
    padding: 0 10px;
    text-align: center;
}

.phone .segments-nrPeople-label,
.tablet.portrait .segments-nrPeople-label,
.segmentCard-tapText {
    display: none;
    font-size: 20px;
}

.phone .segments-nrPeople-nr,
.tablet.portrait .segments-nrPeople-nr {
    margin: 0;
}

.segments-description {
    margin: 26px 120px 0 26px;
    max-height: 32px;
    overflow: hidden;
}

.segments-description,
.segments-rulesSummary,
.phone .segmentCard-tapText,
.tablet.portrait .segmentCard-tapText {
    color: #6a6a6a;
    display: block;
    font-size: 12px;
    line-height: 16px;
}

.phone .segments-description,
.tablet.portrait .segments-description {
    margin: 22px 50px 0 24px;
}

.segments-islocked {
    bottom: 8px;
    left: 17px;
    position: absolute;
}

.phone .segments-islocked,
.tablet.portrait .segments-islocked {
    bottom: 4px;
    left: 7px;
    position: absolute;
}

.segments-islocked .icon {
    font-size: 26px;
}

.segments-rulesSummary,
.segmentCard-tapText {
    bottom: 17px;
    height: 16px;
    left: 46px;
}

.phone .segments-rulesSummary,
.tablet.portrait .segments-rulesSummary,
.segmentCard-tapText {
    bottom: 10px;
    left: 34px;
    right: 10px;
}

.segments-rulesSummary .ruleEntry {
    display: inline;
}

.segments-rulesSummary-label,
.segments-rulesSummary-value,
.segments-rulesSummary-pipe {
    padding: 0 0 0 3px;
}

.segments-rulesSummary > span:first-child {
    padding: 0 0;
}

.segments-rulesSummary-value {
    color: #5d3e92;
}

.segments-rulesSummary .counter {
    margin-left: 4px;
}

.segmentCard .Button {
    bottom: 15px;
    position: absolute;
    right: 20px;
}

.segmentCard .Button.Is_Default {
    border: none;
}

.segmentCard .segments-btnView,
.segmentCard .segments-btnView {
    opacity: 0;
    transition: opacity 0.2s linear;
}

.phone .segmentCard .Button,
.tablet.portrait .segmentCard .Button {
    display: none;
}

.segmentCard:hover {
    -webkit-box-shadow: 0 8px 26px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 8px 26px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 26px 0 rgba(0, 0, 0, 0.1);
}

.segmentCard:hover:after,
.desktop .segmentCard:hover .segments-btnView,
.tablet.landscape .segmentCard:hover .segments-btnView {
    opacity: 1;
}

a.segmentCard:hover {
    text-decoration: none;
}

/*.segmentCard:hover .Button {
     -webkit-box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
}*/

/* Segments - Detail */

.segmentDetail .FiltersArea {
    margin: 8px 0 0 11px;
    position: relative;
}

.segmentDetail .phone .FiltersArea .ActionsContainer,
.segmentDetail .tablet.portrait .FiltersArea .ActionsContainer {
    height: 0;
    margin: 0;
    padding: 0;
}

.segmentDetail .phone .MainContent > div,
.segmentDetail .tablet.portrait .MainContent > div {
    padding-bottom: 0;
}

.segmentDetail .segments-title {
    color: #4a4a4a;
    display: inline-block;
    font-size: 28px;
    line-height: 32px;
}

.segmentRules .segments-title {
    margin-bottom: 10px;
}

.segmentDetail .phone .segments-title,
.segmentDetail .tablet.portrait .segments-title {
    color: #4a4a4a;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0 80px 0 0;
}

.segmentDetail .phone .segments-nrPeople,
.segmentDetail .tablet.portrait .segments-nrPeople {
    margin-top: 0 !important;
    top: 3px;
}

.segmentDetail .segments-nrPeople {
    right: 5px;
    top: 0;
}

.segmentDetail .segments-nrPeople-label {
    color: #9b9b9b;
    font-size: 28px;
    line-height: 32px;
}

.segmentDetail .segments-nrPeople-nr {
    border-radius: 16px;
    font-size: 28px;
    line-height: 32px;
    margin: 0 8px;
    min-width: 32px;
}

.segmentDetail .phone .segments-nrPeople-nr,
.segmentDetail .tablet.portrait .segments-nrPeople-nr {
    border-radius: 12px;
    font-size: 20px;
    line-height: 24px;
    margin: -3px 10px 0;
    min-width: 24px;
}

body.segmentDetail .phone .Content.ThemeGrid_Wrapper,
body.segmentDetail .tablet.portrait .Content.ThemeGrid_Wrapper {
    margin-top: -10px;
    padding-top: 55px;
}

.segmentDetail .HideOnDesktop.HideOnTabletLandscape.segments-backButton {
    position: absolute;
    right: -15px;
    top: -75px;
}

.segmentDetail .layoutListTabs .Tabs_TabBody {
    border: none;
    padding: 30px 0px 10px 0px;
}

.segmentDetail .phone .layoutListTabs .Tabs-Header,
.segmentDetail .tablet.portrait .layoutListTabs .Tabs-Header {
    width: 100%;
}

.segmentDetail .layoutListTabs span.Tabs_TabDisabled {
    padding: 10px;
}

/* Segments - Detail Settings */

.segmentDetail-settings {
    margin: 15px 5px;
    position: relative;
}

.segmentDetail-settings .segments-starred {
    left: 0;
    top: 10px;
}

.segmentDetail-settings .ThemeGrid_MarginGutter {
    margin-left: 32px;
}

.phone .segmentDetail-settings .ThemeGrid_MarginGutter,
.tablet.portrait .segmentDetail-settings .ThemeGrid_MarginGutter {
    margin-left: 0px;
    width: 100%;
}

.phone .segmentDetail-settings .ThemeGrid_MarginGutter.ThemeGrid_Width4,
.tablet.portrait .segmentDetail-settings .ThemeGrid_MarginGutter.ThemeGrid_Width4 {
    padding-left: 32px;
}

.segmentDetail-settings .UnderlineInput input[type="text"] {
    color: #4a4a4a;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
}

.segmentDetail-settings .InputLabel label {
    color: #9b9b9b;
    font-size: 12px;
}

.phone .segmentDetail-settings .UnderlineInputPlaceholder,
.tablet.portrait .segmentDetail-settings .UnderlineInputPlaceholder {
    height: auto;
}

.segmentDetail .phone .ThemeGrid_Width7 .UnderlineInput .InputLabel,
.segmentDetail .tablet.portrait .ThemeGrid_Width7 .UnderlineInput .InputLabel {
    margin-top: 0 !important;
}

.segmentDetail-settings textarea.Notepad {
    margin: 0px 0 10px 0;
}

.phone .segmentDetail-settings textarea.Notepad,
.tablet.portrait .segmentDetail-settings textarea.Notepad {
    margin: 30px 0 10px 0;
    width: 100%;
}

.segmentDetail-updateSettings {
    color: #5d3e92;
    font-size: 14px;
    font-style: italic;
    line-height: 34px;
    margin: 40px 0 10px 0;
}

.phone .segmentDetail-updateSettings,
.tablet.portrait .segmentDetail-updateSettings {
    line-height: 20px;
    margin: 40px 0 10px 0;
}

.segmentDetail-updateSettings .ButtonGroup {
    margin: 0 12px 0 0;
    width: auto;
}

.phone .segmentDetail-updateSettings .ButtonGroup,
.tablet.portrait .segmentDetail-updateSettings .ButtonGroup {
    margin: 0 0 10px 0;
    width: 100%;
}

.segmentDetail .phone .ButtonGroup_button.Button,
.segmentDetail .tablet.portrait .ButtonGroup_button.Button {
    border-bottom-width: 1px;
    border-right-width: 0;
    width: auto;
}

.segmentDetail .phone .ButtonGroup_button.Button:last-child,
.segmentDetail .tablet.portrait .ButtonGroup_button.Button:last-child {
    border-right-width: 1px;
}

.segmentDetail-settings .segments-deleteButton {
    bottom: 0;
    position: absolute;
    right: 0;
}

.phone .segmentDetail-settings .segments-deleteButton,
.tablet .segmentDetail-settings .segments-deleteButton,
.descktop.small .segmentDetail-settings .segments-deleteButton {
    bottom: initial;
    margin: 20px 0 0 0;
    position: relative;
    right: initial;
    width: auto !important;
}

/* Segments - Detail Rules */

.segmentRules {
    position: relative;
}

.segmentRules:after {
    background: none;
    border-right: 1px solid #d8d4d5;
    bottom: -35px;
    content: "";
    left: 285px;
    position: absolute;
    top: 0;
    width: 1px;
}

.desktop.small .segmentRules:after {
    left: 240px;
}

.phone .segmentRules:after,
.tablet.portrait .segmentRules:after {
    display: none;
}

/* Segments - Detail Rules Categories/Menu */

.segmentRules-categories {
    float: left;
    font-size: 16px;
    height: 100%;
    line-height: 24px;
    margin: 0 0 0 6px;
    position: relative;
    width: 284px;
}

.phone .segmentRules-categories,
.tablet .segmentRules-categories {
    border-right: 0;
}

.desktop.small .segmentRules-categories {
    width: 240px;
}

.phone .segmentRules-categories,
.tablet.portrait .segmentRules-categories,
.phone .segmentRules-categories-rule,
.tablet.portrait .segmentRules-categories-rule {
    margin: 0 0 30px;
    width: 100%;
}

.segmentRules-categories-rule {
    display: block;
    margin: 0 0 0 338px;
    padding: 0 0;
}

.desktop.small .segmentRules-categories-rule {
    margin: 0px 0 0 280px;
}

.segmentRules-categories:after,
.segmentRules-categories-rule:after,
.segmentsRule-options:after {
    clear: both;
    content: "";
    display: block;
}

.segmentDetail-menu-title-disable,
.segmentRules-accordion {
    padding: 5px 0;
}

.segmentRules-menuItem,
.segmentRules-menuItem--disabled,
a.segmentRule-Submenu-title {
    color: #4a4a4a;
    font-weight: 600;
    line-height: 34px;
    text-decoration: none;
}

a.segmentRule-Submenu-title[disabled="disabled"],
.segmentRules-menuItem--disabled {
    color: #d8d5d5;
}

a.segmentDetail-menu-title-active,
.segmentRules-menuItem--active {
    color: #5d3e92;
}

.segmentRules-menu {
    display: block;
    height: auto;
    margin: 0 auto;
}

.segmentRules-menuItem {
    cursor: pointer;
    display: block;
    position: relative;
}

.segmentRules-menuItem .icon {
    font-size: 24px;
    position: absolute;
    right: 16px;
    top: 6px;
    transform: rotate(-180deg);
    transition: all 0.2s;
}

.segmentRules-menuItem .icon,
.segmentRules-menuItem .icon use > svg {
    color: #4a4a4a;
}

.segmentRules-menuItem--expanded .icon {
    transform: rotate(0deg);
}

.segmentRules-menuItem--disabled .icon {
    display: none;
}

.segmentRules-menuContent {
    display: none;
    height: auto;
}

.segmentRules-menuContent ul {
    list-style-type: none;
    padding-left: 0;
}

.segmentRules-menuContent div {
    margin: 30px;
}

a.segmentRule-Submenu-title {
    font-weight: 400;
    margin-left: 20px;
}

a.segmentRule-Submenu-title:hover {
    color: #5d3e92;
}

a.segmentRule-Submenu-title[disabled="disabled"],
a.segmentRule-Submenu-title[disabled="disabled"]:hover {
    color: #d8d5d5;
    cursor: default;
}

/* Segments - Detail Rules List */

.segmentRules-rulesList {
    display: block;
    float: left;
    margin: 0 0 20px 0;
    width: 100%;
}

.segmentRules-rulesList-rule-box {
    box-shadow: 0 1px 3px 0 #d8d5d5;
    display: flex;
    float: left;
    margin: 0 12px 12px 0;
    max-width: 100%;
    padding: 10px 18px;
}

.segmentRules-rulesList-rule-box > * {
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin: 0 5px 0 0;
    white-space: nowrap;
}

.segmentRules-rulesList-rule-box > *:last-child {
    margin: 1px -5px 0 5px;
}

.segmentRules-rulesList-rule-label {
    color: #9b9b9b;
    font-style: italic;
}

.segmentRules-rulesList-rule-typeValue {
    color: #4a4a4a;
}

.segmentRules-rulesList-rule-value {
    color: #5d3e92;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.segmentRules-rulesList-rule-editButton {
    background: none;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-right: -3px;
    position: relative;
    z-index: 3;
}

a.segmentRules-rulesList-rule-editButton {
    font-size: 12px;
    margin-top: 1px;
}

/* Segments - Detail Rules Template */

.segmentsRule {
}

.segmentsRule .Heading1 {
    padding: 0 0 10px 0;
    /* color: #5d3e92; */
}

.segmentsRule-addButton.Button {
    margin: 0 0 0 8px;
}

/* Segments - Detail Rules Settings */

.segmentsRule-settings {
    padding: 22px 0 24px 0;
}

.segmentsRule-row {
    align-items: center;
    display: flex;
    padding: 10px 0;
}

.phone .segmentsRule-row {
    display: block;
}

.segmentsRule-row--near {
    padding: 2px 0;
}

.segmentsRule-row--nearBottom {
    padding: 10px 0 2px 0;
}

.segmentsRule-row--nearTop {
    padding: 2px 0 10px 0;
}

.segmentsRule-row .segmentsRule-options,
.segmentsRule-row .segmentsRule-text,
.segmentsRule-row .segmentsRule-select,
.segmentsRule-row .termsEditor-container,
.segmentsRule-row .UnderlineInput {
    display: inline-block;
    margin: 0 8px 0 0;
    position: relative;
}

.segmentsRule-row > *:last-child {
    margin-right: 0;
}

.segmentsRule-options,
.segmentsRule-text,
.segmentsRule-select,
.segmentsRule-row > *:not(.segmentsRule-options),
.segmentsRule-row .UnderlineInput input,
.segmentsRule-select .selectize-input *,
.segmentsRule-select .selectize-dropdown * {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 20px;
}

.segmentsRule-row .UnderlineInput input {
    min-width: 34px;
    padding: 0 0;
    text-align: center;
}

.segmentsRule-options {
    font-size: 14px;
}

.segmentsRule-optionsItem {
    align-items: center;
    display: flex;
    padding: 6px;
}

.segmentsRule-optionsItem input {
    margin: 0 12px 0 6px;
}

.segmentsRule-optionsItem label {
    cursor: pointer;
    padding: 6px 0;
}

.segmentsRule-text {
    padding: 5px 0 9px 0;
}

.segmentsRule-select {
    margin-top: -2px;
    min-width: 84px;
    width: auto;
}

.segmentsRule-select .selectize-input {
    height: 34px;
    padding: 6px 22px 8px 9px;
}

.segmentsRule-row .UnderlineInput input.segmentsRule-dateInput {
    width: 120px;
}

.segmentsRule-row--peopleFinder .segmentsRule-select {
    min-width: 100px;
}

.segmentsRule-row--peopleFinder .peopleFinder-parentContainer {
    max-width: 300px;
    min-width: 200px;
    width: 100%;
}

/* Segments - Detail People */

/*.segmentPeople-excluded,
.segmentPeople-includedHeader,
.segmentPeople-included,
.segmentPeople-includedList {
    margin: 0 6px;
}*/

.segmentPeople-excluded .segmentPeople-headerNote {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 22px;
    margin: 5px 0 15px 0;
    margin-bottom: 30px;
}

.segmentPeople-headerNote-red {
    color: #ec5a48 !important;
}

.segmentPeople .segments-title {
    display: block;
    font-size: 32px;
    line-height: 36px;
    margin: 30px 0 15px 0;
}

.segmentPeople .Heading1,
.segmentPeople .Heading2,
.segmentPeople .Heading3 {
    margin-bottom: 10px;
}

.segmentPeople-excluded .segments-title {
    color: #e63b26;
}

.segmentPeople-includedHeader .segments-title {
    color: #5d3e92;
    margin: 30px 0 2px 0;
}

.segmentPeople-includedHeader .segmentPeople-headerNote {
    color: #9b9b9b;
    display: block;
    font-size: 14px;
    line-height: 19px;
    margin: 0 0 20px 0;
}

.SegmentDetail-peopleList-rotateIcon {
    filter: FlipH;
    -ms-filter: "FlipH";
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    vertical-align: initial !important;
}

/* END: Segments */

/*------------------------------------*\
        Input Suggestion Widget
\*-------------------------------------*/

.inputSuggestion {
    display: inline-block;
    position: relative;
}

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

.inputSuggestion div {
    color: #ccc;
}

.phone.portrait .inputSuggestion {
    width: 100%;
}

.phone.landscape .inputSuggestion {
    width: 80%;
}

.phone.landscape .inputSuggestion input {
    width: 100%;
}

/* END: Input Suggestion Widget */

/*------------------------------------*\
        Terms Editor Widget
\*-------------------------------------*/

.termsEditor {
    cursor: text;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0 5px 0 0;
}

.termsEditor * {
    font-size: 14px;
    line-height: 20px;
}

.termsEditor li {
    box-sizing: border-box;
    display: block;
    float: left;
    height: 32px;
    margin: 4px 2px;
    max-width: 98%;
    overflow: hidden;
    padding: 4px 5px 6px 8px;
    position: relative;
    width: auto;
}

.termsEditor li:not(.termsEditor-separationText) {
    border: 1px solid #eee;
}

.termsEditor span {
    float: left;
    padding: 0 4px;
}

.termsEditor .termsEditor-separationText {
    font-size: 16px;
    margin: 4px 0;
    overflow: hidden;
    padding: 6px 5px 5px 5px;
}

.termsEditor .termsEditor-separationText:first-child {
    display: none;
}

.termsEditor input {
    background: none;
    border: 0;
    box-shadow: none;
    cursor: text;
    height: 20px !important;
    line-height: 20px;
    margin: 0;
    min-width: 90px;
    outline: none;
    padding: 0;
    vertical-align: top;
    width: 90px;
}

.termsEditor input:focus {
    border: 0;
    box-shadow: none !important;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
}

/* hide original input field or textarea and the optional textarea change notifier button */

.termsEditor-container > textarea,
.termsEditor-container > input,
.termsEditor-notifyButtonContainer {
    left: -99999px;
    position: absolute !important;
}

/* hide IE10 "clear field" X */

.termsEditor ::-ms-clear {
    display: none;
}

/* term style */

.termsEditor .termsEditor-term {
    background: none;
    color: #4a4a4a;
    overflow: hidden;
    padding: 0 34px 0 0;
    position: relative;
    white-space: nowrap;
    z-index: 3;
}

.termsEditor .edit .termsEditor-term {
    padding: 0 0 0 0;
}

.termsEditor-term:after,
.termsEditor .termsEditor-add,
.termsEditor .termsEditor-delete {
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 3;
}

.termsEditor-term:after {
    color: #623b90;
    content: "EDIT";
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 4px;
    width: 25px;
}

.termsEditor .edit .termsEditor-term:after {
    display: none;
}

.termsEditor .termsEditor-delete {
    margin: 1px -2px 0 0;
    padding: 0 0 0 1px;
}

.termsEditor .termsEditor-add {
    color: #d8d5d5;
    display: none;
    font-size: 12px;
    line-height: 14px;
    padding: 4px;
    text-transform: uppercase;
}

.termsEditor .active .termsEditor-add {
    color: #623b90;
}

.termsEditor .termsEditor-suggestion {
    color: #9b9b9b;
    display: block;
    height: 20px;
    left: 8px;
    overflow: hidden;
    padding: 0 0;
    position: absolute;
    right: 30px;
    top: 4px;
    z-index: 1;
}

.termsEditor .edit .termsEditor-edit,
.termsEditor .edit .termsEditor-delete {
    display: none;
}

.termsEditor .edit .termsEditor-add {
    display: block;
}

/* END: Terms Editor Widget */

/*------------------------------------*\
    People Contacts Recipient Widget
\*-------------------------------------*/

.peopleContactsRecipient {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0 5px 0 0;
}

.phone .peopleContactsRecipient {
    padding-right: 0;
}

.peopleContactsRecipient * {
    font-size: 14px;
    line-height: 18px;
}

.peopleContactsRecipient li {
    border: 1px solid #eee;
    box-sizing: border-box;
    display: block;
    float: left;
    /*    max-width: 98%;*/
    height: 32px;
    margin: 4px 2px;
    overflow: hidden;
    padding: 5px 5px 5px 8px;
    position: relative;
    width: auto;
}

.phone .peopleContactsRecipient li {
    margin: 4px 0;
    width: 100%;
}

.peopleContactsRecipient li:first-of-type {
    margin-left: 0;
}

.peopleContactsRecipient span {
    float: left;
    padding: 0 4px;
}

/* hide original input field or textarea and the optional textarea change notifier button */

.peopleContactsRecipient-container > textarea,
.peopleContactsRecipient-container > input,
.peopleContactsRecipient-notifyButtonContainer {
    left: -99999px;
    position: absolute !important;
}

/* hide IE10 "clear field" X */

.peopleContactsRecipient ::-ms-clear {
    display: none;
}

/* contact style */

.peopleContactsRecipient .peopleContactsRecipient-contact {
    background: none;
    color: #4a4a4a;
    overflow: hidden;
    padding-left: 25px;
    position: relative;
    white-space: nowrap;
    z-index: 3;
}

.peopleContactsRecipient .peopleContactsRecipient-contact .icon {
    color: #717171;
    display: block;
    font-size: 16px;
    left: 0;
    position: absolute;
    top: 1px;
}

.peopleContactsRecipient .peopleContactsRecipient-contact .icon.icon-email {
    top: 2px;
}

.peopleContactsRecipient .xf-delete {
    display: block;
    margin: 0 -2px 0 0;
    padding: 0 0 0 2px;
    position: relative;
    z-index: 3;
}

.phone .peopleContactsRecipient-delete {
    position: absolute;
    right: 8px;
}

/* END: People Contacts Recipient Widget */

/*------------------------------------*\
        People Finder Widget
\*-------------------------------------*/

.peopleFinder-container {
    background: none;
    display: inline-block;
    max-width: 360px;
    min-width: 160px;
    position: relative;
    text-align: left;
    width: 100%;
}

input.peopleFinder-input,
input.peopleFinder-input:focus,
input.peopleFinder-input:hover {
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #ededed;
    box-shadow: none;
    color: #4a4a4a;
    height: 32px !important;
    overflow: hidden;
    padding: 0 25px 0 10px;
    white-space: nowrap;
    width: 100%;
    z-index: 3;
}

.peopleFinder-inputContainer .icon {
    color: rgba(113, 113, 113, 0.8);
    display: block;
    font-size: 16px;
    position: absolute;
    right: 6px;
    top: 8px;
    z-index: 4;
}

.peopleFinder-resultsContainer {
    background-color: #fff;
    border: 1px solid #ededed;
    border-top: none;
    box-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.11);
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

.peopleFinder-resultsContainer.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s;
}

.peopleFinder-results {
    list-style-type: none;
    margin: 0 0;
    padding: 0 0;
}

.peopleFinder-item {
    background-color: #fff;
    box-sizing: border-box;
    cursor: pointer;
    height: 50px;
    padding: 0 0;
    padding: 5px 40px 5px 10px;
    position: relative;
    width: 100%;
}

.peopleFinder-itemInvalid {
    cursor: default;
}

.peopleFinder-item.active:not(.peopleFinder-itemInvalid),
.peopleFinder-item:not(.peopleFinder-itemInvalid):hover {
    background-color: #e5e2ed;
}

.peopleFinder-avatar {
    float: left;
    margin: 4px 10px 0 0;
}

.peopleFinder-avatar .icon {
    font-size: 32px;
}

.peopleFinder-avatarPerson {
    border-radius: 19px;
    display: block;
    height: 38px;
    margin: 1px 10px 0 0;
    overflow: hidden;
    width: 38px;
}

.peopleFinder-avatarPerson img {
    height: 100%;
    width: 100%;
}

.peopleFinder-name,
.peopleFinder-contact,
.peopleFinder-label,
.peopleFinder-term {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

.peopleFinder-name {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 16px;
}

.peopleFinder-name,
.peopleFinder-label {
    padding: 4px 0 0 0;
}

.peopleFinder-contact,
.peopleFinder-label {
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 14px;
}

.peopleFinder-term {
    color: rgba(0, 0, 0, 0.8);
}

.peopleFinder-name strong,
.peopleFinder-contact strong {
    color: #623b90;
    font-weight: 400;
    text-decoration: underline;
}

.peopleFinder-item:not(.peopleFinder-itemInvalid):after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);
    background-color: #fff;
    bottom: 0;
    color: #623b90;
    content: "ADD";
    font-size: 12px;
    line-height: 14px;
    padding: 17px 5px 17px 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    width: 56px;
}

.peopleFinder-item.active:after,
.peopleFinder-item:hover:after {
    background: linear-gradient(to right, rgba(229, 226, 237, 0) 0%, rgba(229, 226, 237, 1) 30%, rgba(229, 226, 237, 1) 100%);
    background-color: #e5e2ed;
}

/* END: People Finder Widget */

/*------------------------------------*\
    Stripe Configurations
\*-------------------------------------*/

.stripeConfiguration-exampleTransactions {
    font-family: "Courier New", Georgia, "Times New Roman";
}

.stripeConfiguration-highlightedTransaction {
    background-color: #fff7b2;
}

/* Provider Remove Modal
 *************************************************************/

.providerRemoveModal .ModalContent {
    color: #717171;
    text-align: center;
}

.providerRemoveModal .iconContainer {
    height: 80px;
    margin: 0 auto 15px auto;
    width: 80px;
}

.providerRemoveModal .iconContainer svg {
    height: 80px;
    width: 80px;
}

.providerRemoveModal .mainMessageContainer {
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 15px;
}

.phone .providerRemoveModal .mainMessageContainer {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 15px;
}

.providerRemoveModal .warningMessage {
    font-size: 16px;
}

.phone .providerRemoveModal .warningMessage {
    font-size: 14px;
}

.providerRemoveModal .sendEmailsOption {
    height: 28px;
    margin: 25px 0;
    text-align: center;
    width: 100%;
}

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

.providerRemoveModal .downloadContainer {
    font-size: 14px;
    margin: 40px auto 15px auto;
    max-width: 530px;
}

.providerRemoveModal .downloadContainer a {
    background-position: 9px center;
    background-repeat: no-repeat;
    border: 1px solid #717171;
    border-radius: 3px;
    color: #717171;
    display: block;
    font-weight: 700;
    margin-top: 5px;
    padding: 5px 20px;
    position: relative;
    text-align: center;
}

.providerRemoveModal .downloadContainer a svg {
    height: 24px;
    left: 5px;
    position: absolute;
    top: 3px;
    width: 32px;
}

.phone .providerRemoveModal .downloadContainer a {
    font-size: 10px;
}

/* Containers -> inputLine
 * Container used to style a line of inputs and labels centered vertically with those
 *******************************************************************************************/

.inputLine {
    display: table;
}

.inputLine-container {
    display: table-cell;
    vertical-align: middle;
}

.inputLine-container--first {
    margin-right: 10px;
}

.inputLine-container--last {
    margin-left: 10px;
}

/* CKE */

/*.MainContent .cke {
    border: 0;
    box-shadow: none;
}
.MainContent .cke_top {
    border: 0;
    background: #f6f5f9;
    box-shadow: none;
}
.MainContent .cke_bottom {
    border: none;
    border-top: 1px solid #ececec;
    line-height: 20px;
    background: transparent;
}*/

/* END: CKE */

/*------------------------------------*\
            Conversations
\*-------------------------------------*/

.conversations-header,
.conversationsList-topMenu,
.conversationsChooseSender {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 0 0;
}

.conversations-header .Heading1,
.conversations-header .Search_wrapper {
    width: 50%;
}

.phone .conversations-header .Heading1 {
    width: 100%;
}

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

.phone .conversations-header .conversations-mobileActions {
    display: flex;
    flex-wrap: wrap-reverse;
    margin: 10px auto;
    min-width: 260px;
    width: 80%;
}

.phone .conversations-header .conversations-mobileActions .Button {
    margin-top: 20px;
}

.phone .conversations-header .conversations-chooseRecipients {
    margin-top: 40px;
}

.conversationsList-list .TableRecords {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.conversationsList-list .TableRecords .card {
    cursor: pointer;
    height: 60px;
}

.conversationsList-list .TableRecords .card td {
    font-size: 13px;
    padding: 0 10px;
    vertical-align: middle;
}

.conversationsList-list .TableRecords .card td:first-child {
    padding: 0 10px 0 20px;
}

.conversationsList-list .TableRecords .card td:first-child:before {
    display: none;
}

.conversationsList-list .TableRecords_Header:last-child {
    text-align: center;
}

.conversationsList-list .TableRecords .card td:last-child {
    padding: 0 20px 0 10px;
    text-align: center;
}

.conversationsList-subject {
    font-weight: 600;
}

.conversationsList-unread span,
.conversationsDetail-unread span {
    background-color: #5d3e92;
    border-radius: 15px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    height: 30px;
    line-height: 20px;
    min-width: 30px;
    padding: 5px;
    text-align: center !important;
}

.conversationsList-unread--nr span,
.conversationsDetail-unread--nr span {
    background-color: rgba(0, 0, 0, 0.3);
}

.conversationsList-unread--blank span,
.conversationsDetail-unread--blank span {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Conversations Choose Sender */

.conversations-sendAs,
.conversationsDetail-headerInfo {
    margin: 30px 0 0 0;
}

.conversationsSenderCard {
    align-items: center;
    display: flex;
    height: 100%;
    min-height: 84px;
    width: 100%;
}

.conversationsChooseSender .card--noShadow {
    height: auto;
    min-height: 96px;
    width: 32%;
    /*min-width: 220px;*/
}

.tablet.portrait .conversationsChooseSender .conversationsSenderCard {
    display: block;
    padding: 10px;
}

.tablet.portrait .conversationsChooseSender .conversationsSenderCard-avatar img {
    min-height: 56px;
}

.conversationsSenderCard-avatar {
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: 0 5% 0 7%;
}

.phone .conversationsChooseSender .conversationsSenderCard-avatar {
    margin: 0 5% 0 0;
}

.conversationsSenderCard-avatar .PosRelative {
    border-radius: 28px;
    height: 56px;
    min-width: 56px;
    overflow: hidden;
    width: 56px;
}

.conversationsSenderCard-avatar img {
    width: 56px;
}

.conversationsSenderCard-info {
    padding: 0 5% 0 0;
    text-align: left;
}

.phone .conversationsSenderCard-info {
    padding: 0;
}

.conversationsSenderCard-name {
    display: block;
    font-size: 20px;
    line-height: 22px;
}

.conversationsSenderCard-description {
    color: rgba(0, 0, 0, 0.5);
    display: block;
    font-size: 13px;
    line-height: 14px;
    padding-top: 4px;
}

.conversationsChooseSender .card--noShadow.active .conversationsSenderCard-description,
.conversationsChooseSender .card--noShadow:hover .conversationsSenderCard-description {
    color: rgba(255, 255, 255, 0.8);
}

/* Mobile Conversations Chose Sender */

.phone .conversationsChooseSender {
    margin: 20px -15px 0 -15px;
}

.conversationsSender-carousel.Mobile {
    width: 100%;
}

.conversationsSender-carousel.Mobile .card--noShadow:not(.slick-current) {
    transform: scale(0.95);
}

.conversationsSender-carousel.Mobile .card--noShadow {
    display: flex;
    max-width: 100%;
    padding: 5px 10px;
    width: 260px;
}

.conversationsSender-carousel.Mobile .card--noShadow.slick-current {
    background-color: #5d3e92;
    border-color: #5d3e92;
    color: #ffffff;
}

.conversationsSender-carousel.Mobile .conversationsSenderCard-description {
    color: #ffffff;
}

/* END Mobile Conversations Chose Sender */

/* Conversations Choose Recipients */

.conversations-chooseRecipients {
    display: block;
    margin: 20px 0 0 0;
}

.phone .conversations-chooseRecipients {
    margin-top: 40px;
}

.phone .conversations-chooseRecipients .js_open.Balloon {
    left: 10px !important;
    right: 10px;
}

.phone .conversations-chooseRecipients .Search_wrapper {
    display: flex;
}

.conversations-chooseRecipients .Heading3,
.conversations-chooseRecipients .Text_gray,
.conversations-addAttachments .Heading3,
.conversations-emailScheduled .Heading3 {
    display: block;
    padding-bottom: 8px;
}

.conversations-choosePeople,
.conversations-recipientsNote {
    /*float: left;*/
    clear: both;
    margin: 20px 0 0 0;
}

.conversations-choosePeople .peopleContactsRecipient-container,
.conversations-test--preview .Button {
    display: inline-block;
    float: left;
    vertical-align: top;
}

.phone .peopleContactsRecipient-container {
    width: 100%;
}

.conversations-choosePeople .peopleFinder-parentContainer,
.conversations-choosePeople .peopleFinder-container {
    /* float: left; */
    display: inline-block;
    width: 240px;
}

.phone .conversations-choosePeople .peopleFinder-parentContainer,
.phone .conversations-choosePeople .peopleFinder-container {
    max-width: 100%;
    width: 100%;
}

.conversations-choosePeople .peopleFinder-container {
    margin: 4px 0;
}

.conversations-test--preview .Text_gray {
    display: block;
    padding-bottom: 8px;
}

.conversations-test--preview .Text_gray strong {
    color: #4a4a48;
}

.conversations-test--preview .conversations-choosePeople .peopleFinder-parentContainer {
    margin-right: 10px;
}

.conversations-test--preview .conversations-choosePeople .Button,
.conversations-addAttachments .Button {
    margin-left: 0;
}

.conversations-recipientsNote .Text_gray {
    margin-left: 6px;
    padding-bottom: 0;
}

/* Conversations Add Subject */

.conversations-addSubject,
.conversations-addSubject--preview,
.conversationsDetail-subject {
    background: #f6f5f9;
    border-top: 1px solid #d8d5d5;
    margin: 80px 0 0 0;
    padding: 0 24px;
}

.phone .conversations-addSubject {
    margin: 40px -15px 0 -15px;
}

.conversations-addSubject input[type="text"],
.conversations-addSubject--preview,
.conversationsDetail-subject {
    border: none;
    border-bottom: 1px solid #d8d5d5;
    color: rgba(0, 0, 0, 0.8);
    font-size: 28px;
    font-weight: 300;
    line-height: 42px;
    padding: 20px 0;
    text-align: center;
}

.conversations-addSubject--preview,
.conversations-email--preview {
    padding: 20px 24px;
}

.conversations-email--preview {
    border-bottom: 1px solid #d8d5d5;
}

.conversations-addSubject input[type="text"] {
    background: transparent;
    height: 88px;
    line-height: 88px;
}

.conversations-addSubject input[type="text"]:hover,
.conversations-addSubject input[type="text"]:focus {
    box-shadow: none;
    transition: initial;
}

/* Conversations Email Header Notes */

.conversations-emailHeaderNotes {
    background: #f6f5f9;
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    line-height: 16px;
    padding: 20px 24px 34px 24px;
    position: relative;
    text-align: center;
    z-index: 3;
}

.phone .conversations-emailHeaderNotes,
.phone .conversations-emailEditor {
    margin: 0 -15px;
}

.conversations-emailHeaderNotes:before,
.conversationsDetail-headerInfo:after,
.conversationsDetail-messageSent:before,
.conversationsDetail-conversations .SectionExpandable_content:before {
    border-left: 1px solid #d8d5d5;
    bottom: 20px;
    content: " ";
    left: 50%;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 1;
}

.conversationsDetail-conversations .SectionExpandable_content:before {
    bottom: 124px;
}

.conversationsDetail-messageSent:before {
    bottom: initial;
    height: 96px;
    max-height: 100%;
}

.conversations-emailHeaderNotes:after {
    border: 1px solid #d8d5d5;
    border-radius: 50%;
    bottom: 11px;
    content: " ";
    height: 7px;
    left: 50%;
    margin-left: -4px;
    position: absolute;
    width: 7px;
    z-index: 1;
}

.phone .conversationsDetail-headerInfo:after {
    border: 0;
}

.conversations-emailHeaderNotes > * {
    background-color: #f6f5f9;
    display: block;
    position: relative;
    z-index: 3;
}

.conversationsFollowers-note {
    display: block;
}

/* Conversations Email Scheduled */

.conversations-emailScheduled {
    background-color: #f6f5f9;
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 24px 20px 24px;
    position: relative;
    z-index: 3;
}

.phone .conversations-emailScheduled {
    margin: 0 -15px;
}

.conversations-emailScheduledDescription > span {
    margin-right: 4px;
}

.phone .conversations-emailScheduledDescription {
    display: block;
    margin-bottom: 10px;
}

.phone .conversations-emailScheduledDescription > span {
    display: inline-block;
    white-space: nowrap;
}

.conversations-emailScheduledDescription > span:first-of-type {
    height: 18px;
    margin-right: 0;
}

.conversations-emailScheduledDescription .icon,
.conversations-emailScheduledDescription .icon use > svg {
    color: rgba(0, 0, 0, 0.8);
    font-size: 18px;
}

a.conversations-emailReschedule {
    color: #c7331f;
    margin-left: 2px;
}

.conversations-emailScheduled .Button {
    float: right;
}

/* Conversations Followers Picker */

a.conversationsFollowers-edit {
    margin-left: 4px;
    text-transform: uppercase;
}

.conversations-emailHeaderNotes .Balloon {
    width: 240px;
}

.conversations-followersPicker {
    padding: 4px 0;
}

.conversations-followersPickerTitle {
    color: #4a4a48;
    display: block;
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 8px;
}

.conversations-followersPicker .peopleFinder-resultsContainer {
    display: block;
    position: relative;
}

/* Conversations Email Editor */

.conversations-emailEditor {
    background: #f6f5f9;
    margin-top: -1px;
    position: relative;
    z-index: 1;
}

.conversations-emailEditor .cke_inner,
.conversations-emailEditor .cke_wysiwyg_frame,
.conversations-emailEditor .cke_wysiwyg_div,
.conversationsDetail-conversations,
.conversationsDetail-messageSent {
    background: #f6f5f9;
}

.conversations-emailEditor .cke_chrome {
    border: none;
    box-shadow: initial;
}

.conversations-emailEditor .cke_top,
.conversations-emailEditor .cke_bottom {
    background: #f6f5f9;
    border-color: #d8d5d5;
}

.conversations-emailEditor .cke_top {
    border-bottom: none;
    box-shadow: none;
}

.conversations-emailEditor .cke_contents {
    border-top: 1px solid #d8d5d5;
}

.phone .conversations-emailEditor .cke_contents {
    box-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.11);
    margin: 0 15px;
}

.phone .conversations-emailEditor .cke_top {
    border: 0;
}

.phone .conversations-emailEditor .cke_bottom {
    display: none;
}

.conversations-emailEditor .cke_resizer {
    border-color: transparent rgba(113, 113, 113, 0.8) transparent transparent;
}

.conversations-emailEditor .cke_inner:before,
.conversations-emailEditor .cke_inner:after {
    bottom: 5px;
    color: rgba(113, 113, 113, 0.8);
    content: "";
    font-size: 12px;
    line-height: 16px;
    opacity: 0;
    position: absolute;
    right: 22px;
    transition: opacity 0.2s;
    z-index: 3;
}

.conversations-emailEditor--saving .cke_inner:before {
    content: "Saving...";
    opacity: 1;
}

.conversations-emailEditor--saved .cke_inner:after {
    content: "Saved";
    opacity: 1;
}

/* Conversations Email Signature */

.conversations-emailSignature {
    border-bottom: 1px solid #d8d5d5;
    border-top: 1px solid #d8d5d5;
    display: block;
    min-height: 110px;
    padding: 24px 146px 24px 20px;
    position: relative;
}

.phone .conversations-emailSignature {
    background: #fff;
    border-bottom: 0;
    border-top: 2px dashed #d8d5d5;
    box-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.11);
    padding: 24px 20px 34px 20px;
    z-index: 9;
}

.conversations-emailSignature > span {
    display: block;
}

.conversations-removeSignature {
    background: #f6f5f9;
    height: 24px;
    position: absolute;
    right: 0;
    top: 24px;
    width: 24px;
}

.phone .conversations-removeSignature {
    right: 15px;
}

.conversations-removeSignature.button-delete--animated .icon {
    font-size: 24px;
    line-height: 24px;
}

.conversations-editSignature,
.conversations-addSignature {
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
}

.conversations-editSignature {
    bottom: 24px;
    position: absolute;
    right: 0;
}

.phone .conversations-editSignature {
    margin-bottom: -10px;
    right: 15px;
}

/* Conversations Email Attachments */

.conversations-addAttachments,
.conversations-scheduleEmail,
.conversations-test--preview {
    display: block;
    margin: 30px 0 0 0;
}

.conversations-addAttachments .TableRecords {
    margin: 6px 0 12px 0;
}

/* Conversations Schedule Email */

.conversations-scheduleInputs,
.conversations-scheduleActionButtons {
    margin: 12px 0 24px 0;
}

.conversations-scheduleEmailTime {
    margin-left: 24px;
}

.conversations-createActionButtons {
    display: block;
    margin: 20px 0;
}

.conversations-createActionButtons .Button,
.conversations-scheduleActionButtons .Button {
    float: right;
}

.phone .conversations-createActionButtons .Button {
    margin-bottom: 20px;
}

.conversations-chooseSegments {
    margin-top: 20px;
}

.phone .conversations-chooseSegments .Balloon .Search_wrapper input[type="text"],
.phone .conversations-chooseSegments .Balloon .Search_wrapper input[type="search"] {
    width: auto !important;
}

.conversations-chooseSegments .Balloon:after,
.conversations-chooseSegments .Balloon:before {
    left: 20%;
}

/* Conversations Search Segment */

.segments-searchResults .segmentCard {
    height: auto;
    margin: 10px 0;
    padding: 10px 10px 10px 40px;
}

.segments-searchResults .segmentCard:last-child {
    margin-bottom: 0px;
}

.segments-searchResults .segmentCard * {
    pointer-events: none;
}

.segments-searchResults .segmentCard .segments-starred {
    left: 12px;
    position: absolute;
    top: -3px;
}

/* Conversations Detail */

.conversationsDetail-headerInfo {
    position: relative;
}

.conversationsDetail-headerInfo .Columns2 > .ColFirst {
    padding: 0 2% 0 0;
}

.conversationsDetail-headerInfo .Columns2 > .ColLast {
    padding: 0 2% 0 5%;
}

.conversationsDetail-headerInfo .Columns2 .ColFirst .Heading3 {
    padding-left: 7%;
}

.phone .conversationsDetail-headerInfo .Columns2 .ColFirst .Heading3 {
    padding-left: 0;
}

.conversationsDetail-headerInfo .EditInline_Wrapper {
    border: none;
    padding: 0 0;
}

.conversationsDetail-headerInfo .conversationsSenderCard {
    margin: 20px 0;
}

.conversationsDetail-headerRecipients ul,
.conversationsDetail-conversations ul {
    list-style: none;
    padding: 0 0;
}

.conversationsDetail-headerRecipients ul {
    margin-bottom: 6px;
}

.conversationsDetail-headerRecipients li {
    display: inline-block;
    float: left;
}

.conversationsDetail-subject {
    border-bottom: none;
    border-top: 1px solid #d8d5d5;
    padding: 28px 24px;
}

.phone .conversationsDetail-subject {
    margin: 0 -15px;
}

.conversationsDetail-messageSent:before,
.conversationsDetail-conversations .SectionExpandable:before {
    bottom: 10px;
}

.conversationsDetail-messageSent,
.conversationsDetail-conversations .SectionExpandable {
    border-top: 1px solid #d8d5d5;
    box-shadow: none;
    padding: 0 24px;
    position: relative;
    transition: all 0.2s;
}

.phone .conversationsDetail-conversations .SectionExpandable {
    background: #f6f5f9;
    padding: 0 15px;
}

.conversationsDetail-conversations .SectionExpandable.expanded {
    box-shadow: inset 0px 10px 20px -7px rgba(0, 0, 0, 0.12);
}

.conversationsDetail-conversations .SectionExpandable.expanded:after {
    bottom: 0;
    box-shadow: inset 0px -10px 20px -7px rgba(0, 0, 0, 0.12);
    content: " ";
    height: 24px;
    left: 0;
    position: absolute;
    right: 0;
}

.conversationsDetail-conversations .SectionExpandable_header {
    border-bottom: none;
    padding: 16px 0;
}

.conversationsDetail-conversations .SectionExpandable__title {
    color: #4a4a48;
    font-size: 20px;
    font-weight: 400;
}

.conversationsDetail-conversations .SectionExpandable__title .Bold {
    margin-left: 8px;
}

.conversationsDetail-conversations .conversationsDetail-unread {
    float: right;
    margin: 0 12px 0 0;
}

.conversationsDetail-conversations .SectionExpandable__icon {
    line-height: 20px;
    padding-top: 4px;
}

.conversationsDetail-conversations .SectionExpandable.expanded .SectionExpandable__icon {
    padding-top: 0;
}

.conversationsDetail-conversations .SectionExpandable_content {
    border-top: 1px solid #d8d5d5;
    margin: 0 -10px;
    padding: 0;
    position: relative;
}

.conversationsDetail-conversations .SectionExpandable.expanded .SectionExpandable_content {
    padding-bottom: 42px;
}

.conversationsDetail-conversations .SectionExpandable.OverflowVisible .SectionExpandable_content {
    overflow: visible !important;
}

.conversationsDetail-conversations .SectionExpandable.OverflowVisible .conversations-emailHeaderNotes {
    z-index: 5;
}

.conversationsDetail-unreadNotifyClick {
    left: -99999px;
    position: absolute !important;
}

.conversationsTimeline-message {
    padding-top: 34px;
    position: relative;
    width: 50%;
}

.conversationsTimeline-message--left {
    clear: both;
    float: left;
}

.conversationsTimeline-message--right {
    clear: right;
    float: right;
    padding-top: 50px;
}

.conversationsTimeline-message--left + .conversationsTimeline-message--right {
    padding-top: 134px;
}

.conversationsTimeline-message--note {
    clear: both;
    margin: 0 auto;
    padding-top: 42px;
    z-index: 2;
}

.phone .conversationsTimeline-message,
.phone .conversationsTimeline-message--right,
.phone .conversationsTimeline-message--left + .conversationsTimeline-message--right {
    float: none;
    margin: 10px 0 0 0;
    padding-top: 16px;
    width: 100%;
}

.phone .conversationsTimeline-message--unread,
.phone .conversationsTimeline-message--left + .conversationsTimeline-message--unread {
    padding-top: 36px;
}

.conversationsTimeline-unread {
    display: none;
    height: 15px;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 26px;
}

.conversationsTimeline-message--unread .conversationsTimeline-unread {
    display: block;
}

.conversationsTimeline-message--left + .conversationsTimeline-message--unread .conversationsTimeline-unread {
    top: 110px;
}

.phone .conversationsTimeline-message--unread .conversationsTimeline-unread,
.phone .conversationsTimeline-message--left + .conversationsTimeline-message--unread .conversationsTimeline-unread {
    top: 22px;
}

.conversationsTimeline-unread:after {
    border-top: 1px solid #5d3e92;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 7px;
    width: auto;
    z-index: 1;
}

.conversationsTimeline-unread > span {
    background: #f6f5f9;
    border: 1px solid #5d3e92;
    color: #5d3e92;
    display: block;
    font-size: 10px;
    line-height: 13px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 90px;
    z-index: 2;
}

.conversationsTimeline-messageDate {
    color: rgba(0, 0, 0, 0.5);
    display: block;
    font-size: 13px;
    margin: 8px 26px;
}

.conversationsTimeline-message--left .conversationsTimeline-messageDate {
    text-align: right;
}

.conversationsTimeline-message--note .conversationsTimeline-messageDate {
    background: #f6f5f9;
    margin: 0 26px;
    padding: 21px 0 14px 0;
    text-align: center;
}

.phone .conversationsTimeline-messageDate {
    background: #f6f5f9;
    margin: 0 26px;
    padding: 8px 0;
    position: relative;
    text-align: center;
    z-index: 1;
}

.conversationsTimeline-messageDetail {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 10px;
    padding: 4px 16px 20px 16px;
    position: relative;
}

.phone .conversationsTimeline-messageDetail {
    z-index: 1;
}

.conversationsTimeline-messageDetail--note {
    border: none;
    padding: 0 0;
}

.conversationsTimeline-message:before {
    background-color: #f6f5f9;
    border: 1px solid #d8d5d5;
    border-radius: 50%;
    content: " ";
    height: 7px;
    left: 100%;
    margin: 0 0 0 -4px;
    position: absolute;
    top: 94px;
    width: 7px;
    z-index: 1;
}

.conversationsTimeline-message--note:before {
    left: 50%;
    top: 42px;
}

.conversationsTimeline-message.conversationsTimeline-message--right:before {
    left: auto;
    /* IE11 */
    left: initial;
    margin: 0 -5px 0 0;
    right: 100%;
    top: 110px;
}

.conversationsTimeline-message--left + .conversationsTimeline-message.conversationsTimeline-message--right:before {
    top: 195px;
}

.phone .conversationsTimeline-message:before,
.phone .conversationsTimeline-message.conversationsTimeline-message--right:before,
.phone .conversationsTimeline-message--left + .conversationsTimeline-message.conversationsTimeline-message--right:before {
    left: 50%;
    margin: 0 0 0 -4px;
    right: 50%;
    top: 7px;
}

.conversationsTimeline-messageDetail:after,
.conversationsTimeline-messageDetail:before,
.conversations-emailEditor--note:before {
    border: solid transparent;
    content: " ";
    height: 0;
    left: 100%;
    pointer-events: none;
    position: absolute;
    top: 31px;
    width: 0;
    z-index: 1;
}

.conversationsTimeline-messageDetail:before,
.conversations-emailEditor--note:before {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0.1);
    border-width: 6px;
    margin-top: -6px;
}

.conversationsTimeline-messageDetail:after {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}

.conversationsTimeline-message--right .conversationsTimeline-messageDetail:after,
.conversationsTimeline-message--right .conversationsTimeline-messageDetail:before {
    left: auto;
    /* IE11 */
    left: initial;
    right: 100%;
}

.conversationsTimeline-message--right .conversationsTimeline-messageDetail:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: rgba(0, 0, 0, 0.1);
}

.conversationsTimeline-message--right .conversationsTimeline-messageDetail:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #fff;
}

.phone .conversationsTimeline-messageDetail:not(.conversationsTimeline-messageDetail--note):before {
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0);
    left: 50%;
    margin: -12px 0 0 -6px;
    top: 0;
}

.phone .conversationsTimeline-messageDetail:after,
.phone .conversationsTimeline-messageDetail:not(.conversationsTimeline-messageDetail--note):before {
    display: none;
}

.conversationsTimeline-messageDetail--note:before,
.conversations-emailEditor--note:before {
    background: #f6f5f9;
    border-color: #f6f5f9 #f6f5f9 #623b90 #623b90;
    border-style: solid;
    border-width: 0 22px 28px 0;
    display: block;
    left: auto;
    /* IE11 */
    left: initial;
    right: -1px;
    top: 5px;
}

.conversationsTimeline-messageDetail--note:before {
    right: 0;
    top: 6px;
}

.phone .conversations-emailEditor--note:before {
    display: none;
}

.conversationsTimeline-messageDetail--note:after {
    display: none;
}

.conversationsTimeline-messageDetail--note .conversationsTimeline-messageHeaderContainer {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    color: #141414;
    padding: 12px 16px 14px 16px;
    position: relative;
}

.conversationsTimeline-messageDetail--note .conversationsTimeline-messageHeaderContainer:after {
    border-bottom: 1px solid #d8d5d5;
    bottom: 0;
    content: "";
    left: 16px;
    position: absolute;
    right: 16px;
}

.conversationsTimeline-messageHeader {
    padding: 10px 78px 0 0;
    position: relative;
    word-break: break-all;
}

.conversationsTimeline-messageAvatar {
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: 0 2% 0 0;
}

.conversationsTimeline-messageAvatar .PosRelative {
    border-radius: 16px;
    height: 32px;
    overflow: hidden;
    width: 32px;
}

.conversationsTimeline-messageAvatar img {
    width: 32px;
}

.conversationsTimeline-messageSenderInfo {
    padding: 0;
    text-align: left;
}

.conversationsTimeline-noteNotified {
    padding: 4px 0 0 0;
}

.conversationsTimeline-noteNotified-label {
    text-transform: uppercase;
}

.conversationsTimeline-noteNotified-recipients {
    padding: 0 0 0 4px;
}

.conversationsTimeline-messageName {
    display: block;
    font-size: 20px;
    line-height: 24px;
}

.conversationsTimeline-messageDirection {
    color: #5d3e92;
    position: absolute;
    right: 16px;
    top: 22px;
}

.conversationsTimeline-messageDetail--note .conversationsTimeline-messageDirection {
    color: #5d3e92;
    top: 30px;
}

.conversationsTimeline-messageBody {
    border-top: 1px solid #d8d5d5;
    color: rgba(0, 0, 0, 0.8);
    display: block;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    margin-top: 16px;
    padding: 20px 0;
    word-wrap: break-word;
}

.conversationsTimeline-messageDetail--note .conversationsTimeline-messageBody {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    margin-top: 0;
    padding: 20px 16px 40px 16px;
}

.conversationsTimeline-messageBody img {
    height: auto !important;
    max-width: 100%;
}

.conversationsDetail-conversationsTimeline {
    padding-bottom: 50px;
    position: relative;
}

.conversationsDetail-reply {
    background-color: #f6f5f9;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 2;
}

a.conversationsDetail-replyLink {
    display: inline-block;
    margin: 20px auto;
    max-width: 320px;
    min-width: 140px;
    position: relative;
    transition: color 0.2s;
    vertical-align: top;
    width: 16%;
}

a.conversationsDetail-replyLink:before {
    border-left: 1px solid #d8d5d5;
    content: "";
    height: 25px;
    left: 0;
    margin: 30px 0;
    position: absolute;
}

a.conversationsDetail-replyLink:first-child:before {
    border-left: 0;
}

.phone a.conversationsDetail-replyLink {
    display: block;
}

.phone a.conversationsDetail-replyLink:before {
    border-left: 0;
}

a.conversationsDetail-replyLink:hover {
    text-decoration: none;
}

a.conversationsDetail-replyLink:hover * {
    color: #5d3e92;
}

.conversationsDetail-reply .conversationsSenderCard-avatar .PosRelative {
    border-radius: 16px;
    height: 32px;
    width: 32px;
}

.conversationsDetail-reply .conversationsSenderCard-avatar img {
    width: 32px;
}

.conversationsDetail-reply .conversationsSenderCard-name {
    color: #4a4a48;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.conversationsDetail-reply .conversationsSenderCard-description {
    font-size: 11px;
    line-height: 14px;
    padding-top: 1px;
}

.conversations-emailEditor--note {
    border: 1px solid #d8d5d5;
    margin: 0 auto;
    min-width: 500px;
    padding: 20px;
    width: 60%;
}

.phone .conversations-emailEditor--note {
    border: none;
    margin: 0 -15px;
    min-width: 0px;
    padding: 20px;
    width: auto;
}

.conversationsDetail-notifyNote {
    border-bottom: 1px solid #d8d5d5;
    margin-bottom: 10px;
    padding: 10px 0 20px 0;
}

.conversations-emailEditor--note .conversationsDetail-notifyNoteHeader {
    padding-bottom: 14px;
}

.conversations-emailEditor--note .peopleContactsRecipient li {
    background-color: #fff;
}

.conversations-emailEditor--note .conversationsDetail-notifyButton .Button {
    margin-top: 33px !important;
}

.phone .conversations-emailEditor--note .conversationsDetail-notifyButton .Button {
    margin-bottom: 10px !important;
}

.conversations-emailEditorNote {
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 0 0 12px 0;
}

/* Mobile Conversations List Page */

.tablet .conversations-newButton {
    text-align: right;
}

.phone .conversations-newButton .newButton {
    margin: 30px 15% 20px 15%;
    width: 70%;
}

.tablet.portrait .conversationsList-topMenu > span,
.phone .conversationsList-topMenu > span {
    margin-bottom: 20px;
}

.phone .conversationsList-list {
    margin-top: 20px;
}

.phone .conversationsList-list .TableRecords_Wrapper {
    overflow: visible;
}

.phone .conversationsList-list .TableRecords .card {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    height: auto;
    margin-bottom: 15px;
    padding: 10px 10px;
    position: relative;
    width: 100%;
}

.phone .conversationsList-list .TableRecords .card .TableRecords_Label {
    display: none;
}

.phone .conversationsList-list .TableRecords .card .conversationsList-unread {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
}

.phone .conversationsList-list .TableRecords .card .conversationsList-status {
    bottom: 5px;
    position: absolute;
    right: 10px;
    text-align: right;
}

.phone .conversationsList-list .TableRecords .card td {
    padding: 5px 0;
    width: 100%;
}

/* END Mobile Conversations List Page */

/* END: Conversations */

/* Time Picker */

.table-condensed thead tr:first-child,
.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active.disabled:hover,
.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td.active,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td.active:hover {
    background-color: #5d3e93 !important;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: rgba(98, 59, 144, 0.2) !important;
    color: #623b90 !important;
    font-weight: 700;
}

.ui-timepicker-list {
    text-align: left;
}

/* Appointment Time Picker */

.appointmentTimePicker .time {
    background: none;
    border: none;
    border-bottom: 2px solid #ccc;
    font-weight: 300;
    height: 24px;
    width: 78px;
}

.appointmentTimePicker .time:focus {
    border: none;
    border-bottom: 2px solid #ccc;
}

.appointmentTimePicker .time:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.appointmentTimePicker .labelContainer {
    font-size: 14px;
    margin: 0px 5px;
    width: 20px;
}

.ui-timepicker-wrapper {
    background: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    height: 150px;
    margin: 0;
    outline: none;
    overflow-y: auto;
    width: 6.5em;
    z-index: 10001;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration {
    width: 13em;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
    width: 11em;
}

.ui-timepicker-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-duration {
    color: #888;
    margin-left: 5px;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
    color: #888;
}

.ui-timepicker-list li {
    color: #000;
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 3px 0 3px 5px;
    white-space: nowrap;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: #fff;
    color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: #1980ec;
    color: #fff;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
    color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: #888;
    cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    background: #f2f2f2;
}

/* Calendar Time Picker */

.calendarDatepicker {
    background: rgb(245, 243, 248);
    border-radius: 3px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
    padding-bottom: 15px;
    position: relative;
    text-align: center;
    width: 256px;
}

.calendarDatepicker:after {
    border-color: transparent transparent rgba(87, 61, 139, 0.05) transparent;
    border-style: solid;
    border-width: 0 12.5px 20px 12.5px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: -20px;
    transform: translateX(-50%);
    width: 0;
}

.calendarDatepicker .calendarPattern .button,
.calendarDatepicker .calendarPattern tr.daynames,
.calendarDatepicker .calendarPattern table,
.calendarDatepicker .calendarPattern tbody,
.calendarDatepicker .calendarPattern .title {
    background: none;
    background-color: none;
    border: none;
    border-top: none;
}

.calendarDatepicker .calendarPattern .title {
    padding: 10px 0;
}

.calendarDatepicker .TitleMonth {
    font-size: 20px;
}

.calendarDatepicker .calendarPattern tr.daynames {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.calendarDatepicker .calendarPattern .daysrow .day {
    color: #999999;
    padding: 10px;
}

.calendarDatepicker .calendarPattern .daysrow .day.today {
    background: #623b90;
    color: #ffffff;
}

.calendarDatepicker .calendarDatepicker-today {
    display: block;
    float: inherit;
    margin: 15px auto 0 auto;
    position: relative;
    width: 90%;
}

/* Date Range */

.dateRangeSelector {
    color: #623b90;
    float: left;
    min-width: 220px;
    position: relative;
    z-index: 9;
}

.phone .dateRangeSelector {
    float: inherit;
}

.dateRangeSelector .dateRange {
    border-bottom: 2px solid #623b90;
    display: block;
    float: left;
    font-size: 24px;
    line-height: 40px;
    text-align: left;
    width: 100%;
}

.dateRangeSelector .dateRange sup {
    font-size: 11px;
    line-height: 16px;
}

.dateRangeSelector .calendarTrigger {
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.dateRangeSelector .calendarTrigger span {
    position: absolute;
    right: 0;
    top: 15px;
}

.dateRangeSelector .calendarTrigger svg {
    color: #623b90;
}

.dateRangeSelector .datePickerContainer {
    position: absolute;
    right: -122px;
    top: 57px;
}

.dateRangeSelector .datePickerContainer.hide {
    display: none;
}

/*------------------------------------*\
        Global Search Widget
\*-------------------------------------*/

body.globalSearch-on {
    overflow: hidden;
}

.globalSearch-buttonContainer {
    position: relative;
}

.globalSearch-closeButton,
.globalSearch-startButton {
    cursor: pointer;
    display: block;
    height: 36px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: fixed;
    right: 20px;
    top: 0;
    transition: opacity 0.2s;
    width: 156px;
    z-index: 1;
}

.globalSearch-closeButton.visible,
.globalSearch-startButton.visible {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.6s;
    z-index: 2;
}

.globalSearch-closeButton > span,
.globalSearch-startButton > span {
    float: right;
    height: 36px;
    position: relative;
    transition: all 0.2s;
    width: 110px;
}

.globalSearch-buttonContainer .icon {
    left: 14px;
    opacity: 0.5;
    position: absolute;
    top: 7px;
}

.globalSearch-buttonContainer .icon,
.globalSearch-buttonContainer .icon use > svg {
    color: #623b90;
    font-size: 21px;
}

.globalSearch-closeButtonLabel,
.globalSearch-startButtonLabel,
.globalSearch-startButtonLabel--hover {
    color: #623b90;
    font-size: 13px;
    line-height: 16px;
    opacity: 0.5;
    padding: 10px 16px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.globalSearch-startButtonLabel--hover {
    opacity: 0;
}

.globalSearch-startButton.visible:hover > span {
    background-color: #dcd3e6;
    width: 156px;
}

.globalSearch-startButton.visible:hover .icon {
    opacity: 1;
}

.globalSearch-startButton.visible:hover .globalSearch-startButtonLabel {
    opacity: 0;
}

.globalSearch-startButton.visible:hover .globalSearch-startButtonLabel--hover {
    opacity: 1;
    transition-delay: 0.1s;
}

.globalSearch-startButton.visible:hover > span {
    background-color: #dcd3e6;
    width: 156px;
}

.globalSearch-closeButton.visible {
    opacity: 0.5;
    transition-delay: 0s;
    z-index: 901;
}

.globalSearch-closeButton > span {
    width: 79px;
}

.globalSearch-closeButton .icon {
    left: 11px;
    top: 4px;
}

.globalSearch-closeButton .icon,
.globalSearch-closeButton .icon use > svg {
    font-size: 27px;
}

.globalSearch-closeButtonLabel {
    opacity: 1;
}

.globalSearch-closeButton.visible:hover,
.globalSearch-closeButton.visible:hover .icon {
    opacity: 1;
}

.globalSearch-closeButton.visible:hover > span {
    background-color: #dcd3e6;
}

.globalSearch-layer {
    background-color: rgba(255, 255, 255, 0.9);
    height: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 0;
    z-index: 900;
}

.globalSearch-layer.visible {
    bottom: 0;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    right: 0;
    transition: opacity 0.2s;
    width: auto;
}

.globalSearch-layerBox {
    background: #f5f4f8;
    box-sizing: border-box;
    left: 50%;
    margin-left: -412px;
    max-height: 70%;
    min-height: 90px;
    padding: 24px 24px 0 24px;
    position: absolute;
    top: 16%;
    width: 825px;
}

.globalSearch-inputContainer {
    background: #fff;
    position: relative;
}

.globalSearch-inputContainer .icon {
    display: block;
    font-size: 30px;
    left: 4px;
    position: absolute;
    top: 5px;
    z-index: 4;
}

.globalSearch-inputContainer .icon,
.globalSearch-inputContainer .icon use > svg {
    color: rgba(98, 59, 144, 0.8);
}

input.globalSearch-input,
input.globalSearch-input:focus,
input.globalSearch-input:hover {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #ededed;
    box-shadow: none;
    color: #4a4a4a;
    font-size: 16px;
    height: 42px !important;
    line-height: 42px;
    overflow: hidden;
    padding: 0 10px 0 44px;
    position: relative;
    white-space: nowrap;
    width: 100%;
    z-index: 3;
}

.globalSearch-inputSuggestion {
    -webkit-appearance: none;
    color: #999;
    display: block;
    font-size: 16px;
    height: 42px;
    left: 1px;
    line-height: 42px;
    overflow: hidden;
    padding: 0 10px 0 44px;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    z-index: 1;
}

/* Global Search Results */

.globalSearch-resultsContainer,
.globalSearch-detailsContainer {
    box-sizing: content-box;
    display: none;
    float: left;
    margin: 24px -24px 4px -24px;
    max-height: 50vh;
    opacity: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 24px 32px 24px;
    transition: opacity 0.2s;
    width: 240px;
}

.globalSearch-resultsContainer.visible,
.globalSearch-detailsContainer.visible {
    display: block;
    opacity: 1;
}

.globalSearch-results {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.globalSearch-item.card--listItem {
    animation: fadeIn 0.2s;
    box-sizing: border-box;
    height: 70px;
    padding: 16px 8px 16px 16px;
    width: 100%;
}

.globalSearch-avatar {
    border-radius: 19px;
    display: block;
    float: left;
    height: 38px;
    margin: 0 14px 0 0;
    overflow: hidden;
    width: 38px;
}

.globalSearch-avatar img {
    height: 100%;
    width: 100%;
}

.globalSearch-title,
.globalSearch-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.globalSearch-title {
    color: #4a4a4a;
    font-size: 17px;
    line-height: 20px;
}

.globalSearch-subtitle {
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    line-height: 16px;
    padding: 4px 0 0 0;
}

.globalSearch-title strong,
.globalSearch-subtitle strong {
    color: #623b90;
    font-weight: 400;
    text-decoration: underline;
}

/* Global Search Details */

.globalSearch-detailsContainer {
    float: right;
    width: 513px;
}

.globalSearch-detailsBasic {
    animation: fadeIn 0.2s;
    background: #623b90;
    box-sizing: border-box;
    cursor: pointer;
    height: 116px;
    padding: 16px;
    position: relative;
    transition: all 0.2s;
    width: 100%;
}

.globalSearch-detailsBasic.active,
.globalSearch-detailsBasic:hover {
    box-shadow: 0 7px 32px 0 rgba(0, 0, 0, 0.18);
}

.globalSearch-detailsBasicId {
    height: 60px;
    padding: 0;
    width: 100%;
}

.globalSearch-detailsBasicId .globalSearch-avatar {
    border-radius: 30px;
    height: 60px;
    margin: 0 17px 0 0;
    width: 60px;
}

.globalSearch-detailsBasicId .globalSearch-title {
    color: #fff;
    padding: 3px 0 5px 0;
}

.globalSearch-detailsMemberInfo {
    color: rgba(255, 255, 255, 0.5);
    display: block;
    font-size: 11px;
    font-weight: 300;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.globalSearch-detailsMemberInfo strong {
    font-weight: 600;
}

.globalSearch-detailsPersonStatus {
    color: #fff;
    position: absolute;
    right: 14px;
    top: 21px;
}

.globalSearch-detailsPersonType,
.globalSearch-detailsPersonTag {
    background-color: #fff;
    box-sizing: border-box;
    color: #623b90;
    font-size: 10px;
    height: 16px;
    line-height: 16px;
    text-transform: uppercase;
}

.globalSearch-detailsPersonType {
    bottom: 16px;
    left: 18px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 56px;
}

.globalSearch-detailsPersonTagsList {
    bottom: 16px;
    height: 16px;
    left: 92px;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 14px;
    white-space: nowrap;
}

.globalSearch-detailsPersonTag {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 0 10px;
}

.globalSearch-detailsPersonTagsList .counter {
    color: #fff;
    display: inline-block;
    font-size: 10px;
    line-height: 16px;
    padding: 0 0 0 2px;
}

.globalSearch-detailsPersonTag:last-child {
    margin-right: 0;
}

.globalSearch-detailsActions {
    list-style: none;
    margin: 14px 0 0 0;
    padding: 0;
}

.globalSearch-detailsAction.card--listItem {
    align-items: center;
    animation: fadeIn 0.2s;
    box-sizing: border-box;
    display: flex;
    height: 60px;
    padding: 0;
    width: 100%;
}

.globalSearch-detailsAction.card--listItem.mobile {
    cursor: default;
}

.globalSearch-detailsAction > span {
    display: inline-block;
}

.globalSearch-detailsActionLabel {
    color: #8a8a8a;
    font-size: 12px;
    line-height: 16px;
    margin: 0 0 0 16px;
    text-transform: uppercase;
    width: 60px;
}

.globalSearch-detailsActionValue {
    color: #141414;
    cursor: text;
    font-size: 17px;
    line-height: 20px;
    margin: 0 0 0 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: all;
    /* Chrome all / Safari all */
    -moz-user-select: all;
    /* Firefox all */
    -ms-user-select: all;
    /* IE 10+ */
    user-select: all;
    white-space: nowrap;
    width: 300px;
}

.globalSearch-detailsAction.card--listItem.mobile .globalSearch-detailsActionValue {
    cursor: text;
}

.globalSearch-detailsActionNote {
    color: #623b90;
    font-size: 10px;
    line-height: 14px;
    margin-top: -7px;
    position: absolute;
    right: 108px;
    text-align: right;
    top: 50%;
}

.globalSearch-detailsActionButtonLabel {
    box-sizing: border-box;
    color: #623b90;
    font-size: 14px;
    height: 60px;
    line-height: 20px;
    margin-left: 46px;
    padding: 20px 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transition: color 0.2s;
    width: 69px;
}

.globalSearch-detailsActionButtonLabel:before {
    background-color: #fff;
    bottom: 0;
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.2s ease 0.1s;
    width: 0;
    z-index: -1;
}

.globalSearch-detailsAction.active:not(.mobile) .globalSearch-detailsActionButtonLabel,
.globalSearch-detailsAction:hover:not(.mobile) .globalSearch-detailsActionButtonLabel {
    color: #fff;
}

.globalSearch-detailsAction.active:not(.mobile) .globalSearch-detailsActionButtonLabel:before,
.globalSearch-detailsAction:hover:not(.mobile) .globalSearch-detailsActionButtonLabel:before {
    background-color: #623b90;
    width: 69px;
}

/* Global Search Mobile */

body.globalSearch-on--mob .ActionSheetButton,
body.globalSearch-on--mob .phone .Back,
body.globalSearch-on--mob .tablet .Back,
body.globalSearch-on--mob .phone .Header,
body.globalSearch-on--mob .tablet .Header {
    z-index: 1;
}

.wodify-nav .globalSearch-buttonContainer {
    position: initial;
}

.globalSearch-closeButton--mob,
.globalSearch-startButton--mob {
    cursor: pointer;
    display: block;
    height: 60px;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 76px;
    z-index: 1;
}

.globalSearch-startButton--mob {
    left: 0;
    right: initial;
    transition: initial;
}

.globalSearch--mob .globalSearch-layer.visible:before {
    box-shadow: 0 7px 24px 0 rgba(0, 0, 0, 0.08);
    content: " ";
    height: 60px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.globalSearch-layerBox--mob {
    height: 60px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
    width: 0;
}

.globalSearch-layer.visible .globalSearch-layerBox--mob {
    width: 100%;
}

.globalSearch-closeButton--mob.visible,
.globalSearch-startButton--mob.visible {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0;
    z-index: 2;
}

.globalSearch--mob .globalSearch-buttonContainer .icon {
    font-size: 24px;
    left: 40px;
    opacity: 1;
    top: 17px;
}

.globalSearch-closeButtonLabel--mob {
    color: #623b90;
    display: block;
    font-size: 14px;
    line-height: 16px;
    padding: 22px 18px 22px 14px;
    text-align: right;
    text-transform: uppercase;
}

.globalSearch-closeButton--mob.visible {
    transition-delay: initial;
    z-index: 901;
}

.globalSearch--mob .globalSearch-inputContainer {
    background-color: #fff;
    box-sizing: border-box;
    height: 60px;
    left: 0;
    padding: 9px 78px 9px 30px;
    position: absolute;
    top: 0;
    width: 100%;
}

.globalSearch--mob .globalSearch-inputContainer .icon {
    font-size: 24px;
    left: 40px;
    top: 17px;
}

.globalSearch--mob .globalSearch-inputContainer .icon-x {
    left: initial;
    opacity: 0.5;
    right: 83px;
    top: 19px;
}

.globalSearch--mob input.globalSearch-input {
    padding: 0 27px 0 44px;
    position: relative;
}

.globalSearch--mob .globalSearch-inputSuggestion {
    left: 31px;
    top: 9px;
}

.globalSearch--mob .globalSearch-resultsContainer {
    float: none;
    margin: 0;
    max-height: initial;
    min-width: 180px;
    overflow: initial;
    padding: 24px 15px 32px 15px;
    width: auto;
}

.globalSearch--mob .globalSearch-item.card--listItem {
    animation: fadeIn 0.2s;
    padding: 16px 26px 16px 16px;
}

.globalSearch--mob .globalSearch-item > .icon {
    font-size: 30px;
    margin-top: -15px;
    opacity: 0.8;
    position: absolute;
    right: 5px;
    top: 50%;
}

.globalSearch--mob .globalSearch-item:hover > .icon {
    opacity: 1;
}

.globalSearch--mob .globalSearch-layer {
    overflow-y: auto;
}

/* END: Global Search Widget */

/* WDFY-2645 */

.serviceCalendarList-sync-setup {
    display: inline-block;
    float: right;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
    width: auto;
}

.serviceCalendarList-sync-title {
    display: inline-block;
    text-align: left;
}

.serviceCalendarList-sync {
    padding-left: 40px;
}

/*------------------------------------*\
        Horizontal Navigation
\*-------------------------------------*/

.horizontalNav {
    display: inline-block;
    position: relative;
}

.top .horizontalNav {
    margin: 0 0 0 24px;
}

.horizontalNav-listContainer,
.desktop .Panel_header_contents.horizontalNav--withBalloon .Panel_header_links > div {
    display: block;
    overflow: hidden;
    width: 100%;
}

.horizontalNav-listContainer {
    height: 48px;
}

.desktop .Panel_header_contents.horizontalNav--withBalloon {
    position: relative;
}

.horizontalNav-list {
    display: block;
    width: 99999px;
}

.horizontalNav-list ul {
    display: block;
    list-style: none;
    overflow: hidden;
    padding: 0 0 0 6px;
}

.horizontalNav-list li,
.desktop .PanelNavigation .Panel_header_links a {
    display: inline-block;
    opacity: 1;
    transition: all 0.2s;
}

.horizontalNav-list li.horizontalNav-itemInBalloon,
.desktop .PanelNavigation .Panel_header_links a.horizontalNav-itemInBalloon {
    opacity: 0;
    pointer-events: none;
}

a.horizontalNav-action,
.horizontalNav-name {
    display: block;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.horizontalNav-name {
    color: rgba(0, 0, 0, 0.3);
    font-size: 12px;
    line-height: 16px;
    padding: 16px;
    text-transform: uppercase;
    transition: all 0.2s;
    z-index: 1;
}

a.horizontalNav-action.active {
    z-index: 3;
}

a.horizontalNav-action.active .horizontalNav-name {
    background-color: #eff0f4;
}

a.horizontalNav-action.active:before,
a.horizontalNav-action.active:after,
.horizontalNav-name:before,
.horizontalNav-triggerBalloonButton:before {
    content: "";
    position: absolute;
    z-index: -1;
}

a.horizontalNav-action.active:before,
a.horizontalNav-action.active:after,
.horizontalNav-triggerBalloonButton:before {
    height: 24px;
    top: 0;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    width: 12px;
}

a.horizontalNav-action.active:before,
.horizontalNav-triggerBalloonButton:before {
    -webkit-box-shadow: -10px 0 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
    left: 12px;
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
}

.desktop .Panel_header_contents.horizontalNav--withBalloon .horizontalNav-triggerBalloonButton:before {
    display: none;
}

a.horizontalNav-action.active:after {
    -webkit-box-shadow: 10px 0 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
    right: 12px;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
}

a.horizontalNav-action.active .horizontalNav-name:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+29,0+78,0+100 */
    background: -moz-linear-gradient(
        top,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.4) 29%,
        rgba(255, 255, 255, 0) 78%,
        rgba(255, 255, 255, 0) 100%
    );
    background: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.4) 29%,
        rgba(255, 255, 255, 0) 78%,
        rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.4) 29%,
        rgba(255, 255, 255, 0) 78%,
        rgba(255, 255, 255, 0) 100%
    );
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
}

a.horizontalNav-action:hover .horizontalNav-name,
a.horizontalNav-action.active .horizontalNav-name {
    color: rgba(0, 0, 0, 0.8);
}

/* Horizontal Navigation - Balloon */

.top .horizontalNav--withBalloon {
    min-width: 232px;
    padding: 0 44px 0 0;
}

.horizontalNav-triggerBalloonButton {
    cursor: pointer;
    height: 48px;
    opacity: 0;
    position: absolute;
    right: -44px;
    top: 0;
    transition: all 0.2s;
    width: 44px;
}

.desktop .Panel_header_contents .horizontalNav-triggerBalloonButton {
    color: #7c7c7c;
    padding: 16px 10px;
    top: -4px;
}

.horizontalNav-triggerBalloonButton > span {
    background-color: #eff0f4;
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.desktop .Panel_header_contents .horizontalNav-triggerBalloonButton > span {
    background-color: #fff;
}

.horizontalNav-triggerBalloonButton .icon {
    font-size: 24px;
    left: 12px;
    position: absolute;
    top: 12px;
    transform: rotate(-180deg);
    transition: all 0.2s;
}

.horizontalNav-triggerBalloonButton .icon,
.horizontalNav-triggerBalloonButton .icon use > svg {
    color: rgba(0, 0, 0, 0.3);
}

.horizontalNav-triggerBalloonButton.active .icon {
    transform: rotate(0deg);
}

.horizontalNav-triggerBalloonButton.active .icon,
.horizontalNav-triggerBalloonButton.active .icon use > svg,
.horizontalNav-triggerBalloonButton:hover .icon,
.horizontalNav-triggerBalloonButton:hover .icon use > svg {
    color: rgba(0, 0, 0, 0.8);
}

.horizontalNav--withBalloon .horizontalNav-triggerBalloonButton {
    /* NunoC, 2017-02-02: While we don't know how to stop the "display:none;" that is being added to the element by some unknown script */
    display: block !important;
    opacity: 1;
    right: 0;
    z-index: 5;
}

.horizontalNav--withBalloon .horizontalNav-triggerBalloonButton:before {
    opacity: 0.6;
    z-index: 1;
}

.horizontalNav-balloon .Balloon {
    background-color: #f6f4f8;
    border-radius: 4px;
}

.horizontalNav-balloon .Balloon:before {
    left: auto;
    right: 10px;
}

.horizontalNav-balloon .Balloon:after {
    border-bottom-color: #f6f4f8;
    left: auto;
    right: 11px;
}

.desktop .Panel_header_contents .Balloon {
    margin-top: -16px;
}

.desktop .Panel_header_contents .Balloon:before,
.desktop .Panel_header_contents .Balloon:after {
    left: auto;
    right: 10px;
}

.desktop .Panel_header_contents .Balloon:after {
    right: 11px;
}

.horizontalNav-balloon .Balloon_content {
    padding: 16px;
}

.horizontalNav-balloon ul {
    list-style: none;
}

.horizontalNav-balloon li {
    padding: 1px 0;
}

.desktop .Panel_header_contents .BalloonContent a.horizontalNav-itemInBalloon {
    display: block;
    font-size: 14px;
    line-height: 1;
    padding: 12px 20px;
    text-align: center;
    text-transform: uppercase;
}

.desktop .PanelNavigation.HasFourthLevelNav .Panel_header .BalloonContent a {
    margin: 0 0 1px 0;
}

.horizontalNav-balloon a.horizontalNav-action {
    align-items: center;
    background-color: #fff;
    box-shadow: none;
    display: flex;
    height: 60px;
    transition: all 0.2s;
    width: 220px;
    z-index: 1;
}

.horizontalNav-balloon a.horizontalNav-action .horizontalNav-name {
    color: rgba(0, 0, 0, 0.8);
    padding: 0 16px;
}

.horizontalNav-balloon a.horizontalNav-action:hover {
    box-shadow: 0 7px 32px 0 rgba(0, 0, 0, 0.18);
    opacity: 1;
    z-index: 3;
}

/* Horizontal Navigation - Mobile */

.horizontalNav--mob {
    background-color: #fff;
    padding: 15px;
    width: 100%;
}

.horizontalNav-activeContainer--mob,
.horizontalNav-list--mob a {
    background: #f2f2f2;
    cursor: pointer;
    display: block;
    padding: 14px 10px;
    position: relative;
    text-align: center;
    width: 100%;
}

.horizontalNav-activeTitle--mob,
.horizontalNav-active--mob,
.horizontalNav-list--mob a {
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
}

.horizontalNav-activeIcon--mob {
    font-size: 22px;
    position: absolute;
    right: 15px;
    top: 10px;
    transform: rotate(0deg);
    transition: all 0.2s;
}

.horizontalNav-activeIcon--mob.active {
    transform: rotate(-180deg);
}

.horizontalNav-list--mob {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s;
}

.horizontalNav-list--mob.visible {
    max-height: 2500px;
}

.horizontalNav-list--mob a {
    background: transparent;
    border-bottom: 1px solid #f2f2f2;
    color: rgba(0, 0, 0, 0.3);
}

.horizontalNav-list--mob a.active {
    display: none !important;
}

/* END: Horizontal Navigation */

/*------------------------------------*\
        Invoices List Screen
\*-------------------------------------*/

.invoicesTable .icon-chargeback {
    font-size: 24px;
}

/*------------------------------------*\
        Promo Codes
\*------------------------------------*/

.promoCodes-headerBadgeContainer {
    width: 190px;
}

.promoCodes-headerBadgeContainer .Label {
    position: relative;
    top: 9px;
}

.promoCodes-locationsHeaderSelectAll {
    margin-left: 22px;
    position: relative;
    top: -7px;
}

/*------------------------------------*\
        Password Reveal
\*------------------------------------*/

.passwordReveal {
    display: block;
    position: relative;
    white-space: nowrap;
}

.passwordReveal .inputPlaceholder {
    padding: 0px 4px 0px 0px;
    position: relative;
}

.passwordReveal .iconPlaceholder {
    color: #623b90;
    cursor: pointer;
    height: 32px;
    width: 15px;
}

.passwordReveal .iconPlaceholder .password-eye {
    position: relative;
    top: 10px;
}

.passwordReveal .iconPlaceholder .password-eye.eyecrossed:before {
    background: #623b90;
    content: "";
    height: 1px;
    position: absolute;
    top: 6px;
    transform: rotate(-34deg);
    width: 15px;
}

/* Heart Rate Monitor
 ****************************************************************************/

.heart-rate-monitor .EditInlineImage {
    max-width: 54px;
}

.heart-rate-monitor__macAddress {
    border: 1px solid #c7c7c7;
    margin-bottom: 10px;
    padding: 8px 8px 10px 8px;
    text-align: left;
    width: 361px;
}

.heart-rate-monitor__macAddress a {
    color: #e63b26;
    float: right;
}

.heart-rate-monitor__macAddressLabel .Text_gray,
.heart-rate-monitor__addMacAddress .Text_gray {
    margin-right: 10px;
}

.heart-rate-monitor__macAddressLabel .ri,
.heart-rate-monitor__addMacAddress .ri {
    color: #999999;
}

/* Service Settings
 ********************************************************************/

.serviceSettings .inlineText {
    display: inline-block;
    margin-left: 10px;
}

.phone .serviceSettings .inlineText {
    display: block;
    margin-left: 0;
}

.serviceSettings .inlineField {
    display: inline-block;
    margin-left: 10px;
}

.phone .serviceSettings .inlineField {
    display: block;
    margin-left: 0 !important;
}

/* Heart Rate Monitor
****************************************************************************/

/* Generic buttons definitions */

.athleteProfileHRM-button {
    box-shadow: 0 0 5px 0 rgba(87, 61, 139, 0.4);
    color: #ffffff !important;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-right: 15px;
    padding: 13px 26px 11px 15px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 240px;
}

.athleteProfileHRM-button:hover {
    text-decoration: none;
}

.athleteProfileHRM-button .icon {
    color: #fff;
    height: 30px;
    position: absolute;
    right: 5px;
    top: 10px;
    width: 30px;
}

.athleteProfileHRM-buttonRemove {
    display: inline-block;
}

.athleteProfileHRM-button .icon-checked {
    top: 5px;
}

.athleteProfileHRM-loaderIcon {
    background: #ffffff;
    border-radius: 30px;
    height: 22px;
    margin-left: 0px;
    position: absolute;
    right: 15px;
    top: 9px;
    width: 22px;
}

.athleteProfileHRM-loaderIcon:before {
    -webkit-animation: load 1.4s infinite linear;
    animation: load 1.4s infinite linear;
    background: -moz-linear-gradient(left, rgba(151, 151, 151, 0) 0%, rgba(255, 255, 255, 0.76) 56%);
    background: -webkit-linear-gradient(left, rgba(151, 151, 151, 0) 0%, rgba(255, 255, 255, 0.76) 56%);
    background: -o-linear-gradient(left, rgba(151, 151, 151, 0) 0%, rgba(255, 255, 255, 0.76) 56%);
    background: -ms-linear-gradient(left, rgba(151, 151, 151, 0) 0%, rgba(255, 255, 255, 0.76) 56%);
    background: linear-gradient(to right, rgba(151, 151, 151, 0) 0%, rgba(255, 255, 255, 0.76) 56%);
    border-radius: 100%;
    content: "";
    display: block;
    height: 32px;
    left: -5px;
    position: absolute;
    top: -5px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    transition: all 0.1s linear;
    width: 32px;
}

.athleteProfileHRM-loaderIcon:after {
    background: #ffffff;
    border-radius: 70%;
    bottom: 0;
    content: "";
    height: 72%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 72%;
}

.athleteProfileHRM-loaderIcon--success:before,
.athleteProfileHRM-loaderIcon--success:after {
    -webkit-animation: success 2s infinite linear;
    animation: success 2s infinite linear;
    background: #ffffff;
    border-radius: 40px;
    height: 22px;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 50%;
    width: 22px;
}

.athleteProfileHRM-loaderIcon--success:after {
    -webkit-animation: success 2s linear 0.2s infinite;
    animation: success 2s linear 0.2s infinite;
}

.athleteProfileHRM-loaderIcon--success svg {
    left: 0px;
    top: -28px;
}

.athleteProfileHRM-loaderIcon svg {
    height: 1em;
    left: 1px;
    position: relative;
    top: 0px;
    transform: scale(1.8);
    transition: all 0.4s ease-in-out;
    width: 1em;
    z-index: 1;
}

.athleteProfileHRM-loaderIconContainer {
    height: 17px;
    left: 7px;
    overflow: visible;
    position: relative;
    top: 7px;
    width: 22px;
    z-index: 1;
}

.athleteProfileHRM-loaderIcon--success .athleteProfileHRM-loaderIconContainer {
    left: 5px;
    top: 3px;
}

.athleteProfileHRM-loaderIconContainer .icon {
    height: 15px;
    position: absolute;
    right: 0px;
    top: 1px;
    width: 11px;
}

/* Admin */

.athleteProfileHRM-button--admin {
    background-color: #603a8e;
}

.athleteProfileHRM-buttonRemove--admin {
    color: #603a8e;
}

.athleteProfileHRM-button--admin .icon-checked {
    color: #603a8e;
}

.athleteProfileHRM-button--admin .athleteProfileHRM-loaderIconContainer {
    color: #603a8e;
}

.athleteProfileHRM-button--admin .athleteProfileHRM-loaderIconContainer .icon {
    color: #603a8e;
}

.athleteProfileHRM-button--admin .icon-hrm {
    color: #ffffff;
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes success {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
    }
}

@keyframes success {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
    }
}

/* Classes 2.0
 **********************************************************************/

.classesList tbody tr {
    position: relative;
}

.phone .classesList tbody tr:hover {
    background: #f4f5f8;
}

.classesList-actions {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#999999+0,f4f5f8+20&0+0,1+20 */
    background: -moz-linear-gradient(left, rgba(244, 245, 248, 0) 0%, rgba(244, 245, 248, 1) 20%);
    background: -webkit-linear-gradient(left, rgba(244, 245, 248, 0) 0%, rgba(244, 245, 248, 1) 20%);
    background: linear-gradient(to right, rgba(244, 245, 248, 0) 0%, rgba(244, 245, 248, 1) 20%);
    display: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00999999', endColorstr='#f4f5f8', GradientType=1);
    margin-top: 0;
    padding: 0 15px 0 50px;
    position: absolute;
    
    right: 0;
    text-align: right;
    top: 0;
}

/* Firefox seems to have a different behaviour positioning the div inside the table row */

.firefox.desktop .classesList-actions {
    top: 0 !important;
}

.classesList-actions a {
    display: inline-block;
    height: 26px;
    margin-right: 4px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 26px;
}

.classesList-actions .icon {
    height: 26px;
    width: 26px;
}

/* Classes list desktop and mobile */

.classesList-classNameContainer {
    display: inline-block;
    margin-left: 10px;
    position: relative;
}

.classesList-className .Strikethrough {
    opacity: 0.5;
}

.classesList-programColor {
    height: 18px;
    left: -10px;
    margin-right: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 4px;
}

.classesList-warning {
    display: inline-block;
    height: 10px;
    margin: 0;
    margin-left: 10px;
    width: 100%;
}

.classesList-warning .icon-info {
    color: #f95137;
    height: 20px;
    position: relative;
    top: 0px;
    width: 20px;
}

.classesList-reservationNrs {
    font-size: 12px;
}

.classesList-reservationContainer .progressBar2 {
    margin-top: 2px;
}

.phone .classesList-className {
    display: block;
}

.phone .classesList-warning {
    width: 70px;
}

.phone .classesList-actions {
    background: transparent;
    display: block;
    line-height: 10px;
    padding: 15px 15px 10px 15px;
    position: relative;
    text-align: center !important;
}

.phone .classesList-actions a {
    top: 0;
    transform: none;
    -webkit-transform: none;
}

.phone .classesList.TableRecords tr:nth-child(even) {
    background-color: #ffffff;
}

.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine.classesList-mobileCell,
.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine.classesList-mobileCell {
    padding-left: 49px;
}

.phone .TableRecords:not(.NoResponsive) > * > * > td.classesList-mobileCell--day,
.phone .TableRecords:not(.NoResponsive) > * > * > td.classesList-mobileCell--day,
.phone .TableRecords:not(.NoResponsive) > * > * > td.classesList-mobileCell--duration,
.phone .TableRecords:not(.NoResponsive) > * > * > td.classesList-mobileCell--duration {
    height: 82px;
    width: 50%;
}

.phone .TableRecords:not(.NoResponsive) td.classesList-mobileCell div.TableRecords_Label {
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
}

/*-----------------------------------------------*\
        Drop-Down Checkboxes and Select Widget
\*-----------------------------------------------*/

.dropDownCheckboxes,
.select {
    display: inline-block;
    min-width: 150px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

.dropDownCheckboxes-list,
.select-list {
    display: none;
}

.dropDownCheckboxes-button,
.select-button {
    background-color: #fff;
    border: 1px solid #c7c7c7;
    box-sizing: border-box;
    color: #333;
    cursor: pointer;
    display: block;
    height: 32px;
    line-height: 24px;
    overflow: hidden;
    padding: 4px 18px 4px 5px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
}

.dropDownCheckboxes-button > span,
.select-button > span {
    color: #141414;
    display: block;
    font-size: 14px;
    left: 10px;
    line-height: 24px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    text-overflow: ellipsis;
    top: 5px;
    white-space: nowrap;
}

.dropDownCheckboxes-selection,
.select-selection {
    color: #999;
}

.dropDownCheckboxes-button:before,
.select-button:before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    content: "";
    height: 0px;
    position: absolute;
    right: 8px;
    top: 14px;
    transition: all 0.2s;
    width: 0px;
}

.dropDownCheckboxes-button.open:before {
    transform: rotate(180deg);
}

.dropDownCheckboxes-list.ListRecords,
.select-list {
    background: #fff;
    border: 1px solid #c7c7c7;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    color: #333;
    display: none;
    margin-top: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1000;
}

.dropDownCheckboxes-list.ListRecords > ul,
.select-list > ul,
.select-list--ul {
    margin: 0;
    max-height: 250px;
    overflow: auto;
    padding: 5px 8px;
}

.select-list--noResults {
    background-color: #ffab00;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font-size: 11px;
    line-height: 16px;
    padding: 8px;
    width: 100%;
}

.dropDownCheckboxes-list.ListRecords ul > li,
.selectOption {
    background-image: none;
    display: list-item;
    list-style: none;
    padding-bottom: 5px;
    position: static;
}

.dropDownCheckboxes-list.ListRecords ul > li label,
.selectOption-label,
.select-optioncheckbox label {
    cursor: pointer;
    display: block;
    height: 24px;
    position: relative;
    width: 100%;
}

.dropDownCheckboxes-list.ListRecords input[type="checkbox"]:after,
.dropDownCheckboxes-list.ListRecords input[type="checkbox"]:before,
.select-list input[type="checkbox"]:after,
.select-list input[type="checkbox"]:before {
    display: none;
}

.dropDownCheckboxes-text,
.select-optioncheckbox .selectOption-label {
    display: block;
    left: 30px;
    line-height: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    top: 0;
    white-space: nowrap;
}

.dropDownCheckboxes-bg {
    background-color: transparent;
    border: none;
    border: 1px solid #8890a4;
    border-radius: 0;
    -webkit-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.16);
    height: 24px;
    left: 0;
    position: absolute;
    top: 0;
    width: 24px;
}

.dropDownCheckboxes-bg:after {
    border: 1px solid #fff;
    border-right: 0;
    border-top: 0;
    color: #fff;
    content: " ";
    display: block;
    height: 6px;
    left: 5px;
    opacity: 0;
    position: absolute;
    top: 6px;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 12px;
}

.dropDownCheckboxes-list.ListRecords ul > li.selected .dropDownCheckboxes-bg,
.select-list li.selected .dropDownCheckboxes-bg {
    background-color: #5d3e8c;
}

.dropDownCheckboxes-list.ListRecords ul > li.selected .dropDownCheckboxes-bg:after,
.select-list li.selected .dropDownCheckboxes-bg:after {
    opacity: 1;
}

.phone .dropDownCheckboxes-button,
.tablet .dropDownCheckboxes-button {
    height: 38px;
}

.phone .dropDownCheckboxes-button > span,
.tablet .dropDownCheckboxes-button > span {
    top: 9px;
}

.phone .dropDownCheckboxes-button:before,
.tablet .dropDownCheckboxes-button:before {
    top: 18px;
}

/*------------------------------------*\
        Select Widget
\*-------------------------------------*/

.select {
    min-width: 100px;
    width: 140px;
}

.select-button {
    border: 1px solid #e9e8ec;
    position: relative;
    z-index: 1;
}

.select-button > span {
    color: rgba(0, 0, 0, 0.8);
    font-size: 13px;
}

.select-button:before {
    border-top: 4px solid rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.select-button.open:before {
    transform: rotateX(180deg);
}

.select-list {
    border: none;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px 0 rgba(0, 0, 0, 0.2);
    margin-top: 0;
    z-index: 2;
}

.select.open .select-list {
    display: block;
}

.select-list > ul,
.select-list--ul {
    padding: 0 0;
}

.selectOption,
.ui-timepicker-wrapper.select-list li {
    box-sizing: content-box;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: block;
    font-size: 13px;
    height: 17px;
    line-height: 17px;
    padding: 7px 16px;
    position: relative;
}

.select-allOption .selectOption:first-of-type:after {
    border-top: 1px solid #e0e0e0;
    bottom: 0;
    content: "";
    height: 0;
    left: 16px;
    position: absolute;
    right: 16px;
}

.selectOption.selected:not(.selectOptionCheckbox),
.ui-timepicker-wrapper.select-list li.ui-timepicker-selected,
.ui-timepicker-wrapper.select-list li.ui-timepicker-selected .ui-timepicker-duration {
    background-color: transparent !important;
    color: #5900b3 !important;
    font-weight: 400;
}

.selectOption:not(.selectOptionCheckbox):hover,
.ui-timepicker-wrapper.select-list li:hover,
.ui-timepicker-wrapper.select-list li:hover .ui-timepicker-duration {
    background-color: #5900b3 !important;
    color: #fff !important;
    font-weight: 400;
}

.selectOption:not(.selectOptionCheckbox):hover:after,
.selectOption.selected:not(.selectOptionCheckbox):after {
    display: none;
}

.selectOption.disabled,
.selectOption.disabled *,
.ui-timepicker-wrapper.select-list li.ui-timepicker-disabled {
    background-color: #fff !important;
    color: rgba(0, 0, 0, 0.3);
    cursor: default;
}

.selectOption-label {
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* select--small */

.select--small {
    width: 96px;
}

.select--small .select-button > span {
    left: 7px;
}

.select--small .select-list {
    min-width: 100%;
    width: auto;
}

.select--small .selectOption,
.ui-timepicker-wrapper.select-list li {
    font-size: 14px;
    height: 19px;
    line-height: 19px;
    padding: 2px 7px;
}

/* OptionNoteLeftAligned */

.selectOptionNoteLeftAligned {
    display: flex;
}

.selectOptionNoteLeftAligned span {
    text-overflow: initial;
    white-space: nowrap;
    width: auto;
}

.selectOption-note,
.ui-timepicker-wrapper.select-list .ui-timepicker-duration {
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    margin: 0;
    padding-left: 14px;
}

.selectOptionNoteLeftAligned.selected span,
.selectOptionNoteLeftAligned:hover span,
.ui-timepicker-wrapper.select-list li:hover .ui-timepicker-duration {
    color: inherit;
}

/* OptionCheckbox */

.select-optioncheckbox .select-list {
    left: -10px;
    right: -10px;
    width: auto;
}

.select-optioncheckbox .select-list > ul {
    padding: 8px 0;
}

.selectOptionCheckbox {
    height: 24px;
    padding: 8px 16px;
}

.select-allOption .selectOptionCheckbox:first-of-type {
    padding-bottom: 24px;
}

.select-allOption .selectOptionCheckbox:first-of-type:after {
    bottom: 8px;
}

.selectOptionCheckbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: relative;
    width: 20px;
}

.selectOptionCheckbox .selectOption-label {
    left: 32px;
    line-height: 24px;
    width: auto;
}

.selectOptionCheckbox .dropDownCheckboxes-bg {
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
}

.selectOptionCheckbox .dropDownCheckboxes-bg:after {
    height: 2px;
    left: 9px;
    top: 9px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 7px;
}

.selectOptionCheckbox:not(.disabled):not(.selected):hover .dropDownCheckboxes-bg {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.select-list li.selected .dropDownCheckboxes-bg {
    background-color: #5900b3;
    border: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

/* OptionThumbnailAndIcon */

.select-optionthumbnailandicon {
    min-width: 180px;
}

.selectOptionThumbnailAndIcon {
    display: flex;
    height: 26px;
    padding: 7px 8px 7px 40px;
}

.selectOption-thumbnail {
    background-color: #ebebeb;
    height: 24px;
    width: 24px;
}

.selectOption-thumbnail img {
    height: 100%;
    width: 100%;
}

.selectOption-thumbnail {
    left: 8px;
    position: absolute;
    top: 8px;
}

.selectOptionThumbnailAndIcon .selectOption-label {
    height: 26px;
    line-height: 26px;
}

.selectOption-icon {
    height: 24px;
    width: 24px;
}

.selectOptionThumbnailAndIcon svg {
    font-size: 24px;
}

.selectOptionThumbnailAndIcon:not(.disabled):hover .icon,
.selectOptionThumbnailAndIcon:not(.disabled):hover .icon use > svg {
    color: #fff;
}

/* PeopleSelect Select */

.select--peopleSelect {
    min-width: 200px;
}

.select--peopleSelect .select-button,
.select--timepicker .select-button {
    padding: 0;
}

.select--peopleSelect .select-button input,
.select--timepicker .select-button input {
    border: none;
    color: inherit;
    height: 30px;
    line-height: 30px;
    padding: 4px 18px 4px 12px;
    width: 100%;
}

.select--peopleSelect .select-button:before,
.select--timepicker .select-button:before {
    pointer-events: none;
}

.selectOptionPeopleSelect {
    height: 32px;
    padding: 7px 8px 9px 56px;
}

.selectOptionPeopleSelect .selectOption-thumbnail {
    height: 32px;
    width: 32px;
}

.selectOption-name,
.selectOption-contact {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selectOption-name {
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
}

.selectOption-contact {
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    height: 12px;
    line-height: 12px;
}

.selectOptionPeopleSelect:hover *,
.selectOptionPeopleSelect.active * {
    color: #fff;
}

/* Timepicker Select */

.select--timepicker .select-button input {
    text-transform: uppercase;
}

.ui-timepicker-wrapper.select-list {
    height: auto;
    margin: -1px 0 0 0;
    max-height: 250px;
    min-width: 98px;
    overflow: initial;
    overflow-y: auto;
    width: auto !important;
}

.ui-timepicker-wrapper.select-list > ul {
    max-height: initial;
    overflow: initial;
}

.ui-timepicker-wrapper.select-list li {
    text-transform: uppercase;
}

.ui-timepicker-wrapper.select-list li .ui-timepicker-duration {
    text-transform: none;
}

/*------------------------------------*\
        Calendar (Classes 2.0, etc)
\*-------------------------------------*/

/* calendar-datePicker */

.calendar-datePicker .dateRangeSelector {
    padding-right: 22px;
}

.calendar-datePicker .dateRangeSelector:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    content: "";
    height: 0px;
    position: absolute;
    right: 10px;
    top: 20px;
    transition: all 0.2s;
    width: 0px;
}

.calendar-datePicker .dateRangeSelector .dateRange {
    border-bottom: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 32px;
    font-weight: 300;
}

.calendar-datePicker .dateRangeSelector .dateRange sup {
    vertical-align: super;
}

.calendar-datePicker .dateRangeSelector .datePickerContainer {
    right: -114px;
}

.calendar-datePicker .dateRangeSelector .calendarTrigger span {
    display: none;
}

/* calendar */

.calendar * {
    border-radius: 0;
    box-shadow: none;
}

.calendar {
    margin-top: -32px;
    min-height: 915px;
    opacity: 1;
    transition: opacity 0.2s;
}

body > .calendar {
    min-height: auto;
}

.calendar.loading {
    opacity: 0.5;
}

.calendar-hiddenButton {
    display: block;
    height: 10px;
    left: 45%;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 35%;
    visibility: hidden;
}

/* calendar nav */

.calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 36px;
}

.calendar .fc-toolbar * {
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 13px;
    text-transform: uppercase;
}

.calendar .fc-today-button {
    margin: 0;
    padding: 0 6px;
}

.calendar .fc-next-button:not(.fc-state-disabled):hover {
    color: rgba(0, 0, 0, 1);
}

.calendar .fc-prev-button,
.calendar .fc-next-button {
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D%2238.1%2019%2026.9%2029.4%2024%2032%2026.9%2034.6%2038.1%2045%2041%2042.4%2029.7%2032%2041%2021.6%22%20transform%3D%22translate(32.5%2032)rotate(-90)translate(-32.5%20-32)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        center center no-repeat;
    background-size: 25px 25px;
    height: 20px;
    margin: 3px 0 0 0;
    opacity: 0.7;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    transform: rotate(90deg);
    width: 20px;
}

.calendar .fc-prev-button:hover,
.calendar .fc-next-button:hover {
    opacity: 1;
}

.calendar .fc-next-button {
    transform: rotate(-90deg);
}

.calendar .fc-agendaDay-button,
.calendar .fc-agendaWeek-button {
    border-bottom: 2px solid transparent;
    height: 20px;
    margin-top: 4px;
    padding: 0 4px;
}

.calendar .fc-agendaDay-button.fc-state-active,
.calendar .fc-agendaWeek-button.fc-state-active {
    border-bottom-color: #4a4a4a;
}

.phone .calendar .fc-agendaDay-button.fc-state-active,
.phone .calendar .fc-agendaWeek-button.fc-state-active {
    border-bottom-color: #623b90;
}

.phone .calendar .fc-agendaDay-button,
.phone .calendar .fc-agendaWeek-button {
    color: #623b90;
}

.calendar .fc-agendaWeek-button {
    margin-left: 32px;
}

.calendar .fc-agendaDay-button:hover,
.calendar .fc-agendaWeek-button:hover {
    border-bottom-color: #000;
    color: rgba(0, 0, 0, 1);
}

.calendar .fc-now-indicator {
    border: 0 solid;
    border-color: #5d3e93;
}

.calendar .fc-now-indicator-line {
    border-top-width: 1px !important;
}

/* calendar headers */

.calendar.fc .fc-head,
.calendar.fc .fc-head th,
.calendar.fc .fc-head td {
    border: none;
}

.calendar.fc .fc-head th {
    padding: 12px 4px 8px 4px;
}

.calendar.fc .fc-head th.fc-today {
    background-color: #eeeaf3;
}

.calendar .fc-day-header span {
    color: rgba(0, 0, 0, 0.3);
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    width: 90%;
}

.calendar .fc-day-header span:first-line {
    color: #623b90;
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
}

.calendar.fc .fc-head th.fc-today.fc-day-header span {
    color: #623b90;
}

/* calendar content */

.calendar.fc .fc-body > tr > td.fc-widget-content,
.calendar .fc-time-grid .fc-bg td:first-of-type {
    border: none;
}

.calendar.fc-unthemed td.fc-today {
    background: none;
}

.calendar .fc-time-grid table {
    border-right-style: solid;
    border-right-width: 1px;
}

.calendar .fc-time-grid .fc-slats:before,
.calendar .fc-time-grid .fc-slats:after {
    border-top: 1px solid #ddd;
    content: "";
    left: 39px;
    position: absolute;
    right: 0;
}

.calendar .fc-time-grid .fc-slats:before {
    top: 0;
}

.calendar .fc-time-grid .fc-slats:after {
    bottom: 0;
}

.calendar .fc-time-grid .fc-slats td {
    height: 10px;
}

.calendar .fc-time-grid .fc-slats td:first-of-type {
    border: none;
    position: relative;
}

.calendar .fc-slats td:first-of-type > span {
    color: #666;
    display: block;
    font-size: 12px;
    height: 10px;
    line-height: 12px;
    overflow: visible;
    position: absolute;
    top: -1px;
    width: 28px;
}

.calendar .fc-slats td:first-of-type > span span {
    font-size: 8px;
    line-height: 10px;
}

.calendar .fc-slats td:first-of-type > span span {
    display: none;
}

.calendar .fc-slats tr:nth-child(1) td:first-of-type > span span,
.calendar .fc-slats tr:nth-child(29) td:first-of-type > span span {
    display: inline-block;
    position: absolute;
    right: 18px;
    top: 0;
}

/* calendar events */

.calendar.fc-ltr .fc-time-grid .fc-event-container {
    margin: 0 3% 0 0;
}

.calendar .fc-event {
    background-color: #ccc;
    border-color: #ccc;
    color: rgba(0, 0, 0, 0.7);
    font-size: 11px;
    line-height: 14px;
    min-height: 10px !important;
    -webkit-print-color-adjust: exact;
}

@media print {
    .calendar .fc-event {
        -webkit-print-color-adjust: exact;
    }
}

.calendar .fc-event:hover,
.calendar .fc-event:focus {
    min-height: 45px !important;
    z-index: 100;
}

.fc-time-grid-event.fc-short .fc-title {
    max-width: 100%;
}

.calendar .fc-content {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.calendar .fc-content-left,
.calendar .fc-content-right {
    height: 30px;
    position: absolute;
    right: 20px;
    top: 0;
}

.calendar .fc-content-left {
    left: 0;
    padding: 2px 0 0 5px;
}

.calendar .fc-content-right {
    right: -3px;
    top: 5px;
    width: 20px;
}

.calendar .noReservations .fc-content-left {
    right: 5px;
}

.calendar .noReservations .fc-content-right {
    display: none;
}

.calendar .fc-title,
.calendar .fc-event-desc {
    display: block;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar .fc-title,
.calendar .fc-event-reservLimit {
    font-weight: 600;
}

.calendar .fc-event-reservLimit,
.calendar .fc-event-reservCount {
    padding: 1px 0;
    position: relative;
    text-align: center;
}

.calendar .fc-event-reservLimit {
    padding: 2px 0 0 0;
}

.calendar .fc-event-reservLimit:after {
    display: none;
}

.calendar .fc-event-reservCount:after {
    border-bottom: 1px solid #000;
    bottom: -1px;
    content: "";
    position: absolute;
    right: 7px;
    width: 5px;
}

.calendar .fc-event-reservCount.overflow:after,
.calendar .fc-event-reservCount.free:after {
    border-bottom: 3px solid #2f2f2f;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    bottom: -2px;
    height: 0px;
    right: 7px;
    width: 0px;
}

.calendar .fc-event-reservCount.overflow:after {
    transform: rotate(180deg);
}

.calendar .fc-event.canceled {
    background-color: #aaa !important;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.7%208L0%208%200%207.3%200.7%208ZM7.3%200L8%200%208%200.7%207.3%200ZM0.7%200L8%207.3%208%208%207.3%208%200%200.7%200%200%200.7%200Z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: repeat;
    border-color: #aaa !important;
}

.calendar .fc-event.canceled .fc-content-left {
    right: 5px;
}

.calendar .fc-event.canceled .fc-content-right {
    display: none;
}

.calendar .fc-event.canceled .fc-title,
.calendar .fc-event.canceled .fc-event-desc {
    text-decoration: line-through;
}

.phone .classesCal-container {
    margin-top: 10px;
}

.phone .classesCal-container .fc-header-toolbar .fc-right {
    display: none;
}

.phone .classesCal-container .fc-header-toolbar .fc-center {
    width: 100%;
}

.phone .classesCal-container .fc-header-toolbar .fc-center .fc-button {
    font-size: 18px;
    height: 50px;
    width: 50%;
}

.phone .classesCal-container .fc .fc-toolbar > * > :first-child {
    margin-left: 0;
}

.phone .classesCal-container .fc-header-toolbar .fc-center .fc-agendaWeek-button {
    margin-left: 0;
}

/*------------------------------------*\
        Calendar Balloons
\*-------------------------------------*/

.calendar-balloonsContainer {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
}

.calendar-balloonsContainer .Balloon {
    pointer-events: auto;
}

.phone .calendar-balloonsContainer .Balloon {
    background-color: #f6f5f9;
    border: none;
    bottom: 0;
    box-shadow: none;
    left: 0 !important;
    position: fixed;
    top: 59px !important;
    width: 100%;
    z-index: 999999;
}

.phone .calendar-balloonsContainer .Balloon:before,
.phone .calendar-balloonsContainer .Balloon:after {
    display: none;
}

.calendar-balloonsContainer .Balloon:after {
    border-bottom-color: #f6f5f9;
}

.calendar-balloonsContainer .Balloon.Balloon--above:after {
    border-bottom-color: transparent;
    border-top-color: #f6f5f9;
    bottom: auto;
}

.calendar-balloonsContainer .Balloon.Balloon--above:before {
    bottom: auto;
}

.calendar-balloonsContainer .Balloon {
    top: auto;
}

.phone .calendar-balloonsContainer .Balloon.Balloon--above:after {
    display: none;
}

.calendar-balloonsContainer .Balloon_content {
    background-color: #f6f5f9;
    overflow: visible;
    padding: 0;
}

.phone .calendar-balloonsContainer .Balloon_content {
    height: 100% !important;
    overflow-y: auto;
    position: relative;
}

.calendar-balloonsContainer .Balloon_content a:hover {
    opacity: 1;
}

.calendar-balloonsContainer .Balloon.fadeOut {
    opacity: 0;
    transition: opacity 0.2s;
}

.calendarBalloon-content {
    color: rgba(0, 0, 0, 0.7);
    font-size: 13px;
    line-height: 17px;
    overflow: visible !important;
    width: 256px;
}

.phone .calendarBalloon-content {
    height: 100%;
    width: 100%;
}

.calendarBalloon-step {
    background-color: #f6f5f9;
    min-height: 280px;
    opacity: 1;
    padding: 8px 0;
    position: relative;
    transition: all 0.25s;
    width: 256px;
    z-index: 2;
}

.phone .calendarBalloon-step {
    margin: 0 auto;
    min-height: 100%;
    padding: 8px 20px;
    width: 100%;
}

.calendarBalloon-step--canceled {
    background-color: #efefef;
}

.calendarBalloon-step--canceled:before {
    background: transparent;
    border: 4px solid #fff;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.calendarBalloon-step.fadeOut {
    opacity: 0;
}

.calendarBalloon-step.Hidden {
    display: block;
    left: -100000px;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

.calendarBalloon-step.Hidden.fadeIn {
    opacity: 1;
    transition: opacity 0.25s;
    z-index: 3;
}

.calendarBalloon-closeBalloon,
.calendarBalloon-closeArea {
    font-size: 32px;
    position: absolute;
    right: 4px;
    top: 6px;
}

.calendarBalloon-closeBalloon .icon,
.calendarBalloon-closeArea .icon {
    transition: all 0.15s;
}

.calendarBalloon-closeBalloon:hover .icon,
.calendarBalloon-closeArea:hover .icon {
    transform: rotate(90deg);
}

.calendarBalloon-title {
    color: rgba(0, 0, 0, 0.7);
    display: block;
    font-size: 21px;
    line-height: 24px;
    margin: 0 8px;
    padding: 2px 32px 11px 0;
}

.calendarBalloon-title + .textButton {
    display: block;
    margin: 0 8px;
    padding: 5px 0;
}

.calendarBalloon-subTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
    display: block;
    font-size: 17px;
    line-height: 22px;
    margin: 0 8px;
    padding: 7px 0 11px 0;
}

.calendarBalloon-text {
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    line-height: 16px;
}

.calendarBalloon-row,
.calendarBalloon-step > .UnderlineInput {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: block;
    margin: 10px 8px 0 8px;
    padding: 4px 0 12px 0;
}

.calendarBalloon-row .Columns .Column {
    padding: 0;
    width: 160px;
    width: calc(100% - 80px);
}

.calendarBalloon-row .Columns .Column:first-child {
    height: 24px;
    width: 32px;
}

.calendarBalloon-row .Columns .Column:last-child {
    text-align: right;
    width: 48px;
}

.calendarBalloon-row .icon,
.calendarBalloon-dateTime .icon {
    font-size: 24px;
}

.calendarBalloon-row .calendarBalloon-subTitle2,
.calendarBalloon-row .calendarBalloon-text {
    display: block;
}

.calendarBalloon-buttonsContainer {
    display: block;
    margin: 0 8px;
}

.calendarBalloon-textButtonsContainer {
    align-content: space-between;
    align-items: center;
    display: flex;
    margin: 12px 0 4px 0;
}

.calendarBalloon-textButtonsContainer .textButton:last-child {
    flex: 2;
    text-align: right;
}

.calendarBalloon-externalActions {
    align-content: space-between;
    align-items: center;
    display: flex;
    padding: 8px 8px 0 8px;
}

.calendarBalloon-emailButton {
    flex: 1;
    height: 24px;
    margin-left: 8px;
    width: 30px;
}

.calendarBalloon-emailButton .icon {
    font-size: 22px;
}

.calendarBalloon-emailButton .icon,
.calendarBalloon-emailButton .icon use > svg {
    color: #623b90;
}

.calendarBalloon-externalActions .textButton {
    flex: 2;
    text-align: right;
}

.calendarBalloon-externalActions .textButton .icon {
    color: #623b90;
    font-size: 22px;
    position: relative;
    top: 3px;
}

.calendarBalloon-content .Button {
    display: block;
    margin: 8px 0 0 0;
    width: 100%;
}

.calendarBalloon-stepTimeSettings {
    min-height: 350px;
}

.calendarBalloon-dateTime .Column {
    padding: 0;
    width: 30px;
}

.calendarBalloon-dateTime .Column:nth-child(even) {
    margin-right: 8px;
    overflow: hidden;
    width: 74px;
}

.calendarBalloon-dateTime .Column:last-child {
    padding-top: 1px;
}

.calendarBalloon-dateTime input,
.calendarBalloon-repeatDurationDate input,
.calendarBalloon-reservationsLimit input {
    background: none;
    border: none !important;
    color: #623b90;
    font-size: 13px;
    height: 24px !important;
    line-height: 17px;
    padding: 0;
    text-align: center;
    width: 72px !important;
}

.phone .calendarBalloon-weekDaySelector select,
.phone .calendarBalloon-repeatDurationDD {
    width: 30% !important;
}

.calendarBalloon-dateTime input:focus,
.calendarBalloon-repeatDurationDate input:hover,
.calendarBalloon-reservationsLimit input:hover {
    border: none !important;
}

.calendarBalloon-dateTime input:hover,
.calendarBalloon-repeatDurationDate input:hover,
.calendarBalloon-reservationsLimit input:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.calendarBalloon-dateTime input.ui-timepicker-input,
.calendarBalloon-dateTime input.ui-timepicker-input:focus {
    border-bottom: 1px solid rgba(98, 59, 144, 0.5) !important;
    width: 58px !important;
}

.calendarBalloon-dateTime .Column > div.ui-timepicker-wrapper {
    height: 130px;
    width: 108px;
}

.calendarBalloon-dateTime .ui-timepicker-list {
    overflow-x: hidden;
}

.calendarBalloon-fixedDate {
    display: block;
    padding: 4px 0 0 5px;
}

.calendarBalloon-weekDaySelector {
    background: #fcfbfd;
    display: block;
    margin: -1px 0 0 0;
    padding: 12px 0;
}

.calendarBalloon-weekDaySelector .calendarBalloon-row {
    border-bottom: none;
    margin-top: 0;
}

.calendarBalloon-weekDayList ul {
    display: flex;
    list-style: none;
    width: 100%;
}

a.calendarBalloon-weekDayItem {
    color: rgba(0, 0, 0, 0.8);
    flex-grow: 1;
    font-size: 13px;
    line-height: 16px;
    margin: 0 4px;
    padding: 2px 4px;
}

a.calendarBalloon-weekDayItem.selected,
a.calendarBalloon-weekDayItem:hover {
    border-bottom: 2px solid #623b90;
    color: #623b90;
    text-decoration: none;
}

.calendarBalloon-repeatDurationDate {
    display: inline-block;
    margin: 0 0 0 10px;
}

.calendarBalloon-repeatDurationDate .Column {
    display: inline-block;
    padding: 0;
    vertical-align: top;
    width: 74px;
}

.calendarBalloon-repeatDurationDate .Column:first-child {
    overflow: hidden;
    width: 30px;
}

.calendarBalloon-repeatAfter {
    display: inline-block;
    margin: 0 0 0 10px;
    width: 110px;
}

.calendarBalloon-repeatAfter input {
    padding: 0 4px;
    text-align: center;
    width: 32px;
}

.calendarBalloon-repeatAfter .calendarBalloon-label {
    margin: 0 0 0 8px;
    vertical-align: middle;
}

.calendarBalloon-peopleFinder .icon {
    font-size: 16px;
}

.calendarBalloon-coaches {
    min-height: 250px;
}

.calendarBalloon-coaches .calendarBalloon-label,
.calendarBalloon-reservationsAthletes .calendarBalloon-label {
    color: rgba(0, 0, 0, 0.3);
    display: block;
    padding: 30px 0;
    text-align: center;
}

.calendarBalloon-coaches .ListRecords > ul,
.calendarBalloon-reservationsAthletesList .ListRecords > ul {
    list-style: none;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 0;
}

.calendarBalloon-coaches .ListRecords li,
.calendarBalloon-reservationsAthletesList .ListRecords li {
    min-height: 56px;
    position: relative;
    width: 100%;
}

.calendarBalloon-coachInfo,
.calendarBalloon-reservationsAthleteInfo {
    box-sizing: border-box;
    height: auto;
    padding: 4px 60px 0 8px;
    width: 100%;
}

.calendarBalloon-coachInfo > .PosRelative,
.calendarBalloon-reservationsAthleteInfo > .PosRelative {
    display: block;
    float: left;
    height: 32px;
    margin: 5px 7px 0 0;
    overflow: hidden;
    width: 32px;
}

.calendarBalloon-coachInfo > .PosRelative img,
.calendarBalloon-reservationsAthleteInfo > .PosRelative img {
    height: 32px;
    width: 32px;
}

.calendarBalloon-coachName,
.calendarBalloon-reservationsAthleteName {
    color: #040404;
    display: block;
    overflow: hidden;
    padding: 5px 0 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendarBalloon-coachPosition {
    background-color: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    height: 20px;
    margin-top: -1px;
    padding: 0 18px 0 0;
    text-transform: uppercase;
    width: 80px;
}

.phone select.calendarBalloon-coachPosition,
.tablet select.calendarBalloon-coachPosition {
    height: 20px;
    line-height: 15px;
    max-width: 100px;
    min-width: 80px;
    width: 50% !important;
}

.calendarBalloon-coachAction {
    color: #623b90;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 16px;
    position: absolute;
    right: 8px;
    text-transform: uppercase;
    top: 16px;
}

.calendarBalloon-coachOverlap {
    display: block;
    height: 24px;
    margin: 2px 0 0 0;
    position: relative;
}

.calendarBalloon-warning {
    color: #e84843;
    display: block;
    font-size: 13px;
    line-height: 16px;
    padding: 4px 0 0 30px;
}

.calendarBalloon-coachOverlap .icon {
    height: 20px;
    left: 6px;
    position: absolute;
    top: 2px;
    width: 20px;
}

.calendarBalloon-coachOverlap .icon,
.calendarBalloon-coachOverlap .icon use > svg {
    color: #e84843;
}

.calendarBalloon-step .progressBar2 {
    width: 100%;
}

.calendarBalloon-step .progressBar2 {
    margin: 8px 8px 0 8px;
}

.calendarBalloon-step .progressBar2--gradient,
.calendarBalloon-step .progressBar2--waiting {
    margin: 8px 18px 0 0;
}

.calendarBalloon-step .progressBar2--gradient .ui-progress-bar .ui-progress:after {
    width: calc(240px - 100%);
}

.calendarBalloon-reservationsLimitContainer {
    align-content: space-between;
    align-items: baseline;
    display: flex;
}

.calendarBalloon-reservationsLimit .calendarBalloon-reservationsNr,
.calendarBalloon-reservationsLimit .UnderlineInput {
    color: #623b90;
    line-height: 16px;
}

.calendarBalloon-reservationsLimit .calendarBalloon-reservationsNr {
    padding-top: 4px;
}

.calendarBalloon-reservationsLimit {
    align-items: baseline;
    display: flex;
    flex: 2;
    height: 24px;
}

.calendarBalloon-reservationsLimit input,
.calendarBalloon-reservationsLimit input:hover,
.calendarBalloon-reservationsLimit input:focus {
    border-bottom: 1px solid rgba(98, 59, 144, 0.5) !important;
    line-height: 16px;
    width: 20px !important;
}

.calendarBalloon-reservationsAction {
    color: #623b90;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
}

.calendarBalloon-reservationsLimitNr {
    margin: 0 2px;
}

.calendarBalloon-reservationsLimit .calendarBalloon-label {
    color: #623b90;
}

.calendarBalloon-stepReservations {
    min-height: 460px;
}

.calendarBalloon-stepReservations .progressBar2--gradient {
    padding-bottom: 12px;
}

.calendarBalloon-stepReservations .calendarBalloon-label.calendarBalloon-classFull {
    color: #e84843;
    display: block;
    padding: 10px 0;
    text-align: center;
}

.calendarBalloon-reservationsAthletes {
    margin: 10px 0 0 0;
}

.calendarBalloon-reservationsAthletesList .ListRecords li {
    min-height: 50px;
}

.calendarBalloon-reservationsAthleteInfo {
    padding: 4px 72px 0 8px;
}

.calendarBalloon-reservationsAthleteStatus {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.5);
    display: block;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.calendarBalloon-reservationsAthleteAction {
    background-color: transparent;
    border: none;
    color: #623b90;
    cursor: pointer;
    font-size: 11px;
    height: 20px;
    line-height: 16px;
    padding: 0 18px 0 0;
    position: absolute;
    right: 4px;
    text-transform: uppercase;
    top: 12px;
    width: 65px !important;
}

.calendarBalloon-reservationsAddMembership {
    background: #fff;
    border: 1px solid #e4e2e7;
    color: rgba(0, 0, 0, 0.8);
    font-size: 13px;
    line-height: 16px;
    padding: 8px;
    position: relative;
}

.calendarBalloon-reservationsAddMembership .calendarBalloon-reservationsAthleteInfo {
    height: 52px;
    padding: 0 20px 0 0;
}

.calendarBalloon-reservationsAddMembership-title {
    display: block;
    padding: 8px 0;
}

.calendarBalloon-reservationsAddMembership-note {
    color: rgba(0, 0, 0, 0.5);
    display: block;
}

.calendarBalloon-reservationsAddMembership .calendarBalloon-closeArea {
    right: 8px;
    top: 10px;
}

.calendarBalloon-reservationsAddMembership .calendarBalloon-closeArea .icon {
    font-size: 16px;
}

.calendarBalloon-reservationsAddMembership select {
    margin: 16px 0 0 0;
}

.calendarBalloon-reservationsAddMembership .Button {
    margin: 16px 0 8px 0;
}

.calendarBalloon-warningContainer {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin: 8px;
    padding: 14px 0 8px 0;
    text-align: center;
}

.calendarBalloon-warningTitleContainer .icon {
    font-size: 40px;
}

.calendarBalloon-warningTitle {
    color: rgba(0, 0, 0, 0.8);
    display: block;
    font-size: 20px;
    line-height: 24px;
    padding: 6px 0;
}

.calendarBalloon-warningSubtitle {
    color: rgba(0, 0, 0, 0.7);
    display: block;
    font-size: 17px;
    font-weight: 300;
    line-height: 22px;
    padding: 8px 0;
}

.calendarBalloon-checkBoxContainer {
    display: flex;
    margin: 12px 8px 0 8px;
    text-align: left;
}

.calendarBalloon-checkBoxContainer input[type="checkbox"] {
    height: 16px;
    margin-right: 8px;
    width: 16px;
}

.calendarBalloon-checkBoxContainer input[type="checkbox"]:before {
    height: 16px;
    width: 16px;
}

.calendarBalloon-checkBoxContainer input[type="checkbox"]:after {
    height: 4px;
    width: 8px;
}

.calendarBalloon-warningContainer .calendarBalloon-buttonsContainer {
    margin-top: 22px;
}

.calendarBalloon-footNote {
    color: rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 11px;
    line-height: 14px;
    margin: 16px 8px 0 8px;
}

.progressBar2 + .calendarBalloon-warningContainer {
    border-top: none;
    margin-top: 0;
}

.calendarBalloon-warningText {
    display: block;
    margin: 8px 0;
}

.calendarBalloon-warningContainer--success {
    padding: 20px 0;
}

.calendarBalloon-warningContainer--success .icon {
    font-size: 48px;
}

.calendarBalloon-warningContainer--success + .Button {
    margin: 16px 8px 0 8px;
    width: calc(100% - 16px);
}

/*------------------------------------*\
        Classes Calendar
\*-------------------------------------*/

/* Classes Calendar Fullcalendar narrow screens custom styles */

@media only screen and (max-width: 1200px) {
    .desktop .classesCal-container .fc-header-toolbar .fc-center {
        margin-left: 150px;
    }
}

@media only screen and (max-width: 970px) {
    .desktop .classesCal-container {
        margin-top: 20px;
    }
    .desktop .classesCal-container .fc-header-toolbar .fc-center {
        float: left;
        margin-left: 0;
    }
}

@media only screen and (max-width: 930px) {
    .tablet .classesCal-container .fc-header-toolbar .fc-center {
        margin-left: 150px;
    }
}

@media only screen and (max-width: 700px) {
    .tablet .classesCal-container {
        margin-top: 20px;
    }
    .tablet .classesCal-container .fc-header-toolbar .fc-center {
        float: left;
        margin-left: 0;
    }
}

/* Classes Calendar Fullcalendar phone custom styles */

.phone .classesCalendar .fc-view-container {
    overflow: scroll;
    width: 100%;
}

.phone .classesCalendar .fc-agendaWeek-view {
    width: 100%;
}

.phone .classesCalendar .fc-agendaWeek-view .fc-day-header,
.phone .classesCalendar .fc-agendaWeek-view .fc-day,
.phone .classesCalendar .fc-agendaWeek-view .fc-content-skeleton > table tbody tr td:not(:first-child) {
    box-sizing: border-box;
    width: 60px;
}

.phone .classesCalendar .fc-agendaWeek-view .fc-time-grid-container {
    min-width: 457px;
}

/* classesCalendar-filters */

.classesCalendar-filters {
    min-width: 150%;
}

.phone .classesCalendar-filters {
    min-width: 100%;
}

.classesCalendar-filters > .UnderlineInput {
    display: inline-block;
    margin: 0 15px 15px 0;
    width: 150px;
}

.phone .classesCalendar-filters > .UnderlineInput {
    display: block;
    margin: 0 0 15px 0;
    width: 100%;
}

.classesCalendar-filters select {
    width: 150px;
}

.phone .Filters .classesCalendar-filters select {
    width: 100%;
}

.classesCalendar-filters > .UnderlineInput:first-of-type {
    margin-left: 0;
}

.classesCalendar-defaultFilters {
    padding: 4px 0 0 0;
}

.classesCalendar-makeDefaultFilters:not(.Hidden) {
    display: inline-block;
    padding: 7px 0;
}

/* classesCalendar-legend */

.classesCalendar-legend {
    display: block;
    margin: 22px 0 12px 37px;
}

.classesCalendar-legend ul {
    list-style-type: none;
}

.classesCalendar-legend li {
    display: inline-block;
    margin: 6px 8px 6px 0;
    position: relative;
}

.classesCalendar-legendColor {
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
}

@media print {
    .classesCalendar-legendColor {
        -webkit-print-color-adjust: exact;
    }
}

.classesCalendar-legendName {
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 20px;
    padding: 0 8px 0 28px;
}

/* classesCalendar-weekDaySelector */

.classesCalendar-weekDaySelector-label {
    color: initial !important;
}

.classesCalendar-weekDaySelector-label .selected {
    border-bottom: solid 2px;
    color: inherit;
}

/* Classes Embed Modal */

.classesCalendar-embed .BetaTag {
    left: 10px;
    position: relative;
    text-align: center;
    top: -5px;
}

.classesCalendar-embedTitle {
    margin-top: 50px;
}

.classesCalendar-embedDescription {
    display: block;
    margin: 15px auto 0 auto;
    position: relative;
    width: 60%;
}

.classesCalendar-embedLink {
    margin: 25px auto 0 auto;
    position: relative;
}

/* Classes Edit Modal */

.classesList-editClassModal .Badge {
    left: -3px;
    margin-left: 0;
}

.classesList-reservationLine {
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 10px;
}

.classesList-editClassModalContainer .ModalContainer,
.classesList-editClassModalContainer .ModalScrollWrapper {
    margin-top: 0;
    overflow: visible !important;
}

.phone .classesList-editClassModalContainer .ModalContainer,
.phone .classesList-editClassModalContainer .ModalScrollWrapper {
    overflow: scroll !important;
}

.classesList-editClassModalContainer .ModalContainer .ModalHeader {
    position: relative;
}

.ModalContainer .ModalContent .classesList-reservationLine div:nth-child(1) > span > a.Button {
    margin-bottom: 0;
}

/* Public Calendar Page */

.classesCalendar-publicCalendarContainer {
    background: #fff;
    padding: 20px;
}

.classesCalendar-publicCalendarContainer .classesCalendar-filters .UnderlineInput:last-child {
    margin-bottom: 15px;
}

.classesCalendar-publicCalendarContainer .classesCalendar-filters {
    min-width: auto;
}

.classesCalendar-publicCalendarContainer .calendar-balloonsContainer.ThemeGrid_MarginGutter {
    margin-left: 0;
}

.classesCalendar-publicCalendarContainer .publicCalendar-programList {
    max-width: 150px;
    overflow: hidden;
}

@media only screen and (max-width: 930px) {
    .classesCalendar-publicCalendarContainer .classesCal-container .fc-header-toolbar .fc-center {
        margin-left: 150px;
    }
}

@media only screen and (max-width: 700px) {
    .classesCalendar-publicCalendarContainer .classesCal-container {
        margin-top: 20px;
    }
    .classesCalendar-publicCalendarContainer .classesCal-container .fc-header-toolbar .fc-center {
        float: left;
        margin-left: 0;
    }
}

/*------------------------------------*\
        Gym > Locations Page
\*-------------------------------------*/

.app-img-section .section-title {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 400;
    max-width: 90%;
    padding: 16px 0;
}

.app-img-section .section-title .Heading3 {
    border-bottom: 1px solid #e0e0e0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.app-img-section .EditInline_Wrapper .ExpandableContent {
    padding: 25px 32px 25px 32px;
}

/* - - -  - - - - - - - - - - -
    Upload widget Customization
- - - - - - - - - - - - - - - - */

.app-img-section .upload-widget-wrapper {
    margin-top: 24px;
}

.app-img-section .upload-widget-wrapper .qq-uploader {
    display: flex;
    height: 36px;
    width: 100%;
}

/* Exception to hide always this element. */

.app-img-section .upload-widget-wrapper .qq-upload-drop-area {
    display: none;
    opacity: 0;
}

.app-img-section .upload-widget-wrapper .qq-upload-button {
    margin: 0;
}

.app-img-section .upload-widget-wrapper .qq-upload-button input {
    max-width: 105px;
}

.app-img-section .upload-widget-wrapper .qq-upload-button a {
    margin-left: 0;
}

.app-img-section .upload-widget-wrapper .qq-upload-list {
    color: rgba(0, 0, 0, 0.5);
    list-style: none;
    margin: 0;
    padding: 4px 4px 4px 16px;
}

/* Upload feedback area */

.app-img-section .upload-widget-wrapper .qq-upload-file {
    display: block;
    font-weight: 600;
}

.app-img-section .upload-widget-wrapper .qq-upload-spinner {
    opacity: 0.5;
}

/* Cropper Modal to edit pictures */

.jumbo-cropper.custom-cropper .cropit-default-container {
    height: auto;
    transition: all 0.3s;
}

.jumbo-cropper.custom-cropper .cropit-default-container .cropit-container {
    height: 100%;
    margin-bottom: 16px;
    min-height: 320px;
}

.jumbo-cropper.custom-cropper .cropit-preview-image-container {
    border: 1px solid #dcdcdc;
}

.jumbo-cropper.custom-cropper .cropit-actions:before {
    bottom: -50px;
    color: rgba(0, 0, 0, 0.5);
    content: "Zoom";
    font-size: 12px;
    height: 20px;
    left: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 186px;
}

.jumbo-cropper.custom-cropper .cropit-actions {
    position: relative;
}

.cropper-loading.show-loading .LateLoadSpinner {
    bottom: 10px;
    color: rgba(0, 0, 0, 0.5);
    display: block;
    left: calc(50% - 83px);
    position: absolute;
    z-index: 10;
}

.jumbo-cropper.custom-cropper .cropper-loading.show-loading .cropit-actions,
.jumbo-cropper.custom-cropper .cropper-loading.show-loading .action-buttons {
    opacity: 0.5;
    pointer-events: none;
    transition: all 0.3s;
}

/*------------------------------------*\
    Shared Payments
\*------------------------------------*/

.sharedPayments-sharedUsersAvatarList {
    box-sizing: border-box;
    padding: 5px 8px;
}

.sharedPayments-sharedUserAvatar {
    border: 2px solid #ffffff;
    border-radius: 24px;
    box-sizing: content-box;
    display: inline-block;
    height: 24px;
    position: relative;
    width: 24px;
}

.sharedPayments-sharedUserAvatar--last {
    background-color: #d8d8d8;
    box-sizing: border-box;
    color: #666666;
    height: 28px;
    min-width: 28px;
    padding: 2px 4px;
    text-align: center;
    top: 2px;
    width: auto;
}

.sharedPayments-sharedUserAvatar img {
    height: 24px;
    width: 24px;
}

.sharedPayments-ownedByLabel {
    background-color: rgba(153, 153, 153, 0.2);
    color: #000;
    display: inline-block;
    font-family: "Source Sans Pro";
    font-size: 11px;
    line-height: 16px;
    opacity: 0.5;
    padding: 4px 6px;
    text-transform: uppercase;
    width: auto;
}

/*Shared payments - Custom Modal*/

.sh-paym-table {
    margin-bottom: 120px;
}

.Modal.WodifyModal.sharedPay-modal .ModalContent,
.Modal.WodifyModal.sharedPay-modal .ModalFooter {
    padding: 8px 16px 16px;
}

.desktop .Modal.WodifyModal.sharedPay-modal .ModalContainer .ModalScrollWrapper,
.desktop .Modal.WodifyModal.sharedPay-modal .ModalContainer {
    overflow: initial !important;
    overflow-y: initial !important;
}

.desktop .Modal.WodifyModal.sharedPay-modal .ModalContainer {
    min-width: 620px;
}

.sh-paym-modal {
    color: rgba(0, 0, 0, 0.7);
}

/* -- Modal Header --*/

.sh-paym-modal .paym-method {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 24px;
}

.tablet .sh-paym-modal .paym-method,
.phone .sh-paym-modal .paym-method {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px;
}

.sh-paym-modal .paym-method.active {
    background-color: #eae8f1;
}

.sh-paym-modal .paym-method .paym-card-number {
    align-items: center;
    display: flex;
}

.tablet .sh-paym-modal .paym-method .paym-card-number,
.phone .sh-paym-modal .paym-method .paym-card-number {
    justify-content: center;
    width: 100%;
}

.sh-paym-modal .paym-method .paym-icon {
    font-size: 24px;
}

.sh-paym-modal .paym-method.active .paym-icon {
    color: #623b90;
}

.sh-paym-modal .paym-method .paym-type {
    padding: 0 16px;
}

.phone .sh-paym-modal .paym-method,
.tablet .sh-paym-modal .paym-method {
    padding: 8px 4px;
}

.phone .sh-paym-modal .paym-method .paym-type,
.tablet .sh-paym-modal .paym-method .paym-type {
    padding: 0 16px 0 8px;
}

.phone .sh-paym-modal .paym-method .paym-card-number .cc-number,
.tablet .sh-paym-modal .paym-method .paym-card-number .cc-number {
    margin-left: -8px;
}

.sh-paym-modal .paym-method .paym-type,
.sh-paym-modal .paym-method .paym-card-number,
.sh-paym-modal .paym-method .paym-card-expiration .paym-card-expiration-date {
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
}

.sh-paym-modal .paym-method .paym-card-number .cc-number {
    align-items: center;
    display: flex;
}

.sh-paym-modal .paym-method .paym-card-number .cc-number .cc-hidden-digits {
    padding: 8px 8px 0 0;
}

.sh-paym-modal .paym-method .paym-card-number .account-lastDigits {
    position: relative;
}

.sh-paym-modal .paym-method .paym-card-number .account-lastDigits:before {
    content: "-";
    left: -11px;
    position: absolute;
    top: 0;
}

.sh-paym-modal .paym-method .paym-card-expiration {
    align-items: center;
    display: flex;
    padding-left: 88px;
}

.tablet .sh-paym-modal .paym-method .paym-card-expiration,
.phone .sh-paym-modal .paym-method .paym-card-expiration {
    justify-content: center;
    padding-left: 0;
    padding-top: 4px;
    width: 100%;
}

.sh-paym-modal .paym-method .paym-card-expiration .paym-card-expiration-date {
    padding-left: 20px;
}

.tablet .sh-paym-modal .paym-method .paym-card-expiration .paym-card-expiration-date,
.phone .sh-paym-modal .paym-method .paym-card-expiration .paym-card-expiration-date {
    padding-left: 4px;
}

/* -- Modal Container --*/

.sh-paym-modal-container {
    padding-top: 8px;
}

/* List of selected Users to share payment */

.sh-paym-modal-container .sh-paym-default-indicator {
    font-weight: 600;
    margin: 16px 0 4px 0;
    padding-right: calc(5% + 40px);
    text-align: right;
}

.tablet .sh-paym-modal-container .sh-paym-default-indicator,
.phone .sh-paym-modal-container .sh-paym-default-indicator {
    display: none;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user {
    border: 1px solid #ccc;
    margin-bottom: 4px;
    position: relative;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-main-box {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 8px;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-main-box,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-main-box {
    flex-direction: column;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-main-box,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-main-box {
    align-items: stretch;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user.disabled {
    background: rgba(204, 204, 204, 0.3);
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.sh-paym-modal-container .ListRecords .sh-paym-user-error {
    align-items: center;
    display: flex;
    font-size: 12px;
    font-style: initial;
    padding: 4px 16px 8px 16px;
    text-align: center;
    width: 100%;
}

.sh-paym-modal-container .ListRecords .sh-paym-user-error .icon {
    font-size: 22px;
}

.sh-paym-user-error .calendarBalloon-coachName {
    color: inherit;
    color: inherit;
    font-weight: 600;
    overflow: initial;
    padding: 0;
    text-transform: capitalize;
}

.sh-paym-modal-container .ListRecords > .sh-paym-modal-sh-user .sh-user {
    align-items: center;
    display: flex;
    overflow-x: hidden;
    width: 65%;
}

.tablet .sh-paym-modal-container .ListRecords > .sh-paym-modal-sh-user .sh-user,
.phone .sh-paym-modal-container .ListRecords > .sh-paym-modal-sh-user .sh-user {
    justify-content: center;
    width: 100%;
}

.tablet .sh-paym-modal-container .ListRecords > .sh-paym-modal-sh-user .sh-user,
.phone .sh-paym-modal-container .ListRecords > .sh-paym-modal-sh-user .sh-user {
    justify-content: flex-start;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user.disabled .sh-user,
.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user.disabled .sh-combo {
    opacity: 0.5;
    pointer-events: none;
}

.sh-paym-modal-container .sh-paym-modal-sh-user .sh-user .sh-user-pic img {
    border-radius: 50%;
    height: 38px;
    width: 38px;
}

.tablet .sh-paym-modal-container .sh-paym-modal-sh-user .sh-user .sh-user-pic img,
.phone .sh-paym-modal-container .sh-paym-modal-sh-user .sh-user .sh-user-pic img {
    height: 30px;
    width: 30px;
}

.sh-paym-modal-container .sh-paym-modal-sh-user .sh-user .sh-username {
    font-size: 17px;
    padding: 0 16px 0 16px;
}

.tablet .sh-paym-modal-container .sh-paym-modal-sh-user .sh-user .sh-username,
.phone .sh-paym-modal-container .sh-paym-modal-sh-user .sh-user .sh-username {
    font-size: 14px;
    padding: 0 8px;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo {
    min-width: 200px;
    padding-right: 8px;
    text-align: right;
    width: 30%;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo {
    padding: 8px 0 0 0;
    text-align: center;
    width: 100%;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo {
    width: 80%;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo select {
    max-width: 200px;
    width: 100%;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo select,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .sh-combo select {
    max-width: 100%;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user {
    font-size: 14px;
    text-align: right;
    width: 5%;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user {
    bottom: 10px;
    left: 84%;
    position: absolute;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user .icon {
    font-size: 28px;
    line-height: 32px;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user a {
    line-height: 32px;
    width: 100%;
}

.sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user a .icon {
    padding-top: 8px;
}

.tablet .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user a .icon,
.phone .sh-paym-modal-container .ListRecords .sh-paym-modal-sh-user .edit-sh-user a .icon {
    margin-bottom: -4px;
}

/*People Finder widget*/

.sh-paym-modal-container .sh-paym-modal-pfinder {
    margin-bottom: 60px;
    margin-top: 36px;
}

.sh-paym-modal-container .sh-paym-modal-pfinder .peopleFinder-container {
    max-width: 100%;
}

/*------------------------------------*\
    User Group
\*------------------------------------*/

.userGroup-banner {
    padding: 22px 24px;
}

.userGroup-bannerText {
    color: #666;
}

.userGroup-bannerAddContainer {
    padding: 30px 0 10px 0;
    position: relative;
    z-index: 1;
}

.userGroup-bannerAddText {
    color: #666;
    display: inline-block;
    margin: 0 16px 0 0;
}

.userGroup-bannerPeopleFinder {
    display: inline-block;
    width: 240px;
}

.userGroup-listAddContainer {
    align-items: center;
    display: flex;
    margin-top: 10px;
}

.userGroup-listAddContainer > * {
    display: inline-block;
}

.userGroup-listPeopleFinder {
    width: 270px;
}

.userGroup-listPeopleContactsRecipient {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.userGroup-listAddOr {
    color: #666;
    font-size: 13px;
    line-height: 16px;
    padding: 4px 34px;
}

.userGroup-list .Button {
    margin-left: 0;
}

.userGroup-list .TableRecords .noteText {
    display: block;
    font-size: 9px;
    padding-top: 5px;
    text-transform: uppercase;
}

.userGroup-athleteModal-dependentContainer {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.userGroup-athleteModal-dependentLabel {
    color: #8e8e8e;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.userGroup-athleteModal-groupContainer {
    padding-bottom: 20px;
}

.userGroup-athleteModal-groupContainer .notesContainer {
    color: #000;
    display: block;
    font-size: 13px;
    margin-top: 16px;
    padding: 14px 20px;
}

.userGroup-athleteModal-groupContainer .addPeopleContainer {
    margin-top: 16px;
}

.userGroup-athleteModal-groupContainer .Hidden.notesContainer {
    display: none;
}

.userGroup-athleteModal-groupContainer .peopleFinder-container {
    max-width: 100%;
}

/* User Group phone styles */

.phone .userGroup-listAddContainer,
.phone .userGroup-listPeopleFinder,
.phone .userGroup-listAddContainer > .Button {
    display: block;
    width: 100%;
}

.phone .userGroup-listAddOr {
    display: block;
    padding: 12px 0;
    text-align: center;
}

/*Used on AdminWaivers>WaiverTemplates to tooltip "Link copied" */

.waiverTableList div.CopiedToClipboard {
    left: -50%;
}

/* Class to fix an issue with the ios back button: WDFY-3885*/

.iosBackButtonFix {
    background-color: #ffffff;
}

.iosBackButtonFix .wodify-nav {
    background-color: transparent;
}

.iosBackButtonFix .Header {
    z-index: 1;
}

/*------------------------------------*\
    CloudSearch
\*------------------------------------*/

.CloudSearch {
    width: 100%;
}

.CloudSearch .Columns2 > .Column {
    width: 100%;
}

.CloudSearch .Columns2 .ColLast {
    display: none;
}

.CloudSearch__grid {
    padding: 0 15px;
}

.CloudSearch__grid .ThemeGrid_Width6 {
    width: 100%;
}

.CloudSearch__grid__row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -30px;
    margin-right: -30px;
}

.CloudSearch__grid__row.align-items-center {
    align-content: center;
    align-items: center;
}

.CloudSearch__grid__row.align-items-end {
    align-content: flex-end;
    align-items: flex-end;
}

.CloudSearch__grid__row:first-child {
    margin-top: -30px;
}

.CloudSearch__grid__col {
    flex-basis: 0;
    flex-grow: 1;
    margin-top: 30px;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.CloudSearch__grid__col.CloudSearch__grid__col--two {
    flex: 0 0 50%;
    max-width: 50%;
}

.CloudSearch__grid__col.CloudSearch__grid__col--three {
    flex: 0 0 33.33%;
    max-width: 33.33%;
}

.CloudSearch__grid__col.CloudSearch__grid__col--auto {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

.CloudSearch__grid__col.CloudSearch__grid__col--auto ~ .CloudSearch__grid__col {
    max-width: 50%;
    order: -1;
}

.CloudSearch__grid .EditInline_Wrapper {
    height: 100%;
    overflow: hidden;
}

.CloudSearch .SectionExpandable_content {
    padding-top: 30px;
}

.CloudSearch__input-wrap {
    display: block;
}

.CloudSearch__input-wrap select,
.CloudSearch__input-wrap textarea,
.CloudSearch__input-wrap input {
    max-width: 100%;
    width: 100%;
}

.CloudSearch__input-wrap input[type="text"] {
    width: 100% !important;
}

.CloudSearch__input-wrap label {
    margin-bottom: 10px;
}

.CloudSearch__input-wrap + .CloudSearch__input-wrap {
    margin-top: 15px;
}

.CloudSearch__input--inline,
.CloudSearch__label--inline {
    display: inline-block;
    vertical-align: top;
}

.CloudSearch__label--inline {
    line-height: 24px;
}

/* cloudsearch modals overwrites */

.CloudSearch .ModalContent {
    min-height: 80px;
    padding-bottom: 30px;
}

.CloudSearch .ModalFooter {
    padding: 0;
}

.CloudSearch .ModalContent div[id*="_wtModalContent_wtdivAthleteSelectSync"] {
    margin-top: 16px;
}

.CloudSearch .ModalContent div[id*="_wtdivButtons"] {
    margin-bottom: 0 !important;
    margin-top: 32px;
    text-align: right;
}

.CloudSearch .ModalContent .Button {
    display: inline-block;
    margin-left: 0;
}

.CloudSearch .ModalContent .selectize-dropdown-content {
    max-height: 80px;
}

/*
// Menu WDS
*/
.MainContent > div {
    border-radius: 2px;
    box-shadow: none;
}

.wodify-nav {
    background-color: transparent;
    box-shadow: none;
}

.Menu .Menu_TopMenu .Menu_DropDownArrow {
    display: none;
}

.menu_quick-actions {
    -webkit-align-content: center;
    align-content: center;
    background-color: #f3f4f8;
    bottom: 0;
    -webkit-box-pack: justify;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    left: 0;
    max-width: 240px;
    padding: 8px 16px;
    position: fixed;
    width: 100%;
    z-index: 99;
}

.tablet .menu_quick-actions,
.phone .menu_quick-actions {
    -webkit-transform: translateX(-240px);
    -ms-transform: translateX(-240px);
    transform: translateX(-240px);
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: 12;
}

.tablet.MenuOpen .menu_quick-actions,
.phone.MenuOpen .menu_quick-actions {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.menu_quick-actions__item {
    color: #94909c;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.menu_quick-actions__item .LoginInfo_username {
    border-radius: 50%;
    height: 24px;
    overflow: hidden;
    width: 24px;
}

.menu_quick-actions__item .icon,
.menu_quick-actions__item img {
    color: #94909c;
    fill: #94909c;
    height: 24px;
    margin: 8px;
    width: 24px;
}

.menu_quick-actions__item .IconBadge {
    margin: 0;
}

.desktop .fixed-help {
    -webkit-align-items: center;
    align-items: center;
    background: #fff;
    border-radius: 56px;
    bottom: 16px;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    height: 56px;
    -webkit-justify-content: center;
    justify-content: center;
    position: fixed;
    right: 32px;
    width: 56px;
    z-index: 101;
}

.fixed-help svg {
    color: #4d475b;
}
.fixed-help ~ .fixed-help {
    margin-right: 64px;
}
.desktop .fixed-help .help-text-mobile {
    display: none;
}

.tablet .fixed-help,
.phone .fixed-help {
    display: none;
}
/* .tablet .fixed-help,
.phone .fixed-help {
  position: fixed;
  left: 0;
  bottom: 60px;
  width: 240px;
  padding: 8px 8px 8px 24px;
  background-color: #f3f4f8;
  display: flex;
  z-index: 12;
  align-items: center;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform: translateX(-240px);
  -ms-transform: translateX(-240px);
  transform: translateX(-240px);
} */

/* .tablet.MenuOpen .fixed-help,
.phone.MenuOpen .fixed-help {
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.phone .fixed-help .icon,
.tablet .fixed-help .icon {
  margin-right: 16px;
}

.phone .fixed-help .help-text-mobile,
.tablet .fixed-help .help-text-mobile {
  display: inline-block;
  color: #94909C;
} */

/* mobile and tablet */

.menu_mobile-overlay {
    background-color: rgba(77, 71, 91, 0.3);
    display: none;
    
    height: 100vh;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 200;
    z-index: 19;
}

.tablet.MenuOpen .menu_mobile-overlay,
.phone.MenuOpen .menu_mobile-overlay {
    display: block;
}

.notify::before {
    background-color: #f22c7c;
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(10px, -17px);
    -ms-transform: translate(10px, -17px);
    transform: translate(10px, -17px);
    width: 8px;
}

.app-switcher-btns {
    -webkit-box-pack: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 16px 24px 0;
}

.app-switcher-btns a {
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    -ms-flex-pack: left;
    height: 56px;
    -webkit-justify-content: left;
    justify-content: left;
    margin-bottom: 8px;
    width: 132px;
}

.app-switcher-btns a:hover {
    background-color: #edecee;
    text-decoration: none;
}

.quick-actions-list-item a {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    color: #4d475b;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    font-size: 16px;
    padding: 8px 24px;
}

.quick-actions-list-item .icon:first-child {
    margin-right: 16px;
}

.quick-actions > div:last-child a {
    margin-bottom: 0;
}

.quick-actions-list-item a:hover {
    background-color: #edecee;
    text-decoration: none;
}

.LoginInfo_username_text a {
    color: #303131;
    font-size: 18px;
}

.WdsBalloon .Balloon_content {
    padding: 0 0 8px 0;
}

.WdsBalloon .Balloon {
    border: 0;
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
}

.HelpBalloon .Balloon {
    width: 320px;
}

.phone .HelpBalloon .Balloon {
    max-width: 100%;
}

.system-status {
    background-color: #81d1a3;
    border-radius: 50%;
    height: 8px;
    max-width: 8px;
    width: 8px;
}

.help-balloon-title {
    color: #4d475b;
    font-size: 22px;
    font-weight: 600;
    line-height: 29px;
}

.mx-2 {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.mx-3 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.mx-4 {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

.px-2 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.px-3 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.px-4 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

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

.text-primary {
    color: #833adf !important;
}

/* WodifyAdminTheme - AdminWaivers
-------------------------------------------------------------------*/

/* SignedWaiverContainer theme */

.SignedWaiverContainer .TermsContainer,
.SignedWaiverContainer .TermsContainer p,
.SignedWaiverContainer .TermsContainer p span {
    color: #000 !important;
}
.SignedWaiverContainer .TermsContainer a,
.SignedWaiverContainer .TermsContainer p a,
.SignedWaiverContainer .TermsContainer .InitialCount {
    color: #5d3e92 !important;
}

/* WodifyAdminTheme - Drodpdown without border 
-------------------------------------------------------------------*/
.select-primary {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAGRJREFUSEtjZKAxYKSx+QyjFhAM4dEgGulB1Gx1v56BgaGBQDg01B5TbMSlhmAqImAJXsNBlhK0AKQIhyUEDSfaAiyWEGU4SRYgWcKAL8zR44KoICKY2PEoGLWAYOiNBtEICCIArZMYGcD2aosAAAAASUVORK5CYII=") !important;
    background-size: 21px;
    border: none;
    color: #833adf;
    font-weight: 400;
    min-width: 50px;
    position: relative;
    text-align: right;
    width: auto;
}

.select-primary option {
    color: #000;
}

/* WodifyAdminTheme -Cutomer In App chat Settings
-------------------------------------------------------------------*/

.inappchat-settings__chat-storage {
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 15px;
    position: relative;
}
.phone .inappchat-settings__chat-storage {
    border: 0px;
}

.inappchat-settings__chat-storage .Progress {
    border-radius: 10px;
}

.inappchat-settings__chat-storage .Progress_bar {
    background-color: #5d3e92;
    border-radius: 10px;
}

/* Navigation Expand/Collapse 
-------------------------------------------------------------------*/
.no-transition {
    transition: none !important;
}

.wodify-nav {
    background-color: #edeef2;
    border-right: solid 1px #dbdade;
    transition: transform 300ms;
}

.menu_quick-actions {
    background-color: #edeef2;
    border-right: solid 1px #dbdade;
    transition: 300ms;
    padding-right: 14px;
}

.desktop .sidebar-toggle__wrapper {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: center;
    left: 220px;
    position: fixed;
    top: 10px;
    transition: transform 300ms;
    width: 40px;
    z-index: 400;
}

.desktop .sidebar-toggle {
    align-items: center;
    background-color: #f3f4f8;
    border: solid 1px #dbdade;
    border-radius: 100%;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.desktop .sidebar-toggle svg {
    color: #833adf;
    height: 16px;
    width: 16px;
}

.desktop .sidebar-toggle:hover {
    background-color: #edeef2;
}

.desktop .sidebar-toggle svg:hover {
    cursor: pointer;
}

.desktop .invisible-toggle {
    height: 40px;
    width: 40px;
    display: none;
    background: transparent;
    border: 0;
    position: absolute;
    left: 220px;
    z-index: 500;
    top: 10px;
}

/*  Menu Collapsed  */
.desktop.menu--collapsed .Menu_SubMenuItem.Menu_SubMenuItemActive {
    background-color: transparent;
}

.desktop.menu--collapsed .Menu .scroll-area,
.desktop.menu--collapsed .menu_quick-actions {
    padding-right: 40px;
}

.desktop.menu--collapsed .wodify-nav,
.desktop.menu--collapsed .menu_quick-actions,
.desktop.menu--collapsed .sidebar-toggle__wrapper {
    transform: translateX(-210px);
}

.desktop.menu--collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.desktop.menu--collapsed .Content.ThemeGrid_Wrapper,
.desktop.menu--collapsed .Header,
.desktop.menu--collapsed .top {
    margin-left: 120px;
}

/*  Menu OnHover  */
.desktop.menu--hover .Menu_SubMenuItem.Menu_SubMenuItemActive {
    background-color: #fff;
}

.desktop.menu--hover .Menu .scroll-area {
    padding-right: 14px;
    transition: padding 300ms 300ms;
}

.desktop.menu--hover .menu_quick-actions {
    padding-right: 14px;
    transform: translateX(0px);
    transition: 300ms 300ms;
}

.desktop.menu--hover .wodify-nav {
    padding-right: 0;
    transform: translateX(0);
    transition: 300ms 300ms;
}

.desktop.menu--hover .sidebar-toggle__wrapper {
    pointer-events: none;
    transform: translateX(0);
    transition: transform 300ms 300ms;
}

.desktop.menu--hover .sidebar-toggle svg {
    transition: transform 300ms 300ms;
}

.desktop.menu--hover .invisible-toggle {
    display: block;
    cursor: pointer;
}