.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

body {
    background-color: #ccccff;
    /*background-color: #dcd0fe;*/
    /*background-image: url('/img/clouds.gif');*/
}

.fs-large {
    font-size: large;
}

.fs-larger {
    font-size: larger;
}

.cursor-default {
    cursor: default;
}

header nav {
    background-color: #097afa;
}

    header nav a {
        color: white !important;
        font-weight: bold;
    }

.navbar-nav {
    width: 100%;
    grid-template-columns: auto auto auto auto;
    grid-gap: 20px;
}

.toWhite {
    filter: brightness(0) invert(1);
}

.border-primary {
    border-color: #6BA3FD !important;
}
.btn-primary{
    color:white;
}

#IndexMain {
}

    #IndexMain img {
        max-height: 250px;
    }

    #IndexMain a {
        text-decoration: none;
        color: black;
    }

        #IndexMain a :hover {
            text-decoration: initial;
            color: #808080;
        }

    #IndexMain section:hover {
        background-color: #d3d3d3a0;
    }

.STWImages img {
    max-height: 250px;
}

.ShareWarmth {
    color: pink;
    font-size: 1.5rem;
    font-weight: 500;
}

#carouselScarves {
    max-width: 350px;
    overflow: hidden;
    background-color: #ade2ff;
}

#carouselHats {
    max-width: 550px;
    overflow: hidden;
    background-color: #ade2ff;
}

#carouselHeadbands {
    max-width: 350px;
    overflow: hidden;
    background-color: #ade2ff;
}

#carouselBootCuffs {
    max-width: 550px;
    overflow: hidden;
    background-color: #ade2ff;
}
/* Modal Images*/
/* The Modal (background) */
.ImageModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.ImageModal-Content {
    margin: auto;
    display: block;
    /*width: 90%;*/
    max-width: 1000px;
    max-height: 90%;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/*.img-magnifier-container {
    position: relative;
}

.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 5px;
    cursor: none;*/
/*Set the size of the magnifier glass:*/
/*width: 250px;
    height: 250px;
}
.img-magnifier-glass:hover {
}*/
.scale-50 {
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

.scale-75 {
    zoom: 0.75;
    -moz-transform: scale(0.75);
}

.scale-100 {
    zoom: 1;
    -moz-transform: scale(1);
}

.scale-125 {
    zoom: 1.25;
    -moz-transform: scale(1.25);
}

.scale-150 {
    zoom: 1.5;
    -moz-transform: scale(1.5);
}

.scale-175 {
    zoom: 1.75;
    -moz-transform: scale(1.75);
}

.scale-200 {
    zoom: 2;
    -moz-transform: scale(2);
}

.scale-250 {
    zoom: 2.5;
    -moz-transform: scale(2.5);
}

.scale-300 {
    zoom: 3;
    -moz-transform: scale(3);
}

.ShowsList {
    /* font-size:x-large;*/
}

#editor {
    border: 2px solid black;
    background-color: white;
}

.ql-toolbar {
    border: 2px solid black;
    background-color: #dddddd;
}

.ql-size-small {
    font-size: 0.75em;
}

.ql-size-large {
    font-size: 1.5em;
}

.ql-size-huge {
    font-size: 2.5em;
}

#MessageForm {
    font-size: x-large;
    font-weight: bold;
}

.carousel-caption {
    background-color: #00000022;
}

#carouselHeadbands .carousel-caption {
    color: black;
    background-color: #EEEEEE22;
}

/* Hide the volume slider */
video::-webkit-media-controls-volume-slider {
    display: none;
}

/* Hide the mute button */
video::-webkit-media-controls-mute-button {
    display: none;
}

#displayContainer table td {
    border: 2px solid black;
    padding: 5px;
}

#displayContainer table {
    width: 100%;
    border-collapse: collapse;
    display: table;
    text-indent: initial;
    unicode-bidi: isolate;
    border-spacing: 2px;
}

#ColorChart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
}

    #ColorChart > div {
        /*background-color: aqua;*/
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100px;
        /*   padding-bottom: 100%;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border: 2px solid #6BA3FD;
        border-radius: .25rem !important;
    }

        #ColorChart > div > div {
            width: 100%;
            text-align: center;
            font-weight: bold;
            background-color: #00000044;
            color: white;
        }

.carousel-fixed-height {
    height: 400px;
    display: flex;
}

    .carousel-fixed-height .carousel-item {
        height: 400px;
    }

        .carousel-fixed-height .carousel-item img {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
        }

.ImageRow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

#carouselHeadbands .carousel-item {
    min-height: 600px;
    background-color: white;
}

#carouselHeadbandsParent {
}

.SideTab {
    position: fixed;
    top: 30%;
    right: 0;
    border-radius: 10px 0px 0px 10px;
    padding: 10px;
    z-index: 1000000;
    writing-mode: vertical-rl; /* Rotate text for vertical alignment */
    white-space: nowrap; /* Prevent text from wrapping */
}

/*#ViewCart {
    position: absolute;
    top: 200px;
    right: 0px;
    transform: rotate(-90deg);
    background: 
}*/

/*$primary: #ADE2FF !default;
$secondary: $gray-600 !default;
$tertiary: #AE3539 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;*/