/* UP SCROLLED */
@font-face {
    font-family: "UpScrolled";
    src: url("/assets/layouts/companies/fonts/Generica/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "UpScrolled2";
    src: url("/assets/layouts/companies/fonts/Dna/Presto.eot");
    src: url("/assets/layouts/companies/fonts/Dna/Presto.eot?#iefix") format("embedded-opentype"),
        url("/assets/layouts/companies/fonts/Dna/Presto.woff2") format("woff2"),
        url("/assets/layouts/companies/fonts/Dna/Presto.woff") format("woff"),
        url("/assets/layouts/companies/fonts/Dna/Presto.ttf") format("truetype"),
        url("/assets/layouts/companies/fonts/Dna/Presto.svg#glyphicons_halflingsregular") format("svg");
    font-weight: 600;
}

:root {
    --main-color: #4086CE;
    --secondary-color: #c36;
    --dark-color: #000000;
    --dark-color-two: #1E2151;
    --light-color: #ffffff;
    --light-color-two: #f0efeb;

    --font-family-primary: 'UpScrolled';
    --font-family-secondary: 'UpScrolled2';
}

#featured-1,
#bannerWelcome-2 {
    display: none;
}

.microsoftDiv {
    display: none;
}

.administrtorsCMS .orSpanLogin {
    display: none;
}

.signUpLinkContainer,
#signInWithMagicLinkContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 100px;
    height: 53px;
    cursor: pointer;
    width: fit-content;
    padding: 0 8%;
}

.signUpLinkContainer {
    border: 1px solid rgba(237, 239, 240, 1);
    background-color: #F3F1ED;
}

#signInWithMagicLinkContainer {
    margin-top: 20px;
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
}

#signInWithMagicLink {
    color: var(--light-color);
}

footer {
    background-color: var(--main-color)
}

#brands,
#bannerWelcome-2,
#featured-1 {
    display: none;
}

.button-one {
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
}

.button-one:hover {
    background-color: transparent;
    color: var(--main-color);
}

header {
    text-transform: uppercase;
}

#headerSearchColorButton {
    background-color: var(--secondary-color);
}


#sliderStoryFolders,
.featured-1 {
    display: block;
}

/* Slider Story Folders */
#sliderStoryFolders {
    background: var(--light-color);
    padding: 25px 0;
}

.buttonStoryFolder {
    background-color: var(--light-color-two);
    color: var(--dark-color);
    font-weight: 600;
    font-size: var(--generic-font);
    border-radius: 100px;
    border: 1px solid rgba(208, 208, 208, 1);
    padding: 20px;
    cursor: pointer;
    transition: .5s all ease-in-out;
    width: fit-content;
    text-align: center;
    margin: 0 5px;
    white-space: nowrap;
    text-wrap: nowrap;
}

.buttonStoryFolder span {
    font-weight: 200;
}

#driveCreateCompanyFileButton:hover,
#driveCreateCompanyFolderButton:hover,
#driveCreateCompanyFolder:hover {
    background-color: white;
    border: 1px solid var(--main-color);
}

#driveCreateCompanyFileButton:hover .driveButtonText,
#driveCreateCompanyFolderButton:hover .driveButtonText,
#driveCreateCompanyFolder:hover .driveButtonText {
    color: var(--main-color) !important;
}

.buttonStoryFolder:hover {
    background-color: var(--main-color);
    color: var(--light-color-two);
}

.buttonStoryFolder:hover span {
    color: var(--light-color-two);
}

.driveButton.driveBackgroundColorMain .driveButtonText,
#dropdownUser a,
.myAccounButtonsContainer .driveButton.selected,
.btn-one,
#rightDataSendLink,
#driveMessagePopupButtonText #myAccountButton .driveButtonText,
.driveCompanyAdministratorsStepCardButton a,
.myAccountContainerInformationUpdate,
#signUpDataRegister,
#driveMessagePopupButtonText,
.selectedFilesActionContainer p,
#selectedFilesPopupAmountText,
.downloadBoxFilter.selected,
.downloadBoxFilter.selected span,
.downloadBoxButton:hover .downloadBoxButtonText,
.LUNA-Lens-Tab-Item.selected,
.LUNA-Lens-Tab-Item:hover {
    color: var(--light-color) !important;
}

.btn-one:hover {
    background-color: var(--light-color) !important;
    border: 1px solid var(--light-color) !important;
    color: var(--dark-color) !important;
}

#selectedFilesPopupCloseButton,
.selectedFilesActionContainer .selectedFilesActionIcon img,
.downloadBoxButton:hover img {
    filter: invert(1);
}

#signUpDataRegisterContainer:hover #signUpDataRegister,
#driveMessagePopupButton:hover #driveMessagePopupButtonText {
    color: var(--main-color) !important;
}



#myAccountButton .driveButtonText svg {
    filter: unset;
}

/* #myAccountButton:hover .driveButtonText svg {
    filter: invert();
} */

#myAccountHeaderTitle {
    margin-top: 50px;
}

#visitHubBtn img,
#nav-toggle-burger {
    filter: invert(1);
}

.driveOnOffButton.on .driveOnOffButtonText {
    color: var(--light-color-two);
}

.driveButton.drivePopupRightButton .driveButtonText,
.drivePopupLeftButton:hover .driveButtonText {
    color: var(--light-color-two);
}

.driveButton.drivePopupRightButton:hover .driveButtonText {
    color: var(--dark-color);
}

.driveCompanyAdministratorsMarket {
    color: var(--light-color-two);
}

.driveCompanyAdministratorsAdministratorCard {
    background: var(--light-color);
}

.driveButtonText.dnaLink {
    color: var(--light-color);
    border-bottom: none;
}

.driveCompanyAdministratorsStepCardButton:hover {
    background-color: darkgrey;
}

.driveCompanyAdministratorsIssueContainerDNA {
    background-color: var(--light-color);
}

#rightDataSendLinkContainer:hover #rightDataSendLink {
    color: var(--main-color) !important
}

.driveSearchPopupSearchResultTypeSelected .driveSearchPopupSearchResultTypeText {
    color: var(--light-color) !important
}

.driveSearchPopupSearchFilter.selected {
    color: var(--light-color) !important
}

/* .driveSearchPopupSearchResultElements::-webkit-scrollbar-thumb {
    background: var(--main-color) !important
} */

/* MEDIA LIBRARY */
#driveRootFolderHeader {
    display: none;
}

/* Hide login/signup button from main nav */
#myAccountContainer,
#myAccountContainerMobile {
    display: none !important;
}

/* Move media cart and search to the right when login button is hidden */
#headerRightSideContainer {
    gap: 10px;
}

/* Signup form styling fixes */
#signUpDataInfoText {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Fix all input fields and dropdown */
#signUptDataFirstName,
#signUptDataLastName,
#signUptDataEmail,
#signUptDataPhone,
#signUptDataType {
    padding: 15px !important;
    font-size: 14px !important;
    height: auto !important;
}

/* Fix register button */
#signUpDataRegisterContainer {
    padding: 12px 20px !important;
}

#signUpDataRegister {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Fix checkbox labels in signup form */
#signUpTermsAndConditionsStatement label,
#signUpSubscriptionStatement label {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Fix date tags styling */
.category-wrapper .category {
    background-color: transparent !important;
}

.category-wrapper .category .text {
    color: var(--main-color) !important;
    font-weight: 500 !important;
}

#driveMessagePopup {
    height: auto !important;
    min-height: 220px !important;
}

#driveMessagePopupSafeZone {
    position: relative !important;
    height: auto !important;
    padding-bottom: 20px !important;
}

#driveMessagePopupMessage {
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

#driveMessagePopupButton {
    position: relative !important;
    margin-top: 20px !important;
}

#driveSearchBodyContainer {
    display: none !important;
}

#blogPostViewContentLeftContainer {
    margin-right: 15px !important;
}

#driveFooterMenuItems {
    display: flex !important;
    align-items: center !important;
}

#footerLoginButton {
    border: 2px solid white;
    padding: 7px 12px;
    border-radius: 20px;
}

.blogBlogPostGridButton {
    color: var(--light-color);
}

.blogBlogPostContentButton {
    background-color: var(--main-color);
    border: 2px solid white;
    color: white;
    font-size: 13px;
    padding: 0px 20px 0px 20px;
    border-radius: 20px;
}

.blogBlogPostContentButton:hover {
    color: var(--dark-color);
    background-color: var(--light-color);
    border: 1px solid black;
}

.blogBlogPostContentButton:hover .blogBlogPostContentButtonText {
    color: var(--dark-color) !important;
}

.blogBlogPostGridButton:hover {
    color: var(--dark-color);
    background-color: var(--light-color);
}