#header { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #f7f8f8; height: 75px; font-family: AlbertaSans, Roboto, sans-serif; letter-spacing: 0.1px; font-size: 12px; vertical-align: middle; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background-color: white; border-bottom: 1px solid #E8E8E8 !important; box-shadow: unset; color: #1A2533; transition: box-shadow 0.5s ease, top 0.3s ease, bottom 0.3s ease; } #header * { color: #1A2533; } body.show_header_flag #header { height: 95px; } body.non-sticky #header { position: relative !important; } body.glass #header { background: rgba(255, 255, 255, 0.33); backdrop-filter: blur(10.9px); -webkit-backdrop-filter: blur(10.9px); height: 75px !important; } body.glass #header .nav-button, body.glass #header #header_flag, body.glass #header .navbar-toggler-stripes { display: none; } body.glass #header .navbar UL { justify-content: flex-end; } #header.header-shadow { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); } #header.overflow-hidden { overflow: hidden; } #header .container { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; display: flex; align-items: center; } @media (min-width: 1200px) { BODY:not(.full-width) #header .container { max-width: 1500px; } } #mega-menu .overlay { display: none; position: fixed; top: 75px; left: 0; right: 0; bottom: 0; background: #C2D2DB; opacity: 0.71; z-index: -1; } #mega-menu { position: fixed; top: 75px; left: 0; bottom: 0; z-index: 1; } #mega-menu *::-webkit-scrollbar { width: 7px; height: 7px; } #mega-menu *::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.45); border-radius: 10px; box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px; } #mega-menu *:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.55); } body.show_header_flag #mega-menu { top: 95px; } #mega-menu-close { position: fixed; top: 75px; left: 0; right: 0; bottom: 0; z-index: 0; background-color: #000000B3; opacity: 0; transition: opacity 0.5s ease; height: 0; } #header #navbar-toggler-chb:checked ~ #mega-menu-close { opacity: 1; height: 100%; } body.show_header_flag #mega-menu-close { top: 95px; } #mega-menu #nav-functional { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; flex-direction: column; justify-content: space-around; width: 100%; } #mega-menu #nav-functional.has-items { padding-bottom: 40px; } @media (min-width: 1200px) { #mega-menu .container { max-width: 1200px; } BODY.full-width #mega-menu .container { margin-left: 0; } } #mega-menu .container { position: relative; background-color: #ffffff; overflow: auto; width: fit-content; width: 315px; max-width: 100%; margin: 0; height: 100%; align-items: flex-start; padding: 0; } #mega-menu .container UL > LI { order: unset !important; border-bottom: 1px solid #E8E8E8; } #mega-menu .container .others a[class*='others-']{ display: none !important; } #mega-menu .container UL > LI:last-child { border-bottom: 0; } #mega-menu .container .nav-link, #mega-menu .container .nav-button, #mega-menu .container .header_menu_label, #mega-menu .container .header_menu_drawer { width: 100%; border-radius: 0 !important; } #mega-menu .container .nav-hideTop, .bottom-styling #mega-menu .container .nav-bottom, #mega-menu .container .nav-upload { display: none !important; } #mega-menu .container .nav-link, #mega-menu .container .header_menu_label { font-size: 20px !important; height: 55px !important; background-color: white !important; margin: 0 !important; } #mega-menu .container .nav-link:hover, #mega-menu .container .header_menu_wrap .header_menu_label.open { color: #1A2533 !important; font-weight: bold; } #mega-menu .container .header_menu_drawer { right: 0 !important; left: 0 !important; position: unset !important; text-align: left; border-radius: 0 !important; box-shadow: unset !important; } #mega-menu .container .header_menu_label { background-size: 14px auto !important; padding-right: 65px !important; background-position-x: calc(100% - 25px) !important; } #mega-menu .container .header_menu_wrap .header_menu_label.open { background-image: url(/images/UI_icons/inputs/dropdown_active.svg) !important; } #mega-menu .container .header_menu_wrap .header_menu_label.open:after { display: none; } #mega-menu .container #lang_switch .header_menu_label { font-size: 16px !important; } #mega-menu .container #lang_switch .header_menu_label img { width: 20px; margin-right: 5px; } #mega-menu .header_menu_wrap .header_menu_drawer .drawer-item .desc { display: block; } #mega-menu .container #signup, #mega-menu .container #login_button { font-size: 20px !important; height: 55px !important; background: white !important; margin: 0 !important; color: #1a2533; width: 100%; } #mega-menu .container #login_button span { color: #1a2533 !important; } #header A { text-decoration: none; } #header NAV *, #header #mega-menu * { box-sizing: border-box; } #header .dropdown-item { font-size: 14px; } #header .dropdown-item span i { text-align: center; width: 25px; margin-right: 5px; font-family: "Font Awesome 5 Pro"; } BODY.scrolled #header { box-shadow: 0px 0px 30px 0px #07265f1a; } BODY.scrolled.glass #header { background: rgba(255, 255, 255, 0.33); backdrop-filter: blur(10.9px); -webkit-backdrop-filter: blur(10.9px); } #header .navbar-brand { display: inline-block; vertical-align: middle; } #header .logo { height: 35px; cursor: pointer; float: right; } #header .logo_white { display: none; } #header #berga_logo { display: inline-block; vertical-align: middle; width: 100px; height: 40px; margin: 0 20px 0 20px; background-repeat: no-repeat; background-image: url( '/berga_foto/images/berga_foto_logo.png' ); background-size: contain; } #header .container > .nav-left { padding-left: 20px; padding-right: 10px; } #header .header_menu_wrap .header_menu_label { background: none; padding: 0 30px 0 15px; border-radius: 8px; height: 42px; font-size: 16px; line-height: 21px; display: inline-flex; align-items: center; background-image: url(/images/UI_icons/inputs/dropdown_grey.svg); background-repeat: no-repeat; background-position-x: calc(100% - 11px); background-position-y: calc(50% + 1px); transition: background-color 0.5s ease, color 0.5s ease; cursor: pointer; } #header .header_menu_wrap .header_menu_label.open:after { content: ''; display: block; height: 15px; z-index: 1; position: absolute; bottom: -10px; left: 0; right: 0; } #header .header_menu_wrap:hover .header_menu_label, #header .header_menu_wrap .header_menu_label.open { background-color: #F5F5F5; background-image: url(/images/UI_icons/inputs/dropdown.svg); color: #1A2533; } #header .header_menu_wrap .header_menu_drawer { display: flex; max-height: 0; background: white; position: absolute; border-radius: 10px; flex-direction: column; box-shadow: 0px 0px 10px 0px #00000033; transition: 0.5s ease; overflow: hidden; flex-wrap: nowrap; align-items: flex-start; opacity: 0; top: calc(100% + 10px); max-width: calc(100vw - 30px); } #header .header_menu_wrap .header_menu_drawer { left: -50px; } #header .header_menu_wrap .header_menu_drawer.right { left: unset; right: 0; } #header .header_menu_wrap .header_menu_label.open + .header_menu_drawer { max-height: 1000px; opacity: 1; } #header .header_menu_wrap .header_menu_drawer .drawer-item { margin-right: 0; padding: 10px 20px; transition: background-color 0.5s ease; cursor: pointer; width: 100%; line-height: 20px; border-radius: unset; } #header .header_menu_wrap .header_menu_drawer .drawer-item:hover { background-color: #F5F5F5; } #header .header_menu_wrap .header_menu_drawer .drawer-item:first-child { margin-top: 5px; } #header .header_menu_wrap .header_menu_drawer .drawer-item:last-child { margin-bottom: 5px; } #header .header_menu_wrap .header_menu_drawer .drawer-item a { line-height: 21px; } #header .header_menu_wrap .header_menu_drawer .drawer-item .desc { display: block; color: #8B8B8B; font-size: 14px; line-height: 19px; margin-top: 5px; } #header .header_menu_wrap .header_menu_drawer .drawer-item .drawer-item-new { height: 21px; padding: 0 10px; border-radius: 11px; font-size: 10px; display: inline-flex; color: white; font-weight: bold; margin-left: 10px; background-color: #31BF1F; } #header .header_menu_wrap .header_menu_drawer .withicon { padding-left: 50px; background-repeat: no-repeat; background-position-x: 15px; background-position-y: center; background-size: 17px 20px; } #header .header_menu_wrap .header_menu_drawer .SyncShare, #header .header_menu_wrap .header_menu_drawer .SellFiles, #header .header_menu_wrap .header_menu_drawer .PublicProfiles, #header .header_menu_wrap .header_menu_drawer .SportEvents, #header .header_menu_wrap .header_menu_drawer .ServerRental, #header .header_menu_wrap .header_menu_drawer .Backup, #header .header_menu_wrap .header_menu_drawer .Filebox { flex-direction: column; align-items: flex-start; } #header .header_menu_wrap .header_menu_drawer .SyncShare { background-image: url(/images/UI_icons/transfer.svg); } #header .header_menu_wrap .header_menu_drawer .SellFiles { background-image: url(/images/UI_icons/cart.svg); } #header .header_menu_wrap .header_menu_drawer .SportEvents { background-image: url(/images/UI_icons/football.svg); } #header .header_menu_wrap .header_menu_drawer .PublicProfiles { background-image: url(/images/UI_icons/images.svg); } #header .header_menu_wrap .header_menu_drawer .ServerRental { background-image: url(/images/UI_icons/servers.svg); } #header .header_menu_wrap .header_menu_drawer .Filebox { background-image: url(/images/UI_icons/file_upload.svg); } #header .header_menu_wrap .header_menu_drawer .Useroutline { background-image: url(/images/UI_icons/earth.svg); } #header .header_menu_wrap .header_menu_drawer .Eparakts { background-image: url(/images/UI_icons/eParaksts.svg); } #header .header_menu_wrap .header_menu_drawer .DVS { background-image: url(/images/UI_icons/briefcase.svg); } #header .header_menu_wrap .header_menu_drawer .Print { background-image: url(/images/UI_icons/print.svg); } #header .header_menu_wrap .header_menu_drawer .Cup { background-image: url(/images/UI_icons/cup.svg); } #header .header_menu_wrap .header_menu_drawer .VideoCall { background-image: url(/images/UI_icons/videocall.svg); } #header .header_menu_wrap .header_menu_drawer .ConvertPDF { background-image: url(/images/UI_icons/convert_pdf.svg); } #header .header_menu_wrap .header_menu_drawer .ConvertMp4 { background-image: url(/images/UI_icons/convert_video.svg); } #header .header_menu_wrap .header_menu_drawer .Folders { background-image: url(/images/UI_icons/folder_open.svg); } #header .header_menu_wrap .header_menu_drawer .Cog { background-image: url(/images/UI_icons/gear.svg); } #header .header_menu_wrap .header_menu_drawer .Chat { background-image: url(/images/UI_icons/chat.svg); } #header .header_menu_wrap .header_menu_drawer .Cart { background-image: url(/images/UI_icons/cart.svg); } #header .header_menu_wrap .header_menu_drawer .Page { background-image: url(/images/UI_icons/paper.svg); } #header .header_menu_wrap .header_menu_drawer .Users { background-image: url(/images/UI_icons/users.svg); } #header .header_menu_wrap .header_menu_drawer .Logout { background-image: url(/images/UI_icons/signout.svg); } #header .header_menu_wrap .header_menu_drawer .Structure { background-image: url(/images/UI_icons/hierarchy.svg); } #header .header_menu_wrap .header_menu_drawer .Briefcase { background-image: url(/images/UI_icons/briefcase.svg); } #header .header_menu_wrap .header_menu_drawer div.seperator { width: 85%; border-bottom: 1px solid #E3E3E3; padding: 0; margin: 5px auto; } #header .only-bottom { font-size: 0; } #header .navbar { padding: 0; height: 75px; text-align: left; overflow: hidden; display: inline-flex; align-items: center; flex-grow: 1; justify-content: flex-start; overflow: visible; z-index: 2; } #header .navbar UL { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; flex-grow: 1; /* align-items: center; */ } #header .navbar UL LI { position: relative; /*** stop elements becoming blurry when translate places them on a "half-pixel" ***/ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; white-space: nowrap; display: none; } #header .navbar UL LI.nav-upload, #header .navbar UL LI.nav-hideTop { display: none !important; } #header .navbar UL LI.showonfirstload_small { display: block; } /*** Align items to the right ***/ #header .navbar UL LI.nav-right { margin-left: auto; margin-right: 6px; } #header .navbar UL LI.nav-right > a { padding: 0 30px; } #header .navbar UL LI.nav-right ~ LI.nav-right { margin: 0 6px; font-weight: bold; } /***/ #header .navbar UL LI IMG { height: 17px; } /*** position block middle ***/ #header .navbar UL LI .block-middle { position: relative; /*** Move the element down half (or 50%) of the parent's height. ***/ top: 50%; /*** Move the element back up half (or -50%) of it's own height. ***/ -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #header UL LI A { font-family: AlbertaSans, Roboto, sans-serif; letter-spacing: 0.1px; font-size: 16px; } #header UL LI.nav-button A{ position: relative; padding: 0 15px; border-radius: 8px; min-height: 42px; font-size: 16px; display: inline-flex; line-height: 21px; align-items: center; transition: background-color 0.5s ease, color 0.5s ease; } #header UL LI.nav-button A:hover { background-color: #F5F5F5; } #header UL LI.nav-button.darker A { background-color: #EBEBEB; color: #242424; } #header UL LI.nav-button.darker A:hover { background-color: #d8d8d8; } #header UL LI.nav-button.darker.blue A { background-color: #E1EDFD; color: #1A2533; } #header UL LI.nav-button.darker.blue A:hover { background-color: #c8defc; } #header UL LI.nav-button.red A { background-color: #EE2B3A; color: white; } #header UL LI.nav-button.red A:hover { background-color: #e58327; } #header UL LI.nav-button A.has-badge { padding-right: 30px; } #header UL LI.nav-button A.has-badge:after { position: absolute; width: 20px; height: 20px; top: 4px; right: 5px; content: attr(data-content); background: #fa4251; border-radius: 50%; line-height: 20px; text-align: center; color: #fff; font-size: 12px; overflow: hidden; } #header #mega-menu UL LI.nav-button A.has-badge:after { top: 18px; right: auto; left: 0px; } #header UL LI.nav-button A .bottom { display: none; } #header .navbar-toggler { } #header .navbar-toggler:checked + label:after { display: none; } #header .navbar-toggler-stripes { float: left; width: 18px; height: 17px; cursor: pointer; background-repeat: no-repeat !important; background-position: left center !important; background-image: url(/images/UI_icons/burger_menu.svg); background-size: 17px; vertical-align: middle; padding: 0; } #header .navbar-toggler:checked + .navbar-toggler-stripes { background-image: url(/images/UI_icons/close.svg); } #header .navbar-toggler:checked ~ #mega-menu { display: block; } #header.header-lifetime-storage-landing .navbar-toggler { /*PAARBAUDE*/ background-image: url("/images/header/list_white.svg?v=1"); } .navbar-toggler.user-has-not-clicked-navbar-toggler:after { content: " "; width: 12px; height: 12px; background: #fa4251; position: absolute; top: 0; right: 0; border-radius: 30px; } #header .navbar-toggler IMG { height: 18px; float: right; } #navbar-toggler-img-white { display: none; } #header .navbar-toggler:hover, #header .navbar-toggler:focus { text-decoration: none; } #header .navbar-toggler:hover { background-color: #f1f1f1; } body.ui-mobile #header .navbar-toggler.clicked { background-image: url("/images/header/list_x.svg?v=1"); } #header .navbar-toggler:not(:disabled) { cursor: pointer; display: none; } #search { width: 30px; } #search > DIV { position: absolute; z-index: 1; right: 0; display: block; vertical-align: middle; height: 35px; line-height: 35px; white-space: nowrap; border-radius: 20px; text-align: center; border: 1px solid transparent; cursor: pointer; transition: width 0.35s ease; } #search.active > DIV { padding: 7px 28px 7px 23px; right: 221px; width: 260px; line-height: 20px; border: 1px solid #d5d9dd; background: #fff; } #search I { line-height: inherit; } #search .search_field { display: none; width: 200px; } #search.active .search_field { display: inline-block; } #search .search_field INPUT { width: 100%; height: 100%; border: 0; } #header .navbar UL LI IMG.search_button { display: inline-block; height: 15px; } #header .navbar .dropdown-menu { margin-top: -10px; } #header .navbar .dropdown-menu-right { right: 0; left: auto; } #header .navbar .dropdown-toggle:after { display: none; } #header .navbar .dropdown-menu:before { position: absolute; top: 0; left: 9px; display: inline-block; border-top: 7px solid #edf0f2; border-right: 7px solid transparent; border-left: 7px solid transparent; content: ''; } #header .navbar .dropdown-menu:after { position: absolute; top: -1px; left: 10px; display: inline-block; border-top: 6px solid #F3F4F4; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ''; } #header .navbar .dropdown-menu-right:before { left: auto; right: 14px; } #header .navbar .dropdown-menu-right:after { left: auto; right: 15px; } /*** Signup & Login ***/ #login, #usergreeting { margin-top: 0; position: relative; margin-left: 0; text-align: left; background-color: transparent; } #login_button IMG { margin: -3px 0 0 8px; } #header #usergreeting { text-align: left; font-size: 14px; padding: 0px; cursor: pointer; background: transparent; font-weight: normal; max-width: 200px; } #header #usergreeting span.bf { line-height: 42px; font-weight: bold; } #header #usergreeting .header_menu_drawer { max-width: 270px; } #header #usergreeting #usergreeting_name { display: inline-flex; height: 42px; padding-bottom: 0; box-sizing: initial; line-height: normal; background: none; padding: 0; text-align: left; align-items: center; justify-content: center; gap: 10px; max-width: 100%; } #header #usergreeting #usergreeting_name .usergreeting_name_right { transition: transform 0.3s ease; } #header #usergreeting #usergreeting_name:hover .usergreeting_name_right { transform: scale(1.1); } #header #usergreeting .usergreeting_name_right { display: inline-block; height: 100%; width: 100%; } #header #usergreeting .usergreeting_name_right img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } #header #usergreeting .usergreeting_name_right img.user-avatar-icon { object-fit: contain; } #header #usergreeting .usergreeting_name_right.main img { width: 42px; } #header #usergreeting .usergreeting_name_right .fa { line-height: 52px; font-size: 16px; position: relative; right:-50%; } #header #usergreeting .usergreeting_name_text { display: flex; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #EDEDED; margin-bottom: 5px; cursor: default; } #header #usergreeting .usergreeting_name_text:hover { background: transparent } #header #usergreeting .usergreeting_name_text .usergreeting_name_right { display: inline-flex; margin-top: 0; align-items: center; width: auto; height: auto; } #header #usergreeting .usergreeting_name_text .usergreeting_name_right img { width: 32px; height: 32px; } #header #usergreeting .usergreeting_name_text .usergreeting_name_right img.user-avatar-icon { } #header #usergreeting .usergreeting_name_text .usergreeting_name_right .fa { line-height: 52px; font-size: 16px; position: relative; right:-50%; } #header #usergreeting .usergreeting_name_left { display: flex; vertical-align: middle; font-size: 14px; flex-direction: column; align-items: flex-start; line-height: 19px; height: 42px; width: calc(100% - 52px); font-weight: bold; gap: 5px; } #header #usergreeting .usergreeting_name_right.main + .usergreeting_name_left{ height: unset; gap: 2px; max-width: calc(100% - 52px); } #header #usergreeting .usergreeting_name_left .name { white-space: nowrap; overflow: hidden; font-size: 14px; line-height: 16px; text-overflow: ellipsis; width: 100%; height: unset; } #header #usergreeting .usergreeting_space_info { display: flex; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid #EDEDED; margin-top: -16px; background: white; margin-bottom: 5px; cursor: default; } #header #usergreeting .usergreeting_space_info .usergreeting_storage_size_space_text { text-align: left; margin-bottom: 0; font-size: 12px; line-height: 16px; color: #959595; } #header #usergreeting .usergreeting_space_info .usergreeting_storage_size_space_text span { color: #959595; } #header #usergreeting .usergreeting_space_info .usergreeting_upgrade { line-height: 16px; color: #1389FE; text-decoration: underline; font-size: 12px; cursor: pointer; } #header #usergreeting:hover .dropdown-menu { right: 5px; } #usergreeting_org_name { font-weight: bold; } .pro_flag { background: #F23047; color: #fff !important; font-size: 10px; text-transform: uppercase; padding: 0 8px; display: inline-flex; border-radius: 10px; font-family: AlbertaSans,Roboto,sans-serif; line-height: 17px; height: 19px; align-items: center; font-weight: bold; padding-top: 2px; box-sizing: border-box; } .ui-mobile-viewport .pro_flag { display: none; } #header #header_user_token_count a { display: inline-block; height: 89px; line-height: 1; font-size: 12px; padding: 32px 0 33px 0; text-align: left; } #header #header_user_token_count a > div { display: inline-block; } #header #header_user_token_count a > div:nth-child(1) { width: 25px; padding-right: 5px; } #header #header_user_token_count a > div:nth-child(1) img { height: 20px; } #header #header_user_token_count a > div:nth-child(2) { width: calc( 100% - 20px ); } #header #header_user_token_count a > div:nth-child(2) > div { } #header #header_user_token_count a > div:nth-child(2) > div:nth-child(1) { font-size: 16px; margin-bottom: 2px; } #header #header_user_token_count a > div:nth-child(2) > div:nth-child(2) { font-size: 10px; letter-spacing: 0.5px; } #header_flag { display: none; height: 20px; } body.show_header_flag #header_flag { display: block; } #header_flag_1 { height: 10px; background: #005BBB; } #header_flag_2 { height: 10px; background: #FFD500; } #header_flag_3 { height: 8px; background: #9D2235; } #header_flag_4 { height: 4px; background: white; } #header_flag_5 { height: 8px; background: #9D2235; } @media only screen and (max-width: 820px) { #header #header_user_token_count { display: none; } } @media only screen and (max-width: 480px) { /* 480 layout =================================================== */ #adaptive_html #container #header { min-width: 330px; } } /**********************/ #lang_switch { margin: 0; text-align: left; position: relative; font-size: 16px; padding: 0; display: block; color: #2b3d52; cursor: pointer; text-align: right; } #lang_switch .currentlang { font-weight: normal; margin-left: 5px; } #header .navbar #lang_switch a { font-weight: normal; } #header .navbar #lang_switch .header_menu_drawer { align-items: flex-end; } /* #lang_switch:hover .dropdown-menu { right: -10px; min-width: 50px; } */ #lang_switch.active .dropdown-menu { right: -10px; min-width: 50px; } @media only screen and (max-width: 1200px) { /* 1200 =================================================== */ #header { width: auto; /*margin: 0 20px;*/ } body.berga_foto_client_view #header .logo { width: 111px; height: 20px; min-width: 0; } #header #berga_logo { height: 25px; width: 60px; margin: 0; } } @media only screen and (max-width: 620px) { /* 620 layout =================================================== */ #header, body.show_header_flag #header, #header .navbar { height: 55px; } body.show_header_flag #header{ height: 75px; } #header.bottom-styling, body.show_header_flag #header.bottom-styling, #header.bottom-styling .navbar { height: 75px; } body.show_header_flag #header.bottom-styling #header_flag { position: fixed; top: 0; width: 100%; } #header.bottom-styling { top: unset; bottom: -1px; } #mega-menu, #mega-menu-close { top: 55px; transition: box-shadow 0.5s ease, top 0.3s ease, bottom 0.3s ease; } body.show_header_flag #mega-menu, body.show_header_flag #mega-menu-close { top: 75px; transition: box-shadow 0.5s ease, top 0.3s ease, bottom 0.3s ease; } #header.bottom-styling #mega-menu, #header.bottom-styling #mega-menu-close, body.show_header_flag #header.bottom-styling #mega-menu, body.show_header_flag #header.bottom-styling #mega-menu-close { top: 0; bottom: 74px; } body.show_header_flag #header.bottom-styling #mega-menu, body.show_header_flag #header.bottom-styling #mega-menu-close { top: 20px; } BODY.scrolled #header.bottom-styling { box-shadow: 0 0 30px rgba(4, 30, 77, 0.1); padding: 10px 0; } #header.bottom-styling #navbar-toggler-chb:checked ~ #mega-menu-close { height: calc(100% - 74px); } body.show_header_flag #header.bottom-styling #navbar-toggler-chb:checked ~ #mega-menu-close { height: calc(100% - 74px - 20px); } body.glass #header { height: 55px !important; } #header .container > .nav-left { padding-left: 16px; } #header.bottom-styling .container { padding: 0; } #header.bottom-styling #mega-menu .container { border-bottom: 1px solid #E8E8E8; } #header.bottom-styling .container > .nav-left { display: none; } #header.bottom-styling .container .nav-bottom, #header.bottom-styling .container #navbar-toggler { width: calc(100% / 4); height: 55px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; background-repeat: no-repeat !important; background-position: center 10px !important; font-weight: 500 !important; } #header.bottom-styling .container .nav-files { display: inline-flex !important; order: 0; margin-left: unset; background-image: url(/images/UI_icons/folder.svg); } #header.bottom-styling .container .nav-upload { order: 1; display: inline-flex !important; } #header.bottom-styling .container .nav-apps, #header.bottom-styling .container .nav-plans { display: inline-flex !important; order: 2; background-image: url(/images/UI_icons/crown.svg); background-position: center 10px !important; } #header.bottom-styling .container .nav-apps { background-image: url(/images/UI_icons/phone.svg); background-position: center 9px !important; } #header.bottom-styling .container .nav-apps .header_menu_wrap { height: 100%; } #header.bottom-styling .container .nav-apps .header_menu_wrap .header_menu_label { height: 100%; } #header.bottom-styling .container #usergreeting { order: 3; display: flex; flex-direction: column; justify-content: space-between; padding-top: 5px; padding-bottom: 3px; } #header.bottom-styling .container #usergreeting label { font-size: 11px; } #header.bottom-styling #usergreeting #usergreeting_name { height: 29px; width: 29px; } #header.bottom-styling #usergreeting .usergreeting_name_right.main img { width: 29px; } #header.bottom-styling .container #lang_switch { order: 4; } #header.bottom-styling .container #main-nav { display: inline-flex; flex-direction: row; align-items: center; align-content: center; flex-wrap: nowrap; height: 55px; } #header.bottom-styling .header_menu_wrap .header_menu_drawer { top: unset; bottom: calc(100% + 5px); margin-right: 15px; } #header.bottom-styling .container #navbar-toggler { width: 20%; background-position: center 10px !important; background-size: 24px; display: flex; align-items: flex-end; font-size: 11px; padding-bottom: 3px; background-image: url(/images/UI_icons/burger_menu.svg); background-size: 22px; } #header.bottom-styling .container .navbar-toggler:checked + .navbar-toggler-stripes { background-image: url(/images/UI_icons/close.svg) !important; } #header.bottom-styling .container .nav-login { order: 3; background-image: url(/images/UI_icons/signin.svg); background-position-x: calc(50% - 1px) !important; } #header.bottom-styling .container .nav-bottom a:not(.drawer-item), #header.bottom-styling .navbar UL { height: 100%; font-size: 11px; } #header.bottom-styling UL LI.nav-button.nav-bottom A .top { display: none; } #header.bottom-styling UL LI.nav-button.nav-bottom A .bottom { display: block; } #header.bottom-styling .container .nav-bottom a:not(.drawer-item), #header.bottom-styling .container .nav-bottom a:not(.drawer-item):hover{ background-color: unset; display: flex; flex-direction: row; align-items: flex-end; line-height: 1; justify-content: center; padding-bottom: 3px; } #header.bottom-styling .container .nav-bottom #login, #header.bottom-styling .container .nav-bottom #login_button { height: 100%; } #header.bottom-styling .container .nav-bottom #login_button { background-color: unset !important; color: #242424 !important; } #header.bottom-styling .nav-right.nav-button #login_button.with_icon { padding: 3px 15px; background: unset; } #header.bottom-styling .nav-right.nav-button #login_button.with_icon span { color: #242424 !important; } #header.bottom-styling .container .nav-upload a { height: 55px; width: 55px; background-color: #F23149 !important; background-image: url(/images/UI_icons/white/plus.svg); background-repeat: no-repeat !important; background-position: center !important; background-size: 20px; border-radius: 50%; } #header .logo { width: 115px; height: unset; } #header #usergreeting span.bf { line-height: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; display: inline-block; } #header .navbar UL LI.nav-right { font-weight: normal; } #header .navbar UL LI.nav-right { font-weight: normal; } #header UL LI.nav-button A { min-height: 35px; } #header .navbar UL LI.nav-right > a { padding: 0 15px; } #header #usergreeting #usergreeting_name { height: 35px; width: 35px; } #header #usergreeting .usergreeting_name_right.main img { width: 35px; } #header #usergreeting .usergreeting_name_right.main + .usergreeting_name_left { display: none; } #lang_switch { margin: 0 !important; } #header .header_menu_wrap .header_menu_label { height: 35px; } } @media only screen and (max-width: 500px) { #header .nav-right.nav-button #login_button.with_icon { background-color: #EE2B3A; color: white; background-repeat: no-repeat; background-position-x: calc(100% - 10px); background-position-y: center; background-image: url(/images/UI_icons/white/signin.svg); padding-right: 30px; font-weight: normal; background-size: 14px; } #header .nav-right.nav-button #login_button.with_icon span { color: white; } #header .nav-right.nav-button #login_button.with_icon:hover { background-color: #e58327; } .pro_flag { line-height: 19px; padding-top: 0; } } @media only screen and (max-width: 380px) { #header .container { padding: 0 10px; } #mega-menu .container { padding: 0; } #header .container > .nav-left { padding-left: 10px; padding-right: 5px; } #header .nav-right.nav-button.red{ margin-right: 0 !important; } #header .nav-right.nav-button #login_button.with_icon { background-position: center; padding: 0; width: 35px; } #header .nav-right.nav-button #login_button.with_icon span { display: none; } } @media only screen and (max-width: 360px) { /* 360 layout =================================================== */ #footer_container #footer { min-width: 280px !important; } } @media only screen and (max-width: 355px) { /* 355 layout =================================================== */ #content #upload_row_container, #content #upload_row_container #upload_row, #content #blocks_row, #content #blocks_row .block, #footer_container #footer, #adaptive_html #container #header { min-width: 0 !important; } #header .logo { width: 85px; } /*** Align items to the right ***/ #header .navbar UL LI.nav-right { margin-right: 0; } } @media only screen and (min-width: 500px) { #header .navbar UL LI.showonfirstload_mid { display: block; } } @media only screen and (min-width: 1200px) { #header .navbar UL LI { display: block; } } #header.header-lifetime-storage { background: transparent; } #header.header-lifetime-storage .container { max-width: none !important; } #header.header-lifetime-storage #main-nav #signup , #header.header-lifetime-storage #main-nav #login_button , #header.header-lifetime-storage #main-nav #lang_switch > span , #header.header-lifetime-storage #header_user_token_count * , #header.header-lifetime-storage #usergreeting { color: #fff; } BODY.scrolled #header.header-lifetime-storage #main-nav #signup , BODY.scrolled #header.header-lifetime-storage #main-nav #login_button , BODY.scrolled #header.header-lifetime-storage #main-nav #lang_switch > span , BODY.scrolled #header.header-lifetime-storage #header_user_token_count * , BODY.scrolled #header.header-lifetime-storage #usergreeting { color: #2b3d52; } #header.header-lifetime-storage #main-nav #lang_switch > span #lang_switch_icon_dark , #header.header-lifetime-storage #main-nav #login_button #login_button_icon_dark { display: none; } #header.header-lifetime-storage #main-nav #lang_switch > span #lang_switch_icon_light , #header.header-lifetime-storage #main-nav #login_button #login_button_icon_light { display: inline-block; } BODY.scrolled #header.header-lifetime-storage #main-nav #lang_switch > span #lang_switch_icon_dark , BODY.scrolled #header.header-lifetime-storage #main-nav #login_button #login_button_icon_dark { display: inline-block; } BODY.scrolled #header.header-lifetime-storage #main-nav #lang_switch > span #lang_switch_icon_light , BODY.scrolled #header.header-lifetime-storage #main-nav #login_button #login_button_icon_light { display: none; } .nav-link-label-new { position: absolute; background: #ff1d2f; color: white; height: 20px; top: -11px; right: -10px; line-height: 20px; font-size: 10px; line-height: 10px; height: 16px; padding: 3px 8px; border-radius: 5px; } #mega-menu .nav-link-label-new { display: none; } @media only screen and (max-width: 1000px) { #header.header-lifetime-storage , #header.header-lifetime-storage .navbar , #header.header-lifetime-storage .container > .nav-left { height: 45px; line-height: 45px; } #header.header-lifetime-storage .navbar #lang_switch > span > img { margin-top: 14px; } #header.header-lifetime-storage .navbar-brand , #header.header-lifetime-storage .navbar-toggler { vertical-align: bottom; } #header.header-lifetime-storage .navbar-toggler { height: 24px; padding: 0 24px; } #header.header-lifetime-storage #navbar-toggler img { display: none; } #header.header-lifetime-storage #navbar-toggler img#navbar-toggler-img-white { display: inline-block; opacity: 0.88; } #header.header-lifetime-storage .container > .nav-left { padding-left: 0; } #header.header-lifetime-storage .container { } #header.header-lifetime-storage .logo { display: none; height: 25px; } #header.header-lifetime-storage .logo.logo_white { display: inline-block; opacity: 0.88; } #header.header-lifetime-storage #main-nav #signup , #header.header-lifetime-storage #main-nav #login_button , #header.header-lifetime-storage #main-nav #lang_switch > span , #header.header-lifetime-storage #main-nav .nav-link { opacity: 0.88; height: 45px; display: inline-block; padding-top: 10px; color: #fff; } #header.header-lifetime-storage #main-nav .nav-button .nav-link { height: 30px; line-height: 30px; padding: 0 20px; margin-top: 15px; border-color: #fff; } #header.header-lifetime-storage .navbar-toggler IMG { height: 16px; padding: 0 2px; } BODY.scrolled #header.header-lifetime-storage { display: none; } }