@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");

.html,
.html *,
html,
body,
body *,
button,
input,
textarea,
select {
    font-family: "Montserrat", sans-serif !important;
}

/* Mobile and tablet navigation */

@media only screen and (max-width: 1023px) {
    /* Keep the top navigation and expanded menu white */

    .Header__homeContent .Header__navbar,
    .Header__defaultContent .Header__navbar,
    .Header__navopen .Header__navbar,
    .globalnavopen .Header__navbar,
    .Header__navopen .Header__menuTab,
    .globalnavopen .Header__menuTab {
        background-color: #fff !important;
        background-image: none !important;
    }

    /* Always use the black-text logo on mobile */

    .Header__logo img,
    .Header__navopen .Header__logo img,
    .globalnavopen .Header__logo img {
        content: url("https://www.ostratto.com/files/general-branding/logo/Ostratto-logo-vertical-black-Square.png") !important;
        width: auto;
        max-width: 90px;
        max-height: 42px;
        object-fit: contain;
    }

    /* Make the mobile navigation text clearly visible */

    .Header__tabsTab,
    .Header__navopen .Header__tabsTab,
    .globalnavopen .Header__tabsTab,
    .LoginDetail__signin,
    .LoginDetail__signup,
    .CustomizeContainer__aPlus {
        color: #161515 !important;
        opacity: 1 !important;
    }

    /* Active page in Ostratto blue */

    .Header__tabsTab.Header__active,
    .Header__navopen .Header__tabsTab.Header__active,
    .globalnavopen .Header__tabsTab.Header__active {
        color: #0085f2 !important;
    }

    /* Blue mobile menu icon */

    .Header__menu,
    .Header__menu::before,
    .Header__menu::after {
        background-color: #0085f2 !important;
    }

    .Header__menuToggle {
        background-color: transparent !important;
    }
}


/* Desktop navigation */

@media only screen and (min-width: 1024px) {
    .Header__homeContent .Header__navbar,
    .Header__defaultContent .Header__navbar {
        background-color: transparent;
        /*background-image: url("https://www.ostratto.com/files/general-branding/gradients/Gradient-1920x1080.jpg");*/
        background-position: center;
        background-size: cover;
    }
}

/* Brand colour starts here */

.SearchContainer__searchIcon,
.AppContainer__backToTop,
.Button__footerBtn:hover,
.LoginDetail__profileBtn {
    background: #0085f2;
}

.SearchContainer__downArrow {
    border-top-color: #0085f2;
}

.commonStyle__zt3BrandFill {
    fill: #0085f2;
    color: #0085f2;
}

.Header__homeNavbarFixed .Header__navbar .Header__tabsTab.Header__active,
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab:hover,
.globalfixednav .globalSignin:hover,
.globalfixednav .globalSignup:hover,
.globalfixednav .LoginDetail__signin:hover,
.globalfixednav .LoginDetail__signup:hover {
    border-bottom: 0.1875rem solid #0085f2;
    color: #0085f2;
}

.globalfixednav .aPlusIcon:hover,
.Signin__userLink,
.Link__link2,
.Icon__hoverbrand:hover,
.Icon__brand,
.Comment__cmtUsrNme,
.TabFilter__tab:hover,
.ThreadedComment__commentContent a,
.FileUpload__userLink,
.AvatarText__avatarText,
.TopicDetailRightContainer__commentCount > span,
.TopicDetailRightContainer__followerCount > span,
.TopicDetailRightContainer__viewCount > span,
.Button__primaryBorder,
.Button__warningBorder,
.TopicPreview__txtPrimary,
.Pill__pillText,
.NoContent__contentDescription a,
.NoContent__title,
.TopicDetailLeftContainer__creatorName,
.ThreadedComment__userNameType2,
.TopicPreview__creatorName,
.globalfixednav .CustomizeContainer__aPlus:hover,
.ForgetPasswordContainer__userLink,
.Captcha__captchaText,
.communityDetail .description a,
.articleDetail .description a,
.FilterTabs__activeFilter,
.ForumTabs__activeFilter,
.LoginDetail__userMail .commonStyle__zt3Brand,
.TopicListRightContainer__countValue,
.commonStyle__zt3Brand {
    color: #0085f2 !important;
}

.AvatarText__avatarText {
    background: white;
}

.FileUpload__attachPin,
.AvatarText__avatarText,
.Button__primaryBorder,
.Button__warningBorder,
.Pill__pill {
    border-color: #0085f2;
}

.Button__footerBtn {
    background: #0085f2;
}

/* Brand colour ends here */

/* Larger logo on desktop */

@media only screen and (min-width: 1024px) {
    .Header__logo img {
        max-height: none;
        max-width: 100px;
        min-height: auto;
    }

    /* Smaller logo once the desktop navigation becomes fixed */

    .Header__homeNavbarFixed .Header__navbar .Header__logo img {
        content: url("https://www.ostratto.com/files/general-branding/logo/Ostratto-logo-vertical-black-Square.png");
        width: auto;
        max-width: 60px;
        max-height: 45px;
        object-fit: contain;
    }
}

/* Header */

.Header__searchTitle {
    font-weight: 600;
}

.Header__header {
    background-size: cover;
}

.Header__globalSearch {
    margin-top: 40px;
}

.Header__menu,
.Header__menu::after,
.Header__menu::before {
    background-color: #0085f2;
}

.Header__menuToggle {
    background-color: transparent;
}

.Header__homeNavbarFixed .Header__menu,
.Header__homeNavbarFixed .Header__menu::after,
.Header__homeNavbarFixed .Header__menu::before {
    background-color: #0085f2;
}

.Header__homeNavbarFixed .Header__menuToggle {
    background-color: transparent;
}

/* Footer */

.Footer__footerBg {
    padding: 1.875rem 0;
    background-color: transparent;
    background-image: url("https://www.ostratto.com/files/general-branding/gradients/Gradient-1920x1080.jpg");
    background-position: center;
    background-size: cover;
}

.Footer__footerQus {
    font-size: 1.875rem;
    color: #fff;
}

.Footer__footerDescription {
    font-size: 1rem;
    color: #fff;
}

/* Hidden elements */

.ListHeader__listIcon2 > svg {
    display: none;
}

.KbCategory__priveteDept {
    display: none;
}

/* Date widget */

.DateWidget__date:hover {
    border-bottom: 1px solid #0085f2;
}

.DateWidget__dateFocus {
    border-bottom: 1px solid #0085f2;
}

/* Dropdown component */

.DropdownComponent__bccolor {
    background-color: #0085f2;
}

.DropdownComponent__listview {
    border: 1px solid #0085f2;
    box-shadow: 0 0 3px #0085f2;
}

.DropdownComponent__option:hover {
    background: #0085f2;
}

/* Date and time picker */

.DateTime__dateContainer {
    min-width: 19.375rem;
    padding: 0.625rem 0.9375rem;
    background: #fff;
    border-radius: 3px;
    box-shadow:
        0 0 15px rgba(0, 0, 0, 0.15),
        0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.DateTime__topArow {
    width: 0.9375rem;
    height: 0.9375rem;
    background: #fff;
    border-top: 0.0625rem solid #ddd;
    border-right: 0.0625rem solid #ddd;
}

.DateTime__commonStr {
    color: #666;
    font-size: 0.8125rem;
}

.DateTime__sideArows:hover,
.DateTime__datesStr:hover {
    color: #0085f2;
    background: #f5f5f5;
    border-radius: 50%;
}

.DateTime__sunday {
    color: #0085f2;
}

.DateTime__today {
    width: 1.9375rem;
    margin: 0.125rem 0.25rem;
    color: #fff;
    background: #0085f2;
    border-radius: 50%;
    transform: perspective(1px);
}

.DateTime__today:hover {
    color: #fff;
    background: #0085f2;
}

.DateTime__blueBut {
    max-width: 9.25rem;
    padding: 0.188rem 1.25rem;
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    background: #0085f2;
    border: 1px solid #0085f2;
    border-radius: 0.188rem;
}

html[dir="rtl"] .DateTime__blueBut {
    margin-right: 3.125rem;
    margin-left: 0;
}

.DateTime__blueBut:hover {
    border-color: #0085f2;
    box-shadow: 0 0 1px #0085f2;
}

.DateTime__timeStr {
    width: 40px;
    margin: 0 5px 0 10px;
    padding-top: 10px;
    color: #999;
    font-family: inherit;
    font-size: 0.875rem;
}


 * Optional two-column home-page widget layout.
 * Remove this comment wrapper to enable it.
 *
.home .WidgetContainer__list .WidgetContainer__contentList:nth-child(2),
.home .WidgetContainer__list .WidgetContainer__contentList:nth-child(3) {
    float: left;
    width: 50%;
}

@media only screen and (max-width: 1023px) {
    .home .WidgetContainer__list .WidgetContainer__contentList:nth-child(2),
    .home .WidgetContainer__list .WidgetContainer__contentList:nth-child(3) {
        float: none;
        width: 100%;
    }
}

.home .WidgetContainer__list .WidgetContainer__contentList:nth-child(4) {
    clear: both;
}