:root {
    --gray-050: #F7F8F9;
    --gray-100: #EEF0F3;
    --gray-200: #D5DAE1;
    --gray-300: #BBC3CF;
    --gray-400: #8896AB;
    --gray-500: #556987;
    --gray-600: #4D5F7A;
    --gray-700: #404F65;
    --gray-800: #404F65;
    --gray-900: #2A3342;
    
    --green-050: #F0FDF4;
    --green-100: #DCFCE7;
    --green-200: #BBF7D0;
    --green-300: #86EFAC;
    --green-400: #4ADE80;
    --green-500: #28C662;
    --green-600: #16A34A;
    --green-700: #15803D;
    --green-800: #166534;
    --green-900: #14532D;

    --purple-050: #FBF7FF;
    --purple-100: #F6EEFE;
    --purple-200: #E9D5FD;
    --purple-300: #DCBBFC;
    --purple-400: #C288F9;
    --purple-500: #A855F7;
    --purple-600: #974DDE;
    --purple-700: #7E40B9;
    --purple-800: #653394;
    --purple-900: #522A79;
    
    --red-050: #FEF7F6;
    --red-100: #FDEEEC;
    --red-200: #FBD6D0;
    --red-300: #F9BDB4;
    --red-400: #F48B7C;
    --red-500: #EF5944;
    --red-600: #D7503D;
    --red-700: #B34333;
    --red-800: #8F3529;
    --red-900: #752C21;

    --orange-050: #FFFAF3;
    --orange-100: #FEF5E7;
    --orange-200: #FDE7C2;
    --orange-300: #FBD89D;
    --orange-400: #F8BB54;
    --orange-500: #F59E0B;
    --orange-600: #DD8E0A;
    --orange-700: #B87708;
    --orange-800: #935F07;
    --orange-900: #784D05;

    --blue-050: #F5F9FF;
    --blue-100: #EBF3FE;
    --blue-200: #CEE0FD;
    --blue-300: #B1CDFB;
    --blue-400: #76A8F9;
    --blue-500: #3B82F6;
    --blue-600: #3575DD;
    --blue-700: #2C62B9;
    --blue-800: #234E94;
    --blue-900: #1D4079;

    --white-900: #FFFFFF;
    
    --rammest-green: #28C662;
    --rammest-green-filter: invert(90%) sepia(67%) saturate(5790%) hue-rotate(63deg) brightness(82%) contrast(87%);

    --font-family-inter: 'Inter', sans-serif;
    --font-family-overpass: 'Overpass', sans-serif;
  }

body {
    font-family: var(--font-family-overpass);
}

main > .container {
    padding: 70px 15px 20px;
}

main > .container-fluid:first-of-type {
    padding-top: 70px;
}

.rammest-navbar {
    background-color: var(--gray-900);
}

.rammest-dark-background {
    background-color: var(--gray-900);
}

.white-text {
    color: var(--white-900);
}

.width-fit-content {
    min-width: fit-content !important;
}

.navbar-text > span {
    font-weight: 500;
    vertical-align: middle;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-style: normal;
    font-family: 'Inter', sans-serif;
}


@media only screen and (min-width: 768px) {
    .language-picker div {
      border-right: 1px solid var(--gray-700);
      padding-right: 8px;
    }
    #loginButton {
        margin-right: 8px;
    }
  }
/* BURGER MENU */
@media only screen and (max-width: 767px) {
    .navbar-text {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .navbar-collapse {
        text-align: center;
    }
    .nav-item {
        margin-top: 4px;
        margin-bottom: 4px;;
    }
    .language-picker {
      width: 100%;
      display: initial !important;
    }
    .language-picker ul {
        background-color: var(--gray-900) !important;
    }
    .language-picker ul li a {
        color: var(--white-900) !important;
    }
  }

.nav-link-text:hover,
.nav-link-text:active,
.nav-link-text:focus {
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: default;
}

#page {
    width: 100%;
    height: 100%;
}

.btn-primary,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
#myRammest,
#myRammest:active,
#myRammest:hover,
#myRammest:focus {
    color: var(--green-050) !important;
    background-color: var(--green-500);
    border-color: var(--green-500);
}

.btn-secondary,
.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--gray-900) !important;
    background-color: var(--white-900);
    border-color: var(--white-900);
}

.language-picker {
    display: inline-block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.form-control {
    background-color: var(--gray-050);
    border-color: var(--gray-100);
    border-radius: 8px;
}

.link-primary,
.link-primary:active,
.link-primary:hover,
.link-primary:focus {
    color: var(--rammest-green);
}

.contact-info,
.contact-info:active,
.contact-info:hover,
.contact-info:focus {
    color: var(--gray-200) !important;
    cursor: default;
    text-decoration: none;
}

.text-white {
    color: var(--white-900);
}

.bg-white {
    background-color: #ffffff;
}

.site-signup-container,
.site-login-container {
    border-radius: 8px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
    position: fixed;
    bottom: 0;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.green-logo {
    filter: var(--rammest-green-filter);
}

.color-green-500 {
    color: var(--green-500) !important;
}


#get-a-quote-well {
    min-height: 100%;
    height: -webkit-fill-available;
}

#get-a-quote-well div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#home-fixed button {
    border-radius: 0px 0px 10px 10px;
    background-color: var(--purple-500);
    border-color: var(--purple-500);
}

#home-fixed .well img{
    border-radius: 10px 150px 0px 0px;
}

#home-auction button {
    border-radius: 0px 0px 10px 10px;
    background-color: var(--orange-500);
    border-color: var(--orange-500);
}

#home-auction .well img{
    border-radius: 150px 10px 0px 0px;
}

@media(max-width:767px) {
    #home-fixed {
        margin-top: 1.5rem;
    }
}

.badge-success {
    padding: 2px 10px;
    border-radius: 10px;
    background-color: var(--green-100);
    color: var(--green-500);
}

.icon-div {
    background-color: var(--green-500);
    height: 64px;
    width: 64px;
}

.icon-div > i {
    line-height: 64px;
}

#carouselSlides {
    background-color: var(--green-050);
}

#carouselCaptions {
    width: 100%;
}

.carousel-item img {
    border-radius: 16px;
    max-height: 384px;
    width: 40%;
    object-fit: cover;
}

.carousel-item {
    width: 100%;
}

.carousel-quote {
    width: 50%;
}

@media(max-width:767px) {
    .carousel-quote {
        width: 100%;
    }
}
.quote {
    font-family: var(--font-family-overpass);
    color: var(--gray-900);
    font-weight: 800;
    font-size: 36px;
    line-height: 44px;
}

.quote-owner {
    color: var(--gray-900);
    font-weight:  700;
    font-size: 18px;
    line-height: 28px;
}

.quote-owner-info {
    color: var(--gray-400);
    font-weight:  500;
    font-size: 16px;
    line-height: 24px;
}

.carousel-indicators {
    margin-right: 10% !important;
    margin-bottom: 0 !important;
}

.carousel-indicators li {
    background-color: var(--green-500) !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 6px !important;
    border: 0px !important;
}

footer .nav {
    margin-left: auto;
    margin-right: auto;
}

footer .nav-link { 
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--gray-500) !important;
}

@media(max-width:767px) {
    footer .container {
        max-width: 100%;
    }
}

@media(max-width:544px) {
    footer img {
        display: none;
    }
    footer .nav {
        margin-left: 0;
    }
}

@media(max-width:421px) {
    #footerCopyright {
        display: none;
    }
    footer .nav {
        margin-left: auto;
    }
}

#quotesTable th,
#quotesTable th a {
    font-size: 12px !important;
    color: var(--gray-500);
    font-weight: 600;
}

#quotesTable img {
    height: 48px;
}

#quotesTable td {
    color: var(--gray-900);
    font-size: 14px;
    vertical-align: middle;
}

#quotesTable td a {
    font-weight: 600;
    color: var(--gray-900);
}

#quotesTable td i {
    top: 0;
}

#quotesTable td:first-child {
    font-weight: 600;
}

#quotesTable th:last-child,
#quotesTable td:last-child {
    text-align: right;
}

.browse-footer {
    background-color: var(--green-050);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    bottom: 0;
    height: 304px;
}

.badge {
  position: absolute;
  font-size: xx-small;
  margin-left: -5px;
  margin-top: -10px;
  background-color: var(--green-500);
  color: white;
}
.content-view {
  margin-top: 50px;
}
i.address-from {
  background: url("/images/map-pin-start.png");
  height: 16px;
  width: 16px;
  display: inline-block;
  margin-bottom: -3px;
}

i.address-to {
  background: url("/images/map-pin-end.png");
  height: 16px;
  width: 16px;
  display: inline-block;
  margin-bottom: -3px;
}
span.address {
  margin-left: 50px;
  text-align: left;
}
.address-box {
  margin: 20px 0 50px 0;
}
.fotorama img {
  max-width: 250px;
}
.info {
  background: var(--gray-100);
  min-height: 100px;
  border-radius: 5px;
  padding: 30px 20px;
  color: var(--gray-900);
}
.timer {
  text-align: center;
}
.timer .title {
  font-size: 14px;
}
.timer .left {
  font-size: 30px;
}
.close-time {
  text-align: center;
  font-size: 12px;
}
.bid-info {
  margin-top: 50px;
  font-size: 14px;
  margin-bottom: 30px;
}
.item-details {
  margin-top: 30px;
  margin-bottom: 70px;
  font-size: 14px;
}
.item-details h4 {
  font-size: 16px;
}
.has-error .help-block {
  color: var(--red-600)
}
.profile-form {
  margin-top: 100px;
}
.profile-form h4 {
  margin-bottom: 50px;
}
.profile-form .form-block {
  margin-bottom: 50px;
}
.has-error .help-block {
  color: red;
}
.shipping-quote-index {
  margin-bottom: 90px;
}
.table-responsive {
  display: table;
  margin-top: 30px;
}

.text {
    position: relative;
    font-size: 14px;
    color: black;
    width: 50px; /* Could be anything you like. */
}

.text-concat {
    position: relative;
    display: inline-block;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
    line-height: 1.2em;
    text-align:justify;
}

.text.ellipsis::after {
    content: "...";
    position: absolute;
    right: -12px;
    bottom: 4px;
}