﻿/* 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. */

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

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

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  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%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/* Custom styles
-------------------------------------------------- */

/* Correct text color. */
.card {
    color: #23282c;
}

/* For Page/Model level validation erros */
.validation-summary-errors ul {
    padding-left: 0;
    list-style: none;
    text-align: center;
    font-weight: bold;
}

.tooltip-inner {
    max-width: 350px;
}

.strikethrough {
    text-decoration: line-through;
}

.card .collapse:not(.show) {
    border-bottom: 1px solid #dee2e6; /* Bootstrap’s default card border color */
}

.fa-sm {
    font-size: 10px !important;
}

/**,
::before,
::after {
    box-sizing: border-box;
}*/

/* We were previously using form-control on the cancellation spend configuration dropdown which results in a fixed-height select
    that bleeds into the next row on smaller screen sizes. Using the custom control and putting the label and select on separate 
    lines fixed the issue, but I needed to use the following CSS to make the custom control look like the form-control dropdown
    when we wanted it to (via the usage of the single-carent and custom-select combined selector).
*/
/* Use one down-caret and hide the native arrows */
.custom-select.single-caret {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 10px 10px;
    padding-right: 1.75rem; /* leave room for the caret */
    /* single down arrow */
    background-image: url("data:image/svg+xml;charset=utf8,\
  %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E\
  %3Cpath fill='%236c757d' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
}

/* Hide the native arrow in old IE/Edge */
.custom-select.single-caret::-ms-expand {
    display: none;
}

/* (optional) keep padding on the small size */
.custom-select-sm.single-caret {
    padding-right: 1.75rem;
}

.ChannelLogo {
    width: 40px; /* set the desired uniform size */
    height: 40px;
    display: inline-flex; /* centers both text & image icons */
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* optional rounding */
    font-size: 1.25rem; /* controls icon size */
    line-height: 1;
    text-align: center;
    flex-shrink: 0; /* keeps consistent spacing in flex layouts */
}

/* Color backgrounds for each brand */
.CraigslistLogo {
    background-color: rgb(85, 26, 139);
    color: white;
}

.FacebookAdsLogo {
    background-color: rgb(66, 103, 178);
    color: white;
}

.GoogleAdsLogo {
    color: red;
}

.OfferUpLogo {
    background-color: #00a87e;
    color: white;
    overflow: hidden; /* ensures image fits perfectly */
}

/* This ensures image logos (OfferUp) scale to match icon logos */
.OfferUpLogo img {
    width: 60%; /* adjusts internal image size */
    height: 60%;
    object-fit: contain; /* keeps proportions clean */
    display: block;
}
/* png has color */

/* list item styling */
.review-item {
    padding: .5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.review-item:last-child {
        border-bottom: 0;
    }

.review-item .meta {
    color: #6c757d;
    font-size: .9rem;
}

.review-item .end {
    white-space: nowrap;
}
/* keeps the date on one line */