/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
body {
  background-image: linear-gradient(to top right, #1b1464, #00c3e1);;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


div.stepper {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
}


.cardHeader{
  display: grid;
  grid-template-columns: 98px 1fr 98px;
}

.btnPrimary {
  min-width: 14rem !important;
}


@media screen and (max-width: 600px) {
  .h-sm-screen {
    height: 100vh;
  }
}

.validation-message {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

.card-container-item {
  width: 550px;
}

@media screen and (max-width: 550px) {

  card-container-item {
    width: unset;
    max-width: 550px;
  }
}

.card-container-item-lg {
  width: 850px;
}

@media screen and (max-width: 550px) {

  card-container-item-lg {
    width: unset;
    max-width: 850px;
  }
}

.card-container .mud-input-control:first-child {
  margin-top: 1rem;
}

.mud-avatar img{
  object-fit: scale-down;
  background-color: white;
}

.dark-theme .mud-icon-button{
  color:white;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b75ba;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: rgba(56, 196, 74);
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}
.nav-link.stepper-circle.rounded-circle{
  color: #fff;
  background-color: #1b75ba;
    width: 58px;
    height: 58px;

}
.nav-link.stepper-circle.rounded-circle:hover{
    background-color: #00C3E1;
}
.nav-link.stepper-circle.rounded-circle svg{
  margin-left: -11px;
  margin-top: 1px;
}
.stepper-circle{
  height: 65px;
}
.stepper-circle span{
    margin-top: 7px;
    margin-left: -3px;
}
.stepper__label{
  width: 74px;
  text-align: center;
    font-size: 12px;
    line-height: 18px;
}
.modified-form-input-label{
  top: unset;
  width: unset;
  font-size: 12px;
  border: unset;
  margin: unset;
  position:unset;
  height:unset;
  background-color: white;
  transform: translate(10px,13px);
  padding: 0px 3px;
}
.form-control:disabled, .form-control[readonly]{
  background-color: unset !important;
}
.mud-icon-root.mud-svg-icon {
  fill: white;
}
.mud-icon-size-medium {
  font-size: 1.5rem;
}
.mud-icon-root{
  width: 1em;
  height: 1em;
  display: inline-block;
  transition: fill 200ms cubic-bezier(.4,0,.2,1) 0ms;
  flex-shrink: 0;
}


.upload-zone {
  background: #FFFFFF;
  width: 100%;
  min-height: 320px;
  display: flex;
}

.upload-preview {
  min-width: 690px;
  width: 100%;
}

.upload-zone.has-file-hover {
  transition: ease-in 1s;
  background-color: antiquewhite;
}

.order-image {
  min-width: 690px;
  width: 100%;
}


.loader-overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  transition: ease-in;
  display: flex;
  opacity: 0.5;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 1050;
}

.loader-overlay.show {
  opacity: 0.5;
}

.loader {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.grid-container {
  display: grid;
  grid-gap:4px;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media screen and (max-width: 640px) {

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
/* _content/ClientUI/Pages/Components/HistoryListItem.razor.rz.scp.css */
.container[b-n5w55jmb3u]{
  display: grid;
  grid-template-columns: 100px 2fr 1fr;
  grid-gap:1rem;
}

.mud-typography-caption {
  font-size:  .75rem;
  font-family: 'Roboto','Helvetica','Arial','sans-serif';
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: .03333em;
  text-transform: none;
}

.order-image {
  min-width: 600px;
  width: 100%;
}
.pe-none {
  pointer-events: none;
}
.quotation-grid {
  display: grid;
  column-gap: 5px;
  grid-template-columns: 1fr 100px 50px 100px;
}

.required:after {
  content:" *";
  color: red;
}

.history-list-item{
  display: grid;
  grid-template-columns: 100px 1.4fr 1fr;
  grid-gap: 1rem;
}


@media only screen and (max-width: 1139px) {
    .history-list-item{
        grid-template-columns: 100px 1fr 1fr;
        grid-gap: 0.5rem;
    }
}
@media only screen and (max-width: 976px) {
    .history-list-item{
        grid-template-columns: 100px 0.7fr 1fr;
        grid-gap: 0.2rem;
    }
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
  cursor: pointer;
}
.mud-button-filled.mud-button-filled-primary {
                           color: #ffffffff;
                           background-color: #1b75ba;
                         }
.mb-2, .my-2 {
                  margin-bottom: .5rem!important;
                }
.ml-1, .mx-1 {
                  margin-left: .25rem!important;
                }
.rounded-pill {
                  border-radius: 50rem!important;
                }

.history-item-button{
  height: 32px;
  min-width: 100px;
}
.itemContainer {
  display: grid;
  grid-template-columns: 100px 1fr min-content;
  grid-gap: 1rem;
}
tr.htmx-request {
  transition: all 500ms ease-in;
  background-color:grey; 
}

/* Order History css */
.pa-2{
    padding: 12px !important;
}

.mud-typography {
    margin:0;
    /*margin-bottom: 0em;*/
}

.mud-typography-h5 {
    font-size: 1.5rem;
    font-family: 'Roboto','Helvetica','Arial','sans-serif';
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0;
}

.mud-typography-body1 {
    font-size: 1rem;
    font-family: 'Roboto','Helvetica','Arial','sans-serif';
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .00938em;
    text-transform: none;
}

.mud-typography-body2 {
    font-size: .875rem;
    font-family: 'Roboto','Helvetica','Arial','sans-serif';
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: .01071em;
    text-transform: none;
}

.mud-typography-subtitle1 {
    font-size: 1rem;
    font-family: 'Roboto','Helvetica','Arial','sans-serif';
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: .00938em;
    text-transform: none;
}

.mud-typography-subtitle2 {
    font-size: .875rem;
    font-family: 'Roboto','Helvetica','Arial','sans-serif';
    font-weight: 500;
    line-height: 1.57;
    letter-spacing: .00714rem;
    text-transform: none;
}

.my-auto-margin-right {
    margin-right: 5px;
}

.mud-button-root {
    border: 0;
    margin: 0;
    display: inline-flex;
    outline: 0;
    align-items: center;
    user-select: none;
    vertical-align:middle;
    justify-content: center;
    text-decoration: none;
}

.mud-button {
    font-family: 'Roboto','Helvetica','Arial','sans-serif';
    font-weight: 500;
    line-height: 1.75;
    letter-spacing:.02857em;
    text-transform: uppercase;
    min-width: 64px;
    box-sizing: border-box;
}

.mud-button-filled.mud-button-filled-primary {
    color: #ffffffff;
    background-color: #1b75ba;
}

.mud-button-filled-size-small {
    padding: 4px 10px;
    font-size: .8125rem;
}

.mud-button-label {
    width: 100%;
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
}


.eyelet-display{
    grid-template: "a a a"
                    "b b b"
                    "c c c";
    display: grid;
    text-align: center;
}

.form-field-item{
    height: 51px;
}
.form-field-item-adjusted{
    transform: translateY(-11px);
}
/* Order History css */
.card-content{
    width: 537px;
}

@media (min-width: 645px){
    .card-content {
        width: 685px;
    }
}

.my-tooltip {
    position: relative;
    display: inline-block;
}
.tooltip-section img{
    max-width:280px;
    max-height:400px;
    margin-right: 1rem;
}
.my-tooltip .tooltip-section {
    visibility: hidden;
    left: -350px;
    width: 650px;
    background-color: black;
    color: #fff;
    text-align: justify;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.my-tooltip:hover .tooltip-section {
    visibility: visible;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: lightgrey;
    opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: lightgrey;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: lightgrey;
}