/* $Id$ */

:root {
    --fontlight: 'LatoLight', Roboto, sans-serif;
    --fontregular: 'LatoRegular', Roboto, sans-serif;
    --fontmedium: 'LatoSemiBold', Roboto, sans-serif;
    --fontsemibold: 'LatoLtBold', Roboto, sans-serif;
    --fontcommon: 'Roboto', sans-serif;
    --fontPTmono: PT Mono;

    --zpPrimary: 255, 100, 0;
    --zpPrimaryHover: 255, 247, 243;
    --zpOnPrimary: 255, 255, 255;
    --zpBackground: 255, 255, 255;
    --zpOnBackground: 0, 0, 0;
    --zpSurface: 255, 255, 255;
    --zpOnSurface: 0, 0, 0;
    --zpOnSecondary: 70, 70, 70;
    --zpData: 255, 255, 255;
    --zpOnData: 0, 0, 0;
    --zpPopupBase: 255, 255, 255;
    --zpShadow: 0, 0, 0;
    --zpBorderGrey: 0, 0, 0;
    --zpMLTGroup: 248, 248, 248;
    --zpOnMLTHeader: 167, 169, 172;
    --zpFormElement: 255, 255, 255;
    --zpMandatory: 255, 247, 247;
    --zpFreeze: 50, 50, 50, .82;
    --zpOnDisabled: 142, 142, 142;
    --zpTooltip: 0, 0, 0;
    --zpOnTooltip: 242, 242, 242;
    --zpProgressGreen: 135, 211, 124;
    --zpBlackOpac: 0, 0, 0;
    --zpDropDownShadow: -2px 0 15px rgba(0, 0, 0, .14);
    --zpModuleHeader: 60px;
    --zpTableHeader: 30px;
    --zpTableGroupHeader: 48px;
    --zpBulkUpdateBar: 50px;
    --zpfilterHeight: 39px;
    --zpFilterWidth: 400px;
    --zpFormWidth: 750px;
    --slideFormHeaderBand: 55px;
    --slideFormBottombtn: 55px;
    --zpFormInput: 2.5rem;
    --zpListHeight: calc(100vh - calc(var(--zpModuleHeader) + 5px));
    --zpListHeightFilter: calc(100vh - calc(var(--zpModuleHeader) + var(--zpfilterHeight) + 5px));
    --formContainerHeight: calc(100vh - var(--slideFormHeaderBand));
    --zpFilterWidth: 400px;
    --filterHeaderHeight: 50px;
    --zpFilterInvert: unset;
    
    /********* This Sizes are marked with base font size of 14px *********/
    --fs1px: 0.07142857142857142rem;
    --fs2px: 0.14285714285714285rem;
    --fs3px: 0.21428571428571427rem;
    --fs4px: 0.2857142857142857rem;
    --fs5px: 0.35714285714285715rem;
    --fs6px: 0.42857142857142855rem;
    --fs7px: 0.5rem;
    --fs8px: 0.5714285714285714rem;
    --fs9px: 0.6428571428571429rem;
    --fs10px: 0.7142857142857143rem;
    --fs10-5px: 0.75rem;
    --fs11px: 0.7857142857142857rem;
    --fs11-5px: 0.8214285714285714rem;
    --fs12px: 0.8571428571428571rem;
    --fs12-5px: 0.8928571428571429rem;
    --fs13px: 0.9285714285714286rem;
    --fs13-5px: 0.9642857142857143rem;
    --fs14px: 1rem;
    --fs14-5px: 1.0357142857142858rem;
    --fs15px: 1.0714285714285714rem;
    --fs15-5px: 1.1071428571428572rem;
    --fs16px: 1.1428571428571428rem;
    --fs16-5px: 1.1785714285714286rem;
    --fs17px: 1.2142857142857142rem;
    --fs18px: 1.2857142857142858rem;
    --fs18-5px: 1.3214285714285714rem;
    --fs19px: 1.3571428571428572rem;
    --fs20px: 1.4285714285714286rem;
    --fs21px: 1.5rem;
    --fs22px: 1.5714285714285714rem;
    --fs23px: 1.6428571428571428rem;
    --fs24px: 1.7142857142857142rem;
    --fs25px: 1.7857142857142858rem;
    --fs26px: 1.8571428571428572rem;
    --fs27px: 1.9285714285714286rem;
    --fs28px: 2rem;
    --fs29px: 2.0714285714285716rem;
    --fs30px: 2.142857142857143rem;
    --fs31px: 2.2142857142857144rem;
    --fs32px: 2.2857142857142856rem;
    --fs33px: 2.357142857142857rem;
    --fs34px: 2.4285714285714284rem;
    --fs35px: 2.5rem;
    --fs36px: 2.5714285714285716rem;
    --fs37px: 2.642857142857143rem;
    --fs38px: 2.7142857142857144rem;
    --fs39px: 2.7857142857142856rem;
    --fs40px: 2.857142857142857rem;

    --textLeft: left;
    --textRight: right;
    --zpOutline: none;
}

body:not([dark-mode="true"]):not([dim-mode="true"]):not([cool-pattern]),
body[cool-pattern="1"]:not([dark-mode="true"]):not([dim-mode="true"]) {
    --separatorBdr: 233, 240, 247;
    --zpFormElementBdr: 233, 240, 247;
    --zpSurfaceBdr: 233, 240, 247;
    --zpSecondary: 250, 250, 250;
    --zpOnDataLight: 85, 85, 85;
    --zpDisabled: 241, 241, 241;
    --zpSecondaryBdr: 235, 235, 235;
}

body[cool-pattern="2"]:not([dark-mode="true"]):not([dim-mode="true"]) {
    --separatorBdr: 217, 226, 236;
    --zpFormElementBdr: 217, 226, 236;
    --zpSurfaceBdr: 217, 226, 236;
    --zpSecondary: 241, 244, 248;
    --zpOnDataLight: 85, 105, 119;
    --zpDisabled: 244, 248, 252;
    --zpSecondaryBdr: 217, 226, 236;
}

body[cool-pattern="3"]:not([dark-mode="true"]):not([dim-mode="true"]) {
    --separatorBdr: 199, 211, 223;
    --zpFormElementBdr: 199, 211, 223;
    --zpSurfaceBdr: 199, 211, 223;
    --zpSecondary: 241, 244, 248;
    --zpOnDataLight: 85, 105, 119;
    --zpDisabled: 244, 248, 252;
    --zpSecondaryBdr: 199, 211, 223;
}

body[dark-mode="true"] {
    --zpBackground: 0, 0, 0;
    --zpOnBackground: 97, 97, 97;
    --zpSurface: 0, 0, 0;
    --zpOnSurface: 185, 185, 185;
    --zpSurfaceBdr: 18, 18, 18;
    --zpPrimaryHover: 40, 40, 40 !important;
    --zpSecondary: 13, 13, 13;
    --zpOnSecondary: 158, 158, 158;
    --zpSecondaryBdr: 46, 46, 46;
    --zpData: 18, 18, 18;
    --zpOnData: 187, 187, 187;
    --zpOnDataLight: 102, 102, 102;
    --zpTooltip: 222, 222, 222;
    --zpOnTooltip: 0, 0, 0;
    --zpDisabled: 62, 62, 62;
    --zpOnDisabled: 152, 152, 152;
    --zpPopupBase: 30, 30, 30;
    --zpFreeze: 50, 50, 50, .82;
    --zpShadow: 0, 0, 0;
    --zpBorderGrey: 225, 225, 225;
    --zpMLTGroup: 25, 25, 25;
    --zpOnMLTHeader: 102, 102, 102;
    --zpOnMLTHeaderBdr: 40, 40, 40;
    --zpFormElement: 8, 8, 8;
	--zpFormElementBdr: 51, 51, 51;
	--zpOnFormElement: 204, 204, 204;
	--zpFormLabel: 150, 150, 150;
    --zpBulkUpdate: 40, 40, 40;
    --zpDropDownShadow: -2px 0 15px rgba(0, 0, 0, .41);
    --zpMandatory: 39, 7, 7;
    --zpMandatoryBdr: 119, 28, 33;
    --zpProgressGreen: 108, 156, 101;
    --zpBlackOpac: 255, 255, 255;
    --zpFilterInvert: invert(1);
}

body[dir="rtl"] {
    --textLeft: right;
    --textRight: left;
}

body[dark-mode="true"] .select2-search-choice-close {
    filter: invert(1);
}

@font-face {
    font-family: "LatoRegular"; font-style: normal; font-weight: normal;
    src: url('fonts/lato/lato-normal.woff') format('woff');
}
@font-face {
    font-family: "LatoLight"; font-style: normal; font-weight: normal;
    src: url('fonts/lato/lato-light.woff') format('woff');
}
@font-face {
    font-family: "LatoSemiBold"; font-style: normal; font-weight: normal;
    src: url('fonts/lato/lato-semibold.woff') format('woff');
}
@font-face {
    font-family: "LatoLtBold"; font-style: normal; font-weight: normal;
    src: url('fonts/lato/lato-bold.woff') format('woff');
}
@font-face {
    font-family: "LatoBlack"; font-style: normal; font-weight: normal;
    src: url('fonts/lato/lato-black.woff2') format('woff2'), url('fonts/lato/lato-black.woff') format('woff');
}
@font-face {
    font-family: "LatoExtraBlack"; font-style: normal; font-weight: normal;
    src: url('fonts/lato/lato-extra-black.woff2') format('woff2'), url('fonts/lato/lato-extra-black.woff') format('woff');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

::selection { background-color: rgba(var(--zpPrimary), 0.5); color: var(--onSelection) }
::-moz-selection { background-color: rgba(var(--zpPrimary), 0.5); color: var(--onSelection) }
::-webkit-selection { background-color: rgba(var(--zpPrimary), 0.5); color: var(--onSelection) }

html, body { background-color: rgb(var(--zpSurface)); height: 100vh; font-size: 15.5px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;}
body { border: 0 none; color: rgb(var(--zpOnData)); font-family: 'Lato', sans-serif; text-align: var(--textLeft); -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-print-color-adjust: exact; }
form { margin: 0; padding: 0 }

input,
select,
textarea,
.select2-container a.select2-choice,
.selectcustom--choices,
.select-style,
.select2-container-multi .select2-choices { margin: 0; padding: 0; border: 0; outline: var(--zpOutline); color: rgb(var(--zpOnData)); text-align: var(--textLeft); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.select2-container a.select2-choice,
.selectcustom--choices,
.formfield-style,
.select-style,
.select2-container-multi .select2-choices { width: 100%; background-color: rgb(var(--zpFormElement)); border: rgb(var(--zpFormElementBdr)) solid 1px; color: rgb(var(--zpOnData)); font-size: 13.5px; font-weight: normal; padding-left: 8px; padding-right: 8px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px }

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover,
.select2-container .select2-choice:hover,
.select-style:hover { border: rgba(var(--zpPrimary), 0.41) solid 1px }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.select2-container .select2-choice:active,
.formfield-style:focus-within,
.select2-container-multi .select2-choices:focus-within,
.select-style:focus-within { border: rgba(var(--zpPrimary), 0.66) solid 1px; background-color: rgb(var(--zpFormElement)); outline: var(--zpOutline) }

input[type="text"][mandatory="yes"],
input[type="email"][mandatory="yes"],
input[type="password"][mandatory="yes"],
input[type="search"][mandatory="yes"],
input[type="number"][mandatory="yes"],
select[mandatory="yes"],
textarea[mandatory="yes"],
.select2-container[mandatory="yes"] .select2-choice,
.select2-container[mandatory="yes"] .select2-choices,
input:invalid,
.zselectbox[mandatory="yes"] { border: rgb(var(--zpMandatoryBdr)) solid 1px !important; background-color: rgba(var(--zpMandatory), 0.51) }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
.select2-container a.select2-choice,
.select-style { height: var(--zpFormInput) }

input[readonly],
select[readonly],
textarea[readonly],
.select2-container[readonly] a.select2-choice,
.selectcustom--choices[readonly],
.select-style select[readonly] { cursor: default }

textarea { min-height: var(--zpFormInput); padding: 8px; resize: vertical }
select[disabled] { color: rgb(var(--zpOnDisabled)); cursor: not-allowed }
.formfield-style {    min-height: var(--zpFormInput) }
.select-style{ position:relative; display:block; width:100%; padding-left:0; }
.select-style.falign{ display:flex; align-items:center; }
.select-style.hide{display:none;}
.select-style select {width:100%; height:100%; border: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; color:rgb(var(--zpOnData)); -moz-appearance: none; appearance:none;}
.select-style:after { content: ''; background: none repeat scroll 0 0 transparent; height: 7px; position: absolute; width: 7px; margin-top: 1px; border-width: 1px 1px 0 0; box-shadow: 1.5px 1.5px 0 rgb(var(--zpPrimary)); transform: rotate(43deg); float: right; right: 10px; top: 10px; cursor:pointer;pointer-events: none;}
.select-style[disabled]:after { cursor:not-allowed; }
.select-style select:focus { outline: var(--zpOutline); }
.select-style select option{float:left; overflow:hidden; text-overflow:ellipsis; width:100%; padding:0px 8px;}
.select-style select::-ms-expand {display: none;}
.select-style .select2-container{width:100%;}
.select-style.input-select > input[type="text"]{ width:100% !important; height:100% !important; border:0 !important; }

.disabled-element,
input[type="text"][disabled],
input[type="email"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="number"][disabled] { background-color: rgb(var(--zpDisabled)); color: rgb(var(--zpOnDisabled)); cursor: not-allowed; border: rgb(var(--zpFormElementBdr)) solid 1px !important}

::-webkit-input-placeholder { color: rgba(var(--zpOnDataLight), 0.5)} 
:-ms-input-placeholder { color: rgba(var(--zpOnDataLight), 0.5)} 
::placeholder { color: rgba(var(--zpOnDataLight), 0.5)}

/* Checkbox */
.c-checkbox [type="checkbox"]+label:after,
.g-tab-thumbnail [type="checkbox"]+label:after { font-family: 'zohoproj'; src: url(fonts/gdrive-icons/zohoproj.woff2) format(woff2), url(fonts/gdrive-icons/zohoproj.woff) format(woff); font-weight: normal; font-style: normal; font-display: block; }
.c-checkbox [type="checkbox"]:checked,
.c-checkbox [type="checkbox"]:not(:checked) { position: absolute; display: none; }
.c-checkbox [type="checkbox"]:checked+label,
.c-checkbox [type="checkbox"]:not(:checked)+label { position: relative; padding-left: 22px; cursor: pointer; font-size: 14px; line-height: 22px; min-height: 22px; display: inline-block; color: rgb(var(--zpOnData)); user-select: none; }
body[dir="rtl"] .c-checkbox [type="checkbox"]+label { padding: 0 22px 0 0; }
.c-checkbox [type="checkbox"][disabled]:checked+label,
.c-checkbox [type="checkbox"][disabled]:not(:checked)+label { color: rgb(var(--zpOnDisabled)); cursor: default; }
.c-checkbox [type="checkbox"]:checked+label:before,
.c-checkbox [type="checkbox"]:not(:checked)+label:before { content: ''; position: absolute; left: 0; top: 3px; width: var(--fs11px); height: var(--fs11px); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px }
body[dir="rtl"] .c-checkbox [type="checkbox"]+label:before { left: unset; right: 0; }
.c-checkbox [type="checkbox"]:checked+label:before { border: 1.5px solid rgb(var(--zpPrimary)); background-color: rgb(var(--zpPrimary)) } 
.c-checkbox [type="checkbox"]:not(:checked)+label:before { border: 1.5px solid rgba(var(--zpPrimary), 0.6); background-color: rgb(var(--zpSurface)) } 
.c-checkbox [type="checkbox"]:indeterminate+label:before { border: 1.5px solid rgb(var(--zpPrimary)); background-color: rgb(var(--zpPrimary))} 
.c-checkbox [type="checkbox"][disabled]:checked+label:before { border: 1.5px solid rgb(var(--zpDisabled)); background-color: rgb(var(--zpDisabled)); cursor: not-allowed } 
.c-checkbox [type="checkbox"][disabled]:not(:checked)+label:before { border: 1.5px solid rgba(var(--zpOnDisabled), .34); background-color: rgba(var(--zpDisabled), 0.2); cursor: not-allowed } 
.c-checkbox [type="checkbox"]:checked+label:after,
.c-checkbox [type="checkbox"]:not(:checked)+label:after { content: ''; position: absolute; top: 5px; left: 5px; -webkit-transition: all .2s ease; transition: all .2s ease; width:3px; height:7px; border: solid rgb(var(--zpOnPrimary)); border-width: 0 2px 2px 0 !important; transform: rotate(45deg) scale(0); }
body[dir="rtl"] .c-checkbox [type="checkbox"]+label:after { left: unset; right: 3px;} 
.c-checkbox [type="checkbox"]:not(:checked)+label:after { opacity: 0; } 
.c-checkbox [type="checkbox"]:checked+label:after { opacity: 1; transform: rotate(45deg) scale(1);} 
.c-checkbox [type="checkbox"][disabled]:checked+label:after,
.c-checkbox [type="checkbox"][disabled]:not(:checked)+label:after { border: solid rgb(var(--zpOnDisabled)); } 
.c-checkbox [type="checkbox"]:indeterminate+label:after { content: ''; background-color: rgb(var(--zpOnPrimary)); height: 2px; width: 6px; display: inline-block; top: 11px; left: 4px; opacity: 1; -webkit-transform: scale(1); transform: scale(1); transition: unset} 
body[dir="rtl"] .c-checkbox [type="checkbox"]:indeterminate+label:after { left: unset; right: 4px;} 
.c-checkbox [type="checkbox"][error-check]:not(:checked)+label:before { border: 1.5px solid rgba(var(--zpWarning), 0.6); background-color: rgb(var(--zpFormElement))} 
.c-checkbox [type="checkbox"][error-check]:checked+label:before { border: 1.5px solid rgba(var(--zpWarning), 1); background-color: rgb(var(--zpWarning))} 
.c-checkbox [type="checkbox"][error-check]:checked+label:after { color: rgb(var(--zpOnPrimary))} 
.c-checkbox [type="checkbox"][error-check]:not(:checked)+label:after { color: rgb(var(--zpWarning))} 

/* Radio Button */
.cradio [type="radio"]:checked,
.cradio [type="radio"]:not(:checked) { position: absolute; display: none} 
.cradio [type="radio"]:checked+label,
.cradio [type="radio"]:not(:checked)+label { position: relative; padding-left: 20px; cursor: pointer; font-size: 14px; line-height: 22px; display: inline-block; color: rgb(var(--zpOnData))} 
body[dir="rtl"] .cradio [type="radio"]:checked+label { padding: 0 20px 0 0;} 
.cradio [type="radio"]:checked+label:before,
.cradio [type="radio"]:not(:checked)+label:before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%} 
body[dir="rtl"] .cradio [type="radio"]+label:before { left: unset; right: 0;} 
.cradio [type="radio"]:checked+label:before { border: 1px solid rgb(var(--zpPrimary))} 
.cradio [type="radio"]:not(:checked)+label:before { border: 1px solid rgba(var(--zpPrimary), 0.6)} 
.cradio [type="radio"]:checked+label:after,
.cradio [type="radio"]:not(:checked)+label:after { content: ''; width: 6px; height: 6px; background: rgb(var(--zpPrimary)); position: absolute; top: 9px; left: 5px; border-radius: 6px; -webkit-transition: all .2s ease; transition: all .2s ease} 
body[dir="rtl"] .cradio [type="radio"]+label:after { left: unset; right: 5px;} 
.cradio [type="radio"]:not(:checked)+label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0)} 
.cradio [type="radio"]:checked+label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1)} 
.cradio>label+.subtext { position: relative; padding-left: 22px; line-height: 22px; color: rgb(var(--zpOnDataLight)); font-size: 14px; white-space: normal} 
body[dir="rtl"] .cradio>label+.subtext { padding: 0 22px 0 0;} 
.cradio [type="radio"][disabled]:not(:checked)+label:before,
.cradio [type="radio"][disabled]:checked+label:before { background-color: rgb(var(--zpDisabled)); border: 1px solid rgba(var(--zpOnDisabled), .26)} 
.cradio [type="radio"][disabled]:checked+label:after,
.cradio [type="radio"][disabled]:not(:checked)+label:after { background: rgba(var(--zpOnDisabled), .46)} 
.cradio [type="radio"][disabled]:checked+label,
.cradio [type="radio"][disabled]:not(:checked)+label { color: rgb(var(--zpOnDataLight))}

/* Buttons */ 
.zps-primary-button,
.zps-secondary-button { font-weight: normal; font-size: 13px; text-align: center; cursor: pointer; padding: 0 15px; outline: var(--zpOutline); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; height: 30px; display: inline-flex; align-items: center; box-sizing: border-box; border: 1px solid rgb(var(--zpPrimary)); position: relative} 
.zps-primary-button:not(:last-of-type),
.zps-secondary-button:not(:last-of-type) { margin-right: 10px} 
.zps-primary-button { color: rgb(var(--zpOnPrimary)); background-color: rgb(var(--zpPrimary))} 
.zps-secondary-button { color: rgb(var(--zpPrimary)); background-color: rgb(var(--zpSurface))} 
.zps-primary-button[zps-loader="yes"],
.zps-secondary-button[zps-loader="yes"] { pointer-events: none} 
.zps-primary-button[zps-loader="yes"]:before,
.zps-primary-button[zps-loader="yes"]:after,
.zps-secondary-button[zps-loader="yes"]:before,
.zps-secondary-button[zps-loader="yes"]:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: not-allowed; border-radius: 25px; -moz-border-radius: 25px} 
.zps-primary-button[zps-loader="yes"]:before { z-index: 1; background-color: rgb(var(--zpPrimary)); opacity: 1} 
.zps-secondary-button[zps-loader="yes"]:before { z-index: 1; background-color: rgb(var(--zpSurface)); opacity: 1} 
.zps-primary-button[zps-loader="yes"]:after,
.zps-secondary-button[zps-loader="yes"]:after { border-radius: 50%; -webkit-border-radius: 50%; width: 15px; height: 15px; z-index: 2; top: 0; bottom: 0; margin: auto; animation: loading-spin 1s linear infinite; -webkit-animation: loading-spin 1s linear infinite; box-sizing: border-box} 
.zps-primary-button[zps-loader="yes"]:after { border: 3px solid rgba(var(--zpOnPrimary), 1); border-top: 3px solid rgba(var(--zpOnPrimary), 0.5); border-right: 3px solid rgba(var(--zpOnPrimary), 0.5)} 
.zps-secondary-button[zps-loader="yes"]:after { border: 3px solid rgba(var(--zpPrimary), 1); border-top: 3px solid rgba(var(--zpPrimary), 0.5); border-right: 3px solid rgba(var(--zpPrimary), 0.5)} 
.zps-primary-button[disabled] { background-color: rgb(var(--zpDisabled)); border: rgba(var(--zpOnDisabled), 0.2) solid 1px; color: rgb(var(--zpOnDisabled)); cursor: not-allowed} 
.zps-secondary-button[disabled] { border: rgb(var(--zpFormElementBdr)) solid 1px; color: rgb(var(--zpOnDisabled)); cursor: not-allowed} 
.zps-primary-button.hide,
.zps-secondary-button.hide { display: none} 
[attention^="true"],
[attention*=" true"] { -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;} 

/*Form styles*/ 
.zps-form-container { position: relative; height: var(--formContainerHeight); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;} 
.zps-form-content { padding: 20px 35px 5px;} 
.slideFormBottombtn { height: var(--slideFormBottombtn); background-color: rgb(var(--zpData)); display: flex; align-items: center; padding-left: 36px; padding-right: 25px; position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2;} 
.slideFormHeaderBand { padding: 0 35px; text-align: var(--textLeft); background-color: rgb(var(--zpSecondary)); color: rgb(var(--zpOnData)); position: relative; height: var(--slideFormHeaderBand); display: flex; align-items: center;} 
.show-main-form { width: var(--zpFormWidth); display: block;} 

/* Tab Navigation Menu */
.zps-general-tab{ display:flex; align-items:center; height: 30px; margin-bottom:30px; }
.zps-general-tab > .tab-item{ height: 100%; display: inline-flex; align-items: center; white-space:nowrap; border-bottom:transparent solid 2px; cursor:pointer; margin-right:30px; font-size:var(--fs14px); }
.zps-general-tab > .tab-item.hide{ display:none;}
body[dir="rtl"] .zps-general-tab > .tab-item{ margin-right:unset; margin-left:20px; }
.zps-general-tab > .tab-item > span[ellipsis]{ display:inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
body:not([dir="rtl"]) .zps-general-tab .tab-item:last-child{ margin-right:0; }
body[dir="rtl"] .zps-general-tab .tab-item:last-child{ margin-left:0; }
.zps-general-tab > .tab-item.active{ font-weight:700; border-bottom:rgb(var(--zpPrimary)) solid 2px; }
.zps-general-tab > .tab-item[disabled], .zps-general-tab > .tab-item[disabled].active{ color:rgb(var(--zpOnDataLight)); cursor:not-allowed; }
.zps-general-tab[wizard="yes"] .tab-item{cursor:default; color:rgb(var(--zpOnDataLight)); }
.zps-general-tab[wizard="yes"] .tab-item.active{cursor:pointer; color:rgb(var(--zpOnData)); }
.zps-general-tab[border="bottom"]{ border-bottom:rgb(242, 242, 242) solid 1px; }
.zps-general-tab[border="bottom"] > .tab-item{ margin-bottom:-1px; }



@keyframes slideform-main { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(calc(-1 * var(--zpFormWidth))); }
} 
/*End Form Styles*/ 

.error, .zps-success { position: fixed; z-index: 13; height: var(--fs32px); line-height: var(--fs32px); font-size: var(--fs13px); font-family: var(--fontmedium); left: 50%; transform: translate(-50%, 1px); color: rgb(var(--zpOnPrimary)); padding: 0 45px; transition: 0.2s; white-space: nowrap; max-width: 80vw; top: 0; }
.error:before, .zps-success:before { content: ''; position: absolute; z-index: -1 !important; top: -1px; text-align: center; width: 100%; height: var(--fs40px); background-color: transparent; right: 0; bottom: 0; left: 0; z-index: 0; border: unset; border-left: 0; transform: perspective(15px) rotateX(-2deg); -moz-transform: perspective(15px) rotateX(-2deg); -webkit-transform: perspective(15px) rotateX(-2deg); transform-origin: top; border-radius: 0 0 var(--fs10px) var(--fs10px); -moz-border-radius: 0 0 var(--fs10px) var(--fs10px); -webkit-border-radius: 0 0 var(--fs10px) var(--fs10px); filter: drop-shadow(2px 4px 6px rgba(var(--zpShadow),0.30)); display: flex; flex-flow: row-reverse; }
.zps-success:before { background-color: #35c577; -webkit-box-shadow: inset 0px 5px 4px -2px #35c577; box-shadow: inset 0px 5px 4px -2px #35c577;} 
.error:before { background-color: #ff3333; -webkit-box-shadow: inset 0px 5px 4px -2px #da3931; box-shadow: inset 0px 5px 4px -2px #da3931;} 
.zps-success .zps-success-link { margin-left: 5px; text-decoration: underline !important;} 
.error>div,
.zps-success>div { display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; white-space: nowrap;} 
.error:after { content: '!'; background-color: #ffcc66;color: #f33;font-size: 20px;margin-right: 7px;float: left;position: relative;top: 5px;border: #ffcc66 solid 1px;border-radius: 50%;width: 20px;height: 20px;font-weight: bold;display: inline-flex;align-items: center;justify-content: center; } 
.error-icon { color: #ffcc66; font-size: var(--fs16px); margin-right: 7px; margin-top: calc(var(--fs2px) * -1); }
.button-icon { color: rgb(var(--zpPrimary)); height: 30px; display: inline-flex; align-items: center; box-sizing: border-box; padding: 0 15px; cursor: pointer} 
.button-icon:not(:last-of-type) { border-right: rgb(var(--zpSecondaryBdr)) solid 1px} 
.icta { position: relative; z-index: 0; cursor: pointer} 
.icta:after { content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(var(--zpPrimary), 0.10); left: 0; top: 0; bottom: 0; right: 0; border-radius: 50%; z-index: 0; transform: scale(0); transition: .1s} 
.icta:hover:after { transform: scale(2)} 
.icta:before { position: relative; z-index: 1} 
.empty-state-container { width: 100%; text-align: center; margin: 0 auto; padding-top: 12vh} 
.empty-state-img { height: 250px; pointer-events: none; user-select: none; border: none; outline: var(--zpOutline); display: block; margin: 0 auto} 
.emptyscreen-h1 { font-size: var(--fs18px); font-family: var(--fontmedium); margin-bottom: 10px; display: block;} 
.emptyscreen-h1.alert-color { color: red} 
.emptyscreen-h4 { font-size: var(--fs14px); line-height: var(--fs24px); color: rgb(var(--zpOnDataLight)); margin: 0 auto; width: 48vw; display: block;} 
.link { color: rgb(var(--zpPrimary)); cursor: pointer; font-size: 13px; text-decoration: none} 
.link:hover { text-decoration: underline} 
.zps-setup-infonote { width: 100%; font-size: 14px; display: flex; align-items: flex-start; color: rgb(var(--zpOnDataLight)); margin-top: 25px; line-height: 22px; overflow-wrap: break-word} 
.zps-setup-infonote>i { color: rgb(var(--zpPrimary)); font-size: 17px; margin-right: 8px; position: relative; top: 3px} 
body[dir="rtl"] .zps-setup-infonote>i { margin-right: unset; margin-left: 8px;} 
.zps-setup-infonote.hide { display: none} 
.inline-info { font-size: 11px; margin-left: 5px; color: rgb(var(--zpPrimary)); cursor: default; padding-right: 1px} 
body[dir="rtl"] .inline-info { margin: 0 5px 0 0; padding: 0 0 0 1px;} 

/*Alert Popup*/ 
.zps-alert { position: fixed; background-color: rgba(var(--zpFreeze)); z-index: 12; top: 0 !important; bottom: 0; left: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: center;} 
.zps-alert.hide { display: none;} 
.zps-alert[type="warning"] { --zpAlertPrimary: 255, 78, 78; --zpAlertShadow: 189, 60, 62;} 
.zps-alert[type="info"] { --zpAlertPrimary: 255, 180, 0; --zpAlertShadow: 227, 146, 24;} 
.zps-alert[type="success"] { --zpAlertPrimary: 111, 186, 62; --zpAlertShadow: 85, 150, 94;} 
.zps-alert>.zps-alert-container { position: absolute; display: inline-block; background-color: rgb(var(--zpData)); width: 460px; max-height: 80vh; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box; text-align: var(--textLeft);} 
.zps-alert-container>.zps-alert-badge { min-width: 120px; max-width: 270px; padding: 0 22px; color: rgb(var(--zpOnPrimary)); position: absolute; top: -7px; left: 28px; height: var(--fs28px); line-height: var(--fs28px); text-align: center !important; background: transparent; z-index: 1;} 
body[dir="rtl"] .zps-alert-container>.zps-alert-badge { left: unset; right: 28px;} 
.zps-alert-container>.zps-alert-badge:before { content: ''; background-color: rgb(var(--zpAlertPrimary)); position: absolute; z-index: -1 !important; top: -1px; text-align: center !important; width: 100%; height: 41px !important; right: 0; bottom: 0; left: 0; z-index: 0; border: unset; border-left: 0; transform: perspective(16px) rotateX(-6deg); -moz-transform: perspective(16px) rotateX(-6deg); -webkit-transform: perspective(16px) rotateX(-6deg); transform-origin: top; border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; box-shadow: 4px 0px 5px -2px rgba(var(--zpShadow), .46), -4px 0px 5px -2px rgba(var(--zpShadow), .46); -moz-box-shadow: 4px 0px 5px -2px rgba(var(--zpShadow), .46), -4px 0px 5px -2px rgba(var(--zpShadow), .46);} 
.alert-badge-paper:before,
.alert-badge-paper:after { content: ''; position: absolute; height: 8px; top: -1px; z-index: -2; background: rgb(var(--zpAlertShadow));} 
.alert-badge-paper:before { width: 13px; border-radius: 80px 50px 0 0; left: -7px;} 
.alert-badge-paper:after { width: 18px; border-radius: 50px 60px 0 0; right: -7px;} 
.zps-alert-container .zps-alert-content { padding: 25px; height: 100%; display: flex; align-items: center; box-sizing: border-box;} 
.zps-alert-content>.alert-content-scroll { display: inline-block; overflow-x: hidden; overflow-y: auto; max-height: calc(80vh - 50px); margin-right: -25px; padding-right: 25px;} 
body[dir="rtl"] .zps-alert-content>.alert-content-scroll { margin-left: -25px; margin-right: unset; padding-left: 25px; padding-right: unset;} 
.alert-content-scroll>.alert-html { padding-top: 10px; font-size: var(--fs14px); line-height: var(--fs24px);} 
.alert-html+.c-checkbox { margin-top: 15px;} 
.alert-html+.c-checkbox [type="checkbox"]:not(:checked)+label:before { border: 1.5px solid rgba(var(--zpAlertPrimary), 0.6);} 
.alert-html+.c-checkbox [type="checkbox"]:checked+label:before { border: 1.5px solid rgb(var(--zpAlertPrimary)); background-color: rgb(var(--zpAlertPrimary));} 
.zps-warning-text { font-family: var(--fontmedium); font-size: var(--fs14px); line-height: var(--fs22px); margin: 10px 0 5px; color: rgb(var(--zpAlertPrimary));} 
.alert-content-scroll .alert-btn-group { position: -webkit-sticky; position: sticky; background-color: rgb(var(--zpData)); bottom: 0; padding-top: 10px; padding-bottom: 2px; margin-top: 30px;} 
.zps-alert-close { font-size: var(--fs10px); position: absolute; right: 15px; top: 15px; cursor: pointer; color: rgb(var(--zpPrimary));} 
body[dir="rtl"] .zps-alert-close { right: unset; left: 15px;} 
.zps-alert{position:fixed; background-color: rgba(var(--zpFreeze)); z-index:12;top:0 !important;bottom:0;left:0;right:0;margin:auto;display: flex;align-items: center;justify-content: center;}
.zps-alert, .zps-alert[type="warning"]{ --zpAlertPrimary: 255,78,78; --zpAlertShadow:189,60,62; }
.zps-alert[type="info"]{ --zpAlertPrimary: 255,180,0; --zpAlertShadow:227,146,24; }
.zps-alert[type="success"]{ --zpAlertPrimary: 111,186,62; --zpAlertShadow:85,150,94; }
.zps-alert > .zps-alert-container{position: absolute; display: inline-block; background-color: rgb(var(--zpData)); width: 460px; max-height: 80vh; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box;}
.zps-alert > .zps-alert-container > .zps-alert-badge{min-width: 120px; max-width:270px; padding: 0 22px; color:rgb(var(--zpOnPrimary)); position: absolute; top: -7px; left: 28px; height: var(--fs28px); line-height: var(--fs28px); text-align:center; background: transparent; z-index: 1; }
.zps-alert > .zps-alert-container > .zps-alert-badge:before { content: ''; background-color:rgb(var(--zpAlertPrimary)); position:absolute; z-index: -1 !important; top: -1px; text-align: center; width: 100%; height: 41px !important; right: 0; bottom: 0; left: 0; z-index: 0; border: unset; border-left: 0; transform: perspective(16px) rotateX(-6deg); -moz-transform: perspective(16px) rotateX(-6deg); -webkit-transform: perspective(16px) rotateX(-6deg); transform-origin: top; border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; box-shadow: 4px 0px 5px -2px rgba(var(--zpShadow),.46), -4px 0px 5px -2px rgba(var(--zpShadow),.46); -moz-box-shadow: 4px 0px 5px -2px rgba(var(--zpShadow),.46), -4px 0px 5px -2px rgba(var(--zpShadow),.46);}
.alert-badge-paper:before, .alert-badge-paper:after{ content: ''; position: absolute; height: 8px; top: -1px; z-index: -2; background:rgb(var(--zpAlertShadow)); }
.alert-badge-paper:before { width: 13px; border-radius: 80px 50px 0 0; left: -7px; }
.alert-badge-paper:after { width: 18px; border-radius: 50px 60px 0 0; right: -7px; }
.zps-alert-container .zps-alert-content{padding:25px; height:100%; display:flex; align-items:center; box-sizing:border-box;}
.zps-alert-container .zps-alert-content > .alert-content-scroll{display:inline-block; overflow-x: hidden; overflow-y: auto; max-height: calc(80vh - 50px); margin-right:-25px; padding-right:25px; }
.alert-content-scroll > .alert-html{ padding-top:10px; font-size:var(--fs14px); line-height:var(--fs24px); }
.alert-html + .c-checkbox{ margin-top:15px; }
.zps-alert .c-checkbox [type="checkbox"]:not(:checked) + label:before{ border:1.5px solid rgba(var(--zpAlertPrimary),0.6); }
.zps-alert .c-checkbox [type="checkbox"]:checked + label:before{ border: 1.5px solid rgb(var(--zpAlertPrimary)); background-color: rgb(var(--zpAlertPrimary)); }
.zps-warning-text{ font-family:var(--fontmedium); font-size:var(--fs14px); line-height:var(--fs22px); margin:10px 0 5px; color:rgb(var(--zpAlertPrimary)); }
.alert-content-scroll .alert-btn-group{ position:-webkit-sticky; position:sticky; background-color:rgb(var(--zpData)); bottom:0; padding-top:10px; padding-bottom:2px; margin-top:30px;}
.zps-alert-close{ font-size:var(--fs10px); position:absolute; right:15px; top:15px; cursor:pointer; color:rgb(var(--zpPrimary)); }
.zps-alert .zps-primary-button { background-color:rgb(var(--zpAlertPrimary)); border:rgb(var(--zpAlertPrimary)) solid 1px; }
.zps-alert .zps-primary-button[disabled] { color:rgb(var(--zpOnPrimary)); opacity:.5; }
.zps-alert .zps-secondary-button { color:rgb(var(--zpAlertPrimary)); border:rgb(var(--zpAlertPrimary)) solid 1px; }
.zps-alert-note{ font-size: var(--fs13-5px); color: rgb(var(--zpOnDataLight)); margin:20px 0; } 
.zps-alert .zps-primary-button { background-color: rgb(var(--zpAlertPrimary)); border: rgb(var(--zpAlertPrimary)) solid 1px;} 
.zps-alert .zps-primary-button[disabled] { color: rgb(var(--zpOnPrimary)); opacity: .5;} 
.zps-alert .zps-secondary-button { color: rgb(var(--zpAlertPrimary)); border: rgb(var(--zpAlertPrimary)) solid 1px;} 
.zps-alert-note { font-size: var(--fs13-5px); color: rgb(var(--zpOnDataLight)); margin: 20px 0;} 
.zpx-loader { position: absolute; height: 40px; left: 0; right: 0} 
.zpx-loader:after { content: ''; border-radius: 50%; position: absolute; z-index: 1; width: 20px; height: 20px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; animation: loading-spin 1s infinite linear; border: .25rem solid rgba(var(--zpPrimary), 0.6); border-top-color: rgba(var(--zpData), 0.1); box-sizing: border-box} 
.popuplist { padding: 10px 0 10px 15px; font-size: 13.5px; color: rgb(var(--zpOnData)); cursor: pointer} 
.popuplist:hover { background-color: rgb(var(--zpPrimaryHover))} 
.zpx-pop-container,
.zps-pop-container { position: absolute; z-index: 5; box-shadow: var(--zpDropDownShadow); -moz-box-shadow: var(--zpDropDownShadow); -webkit-box-shadow: var(--zpDropDownShadow); color: rgb(var(--zpOnSurface)); background-color: rgb(var(--zpPopupBase)); border-radius: 4px; -moz-border-radius: 4px; padding: 10px 0; text-align: var(--textLeft);} 
/* .mandatory-field:after { content: '*'; color: rgb(255, 0, 0); right: -7px;}  */

.mandatory-field::after {
    content: ' *';
    color: rgb(236, 72, 63);
    font-weight: bold;
}

/* When 'mandatorytext' is selected, show "Mandatory" text instead */
body[data-mandatory-format="mandatory text"] .mandatory-field::after {
    content: ' (Mandatory)';
    color: rgb(236, 72, 63);
    font-size: var(--fs12px);
}
body[dir="rtl"] body[data-mandatory-format="mandatory text"] .mandatory-field::after {
    content: ' (yrotadnaM)';
    color: rgb(236, 72, 63);
    font-size: var(--fs12px);
    margin-right: 2px;
}
/* When 'asterisk' is explicitly selected */
body[data-mandatory-format="asterisk"] .mandatory-field::after {
    content: ' *';
    color: rgb(236, 72, 63);
}
body[data-mandatory-format="red accent line"] {
    .mandatory-field::after {
        content: '' ;
    }

    .zps-form-field:has(.mandatory-field){
        .field-value-holder , textarea , div {
           border-left: 3px solid rgb(236, 72, 63);
           border-right: 0;
            @include border-radii(4px, 0, 0, 4px , '');
            body[dir="rtl"]{
                border-right: 3px solid rgb(236, 72, 63);
                border-left: 0;
            }
    }
   
    } 
}
/*Default Styles*/
a { text-decoration: none} 
.pointer { cursor: pointer} 
.posrel { position: relative} 
.possticky { position: sticky; position: -webkit-sticky;} 
.posabsonly { position: absolute} 
.table { display: table} 
.inlineBlock { display: inline-block} 
.jcc { justify-content: center} 
.flex { display: flex} 
.jcenter { justify-content: center} 
.align-center { text-align: center} 
.hide { display: none} 
.vat { vertical-align: top} 
.tac { text-align: center !important;} 
.tal { text-align: var(--textLeft);} 
.tar { text-align: var(--textRight);} 
.fr { float: right} 
.fl { float: left} 
.border-box { box-sizing: border-box} 
.w100per { width: 100%} 
.bugoflowh, .text-ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis} 
.font-semi-bold { font-family: "LatoSemiBold", Roboto, Helvetica, sans-serif;} 
.oflowauto { overflow: auto} 
.outlineNone { outline: var(--zpOutline)}
.primary-color{ color:rgb(var(--zpPrimary)); }


/* Extension Common Animations */

@-webkit-keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loading-spin {
    0% {
        transform: rotate(0deg)
    }

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

@keyframes shake-horizontal {

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

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    80% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }

    90% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
}