@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/templates/solo/fonts/Roboto/Roboto-Thin.woff2);
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/templates/solo/fonts/Roboto/Roboto-Light.woff2);
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/templates/solo/fonts/Roboto/Roboto-Medium.woff2);
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/templates/solo/fonts/Roboto/Roboto-Black.woff2);
}

body[data-page-name="solution/solution"] {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
  color: var(--color-white);
}

body[data-page-name="solution/solution"] main {
  background-color: var(--color-black-accent2);
}

.solomono-bg {
  position: relative;
}

.solomono-bg:before {
  position: absolute;
  bottom: 0;
  content: '';
  height: 250px;
  width: 100%;
  background-image: url('/templates/content/solution/images/solomono-bg.svg');
  background-size: 100px auto;
  opacity: .05;
  pointer-events: none;
}

.clip-right-bottom-corner {
  clip-path: polygon(0 0, 0 100%, calc(100% - 100px) 100%, 100% calc(100% - 100px), 100% 0);
}

.clip-right-bottom-left-top-corner {
  clip-path: polygon(0% 100px, 0% 100%, calc(100% - 100px) 100%, 100% calc(100% - 100px), 100% 0%, 100px 0%);
}

.modal .iti__selected-dial-code {
  color: #fff;
}

.modal .iti__search-input:focus,
.modal .iti__search-input {
  border: 2px solid #757575 !important;
  color: #000 !important;
}


@media (max-width: 991px) {
  .solomono-bg:before {
    background-size: 50px auto;
  }

  body[data-page-name="solution/solution"] .container {
    padding: 0 20px !important;
  }
}