:root {
    --primary: #000000;
    --primary-rgb: 0,0,0;
}

.font-sm { font-size: 0.875rem; }
main { position: relative; }



.text-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.border-primary {
    border-color: var(--primary) !important;
}
.no-border-radius {
    border-radius: 0;
}
.border-radius-top {
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
}
.border-radius-top-right {
    border-top-right-radius: .25rem;
}
.border-radius-top-left {
    border-top-left-radius: .25rem;
}

a, .btn-link {
    text-decoration: none;
}
a:hover, .btn-link:hover {
    text-decoration: underline;
}

a.active {
    color: var(--primary) !important;
    font-weight: bold;
    border-bottom: 2px solid var(--primary);
}
a.active:hover {
    border-bottom-color: transparent;
}
a.text-primary:hover,
a.text-primary:focus {
    color: var(--primary) !important;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary.focus,
.btn-primary:focus{
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn.disabled, 
.btn:disabled {
    filter: grayscale(50%);
}

.btn:hover {
    filter: opacity(.8);
}
.btn-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary.shadow.focus, .btn-primary.shadow:focus {
    outline-style: auto;
    outline-width: medium;
    outline-color: var(--light);
}


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

.form-control:focus,
.btn:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb),.5);
}
.form-control:focus {
    border-color: var(--primary);
}



.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(var(--primary-rgb),.1);
}

.disableWithOverlay {
    position: relative;
}
.disableWithOverlay:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: ' ';
    background: rgba(255,255,255,.5);
    cursor: default;
}

.highlight {
    background-color: rgba(var(--primary-rgb),.1);
}

.small, small {
    font-size: 0.8rem;
}

/*dl {
            display: flex;
            flex-flow: row wrap;
        }
        dt {
            flex-basis: 33%;
            text-align: right;
        }*/
dt::after {
    content: ":";
}
/*
        dd {
            flex-basis: 66%;
            flex-grow: 1;
            padding-left: 5px;
        }*/

/* Custom Sidebar Filter Height, Expand/Collapse */
#SidebarFilters .collapsible {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    transition: max-height 0.3s;
}
#SidebarFilters .collapsible.collapsed {
    max-height: 0px;
    transition-timing-function: ease-out;
}
#SidebarFilters .collapsible.expanded {
    transition-timing-function: ease-in;
    max-height: 240px;
}
#SidebarFilters .collapsible.expanded.multiplesearch {
    max-height: 360px;
}

#SidebarFilters > .dropdown-divider { /* fix for broken hr.dropdown-divider styles, when not used within an actual dropdown */
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--bs-border-color);
    margin: 0.5rem 0;
}


.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb),.1);
}

/* Branded Checkboxes */
.form-check-input:focus:not(:checked) {
    border-color: var(--primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb),.1);
}
.form-check-input:checked {
    color: #fff;
    border-color: var(--primary);
    background-color: var(--primary);
}
.form-check-input:not(:disabled):active {
    color: #fff;
    border-color: var(--secondary);
    background-color: var(--secondary);
}

/* Branded Close Buttons */
.btn-close:focus {
    box-shadow: var(--primary);
}

#ProductsPage .ProductTile .ActionBar { display: none; }
#ProductsPage .ProductTile:hover .ActionBar { display: flex; }
.ActionBar .dropdown-toggle:after { display: none; }

.dropdown > .btn { border: none; }
.dropdown-item { cursor: pointer; }

.AssetTile .bgImage,
.ProductTile .bgImage {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 150px;
}
.ProductTile .bgImage {
    width: 150px;
}
.thumbnail {
    margin: auto;
    width: 100%;
    height: 150px;
    text-align: center;
}
.thumbnail svg {
    width: 100px;
    height: 150px;
    max-width: 100%;
    color: var(--primary);
    user-select: none;
}

#ProductsPage .ProductTile {
    cursor: pointer;
    border-left: 2px solid transparent;
}
#ProductsPage .ProductTile.selected {
    border-left: 2px solid var(--primary);
}

.AssetTile {
    border-width: 2px;
}
.AssetTile .card {
    cursor: pointer;
}
.AssetTile.card:hover {
    background-color: rgba(0, 0, 0, .1);
}
.AssetTile .hoverLayer {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.AssetTile .card:hover .hoverLayer { display: block; }

.AssetTile .actions {
    position: absolute;
}

.MenuDropDown-Separator {
    border-top: 1px solid lightgrey;
}

.dont-break-out {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.fadeToShow, .fadeToHide {
    -webkit-transition: opacity linear 1s;
    -o-transition: opacity linear 1s;
    transition: opacity linear 1s;
}
.fadeToShow { opacity: 1; }
.fadeToHide { opacity: 0; }

/* Keyframes for SVG Logo animation */
@keyframes fadeGroup1 {
    0% { opacity: 1; }
    30% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeGroup2 {
    0% { opacity: 1; }
    10% { opacity: 1; }
    40% { opacity: 0; }
    60% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes fadeGroup3 {
    0% { opacity: 1; }
    20% { opacity: 1; }
    50% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes fadeGroup4 {
    0% { opacity: 1; }
    30% { opacity: 1; }
    50% { opacity: 0; }
    70% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes fadeGroup5  {
    0% { opacity: 1; }
    40% { opacity: 1; }
    50% { opacity: .25; }
    60% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes rotation {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
        -webkit-transform: rotate(900deg);
        -ms-transform: rotate(900deg);
        transform: rotate(900deg);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        -webkit-transform: rotate(1800deg);
        -ms-transform: rotate(1800deg);
        transform: rotate(1800deg);
    }
}
.loadingLogo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,.5);
    z-index: 2000;
}
.loadingLogo div {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.loadingLogo.rotateAnimation svg {
    -webkit-animation: rotation 2.2s infinite;
    animation: rotation 2.2s infinite;
}
.loadingLogo.fadeAnimation svg .r1,
.loadingLogo.fadeAnimation svg .r10 {
    -webkit-animation: fadeGroup1 1.5s ease 0s infinite normal;
    animation: fadeGroup1 1.5s ease 0s infinite normal;
}
.loadingLogo.fadeAnimation svg .r2,
.loadingLogo.fadeAnimation svg .r9 {
    -webkit-animation: fadeGroup2 1.5s ease 0s infinite normal;
    animation: fadeGroup2 1.5s ease 0s infinite normal;
}

.loadingLogo.fadeAnimation svg .r3,
.loadingLogo.fadeAnimation svg .r8 {
    -webkit-animation: fadeGroup3 1.5s ease 0s infinite normal;
    animation: fadeGroup3 1.5s ease 0s infinite normal;
}

.loadingLogo.fadeAnimation svg .r4,
.loadingLogo.fadeAnimation svg .r7 {
    -webkit-animation: fadeGroup4 1.5s ease 0s infinite normal;
    animation: fadeGroup4 1.5s ease 0s infinite normal;
}

.loadingLogo.fadeAnimation svg .r5,
.loadingLogo.fadeAnimation svg .r6 {
    -webkit-animation: fadeGroup5 1.5s ease 0s infinite normal;
    animation: fadeGroup5 1.5s ease 0s infinite normal;
}

.validation-errors {
    color: red;
}

.download-container {
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
    width: 350px;
    bottom: 0px;
    position: fixed;
}

.download-flex-container {
    display: flex;
    flex-direction: column;
    position: absolute;
}
/*
#download-button {
    border: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
*/
#download-dropdown {
    width: 100%;
    z-index: 1050;
    background: white;
}

#download-scrollbox {
    overflow-y: scroll;
    height: 150px;
    width: 100%;
}

.download-option {    
    width: 100%;
    padding: 5px;
    border-bottom: 1px solid #e8e8e8;
}

input::-webkit-calendar-picker-indicator {
    display: none;
}

/* Works on Chrome/Edge/Safari */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(var(--primary-rgb),.2);
    min-height: 1.5em;
}
html { /* Firefox */
    scrollbar-color: rgba(var(--primary-rgb),.2) transparent; /* <thumb-color> <track-color> */
    scrollbar-width: thin;
}


.loadingLogo svg .bar {
    fill: var(--primary);
}

/* Default Home Page Hero section */

.hero {
    min-height: 240px;
}

.hero .copywrap {
    position: absolute;
    top: 0;
    width: 100%;
    color: #fff;
    background: #000000;
}

.hero .copybox {
    margin: 13em auto 0 5em;
    float: left;
    width: 50%;
}

.hero .copybox.center {
    margin: 2em auto !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-items: center;
    float: none;
    width: 80%;
}

.header-content-left,
.header-content-left-inner,
.header-content-right {
    /*display: inline-flex;*/
    margin: 10px;
}

.header-content-left,
.header-content-left-inner {
    text-align: right;
}

.header-light-text {
    font-size: 1em;
}

.header-bold-text {
    font-weight: bold;
    font-size: 2em;
}

/* Syndigo Brandmark SVG styles */
.header-content-right > svg {
    margin: 30px;
    transform: scale(.75) translate(-40px, 0);
}
/* End Default Home Page Hero section */