/*over all styles*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;600&display=swap");

body {
  font-family: "Oswald", sans-serif;
  font-size: large;
  color: black;
}

.container {
  margin-top: 3% !important;
}

i {
  font-size: 50px;
  cursor: pointer;
  transition: all 300ms ease;
}

i:hover {
  color: white;
}
/*media query's for desktop*/
@media only screen and (min-width: 1025px) {
  body {
    background-color: white;
    padding: 0;
    margin: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(29, 171, 218, 0.5) 25%,
        rgba(37, 65, 165, 0.5) 50%,
        rgba(14, 75, 91, 0.5) 100%
      )
      fixed;
    background-repeat: no-repeat;
    background-size: contain;
  }
  input {
    background-color: transparent;
    border: 1px #1dabda solid;
    border-radius: 5px;
    color: #2541a5;
  }
  input:focus {
    box-shadow: 0px 0px 0px 4px rgba(37, 65, 165, 0.3);
    transition: all 300ms ease;
    outline: none;
  }
  .btn {
    border: 1px solid #1dabda;
    background-color: #2541a5;
    color: #1dabda;
    font-weight: bold;
    width: 100%;
  }
  .btn:hover {
    background-color: #1dabda;
  }
  #result {
    text-align: center;
  }
  .overlay {
    z-index: 1000;
    background-color: #000000dd;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  .spinner {
    z-index: 1001;
  }
  .imgLogo {
    max-width: 150px;
    max-height: 150px;
    display: block;
  }
  .imgEncipher {
    width: 100px;
    height: 100px;
  }
  .ELogo {
    background-color: transparent;
    /*        border: #2541A5 solid 2px;*/
    color: #2541a5;
    text-align: center;
    border-radius: 15px;
    font-size: 2em;
  }
  .menu {
    vertical-align: bottom;
    text-align: right;
  }
  .header {
    text-align: center;
    font-size: 3em;
  }
  .resultRow {
    background-color: #0e4b5b;
    /*        border-radius: 15px;*/
    color: #fff;
    margin-bottom: 1px;
    vertical-align: middle;
  }
  .resultDescription {
    font-weight: lighter;
    font-size: 1em;
  }
  .resultTitle {
    font-weight: bold;
    font-size: 1.5em;
    text-align: left;
  }
  .resultDomain {
    text-align: right;
  }
  .imgCustomer {
    width: 100px;
    height: 100px;
    background-image: url(./img/target-customer.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgAPI {
    width: 100px;
    height: 100px;
    background-image: url(./img/cloud-network.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgCheck {
    width: 100px;
    height: 100px;
    background-image: url(./img/display.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgAction {
    width: 100px;
    height: 100px;
    background-image: url(./img/protection.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgArrow {
    width: 30px;
    height: 30px;
    background-image: url(./img/arrow-right.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    position: relative;
    left: 55%;
    top: 34%;
  }
  .imgThumb {
    width: 30px;
    height: 30px;
    background-image: url(./img/thumbs-up.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    position: relative;
    left: 55%;
    top: 34%;
  }
  .menuItem {
    background-color: #0e4b5b;
    color: white;
    text-align: center;
    display: inline-block;
    width: 80px;
    cursor: pointer;
    margin-right: 1px;
    text-align: center;
    text-decoration: none;
  }
  .menuItem:hover {
    background-color: #fff;
    border: 1px dash #0e4b5b;
    color: #2541a5;
    transition: all 300ms ease;
  }
  .textCenter {
    text-align: center;
  }
  .link {
    text-decoration: none;
    color: #2541a5;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .deco {
    text-decoration: underline;
  }
  .margin-5 {
    margin: 5% auto;
  }
  .dropdown-item {
    background-color: #0e4b5b;
    color: #fff;
    transition: all 300ms ease;
    padding: 0.5rem;
  }
  .dropdown-menu {
    background-color: #0e4b5b;
  }

  .dropdown-item:hover {
    background-color: snow;
  }
  .warning {
    display: none;
  }
  .no-list-deco {
    list-style-type: none;
  }
  .svg-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -99;
  }
  .nav-link {
    color: white !important;
    background-color: #0e4b5b !important;
    padding: 10px;
  }
  .nav-link:hover {
    background-color: #fff !important;
    color: black !important;
  }
}
/*media query's for mobile*/

@media only screen and (max-width: 1024px) {
  body {
    background-color: white;
    color: white;
    padding: 0;
    margin: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(29, 171, 218, 0.5) 25%,
        rgba(37, 65, 165, 0.5) 50%,
        rgba(14, 75, 91, 0.5) 100%
      )
      fixed;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .btn {
    border: 1px solid #1dabda;
    background-color: #2541a5;
    color: #1dabda;
    font-weight: bold;
  }
  .btn:hover {
    background-color: #1dabda;
  }
  #result {
    text-align: center;
  }
  .overlay {
    z-index: 1000;
    background-color: #000000dd;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  .spinner {
    z-index: 1001;
  }
  .imgLogo {
    max-width: 150px;
    max-height: 150px;
    display: block;
  }
  .imgEncipher {
    width: 48px;
    height: 48px;
  }
  .ELogo {
    background-color: transparent;
    /*        border: #2541A5 solid 2px;*/
    color: #2541a5;
    text-align: center;
    border-radius: 15px;
    font-size: 2em;
  }
  .menu {
    vertical-align: bottom;
    text-align: right;
  }
  .header {
    text-align: center;
    font-size: 3em;
  }
  .resultRow {
    background-color: #0e4b5b;
    /*        border-radius: 15px;*/
    color: #fff;
    margin-bottom: 1px;
    vertical-align: middle;
  }
  .resultDescription {
    font-weight: lighter;
    font-size: 1em;
  }
  .resultTitle {
    font-weight: bold;
    font-size: 1.5em;
    text-align: left;
  }
  .resultDomain {
    text-align: right;
  }
  .imgCustomer {
    width: 100px;
    height: 100px;
    background-image: url(./img/target-customer.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgAPI {
    width: 100px;
    height: 100px;
    background-image: url(./img/cloud-network.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgCheck {
    width: 100px;
    height: 100px;
    background-image: url(./img/display.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgAction {
    width: 100px;
    height: 100px;
    background-image: url(./img/protection.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 15px;
  }
  .imgArrow {
    width: 30px;
    height: 30px;
    background-image: url(./img/arrow-right.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    position: relative;
    left: 55%;
    top: 34%;
  }
  .imgThumb {
    width: 30px;
    height: 30px;
    background-image: url(./img/thumbs-up.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    position: relative;
    left: 55%;
    top: 34%;
  }
  .menuItem {
    background-color: #0e4b5b;
    color: white;
    text-align: center;
    display: inline-block;
    width: 80px;
    cursor: pointer;
    margin-right: 1px;
    text-align: center;
    text-decoration: none;
  }
  .menuItem:hover {
    background-color: #fff;
    border: 1px dash #0e4b5b;
    color: #2541a5;
    transition: all 300ms ease;
  }
  .textCenter {
    text-align: center;
  }
  .link {
    text-decoration: none;
    color: #2541a5;
  }
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .deco {
    text-decoration: underline;
  }
  .margin-5 {
    margin: 5% auto;
  }
  .dropdown-item {
    background-color: #0e4b5b;
    color: #fff;
    transition: all 300ms ease;
    padding: 0.5rem;
  }
  .dropdown-menu {
    background-color: #0e4b5b;
  }

  .dropdown-item:hover {
    background-color: snow;
  }
  .warning {
    display: none;
  }
  .no-list-deco {
    list-style-type: none;
  }
  .svg-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -99;
  }
  .nav-link {
    color: white !important;
    background-color: #0e4b5b !important;
    padding: 10px;
    text-align: center;
  }
  .nav-link:hover {
    background-color: #fff !important;
    color: black !important;
  }
  .arrow {
    transform: rotate(90deg);
  }
}