@charset "UTF-8";
/* _theme.scss */ /* _colours.scss */
html {
  /* CUSTOM COLOURS */
  /* custom-pink */
  --colour-dark-custom-pink: #ea51e4;
  --colour-custom-pink: #ff6df9;
  --colour-light-custom-pink: #fe7ff9;
  --colour-extra-light-custom-pink: #fe8ff9;
  --colour-dark-custom-pink-hover: #e942e2;
  --colour-custom-pink-hover: #f563ef;
  --colour-light-custom-pink-hover: #f083ec;
  --colour-extra-light-custom-pink-hover: #ed89e9;
  --colour-dark-custom-pink-active: #e56ee1;
  --colour-custom-pink-active: #ec56e6;
  --colour-light-custom-pink-active: #e569e0;
  --colour-extra-light-custom-pink-active: #e77ee3;
  --colour-highlight-custom-pink-hover: #fff9fe;
  --colour-highlight-custom-pink-active: #fef4fe;
  /**/
  /* custom-graphite */
  --colour-dark-custom-graphite: #444449;
  --colour-custom-graphite: #4d4d55;
  --colour-light-custom-graphite: #60606a;
  --colour-extra-light-custom-graphite: #72727e;
  --colour-dark-custom-graphite-hover: #404045;
  --colour-custom-graphite-hover: #494950;
  --colour-light-custom-graphite-hover: #56565c;
  --colour-extra-light-custom-graphite-hover: #595960;
  --colour-dark-custom-graphite-active: #49494e;
  --colour-custom-graphite-active: #45454a;
  --colour-light-custom-graphite-active: #48484d;
  --colour-extra-light-custom-graphite-active: #4d4d52;
  --colour-highlight-custom-graphite-hover: #f8f8f8;
  --colour-highlight-custom-graphite-active: #f0f0f2;
  /**/
  /* custom-fpgreen */
  --colour-dark-custom-fpgreen: #031709;
  --colour-custom-fpgreen: #001E09;
  --colour-light-custom-fpgreen: #01541a;
  --colour-extra-light-custom-fpgreen: #01882a;
  --colour-dark-custom-fpgreen-hover: #031608;
  --colour-custom-fpgreen-hover: #021b09;
  --colour-light-custom-fpgreen-hover: #062e12;
  --colour-extra-light-custom-fpgreen-hover: #083616;
  --colour-dark-custom-fpgreen-active: #04180a;
  --colour-custom-fpgreen-active: #031809;
  --colour-light-custom-fpgreen-active: #04170a;
  --colour-extra-light-custom-fpgreen-active: #05190b;
  --colour-highlight-custom-fpgreen-hover: #edfef2;
  --colour-highlight-custom-fpgreen-active: #dbfde5;
  /**/
  /* COLOURS */
  --colour-dark-red:	#993333;
  --colour-dark-orange:	#ba8830;
  --colour-dark-yellow:	#baa130;
  --colour-dark-green:	#288a28;
  --colour-dark-blue:	#305e97;
  --colour-dark-indigo:	#7830ba;
  --colour-dark-violet:	#9630ba;
  --colour-dark-grey:	#747474;
  --colour-red:	#ce3030;
  --colour-orange:	#f6b441;
  --colour-yellow:	#f6d541;
  --colour-green:	#36ba36;
  --colour-blue:	#407ec9;
  --colour-indigo:	#9f41f6;
  --colour-violet:	#c641f6;
  --colour-grey:	#9a9a9a;
  --colour-light-red:	#da6464;
  --colour-light-orange:	#f8c670;
  --colour-light-yellow:	#f8e070;
  --colour-light-green:	#68ca68;
  --colour-light-blue:	#709ed7;
  --colour-light-indigo:	#b670f8;
  --colour-light-violet:	#d470f8;
  --colour-light-grey:	#aeaeae;
  --colour-extra-light-red:	#e69797;
  --colour-extra-light-orange:	#fad99f;
  --colour-extra-light-yellow:	#faea9f;
  --colour-extra-light-green:	#9adb9a;
  --colour-extra-light-blue:	#9fbee4;
  --colour-extra-light-indigo:	#ce9ffa;
  --colour-extra-light-violet:	#e29ffa;
  --colour-extra-light-grey:	#c6c6c6;
  /* COLOURS - HOVER */
  --colour-dark-red-hover:	#892e2e;
  --colour-dark-orange-hover:	#a5782b;
  --colour-dark-yellow-hover:	#a5902b;
  --colour-dark-green-hover:	#247c24;
  --colour-dark-blue-hover:	#2b5488;
  --colour-dark-indigo-hover:	#6a2ba5;
  --colour-dark-violet-hover:	#852ba5;
  --colour-dark-grey-hover:	#686868;
  --colour-red-hover:	#b92b2b;
  --colour-orange-hover:	#dda139;
  --colour-yellow-hover:	#ddc039;
  --colour-green-hover:	#30a530;
  --colour-blue-hover:	#3971b5;
  --colour-indigo-hover:	#8e39dd;
  --colour-violet-hover:	#b139dd;
  --colour-grey-hover:	#8a8a8a;
  --colour-light-red-hover:	#c45a5a;
  --colour-light-orange-hover:	#dfb265;
  --colour-light-yellow-hover:	#dfc965;
  --colour-light-green-hover:	#5db55d;
  --colour-light-blue-hover:	#658ec1;
  --colour-light-indigo-hover:	#a365df;
  --colour-light-violet-hover:	#be65df;
  --colour-light-grey-hover:	#9c9c9c;
  --colour-extra-light-red-hover:	#cf8888;
  --colour-extra-light-orange-hover:	#e1c38f;
  --colour-extra-light-yellow-hover:	#e1d28f;
  --colour-extra-light-green-hover:	#8ac58a;
  --colour-extra-light-blue-hover:	#8fabcd;
  --colour-extra-light-indigo-hover:	#b98fe1;
  --colour-extra-light-violet-hover:	#cb8fe1;
  --colour-extra-light-grey-hover:	#b2b2b2;
  /* COLOURS - ACTIVE */
  --colour-dark-red-active:	#7a2929;
  --colour-dark-orange-active:	#936b26;
  --colour-dark-yellow-active:	#938026;
  --colour-dark-green-active:	#206e20;
  --colour-dark-blue-active:	#264b79;
  --colour-dark-indigo-active:	#5e2693;
  --colour-dark-violet-active:	#762693;
  --colour-dark-grey-active:	#5c5c5c;
  --colour-red-active:	#a52626;
  --colour-orange-active:	#c58f33;
  --colour-yellow-active:	#c5ab33;
  --colour-green-active:	#2b932a;
  --colour-blue-active:	#3365a1;
  --colour-indigo-active:	#7e33c5;
  --colour-violet-active:	#9e33c5;
  --colour-grey-active:	#7b7b7b;
  --colour-light-red-active:	#ae5050;
  --colour-light-orange-active:	#c69e5a;
  --colour-light-yellow-active:	#c6b35a;
  --colour-light-green-active:	#53a253;
  --colour-light-blue-active:	#5a7eac;
  --colour-light-indigo-active:	#925ac6;
  --colour-light-violet-active:	#aa5ac6;
  --colour-light-grey-active:	#8b8b8b;
  --colour-extra-light-red-active:	#b87979;
  --colour-extra-light-orange-active: #c8ae7f;
  --colour-extra-light-yellow-active: #c8bb7f;
  --colour-extra-light-green-active:	#7baf7b;
  --colour-extra-light-blue-active:	#7f98b6;
  --colour-extra-light-indigo-active: #a57fc8;
  --colour-extra-light-violet-active: #b57fc8;
  --colour-extra-light-grey-active:	#9e9e9e;
  /* THEME COLOURS */
  --colour-highlight-red-hover:	#FFF5F5;
  --colour-highlight-orange-hover:	#fdf0d9;
  --colour-highlight-yellow-hover:	#fdf7d9;
  --colour-highlight-green-hover:	#E7F9EA;
  --colour-highlight-blue-hover:	#ECF5FF;
  --colour-highlight-indigo-hover:	#ecd9fd;
  --colour-highlight-violet-hover:	#f3d9fd;
  --colour-highlight-grey-hover:	#efefef;
  --colour-highlight-red-active:	#FFE7E7;
  --colour-highlight-orange-active:	#fbe1b3;
  --colour-highlight-yellow-active:	#fbefb3;
  --colour-highlight-green-active:	#D1F6CE;
  --colour-highlight-blue-active:	#CFE7FF;
  --colour-highlight-indigo-active:	#d8b3fb;
  --colour-highlight-violet-active:	#e8b3fb;
  --colour-highlight-grey-active:	#dfdfdf;
  /* COLOURS - PC */
  --colour-red-00:	#CE303000;
  --colour-red-10:	#CE303019;
  --colour-red-20:	#CE303033;
  --colour-red-30:	#CE30304c;
  --colour-red-40:	#CE303066;
  --colour-red-50:	#CE30307f;
  --colour-red-60:	#CE303099;
  --colour-red-70:	#CE3030b2;
  --colour-red-80:	#CE3030cc;
  --colour-red-90:	#CE3030e5;
  --colour-orange-00:	#f6b34000;
  --colour-orange-10:	#f6b34019;
  --colour-orange-20:	#f6b34033;
  --colour-orange-30:	#f6b3404c;
  --colour-orange-40:	#f6b34066;
  --colour-orange-50:	#f6b3407f;
  --colour-orange-60:	#f6b34099;
  --colour-orange-70:	#f6b340b2;
  --colour-orange-80:	#f6b340cc;
  --colour-orange-90:	#f6b340e5;
  --colour-yellow-00:	#f6d64000;
  --colour-yellow-10:	#f6d64019;
  --colour-yellow-20:	#f6d64033;
  --colour-yellow-30:	#f6d6404c;
  --colour-yellow-40:	#f6d64066;
  --colour-yellow-50:	#f6d6407f;
  --colour-yellow-60:	#f6d64099;
  --colour-yellow-70:	#f6d640b2;
  --colour-yellow-80:	#f6d640cc;
  --colour-yellow-90:	#f6d640e5;
  --colour-green-00:	#36b83500;
  --colour-green-10:	#36b83519;
  --colour-green-20:	#36b83533;
  --colour-green-30:	#36b8354c;
  --colour-green-40:	#36b83566;
  --colour-green-50:	#36b8357f;
  --colour-green-60:	#36b83599;
  --colour-green-70:	#36b835b2;
  --colour-green-80:	#36b835cc;
  --colour-green-90:	#36b835e5;
  --colour-blue-00:	#407ec900;
  --colour-blue-10:	#407ec919;
  --colour-blue-20:	#407ec933;
  --colour-blue-30:	#407ec94c;
  --colour-blue-40:	#407ec966;
  --colour-blue-50:	#407ec97f;
  --colour-blue-60:	#407ec999;
  --colour-blue-70:	#407ec9b2;
  --colour-blue-80:	#407ec9cc;
  --colour-blue-90:	#407ec9e5;
  --colour-indigo-00:	#9e40f600;
  --colour-indigo-10:	#9e40f619;
  --colour-indigo-20:	#9e40f633;
  --colour-indigo-30:	#9e40f64c;
  --colour-indigo-40:	#9e40f666;
  --colour-indigo-50:	#9e40f67f;
  --colour-indigo-60:	#9e40f699;
  --colour-indigo-70:	#9e40f6b2;
  --colour-indigo-80:	#9e40f6cc;
  --colour-indigo-90:	#9e40f6e5;
  --colour-violet-00:	#c540f600;
  --colour-violet-10:	#c540f619;
  --colour-violet-20:	#c540f633;
  --colour-violet-30:	#c540f64c;
  --colour-violet-40:	#c540f666;
  --colour-violet-50:	#c540f67f;
  --colour-violet-60:	#c540f699;
  --colour-violet-70:	#c540f6b2;
  --colour-violet-80:	#c540f6cc;
  --colour-violet-90:	#c540f6e5;
  --colour-grey-00:	#9a9a9a00;
  --colour-grey-10:	#9a9a9a19;
  --colour-grey-20:	#9a9a9a33;
  --colour-grey-30:	#9a9a9a4c;
  --colour-grey-40:	#9a9a9a66;
  --colour-grey-50:	#9a9a9a7f;
  --colour-grey-60:	#9a9a9a99;
  --colour-grey-70:	#9a9a9ab2;
  --colour-grey-80:	#9a9a9acc;
  --colour-grey-90:	#9a9a9ae5;
  --colour-custom-pink-00: rgba(255, 109, 249, 0);
  --colour-custom-pink-05: rgba(255, 109, 249, 0.05);
  --colour-custom-pink-10: rgba(255, 109, 249, 0.1);
  --colour-custom-pink-15: rgba(255, 109, 249, 0.15);
  --colour-custom-pink-20: rgba(255, 109, 249, 0.2);
  --colour-custom-pink-25: rgba(255, 109, 249, 0.25);
  --colour-custom-pink-30: rgba(255, 109, 249, 0.3);
  --colour-custom-pink-35: rgba(255, 109, 249, 0.35);
  --colour-custom-pink-40: rgba(255, 109, 249, 0.4);
  --colour-custom-pink-45: rgba(255, 109, 249, 0.45);
  --colour-custom-pink-50: rgba(255, 109, 249, 0.5);
  --colour-custom-pink-55: rgba(255, 109, 249, 0.55);
  --colour-custom-pink-60: rgba(255, 109, 249, 0.6);
  --colour-custom-pink-65: rgba(255, 109, 249, 0.65);
  --colour-custom-pink-70: rgba(255, 109, 249, 0.7);
  --colour-custom-pink-75: rgba(255, 109, 249, 0.75);
  --colour-custom-pink-80: rgba(255, 109, 249, 0.8);
  --colour-custom-pink-85: rgba(255, 109, 249, 0.85);
  --colour-custom-pink-90: rgba(255, 109, 249, 0.9);
  --colour-custom-pink-95: rgba(255, 109, 249, 0.95);
  --colour-custom-graphite-00: rgba(77, 77, 85, 0);
  --colour-custom-graphite-05: rgba(77, 77, 85, 0.05);
  --colour-custom-graphite-10: rgba(77, 77, 85, 0.1);
  --colour-custom-graphite-15: rgba(77, 77, 85, 0.15);
  --colour-custom-graphite-20: rgba(77, 77, 85, 0.2);
  --colour-custom-graphite-25: rgba(77, 77, 85, 0.25);
  --colour-custom-graphite-30: rgba(77, 77, 85, 0.3);
  --colour-custom-graphite-35: rgba(77, 77, 85, 0.35);
  --colour-custom-graphite-40: rgba(77, 77, 85, 0.4);
  --colour-custom-graphite-45: rgba(77, 77, 85, 0.45);
  --colour-custom-graphite-50: rgba(77, 77, 85, 0.5);
  --colour-custom-graphite-55: rgba(77, 77, 85, 0.55);
  --colour-custom-graphite-60: rgba(77, 77, 85, 0.6);
  --colour-custom-graphite-65: rgba(77, 77, 85, 0.65);
  --colour-custom-graphite-70: rgba(77, 77, 85, 0.7);
  --colour-custom-graphite-75: rgba(77, 77, 85, 0.75);
  --colour-custom-graphite-80: rgba(77, 77, 85, 0.8);
  --colour-custom-graphite-85: rgba(77, 77, 85, 0.85);
  --colour-custom-graphite-90: rgba(77, 77, 85, 0.9);
  --colour-custom-graphite-95: rgba(77, 77, 85, 0.95);
  --colour-custom-fpgreen-00: rgba(0, 30, 9, 0);
  --colour-custom-fpgreen-05: rgba(0, 30, 9, 0.05);
  --colour-custom-fpgreen-10: rgba(0, 30, 9, 0.1);
  --colour-custom-fpgreen-15: rgba(0, 30, 9, 0.15);
  --colour-custom-fpgreen-20: rgba(0, 30, 9, 0.2);
  --colour-custom-fpgreen-25: rgba(0, 30, 9, 0.25);
  --colour-custom-fpgreen-30: rgba(0, 30, 9, 0.3);
  --colour-custom-fpgreen-35: rgba(0, 30, 9, 0.35);
  --colour-custom-fpgreen-40: rgba(0, 30, 9, 0.4);
  --colour-custom-fpgreen-45: rgba(0, 30, 9, 0.45);
  --colour-custom-fpgreen-50: rgba(0, 30, 9, 0.5);
  --colour-custom-fpgreen-55: rgba(0, 30, 9, 0.55);
  --colour-custom-fpgreen-60: rgba(0, 30, 9, 0.6);
  --colour-custom-fpgreen-65: rgba(0, 30, 9, 0.65);
  --colour-custom-fpgreen-70: rgba(0, 30, 9, 0.7);
  --colour-custom-fpgreen-75: rgba(0, 30, 9, 0.75);
  --colour-custom-fpgreen-80: rgba(0, 30, 9, 0.8);
  --colour-custom-fpgreen-85: rgba(0, 30, 9, 0.85);
  --colour-custom-fpgreen-90: rgba(0, 30, 9, 0.9);
  --colour-custom-fpgreen-95: rgba(0, 30, 9, 0.95);
  --colour-red-00: rgba(206, 48, 48, 0);
  --colour-red-05: rgba(206, 48, 48, 0.05);
  --colour-red-10: rgba(206, 48, 48, 0.1);
  --colour-red-15: rgba(206, 48, 48, 0.15);
  --colour-red-20: rgba(206, 48, 48, 0.2);
  --colour-red-25: rgba(206, 48, 48, 0.25);
  --colour-red-30: rgba(206, 48, 48, 0.3);
  --colour-red-35: rgba(206, 48, 48, 0.35);
  --colour-red-40: rgba(206, 48, 48, 0.4);
  --colour-red-45: rgba(206, 48, 48, 0.45);
  --colour-red-50: rgba(206, 48, 48, 0.5);
  --colour-red-55: rgba(206, 48, 48, 0.55);
  --colour-red-60: rgba(206, 48, 48, 0.6);
  --colour-red-65: rgba(206, 48, 48, 0.65);
  --colour-red-70: rgba(206, 48, 48, 0.7);
  --colour-red-75: rgba(206, 48, 48, 0.75);
  --colour-red-80: rgba(206, 48, 48, 0.8);
  --colour-red-85: rgba(206, 48, 48, 0.85);
  --colour-red-90: rgba(206, 48, 48, 0.9);
  --colour-red-95: rgba(206, 48, 48, 0.95);
  --colour-orange-00: rgba(246, 179, 64, 0);
  --colour-orange-05: rgba(246, 179, 64, 0.05);
  --colour-orange-10: rgba(246, 179, 64, 0.1);
  --colour-orange-15: rgba(246, 179, 64, 0.15);
  --colour-orange-20: rgba(246, 179, 64, 0.2);
  --colour-orange-25: rgba(246, 179, 64, 0.25);
  --colour-orange-30: rgba(246, 179, 64, 0.3);
  --colour-orange-35: rgba(246, 179, 64, 0.35);
  --colour-orange-40: rgba(246, 179, 64, 0.4);
  --colour-orange-45: rgba(246, 179, 64, 0.45);
  --colour-orange-50: rgba(246, 179, 64, 0.5);
  --colour-orange-55: rgba(246, 179, 64, 0.55);
  --colour-orange-60: rgba(246, 179, 64, 0.6);
  --colour-orange-65: rgba(246, 179, 64, 0.65);
  --colour-orange-70: rgba(246, 179, 64, 0.7);
  --colour-orange-75: rgba(246, 179, 64, 0.75);
  --colour-orange-80: rgba(246, 179, 64, 0.8);
  --colour-orange-85: rgba(246, 179, 64, 0.85);
  --colour-orange-90: rgba(246, 179, 64, 0.9);
  --colour-orange-95: rgba(246, 179, 64, 0.95);
  --colour-yellow-00: rgba(246, 214, 64, 0);
  --colour-yellow-05: rgba(246, 214, 64, 0.05);
  --colour-yellow-10: rgba(246, 214, 64, 0.1);
  --colour-yellow-15: rgba(246, 214, 64, 0.15);
  --colour-yellow-20: rgba(246, 214, 64, 0.2);
  --colour-yellow-25: rgba(246, 214, 64, 0.25);
  --colour-yellow-30: rgba(246, 214, 64, 0.3);
  --colour-yellow-35: rgba(246, 214, 64, 0.35);
  --colour-yellow-40: rgba(246, 214, 64, 0.4);
  --colour-yellow-45: rgba(246, 214, 64, 0.45);
  --colour-yellow-50: rgba(246, 214, 64, 0.5);
  --colour-yellow-55: rgba(246, 214, 64, 0.55);
  --colour-yellow-60: rgba(246, 214, 64, 0.6);
  --colour-yellow-65: rgba(246, 214, 64, 0.65);
  --colour-yellow-70: rgba(246, 214, 64, 0.7);
  --colour-yellow-75: rgba(246, 214, 64, 0.75);
  --colour-yellow-80: rgba(246, 214, 64, 0.8);
  --colour-yellow-85: rgba(246, 214, 64, 0.85);
  --colour-yellow-90: rgba(246, 214, 64, 0.9);
  --colour-yellow-95: rgba(246, 214, 64, 0.95);
  --colour-green-00: rgba(54, 184, 53, 0);
  --colour-green-05: rgba(54, 184, 53, 0.05);
  --colour-green-10: rgba(54, 184, 53, 0.1);
  --colour-green-15: rgba(54, 184, 53, 0.15);
  --colour-green-20: rgba(54, 184, 53, 0.2);
  --colour-green-25: rgba(54, 184, 53, 0.25);
  --colour-green-30: rgba(54, 184, 53, 0.3);
  --colour-green-35: rgba(54, 184, 53, 0.35);
  --colour-green-40: rgba(54, 184, 53, 0.4);
  --colour-green-45: rgba(54, 184, 53, 0.45);
  --colour-green-50: rgba(54, 184, 53, 0.5);
  --colour-green-55: rgba(54, 184, 53, 0.55);
  --colour-green-60: rgba(54, 184, 53, 0.6);
  --colour-green-65: rgba(54, 184, 53, 0.65);
  --colour-green-70: rgba(54, 184, 53, 0.7);
  --colour-green-75: rgba(54, 184, 53, 0.75);
  --colour-green-80: rgba(54, 184, 53, 0.8);
  --colour-green-85: rgba(54, 184, 53, 0.85);
  --colour-green-90: rgba(54, 184, 53, 0.9);
  --colour-green-95: rgba(54, 184, 53, 0.95);
  --colour-blue-00: rgba(64, 126, 201, 0);
  --colour-blue-05: rgba(64, 126, 201, 0.05);
  --colour-blue-10: rgba(64, 126, 201, 0.1);
  --colour-blue-15: rgba(64, 126, 201, 0.15);
  --colour-blue-20: rgba(64, 126, 201, 0.2);
  --colour-blue-25: rgba(64, 126, 201, 0.25);
  --colour-blue-30: rgba(64, 126, 201, 0.3);
  --colour-blue-35: rgba(64, 126, 201, 0.35);
  --colour-blue-40: rgba(64, 126, 201, 0.4);
  --colour-blue-45: rgba(64, 126, 201, 0.45);
  --colour-blue-50: rgba(64, 126, 201, 0.5);
  --colour-blue-55: rgba(64, 126, 201, 0.55);
  --colour-blue-60: rgba(64, 126, 201, 0.6);
  --colour-blue-65: rgba(64, 126, 201, 0.65);
  --colour-blue-70: rgba(64, 126, 201, 0.7);
  --colour-blue-75: rgba(64, 126, 201, 0.75);
  --colour-blue-80: rgba(64, 126, 201, 0.8);
  --colour-blue-85: rgba(64, 126, 201, 0.85);
  --colour-blue-90: rgba(64, 126, 201, 0.9);
  --colour-blue-95: rgba(64, 126, 201, 0.95);
  --colour-indigo-00: rgba(158, 64, 246, 0);
  --colour-indigo-05: rgba(158, 64, 246, 0.05);
  --colour-indigo-10: rgba(158, 64, 246, 0.1);
  --colour-indigo-15: rgba(158, 64, 246, 0.15);
  --colour-indigo-20: rgba(158, 64, 246, 0.2);
  --colour-indigo-25: rgba(158, 64, 246, 0.25);
  --colour-indigo-30: rgba(158, 64, 246, 0.3);
  --colour-indigo-35: rgba(158, 64, 246, 0.35);
  --colour-indigo-40: rgba(158, 64, 246, 0.4);
  --colour-indigo-45: rgba(158, 64, 246, 0.45);
  --colour-indigo-50: rgba(158, 64, 246, 0.5);
  --colour-indigo-55: rgba(158, 64, 246, 0.55);
  --colour-indigo-60: rgba(158, 64, 246, 0.6);
  --colour-indigo-65: rgba(158, 64, 246, 0.65);
  --colour-indigo-70: rgba(158, 64, 246, 0.7);
  --colour-indigo-75: rgba(158, 64, 246, 0.75);
  --colour-indigo-80: rgba(158, 64, 246, 0.8);
  --colour-indigo-85: rgba(158, 64, 246, 0.85);
  --colour-indigo-90: rgba(158, 64, 246, 0.9);
  --colour-indigo-95: rgba(158, 64, 246, 0.95);
  --colour-violet-00: rgba(197, 64, 246, 0);
  --colour-violet-05: rgba(197, 64, 246, 0.05);
  --colour-violet-10: rgba(197, 64, 246, 0.1);
  --colour-violet-15: rgba(197, 64, 246, 0.15);
  --colour-violet-20: rgba(197, 64, 246, 0.2);
  --colour-violet-25: rgba(197, 64, 246, 0.25);
  --colour-violet-30: rgba(197, 64, 246, 0.3);
  --colour-violet-35: rgba(197, 64, 246, 0.35);
  --colour-violet-40: rgba(197, 64, 246, 0.4);
  --colour-violet-45: rgba(197, 64, 246, 0.45);
  --colour-violet-50: rgba(197, 64, 246, 0.5);
  --colour-violet-55: rgba(197, 64, 246, 0.55);
  --colour-violet-60: rgba(197, 64, 246, 0.6);
  --colour-violet-65: rgba(197, 64, 246, 0.65);
  --colour-violet-70: rgba(197, 64, 246, 0.7);
  --colour-violet-75: rgba(197, 64, 246, 0.75);
  --colour-violet-80: rgba(197, 64, 246, 0.8);
  --colour-violet-85: rgba(197, 64, 246, 0.85);
  --colour-violet-90: rgba(197, 64, 246, 0.9);
  --colour-violet-95: rgba(197, 64, 246, 0.95);
  --colour-grey-00: rgba(154, 154, 154, 0);
  --colour-grey-05: rgba(154, 154, 154, 0.05);
  --colour-grey-10: rgba(154, 154, 154, 0.1);
  --colour-grey-15: rgba(154, 154, 154, 0.15);
  --colour-grey-20: rgba(154, 154, 154, 0.2);
  --colour-grey-25: rgba(154, 154, 154, 0.25);
  --colour-grey-30: rgba(154, 154, 154, 0.3);
  --colour-grey-35: rgba(154, 154, 154, 0.35);
  --colour-grey-40: rgba(154, 154, 154, 0.4);
  --colour-grey-45: rgba(154, 154, 154, 0.45);
  --colour-grey-50: rgba(154, 154, 154, 0.5);
  --colour-grey-55: rgba(154, 154, 154, 0.55);
  --colour-grey-60: rgba(154, 154, 154, 0.6);
  --colour-grey-65: rgba(154, 154, 154, 0.65);
  --colour-grey-70: rgba(154, 154, 154, 0.7);
  --colour-grey-75: rgba(154, 154, 154, 0.75);
  --colour-grey-80: rgba(154, 154, 154, 0.8);
  --colour-grey-85: rgba(154, 154, 154, 0.85);
  --colour-grey-90: rgba(154, 154, 154, 0.9);
  --colour-grey-95: rgba(154, 154, 154, 0.95);
  --background: #FFF;
  --modal-holder-background: rgba(0, 0, 0, 0.1);
  --modal-background: #FFF;
  --modal-box-shadow: 0 0 20px rgba(0,0,0,0.05);
  --profile-image-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.1);
  --loading-bg: #E8E8E8;
  --item-primary-text: #333;
  --item-secondary-text: #666;
  --item-tertiary-text: #808080;
  --item-border: #FAFAFA;
  --default-background-image: url("https://images.crewlist.co/icons/banner/colour/FFFFFF");
  --default-background-image-people: url("https://images.crewlist.co/icons/people/colour/FFFFFF");
  --default-background-image-project: url("https://images.crewlist.co/icons/project/colour/FFFFFF");
  --default-background-image-jobs: url("https://images.crewlist.co/icons/jobs/colour/FFFFFF");
  --default-background-image-cvinverted: url("https://images.crewlist.co/icons/cvinverted/colour/FFFFFF");
  --default-background-image-documentinverted: url("https://images.crewlist.co/icons/documentinverted/colour/FFFFFF");
  --default-background-image-menu: url("https://images.crewlist.co/icons/menu/colour/FFFFFF");
  --default-background-image-business: url("https://images.crewlist.co/icons/business/colour/FFFFFF");
  --filter-background: #FFF;
  --filter-border-colour: #F0F0F0;
  --filter-text-colour: #999999;
  --whitebutton-text-colour: #F2F2F2;
  --whitebutton-text-colour-active: #999999;
  --h1-text: #333;
  --h2-text: #333;
  --h3-text: #333;
  --h4-text: #4d4d4d;
  --h5-text: #4d4d4d;
  --h6-text: #4d4d4d;
  --layout-border-colour: #F2F2F2;
  --content-background-colour: #FFFFFF;
  --input-text-colour: #4d4d4d;
  --input-background-colour: #F5F5F5;
  --input-background-colour-hover: #EDEDED;
  --input-background-colour-active: #E6E6E6;
  --input-text-placeholder-colour: #a9a9a9;
  /* MESSAGES */
  --message-bg: #407EC9;
  --message-text: #FFFFFF;
  --message-bg-hover: #3971B5;
  --message-bg-active: #3365A1;
  --message-bg-other: #F2F2F2;
  --message-text-other: #333333;
  --message-bg-other-hover: #D9D9D9;
  --message-bg-other-active: #C2C2C2;
  --other-message-bg: #ebebf0;
  --other-message-text: #1a1a1a;
  --reply-message-bg: #58a1eb;
  --reply-message-text: #eff6fd;
  --other-reply-message-bg: #f5f5f7;
  --other-reply-message-text: #8c8c8c;
  --timebreak-text: #CCC;
}

html[data-darkmode=dark] {
  /* CUSTOM COLOURS */
  /* custom-pink */
  --colour-dark-custom-pink: #f053e9;
  --colour-custom-pink: #fb73f6;
  --colour-light-custom-pink: #fb85f6;
  --colour-extra-light-custom-pink: #fb94f7;
  --colour-dark-custom-pink-hover: #e44ede;
  --colour-custom-pink-hover: #f16eec;
  --colour-light-custom-pink-hover: #ed89e9;
  --colour-extra-light-custom-pink-hover: #ea8fe6;
  --colour-dark-custom-pink-active: #e279de;
  --colour-custom-pink-active: #e861e3;
  --colour-light-custom-pink-active: #e273dd;
  --colour-extra-light-custom-pink-active: #e588e1;
  --colour-highlight-custom-pink-hover: #080708;
  --colour-highlight-custom-pink-active: #0f0e0f;
  /**/
  /* custom-graphite */
  --colour-dark-custom-graphite: #45454b;
  --colour-custom-graphite: #515158;
  --colour-light-custom-graphite: #64646d;
  --colour-extra-light-custom-graphite: #767681;
  --colour-dark-custom-graphite-hover: #424247;
  --colour-custom-graphite-hover: #4b4b51;
  --colour-light-custom-graphite-hover: #595960;
  --colour-extra-light-custom-graphite-hover: #5d5d63;
  --colour-dark-custom-graphite-active: #4b4b50;
  --colour-custom-graphite-active: #47474c;
  --colour-light-custom-graphite-active: #49494e;
  --colour-extra-light-custom-graphite-active: #505055;
  --colour-highlight-custom-graphite-hover: #030303;
  --colour-highlight-custom-graphite-active: #060606;
  /**/
  /* custom-fpgreen */
  --colour-dark-custom-fpgreen: #021809;
  --colour-custom-fpgreen: #01270c;
  --colour-light-custom-fpgreen: #035b1e;
  --colour-extra-light-custom-fpgreen: #058e2e;
  --colour-dark-custom-fpgreen-hover: #031609;
  --colour-custom-fpgreen-hover: #031a0a;
  --colour-light-custom-fpgreen-hover: #083516;
  --colour-extra-light-custom-fpgreen-hover: #0b3c1a;
  --colour-dark-custom-fpgreen-active: #05180b;
  --colour-custom-fpgreen-active: #031809;
  --colour-light-custom-fpgreen-active: #05170a;
  --colour-extra-light-custom-fpgreen-active: #061b0c;
  --colour-highlight-custom-fpgreen-hover: #010101;
  --colour-highlight-custom-fpgreen-active: #010101;
  /**/
  /* COLOURS */
  --colour-dark-red:	#9b3737;
  --colour-dark-orange:	#bb8a35;
  --colour-dark-yellow:	#bba335;
  --colour-dark-green:	#2c8d2c;
  --colour-dark-blue:	#346199;
  --colour-dark-indigo:	#7b35bb;
  --colour-dark-violet:	#9835bb;
  --colour-dark-grey:	#777777;
  --colour-red:	#cc3737;
  --colour-orange:	#f2b449;
  --colour-yellow:	#f2d349;
  --colour-green:	#3bbb3b;
  --colour-blue:	#4781c7;
  --colour-indigo:	#a149f2;
  --colour-violet:	#c549f2;
  --colour-grey:	#9c9c9c;
  --colour-light-red:	#d86a6a;
  --colour-light-orange:	#f5c676;
  --colour-light-yellow:	#f5de76;
  --colour-light-green:	#6dc96d;
  --colour-light-blue:	#75a0d5;
  --colour-light-indigo:	#b776f5;
  --colour-light-violet:	#d376f5;
  --colour-light-grey:	#b0b0b0;
  --colour-extra-light-red:	#e59b9b;
  --colour-extra-light-orange:	#f8d9a3;
  --colour-extra-light-yellow:	#f8e9a3;
  --colour-extra-light-green:	#9eda9e;
  --colour-extra-light-blue:	#a3bfe3;
  --colour-extra-light-indigo:	#cfa3f8;
  --colour-extra-light-violet:	#e2a3f8;
  --colour-extra-light-grey:	#c7c7c7;
  /* COLOURS - HOVER */
  --colour-dark-red-hover:	#8c3232;
  --colour-dark-orange-hover:	#a77b2f;
  --colour-dark-yellow-hover:	#a7922f;
  --colour-dark-green-hover:	#287f28;
  --colour-dark-blue-hover:	#2f578b;
  --colour-dark-indigo-hover:	#6d2fa7;
  --colour-dark-violet-hover:	#872fa7;
  --colour-dark-grey-hover:	#6b6b6b;
  --colour-red-hover:	#ba3030;
  --colour-orange-hover:	#daa241;
  --colour-yellow-hover:	#dabf41;
  --colour-green-hover:	#34a734;
  --colour-blue-hover:	#3d74b6;
  --colour-indigo-hover:	#9041da;
  --colour-violet-hover:	#b141da;
  --colour-grey-hover:	#8c8c8c;
  --colour-light-red-hover:	#c36060;
  --colour-light-orange-hover:	#ddb36b;
  --colour-light-yellow-hover:	#ddc86b;
  --colour-light-green-hover:	#62b462;
  --colour-light-blue-hover:	#6a91c0;
  --colour-light-indigo-hover:	#a56bdd;
  --colour-light-violet-hover:	#be6bdd;
  --colour-light-grey-hover:	#9e9e9e;
  --colour-extra-light-red-hover:	#ce8c8c;
  --colour-extra-light-orange-hover:	#e0c493;
  --colour-extra-light-yellow-hover:	#e0d293;
  --colour-extra-light-green-hover:	#8ec58e;
  --colour-extra-light-blue-hover:	#93adcc;
  --colour-extra-light-indigo-hover:	#ba93e0;
  --colour-extra-light-violet-hover:	#cb93e0;
  --colour-extra-light-grey-hover:	#b4b4b4;
  /* COLOURS - ACTIVE */
  --colour-dark-red-active:	#7d2d2d;
  --colour-dark-orange-active:	#956e2a;
  --colour-dark-yellow-active:	#95832a;
  --colour-dark-green-active:	#247224;
  --colour-dark-blue-active:	#2a4f7c;
  --colour-dark-indigo-active:	#612a95;
  --colour-dark-violet-active:	#792a95;
  --colour-dark-grey-active:	#5f5f5f;
  --colour-red-active:	#a72a2a;
  --colour-orange-active:	#c59138;
  --colour-yellow-active:	#c5ac38;
  --colour-green-active:	#2f952e;
  --colour-blue-active:	#3768a3;
  --colour-indigo-active:	#8138c5;
  --colour-violet-active:	#a038c5;
  --colour-grey-active:	#7e7e7e;
  --colour-light-red-active:	#ae5555;
  --colour-light-orange-active:	#c49f60;
  --colour-light-yellow-active:	#c4b360;
  --colour-light-green-active:	#57a357;
  --colour-light-blue-active:	#5f81ac;
  --colour-light-indigo-active:	#9460c4;
  --colour-light-violet-active:	#aa60c4;
  --colour-light-grey-active:	#8d8d8d;
  --colour-extra-light-red-active:	#b87d7d;
  --colour-extra-light-orange-active: #c7af83;
  --colour-extra-light-yellow-active: #c7bb83;
  --colour-extra-light-green-active:	#7faf7f;
  --colour-extra-light-blue-active:	#839ab6;
  --colour-extra-light-indigo-active: #a783c7;
  --colour-extra-light-violet-active: #b683c7;
  --colour-extra-light-grey-active:	#a0a0a0;
  /* THEME COLOURS */
  --colour-highlight-red-hover:	#1a1818;
  --colour-highlight-orange-hover:	#191816;
  --colour-highlight-yellow-hover:	#191816;
  --colour-highlight-green-hover:	#171918;
  --colour-highlight-blue-hover:	#17181a;
  --colour-highlight-indigo-hover:	#181619;
  --colour-highlight-violet-hover:	#181619;
  --colour-highlight-grey-hover:	#181818;
  --colour-highlight-red-active:	#1a1717;
  --colour-highlight-orange-active:	#161615;
  --colour-highlight-yellow-active:	#161615;
  --colour-highlight-green-active:	#161716;
  --colour-highlight-blue-active:	#161718;
  --colour-highlight-indigo-active:	#161516;
  --colour-highlight-violet-active:	#161516;
  --colour-highlight-grey-active:	#161616;
  --background: #0a0a0b;
  --modal-holder-background: rgba(0, 0, 0, 0.7);
  --modal-background: #1b1b1b;
  --modal-box-shadow: none;
  --profile-image-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  --loading-bg: #282828;
  --item-primary-text: #D4D4D4;
  --item-secondary-text: #B8B8B8;
  --item-tertiary-text: #999999;
  --item-border: #282828;
  --default-background-image: url("https://images.crewlist.co/icons/banner/colour/4d4d4d");
  --default-background-image-people: url("https://images.crewlist.co/icons/people/colour/4d4d4d");
  --default-background-image-project: url("https://images.crewlist.co/icons/project/colour/4d4d4d");
  --default-background-image-jobs: url("https://images.crewlist.co/icons/jobs/colour/4d4d4d");
  --default-background-image-cvinverted: url("https://images.crewlist.co/icons/cvinverted/colour/4d4d4d");
  --default-background-image-documentinverted: url("https://images.crewlist.co/icons/documentinverted/colour/4d4d4d");
  --default-background-image-menu: url("https://images.crewlist.co/icons/menu/colour/4d4d4d");
  --default-background-image-business: url("https://images.crewlist.co/icons/business/colour/4d4d4d");
  --filter-background: #333333;
  --filter-border-colour: #333333;
  --filter-text-colour: #CCCCCC;
  --whitebutton-text-colour: #333333;
  --whitebutton-text-colour-active: #CCCCCC;
  --h1-text: #f0f0f0;
  --h2-text: #f0f0f0;
  --h3-text: #f0f0f0;
  --h4-text: #E5E5E5;
  --h5-text: #E5E5E5;
  --h6-text: #E5E5E5;
  --layout-border-colour: #232324;
  --content-background-colour: #141415;
  --input-text-colour: #e5e5e5;
  --input-background-colour: #282828;
  --input-background-colour-hover: #333333;
  --input-background-colour-active: #3C3C3C;
  --input-text-placeholder-colour: #555555;
  /* MESSAGES */
  --message-bg: #407EC9;
  --message-text: #FFFFFF;
  --message-bg-hover: #3971B5;
  --message-bg-active: #3365A1;
  --message-bg-other: #333333;
  --message-text-other: #FFFFFF;
  --message-bg-other-hover: #2e2e2e;
  --message-bg-other-active: #292929;
  --other-message-bg: #282828;
  --other-message-text: #ebebf0;
  --reply-message-bg: #194068;
  --reply-message-text: #d1d9e1;
  --other-reply-message-bg: #232323;
  --other-reply-message-text: #c7c7c8;
  --timebreak-text: #666;
}

@media (prefers-color-scheme: dark) {
  html[data-darkmode=system] {
    /* CUSTOM COLOURS */
    /* custom-pink */
    --colour-dark-custom-pink: #f053e9;
    --colour-custom-pink: #fb73f6;
    --colour-light-custom-pink: #fb85f6;
    --colour-extra-light-custom-pink: #fb94f7;
    --colour-dark-custom-pink-hover: #e44ede;
    --colour-custom-pink-hover: #f16eec;
    --colour-light-custom-pink-hover: #ed89e9;
    --colour-extra-light-custom-pink-hover: #ea8fe6;
    --colour-dark-custom-pink-active: #e279de;
    --colour-custom-pink-active: #e861e3;
    --colour-light-custom-pink-active: #e273dd;
    --colour-extra-light-custom-pink-active: #e588e1;
    --colour-highlight-custom-pink-hover: #080708;
    --colour-highlight-custom-pink-active: #0f0e0f;
    /**/
    /* custom-graphite */
    --colour-dark-custom-graphite: #45454b;
    --colour-custom-graphite: #515158;
    --colour-light-custom-graphite: #64646d;
    --colour-extra-light-custom-graphite: #767681;
    --colour-dark-custom-graphite-hover: #424247;
    --colour-custom-graphite-hover: #4b4b51;
    --colour-light-custom-graphite-hover: #595960;
    --colour-extra-light-custom-graphite-hover: #5d5d63;
    --colour-dark-custom-graphite-active: #4b4b50;
    --colour-custom-graphite-active: #47474c;
    --colour-light-custom-graphite-active: #49494e;
    --colour-extra-light-custom-graphite-active: #505055;
    --colour-highlight-custom-graphite-hover: #030303;
    --colour-highlight-custom-graphite-active: #060606;
    /**/
    /* custom-fpgreen */
    --colour-dark-custom-fpgreen: #021809;
    --colour-custom-fpgreen: #01270c;
    --colour-light-custom-fpgreen: #035b1e;
    --colour-extra-light-custom-fpgreen: #058e2e;
    --colour-dark-custom-fpgreen-hover: #031609;
    --colour-custom-fpgreen-hover: #031a0a;
    --colour-light-custom-fpgreen-hover: #083516;
    --colour-extra-light-custom-fpgreen-hover: #0b3c1a;
    --colour-dark-custom-fpgreen-active: #05180b;
    --colour-custom-fpgreen-active: #031809;
    --colour-light-custom-fpgreen-active: #05170a;
    --colour-extra-light-custom-fpgreen-active: #061b0c;
    --colour-highlight-custom-fpgreen-hover: #010101;
    --colour-highlight-custom-fpgreen-active: #010101;
    /**/
    /* COLOURS */
    --colour-dark-red:	#9b3737;
    --colour-dark-orange:	#bb8a35;
    --colour-dark-yellow:	#bba335;
    --colour-dark-green:	#2c8d2c;
    --colour-dark-blue:	#346199;
    --colour-dark-indigo:	#7b35bb;
    --colour-dark-violet:	#9835bb;
    --colour-dark-grey:	#777777;
    --colour-red:	#cc3737;
    --colour-orange:	#f2b449;
    --colour-yellow:	#f2d349;
    --colour-green:	#3bbb3b;
    --colour-blue:	#4781c7;
    --colour-indigo:	#a149f2;
    --colour-violet:	#c549f2;
    --colour-grey:	#9c9c9c;
    --colour-light-red:	#d86a6a;
    --colour-light-orange:	#f5c676;
    --colour-light-yellow:	#f5de76;
    --colour-light-green:	#6dc96d;
    --colour-light-blue:	#75a0d5;
    --colour-light-indigo:	#b776f5;
    --colour-light-violet:	#d376f5;
    --colour-light-grey:	#b0b0b0;
    --colour-extra-light-red:	#e59b9b;
    --colour-extra-light-orange:	#f8d9a3;
    --colour-extra-light-yellow:	#f8e9a3;
    --colour-extra-light-green:	#9eda9e;
    --colour-extra-light-blue:	#a3bfe3;
    --colour-extra-light-indigo:	#cfa3f8;
    --colour-extra-light-violet:	#e2a3f8;
    --colour-extra-light-grey:	#c7c7c7;
    /* COLOURS - HOVER */
    --colour-dark-red-hover:	#8c3232;
    --colour-dark-orange-hover:	#a77b2f;
    --colour-dark-yellow-hover:	#a7922f;
    --colour-dark-green-hover:	#287f28;
    --colour-dark-blue-hover:	#2f578b;
    --colour-dark-indigo-hover:	#6d2fa7;
    --colour-dark-violet-hover:	#872fa7;
    --colour-dark-grey-hover:	#6b6b6b;
    --colour-red-hover:	#ba3030;
    --colour-orange-hover:	#daa241;
    --colour-yellow-hover:	#dabf41;
    --colour-green-hover:	#34a734;
    --colour-blue-hover:	#3d74b6;
    --colour-indigo-hover:	#9041da;
    --colour-violet-hover:	#b141da;
    --colour-grey-hover:	#8c8c8c;
    --colour-light-red-hover:	#c36060;
    --colour-light-orange-hover:	#ddb36b;
    --colour-light-yellow-hover:	#ddc86b;
    --colour-light-green-hover:	#62b462;
    --colour-light-blue-hover:	#6a91c0;
    --colour-light-indigo-hover:	#a56bdd;
    --colour-light-violet-hover:	#be6bdd;
    --colour-light-grey-hover:	#9e9e9e;
    --colour-extra-light-red-hover:	#ce8c8c;
    --colour-extra-light-orange-hover:	#e0c493;
    --colour-extra-light-yellow-hover:	#e0d293;
    --colour-extra-light-green-hover:	#8ec58e;
    --colour-extra-light-blue-hover:	#93adcc;
    --colour-extra-light-indigo-hover:	#ba93e0;
    --colour-extra-light-violet-hover:	#cb93e0;
    --colour-extra-light-grey-hover:	#b4b4b4;
    /* COLOURS - ACTIVE */
    --colour-dark-red-active:	#7d2d2d;
    --colour-dark-orange-active:	#956e2a;
    --colour-dark-yellow-active:	#95832a;
    --colour-dark-green-active:	#247224;
    --colour-dark-blue-active:	#2a4f7c;
    --colour-dark-indigo-active:	#612a95;
    --colour-dark-violet-active:	#792a95;
    --colour-dark-grey-active:	#5f5f5f;
    --colour-red-active:	#a72a2a;
    --colour-orange-active:	#c59138;
    --colour-yellow-active:	#c5ac38;
    --colour-green-active:	#2f952e;
    --colour-blue-active:	#3768a3;
    --colour-indigo-active:	#8138c5;
    --colour-violet-active:	#a038c5;
    --colour-grey-active:	#7e7e7e;
    --colour-light-red-active:	#ae5555;
    --colour-light-orange-active:	#c49f60;
    --colour-light-yellow-active:	#c4b360;
    --colour-light-green-active:	#57a357;
    --colour-light-blue-active:	#5f81ac;
    --colour-light-indigo-active:	#9460c4;
    --colour-light-violet-active:	#aa60c4;
    --colour-light-grey-active:	#8d8d8d;
    --colour-extra-light-red-active:	#b87d7d;
    --colour-extra-light-orange-active: #c7af83;
    --colour-extra-light-yellow-active: #c7bb83;
    --colour-extra-light-green-active:	#7faf7f;
    --colour-extra-light-blue-active:	#839ab6;
    --colour-extra-light-indigo-active: #a783c7;
    --colour-extra-light-violet-active: #b683c7;
    --colour-extra-light-grey-active:	#a0a0a0;
    /* THEME COLOURS */
    --colour-highlight-red-hover:	#1a1818;
    --colour-highlight-orange-hover:	#191816;
    --colour-highlight-yellow-hover:	#191816;
    --colour-highlight-green-hover:	#171918;
    --colour-highlight-blue-hover:	#17181a;
    --colour-highlight-indigo-hover:	#181619;
    --colour-highlight-violet-hover:	#181619;
    --colour-highlight-grey-hover:	#181818;
    --colour-highlight-red-active:	#1a1717;
    --colour-highlight-orange-active:	#161615;
    --colour-highlight-yellow-active:	#161615;
    --colour-highlight-green-active:	#161716;
    --colour-highlight-blue-active:	#161718;
    --colour-highlight-indigo-active:	#161516;
    --colour-highlight-violet-active:	#161516;
    --colour-highlight-grey-active:	#161616;
    --background: #0a0a0b;
    --modal-holder-background: rgba(0, 0, 0, 0.7);
    --modal-background: #1b1b1b;
    --modal-box-shadow: none;
    --profile-image-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    --loading-bg: #282828;
    --item-primary-text: #D4D4D4;
    --item-secondary-text: #B8B8B8;
    --item-tertiary-text: #999999;
    --item-border: #282828;
    --default-background-image: url("https://images.crewlist.co/icons/banner/colour/4d4d4d");
    --default-background-image-people: url("https://images.crewlist.co/icons/people/colour/4d4d4d");
    --default-background-image-project: url("https://images.crewlist.co/icons/project/colour/4d4d4d");
    --default-background-image-jobs: url("https://images.crewlist.co/icons/jobs/colour/4d4d4d");
    --default-background-image-cvinverted: url("https://images.crewlist.co/icons/cvinverted/colour/4d4d4d");
    --default-background-image-documentinverted: url("https://images.crewlist.co/icons/documentinverted/colour/4d4d4d");
    --default-background-image-menu: url("https://images.crewlist.co/icons/menu/colour/4d4d4d");
    --default-background-image-business: url("https://images.crewlist.co/icons/business/colour/4d4d4d");
    --filter-background: #333333;
    --filter-border-colour: #333333;
    --filter-text-colour: #CCCCCC;
    --whitebutton-text-colour: #333333;
    --whitebutton-text-colour-active: #CCCCCC;
    --h1-text: #f0f0f0;
    --h2-text: #f0f0f0;
    --h3-text: #f0f0f0;
    --h4-text: #E5E5E5;
    --h5-text: #E5E5E5;
    --h6-text: #E5E5E5;
    --layout-border-colour: #232324;
    --content-background-colour: #141415;
    --input-text-colour: #e5e5e5;
    --input-background-colour: #282828;
    --input-background-colour-hover: #333333;
    --input-background-colour-active: #3C3C3C;
    --input-text-placeholder-colour: #555555;
    /* MESSAGES */
    --message-bg: #407EC9;
    --message-text: #FFFFFF;
    --message-bg-hover: #3971B5;
    --message-bg-active: #3365A1;
    --message-bg-other: #333333;
    --message-text-other: #FFFFFF;
    --message-bg-other-hover: #2e2e2e;
    --message-bg-other-active: #292929;
    --other-message-bg: #282828;
    --other-message-text: #ebebf0;
    --reply-message-bg: #194068;
    --reply-message-text: #d1d9e1;
    --other-reply-message-bg: #232323;
    --other-reply-message-text: #c7c7c8;
    --timebreak-text: #666;
  }
}
html body {
  --theme-bg-hover: var(--colour-highlight-blue-hover);
  --theme-bg-active: var(--colour-highlight-blue-active);
  --theme-colour: var(--colour-blue);
  --theme-colour-hover: var(--colour-blue-hover);
  --theme-colour-active: var(--colour-blue-active);
  --theme-colour-dark-active: var(--colour-dark-blue-active);
  --theme-text: var(--colour-blue);
  --theme-text-hover: var(--colour-blue-hover);
  --theme-text-active: var(--colour-blue-active);
  --theme-text-main-hover: var(--colour-blue-hover);
  --theme-text-secondary-hover: var(--colour-blue);
  --theme-text-tertiary-hover: var(--colour-blue-80);
}
html body.red {
  --theme-bg-hover: var(--colour-highlight-red-hover);
  --theme-bg-active: var(--colour-highlight-red-active);
  --theme-colour: var(--colour-red);
  --theme-colour-hover: var(--colour-red-hover);
  --theme-colour-active: var(--colour-red-active);
  --theme-colour-dark-active: var(--colour-dark-red-active);
  --theme-text: var(--colour-red);
  --theme-text-hover: var(--colour-red-hover);
  --theme-text-active: var(--colour-red-active);
  --theme-text-main-hover: var(--colour-red-hover);
  --theme-text-secondary-hover: var(--colour-red);
  --theme-text-tertiary-hover: var(--colour-red-80);
}
html body.orange {
  --theme-bg-hover: var(--colour-highlight-orange-hover);
  --theme-bg-active: var(--colour-highlight-orange-active);
  --theme-colour: var(--colour-orange);
  --theme-colour-hover: var(--colour-orange-hover);
  --theme-colour-active: var(--colour-orange-active);
  --theme-colour-dark-active: var(--colour-dark-orange-active);
  --theme-text: var(--colour-orange);
  --theme-text-hover: var(--colour-orange-hover);
  --theme-text-active: var(--colour-orange-active);
  --theme-text-main-hover: var(--colour-orange-hover);
  --theme-text-secondary-hover: var(--colour-orange);
  --theme-text-tertiary-hover: var(--colour-orange-80);
}
html body.yellow {
  --theme-bg-hover: var(--colour-highlight-yellow-hover);
  --theme-bg-active: var(--colour-highlight-yellow-active);
  --theme-colour: var(--colour-yellow);
  --theme-colour-hover: var(--colour-yellow-hover);
  --theme-colour-active: var(--colour-yellow-active);
  --theme-colour-dark-active: var(--colour-dark-yellow-active);
  --theme-text: var(--colour-yellow);
  --theme-text-hover: var(--colour-yellow-hover);
  --theme-text-active: var(--colour-yellow-active);
  --theme-text-main-hover: var(--colour-yellow-hover);
  --theme-text-secondary-hover: var(--colour-yellow);
  --theme-text-tertiary-hover: var(--colour-yellow-80);
}
html body.green {
  --theme-bg-hover: var(--colour-highlight-green-hover);
  --theme-bg-active: var(--colour-highlight-green-active);
  --theme-colour: var(--colour-green);
  --theme-colour-hover: var(--colour-green-hover);
  --theme-colour-active: var(--colour-green-active);
  --theme-colour-dark-active: var(--colour-dark-green-active);
  --theme-text: var(--colour-green);
  --theme-text-hover: var(--colour-green-hover);
  --theme-text-active: var(--colour-green-active);
  --theme-text-main-hover: var(--colour-green-hover);
  --theme-text-secondary-hover: var(--colour-green);
  --theme-text-tertiary-hover: var(--colour-green-80);
}
html body.indigo {
  --theme-bg-hover: var(--colour-highlight-indigo-hover);
  --theme-bg-active: var(--colour-highlight-indigo-active);
  --theme-colour: var(--colour-indigo);
  --theme-colour-hover: var(--colour-indigo-hover);
  --theme-colour-active: var(--colour-indigo-active);
  --theme-colour-dark-active: var(--colour-dark-indigo-active);
  --theme-text: var(--colour-indigo);
  --theme-text-hover: var(--colour-indigo-hover);
  --theme-text-active: var(--colour-indigo-active);
  --theme-text-main-hover: var(--colour-indigo-hover);
  --theme-text-secondary-hover: var(--colour-indigo);
  --theme-text-tertiary-hover: var(--colour-indigo-80);
}
html body.violet {
  --theme-bg-hover: var(--colour-highlight-violet-hover);
  --theme-bg-active: var(--colour-highlight-violet-active);
  --theme-colour: var(--colour-violet);
  --theme-colour-hover: var(--colour-violet-hover);
  --theme-colour-active: var(--colour-violet-active);
  --theme-colour-dark-active: var(--colour-dark-violet-active);
  --theme-text: var(--colour-violet);
  --theme-text-hover: var(--colour-violet-hover);
  --theme-text-active: var(--colour-violet-active);
  --theme-text-main-hover: var(--colour-violet-hover);
  --theme-text-secondary-hover: var(--colour-violet);
  --theme-text-tertiary-hover: var(--colour-violet-80);
}
html body.grey {
  --theme-bg-hover: var(--colour-highlight-grey-hover);
  --theme-bg-active: var(--colour-highlight-grey-active);
  --theme-colour: var(--colour-grey);
  --theme-colour-hover: var(--colour-grey-hover);
  --theme-colour-active: var(--colour-grey-active);
  --theme-colour-dark-active: var(--colour-dark-grey-active);
  --theme-text: var(--colour-grey);
  --theme-text-hover: var(--colour-grey-hover);
  --theme-text-active: var(--colour-grey-active);
  --theme-text-main-hover: var(--colour-grey-hover);
  --theme-text-secondary-hover: var(--colour-grey);
  --theme-text-tertiary-hover: var(--colour-grey-80);
}
html body.custom-pink {
  --theme-bg-hover: var(--colour-highlight-custom-pink-hover);
  --theme-bg-active: var(--colour-highlight-custom-pink-active);
  --theme-colour: var(--colour-custom-pink);
  --theme-colour-hover: var(--colour-custom-pink-hover);
  --theme-colour-active: var(--colour-custom-pink-active);
  --theme-colour-dark-active: var(--colour-dark-custom-pink-active);
  --theme-text: var(--colour-custom-pink);
  --theme-text-hover: var(--colour-custom-pink-hover);
  --theme-text-active: var(--colour-custom-pink-active);
  --theme-text-main-hover: var(--colour-custom-pink-hover);
  --theme-text-secondary-hover: var(--colour-custom-pink);
  --theme-text-tertiary-hover: var(--colour-custom-pink-80);
}
html body.custom-graphite {
  --theme-bg-hover: var(--colour-highlight-custom-graphite-hover);
  --theme-bg-active: var(--colour-highlight-custom-graphite-active);
  --theme-colour: var(--colour-custom-graphite);
  --theme-colour-hover: var(--colour-custom-graphite-hover);
  --theme-colour-active: var(--colour-custom-graphite-active);
  --theme-colour-dark-active: var(--colour-dark-custom-graphite-active);
  --theme-text: var(--colour-custom-graphite);
  --theme-text-hover: var(--colour-custom-graphite-hover);
  --theme-text-active: var(--colour-custom-graphite-active);
  --theme-text-main-hover: var(--colour-custom-graphite-hover);
  --theme-text-secondary-hover: var(--colour-custom-graphite);
  --theme-text-tertiary-hover: var(--colour-custom-graphite-80);
}
html body.custom-fpgreen {
  --theme-bg-hover: var(--colour-highlight-custom-fpgreen-hover);
  --theme-bg-active: var(--colour-highlight-custom-fpgreen-active);
  --theme-colour: var(--colour-custom-fpgreen);
  --theme-colour-hover: var(--colour-custom-fpgreen-hover);
  --theme-colour-active: var(--colour-custom-fpgreen-active);
  --theme-colour-dark-active: var(--colour-dark-custom-fpgreen-active);
  --theme-text: var(--colour-custom-fpgreen);
  --theme-text-hover: var(--colour-custom-fpgreen-hover);
  --theme-text-active: var(--colour-custom-fpgreen-active);
  --theme-text-main-hover: var(--colour-custom-fpgreen-hover);
  --theme-text-secondary-hover: var(--colour-custom-fpgreen);
  --theme-text-tertiary-hover: var(--colour-custom-fpgreen-80);
}

/* _html.scss */
html {
  height: -webkit-fill-available;
  overscroll-behavior: none;
  --gutter-width: 40px;
  --margin-width: 20px;
  --column-width-8: calc(((100vw - (2 * var(--margin-width))) - ((8 - 1) * var(--gutter-width))) / 8);
  --column-width-12: calc(((100vw - (2 * var(--margin-width))) - ((12 - 1) * var(--gutter-width))) / 12);
  --column-width: var(--column-width-12);
}

@media only screen and (max-width: 1440px) {
  html {
    --column-width: var(--column-width-8);
  }
}
hr {
  height: 1px;
  background: var(--layout-border-colour);
  border: 0px;
  border-radius: 2px;
  margin: 10px 0;
}

h1 {
  color: var(--h1-text);
  letter-spacing: -0.01em;
}

h2 {
  color: var(--h2-text);
}

h3 {
  color: var(--h3-text);
}

h4 {
  color: var(--h4-text);
}

h5 {
  color: var(--h5-text);
}

h6 {
  color: var(--h6-text);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.33;
}
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
  text-decoration: none;
  color: var(--colour-blue);
}
h1 a:link:hover, h1 a:visited:hover, h2 a:link:hover, h2 a:visited:hover, h3 a:link:hover, h3 a:visited:hover, h4 a:link:hover, h4 a:visited:hover, h5 a:link:hover, h5 a:visited:hover, h6 a:link:hover, h6 a:visited:hover {
  color: var(--colour-blue-hover);
}
h1 a:link:active, h1 a:visited:active, h2 a:link:active, h2 a:visited:active, h3 a:link:active, h3 a:visited:active, h4 a:link:active, h4 a:visited:active, h5 a:link:active, h5 a:visited:active, h6 a:link:active, h6 a:visited:active {
  color: var(--colour-blue-active);
}

h4, h5, h6 {
  font-weight: 500;
}

u {
  text-decoration: underline !important;
}

img {
  object-fit: cover;
  background-color: var(--loading-bg);
  background-image: var(--default-background-image);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 50%;
}
img[data-imagetype=person] {
  background-image: var(--default-background-image-people);
}
img[data-imagetype=project] {
  background-image: var(--default-background-image-project);
}
img[data-imagetype=business] {
  background-image: var(--default-background-image-business);
}
img[data-imagetype=job] {
  background-image: var(--default-background-image-jobs);
}
img[data-imagetype=application] {
  background-image: var(--default-background-image-cvinverted);
}
img[data-imagetype=receipt] {
  background-image: var(--default-background-image-documentinverted);
}
img[data-imagetype=app] {
  background-image: var(--default-background-image-menu);
}

.hidden {
  visibility: hidden;
}

.none {
  display: none !important;
}

.scrolly {
  overflow-y: scroll;
}

.scrollx {
  overflow-x: scroll;
}

/* _body.scss */
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
  flex-direction: column;
  height: 100vh;
  height: -webkit-fill-available;
  width: 100vw;
  overscroll-behavior: none;
  position: unset !important;
  touch-action: manipulation;
  height: -webkit-fill-available;
  background: var(--background);
  /*
  display: flex;
  overflow: hidden;
  */
  /* CHANGE DONE */
}

body.no_select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
body.no_select div#body {
  pointer-events: none;
}

body.left {
  flex-direction: row;
}

* {
  box-sizing: border-box;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  position: relative;
  text-decoration: none;
}

*:not(#search_results, .show_scrollbar, div.modal)::-webkit-scrollbar {
  display: none;
}

div.flex_full *[data-grow="1"], *[data-force-grow="1"] {
  flex-grow: 1;
}

div.flex_full *[data-grow="0"], *[data-force-grow="0"] {
  flex-grow: 0;
}

div.flex_full *[data-shrink="1"], *[data-force-shrink="1"] {
  flex-shrink: 1;
}

div.flex_full *[data-shrink="0"], *[data-force-shrink="0"] {
  flex-shrink: 0;
}

div.column2 {
  min-width: 0px;
  width: calc(var(--column-width) * 2 + var(--gutter-width) * 2);
}

div.column3 {
  min-width: 0px;
  width: calc(var(--column-width) * 3 + var(--gutter-width) * 3);
}

div.column4 {
  min-width: 0px;
  width: calc(var(--column-width) * 4 + var(--gutter-width) * 4);
}

div.column5 {
  min-width: 0px;
  width: calc(var(--column-width) * 5 + var(--gutter-width) * 5);
}

div.column6 {
  min-width: 0px;
  width: calc(var(--column-width) * 6 + var(--gutter-width) * 6);
}

@media (max-width: 850px) {
  body {
    /*
    */
    display: flex;
    overflow: hidden;
    /* CHANGE DONE */
  }
}
/* _animations.scss */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/* _buttons.scss */ /* _colours.scss */
a.button, a.button_status {
  height: 50px;
  background: #407EC9;
  display: inline-flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border-radius: 10px;
  font-weight: 700;
  color: #FFF;
  text-transform: uppercase;
  font-size: 14px;
  cursor: default;
  opacity: 0.25;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  flex-shrink: 0;
  text-align: center;
}
a.button.target:not(.active), a.button_status.target:not(.active) {
  cursor: not-allowed !important;
}
a.button svg, a.button_status svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  fill: #FFF;
  flex-shrink: 0;
}
a.button svg.extrasmall, a.button_status svg.extrasmall {
  width: 10px;
  height: 10px;
}
a.button svg.small, a.button_status svg.small {
  width: 12px;
  height: 12px;
}
a.button svg.large, a.button_status svg.large {
  width: 16px;
  height: 16px;
}
a.button svg.extralarge, a.button_status svg.extralarge {
  width: 18px;
  height: 18px;
}
a.button.icon_left svg, a.button_status.icon_left svg {
  margin-right: 5px;
}
a.button.icon_right svg, a.button_status.icon_right svg {
  margin-left: 5px;
}
a.button.active, a.button_status.active {
  opacity: 1;
  cursor: pointer;
}
@media (hover: hover) {
  a.button.active:hover, a.button_status.active:hover {
    background: var(--colour-blue-hover);
  }
}
a.button.active:active, a.button_status.active:active {
  background: var(--colour-blue-active);
}
a.button.loading, a.button_status.loading {
  opacity: 1;
  cursor: pointer;
  background: var(--loading-bg) !important;
}
a.button.whitetheme, a.button_status.whitetheme {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitetheme svg, a.button_status.whitetheme svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitetheme.button_status, a.button_status.whitetheme.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitetheme.button_status svg, a.button_status.whitetheme.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitetheme.active, a.button_status.whitetheme.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitetheme.active svg, a.button_status.whitetheme.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitetheme.active.start_coloured, a.button_status.whitetheme.active.start_coloured {
  color: var(--theme-colour);
}
a.button.whitetheme.active.start_coloured svg, a.button_status.whitetheme.active.start_coloured svg {
  fill: var(--theme-colour);
}
@media (hover: hover) {
  a.button.whitetheme.active:hover, a.button_status.whitetheme.active:hover {
    color: var(--theme-colour-active);
  }
  a.button.whitetheme.active:hover svg, a.button_status.whitetheme.active:hover svg {
    fill: var(--theme-colour-active);
  }
}
a.button.whitetheme.active:active, a.button_status.whitetheme.active:active {
  color: var(--theme-colour-active);
}
a.button.whitetheme.active:active svg, a.button_status.whitetheme.active:active svg {
  fill: var(--theme-colour-active);
}
a.button.whiteblue, a.button_status.whiteblue {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whiteblue svg, a.button_status.whiteblue svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whiteblue.button_status, a.button_status.whiteblue.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteblue.button_status svg, a.button_status.whiteblue.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whiteblue.active, a.button_status.whiteblue.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteblue.active svg, a.button_status.whiteblue.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whiteblue.active.start_coloured, a.button_status.whiteblue.active.start_coloured {
  color: var(--colour-blue);
}
a.button.whiteblue.active.start_coloured svg, a.button_status.whiteblue.active.start_coloured svg {
  fill: var(--colour-blue);
}
@media (hover: hover) {
  a.button.whiteblue.active:hover, a.button_status.whiteblue.active:hover {
    color: var(--colour-blue-active);
  }
  a.button.whiteblue.active:hover svg, a.button_status.whiteblue.active:hover svg {
    fill: var(--colour-blue-active);
  }
}
a.button.whiteblue.active:active, a.button_status.whiteblue.active:active {
  color: var(--colour-dark-blue-active);
}
a.button.whiteblue.active:active svg, a.button_status.whiteblue.active:active svg {
  fill: var(--colour-dark-blue-active);
}
a.button.custom-pink, a.button_status.custom-pink {
  background: var(--colour-custom-pink);
}
@media (hover: hover) {
  a.button.custom-pink.active:hover, a.button_status.custom-pink.active:hover {
    background: var(--colour-custom-pink-hover);
  }
}
a.button.custom-pink.active:active, a.button_status.custom-pink.active:active {
  background: var(--colour-custom-pink-active);
}
a.button.whitecustom-pink, a.button_status.whitecustom-pink {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitecustom-pink svg, a.button_status.whitecustom-pink svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitecustom-pink.button_status, a.button_status.whitecustom-pink.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-pink.button_status svg, a.button_status.whitecustom-pink.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitecustom-pink.active, a.button_status.whitecustom-pink.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-pink.active svg, a.button_status.whitecustom-pink.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-pink.active.start_coloured, a.button_status.whitecustom-pink.active.start_coloured {
  color: var(--colour-custom-pink);
}
a.button.whitecustom-pink.active.start_coloured svg, a.button_status.whitecustom-pink.active.start_coloured svg {
  fill: var(--colour-custom-pink);
}
@media (hover: hover) {
  a.button.whitecustom-pink.active:hover, a.button_status.whitecustom-pink.active:hover {
    color: var(--colour-custom-pink-active);
  }
  a.button.whitecustom-pink.active:hover svg, a.button_status.whitecustom-pink.active:hover svg {
    fill: var(--colour-custom-pink-active);
  }
}
a.button.whitecustom-pink.active:active, a.button_status.whitecustom-pink.active:active {
  color: var(--colour-dark-custom-pink-active);
}
a.button.whitecustom-pink.active:active svg, a.button_status.whitecustom-pink.active:active svg {
  fill: var(--colour-dark-custom-pink-active);
}
a.button.custom-graphite, a.button_status.custom-graphite {
  background: var(--colour-custom-graphite);
}
@media (hover: hover) {
  a.button.custom-graphite.active:hover, a.button_status.custom-graphite.active:hover {
    background: var(--colour-custom-graphite-hover);
  }
}
a.button.custom-graphite.active:active, a.button_status.custom-graphite.active:active {
  background: var(--colour-custom-graphite-active);
}
a.button.whitecustom-graphite, a.button_status.whitecustom-graphite {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitecustom-graphite svg, a.button_status.whitecustom-graphite svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitecustom-graphite.button_status, a.button_status.whitecustom-graphite.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-graphite.button_status svg, a.button_status.whitecustom-graphite.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitecustom-graphite.active, a.button_status.whitecustom-graphite.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-graphite.active svg, a.button_status.whitecustom-graphite.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-graphite.active.start_coloured, a.button_status.whitecustom-graphite.active.start_coloured {
  color: var(--colour-custom-graphite);
}
a.button.whitecustom-graphite.active.start_coloured svg, a.button_status.whitecustom-graphite.active.start_coloured svg {
  fill: var(--colour-custom-graphite);
}
@media (hover: hover) {
  a.button.whitecustom-graphite.active:hover, a.button_status.whitecustom-graphite.active:hover {
    color: var(--colour-custom-graphite-active);
  }
  a.button.whitecustom-graphite.active:hover svg, a.button_status.whitecustom-graphite.active:hover svg {
    fill: var(--colour-custom-graphite-active);
  }
}
a.button.whitecustom-graphite.active:active, a.button_status.whitecustom-graphite.active:active {
  color: var(--colour-dark-custom-graphite-active);
}
a.button.whitecustom-graphite.active:active svg, a.button_status.whitecustom-graphite.active:active svg {
  fill: var(--colour-dark-custom-graphite-active);
}
a.button.custom-fpgreen, a.button_status.custom-fpgreen {
  background: var(--colour-custom-fpgreen);
}
@media (hover: hover) {
  a.button.custom-fpgreen.active:hover, a.button_status.custom-fpgreen.active:hover {
    background: var(--colour-custom-fpgreen-hover);
  }
}
a.button.custom-fpgreen.active:active, a.button_status.custom-fpgreen.active:active {
  background: var(--colour-custom-fpgreen-active);
}
a.button.whitecustom-fpgreen, a.button_status.whitecustom-fpgreen {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitecustom-fpgreen svg, a.button_status.whitecustom-fpgreen svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitecustom-fpgreen.button_status, a.button_status.whitecustom-fpgreen.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-fpgreen.button_status svg, a.button_status.whitecustom-fpgreen.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitecustom-fpgreen.active, a.button_status.whitecustom-fpgreen.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-fpgreen.active svg, a.button_status.whitecustom-fpgreen.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitecustom-fpgreen.active.start_coloured, a.button_status.whitecustom-fpgreen.active.start_coloured {
  color: var(--colour-custom-fpgreen);
}
a.button.whitecustom-fpgreen.active.start_coloured svg, a.button_status.whitecustom-fpgreen.active.start_coloured svg {
  fill: var(--colour-custom-fpgreen);
}
@media (hover: hover) {
  a.button.whitecustom-fpgreen.active:hover, a.button_status.whitecustom-fpgreen.active:hover {
    color: var(--colour-custom-fpgreen-active);
  }
  a.button.whitecustom-fpgreen.active:hover svg, a.button_status.whitecustom-fpgreen.active:hover svg {
    fill: var(--colour-custom-fpgreen-active);
  }
}
a.button.whitecustom-fpgreen.active:active, a.button_status.whitecustom-fpgreen.active:active {
  color: var(--colour-dark-custom-fpgreen-active);
}
a.button.whitecustom-fpgreen.active:active svg, a.button_status.whitecustom-fpgreen.active:active svg {
  fill: var(--colour-dark-custom-fpgreen-active);
}
a.button.red, a.button_status.red {
  background: var(--colour-red);
}
@media (hover: hover) {
  a.button.red.active:hover, a.button_status.red.active:hover {
    background: var(--colour-red-hover);
  }
}
a.button.red.active:active, a.button_status.red.active:active {
  background: var(--colour-red-active);
}
a.button.whitered, a.button_status.whitered {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitered svg, a.button_status.whitered svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitered.button_status, a.button_status.whitered.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitered.button_status svg, a.button_status.whitered.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitered.active, a.button_status.whitered.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitered.active svg, a.button_status.whitered.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitered.active.start_coloured, a.button_status.whitered.active.start_coloured {
  color: var(--colour-red);
}
a.button.whitered.active.start_coloured svg, a.button_status.whitered.active.start_coloured svg {
  fill: var(--colour-red);
}
@media (hover: hover) {
  a.button.whitered.active:hover, a.button_status.whitered.active:hover {
    color: var(--colour-red-active);
  }
  a.button.whitered.active:hover svg, a.button_status.whitered.active:hover svg {
    fill: var(--colour-red-active);
  }
}
a.button.whitered.active:active, a.button_status.whitered.active:active {
  color: var(--colour-dark-red-active);
}
a.button.whitered.active:active svg, a.button_status.whitered.active:active svg {
  fill: var(--colour-dark-red-active);
}
a.button.orange, a.button_status.orange {
  background: var(--colour-orange);
}
@media (hover: hover) {
  a.button.orange.active:hover, a.button_status.orange.active:hover {
    background: var(--colour-orange-hover);
  }
}
a.button.orange.active:active, a.button_status.orange.active:active {
  background: var(--colour-orange-active);
}
a.button.whiteorange, a.button_status.whiteorange {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whiteorange svg, a.button_status.whiteorange svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whiteorange.button_status, a.button_status.whiteorange.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteorange.button_status svg, a.button_status.whiteorange.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whiteorange.active, a.button_status.whiteorange.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteorange.active svg, a.button_status.whiteorange.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whiteorange.active.start_coloured, a.button_status.whiteorange.active.start_coloured {
  color: var(--colour-orange);
}
a.button.whiteorange.active.start_coloured svg, a.button_status.whiteorange.active.start_coloured svg {
  fill: var(--colour-orange);
}
@media (hover: hover) {
  a.button.whiteorange.active:hover, a.button_status.whiteorange.active:hover {
    color: var(--colour-orange-active);
  }
  a.button.whiteorange.active:hover svg, a.button_status.whiteorange.active:hover svg {
    fill: var(--colour-orange-active);
  }
}
a.button.whiteorange.active:active, a.button_status.whiteorange.active:active {
  color: var(--colour-dark-orange-active);
}
a.button.whiteorange.active:active svg, a.button_status.whiteorange.active:active svg {
  fill: var(--colour-dark-orange-active);
}
a.button.yellow, a.button_status.yellow {
  background: var(--colour-yellow);
}
@media (hover: hover) {
  a.button.yellow.active:hover, a.button_status.yellow.active:hover {
    background: var(--colour-yellow-hover);
  }
}
a.button.yellow.active:active, a.button_status.yellow.active:active {
  background: var(--colour-yellow-active);
}
a.button.whiteyellow, a.button_status.whiteyellow {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whiteyellow svg, a.button_status.whiteyellow svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whiteyellow.button_status, a.button_status.whiteyellow.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteyellow.button_status svg, a.button_status.whiteyellow.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whiteyellow.active, a.button_status.whiteyellow.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteyellow.active svg, a.button_status.whiteyellow.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whiteyellow.active.start_coloured, a.button_status.whiteyellow.active.start_coloured {
  color: var(--colour-yellow);
}
a.button.whiteyellow.active.start_coloured svg, a.button_status.whiteyellow.active.start_coloured svg {
  fill: var(--colour-yellow);
}
@media (hover: hover) {
  a.button.whiteyellow.active:hover, a.button_status.whiteyellow.active:hover {
    color: var(--colour-yellow-active);
  }
  a.button.whiteyellow.active:hover svg, a.button_status.whiteyellow.active:hover svg {
    fill: var(--colour-yellow-active);
  }
}
a.button.whiteyellow.active:active, a.button_status.whiteyellow.active:active {
  color: var(--colour-dark-yellow-active);
}
a.button.whiteyellow.active:active svg, a.button_status.whiteyellow.active:active svg {
  fill: var(--colour-dark-yellow-active);
}
a.button.green, a.button_status.green {
  background: var(--colour-green);
}
@media (hover: hover) {
  a.button.green.active:hover, a.button_status.green.active:hover {
    background: var(--colour-green-hover);
  }
}
a.button.green.active:active, a.button_status.green.active:active {
  background: var(--colour-green-active);
}
a.button.whitegreen, a.button_status.whitegreen {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitegreen svg, a.button_status.whitegreen svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitegreen.button_status, a.button_status.whitegreen.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitegreen.button_status svg, a.button_status.whitegreen.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitegreen.active, a.button_status.whitegreen.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitegreen.active svg, a.button_status.whitegreen.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitegreen.active.start_coloured, a.button_status.whitegreen.active.start_coloured {
  color: var(--colour-green);
}
a.button.whitegreen.active.start_coloured svg, a.button_status.whitegreen.active.start_coloured svg {
  fill: var(--colour-green);
}
@media (hover: hover) {
  a.button.whitegreen.active:hover, a.button_status.whitegreen.active:hover {
    color: var(--colour-green-active);
  }
  a.button.whitegreen.active:hover svg, a.button_status.whitegreen.active:hover svg {
    fill: var(--colour-green-active);
  }
}
a.button.whitegreen.active:active, a.button_status.whitegreen.active:active {
  color: var(--colour-dark-green-active);
}
a.button.whitegreen.active:active svg, a.button_status.whitegreen.active:active svg {
  fill: var(--colour-dark-green-active);
}
a.button.blue, a.button_status.blue {
  background: var(--colour-blue);
}
@media (hover: hover) {
  a.button.blue.active:hover, a.button_status.blue.active:hover {
    background: var(--colour-blue-hover);
  }
}
a.button.blue.active:active, a.button_status.blue.active:active {
  background: var(--colour-blue-active);
}
a.button.whiteblue, a.button_status.whiteblue {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whiteblue svg, a.button_status.whiteblue svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whiteblue.button_status, a.button_status.whiteblue.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteblue.button_status svg, a.button_status.whiteblue.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whiteblue.active, a.button_status.whiteblue.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteblue.active svg, a.button_status.whiteblue.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whiteblue.active.start_coloured, a.button_status.whiteblue.active.start_coloured {
  color: var(--colour-blue);
}
a.button.whiteblue.active.start_coloured svg, a.button_status.whiteblue.active.start_coloured svg {
  fill: var(--colour-blue);
}
@media (hover: hover) {
  a.button.whiteblue.active:hover, a.button_status.whiteblue.active:hover {
    color: var(--colour-blue-active);
  }
  a.button.whiteblue.active:hover svg, a.button_status.whiteblue.active:hover svg {
    fill: var(--colour-blue-active);
  }
}
a.button.whiteblue.active:active, a.button_status.whiteblue.active:active {
  color: var(--colour-dark-blue-active);
}
a.button.whiteblue.active:active svg, a.button_status.whiteblue.active:active svg {
  fill: var(--colour-dark-blue-active);
}
a.button.indigo, a.button_status.indigo {
  background: var(--colour-indigo);
}
@media (hover: hover) {
  a.button.indigo.active:hover, a.button_status.indigo.active:hover {
    background: var(--colour-indigo-hover);
  }
}
a.button.indigo.active:active, a.button_status.indigo.active:active {
  background: var(--colour-indigo-active);
}
a.button.whiteindigo, a.button_status.whiteindigo {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whiteindigo svg, a.button_status.whiteindigo svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whiteindigo.button_status, a.button_status.whiteindigo.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteindigo.button_status svg, a.button_status.whiteindigo.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whiteindigo.active, a.button_status.whiteindigo.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteindigo.active svg, a.button_status.whiteindigo.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whiteindigo.active.start_coloured, a.button_status.whiteindigo.active.start_coloured {
  color: var(--colour-indigo);
}
a.button.whiteindigo.active.start_coloured svg, a.button_status.whiteindigo.active.start_coloured svg {
  fill: var(--colour-indigo);
}
@media (hover: hover) {
  a.button.whiteindigo.active:hover, a.button_status.whiteindigo.active:hover {
    color: var(--colour-indigo-active);
  }
  a.button.whiteindigo.active:hover svg, a.button_status.whiteindigo.active:hover svg {
    fill: var(--colour-indigo-active);
  }
}
a.button.whiteindigo.active:active, a.button_status.whiteindigo.active:active {
  color: var(--colour-dark-indigo-active);
}
a.button.whiteindigo.active:active svg, a.button_status.whiteindigo.active:active svg {
  fill: var(--colour-dark-indigo-active);
}
a.button.violet, a.button_status.violet {
  background: var(--colour-violet);
}
@media (hover: hover) {
  a.button.violet.active:hover, a.button_status.violet.active:hover {
    background: var(--colour-violet-hover);
  }
}
a.button.violet.active:active, a.button_status.violet.active:active {
  background: var(--colour-violet-active);
}
a.button.whiteviolet, a.button_status.whiteviolet {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whiteviolet svg, a.button_status.whiteviolet svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whiteviolet.button_status, a.button_status.whiteviolet.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteviolet.button_status svg, a.button_status.whiteviolet.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whiteviolet.active, a.button_status.whiteviolet.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whiteviolet.active svg, a.button_status.whiteviolet.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whiteviolet.active.start_coloured, a.button_status.whiteviolet.active.start_coloured {
  color: var(--colour-violet);
}
a.button.whiteviolet.active.start_coloured svg, a.button_status.whiteviolet.active.start_coloured svg {
  fill: var(--colour-violet);
}
@media (hover: hover) {
  a.button.whiteviolet.active:hover, a.button_status.whiteviolet.active:hover {
    color: var(--colour-violet-active);
  }
  a.button.whiteviolet.active:hover svg, a.button_status.whiteviolet.active:hover svg {
    fill: var(--colour-violet-active);
  }
}
a.button.whiteviolet.active:active, a.button_status.whiteviolet.active:active {
  color: var(--colour-dark-violet-active);
}
a.button.whiteviolet.active:active svg, a.button_status.whiteviolet.active:active svg {
  fill: var(--colour-dark-violet-active);
}
a.button.grey, a.button_status.grey {
  background: var(--colour-grey);
}
@media (hover: hover) {
  a.button.grey.active:hover, a.button_status.grey.active:hover {
    background: var(--colour-grey-hover);
  }
}
a.button.grey.active:active, a.button_status.grey.active:active {
  background: var(--colour-grey-active);
}
a.button.whitegrey, a.button_status.whitegrey {
  background: transparent !important;
  color: var(--whitebutton-text-colour);
}
a.button.whitegrey svg, a.button_status.whitegrey svg {
  fill: var(--whitebutton-text-colour);
}
a.button.whitegrey.button_status, a.button_status.whitegrey.button_status {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitegrey.button_status svg, a.button_status.whitegrey.button_status svg {
  fill: var(--whitebutton-text-colour-active) !important;
}
a.button.whitegrey.active, a.button_status.whitegrey.active {
  color: var(--whitebutton-text-colour-active);
}
a.button.whitegrey.active svg, a.button_status.whitegrey.active svg {
  fill: var(--whitebutton-text-colour-active);
}
a.button.whitegrey.active.start_coloured, a.button_status.whitegrey.active.start_coloured {
  color: var(--colour-grey);
}
a.button.whitegrey.active.start_coloured svg, a.button_status.whitegrey.active.start_coloured svg {
  fill: var(--colour-grey);
}
@media (hover: hover) {
  a.button.whitegrey.active:hover, a.button_status.whitegrey.active:hover {
    color: var(--colour-grey-active);
  }
  a.button.whitegrey.active:hover svg, a.button_status.whitegrey.active:hover svg {
    fill: var(--colour-grey-active);
  }
}
a.button.whitegrey.active:active, a.button_status.whitegrey.active:active {
  color: var(--colour-dark-grey-active);
}
a.button.whitegrey.active:active svg, a.button_status.whitegrey.active:active svg {
  fill: var(--colour-dark-grey-active);
}

a.button_status {
  opacity: 1;
  display: none;
  justify-content: center;
}
a.button_status[data-status=success] {
  background: #36B835;
}
a.button_status[data-status=fail] {
  background: #CE3030;
}
a.button_status svg.loading_spinner {
  fill: transparent !important;
}

a.button[data-status=processing] {
  display: none;
}
a.button[data-status=processing] + a.button_status {
  display: inline-flex;
}

span.action {
  display: inline-flex;
  width: 50px;
  height: 50px;
  margin-right: 0;
  border-radius: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
span.action input {
  display: none;
}
span.action svg {
  width: 20px;
  fill: #999;
}
span.action span.hover_title {
  color: #e5e5e5;
  background: rgba(51, 51, 51, 0.9);
  height: 35px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 15px;
  text-align: center;
  white-space: nowrap;
  display: none;
  position: fixed;
  margin-bottom: 90px;
  z-index: 2;
}
@media (hover: hover) {
  span.action:hover {
    background: #ECF5FF;
  }
  span.action:hover svg {
    fill: #407EC9;
  }
  span.action:hover span.hover_title {
    display: inline-block;
  }
}
span.action:active {
  background: #CFE7FF;
}
span.action:active svg {
  fill: #3971B5;
}
span.action:active span.hover_title {
  display: inline-block;
}
span.action.sendas.sendas.person {
  border-radius: 25px;
}
span.action.sendas img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
span.action.sendas img.person {
  border-radius: 20px;
}

span#sharePage {
  display: flex;
  float: right;
  margin: 0 0 20px 20px;
  background: var(--input-background-colour);
  width: 40px;
  height: 40px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}
span#sharePage svg {
  width: 20px;
  height: 20px;
  fill: #999;
}
@media (hover: hover) {
  span#sharePage:hover {
    background: var(--theme-bg-hover);
  }
  span#sharePage:hover svg {
    fill: var(--theme-colour);
  }
}
span#sharePage:active {
  background: var(--theme-bg-active);
}
span#sharePage:active svg {
  fill: var(--theme-colour-hover);
}

/* _header.scss */ /* _colours.scss */
header {
  height: 61px;
  background: var(--content-background-colour);
  border-bottom: 1px solid var(--layout-border-colour);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  column-gap: 10px;
  padding: 0 10px;
  justify-content: center;
}
header input {
  height: 45px !important;
  margin: 0 35px 0 35px !important;
  min-width: 200px;
  max-width: 600px;
  flex-shrink: 1;
}
header a.header_button, header span.header_button {
  height: 45px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 20px 0 20px;
  color: #666;
  cursor: pointer;
  flex-grow: 0;
  flex-shrink: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  border-radius: 10px;
}
header a.header_button > svg, header span.header_button > svg {
  width: 18px;
  height: 18px;
  fill: #999;
  flex-shrink: 0;
}
header a.header_button > svg.actionIcon, header span.header_button > svg.actionIcon {
  display: none;
}
header a.header_button > img.person, header span.header_button > img.person {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: url("https://images.crewlist.co/icons/people/colour/FFFFFF");
  flex-shrink: 0;
}
header a.header_button.action, header span.header_button.action {
  border-radius: 24px;
  padding: 0 20px 0 20px;
  margin-right: 20px;
  width: inherit;
}
header a.header_button div.hover_holder, header span.header_button div.hover_holder {
  position: absolute;
  min-width: 250px;
  z-index: 2;
  top: 45px;
  left: 0;
  display: none;
}
header a.header_button div.hover_holder div.hover_body, header span.header_button div.hover_holder div.hover_body {
  width: 100%;
  background: var(--modal-background);
  border-radius: 5px;
  margin-top: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  cursor: default;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: stretch;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item, header span.header_button div.hover_holder div.hover_body div.header_modal_item {
  min-height: 60px;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 10px;
  column-gap: 5px;
  border-bottom: 1px solid var(--item-border);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-decoration: none;
  cursor: pointer;
  width: auto;
  flex-grow: 1;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item span.counter, header span.header_button div.hover_holder div.hover_body div.header_modal_item span.counter {
  margin: 0 5px;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item > svg, header span.header_button div.hover_holder div.hover_body div.header_modal_item > svg {
  width: 40px;
  height: 40px;
  padding: 10px;
  fill: var(--item-secondary-text);
  flex-shrink: 0;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item div.text, header span.header_button div.hover_holder div.hover_body div.header_modal_item div.text {
  flex-grow: 1;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  flex-shrink: 1;
  max-width: calc(100% - 45px);
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.main, header span.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.main {
  color: var(--item-primary-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.secondary, header span.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.secondary {
  color: var(--item-secondary-text);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.secondary svg, header span.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.secondary svg {
  fill: var(--item-secondary-text);
  vertical-align: top;
  margin-top: 2px;
  margin-right: 3px;
  display: inline-block;
  width: 12px;
  height: 12px;
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.tertiary, header span.header_button div.hover_holder div.hover_body div.header_modal_item div.text span.tertiary {
  color: var(--item-tertiary-text);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
@media (hover: hover) {
  header a.header_button div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--theme-bg-hover);
    border-bottom: 1px solid var(--theme-bg-hover);
  }
  header a.header_button div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--theme-colour);
  }
  header a.header_button div.hover_holder div.hover_body div.header_modal_item:hover div.text span.main, header span.header_button div.hover_holder div.hover_body div.header_modal_item:hover div.text span.main {
    color: var(--theme-colour-hover);
  }
  header a.header_button div.hover_holder div.hover_body div.header_modal_item:hover div.text span.secondary, header span.header_button div.hover_holder div.hover_body div.header_modal_item:hover div.text span.secondary {
    color: var(--theme-colour);
  }
  header a.header_button div.hover_holder div.hover_body div.header_modal_item:hover div.text span.tertiary, header span.header_button div.hover_holder div.hover_body div.header_modal_item:hover div.text span.tertiary {
    color: var(--theme-text-tertiary-hover);
  }
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--theme-bg-active);
  border-bottom: 1px solid var(--theme-bg-active);
}
header a.header_button div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--theme-colour-hover);
}
header a.header_button div.hover_holder div.hover_body > div.header_modal_item:last-of-type, header a.header_button div.hover_holder div.hover_body > a:last-of-type div.header_modal_item, header span.header_button div.hover_holder div.hover_body > div.header_modal_item:last-of-type, header span.header_button div.hover_holder div.hover_body > a:last-of-type div.header_modal_item {
  border-bottom: 1px solid transparent;
}
@media (hover: hover) {
  header a.header_button:not(.no_hover, .active):hover, header span.header_button:not(.no_hover, .active):hover {
    background: #ECF5FF;
    color: var(--colour-blue-hover);
  }
  header a.header_button:not(.no_hover, .active):hover svg, header span.header_button:not(.no_hover, .active):hover svg {
    fill: var(--colour-blue);
  }
  header a.header_button:not(.no_hover, .active):hover div.hover_holder, header span.header_button:not(.no_hover, .active):hover div.hover_holder {
    display: block;
  }
}
@media (hover: none) {
  header a.header_button.showmodal:not(.no_hover) div.hover_holder, header span.header_button.showmodal:not(.no_hover) div.hover_holder {
    display: block;
  }
}
header a.header_button:not(.no_active, .active):active, header span.header_button:not(.no_active, .active):active {
  background: #CFE7FF;
  color: var(--colour-blue-active);
}
header a.header_button:not(.no_active, .active):active svg, header span.header_button:not(.no_active, .active):active svg {
  fill: var(--colour-blue-hover);
}
header a.header_button.active, header span.header_button.active {
  background: var(--colour-blue);
  color: #FFF;
}
header a.header_button.active svg, header span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.active:hover, header span.header_button.active:hover {
    background: var(--colour-blue-hover);
  }
}
header a.header_button.active:active, header span.header_button.active:active {
  background: var(--colour-blue-active);
}
header a.header_button.active span.counter, header span.header_button.active span.counter {
  display: none;
}
header a.header_button.red, header a.header_button.whitered, header span.header_button.red, header span.header_button.whitered {
  color: var(--colour-red);
}
header a.header_button.red svg, header a.header_button.whitered svg, header span.header_button.red svg, header span.header_button.whitered svg {
  fill: var(--colour-red);
}
@media (hover: hover) {
  header a.header_button.red:not(.no_hover, .active):hover, header a.header_button.whitered:not(.no_hover, .active):hover, header span.header_button.red:not(.no_hover, .active):hover, header span.header_button.whitered:not(.no_hover, .active):hover {
    background: var(--colour-highlight-red-hover);
    color: var(--colour-red-hover);
  }
  header a.header_button.red:not(.no_hover, .active):hover svg, header a.header_button.whitered:not(.no_hover, .active):hover svg, header span.header_button.red:not(.no_hover, .active):hover svg, header span.header_button.whitered:not(.no_hover, .active):hover svg {
    fill: var(--colour-red-hover);
  }
}
header a.header_button.red:not(.no_active, .active):active, header a.header_button.whitered:not(.no_active, .active):active, header span.header_button.red:not(.no_active, .active):active, header span.header_button.whitered:not(.no_active, .active):active {
  background: var(--colour-highlight-red-active);
  color: var(--colour-red-active);
}
header a.header_button.red:not(.no_active, .active):active svg, header a.header_button.whitered:not(.no_active, .active):active svg, header span.header_button.red:not(.no_active, .active):active svg, header span.header_button.whitered:not(.no_active, .active):active svg {
  fill: var(--colour-red-active);
}
header a.header_button.red.active, header a.header_button.whitered.active, header span.header_button.red.active, header span.header_button.whitered.active {
  background: var(--colour-red);
  color: #FFF;
}
header a.header_button.red.active svg, header a.header_button.whitered.active svg, header span.header_button.red.active svg, header span.header_button.whitered.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.red.active:hover, header a.header_button.whitered.active:hover, header span.header_button.red.active:hover, header span.header_button.whitered.active:hover {
    background: var(--colour-red-hover);
  }
}
header a.header_button.red.active:active, header a.header_button.whitered.active:active, header span.header_button.red.active:active, header span.header_button.whitered.active:active {
  background: var(--colour-red-active);
}
header a.header_button.red.active span.counter, header a.header_button.whitered.active span.counter, header span.header_button.red.active span.counter, header span.header_button.whitered.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-red-hover);
    border-bottom: 1px solid var(--colour-highlight-red-hover);
  }
  header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-red-hover);
  }
  header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-red-hover);
  }
  header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-red);
  }
  header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-red-80);
  }
}
header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-red-active);
  border-bottom: 1px solid var(--colour-highlight-red-active);
}
header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-red-active);
}
header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-red-active);
}
header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-red-hover);
}
header a.header_button.red div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.red div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whitered div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-red);
}
header a.header_button.orange, header a.header_button.whiteorange, header span.header_button.orange, header span.header_button.whiteorange {
  color: var(--colour-orange);
}
header a.header_button.orange svg, header a.header_button.whiteorange svg, header span.header_button.orange svg, header span.header_button.whiteorange svg {
  fill: var(--colour-orange);
}
@media (hover: hover) {
  header a.header_button.orange:not(.no_hover, .active):hover, header a.header_button.whiteorange:not(.no_hover, .active):hover, header span.header_button.orange:not(.no_hover, .active):hover, header span.header_button.whiteorange:not(.no_hover, .active):hover {
    background: var(--colour-highlight-orange-hover);
    color: var(--colour-orange-hover);
  }
  header a.header_button.orange:not(.no_hover, .active):hover svg, header a.header_button.whiteorange:not(.no_hover, .active):hover svg, header span.header_button.orange:not(.no_hover, .active):hover svg, header span.header_button.whiteorange:not(.no_hover, .active):hover svg {
    fill: var(--colour-orange-hover);
  }
}
header a.header_button.orange:not(.no_active, .active):active, header a.header_button.whiteorange:not(.no_active, .active):active, header span.header_button.orange:not(.no_active, .active):active, header span.header_button.whiteorange:not(.no_active, .active):active {
  background: var(--colour-highlight-orange-active);
  color: var(--colour-orange-active);
}
header a.header_button.orange:not(.no_active, .active):active svg, header a.header_button.whiteorange:not(.no_active, .active):active svg, header span.header_button.orange:not(.no_active, .active):active svg, header span.header_button.whiteorange:not(.no_active, .active):active svg {
  fill: var(--colour-orange-active);
}
header a.header_button.orange.active, header a.header_button.whiteorange.active, header span.header_button.orange.active, header span.header_button.whiteorange.active {
  background: var(--colour-orange);
  color: #FFF;
}
header a.header_button.orange.active svg, header a.header_button.whiteorange.active svg, header span.header_button.orange.active svg, header span.header_button.whiteorange.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.orange.active:hover, header a.header_button.whiteorange.active:hover, header span.header_button.orange.active:hover, header span.header_button.whiteorange.active:hover {
    background: var(--colour-orange-hover);
  }
}
header a.header_button.orange.active:active, header a.header_button.whiteorange.active:active, header span.header_button.orange.active:active, header span.header_button.whiteorange.active:active {
  background: var(--colour-orange-active);
}
header a.header_button.orange.active span.counter, header a.header_button.whiteorange.active span.counter, header span.header_button.orange.active span.counter, header span.header_button.whiteorange.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-orange-hover);
    border-bottom: 1px solid var(--colour-highlight-orange-hover);
  }
  header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-orange-hover);
  }
  header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-orange-hover);
  }
  header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-orange);
  }
  header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-orange-80);
  }
}
header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-orange-active);
  border-bottom: 1px solid var(--colour-highlight-orange-active);
}
header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-orange-active);
}
header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-orange-active);
}
header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-orange-hover);
}
header a.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.orange div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whiteorange div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-orange);
}
header a.header_button.yellow, header a.header_button.whiteyellow, header span.header_button.yellow, header span.header_button.whiteyellow {
  color: var(--colour-yellow);
}
header a.header_button.yellow svg, header a.header_button.whiteyellow svg, header span.header_button.yellow svg, header span.header_button.whiteyellow svg {
  fill: var(--colour-yellow);
}
@media (hover: hover) {
  header a.header_button.yellow:not(.no_hover, .active):hover, header a.header_button.whiteyellow:not(.no_hover, .active):hover, header span.header_button.yellow:not(.no_hover, .active):hover, header span.header_button.whiteyellow:not(.no_hover, .active):hover {
    background: var(--colour-highlight-yellow-hover);
    color: var(--colour-yellow-hover);
  }
  header a.header_button.yellow:not(.no_hover, .active):hover svg, header a.header_button.whiteyellow:not(.no_hover, .active):hover svg, header span.header_button.yellow:not(.no_hover, .active):hover svg, header span.header_button.whiteyellow:not(.no_hover, .active):hover svg {
    fill: var(--colour-yellow-hover);
  }
}
header a.header_button.yellow:not(.no_active, .active):active, header a.header_button.whiteyellow:not(.no_active, .active):active, header span.header_button.yellow:not(.no_active, .active):active, header span.header_button.whiteyellow:not(.no_active, .active):active {
  background: var(--colour-highlight-yellow-active);
  color: var(--colour-yellow-active);
}
header a.header_button.yellow:not(.no_active, .active):active svg, header a.header_button.whiteyellow:not(.no_active, .active):active svg, header span.header_button.yellow:not(.no_active, .active):active svg, header span.header_button.whiteyellow:not(.no_active, .active):active svg {
  fill: var(--colour-yellow-active);
}
header a.header_button.yellow.active, header a.header_button.whiteyellow.active, header span.header_button.yellow.active, header span.header_button.whiteyellow.active {
  background: var(--colour-yellow);
  color: #FFF;
}
header a.header_button.yellow.active svg, header a.header_button.whiteyellow.active svg, header span.header_button.yellow.active svg, header span.header_button.whiteyellow.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.yellow.active:hover, header a.header_button.whiteyellow.active:hover, header span.header_button.yellow.active:hover, header span.header_button.whiteyellow.active:hover {
    background: var(--colour-yellow-hover);
  }
}
header a.header_button.yellow.active:active, header a.header_button.whiteyellow.active:active, header span.header_button.yellow.active:active, header span.header_button.whiteyellow.active:active {
  background: var(--colour-yellow-active);
}
header a.header_button.yellow.active span.counter, header a.header_button.whiteyellow.active span.counter, header span.header_button.yellow.active span.counter, header span.header_button.whiteyellow.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-yellow-hover);
    border-bottom: 1px solid var(--colour-highlight-yellow-hover);
  }
  header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-yellow-hover);
  }
  header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-yellow-hover);
  }
  header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-yellow);
  }
  header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-yellow-80);
  }
}
header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-yellow-active);
  border-bottom: 1px solid var(--colour-highlight-yellow-active);
}
header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-yellow-active);
}
header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-yellow-active);
}
header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-yellow-hover);
}
header a.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.yellow div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whiteyellow div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-yellow);
}
header a.header_button.green, header a.header_button.whitegreen, header span.header_button.green, header span.header_button.whitegreen {
  color: var(--colour-green);
}
header a.header_button.green svg, header a.header_button.whitegreen svg, header span.header_button.green svg, header span.header_button.whitegreen svg {
  fill: var(--colour-green);
}
@media (hover: hover) {
  header a.header_button.green:not(.no_hover, .active):hover, header a.header_button.whitegreen:not(.no_hover, .active):hover, header span.header_button.green:not(.no_hover, .active):hover, header span.header_button.whitegreen:not(.no_hover, .active):hover {
    background: var(--colour-highlight-green-hover);
    color: var(--colour-green-hover);
  }
  header a.header_button.green:not(.no_hover, .active):hover svg, header a.header_button.whitegreen:not(.no_hover, .active):hover svg, header span.header_button.green:not(.no_hover, .active):hover svg, header span.header_button.whitegreen:not(.no_hover, .active):hover svg {
    fill: var(--colour-green-hover);
  }
}
header a.header_button.green:not(.no_active, .active):active, header a.header_button.whitegreen:not(.no_active, .active):active, header span.header_button.green:not(.no_active, .active):active, header span.header_button.whitegreen:not(.no_active, .active):active {
  background: var(--colour-highlight-green-active);
  color: var(--colour-green-active);
}
header a.header_button.green:not(.no_active, .active):active svg, header a.header_button.whitegreen:not(.no_active, .active):active svg, header span.header_button.green:not(.no_active, .active):active svg, header span.header_button.whitegreen:not(.no_active, .active):active svg {
  fill: var(--colour-green-active);
}
header a.header_button.green.active, header a.header_button.whitegreen.active, header span.header_button.green.active, header span.header_button.whitegreen.active {
  background: var(--colour-green);
  color: #FFF;
}
header a.header_button.green.active svg, header a.header_button.whitegreen.active svg, header span.header_button.green.active svg, header span.header_button.whitegreen.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.green.active:hover, header a.header_button.whitegreen.active:hover, header span.header_button.green.active:hover, header span.header_button.whitegreen.active:hover {
    background: var(--colour-green-hover);
  }
}
header a.header_button.green.active:active, header a.header_button.whitegreen.active:active, header span.header_button.green.active:active, header span.header_button.whitegreen.active:active {
  background: var(--colour-green-active);
}
header a.header_button.green.active span.counter, header a.header_button.whitegreen.active span.counter, header span.header_button.green.active span.counter, header span.header_button.whitegreen.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-green-hover);
    border-bottom: 1px solid var(--colour-highlight-green-hover);
  }
  header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-green-hover);
  }
  header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-green-hover);
  }
  header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-green);
  }
  header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-green-80);
  }
}
header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-green-active);
  border-bottom: 1px solid var(--colour-highlight-green-active);
}
header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-green-active);
}
header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-green-active);
}
header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-green-hover);
}
header a.header_button.green div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.green div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whitegreen div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-green);
}
header a.header_button.blue, header a.header_button.whiteblue, header span.header_button.blue, header span.header_button.whiteblue {
  color: var(--colour-blue);
}
header a.header_button.blue svg, header a.header_button.whiteblue svg, header span.header_button.blue svg, header span.header_button.whiteblue svg {
  fill: var(--colour-blue);
}
@media (hover: hover) {
  header a.header_button.blue:not(.no_hover, .active):hover, header a.header_button.whiteblue:not(.no_hover, .active):hover, header span.header_button.blue:not(.no_hover, .active):hover, header span.header_button.whiteblue:not(.no_hover, .active):hover {
    background: var(--colour-highlight-blue-hover);
    color: var(--colour-blue-hover);
  }
  header a.header_button.blue:not(.no_hover, .active):hover svg, header a.header_button.whiteblue:not(.no_hover, .active):hover svg, header span.header_button.blue:not(.no_hover, .active):hover svg, header span.header_button.whiteblue:not(.no_hover, .active):hover svg {
    fill: var(--colour-blue-hover);
  }
}
header a.header_button.blue:not(.no_active, .active):active, header a.header_button.whiteblue:not(.no_active, .active):active, header span.header_button.blue:not(.no_active, .active):active, header span.header_button.whiteblue:not(.no_active, .active):active {
  background: var(--colour-highlight-blue-active);
  color: var(--colour-blue-active);
}
header a.header_button.blue:not(.no_active, .active):active svg, header a.header_button.whiteblue:not(.no_active, .active):active svg, header span.header_button.blue:not(.no_active, .active):active svg, header span.header_button.whiteblue:not(.no_active, .active):active svg {
  fill: var(--colour-blue-active);
}
header a.header_button.blue.active, header a.header_button.whiteblue.active, header span.header_button.blue.active, header span.header_button.whiteblue.active {
  background: var(--colour-blue);
  color: #FFF;
}
header a.header_button.blue.active svg, header a.header_button.whiteblue.active svg, header span.header_button.blue.active svg, header span.header_button.whiteblue.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.blue.active:hover, header a.header_button.whiteblue.active:hover, header span.header_button.blue.active:hover, header span.header_button.whiteblue.active:hover {
    background: var(--colour-blue-hover);
  }
}
header a.header_button.blue.active:active, header a.header_button.whiteblue.active:active, header span.header_button.blue.active:active, header span.header_button.whiteblue.active:active {
  background: var(--colour-blue-active);
}
header a.header_button.blue.active span.counter, header a.header_button.whiteblue.active span.counter, header span.header_button.blue.active span.counter, header span.header_button.whiteblue.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-blue-hover);
    border-bottom: 1px solid var(--colour-highlight-blue-hover);
  }
  header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-blue-hover);
  }
  header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-blue-hover);
  }
  header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-blue);
  }
  header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-blue-80);
  }
}
header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-blue-active);
  border-bottom: 1px solid var(--colour-highlight-blue-active);
}
header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-blue-active);
}
header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-blue-active);
}
header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-blue-hover);
}
header a.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.blue div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whiteblue div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-blue);
}
header a.header_button.indigo, header a.header_button.whiteindigo, header span.header_button.indigo, header span.header_button.whiteindigo {
  color: var(--colour-indigo);
}
header a.header_button.indigo svg, header a.header_button.whiteindigo svg, header span.header_button.indigo svg, header span.header_button.whiteindigo svg {
  fill: var(--colour-indigo);
}
@media (hover: hover) {
  header a.header_button.indigo:not(.no_hover, .active):hover, header a.header_button.whiteindigo:not(.no_hover, .active):hover, header span.header_button.indigo:not(.no_hover, .active):hover, header span.header_button.whiteindigo:not(.no_hover, .active):hover {
    background: var(--colour-highlight-indigo-hover);
    color: var(--colour-indigo-hover);
  }
  header a.header_button.indigo:not(.no_hover, .active):hover svg, header a.header_button.whiteindigo:not(.no_hover, .active):hover svg, header span.header_button.indigo:not(.no_hover, .active):hover svg, header span.header_button.whiteindigo:not(.no_hover, .active):hover svg {
    fill: var(--colour-indigo-hover);
  }
}
header a.header_button.indigo:not(.no_active, .active):active, header a.header_button.whiteindigo:not(.no_active, .active):active, header span.header_button.indigo:not(.no_active, .active):active, header span.header_button.whiteindigo:not(.no_active, .active):active {
  background: var(--colour-highlight-indigo-active);
  color: var(--colour-indigo-active);
}
header a.header_button.indigo:not(.no_active, .active):active svg, header a.header_button.whiteindigo:not(.no_active, .active):active svg, header span.header_button.indigo:not(.no_active, .active):active svg, header span.header_button.whiteindigo:not(.no_active, .active):active svg {
  fill: var(--colour-indigo-active);
}
header a.header_button.indigo.active, header a.header_button.whiteindigo.active, header span.header_button.indigo.active, header span.header_button.whiteindigo.active {
  background: var(--colour-indigo);
  color: #FFF;
}
header a.header_button.indigo.active svg, header a.header_button.whiteindigo.active svg, header span.header_button.indigo.active svg, header span.header_button.whiteindigo.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.indigo.active:hover, header a.header_button.whiteindigo.active:hover, header span.header_button.indigo.active:hover, header span.header_button.whiteindigo.active:hover {
    background: var(--colour-indigo-hover);
  }
}
header a.header_button.indigo.active:active, header a.header_button.whiteindigo.active:active, header span.header_button.indigo.active:active, header span.header_button.whiteindigo.active:active {
  background: var(--colour-indigo-active);
}
header a.header_button.indigo.active span.counter, header a.header_button.whiteindigo.active span.counter, header span.header_button.indigo.active span.counter, header span.header_button.whiteindigo.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-indigo-hover);
    border-bottom: 1px solid var(--colour-highlight-indigo-hover);
  }
  header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-indigo-hover);
  }
  header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-indigo-hover);
  }
  header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-indigo);
  }
  header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-indigo-80);
  }
}
header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-indigo-active);
  border-bottom: 1px solid var(--colour-highlight-indigo-active);
}
header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-indigo-active);
}
header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-indigo-active);
}
header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-indigo-hover);
}
header a.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.indigo div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whiteindigo div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-indigo);
}
header a.header_button.violet, header a.header_button.whiteviolet, header span.header_button.violet, header span.header_button.whiteviolet {
  color: var(--colour-violet);
}
header a.header_button.violet svg, header a.header_button.whiteviolet svg, header span.header_button.violet svg, header span.header_button.whiteviolet svg {
  fill: var(--colour-violet);
}
@media (hover: hover) {
  header a.header_button.violet:not(.no_hover, .active):hover, header a.header_button.whiteviolet:not(.no_hover, .active):hover, header span.header_button.violet:not(.no_hover, .active):hover, header span.header_button.whiteviolet:not(.no_hover, .active):hover {
    background: var(--colour-highlight-violet-hover);
    color: var(--colour-violet-hover);
  }
  header a.header_button.violet:not(.no_hover, .active):hover svg, header a.header_button.whiteviolet:not(.no_hover, .active):hover svg, header span.header_button.violet:not(.no_hover, .active):hover svg, header span.header_button.whiteviolet:not(.no_hover, .active):hover svg {
    fill: var(--colour-violet-hover);
  }
}
header a.header_button.violet:not(.no_active, .active):active, header a.header_button.whiteviolet:not(.no_active, .active):active, header span.header_button.violet:not(.no_active, .active):active, header span.header_button.whiteviolet:not(.no_active, .active):active {
  background: var(--colour-highlight-violet-active);
  color: var(--colour-violet-active);
}
header a.header_button.violet:not(.no_active, .active):active svg, header a.header_button.whiteviolet:not(.no_active, .active):active svg, header span.header_button.violet:not(.no_active, .active):active svg, header span.header_button.whiteviolet:not(.no_active, .active):active svg {
  fill: var(--colour-violet-active);
}
header a.header_button.violet.active, header a.header_button.whiteviolet.active, header span.header_button.violet.active, header span.header_button.whiteviolet.active {
  background: var(--colour-violet);
  color: #FFF;
}
header a.header_button.violet.active svg, header a.header_button.whiteviolet.active svg, header span.header_button.violet.active svg, header span.header_button.whiteviolet.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.violet.active:hover, header a.header_button.whiteviolet.active:hover, header span.header_button.violet.active:hover, header span.header_button.whiteviolet.active:hover {
    background: var(--colour-violet-hover);
  }
}
header a.header_button.violet.active:active, header a.header_button.whiteviolet.active:active, header span.header_button.violet.active:active, header span.header_button.whiteviolet.active:active {
  background: var(--colour-violet-active);
}
header a.header_button.violet.active span.counter, header a.header_button.whiteviolet.active span.counter, header span.header_button.violet.active span.counter, header span.header_button.whiteviolet.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-violet-hover);
    border-bottom: 1px solid var(--colour-highlight-violet-hover);
  }
  header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-violet-hover);
  }
  header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-violet-hover);
  }
  header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-violet);
  }
  header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-violet-80);
  }
}
header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-violet-active);
  border-bottom: 1px solid var(--colour-highlight-violet-active);
}
header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-violet-active);
}
header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-violet-active);
}
header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-violet-hover);
}
header a.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.violet div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whiteviolet div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-violet);
}
header a.header_button.grey, header a.header_button.whitegrey, header span.header_button.grey, header span.header_button.whitegrey {
  color: var(--colour-grey);
}
header a.header_button.grey svg, header a.header_button.whitegrey svg, header span.header_button.grey svg, header span.header_button.whitegrey svg {
  fill: var(--colour-grey);
}
@media (hover: hover) {
  header a.header_button.grey:not(.no_hover, .active):hover, header a.header_button.whitegrey:not(.no_hover, .active):hover, header span.header_button.grey:not(.no_hover, .active):hover, header span.header_button.whitegrey:not(.no_hover, .active):hover {
    background: var(--colour-highlight-grey-hover);
    color: var(--colour-grey-hover);
  }
  header a.header_button.grey:not(.no_hover, .active):hover svg, header a.header_button.whitegrey:not(.no_hover, .active):hover svg, header span.header_button.grey:not(.no_hover, .active):hover svg, header span.header_button.whitegrey:not(.no_hover, .active):hover svg {
    fill: var(--colour-grey-hover);
  }
}
header a.header_button.grey:not(.no_active, .active):active, header a.header_button.whitegrey:not(.no_active, .active):active, header span.header_button.grey:not(.no_active, .active):active, header span.header_button.whitegrey:not(.no_active, .active):active {
  background: var(--colour-highlight-grey-active);
  color: var(--colour-grey-active);
}
header a.header_button.grey:not(.no_active, .active):active svg, header a.header_button.whitegrey:not(.no_active, .active):active svg, header span.header_button.grey:not(.no_active, .active):active svg, header span.header_button.whitegrey:not(.no_active, .active):active svg {
  fill: var(--colour-grey-active);
}
header a.header_button.grey.active, header a.header_button.whitegrey.active, header span.header_button.grey.active, header span.header_button.whitegrey.active {
  background: var(--colour-grey);
  color: #FFF;
}
header a.header_button.grey.active svg, header a.header_button.whitegrey.active svg, header span.header_button.grey.active svg, header span.header_button.whitegrey.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header a.header_button.grey.active:hover, header a.header_button.whitegrey.active:hover, header span.header_button.grey.active:hover, header span.header_button.whitegrey.active:hover {
    background: var(--colour-grey-hover);
  }
}
header a.header_button.grey.active:active, header a.header_button.whitegrey.active:active, header span.header_button.grey.active:active, header span.header_button.whitegrey.active:active {
  background: var(--colour-grey-active);
}
header a.header_button.grey.active span.counter, header a.header_button.whitegrey.active span.counter, header span.header_button.grey.active span.counter, header span.header_button.whitegrey.active span.counter {
  display: none;
}
@media (hover: hover) {
  header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-grey-hover);
    border-bottom: 1px solid var(--colour-highlight-grey-hover);
  }
  header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover svg, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover svg, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-grey-hover);
  }
  header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover span.main, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover span.main, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-grey-hover);
  }
  header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover span.secondary, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-grey);
  }
  header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-grey-80);
  }
}
header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-grey-active);
  border-bottom: 1px solid var(--colour-highlight-grey-active);
}
header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active svg, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active svg, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-grey-active);
}
header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active span.main, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active span.main, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-grey-active);
}
header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active span.secondary, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-grey-hover);
}
header a.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header a.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.grey div.hover_holder div.hover_body div.header_modal_item:active span.tertiary, header span.header_button.whitegrey div.hover_holder div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-grey);
}
@media (hover: hover) {
  header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-red-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-red-hover) !important;
  }
  header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-red-hover) !important;
  }
  header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-red-hover) !important;
  }
  header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-red) !important;
  }
  header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-red-80) !important;
  }
}
header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-red-active) !important;
  border-bottom: 1px solid var(--colour-highlight-red-active) !important;
}
header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-red-active) !important;
}
header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-red-active) !important;
}
header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-red-hover) !important;
}
header a.header_button div.hover_holder.red div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.red div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-red) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-orange-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-orange-hover) !important;
  }
  header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-orange-hover) !important;
  }
  header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-orange-hover) !important;
  }
  header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-orange) !important;
  }
  header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-orange-80) !important;
  }
}
header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-orange-active) !important;
  border-bottom: 1px solid var(--colour-highlight-orange-active) !important;
}
header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-orange-active) !important;
}
header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-orange-active) !important;
}
header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-orange-hover) !important;
}
header a.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.orange div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-orange) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-yellow-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-yellow-hover) !important;
  }
  header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-yellow-hover) !important;
  }
  header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-yellow-hover) !important;
  }
  header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-yellow) !important;
  }
  header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-yellow-80) !important;
  }
}
header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-yellow-active) !important;
  border-bottom: 1px solid var(--colour-highlight-yellow-active) !important;
}
header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-yellow-active) !important;
}
header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-yellow-active) !important;
}
header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-yellow-hover) !important;
}
header a.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.yellow div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-yellow) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-green-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-green-hover) !important;
  }
  header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-green-hover) !important;
  }
  header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-green-hover) !important;
  }
  header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-green) !important;
  }
  header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-green-80) !important;
  }
}
header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-green-active) !important;
  border-bottom: 1px solid var(--colour-highlight-green-active) !important;
}
header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-green-active) !important;
}
header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-green-active) !important;
}
header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-green-hover) !important;
}
header a.header_button div.hover_holder.green div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.green div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-green) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-blue-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-blue-hover) !important;
  }
  header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-blue-hover) !important;
  }
  header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-blue-hover) !important;
  }
  header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-blue) !important;
  }
  header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-blue-80) !important;
  }
}
header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-blue-active) !important;
  border-bottom: 1px solid var(--colour-highlight-blue-active) !important;
}
header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-blue-active) !important;
}
header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-blue-active) !important;
}
header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-blue-hover) !important;
}
header a.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.blue div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-blue) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-indigo-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-indigo-hover) !important;
  }
  header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-indigo-hover) !important;
  }
  header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-indigo-hover) !important;
  }
  header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-indigo) !important;
  }
  header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-indigo-80) !important;
  }
}
header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-indigo-active) !important;
  border-bottom: 1px solid var(--colour-highlight-indigo-active) !important;
}
header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-indigo-active) !important;
}
header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-indigo-active) !important;
}
header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-indigo-hover) !important;
}
header a.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.indigo div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-indigo) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-violet-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-violet-hover) !important;
  }
  header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-violet-hover) !important;
  }
  header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-violet-hover) !important;
  }
  header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-violet) !important;
  }
  header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-violet-80) !important;
  }
}
header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-violet-active) !important;
  border-bottom: 1px solid var(--colour-highlight-violet-active) !important;
}
header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-violet-active) !important;
}
header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-violet-active) !important;
}
header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-violet-hover) !important;
}
header a.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.violet div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-violet) !important;
}
@media (hover: hover) {
  header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover {
    background: var(--colour-highlight-grey-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-grey-hover) !important;
  }
  header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover svg, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover svg {
    fill: var(--colour-grey-hover) !important;
  }
  header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover span.main, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover span.main {
    color: var(--colour-grey-hover) !important;
  }
  header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover span.secondary, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover span.secondary {
    color: var(--colour-grey) !important;
  }
  header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover span.tertiary, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:hover span.tertiary {
    color: var(--colour-grey-80) !important;
  }
}
header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active {
  background: var(--colour-highlight-grey-active) !important;
  border-bottom: 1px solid var(--colour-highlight-grey-active) !important;
}
header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active svg, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active svg {
  fill: var(--colour-grey-active) !important;
}
header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active span.main, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active span.main {
  color: var(--colour-grey-active) !important;
}
header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active span.secondary, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active span.secondary {
  color: var(--colour-grey-hover) !important;
}
header a.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active span.tertiary, header span.header_button div.hover_holder.grey div.hover_body div.header_modal_item:active span.tertiary {
  color: var(--colour-grey) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.red:hover, header span.header_button div.header_modal_item.red:hover {
    background: var(--colour-highlight-red-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-red-hover) !important;
  }
  header a.header_button div.header_modal_item.red:hover svg, header span.header_button div.header_modal_item.red:hover svg {
    fill: var(--colour-red-hover) !important;
  }
  header a.header_button div.header_modal_item.red:hover span.main, header span.header_button div.header_modal_item.red:hover span.main {
    color: var(--colour-red-hover) !important;
  }
  header a.header_button div.header_modal_item.red:hover span.secondary, header span.header_button div.header_modal_item.red:hover span.secondary {
    color: var(--colour-red) !important;
  }
  header a.header_button div.header_modal_item.red:hover span.tertiary, header span.header_button div.header_modal_item.red:hover span.tertiary {
    color: var(--colour-red-80) !important;
  }
}
header a.header_button div.header_modal_item.red:active, header span.header_button div.header_modal_item.red:active {
  background: var(--colour-highlight-red-active) !important;
  border-bottom: 1px solid var(--colour-highlight-red-active) !important;
}
header a.header_button div.header_modal_item.red:active svg, header span.header_button div.header_modal_item.red:active svg {
  fill: var(--colour-red-active) !important;
}
header a.header_button div.header_modal_item.red:active span.main, header span.header_button div.header_modal_item.red:active span.main {
  color: var(--colour-red-active) !important;
}
header a.header_button div.header_modal_item.red:active span.secondary, header span.header_button div.header_modal_item.red:active span.secondary {
  color: var(--colour-red-hover) !important;
}
header a.header_button div.header_modal_item.red:active span.tertiary, header span.header_button div.header_modal_item.red:active span.tertiary {
  color: var(--colour-red) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.orange:hover, header span.header_button div.header_modal_item.orange:hover {
    background: var(--colour-highlight-orange-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-orange-hover) !important;
  }
  header a.header_button div.header_modal_item.orange:hover svg, header span.header_button div.header_modal_item.orange:hover svg {
    fill: var(--colour-orange-hover) !important;
  }
  header a.header_button div.header_modal_item.orange:hover span.main, header span.header_button div.header_modal_item.orange:hover span.main {
    color: var(--colour-orange-hover) !important;
  }
  header a.header_button div.header_modal_item.orange:hover span.secondary, header span.header_button div.header_modal_item.orange:hover span.secondary {
    color: var(--colour-orange) !important;
  }
  header a.header_button div.header_modal_item.orange:hover span.tertiary, header span.header_button div.header_modal_item.orange:hover span.tertiary {
    color: var(--colour-orange-80) !important;
  }
}
header a.header_button div.header_modal_item.orange:active, header span.header_button div.header_modal_item.orange:active {
  background: var(--colour-highlight-orange-active) !important;
  border-bottom: 1px solid var(--colour-highlight-orange-active) !important;
}
header a.header_button div.header_modal_item.orange:active svg, header span.header_button div.header_modal_item.orange:active svg {
  fill: var(--colour-orange-active) !important;
}
header a.header_button div.header_modal_item.orange:active span.main, header span.header_button div.header_modal_item.orange:active span.main {
  color: var(--colour-orange-active) !important;
}
header a.header_button div.header_modal_item.orange:active span.secondary, header span.header_button div.header_modal_item.orange:active span.secondary {
  color: var(--colour-orange-hover) !important;
}
header a.header_button div.header_modal_item.orange:active span.tertiary, header span.header_button div.header_modal_item.orange:active span.tertiary {
  color: var(--colour-orange) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.yellow:hover, header span.header_button div.header_modal_item.yellow:hover {
    background: var(--colour-highlight-yellow-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-yellow-hover) !important;
  }
  header a.header_button div.header_modal_item.yellow:hover svg, header span.header_button div.header_modal_item.yellow:hover svg {
    fill: var(--colour-yellow-hover) !important;
  }
  header a.header_button div.header_modal_item.yellow:hover span.main, header span.header_button div.header_modal_item.yellow:hover span.main {
    color: var(--colour-yellow-hover) !important;
  }
  header a.header_button div.header_modal_item.yellow:hover span.secondary, header span.header_button div.header_modal_item.yellow:hover span.secondary {
    color: var(--colour-yellow) !important;
  }
  header a.header_button div.header_modal_item.yellow:hover span.tertiary, header span.header_button div.header_modal_item.yellow:hover span.tertiary {
    color: var(--colour-yellow-80) !important;
  }
}
header a.header_button div.header_modal_item.yellow:active, header span.header_button div.header_modal_item.yellow:active {
  background: var(--colour-highlight-yellow-active) !important;
  border-bottom: 1px solid var(--colour-highlight-yellow-active) !important;
}
header a.header_button div.header_modal_item.yellow:active svg, header span.header_button div.header_modal_item.yellow:active svg {
  fill: var(--colour-yellow-active) !important;
}
header a.header_button div.header_modal_item.yellow:active span.main, header span.header_button div.header_modal_item.yellow:active span.main {
  color: var(--colour-yellow-active) !important;
}
header a.header_button div.header_modal_item.yellow:active span.secondary, header span.header_button div.header_modal_item.yellow:active span.secondary {
  color: var(--colour-yellow-hover) !important;
}
header a.header_button div.header_modal_item.yellow:active span.tertiary, header span.header_button div.header_modal_item.yellow:active span.tertiary {
  color: var(--colour-yellow) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.green:hover, header span.header_button div.header_modal_item.green:hover {
    background: var(--colour-highlight-green-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-green-hover) !important;
  }
  header a.header_button div.header_modal_item.green:hover svg, header span.header_button div.header_modal_item.green:hover svg {
    fill: var(--colour-green-hover) !important;
  }
  header a.header_button div.header_modal_item.green:hover span.main, header span.header_button div.header_modal_item.green:hover span.main {
    color: var(--colour-green-hover) !important;
  }
  header a.header_button div.header_modal_item.green:hover span.secondary, header span.header_button div.header_modal_item.green:hover span.secondary {
    color: var(--colour-green) !important;
  }
  header a.header_button div.header_modal_item.green:hover span.tertiary, header span.header_button div.header_modal_item.green:hover span.tertiary {
    color: var(--colour-green-80) !important;
  }
}
header a.header_button div.header_modal_item.green:active, header span.header_button div.header_modal_item.green:active {
  background: var(--colour-highlight-green-active) !important;
  border-bottom: 1px solid var(--colour-highlight-green-active) !important;
}
header a.header_button div.header_modal_item.green:active svg, header span.header_button div.header_modal_item.green:active svg {
  fill: var(--colour-green-active) !important;
}
header a.header_button div.header_modal_item.green:active span.main, header span.header_button div.header_modal_item.green:active span.main {
  color: var(--colour-green-active) !important;
}
header a.header_button div.header_modal_item.green:active span.secondary, header span.header_button div.header_modal_item.green:active span.secondary {
  color: var(--colour-green-hover) !important;
}
header a.header_button div.header_modal_item.green:active span.tertiary, header span.header_button div.header_modal_item.green:active span.tertiary {
  color: var(--colour-green) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.blue:hover, header span.header_button div.header_modal_item.blue:hover {
    background: var(--colour-highlight-blue-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-blue-hover) !important;
  }
  header a.header_button div.header_modal_item.blue:hover svg, header span.header_button div.header_modal_item.blue:hover svg {
    fill: var(--colour-blue-hover) !important;
  }
  header a.header_button div.header_modal_item.blue:hover span.main, header span.header_button div.header_modal_item.blue:hover span.main {
    color: var(--colour-blue-hover) !important;
  }
  header a.header_button div.header_modal_item.blue:hover span.secondary, header span.header_button div.header_modal_item.blue:hover span.secondary {
    color: var(--colour-blue) !important;
  }
  header a.header_button div.header_modal_item.blue:hover span.tertiary, header span.header_button div.header_modal_item.blue:hover span.tertiary {
    color: var(--colour-blue-80) !important;
  }
}
header a.header_button div.header_modal_item.blue:active, header span.header_button div.header_modal_item.blue:active {
  background: var(--colour-highlight-blue-active) !important;
  border-bottom: 1px solid var(--colour-highlight-blue-active) !important;
}
header a.header_button div.header_modal_item.blue:active svg, header span.header_button div.header_modal_item.blue:active svg {
  fill: var(--colour-blue-active) !important;
}
header a.header_button div.header_modal_item.blue:active span.main, header span.header_button div.header_modal_item.blue:active span.main {
  color: var(--colour-blue-active) !important;
}
header a.header_button div.header_modal_item.blue:active span.secondary, header span.header_button div.header_modal_item.blue:active span.secondary {
  color: var(--colour-blue-hover) !important;
}
header a.header_button div.header_modal_item.blue:active span.tertiary, header span.header_button div.header_modal_item.blue:active span.tertiary {
  color: var(--colour-blue) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.indigo:hover, header span.header_button div.header_modal_item.indigo:hover {
    background: var(--colour-highlight-indigo-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-indigo-hover) !important;
  }
  header a.header_button div.header_modal_item.indigo:hover svg, header span.header_button div.header_modal_item.indigo:hover svg {
    fill: var(--colour-indigo-hover) !important;
  }
  header a.header_button div.header_modal_item.indigo:hover span.main, header span.header_button div.header_modal_item.indigo:hover span.main {
    color: var(--colour-indigo-hover) !important;
  }
  header a.header_button div.header_modal_item.indigo:hover span.secondary, header span.header_button div.header_modal_item.indigo:hover span.secondary {
    color: var(--colour-indigo) !important;
  }
  header a.header_button div.header_modal_item.indigo:hover span.tertiary, header span.header_button div.header_modal_item.indigo:hover span.tertiary {
    color: var(--colour-indigo-80) !important;
  }
}
header a.header_button div.header_modal_item.indigo:active, header span.header_button div.header_modal_item.indigo:active {
  background: var(--colour-highlight-indigo-active) !important;
  border-bottom: 1px solid var(--colour-highlight-indigo-active) !important;
}
header a.header_button div.header_modal_item.indigo:active svg, header span.header_button div.header_modal_item.indigo:active svg {
  fill: var(--colour-indigo-active) !important;
}
header a.header_button div.header_modal_item.indigo:active span.main, header span.header_button div.header_modal_item.indigo:active span.main {
  color: var(--colour-indigo-active) !important;
}
header a.header_button div.header_modal_item.indigo:active span.secondary, header span.header_button div.header_modal_item.indigo:active span.secondary {
  color: var(--colour-indigo-hover) !important;
}
header a.header_button div.header_modal_item.indigo:active span.tertiary, header span.header_button div.header_modal_item.indigo:active span.tertiary {
  color: var(--colour-indigo) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.violet:hover, header span.header_button div.header_modal_item.violet:hover {
    background: var(--colour-highlight-violet-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-violet-hover) !important;
  }
  header a.header_button div.header_modal_item.violet:hover svg, header span.header_button div.header_modal_item.violet:hover svg {
    fill: var(--colour-violet-hover) !important;
  }
  header a.header_button div.header_modal_item.violet:hover span.main, header span.header_button div.header_modal_item.violet:hover span.main {
    color: var(--colour-violet-hover) !important;
  }
  header a.header_button div.header_modal_item.violet:hover span.secondary, header span.header_button div.header_modal_item.violet:hover span.secondary {
    color: var(--colour-violet) !important;
  }
  header a.header_button div.header_modal_item.violet:hover span.tertiary, header span.header_button div.header_modal_item.violet:hover span.tertiary {
    color: var(--colour-violet-80) !important;
  }
}
header a.header_button div.header_modal_item.violet:active, header span.header_button div.header_modal_item.violet:active {
  background: var(--colour-highlight-violet-active) !important;
  border-bottom: 1px solid var(--colour-highlight-violet-active) !important;
}
header a.header_button div.header_modal_item.violet:active svg, header span.header_button div.header_modal_item.violet:active svg {
  fill: var(--colour-violet-active) !important;
}
header a.header_button div.header_modal_item.violet:active span.main, header span.header_button div.header_modal_item.violet:active span.main {
  color: var(--colour-violet-active) !important;
}
header a.header_button div.header_modal_item.violet:active span.secondary, header span.header_button div.header_modal_item.violet:active span.secondary {
  color: var(--colour-violet-hover) !important;
}
header a.header_button div.header_modal_item.violet:active span.tertiary, header span.header_button div.header_modal_item.violet:active span.tertiary {
  color: var(--colour-violet) !important;
}
@media (hover: hover) {
  header a.header_button div.header_modal_item.grey:hover, header span.header_button div.header_modal_item.grey:hover {
    background: var(--colour-highlight-grey-hover) !important;
    border-bottom: 1px solid var(--colour-highlight-grey-hover) !important;
  }
  header a.header_button div.header_modal_item.grey:hover svg, header span.header_button div.header_modal_item.grey:hover svg {
    fill: var(--colour-grey-hover) !important;
  }
  header a.header_button div.header_modal_item.grey:hover span.main, header span.header_button div.header_modal_item.grey:hover span.main {
    color: var(--colour-grey-hover) !important;
  }
  header a.header_button div.header_modal_item.grey:hover span.secondary, header span.header_button div.header_modal_item.grey:hover span.secondary {
    color: var(--colour-grey) !important;
  }
  header a.header_button div.header_modal_item.grey:hover span.tertiary, header span.header_button div.header_modal_item.grey:hover span.tertiary {
    color: var(--colour-grey-80) !important;
  }
}
header a.header_button div.header_modal_item.grey:active, header span.header_button div.header_modal_item.grey:active {
  background: var(--colour-highlight-grey-active) !important;
  border-bottom: 1px solid var(--colour-highlight-grey-active) !important;
}
header a.header_button div.header_modal_item.grey:active svg, header span.header_button div.header_modal_item.grey:active svg {
  fill: var(--colour-grey-active) !important;
}
header a.header_button div.header_modal_item.grey:active span.main, header span.header_button div.header_modal_item.grey:active span.main {
  color: var(--colour-grey-active) !important;
}
header a.header_button div.header_modal_item.grey:active span.secondary, header span.header_button div.header_modal_item.grey:active span.secondary {
  color: var(--colour-grey-hover) !important;
}
header a.header_button div.header_modal_item.grey:active span.tertiary, header span.header_button div.header_modal_item.grey:active span.tertiary {
  color: var(--colour-grey) !important;
}
header a.header_button span.counter, header span.header_button span.counter {
  background: #CE3030;
  font-size: 11px;
  height: 20px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 10px;
  color: #FFF;
  font-weight: 700;
  margin: 0 -2.5px;
  line-height: 11.5px;
}
header a.header_button span.counter:empty, header span.header_button span.counter:empty {
  display: none;
}
header img.logo {
  margin-right: auto;
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background: none;
}
header img.logo:not(.dark):not(.square) {
  display: block;
}
header > *:last-child {
  margin-left: auto;
}
header span.bumper {
  width: 35px;
  flex-shrink: 0;
}

header.alwaysDesktop.custom-pink {
  background: var(--colour-custom-pink);
  border-bottom: 1px solid var(--colour-custom-pink);
}
header.alwaysDesktop.custom-pink a.header_button, header.alwaysDesktop.custom-pink span.header_button {
  color: #FFF;
}
header.alwaysDesktop.custom-pink a.header_button svg, header.alwaysDesktop.custom-pink span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.custom-pink a.header_button:hover, header.alwaysDesktop.custom-pink span.header_button:hover {
    background: var(--colour-custom-pink-hover);
    color: #FFF;
  }
  header.alwaysDesktop.custom-pink a.header_button:hover svg, header.alwaysDesktop.custom-pink span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.custom-pink a.header_button:not(.no_active, .active):active, header.alwaysDesktop.custom-pink span.header_button:not(.no_active, .active):active {
  background: var(--colour-custom-pink-active);
  color: #FFF;
}
header.alwaysDesktop.custom-pink a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.custom-pink span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.custom-pink a.header_button.active, header.alwaysDesktop.custom-pink span.header_button.active {
  background: var(--colour-dark-custom-pink);
  color: #FFF;
}
header.alwaysDesktop.custom-pink a.header_button.active svg, header.alwaysDesktop.custom-pink span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.custom-pink a.header_button.active:hover, header.alwaysDesktop.custom-pink span.header_button.active:hover {
    background: var(--colour-dark-custom-pink-hover);
  }
}
header.alwaysDesktop.custom-pink a.header_button.active:active, header.alwaysDesktop.custom-pink span.header_button.active:active {
  background: var(--colour-dark-custom-pink-active);
}
header.alwaysDesktop.custom-pink a.header_button.white, header.alwaysDesktop.custom-pink span.header_button.white {
  background: #FFF;
  color: var(--colour-custom-pink);
}
header.alwaysDesktop.custom-pink a.header_button.white svg, header.alwaysDesktop.custom-pink span.header_button.white svg {
  fill: var(--colour-custom-pink);
}
@media (hover: hover) {
  header.alwaysDesktop.custom-pink a.header_button.white:hover, header.alwaysDesktop.custom-pink span.header_button.white:hover {
    color: var(--colour-custom-pink-hover);
  }
  header.alwaysDesktop.custom-pink a.header_button.white:hover svg, header.alwaysDesktop.custom-pink span.header_button.white:hover svg {
    fill: var(--colour-custom-pink-hover);
  }
}
header.alwaysDesktop.custom-pink a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.custom-pink span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-custom-pink-hover);
  color: var(--colour-custom-pink-active);
}
header.alwaysDesktop.custom-pink a.header_button.white:not(.no_active, .active):active svg, header.alwaysDesktop.custom-pink span.header_button.white:not(.no_active, .active):active svg {
  fill: var(--colour-custom-pink-active);
}
header.alwaysDesktop.custom-graphite {
  background: var(--colour-custom-graphite);
  border-bottom: 1px solid var(--colour-custom-graphite);
}
header.alwaysDesktop.custom-graphite a.header_button, header.alwaysDesktop.custom-graphite span.header_button {
  color: #FFF;
}
header.alwaysDesktop.custom-graphite a.header_button svg, header.alwaysDesktop.custom-graphite span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.custom-graphite a.header_button:hover, header.alwaysDesktop.custom-graphite span.header_button:hover {
    background: var(--colour-custom-graphite-hover);
    color: #FFF;
  }
  header.alwaysDesktop.custom-graphite a.header_button:hover svg, header.alwaysDesktop.custom-graphite span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.custom-graphite a.header_button:not(.no_active, .active):active, header.alwaysDesktop.custom-graphite span.header_button:not(.no_active, .active):active {
  background: var(--colour-custom-graphite-active);
  color: #FFF;
}
header.alwaysDesktop.custom-graphite a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.custom-graphite span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.custom-graphite a.header_button.active, header.alwaysDesktop.custom-graphite span.header_button.active {
  background: var(--colour-dark-custom-graphite);
  color: #FFF;
}
header.alwaysDesktop.custom-graphite a.header_button.active svg, header.alwaysDesktop.custom-graphite span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.custom-graphite a.header_button.active:hover, header.alwaysDesktop.custom-graphite span.header_button.active:hover {
    background: var(--colour-dark-custom-graphite-hover);
  }
}
header.alwaysDesktop.custom-graphite a.header_button.active:active, header.alwaysDesktop.custom-graphite span.header_button.active:active {
  background: var(--colour-dark-custom-graphite-active);
}
header.alwaysDesktop.custom-graphite a.header_button.white, header.alwaysDesktop.custom-graphite span.header_button.white {
  background: #FFF;
  color: var(--colour-custom-graphite);
}
header.alwaysDesktop.custom-graphite a.header_button.white svg, header.alwaysDesktop.custom-graphite span.header_button.white svg {
  fill: var(--colour-custom-graphite);
}
@media (hover: hover) {
  header.alwaysDesktop.custom-graphite a.header_button.white:hover, header.alwaysDesktop.custom-graphite span.header_button.white:hover {
    color: var(--colour-custom-graphite-hover);
  }
  header.alwaysDesktop.custom-graphite a.header_button.white:hover svg, header.alwaysDesktop.custom-graphite span.header_button.white:hover svg {
    fill: var(--colour-custom-graphite-hover);
  }
}
header.alwaysDesktop.custom-graphite a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.custom-graphite span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-custom-graphite-hover);
  color: var(--colour-custom-graphite-active);
}
header.alwaysDesktop.custom-graphite a.header_button.white:not(.no_active, .active):active svg, header.alwaysDesktop.custom-graphite span.header_button.white:not(.no_active, .active):active svg {
  fill: var(--colour-custom-graphite-active);
}
header.alwaysDesktop.custom-fpgreen {
  background: var(--colour-custom-fpgreen);
  border-bottom: 1px solid var(--colour-custom-fpgreen);
}
header.alwaysDesktop.custom-fpgreen a.header_button, header.alwaysDesktop.custom-fpgreen span.header_button {
  color: #FFF;
}
header.alwaysDesktop.custom-fpgreen a.header_button svg, header.alwaysDesktop.custom-fpgreen span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.custom-fpgreen a.header_button:hover, header.alwaysDesktop.custom-fpgreen span.header_button:hover {
    background: var(--colour-custom-fpgreen-hover);
    color: #FFF;
  }
  header.alwaysDesktop.custom-fpgreen a.header_button:hover svg, header.alwaysDesktop.custom-fpgreen span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.custom-fpgreen a.header_button:not(.no_active, .active):active, header.alwaysDesktop.custom-fpgreen span.header_button:not(.no_active, .active):active {
  background: var(--colour-custom-fpgreen-active);
  color: #FFF;
}
header.alwaysDesktop.custom-fpgreen a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.custom-fpgreen span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.custom-fpgreen a.header_button.active, header.alwaysDesktop.custom-fpgreen span.header_button.active {
  background: var(--colour-dark-custom-fpgreen);
  color: #FFF;
}
header.alwaysDesktop.custom-fpgreen a.header_button.active svg, header.alwaysDesktop.custom-fpgreen span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.custom-fpgreen a.header_button.active:hover, header.alwaysDesktop.custom-fpgreen span.header_button.active:hover {
    background: var(--colour-dark-custom-fpgreen-hover);
  }
}
header.alwaysDesktop.custom-fpgreen a.header_button.active:active, header.alwaysDesktop.custom-fpgreen span.header_button.active:active {
  background: var(--colour-dark-custom-fpgreen-active);
}
header.alwaysDesktop.custom-fpgreen a.header_button.white, header.alwaysDesktop.custom-fpgreen span.header_button.white {
  background: #FFF;
  color: var(--colour-custom-fpgreen);
}
header.alwaysDesktop.custom-fpgreen a.header_button.white svg, header.alwaysDesktop.custom-fpgreen span.header_button.white svg {
  fill: var(--colour-custom-fpgreen);
}
@media (hover: hover) {
  header.alwaysDesktop.custom-fpgreen a.header_button.white:hover, header.alwaysDesktop.custom-fpgreen span.header_button.white:hover {
    color: var(--colour-custom-fpgreen-hover);
  }
  header.alwaysDesktop.custom-fpgreen a.header_button.white:hover svg, header.alwaysDesktop.custom-fpgreen span.header_button.white:hover svg {
    fill: var(--colour-custom-fpgreen-hover);
  }
}
header.alwaysDesktop.custom-fpgreen a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.custom-fpgreen span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-custom-fpgreen-hover);
  color: var(--colour-custom-fpgreen-active);
}
header.alwaysDesktop.custom-fpgreen a.header_button.white:not(.no_active, .active):active svg, header.alwaysDesktop.custom-fpgreen span.header_button.white:not(.no_active, .active):active svg {
  fill: var(--colour-custom-fpgreen-active);
}
header.alwaysDesktop.red {
  background: var(--colour-red);
  border-bottom: 1px solid var(--colour-red);
}
header.alwaysDesktop.red a.header_button, header.alwaysDesktop.red span.header_button {
  color: #FFF;
}
header.alwaysDesktop.red a.header_button svg, header.alwaysDesktop.red span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.red a.header_button:hover, header.alwaysDesktop.red span.header_button:hover {
    background: var(--colour-red-hover);
    color: #FFF;
  }
  header.alwaysDesktop.red a.header_button:hover svg, header.alwaysDesktop.red span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.red a.header_button:not(.no_active, .active):active, header.alwaysDesktop.red span.header_button:not(.no_active, .active):active {
  background: var(--colour-red-active);
  color: #FFF;
}
header.alwaysDesktop.red a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.red span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.red a.header_button.active, header.alwaysDesktop.red span.header_button.active {
  background: var(--colour-dark-red);
  color: #FFF;
}
header.alwaysDesktop.red a.header_button.active svg, header.alwaysDesktop.red span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.red a.header_button.active:hover, header.alwaysDesktop.red span.header_button.active:hover {
    background: var(--colour-dark-red-hover);
  }
}
header.alwaysDesktop.red a.header_button.active:active, header.alwaysDesktop.red span.header_button.active:active {
  background: var(--colour-dark-red-active);
}
header.alwaysDesktop.red a.header_button.white, header.alwaysDesktop.red span.header_button.white {
  background: #FFF;
  color: var(--colour-red);
}
header.alwaysDesktop.red a.header_button.white svg, header.alwaysDesktop.red span.header_button.white svg {
  fill: var(--colour-red);
}
@media (hover: hover) {
  header.alwaysDesktop.red a.header_button.white:hover, header.alwaysDesktop.red span.header_button.white:hover {
    color: var(--colour-red-hover);
  }
  header.alwaysDesktop.red a.header_button.white:hover svg, header.alwaysDesktop.red span.header_button.white:hover svg {
    fill: var(--colour-red-hover);
  }
}
header.alwaysDesktop.red a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.red span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-red-hover);
  color: var(--colour-red-active);
}
header.alwaysDesktop.red a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.red span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-red-active);
}
header.alwaysDesktop.orange {
  background: var(--colour-orange);
  border-bottom: 1px solid var(--colour-orange);
}
header.alwaysDesktop.orange a.header_button, header.alwaysDesktop.orange span.header_button {
  color: #FFF;
}
header.alwaysDesktop.orange a.header_button svg, header.alwaysDesktop.orange span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.orange a.header_button:hover, header.alwaysDesktop.orange span.header_button:hover {
    background: var(--colour-orange-hover);
    color: #FFF;
  }
  header.alwaysDesktop.orange a.header_button:hover svg, header.alwaysDesktop.orange span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.orange a.header_button:not(.no_active, .active):active, header.alwaysDesktop.orange span.header_button:not(.no_active, .active):active {
  background: var(--colour-orange-active);
  color: #FFF;
}
header.alwaysDesktop.orange a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.orange span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.orange a.header_button.active, header.alwaysDesktop.orange span.header_button.active {
  background: var(--colour-dark-orange);
  color: #FFF;
}
header.alwaysDesktop.orange a.header_button.active svg, header.alwaysDesktop.orange span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.orange a.header_button.active:hover, header.alwaysDesktop.orange span.header_button.active:hover {
    background: var(--colour-dark-orange-hover);
  }
}
header.alwaysDesktop.orange a.header_button.active:active, header.alwaysDesktop.orange span.header_button.active:active {
  background: var(--colour-dark-orange-active);
}
header.alwaysDesktop.orange a.header_button.white, header.alwaysDesktop.orange span.header_button.white {
  background: #FFF;
  color: var(--colour-orange);
}
header.alwaysDesktop.orange a.header_button.white svg, header.alwaysDesktop.orange span.header_button.white svg {
  fill: var(--colour-orange);
}
@media (hover: hover) {
  header.alwaysDesktop.orange a.header_button.white:hover, header.alwaysDesktop.orange span.header_button.white:hover {
    color: var(--colour-orange-hover);
  }
  header.alwaysDesktop.orange a.header_button.white:hover svg, header.alwaysDesktop.orange span.header_button.white:hover svg {
    fill: var(--colour-orange-hover);
  }
}
header.alwaysDesktop.orange a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.orange span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-orange-hover);
  color: var(--colour-orange-active);
}
header.alwaysDesktop.orange a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.orange span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-orange-active);
}
header.alwaysDesktop.yellow {
  background: var(--colour-yellow);
  border-bottom: 1px solid var(--colour-yellow);
}
header.alwaysDesktop.yellow a.header_button, header.alwaysDesktop.yellow span.header_button {
  color: #FFF;
}
header.alwaysDesktop.yellow a.header_button svg, header.alwaysDesktop.yellow span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.yellow a.header_button:hover, header.alwaysDesktop.yellow span.header_button:hover {
    background: var(--colour-yellow-hover);
    color: #FFF;
  }
  header.alwaysDesktop.yellow a.header_button:hover svg, header.alwaysDesktop.yellow span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.yellow a.header_button:not(.no_active, .active):active, header.alwaysDesktop.yellow span.header_button:not(.no_active, .active):active {
  background: var(--colour-yellow-active);
  color: #FFF;
}
header.alwaysDesktop.yellow a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.yellow span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.yellow a.header_button.active, header.alwaysDesktop.yellow span.header_button.active {
  background: var(--colour-dark-yellow);
  color: #FFF;
}
header.alwaysDesktop.yellow a.header_button.active svg, header.alwaysDesktop.yellow span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.yellow a.header_button.active:hover, header.alwaysDesktop.yellow span.header_button.active:hover {
    background: var(--colour-dark-yellow-hover);
  }
}
header.alwaysDesktop.yellow a.header_button.active:active, header.alwaysDesktop.yellow span.header_button.active:active {
  background: var(--colour-dark-yellow-active);
}
header.alwaysDesktop.yellow a.header_button.white, header.alwaysDesktop.yellow span.header_button.white {
  background: #FFF;
  color: var(--colour-yellow);
}
header.alwaysDesktop.yellow a.header_button.white svg, header.alwaysDesktop.yellow span.header_button.white svg {
  fill: var(--colour-yellow);
}
@media (hover: hover) {
  header.alwaysDesktop.yellow a.header_button.white:hover, header.alwaysDesktop.yellow span.header_button.white:hover {
    color: var(--colour-yellow-hover);
  }
  header.alwaysDesktop.yellow a.header_button.white:hover svg, header.alwaysDesktop.yellow span.header_button.white:hover svg {
    fill: var(--colour-yellow-hover);
  }
}
header.alwaysDesktop.yellow a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.yellow span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-yellow-hover);
  color: var(--colour-yellow-active);
}
header.alwaysDesktop.yellow a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.yellow span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-yellow-active);
}
header.alwaysDesktop.green {
  background: var(--colour-green);
  border-bottom: 1px solid var(--colour-green);
}
header.alwaysDesktop.green a.header_button, header.alwaysDesktop.green span.header_button {
  color: #FFF;
}
header.alwaysDesktop.green a.header_button svg, header.alwaysDesktop.green span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.green a.header_button:hover, header.alwaysDesktop.green span.header_button:hover {
    background: var(--colour-green-hover);
    color: #FFF;
  }
  header.alwaysDesktop.green a.header_button:hover svg, header.alwaysDesktop.green span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.green a.header_button:not(.no_active, .active):active, header.alwaysDesktop.green span.header_button:not(.no_active, .active):active {
  background: var(--colour-green-active);
  color: #FFF;
}
header.alwaysDesktop.green a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.green span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.green a.header_button.active, header.alwaysDesktop.green span.header_button.active {
  background: var(--colour-dark-green);
  color: #FFF;
}
header.alwaysDesktop.green a.header_button.active svg, header.alwaysDesktop.green span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.green a.header_button.active:hover, header.alwaysDesktop.green span.header_button.active:hover {
    background: var(--colour-dark-green-hover);
  }
}
header.alwaysDesktop.green a.header_button.active:active, header.alwaysDesktop.green span.header_button.active:active {
  background: var(--colour-dark-green-active);
}
header.alwaysDesktop.green a.header_button.white, header.alwaysDesktop.green span.header_button.white {
  background: #FFF;
  color: var(--colour-green);
}
header.alwaysDesktop.green a.header_button.white svg, header.alwaysDesktop.green span.header_button.white svg {
  fill: var(--colour-green);
}
@media (hover: hover) {
  header.alwaysDesktop.green a.header_button.white:hover, header.alwaysDesktop.green span.header_button.white:hover {
    color: var(--colour-green-hover);
  }
  header.alwaysDesktop.green a.header_button.white:hover svg, header.alwaysDesktop.green span.header_button.white:hover svg {
    fill: var(--colour-green-hover);
  }
}
header.alwaysDesktop.green a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.green span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-green-hover);
  color: var(--colour-green-active);
}
header.alwaysDesktop.green a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.green span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-green-active);
}
header.alwaysDesktop.blue {
  background: var(--colour-blue);
  border-bottom: 1px solid var(--colour-blue);
}
header.alwaysDesktop.blue a.header_button, header.alwaysDesktop.blue span.header_button {
  color: #FFF;
}
header.alwaysDesktop.blue a.header_button svg, header.alwaysDesktop.blue span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.blue a.header_button:hover, header.alwaysDesktop.blue span.header_button:hover {
    background: var(--colour-blue-hover);
    color: #FFF;
  }
  header.alwaysDesktop.blue a.header_button:hover svg, header.alwaysDesktop.blue span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.blue a.header_button:not(.no_active, .active):active, header.alwaysDesktop.blue span.header_button:not(.no_active, .active):active {
  background: var(--colour-blue-active);
  color: #FFF;
}
header.alwaysDesktop.blue a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.blue span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.blue a.header_button.active, header.alwaysDesktop.blue span.header_button.active {
  background: var(--colour-dark-blue);
  color: #FFF;
}
header.alwaysDesktop.blue a.header_button.active svg, header.alwaysDesktop.blue span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.blue a.header_button.active:hover, header.alwaysDesktop.blue span.header_button.active:hover {
    background: var(--colour-dark-blue-hover);
  }
}
header.alwaysDesktop.blue a.header_button.active:active, header.alwaysDesktop.blue span.header_button.active:active {
  background: var(--colour-dark-blue-active);
}
header.alwaysDesktop.blue a.header_button.white, header.alwaysDesktop.blue span.header_button.white {
  background: #FFF;
  color: var(--colour-blue);
}
header.alwaysDesktop.blue a.header_button.white svg, header.alwaysDesktop.blue span.header_button.white svg {
  fill: var(--colour-blue);
}
@media (hover: hover) {
  header.alwaysDesktop.blue a.header_button.white:hover, header.alwaysDesktop.blue span.header_button.white:hover {
    color: var(--colour-blue-hover);
  }
  header.alwaysDesktop.blue a.header_button.white:hover svg, header.alwaysDesktop.blue span.header_button.white:hover svg {
    fill: var(--colour-blue-hover);
  }
}
header.alwaysDesktop.blue a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.blue span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-blue-hover);
  color: var(--colour-blue-active);
}
header.alwaysDesktop.blue a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.blue span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-blue-active);
}
header.alwaysDesktop.indigo {
  background: var(--colour-indigo);
  border-bottom: 1px solid var(--colour-indigo);
}
header.alwaysDesktop.indigo a.header_button, header.alwaysDesktop.indigo span.header_button {
  color: #FFF;
}
header.alwaysDesktop.indigo a.header_button svg, header.alwaysDesktop.indigo span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.indigo a.header_button:hover, header.alwaysDesktop.indigo span.header_button:hover {
    background: var(--colour-indigo-hover);
    color: #FFF;
  }
  header.alwaysDesktop.indigo a.header_button:hover svg, header.alwaysDesktop.indigo span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.indigo a.header_button:not(.no_active, .active):active, header.alwaysDesktop.indigo span.header_button:not(.no_active, .active):active {
  background: var(--colour-indigo-active);
  color: #FFF;
}
header.alwaysDesktop.indigo a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.indigo span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.indigo a.header_button.active, header.alwaysDesktop.indigo span.header_button.active {
  background: var(--colour-dark-indigo);
  color: #FFF;
}
header.alwaysDesktop.indigo a.header_button.active svg, header.alwaysDesktop.indigo span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.indigo a.header_button.active:hover, header.alwaysDesktop.indigo span.header_button.active:hover {
    background: var(--colour-dark-indigo-hover);
  }
}
header.alwaysDesktop.indigo a.header_button.active:active, header.alwaysDesktop.indigo span.header_button.active:active {
  background: var(--colour-dark-indigo-active);
}
header.alwaysDesktop.indigo a.header_button.white, header.alwaysDesktop.indigo span.header_button.white {
  background: #FFF;
  color: var(--colour-indigo);
}
header.alwaysDesktop.indigo a.header_button.white svg, header.alwaysDesktop.indigo span.header_button.white svg {
  fill: var(--colour-indigo);
}
@media (hover: hover) {
  header.alwaysDesktop.indigo a.header_button.white:hover, header.alwaysDesktop.indigo span.header_button.white:hover {
    color: var(--colour-indigo-hover);
  }
  header.alwaysDesktop.indigo a.header_button.white:hover svg, header.alwaysDesktop.indigo span.header_button.white:hover svg {
    fill: var(--colour-indigo-hover);
  }
}
header.alwaysDesktop.indigo a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.indigo span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-indigo-hover);
  color: var(--colour-indigo-active);
}
header.alwaysDesktop.indigo a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.indigo span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-indigo-active);
}
header.alwaysDesktop.violet {
  background: var(--colour-violet);
  border-bottom: 1px solid var(--colour-violet);
}
header.alwaysDesktop.violet a.header_button, header.alwaysDesktop.violet span.header_button {
  color: #FFF;
}
header.alwaysDesktop.violet a.header_button svg, header.alwaysDesktop.violet span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.violet a.header_button:hover, header.alwaysDesktop.violet span.header_button:hover {
    background: var(--colour-violet-hover);
    color: #FFF;
  }
  header.alwaysDesktop.violet a.header_button:hover svg, header.alwaysDesktop.violet span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.violet a.header_button:not(.no_active, .active):active, header.alwaysDesktop.violet span.header_button:not(.no_active, .active):active {
  background: var(--colour-violet-active);
  color: #FFF;
}
header.alwaysDesktop.violet a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.violet span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.violet a.header_button.active, header.alwaysDesktop.violet span.header_button.active {
  background: var(--colour-dark-violet);
  color: #FFF;
}
header.alwaysDesktop.violet a.header_button.active svg, header.alwaysDesktop.violet span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.violet a.header_button.active:hover, header.alwaysDesktop.violet span.header_button.active:hover {
    background: var(--colour-dark-violet-hover);
  }
}
header.alwaysDesktop.violet a.header_button.active:active, header.alwaysDesktop.violet span.header_button.active:active {
  background: var(--colour-dark-violet-active);
}
header.alwaysDesktop.violet a.header_button.white, header.alwaysDesktop.violet span.header_button.white {
  background: #FFF;
  color: var(--colour-violet);
}
header.alwaysDesktop.violet a.header_button.white svg, header.alwaysDesktop.violet span.header_button.white svg {
  fill: var(--colour-violet);
}
@media (hover: hover) {
  header.alwaysDesktop.violet a.header_button.white:hover, header.alwaysDesktop.violet span.header_button.white:hover {
    color: var(--colour-violet-hover);
  }
  header.alwaysDesktop.violet a.header_button.white:hover svg, header.alwaysDesktop.violet span.header_button.white:hover svg {
    fill: var(--colour-violet-hover);
  }
}
header.alwaysDesktop.violet a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.violet span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-violet-hover);
  color: var(--colour-violet-active);
}
header.alwaysDesktop.violet a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.violet span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-violet-active);
}
header.alwaysDesktop.grey {
  background: var(--colour-grey);
  border-bottom: 1px solid var(--colour-grey);
}
header.alwaysDesktop.grey a.header_button, header.alwaysDesktop.grey span.header_button {
  color: #FFF;
}
header.alwaysDesktop.grey a.header_button svg, header.alwaysDesktop.grey span.header_button svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.grey a.header_button:hover, header.alwaysDesktop.grey span.header_button:hover {
    background: var(--colour-grey-hover);
    color: #FFF;
  }
  header.alwaysDesktop.grey a.header_button:hover svg, header.alwaysDesktop.grey span.header_button:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop.grey a.header_button:not(.no_active, .active):active, header.alwaysDesktop.grey span.header_button:not(.no_active, .active):active {
  background: var(--colour-grey-active);
  color: #FFF;
}
header.alwaysDesktop.grey a.header_button:not(.no_active, .active):active svg, header.alwaysDesktop.grey span.header_button:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop.grey a.header_button.active, header.alwaysDesktop.grey span.header_button.active {
  background: var(--colour-dark-grey);
  color: #FFF;
}
header.alwaysDesktop.grey a.header_button.active svg, header.alwaysDesktop.grey span.header_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop.grey a.header_button.active:hover, header.alwaysDesktop.grey span.header_button.active:hover {
    background: var(--colour-dark-grey-hover);
  }
}
header.alwaysDesktop.grey a.header_button.active:active, header.alwaysDesktop.grey span.header_button.active:active {
  background: var(--colour-dark-grey-active);
}
header.alwaysDesktop.grey a.header_button.white, header.alwaysDesktop.grey span.header_button.white {
  background: #FFF;
  color: var(--colour-grey);
}
header.alwaysDesktop.grey a.header_button.white svg, header.alwaysDesktop.grey span.header_button.white svg {
  fill: var(--colour-grey);
}
@media (hover: hover) {
  header.alwaysDesktop.grey a.header_button.white:hover, header.alwaysDesktop.grey span.header_button.white:hover {
    color: var(--colour-grey-hover);
  }
  header.alwaysDesktop.grey a.header_button.white:hover svg, header.alwaysDesktop.grey span.header_button.white:hover svg {
    fill: var(--colour-grey-hover);
  }
}
header.alwaysDesktop.grey a.header_button.white:not(.no_active, .active):active, header.alwaysDesktop.grey span.header_button.white:not(.no_active, .active):active {
  background: var(--colour-highlight-grey-hover);
  color: var(--colour-grey-active);
}
header.alwaysDesktop.grey a.header_button.white:not(.no_active, .active):active > svg, header.alwaysDesktop.grey span.header_button.white:not(.no_active, .active):active > svg {
  fill: var(--colour-grey-active);
}
header.alwaysDesktop a.header_button.whitecustom-pink, header.alwaysDesktop span.header_button.whitecustom-pink {
  color: #FFF;
  background: var(--colour-custom-pink);
}
header.alwaysDesktop a.header_button.whitecustom-pink svg, header.alwaysDesktop span.header_button.whitecustom-pink svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitecustom-pink:hover, header.alwaysDesktop span.header_button.whitecustom-pink:hover {
    background: var(--colour-custom-pink-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whitecustom-pink:hover svg, header.alwaysDesktop span.header_button.whitecustom-pink:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whitecustom-pink:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whitecustom-pink:not(.no_active, .active):active {
  background: var(--colour-custom-pink-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-pink:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whitecustom-pink:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-pink.active, header.alwaysDesktop span.header_button.whitecustom-pink.active {
  background: var(--colour-dark-custom-pink);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-pink.active svg, header.alwaysDesktop span.header_button.whitecustom-pink.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitecustom-pink.active:hover, header.alwaysDesktop span.header_button.whitecustom-pink.active:hover {
    background: var(--colour-dark-custom-pink-hover);
  }
}
header.alwaysDesktop a.header_button.whitecustom-pink.active:active, header.alwaysDesktop span.header_button.whitecustom-pink.active:active {
  background: var(--colour-dark-custom-pink-active);
}
header.alwaysDesktop a.header_button.whitecustom-graphite, header.alwaysDesktop span.header_button.whitecustom-graphite {
  color: #FFF;
  background: var(--colour-custom-graphite);
}
header.alwaysDesktop a.header_button.whitecustom-graphite svg, header.alwaysDesktop span.header_button.whitecustom-graphite svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitecustom-graphite:hover, header.alwaysDesktop span.header_button.whitecustom-graphite:hover {
    background: var(--colour-custom-graphite-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whitecustom-graphite:hover svg, header.alwaysDesktop span.header_button.whitecustom-graphite:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whitecustom-graphite:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whitecustom-graphite:not(.no_active, .active):active {
  background: var(--colour-custom-graphite-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-graphite:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whitecustom-graphite:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-graphite.active, header.alwaysDesktop span.header_button.whitecustom-graphite.active {
  background: var(--colour-dark-custom-graphite);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-graphite.active svg, header.alwaysDesktop span.header_button.whitecustom-graphite.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitecustom-graphite.active:hover, header.alwaysDesktop span.header_button.whitecustom-graphite.active:hover {
    background: var(--colour-dark-custom-graphite-hover);
  }
}
header.alwaysDesktop a.header_button.whitecustom-graphite.active:active, header.alwaysDesktop span.header_button.whitecustom-graphite.active:active {
  background: var(--colour-dark-custom-graphite-active);
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen, header.alwaysDesktop span.header_button.whitecustom-fpgreen {
  color: #FFF;
  background: var(--colour-custom-fpgreen);
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen svg, header.alwaysDesktop span.header_button.whitecustom-fpgreen svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitecustom-fpgreen:hover, header.alwaysDesktop span.header_button.whitecustom-fpgreen:hover {
    background: var(--colour-custom-fpgreen-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whitecustom-fpgreen:hover svg, header.alwaysDesktop span.header_button.whitecustom-fpgreen:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whitecustom-fpgreen:not(.no_active, .active):active {
  background: var(--colour-custom-fpgreen-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whitecustom-fpgreen:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen.active, header.alwaysDesktop span.header_button.whitecustom-fpgreen.active {
  background: var(--colour-dark-custom-fpgreen);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen.active svg, header.alwaysDesktop span.header_button.whitecustom-fpgreen.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitecustom-fpgreen.active:hover, header.alwaysDesktop span.header_button.whitecustom-fpgreen.active:hover {
    background: var(--colour-dark-custom-fpgreen-hover);
  }
}
header.alwaysDesktop a.header_button.whitecustom-fpgreen.active:active, header.alwaysDesktop span.header_button.whitecustom-fpgreen.active:active {
  background: var(--colour-dark-custom-fpgreen-active);
}
header.alwaysDesktop a.header_button.whitered, header.alwaysDesktop span.header_button.whitered {
  color: #FFF;
  background: var(--colour-red);
}
header.alwaysDesktop a.header_button.whitered svg, header.alwaysDesktop span.header_button.whitered svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitered:hover, header.alwaysDesktop span.header_button.whitered:hover {
    background: var(--colour-red-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whitered:hover svg, header.alwaysDesktop span.header_button.whitered:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whitered:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whitered:not(.no_active, .active):active {
  background: var(--colour-red-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitered:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whitered:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whitered.active, header.alwaysDesktop span.header_button.whitered.active {
  background: var(--colour-dark-red);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitered.active svg, header.alwaysDesktop span.header_button.whitered.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitered.active:hover, header.alwaysDesktop span.header_button.whitered.active:hover {
    background: var(--colour-dark-red-hover);
  }
}
header.alwaysDesktop a.header_button.whitered.active:active, header.alwaysDesktop span.header_button.whitered.active:active {
  background: var(--colour-dark-red-active);
}
header.alwaysDesktop a.header_button.whiteorange, header.alwaysDesktop span.header_button.whiteorange {
  color: #FFF;
  background: var(--colour-orange);
}
header.alwaysDesktop a.header_button.whiteorange svg, header.alwaysDesktop span.header_button.whiteorange svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteorange:hover, header.alwaysDesktop span.header_button.whiteorange:hover {
    background: var(--colour-orange-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whiteorange:hover svg, header.alwaysDesktop span.header_button.whiteorange:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whiteorange:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whiteorange:not(.no_active, .active):active {
  background: var(--colour-orange-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteorange:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whiteorange:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whiteorange.active, header.alwaysDesktop span.header_button.whiteorange.active {
  background: var(--colour-dark-orange);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteorange.active svg, header.alwaysDesktop span.header_button.whiteorange.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteorange.active:hover, header.alwaysDesktop span.header_button.whiteorange.active:hover {
    background: var(--colour-dark-orange-hover);
  }
}
header.alwaysDesktop a.header_button.whiteorange.active:active, header.alwaysDesktop span.header_button.whiteorange.active:active {
  background: var(--colour-dark-orange-active);
}
header.alwaysDesktop a.header_button.whiteyellow, header.alwaysDesktop span.header_button.whiteyellow {
  color: #FFF;
  background: var(--colour-yellow);
}
header.alwaysDesktop a.header_button.whiteyellow svg, header.alwaysDesktop span.header_button.whiteyellow svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteyellow:hover, header.alwaysDesktop span.header_button.whiteyellow:hover {
    background: var(--colour-yellow-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whiteyellow:hover svg, header.alwaysDesktop span.header_button.whiteyellow:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whiteyellow:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whiteyellow:not(.no_active, .active):active {
  background: var(--colour-yellow-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteyellow:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whiteyellow:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whiteyellow.active, header.alwaysDesktop span.header_button.whiteyellow.active {
  background: var(--colour-dark-yellow);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteyellow.active svg, header.alwaysDesktop span.header_button.whiteyellow.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteyellow.active:hover, header.alwaysDesktop span.header_button.whiteyellow.active:hover {
    background: var(--colour-dark-yellow-hover);
  }
}
header.alwaysDesktop a.header_button.whiteyellow.active:active, header.alwaysDesktop span.header_button.whiteyellow.active:active {
  background: var(--colour-dark-yellow-active);
}
header.alwaysDesktop a.header_button.whitegreen, header.alwaysDesktop span.header_button.whitegreen {
  color: #FFF;
  background: var(--colour-green);
}
header.alwaysDesktop a.header_button.whitegreen svg, header.alwaysDesktop span.header_button.whitegreen svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitegreen:hover, header.alwaysDesktop span.header_button.whitegreen:hover {
    background: var(--colour-green-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whitegreen:hover svg, header.alwaysDesktop span.header_button.whitegreen:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whitegreen:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whitegreen:not(.no_active, .active):active {
  background: var(--colour-green-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitegreen:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whitegreen:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whitegreen.active, header.alwaysDesktop span.header_button.whitegreen.active {
  background: var(--colour-dark-green);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitegreen.active svg, header.alwaysDesktop span.header_button.whitegreen.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitegreen.active:hover, header.alwaysDesktop span.header_button.whitegreen.active:hover {
    background: var(--colour-dark-green-hover);
  }
}
header.alwaysDesktop a.header_button.whitegreen.active:active, header.alwaysDesktop span.header_button.whitegreen.active:active {
  background: var(--colour-dark-green-active);
}
header.alwaysDesktop a.header_button.whiteblue, header.alwaysDesktop span.header_button.whiteblue {
  color: #FFF;
  background: var(--colour-blue);
}
header.alwaysDesktop a.header_button.whiteblue svg, header.alwaysDesktop span.header_button.whiteblue svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteblue:hover, header.alwaysDesktop span.header_button.whiteblue:hover {
    background: var(--colour-blue-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whiteblue:hover svg, header.alwaysDesktop span.header_button.whiteblue:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whiteblue:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whiteblue:not(.no_active, .active):active {
  background: var(--colour-blue-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteblue:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whiteblue:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whiteblue.active, header.alwaysDesktop span.header_button.whiteblue.active {
  background: var(--colour-dark-blue);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteblue.active svg, header.alwaysDesktop span.header_button.whiteblue.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteblue.active:hover, header.alwaysDesktop span.header_button.whiteblue.active:hover {
    background: var(--colour-dark-blue-hover);
  }
}
header.alwaysDesktop a.header_button.whiteblue.active:active, header.alwaysDesktop span.header_button.whiteblue.active:active {
  background: var(--colour-dark-blue-active);
}
header.alwaysDesktop a.header_button.whiteindigo, header.alwaysDesktop span.header_button.whiteindigo {
  color: #FFF;
  background: var(--colour-indigo);
}
header.alwaysDesktop a.header_button.whiteindigo svg, header.alwaysDesktop span.header_button.whiteindigo svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteindigo:hover, header.alwaysDesktop span.header_button.whiteindigo:hover {
    background: var(--colour-indigo-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whiteindigo:hover svg, header.alwaysDesktop span.header_button.whiteindigo:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whiteindigo:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whiteindigo:not(.no_active, .active):active {
  background: var(--colour-indigo-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteindigo:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whiteindigo:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whiteindigo.active, header.alwaysDesktop span.header_button.whiteindigo.active {
  background: var(--colour-dark-indigo);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteindigo.active svg, header.alwaysDesktop span.header_button.whiteindigo.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteindigo.active:hover, header.alwaysDesktop span.header_button.whiteindigo.active:hover {
    background: var(--colour-dark-indigo-hover);
  }
}
header.alwaysDesktop a.header_button.whiteindigo.active:active, header.alwaysDesktop span.header_button.whiteindigo.active:active {
  background: var(--colour-dark-indigo-active);
}
header.alwaysDesktop a.header_button.whiteviolet, header.alwaysDesktop span.header_button.whiteviolet {
  color: #FFF;
  background: var(--colour-violet);
}
header.alwaysDesktop a.header_button.whiteviolet svg, header.alwaysDesktop span.header_button.whiteviolet svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteviolet:hover, header.alwaysDesktop span.header_button.whiteviolet:hover {
    background: var(--colour-violet-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whiteviolet:hover svg, header.alwaysDesktop span.header_button.whiteviolet:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whiteviolet:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whiteviolet:not(.no_active, .active):active {
  background: var(--colour-violet-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteviolet:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whiteviolet:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whiteviolet.active, header.alwaysDesktop span.header_button.whiteviolet.active {
  background: var(--colour-dark-violet);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whiteviolet.active svg, header.alwaysDesktop span.header_button.whiteviolet.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whiteviolet.active:hover, header.alwaysDesktop span.header_button.whiteviolet.active:hover {
    background: var(--colour-dark-violet-hover);
  }
}
header.alwaysDesktop a.header_button.whiteviolet.active:active, header.alwaysDesktop span.header_button.whiteviolet.active:active {
  background: var(--colour-dark-violet-active);
}
header.alwaysDesktop a.header_button.whitegrey, header.alwaysDesktop span.header_button.whitegrey {
  color: #FFF;
  background: var(--colour-grey);
}
header.alwaysDesktop a.header_button.whitegrey svg, header.alwaysDesktop span.header_button.whitegrey svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitegrey:hover, header.alwaysDesktop span.header_button.whitegrey:hover {
    background: var(--colour-grey-hover);
    color: #FFF;
  }
  header.alwaysDesktop a.header_button.whitegrey:hover svg, header.alwaysDesktop span.header_button.whitegrey:hover svg {
    fill: #FFF;
  }
}
header.alwaysDesktop a.header_button.whitegrey:not(.no_active, .active):active, header.alwaysDesktop span.header_button.whitegrey:not(.no_active, .active):active {
  background: var(--colour-grey-active);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitegrey:not(.no_active, .active):active svg, header.alwaysDesktop span.header_button.whitegrey:not(.no_active, .active):active svg {
  fill: #FFF;
}
header.alwaysDesktop a.header_button.whitegrey.active, header.alwaysDesktop span.header_button.whitegrey.active {
  background: var(--colour-dark-grey);
  color: #FFF;
}
header.alwaysDesktop a.header_button.whitegrey.active svg, header.alwaysDesktop span.header_button.whitegrey.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  header.alwaysDesktop a.header_button.whitegrey.active:hover, header.alwaysDesktop span.header_button.whitegrey.active:hover {
    background: var(--colour-dark-grey-hover);
  }
}
header.alwaysDesktop a.header_button.whitegrey.active:active, header.alwaysDesktop span.header_button.whitegrey.active:active {
  background: var(--colour-dark-grey-active);
}

@media (min-width: 851px) {
  header.custom-pink {
    background: var(--colour-custom-pink);
    border-bottom: 1px solid var(--colour-custom-pink);
  }
  header.custom-pink a.header_button, header.custom-pink span.header_button {
    color: #FFF;
  }
  header.custom-pink a.header_button svg, header.custom-pink span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-pink a.header_button:hover, header.custom-pink span.header_button:hover {
    background: var(--colour-custom-pink-hover);
    color: #FFF;
  }
  header.custom-pink a.header_button:hover svg, header.custom-pink span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.custom-pink a.header_button:not(.no_active, .active):active, header.custom-pink span.header_button:not(.no_active, .active):active {
    background: var(--colour-custom-pink-active);
    color: #FFF;
  }
  header.custom-pink a.header_button:not(.no_active, .active):active svg, header.custom-pink span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.custom-pink a.header_button.active, header.custom-pink span.header_button.active {
    background: var(--colour-dark-custom-pink);
    color: #FFF;
  }
  header.custom-pink a.header_button.active svg, header.custom-pink span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-pink a.header_button.active:hover, header.custom-pink span.header_button.active:hover {
    background: var(--colour-dark-custom-pink-hover);
  }
}
@media (min-width: 851px) {
  header.custom-pink a.header_button.active:active, header.custom-pink span.header_button.active:active {
    background: var(--colour-dark-custom-pink-active);
  }
  header.custom-pink a.header_button.white, header.custom-pink span.header_button.white {
    background: #FFF;
    color: var(--colour-custom-pink);
  }
  header.custom-pink a.header_button.white svg, header.custom-pink span.header_button.white svg {
    fill: var(--colour-custom-pink);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-pink a.header_button.white:hover, header.custom-pink span.header_button.white:hover {
    color: var(--colour-custom-pink-hover);
  }
  header.custom-pink a.header_button.white:hover svg, header.custom-pink span.header_button.white:hover svg {
    fill: var(--colour-custom-pink-hover);
  }
}
@media (min-width: 851px) {
  header.custom-pink a.header_button.white:not(.no_active, .active):active, header.custom-pink span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-custom-pink-hover);
    color: var(--colour-custom-pink-active);
  }
  header.custom-pink a.header_button.white:not(.no_active, .active):active svg, header.custom-pink span.header_button.white:not(.no_active, .active):active svg {
    fill: var(--colour-custom-pink-active);
  }
  header.custom-graphite {
    background: var(--colour-custom-graphite);
    border-bottom: 1px solid var(--colour-custom-graphite);
  }
  header.custom-graphite a.header_button, header.custom-graphite span.header_button {
    color: #FFF;
  }
  header.custom-graphite a.header_button svg, header.custom-graphite span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-graphite a.header_button:hover, header.custom-graphite span.header_button:hover {
    background: var(--colour-custom-graphite-hover);
    color: #FFF;
  }
  header.custom-graphite a.header_button:hover svg, header.custom-graphite span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.custom-graphite a.header_button:not(.no_active, .active):active, header.custom-graphite span.header_button:not(.no_active, .active):active {
    background: var(--colour-custom-graphite-active);
    color: #FFF;
  }
  header.custom-graphite a.header_button:not(.no_active, .active):active svg, header.custom-graphite span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.custom-graphite a.header_button.active, header.custom-graphite span.header_button.active {
    background: var(--colour-dark-custom-graphite);
    color: #FFF;
  }
  header.custom-graphite a.header_button.active svg, header.custom-graphite span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-graphite a.header_button.active:hover, header.custom-graphite span.header_button.active:hover {
    background: var(--colour-dark-custom-graphite-hover);
  }
}
@media (min-width: 851px) {
  header.custom-graphite a.header_button.active:active, header.custom-graphite span.header_button.active:active {
    background: var(--colour-dark-custom-graphite-active);
  }
  header.custom-graphite a.header_button.white, header.custom-graphite span.header_button.white {
    background: #FFF;
    color: var(--colour-custom-graphite);
  }
  header.custom-graphite a.header_button.white svg, header.custom-graphite span.header_button.white svg {
    fill: var(--colour-custom-graphite);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-graphite a.header_button.white:hover, header.custom-graphite span.header_button.white:hover {
    color: var(--colour-custom-graphite-hover);
  }
  header.custom-graphite a.header_button.white:hover svg, header.custom-graphite span.header_button.white:hover svg {
    fill: var(--colour-custom-graphite-hover);
  }
}
@media (min-width: 851px) {
  header.custom-graphite a.header_button.white:not(.no_active, .active):active, header.custom-graphite span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-custom-graphite-hover);
    color: var(--colour-custom-graphite-active);
  }
  header.custom-graphite a.header_button.white:not(.no_active, .active):active svg, header.custom-graphite span.header_button.white:not(.no_active, .active):active svg {
    fill: var(--colour-custom-graphite-active);
  }
  header.custom-fpgreen {
    background: var(--colour-custom-fpgreen);
    border-bottom: 1px solid var(--colour-custom-fpgreen);
  }
  header.custom-fpgreen a.header_button, header.custom-fpgreen span.header_button {
    color: #FFF;
  }
  header.custom-fpgreen a.header_button svg, header.custom-fpgreen span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-fpgreen a.header_button:hover, header.custom-fpgreen span.header_button:hover {
    background: var(--colour-custom-fpgreen-hover);
    color: #FFF;
  }
  header.custom-fpgreen a.header_button:hover svg, header.custom-fpgreen span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.custom-fpgreen a.header_button:not(.no_active, .active):active, header.custom-fpgreen span.header_button:not(.no_active, .active):active {
    background: var(--colour-custom-fpgreen-active);
    color: #FFF;
  }
  header.custom-fpgreen a.header_button:not(.no_active, .active):active svg, header.custom-fpgreen span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.custom-fpgreen a.header_button.active, header.custom-fpgreen span.header_button.active {
    background: var(--colour-dark-custom-fpgreen);
    color: #FFF;
  }
  header.custom-fpgreen a.header_button.active svg, header.custom-fpgreen span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-fpgreen a.header_button.active:hover, header.custom-fpgreen span.header_button.active:hover {
    background: var(--colour-dark-custom-fpgreen-hover);
  }
}
@media (min-width: 851px) {
  header.custom-fpgreen a.header_button.active:active, header.custom-fpgreen span.header_button.active:active {
    background: var(--colour-dark-custom-fpgreen-active);
  }
  header.custom-fpgreen a.header_button.white, header.custom-fpgreen span.header_button.white {
    background: #FFF;
    color: var(--colour-custom-fpgreen);
  }
  header.custom-fpgreen a.header_button.white svg, header.custom-fpgreen span.header_button.white svg {
    fill: var(--colour-custom-fpgreen);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.custom-fpgreen a.header_button.white:hover, header.custom-fpgreen span.header_button.white:hover {
    color: var(--colour-custom-fpgreen-hover);
  }
  header.custom-fpgreen a.header_button.white:hover svg, header.custom-fpgreen span.header_button.white:hover svg {
    fill: var(--colour-custom-fpgreen-hover);
  }
}
@media (min-width: 851px) {
  header.custom-fpgreen a.header_button.white:not(.no_active, .active):active, header.custom-fpgreen span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-custom-fpgreen-hover);
    color: var(--colour-custom-fpgreen-active);
  }
  header.custom-fpgreen a.header_button.white:not(.no_active, .active):active svg, header.custom-fpgreen span.header_button.white:not(.no_active, .active):active svg {
    fill: var(--colour-custom-fpgreen-active);
  }
  header.red {
    background: var(--colour-red);
    border-bottom: 1px solid var(--colour-red);
  }
  header.red a.header_button, header.red span.header_button {
    color: #FFF;
  }
  header.red a.header_button svg, header.red span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.red a.header_button:hover, header.red span.header_button:hover {
    background: var(--colour-red-hover);
    color: #FFF;
  }
  header.red a.header_button:hover svg, header.red span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.red a.header_button:not(.no_active, .active):active, header.red span.header_button:not(.no_active, .active):active {
    background: var(--colour-red-active);
    color: #FFF;
  }
  header.red a.header_button:not(.no_active, .active):active svg, header.red span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.red a.header_button.active, header.red span.header_button.active {
    background: var(--colour-dark-red);
    color: #FFF;
  }
  header.red a.header_button.active svg, header.red span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.red a.header_button.active:hover, header.red span.header_button.active:hover {
    background: var(--colour-dark-red-hover);
  }
}
@media (min-width: 851px) {
  header.red a.header_button.active:active, header.red span.header_button.active:active {
    background: var(--colour-dark-red-active);
  }
  header.red a.header_button.white, header.red span.header_button.white {
    background: #FFF;
    color: var(--colour-red);
  }
  header.red a.header_button.white svg, header.red span.header_button.white svg {
    fill: var(--colour-red);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.red a.header_button.white:hover, header.red span.header_button.white:hover {
    color: var(--colour-red-hover);
  }
  header.red a.header_button.white:hover svg, header.red span.header_button.white:hover svg {
    fill: var(--colour-red-hover);
  }
}
@media (min-width: 851px) {
  header.red a.header_button.white:not(.no_active, .active):active, header.red span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-red-hover);
    color: var(--colour-red-active);
  }
  header.red a.header_button.white:not(.no_active, .active):active > svg, header.red span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-red-active);
  }
  header.orange {
    background: var(--colour-orange);
    border-bottom: 1px solid var(--colour-orange);
  }
  header.orange a.header_button, header.orange span.header_button {
    color: #FFF;
  }
  header.orange a.header_button svg, header.orange span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.orange a.header_button:hover, header.orange span.header_button:hover {
    background: var(--colour-orange-hover);
    color: #FFF;
  }
  header.orange a.header_button:hover svg, header.orange span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.orange a.header_button:not(.no_active, .active):active, header.orange span.header_button:not(.no_active, .active):active {
    background: var(--colour-orange-active);
    color: #FFF;
  }
  header.orange a.header_button:not(.no_active, .active):active svg, header.orange span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.orange a.header_button.active, header.orange span.header_button.active {
    background: var(--colour-dark-orange);
    color: #FFF;
  }
  header.orange a.header_button.active svg, header.orange span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.orange a.header_button.active:hover, header.orange span.header_button.active:hover {
    background: var(--colour-dark-orange-hover);
  }
}
@media (min-width: 851px) {
  header.orange a.header_button.active:active, header.orange span.header_button.active:active {
    background: var(--colour-dark-orange-active);
  }
  header.orange a.header_button.white, header.orange span.header_button.white {
    background: #FFF;
    color: var(--colour-orange);
  }
  header.orange a.header_button.white svg, header.orange span.header_button.white svg {
    fill: var(--colour-orange);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.orange a.header_button.white:hover, header.orange span.header_button.white:hover {
    color: var(--colour-orange-hover);
  }
  header.orange a.header_button.white:hover svg, header.orange span.header_button.white:hover svg {
    fill: var(--colour-orange-hover);
  }
}
@media (min-width: 851px) {
  header.orange a.header_button.white:not(.no_active, .active):active, header.orange span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-orange-hover);
    color: var(--colour-orange-active);
  }
  header.orange a.header_button.white:not(.no_active, .active):active > svg, header.orange span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-orange-active);
  }
  header.yellow {
    background: var(--colour-yellow);
    border-bottom: 1px solid var(--colour-yellow);
  }
  header.yellow a.header_button, header.yellow span.header_button {
    color: #FFF;
  }
  header.yellow a.header_button svg, header.yellow span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.yellow a.header_button:hover, header.yellow span.header_button:hover {
    background: var(--colour-yellow-hover);
    color: #FFF;
  }
  header.yellow a.header_button:hover svg, header.yellow span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.yellow a.header_button:not(.no_active, .active):active, header.yellow span.header_button:not(.no_active, .active):active {
    background: var(--colour-yellow-active);
    color: #FFF;
  }
  header.yellow a.header_button:not(.no_active, .active):active svg, header.yellow span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.yellow a.header_button.active, header.yellow span.header_button.active {
    background: var(--colour-dark-yellow);
    color: #FFF;
  }
  header.yellow a.header_button.active svg, header.yellow span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.yellow a.header_button.active:hover, header.yellow span.header_button.active:hover {
    background: var(--colour-dark-yellow-hover);
  }
}
@media (min-width: 851px) {
  header.yellow a.header_button.active:active, header.yellow span.header_button.active:active {
    background: var(--colour-dark-yellow-active);
  }
  header.yellow a.header_button.white, header.yellow span.header_button.white {
    background: #FFF;
    color: var(--colour-yellow);
  }
  header.yellow a.header_button.white svg, header.yellow span.header_button.white svg {
    fill: var(--colour-yellow);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.yellow a.header_button.white:hover, header.yellow span.header_button.white:hover {
    color: var(--colour-yellow-hover);
  }
  header.yellow a.header_button.white:hover svg, header.yellow span.header_button.white:hover svg {
    fill: var(--colour-yellow-hover);
  }
}
@media (min-width: 851px) {
  header.yellow a.header_button.white:not(.no_active, .active):active, header.yellow span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-yellow-hover);
    color: var(--colour-yellow-active);
  }
  header.yellow a.header_button.white:not(.no_active, .active):active > svg, header.yellow span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-yellow-active);
  }
  header.green {
    background: var(--colour-green);
    border-bottom: 1px solid var(--colour-green);
  }
  header.green a.header_button, header.green span.header_button {
    color: #FFF;
  }
  header.green a.header_button svg, header.green span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.green a.header_button:hover, header.green span.header_button:hover {
    background: var(--colour-green-hover);
    color: #FFF;
  }
  header.green a.header_button:hover svg, header.green span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.green a.header_button:not(.no_active, .active):active, header.green span.header_button:not(.no_active, .active):active {
    background: var(--colour-green-active);
    color: #FFF;
  }
  header.green a.header_button:not(.no_active, .active):active svg, header.green span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.green a.header_button.active, header.green span.header_button.active {
    background: var(--colour-dark-green);
    color: #FFF;
  }
  header.green a.header_button.active svg, header.green span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.green a.header_button.active:hover, header.green span.header_button.active:hover {
    background: var(--colour-dark-green-hover);
  }
}
@media (min-width: 851px) {
  header.green a.header_button.active:active, header.green span.header_button.active:active {
    background: var(--colour-dark-green-active);
  }
  header.green a.header_button.white, header.green span.header_button.white {
    background: #FFF;
    color: var(--colour-green);
  }
  header.green a.header_button.white svg, header.green span.header_button.white svg {
    fill: var(--colour-green);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.green a.header_button.white:hover, header.green span.header_button.white:hover {
    color: var(--colour-green-hover);
  }
  header.green a.header_button.white:hover svg, header.green span.header_button.white:hover svg {
    fill: var(--colour-green-hover);
  }
}
@media (min-width: 851px) {
  header.green a.header_button.white:not(.no_active, .active):active, header.green span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-green-hover);
    color: var(--colour-green-active);
  }
  header.green a.header_button.white:not(.no_active, .active):active > svg, header.green span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-green-active);
  }
  header.blue {
    background: var(--colour-blue);
    border-bottom: 1px solid var(--colour-blue);
  }
  header.blue a.header_button, header.blue span.header_button {
    color: #FFF;
  }
  header.blue a.header_button svg, header.blue span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.blue a.header_button:hover, header.blue span.header_button:hover {
    background: var(--colour-blue-hover);
    color: #FFF;
  }
  header.blue a.header_button:hover svg, header.blue span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.blue a.header_button:not(.no_active, .active):active, header.blue span.header_button:not(.no_active, .active):active {
    background: var(--colour-blue-active);
    color: #FFF;
  }
  header.blue a.header_button:not(.no_active, .active):active svg, header.blue span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.blue a.header_button.active, header.blue span.header_button.active {
    background: var(--colour-dark-blue);
    color: #FFF;
  }
  header.blue a.header_button.active svg, header.blue span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.blue a.header_button.active:hover, header.blue span.header_button.active:hover {
    background: var(--colour-dark-blue-hover);
  }
}
@media (min-width: 851px) {
  header.blue a.header_button.active:active, header.blue span.header_button.active:active {
    background: var(--colour-dark-blue-active);
  }
  header.blue a.header_button.white, header.blue span.header_button.white {
    background: #FFF;
    color: var(--colour-blue);
  }
  header.blue a.header_button.white svg, header.blue span.header_button.white svg {
    fill: var(--colour-blue);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.blue a.header_button.white:hover, header.blue span.header_button.white:hover {
    color: var(--colour-blue-hover);
  }
  header.blue a.header_button.white:hover svg, header.blue span.header_button.white:hover svg {
    fill: var(--colour-blue-hover);
  }
}
@media (min-width: 851px) {
  header.blue a.header_button.white:not(.no_active, .active):active, header.blue span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-blue-hover);
    color: var(--colour-blue-active);
  }
  header.blue a.header_button.white:not(.no_active, .active):active > svg, header.blue span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-blue-active);
  }
  header.indigo {
    background: var(--colour-indigo);
    border-bottom: 1px solid var(--colour-indigo);
  }
  header.indigo a.header_button, header.indigo span.header_button {
    color: #FFF;
  }
  header.indigo a.header_button svg, header.indigo span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.indigo a.header_button:hover, header.indigo span.header_button:hover {
    background: var(--colour-indigo-hover);
    color: #FFF;
  }
  header.indigo a.header_button:hover svg, header.indigo span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.indigo a.header_button:not(.no_active, .active):active, header.indigo span.header_button:not(.no_active, .active):active {
    background: var(--colour-indigo-active);
    color: #FFF;
  }
  header.indigo a.header_button:not(.no_active, .active):active svg, header.indigo span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.indigo a.header_button.active, header.indigo span.header_button.active {
    background: var(--colour-dark-indigo);
    color: #FFF;
  }
  header.indigo a.header_button.active svg, header.indigo span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.indigo a.header_button.active:hover, header.indigo span.header_button.active:hover {
    background: var(--colour-dark-indigo-hover);
  }
}
@media (min-width: 851px) {
  header.indigo a.header_button.active:active, header.indigo span.header_button.active:active {
    background: var(--colour-dark-indigo-active);
  }
  header.indigo a.header_button.white, header.indigo span.header_button.white {
    background: #FFF;
    color: var(--colour-indigo);
  }
  header.indigo a.header_button.white svg, header.indigo span.header_button.white svg {
    fill: var(--colour-indigo);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.indigo a.header_button.white:hover, header.indigo span.header_button.white:hover {
    color: var(--colour-indigo-hover);
  }
  header.indigo a.header_button.white:hover svg, header.indigo span.header_button.white:hover svg {
    fill: var(--colour-indigo-hover);
  }
}
@media (min-width: 851px) {
  header.indigo a.header_button.white:not(.no_active, .active):active, header.indigo span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-indigo-hover);
    color: var(--colour-indigo-active);
  }
  header.indigo a.header_button.white:not(.no_active, .active):active > svg, header.indigo span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-indigo-active);
  }
  header.violet {
    background: var(--colour-violet);
    border-bottom: 1px solid var(--colour-violet);
  }
  header.violet a.header_button, header.violet span.header_button {
    color: #FFF;
  }
  header.violet a.header_button svg, header.violet span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.violet a.header_button:hover, header.violet span.header_button:hover {
    background: var(--colour-violet-hover);
    color: #FFF;
  }
  header.violet a.header_button:hover svg, header.violet span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.violet a.header_button:not(.no_active, .active):active, header.violet span.header_button:not(.no_active, .active):active {
    background: var(--colour-violet-active);
    color: #FFF;
  }
  header.violet a.header_button:not(.no_active, .active):active svg, header.violet span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.violet a.header_button.active, header.violet span.header_button.active {
    background: var(--colour-dark-violet);
    color: #FFF;
  }
  header.violet a.header_button.active svg, header.violet span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.violet a.header_button.active:hover, header.violet span.header_button.active:hover {
    background: var(--colour-dark-violet-hover);
  }
}
@media (min-width: 851px) {
  header.violet a.header_button.active:active, header.violet span.header_button.active:active {
    background: var(--colour-dark-violet-active);
  }
  header.violet a.header_button.white, header.violet span.header_button.white {
    background: #FFF;
    color: var(--colour-violet);
  }
  header.violet a.header_button.white svg, header.violet span.header_button.white svg {
    fill: var(--colour-violet);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.violet a.header_button.white:hover, header.violet span.header_button.white:hover {
    color: var(--colour-violet-hover);
  }
  header.violet a.header_button.white:hover svg, header.violet span.header_button.white:hover svg {
    fill: var(--colour-violet-hover);
  }
}
@media (min-width: 851px) {
  header.violet a.header_button.white:not(.no_active, .active):active, header.violet span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-violet-hover);
    color: var(--colour-violet-active);
  }
  header.violet a.header_button.white:not(.no_active, .active):active > svg, header.violet span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-violet-active);
  }
  header.grey {
    background: var(--colour-grey);
    border-bottom: 1px solid var(--colour-grey);
  }
  header.grey a.header_button, header.grey span.header_button {
    color: #FFF;
  }
  header.grey a.header_button svg, header.grey span.header_button svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.grey a.header_button:hover, header.grey span.header_button:hover {
    background: var(--colour-grey-hover);
    color: #FFF;
  }
  header.grey a.header_button:hover svg, header.grey span.header_button:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header.grey a.header_button:not(.no_active, .active):active, header.grey span.header_button:not(.no_active, .active):active {
    background: var(--colour-grey-active);
    color: #FFF;
  }
  header.grey a.header_button:not(.no_active, .active):active svg, header.grey span.header_button:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header.grey a.header_button.active, header.grey span.header_button.active {
    background: var(--colour-dark-grey);
    color: #FFF;
  }
  header.grey a.header_button.active svg, header.grey span.header_button.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.grey a.header_button.active:hover, header.grey span.header_button.active:hover {
    background: var(--colour-dark-grey-hover);
  }
}
@media (min-width: 851px) {
  header.grey a.header_button.active:active, header.grey span.header_button.active:active {
    background: var(--colour-dark-grey-active);
  }
  header.grey a.header_button.white, header.grey span.header_button.white {
    background: #FFF;
    color: var(--colour-grey);
  }
  header.grey a.header_button.white svg, header.grey span.header_button.white svg {
    fill: var(--colour-grey);
  }
}
@media (min-width: 851px) and (hover: hover) {
  header.grey a.header_button.white:hover, header.grey span.header_button.white:hover {
    color: var(--colour-grey-hover);
  }
  header.grey a.header_button.white:hover svg, header.grey span.header_button.white:hover svg {
    fill: var(--colour-grey-hover);
  }
}
@media (min-width: 851px) {
  header.grey a.header_button.white:not(.no_active, .active):active, header.grey span.header_button.white:not(.no_active, .active):active {
    background: var(--colour-highlight-grey-hover);
    color: var(--colour-grey-active);
  }
  header.grey a.header_button.white:not(.no_active, .active):active > svg, header.grey span.header_button.white:not(.no_active, .active):active > svg {
    fill: var(--colour-grey-active);
  }
  header a.header_button.whitecustom-pink, header span.header_button.whitecustom-pink {
    color: #FFF;
    background: var(--colour-custom-pink);
  }
  header a.header_button.whitecustom-pink svg, header span.header_button.whitecustom-pink svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitecustom-pink:hover, header span.header_button.whitecustom-pink:hover {
    background: var(--colour-custom-pink-hover);
    color: #FFF;
  }
  header a.header_button.whitecustom-pink:hover svg, header span.header_button.whitecustom-pink:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whitecustom-pink:not(.no_active, .active):active, header span.header_button.whitecustom-pink:not(.no_active, .active):active {
    background: var(--colour-custom-pink-active);
    color: #FFF;
  }
  header a.header_button.whitecustom-pink:not(.no_active, .active):active svg, header span.header_button.whitecustom-pink:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whitecustom-pink.active, header span.header_button.whitecustom-pink.active {
    background: var(--colour-dark-custom-pink);
    color: #FFF;
  }
  header a.header_button.whitecustom-pink.active svg, header span.header_button.whitecustom-pink.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitecustom-pink.active:hover, header span.header_button.whitecustom-pink.active:hover {
    background: var(--colour-dark-custom-pink-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whitecustom-pink.active:active, header span.header_button.whitecustom-pink.active:active {
    background: var(--colour-dark-custom-pink-active);
  }
  header a.header_button.whitecustom-graphite, header span.header_button.whitecustom-graphite {
    color: #FFF;
    background: var(--colour-custom-graphite);
  }
  header a.header_button.whitecustom-graphite svg, header span.header_button.whitecustom-graphite svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitecustom-graphite:hover, header span.header_button.whitecustom-graphite:hover {
    background: var(--colour-custom-graphite-hover);
    color: #FFF;
  }
  header a.header_button.whitecustom-graphite:hover svg, header span.header_button.whitecustom-graphite:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whitecustom-graphite:not(.no_active, .active):active, header span.header_button.whitecustom-graphite:not(.no_active, .active):active {
    background: var(--colour-custom-graphite-active);
    color: #FFF;
  }
  header a.header_button.whitecustom-graphite:not(.no_active, .active):active svg, header span.header_button.whitecustom-graphite:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whitecustom-graphite.active, header span.header_button.whitecustom-graphite.active {
    background: var(--colour-dark-custom-graphite);
    color: #FFF;
  }
  header a.header_button.whitecustom-graphite.active svg, header span.header_button.whitecustom-graphite.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitecustom-graphite.active:hover, header span.header_button.whitecustom-graphite.active:hover {
    background: var(--colour-dark-custom-graphite-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whitecustom-graphite.active:active, header span.header_button.whitecustom-graphite.active:active {
    background: var(--colour-dark-custom-graphite-active);
  }
  header a.header_button.whitecustom-fpgreen, header span.header_button.whitecustom-fpgreen {
    color: #FFF;
    background: var(--colour-custom-fpgreen);
  }
  header a.header_button.whitecustom-fpgreen svg, header span.header_button.whitecustom-fpgreen svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitecustom-fpgreen:hover, header span.header_button.whitecustom-fpgreen:hover {
    background: var(--colour-custom-fpgreen-hover);
    color: #FFF;
  }
  header a.header_button.whitecustom-fpgreen:hover svg, header span.header_button.whitecustom-fpgreen:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whitecustom-fpgreen:not(.no_active, .active):active, header span.header_button.whitecustom-fpgreen:not(.no_active, .active):active {
    background: var(--colour-custom-fpgreen-active);
    color: #FFF;
  }
  header a.header_button.whitecustom-fpgreen:not(.no_active, .active):active svg, header span.header_button.whitecustom-fpgreen:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whitecustom-fpgreen.active, header span.header_button.whitecustom-fpgreen.active {
    background: var(--colour-dark-custom-fpgreen);
    color: #FFF;
  }
  header a.header_button.whitecustom-fpgreen.active svg, header span.header_button.whitecustom-fpgreen.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitecustom-fpgreen.active:hover, header span.header_button.whitecustom-fpgreen.active:hover {
    background: var(--colour-dark-custom-fpgreen-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whitecustom-fpgreen.active:active, header span.header_button.whitecustom-fpgreen.active:active {
    background: var(--colour-dark-custom-fpgreen-active);
  }
  header a.header_button.whitered, header span.header_button.whitered {
    color: #FFF;
    background: var(--colour-red);
  }
  header a.header_button.whitered svg, header span.header_button.whitered svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitered:hover, header span.header_button.whitered:hover {
    background: var(--colour-red-hover);
    color: #FFF;
  }
  header a.header_button.whitered:hover svg, header span.header_button.whitered:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whitered:not(.no_active, .active):active, header span.header_button.whitered:not(.no_active, .active):active {
    background: var(--colour-red-active);
    color: #FFF;
  }
  header a.header_button.whitered:not(.no_active, .active):active svg, header span.header_button.whitered:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whitered.active, header span.header_button.whitered.active {
    background: var(--colour-dark-red);
    color: #FFF;
  }
  header a.header_button.whitered.active svg, header span.header_button.whitered.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitered.active:hover, header span.header_button.whitered.active:hover {
    background: var(--colour-dark-red-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whitered.active:active, header span.header_button.whitered.active:active {
    background: var(--colour-dark-red-active);
  }
  header a.header_button.whiteorange, header span.header_button.whiteorange {
    color: #FFF;
    background: var(--colour-orange);
  }
  header a.header_button.whiteorange svg, header span.header_button.whiteorange svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteorange:hover, header span.header_button.whiteorange:hover {
    background: var(--colour-orange-hover);
    color: #FFF;
  }
  header a.header_button.whiteorange:hover svg, header span.header_button.whiteorange:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteorange:not(.no_active, .active):active, header span.header_button.whiteorange:not(.no_active, .active):active {
    background: var(--colour-orange-active);
    color: #FFF;
  }
  header a.header_button.whiteorange:not(.no_active, .active):active svg, header span.header_button.whiteorange:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whiteorange.active, header span.header_button.whiteorange.active {
    background: var(--colour-dark-orange);
    color: #FFF;
  }
  header a.header_button.whiteorange.active svg, header span.header_button.whiteorange.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteorange.active:hover, header span.header_button.whiteorange.active:hover {
    background: var(--colour-dark-orange-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteorange.active:active, header span.header_button.whiteorange.active:active {
    background: var(--colour-dark-orange-active);
  }
  header a.header_button.whiteyellow, header span.header_button.whiteyellow {
    color: #FFF;
    background: var(--colour-yellow);
  }
  header a.header_button.whiteyellow svg, header span.header_button.whiteyellow svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteyellow:hover, header span.header_button.whiteyellow:hover {
    background: var(--colour-yellow-hover);
    color: #FFF;
  }
  header a.header_button.whiteyellow:hover svg, header span.header_button.whiteyellow:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteyellow:not(.no_active, .active):active, header span.header_button.whiteyellow:not(.no_active, .active):active {
    background: var(--colour-yellow-active);
    color: #FFF;
  }
  header a.header_button.whiteyellow:not(.no_active, .active):active svg, header span.header_button.whiteyellow:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whiteyellow.active, header span.header_button.whiteyellow.active {
    background: var(--colour-dark-yellow);
    color: #FFF;
  }
  header a.header_button.whiteyellow.active svg, header span.header_button.whiteyellow.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteyellow.active:hover, header span.header_button.whiteyellow.active:hover {
    background: var(--colour-dark-yellow-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteyellow.active:active, header span.header_button.whiteyellow.active:active {
    background: var(--colour-dark-yellow-active);
  }
  header a.header_button.whitegreen, header span.header_button.whitegreen {
    color: #FFF;
    background: var(--colour-green);
  }
  header a.header_button.whitegreen svg, header span.header_button.whitegreen svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitegreen:hover, header span.header_button.whitegreen:hover {
    background: var(--colour-green-hover);
    color: #FFF;
  }
  header a.header_button.whitegreen:hover svg, header span.header_button.whitegreen:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whitegreen:not(.no_active, .active):active, header span.header_button.whitegreen:not(.no_active, .active):active {
    background: var(--colour-green-active);
    color: #FFF;
  }
  header a.header_button.whitegreen:not(.no_active, .active):active svg, header span.header_button.whitegreen:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whitegreen.active, header span.header_button.whitegreen.active {
    background: var(--colour-dark-green);
    color: #FFF;
  }
  header a.header_button.whitegreen.active svg, header span.header_button.whitegreen.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitegreen.active:hover, header span.header_button.whitegreen.active:hover {
    background: var(--colour-dark-green-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whitegreen.active:active, header span.header_button.whitegreen.active:active {
    background: var(--colour-dark-green-active);
  }
  header a.header_button.whiteblue, header span.header_button.whiteblue {
    color: #FFF;
    background: var(--colour-blue);
  }
  header a.header_button.whiteblue svg, header span.header_button.whiteblue svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteblue:hover, header span.header_button.whiteblue:hover {
    background: var(--colour-blue-hover);
    color: #FFF;
  }
  header a.header_button.whiteblue:hover svg, header span.header_button.whiteblue:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteblue:not(.no_active, .active):active, header span.header_button.whiteblue:not(.no_active, .active):active {
    background: var(--colour-blue-active);
    color: #FFF;
  }
  header a.header_button.whiteblue:not(.no_active, .active):active svg, header span.header_button.whiteblue:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whiteblue.active, header span.header_button.whiteblue.active {
    background: var(--colour-dark-blue);
    color: #FFF;
  }
  header a.header_button.whiteblue.active svg, header span.header_button.whiteblue.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteblue.active:hover, header span.header_button.whiteblue.active:hover {
    background: var(--colour-dark-blue-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteblue.active:active, header span.header_button.whiteblue.active:active {
    background: var(--colour-dark-blue-active);
  }
  header a.header_button.whiteindigo, header span.header_button.whiteindigo {
    color: #FFF;
    background: var(--colour-indigo);
  }
  header a.header_button.whiteindigo svg, header span.header_button.whiteindigo svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteindigo:hover, header span.header_button.whiteindigo:hover {
    background: var(--colour-indigo-hover);
    color: #FFF;
  }
  header a.header_button.whiteindigo:hover svg, header span.header_button.whiteindigo:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteindigo:not(.no_active, .active):active, header span.header_button.whiteindigo:not(.no_active, .active):active {
    background: var(--colour-indigo-active);
    color: #FFF;
  }
  header a.header_button.whiteindigo:not(.no_active, .active):active svg, header span.header_button.whiteindigo:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whiteindigo.active, header span.header_button.whiteindigo.active {
    background: var(--colour-dark-indigo);
    color: #FFF;
  }
  header a.header_button.whiteindigo.active svg, header span.header_button.whiteindigo.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteindigo.active:hover, header span.header_button.whiteindigo.active:hover {
    background: var(--colour-dark-indigo-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteindigo.active:active, header span.header_button.whiteindigo.active:active {
    background: var(--colour-dark-indigo-active);
  }
  header a.header_button.whiteviolet, header span.header_button.whiteviolet {
    color: #FFF;
    background: var(--colour-violet);
  }
  header a.header_button.whiteviolet svg, header span.header_button.whiteviolet svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteviolet:hover, header span.header_button.whiteviolet:hover {
    background: var(--colour-violet-hover);
    color: #FFF;
  }
  header a.header_button.whiteviolet:hover svg, header span.header_button.whiteviolet:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteviolet:not(.no_active, .active):active, header span.header_button.whiteviolet:not(.no_active, .active):active {
    background: var(--colour-violet-active);
    color: #FFF;
  }
  header a.header_button.whiteviolet:not(.no_active, .active):active svg, header span.header_button.whiteviolet:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whiteviolet.active, header span.header_button.whiteviolet.active {
    background: var(--colour-dark-violet);
    color: #FFF;
  }
  header a.header_button.whiteviolet.active svg, header span.header_button.whiteviolet.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whiteviolet.active:hover, header span.header_button.whiteviolet.active:hover {
    background: var(--colour-dark-violet-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whiteviolet.active:active, header span.header_button.whiteviolet.active:active {
    background: var(--colour-dark-violet-active);
  }
  header a.header_button.whitegrey, header span.header_button.whitegrey {
    color: #FFF;
    background: var(--colour-grey);
  }
  header a.header_button.whitegrey svg, header span.header_button.whitegrey svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitegrey:hover, header span.header_button.whitegrey:hover {
    background: var(--colour-grey-hover);
    color: #FFF;
  }
  header a.header_button.whitegrey:hover svg, header span.header_button.whitegrey:hover svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) {
  header a.header_button.whitegrey:not(.no_active, .active):active, header span.header_button.whitegrey:not(.no_active, .active):active {
    background: var(--colour-grey-active);
    color: #FFF;
  }
  header a.header_button.whitegrey:not(.no_active, .active):active svg, header span.header_button.whitegrey:not(.no_active, .active):active svg {
    fill: #FFF;
  }
  header a.header_button.whitegrey.active, header span.header_button.whitegrey.active {
    background: var(--colour-dark-grey);
    color: #FFF;
  }
  header a.header_button.whitegrey.active svg, header span.header_button.whitegrey.active svg {
    fill: #FFF;
  }
}
@media (min-width: 851px) and (hover: hover) {
  header a.header_button.whitegrey.active:hover, header span.header_button.whitegrey.active:hover {
    background: var(--colour-dark-grey-hover);
  }
}
@media (min-width: 851px) {
  header a.header_button.whitegrey.active:active, header span.header_button.whitegrey.active:active {
    background: var(--colour-dark-grey-active);
  }
}
header.icons_only a.header_button, header.icons_only span.header_button {
  padding: 0;
  min-width: 50px;
}
header.icons_only a.header_button.action, header.icons_only span.header_button.action {
  border-radius: 24px;
  padding: 0;
  margin-right: 0;
}
header.icons_only a.header_button > span, header.icons_only span.header_button > span {
  display: none;
}
header.icons_only a.header_button > span.counter, header.icons_only span.header_button > span.counter {
  display: none;
  position: absolute;
  left: 27px;
  top: 5px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  margin-left: unset;
  line-height: 12px;
}
header.icons_only a.header_button.active > span.counter, header.icons_only span.header_button.active > span.counter {
  display: none;
}
header.icons_only img.logo {
  display: none !important;
}
header.icons_only img.logo.square:not(.dark) {
  display: block !important;
}
header.icons_only span.bumper {
  display: none;
}

html[data-darkmode=true] header img.logo {
  display: none !important;
}
html[data-darkmode=true] header img.logo.dark:not(.square) {
  display: block !important;
}
html[data-darkmode=true] header.icons_only img.logo, html[data-darkmode=true] header.icons_only img.logo.dark:not(.square), html[data-darkmode=true] header.icons_only img.logo.square {
  display: none !important;
}
html[data-darkmode=true] header.icons_only img.logo.dark.square {
  display: block !important;
}

header.no_search input {
  display: none;
}

body.left header {
  width: 61px;
  height: 100%;
  background: var(--content-background-colour);
  border: 0;
  border-right: 1px solid var(--layout-border-colour);
  flex-shrink: 1;
  position: fixed;
  z-index: 10;
}
@media (hover: hover) {
  body.left header:hover {
    width: 300px;
  }
}

header span.header_button#user[data-loggedin=false] div.hover_holder {
  display: none !important;
}

@media (max-width: 850px) {
  html[data-darkmode=true] header img.logo, html[data-darkmode=true] header img.logo.dark:not(.square), html[data-darkmode=true] header img.logo.dark.square {
    display: none !important;
  }
  header:not(.alwaysDesktop) {
    height: 80px;
    padding-bottom: 10px;
    order: 1;
    justify-content: space-around;
    border-bottom: 0px;
    border-top: 1px solid var(--layout-border-colour);
    z-index: 3;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  }
  header:not(.alwaysDesktop).noshadow {
    border-top: 1px solid transparent;
    box-shadow: none;
  }
  header:not(.alwaysDesktop) img.logo, header:not(.alwaysDesktop).icons_only img.logo.square:not(.dark) {
    display: none !important;
  }
  header:not(.alwaysDesktop) > *:last-child {
    margin-left: 0;
  }
  header:not(.alwaysDesktop) span.bumper, header:not(.alwaysDesktop) input, header:not(.alwaysDesktop) search {
    display: none;
  }
  header:not(.alwaysDesktop) a.header_button, header:not(.alwaysDesktop) span.header_button {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    row-gap: 5px;
    flex-grow: 1;
    width: 1px;
    background: none;
    color: #a6a6a6;
    min-width: unset !important;
  }
  header:not(.alwaysDesktop) a.header_button span.counter, header:not(.alwaysDesktop) span.header_button span.counter {
    position: absolute;
    top: -5px;
    margin-left: 20px;
  }
  header:not(.alwaysDesktop) a.header_button span, header:not(.alwaysDesktop) span.header_button span {
    font-size: 11px;
  }
  header:not(.alwaysDesktop) a.header_button svg, header:not(.alwaysDesktop) span.header_button svg {
    width: 23px;
    height: 23px;
    fill: #BFBFBF;
  }
  header:not(.alwaysDesktop) a.header_button > img.person, header:not(.alwaysDesktop) span.header_button > img.person {
    width: 23px;
    height: 23px;
  }
  header:not(.alwaysDesktop) a.header_button.action, header:not(.alwaysDesktop) span.header_button.action {
    display: flex !important;
    position: fixed;
    bottom: 100px;
    left: calc(100vw - 80px);
    width: 60px;
    height: 60px;
    background: var(--theme-colour);
    border-radius: 30px !important;
  }
  header:not(.alwaysDesktop) a.header_button.action > svg, header:not(.alwaysDesktop) span.header_button.action > svg {
    display: none;
  }
  header:not(.alwaysDesktop) a.header_button.action > svg.actionIcon, header:not(.alwaysDesktop) span.header_button.action > svg.actionIcon {
    display: inline-flex;
    fill: #FFF !important;
    width: 30px;
    height: 30px;
  }
  header:not(.alwaysDesktop) a.header_button.action > span, header:not(.alwaysDesktop) span.header_button.action > span {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop) a.header_button.action:hover, header:not(.alwaysDesktop) span.header_button.action:hover {
    background: var(--theme-colour-hover) !important;
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop) a.header_button.action:active, header:not(.alwaysDesktop) span.header_button.action:active {
    background: var(--theme-colour-active) !important;
  }
  header:not(.alwaysDesktop) a.header_button.action.showmodal, header:not(.alwaysDesktop) span.header_button.action.showmodal {
    z-index: 2;
  }
  header:not(.alwaysDesktop) a.header_button.action.showmodal div.hover_holder, header:not(.alwaysDesktop) span.header_button.action.showmodal div.hover_holder {
    height: 100vh;
    padding-bottom: 180px;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 2;
  }
  header:not(.alwaysDesktop) a.header_button.action.showmodal div.hover_holder div.hover_body, header:not(.alwaysDesktop) span.header_button.action.showmodal div.hover_holder div.hover_body {
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    border: 0;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop) a.header_button:not(.action):hover, header:not(.alwaysDesktop) span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-blue-hover);
  }
  header:not(.alwaysDesktop) a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop) span.header_button:not(.action):hover > svg {
    fill: var(--colour-blue);
  }
  header:not(.alwaysDesktop) a.header_button:not(.action):hover div.hover_holder, header:not(.alwaysDesktop) span.header_button:not(.action):hover div.hover_holder {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop) a.header_button:hover div.hover_holder, header:not(.alwaysDesktop) span.header_button:hover div.hover_holder {
    display: none !important;
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop) a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop) span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-blue-active);
  }
  header:not(.alwaysDesktop) a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop) span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-blue-hover);
  }
  header:not(.alwaysDesktop) a.header_button.active, header:not(.alwaysDesktop) span.header_button.active {
    background: none;
    color: var(--colour-blue);
  }
  header:not(.alwaysDesktop) a.header_button.active > svg, header:not(.alwaysDesktop) span.header_button.active > svg {
    fill: var(--colour-blue);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop) a.header_button.active:hover, header:not(.alwaysDesktop) span.header_button.active:hover {
    background: none;
    color: var(--colour-blue);
  }
  header:not(.alwaysDesktop) a.header_button.active:hover > svg, header:not(.alwaysDesktop) span.header_button.active:hover > svg {
    fill: var(--colour-blue);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop) a.header_button.active:active, header:not(.alwaysDesktop) span.header_button.active:active {
    background: none;
    color: var(--colour-blue);
  }
  header:not(.alwaysDesktop) a.header_button.active:active > svg, header:not(.alwaysDesktop) span.header_button.active:active > svg {
    fill: var(--colour-blue);
  }
  header:not(.alwaysDesktop) a.header_button.active span.counter, header:not(.alwaysDesktop) span.header_button.active span.counter {
    display: none;
  }
  header:not(.alwaysDesktop) a.header_button.showmodal div.hover_holder, header:not(.alwaysDesktop) span.header_button.showmodal div.hover_holder {
    left: 0 !important;
    position: fixed;
    top: 0;
    width: 100vw;
    height: calc(100vh - 79px);
    border: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: nowrap;
    z-index: 0;
    background: var(--modal-holder-background);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
  header:not(.alwaysDesktop) a.header_button.showmodal div.hover_holder div.hover_body, header:not(.alwaysDesktop) span.header_button.showmodal div.hover_holder div.hover_body {
    z-index: 0;
    box-shadow: none;
    border-top: 1px solid var(--layout-border-colour);
    border-radius: 0;
  }
  header:not(.alwaysDesktop) a.header_button.showmodal div.hover_holder div.hover_body div.header_modal_item span.counter, header:not(.alwaysDesktop) span.header_button.showmodal div.hover_holder div.hover_body div.header_modal_item span.counter {
    position: relative;
    top: unset;
    margin: 0 10px;
  }
  header:not(.alwaysDesktop).noaction a.header_button.action, header:not(.alwaysDesktop).noaction span.header_button.action {
    display: none !important;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).custom-pink a.header_button:not(.action):hover, header:not(.alwaysDesktop).custom-pink span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-custom-pink-hover);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).custom-pink span.header_button:not(.action):hover > svg {
    fill: var(--colour-custom-pink);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).custom-pink a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).custom-pink span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-custom-pink-active);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).custom-pink span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-custom-pink-hover);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button.active, header:not(.alwaysDesktop).custom-pink span.header_button.active {
    background: none;
    color: var(--colour-custom-pink);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button.active > svg, header:not(.alwaysDesktop).custom-pink span.header_button.active > svg {
    fill: var(--colour-custom-pink);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).custom-pink a.header_button.active:hover, header:not(.alwaysDesktop).custom-pink span.header_button.active:hover {
    background: none;
    color: var(--colour-custom-pink);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button.active:hover svg, header:not(.alwaysDesktop).custom-pink span.header_button.active:hover svg {
    fill: var(--colour-custom-pink);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).custom-pink a.header_button.active:active, header:not(.alwaysDesktop).custom-pink span.header_button.active:active {
    background: none;
    color: var(--colour-custom-pink);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button.active:active > svg, header:not(.alwaysDesktop).custom-pink span.header_button.active:active > svg {
    fill: var(--colour-custom-pink);
  }
  header:not(.alwaysDesktop).custom-pink a.header_button.active span.counter, header:not(.alwaysDesktop).custom-pink span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).custom-graphite a.header_button:not(.action):hover, header:not(.alwaysDesktop).custom-graphite span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-custom-graphite-hover);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).custom-graphite span.header_button:not(.action):hover > svg {
    fill: var(--colour-custom-graphite);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).custom-graphite a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).custom-graphite span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-custom-graphite-active);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).custom-graphite span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-custom-graphite-hover);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button.active, header:not(.alwaysDesktop).custom-graphite span.header_button.active {
    background: none;
    color: var(--colour-custom-graphite);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button.active > svg, header:not(.alwaysDesktop).custom-graphite span.header_button.active > svg {
    fill: var(--colour-custom-graphite);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).custom-graphite a.header_button.active:hover, header:not(.alwaysDesktop).custom-graphite span.header_button.active:hover {
    background: none;
    color: var(--colour-custom-graphite);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button.active:hover svg, header:not(.alwaysDesktop).custom-graphite span.header_button.active:hover svg {
    fill: var(--colour-custom-graphite);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).custom-graphite a.header_button.active:active, header:not(.alwaysDesktop).custom-graphite span.header_button.active:active {
    background: none;
    color: var(--colour-custom-graphite);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button.active:active > svg, header:not(.alwaysDesktop).custom-graphite span.header_button.active:active > svg {
    fill: var(--colour-custom-graphite);
  }
  header:not(.alwaysDesktop).custom-graphite a.header_button.active span.counter, header:not(.alwaysDesktop).custom-graphite span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).custom-fpgreen a.header_button:not(.action):hover, header:not(.alwaysDesktop).custom-fpgreen span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-custom-fpgreen-hover);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).custom-fpgreen span.header_button:not(.action):hover > svg {
    fill: var(--colour-custom-fpgreen);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).custom-fpgreen a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).custom-fpgreen span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-custom-fpgreen-active);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).custom-fpgreen span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-custom-fpgreen-hover);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active {
    background: none;
    color: var(--colour-custom-fpgreen);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active > svg, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active > svg {
    fill: var(--colour-custom-fpgreen);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active:hover, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active:hover {
    background: none;
    color: var(--colour-custom-fpgreen);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active:hover svg, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active:hover svg {
    fill: var(--colour-custom-fpgreen);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active:active, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active:active {
    background: none;
    color: var(--colour-custom-fpgreen);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active:active > svg, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active:active > svg {
    fill: var(--colour-custom-fpgreen);
  }
  header:not(.alwaysDesktop).custom-fpgreen a.header_button.active span.counter, header:not(.alwaysDesktop).custom-fpgreen span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).red a.header_button:not(.action):hover, header:not(.alwaysDesktop).red span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-red-hover);
  }
  header:not(.alwaysDesktop).red a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).red span.header_button:not(.action):hover > svg {
    fill: var(--colour-red);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).red a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).red span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-red-active);
  }
  header:not(.alwaysDesktop).red a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).red span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-red-hover);
  }
  header:not(.alwaysDesktop).red a.header_button.active, header:not(.alwaysDesktop).red span.header_button.active {
    background: none;
    color: var(--colour-red);
  }
  header:not(.alwaysDesktop).red a.header_button.active > svg, header:not(.alwaysDesktop).red span.header_button.active > svg {
    fill: var(--colour-red);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).red a.header_button.active:hover, header:not(.alwaysDesktop).red span.header_button.active:hover {
    background: none;
    color: var(--colour-red);
  }
  header:not(.alwaysDesktop).red a.header_button.active:hover > svg, header:not(.alwaysDesktop).red span.header_button.active:hover > svg {
    fill: var(--colour-red);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).red a.header_button.active:active, header:not(.alwaysDesktop).red span.header_button.active:active {
    background: none;
    color: var(--colour-red);
  }
  header:not(.alwaysDesktop).red a.header_button.active:active > svg, header:not(.alwaysDesktop).red span.header_button.active:active > svg {
    fill: var(--colour-red);
  }
  header:not(.alwaysDesktop).red a.header_button.active span.counter, header:not(.alwaysDesktop).red span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).orange a.header_button:not(.action):hover, header:not(.alwaysDesktop).orange span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-orange-hover);
  }
  header:not(.alwaysDesktop).orange a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).orange span.header_button:not(.action):hover > svg {
    fill: var(--colour-orange);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).orange a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).orange span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-orange-active);
  }
  header:not(.alwaysDesktop).orange a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).orange span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-orange-hover);
  }
  header:not(.alwaysDesktop).orange a.header_button.active, header:not(.alwaysDesktop).orange span.header_button.active {
    background: none;
    color: var(--colour-orange);
  }
  header:not(.alwaysDesktop).orange a.header_button.active > svg, header:not(.alwaysDesktop).orange span.header_button.active > svg {
    fill: var(--colour-orange);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).orange a.header_button.active:hover, header:not(.alwaysDesktop).orange span.header_button.active:hover {
    background: none;
    color: var(--colour-orange);
  }
  header:not(.alwaysDesktop).orange a.header_button.active:hover > svg, header:not(.alwaysDesktop).orange span.header_button.active:hover > svg {
    fill: var(--colour-orange);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).orange a.header_button.active:active, header:not(.alwaysDesktop).orange span.header_button.active:active {
    background: none;
    color: var(--colour-orange);
  }
  header:not(.alwaysDesktop).orange a.header_button.active:active > svg, header:not(.alwaysDesktop).orange span.header_button.active:active > svg {
    fill: var(--colour-orange);
  }
  header:not(.alwaysDesktop).orange a.header_button.active span.counter, header:not(.alwaysDesktop).orange span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).yellow a.header_button:not(.action):hover, header:not(.alwaysDesktop).yellow span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-yellow-hover);
  }
  header:not(.alwaysDesktop).yellow a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).yellow span.header_button:not(.action):hover > svg {
    fill: var(--colour-yellow);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).yellow a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).yellow span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-yellow-active);
  }
  header:not(.alwaysDesktop).yellow a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).yellow span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-yellow-hover);
  }
  header:not(.alwaysDesktop).yellow a.header_button.active, header:not(.alwaysDesktop).yellow span.header_button.active {
    background: none;
    color: var(--colour-yellow);
  }
  header:not(.alwaysDesktop).yellow a.header_button.active > svg, header:not(.alwaysDesktop).yellow span.header_button.active > svg {
    fill: var(--colour-yellow);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).yellow a.header_button.active:hover, header:not(.alwaysDesktop).yellow span.header_button.active:hover {
    background: none;
    color: var(--colour-yellow);
  }
  header:not(.alwaysDesktop).yellow a.header_button.active:hover > svg, header:not(.alwaysDesktop).yellow span.header_button.active:hover > svg {
    fill: var(--colour-yellow);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).yellow a.header_button.active:active, header:not(.alwaysDesktop).yellow span.header_button.active:active {
    background: none;
    color: var(--colour-yellow);
  }
  header:not(.alwaysDesktop).yellow a.header_button.active:active > svg, header:not(.alwaysDesktop).yellow span.header_button.active:active > svg {
    fill: var(--colour-yellow);
  }
  header:not(.alwaysDesktop).yellow a.header_button.active span.counter, header:not(.alwaysDesktop).yellow span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).green a.header_button:not(.action):hover, header:not(.alwaysDesktop).green span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-green-hover);
  }
  header:not(.alwaysDesktop).green a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).green span.header_button:not(.action):hover > svg {
    fill: var(--colour-green);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).green a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).green span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-green-active);
  }
  header:not(.alwaysDesktop).green a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).green span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-green-hover);
  }
  header:not(.alwaysDesktop).green a.header_button.active, header:not(.alwaysDesktop).green span.header_button.active {
    background: none;
    color: var(--colour-green);
  }
  header:not(.alwaysDesktop).green a.header_button.active > svg, header:not(.alwaysDesktop).green span.header_button.active > svg {
    fill: var(--colour-green);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).green a.header_button.active:hover, header:not(.alwaysDesktop).green span.header_button.active:hover {
    background: none;
    color: var(--colour-green);
  }
  header:not(.alwaysDesktop).green a.header_button.active:hover > svg, header:not(.alwaysDesktop).green span.header_button.active:hover > svg {
    fill: var(--colour-green);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).green a.header_button.active:active, header:not(.alwaysDesktop).green span.header_button.active:active {
    background: none;
    color: var(--colour-green);
  }
  header:not(.alwaysDesktop).green a.header_button.active:active > svg, header:not(.alwaysDesktop).green span.header_button.active:active > svg {
    fill: var(--colour-green);
  }
  header:not(.alwaysDesktop).green a.header_button.active span.counter, header:not(.alwaysDesktop).green span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).blue a.header_button:not(.action):hover, header:not(.alwaysDesktop).blue span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-blue-hover);
  }
  header:not(.alwaysDesktop).blue a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).blue span.header_button:not(.action):hover > svg {
    fill: var(--colour-blue);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).blue a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).blue span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-blue-active);
  }
  header:not(.alwaysDesktop).blue a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).blue span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-blue-hover);
  }
  header:not(.alwaysDesktop).blue a.header_button.active, header:not(.alwaysDesktop).blue span.header_button.active {
    background: none;
    color: var(--colour-blue);
  }
  header:not(.alwaysDesktop).blue a.header_button.active > svg, header:not(.alwaysDesktop).blue span.header_button.active > svg {
    fill: var(--colour-blue);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).blue a.header_button.active:hover, header:not(.alwaysDesktop).blue span.header_button.active:hover {
    background: none;
    color: var(--colour-blue);
  }
  header:not(.alwaysDesktop).blue a.header_button.active:hover > svg, header:not(.alwaysDesktop).blue span.header_button.active:hover > svg {
    fill: var(--colour-blue);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).blue a.header_button.active:active, header:not(.alwaysDesktop).blue span.header_button.active:active {
    background: none;
    color: var(--colour-blue);
  }
  header:not(.alwaysDesktop).blue a.header_button.active:active > svg, header:not(.alwaysDesktop).blue span.header_button.active:active > svg {
    fill: var(--colour-blue);
  }
  header:not(.alwaysDesktop).blue a.header_button.active span.counter, header:not(.alwaysDesktop).blue span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).indigo a.header_button:not(.action):hover, header:not(.alwaysDesktop).indigo span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-indigo-hover);
  }
  header:not(.alwaysDesktop).indigo a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).indigo span.header_button:not(.action):hover > svg {
    fill: var(--colour-indigo);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).indigo a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).indigo span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-indigo-active);
  }
  header:not(.alwaysDesktop).indigo a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).indigo span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-indigo-hover);
  }
  header:not(.alwaysDesktop).indigo a.header_button.active, header:not(.alwaysDesktop).indigo span.header_button.active {
    background: none;
    color: var(--colour-indigo);
  }
  header:not(.alwaysDesktop).indigo a.header_button.active > svg, header:not(.alwaysDesktop).indigo span.header_button.active > svg {
    fill: var(--colour-indigo);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).indigo a.header_button.active:hover, header:not(.alwaysDesktop).indigo span.header_button.active:hover {
    background: none;
    color: var(--colour-indigo);
  }
  header:not(.alwaysDesktop).indigo a.header_button.active:hover > svg, header:not(.alwaysDesktop).indigo span.header_button.active:hover > svg {
    fill: var(--colour-indigo);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).indigo a.header_button.active:active, header:not(.alwaysDesktop).indigo span.header_button.active:active {
    background: none;
    color: var(--colour-indigo);
  }
  header:not(.alwaysDesktop).indigo a.header_button.active:active > svg, header:not(.alwaysDesktop).indigo span.header_button.active:active > svg {
    fill: var(--colour-indigo);
  }
  header:not(.alwaysDesktop).indigo a.header_button.active span.counter, header:not(.alwaysDesktop).indigo span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).violet a.header_button:not(.action):hover, header:not(.alwaysDesktop).violet span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-violet-hover);
  }
  header:not(.alwaysDesktop).violet a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).violet span.header_button:not(.action):hover > svg {
    fill: var(--colour-violet);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).violet a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).violet span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-violet-active);
  }
  header:not(.alwaysDesktop).violet a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).violet span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-violet-hover);
  }
  header:not(.alwaysDesktop).violet a.header_button.active, header:not(.alwaysDesktop).violet span.header_button.active {
    background: none;
    color: var(--colour-violet);
  }
  header:not(.alwaysDesktop).violet a.header_button.active > svg, header:not(.alwaysDesktop).violet span.header_button.active > svg {
    fill: var(--colour-violet);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).violet a.header_button.active:hover, header:not(.alwaysDesktop).violet span.header_button.active:hover {
    background: none;
    color: var(--colour-violet);
  }
  header:not(.alwaysDesktop).violet a.header_button.active:hover > svg, header:not(.alwaysDesktop).violet span.header_button.active:hover > svg {
    fill: var(--colour-violet);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).violet a.header_button.active:active, header:not(.alwaysDesktop).violet span.header_button.active:active {
    background: none;
    color: var(--colour-violet);
  }
  header:not(.alwaysDesktop).violet a.header_button.active:active > svg, header:not(.alwaysDesktop).violet span.header_button.active:active > svg {
    fill: var(--colour-violet);
  }
  header:not(.alwaysDesktop).violet a.header_button.active span.counter, header:not(.alwaysDesktop).violet span.header_button.active span.counter {
    display: none;
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).grey a.header_button:not(.action):hover, header:not(.alwaysDesktop).grey span.header_button:not(.action):hover {
    background: none;
    color: var(--colour-grey-hover);
  }
  header:not(.alwaysDesktop).grey a.header_button:not(.action):hover > svg, header:not(.alwaysDesktop).grey span.header_button:not(.action):hover > svg {
    fill: var(--colour-grey);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).grey a.header_button:not(.no_active, .active, .action):active, header:not(.alwaysDesktop).grey span.header_button:not(.no_active, .active, .action):active {
    background: none;
    color: var(--colour-grey-active);
  }
  header:not(.alwaysDesktop).grey a.header_button:not(.no_active, .active, .action):active > svg, header:not(.alwaysDesktop).grey span.header_button:not(.no_active, .active, .action):active > svg {
    fill: var(--colour-grey-hover);
  }
  header:not(.alwaysDesktop).grey a.header_button.active, header:not(.alwaysDesktop).grey span.header_button.active {
    background: none;
    color: var(--colour-grey);
  }
  header:not(.alwaysDesktop).grey a.header_button.active > svg, header:not(.alwaysDesktop).grey span.header_button.active > svg {
    fill: var(--colour-grey);
  }
}
@media (max-width: 850px) and (hover: hover) {
  header:not(.alwaysDesktop).grey a.header_button.active:hover, header:not(.alwaysDesktop).grey span.header_button.active:hover {
    background: none;
    color: var(--colour-grey);
  }
  header:not(.alwaysDesktop).grey a.header_button.active:hover > svg, header:not(.alwaysDesktop).grey span.header_button.active:hover > svg {
    fill: var(--colour-grey);
  }
}
@media (max-width: 850px) {
  header:not(.alwaysDesktop).grey a.header_button.active:active, header:not(.alwaysDesktop).grey span.header_button.active:active {
    background: none;
    color: var(--colour-grey);
  }
  header:not(.alwaysDesktop).grey a.header_button.active:active > svg, header:not(.alwaysDesktop).grey span.header_button.active:active > svg {
    fill: var(--colour-grey);
  }
  header:not(.alwaysDesktop).grey a.header_button.active span.counter, header:not(.alwaysDesktop).grey span.header_button.active span.counter {
    display: none;
  }
}
@media screen and (max-width: 850px) and (-webkit-min-device-pixel-ratio: 0) {
  header:not(.alwaysDesktop) a.header_button.showmodal:not(.action) div.hover_holder, header:not(.alwaysDesktop) span.header_button.showmodal:not(.action) div.hover_holder {
    bottom: 79px;
    height: -webkit-fill-available;
    top: unset;
  }
  header:not(.alwaysDesktop) a.header_button.action.showmodal div.hover_holder, header:not(.alwaysDesktop) span.header_button.action.showmodal div.hover_holder {
    bottom: 0;
    top: unset;
  }
}
/* _modal.scss */
div#modal_holder {
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  background: var(--modal-holder-background);
  position: fixed;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
}
div#modal_holder:not(.no_exit) {
  cursor: pointer;
}
div#modal_holder div.modal {
  min-height: 100px;
  max-height: 90vh;
  background: var(--modal-background);
  border-radius: 5px;
  margin-top: 5vh;
  box-shadow: var(--modal-box-shadow);
  cursor: default;
  padding: 20px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  min-width: 450px;
  overflow-y: scroll;
}
div#modal_holder div.modal span.close_modal {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 15px;
  right: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
div#modal_holder div.modal span.close_modal svg {
  width: 75%;
  height: 75%;
  fill: #999;
}
@media (hover: hover) {
  div#modal_holder div.modal span.close_modal:hover {
    background: var(--theme-bg-hover);
  }
  div#modal_holder div.modal span.close_modal:hover svg {
    fill: var(--theme-colour);
  }
}
div#modal_holder div.modal span.close_modal:active {
  background: var(--theme-bg-active);
}
div#modal_holder div.modal span.close_modal:active svg {
  fill: var(--theme-colour-hover);
}
div#modal_holder div.modal h1, div#modal_holder div.modal h4 {
  margin-left: 10px;
}
div#modal_holder div.modal h1.icon_right svg {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  margin-top: -5px;
  vertical-align: middle;
  fill: var(--theme-colour);
}
div#modal_holder div.modal h1.check::after, div#modal_holder div.modal h1.cross::after {
  width: 30px;
  height: 30px;
  background: #36B835;
  display: inline-block;
  content: "";
  vertical-align: middle;
  margin-top: -5px;
  margin-left: 10px;
  border-radius: 15px;
  background: url("https://images.crewlist.co/icons/ticknocircle/colour/FFFFFF") no-repeat 50% 50%/75%, #36B835;
}
div#modal_holder div.modal h1.cross::after {
  background: #CE3030;
  background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, #CE3030;
}
div#modal_holder div.modal h1 + h4 {
  margin-top: -5px;
}
div#modal_holder div.modal div.filter_holder {
  padding: 10px 5px 5px 5px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  overflow-y: scroll;
  margin-bottom: 10px;
  min-height: 60px;
}
div#modal_holder div.modal div.filter_holder hr {
  margin: 5px 0px;
  display: none;
  visibility: hidden;
}
div#modal_holder div.modal div.filter_holder.scroll_top {
  border-top: 1px solid var(--layout-border-colour);
}
div#modal_holder div.modal div.filter_holder.scroll_bottom {
  border-bottom: 1px solid var(--layout-border-colour);
}
div#modal_holder div.modal div.button_holder {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
}
div#modal_holder div.modal div.button_holder.split {
  justify-content: space-between;
}
div#modal_holder div.modal div.button_holder div.actions {
  margin-right: 10px;
  display: inline-flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}
div#modal_holder div.modal a.button {
  flex-shrink: 0;
}
div#modal_holder div.modal.column4, div#modal_holder div.modal.column3 {
  max-width: 800px;
}
div#modal_holder div.modal.buttons_fix_bottom {
  padding-bottom: 0;
}
div#modal_holder div.modal.buttons_fix_bottom div.buttons_bottom {
  position: sticky;
  bottom: 0;
  padding: 25px 40px 30px 40px;
  margin: 20px -40px 0 -40px;
  background: var(--modal-background);
  border-top: 1px solid var(--layout-border-colour);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
div#modal_holder div.modal.buttons_fix_bottom div.buttons_bottom.noshadow {
  border-top: 1px solid transparent;
  box-shadow: none;
}

div.new_awards_holder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  column-gap: 20px;
  row-gap: 20px;
  padding: 20px;
}
div.new_awards_holder img {
  background: none;
  width: 160px;
  height: 160px;
}

@media (max-height: 600px) {
  div#modal_holder div.modal {
    margin-top: 15px;
    max-height: calc(100vh - 30px);
  }
}
@media (max-width: 1024px) {
  div#modal_holder div.modal {
    margin-top: 15px;
    max-height: calc(100vh - 30px);
  }
}
@media (max-width: 850px) {
  div#modal_holder div.modal {
    padding: 20px;
  }
  div#modal_holder div.modal.mob_full {
    width: 100%;
    border-radius: 0;
    margin: 0;
    height: 100vh;
    height: -webkit-fill-available;
    max-height: unset !important;
    max-width: unset !important;
    min-width: unset !important;
    overflow-x: hidden;
  }
  div#modal_holder div.modal.mob_full.buttons_fix_bottom {
    padding-bottom: 120px;
  }
  div#modal_holder div.modal.mob_full.buttons_fix_bottom div.buttons_bottom {
    position: unset;
    bottom: unset;
    padding: unset;
    margin: unset;
    background: unset;
    box-shadow: unset;
    border-top: none;
  }
  div#modal_holder div.modal.mob_full.buttons_fix_bottom div.split_button_holder {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 10px;
    background: var(--modal-background);
    padding: 20px;
    border-top: 1px solid var(--layout-border-colour);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  }
  div#modal_holder div.modal.column3 {
    max-width: calc(100vw - 30px);
    min-width: calc(100vw - 30px);
  }
  div#modal_holder div.modal .mob_ignoreParentPaddingWidth {
    margin-left: -20px;
    margin-right: -20px;
  }
}
@media screen and (max-width: 850px) and (-webkit-min-device-pixel-ratio: 0) {
  div#modal_holder div.modal.mob_full {
    box-sizing: content-box;
  }
}
@media (max-width: 850px) {
  div.new_awards_holder img {
    background: none;
    width: 100px;
    height: 100px;
  }
}
/* _toast.scss */
div#toast_holder {
  width: 0px;
  max-height: calc(100vh - 90px);
  position: fixed;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 101;
  display: flex;
  column-gap: 20px;
  row-gap: 20px;
  direction: rtl;
  right: 20px;
  top: 80px;
  flex-direction: column-reverse;
}
div#toast_holder div.toast {
  direction: ltr;
  min-width: 250px;
  width: calc(var(--column-width) * 2 + var(--gutter-width) * 2);
  min-height: 80px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  opacity: 0;
  right: -20px;
  transition: opacity 1s, right 1s;
}
div#toast_holder div.toast.active {
  opacity: 1;
  right: 0;
  transition: opacity 0.1s, right 0.1s;
}

div#content.has_toolbar_right + div#toast_holder {
  right: 80px;
}

/* _content_structure.scss */ /* _colours.scss */
div#window_highlight {
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  position: absolute;
  z-index: 999;
  background: rgba(64, 126, 201, 0.2);
  backdrop-filter: blur(5px);
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 40px;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(64, 126, 201, 0.2);
  padding-bottom: 10vh;
}

div#content {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  /*
  height: 1px;
  overflow-y: scroll;	
  */
  height: auto;
}

body.left div#content {
  height: 100%;
  margin-left: 61px;
}

div#toolbar_right_content {
  background: var(--content-background-colour);
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  flex-grow: 1;
  min-width: 400px;
  border-left: 1px solid var(--layout-border-colour);
  width: calc(var(--column-width) * 3 + var(--gutter-width) * 3);
}
div#toolbar_right_content div.info_selector {
  display: flex;
  position: absolute;
  top: 15px;
  right: 15px;
  height: 30px;
  background: #FFFFFF;
  border-radius: 15px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0 2.5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div#toolbar_right_content div.info_selector span.button {
  width: 25px;
  height: 25px;
  display: inline-flex;
  border-radius: 15px;
  justify-content: center;
  align-content: center;
  align-items: center;
  cursor: pointer;
}
div#toolbar_right_content div.info_selector span.button svg {
  width: 12px;
  height: 12px;
  fill: #999;
}
@media (hover: hover) {
  div#toolbar_right_content div.info_selector span.button:hover {
    background: #ECF5FF;
  }
  div#toolbar_right_content div.info_selector span.button:hover svg {
    fill: #407EC9;
  }
}
div#toolbar_right_content div.info_selector span.button:active {
  background: #CFE7FF;
}
div#toolbar_right_content div.info_selector span.button:active svg {
  fill: #3971B5;
}
div#toolbar_right_content div.info_selector span.number {
  font-size: 12px;
  font-weight: 700;
  color: #808080;
  margin: 0 5px;
}
div#toolbar_right_content div.info_dropdown {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0 2.5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 100%;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  cursor: pointer;
  z-index: 2;
}
div#toolbar_right_content div.info_dropdown div.frame {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--content-background-colour);
  max-width: min(100% - 30px, 300px);
  max-height: calc(100% - 30px);
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  width: auto;
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
  cursor: default;
}
div#toolbar_right_content div.info_dropdown div.frame span#close_info_dropdown {
  width: 25px;
  height: 25px;
  display: inline-flex;
  border-radius: 15px;
  justify-content: center;
  align-content: center;
  align-items: center;
  cursor: pointer;
  margin: 10px 10px 8px 0;
}
div#toolbar_right_content div.info_dropdown div.frame span#close_info_dropdown svg {
  width: 75%;
  height: 75%;
  fill: #999;
}
@media (hover: hover) {
  div#toolbar_right_content div.info_dropdown div.frame span#close_info_dropdown:hover {
    background: #ECF5FF;
  }
  div#toolbar_right_content div.info_dropdown div.frame span#close_info_dropdown:hover svg {
    fill: #407EC9;
  }
}
div#toolbar_right_content div.info_dropdown div.frame span#close_info_dropdown:active {
  background: #CFE7FF;
}
div#toolbar_right_content div.info_dropdown div.frame span#close_info_dropdown:active svg {
  fill: #3971B5;
}
div#toolbar_right_content div.info_dropdown div.frame div.list {
  overflow-y: scroll;
  border-top: 1px solid #FAFAFA;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-end;
  align-items: stretch;
  max-width: 100%;
}
div#toolbar_right_content div.info_dropdown div.frame div.list div.item {
  width: 100%;
  padding: 0 15px;
  height: 60px;
  column-gap: 10px;
  flex-shrink: 0;
  flex-grow: 0;
}
div#toolbar_right_content div.info_dropdown div.frame div.list div.item > img {
  width: 30px;
  height: 30px;
}
div#toolbar_right_content div.info_dropdown div.frame div.list div.item > div.text {
  width: auto;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div#toolbar_right_content div.toolbar_right_header {
  height: 61px;
  border-bottom: 1px solid #F5F5F5;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
div#toolbar_right_content div.toolbar_right_header div.item {
  flex-grow: 1;
  border: 0;
}
div#toolbar_right_content div.toolbar_right_header div.info_selector {
  position: relative;
  top: unset;
}
div#toolbar_right_content div.toolbar_right_windows {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_calendar {
  display: none;
  height: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  flex-grow: 2;
  width: 1px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information {
  display: none;
  height: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  flex-grow: 1;
  width: 1px;
  min-width: 250px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header > img {
  width: 100%;
  height: 61px;
  object-fit: cover;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info {
  width: 100%;
  padding: 20px 0 0 20px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 20px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info img {
  width: 106px;
  height: 106px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #FFF;
  flex-shrink: 0;
  top: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background: var(--content-background-colour);
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info img.project {
  border-radius: 15px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info div.profiletext {
  display: inline-flex;
  margin: 35px 10px 0 12px;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info div.profiletext span.primary {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  line-height: 24px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info div.profiletext span.secondary {
  font-size: 16px;
  color: #4D4D4D;
  font-weight: 500;
  line-height: 18px;
  margin-top: 3px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info div.profiletext span.secondary svg {
  fill: #4D4D4D;
  vertical-align: top;
  margin-top: 1px;
  margin-right: 4px;
  display: inline-block;
  width: 15px;
  height: 15px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info div.profiletext span.tertiary {
  font-size: 16px;
  color: #808080;
  font-weight: 500;
  line-height: 18px;
  margin-top: 3px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info.loading img {
  background: var(--loading-bg);
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info.loading div.profiletext span.primary {
  border-radius: 5px;
  height: 22px;
  width: 60%;
  background: var(--loading-bg) !important;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info.loading div.profiletext span.secondary, div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header div.info.loading div.profiletext span.tertiary {
  border-radius: 5px;
  height: 18px;
  width: 50%;
  background: var(--loading-bg) !important;
  margin-top: 5px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_header img ~ div.info {
  top: -40px;
  margin-bottom: -20px;
}
div#toolbar_right_content div.toolbar_right_windows div.toolbar_right_information div.info_body {
  flex-grow: 1;
  /* border-top: 1px solid transparent; */
  overflow-y: scroll;
}
div#toolbar_right_content div.toolbar_right_windows div.error_message {
  display: none;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  row-gap: 20px;
  padding: 0 30px 100px 30px;
  text-align: center;
}
div#toolbar_right_content div.toolbar_right_windows div.error_message svg {
  width: 80px;
  fill: #d4d4d4;
  height: 80px;
}
div#toolbar_right_content div.toolbar_right_windows div.error_message span {
  font-size: 18px;
  font-weight: 500;
  color: #808080;
}
div#toolbar_right_content div.toolbar_right_windows div.error_message span span.body {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #999;
}
div#toolbar_right_content.has_header div.toolbar_right_header {
  display: flex;
}
div#toolbar_right_content.has_header div.toolbar_right_information div#resize_grabber {
  display: flex;
}
div#toolbar_right_content.has_header div.toolbar_right_information div.info_header {
  display: none;
}
div#toolbar_right_content.has_header div.toolbar_right_information div.tab_selector {
  margin-top: 10px;
}

div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_header {
  height: 81px;
}
div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_header div.item {
  height: 81px;
}
div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_header div.item > img {
  width: 50px;
  height: 50px;
}
div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_header div.item div.profiletext span.main {
  font-size: 18px;
  line-height: 20px;
}
div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_header div.item div.profiletext span.tertiary {
  font-size: 15px;
  line-height: 18px;
}
div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_information div.info_header > img {
  height: 80px;
}

div#toolbar_right {
  width: 61px;
  border-left: 1px solid var(--layout-border-colour);
  right: 0;
  position: fixed;
  height: calc(100% - 61px);
  display: none;
  padding: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div#content.has_toolbar_right {
  padding: 0px 61px;
}
div#content.has_toolbar_right div#toolbar_right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  row-gap: 10px;
  background: var(--content-background-colour);
  position: absolute;
  height: 100%;
}

div#content.has_toolbar_right.flex_full {
  padding: 0 61px 0 0;
}

div#body {
  border-left: 1px solid var(--layout-border-colour);
  border-right: 1px solid var(--layout-border-colour);
  /*
  height: fit-content;
  min-height: 100dvh;	
  */
  height: calc(100dvh - 61px);
  overflow-y: scroll;
  /* CHANGE DONE */
  background: var(--content-background-colour);
}
div#body.sidepadded {
  padding-left: calc(var(--gutter-width) / 2);
  padding-right: calc(var(--gutter-width) / 2);
}
div#body.job, div#body.callout, div#body.person, div#body.project, div#body.business {
  overflow-y: scroll;
  max-height: 100vh;
  padding-bottom: 80px;
}
div#body.job div.recommendButtonBox, div#body.callout div.recommendButtonBox, div#body.person div.recommendButtonBox, div#body.project div.recommendButtonBox, div#body.business div.recommendButtonBox {
  display: flex;
  flex-direction: row;
  padding: 0 20px 20px 20px;
  width: 100%;
  column-gap: 10px;
}
div#body.job div.recommendButtonBox span#sharePage, div#body.callout div.recommendButtonBox span#sharePage, div#body.person div.recommendButtonBox span#sharePage, div#body.project div.recommendButtonBox span#sharePage, div#body.business div.recommendButtonBox span#sharePage {
  width: 50px;
  height: 50px;
  margin: 0;
}
div#body.job div.recommended_by, div#body.callout div.recommended_by, div#body.person div.recommended_by, div#body.project div.recommended_by, div#body.business div.recommended_by {
  width: 100%;
  margin: 0 0 20px 0px;
}
div#body.job div.recommended_by > span, div#body.callout div.recommended_by > span, div#body.person div.recommended_by > span, div#body.project div.recommended_by > span, div#body.business div.recommended_by > span {
  font-size: 16px;
  font-weight: 700;
  color: var(--item-secondary-text);
  margin-left: 40px;
  margin-bottom: 10px;
  display: block;
}
div#body.job div.recommended_by div.recommend_scroller, div#body.callout div.recommended_by div.recommend_scroller, div#body.person div.recommended_by div.recommend_scroller, div#body.project div.recommended_by div.recommend_scroller, div#body.business div.recommended_by div.recommend_scroller {
  overflow-x: scroll;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  justify-content: flex-start;
  column-gap: 10px;
}
div#body.job div.recommended_by div.recommend_scroller a, div#body.callout div.recommended_by div.recommend_scroller a, div#body.person div.recommended_by div.recommend_scroller a, div#body.project div.recommended_by div.recommend_scroller a, div#body.business div.recommended_by div.recommend_scroller a {
  width: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 15px 10px 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--layout-border-colour);
  row-gap: 10px;
  flex-shrink: 0;
}
div#body.job div.recommended_by div.recommend_scroller a img, div#body.callout div.recommended_by div.recommend_scroller a img, div#body.person div.recommended_by div.recommend_scroller a img, div#body.project div.recommended_by div.recommend_scroller a img, div#body.business div.recommended_by div.recommend_scroller a img {
  width: 70px !important;
  aspect-ratio: 1;
  height: unset !important;
  border-radius: 50%;
}
div#body.job div.recommended_by div.recommend_scroller a span, div#body.callout div.recommended_by div.recommend_scroller a span, div#body.person div.recommended_by div.recommend_scroller a span, div#body.project div.recommended_by div.recommend_scroller a span, div#body.business div.recommended_by div.recommend_scroller a span {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--item-secondary-text);
  line-height: 16px;
  max-width: 100%;
  word-break: break-word;
  text-wrap: balance;
}
@media (hover: hover) {
  div#body.job div.recommended_by div.recommend_scroller a:hover, div#body.callout div.recommended_by div.recommend_scroller a:hover, div#body.person div.recommended_by div.recommend_scroller a:hover, div#body.project div.recommended_by div.recommend_scroller a:hover, div#body.business div.recommended_by div.recommend_scroller a:hover {
    background: var(--theme-bg-hover);
    border: 1px solid var(--theme-bg-active);
  }
  div#body.job div.recommended_by div.recommend_scroller a:hover img, div#body.callout div.recommended_by div.recommend_scroller a:hover img, div#body.person div.recommended_by div.recommend_scroller a:hover img, div#body.project div.recommended_by div.recommend_scroller a:hover img, div#body.business div.recommended_by div.recommend_scroller a:hover img {
    box-shadow: 0 0 5px rgba(57, 113, 181, 0.1019607843);
  }
  div#body.job div.recommended_by div.recommend_scroller a:hover span, div#body.callout div.recommended_by div.recommend_scroller a:hover span, div#body.person div.recommended_by div.recommend_scroller a:hover span, div#body.project div.recommended_by div.recommend_scroller a:hover span, div#body.business div.recommended_by div.recommend_scroller a:hover span {
    color: var(--theme-text-main-hover);
  }
}
div#body.job div.recommended_by div.recommend_scroller a:active, div#body.callout div.recommended_by div.recommend_scroller a:active, div#body.person div.recommended_by div.recommend_scroller a:active, div#body.project div.recommended_by div.recommend_scroller a:active, div#body.business div.recommended_by div.recommend_scroller a:active {
  background: var(--theme-bg-active);
  border: 1px solid var(--theme-bg-active);
}
div#body.job div.recommended_by div.recommend_scroller a:active span, div#body.callout div.recommended_by div.recommend_scroller a:active span, div#body.person div.recommended_by div.recommend_scroller a:active span, div#body.project div.recommended_by div.recommend_scroller a:active span, div#body.business div.recommended_by div.recommend_scroller a:active span {
  color: var(--theme-text-main-hover);
}
div#body.job div.profile_header_floating, div#body.callout div.profile_header_floating, div#body.person div.profile_header_floating, div#body.project div.profile_header_floating, div#body.business div.profile_header_floating {
  position: sticky;
  top: 0px;
  z-index: 3;
  margin-bottom: -60px;
  background: var(--content-background-colour);
}
div#body.job div.profile_header_floating > div.item, div#body.callout div.profile_header_floating > div.item, div#body.person div.profile_header_floating > div.item, div#body.project div.profile_header_floating > div.item, div#body.business div.profile_header_floating > div.item {
  border-bottom: 1px solid var(--layout-border-colour);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  height: 60px !important;
  align-items: center !important;
}
div#body.job div.profile_header_floating > div.item > img, div#body.callout div.profile_header_floating > div.item > img, div#body.person div.profile_header_floating > div.item > img, div#body.project div.profile_header_floating > div.item > img, div#body.business div.profile_header_floating > div.item > img {
  width: 40px !important;
  height: 40px !important;
}
div#body.job div.details_box, div#body.callout div.details_box, div#body.person div.details_box, div#body.project div.details_box, div#body.business div.details_box {
  background: var(--colour-grey-05);
  border-radius: 10px;
  margin: 0 20px 20px 20px;
  width: calc(100% - 40px);
  display: flex;
  row-gap: 20px;
  padding: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  container-type: inline-size;
  container-name: details_box;
}
div#body.job div.details_box div.details_sub_box, div#body.callout div.details_box div.details_sub_box, div#body.person div.details_box div.details_sub_box, div#body.project div.details_box div.details_sub_box, div#body.business div.details_box div.details_sub_box {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  row-gap: 10px;
  flex-grow: 1;
  width: 1px;
}
div#body.job div.details_box div.details_sub_box:has(+ div.details_sub_box), div#body.callout div.details_box div.details_sub_box:has(+ div.details_sub_box), div#body.person div.details_box div.details_sub_box:has(+ div.details_sub_box), div#body.project div.details_box div.details_sub_box:has(+ div.details_sub_box), div#body.business div.details_box div.details_sub_box:has(+ div.details_sub_box) {
  max-width: 50%;
  padding-right: 20px;
}
div#body.job div.details_box div.details_sub_box + div.details_sub_box, div#body.callout div.details_box div.details_sub_box + div.details_sub_box, div#body.person div.details_box div.details_sub_box + div.details_sub_box, div#body.project div.details_box div.details_sub_box + div.details_sub_box, div#body.business div.details_box div.details_sub_box + div.details_sub_box {
  padding-left: 20px;
  padding-right: 0px;
  border-left: 1px solid var(--layout-border-colour);
}
div#body.job div.details_box div.details_sub_box > span, div#body.callout div.details_box div.details_sub_box > span, div#body.person div.details_box div.details_sub_box > span, div#body.project div.details_box div.details_sub_box > span, div#body.business div.details_box div.details_sub_box > span {
  font-size: 16px;
  font-weight: 700;
  color: var(--item-secondary-text);
}
div#body.job div.details_box div.details_sub_box > a, div#body.callout div.details_box div.details_sub_box > a, div#body.person div.details_box div.details_sub_box > a, div#body.project div.details_box div.details_sub_box > a, div#body.business div.details_box div.details_sub_box > a {
  display: inline-flex;
  color: var(--item-tertiary-text);
  font-weight: 600;
  font-size: 15px;
  column-gap: 6px;
  padding-bottom: 5px;
}
div#body.job div.details_box div.details_sub_box > a > svg, div#body.callout div.details_box div.details_sub_box > a > svg, div#body.person div.details_box div.details_sub_box > a > svg, div#body.project div.details_box div.details_sub_box > a > svg, div#body.business div.details_box div.details_sub_box > a > svg {
  fill: var(--theme-text);
  vertical-align: top;
  display: inline-block;
  height: 14px;
  aspect-ratio: 1;
  width: unset;
  margin: 3px 0 0 0;
  flex-shrink: 0;
}
div#body.job div.details_box div.details_sub_box > a > img, div#body.callout div.details_box div.details_sub_box > a > img, div#body.person div.details_box div.details_sub_box > a > img, div#body.project div.details_box div.details_sub_box > a > img, div#body.business div.details_box div.details_sub_box > a > img {
  vertical-align: top;
  height: 18px;
  aspect-ratio: 1;
  width: unset;
  background: unset;
  border-radius: 2px;
  margin: 0 0 -1px -2px;
  flex-shrink: 0;
}
div#body.job div.details_box div.details_sub_box > a:is([href]), div#body.callout div.details_box div.details_sub_box > a:is([href]), div#body.person div.details_box div.details_sub_box > a:is([href]), div#body.project div.details_box div.details_sub_box > a:is([href]), div#body.business div.details_box div.details_sub_box > a:is([href]) {
  color: var(--theme-text);
}
@media (hover: hover) {
  div#body.job div.details_box div.details_sub_box > a:is([href]):hover, div#body.callout div.details_box div.details_sub_box > a:is([href]):hover, div#body.person div.details_box div.details_sub_box > a:is([href]):hover, div#body.project div.details_box div.details_sub_box > a:is([href]):hover, div#body.business div.details_box div.details_sub_box > a:is([href]):hover {
    color: var(--theme-text-hover);
  }
  div#body.job div.details_box div.details_sub_box > a:is([href]):hover svg, div#body.callout div.details_box div.details_sub_box > a:is([href]):hover svg, div#body.person div.details_box div.details_sub_box > a:is([href]):hover svg, div#body.project div.details_box div.details_sub_box > a:is([href]):hover svg, div#body.business div.details_box div.details_sub_box > a:is([href]):hover svg {
    fill: var(--theme-text-hover);
  }
}
div#body.job div.details_box div.details_sub_box > a:is([href]):active, div#body.callout div.details_box div.details_sub_box > a:is([href]):active, div#body.person div.details_box div.details_sub_box > a:is([href]):active, div#body.project div.details_box div.details_sub_box > a:is([href]):active, div#body.business div.details_box div.details_sub_box > a:is([href]):active {
  color: var(--theme-text-active);
}
div#body.job div.details_box div.details_sub_box > a:is([href]):active svg, div#body.callout div.details_box div.details_sub_box > a:is([href]):active svg, div#body.person div.details_box div.details_sub_box > a:is([href]):active svg, div#body.project div.details_box div.details_sub_box > a:is([href]):active svg, div#body.business div.details_box div.details_sub_box > a:is([href]):active svg {
  fill: var(--theme-text-active);
}
div#body.job div.details_box div.details_sub_box > a > span, div#body.callout div.details_box div.details_sub_box > a > span, div#body.person div.details_box div.details_sub_box > a > span, div#body.project div.details_box div.details_sub_box > a > span, div#body.business div.details_box div.details_sub_box > a > span {
  word-wrap: break-word;
  white-space: normal;
  display: inline-block;
  max-width: calc(100% - 20px);
  text-wrap: balance;
}
div#body.job div.details_box div.details_sub_box > a + span, div#body.callout div.details_box div.details_sub_box > a + span, div#body.person div.details_box div.details_sub_box > a + span, div#body.project div.details_box div.details_sub_box > a + span, div#body.business div.details_box div.details_sub_box > a + span {
  margin-top: 10px;
}
div#body.job div.profiletext, div#body.callout div.profiletext, div#body.person div.profiletext, div#body.project div.profiletext, div#body.business div.profiletext {
  width: 100%;
  padding: 20px;
}
div#body.job div.profiletext span.main, div#body.callout div.profiletext span.main, div#body.person div.profiletext span.main, div#body.project div.profiletext span.main, div#body.business div.profiletext span.main {
  font-weight: bold;
  font-size: 22px;
  margin: 0 0 5px 0;
  color: var(--item-primary-text);
  line-height: 24px;
  display: block;
}
div#body.job div.profiletext span.secondary, div#body.callout div.profiletext span.secondary, div#body.person div.profiletext span.secondary, div#body.project div.profiletext span.secondary, div#body.business div.profiletext span.secondary {
  color: var(--item-secondary-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  display: flex;
}
div#body.job div.profiletext span.secondary svg, div#body.callout div.profiletext span.secondary svg, div#body.person div.profiletext span.secondary svg, div#body.project div.profiletext span.secondary svg, div#body.business div.profiletext span.secondary svg {
  fill: var(--item-secondary-text);
  vertical-align: top;
  margin-top: 3px;
  margin-right: 4px;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
div#body.job div.profiletext span.secondary.role + span.secondary.role svg, div#body.callout div.profiletext span.secondary.role + span.secondary.role svg, div#body.person div.profiletext span.secondary.role + span.secondary.role svg, div#body.project div.profiletext span.secondary.role + span.secondary.role svg, div#body.business div.profiletext span.secondary.role + span.secondary.role svg {
  visibility: hidden;
}
div#body.job div.profiletext span.secondary.role + span.secondary.location, div#body.callout div.profiletext span.secondary.role + span.secondary.location, div#body.person div.profiletext span.secondary.role + span.secondary.location, div#body.project div.profiletext span.secondary.role + span.secondary.location, div#body.business div.profiletext span.secondary.role + span.secondary.location {
  margin-top: 2px;
}
div#body.job div.profiletext span.secondary.location + span.secondary.location svg, div#body.callout div.profiletext span.secondary.location + span.secondary.location svg, div#body.person div.profiletext span.secondary.location + span.secondary.location svg, div#body.project div.profiletext span.secondary.location + span.secondary.location svg, div#body.business div.profiletext span.secondary.location + span.secondary.location svg {
  visibility: hidden;
}
div#body.job div.profiletext span.secondary + span.tertiary, div#body.callout div.profiletext span.secondary + span.tertiary, div#body.person div.profiletext span.secondary + span.tertiary, div#body.project div.profiletext span.secondary + span.tertiary, div#body.business div.profiletext span.secondary + span.tertiary {
  margin-top: 10px;
}
div#body.job div.profiletext span.secondary.othersapplied, div#body.callout div.profiletext span.secondary.othersapplied, div#body.person div.profiletext span.secondary.othersapplied, div#body.project div.profiletext span.secondary.othersapplied, div#body.business div.profiletext span.secondary.othersapplied {
  margin-top: 10px;
}
div#body.job div.profiletext span.secondary.red, div#body.callout div.profiletext span.secondary.red, div#body.person div.profiletext span.secondary.red, div#body.project div.profiletext span.secondary.red, div#body.business div.profiletext span.secondary.red {
  color: var(--colour-red);
}
div#body.job div.profiletext span.secondary.red svg, div#body.callout div.profiletext span.secondary.red svg, div#body.person div.profiletext span.secondary.red svg, div#body.project div.profiletext span.secondary.red svg, div#body.business div.profiletext span.secondary.red svg {
  fill: var(--colour-red);
}
div#body.job div.profiletext span.secondary.orange, div#body.callout div.profiletext span.secondary.orange, div#body.person div.profiletext span.secondary.orange, div#body.project div.profiletext span.secondary.orange, div#body.business div.profiletext span.secondary.orange {
  color: var(--colour-orange);
}
div#body.job div.profiletext span.secondary.orange svg, div#body.callout div.profiletext span.secondary.orange svg, div#body.person div.profiletext span.secondary.orange svg, div#body.project div.profiletext span.secondary.orange svg, div#body.business div.profiletext span.secondary.orange svg {
  fill: var(--colour-orange);
}
div#body.job div.profiletext span.secondary.yellow, div#body.callout div.profiletext span.secondary.yellow, div#body.person div.profiletext span.secondary.yellow, div#body.project div.profiletext span.secondary.yellow, div#body.business div.profiletext span.secondary.yellow {
  color: var(--colour-yellow);
}
div#body.job div.profiletext span.secondary.yellow svg, div#body.callout div.profiletext span.secondary.yellow svg, div#body.person div.profiletext span.secondary.yellow svg, div#body.project div.profiletext span.secondary.yellow svg, div#body.business div.profiletext span.secondary.yellow svg {
  fill: var(--colour-yellow);
}
div#body.job div.profiletext span.secondary.green, div#body.callout div.profiletext span.secondary.green, div#body.person div.profiletext span.secondary.green, div#body.project div.profiletext span.secondary.green, div#body.business div.profiletext span.secondary.green {
  color: var(--colour-green);
}
div#body.job div.profiletext span.secondary.green svg, div#body.callout div.profiletext span.secondary.green svg, div#body.person div.profiletext span.secondary.green svg, div#body.project div.profiletext span.secondary.green svg, div#body.business div.profiletext span.secondary.green svg {
  fill: var(--colour-green);
}
div#body.job div.profiletext span.secondary.blue, div#body.callout div.profiletext span.secondary.blue, div#body.person div.profiletext span.secondary.blue, div#body.project div.profiletext span.secondary.blue, div#body.business div.profiletext span.secondary.blue {
  color: var(--colour-blue);
}
div#body.job div.profiletext span.secondary.blue svg, div#body.callout div.profiletext span.secondary.blue svg, div#body.person div.profiletext span.secondary.blue svg, div#body.project div.profiletext span.secondary.blue svg, div#body.business div.profiletext span.secondary.blue svg {
  fill: var(--colour-blue);
}
div#body.job div.profiletext span.secondary.indigo, div#body.callout div.profiletext span.secondary.indigo, div#body.person div.profiletext span.secondary.indigo, div#body.project div.profiletext span.secondary.indigo, div#body.business div.profiletext span.secondary.indigo {
  color: var(--colour-indigo);
}
div#body.job div.profiletext span.secondary.indigo svg, div#body.callout div.profiletext span.secondary.indigo svg, div#body.person div.profiletext span.secondary.indigo svg, div#body.project div.profiletext span.secondary.indigo svg, div#body.business div.profiletext span.secondary.indigo svg {
  fill: var(--colour-indigo);
}
div#body.job div.profiletext span.secondary.violet, div#body.callout div.profiletext span.secondary.violet, div#body.person div.profiletext span.secondary.violet, div#body.project div.profiletext span.secondary.violet, div#body.business div.profiletext span.secondary.violet {
  color: var(--colour-violet);
}
div#body.job div.profiletext span.secondary.violet svg, div#body.callout div.profiletext span.secondary.violet svg, div#body.person div.profiletext span.secondary.violet svg, div#body.project div.profiletext span.secondary.violet svg, div#body.business div.profiletext span.secondary.violet svg {
  fill: var(--colour-violet);
}
div#body.job div.profiletext span.secondary.grey, div#body.callout div.profiletext span.secondary.grey, div#body.person div.profiletext span.secondary.grey, div#body.project div.profiletext span.secondary.grey, div#body.business div.profiletext span.secondary.grey {
  color: var(--colour-grey);
}
div#body.job div.profiletext span.secondary.grey svg, div#body.callout div.profiletext span.secondary.grey svg, div#body.person div.profiletext span.secondary.grey svg, div#body.project div.profiletext span.secondary.grey svg, div#body.business div.profiletext span.secondary.grey svg {
  fill: var(--colour-grey);
}
div#body.job div.profiletext span.tertiary, div#body.callout div.profiletext span.tertiary, div#body.person div.profiletext span.tertiary, div#body.project div.profiletext span.tertiary, div#body.business div.profiletext span.tertiary {
  color: var(--item-tertiary-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  display: block;
}
div#body.job div.profiletext span.tertiary p, div#body.job div.profiletext span.tertiary ul, div#body.job div.profiletext span.tertiary ol, div#body.callout div.profiletext span.tertiary p, div#body.callout div.profiletext span.tertiary ul, div#body.callout div.profiletext span.tertiary ol, div#body.person div.profiletext span.tertiary p, div#body.person div.profiletext span.tertiary ul, div#body.person div.profiletext span.tertiary ol, div#body.project div.profiletext span.tertiary p, div#body.project div.profiletext span.tertiary ul, div#body.project div.profiletext span.tertiary ol, div#body.business div.profiletext span.tertiary p, div#body.business div.profiletext span.tertiary ul, div#body.business div.profiletext span.tertiary ol {
  margin: 0 0 5px 0;
}
div#body.job div.profile_header, div#body.callout div.profile_header, div#body.person div.profile_header, div#body.project div.profile_header, div#body.business div.profile_header {
  display: flex;
  flex-direction: row;
  padding: 20px;
  align-items: center;
}
div#body.job div.profile_header img, div#body.callout div.profile_header img, div#body.person div.profile_header img, div#body.project div.profile_header img, div#body.business div.profile_header img {
  width: 140px;
  flex-shrink: 0;
  flex-grow: 0;
  height: 190px;
  border-radius: 5px;
  position: relative;
  top: 0px;
  box-shadow: var(--profile-image-shadow);
  margin-bottom: 0px;
  align-self: flex-start;
}
div#body.job div.profile_header div.profiletext, div#body.callout div.profile_header div.profiletext, div#body.person div.profile_header div.profiletext, div#body.project div.profile_header div.profiletext, div#body.business div.profile_header div.profiletext {
  padding-bottom: 0;
  padding-top: 0;
}
div#body.job > img, div#body.callout > img, div#body.person > img, div#body.project > img, div#body.business > img {
  height: 80px;
  width: 100%;
}
div#body.job > img + div.profile_header, div#body.callout > img + div.profile_header, div#body.person > img + div.profile_header, div#body.project > img + div.profile_header, div#body.business > img + div.profile_header {
  padding-top: 0;
}
div#body.job > img + div.profile_header img, div#body.callout > img + div.profile_header img, div#body.person > img + div.profile_header img, div#body.project > img + div.profile_header img, div#body.business > img + div.profile_header img {
  top: -40px;
  margin-bottom: -40px;
}
div#body.job > img + div.profile_header div.profiletext, div#body.callout > img + div.profile_header div.profiletext, div#body.person > img + div.profile_header div.profiletext, div#body.project > img + div.profile_header div.profiletext, div#body.business > img + div.profile_header div.profiletext {
  padding-top: 20px;
  align-self: flex-start;
}
div#body.job.job > div.profiletext, div#body.job.callout > div.profiletext, div#body.callout.job > div.profiletext, div#body.callout.callout > div.profiletext, div#body.person.job > div.profiletext, div#body.person.callout > div.profiletext, div#body.project.job > div.profiletext, div#body.project.callout > div.profiletext, div#body.business.job > div.profiletext, div#body.business.callout > div.profiletext {
  padding-bottom: 220px;
}
div#body.job.loading img, div#body.callout.loading img, div#body.person.loading img, div#body.project.loading img, div#body.business.loading img {
  background: var(--loading-bg);
}
div#body.job.loading div.profiletext span.main, div#body.callout.loading div.profiletext span.main, div#body.person.loading div.profiletext span.main, div#body.project.loading div.profiletext span.main, div#body.business.loading div.profiletext span.main {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 22px;
  width: 60%;
  margin-bottom: 15px;
}
div#body.job.loading div.profiletext span.main + span.tertiary, div#body.callout.loading div.profiletext span.main + span.tertiary, div#body.person.loading div.profiletext span.main + span.tertiary, div#body.project.loading div.profiletext span.main + span.tertiary, div#body.business.loading div.profiletext span.main + span.tertiary {
  margin-top: 15px;
}
div#body.job.loading div.profiletext span.secondary, div#body.callout.loading div.profiletext span.secondary, div#body.person.loading div.profiletext span.secondary, div#body.project.loading div.profiletext span.secondary, div#body.business.loading div.profiletext span.secondary {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 14px;
  width: 50%;
  margin: 0 0 8px 0;
}
div#body.job.loading div.profiletext span.secondary + span.tertiary, div#body.callout.loading div.profiletext span.secondary + span.tertiary, div#body.person.loading div.profiletext span.secondary + span.tertiary, div#body.project.loading div.profiletext span.secondary + span.tertiary, div#body.business.loading div.profiletext span.secondary + span.tertiary {
  margin-top: 15px;
}
div#body.job.loading div.profiletext span.tertiary, div#body.callout.loading div.profiletext span.tertiary, div#body.person.loading div.profiletext span.tertiary, div#body.project.loading div.profiletext span.tertiary, div#body.business.loading div.profiletext span.tertiary {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 13px;
  width: 98%;
  margin-top: 8px;
}
div#body.job.loading div.profiletext span.secondary.role + span.secondary.role, div#body.job.loading div.profiletext span.secondary.location + span.secondary.location, div#body.callout.loading div.profiletext span.secondary.role + span.secondary.role, div#body.callout.loading div.profiletext span.secondary.location + span.secondary.location {
  margin-left: 18px;
}
div#body.person div.profile_header img {
  border-radius: 50%;
  height: unset;
  aspect-ratio: 1;
}
div#body.business div.profile_header img {
  border-radius: 25%;
  height: unset;
  aspect-ratio: 1;
}
div#body.login {
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
div#content.flex_full div#body {
  border-right: 0px solid var(--layout-border-colour);
}

div.half_stacker {
  min-width: 150px;
  flex-grow: 1;
  flex-shrink: 1;
  width: 1px;
}
div.half_stacker h4 {
  margin: 0 0 5px 0;
}
div.half_stacker h4.loading {
  border-radius: 5px;
  height: 21px;
  width: 30%;
  background: var(--loading-bg) !important;
}

div.full_stacker {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}
div.full_stacker h4 {
  margin: 0 0 5px 0;
}
div.full_stacker h4.loading {
  border-radius: 5px;
  height: 21px;
  width: 30%;
  background: var(--loading-bg) !important;
}

div.padded_flex {
  display: flex;
  padding: 10px 20px 30px 20px;
  column-gap: 20px;
  row-gap: 20px;
  flex-wrap: wrap;
}

a.info {
  font-size: 14px;
  font-weight: 500;
  color: #808080;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  column-gap: 5px;
  height: 25px;
  max-width: 100%;
  line-height: 20px;
}
a.info.main {
  color: #666;
}
a.info span {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
a.info svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  fill: #808080;
  flex-shrink: 0;
  flex-grow: 0;
}
a.info.no_icon svg {
  visibility: hidden;
}
a.info.clickable:not(.loading) {
  cursor: pointer;
}
@media (hover: hover) {
  a.info.clickable:not(.loading):hover {
    color: #407ec9;
  }
  a.info.clickable:not(.loading):hover svg {
    fill: #407ec9;
  }
}
a.info.clickable:not(.loading):active {
  color: #3971B5;
}
a.info.clickable:not(.loading):active svg {
  fill: #3971B5;
}
a.info.loading span {
  border-radius: 5px;
  height: 13px;
  width: 60%;
  background: var(--loading-bg) !important;
}
a.info + h4 {
  margin-top: 15px;
}
a.info.multiline {
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  height: auto;
}
a.info.multiline span {
  text-overflow: unset;
  -o-text-overflow: unset;
  -webkit-text-overflow: unset;
  white-space: unset;
  overflow-x: unset;
}
a.info.multiline span p {
  margin: 0;
}

div#resize_grabber {
  width: 20px;
  height: 100%;
  position: absolute;
  z-index: 2;
  left: -10.5px;
  cursor: ew-resize;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
}
div#resize_grabber.resize_east_only {
  cursor: e-resize;
}
div#resize_grabber.resize_west_only {
  cursor: w-resize;
}
div#resize_grabber div.border {
  width: 0px;
  border-left: 1px solid transparent;
}
div#resize_grabber.sub_grabber {
  display: none;
}
div#resize_grabber.sub_grabber div.border {
  width: 0px;
  border-left: 1px solid #F5F5F5;
}
@media (hover: hover) {
  div#resize_grabber:hover div.border {
    border-left: 1px solid #407ec9 !important;
  }
}
div#resize_grabber.active div.border {
  border-left: 1px solid #407ec9 !important;
}
div#resize_grabber.error div.border {
  border-left: 1px solid #CE3030 !important;
}

div.bookings_container {
  position: absolute;
  width: 100%;
}
div.bookings_container span.big_title {
  width: 100%;
  display: flex;
  height: 45px;
  background: var(--content-background-colour);
  font-size: 20px;
  font-weight: 700;
  padding: 5px 10px 0 20px;
  align-items: center;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 2;
}
div.bookings_container span.big_title.border_bottom {
  border-bottom: 1px solid #FAFAFA;
}
div.bookings_container span.small_title {
  width: 100%;
  display: flex;
  height: 30px;
  background: #f8f8f8;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px 0 20px;
  align-items: center;
  text-transform: uppercase;
  color: #666666;
  position: sticky;
  top: 45px;
  z-index: 1;
}
div.bookings_container div.item {
  padding-left: 20px;
}

div#apply_buttons {
  position: fixed;
  bottom: 79px;
  width: 100%;
  background: var(--content-background-colour);
  padding: 20px 20px 10px 20px;
  border-top: 1px solid var(--layout-border-colour);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  column-gap: 10px;
  z-index: 2;
}
div#apply_buttons a.button {
  width: 1px;
  flex-grow: 1;
}
div#apply_buttons.vertical {
  flex-direction: column;
  row-gap: 10px;
  column-gap: 10px;
}
div#apply_buttons.vertical a.button {
  width: 100%;
}
div#apply_buttons span.secondary {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--colour-green);
  margin-bottom: 5px;
}
div#apply_buttons span.secondary svg {
  fill: var(--colour-green);
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
div#apply_buttons span.secondary.red {
  color: var(--colour-red);
}
div#apply_buttons span.secondary.red svg {
  fill: var(--colour-red);
}
div#apply_buttons span.secondary.orange {
  color: var(--colour-orange);
}
div#apply_buttons span.secondary.orange svg {
  fill: var(--colour-orange);
}
div#apply_buttons span.secondary.yellow {
  color: var(--colour-yellow);
}
div#apply_buttons span.secondary.yellow svg {
  fill: var(--colour-yellow);
}
div#apply_buttons span.secondary.green {
  color: var(--colour-green);
}
div#apply_buttons span.secondary.green svg {
  fill: var(--colour-green);
}
div#apply_buttons span.secondary.blue {
  color: var(--colour-blue);
}
div#apply_buttons span.secondary.blue svg {
  fill: var(--colour-blue);
}
div#apply_buttons span.secondary.indigo {
  color: var(--colour-indigo);
}
div#apply_buttons span.secondary.indigo svg {
  fill: var(--colour-indigo);
}
div#apply_buttons span.secondary.violet {
  color: var(--colour-violet);
}
div#apply_buttons span.secondary.violet svg {
  fill: var(--colour-violet);
}
div#apply_buttons span.secondary.grey {
  color: var(--colour-grey);
}
div#apply_buttons span.secondary.grey svg {
  fill: var(--colour-grey);
}

div.sharingOptions {
  display: grid;
  margin-bottom: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  align-items: start;
  margin-top: 10px;
}
div.sharingOptions a.social_button {
  min-width: 70px;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  row-gap: 5px;
  padding-bottom: 5px;
  color: var(--input-text-colour);
  cursor: pointer;
}
div.sharingOptions a.social_button span {
  width: 60px;
  height: 60px;
  background: var(--input-background-colour);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
div.sharingOptions a.social_button span svg {
  fill: #999;
  width: 22px;
  height: 22px;
}
div.sharingOptions a.social_button span img {
  height: 100%;
}
@media (hover: hover) {
  div.sharingOptions a.social_button:hover {
    color: var(--theme-colour);
  }
  div.sharingOptions a.social_button:hover span:has(svg) {
    background: var(--theme-bg-hover);
  }
  div.sharingOptions a.social_button:hover span:has(svg) svg {
    fill: var(--theme-colour);
  }
}
div.sharingOptions a.social_button:active {
  color: var(--theme-colour-hover);
}
div.sharingOptions a.social_button:active span:has(svg) {
  background: var(--theme-bg-active);
}
div.sharingOptions a.social_button:active span:has(svg) svg {
  fill: var(--theme-colour-hover);
}

div#body.sidepadded div#apply_buttons {
  margin-left: calc(var(--gutter-width) / -2);
}

div#sideMenu {
  padding-top: 80px;
}
div#sideMenu.sidepadded {
  padding-left: calc(var(--gutter-width) / 2);
  padding-right: calc(var(--gutter-width) / 2);
}
div#sideMenu > h1 {
  display: none;
}
div#sideMenu > h1.showDesktop {
  display: block;
  margin: 0 0 10px 15px;
}
div#sideMenu a.menuItem {
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--item-primary-text);
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  margin-bottom: 4px;
}
div#sideMenu a.menuItem svg {
  width: 16px;
  height: 16px;
  fill: var(--item-tertiary-text);
}
div#sideMenu a.menuItem.active {
  /*
  background: var(--theme-colour);
  color: #FFF;
  cursor: default;

  svg {
  	fill: #FFF;	
  }	
  */
  background: none;
  color: var(--theme-colour-hover);
  cursor: default;
}
div#sideMenu a.menuItem.active svg {
  fill: var(--theme-colour-hover);
}
@media (hover: hover) {
  div#sideMenu a.menuItem:not(.active):hover {
    background: var(--theme-bg-hover);
    color: var(--theme-colour);
  }
  div#sideMenu a.menuItem:not(.active):hover svg {
    fill: var(--theme-colour);
  }
}
div#sideMenu a.menuItem:not(.active):active {
  background: var(--theme-bg-active);
  color: var(--theme-colour-hover);
}
div#sideMenu a.menuItem:not(.active):active svg {
  fill: var(--theme-colour-hover);
}
div#sideMenu a.menuItem span.alert {
  margin-left: auto;
  background: var(--colour-red);
  color: #FFF;
  font-size: 11px;
  display: flex;
  height: 24px;
  align-content: center;
  align-items: center;
  padding: 0 10px;
  border-radius: 15px;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: -8px;
  line-height: 12px;
}
div#sideMenu a.menuItem span.alert.red {
  background: var(--colour-red);
}
div#sideMenu a.menuItem span.alert.orange {
  background: var(--colour-orange);
}
div#sideMenu a.menuItem span.alert.yellow {
  background: var(--colour-yellow);
}
div#sideMenu a.menuItem span.alert.green {
  background: var(--colour-green);
}
div#sideMenu a.menuItem span.alert.blue {
  background: var(--colour-blue);
}
div#sideMenu a.menuItem span.alert.indigo {
  background: var(--colour-indigo);
}
div#sideMenu a.menuItem span.alert.violet {
  background: var(--colour-violet);
}
div#sideMenu a.menuItem span.alert.grey {
  background: var(--colour-grey);
}
div#sideMenu a.menuItem span.alert:empty {
  display: none;
}
div#sideMenu div.item {
  margin-top: -70px;
  padding-left: 10px;
  height: 100px;
  border-bottom: 1px solid transparent;
  height: auto;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 15px;
  align-items: flex-start;
}
div#sideMenu div.item img {
  width: 60px;
  height: 60px;
}
div#sideMenu div.item div.text span.main {
  font-size: 16px;
  line-height: 19px;
}
div#sideMenu div.item div.text span.secondary {
  font-size: 14px;
  line-height: 18px;
}
div#sideMenu div.item div.text span.secondary svg {
  margin-right: 4px;
}
div#sideMenu div.item.job.wrapped, div#sideMenu div.item.job.inreview, div#sideMenu div.item.job.cancelled {
  min-height: 107px;
}
div#sideMenu div.item.job.wrapped span.status, div#sideMenu div.item.job.inreview span.status, div#sideMenu div.item.job.cancelled span.status {
  top: 70px;
  width: 60px;
  font-size: 9px;
  height: 22px;
}
div#sideMenu div.item.job.cancelled span.status {
  font-size: 8px;
}

div.bentoBox {
  display: flex;
  column-gap: calc(var(--gutter-width) / 2);
  row-gap: calc(var(--gutter-width) / 2);
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
div.bentoBox > a {
  display: flex;
  width: 1px;
  flex-grow: 1;
}
div.bentoBox div.bentoBoxItem {
  display: flex;
  height: 200px;
  width: 1px;
  flex-grow: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  row-gap: 20px;
  border-radius: 10px;
  padding: 50px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div.bentoBox div.bentoBoxItem svg {
  height: 70px;
  fill: #999;
  flex-shrink: 0;
}
div.bentoBox div.bentoBoxItem span {
  font-size: 20px;
  font-weight: 500;
  color: var(--h4-text);
  flex-shrink: 0;
}
@media (hover: hover) {
  div.bentoBox div.bentoBoxItem:hover {
    background: var(--theme-bg-hover);
  }
  div.bentoBox div.bentoBoxItem:hover span {
    color: var(--theme-colour);
  }
  div.bentoBox div.bentoBoxItem:hover svg {
    fill: var(--theme-colour);
  }
}
div.bentoBox div.bentoBoxItem:active {
  background: var(--theme-bg-active);
}
div.bentoBox div.bentoBoxItem:active span {
  color: var(--theme-colour-hover);
}
div.bentoBox div.bentoBoxItem:active svg {
  fill: var(--theme-colour-hover);
}

@container details_box (max-width: 370px) {
  div.details_sub_box {
    padding-left: unset !important;
    border: unset !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}
h4.creditsSection {
  padding-left: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

div.shareHeader {
  height: 50px;
  display: flex;
  padding: 0 15px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  column-gap: 5px;
  font-weight: 400;
  border-bottom: 1px solid var(--layout-border-colour);
}
div.shareHeader span.text {
  flex-grow: 0;
  flex-shrink: 0;
}
div.shareHeader a {
  font-weight: 600;
  color: var(--colour-grey);
  font-style: italic;
  overflow-x: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  flex-shrink: 1;
  margin-right: 10px;
}
div.shareHeader a[href] {
  color: var(--theme-text);
  font-style: normal;
}
@media (hover: hover) {
  div.shareHeader a[href]:hover {
    color: var(--theme-text-hover);
  }
}
div.shareHeader a[href]:active {
  color: var(--theme-text-active);
}
div.shareHeader a:not([href]) + span#shareHeaderCopy {
  display: none;
}
div.shareHeader span#shareHeaderSettings, div.shareHeader span#shareHeaderCopy {
  height: 34px;
  width: 34px;
  flex-grow: 0;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background: var(--input-background-colour);
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div.shareHeader span#shareHeaderSettings svg, div.shareHeader span#shareHeaderCopy svg {
  width: 50%;
  height: 50%;
  fill: #999999;
}
@media (hover: hover) {
  div.shareHeader span#shareHeaderSettings:hover, div.shareHeader span#shareHeaderCopy:hover {
    background: var(--theme-bg-hover);
  }
  div.shareHeader span#shareHeaderSettings:hover svg, div.shareHeader span#shareHeaderCopy:hover svg {
    fill: var(--theme-text-hover);
  }
}
div.shareHeader span#shareHeaderSettings:active, div.shareHeader span#shareHeaderCopy:active {
  background: var(--theme-bg-active);
}
div.shareHeader span#shareHeaderSettings:active svg, div.shareHeader span#shareHeaderCopy:active svg {
  fill: var(--theme-text-active);
}
div.shareHeader span#shareHeaderSettings span.title, div.shareHeader span#shareHeaderCopy span.title {
  display: none;
  position: absolute;
  top: 35px;
  color: #e5e5e5;
  background: rgba(51, 51, 51, 0.9);
  height: auto;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 15px;
  text-align: center;
  z-index: 1;
}

@media (max-width: 850px) {
  .hideMobile {
    display: none !important;
  }
  div#content {
    flex-direction: column;
    /*
    */
    height: 1px;
    overflow-y: scroll;
    /* CHANGE DONE */
  }
  div#content div#body {
    /*
    */
    height: fit-content;
    min-height: 100dvh;
    /* CHANGE DONE */
  }
  div#content.has_toolbar_right {
    padding: 0 !important;
  }
  div#content.has_toolbar_right div#toolbar_right_content, div#content.has_toolbar_right div#toolbar_right {
    display: none !important;
  }
  div#sideMenu {
    display: block;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--layout-border-colour);
    overflow-x: hidden;
    z-index: 2;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  }
  div#sideMenu > h1, div#sideMenu > h1.showDesktop {
    display: block;
    margin: 5px 0 10px 2px;
  }
  div#sideMenu div#mobile_menuItems_holder {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding: 0 40px 0 20px;
    overflow-x: scroll;
    display: flex;
  }
  div#sideMenu div#mobile_menuItems_holder a.menuItem {
    background: var(--input-background-colour);
    cursor: pointer;
    height: 35px;
    display: inline-flex;
    align-items: center;
    color: #999999;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    letter-spacing: 0.05em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    max-width: 100%;
    border: 1px solid var(--input-background-colour);
    flex-shrink: 0;
    cursor: pointer;
    column-gap: 6px;
  }
  div#sideMenu div#mobile_menuItems_holder a.menuItem svg {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    fill: #999;
    flex-shrink: 0;
  }
}
@media (max-width: 850px) and (hover: hover) {
  div#sideMenu div#mobile_menuItems_holder a.menuItem:hover {
    background: var(--theme-bg-hover);
    border: 1px solid var(--theme-bg-hover);
    color: var(--theme-text-hover);
  }
  div#sideMenu div#mobile_menuItems_holder a.menuItem:hover svg {
    fill: var(--theme-text-hover);
  }
}
@media (max-width: 850px) {
  div#sideMenu div#mobile_menuItems_holder a.menuItem:active {
    background: var(--theme-bg-active);
    border: 1px solid var(--theme-bg-active);
    color: var(--theme-text-active);
  }
  div#sideMenu div#mobile_menuItems_holder a.menuItem:active svg {
    fill: var(--theme-text-active);
  }
  div#sideMenu div#mobile_menuItems_holder a.menuItem.active {
    background: var(--theme-colour);
    border: 1px solid var(--theme-colour);
    color: #FFF;
  }
  div#sideMenu div#mobile_menuItems_holder a.menuItem.active svg {
    fill: #FFF;
  }
  div#sideMenu + div#body {
    overflow-y: scroll;
  }
  div#sideMenu + div#body[data-mobiletoppad="10"] {
    padding-top: 10px;
  }
  div#sideMenu + div#body[data-mobiletoppad="20"] {
    padding-top: 20px;
  }
  div#sideMenu + div#body[data-mobiletoppad="30"] {
    padding-top: 30px;
  }
  div#sideMenu + div#body[data-mobiletoppad="40"] {
    padding-top: 40px;
  }
  div#sideMenu div.item {
    margin: 0 0 10px 0;
  }
  div#sideMenu div.item.job.wrapped img, div#sideMenu div.item.job.inreview img, div#sideMenu div.item.job.cancelled img {
    margin-bottom: 15px;
  }
  div#body {
    border: 0 !important;
    width: 100% !important;
    flex-grow: 1;
    flex-shrink: 1;
    height: 1px;
    min-height: unset !important;
  }
  div#body.sidepadded {
    padding-left: 20px;
    padding-right: 20px;
  }
  div#body.callout div.profile_header_floating, div#body.person div.profile_header_floating, div#body.project div.profile_header_floating, div#body.business div.profile_header_floating {
    margin-bottom: -70px;
  }
  div#body.callout div.profile_header_floating > div.item, div#body.person div.profile_header_floating > div.item, div#body.project div.profile_header_floating > div.item, div#body.business div.profile_header_floating > div.item {
    height: 70px !important;
    align-items: center !important;
  }
  div#body.callout div.profile_header_floating > div.item > img, div#body.person div.profile_header_floating > div.item > img, div#body.project div.profile_header_floating > div.item > img, div#body.business div.profile_header_floating > div.item > img {
    width: 50px !important;
    height: 50px !important;
  }
  div#body.callout div.details_box, div#body.person div.details_box, div#body.project div.details_box, div#body.business div.details_box {
    margin: 0 0 20px 0;
    border-radius: 0;
    width: 100%;
  }
  div#body.callout div.profile_header img, div#body.person div.profile_header img, div#body.project div.profile_header img, div#body.business div.profile_header img {
    width: 100px;
  }
  div#body.callout img + div.profile_header img, div#body.person img + div.profile_header img, div#body.project img + div.profile_header img, div#body.business img + div.profile_header img {
    top: -20px;
    margin-bottom: -20px;
  }
  div#body.callout div.profile_header img {
    width: 100px;
    height: 140px;
  }
  div.recommended_by > span {
    margin-left: 20px !important;
  }
  h4.creditsSection {
    padding-left: 20px;
    margin-bottom: 5px;
  }
}
@media (min-width: 851px) {
  div#apply_buttons {
    box-shadow: none;
    width: calc(var(--column-width) * 4 + var(--gutter-width) * 4 - 2px);
    bottom: 0;
    padding: 20px;
  }
  div#content.flex_full div#body div#apply_buttons {
    width: 100%;
  }
}
/* _forms.scss */ /* _colours.scss */
form {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

span.dialog {
  background: var(--colour-highlight-blue-hover);
  padding: 15px;
  display: flex;
  color: var(--colour-dark-blue);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
span.dialog svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  fill: var(--colour-dark-blue);
  flex-shrink: 0;
}
span.dialog.red {
  background: var(--colour-highlight-red-hover);
  color: var(--colour-dark-red);
}
span.dialog.red svg {
  fill: var(--colour-dark-red);
}
span.dialog.orange {
  background: var(--colour-highlight-orange-hover);
  color: var(--colour-dark-orange);
}
span.dialog.orange svg {
  fill: var(--colour-dark-orange);
}
span.dialog.yellow {
  background: var(--colour-highlight-yellow-hover);
  color: var(--colour-dark-yellow);
}
span.dialog.yellow svg {
  fill: var(--colour-dark-yellow);
}
span.dialog.green {
  background: var(--colour-highlight-green-hover);
  color: var(--colour-dark-green);
}
span.dialog.green svg {
  fill: var(--colour-dark-green);
}
span.dialog.blue {
  background: var(--colour-highlight-blue-hover);
  color: var(--colour-dark-blue);
}
span.dialog.blue svg {
  fill: var(--colour-dark-blue);
}
span.dialog.indigo {
  background: var(--colour-highlight-indigo-hover);
  color: var(--colour-dark-indigo);
}
span.dialog.indigo svg {
  fill: var(--colour-dark-indigo);
}
span.dialog.violet {
  background: var(--colour-highlight-violet-hover);
  color: var(--colour-dark-violet);
}
span.dialog.violet svg {
  fill: var(--colour-dark-violet);
}
span.dialog.grey {
  background: var(--colour-highlight-grey-hover);
  color: var(--colour-dark-grey);
}
span.dialog.grey svg {
  fill: var(--colour-dark-grey);
}

label.checkbox {
  height: 25px;
  width: 25px;
  cursor: pointer;
  flex-shrink: 0;
}
label.checkbox input[type=checkbox] {
  width: 0;
  height: 0;
  cursor: pointer;
  position: absolute;
  opacity: 0;
}
label.checkbox span.checkbox {
  width: 25px;
  height: 25px;
  background: var(--input-background-colour);
  appearance: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
}
label.checkbox span.checkbox svg {
  width: 75%;
  height: 75%;
  fill: var(--input-background-colour);
}
@media (hover: hover) {
  label.checkbox:hover input[type=checkbox] + span.checkbox {
    background: var(--theme-bg-hover);
  }
  label.checkbox:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--theme-colour);
  }
}
label.checkbox:active input[type=checkbox] + span.checkbox {
  background: var(--theme-bg-active);
}
label.checkbox:active input[type=checkbox] + span.checkbox svg {
  fill: var(--theme-colour-hover);
}
label.checkbox input[type=checkbox]:checked + span.checkbox {
  background: var(--theme-colour);
}
label.checkbox input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--theme-colour-active);
  }
  label.checkbox:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox:active input[type=checkbox]:checked + span.checkbox {
  background: var(--theme-colour-dark-active);
}
label.checkbox:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.red:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-red-hover);
  }
  label.checkbox.red:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-red);
  }
}
label.checkbox.red:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-red-active);
}
label.checkbox.red:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-red-hover);
}
label.checkbox.red input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-red);
}
label.checkbox.red input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.red:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-red-active);
  }
  label.checkbox.red:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.red:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-red-active);
}
label.checkbox.red:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.orange:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-orange-hover);
  }
  label.checkbox.orange:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-orange);
  }
}
label.checkbox.orange:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-orange-active);
}
label.checkbox.orange:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-orange-hover);
}
label.checkbox.orange input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-orange);
}
label.checkbox.orange input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.orange:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-orange-active);
  }
  label.checkbox.orange:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.orange:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-orange-active);
}
label.checkbox.orange:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.yellow:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-yellow-hover);
  }
  label.checkbox.yellow:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-yellow);
  }
}
label.checkbox.yellow:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-yellow-active);
}
label.checkbox.yellow:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-yellow-hover);
}
label.checkbox.yellow input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-yellow);
}
label.checkbox.yellow input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.yellow:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-yellow-active);
  }
  label.checkbox.yellow:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.yellow:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-yellow-active);
}
label.checkbox.yellow:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.green:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-green-hover);
  }
  label.checkbox.green:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-green);
  }
}
label.checkbox.green:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-green-active);
}
label.checkbox.green:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-green-hover);
}
label.checkbox.green input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-green);
}
label.checkbox.green input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.green:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-green-active);
  }
  label.checkbox.green:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.green:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-green-active);
}
label.checkbox.green:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.blue:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-blue-hover);
  }
  label.checkbox.blue:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-blue);
  }
}
label.checkbox.blue:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-blue-active);
}
label.checkbox.blue:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-blue-hover);
}
label.checkbox.blue input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-blue);
}
label.checkbox.blue input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.blue:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-blue-active);
  }
  label.checkbox.blue:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.blue:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-blue-active);
}
label.checkbox.blue:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.indigo:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-indigo-hover);
  }
  label.checkbox.indigo:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-indigo);
  }
}
label.checkbox.indigo:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-indigo-active);
}
label.checkbox.indigo:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-indigo-hover);
}
label.checkbox.indigo input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-indigo);
}
label.checkbox.indigo input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.indigo:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-indigo-active);
  }
  label.checkbox.indigo:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.indigo:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-indigo-active);
}
label.checkbox.indigo:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.violet:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-violet-hover);
  }
  label.checkbox.violet:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-violet);
  }
}
label.checkbox.violet:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-violet-active);
}
label.checkbox.violet:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-violet-hover);
}
label.checkbox.violet input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-violet);
}
label.checkbox.violet input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.violet:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-violet-active);
  }
  label.checkbox.violet:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.violet:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-violet-active);
}
label.checkbox.violet:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.grey:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-grey-hover);
  }
  label.checkbox.grey:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-grey);
  }
}
label.checkbox.grey:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-grey-active);
}
label.checkbox.grey:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-grey-hover);
}
label.checkbox.grey input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-grey);
}
label.checkbox.grey input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.grey:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-grey-active);
  }
  label.checkbox.grey:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.grey:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-grey-active);
}
label.checkbox.grey:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.custom-pink:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-custom-pink-hover);
  }
  label.checkbox.custom-pink:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-custom-pink);
  }
}
label.checkbox.custom-pink:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-custom-pink-active);
}
label.checkbox.custom-pink:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-custom-pink-hover);
}
label.checkbox.custom-pink input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-custom-pink);
}
label.checkbox.custom-pink input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.custom-pink:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-custom-pink-active);
  }
  label.checkbox.custom-pink:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.custom-pink:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-custom-pink-active);
}
label.checkbox.custom-pink:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.custom-graphite:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-custom-graphite-hover);
  }
  label.checkbox.custom-graphite:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-custom-graphite);
  }
}
label.checkbox.custom-graphite:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-custom-graphite-active);
}
label.checkbox.custom-graphite:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-custom-graphite-hover);
}
label.checkbox.custom-graphite input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-custom-graphite);
}
label.checkbox.custom-graphite input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.custom-graphite:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-custom-graphite-active);
  }
  label.checkbox.custom-graphite:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.custom-graphite:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-custom-graphite-active);
}
label.checkbox.custom-graphite:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.custom-fpgreen:hover input[type=checkbox] + span.checkbox {
    background: var(--colour-highlight-custom-fpgreen-hover);
  }
  label.checkbox.custom-fpgreen:hover input[type=checkbox] + span.checkbox svg {
    fill: var(--colour-custom-fpgreen);
  }
}
label.checkbox.custom-fpgreen:active input[type=checkbox] + span.checkbox {
  background: var(--colour-highlight-custom-fpgreen-active);
}
label.checkbox.custom-fpgreen:active input[type=checkbox] + span.checkbox svg {
  fill: var(--colour-custom-fpgreen-hover);
}
label.checkbox.custom-fpgreen input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-custom-fpgreen);
}
label.checkbox.custom-fpgreen input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}
@media (hover: hover) {
  label.checkbox.custom-fpgreen:hover input[type=checkbox]:checked + span.checkbox {
    background: var(--colour-custom-fpgreen-active);
  }
  label.checkbox.custom-fpgreen:hover input[type=checkbox]:checked + span.checkbox svg {
    fill: #FFFFFF;
  }
}
label.checkbox.custom-fpgreen:active input[type=checkbox]:checked + span.checkbox {
  background: var(--colour-dark-custom-fpgreen-active);
}
label.checkbox.custom-fpgreen:active input[type=checkbox]:checked + span.checkbox svg {
  fill: #FFFFFF;
}

span.dummyInput {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  margin: 0 0 10px 0;
  height: 50px;
  opacity: 1;
  cursor: default;
  padding: 0 10px 0 20px;
  font-weight: 500;
  background-color: var(--input-background-colour);
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
span.dummyInput span {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

input {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  -webkit-appearance: none;
  margin: 0 0 10px 0;
  height: 50px;
  opacity: 1;
  cursor: text;
  padding: 0 10px 0 20px;
  font-weight: 500;
  background-color: var(--input-background-colour);
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
input::placeholder {
  color: var(--input-text-placeholder-colour);
  letter-spacing: normal !important;
}
input.code {
  padding: 0 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
  height: 60px;
  font-size: 22px;
  font-weight: 600;
}
input.code::placeholder {
  letter-spacing: 5px !important;
}
input[type=search] {
  padding: 0 10px 0 35px;
  background: url("https://images.crewlist.co/icons/search/colour/666666") no-repeat 14px 50%/14px, var(--input-background-colour);
}
input[type=email] {
  padding: 0 10px 0 35px;
  background: url("https://images.crewlist.co/icons/email/colour/808080") no-repeat 13px 50%/13px, var(--input-background-colour);
}
input[data-type=person] {
  padding: 0 10px 0 35px;
  background: url("https://images.crewlist.co/icons/people/colour/808080") no-repeat 13px 50%/13px, var(--input-background-colour);
}
input[data-type=phone] {
  padding: 0 10px 0 35px;
  background: url("https://images.crewlist.co/icons/phone/colour/808080") no-repeat 13px 50%/13px, var(--input-background-colour);
}
input[type=url], input[data-type=url] {
  padding: 0 10px 0 35px;
  background: url("https://images.crewlist.co/icons/international/colour/808080") no-repeat 13px 50%/13px, var(--input-background-colour);
}
input[type=password], input[data-type=password] {
  padding: 0 50px 0 35px;
  background: url("https://images.crewlist.co/icons/padlock/colour/808080") no-repeat 13px 50%/13px, var(--input-background-colour);
}
input[type=password] {
  letter-spacing: 2px;
}
input[type=file] {
  align-content: center;
  padding-left: 10px;
  -webkit-appearance: none;
}
input[type=file]::-webkit-file-upload-button {
  background: var(--content-background-colour);
  border: 0;
  padding: 0 10px;
  height: 30px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  color: var(--input-text-colour);
  margin-right: 10px;
}
input[type=color] {
  width: 75px;
  padding: 10px;
  cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color]::-webkit-color-swatch {
  border-radius: 10px;
  border: 0;
}
input:disabled {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
@media (hover: hover) {
  input:not(:disabled):hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
}
input.error:not(.multiInputChild) {
  border: 2px solid #CE3030 !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  font-size: 15px !important;
  color: var(--input-text-colour) !important;
  font-weight: 500 !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--input-text-colour);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px var(--input-background-colour);
}
input::-internal-input-suggested, input:-internal-autofill-previewed {
  font-size: 15px !important;
  color: var(--input-text-colour) !important;
  font-weight: 500 !important;
}
input:-webkit-autofill:hover, input:-webkit-autofill:active {
  box-shadow: inset 0 0 20px 20px var(--input-background-colour-hover);
}

span.passwordToggle, span.copyInput {
  display: inline-flex;
  width: 50px;
  height: 50px;
  position: relative;
  margin-top: -60px;
  left: calc(100% - 50px);
  margin-bottom: 10px;
  border-radius: 50%;
  cursor: pointer;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
span.passwordToggle svg, span.copyInput svg {
  width: 18px;
  height: 18px;
  fill: var(--item-tertiary-text);
}
@media (hover: hover) {
  span.passwordToggle:hover svg, span.copyInput:hover svg {
    fill: var(--theme-colour);
  }
}
span.passwordToggle.active svg, span.copyInput.active svg {
  fill: var(--theme-colour-active);
}
span.passwordToggle span.title, span.copyInput span.title {
  display: none;
  position: absolute;
  bottom: 45px;
  color: #e5e5e5;
  background: rgba(51, 51, 51, 0.9);
  height: auto;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 15px;
  text-align: center;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 10px;
  background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, #999999;
  cursor: pointer;
  margin-left: 5px;
}

@media (hover: hover) {
  input[type=search]::-webkit-search-cancel-button:hover {
    background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, var(--colour-red-hover);
  }
}
input[type=search]::-webkit-search-cancel-button:active {
  background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, var(--colour-red-active);
}

select {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  -webkit-appearance: none;
  margin: 0 0 10px 0;
  height: 50px;
  opacity: 1;
  cursor: pointer;
  padding: 0 35px 0 20px;
  font-weight: 500;
  background: url("https://images.crewlist.co/icons/down/colour/999999") no-repeat calc(100% - 17px) 50%/12px, var(--input-background-colour);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
@media (hover: hover) {
  select:hover {
    background-color: var(--input-background-colour-hover) !important;
    border: 2px var(--input-background-colour-hover) solid;
  }
}
select.error:not(.multiInputChild) {
  border: 2px solid #CE3030 !important;
}
select[data-icon=shortparagraph] {
  padding: 0 5px 0 35px;
  background: var(--input-background-colour);
  background-image: url(https://images.crewlist.co/icons/down/colour/999999), url(https://images.crewlist.co/icons/shortparagraph/colour/999999);
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, 11px 50%;
  background-size: 12px 12px, 17px 17px;
}
select[data-icon=paragraph] {
  padding: 0 5px 0 35px;
  background: var(--input-background-colour);
  background-image: url(https://images.crewlist.co/icons/down/colour/999999), url(https://images.crewlist.co/icons/paragraph/colour/999999);
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, 11px 50%;
  background-size: 12px 12px, 17px 17px;
}
select[data-icon=dropdown] {
  padding: 0 5px 0 35px;
  background: var(--input-background-colour);
  background-image: url(https://images.crewlist.co/icons/down/colour/999999), url(https://images.crewlist.co/icons/dropdown/colour/999999);
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, 11px 50%;
  background-size: 12px 12px, 17px 17px;
}
select[data-icon=cv] {
  padding: 0 5px 0 35px;
  background: var(--input-background-colour);
  background-image: url(https://images.crewlist.co/icons/down/colour/999999), url(https://images.crewlist.co/icons/cv/colour/999999);
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, 11px 50%;
  background-size: 12px 12px, 17px 17px;
}

textarea {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  -webkit-appearance: none;
  margin: 0 0 10px 0;
  opacity: 1;
  cursor: text;
  background: var(--input-background-colour);
  resize: none;
  min-height: 150px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 15px 20px;
  font-weight: 500;
}
textarea::placeholder {
  color: var(--input-text-placeholder-colour);
}
@media (hover: hover) {
  textarea:hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
}
textarea.error {
  border: 2px solid #CE3030 !important;
}
textarea.ai_input {
  background-color: var(--colour-orange-10);
  border: 2px solid var(--colour-orange-05);
  color: var(--colour-orange-hover);
  background-image: url("https://images.crewlist.co/icons/sparkle/colour/f6b441");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 15px 15px;
  padding-left: 42px;
  font-size: 17px;
  min-height: 60px;
  height: auto;
  outline-color: var(--colour-orange);
}
@media (hover: hover) {
  textarea.ai_input:hover {
    background-color: var(--colour-orange-15);
  }
}
textarea.ai_input::placeholder {
  color: var(--colour-orange-70);
}
textarea.code {
  font-family: monospace;
  tab-size: 4;
  white-space: pre;
}

div.recipient_holder {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  -webkit-appearance: none;
  margin: 0 0 10px 0;
  min-height: 50px;
  opacity: 1;
  cursor: pointer;
  padding: 0 10px 8px 35px;
  font-weight: 500;
  background: url(https://images.crewlist.co/icons/people/colour/666666) no-repeat 14px 16px/14px, var(--input-background-colour);
  display: flex;
  flex-wrap: wrap;
  max-height: 90px;
  overflow-y: hidden;
  flex-shrink: 0;
}
@media (hover: hover) {
  div.recipient_holder:not(.editable):hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
}
div.recipient_holder:empty::after {
  content: "Add recipients";
  border: 0px;
  border-radius: 0;
  font-size: 15px;
  min-width: 100px;
  color: #757575;
  -webkit-appearance: none;
  margin: 0;
  height: 30px;
  opacity: 1;
  padding: 8px 0 0 0;
  font-weight: 400;
  background: transparent;
  outline: 0 !important;
  flex-grow: 1;
  display: inline-flex;
  align-content: center;
  align-items: center;
}
div.recipient_holder div.recipient {
  display: inline-flex;
  height: 30px;
  background: #FFF;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  column-gap: 5px;
  padding: 0 12px 0 7px;
  margin: 8px 8px 0px 0px;
  border-radius: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  max-width: 100%;
}
div.recipient_holder div.recipient img {
  border-radius: 50%;
  height: 20px;
  width: 20px;
}
div.recipient_holder div.recipient span.name {
  font-size: 13px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.recipient_holder div.recipient.other {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
div.recipient_holder.editable {
  cursor: default;
  max-height: 200px;
  overflow-y: scroll;
}
div.recipient_holder.editable:empty::after {
  content: "No recipients";
}
div.recipient_holder.editable div.recipient {
  cursor: pointer;
}
@media (hover: hover) {
  div.recipient_holder.editable div.recipient:hover {
    background: var(--colour-red-hover);
  }
  div.recipient_holder.editable div.recipient:hover span.name {
    color: #FFF;
  }
}
div.recipient_holder.editable div.recipient:active {
  background: var(--colour-red-active);
  box-shadow: none;
}
div.recipient_holder.editable div.recipient:active span.name {
  color: #FFF;
}
div.recipient_holder.error {
  border: 2px solid #CE3030 !important;
}

/* The switch - the box around the slider */
label.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
  flex-shrink: 0;
}
label.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
label.switch input:checked + .slider {
  background-color: var(--theme-colour);
  box-shadow: none;
}
label.switch input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
  box-shadow: none;
}
label.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input-background-colour-hover);
  -webkit-transition: 0.1s;
  transition: 0.1s;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
}
label.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: #FFF;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
}
label.switch .slider.round {
  border-radius: 24px;
}
label.switch .slider.round:before {
  border-radius: 50%;
}
label.switch.alwayscoloured .slider {
  background-color: var(--theme-colour);
  box-shadow: none;
}
label.switch.alwayscoloured .slider:before {
  box-shadow: none;
}

span.switch {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 10px 15px 0;
  column-gap: 10px;
  cursor: pointer;
}
span.switch span.text {
  font-size: 15px;
  color: var(--input-text-colour);
  font-weight: 500;
  padding: 2px 0 10px 10px;
  width: 100%;
}

div.new_recipient_holder {
  background-color: var(--input-background-colour);
  border: 2px var(--input-background-colour) solid;
  padding: 0;
  overflow-y: scroll;
  margin-bottom: 10px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 50px;
  max-height: 200px;
}
div.new_recipient_holder.scroll_top {
  border-top: 1px solid var(--layout-border-colour);
}
div.new_recipient_holder.scroll_bottom {
  border-bottom: 1px solid var(--layout-border-colour);
}
div.new_recipient_holder div.recipient {
  display: inline-flex;
  height: 30px;
  background: #FFF;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  column-gap: 5px;
  padding: 0 12px 0 7px;
  margin: 8px 8px 0px 0px;
  border-radius: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  max-width: 100%;
}
div.new_recipient_holder div.recipient img {
  border-radius: 50%;
  height: 20px;
  width: 20px;
}
div.new_recipient_holder div.recipient span.name {
  font-size: 13px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.new_recipient_holder div.recipient.other {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
@media (hover: hover) {
  div.new_recipient_holder div.recipient:hover {
    background: #407EC9;
  }
  div.new_recipient_holder div.recipient:hover span.name {
    color: #FFF;
  }
}
div.new_recipient_holder div.recipient:active {
  background: var(--theme-colour-hover);
  box-shadow: none;
}
div.new_recipient_holder div.recipient:active span.name {
  color: #FFF;
}
div.new_recipient_holder input.search {
  outline: 0;
  background-position: 14px 50%;
  border-radius: 0;
  border: 0px;
  padding-left: 35px;
  margin: 0;
  height: 46px;
}
@media (hover: hover) {
  div.new_recipient_holder:hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
  div.new_recipient_holder:hover input.search {
    background-color: var(--input-background-colour-hover);
  }
}
div.new_recipient_holder.focus {
  outline: -webkit-focus-ring-color solid 2px;
}
div.new_recipient_holder div.recipient_search_results {
  padding: 0 5px 8px 8px;
  overflow-y: scroll;
  display: none;
}

span.post_element_error_message {
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  margin: -5px 0 15px 0;
  color: #CE3030;
  padding: 0 15px 0px 15px;
  display: none;
}

.error + span.post_element_error_message:not(:empty), .error + span.passwordToggle + span.post_element_error_message:not(:empty) {
  display: block;
}

div.tab_selector {
  column-gap: 1px;
  margin: 0 20px 20px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: space-between;
  align-items: flex-end;
  background: var(--input-background-colour-hover);
  border-radius: 20px;
}
div.tab_selector span.tab {
  height: 50;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 15px 0 15px;
  color: var(--item-secondary-text);
  cursor: pointer;
  flex-grow: 1;
  flex-shrink: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  background: var(--input-background-colour);
  width: 1px;
}
div.tab_selector span.tab:first-of-type {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
div.tab_selector span.tab:last-of-type {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
div.tab_selector span.tab svg {
  width: 18px;
  aspect-ratio: 1;
  fill: var(--item-secondary-text);
  flex-shrink: 0;
  flex-grow: 0;
}
div.tab_selector span.tab span.title {
  flex-shrink: 0;
  flex-grow: 0;
}
@media (hover: hover) {
  div.tab_selector span.tab:not(.active):hover {
    background: var(--theme-bg-hover);
    color: #407EC9;
  }
  div.tab_selector span.tab:not(.active):hover svg {
    fill: #407EC9;
  }
}
div.tab_selector span.tab:not(.active):active {
  background: var(--theme-bg-active);
  color: var(--theme-colour-hover);
}
div.tab_selector span.tab:not(.active):active svg {
  fill: var(--theme-colour-hover);
}
div.tab_selector span.tab.active {
  background: var(--theme-colour);
  color: #FFF;
}
div.tab_selector span.tab.active svg {
  fill: #FFF;
}
div.tab_selector.text_only span.tab svg {
  display: none;
}
div.tab_selector.icons_only span.tab span.title {
  display: none;
  position: absolute;
  bottom: 45px;
  color: #e5e5e5;
  background: rgba(51, 51, 51, 0.9);
  height: auto;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 15px;
  text-align: center;
}
@media (hover: hover) {
  div.tab_selector.icons_only span.tab:hover span.title {
    display: inline-block;
  }
}
div.tab_selector.secondary {
  border-bottom: 1px solid var(--layout-border-colour);
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: space-between;
  align-items: flex-end;
  background: none;
  padding: 0 20px;
  border-radius: 0;
}
div.tab_selector.secondary span.tab {
  background: none !important;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}
div.tab_selector.secondary span.tab svg {
  width: 18px;
  aspect-ratio: 1;
  fill: var(--item-secondary-text);
  flex-shrink: 0;
  flex-grow: 0;
}
div.tab_selector.secondary span.tab span.title {
  flex-shrink: 0;
  flex-grow: 0;
}
@media (hover: hover) {
  div.tab_selector.secondary span.tab:not(.active):hover {
    color: var(--theme-colour);
  }
  div.tab_selector.secondary span.tab:not(.active):hover svg {
    fill: var(--theme-colour);
  }
}
div.tab_selector.secondary span.tab:not(.active):active {
  color: var(--theme-colour-hover);
}
div.tab_selector.secondary span.tab:not(.active):active svg {
  fill: var(--theme-colour-hover);
}
div.tab_selector.secondary span.tab.active {
  color: var(--theme-colour);
  border-bottom: 3px solid var(--theme-colour);
}
div.tab_selector.secondary span.tab.active svg {
  fill: var(--theme-colour);
}
div.tab_selector.secondary.text_only:not(.loading) span.tab svg {
  display: none;
}
div.tab_selector.secondary.icons_only:not(.loading) span.tab span.title {
  display: none;
}
div.tab_selector.secondary.icons_only:not(.loading) span.tab.active {
  border-bottom: 3px solid var(--theme-colour);
}
div.tab_selector.secondary.icons_only:not(.loading) span.tab.active svg {
  fill: var(--theme-colour);
}
@media (hover: hover) {
  div.tab_selector.secondary.icons_only:not(.loading) span.tab:hover span.title {
    display: inline-block;
  }
}
div.tab_selector.secondary.loading span.tab {
  cursor: default;
}
div.tab_selector.secondary.loading span.tab svg {
  display: none;
}
div.tab_selector.secondary.loading span.tab span.title {
  border-radius: 5px;
  height: 18px;
  width: 70%;
  background: var(--loading-bg) !important;
}
div.tab_selector.secondary.loading span.tab.active span.title {
  background: rgba(64, 126, 201, 0.8) !important;
}
div.tab_selector.secondary.loading.icons_only span.title {
  width: 22px;
}

div.selector_tab_body {
  display: none;
}

div.progress_chips {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: flex-end;
  font-size: 14px;
  font-weight: bold;
  color: var(--theme-colour);
  padding: 0 10px 20px 10px;
}
div.progress_chips div.chip {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 1px;
  flex-grow: 1;
  margin: 0px -5px;
}
div.progress_chips div.chip span.text {
  visibility: hidden;
  overflow: visible;
  text-wrap: nowrap;
  padding: 0 13px 0 0;
  text-align: right;
}
div.progress_chips div.chip span.pad {
  height: 16px;
  background: var(--input-background-colour);
  border-radius: 8px;
  border: 3px solid var(--content-background-colour);
}
div.progress_chips div.chip.active span.text {
  visibility: visible;
}
div.progress_chips div.chip.active span.pad {
  background: var(--theme-colour);
}
div.progress_chips div.chip.active + div.chip.active span.text {
  visibility: hidden;
}
div.progress_chips div.chip.hide_overflow span.text {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
}
div.progress_chips div.chip.align_left span.text {
  padding: 0 0 0 13px;
  text-align: left;
}
div.progress_chips.modal_chips div.chip span.pad {
  border: 3px solid var(--modal-background);
}

div.split_button_holder {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
}
div.split_button_holder a.button {
  width: 1px;
  flex-grow: 1;
  max-width: calc(50% - 10px);
  text-align: center;
}

div.progress_section {
  display: none;
}
div.progress_section.active {
  display: block;
}
div.progress_section.active.flex {
  display: flex;
}

span.libraryAttachment {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 100%;
  color: #999;
  margin: 0 0 10px 0;
  height: 50px;
  cursor: pointer;
  padding: 0 10px 0 15px;
  font-weight: 500;
  display: inline-flex;
  background: var(--input-background-colour);
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  flex-shrink: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
@media (hover: hover) {
  span.libraryAttachment:not(.uploading):not(.disabled):hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
}
span.libraryAttachment svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  flex-grow: 0;
  fill: #CCC;
}
span.libraryAttachment input {
  display: none;
}
span.libraryAttachment img {
  width: 50px !important;
  height: 50px !important;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
span.libraryAttachment.active {
  color: var(--input-text-colour);
  padding-left: 0;
  border: 0;
  column-gap: 15px;
  box-shadow: none;
  background: var(--input-background-colour);
}
@media (hover: hover) {
  span.libraryAttachment.active:not(.disabled):hover {
    background: var(--theme-bg-hover);
    box-shadow: none;
    color: var(--theme-text-main-hover);
    border: 0;
  }
}
span.libraryAttachment.active:not(.disabled):active {
  background: var(--theme-bg-active);
  box-shadow: none;
  color: var(--theme-text-main-hover);
  border: 0;
}
span.libraryAttachment span.remove {
  width: 20px;
  height: 20px;
  display: inline-flex;
  background: var(--colour-red);
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -8px;
  top: -8px;
  cursor: pointer;
}
span.libraryAttachment span.remove svg {
  width: 15px;
  fill: #FFF;
}
@media (hover: hover) {
  span.libraryAttachment span.remove:hover {
    background: var(--colour-red-hover);
  }
}
span.libraryAttachment span.remove:active {
  background: var(--colour-red-active);
}
span.libraryAttachment.uploading, span.libraryAttachment.failed {
  color: var(--input-text-colour);
  padding-left: 0;
  border: 0;
  column-gap: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background: #FFF;
}
span.libraryAttachment.uploading span.text, span.libraryAttachment.failed span.text {
  width: 1px;
  flex-grow: 1;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}
span.libraryAttachment.uploading span.text span.name, span.libraryAttachment.failed span.text span.name {
  color: #CCC;
}
span.libraryAttachment.uploading span.text span.name::before, span.libraryAttachment.failed span.text span.name::before {
  content: "Uploading ";
  font-weight: 700;
}
span.libraryAttachment.uploading span.text span.name::after, span.libraryAttachment.failed span.text span.name::after {
  content: "";
  font-weight: 700;
}
span.libraryAttachment.uploading span.text span.error, span.libraryAttachment.failed span.text span.error {
  color: #CCC;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  width: 100%;
}
span.libraryAttachment.uploading span.text span.error span.upload_status_holder, span.libraryAttachment.failed span.text span.error span.upload_status_holder {
  height: 6px;
  width: 1px;
  flex-grow: 1;
  background: #f0f0f0;
  border-radius: 5px;
  margin-left: 5px;
  margin-top: 1px;
  overflow: hidden;
}
span.libraryAttachment.uploading span.text span.error span.upload_status_holder span.upload_bar, span.libraryAttachment.failed span.text span.error span.upload_status_holder span.upload_bar {
  height: 100%;
  width: 50%;
  background: var(--theme-colour);
  display: inline-block;
}
span.libraryAttachment.uploading span.text span.error svg.loading_spinner, span.libraryAttachment.failed span.text span.error svg.loading_spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  margin-right: 3px;
  vertical-align: top;
  top: 1px;
  flex-shrink: 0;
  flex-grow: 0;
}
span.libraryAttachment.error {
  border: 2px solid #CE3030 !important;
}
span.libraryAttachment.error img {
  width: 48px !important;
  height: 46px !important;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
span.libraryAttachment.failed span.thumb {
  background-color: var(--colour-red-hover);
}
span.libraryAttachment.failed > img {
  background-color: var(--colour-red-hover);
}
span.libraryAttachment.failed span.text span.name, span.libraryAttachment.failed span.text span.error {
  color: var(--colour-red-hover);
}
span.libraryAttachment.failed span.text span.name::after {
  content: " failed";
  font-weight: 700;
}
span.libraryAttachment.disabled {
  cursor: default;
  box-shadow: none;
}

span.fileUploadHolder {
  font-size: 15px;
  margin: 0 auto 10px auto;
  height: 50px;
  cursor: pointer;
  padding: 0 20px 0 15px;
  font-weight: 500;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  flex-shrink: 0;
  background: var(--theme-colour);
  border: 2px solid var(--theme-colour);
  color: #FFF;
  width: auto;
  max-width: 100%;
  border-radius: 10px;
}
span.fileUploadHolder svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  flex-grow: 0;
  fill: #FFF;
}
@media (hover: hover) {
  span.fileUploadHolder:hover {
    background: var(--theme-colour-hover);
    border: 2px solid var(--theme-colour-hover);
  }
}
span.fileUploadHolder:active {
  background: var(--theme-colour-active);
  border: 2px solid var(--theme-colour-active);
}

.scrollBorders.scroll_top {
  border-top: 1px solid var(--layout-border-colour);
}

.scrollBorders.scroll_bottom {
  border-bottom: 1px solid var(--layout-border-colour);
}

div.feedbackRating {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-bottom: 30px;
}
div.feedbackRating span {
  font-weight: 500;
  font-size: 14px;
  color: #999;
  margin-right: 5px;
  display: inline-block;
  min-height: 20px;
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 2px;
}
div.feedbackRating:hover svg {
  fill: #e5e5e5;
}
div.feedbackRating svg {
  width: 30px;
  height: 22px;
  fill: #e5e5e5;
  cursor: pointer;
  padding: 0 4px;
}
div.feedbackRating svg.active {
  fill: var(--colour-orange);
}
@media (hover: hover) {
  div.feedbackRating:hover svg {
    fill: #e5e5e5 !important;
  }
  div.feedbackRating:hover svg:hover, div.feedbackRating:hover svg:hover ~ svg {
    fill: var(--colour-orange) !important;
  }
  div.feedbackRating:hover svg:active, div.feedbackRating:hover svg:active ~ svg {
    fill: var(--colour-orange-hover) !important;
  }
}
div.feedbackRating svg:active, div.feedbackRating svg:active ~ svg {
  fill: var(--colour-orange-hover) !important;
}

div#invoiceLines {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: stretch;
  margin-bottom: 20px;
}
div#invoiceLines div.invoiceItem {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid var(--layout-border-colour);
  padding: 20px 15px;
  font-size: 15px;
  font-weight: normal;
  color: var(--h4-text);
}
div#invoiceLines div.invoiceItem span.description {
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
div#invoiceLines div.invoiceItem span.description span.secondary {
  font-weight: normal;
  font-size: 14px;
  color: #808080;
}
div#invoiceLines div.invoiceItem span.price {
  color: #808080;
}
div#invoiceLines div.invoiceItem span.price.refund {
  color: var(--colour-green);
  font-weight: 600;
}
div#invoiceLines div.invoiceItem.refund {
  color: var(--colour-green);
  font-weight: 600;
}
div#invoiceLines div.invoiceItem.total {
  color: var(--h4-text);
  border-top: 2px solid #e5e5e5;
}
div#invoiceLines div.invoiceItem.total span {
  font-weight: bold;
}

div.modalScrollList {
  max-height: 300px;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll;
  margin-bottom: 10px;
}
div.modalScrollList span.loadingMessage {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  color: #999;
  padding: 50px 0;
}
div.modalScrollList span.loadingMessage svg {
  width: 20px;
  height: 20px;
  fill: #CCC !important;
}

div#card-element {
  border: 2px var(--input-background-colour) solid;
  background: var(--input-background-colour);
  height: 50px;
  padding: 14px 10px 0 20px;
  border-radius: 20px;
  margin: 0 0 10px 0;
}
@media (hover: hover) {
  div#card-element:hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
}
div#card-element.StripeElement--invalid, div#card-element.error {
  border: 2px solid #CE3030 !important;
}

div#card-errors:not(:empty) {
  background: var(--colour-highlight-red-hover);
  padding: 15px;
  display: flex;
  color: var(--colour-dark-red);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

div.plansMobile {
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
  display: none;
  align-content: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 44px;
  letter-spacing: 1px;
  align-items: center;
}
div.plansMobile div.subPlan {
  color: #FFF;
  text-align: center;
  height: 45px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: transparent;
  padding-top: 4px;
  text-transform: uppercase;
  font-size: 18px;
}
div.plansMobile div.subPlan:not(.active) span {
  padding: 8px 13px 7px 13px;
  border-radius: 5px 5px 0 0;
  background: var(--colour-blue);
  box-shadow: inset 0px -22px 5px -22px var(--colour-dark-blue);
  font-size: 14.5px;
  bottom: 0;
}
div.plansMobile div.subPlan.active {
  background: var(--colour-blue-hover);
  align-items: center;
  padding: 4px 20px 0 20px;
}
div.plansMobile div.subPlan.green:not(.active) span {
  background: var(--colour-green);
  box-shadow: inset 0px -22px 5px -22px var(--colour-dark-green);
}
div.plansMobile div.subPlan.green.active {
  background: var(--colour-green-hover);
}
div.plansMobile div.subPlan.indigo:not(.active) span {
  background: var(--colour-indigo);
  box-shadow: inset 0px -22px 5px -22px var(--colour-dark-indigo);
}
div.plansMobile div.subPlan.indigo.active {
  background: var(--colour-indigo-hover);
}
div.plansMobile div.subPlan.grey:not(.active) span {
  background: var(--colour-grey);
  box-shadow: inset 0px -22px 5px -22px var(--colour-dark-grey);
}
div.plansMobile div.subPlan.grey.active {
  background: var(--colour-grey-hover);
}

div.subscriptionSelector {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  width: 100%;
  align-items: stretch;
  justify-content: space-between;
  column-gap: 20px;
  margin-top: 10px;
}
div.subscriptionSelector.annually {
  display: none;
}
div.subscriptionSelector div.subType {
  display: inline-flex;
  flex-direction: column;
  background: var(--colour-blue-05);
  flex-grow: 1;
  border-radius: 20px;
  padding-bottom: 100px;
  padding: 15px;
  overflow: hidden;
  flex-shrink: 1;
  width: 1px;
}
div.subscriptionSelector div.subType span.planname {
  margin: -15px -15px 15px -15px;
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
  display: inline-flex;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  background: var(--colour-blue-hover);
  height: 50px;
  letter-spacing: 1px;
  align-items: center;
  text-transform: uppercase;
}
div.subscriptionSelector div.subType span.price {
  font-size: 40px;
  font-weight: 700;
  color: var(--colour-dark-blue-active);
  display: inline-flex;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
}
div.subscriptionSelector div.subType span.price span.secondary {
  font-size: 30px;
  padding-top: 3px;
  color: var(--colour-dark-blue-hover);
}
div.subscriptionSelector div.subType span.permonth, div.subscriptionSelector div.subType span.billannually {
  font-size: 15px;
  font-weight: 500;
  color: var(--colour-blue);
  display: inline-flex;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 25px;
  text-align: center;
}
div.subscriptionSelector div.subType span.savings {
  color: #FFF;
  background: var(--colour-orange);
  flex-grow: 0;
  margin: 5px auto 0 auto;
  align-items: center;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 13px;
  font-weight: 700;
  display: inline-flex;
  text-shadow: 0 0 2px var(--colour-orange-hover);
  text-align: center;
}
div.subscriptionSelector div.subType span.billannually {
  color: var(--colour-light-blue);
}
div.subscriptionSelector div.subType div.planfeatures {
  padding: 30px 0 20px 0;
}
div.subscriptionSelector div.subType div.planfeatures > span {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--colour-dark-blue-active);
  column-gap: 5px;
  padding: 0 0 10px 5px;
}
div.subscriptionSelector div.subType div.planfeatures span.icon {
  background: var(--colour-green);
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}
div.subscriptionSelector div.subType div.planfeatures span.icon svg {
  width: 15px;
  height: 15px;
  fill: #FFF;
}
div.subscriptionSelector div.subType div.planfeatures span.icon.red {
  background: var(--colour-red);
}
div.subscriptionSelector div.subType div.planfeatures span.icon.indigo {
  background: var(--colour-indigo);
}
div.subscriptionSelector div.subType div.planfeatures span.icon.grey {
  background: var(--colour-grey);
}
div.subscriptionSelector div.subType a.button, div.subscriptionSelector div.subType a.button_status {
  margin-top: auto;
}
div.subscriptionSelector div.subType.emphasis {
  flex-grow: 1.2;
  position: relative;
  top: -10px;
}
div.subscriptionSelector div.subType.green {
  background: var(--colour-green-10);
}
div.subscriptionSelector div.subType.green span.planname {
  background: var(--colour-green-hover);
}
div.subscriptionSelector div.subType.green span.price {
  color: var(--colour-dark-green-active);
}
div.subscriptionSelector div.subType.green span.price span.secondary {
  color: var(--colour-dark-green-hover);
}
div.subscriptionSelector div.subType.green span.permonth {
  color: var(--colour-green);
}
div.subscriptionSelector div.subType.green span.billannually {
  color: var(--colour-light-green);
}
div.subscriptionSelector div.subType.green div.planfeatures > span {
  color: var(--colour-dark-green-active);
}
div.subscriptionSelector div.subType.indigo {
  background: var(--colour-indigo-05);
}
div.subscriptionSelector div.subType.indigo span.planname {
  background: var(--colour-indigo-hover);
}
div.subscriptionSelector div.subType.indigo span.price {
  color: var(--colour-dark-indigo-active);
}
div.subscriptionSelector div.subType.indigo span.price span.secondary {
  color: var(--colour-dark-indigo-hover);
}
div.subscriptionSelector div.subType.indigo span.permonth {
  color: var(--colour-indigo);
}
div.subscriptionSelector div.subType.indigo span.billannually {
  color: var(--colour-light-indigo);
}
div.subscriptionSelector div.subType.indigo div.planfeatures > span {
  color: var(--colour-dark-indigo-active);
}
div.subscriptionSelector div.subType.grey {
  background: var(--colour-grey-05);
}
div.subscriptionSelector div.subType.grey span.planname {
  background: var(--colour-grey-hover);
}
div.subscriptionSelector div.subType.grey span.price {
  color: var(--colour-dark-grey-active);
}
div.subscriptionSelector div.subType.grey span.price span.secondary {
  color: var(--colour-dark-grey-hover);
}
div.subscriptionSelector div.subType.grey span.permonth {
  color: var(--colour-grey);
}
div.subscriptionSelector div.subType.grey span.billannually {
  color: var(--colour-light-grey);
}
div.subscriptionSelector div.subType.grey div.planfeatures > span {
  color: var(--colour-dark-grey-active);
}

div#subCurrency {
  display: flex;
  height: 0;
  margin-bottom: -18px;
  z-index: 2;
}
div#subCurrency img {
  width: 20px;
  height: 20px;
  background: none;
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 15px;
}
div#subCurrency select {
  width: max-content;
  padding-left: 45px;
}

div#subPeriodToggle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  column-gap: 15px;
  margin: 30px 0 30px 0;
}
div#subPeriodToggle span.monthly, div#subPeriodToggle span.annually {
  font-size: 16px;
  font-weight: 500;
  color: var(--h4-text);
  width: 1px;
  flex-grow: 1;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  flex-shrink: 0;
}
div#subPeriodToggle span.monthly span.savings, div#subPeriodToggle span.annually span.savings {
  background: var(--colour-orange);
  color: #FFF;
  margin: 0 8px 0 8px;
  font-size: 10px;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 12px;
  height: 20px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  flex-shrink: 0;
  text-shadow: 0 0 2px var(--colour-orange-hover);
}
div#subPeriodToggle span.monthly {
  text-align: right;
  justify-content: flex-end;
}
div#subPeriodToggle.annually ~ div.subscriptionSelector {
  display: none;
}
div#subPeriodToggle.annually ~ div.subscriptionSelector.annually {
  display: flex;
}

div.doubleNameHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  column-gap: 10px;
}
div.doubleNameHolder input {
  width: 1px;
  flex-grow: 1;
}

div.splitInputHolder {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
}
div.splitInputHolder div.childInput {
  flex-grow: 1;
  width: 100%;
}

div.multiInputHolder {
  margin-bottom: 10px;
}
div.multiInputHolder input, div.multiInputHolder select {
  margin-bottom: 0;
}
div.multiInputHolder *:not(:last-child) {
  border-right: 0;
}
div.multiInputHolder *:not(:first-child) {
  border-left: 0;
}
div.multiInputHolder.error > select, div.multiInputHolder.error > input, div.multiInputHolder.error > span {
  border-top: 2px solid var(--colour-red);
  border-bottom: 2px solid var(--colour-red);
}
div.multiInputHolder.error > select.error, div.multiInputHolder.error > input.error, div.multiInputHolder.error > span.error {
  color: var(--colour-red);
}
div.multiInputHolder.error > select.error::placeholder, div.multiInputHolder.error > input.error::placeholder, div.multiInputHolder.error > span.error::placeholder {
  color: var(--colour-red);
  opacity: 1; /* Firefox */
}
div.multiInputHolder.error > select.error::-webkit-input-placeholder, div.multiInputHolder.error > select.error::-ms-input-placeholder, div.multiInputHolder.error > input.error::-webkit-input-placeholder, div.multiInputHolder.error > input.error::-ms-input-placeholder, div.multiInputHolder.error > span.error::-webkit-input-placeholder, div.multiInputHolder.error > span.error::-ms-input-placeholder { /* Webkit / Edge 12 -18 */
  color: var(--colour-red);
}
div.multiInputHolder.error > *:first-child {
  border-left: 2px solid var(--colour-red);
}
div.multiInputHolder.error > *:last-child {
  border-right: 2px solid var(--colour-red);
}

div.countryHolder {
  display: flex;
}
div.countryHolder img {
  width: 20px;
  height: 20px;
  background: none;
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 15px;
  flex-shrink: 0;
  flex-grow: 0;
}
div.countryHolder select {
  width: 100%;
  padding-left: 45px;
}

div.phoneHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  column-gap: 0px;
}
div.phoneHolder select {
  background-position-x: 14px;
  width: max-content;
  padding: 0 5px 0 68px;
  text-align: right;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  flex-grow: 1;
  background-image: url(https://images.crewlist.co/icons/phone/colour/999999);
}
div.phoneHolder img {
  background: none;
  width: 20px;
  height: 20px;
  object-fit: contain;
  position: absolute;
  left: 40px;
  top: 15px;
}
div.phoneHolder input {
  flex-shrink: 1;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  padding-left: 5px;
}

div.colourHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  column-gap: 0px;
}
div.colourHolder input[type=text] {
  width: 100px;
  text-align: right;
  padding: 0 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-transform: uppercase;
}
div.colourHolder input[type=color] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

span.resetInput {
  padding: 0 2px 0 0;
  width: 50px;
  background: var(--input-background-colour);
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  cursor: pointer;
}
span.resetInput svg {
  width: 18px;
  height: 18px;
  fill: var(--input-text-colour);
}
@media (hover: hover) {
  span.resetInput:hover {
    background: var(--input-background-colour-hover);
  }
}
span.resetInput:active {
  background: var(--input-background-colour-active);
}

div.rangeHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  column-gap: 0px;
}
div.rangeHolder input[type=number] {
  width: 65px;
  text-align: right;
  padding: 0 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-transform: uppercase;
}
div.rangeHolder div.rangeFrame {
  padding: 0 15px 0 10px;
  width: 110px;
  background: var(--input-background-colour);
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
div.rangeHolder div.rangeFrame:has(+ span.resetInput) {
  border-radius: 0;
  padding-right: 10px;
  width: 105px;
}
div.rangeHolder div.rangeFrame input[type=range] {
  width: 100%;
  cursor: pointer;
  padding: 0;
  height: 6px;
  background: var(--theme-bg-active);
  border-radius: 3px;
  border: none !important;
}
div.rangeHolder div.rangeFrame input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px;
  height: 15px;
  background: var(--theme-colour);
  cursor: pointer;
  border-radius: 50%;
}
div.rangeHolder div.rangeFrame input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--theme-colour);
  cursor: pointer;
  border-radius: 50%;
}
div.rangeHolder div.rangeFrame input[type=range].red {
  background: var(--colour-red-20);
}
div.rangeHolder div.rangeFrame input[type=range].red::-webkit-slider-thumb {
  background: var(--colour-red);
}
div.rangeHolder div.rangeFrame input[type=range].red::-moz-range-thumb {
  background: var(--colour-red);
}
div.rangeHolder div.rangeFrame input[type=range].orange {
  background: var(--colour-orange-20);
}
div.rangeHolder div.rangeFrame input[type=range].orange::-webkit-slider-thumb {
  background: var(--colour-orange);
}
div.rangeHolder div.rangeFrame input[type=range].orange::-moz-range-thumb {
  background: var(--colour-orange);
}
div.rangeHolder div.rangeFrame input[type=range].yellow {
  background: var(--colour-yellow-20);
}
div.rangeHolder div.rangeFrame input[type=range].yellow::-webkit-slider-thumb {
  background: var(--colour-yellow);
}
div.rangeHolder div.rangeFrame input[type=range].yellow::-moz-range-thumb {
  background: var(--colour-yellow);
}
div.rangeHolder div.rangeFrame input[type=range].green {
  background: var(--colour-green-20);
}
div.rangeHolder div.rangeFrame input[type=range].green::-webkit-slider-thumb {
  background: var(--colour-green);
}
div.rangeHolder div.rangeFrame input[type=range].green::-moz-range-thumb {
  background: var(--colour-green);
}
div.rangeHolder div.rangeFrame input[type=range].blue {
  background: var(--colour-blue-20);
}
div.rangeHolder div.rangeFrame input[type=range].blue::-webkit-slider-thumb {
  background: var(--colour-blue);
}
div.rangeHolder div.rangeFrame input[type=range].blue::-moz-range-thumb {
  background: var(--colour-blue);
}
div.rangeHolder div.rangeFrame input[type=range].indigo {
  background: var(--colour-indigo-20);
}
div.rangeHolder div.rangeFrame input[type=range].indigo::-webkit-slider-thumb {
  background: var(--colour-indigo);
}
div.rangeHolder div.rangeFrame input[type=range].indigo::-moz-range-thumb {
  background: var(--colour-indigo);
}
div.rangeHolder div.rangeFrame input[type=range].violet {
  background: var(--colour-violet-20);
}
div.rangeHolder div.rangeFrame input[type=range].violet::-webkit-slider-thumb {
  background: var(--colour-violet);
}
div.rangeHolder div.rangeFrame input[type=range].violet::-moz-range-thumb {
  background: var(--colour-violet);
}
div.rangeHolder div.rangeFrame input[type=range].grey {
  background: var(--colour-grey-20);
}
div.rangeHolder div.rangeFrame input[type=range].grey::-webkit-slider-thumb {
  background: var(--colour-grey);
}
div.rangeHolder div.rangeFrame input[type=range].grey::-moz-range-thumb {
  background: var(--colour-grey);
}
div.rangeHolder div.rangeFrame input[type=range].custom-pink {
  background: var(--colour-custom-pink-20);
}
div.rangeHolder div.rangeFrame input[type=range].custom-pink::-webkit-slider-thumb {
  background: var(--colour-custom-pink);
}
div.rangeHolder div.rangeFrame input[type=range].custom-pink::-moz-range-thumb {
  background: var(--colour-custom-pink);
}
div.rangeHolder div.rangeFrame input[type=range].custom-graphite {
  background: var(--colour-custom-graphite-20);
}
div.rangeHolder div.rangeFrame input[type=range].custom-graphite::-webkit-slider-thumb {
  background: var(--colour-custom-graphite);
}
div.rangeHolder div.rangeFrame input[type=range].custom-graphite::-moz-range-thumb {
  background: var(--colour-custom-graphite);
}
div.rangeHolder div.rangeFrame input[type=range].custom-fpgreen {
  background: var(--colour-custom-fpgreen-20);
}
div.rangeHolder div.rangeFrame input[type=range].custom-fpgreen::-webkit-slider-thumb {
  background: var(--colour-custom-fpgreen);
}
div.rangeHolder div.rangeFrame input[type=range].custom-fpgreen::-moz-range-thumb {
  background: var(--colour-custom-fpgreen);
}

div.positionHolder {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}
div.positionHolder span:not(.resetInput) {
  border: 2px var(--input-background-colour) solid;
  border-radius: 0;
  font-size: 15px;
  width: auto;
  color: var(--input-text-colour);
  -webkit-appearance: none;
  height: 50px;
  opacity: 1;
  cursor: text;
  padding: 0 5px 0 20px;
  font-weight: 500;
  background-color: var(--input-background-colour);
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  text-align: right;
}
div.positionHolder span:not(.resetInput):first-of-type {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
div.positionHolder input {
  border-radius: 0;
  text-align: left;
  padding: 0 0 0 5px;
  width: auto;
  flex-grow: 0;
}
div.positionHolder input:last-of-type {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
div.positionHolder input:has(+ span.resetInput) {
  border-radius: 0;
  padding-right: 10px;
  width: 105px;
}

div.dateHolder, div.genderHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
}
div.dateHolder select, div.genderHolder select {
  width: max-content;
  flex-grow: 1;
}

div.dateHolder select.date {
  background-position-x: 14px;
  width: max-content;
  padding: 0 10px 0 38px;
  text-align: right;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
div.dateHolder select.date.birthday {
  background-image: url(https://images.crewlist.co/icons/cake/colour/999999);
}
div.dateHolder select.month {
  border-radius: 0;
  padding-left: 10px;
  background-image: none;
}
div.dateHolder select.year {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

div.genderHolder select.gender {
  background-position-x: 14px;
  width: max-content;
  padding: 0 10px 0 38px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  flex-grow: 3;
  background-image: url(https://images.crewlist.co/icons/people/colour/999999);
}
div.genderHolder select.pronounSubject {
  border-radius: 0;
  background-position-x: 14px;
  width: max-content;
  padding: 0 10px 0 38px;
  text-align: right;
  flex-grow: 0;
  flex-shrink: 0;
}
div.genderHolder span.pronounSlash {
  font-size: 15px;
  color: var(--input-text-colour);
  -webkit-appearance: none;
  height: 50px;
  opacity: 1;
  cursor: pointer;
  padding: 0 5px 2px 5px;
  font-weight: 500;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background: var(--input-background-colour);
}
div.genderHolder select.pronounObject {
  width: fit-content;
  padding: 0 38px 0 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  flex-grow: 0;
  text-align: left;
}

div.iconTextHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  column-gap: 0px;
  margin: 0 0 10px 0;
}
div.iconTextHolder span.iconsBox {
  width: 100%;
  background-color: var(--input-background-colour);
  border-radius: 0 0 20px 20px;
  display: none;
  flex-wrap: wrap;
  padding: 5px;
}
div.iconTextHolder span.iconsBox span.iconOption {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}
div.iconTextHolder span.iconsBox span.iconOption svg {
  width: 100%;
  height: 100%;
  fill: #666;
}
div.iconTextHolder span.iconsBox span.iconOption:hover {
  background-color: var(--input-background-colour-hover);
}
div.iconTextHolder span.iconsBox span.iconOption:active {
  background-color: var(--input-background-colour-active);
}
div.iconTextHolder input, div.iconTextHolder select {
  flex-shrink: 1;
  flex-grow: 1;
  width: 50%;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  padding-left: 5px;
  margin-bottom: 0;
}
div.iconTextHolder span.icon {
  -webkit-appearance: none;
  height: 50px;
  width: 50px;
  cursor: pointer;
  background-color: var(--input-background-colour);
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 20px 0 0 20px;
  padding-left: 5px;
}
@media (hover: hover) {
  div.iconTextHolder span.icon:hover {
    background-color: var(--input-background-colour-hover);
  }
}
div.iconTextHolder span.icon:active {
  background-color: var(--input-background-colour-active);
}
div.iconTextHolder span.icon svg {
  width: 18px;
  height: 18px;
  fill: #666;
}
div.iconTextHolder span.icon.active {
  border-radius: 20px 0 0 0;
}
div.iconTextHolder span.icon.active ~ input, div.iconTextHolder span.icon.active ~ select {
  border-radius: 0 20px 0 0;
}
div.iconTextHolder span.icon.active ~ span.iconsBox {
  display: flex;
}

div.iconHolder {
  border: 2px var(--input-background-colour) solid;
  border-radius: 20px;
  font-size: 15px;
  width: 80px;
  height: 80px;
  -webkit-appearance: none;
  margin: 0 0 10px 0;
  opacity: 1;
  cursor: pointer;
  padding: 15px;
  font-weight: 500;
  background-color: var(--input-background-colour);
  flex-shrink: 0;
  overflow: hidden;
}
@media (hover: hover) {
  div.iconHolder:hover {
    background-color: var(--input-background-colour-hover);
    border: 2px var(--input-background-colour-hover) solid;
  }
}
div.iconHolder.error:not(.multiInputChild) {
  border: 2px solid #CE3030 !important;
}
div.iconHolder img {
  background: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
div.iconHolder input {
  display: none;
}

div.searchListHolder {
  margin-bottom: 10px;
  border: 2px solid var(--input-background-colour);
  background: var(--input-background-colour);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}
@media (hover: hover) {
  div.searchListHolder:hover {
    border: 2px solid var(--input-background-colour-hover);
  }
}
div.searchListHolder.waiting div.searchResults {
  display: none;
}
div.searchListHolder.error {
  border: 2px solid #CE3030 !important;
}
div.searchListHolder input {
  margin-bottom: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  height: 46px;
}
div.searchListHolder div.searchResults {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: 200px;
  overflow-y: scroll;
  background: var(--input-background-colour);
  width: 100%;
  border-top: 1px solid var(--input-background-colour-hover);
}
div.searchListHolder div.searchResults:not(:has(div.active))::before {
  content: "No results found";
  text-align: center;
  width: 100%;
  padding: 30px 0;
  color: var(--colour-grey);
  font-size: 15px;
}
div.searchListHolder div.searchResults div.result {
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  height: 48px;
  display: none;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  column-gap: 7px;
  font-weight: 500;
}
div.searchListHolder div.searchResults div.result svg {
  width: 14px;
  height: 14px;
  fill: #666;
  flex-shrink: 0;
}
div.searchListHolder div.searchResults div.result span {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.searchListHolder div.searchResults div.result span.check {
  flex-grow: 0;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--colour-green);
  border-radius: 50%;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  overflow-x: unset;
}
div.searchListHolder div.searchResults div.result span.check svg {
  width: 75%;
  height: 75%;
  fill: #FFF;
}
div.searchListHolder div.searchResults div.result.selected span.check {
  display: inline-flex;
}
@media (hover: hover) {
  div.searchListHolder div.searchResults div.result:hover {
    background: var(--input-background-colour-hover);
  }
}
div.searchListHolder div.searchResults div.result.active {
  display: flex;
}
div.searchListHolder div.selectedResult {
  font-size: 15px;
  width: 100%;
  color: var(--input-text-colour);
  height: 46px;
  display: none;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  column-gap: 7px;
  font-weight: 500;
}
div.searchListHolder div.selectedResult svg {
  width: 14px;
  height: 14px;
  fill: #666;
  flex-shrink: 0;
}
div.searchListHolder div.selectedResult span {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.searchListHolder div.selectedResult span.check {
  flex-grow: 0;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--colour-green);
  border-radius: 50%;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  overflow-x: unset;
}
div.searchListHolder div.selectedResult span.check svg {
  width: 75%;
  height: 75%;
  fill: #FFF;
}
@media (hover: hover) {
  div.searchListHolder div.selectedResult:hover {
    background: var(--input-background-colour-hover);
  }
}
div.searchListHolder div.selectedResult:active {
  background: var(--input-background-colour-active);
}
div.searchListHolder.selected:not(.multiSelect):active {
  border: 2px solid var(--input-background-colour-active);
}
div.searchListHolder.selected:not(.multiSelect) input, div.searchListHolder.selected:not(.multiSelect) div.searchResults {
  display: none;
}
div.searchListHolder.selected:not(.multiSelect) div.selectedResult {
  display: flex;
}
div.searchListHolder div.multiSelectedResults:not(:empty) {
  overflow-y: scroll;
  display: block;
  width: 100%;
}
div.searchListHolder div.multiSelectedResults:not(:empty)::before {
  content: "Selected options";
  font-size: 14px;
  color: var(--h4-text);
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 0 12px 14px;
  display: flex;
  background: var(--input-background-colour-active);
  position: sticky;
  z-index: 2;
  align-content: center;
  top: 0;
}
div.searchListHolder div.multiSelectedResults:not(:empty) div.selectedResult {
  display: flex;
}
div.searchListHolder div.multiSelectedResults:not(:empty) div.selectedResult span.check {
  display: inline-flex;
}

div.imageLibraryList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 10px;
  row-gap: 10px;
}

div.libraryImage {
  overflow: hidden;
  cursor: pointer;
  width: calc((100% - 30px) / 4);
  aspect-ratio: 1;
  border: 2px solid var(--input-background-colour);
  border-radius: 10px;
}
@media (hover: hover) {
  div.libraryImage:hover {
    border: 2px var(--theme-bg-hover) solid;
  }
}
div.libraryImage:active {
  border: 2px var(--theme-bg-active) solid;
}
div.libraryImage.active {
  border: 2px var(--theme-colour) solid;
}
@media (hover: hover) {
  div.libraryImage.active:hover {
    border: 2px var(--theme-colour-hover) solid;
  }
}
div.libraryImage.active:active {
  border: 2px var(--theme-colour-active) solid;
}
div.libraryImage span.imageDimensions {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--colour-grey);
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  padding: 5px;
  border-radius: 4px;
}
div.libraryImage span.imageDimensions.svg {
  background: var(--colour-orange);
}
div.libraryImage img {
  width: 100%;
  height: 100%;
  background: none;
}
div.libraryImage span.remove {
  width: 25px;
  height: 25px;
  display: inline-flex;
  background: var(--colour-red);
  border-radius: 50%;
  position: absolute;
  top: 6px;
  right: 6px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.libraryImage span.remove svg {
  width: 75%;
  height: 75%;
  fill: #FFF;
}
@media (hover: hover) {
  div.libraryImage span.remove:hover {
    color: var(--colour-red-hover);
  }
  div.libraryImage span.remove:hover span.remove {
    background: var(--colour-red-hover);
  }
}
div.libraryImage span.remove:active {
  color: var(--colour-red-active);
}
div.libraryImage span.remove:active span.remove {
  background: var(--colour-red-active);
}
@media (hover: hover) {
  div.libraryImage span.remove {
    display: none;
  }
  div.libraryImage:hover span.remove {
    display: inline-flex;
  }
}

span.plan {
  text-transform: uppercase;
  color: #FFF;
  background: var(--colour-blue);
  padding: 0 7px;
  font-size: 12px;
  margin: 0 2px;
  height: 22px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  vertical-align: text-top;
  border-radius: 11px;
  font-weight: 700;
}
span.plan.green {
  background: var(--colour-green);
}
span.plan.indigo {
  background: var(--colour-indigo);
}
span.plan.grey {
  background: var(--colour-grey);
}

div.modal h4 span.savings {
  color: var(--colour-green);
  font-weight: 700;
}
div.modal h4 span.plan {
  padding: 0 8px;
  font-size: 11px;
  margin: 0 2px;
  height: 22px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  border-radius: 11px;
  font-weight: 700;
}

div.settingsRow {
  display: flex;
  border-top: 1px solid var(--layout-border-colour);
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 20px;
  padding: 20px 15px 30px 15px;
  color: var(--h4-text);
}
div.settingsRow div.settingsRowColumn {
  width: 1px;
  flex-grow: 1;
}
div.settingsRow div.settingsRowColumn:last-of-type {
  text-align: right;
}
div.settingsRow div.settingsRowColumn > span, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status) {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 5px;
}
div.settingsRow div.settingsRowColumn > span img.paymentMethod, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status) img.paymentMethod {
  background: #ffffff;
  height: 28px;
  vertical-align: middle;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-right: 8px;
}
div.settingsRow div.settingsRowColumn > span.loading, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).loading {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 20px;
  width: 200px;
}
div.settingsRow div.settingsRowColumn > span.main, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).main {
  font-weight: 600;
}
div.settingsRow div.settingsRowColumn > span.tertiary, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).tertiary {
  font-size: 14px;
  color: var(--h4-text);
  column-gap: 5px;
}
div.settingsRow div.settingsRowColumn > span.tertiary svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).tertiary svg {
  width: 14px;
  height: 14px;
  fill: #CCC;
}
div.settingsRow div.settingsRowColumn > span.action_text, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text {
  display: flex;
  font-weight: 600;
  color: var(--theme-text);
  cursor: pointer;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div.settingsRow div.settingsRowColumn > span.action_text svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text svg {
  width: 12px;
  height: 12px;
  fill: var(--theme-text);
  margin-left: 2px;
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text:not(.button_status):hover {
    color: var(--theme-text-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text:not(.button_status):hover svg {
    fill: var(--theme-text-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text:not(.button_status):active {
  color: var(--theme-text-active);
}
div.settingsRow div.settingsRowColumn > span.action_text:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text:not(.button_status):active svg {
  fill: var(--theme-text-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.red, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.red {
  color: var(--colour-red);
}
div.settingsRow div.settingsRowColumn > span.action_text.red svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.red svg {
  fill: var(--colour-red);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.red:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.red:not(.button_status):hover {
    color: var(--colour-red-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.red:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.red:not(.button_status):hover svg {
    fill: var(--colour-red-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.red:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.red:not(.button_status):active {
  color: var(--colour-red-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.red:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.red:not(.button_status):active svg {
  fill: var(--colour-red-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.orange, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.orange {
  color: var(--colour-orange);
}
div.settingsRow div.settingsRowColumn > span.action_text.orange svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.orange svg {
  fill: var(--colour-orange);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.orange:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.orange:not(.button_status):hover {
    color: var(--colour-orange-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.orange:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.orange:not(.button_status):hover svg {
    fill: var(--colour-orange-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.orange:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.orange:not(.button_status):active {
  color: var(--colour-orange-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.orange:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.orange:not(.button_status):active svg {
  fill: var(--colour-orange-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.yellow, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.yellow {
  color: var(--colour-yellow);
}
div.settingsRow div.settingsRowColumn > span.action_text.yellow svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.yellow svg {
  fill: var(--colour-yellow);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.yellow:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.yellow:not(.button_status):hover {
    color: var(--colour-yellow-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.yellow:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.yellow:not(.button_status):hover svg {
    fill: var(--colour-yellow-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.yellow:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.yellow:not(.button_status):active {
  color: var(--colour-yellow-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.yellow:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.yellow:not(.button_status):active svg {
  fill: var(--colour-yellow-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.green, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.green {
  color: var(--colour-green);
}
div.settingsRow div.settingsRowColumn > span.action_text.green svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.green svg {
  fill: var(--colour-green);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.green:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.green:not(.button_status):hover {
    color: var(--colour-green-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.green:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.green:not(.button_status):hover svg {
    fill: var(--colour-green-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.green:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.green:not(.button_status):active {
  color: var(--colour-green-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.green:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.green:not(.button_status):active svg {
  fill: var(--colour-green-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.blue, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.blue {
  color: var(--colour-blue);
}
div.settingsRow div.settingsRowColumn > span.action_text.blue svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.blue svg {
  fill: var(--colour-blue);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.blue:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.blue:not(.button_status):hover {
    color: var(--colour-blue-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.blue:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.blue:not(.button_status):hover svg {
    fill: var(--colour-blue-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.blue:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.blue:not(.button_status):active {
  color: var(--colour-blue-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.blue:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.blue:not(.button_status):active svg {
  fill: var(--colour-blue-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.indigo, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.indigo {
  color: var(--colour-indigo);
}
div.settingsRow div.settingsRowColumn > span.action_text.indigo svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.indigo svg {
  fill: var(--colour-indigo);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.indigo:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.indigo:not(.button_status):hover {
    color: var(--colour-indigo-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.indigo:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.indigo:not(.button_status):hover svg {
    fill: var(--colour-indigo-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.indigo:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.indigo:not(.button_status):active {
  color: var(--colour-indigo-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.indigo:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.indigo:not(.button_status):active svg {
  fill: var(--colour-indigo-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.violet, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.violet {
  color: var(--colour-violet);
}
div.settingsRow div.settingsRowColumn > span.action_text.violet svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.violet svg {
  fill: var(--colour-violet);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.violet:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.violet:not(.button_status):hover {
    color: var(--colour-violet-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.violet:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.violet:not(.button_status):hover svg {
    fill: var(--colour-violet-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.violet:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.violet:not(.button_status):active {
  color: var(--colour-violet-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.violet:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.violet:not(.button_status):active svg {
  fill: var(--colour-violet-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.grey, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.grey {
  color: var(--colour-grey);
}
div.settingsRow div.settingsRowColumn > span.action_text.grey svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.grey svg {
  fill: var(--colour-grey);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.grey:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.grey:not(.button_status):hover {
    color: var(--colour-grey-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.grey:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.grey:not(.button_status):hover svg {
    fill: var(--colour-grey-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.grey:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.grey:not(.button_status):active {
  color: var(--colour-grey-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.grey:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.grey:not(.button_status):active svg {
  fill: var(--colour-grey-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-pink, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-pink {
  color: var(--colour-custom-pink);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-pink svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-pink svg {
  fill: var(--colour-custom-pink);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.custom-pink:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-pink:not(.button_status):hover {
    color: var(--colour-custom-pink-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.custom-pink:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-pink:not(.button_status):hover svg {
    fill: var(--colour-custom-pink-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-pink:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-pink:not(.button_status):active {
  color: var(--colour-custom-pink-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-pink:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-pink:not(.button_status):active svg {
  fill: var(--colour-custom-pink-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-graphite, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-graphite {
  color: var(--colour-custom-graphite);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-graphite svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-graphite svg {
  fill: var(--colour-custom-graphite);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.custom-graphite:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-graphite:not(.button_status):hover {
    color: var(--colour-custom-graphite-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.custom-graphite:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-graphite:not(.button_status):hover svg {
    fill: var(--colour-custom-graphite-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-graphite:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-graphite:not(.button_status):active {
  color: var(--colour-custom-graphite-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-graphite:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-graphite:not(.button_status):active svg {
  fill: var(--colour-custom-graphite-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-fpgreen, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-fpgreen {
  color: var(--colour-custom-fpgreen);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-fpgreen svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-fpgreen svg {
  fill: var(--colour-custom-fpgreen);
}
@media (hover: hover) {
  div.settingsRow div.settingsRowColumn > span.action_text.custom-fpgreen:not(.button_status):hover, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-fpgreen:not(.button_status):hover {
    color: var(--colour-custom-fpgreen-hover);
  }
  div.settingsRow div.settingsRowColumn > span.action_text.custom-fpgreen:not(.button_status):hover svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-fpgreen:not(.button_status):hover svg {
    fill: var(--colour-custom-fpgreen-hover);
  }
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-fpgreen:not(.button_status):active, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-fpgreen:not(.button_status):active {
  color: var(--colour-custom-fpgreen-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.custom-fpgreen:not(.button_status):active svg, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.custom-fpgreen:not(.button_status):active svg {
  fill: var(--colour-custom-fpgreen-active);
}
div.settingsRow div.settingsRowColumn > span.action_text.button_status, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.button_status {
  display: none;
  column-gap: 3px;
  cursor: default;
}
div.settingsRow div.settingsRowColumn > span.action_text.button_status svg.loading_spinner, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text.button_status svg.loading_spinner {
  width: 14px;
  height: 14px;
}
div.settingsRow div.settingsRowColumn > span.action_text[data-status=processing], div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text[data-status=processing] {
  display: none;
}
div.settingsRow div.settingsRowColumn > span.action_text[data-status=processing] + span.button_status, div.settingsRow div.settingsRowColumn > a:not(.button, .button_status).action_text[data-status=processing] + span.button_status {
  display: inline-flex;
}
div.settingsRow div.settingsRowColumn div.colourRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
}
div.settingsRow div.settingsRowColumn div.colourRow span.name {
  font-weight: 600;
}
div.settingsRow div.settingsRowColumn div.colourRow span.title {
  margin-bottom: 10px;
  width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  font-weight: 600;
}
div.settingsRow div.settingsRowColumn div.colourRow input {
  flex-shrink: unset;
}

div.loadingScreensHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
  column-gap: 20px;
  width: 100%;
  margin-left: auto;
}
div.loadingScreensHolder div.loadingScreen {
  width: 1px;
  aspect-ratio: 0.5625;
  border: var(--layout-border-colour) 1px solid;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
div.loadingScreensHolder div.loadingScreen img {
  width: 25%;
  aspect-ratio: 1;
  background: none;
  border: 0px;
}
div.loadingScreensHolder div.loadingScreen span {
  width: 100%;
  position: absolute;
  bottom: -30px;
  text-align: center;
  height: 20px;
}
div.loadingScreensHolder div.loadingScreen span.input, div.loadingScreensHolder div.loadingScreen span.button {
  position: unset;
  width: 70%;
  background: #ededed;
  border-radius: 5px;
  margin-bottom: 3%;
  aspect-ratio: 6;
  height: unset;
}
div.loadingScreensHolder div.loadingScreen span.input.red, div.loadingScreensHolder div.loadingScreen span.button.red {
  background: var(--colour-red);
}
div.loadingScreensHolder div.loadingScreen span.input.orange, div.loadingScreensHolder div.loadingScreen span.button.orange {
  background: var(--colour-orange);
}
div.loadingScreensHolder div.loadingScreen span.input.yellow, div.loadingScreensHolder div.loadingScreen span.button.yellow {
  background: var(--colour-yellow);
}
div.loadingScreensHolder div.loadingScreen span.input.green, div.loadingScreensHolder div.loadingScreen span.button.green {
  background: var(--colour-green);
}
div.loadingScreensHolder div.loadingScreen span.input.blue, div.loadingScreensHolder div.loadingScreen span.button.blue {
  background: var(--colour-blue);
}
div.loadingScreensHolder div.loadingScreen span.input.indigo, div.loadingScreensHolder div.loadingScreen span.button.indigo {
  background: var(--colour-indigo);
}
div.loadingScreensHolder div.loadingScreen span.input.violet, div.loadingScreensHolder div.loadingScreen span.button.violet {
  background: var(--colour-violet);
}
div.loadingScreensHolder div.loadingScreen span.input.grey, div.loadingScreensHolder div.loadingScreen span.button.grey {
  background: var(--colour-grey);
}
div.loadingScreensHolder div.loadingScreen.loginScreen img {
  margin-bottom: 3%;
  background: none;
  aspect-ratio: 3.3;
  width: 70%;
  object-fit: contain;
}
div.loadingScreensHolder div.loadingScreen.loginScreen img.square {
  aspect-ratio: 1;
  width: 35%;
}

div.alertsHolder {
  margin-bottom: 10px;
}
div.alertsHolder div.alertItem {
  display: flex;
  min-height: 30px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  column-gap: 5px;
  padding: 5px 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div.alertsHolder div.alertItem span.remove {
  width: 20px;
  height: 20px;
  background: var(--colour-red);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
div.alertsHolder div.alertItem span.remove svg {
  width: 75%;
  height: 75%;
  fill: #FFF;
}
@media (hover: hover) {
  div.alertsHolder div.alertItem:hover {
    color: var(--colour-red-hover);
  }
  div.alertsHolder div.alertItem:hover span.remove {
    background: var(--colour-red-hover);
  }
}
div.alertsHolder div.alertItem:active {
  color: var(--colour-red-active);
}
div.alertsHolder div.alertItem:active span.remove {
  background: var(--colour-red-active);
}

div.alert {
  width: 100%;
  background: var(--colour-grey-10);
  padding: 20px;
  margin-bottom: 20px;
  color: var(--h4-text);
  border-radius: 10px;
  display: inline-flex;
  column-gap: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
div.alert svg {
  width: 16px;
  height: 16px;
  fill: var(--h4-text);
  flex-shrink: 0;
}

div.project_types_holder {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

div.project_type {
  padding: 15px 0 5px 0;
  cursor: grab;
  background: var(--modal-background);
  border: 1px solid var(--layout-border-colour);
  border-radius: 10px;
}
div.project_type div.item {
  background: var(--modal-background);
  padding-right: 10px;
  cursor: grab;
}
div.project_type div.item div.tools {
  align-items: center;
}
div.project_type div.item div.tools span.edit {
  width: 35px;
  height: 35px;
  background: var(--input-background-colour);
  border-radius: 10px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 3px -10px 0 5px;
}
@media (hover: hover) {
  div.project_type div.item div.tools span.edit:hover {
    background: var(--input-background-colour-hover);
  }
}
div.project_type div.item div.tools span.edit:active {
  background: var(--input-background-colour-active);
}
div.project_type div.item div.tools span.edit svg {
  width: 18px;
  height: 18px;
  fill: var(--input-text-colour);
}

span#project_header {
  margin: 0 0 10px 15px;
  color: #999;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  column-gap: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}
span#project_header span.visible_toggle {
  width: 30px;
  height: 30px;
  display: block;
  background: var(--input-background-colour);
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  cursor: pointer;
  text-align: center;
  transform: none;
}
span#project_header span.visible_toggle svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  fill: #999999;
  margin-top: 9px;
}
@media (hover: hover) {
  span#project_header:hover {
    color: var(--theme-colour);
  }
  span#project_header:hover span.visible_toggle {
    background: var(--theme-bg-hover);
  }
  span#project_header:hover span.visible_toggle svg {
    fill: var(--theme-text);
  }
}
span#project_header:active {
  color: var(--theme-colour-hover);
}
span#project_header:active span.visible_toggle {
  background: var(--theme-bg-active);
}
span#project_header:active span.visible_toggle svg {
  fill: var(--theme-text-hover);
}
span#project_header span.hidden_project_type {
  background: var(--colour-orange);
  color: #FFF;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  padding: 5 10px;
  border-radius: 30px;
  margin-left: 0;
  display: none;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 5px;
}
span#project_header span.hidden_project_type svg {
  fill: #FFF;
  aspect-ratio: 1;
  height: 13px;
}
span#project_header.hide_section span.visible_toggle {
  transform: rotate(-90deg);
}
span#project_header.hide_section span.hidden_project_type {
  display: inline-flex;
}
span#project_header.hide_section + div.projects_container {
  display: none;
}

div.projects_container_list div.emptyWarning {
  background: var(--colour-highlight-yellow-hover);
  height: 120px;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  border-radius: 5px;
  padding: 0 20px;
  margin: 5px 15px 0 15px;
}
div.projects_container_list div.emptyWarning svg {
  aspect-ratio: 1;
  width: 18px;
  fill: var(--colour-dark-yellow);
}
div.projects_container_list div.emptyWarning span {
  font-size: 15px;
  color: var(--colour-dark-yellow);
  font-weight: 500;
  padding-right: 14px;
  text-wrap: balance;
}
div.projects_container_list:not(:has(div.item.project)) div.emptyWarning {
  display: flex;
}

div.jobElementHolder div.emptyWarning {
  background: var(--colour-highlight-yellow-hover);
  height: 120px;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  border-radius: 5px;
  padding: 0 20px;
}
div.jobElementHolder div.emptyWarning svg {
  aspect-ratio: 1;
  width: 18px;
  fill: var(--colour-dark-yellow);
}
div.jobElementHolder div.emptyWarning span {
  font-size: 15px;
  color: var(--colour-dark-yellow);
  font-weight: 500;
  padding-right: 14px;
  text-wrap: balance;
}
div.jobElementHolder:not(:has(div.jobElement)) div.emptyWarning {
  display: flex;
}
div.jobElementHolder div.jobElement {
  height: auto;
  min-height: 60px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 15px 20px;
  column-gap: 15px;
  border-bottom: 1px solid var(--item-border);
}
div.jobElementHolder div.jobElement > svg {
  height: 20px;
  width: 20px;
  fill: #d4d4d4;
  flex-grow: 0;
  flex-shrink: 0;
}
div.jobElementHolder div.jobElement div.text {
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}
div.jobElementHolder div.jobElement div.text span.main {
  color: var(--item-primary-text);
  font-weight: 700;
  font-size: 15px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  width: 100%;
  line-height: 20px;
}
div.jobElementHolder div.jobElement div.text span.secondary {
  color: var(--item-secondary-text);
  font-weight: 500;
  font-size: 14px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  width: 100%;
  line-height: 20px;
}
div.jobElementHolder div.jobElement span.remove {
  background: var(--colour-red);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.jobElementHolder div.jobElement span.remove svg {
  fill: #FFF;
  width: 75%;
  height: 75%;
}
@media (hover: hover) {
  div.jobElementHolder div.jobElement span.remove:hover {
    background: var(--colour-red-hover);
  }
}
div.jobElementHolder div.jobElement span.remove:active {
  background: var(--colour-red-active);
}
div.jobElementHolder#questionsHolder div.jobElement {
  cursor: grab;
  background: var(--modal-background);
}
div.jobElementHolder#questionsHolder div.jobElement div.text span.main, div.jobElementHolder#questionsHolder div.jobElement div.text span.secondary {
  white-space: unset;
  overflow-x: visible;
}
div.jobElementHolder#questionsHolder div.jobElement span.edit {
  width: 35px;
  height: 35px;
  background: var(--input-background-colour);
  border-radius: 10px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media (hover: hover) {
  div.jobElementHolder#questionsHolder div.jobElement span.edit:hover {
    background: var(--input-background-colour-hover);
  }
}
div.jobElementHolder#questionsHolder div.jobElement span.edit:active {
  background: var(--input-background-colour-active);
}
div.jobElementHolder#questionsHolder div.jobElement span.edit svg {
  width: 18px;
  height: 18px;
  fill: var(--input-text-colour);
}
div.jobElementHolder#questionsHolder div.jobElement.required div.text::after {
  content: "Requires Answer";
  background: var(--colour-orange);
  color: #FFF;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  padding: 5 10px;
  border-radius: 30px;
  margin-top: 2px;
  margin-left: -4px;
}
div.jobElementHolder.ui-sortable div.jobElement {
  cursor: grab;
  background: var(--modal-background);
}

div#selectOptions {
  display: none;
}
div#selectOptions div.optionsHolder div.option {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  column-gap: 10px;
  background: var(--modal-background);
  padding: 0 0 0 5px;
}
div#selectOptions div.optionsHolder div.option > svg.drag {
  fill: #D4D4D4;
  width: 20px;
  height: 20px;
  cursor: grab;
}
@media (hover: hover) {
  div#selectOptions div.optionsHolder div.option > svg.drag:hover {
    fill: #999;
  }
}
div#selectOptions div.optionsHolder div.option input {
  flex-shrink: 1;
  margin-bottom: 0;
}
div#selectOptions div.optionsHolder div.option span.remove {
  background: var(--colour-red);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  flex-grow: 0;
}
div#selectOptions div.optionsHolder div.option span.remove svg {
  fill: #FFF;
  width: 75%;
  height: 75%;
}
@media (hover: hover) {
  div#selectOptions div.optionsHolder div.option span.remove:hover {
    background: var(--colour-red-hover);
  }
}
div#selectOptions div.optionsHolder div.option span.remove:active {
  background: var(--colour-red-active);
}

div#imageUploadPanel.uploading div#uploadZone, div#imageUploadPanel.uploading div#uploadComplete:not(.showDuringProgress) {
  display: none;
}
div#imageUploadPanel.uploading div#uploadProgress, div#imageUploadPanel.uploading div#uploadComplete.showDuringProgress {
  display: block;
}
div#imageUploadPanel.uploaded div#uploadZone, div#imageUploadPanel.uploaded div#uploadProgress {
  display: none;
}
div#imageUploadPanel.uploaded div#uploadComplete {
  display: block;
}
div#imageUploadPanel div#uploadZone, div#imageUploadPanel div#uploadProgress {
  width: 100%;
  border: 5px dashed var(--input-background-colour);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 50px 50px;
  row-gap: 10px;
  height: auto;
  cursor: pointer;
  aspect-ratio: 2.2;
  margin-bottom: 10px;
}
div#imageUploadPanel div#uploadZone input[type=file], div#imageUploadPanel div#uploadProgress input[type=file] {
  display: none;
}
div#imageUploadPanel div#uploadZone div.buttonHolder, div#imageUploadPanel div#uploadProgress div.buttonHolder {
  fill: var(--input-text-colour);
  text-align: center;
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: auto;
}
div#imageUploadPanel div#uploadZone div.buttonHolder > svg, div#imageUploadPanel div#uploadProgress div.buttonHolder > svg {
  fill: var(--input-background-colour-hover);
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
  pointer-events: none;
}
div#imageUploadPanel div#uploadZone div.buttonHolder span, div#imageUploadPanel div#uploadProgress div.buttonHolder span {
  width: 100%;
  height: auto;
  margin: 0;
  color: var(--input-text-colour);
  font-size: 15px;
  font-weight: 500;
  pointer-events: none;
}
div#imageUploadPanel div#uploadZone div.buttonHolder a.button#upload, div#imageUploadPanel div#uploadProgress div.buttonHolder a.button#upload {
  margin-right: 20px;
}
div#imageUploadPanel div#uploadZone div.buttonHolder.dragovergood, div#imageUploadPanel div#uploadZone div.buttonHolder.dragoverbad, div#imageUploadPanel div#uploadProgress div.buttonHolder.dragovergood, div#imageUploadPanel div#uploadProgress div.buttonHolder.dragoverbad {
  display: none;
  pointer-events: none;
}
@media (hover: hover) {
  div#imageUploadPanel div#uploadZone:not(.dragovergood):not(.dragoverbad):hover, div#imageUploadPanel div#uploadProgress:not(.dragovergood):not(.dragoverbad):hover {
    border: 5px dashed var(--input-background-colour-hover);
  }
  div#imageUploadPanel div#uploadZone:not(.dragovergood):not(.dragoverbad):hover > svg, div#imageUploadPanel div#uploadProgress:not(.dragovergood):not(.dragoverbad):hover > svg {
    fill: var(--input-background-colour-active);
  }
}
div#imageUploadPanel div#uploadZone:not(.dragovergood):not(.dragoverbad):active, div#imageUploadPanel div#uploadProgress:not(.dragovergood):not(.dragoverbad):active {
  border: 5px dashed var(--input-background-colour-active);
}
div#imageUploadPanel div#uploadZone:not(.dragovergood):not(.dragoverbad):active > svg, div#imageUploadPanel div#uploadProgress:not(.dragovergood):not(.dragoverbad):active > svg {
  fill: var(--input-background-colour-active);
}
div#imageUploadPanel div#uploadZone.dragovergood, div#imageUploadPanel div#uploadProgress.dragovergood {
  border-color: var(--colour-green-50);
}
div#imageUploadPanel div#uploadZone.dragovergood div.buttonHolder.default, div#imageUploadPanel div#uploadProgress.dragovergood div.buttonHolder.default {
  display: none;
}
div#imageUploadPanel div#uploadZone.dragovergood div.buttonHolder.dragovergood, div#imageUploadPanel div#uploadProgress.dragovergood div.buttonHolder.dragovergood {
  display: flex;
}
div#imageUploadPanel div#uploadZone.dragovergood div.buttonHolder.dragovergood > svg, div#imageUploadPanel div#uploadProgress.dragovergood div.buttonHolder.dragovergood > svg {
  fill: var(--colour-green-70);
}
div#imageUploadPanel div#uploadZone.dragovergood div.buttonHolder.dragovergood span, div#imageUploadPanel div#uploadProgress.dragovergood div.buttonHolder.dragovergood span {
  margin-bottom: 0;
  color: var(--colour-green);
}
div#imageUploadPanel div#uploadZone.dragoverbad, div#imageUploadPanel div#uploadProgress.dragoverbad {
  border-color: var(--colour-red-50);
}
div#imageUploadPanel div#uploadZone.dragoverbad div.buttonHolder.default, div#imageUploadPanel div#uploadProgress.dragoverbad div.buttonHolder.default {
  display: none;
}
div#imageUploadPanel div#uploadZone.dragoverbad div.buttonHolder.dragoverbad, div#imageUploadPanel div#uploadProgress.dragoverbad div.buttonHolder.dragoverbad {
  display: flex;
}
div#imageUploadPanel div#uploadZone.dragoverbad div.buttonHolder.dragoverbad > svg, div#imageUploadPanel div#uploadProgress.dragoverbad div.buttonHolder.dragoverbad > svg {
  fill: var(--colour-red-70);
}
div#imageUploadPanel div#uploadZone.dragoverbad div.buttonHolder.dragoverbad span, div#imageUploadPanel div#uploadProgress.dragoverbad div.buttonHolder.dragoverbad span {
  margin-bottom: 0;
  color: var(--colour-red);
}
div#imageUploadPanel div#uploadProgress {
  display: none;
  border: 5px transparent solid !important;
  cursor: wait !important;
}
div#imageUploadPanel div#uploadComplete {
  display: none;
}
div#imageUploadPanel div#uploadComplete div#imageFrame {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2.2;
  background: #808080;
  object-fit: contain;
  object-position: center;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  container-type: inline-size;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div.thumbOverlay {
  height: 100%;
  background: transparent;
  aspect-ratio: 1;
  position: absolute;
  z-index: 2;
  box-sizing: content-box;
  box-shadow: rgba(100, 100, 100, 0.8) 0px 0px 0px 10000px;
  cursor: move;
  display: none;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div#imageBounds {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: column;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div#imageBounds img {
  object-fit: cover;
  background: transparent;
  cursor: move;
  flex-grow: 1;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div#imageBounds.fitWidth img {
  width: 100%;
  object-fit: contain;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div#imageBounds.fitWidth img.portrait {
  object-fit: cover;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div#imageBounds.fitHeight img {
  height: 100%;
  object-fit: contain;
}
div#imageUploadPanel div#uploadComplete div#imageFrame div#imageBounds.fitHeight img.landscape {
  object-fit: cover;
}
div#imageUploadPanel div#uploadComplete div#imageFrame.thumbEdit div.thumbOverlay {
  display: block;
}
div#imageUploadPanel div#uploadComplete div#imageFrame.thumbEdit div.thumbOverlay.profile {
  width: 100%;
  height: unset;
  border-radius: 50%;
}
div#imageUploadPanel div#uploadComplete div#imageFrame.thumbEdit img {
  pointer-events: none;
}
div#imageUploadPanel div#uploadComplete div#imageFrame.thumbEdit + div#imageButtonsFrame div.control {
  display: none;
}
div#imageUploadPanel div#uploadComplete div#imageFrame.thumbEdit + div#imageButtonsFrame div.imageButtons {
  display: none;
}
div#imageUploadPanel div#uploadComplete div#imageFrame.thumbEdit + div#imageButtonsFrame div.imageButtons.thumbnailButtons {
  display: flex;
}
div#imageUploadPanel div#uploadComplete div#imageControls {
  display: flex;
  column-gap: 20px;
  container-type: inline-size;
  flex-wrap: wrap;
  /*
  @container (max-width: 800px) {
  	div.control {

  		&:last-of-type {
  			width: 100%;	
  		}

  		&.half {
  			flex-grow: 0.75;	
  		}
  	}
  }

  @container (max-width: 600px) {
  	div.control {

  		&:last-of-type {
  			width: 100%;	
  		}

  		&.half {
  			flex-grow: 0.5;	
  		}
  	}
  }
  */
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control {
  display: flex;
  column-gap: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  width: 10px;
  flex-grow: 1;
  margin-bottom: 10px;
  min-width: 40%;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control.half {
  flex-grow: 0.5;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control h4 {
  height: auto;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control select {
  margin-bottom: 0;
  max-width: 200px;
  margin-left: auto;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder {
  margin-bottom: 0;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.rangeFrame {
  flex-grow: 1;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.dropperHolder {
  width: 40px;
  background: var(--input-background-colour);
  height: 50px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  flex-shrink: 0;
  padding: 10px 0 10px 10px;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.dropperHolder span {
  background: var(--input-background-colour);
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  border-radius: 15px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.dropperHolder span svg {
  width: 18px;
  height: 18px;
  fill: var(--input-text-colour);
}
@media (hover: hover) {
  div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.dropperHolder span:hover {
    background: var(--input-background-colour-hover);
  }
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.dropperHolder span:active {
  background: var(--input-background-colour-active);
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.dropperHolder + input[type=text] {
  border-radius: 0;
}
div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder input[type=color] {
  flex-grow: 1;
}
@container (max-width: 700px) {
  div#imageUploadPanel div#uploadComplete div#imageControls div.control {
    width: 100%;
  }
  div#imageUploadPanel div#uploadComplete div#imageControls div.control select {
    width: auto;
    margin-left: auto;
  }
  div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.rangeFrame {
    flex-grow: 0.5;
  }
  div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder input[type=color] {
    flex-grow: 0;
  }
  div#imageUploadPanel div#uploadComplete div#imageControls div.control div.multiInputHolder div.positionHolder input {
    width: auto;
    flex-grow: 0;
  }
}
div#imageUploadPanel div#uploadComplete div.imageButtons {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
  margin-bottom: 40px;
}
div#imageUploadPanel div#uploadComplete div.imageButtons a {
  width: 1px;
  flex-grow: 1;
  padding: 0 5px;
}
div#imageUploadPanel div#uploadComplete div.imageButtons.thumbnailButtons {
  display: none;
}

div.audienceSelector {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: stretch;
  min-height: 200px;
  column-gap: 20px;
  width: 100%;
}
div.audienceSelector div.audience {
  min-height: 200px;
  width: 1px;
  flex-grow: 1;
  border-radius: 20px;
  border: 2px solid var(--input-background-colour);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;
  cursor: pointer;
}
div.audienceSelector div.audience.active {
  border: 2px solid var(--colour-green-80);
  background: var(--colour-green-05);
}
@media (hover: hover) {
  div.audienceSelector div.audience:not(.active):hover {
    border: 2px solid var(--colour-green-80);
    background: var(--colour-green-05);
  }
}
div.audienceSelector div.audience:not(.active):active {
  border: 2px solid var(--colour-green-hover);
  background: var(--colour-green-10);
}
div.audienceSelector div.audience.orange.active {
  border: 2px solid var(--colour-orange-80);
  background: var(--colour-orange-05);
}
@media (hover: hover) {
  div.audienceSelector div.audience.orange:not(.active):hover {
    border: 2px solid var(--colour-orange-80);
    background: var(--colour-orange-05);
  }
}
div.audienceSelector div.audience.orange:not(.active):active {
  border: 2px solid var(--colour-orange-hover);
  background: var(--colour-orange-10);
}
div.audienceSelector div.audience.indigo.active {
  border: 2px solid var(--colour-indigo-80);
  background: var(--colour-indigo-05);
}
@media (hover: hover) {
  div.audienceSelector div.audience.indigo:not(.active):hover {
    border: 2px solid var(--colour-indigo-80);
    background: var(--colour-indigo-05);
  }
}
div.audienceSelector div.audience.indigo:not(.active):active {
  border: 2px solid var(--colour-indigo-hover);
  background: var(--colour-indigo-10);
}
div.audienceSelector div.audience span.audienceName {
  width: 100%;
  text-align: center;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  font-weight: 700;
  font-size: 18px;
  font-weight: 600;
  color: var(--input-text-colour);
  padding: 25px 0 5px 0;
}
div.audienceSelector div.audience span.price {
  font-size: 40px;
  font-weight: 700;
  color: var(--input-text-colour);
  display: inline-flex;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
}
div.audienceSelector div.audience span.price span.secondary {
  font-size: 30px;
  padding-top: 3px;
}
div.audienceSelector div.audience span.permonth {
  font-size: 15px;
  font-weight: 500;
  color: var(--input-text-colour);
  display: inline-flex;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 25px;
  text-align: center;
}
div.audienceSelector div.audience div.planfeatures {
  padding: 25px 10px 10px 10px;
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.text {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  color: #808080;
  padding: 0 0 6px 5px;
  display: block;
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.feature {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--input-text-colour);
  column-gap: 5px;
  padding: 0 0 10px 5px;
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.feature span.icon {
  background: var(--colour-green);
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.feature span.icon svg {
  width: 15px;
  height: 15px;
  fill: #FFF;
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.feature span.icon.red {
  background: var(--colour-red);
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.feature span.icon.indigo {
  background: var(--colour-indigo);
}
div.audienceSelector div.audience div.planfeatures div.featureBatch span.feature span.icon.grey {
  background: var(--colour-grey);
}
div.audienceSelector div.audience div.planfeatures div.featureBatch + div.featureBatch {
  margin-top: 20px;
}
@container (max-width: 600px) {
  div.audienceSelector {
    flex-direction: column;
    row-gap: 20px;
  }
  div.audienceSelector div.audience {
    width: 100%;
  }
  div.audienceSelector div.audience span.permonth:empty {
    display: none;
  }
  div.audienceSelector div.audience div.planfeatures {
    padding: 25px 15px 10px 15px;
    display: flex;
  }
  div.audienceSelector div.audience div.planfeatures div.featureBatch {
    width: 1px;
    flex-grow: 1;
    margin-top: 0 !important;
  }
}

div.loginFramesHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: stretch;
  column-gap: var(--gutter-width);
}
div.loginFramesHolder div.loginFrame {
  width: 1px;
  flex-grow: 1;
}
div.loginFramesHolder div.loginFrame h4:first-child {
  margin-top: 0;
}
div.loginFramesHolder div.orSplit {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
div.loginFramesHolder div.orSplit hr {
  height: 100%;
  width: 1px;
}
div.loginFramesHolder div.orSplit span {
  position: absolute;
  top: 48px;
  padding: 10px;
  background: var(--modal-background);
  color: var(--whitebutton-text-colour-active);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
}

div.bentoBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 20px;
  width: 100%;
  margin-bottom: 10px;
}
div.bentoBox div.bento {
  width: 1px;
  flex-grow: 1;
  border-radius: 20px;
  border: 2px solid var(--input-background-colour);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}
div.bentoBox div.bento.clickable {
  cursor: pointer;
}
@media (hover: hover) {
  div.bentoBox div.bento.clickable:hover {
    border: 2px solid var(--input-background-colour-hover);
    background: var(--colour-grey-05);
  }
}
div.bentoBox div.bento.clickable:active {
  border: 2px solid var(--input-background-colour-active);
  background: var(--colour-grey-10);
}
div.bentoBox div.bento > svg {
  fill: #CCC;
  width: 50px;
  height: 50px;
  flex-grow: 0;
  flex-shrink: 0;
}
div.bentoBox div.bento div.text span.title {
  width: 100%;
  text-align: center;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  font-weight: 700;
  font-size: 18px;
  font-weight: 600;
  color: var(--item-primary-text);
  padding: 15px 0 5px 0;
}
div.bentoBox div.bento div.text span.subtitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: var(--item-secondary-text);
  display: inline-flex;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  height: auto;
  text-align: center;
  text-wrap: balance;
}
@container (max-width: 600px) {
  div.bentoBox {
    flex-direction: column;
    row-gap: 20px;
  }
  div.bentoBox div.bento {
    width: 100%;
    flex-direction: row;
    column-gap: 20px;
  }
  div.bentoBox div.bento > svg {
    width: 30px;
    height: 30px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  div.bentoBox div.bento div.text {
    width: 1px;
    flex-grow: 1;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }
  div.bentoBox div.bento div.text span.title, div.bentoBox div.bento div.text span.subtitle {
    padding: 0;
    width: auto;
  }
  div.bentoBox.stackMobile {
    row-gap: 0;
  }
  div.bentoBox.stackMobile div.bento {
    border-radius: 0;
    border-bottom: 2px transparent solid;
  }
  div.bentoBox.stackMobile div.bento:first-of-type, div.bentoBox.stackMobile div.bento.first {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  div.bentoBox.stackMobile div.bento:last-of-type, div.bentoBox.stackMobile div.bento.last {
    border-bottom: 2px solid var(--input-background-colour);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  @media (hover: hover) {
    div.bentoBox.stackMobile div.bento:last-of-type.clickable:hover, div.bentoBox.stackMobile div.bento.last.clickable:hover {
      border: 2px solid var(--input-background-colour-hover);
    }
  }
  div.bentoBox.stackMobile div.bento:last-of-type.clickable:active, div.bentoBox.stackMobile div.bento.last.clickable:active {
    border: 2px solid var(--input-background-colour-active);
  }
  @media (hover: hover) {
    div.bentoBox.stackMobile div.bento.clickable:hover + div.bento {
      border-top: 2px transparent solid;
    }
  }
}

div.progressMap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 35px 24px;
}
div.progressMap div.progressStage {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 10px;
  padding-bottom: 20px;
  border-left: 4px solid var(--input-background-colour-active);
  margin-bottom: 15px;
  width: 100%;
}
div.progressMap div.progressStage div.progressStageContents {
  position: relative;
  top: -17px;
  left: -17px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 10px;
  width: 100%;
}
div.progressMap div.progressStage span.ring {
  width: 30px;
  height: 30px;
  border: 4px solid var(--input-background-colour-active);
  border-radius: 50%;
  display: flex;
  background: var(--content-background-colour);
  flex-shrink: 0;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}
div.progressMap div.progressStage span.ring svg {
  fill: #FFF;
  width: 22px;
  height: 22px;
  display: none;
  flex-shrink: 0;
}
div.progressMap div.progressStage div.text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  row-gap: 5px;
  width: 100%;
}
div.progressMap div.progressStage div.tools {
  padding-top: 10px;
  width: 100%;
}
div.progressMap div.progressStage span.primary {
  color: #666;
  font-weight: 600;
  font-size: 18px;
}
div.progressMap div.progressStage span.secondary {
  color: #999;
  font-size: 16px;
}
div.progressMap div.progressStage:last-of-type {
  border-left: 4px solid transparent;
}
div.progressMap div.progressStage.active:not(:last-of-type) {
  border-left: 4px solid var(--colour-green);
}
div.progressMap div.progressStage.active span.primary {
  color: var(--colour-green-hover);
}
div.progressMap div.progressStage.active span.secondary {
  color: var(--colour-green);
}
div.progressMap div.progressStage.active span.ring {
  border: 4px solid var(--colour-green);
  background: var(--colour-green);
}
div.progressMap div.progressStage.active span.ring svg {
  display: block;
}
div.progressMap div.progressStage.pending span.ring {
  border: 4px solid var(--colour-green);
}
div.progressMap div.progressStage.pending span.primary {
  color: #333;
}
div.progressMap div.progressStage.pending span.secondary {
  color: #666;
}

div#tabsHolder div.tab, div#routingHolder div.tab, div#sortingHolder div.tab, div#showHolder div.tab {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background: var(--input-background-colour);
  border-radius: 10px;
  height: 50px;
  margin-bottom: 5px;
  padding: 0 7px 0 18px;
  column-gap: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: grab;
}
div#tabsHolder div.tab:active, div#routingHolder div.tab:active, div#sortingHolder div.tab:active, div#showHolder div.tab:active {
  cursor: grabbing;
}
div#tabsHolder div.tab > svg, div#routingHolder div.tab > svg, div#sortingHolder div.tab > svg, div#showHolder div.tab > svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: #808080;
}
div#tabsHolder div.tab span.primary, div#routingHolder div.tab span.primary, div#sortingHolder div.tab span.primary, div#showHolder div.tab span.primary {
  flex-grow: 1;
  text-align: left;
  font-weight: 500;
  font-size: 16px;
  color: var(--input-text-colour);
}
div#tabsHolder div.tab span.edit, div#routingHolder div.tab span.edit, div#sortingHolder div.tab span.edit, div#showHolder div.tab span.edit {
  width: 35px;
  height: 35px;
  background: var(--input-background-colour);
  border-radius: 10px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media (hover: hover) {
  div#tabsHolder div.tab span.edit:hover, div#routingHolder div.tab span.edit:hover, div#sortingHolder div.tab span.edit:hover, div#showHolder div.tab span.edit:hover {
    background: var(--input-background-colour-hover);
  }
}
div#tabsHolder div.tab span.edit:active, div#routingHolder div.tab span.edit:active, div#sortingHolder div.tab span.edit:active, div#showHolder div.tab span.edit:active {
  background: var(--input-background-colour-active);
}
div#tabsHolder div.tab span.edit svg, div#routingHolder div.tab span.edit svg, div#sortingHolder div.tab span.edit svg, div#showHolder div.tab span.edit svg {
  width: 18px;
  height: 18px;
  fill: var(--input-text-colour);
}

@media (max-width: 850px) {
  div.loginFramesHolder {
    flex-direction: column;
    row-gap: var(--gutter-width);
  }
  div.loginFramesHolder div.loginFrame {
    width: 100%;
    flex-grow: 1;
  }
  div.loginFramesHolder div.orSplit hr {
    height: 1px;
    width: 100%;
  }
  div.loginFramesHolder div.orSplit span {
    top: -10px;
  }
  div.modal div.jobElementHolder {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
  div.alertsHolder div.alertItem {
    justify-content: flex-start;
    column-gap: 10px;
  }
  div#invoiceLines div.invoiceItem {
    padding: 20px 30px;
  }
  div.modalScrollList {
    max-height: unset;
  }
  div.plansMobile:not(.noMobile) {
    display: flex;
    width: calc(100% - 10px);
    justify-content: center;
    column-gap: 10px;
    margin-left: 5px;
  }
  div.subscriptionSelector {
    margin-top: 0;
    column-gap: 10px;
  }
  div.subscriptionSelector div.subType {
    top: 0 !important;
    flex-grow: 1;
  }
  div.subscriptionSelector div.subType.blue {
    background: var(--colour-blue-10);
  }
  div.subscriptionSelector div.subType.indigo {
    background: var(--colour-indigo-10);
  }
  div.subscriptionSelector div.subType.grey {
    background: var(--colour-grey-10);
  }
  div.subscriptionSelector:not(.noMobile) div.subType {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top: 4px solid var(--colour-blue-hover);
    flex-grow: 1;
    position: relative;
    display: none;
  }
  div.subscriptionSelector:not(.noMobile) div.subType.green {
    border-top: 4px solid var(--colour-green-hover);
  }
  div.subscriptionSelector:not(.noMobile) div.subType.indigo {
    border-top: 4px solid var(--colour-indigo-hover);
  }
  div.subscriptionSelector:not(.noMobile) div.subType.grey {
    border-top: 4px solid var(--colour-grey-hover);
  }
  div.subscriptionSelector:not(.noMobile) div.subType span.planname {
    display: none;
  }
  div.subscriptionSelector:not(.noMobile):not(.blue):not(.indigo):not(.grey) div.subType.green, div.subscriptionSelector:not(.noMobile).blue div.subType.blue, div.subscriptionSelector:not(.noMobile).indigo div.subType.indigo, div.subscriptionSelector:not(.noMobile).grey div.subType.grey {
    display: inline-flex;
  }
  div#subCurrency {
    height: auto;
    margin-bottom: -20px;
    justify-content: center;
  }
  div#subCurrency img {
    position: relative;
    margin-right: -35px;
    left: 0;
    margin-left: 10px;
  }
  div.settingsRow {
    padding: 20px 10px 30px 10px;
  }
  div.settingsRow div.settingsRowColumn {
    width: 100%;
  }
  div.settingsRow div.settingsRowColumn:last-of-type {
    margin-top: 10px;
    text-align: left;
  }
  div.settingsRow div.settingsRowColumn:last-of-type span.action_text, div.settingsRow div.settingsRowColumn:last-of-type a.action_text {
    justify-content: flex-start;
  }
  div.imageLibraryList {
    padding: 5px 10px 10px 10px;
  }
  div.libraryImage {
    width: calc((100% - 20px) / 3);
  }
  div.libraryImage span.imageDimensions {
    font-size: 11px;
  }
  div#uploadZone div.buttonHolder a.button, div#uploadProgress div.buttonHolder a.button {
    width: 100%;
  }
  div#uploadZone div.buttonHolder a.button#upload, div#uploadProgress div.buttonHolder a.button#upload {
    margin: 0 100% 20px 100%;
  }
  div.progressMap div.progressStage div.tools a.button {
    width: 100%;
  }
  div.tab_selector:not(.loading) span.tab span.title {
    display: none;
    position: absolute;
    bottom: 45px;
    color: #e5e5e5;
    background: rgba(51, 51, 51, 0.9);
    height: auto;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 15px;
    text-align: center;
  }
}
@media (max-width: 850px) and (hover: hover) {
  div.tab_selector:not(.loading) span.tab:hover span.title {
    display: inline-block;
  }
}
@media (max-width: 850px) {
  div.tab_selector.secondary {
    padding: 0;
  }
  div.tab_selector.secondary:not(.loading) span.tab span.title {
    display: none;
  }
  div.tab_selector.secondary:not(.loading) span.tab.active {
    border-bottom: 3px solid var(--theme-colour);
  }
  div.tab_selector.secondary:not(.loading) span.tab.active svg {
    fill: var(--theme-colour);
  }
}
@media (max-width: 850px) and (hover: hover) {
  div.tab_selector.secondary:not(.loading) span.tab:hover span.title {
    display: inline-block;
  }
}
@media (max-width: 850px) {
  div.tab_selector.secondary.loading span.title {
    width: 22px !important;
  }
  div.splitInputHolder.mobileVertical {
    flex-direction: column;
  }
}
/* _search.scss */
div#search_panel {
  min-width: 300px;
  padding: 40px calc(var(--gutter-width) / 2);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow-y: scroll;
  /*
  */
  height: calc(100dvh - 61px);
  /* CHANGE DONE */
}
div#search_panel hr:last-of-type {
  display: none;
}
div#search_panel > h1 {
  display: none;
}
div#search_panel > h1.showDesktop {
  display: block;
  margin: 0 0 10px 15px;
}

a.toolbar_button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
}
a.toolbar_button span.hover_title {
  color: #e5e5e5;
  background: rgba(51, 51, 51, 0.9);
  height: 35px;
  border-radius: 10px;
  display: none;
  right: 45;
  position: absolute;
  top: 2.5px;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 15px;
  text-wrap: nowrap;
  z-index: 3;
}
a.toolbar_button svg {
  width: 20px;
  height: 20px;
  display: block;
  top: 10px;
  left: 10px;
  fill: #999;
}
@media (hover: hover) {
  a.toolbar_button:hover {
    background: var(--theme-bg-hover);
  }
  a.toolbar_button:hover span.hover_title {
    display: inline-block;
  }
  a.toolbar_button:hover svg {
    fill: var(--theme-colour);
  }
}
a.toolbar_button:active {
  background: var(--theme-bg-active);
}
a.toolbar_button:active svg {
  fill: var(--theme-colour-hover);
}
a.toolbar_button.active {
  background: var(--theme-colour);
}
a.toolbar_button.active svg {
  fill: #FFF;
}
@media (hover: hover) {
  a.toolbar_button.active:hover {
    background: var(--theme-colour-hover);
  }
}
a.toolbar_button.active:active {
  background: var(--theme-colour-active);
}

a.toolbar_button.float_bottom {
  margin-top: auto;
}
a.toolbar_button.float_bottom + a.toolbar_button.float_bottom {
  margin-top: 0;
}

div.search_body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: center;
  justify-content: flex-start;
  min-height: 100% !important;
}
div.search_body div#search_toolbar {
  flex-grow: 0;
  flex-shrink: 0;
  height: 61px;
  background: var(--content-background-colour);
  border-bottom: 1px solid var(--layout-border-colour);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  padding: 0px 10px 0px 25px;
  column-gap: 15px;
  overflow-x: scroll;
}
div.search_body div#search_toolbar a.search_toolbar_button {
  height: 45px;
  font-size: 15px;
  font-weight: 500;
  padding: 12.5px 10px 0 10px;
  color: #999;
  cursor: pointer;
  flex-grow: 0;
  flex-shrink: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div.search_body div#search_toolbar a.search_toolbar_button svg {
  width: 14px;
  height: 14px;
  vertical-align: top;
  margin: 2.5px 0px 0px 6px;
  fill: #999;
}
@media (hover: hover) {
  div.search_body div#search_toolbar a.search_toolbar_button:hover {
    color: var(--theme-colour);
  }
  div.search_body div#search_toolbar a.search_toolbar_button:hover svg {
    fill: var(--theme-colour);
  }
}
div.search_body div#search_toolbar a.search_toolbar_button:active {
  color: var(--theme-colour-hover);
}
div.search_body div#search_toolbar a.search_toolbar_button:active svg {
  fill: var(--theme-colour-hover);
}
div.search_body div#search_toolbar.inactive a.search_toolbar_button {
  opacity: 0.25;
  pointer-events: none;
}
div.search_body div#search_results {
  flex-grow: 1;
  background: var(--content-background-colour);
  overflow-y: scroll;
  height: 1px;
  padding-bottom: 80px;
}
div.search_body div#search_results span.search_more {
  width: 100%;
  display: inline-flex;
  height: 80px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-text);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}
@media (hover: hover) {
  div.search_body div#search_results span.search_more:hover {
    color: var(--theme-text-hover);
    background: var(--theme-bg-hover);
  }
}
div.search_body div#search_results span.search_more:active {
  color: var(--theme-text-active);
  background: var(--theme-bg-active);
}
@media (min-width: 851px) {
  div.search_body div#search_results.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 15px;
  }
  div.search_body div#search_results.gallery > a, div.search_body div#search_results.gallery > div.loading {
    width: 40%;
    flex-grow: 1;
    display: inline-flex;
    max-width: 50%;
  }
  div.search_body div#search_results.gallery > a div.item {
    max-width: 100%;
  }
  div.search_body div#search_results.gallery div.item {
    align-items: stretch;
    border-bottom: 1px solid transparent;
    flex-direction: column;
    padding: 15px;
    flex-grow: 1;
    border-radius: 10px;
  }
  div.search_body div#search_results.gallery div.item.job > img {
    /*
    width: 100%;
    height: 150px;
    object-fit: cover;	
    */
    width: 100%;
    min-height: 150px;
    object-fit: cover;
    aspect-ratio: 2.2;
    height: auto;
  }
  div.search_body div#search_results.gallery div.item.job > img.gallery {
    display: block;
  }
  div.search_body div#search_results.gallery div.item.job > img.gallery + img {
    display: none;
  }
  div.search_body div#search_results.gallery div.item.job > span.status {
    /*
    width: calc(100% - 30px);
    top: 140px;
    height: 25px;
    font-size: 11px;
    */
    height: 25px;
    font-size: 11px;
    position: relative;
    top: -25px;
    width: 100%;
    margin-bottom: -25px;
  }
  div.search_body div#search_results.gallery div.item.job > div.text {
    width: 100%;
    padding: 10px 5px 0 5px;
    justify-content: flex-start;
  }
  div.search_body div#search_results.gallery span.search_more {
    width: calc(100% + 30px);
    margin-left: -15px;
    flex-grow: 1;
    flex-shrink: 0;
  }
}
@media (min-width: 2880px) {
  div.search_body div#search_results.gallery > a, div.search_body div#search_results.gallery > div.loading {
    width: 30%;
    max-width: 33.33%;
  }
}
div.search_body div.schedule_row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  border-bottom: 1px solid var(--layout-border-colour);
}
div.search_body div.schedule_row div.schedule_main {
  width: 350px;
  border-right: 1px solid var(--layout-border-colour);
}
div.search_body div.schedule_row div.schedule_main div.item {
  border-bottom: 1px solid transparent;
}
div.search_body div.schedule_row div.schedule_days {
  display: flex;
  width: 1px;
  flex-grow: 1;
}
div.search_body div.schedule_row div.schedule_days div.day {
  width: 1px;
  flex-grow: 1;
  border-right: 1px solid var(--layout-border-colour);
}
div.search_body div.schedule_row div.schedule_days div.day:last-of-type {
  border-right: none;
}

span.search_message {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-top: 15vh;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

span.search_title {
  text-transform: uppercase;
  font-weight: 700;
  color: #999;
  font-size: 14px;
  padding: 15px 15px 10px 25px;
  display: block;
  flex-grow: 1;
}

span.title_add {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: flex-start;
}
span.title_add.show_hide {
  cursor: pointer;
}
@media (hover: hover) {
  span.title_add.show_hide:hover span.search_title {
    color: var(--theme-colour);
  }
}
span.title_add.show_hide:active span.search_title {
  color: var(--theme-colour-hover);
}

span.add_filter, span.show_filter {
  width: 30px;
  height: 30px;
  display: block;
  background: var(--input-background-colour);
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 8px 10px 0 0;
  cursor: pointer;
  text-align: center;
}

span.add_filter svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: #999999;
  margin-top: 7px;
}

span.show_filter {
  transform: none;
}
span.show_filter svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  fill: #999999;
  margin-top: 9px;
}
@media (max-width: 850px) {
  span.show_filter {
    display: none !important;
  }
}

span#list_view, span#gallery_view {
  width: 30px;
  height: 30px;
  background: var(--input-background-colour);
  border-radius: 0;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 8px 10px 0 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
span#list_view svg, span#gallery_view svg {
  width: 12px;
  height: 12px;
  fill: #999999;
}

span#list_view {
  margin-right: 0;
  border-radius: 10px 0 0 10px;
}

span#gallery_view {
  border-radius: 0 10px 10px 0;
}

@media (max-width: 850px) {
  span#list_view, span#gallery_view {
    display: none;
  }
}
@media (hover: hover) {
  span.add_filter:hover, span.show_filter:hover, span.title_add.show_hide:hover span.show_filter, span#list_view:hover, span#gallery_view:hover {
    background: var(--theme-bg-hover);
  }
}

@media (hover: hover) {
  span.add_filter:hover svg, span.show_filter:hover svg, span.title_add.show_hide:hover span.show_filter svg, span#list_view:hover svg, span#gallery_view:hover svg {
    fill: var(--theme-text);
  }
}

span.add_filter:active, span.show_filter:active, span.title_add.show_hide:active span.show_filter, span#list_view:active, span#gallery_view:active {
  background: var(--theme-bg-active);
}

span.add_filter:active svg, span.show_filter:active svg, span.title_add.show_hide:active span.show_filter svg, span#list_view:active svg, span#gallery_view:active svg {
  fill: var(--theme-text-hover);
}

span#list_view.active, span#gallery_view.active {
  background: var(--theme-colour);
  color: #FFF;
  cursor: default;
}
span#list_view.active svg, span#gallery_view.active svg {
  fill: #FFF;
}

div.filter_holder {
  min-height: 5px;
  padding: 0 5px 5px 15px;
}
div.filter_holder span.more {
  display: table;
  width: auto;
  text-transform: uppercase;
  font-weight: 700;
  color: #B3B3B3;
  font-size: 12px;
  padding: 8px 14px;
  text-align: center;
  justify-content: center;
  height: 30px;
  margin-top: 10px;
  margin: 10px auto 0 auto;
  border-radius: 15px;
}
div.filter_holder span.filter {
  background: var(--filter-background);
  cursor: pointer;
  height: 30px;
  display: inline-flex;
  align-items: center;
  color: var(--filter-text-colour);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  margin: 0 5px 5px 0;
  letter-spacing: 0.05em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  max-width: 100%;
  border: 1px solid var(--filter-border-colour);
}
div.filter_holder span.filter svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: top;
  margin: 0 4px 0 0;
  fill: #999;
  flex-shrink: 0;
}
@media (hover: hover) {
  div.filter_holder span.filter:not(.no_hover, .active):hover {
    background: var(--theme-bg-hover);
    border: 1px solid var(--theme-bg-hover);
    color: var(--theme-text);
  }
  div.filter_holder span.filter:not(.no_hover, .active):hover svg {
    fill: var(--theme-text);
  }
}
div.filter_holder span.filter:not(.no_hover, .active):active {
  background: var(--theme-bg-active);
  border: 1px solid var(--theme-bg-active);
  color: var(--theme-text-hover);
}
div.filter_holder span.filter:not(.no_hover, .active):active svg {
  fill: var(--theme-text-hover);
}
div.filter_holder span.filter.active {
  background: var(--theme-text);
  padding: 8px 15px;
  color: #FFF !important;
  border: 0px !important;
}
div.filter_holder span.filter.active svg {
  fill: #FFF !important;
}
div.filter_holder span.filter.active:active {
  background: var(--theme-text-hover);
}
@media (hover: hover) {
  div.filter_holder span.filter.active:not(.just_active):hover {
    background: #B92B2B;
  }
}
div.filter_holder span.filter.active:not(.just_active):active {
  background: #A52626;
}
div.filter_holder span.filter.active.skill_advanced::after, div.filter_holder span.filter.active.skill_full::after {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.filter_holder span.filter.skill_basic::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Basic";
  background: #36B835;
}
div.filter_holder span.filter.skill_learner::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Learner";
  background: #36B835;
}
div.filter_holder span.filter.skill_intermediate::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Intermediate";
  background: #F6B340;
}
div.filter_holder span.filter.skill_restricted::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Restricted";
  background: #F6B340;
}
div.filter_holder span.filter.skill_advanced::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Advanced";
  background: var(--colour-blue);
}
div.filter_holder span.filter.skill_full::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Full";
  background: var(--colour-blue);
}
div.filter_holder span.filter.department::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Department";
  background: #666666;
}
div.filter_holder span.filter.region::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Region";
  background: #999999;
}
div.filter_holder span.filter.country::after {
  content: "Basic";
  background: #36B835;
  color: #FFF !important;
  font-size: 9px;
  font-weight: 700;
  padding: 0px 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 -8px 0 4px;
  content: "Country";
  background: #666666;
}
div.filter_holder div.recent_filters:empty {
  display: none;
}
div.filter_holder div.recent_filters::before {
  content: "Recently Used";
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 10px 0 5px 10px;
  color: #CCC;
}
div.filter_holder div.recent_filters span.filter span.remove_filter {
  display: inline-block;
  background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, #999999;
  height: 16px;
  width: 16px;
  margin: 0 -8px 0 8px;
  border-radius: 8px;
  cursor: pointer;
}
@media (hover: hover) {
  div.filter_holder div.recent_filters span.filter span.remove_filter:hover {
    background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, #B92B2B;
  }
}
div.filter_holder div.recent_filters span.filter span.remove_filter:active {
  background: url("https://images.crewlist.co/icons/closenocircle/colour/FFFFFF") no-repeat 50% 50%/75%, #A52626;
}
div.filter_holder div.recent_filters span.filter[class*=skill_] span.remove_filter {
  order: 1;
  margin-left: 14px;
}

span.title_add.hide_filters + div.filter_holder > span.filter:not(.active) {
  display: none;
}

span.title_add.hide_filters span.show_filter {
  transform: rotate(90deg);
}

div.clear_filter_holder {
  text-align: center;
  margin-top: 10px;
  display: none;
}
div.clear_filter_holder span {
  background: var(--filter-background);
  cursor: pointer;
  height: 30px;
  display: inline-block;
  color: #dc6f6f;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 20px;
  text-transform: uppercase;
  margin: 0 auto;
  letter-spacing: 0.05em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  max-width: 100%;
}
div.clear_filter_holder span svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: top;
  margin: 1px 4px 0 0;
  fill: #dc6f6f;
}
@media (hover: hover) {
  div.clear_filter_holder span:hover {
    background: #B92B2B;
    color: #FFF;
  }
  div.clear_filter_holder span:hover svg {
    fill: #FFF;
  }
}
div.clear_filter_holder span:active {
  background: #A52626;
  color: #FFF;
}
div.clear_filter_holder span:active svg {
  fill: #FFF;
}

div#mobile_filters_holder {
  display: none;
}

@media (max-width: 850px) {
  div.search_body div#search_toolbar {
    z-index: 2;
    box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.1);
    margin-top: -10px;
    padding-left: 20px;
  }
  div#search_panel {
    display: block;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--layout-border-colour);
    overflow-x: hidden;
    z-index: 2;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
    /*
    */
    height: unset;
    /* CHANGE DONE */
  }
  div#search_panel.noshadow {
    box-shadow: none;
  }
  div#search_panel > h1, div#search_panel > h1.showDesktop {
    display: block;
    margin: 5px 0 10px 2px;
  }
  div#search_panel hr {
    display: none !important;
  }
  div#search_panel div.search_panel_section {
    display: none;
  }
  div#search_panel div.search_panel_section span.search_title {
    padding-left: 10px;
    margin-top: 10px;
  }
  div#search_panel div.search_panel_section span.add_filter, div#search_panel div.search_panel_section span.show_filter {
    margin-top: 18px;
  }
  div#search_panel div.search_panel_section div.filter_holder {
    padding-left: 0;
  }
  div#search_panel div.search_panel_section.focus {
    display: block;
  }
  div#search_panel div.clear_filter_holder {
    display: none !important;
  }
  div#search_panel div#mobile_filters_holder {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding: 0 40px 0 20px;
    overflow-x: scroll;
    display: flex;
  }
  div#search_panel div#mobile_filters_holder span.filter_header {
    background: var(--input-background-colour);
    cursor: pointer;
    height: 35px;
    display: inline-flex;
    align-items: center;
    color: #999999;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    letter-spacing: 0.05em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    max-width: 100%;
    border: 1px solid var(--input-background-colour);
    flex-shrink: 0;
    cursor: pointer;
    column-gap: 6px;
  }
  div#search_panel div#mobile_filters_holder span.filter_header svg {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    fill: #999;
    flex-shrink: 0;
  }
}
@media (max-width: 850px) and (hover: hover) {
  div#search_panel div#mobile_filters_holder span.filter_header:hover {
    background: var(--theme-bg-hover);
    border: 1px solid var(--theme-bg-hover);
    color: var(--theme-text-hover);
  }
  div#search_panel div#mobile_filters_holder span.filter_header:hover svg {
    fill: var(--theme-text-hover);
  }
}
@media (max-width: 850px) {
  div#search_panel div#mobile_filters_holder span.filter_header:active {
    background: var(--theme-bg-active);
    border: 1px solid var(--theme-bg-active);
    color: var(--theme-text-active);
  }
  div#search_panel div#mobile_filters_holder span.filter_header:active svg {
    fill: var(--theme-text-active);
  }
  div#search_panel div#mobile_filters_holder span.filter_header.active {
    background: var(--theme-colour);
    border: 1px solid var(--theme-colour);
    color: #FFF;
  }
  div#search_panel div#mobile_filters_holder span.filter_header.active svg {
    fill: #FFF;
  }
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters {
    display: none;
    color: #CE3030;
    background: transparent;
    border: 1px solid transparent;
  }
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters svg {
    fill: #CE3030;
  }
}
@media (max-width: 850px) and (hover: hover) {
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters:hover {
    color: #FFF;
    background: #B92B2B;
    border: 1px solid #B92B2B;
  }
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters:hover svg {
    fill: #FFF;
  }
}
@media (max-width: 850px) {
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters:active {
    color: #FFF;
    background: #A52626;
    border: 1px solid #A52626;
  }
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters:active svg {
    fill: #FFF;
  }
  div#search_panel div#mobile_filters_holder span.filter_header.clear_filters.active {
    display: inline-flex;
  }
  div#search_panel div#mobile_filters_holder.focus span.filter_header:not(.focus) {
    opacity: 0.25;
  }
}
/* _calendar.scss */
div#calendar_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
}
div#calendar_container div#calendar_header {
  height: 80px;
  width: 100%;
  flex-shrink: 0;
  border-bottom: 1px solid #F5F5F5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-decoration: none;
}
div#calendar_container div#calendar_header div.main {
  height: 55px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 0 17.5px 0 20px;
}
div#calendar_container div#calendar_header div.main span.month_name {
  font-weight: 500;
  font-size: 28px;
  padding: 0 0 2px 0;
  color: #333;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  column-gap: 5px;
  flex-shrink: 0;
}
div#calendar_container div#calendar_header div.main span.month_name span {
  color: #808080;
}
div#calendar_container div#calendar_header div.main div.calendar_tools {
  flex-shrink: 0;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.prev, div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.next {
  width: 25px;
  height: 25px;
  display: inline-flex;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.prev svg, div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.next svg {
  width: 12px;
  height: 12px;
  fill: #999;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.prev:hover, div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.next:hover {
  background: #ECF5FF;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.prev:hover svg, div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.next:hover svg {
  fill: #407EC9;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.prev:active, div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.next:active {
  background: #CFE7FF;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.prev:active svg, div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.next:active svg {
  fill: #3971B5;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.today {
  font-size: 12px;
  font-weight: 700;
  color: #808080;
  cursor: pointer;
  height: 25px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  border-radius: 12.5px;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.today svg {
  width: 14px;
  height: 14px;
  fill: #999;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.today:hover {
  background: #ECF5FF;
  color: #407EC9;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.today:hover svg {
  fill: #407EC9;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.today:active {
  background: #CFE7FF;
  color: #3971B5;
}
div#calendar_container div#calendar_header div.main div.calendar_tools div.date_jockey span.today:active svg {
  fill: #3971B5;
}
div#calendar_container div#calendar_header div.days {
  height: 25px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f8f8f8;
}
div#calendar_container div#calendar_header div.days span {
  width: 1px;
  flex-grow: 1;
  text-align: center;
  font-weight: 700;
  color: #808080;
  font-size: 13px;
  display: none;
}
div#calendar_container div#calendar_header div.days span:not(.medium, .full) {
  display: inline-block;
}
div#calendar_container div#calendar_header div.days.medium span {
  display: none;
}
div#calendar_container div#calendar_header div.days.medium span.medium {
  display: inline-block;
}
div#calendar_container div#calendar_header div.days.full span {
  display: none;
}
div#calendar_container div#calendar_header div.days.full span.full {
  display: inline-block;
}
div#calendar_container div#calendar_body {
  height: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
  overflow-y: scroll;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-decoration: none;
}
div#calendar_container div#calendar_body div.month span.month_name {
  position: absolute;
  font-weight: 500;
  font-size: 28px;
  color: #333;
  z-index: 2;
  background: #FFF;
  box-shadow: 0 0 5px 5px #FFF;
  border-radius: 10px;
  padding: 0 5px;
  left: 15px;
  top: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  transition: visibility 0.2s;
}
div#calendar_container div#calendar_body div.month span.month_name span {
  margin-left: 5px;
  color: #808080;
}
div#calendar_container div#calendar_body div.month div.week {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: stretch;
}
div#calendar_container div#calendar_body div.month div.week div.day {
  min-height: calc((100vh - 70px) / 5);
  width: 1px;
  flex-grow: 1;
  border-right: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
}
div#calendar_container div#calendar_body div.month div.week div.day.weekend {
  background: #FCFCFC;
}
div#calendar_container div#calendar_body div.month div.week div.day.right {
  border-right: 1px solid #e5e5e5;
}
div#calendar_container div#calendar_body div.month div.week div.day.bottom {
  border-bottom: 1px solid #e5e5e5;
}
div#calendar_container div#calendar_body div.month div.week div.day:nth-of-type(7) {
  border-right: 0px !important;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header {
  padding: 5px 5px 5px 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.date {
  font-size: 14px;
  color: #666;
  font-weight: 700;
  margin-right: auto;
  height: 25px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.date span.day {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 25px;
  opacity: 0.25;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.date span.month {
  font-weight: 500;
  margin-left: 3px;
  color: #CCC;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.tools {
  font-size: 16px;
  font-weight: 500;
  width: 25px;
  height: 25px;
  display: inline-flex;
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
  flex-shrink: 0;
  flex-grow: 0;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.tools svg {
  width: 15px;
  height: 15px;
  fill: #999;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.tools:hover {
  background: #ECF5FF;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.tools:hover svg {
  fill: #407EC9;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.tools:active {
  background: #CFE7FF;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header span.tools:active svg {
  fill: #3971B5;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header:hover span.tools {
  opacity: 1;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_header:hover ~ div.day_footer {
  opacity: 1;
}
div#calendar_container div#calendar_body div.month div.week div.day.today div.day_header span.date span.day {
  padding: 0 5px 1px 5px;
  border-radius: 12.5px;
  background: #407ec9;
  color: #FFF;
  min-width: 25px;
  margin-left: -5px;
}
div#calendar_container div#calendar_body div.month div.week div.day.active div.day_header span.date span.day {
  opacity: 1;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event {
  height: 25px;
  font-size: 14px;
  font-weight: 500;
  background: #fbecad;
  display: inline-flex;
  position: absolute;
  width: calc(500% + 4px - 10px);
  left: 5px;
  z-index: 1;
  border-radius: 12.5px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 0 5.5px;
  column-gap: 5px;
  color: var(--colour-dark-yellow);
  overflow-x: hidden;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event span.text {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  flex-grow: 1;
  flex-shrink: 1;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event svg {
  fill: var(--colour-dark-yellow);
  width: 14px;
  height: 14px;
  flex-grow: 0;
  flex-shrink: 0;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-order="0"] {
  background: #bbd1ec;
  color: var(--colour-dark-blue);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-order="0"] svg {
  fill: var(--colour-dark-blue);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-order="1"] {
  background: #bfe8bf;
  color: var(--colour-dark-green);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-order="1"] svg {
  fill: var(--colour-dark-green);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-order="2"] {
  background: #fbdead;
  color: var(--colour-dark-orange);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-order="2"] svg {
  fill: var(--colour-dark-orange);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="0.5"] {
  width: calc(50% - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="1"] {
  width: calc(100% - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="1.5"] {
  width: calc(150% + 1px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="2"] {
  width: calc(200% + 1px - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="2.5"] {
  width: calc(250% + 2px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="3"] {
  width: calc(300% + 2px - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="3.5"] {
  width: calc(350% + 3px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="4"] {
  width: calc(400% + 3px - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="4.5"] {
  width: calc(450% + 4px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="5"] {
  width: calc(500% + 4px - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="5.5"] {
  width: calc(550% + 5px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="6"] {
  width: calc(600% + 5px - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="6.5"] {
  width: calc(650% + 6px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width="7"] {
  width: calc(700% + 6px - 10px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-width$=".5"]:not([data-start$=".5"]), div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"]:not([data-width$=".5"]) {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="0.5"] {
  left: calc(50% + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="1"] {
  left: calc(100% + 1px + 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="1.5"] {
  left: calc(150% + 1px + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="2"] {
  left: calc(200% + 2px + 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="2.5"] {
  left: calc(250% + 2px + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="3"] {
  left: calc(300% + 3px + 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="3.5"] {
  left: calc(350% + 3px + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="4"] {
  left: calc(400% + 4px + 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="4.5"] {
  left: calc(450% + 4px + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="5"] {
  left: calc(500% + 5px + 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="5.5"] {
  left: calc(550% + 5px + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="6"] {
  left: calc(600% + 6px + 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start="6.5"] {
  left: calc(650% + 6px + 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"] {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="0.5"] {
  width: calc(50% - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="1"] {
  width: calc(100% + 1px - 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="1.5"] {
  width: calc(150% + 1px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="2"] {
  width: calc(200% + 2px - 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="2.5"] {
  width: calc(250% + 2px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="3"] {
  width: calc(300% + 3px - 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="3.5"] {
  width: calc(350% + 3px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="4"] {
  width: calc(400% + 4px - 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="4.5"] {
  width: calc(450% + 4px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="5"] {
  width: calc(500% + 5px - 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="5.5"] {
  width: calc(550% + 5px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="6"] {
  width: calc(600% + 6px - 5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_body span.event[data-start$=".5"][data-width="6.5"] {
  width: calc(650% + 6px - 5px - 2.5px);
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_footer {
  padding: 5px 5px 5px 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-direction: row;
  opacity: 0;
}
div#calendar_container div#calendar_body div.month div.week div.day div.day_footer:hover {
  opacity: 1;
}
div#calendar_container div#calendar_body div.month div.week div.day.selected div.day_footer {
  opacity: 1;
}
div#calendar_container div#calendar_body.scrolling:not(.hide_month_names) div.month:not(.active) span.month_name {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s;
  transition: visibility 0s;
}
div#calendar_container div#calendar_overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0 2.5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 100%;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  cursor: pointer;
  z-index: 2;
}

div#calendar_body.narrow div.month div.week div.day div.day_header span.month {
  display: none;
}

div#toolbar_right_content div.toolbar_right_calendar div#calendar_container div#calendar_body div.month div.week div.day {
  min-height: min((100vh - 190px) / 5, 120px);
}

div#search_panel[data-tab=messages] ~ div#toolbar_right_content div.toolbar_right_calendar div#calendar_container div#calendar_body div.month div.week div.day {
  min-height: min((100vh - 210px) / 5, 120px);
}

/* _jobs.scss */ /* _colours.scss */
div#body.job, div#body.callout {
  overflow-y: scroll;
  max-height: 100vh;
  padding-bottom: 200px;
}
div#body.job img, div#body.callout img {
  width: 100%;
  height: 200px;
}
div#body.job span.applicationFormQuestion, div#body.callout span.applicationFormQuestion {
  color: var(--item-primary-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  display: block;
  margin-bottom: 10px;
  padding: 0 10px 0 20px;
}
div#body.job span.applicationFormQuestion.review, div#body.callout span.applicationFormQuestion.review {
  margin-bottom: 0px;
  background: var(--layout-border-colour);
  padding: 15px 20px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
div#body.job span.applicationFormAnswer, div#body.callout span.applicationFormAnswer {
  color: #4d4d4d;
  font-weight: normal;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 10px;
  display: block;
  padding: 15px 20px;
  border: 2px solid var(--layout-border-colour);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top: 0px;
}
div#body.job span.applicationFormAnswer span.libraryAttachment, div#body.callout span.applicationFormAnswer span.libraryAttachment {
  margin: 0px;
}
div#body.job span.applicationFormAnswer:has(span.libraryAttachment), div#body.callout span.applicationFormAnswer:has(span.libraryAttachment) {
  padding: 15px;
}
div#body.job span.applicationFormAnswer p, div#body.callout span.applicationFormAnswer p {
  margin: 0;
}
div#body.job span.applicationFormAnswer ul, div#body.job span.applicationFormAnswer ol, div#body.callout span.applicationFormAnswer ul, div#body.callout span.applicationFormAnswer ol {
  margin: 0;
}
div#body.job div#reviewHolder h1, div#body.callout div#reviewHolder h1 {
  font-weight: bold;
  font-size: 22px;
  margin: 0 0 10px 0;
  color: var(--item-primary-text);
  line-height: 24px;
  display: block;
}
div#body.job div#reviewHolder span.applicationFormQuestion, div#body.callout div#reviewHolder span.applicationFormQuestion {
  margin-top: 40px;
}
div#body.job div.profiletext span.tertiary p, div#body.job div.profiletext span.tertiary ul, div#body.job div.profiletext span.tertiary ol, div#body.callout div.profiletext span.tertiary p, div#body.callout div.profiletext span.tertiary ul, div#body.callout div.profiletext span.tertiary ol {
  margin: 0 0 5px 0;
}

div#body.callout img {
  height: 60px;
}

div#submission_complete {
  text-align: center;
  display: none;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  height: 100vh;
  min-height: -webkit-fill-available;
  width: 100%;
  padding-bottom: 25vh;
}
div#submission_complete > * {
  flex-shrink: 0;
}
div#submission_complete > svg {
  fill: var(--colour-green);
  width: 100px;
  height: 100px;
}
div#submission_complete span.success {
  font-weight: 500;
  font-size: 22px;
  color: var(--colour-green-hover);
  margin-top: 20px;
  padding: 0 20px;
  text-wrap: balance;
}
div#submission_complete span.share_text {
  font-weight: 500;
  font-size: 20px;
  color: var(--colour-orange-hover);
  margin-top: 70px;
  margin-bottom: 20px;
  padding: 0 20px;
}

div#message_tools.review {
  padding: 0;
  background: none;
  border: 0;
  margin-top: 10px;
}
div#message_tools.review div#controls div.buttons span#sendmessage {
  background: var(--colour-green-25);
}
div#message_tools.review div#controls div.buttons span#sendmessage.active {
  background: var(--colour-green);
}
@media (hover: hover) {
  div#message_tools.review div#controls div.buttons span#sendmessage.active:hover {
    background: var(--colour-green-hover);
  }
}
div#message_tools.review div#controls div.buttons span#sendmessage.active:active {
  background: var(--colour-green-active);
}

div.review_timeline div.timebreak {
  text-align: center;
  color: var(--timebreak-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 30px 0 0px 0;
  text-transform: uppercase;
}
div.review_timeline div.review_element {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 10px;
  margin-bottom: 20px;
}
div.review_timeline div.review_element.admin {
  flex-direction: row-reverse;
}
div.review_timeline div.review_element.admin div.text span.changeid {
  right: 0;
}
div.review_timeline div.review_element div.image {
  height: 50px;
  width: 50px;
}
div.review_timeline div.review_element div.image img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
div.review_timeline div.review_element div.text {
  min-height: 50px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--item-primary-text);
  max-width: 75%;
}
div.review_timeline div.review_element div.text span.name {
  font-weight: bold;
}
div.review_timeline div.review_element div.text span.changeid {
  color: var(--timebreak-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-left: 5px;
}
div.review_timeline div.review_element.hasMessage div.text {
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: nowrap;
  display: flex;
}
div.review_timeline div.review_element.hasMessage div.text span.message {
  background: #20B264;
  padding: 12px 17px;
  vertical-align: bottom;
  display: inline-block;
  border-radius: 5px 15px 15px 15px;
  font-size: 15px;
  color: #FFFFFF;
  text-align: left;
  line-height: 1.4;
  margin-top: 5px;
}
div.review_timeline div.review_element.hasMessage.admin div.text {
  flex-direction: column;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: nowrap;
}
div.review_timeline div.review_element.hasMessage.admin div.text span.message {
  background: var(--other-message-bg);
  border-radius: 15px 5px 15px 15px;
  color: var(--other-message-text);
}

@media (min-width: 850px) {
  div#body.job img {
    height: 240px;
  }
}
/* _faders.scss */
div.fade_holder {
  position: absolute;
  height: 60px;
  width: 100%;
  pointer-events: none;
}

div.fade_left {
  width: 20px;
  height: 100%;
  background: linear-gradient(to right, rgb(242, 242, 242) 0%, rgba(242, 242, 242, 0.738) 19%, rgba(242, 242, 242, 0.541) 34%, rgba(242, 242, 242, 0.382) 47%, rgba(242, 242, 242, 0.278) 56.5%, rgba(242, 242, 242, 0.194) 65%, rgba(242, 242, 242, 0.126) 73%, rgba(242, 242, 242, 0.075) 80.2%, rgba(242, 242, 242, 0.042) 86.1%, rgba(242, 242, 242, 0.021) 91%, rgba(242, 242, 242, 0.008) 95.2%, rgba(242, 242, 242, 0.002) 98.2%, rgba(242, 242, 242, 0) 100%);
  position: absolute;
  left: 0;
  opacity: 0;
}

div.fade_right {
  width: 20px;
  height: 100%;
  background: linear-gradient(to left, rgb(242, 242, 242) 0%, rgba(242, 242, 242, 0.738) 19%, rgba(242, 242, 242, 0.541) 34%, rgba(242, 242, 242, 0.382) 47%, rgba(242, 242, 242, 0.278) 56.5%, rgba(242, 242, 242, 0.194) 65%, rgba(242, 242, 242, 0.126) 73%, rgba(242, 242, 242, 0.075) 80.2%, rgba(242, 242, 242, 0.042) 86.1%, rgba(242, 242, 242, 0.021) 91%, rgba(242, 242, 242, 0.008) 95.2%, rgba(242, 242, 242, 0.002) 98.2%, rgba(242, 242, 242, 0) 100%);
  position: absolute;
  right: 0;
  opacity: 0;
}

div.show_fade_right + div.fade_holder div.fade_right,
div.show_fade_left + div.fade_holder div.fade_left {
  opacity: 1;
}

/* _items.scss */ /* _colours.scss */
div.item {
  height: 60px;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding-left: 25px;
  column-gap: 15px;
  border-bottom: 1px solid var(--item-border);
  border-top: 1px solid var(--item-border);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-decoration: none;
}
div.item.large {
  height: 80px;
}
div.item.clickable {
  cursor: pointer;
}
div.item > img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
div.item > img.gallery {
  display: none;
}
div.item > div.text {
  flex-grow: 1;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  flex-shrink: 1;
  width: 1px;
}
div.item > div.text span.main {
  color: var(--item-primary-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.item > div.text span.secondary {
  color: var(--item-secondary-text);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.item > div.text span.secondary svg {
  fill: var(--item-secondary-text);
  vertical-align: top;
  margin-top: 2px;
  margin-right: 3px;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  flex-grow: 0;
}
div.item > div.text span.tertiary {
  color: var(--item-tertiary-text);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div.item > div.text span.tertiary svg {
  fill: var(--item-tertiary-text);
  vertical-align: top;
  margin-top: 2px;
  margin-right: 3px;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  flex-grow: 0;
}
div.item > div.text span.flex_split {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
div.item > div.text span.flex_split span {
  width: auto;
}
div.item > div.text span.flex_split span:last-child {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  overflow: visible;
  opacity: 0.5;
}
div.item > div.text span.flex_split span:last-child:not(:empty)::before {
  content: "•";
  opacity: 0.5;
  margin: 0 3px;
}
div.item > div.text span.flex_split span br {
  display: none;
}
div.item > div.tools {
  flex-grow: 0;
  padding-right: 20px;
  display: inline-flex;
  column-gap: 5px;
}
div.item > div.tools a.icon_button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
div.item > div.tools a.icon_button svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  fill: #999;
}
@media (hover: hover) {
  div.item > div.tools a.icon_button:hover {
    background: var(--theme-bg-hover);
  }
  div.item > div.tools a.icon_button:hover svg {
    fill: var(--theme-text-secondary-hover);
  }
}
div.item > div.tools a.icon_button:active {
  background: var(--theme-bg-active);
}
div.item > div.tools a.icon_button:active svg {
  fill: var(--theme-text-main-hover);
}
div.item > div.tools a.remove {
  width: 25px;
  height: 25px;
  display: inline-flex;
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
}
div.item > div.tools a.remove svg {
  width: 75%;
  height: 75%;
  display: inline-block;
  fill: #999;
}
@media (hover: hover) {
  div.item > div.tools a.remove:hover {
    background: var(--colour-red-hover);
  }
  div.item > div.tools a.remove:hover svg {
    fill: #FFFFFF;
  }
}
div.item > div.tools a.remove:active {
  background: var(--colour-red-active);
}
div.item > div.tools a.remove:active svg {
  fill: #FFFFFF;
}
div.item.person > img, div.item > img.person {
  border-radius: 50%;
  background-image: var(--default-background-image-people);
}
div.item.has_tools div.text {
  padding-right: 0;
}
div.item.online::after {
  content: " ";
  width: 8px;
  height: 8px;
  display: inline-block;
  background: var(--colour-green);
  margin: 0 3px 1px 0;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 40px;
  border: 2px solid var(--background);
}
div.item.job, div.item.callout, div.item.application, div.item.award {
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}
div.item.job > label.checkbox, div.item.callout > label.checkbox, div.item.application > label.checkbox, div.item.award > label.checkbox {
  position: relative;
  margin-bottom: auto;
  top: 22.5px;
}
div.item.job > img, div.item.callout > img, div.item.application > img, div.item.award > img {
  width: 100px;
  height: 100px;
  margin-bottom: auto;
}
div.item.job > span.status, div.item.callout > span.status, div.item.application > span.status, div.item.award > span.status {
  width: 100px;
  height: 25px;
  background: var(--colour-orange);
  position: absolute;
  top: 110px;
  color: #FFF;
  font-weight: bold;
  font-size: 11px;
  display: none;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
div.item.job > div.text, div.item.callout > div.text, div.item.application > div.text, div.item.award > div.text {
  padding-right: 20px;
}
div.item.job > div.text span.main, div.item.callout > div.text span.main, div.item.application > div.text span.main, div.item.award > div.text span.main {
  white-space: normal;
  overflow-x: visible;
}
div.item.job > div.text span.main + span.secondary, div.item.callout > div.text span.main + span.secondary, div.item.application > div.text span.main + span.secondary, div.item.award > div.text span.main + span.secondary {
  margin-top: 4px;
}
div.item.job > div.text span.secondary, div.item.callout > div.text span.secondary, div.item.application > div.text span.secondary, div.item.award > div.text span.secondary {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  white-space: normal;
  display: inline-flex;
}
div.item.job > div.text span.secondary + span.secondary, div.item.callout > div.text span.secondary + span.secondary, div.item.application > div.text span.secondary + span.secondary, div.item.award > div.text span.secondary + span.secondary {
  margin-top: 2px;
}
div.item.job > div.text span.secondary svg, div.item.callout > div.text span.secondary svg, div.item.application > div.text span.secondary svg, div.item.award > div.text span.secondary svg {
  fill: var(--item-secondary-text);
  vertical-align: top;
  margin-top: 2px;
  margin-right: 3px;
  display: inline-block;
  width: 12px;
  height: 12px;
}
div.item.job > div.text span.secondary.role + span.secondary.role, div.item.callout > div.text span.secondary.role + span.secondary.role, div.item.application > div.text span.secondary.role + span.secondary.role, div.item.award > div.text span.secondary.role + span.secondary.role {
  margin-top: 0;
}
div.item.job > div.text span.secondary.role + span.secondary.role svg, div.item.callout > div.text span.secondary.role + span.secondary.role svg, div.item.application > div.text span.secondary.role + span.secondary.role svg, div.item.award > div.text span.secondary.role + span.secondary.role svg {
  visibility: hidden;
}
div.item.job > div.text span.secondary.location + span.secondary.location, div.item.callout > div.text span.secondary.location + span.secondary.location, div.item.application > div.text span.secondary.location + span.secondary.location, div.item.award > div.text span.secondary.location + span.secondary.location {
  margin-top: 0;
}
div.item.job > div.text span.secondary.location + span.secondary.location svg, div.item.callout > div.text span.secondary.location + span.secondary.location svg, div.item.application > div.text span.secondary.location + span.secondary.location svg, div.item.award > div.text span.secondary.location + span.secondary.location svg {
  visibility: hidden;
}
div.item.job > div.text span.secondary.red, div.item.callout > div.text span.secondary.red, div.item.application > div.text span.secondary.red, div.item.award > div.text span.secondary.red {
  margin-top: 2px;
  color: var(--colour-red);
}
div.item.job > div.text span.secondary.red svg, div.item.callout > div.text span.secondary.red svg, div.item.application > div.text span.secondary.red svg, div.item.award > div.text span.secondary.red svg {
  fill: var(--colour-red);
}
div.item.job > div.text span.secondary.orange, div.item.callout > div.text span.secondary.orange, div.item.application > div.text span.secondary.orange, div.item.award > div.text span.secondary.orange {
  margin-top: 2px;
  color: var(--colour-orange);
}
div.item.job > div.text span.secondary.orange svg, div.item.callout > div.text span.secondary.orange svg, div.item.application > div.text span.secondary.orange svg, div.item.award > div.text span.secondary.orange svg {
  fill: var(--colour-orange);
}
div.item.job > div.text span.secondary.yellow, div.item.callout > div.text span.secondary.yellow, div.item.application > div.text span.secondary.yellow, div.item.award > div.text span.secondary.yellow {
  margin-top: 2px;
  color: var(--colour-yellow);
}
div.item.job > div.text span.secondary.yellow svg, div.item.callout > div.text span.secondary.yellow svg, div.item.application > div.text span.secondary.yellow svg, div.item.award > div.text span.secondary.yellow svg {
  fill: var(--colour-yellow);
}
div.item.job > div.text span.secondary.green, div.item.callout > div.text span.secondary.green, div.item.application > div.text span.secondary.green, div.item.award > div.text span.secondary.green {
  margin-top: 2px;
  color: var(--colour-green);
}
div.item.job > div.text span.secondary.green svg, div.item.callout > div.text span.secondary.green svg, div.item.application > div.text span.secondary.green svg, div.item.award > div.text span.secondary.green svg {
  fill: var(--colour-green);
}
div.item.job > div.text span.secondary.blue, div.item.callout > div.text span.secondary.blue, div.item.application > div.text span.secondary.blue, div.item.award > div.text span.secondary.blue {
  margin-top: 2px;
  color: var(--colour-blue);
}
div.item.job > div.text span.secondary.blue svg, div.item.callout > div.text span.secondary.blue svg, div.item.application > div.text span.secondary.blue svg, div.item.award > div.text span.secondary.blue svg {
  fill: var(--colour-blue);
}
div.item.job > div.text span.secondary.indigo, div.item.callout > div.text span.secondary.indigo, div.item.application > div.text span.secondary.indigo, div.item.award > div.text span.secondary.indigo {
  margin-top: 2px;
  color: var(--colour-indigo);
}
div.item.job > div.text span.secondary.indigo svg, div.item.callout > div.text span.secondary.indigo svg, div.item.application > div.text span.secondary.indigo svg, div.item.award > div.text span.secondary.indigo svg {
  fill: var(--colour-indigo);
}
div.item.job > div.text span.secondary.violet, div.item.callout > div.text span.secondary.violet, div.item.application > div.text span.secondary.violet, div.item.award > div.text span.secondary.violet {
  margin-top: 2px;
  color: var(--colour-violet);
}
div.item.job > div.text span.secondary.violet svg, div.item.callout > div.text span.secondary.violet svg, div.item.application > div.text span.secondary.violet svg, div.item.award > div.text span.secondary.violet svg {
  fill: var(--colour-violet);
}
div.item.job > div.text span.secondary.grey, div.item.callout > div.text span.secondary.grey, div.item.application > div.text span.secondary.grey, div.item.award > div.text span.secondary.grey {
  margin-top: 2px;
  color: var(--colour-grey);
}
div.item.job > div.text span.secondary.grey svg, div.item.callout > div.text span.secondary.grey svg, div.item.application > div.text span.secondary.grey svg, div.item.award > div.text span.secondary.grey svg {
  fill: var(--colour-grey);
}
div.item.job > div.text span.tertiary, div.item.callout > div.text span.tertiary, div.item.application > div.text span.tertiary, div.item.award > div.text span.tertiary {
  white-space: normal;
  overflow-x: visible;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  max-height: 64px;
  line-break: after-white-space;
}
div.item.job > div.text span.tertiary p, div.item.callout > div.text span.tertiary p, div.item.application > div.text span.tertiary p, div.item.award > div.text span.tertiary p {
  margin: 0 0 5px 0;
}
div.item.job > div.text span.tertiary ul, div.item.job > div.text span.tertiary ol, div.item.callout > div.text span.tertiary ul, div.item.callout > div.text span.tertiary ol, div.item.application > div.text span.tertiary ul, div.item.application > div.text span.tertiary ol, div.item.award > div.text span.tertiary ul, div.item.award > div.text span.tertiary ol {
  margin: 10px 0;
  padding: 0 0 0 25px;
}
div.item.job > div.text span.tertiary *, div.item.callout > div.text span.tertiary *, div.item.application > div.text span.tertiary *, div.item.award > div.text span.tertiary * {
  display: -webkit-inline-box;
}
div.item.job.wrapped, div.item.callout.wrapped, div.item.application.wrapped, div.item.award.wrapped {
  min-height: 150px;
}
div.item.job.wrapped > span.status, div.item.callout.wrapped > span.status, div.item.application.wrapped > span.status, div.item.award.wrapped > span.status {
  display: flex;
}
div.item.job.wrapped > span.status::after, div.item.callout.wrapped > span.status::after, div.item.application.wrapped > span.status::after, div.item.award.wrapped > span.status::after {
  content: "WRAPPED";
}
div.item.job.inreview, div.item.callout.inreview, div.item.application.inreview, div.item.award.inreview {
  min-height: 150px;
}
div.item.job.inreview > span.status, div.item.callout.inreview > span.status, div.item.application.inreview > span.status, div.item.award.inreview > span.status {
  display: flex;
  background: var(--colour-green);
}
div.item.job.inreview > span.status::after, div.item.callout.inreview > span.status::after, div.item.application.inreview > span.status::after, div.item.award.inreview > span.status::after {
  content: "IN REVIEW";
}
div.item.job.cancelled, div.item.callout.cancelled, div.item.application.cancelled, div.item.award.cancelled {
  min-height: 150px;
}
div.item.job.cancelled > span.status, div.item.callout.cancelled > span.status, div.item.application.cancelled > span.status, div.item.award.cancelled > span.status {
  display: flex;
  background: var(--colour-red);
}
div.item.job.cancelled > span.status::after, div.item.callout.cancelled > span.status::after, div.item.application.cancelled > span.status::after, div.item.award.cancelled > span.status::after {
  content: "CANCELLED";
}
div.item.award > img {
  border-radius: 50%;
  background: var(--input-background-colour);
  background-image: url("https://crewlist.s3.amazonaws.com/images/awards/empty_light_100@2x.png");
  background-size: 100%;
}
div.item.award.bronze > img {
  background-image: url("https://crewlist.s3.amazonaws.com/images/awards/award_star_bronze_100@2x.png");
}
div.item.award.silver > img {
  background-image: url("https://crewlist.s3.amazonaws.com/images/awards/award_star_silver_100@2x.png");
}
div.item.award.gold > img {
  background-image: url("https://crewlist.s3.amazonaws.com/images/awards/award_star_gold_100@2x.png");
}
div.item.award.diamond > img {
  background-image: url("https://crewlist.s3.amazonaws.com/images/awards/award_star_diamond_100@2x.png");
}
div.item.award div.text {
  padding-right: 0;
}
div.item.award div.text span.main {
  font-size: 20px;
  line-height: 20px;
}
div.item.award div.text span.tertiary {
  font-size: 16px;
  line-height: unset;
  padding-right: 20px;
}
div.item.award div.text span.award_progress_frame {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  flex-shrink: 1;
  margin-top: 10px;
}
div.item.award div.text span.award_progress_frame span.progress_bar_holder {
  background: var(--input-background-colour);
  height: 16px;
  display: inline-flex;
  width: 1px;
  flex-direction: row;
  align-content: stretch;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 8px;
  flex-grow: 1;
}
div.item.award div.text span.award_progress_frame span.progress_bar_holder span.progress_bar {
  background: #d1752a;
}
div.item.award div.text span.award_progress_frame span.text {
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  color: #d1752a;
  width: 45px;
}
div.item.award div.text span.award_progress_frame.silver span.progress_bar_holder span.progress_bar {
  background: #dae3ec;
}
div.item.award div.text span.award_progress_frame.silver span.text {
  color: #b2c4d7;
}
div.item.award div.text span.award_progress_frame.gold span.progress_bar_holder span.progress_bar {
  background: #ffd400;
}
div.item.award div.text span.award_progress_frame.gold span.text {
  color: #f5cc00;
}
div.item.award div.text span.award_progress_frame.diamond span.progress_bar_holder span.progress_bar {
  background: url("https://crewlist.s3.amazonaws.com/images/textures/diamond_texture.png");
  width: 20%;
  background-size: max(320px, 100%);
  background-repeat: no-repeat;
  background-position: 100% 50%;
}
div.item.award div.text span.award_progress_frame.diamond span.text {
  color: #92c8e6;
}
div.item.award div.tools span {
  width: 45px;
  height: 45px;
  background: var(--input-background-colour);
  display: inline-flex;
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.item.award div.tools span svg {
  width: 17px;
  height: 17px;
  display: inline-block;
  fill: #999;
}
@media (hover: hover) {
  div.item.award div.tools span:hover {
    background: var(--theme-bg-hover);
  }
  div.item.award div.tools span:hover svg {
    fill: var(--theme-text-secondary-hover);
  }
}
div.item.award div.tools span:active {
  background: var(--theme-bg-active);
}
div.item.award div.tools span:active svg {
  fill: var(--theme-text-main-hover);
}
div.item.callout > img {
  height: 135px;
  width: 100px;
}
div.item.app > img {
  border-radius: 25%;
}
div.item.business > img {
  background-image: var(--default-background-image-business);
}
div.item.callout > img, div.item.project > img {
  background-image: var(--default-background-image-project);
}
div.item.job > img {
  background-image: var(--default-background-image-jobs);
}
div.item.application > img {
  background-image: var(--default-background-image-cvinverted);
}
div.item.receipt > img {
  background-image: var(--default-background-image-documentinverted);
}
div.item.app > img {
  background-image: var(--default-background-image-menu);
}
div.item.paymentmethod {
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding-left: 20px;
}
div.item.paymentmethod.selected {
  border: 1px solid var(--theme-colour) !important;
}
div.item.paymentmethod > img {
  height: 30px;
  background: #FFF;
  vertical-align: middle;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
div.item.paymentmethod + .paymentmethod {
  margin-top: 10px;
}
div.item.application.received > img:nth-of-type(1) {
  width: 70px;
  height: 70px;
  margin-bottom: auto;
}
div.item.application.received > img:nth-of-type(2) {
  position: relative;
  left: -40px;
  top: 45px;
  width: 30px;
  height: 30px;
  margin-right: -35px;
  margin-bottom: auto;
}
div.item.application.received.wrapped, div.item.application.received.inreview, div.item.application.received.cancelled {
  min-height: 136px;
}
div.item.application.received.wrapped > span.status, div.item.application.received.inreview > span.status, div.item.application.received.cancelled > span.status {
  width: 75px;
  border-radius: 5px;
  position: relative;
  margin-left: -95px;
  margin-right: 5px;
  top: 40px;
}
div.item.credit {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: flex-start;
}
div.item.credit > div.text {
  min-height: 40px;
}
div.item.credit > div.tools span.year {
  color: var(--item-secondary-text);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  width: auto;
  flex-shrink: 0;
  flex-grow: 1;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  flex-direction: row-reverse;
}

html[data-darkmode=dark] div.item:not(.loading).award > img {
  background-image: url("https://crewlist.s3.amazonaws.com/images/awards/empty_dark_100@2x.png");
}

a:visited div.item {
  border-bottom: 1px solid var(--item-border);
}

@media (hover: hover) {
  a:hover div.item:not(.nohover), div.item.clickable:hover {
    background: var(--theme-bg-hover);
    border-bottom: 1px solid var(--theme-bg-hover);
    border-top: 1px solid var(--theme-bg-hover);
  }
  a:hover div.item:not(.nohover).paymentmethod, div.item.clickable:hover.paymentmethod {
    border-left: 1px solid var(--theme-bg-hover);
    border-right: 1px solid var(--theme-bg-hover);
  }
  a:hover div.item:not(.nohover).paymentmethod:not(.selected) span.checkbox, div.item.clickable:hover.paymentmethod:not(.selected) span.checkbox {
    background: var(--theme-bg-hover);
  }
  a:hover div.item:not(.nohover).paymentmethod:not(.selected) span.checkbox svg, div.item.clickable:hover.paymentmethod:not(.selected) span.checkbox svg {
    fill: var(--theme-colour);
  }
  a:hover div.item:not(.nohover) a.remove svg, div.item.clickable:hover a.remove svg {
    fill: var(--theme-colour);
  }
}

@media (hover: hover) {
  a:hover div.item.online::after, div.item.clickable.online:hover::after {
    border: 2px solid var(--theme-bg-hover);
  }
}

a:active div.item:not(.nohover), div.item.clickable:active {
  background: var(--theme-bg-active);
  border-bottom: 1px solid var(--theme-bg-active);
  border-top: 1px solid var(--theme-bg-active);
}
a:active div.item:not(.nohover) > div.text span.main, div.item.clickable:active > div.text span.main {
  color: var(--theme-text-main-hover);
}
a:active div.item:not(.nohover) > div.text span.main svg, div.item.clickable:active > div.text span.main svg {
  fill: var(--theme-text-main-hover);
}
a:active div.item:not(.nohover) > div.text span.secondary, a:active div.item:not(.nohover) > div.text span.year, div.item.clickable:active > div.text span.secondary, div.item.clickable:active > div.text span.year {
  color: var(--theme-text-secondary-hover);
}
a:active div.item:not(.nohover) > div.text span.secondary svg, a:active div.item:not(.nohover) > div.text span.year svg, div.item.clickable:active > div.text span.secondary svg, div.item.clickable:active > div.text span.year svg {
  fill: var(--theme-text-secondary-hover);
}
a:active div.item:not(.nohover) > div.text span.tertiary, div.item.clickable:active > div.text span.tertiary {
  color: var(--theme-text-tertiary-hover);
}
a:active div.item:not(.nohover) > div.text span.tertiary svg, div.item.clickable:active > div.text span.tertiary svg {
  fill: var(--theme-text-tertiary-hover);
}

a:active div.item.online::after, div.item.clickable.online:active::after {
  border: 2px solid var(--theme-bg-active);
}

@media (hover: hover) {
  a:hover div.item:not(.nohover) > label.checkbox span.checkbox, div.item.clickable:hover > label.checkbox span.checkbox,
  a:hover div.item:not(.nohover) > img, div.item.clickable:hover > img {
    box-shadow: 0 0 5px rgba(57, 113, 181, 0.1019607843);
  }
  a:hover div.item:not(.nohover) div.text span.main, div.item.clickable:hover div.text span.main, div.item.clickable.active div.text span.main {
    color: var(--theme-text-main-hover);
  }
  a:hover div.item:not(.nohover) div.text span.main svg, div.item.clickable:hover div.text span.main svg, div.item.clickable.active div.text span.main svg {
    fill: var(--theme-text-main-hover);
  }
  a:hover div.item:not(.nohover) div.text span.secondary, a:hover div.item:not(.nohover) div.text span.year, div.item.clickable:hover div.text span.secondary, div.item.clickable:hover div.text span.year, div.item.clickable.active div.text span.secondary, div.item.clickable.active div.text span.year {
    color: var(--theme-text-secondary-hover);
  }
  a:hover div.item:not(.nohover) div.text span.secondary svg, a:hover div.item:not(.nohover) div.text span.year svg, div.item.clickable:hover div.text span.secondary svg, div.item.clickable:hover div.text span.year svg, div.item.clickable.active div.text span.secondary svg, div.item.clickable.active div.text span.year svg {
    fill: var(--theme-text-secondary-hover);
  }
  a:hover div.item:not(.nohover) div.text span.tertiary, div.item.clickable:hover div.text span.tertiary, div.item.clickable.active div.text span.tertiary {
    color: var(--theme-text-tertiary-hover);
  }
  a:hover div.item:not(.nohover) div.text span.tertiary svg, div.item.clickable:hover div.text span.tertiary svg, div.item.clickable.active div.text span.tertiary svg {
    fill: var(--theme-text-tertiary-hover);
  }
}
div.item + div.item, a.item_holder + a.item_holder div.item, a:has(div.item) + a:has(div.item) div.item {
  margin-top: -1px;
}

div.item.loading > img {
  background: var(--loading-bg);
}
div.item.loading > span.checkbox {
  width: 25px;
  height: 25px;
  background: var(--input-background-colour);
  appearance: none;
  border-radius: 50%;
}
div.item.loading > div.text {
  row-gap: 4px;
}
div.item.loading > div.text span.main {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 13px;
  width: 60%;
}
div.item.loading > div.text span.secondary, div.item.loading > div.text span.year {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 12px;
  width: 50%;
}
div.item.loading > div.text span.tertiary {
  background: var(--loading-bg) !important;
  border-radius: 5px;
  height: 12px;
  width: 40%;
}

@media (hover: none) {
  div.item a.remove {
    background: var(--colour-red) !important;
  }
  div.item a.remove svg {
    fill: #FFF !important;
  }
}
@media (max-width: 850px) {
  div.item {
    padding-left: 20px;
  }
  div.item.job > img, div.item.callout > img, div.item.application > img {
    height: 70px;
    width: 70px;
  }
  div.item.job > span.status, div.item.callout > span.status, div.item.application > span.status {
    width: 70px;
    top: 80px;
    height: 25px;
    font-size: 10px;
  }
  div.item.callout > img {
    height: 95px;
  }
  div.item.person, div.item.project, div.item.business {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  div.item.person > img, div.item.project > img, div.item.business > img {
    height: 50px;
    width: 50px;
  }
  div.item.project {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  div.item.online::after {
    width: 10px;
    height: 10px;
    top: 47px;
    left: 54px;
  }
  div.item.credit {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  div.item.credit > div.text {
    min-height: 50px;
  }
  div.item.credit > div.tools span.year {
    height: 50px;
  }
}
/* _messages.scss */
div#message_header {
  height: 81px;
  border-bottom: 1px solid var(--layout-border-colour);
  background: #FFF;
}
div#message_header span#return_contacts_list {
  display: none;
  width: 50px;
  height: 60px;
  cursor: pointer;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-left: -20px;
  margin-right: -13px;
}
div#message_header span#return_contacts_list svg {
  width: 16px;
  fill: var(--item-tertiary-text);
  height: 16px;
}
@media (hover: hover) {
  div#message_header span#return_contacts_list:hover svg {
    fill: var(--theme-colour-hover);
  }
}
div#message_header span#return_contacts_list:active svg {
  fill: var(--theme-colour-active);
}
div#message_header > img {
  width: 50px;
  height: 50px;
}
div#message_header div.text span.main {
  font-size: 18px;
  line-height: 20px;
}
div#message_header div.text span.tertiary {
  font-size: 15px;
  line-height: 18px;
}
div#message_header div.text span#contact_activity {
  color: #b3b3b3;
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
div#message_header div.text span#contact_activity.active {
  color: #36b835;
}
div#message_header div.text span#contact_activity.active::before {
  content: " ";
  width: 6px;
  height: 6px;
  display: inline-block;
  background: #36b835;
  margin: 0 2px 1px 1px;
  border-radius: 50%;
}

div#message_feed {
  height: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  visibility: visible;
  padding: 0 0 80px 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
div#message_feed div.timebreak {
  text-align: center;
  color: var(--timebreak-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 30px 0 0px 0;
  text-transform: uppercase;
}
div#message_feed div.messageblock {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-end;
  max-width: 90%;
  margin-left: 10%;
  text-align: right;
  margin-bottom: 2px;
}
div#message_feed div.messageblock div.tools {
  min-width: 120px;
  flex-grow: 1000;
  visibility: hidden;
}
div#message_feed div.messageblock div.tools span.message_timestamp {
  text-align: right;
  color: var(--timebreak-text);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 0px 11px 10px;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div#message_feed div.messageblock div.tools span.action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  position: relative;
  border-radius: 50%;
  vertical-align: bottom;
  cursor: pointer;
  margin: 0 0 4px 5px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
div#message_feed div.messageblock div.tools span.action svg {
  width: 14px;
  height: 14px;
  fill: #D9D9D9;
}
@media (hover: hover) {
  div#message_feed div.messageblock div.tools span.action:hover {
    background: var(--theme-bg-hover);
  }
  div#message_feed div.messageblock div.tools span.action:hover svg {
    fill: var(--theme-colour);
  }
}
div#message_feed div.messageblock div.tools span.action:active {
  background: var(--theme-bg-active);
}
div#message_feed div.messageblock div.tools span.action:active svg {
  fill: var(--theme-colour-hover);
}
@media (hover: hover) {
  div#message_feed div.messageblock div.tools span.action#deletemessage:hover {
    background: var(--theme-red-hover);
  }
  div#message_feed div.messageblock div.tools span.action#deletemessage:hover svg {
    fill: var(--colour-red);
  }
}
div#message_feed div.messageblock div.tools span.action#deletemessage:active {
  background: var(--theme-red-active);
}
div#message_feed div.messageblock div.tools span.action#deletemessage:active svg {
  fill: var(--colour-red-hover);
}
div#message_feed div.messageblock div.image {
  width: 15px;
  flex-grow: 0;
  flex-shrink: 0;
  height: auto;
  border: 0px !important;
  margin: 0;
  overflow: visible;
  vertical-align: bottom;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-content: flex-end;
  align-items: flex-start;
  text-align: left;
  visibility: hidden;
}
div#message_feed div.messageblock div.image img {
  margin: 0 0 0 5px;
  float: left;
  height: 20px;
  width: 20px;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: url("https://crewlist.s3.amazonaws.com/images/profile/thumb/defaultprofileagender_60.jpg");
  background-size: cover;
  visibility: hidden;
}
div#message_feed div.messageblock div.image img.business {
  background: url("https://crewlist.s3.amazonaws.com/images/businesses/thumb/defaultbusiness_60.jpg");
  border-radius: 5px;
}
div#message_feed div.messageblock div.image span.loading {
  height: 20px;
  width: 20px;
  bottom: 0px;
  right: 0px;
  margin: 0px 0px 0px 5px;
  display: inline-block;
  background: rgb(232, 232, 232);
  border-radius: 5px;
}
div#message_feed div.messageblock div.message {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: calc(100% - 155px);
}
div#message_feed div.messageblock div.message > span.status {
  color: var(--h4-text);
  font-size: 12px;
  font-weight: 500;
  margin: 2px;
  display: none;
}
div#message_feed div.messageblock div.message > span:not(.status) {
  background: #2081E4;
  padding: 12px 17px;
  vertical-align: bottom;
  display: inline-block;
  border-radius: 15px 5px 5px 15px;
  font-size: 15px;
  color: #FFFFFF;
  text-align: left;
  line-height: 1.4;
}
div#message_feed div.messageblock div.message > span:not(.status).authorname {
  display: none;
  padding: 0 2px;
  color: var(--h4-text) !important;
  background: none !important;
  font-size: 12px;
  font-weight: 500;
}
div#message_feed div.messageblock div.message > span:not(.status).loading {
  width: 60%;
  height: 36px;
  background: rgb(232, 232, 232) !important;
}
div#message_feed div.messageblock div.message > span:not(.status).reply {
  display: inline-block;
  margin: 5px 10px -5px 0;
  background: var(--other-reply-message-bg) !important;
  color: var(--other-reply-message-text) !important;
  border-radius: 15px !important;
  cursor: pointer;
  max-width: calc(100% - 10px);
}
div#message_feed div.messageblock div.message > span:not(.status).reply.deleted span.message::before {
  content: "This message was deleted";
  font-style: italic;
  padding-left: 20px;
  color: #a6a6a7;
  background: url("https://images.crewlist.co/icons/block/colour/a6a6a7") 0 50%/14px no-repeat;
}
div#message_feed div.messageblock div.message > span:not(.status).reply.self {
  background: var(--reply-message-bg) !important;
  color: var(--reply-message-text) !important;
}
div#message_feed div.messageblock div.message > span:not(.status).reply.self.deleted span.message::before {
  color: #c9e1f8;
  background: url("https://images.crewlist.co/icons/block/colour/c9e1f8") 0 50%/14px no-repeat;
}
@media (hover: hover) {
  div#message_feed div.messageblock div.message > span:not(.status).reply:hover {
    opacity: 0.9;
  }
}
div#message_feed div.messageblock div.message > span:not(.status).reply:active {
  opacity: 0.8;
}
div#message_feed div.messageblock div.message > span:not(.status).reply b.author {
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px 5px 0;
  display: inline-block;
}
div#message_feed div.messageblock div.message > span:not(.status).reply b.author::after {
  content: ":";
  font-weight: normal;
}
div#message_feed div.messageblock div.message > span:not(.status).reply b.author img {
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  margin-right: 4px;
  border-radius: 6px;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image) {
  height: 50px;
  background: #FFF;
  border-radius: 10px;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow-x: hidden;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image) span.icon {
  width: 50px;
  background: #b0b0b0;
  height: 50px;
  border-radius: 10px 0 0 10px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image) span.icon svg {
  width: 20px;
  height: 20px;
  fill: #FFF;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image) span.name {
  max-width: 280px;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  padding: 0 15px;
  flex-grow: 1;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  -o-text-overflow: ellipsis;
  width: 100%;
  text-align: left;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image).project {
  height: 70px;
  overflow: hidden;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image).project div.item.project {
  text-align: left;
  padding-left: 15px;
  height: 70px;
  width: 100%;
  column-gap: 10px;
  border-bottom: 0px;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image).project div.item.project div.text {
  flex-shrink: 1;
  padding-right: 15px;
  max-width: 260px;
  min-width: 1px;
  width: unset;
}
div#message_feed div.messageblock div.message > span:not(.status).reply a.attachment:not(.image).project div.item.project div.text > span {
  max-width: 100%;
}
div#message_feed div.messageblock div.message > span:not(.status).reply span.message {
  display: block;
}
div#message_feed div.messageblock div.message > span:not(.status).reply img.attachment {
  display: block;
  max-width: 160px;
  max-height: 120px;
  object-fit: cover;
  filter: brightness(0.8);
  margin-bottom: 2px;
}
div#message_feed div.messageblock div.message > span:not(.status) p {
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: inherit;
  font-size: inherit;
  min-height: 18px;
}
div#message_feed div.messageblock div.message > span:not(.status) ul, div#message_feed div.messageblock div.message > span:not(.status) ol {
  list-style: disc outside none;
  margin: 5px 0;
  padding: 0 0 0 30px;
}
div#message_feed div.messageblock div.message > span:not(.status) ol {
  list-style: decimal;
}
div#message_feed div.messageblock div.message img.attachment {
  max-height: 280px;
  max-width: 280px;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  min-width: 80px;
  min-height: 80px;
  background: url("https://images.crewlist.co/icons/banner/colour/FFFFFF") var(--input-background-colour) 50% 50%/30px no-repeat;
  object-fit: cover;
}
@media (hover: hover) {
  div#message_feed div.messageblock div.message img.attachment:hover {
    filter: brightness(0.9);
    -webkit-filter: brightness(0.9);
  }
}
div#message_feed div.messageblock div.message img.attachment:active {
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}
div#message_feed div.messageblock div.message > a.attachment:not(.image) {
  height: 50px;
  background: #FFF;
  border-radius: 10px;
  margin: 3px 0 5px 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  max-width: 100%;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image) span.icon {
  width: 50px;
  background: #b0b0b0;
  height: 50px;
  border-radius: 10px 0 0 10px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image) span.icon svg {
  width: 20px;
  height: 20px;
  fill: #FFF;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image) span.name {
  max-width: 280px;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  padding: 0 15px;
  flex-grow: 1;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  -o-text-overflow: ellipsis;
  width: 100%;
  text-align: left;
}
@media (hover: hover) {
  div#message_feed div.messageblock div.message > a.attachment:not(.image):hover {
    background: var(--theme-bg-hover);
    box-shadow: none;
  }
  div#message_feed div.messageblock div.message > a.attachment:not(.image):hover span.icon {
    background: var(--theme-colour);
  }
  div#message_feed div.messageblock div.message > a.attachment:not(.image):hover span.name {
    color: var(--theme-colour);
  }
}
div#message_feed div.messageblock div.message > a.attachment:not(.image):active {
  background: var(--theme-bg-active);
  box-shadow: none;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image):active span.icon {
  background: var(--theme-colour-hover);
}
div#message_feed div.messageblock div.message > a.attachment:not(.image):active span.name {
  color: var(--theme-colour-hover);
}
div#message_feed div.messageblock div.message > a.attachment:not(.image).project {
  height: 70px;
  overflow: hidden;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image).project div.item.project {
  text-align: left;
  padding-left: 15px;
  height: 70px;
  width: 100%;
  column-gap: 10px;
  border-bottom: 0px;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image).project div.item.project div.text {
  flex-shrink: 1;
  padding-right: 15px;
  max-width: 260px;
  min-width: 1px;
  width: unset;
}
div#message_feed div.messageblock div.message > a.attachment:not(.image).project div.item.project div.text > span {
  max-width: 100%;
}
div#message_feed div.messageblock div.message > a.attachment.image {
  display: block;
}
div#message_feed div.messageblock div.message > a.attachment.image + span.message, div#message_feed div.messageblock div.message > a.attachment.image + a.attachment.image {
  margin-top: 2px;
}
div#message_feed div.messageblock div.message > span.message.deleted {
  background: var(--reply-message-bg);
}
div#message_feed div.messageblock div.message > span.message.deleted::before {
  content: "This message was deleted";
  font-style: italic;
  padding-left: 20px;
  color: #c9e1f8;
  background: url("https://images.crewlist.co/icons/block/colour/c9e1f8") 0 50%/14px no-repeat;
}
div#message_feed div.messageblock div.message > span.message.notext {
  display: none;
}
div#message_feed div.messageblock div.message.notext > a.attachment:not(.image):last-of-type {
  margin-bottom: 0;
}
div#message_feed div.messageblock.self div.tools {
  direction: rtl;
}
div#message_feed div.messageblock.self div.tools span.message_timestamp {
  padding: 3px 10px 11px 0px;
}
div#message_feed div.messageblock.self div.tools span.action {
  margin: 0 5px 4px 0;
}
div#message_feed div.messageblock.self div.message > span.authorname {
  text-align: right;
}
div#message_feed div.messageblock.self.sending div.message:not(.loading) span.status {
  color: #CCC;
  display: block;
}
div#message_feed div.messageblock.self.sending div.message:not(.loading) span.status::before {
  content: "Sending";
}
div#message_feed div.messageblock.self.sent div.message:not(.loading) span.status {
  color: #999;
  display: block;
}
div#message_feed div.messageblock.self.sent div.message:not(.loading) span.status::before {
  content: "Sent";
}
div#message_feed div.messageblock.self.isread div.message:not(.loading) span.status {
  color: var(--h4-text);
  display: block;
}
div#message_feed div.messageblock.self.isread div.message:not(.loading) span.status::before {
  content: "Seen";
}
div#message_feed div.messageblock.self.error {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div#message_feed div.messageblock.self.error div.message:not(.loading) span.status {
  display: flex;
  margin-bottom: 7px;
  color: var(--colour-red);
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  column-gap: 2px;
}
div#message_feed div.messageblock.self.error div.message:not(.loading) span.status svg {
  display: inline-block;
  height: 11px;
  width: 11px;
  fill: var(--colour-red);
}
div#message_feed div.messageblock.other {
  flex-direction: row;
  margin-left: 0;
  text-align: left;
}
div#message_feed div.messageblock.other div.tools span.message_timestamp {
  text-align: left;
}
div#message_feed div.messageblock.other div.image {
  width: 55px !important;
  align-items: flex-end;
  visibility: visible;
}
div#message_feed div.messageblock.other div.image img {
  margin: 0 10px 0 0;
  float: none;
  height: 30px;
  width: 30px;
  position: relative;
  bottom: 0;
  visibility: hidden;
  right: unset;
}
div#message_feed div.messageblock.other div.image span.loading {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin: 0 10px 0 0;
}
div#message_feed div.messageblock.other div.message > span {
  background: var(--other-message-bg);
  border-radius: 5px 15px 15px 5px;
  color: var(--other-message-text);
}
div#message_feed div.messageblock.other div.message > span.message.deleted {
  background: var(--other-reply-message-bg);
}
div#message_feed div.messageblock.other div.message > span.message.deleted::before {
  color: #a6a6a7;
  background: url("https://images.crewlist.co/icons/block/colour/a6a6a7") 0 50%/14px no-repeat;
}
div#message_feed div.messageblock.other.typing div.message span.message {
  padding: 0px 10px;
  min-height: 36px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
}
div#message_feed div.messageblock.other.typing div.message span.message span.circle {
  width: 8px;
  height: 8px;
  background: #B3B3B3 !important;
  display: inline-block;
  margin: 0 2px;
  border-radius: 50%;
}
div#message_feed div.messageblock.sending div.tools, div#message_feed div.messageblock.sent div.tools, div#message_feed div.messageblock.isread div.tools {
  padding-bottom: 18px;
}
div#message_feed div.messageblock:hover div.tools {
  visibility: visible;
}
div#message_feed div.messageblock.other div.tools span.action#deletemessage, div#message_feed div.messageblock.deleted div.tools span.action#deletemessage, div#message_feed div.messageblock.sending div.tools span.action, div#message_feed div.messageblock.error div.tools span.action, div#message_feed div.messageblock.error div.tools span.message_timestamp {
  display: none !important;
}
div#message_feed.businessfeed div.messageblock div.image {
  width: 35px;
  visibility: visible;
}
div#message_feed.businessfeed div.messageblock.self.last.sent div.image, div#message_feed.businessfeed div.messageblock.self.last.sending div.image, div#message_feed.businessfeed div.messageblock.self.last.isread div.image {
  margin-bottom: 19px;
}
div#message_feed.businessfeed div.messageblock.self.last.error div.image {
  margin-bottom: 26px;
}
div#message_feed div.messageblock.other.last div.image img, div#message_feed.businessfeed div.messageblock.last div.image img {
  visibility: visible;
}
div#message_feed > *:not(div.messageblock.self) + div.messageblock.self div.message, div#message_feed > div.messageblock.self:first-of-type div.message {
  margin-top: 10px;
}
div#message_feed > *:not(div.messageblock.self) + div.messageblock.self div.message > span.message, div#message_feed > div.messageblock.self:first-of-type div.message > span.message {
  border-top-right-radius: 15px;
}
div#message_feed > *:not(div.messageblock.self) + div.messageblock.self div.message > a.attachment + span.message, div#message_feed > *:not(div.messageblock.self) + div.messageblock.self div.message > span.reply ~ span.message, div#message_feed > div.messageblock.self:first-of-type div.message > a.attachment + span.message, div#message_feed > div.messageblock.self:first-of-type div.message > span.reply ~ span.message {
  border-top-right-radius: 5px;
}
div#message_feed > *:not(div.messageblock.other) + div.messageblock.other div.message, div#message_feed > div.messageblock.other:first-of-type div.message {
  margin-top: 10px;
}
div#message_feed > *:not(div.messageblock.other) + div.messageblock.other div.message > span.message, div#message_feed > div.messageblock.other:first-of-type div.message > span.message {
  border-top-left-radius: 15px;
}
div#message_feed > *:not(div.messageblock.other) + div.messageblock.other div.message > a.attachment + span.message, div#message_feed > *:not(div.messageblock.other) + div.messageblock.other div.message > span.reply ~ span.message, div#message_feed > div.messageblock.other:first-of-type div.message > a.attachment + span.message, div#message_feed > div.messageblock.other:first-of-type div.message > span.reply ~ span.message {
  border-top-left-radius: 5px;
}
div#message_feed.selfmultiples div.messageblock.first.self div.message > span.authorname, div#message_feed.othermultiples div.messageblock.first.other div.message > span.authorname {
  display: block;
}
div#message_feed.selfmultiples div.messageblock.first.self div.message > span.authorname + span.reply, div#message_feed.othermultiples div.messageblock.first.other div.message > span.authorname + span.reply {
  margin-top: 0 !important;
}
div#message_feed div.messageblock.self.last + div.messageblock.self.first div.message > span.authorname, div#message_feed div.messageblock.other.last + div.messageblock.other.first div.message > span.authorname {
  padding: 15px 2px 0px 2px;
}

div#message_more, div.loadprevious {
  width: 100%;
  display: inline-flex;
  height: 60px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  background: #f5f5f5;
  text-transform: none;
  border-radius: 0;
}
@media (hover: hover) {
  div#message_more:hover, div.loadprevious:hover {
    background: var(--theme-bg-hover);
    color: var(--theme-colour);
  }
}
div#message_more:active, div.loadprevious:active {
  background: var(--theme-bg-active);
  color: var(--theme-colour-hover);
}

div#message_tools {
  padding: 15px 12px 15px 10px;
  border-top: 1px solid var(--layout-border-colour);
  background: #FFF;
}
div#message_tools div#replying_to {
  padding: 0 0 5px 0;
  margin-top: -8px;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 100%;
  margin-left: 50px;
  margin-right: 57px;
}
div#message_tools div#replying_to div#target {
  max-width: 100%;
}
div#message_tools div#replying_to span#cancel_reply_to {
  width: 20px;
  height: 20px;
  background: var(--colour-red);
  display: flex;
  /* position: relative; */
  top: 10px;
  left: -12px;
  flex-shrink: 0;
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div#message_tools div#replying_to span#cancel_reply_to svg {
  fill: #FFF;
  width: 15px;
  height: 15px;
}
@media (hover: hover) {
  div#message_tools div#replying_to span#cancel_reply_to:hover {
    background: var(--colour-red-hover);
  }
}
div#message_tools div#replying_to span#cancel_reply_to:active {
  background: #A52626;
}
div#message_tools div#replying_to.no_sendas {
  margin-left: 0px;
}
div#message_tools div#replying_to span.replying_to_text {
  font-size: 11px;
  font-weight: 500;
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  height: 18px;
  color: #407EC9;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
div#message_tools div#replying_to span.replying_to_text svg {
  width: 10px;
  height: 10px;
  fill: #407ec9;
  margin-right: 3px;
}
div#message_tools div#replying_to span.message {
  display: inline-block;
  font-size: 14px;
  background: var(--other-reply-message-bg);
  color: var(--other-reply-message-text);
  border-radius: 15px !important;
  padding: 10px 12px;
  font-family: var(--font-family-sans);
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  height: 37px;
}
div#message_tools div#replying_to span.message.self {
  background: var(--reply-message-bg);
  color: var(--reply-message-text);
}
div#message_tools div#replying_to span.message.self i.file {
  padding-left: 20px;
  background: url("https://images.crewlist.co/icons/cv/colour/eff6fd") 0 50%/15px no-repeat;
}
div#message_tools div#replying_to span.message.self i.image {
  padding-left: 20px;
  background: url("https://images.crewlist.co/icons/banner/colour/eff6fd") 0 50%/15px no-repeat;
}
div#message_tools div#replying_to span.message.self i.booking {
  padding-left: 20px;
  background: url("https://images.crewlist.co/icons/bookings/colour/eff6fd") 0 50%/15px no-repeat;
}
div#message_tools div#replying_to span.message.deleted::after {
  content: "This message was deleted";
  font-style: italic;
  padding-left: 20px;
  color: #a6a6a7;
  background: url("https://images.crewlist.co/icons/block/colour/a6a6a7") 0 50%/14px no-repeat;
}
div#message_tools div#replying_to span.message.deleted.self::after {
  color: #c9e1f8;
  background: url("https://images.crewlist.co/icons/block/colour/c9e1f8") 0 50%/14px no-repeat;
}
div#message_tools div#replying_to span.message b.author {
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px 0px 0;
  display: inline-block;
}
div#message_tools div#replying_to span.message b.author::after {
  content: ":";
  font-weight: normal;
}
div#message_tools div#replying_to span.message b.author img {
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  margin-right: 4px;
  border-radius: 6px;
}
div#message_tools div#replying_to span.message i.file {
  padding-left: 20px;
  background: url("https://images.crewlist.co/icons/cv/colour/8c8c8c") 0 50%/15px no-repeat;
}
div#message_tools div#replying_to span.message i.image {
  padding-left: 20px;
  background: url("https://images.crewlist.co/icons/banner/colour/8c8c8c") 0 50%/15px no-repeat;
}
div#message_tools div#replying_to span.message i.booking {
  padding-left: 20px;
  background: url("https://images.crewlist.co/icons/bookings/colour/8c8c8c") 0 50%/15px no-repeat;
}
div#message_tools div#controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: space-between;
  align-items: flex-end;
}
div#message_tools div#controls span.sendas {
  margin-right: 0;
  flex-shrink: 0;
  flex-grow: 0;
}
div#message_tools div#controls div.text {
  flex-grow: 1;
  display: inline-flex;
  flex-direction: column;
  /*
  div#attachmentholder.file a {
  	background: var(--input-bg);
  	height: 50px;
  	display: flex;
  	padding: 0 20px 0 0px;
  	border: 2px solid var(--list-object-border);
  	border-radius: 5px;
  	font-size: 14px;
  	font-weight: 500;
  	color: var(--h4-text);
  	flex-direction: row;
  	flex-wrap: nowrap;
  	align-content: center;
  	justify-content: flex-start;
  	align-items: center;
  	cursor: pointer;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;

  	span.icon {
  		display: inline-block;
  		background: url('https://images.crewlist.co/icons/cv/colour/999999') var(--list-object-border) 50% 50% / 24px no-repeat;
  		height: 46px;
  		width: 48px;
  		margin-right: 15px;
  		flex-shrink: 0;
  	}

  	span.name {
  		max-width: 280px;
  		text-overflow: ellipsis;
  		-webkit-text-overflow: ellipsis;
  		white-space: nowrap;
  		overflow-x: hidden;
  		-o-text-overflow: ellipsis;
  	}
  }
  */
}
div#message_tools div#controls div.text div#attachmentholder {
  margin-bottom: 10px;
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 10px;
}
div#message_tools div#controls div.text div#attachmentholder div.attachment_type {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  column-gap: 10px;
  row-gap: 10px;
}
div#message_tools div#controls div.text div#attachmentholder div.attachment_type:empty {
  display: none;
}
div#message_tools div#controls div.text div#attachmentholder span.file {
  height: 50px;
  background: #FFF;
  border-radius: 10px;
  margin: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: calc(50% - 5px);
}
div#message_tools div#controls div.text div#attachmentholder span.file span.thumb {
  width: 50px;
  background: #b0b0b0;
  height: 50px;
  border-radius: 10px 0 0 10px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.thumb svg {
  width: 20px;
  height: 20px;
  fill: #FFF;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.text {
  width: 1px;
  flex-grow: 1;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  justify-content: center;
  align-items: flex-start;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.text span.name, div#message_tools div#controls div.text div#attachmentholder span.file span.text span.error {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  padding: 0 10px 0 15px;
  flex-grow: 1;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  -o-text-overflow: ellipsis;
  width: 100%;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.text span.error {
  font-size: 12px;
  align-content: center;
  align-items: center;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.text span.error svg.loading_spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  margin-right: 3px;
  vertical-align: top;
  top: 1px;
  flex-shrink: 0;
  flex-grow: 0;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.text span.error span.upload_status_holder {
  height: 6px;
  background: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  flex-grow: 1;
  margin-left: 5px;
}
div#message_tools div#controls div.text div#attachmentholder span.file span.text span.error span.upload_status_holder span.upload_bar {
  height: 100%;
  width: 50%;
  background: var(--theme-colour);
  display: inline-block;
}
div#message_tools div#controls div.text div#attachmentholder span.file.failed span.thumb {
  background: var(--colour-red-hover);
}
div#message_tools div#controls div.text div#attachmentholder span.file.failed span.text span.name, div#message_tools div#controls div.text div#attachmentholder span.file.failed span.text span.error {
  color: var(--colour-red-hover);
}
div#message_tools div#controls div.text div#attachmentholder span {
  display: inline-block;
}
div#message_tools div#controls div.text div#attachmentholder span img {
  width: 80px;
  height: 80px;
  background: url("https://images.crewlist.co/icons/banner/colour/FFFFFF") #b0b0b0 50% 50%/30px no-repeat;
  object-fit: cover;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
div#message_tools div#controls div.text div#attachmentholder span.uploading img {
  filter: opacity(0.5);
  -webkit-filter: opacity(0.5);
}
div#message_tools div#controls div.text div#attachmentholder span.image svg.loading_spinner {
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 30px;
  left: 30px;
  fill: rgba(255, 255, 255, 0.3) !important;
}
div#message_tools div#controls div.text div#attachmentholder span.image span.upload_status_holder {
  height: 6px;
  background: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  width: 60px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
div#message_tools div#controls div.text div#attachmentholder span.image span.upload_status_holder span.upload_bar {
  height: 100%;
  width: 50%;
  background: var(--theme-colour);
  display: inline-block;
}
div#message_tools div#controls div.text div#attachmentholder span.image span.error_frame {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(206, 48, 48, 0.2);
  border-radius: 10px;
}
div#message_tools div#controls div.text div#attachmentholder span.image span.error_frame svg {
  display: block;
  fill: var(--colour-red);
  width: 20px;
  height: 20px;
  position: absolute;
  top: 30px;
  left: 30px;
  border-radius: 10px;
  background: #FFF;
}
div#message_tools div#controls div.text div#attachmentholder span span.remove {
  width: 20px;
  height: 20px;
  display: inline-flex;
  background: var(--colour-red);
  border-radius: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -8px;
  top: -8px;
  cursor: pointer;
}
div#message_tools div#controls div.text div#attachmentholder span span.remove svg {
  width: 15px;
  fill: #FFF;
}
@media (hover: hover) {
  div#message_tools div#controls div.text div#attachmentholder span span.remove:hover {
    background: var(--colour-red-hover);
  }
}
div#message_tools div#controls div.text div#attachmentholder span span.remove:active {
  background: #A52626;
}
div#message_tools div#controls div.text div#attachmentholder span.uploaded img {
  filter: none;
  -webkit-filter: none;
}
div#message_tools div#controls div.text div#attachmentholder span.uploaded span.upload_status_holder {
  display: none;
}
div#message_tools div#controls div.text span.authorname {
  height: 15px;
  display: block;
  font-size: 11px;
  color: #407ec9;
  font-weight: 500;
  top: 8px;
  left: 17px;
  z-index: 2;
  max-width: calc(100% - 60px);
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  margin-bottom: -15px;
}
div#message_tools div#controls div.text span.authorname + textarea {
  padding: 20px 40px 6px 15px;
}
div#message_tools div#controls div.text textarea {
  display: block;
  overflow: scroll;
  resize: none;
  height: 50px;
  min-height: unset !important;
  max-height: 250px;
  padding: 14px 40px 12px 15px;
  margin-bottom: 0;
}
div#message_tools div#controls div.text span#addattachment {
  display: flex;
  width: 34px;
  height: 34px;
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 50%;
  cursor: pointer;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
div#message_tools div#controls div.text span#addattachment svg {
  width: 17px;
  height: 17px;
  fill: #666666;
}
div#message_tools div#controls div.text span#addattachment input {
  display: none;
}
@media (hover: hover) {
  div#message_tools div#controls div.text span#addattachment:hover {
    background: #e1e1e1;
  }
}
div#message_tools div#controls div.text span#addattachment:active {
  background: #d4d4d4;
}
div#message_tools div#controls div.buttons {
  padding-left: 10px;
  flex-grow: 0;
  flex-shrink: 0;
}
div#message_tools div#controls div.buttons span#sendmessage {
  display: inline-flex;
  width: 44px;
  height: 44px;
  background: var(--colour-blue-25);
  border-radius: 50%;
  margin-bottom: 3px;
  cursor: default;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
div#message_tools div#controls div.buttons span#sendmessage svg {
  width: 16px;
  fill: #FFF;
  margin-right: 2px;
  opacity: 0.5;
}
div#message_tools div#controls div.buttons span#sendmessage.active {
  background: var(--colour-blue);
  cursor: pointer;
}
div#message_tools div#controls div.buttons span#sendmessage.active svg {
  opacity: 1;
}
@media (hover: hover) {
  div#message_tools div#controls div.buttons span#sendmessage.active:hover {
    background: var(--colour-blue-hover);
  }
}
div#message_tools div#controls div.buttons span#sendmessage.active:active {
  background: var(--colour-blue-active);
}

div#search_panel[data-tab=messages] {
  padding-bottom: 0px;
  overflow-y: unset;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}
div#search_panel[data-tab=messages] div#message_contacts {
  height: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll;
  border-top: 1px solid var(--layout-border-colour);
  margin-top: 10px;
  padding-bottom: 60px;
}
div#search_panel[data-tab=messages] div#message_contacts div.item {
  padding-left: 15px;
}
div#search_panel[data-tab=messages] div#message_contacts div.item div.text {
  padding-right: 15px;
}
div#search_panel[data-tab=messages] div#message_contacts div.item span.counter {
  background: #CE3030;
  font-size: 11px;
  height: 20px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 10px;
  color: #FFF;
  font-weight: 700;
  margin: 0 15px 0 -15px;
  line-height: 11.5px;
}
div#search_panel[data-tab=messages] div#message_contacts div.item span.counter:empty {
  display: none;
}

@media (max-width: 850px) {
  div#search_panel[data-tab=messages] {
    flex-grow: 1;
    border-bottom: none;
    display: none;
  }
  div#search_panel[data-tab=messages] div#message_contacts {
    margin-left: -20px;
    width: 100vw;
    margin-top: 0;
  }
  div#search_panel[data-tab=messages] div#message_contacts::before {
    content: "";
    width: 100vw;
    height: 100px;
    position: fixed;
    box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.1);
    margin-top: -100px;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
  }
  div#search_panel[data-tab=messages][data-show=contacts] {
    display: flex;
  }
  div#search_panel[data-tab=messages][data-show=contacts] + div#body {
    display: none;
  }
  div#message_header span#return_contacts_list {
    display: inline-flex;
  }
  div#message_feed div.messageblock div.message img.attachment {
    max-width: 100%;
  }
  div#message_tools {
    padding-bottom: 5px;
  }
}
/* _loaders.scss */
svg.loading_spinner {
  fill: #f5f5f5 !important;
  animation: rotation 0.75s infinite linear;
}

/* test */

/*# sourceMappingURL=suite_1.0.1.css.map */