/*#page.media-uploader {padding-top: var(--height-page-header);}*/ /*#page.media-uploader #page-footer {display:none;}*/ /*#page.media-uploader #page-header {position:fixed;}*/ /*#page.media-uploader #page-header .main-bar .left-side {flex:1;}*/ #page.media-uploader #page-header .main-bar .center-side {display:flex;} #page.code #wrapper {min-height:100vh;} #page.code #hero {margin-top:var(--global-offset-from-page-header);} #page.code .container {max-width:calc(var(--width-container-big) + 20px); padding:0 10px;} #page.code .WSKiSnOCBQUTmnIjCDet {display:flex; justify-content:center; align-items:center; margin-bottom:5px; max-height:250px;} #upload {margin-bottom:200px;} #upload .container {max-width:calc(var(--width-container-big) + 20px); padding:0 10px;} /*вроде не нужно т.к меняет через аптрибут ::placeholder */ [contenteditable=true]:empty:not(:focus):before {content:attr(placeholder); display:block; color:#9B8EAD; cursor:text;} [contenteditable=true]:empty:not(:focus):hover:before {content:attr(placeholder); display:block; color:#140C1A !important;} #upload .global__tooltip-help {width:16px; height:16px;} #upload .global__tooltip-help__body {top:20px; right:-5px; width:310px;} #upload .global__tooltip-help__body .attention {color:var(--color-red-primary);} #upload .tab-body {position:relative; z-index:0; margin-top:15px;} .global__tooltip-options .dialog-menu .loading-last {cursor:wait;} .global__tooltip-options .dialog-menu .loading-last .btn {pointer-events:none;} /* --- Г Л А В Н О Е М Е Н Ю ---*/ #tabs-menu {position:sticky; top:var(--height-page-header); /*top:calc(48px + 88px);*/ z-index:20; background-color:#FFF; display:flex; justify-content:space-between; height:58px; overflow:hidden; border-radius:0 0 5px 5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #tabs-menu .tab {position:relative; display:flex; align-items:center; padding:15px 20px; color:rgba(0, 0, 0, 0.55); transition:background 200ms ease; cursor:pointer; text-align:center;} #tabs-menu .tab:hover {color:var(--color-purple-primary);} #tabs-menu .tab:after {content:""; position:absolute; bottom:0; left:0; right:0; transform:scale3d(0,1,1); background-color:var(--color-purple-primary); margin:0 auto; height:2px; border-radius:30px; transition:all 200ms ease-out; opacity:0;} #tabs-menu .tab.active:after {transform:scale3d(1,1,1); opacity:1;} #tabs-menu .tab .icon {display:flex; justify-content:center; align-items:center; width:22px; height:22px;} #tabs-menu .tab .icon.edit {width:20px; height:20px;} #tabs-menu .tab .icon.sorting {width:22px; height:22px;} #tabs-menu .tab .icon.code {width:24px; height:24px;} #tabs-menu .tab .icon.settings {width:24px; height:24px;} #tabs-menu .tab .icon svg {width:100%; height:100%; fill:#777;} #tabs-menu .tab:hover .icon svg {fill:var(--color-purple-primary);} #tabs-menu .tab.active .icon svg {fill:var(--color-purple-primary);} #tabs-menu .tab .description {margin-left:10px; font-size:14px; line-height:15px; font-weight:500; text-transform:uppercase; user-select:none;} #tabs-menu .tab.active .description {color:var(--color-purple-primary);} #tabs-menu .tab .description--short {display:none;} #upload #add-image {background-color:var(--color-blue-highlight); display:flex; align-items:center; padding:20px; cursor:pointer;} #upload #add-image:hover {background-color:var(--color-blue-highlight-hover);} .state--saving #upload #add-image {cursor:wait;} #upload #add-image .icon {width:30px; height:30px;} #upload #add-image .icon svg {width:100%; height:100%; fill:#FFF;} .state--saving #upload #add-image .icon {opacity:0.5;} #album-url {background-color:#FFF; margin-bottom:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #album-url .header {background-color:#FCFCFC; padding:10px 15px; border-bottom:1px solid rgba(0, 0, 0, 0.05); border-radius:5px 5px 0px 0px; font-size:14px; color:#333;} #album-url .body {padding:15px;} #album-url .body .field {position:relative; background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; height:38px; padding:0 10px; border-radius:5px; box-shadow:inset 0 0px 15px rgba(0,0,0,0.08);} #album-url .body .field .left-side {width:100%;} #album-url .body .field .left-side .loading {width:100%; overflow:hidden; padding-right:15px; font-style:italic; font-size:14px; line-height:20px; font-weight:500; color:#888; text-overflow:ellipsis; letter-spacing:0.5px;} #album-url .body .field .left-side input {background:transparent; width:100%; overflow:hidden; padding-right:15px; font-family:inherit; font-size:15px; color:var(--color-green-highlight); text-overflow:ellipsis; letter-spacing:0.5px;} #album-url .body .field .right-side {display:flex; align-items:center;} #album-url .body .field .right-side:after {content:""; position:absolute; top:5px; right:10px; background:url(/assets/img/sprite/sprite_loading-gif.png) no-repeat; display:block; width:25px; height:25px; transition:visibility 0s linear 200ms, opacity 200ms; visibility:hidden; opacity:0;} /*.state--saving #album-url .body .field .right-side:before {content:""; display:block; width:100%; height:100%; position:absolute; background:inherit;}*/ .state--saving #album-url .body .field .right-side:after {background-position:0 0px; transition:visibility 0s linear 0s, opacity 400ms; animation:saving_animation 0.5s steps(7) infinite; visibility:visible; opacity:1;} .state--saved #album-url .body .field .right-side:after {background-position:0 -25px; transition:visibility 0s linear 0s, opacity 400ms; animation:saved_animation 1.2s steps(11); visibility:visible; opacity:1;} #album-url .body .field .right-side .icon {transition:visibility 0s linear 0s, opacity 800ms; visibility:visible; opacity:1;} .state--saved #album-url .body .field .right-side .icon {transition:visibility 0s linear 200ms, opacity 200ms; visibility:hidden; opacity:0;} .state--saving #album-url .body .field .right-side .icon {transition:visibility 0s linear 200ms, opacity 200ms; visibility:hidden; opacity:0;} #album-url .body .field .right-side .icon.link {margin-left:5px;} #album-url .body .field .right-side .icon svg {width:100%; height:100%;} #album-url .body .field .right-side .icon.copy svg {fill:var(--color-green-highlight);} #album-url .body .field .right-side .icon.link svg {fill:var(--color-blue-highlight);} #album-url .body .field .right-side a {border-left:none; font-size:12px; color:var(--color-blue-primary); text-transform:uppercase; cursor:pointer; text-align:center; user-select:none;} #album-url .body .field .right-side a:hover {color:var(--color-blue-primary-hover);} #privacy {background-color:#FFF; margin-bottom:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #privacy .header {background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid rgba(0, 0, 0, 0.05); border-radius:5px 5px 0px 0px; font-size:14px; color:#333;} #privacy .header .right-side {display:flex;} #privacy .body {display:flex; justify-content:space-between; flex-wrap:wrap; padding:15px 15px 0px;} #privacy .body .option {order:1; position:relative; display:flex; cursor:pointer;} #privacy .body .option .circle {position:relative; margin-right:10px; width:20px; height:20px; border:2px solid #C8CCD4; border-radius:100%;} #privacy .body .option .circle:before {content:""; position:absolute; top:3px; left:3px; transform:scale(0); background:var(--color-green-highlight); width:10px; height:10px; border-radius:100%; pointer-events:none; transition:all 0.2s ease; opacity:0.08;} #privacy .body .option:hover .circle:before {transform:scale(3.6);} #privacy .body input[type="radio"]:checked + .option.disabled {opacity:0.7;} #privacy .body input[type="radio"]:checked + .option .circle {border-color:var(--color-green-highlight);} #privacy .body input[type="radio"]:checked + .option .circle:before {transform:scale(1); transition:all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9); opacity:1;} #privacy .body .option .title {font-size:14px; line-height:20px; color:rgba(0, 0, 0, 0.55); user-select:none;} #privacy .body .option:hover .title {color:#4B4B4B;} #privacy .body input[type="radio"]:checked + .option .title {color:#4B4B4B;} #privacy .body .description {/*width:100%;*/ order:2; display:none; margin:15px 0px;} #privacy .body .description p {font-size:12px; line-height:18px; color:#333;} #privacy .body .description p.info:before {content:""; position:relative; top:4px; background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Ikljb25zIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iT3V0bGluZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NDIuMDAwMDAwLCAtMjg4LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iQWN0aW9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCAxMDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3V0bGluZWQtLy1BY3Rpb24tLy1pbmZvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDAuMDAwMDAwLCAxODYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoIiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLDcgTDEzLDcgTDEzLDkgTDExLDkgTDExLDcgWiBNMTEsMTEgTDEzLDExIEwxMywxNyBMMTEsMTcgTDExLDExIFogTTEyLDIgQzYuNDgsMiAyLDYuNDggMiwxMiBDMiwxNy41MiA2LjQ4LDIyIDEyLDIyIEMxNy41MiwyMiAyMiwxNy41MiAyMiwxMiBDMjIsNi40OCAxNy41MiwyIDEyLDIgWiBNMTIsMjAgQzcuNTksMjAgNCwxNi40MSA0LDEyIEM0LDcuNTkgNy41OSw0IDEyLDQgQzE2LjQxLDQgMjAsNy41OSAyMCwxMiBDMjAsMTYuNDEgMTYuNDEsMjAgMTIsMjAgWiIgaWQ9IvCflLktSWNvbi1Db2xvciIgZmlsbD0iIzc3NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); background-size:16px; display:inline-flex; margin-right:5px; width:16px; height:16px;} #privacy .body .description .link {border-bottom:1px dotted var(--color-blue-primary); color:var(--color-blue-highlight);} #privacy .body .description .more {border-bottom:1px dotted #777; color:#777;} #privacy .body .description .error {color:var(--color-red-primary);} #privacy .body .description .info .left-side {background-color:rgba(0, 0, 0, 0.05); display:flex; display:none; align-items:center; padding:0 10px; border-radius:5px;} #privacy .body .description .info .left-side .icon {width:36px; height:36px;} #privacy .body .description .info .left-side .icon svg {width:100%; height:100%; fill:#777;} #privacy .body .description .info .right-side {/*margin-left:15px;*/} #privacy .body .description .warning {background-color:var(--color-red-light); margin-top:15px; padding:10px 5px; border-radius:5px;} #privacy .body input[type=radio]:checked + .option + .description {display:block;} #privacy .footer {display:flex; justify-content:space-between; align-items:center; margin:0px 15px; padding:10px 0px 15px; border-top:1px solid #EDEDED;} #privacy .footer .right-side {display:flex;} #privacy .footer .left-side .global__input-checkbox span {font-size:13px; line-height:16px; color:#4B4B4B;} #upload #add-tags {background-color:#FFF; margin-bottom:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload #add-tags .header {background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid rgba(0, 0, 0, 0.05); border-radius:5px 5px 0px 0px;} #upload #add-tags .header .left-side {display:flex;} #upload #add-tags .header .right-side {display:flex;} #upload #add-tags .header .left-side .title {font-size:14px; color:#333;} #upload #add-tags .body {padding:15px;} #upload #add-tags .body .react-tagsinput .tag {background:#DFDAE8; display:inline-flex; align-items:center; margin:0 5px 5px 0; height:25px; padding:0 4px 0 10px; border-radius:25px; font-size:12px; color:#5D297D;} #upload #add-tags .body .react-tagsinput .tag:last-of-type {margin-bottom:10px;} #upload #add-tags .body .react-tagsinput .tag .remove {content:""; background-image:url(/assets/img/sprite/global.svg#icon__close--purple); background-repeat:no-repeat; display:inline-block; width:16px; height:16px; opacity:0.6; cursor:pointer;} #upload #add-tags .body .react-tagsinput .tag-input {background:transparent; background-image:url(/assets/img/sprite/global.svg#icon__add-tags); background-position:5px 50%; background-size:20px; background-repeat:no-repeat; width:100%; padding:5px 10px 5px 30px; border:1px dashed #DCDADE; border-radius:5px; font-family:inherit; color:#4B4B4B; cursor:pointer;} #upload #add-tags .body .react-tagsinput .tag-input:focus {cursor:text;} #upload #add-tags .body .react-tagsinput .tag-input::placeholder {color:#4B4B4B;} #upload #add-tags .body .react-tagsinput .tag-input:hover::placeholder {opacity:1;} #upload #add-tags .body .react-tagsinput .tag-input:focus::placeholder {color:transparent;} /*#upload #add-tags .body .react-tagsinput .tag-input:after {content:""; display:inline-block; width:18px; height:18px; background-size: 18px; background-image: url(/assets/img/sprite/global.svg#icon__edit-pencil--grey); margin-left:10px;} #upload #add-tags .body .react-tagsinput .tag-input:focus:after {display:none;}*/ #upload #add-tags .body .example {margin-top:10px; font-size:12px; color:#4B4B4B;} #upload #add-tags .body .example span {margin:0 2.5px; border-bottom:1px dashed #DCDADE; color:#777;} #upload #pagination {display:flex; justify-content:space-between; align-items:center;} #upload #pagination button {background-color:#FFF; min-height:30px; padding:5px 11px; border:1px solid #DCDADE; border-radius:2px; color:#797879; transition:all 200ms ease-out;} #upload #pagination button:hover {background-color:var(--color-blue-highlight); border:1px solid var(--color-blue-highlight); color:#FFF;} #upload #pagination .left-side {display:flex; align-items:center;} #upload #pagination .left-side button {margin-right:5px;} #upload #pagination .left-side button.active {border:1px solid #FFF; font-weight:500;} #upload #pagination .right-side {display:flex; align-items:center;} #upload #pagination .right-side .current-page {font-size:13px; color:#555;} #upload #pagination .right-side .input-page {margin-left:10px;} #upload #pagination .right-side .input-page input {width:40px; height:30px; border-radius:5px 0 0 5px; color:#5F4781; text-align:center; border-color:#DCDADE; border-style:solid; border-width:1px; -moz-appearance:textfield;} #upload #pagination .right-side .input-page input:invalid {box-shadow:none; border-color:#DCDADE;} #upload #pagination .right-side button.set-page {margin-right:0px; border-left:none; border-radius:0 5px 5px 0;} /*решить что с text area для title + есть хитрые классы в старом реакте h_off*/ #upload-edit .tab-body .main {display:flex; justify-content:space-between; align-items:flex-start;} #upload-edit .tab-body .main__left-side {flex:1; margin-bottom:15px;} #upload-edit .tab-body .main__left-side.animated {position:relative; animation-name:bounceUpAndDown; -webkit-animation-name:bounceUpAndDown; animation-duration:2s; -webkit-animation-duration:2s; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;} #upload-edit .tab-body .main__left-side .article {background-color:#FFF; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-edit .tab-body .main__left-side .article__header {position:relative;} #upload-edit .tab-body .main__left-side .article .item__title {width:100%; height:54px; resize:none; padding:15px 44px 15px 15px; font-family:inherit; font-size:16px; line-height:24px; color:#333; text-align:left;} #upload-edit .tab-body .main__left-side .article .item__title::placeholder {color:var(--color-purple-primary); opacity:0.7;} /* ::after does not work with texarea #upload-edit .tab-body .main__left-side .article .item__title:hover:after {content:""; display:inline-block; width:18px; height:18px; background-size:18px; background-image:url(/assets/img/sprite/global.svg#icon__edit-pencil--grey); margin-left:10px;} #upload-edit .tab-body .main__left-side .article .item__title:focus:after {display:none;}*/ #upload-edit .tab-body .main__left-side .article__header .words-count {position:absolute; top:15px; right:15px; font-size:16px; color:#B2B2B2;} #upload-edit .tab-body .main__left-side .article__header .error-msg {background-color:var(--color-red-light); padding:5px 10px; font-size:12px; line-height:18px; color:var(--color-red-primary);} #upload-edit .tab-body .main__left-side .article .item__body {position:relative; background-color:rgba(0, 0, 0, 0.01); display:flex; justify-content:center; align-items:center; width:100%; min-height:200px; overflow:hidden;} #upload-edit .tab-body .main__left-side .article .item__body .media-number {position:absolute; top:10px; left:10px; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; cursor:default;} #upload-edit .tab-body .main__left-side .article .item__body:hover .global__tooltip-options {visibility:visible;} #upload-edit .tab-body .main__left-side .article .item__body .media {display:flex; justify-content:center; align-items:center; width:100%; min-height:200px;} #upload-edit .tab-body .main__left-side .article .item__body .media.zoomable {cursor:zoom-in;} #upload-edit .tab-body .main__left-side .article .item__body .media img {margin:0 auto; max-width:100%; height:auto;} #upload-edit .tab-body .main__left-side .article .item__body .media video {max-width:100%; height:100%;} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:rgba(0, 0, 0, 0.70); display:block;} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress .middle {position:absolute; top:50%; left:0; z-index:10; transform:translateY(-50%); width:100%; text-align:center;} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress .middle .percent {font-size:30px; line-height:38px; color:var(--color-green-highlight);} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress .middle .size {font-size:14px; line-height:18px; color:var(--color-green-highlight);} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress .middle .error {font-size:18px; color:var(--color-red-primary);} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress .bottom {position:absolute; bottom:0; left:0; z-index:10; width:100%;} #upload-edit .tab-body .main__left-side .article .item__body .upload-progress .bottom .bar {background-color:var(--color-green-highlight); height:4px; transition:width 1s;} #upload-edit .tab-body .main__left-side .article .item__description {box-sizing:border-box; position:relative; z-index:1; width:100%; min-height:100px; resize:none; padding:15px; border-radius:0 0 5px 5px; font-family:inherit; font-size:16px; line-height:24px; color:#333; word-wrap:break-word; white-space:pre-wrap; text-align:left;} #upload-edit .tab-body .main__left-side .article .item__description[contenteditable=true]:empty:not(:focus):before {content:attr(placeholder); display:block; color:#B4A8B6;} #upload-edit .tab-body .main__right-side {position:sticky; top:121px; margin-left:15px; width:400px;} #upload-edit .tab-body .main__right-side .main-btn {background-size:300%; display:flex; justify-content:center; align-items:center; margin-bottom:15px; width:100%; height:44px; border-radius:50px; transition:background-position 900ms ease-in-out; user-select:none;} #upload-edit .tab-body .main__right-side .main-btn:not(.loading):hover {background-position:right center;} #upload-edit .tab-body .main__right-side .main-btn.loading {opacity:0.7; cursor:wait;} #upload-edit .tab-body .main__right-side .main-btn--save {background-image:linear-gradient(to right, #48B93B 0%, #228D1A 51%, #48B93B 100%); cursor:pointer;} #upload-edit .tab-body .main__right-side .main-btn--delete {background-color:var(--color-red-primary); flex-shrink:0; margin-left:10px; width:44px;} #upload-edit .tab-body .main__right-side .main-btn--delete:hover {background-color:var(--color-red-primary-hover);} #upload-edit .tab-body .main__right-side .main-btn--delete svg {width:28px; height:28px; fill:#FFF;} #upload-edit .tab-body .main__right-side .main-btn--post {background-image:linear-gradient(to right, #5F4781 0%, #EC4E91 51%, #5F4781 100%);} #upload-edit .tab-body .main__right-side .main-btn span {font-size:16px; color:#FFF;} #upload-edit .tab-body .main__right-side .main-btn.loading .animation__loading-dots--small:after {margin-left:1px;} #upload-code #code-menu {display:flex; justify-content:space-between; margin-bottom:10px; padding:10px 0 5px;} #upload-code #code-menu .left-side {display:flex;} #upload-code #code-menu .left-side .title {background:linear-gradient(to right, #5F4781,#EC4E91); background-size:300%; -webkit-background-clip:text; background-clip:text; font-size:20px; line-height:28px; font-weight:400; color:var(--color-purple-primary); -webkit-text-fill-color:transparent;} #upload-code #code-menu .right-side {display:flex; align-items:center;} #upload-code #code-menu .right-side .tab {background-color:rgba(0, 0, 0, 0.07); display:flex; align-items:center; margin-left:5px; height:30px; padding:0 10px; border-radius:3px; font-size:14px; color:#666; text-transform:uppercase; transition:color 300ms ease-out; cursor:pointer;} #upload-code #code-menu .right-side .tab:hover {background-color:rgba(0, 0, 0, 0.09);} #upload-code #code-menu .right-side .tab.active {background-color:var(--color-purple-primary); color:#FFF;} #upload-code .singlecode .article {background-color:#FFF; margin-bottom:15px; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-code .singlecode .article .heading {background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid #EDEDED;} #upload-code .singlecode .article .heading .title {font-size:14px; color:#333;} #upload-code .singlecode .article .heading .title span {opacity:0.7;} #upload-code .singlecode .article .item {display:flex; flex-wrap:wrap; min-height:450px;} #upload-code .singlecode .article .item .media-side {position:relative; flex:1;} #upload-code .singlecode .article .item__media {position:absolute; top:15px; bottom:15px; left:15px; right:15px; display:flex; justify-content:center; align-items:center; overflow:hidden;} #upload-code .singlecode .article .uploading .item__media {position:relative; top:0; bottom:0; left:0; right:0; padding:15px;} #upload-code .singlecode .article .item__media .media-number {position:absolute; top:10px; left:10px; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; cursor:default;} #upload-code .singlecode .article .item__media:hover .global__tooltip-options {visibility:visible;} #upload-code .singlecode .article .item__media img {width:auto; height:auto; transition:all 300ms ease-in-out;} #upload-code .singlecode .article .item__media video {max-width:100%; height:100%;} #upload-code .singlecode .article .item__media[data-size="s"] img {width:auto; height:125px;} #upload-code .singlecode .article .item__media[data-mode="landscape"] img {max-width:100%;} #upload-code .singlecode .article .item__media[data-mode="landscape"][data-size="t"] img {max-width:300px;} #upload-code .singlecode .article .item__media[data-mode="landscape"][data-size="m"] img {max-width:500px;} #upload-code .singlecode .article .item__media[data-mode="landscape"][data-size="l"] img {max-width:800px;} #upload-code .singlecode .article .item__media[data-mode="landscape"][data-size="p"] img {max-width:1024px;} #upload-code .singlecode .article .item__media[data-mode="landscape"][data-size="h"] img {max-width:1600px;} #upload-code .singlecode .article .item__media[data-mode="landscape"][data-size="x"] img {max-width:2048px;} #upload-code .singlecode .article .item__media[data-mode="square"] img {max-width:100%; max-height:100%;} #upload-code .singlecode .article .item__media[data-mode="square"][data-size="t"] img {max-width:300px; max-height:300px;} #upload-code .singlecode .article .item__media[data-mode="square"][data-size="m"] img {max-width:500px; max-height:500px;} #upload-code .singlecode .article .item__media[data-mode="square"][data-size="l"] img {max-width:800px; max-height:800px;} #upload-code .singlecode .article .item__media[data-mode="square"][data-size="p"] img {max-width:1024px; max-height:1024px;} #upload-code .singlecode .article .item__media[data-mode="square"][data-size="h"] img {max-width:1600px; max-height:1600px;} #upload-code .singlecode .article .item__media[data-mode="square"][data-size="x"] img {max-width:2048px; max-height:2048px;} #upload-code .singlecode .article .item__media[data-mode="portrait"] img {max-height:100%;} #upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="t"] img {max-height:300px;} #upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="m"] img {max-height:500px;} #upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="l"] img {max-height:800px;} #upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="p"] img {max-height:1024px;} #upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="h"] img {max-height:1600px;} #upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="x"] img {max-height:2048px;} /*#upload-code .singlecode .article .item__media[data-mode="portrait"][data-size="x"] img { max-height:100%;height:2048px;}*/ #upload-code .singlecode .article .item__media .upload-progress:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:rgba(0, 0, 0, 0.70); display:block;} #upload-code .singlecode .article .item__media .upload-progress .middle {position:absolute; top:50%; left:0; z-index:10; transform:translateY(-50%); width:100%; color:var(--color-green-highlight); text-align:center;} #upload-code .singlecode .article .item__media .upload-progress .middle .percent {font-size:30px; line-height:38px;} #upload-code .singlecode .article .item__media .upload-progress .middle .size {font-size:14px; line-height:18px;} #upload-code .singlecode .article .item__media .upload-progress .bottom {position:absolute; bottom:0; left:0; z-index:10; width:100%;} #upload-code .singlecode .article .item__media .upload-progress .bottom .bar {background-color:var(--color-green-highlight); height:4px; transition:width 1s;} #upload-code .singlecode .article .item .code-side {min-width:450px; padding:15px 15px 15px 5px;} #upload-code .singlecode .article .item .code-side .share-link {margin-bottom:15px;} #upload-code .singlecode .article .item .code-side .share-link .header {display:flex; justify-content:space-between;} #upload-code .singlecode .article .item .code-side .share-link .header .right-side {display:flex; align-items:center;} #upload-code .singlecode .article .item .code-side .share-link .title {font-size:14px; color:#444;} #upload-code .singlecode .article .item .code-side .share-link .title span {opacity:0.7;} #upload-code .singlecode .article .item .code-side .share-link select.select-size {background-image:url(/assets/img/sprite/global.svg#icon__dropdown); background-position:98% 50%; background-size:14px; background-repeat:no-repeat; margin-top:5px; width:100%; height:36px; padding-left:8px; border:1px solid #E4E4E4; border-radius:5px; font:15px Roboto; color:var(--color-blue-highlight); transition:border 300ms ease-in-out; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none;} #upload-code .singlecode .article .item .code-side .share-link select.select-size:hover {border:1px solid rgb(204, 204, 204);} #upload-code .singlecode .article .item .code-side .share-link select.select-size optgroup {background-color:#FCFCFC; height:30px; padding:10px; font-style:normal; font-weight:300; color:#666;} #upload-code .singlecode .article .item .code-side .share-link select.select-size option {background-color:#FFF; color:#4B4B4B; cursor:pointer;} #upload-code .singlecode .article .item .code-side .share-link .field {position:relative; background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; margin-top:5px; min-height:38px ; padding:8px 10px; border-radius:5px; box-shadow:inset 0 0px 15px rgba(0,0,0,0.08);} #upload-code .singlecode .article .item .code-side .share-link .field .left-side {width:100%;} #upload-code .singlecode .article .item .code-side .share-link .field .left-side input {background:transparent; width:100%; overflow:hidden; padding-right:15px; font-family:inherit; font-size:15px; line-height:20px; color:var(--color-green-highlight); text-overflow:ellipsis; letter-spacing:0.5px;} #upload-code .singlecode .article .item .code-side .share-link .field .left-side input:not(.toggle) {transition:all 1500ms linear;} #upload-code .singlecode .article .item .code-side .share-link.creating .field .left-side input {font-style:italic; font-size:14px; color:#888;} #upload-code .singlecode .article .item .code-side .share-link.missing .field .left-side input {font-size:14px; color:#888;} #upload-code .singlecode .article .item .code-side .share-link .field .right-side {display:flex;} #upload-code .singlecode .article .item .code-side .share-link.creating .field .right-side:before {content:""; position:absolute; background:inherit; display:block; width:100%; height:100%;} #upload-code .singlecode .article .item .code-side .share-link.creating .field .right-side:after {content:""; position:absolute; top:5px; right:10px; background:url(/assets/img/sprite/sprite_loading-gif.png) no-repeat; background-position:0 0px; display:block; width:25px; height:25px; animation:saving_animation 0.5s steps(7) infinite;} #upload-code .singlecode .article .item .code-side .share-link .field .right-side .icon {background-color:transparent; /*visibility:visible; opacity:1; transition:visibility 0s linear 0s, opacity 1500ms;*/ width:20px; height:20px;} #upload-code .singlecode .article .item .code-side .share-link .field .right-side.disabled .icon {visibility:hidden; /*opacity:0; transition:visibility 0s linear 1500ms, opacity 1500ms;*/} #upload-code .singlecode .article .item .code-side .share-link .field .right-side .icon.link {margin-left:5px;} #upload-code .singlecode .article .item .code-side .share-link .field .right-side .icon svg {width:100%; height:100%;} #upload-code .singlecode .article .item .code-side .share-link .field .right-side .icon.copy svg {fill:var(--color-green-highlight);} #upload-code .singlecode .article .item .code-side .share-link .field .right-side .icon.link svg {fill:var(--color-blue-highlight);} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch {position:relative; display:flex; margin-right:5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-checkbox {display:none;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-label {display:block; margin-left:4px; width:30px; overflow:hidden; cursor:pointer;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-inner {display:block; margin-left:-100%; width:200%; transition:margin 0.3s ease-in 0s;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-inner:before, .onoffswitch-inner:after {display:block; width:50%; float:left; font-size:14px; color:var(--color-blue-highlight); text-align:center;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-inner:before {content:"GIF"; letter-spacing:1px;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-inner:after {content:"MP4";} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-switch {position:absolute; top:0px; bottom:0; right:28px; background:#FFF; display:block; display:none; margin:9px; padding:5.5px; border:1px solid #999; border-radius:50%; transition:all 0.3s ease-in 0s;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left:0;} #upload-code .singlecode .article .item .code-side .share-link .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {right:3px;} #upload-code .singlecode .article .item .code-side .download-links {display:flex; justify-content:space-between;} #upload-code .singlecode .article .item .code-side .download-links .link {font-size:12px; color:var(--color-blue-primary); color:var(--color-blue-highlight); transition:all 1500ms linear;} #upload-code .singlecode .article .item .code-side .download-links .link .creating {color:#888;} /*#upload-code .singlecode .article .item .code-side .download-links .link .animation__loading-dots--small:after {width:10px;}*/ #upload-code .singlecode .article .item .code-side .download-links .link a {color:inherit;} #upload-code .singlecode .article .item .code-side .download-links .link a span {text-transform:uppercase;} #upload-code .bulkcode .select-block {background-color:#FFF; margin-bottom:15px; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-code .bulkcode .select-block .header {background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid #EDEDED; border-radius:5px 5px 0px 0px;} #upload-code .bulkcode .select-block.hidden .header {border-bottom:none;} #upload-code .bulkcode .select-block .header .title {font-size:14px; color:#333;} #upload-code .bulkcode .select-block .header .hide-btn {flex-shrink:0; margin-left:5px;} #upload-code .bulkcode .select-block .header .hide-btn button {background-color:transparent; border-bottom:1px dotted #777; font-size:12px; line-height:12px; color:#777;} #upload-code .bulkcode .select-block .body {padding:10px;} #upload-code .bulkcode .select-block .body .info {display:flex; justify-content:space-between; font-size:12px;} #upload-code .bulkcode .select-block .body .info .left-side {display:flex; align-items:center; color:#555;} #upload-code .bulkcode .select-block .body .info .left-side:before {content:""; background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Ikljb25zIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iT3V0bGluZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NDIuMDAwMDAwLCAtMjg4LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iQWN0aW9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCAxMDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3V0bGluZWQtLy1BY3Rpb24tLy1pbmZvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDAuMDAwMDAwLCAxODYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoIiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLDcgTDEzLDcgTDEzLDkgTDExLDkgTDExLDcgWiBNMTEsMTEgTDEzLDExIEwxMywxNyBMMTEsMTcgTDExLDExIFogTTEyLDIgQzYuNDgsMiAyLDYuNDggMiwxMiBDMiwxNy41MiA2LjQ4LDIyIDEyLDIyIEMxNy41MiwyMiAyMiwxNy41MiAyMiwxMiBDMjIsNi40OCAxNy41MiwyIDEyLDIgWiBNMTIsMjAgQzcuNTksMjAgNCwxNi40MSA0LDEyIEM0LDcuNTkgNy41OSw0IDEyLDQgQzE2LjQxLDQgMjAsNy41OSAyMCwxMiBDMjAsMTYuNDEgMTYuNDEsMjAgMTIsMjAgWiIgaWQ9IvCflLktSWNvbi1Db2xvciIgZmlsbD0iIzc3NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); background-size:16px; display:inline-flex; margin-right:5px; width:16px; height:16px;} #upload-code .bulkcode .select-block .body .info .right-side {flex-shrink:0;} #upload-code .bulkcode .select-block .body .info .right-side button {background-color:transparent; font-size:12px; color:var(--color-blue-highlight);} #upload-code .bulkcode .select-block .body .grid {display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-columns:auto; grid-gap:5px; margin:5px 0 10px;} #upload-code .bulkcode .select-block .body .grid .item {position:relative; background-color:#F8F6F9; overflow:hidden; border-radius:3px; cursor:pointer;} #upload-code .bulkcode .select-block .body .grid .item__body {position:relative;} #upload-code .bulkcode .select-block .body .grid .item__body:before {content:""; display:block; width:100%; padding-bottom:100%;} #upload-code .bulkcode .select-block .body .grid .item__body .media {position:absolute; top:0; bottom:0; left:0; right:0; transform:scale(1); display:flex; justify-content:center; align-items:center; width:100%; height:100%; transition:transform 150ms linear 0s;} #upload-code .bulkcode .select-block .body .grid .item.es-selected .item__body .media:hover {transform:scale(1.06);} #upload-code .bulkcode .select-block .body .grid .item__body .media img {opacity:0.5;} #upload-code .bulkcode .select-block .body .grid .item.es-selected .item__body .media img {transition:opacity 300ms ease-in; opacity:1;} #upload-code .bulkcode .select-block .body .grid .item__body .media-number {position:absolute; top:10px; left:10px; z-index:1; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; transition:visibility 0s linear 300ms, opacity 300ms; visibility:hidden; opacity:0; cursor:default;} #upload-code .bulkcode .select-block .body .grid .item.es-selected .item__body .media-number {transition:visibility 0s linear 0s, opacity 300ms; visibility:visible; opacity:1;} #upload-code .bulkcode .select-block .body .grid .item__body .media-checkmark {position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; cursor:pointer; box-shadow:0 0px 10px 0 rgba(0,0,0,0.3);} #upload-code .bulkcode .select-block .body .grid .item.es-selected .item__body .media-checkmark {background-image:url(/assets/img/sprite/global.svg#icon__checkmark); background-color:var(--color-green-highlight); background-position:50% 50%; background-size:18px; background-repeat:no-repeat;} #upload-code .bulkcode .select-block .body .grid .item__body .upload-progress:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:rgba(0, 0, 0, 0.70); display:block;} #upload-code .bulkcode .select-block .body .grid .item__body .upload-progress .middle {position:absolute; top:50%; left:0; z-index:10; transform:translateY(-50%); width:100%; padding:0 5px; color:var(--color-green-highlight); text-align:center;} #upload-code .bulkcode .select-block .body .grid .item__body .upload-progress .middle .percent {font-size:24px; line-height:30px;} #upload-code .bulkcode .select-block .body .grid .item__body .upload-progress .middle .error {font-size:14px; color:var(--color-red-primary);} #upload-code .bulkcode .select-block .body .grid .item__body .upload-progress .bottom {position:absolute; bottom:0; left:0; z-index:10; width:100%;} #upload-code .bulkcode .select-block .body .grid .item__body .upload-progress .bottom .bar {background-color:var(--color-green-highlight); height:4px; transition:width 1s;} #upload-code .bulkcode .code-block {background-color:#FFF; margin-bottom:15px; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-code .bulkcode .code-block .header {background-color:#FCFCFC; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid #EDEDED; border-radius:5px 5px 0px 0px;} #upload-code .bulkcode .code-block .header .title {font-size:14px; color:#333;} #upload-code .bulkcode .code-block .body {padding:10px;} #upload-code .bulkcode .code-block .body__options {display:grid; justify-content:center; grid-template-columns:1.5fr 1fr 1fr 1fr; margin-bottom:20px; grid-column-gap:20px;} #upload-code .bulkcode .code-block .body__options .choice {margin-top:10px;} #upload-code .bulkcode .code-block .body__options .choice select {background-image:url(/assets/img/sprite/global.svg#icon__dropdown); background-size:14px; background-repeat:no-repeat; width:100%; height:36px; padding-left:8px; border:1px solid #E4E4E4; border-radius:5px; font:15px Roboto; color:var(--color-blue-highlight); transition:border 300ms ease-in-out; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none;} #upload-code .bulkcode .code-block .body__options .choice.first select {background-position:98% 50%;} #upload-code .bulkcode .code-block .body__options .choice.second select {background-position:96% 50%;} #upload-code .bulkcode .code-block .body__options .choice.third select {background-position:94% 50%;} #upload-code .bulkcode .code-block .body__options .choice select optgroup {background-color:#FCFCFC; height:30px; padding:10px; font-style:normal; font-weight:normal; color:#666;} #upload-code .bulkcode .code-block .body__options .choice select option {background-color:#FFF; color:#4B4B4B; cursor:pointer;} #upload-code .bulkcode .code-block .body__options .choice .copy-btn {background-image:linear-gradient(to right, #48B93B 0%, #228D1A 51%, #48B93B 100%); background-size:300%; display:flex; justify-content:center; align-items:center; width:100%; height:36px; padding:0 20px; border-radius:34px; font-size:15px; transition:background-position 900ms ease-in-out; box-shadow:0 1px 2px rgba(0,0,0,0.1);} #upload-code .bulkcode .code-block .body__options .choice .copy-btn:not(.error):hover {background-position:right center;} #upload-code .bulkcode .code-block .body__options .choice .copy-btn.error {opacity:0.5;} #upload-code .bulkcode .code-block .body__options .choice .copy-btn svg {width:19px; height:19px; fill:#FFF;} #upload-code .bulkcode .code-block .body__options .choice .copy-btn span {padding-left:7px; color:#FFF;} #upload-code .bulkcode .code-block .body__field {position:relative; background-color:#FCFCFC; display:flex; flex-wrap:wrap; border-radius:5px; box-shadow:inset 0 0px 15px rgba(0,0,0,0.08);} #upload-code .bulkcode .code-block .body__field.error {display:flex; justify-content:center; align-items:center; min-height:200px; padding:10px 5px;} #upload-code .bulkcode .code-block .body__field.error .message {color:var(--color-red-highlight); text-align:center;} #upload-code .bulkcode .code-block .body__field .left-side {width:48px; /*display:flex; align-items:stretch;*/} #upload-code .bulkcode .code-block .body__field[data-layout="horizontal"] .left-side {width:0px;} #upload-code .bulkcode .code-block .body__field #output {flex:1; min-height:200px; padding:10px 5px; font-size:14px; color:var(--color-green-highlight); overflow-wrap:break-word;} #upload-code .bulkcode .code-block .body__field[data-layout="vertical"] #output .output__row {display:block;} #upload-code .bulkcode .code-block .body__field[data-layout="horizontal"] #output .output__row {display:inline; word-wrap:break-word;} #upload-code .bulkcode .code-block .body__field #output .output__row:before {content:attr(data-number); position:absolute; left:8px; background-color:rgba(0, 0, 0, 0.80); width:38px; border-radius:2px; font-size:12px; line-height:15px; color:#FFF; text-align:center;} #upload-code .bulkcode .code-block .body__field[data-layout="horizontal"] #output .output__row:before {display:none;} #upload-code .bulkcode .code-block .body__field #output .output__row.grey {font-size:14px; color:#888;} #upload-code .btn--show-more {background-color:#FFF; display:flex; justify-content:center; align-items:center; width:100%; padding:20px; border-radius:5px; font-size:14px; line-height:18px; color:var(--color-blue-highlight); transition:box-shadow 300ms ease-out; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-code .btn--show-more:hover {box-shadow:0 8px 16px 0 rgba(0,0,0,0.16);} #upload-sorting .sorting-block {background-color:#FFF; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-sorting .sorting-block .header {background-color:#FCFCFC; padding:10px 15px; border-bottom:1px solid #EDEDED; border-radius:5px 5px 0px 0px;} #upload-sorting .sorting-block .header .title {font-size:14px; color:#333;} #upload-sorting .sorting-block .subheader {display:flex; justify-content:space-between; align-items:center; padding:10px;} #upload-sorting .sorting-block .subheader .left-side {margin-right:10px;} #upload-sorting .sorting-block .subheader .left-side .info {display:flex; align-items:center; font-size:12px; color:#555;} #upload-sorting .sorting-block .subheader .left-side .info:before {content:""; background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Ikljb25zIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iT3V0bGluZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NDIuMDAwMDAwLCAtMjg4LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iQWN0aW9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCAxMDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3V0bGluZWQtLy1BY3Rpb24tLy1pbmZvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDAuMDAwMDAwLCAxODYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoIiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLDcgTDEzLDcgTDEzLDkgTDExLDkgTDExLDcgWiBNMTEsMTEgTDEzLDExIEwxMywxNyBMMTEsMTcgTDExLDExIFogTTEyLDIgQzYuNDgsMiAyLDYuNDggMiwxMiBDMiwxNy41MiA2LjQ4LDIyIDEyLDIyIEMxNy41MiwyMiAyMiwxNy41MiAyMiwxMiBDMjIsNi40OCAxNy41MiwyIDEyLDIgWiBNMTIsMjAgQzcuNTksMjAgNCwxNi40MSA0LDEyIEM0LDcuNTkgNy41OSw0IDEyLDQgQzE2LjQxLDQgMjAsNy41OSAyMCwxMiBDMjAsMTYuNDEgMTYuNDEsMjAgMTIsMjAgWiIgaWQ9IvCflLktSWNvbi1Db2xvciIgZmlsbD0iIzc3NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); background-size:16px; display:inline-flex; margin-right:5px; width:16px; height:16px;} #upload-sorting .sorting-block .subheader .right-side {display:flex; align-items:center;} #upload-sorting .sorting-block .subheader .right-side .sort-by {background-image:url(/assets/img/sprite/global.svg#icon__dropdown); background-position:98% 50%; background-size:14px; background-repeat:no-repeat; width:240px; height:36px; padding-left:8px; border:1px solid #E4E4E4; border-radius:5px; font:15px Roboto; color:var(--color-blue-highlight); transition:border 300ms ease-in-out; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none;} #upload-sorting .sorting-block .subheader .right-side .sort-by:hover {border:1px solid rgb(204, 204, 204);} #upload-sorting .sorting-block .subheader .right-side .sort-by optgroup {background-color:#FCFCFC; height:30px; padding:10px; font-style:normal; font-weight:300; color:#666;} #upload-sorting .sorting-block .subheader .right-side .sort-by option {background-color:#FFF; color:#4B4B4B; cursor:pointer;} #upload-sorting .sorting-block .subheader .right-side .reverse-btn {transform:rotate(312deg); background-image:url(/assets/img/sprite/global.svg#icon__viceversa); background-position:50% 50%; background-size:24px; background-repeat:no-repeat; margin-left:10px; width:24px; height:24px; float:right; transition:transform 300ms; cursor:pointer;} #upload-sorting .sorting-block .subheader .right-side .reverse-btn.active {transform:rotate(132deg);} #upload-sorting .sorting-block .grid {position:relative; margin-left:10px;} #upload-sorting .sorting-block .grid .item {position:absolute; background-color:#F8F6F9; /*border: 1px solid #EDEDED;*/ overflow:hidden; border-radius:5px; cursor:grab;} #upload-sorting .sorting-block .grid .item:active {cursor:grabbing;} #upload-sorting .sorting-block .grid .item__body {position:relative; width:100%; height:100%;} #upload-sorting .sorting-block .grid .item__body .media {position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; /*transition:transform 150ms linear 0s; transform:scale(1);*/ width:100%; height:100%;} #upload-sorting .sorting-block .grid .item__body .media:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#000; transition:opacity 400ms ease; opacity:0;} #upload-sorting .sorting-block .grid .item__body:hover .media:after {opacity:0.5;} #upload-sorting .sorting-block .grid .item__body .media img {width:100%; height:100%; object-fit:cover; object-position:center 0;} /*#upload-sorting .sorting-block .grid .item:hover .item__body .media {transition:transform 150ms linear 0s; transform:scale(1.15);}*/ #upload-sorting .sorting-block .grid .item__body .media-number {position:absolute; top:10px; left:10px; z-index:1; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; cursor:default;} #upload-sorting .sorting-block .grid .item__body .media-size {position:absolute; bottom:10px; left:10px; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; cursor:default;} #upload-sorting .sorting-block .grid .item__body .media-tools {position:absolute; top:0px; right:0px; z-index:2; transform:translateX(+100%); border-radius:3px; transition:transform 400ms ease; cursor:default;} #upload-sorting .sorting-block .grid .item__body:hover .media-tools {transform:translateX(0);} #upload-sorting .sorting-block .grid .item__body:hover .global__tooltip-options {visibility:visible;} #upload-sorting .sorting-block .grid .item__body .media-tools .btn {background-color:var(--color-purple-primary); background-position:50% 50%; background-repeat:no-repeat; display:block; margin:5px; width:40px; height:40px; overflow:hidden; border-radius:3px; white-space:nowrap; transition:400ms ease; cursor:pointer;} #upload-sorting .sorting-block .grid .item__body .media-tools .loading {cursor:wait;} #upload-sorting .sorting-block .grid .item__body .media-tools .loading .btn {pointer-events:none; opacity:0.7;} #upload-sorting .sorting-block .grid .item__body .media-tools .btn--zoom {background-image:url(/assets/img/sprite/global.svg#icon__zoom-in); background-size:24px; cursor:zoom-in;} #upload-sorting .sorting-block .grid .item__body .media-tools .btn--zoom:hover {background-color:var(--color-blue-highlight);} #upload-sorting .sorting-block .grid .item__body .media-tools .btn--delete {background-image:url(/assets/img/sprite/global.svg#icon__delete-image); background-size:28px;} #upload-sorting .sorting-block .grid .item__body .media-tools .btn--delete:hover {background-color:var(--color-red-primary);} #upload-sorting .sorting-block .grid .item__body .upload-progress:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:rgba(0, 0, 0, 0.70); display:block;} #upload-sorting .sorting-block .grid .item__body .upload-progress .middle {position:absolute; top:50%; left:0; z-index:10; transform:translateY(-50%); width:100%; padding:0 5px; color:var(--color-green-highlight); text-align:center;} #upload-sorting .sorting-block .grid .item__body .upload-progress .middle .percent {font-size:24px; line-height:30px;} #upload-sorting .sorting-block .grid .item__body .upload-progress .middle .error {font-size:14px; color:var(--color-red-primary);} #upload-sorting .sorting-block .grid .item__body .upload-progress .bottom {position:absolute; bottom:0; left:0; z-index:10; width:100%;} #upload-sorting .sorting-block .grid .item__body .upload-progress .bottom .bar {background-color:var(--color-green-highlight); height:4px; transition:width 1s;} #upload-settings .tab-body .main {background-color:#FFF; margin-bottom:15px; padding:15px 10px 10px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-settings .tab-body .main .option {display:flex; padding:15px; border-bottom:1px solid #EDEDED;} #upload-settings .tab-body .main .option__name {width:170px;} #upload-settings .tab-body .main .option__name .title {font-size:14px; color:#666;} #upload-settings .tab-body .main .option__description {margin-left:40px;} #upload-settings .tab-body .main .option__description .global__input-checkbox span {font-size:13px; line-height:16px; color:#4B4B4B;} #upload-settings .tab-body .main .option__description .react-tagsinput-tag {background:#DFDAE8; display:inline-block; margin:0 3px 3px 0; height:25px; padding:0 4px 0 10px; border-radius:2px; border-radius:30px; font-size:12px; line-height:24px; color:#5D297D;} #upload-settings .tab-body .main .option__description .react-tagsinput-input {background:transparent; margin:4px; width:100%; padding:4px 10px; outline:none; border-bottom:1px dashed #DCDADE; font-family:inherit;} #upload-settings .tab-body .main .option__description .react-tagsinput-remove {content:""; background-image:url(/assets/img/sprite/global.svg#icon__close--purple); background-repeat:no-repeat; display:inline-block; margin:5px 0px 8px 2px; width:16px; height:16px; vertical-align:top; opacity:0.6; cursor:pointer;} #upload-settings .tab-body .main .footer {display:flex; justify-content:center; margin:15px 0px 10px;} #upload-settings .tab-body .main .footer .delete-btn {background-image:linear-gradient(to right, var(--color-red-primary) 0%, var(--color-red-highlight) 51%, var(--color-red-primary) 100%); background-size:300%; display:flex; justify-content:center; align-items:center; width:400px; height:44px; border-radius:50px; transition:all 900ms ease-in-out; cursor:pointer;} #upload-settings .tab-body .main .footer .delete-btn:hover {background-position:right center;} #upload-settings .tab-body .main .footer .delete-btn span {font-size:16px; color:#FFF;} #upload-post .main {background-color:#FFF; margin-bottom:15px; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);} #upload-post .main p {font-size:16px; line-height:26px; color:#4B4B4B;} #upload-post .main .cover {position:relative; display:none; height:240px;} #upload-post .main .cover .heading {position:absolute; bottom:10px; left:15px; z-index:1;} #upload-post .main .cover .heading .title {font-family:Impact; font-size:36px; line-height:44px; font-weight:400; color:#FFF; letter-spacing:1px;} #upload-post .main .cover .media {position:absolute; top:0; bottom:0; left:0; right:0;} #upload-post .main .cover .media:after {content:""; position:absolute; top:0; left:0; background-color:rgba(0, 0, 0, 0.5); width:100%; height:100%;} #upload-post .main .cover .media img {width:100%; height:100%; object-fit:cover;} #upload-post .main .quote {display:flex; flex-flow:column; justify-content:center; align-items:center; margin:70px 0px 60px;} #upload-post .main .quote blockquote {position:relative; font-style:italic;} #upload-post .main .quote blockquote:before {content:"«"; position:absolute; bottom:-10px; left:-110px; font-size:140px; color:var(--color-purple-primary); opacity:0.5;} #upload-post .main .quote blockquote:after {content:"»"; position:absolute; bottom:-60px; right:-80px; font-size:140px; color:var(--color-purple-primary); opacity:0.2;} #upload-post .main .quote blockquote p {font-size:24px; line-height:30px; color:#666;} #upload-post .main .quote blockquote footer {margin-top:10px; font-size:18px; color:#666; text-align:right;} #upload-post .main .quote blockquote footer cite {font-style:normal;} #upload-post .main .intro {margin-bottom:10px; padding:0px 10px;} #upload-post .main .rule {display:flex; align-items:center; margin-bottom:20px; padding:10px;} #upload-post .main .rule.agree {background-color:var(--color-green-soft);} #upload-post .main .rule.disagree {background-color:var(--color-red-soft);} #upload-post .main .rule .media {flex-shrink:0; overflow:hidden; border-radius:5px;} #upload-post .main .rule.agree .media {margin-right:10px; width:307px; height:240px;} #upload-post .main .rule.disagree .media {margin-left:10px; width:300px; height:214px;} #upload-post .main .rule .media video {width:100%; height:100%;} #upload-post .main .rule .sub-title {margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #DDD; font-size:20px; font-weight:400; color:#333;} #upload-post .main .rule p {position:relative; padding-left:30px;} #upload-post .main .rule.agree p {color:var(--color-green-dark);} #upload-post .main .rule.disagree p {color:var(--color-red-dark);} #upload-post .main .rule p:before {content:""; position:absolute; top:5px; left:5px; background-size:16px; background-repeat:no-repeat; width:16px; height:16px;} #upload-post .main .rule .yes p:before {background-image:url(/assets/img/sprite/global.svg#reaction-icon__like--green);} #upload-post .main .rule .no p:before {background-image:url(/assets/img/sprite/global.svg#reaction-icon__dislike--red);} #upload-post .main .actions {display:flex; justify-content:center; align-items:center; margin:0px 20px 20px; padding:20px 0px;} #upload-post .main .actions .publish-btn {background-image:linear-gradient(to right, #F69C00 0%, #DE9413 51%, #F69C00 100%); background-size:300%; display:flex; justify-content:center; align-items:center; width:360px; height:44px; border-radius:50px; font-size:16px; color:#FFF; transition:all 900ms ease-in-out; cursor:pointer;} #upload-post .main .actions .publish-btn:hover {background-position:right center;} #upload-post .main .actions .publish-btn.loading {opacity:0.7; cursor:wait;} #upload-post .main .actions .publish-btn.cancel {background-image:linear-gradient(to right, #B5B5B5 0%, #9F9F9F 51%, #B5B5B5 100%);} #upload-post .main .actions .notification {font-size:16px; line-height:26px;} #upload-post .main .actions .notification.error {color:var(--color-red-primary);} /* --- M E D I A Q U E R I E S --- */ @media (max-width: 1199px) {/* Rules for laptops, small desktop screens, and smaller viewports */ #tabs-menu .tab {padding:15px;}} @media (max-width:991px) {/* Rules for tablets and smaller viewports */ #upload .container {padding:0 5px;} #page.code .container {padding:0 5px;} #tabs-menu .tab .description--full {display:none;} #tabs-menu .tab .description--short {display:block;} #upload-edit .tab-body .main__left-side.animated {animation:initial;} #upload-code .bulkcode .code-block .body__options {grid-template-columns:1fr 1fr;} #upload-post .main .rule .media {display:none;}} @media (max-width:820px) {#upload-edit .tab-body .main {flex-flow:column-reverse;} #upload-edit .tab-body .main__right-side {position:initial; margin-left:0px; width:100%;} #upload-post .main .quote blockquote:before {left:0px; opacity:0.2;} #upload-post .main .quote blockquote:after {right:0px;}} @media (max-width:767px) {/* Rules for smartphones only */ #upload .container {padding:0px;} #page.code .container {padding:0px;} #album-url {margin:0 5px 15px;} #album-url .body {padding:15px 5px;} #upload .global__tooltip-help__body {max-width:300px;} #privacy {margin:0 5px 15px;} /*minipromo*/ #page.media-uploader {padding-top: var(--height-page-header);} #page.media-uploader #page-header {position:absolute;} /*minipromo*/ #upload {margin-bottom:100px;} #tabs-menu {/*position:fixed; bottom:0px; left:0px; right:0px; top:unset; border-radius:0px; border-top: 1px solid rgba(0, 0, 0, 0.05); box-shadow:unset;*/ top:0px; border-radius:0px;} #tabs-menu .tab .icon {margin-right:0px;} #tabs-menu .tab .description {display:none;} #upload-edit .tab-body .main__right-side #action-buttons {margin:0 10px;} #upload-sorting .sorting-block {border-radius:0px;} #upload-sorting .sorting-block .subheader .left-side {display:none;} #upload-sorting .sorting-block .grid .item__body .media-tools {display:none;} #upload-sorting .sorting-block .grid .item__body .media:after {display:none;} #upload-code #code-menu {margin:0 10px 10px;} #upload-code .singlecode .article {border-radius:0px;} #upload-code .singlecode .article .item .media-side {flex:auto; width:100%; padding:10px;} #upload-code .singlecode .article .item__media {position:relative; top:0; bottom:0; left:0; right:0; max-height:400px;} #upload-code .singlecode .article .item .code-side {min-width:100%; padding:10px;} #upload-code .singlecode .article .item .code-side .share-link .title span {display:none;} #upload-code .bulkcode .select-block {border-radius:0px;} #upload-code .bulkcode .select-block .body .info .left-side {display:none;} #upload-code .bulkcode .select-block .body .grid {grid-template-columns:repeat(5, 1fr);} #upload-code .bulkcode .code-block {border-radius:0px;} #upload-code .bulkcode .code-block .body__options {grid-template-columns:1fr;} #upload-code .bulkcode .code-block .body__options .choice {width:100%;} #upload-code .bulkcode .code-block .body__options .choice select optgroup {font-size:12px;} #upload-code .bulkcode .code-block .body__options .choice select option {font-size:12px;} #upload-settings .tab-body .main .option {flex-flow:column; padding:10px 0px;} #upload-settings .tab-body .main .option__name {margin-bottom:10px; width:100%;} #upload-settings .tab-body .main .option__description {margin-left:20px;} #upload-post .main p {line-height:24px;} #upload-post .main .quote {margin:50px 0 30px; padding:0 10px;} #upload-post .main .quote blockquote p {font-size:20px; line-height:24px;}} @media (max-width:430px) {/* Rules for smartphones only */ #upload-code .bulkcode .select-block .body .grid {grid-template-columns:repeat(4, 1fr);} #upload #pagination .left-side {display:none;}} @media (max-width:380px) {/* Rules for smartphones only */ #privacy .body {padding:10px 5px 0px;} #privacy .body .option .circle {margin-right:5px;} #privacy .body .option .title {font-size:13px;} #privacy .footer {margin:0 10px;} #upload #add-tags .body {padding:10px;} #upload #add-tags .body .example span:last-child {display:none;} #upload-code #code-menu {justify-content:end;} #upload-code #code-menu .left-side {display:none;}} /* --- M E D I A Q U E R I E S --- */ /* --- K E Y F R A M E S --- */ @keyframes bounceUpAndDown {0% {top:-70px;} 50% {top:50px;} 100% {top:0px;}} /*Animations for icon loading*/ @keyframes saving_animation {100% {background-position:-175px 0px;}} @keyframes saved_animation {100% {background-position:-275px -25px;}} /*Animations for icon loading*/ /* --- K E Y F R A M E S --- */