:root {
    --nickel: #727778ff;
    --platinum: #E1E3E2ff;
    --raisin-black: #1A1D24ff;
    --wine: #581D2Cff;
    --rose-ebony: #67464Cff;
    --pale-blue: #f0f0f0;
}

.btn-nickel, .btn-nickel:hover {background-color: var(--nickel)}
.btn-platinum, .btn-platinum:hover {background-color: var(--platinum)}
.btn-raisin-black, .btn-raisin-black:hover {background-color: var(--raisin-black)}
.btn-wine, .btn-wine:hover {background-color: var(--wine)}
.btn-rose-ebony, .btn-rose-ebony:hover {background-color: var(--rose-ebony)}
.btn-pale-blue, .btn-pale-blue:hover {background-color: var(--pale-blue)}

.bg-nickel {background-color: var(--nickel)}
.bg-platinum {background-color: var(--platinum)}
.bg-raisin-black {background-color: var(--raisin-black)}
.bg-wine {background-color: var(--wine)}
.bg-rose-ebony {background-color: var(--rose-ebony)}
.bg-pale-blue {background-color: var(--pale-blue)}

.fs-10pt {
    font-size:10pt;
}

#promo {
    background: url("../img/hero-bg.png") no-repeat;
    background-size: cover;
    height: 100%;
    background-position-x: 70%, right;
    background-position-y: 80%, bottom;
}

#container-text {
    height: 50%;
    text-align: left;
    padding: 15px 25px;
}

.hero-text {
    font-size: 2em;
    padding-top: 1em;
    padding-top: 50px;
}

@media (min-width: 768px) {
    #jumbo-text {
        width: 50%;
        margin: 0px 50px;
    }
}

img {
    width: 200%;
}

.navbar-dark .navbar-brand {
    width: 30%;
    max-width: 165px;
}

.h1,
h1 {
    font-size: 1.5rem;
}

@media (min-width: 300px) {
    img {
        width: 225px;
    }
}

@media (min-width: 768px) {
    #left-nav-cont {
        height: 100vh;
    }
}

@media (min-width: 300px) {
    #left-nav-cont {
        height: 100vh;
    }
}

@media (min-width: 768px) {
    #left-nav-row {
        height: 100%;
    }
}

@media (min-width: 300px) {
    #left-nav-row {
        height: 100%;
    }
}

#action-menu {
    height: 100%;
    background-color: var(--raisin-black);
}

input:focus {
    outline: none;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--raisin-black);
    border-color: var(--platinum);
}

.btn-primary.focus,
.btn-primary:focus {
    color: #fff;
    border-color: var(--gray);
    box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
}

.btn-primary {
    color: var(--raisin-black);
    background-color: var(--light);
    border-color: var(--raisin-black);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--nickel);
    border-color: var(--nickel);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--raisin-black);
    border-color: var(--raisin-black);
}

.btn-outline-primary {
    color: var(--raisin-black);
    border-color: var(--raisin-black);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--raisin-black);
    border-color: var(--raisin-black);
}

.dropdown-item:focus,
.dropdown-item.new-folder:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #e9ecef;
    border-radius: 11px 11px 0px 0px;
}

.checkout-top-margin {
    padding: 0px 0px;
}

@media screen and (min-width: 300px) and (max-width: 767px) {
    .row.row-bottom {
        border-radius: 0px 0px 10px 10px;
    }
}

@media (min-width: 768px) {
    .row.row-bottom {
        border-radius: 0px 0px 10px 0px;
    }
}

@media screen and (min-width: 992px) {
    .checkout-top-margin {
        padding: 80px 0px;
    }
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--raisin-black);
}

.modal-header {}