@font-face {
    font-family: 'Material Symbols Outlined';
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v160/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
    font-style: normal;font-weight: 100 700;font-display: inline;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Regular.woff2') format('woff2'),url('/assets/fonts/Gordita-Regular.woff') format('woff'),url('/assets/fonts/Gordita-Regular.ttf') format('truetype');
    font-weight: normal;font-style: normal;font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Bold.woff2') format('woff2'),url('/assets/fonts/Gordita-Bold.woff') format('woff'),url('/assets/fonts/Gordita-Bold.ttf') format('truetype');
    font-weight: bold;font-style: normal;font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Medium.woff2') format('woff2'),url('/assets/fonts/Gordita-Medium.woff') format('woff'),url('/assets/fonts/Gordita-Medium.ttf') format('truetype');
    font-weight: 500;font-style: normal;font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Italic.woff2') format('woff2'),url('/assets/fonts/Gordita-Italic.woff') format('woff'),url('/assets/fonts/Gordita-Italic.ttf') format('truetype');
    font-weight: normal;font-style: italic;font-display: swap;
}


body * {scrollbar-width:7px; scrollbar-color:#014254 transparent; -webkit-tap-highlight-color: transparent;}
body *::-webkit-scrollbar {width:7px;-webkit-appearance: none;}

body *::-webkit-scrollbar-track {background:transparent}
body *::-webkit-scrollbar-thumb {background-color:transparent; border-radius:4px; background-color: #014254;}


.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';font-weight: normal;font-style: normal;font-size: 24px;
    line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block; vertical-align:middle; white-space: nowrap;word-wrap: normal;direction: ltr;
    -webkit-font-feature-settings: 'liga';-webkit-font-smoothing: antialiased;
}
.msoF100 {font-variation-settings:'FILL'1,'wght'100;}
.msoF200 {font-variation-settings:'FILL'1,'wght'200;}
.msoF300 {font-variation-settings:'FILL'1,'wght'300;}
.msoF400 {font-variation-settings:'FILL'1,'wght'400;}
.mso100 {font-variation-settings:'FILL'0,'wght'100;}
.mso200 {font-variation-settings:'FILL'0,'wght'200;}
.mso300 {font-variation-settings:'FILL'0,'wght'300;}
.mso400 {font-variation-settings:'FILL'0,'wght'400;}
.mso500 {font-variation-settings:'FILL'0,'wght'500;}
.mso600 {font-variation-settings:'FILL'0,'wght'600;}


@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
button[data-icon=progress_activity],.button[data-icon=progress_activity] {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


* {box-sizing:border-box;-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;  outline:0;}

html,body {margin:0; padding:0; color:#d0f5ff; font-family:Gordita; font-weight:normal; font-size:14px; line-height:1.4; background: #014254; overflow:hidden;}
 /* touch-action: none; overscroll-behavior: none; */
p {margin:0; padding:0 0 10px 0;}
a {text-decoration: none; color:#BB9FF4;}


a, textarea, input[type=text], input[type=password], input[type=button], input[type=submit], input[type=number], input[type=tel], input[type=search], select, option,button {
    outline: 0;-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none; font-family: 'Gordita';
}
input[type=number] {-moz-appearance:textfield;}

/* FORM FIELDS */
.select {position: relative;display:block;}
select {border: 1px solid #005268; border-radius:4px; background:#005268; padding:10px 40px 10px 10px; width:100%; font-size:14px; color:#d0f5ff}
.select:after {
    cursor: pointer; position: absolute;right: 10px; top: 50%; transform:translate(0, -50%); z-index: 1; pointer-events: none; color:#d0f5ff;  
    font-size: 22px;font-family: 'Material Symbols Outlined';content: "expand_more";
    -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400;
}
textarea, input[type=text], input[type=password],input[type=number],input[type=tel],input[type=email],input[type=search] {
    width:100%;padding:10px;font-size:16px;display:block;border:1px solid #005268; border-radius:5px; background:#005268; color:#d0f5ff; font-family:Gordita;
}
textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=tel]:focus, select:focus {border:1px solid #005268}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,
select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {
-webkit-text-fill-color: #fff;-webkit-box-shadow: inset 0 0 0px 9999px transparent; transition: background-color 5000s ease-in-out 0s;background-color:transparent !important;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input::placeholder, textarea::placeholder {color:#d0f5ff; opacity:0.4} 
textarea {line-height:1.4;}

input[type=range] {-webkit-appearance: none;width: 100%;height:5px;background:#005268;outline:none;border-radius:3px;}
input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width:15px;height:15px;background:#d0f5ff; cursor: pointer;border-radius:50%;}
input[type=range]::-moz-range-thumb {width:15px;height:15px;background:#d0f5ff; cursor: pointer;}
input[type=range]:focus {outline: none;}
input[type=range]::-ms-track {width: 100%;cursor: pointer;background: transparent;border-color: transparent;color: transparent;}



fieldset {padding:0; margin:0; border:1px solid #007798; border-radius:5px; margin-bottom:10px; }
fieldset.flex {display:flex; align-items:center;}
fieldset.flex span {margin-top:-7px; margin-right:7px; cursor:pointer;}
fieldset legend {margin-left:10px; font-size:12px; padding:0 7px; color:#d0f5ff;}
fieldset input[type=text], fieldset input[type=number], fieldset input[type=tel], fieldset input[type=password], fieldset textarea, fieldset select {
    border:0;background:transparent; margin-top:-5px;-webkit-appearance: none; -moz-appearance: none; color:#fff; font-size: 18px;;
}
fieldset select option{
background-color: #005268; border:0;
}
fieldset .select:after {margin-top:-3px;}
fieldset:focus-within {}
fieldset:focus-within legend {}
fieldset textarea:focus, fieldset input[type=text]:focus, fieldset input[type=password]:focus, fieldset input[type=number]:focus, fieldset input[type=tel]:focus, fieldset select:focus {
    border:0;
}


/* POPUP TEXTAREA*/
.growTextArea {resize: none; overflow: hidden; min-height:100px;}
.enlargeTextArea textarea {resize:none;overflow: hidden; min-height:100px;touch-action:auto; font-size: 16px;}
.enlargeTextArea:focus-within {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:100dvh; max-height:400px; border-radius:10px; background:#005268; padding:50px 20px 20px 20px;
    touch-action:none; z-index:2; 
}



/* for below touch-action:pan-x; overflow-y:scroll; */
.enlargeTextArea:focus-within textarea {padding:0; border:0; background:transparent; resize: none; overflow: auto; height:100%; overscroll-behavior: none;}


.enlargeTextArea:focus-within:before {
    position:absolute; top:5px; right:7px; z-index:1; cursor: pointer;
    font-family:'Material Symbols Outlined';font-variation-settings:'FILL'1,'wght'600;font-weight: normal;font-style: normal;font-size:32px; content:'cancel'; color:#BB9FF4;
}

[data-device=tablet] .enlargeTextArea:focus-within {top:0; left:0; width:100vw; transform:unset; border-radius:0; max-height: unset;}  

@media only screen and (max-width: 600px) {
    .enlargeTextArea:focus-within {top:0; left:0; width:100dvw; transform:unset; border-radius:0; max-height: unset;}   
}



/* GLOBAL BUTTONS */
button,.button {
    display:inline-flex; justify-content:center; align-items:center; white-space:nowrap; border:0; padding:10px 20px; border-radius:30px; background:#BB9FF4; color: #014254; cursor:pointer; 
    font-family: 'Gordita'; font-size:16px; font-weight: 500; -webkit-transition: 0.35s;transition: 0.35s; 
}
button[data-icon] {padding:0; background:transparent; touch-action: manipulation;}
button[data-icon]:before {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'200;font-weight: normal;font-style: normal;font-size:48px;content:attr(data-icon);}
button[data-icon=crown]:before {content:'';background:#BB9FF4; width:20px; height:22px;-webkit-mask:url(/assets/images/crown.svg) no-repeat; mask:url(/assets/images/crown.svg) no-repeat; mask-size: auto 100%;}
span[data-icon]:before {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'200;font-weight: normal;font-style: normal;font-size:48px;content:attr(data-icon);}
label[data-icon]:before {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'200;font-weight: normal;font-style: normal;font-size:48px;content:attr(data-icon);}
div[data-icon]:before {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'200;font-weight: normal;font-style: normal;font-size:48px;content:attr(data-icon);}
a[data-icon]:before {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'200;font-weight: normal;font-style: normal;font-size:48px;content:attr(data-icon);}
button[data-icon][disabled] {cursor:default;opacity:0.5;}
button.btnRound {position:relative}
button.btnRound:before {position:absolute; font-size:24px;}
button.btnRound:after {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'200;font-weight: normal;font-style: normal;font-size:48px;content:'circle';}

.btnLng[data-icon] {background: #BB9FF4;color: #014254;padding: 3px 15px 3px 10px;margin-right:auto;font-size: 14px; margin-bottom:20px;}
.btnLng[data-icon]:before {margin-right:5px; font-size:24px;}


/* NOTIFICATIONS */
.notifBtn[data-icon] {/*position:absolute; top:20px; left:20px;*/ position:relative; width:35px; height:35px; padding:0; background:#BB9FF4; color:#034254; border-radius:50%;display:flex; justify-content: center; align-items: center;}
.notifBtn[data-icon]:before {font-variation-settings: 'FILL' 0, 'wght' 400; font-size:24px;}
.notifBtn[data-icon=notifications_active]:after {
    content:attr(data-count); border-radius:50%; background:red; color:#fff; height:10px; width:10px; display:flex; align-items:center; justify-content:center;
    position:absolute; right:-6px; bottom:-2px; font-size:9px; padding:3px; font-weight:bold;
}



.notificationsContainer {position:fixed; top:0; left:0; width:100dvw; height: 100dvh; background:rgba(0, 0, 0, 0.8); font-weight:normal; z-index:9; display:none;}

.notificationsContainer > div {display:flex; flex-direction: column; background: #002a36;width:100%; max-width:500px;}

.notificationsContainer .overflow {
    scrollbar-color:#014254 transparent; overscroll-behavior: none; overflow-x:hidden; overflow-y:auto; padding-bottom:10px; width:100%;
    width:100%; max-width:500px; height:calc(100% - 58px);
}
.notificationsContainer .overflow.swipe {animation: bounceInDown; animation-duration:1.2s;}
.notificationsContainer .overflow.swipeOut {animation: bounceOutUp; animation-duration:1.2s;}
.notificationsContainer .notifications {
    background:#fff; padding:10px; width:calc(100% - 20px); margin:10px 10px 0 10px; border-radius:15px;
    display: flex;align-items: center;position: relative;-webkit-user-select: none;user-select: none;cursor: grab;position: relative;

     color:#d0f5ff; background:#014254;
}
.notificationsContainer .notifications.swipe {animation: slideOutRight; animation-duration:0.3s;} 
.notificationsContainer .notifications > a {display:flex; color:#d0f5ff; align-items: center; width:100%;}
.notificationsContainer .notifications .img {width:40px; height:40px; border-radius: 50%; background:#fff; display:flex; justify-content:center; align-items:center;}
.notificationsContainer .notifications .img img {width:40px; height:auto; border-radius:50%;}
.notificationsContainer .notifications[data-type=account] .img img {padding:7px;}
.notificationsContainer .notifications .img img[src*="person.svg"], .notificationsContainer .notifications .img img[src*="company.svg"] {padding:8px; background:#046d8a;}

.notificationsContainer .notifications .img:has(> img[src*="person.svg"]) { background:#046d8a; }
.notificationsContainer .notifications .img:has(> img[src*="company.svg"]) { background:#046d8a; }

.notificationsContainer .notifications .text {padding:0 10px; font-size:14px; flex:1 1 auto;} 

.notificationsContainer .notifications span {display:block; font-size:10px; margin-top:5px;}
.notificationsContainer .notifications button[data-icon=cancel]:before {font-variation-settings: 'FILL' 0, 'wght' 200; font-size:24px; color:#BB9FF4;}

.notificationsContainer .none {height:100%;display: flex;align-items: center; justify-content: center; color: #fff;animation: bounceInDown; animation-duration:1.2s;}
.notificationsContainer .none.swipeOut {animation: bounceOutUp; animation-duration:1.2s;}
.notificationsContainer .none span {padding:20px; border-radius:15px; background:#014254;}

.notificationsContainer button[data-icon="keyboard_arrow_up"] {background: #BB9FF4;width: 38px;height: 38px; margin:10px auto;}
.notificationsContainer button[data-icon="keyboard_arrow_up"].swipe {animation: bounceInUp; animation-duration:1.4s;}
.notificationsContainer button[data-icon="keyboard_arrow_up"]:before {font-variation-settings: 'FILL' 0, 'wght' 300; font-size:24px;}





/* NAVIGATION BUTTON & MENU */
.navBtn {/*position:absolute; top:20px; right:20px;*/ width:35px; height:35px; padding:0; background:#BB9FF4; color:#034254;  border-radius:50%;display:flex; justify-content: center; align-items: center;}
.navBtn span {display:block;line-height:1; font-size:14px; font-weight:500;text-transform: uppercase;}
.navMenu {position:fixed; top:60px; right:10px; width:100%; max-width:300px; max-height:calc(100dvh - 70px); background:#002a36; border-radius:10px; overflow:hidden; display:none; z-index:9;}
.navMenu .overflow {max-height: calc(100dvh - 180px); overflow: auto;}
.navMenu > div {height:100%; overflow:auto; padding-bottom:10px;}
.navMenu a {padding:10px 15px; display:block; color:#d0f5ff; cursor:pointer; -webkit-transition: 0.2s;transition: 0.2s;}
.navMenu a.profile {padding:20px; display: flex; align-items: center; border-bottom: 1px solid #034254; margin-bottom:10px;}


.navMenu a.profile .img { width:55px; height:55px; padding:0; background:#034254; color:#fff; border-radius:50%;display:flex; justify-content: center; align-items: center; margin-right:10px;}
.navMenu a.profile .img span {display:block;line-height:1; font-size:24px;}
.navMenu a.profile .img img {width:55px; height:55px; border-radius:50%;}
.navMenu a.profile .img img[src*="person.svg"] {padding:10px;}


.navMenu a.profile .txt {width:calc(100% - 65px); font-size:12px; line-height:1.4;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.navMenu a.profile .txt span {display:block; font-size:16px;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.navMenu a:hover {background:#001e26}
.navMenu .lastChild {background:#034254; height:1px; margin:10px 0;}


/* ELLIPSIS MENU DROP */
.ellipsis {position: relative; color: #fff;display:flex;align-items: center;justify-content: space-between;}
.ellipsis button[data-icon=more_vert], .ellipsis button[data-icon=more_horiz] {width: 48px;text-align: center;}
.ellipsis button[data-icon=more_vert]:before, .ellipsis button[data-icon=more_horiz]:before {font-variation-settings:'FILL'0,'wght'400; color:#BB9FF4; font-size:24px;}
.ellipsisContainer.ellipsis {display:block; position:relative;}
.ellipsisContainer.ellipsis button[data-icon=more_vert], .ellipsisContainer.ellipsis button[data-icon=more_horiz] {position:absolute; top:0; right:0; width:auto;}

.ellipsis-drop {position:absolute; right:0; top:100%; background:#fff; padding:5px 0; z-index:1;border-radius: 5px; font-weight:500; overflow: hidden; display:none;}
.ellipsis-drop a {display:block; font-size:14px;padding:5px;padding: 7px 15px;white-space: nowrap; color:#000;-webkit-transition: 0.35s;transition: 0.35s; cursor:pointer;}
.ellipsis-drop a:hover {background:#F0F2F5;}
.ellipsisContainer.ellipsis .ellipsis-drop {top:30px; bottom:unset;}


/* ALERTS & POPUPS */
#bottomAlert {position:fixed; bottom:20px; left:0; width:100%; z-index:1; display:none; }
#bottomAlert > div {display:flex; align-items: center; justify-content: center; margin:0 20px;} 
#bottomAlert div > div {background:#000; color:#fff; padding:20px; border-radius:20px;}
#bottomAlert.open {display:block;animation: bounceInUp; animation-duration: 1.5s;}
#bottomAlert.close {animation: bounceOutDown; animation-duration: 1.5s;}

#infoAlert {position:fixed; top:0; left:0; width:100dvw; height: 100dvh;background:rgba(0, 0, 0, 0.7); align-items: flex-end; justify-content: center; padding:20px; z-index:2; display:none; }
#infoAlert > div {background:#014254; color:#d0f5ff; font-weight: normal; line-height:1.4; font-size:16px;padding:10px; border-radius:20px; max-width:400px;}
#infoAlert.open {display:flex;}
#infoAlert.open > div {display:block;animation: bounceInUp; animation-duration: 1.2s;}
#infoAlert .btnLng {background: #BB9FF4;color: #014254;padding: 3px 15px 3px 10px;margin: 0 auto;font-size: 14px;}
#infoAlert .btnLng:before {font-size:24px; margin-right:7px;font-variation-settings:'FILL'1,'wght'400;}
#infoAlert > div > div  {scrollbar-color:#046d8a transparent; max-height:400px;overflow: auto; padding:10px;}

#infoAlert .title {font-size:32px; font-weight:500;}
#infoAlert strong {font-weight: 500;}
#infoAlert .smallNote {font-size:12px;}
#infoAlert .btnContainer {margin-top:14px;}
#infoAlert .btnContainer .primary {margin-right:10px;}
#infoAlert .btnContainer .secondary {background:transparent; border:1px solid #BB9FF4; color:#BB9FF4}

#infoAlert.large {padding:10px;}
#infoAlert.large > div > div {max-height:calc(100dvh - 100px);}
#infoAlert ul {margin:0; padding:0 0 0 20px;}
#infoAlert ul li {padding-bottom:10px;}

/*== UPGRADE POPUP ==*/
.upgradePopupContainer {
    position:fixed; top:0; left:0; width:100dvw; height: 100dvh; display:flex; flex-direction: column; align-items:center; justify-content:center; 
    background:rgba(0, 0, 0, 0.9); color: #014254; font-weight:normal; display:none; 
}
.upgradePopupContainer .upgradePopup {
    width:100%; max-width:350px; background:#014254; color:#fff; padding:30px 10px 20px 10px; position:relative; text-align:center; border-radius:10px;
}
.upgradePopupContainer .upgradePopup button[data-icon=close] {position:absolute; top:5px; right:5px;}
.upgradePopupContainer .upgradePopup button[data-icon=close]:before {font-variation-settings: 'FILL' 0, 'wght' 400; font-size:24px; color:#BB9FF4;}
.upgradePopupContainer .upgradePopup .title {font-weight:500; font-size:18px;}
.upgradePopupContainer .upgradePopup .upgradeBtn {
    display:inline-flex; justify-content: center; padding:7px 10px;background:#BB9FF4; color:#034254; border-radius:10px; width:100%; max-width:250px; 
    margin-bottom:10px; font-weight:500; font-size:16px; 
    }
.upgradePopupContainer .upgradePopup .footer {font-size:12px;}




/*== TOOLTIP HOVER ==*/
.toolTip {cursor: help;position: relative;display: inline-block; vertical-align: text-bottom; margin-left: 5px; font-weight: normal !important;}
.toolTip::before,.toolTip::after {left: 50%;opacity: 0;position: absolute;z-index: -100;box-sizing: inherit;}
.toolTip:hover::before,.toolTip:focus::before,.toolTip:active::before,.toolTip:hover::after,.toolTip:focus::after,.toolTip:active::after {
    opacity: 1;transform: scale(1) translateY(0); z-index: 100; box-sizing: inherit;
}
/*== pointer tip ==*/
.toolTip::before {
    border-style: solid;border-width: 1em 0.75em 0 0.75em;border-color: #BB9FF4 transparent transparent transparent; bottom:122%; content:""; margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s; transform: scale(.6) translateY(-90%); box-sizing: inherit;
}
.toolTip:hover::before,.toolTip:focus::before ,.toolTip:active::before {transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;box-sizing: inherit;}
/*== speech bubble ==*/
.toolTip::after {
    background: #BB9FF4; border-radius:.25em; bottom: 180%; color: #000; content: attr(data-tip); margin-left:-14.75em; padding:1em; width:17.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; transform: scale(.6) translateY(50%); box-sizing: inherit;  font-size:12px; font-weight: 500;;
}
.toolTip:hover::after,.toolTip:focus::after,.toolTip:active::after {transition:all .65s cubic-bezier(.84,-0.18,.31,1.26); box-sizing: inherit;}






/* LOADING */
#loading {position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(1,66,84,0.9);z-index:99999;display:none;}
#loading > div {display:flex; align-items:center; justify-content:center; height:100vh; width:100vw; text-align:center;}
#loading .sqareLoading {position: relative;width:80px;height:80px; margin:0 auto;}
#loading .sqareLoading span {position: absolute;display: block;width: 40%;height: 40%;border-radius: 50%;animation: sqareLoading 2s infinite ease-in-out;}
#loading .sqareLoading .one {background:#BB9FF4; animation-delay: 1.5s;}
#loading .sqareLoading .two {background:#007798; animation-delay: 1s;}
#loading .sqareLoading .three {background:#BB9FF4; animation-delay: 0.5s;}
#loading .sqareLoading .four {background:#007798;}
@keyframes sqareLoading {
  0% {transform: translate(0%);border-radius: 50%;} 25% {transform: translate(150%) scale(0.5);border-radius: 0%;}
  50% {transform: translate(150%, 150%);border-radius: 50%;} 75% {transform: translate(0, 150%) scale(0.5);border-radius: 0%;}
}




/* PERCENTAGES */
.percentageRectangle {margin:0 auto 20px auto; width:100%; height:100px; position:relative;}
.percentageRectangle svg {overflow:visible; width:100%; height:100%;}
.percentageRectangle .background {stroke-width: 3px;fill: transparent;stroke: #007798;}
.percentageRectangle .shape1, .percentageRectangle .shape2 {stroke-width: 3px; fill: transparent;stroke: #BB9FF4;}
.percentageRectangle .shape1 {stroke-dasharray: 0 700; stroke-dashoffset: -110; transition:stroke-width 1s,   stroke-dashoffset 1s,   stroke-dasharray 1s; }
.percentageRectangle .shape2 {stroke-dasharray: 0 700; stroke-dashoffset: 0;    transition:stroke-width 0.2s, stroke-dashoffset 0.2s, stroke-dasharray 0.2s;  }
.percentageRectangle text {font-size: 22px; fill:#fff; font-weight: normal;}

.lpaPercentage {width:70px; position:relative; border:2px solid #007798; border-radius:10px; margin-left:20px; margin-top:20px;}
.lpaPercentage .bar {position:absolute; bottom:-2px; width:calc(100% + 4px); left:-2px; border-radius:10px; height:0%; background:#BB9FF4; transition: 0.5s;}
.lpaPercentage .text {position:absolute; bottom:10px; font-weight:500; color:#fff; left:50%; transform: translateX(-50%); font-weight: 500; font-size:18px;}


/* POPUP PICKER */

#contactPickerContainer .contactPickerForm {padding:10px; background-color:#014254; flex:1 1 auto; overflow:auto;color: #d0f5ff; display:none;scrollbar-color:#046d8a transparent; max-height:300px;}
.popupPicker .footerForm {background-color:#BB9FF4;padding:20px 20px; display:flex; justify-content: flex-end; border-radius:0 0 10px 10px; display:none;}
.popupPicker .footerForm button {background:transparent; color:#014254; padding:5px 10px;}

.popupPicker {
    position:fixed; top:0; left:0; width:100dvw; height: 100dvh; display:flex; flex-direction: column; align-items:center; justify-content:center; 
    background:rgba(0, 0, 0, 0.7); color: #014254; font-weight: normal; z-index:1;
}
.popupPicker input {font-size:16px;}

.popupPicker > div {width:280px; max-height:92dvh; display: flex;flex-direction: column;}
.popupPicker .header {background-color:#BB9FF4; font-size:36px; padding:20px 20px; color:#fff; font-weight:500; border-radius:10px 10px 0 0;}

.popupPicker .footer {background-color:#BB9FF4;padding:20px 20px; display:flex;  border-radius:0 0 10px 10px;}
.popupPicker .footer button {background:transparent; color:#014254; padding:5px 10px;}
.popupPicker .footer button#contactPickerCancel {margin-left:auto;}
.popupPicker .footer button#contactPickerAdd:before {
    color: #BB9FF4; background: #014254; font-size:24px; border-radius:50%; width:28px; height:28px; font-variation-settings:'FILL'0,'wght'300;
}


.popupPicker .content {background-color:#014254; flex:1 1 auto; overflow:auto; max-height:300px;}
.popupPicker .content > div {cursor:pointer; display:flex; align-items:center; padding:10px; border-bottom:1px solid #005268; font-size:16px;color: #d0f5ff;}
.popupPicker .content > div[data-selected=true] {background:#005268; border-color: #014254;}
.popupPicker .content > div[data-selected=true]:after {
    font-family:'Material Symbols Outlined';font-variation-settings:'FILL'1,'wght'400;font-weight: normal;font-style: normal;font-size:24px;content:'check_circle'; color:#BB9FF4;
}
.popupPicker .content > div button {display:none}
.popupPicker .search {position:relative; padding:10px 0; background:#014254;border-bottom: 1px solid #005268;}
.popupPicker .search input {color:#000; background:transparent;border-radius:0; border:0; font-size:18px;color: #d0f5ff; width:auto; margin-right:100px;}
.popupPicker .search input:hover,.charityPickerSearch input:focus {border:0;}
.popupPicker .search button {position:absolute;background:#BB9FF4; color:#014254; top:13px;right:10px;width:35px;height:35px;display:flex;align-items:center;justify-content:center;}
.popupPicker .search button:before {font-size:24px; font-variation-settings: 'FILL' 0, 'wght' 400;}
.popupPicker .search button[disabled] {opacity:1;}
.popupPicker .dropdown {border-bottom: 1px solid #014254;}
.popupPicker .dropdown select {border:0; border-radius:0; font-size:18px; padding:15px 10px;}

.popupPicker .form {padding:10px; background-color:#014254; flex:1 1 auto; overflow:auto;color: #d0f5ff; display:none;}
.popupPicker .form input[type=text], .popupPicker .form input[type=number] {text-transform: uppercase; margin-bottom:10px;}
.popupPicker .form textarea {margin-bottom:10px;}
.popupPicker .form .formToggle {display:flex; align-items: center; margin-top:-10px;}
.popupPicker .form .formToggle span {margin-right:10px;}
.popupPicker .form .formToggle label {margin-left:auto; cursor:pointer;}
.popupPicker .form .removeContact {color:#BB9FF4;}
.popupPicker .content, .popupPicker .form {scrollbar-color:#046d8a transparent;}

/* contact popup */
.popupPicker.contactPopup .content > div .name {width:calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.popupPicker.contactPopup .content > div .name span {display:block; font-size:12px;}
.popupPicker.contactPopup .content > div[data-selected=true] .name {width:calc(100% - 74px);}
.popupPicker.contactPopup .content > div .img {width:40px; margin-right:10px;}
.popupPicker.contactPopup .content > div .img img {width:40px; height:40px; border-radius:50%;}

/* charity popup */
.popupPicker.charityPopup .content > div .name {text-transform: lowercase; text-transform:capitalize}
.popupPicker.charityPopup .content > div[data-selected=true] .name {width:calc(100% - 24px);}
.popupPicker.charityPopup .content > div .name .charityName {font-weight:500; font-size: 14px; text-transform:uppercase}
.popupPicker.charityPopup .content > div .name .charityNo {display:block; font-size:12px;}

.popupPicker.contactPopup .content > div .account {width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height:34px;}
.popupPicker.contactPopup .content > div[data-selected=true] .account {width: calc(100% - 24px);}

/* contact container charity container */
.contactContainer .contact, .charityContainer .charity {display:flex; align-items: center; padding-bottom:10px; margin-bottom:10px;border-bottom:1px solid #005268;}
.contactContainer .contact:last-child, .charityContainer .charity:last-child {border:0;}
.contactContainer .contact .img {width:40px; margin-right:10px;}
.contactContainer .contact .img img {width:40px; height:40px; border-radius:50%;}
.contactContainer .contact .img img[src*="person.svg"] {width:40px; height:40px; border-radius:50%; padding:5px; background:#007798}

.contactContainer .contact .name {width:calc(100% - 98px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.contactContainer .contact .name span {display:block; font-size:12px;}
.contactContainer .contact button, .charityContainer .charity button {width:48px;}
.contactContainer .contact button:before, .charityContainer .charity button:before {font-size:24px;}
.charityContainer .charity .name {width:calc(100% - 48px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.charityContainer .charity .name .charityName {font-weight:500; font-size: 14px; text-transform:uppercase}
.charityContainer .charity .name .charityNo {display:block; font-size:12px;}




/* FLAGS */
.phoneFlagContainer {display:flex;}
.phoneFlagContainer .flagContainer {width:38px; padding:7px 0 7px 7px; position:relative;}
.phoneFlagContainer .flagActive {position:relative;}
.phoneFlagContainer img {max-width:100%; display:block; border-radius:4px;}
.phoneFlagContainer fieldset {width:calc(100% - 88px);}

#flaglistPopup {display:flex; position:fixed; top:0; left:0; width:100dvw; height:100dvh; align-items:center; justify-content:center; background:rgba(1, 1, 1, 0.7); display:none;}
#flaglistPopup > div {background:#013847; border-radius:5px;}



.flagList {position: absolute;top: 100%; border-radius:5px; background:#013847; overflow:hidden; width:305px; z-index:2; display:none;}
.flagList > div {}
.flagList .flagSearch {padding:5px;}
.flagList .flagSearch input {padding:5px 10px; font-size:14px; margin-top:3px;background: transparent; border: 0;}
.flagList .flagCountries {height:100%; max-height:200px; overflow:auto; width:280px; height:200px; scrollbar-color:#006682 transparent;}
.flagList .flagCountries > div {display:flex; align-items:center; padding:10px; cursor:pointer;}
.flagList .flagCountries > div:hover {background:#005268;}
.flagList .flagCountries > div .img {width:30px; margin-right:10px;}
.flagList .flagCountries > div .txt {width:calc(100% - 50px); white-space:nowrap;color: #d0f5ff;}

#missingInformationSubmit .flagList {left:-35px;} 


.siteContainer {display:flex; flex-direction:column; height:calc(var(--vh, 1vh) * 100); background: #014254;}
header {display:flex; padding:20px;background: #014254; height:102px; border:0;}
header .headerNav {flex:1 1 auto; max-width:1024px; margin:0 auto; display:flex; align-items:baseline;}
header .headerNav .pageTitle {width: 100%;font-size: 16px;color: #2c8aa3;font-weight: 500; display:none;}
header .headerLogo {color:#BB9FF4; font-weight: bold; font-size:28px; width:150px;}
header .headerLinks {display:flex; align-items: center;}
header .headerLinks a {
    display:inline-flex; justify-content:center; align-items:center; white-space:nowrap; border-radius:30px; cursor:pointer; 
    font-family: 'Gordita'; font-weight: 500; -webkit-transition: 0.35s;transition: 0.35s;
    color:#fff; border:1px solid #007798; background:#013847; font-size:12px; padding:3px 15px 3px 10px; margin-right:7px;
}
header .headerLinks a:before {color:#fff; font-size:18px; font-variation-settings:'FILL'0,'wght'100; margin-right:5px;}
header .headerLinks button[data-icon=expand_circle_right] {border:0; background:transparent; padding:0; margin-right:7px;}
header .headerLinks button[data-icon=expand_circle_right]:before {font-size:24px; color:#007798; font-variation-settings:'FILL'0,'wght'200; margin:0;}
header .headerLinks .headerMore {width:0; display:flex; overflow:hidden;}

section {flex:1 1 auto; display:flex; align-items:center;max-width: 1024px;width: 100%;margin: 0 auto; height:calc(100vh - 102px)}

/* DASHBOARD */

.dashboardContainer {display:flex; flex-wrap: wrap; background:#BB9FF4; padding:30px; border-radius:30px; width:100%;}
.dashboardContainer .dashboardRow {display:flex; flex-wrap:wrap; justify-content:space-around;} 
.dashboardContainer .dashboardRow a {background: #014254; padding:20px; position:relative; text-align: center; display:flex; flex-direction:column; width:calc(50% - 10px);  color: #d0f5ff; border-radius:20px; margin-bottom:10px;}
.dashboardContainer .dashboardRow a .title {font-size:18px; color:#fff; font-weight:500;}
.dashboardContainer .dashboardRow a .number {display:flex; flex: 1 1 auto; align-items:center; justify-content: center; font-size: 48px; margin:10px 0;}

.dashboardContainer .dashboardRow a .number button {margin-left:10px;}
.dashboardContainer .dashboardRow a .btnContainer {display:flex;} 
.dashboardContainer .dashboardRow a .btnContainer .btn {flex:1 1 auto}
.dashboardContainer .dashboardRow a [data-icon]:before {color:#007798; font-size:48px;}


.dashboardContainer .dashboardRow a [data-icon=help] {position:absolute; top:5px; right:5px;}
.dashboardContainer .dashboardRow a [data-icon=help]:before {color:#BB9FF4; font-size:24px;font-variation-settings:'FILL'1,'wght'400;}


.dashboardContainer .dashboardRow a [data-icon=error] {position:absolute; top:5px; left:5px;}
.dashboardContainer .dashboardRow a [data-icon=error]:before {color:#BB9FF4; font-size:24px;font-variation-settings:'FILL'1,'wght'400;}




.dashboardContainer .percentageContainer {flex: 1 1 auto; display: flex;align-items: center;}
.dashboardContainer .percentageRectangle {height:45px; margin:0 auto; max-width:150px;}
.dashboardContainer .percentageRectangle svg {height:45px;}
.dashboardContainer .percentageRectangle .background {stroke-width:2px;}
.dashboardContainer .percentageRectangle .shape1, .dashboardContainer .percentageRectangle .shape2 {stroke-width:2px;}
.dashboardContainer .percentageRectangle text {font-weight:normal; font-size:12px;}
.dashboardContainer .percentageRectangle .shape1 {stroke-dasharray: 0px, 370px; stroke-dashoffset: -52px;}
.dashboardContainer .percentageRectangle .shape2 {stroke-dasharray: 0px, 370px; stroke-dashoffset: 0;}

.dashboardContainer .dashLPA {flex:1 1 auto; display: flex; justify-content:space-between; flex-wrap: wrap; margin:10px auto; width:100%; max-width:150px; min-height:80px;}
.dashboardContainer .dashLPA .lpaPercentage {margin-top:0; margin-left:0; height:calc(100% - 18px); width:calc(50% - 5px); border-radius:5px;}
.dashboardContainer .dashLPA .lpaPercentage .bar {border-radius:5px;}
.dashboardContainer .dashLPA .lpaPercentage .text {font-size:12px; font-weight:500;}
.dashboardContainer .dashLPA .barTitles {font-size:12px; width:calc(50% - 5px); font-weight:normal; text-align:center; margin-top:3px;}

/* .slick-dotted.slick-slider {margin-bottom:0;}
.slick-dots {position:static; margin-top:10px;}
.slick-dots li {margin:0;}
.slick-dots li button {padding:0;}
.slick-dots li button:before {font-size:12px; color:#fff;}
.slick-dots li.slick-active button:before { color:#fff;}
.dashboardContainer .slick-dots {margin-top:0;}
.dashboardContainer .slick-dots li button:before {color:#014254;}
.dashboardContainer .slick-dots li.slick-active button:before {color:#014254;} */


.dashboardContainer .slick-list {height:calc(100% - 27px)}
.dashboardContainer .slick-track {height:425px;}

.slick-dots > li:only-child {display: none;} 

.missingInformationContainer .slick-dots li button {color:#BB9FF4;}  


/* ACCOUNTS */

.contactsSection .accountFolders .folders.none {display: flex; flex-direction: column; justify-content:center;}


.accountsContainer {display:flex; background:#BB9FF4; padding:30px; border-radius:30px; width:100%; height: calc(100dvh - 180px); max-height:600px; position:relative;}


.accountFolders {width:calc(50% - 20px); overflow:auto; padding-right:10px; margin-right:20px;}
.accountFolders .folders {background:#014254; border-radius:10px; padding:15px 10px 15px 20px; margin-bottom:5px;}
.contactsSection .accountFolders .folders {min-height:100%; margin-bottom:0;}
.accountFolders .folders > .head {position: relative; color: #fff;display: flex;align-items: center;justify-content: space-between; cursor:pointer; font-size:18px;}
.accountFolders .folders > .head .count {
    margin-left: auto; margin-right: 10px;background: #00303d;line-height: 1;font-size: 12px;padding: 5px;border-radius: 50%;aspect-ratio: 1 / 1;color: #1486a5; min-width: 22px;
    display: flex;justify-content: center;align-items: center;
}
.accountFolders .folders > .head .count:empty {display:none;}
    
.accountFolders .folders > .head button[data-icon]:before {font-variation-settings:'FILL'0,'wght'300; color:#BB9FF4; font-size:32px; }
.accountFolders .folders > .head .button {padding:5px 10px; font-size: 12px; text-transform: uppercase; margin:10px 0;}
.accountFolders .body {display:none;}
.accountFolders .body a.button {font-size:12px; padding:5px 10px;}

.accountFolders .account {padding:10px 0; border-bottom:1px solid #005268; font-weight: normal; cursor:pointer;} 
.accountFolders .account:last-child {border-bottom:0;} 
.accountFolders .account .head span {overflow: hidden; text-overflow: ellipsis;white-space: nowrap; width:calc(100% - 48px); font-size:18px;}
.accountFolders .account .head:has(.img) span {width:calc(100% - 55px); font-size:18px;}
.accountFolders .account .head:has(.img) span span {display:block; font-size:12px;}
.accountFolders .account .head span.img {display: flex;align-items: center;justify-content: center;width:45px;height:45px;padding-right: 0;margin-right:10px; border-radius:50%; padding:1px; background:#000;}
.accountFolders .account .head span.img img {width:100%;height:100%;object-fit: cover;object-position: center;border-radius: 50%;}
.accountFolders .account .head span.img img[src*="person.svg"] {background:#007798;padding: 7px;}

.accountView {position:relative; width:50%;}
.accountViewPlaceholder {display:flex ;flex-direction:column; height:100%; align-items:center; justify-content:center; color:#014254;}
.accountViewPlaceholder i {font-size:72px;}
.accountViewPlaceholder div {font-size:22px; margin-bottom:10px;}
#addContactBtnDT {background:#014254;color:#BB9FF4; padding:5px 20px 5px 10px;}
#addContactBtnDT:before {font-variation-settings:'FILL'0,'wght'300; font-size:24px; margin-right:5px;}
.resetFormBtn {color:#014254; margin-top: 20px; font-weight: 500; cursor:pointer;}


.companyDropDown {width:100%; max-height:200px; overflow:auto;display:none;scrollbar-color:#007798 transparent;}
.companyDropDown > div:hover {background:#007798;}
.companyDropDown .company {cursor:pointer; display:flex; align-items:center; padding:10px; width:100%; }
.companyDropDown .coInfoSearch {}
.companyDropDown .company img {width:34px; display:block; margin-right:10px; border-radius:3px;}
.companyDropDown .company .domainSearch {font-size:12px;}

#companyName {display:flex; align-items:center;}
#companyName input {flex:1 1 auto;}
#companyImageHolder img {height:24px; border-radius:5px; margin-left:10px;}

.searchCompanies {background:#fff; margin:0 0 10px 0; padding:20px; border-radius:10px;}
.searchCompanies input[type=text] {position:relative;background:#f6f9fc;border-radius:20px; border:0;}

.noContactsAccounts {display: flex; flex-direction: column; justify-content: center; height:100%;font-size: 18px; line-height: 1.4; font-weight: normal; padding:10px; text-align:center;}
.noContactsAccounts .warning {background:#005268; padding: 30px; border-radius: 10px; font-size: 14px;}




#openPhotoGallery {position:fixed; top:0; left:0; width:100vw; height:calc(var(--vh, 1vh) * 100); background:#014254; display:none; z-index:999999;}
#openPhotoGallery .throwInSlick {}
#openPhotoGallery a {width:100vw; height:calc(var(--vh, 1vh) * 100); cursor:default; display:flex; align-items:center; overflow:hidden;}
#openPhotoGallery a img {max-height:calc(var(--vh, 1vh) * 90); max-width:90vw; margin:0 auto; /*transition: all 0.3s ease-in;*/}
#openPhotoGallery .opgHeader {position:fixed; top:0; left:0; width:100vw; color:#fff; z-index:99999; display:flex; background:rgba(0, 0, 0, 0.3);}
#openPhotoGallery .opgHeader .opgCount {flex:1 1 auto; padding:10px 15px; font-size:14px;}
#openPhotoGallery .opgHeader .opgControls {margin-left:auto; display:flex; align-items:center;}
#openPhotoGallery .opgHeader .opgControls i {padding:10px 10px; cursor:pointer; font-size:24px; user-select: none;}
#openPhotoGallery .opgHeader .opgControls i.plus.disabled {cursor:not-allowed; opacity:0.5}
#openPhotoGallery .opgHeader .opgControls i.minus.disabled {cursor:not-allowed; opacity:0.5}
#openPhotoGallery .slick-slide {text-align:center;height: calc(var(--vh, 1vh) * 100);}
#openPhotoGallery .slick-prev, #openPhotoGallery .slick-next { background:rgba(0, 0, 0, 0.3); padding:7px 13px; height:auto; width:auto;}
#openPhotoGallery .slick-prev {left:10px; z-index:99999;}
#openPhotoGallery .slick-next {right:10px; z-index:99999;}



.itemView {border-radius:30px 30px 0 0; position: absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; background:#BB9FF4; display:none;}
.itemView .nav {position:relative; display:flex; justify-content:space-between;}
.itemView .nav button {background: #014254;width: 35px;height: 35px;}
.itemView .nav button:before {font-size:24px; color:#BB9FF4;}
.itemView .nav button[data-icon=arrow_back]:before {font-variation-settings:'FILL'0,'wght'600;}
.itemView .nav button[data-icon=more_vert]:before {font-variation-settings:'FILL'0,'wght'400;}
.itemView .nav button[data-icon=delete]:before {font-variation-settings:'FILL'0,'wght'300;}
.itemView .logo {
    position: absolute; top: -70px;transform: translate(-50%,0);left: 50%; background:#fff; border-radius:50%; width:80px; height:80px; padding:20px;
    display:flex; align-items:center; justify-content:center;
}
.itemView .logo img {max-height:100%; max-width:100%; border-radius:10px;}
.itemView .logo img[src*="person.svg"] {background:#007798;padding: 7px;}
.itemView .logo img[src*="company.svg"] {background:#007798;padding: 15px;}
.itemView .logo img[src*="document.svg"] {background:#007798;padding: 15px;}
.itemView .logo img[src*="house.svg"] {background:#007798;padding: 15px;}
.itemView .logo.contactLogo {padding:2px;background:#014254;}
.itemView .logo.contactLogo img {width:100%;height:100%;object-fit: cover;object-position: center;border-radius: 50%;}
.itemView .logo.contactLogo #imageEditBtn ,.itemView .logo.contactLogo #imageDeleteBtn {
    position:absolute; bottom:0; right:0; width:28px; height:28px; cursor:pointer;padding: 5px;border-radius: 50%; background: #014254; display:none;
}
.itemView .logo.contactLogo #imageEditBtn i, .itemView .logo.contactLogo #imageDeleteBtn i {font-size: 18px;  color:#BB9FF4;}
.itemView .logo.contactLogo #imageDeleteBtn {left:0; right: unset;}



.documentPanel {display:flex;align-items: center; border-bottom:1px solid #005268; padding-bottom:10px; margin-bottom:10px;}
.documentPanel .icon {margin-right:10px;}
.documentPanel .icon svg {height:auto; width:20px; fill:#007798}
.docLinkContainer {overflow: hidden; text-overflow: ellipsis;white-space: nowrap;margin-right: 10px; cursor:pointer; max-width: calc(100% - 74px);}
.docLinkContainer .uploaded_error {display:block; font-size:12px;}
.documentPanel .button {width:34px; height:34px; border-radius: 50%; padding:0; margin-left:auto;} 
.documentPanel .button:before {font-size:24px; color:#014254;} 
.documentPanel .deleteDocument {display:none;}


#uploadedFileContainer .documentPanel .deleteDocument {display:inline-flex;}
#uploadedFileContainer .documentPanel .downloadDocument {display:none;}

.documentPanel .button[data-icon=progress_activity], .documentPanel .button[data-icon=warning] {background:#014254; cursor: default;}
.documentPanel .button[data-icon=progress_activity]:before, .documentPanel .button[data-icon=warning]:before {color:#BB9FF4;}

.viewerContainer {position: fixed; top: 0;right: 0;left: 0;bottom: 0;height: 100dvh;width: 100%; display:none; background:#014254}
.viewerContainer iframe {height:calc(100dvh - 50px); width: 100dvw; border:0;}
.viewerContainer #closeDocument {height:50px; display:flex; justify-content: flex-end; align-items: center; padding:0 10px;}
.viewerContainer #closeDocument button {padding:5px; border-radius:50%; width:34px; height:34px;color:#014254;background:#BB9FF4;}
.viewerContainer #closeDocument button:before {font-size:24px;}
.viewerContainer .imgContainer {width: 100dvw; height:calc(100dvh - 50px);overflow: auto; position:relative;}
.viewerContainer .imgContainer img {
    max-width:100%; max-height:99%; position: absolute; left: 50%;top: 50%;transform: translate(-50%, -50%);
     /* touch-action:pinch-zoom; overscroll-behavior:unset; */
}
.viewerContainer .imgContainer img.massive {max-width: unset;max-height: unset;cursor: zoom-out; position:unset; transform: unset;}
.viewerContainer .imgContainer {scrollbar-color:#007798 transparent; }






#addContactBtn {background: #BB9FF4;position: absolute;top: -10px;width: 48px;height: 48px;left: 50%;transform: translateX(-50%);color: #014254;border: 3px solid #014254; display:none;}
#addContactBtn:before {font-variation-settings:'FILL'0,'wght'300;}

#editingImageContainer {}
.webkitMaskContainer {overflow:hidden;  cursor:move;}
.webkitMaskContainer > div {position:relative; width:250px; height:250px; margin:0 auto;}
.webkitMaskContainer > div > img {opacity:0.1; }
.webkitMask {mask-image: radial-gradient(circle, black);-webkit-mask-image: radial-gradient(circle, black);border-radius:50%; height: 250px;width: 250px; position:absolute; border-radius:50%; overflow:hidden;}
.webkitMaskContainer img {
	pointer-events: none; position:relative;
	-moz-user-select: none; -webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;
	-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.imageResizerContainer {max-width:250px; margin:25px auto;}




.itemView > .title {text-align:center; font-size:20px; margin-bottom:20px;color:#014254; font-weight:500; margin-top:-20px;}
.itemView > .title .category, .itemView > .title .renewal, .itemView > .title .relationship {display:block; font-size:12px; margin-top:5px;}
.itemView .overflow {overflow:auto; padding-right:10px; position: relative;}
.itemView .itemContainer {display:flex; flex-direction: column; margin-bottom:10px; background: #014254;padding:20px;border-radius: 10px;}
.itemView .itemContainer a {color: #d0f5ff;}
.itemView .itemContainer .title {margin-bottom:10px;}

.itemView .itemContainer .notes {padding:0 5px; line-height:1.4; color:#fff; font-weight: normal;background: #00576f;padding:15px; font-size:14px; border-radius:10px;;}

.itemView .itemContainer .notes.html {color: #d0f5ff;}
.itemView .itemContainer .notes.html .title {font-size:22px; color:#fff;}
.itemView .itemContainer .notes.html .subTitle {font-size:18px; color:#fff;}
.itemView .itemContainer .notes.html ol {padding-left:10px; margin:0;}
.itemView .itemContainer .notes.html ol li {margin-bottom:10px;}
.itemView .itemContainer .notes.html b {font-weight:500;}




.itemView .itemContainer .item {font-size:18px; display:flex; align-items: center; margin-bottom:20px;background: #00576f;padding: 10px 10px;border-radius: 10px;}
.itemView .itemContainer .item > div {overflow: hidden; text-overflow: ellipsis;}
.itemView .itemContainer .item.btn1 > div {width:calc(100% - 50px);}
.itemView .itemContainer .item.btn2 > div {width:calc(100% - 90px);}
.itemView .itemContainer .item > div span:nth-of-type(1) {color:#fff;}
.itemView .itemContainer .item [data-location] {line-height:1.4; font-size:14px;}
.itemView .itemContainer .item [data-email] {font-size:14px;}
.itemView .itemContainer .item:last-of-type {margin-bottom:0;}
.itemView .itemContainer .item div {margin-right:auto;}
.itemView .itemContainer .item div span:last-child {display:block; font-size:12px;margin-top:5px;}
.itemView .itemContainer button {background:#014254; width:35px; height:35px; margin-left:5px; }
.itemView .itemContainer button:before {font-variation-settings:'FILL'0,'wght'400; font-size:20px;color:#BB9FF4;}
.itemView .itemContainer.notesContainer {position:relative;}
.itemView .itemContainer.notesContainer button {position:absolute; top:10px; right:10px;}

#editContactDetails {display:none;}

section[data-section=accounts] .itemView .itemContainer .form {display:none;}




/* FORMS */




.formContainer {
    background:#014254; min-height:100%; padding:20px; border-radius:10px; font-weight: normal; line-height:1.4;
    display: flex; flex-direction: column;
}
.formContainer fieldset {margin-bottom:20px;}
.formContainer .spacer {height:30px;}
.formContainer button {color:#BB9FF4;}
.formContainer select {font-size:18px;}
.formContainer .formPageNo:not(:nth-of-type(1)) {display:none;}

.jsonTickBoxes label {display:flex; align-items: center; margin-bottom:10px; font-size:14px;}
.jsonTickBoxes label input {display:none;}
.jsonTickBoxes label:before {
    font-family:'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'400;font-weight: normal;font-style: normal;font-size:26px;color:#005268; margin-right:10px;
    position:relative; content:'check_box_outline_blank'; 
}
.jsonTickBoxes label.active:before {color:#BB9FF4; content:'check_box';}
.jsonSelect {margin-bottom:10px;}
.toolTip .jsonSelectHide,.toolTip.jsonSelectHide,.toolTip .btnContainer.jsonSelectHide {display:none;}


/* FORM TOOLTIPS */

#missingInformationPopup .contactContainer {font-size:18px; color:#014254; margin-bottom: 0;text-align: left;}
#missingInformationPopup .contactContainer .contact {margin-bottom: 0;padding-bottom: 0;}
#missingInformationPopup .contactContainer .contact .name {width: calc(100% - 50px);}
#missingInformationPopup .content {padding:20px; /*overflow: unset;*/}

.missingInformationContainer {text-align:left; margin-top:20px;border: 2px solid #005268; padding:20px; border-radius: 10px;}
.missingInformationContainer .contactContainer { margin:10px auto; width: fit-content;}
.missingInformationContainer .contactContainer .contact {margin-bottom:0; padding-bottom: 0;}
.missingInformationContainer .contactContainer .contact .img {width:100px;}
.missingInformationContainer .contactContainer .contact .img img {width:100px; height:100px;}
.missingInformationContainer .contactContainer .contact .name {width: calc(100% - 110px); font-size:18px;}
.missingInformationContainer .contactContainer .contact .missingInfoButtonContainer {display:block; margin-top:5px; display: flex; flex-direction: column; align-items: flex-start;}
.missingInformationContainer .contactContainer .contact .missingInfoButton {
    display:inline-flex; align-items: center; cursor: pointer; color:#014254; background:#BB9FF4; padding:3px 10px 3px 5px; border-radius:10px; font-weight: 500; font-size:12px; margin-bottom:10px; 
}
.missingInformationContainer .contactContainer .contact .missingInfoButton:before {font-size:16px; margin-right:5px;font-variation-settings:'FILL'0,'wght'600;}
.missingInformationContainer .slick-track {display: flex; align-items: center;}

.missingInfoText {font-size: 18px; line-height: 1.4; font-weight: normal; margin-top:10px;display:none;}
.noMissingInformation {text-align: center; font-size: 16px;}
.noMissingInformation i {color: #BB9FF4; font-size: 64px;}

.lpaStarted .missingInfoText {font-size:14px;margin-top:0;}
#missingInformationHealth, #missingInformationFinance  {}




.labelToggle {cursor:pointer;}
.labelToggle[data-icon=toggle_off]:before {color:#BB9FF4}
.labelToggle[data-icon=toggle_on]:before {color:#BB9FF4;font-variation-settings: 'FILL' 1, 'wght' 200;}
.labelToggle input {display:none;}


.formToolTip {margin-bottom:20px;}
.formToolTip .title {font-size:20px; margin-bottom:20px; line-height:1.4;}
.formToolTip .title.help {cursor:pointer; display: flex; align-items: center;}
.formToolTip .title.help:after {
    font-family:'Material Symbols Outlined';font-variation-settings:'FILL'1,'wght'600;font-weight: normal;font-style: normal;font-size:26px;content:'help'; color:#BB9FF4; margin-left:10px;
    position:relative;
}
.formToolTip .title.small {font-size:14px; margin-bottom:10px;}
.tip {display:none;}
.formToolTip .btnContainer {display:inline-flex; align-items: center; margin-bottom:20px;}
.formToolTip .btnContainerToggle {margin-bottom:20px;}
.formToolTip .btnHelp {margin-left:20px;}
.formToolTip .btnHelp:before {font-variation-settings:'FILL'1,'wght'600; font-size:26px;}
.formToolTip .btnLng {background: #BB9FF4;color: #014254;padding: 3px 15px 3px 10px;margin: 0 auto;font-size: 14px;}
.formToolTip .btnLng:before {font-size:24px; margin-right:7px;font-variation-settings:'FILL'1,'wght'400;}
.formToolTip .btnLng:nth-of-type(2) {margin-left:10px;}
.formToolTip .labelToggle {position: relative; display:block; width: 72px;height: 30px;}
.formToolTip .labelToggle:before {position:absolute; top: 50%; transform: translateY(-50%); left: 0;font-size: 72px;}

.formToolTip.inline {display:flex; align-items: center; flex-wrap:wrap; margin-bottom:10px;}
.formToolTip.inline .title {margin-bottom:10px; font-size:14px;}
.formToolTip.inline .btnContainer {margin-bottom:10px; margin-left:auto;}
.formToolTip.inline .formToolTip.yesNoBtn {width:100%; margin-bottom:10px;}

.formToolTip.inline .yesNo label {border:2px solid #BB9FF4; padding:4px 10px 4px 10px;}
.formToolTip.inline .yesNo label:nth-of-type(1) {border-right:0;}
.formToolTip.inline .yesNo label:nth-of-type(2) {border-left:0;}




.yesNo {display:inline-flex; margin-right:10px;}
.yesNo label {border:3px solid #BB9FF4; font-size:12px; font-weight:500; display:inline-flex; align-items:center; padding:7px 15px 7px 15px; cursor:pointer;}
.yesNo label input {display:none;}
.yesNo label.active {background:#BB9FF4; color:#014254;}
.yesNo label:nth-of-type(1) {border-radius:20px 0 0 20px; border-right:0;}
.yesNo label:nth-of-type(2) {border-radius:0 20px 20px 0; border-left:0;} 
.yesNoBtn {display:none;}

.itemView .footerNav {display:flex; align-items:center; background:#014254; margin:10px 10px 0 0; padding: 10px;border-radius: 10px;}
.itemView .footerNav span {flex:1 1 auto; font-weight:500; font-size:18px;}
.itemView .footerNav button {background:#BB9FF4; width:35px; height:35px; margin-left:5px;}
.itemView .footerNav button:before {font-variation-settings: 'FILL' 0, 'wght' 400; font-size: 24px;color: #014254;}



/* WILL */

.contactsSection[data-section=will] .accountFolders .folders {align-items: center; justify-content: center; display: flex; flex-direction: column; padding:20px 10px 0px 20px}
.contactsSection[data-section=will] .overflow {flex: 1 1 auto;}

.willGetStarted {text-align:center; padding:0 20px 0 10px; width:100%;}
.willGetStarted .text {font-size:18px; line-height:1.4; font-weight: normal;}
.willGetStarted .btn {margin-top:10px;display:none;}
#willProgressBar {max-width:250px;}

.willGetStarted .warning {background: #005268; padding: 30px;border-radius: 10px;font-size: 14px;}

.formCompletionContainer {display:flex; flex-wrap:wrap;}
.formCompletionCat {padding: 10px 0;border-bottom: 1px solid #005268;font-weight: normal; font-size:18px; width:calc(50% - 10px); display:flex; align-items:center; cursor:pointer;}
.formCompletionCat:nth-of-type(odd) {margin-right:10px;}
.formCompletionCat:nth-of-type(even) {margin-left:10px;}
.formCompletionCat:after {
    font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 200; font-weight: normal; font-style: normal; font-size: 24px;
    margin-left:auto;
}
.formCompletionCat[data-completed=true]:after {color:#BB9FF4;content:'task_alt';}
.formCompletionCat[data-completed=false]:after {color:#005268;content:'radio_button_unchecked';}


#giftContainer fieldset {font-size:14px; border:2px solid #005268; padding:10px; position:relative;}
#giftContainer fieldset > p:last-child {padding-bottom:0;}
#giftContainer fieldset .contact {margin-bottom:0;}
#giftContainer fieldset .contact button {display:none;}
#giftContainer fieldset .description {white-space: pre-wrap}
#giftContainer fieldset .dataAddress {text-transform: uppercase;}
#giftContainer fieldset button {width:48px; position:absolute; top:-5px; right:-5px;}
#giftContainer fieldset button:before {font-size:24px;}

.percentTotals.error {color:red;}

.contactContainer.estate .contact {flex-wrap:wrap;}
.contactContainer.estate > .contact > button:nth-of-type(1) {display:none;}
.contactContainer.estate .contact .estateOptions {display:flex; margin-top:10px;}
.contactContainer.estate .contact .estateOptions .percent {width:75px;margin-right: 10px; position:relative;}
.contactContainer.estate .contact .estateOptions .percent:after {position:absolute; right:10px; top:50%; transform:translate(0,-50%);font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'400;font-weight: normal;font-style: normal;font-size:18px;content:'percent';}
.contactContainer.estate .contact .estateOptions .percent input {padding-right:30px; font-size:18px;}
.contactContainer.estate .contact .estateOptions .percent select {padding: 10px 25px 10px 10px;}

.contactContainer.estate .contactContainer .contact:nth-of-type(1) {margin-top:20px;}
.contactContainer.estate .contactContainer {width:100%;}
.contactContainer.estate .contactContainer .contact {padding:0 10px 10px 10px;}
.contactContainer.estate .contactContainer .contact button:nth-of-type(1)  {display:block;}
.contactContainer.estate .contact .estateOptions .select {width:calc(100% - 85px);}
.contactContainer.estate .contact .estateOptions select {height:100%;}
.contactContainer.estate > .contact > .name {width:calc(100% - 50px);} 

.contactContainer.estate .charityContainer {width:100%;} 
.contactContainer.estate .charityContainer .charity:nth-of-type(1) {margin-top:20px;}
.contactContainer.estate .charityContainer .charity {flex-wrap:wrap; padding:0 10px 10px 10px;}

#estateShareCharities .charity {flex-wrap:wrap;}
#estateShareCharities .charity .name {width:100%;}
#estateShareCharities .charity button {display:none;}
#estateShareCharities .estateOptions {display:flex; margin-top:10px;}
#estateShareCharities .estateOptions .percent {width:65px;margin-right: 10px; position:relative;}
#estateShareCharities .estateOptions .percent:after {position:absolute; right:10px; top:50%; transform:translate(0,-50%);font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'400;font-weight: normal;font-style: normal;font-size:18px;content:'percent';}
#estateShareCharities .estateOptions .percent input {padding-right:30px;}
#estateShareCharities .estateOptions .percent select {padding: 10px 25px 10px 10px;}


/* LPAS */
.contactsSection[data-section=lpa] .overflow {flex: 1 1 auto;}
.contactsSection[data-section=lpa] .lpaPercentage {margin-top:0;} 
.lpaContainer {display:flex; flex-direction:column; justify-content: center; min-height:100%;}
.lpaContainer > div {background: #014254;padding:20px; border-radius:10px; flex:1 1 auto; font-weight:normal; font-size:14px;display:flex; flex-direction:column;}
.lpaContainer > div.active {justify-content: center;}
.lpaContainer > div:first-child {margin-bottom:10px;}
.lpaContainer > div:last-child {margin-top:10px;}
.lpaContainer > div div.title {color:#fff; font-size:22px; font-weight:500;}

.helpBtnContainer {display:flex; align-items:center; margin-bottom:5px;}
.helpBtnContainer .title {color:#fff; font-size:22px; font-weight:500;}
.helpBtnContainer .btnHelp {margin-left:20px;}
.helpBtnContainer .btnHelp:before {font-variation-settings: 'FILL' 1, 'wght' 600;font-size: 26px; color:#BB9FF4}


.lpaChangeContainer {display:flex;flex: 1 1 auto;}
.lpaChangeContainer .lpaContent {width: calc(100% - 90px);min-width: 200px;display: flex;flex-direction: column;}
.lpaChangeContainer .btn {flex:1 1 auto; align-content:flex-end;}
.lpaChangeContainer .formCompletionCat {margin:0; width:100%; padding:0; font-size:16px;}
.lpaChangeContainer button {font-size:14px;}
.lpaChangeContainer button:nth-of-type(1) {margin-right:10px;}


.lpaContainer > div.active {margin:0;}
.lpaContainer > div.active .lpaChangeContainer {max-height:fit-content; align-items: flex-end;}
.lpaContainer > div.active .lpaChangeContainer .lpaPercentage {height:160px;}

.lpaContainer .lpaCreated {display:flex; flex-direction:column; flex:1 1 auto}
.lpaContainer .lpaCreated .text {display:flex; align-items: center; flex:1 1 auto}
.lpaCreated a.button {font-size:14px;}
.lpaCreated a.button:nth-of-type(1) {margin-right:10px;}

.wcfTerms {text-align: justify; font-size:12px; line-height: 1.7;}
.wcfTerms > ol {margin-left:-30px;}
.wcfTerms > div {margin-bottom:10px;}
.wcfTerms b {font-weight:normal; font-size:14px;}
.wcfTerms ol {counter-reset: item;}
.wcfTerms ol > li {counter-increment: item; margin-bottom:10px;}
.wcfTerms ol > li:before {content:'';margin-right:6px;}
.wcfTerms ol ol > li {display: block;}
.wcfTerms ol ol > li:before {content: counters(item, ".") ". ";margin-left: -32px; display:inline-block;}
.wcfTerms ol > li span {display:inline-block;vertical-align:top; margin-bottom:10px;}
.wcfTerms ol > li span:not(:first-child) {margin-left:5px; display:block;}
/* .wcfTerms ol > li:before {width:20px;} */
/* .wcfTerms ol ol > li span {width:calc(100% - 20px)} */
.wcfTerms ol ol > li span:not(:first-child) {margin-left:10px;}
.wcfTerms ol ol > li:before {width:20px;}
.wcfTerms ol ol ol > li span {width:calc(100% - 40px)}
.wcfTerms ol ol ol > li:before {width:40px;}
.wcfTerms ol ol ol ol > li span {width:calc(100% - 50px)}
.wcfTerms ol ol ol ol > li:before {width:50px;}


.readonlySectionsPopup {display:flex; align-items:center; justify-content:center; position:fixed; top:0; left:0; width:100dvw; height:100dvh; background:#BB9FF4; padding:20px; display:none;}
.readonlySectionsPopup > div {width:400px; padding:30px; background:#014254; border-radius:10px; text-align:center; font-size:14px;}
.readonlySectionsPopup > div .title {font-size:22px; color:#fff;}



.cookieBar {position: fixed;top:0; left:0; width:100dvw; height:100dvh; background: rgba(1,66,84,0.6); display:flex; align-items:flex-end;}
.cookieBar > div {background: #001921; display:flex; align-items: center;padding: 20px;}
.cookieBar > div > div:nth-of-type(2) {margin-left:100px;}
.cookieBar > div > div:nth-of-type(2) .button {font-size: 14px;}





/* STOREY AI */
#chatContainerBackground {z-index:9; position:fixed; display:flex; align-items:flex-end; justify-content:flex-end; bottom:0; right:0; padding:20px;}
#chatContainer {width:280px; max-width:100%; background:#014254; color:#fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); padding:55px 10px 10px 10px; border-radius:10px; position:relative;}
#closeStoreyAI {position:absolute; top:10px; right:10px; color:#BB9FF4; cursor:pointer;}
.storeyAIAvatar {width:70px; height:70px; border-radius:50%; overflow:hidden; position:absolute; top:-35px; transform:translate(-50%, 0); left:50%;}
.storeyAIAvatar img {width:100%; height:auto;}
#chatJourney {}
#chatJourney .message {margin-bottom:10px; line-height:1.6;}
#chatJourney button {margin:0 3px; padding:7px 20px; border-radius:15px; width:100%; margin-top:10px;}
#chatJourney input, #chatJourney textarea, #chatJourney .select {margin-bottom:10px; display:block;}
#chatJourney textarea {border:1px solid #005268; border-radius:5px; background:#005268; color:#d0f5ff; padding:10px;}
#chatJourney button#storeyAIback, #chatFreelyContainer #freelyChatBack {position: absolute; top:10px; left:10px; padding:0; width:auto; background:transparent; color:#BB9FF4; margin-top:0;}
#chatJourney button#storeyAIback:before, #chatFreelyContainer #freelyChatBack:before {font-size:24px; font-variation-settings: 'FILL' 0, 'wght' 400;}

#storeyAIAvatar { position:fixed; bottom:20px; right:20px; top:unset; left:unset; transform:unset; width:60px; height:60px; cursor:pointer; display:none;}
#chatFreelyContainer {display:none;}
#chatFreely {max-height:calc(100dvh - 200px); min-height:200px; overflow:auto; scrollbar-color:#046d8a transparent;}
#chatFreelyInput {display:flex; margin:10px 0 0 0}
#chatFreelyInput input {border: 1px solid #005268;border-radius: 5px;background: #005268;color: #d0f5ff; padding:7px 10px; width:calc(100% - 35px); border-radius:10px 0 0 10px;font-family: Gordita;}
#chatFreelyInput button {width:35px; background:#BB9FF4; color:#014254; border-radius:0 10px 10px 0;}
#chatFreelyInput button:before {font-size:24px; font-variation-settings: 'FILL' 0, 'wght' 300;}
.storey-ai-reply {background: #004d62; padding:10px; border-radius:10px; margin-bottom:10px;}
.storey-ai-reply ul {padding-left: 1.2rem;}
.storey-ai-reply strong {}
.storey-ai-user {margin-bottom:10px;}









@media only screen and (max-width: 1280px) {
    header {max-width: 1024px;margin: 0 auto;width: 100%;}
    header .headerLinks {display:none;}
    header .headerNav {text-align: center;flex-direction: column; justify-content: center;}
    header .headerLogo {width:100%;}
    header .headerNav .pageTitle { display:block;}


}

@media only screen and (max-width: 1024px) {
    section {align-items:flex-end; max-width:450px;}
    .dashboardContainer {padding:15px 10px 10px 10px; border-radius:30px 30px 0 0;}
    .dashboardContainer .dashboardRow a .title {font-size:16px;}
    .dashboardContainer .dashboardRow a[data-type="5"] .number {font-size:38px;}
    .dashboardContainer .dashboardRow a .btnContainer .btn {font-size:14px; padding: 5px 10px;}

    /* .dashboardContainer .slick-track {height:388px;} */

    .accountsContainer {padding:20px 10px 20px 20px; border-radius:30px 30px 0 0; position:relative; height: calc(100dvh - 130px);}
    
    .accountFolders {width:100%; margin-right:0;}

    .accountView {position:unset; width:0; overflow:hidden;}
    .itemView {background: #BB9FF4;padding: 20px;}
    .itemView .logo {top:-40px;}
    .itemView > .title {margin-top:-10px;}
    #addContactBtn.show {display:inline-flex;}


    .willGetStarted .btn {display:block;}
    .formCompletionContainer {flex-direction:column;}
    .formCompletionCat {}
    .formCompletionCat:nth-of-type(odd) {margin-right:0; width:100%;} 
    .formCompletionCat:nth-of-type(even) {margin-left:0; width:100%;} 
    .missingInformationContainer .contactContainer .contact {flex-direction:column;}
    .missingInformationContainer .contactContainer .contact .img {margin-right:0;}
    .missingInformationContainer .contactContainer .contact .name {text-align:center; width:100%;}
    .missingInformationContainer .contactContainer .contact .missingInfoButtonContainer {align-items: center;}
    .missingInformationContainer button {width:100%;}

    .willFinished a.button {width:100%;}
    .willFinished .checkContacts {margin-top:10px;}
    .willGenerated a.button {width:100%; margin-top:10px;}

    .lpaChangeContainer .btn, .lpaCreated .btn {display:flex; flex-direction:column-reverse; align-items: center;}
    .lpaChangeContainer button,   .lpaChangeContainer .button {width:calc(100% - 10px); margin-top:10px; font-size:16px;}
    .lpaCreated a.button {width:100%; margin-top:10px; margin-right:0; font-size:16px;}

}

@media only screen and (max-width: 900px) {
    .cookieBar > div {flex-direction: column;align-items: flex-start;}
    .cookieBar > div > div:nth-of-type(2) {margin-left:0;}
}