.upload-access-switch { font-size: 0; position: relative; } .upload-access-switch * { color: #1A2533; vertical-align: unset; } .upload-access-switch label { font-size: 12px; display: inline-block; width: 100px; } .upload-access-switch .select-selected, .upload-access-switch input.upload-access-switch_password { font-size: 12px; border: 1px solid #D5D5D5 !important; border-radius: 5px !important; display: inline-block; padding: 4px 5px; min-width: unset; margin-top: 0 !important; } .upload-access-switch input.upload-access-switch_password::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #A3A3A3; opacity: 1; /* Firefox */ } .upload-access-switch input.upload-access-switch_password:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #A3A3A3; } .upload-access-switch input.upload-access-switch_password::-ms-input-placeholder { /* Microsoft Edge */ color: #A3A3A3; } .upload-access-switch .upload-access-switch_type-wrapper { display: flex; align-items: center; position: relative; } .upload-access-switch .upload-access-switch_type-wrapper .styled-select { width: calc(100% - 100px); height: unset; background: transparent; border: none; position: unset; } .upload-access-switch .upload-access-switch_type-wrapper .styled-select .select-items div:hover { background-color: transparent; } .upload-access-switch .upload-access-switch_type-wrapper .styled-select .select-items > div:hover { background-color: #f0f4f5; } .upload-access-switch .upload-access-switch_type-wrapper .select-selected { padding: 0 5px; height: 22px; line-height: 22px; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url(/images/UI_icons/inputs/dropdown_grey.svg); background-repeat: no-repeat; background-position-x: calc(100% - 10px); background-position-y: center; background-size: 8px; width: 100%; box-sizing: border-box; color: #1A2533; } .upload-access-switch .upload-access-switch_type-wrapper .select-selected.select-arrow-active { background-image: url(/images/UI_icons/inputs/dropdown_active_grey.svg); } .upload-access-switch .upload-access-switch_type-wrapper .select-selected:after { display: none; } .upload-access-switch .upload-access-switch_type-wrapper .select-items { border-radius: 5px; } .upload-access-switch .upload-access-switch_type-wrapper .select-items > div { padding: 10px 30px; position: relative; border-radius: px; } .upload-access-switch .upload-access-switch_type-wrapper .select-items .same-as-selected { background: transparent; } .upload-access-switch .upload-access-switch_type-wrapper .select-items .checked:before { position: absolute; content: ""; top: calc(50% - 10px); right: 14px; width: 12px; height: 20px; background: transparent url(/images/UI_icons/blue/check.svg) no-repeat center center; left: 10px; background-size: contain; } .upload-access-switch .upload-access-switch_type-wrapper .select-items .desc { font-size: 10px; line-height: 13px; color: #777A7C; padding: 0; } .upload-access-switch .upload-access-switch_type-wrapper .select-items .checked .value { font-weight: bold; } .upload-access-switch .upload-access-switch_type-wrapper .select-items .value { font-size: 14px; line-height: 19px; color: #1A2533; padding: 0; } .upload-access-switch .upload-access-switch_password-wrapper { display: none; margin-top: 6px; } .upload-access-switch .upload-access-switch_password-wrapper input.upload-access-switch_password { width: calc(100% - 50px ); } .upload-access-switch .upload-access-switch_password-wrapper input.upload-access-switch_password:focus::placeholder { color: transparent; } .upload-access-switch .upload-access-switch_password-wrapper input.upload-access-switch_password:focus:-ms-input-placeholder { color: transparent; } .upload-access-switch .upload-access-switch_password-wrapper input.upload-access-switch_password:focus::-ms-input-placeholder { color: transparent; } .upload-access-switch .upload-access-switch_password-wrapper .upload-access-switch_password-save-btn { margin-top: 10px; margin-bottom: 5px; margin-left: auto; height: 26px; background: #DEEDFF; color: #1389FE; font-size: 10px; padding: 0 10px; border-radius: 13px; line-height: 26px; width: min-content; cursor: pointer; } .upload-access-switch .upload-access-switch_password-wrapper .upload-access-switch_password-save-btn.green { background: #42C689; color: #ffffff; } .upload-access-switch[data-selected-access-type="password"] .upload-access-switch_password-wrapper { display: block; } .upload-access-switch .upload-access-switch_loading-mask { font-size: 20px; text-align: center; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); display: none; } #filebrowser_file-access-switch .upload-access-switch .upload-access-switch_type-wrapper label, #filebrowser_upload-access-switch .upload-access-switch .upload-access-switch_type-wrapper label { font-size: 11px; } #filebrowser_file-access-switch .upload-access-switch .upload-access-switch_type-wrapper .select-selected, #filebrowser_upload-access-switch .upload-access-switch .upload-access-switch_type-wrapper .select-selected { font-size: 11px; } #filebrowser_file-access-switch input.upload-access-switch_password, #filebrowser_upload-access-switch input.upload-access-switch_password { width: calc(100% - 100px ); } #filebrowser_file-access-switch .upload-access-switch { padding-bottom: 10px; } #list-view_upload-access-switch .upload-access-switch { padding: 20px 20px 0; } #list-view_upload-access-switch .upload-access-switch label { font-size: 14px; width: 70px; } #list-view_upload-access-switch .upload-access-switch .select-selected, #list-view_upload-access-switch .upload-access-switch input.upload-access-switch_password { font-size: 14px; } #list-view_upload-access-switch .upload-access-switch .upload-access-switch_type-wrapper .styled-select { width: calc(100% - 70px); } #list-view_upload-access-switch .upload-access-switch .upload-access-switch_password-wrapper input { width: calc(100% - 70px ); height: 22px; } #share-popup_upload-access-switch .upload-access-switch { display: flex; flex-wrap: wrap; } #share-popup_upload-access-switch .upload-access-switch.disabled { position: relative; opacity: .5; pointer-events: none; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper { display: flex; align-items: center; gap: 10px; margin-left: auto; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper input[type="checkbox"] + label { -webkit-appearance: none; padding: 28px 49px 0 0; width: 49px; display: inline-block; position: relative; background: url(/images/UI_icons/inputs/toggle_red.svg) no-repeat left top #fff; background-size: auto 100%; vertical-align: top; order: 2; min-width: unset; box-sizing: border-box; margin: 0; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper input[type="checkbox"]:checked + label:after { content: ' '; width: 49px; height: 28px; position: absolute; background: url(/images/UI_icons/inputs/toggle_on.svg) no-repeat left top #fff; background-size: auto 100%; left: 0px; top: 0px; font-size: 32px; vertical-align: top; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper input[type="checkbox"]:checked + label { background-color: #fff; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper div { color: #8E8E8E; font-size: 16px; order: 1; } @media screen and (max-width: 380px) { #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper div { max-width: 75px; width: unset; } } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper div + div { order: 3; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper input[type="checkbox"]:not(:checked) + label + div, #share-popup_upload-access-switch .upload-access-switch #upload-access-switch_type-toggle_wrapper input[type="checkbox"]:checked + label + div + div { font-weight: bold; color: #1A2533; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap { display: flex; width: 100%; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; height: 42px; position: relative; top: 60px; } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap { margin-top: 30px; } } @media screen and (max-width: 460px) { #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap { gap: 10px; } } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper { display: inline-flex; overflow: hidden; align-items: flex-start; margin: 0; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper label { text-decoration: underline; cursor: pointer; font-size: 12px; width: unset; min-width: unset; font-weight: unset; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper input { height: 40px; width: 130px; display: none; color: #1A2533; font-size: 16px; border: unset !important; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper .upload-access-switch_password-save-btn { display: none; color: white; height: 100%; font-size: 14px; padding: 0 10px; background: #1389FE; transition: background-color 0.5s ease; cursor: pointer; border-radius: unset; margin: 0; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper .upload-access-switch_password-save-btn:hover { background: #0066CC; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper .upload-access-switch_password-save-btn.green, #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper .upload-access-switch_password-save-btn.green:hover { background: #42C689; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.has_password label { display: block; text-decoration: unset; cursor: default; height: 20px; line-height: 20px; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.has_password input { display: none; height: 20px; line-height: 20px; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.has_password .upload-access-switch_password_placeholder { display: block; width: 55px; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open { border-radius: 8px; border: 1px solid #1389FE; align-items: center; } @media screen and (max-width: 460px) { #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open { width: 100%; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open + .upload-access-switch-hide-download { display: none; } } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open label { display: none; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open input { display: block; height: 40px; position: unset; } @media screen and (max-width: 460px) { #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open input { flex: 1; } } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open .upload-access-switch_password_placeholder { display: none; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch_password-wrapper.open .upload-access-switch_password-save-btn { display: flex; align-items: center; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch-hide-download { margin-left: auto; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch-hide-download label { font-size: 12px; width: unset; min-width: unset; font-weight: unset; min-width: 20px; height: 20px; line-height: 20px; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch-hide-download input[type="checkbox"] + label { -webkit-appearance: none; padding: 14px 25px 0 0; width: 25px; display: inline-block; position: relative; background: url(/images/UI_icons/inputs/toggle.svg) no-repeat left center #fff; vertical-align: top; order: 2; min-width: unset; box-sizing: border-box; margin: 0; height: 20px; line-height: 20px; background-size: auto 12px; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch-hide-download input[type="checkbox"]:checked + label:after { content: ' '; width: 25px; height: 14px; position: absolute; background: url(/images/UI_icons/inputs/toggle_on.svg) no-repeat left center #fff; left: 0px; top: 0px; vertical-align: top; height: 20px; line-height: 20px; background-size: auto 12px; } #share-popup_upload-access-switch .upload-access-switch #upload-access-switch-password-download-wrap .upload-access-switch-hide-download input[type="checkbox"]:checked + label { background-color: #fff; height: 20px; line-height: 20px; } #share-popup_upload-access-switch .upload-access-switch label { margin-right: 5px; font-size: 16px; width: 190px; min-width: 190px; font-weight: bold; } #share-popup_upload-access-switch .upload-access-switch label.upload-access-switch_type-wrapper-desc { font-size: 12px; color: #8E8E8E; font-weight: normal; } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch label.upload-access-switch_type-wrapper-desc { display: none; } } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch label { width: 70px; min-width: 70px; } } #share-popup_upload-access-switch .upload-access-switch .select-selected, #share-popup_upload-access-switch .upload-access-switch input.upload-access-switch_password { width: 100%; height: 30px; line-height: 30px; border-color: #EDEDED !important; font-size: 14px; padding: 0 10px; } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch .select-selected, #share-popup_upload-access-switch .upload-access-switch input.upload-access-switch_password { width: 100%; min-width: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch input.upload-access-switch_password { width: calc(100% - 75px); font-size: 16px; } } #share-popup_upload-access-switch .upload-access-switch[data-selected-access-type="password"] .upload-access-switch_password-wrapper { display: flex; align-items: center; } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch[data-selected-access-type="password"] .upload-access-switch_password-wrapper { flex-wrap: wrap; } } #share-popup_upload-access-switch .upload-access-switch .upload-access-switch_type-wrapper { position: unset; flex-direction: column; } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch .upload-access-switch_type-wrapper { display: flex; align-items: center; position: relative; } } #share-popup_upload-access-switch .upload-access-switch .styled-select { width: calc(100% - 155px); position: relative; } @media screen and (max-width: 30em) { #share-popup_upload-access-switch .upload-access-switch .styled-select { position: unset; width: calc(100% - 75px); } }