@font-face {
    font-family: 'Avenir';
    src: url('https://leasing-portal.s3.eu-west-2.amazonaws.com/debranded-styles/fonts/Avenir.ttf');
}

h1 {
    font-family: 'Poppins-Medium';
    padding-bottom: 1.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: uppercase;
}

h2 {
    font-family: Poppins-Medium;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

h3 {
    font-family: Poppins-Medium;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

h4 {
    font-family: Poppins-Medium;
}

p {
    font-family: Poppins-Regular;
}

label {
    font-family: Poppins-SemiBold;
}

.branded-checkbox {
    --tw-border-opacity: 1;
    border: solid 1px;
    background: white;
    border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.branded-checkbox:hover {
    border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.branded-checkbox-checked {
    background: #00adee;
    border-color: #00adee;
}

.branded-check {
    filter: saturate(0%) brightness(100%) contrast(100%);
}

.font-avenir,
.branded-small-text {
    font-family: Avenir;
}

/*Roi Login area*/

.login-form-container {
    /* margin-left: -2rem; */
    padding: 4rem 12rem;
}

@media only screen and (max-width: 1600px) {
    .login-form-container {
        padding: 2rem 4rem;
    }
}

@media only screen and (max-width: 711px) {
    .login-form-container {
        padding: 1rem;
    }
}

.login-header {
    font-family: Avenir;
    font-size: 36px;
}

.login-subheader {
    font-family: Avenir;
    font-size: 18px;
    color: #666666;
}

.login-button {
    color: white;
    font-family: Avenir;

    background-image: linear-gradient(to bottom right,
            #4c2169,
            #25408f) !important;
}

.login-links {
    font-family: Avenir;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    cursor: pointer;
}

.login-privacy-policy {
    font-family: Avenir;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
}

button {
    font-family: Poppins-Medium;
}

button div span {
    font-family: Poppins-Medium;
    color: black;
}

.banner-text {
    font-family: Poppins-Regular;
    color: white;
    font-size: 1.875rem;
    line-height: 2.25rem;
    text-align: left;
    padding-left: 2rem;
    text-transform: uppercase;
}

@media only screen and (min-width: 1536px) {
    .banner-text {
        padding-left: 12rem;
    }
}

.zoomcard-header {
    position: absolute;
    font-family: Poppins-SemiBold;
    text-transform: uppercase;
    top: 2.5rem;
    left: 2.5rem;
}

.zoomcard {
    overflow: hidden;
}

.zoomcard-zoom-image-wrapper {
    height: 100%;
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.demo-subheader {
    font-size: 24px;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.centered-zoomcard,
.zoomcard-text {
    text-transform: uppercase;
}

.centered-zoomcard {
    position: absolute;
    pointer-events: none;
    text-align: center;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    left: 50%;
    top: 50%;
}

.branded-button,
.branded-button-secondary {
    background-color: #00adee;
    color: black;
    border: 1px solid #cddbe0;
    transition-property: all;
    transition-duration: 200ms;
}

.branded-button:hover,
.branded-button-secondary:hover {
    background-color: #43cbfc;
    border: 1px solid #43cbfc;
}

.branded-button:disabled {
    cursor: not-allowed;
    background-color: #666666 !important;
    border-color: #666666 !important;
}

.edit-user-roles-select button:disabled {
    background-color: #666666;
    color: #fff;
}

.branded-uploadbox {
    border: solid 2px #00adee;
}

.clear-filters {
    width: 50%;
}

/*Navbar*/
.navbar-logo-container {
    max-height: 80px;
    max-width: 500px;
    color: white;
    text-transform: uppercase;
}

.leasing-portal-logo {
    max-height: 15px;
    display: inline;
}

.navbar-logo {
    max-height: 80px;
    display: inline;
}

.navbar-title {
    font-family: Avenir;
    color: white;
    text-transform: uppercase;
}

.desktop-nav-tab {
    color: white;
    font-family: Avenir;
    background-color: transparent !important;
}

.language-selector>button {
    height: 24px;
}

.desktop-nav-tab-selected,
.desktop-nav-tab:hover {
    color: white;
    background: transparent;
    font-weight: 700;
}

.desktop-nav-tab-sub-menu button {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.desktop-nav-tab-menu-items {
    color: black;
    font-family: Poppins-Medium;
    font-weight: 700;
    width: 100%;
}

.desktop-nav-tab-brand-selector {
    font-family: Avenir;
}

.navbar-brand-selector-button {
    background: #cccccc;
}

.navbar-brand-selector-list {
    background: #cccccc;
}

.menuDropDownItem-nav-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*brightness 1000 = white 0 = black for colour change hue-rotate value and set a brightness between 0-1000 */
.navbar-icon {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(350deg) brightness(1000%) contrast(119%);
}

.menuDropDownItem-nav-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.agreements-zoomcard-header {
    text-transform: uppercase;
    line-height: 2rem;
    text-align: center;
    left: 50%;
    color: white;
    position: absolute;
    pointer-events: none;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    transition-property: all;
    --tw-translate-y: -50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Table */
.branded-table-header {
    background: #432872;
    white-space: normal !important;
    color: white;
    font-family: Avenir;
    font-weight: 400;
}

.branded-table-row {
    transition-property: all;
    transition-duration: 200ms;
    border-width: 2px;
}

.branded-table-row:hover {
    background: #432872;
    color: white;
}

tr:nth-child(even) td {
    background: #f7f4f9;
}

.branded-pagination {
    font-family: Avenir;
}

.branded-pagination-active {
    background: #432872;
    color: white;
}

/*Date range (3rd party library) specific css */
.branded-date-picker-input .rdrStaticRanges {
    font-family: Poppins-Medium;
}

.branded-date-picker-input .rdrInputRange {
    font-family: Poppins-Medium;
}

.branded-date-picker-input .rdrNextPrevButton {
    background-color: #00adee;
}

.branded-date-picker-input .rdrInRange {
    background-color: #00adee;
}

.branded-date-picker-input .rdrEndEdge {
    background-color: #00adee;
}

.branded-date-picker-input .rdrStartEdge {
    background-color: #00adee;
}

.branded-date-picker-input .rdrDateDisplayWrapper {
    background-color: #00adee;
    font-family: Poppins-Medium;
}

.branded-date-picker-input .rdrMonthAndYearWrapper {
    font-family: Poppins-Medium;
}

.branded-date-picker-input .rdrMonth {
    font-family: Poppins-Medium;
}

.branded-date-picker-input .rdrDayStartPreview {
    border-color: #00adee;
}

.branded-date-picker-input .rdrDayEndPreview {
    border-color: #00adee;
}

.branded-date-picker-input .rdrDayHovered {
    border-color: #00adee;
}

.branded-date-picker-input .rdrDayToday {
    border-bottom-color: #00adee;
}

.branded-date-picker-input .rdrDateDisplayItemActive {
    border-color: #00adee;
}

/*Footer*/
.brand-selector-footer {
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.branded-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-footer {
    color: white !important;
    border-top: solid 1px #e5e7eb;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

.FooterNav {
    margin-right: 10px;
    float: right;
    align-items: center;
}

.FooterNav a,
.FooterNav span {
    margin-right: 10px;
    text-align: right;
}

.FooterLogo {
    max-height: 60px;
    display: block;
    margin: auto;
    max-width: 200px;
}

.toast {
    opacity: 1 !important;
}

.models-container-with-images,
.models-container-without-images {
    display: flex;
    flex-wrap: wrap;
}

/*companyFilter select css*/
.companyFilter__control {
    box-shadow: none !important;
    min-height: 36px !important;
    border: none !important;
    cursor: pointer !important;
}

.companyFilter__control--is-focussed {
    border: none !important;
    cursor: pointer !important;
}

.companyFilter__indicator-separator {
    display: none !important;
}

.companyFilter__placeholder {
    color: #cbd5e0;
}

/*desktop navbar brand portal selector select*/
.client-navbar-selector__control,
.nav-brand-selector__control,
.client-navbar-selector__value-container {
    min-height: 32px !important;
    border-radius: 0 !important;
}

.client-navbar-selector__control:hover,
.nav-brand-selector__control:hover {
    border-color: hsl(0, 0%, 80%) !important;
}

.nav-brand-selector__single-value {
    font-size: 14px !important;
    top: 48% !important;
    margin-left: 10px !important;
}

.client-navbar-selector__indicator-separator,
.nav-brand-selector__indicator-separator {
    display: none !important;
}

.client-navbar-selector__option,
.nav-brand-selector__option {
    font-size: 14px !important;
    width: 200px !important;
    text-align: left !important;
    cursor: pointer !important;
}

.client-navbar-selector__menu-list,
.nav-brand-selector__menu-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 200px !important;
}

.client-navbar-selector__menu,
.nav-brand-selector__menu {
    width: 200px !important;
}

/* Client and Client role navbar selects */
.client-navbar-selector__menu {
    z-index: 21 !important;
}

.client-navbar-selector__single-value,
.client-navbar-selector__placeholder {
    font-size: 14px !important;
    top: 33% !important;
    margin-left: 10px !important;
}

.client-navbar-selector__input {
    position: relative;
    bottom: 5px;
    font-size: 12px;
}

.fg-agreement-detais-header-container {
    background: #ececec;
}

.fg-agreement-detais-header-container p {
    font-size: 18px;
    text-align: left;
}

/*FG Agreement Details Style */

.FG-AD-section-header {
    font-weight: bold;
}

.FG-AD-section-container {
    display: block;
}


/* This is to keep the managed companies for an FMC seperate from the ones you can see due to admin permissions */
.manged-company-dropdown-option,
.manged-company-dropdown-option div {
    color: #ffffff !important;
    background: #c7c7c7 !important;
}

.agreement-details-subheader {
    font-size: 24px;
}

.branded-icon {
    filter: invert(42%) sepia(100%) saturate(1500%) hue-rotate(220deg) brightness(60%) contrast(100%);
}

.tippy-box {
    background-color: #4C2169 !important;
}

.tippy-box[data-theme~='analytics'] {
    background-color: #000 !important;
    font-family: Poppins-Medium;
    font-size: 0.75rem;
}

.tippy-box[data-theme~='configurator'] {
    background-color: #dbeafe !important;
    color: black;
}

.tippy-box[data-placement^='top']>.tippy-arrow::before {
    border-top-color: #000;
}

.tippy-box[data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: #000;
}

.tippy-box[data-placement^='left']>.tippy-arrow::before {
    border-left-color: #000;
}

.tippy-box[data-placement^='right']>.tippy-arrow::before {
    border-right-color: #000;
}

.fiCircle {
    width: 24px;
    height: 24px;
    font-size: 24px;
    border-radius: 100%;
    border: none;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
    background: white;
}

/* Opportunity styling - START */

/* GENERAL */

.opportunity-board {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.opportunity-draggable-card-spacer,
.opportunity-draggable-card-dragging,
.card-over {
    opacity: 0;
}

::backdrop {
    background: #fff;
}

.fullscreen-scroll {
    overflow: auto;
}

@keyframes expandAnimation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.dropped-object {
    animation: expandAnimation 0.5s ease-in-out;
}

.multi-select {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.multi-select.open .multi-select-options {
    display: block;
}

.multi-select-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 12px;
    gap: 10px;
    height: 38px;
    border-radius: 30px;
}

.multi-select-button:hover {
    opacity: 0.7;
}

.multi-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    min-width: 200px
}

.multi-select-options li {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px;
}

.multi-select-options input[type="checkbox"] {
    margin-right: 10px;
}

.circle {
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
    text-align: center;
}

.filter-button {
    padding: 2px 16px;
    gap: 10px;
    border-radius: 30px;
}

.filter-button:hover {
    opacity: 0.7;
}

.opportunity-modal-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 10px;
}

.opportunity-modal-label {
    font-weight: bold;
    margin-bottom: 5px;
    opacity: 0.4;
}

.opportunity-modal-text {
    margin-top: 3px;
}

.opportunity-modal-content {
    overflow: hidden;
}

/* Brand Specific */

.opportunity-column-colors {
    color: #000;
    background-color: #ececec;
}

.opportunity-card-colors {
    border: 1px solid #ccc;
    background-color: #fff;
}

.multi-select-button-colors {
    background: #000;
    color: #fff;
}

#checkbox-black {
    accent-color: #000;
}

.multi-select-options-colors {
    background-color: #fff;
    border: 1px solid #ccc;
}

.multi-select-options li:hover {
    background-color: #f0f0f0;
}

.circle-color {
    background-color: #fff;
    color: #000;
}

.circle-warn {
    background-color: #ff2828;
    color: #fff;
}

.filter-button-color {
    background-color: #ececec;
    color: #000;
}

.opportunity-modal-item {
    flex-basis: calc(50% - 1rem);
    background-color: #f1f1f1;
    border-radius: 5px;
}

/* Opportunity styling - END */

#gjs .gjs-frame-wrapper>* .collapse {
    display: block !important;
}

.reset-table-bg tr td {
    background: white !important;
}

#VehicleDetails .collapse {
    visibility: visible !important;
}

.zero-padding {
    padding: 0 !important;
}

.collapse[id^='collapseOne'],
.collapse[id^='collapseTwo'],
.collapse[id^='collapseSection'] {
    visibility: visible !important;
}

.collapse[id^="navbarNavAltMarkup"] {
    visibility: visible !important;
}

.reset-table-bg tr td {
    background: white !important;
}


.custom-tool-tip {
    width: 500px;
    max-width: 100%;
    border: 1px solid #64d6ff;
    border-radius: 5px;
    background: #64d6ff;
    position: absolute;
    padding: 0.5rem;
    z-index: 20;
    bottom: 135%;
    left: -5%;
    font-size: 14px;
}

.custom-tool-tip-permissions-grid {
    bottom: 170% !important;
}

@media only screen and (max-width: 639px) {
    .custom-tool-tip {
        left: 0%;
    }

    .custom-tool-tip-permissions-grid {
        bottom: 170% !important;
        left: -6% !important;
    }
}

.custom-tool-tip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    border-top: 10px solid #64d6ff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

#language-selector {
    display: none;
}

/* Car config */
.model-box:hover {
    .btn {
        transform: translateY(0);
    }
}

.box-link {
    button:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background-color: #93c5fd80;
        transition: all .35s;
    }

    &:hover {
        button:after {
            width: 100%;
        }
    }
}

.sigCanvas {
    width: 100%;
    border: 1px solid #000;
}

/* Stock Table */

.stock-table tr:nth-child(even) td {
    background-color: rgb(247 244 249 / 1) !important;
}

.DraftEditor-editorContainer {
    z-index: auto !important;
}

/* Events rich text editor */
.rdw-embedded-modal, .rdw-embedded-wrapper{
    display:none !important;
}

.rdw-link-modal{
    height:unset !important;
}