@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --light: #ffffff;
  --dark: #44bbe6;
  --link: red;
  --panel-bg: #515151;
  --text: #e9e9e9;
  --co-brand: #44bbe6;
}

#pedalapp {}

#pedalapp,
#pedalapp h1,
#pedalapp h2,
#pedalapp h3,
#pedalapp h4,
#pedalapp p,
#pedalapp li,
#pedalapp a
{
  --font: 'Montserrat', sans-serif !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
}
#pedalapp h1 {
  font-weight: 600;
}

#pedalapp .phone-screen-wrapper {
  position: relative;
  height: 360px;
  width: 190px;
/*  margin-right: 16px;*/
  margin: 0 auto;
}

#pedalapp .phone-screen-wrapper img {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  opacity: 1;
}

#pedalapp .phone-screen-wrapper #phone_video_wrapper {
  box-sizing: border-box;
  height: calc(100% - 16px);
  margin: 8px;
  position: absolute;
  top: 0px;
  left: 0px;
}
#phone_video_wrapper video {
  height: 100%;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
}

.two-column {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
  gap: 32px;
  max-width: 100%;
  margin: 4rem 0 2rem;
}

.two-column ul {
  width: 400px;
}

li { margin-bottom: 1.5rem; }
li:last-of-type { margin-bottom: 0; }
sup {
  display: inline-block;
  font-size: 0.5em;
  transform: translateY(-1em);
}

p.quote {
  font-style: italic;
  opacity: 0.8;
  display: block;
  border: 1px solid var(--dark);
  padding: 2rem;
  margin: 2rem 0;
}

p.quote:before {
  display: inline-block;
  content: '"';
  color: var(--dark);
  font-weight: 600;
  margin: 0 0.5rem;
}
p.quote:after {
  display: inline-block;
  content: '"';
  color: var(--dark);
  font-weight: 600;
  margin: 0 0.5rem;
}

h2.center {
  text-align: center;
}

body {
  --panel-bg: #ffffff;
}

h2 > img {
  display: inline-block;
  height: 1.3rem;
  margin-right: 0.54rem;
  transform-origin: bottom;
  transform: translateY(2px);
  
} 

p, li {font-weight: 400 !important;}

img.bgimage {
  margin: 0;
  margin-bottom: -0.5rem;
}
section {
  
  background-image: linear-gradient(180deg,var(--light),var(--dark));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(100vh);
}

#cta {
  border: 3px solid var(--co-brand);
  border-radius: 16px;
  padding: 2rem;
  margin: 0 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
}
#cta-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#cta p {
  font-size: 1.1rem;
  font-weight: 400;
}

.panel:has(#cta) h2,
.panel:has(#cta) p {
  margin-left: 2rem;
}
#cta a.button, #cta button.button {
  height: 80px;
}
#cta button.button {
  background: transparent;
  color: #999;
  border-color: #999;
}
#cta button.button:hover {
  color: var(--co-brand);
  border-color: var(--co-brand);
}

a, a:visited { color: var(--link); }

a.text-link {
  text-decoration: underline;
}
a.text-link:hover {
  color: var(--co-brand);
}
.content {
  background: var(--panel-bg);
  width: auto;
  margin: 0 1rem;
  padding: 4rem;
}

a.button, button.button {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--co-brand);
  background: var(--co-brand);
  padding: 1rem 2rem 1rem 1rem;
  color: #f3f3f3;
  border-radius: 8px;
  font-size: inherit;
  width: 100%;
  opacity: 0.8;
  transition: 100ms linear;
  cursor: pointer;
}

a.button:hover, button.button:hover {
  opacity: 1;
  color: #fff;
}

a.button .fa, button.button .fa {
  margin-right: 1rem;
  font-size: 1.5rem;
}

.panel {
  width: 100%;
  max-width: 700px;
  margin: 2rem auto;
}

.panel.universalextras .bg-image {
  
}

.panel hr {
  border: 0;
  border-top: 1px solid var(--co-brand);
  margin: 2rem 0;
}
.panel:has(table) {
  width: auto;
}

.inline-logo {
  display: inline;
  height: 1em;
}
.panel h1 .inline-logo {
  display: inline;
  height: 2.5em;
}

.panel h1 {
  margin: 0 0 1rem 0;
  font-size: 2rem;
  color: var(--co-brand);
}
.panel h1 span {
  font-size: 0.75em;
  color: var(--dark);
}
.panel h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  color: var(--dark);
}
.panel ul + h2 {margin-top: 2rem;}


h2.ue-bullets {
  position: relative;
}
h2.ue-bullets:before {
  content: '';
  display: inline-block;
  background-image: url(../img/unversalextras/Universal-Extras-Bullet.png);
  background-size: contain;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 8px;
  transform-origin: bottom;
  transform: translateY(7px);
/*
  position: absolute;
  top: 4px;
  left: -1.75rem;
*/
} 


.panel h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: var(--dark);
}
.dark .panel h3 {
  color: var(--text);
  background: none;
}

.panel:has(table) h1 {
  display: block;
  background: var(--co-brand);
  color: #e9e9e9;
  font-size: 1.5rem;
  margin: 0;
  padding: 0 1rem;
  opacity: 0.75;
}

.panel p {
  margin-top: 1rem;
} 
.panel p.smaller {
  font-style: italic;
  color: var(--co-brand);
} 
.panel:has(table) table + p {
  display: block;
  background: var(--co-brand);
  color: white;
  font-size: 1.0rem;
  margin: 0;
  padding: 0 1rem;
  opacity: 0.75;
}
.panel table {
}
.panel table thead tr {
  background: var(--co-brand);
  opacity: 0.9;
}
.panel table thead td {
  color: white;
  text-align: center;
}
.panel table tbody {}

.panel table tr {
  display: grid;

  grid-template-columns: 
    minmax(50px, 1fr) 
    minmax(100px, 2fr)
    minmax(100px, 2fr)
    minmax(100px, 2fr)
    minmax(50px, 1fr)
    minmax(150px, 3fr);

  grid-template-areas: 
    "td_1 td_2 td_3 td_3 td_6 td_6"
    "td_1 td_2 td_4 td_5 td_7 td_8";
  
  justify-content: center;
  align-items: center;
}
.panel table tr td {
  height: 100%;
}
.panel table tr td:nth-child(1) { grid-area: td_1; }
.panel table tr td:nth-child(2) { grid-area: td_2; }
.panel table tr td:nth-child(3) { grid-area: td_3; }
.panel table tr td:nth-child(4) { grid-area: td_4; }
.panel table tr td:nth-child(5) { grid-area: td_5; }
.panel table tr td:nth-child(6) { grid-area: td_6; }
.panel table tr td:nth-child(7) { grid-area: td_7; }
.panel table tr td:nth-child(8) { grid-area: td_8; }

.panel ul.ue-bullets li {
  list-style: none ;
  position: relative;
  margin-left: 16px;
}

ul.ue-bullets li:before {
  content: '';
  background-image: url(../img/unversalextras/Universal-Extras-Bullet.png);
  background-size: contain;
  width: 1.05rem;
  height: 1.05rem;
  position: absolute;
  top: 4px;
  left: -1.75rem;
}

body.small .panel table tr {}
.panel table td {
  padding: 0.5rem;
  border: 1px solid #99999966;
  overflow-x: hidden;
  color: var(--text);
}
.panel table td.c {
  text-align: center;
}
.panel table td.r {
  text-align: right;
}
.panel table thead td.r {
  text-align: center;
}

p.quote {
  text-align: center;
  font-style: italic;
  color: #777;
  font-size: 1.2rem;
}

.panel ul {
  margin-left: 1rem;
}
.panel ul li {
  color: var(--text);
  list-style: disc;
}
.panel li ul li {
  color: var(--text);
  list-style: square;
}

#pdf {
  padding: 2rem;
  width: auto;
  margin: 0rem auto;
}
#pdflinks {
}
.pdflink {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  border-radius: 1rem;
  background: #c11c1c;
  background: var(--co-brand);
  color: white;
  height: 100%;
  padding: 2rem;
}
.pdflink h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  color: white;
}
.pdflink h1 img {
  height: 2rem;
  margin-right: 1rem;
}
.pdflink a {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #c11c1c;
  border: 3px solid #f3f3f3;
  border-radius: 0.0rem 0.75rem 0.75rem 0.75rem;
  padding: 2rem;
  z-index: 2;
  box-shadow: 0 0 10px black;
  transition: 250ms linear;
  
}
.pdflink a:hover {
  border: 3px solid #fff;
  background: #d82626;
}
.pdflink a .tab {
  border-radius: 0.7rem 0.7rem 0.0rem 0.0rem;
  content: "";
  width: 100px;
  height: 27px;
  border: 3px solid #f3f3f3;
  background: #c11c1caa;
  position: absolute;
  display: block;
  top: -28px;
  left: -3px;
  z-index: -1;
  transition: 250ms linear;
}
.pdflink a:hover .tab {
  border: 3px solid #fff;
  background: #343434;
}
.pdflink a.pdf-download:hover .tab {
  border: 3px solid #fff;
  background: #958d71;
}
.pdflink a:hover .tab .fa {
  transition: 250ms linear;
}
.pdflink a .tab .fa:nth-child(1){
  transition-delay: 0ms;
}
.pdflink a .tab .fa:nth-child(2){
  transition-delay: 50ms;
}
.pdflink a .tab .fa:nth-child(3){
  transition-delay: 100ms;
}
.pdflink a:hover .tab .fa:nth-child(1){
  color: #d94040;
}
.pdflink a:hover .tab .fa:nth-child(2){
  color: #d9bc40;
}
.pdflink a:hover .tab .fa:nth-child(3){
  color: #4bcb50;
}
.pdflink a.pdf-open {
  border-radius: 0.0rem 0.0rem 0.75rem 0.75rem;
}
.pdflink a.pdf-open .tab {
  padding-left: 0.5rem;
  font-size: 0.85rem;
  width: calc(100% + 6px);
  color: white;
}

.pdflink a h3, 
.pdflink a p {
  text-align: center;
  color: white;
  margin: 0;
}

img.bgimage {
  width: 100%;
  object-position: center center;
  object-fit: contain;
}