@charset "UTF-8";
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
    This is essentially a little CSS trick to allow us to have expandable portions
    without worrying about Elm messages. Here is how it works.
    * Heading - This is the part that you wish to be able to click to
        expand/collapse the content, it can have any HTML in it you like.
    * Content - This is the part that you wish to be hidden and then displayed
    whenever the Heading is clicked.

    Then to make your collapsible content take the following steps:
    1. Think of an id for the checkbox, it can be anything but should be unique,
        let's here call it <checkboxuniqueid>
    2. Wrap your Heading in an Html.label element.
    3. Give the 'label' element an Attribute.for_ <checkboxuniqueid>, this means
        when you click the label (which contains Heading) the checkbox will be
        checked/unchecked.
    4. Put a checkbox, directly before the Content, the checkbox *must* be the
        sibling directly before the Content, but note that it can be anywhere
        in relation to the Label/Heading.
    5. The checkbox should obviously have the id <checkboxuniqueid> and the
        class '.expandable-checkbox', whilst Content should be given the
        class '.expandable-content'.

    That's it. The css below will make the checkbox invisible (it still gets
    checked/unchecked by clicking on the Label/Heading).

    As an example something like:
    let
        -- If you have more than one of these on the page then you cannot
        -- hard code this as a simple string, you'll have to generate a
        -- unique code for each one.
        checkboxuniqueid = "alskdjf;lakdjf"
    in
    div
        []
        [ Html.input
            [ Attributes.type_ "checkbox"
            -- Setting this to False means that the content will be collapsed by
            -- default, setting it to false will mean the opposite.
            , Attributes.checked False
            , Attributes.id checkboxuniqueid
            , Attributes.class "expandable-checkbox"
            ]
            []
        , Html.label
            [ Attributes.for checkboxuniqueid ]
            [ text "Clickable heading" ]
        , Html.ul
            [ Attributes.class "expandable-content" ]
            -- Make sure this has some content.
            [ Html.li
                []
                [ text "1st item" ]
            , ... lots more items
            ]
        ]

    In this example the checkbox and content are directly after the label but
    that is not necessary, all that is necessary is that the content is the sibling
    directly after the checkbox (for the ~ below to work).

    One thing to note is that the expandable part should have *some* content.
    It's easy to use this for a list, and so if the list is empty you end up with
    no content. When that happens clicking the expander appears to the user to
    have no effect. In reality it is opening up the expandable content, it's just
    that there is no expandable content. So, just make sure that there is *some*
    content there, if you're displaying a list, take care of the empty list, you
    probably want some explanation there.

    Important note: In this example, the label is after the input, this means
    that we can select the label based on whether the check box is checked or
    not, so that we can change the label using content attribute in CSS. For
    example we can do something like:

    .expandable-checkbox:not(:checked) ~ .session-title {
        label::after {
            content: " more " image("down-green-arrow.svg");
        }
    }

    .expandable-checkbox:checked ~ .session-title {
        label::after {
            content: " fewer " image("up-green-arrow.svg");
        }
    }

    As a final note, the exanded part, in the example above the Html.ul,
    can be wrapped up in a label and pointed to the same check box. This will mean that you can collapse the content by clicking anywhere within the expanded part.

*/
.expandable-checkbox {
  display: none;
}

.expandable-checkbox:not(:checked) ~ .expandable-content {
  display: none;
}

.main-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}
.main-leaderboard-table th:first-of-type, .main-leaderboard-table td:first-of-type {
  text-align: left;
}
.main-leaderboard-table td, .main-leaderboard-table th {
  text-align: center;
  padding: 0.5rem;
}
.main-leaderboard-table tbody tr:nth-child(odd) {
  background-color: #eaeaea;
}
.main-leaderboard-table tbody tr:nth-child(even) {
  background-color: #acacae;
}

a, button {
  cursor: pointer;
}

html,
body {
  min-height: 100vh;
}

body {
  font-family: "Roboto", sans-serif;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
}

main {
  padding: 0.6em;
}

.home-page-section-title {
  text-align: center;
}

.page-container {
  max-width: 500px;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  margin: auto;
  padding: 0 0 8px 0;
  background-color: white;
  color: #0d0d0d;
  display: flex;
  flex-direction: column;
}
.page-container .main-content {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow: auto;
  flex-direction: column;
}
.page-container .main-content main {
  width: 100%;
  box-sizing: border-box;
}

nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: stretch;
  background-color: #cccccc;
  color: #1a2c65;
  padding: 1em;
  box-sizing: border-box;
  z-index: 20;
}
nav .nav-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 0;
  background-color: inherit;
  cursor: pointer;
  font-size: 12px;
  color: #1a2c65;
}
nav .nav-link svg {
  color: #1a2c65;
}
nav .nav-link.active {
  color: #5d79d5;
}
nav .nav-link.active svg {
  color: #5d79d5;
}

.logout-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.3em;
  cursor: pointer;
  text-decoration: underline;
}
.logout-link svg {
  margin-left: 1em;
}

.login-form,
.register-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  padding: 5%;
}
.login-form .input-row,
.register-form .input-row {
  margin-bottom: 1em;
}
.login-form .input-row input,
.register-form .input-row input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5em;
  background-color: inherit;
  color: #555a5e;
  font-size: 4vmax;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #0d0d0d;
}
.login-form .input-row input:focus,
.register-form .input-row input:focus {
  border-bottom: 1px solid #555a5e;
}
.login-form .input-row input::placeholder,
.register-form .input-row input::placeholder {
  text-transform: uppercase;
}
.login-form button,
.register-form button {
  padding: 0.5em;
  text-transform: uppercase;
  border-radius: 1em;
  box-sizing: border-box;
  border: 1px solid #0d0d0d;
  color: #0d0d0d;
  background-color: white;
  cursor: pointer;
}

.failure-message {
  color: #ed070a;
  padding: 5%;
  margin-bottom: 1em;
}
.failure-message::before {
  content: "✗";
}

.login-form.request-inflight,
.register-form.request-inflight {
  position: relative;
}
.login-form.request-inflight .inflight-cover,
.register-form.request-inflight .inflight-cover {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-form.request-inflight .inflight-cover .inflight-spinner,
.register-form.request-inflight .inflight-cover .inflight-spinner {
  font-size: 10px;
  text-indent: -9999em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: #555a5e;
  background: -moz-linear-gradient(left, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  background: -webkit-linear-gradient(left, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  background: -o-linear-gradient(left, #75ed6c 10%, rgba(117, 237, 108, 0) 42%);
  background: -ms-linear-gradient(left, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  background: linear-gradient(to right, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  content: "";
}
.login-form.request-inflight .inflight-cover .inflight-spinner:before,
.register-form.request-inflight .inflight-cover .inflight-spinner:before {
  width: 50%;
  height: 50%;
  background: #555a5e;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.login-form.request-inflight .inflight-cover .inflight-spinner:after,
.register-form.request-inflight .inflight-cover .inflight-spinner:after {
  background: #0d0d0d;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.list-header {
  display: flex;
  padding: 8px;
  margin: 8px 0;
}

.header-title {
  flex: 1 0 auto;
  margin: 0;
  color: #555a5e;
}

.event-list {
  width: 100%;
}

.event-summary-list {
  width: 100%;
  box-sizing: border-box;
  padding: 1em;
}
.event-summary-list .event-summary {
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  margin: 1em 0;
  padding: 0.5em;
  list-style-type: none;
  color: #555a5e;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a46a2;
}
.event-summary-list .event-summary.event-summary-done {
  opacity: 0.4;
}
.event-summary-list .event-summary .event-name {
  font-weight: bold;
}
.event-summary-list .event-summary .event-date::after {
  content: " >";
  font-weight: bolder;
}

.event {
  width: 100%;
  overflow-y: scroll;
}
.event .event-title {
  width: 100%;
  color: #0d0d0d;
  text-align: center;
  font-size: 6vh;
  font-weight: bold;
  margin-bottom: 1em;
}
.event .event-sessions {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.event .event-sessions .event-session-tab-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.event .event-sessions .event-session-tab-bar .session-tab {
  width: 20%;
  border-top: 2px solid #555a5e;
  border-left: 2px solid #555a5e;
  border-bottom: none;
  box-sizing: border-box;
  padding: 0.5em 1em;
  border-radius: 10px 10px 0 0;
  text-align: center;
  cursor: pointer;
}
.event .event-sessions .event-session-tab-bar .session-tab:first-of-type {
  border-left: none;
}
.event .event-sessions .Non-default-session-tab-radio:checked ~ .event-session-tab-bar .Default-session-tab,
.event .event-sessions .Fp1-session-tab-radio:not(:checked) ~ .event-session-tab-bar .Fp1-session-tab.Non-default-session-tab,
.event .event-sessions .Fp2-session-tab-radio:not(:checked) ~ .event-session-tab-bar .Fp2-session-tab.Non-default-session-tab,
.event .event-sessions .Fp3-session-tab-radio:not(:checked) ~ .event-session-tab-bar .Fp3-session-tab.Non-default-session-tab,
.event .event-sessions .Quali-session-tab-radio:not(:checked) ~ .event-session-tab-bar .Quali-session-tab.Non-default-session-tab,
.event .event-sessions .Race-session-tab-radio:not(:checked) ~ .event-session-tab-bar .Race-session-tab.Non-default-session-tab {
  background-color: #acacae;
  border-bottom: 2px solid #555a5e;
}
.event .event-sessions .session-tab-radio {
  display: none;
}
.event .event-sessions .Non-default-session-tab-radio:checked ~ .Default-session-tab-content,
.event .event-sessions .Fp1-session-tab-radio:not(:checked) ~ .Fp1-session-tab-content.Non-default-session-tab-content,
.event .event-sessions .Fp2-session-tab-radio:not(:checked) ~ .Fp2-session-tab-content.Non-default-session-tab-content,
.event .event-sessions .Fp3-session-tab-radio:not(:checked) ~ .Fp3-session-tab-content.Non-default-session-tab-content,
.event .event-sessions .Quali-session-tab-radio:not(:checked) ~ .Quali-session-tab-content.Non-default-session-tab-content,
.event .event-sessions .Race-session-tab-radio:not(:checked) ~ .Race-session-tab-content.Non-default-session-tab-content {
  display: none;
}
.event .event-sessions .session-tab-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.event .event-sessions .session-tab-content .session-title {
  text-align: center;
  border-bottom: 1px solid white;
  padding: 1em 0;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event .event-sessions .session-tab-content .session-entry-copy-buttons {
  margin-top: 1em;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.event .event-sessions .session-tab-content .session-entry-copy-buttons .copy-previous-session-entry,
.event .event-sessions .session-tab-content .session-entry-copy-buttons .copy-previous-session-result {
  padding: 0.5em;
  text-transform: uppercase;
  border-radius: 1em;
  box-sizing: border-box;
  border: 1px solid #0d0d0d;
  color: #0d0d0d;
  background-color: white;
  cursor: pointer;
}
.event .event-sessions .session-tab-content .session-entry {
  padding-left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event .event-sessions .session-tab-content .session-entry-live-completed.current-user .session-entry-username {
  color: #2a46a2;
  font-weight: bold;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .session-entry-score-label {
  cursor: pointer;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .expandable-checkbox:not(:checked) ~ .session-entry-score-label .session-entry-username::after {
  content: " ⮟";
}
.event .event-sessions .session-tab-content .session-entry-live-completed .expandable-checkbox:checked ~ .session-entry-score-label .session-entry-username::after {
  content: " ⮝";
}
.event .event-sessions .session-tab-content .session-entry-live-completed .session-entry-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .session-entry-info .session-entry-position {
  padding-left: 1em;
  min-width: 3em;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .session-entry-info .session-entry-username {
  flex-grow: 1;
  text-align: left;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .session-entry-info .session-score {
  text-align: right;
  padding: 0.8em 1em;
  color: #2a46a2;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .session-entry-info .session-score .score {
  display: inline-block;
  box-sizing: border-box;
  height: 2em;
  width: 2em;
  vertical-align: middle;
  font-weight: bold;
  border: 1px solid #2a46a2;
  border-radius: 50%;
  padding: 0.3em;
  text-align: center;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .list-item {
  box-sizing: border-box;
  height: initial;
  padding: 0.8em 1em;
  color: #0d0d0d;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .list-item .item-position {
  font-weight: bold;
  text-decoration: underline;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .list-item.top-ten .item-score {
  color: #0d0d0d;
  background-color: white;
  border-radius: 50%;
  padding: 0.4em;
  font-weight: bold;
  min-width: 2em;
  box-sizing: border-box;
  text-align: center;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .list-item.top-ten.score-0 {
  opacity: 0.5;
}
.event .event-sessions .session-tab-content .session-entry-live-completed .list-item.not-top-ten .item-score {
  display: none;
}

.list-container {
  transform-style: preserve-3d;
  padding: 0;
  margin: 8px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-entry .list-container {
  width: 80%;
}
.result-entry .list-item.top-ten {
  color: #0d0d0d;
}
.result-entry .copy-previous-session-entry {
  display: none;
}

.session-entry .list-item, .result-entry .list-item {
  cursor: pointer;
}

.list-item {
  box-sizing: border-box;
  height: 50px;
  padding: 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.27);
  list-style-type: none;
  margin: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #6E727C;
}
.list-item .item-contents {
  position: relative;
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.list-item .item-contents .selection-hint {
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
}
.list-item .move-up,
.list-item .move-down {
  height: 100%;
  box-sizing: border-box;
  font-weight: bold;
  border: none;
  background-color: #555a5e;
  color: white;
  border-radius: 50%;
  margin: 0.5em;
  cursor: pointer;
}
.list-item .move-up:disabled,
.list-item .move-down:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.submit-entry,
.submit-result {
  padding: 0.5em;
  text-transform: uppercase;
  border-radius: 1em;
  box-sizing: border-box;
  border: 1px solid #0d0d0d;
  color: #0d0d0d;
  background-color: white;
  cursor: pointer;
  min-width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.submit-entry.request-ready::before, .submit-entry.request-failed::before,
.submit-result.request-ready::before,
.submit-result.request-failed::before {
  content: "submit";
}
.submit-entry.request-succeeded::before,
.submit-result.request-succeeded::before {
  content: "✔";
}
.submit-entry.request-inflight .inflight-spinner,
.submit-result.request-inflight .inflight-spinner {
  font-size: 10px;
  text-indent: -9999em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #555a5e;
  background: -moz-linear-gradient(left, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  background: -webkit-linear-gradient(left, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  background: -o-linear-gradient(left, #75ed6c 10%, rgba(117, 237, 108, 0) 42%);
  background: -ms-linear-gradient(left, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  background: linear-gradient(to right, #555a5e 10%, rgba(117, 237, 108, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  content: "";
  padding: 0;
}
.submit-entry.request-inflight .inflight-spinner:before,
.submit-result.request-inflight .inflight-spinner:before {
  width: 50%;
  height: 50%;
  background: #555a5e;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.submit-entry.request-inflight .inflight-spinner:after,
.submit-result.request-inflight .inflight-spinner:after {
  background: #0d0d0d;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.list-item.top-ten {
  color: #0d0d0d;
  font-weight: bold;
}

.item-text {
  flex: 1 0 auto;
  display: inline-block;
}

.item-position {
  margin-right: 1em;
  min-width: 1em;
}

.session-title {
  font-size: 4vh;
  color: #555a5e;
}

.session-result-title {
  color: #2a46a2;
}

.session-result-places {
  display: table;
}
.session-result-places .session-result-place {
  display: table-row;
}
.session-result-places .session-result-place .session-result-position {
  display: table-cell;
  padding: 0.2em 1em;
  color: #2a46a2;
  text-align: right;
}
.session-result-places .session-result-place .session-result-driver {
  display: table-cell;
}

.driver-container,
.team-container {
  display: flex;
  flex-direction: row;
  height: 1.6em;
  align-items: center;
}

.team-indicator {
  width: 0.4em;
  height: 1.6em;
  box-sizing: border-box;
  margin-right: 0.2em;
}

.team-indicator.Alfa-Romeo-Racing {
  background-color: #9b0000;
}

.team-indicator.Ferrari {
  background-color: #dc0000;
}

.team-indicator.Hass-Ferrari {
  background-color: #000000;
}

.team-indicator.McLaren-Renault {
  background-color: #ff8700;
}

.team-indicator.Mercedes {
  background-color: #00d2be;
}

.team-indicator.Racing-Point-Mercedes {
  background-color: #f596c8;
}

.team-indicator.Red-Bull-Racing-Honda {
  background-color: #1e41ff;
}

.team-indicator.Renault {
  background-color: #fff500;
}

.team-indicator.AlphaTauri-Honda {
  background-color: #2b1e6a;
}

.team-indicator.Williams-Mercedes {
  background-color: #7ca9d0;
}

.home-page-drivers {
  margin-left: 1em;
}
.home-page-drivers th, .home-page-drivers td {
  text-align: left;
}
.home-page-drivers th.driver-number, .home-page-drivers td.driver-number {
  text-align: center;
}
.home-page-drivers th.driver, .home-page-drivers td.driver {
  padding-left: 1.5em;
}
.home-page-drivers th.team, .home-page-drivers td.team {
  padding-left: 1em;
}

.tab-navigation {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}
.tab-navigation .tab-navigation-tab {
  flex-grow: 1;
  border-top: 2px solid #555a5e;
  border-left: 2px solid #555a5e;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  text-transform: uppercase;
  cursor: pointer;
}
.tab-navigation .tab-navigation-tab a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: 0.5em 1em;
  box-sizing: border-box;
  text-align: center;
}
.tab-navigation .tab-navigation-tab.inactive {
  background-color: #acacae;
  border-bottom: 2px solid #555a5e;
}

.head-to-head-table {
  margin: auto;
}
.head-to-head-table td.left-name {
  text-align: right;
  margin-right: 1.5em;
}
.head-to-head-table td.right-name {
  text-align: left;
  margin-left: 1.5em;
}
.head-to-head-table td.score {
  padding: 0.2em 1em;
  border-bottom: 1px solid;
  white-space: nowrap;
}
.head-to-head-table td.score.Alfa-Romeo-Racing {
  border-color: #9b0000;
}
.head-to-head-table td.score.Ferrari {
  border-color: #dc0000;
}
.head-to-head-table td.score.Hass-Ferrari {
  border-color: #000000;
}
.head-to-head-table td.score.McLaren-Renault {
  border-color: #ff8700;
}
.head-to-head-table td.score.Mercedes {
  border-color: #00d2be;
}
.head-to-head-table td.score.Racing-Point-Mercedes {
  border-color: #f596c8;
}
.head-to-head-table td.score.Red-Bull-Racing-Honda {
  border-color: #1e41ff;
}
.head-to-head-table td.score.Renault {
  border-color: #fff500;
}
.head-to-head-table td.score.AlphaTauri-Honda {
  border-color: #2b1e6a;
}
.head-to-head-table td.score.Williams-Mercedes {
  border-color: #7ca9d0;
}