@charset "UTF-8"; /* BEGIN ./app/assets/stylesheets/application.scss */ /* BEGIN ./app/assets/stylesheets/configuration.reset.scss */ .clear { clear: both; } /* END ./app/assets/stylesheets/configuration.reset.scss */ /* BEGIN ./app/assets/stylesheets/reset.scss */ /** Reset originally based on → HTML5 ✰ Boilerplate and → html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, 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, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } /* no padding reset so cellpadding works in rendered emails */ td, th { margin: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav 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; } ins { background-color: #ff9; color: #2F3941; text-decoration: none; } mark { background-color: #ff9; color: #2F3941; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #C2C8CC; /* Grey-400 */ margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* END RESET CSS */ /* some fonts code is originally from the YUI Library: developer.yahoo.com/yui/ Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages */ :root { --main-theme-color: white; } body { font-size: 14px; line-height: 1.285; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } body, strong, em, b, i, h1, h2, h3, h4, h5, h6, address, label, select, input, textarea, button { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } label, select, input, textarea, button { font-size: 99%; } html[lang|="ja"] { font-size: 12px; } pre, code, kbd, samp { font-family: Consolas, "Liberation Mono", Menlo, "Bitstream Vera Sans Mono", Courier, monospace; } /* Avoid zero-height body due to absolute positioning. Intended to fix the Edge driver used by our browser tests on Sauce Labs. */ html, body { height: 100%; width: 100%; } /* * minimal base styles */ body, select, input, textarea { color: #2F3941; /* #2F3941 ( Grey-800 ) */ } /* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ h1, h2, h3, h4, h5, h6 { font-weight: 600; } /* always force a scrollbar in non-IE: */ html { overflow-y: scroll; } /* always needs specific treatment or it will be inaccessible */ a.guideflow_hovered, a:active { outline: none; } ol { list-style-type: decimal; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; } small { font-size: 12px; } strong, b, th { font-weight: 600; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: 11px; } sup { vertical-align: super; font-size: 11px; } pre { padding: 15px; /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } /* hand cursor on clickable input elements and all links */ a, label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } /* webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; border: 0; } /* colors for form validity */ input:invalid, textarea:invalid { border-radius: 1px; box-shadow: 0 0 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* general form styling */ .classic_input, .ember-text-field, .ember-text-area { width: inherit; border: 1px solid #D8DCDE; border-radius: 2px; padding: 5px; /* Focus & hover colors taken from Garden 2018-05-22 */ } .classic_input.guideflow_hovered, .ember-text-field.guideflow_hovered, .ember-text-area.guideflow_hovered { border-color: #5293c7 !important; } .classic_input:focus, .ember-text-field:focus, .ember-text-area:focus { border-color: #1f73b7 !important; box-shadow: 0 0 0 3px rgba(31, 115, 183, 0.35) !important; outline: thick none !important; } .link { color: #1f73b7; cursor: pointer; } .link_light { color: #1f73b7; cursor: pointer; } .link_light.guideflow_hovered, .link_light:focus { text-decoration: underline; } a, a.guideflow_hovered { text-decoration: none; } /* END ./app/assets/stylesheets/reset.scss */ /* icon sprites */ .current_collaborators .zd-tag-item.agent:after, .user-picker-menu-base .zd-tag-item.agent:after, .user-picker-menu .photo_badge.agent, .ccs-menu .photo_badge.agent, .requester-menu .photo_badge.agent, .user_photo.agent .photo_badge, .agent.user_assume_photo .photo_badge, .section.ticket .notice .control, .stacked_menu .section .task.complete .status, .property_box .suggestions li.ui-menu-item.group .icon, .zd-menu-item.group > .zd-menu-item-icon, .zd-selectmenu-base.group .icon, .ticket .property_box .requester.form_field.group-selection .ui-button-text, .assignee_widget li.ui-menu-item.group .icon, .assignee_widget.group-selection .ui-button-text, .stacked_menu .section .task.started .status, .section.ticket .notice .information, .user_photo_editable .editable-icon, .user_photo.shared .photo_badge, .shared.user_assume_photo .photo_badge, .user_photo.end_user .photo_badge, .end_user.user_assume_photo .photo_badge, .property_box .suggestions li.ui-menu-item.agent .icon, .zd-menu-item.agent > .zd-menu-item-icon, .zd-selectmenu-base.agent .icon, .agent .icon, .ticket .property_box .requester.form_field.agent-selection .ui-button-text, .assignee_widget li.ui-menu-item.agent .icon, .assignee_widget.agent-selection .ui-button-text, .comment_input .requester-no-handle .icon-warning, .comment_input .channelback-not-supported .icon-warning { background: url(https://html-assets-prod.guideflow.com/10d8ab806a830d05d79e2ba050cc4bd58ac16123) no-repeat; } .current_collaborators .zd-tag-item.agent:after, .user-picker-menu-base .zd-tag-item.agent:after, .user-picker-menu .photo_badge.agent, .ccs-menu .photo_badge.agent, .requester-menu .photo_badge.agent, .user_photo.agent .photo_badge, .agent.user_assume_photo .photo_badge { background-position: 0px 0px; } .section.ticket .notice .control { background-position: 0px -30px; } .stacked_menu .section .task.complete .status { background-position: 0px -60px; } .property_box .suggestions li.ui-menu-item.group .icon, .zd-menu-item.group > .zd-menu-item-icon, .zd-selectmenu-base.group .icon, .ticket .property_box .requester.form_field.group-selection .ui-button-text, .assignee_widget li.ui-menu-item.group .icon, .assignee_widget.group-selection .ui-button-text { background-position: 0px -104px; } .stacked_menu .section .task.started .status { background-position: 0px -120px; } .section.ticket .notice .information { background-position: 0px -150px; } .user_photo_editable .editable-icon { background-position: 0px -250px; } .user_photo.shared .photo_badge, .shared.user_assume_photo .photo_badge { background-position: 0px -417px; } .user_photo.end_user .photo_badge, .end_user.user_assume_photo .photo_badge { background-position: 0px -435px; } .property_box .suggestions li.ui-menu-item.agent .icon, .zd-menu-item.agent > .zd-menu-item-icon, .zd-selectmenu-base.agent .icon, .agent .icon, .ticket .property_box .requester.form_field.agent-selection .ui-button-text, .assignee_widget li.ui-menu-item.agent .icon, .assignee_widget.agent-selection .ui-button-text { background-position: 0px -465px; } .comment_input .requester-no-handle .icon-warning, .comment_input .channelback-not-supported .icon-warning { background-position: 0px -516px; } .chat .channel, .facebook .channel, .fb_private_message .channel, .email .meta .channel, .mail .profile .channel, .sms .profile .channel, .twitter .meta .channel, .twitter .profile .channel, .text_message .channel, .voice .channel, .voice_inbound .channel, .voice_outbound .channel, .comment_input .call-back .toggle .icon, .voice_voicemail .channel { background: url(https://html-assets-prod.guideflow.com/b48085a5cb67482cae74e1f7fed2bc5be817cc7d) no-repeat; } .chat .channel { background-position: 0px -44px; } .facebook .channel, .fb_private_message .channel { background-position: 0px -954px; } .email .meta .channel { background-position: 0px -1035px } .mail .profile .channel { background-position: 0px -1031px; } .sms .profile .channel { background-position: 0px -1058px; } .twitter .meta .channel { background-position: 0px -1085px; } .twitter .profile .channel { background-position: 0px -1295px; } .text_message .channel, .voice .channel { background-position: 0px -1322px; } .voice_inbound .channel { background-position: 0px -1377px; } .voice_outbound .channel, .comment_input .call-back .toggle .icon { background-position: 0px -1484px; } .voice_voicemail .channel { background-position: 0px -1673px; } div.feature-notifications .right .actions .options-button .cog { background: url(https://html-assets-prod.guideflow.com/cfcf98a93b076b4ba521415916afb5fe31d4c57c) no-repeat; } div.feature-notifications .right .actions .options-button.open .cog { background-position: 0px 0px; } div.feature-notifications .right .actions .options-button.guideflow_hovered .cog, div.feature-notifications .right .actions .options-button:focus .cog { background-position: 0px -26px; } div.feature-notifications .right .actions .options-button .cog { background-position: 0px -52px; } /* BEGIN ./app/assets/stylesheets/mixins/autocomplete.scss */ .suggest { display: none; position: absolute; top: 0; left: 0; margin-top: 18px; background: white; border: 1px solid #D8DCDE; /* Grey-300 */ border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); max-width: 300px; z-index: 10; } .suggest-ul { margin: 0px; } .scrollable-ul { position: relative; overflow: auto; } .suggest-li { padding: 5px 10px; border-bottom: 1px solid #D8DCDE; /* Grey-300 */ line-height: 18px; font-weight: 600; font-size: 14px; line-height: 18px; border-left: 2px solid white; display: block; } .suggest-li-focus { border-left: 2px solid #78a300; } .suggest-detail { color: #49545C; font-weight: 400; } .info-message { font-weight: 600; position: relative; line-height: 1.42857; font-size: 14px; background-color: rgb(248, 249, 249); color: rgb(104, 115, 125); border-width: 1px; border-style: solid; border-image: initial; border-radius: 4px; border-color: rgb(216, 220, 222); margin: 20px 20px 0px 20px; padding: 20px; } .info-message-paragraph { padding-bottom: 0px !important; } /* END ./app/assets/stylesheets/mixins/autocomplete.scss */ /* BEGIN ./app/assets/stylesheets/utilities.scss */ /* * Non-semantic helper classes */ /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { display: block; } .zd-svg-icon-26 { height: 26px; width: 26px; } .zd-svg-icon-16 { height: 16px; width: 16px; } .zd-svg-icon-14 { height: 14px; width: 14px; } .zd-svg-icon-12 { height: 12px; width: 12px; } .is-disabled { opacity: 0.25; pointer-events: none; } /* Garden component are 2px taller than the component we currently have in the branding header. We need to offset them by 1px to center them as well as adding 10px spacing between them. */ .u-garden-in-header { margin: -1px 10px 0 0; } html[data-rtl-language='true'] .u-garden-in-header { margin: -1px 0 0 10px; } /* END ./app/assets/stylesheets/utilities.scss */ /* BEGIN ./app/assets/stylesheets/mixins.styles.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/action_icon.scss */ .action_button { background-color: transparent; display: block; padding: 0 0 0 24px; margin-right: 10px; text-indent: 0; color: #2F3941; white-space: nowrap; font-weight: 600; font-size: 12px; opacity: 0.6; } .action_button.guideflow_hovered { opacity: 1; } /* END ./app/assets/stylesheets/mixins/styles/action_icon.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/attachments.scss */ /* */ ul.attachments { margin: 0 0 10px 0; } ul.attachments:empty { display: none; } ul.attachments li { display: inline-block; list-style-type: none; margin: 0 8px 8px 0; border-radius: 4px; background-color: #F4F4F4; vertical-align: top; } ul.attachments li:last-child { margin-right: 0; } ul.attachments li .attachment { position: relative; display: inline-block; font-size: 12px; padding: 4px 8px; } ul.attachments li .attachment img { padding-top: 5px; max-height: 65px; } ul.attachments li .attachment i { margin-top: -1px; opacity: 0.2; } ul.attachments li a.attachment { background-color: transparent; } ul.attachments li span.attachment { color: #2F3941; } ul.attachments li .delete, ul.attachments li .deleting { background-color: transparent; border: none; width: 20px; } ul.attachments li .deleting, ul.attachments li .uploading { background-image: url(https://html-assets-prod.guideflow.com/b04475cb2a4eee5fa643ae0707b8ff53e6a3990b); display: inline-block; } .audits .attachments li { width: 96px; line-height: 16px; overflow: hidden; } .audits .attachments li a { word-wrap: break-word; width: 83px; } /* END ./app/assets/stylesheets/mixins/styles/attachments.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/buttons.scss */ .c-btn { display: inline-block; transition: border-color .15s ease-in-out,box-shadow .1s ease-in-out,background-color .17s ease-in-out,color .15s ease-in-out; margin: 0; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; cursor: pointer; padding: 0 2.25em; min-width: 8.3334em; overflow: visible; vertical-align: middle; text-align: center; text-decoration: none; line-height: 2.34; white-space: nowrap; color: #999; font-family: inherit; font-size: 12px; font-weight: 400; box-sizing: border-box; user-select: none; -webkit-touch-callout: none; } .c-btn::-moz-focus-inner { border: 0; padding: 0; } .c-btn--pill { border-radius: 100px; } .c-btn--medium { padding: 0 1.9286em; min-width: 8.5715em; line-height: 2.72; font-size: 14px; } .c-btn--large { padding: 0 1.9286em; min-width: 10.0001em; line-height: 3.43; font-size: 14px; } .c-btn--full { width: 100%; overflow: hidden; text-overflow: ellipsis; } .l-btn-group > .c-btn { margin-left: -1px; border-radius: 0; } .l-btn-group > .c-btn:first-of-type { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .l-btn-group > .c-btn:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .l-btn-group.is-rtl { direction: rtl; } .l-btn-group.is-rtl > .c-btn { margin-right: -1px; margin-left: 0; border-radius: 0; } .l-btn-group.is-rtl > .c-btn:first-of-type { margin-right: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .l-btn-group.is-rtl > .c-btn:last-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .c-btn.is-hovered, .c-btn.guideflow_hovered { background-color: #fbfbfb; text-decoration: none; color: #333; } .c-btn:focus { outline: none; } .c-btn.is-focused { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .c-btn.is-active, .c-btn:active { background-color: #f3f3f3; text-decoration: none; color: #333; } .c-btn.is-hovered.is-active, .c-btn.is-hovered:active, .c-btn.guideflow_hovered.is-active, .c-btn.guideflow_hovered:active, .l-btn-group > .c-btn.is-hovered.is-active, .l-btn-group > .c-btn.is-hovered:active, .l-btn-group > .c-btn.guideflow_hovered.is-active, .l-btn-group > .c-btn.guideflow_hovered:active { box-shadow: none; } .c-btn.is-disabled.is-disabled, .c-btn:disabled:disabled { border-color: transparent; box-shadow: none; background-color: #ddd; cursor: default; color: #fff; } .l-btn-group > .c-btn.is-focused { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1); } .c-btn--basic { border-color: transparent; background-color: transparent; } .c-btn--basic.is-hovered, .c-btn--basic.guideflow_hovered { background-color: #f3f3f3; } .c-btn--basic.is-active, .c-btn--basic:active { background-color: #eee; } .c-btn--primary { border-color: transparent; background-color: #333; color: rgba(255, 255, 255, 0.7); } .c-btn--primary.is-hovered, .c-btn--primary.guideflow_hovered { background-color: #555; color: #fff; } .c-btn--primary.is-active, .c-btn--primary:active { background-color: #2a2b2b; color: #fff; } /* END ./app/assets/stylesheets/mixins/styles/buttons.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/channels.scss */ .profile .channel { background: url(https://html-assets-prod.guideflow.com/04e63a8a3e14994a01a9c7a5b5c54a47facb82b2) 1px 0px/contain no-repeat; } .twitter .meta .channel { margin-top: -2px; } .mast .twitter .profile.ticket { background-color: #55ACEE; border: none; } .event.web .header .meta .channel { display: none; } .topic .channel { background: url(https://html-assets-prod.guideflow.com/04e63a8a3e14994a01a9c7a5b5c54a47facb82b2) 1px 0px/contain no-repeat; } .aeu .zd-svg-icon-16 { vertical-align: middle; } /* END ./app/assets/stylesheets/mixins/styles/channels.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/forms.scss */ ul.highlighted, button.highlighted, input.highlighted { background-image: none !important; background-color: #EDF9FC !important; } textarea.highlighted { color: green !important; } .highlighted ul { background-color: #EDF9FC !important; background-image: none !important; } /* Glow */ .editable:focus, .editable input[type="text"]:focus, .focused, .token_list.ui-state-focus, .ui-selectmenu:focus, .zd-state-focus .zd-selectmenu-base, .zd-state-focus .zd-searchmenu-base { border-color: #1f73b7 !important; box-shadow: 0 0 0 3px rgba(31, 115, 183, 0.35) !important; outline: thick none !important; } /* END ./app/assets/stylesheets/mixins/styles/forms.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/labels.scss */ .ticket_status.new { background: #FFB648; /* Yellow-400 */ color: #703B15; } /* Yellow-800 */ .ticket_status.open { background: #E34F32; /* Crimson-400 */ color: white; } .ticket_status.pending { background: #3091EC; /* Azure-400 */ color: white; } .ticket_status.hold { background: #2F3941; /* Grey-800 */ color: white; } .ticket_status.solved { background: #87929D; /* Gray-500 */ color: white; } .ticket_status.suspended { background: #49545C; /* Grey-700 */ color: white; } .ticket_status.closed { background: #D8DCDE; /* Grey-300 */ color: #49545C; } /* Grey-700 */ .sla-policy-metric-label { font-size: 14px; font-weight: normal; padding-left: 10px; vertical-align: middle; } .sla-policy-metric-action-label { display: inline; } .ticket_sla_label { border-radius: 3px; font-size: 10px; line-height: 10px; min-width: 30px; margin: 5px 0; padding: 5px 6px; text-align: center; vertical-align: middle; } .sla-policy-metric-action-label, .ticket_sla_label { /* Overwrite default style */ border-collapse: separate; } .sla-policy-metric-action-label.counting, .ticket_sla_label.counting { color: #fff; } .sla-policy-metric-action-label.counting.breached, .ticket_sla_label.counting.breached { background-color: #bd322c; } .sla-policy-metric-action-label.counting.not-breached, .ticket_sla_label.counting.not-breached { background-color: #78a300; } .sla-policy-metric-action-label.counting.breached.not-almost-breached, .ticket_sla_label.counting.breached.not-almost-breached { background-color: #CC3340; color: #fff; } .sla-policy-metric-action-label.counting.not-breached.almost-breached, .ticket_sla_label.counting.not-breached.almost-breached { background-color: #FFB057; color: #51280E; } .sla-policy-metric-action-label.counting.not-breached.not-almost-breached, .ticket_sla_label.counting.not-breached.not-almost-breached { background-color: #D1E8DF; color: #0b3b29; } .sla-policy-metric-action-label.paused, .ticket_sla_label.paused { background-color: #fff; border: 1px solid #D8DCDE; /* Grey-300 */ } .sla-policy-metric-action-label.paused.breached, .ticket_sla_label.paused.breached { color: #bd322c; } .sla-policy-metric-action-label.paused.not-breached, .ticket_sla_label.paused.not-breached { color: #78a300; } .ticket_sla_label { display: table; } .ticket_sla_label svg { display: inline-block; margin: 0 2px; } .ticket_sla_label .pause-icon { background-position: center; background-repeat: no-repeat; height: 8px; min-width: 30px; } .ticket_sla_label.breached .pause-icon { background-image: url(https://html-assets-prod.guideflow.com/0a56ae8122466559fa1bc899e95f8b22b524cf97); } .ticket_sla_label.not-breached .pause-icon { background-image: url(https://html-assets-prod.guideflow.com/e9fd30449202b949dd77879ddd0d9dd2db7c8f32); } .ticket_status_label, .sla-policy-metric-action-label { padding: 2px 10px 1px 10px; font-size: 9px; white-space: nowrap; border-radius: 3px; background: #E9EBED; /* Grey-200 */ color: #68737D; min-height: 14px; font-weight: 600; display: inline-block; line-height: 16px; } .ticket_status_label.new, .sla-policy-metric-action-label.new { background: #FFB648; color: #703B15; } .ticket_status_label.open, .sla-policy-metric-action-label.open { background: #E34F32; color: white; } .ticket_status_label.pending, .sla-policy-metric-action-label.pending { background: #3091EC; color: white; } .ticket_status_label.hold, .sla-policy-metric-action-label.hold { background: #2F3941; color: white; } .ticket_status_label.solved, .sla-policy-metric-action-label.solved { background: #87929D; color: white; } .ticket_status_label.suspended, .sla-policy-metric-action-label.suspended { background: #49545C; color: white; } .ticket_status_label.closed, .sla-policy-metric-action-label.closed { background: #D8DCDE; color: #49545C; } .ticket_status_label.compact, .sla-policy-metric-action-label.compact { padding: 0; display: block; width: 15px; text-align: center; font-size: 9px; line-height: 15px; } .ticket_status_label.compact.suspended, .sla-policy-metric-action-label.compact.suspended { color: transparent; } .ticket_status_label.small, .sla-policy-metric-action-label.small { font-size: 9px; } .ticket_status_label.toolbar, .sla-policy-metric-action-label.toolbar { padding: 2px 5px 3px 5px; font-size: 9px; text-transform: none; margin-right: 2px; text-shadow: none; line-height: 0; display: inline; position: relative; top: -1px; letter-spacing: 0; font-weight: 600; } .sla-policy-metric-action-label { font-size: 14px; font-weight: 400; } .sla-policy-metric-action-label.compact { font-size: 10px; } .sla-policy-metric-action-label.small { font-size: 11px; } .sla-policy-metric-action-label.toolbar { font-size: 10px; font-weight: 400; } /* END ./app/assets/stylesheets/mixins/styles/labels.scss */ /* BEGIN ./app/assets/stylesheets/mixins/styles/transforms.scss */ @keyframes opening-sequence { 0% { top: 0; opacity: 0.2; } 100% { top: 45px; opacity: 1; } } /* END ./app/assets/stylesheets/mixins/styles/transforms.scss */ /* END ./app/assets/stylesheets/mixins.styles.scss */ /* BEGIN ./app/assets/stylesheets/vendor_overrides.scss */ /* BEGIN ./app/assets/stylesheets/overrides/jquery-ui.scss */ /* Global */ .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 14px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } .ui-widget-content { background-color: #ffffff; background-image: none; } .ui-widget-header { font-weight: 600; background-image: url(https://html-assets-prod.guideflow.com/dea2118a3de480b8289e932a21b01738f9ecc8e9); } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-color: #FFFFFF; background-image: linear-gradient(#fafafa, #fff); } input.guideflow_hovered, textarea.guideflow_hovered, .token_list.guideflow_hovered { /* Color matches Garden, May 2018 */ border-color: #5293c7; } .ui-state-hover a, .ui-widget-content .ui-state-hover a, .ui-state-focus a, .ui-widget-content a.ui-state-focus { background: #F8F9F9; /* Grey-100 */ } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #FFFFFF; } .ui-widget-content li.ui-state-hover { border-color: #F8F9F9; /* Grey-100 */ } /*.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background-image: asset-url(https://html-assets-prod.guideflow.com/d22b23a6b761401ac711c36d54cbd2ef93ffba0a); }*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background-image: none; } .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/eda4c0ea531af0eac6d3193c348b036f8b72a597); } .ui-widget-content .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/eda4c0ea531af0eac6d3193c348b036f8b72a597); } .ui-widget-header .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/eda4c0ea531af0eac6d3193c348b036f8b72a597); } .ui-state-default .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/f7038d1d12e80fa91cfe528118ed66deb138eb93); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/a6122d65a527e4037e44216acc358f3099708e30); } .ui-state-active .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/a6122d65a527e4037e44216acc358f3099708e30); } .ui-state-highlight .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/73320d458014216f8de437ab377ebcd9fc647292); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(https://html-assets-prod.guideflow.com/1b139268ec5381335693083c618a2df26fb3419a); } .ui-widget-overlay { background-image: url(https://html-assets-prod.guideflow.com/89af76b02fc530d3236e55ee3336d4daa56e47e2); } .ui-widget-shadow { background-image: url(https://html-assets-prod.guideflow.com/89af76b02fc530d3236e55ee3336d4daa56e47e2); } /* Corner radius */ .ui-corner-tl { border-top-left-radius: 1px; } .ui-corner-tr { border-top-right-radius: 1px; } .ui-corner-bl { border-bottom-left-radius: 1px; } .ui-corner-br { border-bottom-right-radius: 1px; } .ui-corner-top { border-top-left-radius: 1px; border-top-right-radius: 1px; } .ui-corner-bottom { border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } .ui-corner-right { border-top-right-radius: 1px; border-bottom-right-radius: 1px; } .ui-corner-left { border-bottom-left-radius: 1px; border-top-left-radius: 1px; } .ui-corner-all { border-radius: 1px; } .ui-widget-content { border-top: none; } /* Menu */ .ui-menu { padding: 0; } .ui-menu .ui-icon { background-position-y: -17px; opacity: 0.4; top: 0.4em; left: 0.5em; } .ui-menu .ui-menu-item a { border: none; } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { margin: 0; } .ui-menu .ui-menu-item a.ui-state-focus { border: none; border-radius: 1; } .ui-button-text-only .ui-button-text { padding: 5px 0; } /* Selectmenu -----------------------------------*/ .ui-selectmenu { position: relative; display: inline-block; height: 2em; line-height: 2em; overflow: hidden; text-decoration: none; vertical-align: middle; } .ui-selectmenu span.ui-selectmenu-status { height: 2em; line-height: 2em; padding: 0 8px; } .ui-selectmenu-icon { position: absolute; right: 6px; margin-top: -8px; top: 50%; } .ui-selectmenu-menu { padding: 0; margin: 0; list-style: none; position: absolute; top: 0; display: none; overflow: auto; z-index: 1005; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); } /* z-index: 1005 to make selectmenu work with dialog */ .ui-selectmenu-open { display: block; z-index: 1 !important; } .ui-selectmenu-open a { color: #68737d !important; } .ui-selectmenu-menu-popup { margin-top: -1px; } .ui-selectmenu-menu-dropdown { margin: 0; } .ui-selectmenu-menu li { background-color: #ffffff; padding: 0; margin: 0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: 400 !important; } .ui-selectmenu-menu li a, .ui-selectmenu-status { line-height: 1.4em; display: block; padding: 0.2em 0.7em; outline: none; text-decoration: none; } .ui-selectmenu-menu li.ui-state-disabled a { cursor: default; } .ui-selectmenu-menu li.ui-selectmenu-hasIcon a, .ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; } .ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; } .ui-selectmenu-menu li span, .ui-selectmenu-status span { display: block; margin-bottom: .2em; } .ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: 600; } .ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; } /* for optgroups */ .ui-selectmenu-menu .ui-selectmenu-group { font-size: 14px; } .ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display: block; padding: .6em .5em 0; font-weight: 600; } .ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; } .ui-menu .ui-menu { margin-top: 0; } .ui-datepicker { /* Min-width here is same as width set by jQuery UI. See: https://github.com/jquery/jquery-ui/blob/52d9ec6c4d7402d5ef04b8c7959f812f8d095cef/themes/base/datepicker.css#L11-L12 */ } .ui-datepicker th { font-weight: 600; } .ui-datepicker td { padding: 3px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { text-align: center; line-height: 1.8em; top: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { visibility: hidden; } .ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover { border: none; } .ui-datepicker .ui-datepicker-prev { left: 2px; } html[data-rtl-language='true'] .ui-datepicker .ui-datepicker-prev { left: auto; right: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } html[data-rtl-language='true'] .ui-datepicker .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker .ui-datepicker-prev:after { content: '<'; } .ui-datepicker .ui-datepicker-next:after { content: '>'; } .ui-datepicker.ui-widget-content { width: auto; min-width: 17em; padding: 10px; background: white; border: 1px solid #C2C8CC; /* Grey-400 */ border-radius: 3px; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5); } .ui-datepicker .ui-datepicker-header { background: #ffffff; border: none; } .ui-datepicker .ui-datepicker-title { background: #ffffff; } .ui-datepicker .ui-state-default { background: transparent; border: none; text-align: center; padding-top: 5px; padding-bottom: 5px; } .ui-datepicker .ui-datepicker-today a.ui-state-highlight { border-radius: 3px; background-color: #E9EBED; /* Grey-200 */ } .ui-datepicker .ui-datepicker-current-day a.ui-state-active { border-radius: 3px; color: #ffffff; background-color: #78a300; } /* END ./app/assets/stylesheets/overrides/jquery-ui.scss */ /* BEGIN ./app/assets/stylesheets/overrides/bootstrap.scss */ a { color: #1f73b7; } a.guideflow_hovered { color: #144A75; } .uneditable-input { width: inherit; } .clearfix { margin-bottom: 0; } p { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } /* Tooltip overrides */ .tooltip.in { opacity: 1; } .tooltip.top .tooltip-arrow { border-top-color: rgba(47, 57, 65, 0.8); /* Grey-800 at 80% opacity */ } .tooltip.right .tooltip-arrow { border-right-color: rgba(47, 57, 65, 0.8); } .tooltip.bottom .tooltip-arrow { border-bottom-color: rgba(47, 57, 65, 0.8); } .tooltip.left .tooltip-arrow { border-left-color: rgba(47, 57, 65, 0.8); } .tooltip .tooltip-inner { background-color: rgba(47, 57, 65, 0.8); /* Grey-800 at 80% opacity */ backdrop-filter: blur(10px); padding: 5px 8px 6px 8px; max-width: 300px; } html[data-rtl-language='true'] .tooltip .tooltip-inner { text-align: right; } /* Popover overrides */ .popover-title { font-size: 14px; background-color: #E9EBED; /* Grey-200 */ word-break: break-word; padding-top: 11px; } .popover-inner { padding: 0; background: none; border: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } html[data-rtl-language='true'] .popover-inner { direction: rtl; } /* Nav overrides */ .nav-stacked { padding: 0 0 12px 0; } .nav-stacked > li { height: 26px; } .nav-stacked > li a { padding: 6px 10px; border-radius: 3px; } .nav-stacked > li a.guideflow_hovered { background-color: #f0f0f0; } .nav-stacked > li.active a, .nav-stacked > li.active a.guideflow_hovered { color: #2F3941; background-color: #E9EBED; box-shadow: 0 -1px 1px #D8DCDE; /* Grey-300 */ } .close { opacity: 0.8; } .close.guideflow_hovered, .close:focus { opacity: 0.9; } /* Modal overrides */ .modal p, .modal label { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } .modal p { font-size: 14px; padding-bottom: 10px; } .modal p.secondary { color: #49545C; } .modal p.secondary strong { color: #2F3941; /* Grey-800 */ } .modal h3 { font-size: 17px; } .modal.role-modal ul, .modal.problem-solve-notice-modal ol { margin-left: 1.8em; list-style-type: decimal; } html[data-rtl-language='true'] .modal.role-modal ul, html[data-rtl-language='true'] .modal.problem-solve-notice-modal ol { margin-left: 0; margin-right: 1.8em; } .modal.role-modal li { margin: 1em 0; } /* Allows buttons to be styled nicely in dropdowns */ .dropdown-menu { padding-top: 10px; padding-bottom: 10px; border-color: rgba(0, 0, 0, 0.1); } html[data-rtl-language='true'] .dropdown-menu { left: auto; right: 0; } .dropdown-menu li { text-align: left; } .dropdown-menu li.header { text-align: left; padding: 3px 15px; font-weight: 600; } .dropdown-menu li a { color: #2F3941; padding: 7px 20px; font-size: 14px; } .dropdown-menu li a.guideflow_hovered { color: #2F3941; background-color: #EDF7FF; } .dropdown-menu li input[type="file"] { cursor: pointer; } .dropdown-menu li button, .dropdown-menu li .button { display: block; padding: 3px 15px; clear: both; font-weight: 400; line-height: 18px; color: #1f73b7; white-space: nowrap; text-align: left; background: none; cursor: pointer; } .dropdown-menu li button.guideflow_hovered, .dropdown-menu li .button.guideflow_hovered { color: #2F3941; text-decoration: none; background-color: #EDF7FF; } .dropdown-menu li button { width: 100%; } /* Additional RTL overrides - Ensures proper positioning for right-to-left languages */ html[data-rtl-language='true'] .dropdown { direction: rtl; } html[data-rtl-language='true'] .dropdown#profile_menu { direction: ltr; } html[data-rtl-language='true'] .object_options .dropdown-menu.pull-right, html[data-rtl-language='true'] .btn-group.open .dropdown-menu.pull-right { right: auto; left: 0; } html[data-rtl-language='true'] .modal-header .close { float: left; } html[data-rtl-language='true'] .bulk-footer .btn-group.ticket_submit_buttons .btn:last-of-type, html[data-rtl-language='true'] .btn-group.ticket_submit_buttons > .dropdown-toggle { border-radius: 4px 0 0 4px; } html[data-rtl-language='true'] .btn-group.ticket_submit_buttons > .btn:first-child { float: right; border-radius: 0 4px 4px 0; } html[data-rtl-language='true'] .modal-footer .btn + .btn { margin-left: 0; margin-right: 5px; } .dropup [disabled=disabled] { color: #C2C8CC; cursor: default; } .dropup [disabled=disabled].guideflow_hovered { color: #C2C8CC; } .btn i { margin-top: 1px; } .btn.active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn-group.open .btn.dropdown-toggle:not(.btn-inverse) { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.2); } html[data-rtl-language='true'] .pane.right .pagination { direction: ltr; } .pagination a { color: #2F3941; } .pagination a.guideflow_hovered { color: #1f73b7; } .pagination .active a { color: #2F3941; } .pagination a.guideflow_hovered, .pagination .active a { background-color: #F8F9F9; /* Grey-100 */ } /* base button */ .btn { display: inline-block; padding: 5px 10px 5px; margin-bottom: 0; font-size: 14px; line-height: 18px; color: #2F3941; text-align: center; text-shadow: none !important; vertical-align: middle; cursor: pointer; background-color: #ffffff; background-image: none; border: 1px solid #D8DCDE; /* Grey-300 */ border-radius: 4px; box-shadow: none; white-space: nowrap; /* primary button */ /* secondary block solid button */ /* secondary round solid button */ /* secondary round solid framed */ } .btn.guideflow_hovered { background-color: #F8F9F9; /* Grey-100 */ border-color: #C2C8CC; /* Grey-400 */ color: #2F3941; box-shadow: inset 0 1px 0 #ffffff; } .btn:active, .btn.active { background-color: #F8F9F9; /* Grey-100 */ border-color: #C2C8CC; /* Grey-400 */ color: #2F3941; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } .btn.disabled, .btn[disabled] { background-color: #D8DCDE !important; border-color: #D8DCDE !important; color: #fff !important; opacity: 1; box-shadow: none; } .btn.btn-primary, .btn.btn-inverse { background-color: #2F3941; border: none; color: #D8DCDE; box-shadow: none; } .btn.btn-primary.guideflow_hovered, .btn.btn-inverse.guideflow_hovered { background-color: #49545C; color: #ffffff; } .btn.btn-primary:active, .btn.btn-primary.active, .btn.btn-inverse:active, .btn.btn-inverse.active { background-color: #2F3941; color: #D8DCDE; } .btn.btn-primary + .btn-inverse, .btn.btn-inverse + .btn-inverse { border-left: 1px solid #68737D; } html[data-rtl-language='true'] .btn.btn-primary + .btn-inverse, html[data-rtl-language='true'] .btn.btn-inverse + .btn-inverse { border-left: none; border-right: 1px solid #68737D; } .btn.btn-primary .caret, .btn.btn-inverse .caret { background-image: url(https://html-assets-prod.guideflow.com/f97ae7c9abe905fcfd96624c04aa358f2470e88b); border: none; height: 14px; margin: 0; top: auto; width: 14px; } .btn.btn-primary.green { background-color: #1F73B7; /* Blue-600 */ border-color: #1F73B7; color: #ffffff; box-shadow: none; } .btn.btn-primary.green.guideflow_hovered { background-color: #337FBD; /* Blue-500 */ border-color: #337FBD; color: #ffffff; } .btn.btn-primary.green:active, .btn.btn-primary.green.active { background-color: #1F73B7; border-color: #1F73B7; color: #ffffff; } .btn.btn-green { background-color: #1F73B7; /* Blue-600 */ border-color: #1F73B7; color: #ffffff; box-shadow: none; } .btn.btn-green.guideflow_hovered { background-color: #337FBD; /* Blue-500 */ border-color: #337FBD; color: #ffffff; } .btn.btn-green:active, .btn.btn-green.active { background-color: #1F73B7; border-color: #1F73B7; color: #ffffff; } .btn.btn-promo { box-shadow: none; background-color: #fda028; border-color: #fda028; color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 600; padding: 10px 20px 10px 20px; } .btn.btn-promo.guideflow_hovered { background-color: #ffab1a; border-color: #ffab1a; color: #ffffff; } .btn.btn-promo:active, .btn.btn-promo.active { background-color: #ce8200; border-color: #af6f00; color: #ffffff; } .btn.btn-warning { box-shadow: none; background-color: #fda028; border-color: #fda028; color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 600; padding: 10px 20px 10px 20px; } .btn.btn-warning.guideflow_hovered { background-color: #ffab1a; border-color: #ffab1a; color: #ffffff; } .btn.btn-warning:active, .btn.btn-warning.active { background-color: #ce8200; border-color: #af6f00; color: #ffffff; } .btn.btn-solid { background-color: #fff; border-color: #D8DCDE; } .btn.btn-round-solid { background-color: #fff; border-color: #D8DCDE; border-radius: 1000px; } .btn.btn-round { border-radius: 1000px; } .btn.medium { padding-right: 20px; padding-left: 20px; } .btn.large { font-size: 14px; font-weight: 600; padding: 10px 20px 10px 20px; } .btn.x-large { font-size: 15px; font-weight: 600; padding: 15px 30px 15px 35px; } .btn.disabled, .btn[disabled] { background-color: #D8DCDE !important; border-color: #D8DCDE !important; color: #fff !important; opacity: 1; box-shadow: none; } .btn-group.open .dropdown-toggle:not(.btn-inverse) { background-color: #F8F9F9 !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } /* See below for RTL language positioning of these elements - LOCAL-567 */ .btn-group > .dropdown-toggle { box-shadow: none; } ::placeholder { font-weight: 400; } code { color: #2F3941; } .ticket_submit_buttons > .dropdown-toggle { margin-left: 0; /* Stop 1px of overlap from disappearing dividing line on hover */ } /* END ./app/assets/stylesheets/overrides/bootstrap.scss */ /* END ./app/assets/stylesheets/vendor_overrides.scss */ /* BEGIN ./app/assets/stylesheets/screen.scss */ /* BEGIN ./app/assets/stylesheets/editable.scss */ /* Inline editable fields */ .editable { margin-top: -6px; margin-left: -5px; } .editable.textarea { padding: 5px; background: transparent; border: 1px solid transparent; line-height: 16px; white-space: pre-wrap; word-wrap: break-word; min-height: 16px; /* Stupid firefox */ } .editable.textarea:not(.disabled).guideflow_hovered { border: 1px solid #E9EBED; background: #fff; color: #323a40 !important; } .editable.textarea.disabled { color: #C2C8CC !important; background-color: #E9EBED; /* Grey-200 */ } .editable input[type="text"] { color: #68737D; display: block; resize: none; padding: 2px 5px 5px 5px; border: 1px solid transparent; background: transparent; box-shadow: none; } .editable input[type="text"].guideflow_hovered { border: 1px solid #E9EBED; } .editable input[type="text"].ui-state-disabled, .editable input[type="text"].disabled { color: #2F3941 !important; opacity: 1; background: transparent; } .editable input[type="text"].ui-state-disabled.guideflow_hovered, .editable input[type="text"].disabled.guideflow_hovered { border: 1px solid transparent; } /* END ./app/assets/stylesheets/editable.scss */ /* BEGIN ./app/assets/stylesheets/app_new_install.scss */ .apps_nav_bar { position: relative; display: block; } .apps_nav_bar .tooltip-mask { position: fixed; opacity: 1; z-index: 999; cursor: default; } .apps_nav_bar #onboarding-tooltip { min-height: 20px; opacity: 1; padding: 15px 20px 18px; top: 50%; transform: translate(0, -50%); left: 100%; text-align: left; z-index: 1000; } .apps_nav_bar #onboarding-tooltip > h4 { word-wrap: break-word; overflow-wrap: break-word; margin: 3px 0; } .apps_nav_bar #onboarding-tooltip > p { margin: 0 !important; line-height: 20px; } .apps_nav_bar #onboarding-tooltip > .diamond { top: 0; bottom: 0; left: -6px; right: auto; margin: auto; } .apps_nav_bar #onboarding-tooltip > .close-tooltip { top: 15px; right: 20px; } /* END ./app/assets/stylesheets/app_new_install.scss */ /* BEGIN ./app/assets/stylesheets/layout.scss */ html, body { overflow: hidden; /* Fallback for browsers w/o 'clip' support */ overflow: clip; /* Chrome 90+, FF 81+ */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#browser_compatibility */ cursor: auto; } ul { list-style: none; } #alert { display: none; height: 52px; line-height: 52px; background-color: #fff7d0; position: absolute; left: 0; right: 0; top: 0; } html[data-rtl-language='true'] #alert { direction: rtl; } #alert p { display: inline-block; vertical-align: middle; margin-left: 50px; margin-right: 200px; } html[data-rtl-language='true'] #alert p { margin-left: 200px; margin-right: 50px; } #alert .pagination { position: absolute; top: 0; right: 72px; margin-top: 10px; } html[data-rtl-language='true'] #alert .pagination { left: 72px; right: auto; } #alert .pagination a { user-select: none; cursor: default; color: #2F3941; font-size: 12px; line-height: 32px; } #alert .pagination a.guideflow_hovered { background-color: inherit; cursor: default; } #alert .pagination a:focus { outline: none; } #alert .pagination li.enabled a.guideflow_hovered { background-color: #f7eec3; cursor: pointer; } #alert .close { position: absolute; top: 18px; right: 24px; } html[data-rtl-language='true'] #alert .close { left: 24px; right: auto; } #alert:before { position: absolute; top: 17px; left: 20px; bottom: 0; background-image: url(https://html-assets-prod.guideflow.com/35997c022cfbc543612a65f0300982c0b1cc776e); background-repeat: no-repeat; background-size: 18px; padding-right: 36px; content: ''; } html[data-rtl-language='true'] #alert:before { left: auto; padding-left: 36px; padding-right: 0; } #alert.visible { display: block; } /* alert component height: 52px back-to-onboarding-bar(btob) height: 50px sandbox-banner height: 28px if both alert and btob is visbile, set #wrapper top to 102px and #btob top to 52px if alert, btob and sandbox-banner are visbile, set #wrapper top to 130px and #btob top to 52px if only alert is visible, set #wrapper top to 52px and #btob top to 0px if only btob is visible, set #wrapper top to 50px if only sandbox-banner is not empty, set #wrapper top to 28px if none is visible, set #wrapper top to 0 #sandbox-banner is only rendered in sandbox account, using :empty selector to check content The visible class is only added to #back-to-onboarding-bar when there is content in it. The visible class will be removed when #back-to-onboarding-bar is empty. The file that handle the 'visible' class is: lotus_react/src/Onboarding/BackToOnboardingBarContainer */ #alert.visible + #back-to-onboarding-bar.visible { top:52px } #alert.visible + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top:52px; } #alert.visible + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top:102px; } /* auto-activation-countdown-banner and ctm-auto-activation-banner component height: 52px */ #auto-activation-countdown-banner, #ctm-auto-activation-banner { display: none; position: absolute; top: 0; width: 100%; height: 52px; } #auto-activation-countdown-banner.visible, #ctm-auto-activation-banner.visible { display: block; } /* wrapper offsets */ /* Current: 31 selectors (not 32 as when no banners are shown wrapper has a default, #wrapper { top: 0px }) Next additional banner must have 63 selectors Side note: As banners are getting added/deleted, I suggest we should plan to add a banner component manager in the future, otherwise with more banners co-existing this section will gain an additional 2^(number banners) + each subsequent banner offsets which may be overwhelming to read. */ #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 28px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 50px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 78px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 52px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 80px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 102px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 130px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 52px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 80px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 102px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 130px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 104px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 132px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 154px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 182px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 52px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 80px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 102px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 130px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 104px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 132px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 154px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 182px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 104px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 132px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 154px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 182px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:empty + #wrapper { top: 156px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) + #wrapper { top: 184px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top: 206px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) + #wrapper { top: 234px; } /* NOTE: we don't handle other banners here because we will overlay preview banner on top of all the other banners */ #wrapper.ticket-layout-preview { top: 52px !important; } /* ctm-auto-activation-banner offsets */ #alert.visible + #ctm-auto-activation-banner.visible { top: 52px; } /* auto-activation-countdown-banner offsets */ #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible { top: 52px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible { top: 104px; } /* back-to-onboarding-bar offsets */ #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible { top: 52px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible { top: 104px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible { top: 104px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible { top: 156px; } #back-to-onboarding-bar { position: fixed; width:100%; top:0; z-index:1200; } #back-to-onboarding-bar.visible + #sandbox-banner:empty + #wrapper { top:50px; } /* sandbox-banner offsets */ #sandbox-banner { position: absolute; width: 100%; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 50px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 52px; } #alert + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 102px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 52px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 102px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 104px; } #alert + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 154px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 52px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 102px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 104px; } #alert.visible + #ctm-auto-activation-banner + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 154px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 104px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 154px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar + #sandbox-banner:not(:empty) { top: 156px; } #alert.visible + #ctm-auto-activation-banner.visible + #auto-activation-countdown-banner.visible + #back-to-onboarding-bar.visible + #sandbox-banner:not(:empty) { top: 206px; } #wrapper { position: absolute; width: 100%; top: 0; bottom: 0; } .pane { display: block; position: absolute; overflow: auto; top: 0; bottom: 0; } .pane.left { left: 0; position: static; z-index: 3; } .pane.left footer { position: fixed; bottom: 0; left: 60px; right: 0; height: 49px; padding: 0; } .pane.left.allow-overflow { overflow: visible; } .pane.right { right: 0; overflow: hidden; } html[data-rtl-language='true'] .pane.right { left: 0; right: auto; } .pane.right .reset_order { margin-left: 20px; font-size: 14px; font-weight: 400; } html[data-rtl-language='true'] .pane.right .reset_order { margin-left: 0; margin-right: 20px; } .pane.right .learn_more { line-height: 28px; padding: 5px 15px; } .pane.right .learn_more.guideflow_hovered { text-decoration: underline; } .pane.right .customer_context_nav_tab { padding: 4px 10px 4px 0; } .pane.right.views { background: var(--main-theme-color); } #views_views-ticket-table:focus { outline: none; } [id="views_views-ticket-table"][tabindex="0"]:focus > [id^="views-ticket-table"][tabindex="-1"] { outline: 3px solid rgba(31, 115, 183, 0.35); border-radius: 4px 4px 0px 0px; } .element-timing-sentinel { height: 0; } .bulk-footer { z-index: 1; } .modal-footer, .bulk-footer { border-left: 1px solid #D8DCDE; left: 390px !important; text-align: right; } html[data-rtl-language='true'] .modal-footer, html[data-rtl-language='true'] .bulk-footer { text-align: left; } .modal-footer .controls-group, .bulk-footer .controls-group { margin: 10px 8px 0 0; } .modal-footer .btn-inner-left, .modal-footer .dropdown-toggle, .bulk-footer .btn-inner-left, .bulk-footer .dropdown-toggle { margin-right: 0; } .modal-footer .btn-group, .bulk-footer .btn-group { float: right; display: inline-block; } html[data-rtl-language='true'] .modal-footer .btn-group, html[data-rtl-language='true'] .bulk-footer .btn-group { float: left; } .modal-footer .btn-group .btn, .bulk-footer .btn-group .btn { float: left; } .modal-footer .btn-group .btn:first-of-type, .bulk-footer .btn-group .btn:first-of-type { border-radius: 4px 0px 0px 4px; } html[data-rtl-language='true'] .modal-footer .btn-group .btn:first-of-type, html[data-rtl-language='true'] .bulk-footer .btn-group .btn:first-of-type { float: right; border-radius: 0px 4px 4px 0px; } .modal-footer .btn-group .btn:last-of-type, .bulk-footer .btn-group .btn:last-of-type { border-radius: 0px 4px 4px 0px; } html[data-rtl-language='true'] .modal-footer .btn-group .btn:last-of-type, html[data-rtl-language='true'] .bulk-footer .btn-group .btn:last-of-type { border-radius: 4px 0px 0px 4px; } .modal-footer .left, .bulk-footer .left { float: left; text-align: left; width: 49%; } html[data-rtl-language='true'] .modal-footer .left, html[data-rtl-language='true'] .bulk-footer .left { float: right; text-align: right; } .bulk-mode .pane.right.section { bottom: 50px; } .split_pane { z-index: 9; /* proper rendering of iframes for FF & IE */ } html[data-rtl-language='true'] .split_pane.user_filters { direction: rtl; } .split_pane .split_pane > header .right { border-left: 1px solid #D8DCDE; } .split_pane.user .pane.left, .split_pane.organization .pane.left { z-index: inherit; } .split_pane.user .pane.left footer, .split_pane.user .pane.left .footer, .split_pane.organization .pane.left footer, .split_pane.organization .pane.left .footer { z-index: 0; } .split_pane.filters .pane.left, .split_pane.dashboard .pane.left, .split_pane.search .pane.left, .split_pane.ticket .pane.left, .split_pane.user .pane.left, .split_pane.organization .pane.left, .split_pane.user_filters .pane.left, .split_pane.incidents .pane.left, .split_pane.admin .pane.left, .split_pane.reporting .pane.left { overflow-x: hidden; width: 330px; } .split_pane.filters .pane.right, .split_pane.dashboard .pane.right, .split_pane.search .pane.right, .split_pane.ticket .pane.right, .split_pane.user .pane.right, .split_pane.organization .pane.right, .split_pane.user_filters .pane.right, .split_pane.incidents .pane.right, .split_pane.admin .pane.right, .split_pane.reporting .pane.right { left: 390px; } html:not([data-rtl-language='true']) .split_pane.filters .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.dashboard .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.search .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.ticket .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.user .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.organization .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.user_filters .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.incidents .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.admin .pane.right.with_omnipanel_pane.is_viewing_ticket, html:not([data-rtl-language='true']) .split_pane.reporting .pane.right.with_omnipanel_pane.is_viewing_ticket { left: 368px; } html[data-rtl-language='true'] .split_pane.filters .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.dashboard .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.search .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.ticket .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.user .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.organization .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.user_filters .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.incidents .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.admin .pane.right.with_omnipanel_pane.is_viewing_ticket, html[data-rtl-language='true'] .split_pane.reporting .pane.right.with_omnipanel_pane.is_viewing_ticket { right: 368px; } html[data-rtl-language='true'] .split_pane.filters .pane.right, html[data-rtl-language='true'] .split_pane.dashboard .pane.right, html[data-rtl-language='true'] .split_pane.search .pane.right, html[data-rtl-language='true'] .split_pane.ticket .pane.right, html[data-rtl-language='true'] .split_pane.user .pane.right, html[data-rtl-language='true'] .split_pane.organization .pane.right, html[data-rtl-language='true'] .split_pane.user_filters .pane.right, html[data-rtl-language='true'] .split_pane.incidents .pane.right, html[data-rtl-language='true'] .split_pane.admin .pane.right, html[data-rtl-language='true'] .split_pane.reporting .pane.right { direction: rtl; left: 0; right: 390px; } .split_pane.filters header .pane.left, .split_pane.dashboard header .pane.left, .split_pane.search header .pane.left, .split_pane.ticket header .pane.left, .split_pane.user header .pane.left, .split_pane.organization header .pane.left, .split_pane.user_filters header .pane.left, .split_pane.incidents header .pane.left, .split_pane.admin header .pane.left, .split_pane.reporting header .pane.left { height: 100%; } .split_pane.filters > header, .split_pane.filters > footer, .split_pane.dashboard > header, .split_pane.dashboard > footer, .split_pane.search > header, .split_pane.search > footer, .split_pane.ticket > header, .split_pane.ticket > footer, .split_pane.user > header, .split_pane.user > footer, .split_pane.organization > header, .split_pane.organization > footer, .split_pane.user_filters > header, .split_pane.user_filters > footer, .split_pane.incidents > header, .split_pane.incidents > footer, .split_pane.admin > header, .split_pane.admin > footer, .split_pane.reporting > header, .split_pane.reporting > footer { /* header and footer are already pushed right by $chrome-start-width */ } .split_pane.filters > header .pane.right, .split_pane.filters > footer .pane.right, .split_pane.dashboard > header .pane.right, .split_pane.dashboard > footer .pane.right, .split_pane.search > header .pane.right, .split_pane.search > footer .pane.right, .split_pane.ticket > header .pane.right, .split_pane.ticket > footer .pane.right, .split_pane.user > header .pane.right, .split_pane.user > footer .pane.right, .split_pane.organization > header .pane.right, .split_pane.organization > footer .pane.right, .split_pane.user_filters > header .pane.right, .split_pane.user_filters > footer .pane.right, .split_pane.incidents > header .pane.right, .split_pane.incidents > footer .pane.right, .split_pane.admin > header .pane.right, .split_pane.admin > footer .pane.right, .split_pane.reporting > header .pane.right, .split_pane.reporting > footer .pane.right { left: 330px; } .split_pane.ticket .pane.left.with-omnipanel { width: 308px; } .split_pane.ticket .pane.left.with-omnipanel.with-full-width-footer { bottom: 50px; } .split_pane.user .pane.left, .split_pane.organization .pane.left { bottom: 0; } .split_pane.user .pane.left footer, .split_pane.organization .pane.left footer { right: auto; } .split_pane.ticket > header .pane.left, .split_pane.user > header .pane.left, .split_pane.incidents > header .pane.left, .split_pane.organization > header .pane.left { overflow-y: hidden; width: auto; } .split_pane.ticket > header .pane.right, .split_pane.user > header .pane.right, .split_pane.incidents > header .pane.right, .split_pane.organization > header .pane.right { left: auto; } .split_pane.filters > header .pane.right, .split_pane.dashboard > header .pane.right, .split_pane.user_filters > header .pane.right { left: 331px; overflow: visible; } html[data-rtl-language='true'] .split_pane.filters > header .pane.right, html[data-rtl-language='true'] .split_pane.dashboard > header .pane.right, html[data-rtl-language='true'] .split_pane.user_filters > header .pane.right { left: auto; right: 331px; } .split_pane.filters > header .pane.right.single, .split_pane.dashboard > header .pane.right.single, .split_pane.user_filters > header .pane.right.single { left: 0px; } html[data-rtl-language='true'] .split_pane.filters > header .pane.right.single, html[data-rtl-language='true'] .split_pane.dashboard > header .pane.right.single, html[data-rtl-language='true'] .split_pane.user_filters > header .pane.right.single { right: 0px; } .split_pane.filters > header .pane.left, .split_pane.dashboard > header .pane.left, .split_pane.user_filters > header .pane.left { border-right: 1px solid #D8DCDE; overflow: visible; } html[data-rtl-language='true'] .split_pane.filters > header .pane.left, html[data-rtl-language='true'] .split_pane.dashboard > header .pane.left, html[data-rtl-language='true'] .split_pane.user_filters > header .pane.left { float: right; border-left: 1px solid #D8DCDE; border-right: none; } .split_pane.dashboard .pane.right > div { height: 100%; } .split_pane.dashboard > header .pane.right { padding-left: 15px; padding-right: 10px; } html[data-rtl-language='true'] .split_pane.dashboard > header .pane.right { padding-left: 10px; padding-right: 15px; } .split_pane.dashboard > header .pane.right .left { float: left; } .split_pane.dashboard > header .pane.right .right { float: right; } .split_pane .ticket-resolution-footer { position: fixed; left: 390px; bottom: 0; right: 0; height: 49px; padding: 0; border-left: 1px solid #D8DCDE; } html[data-rtl-language='true'] .split_pane .ticket-resolution-footer { direction: rtl; left: 0; right: 390px; right: 391px; } .split_pane .ticket-resolution-footer .ticket-resolution-footer-pane { min-width: 570px; width: 100%; } .split_pane.ticket > .pane.right { z-index: 6; bottom: 50px; } .split_pane.ticket > .pane.right .section .mast { position: relative; z-index: 2; } .split_pane.ticket .chat.chat-section { margin-top: 0; background-image: url(https://html-assets-prod.guideflow.com/d1eac229a7996880f99793fc4d631a44db0e328e); background-position: 0 0; } .split_pane.collapsible .scroll_content { overflow: auto; position: absolute; top: 41px; bottom: 0; } .split_pane.collapsible .pane.left { transition: width 0.3s ease 0.4s; border-right: 1px solid #D8DCDE; } .split_pane.collapsible .pane.left .hide_when_collapsed { height: auto; transition: visibility 0s ease 0.4s, opacity 0.3s ease 0.4s; visibility: visible; } .split_pane.collapsible .pane.left .pin_control { margin: 9px; position: absolute; right: -4px; z-index: 3; } html[data-rtl-language='true'] .split_pane.collapsible .pane.left .pin_control { left: -4px; right: auto; } .split_pane.collapsible .pane.left .pin { display: none; } html[data-rtl-language='true'] .split_pane.collapsible .pane.left .pin { display: block; } html[data-rtl-language='true'] .split_pane.collapsible .pane.left .unpin { display: none; } html[data-rtl-language='true'] .split_pane.collapsible .pane.left { border-left: 1px solid #D8DCDE; border-right: 0; } .split_pane.collapsible .pane.left .scroll_content { top: 50px; bottom: 0; left: 0; right: 0; } .split_pane.collapsible .pane.right { transition: all 0.3s ease 0.4s; } .split_pane.collapsible.collapsed .pane.left { width: 35px; overflow-y: hidden; } .split_pane.collapsible.collapsed .pane.left .hide_when_collapsed { opacity: 0; } .split_pane.collapsible.collapsed .pane.left .pin { display: block; } .split_pane.collapsible.collapsed .pane.left .unpin { display: none; } html[data-rtl-language='true'] .split_pane.collapsible.collapsed .pane.left .pin { display: none; } html[data-rtl-language='true'] .split_pane.collapsible.collapsed .pane.left .unpin { display: block; } .split_pane.collapsible.collapsed .pane.right { left: 95px !important; } html[data-rtl-language='true'] .split_pane.collapsible.collapsed .pane.right { left: 0 !important; right: 95px !important; } .split_pane.collapsible.collapsed.peeking .pane.left { overflow-y: auto; width: 330px; box-shadow: 1px 5px 3px 1px #D8DCDE; /* Grey-300 */ } .split_pane.collapsible.collapsed.peeking .pane.left .hide_when_collapsed { opacity: 1; } .split_pane.collapsible.collapsed:not(.peeking) .pane.left .scroll_content { opacity: 0; } .split_pane.collapsible.collapsed:not(.peeking) .pane.left .hide_when_collapsed:not(.scroll_content) { visibility: hidden; } .split_pane.not_found .container { padding: 20px; max-width: 40em; } html[data-rtl-language='true'] .split_pane.not_found .container { direction: rtl; } .split_pane.not_found .header { display: inline-flex; } .split_pane.not_found .header .icon { width: 108px; min-width: 108px; height: 82px; margin-right: 2em; } html[data-rtl-language='true'] .split_pane.not_found .header .icon { margin-left: 2em; margin-right: 0; } .split_pane.not_found .header h1 { font-weight: 400; font-size: 28px; line-height: 1.2em; padding-top: 0; margin-top: 0; margin-bottom: 0.1em; } .split_pane.not_found .header h2 { font-weight: 400; font-size: 18px; line-height: 1.2em; margin-top: 0.1em; margin-bottom: 0; } .split_pane.not_found .footer { margin-top: 1em; } .split_pane.not_found .footer p { line-height: 1.2em; font-size: 14px; margin-bottom: 0.4em; } .main_panes > header, .main_panes > footer, .main_panes > .pane, .workspace > header, .workspace > footer, .workspace > .pane { left: 60px; position: absolute; right: 0; } .main_panes > header .apps-button, .main_panes > footer .apps-button, .main_panes > .pane .apps-button, .workspace > header .apps-button, .workspace > footer .apps-button, .workspace > .pane .apps-button { display: none; } .main_panes > header .apps-button.available, .main_panes > footer .apps-button.available, .main_panes > .pane .apps-button.available, .workspace > header .apps-button.available, .workspace > footer .apps-button.available, .workspace > .pane .apps-button.available { display: block; } .main_panes > header.section.aux-content, .main_panes > footer.section.aux-content, .main_panes > .pane.section.aux-content, .workspace > header.section.aux-content, .workspace > footer.section.aux-content, .workspace > .pane.section.aux-content { width: 330px; } .main_panes > header.section.text, .main_panes > footer.section.text, .main_panes > .pane.section.text, .workspace > header.section.text, .workspace > footer.section.text, .workspace > .pane.section.text { width: 290px; padding: 10px 20px; text-shadow: 0px 1px 2px white; } .main_panes > header.section.text h1, .main_panes > footer.section.text h1, .main_panes > .pane.section.text h1, .workspace > header.section.text h1, .workspace > footer.section.text h1, .workspace > .pane.section.text h1 { font-size: 15px; margin-bottom: 10px; font-weight: 400; } .main_panes > header.section.text p, .main_panes > footer.section.text p, .main_panes > .pane.section.text p, .workspace > header.section.text p, .workspace > footer.section.text p, .workspace > .pane.section.text p { margin-bottom: 10px; } html[data-rtl-language='true'] .main_panes > header, html[data-rtl-language='true'] .main_panes > .pane, html[data-rtl-language='true'] .workspace > header, html[data-rtl-language='true'] .workspace > .pane { left: 0; right: 60px; } html[data-rtl-language='true'] .main_panes > .pane.left, html[data-rtl-language='true'] .workspace > .pane.left { left: auto; } .main_panes > header, .main_panes > footer, .workspace > header, .workspace > footer { z-index: 10; } .main_panes > header, .workspace > header { background-color: #F8F9F9; min-height: 49px; top: 50px; border-top: 1px transparent solid; border-bottom: 1px #D8DCDE solid; margin-bottom: 2px; } .main_panes > header h1, .workspace > header h1 { font-size: 15px; color: #2F3941; /* Grey-800 */ margin: 0; } .main_panes > header h1 button, .workspace > header h1 button { line-height: 20px; padding: 0; margin: -3px 30px 0 0; } .main_panes > header h1.left, .workspace > header h1.left { float: left; } .main_panes > header a.right, .workspace > header a.right { float: right; margin: 10px; } .main_panes > header .pane, .workspace > header .pane { padding: 4px 0; overflow: hidden; } .main_panes > header .pane .btn, .workspace > header .pane .btn { height: 28px; background-color: #F8F9F9; /* Grey-100; */ border: 1px solid #D8DCDE; /* Grey-300; */ box-shadow: none; box-sizing: border-box; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; } /* Overwrite the outline:0 rule in vendor.css for .btn.active */ .main_panes > header .pane .btn, .workspace > header .pane .btn.active:focus-visible { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .main_panes > header .pane .btn, .workspace > header .pane :focus:not(:focus-visible) { outline: none } .main_panes > header .pane .btn:active, .main_panes > header .pane .btn.active, .main_panes > header .pane .btn.guideflow_hovered, .workspace > header .pane .btn:active, .workspace > header .pane .btn.active, .workspace > header .pane .btn.guideflow_hovered { background-color: #E9EBED; /* Grey-200; */ } .main_panes > header .pane .btn-group, .workspace > header .pane .btn-group { padding: 6px 0 6px 10px; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group, html[data-rtl-language='true'] .workspace > header .pane .btn-group { padding: 6px 10px 6px 0; } .main_panes > header .pane .btn-group span:first-of-type, .workspace > header .pane .btn-group span:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group span:first-of-type.btn, html[data-rtl-language='true'] .workspace > header .pane .btn-group span:first-of-type.btn { float: right; border-radius: 0 4px 4px 0; } .main_panes > header .pane .btn-group span:last-of-type, .workspace > header .pane .btn-group span:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group span:last-of-type.btn, html[data-rtl-language='true'] .workspace > header .pane .btn-group span:last-of-type.btn { float: right; border-radius: 4px 0 0 4px; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group span:last-of-type.btn.ticket_status_label, html[data-rtl-language='true'] .workspace > header .pane .btn-group span:last-of-type.btn.ticket_status_label { border-radius: 4px; } .main_panes > header .pane .btn-group .btn:nth-child(-n+2), .workspace > header .pane .btn-group .btn:nth-child(-n+2) { max-width: 30%; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group .btn:nth-child(-n+2), html[data-rtl-language='true'] .workspace > header .pane .btn-group .btn:nth-child(-n+2) { float: right; margin-left: 0; margin-right: -1px; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group .btn:first-of-type, html[data-rtl-language='true'] .workspace > header .pane .btn-group .btn:first-of-type { border-radius: 0 4px 4px 0; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group .btn:last-of-type, html[data-rtl-language='true'] .workspace > header .pane .btn-group .btn:last-of-type { border-radius: 4px 0 0 4px; margin-left: 0; margin-right: -1px; } .main_panes > header .pane .btn-group .btn.incidents, .workspace > header .pane .btn-group .btn.incidents { color: #d02020; font-weight: 600; } .main_panes > header .pane .btn-group .msg, .workspace > header .pane .btn-group .msg { float: left; margin: 7px 0 0 12px; font-size: 12px; color: #49545C; } html[data-rtl-language='true'] .main_panes > header .pane .btn-group .msg, html[data-rtl-language='true'] .workspace > header .pane .btn-group .msg { float: right; margin: 7px 12px 0 0; } .main_panes > header .pane .btn-group .msg a, .workspace > header .pane .btn-group .msg a { border-bottom: 1px dotted #1f73b7; border-radius: 0; } .main_panes > footer, .workspace > footer { bottom: 0; height: 49px; padding: 0; z-index: 6; } .main_panes > footer button + button, .workspace > footer button + button { margin-left: 0; } .main_panes footer .pane, .workspace footer .pane { overflow: visible !important; } .main_panes > .pane, .workspace > .pane { top: 101px; } .workspace > .pane.custom-object-record { top: 50px; } .main_panes > .pane.left, .workspace > .pane.left { background-color: #F8F9F9; } .main_panes > .pane.left .action_button, .workspace > .pane.left .action_button { padding: 5px; } .main_panes > .pane.right, .workspace > .pane.right { border-left: 1px solid #D8DCDE; } html[data-rtl-language='true'] .main_panes > .pane.right, html[data-rtl-language='true'] .workspace > .pane.right { border-left: 0; border-right: 1px solid #D8DCDE; } .main_panes > .pane.right.admin, .workspace > .pane.right.admin { /* overflow: hidden; */ } .main_panes > .pane.right.admin #admin_content, .workspace > .pane.right.admin #admin_content { height: 100%; width: 100%; } .main_panes > .pane.right.admin .switch-to-classic, .workspace > .pane.right.admin .switch-to-classic { padding: 40px; } .main_panes > .pane.right.admin .switch-to-classic h2, .workspace > .pane.right.admin .switch-to-classic h2 { margin-bottom: 20px; } .main_panes > .pane.right.admin .switch-to-classic .columnbox, .workspace > .pane.right.admin .switch-to-classic .columnbox { border-top: dotted 1px #C2C8CC; /* Grey-400 */ border-bottom: dotted 1px #C2C8CC; /* Grey-400 */ padding: 30px 100px 30px 2px; position: relative; } .main_panes > .pane.right.admin .switch-to-classic .columnbox h4, .workspace > .pane.right.admin .switch-to-classic .columnbox h4 { margin-right: 10%; } .main_panes > .pane.right.admin .switch-to-classic .columnbox button, .workspace > .pane.right.admin .switch-to-classic .columnbox button { position: absolute; right: 0px; top: 30px; padding: 10px; margin-right: 20px; } .main_panes > .pane.right.admin .switch-to-classic .column, .workspace > .pane.right.admin .switch-to-classic .column { display: inline-block; vertical-align: top; } .main_panes > .pane.right.admin .switch-to-classic .link, .workspace > .pane.right.admin .switch-to-classic .link { cursor: default; margin: 25px 0px 30px; } .main_panes.dashboard > .pane.right, .workspace.dashboard > .pane.right { border-left: 1px #D8DCDE solid; } html[data-rtl-language='true'] .main_panes.dashboard > .pane.right, html[data-rtl-language='true'] .workspace.dashboard > .pane.right { border-left: 0; border-right: 1px #D8DCDE solid; } /* https://github.com/zendesk/zendesk_console/pull/13888#discussion_r142851838 */ .main_panes > header h1, .workspace > header h1, .pane > header h1 { height: 20px; padding: 12px 15px 10px 15px; line-height: 22px; } html[data-rtl-language='true'] .main_panes > header h1, html[data-rtl-language='true'] .workspace > header h1, html[data-rtl-language='true'] .pane > header h1 { direction: rtl; } .main_panes > header h1 > button, .workspace > header h1 > button, .pane > header h1 > button { float: right; } html[data-rtl-language='true'] .main_panes > header h1 > button, html[data-rtl-language='true'] .workspace > header h1 > button, html[data-rtl-language='true'] .pane > header h1 > button { float: left; } .pane.right > header h1 { padding-left: 30px; } html[data-rtl-language='true'] .pane.right > header h1 { padding-right: 30px; } .workspace .chat-section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: #ffffff; } .main_panes.flush_top > .pane { top: 50px; } .filter-grid-list div.scroll_content { top: 41px; } .filter-grid-list.mode-notice div.scroll_content { top: 104px; } .user .scroll_content, .organization .scroll_content { position: absolute; top: 148px; left: 0; right: 0; bottom: 0; overflow: auto; } html[data-rtl-language='true'] .organization .scroll_content { direction: rtl; right: 10px; } .user .devices.scroll_content { top: 117px; } .collapsible.filters .pane.left .pin_control, .collapsible.user_filters .pane.left .pin_control { margin-top: 23px; margin-right: 25px; transition: right 0.2s ease 0.4s; } html[data-rtl-language='true'] .collapsible.filters .pane.left .pin_control, html[data-rtl-language='true'] .collapsible.user_filters .pane.left .pin_control { margin-left: 25px; margin-right: 9px; transition: left 0.2s ease 0.4s; } .collapsible.filters.collapsed .pane.left .pin_control, .collapsible.user_filters.collapsed .pane.left .pin_control { right: -19px; } html[data-rtl-language='true'] .collapsible.filters.collapsed .pane.left .pin_control, html[data-rtl-language='true'] .collapsible.user_filters.collapsed .pane.left .pin_control { left: -19px; right: auto; } .collapsible.filters.collapsed.peeking .pane.left .pin_control, .collapsible.user_filters.collapsed.peeking .pane.left .pin_control { right: -4px; } html[data-rtl-language='true'] .collapsible.filters.collapsed.peeking .pane.left .pin_control, html[data-rtl-language='true'] .collapsible.user_filters.collapsed.peeking .pane.left .pin_control { left: -4px; right: auto; } section.user_filters .user-filter-title { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } section.user_filters.previewing .right header h1 { margin-right: 415px; } section.filters header, section.user_filters header, section.incidents header { background-color: transparent; border-width: 0; } section.filters .editor-toggle, section.user_filters .editor-toggle, section.incidents .editor-toggle { width: 100%; } section.filters .left header h1, section.user_filters .left header h1, section.incidents .left header h1 { font-size: 14px; color: #2F3941; font-weight: 600; border-bottom: 1px solid #D8DCDE; /* Grey-300 */ padding: 24px 0 5px 0; margin: 0 30px; } html[data-rtl-language='true'] section.filters .left header h1, html[data-rtl-language='true'] section.user_filters .left header h1, html[data-rtl-language='true'] section.incidents .left header h1 { direction: rtl; } section.filters .left header .action_button, section.user_filters .left header .action_button, section.incidents .left header .action_button { margin-top: -4px; margin-right: 15px; } html[data-rtl-language='true'] section.filters .left header .action_button, html[data-rtl-language='true'] section.user_filters .left header .action_button, html[data-rtl-language='true'] section.incidents .left header .action_button { margin-left: 15px; margin-right: 0; } section.filters .right header, section.user_filters .right header, section.incidents .right header { padding-right: 30px; } html[data-rtl-language='true'] section.filters .right header, html[data-rtl-language='true'] section.user_filters .right header, html[data-rtl-language='true'] section.incidents .right header { padding-left: 30px; padding-right: 0; } section.filters .right header .origin, section.user_filters .right header .origin, section.incidents .right header .origin { margin: 30px 0px 5px 0; } html[data-rtl-language='true'] section.filters .right header .origin, html[data-rtl-language='true'] section.user_filters .right header .origin, html[data-rtl-language='true'] section.incidents .right header .origin { float: left; } section.filters .right header h1, section.user_filters .right header h1, section.incidents .right header h1 { font-size: 20px; color: #2F3941; font-weight: 600; padding-top: 27px; padding-bottom: 5px; margin-right: 160px; white-space: nowrap; } html[data-rtl-language='true'] section.filters .right header h1, html[data-rtl-language='true'] section.user_filters .right header h1, html[data-rtl-language='true'] section.incidents .right header h1 { direction: rtl; margin-left: 160px; margin-right: 0; } section.filters .right header .skill-view-description, section.filters .right header .header-count, section.user_filters .right header .skill-view-description, section.user_filters .right header .header-count, section.incidents .right header .skill-view-description, section.incidents .right header .header-count { margin-left: 30px; font-size: 14px; line-height: 18px; font-weight: 400; color: #68737D; } html[data-rtl-language='true'] section.filters .right header .skill-view-description, html[data-rtl-language='true'] section.filters .right header .header-count, html[data-rtl-language='true'] section.user_filters .right header .skill-view-description, html[data-rtl-language='true'] section.user_filters .right header .header-count, html[data-rtl-language='true'] section.incidents .right header .skill-view-description, html[data-rtl-language='true'] section.incidents .right header .header-count { margin-left: 0; margin-right: 30px; } section.filters .right header .skill-view-description, section.user_filters .right header .skill-view-description, section.incidents .right header .skill-view-description { margin-top: 10px; } section.filters .right header .object_options_btn, section.user_filters .right header .object_options_btn, section.incidents .right header .object_options_btn { position: relative; width: 30px; height: 30px; } section.filters .right header .object_options_btn:after, section.user_filters .right header .object_options_btn:after, section.incidents .right header .object_options_btn:after { content: ""; position: absolute; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #2F3941; /* Grey-800 */ top: 11px; left: 10px; } section.filters .object_options, section.incidents .object_options { float: right; margin: 30px 0px 5px 10px; } html[data-rtl-language='true'] section.filters .object_options, html[data-rtl-language='true'] section.incidents .object_options { float: left; margin: 30px 10px 5px 4px; } section.filters .object_options .menu, section.incidents .object_options .menu { margin-top: 0; } section.user_filters .editing-actions { top: 30px; right: 30px; } html[data-rtl-language='true'] section.user_filters .editing-actions { left: 30px; right: auto; } section.user_filters .editing-actions > .btn-group, section.user_filters .editing-actions > .btn { margin: 0 0 0 7px; } html[data-rtl-language='true'] section.user_filters .editing-actions > .btn-group, html[data-rtl-language='true'] section.user_filters .editing-actions > .btn { float: right; margin: 0 7px 0 0; } section.user_filters .filter-export { top: 30px; right: 30px; } html[data-rtl-language='true'] section.user_filters .filter-export { left: 30px; right: auto; } section.user_filters .filter-editor.popover { top: 90px; } section.user_filters .filter-grid-list aside { border-top: 1px solid #D8DCDE; /* Grey-300 */ } .pane.right .filter-grid-list footer { position: absolute; background: none; border-width: 0; height: auto; bottom: auto; left: auto !important; } html[data-rtl-language='true'] .pane.right .filter-grid-list footer { left: 75px !important; } .pane.right .filter-grid-list footer .dropdown-menu { margin: 0; } .pane.right .filter-grid-list footer .controls-group { margin: 0; } .pane.center { display: flex; justify-content: center; align-items: center; } html[data-rtl-language='true'] section.bulk-mode .pane.right .filter-grid-list footer, html[data-rtl-language='true'] section.organization .pane.right .filter-grid-list footer { left: 70px !important; } .bulk-mode .pane.right.section { bottom: 0; } .organization .pane.right .filter-grid-list footer { right: 70px; top: -101px; } .user .pane.right .filter-grid-list footer { right: 70px; top: -139px; } .filters .pane.right .filter-grid-list footer, .user_filters .pane.right .filter-grid-list footer { right: 70px; top: -50px; } .filters .pane.right .filter-grid-list footer.refresh-ticket-list-bulk-footer, .user_filters .pane.right .filter-grid-list footer.refresh-ticket-list-bulk-footer { right: 70px; top: -82px; } .filters .pane.right .filter-grid-list.suspended footer, .user_filters .pane.right .filter-grid-list.suspended footer { right: 30px; } .incidents .pane.right .filter-grid-list footer { right: 30px; top: -50px; } .dashboard .pane.right .filter-grid-list footer { right: 30px; /* Added this specific value to match the margin of Play button on dashbaord */ /* play button screenshot: https://drive.google.com/file/d/16lZOXriQGUwRWcYqP85OXpGy4hjfJ2i-/view */ top: -43px; } .l-mt-1 { margin-top: 1px; } /* END ./app/assets/stylesheets/layout.scss */ /* BEGIN ./app/assets/stylesheets/working.scss */ .ticket-working-spinner { z-index: 10; position: absolute; top: 100px; left: 60px; width: 100%; height: 100%; background-color: rgb(255, 255, 255, 0.5); } .ticket-working-spinner:before { content: url(https://html-assets-prod.guideflow.com/db2f67add24ff190f8238c59572a9c459b1b0213); position: absolute; top: 30%; left: calc(50% - 90px); width: 178px; height: 181px; } .working .icon-loading-spinner { display: inline-block; vertical-align: baseline; height: 13px; } .working .empty_set { display: none; } .loading-audits { position: absolute; top: 10px; left: 0; bottom: 0; right: 0; z-index: 10; background-color: #ffffff; } .icon-loading-spinner { width: 50px; background: url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat 10px 3px; display: none; } .icon-loading-spinner.audits { display: block; margin: auto; margin-top: 360px; } .loading-user-properties { position: absolute; top: 10px; left: 0; bottom: 0; right: 0; z-index: 10; background-color: #ffffff; } .icon-loading-spinner.user-properties { display: block; margin: auto; margin-top: 360px; } /* END ./app/assets/stylesheets/working.scss */ /* BEGIN ./app/assets/stylesheets/property_box.scss */ .left.pane.ticket-sidebar.section { overflow: visible; z-index: 9; /* .pane.right is 8 */ } .left.pane h2 { color: #49545C; margin: 8px 0 -13px 19px; float: left; display: inline-block; width: 300px; font-size: 12px; font-weight: 400; } .left.pane .log { color: #2F3941; font-size: 12px; line-height: 20px; margin: 10px 0 8px 23px; float: left; width: 300px; } html[data-rtl-language='true'] .left.pane .log { direction: rtl; float: right; margin: 10px 23px 8px 0; } .left.pane .log > span { color: #68737D; padding-right: 3px; font-weight: 400; } .left.pane .log div { display: inline; } .left.pane .sidebar_box_container { overflow-y: auto; overflow-x: hidden; padding-bottom: 74px; box-sizing: border-box; height: 100%; } .left.pane .customer_context { background: #fff; } .customer_context.app.pane { position: absolute; top: 101px; right: 0; bottom: 50px; left: auto; width: 370px; box-sizing: border-box; border-left: 1px solid rgb(221, 221, 221); background-color: rgb(255, 255, 255); } html[data-rtl-language='true'] .customer_context.app.pane { border-left: 0px; border-right: 1px solid rgb(221, 221, 221); } .main_panes .with_customer_context_pane { right: 370px; } html[data-rtl-language='true'] .main_panes .with_customer_context_pane.pane.right { left: 370px; } .omnipanel.app.pane { position: absolute; top: 101px; right: 0; bottom: 0; left: auto; z-index: 6; width: calc(360px + 48px); border-left: 1px solid #d8dcde; /* Garden grey-300 */ overflow: visible; box-sizing: border-box; } .omnipanel.app.pane.is_viewing_ticket { bottom: 50px;} html[data-rtl-language="true"] .omnipanel.app.pane { direction: rtl; border-right: 1px solid #d8dcde; /* Garden grey-300 */ } .omnipanel.app.pane.only_selector { pointer-events: none; } .omnipanel.app.pane.only_selector .omnipanel-selector { pointer-events: auto; } .omnipanel.app.pane.collapsed, html[data-rtl-language="true"] .omnipanel.app.pane.collapsed { width: 48px; border-width: 0; } /* Targets the Omnipanel app pane with Flexible Layout enabled */ .main_panes.flexible_layout .omnipanel.app.pane { width: auto; } /* Targets the Omnipanel > Apps > App Container with Flexible Layout enabled */ /* This will match the exact width of the non Flexible Layout implementation when resize has not started or has been reset */ .main_panes.flexible_layout .with_omnipanel .workspace.apps .app_container { width: calc(100% + 1px); } /* Targets the Conversation Log */ html:not([data-rtl-language="true"]) .hiddenscroll .main_panes .with_omnipanel_pane, html:not([data-rtl-language="true"]) .hiddenscroll .main_panes .with_apps_pane.with_omnipanel_pane, html:not([data-rtl-language="true"]) .hiddenscroll .main_panes .with_customer_context_pane.with_omnipanel_pane { right: calc(360px + 48px); } /* Targets the Conversation Log */ html:not([data-rtl-language="true"]) .visiblescroll .main_panes .with_omnipanel_pane, html:not([data-rtl-language="true"]) .visiblescroll .main_panes .with_apps_pane.with_omnipanel_pane, html:not([data-rtl-language="true"]) .visiblescroll .main_panes .with_customer_context_pane.with_omnipanel_pane { right: calc(380px + 48px); } /* Targets the Conversation Log in User Workspace */ html:not([data-rtl-language="true"]) .main_panes.user .with_omnipanel_pane, html:not([data-rtl-language="true"]) .main_panes.user .with_apps_pane.with_omnipanel_pane, html:not([data-rtl-language="true"]) .main_panes.user .with_customer_context_pane.with_omnipanel_pane { right: calc(360px + 48px); } /* Targets the Conversation Log in Organization Workspace */ html:not([data-rtl-language="true"]) .main_panes.organization .with_omnipanel_pane, html:not([data-rtl-language="true"]) .main_panes.organization .with_apps_pane.with_omnipanel_pane, html:not([data-rtl-language="true"]) .main_panes.organization .with_customer_context_pane.with_omnipanel_pane { right: calc(360px + 48px); } /* Targets the Conversation Log with Flexible Layout enabled */ html:not([data-rtl-language="true"]) .main_panes.flexible_layout .with_omnipanel_pane, html:not([data-rtl-language="true"]) .main_panes.flexible_layout .with_apps_pane.with_omnipanel_pane, html:not([data-rtl-language="true"]) .main_panes.flexible_layout .with_customer_context_pane.with_omnipanel_pane { right: auto; } /* Targets the Conversation Log (RTL) */ html[data-rtl-language="true"] .hiddenscroll .main_panes .pane.with_omnipanel_pane.right, html[data-rtl-language="true"] .hiddenscroll .main_panes .pane.with_apps_pane.with_omnipanel_pane.right, html[data-rtl-language="true"] .hiddenscroll .main_panes .pane.with_customer_context_pane.with_omnipanel_pane.right { left: calc(360px + 48px); } /* Targets the Conversation Log (RTL) */ html[data-rtl-language="true"] .visiblescroll .main_panes .pane.with_omnipanel_pane.right, html[data-rtl-language="true"] .visiblescroll .main_panes .pane.with_apps_pane.with_omnipanel_pane.right, html[data-rtl-language="true"] .visiblescroll .main_panes .pane.with_customer_context_pane.with_omnipanel_pane.right { left: calc(380px + 48px); } /* Targets the Conversation Log (RTL) with Flexible Layout enabled */ html[data-rtl-language="true"] .main_panes.flexible_layout .with_omnipanel_pane.right, html[data-rtl-language="true"] .main_panes.flexible_layout .with_apps_pane.with_omnipanel_pane.right, html[data-rtl-language="true"] .main_panes.flexible_layout .with_customer_context_pane.with_omnipanel_pane.right { left: auto;} html:not([data-rtl-language="true"]) .main_panes .with_omnipanel_pane.isViewingTicket, html:not([data-rtl-language="true"]) .main_panes .with_apps_pane.with_omnipanel_pane.isViewingTicket, html:not([data-rtl-language="true"]) .main_panes .with_customer_context_pane.with_omnipanel_pane.isViewingTicket { left: 368px; } html[data-rtl-language="true"] .main_panes .pane.with_omnipanel_pane.isViewingTicket.right, html[data-rtl-language="true"] .main_panes .pane.with_apps_pane.with_omnipanel_pane.isViewingTicket.right, html[data-rtl-language="true"] .main_panes .pane.with_customer_context_pane.with_omnipanel_pane.isViewingTicket.right { right: 368px; } html:not([data-rtl-language="true"]) .main_panes .with_omnipanel_pane.with_omnipanel_selector_only, html:not([data-rtl-language="true"]) .main_panes .with_apps_pane.with_omnipanel_pane.with_omnipanel_selector_only, html:not([data-rtl-language="true"]) .main_panes .with_customer_context_pane.with_omnipanel_pane.with_omnipanel_selector_only { right: 48px; } html[data-rtl-language="true"] .main_panes .pane.with_omnipanel_pane.with_omnipanel_selector_only.right, html[data-rtl-language="true"] .main_panes .pane.with_apps_pane.with_omnipanel_pane.with_omnipanel_selector_only.right, html[data-rtl-language="true"] .main_panes .pane.with_customer_context_pane.with_omnipanel_pane.with_omnipanel_selector_only.right { left: 48px; } .main_panes .ticket-app-sidebar { width: 360px; position: absolute; top: 101px; right: 0; bottom: 49px; left: -100vw; overflow: hidden; border-left: 1px #d8dcde solid; border-right: none; box-sizing: border-box; } .visiblescroll .main_panes .ticket-app-sidebar { width: 380px; } .visiblescroll.os-mac .main_panes .ticket-app-sidebar { width: 376px; } html[data-rtl-language="true"] .main_panes .ticket-app-sidebar { border-left: none; border-right: 1px #d8dcde solid; } .main_panes .ticket-app-sidebar .ember-view { display: flex; height: 100%; overflow: hidden; } .main_panes .with_omnipanel .ticket-app-sidebar { width: 360px; right: 48px; } .visiblescroll .main_panes .with_omnipanel .ticket-app-sidebar { width: 380px; } .main_panes.flexible_layout .ticket-app-sidebar { visibility: hidden; } html[data-rtl-language="true"] .main_panes .ticket-app-sidebar { direction: rtl; right: 0; } .main_panes .ticket-app-sidebar.active { left: auto; } html[data-rtl-language="true"] .main_panes .ticket-app-sidebar.active { left: 0px; } html[data-rtl-language="true"] .main_panes .with_omnipanel .ticket-app-sidebar.active { left: 48px; } .omnipanel-selector-container { display: flex; flex-direction: row; justify-content: flex-end; position: absolute; top: 0; width: 100%; height: 100%; } html:not([data-rtl-language="true"]) .omnipanel-selector-container { left: 0; } html[data-rtl-language="true"] .omnipanel-selector-container { right: 0; } .collapsed > .omnipanel-selector-container { width: 48px; } .omnipanel-selector { order: 1; padding: 8px; width: 48px; min-width: 48px; box-shadow: inset 1px 0 0 0 #d8dcde; /* Garden grey-300 */ box-sizing: border-box; } html[data-rtl-language="true"] .omnipanel-selector { box-shadow: inset -1px 0 0 0 #d8dcde; /* Garden grey-300 */ } .with_omnipanel .workspace.apps, .with_omnipanel .workspace.apps:not(.ticket_edit_or_app) { z-index: 6; width: 360px; background-color: white; } .with_omnipanel .workspace.apps .app_container { width: 336px; } html:not([data-rtl-language="true"]) .with_omnipanel .workspace.apps, html:not([data-rtl-language="true"]) .with_omnipanel .workspace.apps:not(.ticket_edit_or_app) { right: 48px; } html[data-rtl-language="true"] .with_omnipanel .workspace.apps, html[data-rtl-language="true"] .with_omnipanel .workspace.apps:not(.ticket_edit_or_app) { margin-left: 48px; left: 0; } .form_field { position: relative; float: left; width: 100%; margin: 0; } html[data-rtl-language='true'] .form_field { float: right; } .form_field--narrow { position: relative; float: left; width: 47%; margin-right: 6%; /* general sibling selector (~) instead of adjacent sibling selector (~) */ /* because type and priority can be separated by invisible ticket fields */ } html[data-rtl-language='true'] .form_field--narrow { margin-left: 6%; margin-right: 0; } html[data-rtl-language='true'] .form_field--narrow.react-select-presentational-view { margin-right: 6%; margin-left: 0; } .form_field--narrow ~ .form_field--narrow { margin-right: 0; } html[data-rtl-language='true'] .form_field--narrow ~ .form_field--narrow { margin-left: 0; } .form_field label { font-size: 12px; font-weight: 600; color: #2f3941; float: none; margin: 4px 0 6px 0; text-align: left; z-index: 0; } html[data-rtl-language='true'] .form_field label { text-align: right; } .form_field label .info { float: right; width: auto; margin: 0; padding-top: 1px; } html[data-rtl-language='true'] .form_field label .info { float: left; } .form_field label, .form_field select { display: block; } .sidebar_box_container .flex-label { display: flex; justify-content: space-between; } .sidebar_box_container .flex-label > div { font-size: 12px; margin: 4px 0 6px 0; } .sidebar_box_container label { display: inline-block; } .form_field .token_list { min-height: 22px; width: 274px; } .form_field .ui-button input, .form_field .token_list input { outline: none; } .form_field input, .form_field textarea { box-shadow: none; padding: 3px; min-height: 18px; box-sizing: border-box; } html[data-rtl-language='true'] .form_field input, html[data-rtl-language='true'] .form_field textarea { text-align: right; margin-left: 7px; margin-right: 0; } .form_field input .highlightable, .form_field textarea .highlightable { background-color: transparent; background-image: none; } div .form_field input[type="checkbox"], div .form_field textarea[type="checkbox"] { display: inline-block; height: auto; margin: 5px 7px 5px 0; width: auto; } div .form_field input[type="checkbox"] + label, div .form_field textarea[type="checkbox"] + label { display: inline-block; line-height: 11px; } html[data-rtl-language='true'] .form_field input { text-align: right; margin-left: 7px; margin-right: 0; } .form_field > input, .form_field textarea, .form_field .token_list, .form_field .zd-menu-list-holder { display: block; background-image: linear-gradient(#fafafa, #fff); } .form_field > input, .form_field textarea { border-radius: 2px; } .form_field textarea { resize: vertical; } .form_field .tagger_value { text-align: left; } .property_box { position: relative; float: left; margin: 8px; margin-bottom: 1px; width: 284px; background: #FFF; padding: 10px 13px 10px 15px; border: 1px #D8DCDE solid; border-radius: 5px; } .property_box.ticket_properties { /* This is needed so that tooltips placed to the side of fields can have their z-index take precedence over the main pain. */ position: static; } .property_box .ui-button-text { padding-left: 0.7em; } .property_box div.form_field { margin-bottom: 8px; } html[data-rtl-language='true'] .property_box div.form_field { direction: rtl; } .property_box .suggestions { clear: left; border-top: 1px solid #87929D; /* Grey-500 */ position: absolute; z-index: 10000; } .property_box .suggestions li.ui-menu-item { position: relative; } .property_box .suggestions li.ui-menu-item .icon { position: absolute; top: 7px; left: 7px; width: 16px; height: 16px; } .property_box .suggestions li.ui-menu-item a { color: #2F3941; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border: none; background-repeat: no-repeat; background-position: 3px 4px; } .property_box .suggestions li.ui-menu-item a.ui-state-focus { background-color: #F8F9F9; /* Grey-100 */ } .property_box .suggestions li.ui-menu-item a span.postscript { color: #C2C8CC; font-size: 12px; padding-left: 6px; } .property_box .suggestions li.ui-menu-item.group > a, .property_box .suggestions li.ui-menu-item.agent > a { padding-left: 27px; } .property_box .suggestions.ios-style { height: auto; max-height: 200px; } .property_box .checkbox-field { margin-top: 3px; } .property_box .checkbox-field + .checkbox-field { margin-top: -4px; } .property_box.ticket_properties .tooltip.inside { position: fixed; top: auto !important; bottom: 2px; left: 82px !important; } .property_box.ticket_properties .tooltip.inside .tooltip-inner { max-width: none; width: 278px; padding: 14px 0; text-align: center; } ::placeholder { color: #68737D; } html[lang|="ja"] .left.pane .log { font-size: 12px; } .ticket-sidebar { display: flex; flex-direction: column; /* Convert ticket fields to flex box */ /* Don't flex children of ticket fields except sidebar box sidebar_box_container. */ /* We do this because the legacy code has not been converted to flexbox */ /* and sidebar_box_container should fill up remaining space. */ } .ticket-sidebar.higher-index.guideflow_hovered { /* Indexes in Lotus are in a total mess so we are unable to add */ /* a hover card to the sidebar without it being belove the toolbar. */ /* But changing the sidebar index to a higher index will block the */ /* popovers that show up when you hover over the toolbar tabs. */ /* So what we need to do is change the z-index temporarly while */ /* we're hovering over the sidebar. */ z-index: 11 !important; } .ticket-sidebar .ticket_fields, .ticket-sidebar .customer_context { display: flex; flex: 1; flex-direction: column; overflow: auto; } .ticket-sidebar .ticket_fields.show, .ticket-sidebar .customer_context.show { display: flex; } .ticket-sidebar .ticket_fields.hide, .ticket-sidebar .customer_context.hide { display: none; } .ticket-sidebar .ticket_fields > * { flex: none; } .ticket-sidebar .ticket_fields .sidebar_box_container { flex: auto; } .ticket-sidebar .property_box { background: inherit; border: none; margin: 0; padding: 22px 31px 20px 31px; width: 268px; border-bottom: 1px solid #E9EBED; /* Grey-200 */ border-radius: 0px; } .ticket-sidebar .property_box.ticket_properties { padding: 8px 31px 20px 31px; } .ticket-sidebar .ticket_fields.with_omnipanel .property_box, .ticket-sidebar .ticket_fields.with_omnipanel .property_box.ticket_properties { padding-left: 20px; padding-right: 20px; } .ticket-sidebar .ticket_fields.with_omnipanel .property_box:first-child { padding-top: 20px; } .ticket-sidebar .form_field > input, .ticket-sidebar .form_field textarea { border: 1px solid #D8DCDE; border-radius: 2px; padding: 5px; } .ticket-sidebar .form_field > input:focus, .ticket-sidebar .form_field textarea:focus { border-color: #1f73b7 !important; box-shadow: 0 0 0 3px rgba(31, 115, 183, 0.35) !important; outline: thick none !important; } .ticket-sidebar .form_field > input, .ticket-sidebar .form_field textarea, .ticket-sidebar .form_field .token_list, .ticket-sidebar .form_field .zd-menu-list-holder { background-image: none; } .ticket-sidebar .zd-selectmenu-base, .ticket-sidebar .zd-tag-menu-root { background-image: none; } /* END ./app/assets/stylesheets/property_box.scss */ /* BEGIN ./app/assets/stylesheets/zd_menu.scss */ .zd-menu-item > a .zd-aux { color: #68737D; /* Gray-600 */ font-size: 12px; } .zd-state-hover .zd-icon-arrow-down { border-top-color: #2F3941; } .zd-menu-list-holder { width: 100% !important; } /* zd-selectmenu-focus-proxy input elements should be technically visible in order to be able to gain focus. They need to be focused to prevent key inputs staying on the contenteditable element instead of the button of the target dropdown. */ .zd-selectmenu-focus-proxy { opacity: 0.01; } /********************************************/ .zd-menu-item.brand > .zd-menu-item-icon { top: 6px; left: 6px; height: 30px; width: 30px; text-align: center; overflow: hidden; border-radius: 4px; } .zd-menu-item.brand > .zd-menu-item-icon + a { padding-left: 44px; } html[data-rtl-language='true'] .zd-menu-item.brand > .zd-menu-item-icon + a { padding-left: 0; padding-right: 44px; } .brand .zd-menu-item > a { padding: 12px 8px 12px 6px; } .zd-menu-item.group > a, .zd-menu-item.agent > a { padding-left: 27px; } .zd-menu-item span.suspended { color: #B94A48; } .zd-selectmenu-base .icon { position: relative; display: inline-block; vertical-align: middle; text-align: center; overflow: hidden; border-radius: 4px; width: 20px; height: 18px; } .zd-selectmenu-base .icon > img { max-height: 100%; } .zd-state-disabled .zd-selectmenu-base { cursor: default; } .brand-widget .zd-selectmenu-base { height: 33px; padding-left: 6px; } .brand-widget .zd-selectmenu-base .icon { width: 30px; height: 30px; margin-right: 8px; } .zd-selectmenu-base.group .icon { margin: 3px 0 0 4px; } .zd-selectmenu-base.agent .icon { margin: 3px 0 0 4px; } .zd-tag-menu-root { min-height: 28px; } .zd-tag-menu-root .zd-tag-editor-holder input { box-shadow: none !important; } .zd-tag-item a { color: #2F3941; } .zd-tag-item.zd-item-focus a { color: #ffffff; } .zd-tag-menu-root .zd-state-disabled { border-color: #f1f1f1; } .zd-combo-selectmenu .zd-highlight, .zd-selectmenu .zd-highlight, .zd-searchmenu .zd-highlight { font-weight: 600 !important; /* Highlight color is DARKER than the darkest text color in our palette because agents need strong contrast here to effectively scan results in the macro menu when typing to filter their macros. This color is based on Gray-800 in the 2018 palette, but darker. */ color: #151A1E !important; background-color: transparent; } /******** Requester Field *********/ .agent .zd-searchmenu-base { padding-left: 27px !important; background-repeat: no-repeat; } .agent .zd-searchmenu .zd-menu-item > a { padding-left: 27px !important; padding-right: 2px !important; } .agent .zd-searchmenu-root .icon { position: absolute; top: 7px; left: 9px; width: 20px; height: 18px; } .zd-search-item-aux { padding-right: 6px; } html[data-rtl-language='true'] .zd-search-item-aux { padding-left: 6px; padding-right: 0; } .brand-widget .zd-menu-item { white-space: nowrap; } /*** font overrides ***/ .zd-selectmenu-root, .zd-searchmenu-root, .zd-combo-selectmenu-root { font-size: 12px; } .zd-combo-selectmenu .zd-searchmenu-base { font-size: 14px !important; } .zd-searchmenu-base { font-size: 14px; } .zd-menu-item { font-size: 14px; } .zd-selectmenu-base-content { font-size: 14px; } /*** search control overrides ***/ .zd-state-search.zd-searchmenu-root:after, .zd-state-search.zd-combo-selectmenu-root:after { content: ''; position: absolute; right: 8px; top: 50%; margin-top: -8px; width: 16px; height: 16px; background: #ffffff url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat 0 6px/16px; } html[data-rtl-language='true'] .zd-state-search.zd-searchmenu-root:after, html[data-rtl-language='true'] .zd-state-search.zd-combo-selectmenu-root:after { left: 8px; right: auto; } .zd-state-search .zd-searchmenu-base { padding-right: 28px !important; } html[data-rtl-language='true'] .zd-state-search .zd-searchmenu-base { padding-left: 28px; padding-right: 0 !important; } .zd-tag-menu-root .zd-menu-list-holder { width: 100% !important; } /*** tags overrides ***/ .zd-tag-menu-root { box-shadow: none; } .zd-tag-editor-holder input { background-color: transparent; margin-left: 1px; } /* Hide the UL empty list positioned above the input field so that it does not overlap it. This is important to properly calculate the visibility of the input element. The positioning logic samples two specific points (with vertical coordinates 1px off the top of the input and 2px off the bottom) to determine whether and how we should call scrollIntoView on the input element */ .zd-state-zero .zd-menu-list-holder { display: none; } .highlight_update .zd-menu-list-holder { background-color: transparent; background-image: none; } .zd-combo-selectmenu .zd-highlight, .zd-selectmenu .zd-highlight, .zd-searchmenu .zd-highlight, .zd-menu-item.autocomplete-label:first-child { font-weight: 600; } .zd-tag-menu-root .zd-tag-editor-holder, .zd-tag-menu-root .zd-searchmenu-root, .zd-tag-menu-root input { height: 1px; } .zd-tag-menu-root .zd-searchmenu-base { position: absolute; } .zd-tag-menu-root.zd-state-focus .zd-tag-editor-holder, .zd-tag-menu-root.zd-state-focus .zd-searchmenu-root, .zd-tag-menu-root.zd-state-focus input, .zd-tag-menu-root.zd-state-zero .zd-tag-editor-holder, .zd-tag-menu-root.zd-state-zero .zd-searchmenu-root, .zd-tag-menu-root.zd-state-zero input { height: 22px; } .zd-tag-menu-root.zd-state-focus .zd-tag-editor-holder, .zd-tag-menu-root.zd-state-zero .zd-tag-editor-holder { display: block; } .zd-tag-menu-root.zd-state-focus .zd-searchmenu-base, .zd-tag-menu-root.zd-state-zero .zd-searchmenu-base { position: static; display: block; } .zd-tag-menu-root.zd-state-disabled .zd-tag-editor-holder { display: none; } .form_field .zd-tag-item { word-break: break-word; } /* END ./app/assets/stylesheets/zd_menu.scss */ /* BEGIN ./app/assets/stylesheets/areas/_ticketing.scss */ .auto-answer__event { display: flex; flex-direction: row; } .auto-answer__icon { display: flex; justify-content: center; align-items: center; border-radius: 5px; } .auto-answer__spacer { width: 20px; max-width: 20px; min-width: 20px; } .auto-answer__body { width: 100%; } .auto-answer__body-spacer { height: 10px; } .auto-answer__title-row { display: flex; align-items: baseline; } .auto-answer__title-row-spacer { width: 5px; } .auto-answer__title { font-weight: 600; font-size: 14px; max-width: 400px; overflow: hidden; } .auto-answer__title-link { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; color: #2F3941; /* Grey-800 */ } .auto-answer__title-link.guideflow_hovered { color: #2F3941; /* Grey-800 */ } .auto-answer__timestamp { font-size: 12px; color: #C2C8CC; /* Grey-400 */ } .auto-answer__content { position: relative; border: 1px solid #D8DCDE; /* Grey-300 */ padding: 20px; border-radius: 5px; background: white; transition: 0.6s ease-in-out; } .auto-answer__content-solved, .auto-answer__content-unsolved { border: 1px solid #EFDAA3; background-color: #FFF6D9; padding: 20px; border-radius: 5px; } .auto-answer__content-header { color: #49545C; padding: 0 5px 0 0; } /* Send Events */ .auto-answer-send__title-row { display: flex; justify-content: flex-start; align-items: baseline; } .auto-answer-send__title-and-address { display: flex; align-items: baseline; } .auto-answer-send__address { font-size: 12px; color: #C2C8CC; /* Grey-400 */ } .auto-answer__article-suggestions { list-style: disc; margin-left: 1.8em; } html[data-rtl-language='true'] .auto-answer__article-suggestions { margin-left: 0; margin-right: 1.8em; } .auto-answer__available-item { margin-top: 10px; color: #08c; align-items: flex-end; } .auto-answer__unavailable-item { margin-top: 10px; color: #08c; } .auto-answer__article-suggestion { display: inline-flex; align-items: center; font-size: 14px; } .auto-answer__permission-denied { color: gray; white-space: nowrap; } .auto-answer__lock { margin-right: 2px; width: 14px; height: 14px; } .auto-answer__tooltip-row { display: inline-flex; align-items: center; height: 20px; position: relative; } .auto_answer__position--lotus { margin: 0 16px 16px 16px; } .auto_answer__checking-permissions { background: url(https://html-assets-prod.guideflow.com/db2f67add24ff190f8238c59572a9c459b1b0213) transparent no-repeat; width: 175px; height: 175px; margin: 25px auto 0 auto; } .auto-answer__permissions .garden-tooltip { position: absolute; z-index: 1; left: -3px; top: 125%; width: 150px; visibility: hidden; line-height: normal; } .auto-answer__permissions--edit-mode .garden-tooltip { left: 1px; } .auto-answer__permissions.guideflow_hovered .garden-tooltip { visibility: visible; } .auto-answer__content-header-row { display: flex; justify-content: space-between; } .auto-answer__show-irrelevant-li { list-style-type: none; display: flex; margin-left: -23px; position: relative; align-items: center; } .auto-answer__irrelevant-explanation { margin-top: 20px; max-width: 520px; } /* We have outdated garden CSS, and the new CSS doesn't position its contents properly */ .c-btn-new { transition: border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out; margin: 0; border: 1px solid #5293C7; /* blue-400 border for outline buttons */ border-radius: 4px; background-color: transparent; cursor: pointer; padding: 0 2.25em; min-width: 8.3334em; overflow: visible; text-decoration: none; line-height: 2.34; white-space: nowrap; color: #1F73B7; /* Blue-600 */ font-size: 12px; font-weight: 400; max-height: 30px; max-width: 150px; } .c-btn-new.is-hovered, .c-btn-new.guideflow_hovered { border-color: transparent; background-color: #5293c7; /* Blue-400 */ text-decoration: none; color: #fff; } .auto-answer__util-break-out-of-height { height: 0; } .auto-answer__available-item .auto-answer__enduser-activity-description { background-color: #819A9E; border-radius: 10px; cursor: default; } .auto-answer__enduser-activity { margin-left: 5px; } .auto-answer__enduser-activity .garden-tooltip { position: absolute; z-index: 1; visibility: hidden; top: 150%; padding: 1em; left: 0px; width: 150px; line-height: normal; } .auto-answer__enduser-activity.guideflow_hovered .garden-tooltip { visibility: visible; } .auto-answer__irrelevant-article-title { text-decoration: line-through; } .auto-answer--checkbox-margin { margin-left: 5px; } .auto-answer--edit-mode { max-width: unset; padding: 0 10px; outline: none; } .auto-answer__onboarding-message { margin-bottom: 5px; } .auto_answer__bot-left, .auto_answer__bot-left *, .auto_answer__bot-right, .auto_answer__bot-right * { transition: height .5s, rx .5s, transform .5s; } /* SAD */ .js-answer-bot-sad .auto_answer__bot-left { transform: translate(7px, 17px) rotate(-30deg); } .js-answer-bot-sad .auto_answer__bot-right { transform: translate(29px, 15px) rotate(30deg); } .js-answer-bot-sad .auto_answer__bot-eye-bottom { transform: translate(0px, 1px) scale(1); } .js-answer-bot-sad .auto_answer__bot-eye-top { transform: translate(0px, 1px) scale(1, 0.1); } /* HAPPY */ .js-answer-bot-happy .auto_answer__bot-left { transform: translate(8px, 15px) rotate(0deg); } .js-answer-bot-happy .auto_answer__bot-right { transform: translate(27px, 15px) rotate(0deg); } .js-answer-bot-happy .auto_answer__bot-eye-bottom { transform: translate(0px, 1px) scale(1, 0.1); } .js-answer-bot-happy .auto_answer__bot-eye-top { transform: translate(0px, 1px) scale(1); } /* Look at Improve Answers */ .js-answer-bot[data-improve=true] .auto_answer__bot-left { transform: translate(12px, 23px) rotate(0deg); } .js-answer-bot[data-improve=true] .auto_answer__bot-right { transform: translate(31px, 23px) rotate(0deg); } /* BLINK */ .js-answer-bot-blink .auto_answer__bot-left { transform: translate(7px, 19px); } .js-answer-bot-blink .auto_answer__bot-right { transform: translate(28px, 19px); } .js-answer-bot-blink .auto_answer__bot-eye-top, .js-answer-bot-blink .auto_answer__bot-eye-bottom { transform: translate(0px, 1px) scale(1, 0.1); } /* REGULAR */ .js-answer-bot-idle .auto_answer__bot-left { transform: translate(7px, 19px); } .js-answer-bot-idle .auto_answer__bot-right { transform: translate(28px, 19px); } .js-answer-bot-idle .auto_answer__bot-eye-top, .js-answer-bot-idle .auto_answer__bot-eye-bottom { transform: translate(0px, 1px) scale(1, 1); } @keyframes auto-answer__onboarding-dismiss-animation { 0% { opacity: 0.6; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .is-dismissed { animation: auto-answer__onboarding-dismiss-animation 0.6s ease-in-out forwards; } .auto-answer__onboarding-dismiss { width: 14px; height: 14px; position: relative; top: 2px; color: gray; } .rapid-resolve__event { display: flex; flex-direction: row; } .rapid-resolve__icon img { display: flex; justify-content: center; align-items: center; border: 1px solid #D8DCDE; /* Grey-300 */ border-radius: 5px; width: 40px; } /* BEGIN ./app/assets/stylesheets/components/knowledge_event.scss */ .knowledge-event__event { display: flex; flex-direction: row; } .knowledge-event__icon { display: flex; justify-content: center; align-items: center; border: 1px solid #D8DCDE; /* Grey-300 */ border-radius: 5px; } .knowledge-event__avatar-body-spacer { width: 20px; max-width: 20px; min-width: 20px; } .knowledge-event__body { width: 100%; } .knowledge-event__body-spacer { height: 10px; } .knowledge-event__title-row { display: flex; align-items: baseline; } .knowledge-event__title-row-spacer { width: 5px; } .knowledge-event__title { font-weight: 600; font-size: 14px; max-width: 400px; overflow: hidden; } .knowledge-event__title-link { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; color: #2F3941; /* Grey-800 */ } .knowledge-event__timestamp { font-size: 12px; color: #C2C8CC; /* Grey-400 */ } .knowledge-event__content { background-color: white; border: none; padding: 0; border-radius: 3px; } /* END ./app/assets/stylesheets/components/knowledge_event.scss */ .rounded-box-avatar { width: 40px; height: 40px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .rounded-box-avatar__thumbnail-container { display: flex; transition: background-color .3s; border-radius: 50%; box-sizing: border-box; margin: 0; position: relative; } .rounded-box-avatar__img { transition: all .3s; border-radius: 50%; background-clip: content-box; width: 100%; height: 100%; vertical-align: bottom; } .rounded-box-avatar__thumbnail-container--xs { width: 24px; height: 24px; } .rounded-box-avatar__thumbnail-container--sm { width: 32px; height: 32px; } .rounded-box-avatar__thumbnail-container--md { width: 40px; height: 40px; } .rounded-box-avatar__thumbnail-container--lg { width: 50px; height: 50px; } /* BEGIN ./app/assets/stylesheets/components/macro_preview.scss */ .macro-preview-enabled .zd-menu-item.zd-leaf { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } .macro-preview-enabled .zd-menu-item.zd-leaf > a { max-width: 90%; } .macro-preview__preview-icon { width: 28px; height: 28px; margin: -4px; /* TODO: followup after GA: use the CSS box model properly: https://zendesk.atlassian.net/browse/AI-6181 */ opacity: 0; border: 1px solid #87929D; /* Grey-500 */ border-radius: 4px; background: transparent url(https://html-assets-prod.guideflow.com/28376303ba2f529e5649f0e04598e800d6b68e97) center/contain no-repeat; background-size: auto; outline: 0; } .macro-preview-enabled .zd-item-focus > .macro-preview__preview-icon { opacity: 0.4; } .macro-preview-enabled .macro-preview__preview-icon.guideflow_hovered { opacity: 0.66; } .macro-preview__description-tooltip { padding: 20px !important; min-width: 200px; max-width: 400px; position: fixed; flex-direction: column; justify-content: center; font-size: 2em; /* 1 higher than the macro menu's z-index */ z-index: 10001; } html[data-rtl-language='true'] .macro-preview__description-tooltip { direction: rtl; } .macro-preview__description-tooltip .macro-preview__description-title, .macro-preview__description-tooltip .macro-preview__description, .macro-preview__description-tooltip .macro-preview__keyboard-shortcut { font-size: 1em; line-height: normal; } .macro-preview__description-tooltip .macro-preview__description-title { padding-bottom: 1.25em; } .macro-preview__description-tooltip .macro-preview__description { word-wrap: break-word; } .macro-preview__description-tooltip .macro-preview__keyboard-shortcut { padding-top: 1.25em; } .macro-preview__description-tooltip .macro-preview__keyboard-shortcut kbd { padding: 0 0 0 30px; font-family: inherit; } html[data-rtl-language='true'] .macro-preview__description-tooltip .macro-preview__keyboard-shortcut kbd { padding: 0 30px 0 0; } /* END ./app/assets/stylesheets/components/macro_preview.scss */ /* END ./app/assets/stylesheets/areas/_ticketing.scss */ /* BEGIN ./app/assets/stylesheets/areas/ipm.scss */ div.feature-notifications { user-select: none; cursor: default; /* must be under tooltips, modals, and their backdrops */ z-index: 990; right: 7px; left: auto; top: 52px; bottom: auto; margin-top: 0; overflow: visible; width: 520px; } html[data-rtl-language='true'] div.feature-notifications { left: 7px; right: auto; margin: 0 -280px 0 0; } div.feature-notifications .modal-header { padding: 11px 15px; } div.feature-notifications .modal-header h5 { display: inline-block; margin-left: 10px; font-weight: 600; } html[data-rtl-language='true'] div.feature-notifications .modal-header h5 { margin-left: 0; margin-right: 10px; } html[data-rtl-language='true'] div.feature-notifications .modal-header h5 .close { float: left; } div.feature-notifications .modal-header .paginate { display: inline-block; float: right; margin-top: 2px; /* same as '.modal-header .close' */ margin-right: 15px; color: #87929D; /* Grey-500 */ } html[data-rtl-language='true'] div.feature-notifications .modal-header .paginate { float: left; margin-left: 15px; margin-right: 0; } div.feature-notifications .modal-header .paginate span { padding: 0 2px; } div.feature-notifications .modal-body { padding: 18px 24px; } div.feature-notifications .modal-body .body { padding-top: 8px; padding-bottom: 8px; } div.feature-notifications .left { float: left; width: 150px; height: 150px; overflow: hidden; position: relative; /* image corner */ } html[data-rtl-language='true'] div.feature-notifications .left { float: right; } div.feature-notifications .left::after { border-radius: 20px; display: block; position: absolute; border: 10px solid white; top: -10px; bottom: -10px; left: -10px; right: -10px; content: ""; } div.feature-notifications .right { float: right; width: 300px; position: relative; padding-bottom: 30px; min-height: 120px; } html[data-rtl-language='true'] div.feature-notifications .right { float: left; } div.feature-notifications .right .actions { position: absolute; bottom: 0; left: 0; right: 0; height: 28px; } div.feature-notifications .right .actions .options-button { float: right; cursor: pointer; margin-top: 4px; } html[data-rtl-language='true'] div.feature-notifications .right .actions .options-button { float: left; } div.feature-notifications .right .actions .options-button .cog { /*TODO: Don't use a sprite*/ height: 24px; width: 24px; display: inline-block; } div.feature-notifications .right .actions .options-button.guideflow_hovered .caret, div.feature-notifications .right .actions .options-button:focus .caret { opacity: 0.65; } div.feature-notifications .right .actions .options-button .caret { margin-top: 10px; margin-left: -2px; } div.feature-notifications .options { display: none; position: absolute; right: 11px; bottom: -60px; border: 1px solid #D8DCDE; /* Grey-300 */ background-color: #FFF; padding: 10px 0px; border-radius: 4px; } html[data-rtl-language='true'] div.feature-notifications .options { left: 11px; right: auto; } div.feature-notifications .options.show { display: block; } div.feature-notifications .options .feature-notifications-toggle { color: #2F3941; display: block; padding: 5px 50px 5px 20px; position: relative; transition: background-color 0.125s ease 0s; } html[data-rtl-language='true'] div.feature-notifications .options .feature-notifications-toggle { padding: 5px 20px 5px 50px; } div.feature-notifications .options .feature-notifications-toggle.guideflow_hovered { background-color: #E9EBED; } div.feature-notifications .options .feature-notifications-toggle.current .zd-svg-icon-ok { opacity: 0.85; } div.feature-notifications .options .feature-notifications-toggle .zd-svg-icon-ok { position: absolute; right: 15px; top: 5px; opacity: 0; } html[data-rtl-language='true'] div.feature-notifications .options .feature-notifications-toggle .zd-svg-icon-ok { left: 15px; right: auto; } div.feature-notifications .learn-more, div.feature-notifications .call-to-action { display: none; margin-bottom: 10px; } div.feature-notifications .learn-more.visible, div.feature-notifications .call-to-action.visible { display: inline-block; } /* END ./app/assets/stylesheets/areas/ipm.scss */ /* BEGIN ./app/assets/stylesheets/areas/device_list.scss */ /* See below for RTL language positioning of these elements - LOCAL-822 */ .device_list { padding: 0 30px; /* This is the default twitter bootstrap style. */ /* Someone has undone it, and therefore, it must be re-done here :( */ /* Overriding some styles from elsewhere in the app :( */ } html[data-rtl-language='true'] .device_list { direction: rtl; } .device_list .btn-group { display: inline-block; } .device_list h4.list-heading { border-bottom: 0; padding: 0; } .device_list .heading { float: left; padding: 16px 10px 10px 0; max-width: 72%; margin-left: 0; } html[data-rtl-language='true'] .device_list .heading { float: right; text-align: right; padding: 16px 0 10px 10px; } .device_list .heading p { color: #49545C; } .device_list .email_notifications { margin-left: 0; padding: 16px 0 10px 10px; text-align: right; } .device_list .email_notifications h4, .device_list .email_notifications .btn-group { display: inline-block; } html[data-rtl-language='true'] .device_list .email_notifications .list-heading { position: absolute; left: 115px; } .device_list .email_notifications .btn-group { margin-left: 7px; margin-top: -3px; float: right; } html[data-rtl-language='true'] .device_list .email_notifications .btn-group { float: left; } .device_list .email_notifications .btn-group .btn { line-height: 12px; } .device_list .email_notifications .btn-group .caret { margin-top: 4px; } .device_list .email_notifications .btn { margin-bottom: 6px; } .device_list .filter_tickets { border-top: 0; margin-left: 0; } .device_list .filter_tickets th:first-child { padding-left: 0; } .device_list .filter_tickets th:first-child, .device_list .filter_tickets td:first-child { padding-left: 0; padding: 5px; } .device_list .filter_tickets .disabled span { color: #C2C8CC; /* Grey-400 */ } .device_list .filter_tickets input { margin: 0; width: 95%; } .device_list .filter_tickets .user_token_list { padding-top: 15px; } html[data-rtl-language='true'] .device_list .filter_tickets .user_token_list { direction: rtl; } .device_list .filter_tickets .no_tokens_message td { padding: 12px; color: #68737D; } .device_list h4.list-heading:first-child { padding-left: 0; } html[data-rtl-language='true'] .device_list h4.list-heading:first-child { padding-right: 0; } /* END ./app/assets/stylesheets/areas/device_list.scss */ /* BEGIN ./app/assets/stylesheets/areas/user_token_list.scss */ .user_token_list { padding-top: 15px; } /* END ./app/assets/stylesheets/areas/user_token_list.scss */ /* BEGIN ./app/assets/stylesheets/areas/nav_bar.scss */ #main_navigation { background-color: #03363D; /* Kale-700 */ display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; z-index: 10; } html[data-rtl-language='true'] #main_navigation { left: auto; right: 0; } #main_navigation .product_icon { display: flex; justify-content: center; align-items: center; background-color: transparent; margin: 15px 0 20px 18px; outline: none; width: 60px; height: 50px; margin: 0px; color: #78a300; fill: #fff; } #main_navigation .product_icon svg { width: 26px; height: 26px; } #main_navigation .apps_nav_bar .toolbar_link img { height: 30px; width: 30px; background-color: #ebebeb; border-radius: 4px; object-fit: cover; } #main_navigation .apps_nav_bar .toolbar_link.js-nav-bar-apps-tray__toggle svg { margin: 0; } #main_navigation .toolbar_link { display: flex; align-items: center; justify-content: center; width: 60px; height: 50px; color: #fff; background-color: transparent; cursor: pointer; margin: 0; outline: none; } #main_navigation .toolbar_link.dashboard { margin-top: 24px; } #main_navigation .toolbar_link.admin { margin-bottom: 24px; } #main_navigation .toolbar_link.active-product-link { background-color: #56777A; /* Kale-400 */ } #main_navigation .toolbar_link.active-product-link > svg { opacity: 1.0; } #main_navigation .toolbar_link.active svg.app_icon { background-color: #56777A; /* Kale-400 */ fill: #fff; opacity: 1; } #main_navigation .toolbar_link:not(.active).guideflow_hovered svg.app_icon { fill: #fff; } #main_navigation .toolbar_link svg { height: 26px; width: 26px; opacity: .5; } #main_navigation .toolbar_link svg.app_icon { width: 18px; height: 18px; padding: 6px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); fill: #fff; } #main_navigation .toolbar_link.guideflow_hovered, #main_navigation .toolbar_link:focus { color: #fff; } #main_navigation .toolbar_link.guideflow_hovered > svg, #main_navigation .toolbar_link:focus > svg { opacity: 1.0; } #main_navigation .toolbar_link.guideflow_hovered:not(.active) svg.app_icon, #main_navigation .toolbar_link:focus:not(.active) svg.app_icon { background-color: rgba(255, 255, 255, 0.1); } #main_navigation .active-nav-tab { color: #666; } #main_navigation .create { margin-top: -2px; } #main_navigation .create.dropdown .dropdown-menu { margin: -68px 0 0 62px; } #main_navigation a.custom { background-image: none; display: block; margin: 6px 0; text-align: center; } #main_navigation a.custom img { height: 35px; max-width: 85%; } .sub_nav { font-size: 12px; white-space: nowrap; margin: 0; width: auto; } .sub_nav .content .editable { margin-left: 0; } .sub_nav a { padding: 2px 3px 4px 6px; margin-right: 10px; font-weight: 400; } .sub_nav a.active { color: #666; border-bottom: 1px solid #D8DCDE; /* Grey-300 */ background: white; } .main-nav.tooltip.right { margin-left: 4px; } .main-nav.tooltip.in { transition-delay: 450ms; opacity: 1; } .main-nav.tooltip.right .tooltip-arrow { width: 9px; height: 9px; background: #2F3941; /* Grey-800 */ border: none; margin-left: 2px; transform: rotate(45deg); transform-origin: 50% 50% 0; z-index: 1; top: 52%; } .main-nav.tooltip .tooltip-inner { background-color: #2F3941; /* Grey-800 */ padding: 5px 8px 6px 8px; max-width: 300px; z-index: 2; position: relative; font-size: 13px; } #z-icon { color: white; opacity: .3; padding: 12px 0; margin: 0 auto; width: 26px; height: 26px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; } /* END ./app/assets/stylesheets/areas/nav_bar.scss */ /* BEGIN ./app/assets/stylesheets/areas/keyboard_shortcuts.scss */ .keyboardshortcuts-modal { display: none; width: 826px; margin: -350px 0 0 -380px; } .keyboardshortcuts-modal .modal-body { max-height: none; } html[data-rtl-language='true'] .keyboardshortcuts-modal .modal-body.row { margin-left: 0; margin-right: -20px; } html[data-rtl-language='true'] .keyboardshortcuts-modal .modal-body.row > div { float: right; margin-left: 0; margin-right: 20px; } .keyboardshortcuts-modal h4 { font-size: 15px; color: #2F3941; /* Grey-800 */ border-bottom: 1px solid #C2C8CC; /* Grey-400 */ padding: 0 0 3px 0; line-height: 19px; margin: 0 0 15px 0; } .keyboardshortcuts-modal h5 { line-height: 16px; font-weight: 400; font-style: italic; margin-bottom: 5px; color: #68737D; } .keyboardshortcuts-modal ul { margin: 0 0 15px 0; /* Needed to override specificity of another RTL style */ } html[data-rtl-language='true'] .keyboardshortcuts-modal ul { margin-right: 0; } .keyboardshortcuts-modal ul li { margin: 4px 0 7px; color: #2F3941; /* Grey-800 */ } .keyboardshortcuts-modal ul li dt { display: inline-block; min-width: 100px; /* Keyboard combinations stay in the same order in RTL */ } html[data-rtl-language='true'] .keyboardshortcuts-modal ul li dt { direction: ltr; } .keyboardshortcuts-modal ul li dd { display: inline-block; } .keyboardshortcuts-modal ul li kbd { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; border-radius: 3px; box-shadow: 0 0 0 #fff, 0 1px 0 #C2C8CC; /* Grey-400 */ background-image: linear-gradient(#F8F9F9, #E9EBED); /* Grey-100, Grey-200 */ display: inline-block; font-size: 11px; font-weight: 400; line-height: 11px; text-align: center; padding: 4px 5px; margin-right: 3px; background-color: #E9EBED; /* Grey-200 */ min-width: 12px; border: 1px solid #C2C8CC; /* Grey-400 */ } html[data-rtl-language='true'] .keyboardshortcuts-modal ul li kbd { margin-left: 3px; margin-right: 0; } .keyboardshortcuts-modal ul li kbd:last-of-type { margin-right: 8px; } html[data-rtl-language='true'] .keyboardshortcuts-modal ul li kbd:last-of-type { margin-right: 3px; } html[data-rtl-language='true'] .keyboardshortcuts-modal ul li kbd:first-of-type { margin-left: 8px; } .keyboardshortcuts-modal ul li kbd[title] { cursor: help; } .keyboardshortcuts-modal footer img { height: 16px; vertical-align: middle; } .keyboardshortcuts-modal footer img.sproutcore { margin-top: -4px; } .modal-footer .left { margin-top: 0.4em; } .modal-footer .left input[type=checkbox] { display: inline; } .modal-footer .left label { user-select: none; cursor: default; display: inline; line-height: 1.7em; } /* END ./app/assets/stylesheets/areas/keyboard_shortcuts.scss */ /* BEGIN ./app/assets/stylesheets/areas/agent_forwarding.scss */ .agent_forwarding_modal { width: 600px; } .agent_forwarding_modal .modal-body { text-align: center; padding-left: 40px; } .agent_forwarding_modal .fowarding_number_wrapper { background-color: white; float: left; position: relative; } html[data-rtl-language='true'] .agent_forwarding_modal .fowarding_number_wrapper { float: right; } .agent_forwarding_modal .fowarding_number_wrapper .country-select { position: absolute; width: 42px; text-align: center; left: 1px; margin-top: 1px; /* Firefox */ } .agent_forwarding_modal .fowarding_number_wrapper .country-select .zd-selectmenu-base { margin: 0px; border: none; text-align: center; } .agent_forwarding_modal .fowarding_number_wrapper .country-select .zd-selectmenu-base-content { padding-right: 12px; } .agent_forwarding_modal .fowarding_number_wrapper .country-select .zd-selectmenu-base-arrow { right: 1px; } .agent_forwarding_modal .fowarding_number_wrapper .dialed-number { padding-left: 45px; padding-bottom: 7px; /* Ensures that phone number remains LTR for RTL languages */ } html[data-rtl-language='true'] .agent_forwarding_modal .fowarding_number_wrapper .dialed-number { direction: ltr; text-align: left; } .agent_forwarding_modal .fowarding_number_wrapper .ember-view .ember-text-field { padding-bottom: 7px; } /* END ./app/assets/stylesheets/areas/agent_forwarding.scss */ /* BEGIN ./app/assets/stylesheets/areas/macros.scss */ /******** Macro View ******/ .macro-selector { border-radius: 4px; display: inline-block; height: 30px; margin: 7px 0 0 10px; width: 300px; } .macro-selector .zd-menu-back-link { position: relative; } .macro-selector .zd-menu-back-link-title { display: block; padding: 12px 40px; text-align: center; font-weight: bold; line-height: 18px; } .macro-selector .zd-icon-arrow-left-wrapper { display: inline-block; position: absolute; height: 20px; left: 18px; top: 10px; width: 20px; border-radius: 20px; cursor: pointer; } .macro-selector .zd-icon-arrow-left-wrapper.guideflow_hovered { background-color: #F8F9F9; /* Grey-100 */ } .macro-selector .zd-icon-arrow-left-wrapper .zd-icon-arrow-left { top: 4px; left: 4px; } html[data-rtl-language='true'] .macro-selector { margin: 7px 10px 0 0; } .macro-selector.guideflow_hovered .zd-selectmenu-base-content { color: #2F3941; } .macro-selector .zd-combo-selectmenu { border-radius: 4px; } .macro-selector .zd-combo-selectmenu.zd-state-open:before { background: url(https://html-assets-prod.guideflow.com/c9ead0d40da96b8c93312e9c233270d859635c50) 0 0/contain; content: ''; display: inline-block; height: 14px; opacity: 0.2; margin: 10px 0 0 10px; position: absolute; width: 14px; z-index: 1000; } html[data-rtl-language='true'] .macro-selector .zd-combo-selectmenu.zd-state-open:before { margin: 10px 10px 0 0; } .macro-selector .zd-icon-arrow-left { background: url(https://html-assets-prod.guideflow.com/081da6d86c35aecda6959275e9ce400f6e8b4499) 0 0/contain; border: none; height: 12px; margin: 0; opacity: 0.4; left: 18px; top: 33%; width: 12px; } html[data-rtl-language='true'] .macro-selector .zd-icon-arrow-left { left: auto; right: 18px; } .macro-selector .zd-icon-arrow-right { background: url(https://html-assets-prod.guideflow.com/115ede1f99c877307fae65219bb0508ff23007c5) 0 0/contain; border: none; height: 12px; margin: 0; opacity: 0.4; right: 18px; top: 33%; width: 12px; } .macro-selector .zd-menu-back-link { border-bottom: solid 1px #D8DCDE; /* Grey-300 */ } .macro-selector .zd-menu-item > a { /* This override is to allow the search result highlighting to contrast more. */ /* Menu text should normally be Gray-800. This is Gray-700. */ /* Compare to .zd-highlight color. */ color: #49545C !important; } .macro-selector .zd-menu-item { font-size: 14px; padding: 10px 20px; } .macro-selector .zd-menu-item:first-child { border-top: none; } .macro-selector .zd-menu-item:first-child:not(.zd-menu-label) { margin-top: 10px; } .macro-selector .zd-menu-item:last-child { margin-bottom: 10px; } .macro-selector .zd-menu-item > a { padding: 0; } .macro-selector .zd-menu-item.zd-menu-back-link > a { color: #2F3941; /* Grey-800 */ padding-left: 15px; } html[data-rtl-language='true'] .macro-selector .zd-menu-item.zd-menu-back-link > a { padding-left: 0; padding-right: 15px; } .macro-selector .zd-menu-label { border-top: solid 1px #D8DCDE; /* Grey-300 */ padding-bottom: 8px; padding-top: 20px; } .macro-selector .zd-menu-label:not(:first-child) { margin-top: 10px; } .macro-selector .zd-menu-label > a { color: #68737D; font-size: 12px; letter-spacing: 1.6px; } .macro-selector .zd-menu-root { border-color: #C2C8CC; /* Grey-400 */ border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 2.5px 2.5px 10px rgba(0, 0, 0, 0.2); height: 340px !important; width: 400px !important; } html[data-rtl-language='true'] .macro-selector .zd-menu-root { margin-left: -100px; } .macro-selector .zd-menu-root.zd-menu-autofit-mode { height: auto; max-height: 340px; } .macro-selector .zd-searchmenu-base { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-size: 14px; height: 35px; text-indent: 24px; } .macro-selector .zd-selectmenu-base { border-radius: 4px; height: 35px; } .macro-selector .zd-selectmenu-base-arrow { background: url(https://html-assets-prod.guideflow.com/ca8dac0180377fd5f2035335791638929bfab053) 0 0/contain; border: none; height: 14px; margin: 0; opacity: 0.4; top: auto; width: 14px; } .macro-selector .zd-selectmenu-base .zd-selectmenu-base-content .icon { background: url(https://html-assets-prod.guideflow.com/9e51e7e829bf3bbf3ced9f775f447136799919bd) 0 0/contain; height: 14px; margin: 0 5px; width: 14px; } .macro-selector .zd-selectmenu-base-content { color: #2F3941; /* Grey-800 */ font-size: 14px; } .macro-selector .zd-selectmenu-root, .macro-selector .zd-searchmenu-root, .macro-selector .zd-combo-selectmenu-root { font-size: 14px; } .macro-selector .zd-state-position-up .zd-menu-root { border-bottom-width: 1px; margin-bottom: -1px; } /* END ./app/assets/stylesheets/areas/macros.scss */ /* BEGIN ./app/assets/stylesheets/areas/ticket_properties.scss */ .form_field input[type="checkbox"] { position: relative; top: 2px; } .form_field .requester_name { width: 284px; text-align: left; } .form_field .requester_search { width: 282px; height: auto; } .form_field .requester_search .ui-button-text { padding: 0 !important; } .form_field .requester_search input.search_field { border: none; height: 14px; } .form_field .collaborator_suggestions { clear: left; } .react_problem_id { position: relative; float: left; width: 100%; } html[data-rtl-language='true'] .react_problem_id { float: right; } .form_field.problem_id select { width: 284px; } .form_field.requester .zd-searchmenu-base { height: 36px; border-color: #D8DCDE; /* Grey-300; */ border-radius: 2px; line-height: 22px; padding-left: 33px !important; } html[data-rtl-language='true'] .form_field.requester .zd-searchmenu-base { padding-left: 0 !important; padding-right: 33px !important; } .form_field.requester .zd-state-focus .zd-searchmenu-base { font-weight: 600; } .form_field.requester .zd-state-open .zd-searchmenu-base { border-radius: 2px 2px 0 0; } .form_field.requester .zd-searchmenu-root .icon { position: absolute; overflow: hidden; top: 6px; left: 6px; width: 24px; height: 24px; } html[data-rtl-language='true'] .form_field.requester .zd-searchmenu-root .icon { left: auto; right: 6px; } .form_field.requester .zd-searchmenu-root .icon img { width: 24px; height: 24px; background-color: #fff; } html[data-rtl-language='true'] .requester.v2 .zd-searchmenu-root .icon { left: 254px; right: auto; } html[data-rtl-language='true'] .requester.v2 .zd-searchmenu-base { text-align: right; padding-left: 0 !important; padding-right: 33px; } .current_collaborators .zd-tag-menu-root, .user-picker-menu-base .zd-tag-menu-root { min-height: 30px; background-color: #fff; } .current_collaborators .zd-menu-list-holder, .user-picker-menu-base .zd-menu-list-holder { padding-top: 5px; } .current_collaborators .zd-menu-list-holder, .current_collaborators .zd-searchmenu-base, .current_collaborators .zd-searchmenu, .user-picker-menu-base .zd-menu-list-holder, .user-picker-menu-base .zd-searchmenu-base, .user-picker-menu-base .zd-searchmenu { background-color: transparent; } .current_collaborators .zd-searchmenu-base, .user-picker-menu-base .zd-searchmenu-base { height: 24px; } .current_collaborators .zd-state-focus .zd-searchmenu-base, .user-picker-menu-base .zd-state-focus .zd-searchmenu-base { font-weight: 600; } .current_collaborators .zd-state-focus .zd-searchmenu-base::placeholder { font-weight: 400; } .current_collaborators .zd-menu-item-icon, .user-picker-menu-base .zd-menu-item-icon { left: 0px; top: 0px; width: 24px; height: 24px; border-radius: 3px 0 0 3px; } html[data-rtl-language='true'] .current_collaborators .zd-menu-item-icon, html[data-rtl-language='true'] .user-picker-menu-base .zd-menu-item-icon { left: auto; right: 7px; } .current_collaborators .zd-menu-item-icon img, .user-picker-menu-base .zd-menu-item-icon img { width: 24px; height: 24px; } .current_collaborators .zd-menu-item-icon.has-photo, .user-picker-menu-base .zd-menu-item-icon.has-photo { top: 0px; left: 0px; width: 24px; height: 24px; } html[data-rtl-language='true'] .current_collaborators .zd-menu-item-icon.has-photo, html[data-rtl-language='true'] .user-picker-menu-base .zd-menu-item-icon.has-photo { left: auto; right: 0px; } .current_collaborators .zd-menu-item-icon.has-photo img, .user-picker-menu-base .zd-menu-item-icon.has-photo img { width: 24px; height: 24px; } .current_collaborators .zd-tag-item, .user-picker-menu-base .zd-tag-item { padding: 5px 17px 6px 29px; } .current_collaborators .zd-tag-item .zd-menu-item-icon, .user-picker-menu-base .zd-tag-item .zd-menu-item-icon { overflow: hidden; } .current_collaborators .zd-tag-item a, .user-picker-menu-base .zd-tag-item a { font-size: 12px; } .current_collaborators .zd-tag-item.agent, .user-picker-menu-base .zd-tag-item.agent { padding-right: 38px; } html[data-rtl-language='true'] .current_collaborators .zd-tag-item.agent, html[data-rtl-language='true'] .user-picker-menu-base .zd-tag-item.agent { padding: 5px 29px 6px 38px; } .current_collaborators .zd-tag-item.agent:after, .user-picker-menu-base .zd-tag-item.agent:after { content: ''; display: block; position: absolute; right: 18px; top: 5px; width: 14px; height: 14px; } html[data-rtl-language='true'] .current_collaborators .zd-tag-item.agent:after, html[data-rtl-language='true'] .user-picker-menu-base .zd-tag-item.agent:after { left: 18px; right: auto; } .current_collaborators .zd-tag-close, .user-picker-menu-base .zd-tag-close { top: 2px; right: 2px; } html[data-rtl-language='true'] .current_collaborators .zd-tag-close, html[data-rtl-language='true'] .user-picker-menu-base .zd-tag-close { left: 2px; right: auto; } .current_collaborators .zd-tag-item { border-radius: 15px; padding: 0 17px 0 29px; } html[data-rtl-language='true'] .current_collaborators .zd-tag-item { padding: 0 29px 0 17px; } .current_collaborators .zd-tag-item .zd-menu-item-icon { overflow: visible; } .current_collaborators .zd-tag-item .has-photo { top: 1px; } .current_collaborators .zd-tag-item .avatar-badge { position: relative; top: 4px; right: 0px; margin-left: 5px; } html[data-rtl-language='true'] .current_collaborators .zd-tag-item .avatar-badge { left: 0px; right: auto; margin-left: 2px; margin-right: 5px; } .current_collaborators .zd-tag-item .round-avatar { position: relative; top: -1px; } .current_collaborators .zd-tag-item a { position: inherit; line-height: 23px; /* vertically center */ padding-right: 3px; /* pad away from close 'x' */ } .user-picker-menu .zd-menu-autofit-mode.zd-menu-root, .ccs-menu .zd-menu-autofit-mode.zd-menu-root, .requester-menu .zd-menu-autofit-mode.zd-menu-root { max-height: 10000px; } .user-picker-menu .zd-menu-panel-root .zd-menu-panel-holder, .ccs-menu .zd-menu-panel-root .zd-menu-panel-holder, .requester-menu .zd-menu-panel-root .zd-menu-panel-holder { max-height: 10000px; } .user-picker-menu .zd-menu-footer, .ccs-menu .zd-menu-footer, .requester-menu .zd-menu-footer { border-top: 1px solid #D8DCDE; /* Grey-300; */ height: 39px; position: absolute; left: 0; right: 0; padding-left: 15px; line-height: 30px; background-color: #F8F9F9; /* Grey-100 */ bottom: 0px; } html[data-rtl-language='true'] .user-picker-menu .zd-menu-footer, html[data-rtl-language='true'] .ccs-menu .zd-menu-footer, html[data-rtl-language='true'] .requester-menu .zd-menu-footer { padding-left: 0; padding-right: 15px; } .user-picker-menu .zd-menu-root.zd-menu-panel-root, .ccs-menu .zd-menu-root.zd-menu-panel-root, .requester-menu .zd-menu-root.zd-menu-panel-root { overflow: hidden; padding-bottom: 40px; } .user-picker-menu .add-user, .ccs-menu .add-user, .requester-menu .add-user { line-height: 36px; color: #68737D; /* Grey-600 */ } html[data-rtl-language='true'] .user-picker-menu .add-user, html[data-rtl-language='true'] .ccs-menu .add-user, html[data-rtl-language='true'] .requester-menu .add-user { direction: rtl; float: right; } .user-picker-menu .add-user.guideflow_hovered, .ccs-menu .add-user.guideflow_hovered, .requester-menu .add-user.guideflow_hovered { color: #1f73b7; } .user-picker-menu em, .ccs-menu em, .requester-menu em { font-weight: 600; color: #2F3941; font-style: normal; } .user-picker-menu .zd-menu-item-icon, .ccs-menu .zd-menu-item-icon, .requester-menu .zd-menu-item-icon { left: 15px; width: 32px; height: 32px; border-radius: 3px; overflow: hidden; } .user-picker-menu .zd-menu-item, .ccs-menu .zd-menu-item, .requester-menu .zd-menu-item { padding-left: 47px; min-height: 47px; position: relative; } .user-picker-menu .zd-menu-item img, .ccs-menu .zd-menu-item img, .requester-menu .zd-menu-item img { width: 32px; height: 32px; } .user-picker-menu .photo_badge, .ccs-menu .photo_badge, .requester-menu .photo_badge { position: absolute; top: 27px; left: 37px; width: 14px; height: 14px; } .user-picker-menu .photo_badge.agent, .ccs-menu .photo_badge.agent, .requester-menu .photo_badge.agent { border: 3px solid #fff; border-radius: 10px; } .user-picker-menu .zd-menu-item > a, .ccs-menu .zd-menu-item > a, .requester-menu .zd-menu-item > a { padding: 5px 15px 6px 41px; } html[data-rtl-language='true'] .user-picker-menu .zd-menu-item > a, html[data-rtl-language='true'] .ccs-menu .zd-menu-item > a, html[data-rtl-language='true'] .requester-menu .zd-menu-item > a { padding: 5px 41px 6px 15px; } .user-picker-menu .round-avatar, .ccs-menu .round-avatar, .requester-menu .round-avatar { position: absolute; left: 15px; top: 8px; } html[data-rtl-language='true'] .user-picker-menu .round-avatar, html[data-rtl-language='true'] .ccs-menu .round-avatar, html[data-rtl-language='true'] .requester-menu .round-avatar { left: auto; right: 15px; } .user-picker-menu .zd-menu-footer, .ccs-menu .zd-menu-footer, .requester-menu .zd-menu-footer { cursor: pointer; } .user-picker-menu .zd-menu-item, .requester-menu .zd-menu-item { padding-left: 15px; } html[data-rtl-language='true'] .user-picker-menu .zd-menu-item, html[data-rtl-language='true'] .requester-menu .zd-menu-item { padding-left: 0; padding-right: 15px; } .user-picker-menu .zd-menu-item a, .requester-menu .zd-menu-item a { display: inline-block; } .user-picker-menu .zd-menu-item img, .requester-menu .zd-menu-item img { width: auto; height: auto; } html[data-rtl-language='true'] .user-picker-menu .zd-menu-item { padding-left: 0; padding-right: 47px; } html[data-rtl-language='true'] .user-picker-menu .photo_badge.agent { left: auto; right: 30px; } html[data-rtl-language='true'] .user-picker-menu .zd-menu-item > a { padding: 5px 10px 6px 15px; } .ticket .form_field { /* Disabled fields */ } .ticket .form_field.highlight_update:not(.fr-focus).checkbox-field, .ticket .form_field.highlight_update:not(.fr-focus).requester .zd-searchmenu-base, .ticket .form_field.highlight_update:not(.fr-focus).problem_id .zd-searchmenu-base, .ticket .form_field.highlight_update:not(.fr-focus) .zd-tag-menu-root, .ticket .form_field.highlight_update:not(.fr-focus) .zd-selectmenu-base, .ticket .form_field.highlight_update:not(.fr-focus) .ui-state-default, .ticket .form_field.highlight_update:not(.fr-focus) textarea, .ticket .form_field.highlight_update:not(.fr-focus) > input:not([type=checkbox]) { background-color: #EDF7FF; background-image: none; box-shadow: 0 0 0 2px #5293C7 !important; border-color: transparent; border-radius: 2px; } .ticket .form_field .suggestions { width: 282px; } .ticket .form_field .suggestions li.disabled { background-color: #f6f6f6; cursor: default; } .ticket .form_field .suggestions a { padding: 5px .4em; line-height: 1.3em; color: #68737D; /* Grey-600 */ } .ticket .form_field .suggestions a span { color: #C2C8CC; } .ticket .form_field .suggestions a span.suspended { color: #B94A48; } .ticket .form_field .zd-state-disabled .zd-selectmenu-base, .ticket .form_field.ui-state-disabled .token_list, .ticket .form_field textarea[disabled], .ticket .form_field input[disabled] { cursor: default; border-color: #f1f1f1; background: transparent; background-image: none; } .ticket .form_field.missing-field-value-warning .zd-selectmenu-base { background-image: url(https://html-assets-prod.guideflow.com/81c91152f62bb35dcb2e4b71f4f5d4ceee43f9d5); background-size: 16px; background-position-x: calc(100% - 5px); background-position-y: 50%; background-repeat: no-repeat; } .ticket .form_field .zd-state-disabled .zd-selectmenu-base-arrow { opacity: 0.2; } .ticket .form_field.ui-state-disabled { opacity: 1; } .ticket .form_field.ui-state-disabled input { background: transparent; background-image: none !important; } .ticket .property_box .delim { border-bottom: 1px dotted #D8DCDE; /* Grey-300; */ margin-bottom: 4px; padding-bottom: 10px; } .ticket .property_box .fields_loading { text-align: center; } .ticket .property_box .requester.form_field button .ui-button-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background-repeat: no-repeat; background-position: 7px 7px; } .ticket .property_box .requester.form_field.agent-selection .ui-button-text { padding-left: 27px !important; } .ticket .property_box .requester.form_field.group-selection .ui-button-text { padding-left: 27px !important; } .notification { padding: 8px 10px; text-align: center; border: 1px solid; border-width: 1px 0; margin: 8px 9px 2px 9px; width: 293px; } .notification.error { background-color: #F2DEDE; border-color: #ce8383; color: #B94A48; } .notification.error ul { margin-left: 0; } .notification.error h1 { display: none; } .notification h4 { display: none; } .notification p { font-size: 14px; margin-top: 3px; } .collisionnotification-viewing { border-color: #67b7df; background-color: #9acfea; color: #468847; } .collisionnotification-updated { border-color: #5bb1dd; background-color: #9acfea; color: #3a87ad; cursor: pointer; } .collisionnotification-updated p.btn { font-weight: 600; margin: 8px 0 2px 0; color: #2F3941; /* Grey-800 */ } /* Style updates for new styling of notifications */ /* https://zendesk.atlassian.net/secure/attachment/21344/core-feedback-messaging-spec-v2.png */ .notification.v2 { background-color: #fff; border: 1px solid #E9EBED; /* Grey-200 */ border-radius: 4px; color: #2F3941; padding: 15px; text-align: left; width: 237px; margin: 30px 0 0 30px; } html[data-rtl-language='true'] .notification.v2 { text-align: right; } .notification.v2 h4, .notification.v2 p { margin: 0 0 15px 25px; } html[data-rtl-language='true'] .notification.v2 h4, html[data-rtl-language='true'] .notification.v2 p { margin: 0 25px 15px 0; } .notification.v2 h4 { display: block; font-size: 12px; position: relative; } .notification.v2 h4:before { background-image: url(https://html-assets-prod.guideflow.com/81c91152f62bb35dcb2e4b71f4f5d4ceee43f9d5); content: ''; display: block; height: 16px; margin-right: 10px; position: absolute; right: 100%; width: 16px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .notification.v2 h4:before { background-image: url(https://html-assets-prod.guideflow.com/8ebf5ac3a12f78199b20710b253d85e3225e5e44); background-size: 16px 16px; } } html[data-rtl-language='true'] .notification.v2 h4:before { margin-left: 10px; margin-right: 0; left: 100%; right: auto; } .notification.v2 .btn { background-color: #fff; background-image: none; border-color: #D8DCDE; /* Grey-300; */ border-radius: 15px; box-shadow: none; font-size: 11px; margin: 0 0 0 25px; padding: 6px 20px 4px; text-shadow: none; } html[data-rtl-language='true'] .notification.v2 .btn { margin: 0 25px 0 0; } .notification.v2 .btn.guideflow_hovered { background-color: #F8F9F9; /* Grey-100; */ transition: none; } .notification.v2 .btn:focus { background-color: #F8F9F9; /* Grey-100; */ } section.ticket .for_save { color: #68737D; /* enable if not conditioned on assignability, or if assignable: */ } section.ticket .for_save:not(.if-assignable), section.ticket .for_save.assignable { display: inline-block; color: #1f73b7; } html[data-rtl-language='true'] section.ticket .for_save { float: left; } /* END ./app/assets/stylesheets/areas/ticket_properties.scss */ /* BEGIN ./app/assets/stylesheets/areas/assignee_widget.scss */ .assignee_widget li.ui-menu-item { position: relative; } .assignee_widget li.ui-menu-item .icon { position: absolute; top: 7px; left: 7px; width: 16px; height: 16px; } .assignee_widget li.ui-menu-item a { color: #2F3941; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border: none; background-repeat: no-repeat; background-position: 3px 4px; } .assignee_widget li.ui-menu-item a.ui-state-focus { background-color: #F8F9F9; /* Grey-100 */ } .assignee_widget li.ui-menu-item a span.postscript { color: #C2C8CC; font-size: 12px; padding-left: 6px; } .assignee_widget li.ui-menu-item.group > a, .assignee_widget li.ui-menu-item.agent > a { padding-left: 27px; } .assignee_widget button .ui-button-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background-repeat: no-repeat; background-position: 7px 7px; } .assignee_widget.agent-selection .ui-button-text { padding-left: 27px !important; } .assignee_widget.group-selection .ui-button-text { padding-left: 27px !important; } /* END ./app/assets/stylesheets/areas/assignee_widget.scss */ /* BEGIN ./app/assets/stylesheets/areas/atwho_autocomplete.scss */ /* Note: Like the rest of the Rich Text Editor, does NOT flip for RTL. */ /* We start with what used to be a vendor file, at.scss, from the "aj.js" (aka atwho) package. */ /* Note: Vendor overrides are not a super great pattern in CSS. */ /* Here, we opt instead to own the styles ourselves. */ /* We are using a forked version after all… */ .atwho-view { margin-top: 18px; position: absolute; top: 0; left: 0; min-width: 120px; max-width: 30%; padding: 0; z-index: 11110 !important; display: none; /* Match Garden menu patterns */ border: 1px solid #C2C8CC; background: white; border-radius: 4px; box-shadow: 0 20px 30px 0 rgba(4, 68, 77, 0.15); color: #2F3941; } .atwho-view .atwho-header .small { color: #6f8092; float: right; padding-top: 2px; margin-right: -5px; font-size: 12px; font-weight: normal; } .atwho-view .atwho-header.guideflow_hovered { cursor: default; } .atwho-view .cur { /* Garden menu focus styles. */ /* NOTE: Atwho sets focus on mouseover, */ /* which is divergent from how Zendesk components usually work! */ background: #EDF7FF none; box-shadow: inset 0 3px 0 rgba(31, 115, 183, 0.35), inset 0 -3px 0 rgba(31, 115, 183, 0.35); } .atwho-view .cur small { color: white; } .atwho-view strong { /* Matches highlight color used elsewhere (e.g. zd-highlight). */ /* Darker than usual palette for contrast. */ color: #151A1E; /* TODO: Is !important needed here? it was present in Zendesk's override */ /* 600 is as heavy as we go */ font-weight: 600; /* Because some parts are already bold and fairly dark: */ text-decoration: underline; } .atwho-view-ul { list-style: none; padding: 8px 0; margin: 0; max-height: 250px; overflow-y: auto; overflow-x: hidden; } html[data-rtl-language='true'] .atwho-view-ul { /* This, and the increased specificity, are needed */ /* thanks to a global RTL rule that sets margin right on ul elements. */ margin-right: 0; } .atwho-view-ul > li { display: block; padding: 0; cursor: pointer; } .atwho-view a { display: block; color: inherit !important; } /* Now Zendesk-specific styles for: */ /* - {{templates} */ /* - :emoji: */ /* - @agents. */ /* Each result. */ .support-atwho__item { height: 37px; padding: 8px 20px; } /* User / person variant ____ / :) \ John Userface \____/ john.u@example.net */ .support-atwho__item--person { padding: 8px 16px 8px 12px; } .support-atwho__person-text { display: block; padding: 2px 0 0 12px; } .support-atwho__person-email { color: #68737D; font-size: 12px; } /* Emoji variant of results */ .support-atwho__item--emoji { height: 30px; position: relative; } .support-atwho__emoji { position: absolute; display: block; top: 12px; left: 12px; font-size: 22px; line-height: 24px; height: 24px; width: 24px; } .support-atwho__emoji-name { display: block; padding: 6px 0 0 28px; } /* Placeholder variant for {{curent_user.name}} etc. */ .support-atwho__placeholder-code { display: block; font-weight: 600; } .support-atwho__placeholder-name { display: block; } /* Loading item */ .support-atwho__item--loading { display: block; height: auto; padding: 8px 16px; color: #68737D; cursor: default; } /* Define some classes just for within atwho menus */ .atwho-view { /* Let's define this once again */ /* (╯°□°）╯︵ ┻━┻ */ } .atwho-view .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .atwho-view .round-avatar { float: left; } .atwho-view .avatar-offset { margin-top: 2px; } /* END ./app/assets/stylesheets/areas/atwho_autocomplete.scss */ /* BEGIN ./app/assets/stylesheets/areas/ticket_markdown.scss */ .zendesk-editor--rich-text-comment, .markdown_formatting, .markdown_preview, .event .comment { word-wrap: break-word; font-size: 14px; line-height: 20px; /* This is when the paragraph is indented */ } .zendesk-editor--rich-text-comment.zendesk-editor--rich-text-comment ul, .zendesk-editor--rich-text-comment.zendesk-editor--rich-text-comment ol, .markdown_formatting.zendesk-editor--rich-text-comment ul, .zendesk-editor--rich-text-comment.markdown_preview ul, .event .zendesk-editor--rich-text-comment.comment ul, .markdown_formatting.zendesk-editor--rich-text-comment ol, .zendesk-editor--rich-text-comment.markdown_preview ol, .event .zendesk-editor--rich-text-comment.comment ol { margin: 0px 15px; } .zendesk-editor--rich-text-comment.zendesk-editor--rich-text-comment ul li, .zendesk-editor--rich-text-comment.zendesk-editor--rich-text-comment ol li, .markdown_formatting.zendesk-editor--rich-text-comment ul li, .zendesk-editor--rich-text-comment.markdown_preview ul li, .event .zendesk-editor--rich-text-comment.comment ul li, .markdown_formatting.zendesk-editor--rich-text-comment ol li, .zendesk-editor--rich-text-comment.markdown_preview ol li, .event .zendesk-editor--rich-text-comment.comment ol li { margin: 0; } .zendesk-editor--rich-text-comment.markdown_formatting ul, .zendesk-editor--rich-text-comment.markdown_preview ul, .event .zendesk-editor--rich-text-comment.comment ul, .zendesk-editor--rich-text-comment.markdown_formatting ol, .zendesk-editor--rich-text-comment.markdown_preview ol, .event .zendesk-editor--rich-text-comment.comment ol, .markdown_formatting.markdown_formatting ul, .markdown_preview ul, .event .comment ul, .markdown_formatting.markdown_formatting ol, .markdown_preview ol, .event .comment ol { margin: -8px 0 15px 15px; } .event .comment ul, .event .comment ol { margin-right: 15px; } .zendesk-editor--rich-text-comment.markdown_formatting ul li, .zendesk-editor--rich-text-comment.markdown_preview ul li, .event .zendesk-editor--rich-text-comment.comment ul li, .zendesk-editor--rich-text-comment.markdown_formatting ol li, .zendesk-editor--rich-text-comment.markdown_preview ol li, .event .zendesk-editor--rich-text-comment.comment ol li, .markdown_formatting.markdown_formatting ul li, .markdown_preview ul li, .event .comment ul li, .markdown_formatting.markdown_formatting ol li, .markdown_preview ol li, .event .comment ol li { margin: 10px 0; } .zendesk-editor--rich-text-comment p, .zendesk-editor--rich-text-comment blockquote p, .zendesk-editor--rich-text-comment ul li, .zendesk-editor--rich-text-comment ol li, .zendesk-editor--rich-text-comment ul li p, .zendesk-editor--rich-text-comment ol li p, .markdown_formatting p, .markdown_preview p, .event .comment p, .markdown_formatting blockquote p, .markdown_preview blockquote p, .event .comment blockquote p, .markdown_formatting ul li, .markdown_preview ul li, .event .comment ul li, .markdown_formatting ol li, .markdown_preview ol li, .event .comment ol li, .markdown_formatting ul li p, .markdown_preview ul li p, .event .comment ul li p, .markdown_formatting ol li p, .markdown_preview ol li p, .event .comment ol li p { font-size: 14px; line-height: 20px; } .zendesk-editor--rich-text-comment p, .markdown_formatting p, .markdown_preview p, .event .comment p { margin: 0 0 16px 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } .zendesk-editor--rich-text-comment div.zd-comment div:not(.signature) p, .markdown_formatting div.zd-comment div:not(.signature) p, .markdown_preview div.zd-comment div:not(.signature) p, .event .comment div.zd-comment div:not(.signature) p { margin: 0; } .zendesk-editor--rich-text-comment h1, .zendesk-editor--rich-text-comment h2, .zendesk-editor--rich-text-comment h3, .zendesk-editor--rich-text-comment h4, .zendesk-editor--rich-text-comment h5, .zendesk-editor--rich-text-comment h6, .markdown_formatting h1, .markdown_preview h1, .event .comment h1, .markdown_formatting h2, .markdown_preview h2, .event .comment h2, .markdown_formatting h3, .markdown_preview h3, .event .comment h3, .markdown_formatting h4, .markdown_preview h4, .event .comment h4, .markdown_formatting h5, .markdown_preview h5, .event .comment h5, .markdown_formatting h6, .markdown_preview h6, .event .comment h6 { color: #2F3941; /* Grey-800 */ font-weight: 600; margin: 5px 0 5px; text-transform: none; } .zendesk-editor--rich-text-comment h1, .markdown_formatting h1, .markdown_preview h1, .event .comment h1 { font-size: 23px; margin: 5px 0 15px; line-height: 27px; } .zendesk-editor--rich-text-comment h2, .markdown_formatting h2, .markdown_preview h2, .event .comment h2 { font-size: 20px; margin: 5px 0 10px; line-height: 23px; } .zendesk-editor--rich-text-comment h3, .markdown_formatting h3, .markdown_preview h3, .event .comment h3 { font-size: 17px; line-height: 21px; } .zendesk-editor--rich-text-comment h4, .markdown_formatting h4, .markdown_preview h4, .event .comment h4 { font-size: 15px; line-height: 19px; } .zendesk-editor--rich-text-comment h5, .markdown_formatting h5, .markdown_preview h5, .event .comment h5 { font-size: 14px; line-height: 20px; } .zendesk-editor--rich-text-comment h6, .markdown_formatting h6, .markdown_preview h6, .event .comment h6 { font-size: 14px; line-height: 20px; color: #68737D; /* Grey-600 */ } .zendesk-editor--rich-text-comment blockquote, .markdown_formatting blockquote, .markdown_preview blockquote, .event .comment blockquote { padding-left: 10px; border-left: 2px solid #C2C8CC; /* Grey-400 */ margin: 0 0 16px 0; } html[data-rtl-language='true'] .zendesk-editor--rich-text-comment blockquote, html[data-rtl-language='true'] .markdown_formatting blockquote, html[data-rtl-language='true'] .markdown_preview blockquote, html[data-rtl-language='true'] .event .comment blockquote, .event html[data-rtl-language='true'] .comment blockquote { padding-left: 0; padding-right: 10px; border-left: 0; border-right: 2px solid #C2C8CC; /* Grey-400 */ } .zendesk-editor--rich-text-comment blockquote p, .markdown_formatting blockquote p, .markdown_preview blockquote p, .event .comment blockquote p { color: #68737D; font-weight: 400; } .zendesk-editor--rich-text-comment blockquote li, .markdown_formatting blockquote li, .markdown_preview blockquote li, .event .comment blockquote li { color: #68737D; } .zendesk-editor--rich-text-comment ul, .markdown_formatting ul, .markdown_preview ul, .event .comment ul { padding-left: 15px; list-style: disc; } .event .comment ul { padding-right: 15px; } .zendesk-editor--rich-text-comment ul li, .markdown_formatting ul li, .markdown_preview ul li, .event .comment ul li { font-size: 14px; } .zendesk-editor--rich-text-comment ul li p, .markdown_formatting ul li p, .markdown_preview ul li p, .event .comment ul li p { margin: 0; } .zendesk-editor--rich-text-comment ol, .markdown_formatting ol, .markdown_preview ol, .event .comment ol { padding-left: 15px; } .event .comment ol { padding-right: 15px; } .zendesk-editor--rich-text-comment ol li, .markdown_formatting ol li, .markdown_preview ol li, .event .comment ol li { font-size: 14px; } .zendesk-editor--rich-text-comment ol li p, .markdown_formatting ol li p, .markdown_preview ol li p, .event .comment ol li p { margin: 0; } .zendesk-editor--rich-text-comment img, .markdown_formatting img, .markdown_preview img, .event .comment img { /* This will stop huge images being so huge, and */ /* instead scale to the size of the container. */ max-width: 100%; } /* is labeled as "code fragment" in the UI */ .zendesk-editor--rich-text-comment code, .markdown_formatting code, .markdown_preview code, .event .comment code, .zd-comment.zd-comment-pre-styled code /* EM-5185 */ { margin: 0 2px; padding: 0 5px; white-space: pre-wrap; border: 1px solid #E9EBED; /* Grey-200 */ background-color: #F8F9F9; /* Grey-100 */ border-radius: 3px; font-family: Consolas, "Liberation Mono", Menlo, "Bitstream Vera Sans Mono", Courier, monospace; } /* Preformatted text 
 is labeled as "code block" in the UI */
  .zendesk-editor--rich-text-comment pre,
  .markdown_formatting pre,
  .markdown_preview pre,
  .event .comment pre,
  .zd-comment.zd-comment-pre-styled pre /* EM-5185 */ {
    background-color: #F8F9F9;
    /* Grey-100 */
    border: 1px solid #C2C8CC;
    /* Grey-400 */
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 15px 0;
    white-space: pre-wrap; }

    html[data-rtl-language='true'] .zendesk-editor--rich-text-comment pre, html[data-rtl-language='true'] .markdown_formatting pre, html[data-rtl-language='true'] .markdown_preview pre, html[data-rtl-language='true'] .event .comment pre, .event html[data-rtl-language='true'] .comment pre {
      direction: ltr;
      text-align: left; }
    .zendesk-editor--rich-text-comment pre code, .markdown_formatting pre code, .markdown_preview pre code, .event .comment pre code {
      font-family: Consolas, "Liberation Mono", Menlo, "Bitstream Vera Sans Mono", Courier, monospace;
      background: none;
      white-space: pre-wrap;
      word-break: break-word;
      border: 0;
      margin: 0;
      padding: 0; }
    .zendesk-editor--rich-text-comment pre p, .markdown_formatting pre p, .markdown_preview pre p, .event .comment pre p {
      margin: 0; }

.rich_text .event .comment blockquote {
  margin: 0; }
  .rich_text .event .comment blockquote p {
    margin: 0; }

.comment_input .btn.markdown_preview_toggle {
  float: right;
  margin-right: 0; }
  html[data-rtl-language='true'] .comment_input .btn.markdown_preview_toggle {
    float: left;
    margin-left: 0; }
  .comment_input .btn.markdown_preview_toggle.active:after {
    content: none; }

.markdown_preview {
  border: 1px solid #D8DCDE;
  /* Grey-300 */
  border-bottom: none !important;
  border-radius: 3px 3px 0 0 !important;
  min-height: 38px;
  padding: 7px 8px 10px 8px !important;
  margin: 0 !important; }

.markdown_info {
  border: 1px solid #D8DCDE;
  /* Grey-300 */
  border-top: 1px dotted #C2C8CC;
  /* Grey-400 */
  border-radius: 0 0 3px 3px;
  padding: 7px 8px;
  margin-bottom: 5px;
  background-color: #F8F9F9;
  /* Grey-100 */
  color: #68737D; }

html[lang|="ja"] .markdown_formatting p, html[lang|="ja"] .markdown_preview p, html[lang|="ja"] .event .comment p, .event html[lang|="ja"] .comment p,
html[lang|="ja"] .markdown_preview p,
html[lang|="ja"] .event .comment * {
  font-family: inherit; }

/* END ./app/assets/stylesheets/areas/ticket_markdown.scss */
/* BEGIN ./app/assets/stylesheets/areas/ticket_conversation.scss */
/* Toggle tab-list based on viewport width */
@media (max-width: 955px) {
  .pane:not(.with_apps_pane):not(.with_customer_context_pane) .conversation .c-tab__list__dropdown {
    display: block; }
  .pane:not(.with_apps_pane):not(.with_customer_context_pane) .conversation .c-tab__list {
    display: none; } }

@media (max-width: 1325px) {
  .with_customer_context_pane .conversation .c-tab__list__dropdown,
  .with_apps_pane .conversation .c-tab__list__dropdown {
    display: block; }
  .with_customer_context_pane .conversation .c-tab__list,
  .with_apps_pane .conversation .c-tab__list {
    display: none; } }

@media (min-width: 956px) {
  .pane:not(.with_apps_pane):not(.with_customer_context_pane) .conversation .c-tab__list__dropdown {
    display: none; }
  .pane:not(.with_apps_pane):not(.with_customer_context_pane) .conversation .c-tab__list {
    display: block; } }

@media (min-width: 1326px) {
  .with_customer_context_pane .conversation .c-tab__list__dropdown,
  .with_apps_pane .conversation .c-tab__list__dropdown {
    display: none; }
  .with_customer_context_pane .conversation .c-tab__list,
  .with_apps_pane .conversation .c-tab__list {
    display: block; } }

.section.ticket {
  background: #FFF;
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  right: 0;
  overflow: auto; }
  .section.ticket .pane_body {
    margin-top: 19px; }
  .use_standalone_composer .section.ticket .pane_body {
    margin-top: 12px;
  }
    html[data-rtl-language='true'] .section.ticket .pane_body {
      direction: rtl; }
  .section.ticket .polaris-filter-and-notices {
    margin-top: 0;
    transition: all 0.5s ease 0s;
    opacity: 100; }
  .section.ticket .polaris-filter-and-notices.collapse {
    top: 60px;
    opacity: 0; }
  .section.ticket .polaris-filter-and-notices .notice {
      margin-top: 0;
      margin-bottom: 3px; }
  .section.ticket .tab-controls-container {
    border-bottom: 1px solid #D8DCDE;
    display: flex;
    /* Grey-300 */ }
  .section.ticket .tab-controls-container.polaris-filter {
    margin-top: -7px; }
  .section.ticket .conversation-nav {
    display: flex;
    left: 77px;
    float: left;
    padding-bottom: 7px; }
    html[data-rtl-language='true'] .section.ticket .conversation-nav {
      left: auto;
      right: 77px;
      float: right; }
  .section.ticket .conversation-nav:after {
    content: '';
    color: #D8DCDE;
    /* Grey-300 */
    display: table-cell;
    padding: 3px 0 0 30px;
    border-right: 1px solid #D8DCDE;
    /* Grey-300 */
    width: 1px;
    height: 16px; }
    html[data-rtl-language='true'] .section.ticket .conversation-nav:after {
      padding: 3px 30px 0 0;
      border-left: 1px solid #D8DCDE;
      /* Grey-300 */
      border-right: none; }
  .section.ticket .conversation-nav .dropdown-toggle:after {
    content: '';
    background: url(https://html-assets-prod.guideflow.com/ca8dac0180377fd5f2035335791638929bfab053) 0 3px/contain;
    border: none;
    height: 14px;
    margin: 0;
    opacity: 0.4;
    top: auto;
    width: 14px;
    display: inline-block; }
  .section.ticket .event-history.conversation {
    display: none; }
  .section.ticket .event-history.events {
    display: table-cell;
    padding-left: 119px;
    padding-bottom: 7px;
    color: #C2C8CC;
    /* Grey-400 */ }
    html[data-rtl-language='true'] .section.ticket .event-history.events {
      padding-left: 0;
      padding-right: 119px; }
  .section.ticket .event-nav {
    display: table;
    position: relative;
    left: 88px; }
    html[data-rtl-language='true'] .section.ticket .event-nav {
      left: auto;
      right: 88px; }
    .section.ticket .event-nav .c-tab__list {
      padding-left: 30px;
      position: relative;
      border-bottom: none; }
      html[data-rtl-language='true'] .section.ticket .event-nav .c-tab__list {
        padding-left: 0;
        padding-right: 30px; }
    .section.ticket .event-nav .c-tab__list__item.allEvents {
      position: absolute;
      right: 30px;
      bottom: 0px;
      background: #ffffff;
      margin-right: 0; }
      .section.ticket .event-nav .c-tab__list__item.allEvents.guideflow_hovered, .section.ticket .event-nav .c-tab__list__item.allEvents.is-selected {
        bottom: -1px; }
    html[data-rtl-language='true'] .section.ticket .event-nav .c-tab__list__item.allEvents {
      left: 30px;
      right: auto; }
    .section.ticket .event-nav .c-tab__list__item.privateComments[data-count="0"], .section.ticket .event-nav .c-tab__list__item.publicComments[data-count="0"] {
      display: none; }
    .section.ticket .event-nav .c-tab__list__item.privateConversation[data-count="0"], .section.ticket .event-nav .c-tab__list__item.publicConversation[data-count="0"] {
      display: none; }
    .section.ticket .event-nav .c-tab__list__dropdown {
      padding-bottom: 7px;
      padding-left: 30px; }
      .section.ticket .event-nav .c-tab__list__dropdown .c-tab__pill {
        display: inline-block;
        color: #fff;
        background-color: #1f73b7;
        border-color: #1f73b7; }
      .section.ticket .event-nav .c-tab__list__dropdown .dropdown-toggle:after {
        content: '';
        background: url(https://html-assets-prod.guideflow.com/ca8dac0180377fd5f2035335791638929bfab053) 0 3px/contain;
        border: none;
        height: 14px;
        margin: 0;
        opacity: 0.4;
        top: auto;
        width: 14px;
        display: inline-block; }
  .section.ticket .event-nav.events {
    display: none; }
  .section.ticket .event-container {
    position: relative; }
    html[data-rtl-language='true'] .section.ticket .event-container .body, html[data-rtl-language='true'] .section.ticket .event-container .header {
      right: 55px; }
  .section.ticket.new_ticket {
    padding: 10px 20px 0; }
    .section.ticket.new_ticket .event {
      border: none;
      padding: 0; }
    .section.ticket.new_ticket label {
      text-align: left;
      font-weight: 600;
      margin: 12px 0 6px 0; }
      html[data-rtl-language='true'] .section.ticket.new_ticket label {
        text-align: right; }
    .section.ticket.new_ticket .header label {
      float: left;
      margin: 0;
      padding: 5px 5px 5px 0; }
      html[data-rtl-language='true'] .section.ticket.new_ticket .header label {
        float: right;
        padding: 5px 0 5px 5px; }
    .section.ticket.new_ticket textarea {
      box-sizing: border-box;
      margin-bottom: 6px;
      width: 100%; }
    .section.ticket.new_ticket input {
      text-align: left; }
      html[data-rtl-language='true'] .section.ticket.new_ticket input {
        text-align: right; }
    .section.ticket.new_ticket input[type="file"] {
      width: auto; }
  .section.ticket .notice {
    border-bottom: 1px dotted #E0E0E0;
    line-height: 18px;
    padding: 10px 29px;
    margin: -19px -12px 20px -12px;
    background: #fffcf3;
    /* TODO Is this in use? */ }
    .section.ticket .notice.satisfaction a.btn {
      color: #2F3941;
      /* Grey-800 */
      font-weight: bold; }
    .section.ticket .notice .incorrect-prediction {
      float: right; }
    .section.ticket .notice p.pre {
      color: #2F3941;
      /* Grey-800 */
      margin: 3px 0 3px 0;
      font-size: 14px; }
      .section.ticket .notice p.pre .rating {
        margin-left: 0px; }
    .section.ticket .notice .rating {
      color: white;
      margin-left: 3px;
      padding: 4px 8px;
      border-radius: 3px;
      background-color: #77A500; }
      .section.ticket .notice .rating.poor {
        background-color: #BF3026; }
    .section.ticket .notice td .rating {
      margin-left: 0px; }
    .section.ticket .notice .rating-predicted {
      margin-left: 5px; }
    .section.ticket .notice a {
      color: #1f73b7;
      text-decoration: none; }
      html[data-rtl-language='true'] .section.ticket .notice a {
        direction: ltr;
        unicode-bidi: bidi-override; }
    .section.ticket .notice h4 {
      font-size: inherit; }
    .section.ticket .notice .information {
      margin: 15px 0 0 0;
      padding: 0 0 0 29px;
      min-height: 19px; }
    .section.ticket .notice .toggle {
      cursor: pointer; }
    .section.ticket .notice .control {
      float: right;
      margin-top: 4px;
      text-indent: -2000px;
      width: 10px;
      height: 10px;
      transform: rotate(180deg); }
    .section.ticket .notice .content {
      display: none; }
  .section.ticket .satisfaction {
    line-height: 30px;
    position: relative; }
    .section.ticket .satisfaction .pre {
      color: #2F3941;
      /* Grey-800 */
      margin: 6px 0 3px 13px;
      font-size: 14px; }
    .section.ticket .satisfaction .sat-label {
      display: inline-block;
      color: #2F3941;
      /* Grey-800 */
      font-weight: bold;
      margin-right: 20px; }
      html[data-rtl-language='true'] .section.ticket .satisfaction .sat-label {
        margin-left: 20px;
        margin-right: 0; }
    .section.ticket .satisfaction .row-fluid [class*="span"] {
      min-height: 25px; }
    .section.ticket .satisfaction .contextual-tooltip {
      margin-left: 4px; }
      html[data-rtl-language='true'] .section.ticket .satisfaction .contextual-tooltip {
        margin-left: 0;
        margin-right: 4px; }
      .section.ticket .satisfaction .contextual-tooltip .tip {
        right: 0; }
  .section.ticket .audits {
    font-size: 14px; }
    .section.ticket .audits.reversed {
      display: flex;
      flex-direction: column-reverse;
      border-top: none; }
    .section.ticket .audits > :first-child, .section.ticket .audits.reversed .event {
      border-top: none; }
    .section.ticket .audits:not(.show-audits) .client, .section.ticket .audits:not(.show-audits) .via, .section.ticket .audits:not(.show-audits) .make-private {
      display: none; }
    .section.ticket .audits:not(.show-audits) .twitter.guideflow_hovered {
      background-color: #F8F9F9;
      /* Grey-100 */ }
      .section.ticket .audits:not(.show-audits) .twitter.guideflow_hovered .twitter-action.follow, .section.ticket .audits:not(.show-audits) .twitter.guideflow_hovered .twitter-action.unfollow {
        visibility: visible; }
      .section.ticket .audits:not(.show-audits) .twitter.guideflow_hovered .tweet-footer-right {
        display: inline-block; }
  .section.ticket .email-deliverability-warnings {
    display: inline-block;
    margin-bottom: 10px; }
    .section.ticket .email-deliverability-warnings .warning-icon {
      width: 16px;
      height: 16px; }
      .section.ticket .email-deliverability-warnings .warning-icon path {
        stroke: #ffa100; }
      .section.ticket .email-deliverability-warnings .warning-icon circle {
        fill: #ffa100; }
    .section.ticket .email-deliverability-warnings .warning-text {
      position: relative;
      top: -1px; }

.probability-bar {
  display: inline-block;
  width: 30px;
  height: 12px;
  background-color: #E9EBED;
  /* Grey-200 */
  vertical-align: middle;
  line-height: 1;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  margin: 0px 5px 3px 0px; }
  html[data-rtl-language='true'] .probability-bar {
    margin: 0px 0px 3px 5px; }
  .probability-bar.left {
    margin-left: 0px; }
  .probability-bar .radius, .probability-bar .radius-l, .probability-bar .radius-r {
    display: inline-block;
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: transparent; }
  .probability-bar .radius-l {
    left: 0;
    border-radius: 3px 0px 0px 3px; }
  .probability-bar .radius-r {
    right: 0;
    border-radius: 0px 3px 3px 0px; }
  .probability-bar .probability-bar-value {
    display: inline-block;
    width: 0%;
    height: 100%; }
  .probability-bar .probability-bar-value--00 {
    background-color: #da3517; }
  .probability-bar .probability-bar-value--10 {
    background-color: #ea5c24; }
  .probability-bar .probability-bar-value--20 {
    background-color: #ed8721; }
  .probability-bar .probability-bar-value--30 {
    background-color: #fdb83a; }
  .probability-bar .probability-bar-value--40 {
    background-color: #f9d748; }
  .probability-bar .probability-bar-value--50 {
    background-color: #ccd344; }
  .probability-bar .probability-bar-value--60 {
    background-color: #abc93f; }
  .probability-bar .probability-bar-value--70 {
    background-color: #90bc24; }
  .probability-bar .probability-bar-value--80 {
    background-color: #77b212; }
  .probability-bar .probability-bar-value--90 {
    background-color: #60a308; }

.probability-bar--working {
  background: url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat 7px 3px;
  background-size: 16px 6px; }
  .probability-bar--working .probability-bar-value {
    visibility: hidden; }

.prediction-survey__wrap {
  position: relative; }

.prediction-survey__toggle {
  position: absolute;
  right: 0px;
  top: -26px; }
  html[data-rtl-language='true'] .prediction-survey__toggle {
    left: 0px;
    right: auto; }

.prediction-survey__inner textarea {
  margin: 10px 0px; }

.prediction-survey__send {
  float: right;
  min-width: 70px; }

.prediction-survey__working {
  display: none;
  float: right;
  margin-right: 8px; }
  .prediction-survey__working--saving {
    display: inline-block; }
  .prediction-survey__working__text {
    margin: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #03363D;
    /* Kale-700 */
    text-align: center; }
  .prediction-survey__working__loader {
    background: url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat 7px 3px;
    background-size: 16px 6px;
    display: inline-block;
    width: 25px;
    height: 10px; }

.event {
  border-left: 2px solid transparent;
  border-top: 1px solid #ebebeb;
  padding: 24px 0 12px 0;
  position: relative;
  box-sizing: border-box; }
  .event.regular.guideflow_hovered .header .meta .comment_menu .dropdown-menu {
    visibility: visible; }
  .event.regular.guideflow_hovered .header .meta .comment_menu .dropdown-toggle {
    border-color: #D8DCDE;
    /* Grey-300 */ }
    .event.regular.guideflow_hovered .header .meta .comment_menu .dropdown-toggle .arrow_down {
      visibility: visible; }
  .event.collapse-signatures .comment .zd-comment:not(.zd-comment-pre-styled) .signature,
  .event.collapse-signatures .comment .signature {
    position: relative;
    display: none;
    flood-color: #2F3941;
    /* Grey-800 */
    margin-top: 20px; }
    .event.collapse-signatures .comment .zd-comment:not(.zd-comment-pre-styled) .signature.expanded,
    .event.collapse-signatures .comment .signature.expanded {
      display: block; }
  .event.collapse-signatures .comment .collapse-signature {
    display: block;
    width: 15px;
    height: 15px;
    margin-top: 10px;
    border-radius: 2px; }
    .event.collapse-signatures .comment .collapse-signature:before {
      content: "...";
      display: block;
      width: 15px;
      height: 15px;
      line-height: 7px;
      text-align: center;
      cursor: pointer;
      font-size: 14px; }
    .event.collapse-signatures .comment .collapse-signature.guideflow_hovered {
      background-color: #D8DCDE;
      /* Grey-300 */ }
  .event .user_photo, .event .user_assume_photo {
    position: absolute;
    left: 16px; }
    html[data-rtl-language='true'] .event .user_photo, html[data-rtl-language='true'] .event .user_assume_photo {
      left: auto;
      right: 16px; }
    .event .user_photo .agent, .event .user_assume_photo .agent {
      position: relative;
      top: -15px;
      left: 29px; }
  .event .content {
    margin: 0 20px 0 75px; }
    .new_ticket .event .content {
      margin: 0 0 0 75px; }
    html[data-rtl-language='true'] .event .content {
      margin: 0 75px 0 20px; }
  .event .body {
    line-height: 18px; }
    .event .body .client, .event .body > .via {
      font-size: 12px;
      color: #68737D;
      margin-bottom: 16px; }
      .event .body .client ul, .event .body > .via ul {
        margin: 0; }
  .event .comment {
    position: relative;
    overflow: auto;
    /* things agents type into the editor get a few extra styles, but not all inbound html */
    /* KEEP IN SYNC with */
    /* - zendesk_text/lib/zendesk_text/markdown.css so it looks the same when sending */
    /* - vendor/assets/stylesheets/editor.scss so it looks the same when editing */
    /* Reverting reset.css for pre-styled email replies. */ }
    .event .comment .zd-comment:not(.zd-comment-pre-styled) .signature {
      margin-top: 14px; }
    .event .comment .zd-comment:not(.zd-comment-pre-styled) table {
      border-collapse: collapse;
      font-size: 1em;
      width: 100%; }
      .event .comment .zd-comment:not(.zd-comment-pre-styled) table td, .event .comment .zd-comment:not(.zd-comment-pre-styled) table th {
        padding: 5px;
        border: 1px solid #D8DCDE;
        /* Grey-300 */
        vertical-align: top; }
    .event .comment .zd-comment.zd-comment-pre-styled {
      /* Don't let things like floats in HTML email bodies flow out of the comment body */
      /* Center tables inside elements with 100% width. */
      /* Prevents left aligned tables to float over the size of the comment box. */
      /* Make superscript less "super" */
      /* [zd2358523] Enforce a sensible line-height to stop large text rendering weirdly */
      /* Value chosen from base line-height/font-size (20/14) = approx. 1.43 */ }
      .event .comment .zd-comment.zd-comment-pre-styled:after {
        content: "";
        clear: both;
        display: block; }
      .event .comment .zd-comment.zd-comment-pre-styled img {
        /* Allows images to resize proportionally */
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        height: auto; }
      .event .comment .zd-comment.zd-comment-pre-styled span {
        line-height: normal; }
      .event .comment .zd-comment.zd-comment-pre-styled table td {
        /* Restore default table behavior */
        vertical-align: middle;
        /* Prevents images inside TD to be resized by other TD with undefined width. */ }
        .event .comment .zd-comment.zd-comment-pre-styled table td img {
          max-width: none; }
      .event .comment .zd-comment.zd-comment-pre-styled table[height="100%"] {
        height: initial;
      }
      .event .comment .zd-comment.zd-comment-pre-styled table[align='left'] {
        float: none; }
      .event .comment .zd-comment.zd-comment-pre-styled sup {
        vertical-align: initial;
        font-size: 10px; }
      .event .comment .zd-comment.zd-comment-pre-styled p {
        /* Avoid MsoListParagraph's bullets to be "text-indent:-.25in;" */
        text-indent: 0 !important;
        /* Same as "View original" HTML version (overrides $paragraph-margin) */
        margin: 0 0 9px 0; }

  .event .header {
    padding: 0 0 2px 0;
    font-size: 12px; }
    .event .header:not(.comment-actions):not(.bulk-comment.content.header) {
      max-width: calc(100% - 90px); }
    .event .header .actor {
      display: flex;
      /* Required for parentheses to display propertly in RTL languages */ }
      .event .header .actor a {
        display: inline-block; }
      .event .header .actor time {
        color: #68737D;
        margin: 0 0 0 5px;
        padding-top: 2px; }
        html[data-rtl-language='true'] .event .header .actor time {
          margin: 1px 5px 0 0; }
      .event .header .actor .assign_to {
        display: inline-block;
        padding-left: 4px;
        padding-top: 2px; }
        html[data-rtl-language='true'] .event .header .actor .assign_to {
          padding-left: 0;
          padding-right: 4px; }
      .event .header .actor .name {
        font-weight: 600;
        font-size: 14px;
        max-width: 400px;
        overflow: hidden;
        display: inline-block; }
        .event .header .actor .name a {
          overflow: hidden;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #2F3941;
          /* Grey-800 */ }
    .event.email .header .meta .comment_menu .dropdown-toggle {
      margin-top: -2px;
    }
    .event .header .meta {
      display: inline-block;
      position: absolute;
      right: 16px;
      top: 18px; }
      html[data-rtl-language='true'] .event .header .meta {
        left: 16px;
        right: auto; }
      .event .header .meta .comment_menu {
        display: inline-block;
        margin-left: 12px;
        position: relative;
        vertical-align: middle; }
        html[data-rtl-language='true'] .event .header .meta .comment_menu {
          margin-left: 0;
          margin-right: 12px; }
        .event .header .meta .comment_menu .dropdown-toggle {
          border-color: #fff;
          padding: 2px 2px;
          line-height: 1;
          outline: none;
        }
          .event .header .meta .comment_menu .dropdown-toggle .arrow_down {
            visibility: hidden;
            display: inline-block;
            content: '';
            width: 8px;
            height: 4px;
            margin: 6px 5px;
            background: url(https://html-assets-prod.guideflow.com/d9cb6ca17762e4c11688f9bb8544b5fc1836ce80) no-repeat center center;
            border: 0; }
        .event .header .meta .comment_menu .dropdown-menu {
          margin-top: 5px;
          width: auto;
          right: 0;
          left: auto;
          z-index: 1001;
          visibility: hidden; }
          html[data-rtl-language='true'] .event .header .meta .comment_menu .dropdown-menu {
            left: 0;
            right: auto; }
          .event .header .meta .comment_menu .dropdown-menu li.divider {
            margin-bottom: 10px;
            background-color: #E9EBED;
            /* Grey-200 */
            height: 2px; }
        .event .header .meta .comment_menu .icon.untrusted_flag {
          background: url(https://html-assets-prod.guideflow.com/66d4e1f3ddd74ea7bc8b456f8770b746356c89ec) no-repeat;
          display: inline-block;
          height: 20px;
          width: 20px;
          background-size: 16px; }
        .event .header .meta .comment_menu .flags .flag {
          position: relative; }
          .event .header .meta .comment_menu .flags .flag a {
            padding: 10px 20px;
            margin: 0;
            white-space: normal; }
          .event .header .meta .comment_menu .flags .flag .icon {
            position: absolute;
            left: 20px;
            top: 15px; }
            html[data-rtl-language='true'] .event .header .meta .comment_menu .flags .flag .icon {
              left: auto;
              right: 14px; }
          .event .header .meta .comment_menu .flags .flag .reason {
            margin-left: 20px;
            font-size: 13px;
            margin-top: 4px;
            width: auto;
            word-wrap: break-word; }
            html[data-rtl-language='true'] .event .header .meta .comment_menu .flags .flag .reason {
              margin-left: 0;
              margin-right: 20px; }
            .event .header .meta .comment_menu .flags .flag .reason:after {
              content: '';
              width: 14px;
              height: 14px;
              display: inline-block;
              background: url(https://html-assets-prod.guideflow.com/7ff260ea9fe772db627e4d1dfbb751f600bf2e90) no-repeat bottom;
              background-size: 11px; }
          .event .header .meta .comment_menu .flags .flag .links a {
            margin-left: 10px;
            margin-right: 10px;
            padding-left: 10px;
            padding-right: 10px; }
      .event .header .meta .channel {
        display: inline-block;
        width: 24px;
        right: 14px;
        height: 21px;
        opacity: 0.4;
        vertical-align: middle; }
        html[data-rtl-language='true'] .event .header .meta .channel {
          left: 14px;
          right: auto; }
    .event .header > span {
      margin-right: 4px; }
      html[data-rtl-language='true'] .event .header > span {
        margin-right: 0;
        margin-left: 4px;
        float: right; }
  .event .recipients {
    color: #68737D;
    margin-bottom: 10px; }
    .event .recipients a {
      color: #68737D;
      text-decoration: underline; }
    .event .recipients .recipient-list {
      margin-bottom: 2px; }
    .event .recipients span {
      display: inline-block; }
    .event .recipients .cc-recipients {
      display: none; }
      .event .recipients .cc-recipients .cc-header {
        display: inline-block;
        vertical-align: top; }
      .event .recipients .cc-recipients ul {
        display: inline-block;
        margin-left: 0; }
        html[data-rtl-language='true'] .event .recipients .cc-recipients ul {
          margin-left: auto;
          margin-right: 0; }
        .event .recipients .cc-recipients ul li {
          margin-bottom: 2px; }
  .event .audit-events {
    margin: 0 0 16px 0;
    background: #f9f9f9;
    border-radius: 5px;
    padding: 8px 14px; }
    html[data-rtl-language='true'] .event .audit-events {
      direction: rtl; }
    .event .audit-events li {
      list-style-type: none;
      line-height: 17px;
      padding: 6px 0; }
      .event .audit-events li .event_share {
        display: none; }
      .event .audit-events li .event_change {
        opacity: 0.3; }
      .event .audit-events li.Notification .event_change, .event .audit-events li.SmsNotification .event_change, .event .audit-events li.Cc .event_change, .event .audit-events li.SmsEvent .event_change, .event .audit-events li.Push .event_change, .event .audit-events li.Tweet .event_change, .event .audit-events li.FollowerNotification .event_change {
        display: none; }
      .event .audit-events li.Notification .event_share, .event .audit-events li.SmsNotification .event_share, .event .audit-events li.Cc .event_share, .event .audit-events li.SmsEvent .event_share, .event .audit-events li.Push .event_share, .event .audit-events li.Tweet .event_share, .event .audit-events li.FollowerNotification .event_share {
        display: inline-block; }
      .event .audit-events li .via {
        color: #68737D; }
    .event .audit-events .info {
      padding-left: 19px;
      margin-top: -18px; }
      html[data-rtl-language='true'] .event .audit-events .info {
        padding-left: 0;
        padding-right: 19px; }
      .event .audit-events .info label {
        font-weight: 600;
        color: #2F3941;
        display: inline;
        cursor: default; }
  .event del, .event .previous-value {
    color: #68737D; }
  .event .truncation-message {
    font-style: italic; }
  .event .outer-player-container {
    display: flex;
    min-height: 40px;
    margin-bottom: 20px; }
    html[data-rtl-language='true'] .event .outer-player-container {
      direction: rtl; }
  .event .player-loading {
    background: url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat;
    background-size: 35px 12px;
    width: 271px;
    background-position: left center;
    height: 40px; }
    html[data-rtl-language='true'] .event .player-loading {
      background-position: right center; }
  .event .hidden {
    display: none !important; }
  .event .player-container {
    display: flex;
    align-items: center;
    justify-content: left; }
  .event .recording_not_available {
    background-color: #F8F9F9;
    /* Grey-100 */
    color: #87929D;
    display: flex;
    align-items: center;
    text-align: center;
    min-width: 271px;
    min-height: 40px; }
  .event .recording_not_available span {
    flex: 1;
    padding-left: 12px;
    padding-right: 12px;
    text-transform: lowercase; }
  .event .delete-recording {
    color: #E82A2A;
    margin-left: 20px; }
  .event .delete-recording.guideflow_hovered {
    text-decoration: underline; }
  .event .call_statistics {
    margin-top: 5px;
    margin-bottom: 20px; }
    .event .call_statistics h4 {
      text-decoration: underline;
      font-size: 14px; }
    .event .call_statistics dt, .event .call_statistics dd {
      display: inline; }
    .event .call_statistics dd {
      margin-left: 0; }
      .event .call_statistics dd:after {
        content: '\a';
        white-space: pre; }
    html[data-rtl-language='true'] .event .call_statistics h4 {
      text-decoration: underline;
      font-size: 14px;
      direction: rtl; }
    html[data-rtl-language='true'] .event .call_statistics dl {
      overflow: hidden; }
    html[data-rtl-language='true'] .event .call_statistics dt, html[data-rtl-language='true'] .event .call_statistics dd {
      margin-top: 0.5em; }
    html[data-rtl-language='true'] .event .call_statistics dt {
      clear: both;
      float: right;
      width: auto; }
    html[data-rtl-language='true'] .event .call_statistics dd {
      float: right;
      margin-right: 0.5em;
      width: auto; }
  .event.is-new {
    background-color: #EDF7FF;
    border-left-color: #5293C7; }
    .event.is-new .is_new_flag {
      color: #5293C7;
      line-height: 20px;
      padding: 0 0 0 5px; }
      html[data-rtl-language='true'] .event.is-new .is_new_flag {
        padding: 0 5px 0 0; }
  .event:not(.is-public) .comment {
    background-color: #FFF6D9;
    border: 1px solid #EFDAA3;
    padding: 12px 16px 14px;
    margin-bottom: 16px;
    border-radius: 3px;
    color: #2F3941;
    /* Grey-800 */ }
    .event:not(.is-public) .comment .zd-comment {
      margin-bottom: 0px; }
  .event .attachments-container {
    margin-top: 16px;
  }

/* END ./app/assets/stylesheets/areas/ticket_conversation.scss */
/* BEGIN ./app/assets/stylesheets/areas/users.scss */
.user_photo_editable .dropdown-menu {
  margin: 5px 0 0 0; }

.user_photo, .user_assume_photo {
  position: relative;
  float: left; }
  html[data-rtl-language='true'] .user_photo, html[data-rtl-language='true'] .user_assume_photo {
    float: right; }
  .user_photo .profile, .user_assume_photo .profile {
    width: 40px;
    height: 40px;
    border-radius: 4px; }
  .user_photo.large-photo, .large-photo.user_assume_photo {
    margin: 0px; }
    .user_photo.large-photo .profile, .large-photo.user_assume_photo .profile {
      width: 55px;
      height: 55px; }
    .user_photo.large-photo .photo_badge, .large-photo.user_assume_photo .photo_badge {
      top: 47px;
      left: 44px; }
  .user_photo .photo_badge, .user_assume_photo .photo_badge {
    border: 3px solid #fff;
    border-radius: 10px;
    display: none;
    position: absolute;
    top: 33px;
    left: 30px;
    width: 14px;
    height: 14px; }
    html[data-rtl-language='true'] .user_photo .photo_badge, html[data-rtl-language='true'] .user_assume_photo .photo_badge {
      left: auto;
      right: 30px; }
  .user_photo.agent .photo_badge, .agent.user_assume_photo .photo_badge {
    display: block; }
  .user_photo.shared .photo_badge, .shared.user_assume_photo .photo_badge {
    display: block; }
  .user_photo.end_user .photo_badge, .end_user.user_assume_photo .photo_badge {
    display: block; }

html[data-rtl-language='true'] .items .user_photo .photo_badge, html[data-rtl-language='true'] .items .user_assume_photo .photo_badge {
  left: -10px; }

.user_assume_photo {
  padding: 5px 20px 0 10px;
  height: 100px; }
  .user_assume_photo .profile {
    width: 70px;
    height: 70px;
    border-radius: 4px; }

.user_photo_editable .editable-indicator,
.user_photo_editable .loading-indicator {
  margin-top: 6px; }

.user_photo_editable .editable-indicator,
.user_photo_editable .editable-background,
.user_photo_editable .loading-indicator,
.user_photo_editable .loading-background {
  position: absolute;
  top: -3px;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px; }

.user_photo_editable .editable-background {
  background-color: #ffffff;
  opacity: 0.5; }

.user_photo_editable .loading-background {
  background-color: #ffffff;
  border: 1px solid #D8DCDE;
  /* Grey-300 */ }

.user_photo_editable .editable-indicator {
  display: none; }

.user_photo_editable .editable-icon {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 26px;
  height: 26px; }

.user_photo_editable .loading-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 18px;
  height: 18px;
  background: url(https://html-assets-prod.guideflow.com/b04475cb2a4eee5fa643ae0707b8ff53e6a3990b);
  background-color: transparent;
  background-repeat: no-repeat; }

.user_photo_editable .dropdown-menu {
  border-radius: 4px;
  margin: 5px 0 0 0; }
  .user_photo_editable .dropdown-menu::after {
    background-color: white;
    border-left: 1px solid #D8DCDE;
    border-top: 1px solid #D8DCDE;
    content: '';
    display: inline-block;
    height: 6px;
    left: 16px;
    position: absolute;
    top: -4px;
    transform: rotate(45deg);
    width: 6px; }
  .user_photo_editable .dropdown-menu li {
    position: relative;
    overflow: hidden; }
    .user_photo_editable .dropdown-menu li button {
      width: 100%; }
    .user_photo_editable .dropdown-menu li input {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 60px;
      opacity: 0; }

.user_photo_editable a.guideflow_hovered .editable-indicator {
  display: block; }

.user_photo.loading .loading-container, .loading.user_assume_photo .loading-container {
  display: block; }

.details.property_box:not(.customer_record) {
  width: 293px;
  padding: 15px 10px 14px 10px; }

.details.property_box.customer_record {
  padding-top: 5px; }

.details.property_box label {
  color: #68737D;
  font-size: 12px;
  cursor: default;
  width: 68px;
  float: left;
  text-align: right;
  padding-right: 17px;
  overflow: hidden;
  white-space: normal;
  padding-top: 1px;
  font-weight: 400; }
  html[data-rtl-language='true'] .details.property_box label {
    float: right;
    text-align: left;
    padding-left: 17px;
    padding-right: 0; }
  .details.property_box label.custom-field-label {
    float: none;
    margin: 4px 0 6px 0;
    text-align: left;
    z-index: 0;
    width: auto; }

.details.property_box .no_tags {
  left: 105px;
  position: absolute;
  color: #68737D; }

.details.property_box .command {
  color: #68737D;
  cursor: pointer; }
  .details.property_box .command.guideflow_hovered {
    color: #1f73b7; }

.details.property_box .display_phone {
  cursor: default;
  text-transform: lowercase; }

.details.property_box .item {
  color: #2F3941;
  margin-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  min-height: 15px; }
  .details.property_box .item div {
    cursor: pointer;
    position: relative; }
    html[data-rtl-language='true'] .details.property_box .item div[dir='ltr'] {
      text-align: right; }
    .details.property_box .item div.command {
      color: #2F3941; }
    .details.property_box .item div.guideflow_hovered {
      color: #2F3941; }
    .details.property_box .item div.guideflow_hovered:after {
      border-top-color: #2F3941; }
    .details.property_box .item div .email-text {
      position: relative;
      padding: 4px 14px 4px 0px;
      display: inline-block;
      width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      html[data-rtl-language='true'] .details.property_box .item div .email-text {
        direction: ltr;
        text-align: right;
        padding: 4px 0 4px 14px; }
      .details.property_box .item div .email-text:after {
        position: absolute;
        right: 0px;
        top: 2px;
        width: 20px;
        height: 20px;
        background: url(https://html-assets-prod.guideflow.com/a861d62950327e7054401af7d1a4c67ad386d5e8) no-repeat;
        content: '';
        display: inline-block;
        opacity: 0.2;
        transition: opacity 0.25s ease 0s; }
        html[data-rtl-language='true'] .details.property_box .item div .email-text:after {
          display: none; }
      .details.property_box .item div .email-text.guideflow_hovered:after {
        transition: opacity 0.25s ease 0s;
        opacity: 1; }
        html[data-rtl-language='true'] .details.property_box .item div .email-text.guideflow_hovered:after {
          display: none; }
      html[data-rtl-language='true'] .details.property_box .item div .email-text:before {
        position: absolute;
        left: -5px;
        top: 2px;
        width: 20px;
        height: 20px;
        background: url(https://html-assets-prod.guideflow.com/a861d62950327e7054401af7d1a4c67ad386d5e8) no-repeat;
        content: '';
        display: inline-block;
        opacity: 0.2;
        transition: opacity 0.25s ease 0s; }
      html[data-rtl-language='true'] .details.property_box .item div .email-text.guideflow_hovered:before {
        transition: opacity 0.25s ease 0s;
        opacity: 1; }
    .details.property_box .item div .email-text.editable:after {
      background: none; }
    .details.property_box .item div .phone-text {
      position: relative;
      padding: 4px 14px 4px 0px;
      display: inline-block;
      width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      html[data-rtl-language='true'] .details.property_box .item div .phone-text {
        padding: 4px 0 4px 14px; }
      .details.property_box .item div .phone-text:after {
        position: absolute;
        right: 0px;
        top: 2px;
        width: 20px;
        height: 20px;
        background: url(https://html-assets-prod.guideflow.com/a861d62950327e7054401af7d1a4c67ad386d5e8) no-repeat;
        content: '';
        display: inline-block;
        opacity: 0.2;
        transition: opacity 0.25s ease 0s; }
        html[data-rtl-language='true'] .details.property_box .item div .phone-text:after {
          display: none; }
      .details.property_box .item div .phone-text.guideflow_hovered:after {
        transition: opacity 0.25s ease 0s;
        opacity: 1; }
        html[data-rtl-language='true'] .details.property_box .item div .phone-text.guideflow_hovered:after {
          display: none; }
      html[data-rtl-language='true'] .details.property_box .item div .phone-text:before {
        position: absolute;
        left: 0px;
        top: 2px;
        width: 20px;
        height: 20px;
        background: url(https://html-assets-prod.guideflow.com/a861d62950327e7054401af7d1a4c67ad386d5e8) no-repeat;
        content: '';
        display: inline-block;
        opacity: 0.2;
        transition: opacity 0.25s ease 0s; }
      html[data-rtl-language='true'] .details.property_box .item div .phone-text.guideflow_hovered:before {
        transition: opacity 0.25s ease 0s;
        opacity: 1; }
    .details.property_box .item div .phone-text.editable:after {
      background: none; }

.details.property_box .email, .details.property_box .phone {
  overflow: visible;
  width: auto; }
  .details.property_box .email .invalid-text-border, .details.property_box .phone .invalid-text-border {
    border: 1px solid #bd322c; }

.details.property_box .email.item:not(.verified) .unverified {
  position: absolute;
  top: 4px;
  right: -15px;
  width: 14px;
  height: 14px;
  background: url(https://html-assets-prod.guideflow.com/368065a44ca32224529d6ba1b32755234b146a70) no-repeat; }
  html[data-rtl-language='true'] .details.property_box .email.item:not(.verified) .unverified {
    left: -15px;
    right: auto; }

.details.property_box .phone.item:not(.verified) .unverified {
  position: absolute;
  top: 4px;
  right: -15px;
  width: 14px;
  height: 14px;
  background: url(https://html-assets-prod.guideflow.com/368065a44ca32224529d6ba1b32755234b146a70) no-repeat; }
  html[data-rtl-language='true'] .details.property_box .phone.item:not(.verified) .unverified {
    left: -15px;
    right: auto; }

.details.property_box .undeliverable, .details.property_box .partner-address, .details.property_box .soft-bouncing, .details.property_box .example-address, .details.property_box .mailer-daemon {
  position: absolute;
  top: 4px;
  right: -15px;
  width: 14px;
  height: 14px;
  background: url(https://html-assets-prod.guideflow.com/368065a44ca32224529d6ba1b32755234b146a70) no-repeat; }

.details.property_box .custom-checkbox {
  float: left;
  margin: 4px 5px 0px 0px; }
  html[data-rtl-language='true'] .details.property_box .custom-checkbox {
    float: right;
    margin: 4px 0 0 5px; }

.details.property_box .value {
  text-align: left;
  float: left;
  width: 195px;
  position: relative;
  border-radius: 2px;
  /* Ensures that phone number remains LTR for RTL languages */ }
  html[data-rtl-language='true'] .details.property_box .value {
    text-align: right; }
  html[data-rtl-language='true'] .details.property_box .value:not(.textarea) {
    direction: rtl;
    float: right; }
  html[data-rtl-language='true'] .details.property_box .value.forwarding_number {
    direction: ltr;
    text-align: right; }
  .details.property_box .value.groups {
    margin-top: -6px;
    margin-left: -5px;
    padding: 5px;
    border: 1px solid white; }
    .details.property_box .value.groups.disabled {
      cursor: not-allowed; }
    .details.property_box .value.groups:not(.disabled).guideflow_hovered {
      border-color: #E9EBED; }
    .details.property_box .value.groups div {
      text-overflow: ellipsis;
      overflow: hidden; }
  .details.property_box .value.custom-field-value {
    border: 1px solid #D8DCDE;
    /* Grey-300 */
    float: left;
    cursor: text;
    width: 272px;
    margin: 0px; }
    .details.property_box .value.custom-field-value.select {
      width: 282px;
      margin: 0px; }
    .details.property_box .value.custom-field-value.date {
      width: 282px; }
      .details.property_box .value.custom-field-value.date input {
        width: 277px;
        padding: 5px 0px 5px 5px; }
  .details.property_box .value input[type="checkbox"] {
    margin: 7px 0 6px 5px; }
  .details.property_box .value .primary {
    font-weight: 400; }
  .details.property_box .value select {
    width: 207px; }
  .details.property_box .value.select {
    margin-top: -4px;
    margin-left: -5px;
    width: 208px; }
    .details.property_box .value.select .zd-state-default .zd-searchmenu-base, .details.property_box .value.select .zd-state-disabled .zd-searchmenu-base {
      border-color: #FFFFFF !important;
      color: #68737D; }
    .details.property_box .value.select .zd-state-default .zd-selectmenu-base, .details.property_box .value.select .zd-state-disabled .zd-selectmenu-base {
      border-color: transparent;
      background-color: transparent; }
    .details.property_box .value.select.zd-state-disabled .zd-tag-menu-root, .details.property_box .value.select.zd-state-disabled .zd-tag-item, .details.property_box .value.select.zd-state-disabled a {
      cursor: not-allowed; }
    .details.property_box .value.select.zd-state-disabled .zd-tag-menu-root.zd-state-hover {
      border-color: transparent !important; }
    .details.property_box .value.select.zd-state-disabled .zd-tag-menu-root .zd-tag-editor-holder {
      display: none; }
    .details.property_box .value.select .zd-state-disabled .zd-searchmenu-base {
      background-color: #FFF; }
    .details.property_box .value.select .zd-selectmenu-base {
      background-image: none; }
    .details.property_box .value.select .zd-state-hover .zd-selectmenu-base, .details.property_box .value.select .zd-state-hover .zd-searchmenu-base {
      border-color: #E9EBED; }
    .details.property_box .value.select .zd-tag-menu-root {
      border-color: transparent;
      background-color: transparent; }
      .details.property_box .value.select .zd-tag-menu-root.zd-state-hover {
        border-color: #E9EBED; }
      .details.property_box .value.select .zd-tag-menu-root.zd-state-focus {
        border-color: #1f73b7 !important;
        box-shadow: 0 0 0 3px rgba(31, 115, 183, 0.35) !important;
        outline: thick none !important; }
    .details.property_box .value.select .ui-state-default:not(.ui-state-active):not(.ui-state-hover) {
      border: 1px solid white; }
      .details.property_box .value.select .ui-state-default:not(.ui-state-active):not(.ui-state-hover) .ui-icon {
        background-image: none; }
    .details.property_box .value.select .ui-selectmenu span.ui-selectmenu-status, .details.property_box .value.select .ui-selectmenu-menu li a {
      padding-left: 5px; }
    .details.property_box .value.select .ui-widget {
      font-size: 14px;
      background: white;
      color: #68737D; }
  .details.property_box .value .token_list {
    margin: -6px 0 0 -5px;
    border: 1px solid white;
    width: 196px;
    padding: 4px 4px 1px 4px;
    background: none;
    position: relative; }
    .details.property_box .value .token_list .tagSearch input {
      background: white; }
  .details.property_box .value .suggestions {
    width: 204px; }
  .details.property_box .value .ui-selectmenu:not(.ui-state-active).guideflow_hovered, .details.property_box .value .token_list.guideflow_hovered {
    border-color: #E9EBED; }

.details.property_box .organization-memberships {
  min-height: 25px; }
  .details.property_box .organization-memberships .item ~ .add-organization {
    display: inline-block;
    margin-top: 10px; }
  .details.property_box .organization-memberships .link {
    border-bottom: 1px dotted; }

.details.property_box .agent_forwarding .link {
  border-bottom: 1px dotted; }

.details.property_box .agent_forwarding.property .value .flag-icon {
  margin-top: 2px;
  margin-right: 4px; }

.details.property_box .link-mode {
  cursor: pointer;
  color: #1f73b7;
  border-width: 0;
  box-shadow: none;
  outline-width: 0;
  padding: 4px 0 !important;
  position: relative; }
  .details.property_box .link-mode.guideflow_hovered {
    text-decoration: underline; }

.details.property_box .make-direct {
  margin: -10px 0 10px 86px; }

.details.property_box .edit-mode {
  padding: 4px 2px !important; }

.details.property_box .identity-field {
  padding: 4px;
  border-radius: 0px;
  width: 192px;
  border-color: #78A300; }
  .details.property_box .identity-field:focus {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 2px #78A300; }
  .details.property_box .identity-field.twitter {
    width: 176px; }

.details.property_box [disabled], .details.property_box .ui-state-disabled, .details.property_box .disabled {
  opacity: 1 !important;
  color: #C2C8CC !important;
  cursor: not-allowed !important; }
  .details.property_box [disabled] .token_list, .details.property_box .ui-state-disabled .token_list, .details.property_box .disabled .token_list {
    border: 1px solid transparent !important; }
  .details.property_box [disabled] .tagSearch, .details.property_box .ui-state-disabled .tagSearch, .details.property_box .disabled .tagSearch {
    display: none; }

.details.property_box .shared_comments:not(.is_shared) {
  display: none; }

.details.property_box .property {
  padding: 4px 0;
  min-height: 22px;
  width: 100%; }
  html[data-rtl-language='true'] .details.property_box .property {
    direction: rtl; }
  .details.property_box .property.identities {
    padding: 0;
    display: block; }
  .details.property_box .property::after {
    display: block;
    clear: both;
    content: ''; }
  .details.property_box .property.delim {
    border-bottom: 1px solid #E9EBED;
    /* Grey-200 */
    margin-bottom: 13px;
    padding-bottom: 10px; }
  .details.property_box .property.identities .value {
    margin-bottom: 5px; }
  .details.property_box .property.identities .identity-field,
  .details.property_box .property.identities .identity-twitter-label {
    position: relative;
    top: -6px; }
  .details.property_box .property.identities .email .identity-field {
    top: 0;
    width: 90%; }

.zd-selectmenu.locales .zd-menu-root, .zd-selectmenu.locales .zd-menu-list-holder {
  width: auto !important;
  min-width: 206px;
  max-width: 360px; }

.zd-selectmenu.locales .zd-menu-item {
  padding-right: 10px; }

.people_form {
  width: 475px; }
  .people_form .modal-body div {
    margin-bottom: 12px; }
    .people_form .modal-body div p {
      width: 310px;
      margin-top: 7px;
      color: #68737D;
      float: right; }
      html[data-rtl-language='true'] .people_form .modal-body div p {
        float: left;
        margin-right: 10px; }
  .people_form label span {
    float: left;
    width: 105px;
    display: inline-block;
    text-align: right;
    padding-right: 20px;
    margin-top: 6px;
    color: #2F3941; }
    html[data-rtl-language='true'] .people_form label span {
      float: right;
      text-align: left;
      padding-left: 20px;
      padding-right: 0; }
  .people_form input {
    width: 300px;
    float: right; }
  .people_form .input {
    width: 312px;
    float: right; }
    html[data-rtl-language='true'] .people_form .input.field-note {
      float: left;
      text-align: right; }
  .people_form .input.dropdown {
    margin-bottom: 0px; }
    .people_form .input.dropdown .zd-selectmenu {
      margin-bottom: 0px; }
  .people_form select {
    z-index: 10000; }

.property_alert {
  margin: 8px;
  margin-bottom: 1px;
  text-align: center; }

.two-factor-authentication h3 {
  margin-bottom: 25px; }

.two-factor-authentication #qrcode {
  margin-left: 10px;
  float: right; }

.two-factor-authentication #qrcode-container {
  min-height: 147px; }

.two-factor-authentication #two-factor-phone-form {
  margin-bottom: 25px; }

.two-factor-authentication #two-factor-setup p {
  margin-top: 10px;
  padding: 0; }

.two-factor-modal {
  width: 500px;
  height: 400px; }
  html[data-rtl-language='true'] .two-factor-modal {
    direction: rtl; }
  .two-factor-modal p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 30px;
    color: #68737D; }
  .two-factor-modal b {
    color: #2F3941;
    /* Grey-800 */ }
  .two-factor-modal a#turn-off-two-factor {
    margin-left: 134px; }
  .two-factor-modal #two-factor-setup {
    margin-bottom: 20px; }
    .two-factor-modal #two-factor-setup button {
      width: 240px;
      height: 50px;
      margin-left: 115px;
      margin-bottom: 20px;
      font-size: 14px;
      color: #68737D; }
      html[data-rtl-language='true'] .two-factor-modal #two-factor-setup button {
        margin-right: 115px;
        margin-left: auto; }
  .two-factor-modal #qrcode {
    margin-left: 177px;
    margin-bottom: 60px;
    min-height: 118px; }
    html[data-rtl-language='true'] .two-factor-modal #qrcode {
      margin-right: 177px;
      margin-left: auto; }
  .two-factor-modal #two-factor-form {
    text-align: center; }
    .two-factor-modal #two-factor-form input[type=text], .two-factor-modal #two-factor-form input[type=tel] {
      font-size: 50px;
      padding: 10px;
      text-align: center;
      height: auto;
      width: 300px; }
    .two-factor-modal #two-factor-form input[type=tel] {
      width: 400px; }
  .two-factor-modal #two-factor-actions {
    position: absolute;
    bottom: 15px;
    right: 15px; }
    html[data-rtl-language='true'] .two-factor-modal #two-factor-actions {
      left: 15px;
      right: auto; }
    .two-factor-modal #two-factor-actions button {
      float: right;
      width: 120px;
      height: 40px;
      margin-left: 15px; }
      html[data-rtl-language='true'] .two-factor-modal #two-factor-actions button {
        float: left;
        margin-right: 15px;
        margin-left: auto; }
    .two-factor-modal #two-factor-actions #next {
      background-color: #2F3941;
      /* Grey-800 */ }

.details.property_box label.switch-label {
  padding: 0;
  width: 100%; }
  html[data-rtl-language='true'] .details.property_box label.switch-label {
    padding-left: 0; }

.explore-user-seat-section .switch-container,
.connect-user-seat-section .switch-container,
.voice-user-seat-section .switch-container {
  float: right;
  margin-right: 7px;
  overflow: hidden; }
  html[data-rtl-language='true'] .explore-user-seat-section .switch-container, html[data-rtl-language='true']
  .connect-user-seat-section .switch-container, html[data-rtl-language='true']
  .voice-user-seat-section .switch-container {
    float: left;
    margin-left: 7px;
    margin-right: 0; }

.zopim-agent-section .switch-container {
  float: right;
  margin-right: 7px; }
  html[data-rtl-language='true'] .zopim-agent-section .switch-container {
    float: left;
    margin-left: 7px;
    margin-right: 0; }

.zopim-agent-section .zopim-chat-label {
  margin-top: 6px; }

.zopim-agent-section .zopim-chat-disabled-text {
  line-height: 31px;
  color: #C2C8CC;
  /* Grey-400 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

.zopim-agent-section .zopim-agent-content .textarea {
  width: 195px; }

.zopim-agent-section .loader {
  background: url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat center center;
  width: 40px;
  height: 30px; }

.zopim-agent-section .loading-message {
  padding-left: 45px; }

.jGrowl .jGrowl-notification.ui-state-error .zopim-agent-error .close_btn {
  float: none;
  padding: 4px 20px 5px 20px; }

.jGrowl .jGrowl-notification.ui-state-error.generic .jGrowl-message,
.jGrowl .jGrowl-notification.ui-state-notice .jGrowl-message,
.jGrowl .jGrowl-notification.ui-state-alert .jGrowl-message {
  overflow-wrap: break-word; }

.tooltip-inner {
  text-align: left; }
  .tooltip-inner .title {
    color: #ffffff;
    font-weight: 600; }

/* END ./app/assets/stylesheets/areas/users.scss */
/* BEGIN ./app/assets/stylesheets/areas/ticket_comment_input.scss */
.pane_body:not(.rich_text) .comment_input {
  padding: 0 0 12px 0; }

.comment_input.event {
  border-left-width: 0;
}

.comment_input {
  border-top: none;
  /* Public/Private reply tabs */ }
  .comment_input .header {
    padding: 0 0 8px 0; }
  .comment_input .content .body {
    margin-top: 10px; }
  .comment_input.event .content {
    margin: 0 20px 0 77px; }
  html[data-rtl-language='true'] .comment_input.event .content {
    margin: 0 77px 0 20px; }
  .comment_input.event .user_photo {
    left: 18px; }
  html[data-rtl-language='true'] .comment_input.event .user_photo {
    right: 18px; }
  .comment_input .hint {
    color: #68737D;
    font-size: 12px;
    line-height: 22px;
    /* Grey-300 */
    height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 1px;
    left: 4px;
    position: relative; }
    html[data-rtl-language='true'] .comment_input .hint {
      float: right;
      left: 0px;
      right: 4px;
      border-left: 0; }
  .comment_input .twitter-handle-picker {
    padding: 10px 0px;
    margin-bottom: 30px; }
    .comment_input .twitter-handle-picker label {
      font-size: 11px;
      color: #68737D;
      margin: 7px 7px 0px 0;
      text-align: left;
      float: left; }
      html[data-rtl-language='true'] .comment_input .twitter-handle-picker label {
        margin: 7px 0 0px 7px;
        text-align: right;
        float: right; }
    .comment_input .twitter-handle-picker .zd-selectmenu-root {
      width: 250px;
      float: left; }
      html[data-rtl-language='true'] .comment_input .twitter-handle-picker .zd-selectmenu-root {
        float: right; }
      .comment_input .twitter-handle-picker .zd-selectmenu-root .twitter-avatar {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        float: left;
        border-radius: 2px; }
        html[data-rtl-language='true'] .comment_input .twitter-handle-picker .zd-selectmenu-root .twitter-avatar {
          float: right;
          margin-left: 5px;
          margin-right: 0; }
        .comment_input .twitter-handle-picker .zd-selectmenu-root .twitter-avatar.default {
          opacity: 0.4;
          display: inline-block;
          background: url(https://html-assets-prod.guideflow.com/8eb60bfc9d0fadf7d815ae9a091a3410efd067a1) center/contain no-repeat; }
      .comment_input .twitter-handle-picker .zd-selectmenu-root span {
        line-height: 20px; }
        html[data-rtl-language='true'] .comment_input .twitter-handle-picker .zd-selectmenu-root span.name {
          float: right; }
        .comment_input .twitter-handle-picker .zd-selectmenu-root span.handle {
          color: #C2C8CC;
          margin-left: 5px; }
          html[data-rtl-language='true'] .comment_input .twitter-handle-picker .zd-selectmenu-root span.handle {
            margin-left: 0;
            margin-right: 5px; }
  .comment_input .requester-no-handle, .comment_input .channelback-not-supported {
    color: #BAB6B0;
    margin: 10px 0;
    line-height: 18px; }
    .comment_input .requester-no-handle .icon-warning, .comment_input .channelback-not-supported .icon-warning {
      display: inline-block;
      height: 16px;
      width: 16px;
      vertical-align: top; }
  .comment_input .call-back {
    margin-left: 5px; }
    html[data-rtl-language='true'] .comment_input .call-back {
      float: left;
      margin-left: 0;
      margin-right: 5px; }
    .comment_input .call-back .toggle {
      background: #F7F7F7;
      border: solid #DDDDDD 1px;
      border-radius: 3px;
      cursor: pointer;
      padding: 3px 5px 4px 3px;
      float: left; }
      .comment_input .call-back .toggle .icon {
        height: 23px;
        width: 23px;
        float: left;
        margin-top: -3px;
        margin-bottom: -3px; }
        html[data-rtl-language='true'] .comment_input .call-back .toggle .icon {
          float: right; }
      .comment_input .call-back .toggle .caret {
        margin-top: 8px; }
    .comment_input .call-back .dropdown {
      background: #FFFFFF;
      border: solid #DDDDDD 1px;
      border-radius: 5px;
      margin-top: 32px;
      position: absolute;
      right: 15px;
      padding: 10px;
      z-index: 2000000;
      display: none; }
      html[data-rtl-language='true'] .comment_input .call-back .dropdown {
        left: 15px;
        right: auto; }
      .comment_input .call-back .dropdown.open {
        display: block; }
      .comment_input .call-back .dropdown .number.option {
        padding: 5px;
        cursor: pointer;
        color: #5381BA;
        background: #FFFFFF;
        display: block;
        /* Ensures that phone numbers are still rendered left-to-right */ }
        html[data-rtl-language='true'] .comment_input .call-back .dropdown .number.option {
          direction: ltr; }
  .comment_input.bulk-comment .hint {
    display: none; }
  .comment_input.is-public .hint.reply {
    display: block; }
  .comment_input:not(.is-public) .hint.note {
    display: block; }
  .comment_input .checkbox-field {
    display: inline-block;
    position: relative;
    top: 2px; }
  .comment_input textarea {
    padding: 8px;
    width: 100%;
    min-height: 60px;
    height: 60px;
    box-sizing: border-box;
    box-shadow: none;
    color: #2F3941;
    /* Grey-800 */
    font-size: 14px; }
  .comment_input .counter, .comment_input .counter_normal, .comment_input .counter_exceeded {
    position: absolute;
    margin-top: 4px;
    right: 22px;
    font-size: 15px;
    font-weight: 600; }
  .comment_input .comment-twitter-identity {
    position: absolute;
    padding: 7px;
    font-size: 14px;
    color: #2F3941;
    /* Grey-800 */
    margin-top: 2px;
    line-height: 17px; }
  .comment_input .counter_normal {
    color: #C2C8CC;
    /* Grey-400 */ }
  .comment_input .counter_exceeded {
    color: #FF0000; }
  .comment_input .comment_bar {
    background-color: #F8F9F9;
    /* Grey-100 */
    border: solid #D8DCDE 1px;
    /* Grey-300 */
    border-top: none;
    padding: 7px;
    margin-bottom: 10px; }
    .comment_input .comment_bar .twitter_counter {
      float: right;
      position: relative;
      right: 0;
      color: #2F3941;
      margin-top: 0px; }
      html[data-rtl-language='true'] .comment_input .comment_bar .twitter_counter {
        float: left;
        left: 0;
        right: auto; }
      .comment_input .comment_bar .twitter_counter.counter_exceeded {
        color: #FF0000; }
    .comment_input .comment_bar label {
      float: left; }
      html[data-rtl-language='true'] .comment_input .comment_bar label {
        float: right; }
      .comment_input .comment_bar label .checkbox {
        display: inline-block; }
  .comment_input .options {
    font-size: 14px;
    margin-top: 5px;
    vertical-align: middle; }
    .comment_input .options .channel_options {
      float: left;
      width: 70%; }
      .comment_input .options .channel_options .checkbox {
        display: inline-block; }
    .comment_input .options .channel_back {
      width: 200px;
      display: inline-block; }
    .comment_input .options label {
      width: auto;
      color: #2F3941;
      /* Grey-800 */ }
  .comment_input:not(.is-public) textarea {
    background: #FFF6D9;
    border: 1px solid #EFDAA3; }
  .comment_input .btn {
    background: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #D8DCDE;
    /* Grey-300 */
    color: #2F3941;
    /* Grey-800 */
    font-size: 12px;
    float: left;
    margin-right: 5px;
    position: relative;
    padding: 3px 9px;
    box-shadow: none;
    text-shadow: none;
    /* .comment_input .btn.active, the active old-style public/private tab */ }
    .comment_input .btn .icon {
      display: inline-block;
      /* icon pngs are 18x18 with extra padding but the .icon element can't be that big. */
      height: 14px;
      width: 16px;
      margin: 0 4px -1px -3px;
      background: transparent none no-repeat top left; }
      html[data-rtl-language='true'] .comment_input .btn .icon {
        margin: 0 -3px -1px 4px; }
    .comment_input .btn .icon.twitter {
      background-image: url(https://html-assets-prod.guideflow.com/7c8a9e00d94f7557d484f53429bc097163312148); }
    .comment_input .btn .icon.facebook {
      background-image: url(https://html-assets-prod.guideflow.com/58d5d9b47d7fec2b93ab93a2662934502bb52dcf); }
    .comment_input .btn.active {
      background-color: #323a40;
      padding: 4px 10px;
      border: none;
      color: #fff; }
      .comment_input .btn.active .icon.twitter {
        background-image: url(https://html-assets-prod.guideflow.com/a8f311e77c44683d2b5b68255d32f93607092773); }
      .comment_input .btn.active .icon.facebook, .comment_input .btn.active .icon.fb_private_message {
        background-image: url(https://html-assets-prod.guideflow.com/873d8084f0076060b11a0178b3c1c97aa95021b9); }
      .comment_input .btn.active:after {
        content: ' ';
        position: absolute;
        height: 0;
        width: 0;
        border: 10px solid transparent;
        border-top-color: #323a40;
        margin-left: -10px;
        margin-top: -5px;
        left: 50%;
        top: 100%; }
      .comment_input .btn.active.private_note {
        background-color: #FFDE73;
        color: #2F3941;
        /* Grey-800 */ }
        .comment_input .btn.active.private_note:after {
          border: none; }

.comment_input_wrapper {
  min-height: 140px; }

.hide-comment-box .comment_input_wrapper {
  min-height: 0px; }

.add_comment_attachments, .add_comment_attachment_buttons {
  clear: right;
  float: right; }
  html[data-rtl-language='true'] .add_comment_attachments, html[data-rtl-language='true'] .add_comment_attachment_buttons {
    clear: left;
    float: left; }

.add_comment_attachments ul.attachments li {
  display: block;
  margin-right: 0; }
  .add_comment_attachments ul.attachments li .attachment {
    background-color: transparent;
    display: block;
    margin-right: 25px; }
    html[data-rtl-language='true'] .add_comment_attachments ul.attachments li .attachment {
      margin-left: 25px;
      margin-right: 0; }
  .add_comment_attachments ul.attachments li button, .add_comment_attachments ul.attachments li .uploading {
    float: right;
    margin-top: -23px;
    margin-right: 5px;
    background: transparent; }
    html[data-rtl-language='true'] .add_comment_attachments ul.attachments li button, html[data-rtl-language='true'] .add_comment_attachments ul.attachments li .uploading {
      float: left;
      margin-left: 5px;
      margin-right: 0; }

.add_comment_attachments .uploading {
  float: right;
  background: no-repeat;
  background-image: url(https://html-assets-prod.guideflow.com/b04475cb2a4eee5fa643ae0707b8ff53e6a3990b);
  padding-left: 20px; }
  html[data-rtl-language='true'] .add_comment_attachments .uploading {
    float: left;
    padding: 0;
    padding-right: 20px;
    background-position-x: right; }

.add_comment_attachment_buttons {
  color: #1f73b7;
  margin-bottom: 8px; }
  .add_comment_attachment_buttons .separator {
    display: inline-block;
    width: 15px; }
  .add_comment_attachment_buttons .fileinput-button {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
    line-height: 16px;
    border: none;
    background: none;
    border-bottom: 1px dotted #1f73b7;
    padding: 0; }
    .add_comment_attachment_buttons .fileinput-button .ui-button-text {
      padding: 0; }
    .add_comment_attachment_buttons .fileinput-button input {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      border: solid transparent;
      direction: ltr;
      cursor: pointer;
      opacity: 0; }
    .add_comment_attachment_buttons .fileinput-button ~ .fileinput-button {
      margin-left: 15px; }

.twitter-select-menu .twitter-avatar {
  margin-top: 5px;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 2px; }
  .twitter-select-menu .twitter-avatar.default {
    opacity: 0.4;
    display: inline-block;
    background: url(https://html-assets-prod.guideflow.com/8eb60bfc9d0fadf7d815ae9a091a3410efd067a1) center/contain no-repeat; }

.twitter-select-menu span {
  margin-top: 5px;
  width: 140px;
  font-size: 12px;
  position: absolute; }
  .twitter-select-menu span.handle {
    font-size: 10px;
    color: #C2C8CC;
    top: 20px; }

/* END ./app/assets/stylesheets/areas/ticket_comment_input.scss */
/* BEGIN ./app/assets/stylesheets/areas/ticket_comment_rich_text.scss */
/*
 *  Matches normal comment area, which gets style from a gem
 */
.rich_text pre * {
  font-family: Consolas, "Liberation Mono", Menlo, "Bitstream Vera Sans Mono", Courier, monospace !important; }

.rich_text .add_comment_attachments {
  display: none; }

.rich_text .comment_input_wrapper {
  min-height: 0px; }

.rich_text .comment_input .hint {
  display: none !important; }

.rich_text .comment_input .content .body {
  margin-top: 0; }

.rich_text .editor {
  margin: 0px 0px 14px 0;
  position: relative; }
  .rich_text .editor .rich-text-comment {
    min-height: 200px;
    padding: 8px 8px 47px 8px;
    margin-bottom: 10px;
    border: 1px solid #D8DCDE;
    /* Grey-300 */
    border-radius: 5px;
    color: #2F3941;
    /* Grey-800 */
    cursor: text;
    transition: min-height linear 0.1s; }
  .rich_text .editor .toolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 38px;
    border-top: 1px solid #D8DCDE;
    /* Grey-300 */ }
  .rich_text .editor .menu {
    position: absolute;
    bottom: 38px;
    display: inline-block; }

.rich_text .controls {
  font-size: 13px;
  margin-left: 1px;
  position: relative;
  z-index: 1; }

/* comment page overrides */
.rich_text .comment-actions .btn {
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-radius: 0px;
  border-top: none;
  border-right: none;
  border-left: none;
  margin-right: 25px;
  padding: 0 0 5px 0;
  background: none;
  box-shadow: none;
  font-size: 14px; }
  html[data-rtl-language='true'] .rich_text .comment-actions .btn {
    margin-left: 25px;
    margin-right: 0; }
  .rich_text .comment-actions .btn:after {
    display: block;
    visibility: hidden;
    line-height: 0;
    font-weight: bold;
    content: attr(data-text); }
  .rich_text .comment-actions .btn.guideflow_hovered {
    color: #68737D; }
  .rich_text .comment-actions .btn.active {
    border-bottom-color: #1F73B7;
    /* Blue-600 */
    color: #44535f;
    font-weight: 600; }
    .rich_text .comment-actions .btn.active.guideflow_hovered {
      color: #2F3941;
      /* Grey-800 */ }
.rich_text .comment_input .header {
  padding: 0; }
  .rich_text .comment_input .header .call-back .toggle {
    background: none;
    border: none;
    border-radius: 0; }
    .rich_text .comment_input .header .call-back .toggle .caret {
      background: url(https://html-assets-prod.guideflow.com/ca8dac0180377fd5f2035335791638929bfab053) 0 3px/contain;
      content: " ";
      top: 6px;
      width: 11px;
      height: 11px;
      position: absolute;
      right: 10px;
      border-radius: 2px;
      display: inline-block;
      margin: 0;
      border: none; }
      html[data-rtl-language='true'] .rich_text .comment_input .header .call-back .toggle .caret {
        left: 10px;
        right: auto; }
  .rich_text .comment_input .header .active.private_note {
    background: none; }

.rich_text .comment_input:not(.is-public) .zendesk-editor--rich-text-container {
  background: #FFF6D9;
  border: 1px solid #EFDAA3; }

.rich_text .comment_input.is-public .zendesk-editor--rich-text-container {
  border-top-left-radius: 0; }

.new_ticket:not(.first_comment_private) #email-ccs-editor-bar .zendesk-editor--email-ccs-top {
  margin-top: 5px;
}
#email-ccs-editor-bar .zendesk-editor--email-ccs-top,
.rich_text .comment_input .zendesk-editor--email-ccs-top {
  border-radius: 0 3px 0 0 !important;
  border: 1px solid #D8DCDE;
  /* Grey-300 */
  border-bottom: none;
  padding: 10px;
  overflow: hidden;
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.2s, opacity 0.4s, padding 0.4s, border 0.4s; }
  .rich_text .comment_input .zendesk-editor--email-ccs-top .email-user-menu {
    width: 100%; }

.rich_text .comment_input .zendesk-editor--email-ccs-bottom {
  border-radius: 0 0 3px 3px !important; }

.rich_text .comment_input:not(.is-public) .zendesk-editor--email-ccs-top {
  border: none;
  max-height: 0 !important;
  opacity: 0;
  padding: 0; }

.rich_text .comment_input:not(.is-public) .zendesk-editor--email-ccs-bottom {
  border-radius: 3px !important; }

.rich_text .empty .editor .rich-text-comment {
  padding: 8px;
  min-height: inherit; }
  .rich_text .empty .editor .rich-text-comment:before {
    content: attr(data-placeholder);
    color: #989898; }

.rich_text .empty .editor .toolbar, .rich_text .empty .editor .menu {
  display: none; }

.rich_text .new_ticket .content {
  margin: 10px 0 0 0; }

.rich_text .new_ticket .btn {
  display: none; }

.rich_text .new_ticket .rich-text-comment {
  border-radius: 2px; }

.rich_text img[data-emoji-id] {
  height: 1.2em;
  width: 1.2em;
  margin-top: -0.2em;
  vertical-align: middle; }

.rich_text img[data-loading] {
  display: none; }

.rich_text .image-load-spinner {
  height: 200px;
  width: 350px;
  background-repeat: no-repeat;
  background-position-x: 166px;
  background-position-y: 90px;
  background-color: #F8F9F9;
  /* Grey-100 */
  border: 1px solid #D8DCDE;
  /* Grey-300 */
  background-image: url(https://html-assets-prod.guideflow.com/b04475cb2a4eee5fa643ae0707b8ff53e6a3990b); }

.event:not(.is-public) .zd-comment {
  margin-bottom: 12px; }

/* Ticket Page Overrides */
.rich_text .header .icon.twitter {
  display: none; }

.rich_text .twitter_counter {
  color: #2F3941;
  position: absolute;
  bottom: -92px;
  right: 20px;
  z-index: 10; }

.new_ticket .editor {
  margin: 0px 0px 14px 0 !important;
  min-height: 160px; }

/* Zendesk Editor overrides */
.rich_text .comment_input {
  padding: 0 0 12px 0; }

.zendesk-editor--toolbar .zendesk-editor--discovery li.active button {
  color: #1F73B7; }

.zendesk-editor--toolbar .zendesk-editor--apps {
  /* Discovery app */ }
  .zendesk-editor--toolbar .zendesk-editor--apps li svg {
    fill: #2F3941;
    /* Grey-800 */
    fill-opacity: 0.4; }
  .zendesk-editor--toolbar .zendesk-editor--apps li.active {
    background-color: #E9EBED;
    /* Grey-200 */
    border-radius: 2px;
    box-shadow: 0px 0px 0px 1px #D8DCDE;
    /* Grey-300 */ }
    .zendesk-editor--toolbar .zendesk-editor--apps li.active svg {
      fill-opacity: 0.8; }
  .zendesk-editor--toolbar .zendesk-editor--apps li.guideflow_hovered svg {
    fill-opacity: 0.8; }
  .zendesk-editor--toolbar .zendesk-editor--apps li .zendesk-editor--discovery-svg {
    pointer-events: none;
    opacity: 0.4; }
  .zendesk-editor--toolbar .zendesk-editor--apps li.hover .zendesk-editor--discovery-svg {
    pointer-events: none;
    opacity: .8; }
  .zendesk-editor--toolbar .zendesk-editor--apps li.active .zendesk-editor--discovery-svg {
    pointer-events: none;
    opacity: 1; }

.zendesk-editor--toolbar .zendesk-editor--group.zendesk-editor--discovery {
  float: right;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* We want to overwrite the default .zendesk-editor--group behavior */
  /* and remove the border-left from the group since the discovery */
  /* icon is right aligned */
  border-left: 0; }
  html[data-rtl-language='true'] .zendesk-editor--toolbar .zendesk-editor--group.zendesk-editor--discovery {
    float: left;
    left: 0;
    right: auto; }

.zendesk-editor--plaintext-box {
  margin-bottom: 140px; }
  .zendesk-editor--plaintext-box .disabled > a.guideflow_hovered {
    color: currentColor; }

.section.ticket .zendesk-editor--item input[type="file"] {
  height: 26px;
  width: 26px; }

div.zendesk-editor--drop-indicators .drop-indicator-inline {
  top: 115px;
  left: 420px; }

div.zendesk-editor--drop-indicators .drop-indicator-attach {
  bottom: 80px;
  left: 420px;
  height: 170px; }

.zendesk-editor--toolbar {
  box-sizing: border-box; }

#editor-tooltip input {
  box-shadow: none !important; }

div#editor-tooltip {
  z-index: 1100; }

.zendesk-editor--menu a:focus {
  outline: none; }

.zendesk-editor--drop-indicators.no-inline-attachments div.drop-indicator-attach {
  top: 115px; }

.comment_input .zendesk-editor--attachments .zendesk-editor--attachment:not(.zendesk-editor--image) .zendesk-editor--corner {
  background-color: #FFF6D9; }

.comment_input.is-public .zendesk-editor--attachments .zendesk-editor--attachment:not(.zendesk-editor--image) .zendesk-editor--corner {
  background-color: #ffffff; }
.rich_text .comment_input .zendesk-editor--talk-callback-view {
  border-bottom: 3px solid transparent; }
.new-editor-app-notify:after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 2px;
  position: absolute;
  background: #1f73b7;
  margin: 2px -6px; }

#new-app-tooltip {
  padding: 20px;
  width: 250px; }

#discovery-app-tooltip {
  width: 255px;
  padding: 16px 18px 18px 18px; }
  html[data-rtl-language='true'] #discovery-app-tooltip {
    direction: rtl; }
  #discovery-app-tooltip a {
    color: #1f73b7; }
  #discovery-app-tooltip span.close {
    top: 4px;
    right: 4px;
    width: auto; }
    html[data-rtl-language='true'] #discovery-app-tooltip span.close {
      left: 4px;
      right: auto; }

#discovery-app-tooltip .close {
  top: 8px;
  right: 8px; }

/* we lower the z-index of the editor dropzone to 10 so that apps residing in
the header (e.g. zendesk chat) which has z-index:11 should be able to have
their own dropzones */
div.zendesk-editor--drop-indicators {
  z-index: 10; }

/* Tooltip alignment */
.zendesk-editor--toolbar #editor-app-discovery.guideflow_hovered {
  color: #68737D;
}

.zendesk-editor--toolbar #editor-app-discovery.guideflow_hovered:after {
  transform: translateX(0%);
  right: 1px;
}

html[data-rtl-language='true'] .zendesk-editor--toolbar #editor-app-discovery.guideflow_hovered:after {
  right: auto;
  left: 1px;
}

.zendesk-editor--toolbar.sticky {
  z-index: 1;
  margin-top: 1px;
}
/* END ./app/assets/stylesheets/areas/ticket_comment_rich_text.scss */
/* BEGIN ./app/assets/stylesheets/areas/ticket_merge.scss */
.merge-holder {
  overflow: hidden !important;
  width: 660px;
  margin-left: -330px; }
  .merge-holder .modal-body {
    max-height: none;
    overflow-x: hidden; }
  .merge-holder p.option {
    padding-bottom: 0; }
  .merge-holder label {
    padding-top: 6px;
    font-size: 14px;
    line-height: 18px;
    float: none;
    width: auto;
    text-align: left;
    color: inherit; }
  .merge-holder h3, .merge-holder h4, .merge-holder h5, .merge-holder h6 {
    line-height: 18px; }
  .merge-holder .merge_window {
    width: 630px;
    background-color: #F6F6F6;
    color: #2F3941; }
    .merge-holder .merge_window h2 {
      margin: 0 0 10px 0;
      padding: 0;
      font-size: 23px;
      font-weight: 400; }
    .merge-holder .merge_window .review {
      background-color: #FFFDDE;
      border: 1px solid #EBE695;
      border-radius: 4px;
      margin-bottom: 10px;
      font-size: 14px; }
      .merge-holder .merge_window .review p {
        margin: 7px;
        padding: 0;
        text-align: center;
        color: #49545C; }
    .merge-holder .merge_window .option {
      height: 30px;
      margin: 0;
      text-align: center;
      cursor: default; }
      .merge-holder .merge_window .option hr {
        background-color: #D8DCDE;
        /* Grey-300 */
        color: #D8DCDE;
        /* Grey-300 */
        height: 1px;
        border: none;
        margin-top: 35px;
        margin-bottom: -8px; }
      .merge-holder .merge_window .option .border {
        padding: 10px 15px;
        background-color: #f6f6f6; }
      .merge-holder .merge_window .option .text {
        font-style: italic;
        background-color: #C2C8CC;
        /* Grey-400 */
        padding: 7px 9px;
        color: #fff;
        border-radius: 15px; }
    .merge-holder .merge_window .ticket_badge {
      font-size: 12px;
      width: 80px;
      margin-bottom: 5px;
      text-align: center;
      color: #fff;
      float: left;
      display: block;
      margin-right: 10px;
      background-color: #87929D;
      /* Grey-500 */
      font-size: 12px;
      border-radius: 2px;
      padding: 3px;
      line-height: 14px; }
      html[data-rtl-language='true'] .merge-holder .merge_window .ticket_badge {
        float: right;
        margin-left: 10px;
        margin-right: 0; }
    .merge-holder .merge_window .ticket_date {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #68737D;
      display: block; }
    .merge-holder .merge_window .winner_selector {
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 160px; }
    .merge-holder .merge_window .user_card, .merge-holder .merge_window .ticket_card {
      border: 5px solid #fff;
      padding: 12px;
      box-shadow: 1px 1px 1px 1px #C2C8CC;
      /* Grey-400 */ }
      .merge-holder .merge_window .user_card img, .merge-holder .merge_window .ticket_card img {
        float: left;
        margin-right: 10px;
        height: 48px;
        width: 48px; }
      .merge-holder .merge_window .user_card a, .merge-holder .merge_window .user_card h3, .merge-holder .merge_window .ticket_card a, .merge-holder .merge_window .ticket_card h3 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 2px;
        display: block; }
    .merge-holder .merge_window .user_card {
      width: 245px;
      height: 51px;
      margin: 0 20px 20px 0; }
    .merge-holder .merge_window .ticket_card .card_header h3 {
      margin: 5px 0 0 70px;
      font-size: 15px;
      color: #2F3941;
      /* Grey-800 */ }
    .merge-holder .merge_window .ticket_card .card_body {
      margin: 15px 0 0 75px;
      padding-top: 10px;
      border-top: 1px solid #E9EBED;
      /* Grey-200 */ }
    .merge-holder .merge_window label {
      display: block;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px; }
      html[data-rtl-language='true'] .merge-holder .merge_window label {
        text-align: right; }
    .merge-holder .merge_window form p {
      color: #68737D; }
    .merge-holder .merge_window form .button {
      margin-left: 8px; }
      html[data-rtl-language='true'] .merge-holder .merge_window form .button {
        margin-left: 0;
        margin-right: 8px; }
    .merge-holder .merge_window form input[type=text] {
      width: 244px; }
    .merge-holder .merge_window form textarea {
      font-size: 14px;
      margin: 10px 0; }
    .merge-holder .merge_window #user_loser {
      padding: 12px 20px 20px 20px; }
      .merge-holder .merge_window #user_loser .user_card {
        margin: 0 auto; }
    .merge-holder .merge_window #user_winner {
      padding: 60px 0 20px 20px; }
      .merge-holder .merge_window #user_winner #winner_suggestions .user_card {
        float: left; }
    .merge-holder .merge_window #ticket_loser {
      padding: 12px 20px 20px 20px; }
    .merge-holder .merge_window #ticket_winner {
      padding: 60px 20px 20px 20px; }
      .merge-holder .merge_window #ticket_winner .confirm {
        margin-top: 20px;
        float: right; }
      .merge-holder .merge_window #ticket_winner h4 {
        color: #68737D;
        margin-top: 5px;
        font-weight: 400; }
      .merge-holder .merge_window #ticket_winner #suggestion_columns .column {
        width: 100%;
        float: left;
        padding-left: 0;
        margin: 0;
        max-height: 200px;
        overflow-y: auto; }
        .merge-holder .merge_window #ticket_winner #suggestion_columns .column:first-child {
          padding-right: 4%;
          padding-left: 0; }
        .merge-holder .merge_window #ticket_winner #suggestion_columns .column ul li {
          list-style-type: none;
          margin: 15px 0 0 0;
          font-size: 14px;
          display: inline-block;
          width: 46%;
          margin-right: 3%; }
          .merge-holder .merge_window #ticket_winner #suggestion_columns .column ul li:first-child {
            margin-top: 10px; }
          .merge-holder .merge_window #ticket_winner #suggestion_columns .column ul li a {
            display: block;
            margin-left: 70px;
            font-size: 12px; }
            html[data-rtl-language='true'] .merge-holder .merge_window #ticket_winner #suggestion_columns .column ul li a {
              margin-left: 0;
              margin-right: 70px; }
      .merge-holder .merge_window #ticket_winner #winner_suggestions {
        margin-top: 10px; }
  .merge-holder #confirm_user_merge #user_loser {
    background-position: 0 224px; }
  .merge-holder #confirm_user_merge #user_winner {
    padding: 60px 20px 20px 20px; }
    .merge-holder #confirm_user_merge #user_winner .user_card {
      float: none;
      margin: 0 auto;
      border: 3px solid #9BC300;
      padding: 14px;
      box-shadow: none; }
    .merge-holder #confirm_user_merge #user_winner .button {
      float: right;
      margin: 20px 0 0 0; }
  .merge-holder .user_card h3, .merge-holder .user_card span {
    display: block;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 180px; }
  .merge-holder .wait-note {
    min-width: 300px;
    font-size: 15px;
    font-weight: 600;
    color: #68737D;
    padding: 30px;
    text-align: center; }
  .merge-holder .user-merge-autocompleter {
    margin: 10px 0;
    width: 256px;
    display: inline-block; }

/* END ./app/assets/stylesheets/areas/ticket_merge.scss */
/* BEGIN ./app/assets/stylesheets/areas/ticket_footer.scss */
.ticket .ticket-resolution-footer {
  background: #fff;
  height: 49px;
  padding: 0;
  border-top: 1px solid #D8DCDE;
  /* Grey-300; */
  border-left: 1px solid #D8DCDE; }
  html[data-rtl-language='true'] .ticket .ticket-resolution-footer {
    border-left: none;
    border-right: 1px solid #D8DCDE; }
  .ticket .ticket-resolution-footer .action_buttons {
    float: left;
    width: 210px; }
    html[data-rtl-language='true'] .ticket .ticket-resolution-footer .action_buttons {
      float: right; }
  .ticket .ticket-resolution-footer .action {
    margin-left: 5px; }
    html[data-rtl-language='true'] .ticket .ticket-resolution-footer .action {
      float: left; }
  .ticket .ticket-resolution-footer .post-save-actions {
    float: right; }
    html[data-rtl-language='true'] .ticket .ticket-resolution-footer .post-save-actions {
      float: left; }
    .ticket .ticket-resolution-footer .post-save-actions .dropdown-container {
      padding: 0;
      border-width: 0; }
    .ticket .ticket-resolution-footer .post-save-actions .dropdown-toggle:after {
      background: url(https://html-assets-prod.guideflow.com/ca8dac0180377fd5f2035335791638929bfab053) 0 3px/contain;
      border: none;
      height: 14px;
      margin: 0;
      opacity: 0.4;
      width: 14px;
      content: '';
      display: inline-block; }
    .ticket .ticket-resolution-footer .post-save-actions.dropup .dropdown-toggle:after {
      border-top: 0; }
    .ticket .ticket-resolution-footer .post-save-actions.dropdown .dropdown-toggle:after {
      border-bottom: 0; }

/* END ./app/assets/stylesheets/areas/ticket_footer.scss */
/* BEGIN ./app/assets/stylesheets/areas/dashboard.scss */
.dashboard .right {
  overflow: hidden; }

.dashboard .dashboard-top-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 141px;
  overflow: hidden; }
  html[data-rtl-language='true'] .dashboard .dashboard-top-panel {
    direction: rtl; }
  .dashboard .dashboard-top-panel.with-unified-nav {
    margin-top: 15px; }

.dashboard .filter-grid-list {
  top: 141px; }
  .dashboard .filter-grid-list.with-unified-nav {
    top: 164px; }

h4.list-heading {
  white-space: nowrap;
  padding: 12px 0 9px 15px;
  font-size: 14px;
  background-color: #ffffff;
  border-bottom: 1px solid #D8DCDE;
  margin-bottom: 1px; }
  html[data-rtl-language='true'] h4.list-heading {
    direction: rtl;
    padding: 12px 15px 9px 0; }
  h4.list-heading .link {
    font-size: 12px;
    font-weight: 400;
    border-bottom: 1px dotted;
    margin-left: 3px; }

/* END ./app/assets/stylesheets/areas/dashboard.scss */
/* BEGIN ./app/assets/stylesheets/areas/dashboard_activities.scss */
.activities {
  margin: 5px 15px 5px 15px;
  word-wrap: break-word; }
  html[data-rtl-language='true'] .activities {
    direction: rtl; }
  .activities h4 {
    line-height: 36px;
    font-size: 14px; }
  .activities h4, .activities .no-updates {
    margin-left: 0px; }
  .activities .wrapper {
    margin-bottom: 15px; }
  .activities .item {
    margin-bottom: 5px;
    background-color: #ffffff;
    border: 1px solid #D8DCDE;
    /* Grey-300 */
    border-radius: 6px;
    position: relative;
    padding: 13px;
    cursor: pointer; }
    .activities .item.guideflow_hovered {
      border-color: #78a300;
      /* background-color: #FDFDFD; */ }
  .activities .description {
    margin-left: 35px;
    line-height: 16px;
    color: #49545C; }
    html[data-rtl-language='true'] .activities .description {
      margin-left: 0;
      margin-right: 35px; }
    .activities .description strong {
      color: #2F3941;
      /* Grey-800 */ }
  .activities .comment_value {
    margin: 5px 0 0 35px;
    color: #68737D;
    line-height: 16px; }
    html[data-rtl-language='true'] .activities .comment_value {
      margin: 5px 35px 0 0; }
  .activities time {
    display: block;
    font-size: 12px;
    color: #C2C8CC;
    /* Grey-400 */
    margin-left: 35px;
    margin-top: 5px; }
    html[data-rtl-language='true'] .activities time {
      margin-left: 0;
      margin-right: 35px; }
  .activities .profile {
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 2px;
    border-radius: 4px; }
    html[data-rtl-language='true'] .activities .profile {
      float: right; }
  .activities.with-unified-nav {
    margin-top: 15px; }

/* END ./app/assets/stylesheets/areas/dashboard_activities.scss */
/* BEGIN ./app/assets/stylesheets/areas/dashboard_indicators.scss */
.indicators {
  min-width: 100000px;
  background-color: #F8F9F9;
  border-bottom: 1px solid #E9EBED;
  /* Grey-200 */ }
  .indicators .stats-group {
    margin: 10px 0 20px 15px;
    float: left; }
    html[data-rtl-language='true'] .indicators .stats-group {
      margin: 10px 15px 20px 0;
      float: right; }
  .indicators .stats-group + .stats-group {
    margin-left: 20px; }
    html[data-rtl-language='true'] .indicators .stats-group + .stats-group {
      float: right;
      margin-left: 0;
      margin-right: 20px; }
  .indicators h4 {
    font-size: 12px;
    font-weight: 600;
    line-height: 22px; }
    .indicators h4 > span {
      color: #68737D;
      font-weight: 400; }
  .indicators ul {
    margin: 0;
    float: left;
    overflow: auto;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px; }
    html[data-rtl-language='true'] .indicators ul {
      margin-right: 0; }
  .indicators li {
    padding: 6px 3px;
    min-width: 77px;
    font-size: 14px;
    text-align: center;
    float: left; }
    html[data-rtl-language='true'] .indicators li {
      float: right; }
  .indicators li.clickable {
    cursor: pointer; }
  .indicators li.active {
    background-color: #ffffcc; }
  .indicators li:not(.hidden) + li {
    border-left: 1px solid #e0e0e0; }
    html[data-rtl-language='true'] .indicators li:not(.hidden) + li {
      border-left: 0;
      border-right: 1px solid #e0e0e0; }
  .indicators .cell-value {
    font-size: 15px;
    font-weight: 600;
    color: #2F3941;
    /* Grey-800 */
    line-height: 16px; }
  .indicators .cell-title {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    color: #68737D; }

/* END ./app/assets/stylesheets/areas/dashboard_indicators.scss */
/* BEGIN ./app/assets/stylesheets/areas/launchpad.scss */
.buy_now_btn {
  margin-top: 5px;
  font-size: 14px; }

.stacked_menu {
  padding: 15px; }
  html[data-rtl-language='true'] .stacked_menu {
    direction: rtl; }
  .stacked_menu .section {
    margin-bottom: 25px; }
    .stacked_menu .section.info {
      font-weight: 600; }
      .stacked_menu .section.info .title {
        margin-bottom: 0; }
    .stacked_menu .section .title {
      font-weight: 600;
      margin-bottom: 15px;
      margin-left: 7px; }
      html[data-rtl-language='true'] .stacked_menu .section .title {
        margin-left: 0;
        margin-right: 7px; }
    .stacked_menu .section ul {
      margin-left: 0; }
      html[data-rtl-language='true'] .stacked_menu .section ul {
        margin-right: 0; }
      .stacked_menu .section ul li:first-of-type {
        border-top: 1px solid #C2C8CC;
        /* Grey-400 */
        border-top-left-radius: 5px;
        border-top-right-radius: 5px; }
      .stacked_menu .section ul li:last-of-type {
        border-bottom-color: #C2C8CC;
        /* Grey-400 */
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px; }
    .stacked_menu .section .task {
      background-color: #ffffff;
      color: #2F3941;
      /* Grey-800 */
      border: 1px solid #C2C8CC;
      /* Grey-400 */
      border-top: none;
      border-bottom-color: #E9EBED;
      /* Grey-200 */
      padding: 13px 0;
      padding-left: 15px; }
      html[data-rtl-language='true'] .stacked_menu .section .task {
        padding-left: 0;
        padding-right: 15px; }
      .stacked_menu .section .task.guideflow_hovered, .stacked_menu .section .task.active {
        background-color: #F8F9F9;
        cursor: pointer; }
      .stacked_menu .section .task.active {
        font-weight: 600;
        padding-left: 11px;
        border-left: 5px solid #99cc99; }
        html[data-rtl-language='true'] .stacked_menu .section .task.active {
          padding-left: 0;
          padding-right: 11px;
          border-left: 1px solid #C2C8CC;
          /* Grey-400 */
          border-right: 5px solid #99cc99; }
      .stacked_menu .section .task.skipped {
        text-decoration: line-through; }
      .stacked_menu .section .task .status {
        width: 26px;
        height: 26px;
        float: right;
        margin-right: 10px;
        margin-top: -5px; }
        html[data-rtl-language='true'] .stacked_menu .section .task .status {
          float: left;
          margin-left: 10px;
          margin-right: 0; }
      .stacked_menu .section .task.complete, .stacked_menu .section .task.skipped {
        color: #87929D;
        /* Grey-500 */ }
      .stacked_menu .section .task.disabled {
        background-color: #ffffff;
        cursor: default; }
      .stacked_menu .section .task.settings {
        padding: 0; }
        .stacked_menu .section .task.settings a {
          padding: 13px 0 13px 15px;
          color: #2F3941;
          /* Grey-800 */
          width: 280px;
          display: block; }
  .stacked_menu.with-unified-nav {
    margin-top: 15px; }

header.sub-nav .learn_more {
  color: #1f73b7 !important;
  float: right !important;
  padding-right: 0px !important; }
  header.sub-nav .learn_more.guideflow_hovered {
    text-decoration: none;
    color: #144A75 !important; }

.tooltips.dark,
.tooltip-mask {
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.5s ease 0s; }
  .tooltips.dark.solid,
  .tooltip-mask.solid {
    opacity: 1; }

.tooltips,
.tooltip-mask {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 999; }

#reporting-tooltip,
#onboarding-tooltip,
.buy-now-experiment-popup {
  position: absolute;
  background-color: #2F3941;
  /* Grey-800 */
  width: 260px;
  padding: 15px 20px;
  border-radius: 5px;
  z-index: 1000;
  box-shadow: 0px 0px 6px #68737D;
  /* Grey-600 */
  cursor: default;
  opacity: 0;
}
  #reporting-tooltip .diamond,
  #onboarding-tooltip .diamond,
  .buy-now-experiment-popup .diamond {
    position: absolute;
    height: 15px;
    width: 15px;
    background-color: #2F3941;
    /* Grey-800 */
    transform: rotate(45deg); }
  #reporting-tooltip a.close-tooltip,
  #onboarding-tooltip a.close-tooltip,
  .buy-now-experiment-popup a.close-tooltip {
    color: #68737D;
    /* Grey-600 */
    font-size: 15px;
    position: absolute;
    right: 13px;
    top: 14px; }
    html[data-rtl-language='true'] #reporting-tooltip a.close-tooltip, html[data-rtl-language='true']
    #onboarding-tooltip a.close-tooltip, html[data-rtl-language='true']
    .buy-now-experiment-popup a.close-tooltip {
      left: 13px;
      right: auto; }
  #reporting-tooltip a.close-tooltip.guideflow_hovered,
  #onboarding-tooltip a.close-tooltip.guideflow_hovered,
  .buy-now-experiment-popup a.close-tooltip.guideflow_hovered {
    color: #C2C8CC;
    /* Grey-400 */ }
  #reporting-tooltip h4,
  #onboarding-tooltip h4,
  .buy-now-experiment-popup h4 {
    margin: 3px 5px;
    font-weight: 600;
    font-size: 17px;
    color: #E9EBED;
    /* Grey-200 */ }
  #reporting-tooltip p,
  #onboarding-tooltip p,
  .buy-now-experiment-popup p {
    margin: 10px 5px;
    font-size: 14px;
    color: #D8DCDE;
    /* Grey-300 */ }
    #reporting-tooltip p:last-of-type,
    #onboarding-tooltip p:last-of-type,
    .buy-now-experiment-popup p:last-of-type {
      margin-bottom: 40px; }
  #reporting-tooltip .navigation,
  #onboarding-tooltip .navigation,
  .buy-now-experiment-popup .navigation {
    width: 100%;
    height: 40px;
    background-color: #2F3941;
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    border-radius: 0px 0px 5px 5px; }
    #reporting-tooltip .navigation .page,
    #onboarding-tooltip .navigation .page,
    .buy-now-experiment-popup .navigation .page {
      font-style: italic;
      color: #68737D;
      font-weight: 600;
      line-height: 43px; }
    #reporting-tooltip .navigation button,
    #onboarding-tooltip .navigation button,
    .buy-now-experiment-popup .navigation button {
      float: right;
      margin-right: 15px;
      position: relative;
      top: 8px;
      padding: 2px 20px; }
      html[data-rtl-language='true'] #reporting-tooltip .navigation button, html[data-rtl-language='true']
      #onboarding-tooltip .navigation button, html[data-rtl-language='true']
      .buy-now-experiment-popup .navigation button {
        float: left;
        margin-left: 15px;
        margin-right: 0px; }
      #reporting-tooltip .navigation button.guideflow_hovered,
      #onboarding-tooltip .navigation button.guideflow_hovered,
      .buy-now-experiment-popup .navigation button.guideflow_hovered {
        background-color: #2F3941;
        border-color: #2F3941; }

#onboarding-tooltip {
  left: 415px;
  top: 205px; }

#reporting-tooltip {
  right: 20px;
  top: 160px; }
  #reporting-tooltip .diamond {
    top: -6px;
    right: 40px; }

#reporting-video-tutorial {
  position: absolute;
  width: 960px;
  height: 540px;
  margin: auto;
  z-index: 1000;
  left: 50%;
  top: 50%;
  margin-left: -480px;
  margin-top: -270px;
  background-color: #E9EBED;
  /* Grey-200 */
  opacity: 0; }
  #reporting-video-tutorial .close-video {
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    height: 31px;
    right: -15px;
    top: -15px;
    width: 31px;
    background-color: #68737D;
    font-size: 25px;
    line-height: 32px;
    text-align: center;
    color: white;
    z-index: 1000;
    font-weight: 600; }

.launchpad_content {
  /* proper rendering of iframes in FF & IE */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5; }
  .launchpad_content > div {
    padding: 5px 15px; }
  .launchpad_content .iframe {
    width: 100%;
    height: 100%; }

.launchpad_content {
  overflow: auto;
  margin-top: 15px; }
  .launchpad_content p {
    margin-bottom: 20px; }
  .launchpad_content .add_agents .agent_list {
    margin-bottom: 5px;
    padding: 7px 10px; }
  .launchpad_content .add_agents .hint {
    font-size: 12px;
    margin-left: 3px; }
  .launchpad_content .add_agents .btn-info {
    margin-top: 20px; }
  .launchpad_content .launchpad-task {
    text-align: center;
    padding: 25px 0px 0px 0px;
    margin: auto; }
    .launchpad_content .launchpad-task a.guideflow_hovered {
      text-decoration: underline; }
    .launchpad_content .launchpad-task h3 {
      margin: -8px 0px 20px 0px;
      font-size: 17px;
      color: #2F3941;
      /* Grey-800 */ }
    .launchpad_content .launchpad-task p {
      width: 63.5%;
      margin: 20px auto 15px;
      color: #2F3941;
      /* Grey-800 */ }
    .launchpad_content .launchpad-task hr {
      background-color: #E9EBED;
      /* Grey-200 */
      width: 70%;
      border: none;
      margin-left: auto;
      margin-right: auto; }
    .launchpad_content .launchpad-task + button {
      margin-top: 0px !important; }
    .launchpad_content .launchpad-task button {
      padding: 5px 25px;
      margin: 0px auto 10px;
      min-width: 110px;
      display: block; }
    .launchpad_content .launchpad-task .content {
      background-color: #fff;
      position: relative;
      margin: 35px auto;
      border: 1px solid #D8DCDE;
      /* Grey-300 */
      border-radius: 5px;
      padding: 5px;
      box-shadow: 0 1px 2px #D8DCDE;
      /* Grey-300 */
      max-width: 900px;
      min-width: 480px; }
      .launchpad_content .launchpad-task .content .settings {
        display: block;
        width: 100%;
        height: 500px; }
      .launchpad_content .launchpad-task .content .classic-form iframe {
        height: 550px; }
      .launchpad_content .launchpad-task .content .classic-form.update-profile iframe {
        height: 800px; }
      .launchpad_content .launchpad-task .content .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 0px;
        height: 0;
        overflow: hidden; }
      .launchpad_content .launchpad-task .content .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .launchpad_content .launchpad-task .content .add_agents textarea {
        width: 95%;
        padding-bottom: 20%;
        margin-top: 20px; }
      .launchpad_content .launchpad-task .content .benchmark {
        background-color: #f5f5f5; }
        .launchpad_content .launchpad-task .content .benchmark .survey {
          margin: 3px auto;
          padding: 30px 10px; }
      .launchpad_content .launchpad-task .content .triangle-up {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 14px solid #D8DCDE;
        /* Grey-300 */
        top: -14px;
        position: absolute;
        margin-left: -20px;
        margin-right: auto;
        left: 50%; }
      .launchpad_content .launchpad-task .content .triangle-up:before {
        content: " ";
        z-index: 0;
        width: 0;
        height: 0;
        border-left: 19px solid transparent;
        border-right: 19px solid transparent;
        border-bottom: 13px solid #fff;
        position: absolute;
        margin-left: -19px;
        left: 50%;
        top: 1px; }
      .launchpad_content .launchpad-task .content .screenshot {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 438px; }
      .launchpad_content .launchpad-task .content .getting-started-lm {
        width: 100%;
        height: 438px;
        padding: 25px 0; }
        .launchpad_content .launchpad-task .content .getting-started-lm h1 {
          padding: 25px 130px; }
    .launchpad_content .launchpad-task .done {
      float: right;
      margin-top: 10px;
      background-color: #fff;
      background-image: none; }
    .launchpad_content .launchpad-task .done.guideflow_hovered {
      background-color: #E9EBED;
      /* Grey-200 */ }

.modal-add-twitter {
  width: 575px; }
  .modal-add-twitter h1 {
    font-size: 20px;
    margin-bottom: 10px; }
  .modal-add-twitter .modal-body {
    background-color: #E9EBED;
    /* Grey-200 */
    padding: 10px;
    margin: 15px; }
  .modal-add-twitter .login {
    border-radius: 0;
    color: white;
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    padding: 0 0 0 1px; }
  .modal-add-twitter .login.twitter {
    background: #40ccff url(/images/twitter_newbird_boxed_whiteonblue.png) left -5px no-repeat;
    border-top: 1px solid #879AC0;
    border-bottom: 1px solid #1A356E; }
    .modal-add-twitter .login.twitter span {
      background: #40CCFF;
      margin: 1px 2px 0 35px;
      padding: 4px 6px 5px 6px;
      display: inline-block; }
  .modal-add-twitter .modal-header, .modal-add-twitter .modal-footer {
    display: none; }

.benchmark {
  position: relative; }
  .benchmark .global, .benchmark .industry {
    background-color: white;
    padding: 5px;
    width: 200px;
    height: 385px;
    text-align: center;
    border: 1px solid #D8DCDE;
    /* Grey-300 */
    border-radius: 1px;
    box-shadow: 0 0 6px #68737D;
    cursor: default; }
    .benchmark .global .category, .benchmark .industry .category {
      background-color: #2F3941;
      /* Grey-800 */
      color: white;
      font-size: 14px;
      height: 50px;
      padding-top: 5px;
      line-height: 15px; }
    .benchmark .global .data, .benchmark .industry .data {
      color: #78a300;
      font-size: 53px;
      font-weight: 400;
      line-height: 45px;
      padding-top: 20px;
      margin: 5px 0;
      height: 85px;
      position: relative; }
    .benchmark .global .description, .benchmark .industry .description {
      color: #68737D;
      font-size: 14px;
      font-weight: 400;
      position: absolute;
      top: 70px;
      width: 100%;
      text-shadow: none;
      line-height: 15px; }
      .benchmark .global .description span, .benchmark .industry .description span {
        display: table-cell;
        height: 30px;
        width: 200px;
        vertical-align: middle; }
  .benchmark .announcement {
    position: absolute;
    left: 550px;
    top: 75px; }
  .benchmark .global .category span {
    display: table-cell;
    height: 45px;
    width: 200px;
    vertical-align: middle;
    line-height: 18px; }
  .benchmark .global .data {
    background-color: #E9EBED;
    /* Grey-200 */
    text-shadow: rgba(0, 0, 0, 0.5) -1px -1px 0; }
  .benchmark .industry {
    position: absolute;
    left: 740px;
    top: 85px; }
    .benchmark .industry .data {
      color: #2F3941;
      /* Grey-800 */
      background-color: #f6f6f6; }
    .benchmark .industry .dim {
      color: #68737D;
      margin-bottom: 3px; }
  .benchmark .unit {
    font-size: 23px;
    text-shadow: none; }
  .benchmark .survey {
    width: 100%;
    min-width: 810px;
    position: relative;
    padding-top: 40px; }
    .benchmark .survey select {
      width: 95%;
      margin: 0px 0px 10px;
      border: 1px solid #C2C8CC;
      /* Grey-400 */
      padding: 2px 2px 2px 5px; }
      html[data-rtl-language='true'] .benchmark .survey select {
        padding: 2px 5px 2px 2px; }
      .benchmark .survey select option {
        background-color: #fff; }
    .benchmark .survey select.guideflow_hovered {
      background-color: #f0f0f0; }
    .benchmark .survey hr {
      margin-bottom: 35px; }
    .benchmark .survey .hr-label {
      position: absolute;
      left: 0;
      top: 0;
      padding: 0px 7px;
      background-color: #78a300;
      color: white;
      font-size: 11px; }
    .benchmark .survey input[type="text"] {
      margin-top: 10px;
      margin-left: 5px;
      text-align: center;
      width: 91%;
      height: 16px; }
    .benchmark .survey .industry, .benchmark .survey .global, .benchmark .survey .selection {
      position: relative;
      top: 0px;
      left: auto;
      float: left;
      box-shadow: none; }
      html[data-rtl-language='true'] .benchmark .survey .industry, html[data-rtl-language='true'] .benchmark .survey .global, html[data-rtl-language='true'] .benchmark .survey .selection {
        right: auto;
        float: right; }
    .benchmark .survey .selection {
      width: 300px;
      margin-right: 30px;
      text-align: right; }
      html[data-rtl-language='true'] .benchmark .survey .selection {
        margin-left: 30px;
        margin-right: 0; }
      .benchmark .survey .selection button {
        float: right; }
      .benchmark .survey .selection .inputs {
        margin-bottom: 30px; }
    .benchmark .survey .submit {
      width: 95%; }
    .benchmark .survey .vs {
      float: left;
      margin: 25px 7px;
      color: #C2C8CC;
      /* Grey-400 */
      font-size: 17px; }
      html[data-rtl-language='true'] .benchmark .survey .vs {
        float: right; }
  .benchmark .contextual-tooltip {
    float: left;
    margin-left: 15px;
    margin-top: 30px;
    clear: both; }
    html[data-rtl-language='true'] .benchmark .contextual-tooltip {
      float: right;
      margin-left: 0; }
    .benchmark .contextual-tooltip .tip {
      bottom: 47px;
      width: 410px; }

html[lang|="ja"] #wrapper.os-windows .launchpad_content .tour_page.slide .content h3, html[lang|="ja"] #wrapper.os-windows .launchpad_content .tour_page.slide .content p {
  font-family: inherit; }

html[lang|="ja"] #wrapper.os-windows .launchpad_content .tour_page.slide .content h3 {
  font-size: 4.5em; }

html[lang|="ja"] #wrapper.os-windows .launchpad_content .tour_page.slide .content p {
  font-size: 1.5em; }

html[lang|="ja"] #wrapper.os-windows .benchmark .unit,
html[lang|="ja"] #wrapper.os-windows .benchmark .industry .description,
html[lang|="ja"] #wrapper.os-windows .benchmark .global .description,
html[lang|="ja"] #wrapper.os-windows .benchmark .industry .category,
html[lang|="ja"] #wrapper.os-windows .benchmark .global .category {
  font-size: 15px;
  top: 65px; }

html[lang|="ja"] #wrapper.os-windows .benchmark .unit {
  font-size: 25px; }

html[lang|="ja"] #wrapper .launchpad_content .tour_page.slide .content h3, html[lang|="ja"] #wrapper .launchpad_content .tour_page.slide .content p {
  width: 415px; }

/* END ./app/assets/stylesheets/areas/launchpad.scss */
/* BEGIN ./app/assets/stylesheets/areas/stacked_menus.scss */
.stacked_menu_settings {
  padding: 0 20px 40px 20px; }
  html[data-rtl-language='true'] .stacked_menu_settings {
    direction: rtl; }
  .stacked_menu_settings .section .title {
    font-size: 12px;
    font-weight: 600;
    padding: 10px 10px 16px 0;
    margin: 20px 0 8px 0;
    border-bottom: 1px solid #E9EBED;
    /* Grey-200 */ }
    .stacked_menu_settings .section .title i {
      opacity: 0.9; }
  .stacked_menu_settings .section .new-label {
    color: #1f73b7;
    padding-left: 3px;
    font-size: 9px;
    font-weight: 600; }
  .stacked_menu_settings .section .external-link-icon {
    display: inline-block;
    position: relative;
    top: 2px;
    width: 12px;
    height: 12px; }
    html[data-rtl-language='true'] .stacked_menu_settings .section .external-link-icon {
      transform: rotate(-90deg); }

/* END ./app/assets/stylesheets/areas/stacked_menus.scss */
/* BEGIN ./app/assets/stylesheets/areas/audit_notification_modal.scss */
/* Grey-300 */
.audit-notification-modal .cancel {
  float: left; }

.audit-notification-modal .modal-body {
  max-height: 550px;
  padding: 0; }
  .audit-notification-modal .modal-body .body {
    padding: 15px; }
  .audit-notification-modal .modal-body table {
    margin: 0;
    color: #68737D; }
    .audit-notification-modal .modal-body table tr:first-child th {
      width: 1px;
      white-space: nowrap; }
    .audit-notification-modal .modal-body table tr:first-child td, .audit-notification-modal .modal-body table tr:first-child th {
      border-top: 0; }
    .audit-notification-modal .modal-body table tr:last-child th, .audit-notification-modal .modal-body table tr:last-child td {
      border-bottom: 1px solid #D8DCDE; }
    .audit-notification-modal .modal-body table th {
      padding-left: 15px; }

/* END ./app/assets/stylesheets/areas/audit_notification_modal.scss */
/* BEGIN ./app/assets/stylesheets/areas/suspended_ticket.scss */
.suspended-ticket-modal .cancel {
  float: left; }

.suspended-ticket-modal .dropdown-menu strong {
  font-weight: 400; }

.suspended-ticket-modal .modal-body {
  max-height: 550px;
  padding: 0; }
  .suspended-ticket-modal .modal-body .body {
    padding: 15px; }
  .suspended-ticket-modal .modal-body table {
    margin: 0;
    color: #68737D; }
    .suspended-ticket-modal .modal-body table tr:first-child td, .suspended-ticket-modal .modal-body table tr:first-child th {
      border-top: 0; }
    .suspended-ticket-modal .modal-body table tr:last-child th, .suspended-ticket-modal .modal-body table tr:last-child td {
      border-bottom: 1px solid #D8DCDE; }
    .suspended-ticket-modal .modal-body table th {
      padding-left: 15px; }

ul.recovery_notification {
  margin: 0 0 8px 8px; }
  ul.recovery_notification li {
    list-style: none;
    margin-top: 8px; }

/* END ./app/assets/stylesheets/areas/suspended_ticket.scss */
/* BEGIN ./app/assets/stylesheets/areas/remove_organization_modal.scss */
.remove-organization-modal button:first-of-type {
  float: left; }

.remove-organization-modal li {
  padding-bottom: 10px; }

.remove-organization-modal .modal-body p:last-of-type {
  padding-bottom: 0; }

/* END ./app/assets/stylesheets/areas/remove_organization_modal.scss */
/* BEGIN ./app/assets/stylesheets/areas/shared_onboarding.scss */
.email-onboarding-animation {
  width: 275px;
  height: 80px;
  margin: 0 auto 60px auto;
  position: relative; }
  .email-onboarding-animation > span {
    font-size: 14px;
    padding-top: 60px;
    background-position: top center;
    background-repeat: no-repeat; }
    .email-onboarding-animation > span.left-customer {
      background-image: url(https://html-assets-prod.guideflow.com/b5aaac7c021d3bc2090c4ecaa8ad45ee9dce2241);
      background-size: 52px 52px;
      float: left; }
    .email-onboarding-animation > span.right-zendesk {
      background-image: url(https://html-assets-prod.guideflow.com/6991acc5a8f96bf95776b4d5bdbad0bdf094f842);
      background-size: 50px 50px;
      float: right;
      text-align: right; }
  .email-onboarding-animation .moving-email {
    width: 120px;
    height: 24px;
    margin: 0 auto 5px auto; }
    .email-onboarding-animation .moving-email.email-ltr {
      background: url(https://html-assets-prod.guideflow.com/29c9b1859a499cb49577c976cffe21c4af614e69) center center no-repeat;
      top: 44px; }
    .email-onboarding-animation .moving-email.email-rtl {
      background: url(https://html-assets-prod.guideflow.com/e57fb48531bfc357903213ff36b32fd35b7a7099) center center no-repeat; }

@keyframes sending {
  0% {
    background-size: 0 0;
    background-position: 0 center; }
  3% {
    background-size: 24px 24px; }
  25% {
    background-size: 24px 24px; }
  48% {
    background-size: 0 0; }
  50% {
    background-position: 120px center; } }
    .email-onboarding-animation .moving-email > span {
      display: block;
      height: 24px;
      background: url(https://html-assets-prod.guideflow.com/ae657827cc5e77e67b45f55614e8e5de13deabf4) no-repeat;
      background-size: 0 0;
      animation: sending 6s infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 1s; }
    .email-onboarding-animation .moving-email.email-rtl > span {
      animation-delay: 4s;
      transform: scaleX(-1); }

/* END ./app/assets/stylesheets/areas/shared_onboarding.scss */
/* BEGIN ./app/assets/stylesheets/areas/standalone_product.scss */
.zd-standalone-product {
  position: absolute;
  left: 0;
  top: 50px;
  right: 0;
  bottom: 0; }
  .zd-standalone-product.has-navigation {
    left: 60px; }
  .zd-standalone-product iframe {
    width: 100%;
    height: 100%; }

/* END ./app/assets/stylesheets/areas/standalone_product.scss */
/* BEGIN ./app/assets/stylesheets/launchpad/email_v2.scss */
.email-v2-content {
  /* Grey-300 */
  /* 038153 is Green-600 */
  /* CC3340 is Red-600 */ }
  .email-v2-content .email-v2 {
    margin: 60px 15px 40px 15px;
    padding: 50px 30px;
    color: #2F3941;
    width: auto;
    margin: 0 auto; }
    .email-v2-content .email-v2 label {
      display: inline; }
    .email-v2-content .email-v2 div, .email-v2-content .email-v2 p, .email-v2-content .email-v2 h4, .email-v2-content .email-v2 h5 {
      cursor: default; }
    .email-v2-content .email-v2 a.guideflow_hovered {
      text-decoration: none; }
    .email-v2-content .email-v2 h4 {
      color: #2f3941;
      margin-top: 40px;
      margin-bottom: 5px;
      font-weight: 400;
      font-size: 17px; }
    .email-v2-content .email-v2 h5 {
      color: #2f3941;
      font-weight: 500;
      font-size: 16px; }
    .email-v2-content .email-v2 hr {
      margin: 30px auto;
      width: 82%; }
    .email-v2-content .email-v2 .title {
      font-size: 20px;
      font-weight: 400;
      color: #2f3941; }
      .email-v2-content .email-v2 .title + p {
        margin: 5px auto 30px;
        color: #68737D;
        /* Grey-600 */
        font-weight: 400; }
    .email-v2-content .email-v2 .action-button {
      background-color: #1F73B7;
      /* Blue-600 */
      border-color: #1F73B7;
      color: #ffffff;
      box-shadow: none;
      border-radius: 4px;
      transition: background-color 0.25s ease 0s, color 0.25s ease 0s;
      display: inline-block;
      font-size: 14px;
      letter-spacing: 1px;
      margin-bottom: 0px;
      padding: 11px 25px 10px;
      vertical-align: bottom; }
      .email-v2-content .email-v2 .action-button.guideflow_hovered {
        background-color: #337FBD;
        /* Blue-500 */
        border-color: #337FBD;
        color: #ffffff; }
      .email-v2-content .email-v2 .action-button:active, .email-v2-content .email-v2 .action-button.active {
        background-color: #1F73B7;
        border-color: #1F73B7;
        color: #ffffff; }
    .email-v2-content .email-v2 .back-icon {
      float: left;
      padding: 0px 15px;
      margin-left: 9%;
      margin-top: -35px;
      font-size: 35px;
      color: #68737D;
      transition: color 0.25s ease 0s; }
      .email-v2-content .email-v2 .back-icon.guideflow_hovered {
        text-decoration: none;
        color: #2f3941; }
    .email-v2-content .email-v2 .capsule {
      background-color: #E9EBED;
      max-height: 46px;
      overflow: hidden;
      border: 1px solid #D8DCDE;
      padding: 0px 0px 10px 0px;
      box-sizing: border-box;
      border-radius: 3px;
      transition: all 0.25s ease 0s; }
      .email-v2-content .email-v2 .capsule.collapsed.guideflow_hovered {
        background-color: #CEE2F2;
        border-color: #5293C7; }
      .email-v2-content .email-v2 .capsule.collapsed .header .arrow.down {
        display: inline-block; }
      .email-v2-content .email-v2 .capsule.expanded {
        max-height: 999px;
        background-color: #fff;
        border: 1px solid #038153; }
        .email-v2-content .email-v2 .capsule.expanded .header .arrow.up {
          display: inline-block; }
      .email-v2-content .email-v2 .capsule .header {
        padding: 15px 25px;
        color: #2f3941;
        font-weight: 600;
        cursor: pointer;
        position: relative;
        border-radius: 3px; }
        .email-v2-content .email-v2 .capsule .header .arrow {
          transform: scale(2, 1);
          display: none;
          font-size: 7px;
          color: #68737D;
          line-height: 15px;
          position: absolute;
          right: 28px; }
      .email-v2-content .email-v2 .capsule .descriptions {
        display: table-cell;
        width: 60%;
        padding: 5px 25px;
        line-height: 150%;
        white-space: normal; }
      .email-v2-content .email-v2 .capsule .field {
        display: table-cell;
        width: 40%;
        vertical-align: middle;
        padding: 10px 25px; }
    .email-v2-content .email-v2 .contextual-tooltip {
      margin-left: 5px; }
      .email-v2-content .email-v2 .contextual-tooltip .info-icon {
        vertical-align: middle;
        width: 16px;
        height: 16px;
        font-size: 13px; }
      .email-v2-content .email-v2 .contextual-tooltip .tip {
        top: 0px;
        left: 21px; }
        .email-v2-content .email-v2 .contextual-tooltip .tip h5 {
          font-size: 12px;
          font-weight: 600; }
        .email-v2-content .email-v2 .contextual-tooltip .tip p {
          width: auto;
          margin: 10px 15px;
          color: #2f3941; }
    .email-v2-content .email-v2 .description {
      color: #2f3941;
      margin-bottom: 20px; }
    .email-v2-content .email-v2 .heading {
      font-weight: 400;
      color: #2f3941; }
    .email-v2-content .email-v2 .bold {
      font-weight: 500;
      color: #2f3941;
      padding: 0 10px; }
    .email-v2-content .email-v2 input[type=checkbox] {
      display: inline-block;
      vertical-align: middle;
      margin-right: 3px; }
    .email-v2-content .email-v2 .icon {
      font-family: 'entypo'; }
      .email-v2-content .email-v2 .icon.new-page {
        color: #87929D;
        /* Grey-500 */
        font-size: 25px;
        margin-left: 2px;
        vertical-align: sub;
        line-height: 40%; }
    .email-v2-content .email-v2 .input-section {
      margin: 30px auto;
      width: 420px;
      text-align: left; }
      .email-v2-content .email-v2 .input-section span {
        margin: 5px 0; }
    .email-v2-content .email-v2 .section {
      margin-top: 15px;
      margin-bottom: 40px; }
    .email-v2-content .email-v2 .hint {
      color: #2f3941;
      margin: 5px auto;
      width: 100%; }
    .email-v2-content .email-v2 .outer {
      margin: 0 auto; }
      .email-v2-content .email-v2 .outer .left {
        float: left;
        margin-left: 9%; }
      .email-v2-content .email-v2 .outer .right {
        float: right;
        margin-right: 9%; }
    .email-v2-content .email-v2 .error {
      display: none;
      color: #CC3340;
      padding: 5px 0; }
      .email-v2-content .email-v2 .error .circle-icon {
        border: 1px solid #CC3340;
        color: #CC3340;
        cursor: default;
        font-weight: 600;
        vertical-align: top; }
        .email-v2-content .email-v2 .error .circle-icon.guideflow_hovered {
          border-color: #CC3340;
          color: #CC3340; }
      .email-v2-content .email-v2 .error .error-text {
        margin-left: 5px;
        margin-top: 1px;
        display: inline-block;
        max-width: 292px;
        white-space: normal; }
      .email-v2-content .email-v2 .error .error-description {
        display: block;
        margin-top: 5px;
        color: #2f3941;
        white-space: normal;
        line-height: 1.5; }
    .email-v2-content .email-v2 .show {
      display: block; }
    .email-v2-content .email-v2 .invalid-text-border {
      border: 1px solid #CC3340; }
    .email-v2-content .email-v2 .select-disabled {
      -webkit-touch-callout: none;
      user-select: none; }
    .email-v2-content .email-v2 .circle-icon {
      color: #C2C8CC;
      /* Grey-400 */
      border: 1px solid #C2C8CC;
      /* Grey-400 */
      border-radius: 50%;
      width: 15px;
      height: 15px;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      transition: color 0.25s ease 0s, border 0.25s ease 0s;
      display: inline-block;
      text-align: center;
      cursor: pointer; }
      .email-v2-content .email-v2 .circle-icon.guideflow_hovered {
        color: #2f3941;
        border-color: #2f3941; }
      .email-v2-content .email-v2 .circle-icon.left {
        float: left; }
    .email-v2-content .email-v2 .email-list {
      text-align: left;
      margin-left: 80px; }
      .email-v2-content .email-v2 .email-list li {
        margin-top: 5px;
        margin-right: 9%;
        position: relative; }
        .email-v2-content .email-v2 .email-list li > div {
          padding: 5px 10px 0 10px; }
        .email-v2-content .email-v2 .email-list li .email-action {
          display: inline-block;
          position: absolute;
          right: 10px; }
      .email-v2-content .email-v2 .email-list .edit-column {
        display: inline-block;
        margin: 10px 0 10px 15px;
        vertical-align: top; }
      .email-v2-content .email-v2 .email-list .email-column {
        width: 240px; }
        .email-v2-content .email-v2 .email-list .email-column input {
          border: none; }
        .email-v2-content .email-v2 .email-list .email-column .email-local {
          width: 75px;
          padding-right: 5px;
          margin-right: -2px;
          text-align: right; }
        .email-v2-content .email-v2 .email-list .email-column .email-domain {
          width: 125px;
          background-color: #FAFAFA;
          color: #C2C8CC;
          /* Grey-400 */
          padding-left: 5px;
          text-align: left; }
      .email-v2-content .email-v2 .email-list .name-column {
        width: 200px; }
        .email-v2-content .email-v2 .email-list .name-column input {
          border: 0px;
          width: 190px; }
      .email-v2-content .email-v2 .email-list .editing {
        background-color: #E9EBED;
        /* Grey-200 */ }
    .email-v2-content .email-v2 .highlight {
      display: inline-block;
      color: #2f3941;
      font-weight: 500;
      font-size: 16px;
      margin: 5px auto;
      padding: 10px 100px;
      border-radius: 4px;
      border-bottom: 2px; }
    .email-v2-content .email-v2 .steps {
      margin: 15px auto;
      position: relative;
      display: inline-block; }
      .email-v2-content .email-v2 .steps hr {
        margin-top: -13px;
        width: 80%; }
    .email-v2-content .email-v2 .circle {
      border-radius: 50%;
      width: 25px;
      height: 25px;
      background-color: #C2C8CC;
      color: #FFF;
      display: inline-block;
      text-align: center;
      font-size: 15px;
      line-height: 26px;
      margin-left: 20px;
      margin-right: 20px;
      cursor: default; }
      .email-v2-content .email-v2 .circle.active {
        background-color: #038153;
        color: white; }
    .email-v2-content .email-v2 .line {
      border-bottom: 1px solid #2f3941;
      width: 50px; }
    .email-v2-content .email-v2.ready ul {
      width: 60%;
      margin: auto;
      text-align: left;
      list-style: disc; }
      .email-v2-content .email-v2.ready ul li {
        padding: 3px 0px; }
    .email-v2-content .email-v2.ready .graphics {
      margin: 30px auto 5px; }
    .email-v2-content .email-v2.ready .highlight {
      background-color: #F8F9F9;
      /* Grey-100 */
      margin-bottom: 15px;
      font-size: 18px;
      min-width: 40%; }
    .email-v2-content .email-v2.forwarding h4.highlight {
      font-size: 18px;
      color: #68737D;
      padding: 30px 5px;
      margin: 7px 0px;
      min-width: 100%;
      text-align: center;
      box-sizing: border-box; }
    .email-v2-content .email-v2.forwarding .outer .action-button {
      margin-top: -8px;
      margin-right: 9%; }
    .email-v2-content .email-v2.forwarding .email-input {
      max-width: 450px;
      text-align: left;
      display: inline-block;
      white-space: nowrap; }
      .email-v2-content .email-v2.forwarding .email-input .hint {
        font-size: 13px;
        margin: 5px 0px;
        max-width: 100%;
        line-height: 130%; }
      .email-v2-content .email-v2.forwarding .email-input .forwarding-email-input {
        padding: 8px 15px;
        margin-top: 7px;
        width: 290px;
        font-size: 14px; }
      .email-v2-content .email-v2.forwarding .email-input label {
        color: #2F3941;
        /* Grey-800 */
        display: block;
        font-weight: 500;
        white-space: normal;
        display: inline-block;
        padding: 0 15px; }
        html[data-rtl-language='true'] .email-v2-content .email-v2.forwarding .email-input label {
          text-align: right; }
    .email-v2-content .email-v2.forwarding .error-box {
      display: none;
      width: 60%;
      box-sizing: border-box;
      border: 1px solid #E9EBED;
      /* Grey-200 */
      border-radius: 4px;
      padding: 15px 15px 20px;
      margin: 0px auto 25px;
      text-align: left;
      background-color: #fdfdfd; }
      .email-v2-content .email-v2.forwarding .error-box.show {
        display: inherit; }
      .email-v2-content .email-v2.forwarding .error-box .error {
        display: inherit;
        margin-left: 25px;
        position: relative; }
        .email-v2-content .email-v2.forwarding .error-box .error .circle-icon {
          position: absolute;
          top: 4px;
          left: -25px; }
        .email-v2-content .email-v2.forwarding .error-box .error .error-text {
          margin-left: 0px;
          font-weight: 600;
          font-size: 13px; }
      .email-v2-content .email-v2.forwarding .error-box .message {
        margin: 0px 25px;
        width: auto;
        color: #2f3941; }
    .email-v2-content .email-v2.forwarding .help-content {
      margin: 10px 0px; }
      .email-v2-content .email-v2.forwarding .help-content code {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #D8DCDE;
        /* Grey-300 */
        padding: 4px 0px;
        color: #CC3340; }
        .email-v2-content .email-v2.forwarding .help-content code.loading {
          background: url(https://html-assets-prod.guideflow.com/dd93d365535d621a9f986266dabc25ef75c8fce0) no-repeat 50%;
          background-size: 15% 37%; }
    .email-v2-content .email-v2.forwarding .confirmation-checkbox {
      margin: 35px auto 10px;
      width: 89.5%; }
      .email-v2-content .email-v2.forwarding .confirmation-checkbox span {
        display: inline-block;
        width: 95%;
        vertical-align: top;
        line-height: 150%; }
    .email-v2-content .email-v2.forwarding .graphics {
      padding-top: 30px;
      overflow: hidden; }
      .email-v2-content .email-v2.forwarding .graphics .check-mark {
        display: inline-block;
        font-family: 'entypo';
        font-size: 180px;
        color: #038153;
        height: 150px;
        width: 150px;
        line-height: 88%;
        border-radius: 50%;
        border: 2px solid #038153;
        margin-bottom: 25px;
        margin-top: -30px; }
        #wrapper.os-windows .email-v2-content .email-v2.forwarding .graphics .check-mark {
          line-height: 37%; }
    .email-v2-content .email-v2.forwarding .image-asset {
      width: 400px;
      height: 150px;
      margin: 0px auto;
      padding: 20px 0px 30px; }
    .email-v2-content .email-v2.forwarding .email-static {
      background: url(https://html-assets-prod.guideflow.com/b8d902ee11d5f2ad06cdbc56115d98eaf330c6ca) no-repeat 50%;
      background-size: 35%; }
    .email-v2-content .email-v2.forwarding .email-animation {
      filter: grayscale(1);
      background: url(https://html-assets-prod.guideflow.com/fef16dd8122adc1aad1351dd136c8e474e58eba6) no-repeat 50%;
      background-size: 100%; }
    .email-v2-content .email-v2.forwarding .readings {
      text-align: left;
      margin-top: 15px; }
      .email-v2-content .email-v2.forwarding .readings h5, .email-v2-content .email-v2.forwarding .readings p {
        width: 60%; }
      .email-v2-content .email-v2.forwarding .readings h5 {
        font-weight: 400;
        margin: auto; }
    .email-v2-content .email-v2.forwarding .success-message {
      width: 60%;
      margin: auto; }
    .email-v2-content .email-v2.welcome h4 {
      font-size: 20px; }
      .email-v2-content .email-v2.welcome h4.highlight {
        padding: 8px 35px;
        margin-top: 10px; }
    .email-v2-content .email-v2.welcome .options {
      width: 84.5%;
      display: inline-block;
      margin: 25px auto 20px; }
    .email-v2-content .email-v2.welcome .option {
      display: inline-block;
      position: relative;
      width: 33.5%;
      vertical-align: top;
      margin: 30px 10px 10px;
      padding: 10px 3% 65px;
      background-color: #F8F9F9;
      /* Grey-100 */
      border-radius: 4px; }
      .email-v2-content .email-v2.welcome .option .icon {
        font-size: 120px;
        line-height: 110px; }
        #wrapper.os-windows .email-v2-content .email-v2.welcome .option .icon {
          line-height: 40%; }
      .email-v2-content .email-v2.welcome .option h5 {
        margin: 0; }
      .email-v2-content .email-v2.welcome .option .highlight {
        display: inline-block;
        margin-bottom: 15px; }
      .email-v2-content .email-v2.welcome .option .hint {
        font-size: 14px;
        margin: 5px 0 30px; }
      .email-v2-content .email-v2.welcome .option .action-footer {
        position: absolute;
        bottom: 25px;
        left: 0;
        text-align: center;
        width: 100%; }

/* END ./app/assets/stylesheets/launchpad/email_v2.scss */
/* BEGIN ./app/assets/stylesheets/bootstrap-image-gallery.scss */
/**
 * Bootstrap Image Gallery CSS 2.5.2
 * https://github.com/blueimp/Bootstrap-Image-Gallery
 *
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.modal-gallery {
  width: auto !important;
  max-height: none;
  outline: none; }

.modal-gallery .modal-body {
  max-height: none; }

.modal-gallery .modal-title {
  display: inline-block;
  max-height: 54px;
  overflow: hidden; }

.modal-gallery .modal-image {
  position: relative;
  margin: auto;
  min-width: 128px;
  min-height: 128px;
  overflow: hidden;
  cursor: pointer; }

.modal-gallery .modal-image.guideflow_hovered:before,
.modal-gallery .modal-image.guideflow_hovered:after {
  content: '\2039';
  position: absolute;
  top: 50%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #2F3941;
  border: 3px solid #ffffff;
  border-radius: 23px;
  opacity: 0.5;
  z-index: 1; }

.modal-gallery .modal-image.guideflow_hovered:after {
  content: '\203A';
  left: auto;
  right: 15px; }

.modal-single .modal-image.guideflow_hovered:before,
.modal-single .modal-image.guideflow_hovered:after {
  display: none; }

.modal-loading .modal-image {
  background: url(https://html-assets-prod.guideflow.com/db2f67add24ff190f8238c59572a9c459b1b0213) center no-repeat; }

.modal-gallery.fade .modal-image {
  transition: width 0.15s ease, height 0.15s ease; }

.modal-gallery .modal-image * {
  position: absolute;
  top: 0;
  opacity: 0; }

.modal-gallery.fade .modal-image * {
  transition: opacity 0.5s linear; }

.modal-gallery .modal-image *.in {
  opacity: 1; }

.modal-fullscreen {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden; }

.modal-fullscreen.modal-loading {
  border: 0;
  box-shadow: none; }

.modal-fullscreen .modal-body {
  padding: 0; }

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  z-index: 2000; }

.modal-fullscreen .modal-footer {
  top: auto;
  bottom: 0; }

.modal-fullscreen .close,
.modal-fullscreen .modal-title {
  color: #fff;
  text-shadow: 0 0 2px rgba(33, 33, 33, 0.8); }

.modal-fullscreen .modal-header.guideflow_hovered,
.modal-fullscreen .modal-footer.guideflow_hovered {
  opacity: 1; }

@media (max-width: 767px) {
  .modal-gallery .btn span {
    display: none; }
  .modal-fullscreen {
    right: 0;
    left: 0; } }

.modal-footer .btn.modal-download {
  margin-left: 5px;
  float: left; }
  .modal-footer .btn.modal-download.legacy-download-link {
    display: none; }

/* END ./app/assets/stylesheets/bootstrap-image-gallery.scss */
/* END ./app/assets/stylesheets/screen.scss */

/* BEGIN ./app/assets/stylesheets/rtl.scss */
/* Right-to-Left Formatting in Ember-land is triggered by a
   convention unique to Zendesk Support: The selector
   html[data-rtl-language='true']
*/
html[data-rtl-language='true'] .bidi {
  direction: rtl;
  text-align: right; }
html[data-rtl-language='true'] label.bidi input {
  float: left; }
html[data-rtl-language='true'] .zd-player {
  direction: ltr; }
html[data-rtl-language='true'] .bidi-phone {
  direction: ltr;
  unicode-bidi: bidi-override; }
html[data-rtl-language='true'] .bidi-time {
  direction: ltr;
  unicode-bidi: bidi-override;
  float: left;
  margin-left: 155px;
  margin-right: 5px; }
html[data-rtl-language='true'] .bidi-override-ltr {
  direction: ltr;
  unicode-bidi: bidi-override; }

/* New Organization Modal */
html[data-rtl-language='true'] .modal-header h3.bidi-element {
  float: right; }
html[data-rtl-language='true'] a.close.bidi-element {
  float: inherit;
  margin-left: 5px; }
html[data-rtl-language='true'] .btn-inverse.bidi-element {
  float: left; }
html[data-rtl-language='true'] .btn.bidi-element {
  float: left; }
html[data-rtl-language='true'] label.bidi > span.bidi-element {
  margin-top: 0; }

/* Reset Sort Order Message Positioning */
html[data-rtl-language='true'] section.filters .right header h1 span {
  right: 125px; }

/* Overrides for zendesk_menus.scss */
html[data-rtl-language='true'] .zd-icon-arrow-right, html[data-rtl-language='true'] .zd-icon-arrow-left {
  left: 9px;
  right: inherit;
  transform: rotate(180deg); }
html[data-rtl-language='true'] .zd-menu-item-icon {
  left: auto;
  right: 7px; }

/* Overrides for _navs.scss */
html[data-rtl-language='true'] .nav {
  margin-right: 0; }
html[data-rtl-language='true'] .filter-list-editor .nav-pills > li {
  float: right; }
html[data-rtl-language='true'] .nav-pills > li > a {
  margin-left: 2px;
  margin-right: 0; }

/* vendor overrides for rtl */
html[data-rtl-language='true'] .modal {
  direction: rtl; }
  html[data-rtl-language='true'] .modal.people_form {
    direction: inherit; }
html[data-rtl-language='true'] .popover.ticket_summary {
  direction: rtl; }
html[data-rtl-language='true'] .table-condensed td {
  text-align: right; }

html[data-rtl-language='true'] .zd-tag-editor-holder .zd-searchmenu-base {
  text-align: right;
  padding-left: 3px;
  padding-right: 8px;
  margin-left: 0;
  margin-right: 1px; }
html[data-rtl-language='true'] .zd-tag-item {
  margin: 0 0 3px 3px;
  padding: 3px 6px 4px 17px; }
html[data-rtl-language='true'] .zd-tag-close {
  left: 1px;
  right: auto;
  padding: 3px;
  padding-left: 2px; }
html[data-rtl-language='true'] .zd-icon-arrow-down {
  left: 7px;
  right: auto; }
html[data-rtl-language='true'] .zd-icon-arrow-up {
  left: 7px;
  right: auto; }
html[data-rtl-language='true'] .zd-selectmenu-base {
  text-align: right;
  padding: 0 5px 0 0; }
html[data-rtl-language='true'] .macro-selector .zd-selectmenu-base .icon {
  margin: 2px 0 0 2px; }
html[data-rtl-language='true'] .zd-selectmenu-base-content {
  direction: rtl;
  padding-left: 22px;
  padding-right: 0; }
html[data-rtl-language='true'] .zd-menu-list-holder {
  direction: rtl;
  margin-right: 0; }
html[data-rtl-language='true'] .zd-menu-item.group > a {
  padding-left: 0;
  padding-right: 27px; }
html[data-rtl-language='true'] .zd-menu-item.agent > a {
  padding-left: 0;
  padding-right: 27px; }
/*
 * SVG icons that can be reflected as in a mirror
 *
 * Example:
 *   ...
 *
 */
html[data-rtl-language='true'] .svg-reflectible > svg {
  transform: scaleX(-1); }

/* END ./app/assets/stylesheets/rtl.scss */
/* END ./app/assets/stylesheets/application.scss */

.l-float-right {
  float: right;
}

/* New Agent Home */
.AgentHome .pane, .AgentHome .pane > .ember-view {
  bottom: 0;
}

/* Polaris conversation log layout and scrolling */

.polaris-react-component,
.polaris-react-component *,
.polaris-react-component *::after,
.polaris-react-component *::before {
  box-sizing: border-box;
}

.omni-conversation-pane .ember-view {
  max-width: 100%;
}

.omni-conversation-pane {
  display: flex;
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
}

.omni-conversation-pane .ember-view:first-child {
  display: flex;
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
  flex-direction: column;
}

.ticket.section.polaris {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.conversation-polaris {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
}

.conversation-polaris__header {
  flex: 0 0 auto;
}

.conversation-polaris__body {
  flex: 1 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.conversation-polaris__footer {
  background: #FFFFFF;
  flex: 0 0 auto;
  padding: 0 20px;
}

.conversation-polaris__body--fixed {
  position: relative;
}

.conversation-polaris__body--reversed {
  flex-direction: column-reverse;
}

.conversation-polaris__body--fixed {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.conversation-polaris__body--reversed-child {
  flex-direction: column;
}

.conversation-polaris__body--reversed,
.conversation-polaris__body--reversed-child,
.conversation-polaris__body--reversed-child > .polaris-react-component {
  height: 100%;
}

/* Border hack for spacing last element in flex display. See https://www.chenhuijing.com/blog/flexbox-and-padding */
.conversation-polaris__body .comment_input_wrapper,
.conversation-polaris__footer .comment_input_wrapper {
  border-bottom: 20px solid transparent;
  min-height: initial;
}

.conversation-polaris__body .event-container {
  padding-top: 6px;
  flex: 1;
}

.conversation-polaris__footer .event .content {
  margin: 0;
}

.conversation-polaris__body .comment_input .options {
  margin: 0;
}

.conversation-polaris__body .add_comment_attachment_buttons {
  margin: 0;
}

.polaris .conversation-polaris__body .comment_input {
  padding-bottom: 0;
}

.conversation-polaris .zendesk-editor--rich-text-comment {
  min-height: 46px;
  box-sizing: border-box;
  overflow: auto;
}

.conversation-polaris .translation_attribution_wrapper {
  margin-right: 20px;
}

.rich_text .conversation-polaris__body .comment-actions {
  align-items: center;
  height: 40px;
  border: 1px solid #D8DCDE;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  display: flex;
}

/* Editor tabs adjustment to look like the garden */

.rich_text .conversation-polaris__body .comment-actions .btn {
  line-height: 37px;
  padding: 0 28px;
  margin-right: 0;
}

.rich_text .conversation-polaris__body .comment-actions .btn.active {
  color: #1F73B7;
}

.rich_text .conversation-polaris__body .editor .zendesk-editor--rich-text-comment {
  border-radius: 0 !important;
}

.rich_text .conversation-polaris__body .comment_input .content {
  margin: 0px 16px;
}

/* Editor voice button adjustments */

.rich_text .conversation-polaris__body .comment_input .call-back {
  margin: 4px 4px 0 auto;
  height: 32px;
  justify-self: flex-end;
  width: 32px;
  box-sizing: border-box;
}

.rich_text .conversation-polaris__body .comment_input .call-back.guideflow_hovered {
  box-shadow: 0px 0px 0px 1px rgba(50, 50, 50, 0.15), 0px 1px 0px 1px rgba(50, 50, 50, 0.1);
  border-radius: 4px;
}

.rich_text .conversation-polaris__body .comment_input .call-back .icon {
  margin-top: 0;
}

.rich_text .conversation-polaris__body .comment_input .call-back .toggle {
  margin-top: 0;
  padding: 3px 5px 4px 1px;
}

.rich_text .conversation-polaris__body .comment_input .header .call-back .caret {
  top: 13px;
  right: 26px;
}

.rich_text .conversation-polaris__body .editor {
  margin: 0;
}

.rich_text .conversation-polaris__body .comment_input {
  padding: 0;
}

.conversation-polaris__body .zendesk-editor--rich-text-container {
  border-radius: 0;
}

.conversation-polaris__body .comment_input:not(.is-public) .zendesk-editor--rich-text-container {
  background-color: #FFF8ED;
  border-color: #FCDBA9;
}

.polaris .conversation-polaris__body .email-deliverability-warnings {
  color: #AD5E18; /* yellow700 */
  display: block;
  line-height: 12px;
  padding: 3px 0;
  margin-bottom: -20px;
}

.polaris .conversation-polaris__body .email-deliverability-warnings .warning-icon {
  width: 12px;
  height: 12px;
}

.polaris .conversation-polaris__body .email-deliverability-warnings .warning-text {
  font-size: 12px;
  line-height: 12px;
}

.polaris .conversation-polaris__body .email-deliverability-warnings .warning-icon circle {
  fill: currentColor;
}

.polaris .conversation-polaris__body .email-deliverability-warnings .warning-icon path {
  stroke: currentColor;
}

.polaris .event:not(.is-public) .comment {
  background-color: #FFF8ED;
  border-color: #FCDBA9;
  margin-bottom: 0;
}

.polaris .event {
  padding: 10px 0;
}

.polaris .event .header .meta {
  top: 7px;
}

.polaris .event .header .meta time {
  color: #68737D;
}

.polaris .zd-comment .signature {
  white-space: normal;
}

.polaris .zd-comment .signature p {
  margin-bottom: revert;
}

.react-growl-container .jGrowl {
  position: static;
  padding: 5px 0;
}

.redacted-image-content {
  width: 180px;
  height: 100px;
  background: rgb(248, 249, 249);
  display: inline-flex;
  justify-content: center;
  padding: 12px;
  align-items: center;
  font-size: 12px;
  color: rgb(104, 115, 125);
}

/* Grid layout in ticket workspace */
.ticket-workspace-grid {
  max-width: calc( 100vw - 60px);
  min-width: 528px;
  display: grid;
  grid-template-columns: minmax(40px, max-content) minmax(auto, 1fr) minmax(48px, max-content);
  grid-template-areas: 'ticket-fields-panel main-conversation-panel context-panel';

  position: absolute;
  top: 101px;
  left: 60px;
  right: 0;
  bottom: 50px;
}
.main_panes.ipm-alert .ticket-workspace-grid {
  height: calc(100vh - 203px);
}
html[data-rtl-language='true'] .ticket-workspace-grid {
  direction: rtl;
  left: 0;
  right: 60px;
}
.grid-ticket-fields-panel [class~="ember-view"]:empty {
  display: none;
}

/* Grid layout in ticket workspace - ticket fields */
.grid-ticket-fields-panel {
  grid-area: ticket-fields-panel;
  position: relative;
  width: 308px;
  border-right: 1px solid #D8DCDE;
  box-sizing: border-box;
}
html[data-rtl-language='true'] .grid-ticket-fields-panel {
  border-left: 1px solid #D8DCDE;
  border-right: 0;
}
.grid-ticket-fields-panel .pane.left.section.with-omnipanel {
  position: absolute;
  width: 100%;
  z-index: 8;
}

.zd-searchmenu.requester-menu.zd-state-focus.zd-state-open.ticket-panes-grid .zd-menu-root.zd-menu-panel-root.zd-menu-autofit-mode.zd-state-zero {
  min-width: 240px;
}

/* grid layout within ticket fields */
.grid-ticket-fields-panel .ticket-sidebar .ticket_fields .property_box:first-child {
  padding-top: 16px;
}
.grid-ticket-fields-panel .ticket-sidebar .ticket_fields .property_box {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax( max( 80px, calc((100% - 100px) / 6)), 1fr));
  display: grid;
  row-gap: 16px;
  column-gap: 20px;
  padding: 16px 20px;
}
.grid-ticket-fields-panel .ticket-sidebar .property_box.ticket_properties {
  padding-top: 16px;
}
.grid-ticket-fields-panel .ticket_fields .notification {
  margin: 12px 0px;
  width: 100%;
  box-sizing: border-box;
}
.grid-ticket-fields-panel .ticket-sidebar .zd-tag-menu-root {
  margin-top: 4px;
}
.grid-ticket-fields-panel .ticket-sidebar .sidebar_box_container label{
  margin: 0 !important;
  line-height: 1.7;
}
.grid-ticket-fields-panel .ticket-sidebar .property_box > .ember-view {
  grid-column: span 2;
}
.grid-ticket-fields-panel .ticket-sidebar .property_box.ticket_properties > .ember-view.form_field--narrow {
  grid-column: span 1;
  width: 100%;
  margin: 0;
}
.grid-ticket-fields-panel .ticket-sidebar .property_box.ticket_properties > .ember-view.form_field--narrow.expand-width {
  grid-column: span 2;
}

.grid-ticket-fields-panel .ticket-sidebar .property_box div.form_field, .grid-ticket-fields-panel .ticket-sidebar .property_box > :last-child {
  margin-bottom: 0;
}

/* full width footer */
.grid-ticket-fields-panel .pane.left.section.with-omnipanel.with-full-width-footer{
  bottom: 0px;
}

/* Grid layout in ticket workspace - main conversation */
.grid-main-conversation-panel {
  grid-area: main-conversation-panel;
  position: relative;
}
.grid-main-conversation-panel .pane.right.section {
  border-right: 1px solid #D8DCDE;
}
html[data-rtl-language='true'] .grid-main-conversation-panel .pane.right.section {
  border-right: 0;
  border-left: 1px solid #D8DCDE;
}
.grid-main-conversation-panel .pane.right.section {
  left: 0px !important;
  right: 0px !important;
}
.grid-main-conversation-panel .app.pane.omnipanel.collapsed{
  min-width: 48px;
}
html:not([data-rtl-language='true']) .grid-main-conversation-panel .pane.right.section.with_omnipanel_selector_only{
  border-right: 0;
}
html[data-rtl-language='true'] .grid-main-conversation-panel .pane.right.section.with_omnipanel_selector_only{
  border-left: 0;
}

/* Grid layout in ticket workspace - context panel */
.grid-context-panel {
  grid-area: context-panel;
  position: relative;
}
.grid-context-panel .omnipanel.app.pane {
  position: static;
}
/* ticket apps sidebar */
.grid-context-panel .with_omnipanel .workspace.apps:not(.ticket_editor_app), .main_panes.flexible_layout .grid-context-panel .ticket-app-sidebar {
  width: calc(100% - 48px);
  top: 0px;
  bottom: 0;
  border-right: 0px;
  border-left: 0px;
}
/* non-react ticket apps sidebar */
.main_panes.flexible_layout .grid-context-panel .with_omnipanel .workspace.apps .app_container {
  width: calc(100%);
}
.grid-context-panel .with_omnipanel .workspace.apps:not(.ticket_editor_app) {
  right: auto;
}
html[data-rtl-language='true'] .grid-context-panel .with_omnipanel .workspace.is_active.apps:not(.ticket_editor_app) {
  border-right: none;
  right: 0px;
}
.grid-context-panel .with_omnipanel .workspace.apps:not(.ticket_editor_app).is_active {
  left: 0px !important;
}
/* react ticket apps sidebar */
.main_panes.flexible_layout .grid-context-panel .ticket-app-sidebar {
  visibility: hidden;
  left: -200vw;
}
html[data-rtl-language='true'] .main_panes.flexible_layout .grid-context-panel .ticket-app-sidebar {
  right: auto;
}
.main_panes.flexible_layout .grid-context-panel .ticket-app-sidebar.active {
  visibility: visible;
  left: 0;
  right: auto;
}
html[data-rtl-language='true'] .main_panes.flexible_layout .grid-context-panel .ticket-app-sidebar.active {
  border-right: none;
  left: auto;
  right: 0px;
}
.instant-buy {
  /*
  Ember modal window is used only as a container for the React Instant Buy modal window that is shown above,
  so there is no need to make it visible.
  */
  opacity: 0;
}
/* This hides the IFRAME that is blocking the UI on a React error when running in development */
iframe[style*="2147483647"] {
  display: none;
}