/* ----------------------------------------------------------------------------------- */
/* -------------------- HEIGHT related changes --------------------------------------- */
/* ----------------------------------------------------------------------------------- */
@media only screen and (max-height: 900px) {
    #header-container {
        height: 3em;
    }

    #portal {
        height: calc(100% - 3em);
        padding-bottom: 0.5em;
    }

    #portal.banner-visible {
        height: calc(100% - 3em - 32px);
    }

    #nav_contents_title {
        height: 2em;
        font-size: 1em;
    }

    #nav_contents {
        height: calc(100% - 2em);
    }

    wc-calendar-view {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    wc-mailbox-overview, wc-addressbook-overview {
        padding-bottom: 0.5em;
    }
}

/* ----------------------------------------------------------------------------------- */
/* -------------------- WIDTH related changes ---------------------------------------- */
/* ----------------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
    #portal {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #side {
        padding-right: 0.5em;
    }

    #small_logo {
        display: unset;
        padding-left: 3.5em;
    }

    #default_logo {
        display: none;
    }

    /* callnote content - behavior on small screens*/
    .mobile-hide {
        display: none;
    }

    .main-right {
        flex-grow: 1;
    }

    wc-mailbox-overview, wc-calendar-view, wc-mailbox-item-details,
    wc-callnote-feedback, wc-addressbook-overview, ce-mailbox-task-widget {
        padding-right: 0.5em;
        padding-left: 0.5em;
    }

    wc-callnote-feedback {
        padding-bottom: 0.5em;
    }

    wc-user-login-details {
        margin-right: 0;
    }
}

/* ------------- special behavior for the homescreen ------*/
@media only screen and (max-width: 899px) {
    #home_feedback, #home_back-to-old, #home_navigation, #home_login {
        height: 180px;
    }

    #home_login {
        right: 0;
        top: -8px;
    }

    #home_navigation {
        top: 144px;
    }

    .center-block {
        margin-top: 252px;
    }
}

@media only screen and (max-height: 1115px) and (max-width: 899px) {
    .welcome-text {
        display: none;
    }
}

@media only screen and (max-height: 1058px) and (max-width: 1392px) {
    #home_feedback {
        display: none;
    }
}

@media only screen and (max-height: 795px) and (max-width: 800px) {
    #home_back-to-old {
        display: none;
    }
}

@media only screen and (max-width: 700px) {
    #ce-free-trial {
        display: none;
    }
}

/*switch to burger menu*/
@media only screen and (max-width: 600px) {
    #home_navigation, #home_back-to-old {
        display: none;
    }

    #home_login {
        height: 140px;
    }

    #home_navigation_small {
        height: 108px;
        display: unset;
    }

    #home_feedback {
        display: unset;
    }


    .center-block {
        margin-top: 130px;
    }

    .welcome-text {
        line-height: 1em;
    }
}

@media only screen and (max-height: 880px) and (max-width: 1120px) {
    #home_back-to-old {
        display: none;
    }

}

@media only screen and (max-height: 950px) and (max-width: 600px) {
    #home_feedback {
        display: none;
    }

    #home_feedback_small {
        display: unset;
        bottom: 30px;
    }
}

@media only screen and (max-height: 730px) and (max-width: 600px) {
    #home_feedback_small {
        display: none;
    }
}


@media only screen and (max-height: 689px) and (max-width: 601px) {
    .welcome-text {
        display: unset;
    }

    .center-block {
        margin-top: 120px;
    }

    #home_navigation {
        display: none;
    }
}


@media only screen and (min-height: 500px) and (max-width: 600px) {
    .welcome-text {
        display: unset;
    }
}

@media only screen and (max-height: 720px) and (min-width: 940px) {
    .center-block {
        margin-top: 90px;
    }
}