/*
	RiSE overlay iframe template stylesheet overrides
*/

/* Load Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Raleway:ital,wght@0,600;1,600&display=swap");

/* ---------- Custom properties ---------- */

:root {
  color-scheme: light dark;

  /* Weights */
  --font-weight-text: normal;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: 600;
  --font-weight-link: 600;
  --font-weight-label: 600;
  --font-weight-button: 600;
  --font-weight-button-link: 700;

  /* Fonts */
  --font-family-text: "Open Sans", sans-serif;

  /* Colors */
  --color-primary: #910028; /* Brand red */
  --color-primary-light: #b80235;
  --color-primary-dark: #5d0000;

  /* Based on Open Color: https://yeun.github.io/open-color/ */
  --white:   #fff;
  --gray-0:  hsl(202deg, 1%, 98%);  /* #fafafa */
  --gray-1:  hsl(202deg, 2%, 95%);  /* #f2f2f3 */
  --gray-2:  hsl(202deg, 3%, 93%);  /* #ededee */
  --gray-3:  hsl(202deg, 3%, 89%);  /* #e2e3e4 */
  --gray-4:  hsl(202deg, 6%, 83%);  /* #d1d4d6 */
  --gray-5:  hsl(202deg, 8%, 71%);  /* #afb7bb */
  --gray-6:  hsl(202deg, 11%, 56%); /* #82929b */
  --gray-7:  hsl(202deg, 14%, 44%); /* #607480 (AA) */
  --gray-8:  hsl(202deg, 17%, 31%); /* #42535d (AAA) */
  --gray-9:  hsl(202deg, 19%, 23%); /* #2d3b43 */
  --gray-10: hsl(202deg, 20%, 18%); /* #253037 */
  --gray-11: hsl(202deg, 22%, 15%); /* #1e282f */
  --gray-12: hsl(202deg, 24%, 12%); /* #182026 */
  --black:   hsl(202deg, 25%, 9%);  /* #11181d */

  --color-secondary-light: var(--gray-8); /* Brand teal #42535d */
  --color-secondary: var(--gray-9); /* Dark teal */
  --color-secondary-dark: var(--gray-10);

  --color-text: var(--gray-9);        /* Previous: #424a52; or test #2e3f49 */
  --color-text-light: var(--gray-7);  /* Previous: #42535d; or test #445c69 */
  --color-text-dark: var(--gray-10);   /* or test #161e22 */
  --color-heading: var(--gray-9);

  --color-text-bright: var(--gray-1); /* For dark backgrounds */
  --color-text-brighter: var(--gray-0);
  --color-text-brightest: var(--white);

  --color-link: var(--color-primary);
  --color-link-light: var(--color-primary-light);
  --color-link-dark: var(--color-primary-dark);
  --color-link-hover: var(--color-primary);

  --color-button-background: var(--color-primary);
  --color-button-background-hover: var(--color-primary-light);
  --color-button-text: var(--color-text-brightest);
  --color-button-text-hover: var(--color-text-brightest);

  --color-background: var(--white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--gray-3);
    --color-text-light: var(--gray-4);
    --color-text-dark: var(--gray-1);
    --color-heading: var(--gray-3);

    --color-link: #7abfff;
    --color-link-light: #9ccfff;
    --color-link-dark: #57aeff;
    --color-link-hover: #7abfff;

    --color-background: var(--black);
  }
}


body {
  background-color: var(--color-background);
  color: var(--color-text);
	font-family: var(--font-family-text);
	font-weight: 400;
}

td.addresslabel {
  vertical-align: top;
}

/* Headings */
.PageTitle,
.PanelTitle,
h2.panel-title {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-variant-ligatures: no-common-ligatures; /* Prevent "ff" ligatures */
  color: var(--color-heading);
}
.SectionLabel {
  color: var(--color-heading);
}

a:focus,
a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.Info {
  color: var(--color-text);
}

label,
.Label,
.PanelFieldLabelFont {
  color: var(--color-text-dark);
  font-weight: var(--font-weight-label);
}


/* Match regular submit button */
input.TextButton.Save,
input.TextButton.SaveAndClose,
input.TextButton.PrimaryButton {
	-webkit-appearance: none;
	-moz-appearance: none;
  position: relative;
  display: inline-block;
	margin: 0;
	padding: 0.6em 0.9em;
	cursor: pointer;
	border: 1px solid #4c4c4c;
	border-radius: 2.14rem;
	color: #111;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 1px rgba(255,255,255,0.8);
	text-decoration: none;
	background-color: #cfcfcf;
	background-image: -webkit-linear-gradient(top, #fff 0%, #cfcfcf 100%);
	background-image: -moz-linear-gradient(top, #fff 0%, #cfcfcf 100%);
	background-image: -o-linear-gradient(top, #fff 0%, #cfcfcf 100%);
	background-image: -ms-linear-gradient(top, #fff 0%, #cfcfcf 100%);
	background-image: linear-gradient(top, #fff 0%, #cfcfcf 100%);
}

	input.TextButton.Save:hover,
	input.TextButton.Save:active,
	input.TextButton.SaveAndClose:hover,
	input.TextButton.SaveAndClose:active,
	input.TextButton.PrimaryButton:hover,
	input.TextButton.PrimaryButton:active {
    background: #cfcfcf none;
    border: 1px solid #4c4c4c;
    color: #111;
	}
	input.TextButton.Save[disabled],
	input.TextButton.SaveAndClose[disabled],
	input.TextButton.PrimaryButton[disabled] {
		opacity: 0.4;
		cursor: default;
	}

/* Make cancel button a link */
input.TextButton.Cancel,
input.TextButton[title='Cancel'],
input.TextButton[value='Cancel'] {
  margin-left: 0.6em;
  background-color: transparent;
  border: none;
  border-radius: 0;
  letter-spacing: normal;
	font-family: var(--font-family-text);
  color: var(--color-link);
}
  input.TextButton.Cancel:hover,
  input.TextButton[title='Cancel']:hover,
  input.TextButton[value='Cancel']:hover,
  input.TextButton.Cancel:active,
  input.TextButton[title='Cancel']:active,
  input.TextButton[value='Cancel']:active {
    text-decoration:underline;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }


/* Form spacing */

#ctl00_TemplateBody_contactSignIn1_commandButtons {
  margin-top: 1.5rem;
}


/* Calendar popup table */

.RadPicker_Default a.rcCalPopup { /* Toggle */
  margin-left: 1rem !important;
  background: url("../images/calendar-alt-solid.svg") no-repeat;
  background-size: auto 20px;
}
@media (prefers-color-scheme: dark) {
  .RadPicker_Default a.rcCalPopup {
    background-image: url("../images/calendar-alt-solid-dark.svg");
  }
}

.RadPicker_Default a.rcCalPopup:hover,
.RadPicker_Default a.rcCalPopup:focus,
.RadPicker_Default a.rcCalPopup:active {
  background-position: 0 0;
  opacity: 0.7;
}

.RadCalendar,
.RadCalendarMonthView {
  background-color: #f4f4f4;
}

.RadCalendar .rcRow td,
.RadCalendar .rcRow th {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Month arrows */
.RadCalendar .rcTitlebar .rcPrev {
  background: url("../images/chevron-left-solid.svg") no-repeat;
  background-size: auto 15px;
}
.RadCalendar .rcTitlebar .rcNext {
  background: url("../images/chevron-right-solid.svg") no-repeat;
  background-size: auto 15px;
}
.RadCalendar .rcTitlebar .rcFastPrev {
  background: url("../images/chevron-double-left-solid.svg") no-repeat;
  background-size: auto 15px;
}
.RadCalendar .rcTitlebar .rcFastNext {
  background: url("../images/chevron-double-right-solid.svg") no-repeat;
  background-size: auto 15px;
}
