@charset "UTF-8";
@import url(rrp_brand.css?v=0.02);

:root {
    /* color-scheme: light dark; */
}

html, body {
  min-height: 100%;
  height: 100%;
  min-width: 605px;
  padding: 0;
  margin: 0;
}


html {
    font-size: 110%;
}

body {
    font-family: "Roboto", sans-serif;
	color: light-dark( var(--wa-color-gray-10), var(--wa-color-gray-95) );
	font-size: 1em;
    background-color: light-dark( var(--wa-color-gray-90), var(--wa-color-gray-05) );
}

main {
    min-height: 800px;
    width: 94%;
    margin: 3em auto;
}

h1, h2 {
	font-family: 'EB Garamond', serif;
    font-weight: 500;
    color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
}

h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
    margin: 0.4em;
}

h1 {
    font-size: 3em;
	text-align: center;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

h2 {
    font-size: 2em;
    text-align: center;
    margin: .2em;
}

h3 {
    font-size: 2em;
}

h4 {
    font-size: 1.75em;
}

h5 {
    font-size: 1.5em;
}

h6 {
    font-size: 1.3em;
}

p {
   text-indent: 5px; 
   margin: 0.25em auto;
}

a {
    color: light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-70) );
    cursor: pointer;
}

a:hover {
    color: light-dark( var(--wa-color-indigo-30), var(--wa-color-tan-50) );
}

button {
    color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-05) );
    background-color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
    border: 1px solid;
    border-color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
    padding: 0.5em 0.75em;
    margin: 1em;
    font-size: 1em;
    border-radius: 0.1875em;
}

button:hover {
    background-color: light-dark( var(--wa-color-gray-20), var(--wa-color-tan-40) );
    color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-95) );
}

button.password_show {
    color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-40) );
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0 0.5em;
}

button.password_show:hover {
    color: light-dark( var(--wa-color-gray-30), var(--wa-color-gray-30) );
}

button.icon, a.icon {
    margin: 0.5em;
    background-color: transparent;
    border: none;
    color: light-dark( var(--wa-color-indigo-50), var(--wa-color-tan-50) );
    padding: 0.2em;    
}

button.icon:hover, a.icon:hover {
    color: light-dark( var(--wa-color-indigo-30), var(--wa-color-purple-70) );    
}

button.filter {
    margin: 0.25em 0.1em;
    padding: 0.1em 0.2em;    
    background-color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
    color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-05) );
    border: solid 1px;
    border-color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
}

button.filter:hover {
    background-color: light-dark( var(--wa-color-gray-20), var(--wa-color-tan-40) );
    color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-95) );
}

.red {
    color: light-dark( var(--wa-color-red-50), var(--wa-color-red-50) );
}

.hide {
    display: none;
}