@import "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&family=Roboto:wght@300;500&display=swap";

:root {
  --red-color: #ed1c24;
  --herring-blue: #004f9e;
  --herring-green: #48af1b;
  --herring-yellow: #ffbd59;
  --text-gray: #b8b9bb;
  --blue: #004f9e;
  --primary: #004f9e;
}

.tanksizebg {
  width: 100%;
  background-image: url(tank_size.png);
}

html,
body {
  font-family: "Oswald", sans-serif;
  background-color: #ebebeb;
}

.roboto {
  font-family: "Roboto", sans-serif !important;
}

.titlelogo {
  padding-left: 10px;
  width: 50px;
}

a,
.btn-link,
a:hover,
.btn-link:hover {
  color: #004f9e !important;
}

a:hover,
.btn-link:hover {
  text-decoration: underline !important;
}

.btn-primary {
  color: #fff;
  background-color: #004f9e;
  border-color: #1861ac;
}

.content {
  padding-top: 1.1rem;
  background-color: #ebebeb !important;
  color: #004f9e;
  height: 100%;
}

.content nav-link:hover {
  text-decoration: underline;
  color: #03274a;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

button .top-row .nav-link,
.fa-sign-out {
  color: #fff;
}

.top-row .btn-link {
  color: #fff !important;
}

.top-row .btn-link:hover {
  color: #fff !important;
  text-decoration: underline;
}

button .top-row .nav-link:hover,
.fa-sign-out:hover {
  color: #fff;
  text-decoration: underline;
}

.validation-message {
  color: red;
}

table.b-datagrid td button {
  margin-right: 10px;
  margin-bottom: 3px;
  margin-top: 3px;
}

#blazor-error-ui {
  background: #ffffe0;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

#status,
#ready {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

#status.show,
#ready.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

.negativemargintop {
  margin-top: -50px;
}

@media print {
  .sidebar,
  .k-stepper,
  .top-row,
  .k-button {
    display: none !important;
  }

  .negativemargintop {
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 379px) {
  .k-step-label {
    display: none !important;
  }
}

@media only screen and (max-width: 550px) {
  .k-wizard {
    padding-right: 0;
    padding-left: 0;
  }

  .k-wizard .k-wizard-step {
    padding-right: 0;
    padding-left: 0;
  }
}

.heart-icon.k-checkbox,
.heart-icon.k-checkbox:focus,
.heart-icon.k-checkbox:checked,
.heart-icon.k-checkbox:checked:focus {
  border: none;
  background: none;
  box-shadow: none;
}

.heart-icon.k-checkbox::before,
.heart-icon.k-checkbox:checked::before,
.heart-icon.k-checkbox:indeterminate::before {
  transform: none;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  font-size: 30px;
}

.heart-icon.k-checkbox {
  width: 30px;
  height: 30px;
}

.heart-icon.k-checkbox:checked::before {
  content: "\e11a";
  color: #004f9e;
}

.heart-icon.k-checkbox:indeterminate::before {
  content: "\e309";
  color: #004f9e;
  background: none;
}

.heart-icon.k-checkbox::before {
  content: "\e309";
  color: #004f9e;
}

.k-stepper .k-step-indicator {
  height: auto;
  width: auto;
}

.herringblue-btn,
.herringblue-btn:hover {
  background-color: #004f9e;
  color: #ebebeb;
  border-radius: 2rem !important;
  font-family: "Oswald", sans-serif;
  font-size: large;
  width: 200px;
  height: 50px;
  text-transform: uppercase;
}

.herringblue-btnprint,
.herringblue-btnprint:hover {
  background-color: #004f9e;
  color: #ebebeb;
  border-radius: 2rem !important;
  font-family: "Oswald", sans-serif;
  font-size: large;
  width: 200px;
  height: 50px;
  text-transform: uppercase;
}

.done-btn,
.done-btn:hover {
  background-color: #fff;
  color: #004f9e;
  border-radius: 2rem !important;
  font-family: "Oswald", sans-serif;
  font-size: large;
  width: 100%;
  height: 50px;
  text-transform: uppercase;
}

.skyblueback {
  background-color: #d7e9f8;
  border-radius: 2em;
  padding: 2em;
  margin: 2em;
}

.greyback {
  background-color: #ebebeb;
  border-radius: 1em;
  padding: 1em;
}

.pinkback {
  background-color: #ffe4e1;
  border-radius: 1em;
  padding: 1em;
  margin: 1em;
}

.whitebackground {
  background-color: #fff;
  border-radius: 2em;
}

.k-radio {
  height: 25px;
  width: 25px;
}

.k-radio:checked,
.k-radio.k-checked {
  font-family: "WebComponentsIcons";
  background-image: none;
  content: "\e11a";
}

.k-step-list-horizontal ~ .k-progressbar {
  top: 40%;
}

.herringblue-btn:hover,
.herringblue-btnprint:hover,
.done-btn:hover {
  text-decoration: underline;
}

.oswaldlight,
h4 {
  font-family: Oswald, sans-serif;
  font-weight: 300;
  color: #004f9e;
  font-size: 24px;
  text-transform: uppercase;
}

.oswaldlightsmall,
h4 {
  font-family: Oswald, sans-serif;
  font-weight: 300;
  color: #004f9e;
  font-size: large;
  text-transform: uppercase;
}

h3,
h2,
h5,
h1 {
  font-family: Oswald, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.robotoblack {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 300;
  text-transform: uppercase;
}

.robotoblacksmall {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: large;
  font-weight: 300;
  text-transform: uppercase;
}

.k-grid th {
  background-color: #ebebeb;
  color: #004f9e;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: large;
  font-weight: 500;
}

.k-grid td {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #000;
  font-size: 18px;
  text-transform: uppercase;
}

div.container.whitebackground
  > div
  > nav
  > ol
  > li.k-step-disabled
  > a
  > span.k-step-indicator {
  background-color: #b8b9bb;
  border-color: #b8b9bb;
}

div.container.whitebackground
  > div
  > nav
  > ol
  > li.k-step-current
  > a
  > span.k-step-indicator {
  background-color: #8cc0ec;
  border-color: #8cc0ec;
}

div.container.whitebackground
  > div
  > nav
  > ol
  > li.k-step-done
  > a
  > span.k-step-indicator {
  background-color: #d7e9f8;
  border-color: #d7e9f8;
}

div.container.whitebackground > div > nav > ol a > span.k-step-indicator > img {
  max-width: 100%;
  height: auto;
}

.k-stepper > .k-step-current > .k-step-indicator {
  border-color: #8cc0ec;
  color: #8cc0ec;
  background-color: #8cc0ec;
  pointer-events: none;
}

.k-step-disabled img {
  filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  opacity: 0.5;
}

.k-stepper > .k-step-current > .k-step-indicator {
  border-color: #8cc0ec;
  color: #8cc0ec;
  background-color: #8cc0ec;
  pointer-events: none;
}

.k-step-disabled img {
  filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  opacity: 0.5;
}

.k-tooltip {
  background-color: white;
  font-family: "Oswald", sans-serif;
  color: #004f9e;
}

.fa-lg {
  font-size: 40px;
  color: #000 !important;
}

button,
input {
  background-color: #ebebeb;
}

.k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-items-wrapper .k-item.k-state-active,
.k-tabstrip-items-wrapper .k-item.k-state-selected {
  background-color: #004f9e;
  color: #ebebeb !important;
  border-radius: 0.8rem !important;
  font-family: "Roboto", sans-serif;
  font-size: large;
  font-weight: 500;
  width: auto;
  height: 50px;
  text-transform: uppercase;
}

.k-tabstrip-items .k-link {
  padding-left: 2em;
  padding-right: 2em;
}

.k-tabstrip-items .tabblue-btn,
.tabblue-btn:hover {
  margin-right: -10px !important;
  background-color: #ebebeb;
  color: #b8b9bb !important;
  border-radius: 0.8rem !important;
  font-family: "Roboto", sans-serif;
  font-size: large;
  font-weight: 500;
  width: auto;
  height: 50px;
  text-transform: uppercase;
}

.tabblue-btn:hover {
  text-decoration: underline;
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
  border-color: transparent;
  color: #004f9e;
  background-color: #fff;
}

.k-tabstrip-content.k-state-active,
.k-tabstrip > .k-content.k-state-active {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 24px;
  text-transform: uppercase;
}

.k-input-md .k-input-inner,
.k-picker-md .k-input-inner {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #000;
  font-size: 18px;
  background-color: #ebebeb;
}

label {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  color: #004f9e;
  font-size: 20px;
  text-transform: uppercase;
}

.bigwidth {
  width: 250px !important;
}

.k-pager-numbers .k-link.k-state-selected,
.k-pager-numbers .k-link.k-selected {
  border-color: #004f9e;
  color: white !important;
  background-color: #004f9e;
}

#divLocationsTank {
  position: relative;
  border-radius: 1.5rem !important;
  background-color: #d7e9f8;
  /*light blue*/
  padding: 1rem;
  margin-bottom: 1rem;
}

.tank_info_black {
  font-size: large;
  color: black;
  font-family: Roboto, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  text-align: left;
}

.switchloc {
  color: black;
  font-family: Roboto, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
}

.title_page {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  color: #004f9e;
  font-size: 42px;
  text-transform: uppercase;
}

.my_account_blue {
  color: #004f9e;
  font-weight: 400;
  font-family: Oswald;
  font-size: larger;
  text-transform: uppercase;
}

#ddllocations {
  border-radius: 25px;
}

#divTankRentalInfo {
  border-radius: 1.5rem !important;
  padding: 1rem;
  margin-bottom: 1rem;
}

.k-grid td {
  border-width: 0 0 0px 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
}

.k-grid th,
.k-grid td {
  padding: 0.5rem 0.5rem;
  border-style: none;
  border-color: white;
  outline: 0;
  font-weight: inherit;
  text-align: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-grid .k-alt {
  background-color: white;
}

.div_location {
  border-radius: 1.5rem !important;
  padding: 1rem;
  margin-bottom: 1rem;
}

.small_print {
    color: black;
    font-size: small;
    font-family: Roboto, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.tank1 {
    /* define a background image or a custom font icon here */
    background-image: url('../icons/tank1.png');
    width:150px;
    height:150px;
}
.tank2 {
    /* define a background image or a custom font icon here */
    background-image: url('../icons/tank2.png');
    width: 150px;
    height: 150px;
}
.tank3 {
    /* define a background image or a custom font icon here */
    background-image: url('../icons/tank3.png');
    width: 150px;
    height: 150px;
}
.tank4 {
    /* define a background image or a custom font icon here */
    background-image: url('../icons/tank4.png');
    width: 150px;
    height: 150px;
}

.final_payment {
    background-image: url('../icons/final_payment.png');
    width: 150px;
    height: 150px;
}

.final_confirm {
    background-image: url('../icons/final_confirm.png');
    width: 150px;
    height: 150px;
}

.final_receipt {
    background-image: url('../icons/final_receipt.png');
    width: 150px;
    height: 150px;
}

@media only screen and (max-width: 1024px) {
    /* Styles for laptops and tablets */
    .tank1,
    .tank2,
    .tank3,
    .tank4,
    .final_payment,
    .final_confirm,
    .final_receipt {
        width: 100px;
        height: 100px;
        background-size: 100px 100px;
    }
    .k-stepper .k-step-indicator {
        width: 100px;
        height: 100px;
    }
}

@media only screen and (max-width: 768px) {
    /* Styles for phones */
    .tank1,
    .tank2,
    .tank3,
    .tank4 {
        background-size: 75px 75px;
    }

    .k-stepper .k-step-indicator {
        padding-top:15px;
        width:75px;
        height:75px;
    }
}