html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}
body::-webkit-scrollbar {
  width: 5px !important;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
::-webkit-input-placeholder {
    font-size: 13px ;
    color: #bbb;
}
@keyframes backgroundinvert {
        0%   { background-color: #fff }
        50%   { background-color: #EB889F }
        100%   { background-color: #fff }
}
@keyframes backgroundinvertodd {
        0%   { background-color: #f00 }
        50%   { background-color: #EB889F }
        100%   { background-color: #f00 }
}
@keyframes blink2 {
        0%   { transform: scale(1);}
        60%   { transform: scale(1.1); box-shadow: 0px 0px 35px #429ED6; }
        100%   { transform: scale(1) }
}
@keyframes blink3 {
        0%   { transform: scale(1);}
        60%   { transform: scale(1.1); opacity: 0; }
        100%   { transform: scale(1) }
}

@keyframes blink {
        0%   { transform: scale(1) translateX(10px)}
        60%   { transform: scale(1) }
        100%   { transform: scale(1) }
}

@keyframes blinktext {
        0%   { color: #111 }
        50%   { color: #999}
        100%   { color: #111 }
}
@keyframes blinkbackground {
        0%   { color: #fff }
        50%   { color: #f00}
        100%   { color: #fff }
}

@keyframes doublespin {
    0% {transform: rotateY(0deg); background-color: #da4733; }
    49% {transform: rotateY(360deg); background-color: #3b78e7; }
    50% {transform: rotateX(360deg); background-color: #fdba2c; }
    100% {transform: rotateX(0deg); background-color: #fdba2c; }
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }

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

@keyframes Loading {
    from {
        transform: translateX(0px);
        opacity: 1;
    }

    to {
        transform: translateX(570px);
        opacity: 0;
    }
}

@keyframes Updating {
    0% {
        transform: scale(1);
        opacity: 0;
        color: #fff;
    }

    70% {
        transform: scale(1);
        opacity: 1;
           color: #fff;

    }
    90% {
        transform: scale(1);
        opacity: 1;

    }

    100% {
        transform: scale(1);
        opacity: .5;
        color: rgb(140 0 255 / 100%)
    }
}

@keyframes Saving {
    from {
        background-color: #282828;
    }

    to {
        background-color: var(--blue);
    }
}

@keyframes changerecordtype1 {
    0% {
        transform: rotateY(0deg);
    }

    40% {
        transform: rotateY(-90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes changerecordtype2 {
    0% {
        transform: rotateY(0deg);
    }

    40% {
        transform: rotateY(-90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes changerecordtype3 {
    0% {
        transform: rotateY(0deg);
    }

    40% {
        transform: rotateY(-90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes LoadingBarAni {
    0% {
        transform: translateX(0px);
    }

    40% {
        transform: translateX(300px);
    }

    100% {
        transform: translateX(1024px);
    }
}

@keyframes buttoninaction {
    0% {
    }

    100% {
        background-color: transparent;
        outline: 1px dotted #999;
        color: #999;
    }
}

@font-face {
    font-family: "helveticanew";
    src: url("Font/firasans-regular-webfont.woff");
}

@font-face {
    font-family: "helveticanew";
    src: url("Font/HelveticaNeue2.ttf");
}

@font-face {
    font-family: "robotolight";
    src: url("Font/Roboto-Light.ttf");
}

@font-face {
    font-family: "robocond";
    src: url("Font/RobotoCondensed-Light.ttf");
}

@font-face {
    font-family: sfbold;
    src: url('Font/System_San_Francisco_Display_Bold.ttf');
}

@font-face {
    font-family: sfmedium;
    src: url('Font/System_San_Francisco_Display_Medium.ttf');
}

@font-face {
    font-family: sfregular;
    src: url('Font/System_San_Francisco_Display_Regular.ttf');
}

@font-face {
    font-family: sfthin;
    src: url('Font/System_San_Francisco_Display_Thin.ttf');
}

@font-face {
    font-family: sflight;
    src: url('Font/System_San_Francisco_Display_Ultralight.ttf');
}

@font-face {
    font-family: sftextbold;
    src: url('Font/System_San_Francisco_Text_Bold.ttf');
}

@font-face {
    font-family: sftextheavy;
    src: url('Font/System_San_Francisco_Text_Heavy.ttf');
}

@font-face {
    font-family: sftextmedium;
    src: url('Font/System_San_Francisco_Text_Medium.ttf');
}

@font-face {
    font-family: sftextregular;
    src: url('Font/System_San_Francisco_Text_Regular.ttf');
}

@font-face {   
    font-family: sftextthin;
    src: url('Font/System_San_Francisco_Text_Thin.ttf');
}

@font-face {
    font-family: "robotocondensed";
    src: url("Font/Roboto-Condensed.ttf");
}

@font-face {
    font-family: "robotolight";
    src: url("Font/Roboto-Light.ttf");
}

@font-face {
    font-family: "robotolight";
    src: url("Font/RobotoCondensed-Light.ttf");
}

input {
    /* -webkit-appearance: none; */
    font-family: inherit;
}

select {
    -webkit-appearance: none;
    font-family: inherit;

}

textarea {
    -webkit-appearance: none;
    box-sizing: border-box;
    font-family: inherit;
}

body {
    /*  display: none; */
    transition: transform .7s;
    margin: 0;
    /*--default-font: robotocondensed;*/
/*     --default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;  */
/*     --default-font: arial; */
/*     --default-font-light: robotolight;  */
    --default-font: "Proxima Nova", Helvetica, Arial, sans-serif;
    --form-comment-color: #aaa; 
    --form-label-view-color: rgb(112,112,112); 
    --form-label-color: rgb(112,112,112); 
    --form-input-color: #313134; 
    --list-font-color: #555; 
    --input-form-size: 14px; 
    --leftmenu-font-size: 17px; 
    --moduletitle-font-size: 22px; 
    --body-background-color: #fff; 
    /*  --leftbar-background-color: #484D51; */
    --leftbar-background-color: #1A2436;
    --leftbar-background-color-dark: #161E2E;
    --leftbar-background-image: none;
    --list-header-bgcolor: #e0e0e0;
    --list-header-color: #444;
/*     --orange: #DA7A57; */
    --orange: #FBA748;
    --orange1: #c77415;
    --orangedark: #ab5e05;
    --lightblue: #44AADF;
    --blue: #0086dd;
/*     --blue1: #44AADF; */
    --blue1: #009EFC;
    --blue2: #2769EE;
    --red: #FC6157;
    --red2: #d3271c;
    --black: #1F232C;
    --gray: #808080;
    --light-green: #d2f5e4;
    --green1: #21C977;
    --green2: #54986E;
    --green4: #386d38;
/*     --green: #89C7A0; */
    --green: #3CC874;
    --greenbright: #19ce19;
/*     --light-yellow: #EDDAA5; */
    --yellow: #fdba2c;
    --light-yellow: #f7f1d2;;    
    --input-border-color: #ddd;
    --purple: #9B62DB;
    --purple2: #7a2ed0;
    --markcolor1: #FA4B20;
    --markcolor2: #476A86;
    --markcolor3: #DF790B;
    --markcolor4: #B2BD83;
    --markcolor5: #18b4da;
    --markcolor6: #f4e78e;
    --markcolor7: #F6BC1A;
    --markcolor8: #e72186;
    --markcolor9: #8c5e41;
    --markcolor10: #21c977;
    --markcolor11: #999;
    --markcolortext1: #fff;
    --markcolortext2: #fff;
    --markcolortext3: #fff;
    --markcolortext4: #666;
    --markcolortext5: #fff;
    --markcolortext6: #666;
    --markcolortext7: #666;
    --markcolortext8: #fff;
    --markcolortext9: #fff;
    --markcolortext10: #fff;
    --markcolortext11: #666;
    --markcolortext12: #fff;

    font-family: var(--default-font) !important;
    background-color: var(--body-background-color);
    /*background-image: url(ImgObjects/blackbackground.jpg);*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
}

.appskindark {
    --form-label-color: #444; --form-label-view-color: #666; --form-label-color: #111; --form-input-color: #111; --leftbar-background-image: ImgObjects/backgroundbrown.jpg; --leftbar-background-color: #616161; }

.appskinbold {
    --form-label-color: #444; --form-label-view-color: #666; --list-font-color: #333; --form-label-color: #111; --form-input-color: #111; --default-font: sfregular; --input-form-size: 16px; --leftmenu-font-size: 16px; --moduletitle-font-size: 18px; --list-header-bgcolor: #818180; --list-header-color: #fff; }

.appskincolor {
    --form-label-color: #444; --form-label-view-color: #666; --list-font-color: #333; --form-label-color: #111; --form-input-color: #111; --default-font: sfregular; --input-form-size: 16px; --leftmenu-font-size: 16px; --moduletitle-font-size: 18px; --list-header-bgcolor: #818180; --list-header-color: #fff; --left-bar-bgdimg: url(ImgObjects/greenbar.jps) }

html,body {
    height: 100%;
    overflow: hidden; 
}

body * {
    /* user-select: none; */

}

/*body > div {
    display: none;
}
*/
body .FormElement * {
    user-select: auto;
}

body .FormElement > div {
    transition: padding 1s, border 1s;
    box-shadow: none;
    font-size: var(--input-form-size);
    color: var(--form-input-color);
    padding: 7px 0px;
    padding-left: 5px;
    padding-right: 5px;
    outline: none;
    font-family: inherit;
}

body .TicketDetailBox * {
    user-select: auto;
}
.textbutton {
    color: var(--blue);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
}


.textbutton {
    color: var(--blue);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.textbutton:hover {
    color: #fff;
    background-color: lightblue;
    border-radius: 10px;
    border: none;

}

.Button {
    height: 30px;
    padding: 0px 25px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    line-height: 30px;
    border-radius: 2px;
    display: inline-block;
    text-transform: capitalize;
    margin: 10px 0px;
    margin-right: 10px;
}

.Button:hover {
    outline: 1px solid #888;
}


group {
    /*  padding-top: 15px; */
    /*  border-top: 1px dotted #ccc; */
    position: relative;
    /* margin-top:35px; */
    display: inline-block;
}

.ListArea .List {
    position: relative;
    height: 100%;
/*     height: calc(100% - 50px); */
    overflow-y: auto;
    padding-bottom: 0px;
    overflow-x: hidden;
    will-change: transform;
    transform: perspective(1px) translateZ(0);
    /* border: 1px solid red; */
    content-visibility: auto;
}

/*.LoadingAnimationBox {
    will-change: transform;
}*/
.ListArea .List * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

form .List {
    margin: 15px 0px;
}

form .List .ListItem:nth-child(odd) {
    background-color: inherit;
}

body input, select, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body div[contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.LeftBar {
/*     background-color: #313132 !imp; */
}
.MenuBar * {
    user-select: none;         
}
.PageContentArea {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    font-family: inherit;
    top: 0px;
    left: 0px;
    bottom: 0px;
    /*  min-height:950px; */
/*     overflow: hidden; */
}
body.NotificationPersistentTopActive .PageContentArea {
    top: 44px;
}

.ModuleArea {
    will-change: left;
    transition: left .65s;
    left: -2800px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    max-width: 1920px; 
    background-color: #Fff;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    perspective: 800px;
}
.ShowList {
    background-color: #fff;
}
.appskincolor .LeftBar {
    background-image: url(ImgObjects/greenbar.jpg);
}

.ModuleArea .ToolBar {
/*     border-bottom: 1px solid #fff; */
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    z-index:10000;
}

.ModuleArea .ToolBar .MenuBar {
    padding: 0px 0px;
    line-height: 50px;
    height: 50px;
    font-size: 0px;    
}
.ModuleArea .ToolBar .MenuBar .MenuItem {
/*     font-size: 14px; */
}

.MenuItem {
    display: inline-block;
    padding: 0px 15px;
    color: #888;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    vertical-align: middle;
    min-width: 60px;
    background-size: auto 40% !important;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    /* opacity: .5; */
    transition: opacity .7s, transform .5s, background-color 1s;
    text-transform: capitalize;
    /* border: 1px solid red; */
}

div.MenuItem:active {
    box-shadow: 0px 0px 10px var(--blue);
}
.appskinbold .MenuItem {
    opacity: .9;
}

.MenuItem span {
    display: none;
    color: var(--blue);
    font-size: 14px;
    font-weight: bold;   

/*    display: block;
    height: 15px;
    text-align: left;
    line-height: 15px;
    color: #999;
    font-size: 10px;
    margin-top:4px;
    padding-left: 2px;*/

}
.MenuItem.MenuItemWithLabel {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-position: 10px;
    padding-left: 35px;
}

.MenuItem.MenuItemWithLabel span {
    display: inline-block;
}

.ModuleArea .ToolBar .MenuBar .Selected {
    border-bottom: 4px solid var(--orange);
}

.ModuleArea .ToolBar .MenuBar > div:hover {
    color: #D17A17;
}
.ModuleArea .ToolBar .MenuBar > div:nth-last-child(1) {
    border-right: none;
}
.ModuleArea .ToolBar .MenuBar .MobileRightBar {
    display: inline-block;
}
.MenuItemSelect select {
    display: inline-block;
    font-size: 13px;
    color: #999;
    padding: 0px 10px;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-family: inherit;
    background-color: #fff;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    /*border-radius: 2px;*/
}

.MenuItem.MenuItemSelect {
    padding: 0px 0px;
}
.MenuItem.MenuItemSelect span {
    display: block;
    height: 15px;
    text-align: left;
    line-height: 15px;
    color: #999;
    font-size: 10px;
    margin-top:4px;
    padding-left: 2px;
}
.MenuItem.MenuItemSelect select {
    display: block;
    height: 25px;
    line-height: 25px;
}


.ModuleArea .Header {
    background-color: #E75821;
    color: #aaabae;
}

.Loading .LoginBtn {
    -webkit-filter: blur(3px);
}

.MenuBar .UpdateIcon {
    background-image: url(ImgObjects/updateicon2.png);
    width: 35px;
    height: 35px;
    cursor: pointer;
    position: absolute;
    right: 280px;
    border-radius: 80px;
    background-size: 100%;
    top: -5px;
    transition: transform 2s;
    transform: scale(0) translateY(-150px);
}

.MenuBar .UpdateIcon.NewUpdate {
    transform: scale(1) translateY(0px);
}

.MenuBar .UpdateIcon.AppUpdate {
    background-image: url(ImgObjects/updateicon1.png);
}

.ModuleArea .Header .ModuleTitle {
    position: absolute;
    top: 15px;
    left: 40px;
    font-size: 22px;
    color: #fff;
}

.ModuleArea .Header .UserBox {
    position: absolute;
    top: 15px;
    right: 100px;
}

.ModuleArea .Header .UserBox > div {
    display: inline-block;
    margin-right: 10px;
}

.UserBox .UserImage {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: center;
    border-radius: 40px;
    background-image: url(ImgObjects/fer.jpg);
    vertical-align: middle;
}

.UserBox .UserName {
    font-style: 18px;
    vertical-align: middle;
    color: #fff;
}

.ModuleArea .Header .MenuBar {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
}

.DataArea {
    position: absolute;
    top: 120px;
    left: 30px;
    bottom: 0px;
    overflow: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    width: inherit;
}

.ListHeader {
    position: relative;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    width: 100%;
    overflow-x: hidden;
    /* overflow-y: visible; */
    /* background-color: var(--list-header-bgcolor); */
    color: var(--list-header-color);
    /* border-bottom: 1px solid #bbb; */
}
.RecentMainList .ListHeader {
    border-bottom: 1px dashed #999 !important
}
[listviewmode="ImageView"] .ListHeader {
    display: none;
}

.ListHeader div {
    float: left;
    /* border-right: 1px solid #fff; */
    text-transform: capitalize;
    cursor: pointer;
    overflow: hidden;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.25px;
    font-weight: 600;
    position: relative;
    height: 30px;
}

.ListHeader > div {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.CalendarListArea {
    transition: left .65s;
    position: absolute;
    left: -2800px;
    width: 100%;
    top: 50px;
    box-sizing: border-box;
    padding: 0px 30px;
    bottom: 0px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    padding-bottom: 80px !important;
}

.ListArea {
    /* will-change: left; */
    scroll-behavior: smooth;
    transition: left .65s;
    position: absolute;
    left: -2800px;
    width: 100%;
    top: 60px;
    box-sizing: border-box;
    padding: 0px 30px;
    bottom: 0px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px !important;
    padding-top: 20px;
    height: inherit;
    /* padding-top:70px; */
}
.ListSelectorBox .ListArea {
    padding-bottom: 0px !important;
}
.ListSelectorBox .ListAreaFavorites {
     will-change: left;
    transition: left .65s;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 30px;
    bottom: 0px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px !important;
    height: inherit;
    left: 800px;
    top: 50px;
    padding: 0px;    
    display: block;
}


.DashReportArea {
    padding-bottom: 150px !important;

}

.List .ListItem {
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.List .ListItem.hightlightedlistitem .ListField {
    background-color: var(--green);
    color: #fff !important;
}
.List .ListItem.hightlightedlistitem {
    background-color: var(--green) !important;
    color: #fff !important;
}

.List .ListItem:active {
/*     box-shadow: 0px 0px 10px lightblue; */
}

.List .ListItem:nth-child(odd) {
    background-color: #fbfbfb
}

.List .ListItem:hover {
    background-color: #f3f3f3;
}

.List .ListTotalLine {
    background-color: #ccc !important;
}

.List .ListTotalLine * {
    color: #fff !important;
}


.List .ListItem:hover [fieldname="name"] {
    color: #146EAA;
}
.List .ListItem:hover [fieldname="lastname"] {
    color: #146EAA;
}

.List .ListItem:hover [fieldname="fullname"] {
    color: #146EAA;
}

.List .ListItem:hover [fieldname="fullnameinverted"] {
    color: #146EAA;
}

.List .ListItem:hover {
    background-color: #f3f3f3;
}

.List .ListItem:hover {
    background-color: #f3f3f3;
}

.List .ListItem .ListField {
    transition: background-color .3s, transform 1s;
    float: left;
    color: var(--list-font-color);
    line-height: 40px;
    padding: 0px 10px;
    box-sizing: border-box;
    /*     height: 30px; */
    /*  border-right: 1px solid #ccc; */
    width: 110px;
    display: none;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    max-height: 40px;
}
.HorizontalScrolling .List .ListItem .ListField {
    line-height: 25px;
    max-height: 140px;
    min-height: 30px;
    overflow-y: auto;
    height: 100%;
}
.HorizontalScrolling .List .ListItem {
    height: auto;
    max-height: 150px;
}
.List .ListItem .ListField:nth-last-child(1) {
    border-right: none;
}

.List .ListItem .ListField[fieldname=id] {
    width: 70px;
    font-size: 11px;
    font-weight: 250;
    text-align: center;
}
.List .ListItem .ListField[fieldname=createuserid] {
    width: 50px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 11px;
    text-align: center;
}
.List .ListItem .ListField[fieldname=authorizeuserid] {
    width: 50px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 11px;
    text-align: center;
}

.List .ListItem .ListField[fieldname=userid] {
    width: 50px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 11px;
    text-align: center;
}

.List .ListItem .ListField[type=boolean] {
    width: 35px !important;
    color: transparent !important;
    position: relative;
    border: 0px !important;
}
.List .ListItem .ListField[type=boolean][value=false] {
    background-image: url(ImgObjects/OkOffIcon8.png);
    background-repeat: no-repeat;
    background-position: center 11px;
    background-size: 15px auto;
}
.List .ListItem .ListField[type=boolean][value=""] {
    background-image: url(ImgObjects/OkOffIcon8.png);
    background-repeat: no-repeat;
    background-position: center 11px;
    background-size: 15px auto;
}

.List .ListItem .ListField[type=boolean][value=true] {
    background-image: url(ImgObjects/OkIcon8.png);
    background-repeat: no-repeat;
    background-position: center 11px;
    background-size: 15px auto;
}

.List .ListItem .ListField[fieldname=fullname] {
    width: 200px;
    /* font-size: 14px; */
}

.List .ListItem .ListField[fieldname=fullnameinverted] {
    width: 200px;
    font-size: 14px;
}

.List .ListItem .ListField[fieldname=phonework] {
    width: 110px;
    font-size: 14px;
}

.DeleteListMode .List {
    left: 30px;
}

.ClientForm {
    transition: left .65s;
    position: absolute;
    left: -2800px;
    width: 100%;
}

/* .TemplateForm {
    transition: left .65s;
    position: absolute;
    left:-2800px;
    width:100%;
}
 */
.AddClient .ClientForm {
    left: 0px;
}

.ViewClient .ClientForm {
    left: 0px;
}

.ViewClient .Type {
    display: inline-block;
}

.ViewClient .Group {
    display: inline-block;
}

.ViewClient .CommandBar .CancelBtn {
    display: none;
}

.ViewClient .CommandBar .SaveBtn {
    display: none;
}

.ViewClient .CommandBar .DeleteBtn {
    display: none;
}

.ViewClient .CommandBar .EditBtn {
    display: inline-block;
}

.AddClientForm .Header {
}

.AddClientForm .MenuBar {
}

.AddClientForm .ClientForm {
}

.FormHeader {
}

.NoteBtn {
    transition: transform .7s;
    position: absolute;
    top: 14px;
    height: 25px;
    width: 25px;
    right: 260px;
    background-image: url(ImgObjects/noteicon.png);
    background-size: auto 120% !important;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

.AdvancedSettingsBtn {
    background-image: url(ImgObjects/PreferencesIcon0.png);
}

.DeleteBtn {
    transition: transform .7s;
    display: none;
    position: absolute;
    top: 0px;
    height: 50px;
    width: 50px;
    right: 60px;
    background-image: url(ImgObjects/DeleteIcon3.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    line-height: 25px;
    color: transparent !important;
}
.DeleteSaveListBtn {
    position:static;
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: auto 50%;
    box-sizing: border-box;
    padding: 0px 10px;
    float: right;
    opacity: .5;
    cursor: pointer;
}

.FileItemBox .DeleteBtn {
    
}
.AddNewMode .ToolBar .MenuBar .DeleteBtn {
    background-image: url(ImgObjects/CloseBtn.png) !important;
    -webkit-filter: none !important;
}

.PrintBtn {
    background-image: url(ImgObjects/PrinterIcon.png) !important;
    position: absolute;
    right: 190px;
    top: 0px;
}

.ToolBarEditor .PrintBtn {
    background-image: url(ImgObjects/PrinterIconW.png) !important;
    -webkit-filter: none !important;
}

.LogoutBtn {
    cursor: pointer;
}

.CloseBtn {
    transition: transform .7s;
    position: absolute;
    top: 15px;
    height: 25px;
    width: 25px;
    right: 20px;
    background-image: url(ImgObjects/CloseGrayBtn.png) !important;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .5;
    cursor: pointer;
}
.MinimizeBtn {
    width: 25px;
    height: 25px; 
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    border-radius: 100px;
    line-height: 25px;
    text-align: center;
    position: absolute;
    top:15px;
    right: 60px;
}
.MinimizeBtn:after {
    content: "-";
    display: inline-block;
}    
.SettingBtn {
    transition: transform .7s;
    height: 25px;
    width: 25px;
    right: 20px;
    background-image: url(ImgObjects/SettingsIcon4.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .5;
    cursor: pointer;
}
.QuickPanelBox .SettingBtn {
    position: absolute;
    top:15px;
    right: 55px;
}
.DeleteReady .FormArea {
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.DeleteReady .ToolBar .MenuItem {
    display: none;
}

.DeleteReady .DeleteBtn {
    background-color: #FF607F;
    position: absolute;
    /* border-radius: 20px; */
    opacity: 1 !important;
    background-size: auto 80%;
    display: block !important;
}

.ReloadBtn {
    color: #E9997A;
    position: absolute;
    top: 15px;
    left: 20px;
    border-right: none;
    cursor: pointer;
    background-image: url(ImgObjects/ReloadIcon.png);
    width: 30px;
    height: 30px;
    background-size: 110%;
}

.AddBtn {
    background-image: url(ImgObjects/PlusBtn.png);
    background-repeat: no-repeat;
    background-size: auto 80%;
    width: 15px;
    height: 15px;
    padding: 3px !important;
    background-position: center;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.RemoveBtn {
    background-image: url(ImgObjects/MinusBtn.png);
    background-repeat: no-repeat;
    background-size: auto 80%;
    width: 15px;
    height: 15px;
    padding: 3px !important;
    background-position: center;
    border-radius: 30px;
    border: 1px solid #ccc;
    /*  display: none !important; */
    /*  vertical-align: middle !important; */
}
.SelectBtn {
    background-image: url(ImgObjects/ArrowLeft.png);
    background-repeat: no-repeat;
    background-size: auto 80%;
    width: 15px;
    height: 15px;
    padding: 3px !important;
    background-position: center;
    border-radius: 30px;
    border: 1px solid #ccc;
    /*  display: none !important; */
    /*  vertical-align: middle !important; */
}


.List .InvoiceBtn {
    background-image: url(ImgObjects/AddInvoiceIcon.png);
}

.ToolbarBtn {
    color: #E9997A;
    position: absolute;
    /* top: 15px; */
    right: 30px;
    border-right: none;
    cursor: pointer;
}
.ImageViewerBtn {
    background-image: url(ImgObjects/maximizeiamge.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-left: 10px;
    
}
.DoneAndNewBtn {
    color: #E9997A;
    cursor: pointer;
    color: transparent !important;
    background-image: url(ImgObjects/doneandnewicon.png) !important;    
    background-repeat: no-repeat;
    background-size: auto 60% !important;
    opacity: 1;
    background-position: center;
    transition: transform .5s;
}

.DoneBtn {
    color: #E9997A;
    position: absolute;
    top: 0px;
    right: 0px;
    border-right: none;
    cursor: pointer;
    color: transparent !important;
    background-image: url(ImgObjects/OkIcon1g.png) !important;    
    background-repeat: no-repeat;
    background-size: auto 55% !important;
    opacity: 1;
    background-position: center;
    transition: transform .5s;
}
.EditMode .DoneBtn {
    background-color: var(--blue);
    background-image: url(ImgObjects/OkIcon1.png) !important;    

}

.DoneBtn2 {
    color: #E9997A;
    position: absolute;
    top: 15px;
    right: 0px;
    border-right: none;
    cursor: pointer;
    color: transparent !important;
    background-image: url(ImgObjects/OkIcon0.png) !important;
    background-repeat: no-repeat;
    background-size: auto 100%;
    opacity: .5;
    background-position: center;
    transition: transform .5s;
}


input:active {
    transform: scale(1) !important;
}

select:active {
    transform: scale(1) !important;
}

.EditBtn {
    color: #E9997A;
    position: absolute;
    top: 0px;
    right: 60px;
    border-right: none;
    color: transparent !important;
    background-image: url(ImgObjects/EditIcon4.png) !important;
    background-repeat: no-repeat;
    background-size: auto 55% !important;
    background-position: center;
    opacity: .5;
}

.EditBtn2 {
    color: #E9997A;
    position: absolute;
    top: 15px;
    right: 60px;
    border-right: none;
    color: transparent !important;
    background-image: url(ImgObjects/EditIcon3.png) !important;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    opacity: .5;
}

.MinimizeIcon {
    position: absolute;
    top: 0px;
    right: 230px;
}

.CancelBtn {
    color: #E9997A;
    position: absolute;
    top: 15px;
    right: 100px;
    border-right: none;
}

.EmailBtn {
    background-image: url(ImgObjects/EmailIcon1.png);
}

.PublishBtn {
    background-image: url(ImgObjects/PublishIcon.png);
}

.ViewTemplate .TemplateForm {
    left: 0px;
}

.FormElement {
    display: inline-block;
    margin: 5px;
    vertical-align: top;
    position: relative;
}
.note-editor .FormElement {
    -webkit-margin-before:5px !important;
    -webkit-margin-after: 5px !important;    
}

.FormElementLine {
    width: 90%;
}
.FormElementLine input {
    width: 100% !important;
   
}

.FormElement label {
    transition: padding .7s;
    display: block;
    font-size: 13px;
    color: var(--form-label-color);
    margin-bottom: 3px;
    margin-left: 1px;
    text-transform: capitalize;
    user-select: none;         
}
[language=spanish] .FormElement label {
    text-transform: none;
}
[language=spanish] .FormElement label::first-letter {
    text-transform: capitalize;
}
[language=spanish] .SectionTitle {
    text-transform: none;
}
[language=spanish] .SectionTitle::first-letter {
    text-transform: capitalize;
}

[language=spanish] .ListSelectorBox .ListItem .ListField::first-letter {
    text-transform: capitalize;
}

.FormElementInLine label {
    display: inline-block;
}
.FormElement > span {
    color: var(--form-comment-color);
    font-size: 12px;
}
.InfoPanel > span {
    color: var(--form-comment-color);
    font-size: 13px;
    margin: 0px 5px;
    display: block;

}


.FormElement input {
    transition: padding 1s;
    box-shadow: none;
    /*  display: block;  */
    font-size: var(--input-form-size);
    color: var(--form-input-color);
    padding: 5px 0px;
/*     padding-left: 7px; */
    padding-right: 7px;
/*     border: 1px solid var(--input-border-color); */
    border: none;
    border-bottom: 1px solid var(--input-border-color); 
    width: 160px;
    outline: none;
    font-family: inherit;
    height: 30px;
    box-sizing:border-box;

}

/* .FormElement input:focus {
    outline: solid 1px rgba(20, 110, 170, 0.62);
} */
.FormElement input:disabled {
    background-color: transparent;
}

/* new checkbox  */



/* end new checkbox */


.FormElement select {
    display: block;
    font-size: var(--input-form-size);
    color: var(--form-input-color);
    padding: 5px 0px;
    padding-left: 7px; 
    border: none;
    border-bottom: 1px solid var(--input-border-color); 
    width: 160px;
    outline: none;
    font-family: inherit;
    background-color: #fff;
    text-transform: capitalize;
    height: 30px; /* correction */
    padding-left: 0px;
}

.FormElement select:disabled {
    background-color: transparent;
}

.FormElement textarea {
    display: block;
    font-size: 16px;
    color: var(--form-input-color);
    padding: 7px;
    border: 1px solid var(--input-border-color);
    width: 356px;
    height: 90px;
    outline: none;
    font-family: inherit;
    border-radius: 2px;
}

div[name] {
    transition: padding 1s, border 1s;
    display: inline-block;
    font-size: var(--input-form-size);
    color: var(--form-input-color);
    padding: 5px 0px;
    padding-left: 7px;
    outline: none;
    font-family: inherit;
    min-height: 20px;
    /* border-radius: 2px; */
}

.FormElement textarea:disabled {
    background-color: transparent;
}

body .TextArea {
    display: block;
    font-size: 16px;
    color: #666;
    padding: 10px 10px;
    border: 1px solid var(--input-border-color);
    min-width: 356px;
    width: auto;
    min-height: 90px;
    height: auto;
    outline: none;
    font-family: inherit;
}

[type=checkbox] {
    width: 20px !important;
    height: 20px;
    vertical-align: middle;
    position: relative;
    top: -5px;
}

[type=radio] {
    width: 20px !important;
    height: 20px;
    vertical-align: middle;
    position: relative;
    top: -5px;
}
.TextAreaElement label{
    display: block;
}
.TextAreaElement textarea {
    width: 700px;
}

frameelement .TextAreaElement  {
    width: calc(100% - 10px);
}
frameelement .TextAreaElement textarea {
    width: 100%;
}

.CheckBoxElement {
    padding-top: 25px;
}

.CheckBoxElement * {
    display: inline-block !important;
    text-align: left;
    vertical-align: top;
}

.RadioElement {
    padding-top: 25px;
}

.RadioElement * {
    display: inline-block !important;
    text-align: left;
    vertical-align: top;
}

.ViewClient .Form .FormElement label {
    color: #ccc;
}

.ViewClient .Form .FormElement input {
    border: 1px solid transparent;
    padding-left: 0px;
}

.ViewClient .Form .FormElement textarea {
    border: 1px solid transparent;
    padding-left: 0px;
}
.DashPanelArea {
    will-change: left;
    transition: left .65s, box-shadow 1s;
    position: absolute;
    left: -2800px;
    top: 50px;
    width: 100%;
    /* padding: 0px 30px; */
    box-sizing: border-box;
    border-bottom: 1px dotted #ccc;
    overflow-y: scroll;
    height: calc(100% - 55px);
    perspective: 1800px;
    /* padding: 20px; */
    /* padding-top:20px !important; */
    padding-bottom: 200px;
}

.FormArea {
    will-change: left;
    transition: left .65s, box-shadow 1s;
    position: absolute;
    left: -2800px;
    top: 70px;
    width: 100%;
    padding: 0px 30px;
    box-sizing: border-box;
    border-bottom: 1px dotted #ccc;
    overflow-y: scroll;
    height: calc(100% - 70px);
    perspective: 1800px;
    padding: 20px;
    padding-top:20px !important;
    padding-bottom: 200px;
    scrollbar-width: none;
}

.FormArea .Form {
    /*  background-color: #fafafa; */
    /* border-top:4px solid #A15B9D; */
    max-width: 810px;
    padding: 20px;
    padding-bottom: 100px;
    position: relative;
    transition: transform .7s, background-color 1s;
    padding-top: 0px !important;
    margin-top: 20px;
}

.FormArea .Form * {
    /*  border: 1px solid red; */
}
.FormArea .Form [type=checkbox] {
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #888;
    box-shadow: none;
    padding: 9px;
    border-radius: 0px;
    height: auto;
}
.FormArea .Form [type=checkbox]:checked {
    background-color: #888;
}
.FormArea .Form [type=checkbox]:checked:after {
    content: '\2713';
    font-size: 24px;
    position: absolute;
    top: -5px;
    left: 0px;
    color: #fff;
}
.FormArea .Form [type=checkbox] {
    border: 2px solid #888 !important;
    padding: 9px;
    border-radius: 0px;
    opacity: .5;
}

.Form[recordtype="note"] .Form {
    background-color: #F6F3C4
}

.FormHeader {
    height: 25px;
    padding: 5px 20px;
    background-color: #e1e1e1;
    margin-bottom: 10px;
    width: 100%;
}

.CommandBar {
    height: 35px;
    padding: 5px 20px;
    width: 100%;
    background-color: #555;
    margin: 20px 0px;
    /* margin-top: 100px; */
    box-sizing: border-box;
    position: relative;
    display: none;
}

.CommandBar .CancelBtn {
    height: 30px;
    width: 30px;
    position: absolute;
    right: 70px;
    top: 3px;
    background-image: url(ImgObjects/CloseBtn.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.CommandBar .SaveBtn {
    height: 30px;
    width: 30px;
    position: absolute;
    right: 10px;
    top: 3px;
}

.CommandBar .DeleteBtn {
    margin-right: 20px;
    float: right;
    border: 1px solid #FF6475 ;
    color: #FF6475;
    transition: background-color .5s;
}

.CommandBar .DeleteBtn:hover {
    background-color: #FF6475;
    color: #fff;
}

.DeleteMode {
    background-color: #FF6475;
    color: #fff !important;
}

.CommandBar .EditBtn {
    display: none;
}

.ViewClient .OptionSelector {
    display: none;
}

.ClientForm .OptionValue {
    display: none;
}

.ViewClient .OptionValue {
    display: inline-block;
}

.ToolBar .SearchBox {
    position: relative;
    top: 0px;
    margin-left: 20px;
}

.SearchBtn {
    position: static !important;
    transition: opacity .7s;
    width: 35px;
    /* height: 35px; */
    min-height: 30px;
    min-width: 30px;
    background-image: url(ImgObjects/IconSearch.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
    margin-left: 0px;
    cursor: pointer;
}

.HideSearchBoxBtn {
    display: inline-block;
    margin-left: 10px;
    position: static;
    vertical-align: middle;
    background-size: 100%;
    display: none;
}

.SearchBtn:hover {
    opacity: 1;
}

.QueryBtn {
    transition: opacity .7s;
    width: 30px;
    height: 30px;
    background-image: url(ImgObjects/IconSearch.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    vertical-align: middle;
    opacity: .4;
    margin-left: 10px;
    cursor: pointer;
}

.QueryBox {
    display: inline-block;
    margin-left: 10px;
}

.QueryBox input {
    width: 160px;
}

.SearchClientArea {
    transition: left .65s;
    position: absolute;
    left: -2800px;
    width: 100%;
}

.SearchClient .SearchClientArea {
    left: 0px;
}

.AddOptionMode .OptionValue {
    display: inline-block;
}

.AddOptionMode .OptionSelector {
    display: none;
}

.DocumentEditor {
    display: block;
    font-size: 16px;
    color: #666;
    padding: 10px 10px;
    border: 1px solid var(--input-border-color);
    width: 640px;
    height: 500px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.CommandBar .Button {
    top: 5px;
}

.ViewMode .Form .FormElement {
}

.ViewMode .Form .FormElement label {
    color: var(--form-label-view-color);
}

.ViewMode .Form .FormElement input {
    border: 1px solid transparent;
    padding-left: 0px;
    /* padding-right: 10px; */
}
.ViewMode .Form .FormElement input.JustVisible {
    border: 1px solid transparent;
    padding-left: 0px;
    padding-right: 10px;
    pointer-events: none;
}
.ModuleArea form div.JustView {
    border: none;
}
.ViewMode .Form .FormElement textarea {
    border: 1px solid transparent;
    padding-left: 0px;
}

.ViewMode .Form .FormElement select {
    border: 1px solid transparent;
    padding-left: 0px;
}

.ViewMode .Form .FormElement div[name] {
    border: 1px solid transparent;
    padding-left: 0px;
}

.ViewMode .EditBtn {
    display: block;
}

.ViewMode .CommandBar {
    display: none;
}

.ViewMode .DeleteBtn {
    display: none;
}

.ViewMode .EditModeBtn {
    display: none !important;
}

.EditMode .ViewModeBtn {
    display: none !important;
}

.EditMode .EditModeBtn {
    display: inline-block;
}

.EditMode .DeleteBtn {
    display: inline-block;
}

.EditMode .UploadControl {
    display: block;
}

.EditMode div[contenteditable=true] {
    border: 1px solid #ccc;
}

.Deleting {
    transition: transform .7s, height .7s !important;
    transition-delay: .3s !important;
/*     transform: translateX(1000px); */
    height: 0px !important;
}
.Deleting * {
    transition: color 1s, background-color 1s;
    background-color: #fff !important;
    color: #fff !important;
}

.DeleteReady .FormArea {
    filter: blur(5px);
}

.DeleteItemBtn {
    transition: opacity 1s, transform 1s;
    position: absolute;
    background-image: url(ImgObjects/DeleteBtn1.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: inherit;
    background-color: #fff;
    transform-origin: center;
    transform: translateX(-40px);
}

.DeleteRelatedTransactionBtn {
    position: absolute;
    background-image: url(ImgObjects/DeleteBtn1.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: inherit;
    /*  background-color: #fff; */
    left: 340px;
}

.ListDeleteMode .ListItem .ListField {
    transform: translateX(40px);
}

.ListDeleteMode .DeleteItemBtn {
    transition-delay: 4s;
    opacity: 1;
    transform: translateX(0px);
}

.DeletingRow {
    transition: transform .8s, height .5s, opacity .5s !important;
    height: 0px !important;
    transform: translateX(1500px);
}

.ListControls {
    display: inline-block;
}

.ListCounter {
    /* display: inline-block; */
    /* vertical-align: top; */
    /* width:30px; */
    /* height:30px; */
    /* line-height:30px; */
    /* color: #ccc; */
    font-size: 12px;
}

body .PageContentArea .MenuBar .ListCounter {
    border: none;
    font-weight: bold;
}

.OptionsBtn {
    /*  position: absolute;
    top: 15px;
    right: 305px;    */
}
form .OptionsBtn {
    width: 15px;
    height: 15px;
    position: absolute;
    top:-5px;
    right: 0px;
}

.MenuBar select {
    display: inline-block;
    font-size: 13px;
    color: #999;
    padding: 0px 10px;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-family: inherit;
    background-color: #fff;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    /*border-radius: 2px;*/
}

.MenuBar input {
    height: 15px;
    line-height: 25px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #888;
    /*border-radius: 2px;*/
    vertical-align: middle;
    border: 1px solid #d1d1d1;
    outline: none;
}
.MenuBar input[type=checkbox] {
/*     margin-top: 10px; */
    position: relative;
    top: 0px;
}
.MenuBar label {
    display: inline-block;
    width: 160px;
    height: 50px;
    color: #666 !important;
    font-size: 12px;    
    position: relative;
    top: 3px;
    font-weight: bold;
}
.ToolBarOption {
    transition: top .7s;
    top: -200px;
    position: absolute;
    width: 100%;
    background-color: #fff;
    color: #999;
    z-index: 100;
}

.ModuleArea .ToolBarOption .MenuBar > div {
    border-right: dotted 1px #eee;
}

.ToolBarOption .DoneBtn {
}

.ToolBarEditor {
    transition: top 1s;
    top: -200px;
    position: absolute;
    width: 100%;
    background-color: #282828;
    color: #fff;
}

.ToolBarSelectList {
    transition: top 1s;
    top: -200px;
    position: absolute;
    width: 100%;
    background-color: #3D424E;
    color: #fff;
    z-index: 100002 !important;
}

.ToolBarSelectList .MenuItem {
    opacity: 1 !important;
}

.ShowToolBarSelectList .ToolBarSelectList {
    top: 0px;
}

.ModuleArea .ToolBarEditor .MenuBar > div {
    color: #fff;
    /* border-right: dotted 1px #eee; */
}

.ModuleArea .ToolBarEditor .EditControls {
    height: inherit;
    min-width: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: 0px;

}

.ToolBarList {
    transition: top 1s;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #fff;
    background-color: #F6F6F8;
}

.ListSelectorBackground {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

.ListSelectorBox .ListCounter {
    position: absolute;
    right: 25px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    color: #e5e5e5;
    display: none;
}
.ListSelectorBox .SelectAllBtn {
    background-image: url(ImgObjects/selectallitemsbtn2.png);
    background-size: 60%;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-size: 100%;
    opacity: .4;
    cursor: pointer;
    transition: transform 2s;
    display: none;
}
.ListSelectorBox.ShowSelectAll .SelectAllBtn {
    display: block;
}
.ListSelectorBox {
    /* transition: width 1s; */
    will-change: left;
    transition: left .7s, width .9s;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: -2800px;
    bottom: 0px;
    width: 320px;
    background-color: #f1f1f0;
    overflow: hidden;
    box-shadow: 5px 0px 10px rgba(100,100,100,.1);
}
.ShowListSelector .ListSelectorBox {
    left: 0px;
}

.ShowListSelector .ListSelectorBackground {
    right: 0px;
}
.FormListSelector {
    width: 420px !important;
}
.ListSelectorBox .ListSelectorTopBar {
    width: 100%;
    height: 50px;
    background-color: #41414C;
    color: #fff;
    position: relative;
    line-height: 50px;
}
.ListSelectorBox .ListSelectorTopBar .ExtraMenu {
    display: inline-block;
    width: auto;
    height: 50px;
}
.ListSelectorBox .ListSelectorTopBar .ExtraMenuBtn {
    width: auto;
    height: 45px; 
    padding: 0px 5px;
    color: #fff;
    font-weight: bold;
    margin-left: 5px;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    border-bottom: 4px solid transparent;
}
.ListSelectorBox .ListSelectorTopBar .ExtraMenuBtn.EmailBtn {
    width: 40px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.ListSelectorBox .ListSelectorTopBar .ExtraMenuBtn:hover {
/*    color: lightblue; */
    background-color: rgba(255,255,255,.2);
}
.ListSelectorBox .ListSelectorTopBar .ExtraMenuBtn.PrintBtn {
    background-image: url(ImgObjects/PrinterIconW.png) !important;
    width: 40px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: static;
}

.ListSelectorBox .ListSelectorTopBar .ExtraMenuBtn.Selected {
    color: orange;
    border-bottom: 4px solid orange;
}
.ListSelectorBox.FlagListSelector .ListSelectorTopBar .ExtraMenu {
    display: inline-block;
    width: auto;
    height: 50px;
    margin-left: auto;
    margin-right: 0px;
    width: 70%;
    text-align: right;
}

.ListSelectorBox .ListSelectorTopBar .ListSelectorBarCommands {
    display: inline-block;
    float: right;
    margin-right: 45px;
    height: 50px;
}

.ListSelectorBox .ListSelectorTopBar .ListSelectorBarCommands * {
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    height: 50px;
    width: 38px;
    text-align: right;
    display: inline-block;
    cursor: pointer;
}
.ListSelectorBox .ListSelectorTopBar .ListSelectorBarCommands .ActiveIcon {
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    height: 50px;
    width: 38px;
    text-align: right;
    display: inline-block;
    cursor: pointer;
    background-image: url(ImgObjects/ActiveIconW.png);
}
.ListSelectorBox .ListSelectorTopBar .DoneBtn {
    background-image: url(ImgObjects/OkIcon1.png) !important;
}

.ListSelectorBox .ListSelectorTopBar .FavoritesIcon {
    display: none;
}
.ListSelectorBox.FavoriteListOption .ListSelectorTopBar .FavoritesIcon {
    display: inline-block;
}

.ListSelectorBox .ListSelectorTopBar .ActiveIcon {
    display: none;
}
.ListSelectorBox .ListSelectorTopBar .SelectAllSelectListBtn {
    display: none;
}
.ListSelectorBox .ListSelectorTopBar .RefreshListSelectorBtn {
    display: none;
}

.ListSelectorBox .Title {
    color: #aaa;
    margin: 0px 20px;
    line-height: 50px;
    font-size: 14px;
    text-align: left;
    font-weight: 400 !important;
    position: absolute; 
    display: inline-block;
    float: left;
}

.ListSelectorBox .DoneBtn {
    color: #E9997A;
    position: absolute;
    right: 0px;
    border-right: none;
    cursor: pointer;
    top: 0px;
    height: 50px;
    width: 50px;
    user-select: none;
}

.ListSelectorBox .ActiveIcon {

}
.ListSelectorBox .SelectAllSelectListBtn {
    background-image: url(ImgObjects/SelectAllIcon0.png);
}
.MultiSelectorMode .ListSelectorBox .SelectAllSelectListBtn {
    display: inline-block;
}
.ListSelectorBox.CalendarListSelector .SelectAllSelectListBtn {
    display: none;
}

.ListSelectorBox.CustomerListSelector .SelectAllSelectListBtn {
    display: none;
}

.MultiSelectorMode .ListSelectorBox.ReportsListSelector .SelectAllSelectListBtn {
    display: none;
}


.ListSelectorBox.CustomerListSelector .ActiveIcon {
    display: inline-block;
}

.ListSelectorBox .ListSelectorTopBar2 {
    width: 100%;
    height: 50px;
    background-color: #a6b4bC;
    color: #fff;
    position: relative;
    line-height: 50px;
    transition: transform 1s;
}
.ListSelectorBox.FavoriteListOn .ListSelectorTopBar2 {
    transform: translateX(-800px);
}

.ListSelectorBox.CalendarListSelector .ListSelectorTopBar2 {
    display: none !important;
}
.ListSelectorBox .SearchBox {
    width: 100%;
    text-align: left;
    height: 80px;
}
.NoListSelectorSearch .ListSelectorBox .ListSelectorTopBar2 {
    display: none;
}

.ListSelectorBox input {
/*     width: 150px; */
    margin-left: 20px; 
    transition: width 1s;
}
.ListSelectorBox.Extended .SearchInput {
    width: 350px;
    margin-left: 20px;
}

.ListSelectorBox .List .Selected {
    background-color: #4D6895 !important;
}

.ListSelectorBox .List .Selected * {
    background-color: #4D6895 !important;
}

.ListSelectorBox .List .Selected:nth-child(odd) {
    /*background-color: #647CA4 !important;*/
}

.ListSelectorBox .List .Selected:nth-child(odd) * {
    background-color: #647CA4;
    /* last changed */
}

.ListSelectorBox .List .Selected > * {
    color: #fff !important;
}

.ListSelectorBox .List .Selected input {
    color: #fff !important;
}

.ListSelectorBox .List .Selected .ListField[fieldname="balance"] {
    color: #fff !important;
}

.ListSelectorBox .List .Selected .ListField[fieldname="total"] {
    color: #aaa !important;
}
.ListSelectorBox[listitemactionbtn] .List .ListItem .ListActionBtn {
    display: inline-block;
    width: 10px;
    height: 40px;
    background-image: url(ImgObjects/arrowright3.png);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top:0px;
    right: 0px;
    z-index: 1000;
    background-color: inherit;;
}
.ListSelectorBox[listitemactionbtn] .List .ListItem .ListActionBtn:hover {
    background-color: var(--blue);
    background-image: url(ImgObjects/ArrowRightIcon.png);
}
.RestoreListSelectorBtn {
    width: 100px;
    height: 50px; 
    background-color: var(--red);
    position: absolute;
    top:0px;
    left:0px;
    z-index: 100000;
    background-image: url(ImgObjects/ArrowRightIcon.png);
    background-size: 30%;
    background-position: right;
    background-repeat: no-repeat;

}
.RestoreListSelectorBtn:after {
    content: "Versiones";
    line-height: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    padding-left: 10px;
}

.MinimizeListSelector .RestoreListSelectorBtn {
    display: block !important
}
.MinimizeListSelector .ListSelectorBox {
    width: 0px !important;
}
.MinimizeListSelector .ListSelectorBackground {
    display: none; !important;
}

.OptionSelectorBox .List .Selected {
    background-color: #4D6895;
}

.OptionSelectorBox .List .Selected * {
    background-color: #4D6895;
}

.OptionSelectorBox .List .Selected:nth-child(odd) {
    background-color: #647CA4 !important;
}

.OptionSelectorBox .List .Selected:nth-child(odd) * {
    background-color: #647CA4 !important;
}

.OptionSelectorBox .List .Selected > * {
    color: #fff !important;
}





.ListSelectorBox .ListControls {
}

.ListSelectorBox .ViewButton {

}

.ListSelectorBox .ViewButton {
}

.ListSelectorBox .List {
    width: inherit;
}

.ListSelectorBox .ListArea {
    left: 0px;
    top: 100px;
    padding: 0px;
}
.ListSelectorBox.FavoriteListOn .ListArea {
    left: 700px;
}
.ListSelectorBox.FavoriteListOn .ListAreaFavorites {
    left: 0px;
}

.CustomerListSelector.ListSelectorBox .ListArea {
    top: 140px;
}

.NoListSelectorSearch .ListSelectorBox .ListArea {
    top:50px;
}

.ListSelectorBox.CalendarListSelector .ListArea {
    top:50px;
}
.ListSelectorBox .List .ListItem .ListField {
    /* display: none; */
}

.ListSelectorBox .List .ListField[fieldname=id] {
    width: 50px;
    /* display: block; */
    text-align: center;
}

.ListSelectorBox .List .ListField[fieldname=fullname] {
    width: 200px;
    display: block;
}

.ListSelectorBox[fullnameinverted="true"] .List .ListField[fieldname=fullname] {
    display: none;
}

.ListSelectorBox[fullnameinverted="true"] .List .ListField[fieldname=fullnameinverted] {
    width: 200px;
    display: block;
}

.ListSelectorBox .List .ListField[fieldname=company] {
    width: 220px;
    /* display: block; */
    border-right: none;
}

.DocumentListSelector .List .ListField[fieldname=id] {
    width: 50px;
    display: block;
    text-align: center;
}

.DocumentListSelector .List .ListField[fieldname=name] {
    width: 210px;
    display: block;
}
.ArticleListSelector {
        
}
.ArticleListSelector .List .ListField[fieldname=id] {
    width: 30px;
}
.ArticleListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 250px;
    display: inline-block;
}

.ArticleListSelector .List .ListField[fieldname=price] {
    color: #999;
    width: 50px;
    text-align: right;
    display: inline-block;
}
.AllergiesListSelector {
    width: 640px;
}
.AllergiesListSelector .List .ListField[fieldname=name] {
    width: 500px;
    display: inline-block;

}
.VaccineListSelector {
    width: 640px;
}
.VaccineListSelector .List .ListField[fieldname=name] {
    width: 500px;
    display: inline-block;

}

.FlagListSelector {
    width: 400px;
}
.FlagListSelector .List .ListField[fieldname=name] {
    width: 400px;
    display: inline-block;

}


.InventoryListSelector {
    width: 520px; 
}
.InventoryListSelector .List .ListField[fieldname=id] {
    width: 30px;
}
.InventoryListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 350px;
    font-size: 12px;
    display: inline-block;
}

.InventoryListSelector .List .ListField[fieldname=price] {
    color: #999;
    width: 50px;
    text-align: right;
    display: inline-block;
}
.ServiceTypeListSelector {

}

.QuoteListSelector {
    width: 690px !important;
}
.QuoteListSelector .List .ListField[fieldname=customername] {
    /* color: #999; */
    width: 250px;
    display: inline-block;
}
.QuoteListSelector .List .ListField[fieldname=id] {
    /* color: #999; */
    width: 50px;
    display: inline-block;
}
.QuoteListSelector .List .ListField[fieldname=created] {
    /* color: #999; */
    width: 90px;
    display: inline-block;
    font-size: 11px;
}
.QuoteListSelector .List .ListField[fieldname=total] {
    /* color: #999; */
    width: 110px;
    display: inline-block;
}


.ServiceTypeListSelector .List .ListField[fieldname=id] {
    display: inline-block;
    width: 30px;
}
.ServiceTypeListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 230px;
}

.ServiceListSelector .List .ListField[fieldname=id] {
    width: 30px;
}

.ServiceListSelector {
    width: 410px;
}

.ServiceListSelector .ExtendBtn {
    display: block;
}

.ServiceListSelector.Extended {
    width: 700px;
}

.ServiceListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 250px;
    display: inline-block;
}
.ServiceListSelector.Extended .List .ListField[fieldname=name] {
    width: 310px;
}
.CustomerFormsVersionsListSelector {
    width: 780px !important;
}
.CustomerFormsVersionsListSelector .ListActionBtn {
    width: 80px !important;
    background-size: auto 50% !important;
    background-position: 10px !important;
    background-color: var(--blue) !important;
    background-image: url(ImgObjects/ArrowRightIcon.png) !important;
}
.CustomerFormsVersionsListSelector .ListActionBtn:after {
    content: "Ver";
    margin-left: 25px;
    font-weight: bold;
    color: #fff;
    
}

.CustomerFormsVersionsListSelector .List .ListField[fieldname=versioncreated] {
    display: inline-block;
    width: 130px;
    font-size: 12px;
    overflow-wrap: break-word;
    line-height: 16px;    
    font-size: 11px;
    padding-left: 40px;
    font-weight: bold;
}
.CustomerFormsVersionsListSelector .List .ListField[fieldname=created] {
    display: inline-block;
    width: 130px;
    font-size: 12px;
    color: var(--blue);
}
.CustomerFormsVersionsListSelector .List .ListField[fieldname=modified] {
    display: inline-block;
    width: 130px;
    font-size: 12px;
    color: #999;
}
.CustomerFormsVersionsListSelector .List .ListField[fieldname=versioncreated]:before {
    content: "";
    background-image: url(ImgObjects/clockicon2.png);
    width: 20px !important;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 30px;
    display: block;
    position: absolute;
    top: 0px; 
    left: 5px;
    
}


.CustomerFormsVersionsListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 230px;
    font-size: 12px;
}




[activemodule="StudiesModule"] .ServiceListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 470px;
    display: inline-block;
}
[activemodule="StudiesModule"] .ServiceListSelector {
    /* color: #999; */
    width: 650px;
    display: inline-block;
}

.ServiceListSelector .List .ListField[fieldname=price] {
    color: #999;
    width: 60px;
    font-size: 12px;
    text-align: right;
    display: inline-block;
}
.ServiceListSelector .List .ListField[fieldname=listname] {
    color: #999;
    width: 50px;
    text-align: left;
    display: inline-block;
    font-size: 12px;
}

.ServiceListSelector .List .ListField[fieldname=sssplan] {
    color: #999;
    width: 80px;
    text-align: left;
    display: inline-block;
    font-size: 11px;
}
.CustomerServicesListSelector .List .ListField[fieldname=price] {
    width: 50px;
    display: block;
}
.CustomerServicesListSelector .List .ListField[fieldname=starttime] {
    width: 90px;
    display: block;
    font-size: 10px;
    font-weight: bold;
    color: #aaa;
}

.CustomerServicesListSelector {
    width: 510px;
}

.CustomerServicesListSelector .ExtendBtn {
    display: block;
}

.CustomerServicesListSelector.Extended {
    width: 700px;
}

.CustomerServicesListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 150px;
    display: inline-block;
}
.CustomerServicesListSelector.Extended .List .ListField[fieldname=transactionstatus] {
    /* color: #999; */
    width: 60px;
    display: inline-block;
}

.CustomerServicesListSelector.Extended .List .ListField[fieldname=name] {
    width: 250px;
}
.CustomerServicesListSelector .List .ListField[fieldname=servicesstatustranslated] {
    width: 50px;
    display: inline-block;
    font-size: 10px;
}
.CustomerServicesListSelector .List .ListField[fieldname=transactionstatetranslated] {
    width: 50px;
    display: inline-block;
    font-size: 10px;
}



.InvoiceListSelector .List .ListField[fieldname=company] {
    display: none;
}

.InvoiceListSelector .List .ListField[fieldname=id] {
    width: 40px;
    display: block;
    font-size: 13px;
}

.InvoiceListSelector .List .ListField[fieldname=fullname] {
    color: #999;
    width: 95px;
    display: block;
}

.InvoiceListSelector .List .ListField[fieldname=description] {
    color: #999;
    width: 150px;
    display: block;
}

.InvoiceListSelector .List .ListField[fieldname=description] * {
    font-size: 12px;
    color: #999;
    display: inline-block;
    border: none;
}

.InvoiceListSelector .List .ListField[fieldname=total] {
    width: 60px;
    display: block;
    text-align: right;
}

.InvoiceListSelector .List .ListField[fieldname=balance] {
    width: 60px;
    display: block;
    text-align: right;
    color: #E25620 !important;
}

.InvoiceListSelector .List .ListField[fieldname=created] {
    width: 70px;
    font-size: 13px;
    color: #999;
    display: block;
}

.InvoiceListSelector .List .ListField[fieldname=type] {
    width: 60px;
    font-size: 13px;
    color: #999;
    display: block;
}

.AccountBalanceListSelector .List .ListField[fieldname=customerid] {
    display: block;
    width: 25px;
    color: #999;
    font-size: 13px;
}

.AccountBalanceListSelector .List .ListField[fieldname=customeraccount] {
    display: block;
    width: 40px;
    font-size: 13px;
    color: #999;
}

.AccountBalanceListSelector .List .ListField[fieldname=balance] {
    width: 70px;
    display: block;
    text-align: right;
}

.AccountBalanceListSelector .List .ListField[fieldname=transactions] {
    width: 20px;
    color: #999;
    display: block;
    text-align: right;
    border-left: 1px solid #ccc;
}

.AccountBalanceListSelector .List .ListField[fieldname=fullname] {
    width: 160px;
    display: inline-block !important;
    font-size: 14px;
}

.AccountBalanceListSelector .List .ListField[fieldname=company] {
    display: none;
}

.PaymentOptionsListSelector .List .ListField[fieldname=id] {
    display: none;
}

.PaymentOptionsListSelector .List .ListField[fieldname=merchant] {
    display: inline-block;
    width: 80px;
}

.PaymentOptionsListSelector .List .ListField[fieldname=merchantaccount] {
    display: inline-block;
    width: 130px;
    color: #999;
}

.PaymentOptionsListSelector .List .ListField[fieldname=merchantpaymentexpiration] {
    display: inline-block;
    width: 70px;
    color: #999;
    font-size: 14px;
}

.AddItemListSelector {
    width: 540px;
}

.AddItemListSelector .List .ListField[fieldname=id] {
    width: 30px;
    display: inline-block;
    color: #999;
    font-size: 12px;
}

.AddItemListSelector .List .ListField[fieldname=name] {
    width: 265px;
    display: inline-block;
}

.AddItemListSelector .List .ListField[fieldname=groupname] {
    width: 90px;
    display: inline-block;
    color: #999;
    font-size: 14px;
}

.AddItemListSelector .List .ListField[fieldname=price] {
    width: 50px;
    display: inline-block;
    color: #999;
    text-align: right;
    padding-right: 15px;
}

.ItemListSelector {
    width: 450px;
}

.ItemListSelector .List .ListField[fieldname=id] {
    width: 30px;
    display: inline-block;
    color: #999;
    font-size: 12px;
}

.ItemListSelector .List .ListField[fieldname=name] {
    width: 220px;
    display: inline-block;
}

.ItemListSelector .List .ListField[fieldname=typename] {
    width: 50px;
    display: inline-block;
    color: #999;
    font-size: 12px;
}

.ItemListSelector .List .ListField[fieldname=price] {
    width: 50px;
    display: inline-block;
}

.FullItemListSelector {
    width: 650px;
}

.FullItemListSelector .List .ListField[fieldname=id] {
    width: 30px;
    display: inline-block;
    color: #999;
    font-size: 12px;
}

.FullItemListSelector .List .ListField[fieldname=name] {
    width: 250px;
    display: inline-block;
}

.FullItemListSelector .List .ListField[fieldname=typename] {
    width: 50px;
    display: inline-block;
    color: #999;
    font-size: 12px;
}

.FullItemListSelector .List .ListField[fieldname=groupname] {
    width: 100px;
    display: inline-block;
    color: #999;
    font-size: 12px;
}

.FullItemListSelector .List .ListField[fieldname=price] {
    width: 50px;
    display: inline-block;
}

.ListsListSelector .List .ListField[fieldname=id] {
    display: block;
    width: 30px;
    color: #999;
    font-size: 12px;
    text-align: center;
}

.ListsListSelector .List .ListField[fieldname=name] {
    display: block;
    width: 150px;
}

.ListsListSelector .List .ListField[fieldname=itemscount] {
    display: block;
    width: 30px;
    color: #999;
    font-size: 14px;
    text-align: center;
}

.ListsListSelector .List .ListField[fieldname=modified] {
    display: block;
    width: 60px;
    color: #ccc;
    font-size: 10px;
}

.ItemsListSelector {
    width: 550px !important;
}

.ItemsListSelector .List .ListField[fieldname=id] {
    width: 50px;
    color: #999;
}

.ItemsListSelector .List .ListField[fieldname=name] {
    width: 220px;
    display: inline-block;
}

.ItemsListSelector .List .ListField[fieldname=price] {
    width: 50px;
    display: inline-block;
}

.ItemsListSelector .List .ListField[fieldname=availabilitycount] {
    width: 50px;
    display: inline-block;
    text-align: center;
    color: #aaa;
}

.ItemsListSelector .List .ListField[fieldname=groupname] {
    width: 120px;
    display: inline-block;
}

.DiagnosisListSelector .List .ListField[fieldname=id] {
    display: none;
}

.DiagnosisListSelector .List .ListField[fieldname=code] {
    /*display: inline-block;*/
    width: 50px;
}

.DiagnosisListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 480px;
    color: #333;
    text-transform: lowercase;
}

.DiagnosisListSelector {
    width: 640px;
}
.ProblemListSelector {
    width: 640px;
}
.ProblemListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 480px;
    color: #333;
    text-transform: lowercase;
}
.EventsListSelector {
    width: 640px;
}
.EventsListSelector .List .ListField[fieldname=typename] {
    display: inline-block;
    width: 120px;
    color: #333;
}

.EventsListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 380px;
    color: #333;
}


.CustomerListSelector.Extended {
    width: 700px;
}

.CustomerListSelector.Extended .List .ListField[fieldname=phonework] {
    color: #999;
    width: 110px;
    display: inline-block;
    font-size: 12px;
    border-right: 1px solid #ddd;
}

.CustomerListSelector.Extended .List .ListField[fieldname=personalid] {
    color: #111;
    width: 70px;
    display: inline-block;
    font-size: 12px;
    border-right: 1px solid #ddd;
}

.CustomerListSelector.Extended .List .ListField[fieldname=code2] {
    color: var(--blue);
    width: 60px;
    /* display: inline-block; */
    font-size: 12px;
    border-right: 1px solid #ddd;
}
.RelationshipListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 200px;
}
.CustomerListSelector2 .List .ListField[fieldname=ss] {
    display: block;
    ; width: 110px;
}

.CustomerListSelector2 .List .ListField[fieldname=id] {
}

.CustomerListSelector2 .List .ListField[fieldname=company] {
    display: none;
}

.CustomerListSelector2 .List .ListField[fieldname=fullname] {
    width: 150px;
}

.CustomerListSelector2 .List .ListField[fieldname=name] {
    display: none;
}

.CustomerListSelector2 .List .ListField[fieldname=lastname] {
    display: none;
}

.MedicationUnitListSelector .List .ListField[fieldname=name] {
    display: block;
    width: 250px;
}

.CustomerListSelector .List .ListField[fieldname=id] {
    color: #999;
    width: 50px;
    display: inline-block;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    font-size: 11px;
}

.CustomerListSelector .List .ListField[fieldname=fullname] {
    width: 200px;
    display: inline;
    border-right: none;
}
.CustomerReservationsSelector {
    width: 700px !important;
}
.CustomerReservationsSelector .ExtraMenu {
    margin-left: 150px;
}
.CustomerReservationsSelector .List .ListField[fieldname=startime] {
    color: #999;
    width: 130px;
    display: inline-block;
    font-size: 12px;
}

.CustomerReservationsSelector .List .ListField[fieldname=resourcename] {
    width: 130px;
    display: inline-block;
    font-size:12px;
}
.CustomerReservationsSelector .List .ListField[fieldname=status] {
    width: 20px;
    display: inline-block;
    color: transparent !important;
    background-position: center;
    background-size: auto 70%;
    background-repeat: no-repeat;    
    min-height: 50px;
}
.CustomerReservationsSelector .List .ListField[fieldname=subject] {
    width: 200px;
    display: inline;
    border-right: none;
    font-size:12px;
}
.CustomerReservationsSelector .List .ListField[fieldname=locationname] {
    width: 50px;
    display: inline;
    border-right: none;
    font-size:11px;
    color: #999;
}
.CustomerReservationsSelector .List .ListField[fieldname=starttimeformatted] {
    width:110px;
    font-size:12px;
    display: inline-block;
    border-right: none;
}
.CustomerReservationsSelector .List .ListField[fieldname=createuserid] {
/*     width: 50px;
    display: inline;
    border-right: none; */
}
.MedicationListSelector {
    width: 600px;
}

.MedicationListSelector .List .ListField[fieldname=name] {
    width: 250px;
    display: inline-block !important;
}
.MedicationListSelector .List .ListField[fieldname=commercialname] {
    width: 150px;
    display: inline-block !important;
    font-size: 12px;
}
.MedicationListSelector .List .ListField[fieldname=pharmname] {
    width: 150px;
    display: inline-block !important;
    font-size: 12px;
}
.MedicationListSelector .List .ListField[fieldname=concentration] {
    width: 50px;
    display: inline-block !important;
    font-size: 12px;
}
.MedicationListSelector .List .ListField[fieldname=presentation] {
    width: 130px;
    display: inline-block !important;
    font-size: 12px;
}
.MedicationListSelector .List .ListField[fieldname=providername] {
    width: 90px;
    display: inline-block !important;
    font-size: 12px;
    color: #999;
}
.MedicationListSelector .List .ListField[fieldname=note] {
    display: none !important;
}

.VademecumListSelector {
    width: 600px;
}

.VademecumListSelector .List .ListField[fieldname=name] {
    width: 250px;
    display: inline-block !important;
}
.VademecumListSelector .List .ListField[fieldname=commercialname] {
    width: 150px;
    /* display: inline-block !important; */
    font-size: 12px;
}
.VademecumListSelector .List .ListField[fieldname=pharmname] {
    width: 150px;
    /* display: inline-block !important; */
    font-size: 12px;
}
.VademecumListSelector .List .ListField[fieldname=concentration] {
    width: 50px;
    /* display: inline-block !important; */
    font-size: 12px;
}
.VademecumListSelector .List .ListField[fieldname=presentation] {
    width: 130px;
    display: inline-block !important;
    font-size: 12px;
}
.VademecumListSelector .List .ListField[fieldname=providername] {
    width: 90px;
    display: inline-block !important;
    font-size: 12px;
    color: #999;
}
.VademecumListSelector .List .ListField[fieldname=note] {
    display: none !important;
}


.AllAccountsSelector {
    width: 600px;
}

.AllAccountsSelector .List .ListField {
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.AllAccountsSelector .List .ListField[fieldname=id] {
    color: #999;
    width: 30px;
    display: inline-block;
    font-size: 14px;
}

.AllAccountsSelector .List .ListField[fieldname=company] {
    color: #999;
    width: 130px;
    display: inline-block;
    font-size: 14px;
    border-right: 1px solid #ccc;
}

.AllAccountsSelector .List .ListField[fieldname=appname1] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app1] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.AllAccountsSelector .List .ListField[fieldname=appname2] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app2] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.AllAccountsSelector .List .ListField[fieldname=appname3] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app3] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.AllAccountsSelector .List .ListField[fieldname=appname4] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app4] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.AllAccountsSelector .List .ListField[fieldname=appname5] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app5] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.AllAccountsSelector .List .ListField[fieldname=appname6] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app6] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.AllAccountsSelector .List .ListField[fieldname=appname7] {
    color: #999;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.AllAccountsSelector .List .ListField[fieldname=app7] {
    color: #999;
    width: 30px;
    color: transparent;
    display: inline-block;
    font-size: 12px;
}

.LabListSelector .List .ListField[fieldname=fullname] {
    width: 250px;
}

.TestTypeListSelector .List .ListField[fieldname="studytype"] {
    display: inline-block;
    width: 300px;
}

.TestOptionsListSelector .List .ListField[fieldname="code"] {
    display: inline-block;
    width: 30px;
    font-size: 12px;
    text-align: center;
}

.TestOptionsListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 230px;
    font-size: 14px;
}

.TestOptionsListSelector .ListArea {
    background-color: #888;
}

.TestOptionsListSelector .List .ListItem:nth-child(odd) {
    background-color: rgba(255,255,255,.1);
}

.TestOptionsListSelector .List .ListItem * {
    color: #fff;
    font-weight: bold;
}

.TestSelectorListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 300px;
    font-size: 14px;
}

.TestResultOptionsListSelector .List .ListField[fieldname="resultname"] {
    display: inline-block;
    width: 150px;
    border-right: none;
}

.TestResultOptionsListSelector .List .ListField[fieldname="resultvalue"] {
    display: inline-block;
    width: 70px;
    border-right: none;
}

.TestResultOptionsListSelector .List .ListField[fieldname="resultvalue"] input {
    display: inline-block;
    width: 70px;
    border: 1px solid #aaa;
    height: 30px;
    text-align: right;
    box-sizing: border-box;
    padding: 0px 5px;
    font-size: 14px;
}

.TestResultOptionsListSelector .List .ListField[fieldname="unit"] {
    display: inline-block;
    width: 20px;
    text-align: left;
}

.TestTypeListSelector .List .TypeGroup {
    background-color: #666 !important;
    pointer-events: none;
}

.TestTypeListSelector .List .TypeGroup * {
    color: #fff;
    font-weight: bold;
}

.TestTypeListSelector .ListArea {
    background-color: #62B3D5;
}

.TestTypeListSelector .List .ListItem:nth-child(odd) {
    background-color: rgba(100,100,100,.1);
}

.TestTypeListSelector .List .ListItem * {
    color: #fff;
    font-weight: bold;
}
.ReportsListSelector {
    width: 760px;
}
.ReportsListSelector .List .ListItem {
    width: 370px;
    float: left;
}
.ReportsListSelector .List listselectorgroup {
    display: inline-block;
    float: none;
    width: 100%;
}
.ReportsListSelector .List listselectorgroup listselectorgroupheader {
    color: var(--blue);
    font-size: 13px;
    height: 25px;
    line-height: 25px;
    text-align: left;
    box-sizing: border-box;
    padding: 0px 20px;
    width: 100%;
    display: inline-block;
    background-color: #eee;
}
.ReportsListSelector .List listselectorgroup listselectorgroupheader span {
    margin-left: 40px;
    text-transform: capitalize;
}
.ReportsListSelector .List listselectorgroupcontent {

}
.ReportsListSelector .List .ListField[fieldname=caption] {
    width: 250px;
    display: inline-block;
    text-transform: capitalize;
    font-size: 12px;
    padding-left: 0px;
    padding-right: 0px;
}
.ReportsListSelector .List .ListField[fieldname=name] {
    width: 250px;
    text-transform: capitalize;
    font-size: 12px;
    padding-left: 0px;
    padding-right: 0px;
}

.ReportsListSelector .List .ListItem .MenuItemList {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: auto 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/ArrowRight3White.png);
    float: left;
}
.ReportsListSelector .List .ListItem .MenuItemList:hover {
    background-image: url(ImgObjects/ArrowRight3Black.png)
}

.ReportsListSelector .List .ListField[fieldname=group] {
    width: 30px;
    height: 30px;
    margin-top: 5px;
    padding: 0px;
    font-size: 12px;
    display: inline-block;
    color: #888;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(ImgObjects/addicon1.png) !important;
    opacity: .5;
    border: none !important;
}
.ReportsListSelector .List .Selected .ListField[fieldname=group] {
    background-image: url(ImgObjects/minusicon.png) !important;
}
.ReportsListSelector .List .ListField[fieldname=group][fieldvalue="settings"] {
    display: none;
}
.ReportsListSelector .List .ListField[fieldname=type] {
    width: 50px;
    height: 30px;
    margin-top: 5px;
    padding: 0px;
    display: inline-block;
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="defaultreports"] {
    background-image: url(ImgObjects/defaultsettingsiconb.png);
}

.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="bar1"] {
    background-image: url(ImgObjects/bartypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="bar2"] {
    background-image: url(ImgObjects/bartypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="multicounter"] {
    background-image: url(ImgObjects/countertypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="graphcounter"] {
    background-image: url(ImgObjects/countertypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="multigraphcounter"] {
    background-image: url(ImgObjects/countertypeicon.png);
}

.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="counter"] {
    background-image: url(ImgObjects/countertypeicon.png);
}

.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="donut"] {
    background-image: url(ImgObjects/donuttypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="pie"] {
    background-image: url(ImgObjects/pietypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="list"] {
    background-image: url(ImgObjects/ListIcon4.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="counterlist"] {
    background-image: url(ImgObjects/CounterListIcon.png);
}

.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="bar"] {
    background-image: url(ImgObjects/bartypeicon.png);
}
.ReportsListSelector .List .ListField[fieldname=type][fieldvalue="barm"] {
    background-image: url(ImgObjects/bartypeicon.png);
}
.ReportsListSelector .List .ListItem:hover .ListField[fieldname=type] {
    transform: rotateY(-180deg);
    background-image: url(ImgObjects/InfoIconGray.png);
}

.ReportsListSelector .List .ListField[fieldname=group][fieldvalue="reservations"] {
/*  background-image: url(ImgObjects/CalendarIcon4.png); */
    background-image: url(ImgObjects/CalendarIconC.png);    
    border: 1px solid #4cba53;
}
.ReportsListSelector .List .ListField[fieldname=group][fieldvalue="schedules"] {
    background-image: url(ImgObjects/CalendarIcon2C.png);
    border: 1px solid #f6652f;
}

.ReportsListSelector .List .ListField[fieldname=group][fieldvalue="users"] {
    background-image: url(ImgObjects/UserIcon4.png);
    background-size: auto 80%;
    border: 1px solid #666;
}
.ReportsListSelector .List .ListField[fieldname=group][fieldvalue="billing"] {
    background-image: url(ImgObjects/billingicon1.png);
    border: 1px solid #49cd3f;
}
.ReportsListSelector .List .ListField[fieldname=group][fieldvalue="customers"] {
    background-image: url(ImgObjects/CustomerIconb.png);
    border: 1px solid #3fa0f3;
}

.DebugMode .ReportsListSelector .List .ListItem:hover .ListField[fieldname=caption] {
    display: none;
}
.DebugMode .ReportsListSelector .List .ListItem:hover .ListField[fieldname=name] {
    display: inline-block;
}

.ListFieldSelector .List .ListField[fieldname=Type] {
    display: inline-block;
    width: 210px;
}
.ListFieldSelector .List .ListField[fieldname=Default] {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 30px;
    padding: 0px;
    margin: 8px;
    color: transparent !important;
    border: 1px solid #fff;
}
.ListFieldSelector .List .ListField[fieldname=Null] {
    /*display: inline-block;*/
    width: 5px;
    padding: 0px;
    margin: 5px 10px;
    color: transparent !important;
    border: 1px solid #fff;
}

.FormFieldSelector .List .ListField[fieldname=Caption] {
    display: inline-block;
    width: 250px;
}

.TasksListSelector {
    width: 650px;
}

.TasksListSelector .List .ListField[fieldname=id] {
}

.TasksListSelector .List .ListField[fieldname=groupname] {
    color: #999;
    width: 90px;
    display: block;
}

.TasksListSelector .List .ListField[fieldname=subject] {
    width: 290px;
    display: block;
}

.TasksListSelector .List .ListField[fieldname=created] {
    display: block;
    font-size: 12px;
    width: 70px;
}

.TasksListSelector .List .ListField[fieldname=statusname] {
    display: block;
    font-size: 12px;
    width: 50px;
}

.PayWithAccountListSelector .List .ListField[fieldname=id] {
}

.PayWithAccountListSelector .List .ListField[fieldname=company] {
    color: #999;
    width: 180px;
}

.PayWithAccountListSelector .List .ListField[fieldname=fullname] {
    width: 150px;
}

.PayWithAccountListSelector .List .ListField[fieldname=name] {
    display: none;
}

.PayWithAccountListSelector .List .ListField[fieldname=lastname] {
    display: none;
}

.ResourceImageListSelector .List .ListItem {
    /* padding-left:40px; */
}
/*.ResourceImageListSelector .List .ListField[fieldname=image] {
    width: 40px;
    height:40px;
    border-right: none;
    display: inline-block !important;
    position: absolute;
    left:0px;
    color: transparent;
}
*/
.ResourceImageListSelector .List .ListItem .ResourceBadge {
    display: inline-block;
}
.ResourceImageListSelector .List .ListField[fieldname=todaystart] {
    width: 30px;
    border-right: none;
    display: inline-block;
    font-size: 11px;
    padding: 0;
}
.ResourceImageListSelector .List .ListField[fieldname=todayend] {
    width: 30px;
    border-right: none;
    display: inline-block;
    font-size: 11px;
    padding: 0;
}

.ResourceImageListSelector .List .ListField[fieldname=fullname] {
    width: 210px;
    border-right: none;
}
.ResourceImageListSelector .List .ListField[fieldname=fullnameinverted] {
    width: 230px;
    border-right: none;
}
.UserListSelector {
    width: 480px;
}
.UserListSelector .List .ListField[fieldname=user] {
    color: #666;
    width: 180px;
    display: inline-block;
    font-size: 14px;
}

.UserListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: auto;
    margin-right: 5px;
    border-right: none;
    font-size: 12px;
    color: #999;
}
.UserListSelector .List .ListField[fieldname=lastname] {
    display: inline-block;
    width: 80px;
    border-right: none;
    font-size: 12px;
    color: #999;
}
.FieldValuesListSelector {
    width: 640px;
}
.FieldValuesListSelector .List .ListField[fieldname=name] {
    width: 420px;
    border-right: none;
    display: inline-block;    
}
.FieldValuesListSelector .List .ListField[fieldname=total] {
    width: 40px;
    border-right: none;
    display: inline-block;    
    text-align: right;
}

.LocationListSelector .List .ListField[fieldname=name] {
    width: 320px;
    border-right: none;
    font-size: 12px;
    color: #999;
    display: inline-block;    
}
.mysignatureusageselector {
    width: 540px;
}
.mysignatureusageselector .List .ListField[fieldname=module] {
/*     color: #999; */
    width: 100px;
    display: inline-block;
    font-size: 14px;
}
.mysignatureusageselector .List .ListField[fieldname=addsignaturedate] {
    color: #999;
    width: 160px;
    display: inline-block;
    font-size: 11px;
}
.mysignatureusageselector .List .ListField[fieldname=customername] {
/*     color: #999; */
    width: 150px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}

.ContactListSelector .List .ListField[fieldname=position] {
    color: #999;
    width: 160px;
    display: inline-block;
    font-size: 14px;
}

.ContactListSelector .List .ListField[fieldname=fullname] {
    width: 240px;
    border-right: none;
}
.ContactListSelector .List .ListField[fieldname=fullnameinverted] {
    width: 240px;
    border-right: none;
}

.SSSProviderSelector .List .ListField[fieldname=code] {
    width: 30px;
    border-right: none;
    display: inline-block;
    color: #999;
    border-right: 1px solid #999;
    text-align: center;
}

.SSSProviderSelector .List .ListField[fieldname=name] {
    width: 220px;
    border-right: none;
    display: inline-block;
}

.ProspectListSelector .List .ListField[fieldname=fullname] {
    width: 200px;
    border-right: none;
}

.ProspectListSelector .List .ListField[fieldname=id] {
    display: inline-block;
}

.PlusBtn {
    cursor: pointer;
    border: 1px solid #aaa;
    width: 20px;
    height: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    color: #aaa;
}

.DeleteBtn1 {
    cursor: pointer;
    border: 1px solid #aaa;
    width: 20px;
    height: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    color: #aaa;
}

.EditIconBtn {
    width: 25px;
    height: 25px;
    background-image: url(ImgObjects/EditIcon.png);
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: top;
    opacity: .6;
    cursor: pointer;
}

.Column {
    width: 380px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.ShortColumn {
    width: 160px;
    vertical-align: top;
}
.ShortColumn:nth-child(1) {
    margin-right: 10px;
}

.SelectButtonGroup {
}

.SelectButtonGroup div {
    padding: 5px 15px;
    border: 1px solid #bbb;
    background-color: #7db72f;
    font-size: 18px;
    text-align: center;
    color: #fff;
    float: left;
    cursor: pointer;
}

.SelectButtonGroup .Selected {
    background-color: #547CC0;
}

.SelectButtonGroup div:nth-child(2) {
    border-radius: 4px 0px 0px 4px !important;
}

.SelectButtonGroup div:nth-last-child(1) {
    border-radius: 0px 4px 4px 0px !important;
}

.ShowSimpleOptionDisplayer .DeactivateBackground {
    bottom: 0px;
}

.SimpleOptionDisplayer {
    transition: top .8s;
    position: absolute;
    left: 250px;
    top: -2500px;
    width: 400px;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(100,100,100,.3);
    z-index: 1000;
    border-top: 4px solid orange;
    padding-bottom: 50px;
}

.ShowSimpleOptionDisplayer .SimpleOptionDisplayer {
    top: 100px;
}

.SimpleOptionDisplayer .ValueList .ListItem:nth-child(1) {
    height: 80px !important;
    background-color: #fff;
}

.SimpleOptionDisplayer .ValueList .ListItem:nth-child(1) .ListField[fieldname="name"] {
    font-size: 22px;
    color: orange;
    padding-left: 10px;
}

.SimpleOptionDisplayer .ValueList .ListItem:nth-child(1) .ListField[fieldname="description"] {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

.SimpleOptionDisplayer .ValueList .ListItem:nth-child(1) .ListField[fieldname="price"] {
    font-size: 22px;
    margin-top: 8px;
}

.SimpleOptionDisplayer .ValueList {
}

.SimpleOptionDisplayer .ValueList .ListItem {
    height: 40px;
    line-height: 40px;
    width: inherit;
    box-sizing: border-box;
    padding: 0px 15px;
    border-top: 1px solid #ddd;
    position: relative;
    overflow: hidden;
    background-color: #f8f8ff;
}

.SimpleOptionDisplayer .ValueList .ListField {
    height: 40px;
    float: left;
    color: #666;
    display: none;
}

.SimpleOptionDisplayer .ValueList .ListField[fieldname="name"] {
    width: 300px;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 30px;
}

.SimpleOptionDisplayer .ValueList .OptionGroup .ListField[fieldname="name"] {
    width: 300px;
    display: inline-block;
    padding-left: 10px;
}

.SimpleOptionDisplayer .ValueList .ListField[fieldname="price"] {
    width: 60px;
    text-align: right;
    display: inline-block;
}

.SimpleOptionDisplayer .ValueList .OptionGroup {
    border-top: 2px solid #18B4DA;
    height: 50px;
    margin-top: 20px;
}

.SimpleOptionDisplayer .ValueList .OptionGroup .ListField[fieldname="name"] {
    color: #18B4DA;
    font-size: 19px;
    margin-top: -5px;
}

.SimpleOptionDisplayer .ValueList .OptionGroup .ListField[fieldname="description"] {
    width: 280px;
    position: absolute;
    display: block;
    top: 25px;
    left: 25px;
    font-size: 12px !important;
    line-height: 16px;
    font-style: italic;
}

.SimpleOptionDisplayer .ValueList .OptionGroup .ListField[fieldname="price"] {
    display: none;
}

.AlertMessageBoxBackground {
    -webkit-transition: -webkit-transform .7s, top .7s, background-color 15s;
    position: fixed;
    width: 100%;
    height: 100%;
    top: -3000px;
    z-index: 9999999999;
    display: block !important;

}

.ShowAlertMessageBox .AlertMessageBoxBackground {
    top: 0px;
}
.AlertMessageModal.ShowAlertMessageBox .AlertMessageBoxBackground {/*     pointer-events: none; *//* background-color: rgba(0,0,0,.2); */}

.ShowConfirmMessageBox .AlertMessageBoxBackground {
    top: 0px;
}

.AlertMessageBox {
    max-width: 400px;
    min-height: 150px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    box-shadow: 5px 5px 35px rgba(100,100,100,.2);
    overflow: hidden;
    padding-bottom: 30px;
    display: block;
}
.AlertMessageBox .CloseBtn {
    width: 40px;
    height: 40px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    background-image: url(ImgObjects/CloseBtn.png);
    cursor: pointer;
    position: absolute;
    top:0px;
    right: 0px;
}
.AlertMessageBoxTitle {
    height: 10px;
    width: inherit;
    line-height: 40px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background-color: purple
}

.AlertMessage {
    width: 80%;
    min-height: 30px;
    max-height: 300px;
    overflow: auto;
    margin: 0 auto;
    margin-top: 25px;
    line-height: 28px;
    font-size: 18px;
    color: #666;
    text-align: center;
}

.AlertMessageOk {
    width: 60px;
    height: 15px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    vertical-align: baseline;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    color: #e9e9e9;
    background: #999;
}

.AlertMessageBtn {
    height: 15px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
    vertical-align: baseline;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    color: #e9e9e9;
    background: var(--blue);
    display: inline-block
}

.NotificationMessageBoxBackground {
    transition: transform .7s, top 1s;
    position: fixed;
    width: 100%;
    height: 100%;
    top: -3000px;
    z-index: 99999999;
}

.ShowNotificationMessageBox .NotificationMessageBox {
    /*bottom: 20px;*/
    /*visibility: visible;*/
    animation-name: expandUp;
    -webkit-animation-name: expandUp;   

    animation-duration: 0.7s;   
    -webkit-animation-duration: 0.7s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        

    visibility: visible !important;     
}

.ShowConfirmMessageBox .NotificationMessageBoxBackground {
    top: 0px;
}
.ShowNotificationMessageModal .NotificationMessageOk {
    display: none;
}

.NotificationMessageBox {
    color: #fff;
    background-color: #45AAE0;
    box-shadow: 0px 0px 20px rgba(0,0,0,.4);
    position: relative;
    overflow: hidden;
    width: 50%;
    height: 90px;
    position: fixed;
    /*bottom: -100px;*/
    bottom: 20px;
    left: calc(25% + 100px);
    transition: bottom .7s;
    z-index: 100000000;
    visibility: hidden;
    border-radius: 220px;
    display: flex;
    align-items: center;
    
}
.ShowLoginModule .NotificationMessageBox {
    left: 25%;
}

.CompressedBar .NotificationMessageBox { 
    left: calc(25% + 35px);
}


.NotificationMessage {
    width: 80%;
    min-height: 30px;
    margin: 0 auto;
    /* margin-top: 15px; */
    line-height: 22px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.NotificationAlertModalBackground {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 100000010;
}
.ShowNotificationAlertModalBackground {
    display: block;
}
.NotificationAlertStack {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100000020;
    pointer-events: none;
}
.NotificationPersistentBar {
    display: none;
    position: fixed;
    left: 0px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: rgba(59,138,217,.92);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0px 6px 16px rgba(0,0,0,.2);
    z-index: 100000030;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.NotificationPersistentBar[position="top"] {
    top: 0px;
}
.NotificationPersistentBar[position="bottom"] {
    bottom: 0px;
}
.NotificationPersistentBar.Show {
    display: block;
}
.NotificationPersistentBar .NotificationPersistentBarContent b {
    font-weight: 700;
}
.NotificationAlertStack[position="top"] {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}
.NotificationAlertStack[position="bottom"] {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}
.NotificationAlertStack[position="top-right"] {
    top: 15px;
    right: 15px;
}
.NotificationAlertItem {
    min-width: 260px;
    max-width: 420px;
    background-color: rgba(59,138,217,.92);
    color: #fff;
    border-radius: 3px;
    box-shadow: 0px 8px 25px rgba(0,0,0,.25);
    padding: 12px 36px 12px 14px;
    position: relative;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    animation: notificationalertshow .35s ease forwards;
    backdrop-filter: blur(2px);
}
.NotificationAlertSizeSmall {
    min-width: 130px;
    max-width: 210px;
}
.NotificationAlertSizeNormal {
    min-width: 260px;
    max-width: 420px;
}
.NotificationAlertContent {
    font-size: 14px;
    line-height: 20px;
}
.NotificationAlertClose {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    border-radius: 20px;
    background-color: rgba(255,255,255,.2);
}
.NotificationAlertItem:hover {
    transform: translateY(0px) scale(1);
    box-shadow: 0px 10px 30px rgba(0,0,0,.35);
}
.NotificationAlertColor_success {
    background-color: rgba(66,185,131,.92);
}
.NotificationAlertColor_warning {
    background-color: rgba(230,162,60,.92);
}
.NotificationAlertColor_error {
    background-color: rgba(217,83,79,.92);
}
.NotificationAlertColor_info {
    background-color: rgba(59,138,217,.92);
}
@keyframes notificationalertshow {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0px) scale(1); }
}
@keyframes notificationsbellshake {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(8deg); }
    40% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    60% { transform: rotate(-6deg); }
    70% { transform: rotate(4deg); }
    80% { transform: rotate(-4deg); }
    90% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

.NotificationMessageOk {
    width: 25px;
    height: 25px;
    cursor: pointer;
/*     background-image: url(ImgObjects/CloseBtn.png); */
/*     border: 2px solid #fff; */
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    border-radius: 30px;
    top: 15px;
    right: 15px;
    opacity: .5;
    background-color: #fff;
    color: #999;
}
.NotificationMessageOk:after {
    content: "X";
    display: block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 25px;
}    

.ConfirmMsgProceed {
    width: 60px;
    height: 15px;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    vertical-align: baseline;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #e9e9e9;
    border: solid 1px #555;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top, #888, #575757);
    display: none;
}

.ShowConfirmMessageBox .AlertMessageOk {
}

.ShowConfirmMessageBox .ConfirmMsgProceed {
    display: block;
}

.ContactIconMenu {
    background-position: -5px -10px;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/Icons.png);
    background-size: 110%;
}

.CustomerIconMenu {
    background-repeat: no-repeat;
    background-image: url(ImgObjects/ClientsIcon.png);
    background-size: auto 150%;
}

.ProspectIconMenu {
    background-position: -5px -350px;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/Icons.png);
    background-size: 110%;
}

.ContactIconMenuDark {
    background-position: -5px -15px;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/IconsDark.png);
    background-size: 110%;
}

.CustomerIconMenuDark {
    background-position: -5px -414px;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/IconsDark.png);
    background-size: 110%;
    opacity: .5;
}

.ProspectIconMenuDark {
    background-position: -5px -350px;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/IconsDark.png);
    background-size: 110%;
    opacity: .5;
}


.ModuleArea .Form .DropDownElement input {
    /*display: inline-block !important;*/
    /* display: none; */
    width: 130px;
}
.ModuleArea.EditMode .Form .DropDownElement input {
    /*display: inline-block !important;*/
    display: none;    
}


.ModuleArea .Form .DropDownElement .DropDownList {
    /* width: 130px; */
    display: none;
    /*height: 33px;*/
}
.ModuleArea.EditMode .Form .DropDownElement .DropDownList {
    /* width: 130px; */
    display: block;
    /*height: 33px;*/
}

.ModuleArea .DropDownElement.AddNewDropDownElement select{
    width: 15px !important;
    position: relative;
    left:-21px;
    display: inline-block !important;
}
.ModuleArea .DropDownElement.AddNewDropDownElement input[type="text"]{
    display: inline-block !important;
}

/*.EditMode .Form .DropDownElement .DropDownList {
    display: inline-block;
}*/

.ModuleArea .Form .DateTimeElement input[type=date] {
    display: inline-block;
    width: 130px;
    padding-left: 5px;
    padding-right: 5px;
}

.ModuleArea .Form .DateTimeElement input[type=time] {
    display: inline-block;
    width: 115px;
    padding-left: 5px;
    padding-right: 5px;
}

.RulesBox {
}

.MarkListItemBtn {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: url(ImgObjects/OkIcon.png);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    opacity: .3;

}

.ReservationsModule .MarkListItemBtn {
    position: absolute;
    z-index:1000;
    width: 25px;
    height: 25px;
    background-size: 70%;
    margin-top: 5px;
    left: 0px;
}

.MarkListItemBtn:hover {
    opacity: 1;
}

.DeleteListItemBtn {
    transition: transform 1s, background-color 1s, border-radius 1s;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: url(ImgObjects/DeleteBtn1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    background-repeat: no-repeat;
    display: inline-block;
    opacity: .3;
    border-radius: 40px;
}

.DeleteListItemBtn:hover {
    opacity: 1;
}

.DeleteListItemBtnSelected {
    transform: rotateZ(-360deg);
    background-color: #A32F2F;
    background-image: url(ImgObjects/DeleteBtnWhite.png);
    opacity: 1;
}

.List .ItemDone .ListField {
    text-decoration: line-through;
    color: #aaa !important;
}

.List .ListItem .ListField[fieldname=email] {
    font-size: 12px;
    width: 220px;
}

.InvoiceListSelector {
    width: 690px;
}

.MenuArrowBtn {
    background-repeat: no-repeat;
    background-size: auto 80%;
    width: 50px;
    height: 50px;
    padding: 3px !important;
    background-position: center;
    /* border-radius:30px; */
    /* border: 1px solid #ccc; */
    background-image: url(ImgObjects/MenuArrowBtn.png);
}

.Blue {
    background-color: #62B9E0;
    color: #fff;
}
.Green {
    background-color: var(--green);
    color: #fff;
}


.Orange {
    background-color: #ffaa00;
    color: #fff;    
}
.Gray {
    background-color: #888;
    color: #fff;
}

.Red {
    background-color: var(--red);
    color: #fff;
}

.Blue:hover {
}

.AddElementListSelector .List .ListItem {
    border-bottom: 1px dotted #ccc;
    height: auto;
    margin-bottom: 10px;
    padding: 10px 20px;
}

.AddElementListSelector .List {
    width: 350px !important;
}

.Loader {
    position: absolute;
    z-index: 1000000;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #1C6582;
}

.LoadingBox {
    width: 640px;
    margin: 0 auto;
    margin-top: 300px;
    text-align: center;
}

.LoadingBox .Loading {
    height: 80px;
}

.LoadingBox .LoadingLine {
    border-top: 1px dotted #fff;
    opacity: .7;
    margin: 20px 0px;
}

.LoadingBox .Legend {
    font-size: 28px;
    text-align: center;
    color: #fff;
}

.HeaderMessage {
    width: inherit;
    text-align: center;
    font-size: 16px;
    color: #fff;
}

.OptionList {
    display: inline-block;
    width: 380px;
    height: 400px;
    margin-right: 20px;
    border: 1px solid #e1e1e1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    vertical-align: top;
}

.DeactivateBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0,0,0,.1);
    z-index: 999;
}

.ModuleDeactivateBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0);
    z-index: 999;
}



.ListSelectorBox .List .InMenu {
    background-color: #82B48B !important;
}

.ListSelectorBox .List .InMenu * {
    color: #fff !important;
}

@media (max-width: 1330px) {
    .MenuBar .SearchActive {
        top:0px;
    }

    .MenuBar .SearchBtn {
        top: 0px;
        position: relative;
        transition: top .7s;
    }

    .MenuBar .SearchInput {
        /*      width: 40px !important; */
        /*      margin-right: 0px; */
    }

    .MenuBar .ListOptions {
        /*      width: 140px !important;     */
    }

    .MenuBar .SearchActive .SearchBtn {
        top: 0px;
    }
}



@media (max-width: 1100px) {
    .ShowMultiModuleSelector .Header .Logo {
        display: none;
    }

    .ShowMultiModuleSelector .Header .LeftMenuTopIcon {
        display: block;
    }

    .ShowSettingsPanelModule .SettingsPanelModule {
        left: 0px !important;
    }

    .MultiModuleSelector .ModuleTitle {
        font-size: 16px !important;
    }

    .MultiModuleSelector .Icon {
        display: block !important;
    }

    .SearchBox {
        /* display: none; */
    }

    .ModuleSectionTitle {
        display: none !important;
    }

    .MainArea {
        left: 80px !important;
    }

    .LeftBar > div span {
        display: none;
    }
    .LogoType {
        display: none;
    }
    .LeftBar {
        overflow: hidden;
        width: 80px !important;
    }
    .AddNewModule {
        display: none;
    }
    .AssistantMenuItem {
        display: none;            
    }
    .ShowMultiModuleSelector.ShowListSelector .ListSelectorBox {
        left: 0px !important;
    }



    .MultiModuleSelector {
        width: 80px !important;
    }

    .MultiModuleSelector .UserSelectedBox .CustomerName {
        font-size:12px !important;
        text-align: center;
        margin-top:20px;
    }
    .MultiModuleSelector .ModuleTitle {
        display: none;
    }

    .MainArea .TopBar .MenuBar > div {
        font-size: 28px;
        padding: 0px 30px;
    }

    .LeftBar .MenuBar > div {
        width: 76px !important;
        height: 55px;
        cursor: pointer;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .MultiModuleSelector .CustomerImage {
        width: 60px !important;
        height: 60px !important;
    }

    .MultiModuleSelector .ModuleTitle {
        font-size: 18px;
        top: 5px;
        /* text-align: center; */
        /* width: inherit; */
    }

    .ShowFileModule .FileModule {
        left: 0px !important;
    }

    .EditControls {
        position: relative;
        margin-right: 50px;
    }
}

.MenuItemAll {
    background-image: url(ImgObjects/ListIcon.png);
}

.MenuItemList {
    background-image: url(ImgObjects/ListIcon.png);
}

.MenuItemList span {
    display: none;
}

.MenuItemAll span {
    display: none;
}

.MenuItemItems {
    background-image: url(ImgObjects/itemicon.png);
}

.MenuItemPackages {
    background-image: url(ImgObjects/packageicon.png);
}

.MenuItemOptions {
    background-image: url(ImgObjects/optionicon.png);
}

.MenuItem:hover {
    opacity: 1;
}

.MenuItemAdd {
    background-image: url(ImgObjects/PlusBtn.png);
    background-size: auto 90%;
    position: relative;
}

.MenuItemAdd2 {
    background-image: url(ImgObjects/NewBtn2.png);
    background-size: auto 90%;
    display: none;
}
.MenuItemMinus {
    background-image: url(ImgObjects/MinusBtn.png);
    background-size: auto 90%;
}

form .MenuItemAdd {
    width: 20px;
    height: 20px;
    border: 1px solid #aaa;
    cursor: pointer;
    display: inline-block;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
    border-radius: 4px;
    margin: 10px;
}

form .MenuItemMinus {
    width: 30px;
    height: 30px;
    border: 1px solid #aaa;
    cursor: pointer;
    display: inline-block;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: top;
    border-radius: 4px;
    margin: 0px 10px;
}

.MenuItemListInfo {
    background-image: url(ImgObjects/ListIcon.png);
}

.MenuItemListTransactions {
    background-image: url(ImgObjects/ListDollarIcon.png);
}

.MenuItemListReservations {
    background-image: url(ImgObjects/list-simple-star-7.png);
}

.MenuListByCustomer {
    background-image: url(ImgObjects/ListByCustomers1.png);
}

.MenuListByContact {
    background-image: url(ImgObjects/ListByContactsC.png);
}
.MenuListByContactInst {
    background-image: url(ImgObjects/ContactsbyinstIcon.png);
}

.BackBtn1 {
    background-image: url(ImgObjects/backbtn.png);
    /*background-color: var(--blue);*/
    background-size: auto 50% !important;
    /*background-position: 10px center;*/    
}
.ToolBarList .ModalDoneBtn {
    position: absolute;
    right: 0px;
}

.EditMode .ToolBarEditor .BackBtn1 {
    background-color: transparent;
}

.CalendarViewBtn {
    background-image: url(ImgObjects/CalendarBack.png);
    background-color: var(--blue);
    background-size: auto 50% !important;
    background-position: 10px center;
}

.MenuListByAccount {
    background-image: url(ImgObjects/appaccountsicon.png);
}
.MenuListByAccount1 {
    background-image: url(ImgObjects/appaccountsicon1.png);
}

.MenuListStatements {
    background-image: url(ImgObjects/liststatements.png);
}

.MenuArrowLeft {
    background-image: url(ImgObjects/ArrowLeft.png);
}

.MenuArrowRight {
    background-image: url(ImgObjects/ArrowRight.png);
}

.MenuDash {
    background-image: url(ImgObjects/ConnectivityIcon.png);
}

.MenuCustomersList {
    background-image: url(ImgObjects/UserIcon0.png);
}
.MenuListByStatusBtn {
    background-image: url(ImgObjects/ListByStatus.png);
}

.MenuProfessionalList {
    background-image: url(ImgObjects/ProfessionalIcon.png);
    background-size: auto 110%;
}

.BillingModule .MenuCustomersList {
}

.MenuServicesList {
    background-image: url(ImgObjects/ArrowFilledIcon.png);
}
.ServiceListGeneralBtn {
    background-image: url(ImgObjects/ArrowIcon.png);
}
[useservicespecificmode="true"] .ServiceListGeneralBtn {
    display: none;
}


.MenuResourceServicesList {
    background-image: url(ImgObjects/ServiceResource.png);
}
.MenuResourceServicesInstitutionList {
    background-image: url(ImgObjects/ServiceResourceInstitution.png);
}

.BillingModule .MenuServicesList {
}

.MenuItemsList {
    background-image: url(ImgObjects/itemicon.png);
}

.MenuInventoryList {
    background-image: url(ImgObjects/itemicon.png);
    display: none;
}

.MenuAccountsList {
    background-image: url(ImgObjects/appaccountsicon1.png);
}

.BillingModule .MenuAccountsList {
}

.MenuTasksList {
    background-image: url(ImgObjects/tasklisticon1.png);
}

.BillingModule .MenuTasksList {
}

.MenuConsolidateList {
    background-image: url(ImgObjects/consolidatelist.png);
}

.BillingModule .MenuConsolidateList {
}

.MenuOrdersList {
    background-image: url(ImgObjects/LayersIcon.png);
}

.PayBtn {
    background-image: url(ImgObjects/PayBtn1.png);
}

.BillingModule .PayBtn {
}

.OptionsBtn {
    background-image: url(ImgObjects/SettingsIcon4.png);
}

.ToolBarEditor .OptionsBtn {
    background-image: url(ImgObjects/SettingsIcon5.png);
}

.ViewFieldBtn {
    background-image: url(ImgObjects/CreditCardIcon.png);
    background-size: 60%;
}

.ToolBar .SelectModeBtn {
    background-image: url(ImgObjects/selectbtn.png);
    background-size: 60%;
}

.ToolBar .SelectAllItemsBtn {
    background-image: url(ImgObjects/selectallitemsbtn.png);
    background-size: 60%;
    /*-webkit-filter: invert(100);*/
    opacity: 1 !important;
}

.ToolBar .AddItemToListBtn {
    background-image: url(ImgObjects/AddItemToListBtn.png);
    background-size: 62%;
    /*-webkit-filter: invert(100);*/
    opacity: 1 !important;
}

.BillingModule .OptionsBtn {
}

.CopyBtn {
    background-image: url(ImgObjects/CopyBtn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    opacity: .5;
    cursor: pointer;
}
.List .CopyBtn {
    height: 40px;
    width: 30px;
    display: inline-block;
    float: left;
}
.BillingModule .CopyBtn {
}

.sentlistbtn {
    background-image: url(ImgObjects/emailsenticon.png);
}

.draftlistbtn {
    background-image: url(ImgObjects/drafticon.png);
}

.outbotlistbtn {
    background-image: url(ImgObjects/outboxicon.png);
}

.ListAddBtn {
    background-image: url(ImgObjects/listaddicon.png);
}

.ObjectAddBtn {
    background-image: url(ImgObjects/objectadd.png);
}

.ReportBtn {
    background-image: url(ImgObjects/ReportIcon3.png);
}

.HistoryBtn {
    background-image: url(ImgObjects/ClockIcon2.png);
}

.BarArea {
    position: relative;
    overflow: hidden;
    overflow-x: auto;
    height: 400px;
    width: inherit;
}

.BarGraph {
    margin-bottom: 30px;
    padding: 20px;
    position: absolute;
    bottom: 0px;
}

.BarGraph .GBar {
    min-width: 30px;
    min-height: 1px;
    display: inline-block;
    margin: 0px 3px;
    background-color: #FF7200;
    font-size: 11px;
    position: relative;
    vertical-align: bottom;
}

.BarGraph .GBar .BarValue {
    position: absolute;
    top: -35px;
    left: 0px;
    width: 100%;
    text-align: center;
}

.BarGraph .GBar .BarCount {
    position: absolute;
    bottom: 5px;
    left: 0px;
    width: inherit;
    text-align: center;
    display: none;
}

.BarGraph .GBar .BarDateNumber {
    position: absolute;
    bottom: -35px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: #999;
}

.RedColor {
    color: #E25620 !important;
}

/*  .Portrait .LeftBar .MenuBar > div .Icon{
        width: 80px;
        height: 80px; 
        position: absolute;
        top:0px;
        left:0px;
        background-repeat: no-repeat;
        background-image: url(ImgObjects/Icons.png);
        background-size:150%;
    }
*/
.MultiModuleSelector .UserSelectedBox {
    min-height: 100px;
    margin:0px 10px;
}

.MultiModuleSelector .UserSelectedBox .CustomerImage {
    border-radius: 150px;
    padding: 0px;
    border: 6px solid #eee;
    box-shadow: 0px 0px 10px #aaa;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(ImgObjects/ContactIcon.jpg);
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
}
.MultiModuleSelector .UserSelectedBox .CustomerImage[style*='background-image: url("")'] {
    background-image: url(ImgObjects/ContactIcon.jpg) !important;    
}


.MultiModuleSelector .UserSelectedBox .CustomerName {
    font-size: 16px;
    font-weight: bold;
    color: var(--list-font-color);
    text-align: center;
    /* height: 30px; */
    width: inherit;
    line-height: 20px;
    margin-top: 10px;
}

.MultiModuleSelector .ModuleTitle {
    position: absolute;
    top: 15px;
    padding: 10px;
    font-size: 18px;
    color: #fff;
    overflow: hidden;
    text-align: center;
    width: inherit;
    box-sizing: border-box;
}

.LeftBar .MenuBar {
    transition: margin-left .7s;
    overflow-y: auto;
    height: calc(100% - 50px);
    display: block;
    scrollbar-width: none;

}
.MultiModuleSelector .MenuBar {
    height: autofill;
    width: inherit;
    overflow: hidden;
    overflow-y: auto;
    
}

.LeftBar .UserSelectedBox {
    transition: margin-left .7s;
}

.ShowListSelector .MultiModuleSelector .MenuBar {
    margin-left: -200px;
}

.ShowListSelector .MultiModuleSelector .UserSelectedBox {
    margin-left: 200px;
}

.MultiModuleSelector {
    transition: left .3s;
    position: absolute;
    width: 220px;
    top: 60px !important;
    left: 0px;
    bottom: 0px;
    color: #fff;
    background-color: rgb(48, 54, 65);
    z-index: 100;
    overflow: hidden;
}

.MultiModuleSelector .Icon {
    display: none;
}

body .MultiModuleSelector .MenuBar > div {
    padding-left: 20px;
}

.SearchBox {
    display: inline-block;
    text-align: center;
}
.SearchBox .SearchSelector {
    width: auto;
    transition: width .7s;
}
.SearchBox .SearchSelector * {
/*     display: none; */
    color: #888;
}
.SearchBox.showSearchSelector .SearchSelector * {
    display: inline-block;
}
.SearchBox .FirstSearchField {
    display: none;
    height: 20px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #888;
    border-radius: 30px 0px 0px 30px !important;
    vertical-align: middle;
    border: 1px solid #d1d1d1;
    outline: none;
    width: 90px;
    margin-left: 5px;
}
.ToolBar .SearchBox .FirstSearchField {
    height: 15px;
    line-height: 15px;
}
[searchfield="nameandlastname"] .FirstSearchField {
    display: inline-block;
}
[searchfield="nameandlastname"] .SecondSearchField {
    display: inline-block;
    width: 90px;
    padding: 5px 10px;
    margin-left: 0px;
    border-radius: 0px 30px 30px 0px !important;
}

.FormGeneralSection {
    padding-left: 200px;
    height: 180px;
}

.FormGeneralSection .PhotoId {
    position: absolute;
    left: 15px;
}

.MenuBar .ListLimitSelector {
    width: 110px;
}

.SearchDBBtn {
    background-image: url(ImgObjects/IconSearchDB.png) !important;
}

.ImageViewBtn {
    background-image: url(ImgObjects/ImageViewIcon.png);
}
.TimeViewBtn {
    background-image: url(ImgObjects/timeviewicon.png);    
}
.ListViewBtn {
    background-image: url(ImgObjects/ListViewIcon.png);
}
.SlotViewBtn {
    background-image: url(ImgObjects/SlotViewIcon.png);
}
.SlotViewBtn {
    background-image: url(ImgObjects/SlotViewIcon.png);
}

.FormGeneralInfo {
    display: inline-block;
    vertical-align: top;
    width: 570px;
    margin-top: 60px;
}

.Form [name="id"] {
    width: 100px;
    margin-left: 0px;
    /* border-right: 1px solid #999; */
    padding-right: 45px !important;
}

.Form [name="serviceduration"] {
    width: 90px !important;
}

.Form [name="groupname"] {
    width: 130px !important;
}

.Form [name="typename"] {
    width: 130px !important;
}

.Form [name="statusname"] {
    width: 130px !important;
    margin-right: 0px !important;
}

.Form .FormElement [name^="emergencycontactname"] {
    width: 220px;
}

.Form .FormElement [name^="emergencycontactphone"] {
    width: 150px;
}

.Form .FormElement [name^="contactrelationship"] {
    width: 180px;
}

@media (max-width: 360px) {
    .ReportsListSelector {
        width: 360px;
    }
    .FileModule .RestoreAutoSaveBtn {
        display: none;
    } 
    .QuickReportBtn {
        display: none;
    }

    .CustomersModule .List .ListItem .ListField[fieldname=fullname] {
        display: block;
        width: 50px !important;
    }

    .LoadLastCustomerBtn {
        position: absolute !important;
        top: -40px !important;
        right: 85px !important;
    }

    .NewCustomerBtn {
        position: absolute !important;
        top: -50px !important;
        right: 8px !important;
    }

    .EditBtn {
        right: 50px;
    }

    .ServiceListSelector {
        width: 310px;
    }

    .ReservationsModule ListField {
        display: none !important;
    }

    .ReservationsModule ListField[fname="name"] {
        width: 230px !important;
        display: block !important;
        margin-left: 50px;
    }

    .ReservationsModule [name="servicedescription"] {
        width: 90% !important;
    }

    .SchedulesModule ListField {
        display: none !important;
    }

    .SchedulesModule ListField[fname="name"] {
        width: 250px !important;
        display: block !important;
    }

    .SchedulesModule [name="servicedescription"] {
        width: 90% !important;
    }

    .SchedulesModule[listviewmode="ListView"] .List .ListItem .ListField[fieldname=forname] {
        width: 200px !important;
    }

    .ReservationsModule .List .ListItem .ListField {
        /* display: none !important; */
    }

    .ReservationsModule .List .ListItem .ListField[fieldname=status] {
        display: block !important;
        width: 40px !important;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .ReservationsModule .List .ListItem .ListField[fieldname=forname] {
        display: block !important;
        width: 155px !important;
        border: none;
    }

    .TemplatesModule .List .ListItem .ListField {
        display: none !important;
    }

    .TemplatesModule .List .ListItem .ListField[fieldname=id] {
        display: block !important;
    }

    .TemplatesModule .List .ListItem .ListField[fieldname=name] {
        display: block !important;
        width: 220px !important;
        border: none;
    }

    .InstitutionsModule .List .ListItem .ListField {
        display: none !important;
    }

    .InstitutionsModule .List .ListItem .ListField[fieldname=code] {
        display: block !important;
    }

    .InstitutionsModule .List .ListItem .ListField[fieldname=name] {
        display: block !important;
        width: 200px !important;
        border: none;
    }

    .PaymentMethodIcon {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
    }
    .ReservationsModule .ToolBar .MenuItemCalendarDate {
        background-image: none;
    }
    .MenuItem {
        /* height: 25px; */
        /* line-height: 25px; */
        /* min-width: 45px; */
        background-size: auto 100%;
    }

    .UsersModule .List .ListItem .ListField {
        display: none !important;
    }

    .UsersModule .List .ListItem .ListField[fieldname=user] {
        display: block !important;
        width: 270px !important;
        border: none;
    }
}

@media (max-width: 850px) {
    .MenuBar .HelpMenuBtn {
        display: none;
    }
    .Header .ReportIcon2 {
        display: none;
    }
    .Header .QuickHelpBtn {
        display: none;
    }    
    .ShowQuickReportArea .ModulesArea {
        width: 100% !important;
    }
    .QuickReportBox {
        background-color: #f6f6f6 !important;
    }

    .CompressBarBtn {
        display: none;
    }
    .EmailerModule .List .ListItem .ListField[fieldname=subject] {
        width:280px !important;
    }
    .CustomerListSelector .List .ListItem .ListField[fieldname=sssprovider] {
        display: none !important;
    }
    .CustomerListSelector .List .ListItem .ListField[fieldname=address] {
            display: none !important;
    }

    .ListArea .List {
        overflow-x: auto;
    }

    .RecordIndex {
        top: 30px!important;
    }

    .MainArea .Header .UserBox {
        right: 20px !important;
    }

    .ServicesModule .List .ListItem .ListField {
        display: none !important;
    }

    .ServicesModule .List .ListItem .ListField[fieldname=groupname] {
        display: block !important;
        width: 90px !important;
    }

    .ServicesModule .List .ListItem .ListField[fieldname=name] {
        display: block !important;
        width: 160px !important;
        border: none;
    }

    .ShowHomeModule {
        background-image: url(ImgObjects/backgroundphone6.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top left;
    }

    .ConfigureListColumntElement {
        display: none !important;
    }

    .LanguageBox {
        width: 130px;
    }

    .LeftBar .ExitBtn {
        display: block !important;
    }

    .MenuBar .LogoutBtn {
        display: none;
    }

    .MenuBar .UpdateIcon {
        right: 0px;
    }

    body .DocumentsModule .Form [name="document"] {
        width: 95% !important;
        padding: 20px 10px !important;
    }

    .DocumentsModule .List .ListItem .ListField {
        display: none !important;
    }

    .DocumentsModule .List .ListItem .ListField[fieldname=id] {
        display: block !important;
        width: 20px;
    }

    .DocumentsModule .List .ListItem .ListField[fieldname=name] {
        display: block !important;
        width: 225px !important;
        border: none;
    }

    .UpdateAppBtn version {
        top: -30px !important;
        left:15px !important;
    }

    .SwitchBox {
        display: none !important;
    }

    .MenuBar .HelpBtn {
        display: none;
    }

    .UpdateAppBtn {
        position: relative !important; 
        width: 150px !important;
        text-align: left !important;
    }
    .ForceUpdateMiniBtn {
        width: 50px !important;
        background-size: 30% !important;
    }

    fastsectionaccessbar {
        display: none;
    }

    .MenuBar .SearchBox {
        background-color: #eee;
        position: absolute;
        left: 0px;
        right: auto;
        height: 55px;
        line-height: 55px;
        width: 100%;
        z-index: 1000;
        top: -55px;
        box-sizing: border-box;
        transition: top .7s;
        margin-left: 0px;
    }

    .ShowSearchBox {
        top: 0px !important;
    }

    .ShowSearchBox .HideSearchBoxBtn {
        display: inline-block;
    }

    .ShowSearchBox input {
        width: 190px !important;
        height: 25px;
        line-height: 25px;
    }

    .ShowSearchBtn {
        display: inline-block !important;
    }

    .LoginFooter {
        display: none;
    }

    .FormGeneralInfo {
        margin-top: 0px !important;
        width: auto !important;
    }

    .VersionBox {
        /*      background-color: red; */
        /*      text-align: left !important; */
    }

    .VersionBox span {
        display: block !important;
    }

    .ModuleArea .ToolBar .MenuBar .DoneBtn {
        /*right: 50px;*/
    }
     .ToolBar .MenuItem {
         width: 20px !important;
         min-width: 40px;
     }
     .ToolBar .MenuItem.MenuItemSelect {
         width: 100px !important;
         min-width: 40px;
     }

     .ToolBar .DeleteBtn {
         right: 40px;
     }
     .ToolBar .EditBtn {
         right: 20px;
     }
     .ToolBar .DoneBtn {
         right: 0px;
     }
    .ModuleArea .ToolBarEditor .MenuBar {
         width: 100% !important;
     }
    .ReportsModule[dashmode=dash] .ShowReportIcon {
        margin-left: 100px;
    }


}

@media (max-width: 480px) {
    .MenuBarGroup {
        width: 40px;
        /* max-width: 40px !important; */
    }
    .LoadingLabel1 { 
        width: auto !important;
    }
    .LoadingLabel2 { 
        width: auto !important;
    }
    .MultiModuleSelector .Header {
        /* display: none; */
    }
    .MultiModuleSelector .MenuBar {
        margin-top:20px;
    }
    .ModuleSectionTitle {
        display: none !important;
    }
    .ModuleSectionSubtitle {
        display: none !important;
    }

    .MultiModuleSelector .Header {
        display: none;
    }
    .ShowFileModule .MultiModuleSelector .Header {
        display: block;
    }
    .ShowFileModule .LeftMenuTopIcon {
        display: none !important;
    }
    .ShowFileModule .FileModule {
        top:0px !important;
    }

    .DashReportArea {
        padding-bottom: 150px !important;
        padding-top:30px;
        box-sizing: border-box;
        padding: 0px 10px;
    }

    .CustomersModule .List .ListItem .ListField[fieldname=fullname] {
        display: block;
        width: 350px !important;
    }
    .ReservationsModule .FormBlock {
        background-color: transparent !important;
        border: none !important;

    }
    .ReservationsModule .Form {
        border: none !important;
    }

    .Header .UserName {
        display: none !important;
    }

    .MultipleRecordSwitch {
        display: none !important;
    }

    .ServiceListSelector {
        width: 320px;
    }
    .ListSelectorBox.ShowSelectAll .SelectAllBtn {
        display: none;
    }
    .ListSelectorBox .ExtendBtn { 
        display: none !important;
    }
    .ItemsListSelector {
        width: 320px !important;
    }

    .ItemsListSelector .List .ListField[fieldname=price] {
        width: 40px;
        font-size: 12px;
        border: none;
    }

    .List .ListItem {
        height: 50px;
        overflow: hidden;
    }
    .InstitutionsModule .List .ListItem .ListField[fieldname=name] {
        width:300px !important;
    }

    .List .ListItem .ListField {
        font-size: var(--input-form-size);
        /* height: 50px; */
        line-height: 50px;
    }

    body {
        --input-form-size: 19px; }

    .ReportsModule .ToolBar select {
        /* width: 140px !important; */
    }

    .PrintBtn {
        display: none !important;
    }

    .TotalGuestIndex {
        left: 55px !important;
    }

    .TotalRecordIndex {
        left:100px !important;
    }
    .TotalNewRecordIndex {
        left:50px !important;
    }

    .ToolBar .ListCounter {
        display: none;
    }

    .WeekDays > div > div {
        font-size: 12px;
        color: #999;
    }

    .CalendarTodayBtn {
        display: none;
    }

    .CalendarYear {
        display: none;
    }

    .CalendarMonth {
        float: right;
        margin-right: 55px;
        vertical-align: top;
        font-size:14px !important;
    }

    .CalendarListArea {
        padding: 0px;
    }

    .LeftBar {
        left: -80px !important;
    }
    .ShowMultiModuleSelector.ShowListSelector .ListSelectorBox {
        left: 80px !important;
        width: 280px;
    }
    .ShowMultiModuleSelector.ShowListSelector .ListSelectorBox .SearchBox input{
        width: 110px;
    }

    .ShowLeftBar .LeftBarBackground {
        height: 100%;
    }

    .BillingModule form [name="total"] {
        width: 80px !important;
    }

    .MainArea {
        left: 0px !important;
    }

    .ToolBarEditor .EditControls {
        position: static;
    }

    .Form .FormElement {
        width: 95% !important;
    }

    .Form .FormElement input {
        max-width: 95% !important;
    }

    .Form .FormElement textarea {
        max-width: 95% !important;
    }

    .Form .FormElement select {
        max-width: 95% !important;
    }
    .ProgressNotesModule form .AgreedElement {
        position: absolute;
        top: 0px;
        right: 0px;
        display: inline-block;
        width: 100% !important;
        width: 150px !important;
    }
    .LeftMenuIcon {
        display: block !important;
    }

    .ToolBar .PinIcon {
        display: none;
    }
    [activemodule=ProgressNotesModule] .ToolBar .MenuItemsList {
        display: none;
    }

    .MainArea .Header .UserBox {
        /* display: none; */
        right: 20px !important;
    }

    .ProspectsModule .SummaryBox {
        margin: 0px !important;
        margin-bottom: 30px !important;
        width: inherit !important;
    }

    .ProspectsModule .DashboardArea {
        padding: 0px;
        width: 100%;
    }

    .Column {
        width: 100% !important;
    }

    .ListArea {
        padding: 0px;
    }

    .InfoPanel {
        background-color: transparent !important;
        ; padding: 0px !important;
        margin-bottom: 10px !important;
        border: none !important;
        border-radius: 0px !important;
        box-shadow: none !important;
        border-top: 1px dotted #333 !important;
        padding-top: 30px !important;
        width: 100% !important;
        transition: height 1s;
    }

    .InfoPanel > * {
        width: 100% !important;
    }

    .ModuleArea {
        background-color: #fff !important;
    }

    .FormArea .Form {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .FormArea {
        width: 100%;
        overflow-x: hidden;
        padding: 0px 10px;
        box-sizing: border-box;
    }

    form .MenuItem {
        width: 30px !important;
        display: inline-block !important;
        margin-left: -40px;
    }

    .ReportBox {
        min-width: 200px !important;
        width: 380px !important;
        margin: 0px !important;
        margin-bottom: 60px !important;
        box-shadow: 0px 10px 45px rgba(100,100,100,.5);
        padding-bottom: 30px;
        margin-left: -20px !important;
    }

    .ReportsModule .ReportBoxData {
        padding: 0px !important;
        width: 100% !important;
        margin-left: 0px;
    }
    .ReportBox .ChartCounter {
        margin:15px !important;
    }

    .ReservationsModule [name="servicedescription"] {
        border-top: 1px solid #ddd;
        padding: 0px !important;
        width: 100% !important;
        ; }

    group {
        width: 100%;
    }

    .ReservationForm > * {
        max-width: 100% !important;
    }
}

.ListSelectorArea {
    z-index: 10010;
}

body .MultiModuleSelector {
    transition: left .7s;
    left: 300px;
    width: 130px;
    background-color: #011;
    /* background-color: #b44f02; */
    /* background-color: #40905e; */
    /*     background-color: var(--leftbar-background-color-dark) */
}
body .FileModule.MultiModuleSelector {
    background-color: #40905e;
}
.MultiModuleSelector .ModuleLogo {
    width: 80px;
    height: 80px;
    background-size: auto 60%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 55px;
    width: inherit;
}

.UploadControl div {
    border: 2px solid #fff;
    display: inline-block;
    border-radius: 44px;
    color: #fff;
    background-color: #bbb;
    /* font-weight: bold; */
    width: 25px;
    height: 25px;
    text-align: center;
}

.UploadControl input {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
}

.UploadControl {
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: none;
}
.PhotoElement .UploadControl {
    left:-10px;
    bottom: 10px;
    padding: 0px !important;
    /* border: 1px solid red; */
}
.MenuItemAdd .UploadControl {
    left: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    opacity: 0 !important;
    display: block;
    cursor: pointer;
}

.MenuItemAdd .UploadControl input {
    height: 30px !important;
}

[listviewmode="ImageView"] .List .ListItem .ListField[fieldname=image] {
    color: transparent;
}

.RemovePhotoBtn {
    transition: opacity .7s, background-color .7s;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 35px;
    background-image: url(ImgObjects/CloseGrayBtn.png);
    opacity: .5;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border-radius: 40px;
    display: none;
    background-color: rgba(255,255,255,1);
}
.EditMode .RemovePhotoBtn {
    display: block;
}
.PhotoElement .RemovePhotoBtn {
    right:10px;
    top:-5px;
}
.EditMode [style*="background-image"] .RemovePhotoBtn {
    display: block;
}

.RemovePhotoBtn:hover {
    opacity: 1;
}

.MonthDay {
    transition: transform .7s;
    transform-origin: center;
    width: 13.6%;
    height: 90px;
    float: left;
    position: relative;
    overflow: hidden;
    /* margin: 3px; */
    padding-bottom: 10px;
    /*  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)); */
    background-color: #EDEDEE;
/*     -webkit-box-shadow: 1px 1px 1px #e0e0e0; */
    padding-top: 20px;
    outline: 1px solid white;
}

.MonthDay > span:first-child {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #888;
    position: absolute;
    top: 10px;
    left: 10px;
}

.MonthDay > div {
    font-family: helvetica;
    font-size: 10px;
    color: #444;
    margin-left: 2px;
    padding-left: 4px;
    width: 205px;
    -webkit-transition: -webkit-transform .7s, background-color .4s;
    -webkit-border-radius: 2px;
    height: 15px;
    cursor: pointer;
}

.MonthDay > div:hover {
    background-color: #fff;
}

.MonthDayPusher {
    width: 13.6%;
    height: 100px;
    float: left;
    /* margin: 3px; */
}

.OptionSelectorBackground {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    bottom: 0px;
    will-change: right;
}

.OptionSelectorBox .ListCounter {
    position: absolute;
    right: 25px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    color: #e5e5e5;
}

.OptionSelectorBox {
    transition: left .7s;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: -2800px;
    bottom: 0px;
    width: 320px;
    background-color: #fff;
    overflow: hidden;
    will-change: left;
    box-shadow: 5px 0px 10px rgba(100,100,100,.1);    
}

.OptionSelectorBox .OptionPanel {
    display: none;
}

.ShowOptionSelector .OptionSelectorBox {
    left: 0px;
    z-index: 10000;
}

.ShowOptionSelector .OptionSelectorBackground {
    right: 0px;
}
.OptionSelectorBox .List {
    height: 100%
}
.OptionSelectorBox .OptionPanel {
    height: calc(100% - 50px);
    overflow-y: auto;
    
}

.OptionSelectorBox .OptionSelectorTopBar {
    width: 100%;
    height: 50px;
    background-color: var(--orange);
    position: relative;
    line-height: 50px;
}
.OptionSelectorBox .OptionSelectorTopBar .Title {
    color: #fff !important;
}
.OptionSelectorBox .Title {
    color: #aaa;
    margin: 0px 20px;
    line-height: 50px;
    font-size: 18px;
    text-align: left;
}

.OptionSelectorBox .DoneBtn {
    color: #E9997A;
    position: absolute;
    right: 0px;
    border-right: none;
    cursor: pointer;
    top: 0px;
    height: 50px;
    width: 50px;
}

.OptionSelectorBox .OptionSelectorTopBar2 {
    width: 100%;
    height: 50px;
    background-color: #a6b4bC;
    color: #fff;
    position: relative;
    line-height: 50px;
}

.OptionSelectorArea {
    z-index: 10010;
    will-change: tranform;
}



.AssistantListEditorBackground {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    bottom: 0px;
    will-change: right;
}

.AssistantListEditorBox .ListCounter {
    position: absolute;
    right: 25px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    color: #e5e5e5;
}

.AssistantListEditorBox {
    transition: left .7s;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: -2800px;
    bottom: 0px;
    width: 320px;
    background-color: #fff;
    overflow: hidden;
    will-change: left;
    box-shadow: 5px 0px 10px rgba(100,100,100,.1);    
}

.AssistantListEditorBox .OptionPanel {
    display: none;
}

.ShowAssistantListEditor .AssistantListEditorBox {
    left: 0px;
}

.ShowAssistantListEditor .AssistantListEditorBackground {
    right: 0px;
}

.AssistantListEditorBox .AssistantListEditorTopBar {
    width: 100%;
    height: 50px;
    background-color: #001;
    color: #fff;
    position: relative;
    line-height: 50px;
}

.AssistantListEditorBox .Title {
    color: #aaa;
    margin: 0px 20px;
    line-height: 50px;
    font-size: 18px;
    text-align: left;
}

.AssistantListEditorBox .DoneBtn {
    color: #E9997A;
    position: absolute;
    right: 0px;
    border-right: none;
    cursor: pointer;
    top: 0px;
    height: 50px;
    width: 50px;
}

.AssistantListEditorBox .AssistantListEditorTopBar2 {
    width: 100%;
    height: 50px;
    background-color: #a6b4bC;
    color: #fff;
    position: relative;
    line-height: 50px;
}

.AssistantListEditorArea {
    z-index: 10010;
    will-change: tranform;
}
.AssistantListEditorArea .List {
    height: calc(100% - 100px);
    overflow-y: auto;
}

.AssistantListEditorBox .AssistantListEditorTopBar2 .AddNewItemToList {
    transition: padding 1s;
    box-shadow: none;
    font-size: var(--input-form-size);
    color: var(--form-input-color);
    padding: 5px 0px;
    padding-right: 7px;
    border: none;
    border-bottom: 1px solid var(--input-border-color); 
    width: 250px;
    outline: none;
    font-family: inherit;
    height: 30px;
    box-sizing:border-box;
    margin-left: 10px;
    padding: 0px 5px;
}
.AssistantListEditorBox .AssistantListEditorTopBar2 .AddNewItemBtn {
    background-image: url(ImgObjects/PlusBtn0.png);
    background-repeat: no-repeat;
    background-size: auto 80%;
    width: 25px;
    height: 25px;
    padding: 3px !important;
    background-position: center;
    border-radius: 4px;
    background-color: var(--blue);
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
}


.GuestIndex {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #3CB1DC;
    display: block;
    border-radius: 30px;
    color: #fff;
    margin: 0 auto;
    display: none;
    position: relative;
    top: 20px;
}

.RecordIndex {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #21C977;
    display: block;
    border-radius: 30px;
    color: #fff;
    margin: 0 auto;
    display: none;
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 13px;
    font-weight: 800;
    border: solid 2px #fff;
}

.NewRecordIndex {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #419CDE;
    display: block;
    border-radius: 30px;
    color: #fff;
    margin: 0 auto;
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 400;
}

.TotalNewRecordIndex {
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: block;
    background-color: var(--blue1);
    border-radius: 30px;
    color: #fff;
    margin: 0 auto;
    position: absolute;
    top: 8px;
    left: 70px;
    border: 2px solid #fff;
    cursor: pointer;
    padding: 0px 10px;
}

.TotalRecordIndex {
    /*  width:30px; */
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #21C977;
    display: block;
    border-radius: 30px;
    color: #fff;
    margin: 0 auto;
    position: absolute;
    top: 8px;
    left: 120px;
    border: 2px solid #fff;
    cursor: pointer;
    padding: 0px 10px;
}

[indexviewmode="newrecordindexes"] .NewRecordIndex {
    display: block;
}

[indexviewmode="guestindexes"] .GuestIndex {
    display: block;
}

[indexviewmode="recordindexes"] .RecordIndex {
    display: block;
}

.AddPhotoBtn {
    background-image: url(ImgObjects/AddPhotoIcon.png);
    display: none;
}

.List .ListTotalLine .ListField {
    background-image: none !important;
}

.ShowSearchBtn {
    display: none;
}

.ViewModeItem {
    display: none;
}
.ViewMode .ViewModeItem {
    display: inline-block;
}
.EditModeItem {
    display: none;
}
.EditMode .EditModeItem {
    display: inline-block;
}
.NewModeItem {
    display: none;
}
.AddNewMode .NewModeItem {
    display: inline-block;
}


.PrintArea {
    display: none;
    width: 100%;
    height: 100%;
}
.PrintArea textarea {
    border: none;
    padding: 0px;
}
.PrintArea .DuplicateBtn {
    display: none;
}
.PrintToScreenMode .UpdatingBar {
    display: none;
}
.PrintToScreenMode .PrintArea {
    display: block;
}

.PrintToScreenMode .PageContentArea {
    display: none;
}
[activemodule=BillingModule].PrintToScreenMode .AddDescriptionLineBtn {
    display: none;
}
[activemodule=BillingModule].PrintToScreenMode .DiscountAddRemoveBtn {
    display: none;
}
[activemodule=BillingModule].PrintToScreenMode .DescriptionElement .ListItem .DocumentLineDuplicateBtn {
    display: none !important;
}

[activemodule=BillingModule].PrintToScreenMode .DocumentDescription {
    background-color: #D4E7ED;
    border-top: dashed 1px #999;
    border-bottom: dashed 1px #999;
    margin-top:60px;
    margin-bottom: 20px;
}
[activemodule=BillingModule].PrintToScreenMode .DescriptionHeader > div {
    color: #333 !important;
}

/*@media print {
  @page { margin: 0; }
  body { margin: 0; }
  * {
    -webkit-print-color-adjust:exact;
    box-shadow: none !important;
  }
  .PrintArea {
    width: 1100px;
    height: 10000px;
    height: 1425px;     
    background-color: #fff;
    position: relative;
    overflow: hidden;   
    box-sizing: border-box;
    padding:100px;
    padding-top: 30px;
    margin: 0 auto;
    border:4px solid red;
  }
  .CustomerPhoto {
    padding: 0px;
    margin: 0;
    border:0px;
  }
  .PrintArea > div {

  }
  .PrintArea .CloseBtn {
    display: none;
  }
  .PrintArea .PrintTitle {
    color: #999 !important;
    font-size: 28px;
    padding: 10px;
    text-transform: capitalize;;
  }
  input { 
    border-style: none; 
    display: inline
  }
  select { 
    border-style: none; 
    display: inline
  }
  textarea { 
    border-style: none; 
    display: inline
  }

  .BillingModule .NoteBox {
    display: none;
  }
  .BillingModule .NewCustomerBtn {
    display: none;
  }
  .AlertMessageBoxBackground {
    display: none;
  }
  .ColorPickerBackground {
    display: none;
  }
  .FieldActionIcon {
    display: none !important;
  }
    .NotificationMessageBox {
        display:none;
    }

}*/
.OffLineIndicator {
    position: absolute;
    top: -100px;
    right: 240px;
    z-index: 100000;
    text-align: center;
}

.OffLineMode .OffLineIndicator {
    top: 15px;
}

.OffLineIndicator .Circle {
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background-color: #D01D23;
    border: 1px solid #fff;
    box-shadow: 0px 0px 15px #fff;
    display: inline-block;
    position: relative;
    top: 3px;
}

.OffLineIndicator .OffLineLabel {
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    display: inline-block;
    vertical-align: center;
    margin-left: 10px;
}

form .FormElement input[name=gender] {
    width: 80px;
}

form .FormElement input[name=children] {
    width: 40px;
}

form .FormElement input[name=maritalstatus] {
    width: 110px;
}

form .FormElement input[name=company] {
    width: 180px;
}

form .FormElement input[name=legalname] {
    width: 135px;
}

form .FormElement input[name=dbaname] {
    width: 135px;
}

form .FormElement input[name=taxid] {
    width: 145px;
}

form .FormElement input[name=fax] {
    width: 130px;
}

form .FormElement input[name=email] {
    width: 280px;
}

form .FormElement input[name=email2] {
    width: 280px;
}

form .FormElement input[name=website] {
    width: 245px;
}

form .FormElement input[name=address] {
    width: 260px;
}

form .FormElement input[name=address2] {
    width: 130px;
}

form .FormElement input[name=city] {
    width: 140px;
}

form .FormElement input[name=state] {
    width: 145px;
}

form .FormElement input[name=zipcode] {
    width: 90px;
}

form .FormElement input[name=billingaddress] {
    width: 260px;
}

form .FormElement input[name=billingaddress2] {
    width: 130px;
}

form .FormElement input[name=billingcity] {
    width: 140px;
}

form .FormElement input[name=billingstate] {
    width: 125px;
}

form .FormElement input[name=billingzipcode] {
    width: 90px;
}

form .FormElement [name=sssprovider] {
    width: 350px;
}

form .FormElement [name=sssplan] {
    width: 300px;
}

form .FormElement [name=sssnumber] {
    width: 300px;
}

form .FormElement input[name=billingaddress] {
    width: 260px;
}

form .FormElement input[name=billingaddress] {
    width: 260px;
}

form .FormElement input[name=industry] {
    width: 190px;
}

form .FormElement input[name=yearsinbusiness] {
    width: 50px;
}

form .BillingInfo input[name=billingemail] {
    width: 305px;
}

form .ContactInfo input[name=contactemail] {
    width: 305px;
}

form .PrincipleInfo input[name=principleemail] {
    width: 305px;
}

form .FormElement [name="user"] {
    width: 180px;
}

form .FormElement [name="password"] {
    width: 115px;
}
form .FormElement [name="salutation"] {
    width: 50px;
    text-transform: capitalize;
}

form .FormElement [name="name"] {
    width: 130px;
    /*text-transform: capitalize;*/
}

form .FormElement [name="lastname"] {
    width: 160px;
    /*text-transform: capitalize;*/
}

form .FormElement [name="position"] {
    width: 230px;
}

form .FormElement [name="nick"] {
    width: 125px;
}

form .FormElement [name="phonemobile"] {
    width: 180px;
}

form .FormElement [name="phonework"] {
    width: 150px;
}

form .FormElement [name="phonework2"] {
    width: 150px;
}

form .FormElement [name="ext"] {
    width: 50px;
}

.VersionBox {
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    text-align: ;
    border: none;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 20px;
    width: 100%;
    height: 50px;
}

.VersionBox span:nth-child(2) {
    opacity: .7;
}

.UpdateProcess {
    transform: translateY(60px);
    overflow: visible;
}

.UpdateProcessError {
    transform: translateY(60px);
}

.UpdateProcessError .UpdatingBar {
    background-color: #d637bf;
}

.UpdatingBar {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    line-height: 55px;
    z-index: -1;
    top: -60px;
    left: 0px;
    box-shadow: 0px 0px 5px rgba(100,100,100,.7) inset;
}

.UpdateProcess .UpdatingBar label {
    transform-origin: left;
    animation-name: Updating;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    /*     animation-direction: alternate; */
}

.UpdateAppBtn {
    background-color: #157efb;
    height: 30px;
    line-height: 30px;
    display: block;
    margin: 20px 0px;
    position: absolute;
    top: -5px;
    right: 5px;
    width: 80px;
    padding-left: 20px !important;
    padding-right: 40px !important;
    width: 120px;
}
.ForceUpdateMiniBtn {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    position: absolute;
    top:0px;
    right:0px;
    height: inherit;
    width: 25px;
    cursor: pointer;
    border-left: 1px solid #fff;
    padding: 5px 0px;
}
.ForceUpdateMiniBtn:hover {
    background-color: var(--red2);
}
.UpdateAppBtn version {
    position: absolute;
    top: 40px;
    color: #999;
    left: 0px;
}

.UpdateAppBtn img {
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
}

.UpdateIcon {

}
.QuickReportBtn {
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 30px;
    height: 30px;      
    top:13px;
    right:290px;
    transition-timing-function: cubic-bezier(.175,.885,.32,1);
    transition-duration: 1s;
    transition-property: transform;

    cursor: pointer;
}

.QuickHelpBtn {
    background-image: url(ImgObjects/HelpIcon3.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 30px;
    height: 30px;      
    top:13px;
    right:360px;
    visibility: hidden;
    /*transition: transform 1.5s;*/
    transition-timing-function: cubic-bezier(.175,.885,.32,1);
    transition-duration: 1s;
    transition-property: transform;

    transform: scale(.1);
    cursor: pointer;
}
.ShowQuickHelp .QuickHelpBtn {
    visibility: visible;
    transform: scale(1);
}
.CheckingForUpdate {
    -webkit-filter: blur(20px);
}

form .SectionTitle {
    color: var(--blue);
    font-weight: lighter;
    font-size: 20px;
    display: block;
    line-height: 35px;
    margin: 5px;
    margin-top: 0px;
    height: 35px;
    text-transform: capitalize;
    box-sizing: border-box;
/*     padding-left: 10px; */
    width: auto !important;
    text-align: left !important;
}

.PaymentOptionsBtn {
    background-image: url(ImgObjects/paymentoption.png);
}

form .EditFormListBtn {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    display: inline-block !important;
    position: static;
}

form .AddFormListBtn {
    /* width: 20px; */
    /* height: 20px; */
    vertical-align: middle;
    position: static;
    margin-right: 30px;
    display: none;
}

.EditMode form .AddFormListBtn {
    display: inline-block;
}

form .DoneFormListBtn {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    display: inline-block !important;
    position: static;
}

form .ListControlBar {
    display: none;
    position: relative;
}

form .ListControlBar .FormElement {
    width: auto;
}

form .ListControlBar label {
    font-size: 14px !important;
}

.ListControlBar .DoneBtn {
    position: absolute;
    top: 25px;
    right: 0px;
}

.ListControlBox {
    position: absolute;
    top: 0px;
    right: 0px;
}

.InfoGroup {
    /*  width: inherit; */
}

.InfoGroup .FormElement {
    /* width: 100%; */
    padding: 10px 20px;
    padding-left: 0px;
}
[class$="SettingsModule"] .InfoGroup {
    display: block;
    border-top: 1px solid #ddd;
    margin-bottom: 10px;
    vertical-align: top;
    margin-left: 10px;
    min-height: 60px;
    position: relative;  
    padding-left: 300px;
/*  border-bottom: 1px solid var(--green); */
}
[class$="SettingsModule"] .InfoGroup .SectionTitle {
    position: absolute;
    top:20px;
    left: 15px;
    font-size: 14px;
    margin-left: 40px;
    width: 200px !important;
    line-height: 18px;
}

[class$="SettingsModule"] .InfoGroup:before{
  background:url('ImgObjects/operatorson.png');
  content: '';
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top:15px;
  left: 15px;
}


.SelectListColumnsBtn {
    background-color: var(--blue);
    color: #fff;
    display: block;
    width: 110px;
}

.SelectFormFieldsBtn {
    background-color: var(--blue);
    color: #fff;
    display: block;
    width: 110px;
}

.FileImage {
    width: 700px;
    height: 800px;
    padding: 10px;
    border: 1px dashed #999;
    background-size: 100%;
}

.BillingModule .DashboardArea {
    transition: left .65s;
    position: absolute;
    left: -2800px;
    width: 100%;
    height: 730px;
    top: 80px;
    box-sizing: border-box;
    padding: 0px 30px;
    bottom: 0px;
    /*  overflow-y:scroll; */
    background-color: #fff;
    ; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth
}

.BillingModule .Dashboard {
}

.ShowDash .DashboardArea {
    left: 0px !important;
}

.BillingModule .ReportBtn {
    /* float: right; */
    /*  right:30px; */
}

.BillingModule .ListControls {
    display: none !important;
}

.BillingModule .Dashboard .ReportDateBox {
    display: inline-block;
    vertical-align: top;
}

.BillingModule .Dashboard .ReportDateBox div {
    /*  display:inline-block; */
    margin-right: 30px;
    color: #ccc;
    font-size: 14px;
    margin-bottom: 5px;
}

.BillingModule .Dashboard .ReportIndexesBox {
    position: absolute;
    top: 0px;
    right: 20px;
    width: 600px;
    border-radius: 2px;
}

.BillingModule .Dashboard .ReportIndexesBox div {
    display: inline-block;
    margin-right: 15px;
    color: #fff;
    padding: 10px 5px;
    border-bottom: 7px solid orange;
    color: orange;
}

.BillingModule .Dashboard .ReportIndexesBox div:nth-child(1) {
    border-bottom: 7px solid #3C93C8;
}

.BillingModule .Dashboard .ReportIndexesBox div:nth-child(2) {
    border-bottom: 7px solid #EFC133;
}

.BillingModule .Dashboard .ReportIndexesBox div:nth-child(3) {
    border-bottom: 7px solid #3BC973;
}

.BillingModule .Dashboard .ReportIndexesBox div:nth-child(4) {
    border-bottom: 7px solid #999;
}

.BillingModule .Dashboard .ReportIndexesBox div:nth-child(5) {
    border-bottom: 7px solid #E54F44;
}

.BillingModule .ToolBarOption select {
    text-transform: capitalize;
}

.UpdateProgressBar {
    position: absolute;
    width: 100%;
    height: 25px;
    margin-top: 15px;;
    background-color: rgb(140 0 255 / 100%);
    border-radius: 0px 100px 100px 0px;
    box-shadow: 5px 5px 12px rgba(100,100,100,.4);
}

.EnglishSelectorBtn {
    background-image: url(ImgObjects/usaicon.png);
}

.SpanishSelectorBtn {
    background-image: url(ImgObjects/spainicon.png);
}

.ChineseSelectorBtn {
    background-image: url(ImgObjects/chinaicon.png);
}

.LanguageBox {
    width: 150px;
    height: 50px;
    background-size: 70px;
    background-position: center 10px;
    background-repeat: no-repeat;
    line-height: 80px;
    padding-top: 60px;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    margin: 10px;
    border-radius: 4px;
    display: inline-block;
}

.InstallBox {
    z-index: 9999999999;
    background-color: #414141;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.LoadingInstallBox {
    -webkit-filter: blur(30px);
}

.RemovePhotoReady {
    /*  filter: blur(2px);
    -webkit-filter: blur(2px);       */
}

.RemovePhotoReady .RemovePhotoBtn {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    background-color: #C44012;
    opacity: 1;
    background-image: url(ImgObjects/CloseBtn.png);
}

.ColorValueBtn {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: inline-block;
    cursor: pointer;
}

.ColorPickerBackground {
    -webkit-transition: -webkit-transform .7s, top .6s;
    position: fixed;
    width: 100%;
    height: 100%;
    top: -3000px;
    z-index: 99999999;
}

.ColorPicker {
    max-width: 450px;
/*     background-color: #ffe; */
    background-color: #f8f8f8;
    padding: 20px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    box-shadow: 5px 5px 15px rgba(100,100,100,.3);
    overflow: hidden;
    text-align: center;
}

.ColorPicker > div {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin: 10px;
    display: inline-block;
}

.ShowColorPicker .ColorPickerBackground {
    top: 0px;
}

.ColorMarkGray {
    background-color: #414140 !important;
}

[colormark="ColorMark1"] {
    background-color: #FA4B20 !important;
    color: #fff !important;
}

.ColorMark1 {
    background-color: #FA4B20 !important;
    color: #fff !important;
}

[colormark="ColorMark2"] {
    background-color: #476A86 !important;
    color: #fff !important;
}

.ColorMark2 {
    background-color: #476A86 !important;
    color: #fff !important;
}

[colormark="ColorMark3"] {
    background-color: #f38106 !important;
    color: #fff !important;
}

.ColorMark3 {
    background-color: #DF790B !important;
    color: #fff !important;
}

[colormark="ColorMark4"] {
    background-color: #B2BD83 !important;
    color: #666 !important;
}

.ColorMark4 {
    background-color: #B2BD83 !important;
    color: #666 !important;
}

[colormark="ColorMark5"] {
    background-color: #18b4da !important;
    color: #fff !important;
}

.ColorMark5 {
    background-color: #18b4da !important;
    color: #fff !important;
}

[colormark="ColorMark6"] {
    background-color: #f4e78e !important;
    color: #666 !important;
}

.ColorMark6 {
    background-color: #f4e78e !important;
    color: #666 !important;
}

[colormark="ColorMark7"] {
    background-color: #F6BC1A !important;
    color: #666 !important;
}

.ColorMark7 {
    background-color: #F6BC1A !important;
    color: #666 !important;
}

[colormark="ColorMark8"] {
    background-color: #e72186 !important;
    color: #fff !important;
}

.ColorMark8 {
    background-color: #e72186 !important;
    color: #fff !important;
}

[colormark="ColorMark9"] {
    background-color: #BDA08E !important;
    color: #fff !important;
}

.ColorMark9 {
    background-color: #8c5e41 !important;
    color: #fff !important;
}

[colormark="ColorMark10"] {
    background-color: #21c977 !important;
    color: #fff !important;
}

.ColorMark10 {
    background-color: #21c977 !important;
    color: #fff !important;
}

[colormark="ColorMark11"] {
    background-color: #999 !important;
    color: #666 !important;
}

.ColorMark11 {
    background-color: #999 !important;
    color: #666 !important;
}

[colormark="ColorMark12"] {
    background-color: #414140 !important;
    color: #fff !important;
}

.ColorMark12 {
    background-color: #414140 !important;
    color: #fff !important;
}
.ColorMark13 {
    background-color: #88173E !important;
    color: #fff !important;
}
.NoColorMark {
    border: 1px solid #999;
}
.ColorPickerBtn {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: inline-block;
    cursor: pointer;
    border: 1px solid #ccc;
}

.ToolBar .ColorPickerBtn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 40px;
    /* background-color: #e72186 !important; */
    margin: 0px 15px;
}

.BillingModule .NewCustomerShortForm {
    transition: top .7s;
    position: absolute;
    top: -1000px;
    left: 250px;
    width: 390px;
    height: 500px;
    background-color: #fff;
    box-shadow: 5px 5px 25px rgba(100,100,100,.3);
    padding: 20px;
    padding-bottom: 70px;
    z-index: 1000;
}

.ShowNewCustomerShortForm .NewCustomerShortForm {
    top: 100px;
}

.NewCustomerShortForm input[name=email] {
    width: 355px;
}

.NewCustomerShortForm input[name=website] {
    width: 355px;
}

.NewCustomerShortForm input[name=address] {
    width: 235px;
}

.NewCustomerShortForm input[name=address2] {
    width: 85px;
}

.NewCustomerShortForm input[name=zipcode] {
    width: 65px;
}

.ReservationsModule .NewCustomerShortForm {
    display: none;
}
.NewCustomerBtn {
    display: none !important;
}

.AddNewMode .NewCustomerBtn {
    display: inline-block !important;
}

.NewCustomerShortForm .CommandBar {
    margin-top: 20px;
    display: block;
}


.AddNewMode .Form .NewCustomerBtn {
    /*display: inline-block !important; */
}

.EditMode .EditBtn {
    display: none !important;
}

.LoginTopLogo {
    background-image: url(ImgObjects/LogoWhite.png);
    width: 300px;
    height: 100px;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.LoginServerSelectorBtn {
    width: 30px;
    height: 30px;
    background-image: url(ImgObjects/ServerIcon1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    opacity: .6 !important;
    display: inline-block !important;
}
.ShowLoginServerSelector .LoginServerSelectorBtn {
    background-image: url(ImgObjects/ServerEditIcon.png);    
}

.LoginServerSelectorBtn:hover {
    opacity: 1 !important;
}

.ServerSelector {
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0px;
    right: 0px;
    /* text-align: right; */
    line-height: 60px;
    /* padding-right: 15px; */
}

.ShowLoginServerSelector .ServerSelector {
    width: 300px;
    box-sizing: border-box;
}

.ServerSelectorList {
    width: 229px;
    height: 40px;
    padding: 5px 20px;
    background-color: transparent;
    font-size: 18px;
    border: 1px solid #999;
    margin-right: 20px;
    vertical-align: middle;
    display: inline-block !important;
    visibility: hidden;
}

.ServerSelectorList option {
    color: #444;
}
.ServerSelectorList option[value="localserver"] {
    display: none;
}
.ShowLoginServerSelectorHidden .ServerSelectorList option[value="localserver"] {
    display: block;
}


.ShowLoginServerSelector .ServerSelectorList {
    display: inline-block;
    background-color: rgba(0,0,0,.2);
    visibility: visible;
}
.LoginBox .ServerSelectorList:focus {
    outline: none;
}

[notificationmessagetype="0"] .NotificationMessageBox {
    background-color: var(--yellow);
    color: #111;
    text-shadow: none;
}

[notificationmessagetype="1"] .NotificationMessageBox {
    background-color: var(--lightblue);
    color: #fff;
    text-shadow: none;
}

[notificationmessagetype="2"] .NotificationMessageBox {
    background-color: var(--green1);
    text-shadow: none;
}

[notificationmessagetype="3"] .NotificationMessageBox {
    background-color: var(--orange1);
    text-shadow: none;
}
[notificationmessagetype="4"] .NotificationMessageBox {
    background-color: var(--red2);
    text-shadow: none;
}
[notificationmessagetype="alert"] .NotificationMessageBox * {
    color: #333;
}

[listviewmode="ListView"] .List .ItemWithNote [fieldname="name"] {
    background-image: url(ImgObjects/NoteIcon1.png);
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: right;
}

.List .ItemWithNote [fieldname="fullname"] {
    background-image: url(ImgObjects/NoteIcon1.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: right;
}

.BackBtn {
    position: absolute;
    top: 0px;
    right: 10px;
    display: none;
    background-image: url(ImgObjects/BackBtn2.png);
    background-size: 70%;
    background-color: #333;
    height: inherit;
}

[modal="true"] .BackBtn {
    display: block;
}

.SpecificDateStatusPanel .SpecificDateSelector {
}

.SpecificDateStatusPanelShow .SpecificDateStatusPanel {
    display: block !important;
    padding: 20px;
}

.ListArea .List .selected {
    background-color: #818377;
}

.ListArea .List .selected * {
    color: #fff !important;
}

.ShareSelectionBtn {
    background-image: url(ImgObjects/share.png);
}

.ShareSelection {
    background-image: url(ImgObjects/shareon.png);
}

.PhoneIconAction {
    background-image: url(ImgObjects/phoneicon.png);
    display: none !important;
}
[ivroutboundapiactive=true] .PhoneIconAction {
    display: inline-block !important;
}

.EmailIconAction {
    background-image: url(ImgObjects/emailicon.png);
}

.BrowseIconAction {
    background-image: url(ImgObjects/interneticon.png);
}

.MapIconAction {
    background-image: url(ImgObjects/mapicon.png);
}

.FieldActionIcon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    opacity: .5;
    transition: opacity .7s;
}

.FieldActionIcon:hover {
    opacity: 1;
}

.WithActionBtn input {
    display: inline-block !important;
}

form .MenuItem {
    /*  border: 1px solid #aaa; */
    border-radius: 4px;
    padding: 0px !important;
    width: 30px;
    height: 30px;
    min-height: 30px;
    min-width: 30px;
    background-size: 80% !important;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    /* top:15px; */
}

form .ServiceIcon {
}

.FileItemBox {
    border: 1px solid #aaa;
    width: 60px;
    height: 80px;
    margin: 20px;
    margin-left: 0px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    background-image: url(ImgObjects/FileItemIcon.png);
    position: relative;
    cursor: pointer;
}
.FileItemBox .DeleteBtn {
    left: auto;
    right: -15px;
    top:5px;
    border: 1px solid red;
    border-radius:50px;
    cursor: pointer;
    background-image: url(ImgObjects/DeleteBtn1.png) !important;
}
.FileItemBox[filetype="jpg"] {
    background-image: url(ImgObjects/ImageItemIcon.png);
}

.FileItemBox[filetype="bmp"] {
    background-image: url(ImgObjects/ImageItemIcon.png);
}

.FileItemBox[filetype="png"] {
    background-image: url(ImgObjects/ImageItemIcon.png);
}
.FileItemBox .RemovePhotoBtn {
    bottom: -15px;
    top: auto;
    right: -15px;
}

.FileItemBox[filetype="tiff"] {
    background-image: url(ImgObjects/ImageItemIcon.png);
}

.FileItemBox[filetype="docx"] {
    background-image: url(ImgObjects/docItemIcon.png);
}

.FileItemBox[filetype="doc"] {
    background-image: url(ImgObjects/docItemIcon.png);
}

.FileItemBox[filetype="odt"] {
    background-image: url(ImgObjects/docItemIcon.png);
}

.FileItemBox[filetype="xlsx"] {
    background-image: url(ImgObjects/CalcItemIcon.png);
}

.FileItemBox[filetype="xls"] {
    background-image: url(ImgObjects/CalcItemIcon.png);
}

.FileItemBox[filetype="ods"] {
    background-image: url(ImgObjects/CalcItemIcon.png);
}

.FileItemBox[filetype="pdf"] {
    background-image: url(ImgObjects/PdfItemIcon.png);
}

.ImageViewerBackground {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

.ImageViewerBox .ListCounter {
    position: absolute;
    right: 25px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    color: #e5e5e5;
}

.ImageViewerBox {
    transition: left .7s;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: -2800px;
    bottom: 0px;
    width: 100%;
    background-color: #f1f1f0;
    overflow: hidden;
}

[ShowImageViewer="yes"] .ImageViewerBox {
    left: 0px;
}

[ShowImageViewer="yes"] .ImageViewerBackground {
    right: 0px;
}

.ImageViewerBox .ImageViewerTopBar {
    width: 100%;
    height: 50px;
    background-color: #535861;
    color: #fff;
    position: relative;
    line-height: 50px;
}

.ImageViewerBox .Title {
    color: #aaa;
    margin: 0px 20px;
    line-height: 50px;
    font-size: 18px;
    text-align: left;
}

.ImageViewerBox .DoneBtn {
    color: #E9997A;
    position: absolute;
    /* right: 30px; */
    border-right: none;
    cursor: pointer;
    /* top: 10px; */
    /* height: 30px; */
    /* width: 30px; */
}

.ImageViewerBox .ImageViewerTopBar2 {
    width: 100%;
    height: 50px;
    background-color: #a6b4bC;
    color: #fff;
    position: relative;
    line-height: 50px;
}

.ImageViewerBox .ImageArea {
    padding: 0px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

.ImageViewerBox .ImageArea img {
    width: 100%;
}

.StudiesListSelector .List .ListField[fieldname=id] {
    display: inline-block;
    width: 30px;
    font-size: 12px;
}

.StudiesListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 130px;
    font-size: 12px;
}

.StudiesListSelector .List .ListField[fieldname=subject] {
    display: inline-block;
    width: 90px;
    font-size: 12px;
}

.ResourceListSelector .List .ListField[fieldname=fullname] {
    width: 150px;
    display: inline-block;
}

.ResourceListSelector .List .ListField[fieldname=position] {
    width: 100px;
    color: #aaa;
    display: inline-block;
}

.LogoutBtn {
    cursor: pointer;
}

.PrintArea .PrintHeader {
    box-sizing: border-box;
    padding: 30px 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    position: relative;
}

.PrintArea .PrintPageTitle {
    font-size: 22px;
    /* text-transform: uppercase; */
    /*  font-family: var(--default-font-light); */
    color: #888;
    display: inline-block;
    vertical-align: middle;
}

.PrintArea .PrintPageTitle h3 {
    -webkit-margin-after: 5px;
    ; color: #333;
    font-size: 28px;
}

.PrintArea .PrintPageTitle b {
    font-size: 18px;
}

.PrintArea .AssistantBtn {
    display: none;
}
.PrintArea .PrintLogo {
    height: 60px;
    ; display: inline-block;
    width: 300px;
    vertical-align: middle;
    position: absolute;
    left: 400px;
    top: 10px;
    background-position: right;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.FormElement .HelpTipBtn {
    position: absolute;
    top:-5px;
    right:0px;        
    width: 10px;
    height: 10px; 
    background-image: url(ImgObjects/helptipicon1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    opacity: .5;
}
.FormElement .HelpTipBtn:hover {
    opacity: 1;
}
.FormElement label.caption {
    display: inline-block;
}

.RemoveListItemBtn {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 10000;
}
.SelectListItemBtn {
    position: absolute;
    right: 60px;
    top: 5px;
    z-index: 10000;
}


.MarkListItemBtn {
    position: absolute;
    left: 3px;
    z-index: 10000;
    background-image: url(ImgObjects/okbtn1.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.NextPrevControls {
    position: absolute;
    top: 0px;
    right: 50px;
}

.NextPrevControls .PrevArrow {
    width: 30px;
    height: 30px;
    background-image: url(ImgObjects/arrowleft3.png);
    display: inline-block;
    cursor: pointer;
    margin-left: 30px;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

.NextPrevControls .NextArrow {
    width: 30px;
    height: 30px;
    background-image: url(ImgObjects/arrowright3.png);
    display: inline-block;
    cursor: pointer;
    background-size: 50%;
    margin-left: 30px;
    background-position: center;
    background-repeat: no-repeat;
}

.FormArea .RefreshRecordBtn {
    width: 30px;
    height: 30px;
    background-image: url(ImgObjects/refreshicon.png);
    display: inline-block;
    cursor: pointer;
    background-size: 50%;
    margin-left: 30px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 10px;
}

.List .AddMoreToListItem {
    background-color: #aaa !important;
}

.PageContentArea .ListArea .List .AddMoreToListItem .LoadListNextBtn {
    color: #666 !important;
    display: inline-block !important;
}

.List .LoadListNextBtn {
    color: #888 !important;
    display: inline-block !important;
    text-align: center;
    font-size: 14px;
    background-color: #e1e1e1 !important;
    width: 100% !important;
}

.List .AddMoreToListItem {
    line-height: 40px;
    cursor: pointer;
}
.List .AddMoreToListItem:hover .LoadListNextBtn  {
    background-color: #ccc !important;
}

.DiagnosticListSelector .List .ListField[fieldname=code] {
    width: 30px;
    display: inline-block;
}

.DiagnosticListSelector .List .ListField[fieldname=name] {
    color: #999;
    width: 280px;
    display: inline-block;
}

.AlergiesListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 230px;
    color: #333;
    text-transform: lowercase;
}

.SmokerStatusListSelector .List .ListField[fieldname=name] {
    color: #999;
    width: 210px;
    display: inline-block;
}

.CustomerSelectorListBtn {
    position: relative;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    top: 20px;
    background-image: url(ImgObjects/ListIcon0.png);
    background-position: center;
}
.CustomerSelectorNewBtn {
    display: none;
    position: relative;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    top: 50px;
    background-image: url(ImgObjects/PlusBtn0.png);
    background-size: 70%;
    background-position: center;    
    border: 1px solid #fff;
}
.ShowListSelector .CustomerSelectorNewBtn {
    display: block;
}
.FormSeparator {
    width: inherit;
    height: 1px;
    border-top: 1px solid #ddd;
    /*  margin-top:30px; */
    margin-bottom: 20px;
}

.List ListItem {
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid #eee;
}

.List ListItem ListField {
    transition: background-color .3s, transform 1s;
    float: left;
    color: var(--list-font-color);
    line-height: 30px;
    padding: 5px 10px;
    height: inherit;
    border-right: 1px solid #ccc;
    width: 110px;
    display: none;
    overflow: hidden;
}

.List ListItem:nth-child(odd) {
    /*  background-color: #f1f1f1 */
}

.FormColumn {
    display: inline-block;
    vertical-align: top;
}

.ListItem .ResourceBadge {
    width: 30px !important;
    height: 30px !important;
    background-color: var(--orange);
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    font-weight: bold;
    color: #fff !important;
    border-radius: 40px;
}
.ListSelectorBox .ListItem .ResourceBadge {
    float: left;
    margin-left: 5px;
    margin-top:2px;
    display: none;
}

.MinimizeForm .FormArea {
    box-shadow: 0px 10px 25px rgba(100,100,100,1);
    left: 90% !important;
    -webkit-filter: blur(1px)
}

.MinimizeForm .ListArea {
    left: 0px;
}

.NoteBox .CloseBtn {
    background-image: url(ImgObjects/CloseGrayBtn.png) !important;
}

.NoteBox {
    position: absolute;
    top: 20px;
    left: 200px;
    top: -3000px;
    width: 250px;
    min-height: 200px;
    max-height: 320px;
    padding: 20px;
    border: 1px solid #999;
    background-color: #F9EBA6;
    z-index: 1;
    transition: top .7s, left .7s, transform 1s, width 1s, height 1s;
    transform: rotateZ(5deg) scale(.2);
    z-index: 100000;
    box-shadow: 10px 10px 45px rgba(100,100,100,.4);
    /*  overflow-y: auto; */
}

.NoteBox .NoteArea {
    outline: none !important;
    border: none;
    margin-top: 35px;
    overflow: auto !important;
    height: 300px;
    width: 100%;
}

.NoteMaximized.NoteBox .NoteArea {
    height: 500px;
}

.ShowNoteBox {
    top: 50px;
    transform: rotateZ(0deg) scale(1);
}

.LoadLastCustomerBtn {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(ImgObjects/RefreshIcon.png);
    background-position: center;
    background-size: 80%;
    cursor: pointer;
    background-repeat: no-repeat;
}

.ReservationSegment {
    background-color: rgba(255,255,255,.4);
    width: 100%;
    height: 100px;
    display: block;
    position: absolute;
    top: 160px;
    line-height: 100px;
    color: #999;
    box-sizing: border-box;
    padding: 0px 20px;
}

.Segment2 {
    top: 400px;
}

.SwitchBox {
    width: 50px;
    height: 25px;
    border-radius: 30px;
    border: 1px solid var(--green1);
    position: relative;
/*     background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#f1f1f1)); */
    display: inline-block;
    vertical-align: middle;
    padding: 0px !important;
}

.SwitchBtn {
    width: 20px;
    height: 20px;
    border-radius: 30px;
    background-color: var(--green1);
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left .5s;
}
.SwitchBoxOn .SwitchBtn {
    background-color: #fff;
}
.SwitchBoxOn {
/*     background: -webkit-gradient(linear, left top, left bottom, from(#4B9572), to(#83CDA9)); */
    background-color: var(--green1)
}

.SwitchBoxOn .SwitchBtn {
    left: 25px;
}

.SavingRecord .DoneBtn {
    animation-name: Saving;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    pointer-events: none;
}

.LABar {
    height: 6px;
    width: 30%;
    position: absolute;
    bottom: 0px;
    left: -130px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.Loading .LoadingAniBar1 {
    background-color: #da4733;
    will-change: transform;
    animation-delay: .7s;
    animation-duration: 1.5s;
    animation-name: LoadingBarAni;
}

.Loading .LoadingAniBar2 {
    background-color: #3b78e7;
    will-change: transform;
    animation-delay: .9s;
    animation-duration: .3s;
    animation-name: LoadingBarAni;
}

.Loading .LoadingAniBar2 {
    background-color: #fdba2c;
    will-change: transform;
    animation-delay: .7s;
    animation-duration: 1s;
    animation-name: LoadingBarAni;
}

.ToolBar FastSectionAccessBar {
    position: absolute;
    top: 49px;
    left: 0px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    /* border-bottom: 1px solid #ddd; */
    box-shadow: 2px 0 2px #ddd;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: #fff;
}

.ToolBar FastSectionAccessBar access {
    color: var(--blue1);
    color: #888;
    font-size: 13px;
    height: 40px;
    display: block;
    float: left;
    user-select: none;
    padding: 0px 20px;
    border-right: 1px solid #ededed;
    cursor: pointer;
}

.ToolBar FastSectionAccessBar access:nth-last-child(1) {
    border-right: none; 
}
.ToolBar FastSectionAccessBar .EditAccessBtn{
    width: 60px;
    height: 40px;
    background-image: url(ImgObjects/SettingsIcon4.png);
    background-repeat: no-repeat;
    background-size: auto 60%;
    background-position: center;
    opacity: .2;
    cursor: pointer;
    float: left;
}
.ToolBar FastSectionAccessBar .EditAccessBtn:hover{
    opacity: 1;
}


.ShowCalendar .ToolBar .SlotViewBtn {
    display: none;
}

.ShowCalendar .ToolBar .ImageViewBtn {
    display: none;
}

.ShowCalendar .ToolBar .ListViewBtn {
    display: none;
}

.ModuleArea {
    /* background-color: #EBEDEF; */
}

.ListArea {
    background-color: #fff;
    padding-top: 30px; /*for filterbar*/
}

.InfoPanel {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(183, 190, 197, 0.34);
    border-top:none;
    border-left: none;
    border-radius: 3px;
/*     box-shadow: 1px 2px 0 0 rgba(50,70,90,.1); */
    position: relative;
    display: block;
    transition: height 1s;
    box-sizing: border-box;
    width: 100%;
}
.InfoPanel .grouparea {
    box-sizing: border-box;
}
.InfoPanel .InfoPanel {
    border: 1px solid rgba(183, 190, 197, 0.34);    
}

.ConfigurationPanel .InfoPanel {
    background-color: rgba(255,255,255,.5);
    border: none;
    border-bottom: 1px solid #52B4AA;
    box-shadow: none;
    border-radius: 0px;
}

.PanelStyle1 {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(113, 110, 117, 0.34);
    border-radius: 3px;
    box-shadow: 1px 2px 0 0 rgba(50,70,90,.1);
    position: relative;
    display: block;
    transition: height 1s;
}
.LeftBorderGreen {
    border-left: 4px solid var(--green);
}
.LeftBorderBlack {
    border-left: 4px solid var(--black);        
}
.LeftBorderGray {
    border-left: 4px solid var(--gray);        
}

.PhotoElement {
    float: left;
}

.InfoPanelPhoto {
    min-height: 120px;
}

.RecordIdElement * {
    display: inline-block !important;
    text-align: right !important;
    min-width: 0px !important;
    width: auto !important;
    padding: 0px !important;
}

.RecordIdElement {
    float: right;
    padding-top: 25px;
    vertical-align: middle;
}

.WideElement {
    width: 100%;
    box-sizing: border-box;
}

.WideElement input {
    width: 95% !important;
}

.WideElement textarea {
    width: 95% !important;
}

.SectionTitle .CheckBoxElement {
    padding-top: 0px;
    padding-right: 0px;
}

.ButtonInAction {
    pointer-events: none;
    animation-name: buttoninaction;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    background-color: #999;
}

.MaximizeBtn {
    background-image: url(ImgObjects/maximizeicon.png);
    pointer-events: auto !important;
}


.ModuleArea .List [status='cancelled'] {
    opacity: .5;
}

.ModuleArea .List [status='cancelled'] {
    opacity: .5;
}

.ModuleArea .List [status='problem'] [fieldname="status"] {
    background-color: var(--red2);
    color: #fff;
}

.ModuleArea .List [status='waiting'] [fieldname="status"] {
    background-color: var(--orange);
    color: #fff;
}

.TagListListSelector .List .ListField[fieldname=caption] {
    display: block;
    ; width: 310px;
}

.TimeSelectorBlock .SwitchBox {
    display: inline-block;
    position: relative;
    top: 30px;
    /*  right:50px; */
}

.TimeSelectorBlock {
    position: relative;
}

.SelectTimeSelector {
    width: 122px !important;
}

.TimeExactSelector {
    display: none;
}

.ExactTimeSeletorOn .TimeExactSelector {
    display: inline-block !important;
}

.ExactTimeSeletorOn .SelectTimeSelector {
    display: none !important;
}

.Calendar .TodayDay {
    background-color: #ddd;
}
/*body > div {
    display: none !important;
}
@media all and (display-mode: standalone) {
    body {
        display: block;
        background-image: none !important;
    }

    .iosinstallerbox {
        display: none !important;
    }

    body > div {
    display: block !important;
  }

}
*/
.iOSwebapp {
    display: block;
    background-image: none !important;
}
.androidwebapp {
    display: block;
    background-image: none !important;
}
/*.iOSwebapp > div {
    display: block !important;      
}
*/
.androidwebapp .iosinstallerbox {
    display: none !important;    
}
.iOSwebapp .iosinstallerbox {
    display: none !important;
}

.PanelColorRed {
    border-top: 8px solid var(--red);
}

.PanelColorRed .SectionTitle {
    color: var(--red);
}

.PanelColorGreen {
    border-top: 8px solid var(--green);
}

.PanelColorGreen .SectionTitle {
    color: var(--green);
}

.PanelColorGreen {
    border-top: 8px solid var(--green);
}

.PanelColorGreen .SectionTitle {
    color: var(--green);
}

.PanelColorGreen2 {
    border-top: 8px solid var(--green2);
}

.PanelColorGreen2 .SectionTitle {
    color: var(--green2);
}

.PanelColorBlue {
    border-top: 8px solid var(--blue);
}

.PanelColorBlue .SectionTitle {
    color: var(--blue);
}

.PanelColorBlack {
    border-top: 8px solid var(--black);
}

.PanelColorBlack .SectionTitle {
    color: var(--black);
}

.PanelColorOrange {
    border-top: 8px solid var(--orange);
}

.PanelColorOrange .SectionTitle {
    color: var(--orange);
}

.PanelColorGray {
    border-top: 8px solid var(--gray);
}

.PanelColorGray .SectionTitle {
    color: var(--gray);
}

.ShowCalendar .ToolBarList .ListCounter {
    display: none;
}

.ErrorLogIcon {
    background-image: url(ImgObjects/erroricon.png);
    width: 30px;
    height: 30px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
}

.ErrorScreen {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999999;
    background-color: rgba(255,255,255,.7)
}

.ErrorScreenHeader {
    width: 100%;
    height: 50px;
    background-color: #414142;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-bottom: 2px solid #999;
}

.ErrorScreenHeader .CloseBtn {
    top: 10px;
    right: 10px;
    opacity: 1 !important;
    border: 1px solid #fff;
    border-radius: 4px;
}

.ErrorScreen .ListArea {
    position: fixed;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,.4)
}

.ErrorScreen .ListArea .List {
    overflow: auto !important;
    ; }

.ErrorScreen .ListArea .ListItem {
    overflow: hidden;
    width: 1600px;
    background-color: rgba(255,255,255,.4)
}

.ErrorScreen .ListArea .ListItem .ListField {
    display: inline-block;
    font-size: 12px;
}

.ErrorScreen .ListArea .ListItem .ListField[fieldname="time"] {
    display: inline-block;
    width: 80px;
    font-size: 11px;
    text-align: left;
    color: #999;
}

.ErrorScreen .ListArea .ListItem .ListField[fieldname="module"] {
    display: inline-block;
    width: 300px;
}

.ErrorScreen .ListArea .ListItem .ListField[fieldname="line"] {
    display: inline-block;
    width: 40px;
    text-align: center;
}

.ErrorScreen .ListArea .ListItem .ListField[fieldname="message"] {
    display: inline-block;
    width: 1000px;
    overflow: hidden;
    color: purple;
}

.iosinstallerbox {
    width: 100%;
    margin: 0 auto;
    display: block !important;
    padding-bottom: 100px;
    background-color: #616162;
    height: 1500px;
    padding-top: 30px;
    z-index: 9999999999999;
}

.iosinstallerbox * {
    color: #fff;
    display: block !important;
    text-align: center;
    font-size: 22px;
    font-weight: normal;
}

.iosinstallerbox img {
    width: 80%;
    display: block !important;
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.iosinstallerbox .Title {
    font-size: 36px;
    margin-bottom: 30px;
}

.iosinstallerbox .Step {
}

.DataBuffer {
    display: none !important;
}

#LoadInternalsBuffer {
    display: none !important;
}

.LoadInternalsBuffer {
    display: none !important;
}

.AssistantBtn {
    z-index: 100;
    cursor: pointer;
/*     width: 20px; */
/*     height: 20px; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    cursor: pointer; 
}

.ViewMode .SwitchBox {
    pointer-events: none;
    opacity: .5;
}

.ViewMode .AssistantBtn {
    pointer-events: none;
    display: none;
}
.ViewMode.ModuleArea .FormArea form .AssistantBtn {
    pointer-events: none;
    display: none;    
}
.ViewMode .IndicatorBtn {
    pointer-events: none;
    display: inline-block;
}

.LeftBar .ExitBtn {
    display: none;
}

.LogoutConfirmBtn {
    width: 60px;
}

input[type="date"] {
    font-size: 1em !important;
}

.ToolBar .SearchBox input {
    width: 110px;
}

.SearchInput {
    height: 20px;
    padding: 5px 20px;
    font-family: inherit;
    font-size: 13px !important;
    color: #888;
    border-radius: 30px !important;
    vertical-align: middle;
    border: 1px solid #d1d1d1;
    outline: none;
    width: 170px;
}

.ExtendBtn {
    background-image: url(ImgObjects/extendedbtn.png);
    position: absolute;
    top: 14px;
    right: 10px;
    width: 25px;
    height: 25px;
    background-size: 100%;
    opacity: .4;
    cursor: pointer;
    transition: transform 2s;
    display: none;
}

.Extended .ExtendBtn {
    transform: rotateY(180deg);
}

.CustomerListSelector .ExtendBtn {
    display: block;
}

.InfoGroup .Button {
    color: #fff;
}

.IsMobile .HelpBtn {
}

.servicegroups .RemoveCountBtn {
    width: 30px;
    height: 30px !important;
    ; margin: 5px 5px;
    border: 1px solid #666;
    border-radius: 50px;
    text-align: center;
    line-height: 30px !important;
    font-size: 18px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.servicegroups .AddCountBtn {
    width: 30px;
    height: 30px !important;
    margin: 5px 5px;
    border: 1px solid #666;
    border-radius: 50px;
    text-align: center;
    line-height: 30px !important;
    font-size: 18px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.PassGeneratorBtn {
    background-image: url(ImgObjects/passgeneratoricon.png);
}

@media print {
    @page {
/*        size: A4;*/
        margin: 0;
    }

    body {
        margin: 40px !important;
    }
    html,body {
        overflow: visible; 
    }

    .NotificationMessageBox {
        display: none;
    }

    .tooltipster-base {
        display: none;
    }

    .tooltipster-box {
        display: none;
    }
    div {
/*        page-break-inside: avoid;*/
    }
}


#PrintArea .ProgressNotesModule * {
    page-break-inside: auto !important;
    line-height: 20px !important;
    margin-block: 10px !important;
    padding-bottom: 10px;
    position: static !important;

}
#PrintArea .ProgressNotesModule p {
    display: block !important;
    border: 1px solid transparent !important;

}

.ViewMode .RemoveListItemBtn {
    display: none;
}

.AlertFace {
    width: 60px;
    margin: 0 auto;
}
html {
    background-image: url(ImgObjects/space2.jpg);
    background-position: top center;
    background-size: 120%;
    background-color: #000;
}
.HideToReconnect {
    /*transform-origin: top;*/
    transform: rotateX(-90deg) scale(.7);
}

body .ModuleArea .Form [infogroupname="ServiceGroups"] {
    transition: height 3s;
}

body .ModuleArea .Form .ServiceOptions {
    transition: opacity 3s;
    height: 0px;
    overflow: hidden;
    opacity: 0;
}

body .ModuleArea .Form .ServiceOptions.ShowTableDetailTools {
    height: auto;
    opacity: 1
}

.ShowHidePasswordElement {
    display: block !important;
    padding: 5px;
    margin-left: 0px !important;
}

.ShowHidePasswordElement * {
    font-size: 12px !important;
}

.PassGeneratorBtn {
    position: absolute !important;
    top: 15px;
    right: -45px;
}

.EditMode .NewModeBtn {
    display: none;
}
.AddNewMode .NewModeBtn {
    display: inline-block;
}

[userloggedintype="resource"] .UserItemBtn {
    display: none;
}

.Header {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

Pseudo ::before element .Header:hover:before, .Header:focus:before, .Header:active:before {
    right: 0;
}

.Header:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

form .HelpBtn {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0px 10px;
    background-size: 100%;
    vertical-align: middle;
    opacity: .3;
    transform: opacity .7s;
}

.HelpBtn:hover {
    opacity: 1;
}

form .Image {
    /* width: 100px !important; */
    /* height: 100px !important; */
}
.FormBlock {
    position: relative;
    display: inline-block;
    width:420px;
    vertical-align: top;
    /*     padding:20px; */
    /* padding-top:10px; */
    box-sizing: border-box;
    transition: height 1s, width 1s;
}
.ElementsGroup {
    box-sizing: border-box;
    padding: 5px 15px;
    position: relative;
}
.GrayBg {
    background-color: #f7f7f7;
}
.GrayDarkBg {
    background-color: #f2f2f2;
}

.ElementsGroup.GrayBg {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.FormBlockLong {
    position: relative;
    display: inline-block;
    width:100%;
    vertical-align: top;
    padding:20px;
    padding-top:10px;
    box-sizing: border-box;
    transition: height 1s, width 1s;
}

.QuickHelpContentBox {
    display: none;
}
.QuickHelpContent {
    box-sizing: border-box;
    padding: 0px 10px;
}
.QuickHelpContent li {
    font-size: 14px;
    margin-bottom: 10px;
    transition: transform .7s;
    cursor: pointer;
}
.QuickHelpContent ul {
    -webkit-padding-start: 20px;    
}
.QuickHelpContent li:hover {
    color: var(--blue);
}
/*.tooltipster-sidetip .tooltipster-content {
    color: var(--blue);
}*/
.QuickHelpBox {
    width: 0px;
    overflow: hidden;
    min-height: 600px;
    z-index: 100000;
    position: absolute;
    top:0px;
    right:0px;
    top:60px;
    background-color: #fff;
    transition: width .6s, border .5s, left 1s;
}
.QuickHelpBox .QuickHelpArea {
    width: 342px;
    height: calc(100% - 30px);
    position: relative;
    padding-top: 30px;
}
.ShowQuickHelpArea .ModulesArea {
    width: calc(100% - 350px);
}
.QuickHelpArea .Title {
    margin-top:18px;
    margin-left: 30px;
    color: #515151;
    font-weight: normal;
    border-bottom: 1px solid #999;
    width: 85%;
    padding-bottom:10px;
}
.QuickHelpArea .CloseBtn {
    width: 35px;
    height: 35px;     
    opacity: 1;
    z-index: 99999;
}

.ShowQuickHelpArea .QuickHelpBox {
    width: 350px;
    border-left:1px solid #ccc;
    height: 100%;
    box-shadow: 0px 0px 35px rgba(100,100,100,.5);
}


.QuickHelpBox .QuickHelpArea .Content {
    box-sizing: border-box;
    width:100%;
    margin:30px 30px;
    font-size: 14px;
    color: #414142;
    position: relative;
}
.QuickHelpBox .QuickHelpArea .Content h1 {
    font-size:20px;
    line-height:28px;
    color: #333;
}
.QuickHelpBox .QuickHelpArea .Content h2 {
    font-size:19px;
    line-height:28px;
    color: #333;
}
.QuickHelpBox .QuickHelpArea .Content video {
    width: 260px;    
    cursor: pointer;
    transition: width 1s, height 1s, top 1s, left 1s, background-color 1s, padding 1s;

}
.QuickHelpBox .QuickHelpArea .Content [alt="small"] {
    height:25px;
    vertical-align: middle;
}
.QuickHelpBox .QuickHelpArea .Content [alt=""] {
/*     height:30px; */
    display: block;
    max-width: 250px;
    margin-top:10px;
    margin-bottom:10px;
}
.QuickHelpBox .QuickHelpArea .Content [alt="medium"] {
/*     height:30px; */
    display: block;
    max-width: 250px;
    margin-top:10px;
    margin-bottom:10px;
}

.QuickHelpBox .QuickHelpArea .Content topic {
    position: absolute;
    left: -500px;
    transition-timing-function: cubic-bezier(.175,.885,.32,1);
    transition-duration: 1s;
    transition-property: left;

}
.QuickHelpBox[topic="ticketreport"] .QuickHelpArea #ticketreport {
    left: 0px;
}
.QuickHelpBox[topic="chatonline"] .QuickHelpArea #chatonline {
    left: 0px;
}
.QuickHelpBox[topic="contactsupport"] .QuickHelpArea #contactsupport {
    left: 0px;
}
.QuickHelpBox[topic="ticketreport"] .QuickHelpArea .Title:nth-child(1) {
    display: none;
}
.QuickHelpBox[topic="chatonline"] .QuickHelpArea .Title:nth-child(1) {
    display: none;
}
.QuickHelpBox[topic="contactsupport"] .QuickHelpArea .Title:nth-child(1) {
    display: none;
}
.QuickHelpBox[topic="ticketreport"] .QuickHelpArea #ticketreport .SendTicketBtn {
    color: #fff;
    background-color: var(--green);
}


.QuickHelpBox[topic="1"] .QuickHelpArea .Content topic[id="1"] {
    left:0px;
}
.QuickHelpBox[topic="2"] .QuickHelpArea .Content topic[id="2"] {
    left:0px;
}
.QuickHelpBox[topic="3"] .QuickHelpArea .Content topic[id="3"] {
    left:0px;
}
.QuickHelpBox[topic="4"] .QuickHelpArea .Content topic[id="4"] {
    left:0px;
}
.QuickHelpBox[topic="5"] .QuickHelpArea .Content topic[id="5"] {
    left:0px;
}
.QuickHelpBox[topic="6"] .QuickHelpArea .Content topic[id="6"] {
    left:0px;
}
.QuickHelpBox[topic="7"] .QuickHelpArea .Content topic[id="7"] {
    left:0px;
}
.QuickHelpBox[topic="8"] .QuickHelpArea .Content topic[id="8"] {
    left:0px;
}
.QuickHelpBox[topic="9"] .QuickHelpArea .Content topic[id="9"] {
    left:0px;
}
.QuickHelpBox[topic="10"] .QuickHelpArea .Content topic[id="10"] {
    left:0px;
}
.QuickHelpBox[topic="11"] .QuickHelpArea .Content topic[id="11"] {
    left:0px;
}
.QuickHelpBox[topic="12"] .QuickHelpArea .Content topic[id="12"] {
    left:0px;
}
.QuickHelpBox[topic="13"] .QuickHelpArea .Content topic[id="13"] {
    left:0px;
}
.QuickHelpBox[topic="14"] .QuickHelpArea .Content topic[id="14"] {
    left:0px;
}
.QuickHelpBox[topic="15"] .QuickHelpArea .Content topic[id="15"] {
    left:0px;
}
.QuickHelpSupportSection {
    border-top: 1px solid #ddd;
    margin-top:20px;   
    padding-top:10px;   
    text-align: center;    
}
.QuickHelpContent h2 {
    -webkit-margin-after:0px;
    -webkit-margin-before:10px;
    font-size: 22px !important;
} 
.QuickHelpSupportSection h3 {
    margin-top: -30px;
    font-size:17px;
    color: #999;
    font-weight: normal;
}
.QuickHelpSupportSection .Icon {
    opacity: .5;
    width: 30px;
    height: 30px; 
    display: block;
    margin: 0 auto;
    margin-bottom:3px;
    background-size: 100%;
}
.QuickHelpSupportSection .QuickHelpSupportBtn {
    width: 70px;
    height: 60px; 
    margin:5px 3px;
    vertical-align: top;
    display: inline-block;    
    font-size:14px;
    font-weight: bold;
    text-align: center;
    line-height: 14px !important;
    margin-bottom: 0px;
    cursor: pointer;
    /*transition: transform .4s, -webkit-filter .4s;*/
    /*-webkit-filter: grayscale(100%);*/
}
.QuickHelpSupportSection .QuickHelpSupportBtn:hover {
    transform: scale(1.2);
    -webkit-filter: none;
}
.QuickHelpSupportSection .QuickHelpSupportBtn:hover .Icon {
    opacity: 1;
}
topic .QuickHelpSupportSection .QuickHelpSupportBtn:hover {
    transform: scale(1);
    -webkit-filter: grayscale(100%);
}
topic .QuickHelpSupportSection .QuickHelpSupportBtn {
    width: 110px;
}

.ContactSupportSectionBox {
    margin-bottom:30px;
    
}
.ContactSupportSectionBox b {
    display: block;
    font-size:16px;
    color: #555;       
    margin-bottom: 8px;
    
}
.ContactSupportSectionBox .Icon {
    display: inline-block;
    width: 20px;
    height:20px;
    margin: 0px;
    margin-right:10px;
    vertical-align: middle;
}
.ContactSupportSectionBox .EmailIcon {
    background-image: url(ImgObjects/EmailIcon.png)
}
.ContactSupportSectionBox .PhoneIcon {
    background-image: url(ImgObjects/phone-small.svg)
}

.ContactSupportSectionBox span {
    font-size:16px;
    color: #888;;
    vertical-align: middle;
    display: inline-block;
}
.WhatsAppBox .Icon {
    width: 30px;
    height: 30px;     
}
.WhatsAppBox b{
    color: #439433;
}
.WhatsAppBox span{
    color: #fff;
    font-weight: bold;
}

/* QuickHelpSupportFile.html — panel scoped under topic roots inside QuickHelp only */
.QuickHelpBox .QuickHelpArea #ticketreport > h2,
.QuickHelpBox .QuickHelpArea #chatonline > h2,
.QuickHelpBox .QuickHelpArea #contactsupport > h2 {
    margin-top: 0;
    margin-bottom: 0.65rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2d2d2d;
    line-height: 1.35;
}
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpContactLead {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #666;
}
.QuickHelpBox .QuickHelpArea #contactsupport > .ContactSupportSectionBox {
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
}
.QuickHelpBox .QuickHelpArea #contactsupport .ContactSupportLabel {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.35rem;
}
.QuickHelpBox .QuickHelpArea #contactsupport .ContactSupportLine {
    display: flex;
    align-items: center;
    gap: 10px;
}
.QuickHelpBox .QuickHelpArea #contactsupport .ContactSupportSectionBox .Icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
}
.QuickHelpBox .QuickHelpArea #contactsupport .EmailIcon {
    background-image: url(ImgObjects/EmailIcon.png);
}
.QuickHelpBox .QuickHelpArea #contactsupport .WhatsAppIcon {
    background-image: url(ImgObjects/whatsapp.png);
}
.QuickHelpBox .QuickHelpArea #contactsupport .ContactSupportLink {
    font-size: 0.9375rem;
    color: #4a4a4a;
    text-decoration: none;
    word-break: break-all;
}
.QuickHelpBox .QuickHelpArea #contactsupport .ContactSupportLink:hover {
    text-decoration: underline;
    color: #333;
}
.QuickHelpBox .QuickHelpArea #contactsupport .ContactSupportPhone {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1b6b5c;
}
.QuickHelpBox .QuickHelpArea #contactsupport .QuickHelpWhatsAppBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    margin-top: 0.65rem;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #25d366 0%, #20bd5a 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}
.QuickHelpBox .QuickHelpArea #contactsupport .QuickHelpWhatsAppBtn:hover {
    filter: brightness(1.03);
}
.QuickHelpBox .QuickHelpArea #contactsupport .QuickHelpWhatsAppBtn:active {
    filter: brightness(0.97);
}
.QuickHelpBox .QuickHelpArea #contactsupport .QuickHelpWhatsAppBtnSvg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.QuickHelpBox .QuickHelpArea #contactsupport .QuickHelpWhatsAppBtnLabel {
    line-height: 1.2;
}
.QuickHelpBox .QuickHelpArea #ticketreport > h3,
.QuickHelpBox .QuickHelpArea #chatonline > h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin: 0.75rem 0 0.35rem 0;
}
.QuickHelpBox .QuickHelpArea #ticketreport > .HelpBlockContent {
    margin-bottom: 0.5rem;
}
.QuickHelpBox .QuickHelpArea #ticketreport > .HelpBlockContent ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #444;
}
.QuickHelpBox .QuickHelpArea #chatonline > textarea {
    display: block;
    width: 100%;
    max-width: 290px;
    min-height: 130px;
    margin: 0 0 0.85rem 0;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
}
.QuickHelpBox .QuickHelpArea #chatonline > textarea:focus {
    border-color: #aaa;
    box-shadow: 0 0 0 2px rgba(102, 51, 153, 0.12);
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection {
    border-top: 1px solid #e5e5e5;
    margin-top: 1rem;
    padding-top: 0.85rem;
    text-align: center;
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .Icon,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .Icon,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .Icon {
    width: 26px;
    height: 26px;
    margin: 0 auto 6px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    display: block;
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .TicketSupportIcon,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .TicketSupportIcon,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .TicketSupportIcon {
    background-image: url(ImgObjects/ticketicon2.png);
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .ChatSupportIcon,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .ChatSupportIcon,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .ChatSupportIcon {
    background-image: url(ImgObjects/chatsupporticon.png);
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .ContactSupportIcon,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .ContactSupportIcon,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .ContactSupportIcon {
    background-image: url(ImgObjects/callsupporticon.png);
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .QuickHelpSupportBtn,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .QuickHelpSupportBtn,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .QuickHelpSupportBtn {
    width: auto;
    min-width: 92px;
    min-height: 58px;
    height: auto;
    margin: 4px 5px;
    padding: 6px 8px 8px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.15 !important;
    color: #444;
    vertical-align: top;
    box-sizing: border-box;
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .QuickHelpSupportBtn:hover,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .QuickHelpSupportBtn:hover,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .QuickHelpSupportBtn:hover {
    transform: none;
    opacity: 0.88;
}
.QuickHelpBox .QuickHelpArea #ticketreport > .QuickHelpSupportSection .QuickHelpSupportBtn:hover .Icon,
.QuickHelpBox .QuickHelpArea #chatonline > .QuickHelpSupportSection .QuickHelpSupportBtn:hover .Icon,
.QuickHelpBox .QuickHelpArea #contactsupport > .QuickHelpSupportSection .QuickHelpSupportBtn:hover .Icon {
    opacity: 1;
}

topic .TicketEntry {
    width: 290px;
    height: 220px; 
    outline: none;
    box-sizing: border-box;
    padding:10px;
    font-family: inherit;
    color: #666;
    line-height: 22px;
}
topic .TicketTypeSelector .FormElement{
    padding:7px;
    display: inline-block;
    margin: 0px;
}
topic .TicketTypeSelector .FormElement * {
    cursor: pointer;
}

topic .TicketTypeSelector {
    padding:15px 0px;
    width:290px;
    border-top: 1px dotted #999;
/*     border-bottom: 1px dotted #999; */
/*     margin-bottom:20px; */
}
.QuickHelpBox topic {
    width: 290px;
    transition: width 1s, height 1s, top 1s;
}
.QuickHelpBox topic ol {
    -webkit-padding-start: 17px;
}
.ShowExampleVideo .QuickHelpBox {
    width: 100% !important;
    border: none !important;
    padding: 0px !important;
    top:0px;
}
.ShowExampleVideo .QuickHelpArea {
    width: 100% !important;
}
.ShowExampleVideo .QuickHelpArea topic {
    width: 100% !important;
    opacity: 0; 
    visibility: hidden;
}

.ShowExampleVideo .QuickHelpArea topic.QuickHelpVideoSelected {
    opacity: 1;
    visibility: visible;
}

.ShowExampleVideo .QuickHelpBox .QuickHelpVideoSelected video {
    position: absolute;
    top:0px;
    left:0px !important;
    width: 80% !important;
    margin:0px !important;
    z-index: 999999;
    background-color: #414142;
/*     padding:20px; */
    height:inherit;
}
.QuickHelpArea .Title {
    border: none;
}
.ShowExampleVideo .MainArea {
    -webkit-filter: grayscale();
    opacity: .3;
    pointer-events: none;
    
}
.ShowExampleVideo .LeftBar {
    -webkit-filter: grayscale();
    opacity: .3;
    pointer-events: none;

}
.PlayQuickVideoBtn {
    background-color: var(--green);
    border-radius: 60px !important;
    position: absolute;
    left: -2300px;
    transition: left 1.5s;
}
.ShowExampleVideo .PlayQuickVideoBtn {
    left:320px;
    background-color: var(--red);
}
.QuickHelpSupportBtn  {
    display: none;
}
topic li {
    margin-bottom:10px;
}
.QuickHelpChatBtn {
    display: none !important; 
}
.MeIcon {
    border-radius:200px !important;
    width:25px !important;
    height:25px !important;
    padding: 0px !important;
    min-width: 25px;
    margin:0px 10px;
    background-size: 120% !important;
}
.CalendarDepartmentSelector {
    width: 150px; 
}
.NotificationIcon {
    width: 30px;
    height: 30px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    vertical-align: middle;
    margin:0px 10px;
    margin-right: 20px;
}
.ConfirmDeleteBox {
    color: #fff;
    opacity: 0;
    transition: opacity 1s;
    display: none;
}
.ConfirmDeleteBox span {
    font-size: 16px;
    margin-left: 20px;
}
.DeleteReady .ConfirmDeleteBox  {
    opacity: 1;
    display: inline-block;
    float: right;
    margin-right: 130px;
}

.CancelDeleteBtn {
    opacity: 0;
    transition: opacity 1s;
    display: none;
    background-image: url(ImgObjects/CloseBtn.png);
}

.DeleteReady .CancelDeleteBtn {
    opacity: 1;
    display: inline-block !important;
    vertical-align: top;
    background-color: #666;
}
.DepartmentsPanelShow .DepartmentPanel {
    display: block;
}
.DepartmentPanel .ListItem [fieldname="name"] {
    display: block;
    width: inherit;
}
.DepartmentPanel .ListItem [fieldname="abbreviation"] {
    display: block;
    width:30px;
    text-align: center;
    color: #21C977;
    font-weight: bold;
}
.DepartmentPanel .ListItem.AllSelector [fieldname="abbreviation"] {
    color: transparent !important;
}

.ToolBar .CalendarDepartmentSelectorBox {
    display: inline-block;
    cursor: pointer;
}
.ToolBar .CalendarDepartmentSelectorBox .ListItem {
    display: inline-block;
    margin:0px 5px;
    width: 50px;
    box-sizing: border-box;
    vertical-align: middle;
}

.ToolBar .CalendarDepartmentSelectorBox .ListItem .ListField {
    display: none;
    box-sizing: border-box;
    padding: 0px;
}
.ToolBar .CalendarDepartmentSelectorBox .ListItem .ListField[fieldname="abbreviation"] {
    display: block;
    color: #21C977;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}
.ToolBar .CalendarDepartmentSelectorBox .ListItem .ListField[fieldname="abbreviation"]:hover {
    background-color: #eee;
}
.ToolBar .CalendarDepartmentBox {
    display: inline-block;
}
.ListArea .List .ListItem .ListItemDayCounter {

}
.ListArea .List .ListItem .ListItemDayCounter div {
    width: 5px;
    height: 5px; 
    background-color: var(--blue2);
/*     border-radius: 20px; */
    display: inline-block;
    margin-right:2px;    
}
.StoreBox {
    width: 600px;
    margin: 0 auto;    
    position: relative;
    top: 100px;
    text-align: center;
    cursor: pointer;
}
.StoreBox img {
    width: 400px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.StoreBox label {
    font-weight: bold;
    font-family: helvetica;
    font-size: 18px;
    color: #fff;
}
.StoreBox .ArrowDown {
    background-image: url(ImgObjects/arrowdown.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-bottom: 30px;
    cursor: pointer;
}
.StoreAppIcon {
    background-image: url(isotype2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 230px;
    margin-bottom: 30px;
    cursor: pointer;
}
.DuplicateBtn {
    background-image: url(ImgObjects/DuplicateIcon.png); 
    background-repeat: no-repeat;
    background-size: auto 40%;
    background-position: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    opacity: .5;
    float: left;
    transition: background-size .7s;
}
[listviewmode="ListView"] {

}
[listviewmode="ImageView"] .DuplicateBtn {
    position: absolute;
    bottom:0px;
    right: 0px;
}
.DuplicateBtn:hover {
    opacity: 1 !important;
    /* background-size: auto 70%; */
}


.List .ListItem .ListField[fieldname=subservices] {
    display: inline-block;
    width:30px;
    color: transparent !important;
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.ListItem[subservices="true"] .ListField[fieldname=subservices] {
    background-image: url(ImgObjects/arrowright3.png);
}
.ListItem[subservices="true"].Selected .ListField[fieldname=subservices] {
    background-image: url(ImgObjects/arrowright3.png);
    background-color: #fff !important;    
}


.RecordUsers {
    width: 30px;
    height:30px;
    border-radius: 60px;
    padding: 0px !important;
    font-size:14px;
    text-align: center;
    line-height:30px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left:5px;
    background-color: #999;
    color: #fff !important;
}
.RecordUsers[style] {
    color: transparent !important;
}
.note-editor .panel-heading {
    border-top: none !important;
}
.note-editor {
    padding: 0px !important;
}
.note-editor * {
    -webkit-margin-before:0px !important;
    -webkit-margin-after: 0px !important;
    line-height:24px;
}

.note-editor .panel-body {
    padding-top:20px !important;
}

.ChangeTimeZoneBox {
    display: none;        
}
.ChangeTimeZone .ChangeTimeZoneBox {
    display: block;
}
.ChangeTimeZone .ChangeTimeZoneBtn {
    display: none;  
}


.QuickReportBtn {
    background-image: url(ImgObjects/ReportIcon3.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 35px;
    height: 35px;      
    top:13px;
    right:340px;
    visibility: hidden;
    /*transition: transform 1.5s;*/
    transition-timing-function: cubic-bezier(.175,.885,.32,1);
    transition-duration: 1s;
    transition-property: transform;

    transform: scale(.1);
    cursor: pointer;
}
.ShowQuickReport .QuickReportBtn {
    visibility: visible;
    transform: scale(1);
}

.QuickReportContentBox {
    display: none;
}
.QuickReportContent {
    box-sizing: border-box;
    padding: 0px 10px;
}
.QuickReportContent li {
    font-size: 14px;
    margin-bottom: 10px;
    transition: transform .7s;
    cursor: pointer;
}
.QuickReportContent ul {
    -webkit-padding-start: 20px;    
}
.QuickReportContent li:hover {
    color: var(--blue);
}
.QuickReportBox {
    width: 0px;
    overflow: hidden;
    min-height: 600px;
    z-index: 100000;
    position: absolute;
    top:0px;
    right:0px;
    top:60px;
    background-color: #fff;
    transition: width .6s, border .5s, left 1s;
}
.QuickReportBox .QuickReportArea {
    width: 342px;
    height: 100%;
    position: relative;
}
.ShowQuickReportArea .ModulesArea {
    width: calc(100% - 350px);
}
.QuickReportArea .Title {
    padding-top:18px;
    padding-left: 30px;
    color: #515151;
    font-weight: normal;
    border-bottom: 1px solid #999;
    width: 100%;
    box-sizing: border-box;
    padding-bottom:10px;
}
.QuickReportArea .CloseBtn {
    width: 35px;
    height: 35px;     
    opacity: 1;
    z-index: 99999;
}
.ShowQuickReportArea .QuickReportBox {
    width: 342px;
/*     border-left:8px solid #999; */
    height: 100%;
    background-color: #fff;
    border-left: 1px solid #eee;
}
.QuickReportBox .QuickReportArea .Content {
    box-sizing: border-box;
    width:100%;
    font-size: 14px;
    color: #414142;
    position: relative;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.QuickReportBox .QuickReportArea .Content h1 {
    font-size:20px;
    line-height:28px;
    color: #333;
}
.QuickReportBox .QuickReportArea .Content h2 {
    font-size:19px;
    line-height:28px;
    color: #333;
}
.QuickReportBox .QuickReportArea .Content video {
    width: 260px;    
    cursor: pointer;
    transition: width 1s, height 1s, top 1s, left 1s, background-color 1s, padding 1s;

}


.ShowReservationsModule ~ .QuickReportBox .Content topic#reservationsqr {
    left:0px;
}
.ShowCustomersModule ~ .QuickReportBox .Content topic#customersqr {
    left:0px;
}
.ShowContactsModule ~ .QuickReportBox .Content topic#contactsqr {
    left:0px;
}
.ShowSchedulesModule ~ .QuickReportBox .Content topic#schedulesqr {
    left:0px;
}
.ShowEmailerModule ~ .QuickReportBox .Content topic#emailerqr {
    left:0px;
}
.QuickReportBox .Content topic .BarPanel {
    transition: transform 1s;
    transform: translateX(-400px);
}

[subpanel="calendar"] .QuickReportBox .Content topic .CalendarBarPanel {
     transform: translateX(0px);
}
[subpanel="list"] .QuickReportBox .Content topic .ListBarPanel {
     transform: translateX(0px);
}
[subpanel="form"] .QuickReportBox .Content topic .FormBarPanel {
     transform: translateX(0px);
}


.QuickReportBox topic {
    position: absolute;
    transition: left .7s;
    left:-800px;
    width: inherit;
}
.CalendarTitle {
    margin:0 auto;
    position: relative;
    text-align: center;
    width: 300px;
    cursor: pointer;
    background-image: url(ImgObjects/arrowdownsmall.png);
    background-size: auto 20%;
    background-repeat: no-repeat;
    background-position: right center;
}
.CalendarListSelector .ListItem  {
    width:100px;
    text-align: center;
    padding: 0px !important;
    float: left;
}
.CalendarListSelector .ListItem .ListField[fieldname="name"] {
    display: block;
    width: inherit;
    padding: 0px;
    line-height: 40px;
    font-size:12px;
}
.CalendarListSelector .ListItem:nth-child(odd) {
    background-color: #f1f1f1;
}
.CalendarListSelector .List .CalendarYearBar {
    height: 30px;
    line-height: 30px;
    background-color: #858B93;
    clear: left;
    color: #fff;
    text-align: center;
    font-size:13px;
    font-weight: bold;
}
.RefreshListSelectorBtn {
    background-image: url(ImgObjects/ReloadIcon.png);

}
.ListSelectorBox .RefreshListSelectorBtn {
    display: none;
}
.ListSelectorBox.CachedData .RefreshListSelectorBtn {
    display: inline-block;
}
#mobilephoneformatcontent {
    /*display: none;*/
}
.inputtipmessage {
    width: 0px;
    height: 0px;
    position: absolute;
    top:0px;
    left: 0px;        
}
.RecentList {

}
.RecentUsedBar {
    line-height: 40px;
    height: 40px;
    background-color: #fff;
    border-bottom: 1px dashed #999;
    color: #999;
    text-align: center;
    font-size: 12px;
    font-weight: bold;    
}
.RecentMainListTitle {
    display: none;  
}
.RecentMainList .RecentMainListTitle {
    display: block;
    height: 30px;
    line-height: 30px;
    line-height: 40px;
    height: 40px;
    background-color: #fff;
    border-bottom: 1px dashed #999;
    color: #999;
    text-align: center;
    font-size: 12px;
    font-weight: bold;    

}
.RecentMainList.ListArea {
    top:50px;
}
.RecentMainList .AddMoreToListItem {
    display: none;
}
.AuthorizeOrderBtn {
    background-image: url(ImgObjects/medfavicon.png);       
}
.OptionPanel #btn-container {
    width:100%;
    box-sizing: border-box;
}
.OptionPanel #btn-container a.btn-info {
    width:30%;
    display: inline-block;
    border: 1px solid #999;
    height:60px;
    text-align: center;
    line-height: 60px;
    color: #999;
    text-decoration: none;
}
.CallerPanel .FormElement input {
    width: 95%;
    display: inline-block;
    font-size: 24px;
    color: #444;
    font-weight: bold;
    text-align: right;
}
.CallerPanel .FormElement {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
}
.CallerStatus {
    box-sizing: border-box;
    width:100%;
    margin:0px !important;
}
.CallerStatus #status_txt {
    height:50px;
    background-color: #414148;
    line-height: 50px;
    color: #fff;
    padding:0px 10px;
    text-align: center;
}
.CallerPanel {
    box-sizing: border-box;
    padding: 20px;
}
.List .ListItem .PhoneIconAction {
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.UserSelectedBox .CustomerName {
    text-align: center;
    margin-top: 10px;
}


.CompressedBar .ShowMultiModuleSelector .Header .Logo {
    display: none;
}

.CompressedBar .ShowMultiModuleSelector .Header .LeftMenuTopIcon {
    display: block;
}

.CompressedBar .ShowSettingsPanelModule .SettingsPanelModule {
    left: 0px !important;
}

.CompressedBar .MultiModuleSelector .ModuleTitle {
    font-size: 16px !important;
}

.CompressedBar .MultiModuleSelector .Icon {
    display: block !important;
}

.CompressedBar .SearchBox {
    /* display: none; */
}

.CompressedBar .ModuleSectionTitle {
    display: none;
}

.CompressedBar .MainArea {
    left: 80px !important;
}

.CompressedBar .LeftBar > div span {
    display: none;
}
.CompressedBar .AddNewModule {
    display: none;
}
.CompressedBar .LeftBar {
    overflow: hidden;
    width: 80px !important;
}
.CompressedBar .LeftBar .MenuBar > div {
    /* height: 20px !important; */
}


.CompressedBar .ShowMultiModuleSelector.ShowListSelector .ListSelectorBox {
    left: 80px !important;
}



.CompressedBar .MultiModuleSelector {
    width: 80px !important;
}

.CompressedBar .MultiModuleSelector .UserSelectedBox .CustomerName {
    font-size:12px !important;
    text-align: center;
    margin-top:20px;
}
.CompressedBar .MultiModuleSelector .ModuleTitle {
    display: none;
}

.CompressedBar .MainArea .TopBar .MenuBar > div {
    font-size: 28px;
    padding: 0px 30px;
}
.CompressedBar.ShowFileModule .FileModule {
    left: 0px !important;
}

.CompressedBar .LeftBar .MenuBar > div {
    width: 76px !important;
    cursor: pointer;
}

.CompressedBar .MultiModuleSelector .CustomerImage {
    width: 60px !important;
    height: 60px !important;
}

.CompressedBar .MultiModuleSelector .ModuleTitle {
    font-size: 18px;
    top: 5px;
    /* text-align: center; */
    /* width: inherit; */
}

.CompressedBar .ShowFileModule .FileModule {
    left: 0px !important;
}

.CompressedBar .EditControls {
    position: relative;
    margin-right: 50px;
}
.ListInstitutionsBtn {
    background-image: url(ImgObjects/ListPaymentOptionsIcon.png);   
}
.SpecificDateSelector {
    display: none;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    vertical-align: middle;    
}
.SpecificDateSelector .RefreshIcon {
    vertical-align: top;
    margin-top: 5px;
}
.SpecificDateSelector > div {
    display: inline-block;
}

.PeriodSelector .RefreshIcon {
    vertical-align: top;
    margin-top: 5px;
}

.SpecificDateSelector span {
    display: block;
    height: 15px;
    text-align: left;
    line-height: 15px;
    color: #999;
    font-size: 10px;
    margin-top:4px;
    padding-left: 2px;
}
.PeriodSelector {
    display: none;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    vertical-align: middle;
}
.PeriodSelector > div {
    display: inline-block;
}
.PeriodSelector span {
    display: block;
    height: 15px;
    text-align: left;
    line-height: 15px;
    color: #999;
    font-size: 10px;
    margin-top:4px;
    padding-left: 2px;        
}
.SpecificDateSelector input {
    width: 120px;
    color: #888;
    font-size: 13px !important;
    padding: 5px 10px !important;
    display: block;
    box-sizing: border-box;
    height: 25px;
    line-height: 25px;    
}
.PeriodSelector input {
    width: 120px;
    color: #888;
    font-size: 13px !important;
    padding: 5px 10px !important;
    display: block;
    box-sizing: border-box;
    height: 25px;
    line-height: 25px;    
    
}

[timeselected="ShowSpecificDateSelector"] .SpecificDateSelector {
    display: inline-block;
}
[timeselected="ShowPeriodSelector"] .PeriodSelector {
    display: inline-block;

}
[timeselected="ShowPeriodSelector"] .ToolBar .SearchInput {
    width: 30px;

}
.ModalBackgroundSegment {
    position: absolute;
    top:0px;
    left:0px;    
    z-index: 900;
/*     background-color: rgba(0,0,0,.7); */
}
.ModalMode .ModalBackgroundSegment {
    bottom:0px;
    right:0px;        
    height: 100%;    
}

.ExpandDownAndUpBtn {
    opacity: .4;
    background-image: url(ImgObjects/arrowdown1.png);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;   
    background-size: 100%;
    background-position: center;
    cursor: pointer;
    position: absolute;
    bottom:11px;
    right:12px;
    transition: transform 1s;
    transition-delay: 1s;
}
.ExpandDownAndUpBtn:hover {
    opacity: 1;
}
.Expanded .ExpandDownAndUpBtn {
    transform: rotateZ(180deg);
}
.LocalStorageListArea .ListItem {
    background-color: #e8e8e8;
    width:450px;
}
.LocalStorageListArea .ListItem .ListField {
    display: inline-block;
}
.LocalStorageListArea .ListItem.TotalLine {
    background-color: #414141 !important;
}
.LocalStorageListArea .ListItem.TotalLine * {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}
.LocalStorageListArea .ListItem .ListField[fieldname="item"] {
    width: 300px;
}
.LocalStorageListArea .ListItem .ListField[fieldname="value"] {
    width: 80px;
}
.SearchSelectorBtn {
    float: left;
    cursor: pointer;
    border-left: 1px solid #ccc;
    padding: 0px 5px;
    line-height: 40px;
}
.SearchSelectorBtn.Selected {
    background-color: #647CA4 !important;
    color: #fff !important;    
}
.ToolBarList .SearchSelectorBtn {
    line-height: 30px;
}
.SearchSelectorBtn span {
    
}
.SearchSelector {
    font-size: 12px;
    height: 40px;
    overflow:hidden;
    display: none;
}
.CustomerListSelector .SearchSelector {
    display: block;
}
.FormListSelector .SearchSelector {
    display: block;
}
.SearchSelector span {
    font-size: 12px;
    float: left;
/*     color: #fff; */
/*     font-weight: bold; */
    padding: 0px 5px;
    font-style: italic; 
    line-height: 40px;  
}
.FileModule .RestoreAutoSaveBtn {
    background-size: auto 55%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 10px;
}
.ShowListSelector .FileModule .RestoreAutoSaveBtn {
    display: none;
}
.PinIcon {
    display: inline-block;
}
.PinIcon:active {
    background-color: inherit;
}
[pinmodule="true"] .PinIcon {
    background-image: url(ImgObjects/piniconon.png);
}
.ClinicalHistoryBtn {
    display: none;
}
[clinichistoryactive="yes"] .ClinicalHistoryBtn {
    display: inline-block;
}
.AddNewModule {
    width: 40px;
    height: 50px; 
    background-image: url(ImgObjects/PlusIcon.png);
    background-size: 50%;
    background-position: center;
    cursor: pointer;
    background-repeat: no-repeat;
    position: absolute;
    top:0px;
    right:0px;
    opacity: 0;
    transition: opacity .7s, background-color .7s;
}
.AssistantMenuItem {
    width: 40px;
    height: 50px; 
    background-size: 50%;
    background-position: center;
    cursor: pointer;
    background-repeat: no-repeat;
    position: absolute;
    top:0px;
    right:0px;
    opacity: 0;
    transition: opacity .7s, background-color .7s;    
}
.AssistantMenuItem:hover {
    background-color: rgba(255,255,255,.3);
}

.LeftBar > .MenuBar > div:hover .AddNewModule {
    opacity: 1;
}
.LeftBar > .MenuBar > div:hover .AssistantMenuItem {
    opacity: 1;
}

.AddNewModule:hover {
    background-color: rgba(255,255,255,.3);
}

.LinkBtn {
    margin: 15px 0px;
    color: #35a0b9;
    font-weight: bold;
    cursor: pointer;
    transition: color .3s;
}
.LinkBtn:hover {
    color: #1a7085;    
}
.LoadingAnimationBoxy {
    position: absolute;
    top:0px;
    right:15px;
    width: 60px;
    height: 60px;
    will-change: transform;
    perspective: 40px;
}
.LoadingBoxy {
    position: absolute;
    top:15px;
    right:15px;
    width: 30px;
    height: 30px;
    background-color: green;
}
.Loading .LoadingBoxy {
/*    will-change: transform;
    animation-delay: .7s;
    animation-duration: 2s;
    animation-name: doublespin;        
    animation-timing-function: linear;
    animation-iteration-count: infinite;*/
}
.note-toolbar button {
    border-radius: 0px !important;
}
.note-toolbar {
    padding-left:0px !important;
}

.note-toolbar button * {
    opacity: .8;
}
.ProgressNotesModule .panel-body {
    border: none !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
}
.note-editing-area {
/*     box-shadow: 5px 5px 35px rgba(100,100,100,.1) !important;     */
    border: 1px solid #eee;
}
.ListArea .List .ListItem .ListField p {
    -webkit-margin-before: .3em;
    -webkit-margin-after: .3em;    
}
.ListDetailTable {
    border-top: 1px solid #ddd;
}
.ToolBarEditor .PrintBtn {
    /*-webkit-filter: invert(100);*/
}
.LogoType {
    position: absolute;
    width: 80px;
    top:20px;
    left:70px;
    opacity: .5;
}
.CompressedBar .LogoType {
    display: none;
}
.BarBox {
    width: 100%;
    min-height: 60px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    transition: height 1s;
}
.BarBox .BarBoxTitle {
    width: calc(342px - 170px);
    box-sizing: border-box;
    height: 60px;
    display: table;
    float: left;
    vertical-align: top;
    font-size: 14px;
    cursor: pointer;
}
.BarBox .BarBoxTitle p {
   display:table-cell;
   vertical-align: middle;
}
.BarActionItemBtn .BarBox .BarBoxTitle {
    color: var(--blue);
    font-weight: bold;
}
.BarActionItemBtn:hover .BarBox  {
    background-color: var(--blue);
    color: #fff;
}
.BarActionItemBtn:hover .BarBox  .BarBoxTitle {
    color: #fff;
}

.BarBox .SmallArrow {
    background-image: url(ImgObjects/MenuArrowBtn.png);
}
.BarBox.BarBoxExpanded .SmallArrow {
    transform: rotateZ(0deg);
}
.BarBoxContent {
    display: block;
    height: 0;
    overflow: hidden;
    color: #666;;    
    transition: height 1s;
    box-sizing: border-box;
}
.BarBox.BarBoxExpanded .BarBoxContent {
    height: auto;
    box-sizing: border-box;
    padding: 0px 15px;
}
.BarBoxHeader {
    height: 60px;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}
.BarBoxContent h3 {
    color: #717274;
    font-size: 14px;
    -webkit-margin-before: 3px;
    -webkit-margin-after: 3px;
}
.BarBox .BarBoxIcon {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(ImgObjects/ReportIcon12.png);
    width: 45px;
    height: 100%;
    float: left;
}
.BarBox .BarActionIcon {
    background-image: url(ImgObjects/playicon7.png);    
}
.BarBox .BarBtn {
    width: 35px;
    height: 100%;
    float: right;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.BarBox .BarListBtn {
    background-image: url(ImgObjects/ListIcon.png);             
}
.BarBox .BarGraphBtn {
    background-image: url(ImgObjects/ReportIcon10.png);        
}




.QuickPanelContentBox {
    display: none;
}
.QuickPanelContent {
    box-sizing: border-box;
    padding: 0px 10px;
}
.QuickPanelContent li {
    font-size: 14px;
    margin-bottom: 10px;
    transition: transform .7s;
    cursor: pointer;
}
.QuickPanelContent ul {
    -webkit-padding-start: 20px;    
}
.QuickPanelContent li:hover {
    color: var(--blue);
}
.QuickPanelBox {
    width: 0px;
    overflow: hidden;
    min-height: 600px;
    z-index: 100000;
    position: absolute;
    top:0px;
    right:0px;
    background-color: #fff;
    transition: width .6s, border .5s, left 1s;
    border-left: 1px solid #eee;
}
.QuickPanelBox .QuickPanelArea {
    width: 342px;
    height: 100%;
    position: relative;
}
[ShowQuickPanelArea] {
    width: calc(100% - 350px);
}
.QuickPanelArea .Title {
    padding-left: 30px;
    color: #515151;
    font-weight: normal;
    width: 100%;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 55px;
    display: block;
}
.QuickPanelArea .CloseBtn {
    width: 25px;
    height: 25px;     
    opacity: 1;
    z-index: 99999;
}
.QuickPanelBox .QuickPanelArea .Content {
    box-sizing: border-box;
    width:100%;
    font-size: 14px;
    color: #414142;
    position: relative;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.QuickPanelBox .QuickPanelArea .Content h1 {
    font-size:20px;
    line-height:28px;
    color: #333;
}
.QuickPanelBox .QuickPanelArea .Content h2 {
    font-size:19px;
    line-height:28px;
    color: #333;
}
.QuickPanelBox .QuickPanelArea .Content video {
    width: 260px;    
    cursor: pointer;
    transition: width 1s, height 1s, top 1s, left 1s, background-color 1s, padding 1s;

}
[activemodule=BedsModule] [ShowQuickPanelArea=BedsModule] ~ .QuickPanelBedsModule {
    width: 342px;
    height: 100%;
}

[activemodule=CustomersModule] [ShowQuickPanelArea=CustomersModule] ~ .QuickPanelCustomersModule {
    width: 342px;
    height: 100%;
}
[activemodule=ReservationsModule] [ShowQuickPanelArea=ReservationsModule] ~ .QuickPanelReservationsModule {
    width: 342px;
    height: 100%;
}
[activemodule=SchedulesModule] [ShowQuickPanelArea=SchedulesModule] ~ .QuickPanelSchedulesModule {
    width: 342px;
    height: 100%;
}

.QuickPanelBox .Content .BarPanel {
    transition: transform 1s;
    transform: translateX(-400px);
    position: absolute;
    top:0px;
    width: inherit;
}

[subpanel="calendar"] .QuickPanelBox .Content .CalendarBarPanel {
     transform: translateX(0px);
}
[subpanel="list"] .QuickPanelBox .Content .ListBarPanel {
     transform: translateX(0px);
}
[subpanel="form"] .QuickPanelBox .Content .FormBarPanel {
     transform: translateX(0px);
}




.PatientGroupsListSelector {
    width: 660px;
}
.PatientGroupsListSelector .List .ListItem {
    width: 320px;
    float: left;
    height: 60px;
}

.PatientGroupsListSelector .List .ListField[fieldname=caption] {
    width: 140px;
    display: inline-block;
    text-transform: capitalize;
    font-weight: bold;
}
.PatientGroupsListSelector .List .ListField[fieldname=version] {
    width: 240px;
    display: inline-block;
    text-transform: capitalize;
    position: absolute;
    top:37px;
    line-height: 20px;
    padding: 0px;
    height: 20px;
    left: 50px;
    padding-left: 10px;
    font-weight: 100;
    color: #999;
    font-size:11px;    
}

.PatientGroupsListSelector .List .ListField[fieldname=group] {
    width: 80px;
    font-size: 11px;
    color: var(--green);
    display: inline-block;
}
.PatientGroupsListSelector .List .ListField[fieldname=type] {
    width: 50px;
    height: 30px;
    margin-top: 5px;
    padding: 0px;
    display: inline-block;
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(ImgObjects/formicon1.png);
}

.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="form"] {
    background-image: url(ImgObjects/formicon1.png);
}
.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="checkboxes"] {
    background-image: url(ImgObjects/formcheckboxicon.png);
}
.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="list"] {
    background-image: url(ImgObjects/formlisticon.png);
}

.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="multicounter"] {
    background-image: url(ImgObjects/countertypeicon.png);
}
.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="counter"] {
    background-image: url(ImgObjects/countertypeicon.png);
}

.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="donut"] {
    background-image: url(ImgObjects/donuttypeicon.png);
}
.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="pie"] {
    background-image: url(ImgObjects/pietypeicon.png);
}
.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="bar"] {
    background-image: url(ImgObjects/bartypeicon.png);
}
.PatientGroupsListSelector .List .ListField[fieldname=type][fieldvalue="barm"] {
    background-image: url(ImgObjects/bartypeicon.png);
}

.PatientGroupsListSelector .List .ListField[fieldname=group][fieldvalue="reservations"] {
/*  background-image: url(ImgObjects/CalendarIcon4.png); */
    background-image: url(ImgObjects/CalendarIconC.png);    
    border: 1px solid #4cba53;
}
.PatientGroupsListSelector .List .ListField[fieldname=group][fieldvalue="schedules"] {
    background-image: url(ImgObjects/CalendarIcon2C.png);
    border: 1px solid #f6652f;
}

.PatientGroupsListSelector .List .ListField[fieldname=group][fieldvalue="users"] {
    background-image: url(ImgObjects/UserIcon4.png);
    background-size: auto 80%;
    border: 1px solid #666;
}
.PatientGroupsListSelector .List .ListField[fieldname=group][fieldvalue="billing"] {
    background-image: url(ImgObjects/billingicon1.png);
    border: 1px solid #49cd3f;
}

.ListArea .EditAccessBtn {
    width: 30px;
    height: 30px;
    background-image: url(ImgObjects/SettingsIcon4.png);
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: center;
    opacity: .2;
    cursor: pointer;
    position: absolute;
    right: 75px;
    top:0px;
}
.ListArea .ExtendHorizontalBtn {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: center;
    opacity: .2;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top:0px;
}

.ListHeader .EditAccessBtn:hover {
    opacity: 1;
}
.PrintArea .ListItem .listvisible{
    display: inline-block !important;
}
.List .ListItem .ListField[fieldname=paymentmethod] {
    width:50px;
    background-size: auto 75%;
    background-position: center;background-repeat: no-repeat;
    color: transparent;
    opacity: .3;
}

.List .ListItem .ListField[paymentmethod="cash"] {
    background-image: url(ImgObjects/cashpaymenticon.png);
}
.List .ListItem .ListField[paymentmethod="check"] {
    background-image: url(ImgObjects/checkpaymenticon.png);
}
.List .ListItem .ListField[paymentmethod="credit card"] {
    background-image: url(ImgObjects/creditcardpaymenticon.png);
}
.List .ListItem .ListField[paymentmethod="account"] {
    background-image: url(ImgObjects/accountpaymenticon.png);
}
.List .ListItem .ListField[paymentmethod="insurence"] {
    background-image: url(ImgObjects/PaymentMethodIcon.png);
}
.List .ListItem .ListField[paymentmethod="bank transfer"] {
    background-image: url(ImgObjects/bankpaymenticon.png);
}
.List .ListItem .ListField[paymentmethod="package in advanced"] {
    background-image: url(ImgObjects/packageicon.png);
}
.List .ListItem .ListField[paymentmethod="online payment"] {
    background-image: url(ImgObjects/onlinepaymenticon.png);
}
.List .ListItem .ListField[paymentmethod="other"] {
    background-image: url(ImgObjects/otherpaymenticon.png);
}
.List .ListItem.DefaultSelectorItem * {
    color: var(--blue);
}


.ReportDashBoard:not(.ShowFileModule) .DashBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="ReservationsModule"]:not(.ShowFileModule) .ReservationsMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="CustomersModule"]:not(.ShowFileModule) .CustomersMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="ContactsModule"]:not(.ShowFileModule) .ContactsMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="SchedulesModule"]:not(.ShowFileModule) .SchedulesMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule=""]:not(.ShowFileModule) .ClinicalRecordMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="EmailerModule"]:not(.ShowFileModule) .EmailerMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="ReportsModule"]:not(.ShowFileModule):not(.ReportDashBoard) .ReportsMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule=""]:not(.ShowFileModule) .SettingsMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule=""]:not(.ShowFileModule) .HelpMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}


[activemodule="CustomersModule"].ShowFileModule .CustomerMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="PatientSummaryModule"].ShowFileModule .SummaryMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="ProgressNotesModule"].ShowFileModule .ProgressNoteMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="StudiesModule"].ShowFileModule .StudyMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="MedicationsModule"].ShowFileModule .MedicationMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}
[activemodule="FileManagerModule"].ShowFileModule .FileMenuBtn {
    background-color: rgb(17, 23, 33);
    color: var(--yellow) !important;
}

.ReservationProcessStatusPanel {
    display: none;
}
.ReservationProcessStatusPanelShow .ReservationProcessStatusPanel {
    display: block;
}
.CustomerPaymentMethodPanelShow .CustomerPaymentMethodPanel {
    display: block;
}
.CustomerPaymentMethodPanel .ListItem [fieldname="name"] {
    width: 320px;
    display: block;
}

.ReservationProcessStatusPanel .ListItem {
    height:50px;
    box-sizing: border-box;
    line-height:50px;
    width:50%;
    float: left;
    text-align: left;
    padding-right: 10px;
    padding-left: 45px;
    border-bottom:1px solid #aaa;
    border-left:1px solid #aaa;
    background-repeat: no-repeat;
    background-color: var(--light-yellow);
/*  background-color: #414144; */
    background-size: auto 60%;
    background-position: 5px center;
    color: #444;
    transition: background-color .7s;
    text-transform: capitalize;
    font-size:13px;
}
.ReservationProcessStatusPanel .ListItem:nth-child(odd) {
    background-color: var(--light-yellow);
}
.ReservationProcessStatusPanel .ListItem:hover {
    background-color: #E1544A;
}
.ToolBarEditor .MenuBar .DeleteBtn {
    background-image: url(ImgObjects/DeleteIconW3.png);
}
.DateTimeBox .FormElement {
    margin-left:0px;
    margin-right: 0px;
}
[infogroupname="SSSProvider"] {
    border-left: 4px solid var(--blue);
}
.ContactsModule [infogroupname="SSSProvider"] {
    border-left: none;
}

[infogroupname="ServiceGroups"] {
    border-left: 4px solid var(--green);    
}
[infogroupname="SourceInfo"] {
    border-left: 4px solid var(--blue2);    
}
[infogroupname="PersonalInfo"] {
    border-left: 4px solid var(--black);
    background-color: #eee;   
}
[infogroupname="PersonalInfo"] * {
    color: #111 !important;
}
[infogroupname="PaymentMethodsInfo"] {
    border-left: 4px solid var(--blue);    
}



.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  /* border-bottom: none; */
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
    box-shadow: 5px 0px 10px rgba(100,100,100,.1) !important;

}
.autocomplete-items div {
  padding: 7px 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
.MainArea .Header .CallBackBtn {
    display: none;
    position: absolute;
    margin: 0 auto;
    width: 55px;
    height: 55px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    top: 5px;
    left: 0px;
    background-image: url(ImgObjects/ArrowLeft3.png);
    background-position: center;
}
.callbackmode .CallBackBtn {
    display: block !important
}
[serverselected="defaultserver"] .ServerSelctorInputBox {
    display: none !important;
}


frameelement {
    border: 1px solid #eee;
    display: inline-block;
    padding: 10px;
    margin: 10px 0px;
    width: 100%;
    position: relative;
    min-height: 80px;
    box-sizing: border-box;
}
frameelement .FrameElementTitle {
    font-size: 16px;
    margin-left: 7px;
}
.framelistitemproblems .FrameElementTitle {
    font-size: 13px;
    font-weight: bold;
    margin-left: 1px;
    color: var(--form-label-color);    
}
.framelistitemproblems {
    margin: 5px;
    padding: 0px;
    border: none;
}

.RadioGroupElement > label {
    display: block;
    width: 100%;
}
.FormListSelector .List .ListField[fieldname=ordernumber] {
    /* display: block; */
    width: 25px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #888;
    padding-left: 0px;
    padding-right: 0px;
}
.FormListSelector .List .ListField[fieldname=name] {
    display: block;
    width: 410px;
}
.CountBubble {
    width: 30px;
    height: 30px; 
    border: 1px solid #fff;
    border-radius: 50%;
    line-height: 30px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top:-7px;
/*     left:43px; */
    right: 1px;
/*     background-color: var(--red); */
    background-color: var(--blue);
    color: #fff;

}
.CountBubble:empty {
    display: none;
}
.LeftBar .MenuBar .Selected {
/*     background-color: var(--blue) !important; */
    border-left: 4px solid var(--blue) !important;
}
.LeftBar .MenuBar .Selected * {
    color: #fff;
}
.FileModule .MenuBar .Selected {
/*     background-color: var(--blue) !important; */
    border-left: 4px solid var(--blue) !important;
}
.FileModule .MenuBar .Selected * {
    color: #fff;
}


.FileModule .RestoreAutoSaveBtn {
    display: none !important;
}
.NumberElement input {
    width:60px;
}
.NumberElement select {
    width:60px;
}
.ListSelectorBox .ExtraMenu .ListEditBtn {
    cursor: pointer;
    width: 30px;
    height: 40px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url(ImgObjects/EditIcon4.png);
    display: inline-block;
    margin-left:  auto;
    margin-right: 10px;
}

.AssistantListEditorBox .List .ListItem .ListField[fieldname="name"] {
    width: 230px;
    display: inline-block !important;
}

.AssistantListEditorBox .List .ListItem .ListEditBtn {
    cursor: pointer;
    width: 30px;
    height: 40px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url(ImgObjects/EditIcon3.png);
    display: inline-block;
}
.AssistantListEditorBox .List .ListItem .ListDeleteBtn {
    cursor: pointer;
    width: 30px;
    height: 40px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url(ImgObjects/DeleteRedBtn.png);        
    display: inline-block;
}
.AssistantListEditorBox .List .ListItem {
    cursor: default;
}
.AssistantListEditorBox .List .ListItem:nth-child(odd) {
    background-color: #fff;
}

.AssistantListEditorBox .List .ListItem .ListField[fieldname="name"] {
    height: 26px;
    line-height: 26px;
    margin-top:1px;
    margin-left: 2px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.AssistantListEditorBox .List .ListItem.ListItemEditMode .ListField[fieldname="name"] {
    border: 1px solid var(--blue1); 
    color: var(--blue);
}

.AssistantListEditorBox .List .ListItem.ListItemEditMode .ListField[fieldname="name"] {
    border: 1px solid var(--blue1); 
    color: var(--blue);
}
.AssistantListEditorBox .List .ListItem.ListItemEditMode .ListEditBtn {
    background-image: url(ImgObjects/OkIcon5.png);        
}

.AssistantListEditorBox .List .ListItem.ListItemDeleteMode .ListDeleteBtn {
    background-image: url(ImgObjects/DeleteBtn.png);        
    background-color: var(--red);
}
.AssistantListEditorBox .List .ListItem.ListItemDeleteMode .ListEditBtn {
    background-image: url(ImgObjects/DeleteBtn0.png);        
}
.AssistantListEditorBox .List .ListItem.ListItemEditMode .ListDeleteBtn {
    background-image: url(ImgObjects/DeleteBtn0.png);      
}

.AssistantListEditorBox .List .ListItem.ListItemDeleteMode .ListField {
    border: none; 
    color: var(--red);
    text-decoration: line-through;
    background-color: #ebd6d6;
}
.InputInline label {
    display: inline-block;
}
.InputInline input {
    display: inline-block;
}

.InlineInput {
    min-width: 250px;
    
}
.InlineInput.LoingInput {
    min-width: 450px;
}
.FormSignature * {
    display: block;
    text-align: center;
    /*min-width: 300px;*/
}
.FormManualSignature * {
    display: block;
    text-align: center;
    /*min-width: 300px;*/
}

.ModuleArea .note-editor label {
    display: block ;
}
.SettingsPanelModule .Header {
    display: none;
}
.PageContentArea .List .ListItem.AddItemToList {
    opacity: 0;
    transform: rotateX(-90deg);
    background-color: var(--blue);
    transition: transform 0.5s cubic-bezier(.36,-0.64,.34,1.76), background-color 2.5s;
}
.PageContentArea .List .ListItem.AddItemToListEffect {
    opacity: 1;
    transform: none;
    background-color: inherit;
}

.PageContentArea .List .ListItem.AddItemToList * {
    color: #fff;
    transition: color 3.5s;
}

.PageContentArea .List .ListItem.AddItemToListEffect * {
    color: inherit;
}

.PageContentArea .List .ListItem.DeletingListItem {
    transition: all .9s cubic-bezier(.36,-0.64,.34,1.76), height 1.5s, opacity 1.2s;
    opacity: 0;
    transform: rotateX(-90deg);
    height: 0px;
}


.networkdisconnected .LeftBar .Header .Logo {
    animation-name: blink3;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
.networkdisconnected .LeftBar > .Header {
    border-left: 4px solid var(--red);
}
.networkdisconnected .LeftBar > .Header:after {
    content: "Desconectado";
    width: 100%;
    display: block;
    font-size: 11px;
    padding-top: 45px;
    color: var(--red);
    padding-left: 73px;
    
}

.ListSelectorBox .List .ListItem .FavoriteBtn {
    display: none;
    background-image: url(ImgObjects/favoritesoff.png);
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px !important;
    height: 30px !important;
    padding-right: 0px;
    padding-left: 0px;
    opacity: .4;
}
.ListSelectorBox.MultilineListItem .List .ListItem .FavoriteBtn {
    margin-top:10px !important;
    margin-left: 5px !important;
    background-size: auto 60%;
}
.ListSelectorBox .List .ListItem[favorite="true"] .FavoriteBtn {
    background-image: url(ImgObjects/favoriteson.png);
    opacity: 1;
}
.ListSelectorBox.FavoriteListOption .List .ListItem .FavoriteBtn {
    display: inline-block;
}
.ProceduresListSelector {
    width: 640px;
}
.ProceduresListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 550px;
}

.ProblemsListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 250px;
}
.FamilyHistoryListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 250px;
}
.SocialHistoryListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 250px;
}
.VaccineHistoryListSelector .List .ListField[fieldname="name"] {
    display: inline-block;
    width: 250px;
}
.ListSelectorBox.FavoriteListOption .ListSelectorTopBar .FavoritesIcon {
    background-image: url(ImgObjects/favoritesoff.png);
}
.ListSelectorBox.FavoriteListOption.FavoriteListOn .ListSelectorTopBar .FavoritesIcon {
    background-image: url(ImgObjects/favoriteson.png);
}
.Center {
    text-align: center;
}
.Center .NumberElement *{
    text-align: center;
}


.table {
    width:100%;
/*  border:1px solid #eeeeee; */
}

.table-header {
    display:flex;
    width:100%;
/*  background:#000; */
    padding: 0;
}

.table-row {
    display:flex;
    width:100%;
    padding: 0;
}
.table-row:nth-child(odd) {
    background-color: #eee;
}
.table-row .table-data {
    width: inherit;
}

.table-row .table-data:nth-child(1) {
    width:45px !important;
    background-color: #aaa;
    flex: none;
    padding: 10px 0px;
    color: #fff;
    font-weight: bold;
}
.table-row .table-data input {
    width: inherit;
    min-width: 0px;
    flex: none;
    padding: 10px 0px;
    border: none;
    background-color: transparent;
    text-align: center;
}
.table-data, .header__item {
    flex: 1 1 20%;
    text-align:center;
}

.header__item {
    color: #111;
    padding: 10px 0px;
    font-size: 13px;
}
.header__item:nth-child(1) {
    width:45px !important;
    flex: none;
    background: #fff;
    padding: 10px 0px;
}

.filter__link {
    color:white;
    text-decoration: none;
    position:relative;
    display:inline-block;
    padding-left: 20px;
    padding-right: 20px;
    
}
[inpatientmode] {
    display: none;
}
[appinterfacemode="inpatient"] [inpatientmode] {
    display: inline-block;
}
.CustomerRelationshipListSelector .List .ListField[fieldname=fullname] {
    display: inline-block !important;
    width: 170px;
}
.CustomerRelationshipListSelector .List .ListField[fieldname=customerid] {
    display: inline-block;
    width: 40px;
    font-size: 12px;
}
.CustomerRelationshipListSelector .List .ListField[fieldname=relationshiptranslated] {
    display: inline-block;
    width: 40px;
    font-size: 13px;
    color: var(--blue);
    font-weight: bold;
}
.FormElementSelector .List .ListField[fieldname=name] {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
/*     border: 1px solid red; */
    height: 15px;
    padding: 0px;
    line-height: 15px;
    background-color: #eee;
    color: #222;
}
.FormElementSelector .List .ListItem {
    width: 50%;
    float: left;
    outline: 1px solid #eee;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 70%;
    height: 60px;
    width: 33%;
}

.FormElementSelector .List .ListItem:nth-child(odd) {
    background-color: transparent;
}
.FormItemSelected {
    box-shadow: 0px 0px 5px var(--blue);
    position: relative;
}
.Center {
    min-height: 30px;
}
.ColumnElementBox {
    position: relative;
}
.ColumnElement2 {
    width: 49.5%;
    vertical-align: top;
    display: inline-block;
    min-height: 30px;
}
.ColumnElement3 {
    width: 32.7%;
    vertical-align: top;
    display: inline-block;
    min-height: 30px;
}
.ColumnElement4 {
    width: 24.3%;
    vertical-align: top;
    display: inline-block;
    min-height: 30px;
}
.framelistitem {
    position: relative;
}
.framelistitem .MenuItemAdd {
    position: absolute;
    right: 10px;
    top: 5px;
}

.framelistitem .MenuItemProblemAdd {
    position: absolute;
    right: 60px;
    top: 5px;
}

delete {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    background-image: url(ImgObjects/DeleteBtn1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    cursor: pointer;
}
form .FormElement delete {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    background-image: url(ImgObjects/DeleteBtn1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    cursor: pointer;

}
h1 {
    font-size: 40px !important;
    font-weight: 500 !important;    
    line-height: 50px !important;
    -webkit-margin-before: 0px !important;
    -webkit-margin-after: 0px !important;
}
h2 {
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    -webkit-margin-before: 0px !important;
    -webkit-margin-after: 0px !important;
}
h3 {
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 26px !important;
    -webkit-margin-before: 0px !important;
    -webkit-margin-after: 0px !important;
}

.ImageArea {
    position: relative;
}
.FormHealthElementSelector .List .ListItem {
    width: 50%;
    float: left;
    height: 60px;
    outline: 1px solid white;
}
.FormHealthElementSelector .List .ListField[fieldname=name] {
    display: inline-block;
    text-align: center;
    line-height: 18px;
    font-size: 16px;

}

.ListSelectorFormItem {
    background-color: #b8d7e8 !important;
}
.AreaFormItem {
    background-color: #efecec !important;
}
.CheckFormItem {
    background-color: #f9e6e9 !important;
}
.ListPatientProblmesBtn {
    background-image: url(ImgObjects/ListByCustomers.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin:10px;
    vertical-align: middle;
}
.CustomerProblemsListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 360px;
}
[boxname="customervitals"] .ListHeader {
    position: relative;
    padding: 0px;
    margin-left: 29px;
    top:40px;
    overflow-y: auto;    
    border: none;
}
[boxname="customervitals"] .ListHeader .EditAccessBtn{
    display: none;
}


[boxname="customervitals"] .ReportDateBox {
    position: relative;
    padding: 0px;
    height: 160px;
    width: 92%;
    margin-left: 20px;
    top:0px;
    overflow-y: auto;    
}


.SidePanelEditorBackground {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    bottom: 0px;
}
.SidePanelEditorArea {
    z-index: 10010;
}
.SidePanelEditorBox {
    /* transition: width 1s; */
    will-change: left;
    transition: width .9s;
    position: absolute;
    z-index: 1000;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 0px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: -5px 0px 20px rgba(100,100,100,.1);
    border-left: 1px solid #eee;
}
.SidePanelEditorForm {
    width: inherit;
    height: 100%;
    position: absolute;
    top: 50px;
    left: 0px;
}
.SidePanelEditorForm > div {
    left: -700px;
    position: absolute;
    top:0px;
    box-sizing: border-box;
    padding: 15px;
    width: inherit;
}
.SidePanelEditorForm > div textarea {
    width: inherit;
}
.SidePanelEditorForm .SidePanelEditorSelected {
    left: 0px;
    width: inherit;
}

.ShowSidePanelEditor .SidePanelEditorBox {
    width: 320px;
}

.ShowSidePanelEditor .SidePanelEditorBackground {
    right: 0px;
}
.ListItem .ListField[fieldname="permanent"] {
    display: inline-block !important;
    color: transparent !important;
    font-weight: bold;
    width: 30px;
    text-align: center;
}
.ListItem[permanent="true"] .ListField[fieldname="permanent"]:before {
    content: "c";
    color: var(--orange);
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: var(--orange);
    line-height: 18px;
    text-align: center;
    color: #fff;
}

.SidePanelEditorBox .ToolBarEditor {
    top: 0px;
    background-color: var(--green1);
}
.SidePanelEditorBox .ToolBarEditor .Title {
    position: absolute;
    color: #fff;
    left: 80px;
    font-size: 18px;
    line-height: 50px;
}
.SidePanelEditorBox .ConfirmDeleteBox  {
    background-color: var(--red);
    padding-right: 20px;
    z-index: 100;
    position: relative;
}

.List .ListItem .ListField[fieldname="statusname"]{
    color: transparent !important;
    width: 35px;
    background-size: auto 65%;
    background-repeat: no-repeat;
    background-position: center;

}
.List .ListItem[status='pending'] [fieldname="statusname"]{
    background-image: url(ImgObjects/pendingicon.png);  
}
.List .ListItem[status='inprogress'] [fieldname="statusname"]{  
    background-image: url(ImgObjects/inprogressicon.png);   

}
.List .ListItem[status='complete'] [fieldname="statusname"]{
    background-image: url(ImgObjects/completeicon.png); 
}
.List .ListItem[status='paused'] [fieldname="statusname"]{
    background-image: url(ImgObjects/pauseicon.png);    
}
.List .ListItem[status='cancelled'] [fieldname="statusname"]{
    background-image: url(ImgObjects/CancelBtn.png);    
}
.List .ListItem[status='waiting'] [fieldname="statusname"]{
    background-image: url(ImgObjects/pendingoncustomer.png);    
}
.List .ListItem[status='paused'] [fieldname="statusname"]{
    background-image: url(ImgObjects/pauseicon.png);    
}
.List .ListItem[status='waiting'] [fieldname="statusname"]{
    background-image: url(ImgObjects/clockicon.png);    
}

.List .ListItem[status='problem'] [fieldname="statusname"]{
    background-image: url(ImgObjects/problemicon1.png); 
}

.List [recordtype=objective] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/objectiveicon.png);
}
.List [recordtype=task] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/taskicon.png);
}
.List [recordtype=action] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/actiontypeicon.png);
}
.List [recordtype=nursingtask] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/tasktypeicon.png);
}
.List [recordtype=event] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/eventtypeicon.png);
}
.List [recordtype=automation] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/autoactiontypeicon.png);
}
.List [recordtype=note] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/noteicon2.png);
}
.List [recordtype=medication] .ListField[fieldname=recordtype] {
    background-image: url(ImgObjects/MedicationIcon2.png);
}
.ReportBox .AddBtn {
    position: absolute;
    top:10px;
    right: 15px;
}
[appinterfacemode="outpatient"] .AdmissionsMenuBtn {
    display: none;
}
[appinterfacemode="outpatient"] .InsAndOutsMenuBtn {
    display: none;
}
[appinterfacemode="outpatient"] .NursingTasksMenuBtn {
    display: none;
}
[appinterfacemode="outpatient"] .VitalsMenuBtn {
    display: none;
}
[appinterfacemode="outpatient"][showvitalsforoutpatient="true"] .VitalsMenuBtn {
    display: block;
}

[appinterfacemode="outpatient"] .BedsMenuBtn {
    display: none;
}
.TagBox {
    width: 300px;
    min-height: 40px;
    border: 1px solid #ddd;
    margin-top:10px;
}
.TagBox div {
    display: inline-block;
    margin: 2px;
    background-color: #ddd;
    padding: 5px 8px;
    border-radius: 2px;
}

.CustomerListSelector .List .ListItem .ListField[fieldname=sssprovider] {
    display: inline-block;
    font-weight: bold;
    width: 70px;
    font-size: 12px;
}
.CustomerListSelector .List .ListItem .ListField[fieldname=address] {
    display: inline-block;
    font-weight: bold;
    width: 160px;
    font-size: 12px;
    color: var(--green2);
}
.CustomerListSelector .List .ListItem .ListField[fieldname=contractstatus] {
    display: inline-block;
    width: 30px;
    color: transparent;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
}
.CustomerListSelector .List .ListItem[contractstatus=current] .ListField[fieldname=contractstatus] {
    background-image: url(ImgObjects/okgreenbtn.png)
}


.CustomerListSelector .List .ListItem .ListField[fieldname=phonework] {
    display: none;
}

img {
    -webkit-print-color-adjust: exact;
}

.ListSelectorBox.MultilineListItem {

}
.ListSelectorBox.MultilineListItem  .ListArea .List .ListItem {
    height: 50px;    
}
.ListSelectorBox.MultilineListItem .List .ListItem .ListField {
    height: 15px;
    line-height: 15px;
    margin: 0px;
    padding: 0px 10px;
    width: auto !important;
    font-size: 12px;
}

.ListSelectorBox .ListArea .List .ListField.MultlineTopLine {
    width: 100% !important;
    display: inline-block !important;
    float: none;
    line-height: 35px;
    height: 25px;
    font-size: 14px;
    color: #333;
}
.FavoriteListOption.ListSelectorBox .List .ListField.MultlineTopLine {
    width: 80% !important;
    line-height: 35px;
    height: 25px;
    font-size: 14px;
    color: #333;
}
.FavoriteListOption.ListSelectorBox.MultilineListItem  .List .ListItem {
    height: 50px;    
}

.FavoriteListOption.ListSelectorBox .ListArea .List .ListField.MultlineTopLine {
    width: calc(100% - 50px) !important;
}
.FavoriteListOption.ListSelectorBox .ListArea .List .ListField.MultlineTopLine {

}

.FormElementSelector .List * {
    user-select: none;
}
.Title {
    user-select: none;             
}
.SectionTitle {
    user-select: none;             
}
.ModuleTitle {
    user-select: none;             
}
.ModuleSectionTitle {
    user-select: none;             
}
.ModuleSectionSubtitle {
    user-select: none;             
}
.HorizontalScrolling {
    overflow-x: scroll;
}
.HorizontalScrolling .List {
    width: max-content;
}
.HorizontalScrolling .ListHeader {
    width: max-content;
}
.ScrollHorizontalBar {
    display: none;
    height: 100%;
    width: 70px;
    cursor: pointer;
    z-index: 10000;
    position: absolute; 
}
.HorizontalScrolling .ScrollHorizontalBar {
    display: block;
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: opacity .7s, left .3s, right .3s;
}
.HorizontalScrolling .ScrollHorizontalBar:hover {
    opacity: 1;
}
.ScrollBarLeft {
    top:0px;
    left:-40px;
    background-image: url(ImgObjects/ArrowLeft.png),radial-gradient(circle at left center,rgba(28,152,235,.3),rgba(0,0,0,0));
    opacity: .1;
}
.ScrollBarRight {
    top:0px;
    right:-40px;
    background-image: url(ImgObjects/ArrowRight.png),radial-gradient(circle at right center,rgba(28,152,235,.3),rgba(0,0,0,0));
    opacity: .1;
}
.ScrollBarLeft:hover {
    left: -10px;
}
.ScrollBarRight:hover {
    right: -7px;
}
.EditLineField {
    outline: 1px dashed var(--blue);
    outline-offset: -5px;
    background-color: #fff;
    overflow-wrap:inherit !important;
    -webkit-line-break:unset !important;
    overflow-x: auto !important;
    text-overflow: inherit !important;
}
.LoadingLineField {
    outline: 1px solid var(--green);
    color: var(--green);
    outline-offset: -5px;
    opacity: .5;       
}
.List .ListItem.DefaultColumnsItem {
    background-color: var(--light-green);
}
.List .ListItem.DefaultColumnsItem * {
    color: var(--green1);
}
.List .ListItem.DefaultColumnsItem [fieldname="Null"] {
    display: none;
}
.List .ListItem.DefaultColumnsItem [fieldname="Default"] {
    display: none;
}
/* 
:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
} */

[listviewmode="ListView"] .List .ListItem.Selected {
    outline: 1px solid var(--blue);
    outline-offset: -2px;
}
.InstitutionListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 230px;
    display: inline-block;
}
.InstitutionListSelector .List .ListField[fieldname=servicecount] {
    /* color: #999; */
    width: 35px;
    padding: 0px;
    height: 35px;
    line-height: 35px;
    margin-top: 2px;
    text-align: center;
    display: inline-block;
    background-color: #f1f1f1;
    border-radius: 50px;
    font-size: 12px;
}
.ServiceListSelector .SelectAllBtn {
    right: 60px;    
}

.HideModalBtn {
    background-image: url(ImgObjects/backbtn.png);
    background-color: var(--blue);
    background-size: auto 50% !important;
    display: none;
}
[modal="true"] .HideModalBtn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
}

.ListSelectorBox .List .ItemWithNote [fieldname="name"] {
    background-image: none;
}

.ListSelectorBox .List .ItemWithNote [fieldname="note"] {
    background-image: url(ImgObjects/NoteIcon1.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    /*display: inline-block;*/
    width: 30px;
    padding: 0px;
    height: 40px;
    color: transparent !important;
}
.copytoclipboarditem {
    transition: color .9s, text-shadow .9s;
    color: var(--blue) !important;
    text-shadow: 0px 0px 7px var(--blue) !important;
}
#textareacopy {
    transition: transform 2s, opacity 2s, right 2s, left 1s;
    position: fixed;
    top:10px;
    left:-300px;
    padding: 0px 10px;
    background-color: brown;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    width: 110px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    opacity: 0;
    overflow: hidden;
    border-radius: 10px;
    pointer-events: none;
    outline: none !important;
    z-index: -10;
    letter-spacing: 1px;
/*     transform: scale(.5); */
}
#textareacopy.showcopieditem {
/*     transform: scale(1.2); */
    left: 10px;
    opacity: 1;
    z-index: 1000000;
}

.ReportsListSelector.QuickReportsListSelector .List .BarBoxReportButtons {
    display: none;
    width: 49%;
    height: 60px !important;
}
.ReportsListSelector.QuickReportsListSelector .List .BarBoxReportButtons * {
    pointer-events: none;
}
.ReportsListSelector.QuickReportsListSelector .List .BarBoxReportButtons .BarBtn{
    display: none;
}


[activemodule="ReservationsModule"][subpanel="list"] .QuickReportsListSelector .List [group="reservations"][quickpanelview="ListBarPanel"] {
    display: block;
}

[activemodule="ReservationsModule"][subpanel="calendar"] .QuickReportsListSelector .List [group="reservations"][quickpanelview="CalendarBarPanel"] {
    display: block;
}
[activemodule="ReservationsModule"][subpanel="form"] .QuickReportsListSelector .List [group="reservations"][quickpanelview="FormBarPanel"] {
    display: block;
}

.ShowLoadingReport {
    border: 3px solid red;
}
.LoadingReportBox:before {
    content: "";
    display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top:10px;
  right:10px;
  background-color: var(--blue);
  color: transparent !important;
    z-index: 10000 !important;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
.WideList.ListArea {
    overflow-x: auto;
    overflow-y: hidden;
}
.WideList.ListArea .List {
    width: max-content;
}
.WideList .ListHeader {
    width: max-content;
}

.ListItem .ListField[fieldname=paymentmethod] {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .5;
}
.ListItem .ListField[fieldname=paymentmethod][value="cash"] {
    background-image: url(ImgObjects/cashpaymenticon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="check"] {
    background-image: url(ImgObjects/checkpaymenticon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="credit card"] {
    background-image: url(ImgObjects/creditcardpaymenticon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="account"] {
    background-image: url(ImgObjects/accountpaymenticon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="insurence"] {
    background-image: url(ImgObjects/PaymentMethodIcon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="bank transfer"] {
    background-image: url(ImgObjects/bankpaymenticon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="online payment"] {
    background-image: url(ImgObjects/onlinepaymenticon.png);
}
.ListItem .ListField[fieldname=paymentmethod][value="other"] {
    background-image: url(ImgObjects/otherpaymenticon.png);
}

.nvd3.nv-noData {
    font-size: 14px !important;
    font-weight: 100 !important;
}
.CustomerCompanyListSelector .List .ListField {
    display: none !important;
}

.CustomerCompanyListSelector .List .ListField[fieldname=name] {
    display: inline-block !important;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
}

.CustomerAccountListSelector .List .ListField {
    display: none !important;
}
.CustomerAccountListSelector {
    width: 600px !important;
}

.CustomerAccountListSelector .List .ListField[fieldname=company] {
    display: inline-block !important;
    width: 440px;
    font-size: 13px;
    font-weight: bold;
}
.CustomerAccountListSelector .List .ListField[fieldname=id] {
    display: inline-block !important;
    width: 70px;
    font-size: 13px;
    color: #666;
}
.ReservationServiceNotesAlert {
    height: auto;
    width: 700px;
    max-width: none;
    background-color: #fff8c1;
}
.ReservationServiceNotesAlert .AlertMessageBoxTitle {
    background-color: var(--green);
}
.ReservationServiceNotesAlert .AlertMessage {
    max-height: none;
    max-height: 400px;
    
    
}

.ReservationServiceNotesAlert .AlertMessage {
    font-size: 14px;
    line-height: 22px;
}
.AutosaveNotesPanelShow {
    width: 640px;
}

.AutosaveNotesPanelShow .AutosaveNotesPanel {
    display: block;
}
.OptionPanel.AutosaveNotesPanel .ListItem {
    border-bottom: 1px solid #999;
}
.OptionPanel.AutosaveNotesPanel .ListItem [fieldname="createdformatted"]{
    display:inline-block;
    width: 110px;
    font-size: 12px;
    line-height: 14px;
    text-align: right;
}
.OptionPanel.AutosaveNotesPanel .ListItem [fieldname="customername"]{
    display:inline-block;
    width: 150px;
    font-weight: bold;
    color: var(--blue);
    font-size: 12px;
}
.OptionPanel.AutosaveNotesPanel .ListItem [fieldname="subject"]{
    display:inline-block;
    width: 250px;
    font-size: 12px;
}


.OptionPanel.AutosaveNotesPanel .HistoryPanel {
    overflow: hidden;
    height: 0px;
    height: auto;
}
.OptionPanel.AutosaveNotesPanel .HistoryItem {
    position: relative; 
}
.OptionPanel.AutosaveNotesPanel .ListFieldContent {
    box-sizing: border-box;
    padding: 10px;
    border: 1px dotted #999;
    margin:10px;
    width:82%;
}
.OptionPanel.AutosaveNotesPanel .ListFieldContent:empty {
    display: none;
}
.OptionPanel.AutosaveNotesPanel .ListFieldContent * {
    line-height: 14px;
    font-size: 12px;
    -webkit-margin-before: 2px;
    -webkit-margin-after: 2px;
}
.OptionPanel.AutosaveNotesPanel .RestoreHistoryBtn {
    width: 35px;
    height: 35px;
    background-color: #bbb;
    cursor: pointer;
    background-image: url(ImgObjects/restoreautosaveicon.png);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    top:0px;
    right: 5px;
    position: absolute;
    border-radius: 100px;
    transition: background-color .7s;
}
.OptionPanel.AutosaveNotesPanel .RestoreHistoryBtn:hover {
    background-color: #444;
}
.OptionPanel.AutosaveNotesPanel .RestoreFromBtn {
    position: absolute;
    top: 0px; 
    right: 5px;
    height: 25px;
    width: 25px;
    padding: 0px;
    line-height: 30px;
    background-image: url(ImgObjects/restoreautosaveicon.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    cursor: pointer;
    outline: none;
    border-radius: 100px;

}
.DatetimeItemActionBtn {
    background-image: url(ImgObjects/DeleteBtn0.png);
    display: inline-block;
    width: 15px;
    height: 15px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    cursor: pointer;
    opacity: .2;
    border: 1px solid #999;
    border-radius: 80px;
}
.DatetimeItemActionBtn:hover {
    opacity: 1;
}
.NotificationMessageBox .RescheduleNowBtn {
    display: none;      
}
.NotificationMessageBox .RescheduleAssignMode .RescheduleNowBtn {
    display: inline-block;      
}
.NotificationMessageBox .RescheduleAssignMode .RescheduleChooseDateBtn {
    display: none;
}
.ListItem[status=arrived] [fieldname=status] {
    background-image: url(ImgObjects/Arrived1.png); 
}
.arrived {
    background-image: url(ImgObjects/Arrived1.png); 
}
.ListItem[status=ontheway] [fieldname=status] {
    background-image: url(ImgObjects/ambulanceicon.png);    
}
.ontheway {
    background-image: url(ImgObjects/ambulanceicon.png);    
}
.ListItem[status=delayed] [fieldname=status] {
    background-image: url(ImgObjects/Delayed1.png); 
}
.delayed {
    background-image: url(ImgObjects/Delayed1.png); 
}
.noinvitation {
/*     background-image: url(ImgObjects/Delayed1.png);  */
}
.invitationsent {
    background-image: url(ImgObjects/emailinvitationicon.png);
}

.ListItem[status=suspended] [fieldname=status] {
    background-image: url(ImgObjects/suspendedstate.png);   
}
.suspended {
    background-image: url(ImgObjects/suspendedstate.png);   
}
.ListItem[status=confirmed] [fieldname=status] {
    background-image: url(ImgObjects/Confirmed1.png);   
}
.confirmed {
    background-image: url(ImgObjects/Confirmed1.png);   
}
.ListItem[status=cancelled] [fieldname=status] {
    background-image: url(ImgObjects/Cancelled1.png);   
}
.cancelled {
    background-image: url(ImgObjects/Cancelled1.png);   
}
.ListItem[status=emailed] [fieldname=status] {
    background-image: url(ImgObjects/Emailed1.png); 
}
.emailed {
    background-image: url(ImgObjects/Emailed1.png); 
}
.ListItem[status=lighticon] [fieldname=status] {
    background-image: url(ImgObjects/LightIcon.png);
}
.lighticon {
    background-image: url(ImgObjects/LightIcon.png);
}
.ListItem[status=announce] [fieldname=status] {
    background-image: url(ImgObjects/LightIcon.png);
}
.announce {
    background-image: url(ImgObjects/LightIcon.png);
}
.ListItem[status=announcedoctor] [fieldname=status] {
    background-image: url(ImgObjects/anouncedoctor.png);
}
.announcedoctor {
    background-image: url(ImgObjects/anouncedoctor.png);
    background-size:auto 80%;
}
.ListItem[status=announceadmission] [fieldname=status] {
    background-image: url(ImgObjects/anounceadmission.png);
}
.announceadmission {
    background-image: url(ImgObjects/anounceadmission.png);
    background-size:auto 80%;
}
.ListItem[status=problem] [fieldname=status] {
    background-image: url(ImgObjects/problem.png);
}
.problem {
    background-image: url(ImgObjects/problem.png);
}
.ListItem[status=noshow] [fieldname=status] {
    background-image: url(ImgObjects/NoShow1.png);  
}
.noshow {
    background-image: url(ImgObjects/NoShow1.png);  
}
.rescheduled {
    background-image: url(ImgObjects/re-scheduleicon.png);  
}

.ListItem[status=hasquestion] [fieldname=status] {
    background-image: url(ImgObjects/HasQuestion1.png); 
}
.hasquestion {
    background-image: url(ImgObjects/HasQuestion1.png); 
}
.ListItem[status=partiallyarrived] [fieldname=status] {
    background-image: url(ImgObjects/PartiallyArrived1.png);    
}
.partiallyarrived {
    background-image: url(ImgObjects/PartiallyArrived1.png);    
}
.ListItem[status=waitinglist] [fieldname=status] {
    background-image: url(ImgObjects/WaitingListIcon3.png); 
}
.waitinglist {
    background-image: url(ImgObjects/WaitingListIcon3.png); 
}
.ListItem[status=leftvoicemail] [fieldname=status] {
    background-image: url(ImgObjects/LeftVoicemail1.png);   
}
.leftvoicemail {
    background-image: url(ImgObjects/LeftVoicemail1.png);   
}
.ListItem[status=noresponse] [fieldname=status] {
    background-image: url(ImgObjects/noresponseicon.png);   
}
.noresponse {
    background-image: url(ImgObjects/noresponseicon.png);   
}
.ListItem[status=customerleft] [fieldname=status] {
    background-image: url(ImgObjects/lefticon.png); 
}
.customerleft {
    background-image: url(ImgObjects/lefticon.png); 
}
.ListItem[status=domred] [fieldname=status] {
    background-image: url(ImgObjects/domred.png);
}
.domred {
    background-image: url(ImgObjects/domred.png);
}
.ListItem[status=domyellow] [fieldname=status] {
    background-image: url(ImgObjects/domyellow.png);
}
.domyellow {
    background-image: url(ImgObjects/domyellow.png);
}
.ListItem[status=domgreen] [fieldname=status] {
    background-image: url(ImgObjects/domgreen.png);
}
.domgreen {
    background-image: url(ImgObjects/domgreen.png);
}
.ListItem[status=inservice] [fieldname=status] {
    background-image: url(ImgObjects/InServiceIcon.png);    
}
.inservice {
    background-image: url(ImgObjects/InServiceIcon.png);    
}
.ListItem[status=call] [fieldname=status] {
    background-image: url(ImgObjects/call.png); 
}
.call {
    background-image: url(ImgObjects/call.png); 
}
.ListItem[status=informed] [fieldname=status] {
    background-image: url(ImgObjects/informed.png); 
}
.informed {
    background-image: url(ImgObjects/informed.png); 
}
.ListItem[status=none] [fieldname=status] {
    background-image: none;
}
.none {
    background-image: none;
}
.ListItem[status=favorite] [fieldname=status] {
    background-image: url(ImgObjects/Favorite1.png);    
}
.favorite {
    background-image: url(ImgObjects/Favorite1.png);    
}
.ListItem[status=completeseated] [fieldname=status] {
    background-image: url(ImgObjects/Seated1.png);  
}
.completeseated {
    background-image: url(ImgObjects/Seated1.png);  
}
.ListItem[status=noanswer] [fieldname=status] {
    background-image: url(ImgObjects/NoAnswer1.png);        
}
.noanswer {
    background-image: url(ImgObjects/NoAnswer1.png);        
}
.ListItem[status=wrongnumber] [fieldname=status] {
    background-image: url(ImgObjects/WrongPhone1.png);  
}
.wrongnumber {
    background-image: url(ImgObjects/WrongPhone1.png);  
}
.ListItem[status=waitingatbar] [fieldname=status] {
    background-image: url(ImgObjects/WaitingAtBar1.png);    
}
.waitingatbar {
    background-image: url(ImgObjects/WaitingAtBar1.png);    
}
.ListItem[status=partiallyseated] [fieldname=status] {
    background-image: url(ImgObjects/PartiallySeated1.png); 
}
.partiallyseated {
    background-image: url(ImgObjects/PartiallySeated1.png); 
}
.ListItem[status=creditcardtaken] [fieldname=status] {
    background-image: url(ImgObjects/CreditCardTaken1.png); 
}
.creditcardtaken {
    background-image: url(ImgObjects/CreditCardTaken1.png); 
}
.ListItem[status=transferred] [fieldname=status] {
    background-image: url(ImgObjects/transferredicon.png);  
}
.transferred {
    background-image: url(ImgObjects/transferredicon.png);  
}
.ListItem[status=transit] [fieldname=status] {
    background-image: url(ImgObjects/transiticon.png);  
}
.transit {
    background-image: url(ImgObjects/transiticon.png);  
}
.ListItem[status=mytransit] [fieldname=status] {
    background-image: url(ImgObjects/mytransiticon.png);    
}
.mytransit {
    background-image: url(ImgObjects/mytransiticon.png);    
}
.ListItem[status=observation] [fieldname=status] {
    background-image: url(ImgObjects/observationicon.png);  
}
.observation {
    background-image: url(ImgObjects/observationicon.png);  
}
.ListItem[status=transitwaiting] [fieldname=status] {
    background-image: url(ImgObjects/transiticonwaitingicon.png);   
}
.transitwaiting {
    background-image: url(ImgObjects/transiticonwaitingicon.png);   
}
.ListItem[status="close"] [fieldname=status] {
    background-image: url(ImgObjects/Close1.png);
}

.close {
    background-image: url(ImgObjects/Close1.png);
    opacity: 1;
    font-weight: normal;
    font-family: inherit;
    font-size: inherit; 
}

.framelistselector values {
    display: none;
}
.ListSelectorBox ListSelectorSelector {
    
}
.ListSelectorBox.ListSelectorSelector .List .ListItem .ListField[fieldname="name"] {
    display: inline-block;
    width: 290px;
}
.drawonbox1 {
    width: 920px;
    height: 400px;
    border: 1px solid #999;
    vertical-align: top;
        
}
.audiometriabothelement {
    width: 680px;
    height: 400px;
    background-image:  url(ImgObjects/audiometria_2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0px 40px;
    border: none;
    vertical-align: top;
}

.audiometriatoalleftelement #bcPaint-canvas-container {
    margin-top: 20px;
    height: 400px
}

.audiometriatoalleftelement {
    width: 340px;
    height: 400px;
    background-image:  url(ImgObjects/audiometriatonal.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0px 40px;
    border: none;
    vertical-align: top;
}
.audiometriatoalleftelement #bcPaint-canvas-container {
    margin-top: 20px;
    height: 340px;
}
.audiometriatoalrigthelement{
    width: 340px;
    height: 400px;
    background-image:  url(ImgObjects/audiometriatonal.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0px 40px;
    border: none;
    vertical-align: top;    
    background-image: url(ImgObjects/audiometriatonal.jpg);
}
.logoaudiometriaelement {
    width: 340px;
    height: 220px;
}
.threegridselement {
    width: 340px;
    height: 220px;
}
.canvaaudiometriatoalleft {

}
.IndicatorsBox {
    position: relative;
    width: calc(100% - 600px);
    height: 60px;
    margin: 0 auto;
    z-index: 10000;
    /* border: orange 1px solid; */
    transition: top 1s;
    top: -70px;
    will-change: transform;
}
[activemodule="PotentialsModule"] .IndicatorsBox {
    top: 0px;
}
.ArrowRecordBtn {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 1000000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-image: url(ImgObjects/arrowleft3.png);
    cursor: pointer;
    border-radius: 100px;
}
/* .ArrowRecordBtn:hover {
    background-color: #aaa;
} */
.ArrowRecordBtn:active {
    background-color: var(--red);
}

.PrevRecordBtn {
    top: -5px;
    left: 0px;
    background-image: url(ImgObjects/arrowleft3.png);
}
.NextRecordBtn {
    top: -5px;
    right: 30px;    
    background-image: url(ImgObjects/arrowright3.png);
}
.PercentageBox {
    width: 240px;
    height: 30px;
    border: 1px solid #ccc;
    padding: 0px !important;
}
.PercentageBox div {
    width: 25px;
    height: 30px;     
    border-right: 1px solid #ccc;
    cursor: pointer;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    float: left;
    margin:0px;
}
.PercentageBox div:hover {
    background-color: #81b6db;
}
.PercentageBox div:nth-last-child(1) {
    border-right:none;
}
.PercentageBox div.Selected {
    background-color: var(--red);
    color: #fff;
}

.DigitalSignatureBox div {
    font-size: 13px;
    font-weight: bold;
    height: auto;
    padding: 0px;
    padding-left: 10px;
    line-height: 14px;
    color: var(--green4);
    font-family: "Courier New", Courier, monospace;
}
.OnlineVademecumListSelector {
    width: 820px !important;
}
.OnlineVademecumListSelector .List h2 {
    display: none;
}
.OnlineVademecumListSelector .List .ListItem .ListField {
    display: inline-block;
    width: auto;
}
.OnlineVademecumListSelector .List article:nth-child(odd) {
    background-color: #f1f1f1;
}
.OnlineVademecumListSelector .List .ListItem .ListField{
    text-decoration: none;
    color: #666;
/*     font-size: 12px; */
    height: 40px;;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    display: none;
    /* border-right: 1px solid #bbb; */
}
.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=NOMBRE] {
    display: inline-block;
    width: 250px;
  display: flex;
  align-items: center;   /* vertical center */
  overflow-wrap: break-word;
  line-height: 16px;    
}
.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=PRESENTACION] {
    display: inline-block;
    width: 150px;
  display: flex;
  align-items: center;   /* vertical center */
  overflow-wrap: break-word;
  line-height: 16px;
    font-weight: normal;
    
}
.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=FORMA] {
    display: inline-block;
    width: 140px;
  display: flex;
  align-items: center;   /* vertical center */
  overflow-wrap: break-word;
  line-height: 11px;
    font-size: 10px;
    font-weight: normal;
    
}

.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=VIA] {
    display: inline-block;
    width: 50px;
    color: #aaa;
    font-size: 10px;    
}

.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=PRECIO] {
    display: inline-block;
    width: 90px;
    color: #aaa;
    font-size: 13px;
    padding-left: 15px;
    
}
.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=PRECIO]:before {
    content: "$ ";
    width: 15px;
}
.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=D_PAMI] {
    display: inline-block;
    width: 90px;
    color: #333;
    font-size: 9px;
    padding-left: 15px;
  display: flex;
  align-items: center;   /* vertical center */
  overflow-wrap: break-word;
  line-height: 16px;
    font-weight: normal;
    padding-left: 5px;
    
}
.OnlineVademecumListSelector .List .ListItem .ListField[fieldname=D_PAMI]:before {
    content: "PAMI";
    width: 8px;
    line-height: 8px;
    font-family: monospace;
    margin-right: 10px;
    font-size: 7px;
}


.OnlineVademecumListSelector .List .ListItem .ListField:nth-child(1){
    font-weight: bold;
}
.OnlineVademecumListSelector .List .ListItem .ListField:nth-child(2){
    color: var(--blue);
    font-size: 12px;
}
.OnlineVademecumListSelector .List .entry-header {
    display: none;
}
.OnlineVademecumListSelector .List .ttl-medicamento {
    font-size: 24px !important;
    width: auto;
    display: inline-block;
}
.OnlineVademecumListSelector .List .entry-content {
    box-sizing: border-box;
    padding: 30px;
    height: 100%;
    background-color: #fff;    
}
.OnlineVademecumListSelector .List .ttl-laboratorio a {
    text-decoration: none;
    color: #999;
    pointer-events: none;
    width: auto;
    display: inline-block;    
}
.OnlineVademecumListSelector .List .ttl-laboratorio {
    width: auto;
    display: inline-block; 
    margin-left: 30px;
}
.OnlineVademecumListSelector .List .row {
    display: inline-block;
    width: 100%;
}
.OnlineVademecumListSelector .List .info-general {
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    padding: 10px 5px;
    margin-bottom: 10px;
}
.OnlineVademecumListSelector .List .row * {
    position: static;
    display: block;
    width: auto;
    height: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
}


.OnlineVademecumListSelector .List .info-general .descrip {
    width: 100%;
}
.OnlineVademecumListSelector .presentacion .precio {
    float: right;
    font-weight: bold;
}
.OnlineVademecumListSelector .presentacion .pami {
    display: inline-block;
    font-size: 13px;
    float: right;
}
.OnlineVademecumListSelector .presentacion .pami * {
    display: inline-block;
}

.OnlineVademecumListSelector .presentacion .ioma {
    display: inline-block;
    font-size: 13px;
    float: right;
}
.OnlineVademecumListSelector .presentacion .ioma * {
    display: inline-block;
}
.OnlineVademecumListSelector .presentacion .ioma *:empty {
    display: none;
}

.OnlineVademecumListSelector .List .info-general .descrip .ttl-descrip {
    width: 200px;
    display: inline-block;
}
.OnlineVademecumListSelector .List .info-general .descrip .txt-descrip {
    width: 200px;
    display: inline-block;
}
.OnlineVademecumListSelector .List .entry-content .presentacion {
    padding: 10px 0px;
    cursor: pointer;
    position: relative;
}
.OnlineVademecumListSelector .List .entry-content .presentacion:before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    display: block;
    top: 10px; 
    left: -20px;
    background-image: url(ImgObjects/ArrowRight3Black.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.OnlineVademecumListSelector .List .entry-content .presentacion:hover {
    background-color: #f1f1f1;
}

.OnlineVademecumListSelector .List .entry-content .presentacion .ttl-pres {
    color: var(--blue);
    font-size: 18px;
}
.OnlineVademecumListSelector .List .entry-content .presentacion .ttl-bajada {
    font-size: 12px;
}
.OnlineVademecumListSelector .List .entry-content .presentacion .col-sm-8 {
    width: 50%;
    min-height: 50px;
}
.OnlineVademecumListSelector .List .entry-content .presentacion .hidden {
    display: none;
}
.OnlineVademecumListSelector .List .entry-content .presentacion .ioma {
    /* display: none; */
}
.OnlineVademecumListSelector .List .entry-content p:nth-last-child(1) {
    display: none;
}

.StudiesValueOptionsListSelector .List .ListItem .ListField[fieldname=name] {
    width: 240px;
    display: inline-block;
}
.listdetail {
    border-top:1px solid #999;
    padding: 20px 0px;
}
.listdetail .quotedetailline {
    width: inherit;
    box-sizing: border-box;
    position: relative;
    width: 98%;
}
.listdetail .quotedetailline listfield{
    width: inherit;
    padding:10px 5px;
    height: auto;
    vertical-align: top;
    font-size:14px;
    clear: both;
}

.listdetail .quotedetailline:nth-child(odd) {
    background-color: #eee;
    line-height:40px;
}
.listdetail .quotedetailline [fieldname="code"] {
    display: inline-block;
    width:90px;
    line-height:20px;
    color: #666;
    display: none;
}

.listdetail .quotedetailline [fieldname="method"] {
    display: inline-block;
    width:100px;
    line-height:20px;
    color: #666;
    /* display: none; */
}
.listdetail .quotedetailline [fieldname="value"] {
    display: inline-block;
    width:70px;
    line-height:20px;
    color: #666;
    font-weight: bold;
}

.EditMode .listdetail .quotedetailline [fieldname="value"] {
    box-shadow: 0px 0px 2px green;
}

.listdetail .quotedetailline [fieldname="typename"] {
    display: inline-block;
    width:100px;
    line-height:20px;
    color: #666;
    display: none;
}
.listdetail .quotedetailline [fieldname="name"] {
    display: inline-block;
    width:280px;
    line-height:20px;
    font-weight: bold;
}
.listdetail .quotedetailline [fieldname="unit"] {
    display: inline-block;
    width:50px;
    line-height:20px;
    font-size: 11px;
    /* display: none; */
}

.listdetail .quotedetailline [fieldname="referencenote"] {
    display: inline-block;
    width:180px;
    line-height:20px;
    font-size: 12px;
    /* display: none; */
}
.listdetail .quotedetailline [fieldname="price"] {
    display: inline-block;
    width:90px;
    float: right;
    text-align: right;
    color: #333;
    height:20px;
    vertical-align: top;
    line-height: 20px;
}

.listdetail .DeleteLineBtn {
    display: inline-block !important;
    position: absolute;
    width:30px;
    transition: opacity 1s, transform 1s;
    background-image: url(ImgObjects/DeleteBtn1.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    opacity: .3;
    height: 35px;
    right: -30px;
    top:3px;
}



.listdetail.listdetailblockformat .quotedetailline {
    width: inherit;
    box-sizing: border-box;
    position: relative;
    width:45%;
    display: inline-block;
    vertical-align: top;
}
.listdetail.listdetailblockformat .quotedetailline:nth-child(odd) {
    background-color: #fff !important;
    line-height:40px;
}

.listdetail.listdetailblockformat .quotedetailline [fieldname="name"] {
    display: inline-block;
    width:150px !important;
    line-height:20px;
    font-weight: bold;
    font-size: 12px;
}
.listdetail.listdetailblockformat .quotedetailline [fieldname="value"] {
    display: inline-block;
    width:50px !important;
    line-height:20px;
    font-size: 11px;
    /* display: none; */
}
.listdetail.listdetailblockformat .quotedetailline [fieldname="unit"] {
    display: inline-block;
    width:50px;
    line-height:20px;
    font-size: 11px;
    /* display: none; */
}

.listdetail.listdetailblockformat .quotedetailline [fieldname="referencenote"] {
    display: inline-block;
    width:50px !important;
    line-height:20px;
    font-size: 9px !important;
    /* display: none; */
}



.ListArea .List .ListItem[currency="dolares"] .ListField[fieldname="price"] {
    color: var(--green);
    font-weight: bold;
    position: relative;
}
.ListArea .List .ListItem[currency="dolares"] .ListField[fieldname="price"]:before {
    content: "us$";
    padding: 0px !important;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    font-size:10px;
    margin-left:-5px;
    margin-right: 3px;
}



.EditMode .NewCustomerBtn {
    display: inline-block !important;
}
.LabServicesListSelector {
    width: 620px;
}
.LabServicesListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 300px;
    display: inline-block;
}
.StudiesServicesListSelector {
    width: 620px !important;
}
.StudiesServicesListSelector .List . ListItem {
    display: flex;
    /* flex-direction: column; */
    height: 50px !important;
    border: 1px solid blue;
    align-items: center;
    flex-grow: 0;
    
}

.StudiesServicesListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 550px;
    display: block;
    /* max-height: 63%; */
    flex: 2;

}
.StudiesServicesListSelector .List .ListField[fieldname=abbreviation] {
    width: 550px;
    display: block;
    font-size: 11px;
    color: var(--blue);
    
    line-height: 14px;
      flex: 1;

    
}
.StudiesServicesListSelector .List .ListField[fieldname=abbreviation]:empty {
    display:none;
}


/* permissions */
[user_viewallclinicalrecords="false"] .LeftBar .MenuBar .ClinicalRecordMenuBtn {
    display: none;
}
[user_viewallclinicalrecords="false"] .BookIcon {
    display: none !important;
}
[user_viewallclinicalrecords="false"] .FileModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .ProgressNotesModule  {
    display: none;
}
[user_viewallclinicalrecords="false"] .PatientSummaryModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .ProgressNotesModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .StudiesModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .MedicationsModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .VitalsModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .CustomerFormsModule {
    display: none;
}
[user_viewallclinicalrecords="false"] .FileManagerModule {
    display: none;                    
}

[userloggedintype="user"] .SettingsPanelModule .MenuBar  > div {
    display: none;
}
[userloggedintype="user"] .SettingsPanelModule .MenuBar .MyProfileMenuBtn {
    display: block;
}
[userloggedintype="user"] .SettingsPanelModule .MenuBar .MyAccountMenuBtn {
    display: block;
}
[userloggedintype="user"] [user_configureschedules="true"] .SettingsPanelModule .MenuBar > .SchedulesMenuBtn {
    display: block;
}


[user_viewpartialclinicalrecords="true"] .LeftBar .MenuBar .ClinicalRecordMenuBtn {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .BookIcon {
    display: block !important;
}
[user_viewpartialclinicalrecords="true"] .FileModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .FileModule .MenuBar > div{
    display: none;
}

[user_viewpartialclinicalrecords="true"] .ProgressNotesModule  {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .PatientSummaryModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .ProgressNotesModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .StudiesModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .MedicationsModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .VitalsModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .CustomerFormsModule {
    display: block;
}
[user_viewpartialclinicalrecords="true"] .FileManagerModule {
    display: block;                    
}


[user_viewcrmedications="true"] .FileModule .MenuBar .MedicationMenuBtn {
    display: block;
}
[user_viewcrmedications="true"] .MedicationsModule .ToolBarList .MenuItemAdd {
    display: none;
}
[user_viewcrmedications="true"] .MedicationsModule .ToolBarEditor .EditBtn {
    display: none;
}
[user_viewcrmedications="true"] .MedicationsModule .ToolBarEditor .RepeatIcon2 {
    display: none;
}
[user_viewcrmedications="true"] .MedicationsModule .ListArea .List .DuplicateBtn {
    display: none;
}


[user_viewcrforms="true"] .FileModule .MenuBar .CustomerFormsMenuBtn {
    display: block;
}
[user_viewcrforms="true"] .CustomerFormsModule .ToolBarList .MenuItemAdd {
    display: none;
}
[user_viewcrforms="true"] .CustomerFormsModule .ToolBarEditor .EditBtn {
    display: none;
}
[user_viewcrforms="true"] .CustomerFormsModule .ToolBarEditor .RepeatIcon2 {
    display: none;
}
[user_viewcrforms="true"] .CustomerFormsModule .ListArea .List .DuplicateBtn {
    display: none;
}


[user_editcrforms="true"] .FileModule .MenuBar .CustomerFormsMenuBtn {
    display: block;
}
[user_editcrforms="true"] .CustomerFormsModule .ToolBarList .MenuItemAdd {
    display: inline-block;
}
[user_editcrforms="true"] .CustomerFormsModule .ToolBarEditor .EditBtn {
    display: inline-block;
}
[user_editcrforms="true"] .CustomerFormsModule .ToolBarEditor .RepeatIcon2 {
    display: inline-block;
}
[user_editcrforms="true"] .CustomerFormsModule .ListArea .List .DuplicateBtn {
    display: inline-block;
}

[user_viewcrfiles="true"] .FileModule .MenuBar .FileMenuBtn {
    display: block;
}
[user_viewcrfiles="true"] .FileManagerModule .ToolBarList .MenuItemAdd {
    display: none;
}
[user_viewcrfiles="true"] .FileManagerModule .ToolBarEditor .EditBtn {
    display: none;
}
[user_viewcrfiles="true"] .FileManagerModule .ToolBarEditor .RepeatIcon2 {
    display: none;
}
[user_viewcrfiles="true"] .FileManagerModule .ListArea .List .DuplicateBtn {
    display: none;
}

[user_editcrfiles="true"] .FileModule .MenuBar .FileMenuBtn {
    display: block;
}
[user_editcrfiles="true"] .FileManagerModule .ToolBarList .MenuItemAdd {
    display: inline-block;
}
[user_editcrfiles="true"] .FileManagerModule .ToolBarEditor .EditBtn {
    display: inline-block;
}
[user_editcrfiles="true"] .FileManagerModule .ToolBarEditor .RepeatIcon2 {
    display: inline-block;
}
[user_editcrfiles="true"] .FileManagerModule .ListArea .List .DuplicateBtn {
    display: inline-block;
}


[user_viewcrstudies="true"] .FileModule .MenuBar .StudyMenuBtn {
    display: block;
}
[user_viewcrstudies="true"] .StudiesModule .ToolBarList .MenuItemAdd {
    display: none;
}
[user_viewcrstudies="true"] .StudiesModule .ToolBarEditor .EditBtn {
    display: none;
}
[user_viewcrstudies="true"] .StudiesModule .ToolBarEditor .RepeatIcon2 {
    display: none;
}
[user_viewcrstudies="true"] .StudiesModule .ListArea .List .DuplicateBtn {
    display: none;
}

[user_editcrstudies="true"] .FileModule .MenuBar .StudyMenuBtn {
    display: block;
}
[user_editcrstudies="true"] .StudiesModule .ToolBarList .MenuItemAdd {
    display: inline-block;
}
[user_editcrstudies="true"] .StudiesModule .ToolBarEditor .EditBtn {
    display: inline-block;
}
[user_editcrstudies="true"] .StudiesModule .ToolBarEditor .RepeatIcon2 {
    display: inline-block;
}
[user_editcrstudies="true"] .StudiesModule .ListArea .List .DuplicateBtn {
    display: inline-block;
}
[user_editstock="true"] .SettingsPanelModule .MenuBar .ItemsMenuBtn {
    display: inline-block;
}
[user_editstock="true"] .SettingsPanelModule .MenuBar .SockMenuBtn {
    display: inline-block;
}

/* admin permissions */
[admin_onlycaneditmydiagnosislist="true"] .ListSelectorBox .EditMyDiagnosisListBtn {
    display: none !important;
}
[userloggedintype="admin"] .ListSelectorBox .EditMyDiagnosisListBtn {
    display: inline-block !important;
}

/* operator permissions */
[operator_viewallclinicalrecords="false"] .LeftBar .MenuBar .ClinicalRecordMenuBtn {
    display: none;
}
[operator_viewallclinicalrecords="false"] .BookIcon {
    display: none !important;
}
[operator_viewallclinicalrecords="false"] .FileModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .ProgressNotesModule  {
    display: none;
}
[operator_viewallclinicalrecords="false"] .PatientSummaryModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .ProgressNotesModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .StudiesModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .MedicationsModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .VitalsModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .CustomerFormsModule {
    display: none;
}
[operator_viewallclinicalrecords="false"] .FileManagerModule {
    display: none;                    
}



/* resource permisions */
[userloggedintype="resource"] .SettingsPanelModule .MenuBar  > div {
    display: none;
}
[userloggedintype="resource"] .SettingsPanelModule .MenuBar .MyProfileMenuBtn {
    display: block;
}
[userloggedintype="resource"] .SettingsPanelModule .MenuBar .MyAccountMenuBtn {
    display: block;
}
[userloggedintype="resource"] [resource_configureschedules="true"] .SettingsPanelModule .MenuBar > .SchedulesMenuBtn {
    display: block;
}
[resource_view_quotes="false"] .LeftBar .MenuBar .QuotesMenuBtn {
    display: none;
}

[resource_edit_quotes="true"] .LeftBar .MenuBar .QuotesMenuBtn {
    display: block;
}
[resource_edit_quotes="false"] .QuotesModule .ToolBarList .MenuItemAdd {
    display: none;
}
[resource_edit_quotes="false"] .QuotesModule .ToolBarEditor .EditBtn {
    display: none;
}
[resource_edit_quotes="true"] .LeftBar .MenuBar .QuotesMenuBtn {
    display: block;
}
[resource_editbilling="false"] .LeftBar .MenuBar .TransactionsMenuBtn {
    display: none;
}
[resource_editbilling="false"] .LeftBar .MenuBar .PaymentsMenuBtn {
    display: none;
}
[resource_editbilling="false"] .BillingButton {
    display: none !imp;
}
[resource_viewprices="false"] [fname="price"] {
    visibility: hidden;
}
[resource_viewprices="false"] [fieldname="price"] {
    visibility: hidden;
}

[resource_viewprices="false"] [name="value"] {
    visibility: hidden;
}


[resource_viewprices="false"] [fname="price"] {
    visibility: hidden;
}
[resource_viewprices="false"] [fieldname="price"] {
    visibility: hidden;
}

[resource_viewprices="false"] [name="value"] {
    visibility: hidden;
}

/*also a resource*/

[alsoaresource="true"][resource_viewprices="false"] [fname="price"] {
    visibility: hidden;
}
[alsoaresource="true"][resource_viewprices="false"] [fieldname="price"] {
    visibility: hidden;
}

[alsoaresource="true"][resource_viewprices="false"] [name="value"] {
    visibility: hidden;
}


[alsoaresource="true"][resource_viewprices="false"] [fname="price"] {
    visibility: hidden;
}
[alsoaresource="true"][resource_viewprices="false"] [fieldname="price"] {
    visibility: hidden;
}

[alsoaresource="true"][resource_viewprices="false"] [name="value"] {
    visibility: hidden;
}


/*also a resource*/

[resource_editstock="true"] .SettingsPanelModule .MenuBar .ItemsMenuBtn {
    display: inline-block;
}
[resource_editstock="true"] .SettingsPanelModule .MenuBar .StockMenuBtn {
    display: inline-block;
}

[userloggedintype="user"][alsoaresource="true"] .MedicationsModule .ToolBarList .MenuItemAdd {
    display: inline-block;
}


.signedtrue form .DigitalSignatureBox:after {
    content: "Firma Digital";
    font-size: 11px;
    color: #24a5df;
    letter-spacing: -0.5px;
    font-weight: bold;
    position: absolute;
    top:15px;
    left: 35px;
}
.signedtrue form .DigitalSignatureBox:after {
    content: "Firma Digital";
    font-size: 11px;
    color: #24a5df;
    letter-spacing: -0.5px;
    font-weight: bold;
    position: absolute;
    top:15px;
    left: 35px;
}
.DigitalSignatureBox [name=digitalsigndate] {
    font-size: 10px !important;
    display: none;
}
.signedtrue form .DigitalSignatureBox [name=digitalsigndate] {
    display: block;
}

.HealthGlobalListSelector  {
    width: 540px !important;
}
.HealthGlobalListSelector.ListSelectorBox .Title {
    display: none;
}
.HealthGlobalListSelector .List .ListField[fieldname=code] {
    display: inline-block;
    width: 50px;
}
.HealthGlobalListSelector .List .ListField[fieldname=name] {
    /*display: inline-block;*/
    width: 420px;
    display: inline-block;
}
/* .HealthGlobalListSelector .List .ListField[fieldname=groupname] {
    display: inline-block;
    width: 50px;
    display: inline-block;
    font-size: 12px;
    color: #999;
    float: right
}
 */

.EditMyDiagnosisListBtn {
    color: #E9997A;
    display: inline-block !important;
    background-image: url(ImgObjects/EditIcon4.png);
    background-repeat: no-repeat;
    background-size: auto 35%;
    background-position: center;
    cursor: pointer;
    height: 50p !important;
    width: 30px !important;
    vertical-align: media;
}
.FormElementTemplateSelector {
    width: 350px;
}
.FormElementTemplateSelector [name]{
    width: 300px;
    display: inline-block;
}
.OptionsBtn {
    /*float: right;       */
}
.List .ListMessage {
    display: block;
    line-height: 30px;
    text-align: center;
    margin-top: 20px;
    color: #999;
    font-size: 14px;
}
.List .ListMessage img {
    height: 30px;
    vertical-align: middle;
    margin: 0px 5px;
}
.validationfields .FormElement {
    width: 120px;
}
[userloggedintype="resource"] [rgroup="billing"] {
    display: none !important;
}
[userloggedintype="resource"] .List [group="billing"] {
    display: none !important;
}
[userloggedintype="resource"] .ListSelectorBox [group="billing"] {
    display: none !important;
}
[userloggedintype="resource"] [rgroup="ItemsMenuBtn"] {
    display: none !important;
}
[userloggedintype="resource"] .ListSelectorBox [group="StockMenuBtn"] {
    display: none !important;
}
.ProcessNoteFormElement {
    display: none;
}
[userloggedintype="accounting"] .ProcessNoteFormElement {
    display: inline-block;
}
[userloggedintype="admin"] .ProcessNoteFormElement {
    display: inline-block;
}
[userloggedintype="user"] [user_editprocessnote="true"] .ProcessNoteFormElement {
    display: inline-block;
}
.VideoCallsStatusPanelShow .VideoCallsStatusPanel {
    display: block;
}


/* new interface */
/*.MenuItemMedium {
    display: inline-block;
    padding: 0px 15px;
    color: #888;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    vertical-align: middle;
    min-width: 60px;
    width: auto;
    background-size: auto 40% !important;
    background-repeat: no-repeat;
    background-position: 10px center;
    cursor: pointer;
    padding-left: 25px;
    padding-right: 15px;
    transition: opacity .7s, transform .5s, background-color 1s;
    text-transform: capitalize;
    margin-left: 5px;
}

.MenuItemMedium span {
    display: inline-block;
    width: auto;
    color: inherit !important;
    font-size: 12px;
    font-weight: bold;
    padding-left: 10px;

}
.MenuItemList {
    border-bottom: 4px solid #999;
}
.MenuListByCustomer {
    border-bottom: 4px solid #409df6;    
    color:  #409df6; 
}
.MenuListByContact {
    border-bottom: 4px solid #b59124;    
    color:  #b59124; 
}
.MenuListByContactInst {
    border-bottom: 4px solid #ea923c;    
    color:  #ea923c; 
}
.ListServiceListIcon {
    border-bottom: 4px solid #565656;    
    color:  #565656; 
}
.ListByStatusBtn {
    border-bottom: 4px solid #626262;    
    color:  #626262; 
}
.NotActiveViewBtn {
    border-bottom: 4px solid #040404;    
    color:  #040404; 
}
.WaitingListBtn {
    border-bottom: 4px solid #ad1e0c;    
    color:  #ad1e0c; 
}

.ReservationsModule .ToolBarList .SearchCalendarBox {
    display: none !important;
}

.OptionsBtn span {
    display: none;
}
.PinIcon  span {
    display: none;
}

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



*/

.chromedesktopinstallbox.spanishlanguage {

}
.chromedesktopinstallbox.spanishlanguage .Title {
    
}
.chromedesktopinstallbox.spanishlanguage .Title:after {
    content: "Instalar App";
    display: block;
    font-size: 22px;
    margin-bottom: 20px;
}
.chromedesktopinstallbox.spanishlanguage .Step {
    width: 700px;
    margin: 0 auto;
    padding-bottom: 30px;
}

.chromedesktopinstallbox.spanishlanguage .Step1 span:before {
    content: "1";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.chromedesktopinstallbox.spanishlanguage .Step1 span:after {
    content: "Haga clic sobre el menu de tres puntitos arriba a la derecha en su navegador";
    display: inline-block;
}
.chromedesktopinstallbox.spanishlanguage .Step1:after {
    content: "";
    display: block;
    width: 400px;
    height: 170px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/chromeinstall1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.chromedesktopinstallbox.spanishlanguage .Step2 span:before {
    content: "2";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.chromedesktopinstallbox.spanishlanguage .Step2 span:after {
    content: "Seleccionar \"Herramientas\" y luego la opcion \"Crear acceso directo\"";
    display: inline-block;
}
.chromedesktopinstallbox.spanishlanguage .Step2:after {
    content: "";
    display: block;
    width: 500px;
    height: 170px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/chromeinstall2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.chromedesktopinstallbox.spanishlanguage .Step3 span:before {
    content: "3";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.chromedesktopinstallbox.spanishlanguage .Step3 span:after {
    content: "Asegurese que la opcion \"Abrir como ventana\" este seleccionada";
    display: inline-block;
}
.chromedesktopinstallbox.spanishlanguage .Step3:after {
    content: "";
    display: block;
    width: 400px;
    height: 160px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/chromeinstall3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/*ios iphone*/

.iphoneinstallbox.spanishlanguage {

}
.iphoneinstallbox.spanishlanguage .Title {
    
}
.iphoneinstallbox.spanishlanguage .Title:after {
    content: "Instalar App";
    display: block;
}
.iphoneinstallbox.spanishlanguage .Step {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 10px;
    vertical-align: middle;
}

.iphoneinstallbox.spanishlanguage .Step1 span:before {
    content: "1";
    display: inline-block;
    width: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 10px;
}

.iphoneinstallbox.spanishlanguage .Step1 span:after {
    content: "En la parte inferior de la pantalla seleccionar";
    display: inline-block;
    width: calc(100% - 120px);
    text-align: left;
    vertical-align: middle;
}
.iphoneinstallbox.spanishlanguage .Step1:after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/iossharebtn.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    vertical-align: bottom;
    margin-left: 20px;
}

.iphoneinstallbox.spanishlanguage .Step2 span:before {
    content: "2";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 10px;
}

.iphoneinstallbox.spanishlanguage .Step2 span:after {
    content: "Buscar entre las opciones que este abajo y seleccionar \"Agregar a inicio\"";
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: calc(100% - 60px);
}
/* .iphoneinstallbox.spanishlanguage .Step2:after {
    content: "";
    display: block;
    width: 500px;
    height: 170px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/chromeinstall2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
} */

.iphoneinstallbox.spanishlanguage .Step3 span:before {
    content: "3";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 10px;
}

.iphoneinstallbox.spanishlanguage .Step3 span:after {
    content: "Seleccionar el boton \"Agregar\" en la parte superior derecha de la pantalla";
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: calc(100% - 60px);
}
.iphoneinstallbox.spanishlanguage video {
    width: 100%;
    height: auto;
}
/*.chromedesktopinstallbox.spanishlanguage .Step3:after {
    content: "";
    display: block;
    width: 400px;
    height: 160px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/chromeinstall3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
*/


/*android iphone*/

.androidinstallbox.spanishlanguage {

}
.androidinstallbox.spanishlanguage .Title {
    
}
.androidinstallbox.spanishlanguage .Title:after {
    content: "Instalar App";
    display: block;
    font-size: 22px;
    margin-bottom: 20px;
}
.androidinstallbox.spanishlanguage .Step {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 30px;
}

.androidinstallbox.spanishlanguage .Step1 span:before {
    content: "1";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.androidinstallbox.spanishlanguage .Step1 span:after {
    content: "Haga clic sobre el menu de tres puntitos arriba a la derecha en su navegador";
    display: inline-block;
}
.androidinstallbox.spanishlanguage .Step1:after {
    content: "";
    display: block;
    width: 300px;
    height: 80px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/androidinstall1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.androidinstallbox.spanishlanguage .Step2 span:before {
    content: "2";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.androidinstallbox.spanishlanguage .Step2 span:after {
    content: "Seleccionar a pantalla de inicio\"";
    display: inline-block;
}
.androidinstallbox.spanishlanguage .Step2:after {
    content: "";
    display: block;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/androidinstall2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.androidinstallbox.spanishlanguage .Step3 span:before {
    content: "3";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.androidinstallbox.spanishlanguage .Step3 span:after {
    content: "Seleccionar \"Anadir\"";
    display: inline-block;
}
.androidinstallbox.spanishlanguage .Step3:after {
    content: "";
    display: block;
    width: 300px;
    height: 160px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/androidinstall3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.androidinstallbox.spanishlanguage .Step {  
    text-align: left;
}
.androidinstallbox.spanishlanguage .Step span:before {
    display: inline-block;
    vertical-align: middle;    
    text-align: center;
    margin-right: 10px;
}
.androidinstallbox.spanishlanguage .Step span:after {
    display: inline-block;
    width: calc(100% - 60px);
    vertical-align: middle;
    text-align: left;
}
.androidinstallbox.spanishlanguage .Step:after {
/*     width: 100%; */
}

/*ipad */

.ipadinstallbox.spanishlanguage {

}
.ipadinstallbox.spanishlanguage .Title {
    
}
.ipadinstallbox.spanishlanguage .Title:after {
    content: "Instalar App";
    display: block;
    font-size: 22px;
    margin-bottom: 20px;
}
.ipadinstallbox.spanishlanguage .Step {
    width: 700px;
    margin: 0 auto;
    padding-bottom: 30px;
}

.ipadinstallbox.spanishlanguage .Step1 span:before {
    content: "1";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.ipadinstallbox.spanishlanguage .Step1 span:after {
    content: "En la parte superior derecha selecione el boton de compartir";
    display: inline-block;
}
.ipadinstallbox.spanishlanguage .Step1:after {
    content: "";
    display: block;
    width: 400px;
    height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/ipadinstall1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.ipadinstallbox.spanishlanguage .Step2 span:before {
    content: "2";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.ipadinstallbox.spanishlanguage .Step2 span:after {
    content: "Seleccionar \"Agregar a inicio\"";
    display: inline-block;
}
.ipadinstallbox.spanishlanguage .Step2:after {
    content: "";
    display: block;
    width: 400px;
    height: 340px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/ipadinstall2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.ipadinstallbox.spanishlanguage .Step3 span:before {
    content: "3";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 30px;
}

.ipadinstallbox.spanishlanguage .Step3 span:after {
    content: "Seleccionar \"Agregar\"";
    display: inline-block;
}
.ipadinstallbox.spanishlanguage .Step3:after {
    content: "";
    display: block;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(ImgObjects/ipadinstall3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.CopyListItemBtn {
    background-image: url(ImgObjects/copyicon.png);
    width: 30px;
    height: 40px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    cursor: pointer;
    display: inline-block;
    float: left;
}
.CopyListItemBtn:active {
    background-color: #999;        
}
.ClickToCallMode {
    position: relative;    
}
.ClickToCallMode:hover {
    color: var(--green) !important;
}

.ClickToCallMode:hover:before {
    content: "";
    width: 30px;
    height: 40px; 
    background-image: url(ImgObjects/callicon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    display: block;
    top:0px;
    right:0px;
    z-index: 10;
}
.ClickToCallMode:empty:before {
    display: none;
}
.interimdictationresult {
    display: none;
    width: 100%;
    height: 60px; 
    background-color: rgba(0,0,0,.7);
    border-top: 2px solid #40c481;
    padding: 10px 100px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    left: 0px;
    transition: bottom .9s;
    color: #40c481;    
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    letter-spacing: 1px;
}
.interimdictationresult:empty {
    transition-delay: 1s;
    bottom: -70px;
}
.SpeechRecognitionActive .interimdictationresult {
    display: block;
}

.DebugMode .ReservationsModule [name="servicedescription"] ListItem ListField {
    display: inline-block;
    border-right: 1px solid #999;
}
.DebugMode .ReservationsModule [name="servicedescription"] ListItem {
    width: 200%;
}

.DebugMode .ReservationsModule [name="servicedescription"] {
    overflow-x: scroll;
}
.InboundCallIcon {
    background-image: url(ImgObjects/inboundcallicon.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 30px;
    height: 30px;
    top:13px;
    right:440px;
    cursor: pointer;
    display: none;
}
.NotificationsInboxBtn {
    position: absolute;
    width: 30px;
    height: 30px;
    top:13px;
    right:410px;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6V11c0-3.07-1.63-5.64-4.5-6.32V4a1.5 1.5 0 0 0-3 0v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/></svg>");
    transform-origin: top center;
}
.NotificationsInboxBellShake {
    animation: notificationsbellshake 1s ease infinite;
}
.NotificationsInboxBadge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 20px;
    background-color: #d9534f;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0px 2px 6px rgba(0,0,0,.2);
}
.NotificationInboxPanel {
    position: fixed;
    top: 60px;
    right: 0px;
    width: 320px;
    height: calc(100vh - 80px);
    background-color: #fff;
    box-shadow: -10px 0px 30px rgba(0,0,0,.2);
    z-index: 100000001;
    transform: translateX(100%);
    transition: transform .35s ease;
    display: flex;
    flex-direction: column;
    display: none;
}
.NotificationInboxOpen .NotificationInboxPanel {
    transform: translateX(0);
    display: flex;
}
.NotificationInboxHeader {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid #eee;
}
.NotificationInboxTitle {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.NotificationInboxClose {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 20px;
    background-color: #f1f1f1;
    color: #666;
    font-size: 12px;
}
.NotificationInboxList {
    overflow-y: auto;
    padding: 6px 0;
}
.NotificationInboxEmpty {
    padding: 14px 12px;
    color: #999;
    font-size: 12px;
    text-align: center;
}
.NotificationInboxItem {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f2f2f2;
}
.NotificationInboxItem.unread {
    background-color: #f7f9ff;
}
.NotificationInboxItem {
    opacity: .7;
}
.NotificationInboxItem.unread {
    opacity: 1;
}
.NotificationInboxItemGroup {
    width: 32px;
    height: 32px;
    border-radius: 40px;
    background-color: #eaeaea;
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
}
.NotificationInboxItemGroup.group-administrations {
    background-color: #6b31ff;
}
.NotificationInboxItemGroup.group-system {
    background-color: #3b8ad9;
}
.NotificationInboxItemGroup.group-app {
    background-color: #42b983;
}
.NotificationInboxItemGroup.group-support {
    background-color: #f0c44f;
    color: #333;
}
.NotificationInboxItemGroup.group-development {
    background-color: #d9534f;
}
.NotificationInboxItemGroup.group-ai {
    background-color: #7b61ff;
}
.NotificationInboxItemGroup.group-default {
    background-color: #888;
}
.NotificationInboxItemBody {
    flex: 1;
}
.NotificationInboxItemTitle {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}
.NotificationInboxItem:not(.unread) .NotificationInboxItemTitle {
    color: #888;
}
.NotificationInboxItemTitleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.NotificationInboxItemTime {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}
.NotificationInboxItemText {
    font-size: 12px;
    line-height: 16px;
    color: #666;
    max-height: 32px;
    overflow: hidden;
}
.NotificationInboxItemMeta {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.NotificationInboxItemBadge {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    background-color: #d9534f;
    color: #fff;
    font-size: 0px;
    line-height: 12px;
    text-align: center;
    font-weight: bold;
    align-self: flex-start;
}
.NotificationInboxItemBadge.priority1 {
    background-color: #3b8ad9;
}
.NotificationInboxItemBadge.priority2 {
    background-color: #f0c44f;
}
.NotificationInboxItemBadge.priority3 {
    background-color: #d9534f;
}
.AuthorizedBtn {
    width: 30px;
    height: 30px; 
    cursor: pointer;
    z-index: 10000;
    background-image: url(ImgObjects/validatesssmembershipicon.png);
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.ReportsListSelector .List listselectorgroup.marketinggroup {
    display: none;
}
.ReportsListSelector .List listselectorgroup .ListItem[group="marketing"] {
    display: none;
}
.BRMarkeging .ReportsListSelector .List listselectorgroup.marketinggroup {
    display: block;
}
.BRMarkeging .ReportsListSelector .List listselectorgroup .ListItem[group="marketing"] {
    display: block ;
}
.DebugMode .LeftBar .Header {
    background-color: #000;
}
.DebugMode .LeftBar .Header .Logo {
    background-color: var(--orange);
    box-sizing: border-box;
    padding: 5px;
    border-radius: 0px 15px 15px 0px;
}
.DiagnosisElement {
    min-width: 420px;
}
.DiagnosisElement [name=diagnosisname] {
    width: calc(100% - 220px) !important;
}
.ClientListSelector .List .ListField[fieldname=id] {
    color: #999;
    width: 50px;
    display: inline-block;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    font-size: 11px;
    margin-right: 10px;
}

.ClientListSelector .List .ListField[fieldname=name] {
    width: auto !important;
    display: inline;
    border-right: none;
    padding-left: 0px;
    padding-right: 5px;
}
.ClientListSelector .List .ListField[fieldname=lastname] {
    width: auto !important;
    display: inline;
    border-right: none;
    padding-left: 0px;
    padding-right: 5px;
}
.ClientListSelector .List .ListField[fieldname=company] {
    width: auto !important;
    font-size: 12px;
    font-weight: bold;
    display: inline;
    border-right: none;
    padding-left: 0px;
}
.ClientListSelector .List .ListField[fieldname=name]:empty {
    padding-right: 0px;
}
.ClientListSelector .List .ListField[fieldname=lastname]:empty {
    padding-right: 0px;
}
.ClientsSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: 320px;
}
.ClientListSelector .List .ListField[fieldname=total] {
    width: 40px !important;
    display: inline-block;
    margin-left: auto;
    margin-right: 0px;
}

.ClientListSelector {
    width: 450px;
}
.GlobalBackBtn {
    background-image: url(ImgObjects/BackBtn.png);
    width: 40px;
    height: 40px; 
    position: absolute;
    top:10px;
    right:10px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    display: none;
    z-index: 999999;
}
.DebugMode.PrintToScreenMode .GlobalBackBtn {
    display: block;
}

/** for email with invoices **/


.EmailerModule .DescriptionHeader > div:nth-child(1) {
    width: 60px;    
}
.EmailerModule .DescriptionHeader > div:nth-child(2) {
    width: 340px;   
}
.EmailerModule .DescriptionHeader > div:nth-child(3) {
    width: 70px;    
    text-align: right;
}
.EmailerModule .DescriptionHeader > div:nth-child(4) {
    width: 40px;    
    text-align: center;
}
.EmailerModule .DescriptionHeader > div:nth-child(5) {
    width: 80px;    
    text-align: right;

}

.EmailerModule .BillingForm .InvoiceTotals input {
    display: inline-block;
    width:90px;
    text-align: right;
    margin-right:5px;
}
.EmailerModule .BillingForm .InvoiceTotals label {
    display: inline-block;
    width: 90px;
    text-align: right;
    margin-right: 5px;
}
.EmailerModule .DocumentHeader .DocumentTitleInvoice {
    display: inline-block;
}
.EmailerModule .BillingForm .TemplateNameElement {
    display: none;
}

.EmailerModule .BillingForm .DocumentProvider {
    float: right;
    width: 400px;
}
.EmailerModule .BillingForm .DocumentProvider * {
    font-size: 11px;
}
.EmailerModule .BillingForm .InvoiceDateElement {
    width: 300px;
    text-align: right;
}
.EmailerModule .BillingForm [name="invoicedate"] {
    width: 100px !important;
}
.EmailerModule .BillingForm .DocumentIdentification {
    width: 290px;
    display: inline-block;
    margin-left: 170px;
}
.EmailerModule .BillingForm .ClientInfoElement {
    position: absolute;
    top: 90px;
    left: 20px;
    width: 300px;
}
.BillingDocumentsListSelector .List .ListField[fieldname=id] {
    display: none;
    width: 50px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    font-size: 11px;
    color: #999; 
    margin-right: 10px;   
}

.BillingDocumentsListSelector .List .ListField[fieldname=total] {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-size: 11px;
    color: var(--green); 
    font-weight: bold;
    margin-right: 10px;   
}
.BillingDocumentsListSelector .List .ListField[fieldname=invoicedate] {
    display: inline-block;
    width: 60px;
/*     font-weight: bold; */
    font-size: 11px;
    border-right: 1px solid #aaa;
}
.BillingDocumentsListSelector .List .ListField[fieldname=documentnumber] {
    display: inline-block;
    width: 70px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    border-right: dotted 1px #aaa;
}


/* .BillingDocumentsListSelector .List .ListField[fieldname=name] {
    display: inline-block;
    width: auto;
    padding-left: 0px;
    padding-right: 5px;
}
.BillingDocumentsListSelector .List .ListField[fieldname=lastname] {
    display: inline-block;
    width: auto;
    padding-left: 0px;
    padding-right: 5px;
}
.BillingDocumentsListSelector .List .ListField[fieldname=company] {
    display: inline-block;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
    font-weight: bold;
}   

.BillingDocumentsListSelector .List .ListField[fieldname=name]:empty {
    display: inline-block;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
}
.BillingDocumentsListSelector .List .ListField[fieldname=lastname]:empty {
    display: inline-block;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
}
.BillingDocumentsListSelector .List .ListField[fieldname=company]:empty {
    display: inline-block;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
    font-weight: bold;
} */
.DrawableOn {
    position: relative;
}
.drawableontoolbar {
    position: absolute;
    top: -20px;
    right: 0px;
}
.drawblecanvasavebtn {
    width: 15px;
    height: 15px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    display: none;

}
.drawblecanvarestorebtn {
    width: 15px;
    height: 15px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    display: none;
}
.drawblecanvaclearbtn {
    width: 25px;
    height: 25px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    background-image: url(ImgObjects/eraseallicon.png);
    background-size: 150%;
    background-position: center;

}
.drawblecanvadisabledrawingmodebtn {
    width: 25px;
    height: 25px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    background-image: url(ImgObjects/notediticon.png);
    background-size: 100%;
    background-position: center;

}
.drawblecanvaenabledrawingmodebtn {
    width: 25px;
    height: 25px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    background-image: url(ImgObjects/editicon7.png);
    background-size: 100%;
    background-position: center;

}
.drawblecanvaundobtn {
    width: 15px;
    height: 15px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    width: 25px;
    height: 25px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    background-image: url(ImgObjects/undoicon3.png);
    background-size: 100%;
    background-position: center;

}
.drawblecanvaredobtn {
    width: 15px;
    height: 15px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    width: 25px;
    height: 25px; 
    border-radius: 2px;
    border:  1px solid #bbb;
    display:  inline-block;
    background-image: url(ImgObjects/redoicon3.png);
    background-size: 100%;
    background-position: center;

}
.drawableontoolbarcolors {

}
.drawblecanvacolorbtn {
    width: 15px;
    height: 15px; 
    border-radius: 30px;
    border:  1px solid #bbb;
    display:  inline-block;
}
.canvared {
    background-color: var(--red);
}
.canvablue {
    background-color: var(--blue);
}
.canvagreen {
    background-color: var(--green);
}
.canvaorange {
    background-color: var(--orange);
}
.canvablack {
    background-color: var(--black);
}
.canvagray {
    background-color: var(--gray);
}
.ViewMode .drawableontoolbar {
    display: none;
}
[fieldname=fullbusinessname] .fullnamecompany {
    font-weight: bold;
    color: #111;
}
[fieldname=fullbusinessname] .fullnamename {
    text-transform: capitalize;
/*     color: #111; */
}
.PrintHeader .HeaderCompanyInfo {
    font-size: 14px;
    line-height: 18px;
    max-width: 300px;
}
.PrintHeader .Column {
    width: 250px;
}

.Frame {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 10px;
    margin: 10px 0px;
    width: 100%;
    position: relative;
    min-height: 80px;
    box-sizing: border-box;
}
.Frame .FrameTitle {
    font-size: 12px;
    margin-left: 7px;
    margin-bottom: 5px;
    color: #666;
    font-weight: bold;
}

.Frame .FrameArea {

}
.List .ListItem [fieldname="userbadgefield"] {
    width: 30px;
}
.List .ListItem [fieldname="paymentuserbadgefield"] {
    width: 30px;
}
.List .ListItem [fieldname="createuserbadgefield"] {
    width: 30px;
}
.List .ListItem [fieldname="authorizeuserbadgefield"] {
    width: 30px;
}
.ResourceBadge {
    border: 2px solid transparent;
    width: 30px;
    border-radius: 100px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 11px;
    font-weight: bold;
}
.ResourceBadge:empty {
    border: 2px solid #ccc;
    background-color: transparent;
}


.ResourceBadge[usertype="user"] {

}
.ResourceBadge[usertype="admin"] {
   border: dotted 2px var(--blue);
}
.ResourceBadge[usertype="appuser"] {
   border: dotted 2px var(--red);
   background-color: var(--red);
}

body .ListArea .List .ListItem[id=totalline] {
    /* border-bottom: 1px solid var(--blue) !important; */
    background-color: #eee !important;
}
body .ListArea .List .ListItem[id=totalline] .ListField {
    background-color:  var(--orangedark) !important;
    color: #fff !important;
    font-weight: bold;
}

body .ListArea .List .ListItem[id=totalline] .ListField:empty {
    background-color: #eee !important;
}
body .ListArea .List .ListItem[id=totalline] .ListField[fieldname=id] {
    background-color: #eee !important;
    color: transparent !important;
}

.SidePanelEditorBox .SidePanelInfoArea {
    box-sizing: border-box;
    padding: 30px !important;
    padding-top: 40px !important;
    width: inherit;
    height: calc(100% - 60px);
    overflow-y: auto;
}
.SidePanelEditorInfoMode .SidePanelEditorBox .MenuBar .MenuItem {
    display: none;
}
.SidePanelEditorInfoMode .SidePanelEditorBox .MenuBar .BackBtn1 {
    display: inline-block;
}
.PrintArea .ListItem {
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    border-bottom: 1px solid #eee;

}
.PrintArea .ListItem .ListField {
    transition: background-color .3s, transform 1s;
    float: left;
    color: var(--list-font-color);
    line-height: 30px;
    /* padding: 5px 10px; */
    height: 30px;
    /*  border-right: 1px solid #ccc; */
    width: 110px;
    display: none;
    overflow: hidden;
    position: relative;
    font-size: 14px;
}
.PrintArea .ListItem .ListField[fieldname="name"] {
    display: inline-block;
    width: 90%;
    font-weight: bold;
    line-height: 24px;
    height: auto !importnat;
}
.PrintArea .Table.Lab .ListItem .ListField[fieldname=description] {
    display: inline-block !important;
    width: 100%;
    height: auto !important;
    overflow: auto;
    max-height: none;
    line-height: 24px;
    position: static;
    /* color: #fff;     */

}
.PrintArea .Table .ListItem {
    height: auto !important;
}


/* new lists styels */
.List .ListItem [fieldname="name"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 120px;
    overflow-wrap: break-word;
    line-height: 16px;    

}
.List .ListItem [fieldname="company"] {
     /* text-overflow: ellipsis; */
    /* white-space: nowrap;  */
    overflow-wrap: break-word;
    line-height: 14px;    
    width: 180px;

}
.List .ListItem [fieldname="subject"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 260px;
    color: var(--blue);
    overflow-wrap: break-word;
    line-height: 16px;    

}
.List .ListItem [fieldname="customername"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 200px;
    overflow-wrap: break-word;
    line-height: 16px;    

}
.List .ListItem [fieldname="diagnosisname"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 200px;
    overflow-wrap: break-word;
    line-height: 16px;    

}

.List .ListItem [fieldname="resourcename"] {
    /*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 150px;
    overflow-wrap: break-word;
    line-height: 16px;
    }
.List .ListItem [fieldname="forname"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 160px;
    overflow-wrap: break-word;
    line-height: 14px;     
}
.List .ListItem [fieldname="created"] {
    width: 90px;
    overflow-wrap: break-word;
    line-height: 16px;    
    font-size: 11px;
}
.List .ListItem [fieldname="createdformatted"] {
    width: 100px;
    overflow-wrap: break-word;
    line-height: 16px;    
    font-size: 11px;
}

.List .ListItem .ListField[fieldname=uid] {
    width:200px;
    font-size: 10px;
}

.List .ListItem [fieldname="modified"] {
    width: 90px;
    overflow-wrap: break-word;
    line-height: 16px;    
    font-size: 11px;
}
.List .ListItem [fieldname="starttime"] {
    width: 110px;
    overflow-wrap: break-word;
    font-size: 12px;
    line-height: 13px;    
}
.List .ListItem [fieldname="endtime"] {
    width: 110px;
    overflow-wrap: break-word;
    font-size: 12px;
    line-height: 13px;    
}

.List .ListItem [fieldname="fullname"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 120px;
    overflow-wrap: break-word;
    line-height: 16px;    

}
.List .ListItem [fieldname="fullnameinverted"] {
/*     text-overflow: ellipsis;
    white-space: nowrap; */
    width: 120px;
    overflow-wrap: break-word;
    line-height: 16px;    

}
.List .ListItem [fieldname="operatorname"] {
    width: 120px;
    overflow-wrap: break-word;
    line-height: 16px;    

}

.List .ListItem .ListField[fieldname=total] {
    width:110px;
    text-align: right;
}
.List .ListItem .ListField[fieldname=label] {
    width:470px;
}
.List .ListItem .ListField[fieldname=value] {
    width:70px;
    text-align: right;
}
.List .ListItem .ListField[fieldname=IVA] {
    width:70px;
    text-align: right;
}
.List .ListItem .ListField[fieldname=imp_pac] {
    width:50px;
    text-align: right;
}

.List .ListItem .ListField[fieldname=cod_aud] {
    width:50px;
    text-align: right;
    font-weight: bold;
    color: #111;
    font-size: 12px;
}

.List .ListItem .ListField[fieldname=processstatus] {
    width:90px;
}
.List .ListItem .ListField[fieldname=processid] {
    width:90px;
    font-size:12px; 
}


.List .ListItem .ListField[fieldname=serviceid] {
    width:90px;
    font-size: 12px;
}
.List .ListItem .ListField[fieldname=service] {
    width:220px;
    overflow-wrap: break-word;
    line-height: 16px;    
}

.List .ListItem .ListField[fieldname=totalcredit] {
    width:130px;
    color: var(--orange);
    font-weight: bold;
}
.List .ListItem .ListField[fieldname=servicename] {
    width:220px;
    overflow-wrap: break-word;
    line-height: 16px;      
}

.List .ListItem .ListField[fieldname=lastname] {
    width:150px;
    overflow-wrap: break-word;
    line-height: 16px;    
}
.List .ListItem .ListField[fieldname=phone] {
    width:120px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;     
}

.List .ListItem .ListField[fieldname=phonemobile] {
    width:120px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;     
}
.List .ListItem .ListField[fieldname=phonework] {
    width:120px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;     
}
.List .ListItem .ListField[fieldname=email] {
    width:180px;
}
.List .ListItem .ListField[fieldname=groupname] {
    width:60px;
    overflow-wrap: break-word;
    line-height: 16px;    
    color: #aaa;    
}
.List .ListItem .ListField[fieldname=typename] {
    width:60px;
    overflow-wrap: break-word;
    line-height: 16px;    
    color: #aaa;    
}
.List .ListItem .ListField[fieldname="price"] {
    width: 110px;
    font-size:12px;
    text-align: right;
}
.List .ListItem .ListField[fieldname="tariff"] {
    width: 110px;
    font-size:12px;
    text-align: right;    
}
.List .ListItem .ListField[fieldname="agentpricevalue"] {
    width: 110px;
    font-size:12px;
    text-align: right;
}
.List .ListItem .ListField[fieldname="agentpricepercentage"] {
    width: 50px;
    font-size:12px;
    text-align: right;
}

.List .ListItem .ListField[fieldname="subtotal"] {
    width: 110px;
    font-size:12px;
    text-align: right;
}
.List .ListItem .ListField[fieldname="discountvalue"] {
    width: 60px;
    font-size:12px;
    text-align: right;
}
.List .ListItem .ListField[fieldname="taxrate"] {
    width: 40px;
    font-size:12px;
    text-align: right;
}
.List .ListItem .ListField[fieldname="taxdue"] {
    width: 60px;
    font-size:12px;
    text-align: right;
}

.List .ListItem .ListField[fieldname="sssprovider"] {
    width: 150px;
    font-size: 11px;
    font-weight:bold;
    overflow-wrap: break-word;
    line-height: 16px;    
}
.List .ListItem .ListField[fieldname="sssplan"] {
    width: 110px;
    font-size:12px;
    overflow-wrap: break-word;
    line-height: 16px;    
}
.List .ListItem .ListField[fieldname="region"] {
    width:150px;
    font-size:14px;
    overflow-wrap: break-word;
    line-height: 16px;    
}

.List .ListItem .ListField[fieldname="sssnumber"] {
    width: 110px;
    font-size:12px;
}
.List .ListItem .ListField[fieldname="code"] {
    width: 60px;
    font-size:12px;
    font-weight: bold;
    color: #111;
}

.List .ListItem .ListField[fieldname="duration"] {
    width: 40px;
    font-size:14px;
    color:#aaa;
    text-align: center;
}

.List .ListItem .ListField[fieldname="servicecode"] {
    width: 70px;
    font-size:12px;
}
.List .ListItem .ListField[fieldname="servicename"] {
    width:220px;
    overflow-wrap: break-word;
    line-height: 16px;    
}
.List .ListItem .ListField[fieldname="serviceprice"] {
    width: 70px;
    font-size:12px;
    text-align: right;
}
.List .ListItem .ListField[fieldname=address] {
    width: 110px;
    overflow-wrap: break-word;
    line-height: 16px;    
}
.List .ListItem .ListField[fieldname=age] {
    width: 20px;
}
.List .ListItem .ListField[fieldname=birthday] {
    width: 90px;
    font-size: 11px;
}
.List .ListItem .ListField[fieldname=city] {
    width: 110px;
    font-size: 11px;
    overflow-wrap: break-word;
    line-height: 16px;    
}
.List .ListItem .ListField[fieldname=customeraccountname] {
    width: 130px;
    overflow-wrap: break-word;
    line-height: 16px;      
}
.List .ListItem .ListField[fieldname=firsttime] {
    width: 40px;
}
.List .ListItem .ListField[fieldname=generalcount] {
    width: 60px;
}
.List .ListItem .ListField[fieldname=HC] {
    width: 50px;
}
.List .ListItem .ListField[fieldname=hccode] {
    width: 50px;
}
.List .ListItem .ListField[fieldname=icount] {
    width: 60px;
}
.List .ListItem .ListField[fieldname=id] {
    width: 60px;
    font-size: 11px;
}
.List .ListItem .ListField[fieldname=imp_pac] {
    width: 50px;
}
.List .ListItem .ListField[fieldname=listname] {
    width: 120px;
    overflow-wrap: break-word;
    line-height: 16px;      
}
.List .ListItem .ListField[fieldname=locationname] {
    width: 100px;
    overflow-wrap: break-word;
    line-height: 16px;      
}
.List .ListItem .ListField[fieldname=notestotal] {
    width: 30px;
}
.List .ListItem .ListField[fieldname=ofpcount] {
    width: 60px;
}
.List .ListItem .ListField[fieldname=paymentmethod] {
    width: 90px;
}
.List .ListItem .ListField[fieldname=percentage] {
    width: 60px;
}
.List .ListItem .ListField[fieldname=personalid] {
    width: 90px;
}
.List .ListItem .ListField[fieldname=personalidtype] {
    width: 30px;
}
.List .ListItem .ListField[fieldname=processid] {
    width: 90px;
}
.List .ListItem .ListField[fieldname=processnote] {
    width: 200px;
}
.List .ListItem .ListField[fieldname=processstatus] {
    width: 90px;
}
.List .ListItem .ListField[fieldname=region] {
    width: 320px;
}
.List .ListItem .ListField[fieldname=resource] {
    width: 120px;
}
.List .ListItem .ListField[fieldname=restotal] {
    width: 30px;
}
.List .ListItem .ListField[fieldname=servicecode] {
    width: 70px;
}
.List .ListItem .ListField[fieldname=servicename] {
    width: 260px;
}
.List .ListItem .ListField[fieldname=serviceprice] {
    width: 70px;
}
.List .ListItem .ListField[fieldname=source] {
    width: 60px;
    overflow-wrap: break-word;
    line-height: 16px;          
}
.List .ListItem .ListField[fieldname=ssscount] {
    width: 60px;
}
.List .ListItem .ListField[fieldname=status] {
    width: 90px;
}
.List .ListItem .ListField[fieldname=statustraslated] {
    width: 90px;
}
.List .ListItem .ListField[fieldname=sum] {
    width: 50px;
}
.List .ListItem .ListField[fieldname=totalcredit] {
    width: 130px;
}
.List .ListItem .ListField[fieldname=user] {
    width: 150px;
    font-size: 12px;
    font-weight: bold;
    overflow-wrap: break-word;
    line-height: 16px;          
}
.List .ListItem .ListField[fieldname=HC] {
    width: 50px;;
}

/* new list styels */

.Table .ListItem {
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .3s, transform 1s;
    position: relative;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.Table .ListItem .ListField {
    transition: background-color .3s, transform 1s;
    float: left;
    color: var(--list-font-color);
    line-height: 40px;
    padding: 0px 10px;
    /*     height: 30px; */
    /*  border-right: 1px solid #ccc; */
    width: 110px;
    display: none;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    max-height: 40px;
}
.Table .ListItem .RemoveBtn {
    display: none;
}

.Table.Lab .ListItem .ListField[fieldname=name] {
    display:block;
    width: 100%;

}
.MenuBar {
    display: flex;
    align-items: top;
    flex-wrap: wrap;
    position: relative;
    
}
.MenuBar .MenuBarGroup {
    position: relative;
    overflow: hidden;
    /*background-color: #F6F6F6;*/
    height: 50px;
}
.ToolBarEditor .MenuBar .MenuBarGroup {
    background-color: #282828;
    border-right: 1px solid  #999;
}

.MenuBar .MenuBarGroup .MenuItem {
    position: static;
}
.MenuBar .MenuBarGroup:hover {
    height: auto;
}    
.MenuBar .MenuBarGroup.MenuBarGroupOverflowed:hover {
    box-shadow: 5px 5px 15px rgba(150,150,150,.6);
}    

.MenuBar .MenuBarGroup.MenuBarGroupOverflowed:after {
    content: "";
    display: block;
    height: 50px;
    width: 15px;
    position: absolute;
    top:0px;
    right: 0px;    
    background-image: url(ImgObjects/menubargroupexpandericongray.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border-right: 1px solid #aaa;
}
.MenuBar .MenuBarGroup.RightDevider:after {
    content: "";
    display: block;
    height: 50px;
    width: 15px;
    position: absolute;
    top:0px;
    right: 0px;    
    border-right: 1px solid #aaa;
}

.MenuBar .MenuBarGroup.MenuBarGroupOverflowed:hover:after {
    display: none;
}
.ToolBarList .MenuBar .MenuBarFilters {
    max-width: 50%;
}
.ToolBarList .MenuBar .MenuBarActions {
    max-width: 25%;
}
.ToolBarEditor .MenuBar .MenuBarMoreData {
    max-width: 20%;
}
.ToolBarEditor .MenuBar .MenuBarSelectors {
    max-width: 40%;
}
.ToolBarEditor .MenuBar .MenuBarActions {
    max-width: 25%;
}

.DebugMode .ReportsModule .ToolBarList .MenuBarFilters .FilterBtn {
    display: inline-block !important;
}
.DebugMode .ReportsModule .ToolBarList .MenuBarFilters .FilterBtn {
    background-position: center 5px;
    position: relative;
}
.DebugMode .ReportsModule .ToolBarList .MenuBarFilters .FilterBtn span{
    display: block;
    position: absolute;
    width: 100%;
    color: #888;
    font-size: 9px;
    overflow-wrap:inherit !important;
    line-height: 10px;
    height: 30px;
    top: 25px;
    left: 0px;
    text-align: center;
}
[listviewmode="ImageView"] .List .ListItem .ListField {
    max-height: none !important;
}

.ToolBar .MenuItemTabs {

}
.ToolBar .MenuItemTabs .MenuItemTab {
    width: 200px;
    font-size: 14px;
    color: var(--blue);
    text-align: center;
    width: auto;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
/*     background-color: #eef0f3; */
    border-bottom: 4px solid transparent;
    border-right: 1px solid var(--blue);
}

.ToolBar .MenuItemTabs .MenuItemTab.Selected {
    background-color: #fff;
    border-bottom: 4px solid var(--blue);
    font-weight: bold;

}
    
/* mobilerightmenu */

.ModuleArea .ToolBar .MobileRightBar .MenuBarGroup {
    max-width: none;
    box-sizing: border-box;
    width: 100%;
}
.ModuleArea .ToolBar .MobileRightBar .MenuItem {
    display: block;
    margin: 0px 20px;
    text-align: left;
    width: 100% !important;
    background-position: 10px 15px;
    float: none;
    position: static;
    line-height: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;    
}

.ModuleArea .ToolBar .MobileRightBar .MenuItem span {
    display: inline-block;
    width: 100%;
    padding-left: 35px;
    font-size: 15px;
}
.ModuleArea .ToolBar .MobileRightBar .MenuItem.MenuItemSelect select {
    display: block;
    margin: 0px 10px;
    text-align: left;
    width: 100% !important;
    background-position: 10px 15px;
    float: none;
    position: static;
    line-height: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;    
    height: 35px;
}
.ModuleArea .ToolBar .MobileRightBar .MenuItem.MenuItemSelect span {
    padding-left: 10px;
}
.ModuleArea .ToolBar .MobileRightBar .MenuItem.MenuItemSelect {
    height: 65px;
    margin:0px;
}
.MobileRightBar .MenuItem {
    box-sizing: border-box;
}
.ModuleArea .ToolBar .MobileRightBar {
    position: fixed;
    right: -350px;
    top: 0px;
    width: 260px;
    background-color: #111118;
    z-index: 1000;
    transition: right .7s;
/*     height: calc(100% - 50px); */
    overflow-y: auto;
    height: 100%;
}
.ModuleArea .ToolBarList .MobileRightBar {
    background-color: #eee;
    box-shadow: -5px 0px 35px rgba(0,0,0,.3);
}
.ModuleArea .ToolBar .MenuBar .MobileRightBar .MenuItem span {
    display: block !important;
    padding-left: 35px;
    font-size: 14px;
}

.ModuleArea .ToolBar .MenuBar .MobileRightBar .SearchBtn {
    display: block !important;
    margin: 30px 20px;
    text-align: left;
    width: auto !important;
    background-size: auto 100%;
    background-position: 10px;
    float: none;
    position: static !important;
}

.ModuleArea .ToolBar .MenuBar .MobileRightBar select {
    display: block;
    margin: 10px 20px;
    text-align: left;
    background-color: transparent;
    color: #111;
    border: none;
    width: 260px;
}



.ShowMobileRightBar .MobileRightBar {
    right: 0px !important;
}

.ShowMobileRightBarBtn {
    background-image: url(ImgObjects/ShowMenuIcon.png);
    height: 50px !important;
    width: 50px !important;
    display: none !important;
    position: absolute;
    background-size: 80%;
    right: 0px;
    top: 0px;
    /* display: inline-block !important; */
}
.ModuleArea .ToolBar .MenuBar .ShowMobileRightBarBtn {
    /* display: inline-block !important; */
} 
.ShowMobileRightBar .ToolBar .MenuBar .MobileRightBar .MenuItem {
    margin: 15px 20px;
    height: 30px;
    background-size: auto 80% !important;
}
.ShowMobileRightBar .ToolBar .MenuBar .MobileRightBar .MenuItem span {
    line-height: 20px;
}
.ShowMobileRightBar .ModuleDeactivateBackground {
    bottom: 0px;
}

@media (max-width: 560px) {
    .ShowMobileRightBarBtn {
        display: inline-block !important;
    }
    .ModuleArea .ToolBar .MenuBar .MenuItem.MenuItemSelect {
        padding: 0px 0px;
    }
    .ModuleArea .ToolBarEditor .MenuBar {
        width: calc(100% - 50px);
    }
    .NotificationMessageBox {
        left: 5%;
        width: 90%;
        border-radius: 20px;
    }
    .NotificationMessageBox .NotificationMessageOk{
        top: 5px;
        right: 5px;
    }
    .ToolBar .MenuItemTabs .MenuItemTab {
        width: 40px;
        overflow: hidden;
        color: transparent;
        padding: 0px !important;
        min-width: 0px;
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .ToolBar .MenuItemTabs .MenuItemTabReports {
            background-image: url(ImgObjects/ListIcon.png);
    }
    .ToolBar .MenuItemTabs .MenuItemTabDashBoard {
            background-image: url(ImgObjects/ReportIcon3.png);
    }

}
.WizardBackground { 
    background: -webkit-gradient(linear, left top, right bottom, from(rgba(255,255,255,.5)), to(rgba(146,170,208,.5)));
    backdrop-filter: blur(11px);
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    z-index: 9999999;
      backdrop-filter: blur(2px);
}
.ShowWizard .WizardBackground {
    display: flex;
}
.WizardArea {
     transition: left 1s;
     background-color: rgba(255, 255, 255, 1);
     border-radius: 5px;
     text-align: center;
     width: 80%;
     height: 80%;
     padding: 20px 40px;
     display: none;
     position: fixed;
     top:5%;
     left: 10%;
     z-index: 9999999;
     box-shadow: 0px 0px 35px rgba(100,100,100,.3);
}
.ShowWizard .WizardArea {
    display: flex;  
}
.WizardBackground { 
    background: -webkit-gradient(linear, left top, right bottom, from(rgba(255,255,255,.5)), to(rgba(146,170,208,.5)));
    backdrop-filter: blur(11px);
    align-items: center;
    display: none;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    z-index: 9999999;
      backdrop-filter: blur(2px);
}
.ShowWizard .WizardBackground {
    display: flex;
}
.WizardArea {
     background-color: rgba(255, 255, 255, 1);
     border-radius: 5px;
     text-align: left;
     width: 80%;
     height: 80%;
     padding: 20px 100px;
     display: none;
     position: fixed;
     top:5%;
     left: 10%;
     z-index: 9999999;
     box-shadow: 0px 0px 35px rgba(100,100,100,.3);
     box-sizing: border-box;
}
.ShowWizard .WizardArea {
    display: block;  
}
.WizardArea .TabLabel {
    display: block;
    background-color: #1891BE;
    width: 40px;
    height: 280px;
    line-height: 40px;
    border-radius: 0px 10px 10px 0px;
    color: #fff;
    position: absolute;
    left: 0px;
    top: calc(50% - 140px);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    transition-delay: 1.5s;
    transition: right 1s;
    cursor: pointer;
}
.WizardArea:before {
    content: "";
    display: block;
    background-image: url(ImgObjects/backgroundabstract1.jpg);
    background-size: auto 100%;
    background-position: center;
    width: 30%;
    height: 100%;
    line-height: 40px;
    color: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
}


.WizardTop {
    width: 70%;
    display: block;
}
.WizardContent {
    display: block;
    width: 70%;
    height: 60%;;
    overflow-y: auto;
    margin-top: 20px;
}
.WizardTop h1 {
    padding: 20px 0px;
}    
.WizardTop h1:after {
    content: "";
    height: 6px;
    width: 150px;
    background-color: #1991be;
    display: block;
    margin: 20px 0px;
    margin-bottom: 10px;
}
.WizardTop .WizardHelp {
    line-height: 20px;
    color: #999;
}    

.WizardHelp {
    
}
.WizardSteps {
    
}
.WizardStep {
    display: flex;
    align-items: center;
    flex-wrap: wrap;    
    margin: 20px 0px;
}
.WizardStep > * {
    margin-right: 15px;    
}
.WizardStep .Number {
    background-color: var(--green);
    color: #fff;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    line-height: 40px;
    border-radius: 100px;
}
.WizardStep .Description {
    color: #333;
    font-weight: bold;
    width: 350px;
    font-size: 14px;  
}
.WizardStep .Description span {
    display: block;
    font-weight: normal;
    color: #666;
    width: 350px;
    font-size: 11px;  
}

.WizardStepAction {
    border: 1px solid var(--blue);
    width: 150px;
    min-height: 30px;
    border-radius: 100px;
    color: var(--blue);
    text-align: center;
    cursor: pointer;
    line-height: 30px;
}
[verified="false"] .WizardStepAction {
    background-color: var(--red2);
    color: #fff;
    border: 1px solid transparent;
}
[verified="true"] .WizardStepAction {
    background-color: var(--green);
    color: #fff;
    border: 1px solid var(--green);
}
.wizardfunctionlistbtn {
    border: 1px solid var(--red2);
    width: 30px;
    min-height: 30px;
    border-radius: 100px;
    color: var(--red2);
    text-align: center;
    cursor: pointer;
    line-height: 30px;        
    font-size: 18px;
    font-weight: bold;
    background-image: url(ImgObjects/arrowright3red.png);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
}

.WizardStepResult {
    max-width: 250px;
}
.WizardArea .CloseBtn {
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 100px;
    background-size: 50%;
    color: #fff;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    opacity: 1;
    
}
.WizardStepResult .ListItem {
    width: 60px;
    display: inline-block;
    text-align: center;
    background-color: #eee;
    padding: 5px;    
    margin-right: 5px;
    border-radius: 5px;
}
.WizardStepResult .ListItem .ListField {

}
.WizardStepResult .ListItem [fieldname="label"] {
    font-weight: bold;
    font-size: 11px;    
}
.WizardStepResult .ListItem [fieldname="value"] {
    font-weight: bold;
    font-size: 18px;    
}

[functiontype="list"] .WizardStepResult {
    /* flex-basis: 100%; */
    /* max-width: none; */
}
[functiontype="list"] .WizardStepResult .ListItem {
    width: 100%;
    display: block;
    text-align: left;
    background-color: transparent;
    padding: 15px;
    padding-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
}
[functiontype="list"] .WizardStepResult .ListItem .ListField {
    float: left;
    margin-right: 10px;
}
[functiontype="list"] .WizardStepResult .ListItem [fieldname="type"] {
    font-weight: normal;
    width: 80px;
    text-align: center;
    background-color: var(--yellow);
    color: #fff;
}
[functiontype="list"] .WizardStepResult .ListItem[type=info] [fieldname="type"] {
    border-radius: 0px 20px 20px 0px;
}
[functiontype="list"] .WizardStepResult .ListItem[type=error] [fieldname="type"] {
    background-color: var(--red);
}

[functiontype="list"] .WizardStepResult .ListItem [fieldname="message"] {
/*     font-weight: bold; */
    color: var(--blue);
}

.WizardListSelector .ListItem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0px;    
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
}
.WizardListSelector .ListItem:hover {
    border: 1px solid var(--blue);
}
.WizardListSelector .ListItem .ListField {
    display: none;
}
.WizardListSelector .ListItem [fieldname="name"] {
    font-size: 18px;
    font-weight: bold;
    color: var(--blue);
    display: block;
}
.WizardListSelector .ListItem [fieldname="description"] {
    font-size: 13px;
    line-height: 18px;
    color: #999;
    display: block;
    max-height: 20px;
    overflow: hidden;
    transition: max-height 2s;
    transition-delay: 1s;
}
.WizardListSelector .ListItem:hover [fieldname="description"] {
    max-height: 1000px;
}
.MinimizeWizard .WizardArea {
    left: -80%;
}
.MinimizeWizard .WizardBackground {
    display: none;
}

.MinimizeWizard .WizardArea .TabLabel {
    left: auto;
    right: -40px;
}
.WizardArea .MinimizeBtn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    right: 80px;
}
.WizardModuleBox {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    margin-bottom: 20px; 
    position: relative;
}
.WizardModuleBox .ModuleTemplateBox {
    display: inline-block;
    width: 120px;
    height: 80px;
    border: 1px dotted #999;
    vertical-align: top;
    position: relative;
    margin-top: 20px;
    margin-right: 10px;
}
.WizardModuleBox .ModuleTemplateBox.Defined {
    border: 1px solid var(--green);
}

.WizardModuleBox .templantename {
    margin: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #999;
}
.WizardModuleBox .Defined .templantename {
    color: var(--green);
}

.WizardModuleBox .CloseBtn {
    border: 1px solid #999;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    padding: 0px;
    bottom: 5px;
    top: auto;
    right: 35px;
}
.WizardModuleBox .AddBtn {
    position: absolute;
    width: 25px;
    height: 25px;
    padding: 0px;
    box-sizing: border-box;
    border-radius: 40px;
    bottom: 5px;
    top: auto;
    right: 5px;
}

.LoadDefaultTemplatesBtn {
    display: block;
    cursor: pointer;   
    border-radius: 40px;
    padding: 10px 20px;
    border: 1px solid var(--blue);
    color: var(--blue);
    margin-left: auto;
    margin-right: 10px;
    width: fit-content;
    margin-bottom: 10px;
}
.WizardModuleBox .templateselectedname {
    font-size: 12px;
    margin-left: auto;
    margin-right: 0px;
    display: block;
    width: fit-content;
    background-color: var(--green);
    color: #fff;
    padding: 3px 5px;
}
.ListArea .ListItem .ListField[contenteditable=true] {
    border: 1px dashed orange;
}
.ServicesModifiedDateListSelector .List .ListField[fieldname=modifieddate] {
    display: block;
    width: 150px;
}
.ServicesModifiedDateListSelector .List .ListField[fieldname=total] {
    display: block;
    width: 100px;
}
.forminputwrongcharerror {
    border: 2px dotted orange !important;
}
.forminputnameemptyerror {
    border: 2px dashed red !important;
}

/*.ocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #6cbe0c;
}

.wave {
  background: url(introani.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}
@keyframes swell {
  0%,
  100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}
.endWave{
  display:none;
}


*/


.DiagnosisElement .MenuItemAdd {
    background-image:none;
    width: auto;
    height: 20px;
    line-height: 15px;
    border: 1px solid var(--blue);
    border-radius: 2px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 20px;
    margin: 0px;
    vertical-align: middle;
}
.DiagnosisElement .MenuItemAdd:hover {
    background-color: #adcfe6;
}
.DiagnosisElement .MenuItemAdd:after {
    content: "+ Nuevo";
    display: block;
    color: var(--blue);
    font-weight: bold;
    font-size: 12px;    
}
.DiagnosisElement .ListPatientProblmesBtn {
    background-image:none;
    width: auto;
    height: 20px;
    line-height: 15px;
    border: 1px solid var(--blue);
    border-radius: 2px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 20px;
    
}
.DiagnosisElement .ListPatientProblmesBtn:hover {
    background-color: #adcfe6;
}
.DiagnosisElement .ListPatientProblmesBtn:after {
    content: "+ Del Paciente";
    display: block;
    color: var(--blue);
    font-weight: bold;
    font-size: 12px;    
    
}
.ToolBarEditor .InvoiceIcon {
    background-image: url(ImgObjects/invoiceicon0.png);
}
.ToolBar .BillingButton {
    background-image: url(ImgObjects/billingicon0.png);
}
.framelistitemdiagnosis .List listfield[fname=name] {
    display: inline-block;
    width: 90%
}
.networkdisconnected .ModuleArea .ToolBar .MenuBar {
    width: calc(100% - 50px);
}
.networkdisconnected .ModuleArea .ToolBar .MenuBar .SaveLocalBtn {
    display: block;
}
.networkdisconnected .EditMode .ToolBarEditor .BackBtn1 {
    background-color: var(--orange);
}

.SaveLocalBtn {
    background-color: var(--orange) !important;
    position: absolute;
    top: 0px;
    right: -50px;
    border-right: none;
    cursor: pointer;
    color: transparent !important;
    background-image: url(ImgObjects/OkIcon2.png) !important;    
    background-repeat: no-repeat;
    background-size: auto 55% !important;
    opacity: 1;
    background-position: center;
    transition: transform .5s;
    display: none;
}
.networkdisconnected .EditMode .ToolBarEditor .BackBtn1 {
    background-color: var(--orange);
}
.ListArea .FilterBar {
    display: block;
    height: 25px;
    width: 100%;
    color: #9ad1f5;
    position: absolute;
    top:5px;
    font-size: 13px;
    font-weight: bold;
    line-height: 25px;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;     
    cursor: pointer;   
}   
.ListArea .FilterBar:hover {
    color: var(--blue);
}
.ListSelectorBox  .ListAreaFavorites  {
    overflow-y: auto;
    height: 100%;
}

[usesavelocal=true] .ModuleArea .ToolBar .MenuBar {
    width: calc(100% - 50px);
}

[usesavelocal=true] .ModuleArea.EditMode .ToolBar .MenuBar .SaveLocalBtn {
    display: block;
}

[usesavelocal=true] .EditMode .ToolBarEditor .BackBtn1 {
    background-color: var(--orange);
}
.ButtonSmall2 {
    display: inline-block;
    width:30px;
    height: 35px;
    border-radius: 4px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: 1px solid var(--green);
    vertical-align: middle;
}
.ModalDoneBtn {
    display: none;
}
[modal=true] .ModalDoneBtn {
    display: inline-block;
}
.List .ToolBarListItem {
    display: block;
    height: 50px;
    width: 100%;
    background-color: #eee;
}


.CustomerCompanyAccountBox .ServicePersonalModeElement {
    display: inline-block;
    padding-top: 5px;
    margin-left: 0px;
    margin: 0px;
}
.CustomerCompanyAccountBox .ServicePersonalModeElement * {
/*     color: var(--greenbright) !important; */
    font-weight: bold;
    color: #999 !important;
}
.CustomerCompanyAccountBox .ServicePersonalModeElement input[type="checkbox"] {
    border: 2px solid #aaa !important;
}
.CustomerCompanyAccountBox .ServicePersonalModeElement input[type="checkbox"]:checked {
    background-color: transparent;
}
.CustomerCompanyAccountBox .ServicePersonalModeElement input[type="checkbox"]:checked:after{
    color: #aaa;
}   
.CustomerCompanyAccountBox {
    display: block;
    position: absolute;
    top: -35px;
    right: 20px;
    height: 30px;
}
.CustomerCompanyAccountBox > * {
    vertical-align: middle;
}
.CustomerCompanyAccountBox .accountinfoline {
    display: inline-block;
    padding-right: 15px;
}

.CustomerCompanyAccountBox [name=company] {
    font-weight: bold;
    /* display: inline-block; */
    text-align: right;
    font-size: 12px;
    color: var(--green);
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    min-height: 0;
}
.CustomerCompanyAccountBox [name=customeraccountname] {
    font-weight: bold;
    /* display: inline-block; */
    text-align: right;
    font-size: 10px;
    color: #999;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    min-height: 0;
}
.JustCustomerAccountsMode {
    display: none;
}
[usecustomeraccount="true"] .JustCustomerAccountsMode {
    display: inline-block;
}
.SubMenuActivator {
    display: none;
    background-image: url(ImgObjects/EmailIcon2C.png);
}
[multimessagemenu="true"] .SubMenuActivator {
    display: inline-block;
}
[multimessagemenu="true"] .MenuItem.EmailBtn {
    display: none;
}
[multimessagemenu="true"] .MenuItem.EmailInfoBtn {
    display: none;
}

[multimessagemenu="true"] .SubMenuActivator:hover {
    background-color: #999;
    background-image: url(ImgObjects/ArrowRightWhite.png)
}
[multimessagemenu="true"] .SubMenuActivator:hover + .SubMenuGroup {
    transition: opacity .9s;
    transition-delay: .1s;
    width:auto;
    opacity: 1;
}
.SubMenuGroup .MenuItem.WhatsAppBtn {
    display: none;
}
[whatsappconnector="true"] .SubMenuGroup .MenuItem.WhatsAppBtn {
    display: inline-block;
}
.SubMenuGroup .MenuItem.SmsMessageBtn {
    display: none;
}
[smsmessageconnector="true"] .SubMenuGroup .MenuItem.SmsMessageBtn {
    display: inline-block;
}


.SubMenuGroup {
    overflow: hidden;
    width:0px;
    height: 50px;
    /*background-color: #666;*/
    vertical-align: middle;
    opacity: 0;
    display: none;
}
.ModuleArea .ToolBar .MobileRightBar .SubMenuGroup > div {
    display: inline-block !important;
    width: 50px !important;
    margin-left: 0px;
    margin-right: 0x;
}
[multimessagemenu="true"] .SubMenuGroup {
    display: inline-block;
}
.SubMenuGroup:hover {
    width:auto;
    opacity: 1;
}
.CustomerFromNameListSelector .List .ListField[fieldname=name] {
    width: 320px;
    border-right: none;
    font-size: 12px;
    display: inline-block;    
}
.ProgressNoteGroupListSelector .List .ListField[fieldname=name] {
    /* color: #999; */
    width: 300px;
    display: inline-block;
}

.PeriodSelector > * {
    display: inline-block !important;
    vertical-align: middle !important;
}
.SpecificDateSelector > * {
    display: inline-block !important;
    vertical-align: middle !important;
}

.ListSelectorBox .EditReservationStatusBtn {
    background-repeat: no-repeat;
    background-position: center;
    background-size:  auto 50%; 
    background-image: url(ImgObjects/EditIcon4.png);    
    width: 20px !important;
}
.ListSelectorBox.EditStatusListSelectorItemsMode .EditReservationStatusBtn {
    background-image: url(ImgObjects/OkIcon8.png);
}
.ListSelectorBox.EditStatusListSelectorItemsMode .SelectAllSelectListBtn {
    display: inline-block;
}
.CustomerReservationsSelector.EditStatusListSelectorItemsMode .List .ListField[fieldname=status] {
    border: 1px dashed var(--green);
    min-height: 50px;
}
.digitalizedsignatureviewer {
    width: 150px;
    height: 150px;
    /* float: right; */
    margin-right: 0px;
    border: 10px solid transparent !important;
    /* box-shadow: 0px 0px 30px #ddd; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 50%;;
    z-index: 100000;
    position: relative;
}
.digitalizedsignatureviewer > p {
     font-size: 12px;
    text-align: left;
    padding-top: 80px;
}

.scrollareabox::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

.scrollareabox::-webkit-scrollbar-track {
  background: #e1e1e1;        /* color of the tracking area */
}

.scrollareabox::-webkit-scrollbar-thumb {
  background-color: #bbb;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #e1e1e1;  /* creates padding around scroll thumb */
}

.note-editor.note-frame .note-editing-area .note-editable::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

.note-editor.note-frame .note-editing-area .note-editable::-webkit-scrollbar-track {
  background: #e1e1e1;        /* color of the tracking area */
}

.note-editor.note-frame .note-editing-area .note-editable::-webkit-scrollbar-thumb {
  background-color: #bbb;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #e1e1e1;  /* creates padding around scroll thumb */
}


/* payment column */
.List .ListItem .ListField[fieldname=paymenttype] {
    display: inline-block;
    width:150px;
    color: transparent;
    background-position: left;
    background-size: auto 50%;
    background-repeat: no-repeat;
    position: relative;
}

.List .ListItem[paymenttype=cash] .ListField[fieldname=paymenttype] {
    background-image: url(ImgObjects/CashPaymentIcon.png);
}
.List .ListItem[paymenttype=check] .ListField[fieldname=paymenttype] {
    background-image: url(ImgObjects/CheckPaymentIcon.png);
}
.List .ListItem[paymenttype=card] .ListField[fieldname=paymenttype] {
    background-image: url(ImgObjects/CardPaymentIcon.png);
}
.List .ListItem[paymenttype=account] .ListField[fieldname=paymenttype] {
    background-image: url(ImgObjects/CorporateAccountPaymentIcon.png);
}
.List .ListItem[paymenttype=wire] .ListField[fieldname=paymenttype] {
    background-image: url(ImgObjects/wiretransfericon.png);
}
.List .ListItem[paymenttype=online] .ListField[fieldname=paymenttype] {
    background-image: url(ImgObjects/onlinepaymenticon.png);
}

.List .ListItem .ListField[fieldname=paymenttype]:after {
    display: inline-block;
    position: absolute;
    left: 40px;
    font-size: 10px;
    width: 90px;
    color: #aaa;
    font-weight: bold;
    height: 40px;
    line-height: 40px;  
}

.List .ListItem[paymenttype=cash] .ListField[fieldname=paymenttype]:after {
    content: "Efectivo";    
}
.List .ListItem[paymenttype=check] .ListField[fieldname=paymenttype]:after {
    content: "Cheque";
    
}
.List .ListItem[paymenttype=card] .ListField[fieldname=paymenttype]:after {
    content: "Tarjeta";
    
}
.List .ListItem[paymenttype=account] .ListField[fieldname=paymenttype]:after {
    content: "A cuenta";
    
}
.List .ListItem[paymenttype=wire] .ListField[fieldname=paymenttype]:after {
    content: "Transferencia";
    
}
.List .ListItem[paymenttype=online] .ListField[fieldname=paymenttype]:after {
    content: "Online";  
}
/* payment column end */

.LoadingModalBackgroundArea {
    transition: 1s;
    display: none;

}
.LoadingModal .LoadingModalBackgroundArea {
    display: block;;
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index:  99999999;
    /*background-color: var(--green) !important;*/
    background-color: rgba(0,0,0,.7) !important;

    /*transition: background-color 0s;*/
}
.LoadingModalBackgroundArea > div {
}

.LoadingModalBackgroundArea .LoadingModalAniElement {
    position: relative;
    display: block;
    height: 100px;
}
.LoadingModalBackgroundArea .LoadingModalTitle {
    text-align: center;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    margin-top: 10%;
    margin-bottom: 40px;
}
.LoadingModalBackgroundArea .LoadingModalMessage {
    text-align: center;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    margin: 0 auto;
    width: 60%;
    margin-top: 30px;
    margin-bottom: 30px;

}
.LoadingModalBackgroundArea .LoadingModalCancelBtn {
    cursor: pointer;
    width: 90px;
    padding: 10px 30px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    background-color: #999;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0px 0px 5px #333;
    margin: 0 auto;
    margin-top: 50px;
}



.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
.SearchInHelp .SearchInput {
    border: 1px solid var(--blue);
}
.ColumnElement .FormElement.CheckBoxElement  label {
    width: calc(100% - 60px);
    display: inline-block !important;
}

.DigitalSignagureArea .CheckBoxElement {
    padding-top: 5px;
}
.ButtonSmall {
    display: inline-block;
    height: 20px;
    width: 20px;
    padding: 0px !important;
    cursor: pointer;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-repeat: no-repeat;
}
.ListSelectorBox .ListArea .ListItem.JustViewItem {
    cursor: no-drop;
    opacity: 0.7;
}


/*new loading extended animation */


.LoadingModules .circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: transform;
}

.LoadingModules .circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 5s linear infinite;
    bottom: -150px;
    
}

.LoadingModules .circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.LoadingModules .circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 5s;
}

.LoadingModules .circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.LoadingModules .circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 8s;
}

.LoadingModules .circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.LoadingModules .circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 2s;
}

.LoadingModules .circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 4s;
}

.LoadingModules .circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 7s;
    animation-duration: 15s;
}

.LoadingModules .circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 15s;
}

.LoadingModules .circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 6s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}



.SignatureListSelector .List .ListField[fieldname=name] {
    width: 120px;
    display: block;
}
.SignatureListSelector .List .ListField[fieldname=lastname] {
    width: 150px;
    display: block;
}
.SignatureListSelector .List .ListField[fieldname=signatureimage] {
    width: 40px;
    height: 40px;
    display: block;
    background-image: url(ImgObjects/signature2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;    
    color: transparent;
}
.SignatureListSelector .List .ListField[fieldname=signatureimage]:empty {
    background-color: blue;
}


form .EntryErrorField  {
    border: 1px solid var(--red) !important;
}

.QuickHelpContentList {
    display: none;
}
.GeneralQuickHelp {
    display: block;
}
[activemodule="BillingModule"] .GeneralQuickHelp {
    display: none;
}
[activemodule="BillingModule"] .BillingQuickHelp {
    display: block;
}
[activemodule="CustomersModule"] .GeneralQuickHelp {
    display: none;
}
[activemodule="CustomersModule"] .CustomersQuickHelp {
    display: block;
}

.autocompletedropdown {
    list-style: none;
    background-color: #fff;
}

.autocompletedropdown li {
    line-height: 30px;
    color: #999;
}


.SignWithPadBtn {
    width: 40px;
    height: 40px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url(ImgObjects/signaturepadicon.png);
    display: inline-block;
    cursor: pointer;
    transition: transform .9s;
}
.SignWithPadBtn:hover {
    transform: scale(1.1);
}

.setsignaturepadbox {

}
.signaturepaddarea {
    width: 520px;
    height:280px;
/*    border: 1px solid #ccc;*/
    margin-bottom: 10px;
    display: block;

}
.CancelSignatureBtn {

}
.DoneSignatureBtn {

}


.customerformviewinfotemplate .FormElement.IsEmpty {
    display: none !important;
}
.customerformviewinfotemplate .InfoPanel.IsEmpty {
    display: none !important;
}

.ResourceImageListSelector.resoucewithtime .List .ListField[fieldname=fullnameinverted] {
    width: 175px;
    border-right: none;
    font-size: 12px;
}
.ResourceImageListSelector.resoucewithtime .List .ListField[fieldname=fullname] {
    width: 175px;
    border-right: none;
    font-size: 12px;
}
.ResourceImageListSelector.resoucewithtime .List .ListField[fieldname=todaystart] {
    width: 30px;
    border-right: none;
    font-size: 10px;
    color: #999;
    padding: 0;
    display: inline-block;
}
.ResourceImageListSelector.resoucewithtime .List .ListField[fieldname=todayend] {
    width: 35px;
    border-right: none;
    font-size: 10px;
    color: #999;
    padding: 0;
    display: inline-block;
}
.ResourceImageListSelector.resoucewithtime .List .ListField[fieldname=todayend]:before {
    content: "a";
    display: inline-block;
    margin-right: 2px;
    padding: 0;
}
.ListSelectorBox.customersfortodayselector .List .ListField[fieldname=fullname] {
    display: block;
}
.ListSelectorBox.customersfortodayselector .List .ListField[fieldname=todaystart] {
    display: block;
    width: 35px;
    font-size: 11px;
    color: #999;
    padding: 0;
}
.ListSelectorBox.customersfortodayselector .List .ListField[fieldname=id] {
    display: none;
}
[alsoaresource="true"] .LeftBar .MenuBar > div {
    display: block;
}


@media print {
    @page {
        margin: 1.6cm;
    }
/*    div{
        page-break-inside: avoid;
    }*/
}
.VideoCallsModule .List .ListItem .ListField[fieldname=callcode] {
    display: block;
    width:90px !important;
    color: var(--red);
    letter-spacing: 3px;    
    font-size: 12px;
}
.QuoteListSelector {
    width: 690px !important;
}
.PrintArea .medicationbarcode {
    margin-left: auto;
    margin-right: 0;
    display: inline-block;
    float: right;
    height: 80px;
}
[disablereportforusers="true"][userloggedintype="user"] .ReportsModule[dashmode="dash"] .ToolBarEditor .MenuBar .MenuItemAdd {
    display: none !important;
}
[disablereportforusers="true"][userloggedintype="user"] .LeftBar .MenuBar .ReportsMenuBtn {
    display: none !important;
}

[disablereportforresources="true"][userloggedintype="resource"] .ReportsModule[dashmode="dash"] .ToolBarEditor .MenuBar .MenuItemAdd {
    display: none !important;
}
[disablereportforresources="true"][userloggedintype="resource"] .LeftBar .MenuBar .ReportsMenuBtn {
    display: none !important;
}

.TabFormBar {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 100px;
    background-color: violet;
}

.TabFormBar {
    .TabBtn {
        width: 20%;
        height: 40px;
        display: inline-block;
        border-radius: 0px 5px 0px 0px;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 40px;
    }        
}

.FormInputBorderMode .InputBorder {
    border: 1px solid #ccc;
    border-radius: 5px;
}
.FormInputBorderModeAll .InputBorder {
    
}
.FormArea form .FormButton {
    vertical-align: middle;
    width: auto;
    line-height: 15px;
    border: 1px solid var(--blue);
    border-radius: 2px;
    font-size: var(--input-form-size);
    color: var(--form-input-color);
    padding: 4px 7px;
    outline: none;
    font-family: inherit;
    display: inline-block;
    color: var(--blue);
    font-weight: bold;
    font-size: 12px;
}
.FormArea form .FormButton:hover {
    background-color: #adcfe6;

}



/*new location toolbars */
form .ToolBar  {
    display: block;
    width: fit-content !important;;
    left: auto;
    right: 20px;
    
}
.ReservationsModule form .ToolBarEditor .MenuBarSelectors {
    max-width: 100%;
}


form .ToolBar .MenuBar .MenuItem {
    /*border: 1px solid red;*/
    transform: scale(.6);
}
/*end new location toolbars*/

/* Customer info smartwindow (Customers.js) */
.customerformviewinfotemplate {
    font-family: inherit;
    color: #444;
    padding: 4px;
}
.customerformviewinfotemplate .CustomerInfoCard {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    overflow: hidden;
    min-width: 400px;
    width: 480px;
    max-width: 92vw;
}
.customerformviewinfotemplate .CustomerInfoTopActions {
    display: flex;
    gap: 10px;
    padding: 10px 16px 0 16px;
    align-items: center;
}
.customerformviewinfotemplate .CustomerInfoTopActionBtn {
    color: var(--blue);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    cursor: pointer;
}
.customerformviewinfotemplate .CustomerInfoTopEditBtn {
    margin-left: auto;
    transform: scale(.85);
}
.customerformviewinfotemplate .CustomerInfoHeader {
    display: flex;
    gap: 16px;
    padding: 12px 16px 8px 16px;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
}
.customerformviewinfotemplate .CustomerInfoAvatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #e6e8ef;
    background-position: center;
    background-size: cover;
    flex: 0 0 64px;
    color: transparent;
    font-size: 0;
}
.customerformviewinfotemplate .CustomerInfoHeaderMain {
    flex: 1;
    min-width: 0;
    position: relative;
}
.customerformviewinfotemplate .CustomerInfoIdTag {
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 10px;
    color: #b1b1b1;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.customerformviewinfotemplate .CustomerInfoName {
    font-size: 18px;
    font-weight: 700;
    color: #2f2f2f;
    line-height: 1.1;
    padding-right: 60px;
}
.customerformviewinfotemplate .CustomerInfoCompany {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8a8a;
}
.customerformviewinfotemplate .CustomerInfoMeta {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}
.customerformviewinfotemplate .CustomerInfoMetaGrid {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.customerformviewinfotemplate .CustomerInfoMetaBlock {
    min-width: 0;
}
.customerformviewinfotemplate .CustomerInfoMetaItem {
    display: flex;
    gap: 10px;
    align-items: baseline;
    min-width: 0;
}
.customerformviewinfotemplate .CustomerInfoMetaLabel {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.customerformviewinfotemplate .CustomerInfoMetaValue {
    font-size: 13px;
    color: #3d3d3d;
    word-break: normal;
    overflow-wrap: break-word;
}
.customerformviewinfotemplate .CustomerInfoMetaValueRow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.customerformviewinfotemplate .CustomerInfoMetaSubRow {
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.customerformviewinfotemplate .CustomerInfoMetaSubLabel {
    font-size: 10px;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.customerformviewinfotemplate .CustomerInfoIconBtn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #f0f1f6;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    flex: 0 0 22px;
}
.customerformviewinfotemplate .CustomerInfoEmailBtn {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'><path d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}
.customerformviewinfotemplate .CustomerInfoWhatsappBtn {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'><path d='M20.52 3.48A11.86 11.86 0 0 0 12 0C5.37 0 .01 5.37 0 12c0 2.1.55 4.15 1.6 5.96L0 24l6.2-1.63A12 12 0 0 0 24 12c0-3.2-1.25-6.2-3.48-8.52zM12 22a9.9 9.9 0 0 1-5.05-1.38l-.36-.22-3.68.97.98-3.59-.24-.37A9.95 9.95 0 1 1 12 22zm5.41-7.45c-.29-.15-1.72-.85-1.99-.95-.27-.1-.46-.15-.66.15-.2.29-.76.95-.93 1.15-.17.2-.35.22-.64.07-.29-.15-1.23-.45-2.35-1.44-.87-.78-1.45-1.73-1.62-2.02-.17-.29-.02-.45.13-.6.13-.13.29-.35.44-.52.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.52-.07-.15-.66-1.6-.9-2.2-.24-.58-.48-.5-.66-.5h-.56c-.2 0-.52.07-.8.37-.27.29-1.05 1.03-1.05 2.5s1.08 2.9 1.23 3.1c.15.2 2.13 3.25 5.16 4.56.72.31 1.28.5 1.72.64.72.23 1.37.2 1.88.12.57-.08 1.72-.7 1.97-1.38.24-.68.24-1.27.17-1.38-.07-.12-.27-.2-.56-.35z'/></svg>");
}
.customerformviewinfotemplate .CustomerInfoHeaderSide {
    min-width: 120px;
    border-left: 1px solid #eee;
    padding-left: 12px;
}
.customerformviewinfotemplate .CustomerInfoStatsBar {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    padding: 6px 16px;
    background-color: #f4f5f9;
    border-bottom: 1px solid #eee;
}
.customerformviewinfotemplate .CustomerInfoStatItem {
    text-align: center;
}
.customerformviewinfotemplate .CustomerInfoStatLabel {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: #9a9a9a;
    letter-spacing: .6px;
    line-height: 1.1;
}
.customerformviewinfotemplate .CustomerInfoStatValue {
    display: block;
    font-size: 12px;
    color: #4a4a4a;
    margin-top: 1px;
    line-height: 1.1;
}
.customerformviewinfotemplate .CustomerInfoHeaderSide {
    min-width: 140px;
    border-left: 1px solid #eee;
    padding-left: 12px;
}
.customerformviewinfotemplate .CustomerInfoSideItem {
    margin-bottom: 6px;
}
.customerformviewinfotemplate .CustomerInfoSideLabel {
    font-size: 10px;
    color: #8d8d8d;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.customerformviewinfotemplate .CustomerInfoSideValue {
    font-size: 13px;
    color: #333;
    margin-top: 2px;
    word-break: break-word;
}
.customerformviewinfotemplate .CustomerInfoBody {
    padding: 8px 16px 4px 16px;
    display: grid;
    gap: 6px;
}
.customerformviewinfotemplate .CustomerInfoRow {
    display: flex;
    gap: 12px;
    align-items: baseline;
}
.customerformviewinfotemplate .CustomerInfoLabel {
    width: 110px;
    font-size: 11px;
    color: #8d8d8d;
    text-transform: uppercase;
    letter-spacing: .6px;
    flex: 0 0 110px;
    line-height: 1.2;
}
.customerformviewinfotemplate .CustomerInfoValue {
    font-size: 13px;
    color: #3d3d3d;
    flex: 1;
    word-break: break-word;
    line-height: 1.2;
}
.customerformviewinfotemplate .CustomerInfoNotesRow .CustomerInfoValue {
    white-space: pre-wrap;
}
.customerformviewinfotemplate .CustomerInfoTabs {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background-color: #f6f7fb;
    border-top: 1px solid #eee;
}
.customerformviewinfotemplate .CustomerInfoTab {
    flex: 1;
    text-align: center;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 6px 4px;
    color: #7b7b7b;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.customerformviewinfotemplate .CustomerInfoTab.Active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}

/* Screen presentation overlay */
.ScreenPresentationOverlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.ScreenPresentationOverlay.Show {
    display: block;
    opacity: 1;
}
.ScreenPresentationSurface {
    position: absolute;
    inset: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}
.ScreenPresentationOverlay.Show .ScreenPresentationSurface {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ScreenPresentationClose {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #e84a4a;
    color: #fff;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.ScreenPresentationFrame {
    width: 80%;
    height: 80%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    scroll-behavior: smooth;
}
.ScreenPresentationFrame::-webkit-scrollbar {
    display: none;
}
.ScreenPresentationFrame {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ScreenPresentationContent {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
.ScreenPresentationArrow {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #666;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
}
.ScreenPresentationArrowLeft {
    left: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}
.ScreenPresentationArrowRight {
    right: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><path d='m8.59 16.59 1.41 1.41 6-6-6-6-1.41 1.41L13.17 12z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

/* Screen presentation infographic */
.ScreenPresentationHeaderFixed {
    position: absolute;
    top: 30px;
    left: 10%;
    z-index: 2;
    pointer-events: none;
}
.ScreenPresentationFollow{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    pointer-events: auto;
}
.ScreenPresentationFollowNotice{
    max-width: 520px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: #8b93a6;
}
.ScreenPresentationFollowNoticeStrong{
    color: #333;
    font-weight: 700;
}
.ScreenPresentationFollowLabel{
    font-size: 12px;
    font-weight: 700;
    color: #8a2be2;
}
.ScreenPresentationFollowIcons{
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}
.ScreenPresentationFollowIcon{
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4a5a70;
    background: rgba(240,244,248,0.9);
    transition: background 0.2s ease, color 0.2s ease;
    pointer-events: auto;
}
.ScreenPresentationFollowIcon.FacebookIcon{
    color: #1877f2;
    background: rgba(24,119,242,0.12);
}
.ScreenPresentationFollowIcon.InstagramIcon{
    color: #d62976;
    background: rgba(214,41,118,0.12);
}
.ScreenPresentationFollowIcon:hover{
    background: rgba(221,230,240,0.9);
    color: #2c3a4c;
}
.ScreenPresentationFollowIcon svg{
    width: 18px;
    height: 18px;
    display: block;
}
.ScreenPresentationInfographic {
    width: 1600px;
    height: 100%;
    padding: 120px 50px 40px 50px;
    box-sizing: border-box;
    font-family: inherit;
    color: #2f2f2f;
    position: relative;
}
.ScreenPresentationHeader {
    display: none;
}
.ScreenPresentationTitle {
    font-size: 28px;
    font-weight: 700;
    color: #3a5f8f;
    letter-spacing: 1px;
}
.ScreenPresentationSubtitle {
    font-size: 16px;
    font-weight: 600;
    color: #6a7fa1;
}
.ScreenPresentationTimeline {
    position: relative;
    height: 420px;
}
.ScreenPresentationLineDots {
    position: absolute;
    left: 0;
    right: 0;
    top: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}
.ScreenPresentationDot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #333;
}
.ScreenPresentationLine {
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    height: 2px;
    background-color: #7c8aa3;
}
.ScreenPresentationSteps {
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    align-items: center;
}
.ScreenPresentationStep {
    position: relative;
    text-align: center;
}
.ScreenPresentationCircle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto;
    border: 14px solid #fff;
    box-shadow: 0 10px 18px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    transform: translateY(-50%);
}
.ScreenPresentationIcon {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
}
.ScreenPresentationDash {
    width: 2px;
    height: 60px;
    margin: 6px auto;
    background-image: linear-gradient(#9cb0c9 50%, rgba(0,0,0,0) 0);
    background-size: 2px 8px;
    background-repeat: repeat-y;

}
.ScreenPresentationLabel {
    max-width: 120px;
    margin: 0 auto;
    
    text-align: left;
}
.ScreenPresentationNum {
    font-size: 22px;
    font-weight: 700;
    color: #4f6b97;
}
.ScreenPresentationText {
    font-size: 12px;
    font-weight: 700;
    color: #4f6b97;
    text-transform: uppercase;
    white-space: normal;
    word-break: break-word;
}
.ScreenPresentationLegend {
    font-size: 11px;
    color: #7f93b2;
    white-space: normal;
    word-break: break-word;
}
.ScreenPresentationStep.up {
    margin-top: -160px;
}
.ScreenPresentationStep.up .ScreenPresentationDash {
    height: 70px;
}
.ScreenPresentationStep.down {
    margin-top: 40px;
}
.ScreenPresentationStep.down .ScreenPresentationDash {
    height: 50px;
}
.ScreenPresentationCircle.c1 { background-color: #6cc24a; }
.ScreenPresentationCircle.c2 { background-color: #2aa8b4; }
.ScreenPresentationCircle.c3 { background-color: #ff9f43; }
.ScreenPresentationCircle.c4 { background-color: #ffd32a; color: #5b5b5b; }
.ScreenPresentationCircle.c5 { background-color: #58b368; }
.ScreenPresentationCircle.c6 { background-color: #00a8cc; }
.ScreenPresentationCircle.c7 { background-color: #9b59b6; }
.ScreenPresentationCircle.c8 { background-color: #e17055; }
.ScreenPresentationCircle.c9 { background-color: #00b894; }
.ScreenPresentationCircle.c10 { background-color: #6c5ce7; }
.ScreenPresentationCircle.c11 { background-color: #0984e3; }
.ScreenPresentationCircle.c12 { background-color: #fd79a8; }
.ScreenPresentationContent {
    width: 100%;
    height: 100%;
}