@import "base.less";

@media screen and (max-width: 969px) {
    html {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: 100%;
    }
    body {
        margin: 0;
        min-width: 100px;
        padding: 0;
        width: @mobileDefaultWidth;
    }
    .mobile_table_contents {
        background-color: @mobileMenuColor;
        color: @textColorLinkMain;
        cursor: pointer;
        display: block;
        display: block;
        font-size: 14px;
        font-weight: 700;
        height: 40px;
        left: 0;
        padding: 0;
        position: fixed;
        top: 41px;
        width: @mobileDefaultWidth;
        z-index: 999;
        &:after {
            background: url(/images/Site/Icons/search.png) no-repeat 50% 50%;
            border-left: 1px solid #d9d9d9;
            content: '';
            display: block;
            height: 26px;
            position: absolute;
            right: 0;
            top: 7px;
            width: 72px;
        }
        span {
            display: inline-block;
            margin-top: 7px;
            padding: 6px 30px 6px 20px;
            position: relative;
            text-align: left;
            overflow-x: hidden;
            white-space: nowrap;
            max-width: 65%;
            text-overflow: ellipsis;
            &:after {
                background: url(/images/buttons.png) -4px -74px no-repeat;
                content: '';
                display: block;
                height: 20px;
                position: absolute;
                right: 3px;
                top: 3px;
                width: 20px;
            }
        }
    }
    .InnerPage {
        .description {
            border: 0 none;
            margin: 0;
            padding: 15px 20px 20px;
            width: auto;
            .menuleft {
                background-color: @mobileMenuColor;
                .shadowFullCustomizable (@byX: 1px, @byY: 1px, @radius: 2px, @color: rgba(102,102,102,0.8));
                display: none;
                height: auto;
                left: 0;
                margin: 0;
                max-height: 85vh;
                padding: 0;
                position: fixed;
                top: 72px;
                width: @mobileDefaultWidth;
                z-index: 1000;
                ul {
                    &:first-child {
                        padding-top: 60px;
                    }
                    li {
                        padding: 0 10px;
                    }
                }
            }
        }
    }
    .search_line {
        background-color: @mobileMenuColor;
        display: none;
        left: 0;
        padding: 15px 10px;
        position: fixed;
        top: 41px;
        width: @mobileDefaultWidth;
        z-index: 100000;
    }
    .langselector {
        top: 11px;
        div.title {
            span.underline {
                color: transparent;
                width: 0;
            }
        }
    }
    div.custom-select {
        ul.options {
            li.option {
                a {
                    color: transparent;
                    width: 0;
                }
            }
        }
    }
    #LanguageSelector {
        width: 46px;
    }
    div.custom-select.open {
        ul.options {
            width: 21px;
        }
    }
    nav {
        &> div {
            > ul {
                width: 100%;
                padding-top: 0;
                margin: 0;

            }
        ul {
            li {
                display: block;
                width: auto;
                height: auto;
                position: relative;
                    ul {
                        color: @textColorBlackDark;
                        margin: 0;
                        width: auto;
                    }
                    a.menuitem {
                        color: @textColorBlackDark;
                        display: block;
                        height: auto;
                        padding: 15px 25px 15px 40px;
                        text-align: left;
                        margin: 0;
                    }
                }
            }
        }
        a.dropdown-item,
        .navitem_description,
        ul.navitem_2nd_menu li a.nav_2nd_menu_link {
            padding-left: 40px;
        }
        ul.navitem_2nd_menu li a.nav_2nd_menu_link {
            font-weight: 400;
            color: @textColor;
            text-transform: none;
        }
        ul.header_menu {
            color: @textColorBlackDark;
            display: block;
            margin: 0;
            position: absolute;
            top: 71px;
            width: 100%;
        }
    }
    a.dropdown-item {
        white-space: normal;
    }
    #navitem_desktop,
    #navitem_server,
    #navitem_mobile,
    #navitem_api {
        font-weight: 600;
        font-size: 12px;
        line-height: 10px;

        &:hover, &.active, &.active:hover {
            border-color: #F2F2F2;
            color: @textColor;
        }
    }
    .mobile_document_editor #navitem_mobile,
    .mobile_documents_ios #navitem_mobile,
    .mobile_spreadsheet_editor #navitem_mobile,
    .mobile_presentation_editor #navitem_mobile,
    .enterprise_edition #navitem_server,
    .community_server #navitem_server,
    .document_editors #navitem_desktop,
    .media_viewers #navitem_desktop,
    .desktop_editors #navitem_desktop,
    .desktop_windows_version #navitem_desktop,
    .desktop_linux_version #navitem_desktop,
    .api_plugins #navitem_api,
    .api_documentation #navitem_api,
    .mobile_version #navitem_mobile,
    nav ul li a.menuitem.active,
    nav ul li a.menuitem:hover {
        border-color: #F2F2F2;
    }
    .menuitem {
        border-bottom: 1px solid #F2F2F2;
        &:before {
            display: block;
            content: '';
            width: 10px;
            height: 10px;
            background-image: url(/images/arrow-gray.svg);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: auto 100%;
            position: absolute;
            left: 17px;
            top: 14px;
            -webkit-transition: 0.1s linear;
            -moz-transition: 0.1s linear;
            -o-transition: 0.1s linear;
            transition: 0.1s linear;
        }
        &.active {
            text-align: center;
            &:before {
                -moz-transform: rotate( 180deg );
                -ms-transform: rotate( 180deg );
                -o-transform: rotate( 180deg );
                -webkit-transform: rotate( 180deg );
                transform: rotate( 180deg );
                -webkit-transition: 0.1s linear;
                -moz-transition: 0.1s linear;
                -o-transition: 0.1s linear;
                transition: 0.1s linear;
            }
        }
    }
    ul.navitem_2nd_menu {
        padding-bottom: 0;
    }
    .dropdown-content {
        li {
            border-bottom: 1px solid #F2F2F2;

            &:last-of-type {
                border-bottom: 0 none;
            }
        }
    }
    .navitem_description {
        border-bottom: 1px solid #F2F2F2;
    }
    .mobile_no_link {
        display: block !important;
        &:before {
            display: block;
            content: '';
            width: 10px;
            height: 10px;
            background-image: url(/images/arrow-red.svg);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: auto 100%;
            position: absolute;
            left: 17px;
            top: 14px;
                -moz-transform: rotate( 90deg );
                -ms-transform: rotate( 90deg );
                -o-transform: rotate( 90deg );
                -webkit-transform: rotate( 90deg );
                transform: rotate( 90deg );
                -webkit-transition: 0.1s linear;
                -moz-transition: 0.1s linear;
                -o-transition: 0.1s linear;
                transition: 0.1s linear;
        }
        &.active {
            &:before {
                -moz-transform: rotate( -90deg );
                -ms-transform: rotate( -90deg );
                -o-transform: rotate( -90deg );
                -webkit-transform: rotate( -90deg );
                transform: rotate( -90deg );
                -webkit-transition: 0.1s linear;
                -moz-transition: 0.1s linear;
                -o-transition: 0.1s linear;
                transition: 0.1s linear;
            }
        }
    }
    .block_also {
        display: none !important;
    }
    .bottommenu {
        display: none !important;
    }
    #floatSubMenu {
        display: none !important;
    }
    .undertop {
        margin: 0;
        padding: 80px 20px 0;
        width: auto;
    }
    footer {
        position: relative;
    }
    header {
        width: 100%;
        padding: 0;
        z-index: 10000;
        height: 40px;
		position: fixed;

		&.fixed{
			position: fixed;
			top: 0;
		}
    }
    .narrowheader {
        width: 100%;
        .logo {
            margin-left: 60px;
            z-index: 10000000;
            height: 40px;
            background-size: auto 24px;

            a {
                height: 40px;
            }
        }
    }
    .copyReserved {
        height: 33px;
        margin-left: 0;
        padding: 17px 0 0 20px;
        text-align: left;
    }
    #back-top {
        bottom: 50px;
        left: auto;
        margin: 0;
        padding: 0;
        right: 20px;
        a {
            .borderRadius (0);
            height: 50px;
            width: 50px;
        }
    }
    .logo {
        margin-left: 60px;
        z-index: 10000000;
    }
    .ham_menu {
        cursor: pointer;
        display: block;
        height: 18px;
        left: 0;
        margin: 0;
        padding: 13px 16px 9px;
        position: absolute;
        top: 0;
        width: 30px;
        z-index: 10000000;
        span {
            background-color: @textColorBlackDark;
            display: block;
            height: 2px;
            margin: 0 0 4px;
            width: 18px;
        }
    }
    .video_trips {
        .video_block {
            float: none;
        }
    }
    .MainHelpCenter {
        p {
            img {
                max-width: @mobileDefaultWidth;
                vertical-align: middle;
            }
        }
        table {
            width: 100%;
        }
        .video_ground {
            .video_block {
                margin-left: 0;
            }
        }
        img.screen_guides {
            display: none;
        }
        .block_of_step {
            .screen_block {
                max-width: @mobileDefaultWidth;
                width: auto;
            }
        }
    }
    .VideoMainContainer {
        width: 98%;
        iframe {
            height: 51vw;
            width: @mobileDefaultWidth;
        }
    }
    .bigVideoCont {
        iframe {
            height: 51vw;
            width: @mobileDefaultWidth;
        }
    }
    .textHelpContainer {
        height: auto;
        width: 98%;
        h5 {
            margin-left: 0;
        }
    }
    .text-content {
        ul {
            margin: 0;
        }
    }
    .watchvideo_block {
        display: none;
    }
    .bigphoto_screen {
        border: 1px solid @helpBorderColor;
        display: inline-block;
        margin: 10px 0 20px;
        max-width: @mobileDefaultWidth;
    }
    .GettingStarted {
        .screen_block {
            max-width: @mobileDefaultWidth;
        }
    }
    #navitem_desktop,
    #navitem_server,
    #navitem_api {
        border-color: #f2f2f2;
    }
}
@media screen and (max-width: 429px) {
    span.toggler {
        position: relative;
    }
}
@media screen and (max-width: 500px) {
    .page_download_button {
        .download_button_description {
            float: none;
            margin: 20px 0 0;
        }
    }
}