@import url(//hello.myfonts.net/count/3028ec);@import url(https://fast.fonts.net/cssapi/9c63d6f1-1955-4793-8678-dff956314571.css);@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);._28vG3g2XydDSNnNUaK0Yu { width: 100%; border: none; height: 30px; display: flex; align-items: center; justify-content: center; } ._28vG3g2XydDSNnNUaK0Yu:after { display: block; content: "***"; font-size: 30px; letter-spacing: 0.2em; line-height: 1.5; height: inherit; } .sidebar .sidebar-absolute { position: absolute; right: 30px; } .sidebar .sidebar-absolute:before { content: ''; position: absolute; width: 1px; height: 30px; top: -5px; left: -25px; background: #e0e0e0; } .sidebar .sidebar-absolute span:first-of-type { float: left; } .sidebar .sidebar-relative { position: relative; z-index: 1111; } .sidebar .sidebar-relative .filter--section .search-field div { height: 40px; } .Msu9lUaXK_AuD0caMAQ-S { max-width: 240px; background-color: white; top: 28px; overflow-x: hidden; border: 1px solid #eee; border-top: none; position: absolute; } .Msu9lUaXK_AuD0caMAQ-S .filter--section { position: relative; } .Msu9lUaXK_AuD0caMAQ-S .filter-flex { display: flex; align-items: center; justify-content: flex-end; padding: 16px; } .Msu9lUaXK_AuD0caMAQ-S .filter-flex div + div { margin-left: 10px; } .Msu9lUaXK_AuD0caMAQ-S .filter--section + .filter--section:after { position: absolute; top: 0; left: 0; width: 100%; height: 1px; content: ' '; border-top: 1px solid #eee; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group { padding: 16px; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-title { padding-left: 5px; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-title--expanded { display: flex; justify-content: space-between; padding-bottom: 5px; min-height: 27px; align-items: center; position: relative; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-title--expanded > div { white-space: nowrap; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-title--expanded .counter { margin-left: 5px; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-title--expanded .collapse { user-select: none; font-size: 12px; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-title--expanded .collapse.button { padding: 0; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .section-body { max-height: 260px; overflow: auto; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .checkbox-element { padding: 5px 0; width: 100%; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .checkbox-element label { width: 100%; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .checkbox-element span { line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.checkbox-group .checkbox-element .checkbox-label--wrap span { overflow: unset; text-overflow: unset; word-break: break-word; white-space: normal; } .Msu9lUaXK_AuD0caMAQ-S .filter--section.search-group { padding: 0 7px; } .title-counter { min-width: 22px; display: inline-flex; height: 22px; align-items: center; justify-content: center; font-size: 12px; border-radius: 10px; padding: 0 6px; color: white; background-color: #1976d2; font-weight: 500; } ._3g5C01echmne88zilWHJPf { padding-bottom: 1.5rem !important; } ._3g5C01echmne88zilWHJPf .small-width { width: 90%; } ._3g5C01echmne88zilWHJPf .form--content { margin-top: 24px; max-width: 810px; border: 1px solid #e4e4e4; border-radius: 4px; } ._3g5C01echmne88zilWHJPf .radio-group { margin-left: 17px; } ._3g5C01echmne88zilWHJPf .radio-group label { margin: 0 16px 0 0; font-size: 15px; line-height: 20px; } ._3g5C01echmne88zilWHJPf .radio-group svg { width: 20px; height: 20px; } ._3g5C01echmne88zilWHJPf .header { position: relative; align-items: center; display: flex; height: 7.2rem; padding: 24px; border-radius: 4px 4px 0 0; } ._3g5C01echmne88zilWHJPf .header h3 { color: rgba(0, 0, 0, 0.87); font-size: 1.7rem; line-height: 2.2rem; width: 100%; font-weight: 600; letter-spacing: 0.2px; } ._3g5C01echmne88zilWHJPf .header .cancel-button { padding: .5rem; } ._3g5C01echmne88zilWHJPf .body { padding: 24px; } ._3g5C01echmne88zilWHJPf .body .form-group > div { width: 100%; } ._3g5C01echmne88zilWHJPf .body .form-group > div .text { font-size: 15px; line-height: 15px; text-align: right; margin: 8px 25px 0 0; } ._3g5C01echmne88zilWHJPf .body .form-group > div .text.as { line-height: 2.6rem; margin-right: 5px; margin-top: 5px; } ._3g5C01echmne88zilWHJPf .body .form-group > div label { font-size: 1.6rem; } ._3g5C01echmne88zilWHJPf .body .form-group input { font-size: 1.6rem; line-height: 1.9rem; border-radius: 5px; } @media only screen and (min-width: 992px) { ._3g5C01echmne88zilWHJPf .body .invite-buttons { margin: 0 40px; } } ._3g5C01echmne88zilWHJPf .footer { padding: 24px; border-radius: 0 0 4px 4px; } ._3g5C01echmne88zilWHJPf .footer button.primary { letter-spacing: .127rem; margin: 0 .4rem; padding-bottom: 0; padding-top: 0; } ._3g5C01echmne88zilWHJPf hr { margin: 1em -24px; } ._3g5C01echmne88zilWHJPf .init-table.pinned .title { overflow: hidden; white-space: nowrap; max-width: 350px; text-overflow: ellipsis; } ._3g5C01echmne88zilWHJPf .init-table .medium-column .description, ._3g5C01echmne88zilWHJPf .init-table .medium-column .material-icons-check { display: flex; } ._3g5C01echmne88zilWHJPf .init-table .medium-column .description { white-space: pre-wrap; } ._3g5C01echmne88zilWHJPf .init-table .medium-column .Select-option li { height: auto; } ._3g5C01echmne88zilWHJPf .init-table .medium-column .Select-option .with-check .title { color: #588BC2; } ._3g5C01echmne88zilWHJPf .init-table .medium-column .Select-option .with-check .material-icons { top: 0; } ._3g5C01echmne88zilWHJPf .init-table .description, ._3g5C01echmne88zilWHJPf .init-table .material-icons-check { display: none; } ._3g5C01echmne88zilWHJPf .init-table .input-menu-height { height: 56px; padding: 16px 0 17px 15px; } ._3g5C01echmne88zilWHJPf .init-table .input-menu-height .with-check { line-height: 24px; } ._3g5C01echmne88zilWHJPf .init-table .with-sorting .with-check, ._3g5C01echmne88zilWHJPf .init-table .with-sorting .without-check { font-size: 1.4rem; margin: 4.4px auto; width: 80%; } ._3g5C01echmne88zilWHJPf .init-table .with-sorting .with-check { color: #5fc5f1; display: flex; flex-direction: row; justify-content: flex-end; } ._3g5C01echmne88zilWHJPf .init-table .with-sorting .material-icons { font-size: 1.4rem; margin-right: .5rem; } ._3g5C01echmne88zilWHJPf .date-pickers { display: flex; flex-direction: column; justify-content: space-between; } @media only screen and (min-width: 992px) { ._3g5C01echmne88zilWHJPf .date-pickers { flex-direction: row; } } ._3g5C01echmne88zilWHJPf .date-pickers > div { position: relative; width: 100%; } @media only screen and (min-width: 992px) { ._3g5C01echmne88zilWHJPf .date-pickers > div { width: calc(50% - 4px); } } ._3g5C01echmne88zilWHJPf .date-pickers > div:hover .icon-time { display: none; } ._3g5C01echmne88zilWHJPf .date-pickers > div input:hover, ._3g5C01echmne88zilWHJPf .date-pickers > div input:active, ._3g5C01echmne88zilWHJPf .date-pickers > div input:focus { z-index: 1; background: white; } ._3g5C01echmne88zilWHJPf .date-pickers > div .icon-time { right: 12px; top: 35px; font-size: 24px; position: absolute; } ._3g5C01echmne88zilWHJPf .input-menu-height { height: 56px; padding: 16px 0 17px 15px; } ._3g5C01echmne88zilWHJPf .input-menu-height .with-check { line-height: 24px; } ._3g5C01echmne88zilWHJPf .with-sorting .with-check, ._3g5C01echmne88zilWHJPf .with-sorting .without-check { font-size: 1.4rem; margin: 4.4px auto; width: 80%; } ._3g5C01echmne88zilWHJPf .with-sorting .with-check { color: #5fc5f1; display: flex; flex-direction: row; justify-content: flex-end; } ._3g5C01echmne88zilWHJPf .with-sorting .material-icons { font-size: 1.4rem; margin-right: .5rem; } ._3g5C01echmne88zilWHJPf li > .with-check .title { color: #5fc5f1; } ._3g5C01echmne88zilWHJPf .description, ._3g5C01echmne88zilWHJPf .material-icons-check { display: block; } ._3g5C01echmne88zilWHJPf .with-check, ._3g5C01echmne88zilWHJPf .without-check { display: flex; flex-direction: column; position: relative; padding-left: 1rem; } ._3g5C01echmne88zilWHJPf .with-check .title, ._3g5C01echmne88zilWHJPf .without-check .title { font-size: 1.7rem; line-height: normal; } ._3g5C01echmne88zilWHJPf .with-check .title .material-icons, ._3g5C01echmne88zilWHJPf .without-check .title .material-icons { margin-right: .5rem; color: #5fc5f1; left: -1.7rem; position: absolute; } ._3g5C01echmne88zilWHJPf .with-check .description, ._3g5C01echmne88zilWHJPf .without-check .description { font-size: 1.4rem; line-height: 1.9rem; width: 100%; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row { position: relative; display: flex; flex-direction: row; padding: 20px 26px 20px 50px; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row.exist > span { color: rgba(0, 0, 0, 0.6); font-size: 15px; line-height: 17px; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row.border { border-bottom: 1px solid #eeeeee; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row.border .count { left: 25px; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row div span { color: rgba(0, 0, 0, 0.87); font-size: 15px; line-height: 17px; text-overflow: ellipsis; overflow: hidden; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row .name span { text-overflow: ellipsis; overflow: hidden; width: 50%; white-space: nowrap; word-break: unset; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row .email, ._3g5C01echmne88zilWHJPf .single-invite .flex-row .name { color: rgba(0, 0, 0, 0.87); display: flex; flex-direction: column; width: 50%; font-size: 15px; line-height: 17px; } ._3g5C01echmne88zilWHJPf .single-invite .flex-row .email .title span, ._3g5C01echmne88zilWHJPf .single-invite .flex-row .name .title span { color: rgba(0, 0, 0, 0.6); font-size: 12px; letter-spacing: 0.38px; line-height: 16px; margin-bottom: 13px; } ._3g5C01echmne88zilWHJPf .single-invite .list-channel { max-width: 100%; word-wrap: break-word; } ._3g5C01echmne88zilWHJPf .single-invite .count { position: absolute; top: 22px; left: 16px; } ._2EFvv4YQQH0cLmda-XwhUn { width: 100%; background: #fff; display: flex; flex-direction: row; flex-wrap: wrap; } ._2EFvv4YQQH0cLmda-XwhUn > .t-header { border-top: 1px solid #eee; border-bottom: 1px solid #eee; width: 100%; padding: 14px 28px; display: flex; align-items: center; color: #999999; font-size: 1.3rem; } ._2EFvv4YQQH0cLmda-XwhUn > .t-header > .td { padding: 0 5px; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body { padding: 0 14px; max-width: 100%; display: flex; flex-direction: column; flex: 1; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row { display: flex; padding: 0 14px; flex-wrap: wrap; font-size: 1.6rem; width: 100%; border-bottom: 1px solid #E8E8E8; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row:hover:not(.open) { background-color: #F2F2F2; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row.disable-row { position: relative; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row.disable-row::after { content: 'Processing...'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ebebeb47; display: flex; justify-content: center; align-items: center; cursor: wait; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row > .t-row-content { width: 100%; min-height: 64px; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row > .t-row-content > .t-col .horizontal { padding: 1rem 0; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row > .td { padding: 0 5px; } ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .t-row .t-col-sub { width: 100%; flex-basis: 100%; margin: 14px 0 23.8px 0; display: flex; justify-content: flex-end; } ._2EFvv4YQQH0cLmda-XwhUn > .t-header > .td:last-child, ._2EFvv4YQQH0cLmda-XwhUn > .t-body > .tr > .td:last-child { display: flex; justify-content: center; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .Select-control { height: 100%; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .Select-control .Select-value-label .title { color: #999; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .Select-control .Select-arrow-zone { padding-top: 2px; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .search-field { width: 100%; position: relative; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .search-field div { border-radius: 4px; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .search-field div:before { border-bottom: none; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .search-field input { height: 2.2rem; letter-spacing: .15px; line-height: 1.5rem; padding: 1.4rem 2rem 1.4rem 4.6rem; font-size: 1.7rem; } ._2EFvv4YQQH0cLmda-XwhUn .t-col .search-field .material-icons { color: rgba(0, 0, 0, 0.54); font-size: 2.4rem; left: 1rem; position: absolute; top: 3rem; z-index: 2; } ._1FkXBf4cBbwR2Yb-J3OH_K { width: 95%; background: #F2F2F2; border-radius: 4px; border: 1px solid #E8E8E8; } ._1FkXBf4cBbwR2Yb-J3OH_K > .t-header { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #E8E8E8; color: #999999; letter-spacing: 1px; } ._1FkXBf4cBbwR2Yb-J3OH_K > .t-header > .t-col, ._1FkXBf4cBbwR2Yb-J3OH_K > .t-body > .t-row > .t-col { padding: 6px 16px; } ._1FkXBf4cBbwR2Yb-J3OH_K > .t-body { max-width: 100%; } ._1FkXBf4cBbwR2Yb-J3OH_K > .t-body > .t-row { display: flex; align-items: center; padding: 6px 16px; width: 100%; } ._1FkXBf4cBbwR2Yb-J3OH_K > .t-body > .t-row > .t-row-content { width: 100%; } ._3wTKhKY4RQz0NV5O39bn9p { border-radius: 4px; width: 90%; } ._3wTKhKY4RQz0NV5O39bn9p .list { max-height: 500px; overflow-x: hidden; overflow-y: scroll; margin: 0; } ._3wTKhKY4RQz0NV5O39bn9p .list-header .element { padding: 0 12px 22px; border-bottom: 1px solid #eee; } ._3wTKhKY4RQz0NV5O39bn9p .element { padding: 22px 12px 0; flex-basis: 100%; } @media only screen and (min-width: 425px) { ._3wTKhKY4RQz0NV5O39bn9p .element { flex-basis: 50%; } } @media only screen and (min-width: 992px) { ._3wTKhKY4RQz0NV5O39bn9p .element { flex-basis: 33%; } } ._3wTKhKY4RQz0NV5O39bn9p .element .element-label { margin: 0; color: rgba(0, 0, 0, 0.87); font-size: 1.5rem; line-height: 1.6rem; } ._3wTKhKY4RQz0NV5O39bn9p .element .element-label.disabled { opacity: 0.5; cursor: not-allowed; } ._3wTKhKY4RQz0NV5O39bn9p .element:not(.all) .element-label { font-weight: normal; } ._3wTKhKY4RQz0NV5O39bn9p .all { width: 100%; } .l_Kdj4HHygWDJfSIzoHP3 { min-width: 200px; } .l_Kdj4HHygWDJfSIzoHP3 .avatar-container { border: 0; height: 80px; margin-bottom: 15px; } .l_Kdj4HHygWDJfSIzoHP3 .avatar-container .avatar { background-position: 50%; background-size: cover; height: 8rem; margin: 0; width: 8rem; } .l_Kdj4HHygWDJfSIzoHP3 .avatar-container .person { font-size: 7rem; margin: -3.5rem; } .l_Kdj4HHygWDJfSIzoHP3 .rounded { border-radius: 50%; } .l_Kdj4HHygWDJfSIzoHP3 .work-info > .info + .info:before { content: '|'; margin: 0 5px; } ._2aWO0M0MECXDLf1MSyAHwY { height: 16px; width: 16px; display: block; position: relative; padding-left: 30px; cursor: pointer; font-size: 22px; user-select: none; } ._2aWO0M0MECXDLf1MSyAHwY input { display: none; } ._2aWO0M0MECXDLf1MSyAHwY.disabled .checkmark { opacity: 0.5; cursor: not-allowed; } ._2aWO0M0MECXDLf1MSyAHwY .checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; border: 1px solid #E8E8E8; border-radius: 4px; background: #fff; } ._2aWO0M0MECXDLf1MSyAHwY .checkmark:after { content: ""; position: absolute; display: none; } ._2aWO0M0MECXDLf1MSyAHwY .checkmark:after { left: 4px; top: 0; width: 6px; height: 11px; border: solid #4d91d9; border-width: 0 2px 2px 0; transform: rotate(45deg); } ._2aWO0M0MECXDLf1MSyAHwY:hover input ~ .checkmark { border-color: #ccc; } ._2aWO0M0MECXDLf1MSyAHwY input:checked ~ .checkmark:after { background-color: transparent; display: block; } .nZE5o7sUSCT3e1WJ1J4hx label, ._53YSAYH11-oL0CA2isGo3 label { color: #8c8c8c; display: block; font-size: 1.4rem; font-weight: 500; margin: 0 0 7px; } .nZE5o7sUSCT3e1WJ1J4hx { position: relative; margin-bottom: 15px; } .nZE5o7sUSCT3e1WJ1J4hx + .nZE5o7sUSCT3e1WJ1J4hx { margin-top: 3rem; } .nZE5o7sUSCT3e1WJ1J4hx .lock-button { position: absolute; color: #488ed8; font-size: 2rem; left: 1rem; top: 50%; } .nZE5o7sUSCT3e1WJ1J4hx .lock-button.disabled { opacity: .5; } .nZE5o7sUSCT3e1WJ1J4hx .message { position: absolute; bottom: 0; right: 0; transform: translateY(100%); color: #d0021b; } .nZE5o7sUSCT3e1WJ1J4hx.lockSupport input { padding-left: 3.2rem; } .nZE5o7sUSCT3e1WJ1J4hx.readonly:after { content: 'readonly'; position: absolute; right: 0; top: 0; color: #8c8c8c; } .nZE5o7sUSCT3e1WJ1J4hx textarea { resize: vertical; max-height: 30rem; } .nZE5o7sUSCT3e1WJ1J4hx textarea, .nZE5o7sUSCT3e1WJ1J4hx input { background-color: #fff; font-size: 1.6rem; } .nZE5o7sUSCT3e1WJ1J4hx textarea[readonly], .nZE5o7sUSCT3e1WJ1J4hx input[readonly] { border-color: #e2e2e2; } .nZE5o7sUSCT3e1WJ1J4hx.disabled textarea, .nZE5o7sUSCT3e1WJ1J4hx.disabled input { background-color: #ebebeb; } ._53YSAYH11-oL0CA2isGo3 { position: relative; } ._39LhUgLgX7coHBQwxW83d1 { padding-bottom: 1.5rem !important; } ._39LhUgLgX7coHBQwxW83d1 .small-width { width: 90%; } ._39LhUgLgX7coHBQwxW83d1 .form--content { margin-top: 40px; max-width: 810px; border: 1px solid #e4e4e4; border-radius: 4px; } ._39LhUgLgX7coHBQwxW83d1 .radio-group label { margin: 0 16px 0 0; font-size: 15px; line-height: 20px; } ._39LhUgLgX7coHBQwxW83d1 .radio-group svg { width: 20px; height: 20px; } ._39LhUgLgX7coHBQwxW83d1 .header { position: relative; align-items: center; display: flex; flex-direction: column; padding: 24px; border-radius: 4px 4px 0 0; } ._39LhUgLgX7coHBQwxW83d1 .header h3 { color: rgba(0, 0, 0, 0.87); font-size: 1.7rem; line-height: 2.2rem; width: 100%; font-weight: 600; letter-spacing: 0.2px; } ._39LhUgLgX7coHBQwxW83d1 .header .cancel-button { padding: .5rem; } ._39LhUgLgX7coHBQwxW83d1 .body { padding: 24px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > a { display: flex; flex-direction: row; align-items: center; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > a i.material-icons { transform: rotate(45deg); font-size: 2.5rem; margin-right: 3px; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > a > span { font-size: 16px; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > div { width: 100%; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > div .text { font-size: 15px; line-height: 15px; text-align: right; margin: 8px 25px 0 0; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > div .text.as { line-height: 2.6rem; margin-right: 5px; margin-top: 5px; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group > div label { font-size: 1.6rem; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group .pagination { margin-top: -16px; margin-bottom: -30px; } ._39LhUgLgX7coHBQwxW83d1 .body .form-group input { font-size: 1.6rem; line-height: 1.9rem; border-radius: 5px; } ._39LhUgLgX7coHBQwxW83d1 .body .horizontal-block { display: flex; align-items: center; margin-top: 15px; } ._39LhUgLgX7coHBQwxW83d1 .body .horizontal-block > * { margin: 0 10px 0 0; } ._39LhUgLgX7coHBQwxW83d1 .footer { padding: 24px; border-radius: 0 0 4px 4px; display: flex; flex-direction: column; justify-content: center; } ._39LhUgLgX7coHBQwxW83d1 .footer .horizontal-block { display: flex; flex-direction: row; justify-content: center; width: 100%; } ._39LhUgLgX7coHBQwxW83d1 .footer .horizontal-block > button.primary { letter-spacing: .127rem; margin: 0 .4rem; padding-bottom: 0; padding-top: 0; } ._39LhUgLgX7coHBQwxW83d1 .footer .error { color: #B00020; } ._39LhUgLgX7coHBQwxW83d1 hr { margin: 1em -24px; } ._39LhUgLgX7coHBQwxW83d1 .init-table.pinned .title { overflow: hidden; white-space: nowrap; max-width: 350px; text-overflow: ellipsis; } ._39LhUgLgX7coHBQwxW83d1 .init-table .medium-column .description, ._39LhUgLgX7coHBQwxW83d1 .init-table .medium-column .material-icons-check { display: flex; } ._39LhUgLgX7coHBQwxW83d1 .init-table .medium-column .description { white-space: pre-wrap; } ._39LhUgLgX7coHBQwxW83d1 .init-table .medium-column .Select-option li { height: auto; } ._39LhUgLgX7coHBQwxW83d1 .init-table .medium-column .Select-option .with-check .title { color: #588BC2; } ._39LhUgLgX7coHBQwxW83d1 .init-table .medium-column .Select-option .with-check .material-icons { top: 0; } ._39LhUgLgX7coHBQwxW83d1 .init-table .description, ._39LhUgLgX7coHBQwxW83d1 .init-table .material-icons-check { display: none; } ._39LhUgLgX7coHBQwxW83d1 .init-table .input-menu-height { height: 56px; padding: 16px 0 17px 15px; } ._39LhUgLgX7coHBQwxW83d1 .init-table .input-menu-height .with-check { line-height: 24px; } ._39LhUgLgX7coHBQwxW83d1 .init-table .with-sorting .with-check, ._39LhUgLgX7coHBQwxW83d1 .init-table .with-sorting .without-check { font-size: 1.4rem; margin: 4.4px auto; width: 80%; } ._39LhUgLgX7coHBQwxW83d1 .init-table .with-sorting .with-check { color: #5fc5f1; display: flex; flex-direction: row; justify-content: flex-end; } ._39LhUgLgX7coHBQwxW83d1 .init-table .with-sorting .material-icons { font-size: 1.4rem; margin-right: .5rem; } ._39LhUgLgX7coHBQwxW83d1 .date-pickers { display: flex; flex-direction: column; justify-content: space-between; } @media only screen and (min-width: 992px) { ._39LhUgLgX7coHBQwxW83d1 .date-pickers { flex-direction: row; } } ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div { position: relative; width: 100%; } @media only screen and (min-width: 992px) { ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div { width: calc(50% - 4px); } } ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div:hover .icon-time { display: none; } ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div input:hover, ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div input:active, ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div input:focus { z-index: 1; background: white; } ._39LhUgLgX7coHBQwxW83d1 .date-pickers > div .icon-time { right: 12px; top: 35px; font-size: 24px; position: absolute; } ._39LhUgLgX7coHBQwxW83d1 .input-menu-height { height: 56px; padding: 16px 0 17px 15px; } ._39LhUgLgX7coHBQwxW83d1 .input-menu-height .with-check { line-height: 24px; } ._39LhUgLgX7coHBQwxW83d1 .with-sorting .with-check, ._39LhUgLgX7coHBQwxW83d1 .with-sorting .without-check { font-size: 1.4rem; margin: 4.4px auto; width: 80%; } ._39LhUgLgX7coHBQwxW83d1 .with-sorting .with-check { color: #5fc5f1; display: flex; flex-direction: row; justify-content: flex-end; } ._39LhUgLgX7coHBQwxW83d1 .with-sorting .material-icons { font-size: 1.4rem; margin-right: .5rem; } ._39LhUgLgX7coHBQwxW83d1 li > .with-check .title { color: #5fc5f1; } ._39LhUgLgX7coHBQwxW83d1 .description, ._39LhUgLgX7coHBQwxW83d1 .material-icons-check { display: block; } ._39LhUgLgX7coHBQwxW83d1 .with-check, ._39LhUgLgX7coHBQwxW83d1 .without-check { display: flex; flex-direction: column; position: relative; padding-left: 1rem; } ._39LhUgLgX7coHBQwxW83d1 .with-check .title, ._39LhUgLgX7coHBQwxW83d1 .without-check .title { font-size: 1.7rem; line-height: normal; } ._39LhUgLgX7coHBQwxW83d1 .with-check .title .material-icons, ._39LhUgLgX7coHBQwxW83d1 .without-check .title .material-icons { margin-right: .5rem; color: #5fc5f1; left: -1.7rem; position: absolute; } ._39LhUgLgX7coHBQwxW83d1 .with-check .description, ._39LhUgLgX7coHBQwxW83d1 .without-check .description { font-size: 1.4rem; line-height: 1.9rem; width: 100%; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row { position: relative; display: flex; flex-direction: row; padding: 20px 26px 20px 50px; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row.exist > span { color: rgba(0, 0, 0, 0.6); font-size: 15px; line-height: 17px; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row.border { border-bottom: 1px solid #eeeeee; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row.border .count { left: 25px; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row div span { color: rgba(0, 0, 0, 0.87); font-size: 15px; line-height: 17px; text-overflow: ellipsis; overflow: hidden; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row .name span { text-overflow: ellipsis; overflow: hidden; width: 50%; white-space: nowrap; word-break: unset; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row .email, ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row .name { color: rgba(0, 0, 0, 0.87); display: flex; flex-direction: column; width: 50%; font-size: 15px; line-height: 17px; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row .email .title span, ._39LhUgLgX7coHBQwxW83d1 .single-invite .flex-row .name .title span { color: rgba(0, 0, 0, 0.6); font-size: 12px; letter-spacing: 0.38px; line-height: 16px; margin-bottom: 13px; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .list-channel { max-width: 100%; word-wrap: break-word; } ._39LhUgLgX7coHBQwxW83d1 .single-invite .count { position: absolute; top: 22px; left: 16px; } ._1d67matcrKbR6DZVlM51JS .color-field-preview { border: 1px solid #f2f2f2; } ._1d67matcrKbR6DZVlM51JS .url-block { margin-top: -10px; padding-top: 0; } ._1d67matcrKbR6DZVlM51JS .helper { position: absolute; } ._1d67matcrKbR6DZVlM51JS .primary-title { font-size: 1.8rem; margin-bottom: 25px; color: #2a2a2a; font-weight: 500; } ._1d67matcrKbR6DZVlM51JS .filtered-values { display: flex; flex-wrap: wrap; } ._1d67matcrKbR6DZVlM51JS .wrapper-drag { width: 100%; height: 50px; border: 1px solid #f2f2f2; border-radius: 4px; } ._1d67matcrKbR6DZVlM51JS .button-filter, ._1d67matcrKbR6DZVlM51JS .selected-filter { margin-bottom: 20px; padding: 10px 12px; } ._1d67matcrKbR6DZVlM51JS .selected-filter { background: rgba(72, 142, 216, 0.2); font-size: 15px; line-height: 18px; border-radius: 5px; margin-right: 15px; } ._1d67matcrKbR6DZVlM51JS .selected-filter .grey { color: #828282; margin-right: 5px; } ._1d67matcrKbR6DZVlM51JS .selected-filter .black { color: #000000; } ._1d67matcrKbR6DZVlM51JS .selected-filter button { margin-left: 10px; min-height: 0; padding: 0; } ._1d67matcrKbR6DZVlM51JS .number { float: right; } ._1d67matcrKbR6DZVlM51JS .in-app-new-filter { background-color: #ffffff; padding: 50px 25px 36px 28px; max-width: 320px; min-width: 230px; min-height: 240px; } ._1d67matcrKbR6DZVlM51JS .in-app-new-filter .title-filter { font-size: 1.8rem; font-weight: 500; color: #000000; position: absolute; top: 25px; } ._1d67matcrKbR6DZVlM51JS .in-app-new-filter label { height: 30px; margin: 7px 0 !important; } ._1d67matcrKbR6DZVlM51JS .in-app-new-filter .close-button { position: absolute; right: 25px; top: 15px; font-size: 20px; color: #202020; } ._1d67matcrKbR6DZVlM51JS .in-app-new-filter .label { font-size: 1.5rem; color: #000000; margin-left: 10px; width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ._1d67matcrKbR6DZVlM51JS .in-app-download .actions { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; } ._1d67matcrKbR6DZVlM51JS .in-app-download .input-button { position: absolute; z-index: 11; right: 0; top: 24px; width: 50px; height: 56px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } ._1d67matcrKbR6DZVlM51JS .in-app-download .media-add { display: none !important; } ._1d67matcrKbR6DZVlM51JS .in-app-download .image-group { text-align: center; max-width: 200px; margin: auto; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container { left: 50%; max-width: 900px; width: 100%; top: 50%; transform: translate(-50%, -50%); position: absolute; background: #fff; overflow-y: auto; max-height: 98%; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-header { padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; border-bottom: 1px solid #EBEBEB; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-header .modal-header--close { margin-left: 24px; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-header .modal-header--close .modal-header--close--button { margin-left: 10px; font-size: 20px; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-header .modal-header--content { display: flex; align-items: center; width: 100%; justify-content: space-between; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-header .modal-header--content .modal-header--title { font-weight: 500; font-size: 16px; line-height: 20px; color: #212121; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-header .modal-header--content .modal-header--title .icon { margin-right: 10px; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-body { width: 100%; padding: 30px; } ._1CBytj5LBRzGsnrTYhnkmt .modal-container .modal-footer { padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; border-top: 1px solid #588BC2; } ._2VTMH3l5LVC5s7DouTQyE- .modal-container { height: 100%; display: flex; flex-direction: column; } ._2VTMH3l5LVC5s7DouTQyE- .modal-container .modal-body { flex: 1; overflow-y: scroll; } ._3nocqfjnqUPEc2MeEQ3kJE { position: relative; } @media only screen and (min-width: 992px) { ._3nocqfjnqUPEc2MeEQ3kJE { margin: 0 48px; } } @media only screen and (max-width: 992px) { ._3nocqfjnqUPEc2MeEQ3kJE.invite.horizontal { flex-direction: column; } } ._3nocqfjnqUPEc2MeEQ3kJE:last-of-type { padding-bottom: 24px; border-bottom: 1px solid #eeeeee; } ._3nocqfjnqUPEc2MeEQ3kJE + ._3nocqfjnqUPEc2MeEQ3kJE { margin-top: 20px; } ._3nocqfjnqUPEc2MeEQ3kJE > .remove, ._3nocqfjnqUPEc2MeEQ3kJE > .add-button { position: absolute; width: 30px; height: 30px; } ._3nocqfjnqUPEc2MeEQ3kJE > .remove { display: flex; line-height: 20px; right: -48px; top: 29px; } ._3nocqfjnqUPEc2MeEQ3kJE > .add-button { right: -29px; top: 30px; } ._3nocqfjnqUPEc2MeEQ3kJE > .add-button button span .material-icons { font-size: 20px; } ._3nocqfjnqUPEc2MeEQ3kJE .no-margin { margin: 0; } ._3nocqfjnqUPEc2MeEQ3kJE .flexfield { display: flex; } ._3nocqfjnqUPEc2MeEQ3kJE .flexfield label { background-color: #ffffff; z-index: 1111; padding: 0 1px; } ._3nocqfjnqUPEc2MeEQ3kJE .helper-text { position: absolute; bottom: -20px; width: 100%; } @media only screen and (min-width: 992px) { ._3nocqfjnqUPEc2MeEQ3kJE > .fieldform + .fieldform { margin-left: 16px; } } ._3nocqfjnqUPEc2MeEQ3kJE .count { font-size: 15px; left: -15px; line-height: 20px; position: absolute; top: 35px; } @media only screen and (min-width: 992px) { ._3nocqfjnqUPEc2MeEQ3kJE .count { left: -24px; } } ._3ij0bhb77njjav05fAocxt .title { font-size: 14px; padding-top: 15px; } ._3ij0bhb77njjav05fAocxt .description { display: flex; flex-direction: column; padding: 10px 5px 25px; color: #8A8A8A; font-size: 12px; line-height: 14px; } ._3ij0bhb77njjav05fAocxt .description span { padding: 0; } ._3ij0bhb77njjav05fAocxt .bottom-separator { height: 3px; background-color: rgba(0, 0, 0, 0.75); width: 100%; } ._3ij0bhb77njjav05fAocxt .locale { display: flex; align-items: center; justify-content: flex-end; align-self: flex-end; margin-right: 10px; margin-bottom: -15px; padding: 0 6px; z-index: 5; background-color: white; } ._3ij0bhb77njjav05fAocxt .locale .locale-button { cursor: pointer; font-size: 12px; color: #979797; font-weight: 500; line-height: 14px; } ._3ij0bhb77njjav05fAocxt .locale .locale-button:not(:first-child) { margin-left: 5px; } ._3ij0bhb77njjav05fAocxt .locale .locale-button.active { color: #338DEF; } ._3ij0bhb77njjav05fAocxt .custom-input-email { box-sizing: border-box; position: relative; border: 1px solid rgba(25, 25, 25, 0.32); z-index: 2; border-radius: 2px; } ._3ij0bhb77njjav05fAocxt .custom-input-email p { padding: 18.5px 14px; width: 100%; } ._3ij0bhb77njjav05fAocxt .custom-input-email.focused { border-color: transparent; } ._3ij0bhb77njjav05fAocxt .form-with-reset { position: relative; } ._3ij0bhb77njjav05fAocxt .form-with-reset label { top: -2px; } ._3ij0bhb77njjav05fAocxt .sample-template { border: 1px solid #DADADA; border-radius: 4px; padding: 10px; margin: 10px 0 0 5px; } ._3ij0bhb77njjav05fAocxt .sample-template p { color: #262626; font-size: 13px; line-height: 15px; } ._3ij0bhb77njjav05fAocxt .sample-template p a { text-decoration: none; cursor: pointer; } ._3ij0bhb77njjav05fAocxt .sample-template p .blue { color: #338DEF; } ._3ij0bhb77njjav05fAocxt .sample-template .material-icons { color: #338DEF; margin-right: 16px; font-size: 14px; } ._3ij0bhb77njjav05fAocxt .top-message, ._3ij0bhb77njjav05fAocxt .reset-button { top: -17px; padding: 10px; position: absolute; background: white; z-index: 10; margin: 0; } ._3ij0bhb77njjav05fAocxt .top-message.label, ._3ij0bhb77njjav05fAocxt .reset-button.label { left: 13px; padding-right: 0; font-size: 12px; line-height: 14px; color: #262626; } ._3ij0bhb77njjav05fAocxt .top-message.label:after, ._3ij0bhb77njjav05fAocxt .reset-button.label:after { content: '\2022'; color: #000000; position: absolute; right: -9px; top: 10px; } ._3ij0bhb77njjav05fAocxt .top-message.locale, ._3ij0bhb77njjav05fAocxt .reset-button.locale { right: 13px; } ._3ij0bhb77njjav05fAocxt .reset-button { cursor: pointer; background: white; left: 200px; color: #8A8A8A; font-size: 12px; line-height: 14px; } ._3ij0bhb77njjav05fAocxt .reset-button .material-icons { margin-right: 6px; margin-left: 8px; transform: rotate(-73deg); font-size: 13px; } ._2Psf8ILWaowjysGa6HUmxC { background-color: #f2f2f2; padding: 20px 6px 30px; border-right: 1px solid #DDDDDD; display: flex; flex-direction: column; overflow: hidden; z-index: 1; width: 100%; } ._2Psf8ILWaowjysGa6HUmxC.collapsed { display: none; } @media screen and (min-width: 992px) { ._2Psf8ILWaowjysGa6HUmxC { width: 222px; } ._2Psf8ILWaowjysGa6HUmxC.collapsed { display: flex; } } ._2Psf8ILWaowjysGa6HUmxC ul { flex: 1; } ._2Psf8ILWaowjysGa6HUmxC li > a { height: 35px; border-radius: 2px; display: flex; align-items: center; padding-left: 12px; color: rgba(46, 46, 46, 0.6); font-size: 15px; line-height: 20px; font-weight: 300; } ._2Psf8ILWaowjysGa6HUmxC li > a.active, ._2Psf8ILWaowjysGa6HUmxC li > a:hover { color: #2E2E2E; } ._2Psf8ILWaowjysGa6HUmxC li > a:hover { background-color: #fff; } ._2Psf8ILWaowjysGa6HUmxC li > a.active { background-color: #D9D9D9; } ._3tTswxfpIWVChHNqOMyiP5 .user-info { max-width: 222px; width: 100%; overflow: hidden; margin-left: 10px; } ._3tTswxfpIWVChHNqOMyiP5 .user-info .title { color: rgba(0, 0, 0, 0.87); font-size: 15px; line-height: 20px; } ._3tTswxfpIWVChHNqOMyiP5 .user-info .role { margin-top: 4px; color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 16px; } ._3tTswxfpIWVChHNqOMyiP5 .user-info > .p, ._3tTswxfpIWVChHNqOMyiP5 .user-info p { margin: 0; } ._3tTswxfpIWVChHNqOMyiP5 .user-info > p a { margin: 10px 0; color: #F6704D; font-size: 10px; font-weight: 600; letter-spacing: 0.85px; line-height: 10px; } .terms-info { margin: 25px 0 0; padding: 12px 12px 5px; background-color: rgba(0, 0, 0, 0.12); width: 210px; } .terms-info a { color: rgba(0, 0, 0, 0.87); font-size: 12px; line-height: 16px; } .terms-info p { color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 16px; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery { position: relative; display: flex; justify-content: center; align-items: center; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide { width: 100%; position: relative; display: none; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide .image-picture-container { width: 100%; height: 335px; display: flex; flex-direction: column; align-items: center; justify-content: center; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide .image-picture-container .image-picture { max-height: 300px; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide.active { display: flex; flex-direction: column; align-items: center; justify-content: center; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide .actions { display: flex; flex-direction: column; position: absolute; top: 0; right: 0; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide .actions .action + .action { margin-top: 5px; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery .slide .actions button { background-color: rgba(0, 0, 0, 0.1); } ._3eBpGfmFFqJfSVBNspVZY8 .gallery.with-border .slide { border: 1px solid #ddd; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery-navigation-dots { display: flex; align-items: center; justify-content: center; margin: 10px; } ._3eBpGfmFFqJfSVBNspVZY8 .gallery-navigation-dots .dot { padding: 0; } ._1P3ChIPIldPfmieBgCreFo .input-field { border: 1px solid rgba(201, 201, 204, 0.48); display: flex; align-items: center; padding: 5px 7px 5px 7px; border-radius: 3px; } ._1P3ChIPIldPfmieBgCreFo .input-field .material-icons { font-size: 25px; } ._1P3ChIPIldPfmieBgCreFo .input-field .input { border: none; outline: none; width: 100%; } ._1P3ChIPIldPfmieBgCreFo .input-field .submit { font-size: 1.227rem; } ._1P3ChIPIldPfmieBgCreFo .input-field .submit .submit-loader { display: flex; align-items: center; justify-content: center; } ._1P3ChIPIldPfmieBgCreFo .content { display: block; padding: 25px; background: #fff; border: 1px solid rgba(201, 201, 204, 0.48); border-radius: 6px; will-change: filter; text-decoration: none; color: #666; } ._1P3ChIPIldPfmieBgCreFo .content .image { background-position: center center; background-repeat: no-repeat; background-size: cover; margin: 0 0 0 30px; width: 65px; height: 65px; border-radius: 3px; float: right; } ._1P3ChIPIldPfmieBgCreFo .content .title { font-size: 17px; font-weight: 600; line-height: 1.5em; margin: 0 0 10px 0; color: #666; } ._1P3ChIPIldPfmieBgCreFo .content .description { margin: 0 0 20px 0; font-size: 15px; line-height: 1.55em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #666; } ._1P3ChIPIldPfmieBgCreFo .content .anchor { display: block; font-size: 15px !important; line-height: 1em; border: 0 !important; padding: 0 !important; } ._3_VPoimy2PeLDvXeWok1cn { background-color: #f1f1ef; padding: 16px 16px 16px 12px; display: flex; } ._3_VPoimy2PeLDvXeWok1cn .icon { margin: 10px; font-size: 25px; } ._3_VPoimy2PeLDvXeWok1cn .icon .material-icons { font-size: inherit; color: #1e202b; } ._3_VPoimy2PeLDvXeWok1cn .content { width: 100%; } ._3_VPoimy2PeLDvXeWok1cn .content .input { font-size: 14px; line-height: 1.5; border: none; box-shadow: none; } .bpsgbes { display: inline-block; } .b181v2oy { background: #fbfbfb; color: #888; font-size: 18px; border: 0; padding-top: 5px; vertical-align: bottom; height: 34px; width: 36px; } .b181v2oy:hover, .b181v2oy:focus { background: #f3f3f3; outline: 0; } .b181v2oy svg { fill: #888; } .a9immln { background: #efefef; color: #444; } .a9immln svg { fill: #444; } .tukdd6b { left: 50%; -webkit-transform: translate(-50%) scale(0); -ms-transform: translate(-50%) scale(0); transform: translate(-50%) scale(0); position: absolute; border: 1px solid #ddd; background: #fff; border-radius: 2px; box-shadow: 0px 1px 3px 0px gainsboro; z-index: 2; box-sizing: border-box; } .tukdd6b:after, .tukdd6b:before { top: 100%; left: 50%; border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; } .tukdd6b:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 4px; margin-left: -4px; } .tukdd6b:before { border-color: rgba(221, 221, 221, 0); border-top-color: #ddd; border-width: 6px; margin-left: -6px; } .s1o2cezu { display: inline-block; border-right: 1px solid #ddd; height: 24px; margin: 0 0.5em; } .tukdd6b { transition: transform 0.15s cubic-bezier(0.3, 1.2, 0.2, 1); display: flex; } .tukdd6b:before, .tukdd6b:after { display: none; } .tukdd6b .bpsgbes { display: inline-block; } .tukdd6b .bpsgbes button { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border: none; border-radius: 0; background: none; } .tukdd6b .bpsgbes button:hover { background-color: #eee; } .tukdd6b .bpsgbes + .bpsgbes { border-left: 1px solid #eee; } ._1D_q7nvl97EQK9l-sm_Z73 { position: relative; border: 1px solid transparent; } ._1D_q7nvl97EQK9l-sm_Z73 .public-DraftEditor-content[contenteditable=true] { max-height: none; } ._1D_q7nvl97EQK9l-sm_Z73 [data-block] { line-height: 2rem; font-weight: normal; font-size: 1.5rem; } ._1D_q7nvl97EQK9l-sm_Z73 [data-block] [data-text] { color: rgba(0, 0, 0, 0.6); } ._1D_q7nvl97EQK9l-sm_Z73 [data-block] a { text-decoration: none; cursor: pointer; } ._1D_q7nvl97EQK9l-sm_Z73 [data-block] a [data-text] { color: #488ed8; } ._1D_q7nvl97EQK9l-sm_Z73 .show-more-contenteditable { display: flex; justify-content: flex-end; } ._1D_q7nvl97EQK9l-sm_Z73 .error-info-contenteditable { display: flex; justify-content: end; color: red; } .jfMhRs48XwBkl7XQIk79N { width: 100%; } .jfMhRs48XwBkl7XQIk79N a { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: .038rem; transition: color .3s linear; white-space: inherit; word-break: break-all; } .jfMhRs48XwBkl7XQIk79N a:hover { color: #488ED8; } .jfMhRs48XwBkl7XQIk79N a .material-icons { margin-left: 5px; } .m9wYTm1sz5lTvuxvj87fX { position: relative; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .ce-header { padding: 0.4em 0 3px; line-height: 1.2; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h1, .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h2, .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h3, .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h4, .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h5, .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h6 { font-weight: bolder; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h1 { font-size: 32px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h2 { font-size: 24px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h3 { font-size: 18.72px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h4 { font-size: 15px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h5 { font-size: 13.28px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block h6 { font-size: 10.72px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .ce-paragraph { line-height: 1.2; outline: none; font-size: 15px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .ce-paragraph[data-placeholder]:empty::before { content: attr(data-placeholder); color: #707684; font-weight: normal; opacity: 0.8; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .ce-paragraph.cdx-block { padding: .4em 0; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block--focused .ce-paragraph[data-placeholder]:empty::before { opacity: 0; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block mark { background: rgba(245, 235, 111, 0.29); padding: 3px 0; font-weight: inherit; font-style: inherit; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block code { background: rgba(250, 239, 240, 0.78); color: #b44437; padding: 3px 4px; border-radius: 5px; margin: 0 1px; font-family: inherit; font-size: 0.86em; font-weight: inherit; letter-spacing: 0.3px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block i { font-weight: inherit; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block a { color: #488ED8; font-size: inherit; font-weight: inherit; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block u { text-decoration: underline; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .cdx-checklist__item-text { line-height: 1.2; outline: none; font-size: 15px; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .input-field { border: 1px solid rgba(201, 201, 204, 0.48); display: flex; align-items: center; padding: 5px 7px 5px 7px; border-radius: 3px; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .input-field .material-icons { font-size: 25px; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .input-field .input { border: none; outline: none; width: 100%; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .input-field .submit { font-size: 1.227rem; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .input-field .submit .submit-loader { display: flex; align-items: center; justify-content: center; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .content { display: block; padding: 25px; background: #fff; border: 1px solid rgba(201, 201, 204, 0.48); border-radius: 6px; will-change: filter; text-decoration: none; color: #666; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .content .image { background-position: center center; background-repeat: no-repeat; background-size: cover; margin: 0 0 0 30px; width: 65px; height: 65px; border-radius: 3px; float: right; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .content .title { font-size: 17px; font-weight: 600; line-height: 1.5em; margin: 0 0 10px 0; color: #666; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .content .description { margin: 0 0 20px 0; font-size: 15px; line-height: 1.55em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #666; } .m9wYTm1sz5lTvuxvj87fX .editor .m9wYTm1sz5lTvuxvj87fX .content .anchor { display: block; font-size: 15px !important; line-height: 1em; border: 0 !important; padding: 0 !important; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .cdx-quote { font-size: 15px; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .tc-table .tc-cell { overflow-wrap: break-word; } .m9wYTm1sz5lTvuxvj87fX .editor .ce-block .ce-block__content [contenteditable] { color: rgba(0, 0, 0, 0.6); } ._3IVDtK3vHjz-IyqlFjRsW2 { width: 100%; color: rgba(0, 0, 0, 0.6); display: inline-block; font-size: 1.2rem; font-weight: 400; line-height: 2rem; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .38px; } ._3IVDtK3vHjz-IyqlFjRsW2 .author { transition: color .3s linear; } ._3IVDtK3vHjz-IyqlFjRsW2 .author:hover { color: #488ED8; } ._12VPnCk2K66Nkwd7s_JyOx .pdf-download { background: #EFF1F2; border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; } ._12VPnCk2K66Nkwd7s_JyOx .pdf-download div { color: #FF0000; font-size: 12px; font-weight: 400; width: calc(100% - 40px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ._12VPnCk2K66Nkwd7s_JyOx .pdf-download .material-icons { color: #949494; margin-left: 5px; } ._12VPnCk2K66Nkwd7s_JyOx .pdf-download svg { width: 20px; margin-right: 10px; } .inlinetoolbar-anchor-form { padding: 10px; background: #fff; color: #444; display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 16px; width: 100%; } .inlinetoolbar-anchor-form a { font-size: inherit; width: 300px; display: block; } @media only screen and (max-width: 767px) { .inlinetoolbar-anchor-form a { max-width: 200px; } } .inlinetoolbar-anchor-form .action-button { padding: 5px; } .inlinetoolbar-anchor-form .action-button:hover { background-color: #eee; } .inlinetoolbar-anchor-form .action-button .material-icons { font-size: 25px; } .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input { width: 300px; padding: 0 15px; padding-left: 0px; font-family: inherit; background-color: transparent; border: none; color: #444; font-size: inherit; } @media only screen and (max-width: 767px) { .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input { max-width: 200px; } } .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input:focus { outline: none; } .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input::-webkit-input-placeholder, .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input::-moz-placeholder, .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input:-ms-input-placeholder, .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input::placeholder { color: #888; } .inlinetoolbar-anchor-form .inlinetoolbar-anchor-input.inlinetoolbar-anchor-input-invalid { color: #e65757; } .inlinetoolbar-anchor-link { color: #2996da; -webkit-text-decoration: underline; text-decoration: underline; } ._3INRKCgMzfN-t7W2WT5c6i { background-color: #3C3D52; width: 100%; display: flex; align-items: center; height: 64px; padding: 0 25px; justify-content: flex-start; } ._3INRKCgMzfN-t7W2WT5c6i nav { color: #FFFFFF; font-size: 18px; line-height: 51px; } ._3INRKCgMzfN-t7W2WT5c6i nav span, ._3INRKCgMzfN-t7W2WT5c6i nav strong { margin: 3px; } ._3INRKCgMzfN-t7W2WT5c6i .header-text { font-size: 17px; letter-spacing: 0.15px; line-height: 24px; } ._3INRKCgMzfN-t7W2WT5c6i .bold-text { font-weight: bold; } ._3INRKCgMzfN-t7W2WT5c6i .logo { width: 51px; } ._3INRKCgMzfN-t7W2WT5c6i .toggle-menu { color: #fff; font-size: 3.5rem; position: absolute; right: 2rem; top: 1.5rem; } @media screen and (min-width: 992px) { ._3INRKCgMzfN-t7W2WT5c6i .toggle-menu { display: none; } } .Gv9-K29C2-cTwNNIG0e36 { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; max-width: 1200px; } .Gv9-K29C2-cTwNNIG0e36 button + span { padding: 0 10px; } ._3GYO9BTv9a_UtGyRBCfLCX { display: flex; align-items: center; } ._3GYO9BTv9a_UtGyRBCfLCX input { border: none; padding-left: 2px; } ._3GYO9BTv9a_UtGyRBCfLCX i { color: #2A2A2A; font-size: 2rem; } @charset "UTF-8"; /*! * @license * MyFonts Webfont Build ID 3156204, 2016-01-19T09:37:22-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Texta-Bold by Latinotype * URL: http://www.myfonts.com/fonts/latinotype/texta/bold/ * * Webfont: Texta-Book by Latinotype * URL: http://www.myfonts.com/fonts/latinotype/texta/book/ * * Webfont: Texta-Light by Latinotype * URL: http://www.myfonts.com/fonts/latinotype/texta/light/ * * * License: http://www.myfonts.com/viewlicense?type=web&buildid=3156204 * Licensed pageviews: 10,000 * Webfonts copyright: Copyright (c) 2014 by Daniel Hernandez & Miguel Hernandez. All rights reserved. * * © 2016 MyFonts Inc */ @font-face { font-family: "Basier Circle"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regular-webfont.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regular-webfont.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regular-webfont.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regular-webfont.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Basier Circle"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regularitalic-webfont.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regularitalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regularitalic-webfont.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regularitalic-webfont.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-regularitalic-webfont.ttf") format("truetype"); font-weight: 400; font-style: oblique; } @font-face { font-family: "Basier Circle"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-medium-webfont.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-medium-webfont.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-medium-webfont.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-medium-webfont.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-medium-webfont.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Basier Circle"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-mediumitalic-webfont.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-mediumitalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-mediumitalic-webfont.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-mediumitalic-webfont.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-mediumitalic-webfont.ttf") format("truetype"); font-weight: 600; font-style: oblique; } @font-face { font-family: "Basier Circle"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibold-webfont.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibold-webfont.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibold-webfont.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibold-webfont.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Basier Circle"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibolditalic-webfont.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibolditalic-webfont.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibolditalic-webfont.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/basier-circle/basiercircle-semibolditalic-webfont.ttf") format("truetype"); font-weight: 700; font-style: oblique; } @font-face { font-family: "Texta"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_1_0.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_1_0.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_1_0.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_1_0.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_1_0.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "Texta"; src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_0_0.eot"); src: url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_0_0.eot?#iefix") format("embedded-opentype"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_0_0.woff2") format("woff2"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_0_0.woff") format("woff"), url("https://mxz-assets.s3.eu-central-1.amazonaws.com/fonts/3028EC_0_0.ttf") format("truetype"); font-weight: 700; font-style: normal; } /*! https://raw.githubusercontent.com/murtaugh/HTML5-Reset/master/assets/css/reset.css with minor changes */ /* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: http://meyerweb.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html, body, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, nav, section, details, summary { display: block; } /* Handle box-sizing while better addressing child elements: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ /* Responsive images and other embedded objects */ /* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ img, object, embed { max-width: 100%; } /* Note: keeping IMG here will cause problems if you're using foreground images as sprites. In fact, it *will* cause problems with Google Maps' controls at small size. If this is the case for you, try uncommenting the following: #map img { max-width: none; } */ /* we use a lot of ULs that aren't bulleted. you'll have to restore the bullets within content, which is fine because they're probably customized anyway */ ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, .form-group[contenteditable='true'], select { vertical-align: middle; } pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } input[type="radio"], .form-group[type="radio"][contenteditable='true'] { vertical-align: text-bottom; } input[type="checkbox"], .form-group[type="checkbox"][contenteditable='true'] { vertical-align: bottom; } table { font-size: inherit; font: 100%; } small { font-size: 85%; } strong { font-weight: bold; } td, td img { vertical-align: top; } /* standardize any monospaced elements */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* hand cursor on clickable elements */ label[for], input[type=button], .form-group[type=button][contenteditable='true'], input[type=submit], .form-group[type=submit][contenteditable='true'], input[type=file], .form-group[type=file][contenteditable='true'], button { cursor: pointer; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, .form-group[contenteditable='true'], select, textarea { margin: 0; } /* make buttons play nice in IE */ button, input[type=button], .form-group[type=button][contenteditable='true'] { width: auto; overflow: visible; } .material-icons { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; font-size: 1.6rem; font-weight: normal !important; vertical-align: sub; } html { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; color: rgba(0, 0, 0, 0.6); font: 10px "Basier Circle", Texta, Helvetica, "Helvetica Neue", Arial, Helmet, Freesans; font-weight: 500; line-height: 135%; min-width: 307px; } .touch .only-no-touch { display: none !important; } .no-touch .only-touch { display: none !important; } #root, .page { background-color: #ebebeb; min-height: 100vh; } @media only screen and (min-width: 768px) { #root, .page { background-color: #fff; } } .registration-page, .page { align-content: flex-start; align-items: flex-start; display: flex; flex-flow: row wrap; } .page-header { display: none; } .page-header, .col-channels, .col-mixes, .col-chats, .col-cards, .col-chat, .settings-general, .registration-page, .me-page { background-color: #fff; flex: 0 0 100%; max-width: 100vw; } .col-channels { background-color: #43445b; } .col-chats { background-color: #fff; } .col-mixes { background-color: #fff; } @media only screen and (max-width: 767px) { .col-mixes:not(.unselected) article, .col-mixes:not(.unselected) > header { display: none; } .col-mixes:not(.unselected) .mix.edit { display: block; } } .col-cards, .col-chat { background-color: #ebebeb; padding-bottom: 120px; } @media only screen and (min-width: 768px) { .col-cards, .col-chat { border-top: 0; } } .me-page { padding-bottom: 4rem; } .me-page .clearfix:first-child { margin: 0 auto; padding: 0 1.4rem; } @media only screen and (min-width: 768px) { .me-page .clearfix:first-child { max-width: 600px; padding: 0 1.4rem; } } @media only screen and (min-width: 992px) { .me-page .clearfix:first-child { max-width: 80%; } } @media only screen and (min-width: 1490px) { .me-page .clearfix:first-child { max-width: 1000px; } } @media only screen and (min-width: 992px) { .me-page .clearfix .channels { margin-left: 12.8rem; } } .me-page .clearfix .channels .clearfix { max-width: 100%; padding: 0; } .me-page .clearfix h1 { border-bottom: 1px solid #e2e2e2; color: #282828; font-size: 2rem; font-weight: 500; line-height: 38px; margin-bottom: 1.4rem; text-align: center; } .account #root { background-color: #fff; } @media only screen and (min-width: 992px) { html:not(.account):not(.home) { overflow: hidden; } .page { align-content: stretch; align-items: stretch; background-color: #ebebeb; } .registration-page { align-content: center; align-items: center; min-height: 100vh; } .col-channels, .col-mixes, .col-chats, .col-cards, .col-chat, .settings-general, .me-page { height: 100vh; } .account-confirmation-pending .col-channels, .account-confirmation-pending .col-mixes, .account-confirmation-pending .col-chats, .account-confirmation-pending .col-cards, .account-confirmation-pending .col-chat, .account-confirmation-pending .settings-general, .account-confirmation-pending .me-page { height: calc(100vh - 40px); } .col-channels, .col-mixes, .col-chats, .col-cards, .col-chat, .settings-general, .registration-page, .me-page { overflow-y: scroll; } .col-channels { flex-basis: 240px; } .col-mixes { flex-basis: 40%; flex-grow: 1; max-width: 470px; } .col-cards { border-left: 1px solid #e4e4e4; flex-basis: calc(60% - 240px); flex-grow: 1; flex-shrink: 1; } } ::-moz-selection { background: #488ed8; color: #fff; text-shadow: none; } ::selection { background: #488ed8; color: #fff; text-shadow: none; } .p, p { color: #8f8f8f; font-size: 1.6rem; font-weight: 500; line-height: 135%; margin: 0 0 .8em; } .p .small, .p small, p .small, p small { color: #8f8f8f; } .text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-word; } .text-ellipsis label { width: 100%; } .text-ellipsis span { overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .text-break { white-space: normal; word-break: break-word; } .text-break label { width: 100%; } .text-break span { white-space: normal; word-break: break-word; } .text-inline { white-space: nowrap; } ol, .list, .list ul { margin: 4px 0 8px 15px; } .list { list-style: disc; } .list ul { list-style: circle; } ul, ol { font-size: 1.6rem; line-height: 1.3; } [data-counter] { counter-reset: section; list-style-type: none; } [data-start]::before, [data-start] li::before { content: attr(data-start) "." counters(section, ".") " "; counter-increment: section; } [data-start] ul > li::before { content: none; } li { margin-bottom: 6px; } h1, .h1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.8rem; font-weight: 700; line-height: 2.31rem; } h1 a, .h1 a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: inherit; font-weight: 700; text-decoration: none; } h1 a:hover, h1 a:focus, .h1 a:hover, .h1 a:focus { color: #2367ae; } h1 small, .h1 small { font-weight: 500; } h2, .h2 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.6rem; font-weight: 700; line-height: 2.05333rem; } h2 a, .h2 a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: inherit; font-weight: 700; text-decoration: none; } h2 a:hover, h2 a:focus, .h2 a:hover, .h2 a:focus { color: #2367ae; } h2 small, .h2 small { font-weight: 500; } h3, .h3 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.4rem; font-weight: 700; line-height: 1.79667rem; } h3 a, .h3 a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: inherit; font-weight: 700; text-decoration: none; } h3 a:hover, h3 a:focus, .h3 a:hover, .h3 a:focus { color: #2367ae; } h3 small, .h3 small { font-weight: 500; } h4, .h4 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.2rem; font-weight: 700; line-height: 1.54rem; } h4 a, .h4 a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: inherit; font-weight: 700; text-decoration: none; } h4 a:hover, h4 a:focus, .h4 a:hover, .h4 a:focus { color: #2367ae; } h4 small, .h4 small { font-weight: 500; } small { color: rgba(26, 26, 26, 0.6); font-size: 80%; font-weight: 500; line-height: normal; } ins { background-color: #488ed8; color: rgba(0, 0, 0, 0.6); text-decoration: none; } mark { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #488ed8; color: rgba(0, 0, 0, 0.6); font-style: italic; font-weight: 700; } strong, strong > span, b, b > span { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 700; line-height: normal; } i, cite, em, var, address, dfn { font-style: italic; } .font-1x-half { font-size: 1.5rem; } .font-2x { font-size: 2rem; } .font-2x-half { font-size: 2.5rem; } .font-3x { font-size: 3rem; } .font-4x { font-size: 4rem; } .font-5x { font-size: 5rem; } .col-channels { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .cursor-pointer { cursor: pointer; } .pointer { cursor: pointer; } .bold-header { margin: 0 !important; } .bold-header span { color: rgba(0, 0, 0, 0.92) !important; font-weight: 600; line-height: 17px !important; font-size: 14px !important; } .hidden { display: none !important; } .visible-hidden { visibility: hidden !important; } .visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal; } @media only screen and (max-width: 767px) { .hidden-xs { display: none !important; } } @media only screen and (min-width: 768px) { .hidden-sm { display: none !important; } } @media only screen and (min-width: 992px) { .hidden-md { display: none !important; } } @media only screen and (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-sm-block { display: none; } @media only screen and (min-width: 768px) { .visible-sm-block { display: block; } } .visible-md-block { display: none; } @media only screen and (min-width: 992px) { .visible-md-block { display: block; } } .disabled, .disabled button, button[disabled], .disabled .button, .button[disabled], input:disabled, .form-group:disabled[contenteditable='true'], input[disabled], .form-group[disabled][contenteditable='true'], .disabled [role='navigation'] button, [role='navigation'] button[disabled], .disabled [role='navigation'] .button, [role='navigation'] .button[disabled], .disabled .registration-page button, .registration-page button[disabled], .disabled .registration-page .button, .registration-page .button[disabled] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: #e4e4e4; cursor: not-allowed; } img { height: auto; } .clearfix::before, .clearfix::after { content: ' '; display: table; } .clearfix::after { clear: both; } .rounded { border-radius: 50%; } .rotate-90 { transform: rotate(90deg); } .rotate-180, .invert { transform: rotate(180deg); } .rotate-270 { transform: rotate(270deg); } .center { text-align: center; } .alignment-left, .alignment-center, .alignment-right { width: 24px; height: 24px; background-color: #C4C4C4; } .alignment-left { mask: url("/assets/img/alignment-left.svg") center center no-repeat; } .alignment-center { mask: url("/assets/img/alignment-center.svg") center center no-repeat; } .alignment-right { mask: url("/assets/img/alignment-right.svg") center center no-repeat; } .account-confirmation-message { background-color: #8f8f8f; color: #fff; font-size: 1.6rem; max-width: 100vw; text-align: center; transition: background-color 0.3s linear; vertical-align: center; width: 100%; position: relative; min-height: 40px; align-items: center; display: flex; justify-content: center; line-height: 20px; } .account-confirmation-message.warn { background-color: #f7b84f; } .account-confirmation-message.success { background-color: #4da860; } .account-confirmation-message.info { background-color: #e8f7fd; color: #999999; } .account-confirmation-message .close { position: absolute; top: 50%; right: 1%; transform: translateY(-50%); cursor: pointer; } .account-confirmation-message, .account-confirmation-message span { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 700; } .account-confirmation-message + .account-confirmation-message { border-top: 1px solid white; } .reverse { animation-direction: reverse !important; } .once, .anmtn-fade-out, .anmtn-show-and-hide { animation-fill-mode: forwards !important; animation-iteration-count: 1 !important; } @keyframes get-wider { 0% { width: 0; } 100% { width: 12px; } } .anmtn-get-wider { animation: get-wider 1s ease 0s infinite normal none; animation-play-state: running; } .anmtn-saving { padding-right: 15px; } .anmtn-saving::after { animation: get-wider 1s linear 0s infinite; content: '...'; display: inline-block; margin-left: 3px; overflow: hidden; position: absolute; vertical-align: bottom; width: 0; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .anmtn-shake, .edit .image .warn:hover span { animation: shake 1s ease 0s infinite normal none; animation-play-state: running; } @keyframes jump { 10%, 90% { transform: translate3d(0, -1px, 0); } 20%, 80% { transform: translate3d(0, 2px, 0); } 30%, 50%, 70% { transform: translate3d(0, -4px, 0); } 40%, 60% { transform: translate3d(0, 4px, 0); } } .anmtn-jump { animation: jump 1s ease 0s infinite normal none; animation-play-state: running; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .anmtn-rotate { animation: rotate 1s ease 0s infinite normal none; animation-play-state: running; } .anmtn-rotate { animation-duration: 2s; animation-timing-function: linear; } @keyframes fade-success-border { 0% { border: 1px solid #2367ae; box-shadow: 0 0 0 0 rgba(0, 131, 28, 0.25); } 25% { border: 1px solid #00831c; box-shadow: 0 0 0 0 rgba(0, 131, 28, 0.25); } 50% { border: 1px solid #00831c; box-shadow: 0 0 5px 0 rgba(0, 131, 28, 0.25); } 100% { border: 1px solid transparent; box-shadow: 0 0 0 0 transparent; } } .anmtn-fade-success-border { animation: fade-success-border 1s ease 0s infinite normal none; animation-play-state: running; } @keyframes fade-error-border { 0% { border: 1px solid #2367ae; box-shadow: 0 0 0 0 rgba(208, 2, 27, 0.25); } 50% { border: 1px solid #d0021b; box-shadow: 0 0 0 0 rgba(208, 2, 27, 0.25); } 100% { border: 1px solid #d0021b; box-shadow: 0 0 5px 0 rgba(208, 2, 27, 0.25); } } .anmtn-fade-error-border { animation: fade-error-border 1s ease 0s infinite normal none; animation-play-state: running; } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .anmtn-fade-out { animation: fade-out 1s ease 0s infinite normal none; animation-play-state: running; } .anmtn-fade-out { animation-duration: 1.5s; } @keyframes show-and-hide { 0% { font-size: 100px; height: auto; opacity: 0; visibility: visible; } 25% { opacity: 1; } 50% { opacity: 1; } 99% { font-size: 100px; height: auto; opacity: 0; visibility: visible; } 100% { font-size: 0; height: 0; opacity: 0; visibility: hidden; } } .anmtn-show-and-hide { animation: show-and-hide 1s ease 0s infinite normal none; animation-play-state: running; } .anmtn-show-and-hide { animation-duration: 1.5s; } .chat-deeplink-copied { font-size: 34px !important; margin-right: 0 !important; background-color: #fff; color: #488ed8; position: absolute; height: 34px; width: 34px; } .hidden { display: none !important; } .visible-hidden { visibility: hidden !important; } .visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal; } @media only screen and (max-width: 767px) { .hidden-xs { display: none !important; } } @media only screen and (min-width: 768px) { .hidden-sm { display: none !important; } } @media only screen and (min-width: 992px) { .hidden-md { display: none !important; } } @media only screen and (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-sm-block { display: none; } @media only screen and (min-width: 768px) { .visible-sm-block { display: block; } } .visible-md-block { display: none; } @media only screen and (min-width: 992px) { .visible-md-block { display: block; } } .disabled, .disabled button, button[disabled], .disabled .button, .button[disabled], input:disabled, .form-group:disabled[contenteditable='true'], input[disabled], .form-group[disabled][contenteditable='true'], .disabled [role='navigation'] button, [role='navigation'] button[disabled], .disabled [role='navigation'] .button, [role='navigation'] .button[disabled], .disabled .registration-page button, .registration-page button[disabled], .disabled .registration-page .button, .registration-page .button[disabled] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: #e4e4e4; cursor: not-allowed; } button, .button { background: transparent; border: 1px solid transparent; border-radius: 0.8rem; color: #8f8f8f; cursor: pointer; display: inline-block; font: 1.4rem "Basier Circle", Texta, Helvetica, "Helvetica Neue", Arial, Helmet, Freesans; font-weight: 700; letter-spacing: normal; line-height: 135%; padding: 0.2rem 0.6rem 0.3rem; text-align: center; text-decoration: none; transition: background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear; } button span:not(.material*), .button span:not(.material*) { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 700; } button.active, .button.active { border-color: #488ed8; outline: none; border-color: transparent; color: #588BC2; } button:active, .button:active { color: #1b4e83; } button.primary, .button.primary { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #488ed8; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: normal; padding: 0.23333rem 1rem 0.33333rem; } button.primary:hover, .button.primary:hover { background: #488ED8; } button.primary:focus, .button.primary:focus { background: #2367ae; } button.primary:active, .button.primary:active { background: #1b4e83; } button.primary span, .button.primary span { font-weight: 700; } button.primary.ghost, .button.primary.ghost { background-color: #fff; border: 1px solid #488ed8; color: #488ed8; } button.primary.ghost:hover, .button.primary.ghost:hover { border-color: #488ED8; color: #488ED8; } button.primary.ghost:focus, .button.primary.ghost:focus { border-color: #2367ae; color: #2367ae; } button.primary.ghost:active, .button.primary.ghost:active { border-color: #1b4e83; color: #1b4e83; } button.primary.large, .button.primary.large { padding: 0.8rem 2.4rem; } button.large, .button.large { padding: 0 2.6rem; height: 55px; margin-top: 15px; } button.warn, button.warning, .button.warn, .button.warning { color: #8f8f8f; } button.warn:hover, button.warning:hover, .button.warn:hover, .button.warning:hover { color: #d0021b; } button.warn:focus, button.warn.active, button.warning:focus, button.warning.active, .button.warn:focus, .button.warn.active, .button.warning:focus, .button.warning.active { color: #d0021b; } button.warn:active, button.warning:active, .button.warn:active, .button.warning:active { color: #9d0214; } button.cta, .button.cta { color: #488ed8; } button.cta:hover, .button.cta:hover { color: #488ED8; } button.cta:focus, button.cta.active, .button.cta:focus, .button.cta.active { color: #2367ae; } button.cta:active, .button.cta:active { color: #1b4e83; } .disabled button, button[disabled], .disabled .button, .button[disabled] { color: #e4e4e4; } .disabled button.primary, button[disabled].primary, .disabled .button.primary, .button[disabled].primary { background-color: #e4e4e4; border-color: transparent; color: #fff; } button .material-icons:first-child, .button .material-icons:first-child { margin-right: 3px; font-size: 2rem; } button .material-icons:only-child, .button .material-icons:only-child { margin: 0; } button.big, .button.big { padding: 0.81667rem 2.66667rem; } button.interpunct + button.interpunct, .button.interpunct + button.interpunct, button.interpunct + .button.interpunct, .button.interpunct + .button.interpunct { position: relative; } button.interpunct + button.interpunct::before, .button.interpunct + button.interpunct::before, button.interpunct + .button.interpunct::before, .button.interpunct + .button.interpunct::before { content: ' \2219 '; position: absolute; left: -0.2rem; top: 0.4rem; color: #8f8f8f; } button.interpunct + button.interpunct.new::before, .button.interpunct + button.interpunct.new::before, button.interpunct + .button.interpunct.new::before, .button.interpunct + .button.interpunct.new::before { top: 1rem; } button.input-button, .button.input-button { display: flex; flex-direction: row; line-height: inherit !important; letter-spacing: inherit; padding: 0; border-radius: 0; } @media only screen and (min-width: 375px) { button.input-button, .button.input-button { padding: 0 1rem; } } @media only screen and (min-width: 1200px) { button.input-button, .button.input-button { padding: 8px 2rem; } } button.input-button:hover, .button.input-button:hover { color: #488ED8; } button.input-button:focus, button.input-button.active, .button.input-button:focus, .button.input-button.active { color: #2367ae; } button.input-button:active, .button.input-button:active { color: #1b4e83; } button.input-button span, .button.input-button span { vertical-align: middle; } button.input-button label, .button.input-button label { margin-bottom: 0; height: inherit; font-weight: inherit; font-size: inherit; display: inherit; align-items: inherit; } button.input-button label .file-uploader, .button.input-button label .file-uploader { display: none; } button.input-button .media-add, .button.input-button .media-add { color: #588BC2; width: 65px; min-width: 47px; display: none; font-weight: bold; letter-spacing: 1px; } @media only screen and (min-width: 768px) { button.input-button .media-add, .button.input-button .media-add { display: block; width: auto; } } @media only screen and (max-width: 767px) { button.input-button .media-add, .button.input-button .media-add { min-width: inherit; } } button.input-button .material-icons, .button.input-button .material-icons { color: #588BC2; } @media only screen and (min-width: 768px) { button.input-button .material-icons:not(:only-child), .button.input-button .material-icons:not(:only-child) { padding-right: 0.5rem; } } button.open-details-button { float: right; opacity: 1; transition: opacity .3s ease; } button.open-details-button.hide { opacity: 0; pointer-events: none; } .header-actions-buttons { position: absolute; right: 2rem; top: .8rem; } @media only screen and (min-width: 768px) { .header-actions-buttons { top: 1.8rem; } } .blue-text { font-size: 1.4rem; color: #588BC2; } .uploader-close { position: absolute; top: 0.2rem; right: 1.3rem; } .dangerzone { overflow: hidden; } .dangerzone legend { background-color: #f6ccd1; } .flag { background-color: transparent; border: 1px solid #d0021b; border-radius: 0.3rem; color: #d0021b; display: inline-block; font-size: 1.2rem; font-weight: 500; padding: .1em .6em .2em; text-align: center; vertical-align: baseline; white-space: nowrap; } .flag.flag-demo { background-color: #fefad2; border-color: #fad391; color: #f5a623; font-weight: 700; } .hidden { display: none !important; } .visible-hidden { visibility: hidden !important; } .visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal; } @media only screen and (max-width: 767px) { .hidden-xs { display: none !important; } } @media only screen and (min-width: 768px) { .hidden-sm { display: none !important; } } @media only screen and (min-width: 992px) { .hidden-md { display: none !important; } } @media only screen and (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-sm-block { display: none; } @media only screen and (min-width: 768px) { .visible-sm-block { display: block; } } .visible-md-block { display: none; } @media only screen and (min-width: 992px) { .visible-md-block { display: block; } } .disabled, .disabled button, button[disabled], .disabled .button, .button[disabled], input:disabled, .form-group:disabled[contenteditable='true'], input[disabled], .form-group[disabled][contenteditable='true'], .disabled [role='navigation'] button, [role='navigation'] button[disabled], .disabled [role='navigation'] .button, [role='navigation'] .button[disabled], .disabled .registration-page button, .registration-page button[disabled], .disabled .registration-page .button, .registration-page .button[disabled] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: #e4e4e4; cursor: not-allowed; } :focus { border-color: #488ed8; outline: none; } ::-webkit-input-placeholder { -webkit-font-smoothing: unset !important; -webkit-transition: color 0.3s linear; color: #8f8f8f; font-size: 1.4rem; font-weight: 500; line-height: inherit; } :-moz-placeholder { -moz-osx-font-smoothing: unset; -moz-transition: color 0.3s linear; color: #8f8f8f; font-size: 1.4rem; font-weight: 500; line-height: inherit; } ::-moz-placeholder { -moz-osx-font-smoothing: unset; -moz-transition: color 0.3s linear; color: #8f8f8f; font-size: 1.4rem; font-weight: 500; line-height: inherit; } :-ms-input-placeholder { color: #8f8f8f; font-size: 1.4rem; font-weight: 500; line-height: inherit; transition: color 0.3s linear; } ::placeholder { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; color: #8f8f8f; font-size: 1.4rem; font-weight: 500; line-height: inherit; transition: color 0.3s linear; } input, .form-group[contenteditable='true'], select, textarea { width: 100%; } textarea { max-height: 300px; resize: vertical; min-height: 40px; } textarea:empty { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; } .textarea-after { display: block; font-weight: bold; color: #999999; font-size: 12px; text-align: right; line-height: 14px; } input, .form-group[contenteditable='true'], textarea, select { border: 1px solid #e4e4e4; border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 0.6); font: 500 10px "Basier Circle", Texta, Helvetica, "Helvetica Neue", Arial, Helmet, Freesans; font-size: 1.4rem; line-height: 135%; padding: 1rem; transition: border-color 0.3s linear, background-color 0.3s linear; } input:focus, .form-group:focus[contenteditable='true'], textarea:focus, select:focus { border-color: #488ed8; outline: none; } .invalid-field { border: 1.5px solid #f6704d; border-radius: 2px; } .invalid-field.invalid-field { border-color: #f6704d; } .invalid-field:focus { border-color: #f6704d; } input[type='url'].invalid-field, .form-group[type='url'].invalid-field[contenteditable='true'] { margin-bottom: .4rem !important; } input:not([type='radio']):not([type='checkbox']), .form-group:not([type='radio']):not([type='checkbox'])[contenteditable='true'], textarea, select { appearance: none; } [type='file'], [readonly] { border-color: transparent; } [readonly] { color: #8f8f8f; } [readonly]:focus { border-color: transparent; } [type='url'] { font-style: italic; padding-top: 10px; } input:disabled, .form-group:disabled[contenteditable='true'], input[disabled], .form-group[disabled][contenteditable='true'] { background-color: #e4e4e4; color: #8f8f8f !important; } input:placeholder-shown, .form-group:placeholder-shown[contenteditable='true'] { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; } select { background: url('data:image/svg+xml;utf8,') 97%/15% no-repeat #fff; background-size: 10px 5px; color: #8f8f8f; cursor: pointer; line-height: 13px; padding: 1.45455rem; padding-right: 30px; transition: border-color 0.3s linear, color 0.3s linear; } select:hover, select:focus { background-image: url('data:image/svg+xml;utf8,'); color: #2367ae; } @media screen and (min-width: 0\0) { select { background: none; padding: 5px; } } select::-ms-expand { display: none; } label { color: #8f8f8f; display: block; font-size: 1.4rem; font-weight: 500; } .add label { cursor: pointer; } .checkbox::before, .checkbox::after, .radio::before, .radio::after { content: ' '; display: table; } .checkbox::after, .radio::after { clear: both; } .checkbox input, .checkbox .form-group[contenteditable='true'], .radio input, .radio .form-group[contenteditable='true'] { margin-right: 5px; width: auto; } .checkbox label, .radio label { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; cursor: pointer; display: inline-block; font-weight: 700; } .checkbox label, .checkbox input, .checkbox .form-group[contenteditable='true'], .checkbox span, .radio label, .radio input, .radio .form-group[contenteditable='true'], .radio span { display: inline-block; line-height: 2rem; vertical-align: middle; } .checkbox p, .radio p { left: 2rem; margin: 0; margin-bottom: -2rem; position: relative; top: -2rem; } .checkbox p span, .radio p span { display: inline; } .radio-group label, .checkbox-group label { margin: 0 2rem 0 0; } @media only screen and (min-width: 992px) { .with-sorting .form-group.search-component { max-width: 40%; } } .with-sorting .form-group.search-component > div > div fieldset { border-color: transparent; } .dotted-border { border-top: 1px dashed #e4e4e4; padding-top: 15px; } .form-group { margin-bottom: 15px; position: relative; width: 100%; } .form-group.required label { color: #488ed8; } .form-group.required label::after { content: '*'; } .form-group.text-grey p { font-size: 12px; } .form-group .drop-image-icon { display: block; color: #000; font-size: 1.5rem; padding: 1px; background: transparent; border-radius: 100px; } .form-group .drop-image-icon.red { color: #FF5560; } .form-group .wrapper-image { position: relative; } .form-group .wrapper-image figure, .form-group .wrapper-image figure img { max-height: 150px; } .form-group .wrapper-image .actions { position: absolute; top: 1rem; right: .5rem; display: flex; align-items: center; flex-direction: row; } .form-group.add { margin: 2.5rem 0; } .form-group.add label::after { background-color: #488ed8; border-radius: 50%; color: #fff; content: '+'; display: inline-block; height: 2rem; line-height: 1.8rem; margin-left: 5px; text-align: center; width: 2rem; } .form-group input ~ .message, .form-group .form-group[contenteditable='true'] ~ .message, .form-group textarea ~ .message { display: block; font-size: 1.4rem; padding-top: 3px; text-align: right; } .form-group.error span { color: #d0021b; } .form-group.success span { color: #00831c; } .form-group.error label span { color: inherit; } .form-group.success label span { color: inherit; } .form-group.search-component { margin-bottom: 0; max-width: 35rem; } .form-group.search { position: relative; padding: 1rem 0; } .form-group.search .material-icons { color: #8f8f8f; font-size: 2.4rem; left: 1.6rem; margin-top: 3rem; position: absolute; z-index: 1; } .form-group.search label { margin-top: -.25rem; padding-left: 4rem; color: rgba(0, 0, 0, 0.6); } .form-group.search fieldset { border-color: transparent; } .form-group.search [type='search'] { font-size: 1.6rem; color: rgba(0, 0, 0, 0.6); padding-left: 5rem; border-radius: 5px; background: rgba(0, 0, 0, 0.08); } .form-group.search [type='search']::placeholder { font-size: 1.6rem; } .form-group textarea.h1.resize-item { height: 6rem; resize: vertical; } .form-group textarea.h1 { height: 4rem; resize: none; } form button[type='submit'] + p { margin: 2px 10px 0; } fieldset { border: 1px solid #e4e4e4; margin: 2rem 0; padding: 2rem; } @media only screen and (min-width: 992px) { fieldset { padding: 4rem; } } fieldset legend { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: block; font-size: 1.4rem; font-weight: 700; padding: 2rem; text-align: center; width: calc(100% + 6rem); } @media only screen and (min-width: 992px) { fieldset legend { padding: 4rem; width: calc(100% + 10rem); } } .small-textarea > div { padding: .8rem 1.4rem .3rem; } .small-textarea > div textarea { padding-top: .7rem; } .select-input > div { padding: .8rem 1.4rem .3rem; font-size: 1.5rem; height: 56px; } .select-input > div textarea { padding-top: .7rem; } .handle { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: #8f8f8f; cursor: -moz-grab; cursor: -webkit-grab; cursor: grab; left: 50%; margin-left: -25px; opacity: 0; padding: 0; position: absolute; text-align: center; top: -4px; transition: opacity 0.3s linear, color 0.3s linear; width: 50px; } .handle:active { cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing; } .handle:hover { color: #488ED8; } .handle span { font-size: 2rem; margin: 0; } [draggable=true] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; } hr { border-color: #e4e4e4; } hr.dashed { border-style: dashed; } hr.long-dashed { background: linear-gradient(to right, #e4e4e4 50%, rgba(228, 228, 228, 0.0001) 0%) repeat-x bottom; background-size: 15px 1px; border: 0; } .form-group .hint { text-align: right; } .form-group .hint button:first-of-type { margin-left: -0.6rem; margin-right: 2rem; } .form-group .hint.level-0, .form-group .hint.level-0 span, .form-group .hint.level-1, .form-group .hint.level-1 span { color: #d0021b; } .form-group .hint.level-2, .form-group .hint.level-2 span { color: #f5a623; } .form-group .hint.level-3, .form-group .hint.level-3 span, .form-group .hint.level-4, .form-group .hint.level-4 span { color: #00831c; } a, .link { color: #488ED8; font-size: 1.4rem; font-weight: 500; text-decoration: none; transition: color 0.3s linear; word-wrap: break-word; } a svg, .link svg { fill: currentColor; transition: fill 0.3s linear; } a:hover, a:focus, .link:hover, .link:focus { color: #2367ae; } a:focus, .link:focus { border-color: #488ed8; outline: none; } a:link, .link:link { -webkit-tap-highlight-color: #488ED8; } a:not([href]), .link:not([href]) { cursor: default; } a:not([href]):hover, a:not([href]):focus, .link:not([href]):hover, .link:not([href]):focus { color: inherit; } p a, p .link { font-size: inherit; } .link { border: 0; padding: 0; text-decoration: underline; } .messages { clear: both; flex: 0 0 100%; margin-top: 2rem; min-height: 25px; width: 100%; } .validation-message::before, .validation-error::before, .validation-message::after, .validation-error::after { content: ' '; display: table; } .validation-message::after, .validation-error::after { clear: both; } .validation-message span, .validation-error span { color: #6e6f7e; display: inline-block; float: right; font-size: 14px; } .validation-error span { color: #f6704d; } [class*='message-'] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #fff; display: inline-block; font-size: 1.4rem; font-weight: 700; margin-bottom: 5px; margin-right: 5px; padding: 5px; } [class*='message-'] span { font-weight: 700; } .message-success { background: #00831c; } .message-error { background: #d0021b; } .message-warning { background: #f5a623; } .size-controlbar a { display: block; font-size: 3rem; margin: 0 auto; width: 100%; } .size-controlbar, .size-controlbar a { height: 100%; } .svg-arrow path { fill: none; stroke: #488ed8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } table { width: 100%; } th, td { border-bottom: 1px solid #e4e4e4; color: rgba(0, 0, 0, 0.6); font-size: 1.6rem; vertical-align: middle; } @media only screen and (max-width: 767px) { th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } } td { padding: 2rem; } th { color: #8f8f8f; font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; padding: 2rem; text-align: left; } .user-image { border: 1px solid #e4e4e4; color: #e4e4e4; height: 4rem; line-height: 4rem; text-align: center; width: 4rem; } .user-image .material-icons { display: inline; font-size: 3rem; vertical-align: middle; } .curator-image { height: 4rem; line-height: 4rem; text-align: center; width: 4rem; overflow: hidden; } .curator-image img { width: 100%; height: auto; } .init-table.pinned .title { overflow: hidden; white-space: nowrap; max-width: 350px; text-overflow: ellipsis; } .init-table .medium-column .description, .init-table .medium-column .material-icons-check { display: flex; } .init-table .medium-column .input-menu-height { text-align: right; } .init-table .medium-column .input-menu-height:before { display: none; } .init-table .medium-column .input-menu-height .description, .init-table .medium-column .input-menu-height .material-icons-check { display: none; } .init-table .medium-column .description { white-space: pre-wrap; } .init-table .medium-column .Select-option li { height: auto; } .init-table .medium-column .Select-option .with-check .title { color: #588BC2; } .init-table .medium-column .Select-option .with-check .material-icons { top: 0; } .init-table .description, .init-table .material-icons-check { display: none; } .init-table .input-menu-height { height: 56px; padding: 16px 0 17px 15px; } .init-table .input-menu-height .with-check { line-height: 24px; } .init-table .with-sorting .with-check, .init-table .with-sorting .without-check { font-size: 1.4rem; margin: 4.4px auto; width: 80%; } .init-table .with-sorting .with-check { color: #488ed8; display: flex; flex-direction: row; justify-content: flex-end; } .init-table .with-sorting .material-icons { font-size: 1.4rem; margin-right: .5rem; } li > .with-check .title { color: #488ed8; } .description, .material-icons-check { display: block; } .with-check, .without-check { display: flex; flex-direction: column; position: relative; padding-left: 1rem; } .with-check .title, .without-check .title { font-size: 1.7rem; line-height: normal; } .with-check .title .material-icons, .without-check .title .material-icons { margin-right: .5rem; color: #488ed8; left: -1.7rem; position: absolute; } .with-check .description, .without-check .description { font-size: 1.4rem; line-height: 1.9rem; width: 100%; } .tchop-checkbox input, .tchop-checkbox .form-group[contenteditable='true'] { display: none; } .tchop-checkbox input[type='checkbox'] + label, .tchop-checkbox .form-group[type="checkbox"][contenteditable='true'] + label { height: 16px; position: relative; padding-left: 20px; margin-bottom: 0; } .tchop-checkbox input[type='checkbox'] + label:before, .tchop-checkbox .form-group[type="checkbox"][contenteditable='true'] + label:before { font-family: 'Material Icons'; content: ''; border: 1px solid #e2e2e2; border-radius: 4px; height: 16px; padding: 1px 0; width: 16px; display: block; position: absolute; top: 0; left: 0; } .tchop-checkbox input[type='checkbox']:checked + label:before, .tchop-checkbox .form-group[type='checkbox']:checked[contenteditable='true'] + label:before { content: 'done'; } body .emoji-base, body .chats .DraftEditor-root .emoji, .chats .DraftEditor-root body .emoji, body .chats .data-wrapper .emoji, .chats .data-wrapper body .emoji { background-position: center; background-repeat: no-repeat; background-size: contain; vertical-align: middle; display: inline-block; overflow: hidden; max-width: 1.95ch; max-height: 1em; line-height: inherit; margin: -0.2ex 0.15em 0.2ex; min-width: 1em; } body .emoji-base span, body .chats .DraftEditor-root .emoji span, .chats .DraftEditor-root body .emoji span, body .chats .data-wrapper .emoji span, .chats .data-wrapper body .emoji span { color: transparent; } body .emoji-mart-emoji { font-size: inherit; } body .emoji-mart-emoji span { width: 27px !important; height: 27px !important; } body .emoji-unicode { font-size: 0 !important; } body .emoji-mart .emoji-mart-emoji { font-size: 0; } body .emoji-mart .emoji-mart-preview-skins { right: 12px; top: -285px; z-index: 1; } body .emoji-mart .emoji-mart-preview-data, body .emoji-mart .emoji-mart-preview-emoji { display: none; } body .emoji-mart .emoji-mart-bar:last-child { border: none; } body .emoji-mart .emoji-mart-preview { height: 0; } body .emoji-mart .emoji-mart-search-icon { display: none; } .text-editable { border: 1px solid transparent; } .text-editable:focus-within { border-color: #488ed8; outline: none; } .text-editable[data-name="title"] { min-height: 28px; } .text-editable[data-name="quote"], .text-editable[data-name="text"] { min-height: 22px; } .text-editable[data-name="text"]:after { content: attr(data-helped-text); display: block; font-weight: bold; color: #999999; font-size: 12px; position: absolute; line-height: 14px; bottom: -16px; right: 0; opacity: 0; transition: opacity 0.3s linear; } .text-editable:hover[data-name="text"]:after, .text-editable:focus[data-name="text"]:after { opacity: 1; } .text-editable { display: table; min-width: 100%; width: 100%; word-break: break-word; } .text-editable, .text-editable span { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; } .text-editable span, .text-editable span:focus { outline: none; border: none; } /*!* * React Select * ============ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs * MIT License: https://github.com/JedWatson/react-select */ .Select { position: relative; min-width: 160px; } .Select, .Select div, .Select input, .Select .form-group[contenteditable='true'], .Select span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .Select.is-disabled > .Select-control { background-color: #f9f9f9; } .Select.is-disabled > .Select-control:hover { box-shadow: none; } .Select.is-disabled .Select-arrow-zone { cursor: default; pointer-events: none; opacity: 0.35; } .Select-control { background-color: #fff; border-radius: 4px; color: #333; cursor: default; display: table; border-spacing: 0; border-collapse: separate; height: 36px; outline: none; overflow: hidden; position: relative; width: 100%; } .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .Select-control .Select-input:focus { outline: none; } .is-searchable.is-open > .Select-control { cursor: text; } .is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border: 1px solid #ccc; background: #fff; } .is-open > .Select-control .Select-arrow { top: -2px; border-color: transparent transparent #999; border-width: 0 5px 5px; } .is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .Select-placeholder, .Select--single > .Select-control .Select-value { bottom: 0; color: #aaa; line-height: 34px; padding-left: 10px; padding-right: 10px; position: absolute; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .has-value.Select--single > .Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: #333; } .has-value.Select--single > .Select-control .Select-value a.Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { cursor: pointer; text-decoration: none; } .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { outline: none; text-decoration: underline; } .Select-input { height: 34px; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .Select-input > input, .Select-input > .form-group[contenteditable='true'] { width: 100%; background: none transparent; border: 0 none; box-shadow: none; cursor: default; display: inline-block; font-family: inherit; font-size: inherit; margin: 0; outline: none; line-height: 14px; /* For IE 8 compatibility */ padding: 8px 0 12px; /* For IE 8 compatibility */ -webkit-appearance: none; } .is-focused .Select-input > input, .is-focused .Select-input > .form-group[contenteditable='true'] { cursor: text; } .has-value.is-pseudo-focused .Select-input { opacity: 0; } .Select-control:not(.is-searchable) > .Select-input { outline: none; } .Select-loading-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 16px; } .Select-loading { -webkit-animation: Select-animation-spin 400ms infinite linear; -o-animation: Select-animation-spin 400ms infinite linear; animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ccc; border-right-color: #333; display: inline-block; position: relative; vertical-align: middle; } .Select-clear-zone { -webkit-animation: Select-animation-fadeIn 200ms; -o-animation: Select-animation-fadeIn 200ms; animation: Select-animation-fadeIn 200ms; color: #999; cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 17px; } .Select-clear-zone:hover { color: #D0021B; } .Select-clear { display: inline-block; font-size: 18px; line-height: 1; } .Select--multi .Select-clear-zone { width: 17px; } .Select-arrow-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 25px; } .Select-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; height: 0; width: 0; position: relative; } .is-open .Select-arrow, .Select-arrow-zone:hover > .Select-arrow { border-top-color: #666; } .Select--multi .Select-multi-value-wrapper { display: inline-block; margin-top: -5px; } .Select .Select-aria-only { display: inline-block; height: 1px; width: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left; } @-webkit-keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; top: 100%; width: 100%; z-index: 999; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .Select-option.is-selected { background-color: #f5faff; /* Fallback color for IE 8 */ background-color: rgba(0, 126, 255, 0.04); color: #333; } .Select-option.is-focused { /* Fallback color for IE 8 */ color: #333; } .Select-option.is-disabled { color: #cccccc; cursor: default; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0; } .Select--multi.has-value .Select-input { margin-left: 5px; } .Select--multi .Select-value { /* Fallback color for IE 8 */ border-radius: 2px; /* Fallback color for IE 8 */ display: inline-block; font-size: 0.9em; line-height: 1.4; margin-left: 5px; margin-top: 5px; vertical-align: top; } .Select--multi .Select-value-icon, .Select--multi .Select-value-label { display: inline-block; vertical-align: middle; } .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px; } .Select--multi a.Select-value-label { cursor: pointer; text-decoration: none; } .Select--multi a.Select-value-label:hover { text-decoration: underline; } .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; /* Fallback color for IE 8 */ padding: 1px 5px 3px; } .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus { /* Fallback color for IE 8 */ } .Select--multi .Select-value-icon:active { /* Fallback color for IE 8 */ } .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333; } .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3; } .Select--multi.is-disabled .Select-value-icon:hover, .Select--multi.is-disabled .Select-value-icon:focus, .Select--multi.is-disabled .Select-value-icon:active { background-color: #fcfcfc; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .hover-effect .Select-option.is-focused { background-color: #ebf5ff; background-color: rgba(0, 126, 255, 0.08); color: #333; } .hover-effect .Select-value { left: inherit; right: 3rem; } .hover-effect .Select-value { left: 0; right: inherit; } .hover-effect .Select-value-label { font-size: 1.4rem; } .hover-effect .Select-control { background-color: #fff; border: 1px solid #e4e4e4; border-radius: 4px; } .hover-effect .Select-clear-zone { display: none; } .col-cards > header { background-color: #fff; position: relative; z-index: 10; padding: 10px; } @media only screen and (min-width: 768px) { .col-cards > header { margin-bottom: 2rem; padding: 0; border-bottom: 1px solid #e4e4e4; } .col-cards > header.with-arrow::after { background-color: #fff; content: ''; display: block; height: 10px; position: absolute; transform: rotate(-45deg); width: 10px; bottom: 0; left: 24px; margin-bottom: -6px; } } @media only screen and (min-width: 1400px) { .col-cards > header { padding: 1.8rem 3rem; } } .col-cards > header .content { padding: 0 20px; } .col-cards > header.with-arrow .content { padding: 20px; } .col-cards > header .card-status { font-size: 1.2rem; line-height: 1.5rem; } .col-cards > header .author-image { position: relative; display: inline-block; top: 4px; margin-right: 8px; border-radius: 100%; width: 24px; height: 24px; text-align: center; line-height: 24px; } .col-cards > header .buttons-block, .col-cards > header .button-wrapper { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .col-cards > header .buttons-block { margin-top: 10px; } .col-cards > header .comment-img { width: 17px; margin: 2px 7px; } .col-cards > header .button-wrapper { width: 100%; } @media only screen and (min-width: 768px) { .col-cards > header .button-wrapper { flex-direction: row; width: initial; } } .col-cards > header .button-wrapper .menu-item { width: 100%; } @media only screen and (min-width: 768px) { .col-cards > header .button-wrapper .menu-item { width: 195px; } } .col-cards > header .button-wrapper .menu-item .input-select span { padding-left: 10px; } .col-cards > header .button-wrapper .preview { position: relative; width: 100%; } @media only screen and (min-width: 768px) { .col-cards > header .button-wrapper .preview { width: auto; } } .col-cards > header .button-wrapper .preview label { font-size: 12px; top: -10px; } .col-cards > header .button-wrapper .preview > div { min-height: 36px; } .col-cards > header .button-wrapper .preview .material-icons { position: absolute; right: 10px; } .col-cards > header .button-wrapper .preview span { font-size: 12px; font-weight: 500; letter-spacing: 0; padding-top: 0; padding-bottom: 0; line-height: 20px; } .col-cards > header .button-wrapper .preview + .preview { margin-bottom: 15px; } @media only screen and (min-width: 768px) { .col-cards > header .button-wrapper .preview + .preview { margin: 0 0 0 15px; } } .col-cards > header .button-wrapper .filled { border-radius: 3px; background-color: #F2F2F2; } .col-cards > header p { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.5rem; font-weight: 700; margin-bottom: 0; overflow: auto; } .col-cards > header p > span { font-weight: normal; margin-right: 0; color: rgba(0, 0, 0, 0.6); line-height: 24px; vertical-align: bottom; } @media only screen and (min-width: 768px) { .col-cards > header p > span { margin-right: 2rem; } } .col-cards > header p span.share, .col-cards > header p span.preview { float: right; } .col-cards > header p span.filled { border-radius: 3px; background-color: #F2F2F2; } .col-cards > header p.footer > span { line-height: 36px; height: 38px; margin-top: 2px; } .col-cards > header svg { top: 9px; height: 1.5rem; width: 1.5rem; vertical-align: baseline; } .col-cards > header h1 { word-wrap: break-word; color: rgba(0, 0, 0, 0.87); font-size: 2rem; font-weight: 600; line-height: 24px; } .col-cards > header h1 { margin-bottom: 2rem; margin-top: 2rem; } .edit .image { display: flex; flex-direction: column; padding-top: 0; } .edit .image .original-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .edit .image .actions { display: flex; align-self: center; justify-content: space-between; margin-top: -10px; align-items: center; } .edit .image .actions button, .edit .image .actions a { color: rgba(0, 0, 0, 0.54); } .edit .image .actions .arrow-section { display: flex; } .edit .image .grey-input > div { background-color: transparent; } .edit .image .wrapper-image-info > .image-group { display: flex; flex: 1; flex-wrap: wrap; flex-direction: column; align-items: center; } .edit .image .wrapper-image-info .wrapper-inputs { width: 100%; } .edit .image .wrapper-image-info .blue { color: #588BC2; } .edit .image .wrapper-image-info .blue.audio-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edit .image .video-hint { font-size: 11px; position: absolute; right: 0; } .edit .image.form-group { border: 1px solid #e4e4e4; border-radius: 4px; margin-top: 2rem; } .edit .image.form-group.no-border, .edit .image.form-group.no-border div { border: 0; background: transparent; border-radius: 0; padding: 0 !important; margin: 0; position: relative; } .edit .image.form-group.no-border .wrapper-upload-from-drive { position: relative; top: 0; margin-right: 0; height: 36px; } .edit .image.form-group.no-border .grey-input { display: none; } .edit .image .wrapper-image-fields { flex: 1 1; width: 100%; } .edit .image .wrapper-image-fields .wrapper-input-field > .form-group input#url, .edit .image .wrapper-image-fields .wrapper-input-field > .form-group #url.form-group[contenteditable='true'] { margin: 0; } .edit .image .wrapper-image-fields .drop-text { font-size: 1.2rem; line-height: 14px; color: #858584; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive { align-items: center; display: flex; z-index: 1; width: 100%; } @media only screen and (min-width: 768px) { .edit .image .wrapper-image-fields .wrapper-upload-from-drive { position: absolute; right: 0; top: 25px; height: 57px; width: auto; } } .edit .image .wrapper-image-fields .wrapper-upload-from-drive input.file-uploader, .edit .image .wrapper-image-fields .wrapper-upload-from-drive .file-uploader.form-group[contenteditable='true'] { display: none; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive:after { content: ""; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive > div { color: #8c8c8c; cursor: pointer; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive > .label-icon { font-family: 'Material Icons'; font-size: 14px; height: 14px; line-height: 14px; width: 14px; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive > .label-text { color: #8c8c8c; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; margin: 0 5px; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive > .label-text:hover { text-decoration: underline; } @media only screen and (max-width: 767px) { .edit .image .wrapper-image-fields .wrapper-upload-from-drive > .label-text { display: none; } .edit .image .wrapper-image-fields .wrapper-upload-from-drive > .label-icon { margin: 0 10px; } } .edit .image .wrapper-image-fields .wrapper-drag { background: linear-gradient(to right, #588BC2 50%, rgba(255, 255, 255, 0) 0%) repeat-x top center/13px 1px, linear-gradient(to right, #588BC2 50%, rgba(255, 255, 255, 0) 0%) repeat-x bottom center/13px 1px, linear-gradient(#588BC2 50%, rgba(255, 255, 255, 0) 0%) repeat-y left center/1px 13px, linear-gradient(#588BC2 50%, rgba(255, 255, 255, 0) 0%) repeat-y right center/1px 13px; display: flex; flex-direction: column; height: 34px; margin-bottom: 10px; } .edit .image .wrapper-image-fields .wrapper-drag .wrapper-drag-items { align-items: center; align-self: center; display: flex; } .edit .image .wrapper-image-fields .wrapper-drag .wrapper-drag-items .drag-icon { height: 20px; margin: 0 3px; width: 20px; } .edit .image .wrapper-image-fields .wrapper-drag .wrapper-drag-items .drag-icon.water-drop-icon { background: url("/assets/img/water_drop.png") no-repeat center center/20px; } .edit .image .wrapper-image-fields .wrapper-drag .wrapper-drag-items .drag-icon.fire-icon { background: url("/assets/img/fire.png") no-repeat center center/20px; } .edit .image .wrapper-image-fields .wrapper-drag .wrapper-drag-items .drag-label { color: #588BC2; font-size: 16px; height: inherit; line-height: 34px; text-align: center; } .edit .image .wrapper-image-fields .wrapper-is-uploading { align-items: center; border: 1px solid #e4e4e4; display: flex; flex-direction: column; height: 34px; margin-bottom: 10px; } .edit .image .wrapper-image-fields .wrapper-is-uploading .is-uploading-label { color: #588BC2; font-size: 16px; line-height: 34px; width: 150px; white-space: nowrap; } .edit .image .wrapper-image { flex: 0 1 35%; opacity: 1; position: relative; transition: opacity 0.3s linear; } .edit .image .wrapper-image .actions { width: 100%; display: flex; align-items: center; justify-content: space-between; position: absolute; right: 0; top: -15px; } .edit .image .wrapper-image .actions a { color: inherit; } .edit .image .wrapper-image .actions button { padding-right: 0; } .edit .image .warn { color: #fff; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s linear, color 0.3s linear; } .edit .image .warn span { font-size: 2.8rem; text-shadow: 0 0 20px #8f8f8f; } .edit .image .warn:hover span { color: #d0021b; } .touch .edit .image .warn { opacity: 1; } .edit .image .wrapper-image:hover .warn { opacity: 1; } .edit .image .wrapper-inputs { flex: 1 0 65%; padding: 10px 0; } @media only screen and (min-width: 550px) { .edit .image .wrapper-inputs { padding: 0 10px; } } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions { display: flex; height: 18px; margin-bottom: 15px; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .wrapper-uploaded-from { align-items: center; display: flex; flex: 1; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .wrapper-uploaded-from a.uploaded-from-link { align-items: center; cursor: pointer; display: flex; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .wrapper-uploaded-from a.uploaded-from-link:hover .uploaded-from-label, .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .wrapper-uploaded-from a.uploaded-from-link:hover .uploaded-from-icon { color: #2367ae; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .wrapper-uploaded-from a.uploaded-from-link .uploaded-from-icon { color: #588BC2; font-size: 12px; height: 14px; line-height: 18px; margin: 0 2px; transition: color 0.3s linear; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .wrapper-uploaded-from .uploaded-from-label { color: #999; font-size: 14px; line-height: 18px; transition: color 0.3s linear; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-inputs-header-actions .warning { align-items: center; cursor: pointer; display: flex; padding: 0; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-copyright div, .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-copyright label, .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-copyright input, .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-copyright .form-group[contenteditable='true'] { font-size: 12px; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-copyright .copyright-label { color: #999; font-size: 12px; height: 18px; line-height: 18px; margin-bottom: 5px; } .edit .image .wrapper-inputs .wrapper-inputs-info .wrapper-copyright .copyright-content select { border-bottom-left-radius: 0.4rem; border-bottom-right-radius: 0.4rem; border-top-width: 0; } .edit .image figure { border: 1px solid #e4e4e4; margin: auto; overflow: hidden; position: relative; width: 100%; height: 100%; border-radius: 4px; background: transparent; } .edit .image figure.empty { -webkit-transition: background-color 0.3s linear, color 0.3s linear; background-color: #dae8f7; transition: background-color 0.3s linear, color 0.3s linear; } .edit .image figure.drag-over { background-color: #488ed8; } .edit .image figure.drag-over span { color: #fff; } .edit .image figure.invalid-field { border-color: #f6704d; } .edit .image img { height: auto; max-height: 100%; max-width: 100%; width: auto; } .edit .image.disabled > * { cursor: default; } .edit .image.disabled .wrapper-image { opacity: .5; } .card.edit .image .wrapper-image, .card.edit .image .wrapper-inputs { flex: 1 100%; } @media only screen and (min-width: 550px) { .card.edit .image .wrapper-image, .card.edit .image .wrapper-inputs { flex: 1 50%; } } .card.edit .image .wrapper-image.audio-name { max-width: none; flex: 1 100%; } .card.edit .image .wrapper-image.audio-name > span { margin-top: 10px; } .card.edit .image .wrapper-image figure { padding: 0; width: auto; } .card.edit .image .wrapper-image figure, .card.edit .image .wrapper-image figure + div { flex: 1 100%; } .card.edit .image .wrapper-image.audio { max-width: 100%; flex: 1 100%; } .card.edit .image figure, .card.edit .image video { height: auto; max-height: 150px; width: 100%; } .card.edit .image figure img, .card.edit .image video img { height: auto; width: 100%; } .filterbar li { display: inline-block; margin-bottom: 0; padding: 0 10px; } .filterbar li:first-child { padding-left: 0; } .filterbar a, .filterbar span { font-size: 1.2rem; color: #8f8f8f; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; text-decoration: none; transition: color 0.3s linear; } .filterbar a:not(.active) { cursor: pointer; } .filterbar a.active, .filterbar a:hover { color: #488ED8; } .filterbar a.active { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .form-group[contenteditable='true'] { border-color: transparent; height: auto; padding: 0; transition: border-color 0.3s linear, box-shadow 0.3s linear; user-select: text; width: calc(100% + 10px); } .form-group[contenteditable='true'] p:last-child { margin: -3px -5px; padding: 3px 5px; } .form-group[contenteditable='true']:hover { border-color: #e4e4e4; } .touch .form-group[contenteditable='true']:hover { border-color: transparent; } .form-group[contenteditable='true']:focus { border-color: #488ed8; outline: none; } .touch .form-group[contenteditable='true']:focus { border-color: #2367ae; } .form-group[contenteditable='true'] + button { padding: 0; z-index: 1; } .form-group[contenteditable]:empty:not([data-required]) { display: none; } .form-group[contenteditable]:empty:not([data-required]):focus { display: block; } .editable { margin: -3px -5px 0; position: relative; width: calc(100% + 10px); } .editable.p { margin: -3px -5px .8em; } .editable button { bottom: -8px; height: 18px; opacity: 0; position: absolute; right: -0.6rem; text-align: center; transition: color 0.3s linear, background-color 0.3s linear, opacity 0.3s linear; width: 18px; } .editable button .material-icons.material-icons { animation: none; border: 0; display: block; font-size: 1.4rem; line-height: 18px; margin: -1px 0 0; } .editable.error :not(button), .editable.success :not(button) { border: 1px solid transparent; padding: 3px 5px; } .editable.error button, .editable.error button span, .editable.success button, .editable.success button span { padding: 0; } .editable.error button, .editable.success button { opacity: 0; } .editable.error button, .editable.unsaved [contenteditable='true']:focus + button { opacity: 1; } .editable.error :not(button) { animation: fade-error-border 1s ease 0s 1 normal forwards running; } .editable.success [contenteditable='true'] { border-color: transparent; } .editable.success :not(button) { animation: fade-success-border .5s ease 0s 1 normal forwards running; } .pagination { clear: both; margin: 2rem auto 7rem; text-align: center; } .pagination.top { margin: 3rem auto 1rem; } .popover { position: relative; } .popover button:hover + .popover-window, .popover button:focus + .popover-window, .popover button:active + .popover-window { display: block; } .popover-window { background: #fff; border: 1px solid #e4e4e4; border-radius: 10px; display: none; left: -11px; max-width: 300px; padding: 2rem; position: absolute; top: 28px; width: 60vw; z-index: 10; } .popover-window::before { background-color: #fff; content: ''; display: block; height: 12px; position: absolute; transform: rotate(-45deg); width: 12px; border: 1px solid #e4e4e4; border-bottom-color: transparent; border-left-color: transparent; left: 18px; position: absolute; top: -6px; } .popover-window :last-child { margin-bottom: 0; } .form-group.password meter { background: #e4e4e4; border: 0; border-radius: 0 0 0.4rem 0.4rem; display: block; margin: -1px 0 0; overflow: hidden; width: 100%; } ::-moz-meter-bar { background: #e4e4e4; transition: background-color 0.3s linear, width 0.3s linear; } ::-webkit-meter-bar { background: #e4e4e4; transition: background-color 0.3s linear, width 0.3s linear; } :-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #d0021b; } meter::-webkit-meter-even-less-good-value { background: #d0021b; transition: background-color 0.3s linear, width 0.3s linear; } :-moz-meter-sub-optimum::-moz-meter-bar { background: #f5a623; } meter::-webkit-meter-suboptimum-value { background: #f5a623; transition: background-color 0.3s linear, width 0.3s linear; } :-moz-meter-optimum::-moz-meter-bar { background: #00831c; } meter::-webkit-meter-optimum-value { background: #00831c; transition: background-color 0.3s linear, width 0.3s linear; } [class^='settings'] { padding-bottom: 100px; } [class^='settings'] > div { padding: 0 2rem; } @media only screen and (min-width: 768px) { [class^='settings'] h1 { margin: 51px -2rem 2rem; } } [class^='settings'] p.error { color: #d0021b; } [class^='settings'] > div { position: relative; } [class^='settings'] > div.add-token { max-width: none; width: 100%; } [class^='settings'] > div.add-user { display: flex; flex-direction: column; max-width: none; width: 100%; padding: 0 1rem; } @media only screen and (min-width: 992px) { [class^='settings'] > div.add-user { padding: 0 6.8rem; } } [class^='settings'] > div.add-user .wrapper .form-group { width: 100%; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top { width: calc(100% - 16px); margin: -5px auto 0; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.form-message { margin-top: 0; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card { display: flex; flex-direction: column; justify-content: space-between; min-height: 455px; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card .main { flex: 1 0 auto; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card .main h6 p { margin-bottom: .2rem; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card header, [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card footer { align-items: center; display: flex; flex-shrink: 0; justify-content: center; padding: 1.9rem 2rem; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card header .cta + div { width: 80%; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card footer { padding: .9rem 2rem; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .card footer .bottom-bar { margin-bottom: 0; } [class^='settings'] > div.add-user .wrapper .form-group.pin-to-top.new-push .content-blockquote { flex: 1; } [class^='settings'] > div.add-user .wrapper .card { outline: 8px solid #F5F5F5; } [class^='settings'] > div.add-user .wrapper .card header { border-bottom: 1px solid #e4e4e4; } [class^='settings'] > div.add-user .wrapper .card header .layout { height: 16px; } [class^='settings'] > div.add-user .wrapper .card header p { text-overflow: ellipsis; overflow: hidden; max-width: 350px; white-space: nowrap; display: block; } [class^='settings'] > div.add-user .wrapper .card footer { border-top: 1px solid #e4e4e4; } [class^='settings'] .message-field > div { height: 104px; } [class^='settings'] .number { text-align: right; } [class^='settings'] .input-label > div { height: 56px; } [class^='settings'] .input-label label { margin-top: -.2rem; } [class^='settings'] .form-group { margin-bottom: 0; } [class^='settings'] .validation-error { margin-top: 1rem; } [class^='settings'] .button-errors { position: relative; } [class^='settings'] .button-errors .validation-error { position: absolute; right: 20rem; top: 1rem; } [class^='settings'] h1 { color: rgba(0, 0, 0, 0.6); font-size: 3.6rem; font-weight: 500; line-height: 38px; margin: 2rem 0; } @media only screen and (min-width: 992px) { [class^='settings'] h1 { margin: 8.4rem 0 2rem; } } [class^='settings'] .push-tabs { margin-top: 80px; padding-bottom: 10px; } [class^='settings'] .push-tab-link { font-weight: 600; font-size: 24px; line-height: 28px; color: #b8b8b8; } [class^='settings'] .push-tab-link:first-of-type { margin-right: 60px; } [class^='settings'] .push-tab-link * { padding: 0; } [class^='settings'] .push-tab-link[aria-selected="true"] { color: #488ED8; } [class^='settings'] .push-tab-hr { margin-top: -12px; border-top-width: 2px; } [class^='settings'] .headline-info { margin-bottom: 2rem; } [class^='settings'] .headline-info.push { margin-bottom: 1.1rem; } [class^='settings'] .headline-info.push h3 { font-size: 1.7rem; color: rgba(0, 0, 0, 0.87); font-weight: normal; line-height: 2.8rem; margin-bottom: 6.1rem; } [class^='settings'] .title-add-new, [class^='settings'] .button-add-new { background-color: #f5f5f5; border: 1px solid #e4e4e4; display: flex; height: 7.2rem; max-width: none; text-align: center; } [class^='settings'] .title-add-new { border-bottom: 0; justify-content: space-between; align-items: center; border-radius: 5px 5px 0 0; } [class^='settings'] .title-add-new p, [class^='settings'] .title-border-bottom p { align-items: center; color: #000; display: flex; font-size: 1.8rem; font-weight: bold; margin: 0; } [class^='settings'] .title-add-new p button, [class^='settings'] .title-border-bottom p button { font-size: 2.4rem; margin-right: .5rem; } [class^='settings'] .title-add-new p span, [class^='settings'] .title-border-bottom p span { font-weight: bold; } [class^='settings'] .title-border-bottom { padding-bottom: 16px; padding-top: 32px; border-bottom: 1px solid #e4e4e4; } [class^='settings'] .title-border-bottom p { padding-left: 0; } [class^='settings'] .message { font-size: 1.2rem; } [class^='settings'] .message a { color: #8f8f8f; } [class^='settings'] .form-zone { margin-top: 3rem; width: 100%; } [class^='settings'] .form-zone.error { display: flex; } [class^='settings'] .form-zone.error .message { bottom: -5px; } @media only screen and (min-width: 992px) { [class^='settings'] .form-zone { width: 80%; max-width: 480px; } } [class^='settings'] .form-zone div { width: 100%; } [class^='settings'] .form-zone p { margin: 0; } [class^='settings'] .form-zone .disabled-label, [class^='settings'] .form-zone .enabled-label { position: relative; } [class^='settings'] .form-zone .disabled-label input, [class^='settings'] .form-zone .disabled-label .form-group[contenteditable='true'], [class^='settings'] .form-zone .enabled-label input, [class^='settings'] .form-zone .enabled-label .form-group[contenteditable='true'] { font-size: 1.6rem; } [class^='settings'] .form-zone .disabled-label .material-icons, [class^='settings'] .form-zone .enabled-label .material-icons { bottom: 1rem; top: 30px; color: #000; font-size: 2rem; right: 10px; width: 2rem; height: 2rem; position: absolute; z-index: 1; } [class^='settings'] .form-zone .disabled-label input, [class^='settings'] .form-zone .disabled-label .form-group[contenteditable='true'] { opacity: 0.6; background-color: transparent; } [class^='settings'] .form-zone .enabled-label input, [class^='settings'] .form-zone .enabled-label .form-group[contenteditable='true'] { opacity: 1; background-color: transparent; } [class^='settings'] .h1point5 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-bottom: 0; color: rgba(0, 0, 0, 0.6); font-size: 4.5rem; font-weight: 700; line-height: 38px; margin-bottom: 2rem; margin-top: .5rem; text-align: left; } [class^='settings'] h2 { border-bottom: 1px solid #e4e4e4; color: #8f8f8f; font-size: 1.6rem; font-weight: 500; line-height: 38px; margin-bottom: 2rem; text-align: left; } [class^='settings'] h3 { font-size: 1.8rem; line-height: 2.4rem; width: 100%; } @media only screen and (min-width: 992px) { [class^='settings'] h3 { width: 90%; } } [class^='settings'] .profile form .primary { margin-right: 1.4rem; } @media only screen and (min-width: 992px) { [class^='settings'] .profile form .primary { margin-top: 2rem; } [class^='settings'] .profile form .primary { margin-right: 0; } } [class^='settings'] form .primary { float: left; margin-top: 2rem; padding: .8rem 2.2rem; } @media only screen and (min-width: 992px) { [class^='settings'] form .primary { float: right; margin-top: 0; } } [class^='settings'] .primary { padding: 10px 16px; position: relative; z-index: 1; } [class^='settings'] .ghost { margin-right: 2rem; } [class^='settings'] .ghost.logout { margin-right: 0; } [class^='settings'] .section-bottom { border-bottom: 1px solid #e4e4e4; margin-bottom: 2.4rem; } [class^='settings'] .section-bottom.push { padding-bottom: 1.2rem; } @media only screen and (min-width: 992px) { [class^='settings'] .with-sorting { display: flex; justify-content: space-between; align-items: center; } } [class^='settings'] .with-sorting .sorting { margin-top: 1rem; max-width: 35rem; } @media only screen and (min-width: 992px) { [class^='settings'] .with-sorting .sorting { margin-top: 0; width: 30rem; max-width: 60%; } } [class^='settings'] .with-sorting .sorting .Select-value { width: 100%; } [class^='settings'] .with-sorting .sorting .title { text-align: left; padding-left: 20px; } [class^='settings'] .with-sorting .sorting .with-check .material-icons { left: 0; } [class^='settings'] .with-sorting .sorting .with-check .title { color: #488ed8; } [class^='settings'] .with-sorting .Select-menu-outer { text-align: right; z-index: 10; } [class^='settings'] .with-sorting .Select-placeholder { color: #000; font-size: 1.4rem; margin: auto; width: 63%; } [class^='settings'] .readers-page > .button-add-new { border-radius: 5px; } [class^='settings'] .readers-page .hidden-mobile { display: none; } @media only screen and (min-width: 1200px) { [class^='settings'] .readers-page .hidden-mobile { display: table-cell; } } @media only screen and (min-width: 1200px) { [class^='settings'] .readers-page .hidden-desktop { display: none; } } [class^='settings'] .readers-page .input-label { margin: 5px 0; } [class^='settings'] .readers-page .input-menu-height { min-width: 100px; } [class^='settings'] .readers-page .input-menu-height:after, [class^='settings'] .readers-page .input-menu-height:before { display: none; } [class^='settings'] .button-add { align-items: center; background-color: #F5F5F5; border: 1px solid #e4e4e4; border-radius: .5rem; display: flex; height: 7.2rem; justify-content: center; margin-top: 2rem; text-align: center; } [class^='settings'] .button-add.end.stream { border-radius: .5rem .5rem 0 0; } [class^='settings'] .button-add .description { margin-bottom: 1rem; text-align: left; width: 100%; } @media only screen and (min-width: 992px) { [class^='settings'] .button-add .description { margin-bottom: 0; width: 37rem; } } [class^='settings'] .button-add .add { height: 3.6rem; font-size: 1.5rem; font-weight: 600; line-height: 1; width: 17rem; } [class^='settings'] .button-add .add span { text-align: center; line-height: 1; width: 100%; } [class^='settings'] .button-add .cancel-button { position: absolute; right: 2.4rem; top: 2rem; } @media only screen and (min-width: 992px) { [class^='settings'] .button-add .cancel-button { top: 4rem; } } [class^='settings'] .button-add .cancel-button .material-icons { color: rgba(0, 0, 0, 0.54); } [class^='settings'] .button-add a.download { background-color: #F6704D; } [class^='settings'] .multiple-readers { border-top: 1px solid #f1f1f3; padding-top: 30px; text-align: center; align-items: center; justify-content: center; display: flex; flex-direction: column; } @media only screen and (min-width: 992px) { [class^='settings'] .multiple-readers { flex-direction: row; } } [class^='settings'] .multiple-readers button { padding: 0 .7rem; margin: 0 .7rem; } [class^='settings'] .multiple-readers span { line-height: 20px; font-size: 1.5rem; } [class^='settings'] .button-add-new { justify-content: center; align-items: center; } [class^='settings'] .button-add-new.no-b-rad { border-radius: 0 0 5px 5px; border-top: 0; } [class^='settings'] .button-add-new.invite-buttons { display: flex; justify-content: flex-end; } [class^='settings'] .button-add-new.invite-buttons button { margin: 0 2rem 0 0; } [class^='settings'] .button-add-new.invite-buttons span { font-size: 1.5rem; line-height: 2rem; } [class^='settings'] .integration-group { border-bottom: 1px solid #e4e4e4; padding: 24px 0; } [class^='settings'] .integration-group .integration { align-items: center; display: flex; } [class^='settings'] .integration-group .integration h3 { margin-left: 0; } [class^='settings'] .integration-group .integration .logo { align-self: flex-start; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 4px; flex-shrink: 0; height: 64px; width: 64px; margin-right: 16px; } [class^='settings'] .integration-group .integration .logo img { border-radius: 4px; } [class^='settings'] .integration-group .integration .description { flex: 0 45rem; padding-right: 1rem; } @media only screen and (min-width: 768px) { [class^='settings'] .integration-group .integration .description { flex: 0 450px; } } [class^='settings'] .integration-group .integration .description h1 { color: rgba(0, 0, 0, 0.6); font-size: 18px; font-weight: bold; line-height: 24px; } [class^='settings'] .integration-group .integration .description p { color: rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 18px; } [class^='settings'] .integration-group .integration .end { align-self: center; display: flex; flex: 1 120px; justify-content: flex-end; } [class^='settings'] .integration-group .integration .end a { width: 12rem; } [class^='settings'] .integration-group .integration .end a.manage-button:link, [class^='settings'] .integration-group .integration .end a.manage-button:focus { -webkit-tap-highlight-color: #f6704d; border-color: #f6704d; } [class^='settings'] .integration-group .integration .end a.link-button:link, [class^='settings'] .integration-group .integration .end a.link-button:focus { color: #fff; -webkit-tap-highlight-color: #f6704d; border-color: #f6704d; } [class^='settings'] .integration-group .integration .end .manage-button, [class^='settings'] .integration-group .integration .end .manage-button:hover { color: #f6704d; } [class^='settings'] .integration-group .user-list { background-color: #f2f2f2; border: 1px solid #e4e4e4; border-radius: 4px; margin-top: 16px; } @media only screen and (min-width: 768px) { [class^='settings'] .integration-group .user-list { margin-left: 80px; } } [class^='settings'] .integration-group .user-list li { margin-bottom: 0; } [class^='settings'] .integration-group .user-list li:not(:last-of-type) { border-bottom: 1px solid #e4e4e4; } [class^='settings'] .integration-group .user-list li:first-of-type { color: #8c8c8c; font-size: 13px; letter-spacing: 1px; line-height: 18px; padding: 12px 16px; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) { display: flex; padding: 16px; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .logo { height: 36px; width: 36px; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .logo img { border-radius: 50%; height: 100%; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .logo.initials { background-color: #fff; border: 1px solid #e4e4e4; color: #f6704d; font-weight: bold; line-height: 36px; text-align: center; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .description { flex: 1 1; margin-left: 12px; padding-right: .5rem; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .description p, [class^='settings'] .integration-group .user-list li:not(:first-of-type) .description strong { color: rgba(0, 0, 0, 0.6); word-break: break-word; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .description p { font-size: 13px; line-height: 16px; margin-bottom: 0; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .description strong { font-size: 16px; line-height: 19px; } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .end { align-self: center; flex-basis: 4rem; } @media only screen and (min-width: 768px) { [class^='settings'] .integration-group .user-list li:not(:first-of-type) .end { flex-basis: 11rem; } } [class^='settings'] .integration-group .user-list li:not(:first-of-type) .end a { font-size: 16px; font-weight: bold; line-height: 19px; text-align: center; } @media only screen and (min-width: 768px) { [class^='settings'] .integration-group .user-list li:not(:first-of-type) .end a { text-align: right; } } [class^='settings'] .table-token { border: 1px solid #e4e4e4; border-top: 0; padding: 3rem; overflow-x: auto; } [class^='settings'] .add.border { border-top: 0; padding-bottom: 3.4rem; } [class^='settings'] .border { border: 1px solid #e4e4e4; margin: 0; padding: 2rem; } [class^='settings'] .button-add.end { flex-direction: column; height: auto; justify-content: space-between; padding: 2.4rem 3.6rem; position: relative; } @media only screen and (min-width: 992px) { [class^='settings'] .button-add.end { flex-direction: row; } } [class^='settings'] .button-add.end .add { align-items: center; display: flex; justify-content: center; } [class^='settings'] .button-add.end .description h3 span { color: rgba(0, 0, 0, 0.87); font-size: 17px; letter-spacing: 0.15px; line-height: 24px; } [class^='settings'] .button-add.end .description h6 span { color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 16px; } [class^='settings'] .button-add.end .download-link { display: flex; flex-direction: column; } [class^='settings'] .button-add.end .download-link a:first-child { margin-bottom: 1rem; } [class^='settings'] .button-add.end .download-link a, [class^='settings'] .button-add.end .download-link button { line-height: 1.8rem; width: 16rem; max-width: 100%; } [class^='settings'] .form-message { margin-top: 2rem; } [class^='settings'] .form-message.hint { text-align: right; } [class^='settings'] .form-message span { font-size: 1.4rem; } [class^='settings'] .form-message input, [class^='settings'] .form-message .form-group[contenteditable='true'], [class^='settings'] .form-message select, [class^='settings'] .form-message .Select { margin-top: .5rem; } [class^='settings'] .with-check .title { color: rgba(0, 0, 0, 0.87); } [class^='settings'] .without-check .title { color: rgba(0, 0, 0, 0.87); } [class^='settings'] .with-check, [class^='settings'] .without-check { display: flex; flex-direction: column; position: relative; padding-left: 0; } [class^='settings'] .with-check .title, [class^='settings'] .without-check .title { font-size: 1.5rem; position: relative; } [class^='settings'] .with-check .title .material-icons, [class^='settings'] .without-check .title .material-icons { left: -2.6rem; top: -.55rem; position: absolute; } [class^='settings'] .with-check .description, [class^='settings'] .without-check .description { font-size: 1.2rem; line-height: 1.3rem; } [class^='settings'] .Select-value-label { font-size: 1.3rem; } @media only screen and (min-width: 992px) { [class^='settings'] .Select-value-label { font-size: 1.4rem; } } [class^='settings'] .sorting { position: relative; } [class^='settings'] .sorting .sorting-by { position: absolute; right: 3rem; } [class^='settings'] .sorting .sorting-by span:nth-child(2) { font-weight: bold; } [class^='settings'] .Select-clear-zone { display: none; } [class^='settings'] .new-curator { font-weight: bold; } [class^='settings'] .edit-button { position: absolute; right: 0; top: 10px; } [class^='settings'] .warn { margin-top: -.8rem; } [class^='settings'] .date-pickers { display: flex; flex-direction: column; justify-content: space-between; } @media only screen and (min-width: 992px) { [class^='settings'] .date-pickers { flex-direction: row; } } [class^='settings'] .date-pickers > div { position: relative; width: 100%; } @media only screen and (min-width: 992px) { [class^='settings'] .date-pickers > div { width: calc(50% - 4px); } } [class^='settings'] .date-pickers > div:hover .icon-time { display: none; } [class^='settings'] .date-pickers > div input:hover, [class^='settings'] .date-pickers > div .form-group:hover[contenteditable='true'], [class^='settings'] .date-pickers > div input:active, [class^='settings'] .date-pickers > div .form-group:active[contenteditable='true'], [class^='settings'] .date-pickers > div input:focus, [class^='settings'] .date-pickers > div .form-group:focus[contenteditable='true'] { z-index: 1; background: white; } [class^='settings'] .date-pickers > div input::-webkit-calendar-picker-indicator, [class^='settings'] .date-pickers > div .form-group[contenteditable='true']::-webkit-calendar-picker-indicator { color: grey; } [class^='settings'] .date-pickers > div .icon-time { right: 12px; top: 35px; font-size: 24px; position: absolute; } [class^='settings'] .date-pickers > div .icon-time.in-app-icon { display: none; } [class^='settings'] .Select.revert .Select-menu { flex-direction: column-reverse; } [class^='settings'] .Select .Select-menu { display: flex; flex-direction: column; } .settings-general { order: 2; padding: 0 2rem 2rem; } @media only screen and (min-width: 768px) { .settings-general { flex: 1 0; padding-left: 12rem; padding-right: 12rem; position: relative; } } @media only screen and (min-width: 992px) { .settings-general { max-width: 1000px; } } .settings-general > div { margin-bottom: 7rem; } .settings-general .form-group.error { flex-direction: column; } .settings-general .form-group.error p, .settings-general .form-group.error span { color: rgba(0, 0, 0, 0.6); } .settings-general .form-group.error p.message, .settings-general .form-group.error span.message { right: 0; } .settings-general .form-group.error p.message, .settings-general .form-group.error p.message span, .settings-general .form-group.error span.message, .settings-general .form-group.error span.message span { color: #d0021b; } .settings-general .form-group p { color: rgba(0, 0, 0, 0.6); } .settings-general h3 { margin: auto; } .settings-general .edit .init-table > button { display: flex; margin: 1.8rem auto; } .invite-edit .some, .invite-check .some { padding: 1.4rem; } .invite-edit span, .invite-check span { font-size: 1.6rem; } .invite-edit span.as, .invite-check span.as { line-height: 2.6rem; } .invite-edit .right-position, .invite-check .right-position { float: right; margin-top: 4rem; padding: .8rem 1.8rem; } .invite-edit .with-error, .invite-check .with-error { align-items: flex-end; display: flex; justify-content: space-between; margin: 5px 15px; } .invite-edit .left-position, .invite-check .left-position { float: left; } .add-user { border: 1px solid #e4e4e4; padding: 2rem; position: relative; } .invite-check::before, .invite-check::after { content: ' '; display: table; } .invite-check::after { clear: both; } .invite-check .invite + .invite { border-top: 1px solid #e8e8e8; } .invite-check .invite { margin-bottom: 2rem; position: relative; padding: 0 5%; } .invite-check .invite .input-fields { display: flex; flex-direction: column; } @media only screen and (min-width: 992px) { .invite-check .invite .input-fields { justify-content: space-between; flex-direction: row; margin-bottom: 0; } } .invite-check .invite .input-fields > div { width: 100%; margin-bottom: 0; position: relative; } @media only screen and (min-width: 992px) { .invite-check .invite .input-fields > div { width: 45%; } } .invite-check .invite .input-fields + div { margin: 10px 0; } .invite-check .invite .input-fields + div > span { line-height: 2.6rem; } @media only screen and (min-width: 992px) { .invite-check .invite { margin-bottom: 0; } } .invite-check .invite .cta { font-size: 1.8rem; top: 2rem; margin-top: 0; position: absolute; right: -10px; } .invite-check .invite .btn-show { visibility: hidden; } .invite-check .invite:hover .btn-show { visibility: visible; } .invite-check .multiple-users-invite { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; } .invite-check .form-basic { width: 100%; max-width: 50rem; } .invite-check .success { color: #00831c; } .invite-check .error { color: #d0021b; } .invite-check h2 ~ h2 { margin-top: 3rem; } .invite-complete { border: 1px solid #e8e8e8; background-color: #f2f2f2; border-radius: 5px; } .invite-complete p { padding: 2.1rem 3.2rem; margin: 0; color: rgba(0, 0, 0, 0.87); position: relative; font-size: 1.7rem; } .invite-complete p button { position: absolute; top: 1.5rem; right: 2.4rem; } .invite-complete p button span { font-size: 2.4rem; } .invite-complete .settings-table-v2 td { background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding: 1.5rem 3.2rem; } .invite-complete .settings-table-v2 td .h2 { color: rgba(0, 0, 0, 0.87); font-weight: normal; font-size: 1.5rem; } .invite-complete .settings-table-v2 td small { color: rgba(0, 0, 0, 0.6); font-size: 1.2rem; line-height: 1.6rem; } .invite-complete .invite-complete-footer { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; } .invite-complete .invite-complete-footer button { margin: 1.8rem 2.4rem 1.8rem 0; } .invite-complete .completed { position: relative; display: flex; justify-content: center; align-items: center; } .invite-complete .completed p { color: rgba(0, 0, 0, 0.6); margin: 10rem auto; font-size: 1.7rem; } .invite-complete .completed .cancel-button { position: absolute; top: 2.3rem; right: 2.4rem; } .invite-complete .completed .cancel-button span { font-size: 2.4rem; } .user-exist { display: flex; align-items: center; margin-top: 10px; } .user-exist .material-icons { color: #f6704d; font-size: 22px; } .user-exist .message { color: #000011; margin-left: 5px; font-size: 13px; } .switch-entry-size { display: flex; align-items: center; max-height: 100%; transition: color 0.3s linear; margin-top: 14px; margin-bottom: 14px; line-height: 2.2rem; } .switch-entry-size.end-justified { justify-content: end; } .switch-entry-size.with-comment { max-width: 550px; } .switch-entry-size .text-view { font-size: 1.6rem; color: #8F8F8F; margin-right: 14px; } .switch-entry-size.active, .switch-entry-size button:hover { color: #2367ae; } .switch-entry-size > div { display: flex; align-items: center; } .switch-entry-size button { padding: 2px 2px 3px; min-width: 0; min-height: 0; } .switch-entry-size button + button { margin-left: 11px; } .col-cards .switch-entry-size { margin: 0 auto; text-align: right; width: 100%; } .apps-window { position: relative; text-align: center; } .apps-window .grey-block { background-color: #F5F5F5; max-width: 636px; flex-direction: column; max-height: 588px; padding: 13px; width: 100%; display: flex; margin-bottom: 12px; } @media only screen and (min-width: 992px) { .apps-window .grey-block { flex-direction: row; padding: 31px; } .apps-window .grey-block:nth-of-type(2) { flex-direction: row-reverse; } .apps-window .grey-block:nth-of-type(2) .image { margin-left: 31px; margin-right: 0; } } .apps-window .grey-block .image { border-radius: 2px; margin-left: 0; margin-right: 31px; } .apps-window .grey-block .image img { width: 254px; max-width: 100%; } .apps-window .content { display: flex; flex-direction: column; justify-content: space-between; margin-top: 20px; width: 100%; } @media only screen and (min-width: 992px) { .apps-window .content { margin-top: 0; } } .apps-window .content .text { text-align: left; } .apps-window .content h4 { color: rgba(0, 0, 0, 0.87); font-size: 1.7rem; letter-spacing: 0.15px; line-height: 24px; } .apps-window .content .subtitle { margin: 5px 0 7px 0px; color: rgba(0, 0, 0, 0.6); font-size: 1.2rem; line-height: 16px; } .apps-window .line { background-color: #ebebeb; border: 1px solid #e4e4e4; height: 20%; position: absolute; top: 40%; width: 100%; z-index: 1; } @media only screen and (min-width: 992px) { .apps-window .line { height: 30%; } } .apps-window .images { align-items: center; display: flex; flex-direction: column; position: relative; z-index: 2; } @media only screen and (min-width: 992px) { .apps-window .images { flex-direction: row; } } .apps-window .buttons { display: flex; margin-top: 20px; flex-direction: column; align-items: center; } @media only screen and (min-width: 992px) { .apps-window .buttons { margin-top: 0; flex-direction: row; justify-content: space-between; } } .apps-window .buttons .btn-orange { background-color: #f6704d; } .apps-window .buttons .btn-orange:hover { background-color: #ff6a49; } .apps-window .buttons .btn { padding: 10px 16px; min-width: 153px; font-size: 1.5rem; border-radius: 4px; color: #fff; text-align: center; line-height: 16px; letter-spacing: 1.37px; font-weight: 600; } .apps-window .buttons a + a { margin-top: 10px; } @media only screen and (min-width: 992px) { .apps-window .buttons a + a { margin-top: 0; } } .apps-window .buttons img { padding: 0; max-width: 160px; width: 100%; } @media only screen and (min-width: 992px) { .apps-window .buttons img { max-width: 133px; } } .setup-window .progress { align-items: flex-start; background-color: #ebebeb; display: flex; flex-direction: column; margin-top: 2rem; padding: 2.4rem 3.6rem; } .setup-window .download { margin-top: 3rem; } .setup-window .primary.add { height: 3.6rem; margin-top: 1.5rem; padding: 0; text-align: center; width: 14rem; } @media only screen and (min-width: 992px) { .setup-window .primary.add { margin-top: 0; } } .setup-window a.primary { align-items: center; display: flex; justify-content: center; } .setup-window .section-bottom { padding: 2.4rem 0 2.4rem 3.6rem; position: relative; } .setup-window .section-bottom:last-child { border: 0; } .setup-window .last-section { align-items: flex-start; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem 0 2.4rem 3.6rem; position: relative; } @media only screen and (min-width: 992px) { .setup-window .last-section { align-items: center; flex-direction: row; } } .setup-window .count, .setup-window .check { font-size: 1.4rem; left: 1rem; position: absolute; top: 2.8rem; } .setup-window .count { align-items: center; background: #488ed8; border-radius: 5rem; color: #fff; display: flex; height: 18px; justify-content: center; text-align: center; width: 18px; } .setup-window .check { color: #488ed8; } .setup-window .done { font-size: 1.6rem; margin-top: 10px; text-align: left; width: 14rem; } @media only screen and (min-width: 992px) { .setup-window .done { margin-top: 0; text-align: center; } } .setup-window p { color: rgba(0, 0, 0, 0.6); font-size: 1.8rem; } .setup-window p span { font-weight: bold; } .setup-window .description { color: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; font-size: 1.4rem; justify-content: space-between; line-height: 1.9rem; padding-bottom: 1.6rem; } @media only screen and (min-width: 992px) { .setup-window .description { flex-direction: row; } } .setup-window .description span { font-size: 1.4rem; line-height: 1.9rem; } .setup-window .rc-progress-line { border: 1px solid #488ed8; border-radius: 10px; height: 9px; max-width: 100%; } .setup-window .opacity p, .setup-window .opacity span:not(:last-child) { opacity: .5; } .setup-window .full span { font-size: 1.5rem; line-height: 1.9rem; width: 100%; } @media only screen and (min-width: 992px) { .setup-window .full span { width: 60%; } } .setup-window progress { width: 100%; } .info { line-height: 20px !important; } .info span { font-weight: normal; font-size: 14px !important; color: #474747; } .integrations .section-bottom { margin-bottom: 0; } .integrations .settings-table td { line-height: 1.8rem; } .integrations .settings-table tr { height: 8.5rem; } .integrations .settings-table tbody { border-top: 0; } .integrations .button-add { height: 9.8rem; margin-bottom: 5.6rem; } .integrations .button-add .download { width: 19.2rem; } .integrations .message { color: rgba(0, 0, 0, 0.6); font-size: 1.8rem; } .integrations .link-to a { color: #f6704d; font-size: 1.4rem; font-weight: bold; line-height: 1.9rem; } .dropdown { display: inline-block; } .dropdown .dropdown__content { display: none; position: absolute; } .dropdown.dropdown--active .dropdown__content { display: block; } .notification { background-color: #fff; } .notification-body { color: #c77a00; background-color: #fffaf2; border: 1px solid #ffd799; font-size: 16px; padding: 15px 30px 12px; } .readers-stats { padding: 24px 0; text-align: center; } .readers-stats li { display: inline-block; margin-bottom: 0; } .readers-stats li:not(:last-child):after { content: '\2219'; display: inline-block; margin: 0 .5rem; } .readers-stats li span.count { font-weight: bold; } .slick-list { transition: height 0.75s ease-out; width: 90%; margin: auto; } .carousel-arrow { margin-top: -22px; position: absolute; top: 50%; } .carousel-arrow button { position: relative; border-radius: 0; width: 17px; height: 18px; z-index: 10; cursor: pointer; border: solid rgba(0, 0, 0, 0.6); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } .arrow-next { right: -10px; } .arrow-next button { left: -4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .arrow-next:before { content: ''; } .arrow-prev { left: -10px; } .arrow-prev button { right: -4px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .arrow-prev:before { content: ''; } .carousel-dots-wrapper { width: 100%; margin: 10px auto; text-align: center; display: flex; align-items: center; justify-content: center; } .carousel-dots-wrapper .carousel-dots { bottom: -5px; display: flex; align-items: center; } .carousel-dots-wrapper .carousel-dots button { cursor: pointer; margin: 0 4px; width: 4px; height: 4px; background-color: #21262e; opacity: .8; padding: 0; border-radius: 100%; } .carousel-dots-wrapper .carousel-dots button.active { width: 8px; height: 8px; } .small .card:not(.focus) .carousel, .small .card:not(.focus) .carousel-item { min-height: 38px; justify-content: start; } .carousel { position: relative; } .carousel p { margin: 0; } .carousel img { height: auto; width: auto; } .carousel-frame { transition: height 0.75s ease-out; overflow-x: scroll; padding: 0; scroll-snap-type: x mandatory; scrollbar-width: none; white-space: nowrap; -ms-overflow-style: none; } .carousel-frame::-webkit-scrollbar { display: none; } .carousel-item { scroll-snap-align: start; vertical-align: top; white-space: initial; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .carousel-item.single > p { margin-bottom: 15px; } .carousel-item > * { width: 100%; } .carousel-item > * audio, .carousel-item > * video { width: 100%; margin-bottom: 2rem; } .carousel-progress { text-align: center; } .dialog-image-carousel > div > div, .dialog-image-carousel .carousel img { max-height: calc(100vh - 96px); } .dialog-image-carousel .carousel-arrow > div { background: white; padding: 10px; border-radius: 100%; } .dialog-image-carousel .carousel-arrow.arrow-next, .dialog-image-carousel .carousel-arrow.arrow-prev { position: fixed; top: 50%; background-color: #ffffff; padding: 10px; border-radius: 100%; } .dialog-image-carousel .carousel-arrow.arrow-prev { left: 20%; } .dialog-image-carousel .carousel-arrow.arrow-next { right: 20%; } .view-mode { font-size: 1.2rem; } .with-schedule { flex-direction: row !important; align-items: center !important; } .publish-modal-container { display: flex; justify-content: center; align-items: center; } .modal-body { padding: 30px 20px; width: 500px; background: #FFFFFF; display: flex; flex-direction: column; } .modal-body button { align-self: flex-end; } .publish-modal-body-label { font-size: 1.2rem; } section.list-mix { margin-left: auto; margin-right: auto; } @media only screen and (min-width: 550px) { section.list-mix { max-width: 550px; } } @media only screen and (min-width: 768px) { section.list-mix { min-width: 450px; } } section.list-mix article p { word-break: break-word; } .card { background-color: #fff; border-bottom: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4; margin: 16px auto; max-width: 550px; outline: 8px solid #ebebeb; overflow: visible; padding: 2rem; position: relative; transition: outline-color 0.3s linear, opacity 0.3s linear; width: 100%; } .card::before, .card::after { content: ' '; display: table; } .card::after { clear: both; } .card:first-of-type { margin-top: 0; } @media only screen and (min-width: 992px) { .card:first-of-type { margin-top: 16px; } } .card.state-message { padding-bottom: 0; } .card:not(.edit) .validation-error, .card:not(.edit) .validation-message, .card:not(.edit) .validation-error { margin-bottom: 5px; margin-top: 5px; } .card:not(.edit) .validation-error > span, .card:not(.edit) .validation-message > span, .card:not(.edit) .validation-error > span { float: left; } .card:not(.edit) .link-to-story { display: inline-block; line-height: 2.1rem; font-weight: bold; color: #588BC2; cursor: pointer; font-size: 1.3rem; } .card:not(.edit) .link-to-story:after { content: ''; border-right: 1px solid #e4e4e4; margin: 0 10px; height: 13px; } .card:not(.edit) .intro { border-left: 1px solid #e4e4e4; padding: 0 10px; margin: 0 10px; display: inline-block; } @media only screen and (max-width: 767px) { .card:not(.edit) .intro { max-width: 65%; } } .card:not(.edit) .intro span + span:before { content: '\2022'; padding: 5px; } .card:not(.edit) .main .errors .validation-error > span, .card:not(.edit) .main .errors .validation-message > span, .card:not(.edit) .main .errors .validation-error > span, .card:not(.edit) header .errors .validation-error > span, .card:not(.edit) header .errors .validation-message > span, .card:not(.edit) header .errors .validation-error > span { float: right; } .card:not(.edit) blockquote .validation-error, .card:not(.edit) blockquote .validation-message, .card:not(.edit) blockquote .validation-error { margin-bottom: 3px; margin-top: 3px; } .card:not(.edit) blockquote .validation-error > span, .card:not(.edit) blockquote .validation-message > span, .card:not(.edit) blockquote .validation-error > span { float: left; } .card .saved { background-color: rgba(135, 179, 37, 0.6); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .card .saved i { color: #fff; font-size: inherit; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .card .bottom-bar .first-row .author-edit-container { display: flex; flex-direction: column; align-items: flex-start; } .card .bottom-bar .first-row .author-edit-container div { display: flex; max-width: 100%; } .card .bottom-bar .first-row .author-edit-container .truncated-author { max-width: 93%; } .card .bottom-bar .first-row .author-edit-container .material-icons { flex: 1; cursor: pointer; } .card .copied { background-color: rgba(255, 255, 255, 0.9); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .card .copied .wrapper-content { display: flex; flex-direction: column; align-self: center; color: #588BC2; font-size: inherit; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .card .copied .wrapper-content .feedback-text { color: inherit; height: 18px; line-height: 18px; font-size: 14px; } @media only screen and (min-width: 550px) { .card { border: 1px solid #e4e4e4; } } @media only screen and (min-width: 768px) { .card { min-width: 450px; } } .card:hover .handle { opacity: 1; } .card.is-cut { background: #e4e4e4; padding: 1.9rem 2rem; } .card .wrapper-is-cut { display: flex; flex-direction: column; } .card .wrapper-is-cut .wrapper-is-cut-content { align-self: center; display: flex; align-items: center; } .card .wrapper-is-cut .wrapper-is-cut-content .feedback-text { height: 18px; color: rgba(0, 0, 0, 0.6); font-size: 14px; line-height: 18px; text-align: center; } .card .wrapper-is-cut .wrapper-is-cut-content button { font-size: 14px; font-weight: bold; padding: 0 0.5rem; } .card .item-display-content { position: relative; } .card header, .card footer { margin: -2rem; padding: 1.4rem 2rem; } .card header { border-bottom: 1px dashed #e4e4e4; margin-bottom: 2rem; position: relative; } @media only screen and (max-width: 767px) { .card header { padding-top: 20px; } } .card header h3 span { display: inline-block; font-size: 1.7rem; line-height: 1.7rem; font-weight: 700; } .card header h3 ~ .button { top: 1rem; } .card header .wrapper-controls { display: flex; align-items: center; justify-content: center; position: absolute; right: 1rem; top: 0.5rem; } @media only screen and (max-width: 767px) { .card header .wrapper-controls { top: 1rem; } } .card header .wrapper-controls button:hover .button { color: inherit; } .card header .wrapper-controls .button { padding: 0; font-weight: inherit; font-size: inherit; letter-spacing: inherit; color: rgba(0, 0, 0, 0.6); } .card header .wrapper-controls .button span { vertical-align: middle; } .card header .wrapper-controls .dropdown { border-left: 1px solid #e4e4e4; border-radius: 0; padding: 3px 0 0 7px; margin-left: 7px; } .card header .wrapper-controls .dropdown button { padding: .3rem; } .card header .wrapper-controls .dropdown button:hover .material-icons { color: inherit; } .card header .wrapper-controls .dropdown .dropdown__trigger { cursor: pointer; } .card header .wrapper-controls .dropdown .dropdown__trigger .material-icons { font-size: 2.4rem; color: rgba(0, 0, 0, 0.38); } .card header .wrapper-controls .dropdown .dropdown__trigger .dropdown-trigger-icon { color: #8c8c8c; font-size: 16px; height: 16px; line-height: 16px; text-align: right; transition: color 0.3s linear; width: 16px; } .card header .wrapper-controls .dropdown .dropdown__trigger .dropdown-trigger-icon:hover { color: #2367ae; } .card header .wrapper-controls .dropdown .dropdown__content { background-color: #fff; border: 1px solid #e4e4e4; border-top: 0; padding: 10px 0; position: absolute; right: -6px; top: 33px; width: 130px; z-index: 11; } .card header .wrapper-controls .dropdown .dropdown__content ul li { color: rgba(0, 0, 0, 0.6); font-size: 14px; font-weight: 300; line-height: 22px; margin: 0; padding: 3px 15px; text-align: left; transition: none; } .card header .wrapper-controls .dropdown .dropdown__content ul li:hover { background-color: #f5faff; } .card header h3, .card header h3 span, .card header .index { display: inline-block; font-size: 1.4rem; font-weight: 700; } .card header h3, .card header .index { color: #8f8f8f; } .card header p, .card header h6 { margin-top: 1rem; display: flex; flex-direction: column; } .card header p span, .card header h6 span { align-self: flex-end; } .card h6 p[contenteditable] { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; } .card footer { border-top: 1px dashed #e4e4e4; margin-top: 2rem; padding: 0.6rem 2rem; } .card footer .bottom-bar { display: flex; flex-direction: row; margin-bottom: 1rem; width: 100%; justify-content: space-between; float: none; } @media only screen and (min-width: 486px) { .card footer .bottom-bar { flex-direction: row; } } @media only screen and (max-width: 767px) { .card footer .bottom-bar { flex-direction: column-reverse; } } .card footer .bottom-bar .first-row { display: flex; flex-direction: column; flex: 1 50%; max-width: 65%; overflow: hidden; } .card footer .bottom-bar .wrapper-date { align-items: center; display: flex; flex: 1 100%; flex-direction: row; flex-wrap: wrap; overflow: hidden; } @media only screen and (min-width: 768px) { .card footer .bottom-bar .wrapper-date { padding-left: 5px; } } .card footer .bottom-bar .wrapper-date .created-by-label { font-weight: bold; margin-right: 3px; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card footer .bottom-bar .button-group { flex-direction: column; display: flex; align-items: flex-start; justify-content: center; } @media only screen and (min-width: 768px) { .card footer .bottom-bar .button-group { align-items: flex-end; } } @media only screen and (max-width: 767px) { .card footer .bottom-bar .button-group { align-items: flex-end; } } .card footer .bottom-bar .button-group > * { float: right; } .card footer.state-message { padding: 0; padding-top: 1.5px; } .card footer.state-message::before, .card footer.state-message::after { content: ' '; display: table; } .card footer.state-message::after { clear: both; } .card footer.state-message + div .comments-block { padding-bottom: 20px; } .card footer.state-message .no-connection-message { background-color: #ff6a49; color: #fff; height: 40px; margin-top: 0; padding: 7px 13px; } .card footer.state-message .no-connection-message i, .card footer.state-message .no-connection-message span, .card footer.state-message .no-connection-message button { color: inherit; } .card footer.state-message .no-connection-message button { border: 1px solid #fff; border-radius: 8px; height: 26px; margin-left: 20px; vertical-align: middle; } .card footer.state-message .no-connection-message > span { float: right; font-size: 14px; line-height: 26px; vertical-align: middle; } .card footer.state-message .unsaved-message { background-color: #999; color: #fff; height: 40px; margin-top: 0; padding: 7px 13px; color: inherit; background-color: transparent; } .card footer.state-message .unsaved-message i, .card footer.state-message .unsaved-message span, .card footer.state-message .unsaved-message button { color: inherit; } .card footer.state-message .unsaved-message button { border: 1px solid #fff; border-radius: 8px; height: 26px; margin-left: 20px; vertical-align: middle; } .card footer.state-message .unsaved-message > span { float: right; font-size: 14px; line-height: 26px; vertical-align: middle; } .card footer button:last-of-type { float: right; line-height: 1rem; } .card .main { position: relative; } .card .main h2 { margin-top: -4px; } .card .main h1 { margin-top: 5px; } .card .main p .show-btn { display: flex; justify-content: flex-end; } .card .main p .show-btn .material-icons { display: block; } .card .main.social { display: flex; flex-direction: column-reverse; } .card h2, .card .h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8f8f8f; font-size: 1.6rem; font-weight: 700; } .card a.h2 { transition: color 0.3s linear; color: inherit; font-size: inherit; letter-spacing: 0.038rem; font-weight: inherit; white-space: inherit; } .card a.h2 span { font-weight: 700; } .card a.h2 .material-icons { margin-left: 5px; } .card a.h2:hover { color: #2367ae; } .card figure { cursor: pointer; text-align: left; padding-top: 0.8rem; } .card figure + div h2 { max-width: 315px; } .card img, .card video { vertical-align: middle; width: auto; } .card video { max-height: 300px; width: 100%; background: #101010; } .card img { height: auto; width: auto; max-height: 200px; max-width: 95%; } .card:not(.edit) .article { display: flex; flex-wrap: wrap; } .card:not(.edit) .article > div { width: 100%; } .card:not(.edit) .article figure, .card:not(.edit) .article figure + div { flex: 1 50%; width: 50%; } .card:not(.edit) .article figure { margin-right: 2rem; max-width: 200px; min-width: 100px; } .card:not(.edit) .article figure div { background: transparent center center no-repeat; background-size: cover; height: 100%; overflow: hidden; } @media print { .card:not(.edit) .article figure div { display: none; } } .card:not(.edit) .article figure img { display: none; } @media print { .card:not(.edit) .article figure img { display: inline; } } @media only screen and (max-width: 767px) { .card:not(.edit) .article figure { max-width: 130px; margin-right: 10px; } } .card:not(.edit) .article figure div { height: 200px; } .card .article-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; max-width: 500px; } @media only screen and (max-width: 767px) { .card .article-url { max-width: 300px; } } .card .social address { font-size: 1.6rem; padding-bottom: 1.8rem; } .card .social address, .card .social address em { font-style: normal; } .card .social address em { display: flex; } .card .social address .author-image { float: left; margin-right: 1.6rem; } .card .social address .author-image img { height: auto; width: 100%; max-width: none; } .card .social strong { display: inline-block; font-weight: 700; margin-top: -5px; } .card .social b { margin: 0 4px 0 5px; } .card .social b, .card .social a { vertical-align: middle; } .card .social em, .card .social a { color: #8f8f8f; text-decoration: none; } .card .social em, .card .social strong { height: 23px; line-height: 23px; } .card .social a { font-size: inherit; transition: color 0.3s linear; } .card .social a .material-icons { font-size: 1.2rem; font-weight: 500; line-height: 23px; margin-left: 3px; vertical-align: middle; } .card .social a:hover > span { color: #2367ae; } .card .social a > span { line-height: inherit; } .card .social .quote-date-created { position: absolute; top: 0; right: 0; line-height: 2rem; } .card .social [contenteditable] { padding: 0; width: auto; word-wrap: break-word; } .card .ticker ~ h3 { display: block; } @media only screen and (min-width: 345px) { .card .ticker ~ h3 { display: inline; } } .card .arrows { position: absolute; text-align: center; top: 3px; width: calc(100% - 4rem); } @media only screen and (max-width: 767px) { .card .arrows { top: -12px; } } .card .arrows button { display: inline-block; } @media only screen and (max-width: 767px) { .card .arrows button { padding: 0; } } @media only screen and (max-width: 767px) { .card .arrows span.material-icons { font-size: 40px; } } @media only screen and (max-width: 767px) { .card .arrows span:not(.material-icons) { display: none; } } .card:first-of-type .move-up, .card:last-of-type .move-down { display: none; } .card .image figure { margin-bottom: 2rem; text-align: center; } .card.dragged { background: #e4e4e4; } .card.dragged > div { visibility: hidden; } .card .audio audio { width: 100%; } button.absolute-btn { position: fixed; top: 10%; right: 10%; background: #000; } button.absolute-btn .material-icons { color: #fff; } .card.edit { outline-color: #dae8f7; position: relative; z-index: 5; max-width: 550px; padding-top: 0px; } .card.edit.error { outline-color: #ff6a49; } .card.edit header { border-bottom-style: solid; padding-bottom: 1.7rem; } .card.edit .article { flex-direction: column; display: flex; flex-wrap: wrap; } .card.edit figure img + div { display: none; } .card.edit .Select-control { display: flex; align-items: center; } .card.edit .Select-control .Select-multi-value-wrapper { display: flex; flex: 1; max-width: 26vw; } .card.edit .Select-control .Select-multi-value-wrapper .Select-input { width: 5px; } .card.edit .Select-control .Select-clear-zone { align-self: baseline; } .card.edit .Select-control .Select-clear-zone .Select-clear { color: #b8b8b8; margin-right: 10px; font-size: 22px; } .card.edit .Select-control .Select-clear-zone .Select-clear:hover { color: #666666; } .card.edit .social em, .card.edit .social strong, .card.edit .social em > span, .card.edit .social b, .card.edit .social a { font-size: 1.6rem; font-style: normal; height: 23px; line-height: 23px; vertical-align: baseline; } .card.edit .social .author-info, .card.edit .social .author-info-link { display: flex; } .card.edit .social .author-info { align-items: center; padding: 1rem 1rem 0 0; } .card.edit .social .author-info-link { flex-direction: column; } .card.edit .social .author-info img { max-height: 45px; margin-right: 1.5rem; } .card.edit .p { font-size: 1.6rem; } .card.edit .h2 { color: rgba(0, 0, 0, 0.6); } .card.edit .card-footer { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .card.edit .card-footer p { margin: 0 2rem; } .card.edit .overlay { background-color: rgba(255, 255, 255, 0.85); bottom: 0; height: 100%; z-index: 10000; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .card.edit .overlay p { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 2rem; font-weight: 700; height: 80px; line-height: 40px; margin: -40px 0 0; position: absolute; text-align: center; top: 50%; width: 100%; } .card.edit .overlay p .material-icons { font-size: 4rem; } .card.edit .card-state-message, .card.edit .card-state-error { font-size: 12px; margin-top: 5px; } .card.edit .card-state-error { color: #ff6a49; } .card.edit .image figure div[style] { height: 100%; } .card.edit .messages { margin: 2rem 0; } .card.edit.centered { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; max-height: 80%; overflow-y: auto; } .card.edit .input-button { margin: auto; letter-spacing: .127rem; border-radius: 4px; } .card.edit .input-button--right { margin-right: 0; } .card.edit .input-button.right { margin-right: 0; } .card.edit .abstract { font-size: 1.4rem; } .small .card:not(.focus):not(.edit) { height: 50px; position: relative; } .small .card:not(.focus):not(.edit) > div { height: 48px; } .small .card:not(.focus):not(.edit) .comments-block { display: none; } .small .card:not(.focus):not(.edit) div.close-button { height: auto; position: absolute; top: 10px; right: 3px; } .small .card:not(.focus):not(.edit) div.close-button button { display: block; } .small .card:not(.focus):not(.edit) .ticker, .small .card:not(.focus):not(.edit) .index { margin-right: 5px; } .small .card:not(.focus):not(.edit) .ticker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 107px; } .small .card:not(.focus):not(.edit) header, .small .card:not(.focus):not(.edit) .main { border: 0; height: 48px; position: static; } .small .card:not(.focus):not(.edit) header { border-right: 1px solid #e4e4e4; margin-bottom: 0; margin-right: 0; overflow: hidden; text-overflow: ellipsis; width: 10.7rem; } .small .card:not(.focus):not(.edit) header p, .small .card:not(.focus):not(.edit) header h6 { display: none; } .small .card:not(.focus):not(.edit) .ticker ~ h3 { display: none; } .small .card:not(.focus):not(.edit) .info-text { display: none; } .small .card:not(.focus):not(.edit) .main { left: 12.7rem; pointer-events: none; position: absolute; top: 0; width: calc(100% - 12.7rem); overflow: hidden; } .small .card:not(.focus):not(.edit) .main > div { width: 100%; } .small .card:not(.focus):not(.edit) .main * { margin: 0; padding: 0; } .small .card:not(.focus):not(.edit) .main h6 p { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .small .card:not(.focus):not(.edit) .main:not(.image) img, .small .card:not(.focus):not(.edit) .main:not(.image) figure, .small .card:not(.focus):not(.edit) .main:not(.image) .author-image { display: none; } .small .card:not(.focus):not(.edit) .main .quote-date-created { display: none; } .small .card:not(.focus):not(.edit) footer, .small .card:not(.focus):not(.edit) .arrows, .small .card:not(.focus):not(.edit) .messages { display: none; } .small .card:not(.focus):not(.edit) .button, .small .card:not(.focus):not(.edit) button:not(.only-touch), .small .card:not(.focus):not(.edit) .article div > *:not(h6), .small .card:not(.focus):not(.edit) .image p { display: none; } .small .card:not(.focus):not(.edit) .article h6, .small .card:not(.focus):not(.edit) .text p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 48px; width: calc(100% - 2rem); color: rgba(0, 0, 0, 0.87); font-weight: 600; } .small .card:not(.focus):not(.edit) .image figure { display: inline-block; margin: 5px 0; } .small .card:not(.focus):not(.edit) .image img { max-height: 38px; width: auto; } .small .card:not(.focus):not(.edit) .social { overflow: hidden; padding: 5px 2rem 5px 0; text-overflow: ellipsis; white-space: nowrap; display: flex; justify-content: center; } .small .card:not(.focus):not(.edit) .social * { white-space: nowrap; display: flex; align-items: center; } .small .card:not(.focus):not(.edit) .social p { display: block; max-width: 133px; overflow: hidden; text-overflow: ellipsis; } .small .card:not(.focus):not(.edit) .social > p { display: none; } .small .card:not(.focus):not(.edit) .social .clearfix { clear: none; } .small .card:not(.focus):not(.edit) .social .clearfix::before, .small .card:not(.focus):not(.edit) .social .clearfix::after { display: none; } .small .card:not(.focus):not(.edit) .social em a, .small .card:not(.focus):not(.edit) .social em b, .small .card:not(.focus):not(.edit) .social br, .small .card:not(.focus):not(.edit) .social strong { display: none; } .small .card:not(.focus):not(.edit) .social span[name="quotePersonHandle"] > span { margin-right: .5rem; } .small .card:not(.focus):not(.edit) .social address a { padding: 0 1rem; } .small .card:not(.focus):not(.edit) .slick-arrow { display: none; } .list-mix.card { opacity: 0.8; pointer-events: none; } .list-mix.card .anmtn-show-and-hide { display: none; } .list-mix .card .ticker, .list-mix .card .index, .list-mix.card .ticker, .list-mix.card .index { margin-right: 5px; } .list-mix .card .index, .list-mix.card .index { border: 1px solid #2367ae; border-radius: 50%; color: #2367ae; height: 18px; line-height: 16px; text-align: center; width: 18px; } .list-mix .card .index.over99, .list-mix.card .index.over99 { font-size: 80%; } .list-mix .card .ticker, .list-mix.card .ticker { color: #2367ae; font-size: 14px; font-weight: bold; height: 18px; line-height: 18px; padding-right: 10px; width: 67px; } .list-mix .card h3, .list-mix.card h3 { line-height: 8px; margin-left: 8px; } .list-mix .card .message-error, .list-mix.card .message-error { background: transparent; color: #d0021b; top: 50px; left: 15px; } .card-wrapper > p { text-align: center; } .card-wrapper .create-card-panel input, .card-wrapper .create-card-panel .form-group[contenteditable='true'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-wrapper input, .card-wrapper .form-group[contenteditable='true'] { max-height: 520px; min-width: 120px; max-width: 100%; } .card-wrapper input.disable-height, .card-wrapper .disable-height.form-group[contenteditable='true'] { max-height: none; } .card-wrapper .select-sort-comment { max-width: 250px; } .card-wrapper .select-sort-comment > div { border-radius: 10px; width: 100%; } .card-wrapper .select-sort-comment .input-select { font-size: 1.4rem; line-height: 1.6rem; padding: 15px 16px; text-align: left; } .card-wrapper .story-comments { max-width: 550px; margin: 15px auto; } .card-wrapper .story-comments .comment-section { padding: 15px 15px 0; border-radius: 1px; background: #fff; margin-bottom: 20px; border: 1px solid transparent; } .card-wrapper .story-comments .comment-section:hover { border: 1px solid #C4C4C4; } .card-wrapper .loading-dots:after { content: ' .'; animation: dots 0.6s steps(5, end) infinite; } @keyframes dots { 0%, 20% { color: rgba(0, 0, 0, 0); text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0); } 40% { color: rgba(0, 0, 0, 0.6); text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0); } 60% { text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0.6), 0.5em 0 0 rgba(0, 0, 0, 0); } 80%, 100% { text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0.6), 0.5em 0 0 rgba(0, 0, 0, 0.6); } } .col-cards.empty { position: relative; min-height: 227px; } .empty-container { position: relative; flex-basis: calc(60% - 240px); flex-grow: 1; flex-shrink: 1; } .empty-or-unselected, .chats .placeholder .arrow-wrapper { height: 227px; left: 50%; margin: 0 auto; max-width: 400px; text-align: center; top: 50%; vertical-align: middle; width: 100%; z-index: 1; transform: translate(-50%, -50%); } @media only screen and (min-width: 768px) { .empty-or-unselected, .chats .placeholder .arrow-wrapper { top: 35rem; position: absolute; } } .empty-or-unselected svg, .chats .placeholder .arrow-wrapper svg { float: left; max-height: 150px; padding: 2rem; padding-top: 50px; width: 45%; } .empty-or-unselected #arrow-up, .chats .placeholder .arrow-wrapper #arrow-up { margin-top: -50px; padding-right: 0; padding-top: 0; } .empty-or-unselected p, .chats .placeholder .arrow-wrapper p { float: right; margin: 0; padding: 2rem; width: 55%; } .card-wrapper .empty-or-unselected, .card-wrapper .chats .placeholder .arrow-wrapper, .chats .placeholder .card-wrapper .arrow-wrapper { position: relative; top: 0; left: 0; transform: translate(0%, 0%); margin-top: 50px; } .no-match-filter { margin-top: 30%; text-align: center; width: 100%; font-size: 2rem; font-weight: 600; line-height: 24px; } .scroll-to-top { z-index: 11; background: #488ED8; font-size: 1.2rem; position: fixed; bottom: 100px; right: 25px; color: white; width: 50px; height: 50px; border-radius: 100%; transition: all ease-in 0.2s; } .scroll-to-top:hover { box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.1); } .scroll-to-top .material-icons { font-size: 4rem; line-height: 50px; } .user-select-popup-container { border-radius: 4px; padding: 20px 26px 20px 20px; background: #ffffff; max-width: 400px; width: 400px; } .user-select-popup-container .Select-control { display: flex; align-items: center; } .user-select-popup-container .Select-control .Select-multi-value-wrapper { display: flex; flex: 1; align-self: end; max-width: 280px; } .user-select-popup-container .Select-control .Select-multi-value-wrapper .Select-input { width: 5px; position: absolute; bottom: 6px; left: -3px; } .user-select-popup-container .Select-clear-zone { align-self: baseline; margin-right: 0; margin-left: auto; } .user-select-popup-container .Select-clear-zone .Select-clear { color: #b8b8b8; margin-right: 10px; font-size: 22px; } .user-select-popup-container .Select-clear-zone .Select-clear:hover { color: #666666; } .user-select-popup-container .Select-clear-zone + .Select-arrow-zone { margin-left: 0; } .user-select-popup-container .Select-arrow-zone { margin-left: auto; } .user-select-popup-container .popup-btns-container { display: flex; justify-content: flex-end; padding: 20px 0 0 0; } .user-select-popup-container .popup-btns-container .popup-cancel-button { margin-right: 28px; color: #B8B8B8; font-style: normal; font-weight: normal; font-size: 15px; line-height: 19px; } .user-select-popup-container .popup-btns-container .popup-cancel-button:hover { color: #000000; } .user-select-popup-container .popup-btns-container .popup-cancel-button:focus { outline: none; border: none; } .col-channels { height: 100vh; min-height: 648px; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .col-channels.collapsed { max-height: 62px; min-height: initial; overflow: hidden; } @media only screen and (min-width: 992px) { .col-channels.collapsed { max-height: none; overflow-y: scroll; } } .col-channels.collapsed footer { display: none; } @media only screen and (min-width: 992px) { .col-channels.collapsed footer { display: block; } } .col-channels .count { background: #488ed8; border-radius: 8px; color: #fff; font-weight: bold; height: 23px; left: 10rem; position: absolute; text-align: center; width: 21px; } .col-channels .hidden-md { color: #fff; font-size: 3.5rem; position: absolute; right: 2rem; top: 2rem; } .col-channels .header .dropdown { display: none; position: absolute; top: 50%; right: 2rem; z-index: 1; transform: translateY(-50%); } .col-channels .header .dropdown .dropdown--handler { border-radius: 50%; color: #fff; padding: 0.5rem; line-height: 1.5rem; cursor: pointer; margin: 0; } .col-channels .header .dropdown .dropdown--content { background-color: #fff; padding: 16px 0; position: absolute; right: -10px; width: 210px; border-radius: 0.4rem; } .col-channels .header .dropdown .dropdown--content li { padding: 0 8px 0 16px; margin: 0; } .col-channels .header .dropdown .dropdown--content li.separator { margin: 10px 0; height: 1px; border-bottom: 1px solid #D3D3D3; } .col-channels .header .dropdown .dropdown--content li.name { opacity: 0.6; color: #2A2A2A; font-size: 1.45rem; font-weight: 300; letter-spacing: 1px; line-height: 18px; padding-bottom: 10px; } .col-channels .header .dropdown .dropdown--content li a, .col-channels .header .dropdown .dropdown--content li span { color: #2A2A2A; margin: 0; padding: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-align: left; cursor: pointer; } .col-channels .header .dropdown .dropdown--content li a:hover, .col-channels .header .dropdown .dropdown--content li span:hover { background-color: transparent; } .col-channels .header .dropdown .dropdown--content li.subname.link-to-org { font-size: 14px; text-decoration: underline; } .col-channels .header .dropdown .dropdown--content li.subname.link-to-org.disabled a, .col-channels .header .dropdown .dropdown--content li.subname.link-to-org.disabled span { user-select: none; color: #e2e2e2; cursor: not-allowed; } .col-channels .header .dropdown .dropdown--content li.channel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; justify-content: space-between; align-items: center; height: 30px; } .col-channels .header .dropdown .dropdown--content li.channel:hover { background-color: #E5E5E5; } .col-channels .header .dropdown .dropdown--content li.channel a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; justify-content: flex-end; width: 100%; } @media only screen and (min-width: 992px) { .col-channels .header { padding: 2rem 0; position: relative; } .col-channels .header .dropdown { display: block; } } .col-channels .header:hover { background-color: #3C3D51; } .col-channels .header:hover .dropdown .dropdown--handler { background-color: #303040; } .col-channels .header .organisation-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; left: 85px; max-width: 60%; pointer-events: none; position: absolute; top: 15px; } @media only screen and (min-width: 992px) { .col-channels .header .organisation-name { max-width: 85%; padding: 0 2rem; position: static; white-space: normal; } } .col-channels .header .channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; left: 85px; max-width: 60%; pointer-events: none; position: absolute; top: 30px; font-weight: 300; opacity: 0.6; } @media only screen and (min-width: 992px) { .col-channels .header .channel-name { max-width: 85%; padding: 0 2rem; position: static; white-space: normal; } } .col-channels .initials { align-items: center; display: flex; justify-content: center; } .col-channels .name-wrapper { width: 70%; } .col-channels .name, .col-channels .name * { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0; word-wrap: break-word; } .col-channels .name .wrap, .col-channels .name * .wrap { display: inline-block; -ms-word-wrap: break-word; width: 100%; } .col-channels .name .role, .col-channels .name * .role { color: #ffd138; font-weight: 300; font-size: 1.4rem; } .col-channels .settings-table { margin-bottom: 0; margin-top: 0; padding: 0; } .col-channels nav a { color: rgba(255, 255, 255, 0.6); } .col-channels nav a.active { color: #fff; } .col-channels nav.side-nav hr { border-top: 1px solid #38394C; margin: 0 0 6px; } .col-channels .counter { background-color: #588BC2; border-radius: 8px; color: #fff; display: inline-block; font-size: 16px; font-weight: bold; line-height: 19px; margin-left: 12px; padding: 2px 6px; text-align: center; } .col-channels a { display: block; font-size: 1.5rem; line-height: 2.4rem; margin: 0 1rem; padding: 0.7rem 1.2rem; position: relative; white-space: nowrap; } .col-channels a:hover { background: rgba(72, 142, 216, 0.3); } .col-channels a.active { background: rgba(36, 37, 56, 0.3); } .col-channels a.guide { display: flex; } .col-channels a.guide span { align-items: center; display: flex; } .col-channels a .point-number { background-color: #488ed8; border-radius: 1rem; margin-left: 1rem; padding: .2rem .8rem; } .col-channels .logo a:hover, .col-channels .user-name a:hover, .col-channels footer a:hover { background: transparent; } .col-channels .logo.back i.material-icons.hidden-md { position: relative; right: 0; top: 0; font-size: 3rem; padding: 16px; } .col-channels .logo a { display: inline-block; margin: 0; padding: 0; max-width: 100%; } .col-channels .logo svg { height: 34px; margin: 2rem 0 1rem -1rem; padding-left: 2rem; width: auto; max-width: 131px; } .col-channels .user-name { display: flex; } .col-channels .user-name .icon { margin-left: 1rem; margin-right: 1.33333rem; } .col-channels .user-name .icon div { background-size: cover; height: 36px; width: 36px; } .col-channels .link { color: #fff; font-size: 1.4rem; padding: 0; text-decoration: underline; } .col-channels footer { padding: 1rem; padding-bottom: 0; width: 100%; margin-top: auto; margin-bottom: 0.7rem; } .col-channels footer section { background: rgba(0, 0, 0, 0.1); margin-top: 4rem; padding: 1.7rem; } .col-channels footer a { color: #fff; display: inline; font-size: 1.4rem; margin: 0; padding: 0; } .col-channels footer p { font-size: 1.4rem; } .col-channels .user-image.rounded:not(.initials) { padding-top: 3px; } .col-channels .last { margin: 0; } @media only screen and (max-height: 820px) and (min-width: 992px) { .col-channels footer .section { margin-top: 1rem; } .col-channels nav.side-nav li { margin-bottom: 0; } } @media only screen and (max-width: 992px) { .col-channels .logo.back svg { float: right; position: relative; right: -35px; top: -5px; } } @media only screen and (max-width: 1199px) { .col-channels .logo.back i { display: block; } .col-channels .logo i { display: none; } } .col-channels .expanded-links { background-color: transparent; box-shadow: none; margin: 0 1rem; padding: .7rem 0.5rem .7rem 1.2rem; } .col-channels .expanded-links-header { color: rgba(255, 255, 255, 0.6); font-size: 1.5rem; margin: 0; padding: 0; height: 34px; min-height: 0 !important; line-height: 15px; } .col-channels .expanded-links-header > div { margin: 0; } .col-channels .expanded-links-body { display: flex; flex-direction: column; padding: 0 0 0 18px; } .col-channels .expanded-links-body a { margin: 0; } .col-channels .expanded-links .material-icons { color: #fff; } .me-page > div { margin: 0 auto; padding: 0 2rem; } @media only screen and (min-width: 768px) { .me-page > div { padding: 0; } } .me-page aside { float: left; padding: 2rem; width: 14rem; } .me-page aside img { height: 10rem; margin: 0; width: 10rem; } .me-page .user-image { height: 10rem; line-height: 9.5rem; position: relative; transition: color 0.3s linear, background-color 0.3s linear; width: 10rem; } .me-page .user-image span { font-size: 4rem; left: 50%; margin: -2rem; opacity: 0; pointer-events: none; position: absolute; top: 50%; transition: opacity 0.3s linear; } .me-page .user-image .person { font-size: 7rem; margin: -3.5rem; opacity: 1; } .me-page .user-image.edit:hover, .me-page .user-image.drag, .me-page .user-image.processing { background-color: #dae8f7; color: #488ED8; } .me-page .user-image.edit:hover span, .me-page .user-image.drag span, .me-page .user-image.processing span { opacity: 1; } .me-page .user-image.edit:hover .person, .me-page .user-image.drag .person, .me-page .user-image.processing .person { opacity: 0; } .me-page .user-image.edit:hover { cursor: pointer; } .me-page .user-image.drag:hover, .me-page .user-image.processing:hover { cursor: default; } .me-page .profile aside + * { float: left; width: calc(100% - 14rem); } .me-page .profile p { word-wrap: break-word; } .me-page .edit aside { padding: 1.9rem; } .me-page .edit figure { border: 0; margin: 0; } .me-page .wrapper-image, .me-page .edit .wrapper-image, .me-page img, .me-page figure div { background-position: center center; background-size: cover; flex-basis: 10rem; height: 10rem; margin: 0; width: 10rem; } .me-page figure { border: 0; margin: 0; overflow: hidden; } .me-page figure img { display: none; } @media only screen and (min-width: 768px) { .me-page .channels { margin-left: 14rem; } } .me-page .channels a { font-size: inherit; } .me-page .channels td i { color: #8f8f8f; font-size: 1.2rem; margin-left: 0.66667rem; vertical-align: inherit; } .me-page .add-channel, .me-page ul { line-height: 130%; margin: 2rem 0; } .me-page [href='/logout'] { float: right; } .me-page .form-group p { color: rgba(0, 0, 0, 0.6); } .mix { background-color: #fff; border-bottom: 1px solid #e4e4e4; max-width: 100vw; overflow: hidden; padding: 23px 20px 22px; position: relative; width: 100%; } .mix .wrapper-mix { align-items: stretch; display: flex; flex-flow: row wrap; padding: 0 1.5rem; } .mix .wrapper-mix.dragged-over-global { background: linear-gradient(to right, #588BC2 60%, rgba(255, 255, 255, 0) 0%) repeat-x top center/13px 2px, linear-gradient(to right, #588BC2 60%, rgba(255, 255, 255, 0) 0%) repeat-x bottom center/13px 2px, linear-gradient(#588BC2 60%, rgba(255, 255, 255, 0) 0%) repeat-y left center/2px 13px, linear-gradient(#588BC2 60%, rgba(255, 255, 255, 0) 0%) repeat-y right center/2px 13px; } .small .mix .wrapper-mix { padding: 1.5rem; } .mix:first-child .btn-up { display: none; } .mix:last-child .btn-down { display: none; } .mix:not(.edit) { cursor: pointer; } .mix .saved { background-color: rgba(135, 179, 37, 0.6); bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 10; } .mix .saved i { color: #fff; font-size: inherit; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .mix .button, .mix button { transition: opacity 0.3s linear, background-color 0.3s linear, color 0.3s linear; } .mix aside { display: flex; flex-basis: 13.5rem; flex-grow: 0; flex-shrink: 0; order: 1; width: 100%; } .mix aside > div { flex: 0 3.5rem; padding: 0 2rem; } .mix aside > div span { color: #8f8f8f; display: block; font-size: 1.2rem; text-align: center; } .mix .index { border-bottom: 1px solid #d7d7d7; margin-top: -2px; padding-bottom: 3px; transition: border-bottom-color 0.3s linear; } .mix header { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-right: -8px; } .mix header > span { line-height: 1.5rem; } .mix header .card-counter { color: #8c8c8c; line-height: 3.6rem; font-size: 1.2rem; } .mix header .nowrap { white-space: nowrap; } .mix header .card-status { margin: 0 10px 0 0; height: 6px; width: 6px; background-color: #F30505; border-radius: 50%; display: inline-block; } .mix header .card-status.published { background-color: #32D200; } .mix header .header-actions-buttons { top: 8px; } .mix header .header-actions-buttons button { color: #B3B3B3; padding: 10px; } .mix header .header-actions-buttons button.warn:hover { background-color: #FFDADA; } .mix header .header-actions-buttons button.warn:hover .material-icons { color: #F30505; } .mix header .header-actions-buttons button.edit:hover { background-color: #C1E9FF; } .mix header .header-actions-buttons button.edit:hover .material-icons { color: #588BC2; } .mix header .header-actions-buttons button.embed:hover { background-color: #E8E8E8; } .mix header .header-actions-buttons button.embed:hover .material-icons { color: #212121; } .mix header .header-actions-buttons button .material-icons { font-size: 22px; } .mix header .header-actions-buttons button:not(:last-of-type) { margin-right: 5px; } .mix .main { flex: 1 calc(100% - 15.5rem); min-height: 45px; order: 0; word-wrap: break-word; position: relative; } .mix .main p { color: #8f8f8f; font-size: 1.6rem; margin-bottom: 0; transition: color 0.3s linear; } .mix .main .title { color: rgba(0, 0, 0, 0.6); font-size: 1.7rem; font-weight: bold; margin-bottom: 4px; } .mix .main .subtitle { color: rgba(0, 0, 0, 0.6); font-size: 1.5rem; font-weight: 300; } .mix .main .button { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0001) 0%, #fff 30%, #fff 100%); border: 0; opacity: 0; padding-bottom: .5rem; padding-left: 2rem; position: absolute; right: 0; top: 1rem; z-index: 5; } .mix .main header + h1 { margin-top: 0; } .mix .main h2 a { font-size: inherit; } .mix.type-section aside { flex-basis: 3.5rem; margin-right: 0; } .mix h3 { color: #8f8f8f; display: inline-block; font-size: 1.4rem; font-weight: 700; } .mix h1, .mix h1 a, .mix .h1 { color: rgba(0, 0, 0, 0.87); font-size: 1.7rem; line-height: 2.1rem; word-wrap: break-word; } .mix figure { flex: 0 10rem; height: 10rem; margin: 0 auto; } .mix figure div { background: transparent center center no-repeat; background-size: cover; height: 100%; overflow: hidden; } @media print { .mix figure div { display: none; } } .mix figure img { display: none; } @media print { .mix figure img { display: inline; } } .mix figure div { background-size: contain; background-position: top; } .mix header h3 { line-height: 100%; } .mix .flag { margin-right: 2rem; } .small .mix .flag { margin-left: 2px; } .mix button { font-weight: 600; } .mix button.publish { color: #F6704D; } .mix button.publish:hover { background-color: #FFDADA; } .mix button.unpublish:hover { background-color: #C1E9FF; } .mix button.publish, .mix button.unpublish { display: flex; align-items: center; } .mix button.publish:focus, .mix button.unpublish:focus { border-color: transparent; } .mix button.publish span, .mix button.unpublish span { font-size: 1.6rem; font-weight: 400; } .mix button.publish span.material-icons, .mix button.unpublish span.material-icons { font-size: 22px; } .mix footer { align-items: stretch; display: flex; flex: 0 100%; flex-flow: row wrap; justify-content: space-between; margin-top: 12px; order: 2; } .mix footer .footer--action-group { flex-grow: 1; display: flex; } @media only screen and (max-width: 767px) { .mix footer .footer--action-group .material-icons + span { display: none; } } .no-touch .mix footer .footer--action-group.action-group--left { display: none; } .no-touch .mix footer .footer--action-group.action-group--right { justify-content: space-between; align-items: flex-end; width: 100%; } .touch .mix footer .footer--action-group { justify-content: space-around; width: 50%; } @media only screen and (min-width: 768px) { .mix footer .footer--action-group { justify-content: space-around; width: 50%; } } .mix footer button { margin-left: -6px; margin-right: -6px; } .mix footer button span:last-child { white-space: nowrap; } .touch .mix footer button span { display: block; } .no-touch .mix footer button { flex-basis: auto; } .mix footer .info { display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 767px) { .mix footer .info { position: absolute; top: 24px; right: 20px; } } @media only screen and (min-width: 768px) { .mix header button:not(.cta), .mix header .handle:not(.cta), .mix footer button:not(.cta), .mix footer .handle:not(.cta) { opacity: 0; } } .mix header .button span, .mix header button span, .mix header .handle span, .mix footer .button span, .mix footer button span, .mix footer .handle span { font-weight: 600; font-size: 12px; } .mix header .button span.material-icons, .mix header button span.material-icons, .mix header .handle span.material-icons, .mix footer .button span.material-icons, .mix footer button span.material-icons, .mix footer .handle span.material-icons { font-size: 19px; } .mix.active header button, .mix.active header .button, .mix.active footer button, .mix.active footer .button, .mix:hover header button, .mix:hover header .button, .mix:hover footer button, .mix:hover footer .button, .touch .mix header button, .touch .mix header .button, .touch .mix footer button, .touch .mix footer .button { opacity: 1; } .mix.active .handle, .mix:hover .handle, .touch .mix .handle { opacity: 1; } .mix.active .index { border-bottom-color: #bebebe; } .mix.active .main p { color: #646464; } .mix.active, .mix:hover { background-color: rgba(95, 197, 241, 0.15); } .mix:hover .main p { color: #646464; } .small .mix { max-height: 60px; } .small .mix aside { flex-basis: 3.5rem; margin-right: 0; } .small .mix .tags-section { display: none; } .small .mix .wrapper-mix { padding: 0; } .small .mix .main { overflow: hidden; } .small .mix footer, .small .mix .main p { display: none; } .small .mix h1, .small .mix h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .small.editmode .mix { max-height: none; } .mix.dragged { background: #ebebeb; opacity: .5; } .mix.edit { background-color: #fff; display: block; margin-bottom: 80px; padding: 0 2rem 2rem; } @media only screen and (min-width: 768px) { .mix.edit { margin-bottom: 0; } } .mix.edit.state-message { padding-bottom: 0; } .mix.edit.state-message::before, .mix.edit.state-message::after { content: ' '; display: table; } .mix.edit.state-message::after { clear: both; } .mix.edit.state-message .no-connection-message { background-color: #ff6a49; color: #fff; height: 40px; margin-top: 0; padding: 7px 13px; margin-left: -14px; margin-right: -14px; width: calc(100% + 28px); } .mix.edit.state-message .no-connection-message i, .mix.edit.state-message .no-connection-message span, .mix.edit.state-message .no-connection-message button { color: inherit; } .mix.edit.state-message .no-connection-message button { border: 1px solid #fff; border-radius: 8px; height: 26px; margin-left: 20px; vertical-align: middle; } .mix.edit.state-message .no-connection-message > span { float: right; font-size: 14px; line-height: 26px; vertical-align: middle; } .mix.edit.state-message .no-connection-message button { float: right; } .mix.edit header { background-color: #e4eef9; border-bottom: 1px solid #e4e4e4; height: 60px; margin: 0 -2rem 0; width: auto; } .mix.edit form .h1 label { margin-top: -.2rem; } .mix.edit form .h1 > div { padding: .8rem 1.4rem; } .mix.edit form .primary-transparent { float: right; } .mix.edit .card-state-message, .mix.edit .card.edit .card-state-error, .card.edit .mix.edit .card-state-error { margin: 0; font-size: 12px; } .mix.edit .reference-title { padding: 0; margin: 40px 0 12px; line-height: 16px; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.06em; height: 11px; color: #858584; } .mix.edit .preferences-block { margin-bottom: 22px; } .mix.edit .preferences-block .horizontal { padding-top: 10px; } .mix.edit .preferences-block label { color: #474747; } .mix.edit .preferences-block label span { font-size: 16px; } .mix.edit .preferences-block span { padding: 0; } .mix.edit svg { right: 5px; } .mix.edit .buttons-block { display: flex; align-items: center; justify-content: flex-end; } @media only screen and (max-width: 767px) { .mix.edit .buttons-block { flex-direction: column; } } .mix.edit .buttons-block.between-justified { justify-content: space-between; } .mix.edit .buttons-block .anmtn-saving { margin: 0; } .mix.edit .cancel-button { background-color: transparent; color: #B8B8B8; font-size: 1.5rem; line-height: 16px; padding: 10px 20px; cursor: pointer; transition: .3s ease-in; border-radius: 4px; } .mix.edit .cancel-button:hover { color: #8c8c8c; background-color: #e2e2e2; } .mix.edit .connect-button { cursor: pointer; display: flex; align-items: center; color: #588BC2; border-radius: 8px; padding: 10px 0; justify-content: space-between; font-size: 13px; line-height: 16px; letter-spacing: 0.06em; margin: 32px 0 0; width: 100%; } .mix.edit .connect-button:hover { background-color: rgba(72, 142, 216, 0.08); } .mix.edit .connect-button span { max-width: 90%; } .mix.edit .connect-button .material-icons { border-radius: 10px; margin-right: 5px; background-color: #588BC2; color: #fff; padding: 2px; } .mix.edit .alternative-form span { font-size: 16px; } .mix.edit .uploaded-from-label { font-size: 1.4rem; color: #858584; } .mix.edit figure { height: 16rem; margin: 0 auto; width: 16rem; } .mix.edit figure.drag-over .button { line-height: 16rem; width: 100%; } .mix.edit figure.drag-over .button span { color: #fff; } .mix.edit .wrapper-actions { height: 7rem; left: 0; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .mix.edit .wrapper-actions p { margin: 0; } .mix.edit .drag-over .wrapper-actions { height: 100%; margin: 0; top: 0; } .mix.edit .image { position: relative; } .mix.edit .image.disabled .button, .mix.edit .image.disabled button { color: #488ED8; } .mix.edit .wrapper-image { flex: 1 100%; margin: 0; } @media only screen and (min-width: 550px) { .mix.edit .wrapper-image { flex: 1 50%; align-items: center; text-align: center; margin: auto; border: 0; } } @media only screen and (min-width: 992px) { .mix.edit .wrapper-image { margin: 0 auto; } } @media only screen and (min-width: 1200px) { .mix.edit .wrapper-image { margin: 0; } } .mix.edit .wrapper-image figure { width: auto; flex: 1 100%; padding: 0; height: 100%; max-height: 150px; } .mix.edit .wrapper-image figure img { display: block; height: auto; width: 100%; max-height: inherit; vertical-align: middle; margin: auto; } .mix.edit .wrapper-image figure img + div { display: none; } .mix.edit .checkbox-group label img { height: 20px; line-height: 20px; margin-right: 5px; opacity: .5; transition: opacity 0.3s linear; vertical-align: middle; } .mix.edit .checkbox-group label :checked ~ img { opacity: 1; } .mix.edit .checkbox-group label span { margin-right: 20px; } .mix.edit .primary, .mix.edit .primary + p { float: right; } .small .mix.edit button, .small .mix.edit .button { display: block; } .mix.edit .type-select { padding-bottom: 14px; } .mix.edit .subheader.separator { border-bottom: 1px solid #e4e4e4; padding: 1.2rem 2rem; margin: 0 -2rem; } .mix.edit .horizontal { padding-top: 1rem; } .mix.edit .horizontal > label { margin-left: -5px; } .mix.edit .relative { position: relative; } .stories { z-index: 0; } @media only screen and (min-width: 992px) { .stories { max-height: inherit; } } .stories .center { margin-top: 2rem; text-align: center; } .mix.edit header { padding: 2rem; } .mix.edit header, .mixes-header { position: relative; z-index: 1; } .mix.edit header h3, .mixes-header h3 { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; font-size: 1.6rem; font-weight: 500; line-height: 60px; margin: 0; } .mix.edit header .button, .mixes-header .button { position: absolute; right: 2rem; top: 1.8rem; } .mixes-header { background-color: #fff; margin: 0; } .mixes-header .flex-button { display: flex; align-items: center; justify-content: space-between; } .mixes-header .border-line { border-bottom: 1px solid #e4e4e4; } .mixes-header .clearfix::before, .mixes-header .clearfix::after { content: ' '; display: table; } .mixes-header .clearfix::after { clear: both; } .mixes-header .primary, .mixes-header .search { position: absolute; top: 2rem; } .mixes-header .primary .material-icons, .mixes-header .search .material-icons { font-size: 2em; margin: 0; } .mixes-header .primary { left: 2rem; } .mixes-header .search { padding-right: 0; right: 2rem; } .mixes-header .switch-entry-size button span { font-size: 1.7rem; } .mixes-header .switch-entry-size .input-label { max-width: 190px; } .mixes-header-top { margin: 0; padding: 20px; height: 80px; } .mixes-header-bottom { height: 80px; padding: 16px 20px; } @media only screen and (max-width: 767px) { .mixes-header-bottom.flex-button { display: none; } } .mixes-header-title, .mixes-header-button { font-weight: normal; } .mixes-header-title { font-size: 1.8rem; line-height: 1.8rem; color: #43445b; } .mixes-header-button { font-size: 1.6rem; padding: 10px 16px; } .mixes-header-button span { line-height: 1.6rem; } .mixes-header .buttons-block { display: flex; } .mixes-header .mobile-filter { display: none; color: #588BC2; font-size: 16px; margin-right: 18px; } .mixes-header .mobile-filter svg { margin-right: 3px; } @media only screen and (max-width: 767px) { .mixes-header .mobile-filter { display: block; } } .hidden { display: none !important; } .visible-hidden { visibility: hidden !important; } .visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal; } @media only screen and (max-width: 767px) { .hidden-xs { display: none !important; } } @media only screen and (min-width: 768px) { .hidden-sm { display: none !important; } } @media only screen and (min-width: 992px) { .hidden-md { display: none !important; } } @media only screen and (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-sm-block { display: none; } @media only screen and (min-width: 768px) { .visible-sm-block { display: block; } } .visible-md-block { display: none; } @media only screen and (min-width: 992px) { .visible-md-block { display: block; } } .disabled, .disabled button, button[disabled], .disabled .button, .button[disabled], input:disabled, .form-group:disabled[contenteditable='true'], input[disabled], .form-group[disabled][contenteditable='true'], .disabled [role='navigation'] button, [role='navigation'] button[disabled], .disabled [role='navigation'] .button, [role='navigation'] .button[disabled], .disabled .registration-page button, .registration-page button[disabled], .disabled .registration-page .button, .registration-page .button[disabled] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: #e4e4e4; cursor: not-allowed; } .settings-table { margin-bottom: 7rem; margin-top: 1.3rem; } .settings-table .display-flex { align-items: center; display: flex; position: relative; } @media only screen and (max-width: 767px) { .settings-table .display-flex { flex-direction: column; align-items: baseline; } .settings-table .display-flex p { display: none; } } .settings-table .display-flex .calc-width { width: calc(100% - 5rem); position: absolute; left: 65px; } .settings-table .display-flex .text-ellipsis { overflow: hidden; text-overflow: ellipsis; max-width: 150px; } @media only screen and (max-width: 767px) { .settings-table .display-flex .text-ellipsis { width: 85px; } } .settings-table .big-column .pending-flag { white-space: normal; } @media only screen and (max-width: 767px) { .settings-table .big-column .pending-flag { display: none; } } .settings-table .medium-column > div { margin: 0; } .settings-table .medium-column > div > div { height: 40px; } .settings-table .medium-column .pending-flag { text-align: right; margin-left: 5px; font-size: 1.2rem; } .settings-table .medium-column .pending-flag .cta { font-size: 1.2rem; } .settings-table .medium-column .pending-flag .text { display: none; } @media only screen and (min-width: 768px) { .settings-table .medium-column .pending-flag { display: none; } } .settings-table .medium-column .pending-flag .material-icons { display: none; } .settings-table .in-app-image { width: 150px; height: auto; } .settings-table.add { margin-bottom: 0; margin-top: 0; padding-bottom: 0; } .settings-table.reader { margin-top: 0; } .settings-table th { text-align: center; } .settings-table th:first-child { text-align: left; } .settings-table th:nth-child(2) { text-align: left; } .settings-table th .material-icons { font-size: 1.2rem; line-height: 1.6rem; vertical-align: bottom; } .settings-table th.right { text-align: right; } .settings-table tr.invalid { background-color: rgba(245, 121, 89, 0.15); } .settings-table td { line-height: 2.8rem; } .settings-table td:first-child { position: relative; } .settings-table td:nth-child(3), .settings-table td:nth-child(4) { text-align: center; } @media only screen and (min-width: 992px) { .settings-table td:nth-child(3):hover span { visibility: visible; opacity: 1; transition: all .3s; } .settings-table td:nth-child(3) span { visibility: hidden; opacity: 0; transition: all 1.3s; } } .settings-table td:nth-child(3) span { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; } .settings-table td p { bottom: 2rem; margin: 0; } .settings-table td p .show-xs { text-overflow: ellipsis; width: 100%; } .settings-table td p.message { position: static; } @media only screen and (max-width: 767px) { .settings-table td .user-image { margin: 0; } } @media only screen and (max-width: 767px) { .settings-table th, .settings-table td { padding-left: 0; padding-right: 0; } } .settings-table .h2 { color: rgba(0, 0, 0, 0.87); top: 2rem; font-weight: normal; font-size: 1.7rem; line-height: 2rem; } .settings-table .p { color: rgba(0, 0, 0, 0.6); } .settings-table select { min-width: 10rem; } .settings-table .pending-flag { color: rgba(0, 0, 0, 0.6); font-size: 1.4rem; line-height: 2.7rem; } .settings-table .pending-flag .cta { overflow: hidden; } @media only screen and (max-width: 767px) { .settings-table .pending-flag .cta { padding: 0; } } .settings-table .pending-deleted { display: none; } .settings-table .pending-invite td:first-child .h2, .settings-table .pending-invite td:first-child .text { opacity: .5; width: 100%; } .settings-table .pending-invite td:first-child .text { display: none; } @media only screen and (min-width: 768px) { .settings-table .pending-invite td:first-child .text { display: inline-block; } } .settings-table .pending-invite:hover .btn-show, .settings-table .show-delete:hover .btn-show, .settings-table .invite:hover .btn-show { visibility: visible; } .settings-table .user-image, .settings-table .curator-image, .settings-table .wrapper { margin-right: 2rem; } .settings-table .user-image[data-initials] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #ebebeb; border: transparent; color: #f6704d; font-weight: 700; } .settings-table .wrapper { margin: 2rem 0; } .settings-table .wrapper .Select-control { background-color: #fff; border: 1px solid #e4e4e4; border-radius: 4px; } .settings-table .add-user { border: 1px solid #e4e4e4; padding: 2rem; position: relative; } .settings-table .add-user .hover-effect .Select-value { left: 0; right: inherit; } .settings-table .add-user .wrapper + .wrapper { width: calc(50% - 8rem); } .settings-table .add-user .wrapper .form-group { position: relative; } @media only screen and (min-width: 992px) { .settings-table .add-user .wrapper .form-group { width: 60%; } } @media only screen and (min-width: 768px) { .settings-table .add-user .wrapper { width: 100%; } .settings-table .add-user .wrapper + .wrapper { width: 30%; } } .settings-table .hover-effect .Select-option.is-focused { background-color: #ebf5ff; background-color: rgba(0, 126, 255, 0.08); color: #333; } .settings-table .hover-effect .Select-value { left: inherit; right: 3rem; } .settings-table .add-token, .settings-table .add-user { max-width: none; } .settings-table .add-token .clearfix { margin-bottom: 2rem; width: 100%; } .settings-table .add-token .add { height: 3.6rem; width: 15rem; } .settings-table .add-token .Select-value-label { font-size: 1.4rem; } .settings-table.token { margin: 0; } .settings-table.token .show-delete { position: relative; } @media only screen and (max-width: 767px) { .settings-table.token .show-delete { align-items: baseline; display: flex; flex-direction: column-reverse; width: 100%; } } .settings-table.token .big-column { width: 65%; } .settings-table.token .big-column img { height: 4rem; } @media only screen and (max-width: 767px) { .settings-table.token .big-column { border-bottom: 2px solid #e2e2e2; padding-top: 60px; width: 100%; } } .settings-table.token .medium-column { width: 30%; } @media only screen and (max-width: 767px) { .settings-table.token .medium-column { position: absolute; text-align: left; top: 0; width: 75%; border: 0; } } .settings-table.token .small-column { width: 5%; } @media only screen and (max-width: 767px) { .settings-table.token .small-column { padding-bottom: 2px; position: absolute; right: 0; text-align: right; top: 0; width: 25%; border: 0; } } .settings-table.token .small-column button:focus { border-color: transparent; } .settings-table.token p { max-width: calc(100vw / 2); position: static; width: 100%; word-wrap: break-word; } @media only screen and (min-width: 768px) { .settings-table.token p { max-width: calc(100vw / 4); } } @media only screen and (min-width: 992px) { .settings-table.token p { max-width: 230px; } } @media only screen and (min-width: 1200px) { .settings-table.token p { max-width: 400px; } } .settings-table.token tbody { border-top: 0; } .settings-table.token .small-column, .settings-table.token .medium-column { padding-left: 0; padding-right: 0; } .settings-table.token .Select-value { right: 2.2rem; } .settings-table.token .Select-value .Select-value-label { font-size: 1.4rem; } .settings-table .popover { display: inline-block; } .settings-table time { display: block; font-size: 1.4rem; line-height: 1.9rem; } .settings-table time span:nth-child(n) { cursor: inherit; } .settings-table .remind { display: block; } .settings-table .cta { padding-right: 0; white-space: nowrap; } .settings-table.reader.with-pagination { margin-bottom: 0; } .settings-table.reader td { line-height: 2rem; } .settings-table.reader td:nth-child(2), .settings-table.reader td:nth-child(3) { text-align: right; } .settings-table tbody { border-top: 1px solid #e4e4e4; } .settings-table .resend { padding-left: 0; } @media only screen and (min-width: 992px) { .settings-table .resend { width: 40%; } } .settings-table .resend span { font-size: 1.4rem; line-height: 1.9rem; } .settings-table .big-column { width: 12rem; } @media only screen and (min-width: 992px) { .settings-table .big-column { width: 50%; } } .settings-table .medium-column { width: 12rem; } @media only screen and (min-width: 768px) { .settings-table .medium-column { padding-bottom: 0; } } @media only screen and (min-width: 992px) { .settings-table .medium-column { padding-top: 0; width: 35%; } } .settings-table .medium-column .material-icons { left: -3rem; top: .5rem; } .settings-table .big-column-reverse { width: 10rem; } @media only screen and (min-width: 992px) { .settings-table .big-column-reverse { width: 40%; } } .settings-table .medium-column-reverse { padding-bottom: 0; width: 7rem; } @media only screen and (min-width: 768px) { .settings-table .medium-column-reverse { width: 15rem; } } @media only screen and (min-width: 992px) { .settings-table .medium-column-reverse { padding-top: 2px; width: 35%; } } .settings-table .medium-column-reverse .material-icons { left: -3rem; top: .5rem; } .settings-table .small-column { width: 5%; } .settings-table .btn-show { visibility: visible; } @media only screen and (min-width: 992px) { .settings-table .btn-show { visibility: hidden; } } .settings-table .cancel-button { margin: 0 2rem; } @media only screen and (min-width: 768px) { .settings-table .cancel-button { margin: 0; } } .settings-table .cancel-button span { font-size: 2.4rem; } .settings-table .select .input-height { height: 60px; } .settings-table .multiline .input-height { height: 104px; } .settings-table .flex { display: flex; align-items: center; justify-content: space-between; } .settings-table .flex > div { width: 48%; } .settings-table .margin-bottom { margin-bottom: 15px; } .settings-table .big-margin { margin-bottom: 40px; } .settings-table .text-right { text-align: right; } .settings-table .margin-0 { margin: 0; } .settings-table .input-select-height { padding: 0 15px; } .settings-table .adornment { position: absolute; right: 0; bottom: -10px; } .settings-table .grey-block { top: -15px; padding: 10px; background-color: #f2f2f2; } .settings-table label { white-space: nowrap; text-overflow: ellipsis; word-break: break-word; max-width: 75%; } .settings-table .Select-input, .settings-table .Select-placeholder, .settings-table .Select-control { height: 4rem; } .settings-table .Select-value-label { opacity: 1; } .settings-table .Select-menu-outer { z-index: 10; } .settings-table .Select-arrow-zone { background: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iOC40IiBoZWlnaHQ9IjQuNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cGF0aCBpZD0ic3ZnXzEiIGQ9Im00LjIsMy45bC00LjIsLTMuOWwwLDAuOGw0LjIsMy45bDQuMiwtMy45bDAsLTAuOCIgZmlsbD0iIzhmOGY4ZiIvPjwvZz48L3N2Zz4=") 97%/15% no-repeat #fff; background-position-x: inherit; background-size: 10px 6px; } .settings-table .Select-arrow { display: none; } .settings-table .Select-value { align-items: center; display: flex; } .in-app-new-filter { background-color: #fff; padding: 50px 25px 36px 28px; max-width: 320px; min-width: 230px; min-height: 240px; } .in-app-new-filter .title-filter { font-size: 1.8rem; font-weight: 500; color: #000; position: absolute; top: 25px; } .in-app-new-filter label { height: 30px; margin: 7px 0 !important; } .in-app-new-filter .close-button { position: absolute; right: 25px; top: 15px; font-size: 20px; color: #202020; } .in-app-new-filter .label { font-size: 1.5rem; color: #000; margin-left: 10px; width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .settings-table-v2 { margin-bottom: 15px; } .settings-table-v2 td { padding: 1.2rem 2.4rem; position: relative; } .settings-table-v2 smal { font-size: small; } .settings-table-v2 tr + tr td:before { content: ''; display: block; position: absolute; top: 0; width: 65%; height: 1px; background-color: #e8e8e8; } .details-panel { background: #fff; bottom: 0; border-left: 1px solid #e4e4e4; position: fixed; right: -300px; top: 0; transition: transform .3s ease; width: 300px; z-index: 11; } .details-panel.open { transform: translateX(-300px); } .details-panel .details-panel-header { position: relative; border-bottom: 1px solid #e4e4e4; height: 62px; line-height: 60px; padding: 0 15px; } .details-panel .details-panel-header .close-details-button { position: absolute; right: 1.5rem; top: 1.5rem; } .details-panel .h3 { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; color: rgba(0, 0, 0, 0.6); font-size: 1.2rem; font-weight: 600; line-height: 60px; margin: 0; letter-spacing: .18rem; } .details-panel dl { margin-bottom: 20px; } .details-panel dl > div:last-of-type dt, .details-panel dl > div:last-of-type dd { margin-bottom: 0; } .details-panel dl dt, .details-panel dl dd { display: inline-block; line-height: inherit; margin-bottom: 11px; vertical-align: top; } .details-panel dl dt { width: 45%; word-wrap: break-word; padding-right: 3px; text-align: right; } .details-panel dl dd { width: 55%; padding-left: 3px; color: rgba(0, 0, 0, 0.87); } .details-panel .details-panel-content { padding: 20px 15px; overflow: auto; height: calc(100vh - 60px); max-height: calc(100vh - 60px); } .details-panel .details-panel-content span.details-title { margin-bottom: 1.2rem; } .details-panel .curator { white-space: nowrap; } .details-panel .curator span { display: inline-block; line-height: 1.4rem; vertical-align: top; color: rgba(0, 0, 0, 0.87); } .details-panel .curator > span { overflow: hidden; width: 10rem; text-overflow: ellipsis; } .details-panel .curator:last-of-type { margin-bottom: 0; } .details-panel .user-image { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #fff; background-size: cover; background-position: center; border: transparent; color: #e2e2e2; display: inline-block; font-size: 1.4rem; font-weight: 700; height: 1.8rem; line-height: 1.8rem; margin-right: 4px; position: relative; text-align: center; top: -0.2rem; width: 1.8rem; border: 1px solid #e4e4e4; } .details-panel .user-image span { font-size: 1.6rem; line-height: 1.8rem; } .details-panel .integrations-list { margin-bottom: 20px; } .details-panel .integrations-list .user-image { margin-right: 0; } .details-panel .integrations-list-item { border-top: 1px solid #e4e4e4; margin-bottom: 20px; padding-top: 12px; } .details-panel .integrations-list-item:last-of-type { margin-bottom: 0; } .details-panel .integrations-list-item > dl { margin-bottom: 0; } .details-panel .integrations-list-item dt:last-of-type, .details-panel .integrations-list-item dd:last-of-type { margin-bottom: 0; } .details-panel .top-sources .material-icons { font-size: 1.2rem; line-height: 1.6rem; vertical-align: top; opacity: 0; transition: .2s; padding-left: 4px; font-weight: 900 !important; color: #999999; } .details-panel .top-sources a, .details-panel .top-sources a:hover, .details-panel .top-sources a:focus { color: rgba(0, 0, 0, 0.87); display: inline-block; max-width: 110px; vertical-align: top; line-height: inherit; } .details-panel .top-sources a:hover + .material-icons, .details-panel .top-sources a:focus + .material-icons { opacity: 1; } .details-panel .loading { height: 3rem; width: 3rem; border: none; } .flex-column, .chats .data-wrapper .card:not(.edit) .wrapper-image-info, .chats .data-wrapper .card:not(.edit) .article, .chats .data-wrapper .card:not(.edit) address, .chats .data-wrapper .card:not(.edit) .main.image, .chats .data-wrapper .card .hidden, .chats .chat-flex, .chats .col-chat .card-wrapper, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions ul .suggestions-ul { display: flex; flex-direction: column; } .flex-column-reverse, .chats .data-wrapper .card:not(.edit) .main { display: flex; flex-direction: column-reverse; } .flex-row, .chats .data-wrapper .card:not(.edit) .bottom-bar > span, .chats .data-wrapper .card:not(.edit) .main.article, .chats .preview-wrapper article.card .main, .chats .col-chat .card-wrapper.open .header-actions-buttons, .chats .thumbnail { display: flex; flex-direction: row; } .chats [contenteditable="true"] { border: inherit; border-radius: inherit; box-shadow: inherit; color: inherit; font: inherit; font-size: inherit; line-height: inherit; padding: inherit; transition: inherit; border-color: inherit; height: inherit; margin: inherit; user-select: inherit; width: auto; } .chats [contenteditable="true"]:not([type='radio']):not([type='checkbox']), .chats [contenteditable="true"] input:not([type='radio']):not([type='checkbox']), .chats [contenteditable="true"] .form-group:not([type='radio']):not([type='checkbox'])[contenteditable='true'], .chats [contenteditable="true"] select, .chats [contenteditable="true"] textarea { -moz-appearance: inherit; -webkit-appearance: inherit; appearance: inherit; } .chats .header-actions-buttons button:not(:last-of-type) { margin-right: 9px; } .chats .draft-button-wrapper .material-icons, .chats .header-actions-buttons .material-icons { font-size: 2.4rem; } .chats .DraftEditor-root { padding: 5px 20px; } .chats .DraftEditor-root .emoji + .emoji { margin-left: 0; } .chats .card .form-group, .chats .card .headline-text { margin: 5px 0; } .chats .card .form-group p > p, .chats .card .headline-text p > p { margin: 0; } .chats .card .form-group p { opacity: 0.75; } .chats .card .main figure + div, .chats .card .main figure { width: 100%; } .chats .card .main figure { padding: 0; margin-bottom: 0; } .chats .card .main figure + div { margin-left: 5px; } .chats .card a .material-icons { float: right; display: block; } .chats .card figure div { max-height: 200px; height: 100%; } .chats .preview-wrapper .card, .chats .data-wrapper .card { outline: 0; pointer-events: all; } .chats .data-wrapper .card:not(.edit) { border: 0; border-radius: 10px; margin: 0; min-height: 130px; background: #F5F5F5; } .chats .data-wrapper .card:not(.edit) header, .chats .data-wrapper .card:not(.edit) .button-group, .chats .data-wrapper .card:not(.edit) .quote-date-created { display: none; } .chats .data-wrapper .card:not(.edit) address .quote-date-created { display: block; } .chats .data-wrapper .card:not(.edit) footer { border: 0; } .chats .data-wrapper .card:not(.edit) button span, .chats .data-wrapper .card:not(.edit) button .material-icons, .chats .data-wrapper .card:not(.edit) .hidden button span, .chats .data-wrapper .card:not(.edit) .hidden button .material-icons { color: #909090; } .chats .data-wrapper .card:not(.edit):hover .copy-mode .material-icons, .chats .data-wrapper .card:not(.edit) .hidden:hover .copy-mode .material-icons { display: block; } .chats .data-wrapper .card:not(.edit) .material-icons { color: #909090; display: none; } .chats .data-wrapper .card:not(.edit) .wrapper-image-info + div { margin-left: 5px; } .chats .data-wrapper .card:not(.edit) p, .chats .data-wrapper .card:not(.edit) h1, .chats .data-wrapper .card:not(.edit) h2, .chats .data-wrapper .card:not(.edit) h3, .chats .data-wrapper .card:not(.edit) span, .chats .data-wrapper .card:not(.edit) button { color: rgba(0, 0, 0, 0.87); } .chats .data-wrapper .card:not(.edit) .carousel-item p { color: rgba(0, 0, 0, 0.6); } .chats .data-wrapper .card:not(.edit) .carousel-item > p { margin: 5px 0 0 10px; } .chats .data-wrapper .card:not(.edit) p, .chats .data-wrapper .card:not(.edit) p > p { font-size: 1.4rem; } .chats .data-wrapper .card:not(.edit) .headline-text p, .chats .data-wrapper .card:not(.edit) .headline-text p > p { font-size: 1.7rem; } .chats .data-wrapper .card:not(.edit) .bottom-bar > span { max-width: 100%; width: 100%; align-items: center; justify-content: flex-start; } .chats .data-wrapper .card:not(.edit) .bottom-bar .created-by-label { max-width: 150px; } .chats .data-wrapper .card:not(.edit) header { border-bottom: 0; margin-bottom: 0; } .chats .data-wrapper .card:not(.edit) header p { margin: 0; } .chats .data-wrapper .card:not(.edit) header > span, .chats .data-wrapper .card:not(.edit) header .arrows, .chats .data-wrapper .card:not(.edit) header .wrapper-controls { display: none; } .chats .data-wrapper .card:not(.edit) address { min-width: 25%; } .chats .data-wrapper .card:not(.edit) .main.social address p, .chats .data-wrapper .card:not(.edit) .main.article address p { color: rgba(0, 0, 0, 0.87); } .chats .data-wrapper .card:not(.edit) .main.social address a span, .chats .data-wrapper .card:not(.edit) .main.article address a span { color: rgba(0, 0, 0, 0.6); } .chats .data-wrapper .card:not(.edit) .main.social p > p, .chats .data-wrapper .card:not(.edit) .main.article p > p { color: rgba(0, 0, 0, 0.6); } .chats .data-wrapper .card:not(.edit) .main.article figure div { height: 100%; width: 100%; } .chats .data-wrapper .card:not(.edit) .main.article a, .chats .data-wrapper .card:not(.edit) .main.article p { opacity: 0.85; } .chats .data-wrapper .card:not(.edit) .main.article a { font-size: 12px; } .chats .data-wrapper .card:not(.edit) .main.article .headline-text p, .chats .data-wrapper .card:not(.edit) .main.article .headline-text p > p, .chats .data-wrapper .card:not(.edit) .main.article p p, .chats .data-wrapper .card:not(.edit) .main.article p p > p, .chats .data-wrapper .card:not(.edit) .main.article p > p p, .chats .data-wrapper .card:not(.edit) .main.article p > p p > p { font-size: 1.7rem; } .chats .data-wrapper .card:not(.edit) .main.article h6 p { font-size: 16px; opacity: 1; font-weight: 500; } .chats .data-wrapper .card:not(.edit) .main.image { justify-content: center; } .chats .data-wrapper .card .show-btn span .material-icons { color: rgba(0, 0, 0, 0.87); } .chats .data-wrapper .card .uploaded-from-label { font-size: 11px; font-weight: normal; color: rgba(0, 0, 0, 0.6); } .chats .data-wrapper .card a .material-icons { float: right; display: block; } .chats .data-wrapper .card .hidden { position: absolute; right: -60px; height: 100%; width: 50px; text-align: right; align-items: center; justify-content: center; display: flex !important; top: 0; } .chats .data-wrapper .card .hidden button { border-radius: 100%; } .chats .data-wrapper .card .edit-message-card { width: 100%; } .chats .data-wrapper .card .edit-message-card .material-icons.drop-image-icon { font-size: 1.5rem; } .chats .data-wrapper .card .edit-message-card .wrapper-image { position: relative; } .chats .data-wrapper .card .edit-message-card .wrapper-image figure div { width: 120px; height: 120px; } .chats .data-wrapper .card .edit-message-card header button { top: 1rem; } .chats .data-wrapper .card .edit-message-card header button .material-icons { display: block; } .chats .preview-wrapper [contenteditable='true'][name="text"]:after { bottom: -10px; } .chats .preview-wrapper article.card { margin: 0; padding: 0; width: 100%; min-width: 100%; } .chats .preview-wrapper article.card .main { padding-right: 80px; } .chats .preview-wrapper article.card .main > div:not(.wrapper-image-info) { width: 100%; padding: 12px 0; } .chats .preview-wrapper article.card .preview-main-section b { font-weight: normal; } .chats .preview-wrapper article.card .form-group, .chats .preview-wrapper article.card .headline-text { max-width: 90%; margin-bottom: 5px; } .chats .preview-wrapper article.card .form-group:last-of-type { margin-bottom: 0; } .chats .preview-wrapper article.card p, .chats .preview-wrapper article.card p > p { color: rgba(0, 0, 0, 0.6); } .chats .preview-wrapper article.card .headline-text p, .chats .preview-wrapper article.card .headline-text p > p { color: #000; } .chats .preview-wrapper article.card footer, .chats .preview-wrapper article.card header, .chats .preview-wrapper article.card .arrows, .chats .preview-wrapper article.card .author-image, .chats .preview-wrapper article.card .wrapper-controls, .chats .preview-wrapper article.card .quote-date-created, .chats .preview-wrapper article.card .long-dashed { display: none; } .chats .preview-wrapper article.card .button { position: absolute; top: 0; right: 10px; } .chats .preview-wrapper article.card .button button span { height: 20px; width: 20px; } .chats .preview-wrapper article.card figure { width: auto; margin-right: 20px; margin-bottom: 0; padding: 0; } .chats .preview-wrapper article.card figure .video-hint, .chats .preview-wrapper article.card figure .media-add { display: none; } .chats .preview-wrapper article.card figure img { max-height: 120px; width: auto; } .chats .small-item header { display: none; } .chats .data-wrapper .emoji + .emoji { margin-left: 0; } .chats .data-wrapper article.card .main { text-align: left; } .chats .mention, .chats .mention:visited { color: #488ed8; cursor: pointer; display: inline-block; background: #e6f3ff; padding: 0 2px; border-radius: 4px; text-decoration: none; } .chats .Select-placeholder, .chats .Select--single > .Select-control .Select-value { right: auto; } .chats a { color: #8c8c8c; cursor: pointer; } .chats .checkbox-group { margin-bottom: 10px; } .chats .checkbox-group input, .chats .checkbox-group .form-group[contenteditable='true'] { margin-right: 10px; } .chats .checkbox-group span { font-size: 1.4rem; } .chats .join-chat { padding: 36px; border: 1px solid #e4e4e4; background: #fff; max-width: 444px; margin: 128px auto 0; text-align: center; } .chats .join-chat .thumbnail { width: 96px; height: 96px; border-radius: 48px; margin: 0 auto 20px; } .chats .join-chat .thumbnail div { font-size: 18px; background: #e6e6e6; } .chats .join-chat > h2 { font-size: 2.5rem; line-height: 3rem; margin-bottom: 10px; word-wrap: break-word; width: 100%; } .chats .join-chat > p { color: rgba(0, 0, 0, 0.6); margin-bottom: 36px; word-wrap: break-word; width: 100%; } .chats .edit-chat { flex-basis: calc(100vw - 240px); flex-grow: 1; flex-shrink: 1; order: 1; overflow: auto; height: 100vh; } .chats .edit-chat textarea { resize: none; } .chats .edit-chat select { border-radius: 8px; padding: 0.7rem 1rem; } .chats .edit-chat .Select.rounded { border-radius: 8px; } .chats .edit-chat .Select.rounded .Select-control { border-radius: 8px; height: 27px; } .chats .edit-chat .Select.rounded .Select-placeholder { line-height: 27px; } .chats .edit-chat .Select.rounded .Select-input { height: 27px; } .chats .edit-chat .Select.rounded .Select-input > input, .chats .edit-chat .Select.rounded .Select-input > .form-group[contenteditable='true'] { padding: 3px 0; } .chats .edit-chat .Select--single.rounded > .Select-control .Select-value { line-height: 27px; } .chats .edit-chat .input-flex { display: flex; justify-content: space-between; } .chats .edit-chat .input-flex > .form-group { margin-right: 20px; } .chats .edit-chat .input-flex > .form-group:last-child { margin-right: 0; max-width: 40%; } .chats .edit-chat .input-flex > .form-group.tchop-checkbox { padding-top: 26px; } .chats .edit-chat .input-flex > .form-group.tchop-checkbox > label:before { top: -2px; } .chats .edit-chat .chats-header { text-align: center; display: flex; justify-content: center; position: relative; } .chats .edit-chat .chats-header span { font-weight: 900; } .chats .edit-chat .chats-header button { position: absolute; right: 0; margin: 0 20px; } .chats .edit-chat .edit-chat-form { max-width: 546px; margin: 60px auto 0; } .chats .edit-chat nav.material-tabs { border-bottom: none; } .chats .edit-chat nav.material-tabs ul { text-align: center; } .chats .edit-chat nav.material-tabs ul li:last-child { margin-right: 0; } .chats .edit-chat nav.material-tabs ul li a { font-size: 16px; padding: 15px 20px; user-select: none; } .chats .edit-chat .portlet { border: 1px solid #e4e4e4; background: #fff; padding: 64px; } .chats .edit-chat .form-group { margin-bottom: 20px; } .chats .edit-chat .form-group .custom { color: rgba(0, 0, 0, 0.87); position: absolute; padding: 0 5px; top: -7px; left: 10px; font-size: 1.2rem; background: #fff; z-index: 1; } .chats .edit-chat .form-buttons { margin-top: 40px; text-align: center; } .chats .edit-chat .form-buttons button { margin: 0 .5rem; } .chats .Select { font-size: 1.4rem; margin-top: 16px; margin-bottom: 8px; border: 1px solid rgba(25, 25, 25, 0.32); border-radius: 4px; padding: 14px 0 4px 5px; } .chats .Select.is-open > .Select-control { border: none; } .chats .Select .Select-placeholder { line-height: normal; font-size: 1.7rem; } .chats .Select .Select-menu-outer { z-index: 99; background: #fff; opacity: 1; margin-top: -10px; box-shadow: 1px 4px 9px rgba(0, 0, 0, 0.6); } .chats .Select-arrow-zone { top: -5px; } .chats .Select-arrow-zone .Select-arrow { color: rgba(0, 0, 0, 0.6); } .chats .Select--single .Select-value-icon { display: none; } .chats .Select--multi .Select-value { background: #EEF4FC; border: 1px solid #CADEF4; padding: 2px 2px 2px 4px; color: #488ed8; font-size: 1.4rem; border-radius: 8px; display: inline-flex; } .chats .Select--multi .Select-input > input, .chats .Select--multi .Select-input > .form-group[contenteditable='true'] { padding: 8px 0; } .chats .Select--multi .Select-value-label { padding: 0 5px; } .chats .Select--multi .Select-value-icon { padding: 2px 0 0 5px; font-weight: 900; color: #488ed8; } .chats .Select--multi .Select-multi-value-wrapper { max-height: 220px; overflow-y: auto; } .chats .user-image.online:after, .chats .thumbnail-wrapper.online:after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border: 2px solid #e2e2e2; border-radius: 7px; background: #32C832; } .chats .user-image { -webkit-font-smoothing: antialiased; border: transparent; color: #F6704D; font-weight: 700; position: relative; height: 36px; width: 36px; min-width: 36px; border-radius: 18px; line-height: 3.6rem; background-position: center; background-size: cover; background-color: #e2e2e2; margin-right: 10px; } .chats .user-image.online:after { width: 10px; height: 10px; border-radius: 5px; } .chats .user-image.small { width: 26px; height: 26px; min-width: 26px; margin-right: 0px; } .chats .chats-header { position: relative; border-bottom: 1px solid #e4e4e4; height: 60px; max-height: 60px; flex: 1 0 60px; padding: 0 1.4rem; background-color: #fff; margin: 0; display: flex; justify-content: space-between; align-items: center; text-align: left; z-index: 1; } .chats .chats-header .open-details-button { position: absolute; right: 0; margin: 0 20px; } .chats .chats-header .chat-description-panel { position: absolute; top: 60px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e4e4e4; padding: 20px 120px; min-height: 110px; transform: translateY(-100%); transition: .3s ease; z-index: -1; } .chats .chats-header .chat-description-panel.open { transform: translateY(0); } .chats .chats-header .chat-description-panel .thumbnail { position: absolute; top: 20px; left: 30px; width: 64px; height: 64px; border-radius: 32px; max-width: 64px; } .chats .chats-header .chat-description-panel .thumbnail div { font-size: 18px; background: #e6e6e6; } .chats .chats-header .chat-description-panel > button { position: absolute; top: 6px; right: 4px; margin: 15px; } .chats .chats-header .chat-description-panel .description-panel-body > h2 { font-size: 18px; font-weight: bold; margin-bottom: 6px; } .chats .chats-header .chat-description-panel .description-panel-body p { word-wrap: break-word; font-size: 1.4rem; color: rgba(0, 0, 0, 0.6); } .chats .chats-header > h2 { color: rgba(0, 0, 0, 0.6); line-height: 60px; flex: 1; text-align: center; text-overflow: ellipsis; overflow: hidden; background-color: #ffffff; margin: 0 auto; } .chats .chats-header > h2.open-description { cursor: pointer; transition: .3s ease; } .chats .chats-header > h2.open-description:hover { color: #488ED8; } .chats .chats-header > h2 span, .chats .chats-header > h2 i { font-size: 16px; font-weight: normal; vertical-align: middle; display: inline-block; } .chats .chats-header > h2 span { margin-left: 4px; } .chats .chats-header > h2 .truncated { max-width: 200px; } .chats .chats-header h3 { -moz-osx-font-smoothing: unset; -webkit-font-smoothing: unset; font-size: 1.6rem; font-weight: 500; line-height: 60px; margin: 0; color: #8f8f8f; } .chats .user-select-option { display: flex; background-color: #fff; justify-content: space-between; padding: 10px; cursor: pointer; border-bottom: 1px solid #e4e4e4; } .chats .user-select-option:last-child { border-bottom: none; } .chats .user-select-option:hover { background-color: rgba(72, 142, 216, 0.2); } .chats .user-select-option:hover .plus-sign { color: #488ed8; } .chats .user-select-option .plus-sign { color: #488ed8; } .chats .user-select-option .user-info { width: 100%; } .chats .user-select-option .user-info > p { margin-bottom: 0; font-size: 16px; color: rgba(0, 0, 0, 0.6); line-height: 1.3; } .chats .user-select-option .user-info .user-name { color: rgba(0, 0, 0, 0.87); font-size: 15px; line-height: 20px; } .chats .user-select-option .user-info .user-role { color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 16px; } .chats .card-select-value { display: flex; } .chats .card-select-value .card-image { height: 28px; width: 28px; background-size: contain; background-position: center; } .chats .pinned-content { background: #fff; margin-top: 20px; } .chats .pinned-content > div { padding: 20px; display: flex; cursor: pointer; border: 1px solid #e4e4e4; } .chats .pinned-content > span { color: #8c8c8c; font-size: 1.4rem; margin-bottom: 8px; display: block; } .chats .pinned-content .pinned-image-wrapper { flex: 0 0 100px; } .chats .pinned-content .pinned-content-wrapper { margin-right: 20px; flex: 1 0; } .chats .pinned-content .pinned-content-wrapper > h2 { font-size: 18px; font-weight: bold; color: rgba(0, 0, 0, 0.6); margin-bottom: 6px; } .chats .pinned-content .pinned-content-wrapper p { margin-bottom: 0; word-wrap: break-word; font-size: 1.4rem; color: rgba(0, 0, 0, 0.6); } .chats .pinned-content .pinned-image { display: inline-block; background-size: contain; background-position: center; height: 100px; width: 100px; } .chats nav.material-tabs { padding: 0 10px; border-bottom: 1px solid #e4e4e4; } .chats nav.material-tabs ul { margin-bottom: -1px; display: flex; justify-content: space-around; } .chats nav.material-tabs li { display: inline-block; margin-bottom: 0; transition: .3s ease; box-shadow: inset 0 -1px 0px 0px #e4e4e4; } .chats nav.material-tabs li a { display: block; padding: 15px 4px; color: #8c8c8c; font-size: 12px; font-weight: normal; cursor: pointer; user-select: none; } .chats nav.material-tabs li:hover a { color: #588BC2; } .chats nav.material-tabs li.active a { color: #588BC2; } .chats .col-chat { border-left: 1px solid #e4e4e4; flex-grow: 1; flex-shrink: 1; flex-basis: calc(65% - 240px); padding-bottom: 0; } .chats .chat-flex { max-height: 100vh; min-height: 100vh; height: 100vh; } .chats .chat-flex .chats-header { border-bottom: none; padding: 0; } .chats .chat-flex .chats-header > h2 { border-bottom: 1px solid #e4e4e4; } .chats .col-chats { flex-basis: 35%; flex-grow: 1; max-width: 360px; } .chats .col-chats .note { font-size: 1.4rem; font-weight: bold; padding: 10px; text-align: center; } .chats .col-chats button.cta { display: flex; justify-content: center; align-items: center; } .chats .col-chat { position: relative; overflow: hidden; } .chats .col-chat .chat-wrapper { position: relative; display: flex; justify-content: space-between; flex: 1; max-height: calc(100vh - 105px); overflow-y: hidden; z-index: 0; } @media screen and (max-width: 991px) { .chats .col-chat .chat-wrapper { max-height: calc(100vh - 95px - 62px); } } .chats .col-chat .chat-wrapper .note { align-self: center; font-size: 30px; width: 100%; text-align: center; } .chats .col-chat .typing-indicator { position: relative; } .chats .col-chat .typing-indicator * { font-size: 1.4rem; font-weight: bold; color: rgba(58, 58, 58, 0.72); } .chats .col-chat .chat-messages { padding: 20px 115px; overflow-y: auto; width: 100%; } .chats .col-chat .chat-messages > div { max-width: 700px; margin: 0 auto; } .chats .col-chat .chat-messages .to-bottom { position: absolute; bottom: 10px; right: 20px; } .chats .col-chat .chat-messages .author { margin-bottom: 8px; } .chats .col-chat .chat-messages .author * { font-size: 1.4rem; color: rgba(58, 58, 58, 0.72); font-weight: bold; } .chats .col-chat .chat-messages .author > div, .chats .col-chat .chat-messages .author > span { display: inline-block; vertical-align: middle; } .chats .col-chat .chat-messages .author .user-image, .chats .col-chat .chat-messages .author .user-image div { color: #F6704D; line-height: 2.4rem; height: 24px; width: 24px; min-width: 24px; min-height: 24px; border-radius: 12px; border: none; font-size: 12px; position: relative; } .chats .col-chat .chat-messages .author .user-image.online:after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border: 2px solid #e2e2e2; border-radius: 7px; background: #32C832; } .chats .col-chat .chat-messages .day-separator, .chats .col-chat .chat-messages .message.server .align-wrapper .data-wrapper, .chats .col-chat .chat-messages .add-users-alert { margin: 0 10px; background: none; color: #8c8c8c; text-align: center; font-size: 1.4rem; } .chats .col-chat .chat-messages .message { position: relative; } .chats .col-chat .chat-messages .message .reactions { display: flex; position: relative; margin-top: -12px; margin-bottom: 4px; left: 6px; z-index: 2; } .chats .col-chat .chat-messages .message .reactions .reaction { display: flex; background-color: #fff; margin: 0 2px; padding: 0 2px; border: 1px solid #fff; border-radius: 14px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .chats .col-chat .chat-messages .message .reactions .reaction .count { font-size: 13px; color: #8c8c8c; margin: 0 3px 0 6px; } .chats .col-chat .chat-messages .message .reactions .reaction:hover { border: 1px solid #e6e6e6; background-color: #f2f2f2; } .chats .col-chat .chat-messages .message .reactions .reaction:focus { outline: none; } .chats .col-chat .chat-messages .message .reactions .reaction.own .count { color: #488ed8; } .chats .col-chat .chat-messages .message .read-mark { display: none; user-select: none; } .chats .col-chat .chat-messages .message:hover .edit-mode .material-icons, .chats .col-chat .chat-messages .message:hover .copy-mode .material-icons, .chats .col-chat .chat-messages .message .hidden:hover .edit-mode .material-icons, .chats .col-chat .chat-messages .message .hidden:hover .copy-mode .material-icons { display: block; } .chats .col-chat .chat-messages .message.own { text-align: right; } .chats .col-chat .chat-messages .message.own .reactions { justify-content: flex-end; left: unset; right: 22px; } .chats .col-chat .chat-messages .message.own .data-wrapper .card:not(.edit) { background: #fff; } .chats .col-chat .chat-messages .message.own .data-wrapper .hidden button span, .chats .col-chat .chat-messages .message.own .data-wrapper .hidden button .material-icons { color: #909090; } .chats .col-chat .chat-messages .message.own .author { text-align: right; } .chats .col-chat .chat-messages .message.own .mention { background: rgba(0, 0, 0, 0.2); color: #fff; font-weight: 700; padding: 0 2px; border-radius: 4px; } .chats .col-chat .chat-messages .message.own .align-wrapper.emojis-large .data-wrapper { color: rgba(0, 0, 0, 0.6); padding-bottom: 12px; } .chats .col-chat .chat-messages .message.own .align-wrapper.emojis-large .data-wrapper .read-mark { color: rgba(0, 0, 0, 0.6); right: -2px; } .chats .col-chat .chat-messages .message.own .align-wrapper .data-wrapper { background: #488ed8; color: #fff; position: relative; margin: 0 0 4px; } .chats .col-chat .chat-messages .message.own .align-wrapper .read-mark { color: #fff; display: block; position: absolute; bottom: 6px; right: 6px; font-size: 16px; } .chats .col-chat .chat-messages .message.own .date-tooltip { left: auto; right: -52px; } .chats .col-chat .chat-messages .message.own .date-tooltip:after { left: -16px; right: auto; border-color: transparent #43445b transparent transparent; } .chats .col-chat .chat-messages .message.own .delete-message-wrapper { right: 100%; left: auto; direction: rtl; } .chats .col-chat .chat-messages .message.own .delete-message-wrapper .action-message .action-content { transform: translateX(50%); direction: ltr; } .chats .col-chat .chat-messages .message.server .align-wrapper .data-wrapper { border: none; color: rgba(0, 0, 0, 0.6); display: block; max-width: none; margin-bottom: 12px; padding: 0; } .chats .col-chat .chat-messages .message.server .align-wrapper { display: block; } .chats .col-chat .chat-messages .message.server .date-tooltip { display: none; } .chats .col-chat .chat-messages .message.part .align-wrapper .data-wrapper { margin: 0 0 4px; } .chats .col-chat .chat-messages .message.part .read-mark { bottom: 8px; } .chats .col-chat .chat-messages .message .align-wrapper { display: inline-block; position: relative; } .chats .col-chat .chat-messages .message .align-wrapper.emojis-large .data-wrapper { font-size: 3.2rem; background: none; padding: 0 6px 0 0; border: none; border-radius: 0; } .chats .col-chat .chat-messages .message .align-wrapper .data-wrapper { background: #ffffff; border: 1px solid #e4e4e4; border-radius: 10px; color: rgba(0, 0, 0, 0.6); display: inline-block; font-size: 1.6rem; font-weight: 500; line-height: 135%; max-width: 520px; padding: 5px; text-align: left; white-space: pre-line; word-break: break-word; } .chats .col-chat .chat-messages .message .align-wrapper .data-wrapper:hover ~ .date-tooltip { opacity: 1; } .chats .col-chat .chat-messages .message .align-wrapper .data-wrapper:hover .delete-message-wrapper { opacity: 1; } .chats .col-chat .chat-messages .message .date-tooltip { opacity: 0; transition: .3s ease; background: #43445b; position: absolute; padding: 8px 0; text-align: center; font-size: 1.4rem; color: #ffffff; top: 10px; left: -54px; width: 50px; user-select: none; } .chats .col-chat .chat-messages .message .date-tooltip:after { content: ''; position: absolute; top: 6px; right: -16px; border: solid; border-width: 9px 8px; border-color: transparent transparent transparent #43445b; } .chats .col-chat .chat-messages .message .delete-message-wrapper { opacity: 0; transition: .3s ease-out .3s; position: absolute; text-align: center; font-size: 1.4rem; color: #d4d4d4; left: 100%; top: 0; padding: 4px 0; white-space: nowrap; } .chats .col-chat .chat-messages .message .delete-message-wrapper:hover { opacity: 1; } .chats .col-chat .chat-messages .message .delete-message-wrapper > .action-message { display: inline-block; width: 24px; padding: 2px 0; cursor: pointer; border-radius: 2px; background: #ffffff; margin: 5px; } .chats .col-chat .chat-messages .message .delete-message-wrapper > .action-message .action-trigger { color: inherit; } .chats .col-chat .chat-messages .message .delete-message-wrapper > .action-message .action-content { background-color: white; border-radius: 2rem; padding: 3px 6px; font-size: 1.6rem; transform: translateX(-50%); z-index: 3; } .chats .col-chat .chat-messages .message .delete-message-wrapper > .action-message .action-content > div { display: inline-block; margin: 3px; } .chats .col-chat .chat-messages .message .delete-message-wrapper.shared-item-other > .action-message { top: calc(50% + 4px); } .chats .col-chat .chat-messages .message.deleted .data-wrapper { font-style: italic; } .chats .col-chat .chat-messages .message.deleted .delete-message-wrapper { display: none; } .chats .col-chat .chat-messages .add-users-alert { border: none; color: rgba(0, 0, 0, 0.6); display: block; max-width: none; margin-bottom: 12px; margin-top: 0; padding: 0; } .chats .col-chat .chat-messages .add-users-alert .mention { background: rgba(64, 124, 197, 0.1); } .chats .col-chat .chat-messages .add-users-alert .buttons { text-align: center; } .chats .col-chat .chat-messages .add-users-alert .buttons button { display: inline-block; font-size: 15px; color: #488ed8; margin: 12px 6px 0; border: 1px solid rgba(0, 0, 0, 0.12); padding: 10px 16px; border-radius: 4px; font-weight: 600; background: transparent; } .chats .col-chat .chat-messages .add-users-alert .buttons button:hover { background: rgba(0, 0, 0, 0.12); } .chats .col-chat .details-panel { text-align: left; } .chats .col-chat .details-panel .details-panel-content { padding-top: 30px; } .chats .col-chat .details-panel .details-panel-content .primary { display: block; padding: 0.5rem 1.3rem; margin: 0 auto; } .chats .col-chat .details-panel .details-title { margin-bottom: 0; letter-spacing: 0.18rem; font-weight: 600; } .chats .col-chat .details-panel .search-wrapper { display: flex; justify-content: space-between; align-items: center; } .chats .col-chat .details-panel .search-wrapper span { white-space: pre-wrap; } .chats .col-chat .details-panel .search-wrapper > * { transition: .3s ease; } .chats .col-chat .details-panel .search-wrapper input, .chats .col-chat .details-panel .search-wrapper .form-group[contenteditable='true'] { order: 2; flex: 0 1 0; padding: 0 0 10px; margin: -3px 0 0; border: none; overflow: hidden; } .chats .col-chat .details-panel .search-wrapper .details-title { flex: 1 1; order: 1; white-space: nowrap; } .chats .col-chat .details-panel .search-wrapper label { flex: 0 0 24px; order: 3; } .chats .col-chat .details-panel .search-wrapper input:focus, .chats .col-chat .details-panel .search-wrapper .form-group:focus[contenteditable='true'], .chats .col-chat .details-panel .search-wrapper input.shown, .chats .col-chat .details-panel .search-wrapper .shown.form-group[contenteditable='true'] { flex: 1 1; } .chats .col-chat .details-panel .search-wrapper input:focus + .details-title, .chats .col-chat .details-panel .search-wrapper .form-group:focus[contenteditable='true'] + .details-title, .chats .col-chat .details-panel .search-wrapper input.shown + .details-title, .chats .col-chat .details-panel .search-wrapper .shown.form-group[contenteditable='true'] + .details-title { flex: 0 1 0; overflow: hidden; } .chats .col-chat .hidden-scroll-wrapper { overflow-x: hidden; } .chats .col-chat .card-wrapper { position: absolute; top: 0; right: -600px; z-index: 10; background: white; padding: 5px 0 0 20px; border: 1px solid #e4e4e4; height: 100vh; transition: .3s ease right; min-width: 30rem; } .chats .col-chat .card-wrapper.open { right: 0; padding: 0; max-width: 340px; width: 100%; transition: .3s ease right; } .chats .col-chat .card-wrapper.open .shared-content { font-size: 13px; font-weight: bold; } .chats .col-chat .card-wrapper.open .header-actions-buttons { width: 100%; padding: 0 15px; align-items: center; justify-content: space-between; right: 0; } .chats .col-chat .card-wrapper .list-mix-wrapper { margin-top: 60px; background: #E8E8E8; overflow-y: auto; padding-right: 5px; } .chats .col-chat .card-wrapper .list-mix-wrapper .created-by-text, .chats .col-chat .card-wrapper .list-mix-wrapper h6 p { width: 100%; overflow: hidden; text-overflow: ellipsis; } .chats .col-chat .card-wrapper .list-mix-wrapper .first-row { max-width: 100%; } .chats .col-chat .card-wrapper .list-mix-wrapper .card, .chats .col-chat .card-wrapper .list-mix-wrapper .list-mix { min-width: 0; } .chats .col-chat .card-wrapper .list-mix-wrapper .list-mix { margin: 10px; } .chats .col-chat .card-wrapper .list-mix-wrapper section { background: #E8E8E8; } .chats .col-chat .card-wrapper .list-mix-wrapper article { cursor: pointer; } .chats .col-chat .send-message-form { min-height: 60px; padding: 0; background: #fff; align-items: center; color: rgba(0, 0, 0, 0.6); font-size: 16px; line-height: 1.4; margin: 0; display: flex; flex-wrap: wrap; } .chats .col-chat .send-message-form .dropdown__trigger button { border: 1px solid rgba(0, 0, 0, 0.08); color: #588BC2; } .chats .col-chat .send-message-form .textarea-wrapper { flex: 1 0; position: relative; display: block; transition: none; border: none; margin: 0; min-height: 40px; width: calc(100% - 130px); z-index: 1; } .chats .col-chat .send-message-form .textarea-wrapper .data-wrapper { z-index: 1; background: #fff; } .chats .col-chat .send-message-form .textarea-wrapper .public-DraftEditorPlaceholder-root { position: absolute; padding-top: 12px; font-weight: 400; pointer-events: none; color: #a9a9a9; } .chats .col-chat .send-message-form .textarea-wrapper .public-DraftEditorPlaceholder-root.public-DraftEditorPlaceholder-hasFocus { display: none; } .chats .col-chat .send-message-form .textarea-wrapper .public-DraftEditor-content { padding: 12px 0 10px; overflow: auto; max-height: 40vh; } .chats .col-chat .send-message-form .textarea-wrapper .public-DraftEditor-content span { font-size: 16px; font-weight: 400; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions { border: 1px solid #e4e4e4; border-top-left-radius: 4px; border-top-right-radius: 4px; position: absolute; background: #fff; z-index: -1; box-sizing: border-box; transform: scaleY(0); transform-origin: bottom; transition: transform 0.25s cubic-bezier(0.3, 1.2, 0.2, 1); width: calc(100% - 40px); bottom: 100%; left: 0; right: 0; margin: 0 auto; color: rgba(0, 0, 0, 0.6); } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions ul { max-height: 25vh; overflow: auto; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions ul li { margin-bottom: 0; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions header { background: #ebebeb; display: flex; justify-content: space-between; height: 40px; padding: 0 28px; border-bottom: 1px solid #e4e4e4; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions header .material-icons { font-size: 1.4rem; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions header span { font-size: 12px; font-weight: 400; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions header > span { display: block; align-self: center; margin-right: 0; margin-left: 0; padding-left: 20px; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions header > span.match { padding-left: 0; margin-right: auto; margin-left: 0; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused { padding: 0 28px; cursor: pointer; transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56); flex: 0 0 40px; max-height: 40px; position: relative; display: flex; justify-content: space-between; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry :active, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused :active { background-color: #cce7ff; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry.online:after, .chats .col-chat .send-message-form .textarea-wrapper .online.mention-suggestions-entry-focused:after { background: #6bbd00; border-radius: 4px; content: ''; height: 8px; left: 10px; position: absolute; top: 17px; width: 8px; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry > *, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused > * { align-self: center; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused { background-color: #e6f3ff; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-text { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 368px; font-size: 15px; font-weight: 600; margin: 0 auto .2em 0; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-avatar { display: inline-block; width: 24px; height: 24px; border-radius: 12px; margin-right: 10px; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry > span, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused > span { display: block; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry .user-image, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused .user-image { display: flex; align-items: center; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry .user-image, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused .user-image, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry .user-image div, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused .user-image div, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry .user-image img, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused .user-image img { width: 24px; min-width: 24px; min-height: 24px; height: 24px; line-height: 24px; font-size: 11px; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry .not-in-chat, .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions-entry-focused .not-in-chat { font-size: 12px; } .chats .col-chat .send-message-form .textarea-wrapper .mention-suggestions hr { margin: 0; } .chats .col-chat .send-message-form h1 { color: black; } .chats .col-chat .send-message-form .draft-button-wrapper { position: relative; z-index: 3; margin-top: 6px; } .chats .col-chat .send-message-form .draft-button-wrapper > div { padding: 0 6px; } .chats .col-chat .send-message-form .draft-button-wrapper > button { margin: 0 3px; } .chats .col-chat .send-message-form .draft-button-wrapper .dropdown__content { position: absolute; background: white; border-radius: 4px; bottom: 0; } .chats .col-chat .send-message-form .draft-button-wrapper .dropdown__content button { padding: 20px; width: 100%; } .chats .col-chat .send-message-form .emoji-picker-wrapper { position: absolute; overflow: hidden; right: 0; bottom: 15px; max-height: 400px; padding: 20px 20px 40px; transition: -webkit-transform .3s ease; transition: transform .3s ease; z-index: 2; } .chats .col-chat .send-message-form .emoji-close-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .chats .col-chat .send-message-form .preview-wrapper { width: 100%; margin-top: 1rem; } .chats .truncated { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .chats .truncated + .semicolon { margin-right: 4px; } .chats .truncated span { word-break: break-all; white-space: initial; } .chats .thumbnail-wrapper { min-width: 56px; position: relative; } .chats .thumbnail { height: 56px; width: 56px; border-radius: 28px; flex-wrap: wrap; overflow: hidden; } .chats .thumbnail > div { min-width: 50%; font-size: 18px; background-color: #e6e6e6; background-position: center; background-size: cover; width: 100%; height: 100% !important; } .chats .thumbnail > .user-image { display: flex; line-height: 1.4rem; border-radius: 0; font-size: 18px; margin: 0; width: 100%; height: 100% !important; align-items: center; justify-content: center; } .chats .placeholder div.mock-item:nth-child(1) { opacity: calc(1.0 / 1.5); } .chats .placeholder div.mock-item:nth-child(2) { opacity: calc(1.0 / 3); } .chats .placeholder div.mock-item:nth-child(3) { opacity: calc(1.0 / 4.5); } .chats .placeholder .mock-item { position: relative; border-bottom: 1px solid #e4e4e4; padding: 20px 16px; display: flex; justify-content: space-between; height: 96px; } .chats .placeholder .mock-item > div { align-self: center; } .chats .placeholder .mock-item > div.mock-right { flex-grow: 1; align-self: initial; } .chats .placeholder .mock-item .mock { background: #f2f2f2; border: 1px solid #e4e4e4; border-radius: 2px; } .chats .placeholder .mock-item .mock-image { width: 56px; height: 56px; border-radius: 28px; margin-right: 20px; } .chats .placeholder .mock-item .mock-title { height: 16px; width: 50%; margin-bottom: 8px; } .chats .placeholder .mock-item .mock-last-message { height: 12px; margin-bottom: 8px; } .chats .placeholder .mock-item .mock-icons .mock { height: 12px; width: 25px; margin-right: 8px; display: inline-block; } .chats .placeholder .arrow-wrapper { margin: 0; top: 113px; left: auto; transform: translateX(195%); max-width: 254px; } .chats .placeholder .arrow-wrapper svg { float: none; left: -246px; max-height: 170px; position: absolute; top: -72px; transform: rotate(-37deg); width: 240px; padding: 0; } .chats .placeholder .arrow-wrapper p { float: none; margin: 0; padding: 0; width: 100%; } .chats .placeholder .arrow-wrapper p:first-of-type { margin-bottom: 20px; } .chats .chat-item { position: relative; border-bottom: 1px solid #e4e4e4; padding: 16px 16px 20px; display: flex; justify-content: space-between; cursor: pointer; } .chats .chat-item.active, .chats .chat-item:hover { background-color: rgba(95, 197, 241, 0.15); } .chats .chat-item .description { width: 100%; margin-left: 16px; } .chats .chat-item header { max-width: 240px; overflow: hidden; display: flex; justify-content: space-between; } .chats .chat-item header h2 { font-size: 15px; margin-bottom: 0; display: inline-block; max-width: 226px; flex: 1 0; font-weight: 600; margin-right: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .chats .chat-item header .last-date { font-size: 13px; flex: 0 1; width: 100%; opacity: 1; white-space: nowrap; padding-top: 2px; vertical-align: middle; transition: .3s linear; } .chats .chat-item .last-message { margin-bottom: 2px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 238px; line-height: 135%; font-size: 13px; } .chats .chat-item .last-message.unread { max-width: 204px; } .chats .chat-item .last-message.unread span { font-weight: bold; } .chats .chat-item .last-message div, .chats .chat-item .last-message span { display: inline; } .chats .chat-item .last-message > div { padding: 5px 0; } .chats .chat-item .last-message span { color: rgba(0, 0, 0, 0.6); font-size: 13px; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; } .chats .chat-item .last-message .data-wrapper { display: inline-block; font-size: 13px; } .chats .chat-item .last-message .data-wrapper .public-DraftEditor-content { white-space: nowrap !important; } .chats .chat-item .last-message .data-wrapper .public-DraftEditor-content > div > div { display: inline-block; margin-right: 4px; } .chats .chat-item .unread-counter { position: absolute; background: #488ed8; color: #fff; font-size: 13px; padding: 1.5px 6px; border-radius: 30px; bottom: 38px; right: 22px; font-weight: bold; } .chats .chat-item footer > span { display: inline-block; font-size: 12px; font-weight: 600; color: #787878; margin-right: 16px; } .chats .chat-item footer > span i { margin-right: 4px; font-size: 16px; } .chats .chat-item p { margin-bottom: 0; font-size: 1.4rem; } .chats .chat-item.active button, .chats .chat-item.active .button, .chats .chat-item:hover button, .chats .chat-item:hover .button { opacity: 1; } .chats .chat-item.active .last-date.disappear, .chats .chat-item:hover .last-date.disappear { width: 0; opacity: 0; } .chats .chat-item .button { cursor: pointer; position: absolute; z-index: 1; } .chats .chat-item .button.edit, .chats .chat-item .button.leave { right: 17px; } .chats .chat-item .button.edit span, .chats .chat-item .button.leave span { font-size: 2.4rem; } .chats .chat-item .button.edit { top: 5px; } .chats .chat-item .button.leave { bottom: 5px; } .chats .chat-item button, .chats .chat-item .button { opacity: 0; transition: .3s linear; } .chats .chat-item .warn { position: relative; left: -10px; margin-top: 10px; } @media screen and (max-width: 991px) { .chats .col-chats, .chats .chat-flex { max-height: calc(100vh - 62px); min-height: calc(100vh - 62px); height: calc(100vh - 62px); overflow-y: auto; overflow-x: hidden; } } .chats .disabled { pointer-events: none; opacity: 0.6; } .chats .chat-search { padding-left: 16px; padding-right: 16px; } .chats .chat-search input, .chats .chat-search .form-group[contenteditable='true'] { color: #B3B3B3; font-size: 15px; } .chats .chat-search label { color: #B3B3B3; font-size: 15px; } .channel-bubble { background-color: #488ed8; border-radius: 0.4rem; color: #fff; margin: 0 auto; max-width: 550px; padding: 5rem; position: relative; } .channel-bubble::after { background-color: #488ed8; content: ''; display: block; height: 2rem; position: absolute; transform: rotate(-45deg); width: 2rem; border-radius: 0.4rem; bottom: -.1rem; left: 50%; transform: rotate(-45deg) translateX(-50%); } .channel-bubble .error input, .channel-bubble .error .form-group[contenteditable='true'] { background-color: rgba(208, 2, 27, 0.1); } .channel-bubble .error span:not(.material-icons), .channel-bubble .success span:not(.material-icons) { color: #fff; } .channel-bubble button { color: #fff; } .channel-bubble button:hover { color: #F6704D; } .channel-bubble input, .channel-bubble .form-group[contenteditable='true'] { background-color: rgba(255, 255, 255, 0.1); border-color: transparent; color: #fff; } .channel-bubble input::placeholder, .channel-bubble .form-group[contenteditable='true']::placeholder { color: rgba(255, 255, 255, 0.5); } .channel-bubble h1 { font-size: 4.2rem; font-weight: 100; line-height: 5rem; text-align: center; } .channel-bubble .url-suggestion button { float: none; } .registration .channel-bubble h1, .registration .channel-bubble h3, .registration .channel-bubble label, .registration .channel-bubble p { color: #fff; } [role='navigation'] :export, .registration-page :export { emojiFontSize: 20px; } [role='navigation'] :export, .registration-page :export { emojiFontSize: 20px; } [role='navigation'] :export, .registration-page :export { emojiFontSize: 20px; } [role='navigation'] :export, .registration-page :export { emojiFontSize: 20px; } [role='navigation'] .hidden, .registration-page .hidden { display: none !important; } [role='navigation'] .visible-hidden, .registration-page .visible-hidden { visibility: hidden !important; } [role='navigation'] .visually-hidden, .registration-page .visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal; } @media only screen and (max-width: 767px) { [role='navigation'] .hidden-xs, .registration-page .hidden-xs { display: none !important; } } @media only screen and (min-width: 768px) { [role='navigation'] .hidden-sm, .registration-page .hidden-sm { display: none !important; } } @media only screen and (min-width: 992px) { [role='navigation'] .hidden-md, .registration-page .hidden-md { display: none !important; } } @media only screen and (min-width: 1200px) { [role='navigation'] .hidden-lg, .registration-page .hidden-lg { display: none !important; } } [role='navigation'] .visible-sm-block, .registration-page .visible-sm-block { display: none; } @media only screen and (min-width: 768px) { [role='navigation'] .visible-sm-block, .registration-page .visible-sm-block { display: block; } } [role='navigation'] .visible-md-block, .registration-page .visible-md-block { display: none; } @media only screen and (min-width: 992px) { [role='navigation'] .visible-md-block, .registration-page .visible-md-block { display: block; } } [role='navigation'] .disabled, [role='navigation'] .disabled button, [role='navigation'] .disabled .button, [role='navigation'] input:disabled, [role='navigation'] .form-group:disabled[contenteditable='true'], [role='navigation'] input[disabled], [role='navigation'] .form-group[disabled][contenteditable='true'], .disabled [role='navigation'] button, [role='navigation'] button[disabled], .disabled [role='navigation'] .button, [role='navigation'] .button[disabled], .registration-page .disabled, .registration-page .disabled button, .registration-page .disabled .button, .registration-page input:disabled, .registration-page .form-group:disabled[contenteditable='true'], .registration-page input[disabled], .registration-page .form-group[disabled][contenteditable='true'], .disabled .registration-page button, .registration-page button[disabled], .disabled .registration-page .button, .registration-page .button[disabled] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: #e4e4e4; cursor: not-allowed; } [role='navigation'] button, [role='navigation'] .button, .registration-page button, .registration-page .button { background: transparent; border: 1px solid transparent; border-radius: 0.8rem; color: #8f8f8f; cursor: pointer; display: inline-block; font: 1.4rem "Basier Circle", Texta, Helvetica, "Helvetica Neue", Arial, Helmet, Freesans; font-weight: 700; letter-spacing: normal; line-height: 135%; padding: 0.2rem 0.6rem 0.3rem; text-align: center; text-decoration: none; transition: background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear; } [role='navigation'] button span:not(.material*), [role='navigation'] .button span:not(.material*), .registration-page button span:not(.material*), .registration-page .button span:not(.material*) { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 700; } [role='navigation'] button.active, [role='navigation'] .button.active, .registration-page button.active, .registration-page .button.active { border-color: #f6704d; outline: none; border-color: transparent; color: #588BC2; } [role='navigation'] button:active, [role='navigation'] .button:active, .registration-page button:active, .registration-page .button:active { color: #1b4e83; } [role='navigation'] button.primary, [role='navigation'] .button.primary, .registration-page button.primary, .registration-page .button.primary { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #F6704D; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: 3px; padding: 8.9px 3rem 9px; } [role='navigation'] button.primary:hover, [role='navigation'] .button.primary:hover, .registration-page button.primary:hover, .registration-page .button.primary:hover { background: #fe4514; } [role='navigation'] button.primary:focus, [role='navigation'] .button.primary:focus, .registration-page button.primary:focus, .registration-page .button.primary:focus { background: #ea380a; } [role='navigation'] button.primary:active, [role='navigation'] .button.primary:active, .registration-page button.primary:active, .registration-page .button.primary:active { background: #b92d08; } [role='navigation'] button.primary span, [role='navigation'] .button.primary span, .registration-page button.primary span, .registration-page .button.primary span { font-weight: 700; } [role='navigation'] button.primary.ghost, [role='navigation'] .button.primary.ghost, .registration-page button.primary.ghost, .registration-page .button.primary.ghost { background-color: #fff; border: 1px solid #F6704D; color: #F6704D; } [role='navigation'] button.primary.ghost:hover, [role='navigation'] .button.primary.ghost:hover, .registration-page button.primary.ghost:hover, .registration-page .button.primary.ghost:hover { border-color: #fe4514; color: #fe4514; } [role='navigation'] button.primary.ghost:focus, [role='navigation'] .button.primary.ghost:focus, .registration-page button.primary.ghost:focus, .registration-page .button.primary.ghost:focus { border-color: #ea380a; color: #ea380a; } [role='navigation'] button.primary.ghost:active, [role='navigation'] .button.primary.ghost:active, .registration-page button.primary.ghost:active, .registration-page .button.primary.ghost:active { border-color: #b92d08; color: #b92d08; } [role='navigation'] button.primary.large, [role='navigation'] .button.primary.large, .registration-page button.primary.large, .registration-page .button.primary.large { padding: 0.8rem 2.4rem; } [role='navigation'] button.large, [role='navigation'] .button.large, .registration-page button.large, .registration-page .button.large { padding: 0 2.6rem; height: 55px; margin-top: 15px; } [role='navigation'] button.warn, [role='navigation'] button.warning, [role='navigation'] .button.warn, [role='navigation'] .button.warning, .registration-page button.warn, .registration-page button.warning, .registration-page .button.warn, .registration-page .button.warning { color: #8f8f8f; } [role='navigation'] button.warn:hover, [role='navigation'] button.warning:hover, [role='navigation'] .button.warn:hover, [role='navigation'] .button.warning:hover, .registration-page button.warn:hover, .registration-page button.warning:hover, .registration-page .button.warn:hover, .registration-page .button.warning:hover { color: #d0021b; } [role='navigation'] button.warn:focus, [role='navigation'] button.warn.active, [role='navigation'] button.warning:focus, [role='navigation'] button.warning.active, [role='navigation'] .button.warn:focus, [role='navigation'] .button.warn.active, [role='navigation'] .button.warning:focus, [role='navigation'] .button.warning.active, .registration-page button.warn:focus, .registration-page button.warn.active, .registration-page button.warning:focus, .registration-page button.warning.active, .registration-page .button.warn:focus, .registration-page .button.warn.active, .registration-page .button.warning:focus, .registration-page .button.warning.active { color: #d0021b; } [role='navigation'] button.warn:active, [role='navigation'] button.warning:active, [role='navigation'] .button.warn:active, [role='navigation'] .button.warning:active, .registration-page button.warn:active, .registration-page button.warning:active, .registration-page .button.warn:active, .registration-page .button.warning:active { color: #9d0214; } [role='navigation'] button.cta, [role='navigation'] .button.cta, .registration-page button.cta, .registration-page .button.cta { color: #F6704D; } [role='navigation'] button.cta:hover, [role='navigation'] .button.cta:hover, .registration-page button.cta:hover, .registration-page .button.cta:hover { color: #fe4514; } [role='navigation'] button.cta:focus, [role='navigation'] button.cta.active, [role='navigation'] .button.cta:focus, [role='navigation'] .button.cta.active, .registration-page button.cta:focus, .registration-page button.cta.active, .registration-page .button.cta:focus, .registration-page .button.cta.active { color: #ea380a; } [role='navigation'] button.cta:active, [role='navigation'] .button.cta:active, .registration-page button.cta:active, .registration-page .button.cta:active { color: #b92d08; } .disabled [role='navigation'] button, [role='navigation'] button[disabled], .disabled [role='navigation'] .button, [role='navigation'] .button[disabled], .disabled .registration-page button, .registration-page button[disabled], .disabled .registration-page .button, .registration-page .button[disabled] { color: #e4e4e4; } .disabled [role='navigation'] button.primary, [role='navigation'] button[disabled].primary, .disabled [role='navigation'] .button.primary, [role='navigation'] .button[disabled].primary, .disabled .registration-page button.primary, .registration-page button[disabled].primary, .disabled .registration-page .button.primary, .registration-page .button[disabled].primary { background-color: #e4e4e4; border-color: transparent; color: #fff; } [role='navigation'] button .material-icons:first-child, [role='navigation'] .button .material-icons:first-child, .registration-page button .material-icons:first-child, .registration-page .button .material-icons:first-child { margin-right: 3px; font-size: 2rem; } [role='navigation'] button .material-icons:only-child, [role='navigation'] .button .material-icons:only-child, .registration-page button .material-icons:only-child, .registration-page .button .material-icons:only-child { margin: 0; } [role='navigation'] button.big, [role='navigation'] .button.big, .registration-page button.big, .registration-page .button.big { padding: 31.15px 72px; } [role='navigation'] button.interpunct + [role='navigation'] button.interpunct, [role='navigation'] .button.interpunct + [role='navigation'] button.interpunct, .registration-page button.interpunct + [role='navigation'] button.interpunct, .registration-page .button.interpunct + [role='navigation'] button.interpunct, [role='navigation'] button.interpunct + [role='navigation'] .button.interpunct, [role='navigation'] .button.interpunct + [role='navigation'] .button.interpunct, .registration-page button.interpunct + [role='navigation'] .button.interpunct, .registration-page .button.interpunct + [role='navigation'] .button.interpunct, [role='navigation'] button.interpunct + .registration-page button.interpunct, [role='navigation'] .button.interpunct + .registration-page button.interpunct, .registration-page button.interpunct + .registration-page button.interpunct, .registration-page .button.interpunct + .registration-page button.interpunct, [role='navigation'] button.interpunct + .registration-page .button.interpunct, [role='navigation'] .button.interpunct + .registration-page .button.interpunct, .registration-page button.interpunct + .registration-page .button.interpunct, .registration-page .button.interpunct + .registration-page .button.interpunct { position: relative; } [role='navigation'] button.interpunct + [role='navigation'] button.interpunct::before, [role='navigation'] .button.interpunct + [role='navigation'] button.interpunct::before, .registration-page button.interpunct + [role='navigation'] button.interpunct::before, .registration-page .button.interpunct + [role='navigation'] button.interpunct::before, [role='navigation'] button.interpunct + [role='navigation'] .button.interpunct::before, [role='navigation'] .button.interpunct + [role='navigation'] .button.interpunct::before, .registration-page button.interpunct + [role='navigation'] .button.interpunct::before, .registration-page .button.interpunct + [role='navigation'] .button.interpunct::before, [role='navigation'] button.interpunct + .registration-page button.interpunct::before, [role='navigation'] .button.interpunct + .registration-page button.interpunct::before, .registration-page button.interpunct + .registration-page button.interpunct::before, .registration-page .button.interpunct + .registration-page button.interpunct::before, [role='navigation'] button.interpunct + .registration-page .button.interpunct::before, [role='navigation'] .button.interpunct + .registration-page .button.interpunct::before, .registration-page button.interpunct + .registration-page .button.interpunct::before, .registration-page .button.interpunct + .registration-page .button.interpunct::before { content: ' \2219 '; position: absolute; left: -0.2rem; top: 0.4rem; color: #8f8f8f; } [role='navigation'] button.interpunct + [role='navigation'] button.interpunct.new::before, [role='navigation'] .button.interpunct + [role='navigation'] button.interpunct.new::before, .registration-page button.interpunct + [role='navigation'] button.interpunct.new::before, .registration-page .button.interpunct + [role='navigation'] button.interpunct.new::before, [role='navigation'] button.interpunct + [role='navigation'] .button.interpunct.new::before, [role='navigation'] .button.interpunct + [role='navigation'] .button.interpunct.new::before, .registration-page button.interpunct + [role='navigation'] .button.interpunct.new::before, .registration-page .button.interpunct + [role='navigation'] .button.interpunct.new::before, [role='navigation'] button.interpunct + .registration-page button.interpunct.new::before, [role='navigation'] .button.interpunct + .registration-page button.interpunct.new::before, .registration-page button.interpunct + .registration-page button.interpunct.new::before, .registration-page .button.interpunct + .registration-page button.interpunct.new::before, [role='navigation'] button.interpunct + .registration-page .button.interpunct.new::before, [role='navigation'] .button.interpunct + .registration-page .button.interpunct.new::before, .registration-page button.interpunct + .registration-page .button.interpunct.new::before, .registration-page .button.interpunct + .registration-page .button.interpunct.new::before { top: 1rem; } [role='navigation'] button.input-button, [role='navigation'] .button.input-button, .registration-page button.input-button, .registration-page .button.input-button { display: flex; flex-direction: row; line-height: inherit !important; letter-spacing: inherit; padding: 0; border-radius: 0; } @media only screen and (min-width: 375px) { [role='navigation'] button.input-button, [role='navigation'] .button.input-button, .registration-page button.input-button, .registration-page .button.input-button { padding: 0 1rem; } } @media only screen and (min-width: 1200px) { [role='navigation'] button.input-button, [role='navigation'] .button.input-button, .registration-page button.input-button, .registration-page .button.input-button { padding: 8px 2rem; } } [role='navigation'] button.input-button:hover, [role='navigation'] .button.input-button:hover, .registration-page button.input-button:hover, .registration-page .button.input-button:hover { color: #fe4514; } [role='navigation'] button.input-button:focus, [role='navigation'] button.input-button.active, [role='navigation'] .button.input-button:focus, [role='navigation'] .button.input-button.active, .registration-page button.input-button:focus, .registration-page button.input-button.active, .registration-page .button.input-button:focus, .registration-page .button.input-button.active { color: #ea380a; } [role='navigation'] button.input-button:active, [role='navigation'] .button.input-button:active, .registration-page button.input-button:active, .registration-page .button.input-button:active { color: #1b4e83; } [role='navigation'] button.input-button span, [role='navigation'] .button.input-button span, .registration-page button.input-button span, .registration-page .button.input-button span { vertical-align: middle; } [role='navigation'] button.input-button label, [role='navigation'] .button.input-button label, .registration-page button.input-button label, .registration-page .button.input-button label { margin-bottom: 0; height: inherit; font-weight: inherit; font-size: inherit; display: inherit; align-items: inherit; } [role='navigation'] button.input-button label .file-uploader, [role='navigation'] .button.input-button label .file-uploader, .registration-page button.input-button label .file-uploader, .registration-page .button.input-button label .file-uploader { display: none; } [role='navigation'] button.input-button .media-add, [role='navigation'] .button.input-button .media-add, .registration-page button.input-button .media-add, .registration-page .button.input-button .media-add { color: #588BC2; width: 65px; min-width: 47px; display: none; font-weight: bold; letter-spacing: 1px; } @media only screen and (min-width: 768px) { [role='navigation'] button.input-button .media-add, [role='navigation'] .button.input-button .media-add, .registration-page button.input-button .media-add, .registration-page .button.input-button .media-add { display: block; width: auto; } } @media only screen and (max-width: 767px) { [role='navigation'] button.input-button .media-add, [role='navigation'] .button.input-button .media-add, .registration-page button.input-button .media-add, .registration-page .button.input-button .media-add { min-width: inherit; } } [role='navigation'] button.input-button .material-icons, [role='navigation'] .button.input-button .material-icons, .registration-page button.input-button .material-icons, .registration-page .button.input-button .material-icons { color: #588BC2; } @media only screen and (min-width: 768px) { [role='navigation'] button.input-button .material-icons:not(:only-child), [role='navigation'] .button.input-button .material-icons:not(:only-child), .registration-page button.input-button .material-icons:not(:only-child), .registration-page .button.input-button .material-icons:not(:only-child) { padding-right: 0.5rem; } } [role='navigation'] button.open-details-button, .registration-page button.open-details-button { float: right; opacity: 1; transition: opacity .3s ease; } [role='navigation'] button.open-details-button.hide, .registration-page button.open-details-button.hide { opacity: 0; pointer-events: none; } [role='navigation'] .header-actions-buttons, .registration-page .header-actions-buttons { position: absolute; right: 2rem; top: .8rem; } @media only screen and (min-width: 768px) { [role='navigation'] .header-actions-buttons, .registration-page .header-actions-buttons { top: 1.8rem; } } [role='navigation'] .blue-text, .registration-page .blue-text { font-size: 1.4rem; color: #588BC2; } [role='navigation'] .uploader-close, .registration-page .uploader-close { position: absolute; top: 0.2rem; right: 1.3rem; } [role='complementary'] { background: #3c3d52; height: 7rem; line-height: 7rem; text-align: right; width: 100%; } @media only screen and (min-width: 992px) { [role='complementary'] { left: 0; max-width: 100vw; position: fixed; top: 0; width: 100%; z-index: 101; } } [role='complementary'] svg { vertical-align: middle; } [role='complementary'] ul, [role='complementary'] li { display: block; margin: 0; padding: 0; text-align: center; } @media only screen and (min-width: 992px) { [role='complementary'] ul, [role='complementary'] li { display: inline-block; } } @media only screen and (min-width: 992px) { [role='complementary'] .links { margin: 0 2rem 0 0; } } [role='complementary'] a { color: #fff; display: inline-block; font-size: 1.8rem; height: 7rem; margin: 0 1rem; text-decoration: none; } @media only screen and (min-width: 992px) { [role='complementary'] a { padding: 0 2rem; } } [role='complementary'] .login .primary { height: auto; } @media only screen and (min-width: 992px) { [role='complementary'] .login .primary { padding: 6px 3rem; } } [role='complementary'] .login li:first-child .primary { background-color: transparent; color: #f6704d; } [role='complementary'] nav { position: relative; } [role='complementary'] .logo { height: 7rem; left: -25px; position: absolute; top: 0; } @media only screen and (min-width: 992px) { [role='complementary'] .logo { left: -15px; } } [role='complementary'] .logo a { padding: 0; } [role='complementary'] .overlay { height: 7rem; transition: height 0.3s linear; } [role='complementary'] .overlay ul { left: -99em; opacity: 0; position: absolute; transition: opacity 0.3s linear; } @media only screen and (min-width: 992px) { [role='complementary'] .overlay ul { opacity: 1; position: static; } } .open [role='complementary'] .overlay { background: rgba(48, 48, 65, 0.9); bottom: 0; height: 100vh; left: 0; max-width: 100vw; padding-top: 7rem; position: fixed; right: 0; text-align: center; top: 0; width: 100%; z-index: 100; } @media only screen and (min-width: 992px) { .open [role='complementary'] .overlay { background: transparent; height: 7rem; padding: 0; position: static; text-align: right; width: auto; } } .open [role='complementary'] .overlay ul { opacity: 1; position: static; } [role='complementary'] .logo, [role='complementary'] .burger { z-index: 103; } [role='complementary'] .burger { cursor: pointer; height: 7rem; position: absolute; right: 15px; top: 0; } [role='complementary'] .burger svg { fill: #fff; height: 23px; width: 23px; } [role='complementary'] .burger path { transform-origin: .75rem 1.6rem; transition: transform 0.3s linear, opacity 0.3s linear; } [role='complementary'] .burger path:nth-of-type(2) { opacity: 1; } .open [role='complementary'] .burger path:first-of-type { transform: rotate(-45deg); } .open [role='complementary'] .burger path:nth-of-type(2) { opacity: 0; } .open [role='complementary'] .burger path:nth-of-type(3) { transform: rotate(45deg); } [role='complementary'] .icon span, [role='complementary'] .icon svg { display: inline-block; height: 30px; width: 30px; } [role='complementary'] .icon span { background-size: cover; vertical-align: middle; } [role='complementary'] .icon svg { border: 1px solid #fff; border-radius: 50%; fill: #fff; padding: 3px; } [role='complementary'] [href='/me']:first-child { padding-right: 0; } [role='complementary'] [href='/me']:last-child { padding-left: 0; } [role='navigation'] { margin: 0 auto; max-width: 90%; } @media only screen and (min-width: 768px) { [role='navigation'] { max-width: 728px; } } @media only screen and (min-width: 992px) { [role='navigation'] { max-width: 952px; } } @media only screen and (min-width: 1200px) { [role='navigation'] { max-width: 1160px; } } html.open { height: 100vh; max-width: 100vw; overflow: hidden; width: 100%; } @media only screen and (min-width: 992px) { html.open { height: auto; overflow: auto; } } @media only screen and (min-width: 992px) { .navbar-present { padding-top: 7rem; } } .embed-preview [class^="item"], .embed-preview [class^="teaser"], .embed-preview [class^="comment"], .embed-preview [class^="timeline"], .embed-preview [class^="quote"], .embed-preview p, .embed-preview span { margin: 0; padding: 0; font-weight: normal; vertical-align: baseline; background: transparent; font-size: 100%; border: none; color: inherit; box-sizing: border-box; text-transform: unset; line-height: unset; } .embed-toggle--selected { background-color: white !important; } .embed-toggle--selected .alignment { background-color: #488ED8; } .embed-warning-icon { cursor: pointer; color: orange; font-size: 20px; } .embed-tooltip-container { margin-left: -18px; } .embed-snackbar-content { display: flex; align-items: center; } .embed-preview { font-weight: 400; font-size: 100%; line-height: 1.5; color: #212529; text-align: left; -ms-overflow-style: none; } .embed-preview a { text-decoration: none; color: inherit; } .embed-preview img { max-height: unset; } @media only screen and (min-width: 992px) { .embed-preview h3 { width: 100%; } } .embed-preview .item .item_content, .embed-preview .teaser_content { white-space: pre-wrap; padding: 1em 1.5em 0; } .embed-preview .item .item_text, .embed-preview .teaser_text { margin-bottom: 0.5em; padding-left: 1em; word-break: break-word; } .embed-preview .item .item_text b, .embed-preview .teaser_text b { font-weight: bold; } .embed-preview .item .item_media img, .embed-preview .teaser_media img, .embed-preview .image img { display: block; width: 100%; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.875em; margin-left: -1em; margin-right: 0.5em; color: #1CABE2; white-space: nowrap; opacity: 1; } .embed-preview .item .item_content .item_title { font-family: "Univers Next W01", Roboto, sans-serif; word-break: break-word; line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; } .embed-preview .item .item_tagline, .embed-preview .teaser_tagline { color: #6c757d; font-size: 0.875em; margin-bottom: 0.25em; word-break: break-word; } .embed-preview .card-container { margin-bottom: .5em; } .embed-preview .card-container:last-child { margin-bottom: 0; } .embed-preview .centered { margin: 0 auto; } .embed-preview .relative-wrap { position: relative; } .embed-preview .embed-wrapper--logo { margin-top: 4px; } .embed-preview .hidden-scroll { -ms-overflow-style: none; scrollbar-width: none; } .embed-preview .hidden-scroll::-webkit-scrollbar { display: none; } .embed-preview .error { background-color: #7f7f7f; display: flex; justify-content: center; align-items: center; font-family: "Univers Next W01", Roboto, sans-serif; font-size: 2.5em; width: 100%; text-align: center; height: 100vh; } @media (max-width: 768px) { .embed-preview .item .item_text, .embed-preview .teaser_text { font-size: 0.8em; padding-left: 0; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.7em; margin-left: 0; margin-right: 0.5em; } } .embed-preview .link-wrapper { display: block; cursor: pointer; } .embed-preview .single-container { padding: 4px 4px 6px 4px; } .embed-preview .show-btn { text-align: right; } .embed-preview .show-btn_root { font-size: 12px; font-weight: 600; } .embed-preview .item .item_content, .embed-preview .teaser_content { white-space: pre-wrap; padding: 1em 1.5em 0; } .embed-preview .item .item_text, .embed-preview .teaser_text { margin-bottom: 0.5em; padding-left: 1em; word-break: break-word; } .embed-preview .item .item_text b, .embed-preview .teaser_text b { font-weight: bold; } .embed-preview .item .item_media img, .embed-preview .teaser_media img, .embed-preview .image img { display: block; width: 100%; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.875em; margin-left: -1em; margin-right: 0.5em; color: #1CABE2; white-space: nowrap; opacity: 1; } .embed-preview .item .item_content .item_title { font-family: "Univers Next W01", Roboto, sans-serif; word-break: break-word; line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; } .embed-preview .item .item_tagline, .embed-preview .teaser_tagline { color: #6c757d; font-size: 0.875em; margin-bottom: 0.25em; word-break: break-word; } .embed-preview .card-container { margin-bottom: .5em; } .embed-preview .card-container:last-child { margin-bottom: 0; } .embed-preview .centered { margin: 0 auto; } .embed-preview .relative-wrap { position: relative; } .embed-preview .embed-wrapper--logo { margin-top: 4px; } .embed-preview .hidden-scroll { -ms-overflow-style: none; scrollbar-width: none; } .embed-preview .hidden-scroll::-webkit-scrollbar { display: none; } .embed-preview .error { background-color: #7f7f7f; display: flex; justify-content: center; align-items: center; font-family: "Univers Next W01", Roboto, sans-serif; font-size: 2.5em; width: 100%; text-align: center; height: 100vh; } @media (max-width: 768px) { .embed-preview .item .item_text, .embed-preview .teaser_text { font-size: 0.8em; padding-left: 0; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.7em; margin-left: 0; margin-right: 0.5em; } } .embed-preview .link-wrapper { display: block; cursor: pointer; } .embed-preview .single-container { padding: 4px 4px 6px 4px; } .embed-preview .show-btn { text-align: right; } .embed-preview .show-btn_root { font-size: 12px; font-weight: 600; } .embed-preview .item { font-size: 16px; background-color: #fff; border-radius: 0.25em; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); display: flex; flex-direction: column; font-family: "Univers W01", Roboto, sans-serif; overflow: hidden; } .embed-preview .item .item_content .item_title { font-size: 1.75em; } .embed-preview .item .item_content--indent { margin-top: 2.25em; } .embed-preview .item .item_title--indent { padding-top: 2em; } .embed-preview .item .item_text { opacity: 0.75; } .embed-preview .item .item_text.item_text--no-indent { padding-left: 0; } .embed-preview .item .item_footer { padding-left: 1.5em; padding-bottom: 1em; margin-top: 1em; } .embed-preview .item .item_footer .item_functions { position: absolute; right: 0; bottom: 0; } .embed-preview .item .item_footer .item_icon { padding: 0.75em 1em; } .embed-preview .item .item_footer .item_icon svg { width: 20px; height: auto; vertical-align: middle; } .embed-preview .item .item_footer .item_icon svg path { fill: #6c757d; } .embed-preview .item .item_footer .item_icon a:hover { cursor: pointer; } .embed-preview .item .item_footer .item_icon a:hover path { fill: #212529; } .embed-preview .item .item_footer .item_posted-by { font-size: 0.875em; opacity: 0.4; } .embed-preview .item .item_author { font-weight: bold; } .embed-preview .item .item_audio { margin-top: -27px; margin-left: 0.75em; margin-right: 0.75em; } .embed-preview .item .item_audio audio { width: 100%; z-index: 200; position: relative; outline: none; } .embed-preview .item .item_audio--no-teaser { margin-top: 2.5em; } .embed-preview .item .item_caption { word-break: break-word; opacity: .45; margin-bottom: 14px; font-size: .8em; } @media (max-width: 768px) { .embed-preview .item .item_content .item_title { font-size: 1.4em !important; } .embed-preview .item .item_footer .item_posted-by { font-size: 0.7em; } } .embed-preview .timeline { font-family: "Univers W01", Roboto, sans-serif; font-size: 16px; padding: 0 0.25em 0.25em; background-color: #0e5571; border-radius: 0.3em; position: relative; word-break: break-word; } .embed-preview .timeline .timeline_header--preview { padding: 2em 1em 2em; display: block; } .embed-preview .timeline .timeline_header--preview .timeline_title { font-size: 1.4em; text-transform: uppercase; font-weight: bold; } .embed-preview .timeline .timeline_title { font-family: "Univers Next W01", Roboto, sans-serif; text-transform: uppercase; font-size: 1.75em; line-height: 1; padding: 0 10px 0 10px; max-width: 450px; } .embed-preview .timeline .timeline_intro { opacity: 0.85; font-size: 1em; padding: 0 10px 0 10px; max-width: 600px; line-height: 1.2; } .embed-preview .timeline .timeline_header { padding: 2em 1em 2em; min-height: 4em; color: #fff; } .embed-preview .timeline .timeline_header--hidden { padding: 0.5em 0 0 0; min-height: unset; } .embed-preview .timeline .grid-item { padding: 0 .25em; } @media (min-width: 768px) { .embed-preview .timeline .timeline_header .intro { font-size: 1.25em; } } @media (max-width: 599px) { .embed-preview .timeline .grid-item { padding: 0 0.25em 0.25em; } } @media (max-width: 1259px) { .embed-preview .timeline .timeline_title { margin-right: 70px; max-width: 600px; } .embed-preview .timeline .timeline_intro { margin-right: 70px; } } @media (min-width: 1260px) { .embed-preview .timeline .timeline_header { align-items: flex-start; display: flex; } } .embed-preview .item .item_content, .embed-preview .teaser_content { white-space: pre-wrap; padding: 1em 1.5em 0; } .embed-preview .item .item_text, .embed-preview .teaser_text { margin-bottom: 0.5em; padding-left: 1em; word-break: break-word; } .embed-preview .item .item_text b, .embed-preview .teaser_text b { font-weight: bold; } .embed-preview .item .item_media img, .embed-preview .teaser_media img, .embed-preview .image img { display: block; width: 100%; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.875em; margin-left: -1em; margin-right: 0.5em; color: #1CABE2; white-space: nowrap; opacity: 1; } .embed-preview .item .item_content .item_title { font-family: "Univers Next W01", Roboto, sans-serif; word-break: break-word; line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; } .embed-preview .item .item_tagline, .embed-preview .teaser_tagline { color: #6c757d; font-size: 0.875em; margin-bottom: 0.25em; word-break: break-word; } .embed-preview .card-container { margin-bottom: .5em; } .embed-preview .card-container:last-child { margin-bottom: 0; } .embed-preview .centered { margin: 0 auto; } .embed-preview .relative-wrap { position: relative; } .embed-preview .embed-wrapper--logo { margin-top: 4px; } .embed-preview .hidden-scroll { -ms-overflow-style: none; scrollbar-width: none; } .embed-preview .hidden-scroll::-webkit-scrollbar { display: none; } .embed-preview .error { background-color: #7f7f7f; display: flex; justify-content: center; align-items: center; font-family: "Univers Next W01", Roboto, sans-serif; font-size: 2.5em; width: 100%; text-align: center; height: 100vh; } @media (max-width: 768px) { .embed-preview .item .item_text, .embed-preview .teaser_text { font-size: 0.8em; padding-left: 0; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.7em; margin-left: 0; margin-right: 0.5em; } } .embed-preview .link-wrapper { display: block; cursor: pointer; } .embed-preview .single-container { padding: 4px 4px 6px 4px; } .embed-preview .show-btn { text-align: right; } .embed-preview .show-btn_root { font-size: 12px; font-weight: 600; } .embed-preview .teaser { position: relative; z-index: 100; transition: 0.2s background-color ease-out; font-family: "Basier Circle", Roboto, sans-serif; font-size: 16px; } .embed-preview .teaser:hover { background-color: #f8f9fa; cursor: pointer; } .embed-preview .teaser_text { opacity: 0.5; font-size: 0.875em; } .embed-preview .teaser_content--indent { margin-top: 2.25em; } .embed-preview .teaser_title { word-break: break-word; line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; font-family: "Basier Circle", Roboto, sans-serif; font-size: 1.25em; letter-spacing: 0.23px; } .embed-preview .teaser--standard .teaser_title { font-size: 1.25em; } .embed-preview .teaser--standard .teaser_content { padding-left: 2.5em; } .embed-preview .teaser--standard .teaser_text { padding-left: 0; } .embed-preview .teaser--small { overflow: hidden; } .embed-preview .teaser--small .teaser_title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; text-transform: none; font-size: 1em; margin-bottom: 0; } .embed-preview .teaser--small .teaser_grouptitle { padding: 1em 1.5rem 0 2.5rem; } .embed-preview .teaser--small .teaser_grouptitle .teaser_tagline { margin-bottom: 0.375em; } .embed-preview .teaser--small .teaser_small-image { float: right; padding: 0.625em; } .embed-preview .teaser--small .teaser_small-image .image { width: 120px; height: 120px; } .embed-preview .teaser--small .teaser_small-image img { width: 120px; height: 120px; object-fit: cover; } .embed-preview .teaser--big { overflow: hidden; color: #fff; display: flex; flex-direction: column; position: relative; } .embed-preview .teaser--big .teaser_media:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(5deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.01)); } .embed-preview .teaser--big .teaser_content { bottom: 0; color: inherit; position: absolute; } .embed-preview .teaser--big .teaser_content .teaser_title { font-size: 1.5em; letter-spacing: 0.31px; margin-bottom: 1em; text-transform: unset; } .embed-preview .teaser--big .teaser_content .teaser_tagline { color: inherit; letter-spacing: 2px; } .embed-preview .teaser--big-no-image { min-height: 250px; } @media (max-width: 768px) { .embed-preview .teaser--small .teaser_content { padding: 1em 1.5em 0; } .embed-preview .teaser--small .teaser_grouptitle { padding: 1em 1.5em 0; } .embed-preview .teaser--small .teaser_small-image img { width: 90px; height: 90px; } .embed-preview .teaser--standart .teaser_content { padding-left: 1.5em; } .embed-preview .teaser--big .teaser_content .teaser_title { font-size: 1.25em; } } .embed-preview .quote { padding: 1em 0 0 1em; font-size: 16px; } .embed-preview .quote .quote_header { display: flex; margin-left: -1em; font-size: 0.875em; margin-bottom: 1em; line-height: 1.4; align-items: center; } .embed-preview .quote .quote_content { font-size: 1.25em; font-weight: 500; white-space: pre-wrap; word-break: break-word; } .embed-preview .quote .quote_content--instagram { font-size: 0.875em; } .embed-preview .quote .quote_header-content .quote_author { font-weight: bold; } .embed-preview .quote .quote_header-content .quote_meta { opacity: 0.4; } .embed-preview .quote .quote_date { white-space: nowrap; } .embed-preview .quote .quote_author-image { width: 40px; height: 40px; margin-right: 0.75em; } .embed-preview .quote .quote_author-image img { max-width: 100%; height: auto; border-radius: 50%; } @media (max-width: 768px) { .embed-preview .quote { padding-left: 0; } .embed-preview .quote .quote_content { font-size: 1em; } .embed-preview .quote .quote_content--instagram { font-size: 0.875em; } } .embed-preview .item .item_content, .embed-preview .teaser_content { white-space: pre-wrap; padding: 1em 1.5em 0; } .embed-preview .item .item_text, .embed-preview .teaser_text { margin-bottom: 0.5em; padding-left: 1em; word-break: break-word; } .embed-preview .item .item_text b, .embed-preview .teaser_text b { font-weight: bold; } .embed-preview .item .item_media img, .embed-preview .teaser_media img, .embed-preview .image img { display: block; width: 100%; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.875em; margin-left: -1em; margin-right: 0.5em; color: #1CABE2; white-space: nowrap; opacity: 1; } .embed-preview .item .item_content .item_title { font-family: "Univers Next W01", Roboto, sans-serif; word-break: break-word; line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; } .embed-preview .item .item_tagline, .embed-preview .teaser_tagline { color: #6c757d; font-size: 0.875em; margin-bottom: 0.25em; word-break: break-word; } .embed-preview .card-container { margin-bottom: .5em; } .embed-preview .card-container:last-child { margin-bottom: 0; } .embed-preview .centered { margin: 0 auto; } .embed-preview .relative-wrap { position: relative; } .embed-preview .embed-wrapper--logo { margin-top: 4px; } .embed-preview .hidden-scroll { -ms-overflow-style: none; scrollbar-width: none; } .embed-preview .hidden-scroll::-webkit-scrollbar { display: none; } .embed-preview .error { background-color: #7f7f7f; display: flex; justify-content: center; align-items: center; font-family: "Univers Next W01", Roboto, sans-serif; font-size: 2.5em; width: 100%; text-align: center; height: 100vh; } @media (max-width: 768px) { .embed-preview .item .item_text, .embed-preview .teaser_text { font-size: 0.8em; padding-left: 0; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.7em; margin-left: 0; margin-right: 0.5em; } } .embed-preview .link-wrapper { display: block; cursor: pointer; } .embed-preview .single-container { padding: 4px 4px 6px 4px; } .embed-preview .show-btn { text-align: right; } .embed-preview .show-btn_root { font-size: 12px; font-weight: 600; } .embed-preview .comment { font-size: 16px; padding: 1em 1.5em 0 1.5em; position: relative; z-index: 200; white-space: pre-wrap; margin-bottom: 0; box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 2.5em 2.5em -2.5em rgba(0, 0, 0, 0.1); word-break: break-word; } .embed-preview .comment .comment_text { padding-bottom: 1em; padding-left: 1em; } .embed-preview .comment--logo { padding-top: 3.5em; } @media (max-width: 768px) { .embed-preview .comment { font-size: 0.875em; padding-left: 0.5em; } } .embed-preview .logo { font-size: 16px; width: 80px; height: 45px; position: absolute; right: 1em; top: -4px; text-align: center; z-index: 100; transition: 0.3s opacity cubic-bezier(0.25, 0.46, 0.45, 0.94), 0.3s transform cubic-bezier(0.25, 0.46, 0.45, 0.94); } .embed-preview .logo img { height: auto; max-height: 100%; } .embed-preview .logo.logo-portrait { height: 85px; } .embed-preview .logo--video-playing { opacity: 0; transform: translateY(-0.5em); } .embed-preview .logo--big { right: 0; margin-right: 0.5em; height: 56px; width: 128px; } @media (max-width: 768px) { .embed-preview .logo--big { width: 80px; } } .embed-preview .item .item_content, .embed-preview .teaser_content { white-space: pre-wrap; padding: 1em 1.5em 0; } .embed-preview .item .item_text, .embed-preview .teaser_text { margin-bottom: 0.5em; padding-left: 1em; word-break: break-word; } .embed-preview .item .item_text b, .embed-preview .teaser_text b { font-weight: bold; } .embed-preview .item .item_media img, .embed-preview .teaser_media img, .embed-preview .image img { display: block; width: 100%; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.875em; margin-left: -1em; margin-right: 0.5em; color: #1CABE2; white-space: nowrap; opacity: 1; } .embed-preview .item .item_content .item_title { font-family: "Univers Next W01", Roboto, sans-serif; word-break: break-word; line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; } .embed-preview .item .item_tagline, .embed-preview .teaser_tagline { color: #6c757d; font-size: 0.875em; margin-bottom: 0.25em; word-break: break-word; } .embed-preview .card-container { margin-bottom: .5em; } .embed-preview .card-container:last-child { margin-bottom: 0; } .embed-preview .centered { margin: 0 auto; } .embed-preview .relative-wrap { position: relative; } .embed-preview .embed-wrapper--logo { margin-top: 4px; } .embed-preview .hidden-scroll { -ms-overflow-style: none; scrollbar-width: none; } .embed-preview .hidden-scroll::-webkit-scrollbar { display: none; } .embed-preview .error { background-color: #7f7f7f; display: flex; justify-content: center; align-items: center; font-family: "Univers Next W01", Roboto, sans-serif; font-size: 2.5em; width: 100%; text-align: center; height: 100vh; } @media (max-width: 768px) { .embed-preview .item .item_text, .embed-preview .teaser_text { font-size: 0.8em; padding-left: 0; } .embed-preview .item .item_date, .embed-preview .comment .comment_date { font-size: 0.7em; margin-left: 0; margin-right: 0.5em; } } .embed-preview .link-wrapper { display: block; cursor: pointer; } .embed-preview .single-container { padding: 4px 4px 6px 4px; } .embed-preview .show-btn { text-align: right; } .embed-preview .show-btn_root { font-size: 12px; font-weight: 600; } .embed-preview .image { font-size: 16px; min-height: 1px; position: relative; font-family: 'Basier Circle', sans-serif; } .embed-preview .image .content-image { position: absolute; top: 0; left: 0; opacity: 0; } .embed-preview .image .image_copyright { position: absolute; bottom: 0; right: 0; height: 16px; margin-bottom: 4px; line-height: 16px; text-align: right; color: #FFFFFF; width: 100%; display: flex; z-index: 100; justify-content: flex-end; } .embed-preview .image .image_copyright .text { font-size: 12.08px; text-shadow: 1px 1px 2px black; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 1em; } .embed-preview .image .image_copyright .text:first-letter { font-size: 9px; } .embed-preview .image--loaded .content-image { opacity: 1; transition: opacity .5s ease-in-out; } .embed-form .input-height { height: 56px; } .embed-form .input-select-height { height: 56px; padding: 16px 0 17px 15px; } .embed-form .input-select-height .material-icons { display: none; } .embed-form_content { padding: 24px; border: 1px solid #e4e4e4; } .embed-form_content--demo { padding: 10px 10px 0; } .embed-form_customize { font-weight: 500; font-size: 24px; color: black; padding: 24px 0 16px; line-height: 34px; } .embed-form_title { font-weight: 600; font-size: 14px; line-height: 17px; color: #474747; opacity: 1; padding-bottom: 12px; } .embed-form_row { margin-bottom: 10px; } .embed-form_title--radio { padding-bottom: 8px; } .embed-form_divider { margin: 0 -24px 0 -24px; border-bottom: 1px solid #e4e4e4; } .embed-form .embed-type-section { padding: 24px 0 23px 0; } .embed-form .embed-form_pin-section { padding-bottom: 16px; } .embed-form .embed-logo-section, .embed-form .embed-color-section, .embed-form .embed-header-section, .embed-form .embed-language-section, .embed-form .embed-display-options-section, .embed-form .embed-font-section { padding-top: 24px; } .embed-form_adornment.material-icons { color: #858584; font-size: 20px; cursor: pointer; } .embed-text-field { margin-top: 0 !important; } .embed-text-field:last-child { margin-bottom: 0 !important; } .color-field-preview { width: 18px; height: 18px; cursor: pointer; border-radius: 2px; background-color: black; border: 1px solid black; } .end-container { width: 100%; display: flex; justify-content: flex-end; } .embed-demo { padding: 20px; max-height: 100vh; overflow-y: auto; } .embed-demo_frame { margin-top: 50px; } .embed-history { border: 1px solid #E8E8E8; } .embed-history_title { font-weight: 600; font-size: 14px; line-height: 17px; color: #858584; margin: 25px 24px 16px 24px; } .embed-history_content { max-height: 1100px; overflow-y: auto; } .embed-item { position: relative; padding: 12px 24px; box-shadow: inset 0 1px 0 #F5F4F3, inset 0 -1px 0 #F5F4F3; } .embed-item_close { top: 12px; right: 26px; position: absolute; } .embed-item_info { font-style: normal; font-weight: normal; font-size: 10px; line-height: 14px; color: #474747; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .embed-item_controls { min-height: 40px; display: flex; justify-content: space-between; } .embed-item_content { display: flex; justify-content: space-between; } .embed-item_warning { color: #F6704D; border-radius: 10px; margin-right: 12px; } .embed-item_warning .material-icons { width: 20px; font-size: 20px; height: 18px; } .embed-item_row { display: flex; flex-wrap: wrap; } .embed-item_main-info { min-height: 42px; flex: 0 1 175px; margin-right: 120px; } .embed-item_title { display: flex; flex: 0 1 auto; max-width: 160px; width: 100%; margin-right: 50px; } .embed-item_description { font-size: 14px; color: black; word-break: break-word; line-height: 20px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .embed-item_main-info { padding: 10px; max-width: 100%; flex: 1 1 100%; margin: 0; } .embed-item_info { font-size: 14px; margin-right: unset; } .embed-item_content { display: block; } .embed-item_title { max-width: 200px; } .embed-item_description { max-width: 200px; } .embed-item_controls { display: block; } } .card-select { outline: none; margin: 0; max-width: unset; border-radius: .5rem; } .card-select .bottom-bar { font-size: 1.4rem; } .card-select_header { color: #474747 !important; display: block !important; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-select_header p { margin: 0; } .card-select_header .material-icons { font-size: 18px; color: #F6704D; margin-right: 8px; } .card-select_preview { height: 450px; overflow-y: auto; } .card-select_preview .item { display: block; } .card-select_title { font-weight: 600; font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.92); margin-bottom: 8px; } .card-select_mix-content { min-height: 160px; } .card-select_subtitle { font-size: 14px; line-height: 20px; color: black; overflow: hidden; text-overflow: ellipsis; } .card-select footer { border-style: solid; } .card-select header { border-style: solid; } .embed-select { position: relative; } .embed-select .Select-arrow-zone { color: rgba(0, 0, 0, 0.87) !important; } .embed-select .Select-control { border: none; box-shadow: none; } .embed-select .Select { border: 1px solid #dedede; border-radius: 8px; font-size: 1.4rem; padding: 9px 0 9px 0; height: 56px; } .embed-select .Select:hover { border-color: rgba(0, 0, 0, 0.87); } .embed-select .Select-input { padding-left: 15px; } .embed-select .Select-placeholder { padding-left: 15px; } .embed-select .Select.is-focused { border-color: #488ed8; border-width: 2px; } .embed-select .Select-value { padding-left: 15px !important; } .embed-select label { background: #fff; color: rgba(0, 0, 0, 0.87); font-size: 1.2rem; left: 10px; padding: 0 5px; position: absolute; top: -7px; z-index: 1; } .embed-demo { padding: 10px; max-height: 100vh; display: flex; flex-flow: column nowrap; } .embed-demo_frame { margin-top: 30px; overflow: auto; } .embed-demo_collapse { text-align: right; } .embed-demo_copy { margin-top: 0 !important; } .embed-demo_form-control-label { height: 30px !important; } /******************************* Flex Layout *******************************/ .layout { /* alignment in cross axis */ /* alignment in main axis */ } .layout.horizontal, .layout.horizontal-reverse, .layout.vertical, .layout.vertical-reverse { display: flex; } .layout.inline { display: inline-flex; } .layout.horizontal { flex-direction: row; } .layout.horizontal-reverse { flex-direction: row-reverse; } .layout.vertical { flex-direction: column; } .layout.vertical-reverse { flex-direction: column-reverse; } .layout.wrap { flex-wrap: wrap; } .layout.no-wrap { flex-wrap: nowrap; } .layout.wrap-reverse { flex-wrap: wrap-reverse; } .layout.start { align-items: flex-start; } .layout.center, .layout.center-center { align-items: center; } .layout.end { align-items: flex-end; } .layout.start-justified { justify-content: flex-start; } .layout.baseline { align-items: baseline; } .layout.center-justified, .layout.center-center { justify-content: center; } .layout.end-justified { justify-content: flex-end; } .layout.around-justified { justify-content: space-around; } .layout.justified { justify-content: space-between; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; } .flex { flex: 1; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-4 { flex: 4; } .flex-5 { flex: 5; } .flex-6 { flex: 6; } .flex-7 { flex: 7; } .flex-8 { flex: 8; } .flex-9 { flex: 9; } .flex-10 { flex: 10; } .flex-11 { flex: 11; } .flex-12 { flex: 12; } .flex-wrap { flex-flow: wrap; } /* self alignment */ .self-start { align-self: flex-start; } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; } .badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .badge:empty { display: none; } .badge.badge-primary { color: #fff; background-color: #488ed8; } .badge.badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; } .hover-sensitive--wrapper .hover-sensitive--target { visibility: hidden; transition: all .3s; opacity: 0; } .hover-sensitive--wrapper:hover .hover-sensitive--target { visibility: visible; transition: all 1.3s; opacity: 1; } h1.separator, .h1.separator { border-bottom: 1px solid #e2e2e2; color: #2A2A2A; font-weight: 500; line-height: 38px; margin-bottom: 1.4rem; } h1.separator:not(:first-child), .h1.separator:not(:first-child) { margin-top: 3.6rem; } h2.separator, .h2.separator { border-bottom: 1px solid #e2e2e2; color: #2A2A2A; font-weight: 500; line-height: 38px; margin-bottom: 1.4rem; } h2.separator:not(:first-child), .h2.separator:not(:first-child) { margin-top: 3.6rem; } h3.separator, .h3.separator { border-bottom: 1px solid #e2e2e2; color: #2A2A2A; font-weight: 500; line-height: 38px; margin-bottom: 1.4rem; } h3.separator:not(:first-child), .h3.separator:not(:first-child) { margin-top: 3.6rem; } h4.separator, .h4.separator { border-bottom: 1px solid #e2e2e2; color: #2A2A2A; font-weight: 500; line-height: 38px; margin-bottom: 1.4rem; } h4.separator:not(:first-child), .h4.separator:not(:first-child) { margin-top: 3.6rem; } .text-blue { color: #588BC2 !important; } .text-blue:hover { color: #356496 !important; } .text-tint-blue { color: #338DEF !important; } .text-tint-blue:hover { color: #0e66c5 !important; } .medium-font { font-size: 18px; } .w-600 { font-weight: 600; } body { font-family: "Basier Circle", Texta, Helvetica, "Helvetica Neue", Arial, Helmet, Freesans; } input[type=number].hide-spin::-webkit-inner-spin-button, .form-group[contenteditable='true'][type=number].hide-spin::-webkit-inner-spin-button, input[type=number].hide-spin::-webkit-outer-spin-button, .form-group[contenteditable='true'][type=number].hide-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /*!* * React Select * ============ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs * MIT License: https://github.com/JedWatson/react-select */ .Select { position: relative; min-width: 160px; } .Select, .Select div, .Select input, .Select .form-group[contenteditable='true'], .Select span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .Select.is-disabled > .Select-control { background-color: #f9f9f9; } .Select.is-disabled > .Select-control:hover { box-shadow: none; } .Select.is-disabled .Select-arrow-zone { cursor: default; pointer-events: none; opacity: 0.35; } .Select-control { background-color: #fff; border-radius: 4px; color: #333; cursor: default; display: table; border-spacing: 0; border-collapse: separate; height: 36px; outline: none; overflow: hidden; position: relative; width: 100%; } .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .Select-control .Select-input:focus { outline: none; } .is-searchable.is-open > .Select-control { cursor: text; } .is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border: 1px solid #ccc; background: #fff; } .is-open > .Select-control .Select-arrow { top: -2px; border-color: transparent transparent #999; border-width: 0 5px 5px; } .is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .Select-placeholder, .Select--single > .Select-control .Select-value { bottom: 0; color: #aaa; line-height: 34px; padding-left: 10px; padding-right: 10px; position: absolute; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .has-value.Select--single > .Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: #333; } .has-value.Select--single > .Select-control .Select-value a.Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { cursor: pointer; text-decoration: none; } .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { outline: none; text-decoration: underline; } .Select-input { height: 34px; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .Select-input > input, .Select-input > .form-group[contenteditable='true'] { width: 100%; background: none transparent; border: 0 none; box-shadow: none; cursor: default; display: inline-block; font-family: inherit; font-size: inherit; margin: 0; outline: none; line-height: 14px; /* For IE 8 compatibility */ padding: 8px 0 12px; /* For IE 8 compatibility */ -webkit-appearance: none; } .is-focused .Select-input > input, .is-focused .Select-input > .form-group[contenteditable='true'] { cursor: text; } .has-value.is-pseudo-focused .Select-input { opacity: 0; } .Select-control:not(.is-searchable) > .Select-input { outline: none; } .Select-loading-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 16px; } .Select-loading { -webkit-animation: Select-animation-spin 400ms infinite linear; -o-animation: Select-animation-spin 400ms infinite linear; animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ccc; border-right-color: #333; display: inline-block; position: relative; vertical-align: middle; } .Select-clear-zone { -webkit-animation: Select-animation-fadeIn 200ms; -o-animation: Select-animation-fadeIn 200ms; animation: Select-animation-fadeIn 200ms; color: #999; cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 17px; } .Select-clear-zone:hover { color: #D0021B; } .Select-clear { display: inline-block; font-size: 18px; line-height: 1; } .Select--multi .Select-clear-zone { width: 17px; } .Select-arrow-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 25px; } .Select-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; height: 0; width: 0; position: relative; } .is-open .Select-arrow, .Select-arrow-zone:hover > .Select-arrow { border-top-color: #666; } .Select--multi .Select-multi-value-wrapper { display: inline-block; margin-top: -5px; } .Select .Select-aria-only { display: inline-block; height: 1px; width: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left; } @-webkit-keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; top: 100%; width: 100%; z-index: 999; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .Select-option.is-selected { background-color: #f5faff; /* Fallback color for IE 8 */ background-color: rgba(0, 126, 255, 0.04); color: #333; } .Select-option.is-focused { /* Fallback color for IE 8 */ color: #333; } .Select-option.is-disabled { color: #cccccc; cursor: default; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0; } .Select--multi.has-value .Select-input { margin-left: 5px; } .Select--multi .Select-value { /* Fallback color for IE 8 */ border-radius: 2px; /* Fallback color for IE 8 */ display: inline-block; font-size: 0.9em; line-height: 1.4; margin-left: 5px; margin-top: 5px; vertical-align: top; } .Select--multi .Select-value-icon, .Select--multi .Select-value-label { display: inline-block; vertical-align: middle; } .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px; } .Select--multi a.Select-value-label { cursor: pointer; text-decoration: none; } .Select--multi a.Select-value-label:hover { text-decoration: underline; } .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; /* Fallback color for IE 8 */ padding: 1px 5px 3px; } .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus { /* Fallback color for IE 8 */ } .Select--multi .Select-value-icon:active { /* Fallback color for IE 8 */ } .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333; } .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3; } .Select--multi.is-disabled .Select-value-icon:hover, .Select--multi.is-disabled .Select-value-icon:focus, .Select--multi.is-disabled .Select-value-icon:active { background-color: #fcfcfc; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .hover-effect .Select-option.is-focused { background-color: #ebf5ff; background-color: rgba(0, 126, 255, 0.08); color: #333; } .hover-effect .Select-value { left: inherit; right: 3rem; } .hover-effect .Select-value { left: 0; right: inherit; } .hover-effect .Select-value-label { font-size: 1.4rem; } .hover-effect .Select-control { background-color: #fff; border: 1px solid #e4e4e4; border-radius: 4px; } .hover-effect .Select-clear-zone { display: none; } body { font-size: 1.3rem; } .page .page-content { display: flex; width: 100%; flex-direction: column; min-height: 100vh; } @media only screen and (min-width: 992px) { .page .page-content { flex-direction: initial; } } .page .form-label { margin-left: -2px; margin-right: 0; padding: 0; } .page .form-label span { font-size: 1.3rem; letter-spacing: 1.27px; font-weight: 600; color: #488ed8; } .page main { flex-grow: 1; flex-basis: calc(90% - 220px); background: #fff; min-width: 1%; } .page main > div { height: 100%; } .page main .button { font-weight: normal; color: rgba(0, 0, 0, 0.87); font-size: 1.5rem; line-height: 20px; } .page main .button.cta { color: #488ed8; } .page main .Select { min-width: 100px; } .page main .Select .title { font-size: 1.3rem; } .page main .Select .material-icons { left: -1rem; } .page main .Select .Select-arrow-zone { right: 3px; } .page main .Select .Select-value { padding-right: 0; padding-left: 15px; } .page main .count-padding { padding-bottom: 50px; } .page main .main-footer { padding: 20px 90px; border-top: 1px solid #eee; } .page main .main-footer.fixed { position: fixed; bottom: 0; max-width: 1200px; width: calc(100% - 222px); background: #fff; z-index: 111; } .page main .main-footer .add-to-users { display: flex; margin: 25px 0 16px; } .page main .main-footer .add-to-users .gray-bck { background-color: #F5F5F5; padding: 30px 40px; width: 40%; } .page main .main-footer .add-to-users .gray-bck + .gray-bck { border-left: 1px solid #e0e0e0; width: 60%; } .page main .main-footer .add-to-users .text, .page main .main-footer .add-to-users .radio-group { color: rgba(0, 0, 0, 0.87); font-size: 15px; } .page main .main-footer .add-to-users .radio-group .label { margin: 0 2rem 6px 0; } .page main .main-footer .add-to-users .text { margin-right: 24px; } .page main .main-footer .add-to-users .radio-group, .page main .main-footer .add-to-users .checkbox-group { margin-top: -5px; } .page main .main-footer .select-info { display: flex; align-items: center; } .page main .main-footer .select-info-title { color: rgba(0, 0, 0, 0.87); font-size: 15px; line-height: 20px; margin-left: 16px; } .page main .main-footer .show-count-user { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 4px; color: #fff; background-color: #588BC2; font-weight: 600; letter-spacing: 0.2px; line-height: 24px; text-align: center; } .page main .main-footer .add-user { margin-right: 16px; } .page main .success-msg b { color: rgba(0, 0, 0, 0.87); font-weight: normal; font-size: 1.7rem; } .page main .main-content { overflow-x: hidden; max-width: 1200px; padding: 60px 90px 30px 90px; flex-grow: 1; } @media only screen and (max-width: 767px) { .page main .main-content { padding: 30px 20px; } } .page main .main-content.admin-page .header:last-of-type { width: 215px; } .page main .main-content .form--content { border: 0; max-width: none; margin: 0; } .page main .main-content .form--content .body { justify-content: flex-end; } .page main .main-content .form--content .large { margin-top: 0; } .page main .main-content .readers-stats { text-align: left; padding: 0; } .page main .main-content > header { max-width: 850px; margin-bottom: 25px; } .page main .main-content > header.with-border { margin-bottom: 64px; } .page main .main-content > header h2 { font-size: 3.6rem; font-weight: 300; line-height: 4.5rem; color: rgba(0, 0, 0, 0.87); } .page main .main-content > header p { margin-top: 10px; font-size: 1.7rem; line-height: 2.8rem; color: rgba(0, 0, 0, 0.87); } .page main .main-content .between-justified { justify-content: space-between; } .page main .main-content .layout.group-search { margin-bottom: 1.8rem; } @media only screen and (max-width: 767px) { .page main .main-content .layout.group-search { flex-direction: column; } } .page main .main-content .layout button span { font-size: 1.3rem; font-weight: 600; letter-spacing: 1.27px; line-height: 16px; } .page main .main-content .layout button span.push { letter-spacing: 0.35px; } .page main .main-content .layout button.btn-show span { font-size: 1.2rem; letter-spacing: 0; } .page main .main-content .without-cursor * { cursor: default; } .page main .main-content .channel-hover:hover { background: rgba(0, 0, 0, 0.04); } .page main .main-content .wrapper-table { margin: 20px 0 0; overflow-x: auto; text-align: center; width: 100%; } .page main .main-content .wrapper-table > .table { max-width: none; } .page main .main-content .wrapper-table .header .no-wrap { white-space: nowrap; user-select: none; } .page main .main-content .wrapper-table .header .material-icons { cursor: pointer; } .page main .main-content .wrapper-table .header .filter-channel { display: flex; align-items: center; } .page main .main-content .wrapper-table .header .filter-channel input, .page main .main-content .wrapper-table .header .filter-channel .form-group[contenteditable='true'] { font-size: 1.4rem; } .page main .main-content .wrapper-table .header .filter-channel input::placeholder, .page main .main-content .wrapper-table .header .filter-channel .form-group[contenteditable='true']::placeholder { font-size: 1.4rem; } .page main .main-content .wrapper-table .header .filter-channel .search-icon { background: rgba(0, 0, 0, 0.14); border-radius: 100%; padding: 2px; margin: 0 3px; } .page main .main-content .wrapper-table .header .filter-channel .search-icon:hover { background: rgba(0, 0, 0, 0.2); } .page main .main-content .wrapper-table .header .filter-channel .search-field div { height: 40px; margin: 0; } .page main .main-content .wrapper-table .header .filter-channel .search-field input, .page main .main-content .wrapper-table .header .filter-channel .search-field .form-group[contenteditable='true'] { padding: 0 5px 0 20px; } .page main .main-content .wrapper-table .header .filter-channel .search-field .material-icons { top: 12px; left: 3px; font-size: 1.4rem; } .page main .main-content .wrapper-table .sub-table:hover { background-color: transparent; } .page main .main-content .wrapper-table .sub-table .head-table:after { border: 0; } .page main .main-content .wrapper-table .sub-table .wrapper-table { margin: 0; } .page main .main-content .wrapper-table .sub-table td { padding-right: 0; padding-left: 0; text-align: right; } .page main .main-content .wrapper-table .sub-table td > div { border: 1px solid #e3e3e3; border-radius: 4px; } .page main .main-content .wrapper-table .sub-table .row { height: 32px; } .page main .main-content .wrapper-table .sub-table .row > div { padding: 0 0 0 24px; } .page main .main-content .wrapper-table .sub-table .relative { border: 0; } .page main .main-content .wrapper-table .sub-table .relative:last-of-type { width: 50px; } .page main .main-content .wrapper-table .sub-table .table .header { padding: 15px 0 15px 24px; } .page main .main-content .wrapper-table .sub-table .table .header:nth-of-type(1) { width: 195px; } .page main .main-content .wrapper-table .sub-table .table .header:nth-of-type(2) { width: 195px; } .page main .main-content .wrapper-table .sub-table .table .header:nth-of-type(3) { width: 345px; } .page main .main-content .wrapper-table .sub-table .table .header:last-of-type { width: 30px; padding: 0 6px; } .page main .main-content .wrapper-table .sub-table .wrapper-table { max-height: 300px; border: 0; } .page main .main-content .wrapper-table .sub-table .wrapper-table + button { margin: 16px 0; } .page main .main-content .wrapper-table .sub-table .wrapper-table .table { background-color: #f5f5f5; margin-bottom: 0; } .page main .main-content .wrapper-table .sub-table .wrapper-table .table .row .relative { width: 180px; } .page main .main-content .wrapper-table .sub-table .wrapper-table .table .row .relative:last-of-type { width: 30px; padding: 0 6px; } .page main .main-content .wrapper-table .sub-table .wrapper-table .table .row .relative:nth-of-type(3) { width: 345px; } .page main .main-content .wrapper-table .sub-table .wrapper-table .table .row .relative:nth-of-type(3), .page main .main-content .wrapper-table .sub-table .wrapper-table .table .row .relative:nth-of-type(3) div { white-space: normal; } .page main .main-content .wrapper-table.user { min-height: 678px; position: relative; } .page main .main-content .wrapper-table.user > div { margin: 0; } .page main .main-content .wrapper-table.user > div > .head-table .header { padding: 20px 10px 20px 0; } .page main .main-content .wrapper-table.user > div > .head-table .header:first-of-type { min-width: 24px; width: 24px; padding: 2px; } .page main .main-content .wrapper-table.user > div > div > .row .relative { padding: 0 10px 0 0; } .page main .main-content .wrapper-table.user > div > div > .row .relative:first-of-type { min-width: 24px; width: 24px; padding: 2px; } .page main .main-content .wrapper-table.user .absolute { position: absolute; border: 0; z-index: 10; } .page main .main-content .wrapper-table.user .hover-checkbox:hover .checkbox-content { display: block; } .page main .main-content .wrapper-table.user .row:hover .show-hover, .page main .main-content .wrapper-table.user .relative:hover .show-hover { display: inline-block; margin-right: 12px; position: relative; } .page main .main-content .wrapper-table.user .row:hover .show-hover.deg, .page main .main-content .wrapper-table.user .relative:hover .show-hover.deg { transform: rotate(-18deg); } .page main .main-content .wrapper-table.user .row .black-text, .page main .main-content .wrapper-table.user .relative .black-text { color: rgba(0, 0, 0, 0.54); font-size: 1.9rem; } .page main .main-content .wrapper-table.user .row .cursor-pointer, .page main .main-content .wrapper-table.user .row .cursor-pointer *, .page main .main-content .wrapper-table.user .relative .cursor-pointer, .page main .main-content .wrapper-table.user .relative .cursor-pointer * { cursor: pointer; } .page main .main-content .wrapper-table.user .row .medium-text, .page main .main-content .wrapper-table.user .relative .medium-text { font-size: 1.4rem; } .page main .main-content .wrapper-table.user .row.open .relative, .page main .main-content .wrapper-table.user .relative.open .relative { border: 0; } .page main .main-content .wrapper-table.channel .relative:last-of-type { width: 15vw; } .page main .main-content .table { margin-left: 0; } .page main .main-content .table .header { background: #f5f5f5; padding: 20px 0 20px 10px; border: 0; min-width: 75px; max-width: 850px; font-size: 1.2rem; letter-spacing: 0.38px; line-height: 16px; } .page main .main-content .table .header .material-icons { font-size: 1.4rem; } .page main .main-content .table .header .sidebar-relative.min-height > div { min-height: 610px; left: -240px; } .page main .main-content .table .header .sidebar-relative .search-field .material-icons { font-size: 2rem; top: 2.6rem; } .page main .main-content .table .header .sidebar-relative input, .page main .main-content .table .header .sidebar-relative .form-group[contenteditable='true'] { padding-left: 4rem; font-size: 1.5rem; line-height: 20px; } .page main .main-content .table .header .search-field .material-icons { font-size: 2.4rem; } .page main .main-content .table .row:hover .show-hover { display: block; position: absolute; top: 0; } .page main .main-content .table .row:hover .hide-hover { display: none; } .page main .main-content .table .row .relative { position: relative; } .page main .main-content .table .row td, .page main .main-content .table .row div, .page main .main-content .table .row a { line-height: normal; white-space: nowrap; overflow: hidden; } .page main .main-content .table .row a { border: 0; color: #2A2A2A; padding: 0; } .page main .main-content .table .row .hide-hover, .page main .main-content .table .row button:not(:only-child) { padding: 0 5px; } .page main .main-content .table .row .show-hover { display: none; } .page main .main-content .input-label .material-icons { display: none; } .page main .main-content .input-label .input-menu-height { padding: 16px 0 17px 15px; } .page main .main-content .search-field { max-width: 328px; width: 100%; position: relative; } .page main .main-content .search-field div { width: 100%; height: 56px; border-radius: 4px; max-width: 420px; background-color: #ededed; } .page main .main-content .search-field div input::placeholder, .page main .main-content .search-field div .form-group[contenteditable='true']::placeholder { color: #000; font-size: 1.7rem; line-height: 1.9rem; } .page main .main-content .search-field div label { margin-top: -5px; } .page main .main-content .search-field div label, .page main .main-content .search-field div input, .page main .main-content .search-field div .form-group[contenteditable='true'] { font-size: 1.6rem; letter-spacing: 0.15px; line-height: 1.5rem; height: 2.2rem; padding: 0 1rem 0 3.6rem; } @media only screen and (min-width: 768px) { .page main .main-content .search-field div label, .page main .main-content .search-field div input, .page main .main-content .search-field div .form-group[contenteditable='true'] { padding: 0 2rem 0 5.6rem; } } @media only screen and (min-width: 992px) { .page main .main-content .search-field div label, .page main .main-content .search-field div input, .page main .main-content .search-field div .form-group[contenteditable='true'] { font-size: 1.7rem; } } .page main .main-content .search-field .material-icons { color: rgba(0, 0, 0, 0.54); font-size: 2rem; left: 1.4rem; top: 3.3rem; position: absolute; z-index: 2; } @media only screen and (min-width: 768px) { .page main .main-content .search-field .material-icons { left: 1.6rem; } } .page .grey { color: rgba(0, 0, 0, 0.6); } .page .no-match { text-align: left; padding: 0 20px; margin: 0; background: #f5f5f5; } .page .text-btn { color: #488ED8; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.35px; line-height: 16px; text-align: right; margin: 0; } .page .text-btn.cta { height: 63px; } .page .text-btn.big-btn { text-align: left; white-space: normal; } .page .settings { padding-top: 4rem; border-top: 1px solid #cdcdcd; } .page .settings > div { padding-left: 0; } .page .settings .input-menu-height { height: 56px; } .page .settings .input-menu-height p { position: absolute; bottom: -20px; font-size: 1.2rem; } .page .settings p { color: #262626; font-size: 1.3rem; line-height: 20px; font-weight: 500; margin: 0; } .page .settings h4.title { color: #262626; font-size: 1.8rem; font-weight: 600; line-height: 19px; margin-bottom: 20px; } .page .settings hr { border: 1px solid #979797; opacity: 0.2; margin: 20px 0; } .page .settings .gray-bckg { border-radius: 4px; background-color: #ECECEC; } .page .settings .gray-bckg span { color: #807F7F; padding: 4px 6px; font-size: 1.2rem; line-height: 14px; } .page .settings .pubnub { border-bottom: 1px solid #e2e2e2; display: flex; align-items: center; justify-content: space-between; } .page .settings .pubnub label { width: 100%; align-items: center; justify-content: inherit; margin: 0; } .page .settings .custom-email-description { display: flex; flex-direction: column; padding: 5px 5px 20px 5px; } .page .settings .wrapper-info { display: flex; flex-direction: column; } @media only screen and (min-width: 992px) { .page .settings .wrapper-info { height: 120px; flex-wrap: wrap; } } .page .settings .wrapper-info p { margin-bottom: 14px; margin-right: 5rem; } .page .settings .wrapper-info .gray-bckg { margin-right: 14px; } .page .settings .wrapper-info span + span { font-size: 1.2rem; line-height: 14px; margin-left: 7px; } .page .settings .separator { padding-bottom: 16px; } .page .settings .separator.next { padding-top: 50px; } .page .settings .separator, .page .settings .separator h1 { color: #2A2A2A; margin: 0; color: rgba(0, 0, 0, 0.87); font-size: 1.7rem; font-weight: 600; letter-spacing: 0.2px; line-height: 22px; } .page .settings .disabled-label, .page .settings .enabled-label { position: relative; } .page .settings .disabled-label input, .page .settings .disabled-label .form-group[contenteditable='true'], .page .settings .enabled-label input, .page .settings .enabled-label .form-group[contenteditable='true'] { font-size: 1.8rem; } .page .settings .disabled-label .material-icons, .page .settings .enabled-label .material-icons { bottom: 1rem; top: 30px; color: #000; font-size: 2rem; right: 10px; width: 2rem; height: 3rem; position: absolute; z-index: 1; } .page .settings .disabled-label input, .page .settings .disabled-label .form-group[contenteditable='true'] { opacity: 0.6; background-color: transparent; } .page .settings .disabled-label .material-icons { opacity: 0.7; } .page .settings .enabled-label input, .page .settings .enabled-label .form-group[contenteditable='true'] { opacity: 1; background-color: transparent; } .page .settings.settings-danger { border: 1px solid #F6E0E4; position: relative; } .page .settings .line { width: 120px; height: 6px; border: 4px solid #fff8f9; position: absolute; top: -5px; right: 0; z-index: 1; } .page .settings .dangerzone { background-color: #fff8f9; margin-top: -4rem; padding-top: 4rem; width: 100%; } .page .settings .dangerzone p { color: rgba(0, 0, 0, 0.87); font-size: 1.7rem; line-height: 28px; text-align: center; max-width: 469px; margin: auto; } .page .settings .dangerzone .check { margin: 17px 0 16px; } .page .settings-tab { line-height: 16px; color: rgba(0, 0, 0, 0.6); } .page .settings-tab[aria-selected="true"] { color: #488ED8; } .page .settings-tab.danger { background-color: #F5F5F5; } .page .settings-tab.danger[aria-selected="true"] { background-color: #fff8f9; border: 1px solid #F6E0E4; color: #B00020; } .page .settings-tab input[disabled], .page .settings-tab .form-group[disabled][contenteditable='true'] { padding: 0; } .page .settings-tab span { padding: 0; font-size: 1.2rem; } .page .settings-tab span span span { font-weight: normal; padding: 0 12px; } .page .checkbox-header { left: -35px; position: absolute; z-index: 11; } .page .checkbox-header .checkmark { top: 0; } .page .checkbox-content { display: block; } .page .message.error { color: #f44336; } .page .badge { border-radius: 10px; background: #f7b84f; color: #fff; padding: 3px 5px; margin-left: 5px; } .popover-element > div { background-color: transparent; margin-top: -30px; box-shadow: none; } .popover-element .popover-window-channel { padding: 30px; } .popover-element .channels-hover-list { background-color: white; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); padding: 10px 0 5px; border-radius: 2px; width: 250px; text-align: center; display: flex; flex-direction: column; max-height: 400px; overflow-y: auto; } .popover-element .channels-hover-list a { color: rgba(0, 0, 0, 0.6); margin-bottom: 5px; cursor: pointer; } .push-tabs { margin-top: 80px; padding-bottom: 10px; margin-left: 90px; } .push-tabs a { font-size: 24px; line-height: 28px; } .push-tab-link { font-weight: 600; font-size: 24px; line-height: 28px; color: #b8b8b8; } .push-tab-link * { padding: 0; font-weight: 600; } .push-tab-link[aria-selected="true"] { color: #488ED8; } .push-tab-hr { margin-top: -12px; border-top-width: 2px; } .push-tab-hr { margin-top: -12px; border-top-width: 2px; } .headline-info { margin-bottom: 2rem; } .headline-info.push { margin-bottom: 1.1rem; } .headline-info.push h3 { font-size: 1.7rem; color: rgba(0, 0, 0, 0.87); font-weight: normal; line-height: 2.8rem; margin-bottom: 6.1rem; } [class^=settings] > div.add-user > .wrapper { max-width: 600px; margin: 20px auto; } .bannedIcon { font-size: 19px; color: #FF5560; }